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

2025-03-27 19:31:11 -04:00
parent 087ec710f6
commit a068a253cd
8 changed files with 227 additions and 81 deletions
--- a/inventory-server/scripts/reset-db.js
+++ b/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`);
                }
            }
--- a/inventory-server/scripts/reset-metrics.js
+++ b/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`);
--- a/inventory-server/src/routes/import.js
+++ b/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)) {
-      return res.status(404).json({ error: 'Uploads directory not found', path: uploadsDir });
+    const { directory = 'products' } = req.query;
+    
+    // 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 });
  }
 });

--- a/inventory/src/components/dashboard/Overview.tsx
+++ b/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>
+  );
+} 
--- a/inventory/src/components/dashboard/VendorPerformance.tsx
+++ b/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>
+    </>
+  )
+} 
--- a/inventory/src/components/settings/DataManagement.tsx
+++ b/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>
-        <CardHeader>
+      <Card className="relative">
+        <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>
-        <CardHeader>
+      <Card className="relative">
+        <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>
--- a/inventory/src/types/products.ts
+++ b/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;
--- a/inventory/tsconfig.tsbuildinfo
+++ b/inventory/tsconfig.tsbuildinfo