refactor(dockscanning): more work on the dock door scanning

ref #12

frontend/src/components/Sidebar/Warhouse.tsx

@@ -0,0 +1,94 @@
+import { useQuery } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
+import { ChevronRight, Link as link } from "lucide-react";
+import { permissionQuery } from "../../lib/queries/permsCheck";
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "../ui/collapsible";
+import {
+	SidebarGroup,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarMenuSub,
+	SidebarMenuSubButton,
+	SidebarMenuSubItem,
+	useSidebar,
+} from "../ui/sidebar";
+
+export default function WarehouseBar() {
+	const { data: canCreate = false } = useQuery(
+		permissionQuery({
+			warehouse: ["read"],
+		}),
+	);
+
+	const { setOpen } = useSidebar();
+	const items = [
+		{
+			title: "Dock Door Scanning",
+			url: "/warehouse",
+			//icon,
+			isActive: canCreate,
+			items: [
+				{
+					title: "DockDoorScanning",
+					icon: link,
+					url: "/warehouse/dockdoorscanning",
+				},
+			],
+		},
+	];
+
+	return (
+		<SidebarGroup>
+			<SidebarGroupLabel>Warehouse</SidebarGroupLabel>
+			<SidebarGroupContent>
+				<SidebarMenu>
+					{items.map((item) => (
+						<div key={item.title}>
+							{item.isActive && (
+								<Collapsible
+									asChild
+									//defaultOpen={isNotifications}
+									className="group/collapsible"
+								>
+									<SidebarMenuItem>
+										<CollapsibleTrigger asChild>
+											<SidebarMenuButton tooltip={item.title}>
+												{item.title}
+
+												<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+											</SidebarMenuButton>
+										</CollapsibleTrigger>
+										<CollapsibleContent>
+											<SidebarMenuSub>
+												{item.items?.map((subItem) => (
+													<SidebarMenuSubItem key={subItem.title}>
+														<SidebarMenuSubButton asChild>
+															<Link
+																to={subItem.url}
+																onClick={() => setOpen(false)}
+															>
+																<subItem.icon />
+																<span>{subItem.title}</span>
+															</Link>
+														</SidebarMenuSubButton>
+													</SidebarMenuSubItem>
+												))}
+											</SidebarMenuSub>
+										</CollapsibleContent>
+									</SidebarMenuItem>
+								</Collapsible>
+							)}
+						</div>
+					))}
+				</SidebarMenu>
+			</SidebarGroupContent>
+		</SidebarGroup>
+	);
+}

frontend/src/components/Sidebar/sidebar.tsx

@@ -13,16 +13,23 @@ import AdminSidebar from "./AdminBar";
 import DocBar from "./DocBar";
 import MobileBar from "./MobileBar";
 import TransportationBar from "./TransportationBar";
+import WarehouseBar from "./Warhouse";
 
 export function AppSidebar() {
 	const { data: session } = useSession();
 	const { data: settings, isLoading } = useSuspenseQuery(getSettings());
-	const { data: canRead = false } = useQuery(
+	const { data: canReadOpenDock = false } = useQuery(
 		permissionQuery({
 			openDock: ["read"],
 		}),
 	);
 
+	const { data: canReadWarehouse = false } = useQuery(
+		permissionQuery({
+			warehouse: ["read"],
+		}),
+	);
+
 	return (
 		<Sidebar
 			variant="sidebar"
@@ -42,7 +49,12 @@ export function AppSidebar() {
 							{!isLoading &&
 								settings.filter((n: any) => n.name === "opendock_sync")[0]
 									?.active &&
-								canRead && <TransportationBar />}
+								canReadOpenDock && <TransportationBar />}
+
+							{!isLoading &&
+								settings.filter((n: any) => n.name === "dockDoorScanning")[0]
+									?.active &&
+								canReadWarehouse && <WarehouseBar />}
 
 							{session &&
 								(session.user.role === "admin" ||