refactor: migrate authentication and signup flow to use external API and improve type safety

app/(auth)/login/page.tsx

@@ -6,12 +6,7 @@ import { redirect } from "next/navigation";
 import React from "react";
 
 export default async function LoginPage() {
-	const session = await auth.api.getSession({
-		headers: await headers(),
-	});
-	if (session) {
-		return redirect("/devices");
-	}
+
 	return (
 		<div className="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 ">

app/(auth)/signup/page.tsx

@@ -1,44 +1,33 @@
 import SignUpForm from "@/components/auth/signup-form";
-import { auth } from "@/lib/auth";
-import prisma from "@/lib/db";
-import { headers } from "next/headers";
+import { getAtollsWithIslands } from "@/queries/atoll";
 import Image from "next/image";
 import { redirect } from "next/navigation";
-import React from "react";
 
 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");
-	}
 
+	const atolls = await getAtollsWithIslands();
+	console.log(atolls.data);
 	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="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 alt="Sar Link Logo" src="/logo.png" width={100} height={100} />
+				<Image priority alt="Sar Link Logo" src="/logo.png" width={100} height={100} style={{ width: "auto", height: "auto" }} />
 				<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} />
+				<SignUpForm atolls={atolls.data} />
 			</div>
 		</div>
 	);

app/(dashboard)/layout.tsx

@@ -1,9 +1,14 @@
 import { ApplicationLayout } from "@/components/auth/application-layout";
+import QueryProvider from "@/components/query-provider";
 
 export default function DashboardLayout({
 	children,
 }: Readonly<{
 	children: React.ReactNode;
 }>) {
-	return <ApplicationLayout>{children}</ApplicationLayout>;
+	return <ApplicationLayout>
+		<QueryProvider>
+			{children}
+		</QueryProvider>
+	</ApplicationLayout>;
 }

app/layout.tsx

@@ -6,7 +6,6 @@ import { Barlow } from "next/font/google";
 import NextTopLoader from "nextjs-toploader";
 import { Toaster } from "sonner";
 import "./globals.css";
-import QueryProvider from "@/components/query-provider";
 const barlow = Barlow({
   subsets: ["latin"],
   weight: ["100", "300", "400", "500", "600", "700", "800", "900"],
@@ -35,7 +34,7 @@ export default function RootLayout({
             enableSystem
             disableTransitionOnChange
           >
-            <QueryProvider>{children}</QueryProvider>
+            {children}
           </ThemeProvider>
         </Provider>
       </body>