feat(admin-topup): add description field to topup form and validation for amount

fix(verify-registration-otp): improve styling and structure of OTP verification form

actions/user-actions.ts

@@ -11,14 +11,14 @@ import { handleApiResponse } from "@/utils/tryCatch";
 
 type VerifyUserResponse =
 	| {
-			ok: boolean;
-			mismatch_fields: string[] | null;
-			error: string | null;
-			detail: string | null;
-	  }
+		ok: boolean;
+		mismatch_fields: string[] | null;
+		error: string | null;
+		detail: string | null;
+	}
 	| {
-			message: boolean;
-	  };
+		message: boolean;
+	};
 export async function verifyUser(userId: string) {
 	const session = await getServerSession(authOptions);
 	if (!session?.apiToken) {
@@ -230,6 +230,7 @@ export type AddTopupFormState = {
 	message: string;
 	fieldErrors?: {
 		amount?: string[];
+		description?: string[];
 	};
 	payload?: FormData;
 };
@@ -242,6 +243,15 @@ export async function adminUserTopup(
 	const amount = formData.get("amount") as string;
 	const session = await getServerSession(authOptions);
 
+
+	if (!amount) {
+		return {
+			status: false,
+			message: "Amount is required",
+			fieldErrors: { amount: ["Amount is required"], description: [] },
+			payload: formData,
+		}
+	}
 	const response = await fetch(
 		`${process.env.SARLINK_API_BASE_URL}/api/billing/admin-topup/`,
 		{

components/admin/admin-topup-form.tsx

@@ -17,12 +17,14 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Textarea } from "../ui/textarea";
 
 export type AddTopupFormState = {
 	status: boolean;
 	message: string;
 	fieldErrors?: {
 		amount?: string[];
+		description?: string[];
 	};
 	payload?: FormData;
 };
@@ -81,9 +83,9 @@ export default function AddTopupDialogForm({ user_id }: { user_id?: string }) {
 				</DialogHeader>
 				<form action={formAction}>
 					<div className="grid gap-4 py-4">
-						<div className="flex flex-col gap-2">
+						<div className="flex flex-col gap-3">
 							<div className="flex flex-col gap-3">
-								<Label htmlFor="device_name">Topup Amount</Label>
+								<Label htmlFor="amount">Topup Amount</Label>
 								<input type="hidden" name="user_id" value={user_id} />
 								<Input
 									type="number"
@@ -98,6 +100,23 @@ export default function AddTopupDialogForm({ user_id }: { user_id?: string }) {
 									</span>
 								)}
 							</div>
+							<div className="flex flex-col gap-3">
+								<Label htmlFor="description">Topup Description</Label>
+								<input type="hidden" name="user_id" value={user_id} />
+								<Textarea
+									defaultValue={(state?.payload?.get("description") || "") as string}
+									rows={10}
+									name="description"
+									id="topup_description"
+									className="col-span-5 max-w-[375px] h-32 resize-none"
+									style={{ overflowY: "auto" }}
+								/>
+								{state.fieldErrors?.description && (
+									<span className="text-red-500 text-sm">
+										{state.fieldErrors.description[0]}
+									</span>
+								)}
+							</div>
 						</div>
 					</div>
 					<DialogFooter>

components/auth/verify-registration-otp-form.tsx

@@ -1,14 +1,14 @@
 "use client";
 
+import { Loader2 } from "lucide-react";
+import Link from "next/link";
+import { redirect, useSearchParams } from "next/navigation";
+import { useActionState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { cn } from "@/lib/utils";
 import { VerifyRegistrationOTP } from "@/queries/authentication";
-import { Loader2 } from "lucide-react";
-import Link from "next/link";
-import { redirect, useSearchParams } from "next/navigation";
-import { useActionState } from "react";
 
 export default function VerifyRegistrationOTPForm({
 	phone_number,
@@ -28,7 +28,7 @@ export default function VerifyRegistrationOTPForm({
 	return (
 		<form
 			action={formAction}
-			className="w-full max-w-xs bg-white dark:bg-sarLinkOrange/10 title-bg border rounded-lg shadow my-4"
+			className="w-full max-w-xs bg-white dark:bg-sarLinkOrange/10 title-bg border-2 border-sarLinkOrange/50 rounded-lg shadow my-4"
 		>
 			<div className="grid pb-4 pt-4 gap-4 px-4">
 				<div className="flex flex-col gap-4">
@@ -37,7 +37,7 @@ export default function VerifyRegistrationOTPForm({
 							{state.message}
 						</p>
 					) : (
-						<p className="bg-sarLinkOrange/50 border border-yellow-900/50 dark:border-sarLinkOrange/50 rounded p-2 text-center text-sm text-gray-900 dark:text-gray-300">
+						<p className="bg-sarLinkOrange border border-yellow-900/50 dark:border-sarLinkOrange/50 rounded p-2 text-center text-sm text-gray-900 dark:text-orange-950">
 							Account verification OTP sent to [{phone_number}]
 						</p>
 					)}
@@ -59,7 +59,7 @@ export default function VerifyRegistrationOTPForm({
 						type="number"
 						placeholder="Enter OTP"
 						className={cn(
-							"bg-white text-black",
+							"bg-white text-black dark:text-white dark:bg-gray-950",
 							state.status === "verify_success" && "hidden",
 						)}
 					/>