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

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