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/auth/application-layout.tsx

@@ -18,24 +18,24 @@ import { auth } from "@/lib/auth";
 import { headers } from "next/headers";
 import { AccountPopover } from "./account-popver";
 
-export async function ApplicationLayout({ children }: { children: React.ReactNode }) {
+export async function ApplicationLayout({
+	children,
+}: { children: React.ReactNode }) {
 	const session = await auth.api.getSession({
 		headers: await headers(), // you need to pass the headers object.
 	});
 	return (
 		<SidebarProvider>
-			<AppSidebar />
+			<AppSidebar role={session?.user?.role || "USER"} />
 			<SidebarInset>
-				<header className="flex justify-between sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4">
-					<div className="flex items-center gap-2">
+				<header className="flex justify-between sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4 z-10">
+					<div className="flex items-center gap-2 ">
 						<SidebarTrigger className="-ml-1" />
 						<Separator orientation="vertical" className="mr-2 h-4" />
 						<Breadcrumb>
 							<BreadcrumbList>
 								<BreadcrumbItem className="hidden md:block">
-									<BreadcrumbLink href="#">
-										MENU
-									</BreadcrumbLink>
+									<BreadcrumbLink href="#">MENU</BreadcrumbLink>
 								</BreadcrumbItem>
 								<BreadcrumbSeparator className="hidden md:block" />
 								<BreadcrumbItem>
@@ -50,10 +50,7 @@ export async function ApplicationLayout({ children }: { children: React.ReactNod
 						<AccountPopover user={session?.user} />
 					</div>
 				</header>
-				<div className="px-8 py-6">
-
-					{children}
-				</div>
+				<div className="px-8 py-6">{children}</div>
 			</SidebarInset>
 		</SidebarProvider>
 	);