f7b46986c5
Introduces a new 'cost_price_gbp' field to the stock items schema and database migration. Updates stock item forms to support both ZAR and GBP cost prices. Purchase order forms and PDF generation now use GBP pricing, with enhanced supplier and order metadata. Adds a searchable stock item selector for purchase orders and improves type definitions and UI labels for clarity.
113 lines
No EOL
3.2 KiB
TypeScript
113 lines
No EOL
3.2 KiB
TypeScript
"use client"
|
|
|
|
import { ColumnDef } from "@tanstack/react-table"
|
|
import { MoreHorizontal, Download, Eye } from "lucide-react" // Import Eye icon
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog" // Import Dialog components
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
import { useState } from "react" // Import useState
|
|
|
|
export type PurchaseOrder = {
|
|
id: string
|
|
supplierName: string
|
|
orderDate: string
|
|
status: string
|
|
itemCount: number
|
|
orderNumber?: string
|
|
accountRef?: string
|
|
salesOrderNo?: string
|
|
carriageCharge?: number
|
|
items: Array<{ stockItemId: string; itemName: string; quantity: number; sku: string; costPrice: number; costPriceGBP: number }> // Added costPrice and costPriceGBP
|
|
quantities: number[]
|
|
supplier?: {
|
|
name: string
|
|
address: string
|
|
email: string
|
|
phone: string
|
|
} | null
|
|
}
|
|
|
|
// Define the props for the actions column
|
|
interface ActionsColumnProps {
|
|
onDownloadPdf: (order: PurchaseOrder) => void;
|
|
onViewOrder: (order: PurchaseOrder) => void; // Add onViewOrder prop
|
|
}
|
|
|
|
// Export createColumns function
|
|
export const createColumns = ({ onDownloadPdf, onViewOrder }: ActionsColumnProps): ColumnDef<PurchaseOrder>[] => [
|
|
{
|
|
accessorKey: "supplierName",
|
|
header: "Supplier Name",
|
|
},
|
|
{
|
|
accessorKey: "orderDate",
|
|
header: "Order Date",
|
|
cell: ({ row }) => {
|
|
const date = new Date(row.getValue("orderDate"))
|
|
const formattedDate = date.toLocaleDateString("en-ZA", {
|
|
year: "numeric",
|
|
month: "short",
|
|
day: "numeric",
|
|
})
|
|
return <div className="font-medium">{formattedDate}</div>
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "status",
|
|
header: "Status",
|
|
},
|
|
{
|
|
accessorKey: "itemCount",
|
|
header: "Number of Items",
|
|
},
|
|
{
|
|
id: "actions",
|
|
enableHiding: false,
|
|
cell: ({ row }) => {
|
|
const order = row.original
|
|
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false); // State for edit dialog, if needed later
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="h-8 w-8 p-0">
|
|
<span className="sr-only">Open menu</span>
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
|
<DropdownMenuItem
|
|
onClick={() => navigator.clipboard.writeText(order.id)}
|
|
>
|
|
Copy Order ID
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={() => onViewOrder(order)}> {/* Call onViewOrder */}
|
|
<Eye className="mr-2 h-4 w-4" />
|
|
View Order
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => onDownloadPdf(order)}>
|
|
<Download className="mr-2 h-4 w-4" />
|
|
Download PDF
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
},
|
|
},
|
|
] |