Refactor authentication components and enhance user session handling

- Updated AccountPopover to utilize session data for user information display.
- Modified ApplicationLayout to fetch user details from the database using Prisma.
- Replaced Checkbox components with native input elements in SignUpForm for better accessibility.
- Enhanced seed script to include default islands and create related data in the database.

components/auth/account-popver.tsx

@@ -5,29 +5,38 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover"
-import { authClient } from "@/lib/auth-client"
+import { authClient } from "@/lib/auth-client";
-import type { User } from "better-auth"
+import type { User } from "@prisma/client";
-import { Loader, User as UserIcon } from "lucide-react"
+import { Loader2, User as UserIcon } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { useState } from "react"
 
 export function AccountPopover({ user }: { user?: User }) {
+  const session = authClient.useSession();
   const [loading, setLoading] = useState(false)
   const router = useRouter()
+
+  if (session.isPending) {
+    <Button variant={"outline"} disabled>
+      <Loader2 className="animate-spin" />
+    </Button>
+  }
   return (
+
     <Popover>
       <PopoverTrigger asChild>
         <Button variant="outline">
           <UserIcon />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-80">
+      <PopoverContent className="w-fit">
         <div className="grid gap-4">
           <div className="space-y-2">
-            <h4 className="font-medium leading-none">{user?.name}</h4>
+            <h4 className="font-medium leading-none">{session.data?.user?.name}</h4>
             <p className="text-sm text-muted-foreground">
-              {user?.email}
+              {session.data?.user?.phoneNumber}
             </p>
+            <span className="text-xs text-gray-500">{user?.address}</span>
           </div>
           <Button disabled={loading} onClick={async () => {
             setLoading(true)
@@ -40,7 +49,7 @@ export function AccountPopover({ user }: { user?: User }) {
             })
             setLoading(false)
           }}>
-            {loading ? <Loader className="animate-spin" /> : "Logout"}
+            {loading ? <Loader2 className="animate-spin" /> : "Logout"}
           </Button>
         </div>
       </PopoverContent>

components/auth/application-layout.tsx

@@ -15,6 +15,7 @@ import {
 	SidebarTrigger,
 } from "@/components/ui/sidebar";
 import { auth } from "@/lib/auth";
+import prisma from "@/lib/db";
 import { headers } from "next/headers";
 import { AccountPopover } from "./account-popver";
 
@@ -22,7 +23,12 @@ export async function ApplicationLayout({
 	children,
 }: { children: React.ReactNode }) {
 	const session = await auth.api.getSession({
-		headers: await headers(), // you need to pass the headers object.
+		headers: await headers()
+	});
+	const user = await prisma.user.findUnique({
+		where: {
+			id: session?.user?.id,
+		},
 	});
 	return (
 		<SidebarProvider>
@@ -47,7 +53,7 @@ export async function ApplicationLayout({
 
 					<div className="flex items-center gap-2">
 						<ModeToggle />
-						<AccountPopover user={session?.user} />
+						<AccountPopover user={user || undefined} />
 					</div>
 				</header>
 				<div className="p-4">{children}</div>

components/auth/signup-form.tsx

@@ -20,7 +20,6 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import { Checkbox } from "../ui/checkbox";
 
 type AtollWithIslands = Prisma.AtollGetPayload<{
 	include: {
@@ -241,7 +240,8 @@ export default function SignUpForm({ atolls }: { atolls: AtollWithIslands[] }) {
 				)}
 				<div className="flex flex-col gap-2 items-start justify-start py-2">
 					<div className="flex gap-2 items-center">
-						<Checkbox
+						<input
+							type="checkbox"
 							defaultChecked={(actionState.payload?.get("terms") || "") as string === 'on'}
 							name="terms" id="terms" />
 						<label
@@ -263,7 +263,9 @@ export default function SignUpForm({ atolls }: { atolls: AtollWithIslands[] }) {
 					)}
 					<div className="flex gap-2 items-center">
 
-						<Checkbox
+						<input
+							type="checkbox"
+							defaultChecked={(actionState.payload?.get("policy") || "") as string === 'on'}
 							name="policy" id="terms" />
 						<label
 							htmlFor="terms"

prisma/seed.ts

@@ -3,6 +3,8 @@ import { PrismaClient } from "@prisma/client";
 
 const prisma = new PrismaClient();
 
+const DEFAULT_ISLANDS = ["Dharanboodhoo", "Feeali", "Nilandhoo", "Magoodhoo"];
+
 async function main() {
 	const users = Array.from({ length: 25 }, () => ({
 		name: `${faker.person.fullName().split(" ")[1]} House-${crypto
@@ -22,9 +24,23 @@ async function main() {
 		phoneNumberVerified: false,
 		role: "USER",
 	}));
+
 	await prisma.user.createMany({
 		data: users,
 	});
+	const FAAFU_ATOLL = await prisma.atoll.create({
+		data: {
+			name: "F",
+		},
+	});
+
+	const islands = DEFAULT_ISLANDS.map((name) => ({
+		name,
+		atollId: FAAFU_ATOLL.id,
+	}));
+	await prisma.island.createMany({
+		data: islands,
+	});
 }
 
 main()