sarlink-portal/components/user-table.tsx

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,
	TableCell,
	TableFooter,
	TableHead,
	TableHeader,
	TableRow,
} from "./ui/table";

export async function UsersTable({
	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;
	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, users] = await tryCatch(getUsers(apiParams));
	if (error) {
		if (error.message === "UNAUTHORIZED") {
			redirect("/auth/signin");
		}
		return <ClientErrorMessage message={error.message} />;
	}
	const { meta, data } = users;

	// 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">
						<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>

									<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.mobile}</TableCell>
									<TableCell>
										<Link href={`/users/${user.id}/details`}>
											<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>
	);
}