tr]:last:border-b-0",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+ return (
+ [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+ return (
+ [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableCaption({
+ className,
+ ...props
+}: React.ComponentProps<"caption">) {
+ return (
+
-
-
-
-
-
-
- {userAccess(null, ["systemAdmin"]) && (
-
- )}
-
-
-
+
+
+
+
+
+
+ {userAccess(null, ["systemAdmin"]) && (
+
+ )}
+
+
+
()({
- component: RootLayout,
+ component: RootLayout,
});
diff --git a/frontend/src/routes/_adminLayout/-components/ExpandedRow.tsx b/frontend/src/routes/_adminLayout/-components/ExpandedRow.tsx
new file mode 100644
index 0000000..4e07a20
--- /dev/null
+++ b/frontend/src/routes/_adminLayout/-components/ExpandedRow.tsx
@@ -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>(
+ () =>
+ 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 (
+
+
+ {modules.map((i) => {
+ return (
+
+ {i}
+
+ handleSelectChange(i, v)}
+ >
+
+
+
+ {roles.map((r) => (
+
+ {r}
+
+ ))}
+
+
+
+ onSubmitRole(i)} size="sm">
+ Grant
+
+ onDeleteRole(i)}
+ size="sm"
+ variant="destructive"
+ >
+ Revoke
+
+
+ );
+ })}
+
+
Hello "/_admin/admin/users "!
;
+ const { data, isLoading } = useQuery(getUsers());
+ const [sorting, setSorting] = useState([]);
+ const columnHelper = createColumnHelper();
+
+ const columns = [
+ columnHelper.accessor("username", {
+ cell: (i) => i.getValue(),
+ header: ({ column }) => {
+ return (
+ column.toggleSorting(column.getIsSorted() === "asc")}
+ >
+
+
+ {column.getIsSorted() === "asc" ? (
+
+ );
+ },
+ }),
+
+ columnHelper.accessor("email", {
+ cell: (i) => i.getValue(),
+ header: ({ column }) => {
+ return (
+ column.toggleSorting(column.getIsSorted() === "asc")}
+ >
+
+
+ {column.getIsSorted() === "asc" ? (
+
+ );
+ },
+ }),
+ columnHelper.accessor("roles", {
+ header: () => Roles ,
+ cell: ({ row }) => {
+ return row.getCanExpand() ? (
+
+ {row.getIsExpanded() ? (
+
+ Roles
+ ) : (
+
+ Roles
+ )}
+
+ ) : (
+ "No expanding"
+ );
+ },
+ }),
+ ];
+
+ const table = useReactTable({
+ data,
+ columns,
+ getCoreRowModel: getCoreRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ onSortingChange: setSorting,
+ getSortedRowModel: getSortedRowModel(),
+ //renderSubComponent: ({ row }: { row: any }) => Loading user data
;
+ }
+
+ // render the roles card and make ts happy by not including it in the useReactTable hook
+ const renderSubComponent = ({ row }: { row: any }) => (
+
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header) => {
+ return (
+
+ {header.isPlaceholder
+ ? null
+ : flexRender(
+ header.column.columnDef.header,
+ header.getContext(),
+ )}
+
+ );
+ })}
+
+ ))}
+
+
+ {table.getRowModel().rows.map((row) => (
+
+
+ {row.getVisibleCells().map((cell) => (
+
+ {flexRender(
+ cell.column.columnDef.cell,
+ cell.getContext(),
+ )}
+
+ ))}
+
+
+ {row.getIsExpanded() && (
+
+
+ {renderSubComponent({ row })}
+
+
+ )}
+
+ ))}
+
+
+
+
+ table.previousPage()}
+ disabled={!table.getCanPreviousPage()}
+ >
+ Previous
+
+ table.nextPage()}
+ disabled={!table.getCanNextPage()}
+ >
+ Next
+
+
+