cowch/lst
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(migration): moved barcode generator

Browse Source
This commit is contained in:
Blake Matthes
2025-10-26 11:35:54 -05:00
parent 39c31aa1ec
commit fd9d774772
11 changed files with 957 additions and 401 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/routeTree.gen.ts
View File

@@ -37,6 +37,7 @@ import { Route as OldOldocmeCyclecountIndexRouteImport } from './routes/_old/old
import { Route as OldOldlogisticsSiloAdjustmentsIndexRouteImport } from './routes/_old/old/(logistics)/siloAdjustments/index'
import { Route as OldOldlogisticsMaterialHelperIndexRouteImport } from './routes/_old/old/(logistics)/materialHelper/index'
import { Route as OldOldlogisticsHelperCommandsIndexRouteImport } from './routes/_old/old/(logistics)/helperCommands/index'
import { Route as OldOldlogisticsBarcodegenIndexRouteImport } from './routes/_old/old/(logistics)/barcodegen/index'
import { Route as OldOldlogisticsSiloAdjustmentsHistRouteImport } from './routes/_old/old/(logistics)/siloAdjustments/$hist'
import { Route as AppAdminLayoutAdminUsersUsersRouteImport } from './routes/_app/_adminLayout/admin/_users/users'
import { Route as AppAdminLayoutAdminUsersProdUsersRouteImport } from './routes/_app/_adminLayout/admin/_users/prodUsers'
@@ -191,6 +192,12 @@ const OldOldlogisticsHelperCommandsIndexRoute =
path: '/helperCommands/',
getParentRoute: () => OldOldRouteRoute,
} as any)
const OldOldlogisticsBarcodegenIndexRoute =
OldOldlogisticsBarcodegenIndexRouteImport.update({
id: '/(logistics)/barcodegen/',
path: '/barcodegen/',
getParentRoute: () => OldOldRouteRoute,
} as any)
const OldOldlogisticsSiloAdjustmentsHistRoute =
OldOldlogisticsSiloAdjustmentsHistRouteImport.update({
id: '/(logistics)/siloAdjustments/$hist',
@@ -245,6 +252,7 @@ export interface FileRoutesByFullPath {
'/admin/prodUsers': typeof AppAdminLayoutAdminUsersProdUsersRoute
'/admin/users': typeof AppAdminLayoutAdminUsersUsersRoute
'/old/siloAdjustments/$hist': typeof OldOldlogisticsSiloAdjustmentsHistRoute
'/old/barcodegen': typeof OldOldlogisticsBarcodegenIndexRoute
'/old/helperCommands': typeof OldOldlogisticsHelperCommandsIndexRoute
'/old/materialHelper': typeof OldOldlogisticsMaterialHelperIndexRoute
'/old/siloAdjustments': typeof OldOldlogisticsSiloAdjustmentsIndexRoute
@@ -274,6 +282,7 @@ export interface FileRoutesByTo {
'/admin/prodUsers': typeof AppAdminLayoutAdminUsersProdUsersRoute
'/admin/users': typeof AppAdminLayoutAdminUsersUsersRoute
'/old/siloAdjustments/$hist': typeof OldOldlogisticsSiloAdjustmentsHistRoute
'/old/barcodegen': typeof OldOldlogisticsBarcodegenIndexRoute
'/old/helperCommands': typeof OldOldlogisticsHelperCommandsIndexRoute
'/old/materialHelper': typeof OldOldlogisticsMaterialHelperIndexRoute
'/old/siloAdjustments': typeof OldOldlogisticsSiloAdjustmentsIndexRoute
@@ -309,6 +318,7 @@ export interface FileRoutesById {
'/_app/_adminLayout/admin/_users/prodUsers': typeof AppAdminLayoutAdminUsersProdUsersRoute
'/_app/_adminLayout/admin/_users/users': typeof AppAdminLayoutAdminUsersUsersRoute
'/_old/old/(logistics)/siloAdjustments/$hist': typeof OldOldlogisticsSiloAdjustmentsHistRoute
'/_old/old/(logistics)/barcodegen/': typeof OldOldlogisticsBarcodegenIndexRoute
'/_old/old/(logistics)/helperCommands/': typeof OldOldlogisticsHelperCommandsIndexRoute
'/_old/old/(logistics)/materialHelper/': typeof OldOldlogisticsMaterialHelperIndexRoute
'/_old/old/(logistics)/siloAdjustments/': typeof OldOldlogisticsSiloAdjustmentsIndexRoute
@@ -341,6 +351,7 @@ export interface FileRouteTypes {
| '/admin/prodUsers'
| '/admin/users'
| '/old/siloAdjustments/$hist'
| '/old/barcodegen'
| '/old/helperCommands'
| '/old/materialHelper'
| '/old/siloAdjustments'
@@ -370,6 +381,7 @@ export interface FileRouteTypes {
| '/admin/prodUsers'
| '/admin/users'
| '/old/siloAdjustments/$hist'
| '/old/barcodegen'
| '/old/helperCommands'
| '/old/materialHelper'
| '/old/siloAdjustments'
@@ -404,6 +416,7 @@ export interface FileRouteTypes {
| '/_app/_adminLayout/admin/_users/prodUsers'
| '/_app/_adminLayout/admin/_users/users'
| '/_old/old/(logistics)/siloAdjustments/$hist'
| '/_old/old/(logistics)/barcodegen/'
| '/_old/old/(logistics)/helperCommands/'
| '/_old/old/(logistics)/materialHelper/'
| '/_old/old/(logistics)/siloAdjustments/'
@@ -609,6 +622,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof OldOldlogisticsHelperCommandsIndexRouteImport
parentRoute: typeof OldOldRouteRoute
}
'/_old/old/(logistics)/barcodegen/': {
id: '/_old/old/(logistics)/barcodegen/'
path: '/barcodegen'
fullPath: '/old/barcodegen'
preLoaderRoute: typeof OldOldlogisticsBarcodegenIndexRouteImport
parentRoute: typeof OldOldRouteRoute
}
'/_old/old/(logistics)/siloAdjustments/$hist': {
id: '/_old/old/(logistics)/siloAdjustments/$hist'
path: '/siloAdjustments/$hist'
@@ -745,6 +765,7 @@ interface OldOldRouteRouteChildren {
OldOldOcpIndexRoute: typeof OldOldOcpIndexRoute
OldOldRfidIndexRoute: typeof OldOldRfidIndexRoute
OldOldlogisticsSiloAdjustmentsHistRoute: typeof OldOldlogisticsSiloAdjustmentsHistRoute
OldOldlogisticsBarcodegenIndexRoute: typeof OldOldlogisticsBarcodegenIndexRoute
OldOldlogisticsHelperCommandsIndexRoute: typeof OldOldlogisticsHelperCommandsIndexRoute
OldOldlogisticsMaterialHelperIndexRoute: typeof OldOldlogisticsMaterialHelperIndexRoute
OldOldlogisticsSiloAdjustmentsIndexRoute: typeof OldOldlogisticsSiloAdjustmentsIndexRoute
@@ -759,6 +780,7 @@ const OldOldRouteRouteChildren: OldOldRouteRouteChildren = {
OldOldRfidIndexRoute: OldOldRfidIndexRoute,
OldOldlogisticsSiloAdjustmentsHistRoute:
OldOldlogisticsSiloAdjustmentsHistRoute,
OldOldlogisticsBarcodegenIndexRoute: OldOldlogisticsBarcodegenIndexRoute,
OldOldlogisticsHelperCommandsIndexRoute:
OldOldlogisticsHelperCommandsIndexRoute,
OldOldlogisticsMaterialHelperIndexRoute:

14
frontend/src/routes/_old/old/(logistics)/barcodegen/index.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { createFileRoute } from "@tanstack/react-router";
import BGPage from "../../-components/barcodeGenerator/BGPage";
export const Route = createFileRoute("/_old/old/(logistics)/barcodegen/")({
component: RouteComponent,
});
function RouteComponent() {
return (
<div>
<BGPage />
</div>
);
}

149
frontend/src/routes/_old/old/-components/barcodeGenerator/BGPage.tsx Normal file
View File

@@ -0,0 +1,149 @@
import { CollapsibleTrigger } from "@radix-ui/react-collapsible";
import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import Barcode from "react-barcode";
import { CardContent, CardFooter, CardHeader } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
import { getLanes } from "../../-utils/querys/logistics/getWarehouseLanes";
import { LstCard } from "../extendedUi/LstCard";
import { BarcodePDFExport } from "./BarcodeExport";
import { BulkBarcodePDFExport } from "./BulkExport";
import CommonCommands from "./CommonCommands";
export default function BGPage() {
const { data, isError, isLoading } = useQuery(getLanes());
const [checked, setChecked] = useState([]);
if (isLoading) return <div>Loading Data</div>;
if (isError)
return <div>There was an error getting the warehouse lane data.</div>;
/**
* get the warehouse names only
*/
const warhouses = new Map();
data?.forEach((item: any) => {
// if the warhouse is not already included add it to the map
if (!warhouses.has(item.warehouseId)) {
warhouses.set(item.warehouseId, item.warehouseDescription);
}
});
// convert the map to an array
const warehouseArray = Array.from(warhouses).map(([wid, wname]) => ({
warehouseId: wid,
warehouseDescription: wname,
}));
//console.log(warehouseArray);
// 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 className="flex flex-row m-2">
<div className="flex flex-row">
<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="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>
);
}

100
frontend/src/routes/_old/old/-components/barcodeGenerator/BarcodeExport.tsx Normal file
View File

@@ -0,0 +1,100 @@
import { Button } from "@/components/ui/button";
import {
pdf,
Page,
Text,
View,
Document,
StyleSheet,
Image,
} from "@react-pdf/renderer";
import JsBarcode from "jsbarcode";
export const BarcodePDFExport = ({
barcodeValue,
data,
}: {
barcodeValue: any;
data: any;
}) => {
const generatePDF = () => {
//const barcodeValue = data; // Barcode value
const canvas = document.createElement("canvas");
// Generate barcode on the canvas
JsBarcode(canvas, barcodeValue, {
format: "CODE128",
displayValue: false,
});
// Convert canvas to base64 image data
const barcodeImage = canvas.toDataURL("image/png");
// Define the document styles using @react-pdf/renderer
const styles = StyleSheet.create({
page: {
padding: 30,
},
centerContent: {
display: "flex",
justifyContent: "center", // Center horizontally
alignItems: "center", // Center vertically
flexDirection: "column", // Stack items (barcode and description) vertically
height: "75%", // Ensure the container takes full page height
textAlign: "center",
},
section: {
marginBottom: 10,
textAlign: "center",
},
barcode: {
width: 800, // Width of the barcode
height: 200, // Height of the barcode
marginBottom: 10,
},
description: {
fontSize: 28,
fontWeight: "bold",
marginTop: 10,
marginBottom: 20, // Ensure there's space below the text
},
});
// Create the document
const MyDocument = (
<Document>
<Page style={styles.page} orientation="landscape" size="A4">
<View style={styles.centerContent}>
<View style={styles.section}>
<Image src={barcodeImage} style={styles.barcode} />
</View>
<View style={styles.section}>
<Text style={styles.description}>
Lane: {data.laneDescription}
</Text>
</View>
</View>
</Page>
</Document>
);
// Generate the PDF and trigger download
pdf(MyDocument)
.toBlob()
.then((blob) => {
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = `${data.warehouseDescription}-${data.laneDescription}.pdf`;
link.click();
});
};
return (
<div>
<Button onClick={() => generatePDF()} color="primary">
Export
</Button>
</div>
);
};

125
frontend/src/routes/_old/old/-components/barcodeGenerator/BulkExport.tsx Normal file
View File

@@ -0,0 +1,125 @@
import {
Document,
Image,
Page,
pdf,
StyleSheet,
Text,
View,
} from "@react-pdf/renderer";
import JsBarcode from "jsbarcode";
import { Button } from "@/components/ui/button";
export const BulkBarcodePDFExport = ({ data }: { data: any }) => {
const createBarcode = (barcodeValue: any) => {
//const barcodeValue = data; // Barcode value
const canvas = document.createElement("canvas");
// Generate barcode on the canvas
JsBarcode(canvas, barcodeValue, {
format: "CODE128",
displayValue: false,
});
// Convert canvas to base64 image data
const barcodeImage = canvas.toDataURL("image/png");
return barcodeImage;
};
const generatePDF = () => {
// Define the document styles using @react-pdf/renderer
const styles = StyleSheet.create({
page: {
padding: 30,
},
centerContent: {
display: "flex",
justifyContent: "flex-start", // Center horizontally
alignItems: "center", // Center vertically
flexDirection: "row", // Stack items (barcode and description) vertically
//height: "5%", // Ensure the container takes full page height
textAlign: "center",
},
section: {
marginBottom: 10,
textAlign: "center",
},
barcode: {
width: 275, // Width of the barcode
height: 75, // Height of the barcode
marginBottom: 10,
},
description: {
fontSize: 14,
fontWeight: "bold",
marginTop: 10,
marginBottom: 20, // Ensure there's space below the text
},
headerText: {
fontSize: 28,
fontWeight: "bold",
marginTop: 10,
marginBottom: 20, // Ensure there's space below the text
display: "flex",
justifyContent: "center",
//height: "15%", // Ensure the container takes full page height
textAlign: "center",
},
horizontalLine: {
borderBottom: "#000000",
borderBottomWidth: 1,
},
});
// Create the document
const MyDocument = (
<Document>
<Page style={styles.page} orientation="portrait" size="A4">
<View style={styles.headerText}>
<Text>Multi Lane export.</Text>
</View>
<View style={styles.horizontalLine} />
{data.map((i: any, index: any) => {
return (
<View style={styles.centerContent} key={index}>
<View style={styles.section}>
<Image
src={createBarcode(`loc#${i.warehouseId}#${i.laneId}`)}
style={styles.barcode}
/>
</View>
<View style={styles.section}>
<Text style={styles.description}>
Lane: {i.laneDescription}
</Text>
</View>
</View>
);
})}
</Page>
</Document>
);
// Generate the PDF and trigger download
pdf(MyDocument)
.toBlob()
.then((blob) => {
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = `MultipleBarcodes.pdf`;
link.click();
});
};
return (
<div>
<Button onClick={() => generatePDF()} color="primary">
Export All Selected
</Button>
</div>
);
};

97
frontend/src/routes/_old/old/-components/barcodeGenerator/CommonCommands.tsx Normal file
View File

@@ -0,0 +1,97 @@
import { useState } from "react";
import Barcode from "react-barcode";
import { CardContent, CardFooter, CardHeader } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { LstCard } from "../extendedUi/LstCard";
import { BarcodePDFExport } from "./BarcodeExport";
import { BulkBarcodePDFExport } from "./BulkExport";
const commoncmd = [
{ name: "Relocate", commandId: 33 },
//-{ name: "Stock in", commandId: 22 },
];
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>
);
}