import { t as DemoModeBanner_default } from "./DemoModeBanner-BXA28cY_.js";
import { i as isPrinting, n as getAvailablePrinters, o as printStatus, r as getPrintSettings, t as connectQZ } from "./printService-BpksXLUX.js";
import { Head, Link, router, usePage } from "@inertiajs/vue3";
import { computed, createBlock, createCommentVNode, createTextVNode, createVNode, defineComponent, onMounted, openBlock, ref, resolveDynamicComponent, toDisplayString, unref, useSSRContext, watch, withCtx } from "vue";
import { ssrIncludeBooleanAttr, ssrInterpolate, ssrLooseContain, ssrLooseEqual, ssrRenderAttr, ssrRenderClass, ssrRenderComponent, ssrRenderList, ssrRenderStyle, ssrRenderVNode } from "vue/server-renderer";
import { AlertTriangle, CheckCircle2, ChevronRight, Coffee, FileText, Flame, Grid, History, LayoutDashboard, LogOut, Maximize, Minimize, Minus, Moon, Plus, Printer, RefreshCw, Search, Settings, ShoppingCart, Snowflake, Split, Sun, Trash2, User, Users, X } from "lucide-vue-next";
import { DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuTrigger } from "radix-vue";
//#region resources/js/Pages/CafePOS/POS.vue?vue&type=script&setup=true&lang.ts
var POS_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
	__name: "POS",
	__ssrInlineRender: true,
	props: {
		products: {},
		outlets: {},
		selectedOutletId: {},
		ingredientStock: {},
		productStock: {},
		taxPercentage: {},
		servicePercentage: {},
		tables: {},
		customers: {},
		modifiers: {},
		promos: {},
		recentTransactions: {},
		waiters: {},
		couriers: {}
	},
	setup(__props) {
		const props = __props;
		const outletId = ref(props.selectedOutletId || (props.outlets[0] ? props.outlets[0].id : null));
		watch(outletId, (newVal) => {
			if (newVal) router.get(route("pos.index"), { outlet_id: newVal }, {
				preserveState: true,
				replace: true
			});
		});
		const search = ref("");
		const activeCategory = ref("All");
		const categories = [
			"All",
			"Coffee",
			"Non-Coffee",
			"Food",
			"Bakery",
			"Retail",
			"Other"
		];
		const cart = ref([]);
		const orderType = ref("take_away");
		const selectedTableId = ref(null);
		const selectedCustomerId = ref(1);
		const selectedPromoId = ref(null);
		const pointsToRedeem = ref(0);
		const selectedWaiterId = ref(null);
		const selectedCourierId = ref(null);
		const voucherCode = ref("");
		const appliedVoucher = ref(null);
		const voucherError = ref("");
		const filteredProducts = computed(() => {
			return props.products.filter((p) => {
				const matchesSearch = p.name.toLowerCase().includes(search.value.toLowerCase());
				const matchesCategory = activeCategory.value === "All" || p.category === activeCategory.value;
				return matchesSearch && matchesCategory;
			});
		});
		const getAvailableQty = (product, variant) => {
			if (!outletId.value) return 0;
			if (product.has_recipe) {
				let minAvailable = 999999;
				const applicableRecipes = product.recipes.filter((r) => r.variant === null || r.variant === variant);
				if (applicableRecipes.length === 0) return 0;
				for (const recipe of applicableRecipes) {
					const baseStock = props.ingredientStock[recipe.ingredient_id] || 0;
					let consumedInCart = 0;
					for (const item of cart.value) {
						const matchingRecipe = item.product.recipes.filter((r) => r.variant === null || r.variant === item.variant).find((r) => r.ingredient_id === recipe.ingredient_id);
						if (matchingRecipe) consumedInCart += item.qty * matchingRecipe.usage_qty;
						for (const modId of item.selectedModifiers) {
							const mod = props.modifiers.find((m) => m.id === modId);
							if (mod && mod.ingredient_id === recipe.ingredient_id && mod.usage_qty) consumedInCart += item.qty * mod.usage_qty;
						}
					}
					const remainder = baseStock - consumedInCart;
					const availableForThisIngredient = Math.floor(remainder / recipe.usage_qty);
					if (availableForThisIngredient < minAvailable) minAvailable = availableForThisIngredient;
				}
				return Math.max(0, minAvailable);
			} else {
				const baseStock = props.productStock[product.id] || 0;
				let consumedInCart = 0;
				for (const item of cart.value) if (item.product.id === product.id) consumedInCart += item.qty;
				return Math.max(0, baseStock - consumedInCart);
			}
		};
		const subtotal = computed(() => {
			return cart.value.reduce((sum, item) => {
				const modifiersPrice = item.selectedModifiers.reduce((modSum, modId) => {
					const mod = props.modifiers.find((m) => m.id === modId);
					return modSum + (mod ? mod.price : 0);
				}, 0);
				return sum + (item.product.price + modifiersPrice) * item.qty;
			}, 0);
		});
		const birthdayDiscount = computed(() => {
			if (!selectedCustomerId.value) return 0;
			const customer = props.customers.find((c) => c.id === selectedCustomerId.value);
			if (customer && customer.birth_date) {
				const today = /* @__PURE__ */ new Date();
				const birthDate = new Date(customer.birth_date);
				if (today.getDate() === birthDate.getDate() && today.getMonth() === birthDate.getMonth()) return subtotal.value * .1;
			}
			return 0;
		});
		const discountAmount = computed(() => {
			let disc = 0;
			if (selectedPromoId.value) {
				const promo = props.promos.find((p) => p.id === selectedPromoId.value);
				if (promo && subtotal.value >= promo.min_purchase) {
					if (promo.type === "percent") disc = subtotal.value * promo.value / 100;
					else if (promo.type === "nominal") disc = promo.value;
				}
			}
			if (appliedVoucher.value) {
				const v = appliedVoucher.value;
				if (v.type === "nominal") disc += Math.min(v.value, subtotal.value);
				else if (v.type === "percent") {
					let vDisc = subtotal.value * v.value / 100;
					if (v.max_discount) vDisc = Math.min(vDisc, v.max_discount);
					disc += Math.min(vDisc, subtotal.value);
				}
			}
			disc += birthdayDiscount.value;
			disc += pointsToRedeem.value * 1e3;
			return disc;
		});
		const serviceCharge = computed(() => {
			return subtotal.value * props.servicePercentage / 100;
		});
		const tax = computed(() => {
			return (subtotal.value + serviceCharge.value) * props.taxPercentage / 100;
		});
		const grandTotal = computed(() => {
			return Math.max(0, subtotal.value + serviceCharge.value + tax.value - discountAmount.value);
		});
		const paymentMethod = ref("cash");
		const cashReceived = ref(0);
		const changeDue = computed(() => {
			return Math.max(0, cashReceived.value - grandTotal.value);
		});
		const isReceiptModalOpen = ref(false);
		const receiptData = ref(null);
		const isSplitModalOpen = ref(false);
		const splitItems = ref([]);
		const isCheckingOut = ref(false);
		const getProductInitials = (name) => {
			return name.slice(0, 2).toUpperCase();
		};
		const isDark = ref(false);
		const isFullscreen = ref(false);
		onMounted(() => {
			isDark.value = document.documentElement.classList.contains("dark");
			document.addEventListener("fullscreenchange", () => {
				isFullscreen.value = !!document.fullscreenElement;
			});
		});
		const toggleFullscreen = () => {
			if (!document.fullscreenElement) document.documentElement.requestFullscreen().then(() => {
				isFullscreen.value = true;
			}).catch((err) => {
				console.error(err);
			});
			else document.exitFullscreen().then(() => {
				isFullscreen.value = false;
			});
		};
		const toggleTheme = () => {
			if (document.documentElement.classList.contains("dark")) {
				document.documentElement.classList.remove("dark");
				localStorage.setItem("theme", "light");
				isDark.value = false;
			} else {
				document.documentElement.classList.add("dark");
				localStorage.setItem("theme", "dark");
				isDark.value = true;
			}
		};
		const selectedCustomerPoints = computed(() => {
			const cust = props.customers.find((c) => c.id === selectedCustomerId.value);
			return cust ? cust.loyalty_points : 0;
		});
		const activeAlert = ref(null);
		let alertTimeoutId = null;
		const triggerAlert = (type, message) => {
			if (alertTimeoutId) clearTimeout(alertTimeoutId);
			activeAlert.value = {
				type,
				message
			};
			alertTimeoutId = setTimeout(() => {
				activeAlert.value = null;
			}, 4e3);
		};
		const page = usePage();
		watch(() => page.props.flash, (flash) => {
			if (flash?.success) triggerAlert("success", String(flash.success));
			else if (flash?.error) triggerAlert("error", String(flash.error));
		}, {
			deep: true,
			immediate: true
		});
		const activeMobileTab = ref("menu");
		const isPrinterSettingsOpen = ref(false);
		const printSettings = ref({
			method: "browser",
			posPrinter: "",
			kitchenPrinter: "",
			autoPrintPos: false,
			autoPrintKitchen: false
		});
		const availablePrinters = ref([]);
		const isConnectingQZ = ref(false);
		const qzConnectionStatus = ref("disconnected");
		onMounted(() => {
			printSettings.value = getPrintSettings();
			if (printSettings.value.method === "qz") checkQzConnection();
		});
		const checkQzConnection = async () => {
			isConnectingQZ.value = true;
			try {
				if (await connectQZ()) {
					qzConnectionStatus.value = "connected";
					availablePrinters.value = await getAvailablePrinters();
				} else {
					qzConnectionStatus.value = "disconnected";
					availablePrinters.value = [];
				}
			} catch (e) {
				qzConnectionStatus.value = "error";
				availablePrinters.value = [];
			} finally {
				isConnectingQZ.value = false;
			}
		};
		return (_ctx, _push, _parent, _attrs) => {
			_push(`<!--[-->`);
			_push(ssrRenderComponent(unref(Head), { title: "POS Cashier Terminal" }, null, _parent));
			_push(`<div class="min-h-screen lg:h-screen bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 flex flex-col overflow-y-auto lg:overflow-hidden select-none">`);
			if (activeAlert.value) {
				_push(`<div class="${ssrRenderClass([activeAlert.value.type === "success" ? "border-emerald-500/30" : "border-rose-500/30", "fixed top-6 right-6 z-[100] w-full max-w-sm overflow-hidden rounded-xl border bg-white/95 dark:bg-slate-955/95 backdrop-blur-md shadow-lg transition-all duration-300 pointer-events-auto select-none font-sans"])}"><div class="p-4 flex items-start gap-3 relative"><div class="${ssrRenderClass([activeAlert.value.type === "success" ? "bg-emerald-500" : "bg-rose-500", "absolute left-0 top-0 bottom-0 w-1"])}"></div><div class="flex-shrink-0 mt-0.5">`);
				ssrRenderVNode(_push, createVNode(resolveDynamicComponent(activeAlert.value.type === "success" ? unref(CheckCircle2) : unref(AlertTriangle)), { class: ["h-5 w-5", activeAlert.value.type === "success" ? "text-emerald-500" : "text-rose-500"] }, null), _parent);
				_push(`</div><div class="flex-1 min-w-0 pr-2"><p class="${ssrRenderClass([activeAlert.value.type === "success" ? "text-emerald-600 dark:text-emerald-400" : "text-rose-600 dark:text-rose-400", "text-[10px] font-extrabold uppercase tracking-widest leading-none mb-1.5"])}">${ssrInterpolate(activeAlert.value.type === "success" ? "Berhasil" : "Peringatan")}</p><p class="text-xs text-slate-700 dark:text-slate-300 font-bold leading-normal">${ssrInterpolate(activeAlert.value.message)}</p></div><button class="flex-shrink-0 p-1 hover:bg-slate-100 dark:hover:bg-slate-900 rounded-lg text-slate-400 dark:text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 transition-colors cursor-pointer">`);
				_push(ssrRenderComponent(unref(X), { class: "h-4 w-4" }, null, _parent));
				_push(`</button></div></div>`);
			} else _push(`<!---->`);
			_push(ssrRenderComponent(DemoModeBanner_default, null, null, _parent));
			if (!isFullscreen.value) {
				_push(`<header class="h-16 border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 px-4 xs:px-6 flex items-center justify-between flex-shrink-0 shadow-sm z-10 select-none"><div class="flex items-center gap-2">`);
				if (_ctx.$page.props.settings.site_logo) _push(`<div class="h-8 w-8 rounded-lg overflow-hidden border border-slate-100 dark:border-slate-800 flex items-center justify-center bg-slate-50 flex-shrink-0"><img${ssrRenderAttr("src", _ctx.$page.props.settings.site_logo)} alt="Logo" class="max-h-6 object-contain"></div>`);
				else _push(`<div class="h-8 w-8 rounded-lg bg-[#8c5a3c] flex items-center justify-center flex-shrink-0 text-white font-bold text-base"><span>${ssrInterpolate(_ctx.$page.props.settings.site_name?.charAt(0) ?? "C")}</span></div>`);
				_push(`<div class="flex flex-col"><span class="font-extrabold text-xs tracking-wider uppercase leading-none truncate max-w-[80px] xs:max-w-[120px]">${ssrInterpolate(_ctx.$page.props.settings.site_name)}</span><span class="text-[8px] text-slate-400 dark:text-slate-500 mt-0.5 leading-none hidden xs:inline">Terminal Kasir</span></div></div><div class="flex items-center gap-1.5 max-w-[130px] xs:max-w-none"><span class="text-[9px] text-slate-450 dark:text-slate-500 font-bold uppercase tracking-wider hidden xs:inline">Outlet:</span>`);
				if (!_ctx.$page.props.auth.user.outlet_id) {
					_push(`<select class="px-2 py-1 border border-slate-200 dark:border-slate-800 rounded-lg bg-transparent text-[11px] font-bold focus:outline-none focus:ring-1 focus:ring-[#8c5a3c] text-slate-900 dark:text-slate-100 cursor-pointer max-w-[90px] xs:max-w-none truncate"><!--[-->`);
					ssrRenderList(__props.outlets, (ot) => {
						_push(`<option${ssrRenderAttr("value", ot.id)}${ssrIncludeBooleanAttr(Array.isArray(outletId.value) ? ssrLooseContain(outletId.value, ot.id) : ssrLooseEqual(outletId.value, ot.id)) ? " selected" : ""}>${ssrInterpolate(ot.name)}</option>`);
					});
					_push(`<!--]--></select>`);
				} else _push(`<span class="text-[11px] font-bold px-2 py-1 bg-slate-100 dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-800 text-slate-700 dark:text-slate-300 max-w-[90px] xs:max-w-none truncate">${ssrInterpolate(__props.outlets.find((o) => o.id === outletId.value)?.name)}</span>`);
				_push(`</div><div class="flex items-center gap-2"><div class="sm:hidden">`);
				_push(ssrRenderComponent(unref(DropdownMenuRoot), null, {
					default: withCtx((_, _push, _parent, _scopeId) => {
						if (_push) {
							_push(ssrRenderComponent(unref(DropdownMenuTrigger), { class: "focus:outline-none cursor-pointer flex items-center justify-center h-8 w-8 rounded-full bg-[#8c5a3c]/10 text-[#8c5a3c] border border-[#8c5a3c]/20 hover:bg-[#8c5a3c]/20 transition-all select-none" }, {
								default: withCtx((_, _push, _parent, _scopeId) => {
									if (_push) _push(`<span class="text-xs font-bold font-mono"${_scopeId}>${ssrInterpolate(getProductInitials(_ctx.$page.props.auth.user.name))}</span>`);
									else return [createVNode("span", { class: "text-xs font-bold font-mono" }, toDisplayString(getProductInitials(_ctx.$page.props.auth.user.name)), 1)];
								}),
								_: 1
							}, _parent, _scopeId));
							_push(ssrRenderComponent(unref(DropdownMenuPortal), null, {
								default: withCtx((_, _push, _parent, _scopeId) => {
									if (_push) _push(ssrRenderComponent(unref(DropdownMenuContent), {
										class: "z-[100] min-w-[180px] bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl p-1.5 shadow-lg animate-in fade-in slide-in-from-top-1 duration-200",
										align: "end",
										"side-offset": 8
									}, {
										default: withCtx((_, _push, _parent, _scopeId) => {
											if (_push) {
												_push(`<div class="px-2 py-2 flex flex-col"${_scopeId}><span class="font-extrabold text-xs text-slate-850 dark:text-slate-250 leading-none"${_scopeId}>${ssrInterpolate(_ctx.$page.props.auth.user.name)}</span><span class="text-[9px] text-slate-400 dark:text-slate-500 mt-1 leading-none"${_scopeId}>${ssrInterpolate(_ctx.$page.props.auth.user.roles[0] || "Staff")}</span></div>`);
												_push(ssrRenderComponent(unref(DropdownMenuSeparator), { class: "h-px bg-slate-200 dark:bg-slate-800 my-1" }, null, _parent, _scopeId));
												if (_ctx.$page.props.auth.user.roles.includes("Super Admin") || _ctx.$page.props.auth.user.roles.includes("Owner") || _ctx.$page.props.auth.user.roles.includes("Admin")) _push(ssrRenderComponent(unref(DropdownMenuItem), { class: "cursor-pointer select-none rounded-lg px-2 py-2 text-[11px] font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 focus:bg-slate-50 dark:focus:bg-slate-800 focus:outline-none text-slate-700 dark:text-slate-350" }, {
													default: withCtx((_, _push, _parent, _scopeId) => {
														if (_push) _push(ssrRenderComponent(unref(Link), {
															href: _ctx.route("dashboard"),
															class: "w-full h-full flex items-center gap-1.5"
														}, {
															default: withCtx((_, _push, _parent, _scopeId) => {
																if (_push) {
																	_push(ssrRenderComponent(unref(LayoutDashboard), { class: "h-3.5 w-3.5" }, null, _parent, _scopeId));
																	_push(`<span${_scopeId}>Dashboard Admin</span>`);
																} else return [createVNode(unref(LayoutDashboard), { class: "h-3.5 w-3.5" }), createVNode("span", null, "Dashboard Admin")];
															}),
															_: 1
														}, _parent, _scopeId));
														else return [createVNode(unref(Link), {
															href: _ctx.route("dashboard"),
															class: "w-full h-full flex items-center gap-1.5"
														}, {
															default: withCtx(() => [createVNode(unref(LayoutDashboard), { class: "h-3.5 w-3.5" }), createVNode("span", null, "Dashboard Admin")]),
															_: 1
														}, 8, ["href"])];
													}),
													_: 1
												}, _parent, _scopeId));
												else _push(`<!---->`);
												_push(ssrRenderComponent(unref(DropdownMenuItem), {
													onClick: toggleTheme,
													class: "cursor-pointer select-none rounded-lg px-2 py-2 text-[11px] font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 focus:bg-slate-50 dark:focus:bg-slate-800 focus:outline-none text-slate-700 dark:text-slate-350 flex items-center gap-1.5"
												}, {
													default: withCtx((_, _push, _parent, _scopeId) => {
														if (_push) {
															if (isDark.value) _push(ssrRenderComponent(unref(Sun), { class: "h-3.5 w-3.5 text-amber-500" }, null, _parent, _scopeId));
															else _push(ssrRenderComponent(unref(Moon), { class: "h-3.5 w-3.5 text-slate-500 dark:text-slate-450" }, null, _parent, _scopeId));
															_push(`<span${_scopeId}>Tema: ${ssrInterpolate(isDark.value ? "Terang" : "Gelap")}</span>`);
														} else return [isDark.value ? (openBlock(), createBlock(unref(Sun), {
															key: 0,
															class: "h-3.5 w-3.5 text-amber-500"
														})) : (openBlock(), createBlock(unref(Moon), {
															key: 1,
															class: "h-3.5 w-3.5 text-slate-500 dark:text-slate-450"
														})), createVNode("span", null, "Tema: " + toDisplayString(isDark.value ? "Terang" : "Gelap"), 1)];
													}),
													_: 1
												}, _parent, _scopeId));
												_push(ssrRenderComponent(unref(DropdownMenuItem), {
													onClick: toggleFullscreen,
													class: "cursor-pointer select-none rounded-lg px-2 py-2 text-[11px] font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 focus:bg-slate-50 dark:focus:bg-slate-800 focus:outline-none text-slate-700 dark:text-slate-350 flex items-center gap-1.5"
												}, {
													default: withCtx((_, _push, _parent, _scopeId) => {
														if (_push) {
															if (isFullscreen.value) _push(ssrRenderComponent(unref(Minimize), { class: "h-3.5 w-3.5" }, null, _parent, _scopeId));
															else _push(ssrRenderComponent(unref(Maximize), { class: "h-3.5 w-3.5" }, null, _parent, _scopeId));
															_push(`<span${_scopeId}>${ssrInterpolate(isFullscreen.value ? "Keluar Fullscreen" : "Layar Penuh")}</span>`);
														} else return [isFullscreen.value ? (openBlock(), createBlock(unref(Minimize), {
															key: 0,
															class: "h-3.5 w-3.5"
														})) : (openBlock(), createBlock(unref(Maximize), {
															key: 1,
															class: "h-3.5 w-3.5"
														})), createVNode("span", null, toDisplayString(isFullscreen.value ? "Keluar Fullscreen" : "Layar Penuh"), 1)];
													}),
													_: 1
												}, _parent, _scopeId));
												_push(ssrRenderComponent(unref(DropdownMenuItem), {
													onClick: ($event) => isPrinterSettingsOpen.value = true,
													class: "cursor-pointer select-none rounded-lg px-2 py-2 text-[11px] font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 focus:bg-slate-50 dark:focus:bg-slate-800 focus:outline-none text-slate-700 dark:text-slate-350 flex items-center gap-1.5"
												}, {
													default: withCtx((_, _push, _parent, _scopeId) => {
														if (_push) {
															_push(ssrRenderComponent(unref(Settings), { class: "h-3.5 w-3.5" }, null, _parent, _scopeId));
															_push(`<span${_scopeId}>Pengaturan Printer</span>`);
														} else return [createVNode(unref(Settings), { class: "h-3.5 w-3.5" }), createVNode("span", null, "Pengaturan Printer")];
													}),
													_: 1
												}, _parent, _scopeId));
												_push(ssrRenderComponent(unref(DropdownMenuSeparator), { class: "h-px bg-slate-200 dark:bg-slate-800 my-1" }, null, _parent, _scopeId));
												_push(ssrRenderComponent(unref(DropdownMenuItem), { class: "cursor-pointer select-none rounded-lg px-2 py-2 text-[11px] font-bold hover:bg-rose-50 dark:hover:bg-rose-950/20 focus:bg-rose-50 dark:focus:bg-rose-955/20 focus:outline-none text-rose-600" }, {
													default: withCtx((_, _push, _parent, _scopeId) => {
														if (_push) _push(ssrRenderComponent(unref(Link), {
															href: _ctx.route("logout"),
															method: "post",
															as: "button",
															class: "w-full text-left h-full flex items-center gap-1.5 font-bold"
														}, {
															default: withCtx((_, _push, _parent, _scopeId) => {
																if (_push) {
																	_push(ssrRenderComponent(unref(LogOut), { class: "h-3.5 w-3.5" }, null, _parent, _scopeId));
																	_push(`<span${_scopeId}>Keluar</span>`);
																} else return [createVNode(unref(LogOut), { class: "h-3.5 w-3.5" }), createVNode("span", null, "Keluar")];
															}),
															_: 1
														}, _parent, _scopeId));
														else return [createVNode(unref(Link), {
															href: _ctx.route("logout"),
															method: "post",
															as: "button",
															class: "w-full text-left h-full flex items-center gap-1.5 font-bold"
														}, {
															default: withCtx(() => [createVNode(unref(LogOut), { class: "h-3.5 w-3.5" }), createVNode("span", null, "Keluar")]),
															_: 1
														}, 8, ["href"])];
													}),
													_: 1
												}, _parent, _scopeId));
											} else return [
												createVNode("div", { class: "px-2 py-2 flex flex-col" }, [createVNode("span", { class: "font-extrabold text-xs text-slate-850 dark:text-slate-250 leading-none" }, toDisplayString(_ctx.$page.props.auth.user.name), 1), createVNode("span", { class: "text-[9px] text-slate-400 dark:text-slate-500 mt-1 leading-none" }, toDisplayString(_ctx.$page.props.auth.user.roles[0] || "Staff"), 1)]),
												createVNode(unref(DropdownMenuSeparator), { class: "h-px bg-slate-200 dark:bg-slate-800 my-1" }),
												_ctx.$page.props.auth.user.roles.includes("Super Admin") || _ctx.$page.props.auth.user.roles.includes("Owner") || _ctx.$page.props.auth.user.roles.includes("Admin") ? (openBlock(), createBlock(unref(DropdownMenuItem), {
													key: 0,
													class: "cursor-pointer select-none rounded-lg px-2 py-2 text-[11px] font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 focus:bg-slate-50 dark:focus:bg-slate-800 focus:outline-none text-slate-700 dark:text-slate-350"
												}, {
													default: withCtx(() => [createVNode(unref(Link), {
														href: _ctx.route("dashboard"),
														class: "w-full h-full flex items-center gap-1.5"
													}, {
														default: withCtx(() => [createVNode(unref(LayoutDashboard), { class: "h-3.5 w-3.5" }), createVNode("span", null, "Dashboard Admin")]),
														_: 1
													}, 8, ["href"])]),
													_: 1
												})) : createCommentVNode("", true),
												createVNode(unref(DropdownMenuItem), {
													onClick: toggleTheme,
													class: "cursor-pointer select-none rounded-lg px-2 py-2 text-[11px] font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 focus:bg-slate-50 dark:focus:bg-slate-800 focus:outline-none text-slate-700 dark:text-slate-350 flex items-center gap-1.5"
												}, {
													default: withCtx(() => [isDark.value ? (openBlock(), createBlock(unref(Sun), {
														key: 0,
														class: "h-3.5 w-3.5 text-amber-500"
													})) : (openBlock(), createBlock(unref(Moon), {
														key: 1,
														class: "h-3.5 w-3.5 text-slate-500 dark:text-slate-450"
													})), createVNode("span", null, "Tema: " + toDisplayString(isDark.value ? "Terang" : "Gelap"), 1)]),
													_: 1
												}),
												createVNode(unref(DropdownMenuItem), {
													onClick: toggleFullscreen,
													class: "cursor-pointer select-none rounded-lg px-2 py-2 text-[11px] font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 focus:bg-slate-50 dark:focus:bg-slate-800 focus:outline-none text-slate-700 dark:text-slate-350 flex items-center gap-1.5"
												}, {
													default: withCtx(() => [isFullscreen.value ? (openBlock(), createBlock(unref(Minimize), {
														key: 0,
														class: "h-3.5 w-3.5"
													})) : (openBlock(), createBlock(unref(Maximize), {
														key: 1,
														class: "h-3.5 w-3.5"
													})), createVNode("span", null, toDisplayString(isFullscreen.value ? "Keluar Fullscreen" : "Layar Penuh"), 1)]),
													_: 1
												}),
												createVNode(unref(DropdownMenuItem), {
													onClick: ($event) => isPrinterSettingsOpen.value = true,
													class: "cursor-pointer select-none rounded-lg px-2 py-2 text-[11px] font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 focus:bg-slate-50 dark:focus:bg-slate-800 focus:outline-none text-slate-700 dark:text-slate-350 flex items-center gap-1.5"
												}, {
													default: withCtx(() => [createVNode(unref(Settings), { class: "h-3.5 w-3.5" }), createVNode("span", null, "Pengaturan Printer")]),
													_: 1
												}, 8, ["onClick"]),
												createVNode(unref(DropdownMenuSeparator), { class: "h-px bg-slate-200 dark:bg-slate-800 my-1" }),
												createVNode(unref(DropdownMenuItem), { class: "cursor-pointer select-none rounded-lg px-2 py-2 text-[11px] font-bold hover:bg-rose-50 dark:hover:bg-rose-950/20 focus:bg-rose-50 dark:focus:bg-rose-955/20 focus:outline-none text-rose-600" }, {
													default: withCtx(() => [createVNode(unref(Link), {
														href: _ctx.route("logout"),
														method: "post",
														as: "button",
														class: "w-full text-left h-full flex items-center gap-1.5 font-bold"
													}, {
														default: withCtx(() => [createVNode(unref(LogOut), { class: "h-3.5 w-3.5" }), createVNode("span", null, "Keluar")]),
														_: 1
													}, 8, ["href"])]),
													_: 1
												})
											];
										}),
										_: 1
									}, _parent, _scopeId));
									else return [createVNode(unref(DropdownMenuContent), {
										class: "z-[100] min-w-[180px] bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl p-1.5 shadow-lg animate-in fade-in slide-in-from-top-1 duration-200",
										align: "end",
										"side-offset": 8
									}, {
										default: withCtx(() => [
											createVNode("div", { class: "px-2 py-2 flex flex-col" }, [createVNode("span", { class: "font-extrabold text-xs text-slate-850 dark:text-slate-250 leading-none" }, toDisplayString(_ctx.$page.props.auth.user.name), 1), createVNode("span", { class: "text-[9px] text-slate-400 dark:text-slate-500 mt-1 leading-none" }, toDisplayString(_ctx.$page.props.auth.user.roles[0] || "Staff"), 1)]),
											createVNode(unref(DropdownMenuSeparator), { class: "h-px bg-slate-200 dark:bg-slate-800 my-1" }),
											_ctx.$page.props.auth.user.roles.includes("Super Admin") || _ctx.$page.props.auth.user.roles.includes("Owner") || _ctx.$page.props.auth.user.roles.includes("Admin") ? (openBlock(), createBlock(unref(DropdownMenuItem), {
												key: 0,
												class: "cursor-pointer select-none rounded-lg px-2 py-2 text-[11px] font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 focus:bg-slate-50 dark:focus:bg-slate-800 focus:outline-none text-slate-700 dark:text-slate-350"
											}, {
												default: withCtx(() => [createVNode(unref(Link), {
													href: _ctx.route("dashboard"),
													class: "w-full h-full flex items-center gap-1.5"
												}, {
													default: withCtx(() => [createVNode(unref(LayoutDashboard), { class: "h-3.5 w-3.5" }), createVNode("span", null, "Dashboard Admin")]),
													_: 1
												}, 8, ["href"])]),
												_: 1
											})) : createCommentVNode("", true),
											createVNode(unref(DropdownMenuItem), {
												onClick: toggleTheme,
												class: "cursor-pointer select-none rounded-lg px-2 py-2 text-[11px] font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 focus:bg-slate-50 dark:focus:bg-slate-800 focus:outline-none text-slate-700 dark:text-slate-350 flex items-center gap-1.5"
											}, {
												default: withCtx(() => [isDark.value ? (openBlock(), createBlock(unref(Sun), {
													key: 0,
													class: "h-3.5 w-3.5 text-amber-500"
												})) : (openBlock(), createBlock(unref(Moon), {
													key: 1,
													class: "h-3.5 w-3.5 text-slate-500 dark:text-slate-450"
												})), createVNode("span", null, "Tema: " + toDisplayString(isDark.value ? "Terang" : "Gelap"), 1)]),
												_: 1
											}),
											createVNode(unref(DropdownMenuItem), {
												onClick: toggleFullscreen,
												class: "cursor-pointer select-none rounded-lg px-2 py-2 text-[11px] font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 focus:bg-slate-50 dark:focus:bg-slate-800 focus:outline-none text-slate-700 dark:text-slate-350 flex items-center gap-1.5"
											}, {
												default: withCtx(() => [isFullscreen.value ? (openBlock(), createBlock(unref(Minimize), {
													key: 0,
													class: "h-3.5 w-3.5"
												})) : (openBlock(), createBlock(unref(Maximize), {
													key: 1,
													class: "h-3.5 w-3.5"
												})), createVNode("span", null, toDisplayString(isFullscreen.value ? "Keluar Fullscreen" : "Layar Penuh"), 1)]),
												_: 1
											}),
											createVNode(unref(DropdownMenuItem), {
												onClick: ($event) => isPrinterSettingsOpen.value = true,
												class: "cursor-pointer select-none rounded-lg px-2 py-2 text-[11px] font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 focus:bg-slate-50 dark:focus:bg-slate-800 focus:outline-none text-slate-700 dark:text-slate-350 flex items-center gap-1.5"
											}, {
												default: withCtx(() => [createVNode(unref(Settings), { class: "h-3.5 w-3.5" }), createVNode("span", null, "Pengaturan Printer")]),
												_: 1
											}, 8, ["onClick"]),
											createVNode(unref(DropdownMenuSeparator), { class: "h-px bg-slate-200 dark:bg-slate-800 my-1" }),
											createVNode(unref(DropdownMenuItem), { class: "cursor-pointer select-none rounded-lg px-2 py-2 text-[11px] font-bold hover:bg-rose-50 dark:hover:bg-rose-950/20 focus:bg-rose-50 dark:focus:bg-rose-955/20 focus:outline-none text-rose-600" }, {
												default: withCtx(() => [createVNode(unref(Link), {
													href: _ctx.route("logout"),
													method: "post",
													as: "button",
													class: "w-full text-left h-full flex items-center gap-1.5 font-bold"
												}, {
													default: withCtx(() => [createVNode(unref(LogOut), { class: "h-3.5 w-3.5" }), createVNode("span", null, "Keluar")]),
													_: 1
												}, 8, ["href"])]),
												_: 1
											})
										]),
										_: 1
									})];
								}),
								_: 1
							}, _parent, _scopeId));
						} else return [createVNode(unref(DropdownMenuTrigger), { class: "focus:outline-none cursor-pointer flex items-center justify-center h-8 w-8 rounded-full bg-[#8c5a3c]/10 text-[#8c5a3c] border border-[#8c5a3c]/20 hover:bg-[#8c5a3c]/20 transition-all select-none" }, {
							default: withCtx(() => [createVNode("span", { class: "text-xs font-bold font-mono" }, toDisplayString(getProductInitials(_ctx.$page.props.auth.user.name)), 1)]),
							_: 1
						}), createVNode(unref(DropdownMenuPortal), null, {
							default: withCtx(() => [createVNode(unref(DropdownMenuContent), {
								class: "z-[100] min-w-[180px] bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl p-1.5 shadow-lg animate-in fade-in slide-in-from-top-1 duration-200",
								align: "end",
								"side-offset": 8
							}, {
								default: withCtx(() => [
									createVNode("div", { class: "px-2 py-2 flex flex-col" }, [createVNode("span", { class: "font-extrabold text-xs text-slate-850 dark:text-slate-250 leading-none" }, toDisplayString(_ctx.$page.props.auth.user.name), 1), createVNode("span", { class: "text-[9px] text-slate-400 dark:text-slate-500 mt-1 leading-none" }, toDisplayString(_ctx.$page.props.auth.user.roles[0] || "Staff"), 1)]),
									createVNode(unref(DropdownMenuSeparator), { class: "h-px bg-slate-200 dark:bg-slate-800 my-1" }),
									_ctx.$page.props.auth.user.roles.includes("Super Admin") || _ctx.$page.props.auth.user.roles.includes("Owner") || _ctx.$page.props.auth.user.roles.includes("Admin") ? (openBlock(), createBlock(unref(DropdownMenuItem), {
										key: 0,
										class: "cursor-pointer select-none rounded-lg px-2 py-2 text-[11px] font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 focus:bg-slate-50 dark:focus:bg-slate-800 focus:outline-none text-slate-700 dark:text-slate-350"
									}, {
										default: withCtx(() => [createVNode(unref(Link), {
											href: _ctx.route("dashboard"),
											class: "w-full h-full flex items-center gap-1.5"
										}, {
											default: withCtx(() => [createVNode(unref(LayoutDashboard), { class: "h-3.5 w-3.5" }), createVNode("span", null, "Dashboard Admin")]),
											_: 1
										}, 8, ["href"])]),
										_: 1
									})) : createCommentVNode("", true),
									createVNode(unref(DropdownMenuItem), {
										onClick: toggleTheme,
										class: "cursor-pointer select-none rounded-lg px-2 py-2 text-[11px] font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 focus:bg-slate-50 dark:focus:bg-slate-800 focus:outline-none text-slate-700 dark:text-slate-350 flex items-center gap-1.5"
									}, {
										default: withCtx(() => [isDark.value ? (openBlock(), createBlock(unref(Sun), {
											key: 0,
											class: "h-3.5 w-3.5 text-amber-500"
										})) : (openBlock(), createBlock(unref(Moon), {
											key: 1,
											class: "h-3.5 w-3.5 text-slate-500 dark:text-slate-450"
										})), createVNode("span", null, "Tema: " + toDisplayString(isDark.value ? "Terang" : "Gelap"), 1)]),
										_: 1
									}),
									createVNode(unref(DropdownMenuItem), {
										onClick: toggleFullscreen,
										class: "cursor-pointer select-none rounded-lg px-2 py-2 text-[11px] font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 focus:bg-slate-50 dark:focus:bg-slate-800 focus:outline-none text-slate-700 dark:text-slate-350 flex items-center gap-1.5"
									}, {
										default: withCtx(() => [isFullscreen.value ? (openBlock(), createBlock(unref(Minimize), {
											key: 0,
											class: "h-3.5 w-3.5"
										})) : (openBlock(), createBlock(unref(Maximize), {
											key: 1,
											class: "h-3.5 w-3.5"
										})), createVNode("span", null, toDisplayString(isFullscreen.value ? "Keluar Fullscreen" : "Layar Penuh"), 1)]),
										_: 1
									}),
									createVNode(unref(DropdownMenuItem), {
										onClick: ($event) => isPrinterSettingsOpen.value = true,
										class: "cursor-pointer select-none rounded-lg px-2 py-2 text-[11px] font-semibold hover:bg-slate-50 dark:hover:bg-slate-800 focus:bg-slate-50 dark:focus:bg-slate-800 focus:outline-none text-slate-700 dark:text-slate-350 flex items-center gap-1.5"
									}, {
										default: withCtx(() => [createVNode(unref(Settings), { class: "h-3.5 w-3.5" }), createVNode("span", null, "Pengaturan Printer")]),
										_: 1
									}, 8, ["onClick"]),
									createVNode(unref(DropdownMenuSeparator), { class: "h-px bg-slate-200 dark:bg-slate-800 my-1" }),
									createVNode(unref(DropdownMenuItem), { class: "cursor-pointer select-none rounded-lg px-2 py-2 text-[11px] font-bold hover:bg-rose-50 dark:hover:bg-rose-950/20 focus:bg-rose-50 dark:focus:bg-rose-955/20 focus:outline-none text-rose-600" }, {
										default: withCtx(() => [createVNode(unref(Link), {
											href: _ctx.route("logout"),
											method: "post",
											as: "button",
											class: "w-full text-left h-full flex items-center gap-1.5 font-bold"
										}, {
											default: withCtx(() => [createVNode(unref(LogOut), { class: "h-3.5 w-3.5" }), createVNode("span", null, "Keluar")]),
											_: 1
										}, 8, ["href"])]),
										_: 1
									})
								]),
								_: 1
							})]),
							_: 1
						})];
					}),
					_: 1
				}, _parent));
				_push(`</div><div class="hidden sm:flex items-center gap-3"><div class="flex items-center gap-2.5"><div class="h-8 w-8 rounded-full bg-[#8c5a3c]/10 text-[#8c5a3c] flex items-center justify-center font-bold text-xs">${ssrInterpolate(getProductInitials(_ctx.$page.props.auth.user.name))}</div><div class="flex flex-col text-left leading-none"><span class="text-xs font-semibold leading-none">${ssrInterpolate(_ctx.$page.props.auth.user.name)}</span><span class="text-[9px] text-slate-400 dark:text-slate-550 mt-1 leading-none">${ssrInterpolate(_ctx.$page.props.auth.user.roles[0] || "Staff")}</span></div></div><div class="h-5 w-[1px] bg-slate-200 dark:bg-slate-800"></div><div class="flex items-center gap-2">`);
				if (_ctx.$page.props.auth.user.roles.includes("Super Admin") || _ctx.$page.props.auth.user.roles.includes("Owner") || _ctx.$page.props.auth.user.roles.includes("Admin")) _push(ssrRenderComponent(unref(Link), {
					href: _ctx.route("dashboard"),
					class: "px-3 py-1.5 border border-slate-200 dark:border-slate-800 rounded-lg text-xs font-semibold hover:bg-slate-50 dark:hover:bg-slate-900 transition-colors cursor-pointer text-slate-700 dark:text-slate-300"
				}, {
					default: withCtx((_, _push, _parent, _scopeId) => {
						if (_push) _push(` Dashboard Admin `);
						else return [createTextVNode(" Dashboard Admin ")];
					}),
					_: 1
				}, _parent));
				else _push(`<!---->`);
				_push(`<button class="h-8 w-8 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-900 flex items-center justify-center text-slate-555 dark:text-slate-400 cursor-pointer transition-colors" aria-label="Toggle Theme">`);
				if (isDark.value) _push(ssrRenderComponent(unref(Sun), { class: "h-4.5 w-4.5 text-amber-500" }, null, _parent));
				else _push(ssrRenderComponent(unref(Moon), { class: "h-4.5 w-4.5 text-slate-650 dark:text-slate-400" }, null, _parent));
				_push(`</button><button class="h-8 w-8 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-900 flex items-center justify-center text-slate-555 dark:text-slate-400 cursor-pointer transition-colors" title="Toggle Layar Penuh">`);
				if (isFullscreen.value) _push(ssrRenderComponent(unref(Minimize), { class: "h-4.5 w-4.5" }, null, _parent));
				else _push(ssrRenderComponent(unref(Maximize), { class: "h-4.5 w-4.5" }, null, _parent));
				_push(`</button><button class="h-8 w-8 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-900 flex items-center justify-center text-slate-555 dark:text-slate-400 cursor-pointer transition-colors" title="Pengaturan Printer">`);
				_push(ssrRenderComponent(unref(Settings), { class: "h-4.5 w-4.5" }, null, _parent));
				_push(`</button>`);
				_push(ssrRenderComponent(unref(Link), {
					href: _ctx.route("logout"),
					method: "post",
					as: "button",
					class: "px-3 py-1.5 bg-rose-600 hover:bg-rose-500 text-white rounded-lg text-xs font-semibold transition-colors cursor-pointer"
				}, {
					default: withCtx((_, _push, _parent, _scopeId) => {
						if (_push) _push(` Keluar `);
						else return [createTextVNode(" Keluar ")];
					}),
					_: 1
				}, _parent));
				_push(`</div></div></div></header>`);
			} else _push(`<!---->`);
			_push(`<main class="flex-1 p-6 overflow-visible lg:overflow-hidden min-h-0 flex flex-col bg-slate-50 dark:bg-slate-900"><div class="hidden lg:grid grid-cols-12 gap-6 lg:h-full lg:overflow-hidden min-h-0"><div class="lg:col-span-7 xl:col-span-8 flex flex-col lg:h-full space-y-4 min-w-0 min-h-0"><div class="flex flex-wrap items-center justify-between gap-4 bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl p-4 shadow-sm flex-shrink-0"><div class="relative flex-1 max-w-sm">`);
			_push(ssrRenderComponent(unref(Search), { class: "absolute left-3 top-2.5 h-4 w-4 text-slate-400" }, null, _parent));
			_push(`<input${ssrRenderAttr("value", search.value)} type="text" placeholder="Cari menu kopi atau makanan..." class="w-full pl-9 pr-4 py-2 border border-slate-200 dark:border-slate-800 rounded-lg bg-transparent text-sm focus:outline-none focus:ring-2 focus:ring-[#8c5a3c]/20 focus:border-[#8c5a3c] transition-all text-slate-900 dark:text-slate-100"></div><div class="flex items-center gap-1.5"><!--[-->`);
			ssrRenderList([
				"dine_in",
				"take_away",
				"delivery"
			], (type) => {
				_push(`<button class="${ssrRenderClass(["px-3 py-1.5 border rounded-lg text-[10px] font-bold uppercase tracking-wider transition-all cursor-pointer", orderType.value === type ? "bg-[#8c5a3c] border-[#8c5a3c] text-white" : "bg-transparent border-slate-200 dark:border-slate-800 text-slate-500 dark:text-slate-400"])}">${ssrInterpolate(type === "dine_in" ? "Dine In" : type === "delivery" ? "Delivery" : "Take Away")}</button>`);
			});
			_push(`<!--]--></div></div><div class="flex gap-2 overflow-x-auto pb-1 flex-shrink-0 scrollbar-thin scrollbar-thumb-slate-200 dark:scrollbar-thumb-slate-800"><!--[-->`);
			ssrRenderList(categories, (cat) => {
				_push(`<button class="${ssrRenderClass(["px-4 py-2 rounded-full text-xs font-semibold whitespace-nowrap transition-all cursor-pointer border", activeCategory.value === cat ? "bg-[#8c5a3c] border-[#8c5a3c] text-white shadow-sm" : "bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600"])}">${ssrInterpolate(cat)}</button>`);
			});
			_push(`<!--]--></div><div class="flex-1 overflow-y-auto pr-1 min-h-0">`);
			if (filteredProducts.value.length === 0) {
				_push(`<div class="flex flex-col items-center justify-center p-12 text-slate-400 bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-2xl h-full shadow-sm">`);
				_push(ssrRenderComponent(unref(Coffee), { class: "h-12 w-12 text-slate-300 mb-2" }, null, _parent));
				_push(`<p class="text-sm">Tidak ada produk ditemukan.</p></div>`);
			} else {
				_push(`<div class="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-4 gap-4"><!--[-->`);
				ssrRenderList(filteredProducts.value, (p) => {
					_push(`<div class="${ssrRenderClass(["bg-white dark:bg-slate-950 border rounded-xl overflow-hidden shadow-sm flex flex-col transition-all duration-200 group relative select-none", getAvailableQty(p, p.category === "Coffee" || p.category === "Non-Coffee" ? "ice" : null) > 0 ? "hover:-translate-y-0.5 hover:shadow-md border-slate-200 dark:border-slate-800 cursor-pointer" : "opacity-60 border-slate-200 dark:border-slate-900 cursor-not-allowed"])}"><div class="aspect-square w-full relative overflow-hidden bg-slate-50/50 dark:bg-slate-900/30 flex-shrink-0">`);
					if (p.image_path) _push(`<img${ssrRenderAttr("src", p.image_path)} alt="Product Photo" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-300">`);
					else _push(`<div class="h-full w-full bg-gradient-to-br from-[#8c5a3c]/20 to-orange-550/20 text-[#8c5a3c] flex items-center justify-center font-bold text-xl">${ssrInterpolate(getProductInitials(p.name))}</div>`);
					_push(`<div class="absolute bottom-2 right-2">`);
					if (getAvailableQty(p, p.category === "Coffee" || p.category === "Non-Coffee" ? "ice" : null) > 0) _push(`<span class="inline-flex px-1.5 py-0.5 rounded text-[9px] font-bold uppercase bg-emerald-500 text-white shadow-sm"> In Stock (${ssrInterpolate(getAvailableQty(p, p.category === "Coffee" || p.category === "Non-Coffee" ? "ice" : null))}) </span>`);
					else _push(`<span class="inline-flex px-1.5 py-0.5 rounded text-[9px] font-bold uppercase bg-rose-600 text-white shadow-sm"> Habis </span>`);
					_push(`</div></div><div class="p-3 flex-1 flex flex-col justify-between"><div><h4 class="text-sm font-semibold text-slate-900 dark:text-slate-100 truncate group-hover:text-[#8c5a3c] transition-colors">${ssrInterpolate(p.name)}</h4><p class="text-[10px] text-slate-400 mt-0.5 truncate">${ssrInterpolate(p.description || "Tidak ada deskripsi")}</p></div><p class="text-sm font-bold text-slate-900 dark:text-slate-100 mt-2"> Rp ${ssrInterpolate(Number(p.price).toLocaleString("id-ID"))}</p></div></div>`);
				});
				_push(`<!--]--></div>`);
			}
			_push(`</div></div><div class="lg:col-span-5 xl:col-span-4 bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl shadow-sm flex flex-col h-[550px] lg:h-full overflow-hidden min-h-0 flex-shrink-0"><div class="p-4 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between flex-shrink-0 bg-slate-50/50 dark:bg-slate-900/10"><div class="flex items-center gap-2">`);
			_push(ssrRenderComponent(unref(ShoppingCart), { class: "h-4.5 w-4.5 text-slate-500" }, null, _parent));
			_push(`<h3 class="text-sm font-bold text-slate-900 dark:text-slate-100">Keranjang Belanja</h3></div><div class="flex items-center gap-1.5"><button class="p-1 text-slate-555 hover:text-[#8c5a3c] hover:bg-slate-100 dark:hover:bg-slate-900 rounded-lg cursor-pointer" title="Split Bill">`);
			_push(ssrRenderComponent(unref(Split), { class: "h-4 w-4" }, null, _parent));
			_push(`</button><span class="text-xs px-2 py-0.5 bg-[#8c5a3c]/10 text-[#8c5a3c] rounded-full font-bold">${ssrInterpolate(cart.value.length)} Item(s) </span></div></div>`);
			if (orderType.value === "dine_in") {
				_push(`<div class="p-3 border-b border-slate-200 dark:border-slate-800 bg-[#8c5a3c]/5 flex items-center justify-between gap-4"><div class="flex items-center gap-1.5 text-xs text-[#8c5a3c] font-bold">`);
				_push(ssrRenderComponent(unref(Grid), { class: "h-4 w-4" }, null, _parent));
				_push(`<span>Pilih Meja:</span></div><select class="h-8 px-2.5 border border-[#8c5a3c]/20 rounded-lg bg-white dark:bg-slate-950 text-xs font-semibold focus:outline-none focus:ring-1 focus:ring-[#8c5a3c] text-slate-900 dark:text-slate-100 cursor-pointer"><option${ssrRenderAttr("value", null)}${ssrIncludeBooleanAttr(Array.isArray(selectedTableId.value) ? ssrLooseContain(selectedTableId.value, null) : ssrLooseEqual(selectedTableId.value, null)) ? " selected" : ""}>Pilih...</option><!--[-->`);
				ssrRenderList(__props.tables, (t) => {
					_push(`<option${ssrRenderAttr("value", t.id)}${ssrIncludeBooleanAttr(Array.isArray(selectedTableId.value) ? ssrLooseContain(selectedTableId.value, t.id) : ssrLooseEqual(selectedTableId.value, t.id)) ? " selected" : ""}>${ssrInterpolate(t.number)} (${ssrInterpolate(t.capacity)}p)</option>`);
				});
				_push(`<!--]--></select></div>`);
			} else _push(`<!---->`);
			_push(`<div class="p-3 border-b border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/10 flex items-center justify-between gap-4"><div class="flex items-center gap-1.5 text-xs text-slate-500 font-bold">`);
			_push(ssrRenderComponent(unref(User), { class: "h-4 w-4 text-slate-400" }, null, _parent));
			_push(`<span>Pilih Pelayan:</span></div><select class="h-8 px-2.5 border border-slate-250 dark:border-slate-800 rounded-lg bg-white dark:bg-slate-955 text-xs font-semibold focus:outline-none text-slate-900 dark:text-slate-100 cursor-pointer"><option${ssrRenderAttr("value", null)}${ssrIncludeBooleanAttr(Array.isArray(selectedWaiterId.value) ? ssrLooseContain(selectedWaiterId.value, null) : ssrLooseEqual(selectedWaiterId.value, null)) ? " selected" : ""}>Pilih pelayan...</option><!--[-->`);
			ssrRenderList(__props.waiters, (w) => {
				_push(`<option${ssrRenderAttr("value", w.id)}${ssrIncludeBooleanAttr(Array.isArray(selectedWaiterId.value) ? ssrLooseContain(selectedWaiterId.value, w.id) : ssrLooseEqual(selectedWaiterId.value, w.id)) ? " selected" : ""}>${ssrInterpolate(w.name)}</option>`);
			});
			_push(`<!--]--></select></div>`);
			if (orderType.value === "delivery") {
				_push(`<div class="p-3 border-b border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/10 flex items-center justify-between gap-4"><div class="flex items-center gap-1.5 text-xs text-slate-500 font-bold">`);
				_push(ssrRenderComponent(unref(Users), { class: "h-4 w-4 text-slate-400" }, null, _parent));
				_push(`<span>Pilih Kurir:</span></div><select class="h-8 px-2.5 border border-slate-250 dark:border-slate-800 rounded-lg bg-white dark:bg-slate-955 text-xs font-semibold focus:outline-none text-slate-900 dark:text-slate-100 cursor-pointer"><option${ssrRenderAttr("value", null)}${ssrIncludeBooleanAttr(Array.isArray(selectedCourierId.value) ? ssrLooseContain(selectedCourierId.value, null) : ssrLooseEqual(selectedCourierId.value, null)) ? " selected" : ""}>Pilih kurir...</option><!--[-->`);
				ssrRenderList(__props.couriers, (c) => {
					_push(`<option${ssrRenderAttr("value", c.id)}${ssrIncludeBooleanAttr(Array.isArray(selectedCourierId.value) ? ssrLooseContain(selectedCourierId.value, c.id) : ssrLooseEqual(selectedCourierId.value, c.id)) ? " selected" : ""}>${ssrInterpolate(c.name)}</option>`);
				});
				_push(`<!--]--></select></div>`);
			} else _push(`<!---->`);
			_push(`<div class="flex-1 overflow-y-auto p-4 space-y-4 min-h-0">`);
			if (cart.value.length === 0) {
				_push(`<div class="flex flex-col items-center justify-center p-8 text-slate-400 h-full">`);
				_push(ssrRenderComponent(unref(ShoppingCart), { class: "h-10 w-10 text-slate-200 mb-2" }, null, _parent));
				_push(`<p class="text-xs text-center">Keranjang kosong.<br>Klik menu di kiri untuk menambahkan.</p></div>`);
			} else {
				_push(`<!--[-->`);
				ssrRenderList(cart.value, (item, idx) => {
					_push(`<div class="p-3 bg-slate-50/50 dark:bg-slate-900/20 rounded-xl border border-slate-100 dark:border-slate-900 flex flex-col space-y-2.5 animate-in slide-in-from-bottom-2 duration-150"><div class="flex items-start justify-between gap-2"><div><h4 class="text-sm font-semibold text-slate-900 dark:text-slate-100 leading-tight">${ssrInterpolate(item.product.name)}</h4><span class="text-xs text-slate-450 font-medium">Rp ${ssrInterpolate(Number(item.product.price).toLocaleString("id-ID"))}</span></div><button class="p-1 text-slate-400 hover:text-rose-500 rounded-lg transition-colors cursor-pointer">`);
					_push(ssrRenderComponent(unref(Trash2), { class: "h-4 w-4" }, null, _parent));
					_push(`</button></div>`);
					if (item.product.modifiers && item.product.modifiers.length > 0) {
						_push(`<div class="flex flex-wrap items-center gap-1.5 pt-1.5 border-t border-slate-100 dark:border-slate-900"><span class="text-[9px] font-bold text-slate-400 uppercase tracking-wide">Add-ons:</span><!--[-->`);
						ssrRenderList(item.product.modifiers, (mod) => {
							_push(`<button class="${ssrRenderClass(["px-2 py-0.5 border rounded-lg text-[9px] font-semibold transition-all cursor-pointer", item.selectedModifiers.includes(mod.id) ? "bg-[#8c5a3c]/10 border-[#8c5a3c] text-[#8c5a3c] font-bold" : "bg-white dark:bg-slate-955 border-slate-200 dark:border-slate-800 text-slate-550"])}"> +${ssrInterpolate(mod.name)} (+Rp${ssrInterpolate(Number(mod.price).toLocaleString("id-ID"))}) </button>`);
						});
						_push(`<!--]--></div>`);
					} else _push(`<!---->`);
					_push(`<div class="flex flex-wrap items-center justify-between gap-2 pt-2 border-t border-slate-100 dark:border-slate-900">`);
					if (item.variant !== null) {
						_push(`<div class="flex rounded-lg bg-slate-100 dark:bg-slate-800 p-0.5"><button type="button" class="${ssrRenderClass(["px-2 py-1 rounded-md text-[10px] font-bold uppercase flex items-center gap-1 transition-all cursor-pointer", item.variant === "ice" ? "bg-white dark:bg-slate-955 text-blue-600 dark:text-blue-400 shadow-sm" : "text-slate-400"])}">`);
						_push(ssrRenderComponent(unref(Snowflake), { class: "h-3 w-3" }, null, _parent));
						_push(` Es </button><button type="button" class="${ssrRenderClass(["px-2 py-1 rounded-md text-[10px] font-bold uppercase flex items-center gap-1 transition-all cursor-pointer", item.variant === "hot" ? "bg-white dark:bg-slate-955 text-red-650 dark:text-red-400 shadow-sm" : "text-slate-400"])}">`);
						_push(ssrRenderComponent(unref(Flame), { class: "h-3 w-3" }, null, _parent));
						_push(` Panas </button></div>`);
					} else _push(`<div class="text-[10px] text-slate-400 italic">No variants</div>`);
					_push(`<div class="flex items-center gap-2"><button class="h-6 w-6 rounded bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 cursor-pointer">`);
					_push(ssrRenderComponent(unref(Minus), { class: "h-3.5 w-3.5" }, null, _parent));
					_push(`</button><span class="text-sm font-bold w-6 text-center text-slate-900 dark:text-slate-100">${ssrInterpolate(item.qty)}</span><button${ssrIncludeBooleanAttr(getAvailableQty(item.product, item.variant) <= 0) ? " disabled" : ""} class="h-6 w-6 rounded bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 disabled:opacity-40 cursor-pointer">`);
					_push(ssrRenderComponent(unref(Plus), { class: "h-3.5 w-3.5" }, null, _parent));
					_push(`</button></div></div><input${ssrRenderAttr("value", item.notes)} type="text" placeholder="Catatan (misal: kurang manis, take away)..." class="w-full px-2.5 py-1 text-[11px] border border-slate-200 dark:border-slate-800 rounded bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-300 placeholder-slate-400 dark:placeholder-slate-600 focus:outline-none focus:border-[#8c5a3c]"></div>`);
				});
				_push(`<!--]-->`);
			}
			if (cart.value.length > 0) {
				_push(`<div class="pt-4 border-t border-slate-200 dark:border-slate-800/60 space-y-4"><div class="space-y-1.5"><span class="text-[9px] font-bold uppercase text-slate-400 tracking-wider">Customer / Member</span><div class="grid grid-cols-2 gap-2"><select class="h-8 px-2 border border-slate-200 dark:border-slate-800 rounded-lg bg-white dark:bg-slate-950 text-xs font-semibold focus:outline-none text-slate-900 dark:text-slate-100 cursor-pointer"><!--[-->`);
				ssrRenderList(__props.customers, (c) => {
					_push(`<option${ssrRenderAttr("value", c.id)}${ssrIncludeBooleanAttr(Array.isArray(selectedCustomerId.value) ? ssrLooseContain(selectedCustomerId.value, c.id) : ssrLooseEqual(selectedCustomerId.value, c.id)) ? " selected" : ""}>${ssrInterpolate(c.name)} ${ssrInterpolate(c.is_member ? "(Member)" : "")}</option>`);
				});
				_push(`<!--]--></select>`);
				if (__props.customers.find((c) => c.id === selectedCustomerId.value)?.is_member) _push(`<div class="flex items-center gap-1.5"><span class="text-[9px] font-bold text-[#8c5a3c]">PTS: ${ssrInterpolate(selectedCustomerPoints.value)}</span><input type="number"${ssrRenderAttr("value", pointsToRedeem.value)} min="0"${ssrRenderAttr("max", selectedCustomerPoints.value)} placeholder="Redeem pts" class="w-full h-8 px-2 border border-slate-200 dark:border-slate-800 rounded-lg bg-white dark:bg-slate-955 text-xs text-right font-bold focus:outline-none"></div>`);
				else _push(`<!---->`);
				_push(`</div></div>`);
				if (__props.promos.length > 0) {
					_push(`<div class="space-y-1.5"><span class="text-[9px] font-bold uppercase text-slate-400 tracking-wider">Terapkan Kupon Promo</span><select class="w-full h-8 px-2 border border-slate-200 dark:border-slate-800 rounded-lg bg-white dark:bg-slate-950 text-xs font-semibold focus:outline-none text-slate-900 dark:text-slate-100 cursor-pointer"><option${ssrRenderAttr("value", null)}${ssrIncludeBooleanAttr(Array.isArray(selectedPromoId.value) ? ssrLooseContain(selectedPromoId.value, null) : ssrLooseEqual(selectedPromoId.value, null)) ? " selected" : ""}>Pilih promo...</option><!--[-->`);
					ssrRenderList(__props.promos, (p) => {
						_push(`<option${ssrRenderAttr("value", p.id)}${ssrIncludeBooleanAttr(subtotal.value < p.min_purchase) ? " disabled" : ""}${ssrIncludeBooleanAttr(Array.isArray(selectedPromoId.value) ? ssrLooseContain(selectedPromoId.value, p.id) : ssrLooseEqual(selectedPromoId.value, p.id)) ? " selected" : ""}>${ssrInterpolate(p.name)} (Min. Rp${ssrInterpolate(Number(p.min_purchase).toLocaleString("id-ID"))}) </option>`);
					});
					_push(`<!--]--></select></div>`);
				} else _push(`<!---->`);
				_push(`<div class="space-y-1.5"><span class="text-[9px] font-bold uppercase text-slate-400 tracking-wider">Kupon Voucher Kustom</span><div class="flex gap-2"><input type="text"${ssrRenderAttr("value", voucherCode.value)} placeholder="Masukkan kode..." class="flex-1 h-8 px-2 border border-slate-200 dark:border-slate-800 rounded-lg bg-white dark:bg-slate-955 text-xs font-semibold focus:outline-none text-slate-900 dark:text-slate-100 uppercase"><button type="button" class="h-8 px-3 bg-[#8c5a3c] hover:bg-[#734a31] text-white text-xs font-bold rounded-lg cursor-pointer transition-colors"> Terapkan </button></div>`);
				if (appliedVoucher.value) _push(`<p class="text-[9px] font-semibold text-emerald-600 dark:text-emerald-400"> Kupon diterapkan: ${ssrInterpolate(appliedVoucher.value.code)} (Potongan Rp ${ssrInterpolate(appliedVoucher.value.value.toLocaleString("id-ID"))}${ssrInterpolate(appliedVoucher.value.type === "percent" ? "%" : "")}) </p>`);
				else _push(`<!---->`);
				if (voucherError.value) _push(`<p class="text-[9px] font-semibold text-rose-600 dark:text-rose-400">${ssrInterpolate(voucherError.value)}</p>`);
				else _push(`<!---->`);
				_push(`</div>`);
				if (birthdayDiscount.value > 0) _push(`<div class="p-2 border border-emerald-500/20 bg-emerald-500/10 rounded-lg text-[9px] text-emerald-700 dark:text-emerald-400 font-bold flex items-center gap-1.5 animate-pulse"><span>🎉</span><span>Ulang Tahun Member! Diskon 10% Otomatis + Bonus 50 Poin!</span></div>`);
				else _push(`<!---->`);
				_push(`</div>`);
			} else _push(`<!---->`);
			_push(`</div><div class="border-t border-slate-200 dark:border-slate-800 p-4 space-y-4 bg-slate-50/50 dark:bg-slate-900/10 flex-shrink-0"><div class="space-y-1.5 text-xs text-slate-600 dark:text-slate-400"><div class="flex justify-between"><span>Subtotal</span><span class="font-semibold text-slate-900 dark:text-slate-100">Rp ${ssrInterpolate(subtotal.value.toLocaleString("id-ID"))}</span></div>`);
			if (__props.servicePercentage > 0) _push(`<div class="flex justify-between"><span>Biaya Layanan (${ssrInterpolate(__props.servicePercentage)}%)</span><span class="font-semibold text-slate-900 dark:text-slate-100">Rp ${ssrInterpolate(serviceCharge.value.toLocaleString("id-ID"))}</span></div>`);
			else _push(`<!---->`);
			if (__props.taxPercentage > 0) _push(`<div class="flex justify-between"><span>Pajak Restoran (${ssrInterpolate(__props.taxPercentage)}%)</span><span class="font-semibold text-slate-900 dark:text-slate-100">Rp ${ssrInterpolate(tax.value.toLocaleString("id-ID"))}</span></div>`);
			else _push(`<!---->`);
			if (discountAmount.value > 0) _push(`<div class="flex justify-between text-rose-500 font-bold"><span>Potongan Diskon</span><span>-Rp ${ssrInterpolate(discountAmount.value.toLocaleString("id-ID"))}</span></div>`);
			else _push(`<!---->`);
			_push(`<div class="flex justify-between text-sm font-bold text-slate-900 dark:text-slate-100 pt-1.5 border-t border-slate-200 dark:border-slate-800"><span>Total Tagihan</span><span class="text-[#8c5a3c]">Rp ${ssrInterpolate(grandTotal.value.toLocaleString("id-ID"))}</span></div></div><div class="space-y-2"><span class="text-[10px] font-bold uppercase text-slate-400 tracking-wider">Metode Pembayaran</span><div class="grid grid-cols-3 gap-2"><!--[-->`);
			ssrRenderList([
				"cash",
				"transfer",
				"qris"
			], (method) => {
				_push(`<button class="${ssrRenderClass(["py-2 text-xs font-semibold rounded-lg border text-center transition-all cursor-pointer uppercase", paymentMethod.value === method ? "bg-[#8c5a3c]/10 border-[#8c5a3c] text-[#8c5a3c]" : "border-slate-200 dark:border-slate-850 text-slate-500 dark:text-slate-400 bg-white dark:bg-slate-950"])}">${ssrInterpolate(method)}</button>`);
			});
			_push(`<!--]--></div></div>`);
			if (paymentMethod.value === "cash") {
				_push(`<div class="space-y-2 pt-2 border-t border-dashed border-slate-200 dark:border-slate-800"><div class="flex items-center justify-between gap-4"><span class="text-[10px] font-bold uppercase text-slate-400 dark:text-slate-500">Uang Diterima</span><input${ssrRenderAttr("value", cashReceived.value)} type="number" class="w-32 px-2 py-1 text-right border border-slate-200 dark:border-slate-700 rounded bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 text-sm focus:outline-none focus:border-[#8c5a3c] font-bold"></div><div class="flex flex-wrap gap-1.5 pt-1"><button type="button" class="px-2 py-1 rounded bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-[10px] font-semibold hover:bg-slate-200 dark:hover:bg-slate-700 cursor-pointer transition-colors"> Pas </button><!--[-->`);
				ssrRenderList([
					2e4,
					5e4,
					1e5
				], (amt) => {
					_push(`<button type="button" class="px-2 py-1 rounded bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-[10px] font-semibold hover:bg-slate-200 dark:hover:bg-slate-700 cursor-pointer transition-colors" style="${ssrRenderStyle(amt >= grandTotal.value ? null : { display: "none" })}"> Rp ${ssrInterpolate(amt.toLocaleString("id-ID"))}</button>`);
				});
				_push(`<!--]--></div>`);
				if (cashReceived.value >= grandTotal.value) _push(`<div class="flex justify-between items-center text-xs font-semibold text-emerald-600 dark:text-emerald-400 pt-1.5"><span>Kembalian</span><span class="font-bold text-sm">Rp ${ssrInterpolate(changeDue.value.toLocaleString("id-ID"))}</span></div>`);
				else _push(`<!---->`);
				_push(`</div>`);
			} else _push(`<!---->`);
			_push(`<button${ssrIncludeBooleanAttr(cart.value.length === 0 || isCheckingOut.value || paymentMethod.value === "cash" && cashReceived.value < grandTotal.value) ? " disabled" : ""} class="w-full py-3 bg-[#8c5a3c] hover:bg-[#734a31] text-white rounded-lg text-sm font-semibold shadow-sm focus:outline-none focus:ring-2 focus:ring-[#8c5a3c]/20 disabled:opacity-40 transition-all cursor-pointer flex items-center justify-center gap-2"><span>${ssrInterpolate(isCheckingOut.value ? "Memproses Transaksi..." : "Selesaikan Pembayaran")}</span></button></div></div></div><div class="lg:hidden flex flex-col h-full space-y-4">`);
			if (activeMobileTab.value === "menu") {
				_push(`<div class="flex flex-col space-y-4 pb-20 animate-in fade-in duration-200"><div class="flex flex-wrap items-center justify-between gap-3 bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl p-3 shadow-sm"><div class="relative flex-1">`);
				_push(ssrRenderComponent(unref(Search), { class: "absolute left-3 top-2.5 h-4 w-4 text-slate-400" }, null, _parent));
				_push(`<input${ssrRenderAttr("value", search.value)} type="text" placeholder="Cari menu kopi atau makanan..." class="w-full pl-9 pr-4 py-2 border border-slate-200 dark:border-slate-800 rounded-lg bg-transparent text-xs focus:outline-none focus:ring-2 focus:ring-[#8c5a3c]/20 focus:border-[#8c5a3c] transition-all text-slate-900 dark:text-slate-100"></div><div class="flex items-center gap-1"><!--[-->`);
				ssrRenderList([
					"dine_in",
					"take_away",
					"delivery"
				], (type) => {
					_push(`<button class="${ssrRenderClass(["px-2 py-1.5 border rounded-lg text-[9px] font-bold uppercase tracking-wider transition-all cursor-pointer", orderType.value === type ? "bg-[#8c5a3c] border-[#8c5a3c] text-white" : "bg-transparent border-slate-200 dark:border-slate-800 text-slate-550"])}">${ssrInterpolate(type === "dine_in" ? "Dine In" : type === "delivery" ? "Deliv" : "Take Away")}</button>`);
				});
				_push(`<!--]--></div></div><div class="flex gap-1.5 overflow-x-auto pb-1 flex-shrink-0 scrollbar-none"><!--[-->`);
				ssrRenderList(categories, (cat) => {
					_push(`<button class="${ssrRenderClass(["px-3.5 py-1.5 rounded-full text-[11px] font-semibold whitespace-nowrap transition-all cursor-pointer border", activeCategory.value === cat ? "bg-[#8c5a3c] border-[#8c5a3c] text-white shadow-sm" : "bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 text-slate-650 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800"])}">${ssrInterpolate(cat)}</button>`);
				});
				_push(`<!--]--></div><div class="flex-1">`);
				if (filteredProducts.value.length === 0) {
					_push(`<div class="flex flex-col items-center justify-center p-12 text-slate-400 bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-sm">`);
					_push(ssrRenderComponent(unref(Coffee), { class: "h-10 w-10 text-slate-300 mb-2" }, null, _parent));
					_push(`<p class="text-xs">Tidak ada produk ditemukan.</p></div>`);
				} else {
					_push(`<div class="grid grid-cols-2 gap-3"><!--[-->`);
					ssrRenderList(filteredProducts.value, (p) => {
						_push(`<div class="${ssrRenderClass(["bg-white dark:bg-slate-950 border rounded-xl overflow-hidden shadow-sm flex flex-col transition-all duration-200 relative", getAvailableQty(p, p.category === "Coffee" || p.category === "Non-Coffee" ? "ice" : null) > 0 ? "border-slate-200 dark:border-slate-800 cursor-pointer active:scale-[0.98]" : "opacity-60 border-slate-200 dark:border-slate-900 cursor-not-allowed"])}"><div class="aspect-square w-full relative overflow-hidden bg-slate-50/50 dark:bg-slate-900/30 flex-shrink-0">`);
						if (p.image_path) _push(`<img${ssrRenderAttr("src", p.image_path)} alt="Product Photo" class="h-full w-full object-cover">`);
						else _push(`<div class="h-full w-full bg-gradient-to-br from-[#8c5a3c]/20 to-orange-550/20 text-[#8c5a3c] flex items-center justify-center font-bold text-lg">${ssrInterpolate(getProductInitials(p.name))}</div>`);
						_push(`<div class="absolute bottom-1.5 right-1.5">`);
						if (getAvailableQty(p, p.category === "Coffee" || p.category === "Non-Coffee" ? "ice" : null) > 0) _push(`<span class="inline-flex px-1 py-0.5 rounded text-[8px] font-extrabold uppercase bg-emerald-500 text-white shadow-sm"> In Stock (${ssrInterpolate(getAvailableQty(p, p.category === "Coffee" || p.category === "Non-Coffee" ? "ice" : null))}) </span>`);
						else _push(`<span class="inline-flex px-1 py-0.5 rounded text-[8px] font-extrabold uppercase bg-rose-600 text-white shadow-sm"> Habis </span>`);
						_push(`</div></div><div class="p-2 flex-1 flex flex-col justify-between space-y-1"><div><h4 class="text-xs font-bold text-slate-900 dark:text-slate-100 truncate">${ssrInterpolate(p.name)}</h4><p class="text-[9px] text-slate-400 truncate">${ssrInterpolate(p.description || "Tidak ada deskripsi")}</p></div><p class="text-xs font-black text-slate-900 dark:text-slate-100"> Rp ${ssrInterpolate(Number(p.price).toLocaleString("id-ID"))}</p></div></div>`);
					});
					_push(`<!--]--></div>`);
				}
				_push(`</div></div>`);
			} else _push(`<!---->`);
			if (activeMobileTab.value === "cart") {
				_push(`<div class="flex flex-col space-y-4 pb-20 animate-in fade-in duration-200"><div class="bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl shadow-sm flex flex-col overflow-hidden"><div class="p-3 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between bg-slate-50/50 dark:bg-slate-900/10"><div class="flex items-center gap-1.5">`);
				_push(ssrRenderComponent(unref(ShoppingCart), { class: "h-4.5 w-4.5 text-slate-500" }, null, _parent));
				_push(`<h3 class="text-xs font-extrabold text-slate-900 dark:text-slate-100">Keranjang Belanja</h3></div><div class="flex items-center gap-1.5"><button class="p-1 text-slate-555 hover:text-[#8c5a3c] hover:bg-slate-100 dark:hover:bg-slate-900 rounded-lg cursor-pointer" title="Split Bill">`);
				_push(ssrRenderComponent(unref(Split), { class: "h-4 w-4" }, null, _parent));
				_push(`</button><span class="text-[10px] px-2 py-0.5 bg-[#8c5a3c]/10 text-[#8c5a3c] rounded-full font-bold">${ssrInterpolate(cart.value.length)} Item(s) </span></div></div>`);
				if (orderType.value === "dine_in") {
					_push(`<div class="p-3 border-b border-slate-200 dark:border-slate-800 bg-[#8c5a3c]/5 flex items-center justify-between gap-4"><div class="flex items-center gap-1 text-xs text-[#8c5a3c] font-bold">`);
					_push(ssrRenderComponent(unref(Grid), { class: "h-3.5 w-3.5" }, null, _parent));
					_push(`<span>Pilih Meja:</span></div><select class="h-8 px-2 border border-[#8c5a3c]/20 rounded-lg bg-white dark:bg-slate-950 text-xs font-semibold focus:outline-none text-slate-900 dark:text-slate-100 cursor-pointer"><option${ssrRenderAttr("value", null)}${ssrIncludeBooleanAttr(Array.isArray(selectedTableId.value) ? ssrLooseContain(selectedTableId.value, null) : ssrLooseEqual(selectedTableId.value, null)) ? " selected" : ""}>Pilih meja...</option><!--[-->`);
					ssrRenderList(__props.tables, (t) => {
						_push(`<option${ssrRenderAttr("value", t.id)}${ssrIncludeBooleanAttr(Array.isArray(selectedTableId.value) ? ssrLooseContain(selectedTableId.value, t.id) : ssrLooseEqual(selectedTableId.value, t.id)) ? " selected" : ""}>${ssrInterpolate(t.number)} (${ssrInterpolate(t.capacity)}p)</option>`);
					});
					_push(`<!--]--></select></div>`);
				} else _push(`<!---->`);
				_push(`<div class="p-3 border-b border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/10 flex items-center justify-between gap-4"><div class="flex items-center gap-1.5 text-xs text-slate-500 font-bold">`);
				_push(ssrRenderComponent(unref(User), { class: "h-3.5 w-3.5 text-slate-400" }, null, _parent));
				_push(`<span>Pilih Pelayan:</span></div><select class="h-8 px-2 border border-slate-200 dark:border-slate-800 rounded-lg bg-white dark:bg-slate-950 text-xs font-semibold focus:outline-none text-slate-900 dark:text-slate-100 cursor-pointer"><option${ssrRenderAttr("value", null)}${ssrIncludeBooleanAttr(Array.isArray(selectedWaiterId.value) ? ssrLooseContain(selectedWaiterId.value, null) : ssrLooseEqual(selectedWaiterId.value, null)) ? " selected" : ""}>Pilih pelayan...</option><!--[-->`);
				ssrRenderList(__props.waiters, (w) => {
					_push(`<option${ssrRenderAttr("value", w.id)}${ssrIncludeBooleanAttr(Array.isArray(selectedWaiterId.value) ? ssrLooseContain(selectedWaiterId.value, w.id) : ssrLooseEqual(selectedWaiterId.value, w.id)) ? " selected" : ""}>${ssrInterpolate(w.name)}</option>`);
				});
				_push(`<!--]--></select></div>`);
				if (orderType.value === "delivery") {
					_push(`<div class="p-3 border-b border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/10 flex items-center justify-between gap-4"><div class="flex items-center gap-1.5 text-xs text-slate-500 font-bold">`);
					_push(ssrRenderComponent(unref(Users), { class: "h-3.5 w-3.5 text-slate-400" }, null, _parent));
					_push(`<span>Pilih Kurir:</span></div><select class="h-8 px-2 border border-slate-200 dark:border-slate-800 rounded-lg bg-white dark:bg-slate-955 text-xs font-semibold focus:outline-none text-slate-900 dark:text-slate-100 cursor-pointer"><option${ssrRenderAttr("value", null)}${ssrIncludeBooleanAttr(Array.isArray(selectedCourierId.value) ? ssrLooseContain(selectedCourierId.value, null) : ssrLooseEqual(selectedCourierId.value, null)) ? " selected" : ""}>Pilih kurir...</option><!--[-->`);
					ssrRenderList(__props.couriers, (c) => {
						_push(`<option${ssrRenderAttr("value", c.id)}${ssrIncludeBooleanAttr(Array.isArray(selectedCourierId.value) ? ssrLooseContain(selectedCourierId.value, c.id) : ssrLooseEqual(selectedCourierId.value, c.id)) ? " selected" : ""}>${ssrInterpolate(c.name)}</option>`);
					});
					_push(`<!--]--></select></div>`);
				} else _push(`<!---->`);
				_push(`<div class="p-3 space-y-3.5 divide-y divide-slate-100 dark:divide-slate-900">`);
				if (cart.value.length === 0) {
					_push(`<div class="flex flex-col items-center justify-center p-8 text-slate-400">`);
					_push(ssrRenderComponent(unref(ShoppingCart), { class: "h-8 w-8 text-slate-200 mb-2" }, null, _parent));
					_push(`<p class="text-xs text-center">Keranjang kosong.<br>Pilih menu terlebih dahulu.</p></div>`);
				} else {
					_push(`<!--[-->`);
					ssrRenderList(cart.value, (item, idx) => {
						_push(`<div class="pt-3 first:pt-0 flex flex-col space-y-2 animate-in slide-in-from-bottom-2 duration-150"><div class="flex items-start justify-between gap-2"><div><h4 class="text-xs font-bold text-slate-900 dark:text-slate-100 leading-tight">${ssrInterpolate(item.product.name)}</h4><span class="text-[10px] text-slate-400 font-bold">Rp ${ssrInterpolate(Number(item.product.price).toLocaleString("id-ID"))}</span></div><button class="p-1 text-slate-450 hover:text-rose-500 rounded-lg cursor-pointer">`);
						_push(ssrRenderComponent(unref(Trash2), { class: "h-3.5 w-3.5" }, null, _parent));
						_push(`</button></div>`);
						if (item.product.modifiers && item.product.modifiers.length > 0) {
							_push(`<div class="flex flex-wrap items-center gap-1 pt-1"><span class="text-[8px] font-black text-slate-400 uppercase tracking-wide">Add-ons:</span><!--[-->`);
							ssrRenderList(item.product.modifiers, (mod) => {
								_push(`<button class="${ssrRenderClass(["px-1.5 py-0.5 border rounded-lg text-[8px] font-bold transition-all cursor-pointer", item.selectedModifiers.includes(mod.id) ? "bg-[#8c5a3c]/10 border-[#8c5a3c] text-[#8c5a3c]" : "bg-white dark:bg-slate-950 border-slate-200 dark:border-slate-800 text-slate-555"])}"> +${ssrInterpolate(mod.name)} (+Rp${ssrInterpolate(Number(mod.price).toLocaleString("id-ID"))}) </button>`);
							});
							_push(`<!--]--></div>`);
						} else _push(`<!---->`);
						_push(`<div class="flex flex-wrap items-center justify-between gap-2 pt-1">`);
						if (item.variant !== null) {
							_push(`<div class="flex rounded-lg bg-slate-100 dark:bg-slate-800 p-0.5"><button type="button" class="${ssrRenderClass(["px-1.5 py-0.5 rounded-md text-[9px] font-black uppercase flex items-center gap-0.5 transition-all cursor-pointer", item.variant === "ice" ? "bg-white dark:bg-slate-955 text-blue-600 dark:text-blue-400 shadow-sm" : "text-slate-450"])}">`);
							_push(ssrRenderComponent(unref(Snowflake), { class: "h-2.5 w-2.5" }, null, _parent));
							_push(` Es </button><button type="button" class="${ssrRenderClass(["px-1.5 py-0.5 rounded-md text-[9px] font-black uppercase flex items-center gap-0.5 transition-all cursor-pointer", item.variant === "hot" ? "bg-white dark:bg-slate-955 text-red-655 dark:text-red-400 shadow-sm" : "text-slate-455"])}">`);
							_push(ssrRenderComponent(unref(Flame), { class: "h-2.5 w-2.5" }, null, _parent));
							_push(` Panas </button></div>`);
						} else _push(`<div class="text-[9px] text-slate-400 italic">No variants</div>`);
						_push(`<div class="flex items-center gap-1.5"><button class="h-6 w-6 rounded bg-slate-100 dark:bg-slate-850 flex items-center justify-center text-slate-655 dark:text-slate-350 cursor-pointer">`);
						_push(ssrRenderComponent(unref(Minus), { class: "h-3 w-3" }, null, _parent));
						_push(`</button><span class="text-xs font-bold w-5 text-center text-slate-905 dark:text-slate-100">${ssrInterpolate(item.qty)}</span><button${ssrIncludeBooleanAttr(getAvailableQty(item.product, item.variant) <= 0) ? " disabled" : ""} class="h-6 w-6 rounded bg-slate-100 dark:bg-slate-850 flex items-center justify-center text-slate-655 dark:text-slate-350 disabled:opacity-40 cursor-pointer">`);
						_push(ssrRenderComponent(unref(Plus), { class: "h-3 w-3" }, null, _parent));
						_push(`</button></div></div><input${ssrRenderAttr("value", item.notes)} type="text" placeholder="Catatan menu..." class="w-full px-2.5 py-1 text-[10px] border border-slate-200 dark:border-slate-805 rounded bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-355 placeholder-slate-400 focus:outline-none focus:border-[#8c5a3c]"></div>`);
					});
					_push(`<!--]-->`);
				}
				_push(`</div><div class="border-t border-slate-200 dark:border-slate-800 p-3 space-y-4 bg-slate-50/50 dark:bg-slate-900/10"><div class="space-y-1"><span class="text-[8px] font-black uppercase text-slate-450 tracking-wider">Customer / Member</span><div class="grid grid-cols-2 gap-2"><select class="h-8 px-2 border border-slate-200 dark:border-slate-800 rounded-lg bg-white dark:bg-slate-955 text-xs font-semibold focus:outline-none text-slate-900 dark:text-slate-100 cursor-pointer"><!--[-->`);
				ssrRenderList(__props.customers, (c) => {
					_push(`<option${ssrRenderAttr("value", c.id)}${ssrIncludeBooleanAttr(Array.isArray(selectedCustomerId.value) ? ssrLooseContain(selectedCustomerId.value, c.id) : ssrLooseEqual(selectedCustomerId.value, c.id)) ? " selected" : ""}>${ssrInterpolate(c.name)} ${ssrInterpolate(c.is_member ? "(Member)" : "")}</option>`);
				});
				_push(`<!--]--></select>`);
				if (__props.customers.find((c) => c.id === selectedCustomerId.value)?.is_member) _push(`<div class="flex items-center gap-1.5"><span class="text-[8px] font-bold text-[#8c5a3c]">PTS: ${ssrInterpolate(selectedCustomerPoints.value)}</span><input type="number"${ssrRenderAttr("value", pointsToRedeem.value)} min="0"${ssrRenderAttr("max", selectedCustomerPoints.value)} placeholder="Redeem pts" class="w-full h-8 px-2 border border-slate-200 dark:border-slate-805 rounded-lg bg-white dark:bg-slate-955 text-xs text-right font-bold focus:outline-none"></div>`);
				else _push(`<!---->`);
				_push(`</div></div>`);
				if (__props.promos.length > 0) {
					_push(`<div class="space-y-1"><span class="text-[8px] font-black uppercase text-slate-450 tracking-wider">Terapkan Kupon Promo</span><select class="w-full h-8 px-2 border border-slate-200 dark:border-slate-805 rounded-lg bg-white dark:bg-slate-955 text-xs font-semibold focus:outline-none text-slate-900 dark:text-slate-100 cursor-pointer"><option${ssrRenderAttr("value", null)}${ssrIncludeBooleanAttr(Array.isArray(selectedPromoId.value) ? ssrLooseContain(selectedPromoId.value, null) : ssrLooseEqual(selectedPromoId.value, null)) ? " selected" : ""}>Pilih promo...</option><!--[-->`);
					ssrRenderList(__props.promos, (p) => {
						_push(`<option${ssrRenderAttr("value", p.id)}${ssrIncludeBooleanAttr(subtotal.value < p.min_purchase) ? " disabled" : ""}${ssrIncludeBooleanAttr(Array.isArray(selectedPromoId.value) ? ssrLooseContain(selectedPromoId.value, p.id) : ssrLooseEqual(selectedPromoId.value, p.id)) ? " selected" : ""}>${ssrInterpolate(p.name)} (Min. Rp${ssrInterpolate(Number(p.min_purchase).toLocaleString("id-ID"))}) </option>`);
					});
					_push(`<!--]--></select></div>`);
				} else _push(`<!---->`);
				_push(`<div class="space-y-1"><span class="text-[8px] font-black uppercase text-slate-455 tracking-wider">Kupon Voucher Kustom</span><div class="flex gap-2"><input type="text"${ssrRenderAttr("value", voucherCode.value)} placeholder="Masukkan kode..." class="flex-1 h-8 px-2 border border-slate-200 dark:border-slate-805 rounded-lg bg-white dark:bg-slate-955 text-xs font-semibold focus:outline-none text-slate-900 dark:text-slate-100 uppercase"><button type="button" class="h-8 px-3 bg-[#8c5a3c] hover:bg-[#734a31] text-white text-xs font-bold rounded-lg cursor-pointer transition-colors"> Terapkan </button></div>`);
				if (appliedVoucher.value) _push(`<p class="text-[9px] font-semibold text-emerald-600 dark:text-emerald-400"> Kupon diterapkan: ${ssrInterpolate(appliedVoucher.value.code)} (Potongan Rp ${ssrInterpolate(appliedVoucher.value.value.toLocaleString("id-ID"))}${ssrInterpolate(appliedVoucher.value.type === "percent" ? "%" : "")}) </p>`);
				else _push(`<!---->`);
				if (voucherError.value) _push(`<p class="text-[9px] font-semibold text-rose-600 dark:text-rose-400">${ssrInterpolate(voucherError.value)}</p>`);
				else _push(`<!---->`);
				_push(`</div>`);
				if (birthdayDiscount.value > 0) _push(`<div class="p-2 border border-emerald-500/20 bg-emerald-500/10 rounded-lg text-[9px] text-emerald-700 dark:text-emerald-400 font-bold flex items-center gap-1.5 animate-pulse"><span>🎉</span><span>Ulang Ulang Tahun Member! Diskon 10% Otomatis + Bonus 50 Poin!</span></div>`);
				else _push(`<!---->`);
				_push(`<div class="space-y-1 text-[11px] text-slate-600 dark:text-slate-400"><div class="flex justify-between"><span>Subtotal</span><span class="font-bold text-slate-900 dark:text-slate-100">Rp ${ssrInterpolate(subtotal.value.toLocaleString("id-ID"))}</span></div>`);
				if (__props.servicePercentage > 0) _push(`<div class="flex justify-between"><span>Biaya Layanan (${ssrInterpolate(__props.servicePercentage)}%)</span><span class="font-bold text-slate-900 dark:text-slate-100">Rp ${ssrInterpolate(serviceCharge.value.toLocaleString("id-ID"))}</span></div>`);
				else _push(`<!---->`);
				if (__props.taxPercentage > 0) _push(`<div class="flex justify-between"><span>Pajak Restoran (${ssrInterpolate(__props.taxPercentage)}%)</span><span class="font-bold text-slate-900 dark:text-slate-100">Rp ${ssrInterpolate(tax.value.toLocaleString("id-ID"))}</span></div>`);
				else _push(`<!---->`);
				if (discountAmount.value > 0) _push(`<div class="flex justify-between text-rose-500 font-bold"><span>Potongan Diskon</span><span>-Rp ${ssrInterpolate(discountAmount.value.toLocaleString("id-ID"))}</span></div>`);
				else _push(`<!---->`);
				_push(`<div class="flex justify-between text-xs font-extrabold text-slate-900 dark:text-slate-100 pt-1.5 border-t border-slate-200 dark:border-slate-800"><span>Total Tagihan</span><span class="text-[#8c5a3c]">Rp ${ssrInterpolate(grandTotal.value.toLocaleString("id-ID"))}</span></div></div><div class="space-y-1.5"><span class="text-[8px] font-black uppercase text-slate-450 tracking-wider">Metode Pembayaran</span><div class="grid grid-cols-3 gap-2"><!--[-->`);
				ssrRenderList([
					"cash",
					"transfer",
					"qris"
				], (method) => {
					_push(`<button class="${ssrRenderClass(["py-1.5 text-xs font-bold rounded-lg border text-center transition-all cursor-pointer uppercase", paymentMethod.value === method ? "bg-[#8c5a3c]/10 border-[#8c5a3c] text-[#8c5a3c]" : "border-slate-200 dark:border-slate-800 text-slate-500 bg-white dark:bg-slate-950"])}">${ssrInterpolate(method)}</button>`);
				});
				_push(`<!--]--></div></div>`);
				if (paymentMethod.value === "cash") {
					_push(`<div class="space-y-2 pt-2 border-t border-dashed border-slate-200 dark:border-slate-800 animate-in fade-in duration-200"><div class="flex items-center justify-between gap-4"><span class="text-[8px] font-black uppercase text-slate-450">Uang Diterima</span><input${ssrRenderAttr("value", cashReceived.value)} type="number" class="w-28 px-2 py-1 text-right border border-slate-200 dark:border-slate-800 rounded bg-white dark:bg-slate-955 text-slate-900 dark:text-slate-100 text-xs focus:outline-none focus:border-[#8c5a3c] font-bold"></div><div class="flex flex-wrap gap-1"><button type="button" class="px-2 py-1 rounded bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-[9px] font-bold hover:bg-slate-250 cursor-pointer"> Pas </button><!--[-->`);
					ssrRenderList([
						2e4,
						5e4,
						1e5
					], (amt) => {
						_push(`<button type="button" class="px-2 py-1 rounded bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-[9px] font-bold hover:bg-slate-200 cursor-pointer" style="${ssrRenderStyle(amt >= grandTotal.value ? null : { display: "none" })}"> Rp ${ssrInterpolate(amt.toLocaleString("id-ID"))}</button>`);
					});
					_push(`<!--]--></div>`);
					if (cashReceived.value >= grandTotal.value) _push(`<div class="flex justify-between items-center text-[10px] font-bold text-emerald-600 dark:text-emerald-400 pt-1"><span>Kembalian</span><span class="font-extrabold text-xs">Rp ${ssrInterpolate(changeDue.value.toLocaleString("id-ID"))}</span></div>`);
					else _push(`<!---->`);
					_push(`</div>`);
				} else _push(`<!---->`);
				_push(`<button${ssrIncludeBooleanAttr(cart.value.length === 0 || isCheckingOut.value || paymentMethod.value === "cash" && cashReceived.value < grandTotal.value) ? " disabled" : ""} class="w-full py-2.5 bg-[#8c5a3c] hover:bg-[#734a31] text-white rounded-lg text-xs font-bold shadow-sm focus:outline-none focus:ring-2 focus:ring-[#8c5a3c]/20 disabled:opacity-40 transition-all cursor-pointer flex items-center justify-center gap-1.5"><span>${ssrInterpolate(isCheckingOut.value ? "Memproses..." : "Selesaikan Pembayaran")}</span></button></div></div></div>`);
			} else _push(`<!---->`);
			if (activeMobileTab.value === "history") {
				_push(`<div class="flex flex-col space-y-4 pb-20 animate-in fade-in duration-200"><div class="flex items-center justify-between"><h3 class="text-xs font-extrabold text-slate-805 dark:text-slate-200 flex items-center gap-1.5">`);
				_push(ssrRenderComponent(unref(History), { class: "h-4.5 w-4.5 text-[#8c5a3c]" }, null, _parent));
				_push(`<span>Riwayat Transaksi Terakhir</span></h3><span class="text-[9px] bg-[#8c5a3c]/10 text-[#8c5a3c] px-2 py-0.5 rounded-full font-bold"> Outlet: ${ssrInterpolate(__props.outlets.find((o) => o.id === outletId.value)?.name)}</span></div>`);
				if (!__props.recentTransactions || __props.recentTransactions.length === 0) {
					_push(`<div class="flex flex-col items-center justify-center p-12 text-slate-450 bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-sm">`);
					_push(ssrRenderComponent(unref(History), { class: "h-10 w-10 text-slate-350 mb-2" }, null, _parent));
					_push(`<p class="text-xs">Belum ada transaksi di outlet ini.</p></div>`);
				} else {
					_push(`<div class="space-y-3"><!--[-->`);
					ssrRenderList(__props.recentTransactions, (txn) => {
						_push(`<div class="bg-white dark:bg-slate-955 border border-slate-205 dark:border-slate-850 rounded-xl p-4 shadow-sm flex flex-col space-y-3"><div class="flex items-center justify-between text-xs border-b border-slate-100 dark:border-slate-900 pb-2"><span class="font-mono font-bold text-slate-850 dark:text-slate-200">${ssrInterpolate(txn.transaction_number)}</span><span class="${ssrRenderClass(["px-2 py-0.5 rounded-full text-[9px] font-black uppercase tracking-wider", txn.status === "success" ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-450" : "bg-rose-500/10 text-rose-600 dark:text-rose-455"])}">${ssrInterpolate(txn.status === "success" ? "Sukses" : "Void")}</span></div><div class="grid grid-cols-2 gap-y-2 text-[10px] text-slate-500 dark:text-slate-400 font-bold"><div>Antrean: <span class="text-slate-800 dark:text-slate-200">${ssrInterpolate(txn.queue_number)}</span></div><div>Waktu: <span class="text-slate-800 dark:text-slate-200">${ssrInterpolate(txn.created_at)}</span></div><div>Order: <span class="uppercase text-slate-800 dark:text-slate-200">${ssrInterpolate(txn.order_type.replace("_", " "))}</span></div><div>Metode: <span class="uppercase text-[#8c5a3c] font-black">${ssrInterpolate(txn.payment_method)}</span></div>`);
						if (txn.table) _push(`<div class="col-span-2">Meja: <span class="text-slate-800 dark:text-slate-200 font-extrabold">${ssrInterpolate(txn.table.number)}</span></div>`);
						else _push(`<!---->`);
						if (txn.customer) _push(`<div class="col-span-2">Customer: <span class="text-slate-800 dark:text-slate-200 font-extrabold">${ssrInterpolate(txn.customer.name)}</span></div>`);
						else _push(`<!---->`);
						_push(`</div><div class="text-[10px] text-slate-450 dark:text-slate-500 bg-slate-50 dark:bg-slate-900/30 p-2.5 rounded-lg border border-slate-100 dark:border-slate-900 space-y-1.5"><!--[-->`);
						ssrRenderList(txn.items, (item) => {
							_push(`<div class="flex justify-between items-start leading-tight"><div class="max-w-[200px]"><span class="font-bold text-slate-700 dark:text-slate-350">${ssrInterpolate(item.qty)}x ${ssrInterpolate(item.product?.name)}</span>`);
							if (item.variant) _push(`<span class="text-[8px] text-[#8c5a3c] uppercase block">[${ssrInterpolate(item.variant)}]</span>`);
							else _push(`<!---->`);
							_push(`</div><span class="font-bold text-slate-800 dark:text-slate-300">Rp ${ssrInterpolate(item.subtotal.toLocaleString("id-ID"))}</span></div>`);
						});
						_push(`<!--]--></div><div class="flex justify-between items-center border-t border-slate-100 dark:border-slate-900 pt-2 text-xs"><span class="font-bold text-slate-400">Total Tagihan</span><span class="text-sm font-extrabold text-[#8c5a3c]">Rp ${ssrInterpolate(txn.total_amount.toLocaleString("id-ID"))}</span></div><div class="flex gap-2 pt-1.5"><button class="flex-1 py-2 bg-slate-100 dark:bg-slate-900 hover:bg-[#8c5a3c]/15 text-slate-700 dark:text-slate-300 hover:text-[#8c5a3c] border border-slate-200/50 dark:border-slate-800 rounded-xl text-[10px] font-bold flex items-center justify-center gap-1.5 transition-colors cursor-pointer">`);
						_push(ssrRenderComponent(unref(Printer), { class: "h-3.5 w-3.5" }, null, _parent));
						_push(`<span>Detail Struk</span></button>`);
						if (txn.status !== "cancelled") _push(`<button class="py-2 px-4 bg-rose-500/10 hover:bg-rose-600 text-rose-600 hover:text-white border border-rose-500/20 rounded-xl text-[10px] font-bold flex items-center justify-center gap-1.5 transition-all cursor-pointer"><span>Void</span></button>`);
						else _push(`<!---->`);
						_push(`</div></div>`);
					});
					_push(`<!--]--></div>`);
				}
				_push(`</div>`);
			} else _push(`<!---->`);
			_push(`</div>`);
			if (activeMobileTab.value === "menu" && cart.value.length > 0) {
				_push(`<div class="lg:hidden fixed bottom-18 left-4 right-4 z-40 animate-bounce"><button class="w-full bg-[#8c5a3c] hover:bg-[#734a31] text-white py-3 px-4 rounded-xl shadow-lg flex items-center justify-between text-xs font-bold shadow-[#8c5a3c]/30 border border-[#8c5a3c]/20 transition-all"><div class="flex items-center gap-2">`);
				_push(ssrRenderComponent(unref(ShoppingCart), { class: "h-4.5 w-4.5" }, null, _parent));
				_push(`<span class="bg-white/20 px-1.5 py-0.5 rounded-full text-[9px] font-extrabold">${ssrInterpolate(cart.value.reduce((sum, item) => sum + item.qty, 0))} Menu</span></div><span class="flex items-center gap-1"><span>Bayar</span>`);
				_push(ssrRenderComponent(unref(ChevronRight), { class: "h-4 w-4" }, null, _parent));
				_push(`<span class="text-sm font-black">Rp ${ssrInterpolate(grandTotal.value.toLocaleString("id-ID"))}</span></span></button></div>`);
			} else _push(`<!---->`);
			_push(`<div class="lg:hidden fixed bottom-0 left-0 right-0 z-40 bg-white dark:bg-slate-950 border-t border-slate-200 dark:border-slate-850 flex items-center justify-around py-2 shadow-lg select-none"><button class="${ssrRenderClass(["flex flex-col items-center gap-1 py-1 px-4 rounded-xl transition-all cursor-pointer active:scale-95", activeMobileTab.value === "menu" ? "text-[#8c5a3c]" : "text-slate-400 dark:text-slate-500"])}">`);
			_push(ssrRenderComponent(unref(Coffee), { class: "h-5 w-5" }, null, _parent));
			_push(`<span class="text-[9px] font-extrabold">Pilih Menu</span></button><button class="${ssrRenderClass(["flex flex-col items-center gap-1 py-1 px-4 rounded-xl transition-all cursor-pointer relative active:scale-95", activeMobileTab.value === "cart" ? "text-[#8c5a3c]" : "text-slate-400 dark:text-slate-500"])}">`);
			_push(ssrRenderComponent(unref(ShoppingCart), { class: "h-5 w-5" }, null, _parent));
			_push(`<span class="text-[9px] font-extrabold">Keranjang</span>`);
			if (cart.value.length > 0) _push(`<span class="absolute -top-0.5 right-3.5 flex h-4.5 w-4.5 items-center justify-center rounded-full bg-rose-600 text-[8px] font-black text-white ring-2 ring-white dark:ring-slate-955 shadow-sm">${ssrInterpolate(cart.value.reduce((sum, item) => sum + item.qty, 0))}</span>`);
			else _push(`<!---->`);
			_push(`</button><button class="${ssrRenderClass(["flex flex-col items-center gap-1 py-1 px-4 rounded-xl transition-all cursor-pointer active:scale-95", activeMobileTab.value === "history" ? "text-[#8c5a3c]" : "text-slate-400 dark:text-slate-500"])}">`);
			_push(ssrRenderComponent(unref(History), { class: "h-5 w-5" }, null, _parent));
			_push(`<span class="text-[9px] font-extrabold">Riwayat</span></button></div></main>`);
			if (isReceiptModalOpen.value) {
				_push(`<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/65 backdrop-blur-sm"><div id="receipt-print-modal" class="w-full max-w-sm bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-2xl p-6 animate-in zoom-in-95 duration-200 space-y-6 text-slate-900 dark:text-slate-100"><div class="text-center space-y-1"><h2 class="text-xl font-bold tracking-wider uppercase text-slate-900 dark:text-slate-100">${ssrInterpolate(_ctx.$page.props.settings.site_name)}</h2><p class="text-xs font-medium text-slate-500 dark:text-slate-400">${ssrInterpolate(receiptData.value?.outlet_name)}</p><p class="text-[10px] text-slate-400 dark:text-slate-500">${ssrInterpolate(receiptData.value?.date)}</p></div><div class="border-t border-b border-dashed border-slate-200 dark:border-slate-700 py-3 text-xs space-y-1.5 font-mono text-slate-800 dark:text-slate-200"><div class="flex justify-between"><span>No Transaksi:</span><span>${ssrInterpolate(receiptData.value?.transaction_number)}</span></div><div class="flex justify-between"><span>Kasir:</span><span>${ssrInterpolate(receiptData.value?.cashier_name)}</span></div><div class="flex justify-between uppercase"><span>Metode Bayar:</span><span>${ssrInterpolate(receiptData.value?.payment_method)}</span></div></div><div class="space-y-2.5 font-mono text-xs"><!--[-->`);
				ssrRenderList(receiptData.value?.items, (item, idx) => {
					_push(`<div class="flex justify-between items-start"><div class="max-w-[200px]"><p class="font-semibold">${ssrInterpolate(item.product.name)}</p>`);
					if (item.variant) _push(`<span class="text-[10px] text-slate-400 uppercase">[${ssrInterpolate(item.variant)}]</span>`);
					else _push(`<!---->`);
					if (item.selectedModifiers && item.selectedModifiers.length > 0) {
						_push(`<div class="pl-2 space-y-0.5"><!--[-->`);
						ssrRenderList(item.selectedModifiers, (mId) => {
							_push(`<span class="text-[9px] text-slate-500 block"> + ${ssrInterpolate(__props.modifiers.find((m) => m.id === mId)?.name)}</span>`);
						});
						_push(`<!--]--></div>`);
					} else _push(`<!---->`);
					if (item.notes) _push(`<span class="text-[10px] text-slate-400 block italic">* ${ssrInterpolate(item.notes)}</span>`);
					else _push(`<!---->`);
					_push(`</div><span class="flex-shrink-0">${ssrInterpolate(item.qty)} x Rp${ssrInterpolate(Number(item.product.price).toLocaleString("id-ID"))}</span></div>`);
				});
				_push(`<!--]--></div><div class="border-t border-dashed border-slate-200 dark:border-slate-700 pt-3 space-y-1.5 font-mono text-xs text-slate-800 dark:text-slate-200"><div class="flex justify-between"><span>Subtotal</span><span>Rp ${ssrInterpolate(Number(receiptData.value?.subtotal).toLocaleString("id-ID"))}</span></div>`);
				if (receiptData.value?.service > 0) _push(`<div class="flex justify-between"><span>Biaya Layanan</span><span>Rp ${ssrInterpolate(Number(receiptData.value?.service).toLocaleString("id-ID"))}</span></div>`);
				else _push(`<!---->`);
				if (receiptData.value?.tax > 0) _push(`<div class="flex justify-between"><span>Pajak Restoran</span><span>Rp ${ssrInterpolate(Number(receiptData.value?.tax).toLocaleString("id-ID"))}</span></div>`);
				else _push(`<!---->`);
				_push(`<div class="flex justify-between text-sm font-bold pt-1.5 border-t border-slate-200 dark:border-slate-800"><span>Total Tagihan</span><span>Rp ${ssrInterpolate(Number(receiptData.value?.total).toLocaleString("id-ID"))}</span></div><div class="flex justify-between pt-1 text-slate-600 dark:text-slate-350"><span>Bayar</span><span>Rp ${ssrInterpolate(Number(receiptData.value?.cash_received).toLocaleString("id-ID"))}</span></div>`);
				if (receiptData.value?.payment_method === "cash") _push(`<div class="flex justify-between text-emerald-600 dark:text-emerald-400 font-bold"><span>Kembalian</span><span>Rp ${ssrInterpolate(Number(receiptData.value?.change).toLocaleString("id-ID"))}</span></div>`);
				else _push(`<!---->`);
				_push(`</div><div class="flex flex-col gap-2 pt-4 border-t border-slate-200 dark:border-slate-800 print:hidden"><div class="flex gap-2">`);
				if (receiptData.value) {
					_push(`<button${ssrIncludeBooleanAttr(unref(isPrinting)) ? " disabled" : ""} class="flex-1 py-2 border border-slate-200 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-900 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg text-xs font-semibold text-slate-700 dark:text-slate-300 transition-all flex items-center justify-center gap-1.5 cursor-pointer text-center">`);
					_push(ssrRenderComponent(unref(Printer), { class: "h-3.5 w-3.5" }, null, _parent));
					_push(` Struk Kasir </button>`);
				} else _push(`<!---->`);
				if (receiptData.value) {
					_push(`<button${ssrIncludeBooleanAttr(unref(isPrinting)) ? " disabled" : ""} class="flex-1 py-2 border border-slate-200 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-900 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg text-xs font-semibold text-[#8c5a3c] transition-all flex items-center justify-center gap-1.5 cursor-pointer text-center">`);
					_push(ssrRenderComponent(unref(FileText), { class: "h-3.5 w-3.5" }, null, _parent));
					_push(` Tiket Dapur </button>`);
				} else _push(`<!---->`);
				_push(`</div><button class="w-full py-2 bg-[#8c5a3c] hover:bg-[#734a31] text-white rounded-lg text-xs font-semibold shadow-sm focus:outline-none transition-all cursor-pointer text-center"> Selesai </button></div></div></div>`);
			} else _push(`<!---->`);
			if (isSplitModalOpen.value) {
				_push(`<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/65 backdrop-blur-sm animate-in fade-in duration-150"><div class="bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-2xl w-full max-w-lg overflow-hidden flex flex-col transform transition-all max-h-[90vh]"><div class="px-6 py-4 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between"><h3 class="text-sm font-extrabold text-slate-900 dark:text-slate-100 flex items-center gap-2">`);
				_push(ssrRenderComponent(unref(Split), { class: "h-4 w-4 text-[#8c5a3c]" }, null, _parent));
				_push(`<span>Split Bill (Pisah Pembayaran)</span></h3><button class="p-1.5 hover:bg-slate-100 dark:hover:bg-slate-900 rounded-lg text-slate-400 cursor-pointer">`);
				_push(ssrRenderComponent(unref(X), { class: "h-4 w-4" }, null, _parent));
				_push(`</button></div><div class="flex-1 overflow-y-auto p-6 space-y-4"><p class="text-xs text-slate-400">Tentukan jumlah qty item yang ingin dibayar pada tagihan pertama (Split Bill). Sisa item akan tetap berada di keranjang untuk pembayaran berikutnya.</p><div class="border border-slate-200 dark:border-slate-800 rounded-xl overflow-hidden"><table class="w-full text-left border-collapse bg-white dark:bg-slate-950"><thead><tr class="bg-slate-50 dark:bg-slate-900 text-[10px] font-bold text-slate-400 dark:text-slate-500 border-b border-slate-200 dark:border-slate-800"><th class="p-3">Nama Menu</th><th class="p-3 text-center">Keranjang Qty</th><th class="p-3 text-center" style="${ssrRenderStyle({ "width": "130px" })}">Split Qty</th></tr></thead><tbody class="divide-y divide-slate-100 dark:divide-slate-800"><!--[-->`);
				ssrRenderList(splitItems.value, (split, index) => {
					_push(`<tr class="text-xs font-semibold hover:bg-slate-50 dark:hover:bg-slate-900/50 transition-colors"><td class="p-3"><span class="text-slate-800 dark:text-slate-200 block">${ssrInterpolate(cart.value[split.itemIndex].product.name)}</span>`);
					if (cart.value[split.itemIndex].variant) _push(`<span class="text-[9px] text-[#8c5a3c] font-black uppercase">${ssrInterpolate(cart.value[split.itemIndex].variant)}</span>`);
					else _push(`<!---->`);
					_push(`</td><td class="p-3 text-center font-bold text-slate-700 dark:text-slate-300">${ssrInterpolate(cart.value[split.itemIndex].qty)}</td><td class="p-3"><div class="flex items-center justify-center gap-2"><button type="button" class="h-6 w-6 rounded bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 flex items-center justify-center cursor-pointer transition-colors"> - </button><span class="w-6 text-center font-extrabold text-slate-900 dark:text-slate-100">${ssrInterpolate(split.qty)}</span><button type="button" class="h-6 w-6 rounded bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 flex items-center justify-center cursor-pointer transition-colors"> + </button></div></td></tr>`);
				});
				_push(`<!--]--></tbody></table></div></div><div class="px-6 py-4 border-t border-slate-200 dark:border-slate-800 flex items-center justify-end gap-3 bg-slate-50/50 dark:bg-slate-900/10"><button type="button" class="px-4 py-2 border border-slate-200 dark:border-slate-800 text-slate-700 dark:text-slate-350 text-xs font-bold rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer"> Batal </button><button type="button"${ssrIncludeBooleanAttr(isCheckingOut.value || !splitItems.value.some((s) => s.qty > 0)) ? " disabled" : ""} class="px-4 py-2 bg-[#8c5a3c] hover:bg-[#734a31] text-white text-xs font-bold rounded-xl cursor-pointer disabled:opacity-50"> Bayar Bagian Ini </button></div></div></div>`);
			} else _push(`<!---->`);
			if (isPrinterSettingsOpen.value) {
				_push(`<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/65 backdrop-blur-sm animate-in fade-in duration-150"><div class="bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-2xl w-full max-w-md overflow-hidden flex flex-col transform transition-all"><div class="px-6 py-4 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between"><h3 class="text-sm font-extrabold text-slate-900 dark:text-slate-100 flex items-center gap-2">`);
				_push(ssrRenderComponent(unref(Settings), { class: "h-4 w-4 text-[#8c5a3c]" }, null, _parent));
				_push(`<span>Pengaturan Printer POS</span></h3><button class="p-1.5 hover:bg-slate-100 dark:hover:bg-slate-900 rounded-lg text-slate-400 cursor-pointer">`);
				_push(ssrRenderComponent(unref(X), { class: "h-4 w-4" }, null, _parent));
				_push(`</button></div><div class="p-6 space-y-4 max-h-[70vh] overflow-y-auto font-sans"><div class="space-y-1.5"><label class="block text-xs font-bold text-slate-650 dark:text-slate-350">Metode Pencetakan</label><select class="w-full px-3 py-2 text-xs border border-slate-200 dark:border-slate-800 rounded-lg bg-transparent focus:outline-none focus:ring-1 focus:ring-[#8c5a3c] text-slate-850 dark:text-slate-150"><option value="browser"${ssrIncludeBooleanAttr(Array.isArray(printSettings.value.method) ? ssrLooseContain(printSettings.value.method, "browser") : ssrLooseEqual(printSettings.value.method, "browser")) ? " selected" : ""}>Browser Print (Buka Tab Baru)</option><option value="qz"${ssrIncludeBooleanAttr(Array.isArray(printSettings.value.method) ? ssrLooseContain(printSettings.value.method, "qz") : ssrLooseEqual(printSettings.value.method, "qz")) ? " selected" : ""}>QZ Tray (Cetak Otomatis / Silent)</option></select></div>`);
				if (printSettings.value.method === "qz") {
					_push(`<div class="p-3 bg-slate-50 dark:bg-slate-900/30 border border-slate-200 dark:border-slate-800 rounded-xl space-y-3"><div class="flex items-center justify-between"><span class="text-[10px] font-bold uppercase tracking-wider text-slate-400">Status QZ Tray</span><span class="${ssrRenderClass(["inline-flex px-2 py-0.5 rounded-full text-[9px] font-bold uppercase", qzConnectionStatus.value === "connected" ? "bg-emerald-50 dark:bg-emerald-95/30 text-emerald-700" : "bg-rose-50 dark:bg-rose-95/30 text-rose-700"])}">${ssrInterpolate(qzConnectionStatus.value === "connected" ? "Terhubung" : "Terputus")}</span></div><button type="button"${ssrIncludeBooleanAttr(isConnectingQZ.value) ? " disabled" : ""} class="w-full py-1.5 border border-slate-200 dark:border-slate-800 hover:bg-slate-100 dark:hover:bg-slate-900 text-slate-700 dark:text-slate-300 text-xs font-bold rounded-lg transition-colors cursor-pointer flex items-center justify-center gap-1.5 disabled:opacity-50">`);
					_push(ssrRenderComponent(unref(RefreshCw), { class: ["h-3 w-3", { "animate-spin": isConnectingQZ.value }] }, null, _parent));
					_push(`<span>Hubungkan Ulang / Cek Koneksi</span></button></div>`);
				} else _push(`<!---->`);
				if (printSettings.value.method === "qz") {
					_push(`<div class="space-y-3"><div class="space-y-1.5"><label class="block text-xs font-bold text-slate-650 dark:text-slate-350">Printer Kasir (Struk)</label>`);
					if (availablePrinters.value.length > 0) {
						_push(`<select class="w-full px-3 py-2 text-xs border border-slate-200 dark:border-slate-800 rounded-lg bg-transparent focus:outline-none focus:ring-1 focus:ring-[#8c5a3c] text-slate-850 dark:text-slate-150"><option value=""${ssrIncludeBooleanAttr(Array.isArray(printSettings.value.posPrinter) ? ssrLooseContain(printSettings.value.posPrinter, "") : ssrLooseEqual(printSettings.value.posPrinter, "")) ? " selected" : ""}>-- Pilih Printer Kasir --</option><!--[-->`);
						ssrRenderList(availablePrinters.value, (printer) => {
							_push(`<option${ssrRenderAttr("value", printer)}${ssrIncludeBooleanAttr(Array.isArray(printSettings.value.posPrinter) ? ssrLooseContain(printSettings.value.posPrinter, printer) : ssrLooseEqual(printSettings.value.posPrinter, printer)) ? " selected" : ""}>${ssrInterpolate(printer)}</option>`);
						});
						_push(`<!--]--></select>`);
					} else _push(`<input${ssrRenderAttr("value", printSettings.value.posPrinter)} type="text" placeholder="Masukkan nama printer (e.g. POS-58)" class="w-full px-3 py-2 text-xs border border-slate-200 dark:border-slate-800 rounded-lg bg-transparent focus:outline-none focus:ring-1 focus:ring-[#8c5a3c] text-slate-850 dark:text-slate-150">`);
					_push(`</div><div class="space-y-1.5"><label class="block text-xs font-bold text-slate-650 dark:text-slate-350">Printer Dapur (Tiket)</label>`);
					if (availablePrinters.value.length > 0) {
						_push(`<select class="w-full px-3 py-2 text-xs border border-slate-200 dark:border-slate-800 rounded-lg bg-transparent focus:outline-none focus:ring-1 focus:ring-[#8c5a3c] text-slate-850 dark:text-slate-150"><option value=""${ssrIncludeBooleanAttr(Array.isArray(printSettings.value.kitchenPrinter) ? ssrLooseContain(printSettings.value.kitchenPrinter, "") : ssrLooseEqual(printSettings.value.kitchenPrinter, "")) ? " selected" : ""}>-- Pilih Printer Dapur --</option><!--[-->`);
						ssrRenderList(availablePrinters.value, (printer) => {
							_push(`<option${ssrRenderAttr("value", printer)}${ssrIncludeBooleanAttr(Array.isArray(printSettings.value.kitchenPrinter) ? ssrLooseContain(printSettings.value.kitchenPrinter, printer) : ssrLooseEqual(printSettings.value.kitchenPrinter, printer)) ? " selected" : ""}>${ssrInterpolate(printer)}</option>`);
						});
						_push(`<!--]--></select>`);
					} else _push(`<input${ssrRenderAttr("value", printSettings.value.kitchenPrinter)} type="text" placeholder="Masukkan nama printer (e.g. Kitchen-Printer)" class="w-full px-3 py-2 text-xs border border-slate-200 dark:border-slate-800 rounded-lg bg-transparent focus:outline-none focus:ring-1 focus:ring-[#8c5a3c] text-slate-850 dark:text-slate-150">`);
					_push(`</div><div class="pt-2 space-y-2.5"><div class="flex items-center justify-between"><span class="text-xs font-semibold text-slate-700 dark:text-slate-300">Auto-Print Struk Kasir</span><input${ssrIncludeBooleanAttr(Array.isArray(printSettings.value.autoPrintPos) ? ssrLooseContain(printSettings.value.autoPrintPos, null) : printSettings.value.autoPrintPos) ? " checked" : ""} type="checkbox" class="h-4 w-4 rounded border-slate-300 text-[#8c5a3c] focus:ring-[#8c5a3c] cursor-pointer"></div></div></div>`);
				} else _push(`<!---->`);
				_push(`</div><div class="px-6 py-4 border-t border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900/30 flex items-center justify-end gap-3"><button type="button" class="px-4 py-2 border border-slate-200 dark:border-slate-800 text-slate-700 dark:text-slate-300 text-xs font-bold rounded-xl hover:bg-slate-50 dark:hover:bg-slate-900 transition-colors cursor-pointer"> Batal </button><button type="button" class="px-4 py-2 bg-[#8c5a3c] hover:bg-[#734a31] text-white text-xs font-bold rounded-xl cursor-pointer"> Simpan Pengaturan </button></div></div></div>`);
			} else _push(`<!---->`);
			if (unref(isPrinting)) {
				_push(`<div class="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-slate-950/65 backdrop-blur-md"><div class="bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-2xl p-6 w-full max-w-sm text-center space-y-4 transform transition-all"><div class="relative w-16 h-16 mx-auto flex items-center justify-center"><div class="absolute inset-0 rounded-full border-4 border-slate-100 dark:border-slate-900"></div><div class="absolute inset-0 rounded-full border-4 border-t-[#8c5a3c] dark:border-t-[#8c5a3c] animate-spin"></div>`);
				_push(ssrRenderComponent(unref(Printer), { class: "h-6 w-6 text-[#8c5a3c]" }, null, _parent));
				_push(`</div><div class="space-y-1"><h3 class="text-sm font-bold text-slate-900 dark:text-slate-100"> Sedang Mencetak Struk </h3><p class="text-xs text-slate-500 dark:text-slate-400 animate-pulse font-medium">${ssrInterpolate(unref(printStatus) || "Menghubungkan ke printer...")}</p></div></div></div>`);
			} else _push(`<!---->`);
			_push(`</div><!--]-->`);
		};
	}
});
//#endregion
//#region resources/js/Pages/CafePOS/POS.vue
var _sfc_setup = POS_vue_vue_type_script_setup_true_lang_default.setup;
POS_vue_vue_type_script_setup_true_lang_default.setup = (props, ctx) => {
	const ssrContext = useSSRContext();
	(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("resources/js/Pages/CafePOS/POS.vue");
	return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
var POS_default = POS_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { POS_default as default };
