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/login-form.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-
 import { Button } from "@/components/ui/button";
 
 import { signin } from "@/actions/auth-actions";
@@ -15,13 +14,17 @@ export default function LoginForm() {
 	});
 
 	return (
-		<form className="bg-white overflow-clip dark:bg-transparent dark:border-2 w-full max-w-xs mx-auto rounded-lg shadow mt-4" action={formAction}>
-			<div className="py-6 px-10">
+		<form
+			className="bg-white overflow-clip dark:bg-transparent dark:border-2 w-full max-w-xs mx-auto rounded-lg shadow mt-4"
+			action={formAction}
+		>
+			<div className="py-4 px-4">
 				<div className="grid gap-4">
 					<PhoneInput
 						id="phone-number"
 						name="phoneNumber"
 						maxLength={8}
+						disabled={isPending}
 						placeholder="Enter phone number"
 						defaultCountry="MV"
 					/>
@@ -29,7 +32,11 @@ export default function LoginForm() {
 					{state.status === "error" && (
 						<p className="text-red-500 text-sm">{state.message}</p>
 					)}
-					<Button className="dark:bg-gray-800 w-full dark:text-white" disabled={isPending} type="submit">
+					<Button
+						className="dark:bg-gray-800 w-full dark:text-white"
+						disabled={isPending}
+						type="submit"
+					>
 						{isPending ? <Loader className="animate-spin" /> : "Request OTP"}
 					</Button>
 				</div>