diff --git a/package.json b/package.json index 4ab4d5e..2166d27 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "lucide-react": "^0.462.0", "next-themes": "^0.3.0", "react": "^18.3.1", + "react-barcode": "^1.6.1", "react-day-picker": "^8.10.1", "react-dom": "^18.3.1", "react-hook-form": "^7.53.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b550646..19a415e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -125,6 +125,9 @@ importers: react: specifier: ^18.3.1 version: 18.3.1 + react-barcode: + specifier: ^1.6.1 + version: 1.6.1(react@18.3.1) react-day-picker: specifier: ^8.10.1 version: 8.10.1(date-fns@3.6.0)(react@18.3.1) @@ -1886,6 +1889,9 @@ packages: resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==} hasBin: true + jsbarcode@3.12.1: + resolution: {integrity: sha512-QZQSqIknC2Rr/YOUyOkCBqsoiBAOTYK+7yNN3JsqfoUtJtkazxNw1dmPpxuv7VVvqW13kA3/mKiLq+s/e3o9hQ==} + json-buffer@3.0.1: resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==} @@ -2110,6 +2116,11 @@ packages: queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} + react-barcode@1.6.1: + resolution: {integrity: sha512-pc4ftnO5syHa/UjCruEeRsomlhoxKSugIgTA8T4dH0fvc89UMHL+/1Sp25IAphqG44pJkE5hMXhv89iS09jQyw==} + peerDependencies: + react: 16 - 19 + react-day-picker@8.10.1: resolution: {integrity: sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==} peerDependencies: @@ -4083,6 +4094,8 @@ snapshots: dependencies: argparse: 2.0.1 + jsbarcode@3.12.1: {} + json-buffer@3.0.1: {} json-schema-traverse@0.4.1: {} @@ -4270,6 +4283,12 @@ snapshots: queue-microtask@1.2.3: {} + react-barcode@1.6.1(react@18.3.1): + dependencies: + jsbarcode: 3.12.1 + prop-types: 15.8.1 + react: 18.3.1 + react-day-picker@8.10.1(date-fns@3.6.0)(react@18.3.1): dependencies: date-fns: 3.6.0 diff --git a/src/components/stock/BarcodeDialog.tsx b/src/components/stock/BarcodeDialog.tsx new file mode 100644 index 0000000..75e2d33 --- /dev/null +++ b/src/components/stock/BarcodeDialog.tsx @@ -0,0 +1,33 @@ +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogDescription, +} from "@/components/ui/dialog" +import Barcode from "react-barcode" +import { StockItem } from "./columns" + +interface BarcodeDialogProps { + item: StockItem | null + open: boolean + onOpenChange: (open: boolean) => void +} + +export const BarcodeDialog = ({ item, open, onOpenChange }: BarcodeDialogProps) => { + if (!item) return null + + return ( + + + + {item.name} + SKU: {item.sku} + +
+ +
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/stock/columns.tsx b/src/components/stock/columns.tsx index 557ed16..c811e36 100644 --- a/src/components/stock/columns.tsx +++ b/src/components/stock/columns.tsx @@ -1,5 +1,6 @@ "use client" +import * as React from "react" import { ColumnDef } from "@tanstack/react-table" import { MoreHorizontal, ArrowUpDown } from "lucide-react" @@ -13,6 +14,7 @@ import { DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" +import { BarcodeDialog } from "./BarcodeDialog" export type StockItem = { id: string @@ -32,6 +34,44 @@ const formatCurrency = (price: number) => { }).format(price) } +const ActionsCell = ({ row }: { row: any }) => { + const item = row.original + const [isBarcodeOpen, setBarcodeOpen] = React.useState(false) + + return ( + <> + + + + + + + Actions + setBarcodeOpen(true)}> + View Barcode + + navigator.clipboard.writeText(item.id)} + > + Copy item ID + + + View details + Edit item + Delete item + + + + ) +} + export const columns: ColumnDef[] = [ { id: "select", @@ -121,31 +161,6 @@ export const columns: ColumnDef[] = [ }, { id: "actions", - cell: ({ row }) => { - const item = row.original - - return ( - - - - - - Actions - navigator.clipboard.writeText(item.id)} - > - Copy item ID - - - View details - Edit item - Delete item - - - ) - }, + cell: ActionsCell, }, ] \ No newline at end of file