From 3e307807d8da546df1021216f0a9e2ad10a79b52 Mon Sep 17 00:00:00 2001 From: "[dyad]" Date: Fri, 12 Sep 2025 11:13:25 +0200 Subject: [PATCH] [dyad] wrote 4 file(s) --- .../PurchaseOrderDataTable.tsx | 10 +- src/pages/PurchaseOrders.tsx | 284 +----------------- 2 files changed, 5 insertions(+), 289 deletions(-) diff --git a/src/components/purchase-orders/PurchaseOrderDataTable.tsx b/src/components/purchase-orders/PurchaseOrderDataTable.tsx index fc4907e..b6f3885 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" // This import is not directly used in the component, but might be used elsewhere. Renaming it is not necessary here. +import { Columns } from "lucide-react" import { Button } from "@/components/ui/button" import { DropdownMenu, @@ -35,7 +35,7 @@ interface PurchaseOrderDataTableProps { } export function PurchaseOrderDataTable({ - columns: columnsProp, // Renamed prop to avoid conflict with lucide-react Columns import + columns: columnsProp, // Rename to avoid conflict data, filterValue, onFilterChange, @@ -105,12 +105,11 @@ export function PurchaseOrderDataTable({ } } - // Use createColumns and pass the generatePDF function const columnsWithActions = React.useMemo(() => createColumns({ onDownloadPdf: generatePDF }), [generatePDF]); const table = useReactTable({ // Specify TData as PurchaseOrder - data, - columns: columnsWithActions, // Use the columns with actions + data, // Now 'data' (which is PurchaseOrder[]) is correctly assigned to the 'data' parameter of useReactTable + columns: columnsWithActions, // Use the correctly memoized columns getCoreRowModel: getCoreRowModel(), getPaginationRowModel: getPaginationRowModel(), onSortingChange: setSorting, @@ -222,7 +221,6 @@ export function PurchaseOrderDataTable({ }) ) : ( - {/* Use table.getAllColumns().length for colSpan */} No results. )} diff --git a/src/pages/PurchaseOrders.tsx b/src/pages/PurchaseOrders.tsx index 6b3a065..d1f3b41 100644 --- a/src/pages/PurchaseOrders.tsx +++ b/src/pages/PurchaseOrders.tsx @@ -98,286 +98,4 @@ const PurchaseOrders = () => { ); }; -export default PurchaseOrders; - - -Here's a summary of the fixes: - -1. **`src/components/purchase-orders/columns.tsx`:** - * Ensured `createColumns` is correctly exported. - * Fixed the closing tag for `DropdownMenuItem`. - -2. **`src/components/purchase-orders/PurchaseOrderDataTable.tsx`:** - * Corrected the import statement to use `createColumns` and `PurchaseOrder`. - * Specified `PurchaseOrder` as the generic type for `useReactTable`. - * Used `columnsWithActions` (the result of `createColumns`) when configuring `useReactTable`. - * Fixed the `colSpan` in the "No results" row to use `table.getAllColumns().length`. - -3. **`src/pages/PurchaseOrders.tsx`:** - * Corrected the import statement to use `createColumns` and `PurchaseOrder`. - * Called `createColumns` correctly, passing the `onDownloadPdf` handler. - * Passed the resulting `columns` array to `PurchaseOrderDataTable`. - * Explicitly typed `purchaseOrders` state as `PurchaseOrder[]`. - -These changes should resolve the TypeScript errors and ensure the table functions correctly with the PDF download action. - -Please rebuild the app to apply these fixes. - - -Type 'TData[]' is not assignable to type 'PurchaseOrder[]'. - Type 'TData' is not assignable to type 'PurchaseOrder'. -You've encountered a common TypeScript issue when working with generics! The error "Type 'TData[]' is not assignable to type 'PurchaseOrder[]'" arises because `useReactTable` is defined with generic types `TData` and `TValue`, but when you're using it for `PurchaseOrder` data, you need to ensure that `TData` is explicitly `PurchaseOrder`. - -The fix is to correctly specify the generic type when calling `useReactTable`. - -Here's the corrected code: - - -"use client" - -import * as React from "react" -import { - ColumnDef, - ColumnFiltersState, - SortingState, - VisibilityState, - flexRender, - getCoreRowModel, - getFilteredRowModel, - getPaginationRowModel, - getSortedRowModel, - useReactTable, -} from "@tanstack/react-table" -import { Columns } from "lucide-react" -import { Button } from "@/components/ui/button" -import { - DropdownMenu, - DropdownMenuCheckboxItem, - DropdownMenuContent, - DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu" -import { jsPDF } from "jspdf" -import { ReceiveStockDialog } from "./ReceiveStockDialog" -import pb from "@/lib/pocketbase" -import { createColumns, PurchaseOrder } from "./columns" // Import createColumns and PurchaseOrder type - -interface PurchaseOrderDataTableProps { - columns: ColumnDef[] - data: TData[] - filterValue: string - onFilterChange: (value: string) => void - refreshData: () => void -} - -export function PurchaseOrderDataTable({ - columns: columnsProp, // Rename to avoid conflict - data, - filterValue, - onFilterChange, - refreshData, -}: PurchaseOrderDataTableProps) { - const [sorting, setSorting] = React.useState([]) - const [columnFilters, setColumnFilters] = React.useState([]) - const [columnVisibility, setColumnVisibility] = React.useState(() => { - if (typeof window !== 'undefined' && window.innerWidth < 768) { - return { - orderDate: false, - status: false, - actions: false, - }; - } - return {}; - }); - const [rowSelection, setRowSelection] = React.useState({}) - const [receiveDialogOpen, setReceiveDialogOpen] = React.useState(false) - const [selectedOrder, setSelectedOrder] = React.useState(null) - - const openReceiveDialog = (order: PurchaseOrder) => { - setSelectedOrder(order) - setReceiveDialogOpen(true) - } - - const closeReceiveDialog = () => { - setSelectedOrder(null) - setReceiveDialogOpen(false) - } - - const generatePDF = (order: PurchaseOrder) => { - const doc = new jsPDF() - doc.setFontSize(16) - doc.text("Purchase Order", 14, 20) - doc.setFontSize(12) - doc.text(`Supplier: ${order.supplierName}`, 14, 30) - doc.text(`Order Date: ${new Date(order.orderDate).toLocaleDateString()}`, 14, 40) - doc.text(`Status: ${order.status}`, 14, 50) - doc.text("Items:", 14, 60) - - let y = 70 - 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.save(`purchase_order_${order.id}.pdf`) - } - - const approveOrder = async (order: PurchaseOrder) => { - try { - await pb.collection('purchase_orders').update(order.id, { status: "Approved" }) - refreshData() - } catch (error) { - console.error("Failed to approve order:", error) - } - } - - const rejectOrder = async (order: PurchaseOrder) => { - try { - await pb.collection('purchase_orders').update(order.id, { status: "Rejected" }) - refreshData() - } catch (error) { - console.error("Failed to reject order:", error) - } - } - - const columnsWithActions = React.useMemo(() => createColumns({ onDownloadPdf: generatePDF }), [generatePDF]); - - const table = useReactTable({ // Specify TData as PurchaseOrder - data, // Now 'data' (which is PurchaseOrder[]) is correctly assigned to the 'data' parameter of useReactTable - columns: columnsWithActions, // Use the columns with actions - getCoreRowModel: getCoreRowModel(), - getPaginationRowModel: getPaginationRowModel(), - onSortingChange: setSorting, - getSortedRowModel: getSortedRowModel(), - onColumnFiltersChange: setColumnFilters, - getFilteredRowModel: getFilteredRowModel(), - onColumnVisibilityChange: setColumnVisibility, - onRowSelectionChange: setRowSelection, - state: { - sorting, - columnFilters, - columnVisibility, - rowSelection, - }, - }) - - // Sync external filter value with the table's internal state - React.useEffect(() => { - table.getColumn("supplierName")?.setFilterValue(filterValue) - }, [filterValue, table]) - - return ( - <> -
-
- onFilterChange(e.target.value)} - className="max-w-sm border border-gray-300 rounded px-2 py-1" - /> - - - - - - {table - .getAllColumns() - .filter( - (column) => column.getCanHide() - ) - .map((column) => { - return ( - - column.toggleVisibility(!!value) - } - > - {column.id} - - ) - })} - - -
-
- - - {table.getHeaderGroups().map(headerGroup => ( - - {headerGroup.headers.map(header => ( - - ))} - - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map(row => { - const order = row.original as PurchaseOrder - return ( - - {row.getVisibleCells().map(cell => ( - - ))} - - - ) - }) - ) : ( - - {/* Use table.getAllColumns().length for colSpan */} - - - )} - -
- {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())} -
- {flexRender(cell.column.columnDef.cell, cell.getContext())} - - {order.status === "Pending Approval" && ( - <> - - - - )} - {order.status === "Approved" && ( - <> - - - - )} - {order.status === "Received" && ( - Received - )} - {order.status === "Rejected" && ( - Rejected - )} -
No results.
-
-
- - {selectedOrder && ( - ({ - stockItemId: item.stockItemId, - orderedQuantity: selectedOrder.quantities[idx] || 0, - itemName: item.itemName, - }))} - refreshData={refreshData} - /> - )} - - ) -} \ No newline at end of file +export default PurchaseOrders; \ No newline at end of file