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,102 @@
+"use client";
+
+import { WifiOff, CloudUpload, RefreshCw } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useSyncQueueStore } from "@/lib/stores/sync-queue.store";
+import { useLocale } from "next-intl";
+import {
+  getAllQueueItems,
+  getQueueCount,
+  removeQueueItem,
+  markQueueItemFailed,
+} from "@/lib/offline/offline-db";
+import { apiPost } from "@/lib/api/client";
+
+/** Manual retry — fires one sync pass immediately (used as onClick). */
+async function runManualSync(
+  setSyncing: (v: boolean) => void,
+  setQueueCount: (n: number) => void
+) {
+  if (!navigator.onLine) return;
+  setSyncing(true);
+  try {
+    const items = await getAllQueueItems();
+    for (const item of items) {
+      try {
+        if (item.type === "create_order") {
+          const { cafeId, body } = item.payload as { cafeId: string; body: unknown };
+          await apiPost(`/api/cafes/${cafeId}/orders`, body as Record<string, unknown>);
+        } else if (item.type === "add_items") {
+          const { cafeId, orderId, body } = item.payload as {
+            cafeId: string;
+            orderId: string;
+            body: unknown;
+          };
+          await apiPost(
+            `/api/cafes/${cafeId}/orders/${orderId}/items`,
+            body as Record<string, unknown>
+          );
+        }
+        await removeQueueItem(item.id);
+      } catch {
+        await markQueueItemFailed(item.id);
+      }
+    }
+  } finally {
+    setSyncing(false);
+    setQueueCount(await getQueueCount());
+  }
+}
+
+export function SyncStatusIndicator() {
+  const { queueCount, isSyncing, isOnline, setSyncing, setQueueCount } =
+    useSyncQueueStore();
+  const locale = useLocale();
+  const isFa = locale !== "en";
+
+  const show = !isOnline || queueCount > 0 || isSyncing;
+  if (!show) return null;
+
+  const label = isFa
+    ? !isOnline
+      ? "آفلاین"
+      : isSyncing
+        ? "همگام‌سازی..."
+        : `${queueCount} مورد در صف`
+    : !isOnline
+      ? "Offline"
+      : isSyncing
+        ? "Syncing..."
+        : `${queueCount} pending`;
+
+  return (
+    <button
+      type="button"
+      onClick={() => void runManualSync(setSyncing, setQueueCount)}
+      disabled={isSyncing || !isOnline}
+      title={
+        isFa
+          ? "برای همگام‌سازی دستی کلیک کنید"
+          : "Click to retry sync"
+      }
+      className={cn(
+        "flex cursor-pointer items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium transition-colors",
+        "disabled:cursor-not-allowed",
+        !isOnline
+          ? "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300"
+          : isSyncing
+            ? "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300"
+            : "bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300"
+      )}
+    >
+      {!isOnline ? (
+        <WifiOff className="h-3 w-3 shrink-0" aria-hidden />
+      ) : isSyncing ? (
+        <RefreshCw className="h-3 w-3 shrink-0 animate-spin" aria-hidden />
+      ) : (
+        <CloudUpload className="h-3 w-3 shrink-0" aria-hidden />
+      )}
+      <span>{label}</span>
+    </button>
+  );
+}