opengraph stuff

src/apps/officer-web/Screens/Dashboard/Settings/IntegrationsSettings/GoogleAccount.tsx

@@ -1,7 +1,9 @@
 import { useState, useEffect } from 'react';
 import { toast } from 'sonner';
+import { RefreshCw, Loader2, CheckCircle2, XCircle } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { useClient } from 'hooks/useClient';
+import { useJobs } from 'hooks/useJobs';
 
 type GoogleStatus = {
   connected: boolean;
@@ -10,10 +12,18 @@ type GoogleStatus = {
   configured: boolean;
 };
 
+const formatTime = (ts: number) => {
+  const d = new Date(ts);
+  return d.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
+};
+
 export const GoogleAccount = () => {
   const client = useClient();
   const [isLoading, setIsLoading] = useState(true);
   const [status, setStatus] = useState<GoogleStatus>({ connected: false, email: null, picture: null, configured: false });
+  const { jobs, createJob, refetch } = useJobs({ type: 'gmail-sync' });
+  const activeJob = jobs.find((j) => j.status === 'queued' || j.status === 'running');
+  const lastJob = jobs[0];
 
   const fetchStatus = () => {
     client
@@ -37,6 +47,16 @@ export const GoogleAccount = () => {
     }
   }, []);
 
+  const handleSync = async (year?: number) => {
+    try {
+      await createJob({ lane: 'google-api', type: 'gmail-sync', meta: year ? { year } : undefined });
+      await refetch();
+      toast.success("Gmail sync started — you'll receive an email when it's done");
+    } catch {
+      toast.error('Failed to start Gmail sync');
+    }
+  };
+
   const handleConnect = () => {
     const params = new URLSearchParams({
       token: client.token ?? '',
@@ -69,6 +89,9 @@ export const GoogleAccount = () => {
   }
 
   if (status.connected) {
+    const currentStep = activeJob?.steps[activeJob.currentStep];
+    const progress = currentStep?.progress;
+
     return (
       <div className="grid gap-4">
         <div className="flex items-center gap-3 rounded-lg border border-duck-dark/10 dark:border-foreground/10 p-4">
@@ -84,6 +107,64 @@ export const GoogleAccount = () => {
         <p className="text-xs text-duck-dark/40 dark:text-foreground/40">
           Officer has access to your Google Calendar, Gmail, and other enabled services.
         </p>
+        {activeJob && (
+          <div className="flex items-center gap-3 rounded-lg border border-duck-dark/10 dark:border-foreground/10 p-3">
+            <Loader2 className="h-4 w-4 animate-spin text-duck-dark/60 dark:text-foreground/60 shrink-0" />
+            <div className="min-w-0 flex-1">
+              <p className="text-sm font-medium text-duck-dark dark:text-foreground">
+                {activeJob.status === 'queued' ? 'Queued' : 'Syncing'}
+                {progress?.label ? ` — ${progress.label}` : ''}
+              </p>
+              {progress && progress.total > 0 && (
+                <div className="mt-1.5 h-1.5 rounded-full bg-duck-dark/10 dark:bg-foreground/10 overflow-hidden">
+                  <div
+                    className="h-full rounded-full bg-duck-yellow transition-all duration-300"
+                    style={{ width: `${Math.round((progress.current / progress.total) * 100)}%` }}
+                  />
+                </div>
+              )}
+              {progress && progress.total === 0 && progress.current > 0 && (
+                <p className="mt-1 text-xs text-duck-dark/50 dark:text-foreground/50">
+                  {progress.current.toLocaleString()} emails processed
+                </p>
+              )}
+            </div>
+          </div>
+        )}
+        {!activeJob && lastJob?.status === 'completed' && (
+          <div className="flex items-center gap-2 text-xs text-duck-dark/50 dark:text-foreground/50">
+            <CheckCircle2 className="h-3.5 w-3.5 text-green-500 shrink-0" />
+            Last sync completed {formatTime(lastJob.completedAt!)}
+          </div>
+        )}
+        {!activeJob && lastJob?.status === 'failed' && (
+          <div className="flex items-center gap-2 text-xs text-red-500">
+            <XCircle className="h-3.5 w-3.5 shrink-0" />
+            Last sync failed{lastJob.error ? `: ${lastJob.error}` : ''}
+          </div>
+        )}
+        <div className="flex gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            disabled={!!activeJob}
+            onClick={() => handleSync()}
+            className="flex-1 h-11 cursor-pointer gap-2"
+          >
+            <RefreshCw className="h-4 w-4" />
+            Sync Gmail Inbox
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            disabled={!!activeJob}
+            onClick={() => handleSync(2026)}
+            className="flex-1 h-11 cursor-pointer gap-2"
+          >
+            <RefreshCw className="h-4 w-4" />
+            Test Sync (2026)
+          </Button>
+        </div>
         <Button
           type="button"
           variant="outline"