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.

app/(auth)/signup/page.tsx

@@ -1,25 +1,51 @@
 import SignUpForm from "@/components/auth/signup-form";
+import { auth } from "@/lib/auth";
 import prisma from "@/lib/db";
+import { headers } from "next/headers";
 import Image from "next/image";
+import { redirect } from "next/navigation";
 import React from "react";
 
-export default async function LoginPage() {
-  const atolls = await prisma.atoll.findMany({
-    include: {
-      islands: true
-    }
-  })
-  return <div className="bg-gray-100 dark:bg-black w-full h-screen flex items-center justify-center font-sans">
-    <div className="flex flex-col items-center justify-center w-full h-full ">
-      <Image priority alt="Sar Link Logo" src="/logo.png" width={100} height={100} />
-      <div className="mt-4 flex flex-col items-center justify-center">
+export default async function SignupPage({
+	searchParams,
+}: {
+	searchParams: Promise<{ phone_number: string }>;
+}) {
+	const session = await auth.api.getSession({
+		headers: await headers(),
+	});
+	if (session) {
+		return redirect("/devices");
+	}
 
-        <h4 className="font-bold text-xl text-gray-600">SAR Link Portal</h4>
-        <p className="text-gray-500">Pay for your devices and track your bills.</p>
-      </div>
-      <SignUpForm atolls={atolls} />
-    </div>
-  </div>;
+	const phone_number = (await searchParams).phone_number;
+	if (!phone_number) {
+		return redirect("/login");
+	}
+	const atolls = await prisma.atoll.findMany({
+		include: {
+			islands: true,
+		},
+	});
+
+	return (
+		<div className="bg-gray-100 dark:bg-black w-full h-screen flex items-center justify-center font-sans">
+			<div className="flex flex-col items-center justify-center w-full h-full ">
+				<Image
+					priority
+					alt="Sar Link Logo"
+					src="/logo.png"
+					width={100}
+					height={100}
+				/>
+				<div className="mt-4 flex flex-col items-center justify-center">
+					<h4 className="font-bold text-xl text-gray-600">SAR Link Portal</h4>
+					<p className="text-gray-500">
+						Pay for your devices and track your bills.
+					</p>
+				</div>
+				<SignUpForm atolls={atolls} />
+			</div>
+		</div>
+	);
 }
-
-