feat(ocp): add lots with scroll view was added

This commit is contained in:
2025-03-25 13:39:18 -05:00
parent b01980e1c5
commit 9e9a56cbb1
9 changed files with 368 additions and 128 deletions

View File

@@ -16,6 +16,7 @@
"@radix-ui/react-dropdown-menu": "^2.1.6",
"@radix-ui/react-label": "^2.1.2",
"@radix-ui/react-popover": "^1.1.6",
"@radix-ui/react-scroll-area": "^1.2.3",
"@radix-ui/react-select": "^2.1.6",
"@radix-ui/react-separator": "^1.1.2",
"@radix-ui/react-slot": "^1.1.2",
@@ -1740,6 +1741,37 @@
}
}
},
"node_modules/@radix-ui/react-scroll-area": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.3.tgz",
"integrity": "sha512-l7+NNBfBYYJa9tNqVcP2AGvxdE3lmE6kFTBXdvHgUaZuy+4wGCL1Cl2AfaR7RKyimj7lZURGLwFO59k4eBnDJQ==",
"license": "MIT",
"dependencies": {
"@radix-ui/number": "1.1.0",
"@radix-ui/primitive": "1.1.1",
"@radix-ui/react-compose-refs": "1.1.1",
"@radix-ui/react-context": "1.1.1",
"@radix-ui/react-direction": "1.1.0",
"@radix-ui/react-presence": "1.1.2",
"@radix-ui/react-primitive": "2.0.2",
"@radix-ui/react-use-callback-ref": "1.1.0",
"@radix-ui/react-use-layout-effect": "1.1.0"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-select": {
"version": "2.1.6",
"resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.6.tgz",

View File

@@ -20,6 +20,7 @@
"@radix-ui/react-dropdown-menu": "^2.1.6",
"@radix-ui/react-label": "^2.1.2",
"@radix-ui/react-popover": "^1.1.6",
"@radix-ui/react-scroll-area": "^1.2.3",
"@radix-ui/react-select": "^2.1.6",
"@radix-ui/react-separator": "^1.1.2",
"@radix-ui/react-slot": "^1.1.2",

View File

@@ -1,14 +1,22 @@
import {LstCard} from "@/components/extendedUI/LstCard";
import { LstCard } from "@/components/extendedUI/LstCard";
import {Skeleton} from "@/components/ui/skeleton";
import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
import {useSessionStore} from "@/lib/store/sessionStore";
import {useSettingStore} from "@/lib/store/useSettings";
import {LotType} from "@/types/lots";
import {getlots} from "@/utils/querys/production/lots";
import {useQuery} from "@tanstack/react-query";
import { Skeleton } from "@/components/ui/skeleton";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { useSessionStore } from "@/lib/store/sessionStore";
import { useSettingStore } from "@/lib/store/useSettings";
import { LotType } from "@/types/lots";
import { getlots } from "@/utils/querys/production/lots";
import { useQuery } from "@tanstack/react-query";
import ManualPrint from "./ManualPrinting/ManualPrint";
import ManualPrintForm from "./ManualPrinting/ManualPrintForm";
import { ScrollArea } from "@/components/ui/scroll-area";
let lotColumns = [
{
@@ -57,12 +65,12 @@ let lotColumns = [
// },
];
export default function Lots() {
const {data, isError, isLoading} = useQuery(getlots());
const {user} = useSessionStore();
const {settings} = useSettingStore();
const { data, isError, isLoading } = useQuery(getlots());
const { user } = useSessionStore();
const { settings } = useSettingStore();
const server = settings.filter((n) => n.name === "server")[0]?.value || "";
console.log(server);
console.log(data);
const roles = ["admin", "manager", "operator"];
@@ -83,140 +91,167 @@ export default function Lots() {
if (isError) {
return (
<div className="m-2 p-2 min-h-2/5">
<LstCard>
<p className="text-center">Current Assigned lots</p>
<Table>
<TableHeader>
<TableRow>
{lotColumns.map((l) => (
<TableHead key={l.key}>{l.label}</TableHead>
))}
</TableRow>
</TableHeader>
<TableBody>
{Array(10)
.fill(0)
.map((_, i) => (
<TableRow key={i}>
<TableCell className="font-medium">
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<ScrollArea className="max-h-1/2 rounded-md border p-4">
<LstCard>
<p className="text-center">Current Assigned lots</p>
<Table>
<TableHeader>
<TableRow>
{lotColumns.map((l) => (
<TableHead key={l.key}>
{l.label}
</TableHead>
))}
</TableRow>
))}
</TableBody>
</Table>
</LstCard>
</TableHeader>
<TableBody>
{Array(10)
.fill(0)
.map((_, i) => (
<TableRow key={i}>
<TableCell className="font-medium">
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</LstCard>
</ScrollArea>
</div>
);
}
return (
<LstCard className="m-2 p-2 min-h-2/5">
<p className="text-center">Current Assigned lots</p>
<Table>
<TableHeader>
<TableRow>
{lotColumns.map((l) => (
<TableHead key={l.key}>{l.label}</TableHead>
))}
</TableRow>
</TableHeader>
{isLoading ? (
<>
<ScrollArea className="h-[400px]">
<p className="text-center">Current Assigned lots</p>
<Table>
<TableHeader>
<TableRow>
{lotColumns.map((l) => (
<TableHead key={l.key}>{l.label}</TableHead>
))}
</TableRow>
</TableHeader>
{isLoading ? (
<>
<TableBody>
{Array(10)
.fill(0)
.map((_, i) => (
<TableRow key={i}>
<TableCell className="font-medium">
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
</TableRow>
))}
</TableBody>
</>
) : (
<TableBody>
{Array(10)
.fill(0)
.map((_, i) => (
<TableRow key={i}>
{data?.map((lot: LotType) => (
<TableRow key={lot.LabelOnlineID}>
<TableCell className="font-medium">
<Skeleton className="h-4" />
{lot.MachineLocation}
</TableCell>
<TableCell>
<Skeleton className="h-4" />
<TableCell className="font-medium">
{lot.AV}
</TableCell>
<TableCell>
<Skeleton className="h-4" />
<TableCell className="font-medium">
{lot.Alias}
</TableCell>
<TableCell>
<Skeleton className="h-4" />
<TableCell className="font-medium">
{lot.LOT}
</TableCell>
<TableCell>
<Skeleton className="h-4" />
<TableCell className="font-medium">
{lot.ProlinkLot}
</TableCell>
<TableCell>
<Skeleton className="h-4" />
<TableCell className="font-medium">
{lot.PlannedQTY}
</TableCell>
<TableCell>
<Skeleton className="h-4" />
<TableCell className="font-medium">
{lot.Produced}
</TableCell>
<TableCell>
<Skeleton className="h-4" />
<TableCell className="font-medium">
{lot.Remaining}
</TableCell>
<TableCell>
<Skeleton className="h-4" />
<TableCell className="font-medium">
{lot.overPrinting}
</TableCell>
{user && roles.includes(user.role) && (
<>
{server === "usday1vms006" ||
server === "localhost" ? (
<>
<TableCell className="flex justify-center">
<ManualPrintForm
lot={lot}
/>
</TableCell>
</>
) : (
<TableCell className="flex justify-center">
<ManualPrint lot={lot} />
</TableCell>
)}
</>
)}
</TableRow>
))}
</TableBody>
</>
) : (
<TableBody>
{data?.map((lot: LotType) => (
<TableRow key={lot.LabelOnlineID}>
<TableCell className="font-medium">{lot.MachineLocation}</TableCell>
<TableCell className="font-medium">{lot.AV}</TableCell>
<TableCell className="font-medium">{lot.Alias}</TableCell>
<TableCell className="font-medium">{lot.LOT}</TableCell>
<TableCell className="font-medium">{lot.ProlinkLot}</TableCell>
<TableCell className="font-medium">{lot.PlannedQTY}</TableCell>
<TableCell className="font-medium">{lot.Produced}</TableCell>
<TableCell className="font-medium">{lot.Remaining}</TableCell>
<TableCell className="font-medium">{lot.overPrinting}</TableCell>
{user && roles.includes(user.role) && (
<>
{server === "usday1vms006" || server === "localhost" ? (
<>
<TableCell className="flex justify-center">
<ManualPrintForm lot={lot} />
</TableCell>
</>
) : (
<TableCell className="flex justify-center">
<ManualPrint lot={lot} />
</TableCell>
)}
</>
)}
</TableRow>
))}
</TableBody>
)}
</Table>
)}
</Table>
</ScrollArea>
</LstCard>
);
}

View File

@@ -0,0 +1,56 @@
import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
import { cn } from "@/lib/utils"
function ScrollArea({
className,
children,
...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
return (
<ScrollAreaPrimitive.Root
data-slot="scroll-area"
className={cn("relative", className)}
{...props}
>
<ScrollAreaPrimitive.Viewport
data-slot="scroll-area-viewport"
className="ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1"
>
{children}
</ScrollAreaPrimitive.Viewport>
<ScrollBar />
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>
)
}
function ScrollBar({
className,
orientation = "vertical",
...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
return (
<ScrollAreaPrimitive.ScrollAreaScrollbar
data-slot="scroll-area-scrollbar"
orientation={orientation}
className={cn(
"flex touch-none p-px transition-colors select-none",
orientation === "vertical" &&
"h-full w-2.5 border-l border-l-transparent",
orientation === "horizontal" &&
"h-2.5 flex-col border-t border-t-transparent",
className
)}
{...props}
>
<ScrollAreaPrimitive.ScrollAreaThumb
data-slot="scroll-area-thumb"
className="bg-border relative flex-1 rounded-full"
/>
</ScrollAreaPrimitive.ScrollAreaScrollbar>
)
}
export { ScrollArea, ScrollBar }

View File

@@ -1,4 +1,4 @@
import {queryOptions} from "@tanstack/react-query";
import { queryOptions } from "@tanstack/react-query";
import axios from "axios";
export function getlots() {
@@ -13,7 +13,7 @@ export function getlots() {
}
const fetchSettings = async () => {
const {data} = await axios.get("/api/v1/ocp/lots");
const { data } = await axios.get("/api/ocp/getlots");
// if we are not localhost ignore the devDir setting.
//const url: string = window.location.host.split(":")[0];
let lotData = data.data;

View File

@@ -0,0 +1,23 @@
import { tryCatch } from "../../../../globalUtils/tryCatch.js";
import { query } from "../../../sqlServer/prodSqlServer.js";
import { lotQuery } from "../../../sqlServer/querys/ocp/lots.js";
export const getLots = async () => {
const { data: lotInfo, error: lotError } = await tryCatch(
query(lotQuery, "Alplalabel online lots")
);
if (lotError) {
return {
success: false,
message: "There was an error getting the lots",
data: lotError,
};
}
return {
success: true,
message: "Current active lots that are technically released.",
data: lotInfo,
};
};

View File

@@ -6,7 +6,8 @@ import getPrinters from "./routes/printers/getPritners.js";
import { db } from "../../../database/dbclient.js";
import { settings } from "../../../database/schema/settings.js";
import updateprinters from "./routes/printers/updatePrinters.js";
import { updatePrinters } from "./controller/updatePrinters.js";
import { updatePrinters } from "./controller/printers/updatePrinters.js";
import getLots from "./routes/lots/getLots.js";
const app = new OpenAPIHono();
@@ -15,6 +16,8 @@ const routes = [
//printer
getPrinters,
updateprinters,
// lots
getLots,
] as const;
const setting = await db.select().from(settings);

View File

@@ -0,0 +1,35 @@
// an external way to creating logs
import { createRoute, OpenAPIHono, z } from "@hono/zod-openapi";
import { responses } from "../../../../globalUtils/routeDefs/responses.js";
import { tryCatch } from "../../../../globalUtils/tryCatch.js";
import { getPrinters } from "../../controller/printers/getPrinters.js";
import { getLots } from "../../controller/lots/lots.js";
const app = new OpenAPIHono({ strict: false });
app.openapi(
createRoute({
tags: ["ocp"],
summary: "Returns current active lots that are tech released",
method: "get",
path: "/getlots",
responses: responses(),
}),
async (c) => {
const { data: lotData, error: lotError } = await tryCatch(getLots());
if (lotError) {
return c.json({
success: false,
message: "There was an error getting the printers",
});
}
return c.json({
success: lotData.success,
message: lotData.message,
data: lotData.data,
});
}
);
export default app;

View File

@@ -0,0 +1,55 @@
export const lotQuery = `
select IdMaschinen_ProdPlanung as LabelOnlineID,
IdMaschine as machineID,
MaschinenStandort as MachineLocation,
MaschinenBez as MachineDescription,
IdProdPlanung as LOT,
prolink.lot as ProlinkLot,
IdArtikelvarianten as AV,
ArtikelVariantenBez as Alias,
convert(varchar, add_date, 20) as Add_Date,
Add_user,
idEtikettenDrucker as printerID,
b.name as PrinterName,
CAST(TotalPlannedLoadingUnits as float) as PlannedQTY,
CAST(TotalProducedLoadingUnits as float) as Produced,
ROUND(CAST(TotalPlannedLoadingUnits as float) - CAST(TotalProducedLoadingUnits as float),2) as Remaining,
case
-- checks if someone changed the criteria to something else to trigger the over run
when x.ProzentReserveAnzahlPaletten > 0 then 'yes'
-- if the lot has a decimal in it to allow over running with no intervention
when CAST(TotalPlannedLoadingUnits as float) - floor(CAST(TotalPlannedLoadingUnits as float)) > 0 then 'yes'
else 'no' end as overPrinting,
CustomerHumanReadableId as CustomerId,
CustomerName as CustomerName,
idMaschine as MachineID,
prolink.lastProlinkUpdate as lastProlinkUpdate,
IdEtikettenLayoutPalette as palletLabel,
AnzahlKopienPalette as pallerCopies,
IdEtikettenLayoutKarton as cartonLabel,
AnzahlKopienKarton as cartonCopies,
IsTechnicallyReleased
--*
from AlplaPROD_test1.dbo.V_Maschinen_ProdPlanungen x (nolock)
join
[test1_AlplaPROD2.0_Read].[productionControlling].[ProducedLot] on
x.IdProdPlanung =
[test1_AlplaPROD2.0_Read].[productionControlling].[ProducedLot].ProductionLotHumanReadableId
left join
[test1_AlplaPROD2.0_Read].masterData.Printer as b on
x.IdEtikettenDrucker = b.HumanReadableId
-- adding in prolink lot
left join
(SELECT * from (SELECT IdMaschine as prolinkMachineId,
Produktionslos as lot,
Upd_Date as lastProlinkUpdate,
ROW_NUMBER() OVER (PARTITION BY IdMaschine ORDER BY Upd_Date DESC) RN_Prolink
FROM AlplaPROD_test1.dbo.T_HistoryProduktionsdaten (nolock)
WHERE Upd_Date BETWEEN DATEADD(DD, - 300, getdate()) AND DATEADD(DD, 1, getdate())) p
WHERE RN_Prolink = 1
) as prolink on
x.idMaschine = prolink.prolinkMachineId
where IsTechnicallyReleased = 1
`;