feat(portal-ui): enhance user and device information display in admin and user devices tables ✨

app/(dashboard)/devices/page.tsx

@@ -18,7 +18,6 @@ export default async function Devices({
 	const query = (await searchParams)?.query || "";
 	const page = (await searchParams)?.page || 1;
 	const session = await getServerSession(authOptions);
-	if (session?.user?.is_admin) return redirect("/user-devices");
 	return (
 		<div>
 			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">

app/(dashboard)/user-devices/page.tsx

@@ -1,7 +1,6 @@
 import { Suspense } from "react";
 import { AdminDevicesTable } from "@/components/admin/admin-devices-table";
 import DynamicFilter from "@/components/generic-filter";
-import Search from "@/components/search";
 
 export default async function UserDevices({
 	searchParams,
@@ -38,14 +37,20 @@ export default async function UserDevices({
 							name: "mac",
 							label: "MAC Address",
 							type: "string",
-							placeholder: "Enter MAC address",
+							placeholder: "Enter device MAC address",
 						},
 						{
 							name: "vendor",
 							label: "Vendor",
 							type: "string",
-							placeholder: "Enter vendor name",
+							placeholder: "Enter device vendor name",
 						},
+						{
+							name: "user",
+							label: "Device User",
+							type: "string",
+							placeholder: "User name or id card",
+						}
 					]}
 				/>
 			</div>

components/admin/admin-devices-table.tsx

@@ -16,7 +16,6 @@ import {
 import { cn } from "@/lib/utils";
 import { getDevices } from "@/queries/devices";
 import { tryCatch } from "@/utils/tryCatch";
-import AddDevicesToCartButton from "../add-devices-to-cart-button";
 import BlockDeviceDialog from "../block-device-dialog";
 import ClientErrorMessage from "../client-error-message";
 import DeviceCard from "../device-card";
@@ -130,15 +129,23 @@ export async function AdminDevicesTable({
 												)}
 											</div>
 										</TableCell>
-										<TableCell className="font-medium">{device.user}</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>
-											<BlockDeviceDialog
+											{!device.has_a_pending_payment && (
-												admin={isAdmin}
+												<BlockDeviceDialog
-												type={device.blocked ? "unblock" : "block"}
+													admin={isAdmin}
-												device={device}
+													type={device.blocked ? "unblock" : "block"}
-											/>
+													device={device}
+												/>
+											)}
 										</TableCell>
 									</TableRow>
 								))}

components/devices-table.tsx

@@ -1,3 +1,5 @@
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
 import { authOptions } from "@/app/auth";
 import {
 	Table,
@@ -11,8 +13,6 @@ import {
 } from "@/components/ui/table";
 import { getDevices } from "@/queries/devices";
 import { tryCatch } from "@/utils/tryCatch";
-import { getServerSession } from "next-auth";
-import { redirect } from "next/navigation";
 import ClickableRow from "./clickable-row";
 import ClientErrorMessage from "./client-error-message";
 import DeviceCard from "./device-card";

lib/backend-types.ts

@@ -1,3 +1,5 @@
+import { User } from "./types/user";
+
 export interface Links {
 	next_page: string | null;
 	previous_page: string | null;
@@ -45,7 +47,9 @@ export interface Device {
 	expiry_date: string | null;
 	created_at: string;
 	updated_at: string;
-	user: number;
+	user: Pick<User, "id" | "id_card" | "mobile"> & {
+		name: string;
+	};
 }
 
 export interface ApiError {