From 6156a1a5bb6ce2dfd160a7877c4cb1d8c91fac3f Mon Sep 17 00:00:00 2001
From: Blake Matthes <cowchmonkey@gmail.com>
Date: Wed, 11 Jun 2025 20:49:18 -0500
Subject: [PATCH] feat(common commands): added in a common commands just the
 barecode

---
 .../logistics/barcodeGenerator/BGPage.tsx     | 179 ++++++++++--------
 .../barcodeGenerator/CommonCommands.tsx       | 104 ++++++++++
 2 files changed, 201 insertions(+), 82 deletions(-)
 create mode 100644 frontend/src/components/logistics/barcodeGenerator/CommonCommands.tsx

diff --git a/frontend/src/components/logistics/barcodeGenerator/BGPage.tsx b/frontend/src/components/logistics/barcodeGenerator/BGPage.tsx
index d8f0003..6b72100 100644
--- a/frontend/src/components/logistics/barcodeGenerator/BGPage.tsx
+++ b/frontend/src/components/logistics/barcodeGenerator/BGPage.tsx
@@ -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>
     );
 }
diff --git a/frontend/src/components/logistics/barcodeGenerator/CommonCommands.tsx b/frontend/src/components/logistics/barcodeGenerator/CommonCommands.tsx
new file mode 100644
index 0000000..139405f
--- /dev/null
+++ b/frontend/src/components/logistics/barcodeGenerator/CommonCommands.tsx
@@ -0,0 +1,104 @@
+import { LstCard } from "@/components/extendedUI/LstCard";
+import { CardContent, CardFooter, CardHeader } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { useState } from "react";
+import Barcode from "react-barcode";
+import { BarcodePDFExport } from "./BarcodeExport";
+import { BulkBarcodePDFExport } from "./BulkExport";
+
+const commoncmd = [{ name: "Relocate", commandId: 33 }];
+export default function CommonCommands() {
+    const [checked, setChecked] = useState([]);
+
+    // handle the onchange
+    const changeBox = (d: any) => {
+        setChecked((prev: any) => {
+            if (prev.includes(d)) {
+                return prev.filter((name: any) => name !== d);
+            } else {
+                return [...prev, d];
+            }
+        });
+    };
+    return (
+        <div>
+            <div>
+                <LstCard>
+                    <CardHeader>Common Barcodes</CardHeader>
+                    <CardContent>
+                        {commoncmd.map((i: any) => {
+                            return (
+                                <div className="flex flex-row">
+                                    <div>
+                                        <Checkbox
+                                            id={i.commandId}
+                                            // checked={checked.includes(
+                                            //     l
+                                            // )}
+                                            onCheckedChange={() => changeBox(i)}
+                                        />
+                                        <label
+                                            id={i.commandId}
+                                            className="ml-2"
+                                        >
+                                            {i.name}
+                                        </label>
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    </CardContent>
+                </LstCard>
+            </div>
+
+            <div>
+                {checked.length > 0 && (
+                    <div className="m-2">
+                        <LstCard>
+                            <CardHeader>Current selected Barcodes</CardHeader>
+                            <CardContent>
+                                {checked.map((c: any) => {
+                                    return (
+                                        <div
+                                            className="flex justify-center"
+                                            key={`${c.name}`}
+                                        >
+                                            <div>
+                                                <Barcode
+                                                    value={`AlplaPRODcmd${c.commandId}`}
+                                                    width={2}
+                                                    height={50}
+                                                    displayValue={false}
+                                                />
+                                                <p className="flex justify-center">
+                                                    Bacrode: {c.name}
+                                                </p>
+                                            </div>
+                                            <div className="ml-2 mt-4">
+                                                <BarcodePDFExport
+                                                    barcodeValue={`AlplaPRODcmd${c.commandId}`}
+                                                    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>
+    );
+}