From 780239dbbe8f63b518485521bf60b4d9e09beba3 Mon Sep 17 00:00:00 2001
From: i701 <idhaan701@outlook.com>
Date: Sun, 13 Jul 2025 23:09:02 +0500
Subject: [PATCH] =?UTF-8?q?feat(admin):=20add=20usertable=20and=20update?=
 =?UTF-8?q?=20next=20config=20=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/user-table.tsx | 309 ++++++++++++++++----------------------
 next.config.ts            |  18 +--
 2 files changed, 130 insertions(+), 197 deletions(-)

diff --git a/components/user-table.tsx b/components/user-table.tsx
index 1b8e29b..cd769de 100644
--- a/components/user-table.tsx
+++ b/components/user-table.tsx
@@ -13,198 +13,141 @@
 // import { Badge } from "./ui/badge";
 // import { Button } from "./ui/button";
 
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { getUsers } from "@/queries/users";
+import { tryCatch } from "@/utils/tryCatch";
+import ClientErrorMessage from "./client-error-message";
+import Pagination from "./pagination";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import {
+	Table,
+	TableBody,
+	TableCaption,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "./ui/table";
+
 export async function UsersTable({
 	searchParams,
 }: {
 	searchParams: Promise<{
-		query: string;
-		page: number;
-		sortBy: string;
-		status: string;
+		[key: string]: unknown;
 	}>;
 }) {
-	const query = (await searchParams)?.query || "";
-	console.log(query);
-	// const page = (await searchParams)?.page;
-	// const sortBy = (await searchParams)?.sortBy || "asc";
-	// const verified = (await searchParams)?.status || "all";
-	// const totalUsers = await prisma.user.count({
-	// 	where: {
-	// 		OR: [
-	// 			{
-	// 				name: {
-	// 					contains: query || "",
-	// 					mode: "insensitive",
-	// 				},
-	// 			},
-	// 			{
-	// 				phoneNumber: {
-	// 					contains: query || "",
-	// 					mode: "insensitive",
-	// 				},
-	// 			},
-	// 			{
-	// 				address: {
-	// 					contains: query || "",
-	// 					mode: "insensitive",
-	// 				},
-	// 			},
-	// 			{
-	// 				id_card: {
-	// 					contains: query || "",
-	// 					mode: "insensitive",
-	// 				},
-	// 			},
-	// 		],
-	// 		verified: verified === "all" ? undefined : verified === "verified",
-	// 	},
+	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 totalPages = Math.ceil(totalUsers / 10);
-	// const limit = 10;
-	// const offset = (Number(page) - 1) * limit || 0;
+	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;
 
-	// const users = await prisma.user.findMany({
-	// 	where: {
-	// 		OR: [
-	// 			{
-	// 				name: {
-	// 					contains: query || "",
-	// 					mode: "insensitive",
-	// 				},
-	// 			},
-	// 			{
-	// 				phoneNumber: {
-	// 					contains: query || "",
-	// 					mode: "insensitive",
-	// 				},
-	// 			},
-	// 			{
-	// 				address: {
-	// 					contains: query || "",
-	// 					mode: "insensitive",
-	// 				},
-	// 			},
-	// 			{
-	// 				id_card: {
-	// 					contains: query || "",
-	// 					mode: "insensitive",
-	// 				},
-	// 			},
-	// 		],
-	// 		verified: verified === "all" ? undefined : verified === "verified",
+	// 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">
+						<TableCaption>Table of all users.</TableCaption>
+						<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>
 
-	// 	},
-	// 	include: {
-	// 		island: true,
-	// 		atoll: true,
-	// 	},
-	// 	skip: offset,
-	// 	take: limit,
-	// 	orderBy: {
-	// 		id: `${sortBy}` as "asc" | "desc",
-	// 	},
-	// });
+									<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>
 
-	// const users = await prisma.user.findMany({
-	// 	where: {
-	// 		role: "USER",
-	// 	},
-	// 	include: {
-	// 		atoll: true,
-	// 		island: true,
-	// 	},
-	// });
-	return null;
-	// return (
-	// 	<div>
-	// 		{users.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">
-	// 					<TableCaption>Table of all users.</TableCaption>
-	// 					<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">
-	// 						{users.map((user) => (
-	// 							<TableRow
-	// 								className={`${user.verified && "title-bg dark:bg-black"}`}
-	// 								key={user.id}
-	// 							>
-	// 								<TableCell className="font-medium">{user.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.phoneNumber}</TableCell>
-	// 								<TableCell>
-	// 									<Link href={`/users/${user.id}/verify`}>
-	// 										<Button>Details</Button>
-	// 									</Link>
-	// 								</TableCell>
-	// 							</TableRow>
-	// 						))}
-	// 					</TableBody>
-	// 					<TableFooter>
-	// 						<TableRow>
-	// 							<TableCell colSpan={8}>
-	// 								{query.length > 0 && (
-	// 									<p className="text-sm text-muted-foreground">
-	// 										Showing {users.length} locations for &quot;{query}
-	// 										&quot;
-	// 									</p>
-	// 								)}
-	// 							</TableCell>
-	// 							<TableCell className="text-muted-foreground">
-	// 								{totalUsers} users
-	// 							</TableCell>
-	// 						</TableRow>
-	// 					</TableFooter>
-	// 				</Table>
-	// 				<Pagination totalPages={totalPages} currentPage={page} />
-	// 			</>
-	// 		)}
-	// 	</div>
-	// );
+									<TableCell>{user.mobile}</TableCell>
+									<TableCell>
+										<Link href={`/users/${user.id}/verify`}>
+											<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>
+	);
 }
diff --git a/next.config.ts b/next.config.ts
index 32b8868..ae7e156 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -4,20 +4,10 @@ const nextConfig: NextConfig = {
 	/* config options here */
 	images: {
 		remotePatterns: [
-			{
-				protocol: "http",
-				hostname: "verifypersonapi.baraveli.dev",
-				pathname: "/images/**",
-				search: "",
-				port: "",
-			},
-			{
-				protocol: "https",
-				hostname: "i.pravatar.cc",
-				pathname: "/300/**",
-				search: "",
-				port: "",
-			},
+			new URL('http://people-api.sarlink.net/images/**'),
+			new URL('http://verifypersonapi.baraveli.dev/images/**'),
+			new URL('https://i.pravatar.cc/300/**'),
+			new URL('https://sarlink-portal.vercel.app/**'),
 		],
 	},
 	output: "standalone",