Add filter, pagination, search, and user table components

components/user-table.tsx

@@ -0,0 +1,204 @@
+import {
+	Table,
+	TableBody,
+	TableCaption,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import prisma from "@/lib/db";
+import { Badge } from "./ui/badge";
+import Pagination from "./pagination";
+import { UserVerifyDialog } from "./user/user-verify-dialog";
+
+export async function UsersTable({
+	searchParams,
+}: {
+	searchParams: Promise<{
+		query: string;
+		page: number;
+		sortBy: string;
+		status: string;
+	}>;
+}) {
+	const query = (await searchParams)?.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",
+					},
+				},
+				{
+					house_name: {
+						contains: query || "",
+						mode: "insensitive",
+					},
+				},
+				{
+					id_card: {
+						contains: query || "",
+						mode: "insensitive",
+					},
+				},
+			],
+			verified: verified === "all" ? undefined : verified === "verified",
+		},
+	});
+
+	const totalPages = Math.ceil(totalUsers / 10);
+	const limit = 10;
+	const offset = (Number(page) - 1) * limit || 0;
+
+	const users = await prisma.user.findMany({
+		where: {
+			OR: [
+				{
+					name: {
+						contains: query || "",
+						mode: "insensitive",
+					},
+				},
+				{
+					phoneNumber: {
+						contains: query || "",
+						mode: "insensitive",
+					},
+				},
+				{
+					house_name: {
+						contains: query || "",
+						mode: "insensitive",
+					},
+				},
+				{
+					id_card: {
+						contains: query || "",
+						mode: "insensitive",
+					},
+				},
+			],
+			verified: verified === "all" ? undefined : verified === "verified",
+		},
+		include: {
+			island: true,
+			atoll: true,
+		},
+		skip: offset,
+		take: limit,
+		orderBy: {
+			name: `${sortBy}` as "asc" | "desc",
+		},
+	});
+
+	// const users = await prisma.user.findMany({
+	// 	where: {
+	// 		role: "USER",
+	// 	},
+	// 	include: {
+	// 		atoll: true,
+	// 		island: true,
+	// 	},
+	// });
+	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"}`}
+									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.house_name}</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>
+										<UserVerifyDialog user={user} />
+									</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>
+	);
+}