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,111 @@
+"use client";
+
+import { useCallback, useEffect, useRef } from "react";
+import { useSyncQueueStore } from "@/lib/stores/sync-queue.store";
+import {
+  getAllQueueItems,
+  getQueueCount,
+  removeQueueItem,
+  markQueueItemFailed,
+} from "@/lib/offline/offline-db";
+import { apiPost } from "@/lib/api/client";
+
+/**
+ * Processes one queued item and returns whether it succeeded.
+ */
+async function processItem(item: Awaited<ReturnType<typeof getAllQueueItems>>[number]): Promise<boolean> {
+  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>
+      );
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Call this hook once in the app shell to:
+ * - Load initial queue count from IndexedDB on mount
+ * - Listen to online/offline events
+ * - Auto-sync when back online or tab becomes visible
+ */
+export function useOfflineSync() {
+  const { setQueueCount, setSyncing, setOnline } = useSyncQueueStore();
+  const syncLock = useRef(false);
+
+  const refreshCount = useCallback(async () => {
+    const n = await getQueueCount();
+    setQueueCount(n);
+    return n;
+  }, [setQueueCount]);
+
+  const syncQueue = useCallback(async () => {
+    if (syncLock.current) return;
+    if (!navigator.onLine) return;
+    const count = await refreshCount();
+    if (count === 0) return;
+
+    syncLock.current = true;
+    setSyncing(true);
+    try {
+      const items = await getAllQueueItems();
+      for (const item of items) {
+        if (item.status === "failed" && item.retries >= 3) continue; // give up after 3
+        const ok = await processItem(item);
+        if (ok) {
+          await removeQueueItem(item.id);
+        } else {
+          await markQueueItemFailed(item.id);
+        }
+      }
+    } finally {
+      syncLock.current = false;
+      setSyncing(false);
+      await refreshCount();
+    }
+  }, [refreshCount, setSyncing]);
+
+  useEffect(() => {
+    // Load initial count
+    void refreshCount();
+
+    // Track online state
+    const handleOnline = () => {
+      setOnline(true);
+      void syncQueue();
+    };
+    const handleOffline = () => setOnline(false);
+
+    setOnline(typeof navigator !== "undefined" ? navigator.onLine : true);
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+
+    // Sync when tab regains focus
+    const handleVisibility = () => {
+      if (document.visibilityState === "visible" && navigator.onLine) {
+        void syncQueue();
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibility);
+
+    return () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+      document.removeEventListener("visibilitychange", handleVisibility);
+    };
+  }, [syncQueue, setOnline, refreshCount]);
+
+  return { syncQueue, refreshCount };
+}