feat(user): add admin topup functionality in user details page ✨

actions/payment.ts

@@ -24,7 +24,8 @@ export async function createPayment(data: NewPayment) {
 	const session = await getServerSession(authOptions);
 	console.log("data", data);
 	const response = await fetch(
-		`${process.env.SARLINK_API_BASE_URL // });
+		`${
+			process.env.SARLINK_API_BASE_URL // });
 		}/api/billing/payment/`,
 		{
 			method: "POST",

actions/user-actions.ts

@@ -224,3 +224,56 @@ export async function updateUserAgreement(
 		message: "User agreement updated successfully",
 	};
 }
+
+export type AddTopupFormState = {
+	status: boolean;
+	message: string;
+	fieldErrors?: {
+		amount?: string[];
+	};
+	payload?: FormData;
+};
+
+export async function adminUserTopup(
+	_prevState: AddTopupFormState,
+	formData: FormData,
+): Promise<AddTopupFormState> {
+	const user_id = formData.get("user_id") as string;
+	const amount = formData.get("amount") as string;
+	const session = await getServerSession(authOptions);
+
+	const response = await fetch(
+		`${process.env.SARLINK_API_BASE_URL}/api/billing/admin-topup/`,
+		{
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+				Authorization: `Token ${session?.apiToken}`,
+			},
+			body: JSON.stringify({
+				amount: Number.parseInt(amount),
+				user_id: Number.parseInt(user_id),
+			}),
+		},
+	);
+	if (!response.ok) {
+		const errorData = await response.json();
+		return {
+			status: false,
+			message:
+				errorData.message ||
+				errorData.detail ||
+				"An error occurred while topping up the user.",
+			fieldErrors: {},
+			payload: formData,
+		};
+	}
+
+	revalidatePath("/users/[userId]/topup", "page");
+	return {
+		status: true,
+		message: "User topped up successfully",
+		fieldErrors: {},
+		payload: formData,
+	};
+}

app/(dashboard)/users/[userId]/details/page.tsx

@@ -2,6 +2,7 @@ import { EyeIcon, FileTextIcon, PencilIcon } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { redirect } from "next/navigation";
+import AddTopupDialogForm from "@/components/admin/admin-topup-form";
 import ClientErrorMessage from "@/components/client-error-message";
 import InputReadOnly from "@/components/input-read-only";
 import { Badge } from "@/components/ui/badge";
@@ -49,6 +50,7 @@ export default async function VerifyUserPage({
 				<div className="flex flex-wrap gap-2">
 					{dbUser && !dbUser?.verified && <UserVerifyDialog user={dbUser} />}
 					{dbUser && !dbUser?.verified && <UserRejectDialog user={dbUser} />}
+					<AddTopupDialogForm user_id={userId} />
 					<Link href={"update"}>
 						<Button className="hover:cursor-pointer">
 							<PencilIcon />

components/admin/admin-topup-form.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { Loader2, PlusCircle } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useActionState, useEffect, useState } from "react"; // Import useActionState
+import { toast } from "sonner";
+import { adminUserTopup } from "@/actions/user-actions";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export type AddTopupFormState = {
+	status: boolean;
+	message: string;
+	fieldErrors?: {
+		amount?: string[];
+	};
+	payload?: FormData;
+};
+
+export const initialState: AddTopupFormState = {
+	message: "",
+	fieldErrors: {},
+	status: false,
+};
+
+export default function AddTopupDialogForm({ user_id }: { user_id?: string }) {
+	const [open, setOpen] = useState(false);
+	const router = useRouter();
+	const [state, formAction, pending] = useActionState(
+		adminUserTopup,
+		initialState,
+	);
+
+	useEffect(() => {
+		if (state.message && state !== initialState) {
+			if (state.fieldErrors && Object.keys(state.fieldErrors).length > 0) {
+				toast.error(state.message);
+			} else if (state.status) {
+				setOpen(false);
+				toast.success(state.message);
+				router.push("/user-topups?page=1");
+			} else {
+				toast.error(state.message);
+			}
+		}
+	}, [state, router]);
+
+	if (!user_id) {
+		return null;
+	}
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button
+					className="gap-2 items-center"
+					disabled={pending}
+					variant="default"
+				>
+					Add cash topup
+					<PlusCircle size={16} />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-[425px]">
+				<DialogHeader>
+					<DialogTitle>New Manual Topup</DialogTitle>
+					<DialogDescription>
+						To add a new manual topup, enter the amount below. Click save when
+						you are done.
+					</DialogDescription>
+				</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">
+								<Label htmlFor="device_name">Topup Amount</Label>
+								<input type="hidden" name="user_id" value={user_id} />
+								<Input
+									type="number"
+									defaultValue={(state?.payload?.get("amount") || "") as string}
+									name="amount"
+									id="topup_amount"
+									className="col-span-3"
+								/>
+								{state.fieldErrors?.amount && (
+									<span className="text-red-500 text-sm">
+										{state.fieldErrors.amount[0]}
+									</span>
+								)}
+							</div>
+						</div>
+					</div>
+					<DialogFooter>
+						<Button disabled={pending} type="submit">
+							{pending ? <Loader2 className="animate-spin" /> : "Save"}
+						</Button>
+					</DialogFooter>
+				</form>
+			</DialogContent>
+		</Dialog>
+	);
+}

components/user-table.tsx

@@ -127,7 +127,7 @@ export async function UsersTable({
 
 									<TableCell>{user.mobile}</TableCell>
 									<TableCell>
-										<Link href={`/users/${user.id}/verify`}>
+										<Link href={`/users/${user.id}/details`}>
 											<Button>Details</Button>
 										</Link>
 									</TableCell>

components/wallet-transactions-table.tsx

@@ -52,13 +52,11 @@ export async function WalletTransactionsTable({
 	}
 	const { data, meta } = transactions;
 	const totalDebit = data.reduce(
-    (acc, trx) =>
+		(acc, trx) => acc + (trx.transaction_type === "DEBIT" ? trx.amount : 0),
-      acc + (trx.transaction_type === "DEBIT" ? trx.amount : 0),
 		0,
 	);
 	const totalCredit = data.reduce(
-    (acc, trx) =>
+		(acc, trx) => acc + (trx.transaction_type === "TOPUP" ? trx.amount : 0),
-      acc + (trx.transaction_type === "TOPUP" ? trx.amount : 0),
 		0,
 	);
 	return (
@@ -71,20 +69,15 @@ export async function WalletTransactionsTable({
 				<div>
 					<div className="flex gap-4 mb-4 w-full">
 						<div className="bg-red-400 w-full sm:w-fit dark:bg-red-950 dark:text-red-400 text-red-900 p-2 px-4 rounded-md mb-2">
-              <h5 className="text-lg font-semibold">
+							<h5 className="text-lg font-semibold">Total Debit</h5>
-                Total Debit
-              </h5>
 							<p>{totalDebit.toFixed(2)} MVR</p>
 						</div>
 						<div className="bg-green-400 w-full sm:w-fit dark:bg-green-950 dark:text-green-400 text-green-900 p-2 px-4 rounded-md mb-2">
-              <h5 className="text-lg font-semibold">
+							<h5 className="text-lg font-semibold">Total Credit</h5>
-                Total Credit
-              </h5>
 							<p>{totalCredit.toFixed(2)} MVR</p>
 						</div>
 					</div>
 					<div className="hidden sm:block">
-
 						<Table className="overflow-scroll">
 							<TableCaption>Table of all transactions.</TableCaption>
 							<TableHeader>
@@ -183,9 +176,8 @@ export async function WalletTransactionsTable({
 						currentPage={meta?.current_page}
 					/>
 				</div>
-      )
+			)}
-      }
+		</div>
-    </div >
 	);
 }
 

lib/backend-types.ts

@@ -98,7 +98,6 @@ export interface NewPayment {
 	amount: number;
 }
 
-
 export interface WalletTransaction {
 	id: string;
 	user: Pick<User, "id" | "id_card" | "mobile"> & {

queries/devices.ts

@@ -3,7 +3,7 @@
 import { revalidatePath } from "next/cache";
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/app/auth";
-import { BlockDeviceFormState } from "@/components/block-device-dialog";
+import type { BlockDeviceFormState } from "@/components/block-device-dialog";
 import type {
 	AddDeviceFormState,
 	initialState,
@@ -63,7 +63,7 @@ export async function getDevice({ deviceId }: { deviceId: string }) {
 }
 
 export async function addDeviceAction(
-	prevState: AddDeviceFormState,
+	_prevState: AddDeviceFormState,
 	formData: FormData,
 ): Promise<AddDeviceFormState> {
 	const name = formData.get("name") as string;
@@ -135,7 +135,7 @@ export async function addDeviceAction(
 }
 
 export async function blockDeviceAction(
-	prevState: BlockDeviceFormState,
+	_prevState: BlockDeviceFormState,
 	formData: FormData,
 ): Promise<BlockDeviceFormState> {
 	const deviceId = formData.get("deviceId") as string;
@@ -196,10 +196,7 @@ export async function blockDeviceAction(
 			},
 		);
 
-		const result = await handleApiResponse<Device>(
+		await handleApiResponse<Device>(response, "blockDeviceAction");
-			response,
-			"blockDeviceAction",
-		);
 
 		revalidatePath("/devices");
 		revalidatePath("/parental-control");

queries/users.ts

@@ -8,10 +8,10 @@ import { handleApiResponse } from "@/utils/tryCatch";
 type ParamProps = {
 	[key: string]: string | number | undefined;
 };
-export async function getUsers(params: ParamProps) {
+export async function getUsers(params?: ParamProps) {
 	const session = await getServerSession(authOptions);
 
-	const query = Object.entries(params)
+	const query = Object.entries(params ?? {})
 		.filter(([_, value]) => value !== undefined && value !== "")
 		.map(
 			([key, value]) =>

queries/wallet.ts

@@ -1,6 +1,10 @@
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/app/auth";
-import type { ApiError, ApiResponse, WalletTransaction } from "@/lib/backend-types";
+import type {
+	ApiError,
+	ApiResponse,
+	WalletTransaction,
+} from "@/lib/backend-types";
 
 type GenericGetResponseProps = {
 	offset?: number;