Rearrange vendors and purchase orders page content, fix pagination

2025-01-17 00:53:58 -05:00
parent 0ba7d9f533
commit 2235121761
4 changed files with 133 additions and 117 deletions
--- a/inventory-server/src/routes/vendors.js
+++ b/inventory-server/src/routes/vendors.js
@@ -15,39 +15,43 @@ router.get('/', async (req, res) => {
    const sortDirection = req.query.sortDirection || 'asc';

    // Build the WHERE clause based on filters
-    const whereConditions = [];
+    const whereConditions = ['p.vendor IS NOT NULL AND p.vendor != \'\''];
    const params = [];

    if (search) {
-      whereConditions.push('(LOWER(p.vendor) LIKE LOWER(?) OR LOWER(vd.contact_name) LIKE LOWER(?))');
-      params.push(`%${search}%`, `%${search}%`);
+      whereConditions.push('LOWER(p.vendor) LIKE LOWER(?)');
+      params.push(`%${search}%`);
    }

    if (status !== 'all') {
-      whereConditions.push('vm.status = ?');
+      whereConditions.push(`
+        CASE 
+          WHEN COALESCE(vm.total_orders, 0) > 0 AND COALESCE(vm.order_fill_rate, 0) >= 75 THEN 'active'
+          WHEN COALESCE(vm.total_orders, 0) > 0 THEN 'inactive'
+          ELSE 'pending'
+        END = ?
+      `);
      params.push(status);
    }

    if (performance !== 'all') {
      switch (performance) {
        case 'excellent':
-          whereConditions.push('vm.order_fill_rate >= 95');
+          whereConditions.push('COALESCE(vm.order_fill_rate, 0) >= 95');
          break;
        case 'good':
-          whereConditions.push('vm.order_fill_rate >= 85 AND vm.order_fill_rate < 95');
+          whereConditions.push('COALESCE(vm.order_fill_rate, 0) >= 85 AND COALESCE(vm.order_fill_rate, 0) < 95');
          break;
        case 'fair':
-          whereConditions.push('vm.order_fill_rate >= 75 AND vm.order_fill_rate < 85');
+          whereConditions.push('COALESCE(vm.order_fill_rate, 0) >= 75 AND COALESCE(vm.order_fill_rate, 0) < 85');
          break;
        case 'poor':
-          whereConditions.push('vm.order_fill_rate < 75');
+          whereConditions.push('COALESCE(vm.order_fill_rate, 0) < 75');
          break;
      }
    }

-    const whereClause = whereConditions.length > 0 
-      ? 'WHERE ' + whereConditions.join(' AND ')
-      : '';
+    const whereClause = 'WHERE ' + whereConditions.join(' AND ');

    // Get total count for pagination
    const [countResult] = await pool.query(`
@@ -59,57 +63,105 @@ router.get('/', async (req, res) => {

    // Get vendors with metrics
    const [vendors] = await pool.query(`
-      SELECT 
+      SELECT DISTINCT
        p.vendor as name,
-        vd.contact_name,
-        vd.email,
-        vd.phone,
-        vm.status,
-        vm.avg_lead_time_days,
-        vm.on_time_delivery_rate,
-        vm.order_fill_rate,
-        vm.total_orders,
-        COUNT(DISTINCT p.product_id) as active_products
+        COALESCE(vm.active_products, 0) as active_products,
+        COALESCE(vm.total_orders, 0) as total_orders,
+        COALESCE(vm.avg_lead_time_days, 0) as avg_lead_time_days,
+        COALESCE(vm.on_time_delivery_rate, 0) as on_time_delivery_rate,
+        COALESCE(vm.order_fill_rate, 0) as order_fill_rate,
+        CASE 
+          WHEN COALESCE(vm.total_orders, 0) > 0 AND COALESCE(vm.order_fill_rate, 0) >= 75 THEN 'active'
+          WHEN COALESCE(vm.total_orders, 0) > 0 THEN 'inactive'
+          ELSE 'pending'
+        END as status
      FROM products p
      LEFT JOIN vendor_metrics vm ON p.vendor = vm.vendor
-      LEFT JOIN vendor_details vd ON p.vendor = vd.vendor
      ${whereClause}
-      GROUP BY p.vendor
+      AND p.vendor IS NOT NULL AND p.vendor != ''
      ORDER BY ${sortColumn} ${sortDirection}
      LIMIT ? OFFSET ?
    `, [...params, limit, offset]);

+    // Get cost metrics for these vendors
+    const vendorNames = vendors.map(v => v.name);
+    const [costMetrics] = await pool.query(`
+      SELECT 
+        vendor,
+        ROUND(SUM(ordered * cost_price) / NULLIF(SUM(ordered), 0), 2) as avg_unit_cost,
+        SUM(ordered * cost_price) as total_spend
+      FROM purchase_orders
+      WHERE status = 'closed'
+        AND cost_price IS NOT NULL
+        AND ordered > 0
+        AND vendor IN (?)
+      GROUP BY vendor
+    `, [vendorNames]);
+
+    // Create a map of cost metrics by vendor
+    const costMetricsMap = costMetrics.reduce((acc, curr) => {
+      acc[curr.vendor] = {
+        avg_unit_cost: curr.avg_unit_cost,
+        total_spend: curr.total_spend
+      };
+      return acc;
+    }, {});
+
    // Get overall stats
    const [stats] = await pool.query(`
      SELECT 
        COUNT(DISTINCT p.vendor) as totalVendors,
-        COUNT(DISTINCT CASE WHEN vm.status = 'active' THEN p.vendor END) as activeVendors,
-        COALESCE(ROUND(AVG(NULLIF(vm.avg_lead_time_days, 0)), 1), 0) as avgLeadTime,
-        COALESCE(ROUND(AVG(NULLIF(vm.order_fill_rate, 0)), 1), 0) as avgFillRate,
-        COALESCE(ROUND(AVG(NULLIF(vm.on_time_delivery_rate, 0)), 1), 0) as avgOnTimeDelivery
+        COUNT(DISTINCT CASE 
+          WHEN COALESCE(vm.total_orders, 0) > 0 AND COALESCE(vm.order_fill_rate, 0) >= 75 
+          THEN p.vendor 
+        END) as activeVendors,
+        ROUND(AVG(NULLIF(vm.avg_lead_time_days, 0)), 1) as avgLeadTime,
+        ROUND(AVG(NULLIF(vm.order_fill_rate, 0)), 1) as avgFillRate,
+        ROUND(AVG(NULLIF(vm.on_time_delivery_rate, 0)), 1) as avgOnTimeDelivery
      FROM products p
      LEFT JOIN vendor_metrics vm ON p.vendor = vm.vendor
+      WHERE p.vendor IS NOT NULL AND p.vendor != ''
+    `);
+
+    // Get overall cost metrics
+    const [overallCostMetrics] = await pool.query(`
+      SELECT 
+        ROUND(SUM(ordered * cost_price) / NULLIF(SUM(ordered), 0), 2) as avg_unit_cost,
+        SUM(ordered * cost_price) as total_spend
+      FROM purchase_orders
+      WHERE status = 'closed'
+        AND cost_price IS NOT NULL
+        AND ordered > 0
+        AND vendor IS NOT NULL AND vendor != ''
    `);

    res.json({
      vendors: vendors.map(vendor => ({
-        ...vendor,
+        vendor_id: vendor.vendor_id || vendor.name,
+        name: vendor.name,
+        status: vendor.status,
        avg_lead_time_days: parseFloat(vendor.avg_lead_time_days || 0),
        on_time_delivery_rate: parseFloat(vendor.on_time_delivery_rate || 0),
        order_fill_rate: parseFloat(vendor.order_fill_rate || 0),
        total_orders: parseInt(vendor.total_orders || 0),
-        active_products: parseInt(vendor.active_products || 0)
+        active_products: parseInt(vendor.active_products || 0),
+        avg_unit_cost: parseFloat(costMetricsMap[vendor.name]?.avg_unit_cost || 0),
+        total_spend: parseFloat(costMetricsMap[vendor.name]?.total_spend || 0)
      })),
      stats: {
-        ...stats[0],
+        totalVendors: parseInt(stats[0].totalVendors || 0),
+        activeVendors: parseInt(stats[0].activeVendors || 0),
        avgLeadTime: parseFloat(stats[0].avgLeadTime || 0),
        avgFillRate: parseFloat(stats[0].avgFillRate || 0),
-        avgOnTimeDelivery: parseFloat(stats[0].avgOnTimeDelivery || 0)
+        avgOnTimeDelivery: parseFloat(stats[0].avgOnTimeDelivery || 0),
+        avgUnitCost: parseFloat(overallCostMetrics[0].avg_unit_cost || 0),
+        totalSpend: parseFloat(overallCostMetrics[0].total_spend || 0)
      },
      pagination: {
-        total: countResult[0].total,
-        pages: Math.ceil(countResult[0].total / limit),
-        current: page,
+        total: parseInt(countResult[0].total || 0),
+        currentPage: page,
+        pages: Math.ceil(parseInt(countResult[0].total || 0) / limit),
+        limit
      }
    });
  } catch (error) {
--- a/inventory/src/pages/Categories.tsx
+++ b/inventory/src/pages/Categories.tsx
@@ -37,7 +37,7 @@ export function Categories() {
    parent: "all",
    performance: "all",
  });
-  const [sorting, setSorting] = useState({
+  const [] = useState({
    column: 'name',
    direction: 'asc'
  });
--- a/inventory/src/pages/PurchaseOrders.tsx
+++ b/inventory/src/pages/PurchaseOrders.tsx
@@ -87,7 +87,7 @@ interface PurchaseOrdersResponse {

 export default function PurchaseOrders() {
  const [purchaseOrders, setPurchaseOrders] = useState<PurchaseOrder[]>([]);
-  const [vendorMetrics, setVendorMetrics] = useState<VendorMetrics[]>([]);
+  const [, setVendorMetrics] = useState<VendorMetrics[]>([]);
  const [costAnalysis, setCostAnalysis] = useState<CostAnalysis | null>(null);
  const [summary, setSummary] = useState<ReceivingStatus | null>(null);
  const [loading, setLoading] = useState(true);
@@ -391,39 +391,6 @@ export default function PurchaseOrders() {
        </div>
      )}

-      {/* Vendor Performance */}
-      <Card className="mb-6">
-        <CardHeader>
-          <CardTitle>Vendor Performance</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Vendor</TableHead>
-                <TableHead>Total Orders</TableHead>
-                <TableHead>Avg Delivery Days</TableHead>
-                <TableHead>Fulfillment Rate</TableHead>
-                <TableHead>Avg Unit Cost</TableHead>
-                <TableHead>Total Spend</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {vendorMetrics.map((vendor) => (
-                <TableRow key={vendor.vendor_name}>
-                  <TableCell>{vendor.vendor_name}</TableCell>
-                  <TableCell>{vendor.total_orders.toLocaleString()}</TableCell>
-                  <TableCell>{vendor.avg_delivery_days?.toFixed(1) || 'N/A'}</TableCell>
-                  <TableCell>{formatPercent(vendor.fulfillment_rate)}</TableCell>
-                  <TableCell>${formatNumber(vendor.avg_unit_cost)}</TableCell>
-                  <TableCell>${formatNumber(vendor.total_spend)}</TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </CardContent>
-      </Card>
-
      {/* Cost Analysis */}
      <Card>
        <CardHeader>
--- a/inventory/src/pages/Vendors.tsx
+++ b/inventory/src/pages/Vendors.tsx
@@ -12,15 +12,14 @@ import config from "../config";
 interface Vendor {
  vendor_id: number;
  name: string;
-  contact_name: string;
-  email: string;
-  phone: string;
  status: string;
  avg_lead_time_days: number;
  on_time_delivery_rate: number;
  order_fill_rate: number;
  total_orders: number;
  active_products: number;
+  avg_unit_cost: number;
+  total_spend: number;
 }

 interface VendorFilters {
@@ -38,15 +37,26 @@ export function Vendors() {
    status: "all",
    performance: "all",
  });
-  const [sorting, setSorting] = useState({
+  const [] = useState({
    column: 'name',
    direction: 'asc'
  });

  const { data, isLoading } = useQuery({
-    queryKey: ["vendors"],
+    queryKey: ["vendors", page, filters, sortColumn, sortDirection],
    queryFn: async () => {
-      const response = await fetch(`${config.apiUrl}/vendors`);
+      const params = new URLSearchParams({
+        page: page.toString(),
+        limit: '50',
+        search: filters.search,
+        status: filters.status,
+        performance: filters.performance,
+        sortColumn,
+        sortDirection
+      });
+      const response = await fetch(`${config.apiUrl}/vendors?${params}`, {
+        credentials: 'include'
+      });
      if (!response.ok) throw new Error("Failed to fetch vendors");
      return response.json();
    },
@@ -62,9 +72,7 @@ export function Vendors() {
    if (filters.search) {
      const searchLower = filters.search.toLowerCase();
      filtered = filtered.filter(vendor => 
-        vendor.name.toLowerCase().includes(searchLower) ||
-        vendor.contact_name?.toLowerCase().includes(searchLower) ||
-        vendor.email?.toLowerCase().includes(searchLower)
+        vendor.name.toLowerCase().includes(searchLower)
      );
    }

@@ -108,27 +116,15 @@ export function Vendors() {

  // Calculate pagination
  const paginatedData = useMemo(() => {
-    const startIndex = (page - 1) * 50;
-    return filteredData.slice(startIndex, startIndex + 50);
-  }, [filteredData, page]);
+    if (!data?.vendors) return [];
+    return data.vendors;
+  }, [data?.vendors]);

  // Calculate stats from filtered data
  const stats = useMemo(() => {
-    if (!filteredData.length) return data?.stats;
-
-    const activeVendors = filteredData.filter(v => v.status === 'active').length;
-    const leadTimes = filteredData.map(v => v.avg_lead_time_days || 0).filter(lt => lt !== 0);
-    const fillRates = filteredData.map(v => v.order_fill_rate || 0).filter(fr => fr !== 0);
-    const onTimeRates = filteredData.map(v => v.on_time_delivery_rate || 0).filter(otr => otr !== 0);
-
-    return {
-      totalVendors: filteredData.length,
-      activeVendors,
-      avgLeadTime: leadTimes.length ? leadTimes.reduce((a, b) => a + b, 0) / leadTimes.length : 0,
-      avgFillRate: fillRates.length ? fillRates.reduce((a, b) => a + b, 0) / fillRates.length : 0,
-      avgOnTimeDelivery: onTimeRates.length ? onTimeRates.reduce((a, b) => a + b, 0) / onTimeRates.length : 0
-    };
-  }, [filteredData, data?.stats]);
+    if (!data?.stats) return null;
+    return data.stats;
+  }, [data?.stats]);

  const handleSort = (column: keyof Vendor) => {
    setSortDirection(prev => {
@@ -186,36 +182,38 @@ export function Vendors() {

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Avg Lead Time</CardTitle>
+            <CardTitle className="text-sm font-medium">Total Spend</CardTitle>
          </CardHeader>
          <CardContent>
-            <div className="text-2xl font-bold">{typeof stats?.avgLeadTime === 'number' ? stats.avgLeadTime.toFixed(1) : "..."} days</div>
+            <div className="text-2xl font-bold">
+              ${typeof stats?.totalSpend === 'number' ? stats.totalSpend.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 }) : "..."}
+            </div>
            <p className="text-xs text-muted-foreground">
-              Across all vendors
+              Avg unit cost: ${typeof stats?.avgUnitCost === 'number' ? stats.avgUnitCost.toFixed(2) : "..."}
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Fill Rate</CardTitle>
+            <CardTitle className="text-sm font-medium">Performance</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{typeof stats?.avgFillRate === 'number' ? stats.avgFillRate.toFixed(1) : "..."}%</div>
            <p className="text-xs text-muted-foreground">
-              Average order fill rate
+              Fill rate / {typeof stats?.avgOnTimeDelivery === 'number' ? stats.avgOnTimeDelivery.toFixed(1) : "..."}% on-time
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">On-Time Delivery</CardTitle>
+            <CardTitle className="text-sm font-medium">Lead Time</CardTitle>
          </CardHeader>
          <CardContent>
-            <div className="text-2xl font-bold">{typeof stats?.avgOnTimeDelivery === 'number' ? stats.avgOnTimeDelivery.toFixed(1) : "..."}%</div>
+            <div className="text-2xl font-bold">{typeof stats?.avgLeadTime === 'number' ? stats.avgLeadTime.toFixed(1) : "..."} days</div>
            <p className="text-xs text-muted-foreground">
-              Average on-time rate
+              Average delivery time
            </p>
          </CardContent>
        </Card>
@@ -265,12 +263,13 @@ export function Vendors() {
        <Table>
          <TableHeader>
            <TableRow>
-              <TableHead onClick={() => handleSort("name")} className="cursor-pointer">Name</TableHead>
-              <TableHead onClick={() => handleSort("contact_name")} className="cursor-pointer">Contact</TableHead>
+              <TableHead onClick={() => handleSort("name")} className="cursor-pointer">Vendor</TableHead>
              <TableHead onClick={() => handleSort("status")} className="cursor-pointer">Status</TableHead>
              <TableHead onClick={() => handleSort("avg_lead_time_days")} className="cursor-pointer">Lead Time</TableHead>
-              <TableHead onClick={() => handleSort("on_time_delivery_rate")} className="cursor-pointer">On-Time Rate</TableHead>
+              <TableHead onClick={() => handleSort("on_time_delivery_rate")} className="cursor-pointer">On-Time %</TableHead>
              <TableHead onClick={() => handleSort("order_fill_rate")} className="cursor-pointer">Fill Rate</TableHead>
+              <TableHead onClick={() => handleSort("avg_unit_cost")} className="cursor-pointer">Avg Unit Cost</TableHead>
+              <TableHead onClick={() => handleSort("total_spend")} className="cursor-pointer">Total Spend</TableHead>
              <TableHead onClick={() => handleSort("total_orders")} className="cursor-pointer">Orders</TableHead>
              <TableHead onClick={() => handleSort("active_products")} className="cursor-pointer">Products</TableHead>
            </TableRow>
@@ -278,17 +277,13 @@ export function Vendors() {
          <TableBody>
            {isLoading ? (
              <TableRow>
-                <TableCell colSpan={8} className="text-center py-8">
+                <TableCell colSpan={9} className="text-center py-8">
                  Loading vendors...
                </TableCell>
              </TableRow>
            ) : paginatedData.map((vendor: Vendor) => (
              <TableRow key={vendor.vendor_id}>
                <TableCell className="font-medium">{vendor.name}</TableCell>
-                <TableCell>
-                  <div>{vendor.contact_name}</div>
-                  <div className="text-sm text-muted-foreground">{vendor.email}</div>
-                </TableCell>
                <TableCell>{vendor.status}</TableCell>
                <TableCell>{typeof vendor.avg_lead_time_days === 'number' ? vendor.avg_lead_time_days.toFixed(1) : "0.0"} days</TableCell>
                <TableCell>{typeof vendor.on_time_delivery_rate === 'number' ? vendor.on_time_delivery_rate.toFixed(1) : "0.0"}%</TableCell>
@@ -300,13 +295,15 @@ export function Vendors() {
                    {getPerformanceBadge(vendor.order_fill_rate ?? 0)}
                  </div>
                </TableCell>
+                <TableCell>${typeof vendor.avg_unit_cost === 'number' ? vendor.avg_unit_cost.toFixed(2) : "0.00"}</TableCell>
+                <TableCell>${typeof vendor.total_spend === 'number' ? vendor.total_spend.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 }) : "0"}</TableCell>
                <TableCell>{vendor.total_orders?.toLocaleString() ?? 0}</TableCell>
                <TableCell>{vendor.active_products?.toLocaleString() ?? 0}</TableCell>
              </TableRow>
            ))}
            {!isLoading && !paginatedData.length && (
              <TableRow>
-                <TableCell colSpan={8} className="text-center py-8 text-muted-foreground">
+                <TableCell colSpan={9} className="text-center py-8 text-muted-foreground">
                  No vendors found
                </TableCell>
              </TableRow>
@@ -315,7 +312,7 @@ export function Vendors() {
        </Table>
      </div>

-      {filteredData.length > 0 && (
+      {data?.pagination && data.pagination.total > 0 && (
        <motion.div 
          layout="position"
          transition={{ duration: 0.15 }}
@@ -333,7 +330,7 @@ export function Vendors() {
                  aria-disabled={page === 1}
                />
              </PaginationItem>
-              {Array.from({ length: Math.ceil(filteredData.length / 50) }, (_, i) => (
+              {Array.from({ length: data.pagination.pages }, (_, i) => (
                <PaginationItem key={i + 1}>
                  <PaginationLink
                    href="#"
@@ -352,9 +349,9 @@ export function Vendors() {
                  href="#"
                  onClick={(e) => {
                    e.preventDefault();
-                    if (page < Math.ceil(filteredData.length / 50)) setPage(p => p + 1);
+                    if (page < data.pagination.pages) setPage(p => p + 1);
                  }}
-                  aria-disabled={page >= Math.ceil(filteredData.length / 50)}
+                  aria-disabled={page >= data.pagination.pages}
                />
              </PaginationItem>
            </PaginationContent>