feat(common commands): added in a common commands just the barecode

This commit is contained in:
2025-06-11 20:49:18 -05:00
parent 826c44c996
commit 6156a1a5bb
2 changed files with 201 additions and 82 deletions

View File

@@ -9,6 +9,7 @@ import { useState } from "react";
import Barcode from "react-barcode";
import { BarcodePDFExport } from "./BarcodeExport";
import { BulkBarcodePDFExport } from "./BulkExport";
import CommonCommands from "./CommonCommands";
export default function BGPage() {
const { data, isError, isLoading } = useQuery(getLanes());
@@ -53,98 +54,112 @@ export default function BGPage() {
return (
<div className="flex flex-row m-2">
<div className="m-2">
<LstCard>
<CardHeader>Warehouse Barcodes</CardHeader>
<CardContent>
{warehouseArray.map((i: any) => {
const lanes = data?.filter(
(wid: any) => wid.warehouseId === i.warehouseId
);
return (
<div className="m-2" key={i.warehouseId}>
<Collapsible>
<CollapsibleTrigger>
{i.warehouseDescription}
</CollapsibleTrigger>
<CollapsibleContent>
<div className="ml-2">
{lanes?.map((l: any) => {
return (
<div key={l.laneId}>
<Checkbox
id={l.laneId}
// checked={checked.includes(
// l
// )}
onCheckedChange={() =>
changeBox(l)
}
/>
<label
id={l.laneId}
className="ml-2"
>
{
l.laneDescription
}
</label>
</div>
);
})}
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
})}
</CardContent>
</LstCard>
</div>
{checked.length > 0 && (
<div className="flex flex-row">
<div className="m-2">
<LstCard>
<CardHeader>Current selected lanes</CardHeader>
<CardHeader>Warehouse Barcodes</CardHeader>
<CardContent>
{checked.map((c: any) => {
{warehouseArray.map((i: any) => {
const lanes = data?.filter(
(wid: any) =>
wid.warehouseId === i.warehouseId
);
return (
<div
className="flex justify-center"
key={`${c.warehouseId}-${c.laneId}`}
>
<div>
<Barcode
value={`loc#${c.warehouseId}#${c.laneId}`}
width={2}
height={50}
displayValue={false}
/>
<p className="flex justify-center">
Lane: {c.laneDescription}
</p>
</div>
<div className="ml-2 mt-4">
<BarcodePDFExport
barcodeValue={`loc#${c.warehouseId}#${c.laneId}`}
data={c}
/>
</div>
<div className="m-2" key={i.warehouseId}>
<Collapsible>
<CollapsibleTrigger>
{i.warehouseDescription}
</CollapsibleTrigger>
<CollapsibleContent>
<div className="ml-2">
{lanes?.map((l: any) => {
return (
<div key={l.laneId}>
<Checkbox
id={
l.laneId
}
// checked={checked.includes(
// l
// )}
onCheckedChange={() =>
changeBox(
l
)
}
/>
<label
id={
l.laneId
}
className="ml-2"
>
{
l.laneDescription
}
</label>
</div>
);
})}
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
})}
</CardContent>
<CardFooter>
<div className="flex justify-end">
{checked.length > 1 && (
<div>
<BulkBarcodePDFExport data={checked} />
</div>
)}
</div>
</CardFooter>
</LstCard>
</div>
)}
{checked.length > 0 && (
<div className="m-2">
<LstCard>
<CardHeader>Current selected lanes</CardHeader>
<CardContent>
{checked.map((c: any) => {
return (
<div
className="flex justify-center"
key={`${c.warehouseId}-${c.laneId}`}
>
<div>
<Barcode
value={`loc#${c.warehouseId}#${c.laneId}`}
width={2}
height={50}
displayValue={false}
/>
<p className="flex justify-center">
Lane: {c.laneDescription}
</p>
</div>
<div className="ml-2 mt-4">
<BarcodePDFExport
barcodeValue={`loc#${c.warehouseId}#${c.laneId}`}
data={c}
/>
</div>
</div>
);
})}
</CardContent>
<CardFooter>
<div className="flex justify-end">
{checked.length > 1 && (
<div>
<BulkBarcodePDFExport
data={checked}
/>
</div>
)}
</div>
</CardFooter>
</LstCard>
</div>
)}
</div>
<div className="m-2">
<CommonCommands />
</div>
</div>
);
}