From 2c67848618227040f379faf2d911549e967d2be7 Mon Sep 17 00:00:00 2001
From: i701 <idhaan701@outlook.com>
Date: Fri, 10 Jan 2025 23:34:53 +0500
Subject: [PATCH] Enhance user verification and UI components

- Updated `auth-actions.ts` to improve user verification notification formatting and date handling.
- Modified `layout.tsx` to support dark mode styling for better user experience.
- Refactored `signup/page.tsx` to enhance layout and responsiveness.
- Introduced a new API route in `route.ts` for sending user verification notifications.
- Improved user feedback in `user-payments-table.tsx` by updating the no payment message.
- Made minor adjustments in `application-layout.tsx` for consistent padding.
- Enhanced `signup-form.tsx` to display error messages for invalid user validation.

These changes improve the user verification process, enhance UI consistency, and provide better feedback to users.
---
 actions/auth-actions.ts                  | 19 +++++++++++--------
 app/(auth)/signup/page.tsx               | 12 +++---------
 app/api/test/route.ts                    | 16 ++++++++++++++++
 app/layout.tsx                           |  2 +-
 components/admin/user-payments-table.tsx |  2 +-
 components/auth/application-layout.tsx   |  2 +-
 components/auth/signup-form.tsx          | 13 +++++++++++++
 lib/person.ts                            | 10 +++++++++-
 8 files changed, 55 insertions(+), 21 deletions(-)
 create mode 100644 app/api/test/route.ts

diff --git a/actions/auth-actions.ts b/actions/auth-actions.ts
index d5519cb..6ecea87 100644
--- a/actions/auth-actions.ts
+++ b/actions/auth-actions.ts
@@ -136,14 +136,17 @@ export async function signup(_actionState: ActionState, formData: FormData) {
 	if (!isValidPerson) {
 		await SendUserRejectionDetailSMS({
 			details: `
-			A new user has requested for verification.
-			USER DETAILS:
-			Name: ${parsedData.data.name}
-			Address: ${parsedData.data.address}
-			ID Card: ${parsedData.data.id_card}
-			DOB: ${parsedData.data.dob}
-			ACC No: ${parsedData.data.accNo}
-			Verify the user with the folloiwing link: ${process.env.BETTER_AUTH_URL}/users/${newUser.id}/verify
+			A new user has requested for verification. \n
+USER DETAILS:
+	Name: ${parsedData.data.name}
+	Address: ${parsedData.data.address}
+	ID Card: ${parsedData.data.id_card}
+	DOB: ${parsedData.data.dob.toLocaleDateString("en-US", {
+		month: "short",
+		day: "2-digit",
+		year: "numeric",
+	})}
+	ACC No: ${parsedData.data.accNo}\n\nVerify the user with the folloiwing link: ${process.env.BETTER_AUTH_URL}/users/${newUser.id}/verify
 			`,
 			phoneNumber: process.env.ADMIN_PHONENUMBER ?? "",
 		});
diff --git a/app/(auth)/signup/page.tsx b/app/(auth)/signup/page.tsx
index a377acd..d27e3d4 100644
--- a/app/(auth)/signup/page.tsx
+++ b/app/(auth)/signup/page.tsx
@@ -29,15 +29,9 @@ export default async function SignupPage({
 	});
 
 	return (
-		<div className="dark:bg-black w-full flex items-center justify-center font-sans">
-			<div className="flex flex-col items-center justify-center w-full h-full py-4">
-				<Image
-					priority
-					alt="Sar Link Logo"
-					src="/logo.png"
-					width={100}
-					height={100}
-				/>
+		<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} />
 				<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">
diff --git a/app/api/test/route.ts b/app/api/test/route.ts
new file mode 100644
index 0000000..f214724
--- /dev/null
+++ b/app/api/test/route.ts
@@ -0,0 +1,16 @@
+import { SendUserRejectionDetailSMS } from "@/actions/user-actions";
+
+export async function POST(request: Request) {
+	await SendUserRejectionDetailSMS({
+		details: `
+    A new user has requested for verification. \n
+USER DETAILS:
+  Name: Jacob
+  Address: Jacob House
+  ID Card: A222111
+  DOB: 24-08-1997
+  ACC No: 7770000010629 \n\nVerify the user with the folloiwing link: ${process.env.BETTER_AUTH_URL}/users/verify
+    `,
+		phoneNumber: process.env.ADMIN_PHONENUMBER ?? "",
+	});
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 5c26fe4..2a489b7 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -25,7 +25,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={`${barlow.variable} antialiased font-sans bg-gray-100`}>
+      <body className={`${barlow.variable} antialiased font-sans bg-gray-100 dark:bg-black`}>
         <Provider>
           <NextTopLoader color="#f49d1b" showSpinner={false} zIndex={9999} />
           <Toaster richColors />
diff --git a/components/admin/user-payments-table.tsx b/components/admin/user-payments-table.tsx
index f590540..7d0ae08 100644
--- a/components/admin/user-payments-table.tsx
+++ b/components/admin/user-payments-table.tsx
@@ -131,7 +131,7 @@ export async function UsersPaymentsTable({
     <div>
       {payments.length === 0 ? (
         <div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
-          <h3>No Users yet.</h3>
+          <h3>No user payments yet.</h3>
         </div>
       ) : (
         <>
diff --git a/components/auth/application-layout.tsx b/components/auth/application-layout.tsx
index cc38a95..8040a86 100644
--- a/components/auth/application-layout.tsx
+++ b/components/auth/application-layout.tsx
@@ -49,7 +49,7 @@ export async function ApplicationLayout({
 						<AccountPopover />
 					</div>
 				</header>
-				<div className="p-4">{children}</div>
+				<div className="p-4 ">{children}</div>
 			</SidebarInset>
 		</SidebarProvider>
 	);
diff --git a/components/auth/signup-form.tsx b/components/auth/signup-form.tsx
index 357cecb..b9dd15f 100644
--- a/components/auth/signup-form.tsx
+++ b/components/auth/signup-form.tsx
@@ -45,6 +45,19 @@ export default function SignUpForm({ atolls }: { atolls: AtollWithIslands[] }) {
 	const NUMBER_WITHOUT_DASH = phoneNumberFromUrl?.split("-").join("");
 
 
+	if (actionState.db_error === "invalidPersonValidation") {
+		return (
+			<>
+				<div className="h-24 w-72 text-center text-green-500 p-4 flex my-4 flex-col items-center justify-center border dark:title-bg bg-white rounded-lg">{actionState.message}</div>
+				<div className="mb-4 text-center text-sm">
+					Go to {" "}
+					<Link href="login" className="underline">
+						login
+					</Link>
+				</div>
+			</>
+		)
+	}
 	return (
 		<form
 			action={action}
diff --git a/lib/person.ts b/lib/person.ts
index e34e76c..64a1be1 100644
--- a/lib/person.ts
+++ b/lib/person.ts
@@ -18,11 +18,19 @@ export async function getNationalPerson({
 }
 
 export async function VerifyUserDetails({ user }: { user: User }) {
-	const phoneNumber = user.phoneNumber.slice(4);
+	const phoneNumber = String(user.phoneNumber).slice(4);
+	console.log({ phoneNumber });
 	const nationalData = await getNationalPerson({ idCard: user.id_card ?? "" });
 	const dob = new Date(nationalData.dob);
 	const age = new Date().getFullYear() - dob.getFullYear();
 
+	console.log("ID card", user.id_card === nationalData.nic);
+	console.log("name", user.name === nationalData.name_en);
+	console.log("house", user.address === nationalData.house_name_en);
+	console.log("phone", phoneNumber === nationalData.primary_contact);
+	console.log("db phone", phoneNumber);
+	console.log("national phone", nationalData.primary_contact);
+
 	if (
 		user.id_card === nationalData.nic &&
 		user.name === nationalData.name_en &&