Admin Dashboard & Stats
Relevant source files
The following files were used as context for generating this wiki page:
The Admin Dashboard provides authorized administrators with a high-level overview of the system's core entities. It serves as a central hub for navigating to administrative management modules for customers, users, contracts, and leave types.
The system utilizes a dedicated statistics service to aggregate counts of active (non-archived) records across these modules, presenting them as actionable metrics on the dashboard interface.
System Architecture & Data Flow
The statistics system follows a multi-tier architecture involving the .NET backend service, a TypeScript server function layer, and a React-based frontend dashboard.
Backend Statistics Aggregation
The StatsService on the backend is responsible for querying the AppDbContext to retrieve counts of entities. It specifically filters for entities where IsArchived is false to provide accurate counts of current active data.
Sources: packages/api/Modules/Stats/StatsService.cs:8-16
Frontend Integration
The frontend utilizes TanStack Start's createServerFn to bridge the gap between the client and the backend API.
- Server API Client:
getAdminStatscalls the/api/stats/adminendpoint using a typed OpenAPI fetch client. - Server Function:
fetchAdminStatswraps the API call for use within the TanStack Router loader. - Route Loader: The admin index route (
/_authed/admin/) uses this function to pre-fetch statistics before the component renders.
Sources: packages/web/src/features/stats/stats.server.ts:6-9, packages/web/src/features/stats/stats.functions.ts:4-6, packages/web/src/routes/_authed/admin/index.tsx:5-8
Sequence of Data Retrieval
The following diagram illustrates the flow of statistics from the database to the Admin Dashboard interface.
This diagram shows the synchronous request-response flow required to populate dashboard cards.
Sources: packages/web/src/routes/_authed/admin/index.tsx:5-10, packages/api/Modules/Stats/StatsService.cs:10-15
Data Models
AdminStats Schema
The AdminStats object is the primary data structure returned by the statistics module. It contains four integer counts.
| Field | Type | Description |
|---|---|---|
customers | integer (int32) | Total count of non-archived customer records |
users | integer (int32) | Total count of non-archived user records |
contracts | integer (int32) | Total count of non-archived contract records |
leaveTypes | integer (int32) | Total count of non-archived leave type records |
Sources: packages/web/src/api/schema.ts:639-645, packages/api/Modules/Stats/StatsService.cs:10-15
User Interface Components
Admin Navigation
Administrators access the dashboard and related modules through the AppNavbar. On large screens, specific admin links are displayed; on smaller screens, an "Admin" dropdown menu is provided.
| Label | Target Route | Icon |
|---|---|---|
| Customers | /admin/customers | Building2 |
| Users | /admin/users | Users |
| Contracts | /admin/contracts | FileText |
| Leave types | /admin/leave-types | CalendarClock |
Sources: packages/web/src/components/app-navbar.tsx:32-37
Dashboard Cards
The AdminDashboard component renders a grid of StatCard components. Each card displays a label, the count retrieved from the API, and a link to the respective management page.
The diagram shows the navigation links from dashboard stat summaries to detail management routes.
Sources: packages/web/src/routes/_authed/admin/index.tsx:34-45
Implementation Details
The dashboard cards use a hover effect and transition for interactivity, leveraging the Card component from the internal UI library.
function StatCard({ label, count, href }: StatCardProps) {
return (
<Link to={href}>
<Card className="hover:bg-muted/50 transition-colors cursor-pointer">
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">{label}</CardTitle>
</CardHeader>
<CardContent>
<p className="text-3xl font-bold">{count}</p>
</CardContent>
</Card>
</Link>
);
}
Sources: packages/web/src/routes/_authed/admin/index.tsx:15-29
API Endpoints
The statistics module relies on a single GET endpoint.
| Method | Endpoint | Description | Response Type |
|---|---|---|---|
GET | /api/stats/admin | Returns counts for core admin entities. | AdminStats |
Sources: packages/web/src/api/schema.ts:401-425
The Admin Dashboard & Stats module provides a streamlined entry point for administrative tasks, ensuring that users with the "Admin" role can quickly assess system scale and navigate to relevant management interfaces. It relies on a clean separation between database aggregation logic in StatsService and the React-based presentation layer.