dispatch page

src/main.tsx

@@ -4,14 +4,30 @@ import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 import App from './App.tsx';
 import './index.css';
 
-// Single shared query client. Sensible defaults for a dashboard: cache for a
-// minute, one retry, and no refetch storm when the window regains focus.
+// How often every page silently re-syncs with the backend. Orders/deliveries
+// statuses change out-of-band (riders accept/pick/deliver, customers place
+// orders), so the whole console auto-refreshes on this cadence.
+const AUTO_REFRESH_MS = 30_000;
+
+// Single shared query client. Auto-refresh is wired here once so EVERY page
+// (current and future) inherits it — no per-component polling needed:
+//  • refetchInterval — poll the backend every AUTO_REFRESH_MS so status/order
+//    changes appear without a manual reload.
+//  • refetchIntervalInBackground:false — pause polling while the tab is hidden
+//    (saves API calls); it resumes + immediately refetches when the tab is shown.
+//  • refetchOnWindowFocus / refetchOnReconnect — refresh the instant the user
+//    returns to the tab or the network comes back.
+// staleTime is kept below the interval so focus/mount refetches aren't skipped.
+// Disabled queries (enabled:false, e.g. closed-modal detail fetches) never poll.
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      staleTime: 60_000,
+      staleTime: 15_000,
       retry: 1,
-      refetchOnWindowFocus: false,
+      refetchInterval: AUTO_REFRESH_MS,
+      refetchIntervalInBackground: false,
+      refetchOnWindowFocus: true,
+      refetchOnReconnect: true,
     },
   },
 });