Add stale refresh indicator

src/pages/Dashboard.tsx

@@ -3,6 +3,7 @@ import { useOutletContext, useNavigate } from 'react-router-dom';
 import { AreaChart, Area, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
 import { DollarSign, ShoppingCart, TrendingUp } from 'lucide-react';
 import DateRangePicker from '../components/DateRangePicker';
+import RefreshStatus from '../components/RefreshStatus';
 import type { DashboardAnalytics, OrderData, DateRange } from '../types';
 import { applyDashboardColors, buildDashboardMetrics } from '../analytics/dashboard';
 import { fetchDashboardAnalytics } from '../dataService';
@@ -459,6 +460,7 @@ const Dashboard = () => {
     void loadDashboardMetrics(dateRange, { force: true });
   };
   const shouldShowSkeleton = isMetricsLoading && !serverMetrics;
+  const isRefreshing = isMetricsLoading && Boolean(serverMetrics);
 
   return (
     <div className="space-y-6">
@@ -476,10 +478,12 @@ const Dashboard = () => {
         />
       </div>
 
+      <RefreshStatus isRefreshing={isRefreshing} />
+
       {shouldShowSkeleton ? (
         <DashboardSkeleton />
       ) : (
-        <>
+        <div className={isRefreshing ? 'refreshing-content space-y-6' : 'space-y-6'} aria-busy={isRefreshing}>
 
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
         <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
@@ -738,7 +742,7 @@ const Dashboard = () => {
           </div>
         </div>
       </div>
-        </>
+        </div>
       )}
     </div>
   );