@classytic/pos-ui 0.1.0

package/dist/dashboard/components/ProductsPanel.js

@@ -0,0 +1,119 @@
+"use client";
+
+import { ProductCard } from "./ProductCard.js";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Barcode, Loader2, Package, Search } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Skeleton } from "@/components/ui/skeleton";
+
+//#region src/dashboard/components/ProductsPanel.tsx
+const ProductsPanel = memo(function ProductsPanel({ searchQuery, selectedCategory, categories, products, productsLoading, barcodeInput, isLookingUp, onSearchChange, onSearchSubmit, onCategoryChange, onBarcodeInputChange, onBarcodeSubmit, onProductAdd, onOpenVariantSelector }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "h-full flex flex-col p-6 bg-background",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4",
+				children: [/* @__PURE__ */ jsxs("form", {
+					className: "flex items-center gap-2",
+					onSubmit: (e) => {
+						e.preventDefault();
+						onSearchSubmit();
+					},
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "relative flex-1",
+							children: [/* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ jsx(Input, {
+								placeholder: "Search products...",
+								value: searchQuery,
+								onChange: (e) => onSearchChange(e.target.value),
+								className: "pl-9"
+							})]
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							type: "submit",
+							variant: "outline",
+							size: "icon",
+							className: "shrink-0",
+							children: /* @__PURE__ */ jsx(Search, { className: "h-4 w-4" })
+						}),
+						searchQuery.trim().length > 0 && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "sm",
+							className: "shrink-0",
+							onClick: () => onSearchChange(""),
+							children: "Clear"
+						})
+					]
+				}), /* @__PURE__ */ jsxs("form", {
+					onSubmit: onBarcodeSubmit,
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "relative flex-1",
+						children: [/* @__PURE__ */ jsx(Barcode, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ jsx(Input, {
+							placeholder: "Scan barcode or SKU...",
+							value: barcodeInput,
+							onChange: (e) => onBarcodeInputChange(e.target.value),
+							className: "pl-9",
+							disabled: isLookingUp
+						})]
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						variant: "outline",
+						size: "icon",
+						className: "shrink-0",
+						disabled: isLookingUp || barcodeInput.trim().length === 0,
+						"aria-label": "Lookup barcode",
+						children: isLookingUp ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Barcode, { className: "h-4 w-4" })
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2 mb-4 overflow-x-auto pb-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: selectedCategory === "all" ? "default" : "outline",
+					size: "sm",
+					onClick: () => onCategoryChange("all"),
+					children: "All"
+				}), categories.map((cat) => /* @__PURE__ */ jsx(Button, {
+					variant: selectedCategory === cat.slug ? "default" : "outline",
+					size: "sm",
+					onClick: () => onCategoryChange(cat.slug),
+					className: "capitalize",
+					children: cat.label
+				}, cat.slug))]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex-1 overflow-y-auto min-h-0",
+				children: productsLoading ? /* @__PURE__ */ jsx("div", {
+					className: "grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4",
+					children: [...Array(8)].map((_, i) => /* @__PURE__ */ jsxs("div", {
+						className: "rounded-lg border bg-card overflow-hidden",
+						children: [/* @__PURE__ */ jsx(Skeleton, { className: "aspect-square" }), /* @__PURE__ */ jsxs("div", {
+							className: "p-3 space-y-2",
+							children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-20" })]
+						})]
+					}, i))
+				}) : products.length === 0 ? /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center justify-center h-64 text-center",
+					children: [/* @__PURE__ */ jsx(Package, { className: "h-12 w-12 text-muted-foreground/30 mb-2" }), /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground",
+						children: "No products found"
+					})]
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4",
+					children: products.map((product) => /* @__PURE__ */ jsx(ProductCard, {
+						product,
+						onAddToCart: onProductAdd,
+						onOpenVariantSelector
+					}, product._id))
+				})
+			})
+		]
+	});
+});
+
+//#endregion
+export { ProductsPanel };

package/dist/dashboard/components/SplitPaymentPanel.js

@@ -0,0 +1,131 @@
+"use client";
+
+import { formatBdt } from "../../lib/money.js";
+import { cn } from "../../lib/cn.js";
+import { useMemo } from "react";
+import { SelectDropdown } from "@classytic/fluid/client/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Plus, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+//#region src/dashboard/components/SplitPaymentPanel.tsx
+function parseAmount(value) {
+	const n = Number(value);
+	return Number.isFinite(n) ? n : 0;
+}
+function SplitPaymentPanel({ options, entries, total, remaining, onAdd, onRemove, onUpdate }) {
+	const totals = useMemo(() => entries.map((e) => parseAmount(e.amount)), [entries]);
+	const sum = useMemo(() => totals.reduce((acc, val) => acc + val, 0), [totals]);
+	const getRemainingForRow = (id) => {
+		const idx = entries.findIndex((e) => e.id === id);
+		const rowAmount = totals[idx] || 0;
+		return Math.max(0, total - (sum - rowAmount));
+	};
+	if (options.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "text-xs text-muted-foreground",
+		children: "No active payment methods configured."
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3 rounded-lg border bg-muted/20 p-3",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-sm font-medium",
+					children: "Split payments"
+				}), /* @__PURE__ */ jsxs(Button, {
+					type: "button",
+					variant: "outline",
+					size: "sm",
+					className: "h-8",
+					onClick: () => onAdd(),
+					children: [/* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5 mr-1" }), "Add"]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "space-y-2",
+				children: entries.map((entry) => {
+					const option = options.find((o) => o.key === entry.paymentKey);
+					const needsRef = option?.needsReference ?? false;
+					const remainingForRow = getRemainingForRow(entry.id);
+					const hasError = Boolean(entry.error);
+					return /* @__PURE__ */ jsxs("div", {
+						className: cn("rounded-md border bg-card p-2 space-y-2", hasError && "border-destructive"),
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex gap-2 items-center",
+								children: [
+									/* @__PURE__ */ jsx(SelectDropdown, {
+										value: entry.paymentKey,
+										onValueChange: (value) => value && onUpdate(entry.id, { paymentKey: value }),
+										placeholder: "Method",
+										options: options.map((opt) => ({
+											value: opt.key,
+											label: opt.label
+										})),
+										triggerClassName: cn("h-9 w-[168px] shrink-0", hasError && "border-destructive")
+									}),
+									/* @__PURE__ */ jsx(Input, {
+										className: cn("h-9 flex-1", hasError && !entry.amount && "border-destructive"),
+										placeholder: "Amount",
+										inputMode: "numeric",
+										value: entry.amount,
+										onChange: (e) => onUpdate(entry.id, { amount: e.target.value })
+									}),
+									/* @__PURE__ */ jsx(Button, {
+										type: "button",
+										variant: "ghost",
+										size: "icon",
+										className: "h-9 w-9",
+										onClick: () => onRemove(entry.id),
+										disabled: entries.length <= 1,
+										children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
+									})
+								]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center justify-between text-xs text-muted-foreground",
+								children: [/* @__PURE__ */ jsx("span", { children: option?.note || "Select method and amount" }), /* @__PURE__ */ jsxs(Button, {
+									type: "button",
+									variant: "ghost",
+									size: "sm",
+									className: "h-6 px-2",
+									onClick: () => onUpdate(entry.id, { amount: String(remainingForRow) }),
+									children: ["Fill ", formatBdt(remainingForRow)]
+								})]
+							}),
+							needsRef && /* @__PURE__ */ jsx(Input, {
+								className: cn("h-9", hasError && !entry.reference.trim() && "border-destructive"),
+								placeholder: "Reference (Txn ID)",
+								value: entry.reference,
+								onChange: (e) => onUpdate(entry.id, { reference: e.target.value })
+							}),
+							entry.error && /* @__PURE__ */ jsx("p", {
+								className: "text-xs text-destructive",
+								children: entry.error
+							})
+						]
+					}, entry.id);
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between text-xs text-muted-foreground",
+				children: [/* @__PURE__ */ jsxs("span", { children: ["Total: ", /* @__PURE__ */ jsx("span", {
+					className: "font-medium text-foreground",
+					children: formatBdt(total)
+				})] }), /* @__PURE__ */ jsxs("span", { children: [
+					"Remaining:",
+					" ",
+					/* @__PURE__ */ jsx("span", {
+						className: remaining === 0 ? "font-medium text-foreground" : "text-destructive font-medium",
+						children: formatBdt(remaining)
+					})
+				] })]
+			})
+		]
+	});
+}
+
+//#endregion
+export { SplitPaymentPanel };

package/dist/dashboard/components/VariantSelectorDialog.js

@@ -0,0 +1,150 @@
+"use client";
+
+import { formatBdt } from "../../lib/money.js";
+import { cn } from "../../lib/cn.js";
+import { useMemo, useState } from "react";
+import { DialogWrapper } from "@classytic/fluid/client/core";
+import { calculateVariantPrice, formatVariantLabel, getPosPrice, getPosProductImage, getVariantStock } from "@classytic/commerce-sdk/sales";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Package } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+
+//#region src/dashboard/components/VariantSelectorDialog.tsx
+function VariantSelectorDialog({ product, open, onOpenChange, onSelect }) {
+	const [selectedSku, setSelectedSku] = useState(null);
+	const variantOptions = useMemo(() => {
+		if (!product?.variants) return [];
+		return product.variants.filter((v) => v.isActive).map((variant) => {
+			const stock = getVariantStock(product, variant.sku);
+			const inStock = stock > 0;
+			return {
+				sku: variant.sku,
+				attributes: variant.attributes,
+				label: formatVariantLabel(variant.attributes),
+				price: calculateVariantPrice(getPosPrice(product), variant.priceModifier),
+				priceModifier: variant.priceModifier || 0,
+				stock,
+				inStock,
+				isActive: variant.isActive
+			};
+		});
+	}, [product]);
+	const attributeKeys = useMemo(() => {
+		if (!product?.variants?.[0]?.attributes) return [];
+		return Object.keys(product.variants[0].attributes);
+	}, [product]);
+	const handleConfirm = () => {
+		if (selectedSku) {
+			onSelect(selectedSku);
+			onOpenChange(false);
+			setSelectedSku(null);
+		}
+	};
+	const handleCancel = () => {
+		onOpenChange(false);
+		setSelectedSku(null);
+	};
+	if (!product) return null;
+	return /* @__PURE__ */ jsx(DialogWrapper, {
+		open,
+		onOpenChange,
+		title: "Select Variant",
+		description: `Choose a variant for ${product.name}`,
+		size: "xl",
+		footer: /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-end gap-2 pt-4 border-t",
+			children: [/* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				onClick: handleCancel,
+				children: "Cancel"
+			}), /* @__PURE__ */ jsx(Button, {
+				onClick: handleConfirm,
+				disabled: !selectedSku,
+				children: "Add to Cart"
+			})]
+		}),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex-1 overflow-y-auto",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-4 p-4 border rounded-lg mb-4 bg-muted/30",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "w-20 h-20 rounded bg-muted overflow-hidden shrink-0",
+					children: /* @__PURE__ */ jsx("img", {
+						src: getPosProductImage(product),
+						alt: product.name,
+						className: "w-full h-full object-cover"
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex-1 min-w-0",
+					children: [
+						/* @__PURE__ */ jsx("h3", {
+							className: "font-semibold truncate",
+							children: product.name
+						}),
+						/* @__PURE__ */ jsxs("p", {
+							className: "text-sm text-muted-foreground",
+							children: ["Base Price: ", formatBdt(getPosPrice(product))]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "flex flex-wrap gap-1 mt-1",
+							children: attributeKeys.map((key) => /* @__PURE__ */ jsx(Badge, {
+								variant: "outline",
+								className: "text-xs capitalize",
+								children: key
+							}, key))
+						})
+					]
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "space-y-2",
+				children: variantOptions.length === 0 ? /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center justify-center py-8 text-center",
+					children: [/* @__PURE__ */ jsx(Package, { className: "h-12 w-12 text-muted-foreground/30 mb-2" }), /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground",
+						children: "No variants available"
+					})]
+				}) : variantOptions.map((variant) => /* @__PURE__ */ jsxs("button", {
+					onClick: () => variant.inStock && setSelectedSku(variant.sku),
+					disabled: !variant.inStock,
+					className: cn("w-full flex items-center justify-between p-4 border rounded-lg transition-all", "hover:shadow-md", selectedSku === variant.sku && "border-primary bg-primary/5 ring-2 ring-primary", !variant.inStock && "opacity-50 cursor-not-allowed hover:shadow-none"),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: cn("w-5 h-5 rounded-full border-2 flex items-center justify-center", selectedSku === variant.sku ? "border-primary bg-primary" : "border-muted-foreground/30"),
+							children: selectedSku === variant.sku && /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-primary-foreground" })
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "text-left",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "font-medium",
+								children: variant.label
+							}), /* @__PURE__ */ jsxs("p", {
+								className: "text-xs text-muted-foreground font-mono",
+								children: ["SKU: ", variant.sku]
+							})]
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-4",
+						children: [/* @__PURE__ */ jsx(Badge, {
+							variant: variant.inStock ? "secondary" : "destructive",
+							className: "text-xs",
+							children: variant.inStock ? `Stock: ${variant.stock}` : "Out of Stock"
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "text-right",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "font-bold",
+								children: formatBdt(variant.price)
+							}), variant.priceModifier !== 0 && /* @__PURE__ */ jsxs("p", {
+								className: "text-xs text-muted-foreground",
+								children: [variant.priceModifier > 0 ? "+" : "", formatBdt(variant.priceModifier)]
+							})]
+						})]
+					})]
+				}, variant.sku))
+			})]
+		})
+	});
+}
+
+//#endregion
+export { VariantSelectorDialog };

package/dist/dashboard/components/cart/AddChargeDialog.js

@@ -0,0 +1,99 @@
+"use client";
+
+import { useState } from "react";
+import { FormDialog } from "@classytic/fluid/client/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Plus, Sparkles } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+//#region src/dashboard/components/cart/AddChargeDialog.tsx
+function AddChargeDialog({ disabled, onAddCharge }) {
+	const [open, setOpen] = useState(false);
+	const [label, setLabel] = useState("");
+	const [amount, setAmount] = useState("");
+	const reset = () => {
+		setLabel("");
+		setAmount("");
+	};
+	const trimmedLabel = label.trim();
+	const parsedAmount = Number(amount);
+	const isValid = trimmedLabel.length > 0 && Number.isFinite(parsedAmount) && parsedAmount >= 0;
+	const handleSubmit = () => {
+		if (!isValid) return;
+		onAddCharge(trimmedLabel, parsedAmount);
+		reset();
+		setOpen(false);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Button, {
+		type: "button",
+		variant: "outline",
+		size: "sm",
+		className: "w-full",
+		disabled,
+		onClick: () => setOpen(true),
+		children: [/* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-1.5" }), "Add Charge"]
+	}), /* @__PURE__ */ jsx(FormDialog, {
+		open,
+		onOpenChange: (o) => {
+			setOpen(o);
+			if (!o) reset();
+		},
+		title: /* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx(Sparkles, { className: "h-4 w-4" }), "Add Service Charge"]
+		}),
+		description: "Append an ad-hoc charge to this sale (gift wrap, damaged-product reimbursement, custom handling).",
+		onSubmit: handleSubmit,
+		onCancel: () => {
+			setOpen(false);
+			reset();
+		},
+		submitLabel: "Add to cart",
+		cancelLabel: "Cancel",
+		submitDisabled: !isValid,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "space-y-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "space-y-1.5",
+				children: [
+					/* @__PURE__ */ jsx(Label, {
+						htmlFor: "add-charge-label",
+						children: "Label"
+					}),
+					/* @__PURE__ */ jsx(Input, {
+						id: "add-charge-label",
+						autoFocus: true,
+						placeholder: "Gift wrap, paper bag, damaged product…",
+						value: label,
+						onChange: (e) => setLabel(e.target.value),
+						maxLength: 120
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-xs text-muted-foreground",
+						children: "Free-form. Reports group by a slug derived from this label, so similar entries (\"Gift wrap\" / \"gift wrap\") aggregate together."
+					})
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "space-y-1.5",
+				children: [/* @__PURE__ */ jsx(Label, {
+					htmlFor: "add-charge-amount",
+					children: "Amount (BDT)"
+				}), /* @__PURE__ */ jsx(Input, {
+					id: "add-charge-amount",
+					type: "number",
+					inputMode: "decimal",
+					min: 0,
+					step: "0.01",
+					placeholder: "20",
+					value: amount,
+					onChange: (e) => setAmount(e.target.value)
+				})]
+			})]
+		})
+	})] });
+}
+
+//#endregion
+export { AddChargeDialog };

package/dist/dashboard/components/cart/CartItems.js

@@ -0,0 +1,103 @@
+"use client";
+
+import { formatBdt } from "../../../lib/money.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ShoppingCart, Sparkles } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+//#region src/dashboard/components/cart/CartItems.tsx
+function CartItems({ items, onUpdateQuantity, onRemoveItem }) {
+	if (items.length === 0) return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center justify-center h-full text-center py-12",
+		children: [/* @__PURE__ */ jsx(ShoppingCart, { className: "h-12 w-12 text-muted-foreground/30 mb-2" }), /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-muted-foreground",
+			children: "Cart is empty"
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "space-y-2",
+		children: items.map((item, index) => /* @__PURE__ */ jsx(CartItemRow, {
+			item,
+			onQuantityChange: (delta) => onUpdateQuantity(index, delta),
+			onRemove: () => onRemoveItem(index)
+		}, `${item.productId}-${item.variantSku || "simple"}`))
+	});
+}
+function CartItemRow({ item, onQuantityChange, onRemove }) {
+	const isServiceFee = item.kind === "service-fee";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex gap-3 p-3 rounded-lg border bg-card",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "w-16 h-16 rounded bg-muted overflow-hidden shrink-0 flex items-center justify-center",
+				children: isServiceFee ? /* @__PURE__ */ jsx(Sparkles, {
+					className: "h-5 w-5 text-muted-foreground",
+					"aria-label": "Service charge"
+				}) : /* @__PURE__ */ jsx("img", {
+					src: item.image,
+					alt: item.productName,
+					className: "w-full h-full object-cover"
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex-1 min-w-0",
+				children: [
+					/* @__PURE__ */ jsx("h4", {
+						className: "text-sm font-medium truncate",
+						children: item.productName
+					}),
+					isServiceFee ? /* @__PURE__ */ jsx("p", {
+						className: "text-xs text-muted-foreground italic",
+						children: "Service charge"
+					}) : item.variantLabel && /* @__PURE__ */ jsx("p", {
+						className: "text-xs text-muted-foreground",
+						children: item.variantLabel
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2 mt-2",
+						children: [
+							/* @__PURE__ */ jsx(Button, {
+								variant: "outline",
+								size: "icon",
+								className: "h-6 w-6",
+								onClick: () => onQuantityChange(-1),
+								children: "-"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-sm font-medium w-8 text-center",
+								children: item.quantity
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								variant: "outline",
+								size: "icon",
+								className: "h-6 w-6",
+								onClick: () => onQuantityChange(1),
+								children: "+"
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								className: "h-6 ml-auto text-xs",
+								onClick: onRemove,
+								children: "Remove"
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "text-right",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "font-bold",
+					children: formatBdt(item.lineTotal)
+				}), /* @__PURE__ */ jsxs("p", {
+					className: "text-xs text-muted-foreground",
+					children: [formatBdt(item.unitPrice), " each"]
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+export { CartItems };

package/dist/dashboard/components/cart/CartSummary.js

@@ -0,0 +1,73 @@
+"use client";
+
+import { formatBdt } from "../../../lib/money.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/dashboard/components/cart/CartSummary.tsx
+function CartSummary({ subtotal, discount, redemptionDiscount = 0, tierDiscount = 0, tierName, tierColor, total, pointsToEarn = 0 }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2 text-sm",
+		children: [
+			(discount > 0 || tierDiscount > 0 || redemptionDiscount > 0) && /* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: "Subtotal"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: formatBdt(subtotal)
+				})]
+			}),
+			discount > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: "Discount"
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "font-medium",
+					children: ["-", formatBdt(discount)]
+				})]
+			}),
+			tierDiscount > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground",
+					children: ["Tier Discount", tierName ? ` (${tierName})` : ""]
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "font-medium",
+					style: tierColor ? { color: tierColor } : void 0,
+					children: ["-", formatBdt(tierDiscount)]
+				})]
+			}),
+			redemptionDiscount > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: "Points Redeemed"
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "font-medium",
+					children: ["-", formatBdt(redemptionDiscount)]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between text-lg font-bold",
+				children: [/* @__PURE__ */ jsx("span", { children: "Total" }), /* @__PURE__ */ jsx("span", { children: formatBdt(total) })]
+			}),
+			pointsToEarn > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between text-xs text-muted-foreground",
+				children: [/* @__PURE__ */ jsx("span", { children: "Points to Earn" }), /* @__PURE__ */ jsxs("span", {
+					className: "font-medium",
+					style: tierColor ? { color: tierColor } : void 0,
+					children: [
+						"+",
+						pointsToEarn,
+						" pts"
+					]
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+export { CartSummary };