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>
 	);

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>

components/auth/signup-form.tsx

@@ -8,234 +8,244 @@ import { cn } from "@/lib/utils";
 import { Loader } from "lucide-react";
 import { useActionState } from "react";
 import { useSearchParams } from "next/navigation";
-import { Atoll, Island, Prisma } from "@prisma/client";
-import * as React from "react"
+import type { Island, Prisma } from "@prisma/client";
+import * as React from "react";
 
 import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
 
 type AtollWithIslands = Prisma.AtollGetPayload<{
-  include: {
-    islands: true;
-  }
-}>
+	include: {
+		islands: true;
+	};
+}>;
 
 export default function SignUpForm({ atolls }: { atolls: AtollWithIslands[] }) {
-  const [atoll, setAtoll] = React.useState<AtollWithIslands>()
-  const [island, setIsland] = React.useState<string>()
+	const [atoll, setAtoll] = React.useState<AtollWithIslands>();
+	const [islands, setIslands] = React.useState<Island[]>();
 
+	React.useEffect(() => {
+		setIslands(atoll?.islands);
+	}, [atoll]);
 
+	const [actionState, action, isPending] = useActionState(signup, {
+		message: "",
+	});
+	const params = useSearchParams();
+	const phoneNumberFromUrl = params.get("phone_number");
+	const NUMBER_WITHOUT_DASH = phoneNumberFromUrl?.split("-").join("");
 
-  const [actionState, action, isPending] = useActionState(signup, {
-    message: "",
-  });
-  const params = useSearchParams();
-  const phoneNumberFromUrl = params.get("phone_number");
-  const NUMBER_WITHOUT_DASH = phoneNumberFromUrl?.split("-").join("")
+	return (
+		<form
+			action={action}
+			className="max-w-xs mt-4 w-full bg-white dark:bg-transparent dark:border-2 shadow rounded-lg mx-auto"
+		>
+			<div className="py-2 px-4 my-2 space-y-2">
+				<div>
+					<label htmlFor="name" className="text-sm">
+						Name
+					</label>
 
+					<Input
+						className={cn(
+							"text-base",
+							actionState.errors?.fieldErrors.name && "border-2 border-red-500",
+						)}
+						name="name"
+						type="text"
+						disabled={isPending}
+						defaultValue={(actionState.payload?.get("name") || "") as string}
+						placeholder="Full Name"
+					/>
+					{actionState.errors?.fieldErrors.name && (
+						<span className="text-sm inline-block text-red-500">
+							{actionState.errors?.fieldErrors.name}
+						</span>
+					)}
+				</div>
+				<div>
+					<label htmlFor="id_card" className="text-sm">
+						ID Card
+					</label>
+					<Input
+						name="id_card"
+						type="text"
+						maxLength={7}
+						disabled={isPending}
+						defaultValue={(actionState.payload?.get("id_card") || "") as string}
+						className={cn(
+							"text-base",
+							actionState.errors?.fieldErrors?.id_card &&
+								"border-2 border-red-500",
+						)}
+						placeholder="ID Card"
+					/>
+					{actionState?.errors?.fieldErrors?.id_card?.[0] && (
+						<span className="text-sm inline-block text-red-500">
+							{actionState.errors.fieldErrors.id_card[0]}
+						</span>
+					)}
+					{actionState.db_error === "id_card" && (
+						<span className="text-sm inline-block text-red-500">
+							{actionState.message}
+						</span>
+					)}
+				</div>
+				<div>
+					<div>
+						<label htmlFor="atoll" className="text-sm">
+							Atoll
+						</label>
+						<Select
+							disabled={isPending}
+							onValueChange={(v) => {
+								setAtoll(atolls.find((atoll) => atoll.id === v));
+								setIslands([]);
+							}}
+							name="atoll_id"
+							value={atoll?.id}
+						>
+							<SelectTrigger className="w-full">
+								<SelectValue placeholder="Select atoll" />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectGroup>
+									<SelectLabel>Atolls</SelectLabel>
+									{atolls.map((atoll) => (
+										<SelectItem key={atoll.id} value={atoll.id}>
+											{atoll.name}
+										</SelectItem>
+									))}
+								</SelectGroup>
+							</SelectContent>
+							{actionState.errors?.fieldErrors?.atoll_id && (
+								<span className="text-sm inline-block text-red-500">
+									{actionState.errors?.fieldErrors?.atoll_id}
+								</span>
+							)}
+						</Select>
+					</div>
+					<div>
+						<label htmlFor="island" className="text-sm">
+							Island
+						</label>
+						<Select disabled={isPending} name="island_id">
+							<SelectTrigger className="w-full">
+								<SelectValue placeholder="Select island" />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectGroup>
+									<SelectLabel>Islands</SelectLabel>
+									{islands?.map((island) => (
+										<SelectItem key={island.id} value={island.id}>
+											{island.name}
+										</SelectItem>
+									))}
+								</SelectGroup>
+							</SelectContent>
+							{actionState.errors?.fieldErrors?.island_id && (
+								<span className="text-sm inline-block text-red-500">
+									{actionState.errors?.fieldErrors?.island_id}
+								</span>
+							)}
+						</Select>
+					</div>
+				</div>
 
-  return (
-    <form
-      action={action}
-      className="max-w-xs mt-4 w-full bg-white dark:bg-transparent dark:border-2 shadow rounded-lg mx-auto"
-    >
-      <div className="py-2 px-4 my-2 space-y-2">
-        <div>
-          <label htmlFor="name" className="text-sm">Name</label>
+				<div>
+					<label htmlFor="house_name" className="text-sm">
+						House Name
+					</label>
+					<Input
+						className={cn(
+							"text-base",
+							actionState.errors?.fieldErrors?.house_name &&
+								"border-2 border-red-500",
+						)}
+						disabled={isPending}
+						name="house_name"
+						defaultValue={
+							(actionState.payload?.get("house_name") || "") as string
+						}
+						type="text"
+						placeholder="House Name"
+					/>
+					{actionState.errors?.fieldErrors?.house_name && (
+						<span className="text-sm inline-block text-red-500">
+							{actionState.errors?.fieldErrors?.house_name}
+						</span>
+					)}
+				</div>
 
-          <Input
-            className={cn(
-              'text-base',
-              actionState.errors?.fieldErrors.name && 'border-2 border-red-500',
-            )}
-            name="name"
-            type="text"
-            defaultValue={(actionState.payload?.get("name") || "") as string}
-            placeholder="Full Name"
-          />
-          {actionState.errors?.fieldErrors.name && (
-            <span className="text-sm inline-block text-red-500">
-              {actionState.errors?.fieldErrors.name}
-            </span>
-          )}
-        </div>
-        <div>
-          <label htmlFor="id_card" className="text-sm">ID Card</label>
-          <Input
-            name="id_card"
-            type="text"
-            maxLength={7}
-            defaultValue={(actionState.payload?.get("id_card") || "") as string}
-            className={cn(
-              'text-base',
-              actionState.errors?.fieldErrors?.id_card && 'border-2 border-red-500',
-            )}
-            placeholder="ID Card"
-          />
-          {actionState?.errors?.fieldErrors?.id_card?.[0] && (
-            <span className="text-sm inline-block text-red-500">
-              {actionState.errors.fieldErrors.id_card[0]}
-            </span>
-          )}
-          {actionState.db_error === "id_card" && (
-            <span className="text-sm inline-block text-red-500">
-              {actionState.message}
-            </span>
-          )}
-        </div>
-        <div>
-          {/* <label htmlFor="island_name" className="text-sm">Island Name</label>
-          <Input
-            name="island_name"
-            type="text"
-            defaultValue={"F.Dharaboondhoo"}
-            className={cn(
-              'text-base cursor-not-allowed',
-              actionState.errors?.fieldErrors?.island_name && 'border-2 border-red-500',
-            )}
-            readOnly
-          />
-          {actionState?.errors?.fieldErrors.island_name && (
-            <span className="text-sm inline-block text-red-500">
-              {actionState?.errors?.fieldErrors.island_name}
-            </span>
-          )} */}
+				<div>
+					<label htmlFor="dob" className="text-sm">
+						Date of Birth
+					</label>
+					<Input
+						className={cn(
+							"text-base",
+							actionState.errors?.fieldErrors?.dob && "border-2 border-red-500",
+						)}
+						name="dob"
+						disabled={isPending}
+						defaultValue={(actionState.payload?.get("dob") || "") as string}
+						type="date"
+						placeholder="Date of birth"
+					/>
+					{actionState.errors?.fieldErrors?.dob && (
+						<span className="text-sm inline-block text-red-500">
+							{actionState.errors?.fieldErrors?.dob}
+						</span>
+					)}
+				</div>
 
-          <div>
-            <label htmlFor="atoll" className="text-sm">Atoll</label>
-            <Select onValueChange={(v) => {
-              setAtoll(atolls.find((atoll) => atoll.id === v))
-              setIsland("")
-            }} name="atoll_id" value={atoll?.id}>
-              <SelectTrigger className="w-full">
-                <SelectValue placeholder="Select atoll" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectLabel>Atolls</SelectLabel>
-                  {atolls.map((atoll) => (
-                    <SelectItem key={atoll.id} value={atoll.id}>
-                      {atoll.name}
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-              {actionState.errors?.fieldErrors?.atoll_id && (
-                <span className="text-sm inline-block text-red-500">
-                  {actionState.errors?.fieldErrors?.atoll_id}
-                </span>
-              )}
-            </Select>
-          </div>
-          <div>
-            <label htmlFor="island" className="text-sm">Island</label>
-            <Select
-              name="island_id">
-              <SelectTrigger className="w-full">
-                <SelectValue placeholder="Select island" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectLabel>Islands</SelectLabel>
-                  {atoll?.islands.map((island) => (
-                    <SelectItem key={island.id} value={island.id}>
-                      {island.name}
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-              {actionState.errors?.fieldErrors?.island_id && (
-                <span className="text-sm inline-block text-red-500">
-                  {actionState.errors?.fieldErrors?.island_id}
-                </span>
-              )}
-            </Select>
-          </div>
-        </div>
+				<div>
+					<label htmlFor="phone_number" className="text-sm">
+						Phone Number
+					</label>
+					<Input
+						id="phone-number"
+						name="phone_number"
+						maxLength={8}
+						disabled={isPending}
+						className={cn(
+							!phoneNumberFromUrl &&
+								actionState.errors?.fieldErrors?.phone_number &&
+								"border-2 border-red-500 rounded-md",
+						)}
+						defaultValue={NUMBER_WITHOUT_DASH ?? ""}
+						readOnly={Boolean(phoneNumberFromUrl)}
+						placeholder={phoneNumberFromUrl ?? "Phone number"}
+					/>
+				</div>
+				{actionState?.errors?.fieldErrors?.phone_number?.[0] && (
+					<span className="text-sm inline-block text-red-500">
+						{actionState.errors.fieldErrors.phone_number[0]}
+					</span>
+				)}
+				{actionState.db_error === "phone_number" && (
+					<span className="text-sm inline-block text-red-500">
+						{actionState.message}
+					</span>
+				)}
+				<Button disabled={isPending} className="mt-4 w-full" type="submit">
+					{isPending ? <Loader className="animate-spin" /> : "Submit"}
+				</Button>
+			</div>
 
-        <div>
-          <label htmlFor="house_name" className="text-sm">House Name</label>
-          <Input
-            className={cn(
-              'text-base',
-              actionState.errors?.fieldErrors?.house_name && 'border-2 border-red-500',
-            )}
-            name="house_name"
-            defaultValue={(actionState.payload?.get("house_name") || "") as string}
-            type="text"
-            placeholder="House Name"
-          />
-          {actionState.errors?.fieldErrors?.house_name && (
-            <span className="text-sm inline-block text-red-500">
-              {actionState.errors?.fieldErrors?.house_name}
-            </span>
-          )}
-        </div>
-
-        <div>
-          <label htmlFor="dob" className="text-sm">Date of Birth</label>
-          <Input
-            className={cn(
-              'text-base',
-              actionState.errors?.fieldErrors?.dob && 'border-2 border-red-500',
-            )}
-            name="dob"
-            defaultValue={(actionState.payload?.get("dob") || "") as string}
-            type="date"
-            placeholder="Date of birth"
-          />
-          {actionState.errors?.fieldErrors?.dob && (
-            <span className="text-sm inline-block text-red-500">
-              {actionState.errors?.fieldErrors?.dob}
-            </span>
-          )}
-        </div>
-
-        <div>
-          <label htmlFor="phone_number" className="text-sm">Phone Number</label>
-          <Input
-            id="phone-number"
-            name="phone_number"
-            maxLength={8}
-            className={cn(!phoneNumberFromUrl && actionState.errors?.fieldErrors?.phone_number && "border-2 border-red-500 rounded-md",)}
-            defaultValue={NUMBER_WITHOUT_DASH ?? ""}
-            readOnly={Boolean(phoneNumberFromUrl)}
-            placeholder={phoneNumberFromUrl ?? "Phone number"}
-          />
-        </div>
-        {actionState?.errors?.fieldErrors?.phone_number?.[0] && (
-          <span className="text-sm inline-block text-red-500">
-            {actionState.errors.fieldErrors.phone_number[0]}
-          </span>
-        )}
-        <Button disabled={isPending} className="mt-4 w-full" type="submit">
-          {isPending ? <Loader className="animate-spin" /> : "Submit"}
-        </Button>
-      </div>
-
-      <div className="mb-4 text-center text-sm">
-        Already have an account?{" "}
-        <Link href="login" className="underline">
-          login
-        </Link>
-      </div>
-
-    </form>
-  );
+			<div className="mb-4 text-center text-sm">
+				Already have an account?{" "}
+				<Link href="login" className="underline">
+					login
+				</Link>
+			</div>
+		</form>
+	);
 }
-
-
-
-
-
-
-
-

components/auth/verify-otp-form.tsx

@@ -4,84 +4,86 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { authClient } from "@/lib/auth-client";
-import { zodResolver } from '@hookform/resolvers/zod';
+import { zodResolver } from "@hookform/resolvers/zod";
 import { Loader } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useTransition } from "react";
 import { type SubmitHandler, useForm } from "react-hook-form";
-import { toast } from 'sonner'
+import { toast } from "sonner";
 import { z } from "zod";
 const OTPSchema = z.object({
-  pin: z.string().min(6, {
-    message: "Your one-time password must be 6 characters.",
-  }),
+	pin: z.string().min(6, {
+		message: "Your one-time password must be 6 characters.",
+	}),
 });
 
-export default function VerifyOTPForm({ phone_number }: { phone_number: string }) {
-  const [isPending, startTransition] = useTransition();
-  const router = useRouter();
-  console.log("verification in OTP form", phone_number)
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<z.infer<typeof OTPSchema>>({
-    defaultValues: {
-      pin: "",
-    },
-    resolver: zodResolver(OTPSchema),
-  });
+export default function VerifyOTPForm({
+	phone_number,
+}: { phone_number: string }) {
+	const [isPending, startTransition] = useTransition();
+	const router = useRouter();
+	console.log("verification in OTP form", phone_number);
+	const {
+		register,
+		handleSubmit,
+		formState: { errors },
+	} = useForm<z.infer<typeof OTPSchema>>({
+		defaultValues: {
+			pin: "",
+		},
+		resolver: zodResolver(OTPSchema),
+	});
 
-  const onSubmit: SubmitHandler<z.infer<typeof OTPSchema>> = (data) => {
+	const onSubmit: SubmitHandler<z.infer<typeof OTPSchema>> = (data) => {
+		startTransition(async () => {
+			const isVerified = await authClient.phoneNumber.verify({
+				phoneNumber: phone_number,
+				code: data.pin,
+			});
+			console.log({ isVerified });
+			if (!isVerified.error) {
+				router.push("/devices");
+			} else {
+				toast.error(isVerified.error.message);
+			}
+		});
+	};
 
-    startTransition(async () => {
-      const isVerified = await authClient.phoneNumber.verify({
-        phoneNumber: phone_number,
-        code: data.pin,
-      });
-      console.log({ isVerified });
-      if (!isVerified.error) {
-        router.push("/devices");
-      } else {
-        toast.error(isVerified.error.message);
-      }
-    });
-  }
-
-  return (
-    <form
-      onSubmit={handleSubmit(onSubmit)}
-      className="bg-white dark:bg-gray-900 w-full max-w-xs  rounded-lg shadow my-4"
-    >
-      <div className="grid pb-4 pt-2 gap-4 px-10">
-        <div className="">
-          <Label htmlFor="otp-number" className="text-gray-500">
-            Enter the OTP
-          </Label>
-          <Input
-            id="otp-number"
-            {...register("pin")}
-            type="text"
-          />
-          {errors.pin && (
-            <p className="text-red-500 text-sm">{errors.pin.message}</p>
-          )}
-        </div>
-        <Button
-          className="dark:bg-gray-800 w-full dark:text-white"
-          disabled={isPending}
-          type="submit"
-        >
-          {isPending ? <Loader className="animate-spin" /> : "Login"}
-        </Button>
-      </div>
-      <div className="mb-4 text-center text-sm">
-        Go back to{" "}
-        <Link href="login" className="underline">
-          login
-        </Link>
-      </div>
-    </form>
-  );
+	return (
+		<form
+			onSubmit={handleSubmit(onSubmit)}
+			className="bg-white dark:bg-gray-900 w-full max-w-xs  rounded-lg shadow my-4"
+		>
+			<div className="grid pb-4 pt-4 gap-4 px-4">
+				<div className="">
+					<Label htmlFor="otp-number" className="text-gray-500">
+						Enter the OTP
+					</Label>
+					<Input
+						disabled={isPending}
+						id="otp-number"
+						{...register("pin")}
+						type="text"
+					/>
+					{errors.pin && (
+						<p className="text-red-500 text-sm">{errors.pin.message}</p>
+					)}
+				</div>
+				<Button
+					className="dark:bg-gray-800 w-full dark:text-white"
+					disabled={isPending}
+					type="submit"
+				>
+					{isPending ? <Loader className="animate-spin" /> : "Login"}
+				</Button>
+			</div>
+			<div className="mb-4 text-center text-sm">
+				Go back to{" "}
+				<Link href="login" className="underline">
+					login
+				</Link>
+			</div>
+		</form>
+	);
 }