chore: add skeletons to tables and loading.tsx files for routes and run formatting ♻️

actions/auth-actions.ts

@@ -4,226 +4,226 @@ import { redirect } from "next/navigation";
 import { z } from "zod";
 import { signUpFormSchema } from "@/lib/schemas";
 import {
-  backendRegister,
-  checkIdOrPhone,
-  checkTempIdOrPhone,
+	backendRegister,
+	checkIdOrPhone,
+	checkTempIdOrPhone,
 } from "@/queries/authentication";
 import { handleApiResponse, tryCatch } from "@/utils/tryCatch";
 
 const formSchema = z.object({
-  phoneNumber: z
-    .string()
-    .regex(/^[7|9][0-9]{2}-[0-9]{4}$/, "Please enter a valid phone number"),
+	phoneNumber: z
+		.string()
+		.regex(/^[7|9][0-9]{2}-[0-9]{4}$/, "Please enter a valid phone number"),
 });
 
 export type FilterUserResponse = {
-  ok: boolean;
-  verified: boolean;
+	ok: boolean;
+	verified: boolean;
 };
 export type FilterTempUserResponse = {
-  ok: boolean;
-  otp_verified: boolean;
-  t_verified: boolean;
+	ok: boolean;
+	otp_verified: boolean;
+	t_verified: boolean;
 };
 
 export async function signin(_previousState: ActionState, formData: FormData) {
-  const phoneNumber = formData.get("phoneNumber") as string;
-  const result = formSchema.safeParse({ phoneNumber });
-  console.log(phoneNumber);
+	const phoneNumber = formData.get("phoneNumber") as string;
+	const result = formSchema.safeParse({ phoneNumber });
+	console.log(phoneNumber);
 
-  if (!result.success) {
-    return {
-      message: result.error.errors[0].message, // Get the error message from Zod
-      status: "error",
-    };
-  }
+	if (!result.success) {
+		return {
+			message: result.error.errors[0].message, // Get the error message from Zod
+			status: "error",
+		};
+	}
 
-  if (!phoneNumber) {
-    return {
-      message: "Please enter a phone number",
-      status: "error",
-    };
-  }
-  const FORMATTED_MOBILE_NUMBER: string = `${phoneNumber.split("-").join("")}`;
-  console.log({ FORMATTED_MOBILE_NUMBER });
+	if (!phoneNumber) {
+		return {
+			message: "Please enter a phone number",
+			status: "error",
+		};
+	}
+	const FORMATTED_MOBILE_NUMBER: string = `${phoneNumber.split("-").join("")}`;
+	console.log({ FORMATTED_MOBILE_NUMBER });
 
-  const user = await fetch(
-    `${process.env.SARLINK_API_BASE_URL}/api/auth/users/filter/?mobile=${FORMATTED_MOBILE_NUMBER}`,
-    {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    },
-  );
-  const userData = (await user.json()) as FilterUserResponse;
-  console.log({ userData });
-  if (!userData.ok) {
-    redirect(`/auth/signup?phone_number=${phoneNumber}`);
-  }
-  if (!userData.verified) {
-    return {
-      message:
-        "Your account is on pending verification. Please wait for a response from admin or contact shihaam.",
-      status: "error",
-    };
-  }
+	const user = await fetch(
+		`${process.env.SARLINK_API_BASE_URL}/api/auth/users/filter/?mobile=${FORMATTED_MOBILE_NUMBER}`,
+		{
+			method: "GET",
+			headers: {
+				"Content-Type": "application/json",
+			},
+		},
+	);
+	const userData = (await user.json()) as FilterUserResponse;
+	console.log({ userData });
+	if (!userData.ok) {
+		redirect(`/auth/signup?phone_number=${phoneNumber}`);
+	}
+	if (!userData.verified) {
+		return {
+			message:
+				"Your account is on pending verification. Please wait for a response from admin or contact shihaam.",
+			status: "error",
+		};
+	}
 
-  const sendOTPResponse = await fetch(
-    `${process.env.SARLINK_API_BASE_URL}/auth/mobile/`,
-    {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        mobile: FORMATTED_MOBILE_NUMBER,
-      }),
-    },
-  );
-  const otpResponse = await sendOTPResponse.json();
-  console.log("otpResponse", otpResponse);
+	const sendOTPResponse = await fetch(
+		`${process.env.SARLINK_API_BASE_URL}/auth/mobile/`,
+		{
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify({
+				mobile: FORMATTED_MOBILE_NUMBER,
+			}),
+		},
+	);
+	const otpResponse = await sendOTPResponse.json();
+	console.log("otpResponse", otpResponse);
 
-  redirect(`/auth/verify-otp?phone_number=${FORMATTED_MOBILE_NUMBER}`);
+	redirect(`/auth/verify-otp?phone_number=${FORMATTED_MOBILE_NUMBER}`);
 }
 
 export type ActionState = {
-  status?: string;
-  payload?: FormData;
-  errors?: z.typeToFlattenedError<
-    {
-      id_card: string;
-      phone_number: string;
-      name: string;
-      atoll_id: string;
-      island_id: string;
-      address: string;
-      dob: Date;
-      terms: string;
-      policy: string;
-      accNo: string;
-    },
-    string
-  >;
-  db_error?: string;
-  error?: string;
+	status?: string;
+	payload?: FormData;
+	errors?: z.typeToFlattenedError<
+		{
+			id_card: string;
+			phone_number: string;
+			name: string;
+			atoll_id: string;
+			island_id: string;
+			address: string;
+			dob: Date;
+			terms: string;
+			policy: string;
+			accNo: string;
+		},
+		string
+	>;
+	db_error?: string;
+	error?: string;
 };
 
 export async function signup(_actionState: ActionState, formData: FormData) {
-  const data = Object.fromEntries(formData.entries());
-  const parsedData = signUpFormSchema.safeParse(data);
-  // get phone number from /signup?phone_number=999-1231
+	const data = Object.fromEntries(formData.entries());
+	const parsedData = signUpFormSchema.safeParse(data);
+	// get phone number from /signup?phone_number=999-1231
 
-  console.log("DATA ON SERVER SIDE", data);
+	console.log("DATA ON SERVER SIDE", data);
 
-  if (!parsedData.success) {
-    return {
-      message: "Invalid form data",
-      payload: formData,
-      errors: parsedData.error.flatten(),
-    };
-  }
-  const age =
-    new Date().getFullYear() - new Date(parsedData.data.dob).getFullYear();
-  if (age < 18) {
-    return {
-      message: "You must be at least 18 years old to register.",
-      payload: formData,
-      db_error: "dob",
-    };
-  }
+	if (!parsedData.success) {
+		return {
+			message: "Invalid form data",
+			payload: formData,
+			errors: parsedData.error.flatten(),
+		};
+	}
+	const age =
+		new Date().getFullYear() - new Date(parsedData.data.dob).getFullYear();
+	if (age < 18) {
+		return {
+			message: "You must be at least 18 years old to register.",
+			payload: formData,
+			db_error: "dob",
+		};
+	}
 
-  const idCardExists = await checkIdOrPhone({
-    id_card: parsedData.data.id_card,
-  });
-  if (idCardExists.ok) {
-    return {
-      message: "ID card already exists.",
-      payload: formData,
-      db_error: "id_card",
-    };
-  }
+	const idCardExists = await checkIdOrPhone({
+		id_card: parsedData.data.id_card,
+	});
+	if (idCardExists.ok) {
+		return {
+			message: "ID card already exists.",
+			payload: formData,
+			db_error: "id_card",
+		};
+	}
 
-  const phoneNumberExists = await checkIdOrPhone({
-    phone_number: parsedData.data.phone_number,
-  });
+	const phoneNumberExists = await checkIdOrPhone({
+		phone_number: parsedData.data.phone_number,
+	});
 
-  const tempPhoneNumberExists = await checkTempIdOrPhone({
-    phone_number: parsedData.data.phone_number,
-  });
-  if (phoneNumberExists.ok || tempPhoneNumberExists.ok) {
-    return {
-      message: "Phone number already exists.",
-      payload: formData,
-      db_error: "phone_number",
-    };
-  }
+	const tempPhoneNumberExists = await checkTempIdOrPhone({
+		phone_number: parsedData.data.phone_number,
+	});
+	if (phoneNumberExists.ok || tempPhoneNumberExists.ok) {
+		return {
+			message: "Phone number already exists.",
+			payload: formData,
+			db_error: "phone_number",
+		};
+	}
 
-  const [signupError, signupResponse] = await tryCatch(
-    backendRegister({
-      payload: {
-        firstname: parsedData.data.name.split(" ")[0],
-        lastname: parsedData.data.name.split(" ").slice(1).join(" "),
-        username: parsedData.data.phone_number,
-        address: parsedData.data.address,
-        id_card: parsedData.data.id_card,
-        dob: new Date(parsedData.data.dob).toISOString().split("T")[0],
-        mobile: parsedData.data.phone_number,
-        island: Number.parseInt(parsedData.data.island_id),
-        atoll: Number.parseInt(parsedData.data.atoll_id),
-        acc_no: parsedData.data.accNo,
-        terms_accepted: parsedData.data.terms,
-        policy_accepted: parsedData.data.policy,
-      },
-    }),
-  );
-  if (signupError) {
-    return {
-      message: signupError.message,
-      payload: formData,
-      db_error: "phone_number",
-    };
-  }
-  console.log("SIGNUP RESPONSE", signupResponse);
+	const [signupError, signupResponse] = await tryCatch(
+		backendRegister({
+			payload: {
+				firstname: parsedData.data.name.split(" ")[0],
+				lastname: parsedData.data.name.split(" ").slice(1).join(" "),
+				username: parsedData.data.phone_number,
+				address: parsedData.data.address,
+				id_card: parsedData.data.id_card,
+				dob: new Date(parsedData.data.dob).toISOString().split("T")[0],
+				mobile: parsedData.data.phone_number,
+				island: Number.parseInt(parsedData.data.island_id),
+				atoll: Number.parseInt(parsedData.data.atoll_id),
+				acc_no: parsedData.data.accNo,
+				terms_accepted: parsedData.data.terms,
+				policy_accepted: parsedData.data.policy,
+			},
+		}),
+	);
+	if (signupError) {
+		return {
+			message: signupError.message,
+			payload: formData,
+			db_error: "phone_number",
+		};
+	}
+	console.log("SIGNUP RESPONSE", signupResponse);
 
-  redirect(
-    `/auth/verify-otp-registration?phone_number=${encodeURIComponent(signupResponse.t_username)}`,
-  );
-  return { message: "User created successfully", error: "success" };
+	redirect(
+		`/auth/verify-otp-registration?phone_number=${encodeURIComponent(signupResponse.t_username)}`,
+	);
+	return { message: "User created successfully", error: "success" };
 }
 
 export const sendOtp = async (phoneNumber: string, code: string) => {
-  // Implement sending OTP code via SMS
-  console.log("Send OTP server fn", phoneNumber, code);
-  const respose = await fetch(`${process.env.SMS_API_BASE_URL}/api/sms`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${process.env.SMS_API_KEY}`,
-    },
-    body: JSON.stringify({
-      check_delivery: false,
-      number: phoneNumber,
-      message: `Your OTP code is ${code}`,
-    }),
-  });
-  const data = await respose.json();
-  console.log(data);
-  return data;
+	// Implement sending OTP code via SMS
+	console.log("Send OTP server fn", phoneNumber, code);
+	const respose = await fetch(`${process.env.SMS_API_BASE_URL}/api/sms`, {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json",
+			Authorization: `Bearer ${process.env.SMS_API_KEY}`,
+		},
+		body: JSON.stringify({
+			check_delivery: false,
+			number: phoneNumber,
+			message: `Your OTP code is ${code}`,
+		}),
+	});
+	const data = await respose.json();
+	console.log(data);
+	return data;
 };
 
 export async function backendMobileLogin({ mobile }: { mobile: string }) {
-  const response = await fetch(
-    `${process.env.SARLINK_API_BASE_URL}/auth/mobile/`,
-    {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        mobile,
-      }),
-    },
-  );
-  return handleApiResponse<{ detail: string }>(response, "backendMobileLogin");
+	const response = await fetch(
+		`${process.env.SARLINK_API_BASE_URL}/auth/mobile/`,
+		{
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify({
+				mobile,
+			}),
+		},
+	);
+	return handleApiResponse<{ detail: string }>(response, "backendMobileLogin");
 }

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) {
@@ -129,7 +129,6 @@ export type UpdateUserFormState = {
 	payload?: FormData;
 };
 
-
 export async function updateUser(
 	_prevState: UpdateUserFormState,
 	formData: FormData,
@@ -190,7 +189,6 @@ export async function updateUser(
 	};
 }
 
-
 export async function updateUserAgreement(
 	_prevState: UpdateUserFormState,
 	formData: FormData,
@@ -258,14 +256,13 @@ export async function adminUserTopup(
 	const description = formData.get("description") 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/`,

app/(dashboard)/agreements/page.tsx

@@ -3,27 +3,27 @@ import { AgreementCard } from "@/components/agreement-card";
 import { tryCatch } from "@/utils/tryCatch";
 
 export default async function Agreements() {
-  const [error, profile] = await tryCatch(getProfile());
-  return (
-    <div>
-      <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
-        <h3 className="text-sarLinkOrange text-2xl">Agreements</h3>
-      </div>
-      <div className="grid grid-cols-1">
-        {error ? (
-          <div className="text-red-500">
-            An error occurred while fetching agreements: {error.message}
-          </div>
-        ) : (
-          <div>
-            {profile.agreement ? (
-              <AgreementCard agreement={profile.agreement} />
-            ) : (
-              <div className="text-gray-500">No agreement found.</div>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
+	const [error, profile] = await tryCatch(getProfile());
+	return (
+		<div>
+			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+				<h3 className="text-sarLinkOrange text-2xl">Agreements</h3>
+			</div>
+			<div className="grid grid-cols-1">
+				{error ? (
+					<div className="text-red-500">
+						An error occurred while fetching agreements: {error.message}
+					</div>
+				) : (
+					<div>
+						{profile.agreement ? (
+							<AgreementCard agreement={profile.agreement} />
+						) : (
+							<div className="text-gray-500">No agreement found.</div>
+						)}
+					</div>
+				)}
+			</div>
+		</div>
+	);
 }

app/(dashboard)/devices/device-table-skeleton.tsx

@@ -1,76 +0,0 @@
-import { Skeleton } from "@/components/ui/skeleton";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { cn } from "@/lib/utils";
-
-export default function DevicesTableSkeleton() {
-  return (
-    <>
-      <div className="hidden sm:block">
-        <Table className="overflow-scroll">
-          <TableHeader>
-            <TableRow>
-              <TableHead>Device Name</TableHead>
-              <TableHead>MAC Address</TableHead>
-              <TableHead>#</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody className="overflow-scroll">
-            {Array.from({ length: 10 }).map((_, i) => (
-              <TableRow key={`${i + 1}`}>
-                <TableCell>
-                  <Skeleton className="w-full h-10 rounded" />
-                </TableCell>
-                <TableCell>
-                  <Skeleton className="w-full h-10 rounded" />
-                </TableCell>
-                <TableCell>
-                  <Skeleton className="w-full h-10 rounded" />
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TableCell colSpan={2}>
-                <Skeleton className="w-full  h-4 rounded" />
-              </TableCell>
-              <TableCell className="text-muted-foreground">
-                <Skeleton className="w-20 h-4 rounded" />
-              </TableCell>
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </div>
-      <div className="sm:hidden my-4">
-        {Array.from({ length: 10 }).map((_, i) => (
-          <DeviceCardSkeleton key={`${i + 1}`} />
-        ))}
-      </div>
-    </>
-  );
-}
-
-function DeviceCardSkeleton() {
-  return (
-    <div
-      className={cn(
-        "flex text-sm justify-between items-center my-2 p-4 border rounded-md bg-gray-100",
-      )}
-    >
-      <div className="font-semibold flex w-full flex-col items-start gap-2 mb-2 relative">
-        <Skeleton className="w-32 h-6" />
-        <Skeleton className="w-36 h-6" />
-        <Skeleton className="w-32 h-4" />
-        <Skeleton className="w-40 h-8" />
-      </div>
-    </div>
-  );
-}

app/(dashboard)/devices/loading.tsx

@@ -0,0 +1,22 @@
+import DevicesTableSkeleton from "@/components/device-table-skeleton";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function LoadingComponent() {
+	return (
+		<div>
+			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+				<Skeleton className="w-48 h-8" />
+				<Skeleton className="w-20 h-8" />
+			</div>
+			<div
+				id="user-filters"
+				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-endO"
+			>
+				<DevicesTableSkeleton
+					headers={["Device Name", "Mac Address", "Vendor", "#"]}
+					length={10}
+				/>
+			</div>
+		</div>
+	);
+}

app/(dashboard)/devices/page.tsx

@@ -1,10 +1,10 @@
 import { getServerSession } from "next-auth";
 import { Suspense } from "react";
 import { authOptions } from "@/app/auth";
+import DevicesTableSkeleton from "@/components/device-table-skeleton";
 import { DevicesTable } from "@/components/devices-table";
 import DynamicFilter from "@/components/generic-filter";
 import AddDeviceDialogForm from "@/components/user/add-device-dialog";
-import DevicesTableSkeleton from "./device-table-skeleton";
 
 export default async function Devices({
 	searchParams,
@@ -53,7 +53,15 @@ export default async function Devices({
 					]}
 				/>
 			</div>
-			<Suspense key={query || page} fallback={<DevicesTableSkeleton />}>
+			<Suspense
+				key={query || page}
+				fallback={
+					<DevicesTableSkeleton
+						headers={["Device Name", "Mac Address", "Vendor", "#"]}
+						length={10}
+					/>
+				}
+			>
 				<DevicesTable parentalControl={false} searchParams={searchParams} />
 			</Suspense>
 		</div>

app/(dashboard)/parental-control/loading.tsx

@@ -0,0 +1,22 @@
+import DevicesTableSkeleton from "@/components/device-table-skeleton";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function LoadingComponent() {
+	return (
+		<div>
+			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+				<Skeleton className="w-48 h-8" />
+				<Skeleton className="w-20 h-8" />
+			</div>
+			<div
+				id="user-filters"
+				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-endO"
+			>
+				<DevicesTableSkeleton
+					headers={["Device Name", "Mac Address", "Vendor", "#"]}
+					length={10}
+				/>
+			</div>
+		</div>
+	);
+}

app/(dashboard)/parental-control/page.tsx

@@ -1,4 +1,5 @@
 import { Suspense } from "react";
+import DevicesTableSkeleton from "@/components/device-table-skeleton";
 import { DevicesTable } from "@/components/devices-table";
 import DynamicFilter from "@/components/generic-filter";
 
@@ -51,7 +52,15 @@ export default async function ParentalControl({
 					]}
 				/>{" "}
 			</div>
-			<Suspense key={(await searchParams).page} fallback={"loading...."}>
+			<Suspense
+				key={(await searchParams).page}
+				fallback={
+					<DevicesTableSkeleton
+						headers={["Device Name", "Mac Address", "Vendor", "#"]}
+						length={10}
+					/>
+				}
+			>
 				<DevicesTable
 					parentalControl={true}
 					searchParams={searchParams}

app/(dashboard)/payments/loading.tsx

@@ -0,0 +1,22 @@
+import DevicesTableSkeleton from "@/components/device-table-skeleton";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function LoadingComponent() {
+	return (
+		<div>
+			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+				<Skeleton className="w-48 h-8" />
+				<Skeleton className="w-20 h-8" />
+			</div>
+			<div
+				id="user-filters"
+				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-endO"
+			>
+				<DevicesTableSkeleton
+					headers={["Details", "Duration", "Status", "Amount"]}
+					length={10}
+				/>
+			</div>
+		</div>
+	);
+}

app/(dashboard)/payments/page.tsx

@@ -1,4 +1,5 @@
 import { Suspense } from "react";
+import DevicesTableSkeleton from "@/components/device-table-skeleton";
 import DynamicFilter from "@/components/generic-filter";
 import { PaymentsTable } from "@/components/payments-table";
 
@@ -14,8 +15,8 @@ export default async function Payments({
 
 	return (
 		<div>
-			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
-				<h3 className="text-sarLinkOrange text-2xl">My Payments</h3>
+			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-3 mb-4">
+				<h3 className="text-sarLinkOrange text-2xl">My Subscriptions</h3>
 			</div>
 			<div
 				id="user-filters"
@@ -72,7 +73,15 @@ export default async function Payments({
 					]}
 				/>{" "}
 			</div>
-			<Suspense key={query} fallback={"loading...."}>
+			<Suspense
+				key={query}
+				fallback={
+					<DevicesTableSkeleton
+						headers={["Details", "Duration", "Status", "Amount"]}
+						length={10}
+					/>
+				}
+			>
 				<PaymentsTable searchParams={searchParams} />
 			</Suspense>
 		</div>

app/(dashboard)/top-ups/[topupId]/page.tsx

@@ -9,72 +9,72 @@ import { TextShimmer } from "@/components/ui/text-shimmer";
 import { cn } from "@/lib/utils";
 import { tryCatch } from "@/utils/tryCatch";
 export default async function TopupPage({
-  params,
+	params,
 }: {
-  params: Promise<{ topupId: string }>;
+	params: Promise<{ topupId: string }>;
 }) {
-  const topupId = (await params).topupId;
-  const [error, topup] = await tryCatch(getTopup({ id: topupId }));
-  if (error) {
-    if (error.message === "Invalid token.") redirect("/auth/signin");
-    return <ClientErrorMessage message={error.message} />;
-  }
+	const topupId = (await params).topupId;
+	const [error, topup] = await tryCatch(getTopup({ id: topupId }));
+	if (error) {
+		if (error.message === "Invalid token.") redirect("/auth/signin");
+		return <ClientErrorMessage message={error.message} />;
+	}
 
-  return (
-    <div>
-      <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4 mx-2">
-        <h3 className="text-sarLinkOrange text-2xl">Topup</h3>
-        <div className="flex flex-col gap-4 items-end w-full">
-          {!topup.is_expired && topup.paid && topup.status !== "PENDING" && (
-            <Button
-              disabled
-              className={cn(
-                "rounded-md opacity-100! uppercase font-semibold",
-                topup?.paid
-                  ? "text-green-900 bg-green-500/20"
-                  : "text-inherit bg-yellow-400",
-              )}
-            >
-              {topup.status}
-            </Button>
-          )}
-          {topup.status === "PENDING" && !topup.is_expired && (
-            <Button>
-              <TextShimmer>Payment Pending</TextShimmer>{" "}
-            </Button>
-          )}
+	return (
+		<div>
+			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4 mx-2">
+				<h3 className="text-sarLinkOrange text-2xl">Topup</h3>
+				<div className="flex flex-col gap-4 items-end w-full">
+					{!topup.is_expired && topup.paid && topup.status !== "PENDING" && (
+						<Button
+							disabled
+							className={cn(
+								"rounded-md opacity-100! uppercase font-semibold",
+								topup?.paid
+									? "text-green-900 bg-green-500/20"
+									: "text-inherit bg-yellow-400",
+							)}
+						>
+							{topup.status}
+						</Button>
+					)}
+					{topup.status === "PENDING" && !topup.is_expired && (
+						<Button>
+							<TextShimmer>Payment Pending</TextShimmer>{" "}
+						</Button>
+					)}
 
-          {!topup.paid &&
-            (topup.is_expired ? (
-              <Button
-                disabled
-                className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20"
-              >
-                Topup Expired
-              </Button>
-            ) : topup.status === "PENDING" ? (
-              <CancelTopupButton topupId={topupId} />
-            ) : topup.status === "CANCELLED" ? (
-              <Button disabled>Topup Cancelled</Button>
-            ) : (
-              ""
-            ))}
-        </div>
-      </div>
-      {!topup.paid && topup.status === "PENDING" && !topup.is_expired && (
-        <ExpiryCountDown expiryLabel="Top up" expiresAt={topup.expires_at} />
-      )}
-      <div
-        id="user-topup-details"
-        className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
-      >
-        <TopupToPay
-          disabled={
-            topup.paid || topup.is_expired || topup.status === "CANCELLED"
-          }
-          topup={topup || undefined}
-        />
-      </div>
-    </div>
-  );
+					{!topup.paid &&
+						(topup.is_expired ? (
+							<Button
+								disabled
+								className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20"
+							>
+								Topup Expired
+							</Button>
+						) : topup.status === "PENDING" ? (
+							<CancelTopupButton topupId={topupId} />
+						) : topup.status === "CANCELLED" ? (
+							<Button disabled>Topup Cancelled</Button>
+						) : (
+							""
+						))}
+				</div>
+			</div>
+			{!topup.paid && topup.status === "PENDING" && !topup.is_expired && (
+				<ExpiryCountDown expiryLabel="Top up" expiresAt={topup.expires_at} />
+			)}
+			<div
+				id="user-topup-details"
+				className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
+			>
+				<TopupToPay
+					disabled={
+						topup.paid || topup.is_expired || topup.status === "CANCELLED"
+					}
+					topup={topup || undefined}
+				/>
+			</div>
+		</div>
+	);
 }

app/(dashboard)/top-ups/loading.tsx

@@ -0,0 +1,22 @@
+import DevicesTableSkeleton from "@/components/device-table-skeleton";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function LoadingComponent() {
+	return (
+		<div>
+			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+				<Skeleton className="w-48 h-8" />
+				<Skeleton className="w-20 h-8" />
+			</div>
+			<div
+				id="user-filters"
+				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-endO"
+			>
+				<DevicesTableSkeleton
+					headers={["Details", "Status", "Amount"]}
+					length={10}
+				/>
+			</div>
+		</div>
+	);
+}

app/(dashboard)/top-ups/page.tsx

@@ -1,4 +1,5 @@
 import { Suspense } from "react";
+import DevicesTableSkeleton from "@/components/device-table-skeleton";
 import DynamicFilter from "@/components/generic-filter";
 import { TopupsTable } from "@/components/topups-table";
 
@@ -78,7 +79,15 @@ export default async function Topups({
 					]}
 				/>
 			</div>
-			<Suspense key={query} fallback={"loading...."}>
+			<Suspense
+				key={query}
+				fallback={
+					<DevicesTableSkeleton
+						headers={["Details", "Status", "Amount"]}
+						length={10}
+					/>
+				}
+			>
 				<TopupsTable searchParams={searchParams} />
 			</Suspense>
 		</div>

app/(dashboard)/wallet/page.tsx

@@ -1,63 +1,78 @@
 import { Suspense } from "react";
+import DevicesTableSkeleton from "@/components/device-table-skeleton";
 import DynamicFilter from "@/components/generic-filter";
 import { WalletTransactionsTable } from "@/components/wallet-transactions-table";
 
 export default async function Wallet({
-  searchParams,
+	searchParams,
 }: {
-  searchParams: Promise<{
-    query: string;
-    page: number;
-    sortBy: string;
-    status: string;
-  }>;
+	searchParams: Promise<{
+		query: string;
+		page: number;
+		sortBy: string;
+		status: string;
+	}>;
 }) {
-  const query = (await searchParams)?.query || "";
+	const query = (await searchParams)?.query || "";
 
-  return (
-    <div>
-      <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
-        <h3 className="text-sarLinkOrange text-2xl">Transaction History</h3>
-      </div>
-      <div
-        id="wallet-filters"
-        className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
-      >
-        <DynamicFilter
-          inputs={[
-            {
-              label: "Type",
-              name: "transaction_type",
-              type: "radio-group",
-              options: [
-                {
-                  label: "All",
-                  value: "",
-                },
-                {
-                  label: "Debit",
-                  value: "debit",
-                },
-                {
-                  label: "Credit",
-                  value: "credit",
-                },
-              ],
-            },
-            {
-              label: "Topup Amount",
-              name: "amount",
-              type: "dual-range-slider",
-              min: 0,
-              max: 1000,
-              step: 10,
-            },
-          ]}
-        />
-      </div>
-      <Suspense key={query} fallback={"loading...."}>
-        <WalletTransactionsTable searchParams={searchParams} />
-      </Suspense>
-    </div>
-  );
+	return (
+		<div>
+			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+				<h3 className="text-sarLinkOrange text-2xl">Transaction History</h3>
+			</div>
+			<div
+				id="wallet-filters"
+				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
+			>
+				<DynamicFilter
+					inputs={[
+						{
+							label: "Type",
+							name: "transaction_type",
+							type: "radio-group",
+							options: [
+								{
+									label: "All",
+									value: "",
+								},
+								{
+									label: "Debit",
+									value: "debit",
+								},
+								{
+									label: "Credit",
+									value: "credit",
+								},
+							],
+						},
+						{
+							label: "Topup Amount",
+							name: "amount",
+							type: "dual-range-slider",
+							min: 0,
+							max: 1000,
+							step: 10,
+						},
+					]}
+				/>
+			</div>
+			<Suspense
+				key={query}
+				fallback={
+					<DevicesTableSkeleton
+						headers={[
+							"Description",
+							"Amount",
+							"Transaction Type",
+							"View Details",
+							"Created at",
+						]}
+						length={10}
+					/>
+				}
+			>
+				<WalletTransactionsTable searchParams={searchParams} />
+			</Suspense>
+		</div>
+	);
 }

commitlint.config.js

@@ -1,3 +1,3 @@
 export default {
-  extends: ['@commitlint/config-conventional']
+	extends: ["@commitlint/config-conventional"],
 };

components/admin/admin-devices-table.tsx

@@ -4,13 +4,13 @@ import { redirect } from "next/navigation";
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/app/auth";
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
+	Table,
+	TableBody,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
 } from "@/components/ui/table";
 import { cn } from "@/lib/utils";
 import { getDevices } from "@/queries/devices";
@@ -20,155 +20,155 @@ import ClientErrorMessage from "../client-error-message";
 import Pagination from "../pagination";
 
 export async function AdminDevicesTable({
-  searchParams,
+	searchParams,
 }: {
-  searchParams: Promise<{
-    [key: string]: unknown;
-  }>;
+	searchParams: Promise<{
+		[key: string]: unknown;
+	}>;
 }) {
-  const resolvedParams = await searchParams;
-  const session = await getServerSession(authOptions);
-  const isAdmin = session?.user?.is_admin;
+	const resolvedParams = await searchParams;
+	const session = await getServerSession(authOptions);
+	const isAdmin = session?.user?.is_admin;
 
-  const page = Number.parseInt(resolvedParams.page as string) || 1;
-  const limit = 10;
-  const offset = (page - 1) * limit;
+	const page = Number.parseInt(resolvedParams.page as string) || 1;
+	const limit = 10;
+	const offset = (page - 1) * limit;
 
-  // Build params object for getDevices
-  const apiParams: Record<string, string | number | undefined> = {};
-  for (const [key, value] of Object.entries(resolvedParams)) {
-    if (value !== undefined && value !== "") {
-      apiParams[key] = typeof value === "number" ? value : String(value);
-    }
-  }
-  apiParams.limit = limit;
-  apiParams.offset = offset;
+	// Build params object for getDevices
+	const apiParams: Record<string, string | number | undefined> = {};
+	for (const [key, value] of Object.entries(resolvedParams)) {
+		if (value !== undefined && value !== "") {
+			apiParams[key] = typeof value === "number" ? value : String(value);
+		}
+	}
+	apiParams.limit = limit;
+	apiParams.offset = offset;
 
-  const [error, devices] = await tryCatch(getDevices(apiParams, true));
-  if (error) {
-    if (error.message === "UNAUTHORIZED") {
-      redirect("/auth/signin");
-    } else {
-      return <ClientErrorMessage message={error.message} />;
-    }
-  }
-  const { meta, data } = devices;
-  return (
-    <div>
-      {data?.length === 0 ? (
-        <div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
-          <h3>No devices.</h3>
-        </div>
-      ) : (
-        <>
-          <div>
-            <Table className="overflow-scroll">
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Device Name</TableHead>
-                  <TableHead>User</TableHead>
-                  <TableHead>MAC Address</TableHead>
-                  <TableHead>Vendor</TableHead>
-                  <TableHead>#</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody className="overflow-scroll">
-                {data?.map((device) => (
-                  <TableRow key={device.id}>
-                    <TableCell>
-                      <div className="flex flex-col items-start">
-                        <Link
-                          className={cn(
-                            "hover:underline font-semibold",
-                            device.is_active ? "text-green-600" : "",
-                          )}
-                          href={`/devices/${device.id}`}
-                        >
-                          {device.name}
-                        </Link>
-                        {device.is_active ? (
-                          <div className="text-muted-foreground">
-                            Active until{" "}
-                            <span className="font-semibold">
-                              {new Date(
-                                device.expiry_date || "",
-                              ).toLocaleDateString("en-US", {
-                                month: "short",
-                                day: "2-digit",
-                                year: "numeric",
-                              })}
-                            </span>
-                          </div>
-                        ) : (
-                          <p className="text-muted-foreground">
-                            Device Inactive
-                          </p>
-                        )}
-                        {device.has_a_pending_payment && (
-                          <Link href={`/payments/${device.pending_payment_id}`}>
-                            <span className="bg-muted rounded px-2 p-1 mt-2 flex hover:underline items-center justify-center gap-2 text-muted-foreground">
-                              Payment Pending{" "}
-                              <HandCoins className="animate-pulse" size={14} />
-                            </span>
-                          </Link>
-                        )}
+	const [error, devices] = await tryCatch(getDevices(apiParams, true));
+	if (error) {
+		if (error.message === "UNAUTHORIZED") {
+			redirect("/auth/signin");
+		} else {
+			return <ClientErrorMessage message={error.message} />;
+		}
+	}
+	const { meta, data } = devices;
+	return (
+		<div>
+			{data?.length === 0 ? (
+				<div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
+					<h3>No devices.</h3>
+				</div>
+			) : (
+				<>
+					<div>
+						<Table className="overflow-scroll">
+							<TableHeader>
+								<TableRow>
+									<TableHead>Device Name</TableHead>
+									<TableHead>User</TableHead>
+									<TableHead>MAC Address</TableHead>
+									<TableHead>Vendor</TableHead>
+									<TableHead>#</TableHead>
+								</TableRow>
+							</TableHeader>
+							<TableBody className="overflow-scroll">
+								{data?.map((device) => (
+									<TableRow key={device.id}>
+										<TableCell>
+											<div className="flex flex-col items-start">
+												<Link
+													className={cn(
+														"hover:underline font-semibold",
+														device.is_active ? "text-green-600" : "",
+													)}
+													href={`/devices/${device.id}`}
+												>
+													{device.name}
+												</Link>
+												{device.is_active ? (
+													<div className="text-muted-foreground">
+														Active until{" "}
+														<span className="font-semibold">
+															{new Date(
+																device.expiry_date || "",
+															).toLocaleDateString("en-US", {
+																month: "short",
+																day: "2-digit",
+																year: "numeric",
+															})}
+														</span>
+													</div>
+												) : (
+													<p className="text-muted-foreground">
+														Device Inactive
+													</p>
+												)}
+												{device.has_a_pending_payment && (
+													<Link href={`/payments/${device.pending_payment_id}`}>
+														<span className="bg-muted rounded px-2 p-1 mt-2 flex hover:underline items-center justify-center gap-2 text-muted-foreground">
+															Payment Pending{" "}
+															<HandCoins className="animate-pulse" size={14} />
+														</span>
+													</Link>
+												)}
 
-                        {device.blocked_by === "ADMIN" && device.blocked && (
-                          <div className="p-2 rounded border my-2 bg-white dark:bg-neutral-800 shadow">
-                            <span className="font-semibold">Comment</span>
-                            <p className="text-neutral-400">
-                              {device?.reason_for_blocking}
-                            </p>
-                          </div>
-                        )}
-                      </div>
-                    </TableCell>
-                    <TableCell className="font-medium">
-                      <div className="flex flex-col items-start">
-                        {device?.user?.name}
-                        <span className="text-muted-foreground">
-                          {device?.user?.id_card}
-                        </span>
-                      </div>
-                    </TableCell>
-                    <TableCell className="font-medium">{device.mac}</TableCell>
-                    <TableCell className="font-medium">
-                      {device?.vendor}
-                    </TableCell>
-                    <TableCell>
-                      {!device.has_a_pending_payment && (
-                        <BlockDeviceDialog
-                          admin={isAdmin}
-                          type={device.blocked ? "unblock" : "block"}
-                          device={device}
-                        />
-                      )}
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-              <TableFooter>
-                <TableRow>
-                  <TableCell colSpan={5} className="text-muted-foreground">
-                    {meta?.total === 1 ? (
-                      <p className="text-center">Total {meta?.total} device.</p>
-                    ) : (
-                      <p className="text-center">
-                        Total {meta?.total} devices.
-                      </p>
-                    )}
-                  </TableCell>
-                </TableRow>
-              </TableFooter>
-            </Table>
-          </div>
+												{device.blocked_by === "ADMIN" && device.blocked && (
+													<div className="p-2 rounded border my-2 bg-white dark:bg-neutral-800 shadow">
+														<span className="font-semibold">Comment</span>
+														<p className="text-neutral-400">
+															{device?.reason_for_blocking}
+														</p>
+													</div>
+												)}
+											</div>
+										</TableCell>
+										<TableCell className="font-medium">
+											<div className="flex flex-col items-start">
+												{device?.user?.name}
+												<span className="text-muted-foreground">
+													{device?.user?.id_card}
+												</span>
+											</div>
+										</TableCell>
+										<TableCell className="font-medium">{device.mac}</TableCell>
+										<TableCell className="font-medium">
+											{device?.vendor}
+										</TableCell>
+										<TableCell>
+											{!device.has_a_pending_payment && (
+												<BlockDeviceDialog
+													admin={isAdmin}
+													type={device.blocked ? "unblock" : "block"}
+													device={device}
+												/>
+											)}
+										</TableCell>
+									</TableRow>
+								))}
+							</TableBody>
+							<TableFooter>
+								<TableRow>
+									<TableCell colSpan={5} className="text-muted-foreground">
+										{meta?.total === 1 ? (
+											<p className="text-center">Total {meta?.total} device.</p>
+										) : (
+											<p className="text-center">
+												Total {meta?.total} devices.
+											</p>
+										)}
+									</TableCell>
+								</TableRow>
+							</TableFooter>
+						</Table>
+					</div>
 
-          <Pagination
-            totalPages={meta?.last_page}
-            currentPage={meta?.current_page}
-          />
-        </>
-      )}
-    </div>
-  );
+					<Pagination
+						totalPages={meta?.last_page}
+						currentPage={meta?.current_page}
+					/>
+				</>
+			)}
+		</div>
+	);
 }

components/admin/admin-topup-form.tsx

@@ -104,7 +104,9 @@ export default function AddTopupDialogForm({ user_id }: { user_id?: string }) {
 								<Label htmlFor="description">Topup Description</Label>
 								<input type="hidden" name="user_id" value={user_id} />
 								<Textarea
-									defaultValue={(state?.payload?.get("description") || "") as string}
+									defaultValue={
+										(state?.payload?.get("description") || "") as string
+									}
 									rows={10}
 									name="description"
 									id="topup_description"

components/admin/admin-topup-table.tsx

@@ -2,13 +2,13 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 import { getTopups } from "@/actions/payment";
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
+	Table,
+	TableBody,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
 } from "@/components/ui/table";
 import { tryCatch } from "@/utils/tryCatch";
 import Pagination from "../pagination";
@@ -16,122 +16,122 @@ import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
 
 export async function AdminTopupsTable({
-  searchParams,
+	searchParams,
 }: {
-  searchParams: Promise<{
-    [key: string]: unknown;
-  }>;
+	searchParams: Promise<{
+		[key: string]: unknown;
+	}>;
 }) {
-  const resolvedParams = await searchParams;
-  const page = Number.parseInt(resolvedParams.page as string) || 1;
-  const limit = 10;
-  const offset = (page - 1) * limit;
-  // Build params object
-  const apiParams: Record<string, string | number | undefined> = {};
-  for (const [key, value] of Object.entries(resolvedParams)) {
-    if (value !== undefined && value !== "") {
-      apiParams[key] = typeof value === "number" ? value : String(value);
-    }
-  }
-  apiParams.limit = limit;
-  apiParams.offset = offset;
-  const [error, topups] = await tryCatch(getTopups(apiParams, true));
+	const resolvedParams = await searchParams;
+	const page = Number.parseInt(resolvedParams.page as string) || 1;
+	const limit = 10;
+	const offset = (page - 1) * limit;
+	// Build params object
+	const apiParams: Record<string, string | number | undefined> = {};
+	for (const [key, value] of Object.entries(resolvedParams)) {
+		if (value !== undefined && value !== "") {
+			apiParams[key] = typeof value === "number" ? value : String(value);
+		}
+	}
+	apiParams.limit = limit;
+	apiParams.offset = offset;
+	const [error, topups] = await tryCatch(getTopups(apiParams, true));
 
-  if (error) {
-    if (error.message.includes("Unauthorized")) {
-      redirect("/auth/signin");
-    } else {
-      return <pre>{JSON.stringify(error, null, 2)}</pre>;
-    }
-  }
-  const { data, meta } = topups;
-  return (
-    <div>
-      {data?.length === 0 ? (
-        <div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
-          <h3>No topups yet.</h3>
-        </div>
-      ) : (
-        <>
-          <div>
-            <Table className="overflow-scroll">
-              <TableHeader>
-                <TableRow>
-                  <TableHead>User</TableHead>
-                  <TableHead>Status</TableHead>
-                  <TableHead>Amount</TableHead>
-                  <TableHead>Action</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody className="overflow-scroll">
-                {topups?.data?.map((topup) => (
-                  <TableRow key={topup.id}>
-                    <TableCell>
-                      <div className="flex flex-col items-start">
-                        {topup?.user?.name}
-                        <span className="text-muted-foreground">
-                          {topup?.user?.id_card}
-                        </span>
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <span className="font-semibold pr-2">
-                        {topup.paid ? (
-                          <Badge
-                            className="bg-green-100 dark:bg-green-700"
-                            variant="outline"
-                          >
-                            {topup.status}
-                          </Badge>
-                        ) : topup.is_expired ? (
-                          <Badge>Expired</Badge>
-                        ) : (
-                          <Badge variant="outline">{topup.status}</Badge>
-                        )}
-                      </span>
-                    </TableCell>
-                    <TableCell>
-                      <span className="font-semibold pr-2">
-                        {topup.amount.toFixed(2)}
-                      </span>
-                      MVR
-                    </TableCell>
-                    <TableCell>
-                      <div>
-                        <div className="flex items-center gap-2 mt-2">
-                          <Link
-                            className="font-medium hover:underline"
-                            href={`/top-ups/${topup.id}`}
-                          >
-                            <Button size={"sm"} variant="outline">
-                              View Details
-                            </Button>
-                          </Link>
-                        </div>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-              <TableFooter>
-                <TableRow>
-                  <TableCell colSpan={4} className="text-muted-foreground">
-                    {meta?.total === 1 ? (
-                      <p className="text-center">Total {meta?.total} topup.</p>
-                    ) : (
-                      <p className="text-center">Total {meta?.total} topups.</p>
-                    )}
-                  </TableCell>
-                </TableRow>
-              </TableFooter>
-            </Table>
-          </div>
-          <Pagination
-            totalPages={meta?.last_page}
-            currentPage={meta?.current_page}
-          />
-        </>
-      )}
-    </div>
-  );
+	if (error) {
+		if (error.message.includes("Unauthorized")) {
+			redirect("/auth/signin");
+		} else {
+			return <pre>{JSON.stringify(error, null, 2)}</pre>;
+		}
+	}
+	const { data, meta } = topups;
+	return (
+		<div>
+			{data?.length === 0 ? (
+				<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
+					<h3>No topups yet.</h3>
+				</div>
+			) : (
+				<>
+					<div>
+						<Table className="overflow-scroll">
+							<TableHeader>
+								<TableRow>
+									<TableHead>User</TableHead>
+									<TableHead>Status</TableHead>
+									<TableHead>Amount</TableHead>
+									<TableHead>Action</TableHead>
+								</TableRow>
+							</TableHeader>
+							<TableBody className="overflow-scroll">
+								{topups?.data?.map((topup) => (
+									<TableRow key={topup.id}>
+										<TableCell>
+											<div className="flex flex-col items-start">
+												{topup?.user?.name}
+												<span className="text-muted-foreground">
+													{topup?.user?.id_card}
+												</span>
+											</div>
+										</TableCell>
+										<TableCell>
+											<span className="font-semibold pr-2">
+												{topup.paid ? (
+													<Badge
+														className="bg-green-100 dark:bg-green-700"
+														variant="outline"
+													>
+														{topup.status}
+													</Badge>
+												) : topup.is_expired ? (
+													<Badge>Expired</Badge>
+												) : (
+													<Badge variant="outline">{topup.status}</Badge>
+												)}
+											</span>
+										</TableCell>
+										<TableCell>
+											<span className="font-semibold pr-2">
+												{topup.amount.toFixed(2)}
+											</span>
+											MVR
+										</TableCell>
+										<TableCell>
+											<div>
+												<div className="flex items-center gap-2 mt-2">
+													<Link
+														className="font-medium hover:underline"
+														href={`/top-ups/${topup.id}`}
+													>
+														<Button size={"sm"} variant="outline">
+															View Details
+														</Button>
+													</Link>
+												</div>
+											</div>
+										</TableCell>
+									</TableRow>
+								))}
+							</TableBody>
+							<TableFooter>
+								<TableRow>
+									<TableCell colSpan={4} className="text-muted-foreground">
+										{meta?.total === 1 ? (
+											<p className="text-center">Total {meta?.total} topup.</p>
+										) : (
+											<p className="text-center">Total {meta?.total} topups.</p>
+										)}
+									</TableCell>
+								</TableRow>
+							</TableFooter>
+						</Table>
+					</div>
+					<Pagination
+						totalPages={meta?.last_page}
+						currentPage={meta?.current_page}
+					/>
+				</>
+			)}
+		</div>
+	);
 }

components/admin/user-payments-table.tsx

@@ -5,168 +5,168 @@ import Pagination from "@/components/pagination";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
+	Table,
+	TableBody,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
 } from "@/components/ui/table";
 import { tryCatch } from "@/utils/tryCatch";
 import ClientErrorMessage from "../client-error-message";
 
 export async function UsersPaymentsTable({
-  searchParams,
+	searchParams,
 }: {
-  searchParams: Promise<{
-    [key: string]: unknown;
-  }>;
+	searchParams: Promise<{
+		[key: string]: unknown;
+	}>;
 }) {
-  const resolvedParams = await searchParams;
+	const resolvedParams = await searchParams;
 
-  const page = Number.parseInt(resolvedParams.page as string) || 1;
-  const limit = 10;
-  const offset = (page - 1) * limit;
+	const page = Number.parseInt(resolvedParams.page as string) || 1;
+	const limit = 10;
+	const offset = (page - 1) * limit;
 
-  // Build params object for getDevices
-  const apiParams: Record<string, string | number | undefined> = {};
-  for (const [key, value] of Object.entries(resolvedParams)) {
-    if (value !== undefined && value !== "") {
-      apiParams[key] = typeof value === "number" ? value : String(value);
-    }
-  }
-  apiParams.limit = limit;
-  apiParams.offset = offset;
+	// Build params object for getDevices
+	const apiParams: Record<string, string | number | undefined> = {};
+	for (const [key, value] of Object.entries(resolvedParams)) {
+		if (value !== undefined && value !== "") {
+			apiParams[key] = typeof value === "number" ? value : String(value);
+		}
+	}
+	apiParams.limit = limit;
+	apiParams.offset = offset;
 
-  const [error, payments] = await tryCatch(getPayments(apiParams, true));
-  if (error) {
-    if (error.message === "UNAUTHORIZED") {
-      redirect("/auth/signin");
-    } else {
-      return <ClientErrorMessage message={error.message} />;
-    }
-  }
-  const { meta, data } = payments;
+	const [error, payments] = await tryCatch(getPayments(apiParams, true));
+	if (error) {
+		if (error.message === "UNAUTHORIZED") {
+			redirect("/auth/signin");
+		} else {
+			return <ClientErrorMessage message={error.message} />;
+		}
+	}
+	const { meta, data } = payments;
 
-  // return <pre>{JSON.stringify(payments, null, 2)}</pre>;
-  return (
-    <div>
-      {data.length === 0 ? (
-        <div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
-          <h3>No user payments yet.</h3>
-        </div>
-      ) : (
-        <>
-          <Table className="overflow-scroll">
-            <TableHeader>
-              <TableRow>
-                <TableHead>Devices paid</TableHead>
-                <TableHead>User</TableHead>
-                <TableHead>Amount</TableHead>
-                <TableHead>Duration</TableHead>
-                <TableHead>Payment Status</TableHead>
-                <TableHead>Payment Method</TableHead>
-                <TableHead>MIB Reference</TableHead>
-                <TableHead>Paid At</TableHead>
-                <TableHead>Action</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody className="overflow-scroll">
-              {data.map((payment) => (
-                <TableRow
-                  className={`${payment.paid && "title-bg dark:bg-black"}`}
-                  key={payment.id}
-                >
-                  <TableCell className="font-medium">
-                    <ol className="list-disc list-inside text-sm">
-                      {payment.devices.map((device) => (
-                        <li
-                          key={device.id}
-                          className="text-sm text-muted-foreground"
-                        >
-                          {device.name}
-                        </li>
-                      ))}
-                    </ol>
-                  </TableCell>
-                  <TableCell className="font-medium">
-                    {/* {payment.user.id_card} */}
-                    <div className="flex flex-col items-start">
-                      {payment?.user?.name}
-                      <span className="text-muted-foreground">
-                        {payment?.user?.id_card}
-                      </span>
-                    </div>{" "}
-                  </TableCell>
-                  <TableCell>{payment.amount} MVR</TableCell>
-                  <TableCell>{payment.number_of_months} Months</TableCell>
+	// return <pre>{JSON.stringify(payments, null, 2)}</pre>;
+	return (
+		<div>
+			{data.length === 0 ? (
+				<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
+					<h3>No user payments yet.</h3>
+				</div>
+			) : (
+				<>
+					<Table className="overflow-scroll">
+						<TableHeader>
+							<TableRow>
+								<TableHead>Devices paid</TableHead>
+								<TableHead>User</TableHead>
+								<TableHead>Amount</TableHead>
+								<TableHead>Duration</TableHead>
+								<TableHead>Payment Status</TableHead>
+								<TableHead>Payment Method</TableHead>
+								<TableHead>MIB Reference</TableHead>
+								<TableHead>Paid At</TableHead>
+								<TableHead>Action</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody className="overflow-scroll">
+							{data.map((payment) => (
+								<TableRow
+									className={`${payment.paid && "title-bg dark:bg-black"}`}
+									key={payment.id}
+								>
+									<TableCell className="font-medium">
+										<ol className="list-disc list-inside text-sm">
+											{payment.devices.map((device) => (
+												<li
+													key={device.id}
+													className="text-sm text-muted-foreground"
+												>
+													{device.name}
+												</li>
+											))}
+										</ol>
+									</TableCell>
+									<TableCell className="font-medium">
+										{/* {payment.user.id_card} */}
+										<div className="flex flex-col items-start">
+											{payment?.user?.name}
+											<span className="text-muted-foreground">
+												{payment?.user?.id_card}
+											</span>
+										</div>{" "}
+									</TableCell>
+									<TableCell>{payment.amount} MVR</TableCell>
+									<TableCell>{payment.number_of_months} Months</TableCell>
 
-                  <TableCell>
-                    {payment.status === "PENDING" ? (
-                      <Badge
-                        variant="outline"
-                        className="bg-yellow-100 text-black"
-                      >
-                        {payment.status}
-                      </Badge>
-                    ) : payment.status === "PAID" ? (
-                      <Badge
-                        variant="outline"
-                        className="bg-lime-100 text-black"
-                      >
-                        {payment.status}
-                      </Badge>
-                    ) : (
-                      <Badge
-                        variant="outline"
-                        className="bg-red-100 text-black"
-                      >
-                        {payment.status}
-                      </Badge>
-                    )}
-                  </TableCell>
-                  <TableCell>{payment.method}</TableCell>
-                  <TableCell>{payment.mib_reference}</TableCell>
-                  <TableCell>
-                    {new Date(payment.paid_at ?? "").toLocaleDateString(
-                      "en-US",
-                      {
-                        month: "short",
-                        day: "2-digit",
-                        year: "numeric",
-                        minute: "2-digit",
-                        hour: "2-digit",
-                      },
-                    )}
-                  </TableCell>
+									<TableCell>
+										{payment.status === "PENDING" ? (
+											<Badge
+												variant="outline"
+												className="bg-yellow-100 text-black"
+											>
+												{payment.status}
+											</Badge>
+										) : payment.status === "PAID" ? (
+											<Badge
+												variant="outline"
+												className="bg-lime-100 text-black"
+											>
+												{payment.status}
+											</Badge>
+										) : (
+											<Badge
+												variant="outline"
+												className="bg-red-100 text-black"
+											>
+												{payment.status}
+											</Badge>
+										)}
+									</TableCell>
+									<TableCell>{payment.method}</TableCell>
+									<TableCell>{payment.mib_reference}</TableCell>
+									<TableCell>
+										{new Date(payment.paid_at ?? "").toLocaleDateString(
+											"en-US",
+											{
+												month: "short",
+												day: "2-digit",
+												year: "numeric",
+												minute: "2-digit",
+												hour: "2-digit",
+											},
+										)}
+									</TableCell>
 
-                  <TableCell>
-                    <Link href={`/payments/${payment.id}`}>
-                      <Button>Details</Button>
-                    </Link>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-            <TableFooter>
-              <TableRow>
-                <TableCell colSpan={10} className="text-muted-foreground">
-                  {meta?.total === 1 ? (
-                    <p className="text-center">Total {meta?.total} payment.</p>
-                  ) : (
-                    <p className="text-center">Total {meta?.total} payments.</p>
-                  )}{" "}
-                </TableCell>
-              </TableRow>
-            </TableFooter>
-          </Table>
-          <Pagination
-            totalPages={meta?.last_page}
-            currentPage={meta?.current_page}
-          />
-        </>
-      )}
-    </div>
-  );
+									<TableCell>
+										<Link href={`/payments/${payment.id}`}>
+											<Button>Details</Button>
+										</Link>
+									</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+						<TableFooter>
+							<TableRow>
+								<TableCell colSpan={10} className="text-muted-foreground">
+									{meta?.total === 1 ? (
+										<p className="text-center">Total {meta?.total} payment.</p>
+									) : (
+										<p className="text-center">Total {meta?.total} payments.</p>
+									)}{" "}
+								</TableCell>
+							</TableRow>
+						</TableFooter>
+					</Table>
+					<Pagination
+						totalPages={meta?.last_page}
+						currentPage={meta?.current_page}
+					/>
+				</>
+			)}
+		</div>
+	);
 }

components/agreement-card.tsx

@@ -1,30 +1,33 @@
-import { EyeIcon } from "lucide-react"
-import { Button } from "@/components/ui/button"
+import { EyeIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import {
-  Card,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle
-} from "@/components/ui/card"
+	Card,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
 
 export function AgreementCard({ agreement }: { agreement: string }) {
-  return (
-    <Card className="w-full max-w-sm">
-      <CardHeader>
-        <CardTitle>Sarlink User Agreement</CardTitle>
-        <CardDescription>
-          User agreement for Sarlink services.
-        </CardDescription>
-      </CardHeader>
-      <CardFooter className="flex-col gap-2">
-        <a target="_blank" rel="noopener noreferrer" className="w-full hover:cursor-pointer" href={agreement}>
-          <Button type="button" className="w-full hover:cursor-pointer">
-            <EyeIcon />
-            View Agreement
-          </Button>
-        </a>
-      </CardFooter>
-    </Card>
-  )
+	return (
+		<Card className="w-full max-w-sm">
+			<CardHeader>
+				<CardTitle>Sarlink User Agreement</CardTitle>
+				<CardDescription>User agreement for Sarlink services.</CardDescription>
+			</CardHeader>
+			<CardFooter className="flex-col gap-2">
+				<a
+					target="_blank"
+					rel="noopener noreferrer"
+					className="w-full hover:cursor-pointer"
+					href={agreement}
+				>
+					<Button type="button" className="w-full hover:cursor-pointer">
+						<EyeIcon />
+						View Agreement
+					</Button>
+				</a>
+			</CardFooter>
+		</Card>
+	);
 }

components/auth/signup-form.tsx

@@ -110,7 +110,7 @@ export default function SignUpForm() {
 								className={cn(
 									"text-base",
 									actionState?.errors?.fieldErrors.name &&
-									"border-2 border-red-500",
+										"border-2 border-red-500",
 								)}
 								name="name"
 								type="text"
@@ -144,7 +144,7 @@ export default function SignUpForm() {
 								className={cn(
 									"text-base",
 									actionState?.errors?.fieldErrors?.id_card &&
-									"border-2 border-red-500",
+										"border-2 border-red-500",
 								)}
 								placeholder="ID Card"
 							/>
@@ -244,7 +244,7 @@ export default function SignUpForm() {
 								className={cn(
 									"text-base",
 									actionState?.errors?.fieldErrors?.address &&
-									"border-2 border-red-500",
+										"border-2 border-red-500",
 								)}
 								disabled={isPending}
 								name="address"
@@ -272,7 +272,7 @@ export default function SignUpForm() {
 								className={cn(
 									"text-base",
 									actionState?.errors?.fieldErrors?.dob &&
-									"border-2 border-red-500",
+										"border-2 border-red-500",
 								)}
 								name="dob"
 								disabled={isPending}
@@ -305,7 +305,7 @@ export default function SignUpForm() {
 								className={cn(
 									"text-base",
 									actionState?.errors?.fieldErrors.accNo &&
-									"border-2 border-red-500",
+										"border-2 border-red-500",
 								)}
 								name="accNo"
 								type="number"
@@ -335,8 +335,8 @@ export default function SignUpForm() {
 								disabled={isPending}
 								className={cn(
 									!phoneNumberFromUrl &&
-									actionState?.errors?.fieldErrors?.phone_number &&
-									"border-2 border-red-500 rounded-md",
+										actionState?.errors?.fieldErrors?.phone_number &&
+										"border-2 border-red-500 rounded-md",
 								)}
 								defaultValue={NUMBER_WITHOUT_DASH ?? ""}
 								readOnly={Boolean(phoneNumberFromUrl)}

components/block-device-dialog.tsx

@@ -6,12 +6,12 @@ import { useActionState, useEffect, useState, useTransition } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
+	Dialog,
+	DialogContent,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import type { Device } from "@/lib/backend-types";
@@ -21,151 +21,151 @@ import { TextShimmer } from "./ui/text-shimmer";
 import { Textarea } from "./ui/textarea";
 
 export type BlockDeviceFormState = {
-  message: string;
-  success: boolean;
-  fieldErrors?: {
-    reason_for_blocking?: string[];
-  };
-  payload?: FormData;
+	message: string;
+	success: boolean;
+	fieldErrors?: {
+		reason_for_blocking?: string[];
+	};
+	payload?: FormData;
 };
 
 const initialState: BlockDeviceFormState = {
-  message: "",
-  success: false,
-  fieldErrors: {},
+	message: "",
+	success: false,
+	fieldErrors: {},
 };
 
 export default function BlockDeviceDialog({
-  device,
-  admin,
-  parentalControl = false,
+	device,
+	admin,
+	parentalControl = false,
 }: {
-  device: Device;
-  type: "block" | "unblock";
-  admin?: boolean;
-  parentalControl?: boolean;
+	device: Device;
+	type: "block" | "unblock";
+	admin?: boolean;
+	parentalControl?: boolean;
 }) {
-  const [open, setOpen] = useState(false);
-  const [state, formAction, isPending] = useActionState(
-    blockDeviceAction,
-    initialState,
-  );
-  const [isTransitioning, startTransition] = useTransition();
+	const [open, setOpen] = useState(false);
+	const [state, formAction, isPending] = useActionState(
+		blockDeviceAction,
+		initialState,
+	);
+	const [isTransitioning, startTransition] = useTransition();
 
-  const handleSimpleBlock = () => {
-    startTransition(() => {
-      const formData = new FormData();
-      formData.append("deviceId", String(device.id));
-      formData.append("reason_for_blocking", "");
-      formData.append("action", "simple-block");
-      formData.append("blocked_by", "PARENT");
+	const handleSimpleBlock = () => {
+		startTransition(() => {
+			const formData = new FormData();
+			formData.append("deviceId", String(device.id));
+			formData.append("reason_for_blocking", "");
+			formData.append("action", "simple-block");
+			formData.append("blocked_by", "PARENT");
 
-      formAction(formData);
-    });
-  };
+			formAction(formData);
+		});
+	};
 
-  const handleUnblock = () => {
-    startTransition(() => {
-      const formData = new FormData();
-      formData.append("deviceId", String(device.id));
-      formData.append("reason_for_blocking", "");
-      formData.append("action", "unblock");
-      formData.append("blocked_by", "PARENT");
+	const handleUnblock = () => {
+		startTransition(() => {
+			const formData = new FormData();
+			formData.append("deviceId", String(device.id));
+			formData.append("reason_for_blocking", "");
+			formData.append("action", "unblock");
+			formData.append("blocked_by", "PARENT");
 
-      formAction(formData);
-    });
-  };
+			formAction(formData);
+		});
+	};
 
-  // Show toast notifications based on state changes
-  useEffect(() => {
-    if (state.message) {
-      if (state.success) {
-        toast.success(state.message);
-        if (open) setOpen(false);
-      } else {
-        toast.error(state.message);
-      }
-    }
-  }, [state, open]);
+	// Show toast notifications based on state changes
+	useEffect(() => {
+		if (state.message) {
+			if (state.success) {
+				toast.success(state.message);
+				if (open) setOpen(false);
+			} else {
+				toast.error(state.message);
+			}
+		}
+	}, [state, open]);
 
-  const isLoading = isPending || isTransitioning;
+	const isLoading = isPending || isTransitioning;
 
-  // If device is blocked and user is not admin, show unblock button
-  if (device.blocked && parentalControl) {
-    return (
-      <Button onClick={handleUnblock} disabled={isLoading}>
-        {isLoading ? <TextShimmer>Unblocking</TextShimmer> : "Unblock"}
-      </Button>
-    );
-  }
+	// If device is blocked and user is not admin, show unblock button
+	if (device.blocked && parentalControl) {
+		return (
+			<Button onClick={handleUnblock} disabled={isLoading}>
+				{isLoading ? <TextShimmer>Unblocking</TextShimmer> : "Unblock"}
+			</Button>
+		);
+	}
 
-  // If device is not blocked and user is not admin, show simple block button
-  if ((!device.blocked && parentalControl) || !admin) {
-    return (
-      <Button
-        onClick={handleSimpleBlock}
-        disabled={isLoading}
-        variant="destructive"
-      >
-        <ShieldBan />
-        {isLoading ? <TextShimmer>Blocking</TextShimmer> : "Block"}
-      </Button>
-    );
-  }
+	// If device is not blocked and user is not admin, show simple block button
+	if ((!device.blocked && parentalControl) || !admin) {
+		return (
+			<Button
+				onClick={handleSimpleBlock}
+				disabled={isLoading}
+				variant="destructive"
+			>
+				<ShieldBan />
+				{isLoading ? <TextShimmer>Blocking</TextShimmer> : "Block"}
+			</Button>
+		);
+	}
 
-  // If user is admin, show block with reason dialog
-  return (
-    <div>
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogTrigger asChild>
-          <Button disabled={isLoading} variant="destructive">
-            <OctagonX />
-            Block
-          </Button>
-        </DialogTrigger>
-        <DialogContent className="sm:max-w-[425px]">
-          <DialogHeader>
-            <DialogTitle>Block 🚫</DialogTitle>
-            <DialogDescription className="text-sm text-muted-foreground">
-              Please provide a reason for blocking this device
-            </DialogDescription>
-          </DialogHeader>
-          <form action={formAction} className="space-y-4">
-            <input type="hidden" name="deviceId" value={String(device.id)} />
-            <input type="hidden" name="action" value="block" />
-            <input type="hidden" name="blocked_by" value="ADMIN" />
+	// If user is admin, show block with reason dialog
+	return (
+		<div>
+			<Dialog open={open} onOpenChange={setOpen}>
+				<DialogTrigger asChild>
+					<Button disabled={isLoading} variant="destructive">
+						<OctagonX />
+						Block
+					</Button>
+				</DialogTrigger>
+				<DialogContent className="sm:max-w-[425px]">
+					<DialogHeader>
+						<DialogTitle>Block 🚫</DialogTitle>
+						<DialogDescription className="text-sm text-muted-foreground">
+							Please provide a reason for blocking this device
+						</DialogDescription>
+					</DialogHeader>
+					<form action={formAction} className="space-y-4">
+						<input type="hidden" name="deviceId" value={String(device.id)} />
+						<input type="hidden" name="action" value="block" />
+						<input type="hidden" name="blocked_by" value="ADMIN" />
 
-            <div className="grid gap-4 py-4">
-              <div className="flex flex-col items-start gap-1">
-                <Label htmlFor="reason_for_blocking" className="text-right">
-                  Reason for blocking
-                </Label>
-                <Textarea
-                  rows={10}
-                  name="reason_for_blocking"
-                  id="reason_for_blocking"
-                  defaultValue={
-                    (state?.payload?.get("reason_for_blocking") || "") as string
-                  }
-                  className={cn(
-                    "col-span-5 mt-2",
-                    state.fieldErrors?.reason_for_blocking &&
-                      "ring-2 ring-red-500",
-                  )}
-                />
-                <span className="text-sm text-red-500">
-                  {state.fieldErrors?.reason_for_blocking?.[0]}
-                </span>
-              </div>
-            </div>
-            <DialogFooter>
-              <Button variant="destructive" disabled={isLoading} type="submit">
-                {isLoading ? "Blocking..." : "Block"}
-              </Button>
-            </DialogFooter>
-          </form>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
+						<div className="grid gap-4 py-4">
+							<div className="flex flex-col items-start gap-1">
+								<Label htmlFor="reason_for_blocking" className="text-right">
+									Reason for blocking
+								</Label>
+								<Textarea
+									rows={10}
+									name="reason_for_blocking"
+									id="reason_for_blocking"
+									defaultValue={
+										(state?.payload?.get("reason_for_blocking") || "") as string
+									}
+									className={cn(
+										"col-span-5 mt-2",
+										state.fieldErrors?.reason_for_blocking &&
+											"ring-2 ring-red-500",
+									)}
+								/>
+								<span className="text-sm text-red-500">
+									{state.fieldErrors?.reason_for_blocking?.[0]}
+								</span>
+							</div>
+						</div>
+						<DialogFooter>
+							<Button variant="destructive" disabled={isLoading} type="submit">
+								{isLoading ? "Blocking..." : "Block"}
+							</Button>
+						</DialogFooter>
+					</form>
+				</DialogContent>
+			</Dialog>
+		</div>
+	);
 }

components/device-card.tsx

@@ -10,108 +10,108 @@ import BlockDeviceDialog from "./block-device-dialog";
 import { Badge } from "./ui/badge";
 
 export default function DeviceCard({
-  device,
-  parentalControl,
-  isAdmin,
+	device,
+	parentalControl,
+	isAdmin,
 }: {
-  device: Device;
-  parentalControl?: boolean;
-  isAdmin?: boolean;
+	device: Device;
+	parentalControl?: boolean;
+	isAdmin?: boolean;
 }) {
-  const [devices, setDeviceCart] = useAtom(deviceCartAtom);
+	const [devices, setDeviceCart] = useAtom(deviceCartAtom);
 
-  const isChecked = devices.some((d) => d.id === device.id);
+	const isChecked = devices.some((d) => d.id === device.id);
 
-  return (
-    // biome-ignore lint/a11y/noStaticElementInteractions: <dw about it>
-    <div
-      onKeyUp={() => {}}
-      onClick={() => {
-        if (device.blocked) return;
-        if (device.is_active === true) return;
-        if (device.has_a_pending_payment === true) return;
-        if (parentalControl === true) return;
-        setDeviceCart((prev) =>
-          devices.some((d) => d.id === device.id)
-            ? prev.filter((d) => d.id !== device.id)
-            : [...prev, device],
-        );
-      }}
-      className="w-full"
-    >
-      <div
-        className={cn(
-          "flex text-sm justify-between items-center my-2 p-4 border rounded-md",
-          isChecked ? "bg-accent" : "",
-          device.is_active
-            ? "cursor-not-allowed text-green-600 hover:bg-accent-foreground/10"
-            : "cursor-pointer hover:bg-muted-foreground/10",
-        )}
-      >
-        <div className="">
-          <div className="font-semibold flex flex-col items-start gap-2 mb-2">
-            <Link
-              className={cn(
-                "font-medium hover:underline ml-0.5",
-                device.is_active ? "text-green-600" : "",
-              )}
-              href={`/devices/${device.id}`}
-            >
-              {device.name}
-            </Link>
-            <Badge variant={"outline"}>
-              <span className="font-medium">{device.mac}</span>
-            </Badge>
-            <Badge variant={"outline"}>
-              <span className="font-medium">{device.vendor}</span>
-            </Badge>
-          </div>
+	return (
+		// biome-ignore lint/a11y/noStaticElementInteractions: <dw about it>
+		<div
+			onKeyUp={() => {}}
+			onClick={() => {
+				if (device.blocked) return;
+				if (device.is_active === true) return;
+				if (device.has_a_pending_payment === true) return;
+				if (parentalControl === true) return;
+				setDeviceCart((prev) =>
+					devices.some((d) => d.id === device.id)
+						? prev.filter((d) => d.id !== device.id)
+						: [...prev, device],
+				);
+			}}
+			className="w-full"
+		>
+			<div
+				className={cn(
+					"flex text-sm justify-between items-center my-2 p-4 border rounded-md",
+					isChecked ? "bg-accent" : "",
+					device.is_active
+						? "cursor-not-allowed text-green-600 hover:bg-accent-foreground/10"
+						: "cursor-pointer hover:bg-muted-foreground/10",
+				)}
+			>
+				<div className="">
+					<div className="font-semibold flex flex-col items-start gap-2 mb-2">
+						<Link
+							className={cn(
+								"font-medium hover:underline ml-0.5",
+								device.is_active ? "text-green-600" : "",
+							)}
+							href={`/devices/${device.id}`}
+						>
+							{device.name}
+						</Link>
+						<Badge variant={"outline"}>
+							<span className="font-medium">{device.mac}</span>
+						</Badge>
+						<Badge variant={"outline"}>
+							<span className="font-medium">{device.vendor}</span>
+						</Badge>
+					</div>
 
-          {device.is_active ? (
-            <div className="text-muted-foreground ml-0.5">
-              Active until{" "}
-              <span className="font-semibold">
-                {new Date(device.expiry_date || "").toLocaleDateString(
-                  "en-US",
-                  {
-                    month: "short",
-                    day: "2-digit",
-                    year: "numeric",
-                  },
-                )}
-              </span>
-            </div>
-          ) : (
-            <p className="text-muted-foreground ml-0.5">Device Inactive</p>
-          )}
-          {device.has_a_pending_payment && (
-            <Link href={`/payments/${device.pending_payment_id}`}>
-              <span className="bg-muted rounded px-2 p-1 mt-2 flex hover:underline items-center justify-center gap-2 text-yellow-600">
-                Payment Pending{" "}
-                <HandCoins className="animate-pulse" size={14} />
-              </span>
-            </Link>
-          )}
+					{device.is_active ? (
+						<div className="text-muted-foreground ml-0.5">
+							Active until{" "}
+							<span className="font-semibold">
+								{new Date(device.expiry_date || "").toLocaleDateString(
+									"en-US",
+									{
+										month: "short",
+										day: "2-digit",
+										year: "numeric",
+									},
+								)}
+							</span>
+						</div>
+					) : (
+						<p className="text-muted-foreground ml-0.5">Device Inactive</p>
+					)}
+					{device.has_a_pending_payment && (
+						<Link href={`/payments/${device.pending_payment_id}`}>
+							<span className="bg-muted rounded px-2 p-1 mt-2 flex hover:underline items-center justify-center gap-2 text-yellow-600">
+								Payment Pending{" "}
+								<HandCoins className="animate-pulse" size={14} />
+							</span>
+						</Link>
+					)}
 
-          {device.blocked && device.blocked_by === "ADMIN" && (
-            <div className="p-2 rounded border my-2 w-full">
-              <span className="uppercase text-red-500">Blocked by admin </span>
-              <p className="text-neutral-500">{device?.reason_for_blocking}</p>
-            </div>
-          )}
-        </div>
-        <div>
-          {!parentalControl ? (
-            <AddDevicesToCartButton device={device} />
-          ) : (
-            <BlockDeviceDialog
-              admin={isAdmin}
-              type={device.blocked ? "unblock" : "block"}
-              device={device}
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  );
+					{device.blocked && device.blocked_by === "ADMIN" && (
+						<div className="p-2 rounded border my-2 w-full">
+							<span className="uppercase text-red-500">Blocked by admin </span>
+							<p className="text-neutral-500">{device?.reason_for_blocking}</p>
+						</div>
+					)}
+				</div>
+				<div>
+					{!parentalControl ? (
+						<AddDevicesToCartButton device={device} />
+					) : (
+						<BlockDeviceDialog
+							admin={isAdmin}
+							type={device.blocked ? "unblock" : "block"}
+							device={device}
+						/>
+					)}
+				</div>
+			</div>
+		</div>
+	);
 }

components/device-table-skeleton.tsx

@@ -0,0 +1,66 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+type TableSkeletonProps = {
+	headers: string[];
+	length: number;
+};
+
+export default function TableSkeleton({ headers, length }: TableSkeletonProps) {
+	return (
+		<>
+			<div className="hidden sm:block w-full">
+				<Table className="overflow-scroll w-full">
+					<TableHeader>
+						<TableRow>
+							{headers.map((header, index) => (
+								<TableHead key={`${index + 1}`}>{header}</TableHead>
+							))}
+						</TableRow>
+					</TableHeader>
+					<TableBody className="overflow-scroll">
+						{Array.from({ length }).map((_, i) => (
+							<TableRow key={`${i + 1}`}>
+								{headers.map((_, index) => (
+									<TableCell key={`${index + 1}`}>
+										<Skeleton className="w-full h-10 rounded" />
+									</TableCell>
+								))}
+							</TableRow>
+						))}
+					</TableBody>
+				</Table>
+			</div>
+			<div className="sm:hidden my-4 w-full">
+				{Array.from({ length }).map((_, i) => (
+					<DeviceCardSkeleton key={`${i + 1}`} />
+				))}
+			</div>
+		</>
+	);
+}
+
+function DeviceCardSkeleton() {
+	return (
+		<div
+			className={cn(
+				"flex text-sm justify-between items-center my-2 p-4 border rounded-md w-full",
+			)}
+		>
+			<div className="font-semibold flex w-full flex-col items-start gap-2 mb-2 relative">
+				<Skeleton className="w-32 h-6" />
+				<Skeleton className="w-36 h-6" />
+				<Skeleton className="w-32 h-4" />
+				<Skeleton className="w-40 h-8" />
+			</div>
+		</div>
+	);
+}

components/devices-for-payment.tsx

@@ -20,7 +20,6 @@ export default function DevicesForPayment() {
 	const [months, setMonths] = useAtom(numberOfMonths);
 	const [disabled, setDisabled] = useState(false);
 
-
 	if (pathname === "/payments") {
 		return null;
 	}
@@ -48,7 +47,6 @@ export default function DevicesForPayment() {
 					maxAllowed={12}
 					isDisabled={devices.length === 0}
 				/>
-
 			</div>
 			<Button
 				onClick={async () => {

components/devices-table.tsx

@@ -2,13 +2,13 @@ import { redirect } from "next/navigation";
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/app/auth";
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
+	Table,
+	TableBody,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
 } from "@/components/ui/table";
 import { getDevices } from "@/queries/devices";
 import { tryCatch } from "@/utils/tryCatch";
@@ -18,107 +18,107 @@ import DeviceCard from "./device-card";
 import Pagination from "./pagination";
 
 export async function DevicesTable({
-  searchParams,
-  parentalControl,
-  additionalFilters = {},
+	searchParams,
+	parentalControl,
+	additionalFilters = {},
 }: {
-  searchParams: Promise<{
-    [key: string]: unknown;
-  }>;
-  parentalControl?: boolean;
-  additionalFilters?: Record<string, string | number | boolean>;
+	searchParams: Promise<{
+		[key: string]: unknown;
+	}>;
+	parentalControl?: boolean;
+	additionalFilters?: Record<string, string | number | boolean>;
 }) {
-  const resolvedParams = await searchParams;
-  const session = await getServerSession(authOptions);
-  const isAdmin = session?.user?.is_admin;
+	const resolvedParams = await searchParams;
+	const session = await getServerSession(authOptions);
+	const isAdmin = session?.user?.is_admin;
 
-  const page = Number.parseInt(resolvedParams.page as string) || 1;
-  const limit = 10;
-  const offset = (page - 1) * limit;
+	const page = Number.parseInt(resolvedParams.page as string) || 1;
+	const limit = 10;
+	const offset = (page - 1) * limit;
 
-  // Build params object for getDevices
-  const apiParams: Record<string, string | number | undefined> = {};
-  for (const [key, value] of Object.entries(resolvedParams)) {
-    if (value !== undefined && value !== "") {
-      apiParams[key] = typeof value === "number" ? value : String(value);
-    }
-  }
+	// Build params object for getDevices
+	const apiParams: Record<string, string | number | undefined> = {};
+	for (const [key, value] of Object.entries(resolvedParams)) {
+		if (value !== undefined && value !== "") {
+			apiParams[key] = typeof value === "number" ? value : String(value);
+		}
+	}
 
-  for (const [key, value] of Object.entries(additionalFilters)) {
-    if (value !== undefined && value !== "") {
-      apiParams[key] = typeof value === "number" ? value : String(value);
-    }
-  }
-  apiParams.limit = limit;
-  apiParams.offset = offset;
-  const [error, devices] = await tryCatch(getDevices(apiParams));
-  if (error) {
-    if (error.message === "UNAUTHORIZED") {
-      redirect("/auth/signin");
-    } else {
-      return <ClientErrorMessage message={error.message} />;
-    }
-  }
-  const { meta, data } = devices;
-  return (
-    <div>
-      {data?.length === 0 ? (
-        <div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
-          <h3>{parentalControl ? "No active devices" : "No devices."}</h3>
-        </div>
-      ) : (
-        <>
-          <div className="hidden sm:block">
-            <Table className="overflow-scroll">
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Device Name</TableHead>
-                  <TableHead>MAC Address</TableHead>
-                  <TableHead>Vendor</TableHead>
-                  <TableHead>#</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody className="overflow-scroll">
-                {data?.map((device) => (
-                  <ClickableRow
-                    admin={isAdmin}
-                    key={device.id}
-                    device={device}
-                    parentalControl={parentalControl}
-                  />
-                ))}
-              </TableBody>
-              <TableFooter>
-                <TableRow>
-                  <TableCell colSpan={4} className="text-muted-foreground">
-                    {meta?.total === 1 ? (
-                      <p className="text-center">Total {meta?.total} device.</p>
-                    ) : (
-                      <p className="text-center">
-                        Total {meta?.total} devices.
-                      </p>
-                    )}
-                  </TableCell>
-                </TableRow>
-              </TableFooter>
-            </Table>
-          </div>
-          <div className="sm:hidden my-4">
-            {data?.map((device) => (
-              <DeviceCard
-                parentalControl={parentalControl}
-                key={device.id}
-                device={device}
-                isAdmin={isAdmin}
-              />
-            ))}
-          </div>
-          <Pagination
-            totalPages={meta?.last_page}
-            currentPage={meta?.current_page}
-          />
-        </>
-      )}
-    </div>
-  );
+	for (const [key, value] of Object.entries(additionalFilters)) {
+		if (value !== undefined && value !== "") {
+			apiParams[key] = typeof value === "number" ? value : String(value);
+		}
+	}
+	apiParams.limit = limit;
+	apiParams.offset = offset;
+	const [error, devices] = await tryCatch(getDevices(apiParams));
+	if (error) {
+		if (error.message === "UNAUTHORIZED") {
+			redirect("/auth/signin");
+		} else {
+			return <ClientErrorMessage message={error.message} />;
+		}
+	}
+	const { meta, data } = devices;
+	return (
+		<div>
+			{data?.length === 0 ? (
+				<div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
+					<h3>{parentalControl ? "No active devices" : "No devices."}</h3>
+				</div>
+			) : (
+				<>
+					<div className="hidden sm:block">
+						<Table className="overflow-scroll">
+							<TableHeader>
+								<TableRow>
+									<TableHead>Device Name</TableHead>
+									<TableHead>MAC Address</TableHead>
+									<TableHead>Vendor</TableHead>
+									<TableHead>#</TableHead>
+								</TableRow>
+							</TableHeader>
+							<TableBody className="overflow-scroll">
+								{data?.map((device) => (
+									<ClickableRow
+										admin={isAdmin}
+										key={device.id}
+										device={device}
+										parentalControl={parentalControl}
+									/>
+								))}
+							</TableBody>
+							<TableFooter>
+								<TableRow>
+									<TableCell colSpan={4} className="text-muted-foreground">
+										{meta?.total === 1 ? (
+											<p className="text-center">Total {meta?.total} device.</p>
+										) : (
+											<p className="text-center">
+												Total {meta?.total} devices.
+											</p>
+										)}
+									</TableCell>
+								</TableRow>
+							</TableFooter>
+						</Table>
+					</div>
+					<div className="sm:hidden my-4">
+						{data?.map((device) => (
+							<DeviceCard
+								parentalControl={parentalControl}
+								key={device.id}
+								device={device}
+								isAdmin={isAdmin}
+							/>
+						))}
+					</div>
+					<Pagination
+						totalPages={meta?.last_page}
+						currentPage={meta?.current_page}
+					/>
+				</>
+			)}
+		</div>
+	);
 }

components/number-input.tsx

@@ -1,63 +1,63 @@
 import { Minus, Plus } from "lucide-react";
 import { useEffect } from "react";
 import {
-  Button,
-  Group,
-  Input,
-  Label,
-  NumberField,
+	Button,
+	Group,
+	Input,
+	Label,
+	NumberField,
 } from "react-aria-components";
 import { cn } from "@/lib/utils";
 
 export default function NumberInput({
-  maxAllowed,
-  label,
-  value = 100,
-  onChange,
-  className,
-  isDisabled,
+	maxAllowed,
+	label,
+	value = 100,
+	onChange,
+	className,
+	isDisabled,
 }: {
-  maxAllowed?: number;
-  label: string;
-  value?: number;
-  onChange: (value: number) => void;
-  className?: string;
-  isDisabled?: boolean;
+	maxAllowed?: number;
+	label: string;
+	value?: number;
+	onChange: (value: number) => void;
+	className?: string;
+	isDisabled?: boolean;
 }) {
-  useEffect(() => {
-    if (maxAllowed) {
-      if (value > maxAllowed) {
-        onChange(maxAllowed);
-      }
-    }
-  }, [maxAllowed, value, onChange]);
+	useEffect(() => {
+		if (maxAllowed) {
+			if (value > maxAllowed) {
+				onChange(maxAllowed);
+			}
+		}
+	}, [maxAllowed, value, onChange]);
 
-  return (
-    <NumberField
-      isDisabled={isDisabled}
-      className={cn(className)}
-      value={value}
-      minValue={0}
-      onChange={onChange}
-    >
-      <div className="space-y-2">
-        <Label className="text-sm font-medium text-foreground">{label}</Label>
-        <Group className="relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input text-sm shadow-sm shadow-black/5 transition-shadow data-[focus-within]:border-ring data-disabled:opacity-50 data-focus-within:outline-none data-focus-within:ring-[3px] data-[focus-within]:ring-ring/20">
-          <Button
-            slot="decrement"
-            className="-ms-px flex aspect-square h-[inherit] items-center justify-center rounded-s-lg border border-input bg-background text-sm text-muted-foreground/80 transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
-          >
-            <Minus size={16} strokeWidth={2} aria-hidden="true" />
-          </Button>
-          <Input className="w-full grow bg-background px-3 py-2 text-center text-base tabular-nums text-foreground focus:outline-none" />
-          <Button
-            slot="increment"
-            className="-me-px flex aspect-square h-[inherit] items-center justify-center rounded-e-lg border border-input bg-background text-sm text-muted-foreground/80 transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
-          >
-            <Plus size={16} strokeWidth={2} aria-hidden="true" />
-          </Button>
-        </Group>
-      </div>
-    </NumberField>
-  );
+	return (
+		<NumberField
+			isDisabled={isDisabled}
+			className={cn(className)}
+			value={value}
+			minValue={0}
+			onChange={onChange}
+		>
+			<div className="space-y-2">
+				<Label className="text-sm font-medium text-foreground">{label}</Label>
+				<Group className="relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input text-sm shadow-sm shadow-black/5 transition-shadow data-[focus-within]:border-ring data-disabled:opacity-50 data-focus-within:outline-none data-focus-within:ring-[3px] data-[focus-within]:ring-ring/20">
+					<Button
+						slot="decrement"
+						className="-ms-px flex aspect-square h-[inherit] items-center justify-center rounded-s-lg border border-input bg-background text-sm text-muted-foreground/80 transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+					>
+						<Minus size={16} strokeWidth={2} aria-hidden="true" />
+					</Button>
+					<Input className="w-full grow bg-background px-3 py-2 text-center text-base tabular-nums text-foreground focus:outline-none" />
+					<Button
+						slot="increment"
+						className="-me-px flex aspect-square h-[inherit] items-center justify-center rounded-e-lg border border-input bg-background text-sm text-muted-foreground/80 transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+					>
+						<Plus size={16} strokeWidth={2} aria-hidden="true" />
+					</Button>
+				</Group>
+			</div>
+		</NumberField>
+	);
 }

components/pagination.tsx

@@ -6,108 +6,108 @@ import React, { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 
 type PaginationProps = {
-  totalPages: number;
-  currentPage: number;
-  maxVisible?: number;
+	totalPages: number;
+	currentPage: number;
+	maxVisible?: number;
 };
 
 export default function Pagination({
-  totalPages,
-  currentPage,
-  maxVisible = 4,
+	totalPages,
+	currentPage,
+	maxVisible = 4,
 }: PaginationProps) {
-  const searchParams = useSearchParams();
-  const activePage = searchParams.get("page") ?? 1;
-  const router = useRouter();
+	const searchParams = useSearchParams();
+	const activePage = searchParams.get("page") ?? 1;
+	const router = useRouter();
 
-  const [queryParams, setQueryParams] = useState<{ [key: string]: string }>({});
+	const [queryParams, setQueryParams] = useState<{ [key: string]: string }>({});
 
-  useEffect(() => {
-    const params = Object.fromEntries(
-      Array.from(searchParams.entries()).filter(([key]) => key !== "page"),
-    );
-    setQueryParams(params);
-  }, [searchParams]);
+	useEffect(() => {
+		const params = Object.fromEntries(
+			Array.from(searchParams.entries()).filter(([key]) => key !== "page"),
+		);
+		setQueryParams(params);
+	}, [searchParams]);
 
-  useEffect(() => {
-    if (!searchParams.has("page")) {
-      router.replace(`?page=1${IncludeQueries()}`);
-    }
-  });
+	useEffect(() => {
+		if (!searchParams.has("page")) {
+			router.replace(`?page=1${IncludeQueries()}`);
+		}
+	});
 
-  function IncludeQueries() {
-    return Object.entries(queryParams)
-      .map(([key, value]) => `&${key}=${value}`)
-      .join("");
-  }
+	function IncludeQueries() {
+		return Object.entries(queryParams)
+			.map(([key, value]) => `&${key}=${value}`)
+			.join("");
+	}
 
-  const generatePageNumbers = (): (number | string)[] => {
-    const halfVisible = Math.floor(maxVisible / 2);
-    let startPage = Math.max(currentPage - halfVisible, 1);
-    const endPage = Math.min(startPage + maxVisible - 1, totalPages);
+	const generatePageNumbers = (): (number | string)[] => {
+		const halfVisible = Math.floor(maxVisible / 2);
+		let startPage = Math.max(currentPage - halfVisible, 1);
+		const endPage = Math.min(startPage + maxVisible - 1, totalPages);
 
-    if (endPage - startPage + 1 < maxVisible) {
-      startPage = Math.max(endPage - maxVisible + 1, 1);
-    }
+		if (endPage - startPage + 1 < maxVisible) {
+			startPage = Math.max(endPage - maxVisible + 1, 1);
+		}
 
-    const pageNumbers: (number | string)[] = [];
+		const pageNumbers: (number | string)[] = [];
 
-    if (startPage > 1) {
-      pageNumbers.push(1);
-      if (startPage > 2) pageNumbers.push("...");
-    }
+		if (startPage > 1) {
+			pageNumbers.push(1);
+			if (startPage > 2) pageNumbers.push("...");
+		}
 
-    for (let i = startPage; i <= endPage; i++) {
-      pageNumbers.push(i);
-    }
+		for (let i = startPage; i <= endPage; i++) {
+			pageNumbers.push(i);
+		}
 
-    if (endPage < totalPages) {
-      if (endPage < totalPages - 1) pageNumbers.push("...");
-      pageNumbers.push(totalPages);
-    }
+		if (endPage < totalPages) {
+			if (endPage < totalPages - 1) pageNumbers.push("...");
+			pageNumbers.push(totalPages);
+		}
 
-    return pageNumbers;
-  };
+		return pageNumbers;
+	};
 
-  const pageNumbers = generatePageNumbers();
+	const pageNumbers = generatePageNumbers();
 
-  if (totalPages <= 1) {
-    return null;
-  }
+	if (totalPages <= 1) {
+		return null;
+	}
 
-  return (
-    <div className="flex items-center justify-center space-x-2 my-4">
-      {currentPage > 1 && (
-        <Link href={`?page=${Number(currentPage) - 1}${IncludeQueries()}`}>
-          <Button variant="secondary" className="flex items-center gap-2">
-            <ArrowLeftIcon className="h-4 w-4" />
-          </Button>
-        </Link>
-      )}
+	return (
+		<div className="flex items-center justify-center space-x-2 my-4">
+			{currentPage > 1 && (
+				<Link href={`?page=${Number(currentPage) - 1}${IncludeQueries()}`}>
+					<Button variant="secondary" className="flex items-center gap-2">
+						<ArrowLeftIcon className="h-4 w-4" />
+					</Button>
+				</Link>
+			)}
 
-      {pageNumbers.map((page) => (
-        <React.Fragment key={`${page}`}>
-          {typeof page === "number" ? (
-            <Link href={`?page=${page}${IncludeQueries()}`}>
-              <Button
-                variant={Number(activePage) === page ? "default" : "outline"}
-              >
-                {page}
-              </Button>
-            </Link>
-          ) : (
-            <span className="px-2">...</span>
-          )}
-        </React.Fragment>
-      ))}
+			{pageNumbers.map((page) => (
+				<React.Fragment key={`${page}`}>
+					{typeof page === "number" ? (
+						<Link href={`?page=${page}${IncludeQueries()}`}>
+							<Button
+								variant={Number(activePage) === page ? "default" : "outline"}
+							>
+								{page}
+							</Button>
+						</Link>
+					) : (
+						<span className="px-2">...</span>
+					)}
+				</React.Fragment>
+			))}
 
-      {currentPage < totalPages && (
-        <Link href={`?page=${Number(currentPage) + 1}${IncludeQueries()}`}>
-          <Button variant="secondary" className="flex items-center gap-2">
-            <ArrowRightIcon className="h-4 w-4" />
-          </Button>
-        </Link>
-      )}
-    </div>
-  );
+			{currentPage < totalPages && (
+				<Link href={`?page=${Number(currentPage) + 1}${IncludeQueries()}`}>
+					<Button variant="secondary" className="flex items-center gap-2">
+						<ArrowRightIcon className="h-4 w-4" />
+					</Button>
+				</Link>
+			)}
+		</div>
+	);
 }

components/payments-table.tsx

@@ -3,13 +3,13 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 import { getPayments } from "@/actions/payment";
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
+	Table,
+	TableBody,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
 } from "@/components/ui/table";
 import type { Payment } from "@/lib/backend-types";
 import { cn } from "@/lib/utils";
@@ -20,265 +20,265 @@ import { Button } from "./ui/button";
 import { Separator } from "./ui/separator";
 
 export async function PaymentsTable({
-  searchParams,
+	searchParams,
 }: {
-  searchParams: Promise<{
-    [key: string]: unknown;
-  }>;
+	searchParams: Promise<{
+		[key: string]: unknown;
+	}>;
 }) {
-  const resolvedParams = await searchParams;
-  const page = Number.parseInt(resolvedParams.page as string) || 1;
-  const limit = 10;
-  const offset = (page - 1) * limit;
-  const apiParams: Record<string, string | number | undefined> = {};
-  for (const [key, value] of Object.entries(resolvedParams)) {
-    if (value !== undefined && value !== "") {
-      apiParams[key] = typeof value === "number" ? value : String(value);
-    }
-  }
-  apiParams.limit = limit;
-  apiParams.offset = offset;
-  const [error, payments] = await tryCatch(getPayments(apiParams));
+	const resolvedParams = await searchParams;
+	const page = Number.parseInt(resolvedParams.page as string) || 1;
+	const limit = 10;
+	const offset = (page - 1) * limit;
+	const apiParams: Record<string, string | number | undefined> = {};
+	for (const [key, value] of Object.entries(resolvedParams)) {
+		if (value !== undefined && value !== "") {
+			apiParams[key] = typeof value === "number" ? value : String(value);
+		}
+	}
+	apiParams.limit = limit;
+	apiParams.offset = offset;
+	const [error, payments] = await tryCatch(getPayments(apiParams));
 
-  if (error) {
-    if (error.message.includes("Unauthorized")) {
-      redirect("/auth/signin");
-    } else {
-      return <pre>{JSON.stringify(error, null, 2)}</pre>;
-    }
-  }
-  const { data, meta } = payments;
-  return (
-    <div>
-      {data?.length === 0 ? (
-        <div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
-          <h3>No Payments.</h3>
-        </div>
-      ) : (
-        <>
-          <div className="hidden sm:block">
-            <Table className="overflow-scroll">
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Details</TableHead>
-                  <TableHead>Duration</TableHead>
-                  <TableHead>Status</TableHead>
-                  <TableHead>Amount</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody className="overflow-scroll">
-                {payments?.data?.map((payment) => (
-                  <TableRow key={payment.id}>
-                    <TableCell>
-                      <div
-                        className={cn(
-                          "flex flex-col items-start border rounded p-2",
-                          payment?.paid
-                            ? "bg-green-500/10 border-dashed border-green-500"
-                            : payment?.is_expired
-                              ? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
-                              : "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
-                        )}
-                      >
-                        <div className="flex items-center gap-2">
-                          <Calendar size={16} opacity={0.5} />
-                          <span className="text-muted-foreground">
-                            {new Date(payment.created_at).toLocaleDateString(
-                              "en-US",
-                              {
-                                month: "short",
-                                day: "2-digit",
-                                year: "numeric",
-                                minute: "2-digit",
-                                hour: "2-digit",
-                                timeZone: "Indian/Maldives", // Force consistent timezone
-                              },
-                            )}
-                          </span>
-                        </div>
+	if (error) {
+		if (error.message.includes("Unauthorized")) {
+			redirect("/auth/signin");
+		} else {
+			return <pre>{JSON.stringify(error, null, 2)}</pre>;
+		}
+	}
+	const { data, meta } = payments;
+	return (
+		<div>
+			{data?.length === 0 ? (
+				<div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
+					<h3>No Payments.</h3>
+				</div>
+			) : (
+				<>
+					<div className="hidden sm:block">
+						<Table className="overflow-scroll">
+							<TableHeader>
+								<TableRow>
+									<TableHead>Details</TableHead>
+									<TableHead>Duration</TableHead>
+									<TableHead>Status</TableHead>
+									<TableHead>Amount</TableHead>
+								</TableRow>
+							</TableHeader>
+							<TableBody className="overflow-scroll">
+								{payments?.data?.map((payment) => (
+									<TableRow key={payment.id}>
+										<TableCell>
+											<div
+												className={cn(
+													"flex flex-col items-start border rounded p-2",
+													payment?.paid
+														? "bg-green-500/10 border-dashed border-green-500"
+														: payment?.is_expired
+															? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
+															: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
+												)}
+											>
+												<div className="flex items-center gap-2">
+													<Calendar size={16} opacity={0.5} />
+													<span className="text-muted-foreground">
+														{new Date(payment.created_at).toLocaleDateString(
+															"en-US",
+															{
+																month: "short",
+																day: "2-digit",
+																year: "numeric",
+																minute: "2-digit",
+																hour: "2-digit",
+																timeZone: "Indian/Maldives", // Force consistent timezone
+															},
+														)}
+													</span>
+												</div>
 
-                        <div className="flex items-center gap-2 mt-2">
-                          <Link
-                            className="font-medium hover:underline"
-                            href={`/payments/${payment.id}`}
-                          >
-                            <Button size={"sm"} variant="outline">
-                              View Details
-                            </Button>
-                          </Link>
-                        </div>
-                        <div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border">
-                          <h3 className="text-sm font-medium">Devices</h3>
-                          <ol className="list-disc list-inside text-sm">
-                            {payment.devices.map((device) => (
-                              <li
-                                key={device.id}
-                                className="text-sm text-muted-foreground"
-                              >
-                                {device.name}
-                              </li>
-                            ))}
-                          </ol>
-                        </div>
-                      </div>
-                    </TableCell>
+												<div className="flex items-center gap-2 mt-2">
+													<Link
+														className="font-medium hover:underline"
+														href={`/payments/${payment.id}`}
+													>
+														<Button size={"sm"} variant="outline">
+															View Details
+														</Button>
+													</Link>
+												</div>
+												<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border">
+													<h3 className="text-sm font-medium">Devices</h3>
+													<ol className="list-disc list-inside text-sm">
+														{payment.devices.map((device) => (
+															<li
+																key={device.id}
+																className="text-sm text-muted-foreground"
+															>
+																{device.name}
+															</li>
+														))}
+													</ol>
+												</div>
+											</div>
+										</TableCell>
 
-                    <TableCell className="font-medium">
-                      {payment.number_of_months} Months
-                    </TableCell>
-                    <TableCell>
-                      <span className="font-semibold pr-2">
-                        {payment.paid ? (
-                          <Badge
-                            className={cn(
-                              payment.status === "PENDING"
-                                ? "bg-yellow-100 text-yellow-700 dark:bg-yellow-700 dark:text-yellow-100"
-                                : "bg-green-100 dark:bg-green-700",
-                            )}
-                            variant="outline"
-                          >
-                            {payment.status}
-                          </Badge>
-                        ) : payment.is_expired ? (
-                          <Badge>Expired</Badge>
-                        ) : (
-                          <Badge variant="outline">{payment.status}</Badge>
-                        )}
-                      </span>
-                    </TableCell>
-                    <TableCell>
-                      <span className="font-semibold pr-2">
-                        {payment.amount.toFixed(2)}
-                      </span>
-                      MVR
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-              <TableFooter>
-                <TableRow>
-                  <TableCell colSpan={4} className="text-muted-foreground">
-                    {meta?.total === 1 ? (
-                      <p className="text-center">
-                        Total {meta?.total} payment.
-                      </p>
-                    ) : (
-                      <p className="text-center">
-                        Total {meta?.total} payments.
-                      </p>
-                    )}{" "}
-                  </TableCell>
-                </TableRow>
-              </TableFooter>
-            </Table>
-            <Pagination
-              totalPages={meta.last_page}
-              currentPage={meta.current_page}
-            />
-          </div>
-          <div className="sm:hidden block">
-            {data.map((payment) => (
-              <MobilePaymentDetails key={payment.id} payment={payment} />
-            ))}
-          </div>
-        </>
-      )}
-    </div>
-  );
+										<TableCell className="font-medium">
+											{payment.number_of_months} Months
+										</TableCell>
+										<TableCell>
+											<span className="font-semibold pr-2">
+												{payment.paid ? (
+													<Badge
+														className={cn(
+															payment.status === "PENDING"
+																? "bg-yellow-100 text-yellow-700 dark:bg-yellow-700 dark:text-yellow-100"
+																: "bg-green-100 dark:bg-green-700",
+														)}
+														variant="outline"
+													>
+														{payment.status}
+													</Badge>
+												) : payment.is_expired ? (
+													<Badge>Expired</Badge>
+												) : (
+													<Badge variant="outline">{payment.status}</Badge>
+												)}
+											</span>
+										</TableCell>
+										<TableCell>
+											<span className="font-semibold pr-2">
+												{payment.amount.toFixed(2)}
+											</span>
+											MVR
+										</TableCell>
+									</TableRow>
+								))}
+							</TableBody>
+							<TableFooter>
+								<TableRow>
+									<TableCell colSpan={4} className="text-muted-foreground">
+										{meta?.total === 1 ? (
+											<p className="text-center">
+												Total {meta?.total} payment.
+											</p>
+										) : (
+											<p className="text-center">
+												Total {meta?.total} payments.
+											</p>
+										)}{" "}
+									</TableCell>
+								</TableRow>
+							</TableFooter>
+						</Table>
+						<Pagination
+							totalPages={meta.last_page}
+							currentPage={meta.current_page}
+						/>
+					</div>
+					<div className="sm:hidden block">
+						{data.map((payment) => (
+							<MobilePaymentDetails key={payment.id} payment={payment} />
+						))}
+					</div>
+				</>
+			)}
+		</div>
+	);
 }
 
 export function MobilePaymentDetails({
-  payment,
-  isAdmin = false,
+	payment,
+	isAdmin = false,
 }: {
-  payment: Payment;
-  isAdmin?: boolean;
+	payment: Payment;
+	isAdmin?: boolean;
 }) {
-  return (
-    <div
-      className={cn(
-        "flex flex-col items-start border rounded p-2 my-2",
-        payment?.paid
-          ? "bg-green-500/10 border-dashed border-green-500"
-          : payment?.is_expired
-            ? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
-            : "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
-      )}
-    >
-      <div className="flex items-center gap-2">
-        <Calendar size={16} opacity={0.5} />
-        <span className="text-muted-foreground text-sm">
-          {new Date(payment.created_at).toLocaleDateString("en-US", {
-            month: "short",
-            day: "2-digit",
-            year: "numeric",
-            minute: "2-digit",
-            hour: "2-digit",
-            timeZone: "Indian/Maldives", // Force consistent timezone
-          })}
-        </span>
-      </div>
+	return (
+		<div
+			className={cn(
+				"flex flex-col items-start border rounded p-2 my-2",
+				payment?.paid
+					? "bg-green-500/10 border-dashed border-green-500"
+					: payment?.is_expired
+						? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
+						: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
+			)}
+		>
+			<div className="flex items-center gap-2">
+				<Calendar size={16} opacity={0.5} />
+				<span className="text-muted-foreground text-sm">
+					{new Date(payment.created_at).toLocaleDateString("en-US", {
+						month: "short",
+						day: "2-digit",
+						year: "numeric",
+						minute: "2-digit",
+						hour: "2-digit",
+						timeZone: "Indian/Maldives", // Force consistent timezone
+					})}
+				</span>
+			</div>
 
-      <div className="flex items-center gap-2 mt-2">
-        <Link
-          className="font-medium hover:underline"
-          href={`/payments/${payment.id}`}
-        >
-          <Button size={"sm"} variant="outline">
-            View Details
-          </Button>
-        </Link>
-      </div>
-      <div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border">
-        <h3 className="text-sm font-medium">Devices</h3>
-        <ol className="list-disc list-inside text-sm">
-          {payment.devices.map((device) => (
-            <li key={device.id} className="text-sm text-muted-foreground">
-              {device.name}
-            </li>
-          ))}
-        </ol>
-        <div className="block sm:hidden">
-          <Separator className="my-2" />
-          <h3 className="text-sm font-medium">Duration</h3>
-          <span className="text-sm text-muted-foreground">
-            {payment.number_of_months} Months
-          </span>
-          <Separator className="my-2" />
-          <h3 className="text-sm font-medium">Amount</h3>
-          <div className="flex items-center justify-between">
-            <span className="text-sm text-muted-foreground">
-              {payment.amount.toFixed(2)} MVR
-            </span>
-            <span className="font-semibold pr-2">
-              {payment.paid ? (
-                <Badge
-                  className={cn(
-                    payment.status === "PENDING"
-                      ? "bg-yellow-100 text-yellow-700 dark:bg-yellow-700 dark:text-yellow-100"
-                      : "bg-green-100 dark:bg-green-700",
-                  )}
-                  variant="outline"
-                >
-                  {payment.status}
-                </Badge>
-              ) : payment.is_expired ? (
-                <Badge>Expired</Badge>
-              ) : (
-                <Badge variant="secondary">{payment.status}</Badge>
-              )}
-            </span>
-            {isAdmin && (
-              <div className="my-2 text-primary flex flex-col items-start text-sm border rounded p-2 mt-2 w-full bg-white dark:bg-black">
-                {payment?.user?.name}
-                <span className="text-muted-foreground">
-                  {payment?.user?.id_card}
-                </span>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-2 mt-2">
+				<Link
+					className="font-medium hover:underline"
+					href={`/payments/${payment.id}`}
+				>
+					<Button size={"sm"} variant="outline">
+						View Details
+					</Button>
+				</Link>
+			</div>
+			<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border">
+				<h3 className="text-sm font-medium">Devices</h3>
+				<ol className="list-disc list-inside text-sm">
+					{payment.devices.map((device) => (
+						<li key={device.id} className="text-sm text-muted-foreground">
+							{device.name}
+						</li>
+					))}
+				</ol>
+				<div className="block sm:hidden">
+					<Separator className="my-2" />
+					<h3 className="text-sm font-medium">Duration</h3>
+					<span className="text-sm text-muted-foreground">
+						{payment.number_of_months} Months
+					</span>
+					<Separator className="my-2" />
+					<h3 className="text-sm font-medium">Amount</h3>
+					<div className="flex items-center justify-between">
+						<span className="text-sm text-muted-foreground">
+							{payment.amount.toFixed(2)} MVR
+						</span>
+						<span className="font-semibold pr-2">
+							{payment.paid ? (
+								<Badge
+									className={cn(
+										payment.status === "PENDING"
+											? "bg-yellow-100 text-yellow-700 dark:bg-yellow-700 dark:text-yellow-100"
+											: "bg-green-100 dark:bg-green-700",
+									)}
+									variant="outline"
+								>
+									{payment.status}
+								</Badge>
+							) : payment.is_expired ? (
+								<Badge>Expired</Badge>
+							) : (
+								<Badge variant="secondary">{payment.status}</Badge>
+							)}
+						</span>
+						{isAdmin && (
+							<div className="my-2 text-primary flex flex-col items-start text-sm border rounded p-2 mt-2 w-full bg-white dark:bg-black">
+								{payment?.user?.name}
+								<span className="text-muted-foreground">
+									{payment?.user?.id_card}
+								</span>
+							</div>
+						)}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
 }

components/theme-toggle.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import { Moon, Sun } from "lucide-react";
+import { MonitorIcon, Moon, MoonIcon, Sun, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
-import * as React from "react";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -25,14 +24,26 @@ export function ModeToggle() {
 				</Button>
 			</DropdownMenuTrigger>
 			<DropdownMenuContent align="end">
-				<DropdownMenuItem onClick={() => setTheme("light")}>
+				<DropdownMenuItem
+					className="flex justify-between items-center"
+					onClick={() => setTheme("light")}
+				>
 					Light
+					<SunIcon className="ml-2 h-4 w-4" />
 				</DropdownMenuItem>
-				<DropdownMenuItem onClick={() => setTheme("dark")}>
+				<DropdownMenuItem
+					className="flex justify-between items-center"
+					onClick={() => setTheme("dark")}
+				>
 					Dark
+					<MoonIcon className="ml-2 h-4 w-4" />
 				</DropdownMenuItem>
-				<DropdownMenuItem onClick={() => setTheme("system")}>
+				<DropdownMenuItem
+					className="flex justify-between items-center"
+					onClick={() => setTheme("system")}
+				>
 					System
+					<MonitorIcon className="ml-2 h-4 w-4" />
 				</DropdownMenuItem>
 			</DropdownMenuContent>
 		</DropdownMenu>

components/topup-to-pay.tsx

@@ -3,155 +3,155 @@ import { BadgeDollarSign, Loader2 } from "lucide-react";
 import { useActionState, useEffect } from "react";
 import { toast } from "sonner";
 import {
-  type VerifyTopupPaymentState,
-  verifyTopupPayment,
+	type VerifyTopupPaymentState,
+	verifyTopupPayment,
 } from "@/actions/payment";
 import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableFooter,
-  TableRow,
+	Table,
+	TableBody,
+	TableCaption,
+	TableCell,
+	TableFooter,
+	TableRow,
 } from "@/components/ui/table";
 import type { Topup } from "@/lib/backend-types";
 import { AccountInfomation } from "./account-information";
 import { Button } from "./ui/button";
 
 const initialState: VerifyTopupPaymentState = {
-  message: "",
-  success: false,
-  fieldErrors: {},
+	message: "",
+	success: false,
+	fieldErrors: {},
 };
 export default function TopupToPay({
-  topup,
-  disabled,
+	topup,
+	disabled,
 }: {
-  topup?: Topup;
-  disabled?: boolean;
+	topup?: Topup;
+	disabled?: boolean;
 }) {
-  const [state, formAction, isPending] = useActionState(
-    verifyTopupPayment,
-    initialState,
-  );
+	const [state, formAction, isPending] = useActionState(
+		verifyTopupPayment,
+		initialState,
+	);
 
-  // Handle toast notifications based on state changes
-  useEffect(() => {
-    if (state.success && state.message) {
-      toast.success("Topup successful!", {
-        closeButton: true,
-        description: state.transaction
-          ? `Your topup payment has been verified successfully using ${state.transaction.sourceBank} bank transfer on ${state.transaction.trxDate}.`
-          : state.message,
-      });
-    } else if (
-      !state.success &&
-      state.message &&
-      state.message !== initialState.message
-    ) {
-      toast.error("Topup Payment Verification Failed", {
-        closeButton: true,
-        description: state.message,
-      });
-    }
-  }, [state]);
+	// Handle toast notifications based on state changes
+	useEffect(() => {
+		if (state.success && state.message) {
+			toast.success("Topup successful!", {
+				closeButton: true,
+				description: state.transaction
+					? `Your topup payment has been verified successfully using ${state.transaction.sourceBank} bank transfer on ${state.transaction.trxDate}.`
+					: state.message,
+			});
+		} else if (
+			!state.success &&
+			state.message &&
+			state.message !== initialState.message
+		) {
+			toast.error("Topup Payment Verification Failed", {
+				closeButton: true,
+				description: state.message,
+			});
+		}
+	}, [state]);
 
-  return (
-    <div className="w-full">
-      <div className="m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded">
-        <Table>
-          <TableCaption>
-            {(!topup?.paid ||
-              !topup?.is_expired ||
-              topup?.status !== "CANCELLED") && (
-              <div className="max-w-sm mx-auto">
-                <p>Please send the following amount to the payment address</p>
-                <AccountInfomation
-                  accName="Baraveli Dev"
-                  accountNo="90101400028321000"
-                />
-                {topup?.paid ? (
-                  <Button
-                    size={"lg"}
-                    variant={"secondary"}
-                    disabled
-                    className="dark:text-green-200 text-green-900 bg-green-500/20 uppercase font-semibold"
-                  >
-                    Topup Payment Verified
-                  </Button>
-                ) : (
-                  <div className="flex flex-col gap-2">
-                    <form action={formAction}>
-                      <input
-                        type="hidden"
-                        name="topupId"
-                        value={topup?.id ?? ""}
-                      />
-                      <Button
-                        disabled={disabled || isPending}
-                        type="submit"
-                        size={"lg"}
-                        className="mb-4 w-full"
-                      >
-                        {isPending ? "Processing payment..." : "I have paid"}
-                        {isPending ? (
-                          <Loader2 className="animate-spin" />
-                        ) : (
-                          <BadgeDollarSign />
-                        )}
-                      </Button>
-                    </form>
-                  </div>
-                )}
-              </div>
-            )}
-          </TableCaption>
-          <TableBody className="">
-            <TableRow>
-              <TableCell>Topup created</TableCell>
-              <TableCell className="text-right text-muted-foreground">
-                {new Date(topup?.created_at ?? "").toLocaleDateString("en-US", {
-                  month: "short",
-                  day: "2-digit",
-                  year: "numeric",
-                  minute: "2-digit",
-                  hour: "2-digit",
-                  second: "2-digit",
-                })}
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>Payment received</TableCell>
-              <TableCell className="text-right text-sarLinkOrange">
-                {topup?.paid_at
-                  ? new Date(topup.paid_at).toLocaleDateString("en-US", {
-                      month: "short",
-                      day: "2-digit",
-                      year: "numeric",
-                      minute: "2-digit",
-                      hour: "2-digit",
-                      second: "2-digit",
-                    })
-                  : "-"}
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>MIB Reference</TableCell>
-              <TableCell className="text-right">
-                {topup?.mib_reference ? topup.mib_reference : "-"}
-              </TableCell>
-            </TableRow>
-          </TableBody>
-          <TableFooter>
-            <TableRow className="">
-              <TableCell colSpan={1}>Total Due</TableCell>
-              <TableCell className="text-right text-3xl font-bold">
-                {topup?.amount?.toFixed(2)}
-              </TableCell>
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </div>
-    </div>
-  );
+	return (
+		<div className="w-full">
+			<div className="m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded">
+				<Table>
+					<TableCaption>
+						{(!topup?.paid ||
+							!topup?.is_expired ||
+							topup?.status !== "CANCELLED") && (
+							<div className="max-w-sm mx-auto">
+								<p>Please send the following amount to the payment address</p>
+								<AccountInfomation
+									accName="Baraveli Dev"
+									accountNo="90101400028321000"
+								/>
+								{topup?.paid ? (
+									<Button
+										size={"lg"}
+										variant={"secondary"}
+										disabled
+										className="dark:text-green-200 text-green-900 bg-green-500/20 uppercase font-semibold"
+									>
+										Topup Payment Verified
+									</Button>
+								) : (
+									<div className="flex flex-col gap-2">
+										<form action={formAction}>
+											<input
+												type="hidden"
+												name="topupId"
+												value={topup?.id ?? ""}
+											/>
+											<Button
+												disabled={disabled || isPending}
+												type="submit"
+												size={"lg"}
+												className="mb-4 w-full"
+											>
+												{isPending ? "Processing payment..." : "I have paid"}
+												{isPending ? (
+													<Loader2 className="animate-spin" />
+												) : (
+													<BadgeDollarSign />
+												)}
+											</Button>
+										</form>
+									</div>
+								)}
+							</div>
+						)}
+					</TableCaption>
+					<TableBody className="">
+						<TableRow>
+							<TableCell>Topup created</TableCell>
+							<TableCell className="text-right text-muted-foreground">
+								{new Date(topup?.created_at ?? "").toLocaleDateString("en-US", {
+									month: "short",
+									day: "2-digit",
+									year: "numeric",
+									minute: "2-digit",
+									hour: "2-digit",
+									second: "2-digit",
+								})}
+							</TableCell>
+						</TableRow>
+						<TableRow>
+							<TableCell>Payment received</TableCell>
+							<TableCell className="text-right text-sarLinkOrange">
+								{topup?.paid_at
+									? new Date(topup.paid_at).toLocaleDateString("en-US", {
+											month: "short",
+											day: "2-digit",
+											year: "numeric",
+											minute: "2-digit",
+											hour: "2-digit",
+											second: "2-digit",
+										})
+									: "-"}
+							</TableCell>
+						</TableRow>
+						<TableRow>
+							<TableCell>MIB Reference</TableCell>
+							<TableCell className="text-right">
+								{topup?.mib_reference ? topup.mib_reference : "-"}
+							</TableCell>
+						</TableRow>
+					</TableBody>
+					<TableFooter>
+						<TableRow className="">
+							<TableCell colSpan={1}>Total Due</TableCell>
+							<TableCell className="text-right text-3xl font-bold">
+								{topup?.amount?.toFixed(2)}
+							</TableCell>
+						</TableRow>
+					</TableFooter>
+				</Table>
+			</div>
+		</div>
+	);
 }

components/topups-table.tsx

@@ -3,13 +3,13 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 import { getTopups } from "@/actions/payment";
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
+	Table,
+	TableBody,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
 } from "@/components/ui/table";
 import type { Topup } from "@/lib/backend-types";
 import { cn } from "@/lib/utils";
@@ -19,199 +19,199 @@ import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
 
 export async function TopupsTable({
-  searchParams,
+	searchParams,
 }: {
-  searchParams: Promise<{
-    [key: string]: unknown;
-  }>;
+	searchParams: Promise<{
+		[key: string]: unknown;
+	}>;
 }) {
-  const resolvedParams = await searchParams;
-  const page = Number.parseInt(resolvedParams.page as string) || 1;
-  const limit = 10;
-  const offset = (page - 1) * limit;
-  // Build params object
-  const apiParams: Record<string, string | number | undefined> = {};
-  for (const [key, value] of Object.entries(resolvedParams)) {
-    if (value !== undefined && value !== "") {
-      apiParams[key] = typeof value === "number" ? value : String(value);
-    }
-  }
-  apiParams.limit = limit;
-  apiParams.offset = offset;
-  const [error, topups] = await tryCatch(getTopups(apiParams));
+	const resolvedParams = await searchParams;
+	const page = Number.parseInt(resolvedParams.page as string) || 1;
+	const limit = 10;
+	const offset = (page - 1) * limit;
+	// Build params object
+	const apiParams: Record<string, string | number | undefined> = {};
+	for (const [key, value] of Object.entries(resolvedParams)) {
+		if (value !== undefined && value !== "") {
+			apiParams[key] = typeof value === "number" ? value : String(value);
+		}
+	}
+	apiParams.limit = limit;
+	apiParams.offset = offset;
+	const [error, topups] = await tryCatch(getTopups(apiParams));
 
-  if (error) {
-    if (error.message.includes("Unauthorized")) {
-      redirect("/auth/signin");
-    } else {
-      return <pre>{JSON.stringify(error, null, 2)}</pre>;
-    }
-  }
-  const { data, meta } = topups;
-  return (
-    <div>
-      {data?.length === 0 ? (
-        <div className="h-[calc(100svh-400px)] flex text-muted-foreground flex-col items-center justify-center my-4">
-          <h3>No topups.</h3>
-        </div>
-      ) : (
-        <>
-          <div className="hidden sm:block">
-            <Table className="overflow-scroll">
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Details</TableHead>
-                  <TableHead>Status</TableHead>
-                  <TableHead>Amount</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody className="overflow-scroll">
-                {topups?.data?.map((topup) => (
-                  <TableRow key={topup.id}>
-                    <TableCell>
-                      <div
-                        className={cn(
-                          "flex flex-col items-start border rounded p-2",
-                          topup?.paid
-                            ? "bg-green-500/10 border-dashed border-green-500"
-                            : topup?.is_expired
-                              ? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
-                              : "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
-                        )}
-                      >
-                        <div className="flex items-center gap-2">
-                          <Calendar size={16} opacity={0.5} />
-                          <span className="text-muted-foreground">
-                            {new Date(topup.created_at).toLocaleDateString(
-                              "en-US",
-                              {
-                                month: "short",
-                                day: "2-digit",
-                                year: "numeric",
-                                minute: "2-digit",
-                                hour: "2-digit",
-                              },
-                            )}
-                          </span>
-                        </div>
+	if (error) {
+		if (error.message.includes("Unauthorized")) {
+			redirect("/auth/signin");
+		} else {
+			return <pre>{JSON.stringify(error, null, 2)}</pre>;
+		}
+	}
+	const { data, meta } = topups;
+	return (
+		<div>
+			{data?.length === 0 ? (
+				<div className="h-[calc(100svh-400px)] flex text-muted-foreground flex-col items-center justify-center my-4">
+					<h3>No topups.</h3>
+				</div>
+			) : (
+				<>
+					<div className="hidden sm:block">
+						<Table className="overflow-scroll">
+							<TableHeader>
+								<TableRow>
+									<TableHead>Details</TableHead>
+									<TableHead>Status</TableHead>
+									<TableHead>Amount</TableHead>
+								</TableRow>
+							</TableHeader>
+							<TableBody className="overflow-scroll">
+								{topups?.data?.map((topup) => (
+									<TableRow key={topup.id}>
+										<TableCell>
+											<div
+												className={cn(
+													"flex flex-col items-start border rounded p-2",
+													topup?.paid
+														? "bg-green-500/10 border-dashed border-green-500"
+														: topup?.is_expired
+															? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
+															: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
+												)}
+											>
+												<div className="flex items-center gap-2">
+													<Calendar size={16} opacity={0.5} />
+													<span className="text-muted-foreground">
+														{new Date(topup.created_at).toLocaleDateString(
+															"en-US",
+															{
+																month: "short",
+																day: "2-digit",
+																year: "numeric",
+																minute: "2-digit",
+																hour: "2-digit",
+															},
+														)}
+													</span>
+												</div>
 
-                        <div className="flex items-center gap-2 mt-2">
-                          <Link
-                            className="font-medium hover:underline"
-                            href={`/top-ups/${topup.id}`}
-                          >
-                            <Button size={"sm"} variant="outline">
-                              View Details
-                            </Button>
-                          </Link>
-                        </div>
-                      </div>
-                    </TableCell>
+												<div className="flex items-center gap-2 mt-2">
+													<Link
+														className="font-medium hover:underline"
+														href={`/top-ups/${topup.id}`}
+													>
+														<Button size={"sm"} variant="outline">
+															View Details
+														</Button>
+													</Link>
+												</div>
+											</div>
+										</TableCell>
 
-                    <TableCell>
-                      <span className="font-semibold pr-2">
-                        {topup.paid ? (
-                          <Badge
-                            className="bg-green-100 dark:bg-green-700"
-                            variant="outline"
-                          >
-                            {topup.status}
-                          </Badge>
-                        ) : topup.is_expired ? (
-                          <Badge>Expired</Badge>
-                        ) : (
-                          <Badge variant="outline">{topup.status}</Badge>
-                        )}
-                      </span>
-                    </TableCell>
-                    <TableCell>
-                      <span className="font-semibold pr-2">
-                        {topup.amount.toFixed(2)}
-                      </span>
-                      MVR
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-              <TableFooter>
-                <TableRow>
-                  <TableCell colSpan={4} className="text-muted-foreground">
-                    {meta?.total === 1 ? (
-                      <p className="text-center">Total {meta?.total} topup.</p>
-                    ) : (
-                      <p className="text-center">Total {meta?.total} topups.</p>
-                    )}
-                  </TableCell>
-                </TableRow>
-              </TableFooter>
-            </Table>
-          </div>
-          <div className="sm:hidden block">
-            {data.map((topup) => (
-              <MobileTopupDetails key={topup.id} topup={topup} />
-            ))}
-          </div>
-          <Pagination
-            totalPages={meta?.last_page}
-            currentPage={meta?.current_page}
-          />
-        </>
-      )}
-    </div>
-  );
+										<TableCell>
+											<span className="font-semibold pr-2">
+												{topup.paid ? (
+													<Badge
+														className="bg-green-100 dark:bg-green-700"
+														variant="outline"
+													>
+														{topup.status}
+													</Badge>
+												) : topup.is_expired ? (
+													<Badge>Expired</Badge>
+												) : (
+													<Badge variant="outline">{topup.status}</Badge>
+												)}
+											</span>
+										</TableCell>
+										<TableCell>
+											<span className="font-semibold pr-2">
+												{topup.amount.toFixed(2)}
+											</span>
+											MVR
+										</TableCell>
+									</TableRow>
+								))}
+							</TableBody>
+							<TableFooter>
+								<TableRow>
+									<TableCell colSpan={4} className="text-muted-foreground">
+										{meta?.total === 1 ? (
+											<p className="text-center">Total {meta?.total} topup.</p>
+										) : (
+											<p className="text-center">Total {meta?.total} topups.</p>
+										)}
+									</TableCell>
+								</TableRow>
+							</TableFooter>
+						</Table>
+					</div>
+					<div className="sm:hidden block">
+						{data.map((topup) => (
+							<MobileTopupDetails key={topup.id} topup={topup} />
+						))}
+					</div>
+					<Pagination
+						totalPages={meta?.last_page}
+						currentPage={meta?.current_page}
+					/>
+				</>
+			)}
+		</div>
+	);
 }
 
 function MobileTopupDetails({ topup }: { topup: Topup }) {
-  return (
-    <div
-      className={cn(
-        "flex flex-col items-start border rounded p-2 my-2",
-        topup?.paid
-          ? "bg-green-500/10 border-dashed border-green=500"
-          : "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
-      )}
-    >
-      <div className="flex items-center gap-2">
-        <Calendar size={16} opacity={0.5} />
-        <span className="text-muted-foreground text-sm">
-          {new Date(topup.created_at).toLocaleDateString("en-US", {
-            month: "short",
-            day: "2-digit",
-            year: "numeric",
-          })}
-        </span>
-      </div>
+	return (
+		<div
+			className={cn(
+				"flex flex-col items-start border rounded p-2 my-2",
+				topup?.paid
+					? "bg-green-500/10 border-dashed border-green=500"
+					: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
+			)}
+		>
+			<div className="flex items-center gap-2">
+				<Calendar size={16} opacity={0.5} />
+				<span className="text-muted-foreground text-sm">
+					{new Date(topup.created_at).toLocaleDateString("en-US", {
+						month: "short",
+						day: "2-digit",
+						year: "numeric",
+					})}
+				</span>
+			</div>
 
-      <div className="flex items-center gap-2 mt-2">
-        <Link
-          className="font-medium hover:underline"
-          href={`/top-ups/${topup.id}`}
-        >
-          <Button size={"sm"} variant="outline">
-            View Details
-          </Button>
-        </Link>
-      </div>
+			<div className="flex items-center gap-2 mt-2">
+				<Link
+					className="font-medium hover:underline"
+					href={`/top-ups/${topup.id}`}
+				>
+					<Button size={"sm"} variant="outline">
+						View Details
+					</Button>
+				</Link>
+			</div>
 
-      <div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border flex justify-between items-center">
-        <div className="block sm:hidden">
-          <h3 className="text-sm font-medium">Amount</h3>
-          <span className="text-sm text-muted-foreground">
-            {topup.amount.toFixed(2)} MVR
-          </span>
-        </div>
-        <span className="font-semibold pr-2">
-          {topup.paid ? (
-            <Badge className="bg-green-100 dark:bg-green-700" variant="outline">
-              {topup.status}
-            </Badge>
-          ) : topup.is_expired ? (
-            <Badge>Expired</Badge>
-          ) : (
-            <Badge variant="secondary">{topup.status}</Badge>
-          )}
-        </span>
-      </div>
-    </div>
-  );
+			<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border flex justify-between items-center">
+				<div className="block sm:hidden">
+					<h3 className="text-sm font-medium">Amount</h3>
+					<span className="text-sm text-muted-foreground">
+						{topup.amount.toFixed(2)} MVR
+					</span>
+				</div>
+				<span className="font-semibold pr-2">
+					{topup.paid ? (
+						<Badge className="bg-green-100 dark:bg-green-700" variant="outline">
+							{topup.status}
+						</Badge>
+					) : topup.is_expired ? (
+						<Badge>Expired</Badge>
+					) : (
+						<Badge variant="secondary">{topup.status}</Badge>
+					)}
+				</span>
+			</div>
+		</div>
+	);
 }

components/ui/app-sidebar.tsx

@@ -1,226 +1,226 @@
 import {
-  BadgePlus,
-  Calculator,
-  ChevronRight,
-  Coins,
-  CreditCard,
-  Handshake,
-  MonitorSpeaker,
-  Smartphone,
-  UsersRound,
-  Wallet2Icon,
+	BadgePlus,
+	Calculator,
+	ChevronRight,
+	Coins,
+	CreditCard,
+	Handshake,
+	MonitorSpeaker,
+	Smartphone,
+	UsersRound,
+	Wallet2Icon,
 } from "lucide-react";
 import Link from "next/link";
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/app/auth";
 import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
 } from "@/components/ui/collapsible";
 import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarRail,
+	Sidebar,
+	SidebarContent,
+	SidebarGroup,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarHeader,
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarRail,
 } from "@/components/ui/sidebar";
 
 type Permission = {
-  id: number;
-  name: string;
+	id: number;
+	name: string;
 };
 
 type Categories = {
-  id: string;
-  children: (
-    | {
-        title: string;
-        link: string;
-        perm_identifier: string;
-        icon: React.JSX.Element;
-      }
-    | {
-        title: string;
-        link: string;
-        icon: React.JSX.Element;
-        perm_identifier?: undefined;
-      }
-  )[];
+	id: string;
+	children: (
+		| {
+				title: string;
+				link: string;
+				perm_identifier: string;
+				icon: React.JSX.Element;
+		  }
+		| {
+				title: string;
+				link: string;
+				icon: React.JSX.Element;
+				perm_identifier?: undefined;
+		  }
+	)[];
 }[];
 
 export async function AppSidebar({
-  ...props
+	...props
 }: React.ComponentProps<typeof Sidebar>) {
-  const categories = [
-    {
-      id: "MENU",
-      url: "#",
-      children: [
-        {
-          title: "Devices",
-          link: "/devices?page=1",
-          perm_identifier: "device",
-          icon: <Smartphone size={16} />,
-        },
-        {
-          title: "Parental Control",
-          link: "/parental-control?page=1",
-          icon: <CreditCard size={16} />,
-          perm_identifier: "device",
-        },
-        {
-          title: "Subscriptions",
-          link: "/payments?page=1",
-          icon: <CreditCard size={16} />,
-          perm_identifier: "payment",
-        },
-        {
-          title: "Top Ups",
-          link: "/top-ups?page=1",
-          icon: <BadgePlus size={16} />,
-          perm_identifier: "topup",
-        },
-        {
-          title: "Transaction History",
-          link: "/wallet",
-          icon: <Wallet2Icon size={16} />,
-          perm_identifier: "wallet transaction",
-        },
-        {
-          title: "Agreements",
-          link: "/agreements",
-          icon: <Handshake size={16} />,
-          perm_identifier: "device",
-        },
-      ],
-    },
-    {
-      id: "ADMIN CONTROL",
-      url: "#",
-      children: [
-        {
-          title: "Users",
-          link: "/users",
-          icon: <UsersRound size={16} />,
-          perm_identifier: "device",
-        },
-        {
-          title: "User Devices",
-          link: "/user-devices",
-          icon: <MonitorSpeaker size={16} />,
-          perm_identifier: "device",
-        },
-        {
-          title: "User Payments",
-          link: "/user-payments",
-          icon: <Coins size={16} />,
-          perm_identifier: "payment",
-        },
-        {
-          title: "User Topups",
-          link: "/user-topups",
-          icon: <Coins size={16} />,
-          perm_identifier: "topup",
-        },
-        {
-          title: "Price Calculator",
-          link: "/price-calculator",
-          icon: <Calculator size={16} />,
-          perm_identifier: "device",
-        },
-      ],
-    },
-  ];
+	const categories = [
+		{
+			id: "MENU",
+			url: "#",
+			children: [
+				{
+					title: "Devices",
+					link: "/devices?page=1",
+					perm_identifier: "device",
+					icon: <Smartphone size={16} />,
+				},
+				{
+					title: "Parental Control",
+					link: "/parental-control?page=1",
+					icon: <CreditCard size={16} />,
+					perm_identifier: "device",
+				},
+				{
+					title: "Subscriptions",
+					link: "/payments?page=1",
+					icon: <CreditCard size={16} />,
+					perm_identifier: "payment",
+				},
+				{
+					title: "Top Ups",
+					link: "/top-ups?page=1",
+					icon: <BadgePlus size={16} />,
+					perm_identifier: "topup",
+				},
+				{
+					title: "Transaction History",
+					link: "/wallet",
+					icon: <Wallet2Icon size={16} />,
+					perm_identifier: "wallet transaction",
+				},
+				{
+					title: "Agreements",
+					link: "/agreements",
+					icon: <Handshake size={16} />,
+					perm_identifier: "device",
+				},
+			],
+		},
+		{
+			id: "ADMIN CONTROL",
+			url: "#",
+			children: [
+				{
+					title: "Users",
+					link: "/users",
+					icon: <UsersRound size={16} />,
+					perm_identifier: "device",
+				},
+				{
+					title: "User Devices",
+					link: "/user-devices",
+					icon: <MonitorSpeaker size={16} />,
+					perm_identifier: "device",
+				},
+				{
+					title: "User Payments",
+					link: "/user-payments",
+					icon: <Coins size={16} />,
+					perm_identifier: "payment",
+				},
+				{
+					title: "User Topups",
+					link: "/user-topups",
+					icon: <Coins size={16} />,
+					perm_identifier: "topup",
+				},
+				{
+					title: "Price Calculator",
+					link: "/price-calculator",
+					icon: <Calculator size={16} />,
+					perm_identifier: "device",
+				},
+			],
+		},
+	];
 
-  const session = await getServerSession(authOptions);
+	const session = await getServerSession(authOptions);
 
-  let CATEGORIES: Categories;
-  if (session?.user?.is_admin) {
-    CATEGORIES = categories;
-  } else {
-    // Filter out ADMIN CONTROL category for non-admin users
-    const nonAdminCategories = categories.filter(
-      (category) => category.id !== "ADMIN CONTROL",
-    );
+	let CATEGORIES: Categories;
+	if (session?.user?.is_admin) {
+		CATEGORIES = categories;
+	} else {
+		// Filter out ADMIN CONTROL category for non-admin users
+		const nonAdminCategories = categories.filter(
+			(category) => category.id !== "ADMIN CONTROL",
+		);
 
-    const filteredCategories = nonAdminCategories.map((category) => {
-      const filteredChildren = category.children.filter((child) => {
-        const permIdentifier = child.perm_identifier;
-        return session?.user?.user_permissions?.some(
-          (permission: Permission) => {
-            const permissionParts = permission.name.split(" ");
-            const modelNameFromPermission = permissionParts.slice(2).join(" ");
-            return modelNameFromPermission === permIdentifier;
-          },
-        );
-      });
+		const filteredCategories = nonAdminCategories.map((category) => {
+			const filteredChildren = category.children.filter((child) => {
+				const permIdentifier = child.perm_identifier;
+				return session?.user?.user_permissions?.some(
+					(permission: Permission) => {
+						const permissionParts = permission.name.split(" ");
+						const modelNameFromPermission = permissionParts.slice(2).join(" ");
+						return modelNameFromPermission === permIdentifier;
+					},
+				);
+			});
 
-      return { ...category, children: filteredChildren };
-    });
+			return { ...category, children: filteredChildren };
+		});
 
-    CATEGORIES = filteredCategories.filter(
-      (category) => category.children.length > 0,
-    );
-  }
+		CATEGORIES = filteredCategories.filter(
+			(category) => category.children.length > 0,
+		);
+	}
 
-  return (
-    <Sidebar {...props} className="z-50">
-      <SidebarHeader>
-        <h4 className="p-2 rounded title-bg border text-center uppercase ">
-          Sar Link Portal
-        </h4>
-      </SidebarHeader>
-      <SidebarContent className="gap-0">
-        {CATEGORIES.map((item) => {
-          return (
-            <Collapsible
-              key={item.id}
-              title={item.id}
-              defaultOpen
-              className="group/collapsible"
-            >
-              <SidebarGroup>
-                <SidebarGroupLabel
-                  asChild
-                  className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
-                >
-                  <CollapsibleTrigger>
-                    {item.id}{" "}
-                    <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
-                  </CollapsibleTrigger>
-                </SidebarGroupLabel>
-                <CollapsibleContent>
-                  <SidebarGroupContent>
-                    <SidebarMenu>
-                      {item.children.map((item) => (
-                        <SidebarMenuItem key={item.title}>
-                          <SidebarMenuButton className="py-6" asChild>
-                            <Link className="text-md" href={item.link}>
-                              {item.icon}
-                              <span
-                                className={`opacity-70 motion-preset-slide-left-md ml-2`}
-                              >
-                                {item.title}
-                              </span>
-                            </Link>
-                          </SidebarMenuButton>
-                        </SidebarMenuItem>
-                      ))}
-                    </SidebarMenu>
-                  </SidebarGroupContent>
-                </CollapsibleContent>
-              </SidebarGroup>
-            </Collapsible>
-          );
-        })}
-      </SidebarContent>
-      <SidebarRail />
-    </Sidebar>
-  );
+	return (
+		<Sidebar {...props} className="z-50">
+			<SidebarHeader>
+				<h4 className="p-2 rounded title-bg border text-center uppercase ">
+					Sar Link Portal
+				</h4>
+			</SidebarHeader>
+			<SidebarContent className="gap-0">
+				{CATEGORIES.map((item) => {
+					return (
+						<Collapsible
+							key={item.id}
+							title={item.id}
+							defaultOpen
+							className="group/collapsible"
+						>
+							<SidebarGroup>
+								<SidebarGroupLabel
+									asChild
+									className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+								>
+									<CollapsibleTrigger>
+										{item.id}{" "}
+										<ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+									</CollapsibleTrigger>
+								</SidebarGroupLabel>
+								<CollapsibleContent>
+									<SidebarGroupContent>
+										<SidebarMenu>
+											{item.children.map((item) => (
+												<SidebarMenuItem key={item.title}>
+													<SidebarMenuButton className="py-6" asChild>
+														<Link className="text-md" href={item.link}>
+															{item.icon}
+															<span
+																className={`opacity-70 motion-preset-slide-left-md ml-2`}
+															>
+																{item.title}
+															</span>
+														</Link>
+													</SidebarMenuButton>
+												</SidebarMenuItem>
+											))}
+										</SidebarMenu>
+									</SidebarGroupContent>
+								</CollapsibleContent>
+							</SidebarGroup>
+						</Collapsible>
+					);
+				})}
+			</SidebarContent>
+			<SidebarRail />
+		</Sidebar>
+	);
 }

components/ui/sheet.tsx

@@ -51,7 +51,7 @@ const sheetVariants = cva(
 
 interface SheetContentProps
 	extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-	VariantProps<typeof sheetVariants> { }
+		VariantProps<typeof sheetVariants> {}
 
 const SheetContent = React.forwardRef<
 	React.ElementRef<typeof SheetPrimitive.Content>,

components/ui/sidebar.tsx

@@ -631,7 +631,7 @@ const SidebarMenuAction = React.forwardRef<
 				"peer-data-[size=lg]/menu-button:top-2.5",
 				"group-data-[collapsible=icon]:hidden",
 				showOnHover &&
-				"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+					"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
 				className,
 			)}
 			{...props}

components/user-table.tsx

@@ -7,134 +7,134 @@ import Pagination from "./pagination";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
+	Table,
+	TableBody,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
 } from "./ui/table";
 
 export async function UsersTable({
-  searchParams,
+	searchParams,
 }: {
-  searchParams: Promise<{
-    [key: string]: unknown;
-  }>;
+	searchParams: Promise<{
+		[key: string]: unknown;
+	}>;
 }) {
-  const resolvedParams = await searchParams;
+	const resolvedParams = await searchParams;
 
-  const page = Number.parseInt(resolvedParams.page as string) || 1;
-  const limit = 10;
-  const offset = (page - 1) * limit;
-  const apiParams: Record<string, string | number | undefined> = {};
-  for (const [key, value] of Object.entries(resolvedParams)) {
-    if (value !== undefined && value !== "") {
-      apiParams[key] = typeof value === "number" ? value : String(value);
-    }
-  }
+	const page = Number.parseInt(resolvedParams.page as string) || 1;
+	const limit = 10;
+	const offset = (page - 1) * limit;
+	const apiParams: Record<string, string | number | undefined> = {};
+	for (const [key, value] of Object.entries(resolvedParams)) {
+		if (value !== undefined && value !== "") {
+			apiParams[key] = typeof value === "number" ? value : String(value);
+		}
+	}
 
-  apiParams.limit = limit;
-  apiParams.offset = offset;
-  const [error, users] = await tryCatch(getUsers(apiParams));
-  if (error) {
-    if (error.message === "UNAUTHORIZED") {
-      redirect("/auth/signin");
-    }
-    return <ClientErrorMessage message={error.message} />;
-  }
-  const { meta, data } = users;
+	apiParams.limit = limit;
+	apiParams.offset = offset;
+	const [error, users] = await tryCatch(getUsers(apiParams));
+	if (error) {
+		if (error.message === "UNAUTHORIZED") {
+			redirect("/auth/signin");
+		}
+		return <ClientErrorMessage message={error.message} />;
+	}
+	const { meta, data } = users;
 
-  // return null;
-  return (
-    <div>
-      {users?.data.length === 0 ? (
-        <div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
-          <h3>No Users yet.</h3>
-        </div>
-      ) : (
-        <>
-          <Table className="overflow-scroll">
-            <TableHeader>
-              <TableRow>
-                <TableHead>Name</TableHead>
-                <TableHead>ID Card</TableHead>
-                <TableHead>Atoll</TableHead>
-                <TableHead>Island</TableHead>
-                <TableHead>House Name</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Dob</TableHead>
-                <TableHead>Phone Number</TableHead>
-                <TableHead>Action</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody className="overflow-scroll">
-              {data.map((user) => (
-                <TableRow
-                  className={`${user.verified && "title-bg dark:bg-black"}`}
-                  key={user.id}
-                >
-                  <TableCell className="font-medium">
-                    {user.first_name} {user.last_name}
-                  </TableCell>
-                  <TableCell className="font-medium">{user.id_card}</TableCell>
-                  <TableCell>{user.atoll?.name}</TableCell>
-                  <TableCell>{user.island?.name}</TableCell>
-                  <TableCell>{user.address}</TableCell>
+	// return null;
+	return (
+		<div>
+			{users?.data.length === 0 ? (
+				<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
+					<h3>No Users yet.</h3>
+				</div>
+			) : (
+				<>
+					<Table className="overflow-scroll">
+						<TableHeader>
+							<TableRow>
+								<TableHead>Name</TableHead>
+								<TableHead>ID Card</TableHead>
+								<TableHead>Atoll</TableHead>
+								<TableHead>Island</TableHead>
+								<TableHead>House Name</TableHead>
+								<TableHead>Status</TableHead>
+								<TableHead>Dob</TableHead>
+								<TableHead>Phone Number</TableHead>
+								<TableHead>Action</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody className="overflow-scroll">
+							{data.map((user) => (
+								<TableRow
+									className={`${user.verified && "title-bg dark:bg-black"}`}
+									key={user.id}
+								>
+									<TableCell className="font-medium">
+										{user.first_name} {user.last_name}
+									</TableCell>
+									<TableCell className="font-medium">{user.id_card}</TableCell>
+									<TableCell>{user.atoll?.name}</TableCell>
+									<TableCell>{user.island?.name}</TableCell>
+									<TableCell>{user.address}</TableCell>
 
-                  <TableCell>
-                    {user.verified ? (
-                      <Badge
-                        variant="outline"
-                        className="bg-lime-100 text-black"
-                      >
-                        Verified
-                      </Badge>
-                    ) : (
-                      <Badge
-                        variant="outline"
-                        className="bg-yellow-100 text-black"
-                      >
-                        Unverified
-                      </Badge>
-                    )}
-                  </TableCell>
-                  <TableCell>
-                    {new Date(user.dob ?? "").toLocaleDateString("en-US", {
-                      month: "short",
-                      day: "2-digit",
-                      year: "numeric",
-                    })}
-                  </TableCell>
+									<TableCell>
+										{user.verified ? (
+											<Badge
+												variant="outline"
+												className="bg-lime-100 text-black"
+											>
+												Verified
+											</Badge>
+										) : (
+											<Badge
+												variant="outline"
+												className="bg-yellow-100 text-black"
+											>
+												Unverified
+											</Badge>
+										)}
+									</TableCell>
+									<TableCell>
+										{new Date(user.dob ?? "").toLocaleDateString("en-US", {
+											month: "short",
+											day: "2-digit",
+											year: "numeric",
+										})}
+									</TableCell>
 
-                  <TableCell>{user.mobile}</TableCell>
-                  <TableCell>
-                    <Link href={`/users/${user.id}/details`}>
-                      <Button>Details</Button>
-                    </Link>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-            <TableFooter>
-              <TableRow>
-                <TableCell colSpan={9}>
-                  {meta?.total === 1 ? (
-                    <p className="text-center">Total {meta?.total} user.</p>
-                  ) : (
-                    <p className="text-center">Total {meta?.total} users.</p>
-                  )}
-                </TableCell>
-              </TableRow>
-            </TableFooter>
-          </Table>
-          <Pagination
-            totalPages={meta?.last_page}
-            currentPage={meta?.current_page}
-          />
-        </>
-      )}
-    </div>
-  );
+									<TableCell>{user.mobile}</TableCell>
+									<TableCell>
+										<Link href={`/users/${user.id}/details`}>
+											<Button>Details</Button>
+										</Link>
+									</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+						<TableFooter>
+							<TableRow>
+								<TableCell colSpan={9}>
+									{meta?.total === 1 ? (
+										<p className="text-center">Total {meta?.total} user.</p>
+									) : (
+										<p className="text-center">Total {meta?.total} users.</p>
+									)}
+								</TableCell>
+							</TableRow>
+						</TableFooter>
+					</Table>
+					<Pagination
+						totalPages={meta?.last_page}
+						currentPage={meta?.current_page}
+					/>
+				</>
+			)}
+		</div>
+	);
 }

components/wallet-transactions-table.tsx

@@ -2,13 +2,13 @@ import { Calendar } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
+	Table,
+	TableBody,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
 } from "@/components/ui/table";
 import type { WalletTransaction } from "@/lib/backend-types";
 import { cn } from "@/lib/utils";
@@ -19,223 +19,223 @@ import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
 
 export async function WalletTransactionsTable({
-  searchParams,
+	searchParams,
 }: {
-  searchParams: Promise<{
-    [key: string]: unknown;
-  }>;
+	searchParams: Promise<{
+		[key: string]: unknown;
+	}>;
 }) {
-  const resolvedParams = await searchParams;
-  const page = Number.parseInt(resolvedParams.page as string) || 1;
-  const limit = 10;
-  const offset = (page - 1) * limit;
-  // Build params object
-  const apiParams: Record<string, string | number | undefined> = {};
-  for (const [key, value] of Object.entries(resolvedParams)) {
-    if (value !== undefined && value !== "") {
-      apiParams[key] = typeof value === "number" ? value : String(value);
-    }
-  }
-  apiParams.limit = limit;
-  apiParams.offset = offset;
-  const [error, transactions] = await tryCatch(
-    getWaleltTransactions(apiParams),
-  );
+	const resolvedParams = await searchParams;
+	const page = Number.parseInt(resolvedParams.page as string) || 1;
+	const limit = 10;
+	const offset = (page - 1) * limit;
+	// Build params object
+	const apiParams: Record<string, string | number | undefined> = {};
+	for (const [key, value] of Object.entries(resolvedParams)) {
+		if (value !== undefined && value !== "") {
+			apiParams[key] = typeof value === "number" ? value : String(value);
+		}
+	}
+	apiParams.limit = limit;
+	apiParams.offset = offset;
+	const [error, transactions] = await tryCatch(
+		getWaleltTransactions(apiParams),
+	);
 
-  if (error) {
-    if (error.message.includes("Unauthorized")) {
-      redirect("/auth/signin");
-    } else {
-      return <pre>{JSON.stringify(error, null, 2)}</pre>;
-    }
-  }
-  const { data, meta } = transactions;
-  const totalDebit = data.reduce(
-    (acc, trx) => acc + (trx.transaction_type === "DEBIT" ? trx.amount : 0),
-    0,
-  );
-  const totalCredit = data.reduce(
-    (acc, trx) => acc + (trx.transaction_type === "TOPUP" ? trx.amount : 0),
-    0,
-  );
-  return (
-    <div>
-      {data?.length === 0 ? (
-        <div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
-          <h3>No transactions yet.</h3>
-        </div>
-      ) : (
-        <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">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">Total Credit</h5>
-              <p>{totalCredit.toFixed(2)} MVR</p>
-            </div>
-          </div>
-          <div className="hidden sm:block">
-            <Table className="overflow-scroll">
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Description</TableHead>
-                  <TableHead>Amount</TableHead>
-                  <TableHead>Transaction Type</TableHead>
-                  <TableHead>View Details</TableHead>
-                  <TableHead>Created at</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody className="overflow-scroll">
-                {transactions?.data?.map((trx) => (
-                  <TableRow
-                    className={cn(
-                      "items-start border rounded p-2",
-                      trx?.transaction_type === "TOPUP"
-                        ? "credit-bg"
-                        : "debit-bg",
-                    )}
-                    key={trx.id}
-                  >
-                    <TableCell>
-                      <span className="text-muted-foreground">
-                        {trx.description}
-                      </span>
-                    </TableCell>
-                    <TableCell>{trx.amount.toFixed(2)} MVR</TableCell>
+	if (error) {
+		if (error.message.includes("Unauthorized")) {
+			redirect("/auth/signin");
+		} else {
+			return <pre>{JSON.stringify(error, null, 2)}</pre>;
+		}
+	}
+	const { data, meta } = transactions;
+	const totalDebit = data.reduce(
+		(acc, trx) => acc + (trx.transaction_type === "DEBIT" ? trx.amount : 0),
+		0,
+	);
+	const totalCredit = data.reduce(
+		(acc, trx) => acc + (trx.transaction_type === "TOPUP" ? trx.amount : 0),
+		0,
+	);
+	return (
+		<div>
+			{data?.length === 0 ? (
+				<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
+					<h3>No transactions yet.</h3>
+				</div>
+			) : (
+				<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">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">Total Credit</h5>
+							<p>{totalCredit.toFixed(2)} MVR</p>
+						</div>
+					</div>
+					<div className="hidden sm:block">
+						<Table className="overflow-scroll">
+							<TableHeader>
+								<TableRow>
+									<TableHead>Description</TableHead>
+									<TableHead>Amount</TableHead>
+									<TableHead>Transaction Type</TableHead>
+									<TableHead>View Details</TableHead>
+									<TableHead>Created at</TableHead>
+								</TableRow>
+							</TableHeader>
+							<TableBody className="overflow-scroll">
+								{transactions?.data?.map((trx) => (
+									<TableRow
+										className={cn(
+											"items-start border rounded p-2",
+											trx?.transaction_type === "TOPUP"
+												? "credit-bg"
+												: "debit-bg",
+										)}
+										key={trx.id}
+									>
+										<TableCell>
+											<span className="text-muted-foreground">
+												{trx.description}
+											</span>
+										</TableCell>
+										<TableCell>{trx.amount.toFixed(2)} MVR</TableCell>
 
-                    <TableCell>
-                      <span className="font-semibold pr-2">
-                        {trx.transaction_type === "TOPUP" ? (
-                          <Badge className="bg-green-100 text-green-950 dark:bg-green-700">
-                            {trx.transaction_type}
-                          </Badge>
-                        ) : (
-                          <Badge className="bg-red-500 text-red-950 dark:bg-red-700">
-                            {trx.transaction_type}
-                          </Badge>
-                        )}
-                      </span>
-                    </TableCell>
+										<TableCell>
+											<span className="font-semibold pr-2">
+												{trx.transaction_type === "TOPUP" ? (
+													<Badge className="bg-green-100 text-green-950 dark:bg-green-700">
+														{trx.transaction_type}
+													</Badge>
+												) : (
+													<Badge className="bg-red-500 text-red-950 dark:bg-red-700">
+														{trx.transaction_type}
+													</Badge>
+												)}
+											</span>
+										</TableCell>
 
-                    <TableCell>
-                      <span className="">
-                        {new Date(trx.created_at).toLocaleDateString("en-US", {
-                          month: "short",
-                          day: "2-digit",
-                          year: "numeric",
-                          minute: "2-digit",
-                          hour: "2-digit",
-                        })}
-                      </span>
-                    </TableCell>
-                    <TableCell>
-                      <Button>
-                        <Link
-                          className="font-medium "
-                          href={
-                            trx.transaction_type === "TOPUP"
-                              ? `/top-ups/${trx.reference_id}`
-                              : `/payments/${trx.reference_id}`
-                          }
-                        >
-                          View Details
-                        </Link>
-                      </Button>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-              <TableFooter>
-                <TableRow>
-                  <TableCell colSpan={5} className="text-muted-foreground">
-                    {meta?.total === 1 ? (
-                      <p className="text-center">
-                        Total {meta?.total} transaction.
-                      </p>
-                    ) : (
-                      <p className="text-center">
-                        Total {meta?.total} transactions.
-                      </p>
-                    )}
-                  </TableCell>
-                </TableRow>
-              </TableFooter>
-            </Table>
-          </div>
-          <div className="sm:hidden block">
-            {data.map((trx) => (
-              <MobileTransactionDetails key={trx.id} trx={trx} />
-            ))}
-          </div>
-          <Pagination
-            totalPages={meta?.last_page}
-            currentPage={meta?.current_page}
-          />
-        </div>
-      )}
-    </div>
-  );
+										<TableCell>
+											<span className="">
+												{new Date(trx.created_at).toLocaleDateString("en-US", {
+													month: "short",
+													day: "2-digit",
+													year: "numeric",
+													minute: "2-digit",
+													hour: "2-digit",
+												})}
+											</span>
+										</TableCell>
+										<TableCell>
+											<Button>
+												<Link
+													className="font-medium "
+													href={
+														trx.transaction_type === "TOPUP"
+															? `/top-ups/${trx.reference_id}`
+															: `/payments/${trx.reference_id}`
+													}
+												>
+													View Details
+												</Link>
+											</Button>
+										</TableCell>
+									</TableRow>
+								))}
+							</TableBody>
+							<TableFooter>
+								<TableRow>
+									<TableCell colSpan={5} className="text-muted-foreground">
+										{meta?.total === 1 ? (
+											<p className="text-center">
+												Total {meta?.total} transaction.
+											</p>
+										) : (
+											<p className="text-center">
+												Total {meta?.total} transactions.
+											</p>
+										)}
+									</TableCell>
+								</TableRow>
+							</TableFooter>
+						</Table>
+					</div>
+					<div className="sm:hidden block">
+						{data.map((trx) => (
+							<MobileTransactionDetails key={trx.id} trx={trx} />
+						))}
+					</div>
+					<Pagination
+						totalPages={meta?.last_page}
+						currentPage={meta?.current_page}
+					/>
+				</div>
+			)}
+		</div>
+	);
 }
 
 function MobileTransactionDetails({ trx }: { trx: WalletTransaction }) {
-  return (
-    <div
-      className={cn(
-        "flex flex-col items-start border rounded p-2 my-2",
-        trx?.transaction_type === "TOPUP" ? "credit-bg" : "debit-bg",
-      )}
-    >
-      <div className="bg-white shadow dark:bg-black p-2 rounded w-full">
-        <div className="flex items-center gap-2">
-          <Calendar size={16} opacity={0.5} />
-          <span className="text-muted-foreground text-sm">
-            {new Date(trx.created_at).toLocaleDateString("en-US", {
-              month: "short",
-              day: "2-digit",
-              year: "numeric",
-              minute: "2-digit",
-              hour: "2-digit",
-            })}
-          </span>
-        </div>
-        <p className="text-sm text-muted-foreground py-4">{trx.description}</p>
-      </div>
+	return (
+		<div
+			className={cn(
+				"flex flex-col items-start border rounded p-2 my-2",
+				trx?.transaction_type === "TOPUP" ? "credit-bg" : "debit-bg",
+			)}
+		>
+			<div className="bg-white shadow dark:bg-black p-2 rounded w-full">
+				<div className="flex items-center gap-2">
+					<Calendar size={16} opacity={0.5} />
+					<span className="text-muted-foreground text-sm">
+						{new Date(trx.created_at).toLocaleDateString("en-US", {
+							month: "short",
+							day: "2-digit",
+							year: "numeric",
+							minute: "2-digit",
+							hour: "2-digit",
+						})}
+					</span>
+				</div>
+				<p className="text-sm text-muted-foreground py-4">{trx.description}</p>
+			</div>
 
-      <div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border flex justify-between items-center">
-        <div className="block sm:hidden">
-          <h3 className="text-sm font-medium">Amount</h3>
-          <span className="text-sm text-muted-foreground">
-            {trx.amount.toFixed(2)} MVR
-          </span>
-        </div>
-        <span className="font-semibold pr-2">
-          {trx.transaction_type === "TOPUP" ? (
-            <Badge className="bg-green-100 text-green-950 dark:bg-green-700">
-              {trx.transaction_type}
-            </Badge>
-          ) : (
-            <Badge className="bg-red-500 text-red-950 dark:bg-red-700">
-              {trx.transaction_type}
-            </Badge>
-          )}
-        </span>
-      </div>
-      <div className="flex items-center gap-2 mt-2 w-full">
-        <Link
-          className="font-medium hover:underline"
-          href={
-            trx.transaction_type === "TOPUP"
-              ? `/top-ups/${trx.reference_id}`
-              : `/payments/${trx.reference_id}`
-          }
-        >
-          <Button size={"sm"} className="w-full">
-            View Details
-          </Button>
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border flex justify-between items-center">
+				<div className="block sm:hidden">
+					<h3 className="text-sm font-medium">Amount</h3>
+					<span className="text-sm text-muted-foreground">
+						{trx.amount.toFixed(2)} MVR
+					</span>
+				</div>
+				<span className="font-semibold pr-2">
+					{trx.transaction_type === "TOPUP" ? (
+						<Badge className="bg-green-100 text-green-950 dark:bg-green-700">
+							{trx.transaction_type}
+						</Badge>
+					) : (
+						<Badge className="bg-red-500 text-red-950 dark:bg-red-700">
+							{trx.transaction_type}
+						</Badge>
+					)}
+				</span>
+			</div>
+			<div className="flex items-center gap-2 mt-2 w-full">
+				<Link
+					className="font-medium hover:underline"
+					href={
+						trx.transaction_type === "TOPUP"
+							? `/top-ups/${trx.reference_id}`
+							: `/payments/${trx.reference_id}`
+					}
+				>
+					<Button size={"sm"} className="w-full">
+						View Details
+					</Button>
+				</Link>
+			</div>
+		</div>
+	);
 }

components/wallet.tsx

@@ -7,100 +7,100 @@ import { toast } from "sonner";
 import { createTopup } from "@/actions/payment";
 import { Button } from "@/components/ui/button";
 import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
+	Drawer,
+	DrawerClose,
+	DrawerContent,
+	DrawerDescription,
+	DrawerFooter,
+	DrawerHeader,
+	DrawerTitle,
+	DrawerTrigger,
 } from "@/components/ui/drawer";
 import { WalletDrawerOpenAtom, walletTopUpValue } from "@/lib/atoms";
 import type { TopupType } from "@/lib/types";
 import NumberInput from "./number-input";
 
 export function Wallet({ walletBalance }: { walletBalance: number }) {
-  const pathname = usePathname();
-  const [amount, setAmount] = useAtom(walletTopUpValue);
-  const [isOpen, setIsOpen] = useAtom(WalletDrawerOpenAtom);
-  const [disabled, setDisabled] = useState(false);
-  const router = useRouter();
+	const pathname = usePathname();
+	const [amount, setAmount] = useAtom(walletTopUpValue);
+	const [isOpen, setIsOpen] = useAtom(WalletDrawerOpenAtom);
+	const [disabled, setDisabled] = useState(false);
+	const router = useRouter();
 
-  if (pathname === "/payment") {
-    return null;
-  }
+	if (pathname === "/payment") {
+		return null;
+	}
 
-  const data: TopupType = {
-    amount: Number.parseFloat(amount.toFixed(2)),
-  };
+	const data: TopupType = {
+		amount: Number.parseFloat(amount.toFixed(2)),
+	};
 
-  return (
-    <Drawer open={isOpen} onOpenChange={setIsOpen}>
-      <DrawerTrigger asChild>
-        <Button onClick={() => setIsOpen(!isOpen)} variant="outline">
-          {walletBalance} MVR
-          <Wallet2 />
-        </Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <div className="mx-auto w-full max-w-sm">
-          <DrawerHeader>
-            <DrawerTitle>Wallet</DrawerTitle>
-            <DrawerDescription asChild>
-              <div>
-                Your wallet balance is{" "}
-                <span className="font-semibold">
-                  {new Intl.NumberFormat("en-US", {
-                    minimumFractionDigits: 2,
-                    maximumFractionDigits: 2,
-                  }).format(walletBalance)}
-                </span>{" "}
-              </div>
-            </DrawerDescription>
-          </DrawerHeader>
+	return (
+		<Drawer open={isOpen} onOpenChange={setIsOpen}>
+			<DrawerTrigger asChild>
+				<Button onClick={() => setIsOpen(!isOpen)} variant="outline">
+					{walletBalance} MVR
+					<Wallet2 />
+				</Button>
+			</DrawerTrigger>
+			<DrawerContent>
+				<div className="mx-auto w-full max-w-sm">
+					<DrawerHeader>
+						<DrawerTitle>Wallet</DrawerTitle>
+						<DrawerDescription asChild>
+							<div>
+								Your wallet balance is{" "}
+								<span className="font-semibold">
+									{new Intl.NumberFormat("en-US", {
+										minimumFractionDigits: 2,
+										maximumFractionDigits: 2,
+									}).format(walletBalance)}
+								</span>{" "}
+							</div>
+						</DrawerDescription>
+					</DrawerHeader>
 
-          <div className="px-4 flex flex-col gap-4">
-            <NumberInput
-              label="Set amount to top up"
-              value={amount}
-              onChange={(value) => setAmount(value)}
-              maxAllowed={5000}
-              isDisabled={amount === 0}
-            />
-          </div>
-          <DrawerFooter>
-            <Button
-              onClick={async () => {
-                console.log(data);
-                setDisabled(true);
-                const topup = await createTopup(data);
-                setDisabled(false);
-                if (topup) {
-                  router.push(`/top-ups/${topup.id}`);
-                  setIsOpen(!isOpen);
-                } else {
-                  toast.error("Something went wrong.");
-                }
-              }}
-              className="w-full"
-              disabled={amount === 0 || disabled}
-            >
-              {disabled ? (
-                <Loader2 className="ml-2 animate-spin" />
-              ) : (
-                <>
-                  Go to payment
-                  <CircleDollarSign />
-                </>
-              )}
-            </Button>
-            <DrawerClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </DrawerClose>
-          </DrawerFooter>
-        </div>
-      </DrawerContent>
-    </Drawer>
-  );
+					<div className="px-4 flex flex-col gap-4">
+						<NumberInput
+							label="Set amount to top up"
+							value={amount}
+							onChange={(value) => setAmount(value)}
+							maxAllowed={5000}
+							isDisabled={amount === 0}
+						/>
+					</div>
+					<DrawerFooter>
+						<Button
+							onClick={async () => {
+								console.log(data);
+								setDisabled(true);
+								const topup = await createTopup(data);
+								setDisabled(false);
+								if (topup) {
+									router.push(`/top-ups/${topup.id}`);
+									setIsOpen(!isOpen);
+								} else {
+									toast.error("Something went wrong.");
+								}
+							}}
+							className="w-full"
+							disabled={amount === 0 || disabled}
+						>
+							{disabled ? (
+								<Loader2 className="ml-2 animate-spin" />
+							) : (
+								<>
+									Go to payment
+									<CircleDollarSign />
+								</>
+							)}
+						</Button>
+						<DrawerClose asChild>
+							<Button variant="outline">Cancel</Button>
+						</DrawerClose>
+					</DrawerFooter>
+				</div>
+			</DrawerContent>
+		</Drawer>
+	);
 }

components/welcome-banner.tsx

@@ -4,36 +4,36 @@ import { AnimatePresence, motion } from "framer-motion";
 import { useEffect, useState } from "react";
 
 interface WelcomeBannerProps {
-  firstName?: string | null;
-  lastName?: string | null;
+	firstName?: string | null;
+	lastName?: string | null;
 }
 
 export function WelcomeBanner({ firstName, lastName }: WelcomeBannerProps) {
-  const [isVisible, setIsVisible] = useState(true);
+	const [isVisible, setIsVisible] = useState(true);
 
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setIsVisible(false);
-    }, 4000);
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setIsVisible(false);
+		}, 4000);
 
-    return () => clearTimeout(timer);
-  }, []);
+		return () => clearTimeout(timer);
+	}, []);
 
-  return (
-    <AnimatePresence>
-      {isVisible && (
-        <motion.div
-          className="text-sm font-mono px-2 p-1 bg-green-500/10 text-green-900 dark:text-green-400"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-        >
-          Welcome,{" "}
-          <p className="font-semibold motion-preset-slide-down inline-block motion-delay-200">
-            {firstName} {lastName}
-          </p>
-        </motion.div>
-      )}
-    </AnimatePresence>
-  );
+	return (
+		<AnimatePresence>
+			{isVisible && (
+				<motion.div
+					className="text-sm font-mono px-2 p-1 bg-green-500/10 text-green-900 dark:text-green-400"
+					initial={{ opacity: 0 }}
+					animate={{ opacity: 1 }}
+					exit={{ opacity: 0 }}
+				>
+					Welcome,{" "}
+					<p className="font-semibold motion-preset-slide-down inline-block motion-delay-200">
+						{firstName} {lastName}
+					</p>
+				</motion.div>
+			)}
+		</AnimatePresence>
+	);
 }

lib/atoms.ts

@@ -19,14 +19,14 @@ export const loadingDevicesToPayAtom = atom(false);
 
 // Export the atoms with their store
 export const atoms = {
-  initialPriceAtom,
-  discountPercentageAtom,
-  numberOfDevicesAtom,
-  numberOfDaysAtom,
-  numberOfMonths,
-  formulaResultAtom,
-  deviceCartAtom,
-  cartDrawerOpenAtom,
-  walletTopUpValue,
-  loadingDevicesToPayAtom,
+	initialPriceAtom,
+	discountPercentageAtom,
+	numberOfDevicesAtom,
+	numberOfDaysAtom,
+	numberOfMonths,
+	formulaResultAtom,
+	deviceCartAtom,
+	cartDrawerOpenAtom,
+	walletTopUpValue,
+	loadingDevicesToPayAtom,
 };

next.config.ts

@@ -6,6 +6,7 @@ const nextConfig: NextConfig = {
 		serverActions: {
 			bodySizeLimit: "20mb",
 		},
+		devtoolSegmentExplorer: true,
 	},
 	images: {
 		remotePatterns: [

package-lock.json

@@ -30,7 +30,7 @@
         "lucide-react": "^0.523.0",
         "moment": "^2.30.1",
         "motion": "^12.15.0",
-        "next": "15.3.3",
+        "next": "15.5.3",
         "next-auth": "^4.24.11",
         "next-themes": "^0.4.6",
         "nextjs-toploader": "^3.7.15",
@@ -717,6 +717,16 @@
       "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.2.0.tgz",
       "integrity": "sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg=="
     },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.5.0.tgz",
+      "integrity": "sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz",
@@ -851,13 +861,13 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.3.tgz",
-      "integrity": "sha512-1+WqvgNMhmlAambTvT3KPtCl/Ibr68VldY2XY40SL1CE0ZXiakFR/cbTspaF5HsnpDMvcYYoJHfl4980NBjGag==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.5.tgz",
+      "integrity": "sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@eslint/core": "^0.15.1",
+        "@eslint/core": "^0.15.2",
         "levn": "^0.4.1"
       },
       "engines": {
@@ -865,9 +875,9 @@
       }
     },
     "node_modules/@eslint/plugin-kit/node_modules/@eslint/core": {
-      "version": "0.15.1",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.1.tgz",
-      "integrity": "sha512-bkOp+iumZCCbt1K1CmWf0R9pM5yKpDv+ZXtvSyQpudrI9kuFLp+bM2WOPXImuD/ceQuaa8f5pj93Y7zyECIGNA==",
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.2.tgz",
+      "integrity": "sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -1050,13 +1060,100 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/@img/sharp-libvips-linux-x64": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.1.0.tgz",
-      "integrity": "sha512-yRj2+reB8iMg9W5sULM3S74jVS7zqSzHG3Ol/twnAAkAhnGQnpjj6e4ayUz7V+FpKypwgs82xbRdYtchTTUB+Q==",
+    "node_modules/@img/colour": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
+      "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.4.tgz",
+      "integrity": "sha512-sitdlPzDVyvmINUdJle3TNHl+AG9QcwiAMsXmccqsCOMZNIdW2/7S26w0LyU8euiLVzFBL3dXPwVCq/ODnf2vA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.4.tgz",
+      "integrity": "sha512-rZheupWIoa3+SOdF/IcUe1ah4ZDpKBGWcsPX6MT0lYniH9micvIU7HQkYTfrx5Xi8u+YqwLtxC/3vl8TQN6rMg==",
       "cpu": [
         "x64"
       ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.3.tgz",
+      "integrity": "sha512-QzWAKo7kpHxbuHqUC28DZ9pIKpSi2ts2OJnoIGI26+HMgq92ZZ4vk8iJd4XsxN+tYfNJxzH6W62X5eTcsBymHw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.3.tgz",
+      "integrity": "sha512-Ju+g2xn1E2AKO6YBhxjj+ACcsPQRHT0bhpglxcEf+3uyPY+/gL8veniKoo96335ZaPo03bdDXMv0t+BBFAbmRA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.3.tgz",
+      "integrity": "sha512-x1uE93lyP6wEwGvgAIV0gP6zmaL/a0tGzJs/BIDDG0zeBhMnuUPm7ptxGhUbcGs4okDJrk4nxgrmxpib9g6HpA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
         "linux"
@@ -1065,13 +1162,110 @@
         "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@img/sharp-linux-x64": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.1.tgz",
-      "integrity": "sha512-wExv7SH9nmoBW3Wr2gvQopX1k8q2g5V5Iag8Zk6AVENsjwd+3adjwxtp3Dcu2QhOXr8W9NusBU6XcQUohBZ5MA==",
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.3.tgz",
+      "integrity": "sha512-I4RxkXU90cpufazhGPyVujYwfIm9Nk1QDEmiIsaPwdnm013F7RIceaCc87kAH+oUB1ezqEvC6ga4m7MSlqsJvQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.3.tgz",
+      "integrity": "sha512-Y2T7IsQvJLMCBM+pmPbM3bKT/yYJvVtLJGfCs4Sp95SjvnFIjynbjzsa7dY1fRJX45FTSfDksbTp6AGWudiyCg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.3.tgz",
+      "integrity": "sha512-RgWrs/gVU7f+K7P+KeHFaBAJlNkD1nIZuVXdQv6S+fNA6syCcoboNjsV2Pou7zNlVdNQoQUpQTk8SWDHUA3y/w==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.3.tgz",
+      "integrity": "sha512-3JU7LmR85K6bBiRzSUc/Ff9JBVIFVvq6bomKE0e63UXGeRw2HPVEjoJke1Yx+iU4rL7/7kUjES4dZ/81Qjhyxg==",
       "cpu": [
         "x64"
       ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.3.tgz",
+      "integrity": "sha512-F9q83RZ8yaCwENw1GieztSfj5msz7GGykG/BA+MOUefvER69K/ubgFHNeSyUu64amHIYKGDs4sRCMzXVj8sEyw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.3.tgz",
+      "integrity": "sha512-U5PUY5jbc45ANM6tSJpsgqmBF/VsL6LnxJmIf11kB7J5DctHgqm0SkuXzVWtIY90GnJxKnC/JT251TDnk1fu/g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.4.tgz",
+      "integrity": "sha512-Xyam4mlqM0KkTHYVSuc6wXRmM7LGN0P12li03jAnZ3EJWZqj83+hi8Y9UxZUbxsgsK1qOEwg7O0Bc0LjqQVtxA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
       "optional": true,
       "os": [
         "linux"
@@ -1083,7 +1277,215 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-x64": "1.1.0"
+        "@img/sharp-libvips-linux-arm": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.4.tgz",
+      "integrity": "sha512-YXU1F/mN/Wu786tl72CyJjP/Ngl8mGHN1hST4BGl+hiW5jhCnV2uRVTNOcaYPs73NeT/H8Upm3y9582JVuZHrQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.4.tgz",
+      "integrity": "sha512-F4PDtF4Cy8L8hXA2p3TO6s4aDt93v+LKmpcYFLAVdkkD3hSxZzee0rh6/+94FpAynsuMpLX5h+LRsSG3rIciUQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.4.tgz",
+      "integrity": "sha512-qVrZKE9Bsnzy+myf7lFKvng6bQzhNUAYcVORq2P7bDlvmF6u2sCmK2KyEQEBdYk+u3T01pVsPrkj943T1aJAsw==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.4.tgz",
+      "integrity": "sha512-ZfGtcp2xS51iG79c6Vhw9CWqQC8l2Ot8dygxoDoIQPTat/Ov3qAa8qpxSrtAEAJW+UjTXc4yxCjNfxm4h6Xm2A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.4.tgz",
+      "integrity": "sha512-8hDVvW9eu4yHWnjaOOR8kHVrew1iIX+MUgwxSuH2XyYeNRtLUe4VNioSqbNkB7ZYQJj9rUTT4PyRscyk2PXFKA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.4.tgz",
+      "integrity": "sha512-lU0aA5L8QTlfKjpDCEFOZsTYGn3AEiO6db8W5aQDxj0nQkVrZWmN3ZP9sYKWJdtq3PWPhUNlqehWyXpYDcI9Sg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.4.tgz",
+      "integrity": "sha512-33QL6ZO/qpRyG7woB/HUALz28WnTMI2W1jgX3Nu2bypqLIKx/QKMILLJzJjI+SIbvXdG9fUnmrxR7vbi1sTBeA==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.5.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.4.tgz",
+      "integrity": "sha512-2Q250do/5WXTwxW3zjsEuMSv5sUU4Tq9VThWKlU2EYLm4MB7ZeMwF+SFJutldYODXF6jzc6YEOC+VfX0SZQPqA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.4.tgz",
+      "integrity": "sha512-3ZeLue5V82dT92CNL6rsal6I2weKw1cYu+rGKm8fOCCtJTR2gYeUfY3FqUnIJsMUPIH68oS5jmZ0NiJ508YpEw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.4.tgz",
+      "integrity": "sha512-xIyj4wpYs8J18sVN3mSQjwrw7fKUqRw+Z5rnHNCy5fYTxigBz81u5mOMPmFumwjcn8+ld1ppptMBCLic1nz6ig==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
     "node_modules/@inquirer/ansi": {
@@ -1509,9 +1911,10 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "15.3.3",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.3.3.tgz",
-      "integrity": "sha512-OdiMrzCl2Xi0VTjiQQUK0Xh7bJHnOuET2s+3V+Y40WJBAXrJeGA3f+I8MZJ/YQ3mVGi5XGR1L66oFlgqXhQ4Vw=="
+      "version": "15.5.3",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.3.tgz",
+      "integrity": "sha512-RSEDTRqyihYXygx/OJXwvVupfr9m04+0vH8vyy0HfZ7keRto6VX9BbEk0J2PUk0VGy6YhklJUSrgForov5F9pw==",
+      "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
       "version": "15.1.2",
@@ -1548,12 +1951,13 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "15.3.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.3.3.tgz",
-      "integrity": "sha512-WRJERLuH+O3oYB4yZNVahSVFmtxRNjNF1I1c34tYMoJb0Pve+7/RaLAJJizyYiFhjYNGHRAE1Ri2Fd23zgDqhg==",
+      "version": "15.5.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.3.tgz",
+      "integrity": "sha512-nzbHQo69+au9wJkGKTU9lP7PXv0d1J5ljFpvb+LnEomLtSbJkbZyEs6sbF3plQmiOB2l9OBtN2tNSvCH1nQ9Jg==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -1563,12 +1967,13 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "15.3.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.3.3.tgz",
-      "integrity": "sha512-XHdzH/yBc55lu78k/XwtuFR/ZXUTcflpRXcsu0nKmF45U96jt1tsOZhVrn5YH+paw66zOANpOnFQ9i6/j+UYvw==",
+      "version": "15.5.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.3.tgz",
+      "integrity": "sha512-w83w4SkOOhekJOcA5HBvHyGzgV1W/XvOfpkrxIse4uPWhYTTRwtGEM4v/jiXwNSJvfRvah0H8/uTLBKRXlef8g==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -1578,12 +1983,13 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "15.3.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.3.3.tgz",
-      "integrity": "sha512-VZ3sYL2LXB8znNGcjhocikEkag/8xiLgnvQts41tq6i+wql63SMS1Q6N8RVXHw5pEUjiof+II3HkDd7GFcgkzw==",
+      "version": "15.5.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.3.tgz",
+      "integrity": "sha512-+m7pfIs0/yvgVu26ieaKrifV8C8yiLe7jVp9SpcIzg7XmyyNE7toC1fy5IOQozmr6kWl/JONC51osih2RyoXRw==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -1593,12 +1999,13 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "15.3.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.3.3.tgz",
-      "integrity": "sha512-h6Y1fLU4RWAp1HPNJWDYBQ+e3G7sLckyBXhmH9ajn8l/RSMnhbuPBV/fXmy3muMcVwoJdHL+UtzRzs0nXOf9SA==",
+      "version": "15.5.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.3.tgz",
+      "integrity": "sha512-u3PEIzuguSenoZviZJahNLgCexGFhso5mxWCrrIMdvpZn6lkME5vc/ADZG8UUk5K1uWRy4hqSFECrON6UKQBbQ==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -1608,12 +2015,13 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "15.3.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.3.3.tgz",
-      "integrity": "sha512-jJ8HRiF3N8Zw6hGlytCj5BiHyG/K+fnTKVDEKvUCyiQ/0r5tgwO7OgaRiOjjRoIx2vwLR+Rz8hQoPrnmFbJdfw==",
+      "version": "15.5.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.3.tgz",
+      "integrity": "sha512-lDtOOScYDZxI2BENN9m0pfVPJDSuUkAD1YXSvlJF0DKwZt0WlA7T7o3wrcEr4Q+iHYGzEaVuZcsIbCps4K27sA==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -1623,12 +2031,13 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "15.3.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.3.3.tgz",
-      "integrity": "sha512-HrUcTr4N+RgiiGn3jjeT6Oo208UT/7BuTr7K0mdKRBtTbT4v9zJqCDKO97DUqqoBK1qyzP1RwvrWTvU6EPh/Cw==",
+      "version": "15.5.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.3.tgz",
+      "integrity": "sha512-9vWVUnsx9PrY2NwdVRJ4dUURAQ8Su0sLRPqcCCxtX5zIQUBES12eRVHq6b70bbfaVaxIDGJN2afHui0eDm+cLg==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -1638,12 +2047,13 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "15.3.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.3.3.tgz",
-      "integrity": "sha512-SxorONgi6K7ZUysMtRF3mIeHC5aA3IQLmKFQzU0OuhuUYwpOBc1ypaLJLP5Bf3M9k53KUUUj4vTPwzGvl/NwlQ==",
+      "version": "15.5.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.3.tgz",
+      "integrity": "sha512-1CU20FZzY9LFQigRi6jM45oJMU3KziA5/sSG+dXeVaTm661snQP6xu3ykGxxwU5sLG3sh14teO/IOEPVsQMRfA==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -1653,12 +2063,13 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "15.3.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.3.3.tgz",
-      "integrity": "sha512-4QZG6F8enl9/S2+yIiOiju0iCTFd93d8VC1q9LZS4p/Xuk81W2QDjCFeoogmrWWkAD59z8ZxepBQap2dKS5ruw==",
+      "version": "15.5.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.3.tgz",
+      "integrity": "sha512-JMoLAq3n3y5tKXPQwCK5c+6tmwkuFDa2XAxz8Wm4+IVthdBZdZGh+lmiLUHg9f9IDwIQpUjp+ysd6OkYTyZRZw==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -5014,10 +5425,6 @@
       "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
       "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="
     },
-    "node_modules/@swc/counter": {
-      "version": "0.1.3",
-      "license": "Apache-2.0"
-    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "license": "Apache-2.0",
@@ -6051,12 +6458,13 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.4.tgz",
-      "integrity": "sha512-eBSYY4Y68NNlHbHBMdeDmKNtDgXWhQsJcGqzO3iLUM0GraQFSS9cVgPX5I9b3lbdFKyYoAEGAZF1DwhTaljNAw==",
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz",
+      "integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==",
+      "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
+        "form-data": "^4.0.4",
         "proxy-from-env": "^1.1.0"
       }
     },
@@ -6132,15 +6540,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/busboy": {
-      "version": "1.6.0",
-      "dependencies": {
-        "streamsearch": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=10.16.0"
-      }
-    },
     "node_modules/c12": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/c12/-/c12-3.3.0.tgz",
@@ -6461,19 +6860,6 @@
         "react-dom": "^18 || ^19 || ^19.0.0-rc"
       }
     },
-    "node_modules/color": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
-      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
-      "optional": true,
-      "dependencies": {
-        "color-convert": "^2.0.1",
-        "color-string": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=12.5.0"
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "license": "MIT",
@@ -6488,16 +6874,6 @@
       "version": "1.1.4",
       "license": "MIT"
     },
-    "node_modules/color-string": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
-      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "optional": true,
-      "dependencies": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -7417,9 +7793,9 @@
       "license": "MIT"
     },
     "node_modules/detect-libc": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
-      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.0.tgz",
+      "integrity": "sha512-vEtk+OcP7VBRtQZ1EJ3bdgzSfBjgnEalLTp5zjJrS+2Z1w2KZly4SBdac/WDU3hhsNAZ9E8SC96ME4Ey8MZ7cg==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">=8"
@@ -9191,12 +9567,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-arrayish": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-      "optional": true
-    },
     "node_modules/is-async-function": {
       "version": "2.0.0",
       "dev": true,
@@ -10511,14 +10881,13 @@
       }
     },
     "node_modules/next": {
-      "version": "15.3.3",
-      "resolved": "https://registry.npmjs.org/next/-/next-15.3.3.tgz",
-      "integrity": "sha512-JqNj29hHNmCLtNvd090SyRbXJiivQ+58XjCcrC50Crb5g5u2zi7Y2YivbsEfzk6AtVI80akdOQbaMZwWB1Hthw==",
+      "version": "15.5.3",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.5.3.tgz",
+      "integrity": "sha512-r/liNAx16SQj4D+XH/oI1dlpv9tdKJ6cONYPwwcCC46f2NjpaRWY+EKCzULfgQYV6YKXjHBchff2IZBSlZmJNw==",
+      "license": "MIT",
       "dependencies": {
-        "@next/env": "15.3.3",
-        "@swc/counter": "0.1.3",
+        "@next/env": "15.5.3",
         "@swc/helpers": "0.5.15",
-        "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001579",
         "postcss": "8.4.31",
         "styled-jsx": "5.1.6"
@@ -10530,19 +10899,19 @@
         "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "15.3.3",
-        "@next/swc-darwin-x64": "15.3.3",
-        "@next/swc-linux-arm64-gnu": "15.3.3",
-        "@next/swc-linux-arm64-musl": "15.3.3",
-        "@next/swc-linux-x64-gnu": "15.3.3",
-        "@next/swc-linux-x64-musl": "15.3.3",
-        "@next/swc-win32-arm64-msvc": "15.3.3",
-        "@next/swc-win32-x64-msvc": "15.3.3",
-        "sharp": "^0.34.1"
+        "@next/swc-darwin-arm64": "15.5.3",
+        "@next/swc-darwin-x64": "15.5.3",
+        "@next/swc-linux-arm64-gnu": "15.5.3",
+        "@next/swc-linux-arm64-musl": "15.5.3",
+        "@next/swc-linux-x64-gnu": "15.5.3",
+        "@next/swc-linux-x64-musl": "15.5.3",
+        "@next/swc-win32-arm64-msvc": "15.5.3",
+        "@next/swc-win32-x64-msvc": "15.5.3",
+        "sharp": "^0.34.3"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
-        "@playwright/test": "^1.41.2",
+        "@playwright/test": "^1.51.1",
         "babel-plugin-react-compiler": "*",
         "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
         "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
@@ -12242,15 +12611,16 @@
       }
     },
     "node_modules/sharp": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.1.tgz",
-      "integrity": "sha512-1j0w61+eVxu7DawFJtnfYcvSv6qPFvfTaqzTQ2BLknVhHTwGS8sc63ZBF4rzkWMBVKybo4S5OBtDdZahh2A1xg==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.4.tgz",
+      "integrity": "sha512-FUH39xp3SBPnxWvd5iib1X8XY7J0K0X7d93sie9CJg2PO8/7gmg89Nve6OjItK53/MlAushNNxteBYfM6DEuoA==",
       "hasInstallScript": true,
+      "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
-        "color": "^4.2.3",
-        "detect-libc": "^2.0.3",
-        "semver": "^7.7.1"
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.0",
+        "semver": "^7.7.2"
       },
       "engines": {
         "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
@@ -12259,32 +12629,35 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-darwin-arm64": "0.34.1",
-        "@img/sharp-darwin-x64": "0.34.1",
-        "@img/sharp-libvips-darwin-arm64": "1.1.0",
-        "@img/sharp-libvips-darwin-x64": "1.1.0",
-        "@img/sharp-libvips-linux-arm": "1.1.0",
-        "@img/sharp-libvips-linux-arm64": "1.1.0",
-        "@img/sharp-libvips-linux-ppc64": "1.1.0",
-        "@img/sharp-libvips-linux-s390x": "1.1.0",
-        "@img/sharp-libvips-linux-x64": "1.1.0",
-        "@img/sharp-libvips-linuxmusl-arm64": "1.1.0",
-        "@img/sharp-libvips-linuxmusl-x64": "1.1.0",
-        "@img/sharp-linux-arm": "0.34.1",
-        "@img/sharp-linux-arm64": "0.34.1",
-        "@img/sharp-linux-s390x": "0.34.1",
-        "@img/sharp-linux-x64": "0.34.1",
-        "@img/sharp-linuxmusl-arm64": "0.34.1",
-        "@img/sharp-linuxmusl-x64": "0.34.1",
-        "@img/sharp-wasm32": "0.34.1",
-        "@img/sharp-win32-ia32": "0.34.1",
-        "@img/sharp-win32-x64": "0.34.1"
+        "@img/sharp-darwin-arm64": "0.34.4",
+        "@img/sharp-darwin-x64": "0.34.4",
+        "@img/sharp-libvips-darwin-arm64": "1.2.3",
+        "@img/sharp-libvips-darwin-x64": "1.2.3",
+        "@img/sharp-libvips-linux-arm": "1.2.3",
+        "@img/sharp-libvips-linux-arm64": "1.2.3",
+        "@img/sharp-libvips-linux-ppc64": "1.2.3",
+        "@img/sharp-libvips-linux-s390x": "1.2.3",
+        "@img/sharp-libvips-linux-x64": "1.2.3",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.3",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.3",
+        "@img/sharp-linux-arm": "0.34.4",
+        "@img/sharp-linux-arm64": "0.34.4",
+        "@img/sharp-linux-ppc64": "0.34.4",
+        "@img/sharp-linux-s390x": "0.34.4",
+        "@img/sharp-linux-x64": "0.34.4",
+        "@img/sharp-linuxmusl-arm64": "0.34.4",
+        "@img/sharp-linuxmusl-x64": "0.34.4",
+        "@img/sharp-wasm32": "0.34.4",
+        "@img/sharp-win32-arm64": "0.34.4",
+        "@img/sharp-win32-ia32": "0.34.4",
+        "@img/sharp-win32-x64": "0.34.4"
       }
     },
     "node_modules/sharp/node_modules/semver": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "license": "ISC",
       "optional": true,
       "bin": {
         "semver": "bin/semver.js"
@@ -12390,15 +12763,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/simple-swizzle": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
-      "optional": true,
-      "dependencies": {
-        "is-arrayish": "^0.3.1"
-      }
-    },
     "node_modules/smart-buffer": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
@@ -12526,12 +12890,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/streamsearch": {
-      "version": "1.1.0",
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",

package.json

@@ -1,124 +1,124 @@
 {
-  "name": "sarlink-portal",
-  "version": "0.2.2",
-  "type": "module",
-  "private": true,
-  "scripts": {
-    "dev": "next dev --turbopack",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "prepare": "husky",
-    "release": "release-it"
-  },
-  "dependencies": {
-    "@commitlint/cli": "^19.8.1",
-    "@commitlint/config-conventional": "^19.8.1",
-    "@faker-js/faker": "^9.3.0",
-    "@hookform/resolvers": "^5.1.1",
-    "@pyncz/tailwind-mask-image": "^2.0.0",
-    "@radix-ui/react-dialog": "^1.1.14",
-    "@radix-ui/react-progress": "^1.1.7",
-    "@tailwindcss/postcss": "^4.1.11",
-    "@tanstack/react-query": "^5.61.4",
-    "axios": "^1.8.4",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.1.1",
-    "commitlint": "^19.8.1",
-    "date-fns": "^4.1.0",
-    "embla-carousel-react": "^8.6.0",
-    "husky": "^9.1.7",
-    "input-otp": "^1.4.2",
-    "jotai": "2.8.0",
-    "lucide-react": "^0.523.0",
-    "moment": "^2.30.1",
-    "motion": "^12.15.0",
-    "next": "15.3.3",
-    "next-auth": "^4.24.11",
-    "next-themes": "^0.4.6",
-    "nextjs-toploader": "^3.7.15",
-    "nuqs": "^2.4.3",
-    "radix-ui": "^1.4.2",
-    "react": "19.1.0",
-    "react-aria-components": "^1.5.0",
-    "react-day-picker": "^9.7.0",
-    "react-dom": "19.1.0",
-    "react-hook-form": "^7.58.1",
-    "react-phone-number-input": "^3.4.9",
-    "react-resizable-panels": "^3.0.3",
-    "recharts": "^3.0.0",
-    "release-it": "^19.0.5",
-    "sonner": "^2.0.5",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss-animate": "^1.0.7",
-    "vaul": "^1.1.2",
-    "zod": "^3.25.67"
-  },
-  "devDependencies": {
-    "@biomejs/biome": "2.0.6",
-    "@release-it/conventional-changelog": "^10.0.1",
-    "@types/node": "^22.10.2",
-    "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.1.2",
-    "@typescript-eslint/eslint-plugin": "^8.35.0",
-    "@typescript-eslint/parser": "^8.35.0",
-    "eslint": "^9.29.0",
-    "eslint-config-next": "15.1.2",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.11",
-    "tailwindcss-motion": "^1.1.0",
-    "ts-node": "^10.9.2",
-    "tw-animate-css": "^1.3.4",
-    "typescript": "^5.8.3"
-  },
-  "release-it": {
-    "git": {
-      "commitMessage": "chore: release v${version}"
-    },
-    "github": {
-      "release": true
-    },
-    "npm": {
-      "publish": false
-    },
-    "plugins": {
-      "@release-it/conventional-changelog": {
-        "infile": "CHANGELOG.md",
-        "preset": {
-          "name": "conventionalcommits",
-          "types": [
-            {
-              "type": "feat",
-              "section": "Features"
-            },
-            {
-              "type": "fix",
-              "section": "Bug Fixes"
-            },
-            {
-              "type": "chore",
-              "section": "Chores"
-            },
-            {
-              "type": "docs",
-              "section": "Documentation"
-            },
-            {
-              "type": "refactor",
-              "section": "Refactor"
-            },
-            {
-              "type": "style",
-              "section": "Style"
-            },
-            {
-              "type": "test",
-              "section": "Tests"
-            }
-          ]
-        }
-      }
-    }
-  }
+	"name": "sarlink-portal",
+	"version": "0.2.2",
+	"type": "module",
+	"private": true,
+	"scripts": {
+		"dev": "next dev --turbopack",
+		"build": "next build",
+		"start": "next start",
+		"lint": "next lint",
+		"prepare": "husky",
+		"release": "release-it"
+	},
+	"dependencies": {
+		"@commitlint/cli": "^19.8.1",
+		"@commitlint/config-conventional": "^19.8.1",
+		"@faker-js/faker": "^9.3.0",
+		"@hookform/resolvers": "^5.1.1",
+		"@pyncz/tailwind-mask-image": "^2.0.0",
+		"@radix-ui/react-dialog": "^1.1.14",
+		"@radix-ui/react-progress": "^1.1.7",
+		"@tailwindcss/postcss": "^4.1.11",
+		"@tanstack/react-query": "^5.61.4",
+		"axios": "^1.8.4",
+		"class-variance-authority": "^0.7.1",
+		"clsx": "^2.1.1",
+		"cmdk": "^1.1.1",
+		"commitlint": "^19.8.1",
+		"date-fns": "^4.1.0",
+		"embla-carousel-react": "^8.6.0",
+		"husky": "^9.1.7",
+		"input-otp": "^1.4.2",
+		"jotai": "2.8.0",
+		"lucide-react": "^0.523.0",
+		"moment": "^2.30.1",
+		"motion": "^12.15.0",
+		"next": "15.5.3",
+		"next-auth": "^4.24.11",
+		"next-themes": "^0.4.6",
+		"nextjs-toploader": "^3.7.15",
+		"nuqs": "^2.4.3",
+		"radix-ui": "^1.4.2",
+		"react": "19.1.0",
+		"react-aria-components": "^1.5.0",
+		"react-day-picker": "^9.7.0",
+		"react-dom": "19.1.0",
+		"react-hook-form": "^7.58.1",
+		"react-phone-number-input": "^3.4.9",
+		"react-resizable-panels": "^3.0.3",
+		"recharts": "^3.0.0",
+		"release-it": "^19.0.5",
+		"sonner": "^2.0.5",
+		"tailwind-merge": "^3.3.1",
+		"tailwindcss-animate": "^1.0.7",
+		"vaul": "^1.1.2",
+		"zod": "^3.25.67"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "2.0.6",
+		"@release-it/conventional-changelog": "^10.0.1",
+		"@types/node": "^22.10.2",
+		"@types/react": "^19.1.0",
+		"@types/react-dom": "^19.1.2",
+		"@typescript-eslint/eslint-plugin": "^8.35.0",
+		"@typescript-eslint/parser": "^8.35.0",
+		"eslint": "^9.29.0",
+		"eslint-config-next": "15.1.2",
+		"postcss": "^8.5.6",
+		"tailwindcss": "^4.1.11",
+		"tailwindcss-motion": "^1.1.0",
+		"ts-node": "^10.9.2",
+		"tw-animate-css": "^1.3.4",
+		"typescript": "^5.8.3"
+	},
+	"release-it": {
+		"git": {
+			"commitMessage": "chore: release v${version}"
+		},
+		"github": {
+			"release": true
+		},
+		"npm": {
+			"publish": false
+		},
+		"plugins": {
+			"@release-it/conventional-changelog": {
+				"infile": "CHANGELOG.md",
+				"preset": {
+					"name": "conventionalcommits",
+					"types": [
+						{
+							"type": "feat",
+							"section": "Features"
+						},
+						{
+							"type": "fix",
+							"section": "Bug Fixes"
+						},
+						{
+							"type": "chore",
+							"section": "Chores"
+						},
+						{
+							"type": "docs",
+							"section": "Documentation"
+						},
+						{
+							"type": "refactor",
+							"section": "Refactor"
+						},
+						{
+							"type": "style",
+							"section": "Style"
+						},
+						{
+							"type": "test",
+							"section": "Tests"
+						}
+					]
+				}
+			}
+		}
+	}
 }

queries/authentication.ts

@@ -1,201 +1,201 @@
 "use server";
 import { z } from "zod";
 import type {
-  ActionState,
-  FilterTempUserResponse,
-  FilterUserResponse,
+	ActionState,
+	FilterTempUserResponse,
+	FilterUserResponse,
 } from "@/actions/auth-actions";
 import type { TAuthUser, User } from "@/lib/types/user";
 import axiosInstance from "@/utils/axiosInstance";
 import { handleApiResponse } from "@/utils/tryCatch";
 
 export async function login({
-  password,
-  username,
+	password,
+	username,
 }: {
-  username: string;
-  password: string;
+	username: string;
+	password: string;
 }): Promise<TAuthUser> {
-  const response = await axiosInstance
-    .post("/auth/login/", {
-      username: username,
-      password: password,
-    })
-    .then((res) => {
-      console.log(res);
-      return res.data; // Return the data from the response
-    })
-    .catch((err) => {
-      console.log(err.response);
-      throw err; // Throw the error to maintain the Promise rejection
-    });
+	const response = await axiosInstance
+		.post("/auth/login/", {
+			username: username,
+			password: password,
+		})
+		.then((res) => {
+			console.log(res);
+			return res.data; // Return the data from the response
+		})
+		.catch((err) => {
+			console.log(err.response);
+			throw err; // Throw the error to maintain the Promise rejection
+		});
 
-  return response;
+	return response;
 }
 
 export async function logout({ token }: { token: string }) {
-  const response = await fetch(
-    `${process.env.SARLINK_API_BASE_URL}/auth/logout/`,
-    {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Token ${token}`, // Include the token for authentication
-      },
-    },
-  );
+	const response = await fetch(
+		`${process.env.SARLINK_API_BASE_URL}/auth/logout/`,
+		{
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+				Authorization: `Token ${token}`, // Include the token for authentication
+			},
+		},
+	);
 
-  if (response.status !== 204) {
-    throw new Error("Failed to log out from the backend");
-  }
-  console.log("logout res in backend", response);
+	if (response.status !== 204) {
+		throw new Error("Failed to log out from the backend");
+	}
+	console.log("logout res in backend", response);
 
-  // Since the API endpoint returns 204 No Content on success, we don't need to parse JSON
-  return null; // Return null to indicate a successful logout with no content
+	// Since the API endpoint returns 204 No Content on success, we don't need to parse JSON
+	return null; // Return null to indicate a successful logout with no content
 }
 
 export async function checkIdOrPhone({
-  id_card,
-  phone_number,
+	id_card,
+	phone_number,
 }: {
-  id_card?: string;
-  phone_number?: string;
+	id_card?: string;
+	phone_number?: string;
 }) {
-  const response = await fetch(
-    `${process.env.SARLINK_API_BASE_URL}/api/auth/users/filter/?id_card=${id_card}&mobile=${phone_number}`,
-    {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    },
-  );
-  const data = (await response.json()) as FilterUserResponse;
-  return data;
+	const response = await fetch(
+		`${process.env.SARLINK_API_BASE_URL}/api/auth/users/filter/?id_card=${id_card}&mobile=${phone_number}`,
+		{
+			method: "GET",
+			headers: {
+				"Content-Type": "application/json",
+			},
+		},
+	);
+	const data = (await response.json()) as FilterUserResponse;
+	return data;
 }
 
 export async function checkTempIdOrPhone({
-  id_card,
-  phone_number,
+	id_card,
+	phone_number,
 }: {
-  id_card?: string;
-  phone_number?: string;
+	id_card?: string;
+	phone_number?: string;
 }) {
-  const response = await fetch(
-    `${process.env.SARLINK_API_BASE_URL}/api/auth/users/temp/filter/?id_card=${id_card}&mobile=${phone_number}`,
-    {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    },
-  );
-  const data = (await response.json()) as FilterTempUserResponse;
-  return data;
+	const response = await fetch(
+		`${process.env.SARLINK_API_BASE_URL}/api/auth/users/temp/filter/?id_card=${id_card}&mobile=${phone_number}`,
+		{
+			method: "GET",
+			headers: {
+				"Content-Type": "application/json",
+			},
+		},
+	);
+	const data = (await response.json()) as FilterTempUserResponse;
+	return data;
 }
 
 type TSignupUser = Pick<
-  User,
-  "username" | "address" | "mobile" | "id_card" | "dob"
+	User,
+	"username" | "address" | "mobile" | "id_card" | "dob"
 > & {
-  firstname: string;
-  lastname: string;
-  atoll: number;
-  island: number;
-  acc_no: string;
-  terms_accepted: boolean;
-  policy_accepted: boolean;
+	firstname: string;
+	lastname: string;
+	atoll: number;
+	island: number;
+	acc_no: string;
+	terms_accepted: boolean;
+	policy_accepted: boolean;
 };
 export async function backendRegister({ payload }: { payload: TSignupUser }) {
-  console.log("backendRegister payload", payload);
-  const response = await fetch(
-    `${process.env.SARLINK_API_BASE_URL}/api/auth/register/`,
-    {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(payload),
-    },
-  );
-  console.log("backendRegister response", response);
-  return handleApiResponse<{ t_username: string }>(response, "backendRegister");
+	console.log("backendRegister payload", payload);
+	const response = await fetch(
+		`${process.env.SARLINK_API_BASE_URL}/api/auth/register/`,
+		{
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify(payload),
+		},
+	);
+	console.log("backendRegister response", response);
+	return handleApiResponse<{ t_username: string }>(response, "backendRegister");
 }
 
 const formSchema = z.object({
-  mobile: z.string().regex(/^[79]\d{6}$/, "Please enter a valid phone number"),
-  otp: z
-    .string()
-    .min(6, {
-      message: "OTP is required.",
-    })
-    .max(6, {
-      message: "OTP is required.",
-    }),
+	mobile: z.string().regex(/^[79]\d{6}$/, "Please enter a valid phone number"),
+	otp: z
+		.string()
+		.min(6, {
+			message: "OTP is required.",
+		})
+		.max(6, {
+			message: "OTP is required.",
+		}),
 });
 
 export async function VerifyRegistrationOTP(
-  _actionState: ActionState,
-  formData: FormData,
+	_actionState: ActionState,
+	formData: FormData,
 ) {
-  const formValues = Object.fromEntries(formData.entries());
-  const result = formSchema.safeParse(formValues);
-  console.log("formValues", formValues);
-  if (!result.success) {
-    return {
-      message: result.error.errors[0].message, // Get the error message from Zod
-      status: "error",
-    };
-  }
+	const formValues = Object.fromEntries(formData.entries());
+	const result = formSchema.safeParse(formValues);
+	console.log("formValues", formValues);
+	if (!result.success) {
+		return {
+			message: result.error.errors[0].message, // Get the error message from Zod
+			status: "error",
+		};
+	}
 
-  if (formValues.otp === "") {
-    return {
-      message: "OTP is required.",
-      status: "error",
-    };
-  }
+	if (formValues.otp === "") {
+		return {
+			message: "OTP is required.",
+			status: "error",
+		};
+	}
 
-  const { mobile, otp } = formValues;
+	const { mobile, otp } = formValues;
 
-  const response = await fetch(
-    `${process.env.SARLINK_API_BASE_URL}/api/auth/register/verify/`,
-    {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        mobile: mobile,
-        otp: otp as string,
-      }),
-    },
-  );
-  const responseJson = await response.json();
-  console.log("responseJson", responseJson);
-  const data = responseJson as { message: string; verified: boolean };
+	const response = await fetch(
+		`${process.env.SARLINK_API_BASE_URL}/api/auth/register/verify/`,
+		{
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify({
+				mobile: mobile,
+				otp: otp as string,
+			}),
+		},
+	);
+	const responseJson = await response.json();
+	console.log("responseJson", responseJson);
+	const data = responseJson as { message: string; verified: boolean };
 
-  if (data.verified) {
-    return {
-      message:
-        "Your account has been successfully verified! You may login now.",
-      status: "verify_success",
-    };
-    // const [mobileLoginError, mobileLoginResponse] = await tryCatch(
-    // 	backendMobileLogin({ mobile: mobile as string }),
-    // );
-    // if (mobileLoginError) {
-    // 	return {
-    // 		message: "Login Failed. Please contact support.",
-    // 		status: "login_error",
-    // 	};
-    // }
-    // if (mobileLoginResponse) {
-    // 	redirect(`/auth/verify-otp?phone_number=${mobile}`);
-    // }
-  }
-  return {
-    message:
-      "Your account could not be verified. Please wait for you verification to be processed.",
-    status: "verify_error",
-  };
+	if (data.verified) {
+		return {
+			message:
+				"Your account has been successfully verified! You may login now.",
+			status: "verify_success",
+		};
+		// const [mobileLoginError, mobileLoginResponse] = await tryCatch(
+		// 	backendMobileLogin({ mobile: mobile as string }),
+		// );
+		// if (mobileLoginError) {
+		// 	return {
+		// 		message: "Login Failed. Please contact support.",
+		// 		status: "login_error",
+		// 	};
+		// }
+		// if (mobileLoginResponse) {
+		// 	redirect(`/auth/verify-otp?phone_number=${mobile}`);
+		// }
+	}
+	return {
+		message:
+			"Your account could not be verified. Please wait for you verification to be processed.",
+		status: "verify_error",
+	};
 }

queries/devices.ts

@@ -187,7 +187,7 @@ export async function blockDeviceAction(
 					blocked: isBlocking,
 					reason_for_blocking: session?.user?.is_superuser
 						? reason_for_blocking ||
-						(action === "simple-block" ? "Blocked by admin" : "")
+							(action === "simple-block" ? "Blocked by admin" : "")
 						: isBlocking
 							? "Blocked by parent"
 							: "-",