sarlink/sarlink-portal
7
0
Fork 0
mirror of https://github.com/i701/sarlink-portal.git synced 2025-10-05 09:55:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(sidebar): re arrange sidebar links 🔨

Browse Source
This commit is contained in:
i701
2025-09-20 11:14:38 +05:00
parent 6c5f848856
commit 1e2329e7f1
1 changed files with 201 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

400
components/ui/app-sidebar.tsx
View File

@@ -1,224 +1,226 @@
import {
BadgePlus,
Calculator,
ChevronRight,
Coins,
CreditCard,
Handshake,
MonitorSpeaker,
Smartphone,
UsersRound,
Wallet2Icon,
BadgePlus,
Calculator,
ChevronRight,
Coins,
CreditCard,
Handshake,
MonitorSpeaker,
Smartphone,
UsersRound,
Wallet2Icon,
} from "lucide-react";
import Link from "next/link";
import { getServerSession } from "next-auth";
import { authOptions } from "@/app/auth";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarRail,
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarRail,
} from "@/components/ui/sidebar";
type Permission = {
id: number;
name: string;
id: number;
name: string;
};
type Categories = {
id: string;
children: (
| {
title: string;
link: string;
perm_identifier: string;
icon: React.JSX.Element;
}
| {
title: string;
link: string;
icon: React.JSX.Element;
perm_identifier?: undefined;
}
)[];
id: string;
children: (
| {
title: string;
link: string;
perm_identifier: string;
icon: React.JSX.Element;
}
| {
title: string;
link: string;
icon: React.JSX.Element;
perm_identifier?: undefined;
}
)[];
}[];
export async function AppSidebar({
...props
...props
}: React.ComponentProps<typeof Sidebar>) {
const categories = [
{
id: "MENU",
url: "#",
children: [
{
title: "Devices",
link: "/devices?page=1",
perm_identifier: "device",
icon: <Smartphone size={16} />,
},
{
title: "Payments",
link: "/payments?page=1",
icon: <CreditCard size={16} />,
perm_identifier: "payment",
},
{
title: "Top Ups",
link: "/top-ups?page=1",
icon: <BadgePlus size={16} />,
perm_identifier: "topup",
},
{
title: "Parental Control",
link: "/parental-control?page=1",
icon: <CreditCard size={16} />,
perm_identifier: "device",
},
{
title: "Agreements",
link: "/agreements",
icon: <Handshake size={16} />,
perm_identifier: "device",
},
{
title: "Wallet",
link: "/wallet",
icon: <Wallet2Icon size={16} />,
perm_identifier: "wallet transaction",
},
],
},
{
id: "ADMIN CONTROL",
url: "#",
children: [
{
title: "Users",
link: "/users",
icon: <UsersRound size={16} />,
perm_identifier: "device",
},
{
title: "User Devices",
link: "/user-devices",
icon: <MonitorSpeaker size={16} />,
perm_identifier: "device",
},
{
title: "User Payments",
link: "/user-payments",
icon: <Coins size={16} />,
perm_identifier: "payment",
},
{
title: "User Topups",
link: "/user-topups",
icon: <Coins size={16} />,
perm_identifier: "topup",
},
{
title: "Price Calculator",
link: "/price-calculator",
icon: <Calculator size={16} />,
perm_identifier: "device",
},
],
},
];
const categories = [
{
id: "MENU",
url: "#",
children: [
{
title: "Devices",
link: "/devices?page=1",
perm_identifier: "device",
icon: <Smartphone size={16} />,
},
{
title: "Parental Control",
link: "/parental-control?page=1",
icon: <CreditCard size={16} />,
perm_identifier: "device",
},
{
title: "Subscriptions",
link: "/payments?page=1",
icon: <CreditCard size={16} />,
perm_identifier: "payment",
},
{
title: "Top Ups",
link: "/top-ups?page=1",
icon: <BadgePlus size={16} />,
perm_identifier: "topup",
},
{
title: "Transaction History",
link: "/wallet",
icon: <Wallet2Icon size={16} />,
perm_identifier: "wallet transaction",
},
{
title: "Agreements",
link: "/agreements",
icon: <Handshake size={16} />,
perm_identifier: "device",
},
],
},
{
id: "ADMIN CONTROL",
url: "#",
children: [
{
title: "Users",
link: "/users",
icon: <UsersRound size={16} />,
perm_identifier: "device",
},
{
title: "User Devices",
link: "/user-devices",
icon: <MonitorSpeaker size={16} />,
perm_identifier: "device",
},
{
title: "User Payments",
link: "/user-payments",
icon: <Coins size={16} />,
perm_identifier: "payment",
},
{
title: "User Topups",
link: "/user-topups",
icon: <Coins size={16} />,
perm_identifier: "topup",
},
{
title: "Price Calculator",
link: "/price-calculator",
icon: <Calculator size={16} />,
perm_identifier: "device",
},
],
},
];
const session = await getServerSession(authOptions);
const session = await getServerSession(authOptions);
let CATEGORIES: Categories;
if (session?.user?.is_admin) {
CATEGORIES = categories;
} else {
// Filter out ADMIN CONTROL category for non-admin users
const nonAdminCategories = categories.filter(
(category) => category.id !== "ADMIN CONTROL",
);
let CATEGORIES: Categories;
if (session?.user?.is_admin) {
CATEGORIES = categories;
} else {
// Filter out ADMIN CONTROL category for non-admin users
const nonAdminCategories = categories.filter(
(category) => category.id !== "ADMIN CONTROL",
);
const filteredCategories = nonAdminCategories.map((category) => {
const filteredChildren = category.children.filter((child) => {
const permIdentifier = child.perm_identifier;
return session?.user?.user_permissions?.some(
(permission: Permission) => {
const permissionParts = permission.name.split(" ");
const modelNameFromPermission = permissionParts.slice(2).join(" ");
return modelNameFromPermission === permIdentifier;
},
);
});
const filteredCategories = nonAdminCategories.map((category) => {
const filteredChildren = category.children.filter((child) => {
const permIdentifier = child.perm_identifier;
return session?.user?.user_permissions?.some(
(permission: Permission) => {
const permissionParts = permission.name.split(" ");
const modelNameFromPermission = permissionParts.slice(2).join(" ");
return modelNameFromPermission === permIdentifier;
},
);
});
return { ...category, children: filteredChildren };
});
return { ...category, children: filteredChildren };
});
CATEGORIES = filteredCategories.filter(
(category) => category.children.length > 0,
);
}
CATEGORIES = filteredCategories.filter(
(category) => category.children.length > 0,
);
}
return (
<Sidebar {...props} className="z-50">
<SidebarHeader>
<h4 className="p-2 rounded title-bg border text-center uppercase ">
Sar Link Portal
</h4>
</SidebarHeader>
<SidebarContent className="gap-0">
{CATEGORIES.map((item) => {
return (
<Collapsible
key={item.id}
title={item.id}
defaultOpen
className="group/collapsible"
>
<SidebarGroup>
<SidebarGroupLabel
asChild
className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
>
<CollapsibleTrigger>
{item.id}{" "}
<ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
</CollapsibleTrigger>
</SidebarGroupLabel>
<CollapsibleContent>
<SidebarGroupContent>
<SidebarMenu>
{item.children.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton className="py-6" asChild>
<Link className="text-md" href={item.link}>
{item.icon}
<span className="opacity-70 ml-2">
{item.title}
</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</CollapsibleContent>
</SidebarGroup>
</Collapsible>
);
})}
</SidebarContent>
<SidebarRail />
</Sidebar>
);
return (
<Sidebar {...props} className="z-50">
<SidebarHeader>
<h4 className="p-2 rounded title-bg border text-center uppercase ">
Sar Link Portal
</h4>
</SidebarHeader>
<SidebarContent className="gap-0">
{CATEGORIES.map((item) => {
return (
<Collapsible
key={item.id}
title={item.id}
defaultOpen
className="group/collapsible"
>
<SidebarGroup>
<SidebarGroupLabel
asChild
className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
>
<CollapsibleTrigger>
{item.id}{" "}
<ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
</CollapsibleTrigger>
</SidebarGroupLabel>
<CollapsibleContent>
<SidebarGroupContent>
<SidebarMenu>
{item.children.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton className="py-6" asChild>
<Link className="text-md" href={item.link}>
{item.icon}
<span
className={`opacity-70 motion-preset-slide-left-md ml-2`}
>
{item.title}
</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</CollapsibleContent>
</SidebarGroup>
</Collapsible>
);
})}
</SidebarContent>
<SidebarRail />
</Sidebar>
);
}