[dyad] wrote 1 file(s)
This commit is contained in:
[dyad]
parent
5e95abcfb2
commit
3bbf53c0ab
1 changed files with 65 additions and 27 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue