From f985deb2335706dcad07fc0b2dbb56d356ad3677 Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Thu, 25 Jun 2026 11:28:47 +0330
Subject: [PATCH] fix(offline): stop the sync queue badge getting stuck above
 zero
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two bugs made "N در صف" persist even when online:
- The badge counted poisoned ops (failed after 5 retries, never removed), so it
  never returned to 0. Now the badge counts only retryable (active) ops; poisoned
  ops are tracked separately as failedCount and surfaced as a red "N failed —
  clear" chip the user can tap to discard them.
- The manual-retry click drained the LEGACY order_queue, not the real outbox the
  app actually uses — so clicking did nothing for stuck items. It now drains the
  outbox (drainOutbox), invalidates queries on success, and recounts.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../layout/sync-status-indicator.tsx          | 119 ++++++++++--------
 web/dashboard/src/lib/offline/outbox.ts       |  21 ++++
 .../src/lib/offline/use-offline-sync.ts       |  16 ++-
 .../src/lib/stores/sync-queue.store.ts        |   7 +-
 4 files changed, 103 insertions(+), 60 deletions(-)

diff --git a/web/dashboard/src/components/layout/sync-status-indicator.tsx b/web/dashboard/src/components/layout/sync-status-indicator.tsx
index 4a3f5d9..e018c0a 100644
--- a/web/dashboard/src/components/layout/sync-status-indicator.tsx
+++ b/web/dashboard/src/components/layout/sync-status-indicator.tsx
@@ -1,61 +1,76 @@
 "use client";
 
-import { WifiOff, CloudUpload, RefreshCw } from "lucide-react";
+import { WifiOff, CloudUpload, RefreshCw, AlertTriangle } from "lucide-react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useLocale } from "next-intl";
 import { cn } from "@/lib/utils";
 import { useSyncQueueStore } from "@/lib/stores/sync-queue.store";
-import { useLocale } from "next-intl";
+import { getQueueCount } from "@/lib/offline/offline-db";
 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());
-  }
-}
+  drainOutbox,
+  getActiveOutboxCount,
+  getFailedOutboxCount,
+  discardFailedOps,
+} from "@/lib/offline/outbox";
 
 export function SyncStatusIndicator() {
-  const { queueCount, isSyncing, isOnline, setSyncing, setQueueCount } =
-    useSyncQueueStore();
+  const {
+    queueCount,
+    failedCount,
+    isSyncing,
+    isOnline,
+    setSyncing,
+    setQueueCount,
+    setFailedCount,
+  } = useSyncQueueStore();
+  const queryClient = useQueryClient();
   const locale = useLocale();
   const isFa = locale !== "en";
 
-  const show = !isOnline || queueCount > 0 || isSyncing;
-  if (!show) return null;
+  const recount = async () => {
+    setQueueCount((await getActiveOutboxCount()) + (await getQueueCount()));
+    setFailedCount(await getFailedOutboxCount());
+  };
+
+  // Manual retry — drains the REAL outbox (the engine the app actually uses),
+  // then refreshes server data and the counts.
+  const retry = async () => {
+    if (typeof navigator !== "undefined" && !navigator.onLine) return;
+    if (isSyncing) return;
+    setSyncing(true);
+    try {
+      const res = await drainOutbox();
+      if (res.sent > 0) await queryClient.invalidateQueries();
+    } finally {
+      setSyncing(false);
+      await recount();
+    }
+  };
+
+  // Poisoned ops can never sync (permanent 4xx) — let the user clear them so the
+  // badge doesn't sit stuck forever.
+  const clearFailed = async () => {
+    await discardFailedOps();
+    await recount();
+  };
+
+  const showPending = !isOnline || queueCount > 0 || isSyncing;
+  const showFailed = !showPending && failedCount > 0;
+  if (!showPending && !showFailed) return null;
+
+  if (showFailed) {
+    return (
+      <button
+        type="button"
+        onClick={() => void clearFailed()}
+        title={isFa ? "حذف موارد ناموفق همگام‌سازی" : "Clear failed sync items"}
+        className="flex cursor-pointer items-center gap-1.5 rounded-full bg-red-100 px-2.5 py-1 text-[11px] font-medium text-red-800 transition-colors hover:bg-red-200 dark:bg-red-900/30 dark:text-red-300"
+      >
+        <AlertTriangle className="h-3 w-3 shrink-0" aria-hidden />
+        <span>{isFa ? `${failedCount} ناموفق — پاک کردن` : `${failedCount} failed — clear`}</span>
+      </button>
+    );
+  }
 
   const label = isFa
     ? !isOnline
@@ -72,13 +87,9 @@ export function SyncStatusIndicator() {
   return (
     <button
       type="button"
-      onClick={() => void runManualSync(setSyncing, setQueueCount)}
+      onClick={() => void retry()}
       disabled={isSyncing || !isOnline}
-      title={
-        isFa
-          ? "برای همگام‌سازی دستی کلیک کنید"
-          : "Click to retry sync"
-      }
+      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",
diff --git a/web/dashboard/src/lib/offline/outbox.ts b/web/dashboard/src/lib/offline/outbox.ts
index 5cc89ae..f114bed 100644
--- a/web/dashboard/src/lib/offline/outbox.ts
+++ b/web/dashboard/src/lib/offline/outbox.ts
@@ -165,3 +165,24 @@ export async function getPoisonedOps(): Promise<OutboxOp[]> {
   const ops = await getOutboxOps();
   return ops.filter((o) => o.status === "failed" && o.attempts >= MAX_ATTEMPTS);
 }
+
+function isPoisoned(o: OutboxOp): boolean {
+  return o.status === "failed" && o.attempts >= MAX_ATTEMPTS;
+}
+
+/** Count of ops still worth retrying (excludes poisoned) — drives the "pending" badge. */
+export async function getActiveOutboxCount(): Promise<number> {
+  return (await getOutboxOps()).filter((o) => !isPoisoned(o)).length;
+}
+
+/** Count of poisoned ops — surfaced separately so they don't inflate "pending". */
+export async function getFailedOutboxCount(): Promise<number> {
+  return (await getOutboxOps()).filter(isPoisoned).length;
+}
+
+/** Permanently drop poisoned ops (user-initiated "clear failed"). Returns how many. */
+export async function discardFailedOps(): Promise<number> {
+  const poisoned = (await getOutboxOps()).filter(isPoisoned);
+  for (const o of poisoned) await removeOutboxOp(o.id);
+  return poisoned.length;
+}
diff --git a/web/dashboard/src/lib/offline/use-offline-sync.ts b/web/dashboard/src/lib/offline/use-offline-sync.ts
index d0a9b54..22f20ad 100644
--- a/web/dashboard/src/lib/offline/use-offline-sync.ts
+++ b/web/dashboard/src/lib/offline/use-offline-sync.ts
@@ -6,11 +6,14 @@ import { useSyncQueueStore } from "@/lib/stores/sync-queue.store";
 import {
   enqueueOutboxOp,
   getAllQueueItems,
-  getOutboxCount,
   getQueueCount,
   removeQueueItem,
 } from "@/lib/offline/offline-db";
-import { drainOutbox } from "@/lib/offline/outbox";
+import {
+  drainOutbox,
+  getActiveOutboxCount,
+  getFailedOutboxCount,
+} from "@/lib/offline/outbox";
 
 function newId(prefix: string): string {
   if (prefix === "idem" && typeof crypto !== "undefined" && "randomUUID" in crypto) {
@@ -75,15 +78,18 @@ async function migrateLegacyQueue(): Promise<void> {
  * - refresh server data once writes have synced.
  */
 export function useOfflineSync() {
-  const { setQueueCount, setSyncing, setOnline } = useSyncQueueStore();
+  const { setQueueCount, setFailedCount, setSyncing, setOnline } = useSyncQueueStore();
   const queryClient = useQueryClient();
   const syncLock = useRef(false);
 
   const refreshCount = useCallback(async () => {
-    const n = (await getOutboxCount()) + (await getQueueCount());
+    // Pending = retryable ops only; poisoned (failed after max retries) are shown
+    // separately so they never inflate the badge or keep it stuck above zero.
+    const n = (await getActiveOutboxCount()) + (await getQueueCount());
     setQueueCount(n);
+    setFailedCount(await getFailedOutboxCount());
     return n;
-  }, [setQueueCount]);
+  }, [setQueueCount, setFailedCount]);
 
   const syncQueue = useCallback(async () => {
     if (syncLock.current) return;
diff --git a/web/dashboard/src/lib/stores/sync-queue.store.ts b/web/dashboard/src/lib/stores/sync-queue.store.ts
index d9c7a58..efc00c5 100644
--- a/web/dashboard/src/lib/stores/sync-queue.store.ts
+++ b/web/dashboard/src/lib/stores/sync-queue.store.ts
@@ -1,14 +1,17 @@
 import { create } from "zustand";
 
 interface SyncQueueState {
-  /** Number of items waiting to be synced */
+  /** Number of items waiting to be synced (retryable; excludes poisoned) */
   queueCount: number;
+  /** Ops that exhausted retries and need attention (won't auto-sync) */
+  failedCount: number;
   /** True while a sync pass is running */
   isSyncing: boolean;
   /** Mirrors navigator.onLine (updated client-side) */
   isOnline: boolean;
 
   setQueueCount: (n: number) => void;
+  setFailedCount: (n: number) => void;
   setSyncing: (v: boolean) => void;
   setOnline: (v: boolean) => void;
   incrementQueue: () => void;
@@ -17,10 +20,12 @@ interface SyncQueueState {
 
 export const useSyncQueueStore = create<SyncQueueState>((set) => ({
   queueCount: 0,
+  failedCount: 0,
   isSyncing: false,
   isOnline: true, // assume online until client hydrates
 
   setQueueCount: (n) => set({ queueCount: Math.max(0, n) }),
+  setFailedCount: (n) => set({ failedCount: Math.max(0, n) }),
   setSyncing: (v) => set({ isSyncing: v }),
   setOnline: (v) => set({ isOnline: v }),
   incrementQueue: () => set((s) => ({ queueCount: s.queueCount + 1 })),