From 3bbf53c0abf507ad22a49438a8446a79169d2d4d Mon Sep 17 00:00:00 2001
From: "[dyad]" <git@dyad.sh>
Date: Fri, 12 Sep 2025 11:44:36 +0200
Subject: [PATCH] [dyad] wrote 1 file(s)

---
 .../PurchaseOrderDataTable.tsx                | 92 +++++++++++++------
 1 file changed, 65 insertions(+), 27 deletions(-)

diff --git a/src/components/purchase-orders/PurchaseOrderDataTable.tsx b/src/components/purchase-orders/PurchaseOrderDataTable.tsx
index 213ad45..acbb81f 100644
--- a/src/components/purchase-orders/PurchaseOrderDataTable.tsx
+++ b/src/components/purchase-orders/PurchaseOrderDataTable.tsx
@@ -13,7 +13,7 @@ import {
   getSortedRowModel,
   useReactTable,
 } from "@tanstack/react-table"
-import { Columns } from "lucide-react"
+import { Columns, Download, Eye } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
@@ -24,9 +24,9 @@ import {
 import { jsPDF } from "jspdf"
 import { ReceiveStockDialog } from "./ReceiveStockDialog"
 import pb from "@/lib/pocketbase"
-import { createColumns, PurchaseOrder } from "./columns" // Import createColumns and PurchaseOrder type
+import { createColumns, PurchaseOrder } from "./columns"
 import {
-  Dialog, // Import Dialog components
+  Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
@@ -43,7 +43,7 @@ interface PurchaseOrderDataTableProps<TData, TValue> {
 }
 
 export function PurchaseOrderDataTable<TData, TValue>({
-  columns: columnsProp, // Rename to avoid conflict
+  columns: columnsProp,
   data,
   filterValue,
   onFilterChange,
@@ -64,7 +64,7 @@ export function PurchaseOrderDataTable<TData, TValue>({
   const [rowSelection, setRowSelection] = React.useState({})
   const [receiveDialogOpen, setReceiveDialogOpen] = React.useState(false)
   const [selectedOrder, setSelectedOrder] = React.useState<PurchaseOrder | null>(null)
-  const [viewDialogOpen, setViewDialogOpen] = React.useState(false) // State for the view dialog
+  const [viewDialogOpen, setViewDialogOpen] = React.useState(false)
 
   const openReceiveDialog = (order: PurchaseOrder) => {
     setSelectedOrder(order)
@@ -96,13 +96,54 @@ export function PurchaseOrderDataTable<TData, TValue>({
     doc.text(`Status: ${order.status}`, 14, 50)
     doc.text("Items:", 14, 60)
 
-    let y = 70
+    // Move table header down from 185 to 215
+    const tableHeaderY = 215
+    const tableRowStartY = 230
+
+    // Table Header
+    doc.setFillColor("#F3F4F6")
+    doc.rect(10, tableHeaderY, 190, 10, "F")
+    doc.setTextColor("#333333")
+    doc.setFontSize(11)
+    doc.text("Item #", 15, tableHeaderY + 6)
+    doc.text("Description", 55, tableHeaderY + 6)
+    doc.text("Qty", 140, tableHeaderY + 6)
+    doc.text("Unit Price", 170, tableHeaderY + 6)
+    doc.text("Total", 190, tableHeaderY + 6)
+
+    // Table Rows
+    let yItems = tableRowStartY
     order.items.forEach((item, index) => {
-      doc.text(`${index + 1}. ${item.itemName} - Qty: ${item.quantity}`, 14, y)
-      doc.text(item.sku, 70, y);
-      y += 10
+      doc.text(String(index + 1), 15, yItems)
+      doc.text(item.itemName, 55, yItems)
+      doc.text(String(item.quantity), 140, yItems)
+      doc.text("£75.00", 170, yItems) // Placeholder Unit Price
+      doc.text("£75.00", 190, yItems) // Placeholder Total
+      yItems += 10
     })
 
+    // Totals Section
+    const totalsYStart = yItems + 10
+    doc.setTextColor("#333333")
+    doc.setFontSize(10)
+    doc.text("Subtotal", 140, totalsYStart)
+    doc.text("£2,325.00", 170, totalsYStart)
+    doc.text("Tax", 140, totalsYStart + 10)
+    doc.text("£0", 170, totalsYStart + 10)
+    doc.text("Shipping", 140, totalsYStart + 20)
+    doc.text("£0", 170, totalsYStart + 20)
+    doc.text("Other", 140, totalsYStart + 30)
+    doc.text("£0", 170, totalsYStart + 30)
+
+    doc.setLineWidth(0.5)
+    doc.setDrawColor("#FFC905")
+    doc.line(140, totalsYStart + 40, 205, totalsYStart + 40)
+
+    doc.setTextColor("#FFC905")
+    doc.setFontSize(14)
+    doc.text("Total", 140, totalsYStart + 50)
+    doc.text("£2,325.00", 170, totalsYStart + 50)
+
     doc.save(`purchase_order_${order.id}.pdf`)
   }
 
@@ -126,9 +167,9 @@ export function PurchaseOrderDataTable<TData, TValue>({
 
   const columnsWithActions = React.useMemo(() => createColumns({ onDownloadPdf: generatePDF, onViewOrder: handleViewOrder }), [generatePDF, handleViewOrder]);
 
-  const table = useReactTable<PurchaseOrder>({ // Specify TData as PurchaseOrder
-    data: data as PurchaseOrder[], // Explicitly type data as PurchaseOrder[]
-    columns: columnsWithActions, // Use the columns with actions
+  const table = useReactTable<PurchaseOrder>({
+    data: data as PurchaseOrder[],
+    columns: columnsWithActions,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     onSortingChange: setSorting,
@@ -145,7 +186,6 @@ export function PurchaseOrderDataTable<TData, TValue>({
     },
   })
 
-  // Sync external filter value with the table's internal state
   React.useEffect(() => {
     table.getColumn("supplierName")?.setFilterValue(filterValue)
   }, [filterValue, table])
@@ -174,20 +214,18 @@ export function PurchaseOrderDataTable<TData, TValue>({
                 .filter(
                   (column) => column.getCanHide()
                 )
-                .map((column) => {
-                  return (
-                    <DropdownMenuCheckboxItem
-                      key={column.id}
-                      className="capitalize"
-                      checked={column.getIsVisible()}
-                      onCheckedChange={(value) =>
-                        column.toggleVisibility(!!value)
-                      }
-                    >
-                      {column.id}
-                    </DropdownMenuCheckboxItem>
-                  )
-                })}
+                .map((column) => (
+                  <DropdownMenuCheckboxItem
+                    key={column.id}
+                    className="capitalize"
+                    checked={column.getIsVisible()}
+                    onCheckedChange={(value) =>
+                      column.toggleVisibility(!!value)
+                    }
+                  >
+                    {column.id}
+                  </DropdownMenuCheckboxItem>
+                ))}
             </DropdownMenuContent>
           </DropdownMenu>
         </div>