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/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}