feat(forklifts): added backend forklift stuff and frontend companies

frontend/src/components/navBar/ForkliftSideBar.tsx

@@ -0,0 +1,94 @@
+import { Link } from "@tanstack/react-router";
+import {
+	Building2,
+	Forklift,
+	Hourglass,
+	ReceiptText,
+	Wrench,
+} from "lucide-react";
+import { userAccess } from "@/lib/authClient";
+import {
+	SidebarGroup,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+} from "../ui/sidebar";
+import type { Items } from "./SideBarNav";
+
+export default function ForkliftSideBar() {
+	const items: Items[] = [
+		{
+			title: "Lease Companies",
+			url: "/lst/app/forklifts/companies",
+			icon: Building2,
+			role: ["systemAdmin", "admin"],
+			module: "forklifts",
+			active: true,
+		},
+		{
+			title: "Leases",
+			url: "/lst/app/admin/settings",
+			icon: ReceiptText,
+			role: ["systemAdmin", "admin"],
+			module: "forklifts",
+			active: true,
+		},
+		{
+			title: "Invoices",
+			url: "/lst/app/admin/settings",
+			icon: ReceiptText,
+			role: ["systemAdmin", "admin", "manager"],
+			module: "forklifts",
+			active: true,
+		},
+		{
+			title: "Repairs",
+			url: "/lst/app/admin/settings",
+			icon: Wrench,
+			role: ["systemAdmin", "admin", "manager"],
+			module: "forklifts",
+			active: true,
+		},
+		{
+			title: "Hours",
+			url: "/lst/app/admin/settings",
+			icon: Hourglass,
+			role: ["systemAdmin", "admin", "manager", "supervisor"],
+			module: "forklifts",
+			active: true,
+		},
+		{
+			title: "Forklifts",
+			url: "/lst/app/admin/modules",
+			icon: Forklift,
+			role: ["systemAdmin", "admin", "manager", "supervisor"],
+			module: "forklifts",
+			active: true,
+		},
+	];
+	return (
+		<SidebarGroup>
+			<SidebarGroupLabel>Forklifts</SidebarGroupLabel>
+			<SidebarGroupContent>
+				<SidebarMenu>
+					{items.map((item) => (
+						<SidebarMenuItem key={item.title}>
+							<>
+								{userAccess(item.module, item.role) && item.active && (
+									<SidebarMenuButton asChild>
+										<Link to={item.url}>
+											<item.icon />
+											<span>{item.title}</span>
+										</Link>
+									</SidebarMenuButton>
+								)}
+							</>
+						</SidebarMenuItem>
+					))}
+				</SidebarMenu>
+			</SidebarGroupContent>
+		</SidebarGroup>
+	);
+}

frontend/src/components/navBar/Nav.tsx

@@ -1,8 +1,11 @@
 import { Link, useRouterState } from "@tanstack/react-router";
+import { useState } from "react";
+import NewCompanyForm from "@/routes/_app/_forklifts/-components/NewCompany";
 import { useAuth, useLogout } from "../../lib/authClient";
 import { ModeToggle } from "../mode-toggle";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 import { Button } from "../ui/button";
+import { Dialog, DialogContent } from "../ui/dialog";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -17,6 +20,7 @@ export default function Nav() {
 	const logout = useLogout();
 	const router = useRouterState();
 	const currentPath = router.location.href;
+	const [openDialog, setOpenDialog] = useState(false);
 	return (
 		<nav className="flex justify-end w-full shadow ">
 			<div className="m-2 flex flex-row gap-1">
@@ -33,6 +37,37 @@ export default function Nav() {
 				<Button className="m-1">
 					<Link to="/old">Old Version</Link>
 				</Button>
+				<div className="m-1">
+					{location.pathname.includes("forklifts") && (
+						<>
+							<DropdownMenu>
+								<DropdownMenuTrigger>
+									<Button>Forklifts</Button>
+								</DropdownMenuTrigger>
+								<DropdownMenuContent>
+									<DropdownMenuLabel>Forklift links</DropdownMenuLabel>
+									<DropdownMenuSeparator />
+									<DropdownMenuItem
+										onSelect={() => {
+											// just open the dialog when clicked
+											setOpenDialog(true);
+										}}
+									>
+										New Company
+									</DropdownMenuItem>
+								</DropdownMenuContent>
+							</DropdownMenu>
+							{/* Dialog mounted outside the menu */}
+							{openDialog && (
+								<Dialog open={openDialog} onOpenChange={setOpenDialog}>
+									<DialogContent className="sm:max-w-[425px]">
+										<NewCompanyForm setOpenDialog={setOpenDialog} />
+									</DialogContent>
+								</Dialog>
+							)}
+						</>
+					)}
+				</div>
 				{session ? (
 					<div className="m-1">
 						<DropdownMenu>

frontend/src/components/navBar/SideBarNav.tsx

@@ -1,5 +1,6 @@
 import { Link } from "@tanstack/react-router";
-import { userAccess } from "../../lib/authClient";
+import type { LucideIcon } from "lucide-react";
+import { type UserRoles, userAccess } from "@/lib/authClient";
 import {
 	Sidebar,
 	SidebarContent,
@@ -8,17 +9,32 @@ import {
 	SidebarTrigger,
 } from "../ui/sidebar";
 import Admin from "./Admin";
+import ForkliftSideBar from "./ForkliftSideBar";
 import { Header } from "./Header";
 
+export type Items = {
+	title: string;
+	url: string;
+	icon: LucideIcon;
+	role: UserRoles["role"][];
+	module: string;
+	active: boolean;
+};
+
 export default function SideBarNav() {
 	return (
 		<div className="flex min-h-screen">
 			<Sidebar collapsible="icon">
 				<Header />
 				<SidebarContent>
+					{userAccess(null, [
+						"systemAdmin",
+						"admin",
+						"manager",
+						"supervisor",
+					]) && <ForkliftSideBar />}
 					{userAccess(null, ["systemAdmin", "admin"]) && <Admin />}
 				</SidebarContent>
-
 				<SidebarFooter>
 					<SidebarMenuItem>
 						<Link to={"/changelog"}>Changelog</Link>