More data management page tweaks, ensure reusable images don't get deleted automatically

inventory-server/scripts/reset-db.js

@@ -184,7 +184,7 @@ async function resetDatabase() {
             SELECT string_agg(tablename, ', ') as tables
             FROM pg_tables
             WHERE schemaname = 'public'
-            AND tablename NOT IN ('users', 'permissions', 'user_permissions', 'calculate_history', 'import_history', 'ai_prompts', 'ai_validation_performance', 'templates');
+            AND tablename NOT IN ('users', 'permissions', 'user_permissions', 'calculate_history', 'import_history', 'ai_prompts', 'ai_validation_performance', 'templates', 'reusable_images');
         `);
 
         if (!tablesResult.rows[0].tables) {
@@ -204,7 +204,7 @@ async function resetDatabase() {
             // Drop all tables except users
             const tables = tablesResult.rows[0].tables.split(', ');
             for (const table of tables) {
-                if (!['users'].includes(table)) {
+                if (!['users', 'reusable_images'].includes(table)) {
                     await client.query(`DROP TABLE IF EXISTS "${table}" CASCADE`);
                 }
             }

inventory-server/scripts/reset-metrics.js

@@ -39,6 +39,19 @@ const METRICS_TABLES = [
     'vendor_details'
 ];
 
+// Tables to always protect from being dropped
+const PROTECTED_TABLES = [
+    'users', 
+    'permissions', 
+    'user_permissions', 
+    'calculate_history', 
+    'import_history', 
+    'ai_prompts', 
+    'ai_validation_performance', 
+    'templates', 
+    'reusable_images'
+];
+
 // Split SQL into individual statements
 function splitSQLStatements(sql) {
     sql = sql.replace(/\r\n/g, '\n');
@@ -109,7 +122,8 @@ async function resetMetrics() {
             FROM pg_tables 
             WHERE schemaname = 'public'
             AND tablename = ANY($1)
-        `, [METRICS_TABLES]);
+            AND tablename NOT IN (SELECT unnest($2::text[]))
+        `, [METRICS_TABLES, PROTECTED_TABLES]);
 
         outputProgress({
             operation: 'Initial state',
@@ -126,6 +140,15 @@ async function resetMetrics() {
         });
 
         for (const table of [...METRICS_TABLES].reverse()) {
+            // Skip protected tables
+            if (PROTECTED_TABLES.includes(table)) {
+                outputProgress({
+                    operation: 'Protected table',
+                    message: `Skipping protected table: ${table}`
+                });
+                continue;
+            }
+            
             try {
                 // Use NOWAIT to avoid hanging if there's a lock
                 await client.query(`DROP TABLE IF EXISTS "${table}" CASCADE`);

inventory-server/src/routes/import.js

@@ -8,7 +8,9 @@ const fs = require('fs');
 
 // Create uploads directory if it doesn't exist
 const uploadsDir = path.join('/var/www/html/inventory/uploads/products');
+const reusableUploadsDir = path.join('/var/www/html/inventory/uploads/reusable');
 fs.mkdirSync(uploadsDir, { recursive: true });
+fs.mkdirSync(reusableUploadsDir, { recursive: true });
 
 // Create a Map to track image upload times and their scheduled deletion
 const imageUploadMap = new Map();
@@ -35,6 +37,12 @@ const connectionCache = {
 
 // Function to schedule image deletion after 24 hours
 const scheduleImageDeletion = (filename, filePath) => {
+  // Only schedule deletion for images in the products folder
+  if (!filePath.includes('/uploads/products/')) {
+    console.log(`Skipping deletion for non-product image: ${filename}`);
+    return;
+  }
+
   // Delete any existing timeout for this file
   if (imageUploadMap.has(filename)) {
     clearTimeout(imageUploadMap.get(filename).timeoutId);
@@ -407,6 +415,14 @@ router.delete('/delete-image', (req, res) => {
       return res.status(404).json({ error: 'File not found' });
     }
     
+    // Only allow deletion of images in the products folder
+    if (!filePath.includes('/uploads/products/')) {
+      return res.status(403).json({ 
+        error: 'Cannot delete images outside the products folder',
+        message: 'This image is in a protected folder and cannot be deleted through this endpoint'
+      });
+    }
+    
     // Delete the file
     fs.unlinkSync(filePath);
     
@@ -641,11 +657,19 @@ router.get('/check-file/:filename', (req, res) => {
     return res.status(400).json({ error: 'Invalid filename' });
   }
   
-  const filePath = path.join(uploadsDir, filename);
+  // First check in products directory
+  let filePath = path.join(uploadsDir, filename);
+  let exists = fs.existsSync(filePath);
+  
+  // If not found in products, check in reusable directory
+  if (!exists) {
+    filePath = path.join(reusableUploadsDir, filename);
+    exists = fs.existsSync(filePath);
+  }
   
   try {
     // Check if file exists
-    if (!fs.existsSync(filePath)) {
+    if (!exists) {
       return res.status(404).json({ 
         error: 'File not found', 
         path: filePath,
@@ -685,13 +709,23 @@ router.get('/check-file/:filename', (req, res) => {
 // List all files in uploads directory
 router.get('/list-uploads', (req, res) => {
   try {
-    if (!fs.existsSync(uploadsDir)) {
+    const { directory = 'products' } = req.query;
-      return res.status(404).json({ error: 'Uploads directory not found', path: uploadsDir });
+    
+    // Determine which directory to list
+    let targetDir;
+    if (directory === 'reusable') {
+      targetDir = reusableUploadsDir;
+    } else {
+      targetDir = uploadsDir; // default to products
     }
     
-    const files = fs.readdirSync(uploadsDir);
+    if (!fs.existsSync(targetDir)) {
+      return res.status(404).json({ error: 'Uploads directory not found', path: targetDir });
+    }
+    
+    const files = fs.readdirSync(targetDir);
     const fileDetails = files.map(file => {
-      const filePath = path.join(uploadsDir, file);
+      const filePath = path.join(targetDir, file);
       try {
         const stats = fs.statSync(filePath);
         return {
@@ -709,12 +743,13 @@ router.get('/list-uploads', (req, res) => {
     });
     
     return res.json({
-      directory: uploadsDir,
+      directory: targetDir,
+      type: directory,
       count: files.length,
       files: fileDetails
     });
   } catch (error) {
-    return res.status(500).json({ error: error.message, path: uploadsDir });
+    return res.status(500).json({ error: error.message });
   }
 });
 

inventory/src/components/dashboard/Overview.tsx

@@ -0,0 +1,66 @@
+import { useQuery } from '@tanstack/react-query';
+import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import config from '../../config';
+
+interface SalesData {
+  date: string;
+  total: number;
+}
+
+export function Overview() {
+  const { data, isLoading, error } = useQuery<SalesData[]>({
+    queryKey: ['sales-overview'],
+    queryFn: async () => {
+      const response = await fetch(`${config.apiUrl}/dashboard/sales-overview`);
+      if (!response.ok) {
+        throw new Error('Failed to fetch sales overview');
+      }
+      const rawData = await response.json();
+      return rawData.map((item: SalesData) => ({
+        ...item,
+        total: parseFloat(item.total.toString()),
+        date: new Date(item.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+      }));
+    },
+  });
+
+  if (isLoading) {
+    return <div>Loading chart...</div>;
+  }
+
+  if (error) {
+    return <div className="text-red-500">Error loading sales overview</div>;
+  }
+
+  return (
+    <ResponsiveContainer width="100%" height={350}>
+      <LineChart data={data}>
+        <XAxis
+          dataKey="date"
+          stroke="#888888"
+          fontSize={12}
+          tickLine={false}
+          axisLine={false}
+        />
+        <YAxis
+          stroke="#888888"
+          fontSize={12}
+          tickLine={false}
+          axisLine={false}
+          tickFormatter={(value) => `$${value.toLocaleString()}`}
+        />
+        <Tooltip 
+          formatter={(value: number) => [`$${value.toLocaleString()}`, 'Sales']}
+          labelFormatter={(label) => `Date: ${label}`}
+        />
+        <Line
+          type="monotone"
+          dataKey="total"
+          stroke="hsl(var(--primary))"
+          strokeWidth={2}
+          dot={false}
+        />
+      </LineChart>
+    </ResponsiveContainer>
+  );
+} 

inventory/src/components/dashboard/VendorPerformance.tsx

@@ -0,0 +1,79 @@
+import { useQuery } from "@tanstack/react-query"
+import { CardHeader, CardTitle, CardContent } from "@/components/ui/card"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { Progress } from "@/components/ui/progress"
+import config from "@/config"
+
+interface VendorMetrics {
+  vendor: string
+  avg_lead_time: number
+  on_time_delivery_rate: number
+  avg_fill_rate: number
+  total_orders: number
+  active_orders: number
+  overdue_orders: number
+}
+
+export function VendorPerformance() {
+  const { data: vendors } = useQuery<VendorMetrics[]>({
+    queryKey: ["vendor-metrics"],
+    queryFn: async () => {
+      const response = await fetch(`${config.apiUrl}/dashboard/vendor/performance`)
+      if (!response.ok) {
+        throw new Error("Failed to fetch vendor metrics")
+      }
+      return response.json()
+    },
+  })
+
+  // Sort vendors by on-time delivery rate
+  const sortedVendors = vendors
+    ?.sort((a, b) => b.on_time_delivery_rate - a.on_time_delivery_rate)
+
+  return (
+    <>
+      <CardHeader>
+        <CardTitle className="text-lg font-medium">Top Vendor Performance</CardTitle>
+      </CardHeader>
+      <CardContent className="max-h-[400px] overflow-auto">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Vendor</TableHead>
+              <TableHead>On-Time</TableHead>
+              <TableHead className="text-right">Fill Rate</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {sortedVendors?.map((vendor) => (
+              <TableRow key={vendor.vendor}>
+                <TableCell className="font-medium">{vendor.vendor}</TableCell>
+                <TableCell>
+                  <div className="flex items-center gap-2">
+                    <Progress
+                      value={vendor.on_time_delivery_rate}
+                      className="h-2"
+                    />
+                    <span className="w-10 text-sm">
+                      {vendor.on_time_delivery_rate.toFixed(0)}%
+                    </span>
+                  </div>
+                </TableCell>
+                <TableCell className="text-right">
+                  {vendor.avg_fill_rate.toFixed(0)}%
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </>
+  )
+} 

inventory/src/components/settings/DataManagement.tsx

@@ -29,19 +29,6 @@ import config from "../../config";
 import { toast } from "sonner";
 import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
 
-interface ImportProgress {
-  status: "running" | "error" | "complete" | "cancelled";
-  operation?: string;
-  current?: number;
-  total?: number;
-  rate?: number;
-  elapsed?: string;
-  remaining?: string;
-  progress?: string;
-  error?: string;
-  percentage?: string;
-  message?: string;
-}
 
 interface HistoryRecord {
   id: number;
@@ -439,54 +426,9 @@ export function DataManagement() {
     }
   };
 
-  const refreshTableStatus = async () => {
-    try {
-      const response = await fetch(`${config.apiUrl}/csv/status/tables`);
-      if (!response.ok) throw new Error('Failed to fetch table status');
-      const data = await response.json();
-      setTableStatus(Array.isArray(data) ? data : []);
-      toast.success("Table status refreshed");
-    } catch (error) {
-      toast.error("Failed to refresh table status");
-      setTableStatus([]);
-    }
-  };
 
-  const refreshModuleStatus = async () => {
-    try {
-      const response = await fetch(`${config.apiUrl}/csv/status/modules`);
-      if (!response.ok) throw new Error('Failed to fetch module status');
-      const data = await response.json();
-      setModuleStatus(Array.isArray(data) ? data : []);
-    } catch (error) {
-      toast.error("Failed to refresh module status");
-      setModuleStatus([]);
-    }
-  };
 
-  const refreshImportHistory = async () => {
-    try {
-      const response = await fetch(`${config.apiUrl}/csv/history/import`);
-      if (!response.ok) throw new Error('Failed to fetch import history');
-      const data = await response.json();
-      setImportHistory(Array.isArray(data) ? data : []);
-    } catch (error) {
-      toast.error("Failed to refresh import history");
-      setImportHistory([]);
-    }
-  };
 
-  const refreshCalculateHistory = async () => {
-    try {
-      const response = await fetch(`${config.apiUrl}/csv/history/calculate`);
-      if (!response.ok) throw new Error('Failed to fetch calculate history');
-      const data = await response.json();
-      setCalculateHistory(Array.isArray(data) ? data : []);
-    } catch (error) {
-      toast.error("Failed to refresh calculate history");
-      setCalculateHistory([]);
-    }
-  };
 
   const refreshAllData = async () => {
     setIsLoading(true);
@@ -558,10 +500,10 @@ export function DataManagement() {
   const renderTableCountsSection = () => {
     if (!tableCounts) return null;
 
-    const renderTableGroup = (title: string, tables: TableCount[]) => (
+    const renderTableGroup = (_title: string, tables: TableCount[]) => (
       <div className="mt-0 border-t first:border-t-0 first:mt-0">
         <div>
-          {tables.map((table, index) => (
+          {tables.map((table) => (
             <div
               key={table.table_name}
               className="flex justify-between text-sm items-center py-2 border-b last:border-0"
@@ -603,8 +545,8 @@ export function DataManagement() {
     <div className="space-y-8 max-w-4xl">
       <div className="grid gap-4 md:grid-cols-2">
         {/* Full Update Card */}
-      <Card>
+      <Card className="relative">
-        <CardHeader>
+        <CardHeader className="pb-12">
             <CardTitle>Full Update</CardTitle>
             <CardDescription>
               Import latest data and recalculate all metrics
@@ -613,7 +555,7 @@ export function DataManagement() {
         <CardContent>
           <div className="flex gap-2">
             <Button 
-              className="flex-1"
+              className="absolute bottom-4 right-[50%] translate-x-[50%] w-3/4"
                 onClick={handleFullUpdate}
                 disabled={isUpdating || isResetting}
             >
@@ -631,7 +573,7 @@ export function DataManagement() {
             </Button>
 
               {isUpdating && (
-                <Button variant="destructive" onClick={handleCancel}>
+                <Button variant="destructive" onClick={handleCancel} className="absolute top-4 right-4">
                 <X className="h-4 w-4" />
               </Button>
             )}
@@ -640,8 +582,8 @@ export function DataManagement() {
       </Card>
 
         {/* Full Reset Card */}
-      <Card>
+      <Card className="relative">
-        <CardHeader>
+        <CardHeader className="pb-12">
             <CardTitle>Full Reset</CardTitle>
             <CardDescription>
               Reset database, reimport all data, and recalculate metrics
@@ -653,7 +595,7 @@ export function DataManagement() {
               <AlertDialogTrigger asChild>
                 <Button 
                   variant="destructive"
-                    className="flex-1"
+                    className="absolute bottom-4 right-[50%] translate-x-[50%] w-3/4"
                     disabled={isUpdating || isResetting}
                 >
                   {isResetting ? (
@@ -690,7 +632,7 @@ export function DataManagement() {
             </AlertDialog>
 
               {isResetting && (
-                <Button variant="destructive" onClick={handleCancel}>
+                <Button variant="destructive" onClick={handleCancel} className="absolute top-4 right-4">
                   <X className="h-4 w-4" />
                 </Button>
               )}
@@ -801,7 +743,7 @@ export function DataManagement() {
         </div>
         
         {/* Recent Import History */}
-        <Card>
+        <Card className="!mt-0">
           <CardHeader className="pb-3">
             <CardTitle>Recent Imports</CardTitle>
           </CardHeader>

inventory/src/types/products.ts

@@ -43,6 +43,7 @@ export interface Product {
   gross_profit?: string;  // numeric(15,3)
   gmroi?: string;  // numeric(15,3)
   avg_lead_time_days?: string;  // numeric(15,3)
+  first_received_date?: string;
   last_received_date?: string;
   abc_class?: string;
   stock_status?: string;