David/JEISA-WEBAPP
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[dyad] Replaced barcodes with more reliable QR codes - wrote 4 file(s), renamed 1 file(s), added qrcode.react package(s)

Browse source
This commit is contained in:
davidels1 2025-09-09 00:52:12 +02:00
parent dce3f15acc
commit d72b809813
4 changed files with 24 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -49,6 +49,7 @@
"input-otp": "^1.2.4",
"lucide-react": "^0.462.0",
"next-themes": "^0.3.0",
"qrcode.react": "^4.2.0",
"react": "^18.3.1",
"react-barcode": "^1.6.1",
"react-day-picker": "^8.10.1",

12
pnpm-lock.yaml
View file

@ -122,6 +122,9 @@ importers:
next-themes:
specifier: ^0.3.0
version: 0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
qrcode.react:
specifier: ^4.2.0
version: 4.2.0(react@18.3.1)
react:
specifier: ^18.3.1
version: 18.3.1
@ -2113,6 +2116,11 @@ packages:
resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
engines: {node: '>=6'}
qrcode.react@4.2.0:
resolution: {integrity: sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==}
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
queue-microtask@1.2.3:
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
@ -4281,6 +4289,10 @@ snapshots:
punycode@2.3.1: {}
qrcode.react@4.2.0(react@18.3.1):
dependencies:
react: 18.3.1
queue-microtask@1.2.3: {}
react-barcode@1.6.1(react@18.3.1):

8
src/components/stock/BarcodeDialog.tsx → src/components/stock/QRCodeDialog.tsx
View file

@ -5,16 +5,16 @@ import {
DialogTitle,
DialogDescription,
} from "@/components/ui/dialog"
import Barcode from "react-barcode"
import { QRCodeCanvas } from "qrcode.react"
import { StockItem } from "./columns"
interface BarcodeDialogProps {
interface QRCodeDialogProps {
item: StockItem | null
open: boolean
onOpenChange: (open: boolean) => void
}
export const BarcodeDialog = ({ item, open, onOpenChange }: BarcodeDialogProps) => {
export const QRCodeDialog = ({ item, open, onOpenChange }: QRCodeDialogProps) => {
if (!item) return null
return (
@ -25,7 +25,7 @@ export const BarcodeDialog = ({ item, open, onOpenChange }: BarcodeDialogProps)
<DialogDescription>SKU: {item.sku}</DialogDescription>
</DialogHeader>
<div className="flex items-center justify-center p-4 bg-white rounded-lg">
<Barcode value={item.sku} />
<QRCodeCanvas value={item.sku} size={160} />
</div>
</DialogContent>
</Dialog>

14
src/components/stock/columns.tsx
View file

@ -14,7 +14,7 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { BarcodeDialog } from "./BarcodeDialog"
import { QRCodeDialog } from "./QRCodeDialog"
export type StockItem = {
id: string
@ -36,14 +36,14 @@ const formatCurrency = (price: number) => {
const ActionsCell = ({ row }: { row: any }) => {
const item = row.original
const [isBarcodeOpen, setBarcodeOpen] = React.useState(false)
const [isQRCodeOpen, setQRCodeOpen] = React.useState(false)
return (
<>
<BarcodeDialog
<QRCodeDialog
item={item}
open={isBarcodeOpen}
onOpenChange={setBarcodeOpen}
open={isQRCodeOpen}
onOpenChange={setQRCodeOpen}
/>
<DropdownMenu>
<DropdownMenuTrigger asChild>
@ -54,8 +54,8 @@ const ActionsCell = ({ row }: { row: any }) => {
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem onClick={() => setBarcodeOpen(true)}>
View Barcode
<DropdownMenuItem onClick={() => setQRCodeOpen(true)}>
View QR Code
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => navigator.clipboard.writeText(item.id)}