From 1e2329e7f1084f0010a4a6364f3207704d8724eb Mon Sep 17 00:00:00 2001
From: i701 <idhaan701@outlook.com>
Date: Sat, 20 Sep 2025 11:14:38 +0500
Subject: [PATCH] =?UTF-8?q?refactor(sidebar):=20re=20arrange=20sidebar=20l?=
 =?UTF-8?q?inks=20=F0=9F=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ui/app-sidebar.tsx | 400 +++++++++++++++++-----------------
 1 file changed, 201 insertions(+), 199 deletions(-)

diff --git a/components/ui/app-sidebar.tsx b/components/ui/app-sidebar.tsx
index 7eba979..1e757d8 100644
--- a/components/ui/app-sidebar.tsx
+++ b/components/ui/app-sidebar.tsx
@@ -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>
+  );
 }