feat(lst): added icons to the sidebar
This commit is contained in:
@@ -3,21 +3,99 @@ 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";
|
||||
import {AdminSideBar} from "./side-components/admin";
|
||||
|
||||
type Feature = string;
|
||||
|
||||
interface Module {
|
||||
id: number;
|
||||
name: string;
|
||||
features: Feature[];
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
interface RolePermissions {
|
||||
[moduleName: string]: Feature[];
|
||||
}
|
||||
|
||||
interface Roles {
|
||||
[roleName: string]: RolePermissions;
|
||||
}
|
||||
|
||||
interface User {
|
||||
id: number;
|
||||
username: string;
|
||||
role: keyof Roles;
|
||||
}
|
||||
const modules: Module[] = [
|
||||
{id: 1, name: "production", active: true, features: ["view", "edit", "approve"]},
|
||||
{id: 2, name: "logistics", active: true, features: ["view", "assign", "track"]},
|
||||
{id: 3, name: "quality", active: false, features: ["view", "audit", "approve"]},
|
||||
{id: 4, name: "forklift", active: true, features: ["view", "request", "operate"]},
|
||||
{id: 5, name: "admin", active: true, features: ["view", "manage_users", "view_logs", "settings"]},
|
||||
];
|
||||
|
||||
const rolePermissions: Roles = {
|
||||
admin: {
|
||||
production: ["view", "edit", "approve"],
|
||||
logistics: ["view", "assign", "track"],
|
||||
quality: ["view", "audit", "approve"],
|
||||
forklift: ["view", "request", "operate"],
|
||||
admin: ["view", "manage_users", "view_logs", "settings"],
|
||||
},
|
||||
manager: {
|
||||
production: ["view", "edit"],
|
||||
logistics: ["view", "assign"],
|
||||
quality: ["view", "audit"],
|
||||
forklift: ["view", "request"],
|
||||
admin: ["view_logs"],
|
||||
},
|
||||
supervisor: {
|
||||
production: ["view"],
|
||||
logistics: ["view"],
|
||||
quality: ["view"],
|
||||
forklift: ["view", "request"],
|
||||
admin: [],
|
||||
},
|
||||
user: {
|
||||
production: ["view"],
|
||||
logistics: [],
|
||||
quality: [],
|
||||
forklift: [],
|
||||
admin: [],
|
||||
},
|
||||
};
|
||||
|
||||
const users: User[] = [
|
||||
{id: 1, username: "admin", role: "admin"},
|
||||
{id: 2, username: "manager", role: "manager"},
|
||||
{id: 3, username: "supervisor", role: "supervisor"},
|
||||
{id: 4, username: "user", role: "user"},
|
||||
];
|
||||
|
||||
function hasAccess(user: User, moduleName: string, feature: Feature): boolean {
|
||||
return rolePermissions[user.role]?.[moduleName]?.includes(feature) || false;
|
||||
}
|
||||
|
||||
function moduleActive(moduleName: string): boolean {
|
||||
const module = modules.find((m) => m.name === moduleName);
|
||||
return module ? module.active : false;
|
||||
}
|
||||
|
||||
export function AppSidebar() {
|
||||
const user = {id: 4, username: "admin", role: "admin"};
|
||||
return (
|
||||
<Sidebar collapsible="icon">
|
||||
<SidebarContent>
|
||||
<Header />
|
||||
<ProductionSideBar />
|
||||
<LogisticsSideBar />
|
||||
<ForkliftSideBar />
|
||||
<EomSideBar />
|
||||
<QualitySideBar />
|
||||
<AdminSideBar />
|
||||
{hasAccess(user, "production", "view") && moduleActive("production") && <ProductionSideBar />}
|
||||
{hasAccess(user, "logistics", "view") && moduleActive("logistics") && <LogisticsSideBar />}
|
||||
{hasAccess(user, "forklift", "view") && moduleActive("forklift") && <ForkliftSideBar />}
|
||||
{hasAccess(user, "eom", "view") && moduleActive("admin") && <EomSideBar />}
|
||||
{hasAccess(user, "quality", "view") && moduleActive("quality") && <QualitySideBar />}
|
||||
{hasAccess(user, "admin", "view") && moduleActive("admin") && <AdminSideBar />}
|
||||
</SidebarContent>
|
||||
<SidebarFooter>
|
||||
<SidebarTrigger />
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Printer} from "lucide-react";
|
||||
import {Atom, Logs, Minus, Plus, Server, Settings, ShieldCheck, Users, Webhook} from "lucide-react";
|
||||
import {
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
@@ -6,41 +6,99 @@ import {
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubButton,
|
||||
SidebarMenuSubItem,
|
||||
} from "../../ui/sidebar";
|
||||
import {Collapsible, CollapsibleContent, CollapsibleTrigger} from "../../ui/collapsible";
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: "Settings",
|
||||
title: "Servers",
|
||||
url: "#",
|
||||
icon: Printer,
|
||||
},
|
||||
{
|
||||
title: "Swagger",
|
||||
url: "#",
|
||||
icon: Printer,
|
||||
},
|
||||
{
|
||||
title: "Logs",
|
||||
url: "#",
|
||||
icon: Printer,
|
||||
},
|
||||
{
|
||||
title: "Users",
|
||||
url: "#",
|
||||
icon: Printer,
|
||||
},
|
||||
{
|
||||
title: "UCD",
|
||||
url: "#",
|
||||
icon: Printer,
|
||||
icon: Server,
|
||||
isActive: false,
|
||||
},
|
||||
];
|
||||
const data = {
|
||||
navMain: [
|
||||
{
|
||||
title: "Admin",
|
||||
url: "#",
|
||||
icon: ShieldCheck,
|
||||
items: [
|
||||
{
|
||||
title: "Settings",
|
||||
url: "#",
|
||||
icon: Settings,
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
title: "Swagger",
|
||||
url: "#",
|
||||
icon: Webhook,
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
title: "Logs",
|
||||
url: "#",
|
||||
icon: Logs,
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
title: "Users",
|
||||
url: "#",
|
||||
icon: Users,
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
title: "UCD",
|
||||
url: "#",
|
||||
icon: Atom,
|
||||
isActive: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export function AdminSideBar() {
|
||||
return (
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>Admin</SidebarGroupLabel>
|
||||
<SidebarGroupLabel>Admin section</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{data.navMain.map((item, index) => (
|
||||
<Collapsible key={item.title} defaultOpen={index === 1} className="group/collapsible">
|
||||
<SidebarMenuItem>
|
||||
<CollapsibleTrigger asChild>
|
||||
<SidebarMenuButton>
|
||||
<item.icon />
|
||||
{item.title}{" "}
|
||||
<Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
|
||||
<Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
|
||||
</SidebarMenuButton>
|
||||
</CollapsibleTrigger>
|
||||
{item.items?.length ? (
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
{item.items.map((item) => (
|
||||
<SidebarMenuSubItem key={item.title}>
|
||||
<SidebarMenuSubButton asChild isActive={item.isActive}>
|
||||
<a href={item.url}>
|
||||
<item.icon />
|
||||
<span>{item.title}</span>
|
||||
</a>
|
||||
</SidebarMenuSubButton>
|
||||
</SidebarMenuSubItem>
|
||||
))}
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
) : null}
|
||||
</SidebarMenuItem>
|
||||
</Collapsible>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
<SidebarMenu>
|
||||
{items.map((item) => (
|
||||
<SidebarMenuItem key={item.title}>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Printer} from "lucide-react";
|
||||
import {Forklift, Hourglass, Minus, Plus, Signature} from "lucide-react";
|
||||
import {
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
@@ -6,21 +6,88 @@ import {
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubButton,
|
||||
SidebarMenuSubItem,
|
||||
} from "../../ui/sidebar";
|
||||
import {Collapsible, CollapsibleTrigger} from "../../ui/collapsible";
|
||||
import {CollapsibleContent} from "@radix-ui/react-collapsible";
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: "Qaulity Request",
|
||||
title: "Gemone",
|
||||
url: "#",
|
||||
icon: Printer,
|
||||
icon: Forklift,
|
||||
isActive: false,
|
||||
},
|
||||
];
|
||||
|
||||
const data = {
|
||||
navMain: [
|
||||
{
|
||||
title: "Forklift Management",
|
||||
url: "#",
|
||||
icon: Forklift,
|
||||
items: [
|
||||
{
|
||||
title: "All Forklifts",
|
||||
url: "#",
|
||||
icon: Forklift,
|
||||
},
|
||||
{
|
||||
title: "Leasing data",
|
||||
url: "#",
|
||||
isActive: false,
|
||||
icon: Signature,
|
||||
},
|
||||
{
|
||||
title: "Forklift Hours",
|
||||
url: "#",
|
||||
isActive: false,
|
||||
icon: Hourglass,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export function ForkliftSideBar() {
|
||||
return (
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>Forklift</SidebarGroupLabel>
|
||||
<SidebarGroupLabel>Forklift Section</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{data.navMain.map((item, index) => (
|
||||
<Collapsible key={item.title} defaultOpen={index === 1} className="group/collapsible">
|
||||
<SidebarMenuItem>
|
||||
<CollapsibleTrigger asChild>
|
||||
<SidebarMenuButton>
|
||||
<item.icon />
|
||||
{item.title}{" "}
|
||||
<Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
|
||||
<Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
|
||||
</SidebarMenuButton>
|
||||
</CollapsibleTrigger>
|
||||
{item.items?.length ? (
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
{item.items.map((item) => (
|
||||
<SidebarMenuSubItem key={item.title}>
|
||||
<SidebarMenuSubButton asChild isActive={item.isActive}>
|
||||
<a href={item.url}>
|
||||
<item.icon />
|
||||
<span>{item.title}</span>
|
||||
</a>
|
||||
</SidebarMenuSubButton>
|
||||
</SidebarMenuSubItem>
|
||||
))}
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
) : null}
|
||||
</SidebarMenuItem>
|
||||
</Collapsible>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
<SidebarMenu>
|
||||
{items.map((item) => (
|
||||
<SidebarMenuItem key={item.title}>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Printer} from "lucide-react";
|
||||
import {Cylinder, Package, Printer, Truck} from "lucide-react";
|
||||
import {
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
@@ -12,22 +12,22 @@ const items = [
|
||||
{
|
||||
title: "Silo Adjustments",
|
||||
url: "#",
|
||||
icon: Printer,
|
||||
icon: Cylinder,
|
||||
},
|
||||
{
|
||||
title: "Bulk orders",
|
||||
url: "#",
|
||||
icon: Printer,
|
||||
icon: Truck,
|
||||
},
|
||||
{
|
||||
title: "Forecast",
|
||||
url: "#",
|
||||
icon: Printer,
|
||||
icon: Truck,
|
||||
},
|
||||
{
|
||||
title: "Ocme cycle counts",
|
||||
url: "#",
|
||||
icon: Printer,
|
||||
icon: Package,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
31
frontend/src/components/ui/collapsible.tsx
Normal file
31
frontend/src/components/ui/collapsible.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
|
||||
|
||||
function Collapsible({
|
||||
...props
|
||||
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
|
||||
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
|
||||
}
|
||||
|
||||
function CollapsibleTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
|
||||
return (
|
||||
<CollapsiblePrimitive.CollapsibleTrigger
|
||||
data-slot="collapsible-trigger"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CollapsibleContent({
|
||||
...props
|
||||
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
|
||||
return (
|
||||
<CollapsiblePrimitive.CollapsibleContent
|
||||
data-slot="collapsible-content"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Collapsible, CollapsibleTrigger, CollapsibleContent }
|
||||
Reference in New Issue
Block a user