Something went wrong. Try again.
A lexicon-driven AppView for ATProto.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293"use client";
import { useEffect, useState } from "react";
import { useCurrentUser } from "@/hooks/use-current-user";import { getStats } from "@/lib/api";import type { StatsResponse } from "@/types/stats";import { SiteHeader } from "@/components/site-header";import { Card, CardDescription, CardHeader, CardTitle,} from "@/components/ui/card";import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from "@/components/ui/table";
export default function DashboardPage() { const { hasPermission } = useCurrentUser(); const [stats, setStats] = useState<StatsResponse | null>(null); const [error, setError] = useState<string | null>(null); const canReadStats = hasPermission("stats:read");
useEffect(() => { if (!canReadStats) return; getStats() .then(setStats) .catch((e) => setError(e.message)); }, [canReadStats]);
return ( <> <SiteHeader title="Dashboard" /> <div className="flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6"> {error && <p className="text-destructive text-sm">{error}</p>} {canReadStats && ( <> <div className="grid grid-cols-1 gap-4 sm:grid-cols-2"> <Card> <CardHeader className={"text-center sm:text-left"}> <CardDescription>Total Records</CardDescription> <CardTitle className="text-xl sm:text-2xl font-semibold tabular-nums"> {stats ? stats.total_records.toLocaleString() : "--"} </CardTitle> </CardHeader> </Card> <Card> <CardHeader className={"text-center sm:text-left"}> <CardDescription>Collections</CardDescription> <CardTitle className="text-xl sm:text-2xl font-semibold tabular-nums"> {stats ? stats.collections.length : "--"} </CardTitle> </CardHeader> </Card> </div>
{stats && stats.collections.length > 0 && ( <div className="rounded-lg border"> <Table> <TableHeader> <TableRow> <TableHead>Collection</TableHead> <TableHead className="text-right">Records</TableHead> </TableRow> </TableHeader> <TableBody> {stats.collections.map((col) => ( <TableRow key={col.collection}> <TableCell className="font-mono text-sm"> {col.collection} </TableCell> <TableCell className="text-right tabular-nums"> {col.count.toLocaleString()} </TableCell> </TableRow> ))} </TableBody> </Table> </div> )} </> )} </div> </> );}