diff --git a/frontend/src/components/production/ocp/OcpLogs.tsx b/frontend/src/components/production/ocp/OcpLogs.tsx index 0b9d3c1..06ed6b7 100644 --- a/frontend/src/components/production/ocp/OcpLogs.tsx +++ b/frontend/src/components/production/ocp/OcpLogs.tsx @@ -1,27 +1,12 @@ import { LstCard } from "@/components/extendedUI/LstCard"; -import { Button } from "@/components/ui/button"; -import { Skeleton } from "@/components/ui/skeleton"; -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from "@/components/ui/table"; import { getOcpLogs } from "@/utils/querys/production/ocpLogs"; +import { ocpColumns } from "@/utils/tableData/production/ocpLogs/ocpLogColumns"; +import { OcpLogTable } from "@/utils/tableData/production/ocpLogs/ocpLogData"; import { useQuery } from "@tanstack/react-query"; import axios from "axios"; -import { format } from "date-fns"; -import { Trash } from "lucide-react"; -import { toast } from "sonner"; -const labelLogs = [ - { key: "message", label: "Error Message" }, - { key: "created_at", label: "ErrorDat" }, - { key: "clear", label: "Clear" }, - //{key: "reprint", label: "Reprint"}, // removing the reprint button for now until repritning is working as intended -]; +import { useMemo } from "react"; +import { toast } from "sonner"; export default function OcpLogs() { const { data, isError, isLoading } = useQuery(getOcpLogs("4")); @@ -40,121 +25,23 @@ export default function OcpLogs() { toast.error(`There was an error trying to clearing the message.`); } }; + const columns = useMemo(() => ocpColumns(clearLog), [clearLog]); const logData = data ? data : []; if (isError) { - return ( -
- -

Labels for the last 2 hours

- - - - {labelLogs.map((l) => ( - {l.label} - ))} - - + return
Error
; + } - - {Array(7) - .fill(0) - .map((_, i) => ( - - - - - - - - - - - - - - - - - - ))} - -
- -
- ); + if (isLoading) { + return
Loading
; } return ( -

- {data?.length === 0 ? ( - No errors in the last 4 hours - ) : ( - Logs for the last 4 hours - )} -

- - - - {labelLogs.map((l) => ( - {l.label} - ))} - - - {isLoading ? ( - <> - - {Array(7) - .fill(0) - .map((_, i) => ( - - - - - - - - - - - - - - - - - - ))} - - - ) : ( - - {logData.map((label: any) => ( - - -

- {label.message} -

- - - {format( - label?.created_at.replace("Z", ""), - "M/d/yyyy hh:mm" - )} - - - - - - ))} - - )} -
+ ); } diff --git a/frontend/src/utils/tableData/production/ocpLogs/ocpLogColumns.tsx b/frontend/src/utils/tableData/production/ocpLogs/ocpLogColumns.tsx new file mode 100644 index 0000000..9558028 --- /dev/null +++ b/frontend/src/utils/tableData/production/ocpLogs/ocpLogColumns.tsx @@ -0,0 +1,63 @@ +import { Button } from "@/components/ui/button"; +import { ColumnDef } from "@tanstack/react-table"; +import { format } from "date-fns"; +import { Trash } from "lucide-react"; + +// 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 ocpColumns = ( + clearLog: (label: any) => void +): ColumnDef[] => [ + { + accessorKey: "message", + header: () =>
Error Message
, + cell: ({ row }) => { + if (row.getValue("message")) { + return ( +
+ {row.getValue("message")} +
+ ); + } + }, + }, + { + accessorKey: "created_at", + header: "Error Date", + cell: ({ row }) => { + if (row.getValue("created_at")) { + const correctDate = format( + row.getValue("created_at"), + "M/d/yyyy hh:mm" + ); + return ( +
{correctDate}
+ ); + } + }, + }, + { + accessorKey: "clear", + header: "Clear", + cell: ({ row }) => { + const label = row.original; + return ( + + ); + }, + }, +]; diff --git a/frontend/src/utils/tableData/production/ocpLogs/ocpLogData.tsx b/frontend/src/utils/tableData/production/ocpLogs/ocpLogData.tsx new file mode 100644 index 0000000..4c44c5a --- /dev/null +++ b/frontend/src/utils/tableData/production/ocpLogs/ocpLogData.tsx @@ -0,0 +1,183 @@ +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"; +import { LstCard } from "@/components/extendedUI/LstCard"; +import axios from "axios"; +import { toast } from "sonner"; + +interface DataTableProps { + columns: ColumnDef[]; + data: TData[]; + //style: any; +} + +export function OcpLogTable({ + 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 errors in the last 4 hours + ) : ( + Logs for the last 4 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 results. + + + )} + +
+ +
+
+ + +
+ + ); +}