manage/frontend/src/pages/service-tabs/UsersTab.tsx

/** UsersTab — Authentik user directory for the Authentik service page. */
import { useState } from "react";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
	Table,
	TableBody,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "@/components/ui/table";
import type { ServiceInstance } from "../../types";
import { useAuthentikUsers } from "../../hooks/useAuthentik";

const PAGE_SIZE = 25;

export function UsersTab({ instance }: { instance: ServiceInstance }) {
	const [search, setSearch] = useState("");
	const [page, setPage] = useState(1);
	const [committedSearch, setCommittedSearch] = useState("");

	const { data, isLoading } = useAuthentikUsers(instance.id, {
		search: committedSearch,
		page,
		page_size: PAGE_SIZE,
	});

	const error = data?.error;
	const users = data?.items ?? [];
	const total = data?.total ?? 0;
	const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));

	function handleSearch() {
		setPage(1);
		setCommittedSearch(search);
	}

	return (
		<div className="flex flex-col gap-3">
			{error ? (
				<Alert variant="destructive">
					<AlertDescription>{error}</AlertDescription>
				</Alert>
			) : null}

			<div className="flex items-center gap-2">
				<Input
					placeholder="Search users…"
					value={search}
					onChange={(e) => setSearch(e.target.value)}
					onKeyDown={(e) => {
						if (e.key === "Enter") handleSearch();
					}}
					className="max-w-xs"
				/>
				<Button variant="outline" onClick={handleSearch}>
					Search
				</Button>
			</div>

			<div className="rounded-lg border">
				<Table>
					<TableHeader>
						<TableRow>
							<TableHead>Name</TableHead>
							<TableHead>Username</TableHead>
							<TableHead>Email</TableHead>
							<TableHead className="w-24">Status</TableHead>
						</TableRow>
					</TableHeader>
					<TableBody>
						{isLoading && users.length === 0 ? (
							<TableRow>
								<TableCell colSpan={4} className="text-muted-foreground">
									Loading…
								</TableCell>
							</TableRow>
						) : users.length === 0 ? (
							<TableRow>
								<TableCell colSpan={4} className="text-muted-foreground">
									No users found.
								</TableCell>
							</TableRow>
						) : (
							users.map((user) => (
								<TableRow key={user.pk}>
									<TableCell className="font-medium">
										{user.name || "—"}
									</TableCell>
									<TableCell>{user.username}</TableCell>
									<TableCell className="text-muted-foreground">
										{user.email || "—"}
									</TableCell>
									<TableCell>
										<Badge variant={user.is_active ? "default" : "secondary"}>
											{user.is_active ? "Active" : "Inactive"}
										</Badge>
									</TableCell>
								</TableRow>
							))
						)}
					</TableBody>
				</Table>
			</div>

			{total > 0 ? (
				<div className="flex items-center justify-between text-sm text-muted-foreground">
					<span>
						{total} user{total === 1 ? "" : "s"} · Page {page} of {totalPages}
					</span>
					<div className="flex gap-1">
						<Button
							variant="outline"
							size="sm"
							onClick={() => setPage((p) => Math.max(1, p - 1))}
							disabled={page <= 1}
						>
							Previous
						</Button>
						<Button
							variant="outline"
							size="sm"
							onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
							disabled={page >= totalPages}
						>
							Next
						</Button>
					</div>
				</div>
			) : null}
		</div>
	);
}