feat(frontend): migrated old > new silo adjustments

moved the apps around so we can use 1 url for cors bs
This commit is contained in:
2025-10-25 17:22:51 -05:00
parent d46ef922f3
commit 425f8f5f71
179 changed files with 7511 additions and 2724 deletions

View File

@@ -0,0 +1,25 @@
// type Feature = string;
// interface Module {
// id: number;
// name: string;
// features: Feature[];
// active: boolean;
// }
import { useModuleStore } from "../-lib/store/useModuleStore";
// const modules: Module[] = [
// {id: 1, name: "production", active: true, features: ["view", "edit", "approve"]},
// {id: 2, name: "logistics", active: true, features: ["view", "assign", "track"]},
// {id: 3, name: "quality", active: false, features: ["view", "audit", "approve"]},
// {id: 4, name: "forklift", active: true, features: ["view", "request", "operate"]},
// {id: 5, name: "admin", active: true, features: ["view", "manage_users", "view_logs", "settings"]},
// ];
export function moduleActive(moduleName: string): boolean {
const { modules } = useModuleStore();
const module = modules?.find(
(m: any) => m.name === moduleName && m.active === true,
);
return module ? true : false;
}

View File

@@ -0,0 +1,14 @@
import axios from "axios";
export const oldServerUrl = async () => {
const res = await axios.get("/lst/api/system/settings");
const settings = res.data.data;
console.log("Settings", settings);
const server = settings.filter((n: any) => n.name === "v1Server");
const port = settings.filter((n: any) => n.name === "v1Port");
const url = `http://${server[0]?.value}:${port[0]?.value}`;
console.log(url);
return url;
};

View File

@@ -0,0 +1,25 @@
import { queryOptions } from "@tanstack/react-query";
import axios from "axios";
export function getModules(token: string) {
return queryOptions({
queryKey: ["modules"],
queryFn: () => fetchSettings(token),
enabled: !!token,
//staleTime: 1000,
refetchOnWindowFocus: true,
});
}
const fetchSettings = async (token: string) => {
const { data } = await axios.get("/api/server/modules", {
headers: { Authorization: `Bearer ${token}` },
});
// if we are not localhost ignore the devDir setting.
const url: string = window.location.host.split(":")[0];
let settingsData = data.data;
if (url != "localhost") {
settingsData.filter((n: any) => n.name === "devDir");
}
return settingsData;
};

View File

@@ -0,0 +1,26 @@
import { queryOptions } from "@tanstack/react-query";
import axios from "axios";
export function getnotifications() {
const token = localStorage.getItem("auth_token");
return queryOptions({
queryKey: ["getNotifications"],
queryFn: () => fetchUsers(token),
enabled: !!token, // Prevents query if token is null
staleTime: 1000,
refetchInterval: 2 * 2000,
refetchOnWindowFocus: true,
});
}
const fetchUsers = async (token: string | null) => {
const { data } = await axios.get(`/api/notify/notifications`, {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
});
// if we are not localhost ignore the devDir setting.
//const url: string = window.location.host.split(":")[0];
return data.data ?? [];
};

View File

@@ -0,0 +1,25 @@
import { queryOptions } from "@tanstack/react-query";
import axios from "axios";
export function getSubModules(token: string) {
return queryOptions({
queryKey: ["submodules"],
queryFn: () => fetchSettings(token),
enabled: !!token,
//staleTime: 1000,
refetchOnWindowFocus: true,
});
}
const fetchSettings = async (token: string) => {
const { data } = await axios.get("/api/server/submodules", {
headers: { Authorization: `Bearer ${token}` },
});
// if we are not localhost ignore the devDir setting.
const url: string = window.location.host.split(":")[0];
let settingsData = data.data;
if (url != "localhost") {
settingsData.filter((n: any) => n.name === "devDir");
}
return settingsData;
};

View File

@@ -0,0 +1,26 @@
import { queryOptions } from "@tanstack/react-query";
import axios from "axios";
export function getUserRoles() {
const token = localStorage.getItem("auth_token");
return queryOptions({
queryKey: ["getUsers"],
queryFn: () => fetchUsers(token),
enabled: !!token, // Prevents query if token is null
staleTime: 1000,
//refetchInterval: 2 * 2000,
refetchOnWindowFocus: true,
});
}
const fetchUsers = async (token: string | null) => {
const { data } = await axios.get(`/api/auth/allusersroles`, {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
});
// if we are not localhost ignore the devDir setting.
//const url: string = window.location.host.split(":")[0];
return data.data ?? [];
};

View File

@@ -0,0 +1,26 @@
import { queryOptions } from "@tanstack/react-query";
import axios from "axios";
export function getUsers() {
const token = localStorage.getItem("auth_token");
return queryOptions({
queryKey: ["getUsers"],
queryFn: () => fetchUsers(token),
enabled: !!token, // Prevents query if token is null
staleTime: 1000,
refetchInterval: 2 * 2000,
refetchOnWindowFocus: true,
});
}
const fetchUsers = async (token: string | null) => {
const { data } = await axios.get(`/api/auth/allusers`, {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
});
// if we are not localhost ignore the devDir setting.
//const url: string = window.location.host.split(":")[0];
return data.data ?? [];
};

View File

@@ -0,0 +1,25 @@
import { queryOptions } from "@tanstack/react-query";
import axios from "axios";
export function getinventoryCheck(data: any) {
return queryOptions({
queryKey: ["getInvCheck"],
queryFn: () => fetchStockSilo(data),
//enabled:
staleTime: 1000,
refetchInterval: 1000 * 60 * 15,
refetchOnWindowFocus: true,
});
}
const fetchStockSilo = async (info: any) => {
//console.log("What tpye of info:", info);
const { data } = await axios.post(`/api/logistics/cyclecountcheck`, {
age: info.age ? parseInt(info.age) : null,
type: "",
});
// if we are not localhost ignore the devDir setting.
//const url: string = window.location.host.split(":")[0];
return data.data ?? [];
};

View File

@@ -0,0 +1,22 @@
import { queryOptions } from "@tanstack/react-query";
import axios from "axios";
export function getOpenOrders() {
return queryOptions({
queryKey: ["getOpenOrders"],
queryFn: () => fetchStockSilo(),
//enabled:
staleTime: 1000,
refetchInterval: 1000 * 60 * 15,
refetchOnWindowFocus: true,
});
}
const fetchStockSilo = async () => {
const { data } = await axios.get(
`/api/datamart/getopenorders?sDay=15&eDay=45`
);
// if we are not localhost ignore the devDir setting.
//const url: string = window.location.host.split(":")[0];
return data.data ?? [];
};

View File

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

View File

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

View File

@@ -0,0 +1,23 @@
import { queryOptions } from "@tanstack/react-query";
import axios from "axios";
export function getMachineConnected(siloCon: any) {
return queryOptions({
queryKey: [`siloConnectionAttached-${siloCon.siloID}`],
queryFn: () => fetchStockSilo(siloCon),
//enabled:
//staleTime: 1000,
//refetchInterval: 60 * 1000,
refetchOnWindowFocus: true,
});
}
const fetchStockSilo = async (siloCon: any) => {
const { data } = await axios.post(`/lst/old/api/logistics/siloconnection`, {
siloID: siloCon.siloID,
connectionType: siloCon.connectionType,
});
// if we are not localhost ignore the devDir setting.
//const url: string = window.location.host.split(":")[0];
return data.data ?? [];
};

View File

@@ -0,0 +1,23 @@
import { queryOptions } from "@tanstack/react-query";
import axios from "axios";
export function getMachineNotConnected(siloCon: any) {
return queryOptions({
queryKey: [`siloConnectionNotConnected-${siloCon.siloID}`],
queryFn: () => fetchStockSilo(siloCon),
//enabled:
//staleTime: 1000,
//refetchInterval: 60 * 1000,
refetchOnWindowFocus: true,
});
}
const fetchStockSilo = async (siloCon: any) => {
const { data } = await axios.post(`/lst/old/api/logistics/siloconnection`, {
siloID: siloCon.siloID,
connectionType: siloCon.connectionType,
});
// if we are not localhost ignore the devDir setting.
//const url: string = window.location.host.split(":")[0];
return data.data ?? [];
};

View File

@@ -0,0 +1,26 @@
import { queryOptions } from "@tanstack/react-query";
import axios from "axios";
export function getAdjustments() {
const token = localStorage.getItem("auth_token");
return queryOptions({
queryKey: ["getAdjustments"],
queryFn: () => fetchStockSilo(token),
//enabled: !!token, // Prevents query if token is null
staleTime: 1000,
refetchInterval: 2 * 2000,
refetchOnWindowFocus: true,
});
}
const fetchStockSilo = async (token: string | null) => {
const { data } = await axios.get(`/lst/old/api/logistics/getsilosdjustment`, {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
});
// if we are not localhost ignore the devDir setting.
//const url: string = window.location.host.split(":")[0];
return data.data ?? [];
};

View File

@@ -0,0 +1,25 @@
import { queryOptions } from "@tanstack/react-query";
import axios from "axios";
export function getStockSilo() {
return queryOptions({
queryKey: ["getSiloData"],
queryFn: () => fetchStockSilo(),
//enabled: !!token, // Prevents query if token is null
staleTime: 1000,
//refetchInterval: 2 * 2000,
refetchOnWindowFocus: true,
});
}
const fetchStockSilo = async () => {
const { data } = await axios.get(`/lst/old/api/logistics/getstocksilo`, {
headers: {
"Content-Type": "application/json",
},
});
// if we are not localhost ignore the devDir setting.
//const url: string = window.location.host.split(":")[0];
return data.data ?? [];
};

View File

@@ -0,0 +1,25 @@
import { queryOptions } from "@tanstack/react-query";
import axios from "axios";
export function getProdPerms(token: string) {
return queryOptions({
queryKey: ["prodPerms"],
queryFn: () => fetch(token),
enabled: !!token,
staleTime: 1000,
refetchOnWindowFocus: true,
});
}
const fetch = async (token: string) => {
const { data } = await axios.get("/api/produser/prodrole", {
headers: { Authorization: `Bearer ${token}` },
});
// if we are not localhost ignore the devDir setting.
// const url: string = window.location.host.split(":")[0];
// let settingsData = data.data;
// if (url != "localhost") {
// settingsData.filter((n: any) => n.name === "devDir");
// }
return data.data;
};

View File

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

View File

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

View File

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

View File

@@ -0,0 +1,21 @@
import { queryOptions } from "@tanstack/react-query";
import axios from "axios";
export function getlots() {
return queryOptions({
queryKey: ["lots"],
queryFn: () => fetchSettings(),
staleTime: 10 * 1000,
refetchInterval: 1000 * 10,
refetchOnWindowFocus: true,
});
}
const fetchSettings = async () => {
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;
return lotData ?? [];
};

View File

@@ -0,0 +1,22 @@
import { queryOptions } from "@tanstack/react-query";
import axios from "axios";
export function getOcpLogs(hours: string) {
return queryOptions({
queryKey: ["ocpLogs"],
queryFn: () => fetchSettings(hours),
staleTime: 1000,
refetchInterval: 2 * 1000,
refetchOnWindowFocus: true,
});
}
const fetchSettings = async (hours: string) => {
const { data } = await axios.get(
`/api/logger/logs?service=ocp&service=rfid&service=dyco&level=error&level=warn&hours=${hours}`
);
// if we are not localhost ignore the devDir setting.
//const url: string = window.location.host.split(":")[0];
return data.data ?? [];
};

View File

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

View File

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

View File

@@ -0,0 +1,19 @@
import {queryOptions} from "@tanstack/react-query";
import axios from "axios";
export function getServers(token: string) {
return queryOptions({
queryKey: ["servers"],
queryFn: () => fetchSettings(token),
enabled: !!token,
staleTime: 1000,
refetchInterval: 2500,
refetchOnWindowFocus: true,
});
}
const fetchSettings = async (token: string) => {
const {data} = await axios.get("/api/server/servers", {headers: {Authorization: `Bearer ${token}`}});
return data.data;
};

View File

@@ -0,0 +1,25 @@
import { queryOptions } from "@tanstack/react-query";
import axios from "axios";
export function getSettings(token: string) {
return queryOptions({
queryKey: ["settings"],
queryFn: () => fetch(token),
enabled: !!token,
staleTime: 1000,
refetchOnWindowFocus: true,
});
}
const fetch = async (token: string) => {
const { data } = await axios.get("/api/server/settings", {
headers: { Authorization: `Bearer ${token}` },
});
// if we are not localhost ignore the devDir setting.
// const url: string = window.location.host.split(":")[0];
// let settingsData = data.data;
// if (url != "localhost") {
// settingsData.filter((n: any) => n.name === "devDir");
// }
return data.data;
};

View File

@@ -0,0 +1,27 @@
import { type ColumnDef } from "@tanstack/react-table";
// 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 invColumns: ColumnDef<Adjustmnets>[] = [
{
accessorKey: "Description",
header: () => <div className="text-left">Lane</div>,
},
{
accessorKey: "DaysSinceLast",
header: "Age",
//enableSorting: true,
},
];

View File

@@ -0,0 +1,164 @@
import {
type ColumnDef,
flexRender,
getCoreRowModel,
getPaginationRowModel,
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";
//import { Button } from "@/components/ui/button";
import { useState } from "react";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { LstCard } from "../../../-components/extendedUi/LstCard";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
info: any;
}
type ColumnSort = {
id: string;
desc: boolean;
};
type SortingState = ColumnSort[];
export function InvTable<TData, TValue>({
columns,
data,
info,
}: DataTableProps<TData, TValue>) {
const [sorting, setSorting] = useState<SortingState>([]);
const [pagination, setPagination] = useState({
pageIndex: 0, //initial page index
pageSize: 500, //default page size
});
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onPaginationChange: setPagination,
getSortedRowModel: getSortedRowModel(),
state: {
//...
pagination,
sorting,
},
manualSorting: true,
onSortingChange: setSorting,
initialState: {
sorting: [
{
id: "DaysSinceLast",
desc: true,
},
],
},
});
//console.log(table.getState().sorting);
//console.log(parseInt(style.height.replace("px", "")) - 50);
// console.log(info);
return (
<LstCard
className="p-3"
// style={{
// width: `${parseInt(style.width.replace("px", "")) - 50}px`,
// height: `${parseInt(style.height.replace("px", "")) - 150}px`,
// cursor: "move",
// }}
//style={{ overflow: "auto" }}
>
<div>
<div className="flex flex-row justify-between">
<p className="text-center text-pretty">
{info.rowType} {data.length > 0 ? "lanes" : "lane"} older than:{" "}
{info.age}, {data.length} needing to be completed
</p>
</div>
<ScrollArea className="h-72 rounded-md border m-2">
<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>
</ScrollArea>
</div>
{/* <div className="flex items-center justify-end space-x-2">
<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> */}
</LstCard>
);
}

View File

@@ -0,0 +1,61 @@
import { type 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>;
}
},
},
];

View File

@@ -0,0 +1,131 @@
import {
type ColumnDef,
flexRender,
getCoreRowModel,
getPaginationRowModel,
useReactTable,
} from "@tanstack/react-table";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
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>
);
}

View File

@@ -0,0 +1,63 @@
import { type ColumnDef } from "@tanstack/react-table";
//import { format } from "date-fns-tz";
// 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 openOrderColumns: ColumnDef<Adjustmnets>[] = [
{
accessorKey: "Remark",
header: () => <div className="text-left">Carrier/Remark</div>,
cell: ({ row }) => {
const remark: any = row.getValue("Remark");
if (!remark) {
return <p className="text-gray-700/35">No remark</p>;
}
return <p>{remark}</p>;
},
},
{
accessorKey: "DeliveryAddressDescription",
header: "Delivery Address",
},
{
accessorKey: "header",
header: "PO",
},
{
accessorKey: "releaseNumber",
header: "Release #",
},
{
accessorKey: "deliveryDate",
header: "DeliveryDate",
cell: ({ row }) => {
if (row.getValue("deliveryDate")) {
// const correctDate = format(
// row.getValue("deliveryDate"),
// "M/d/yyyy hh:mm"
// );
return (
<div className="text-left font-medium">
{row.getValue("deliveryDate")}
</div>
);
}
},
},
{
accessorKey: "customerItemNumber",
header: "Material #",
},
];

View File

@@ -0,0 +1,236 @@
import { useLocation } from "@tanstack/react-router";
import {
type ColumnDef,
flexRender,
getCoreRowModel,
getPaginationRowModel,
useReactTable,
} from "@tanstack/react-table";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { LstCard } from "../../../-components/extendedUi/LstCard";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
//style: any;
}
export function OpenOrderTable<TData, TValue>({
columns,
data,
//style,
}: DataTableProps<TData, TValue>) {
const [pagination, setPagination] = useState({
pageIndex: 0, //initial page index
pageSize: 5, //default page size
});
const location = useLocation();
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onPaginationChange: setPagination,
state: {
//...
pagination,
},
});
//console.log(parseInt(style.height.replace("px", "")) - 50);
return (
<LstCard
className="p-3"
// style={{
// width: `${parseInt(style.width.replace("px", "")) - 50}px`,
// height: `${parseInt(style.height.replace("px", "")) - 150}px`,
// cursor: "move",
// }}
//style={{ overflow: "auto" }}
>
<div>
<div className="flex flex-row justify-between">
<p className="text-center">Open orders </p>
<Select
value={pagination.pageSize.toString()}
onValueChange={(e) =>
setPagination({
...pagination,
pageSize: parseInt(e),
})
}
>
<SelectTrigger className="w-[180px]">
<SelectValue
//id={field.name}
placeholder="Select Page"
/>
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Page Size</SelectLabel>
<SelectItem value="5">5</SelectItem>
<SelectItem value="10">10</SelectItem>
<SelectItem value="50">50</SelectItem>
<SelectItem value="100">100</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
{location.pathname === "/" ? (
<ScrollArea className="h-72 rounded-md border m-2">
<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>
</ScrollArea>
) : (
<ScrollArea className={`h-[725px] rounded-md border m-2`}>
<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>
</ScrollArea>
)}
</div>
<div className="flex items-center justify-end space-x-2">
<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>
</LstCard>
);
}

View File

@@ -0,0 +1,44 @@
import { type ColumnDef } from "@tanstack/react-table";
import { format } from "date-fns-tz";
// 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: "Label",
},
{
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>;
}
},
},
];

View File

@@ -0,0 +1,174 @@
import {
type ColumnDef,
flexRender,
getCoreRowModel,
getPaginationRowModel,
useReactTable,
} from "@tanstack/react-table";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { LstCard } from "../../../-components/extendedUi/LstCard";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
//style: any;
}
export function PPOOTable<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 (
<LstCard
className="p-3"
// style={{
// width: `${parseInt(style.width.replace("px", "")) - 50}px`,
// height: `${parseInt(style.height.replace("px", "")) - 150}px`,
// cursor: "move",
// }}
//style={{ overflow: "auto" }}
>
<div>
<div className="flex flex-row justify-between">
<p className="text-center">PPOO Data </p>
<Select
value={pagination.pageSize.toString()}
onValueChange={(e) =>
setPagination({
...pagination,
pageSize: parseInt(e),
})
}
>
<SelectTrigger className="w-[180px]">
<SelectValue
//id={field.name}
placeholder="Select Page"
/>
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Page Size</SelectLabel>
<SelectItem value="5">5</SelectItem>
<SelectItem value="10">10</SelectItem>
<SelectItem value="50">50</SelectItem>
<SelectItem value="100">100</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<ScrollArea className="h-72 rounded-md border m-2">
<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>
</ScrollArea>
</div>
<div className="flex items-center justify-end space-x-2">
<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>
</LstCard>
);
}

View File

@@ -0,0 +1,61 @@
import { type 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>;
}
},
},
];

View File

@@ -0,0 +1,131 @@
import {
type ColumnDef,
flexRender,
getCoreRowModel,
getPaginationRowModel,
useReactTable,
} from "@tanstack/react-table";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
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>
);
}

View File

@@ -0,0 +1,84 @@
//import { fixTime } from "@/utils/fixTime";
import { useQuery } from "@tanstack/react-query";
import { type ColumnDef } from "@tanstack/react-table";
import axios from "axios";
import { useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { getReaders } from "../../../querys/rfid/getReaders";
// This type is used to define the shape of our data.
// You can use a Zod schema here if you want.
export type Adjustmnets = {
ratio_id: string;
name: string;
autoLabel: number;
manualLabel: string;
};
export const labelRatioColumns: ColumnDef<Adjustmnets>[] = [
// {
// accessorKey: "line",
// header: () => <div className="text-left">Line</div>,
// },
{
accessorKey: "autoLabel",
header: "Auto Labels",
},
{
accessorKey: "manualLabel",
header: "Manual Labels",
},
{
accessorKey: "goodRatio",
header: "Ratio",
cell: ({ row }) => {
const goodRatio =
(parseInt(row.getValue("autoLabel")) /
(parseInt(row.getValue("autoLabel")) +
parseInt(row.getValue("manualLabel")))) *
100;
return (
<div className="text-center font-medium">
{isNaN(goodRatio) ? 0 : goodRatio.toFixed(2)}%
</div>
);
},
},
{
accessorKey: "reset",
header: "Reset Reads",
cell: () => {
const { refetch } = useQuery(getReaders());
const [readerReset, setReaderReset] = useState(false);
const resetReads = async () => {
setReaderReset(true);
try {
const res = await axios.post("/api/ocp/resetlabelratio", {
reader: name,
});
if (res.status === 200) {
toast.success(res.data.message);
setReaderReset(false);
} else {
toast.error(res.data.message);
setReaderReset(false);
}
} catch (error: any) {
toast.error(error.data.message);
setReaderReset(false);
}
refetch();
};
return (
<div className="text-left font-medium">
<Button className="h-4" onClick={resetReads} disabled={readerReset}>
Reset
</Button>
</div>
);
},
},
];

View File

@@ -0,0 +1,119 @@
import {
type ColumnDef,
flexRender,
getCoreRowModel,
getPaginationRowModel,
useReactTable,
} from "@tanstack/react-table";
import { useState } from "react";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { LstCard } from "@/routes/_old/old/-components/extendedUi/LstCard";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
//style: any;
}
export function LabelRatioTable<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 (
<LstCard>
<div>
<div className="flex flex-row justify-between">
{data.length === 0 ? (
<span className="text-center">
No labels printed since last reset.
</span>
) : (
<span>Label Ratio</span>
)}
</div>
<ScrollArea className="max-h-32 rounded-md border m-2">
<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 labels.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</ScrollArea>
</div>
</LstCard>
);
}

View File

@@ -0,0 +1,48 @@
//import { fixTime } from "@/utils/fixTime";
import { type ColumnDef } from "@tanstack/react-table";
import { format } from "date-fns-tz";
// 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<Adjustmnets>[] = [
{
accessorKey: "line",
header: () => <div className="text-left">Line</div>,
},
{
accessorKey: "printerName",
header: "Printer",
},
{
accessorKey: "runningNr",
header: "Running Number",
},
{
accessorKey: "upd_date",
header: "Label Date",
cell: ({ row }) => {
if (row.getValue("upd_date")) {
const correctDate: any = row.getValue("upd_date");
const strippedDate = correctDate.replace("Z", ""); // Remove Z
const formattedDate = format(strippedDate, "MM/dd/yyyy HH:mm");
return <div className="text-left font-medium">{formattedDate}</div>;
}
},
},
{
accessorKey: "status",
header: "Label Status",
},
];

View File

@@ -0,0 +1,171 @@
import {
type ColumnDef,
flexRender,
getCoreRowModel,
getPaginationRowModel,
useReactTable,
} from "@tanstack/react-table";
import { useState } from "react";
import { Button } from "../../../../../../../components/ui/button";
import { ScrollArea } from "../../../../../../../components/ui/scroll-area";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "../../../../../../../components/ui/select";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "../../../../../../../components/ui/table";
import { LstCard } from "../../../../-components/extendedUi/LstCard";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
//style: any;
}
export function LabelTable<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 (
<LstCard>
<div>
<div className="flex flex-row justify-between">
{data.length === 0 ? (
<span>No labels have been printed in the last 2 hours</span>
) : (
<span>Labels for the last 2 hours</span>
)}
<Select
value={pagination.pageSize.toString()}
onValueChange={(e) =>
setPagination({
...pagination,
pageSize: parseInt(e),
})
}
>
<SelectTrigger className="w-[180px]">
<SelectValue
//id={field.name}
placeholder="Select Page"
/>
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Page Size</SelectLabel>
<SelectItem value="5">5</SelectItem>
<SelectItem value="10">10</SelectItem>
<SelectItem value="50">50</SelectItem>
<SelectItem value="100">100</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<ScrollArea className="h-72 rounded-md border m-2">
<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 labels.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</ScrollArea>
</div>
<div className="flex items-center justify-end space-x-2">
<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>
</LstCard>
);
}

View File

@@ -0,0 +1,60 @@
import { type ColumnDef } from "@tanstack/react-table";
import { format } from "date-fns-tz";
import { Trash } from "lucide-react";
import { Button } from "../../../../../../../components/ui/button";
// 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<any>[] => [
{
accessorKey: "message",
header: () => <div className="text-left">Error Message</div>,
cell: ({ row }) => {
if (row.getValue("message")) {
return (
<div className="text-left font-medium text-pretty max-w-48">
{row.getValue("message")}
</div>
);
}
},
},
{
accessorKey: "created_at",
header: "Error Date",
cell: ({ row }) => {
if (row.getValue("created_at")) {
const correctDate: any = row.getValue("created_at");
const strippedDate = correctDate.replace("Z", ""); // Remove Z
const formattedDate = format(strippedDate, "MM/dd/yyyy HH:mm");
return <div className="text-left font-medium">{formattedDate}</div>;
}
},
},
{
accessorKey: "clear",
header: "Clear",
cell: ({ row }) => {
const label = row.original;
return (
<Button size="icon" onClick={() => clearLog(label)}>
<Trash />
</Button>
);
},
},
];

View File

@@ -0,0 +1,179 @@
import {
type ColumnDef,
flexRender,
getCoreRowModel,
getPaginationRowModel,
useReactTable,
} from "@tanstack/react-table";
import { useState } from "react";
import { Button } from "../../../../../../../components/ui/button";
import { ScrollArea } from "../../../../../../../components/ui/scroll-area";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "../../../../../../../components/ui/select";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "../../../../../../../components/ui/table";
import { LstCard } from "../../../../-components/extendedUi/LstCard";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
//style: any;
}
export function OcpLogTable<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 (
<LstCard
className="p-3"
// style={{
// width: `${parseInt(style.width.replace("px", "")) - 50}px`,
// height: `${parseInt(style.height.replace("px", "")) - 150}px`,
// cursor: "move",
// }}
//style={{ overflow: "auto" }}
>
<div>
<div className="flex flex-row justify-between">
{data?.length === 0 ? (
<span>No errors in the last 4 hours</span>
) : (
<span>Logs for the last 4 hours</span>
)}
<Select
value={pagination.pageSize.toString()}
onValueChange={(e) =>
setPagination({
...pagination,
pageSize: parseInt(e),
})
}
>
<SelectTrigger className="w-[180px]">
<SelectValue
//id={field.name}
placeholder="Select Page"
/>
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Page Size</SelectLabel>
<SelectItem value="5">5</SelectItem>
<SelectItem value="10">10</SelectItem>
<SelectItem value="50">50</SelectItem>
<SelectItem value="100">100</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<ScrollArea className="h-72 rounded-md border m-2">
<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>
</ScrollArea>
</div>
<div className="flex items-center justify-end space-x-2">
<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>
</LstCard>
);
}

View File

@@ -0,0 +1,141 @@
//import { fixTime } from "@/utils/fixTime";
import { useQuery } from "@tanstack/react-query";
import { type ColumnDef } from "@tanstack/react-table";
import axios from "axios";
import { format } from "date-fns-tz";
import { useState } from "react";
import { toast } from "sonner";
import { Button } from "../../../../../../../components/ui/button";
import { getReaders } from "../../../querys/rfid/getReaders";
// This type is used to define the shape of our data.
// You can use a Zod schema here if you want.
export type Readers = {
rfidReader_id: string;
reader: string;
readerIP: string;
lastHeartBeat: string;
lastTrigger: string;
lastTriggerGood: boolean;
active: boolean;
lastTagScanned: string;
goodReads: number;
badReads: number;
totalReads: number;
goodRatio: number;
};
export const readerColumns: ColumnDef<Readers>[] = [
{
accessorKey: "reader",
header: () => <div className="text-left">Name</div>,
},
{
accessorKey: "lastHeartBeat",
header: "Last HeartBeat",
cell: ({ row }) => {
if (row.getValue("lastHeartBeat")) {
const correctDate: any = row.getValue("lastHeartBeat");
const strippedDate = correctDate.replace("Z", ""); // Remove Z
const formattedDate = format(strippedDate, "MM/dd/yyyy HH:mm");
return <div className="text-left font-medium">{formattedDate}</div>;
}
},
},
{
accessorKey: "lastTrigger",
header: "Last Trigger",
cell: ({ row }) => {
if (row.getValue("lastTrigger")) {
const correctDate: any = row.getValue("lastTrigger");
const strippedDate = correctDate.replace("Z", ""); // Remove Z
const formattedDate = format(strippedDate, "MM/dd/yyyy HH:mm");
return <div className="text-left font-medium">{formattedDate}</div>;
}
},
},
{
accessorKey: "lastTriggerGood",
header: "Last Trigger Status",
},
{
accessorKey: "lastTagScanned",
header: "Last Scanned Tag",
},
{
accessorKey: "goodReads",
header: "Total Good Reads",
},
{
accessorKey: "badReads",
header: "Total Bad Reads",
},
{
accessorKey: "totalReads",
header: "Total Reads",
cell: ({ row }) => {
const total =
parseInt(row.getValue("goodReads")) +
parseInt(row.getValue("badReads"));
return <div className="text-left font-medium">{total}</div>;
},
},
{
accessorKey: "goodRatio",
header: "Good Ratio",
cell: ({ row }) => {
const goodRatio =
(parseInt(row.getValue("goodReads")) /
(parseInt(row.getValue("goodReads")) +
parseInt(row.getValue("badReads")))) *
100;
return (
<div className="text-left font-medium">
{isNaN(goodRatio) ? 0 : goodRatio.toFixed(2)}%
</div>
);
},
},
{
accessorKey: "reset",
header: "Reset Reads",
cell: ({ row }) => {
const { refetch } = useQuery(getReaders());
const [readerReset, setReaderReset] = useState(false);
// const goodRatio =
// (parseInt(row.getValue("goodReads")) /
// (parseInt(row.getValue("goodReads")) +
// parseInt(row.getValue("badReads")))) *
// 100;
const name = row.getValue("reader");
const resetReads = async () => {
setReaderReset(true);
try {
const res = await axios.post("/api/rfid/resetRatio", {
reader: name,
});
if (res.status === 200) {
toast.success(res.data.message);
setReaderReset(false);
} else {
toast.error(res.data.message);
setReaderReset(false);
}
} catch (error: any) {
toast.error(error.data.message);
setReaderReset(false);
}
refetch();
};
return (
<div className="text-left font-medium">
<Button className="h-4" onClick={resetReads} disabled={readerReset}>
Reset Reads
</Button>
</div>
);
},
},
];

View File

@@ -0,0 +1,172 @@
import {
type ColumnDef,
flexRender,
getCoreRowModel,
getPaginationRowModel,
useReactTable,
} from "@tanstack/react-table";
import { useState } from "react";
import { Button } from "../../../../../../../components/ui/button";
import { ScrollArea } from "../../../../../../../components/ui/scroll-area";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "../../../../../../../components/ui/select";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "../../../../../../../components/ui/table";
import { LstCard } from "../../../../-components/extendedUi/LstCard";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
//style: any;
}
export function ReaderTable<TData, TValue>({
columns,
data,
//style,
}: DataTableProps<TData, TValue>) {
const [pagination, setPagination] = useState({
pageIndex: 0, //initial page index
pageSize: 10, //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 (
<LstCard>
<div>
<div className="flex flex-row justify-between">
{data.length === 0 ? (
<span>No readers</span>
) : (
<span>Current reader Info</span>
)}
<Select
value={pagination.pageSize.toString()}
onValueChange={(e) =>
setPagination({
...pagination,
pageSize: parseInt(e),
})
}
>
<SelectTrigger className="w-[180px]">
<SelectValue
//id={field.name}
placeholder="Select Page"
defaultValue={10}
/>
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Page Size</SelectLabel>
<SelectItem value="5">5</SelectItem>
<SelectItem value="10">10</SelectItem>
<SelectItem value="50">50</SelectItem>
<SelectItem value="100">100</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
<ScrollArea className="h-96 rounded-md border m-2">
<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 labels.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</ScrollArea>
</div>
<div className="flex items-center justify-end space-x-2">
<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>
</LstCard>
);
}

View File

@@ -0,0 +1,78 @@
import { type 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: "currentStockLevel",
header: () => <div className="text-right">Stock At Post</div>,
},
{
accessorKey: "newLevel",
header: "Level Entered",
},
{
accessorKey: "dateAdjusted",
header: "Adjustmnet",
cell: ({ row }) => {
if (row.getValue("dateAdjusted")) {
const correctDate = format(
row.original.dateAdjusted?.replace("Z", ""),
"M/d/yyyy hh:mm",
);
return <div className="text-right font-medium">{correctDate}</div>;
}
},
},
{
accessorKey: "lastDateAdjusted",
header: "Last Adjusted",
cell: ({ row }) => {
if (row.getValue("lastDateAdjusted")) {
const correctDate = format(
row.original.lastDateAdjusted?.replace("Z", ""),
"M/d/yyyy hh:mm",
);
return <div className="text-right font-medium">{correctDate}</div>;
}
},
},
{
accessorKey: "comment",
header: "Comment",
},
{
accessorKey: "commentAddedBy",
header: "Commenter ",
},
{
accessorKey: "commentDate",
header: "Comment Date ",
cell: ({ row }) => {
if (row.getValue("commentDate")) {
const correctDate = format(
row.original.commentDate?.replace("Z", ""),
"M/d/yyyy hh:mm",
);
return <div className="text-right font-medium">{correctDate}</div>;
}
},
},
{
accessorKey: "add_user",
header: "Creator",
},
];

View File

@@ -0,0 +1,106 @@
import {
type ColumnDef,
flexRender,
getCoreRowModel,
getPaginationRowModel,
useReactTable,
} from "@tanstack/react-table";
import { Button } from "../../../../../../components/ui/button";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "../../../../../../components/ui/table";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
data: TData[];
}
export function SiloTable<TData, TValue>({
columns,
data,
}: DataTableProps<TData, TValue>) {
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
});
//console.log(data);
return (
<div className="rounded-md border w-[1028px]">
<div>
<Table>
<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>
);
}

View File

@@ -0,0 +1,54 @@
// user will need access to the module.
import type { User } from "../-types/users";
// users role will determine there visual access
export function hasAccess(user: any, moduleName: string | null): boolean {
//console.log("has access user", user, moduleName);
// get the modules for the id
const filteredModule = user?.roles?.filter(
(f: any) => f.module === moduleName,
);
//console.log(filteredModule[0]);
// userroles and filter out by the module id,
//console.log("Has Module access", filteredModule);
// const roleCheck: any = user?.roles.find(
// (role) => role.module_id === filteredModule[0].module_id,
// );
if (filteredModule && filteredModule.length > 0) {
return true;
}
//if(filteredModule[0].roles.includes(roleCheck.))
return false;
}
export function hasPageAccess(
user: User | null,
role: any,
moduleName: string,
): boolean {
if (role.includes("viewer")) return true;
if (!user) return false;
//console.log(user);
const userRole = user?.roles?.filter(
(role: any) => role.module === moduleName,
);
//console.log(user);
// if (role.includes(userRole[0]?.role)) {
// return true};
//if (userRole.length > 0) return true;
if (userRole?.length >= 1) {
//console.log(userRole);
return true;
} else {
return false;
}
//return false;
}