feat: add Authentik access widgets

2026-07-14 21:41:24 +00:00
parent 4562a9dfca
commit 17976eab80
21 changed files with 1082 additions and 214 deletions
@@ -0,0 +1,80 @@
+/** ApplicationsTab — read-only Authentik application directory. */
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { useAuthentikApplications } from "../../hooks/useAuthentik";
+import type { ServiceInstance } from "../../types";
+
+export function ApplicationsTab({ instance }: { instance: ServiceInstance }) {
+	const { data, isLoading } = useAuthentikApplications(instance.id);
+	const applications = data?.items ?? [];
+	return (
+		<div className="flex flex-col gap-3">
+			<Alert>
+				<AlertDescription>
+					Application metadata only; providers, outposts, policies, and
+					effective access evaluation are not shown.
+				</AlertDescription>
+			</Alert>
+			{data?.error ? (
+				<Alert variant="destructive">
+					<AlertDescription>{data.error}</AlertDescription>
+				</Alert>
+			) : null}
+			<div className="rounded-lg border">
+				<Table>
+					<TableHeader>
+						<TableRow>
+							<TableHead>Application</TableHead>
+							<TableHead>Slug</TableHead>
+							<TableHead>Launch URL</TableHead>
+						</TableRow>
+					</TableHeader>
+					<TableBody>
+						{isLoading && applications.length === 0 ? (
+							<TableRow>
+								<TableCell colSpan={3}>
+									<Skeleton className="h-5 w-full" />
+								</TableCell>
+							</TableRow>
+						) : null}
+						{!isLoading && applications.length === 0 ? (
+							<TableRow>
+								<TableCell colSpan={3} className="text-muted-foreground">
+									No applications found.
+								</TableCell>
+							</TableRow>
+						) : null}
+						{applications.map((application) => (
+							<TableRow
+								key={application.id || application.slug || application.name}
+							>
+								<TableCell className="font-medium">
+									{application.name}
+								</TableCell>
+								<TableCell className="font-mono text-xs text-muted-foreground">
+									{application.slug || "—"}
+								</TableCell>
+								<TableCell className="max-w-sm truncate text-muted-foreground">
+									{application.launch_url || "—"}
+								</TableCell>
+							</TableRow>
+						))}
+					</TableBody>
+				</Table>
+			</div>
+			{data && data.total > applications.length ? (
+				<p className="text-sm text-muted-foreground">
+					Showing the first {applications.length} of {data.total} applications.
+				</p>
+			) : null}
+		</div>
+	);
+}