feat: added format time functions

Author: Yashh56

src/features/database/components/MigrationsPanel.tsx

@@ -6,6 +6,7 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { MigrationsData } from "@/features/database/types";
 import { useMigrationsPanel } from "../hooks/useMigrationsPanel";
 import { cn } from "@/lib/utils";
+import { formatTimestamp } from "@/lib/utils";
 
 interface MigrationsPanelProps {
     migrations: MigrationsData;
@@ -72,7 +73,7 @@ export default function MigrationsPanel({ migrations, baselined, dbId }: Migrati
                                 <div className="bg-muted/30 rounded-lg p-3 border border-border/30">
                                     <div className="text-xs text-muted-foreground mb-1">Pending</div>
                                     <div className="text-2xl font-bold text-foreground">
-                                        {local.length - applied.length}
+                                        {allMigrations.filter(m => m.status === "pending").length}
                                     </div>
                                 </div>
                             </div>
@@ -183,16 +184,9 @@ function MigrationItem({ migration, onApply, onRollback, onDelete, onViewSQL }:
                             {migration.name}
                         </p>
                         {migration.appliedAt && (
+                            console.log(formatTimestamp(migration.appliedAt)),
                             <p className="text-xs text-muted-foreground/70 mt-1">
-                                Applied: {new Date(migration.appliedAt).toLocaleString('en-IN', {
-                                    year: 'numeric',
-                                    month: 'short',
-                                    day: 'numeric',
-                                    hour: '2-digit',
-                                    minute: '2-digit',
-                                    hour12: true,
-                                    timeZone: 'Asia/Kolkata'
-                                })}
+                                Applied: {formatTimestamp(migration.appliedAt)}
                             </p>
                         )}
                     </div>

src/features/home/components/ConnectionDetails.tsx

@@ -1,5 +1,6 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { DatabaseConnection } from "@/features/database/types"
+import { formatTimestamp } from "@/lib/utils"
 
 export function ConnectionDetails({ database }: { database: DatabaseConnection }) {
     return (
@@ -41,7 +42,7 @@ export function ConnectionDetails({ database }: { database: DatabaseConnection }
                 <div className="flex items-center justify-between py-2">
                     <span className="text-sm text-muted-foreground">Created</span>
                     <span className="text-sm">
-                        {new Date(database.createdAt).toLocaleDateString()}
+                        {formatTimestamp(database.createdAt)}
                     </span>
                 </div>
             </CardContent>

src/features/home/components/DatabaseOverviewPanel.tsx

@@ -1,6 +1,6 @@
 import { Card, CardAction, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { Clock, Database, HardDrive, Table2, Layers, GitBranch, FileCode2 } from "lucide-react";
-import { formatRelativeTime } from "../utils";
+import { formatRelativeTime } from "@/lib/utils";
 import { DatabaseConnection } from "@/features/database/types";
 import { ConnectionDetails } from "./ConnectionDetails";
 import { MigrationStatusCard } from "./MigrationStatusCard";

src/features/home/components/WelcomeView.tsx

@@ -9,9 +9,8 @@ import {
   Layers,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
+import { cn, formatRelativeTime } from "@/lib/utils";
 import { WelcomeViewProps } from "../types";
-import { formatRelativeTime } from "../utils";
 import { DiscoveredDatabasesCard } from "./DiscoveredDatabasesCard";
 import { Spinner } from "@/components/ui/spinner";
 import { Card, CardAction, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

src/features/home/components/index.ts

@@ -5,4 +5,3 @@ export { AddConnectionDialog } from "./AddConnectionDialog";
 export { DeleteDialog } from "./DeleteDialog";
 export { DiscoveredDatabasesCard } from "./DiscoveredDatabasesCard";
 export * from "../types";
-export * from "../utils";

src/features/home/utils.ts

@@ -4,3 +4,40 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+/**
+ * Format an ISO timestamp string to a readable local date/time.
+ * e.g. "2026-06-12T12:46:20.671Z" → "12 Jun 2026, 12:46 pm"
+ */
+export function formatTimestamp(dateString?: string | null): string {
+  if (!dateString) return "—";
+  const date = new Date(dateString);
+  if (isNaN(date.getTime())) return dateString;
+  return date.toLocaleString(undefined, {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: true,
+  });
+}
+
+/**
+ * Show relative time for recent events, fall back to formatTimestamp for older ones.
+ * e.g. "5m ago", "2h ago", "3d ago", or "12 Jun 2026, 12:46 pm"
+ */
+export function formatRelativeTime(dateString?: string | null): string {
+  if (!dateString) return "Never";
+  const date = new Date(dateString);
+  if (isNaN(date.getTime())) return dateString;
+  const diffMs = Date.now() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+  if (diffMins < 1) return "Just now";
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return formatTimestamp(dateString);
+}