@classytic/pos-ui 0.1.0

package/README.md

@@ -0,0 +1,38 @@
+# @classytic/pos-ui
+
+> Point-of-sale register UI — a self-contained, full-screen state-machine app (shift → products → payment → receipt → close) with a hardware DI port (printer / drawer / scanner / terminal). Frontend sibling of the [@classytic/pos](https://npmjs.com/package/@classytic/pos) kernel.
+
+Multi-surface by design: web (browser), Tauri desktop, and React Native share the same screens and state machine; only the runtime + hardware adapters differ. Independent of the dashboard stack — no `@classytic/erp-shell`, no route framework. The host mounts one component and injects adapters.
+
+## Install
+
+```bash
+npm install @classytic/pos-ui
+```
+
+Peers: React 19, Next 14+, `@classytic/commerce-sdk` ≥0.9, `@classytic/fluid` ≥1.7, `@classytic/primitives` ≥0.9, TanStack Query 5, sonner, lucide-react. Host-owned `@/components/ui/*` shadcn primitives (same ambient-stub convention as `@classytic/commerce-ui`).
+
+## Subpath exports
+
+| Subpath | What it gives you |
+|---|---|
+| `@classytic/pos-ui/shell` | `<PosShell>` + props + the DI port types the host implements |
+| `@classytic/pos-ui/hardware` | `PosHardware` ports, `createWebHardware()`, Tauri adapter, printer hooks |
+| `@classytic/pos-ui/runtime` | Surface adapters (web, Tauri) — storage, focus, fullscreen, keyboard |
+
+Internal layers (`screens/`, `state/`, `dashboard/`, `components/`) are not part of the public surface.
+
+## Quick start (web)
+
+```tsx
+import { PosShell } from '@classytic/pos-ui/shell';
+import { createWebHardware } from '@classytic/pos-ui/hardware';
+
+<PosShell hardware={createWebHardware()} />
+```
+
+Hardware adapters are a port — implement the interface for your printer/drawer/terminal vendor and inject it; the screens never talk to devices directly.
+
+## Releasing
+
+See sibling packages' `RELEASING.md` — standard `@classytic/*` flow (`npm run release`).

package/dist/components/CartSidebar.js

@@ -0,0 +1,222 @@
+"use client";
+
+import { formatBdt } from "../lib/money.js";
+import { getReadableTextColor, getTierColor } from "../lib/loyalty.js";
+import { CartItems } from "../dashboard/components/cart/CartItems.js";
+import { CartSummary } from "../dashboard/components/cart/CartSummary.js";
+import { CustomerSection } from "../dashboard/components/cart/CustomerSection.js";
+import { DiscountSection } from "../dashboard/components/cart/DiscountSection.js";
+import { PointsRedemptionSection } from "../dashboard/components/cart/PointsRedemptionSection.js";
+import { AddChargeDialog } from "../dashboard/components/cart/AddChargeDialog.js";
+import { useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Inbox, PauseCircle, ShoppingCart, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+
+//#region src/components/CartSidebar.tsx
+/**
+* CartSidebar — Compact cart panel for the product screen.
+*
+* Shows: cart items, customer, discount, points, totals, checkout button.
+* Payment and receipt are separate screens — not inline here.
+*/
+function CartSidebar({ cart, customer, membership, orderTotals, discountAuth, onCheckout, onRequestDiscountAuth, onClearDiscountAuth, onParkSale, onOpenParked, parkedCount = 0, canPark = true }) {
+	const isEmpty = cart.cart.length === 0;
+	useMemo(() => ({
+		items: cart.cart,
+		subtotal: orderTotals.subtotal,
+		discount: orderTotals.manualDiscount,
+		tierDiscount: orderTotals.tierDiscount,
+		tierName: orderTotals.tierName,
+		redemptionDiscount: orderTotals.redemptionDiscount,
+		total: orderTotals.total,
+		pointsToEarn: orderTotals.pointsToEarn
+	}), [cart.cart, orderTotals]);
+	const customerViewModel = useMemo(() => {
+		const tierName = customer.selectedCustomer?.membership?.tier || null;
+		const tierColor = getTierColor(tierName);
+		const tierTextColor = getReadableTextColor(tierColor);
+		return {
+			selected: customer.selectedCustomer,
+			name: customer.customerName,
+			phone: customer.customerPhone,
+			membershipCardId: customer.membershipCardId,
+			membershipStatus: customer.membershipLookupStatus,
+			tierName,
+			tierColor,
+			tierTextColor
+		};
+	}, [
+		customer.selectedCustomer,
+		customer.customerName,
+		customer.customerPhone,
+		customer.membershipCardId,
+		customer.membershipLookupStatus
+	]);
+	const discountAuthViewModel = useMemo(() => ({
+		isAuthorized: discountAuth.isAuthorized,
+		authorizedByName: discountAuth.authorizedBy?.name || null
+	}), [discountAuth.isAuthorized, discountAuth.authorizedBy]);
+	const redemption = useMemo(() => ({
+		enabled: !!membership?.enabled && !!membership?.redemption?.enabled && !!customer.selectedCustomer?.membership?.cardId,
+		pointsBalance: customer.selectedCustomer?.membership?.points?.current ?? 0,
+		minRedeemPoints: membership?.redemption?.minRedeemPoints ?? 0,
+		maxRedeemPoints: Math.min(orderTotals.maxAllowedPoints, customer.selectedCustomer?.membership?.points?.current ?? 0),
+		pointsPerBdt: membership?.redemption?.pointsPerBdt ?? 1,
+		estimatedDiscount: orderTotals.redemptionDiscount,
+		error: orderTotals.redemptionError
+	}), [
+		membership,
+		customer.selectedCustomer,
+		orderTotals
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col h-full",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between px-4 py-3 border-b",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx(ShoppingCart, { className: "h-4 w-4" }),
+						/* @__PURE__ */ jsx("span", {
+							className: "font-semibold text-sm",
+							children: "Cart"
+						}),
+						!isEmpty && /* @__PURE__ */ jsx(Badge, {
+							variant: "secondary",
+							className: "text-xs",
+							children: cart.cart.length
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [
+						onOpenParked && /* @__PURE__ */ jsxs(Button, {
+							variant: "ghost",
+							size: "sm",
+							className: "h-7 text-xs",
+							onClick: onOpenParked,
+							"aria-label": `Parked sales (${parkedCount})`,
+							children: [
+								/* @__PURE__ */ jsx(Inbox, { className: "h-3.5 w-3.5 mr-1" }),
+								"Parked",
+								parkedCount > 0 && /* @__PURE__ */ jsx(Badge, {
+									variant: "secondary",
+									className: "ml-1.5 h-4 px-1.5 text-[10px]",
+									children: parkedCount
+								})
+							]
+						}),
+						onParkSale && !isEmpty && /* @__PURE__ */ jsxs(Button, {
+							variant: "ghost",
+							size: "sm",
+							className: "h-7 text-xs",
+							onClick: onParkSale,
+							disabled: !canPark,
+							title: canPark ? "Park sale (F6)" : "Max 5 parked — resume one first",
+							children: [/* @__PURE__ */ jsx(PauseCircle, { className: "h-3.5 w-3.5 mr-1" }), "Park"]
+						}),
+						!isEmpty && /* @__PURE__ */ jsxs(Button, {
+							variant: "ghost",
+							size: "sm",
+							className: "h-7 text-xs text-destructive",
+							onClick: cart.clearCart,
+							children: [/* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5 mr-1" }), "Clear"]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex-1 overflow-y-auto min-h-0 px-4 py-3 space-y-4",
+				children: isEmpty ? /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center justify-center h-full text-center text-muted-foreground",
+					children: [
+						/* @__PURE__ */ jsx(ShoppingCart, { className: "h-10 w-10 mb-3 opacity-30" }),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-sm",
+							children: "Scan or select products"
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-xs mt-1",
+							children: "Press F3 to search, F4 for barcode"
+						})
+					]
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(CartItems, {
+						items: cart.cart,
+						onUpdateQuantity: cart.updateQuantity,
+						onRemoveItem: cart.removeItem,
+						onClear: cart.clearCart
+					}),
+					/* @__PURE__ */ jsx(CartSummary, {
+						subtotal: orderTotals.subtotal,
+						discount: orderTotals.manualDiscount,
+						tierDiscount: orderTotals.tierDiscount,
+						tierName: orderTotals.tierName ?? void 0,
+						redemptionDiscount: orderTotals.redemptionDiscount,
+						total: orderTotals.total,
+						pointsToEarn: orderTotals.pointsToEarn
+					}),
+					/* @__PURE__ */ jsx(CustomerSection, {
+						selected: customerViewModel.selected,
+						name: customerViewModel.name,
+						phone: customerViewModel.phone,
+						membershipCardId: customerViewModel.membershipCardId,
+						membershipStatus: customerViewModel.membershipStatus,
+						tierName: customerViewModel.tierName,
+						tierColor: customerViewModel.tierColor,
+						tierTextColor: customerViewModel.tierTextColor,
+						onNameChange: customer.setCustomerName,
+						onPhoneChange: customer.setCustomerPhone,
+						onMembershipChange: (value) => {
+							customer.setMembershipCardId(value);
+							cart.setMembershipCardId(value);
+						},
+						onMembershipLookup: customer.triggerMembershipLookup,
+						onClear: customer.clearCustomer,
+						onOpenLookup: () => customer.setLookupDialogOpen(true)
+					}),
+					/* @__PURE__ */ jsx(AddChargeDialog, {
+						disabled: isEmpty,
+						onAddCharge: cart.addCharge
+					}),
+					/* @__PURE__ */ jsx(DiscountSection, {
+						value: cart.discountInput,
+						onChange: cart.setDiscountInput,
+						isAuthorized: discountAuthViewModel.isAuthorized,
+						authorizedByName: discountAuthViewModel.authorizedByName,
+						onRequestAuth: onRequestDiscountAuth,
+						onClearAuth: onClearDiscountAuth
+					}),
+					redemption.enabled && /* @__PURE__ */ jsx(PointsRedemptionSection, {
+						enabled: redemption.enabled,
+						pointsBalance: redemption.pointsBalance,
+						minRedeemPoints: redemption.minRedeemPoints,
+						maxRedeemPoints: redemption.maxRedeemPoints,
+						pointsPerBdt: redemption.pointsPerBdt,
+						estimatedDiscount: redemption.estimatedDiscount,
+						error: redemption.error,
+						value: cart.pointsToRedeemInput,
+						onChange: cart.setPointsToRedeemInput,
+						onUseMax: () => {
+							if (orderTotals.maxAllowedPoints > 0) cart.setPointsToRedeemInput(String(orderTotals.maxAllowedPoints));
+						}
+					})
+				] })
+			}),
+			!isEmpty && /* @__PURE__ */ jsx("div", {
+				className: "px-4 py-3 border-t bg-card",
+				children: /* @__PURE__ */ jsxs(Button, {
+					className: "w-full h-12 text-base font-semibold",
+					onClick: onCheckout,
+					children: ["Checkout ", formatBdt(orderTotals.total)]
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+export { CartSidebar };

package/dist/components/PosTopBar.js

@@ -0,0 +1,156 @@
+"use client";
+
+import { usePosRuntime } from "../runtime/config.js";
+import { usePosBranch } from "../runtime/branch-port.js";
+import { usePosContext } from "../state/pos-context.js";
+import { useEffect, useMemo, useState } from "react";
+import { ActionDropdown } from "@classytic/fluid/client/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, Clock, History, Keyboard, LayoutDashboard, LogOut, Plus, Printer, Store, XCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+
+//#region src/components/PosTopBar.tsx
+/**
+* PosTopBar — Minimal chrome for the full-screen POS terminal.
+*
+* Uses fluid's ActionDropdown for the menu — no raw Base UI primitives.
+*/
+function useClock() {
+	const [time, setTime] = useState("");
+	useEffect(() => {
+		function tick() {
+			setTime((/* @__PURE__ */ new Date()).toLocaleTimeString("en-US", {
+				hour: "2-digit",
+				minute: "2-digit",
+				hour12: true
+			}));
+		}
+		tick();
+		const id = setInterval(tick, 3e4);
+		return () => clearInterval(id);
+	}, []);
+	return time;
+}
+function PosTopBar({ userName, onNewSale, onOpenHistory, onOpenHelp, onOpenPrinterSettings }) {
+	const selectedBranch = usePosBranch();
+	const { onNavigate } = usePosRuntime();
+	const { state, dispatch } = usePosContext();
+	const time = useClock();
+	const branchName = selectedBranch?.name || "POS Terminal";
+	const menuItems = useMemo(() => {
+		const items = [];
+		if (onOpenHistory) items.push({
+			key: "history",
+			label: "Order History",
+			icon: History,
+			shortcut: "F9",
+			onClick: () => onOpenHistory()
+		});
+		if (state.shiftOpen) items.push({
+			key: "close",
+			label: "Close Register",
+			icon: XCircle,
+			onClick: () => dispatch({ type: "CLOSE_SHIFT" })
+		});
+		if (onOpenPrinterSettings) items.push({
+			key: "printer-settings",
+			label: "Printer Settings",
+			icon: Printer,
+			onClick: () => onOpenPrinterSettings()
+		});
+		items.push({
+			type: "separator",
+			key: "sep"
+		});
+		items.push({
+			key: "dashboard",
+			label: "Back to Dashboard",
+			icon: LayoutDashboard,
+			onClick: () => {
+				onNavigate("/dashboard");
+			}
+		});
+		items.push({
+			key: "logout",
+			label: "Logout",
+			icon: LogOut,
+			onClick: () => {
+				onNavigate("/sign-in");
+			}
+		});
+		return items;
+	}, [
+		onOpenHistory,
+		onOpenPrinterSettings,
+		state.shiftOpen,
+		dispatch,
+		onNavigate
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between h-12 px-4 bg-card border-b shrink-0",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 min-w-0",
+				children: [
+					/* @__PURE__ */ jsx(Store, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "font-semibold text-sm truncate",
+						children: branchName
+					}),
+					state.shiftOpen && /* @__PURE__ */ jsx(Badge, {
+						variant: "outline",
+						className: "text-xs font-normal shrink-0",
+						children: "Shift Open"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex-1 flex items-center justify-center gap-1 px-4",
+				children: state.screen === "products" && onNewSale && /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					size: "sm",
+					onClick: onNewSale,
+					className: "h-8 text-xs gap-1",
+					children: [/* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }), "New Sale"]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3 shrink-0",
+				children: [
+					onOpenHelp && /* @__PURE__ */ jsxs(Button, {
+						variant: "ghost",
+						size: "sm",
+						onClick: onOpenHelp,
+						className: "h-8 px-2 text-xs gap-1 text-muted-foreground",
+						title: "Keyboard shortcuts (?)",
+						"aria-label": "Keyboard shortcuts",
+						children: [/* @__PURE__ */ jsx(Keyboard, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ jsx("span", {
+							className: "hidden sm:inline",
+							children: "?"
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1.5 text-muted-foreground text-sm",
+						children: [/* @__PURE__ */ jsx(Clock, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ jsx("span", {
+							className: "tabular-nums",
+							children: time
+						})]
+					}),
+					/* @__PURE__ */ jsx(ActionDropdown, {
+						items: menuItems,
+						triggerIcon: ChevronDown,
+						triggerLabel: userName || "Cashier",
+						triggerVariant: "ghost",
+						triggerSize: "sm",
+						triggerClassName: "h-8 text-xs",
+						align: "end"
+					})
+				]
+			})
+		]
+	});
+}
+
+//#endregion
+export { PosTopBar };

package/dist/components/PrinterSettingsDialog.js

@@ -0,0 +1,163 @@
+"use client";
+
+import { usePrinterConfig } from "../hardware/use-printer-config.js";
+import { isTauri } from "../hardware/tauri-adapter.js";
+import { useHardware } from "../hardware/context.js";
+import { useForm } from "../node_modules/react-hook-form/dist/index.esm.js";
+import { useCallback, useEffect, useState } from "react";
+import { DialogWrapper } from "@classytic/fluid/client/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangle, Check, Loader2, Printer } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { FormInput } from "@classytic/fluid/forms";
+
+//#region src/components/PrinterSettingsDialog.tsx
+/**
+* PrinterSettingsDialog — runtime printer config for the cashier.
+*
+* Persists `{ host, port, timeoutMs }` to localStorage via
+* `usePrinterConfig`. The Tauri adapter reads the same key on every
+* invoke, so saved settings take effect immediately on the next print
+* — no app restart, no env-var changes.
+*
+* Browser users see this dialog too (via the topbar action menu) but
+* it has no effect on browser printing — `window.print()` runs against
+* whatever printer the OS has configured. The dialog is informational
+* for browser, functional for Tauri.
+*/
+function PrinterSettingsDialog({ open, onOpenChange }) {
+	const { config, setConfig } = usePrinterConfig();
+	const { printer } = useHardware();
+	const [probe, setProbe] = useState({ kind: "idle" });
+	const form = useForm({ defaultValues: {
+		host: config.host,
+		port: config.port?.toString() ?? "",
+		timeoutMs: config.timeoutMs?.toString() ?? ""
+	} });
+	useEffect(() => {
+		if (!open) return;
+		form.reset({
+			host: config.host,
+			port: config.port?.toString() ?? "",
+			timeoutMs: config.timeoutMs?.toString() ?? ""
+		});
+		setProbe({ kind: "idle" });
+	}, [
+		open,
+		config,
+		form
+	]);
+	const handleSave = useCallback((values) => {
+		const next = { host: values.host.trim() };
+		const portNum = Number(values.port);
+		if (Number.isFinite(portNum) && portNum > 0) next.port = portNum;
+		const timeoutNum = Number(values.timeoutMs);
+		if (Number.isFinite(timeoutNum) && timeoutNum > 0) next.timeoutMs = timeoutNum;
+		setConfig(next);
+		onOpenChange(false);
+	}, [setConfig, onOpenChange]);
+	const handleTest = useCallback(async () => {
+		const values = form.getValues();
+		const trimmed = values.host.trim();
+		if (!trimmed) {
+			setProbe({
+				kind: "fail",
+				reason: "Set a host first"
+			});
+			return;
+		}
+		const prior = config;
+		const tentative = { host: trimmed };
+		const portNum = Number(values.port);
+		if (Number.isFinite(portNum) && portNum > 0) tentative.port = portNum;
+		setConfig(tentative);
+		setProbe({ kind: "probing" });
+		try {
+			if (await printer.isAvailable()) setProbe({ kind: "ok" });
+			else {
+				setProbe({
+					kind: "fail",
+					reason: "No response from printer"
+				});
+				setConfig(prior);
+			}
+		} catch (err) {
+			setProbe({
+				kind: "fail",
+				reason: err instanceof Error ? err.message : "Probe failed"
+			});
+			setConfig(prior);
+		}
+	}, [
+		form,
+		config,
+		printer,
+		setConfig
+	]);
+	return /* @__PURE__ */ jsx(DialogWrapper, {
+		open,
+		onOpenChange,
+		title: "Printer settings",
+		description: typeof window !== "undefined" && isTauri() ? "Configure the network thermal printer for receipts and cash-drawer kicks." : "Browser POS uses the OS print dialog. These settings only apply in the desktop (Tauri) shell.",
+		footer: /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-between gap-2 w-full",
+			children: [/* @__PURE__ */ jsxs(Button, {
+				variant: "outline",
+				onClick: handleTest,
+				disabled: probe.kind === "probing",
+				children: [probe.kind === "probing" ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }) : /* @__PURE__ */ jsx(Printer, { className: "h-4 w-4 mr-2" }), "Test connection"]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					onClick: () => onOpenChange(false),
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					onClick: form.handleSubmit(handleSave),
+					children: "Save"
+				})]
+			})]
+		}),
+		children: /* @__PURE__ */ jsxs("form", {
+			onSubmit: form.handleSubmit(handleSave),
+			className: "space-y-4",
+			children: [
+				/* @__PURE__ */ jsx(FormInput, {
+					control: form.control,
+					name: "host",
+					label: "Printer host",
+					placeholder: "192.168.1.100",
+					helperText: "LAN IP of the network thermal printer (Epson TM-T82, Xprinter, etc.)",
+					required: true
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "grid grid-cols-2 gap-3",
+					children: [/* @__PURE__ */ jsx(FormInput, {
+						control: form.control,
+						name: "port",
+						label: "Port",
+						placeholder: "9100",
+						helperText: "Default 9100"
+					}), /* @__PURE__ */ jsx(FormInput, {
+						control: form.control,
+						name: "timeoutMs",
+						label: "Timeout (ms)",
+						placeholder: "2000",
+						helperText: "Default 2000"
+					})]
+				}),
+				probe.kind === "ok" && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 text-sm text-green-700 dark:text-green-300",
+					children: [/* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }), "Printer responded — saved."]
+				}),
+				probe.kind === "fail" && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-start gap-2 text-sm text-amber-700 dark:text-amber-300",
+					children: [/* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 mt-0.5 shrink-0" }), /* @__PURE__ */ jsx("span", { children: probe.reason })]
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { PrinterSettingsDialog };