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/(dashboard)/devices/page.tsx

@@ -1,5 +1,15 @@
+import { auth } from "@/lib/auth";
+import { headers } from "next/headers";
+
 export default async function Devices() {
-	return <div>
-		<h2>Devices</h2>
-	</div>;
+	const session = await auth.api.getSession({
+		headers: await headers(),
+	});
+
+	return (
+		<div>
+			<h2>Server session</h2>
+			<pre>{JSON.stringify(session?.user, null, 2)}</pre>
+		</div>
+	);
 }

app/(dashboard)/payments/page.tsx

@@ -1,17 +1,14 @@
-'use client'
-import { PhoneInput } from '@/components/ui/phone-input'
-import React from 'react'
+"use client";
+import { authClient } from "@/lib/auth-client";
+import React from "react";
 
 export default function MyPayments() {
-  return (
-    <div>
-      <PhoneInput
-        id="phone-number"
-        name="phoneNumber"
-        placeholder="Enter phone number"
-        defaultCountry="MV"
-      />
-    </div>
+	const session = authClient.useSession();
 
-  )
+	return (
+		<div>
+			<h3>Client session</h3>
+			<pre>{JSON.stringify(session.data, null, 2)}</pre>
+		</div>
+	);
 }

app/(dashboard)/user-devices/page.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function UserDevices() {
+	return <div>UserDevices</div>;
+}

app/(dashboard)/user-payments/page.tsx

@@ -0,0 +1,11 @@
+import { AdminAuthGuard } from "@/lib/auth-guard";
+import React from "react";
+
+export default async function UserPayments() {
+	await AdminAuthGuard();
+	return (
+		<div>
+			<h3>User Payments</h3>
+		</div>
+	);
+}

app/(dashboard)/users/page.tsx

@@ -0,0 +1,56 @@
+import Filter from "@/components/filter";
+import Search from "@/components/search";
+import { UsersTable } from "@/components/user-table";
+import { AdminAuthGuard } from "@/lib/auth-guard";
+import { CheckCheck, Hourglass, Minus } from "lucide-react";
+import React, { Suspense } from "react";
+export default async function AdminUsers({
+	searchParams,
+}: {
+	searchParams: Promise<{
+		query: string;
+		page: number;
+		sortBy: string;
+		status: string;
+	}>;
+}) {
+	await AdminAuthGuard();
+
+	return (
+		<div>
+			<h3 className="border-b-2 text-2xl font-bold title-bg py-4 px-2 mb-4">
+				Users
+			</h3>
+			<div
+				id="user-filters"
+				className=" border-b-2 pb-4 gap-4 flex items-center justify-start"
+			>
+				<Search />
+				<Filter
+					options={[
+						{
+							value: "all",
+							label: "ALL",
+							icon: <Minus size={14} />,
+						},
+						{
+							value: "unverified",
+							label: "Unverfieid",
+							icon: <CheckCheck size={14} />,
+						},
+						{
+							value: "verified",
+							label: "Verified",
+							icon: <Hourglass size={14} />,
+						},
+					]}
+					defaultOption="all"
+					queryParamKey="status"
+				/>
+			</div>
+			<Suspense fallback={"loading...."}>
+				<UsersTable searchParams={searchParams} />
+			</Suspense>
+		</div>
+	);
+}