Add refresh button to settings page status tables, fix duration on active scripts

inventory/src/components/settings/DataManagement.tsx

@@ -24,7 +24,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
-import { Loader2, X, RefreshCw, AlertTriangle } from "lucide-react";
+import { Loader2, X, RefreshCw, AlertTriangle, RefreshCcw, Hourglass } from "lucide-react";
 import config from "../../config";
 import { toast } from "sonner";
 import { Table, TableBody, TableCell, TableRow, TableHeader, TableHead } from "@/components/ui/table";
@@ -101,7 +101,26 @@ export function DataManagement() {
   };
 
   // Helper to format duration with seconds
-  const formatDurationWithSeconds = (minutes: number) => {
+  const formatDurationWithSeconds = (minutes: number, isRunning: boolean = false, startTime?: string) => {
+    if (isRunning && startTime) {
+      const elapsedMinutes = (new Date().getTime() - new Date(startTime).getTime()) / (1000 * 60);
+      const hours = Math.floor(elapsedMinutes / 60);
+      const remainingMinutes = Math.floor(elapsedMinutes % 60);
+      const seconds = Math.round((elapsedMinutes % 1) * 60);
+      
+      const parts = [];
+      if (hours > 0) parts.push(`${hours}h`);
+      if (remainingMinutes > 0) parts.push(`${remainingMinutes}m`);
+      if (seconds > 0) parts.push(`${seconds}s`);
+
+      return (
+        <span className="flex items-center gap-1">
+          {parts.join(" ")}
+          <Hourglass className="h-3 w-3 animate-pulse" />
+        </span>
+      );
+    }
+
     if (minutes < 1 / 60) return "Less than a second";
 
     const hours = Math.floor(minutes / 60);
@@ -365,6 +384,60 @@ export function DataManagement() {
     }
   };
 
+  const refreshTableStatus = async () => {
+    try {
+      const response = await fetch(`${config.apiUrl}/csv/status/tables`);
+      const data = await response.json();
+      setTableStatus(data);
+    } catch (error) {
+      toast.error("Failed to refresh table status");
+    }
+  };
+
+  const refreshModuleStatus = async () => {
+    try {
+      const response = await fetch(`${config.apiUrl}/csv/status/modules`);
+      const data = await response.json();
+      setModuleStatus(data);
+    } catch (error) {
+      toast.error("Failed to refresh module status");
+    }
+  };
+
+  const refreshImportHistory = async () => {
+    try {
+      const response = await fetch(`${config.apiUrl}/csv/history/import`);
+      const data = await response.json();
+      setImportHistory(data);
+    } catch (error) {
+      toast.error("Failed to refresh import history");
+    }
+  };
+
+  const refreshCalculateHistory = async () => {
+    try {
+      const response = await fetch(`${config.apiUrl}/csv/history/calculate`);
+      const data = await response.json();
+      setCalculateHistory(data);
+    } catch (error) {
+      toast.error("Failed to refresh calculate history");
+    }
+  };
+
+  const refreshAllData = async () => {
+    try {
+      await Promise.all([
+        refreshTableStatus(),
+        refreshModuleStatus(),
+        refreshImportHistory(),
+        refreshCalculateHistory()
+      ]);
+      toast.success("All data refreshed");
+    } catch (error) {
+      toast.error("Failed to refresh some data");
+    }
+  };
+
   useEffect(() => {
     fetchHistory();
   }, []);
@@ -511,7 +584,17 @@ export function DataManagement() {
 
       {/* History Section */}
       <div className="space-y-6">
+        <div className="flex justify-between items-center">
           <h2 className="text-2xl font-bold">History & Status</h2>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={refreshAllData}
+            className="h-8 w-8"
+          >
+            <RefreshCcw className="h-4 w-4" />
+          </Button>
+        </div>
 
         <div className="grid gap-4 md:grid-cols-2">
           {/* Table Status */}
@@ -595,7 +678,9 @@ export function DataManagement() {
                               </span>
                               <span className="text-sm min-w-[100px]">
                                 {formatDurationWithSeconds(
-                                  record.duration_minutes
+                                  record.duration_minutes,
+                                  record.status === "running",
+                                  record.start_time
                                 )}
                               </span>
                               <span
@@ -675,7 +760,9 @@ export function DataManagement() {
                               </span>
                               <span className="text-sm min-w-[100px]">
                                 {formatDurationWithSeconds(
-                                  record.duration_minutes
+                                  record.duration_minutes,
+                                  record.status === "running",
+                                  record.start_time
                                 )}
                               </span>