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 (
+
+ )
+}
\ 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