test(printers): added in management tab for printers

frontend/src/utils/tableData/printers/printerColumns.tsx

@@ -0,0 +1,68 @@
+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 notifyColumns: ColumnDef<Adjustmnets>[] = [
+    {
+        accessorKey: "name",
+        header: () => <div className="text-left">Name</div>,
+    },
+    {
+        accessorKey: "description",
+        header: "Description",
+        cell: ({ row }) => {
+            return (
+                <div className="text-left font-medium">
+                    <p className="max-w-48 text-pretty">
+                        {row.getValue("description")}
+                    </p>
+                </div>
+            );
+        },
+    },
+
+    {
+        accessorKey: "checkInterval",
+        header: "Check Interval",
+    },
+    {
+        accessorKey: "timeType",
+        header: "Time tpye",
+    },
+    {
+        accessorKey: "emails",
+        header: "Emails",
+    },
+    {
+        accessorKey: "active",
+        header: "Active",
+    },
+    {
+        accessorKey: "lastRan",
+        header: "Last Ran",
+        cell: ({ row }) => {
+            if (row.getValue("lastRan")) {
+                const correctDate = format(
+                    row.getValue("lastRan"),
+                    "M/d/yyyy hh:mm"
+                );
+                return (
+                    <div className="text-left font-medium">{correctDate}</div>
+                );
+            }
+        },
+    },
+];

frontend/src/utils/tableData/printers/printerData.tsx

@@ -0,0 +1,134 @@
+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";
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    //style: any;
+}
+
+export function NotifyTable<TData, TValue>({
+    columns,
+    data,
+    //style,
+}: DataTableProps<TData, TValue>) {
+    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 (
+        <div
+        // style={{
+        //     width: `${parseInt(style.width.replace("px", "")) - 50}px`,
+        //     height: `${parseInt(style.height.replace("px", "")) - 150}px`,
+        //     cursor: "move",
+        // }}
+        >
+            <div>
+                <Table
+                // style={{
+                //     width: `${parseInt(style.width.replace("px", "")) - 50}px`,
+                //     height: `${parseInt(style.height.replace("px", "")) - 200}px`,
+                //     cursor: "move",
+                // }}
+                >
+                    <TableHeader>
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map((header) => {
+                                    return (
+                                        <TableHead key={header.id}>
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                      header.column.columnDef
+                                                          .header,
+                                                      header.getContext()
+                                                  )}
+                                        </TableHead>
+                                    );
+                                })}
+                            </TableRow>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map((row) => (
+                                <TableRow
+                                    key={row.id}
+                                    data-state={
+                                        row.getIsSelected() && "selected"
+                                    }
+                                >
+                                    {row.getVisibleCells().map((cell) => (
+                                        <TableCell key={cell.id}>
+                                            {flexRender(
+                                                cell.column.columnDef.cell,
+                                                cell.getContext()
+                                            )}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell
+                                    colSpan={columns.length}
+                                    className="h-24 text-center"
+                                >
+                                    No results.
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            </div>
+            <div className="flex items-center justify-end space-x-2 py-4">
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => table.previousPage()}
+                    disabled={!table.getCanPreviousPage()}
+                >
+                    Previous
+                </Button>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => table.nextPage()}
+                    disabled={!table.getCanNextPage()}
+                >
+                    Next
+                </Button>
+            </div>
+        </div>
+    );
+}