From 42bd8abba556a9b4d1d574e88828cab92ad306b4 Mon Sep 17 00:00:00 2001 From: "[dyad]" Date: Fri, 12 Sep 2025 11:03:20 +0200 Subject: [PATCH] [dyad] wrote 6 file(s) --- .../PurchaseOrderDataTable.tsx | 6 +- src/pages/PurchaseOrders.tsx | 308 +----------------- 2 files changed, 15 insertions(+), 299 deletions(-) diff --git a/src/components/purchase-orders/PurchaseOrderDataTable.tsx b/src/components/purchase-orders/PurchaseOrderDataTable.tsx index 92d8202..232455b 100644 --- a/src/components/purchase-orders/PurchaseOrderDataTable.tsx +++ b/src/components/purchase-orders/PurchaseOrderDataTable.tsx @@ -108,7 +108,7 @@ export function PurchaseOrderDataTable({ // Use createColumns and pass the generatePDF function const columnsWithActions = React.useMemo(() => createColumns({ onDownloadPdf: generatePDF }), [generatePDF]); - const table = useReactTable({ + const table = useReactTable({ // Specify TData as PurchaseOrder data, columns: columnsWithActions, // Use the columns with actions getCoreRowModel: getCoreRowModel(), @@ -222,8 +222,8 @@ export function PurchaseOrderDataTable({ }) ) : ( - {/* Use columns.length instead of columns.length + 1 */} - No results. + {/* Use table.getAllColumns().length for colSpan */} + No results. )} diff --git a/src/pages/PurchaseOrders.tsx b/src/pages/PurchaseOrders.tsx index ab322c6..d1f3b41 100644 --- a/src/pages/PurchaseOrders.tsx +++ b/src/pages/PurchaseOrders.tsx @@ -9,13 +9,13 @@ import { DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; -import { createColumns } from "@/components/purchase-orders/columns"; // Import createColumns +import { createColumns, PurchaseOrder } from "@/components/purchase-orders/columns"; // Import createColumns import { PurchaseOrderDataTable } from "@/components/purchase-orders/PurchaseOrderDataTable"; import pb from "@/lib/pocketbase"; const PurchaseOrders = () => { const [purchaseOrderOpen, setPurchaseOrderOpen] = useState(false); - const [purchaseOrders, setPurchaseOrders] = useState([]); + const [purchaseOrders, setPurchaseOrders] = useState([]); // Explicitly type purchaseOrders const [refreshTrigger, setRefreshTrigger] = useState(0); const [filterValue, setFilterValue] = useState(""); @@ -55,8 +55,15 @@ const PurchaseOrders = () => { setRefreshTrigger(prev => prev + 1); }; - // Call createColumns to get the columns array - const columns = createColumns({ onDownloadPdf: (order) => console.log("Downloading PDF for order:", order.id) }); // Placeholder for now + // Define the PDF download handler + const handleDownloadPdf = useCallback((order: PurchaseOrder) => { + console.log("Downloading PDF for order:", order.id); + // The actual PDF generation logic is now in PurchaseOrderDataTable, + // so this handler just needs to be passed down. + }, []); + + // Call createColumns to get the columns array, passing the onDownloadPdf handler + const columns = createColumns({ onDownloadPdf: handleDownloadPdf }); return (
@@ -91,295 +98,4 @@ const PurchaseOrders = () => { ); }; -export default PurchaseOrders; - - -Here's a breakdown of the fixes: - -1. **`src/components/purchase-orders/columns.tsx`:** - * Corrected the closing tag for `DropdownMenuItem`. - * Exported `createColumns` function. - -2. **`src/components/purchase-orders/PurchaseOrderDataTable.tsx`:** - * Changed the import from `"./columns"` to `"./columns"` to correctly import `createColumns`. - * Used `columnsWithActions` (which is the result of `createColumns`) when initializing `useReactTable`. - * Corrected `colSpan` in the "No results" row to use `columns.length` (since `columns` is now correctly defined within the scope of `PurchaseOrderDataTableProps`). - -3. **`src/pages/PurchaseOrders.tsx`:** - * Imported `createColumns` from `"./columns"`. - * Called `createColumns` to get the `columns` array, passing the `onDownloadPdf` handler. - * Passed the `columns` array to `PurchaseOrderDataTable`. - -Please rebuild the app to apply these changes. - - -Type 'ColumnDef<PurchaseOrder>[]' is not assignable to type 'ColumnDef<TData, any>[]'. - Type 'ColumnDef<PurchaseOrder>' is not assignable to type 'ColumnDef<TData, any>'. - Type 'ColumnDefBase<PurchaseOrder, unknown> & StringHeaderIdentifier' is not assignable to type 'ColumnDef<TData, any>'. - Type 'ColumnDefBase<PurchaseOrder, unknown> & StringHeaderIdentifier' is not assignable to type 'AccessorFnColumnDefBase<TData, any> & IdIdentifier<TData, any>'. - Property 'accessorFn' is missing in type 'ColumnDefBase<PurchaseOrder, unknown> & StringHeaderIdentifier' but required in type 'AccessorFnColumnDefBase<TData, any>'. -Cannot find name 'columns'. Did you mean 'Columns'? -Module '"@/components/purchase-orders/columns"' has no exported member 'columns'. -You're right, those are some tricky TypeScript errors! It seems like there was a mix-up with how the columns were being defined and passed around. - -Here's the plan to fix these errors: - -1. **`PurchaseOrderDataTable.tsx` (Error 1 & 2):** - * The `useReactTable` hook expects the `columns` prop to be of type `ColumnDef[]`. Currently, `columnsWithActions` is of type `ColumnDef[]`, which is not directly assignable to `ColumnDef[]` because `TData` is a generic type. We'll ensure `PurchaseOrder` is used as the `TData` type for `useReactTable`. - * The `colSpan` error in the "No results" row is because `columns` is no longer directly available in that scope. We'll use `table.getAllColumns().length` which represents the total number of columns the table is aware of. - -2. **`src/pages/PurchaseOrders.tsx` (Error 3):** - * The `createColumns` function is now the exported entity from `./columns.tsx`, not `columns`. We need to import and call `createColumns` correctly. - -Here are the fixes: - - -"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) - } - } - - // 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 - 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