made time more user readable

src/components/dashboard/Dashboard.tsx

@@ -16,6 +16,46 @@ import { usePageVisibility } from "@/hooks/usePageVisibility";
 import { useConfigStatus } from "@/hooks/useConfigStatus";
 import { useNavigation } from "@/components/layout/MainLayout";
 
+// Helper function to format last sync time
+function formatLastSyncTime(date: Date | null): string {
+  if (!date) return "Never";
+  
+  const now = new Date();
+  const syncDate = new Date(date);
+  const diffMs = now.getTime() - syncDate.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+  
+  // Show relative time for recent syncs
+  if (diffMins < 1) return "Just now";
+  if (diffMins < 60) return `${diffMins} min ago`;
+  if (diffHours < 24) return `${diffHours} hr${diffHours === 1 ? '' : 's'} ago`;
+  if (diffDays < 7) return `${diffDays} day${diffDays === 1 ? '' : 's'} ago`;
+  
+  // For older syncs, show week count
+  const diffWeeks = Math.floor(diffDays / 7);
+  if (diffWeeks < 4) return `${diffWeeks} week${diffWeeks === 1 ? '' : 's'} ago`;
+  
+  // For even older, show month count
+  const diffMonths = Math.floor(diffDays / 30);
+  return `${diffMonths} month${diffMonths === 1 ? '' : 's'} ago`;
+}
+
+// Helper function to format full timestamp
+function formatFullTimestamp(date: Date | null): string {
+  if (!date) return "";
+  
+  return new Date(date).toLocaleString("en-US", {
+    month: "2-digit",
+    day: "2-digit",
+    year: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: true
+  }).replace(',', '');
+}
+
 export function Dashboard() {
   const { user } = useAuth();
   const { registerRefreshCallback } = useLiveRefresh();
@@ -236,19 +276,9 @@ export function Dashboard() {
         />
         <StatusCard
           title="Last Sync"
-          value={
+          value={formatLastSyncTime(lastSync)}
-            lastSync
-              ? new Date(lastSync).toLocaleString("en-US", {
-                  month: "2-digit",
-                  day: "2-digit",
-                  year: "2-digit",
-                  hour: "2-digit",
-                  minute: "2-digit",
-                })
-              : "N/A"
-          }
           icon={<Clock className="h-4 w-4" />}
-          description="Last successful sync"
+          description={formatFullTimestamp(lastSync)}
         />
       </div>