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