feat(dashboard): Next.js 16 merchant panel with offline POS and PWA

Complete merchant dashboard upgrade: Next.js 16 compatibility: - Fix params/searchParams typed as Promise<{}> throughout App Router - Replace middleware.ts with proxy.ts (Next.js 16 convention) - Remove unused @ts-expect-error directives caught by stricter TS - Cast dynamic next-intl t() keys to fix TranslateArgs type errors Offline POS: - IndexedDB queue (meezi_pos_offline) for orders created while offline - Zustand sync store tracking queueCount, isSyncing, isOnline - useOfflineSync hook: auto-syncs on reconnect/visibility-change - SyncStatusIndicator chip in topbar (amber=offline, blue=syncing) - submitOrderToApi falls back to local order on network failure - Local orders skip payment flow; sync on reconnect PWA (installable): - @ducanh2912/next-pwa with Workbox runtime caching rules - Web App Manifest (manifest.ts) — RTL/Farsi, theme #0F6E56 - PWA icons: 192px, 512px, maskable 512px - next.config.ts replaces next.config.mjs Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-05-27 21:34:12 +03:30
parent ef15fd6247
commit 131ecdbbe6
208 changed files with 37123 additions and 0 deletions
@@ -0,0 +1,167 @@
+"use client";
+
+import { useTranslations, useLocale } from "next-intl";
+import type { Order } from "@/lib/api/types";
+import { formatCurrency } from "@/lib/format";
+import { formatOrderNumber } from "@/lib/order-number";
+import { Button } from "@/components/ui/button";
+import "./pos-receipt-print.css";
+
+export type KitchenSlipLine = {
+  name: string;
+  quantity: number;
+  notes?: string;
+};
+
+type PosSlipModalProps = {
+  variant: "kitchen" | "bill";
+  cafeName: string;
+  onClose: () => void;
+  /** Full order for customer bill */
+  order?: Order;
+  /** Kitchen ticket lines (new items or full order) */
+  kitchenLines?: KitchenSlipLine[];
+  tableNumber?: string | number | null;
+  orderId?: string;
+  guestName?: string | null;
+  createdAt?: string;
+};
+
+export function PosSlipModal({
+  variant,
+  cafeName,
+  onClose,
+  order,
+  kitchenLines = [],
+  tableNumber,
+  orderId,
+  guestName,
+  createdAt,
+}: PosSlipModalProps) {
+  const t = useTranslations("receipt");
+  const locale = useLocale();
+  const numberLocale = locale === "en" ? "en-US" : "fa-IR";
+
+  const dateSource = order?.createdAt ?? createdAt ?? new Date().toISOString();
+  const formattedDate = new Intl.DateTimeFormat(
+    locale === "en" ? "en-US" : "fa-IR",
+    { dateStyle: "short", timeStyle: "short" }
+  ).format(new Date(dateSource));
+
+  const table =
+    order?.tableNumber ?? tableNumber ?? "—";
+  const orderNo = order ? formatOrderNumber(order) : orderId ? formatOrderNumber({ id: orderId }) : null;
+  const guest = order?.guestName ?? guestName;
+  const printId = "pos-slip-print-area";
+
+  const paymentKey = (method: string) => {
+    const m = method.toLowerCase();
+    if (m === "cash") return t("payment.cash");
+    if (m === "card") return t("payment.card");
+    if (m === "credit") return t("payment.credit");
+    return method;
+  };
+
+  const activeBillItems = order?.items.filter((i) => !i.isVoided) ?? [];
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
+      <div className="w-full max-w-[340px] rounded-xl border border-border bg-background p-4 shadow-xl">
+        <div
+          id={printId}
+          className="mb-4 rounded-md border border-dashed border-border p-3"
+        >
+          <div className="text-center text-base font-bold">{cafeName}</div>
+          <div className="mb-1 text-center text-xs font-semibold">
+            {variant === "kitchen" ? t("kitchenTitle") : t("billTitle")}
+          </div>
+          <div className="mb-2 text-center text-xs text-muted-foreground">
+            {formattedDate}
+          </div>
+          <div className="text-xs">
+            {t("table")}: {table}
+            {orderNo ? (
+              <>
+                {" "}
+                | {t("order")}: #{orderNo}
+              </>
+            ) : null}
+          </div>
+          {guest ? (
+            <div className="text-xs">
+              {t("guest")}: {guest}
+            </div>
+          ) : null}
+
+          <div className="receipt-divider" />
+
+          {variant === "kitchen"
+            ? kitchenLines.map((line, idx) => (
+                <div key={`${line.name}-${idx}`} className="receipt-row mb-1 text-xs">
+                  <span>
+                    {line.name} × {line.quantity}
+                    {line.notes ? ` (${line.notes})` : ""}
+                  </span>
+                </div>
+              ))
+            : activeBillItems.map((item) => (
+                <div key={item.id} className="receipt-row mb-1 text-xs">
+                  <span>
+                    {item.menuItemName} × {item.quantity}
+                  </span>
+                  <span>
+                    {formatCurrency(item.unitPrice * item.quantity, numberLocale)}
+                  </span>
+                </div>
+              ))}
+
+          {variant === "bill" ? (
+            <>
+              <div className="receipt-divider" />
+              <div className="receipt-row receipt-total">
+                <span>{t("total")}</span>
+                <span>{formatCurrency(order!.total, numberLocale)}</span>
+              </div>
+              {order!.payments?.map((p) => (
+                <div key={p.id} className="receipt-row mt-1 text-xs">
+                  <span>{paymentKey(p.method)}</span>
+                  <span>{formatCurrency(p.amount, numberLocale)}</span>
+                </div>
+              ))}
+              <div className="receipt-divider" />
+              <div className="mt-2 text-center text-xs">{t("thankYou")}</div>
+            </>
+          ) : (
+            <div className="mt-2 text-center text-[10px] text-muted-foreground">
+              {t("kitchenFooter")}
+            </div>
+          )}
+        </div>
+
+        <div className="flex gap-2">
+          <Button type="button" className="flex-1" onClick={() => window.print()}>
+            {t("print")}
+          </Button>
+          <Button type="button" variant="outline" className="flex-1" onClick={onClose}>
+            {t("close")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** @deprecated Use PosSlipModal variant="bill" */
+export function PosReceiptModal({
+  order,
+  cafeName,
+  onClose,
+}: {
+  order: Order;
+  cafeName: string;
+  onClose: () => void;
+}) {
+  return (
+    <PosSlipModal variant="bill" order={order} cafeName={cafeName} onClose={onClose} />
+  );
+}