Fix issues with data management settings page

inventory-server/src/routes/data-management.js

@@ -193,6 +193,33 @@ router.get('/:type/progress', (req, res) => {
     });
 });
 
+// GET /status - Check for active processes
+router.get('/status', (req, res) => {
+    try {
+        const hasActiveUpdate = activeFullUpdate !== null;
+        const hasActiveReset = activeFullReset !== null;
+        
+        if (hasActiveUpdate || hasActiveReset) {
+            res.json({
+                active: true,
+                progress: {
+                    status: 'running',
+                    operation: hasActiveUpdate ? 'Full update in progress' : 'Full reset in progress',
+                    type: hasActiveUpdate ? 'update' : 'reset'
+                }
+            });
+        } else {
+            res.json({
+                active: false,
+                progress: null
+            });
+        }
+    } catch (error) {
+        console.error('Error checking status:', error);
+        res.status(500).json({ error: error.message });
+    }
+});
+
 // Route to cancel active process
 router.post('/cancel', (req, res) => {
     let killed = false;

inventory/src/components/settings/DataManagement.tsx

@@ -88,43 +88,37 @@ interface TableSkeletonProps {
 
 const TableSkeleton = ({ rows = 5, useAccordion = false }: TableSkeletonProps) => {
   return (
-    <Table>
+    <>
-      <TableBody>
+      {Array.from({ length: rows }).map((_, rowIndex) => (
-        {Array.from({ length: rows }).map((_, rowIndex) => (
+        <TableRow key={rowIndex} className="hover:bg-transparent">
-          <TableRow key={rowIndex} className="hover:bg-transparent">
+          <TableCell className="w-full p-0">
-            <TableCell className="w-full p-0">
+            {useAccordion ? (
-              {useAccordion ? (
+              <div className="px-4 py-2 cursor-default">
-                <Accordion type="single" collapsible>
+                <div className="flex justify-between items-center w-full pr-4">
-                  <AccordionItem value={`skeleton-${rowIndex}`} className="border-0">
+                  <div className="w-[50px]">
-                    <AccordionTrigger className="px-4 py-2 cursor-default">
+                    <Skeleton className="h-4 w-full" />
-                      <div className="flex justify-between items-center w-full pr-4">
+                  </div>
-                        <div className="w-[50px]">
+                  <div className="w-[170px]">
-                          <Skeleton className="h-4 w-full" />
+                    <Skeleton className="h-4 w-full" />
-                        </div>
+                  </div>
-                        <div className="w-[170px]">
+                  <div className="w-[140px]">
-                          <Skeleton className="h-4 w-full" />
+                    <Skeleton className="h-4 w-full" />
-                        </div>
+                  </div>
-                        <div className="w-[140px]">
+                  <div className="w-[80px]">
-                          <Skeleton className="h-4 w-full" />
+                    <Skeleton className="h-4 w-full" />
-                        </div>
+                  </div>
-                        <div className="w-[80px]">
-                          <Skeleton className="h-4 w-full" />
-                        </div>
-                      </div>
-                    </AccordionTrigger>
-                  </AccordionItem>
-                </Accordion>
-              ) : (
-                <div className="flex justify-between px-4 py-2">
-                  <Skeleton className="h-4 w-[180px]" />
-                  <Skeleton className="h-4 w-[100px]" />
                 </div>
-              )}
+              </div>
-            </TableCell>
+            ) : (
-          </TableRow>
+              <div className="flex justify-between px-4 py-2">
-        ))}
+                <Skeleton className="h-4 w-[180px]" />
-      </TableBody>
+                <Skeleton className="h-4 w-[100px]" />
-    </Table>
+              </div>
+            )}
+          </TableCell>
+        </TableRow>
+      ))}
+    </>
   );
 };
 
@@ -172,8 +166,10 @@ export function DataManagement() {
         credentials: "include",
       });
 
+      console.log("Status check response:", response.status, response.statusText);
+
       if (!response.ok) {
-        throw new Error("Failed to check active process status");
+        throw new Error(`Failed to check active process status: ${response.status} ${response.statusText}`);
       }
 
       const data = await response.json();
@@ -185,7 +181,8 @@ export function DataManagement() {
         // Determine if it's a reset or update based on the progress data
         const isReset = 
           data.progress.operation?.includes("reset") || 
-          data.progress.operation?.includes("Reset");
+          data.progress.operation?.includes("Reset") ||
+          data.progress.type === "reset";
         
         // Set the appropriate state
         if (isReset) {
@@ -209,6 +206,8 @@ export function DataManagement() {
       }
     } catch (error) {
       console.error("Error checking for active processes:", error);
+      // Don't toast error for status check since this happens on every load
+      // The main data fetch will handle showing errors to the user
     }
   };
   
@@ -508,6 +507,8 @@ export function DataManagement() {
       if (shouldSetLoading) setIsLoading(true);
       setHasError(false);
 
+      console.log("Fetching history data...");
+
       const [importRes, calcRes, moduleRes, tableRes, tableCountsRes] = await Promise.all([
         fetch(`${config.apiUrl}/csv/history/import`, { credentials: 'include' }),
         fetch(`${config.apiUrl}/csv/history/calculate`, { credentials: 'include' }),
@@ -516,8 +517,22 @@ export function DataManagement() {
         fetch(`${config.apiUrl}/csv/status/table-counts`, { credentials: 'include' }),
       ]);
 
+      console.log("Fetch responses:", {
+        import: importRes.status,
+        calc: calcRes.status,
+        modules: moduleRes.status,
+        tables: tableRes.status,
+        tableCounts: tableCountsRes.status
+      });
+
       if (!importRes.ok || !calcRes.ok || !moduleRes.ok || !tableRes.ok || !tableCountsRes.ok) {
-        throw new Error('One or more requests failed');
+        const failed = [];
+        if (!importRes.ok) failed.push(`import (${importRes.status})`);
+        if (!calcRes.ok) failed.push(`calculate (${calcRes.status})`);
+        if (!moduleRes.ok) failed.push(`modules (${moduleRes.status})`);
+        if (!tableRes.ok) failed.push(`tables (${tableRes.status})`);
+        if (!tableCountsRes.ok) failed.push(`table-counts (${tableCountsRes.status})`);
+        throw new Error(`Failed requests: ${failed.join(', ')}`);
       }
 
       const [importData, calcData, moduleData, tableData, tableCountsData] = await Promise.all([
@@ -528,6 +543,14 @@ export function DataManagement() {
         tableCountsRes.json(),
       ]);
 
+      console.log("Successfully fetched data:", {
+        importCount: importData?.length || 0,
+        calcCount: calcData?.length || 0,
+        moduleCount: moduleData?.length || 0,
+        tableCount: tableData?.length || 0,
+        tableCountsAvailable: !!tableCountsData
+      });
+
       // Process import history to add duration_minutes if it doesn't exist
       const processedImportData = (importData || []).map((record: ImportHistoryRecord) => {
         if (!record.duration_minutes && record.start_time && record.end_time) {
@@ -557,7 +580,8 @@ export function DataManagement() {
     } catch (error) {
       console.error("Error fetching data:", error);
       setHasError(true);
-      toast.error("Failed to load data. Please try again.");
+      toast.error(`Failed to load data: ${error instanceof Error ? error.message : "Unknown error"}`);
+      // Set empty arrays instead of leaving them unchanged to trigger the UI to show empty states
       setImportHistory([]);
       setCalculateHistory([]);
       setModuleStatus([]);