From 0f6de132f8a7a640090de34a54dc79de01514220 Mon Sep 17 00:00:00 2001
From: "ahmed.mujtaba" <ahmed.mujtaba@utopiabrands.com>
Date: Mon, 31 Aug 2026 17:03:21 +0500
Subject: [PATCH] make sync visible

---
 frontend/src/screens/Inbox.jsx | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/frontend/src/screens/Inbox.jsx b/frontend/src/screens/Inbox.jsx
index e15ce4e..2e3baf4 100644
--- a/frontend/src/screens/Inbox.jsx
+++ b/frontend/src/screens/Inbox.jsx
@@ -959,6 +959,24 @@ export default function Inbox() {
     markDuplicate.mutate({ id: item.id, isDuplicate: !item.duplicate, kind: item.kind })
   }
 
+  const sync = useMutation({
+    mutationFn: () => inboxApi.syncMailbox(),
+    onSuccess: async (res) => {
+      await qc.invalidateQueries({ queryKey: qk.mailbox.all() })
+      // /email/fetch reports what the intake gate did with the page. The key is
+      // additive and absent when the gate is disabled, so fall back to the old
+      // message rather than rendering "undefined filtered out".
+      const t = res?.triage
+      toast(
+        t
+          ? `Mailbox synced — ${t.ingested} imported, ${t.skipped} filtered out`
+          : 'Mailbox synced',
+        'success',
+      )
+    },
+    onError: (err) => toast(friendlyAuthError(err, 'Sync failed'), 'error'),
+  })
+
   return (
     <div className="page">
       <PageHeader
@@ -989,6 +1007,18 @@ export default function Inbox() {
           {isForms && (
             <span className="integration-status"><span className="pulse" />Google Sheets · Form data</span>
           )}
+          {!isForms && (
+            <button
+              className="btn btn-secondary"
+              disabled={sync.isPending}
+              onClick={() => {
+                toast('Fetching from Outlook…', 'info')
+                sync.mutate()
+              }}
+            >
+              <Icon name="refresh" /> {sync.isPending ? 'Syncing…' : 'Sync'}
+            </button>
+          )}
           <button className="btn btn-primary" onClick={() => navigate('/import')}>
             <Icon name="upload" /> Upload CVs
           </button>