Compare commits

...

2 Commits

15 changed files with 1004 additions and 362 deletions

View File

@@ -4,23 +4,24 @@ meta {
seq: 7
}
post {
patch {
url: {{url}}/lst/api/admin/:userID/grant
body: json
auth: inherit
}
params:path {
userID: 0hlO48C7Jw1J804FxrCnonK
userID: 0hlO48C7Jw1J804FxrCnonKjQ2zh48R6
}
body:json {
{
"module":"users",
"role":"admin"
"module":"siloAdjustments",
"role":"viewer"
}
}
settings {
encodeUrl: true
timeout: 0
}

View File

@@ -0,0 +1,27 @@
meta {
name: RevokeRole by ID
type: http
seq: 3
}
post {
url: {{url}}/lst/api/admin/:userID/grant
body: json
auth: inherit
}
params:path {
userID: 0hlO48C7Jw1J804FxrCnonKjQ2zh48R6
}
body:json {
{
"module":"siloAdjustments",
"role":"viewer"
}
}
settings {
encodeUrl: true
timeout: 0
}

View File

@@ -4,22 +4,30 @@ import { requireAuth } from "../../pkg/middleware/authMiddleware.js";
//admin routes
import users from "./routes/getUserRoles.js";
import grantRoles from "./routes/grantRole.js";
import revokeRoles from "./routes/revokeRole.js";
import servers from "./routes/servers/serverRoutes.js";
export const setupAdminRoutes = (app: Express, basePath: string) => {
app.use(
basePath + "/api/admin/server", // will pass bc system admin but this is just telling us we need this
servers
);
app.use(
basePath + "/api/admin/server", // will pass bc system admin but this is just telling us we need this
servers,
);
app.use(
basePath + "/api/admin/users",
requireAuth("user", ["systemAdmin"]), // will pass bc system admin but this is just telling us we need this
users
);
app.use(
basePath + "/api/admin",
requireAuth("user", ["systemAdmin", "admin"]), // will pass bc system admin but this is just telling us we need this
grantRoles
);
app.use(
basePath + "/api/admin/users",
requireAuth("user", ["systemAdmin"]), // will pass bc system admin but this is just telling us we need this
users,
);
app.use(
basePath + "/api/admin",
requireAuth("user", ["systemAdmin", "admin"]), // will pass bc system admin but this is just telling us we need this
grantRoles,
);
app.use(
basePath + "/api/admin",
requireAuth("user", ["systemAdmin", "admin"]), // will pass bc system admin but this is just telling us we need this
revokeRoles,
);
};

View File

@@ -1,74 +1,82 @@
import { Router } from "express";
import type { Request, Response } from "express";
import { tryCatch } from "../../../pkg/utils/tryCatch.js";
import { db } from "../../../pkg/db/db.js";
import { Router } from "express";
import z from "zod";
import { db } from "../../../pkg/db/db.js";
import { userRoles } from "../../../pkg/db/schema/user_roles.js";
import { createLogger } from "../../../pkg/logger/logger.js";
import { tryCatch } from "../../../pkg/utils/tryCatch.js";
const roleSchema = z.object({
module: z.enum([
"users",
"system",
"ocp",
"siloAdjustments",
"demandManagement",
"logistics",
"production",
"quality",
"eom",
"forklifts",
]),
role: z.enum(["admin", "manager", "supervisor", "test,", "viewer"]),
module: z.enum([
"users",
"system",
"ocp",
"siloAdjustments",
"demandManagement",
"logistics",
"production",
"quality",
"eom",
"forklifts",
]),
role: z.enum([
"systemAdmin",
"admin",
"manager",
"supervisor",
"tester",
"user",
"viewer",
]),
});
const router = Router();
router.post("/:userId/grant", async (req: Request, res: Response) => {
const log = createLogger({
module: "admin",
subModule: "grantRoles",
});
const userId = req.params.userId;
console.log(userId);
router.patch("/:userId/grant", async (req: Request, res: Response) => {
const log = createLogger({
module: "admin",
subModule: "grantRoles",
});
const userId = req.params.userId;
try {
const validated = roleSchema.parse(req.body);
try {
const validated = roleSchema.parse(req.body);
const data = await db
.insert(userRoles)
.values({
userId,
module: validated.module,
role: validated.role,
})
.onConflictDoUpdate({
target: [userRoles.userId, userRoles.module],
set: { module: validated.module, role: validated.role },
});
log.info(
{},
`Module: ${validated.module}, Role: ${validated.role} as was just granted to userID: ${userId}`
);
return res.status(200).json({
success: true,
message: `Module: ${validated.module}, Role: ${validated.role} as was just granted`,
data,
});
} catch (err) {
if (err instanceof z.ZodError) {
const flattened = z.flattenError(err);
return res.status(400).json({
error: "Validation failed",
details: flattened,
});
}
const data = await db
.insert(userRoles)
.values({
userId: userId,
module: validated.module,
role: validated.role,
})
.onConflictDoUpdate({
target: [userRoles.userId, userRoles.module],
set: { module: validated.module, role: validated.role },
});
log.info(
{},
`Module: ${validated.module}, Role: ${validated.role} as was just granted to userID: ${userId}`,
);
return res.status(200).json({
success: true,
message: `Module: ${validated.module}, Role: ${validated.role} as was just granted`,
data,
});
} catch (err) {
if (err instanceof z.ZodError) {
const flattened = z.flattenError(err);
return res.status(400).json({
error: "Validation failed",
details: flattened,
});
}
return res.status(400).json({
success: false,
message: "Invalid input please try again.",
});
}
return res.status(400).json({
success: false,
message: "Invalid input please try again.",
error: err,
});
}
});
export default router;

View File

@@ -0,0 +1,71 @@
import { and, eq } from "drizzle-orm";
import type { Request, Response } from "express";
import { Router } from "express";
import z from "zod";
import { db } from "../../../pkg/db/db.js";
import { userRoles } from "../../../pkg/db/schema/user_roles.js";
import { createLogger } from "../../../pkg/logger/logger.js";
import { tryCatch } from "../../../pkg/utils/tryCatch.js";
const roleSchema = z.object({
module: z.enum([
"users",
"system",
"ocp",
"siloAdjustments",
"demandManagement",
"logistics",
"production",
"quality",
"eom",
"forklifts",
]),
});
const router = Router();
router.patch("/:userId/revoke", async (req: Request, res: Response) => {
const log = createLogger({
module: "admin",
subModule: "grantRoles",
});
const userId = req.params.userId;
try {
const validated = roleSchema.parse(req.body);
const data = await db
.delete(userRoles)
.where(
and(
eq(userRoles.userId, userId),
eq(userRoles.module, validated.module),
),
);
log.info(
{},
`Module: ${validated.module}, was just revoked fron userID: ${userId}`,
);
return res.status(200).json({
success: true,
message: `Module: ${validated.module}, was just revoked fron userID: ${userId}`,
data,
});
} catch (err) {
if (err instanceof z.ZodError) {
const flattened = z.flattenError(err);
return res.status(400).json({
error: "Validation failed",
details: flattened,
});
}
return res.status(400).json({
success: false,
message: "Invalid input please try again.",
error: err,
});
}
});
export default router;

View File

@@ -25,6 +25,7 @@
"@tanstack/react-query": "^5.89.0",
"@tanstack/react-router": "^1.131.36",
"@tanstack/react-router-devtools": "^1.131.36",
"@tanstack/react-table": "^8.21.3",
"@types/react-calendar-timeline": "^0.28.6",
"axios": "^1.12.2",
"better-auth": "^1.3.11",
@@ -3372,6 +3373,26 @@
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/@tanstack/react-table": {
"version": "8.21.3",
"resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.3.tgz",
"integrity": "sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==",
"license": "MIT",
"dependencies": {
"@tanstack/table-core": "8.21.3"
},
"engines": {
"node": ">=12"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/@tanstack/router-core": {
"version": "1.131.36",
"resolved": "https://registry.npmjs.org/@tanstack/router-core/-/router-core-1.131.36.tgz",
@@ -3533,6 +3554,19 @@
"url": "https://github.com/sponsors/tannerlinsley"
}
},
"node_modules/@tanstack/table-core": {
"version": "8.21.3",
"resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.3.tgz",
"integrity": "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==",
"license": "MIT",
"engines": {
"node": ">=12"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
}
},
"node_modules/@tanstack/virtual-file-routes": {
"version": "1.131.2",
"resolved": "https://registry.npmjs.org/@tanstack/virtual-file-routes/-/virtual-file-routes-1.131.2.tgz",

View File

@@ -27,6 +27,7 @@
"@tanstack/react-query": "^5.89.0",
"@tanstack/react-router": "^1.131.36",
"@tanstack/react-router-devtools": "^1.131.36",
"@tanstack/react-table": "^8.21.3",
"@types/react-calendar-timeline": "^0.28.6",
"axios": "^1.12.2",
"better-auth": "^1.3.11",

View File

@@ -1,81 +1,76 @@
import { Link } from "@tanstack/react-router";
import { useAuth, useLogout } from "../../lib/authClient";
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "../ui/dropdown-menu";
import { ModeToggle } from "../mode-toggle";
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
import { Button } from "../ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "../ui/dropdown-menu";
export default function Nav() {
const { session } = useAuth();
const logout = useLogout();
return (
<nav className="flex justify-end w-full shadow ">
<div className="m-2 flex flex-row gap-1">
<div className="m-1">
<ModeToggle />
</div>
<div className="m-1">
<Button>
<a
href={`${window.location.origin}/lst/d`}
target="_blank"
>
LST - Docs
</a>
</Button>
</div>
const { session } = useAuth();
const logout = useLogout();
return (
<nav className="flex justify-end w-full shadow ">
<div className="m-2 flex flex-row gap-1">
<div className="m-1">
<ModeToggle />
</div>
<div className="m-1">
<Button>
<a href={`${window.location.origin}/lst/d`} target="_blank">
LST - Docs
</a>
</Button>
</div>
{session ? (
<div className="m-1">
<DropdownMenu>
<DropdownMenuTrigger>
<Avatar>
<AvatarImage
src="https://github.com/evilrabbit.png"
alt="@evilrabbit"
/>
<AvatarFallback>CN</AvatarFallback>
</Avatar>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>
Hello {session.user?.username}
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>
{/* <Link to="/passwordChange">
{session ? (
<div className="m-1">
<DropdownMenu>
<DropdownMenuTrigger>
<Avatar>
<AvatarImage
src="https://github.com/evilrabbit.png"
alt="@evilrabbit"
/>
<AvatarFallback>CN</AvatarFallback>
</Avatar>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>
Hello {session.user?.username}
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>
{/* <Link to="/passwordChange">
Password Change
</Link> */}
</DropdownMenuItem>
{/* <DropdownMenuItem>Billing</DropdownMenuItem>
</DropdownMenuItem>
{/* <DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuItem>Subscription</DropdownMenuItem> */}
<hr className="solid"></hr>
<DropdownMenuItem>
<div className="m-auto">
<button onClick={() => logout()}>
Logout
</button>
</div>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
) : (
<div className="m-1">
<Button>
<Link to="/login">Login</Link>
</Button>
</div>
)}
</div>
</nav>
);
<hr className="solid"></hr>
<DropdownMenuItem>
<div className="m-auto">
<button onClick={() => logout()}>Logout</button>
</div>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
) : (
<div className="m-1">
<Button>
<Link to="/login">Login</Link>
</Button>
</div>
)}
</div>
</nav>
);
}

View File

@@ -1,26 +1,26 @@
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarTrigger,
} from "../ui/sidebar";
import { Header } from "./Header";
import Admin from "./Admin";
import { userAccess } from "../../lib/authClient";
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarTrigger,
} from "../ui/sidebar";
import Admin from "./Admin";
import { Header } from "./Header";
export default function SideBarNav() {
return (
<div className="flex min-h-screen">
<Sidebar collapsible="icon">
<Header />
<SidebarContent>
{userAccess(null, ["systemAdmin", "admin"]) && <Admin />}
</SidebarContent>
return (
<div className="flex min-h-screen">
<Sidebar collapsible="icon">
<Header />
<SidebarContent>
{userAccess(null, ["systemAdmin", "admin"]) && <Admin />}
</SidebarContent>
<SidebarFooter>
<SidebarTrigger />
</SidebarFooter>
</Sidebar>
</div>
);
<SidebarFooter>
<SidebarTrigger />
</SidebarFooter>
</Sidebar>
</div>
);
}

View File

@@ -0,0 +1,114 @@
import * as React from "react"
import { cn } from "@/lib/utils"
function Table({ className, ...props }: React.ComponentProps<"table">) {
return (
<div
data-slot="table-container"
className="relative w-full overflow-x-auto"
>
<table
data-slot="table"
className={cn("w-full caption-bottom text-sm", className)}
{...props}
/>
</div>
)
}
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
return (
<thead
data-slot="table-header"
className={cn("[&_tr]:border-b", className)}
{...props}
/>
)
}
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
return (
<tbody
data-slot="table-body"
className={cn("[&_tr:last-child]:border-0", className)}
{...props}
/>
)
}
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
return (
<tfoot
data-slot="table-footer"
className={cn(
"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
className
)}
{...props}
/>
)
}
function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
return (
<tr
data-slot="table-row"
className={cn(
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
className
)}
{...props}
/>
)
}
function TableHead({ className, ...props }: React.ComponentProps<"th">) {
return (
<th
data-slot="table-head"
className={cn(
"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
className
)}
{...props}
/>
)
}
function TableCell({ className, ...props }: React.ComponentProps<"td">) {
return (
<td
data-slot="table-cell"
className={cn(
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
className
)}
{...props}
/>
)
}
function TableCaption({
className,
...props
}: React.ComponentProps<"caption">) {
return (
<caption
data-slot="table-caption"
className={cn("text-muted-foreground mt-4 text-sm", className)}
{...props}
/>
)
}
export {
Table,
TableHeader,
TableBody,
TableFooter,
TableHead,
TableRow,
TableCell,
TableCaption,
}

View File

@@ -0,0 +1,17 @@
import { queryOptions } from "@tanstack/react-query";
import axios from "axios";
export function getUsers() {
return queryOptions({
queryKey: ["getUsers"],
queryFn: () => fetchSession(),
staleTime: 5000,
refetchOnWindowFocus: true,
});
}
const fetchSession = async () => {
const { data } = await axios.post("/lst/api/admin/users");
return data.data;
};

View File

@@ -1,81 +1,81 @@
import {
createRootRouteWithContext,
Outlet,
useRouter,
} from "@tanstack/react-router";
import type { QueryClient } from "@tanstack/react-query";
import { Toaster } from "sonner";
import Cookies from "js-cookie";
import { SessionGuard } from "../lib/providers/SessionProvider";
import Nav from "../components/navBar/Nav";
import { ThemeProvider } from "../lib/providers/theme-provider";
import { SidebarProvider } from "../components/ui/sidebar";
import SideBarNav from "../components/navBar/SideBarNav";
import {
createRootRouteWithContext,
Outlet,
useRouter,
} from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
import { userAccess } from "../lib/authClient";
import mobile from "is-mobile";
import Cookies from "js-cookie";
import { useEffect } from "react";
import { Toaster } from "sonner";
import Nav from "../components/navBar/Nav";
import SideBarNav from "../components/navBar/SideBarNav";
import { SidebarProvider, SidebarTrigger } from "../components/ui/sidebar";
import { userAccess } from "../lib/authClient";
import { SessionGuard } from "../lib/providers/SessionProvider";
import { ThemeProvider } from "../lib/providers/theme-provider";
import { coreSocket } from "../lib/socket.io/socket";
interface RootRouteContext {
queryClient: QueryClient;
//user: User | null;
//login: (user: User) => void;
//logout: () => void;
queryClient: QueryClient;
//user: User | null;
//login: (user: User) => void;
//logout: () => void;
}
const RootLayout = () => {
//const { logout, login } = Route.useRouteContext();
const defaultOpen = Cookies.get("sidebar_state") === "true";
const router = useRouter();
// console.log(mobile({ featureDetect: true, tablet: true }));
//const { logout, login } = Route.useRouteContext();
const defaultOpen = Cookies.get("sidebar_state") === "true";
const router = useRouter();
// console.log(mobile({ featureDetect: true, tablet: true }));
// if mobile lets move to the mobile section.
useEffect(() => {
if (mobile({ featureDetect: true, tablet: true })) {
router.navigate({ to: "/m" });
}
// if mobile lets move to the mobile section.
useEffect(() => {
if (mobile({ featureDetect: true, tablet: true })) {
router.navigate({ to: "/m" });
}
coreSocket.on("connect", () => {
console.log("✅ Connected:", coreSocket.id);
});
coreSocket.on("connect", () => {
console.log("✅ Connected:", coreSocket.id);
});
coreSocket.on("disconnect", () => {
console.log("🔴 Disconnected");
});
coreSocket.on("disconnect", () => {
console.log("🔴 Disconnected");
});
return () => {
coreSocket.off("connect");
coreSocket.off("disconnect");
};
}, []);
return () => {
coreSocket.off("connect");
coreSocket.off("disconnect");
};
}, []);
return (
<div>
<SessionGuard>
<ThemeProvider>
<div className="flex flex-col h-screen overflow-hidden">
<Nav />
<div className="flex flex-1 overflow-hidden">
<SidebarProvider defaultOpen={defaultOpen}>
<SideBarNav />
<div className="flex-2 overflow-y-auto">
<Outlet />
</div>
</SidebarProvider>
</div>
<Toaster expand richColors closeButton />
{userAccess(null, ["systemAdmin"]) && (
<TanStackRouterDevtools position="bottom-right" />
)}
</div>
</ThemeProvider>
</SessionGuard>
</div>
);
return (
<div>
<SessionGuard>
<ThemeProvider>
<div className="flex flex-col h-screen overflow-hidden">
<Nav />
<div className="flex flex-1 overflow-hidden">
<SidebarProvider defaultOpen={defaultOpen}>
<SideBarNav />
<div className="flex-2 overflow-y-auto">
<Outlet />
</div>
</SidebarProvider>
</div>
<Toaster expand richColors closeButton />
{userAccess(null, ["systemAdmin"]) && (
<TanStackRouterDevtools position="bottom-right" />
)}
</div>
</ThemeProvider>
</SessionGuard>
</div>
);
};
export const Route = createRootRouteWithContext<RootRouteContext>()({
component: RootLayout,
component: RootLayout,
});

View File

@@ -0,0 +1,144 @@
import { useState } from "react";
import { toast } from "sonner";
import { Button } from "../../../components/ui/button";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "../../../components/ui/select";
import { api } from "../../../lib/axiosAPI";
const modules: string[] = [
"users",
"system",
"ocp",
"siloAdjustments",
"demandManagement",
"logistics",
"production",
"quality",
"eom",
"forklifts",
];
const roles: string[] = [
"systemAdmin",
"admin",
"manager",
"supervisor",
"tester",
"user",
"viewer",
];
export default function ExpandedRow({ row }: { row: any }) {
const user = row.original;
const existingRolesMap = Object.fromEntries(
(user.roles || []).map((r: { module: string; role: string }) => [
r.module,
r.role,
]),
);
// local state for selections
const [selectedRoles, setSelectedRoles] = useState<Record<string, string>>(
() =>
Object.fromEntries(
modules.map((m) => [m, existingRolesMap[m] || "viewer"]),
),
);
const onSubmitRole = async (module: string) => {
const role = selectedRoles[module];
// console.log("Saving module role:", {
// module,
// role,
// user,
// });
try {
const result = await api.patch(`/api/admin/${user.id}/grant`, {
module: module,
role: role,
});
if (result.status === 200) {
toast.success(
`${user.username} was just granted ${role} on module ${module}`,
);
}
} catch (error) {
console.log(error);
toast.error(
"There was an error granting the user a role if this continues please contact your admin.",
);
}
};
const handleSelectChange = (module: string, value: string) => {
setSelectedRoles((prev) => ({ ...prev, [module]: value }));
};
const onDeleteRole = async (module: string) => {
try {
const result = await api.patch(`/api/admin/${user.id}/revoke`, {
module: module,
});
if (result.status === 200) {
toast.success(`${user.username} no longer has access to ${module}`);
setSelectedRoles((prev) => ({ ...prev, [module]: "viewer" }));
}
} catch (error) {
console.log(error);
toast.error(
"There was an error granting the user a role if this continues please contact your admin.",
);
}
};
return (
<div className="p-4 bg-muted w-128">
<div className="">
{modules.map((i) => {
return (
<div
key={i}
className="flex flex-row items-center justify-between gap-4 border-b py-2"
>
<span className="text-sm font-medium capitalize w-40">{i}</span>
<Select
value={selectedRoles[i]}
onValueChange={(v) => handleSelectChange(i, v)}
>
<SelectTrigger className="w-40">
<SelectValue placeholder="Select role" />
</SelectTrigger>
<SelectContent>
{roles.map((r) => (
<SelectItem key={r} value={r}>
{r}
</SelectItem>
))}
</SelectContent>
</Select>
<Button onClick={() => onSubmitRole(i)} size="sm">
Grant
</Button>
<Button
onClick={() => onDeleteRole(i)}
size="sm"
variant="destructive"
>
Revoke
</Button>
</div>
);
})}
</div>
</div>
);
}

View File

@@ -1,9 +1,215 @@
import { useQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import {
createColumnHelper,
flexRender,
getCoreRowModel,
getPaginationRowModel,
getSortedRowModel,
type SortingState,
useReactTable,
} from "@tanstack/react-table";
import {
ArrowDown,
ArrowUp,
ChevronDown,
ChevronRight,
Mail,
User,
} from "lucide-react";
import React, { useState } from "react";
import { Button } from "../../../../components/ui/button";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "../../../../components/ui/table";
import { getUsers } from "../../../../lib/querys/admin/getUsers";
import ExpandedRow from "../../-components/ExpandedRow";
type User = {
username: string;
email: string;
roles: string | null;
};
export const Route = createFileRoute("/_adminLayout/admin/_users/users")({
component: RouteComponent,
component: RouteComponent,
});
function RouteComponent() {
return <div className="">Hello "/_admin/admin/users "!</div>;
const { data, isLoading } = useQuery(getUsers());
const [sorting, setSorting] = useState<SortingState>([]);
const columnHelper = createColumnHelper<User>();
const columns = [
columnHelper.accessor("username", {
cell: (i) => i.getValue(),
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
<span className="flex flex-row gap-2">
<User />
Username
</span>
{column.getIsSorted() === "asc" ? (
<ArrowUp className="ml-2 h-4 w-4" />
) : (
<ArrowDown className="ml-2 h-4 w-4" />
)}
</Button>
);
},
}),
columnHelper.accessor("email", {
cell: (i) => i.getValue(),
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
<span className="flex flex-row gap-2">
<Mail />
Email
</span>
{column.getIsSorted() === "asc" ? (
<ArrowUp className="ml-2 h-4 w-4" />
) : (
<ArrowDown className="ml-2 h-4 w-4" />
)}
</Button>
);
},
}),
columnHelper.accessor("roles", {
header: () => <span>Roles</span>,
cell: ({ row }) => {
return row.getCanExpand() ? (
<button
{...{
onClick: row.getToggleExpandedHandler(),
style: { cursor: "pointer" },
}}
>
{row.getIsExpanded() ? (
<span className="flex flex-row gap-2">
Roles <ChevronDown />
</span>
) : (
<span className="flex flex-row gap-2">
Roles <ChevronRight />
</span>
)}
</button>
) : (
"No expanding"
);
},
}),
];
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
//renderSubComponent: ({ row }: { row: any }) => <ExpandedRow row={row} />,
getRowCanExpand: () => true,
state: {
sorting,
},
});
if (isLoading) {
return <div className="m-auto">Loading user data</div>;
}
// render the roles card and make ts happy by not including it in the useReactTable hook
const renderSubComponent = ({ row }: { row: any }) => (
<ExpandedRow row={row} />
);
return (
<div className="p-4">
<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.map((row) => (
<React.Fragment key={row.id}>
<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>
{row.getIsExpanded() && (
<TableRow>
<TableCell colSpan={row.getVisibleCells().length}>
{renderSubComponent({ row })}
</TableCell>
</TableRow>
)}
</React.Fragment>
))}
</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

@@ -1,155 +1,171 @@
import { ControllerManager } from "st-ethernet-ip";
import { createLog } from "../../../../logger/logger.js";
import { getMac } from "../../../utils/getMachineId.js";
import { labelingProcess } from "../../labeling/labelProcess.js";
export const createPlcMonitor = (config: any) => {
let cm: any;
let controllers: any = {};
let stats: any = {};
let isRunning = false;
let cm: any;
let controllers: any = {};
let stats: any = {};
let isRunning = false;
const nowISO = () => {
return new Date().toISOString();
};
const nowISO = () => {
return new Date().toISOString();
};
const start = () => {
if (isRunning) return;
const start = () => {
if (isRunning) return;
cm = new ControllerManager();
cm = new ControllerManager();
config.controllers.forEach((cfg: any) => {
const plc: any = cm.addController(
cfg.ip,
cfg.slot,
cfg.rpi,
true,
cfg.retrySP || 3000
);
config.controllers.forEach((cfg: any) => {
const plc: any = cm.addController(
cfg.ip,
cfg.slot,
cfg.rpi,
true,
cfg.retrySP || 3000,
);
plc.connect();
controllers[cfg.id] = plc;
plc.connect();
controllers[cfg.id] = plc;
// initialize stats
stats[cfg.id] = {
id: cfg.id,
ip: cfg.ip,
slot: cfg.slot,
scanRate: cfg.rpi,
connected: false,
lastConnectedAt: null,
lastDisconnectedAt: null,
reconnectCount: 0,
};
// Add tags
cfg.tags.forEach((tag: any) => plc.addTag(tag));
// initialize stats
stats[cfg.id] = {
id: cfg.id,
ip: cfg.ip,
slot: cfg.slot,
scanRate: cfg.rpi,
connected: false,
lastConnectedAt: null,
lastDisconnectedAt: null,
reconnectCount: 0,
};
// Add tags
cfg.tags.forEach((tag: any) => plc.addTag(tag));
// Events
plc.on("Connected", () => {
const s = stats[cfg.id];
s.connected = true;
s.lastConnectedAt = nowISO();
if (s.lastDisconnectedAt) {
s.reconnectCount++;
}
console.log(`[${cfg.id}] Connected @ ${cfg.ip}:${cfg.slot}`);
});
// Events
plc.on("Connected", () => {
const s = stats[cfg.id];
s.connected = true;
s.lastConnectedAt = nowISO();
if (s.lastDisconnectedAt) {
s.reconnectCount++;
}
createLog(
"info",
"zechette",
"ocp",
`[${cfg.id}] Connected @ ${cfg.ip}:${cfg.slot}`,
);
});
plc.on("Disconnected", () => {
const s = stats[cfg.id];
s.connected = false;
s.lastDisconnectedAt = nowISO();
console.log(`[${cfg.id}] Disconnected`);
});
plc.on("Disconnected", () => {
const s = stats[cfg.id];
s.connected = false;
s.lastDisconnectedAt = nowISO();
createLog("info", "zechette", "ocp", `[${cfg.id}] Disconnected`);
});
plc.on("error", (err: any) => {
console.error(`[${cfg.id}] Error:`, err.message);
});
plc.on("error", (err: any) => {
createLog(
"error",
"zechette",
"ocp",
`[${cfg.id}] Error: ${JSON.stringify(err.message)}`,
);
});
plc.on("TagChanged", async (tag: any, prevVal: any) => {
if (tag.value !== 0) {
const time = nowISO();
if (tag.value === 0) return;
setTimeout(async () => {
if (tag.value === 0) return;
const macId = await getMac(tag.value);
// const { data, error } = (await tryCatch(
// query(
// getCurrentLabel
// .replace(
// "[macId]",
// macId[0]?.HumanReadableId
// )
// .replace(
// "[time]",
// format(time, "yyyy-MM-dd HH:mm")
// ),
// "Current label data"
// )
// )) as any;
plc.on("TagChanged", async (tag: any, prevVal: any) => {
if (tag.value !== 0) {
const time = nowISO();
if (tag.value === 0) return;
setTimeout(async () => {
if (tag.value === 0) return;
const macId = await getMac(tag.value);
// const { data, error } = (await tryCatch(
// query(
// getCurrentLabel
// .replace(
// "[macId]",
// macId[0]?.HumanReadableId
// )
// .replace(
// "[time]",
// format(time, "yyyy-MM-dd HH:mm")
// ),
// "Current label data"
// )
// )) as any;
// createLog(
// "info",
// "zechettii",
// "zechettii",
// `${format(time, "yyyy-MM-dd HH:mm")} [${cfg.id}] ${
// tag.name
// }: ${prevVal} -> ${
// tag.value
// }, the running number is ${
// error ? null : data.data[0]?.LfdNr
// }}`
// );
const zechette = {
line: tag.value.toString(),
printer: cfg.printerId, // this is the id of the zechetti 2 to print we should move this to the db
printerName: cfg.id,
};
labelingProcess({ zechette: zechette });
}, 1000);
}
});
});
// createLog(
// "info",
// "zechettii",
// "zechettii",
// `${format(time, "yyyy-MM-dd HH:mm")} [${cfg.id}] ${
// tag.name
// }: ${prevVal} -> ${
// tag.value
// }, the running number is ${
// error ? null : data.data[0]?.LfdNr
// }}`
// );
const zechette = {
line: tag.value.toString(),
printer: cfg.printerId, // this is the id of the zechetti 2 to print we should move this to the db
printerName: cfg.id,
};
createLog(
"info",
"zechette",
"ocp",
`Date being sent to labeler: ${JSON.stringify(zechette)}`,
);
labelingProcess({ zechette: zechette });
}, 1000);
}
});
});
isRunning = true;
};
isRunning = true;
};
const stop = () => {
if (!isRunning) return;
Object.values(controllers).forEach((plc: any) => {
try {
plc.disconnect();
} catch {}
});
controllers = {};
cm = null;
isRunning = false;
console.log("Monitor stopped");
};
const stop = () => {
if (!isRunning) return;
Object.values(controllers).forEach((plc: any) => {
try {
plc.disconnect();
} catch {}
});
controllers = {};
cm = null;
isRunning = false;
console.log("Monitor stopped");
};
const restart = () => {
console.log("Restarting the plc(s)");
stop();
new Promise((resolve) => setTimeout(resolve, 1500));
start();
};
const restart = () => {
console.log("Restarting the plc(s)");
stop();
new Promise((resolve) => setTimeout(resolve, 1500));
start();
};
const status = () => {
const result: any = {};
const status = () => {
const result: any = {};
for (const [id, s] of Object.entries(stats)) {
let s: any;
let uptimeMs = null,
downtimeMs = null;
if (s.connected && s.lastConnectedAt) {
uptimeMs = Date.now() - new Date(s.lastConnectedAt).getTime();
} else if (!s.connected && s.lastDisconnectedAt) {
downtimeMs =
Date.now() - new Date(s.lastDisconnectedAt).getTime();
}
result[id] = { ...s, uptimeMs, downtimeMs };
}
return result;
};
for (const [id, s] of Object.entries(stats)) {
let s: any;
let uptimeMs = null,
downtimeMs = null;
if (s.connected && s.lastConnectedAt) {
uptimeMs = Date.now() - new Date(s.lastConnectedAt).getTime();
} else if (!s.connected && s.lastDisconnectedAt) {
downtimeMs = Date.now() - new Date(s.lastDisconnectedAt).getTime();
}
result[id] = { ...s, uptimeMs, downtimeMs };
}
return result;
};
return { start, stop, restart, status };
return { start, stop, restart, status };
};