feat(user-topups): add user topups page with dynamic filtering and admin table integration ✨

feat(admin-devices-table): update admin check to use is_admin and clean up device display logic ✨
feat(admin-topup-table): create admin topups table with pagination and detail view links ✨
fix(user-payments-table): correct user data access and display payment amount with currency ✨
feat(app-sidebar): add link for user topups in the admin sidebar ✨
fix(backend-types): enhance Payment interface to include user details for better data handling ✨

components/admin/admin-devices-table.tsx

@@ -18,21 +18,18 @@ import { getDevices } from "@/queries/devices";
 import { tryCatch } from "@/utils/tryCatch";
 import BlockDeviceDialog from "../block-device-dialog";
 import ClientErrorMessage from "../client-error-message";
-import DeviceCard from "../device-card";
 import Pagination from "../pagination";
 
 export async function AdminDevicesTable({
 	searchParams,
-	parentalControl,
 }: {
 	searchParams: Promise<{
 		[key: string]: unknown;
 	}>;
-	parentalControl?: boolean;
 }) {
 	const resolvedParams = await searchParams;
 	const session = await getServerSession(authOptions);
-	const isAdmin = session?.user?.is_superuser;
+	const isAdmin = session?.user?.is_admin;
 
 	const page = Number.parseInt(resolvedParams.page as string) || 1;
 	const limit = 10;
@@ -67,7 +64,7 @@ export async function AdminDevicesTable({
 				</div>
 			) : (
 				<>
-					<div className="hidden sm:block">
+					<div>
 						<Table className="overflow-scroll">
 							<TableCaption>Table of all devices.</TableCaption>
 							<TableHeader>
@@ -167,15 +164,7 @@ export async function AdminDevicesTable({
 							</TableFooter>
 						</Table>
 					</div>
-					<div className="sm:hidden my-4">
-						{data?.map((device) => (
-							<DeviceCard
-								parentalControl={parentalControl}
-								key={device.id}
-								device={device}
-							/>
-						))}
-					</div>
+
 					<Pagination
 						totalPages={meta?.last_page}
 						currentPage={meta?.current_page}

components/admin/admin-topup-table.tsx

@@ -0,0 +1,205 @@
+import { Calendar } from "lucide-react";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { getTopups } from "@/actions/payment";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import type { Topup } from "@/lib/backend-types";
+import { cn } from "@/lib/utils";
+import { tryCatch } from "@/utils/tryCatch";
+import Pagination from "../pagination";
+import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
+
+export async function AdminTopupsTable({
+  searchParams,
+}: {
+  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,));
+
+  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 className="hidden sm:block">
+            <Table className="overflow-scroll">
+              <TableCaption>Table of all topups.</TableCaption>
+              <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>
+          <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>
+      <div className="flex flex-col items-start text-sm border rounded p-2 mt-2 w-full bg-white dark:bg-black">
+        {topup?.user?.name}
+        <span className="text-muted-foreground">{topup?.user?.id_card}</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="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/admin/user-payments-table.tsx

@@ -95,13 +95,13 @@ export async function UsersPaymentsTable({
 									<TableCell className="font-medium">
 										{/* {payment.user.id_card} */}
 										<div className="flex flex-col items-start">
-											{payment.devices[0]?.user?.name}
+											{payment?.user?.name}
 											<span className="text-muted-foreground">
-												{payment.devices[0]?.user?.id_card}
+												{payment?.user?.id_card}
 											</span>
 										</div>{" "}
 									</TableCell>
-									<TableCell>{payment.amount}</TableCell>
+									<TableCell>{payment.amount} MVR</TableCell>
 									<TableCell>{payment.number_of_months} Months</TableCell>
 
 									<TableCell>
@@ -144,7 +144,7 @@ export async function UsersPaymentsTable({
 									</TableCell>
 
 									<TableCell>
-										<Link href={`/payments/${payment.id}/verify`}>
+										<Link href={`/payments/${payment.id}`}>
 											<Button>Details</Button>
 										</Link>
 									</TableCell>