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.

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>
       ) : (
         <>

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

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}