cowch/lstV2
1
0
Fork 0
Code Issues 37 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

refactor(lst): added side bar plus dummy menus

Browse Source
This commit is contained in:
Blake Matthes
2025-02-20 07:22:18 -06:00
parent 5f8943492e
commit 54b1b6081a
43 changed files with 1795 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/components/layout/lst-sidebar.tsx Normal file
View File

@@ -0,0 +1,27 @@
import {Sidebar, SidebarContent, SidebarFooter, SidebarTrigger} from "../ui/sidebar";
import {ProductionSideBar} from "./side-components/production";
import {Header} from "./side-components/header";
import {LogisticsSideBar} from "./side-components/logistics";
import {QualitySideBar} from "./side-components/quality";
import {AdminSideBar} from "./side-components/Admin";
import {ForkliftSideBar} from "./side-components/forklift";
import {EomSideBar} from "./side-components/eom";
export function AppSidebar() {
return (
<Sidebar collapsible="icon">
<SidebarContent>
<Header />
<ProductionSideBar />
<LogisticsSideBar />
<ForkliftSideBar />
<EomSideBar />
<QualitySideBar />
<AdminSideBar />
</SidebarContent>
<SidebarFooter>
<SidebarTrigger />
</SidebarFooter>
</Sidebar>
);
}

26
frontend/src/components/layout/mode-toggle.tsx Normal file
View File

@@ -0,0 +1,26 @@
import {Moon, Sun} from "lucide-react";
import {Button} from "../ui/button";
import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "../ui/dropdown-menu";
import {useTheme} from "../layout/theme-provider";
export function ModeToggle() {
const {setTheme} = useTheme();
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}

59
frontend/src/components/layout/side-components/admin.tsx Normal file
View File

@@ -0,0 +1,59 @@
import {Printer} from "lucide-react";
import {
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from "../../ui/sidebar";
const items = [
{
title: "Settings",
url: "#",
icon: Printer,
},
{
title: "Swagger",
url: "#",
icon: Printer,
},
{
title: "Logs",
url: "#",
icon: Printer,
},
{
title: "Users",
url: "#",
icon: Printer,
},
{
title: "UCD",
url: "#",
icon: Printer,
},
];
export function AdminSideBar() {
return (
<SidebarGroup>
<SidebarGroupLabel>Admin</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild>
<a href={item.url}>
<item.icon />
<span>{item.title}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
);
}

39
frontend/src/components/layout/side-components/eom.tsx Normal file
View File

@@ -0,0 +1,39 @@
import {Printer} from "lucide-react";
import {
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from "../../ui/sidebar";
const items = [
{
title: "Qaulity Request",
url: "#",
icon: Printer,
},
];
export function EomSideBar() {
return (
<SidebarGroup>
<SidebarGroupLabel>End of month</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild>
<a href={item.url}>
<item.icon />
<span>{item.title}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
);
}

39
frontend/src/components/layout/side-components/forklift.tsx Normal file
View File

@@ -0,0 +1,39 @@
import {Printer} from "lucide-react";
import {
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from "../../ui/sidebar";
const items = [
{
title: "Qaulity Request",
url: "#",
icon: Printer,
},
];
export function ForkliftSideBar() {
return (
<SidebarGroup>
<SidebarGroupLabel>Forklift</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild>
<a href={item.url}>
<item.icon />
<span>{item.title}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
);
}

21
frontend/src/components/layout/side-components/header.tsx Normal file
View File

@@ -0,0 +1,21 @@
import {SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem} from "../../ui/sidebar";
export function Header() {
return (
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton size="lg" asChild>
<div>
<img src="/imgs/dkLst.png" alt="Description" className="size-8" />
<div className="flex flex-col gap-0.5 leading-none">
<span className="font-semibold">Logistics Support Tool</span>
<span className="">v1.0.0</span>
</div>
</div>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
);
}

54
frontend/src/components/layout/side-components/logistics.tsx Normal file
View File

@@ -0,0 +1,54 @@
import {Printer} from "lucide-react";
import {
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from "../../ui/sidebar";
const items = [
{
title: "Silo Adjustments",
url: "#",
icon: Printer,
},
{
title: "Bulk orders",
url: "#",
icon: Printer,
},
{
title: "Forecast",
url: "#",
icon: Printer,
},
{
title: "Ocme cycle counts",
url: "#",
icon: Printer,
},
];
export function LogisticsSideBar() {
return (
<SidebarGroup>
<SidebarGroupLabel>Logistics</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild>
<a href={item.url}>
<item.icon />
<span>{item.title}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
);
}

39
frontend/src/components/layout/side-components/production.tsx Normal file
View File

@@ -0,0 +1,39 @@
import {Printer} from "lucide-react";
import {
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from "../../ui/sidebar";
const items = [
{
title: "One Click Print",
url: "#",
icon: Printer,
},
];
export function ProductionSideBar() {
return (
<SidebarGroup>
<SidebarGroupLabel>Production</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild>
<a href={item.url}>
<item.icon />
<span>{item.title}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
);
}

39
frontend/src/components/layout/side-components/quality.tsx Normal file
View File

@@ -0,0 +1,39 @@
import {Printer} from "lucide-react";
import {
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from "../../ui/sidebar";
const items = [
{
title: "Qaulity Request",
url: "#",
icon: Printer,
},
];
export function QualitySideBar() {
return (
<SidebarGroup>
<SidebarGroupLabel>Quality</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild>
<a href={item.url}>
<item.icon />
<span>{item.title}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
);
}

67
frontend/src/components/layout/theme-provider.tsx Normal file
View File

@@ -0,0 +1,67 @@
import {createContext, useContext, useEffect, useState} from "react";
type Theme = "dark" | "light" | "system";
type ThemeProviderProps = {
children: React.ReactNode;
defaultTheme?: Theme;
storageKey?: string;
};
type ThemeProviderState = {
theme: Theme;
setTheme: (theme: Theme) => void;
};
const initialState: ThemeProviderState = {
theme: "system",
setTheme: () => null,
};
const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
export function ThemeProvider({
children,
defaultTheme = "system",
storageKey = "vite-ui-theme",
...props
}: ThemeProviderProps) {
const [theme, setTheme] = useState<Theme>(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme);
useEffect(() => {
const root = window.document.documentElement;
root.classList.remove("light", "dark");
if (theme === "system") {
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
root.classList.add(systemTheme);
return;
}
root.classList.add(theme);
}, [theme]);
const value = {
theme,
setTheme: (theme: Theme) => {
localStorage.setItem(storageKey, theme);
setTheme(theme);
},
};
return (
<ThemeProviderContext.Provider {...props} value={value}>
{children}
</ThemeProviderContext.Provider>
);
}
export const useTheme = () => {
const context = useContext(ThemeProviderContext);
if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider");
return context;
};