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

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>
-        <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>

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;