Refactor authentication and dashboard components

- Updated login and signup pages to include session checks and redirection based on user authentication status.
- Introduced QueryProvider for managing server state in the application.
- Enhanced user experience by integrating session management in the devices and payments dashboard.
- Added new user management features with role-based access control in the sidebar.
- Created new components for user devices and payments, improving the overall structure and maintainability of the dashboard.
- Implemented a table component for better data presentation in user-related views.

components/ui/app-sidebar.tsx

@@ -24,6 +24,7 @@ const data = {
 		{
 			title: "MENU",
 			url: "#",
+			requiredRoles: ["ADMIN", "USER"],
 			items: [
 				{
 					title: "Devices",
@@ -35,13 +36,34 @@ const data = {
 				},
 			],
 		},
-
+		{
+			title: "ADMIN CONTROL",
+			url: "#",
+			requiredRoles: ["ADMIN"],
+			items: [
+				{
+					title: "Users",
+					url: "/users",
+				},
+				{
+					title: "User Devices",
+					url: "/user-devices",
+				},
+				{
+					title: "User Payments",
+					url: "/user-payments",
+				},
+			],
+		},
 	],
 };
 
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+export function AppSidebar({
+	role,
+	...props
+}: React.ComponentProps<typeof Sidebar> & { role: string }) {
 	return (
-		<Sidebar {...props}>
+		<Sidebar {...props} className="z-50">
 			<SidebarHeader>
 				<h4 className="bg-gray-200 p-2 rounded shadow text-center uppercase dark:bg-gray-800">
 					Sar Link Portal
@@ -49,7 +71,8 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
 			</SidebarHeader>
 			<SidebarContent className="gap-0">
 				{/* We create a collapsible SidebarGroup for each parent. */}
-				{data.navMain.map((item) => (
+				{/* {data.navMain.map((item) => (
+
 					<Collapsible
 						key={item.title}
 						title={item.title}
@@ -83,7 +106,51 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
 							</CollapsibleContent>
 						</SidebarGroup>
 					</Collapsible>
-				))}
+				))} */}
+				{data.navMain
+					.filter(
+						(item) =>
+							!item.requiredRoles || item.requiredRoles.includes(role || ""),
+					)
+					.map((item) => {
+						if (item.requiredRoles?.includes(role)) {
+							return (
+								<Collapsible
+									key={item.title}
+									title={item.title}
+									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.title}{" "}
+												<ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+											</CollapsibleTrigger>
+										</SidebarGroupLabel>
+										<CollapsibleContent>
+											<SidebarGroupContent>
+												<SidebarMenu>
+													{item.items.map((item) => (
+														<SidebarMenuItem key={item.title}>
+															<SidebarMenuButton className="py-6" asChild>
+																<Link className="text-md" href={item.url}>
+																	{item.title}
+																</Link>
+															</SidebarMenuButton>
+														</SidebarMenuItem>
+													))}
+												</SidebarMenu>
+											</SidebarGroupContent>
+										</CollapsibleContent>
+									</SidebarGroup>
+								</Collapsible>
+							);
+						}
+					})}
 			</SidebarContent>
 			<SidebarRail />
 		</Sidebar>