cowch/lst
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Blake Matthes
2025-10-15 21:16:14 -05:00
parent 817a5c6876
commit 2142c06ac3
14 changed files with 856 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
frontend/src/components/navBar/Nav.tsx
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>
);
}

42
frontend/src/components/navBar/SideBarNav.tsx
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>
);
}