@classytic/pos-ui 0.1.0

package/dist/components/ReceiptReprintDialog.js

@@ -0,0 +1,182 @@
+"use client";
+
+import { usePosBranch } from "../runtime/branch-port.js";
+import { formatPaisa } from "../lib/money.js";
+import { transformOrderToReceipt } from "../utils/pos-helpers.js";
+import { useMemo } from "react";
+import { PrintableView, printDocument } from "@classytic/fluid/client/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Loader2, Printer } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { getReceiptLocale, paymentMethodLabel } from "@classytic/commerce-sdk/client";
+import { DocumentFooter, DocumentHeader, DocumentLineTable, DocumentPage, DocumentParty, DocumentSummary } from "@classytic/fluid/document";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+
+//#region src/components/ReceiptReprintDialog.tsx
+/**
+* ReceiptReprintDialog — Reprint a historical POS order's receipt.
+*
+* Takes an already-fetched raw order document (from `usePosOrderDetail`)
+* and transforms it client-side via `transformOrderToReceipt`. This is the
+* same helper the live ReceiptScreen uses after checkout, so a reprint
+* matches the original visually.
+*
+* Receipt rendering is intentionally client-side. The Order doc has every
+* field a receipt needs; running it through `transformOrderToReceipt`
+* locally is faster, requires no extra round-trip, and gives the host
+* full control over branding/format without involving a backend schema.
+*
+* Print path: `printDocument("pos-receipt-reprint")` isolates the rendered
+* `<PrintableView>` and triggers `window.print()` (or ESC/POS via Tauri).
+* The DOM id is intentionally *different* from the live ReceiptScreen's
+* `pos-receipt` so a reprint never clobbers an in-flight sale.
+*/
+const REPRINT_DOM_ID = "pos-receipt-reprint";
+function isShownPhone(phone) {
+	return Boolean(phone && !phone.startsWith("pending_"));
+}
+function buildLines(receipt) {
+	return (receipt.items ?? []).map((item, idx) => {
+		const subtotal = (item.unitPrice ?? 0) * item.quantity;
+		return {
+			sequence: idx + 1,
+			description: item.name + (item.variant ? ` (${item.variant})` : ""),
+			quantity: item.quantity,
+			uom: "pcs",
+			unitPrice: item.unitPrice ?? 0,
+			discountType: "flat",
+			discountValue: 0,
+			subtotal,
+			taxRate: item.vatRate ?? 0,
+			taxAmount: item.vatAmount ?? 0,
+			lineTotal: item.total,
+			formatted: {
+				unitPrice: formatPaisa(item.unitPrice ?? 0),
+				subtotal: formatPaisa(subtotal),
+				taxAmount: formatPaisa(item.vatAmount ?? 0),
+				lineTotal: formatPaisa(item.total)
+			}
+		};
+	});
+}
+function ReceiptReprintDialog({ order, open, onOpenChange }) {
+	const selectedBranch = usePosBranch();
+	const receipt = useMemo(() => {
+		if (!order) return null;
+		return transformOrderToReceipt(order, {
+			name: selectedBranch?.name ?? "Store",
+			...selectedBranch?.phone ? { phone: selectedBranch.phone } : {}
+		});
+	}, [
+		order,
+		selectedBranch?.name,
+		selectedBranch?.phone
+	]);
+	const handlePrint = () => {
+		if (!receipt) return;
+		printDocument(REPRINT_DOM_ID);
+	};
+	const customerName = receipt?.customer?.name?.trim() ?? "";
+	const showCustomer = customerName.length > 0 && customerName !== "Walk-in Customer";
+	const customerPhone = isShownPhone(receipt?.customer?.phone) ? receipt.customer.phone : null;
+	const locale = getReceiptLocale();
+	const summaryExtra = [];
+	if (receipt?.payment) summaryExtra.push({
+		label: `Paid (${paymentMethodLabel(receipt.payment.method)})`,
+		value: formatPaisa(receipt.payment.amount ?? receipt.total ?? 0),
+		muted: true,
+		separator: true
+	});
+	if (receipt?.membership?.pointsEarned && receipt.membership.pointsEarned > 0) summaryExtra.push({
+		label: "Points earned",
+		value: `+${receipt.membership.pointsEarned}`,
+		muted: true,
+		separator: false
+	});
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "max-w-md p-0 gap-0",
+			children: [
+				/* @__PURE__ */ jsx(DialogHeader, {
+					className: "px-4 py-3 border-b",
+					children: /* @__PURE__ */ jsx(DialogTitle, {
+						className: "text-base",
+						children: "Reprint Receipt"
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "max-h-[70vh] overflow-y-auto p-4 bg-muted/30 flex justify-center",
+					children: !receipt ? /* @__PURE__ */ jsx("div", {
+						className: "flex items-center justify-center py-12 w-full",
+						children: /* @__PURE__ */ jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" })
+					}) : /* @__PURE__ */ jsx(PrintableView, {
+						id: REPRINT_DOM_ID,
+						className: "bg-white dark:bg-card shadow-sm",
+						children: /* @__PURE__ */ jsxs(DocumentPage, {
+							size: "receipt",
+							children: [
+								/* @__PURE__ */ jsx(DocumentHeader, {
+									companyName: receipt.branch?.name ?? "Store",
+									companyContact: receipt.branch?.phone,
+									...receipt.vat?.sellerBin ? { companyTaxId: `${locale.taxIdLabel}: ${receipt.vat.sellerBin}` } : {},
+									documentTitle: "Receipt (Reprint)",
+									documentNumber: receipt.orderNumber,
+									date: receipt.date ?? ""
+								}),
+								showCustomer && /* @__PURE__ */ jsx(DocumentParty, {
+									billTo: {
+										name: customerName,
+										...customerPhone ? { contact: customerPhone } : {},
+										...receipt.membership?.cardId ? { extra: { Loyalty: receipt.membership.cardId } } : {}
+									},
+									billToLabel: "Customer"
+								}),
+								/* @__PURE__ */ jsx(DocumentLineTable, {
+									lines: buildLines(receipt),
+									columns: [
+										"description",
+										"quantity",
+										"lineTotal"
+									],
+									showSequence: false,
+									compact: true
+								}),
+								/* @__PURE__ */ jsx(DocumentSummary, {
+									subtotal: formatPaisa(receipt.subtotal ?? 0),
+									...receipt.discount && receipt.discount > 0 ? { discount: formatPaisa(receipt.discount) } : {},
+									...receipt.vat?.amount && receipt.vat.amount > 0 ? { tax: formatPaisa(receipt.vat.amount) } : {},
+									total: formatPaisa(receipt.total ?? 0),
+									extraRows: summaryExtra,
+									currency: locale.currency,
+									labels: { tax: locale.taxLabel },
+									width: "w-full"
+								}),
+								/* @__PURE__ */ jsx(DocumentFooter, { notes: /* @__PURE__ */ jsx("p", {
+									className: "text-center text-xs text-muted-foreground",
+									children: "Duplicate copy"
+								}) })
+							]
+						})
+					})
+				}),
+				/* @__PURE__ */ jsxs(DialogFooter, {
+					className: "px-4 py-3 border-t",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						onClick: () => onOpenChange(false),
+						children: "Close"
+					}), /* @__PURE__ */ jsxs(Button, {
+						onClick: handlePrint,
+						disabled: !receipt,
+						children: [/* @__PURE__ */ jsx(Printer, { className: "h-4 w-4 mr-2" }), "Print"]
+					})]
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { ReceiptReprintDialog };

package/dist/dashboard/components/CustomerLookupDialog.js

@@ -0,0 +1,120 @@
+"use client";
+
+import { customerDisplayName, customerDisplayPhone } from "../../utils/customer-display.js";
+import { getReadableTextColor, getTierColor } from "../../lib/loyalty.js";
+import { useMemo } from "react";
+import { DialogWrapper } from "@classytic/fluid/client/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Search, UserPlus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Skeleton } from "@/components/ui/skeleton";
+
+//#region src/dashboard/components/CustomerLookupDialog.tsx
+function CustomerLookupDialog({ open, onOpenChange, searchValue, onSearchValueChange, onSearch, results, isLoading, onSelect, onCreate }) {
+	const showEmpty = searchValue.trim().length < 2;
+	const content = useMemo(() => {
+		if (showEmpty) return /* @__PURE__ */ jsx("div", {
+			className: "rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground",
+			children: "Type at least 2 characters to search customers."
+		});
+		if (isLoading) return /* @__PURE__ */ jsx("div", {
+			className: "space-y-2",
+			children: [
+				1,
+				2,
+				3
+			].map((i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-full" }, i))
+		});
+		if (results.length === 0) return /* @__PURE__ */ jsx("div", {
+			className: "rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground",
+			children: "No customer found."
+		});
+		return /* @__PURE__ */ jsx("div", {
+			className: "space-y-2",
+			children: results.map((customer) => /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "outline",
+				className: "w-full h-auto justify-between px-3 py-2",
+				onClick: () => onSelect(customer),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "text-left",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-sm font-medium",
+						children: customerDisplayName(customer)
+					}), (() => {
+						const phone = customerDisplayPhone(customer);
+						const email = customer.contact?.email;
+						return /* @__PURE__ */ jsx("p", {
+							className: "text-xs text-muted-foreground",
+							children: phone ?? email ?? "No contact info"
+						});
+					})()]
+				}), (customer.membership?.tier || customer.revenueTier) && (() => {
+					const tierName = customer.membership?.tier || customer.revenueTier;
+					const tierColor = getTierColor(tierName);
+					const tierTextColor = getReadableTextColor(tierColor);
+					return /* @__PURE__ */ jsx(Badge, {
+						variant: "secondary",
+						className: "capitalize",
+						style: tierColor ? {
+							backgroundColor: tierColor,
+							color: tierTextColor,
+							borderColor: "transparent"
+						} : void 0,
+						children: tierName
+					});
+				})()]
+			}, customer._id))
+		});
+	}, [
+		isLoading,
+		results,
+		showEmpty
+	]);
+	return /* @__PURE__ */ jsxs(DialogWrapper, {
+		open,
+		onOpenChange,
+		title: "Find customer",
+		description: "Search by phone or name and attach loyalty info.",
+		size: "lg",
+		footer: /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-end gap-2",
+			children: [/* @__PURE__ */ jsxs(Button, {
+				variant: "outline",
+				onClick: onCreate,
+				children: [/* @__PURE__ */ jsx(UserPlus, { className: "h-4 w-4 mr-2" }), "Add new"]
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				onClick: () => onOpenChange(false),
+				children: "Close"
+			})]
+		}),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ jsx(Input, {
+				placeholder: "Phone or name",
+				value: searchValue,
+				onChange: (e) => onSearchValueChange(e.target.value),
+				onKeyDown: (e) => {
+					if (e.key === "Enter") {
+						e.preventDefault();
+						onSearch();
+					}
+				}
+			}), /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				onClick: onSearch,
+				className: "shrink-0",
+				children: [/* @__PURE__ */ jsx(Search, { className: "h-4 w-4 mr-2" }), "Search"]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "pt-3",
+			children: content
+		})]
+	});
+}
+
+//#endregion
+export { CustomerLookupDialog };

package/dist/dashboard/components/CustomerQuickAddDialog.js

@@ -0,0 +1,101 @@
+"use client";
+
+import { usePosAuth } from "../../runtime/auth-port.js";
+import { useEffect, useMemo, useState } from "react";
+import { FormDialog } from "@classytic/fluid/client/core";
+import { customerApi } from "@classytic/commerce-sdk/sales";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getReceiptLocale, isValidPhone } from "@classytic/commerce-sdk/client";
+import { toast } from "sonner";
+import { Input } from "@/components/ui/input";
+
+//#region src/dashboard/components/CustomerQuickAddDialog.tsx
+function CustomerQuickAddDialog({ token, open, onOpenChange, defaultName, defaultPhone, onCreated }) {
+	const authToken = usePosAuth().getToken();
+	const resolvedToken = token || authToken || "";
+	const [name, setName] = useState("");
+	const [phone, setPhone] = useState("");
+	const [isSaving, setIsSaving] = useState(false);
+	useEffect(() => {
+		if (!open) return;
+		setName(defaultName || "");
+		setPhone(defaultPhone || "");
+	}, [
+		open,
+		defaultName,
+		defaultPhone
+	]);
+	const canSubmit = useMemo(() => {
+		return name.trim().length > 1 && isValidPhone(phone.trim());
+	}, [name, phone]);
+	const handleSubmit = async () => {
+		const trimmedName = name.trim();
+		const trimmedPhone = phone.trim();
+		if (!trimmedName) {
+			toast.error("Customer name is required");
+			return;
+		}
+		if (!isValidPhone(trimmedPhone)) {
+			toast.error(`Enter a valid phone number (e.g. ${getReceiptLocale().phonePlaceholder})`);
+			return;
+		}
+		try {
+			setIsSaving(true);
+			const parts = trimmedName.split(/\s+/);
+			const given = parts[0] ?? trimmedName;
+			const family = parts.length > 1 ? parts.slice(1).join(" ") : "";
+			const created = await customerApi.create({
+				token: resolvedToken,
+				data: {
+					name: {
+						given,
+						family
+					},
+					contact: { phone: trimmedPhone }
+				}
+			});
+			if (!created) {
+				toast.error("Customer saved, but response was empty");
+				return;
+			}
+			onCreated(created);
+			onOpenChange(false);
+		} catch (error) {
+			toast.error(error instanceof Error ? error.message : "Failed to create customer");
+		} finally {
+			setIsSaving(false);
+		}
+	};
+	return /* @__PURE__ */ jsx(FormDialog, {
+		open,
+		onOpenChange,
+		title: "Add customer",
+		description: "Quickly add a customer for POS loyalty tracking.",
+		size: "sm",
+		onSubmit: (e) => {
+			e.preventDefault();
+			handleSubmit();
+		},
+		onCancel: () => onOpenChange(false),
+		submitLabel: "Save Customer",
+		cancelLabel: "Cancel",
+		submitLoading: isSaving,
+		submitDisabled: !canSubmit,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "space-y-3",
+			children: [/* @__PURE__ */ jsx(Input, {
+				placeholder: "Full name",
+				value: name,
+				onChange: (e) => setName(e.target.value)
+			}), /* @__PURE__ */ jsx(Input, {
+				placeholder: `Phone (${getReceiptLocale().phonePlaceholder})`,
+				inputMode: "numeric",
+				value: phone,
+				onChange: (e) => setPhone(e.target.value)
+			})]
+		})
+	});
+}
+
+//#endregion
+export { CustomerQuickAddDialog };

package/dist/dashboard/components/ManagerAuthDialog.js

@@ -0,0 +1,77 @@
+"use client";
+
+import { memo, useCallback, useState } from "react";
+import { FormDialog, StatusBanner } from "@classytic/fluid/client/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FormInput } from "@classytic/fluid/forms";
+
+//#region src/dashboard/components/ManagerAuthDialog.tsx
+const ManagerAuthDialog = memo(function ManagerAuthDialog({ open, onOpenChange, onAuthorize, isPending, error, title = "Manager Authorization Required", description = "Enter manager or admin credentials to authorize this action." }) {
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const handleSubmit = useCallback(async (e) => {
+		e.preventDefault();
+		if (!email.trim() || !password.trim()) return;
+		try {
+			await onAuthorize(email.trim(), password);
+			setEmail("");
+			setPassword("");
+			onOpenChange(false);
+		} catch {}
+	}, [
+		email,
+		password,
+		onAuthorize,
+		onOpenChange
+	]);
+	const handleOpenChange = useCallback((nextOpen) => {
+		if (!nextOpen) {
+			setEmail("");
+			setPassword("");
+		}
+		onOpenChange(nextOpen);
+	}, [onOpenChange]);
+	return /* @__PURE__ */ jsxs(FormDialog, {
+		open,
+		onOpenChange: handleOpenChange,
+		title,
+		description,
+		size: "sm",
+		onSubmit: handleSubmit,
+		onCancel: () => handleOpenChange(false),
+		submitLabel: isPending ? "Verifying..." : "Authorize",
+		cancelLabel: "Cancel",
+		submitLoading: isPending,
+		submitDisabled: !email.trim() || !password.trim(),
+		children: [
+			error && /* @__PURE__ */ jsx(StatusBanner, {
+				variant: "error",
+				children: error
+			}),
+			/* @__PURE__ */ jsx(FormInput, {
+				name: "manager-email",
+				label: "Email",
+				type: "email",
+				placeholder: "manager@example.com",
+				value: email,
+				onChange: (value) => setEmail(value),
+				disabled: isPending,
+				autoComplete: "email",
+				autoFocus: true
+			}),
+			/* @__PURE__ */ jsx(FormInput, {
+				name: "manager-password",
+				label: "Password",
+				type: "password",
+				placeholder: "Enter password",
+				value: password,
+				onChange: (value) => setPassword(value),
+				disabled: isPending,
+				autoComplete: "current-password"
+			})
+		]
+	});
+});
+
+//#endregion
+export { ManagerAuthDialog };

package/dist/dashboard/components/ProductCard.js

@@ -0,0 +1,98 @@
+"use client";
+
+import { formatBdt } from "../../lib/money.js";
+import { cn } from "../../lib/cn.js";
+import { calculateVariantPrice, getAvailableVariants, getPosPrice, getPosProductImage, isVariantProduct } from "@classytic/commerce-sdk/sales";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+
+//#region src/dashboard/components/ProductCard.tsx
+function ProductCard({ product, onAddToCart, onOpenVariantSelector }) {
+	const hasVariants = isVariantProduct(product);
+	const inStock = product.branchStock?.inStock ?? false;
+	const lowStock = product.branchStock?.lowStock ?? false;
+	const stockQty = product.branchStock?.quantity ?? 0;
+	const getPriceDisplay = () => {
+		if (!hasVariants) return {
+			price: getPosPrice(product),
+			showFrom: false
+		};
+		const variants = getAvailableVariants(product);
+		if (variants.length === 0) return {
+			price: getPosPrice(product),
+			showFrom: false
+		};
+		const prices = variants.map((v) => calculateVariantPrice(getPosPrice(product), v.priceModifier || 0));
+		const minPrice = Math.min(...prices);
+		return {
+			price: minPrice,
+			showFrom: minPrice !== Math.max(...prices)
+		};
+	};
+	const { price: displayPrice, showFrom } = getPriceDisplay();
+	const handleClick = () => {
+		if (!inStock) return;
+		if (hasVariants) {
+			const variants = getAvailableVariants(product);
+			if (variants.length === 1) onAddToCart(product, variants[0].sku);
+			else onOpenVariantSelector(product);
+		} else onAddToCart(product);
+	};
+	return /* @__PURE__ */ jsx(Card, {
+		className: cn("cursor-pointer transition-all hover:shadow-lg hover:scale-[1.02] group relative overflow-hidden", !inStock && "opacity-50 cursor-not-allowed hover:scale-100"),
+		onClick: handleClick,
+		children: /* @__PURE__ */ jsxs(CardContent, {
+			className: "p-0",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "absolute top-2 right-2 z-10 flex flex-col gap-1 items-end",
+					children: [!inStock ? /* @__PURE__ */ jsx(Badge, {
+						variant: "destructive",
+						className: "text-xs shadow-md",
+						children: "Out of Stock"
+					}) : lowStock ? /* @__PURE__ */ jsx(Badge, {
+						variant: "secondary",
+						className: "text-xs shadow-md",
+						children: "Low Stock"
+					}) : null, hasVariants && /* @__PURE__ */ jsxs(Badge, {
+						variant: "outline",
+						className: "text-xs bg-background/90 backdrop-blur-sm shadow-md",
+						children: [getAvailableVariants(product).length, " variants"]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "aspect-square bg-muted overflow-hidden relative",
+					children: [/* @__PURE__ */ jsx("img", {
+						src: getPosProductImage(product),
+						alt: product.name,
+						className: "w-full h-full object-cover transition-transform group-hover:scale-105"
+					}), /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity" })]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "p-3 space-y-1.5",
+					children: [/* @__PURE__ */ jsx("h3", {
+						className: "font-semibold text-sm leading-tight line-clamp-2 min-h-10",
+						children: product.name
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between pt-1",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "text-base font-bold text-primary",
+							children: [showFrom && /* @__PURE__ */ jsx("span", {
+								className: "text-xs font-normal text-muted-foreground mr-1",
+								children: "From"
+							}), formatBdt(displayPrice)]
+						}), inStock && /* @__PURE__ */ jsxs("span", {
+							className: "text-xs text-muted-foreground",
+							children: ["Qty: ", stockQty]
+						})]
+					})]
+				}),
+				inStock && /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 h-1 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left" })
+			]
+		})
+	});
+}
+
+//#endregion
+export { ProductCard };