Files
lstV2/frontend/src/routes/__root.tsx

128 lines
6.4 KiB
TypeScript

import {
createRootRoute,
Link,
Outlet,
useLocation,
} from "@tanstack/react-router";
//import {TanStackRouterDevtools} from "@tanstack/router-devtools";
import Cookies from "js-cookie";
import { SidebarProvider } from "../components/ui/sidebar";
import { ThemeProvider } from "../components/layout/theme-provider";
import { ModeToggle } from "../components/layout/mode-toggle";
import { AppSidebar } from "../components/layout/lst-sidebar";
import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "../components/ui/dropdown-menu";
import { SessionProvider } from "../components/providers/Providers";
import { Toaster } from "sonner";
//import { Button } from "../components/ui/button";
import { useSessionStore } from "../lib/store/sessionStore";
import { useSession } from "@/hooks/useSession";
import { useLogout } from "@/hooks/useLogout";
import ExportInventoryData from "@/components/logistics/warehouse/ExportInventoryData";
import { AddCards } from "@/components/dashboard/AddCards";
import DMButtons from "@/components/logistics/dm/DMButtons";
//import { AddCards } from "@/components/dashboard/AddCards";
// same as the layout
export const Route = createRootRoute({
component: () => {
const sidebarState = Cookies.get("sidebar_state") === "true";
const { session } = useSession();
const { user } = useSessionStore();
const logout = useLogout();
const location = useLocation();
return (
<div className="overflow-hidden">
<SessionProvider>
<ThemeProvider>
<nav className="flex justify-end w-full shadow ">
<div className="m-2 flex flex-row">
{/* Inventory section */}
{location.pathname === "/" && (
<div className="m-auto pr-2 flex flex-row gap-2">
<ExportInventoryData />
<AddCards />
</div>
)}
{/* Demand mgt section this should also include plant token stuff */}
{location.pathname === "/dm" && (
<div className="m-auto pr-2 flex flex-row gap-2">
<DMButtons />
</div>
)}
<div className="m-1">
<ModeToggle />
</div>
{session ? (
<div className="m-1">
<DropdownMenu>
<DropdownMenuTrigger>
<Avatar>
<AvatarImage
src="https://github.com/shadcn.png"
alt="@shadcn"
/>
<AvatarFallback>
CN
</AvatarFallback>
</Avatar>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>
Hello {user?.username}
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Link to="/passwordChange">
Password Change
</Link>
</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>
<Link to="/login">Login</Link>
</div>
)}
</div>
</nav>
<main>
<SidebarProvider defaultOpen={sidebarState}>
<AppSidebar />
<Toaster expand={true} richColors closeButton />
<Outlet />
</SidebarProvider>
</main>
</ThemeProvider>
</SessionProvider>
{/* <TanStackRouterDevtools position="bottom-right" /> */}
</div>
);
},
});