feat(admin): users and roles added to the frontend to manage easier

frontend/src/components/navBar/Nav.tsx

@@ -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>
+	);
 }

frontend/src/components/navBar/SideBarNav.tsx

@@ -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>
+	);
 }

frontend/src/components/ui/table.tsx

@@ -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,
+}