sarlink-portal/components/ui/app-sidebar.tsx

import {
	Calculator,
	ChevronRight,
	Coins,
	CreditCard,
	Handshake,
	MonitorSpeaker,
	Smartphone,
	UsersRound,
	Wallet2Icon,
} from "lucide-react";

import { authOptions } from "@/app/auth";
import {
	Collapsible,
	CollapsibleContent,
	CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
	Sidebar,
	SidebarContent,
	SidebarGroup,
	SidebarGroupContent,
	SidebarGroupLabel,
	SidebarHeader,
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
	SidebarRail,
} from "@/components/ui/sidebar";
import { getServerSession } from "next-auth";
import Link from "next/link";

type Permission = {
	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;
		  }
	)[];
}[];

export async function AppSidebar({
	...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: "Parental Control",
					link: "/parental-control",
					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",
				},
			],
		},
		{
			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: "Price Calculator",
					link: "/price-calculator",
					icon: <Calculator size={16} />,
					perm_identifier: "device",
				},
			],
		},
	];

	const session = await getServerSession(authOptions);

	const filteredCategories = categories.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 };
	});
	const filteredCategoriesWithChildren = filteredCategories.filter(
		(category) => category.children.length > 0,
	);

	let CATEGORIES: Categories;
	if (session?.user?.is_superuser) {
		CATEGORIES = categories;
	} else {
		CATEGORIES = filteredCategoriesWithChildren;
	}

	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>
	);
}