diff --git a/frontend/src/components/production/ocp/LabelLog.tsx b/frontend/src/components/production/ocp/LabelLog.tsx index ed972e3..48a208b 100644 --- a/frontend/src/components/production/ocp/LabelLog.tsx +++ b/frontend/src/components/production/ocp/LabelLog.tsx @@ -1,155 +1,27 @@ 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 { useQuery } from "@tanstack/react-query"; import { getlabels } from "@/utils/querys/production/labels"; -import { format } from "date-fns"; -const labelLogs = [ - { key: "line", label: "Line" }, - { key: "printerName", label: "Printer" }, - { key: "runningNr", label: "Running #" }, - { key: "upd_date", label: "Label date" }, - { key: "status", label: "Label Status" }, - //{key: "reprint", label: "Reprint"}, // removing the reprint button for now until repritning is working as intended -]; +import { LabelTable } from "@/utils/tableData/production/labels/labelData"; +import { labelolumns } from "@/utils/tableData/production/labels/labelColumns"; + export default function LabelLog() { const { data, isError, isLoading } = useQuery(getlabels("4")); - if (isError) { - return ( -
- -

Labels for the last 2 hours

+ if (isError) return
Error
; - - - - {labelLogs.map((l) => ( - {l.label} - ))} - - - - - {Array(7) - .fill(0) - .map((_, i) => ( - - - - - - - - - - - - - - - - - - ))} - -
- -
- ); - } + if (isLoading) return
Loading
; const labelData = data ? data : []; return ( -

- {labelData.length === 0 ? ( - No labels have been printed in the last 2 hours - ) : ( - Labels for the last 2 hours - )} -

- - - - {labelLogs.map((l) => ( - {l.label} - ))} - - - {isLoading ? ( - <> - - {Array(7) - .fill(0) - .map((_, i) => ( - - - - - - - - - - - - - - - - - - ))} - - - ) : ( - - {labelData.map((label: any) => ( - - - {label.line} - - - {label.printerName} - - - {label.runningNr} - - - {format( - label?.upd_date.replace("Z", ""), - "M/d/yyyy hh:mm" - )} - - - {label.status} - - - ))} - - )} - - {/* - {labelData.length === 0 && ( -
-

- No labels have been printed in the last 2 hours -

-
- )} - */} -
+ ); } diff --git a/frontend/src/utils/tableData/production/labels/labelColumns.tsx b/frontend/src/utils/tableData/production/labels/labelColumns.tsx new file mode 100644 index 0000000..d6f09e4 --- /dev/null +++ b/frontend/src/utils/tableData/production/labels/labelColumns.tsx @@ -0,0 +1,50 @@ +import { ColumnDef } from "@tanstack/react-table"; +import { format } from "date-fns"; + +// This type is used to define the shape of our data. +// You can use a Zod schema here if you want. +export type Adjustmnets = { + siloAdjust_id: string; + currentStockLevel: string; + newLevel: number; + dateAdjusted: string; + lastDateAdjusted: string; + comment: string; + commentAddedBy: string; + commentDate: string; + add_user: string; +}; + +export const labelolumns: ColumnDef[] = [ + { + accessorKey: "line", + header: () =>
Line
, + }, + { + accessorKey: "printerName", + header: "Printer", + }, + { + accessorKey: "runningNr", + header: "Running Number", + }, + { + accessorKey: "upd_date", + header: "Label Date", + cell: ({ row }) => { + if (row.getValue("upd_date")) { + const correctDate = format( + row.getValue("upd_date"), + "M/d/yyyy hh:mm" + ); + return ( +
{correctDate}
+ ); + } + }, + }, + { + accessorKey: "status", + header: "Label Status", + }, +]; diff --git a/frontend/src/utils/tableData/production/labels/labelData.tsx b/frontend/src/utils/tableData/production/labels/labelData.tsx new file mode 100644 index 0000000..184b0ea --- /dev/null +++ b/frontend/src/utils/tableData/production/labels/labelData.tsx @@ -0,0 +1,174 @@ +import { + ColumnDef, + flexRender, + getCoreRowModel, + useReactTable, + getPaginationRowModel, +} from "@tanstack/react-table"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { Button } from "@/components/ui/button"; +import { useState } from "react"; +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectLabel, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { ScrollArea } from "@/components/ui/scroll-area"; + +interface DataTableProps { + columns: ColumnDef[]; + data: TData[]; + //style: any; +} + +export function LabelTable({ + columns, + data, + //style, +}: DataTableProps) { + const [pagination, setPagination] = useState({ + pageIndex: 0, //initial page index + pageSize: 5, //default page size + }); + const table = useReactTable({ + data, + columns, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + onPaginationChange: setPagination, + state: { + //... + pagination, + }, + }); + + //console.log(parseInt(style.height.replace("px", "")) - 50); + return ( +
+
+
+ {data.length === 0 ? ( + + No labels have been printed in the last 2 hours + + ) : ( + Labels for the last 2 hours + )} + +
+ + + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {header.isPlaceholder + ? null + : flexRender( + header.column + .columnDef.header, + header.getContext() + )} + + ); + })} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + + ))} + + )) + ) : ( + + + No labels. + + + )} + +
+ +
+
+ + +
+
+ ); +}