sarlink-portal/components/user-table.tsx

import {
	Table,
	TableBody,
	TableCaption,
	TableCell,
	TableFooter,
	TableHead,
	TableHeader,
	TableRow,
} from "@/components/ui/table";
import prisma from "@/lib/db";
import Link from "next/link";
import Pagination from "./pagination";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button";

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",
					},
				},
				{
					address: {
						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",
					},
				},
				{
					address: {
						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: {
			id: `${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 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>
	);
}