test(reporting): more reporting tables for different reports

frontend/src/utils/querys/logistics/getPPOO.tsx

@@ -0,0 +1,20 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getPPOO() {
+    return queryOptions({
+        queryKey: ["getPPOO"],
+        queryFn: () => fetchStockSilo(),
+        //enabled:
+        staleTime: 1000,
+        refetchInterval: 2 * 2000,
+        refetchOnWindowFocus: true,
+    });
+}
+
+const fetchStockSilo = async () => {
+    const { data } = await axios.get(`/api/logistics/getppoo`);
+    // if we are not localhost ignore the devDir setting.
+    //const url: string = window.location.host.split(":")[0];
+    return data.data ?? [];
+};

frontend/src/utils/querys/logistics/siloAdjustments/getStockSilo.tsx

@@ -4,7 +4,7 @@ import axios from "axios";
 export function getStockSilo() {
     const token = localStorage.getItem("auth_token");
     return queryOptions({
-        queryKey: ["getUsers"],
+        queryKey: ["getSiloData"],
         queryFn: () => fetchStockSilo(token),
         enabled: !!token, // Prevents query if token is null
         staleTime: 1000,

frontend/src/utils/tableData/ppoo/ppooColumns.tsx

@@ -0,0 +1,46 @@
+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 columns: ColumnDef<Adjustmnets>[] = [
+    {
+        accessorKey: "MachineLocation",
+        header: () => <div className="text-left">Line</div>,
+    },
+    {
+        accessorKey: "ArticleHumanReadableId",
+        header: "AV",
+    },
+    {
+        accessorKey: "RunningNumber",
+        header: "Running Number",
+    },
+    {
+        accessorKey: "ProductionDate",
+        header: "Booked in",
+        cell: ({ row }) => {
+            if (row.getValue("ProductionDate")) {
+                const correctDate = format(
+                    row.getValue("ProductionDate"),
+                    "M/d/yyyy hh:mm"
+                );
+                return (
+                    <div className="text-left font-medium">{correctDate}</div>
+                );
+            }
+        },
+    },
+];

frontend/src/utils/tableData/ppoo/ppooData.tsx

@@ -0,0 +1,124 @@
+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";
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    style: any;
+}
+
+export function PPOOTable<TData, TValue>({
+    columns,
+    data,
+    style,
+}: DataTableProps<TData, TValue>) {
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+    });
+
+    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>
+    );
+}

frontend/src/utils/tableData/siloAdjustmentHist/siloData.tsx

@@ -21,7 +21,7 @@ interface DataTableProps<TData, TValue> {
     data: TData[];
 }
 
-export function DataTable<TData, TValue>({
+export function SiloTable<TData, TValue>({
     columns,
     data,
 }: DataTableProps<TData, TValue>) {