Add PO details accordion to purchase orders page

inventory-server/src/routes/purchase-orders.js

@@ -966,6 +966,164 @@ router.get('/order-vs-received', async (req, res) => {
   }
 });
 
+// Get purchase order items
+router.get('/:id/items', async (req, res) => {
+  try {
+    const pool = req.app.locals.pool;
+    const { id } = req.params;
+    
+    if (!id) {
+      return res.status(400).json({ error: 'Purchase order ID is required' });
+    }
+    
+    // Query to get purchase order items with product details
+    const { rows: items } = await pool.query(`
+      WITH po_items AS (
+        SELECT 
+          po.po_id,
+          po.pid,
+          po.sku,
+          COALESCE(po.name, p.title) as product_name,
+          po.po_cost_price,
+          po.ordered,
+          po.status
+        FROM purchase_orders po
+        LEFT JOIN products p ON po.pid = p.pid
+        WHERE po.po_id = $1
+      ),
+      receiving_items AS (
+        SELECT 
+          r.receiving_id,
+          r.pid,
+          r.sku,
+          SUM(r.qty_each) as received
+        FROM receivings r
+        WHERE r.receiving_id = $1
+        GROUP BY r.receiving_id, r.pid, r.sku
+      )
+      SELECT 
+        pi.po_id as id,
+        pi.pid,
+        pi.sku,
+        pi.product_name,
+        p.barcode,
+        pi.po_cost_price,
+        pi.ordered,
+        COALESCE(ri.received, 0) as received,
+        ROUND(pi.ordered * pi.po_cost_price, 2) as total_cost,
+        CASE
+          WHEN ri.received IS NULL THEN 'Not Received'
+          WHEN ri.received = 0 THEN 'Not Received'
+          WHEN ri.received < pi.ordered THEN 'Partially Received'
+          WHEN ri.received >= pi.ordered THEN 'Fully Received'
+        END as receiving_status
+      FROM po_items pi
+      LEFT JOIN receiving_items ri ON pi.pid = ri.pid AND pi.sku = ri.sku
+      LEFT JOIN products p ON pi.pid = p.pid
+      ORDER BY pi.product_name
+    `, [id]);
+    
+    // Parse numeric values
+    const parsedItems = items.map(item => ({
+      id: `${item.id}_${item.pid}`,
+      pid: item.pid,
+      product_name: item.product_name,
+      sku: item.sku,
+      upc: item.barcode || 'N/A',
+      ordered: Number(item.ordered) || 0,
+      received: Number(item.received) || 0,
+      po_cost_price: Number(item.po_cost_price) || 0,
+      total_cost: Number(item.total_cost) || 0,
+      receiving_status: item.receiving_status
+    }));
+    
+    res.json(parsedItems);
+  } catch (error) {
+    console.error('Error fetching purchase order items:', error);
+    res.status(500).json({ error: 'Failed to fetch purchase order items', details: error.message });
+  }
+});
+
+// Get receiving items
+router.get('/receiving/:id/items', async (req, res) => {
+  try {
+    const pool = req.app.locals.pool;
+    const { id } = req.params;
+    
+    if (!id) {
+      return res.status(400).json({ error: 'Receiving ID is required' });
+    }
+    
+    // Query to get receiving items with related PO information if available
+    const { rows: items } = await pool.query(`
+      WITH receiving_items AS (
+        SELECT 
+          r.receiving_id,
+          r.pid,
+          r.sku,
+          COALESCE(r.name, p.title) as product_name,
+          r.cost_each,
+          r.qty_each,
+          r.status
+        FROM receivings r
+        LEFT JOIN products p ON r.pid = p.pid
+        WHERE r.receiving_id = $1
+      ),
+      po_items AS (
+        SELECT 
+          po.po_id,
+          po.pid,
+          po.sku,
+          po.ordered,
+          po.po_cost_price
+        FROM purchase_orders po
+        WHERE po.po_id = $1
+      )
+      SELECT 
+        ri.receiving_id as id,
+        ri.pid,
+        ri.sku,
+        ri.product_name,
+        p.barcode,
+        COALESCE(po.ordered, 0) as ordered,
+        ri.qty_each as received,
+        COALESCE(po.po_cost_price, ri.cost_each) as po_cost_price,
+        ri.cost_each,
+        ROUND(ri.qty_each * ri.cost_each, 2) as total_cost,
+        CASE
+          WHEN po.ordered IS NULL THEN 'Receiving Only'
+          WHEN ri.qty_each < po.ordered THEN 'Partially Received'
+          WHEN ri.qty_each >= po.ordered THEN 'Fully Received'
+        END as receiving_status
+      FROM receiving_items ri
+      LEFT JOIN po_items po ON ri.pid = po.pid AND ri.sku = po.sku
+      LEFT JOIN products p ON ri.pid = p.pid
+      ORDER BY ri.product_name
+    `, [id]);
+    
+    // Parse numeric values
+    const parsedItems = items.map(item => ({
+      id: `${item.id}_${item.pid}`,
+      pid: item.pid,
+      product_name: item.product_name,
+      sku: item.sku,
+      upc: item.barcode || 'N/A',
+      ordered: Number(item.ordered) || 0,
+      received: Number(item.received) || 0,
+      po_cost_price: Number(item.po_cost_price) || 0,
+      cost_each: Number(item.cost_each) || 0,
+      qty_each: Number(item.received) || 0,
+      total_cost: Number(item.total_cost) || 0,
+      receiving_status: item.receiving_status
+    }));
+    
+    res.json(parsedItems);
+  } catch (error) {
+    console.error('Error fetching receiving items:', error);
+    res.status(500).json({ error: 'Failed to fetch receiving items', details: error.message });
+  }
+});
+
 // New endpoint for delivery metrics
 router.get('/delivery-metrics', async (req, res) => {
   try {

inventory/src/components/purchase-orders/PurchaseOrderAccordion.tsx

@@ -0,0 +1,211 @@
+import React, { useState, useEffect } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../ui/table";
+import { Skeleton } from "../ui/skeleton";
+
+// Define the structure of purchase order items
+interface PurchaseOrderItem {
+  id: string | number;
+  pid: string | number;
+  product_name: string;
+  sku: string;
+  upc: string;
+  ordered: number;
+  received: number;
+  po_cost_price: number;
+  cost_each?: number; // For receiving items
+  qty_each?: number; // For receiving items
+  total_cost: number;
+  receiving_status?: string;
+}
+
+interface PurchaseOrder {
+  id: number | string;
+  vendor_name: string;
+  order_date: string | null;
+  receiving_date: string | null;
+  status: number;
+  total_items: number;
+  total_quantity: number;
+  total_cost: number;
+  total_received: number;
+  fulfillment_rate: number;
+  short_note: string | null;
+  record_type: "po_only" | "po_with_receiving" | "receiving_only";
+}
+
+interface PurchaseOrderAccordionProps {
+  purchaseOrder: PurchaseOrder;
+  children: React.ReactNode;
+  rowClassName?: string;
+}
+
+export default function PurchaseOrderAccordion({
+  purchaseOrder,
+  children,
+  rowClassName,
+}: PurchaseOrderAccordionProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [items, setItems] = useState<PurchaseOrderItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  
+  // Clone the TableRow (children) and add the onClick handler and className
+  const enhancedRow = React.cloneElement(children as React.ReactElement, {
+    onClick: () => setIsOpen(!isOpen),
+    className: `${(children as React.ReactElement).props.className || ""} cursor-pointer ${isOpen ? 'bg-gray-100' : ''} ${rowClassName || ""}`.trim(),
+    "data-state": isOpen ? "open" : "closed"
+  });
+
+  // Format currency
+  const formatCurrency = (value: number) => {
+    return `$${value.toLocaleString("en-US", {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    })}`;
+  };
+
+  useEffect(() => {
+    // Only fetch items when the accordion is open
+    if (!isOpen) return;
+
+    const fetchItems = async () => {
+      setLoading(true);
+      setError(null);
+      
+      try {
+        // Endpoint path will depend on the type of record
+        const endpoint = purchaseOrder.record_type === "receiving_only" 
+          ? `/api/purchase-orders/receiving/${purchaseOrder.id}/items`
+          : `/api/purchase-orders/${purchaseOrder.id}/items`;
+          
+        const response = await fetch(endpoint);
+        
+        if (!response.ok) {
+          throw new Error(`Failed to fetch items: ${response.statusText}`);
+        }
+        
+        const data = await response.json();
+        setItems(data);
+      } catch (err) {
+        console.error("Error fetching purchase order items:", err);
+        setError(err instanceof Error ? err.message : "Unknown error occurred");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchItems();
+  }, [purchaseOrder.id, purchaseOrder.record_type, isOpen]);
+  
+  // Render purchase order items list
+  const renderItemsList = () => {
+    if (error) {
+      return (
+        <div className="p-4 text-red-500">
+          Error loading items: {error}
+        </div>
+      );
+    }
+
+    return (
+      <div className="max-h-[350px] overflow-y-auto bg-gray-50 rounded-md p-2">
+        <Table className="w-full">
+          <TableHeader className="bg-white sticky top-0 z-10">
+            <TableRow>
+              <TableHead className="w-[100px]">SKU</TableHead>
+              <TableHead className="w-auto">Product</TableHead>
+              <TableHead className="w-[100px] text-right">UPC</TableHead>
+              <TableHead className="w-[80px] text-right">Ordered</TableHead>
+              <TableHead className="w-[80px] text-right">Received</TableHead>
+              <TableHead className="w-[100px] text-right">Unit Cost</TableHead>
+              <TableHead className="w-[100px] text-right">Total Cost</TableHead>
+              {purchaseOrder.record_type !== "po_only" && (
+                <TableHead className="w-[120px] text-right">Status</TableHead>
+              )}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              // Loading skeleton
+              Array(5).fill(0).map((_, i) => (
+                <TableRow key={`skeleton-${i}`}>
+                  <TableCell><Skeleton className="h-5 w-full" /></TableCell>
+                  <TableCell><Skeleton className="h-5 w-full" /></TableCell>
+                  <TableCell><Skeleton className="h-5 w-full" /></TableCell>
+                  <TableCell><Skeleton className="h-5 w-full" /></TableCell>
+                  <TableCell><Skeleton className="h-5 w-full" /></TableCell>
+                  <TableCell><Skeleton className="h-5 w-full" /></TableCell>
+                  <TableCell><Skeleton className="h-5 w-full" /></TableCell>
+                  {purchaseOrder.record_type !== "po_only" && (
+                    <TableCell><Skeleton className="h-5 w-full" /></TableCell>
+                  )}
+                </TableRow>
+              ))
+            ) : (
+              items.map((item) => (
+                <TableRow key={item.id} className="hover:bg-gray-100">
+                  <TableCell className="font-mono text-xs">{item.sku}</TableCell>
+                  <TableCell className="font-medium">{item.product_name}</TableCell>
+                  <TableCell className="text-right font-mono text-xs">{item.upc}</TableCell>
+                  <TableCell className="text-right">
+                    {item.ordered}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    {item.received || 0}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    {formatCurrency(item.po_cost_price || item.cost_each || 0)}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    {formatCurrency(item.total_cost)}
+                  </TableCell>
+                  {purchaseOrder.record_type !== "po_only" && (
+                    <TableCell className="text-right">
+                      {item.receiving_status || "Unknown"}
+                    </TableCell>
+                  )}
+                </TableRow>
+              ))
+            )}
+            
+            {!loading && items.length === 0 && (
+              <TableRow>
+                <TableCell colSpan={purchaseOrder.record_type === "po_only" ? 7 : 8} className="text-center py-4 text-muted-foreground">
+                  No items found for this order
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    );
+  };
+  
+  return (
+    <>
+      {/* First render the row which will serve as the trigger */}
+      {enhancedRow}
+      
+      {/* Then render the accordion content conditionally if open */}
+      {isOpen && (
+        <TableRow className="p-0 border-0">
+          <TableCell colSpan={12} className="p-0 border-0">
+            <div className="pt-2 pb-4 px-4 bg-gray-50 border-t border-b">
+              <div className="mb-2 text-sm text-muted-foreground">
+                {purchaseOrder.total_items} product{purchaseOrder.total_items !== 1 ? "s" : ""} in this {purchaseOrder.record_type === "receiving_only" ? "receiving" : "purchase order"}
+              </div>
+              {renderItemsList()}
+            </div>
+          </TableCell>
+        </TableRow>
+      )}
+    </>
+  );
+} 

inventory/src/components/purchase-orders/PurchaseOrdersTable.tsx

@@ -28,6 +28,7 @@ import {
   CardHeader,
   CardTitle,
 } from "../ui/card";
+import PurchaseOrderAccordion from "./PurchaseOrderAccordion";
 
 interface PurchaseOrder {
   id: number | string;
@@ -332,10 +333,12 @@ export default function PurchaseOrdersTable({
                   rowClassName = "border-l-4 border-l-amber-500";
                 }
                 return (
-                  <TableRow
+                  <PurchaseOrderAccordion
                     key={`${po.id}-${po.record_type}`}
-                    className={rowClassName}
+                    purchaseOrder={po}
+                    rowClassName={rowClassName}
                   >
+                    <TableRow>
                       <TableCell className="text-center">
                         {getRecordTypeIndicator(po.record_type)}
                       </TableCell>
@@ -389,11 +392,9 @@ export default function PurchaseOrdersTable({
                             )
                           : ""}
                       </TableCell>
-
                       <TableCell className="text-center">
                         {po.total_quantity.toLocaleString()}
                       </TableCell>
-
                       <TableCell className="text-center">
                         {po.total_received.toLocaleString()}
                       </TableCell>
@@ -403,6 +404,7 @@ export default function PurchaseOrdersTable({
                           : formatPercent(po.fulfillment_rate)}
                       </TableCell>
                     </TableRow>
+                  </PurchaseOrderAccordion>
                 );
               })
             ) : (