---
type: "Reference"
title: "Admin ui"
openwiki_generated: true
verified:
  - by: openwiki/0.7.2
    at: 2026-10-14T20:42:32.326Z
---



## Page Structure

The Admin UI uses the Next.js App Router with the following primary routes:

- **Home (`/`)** – Displays API status and a branded title ASCII art. Implements client-side data fetching for health checks via React Query.
- **Login (`/login`)** – Contains sign-in and sign-up form components for authentication.
- **Dashboard (`/dashboard`)** – Protected route requiring user session; redirects unauthenticated users to the login page.

Routing and layout conventions follow Next.js App Router patterns:
- `src/app/layout.tsx` defines the root layout with global fonts (Geist, Geist_Mono) and providers wrapper.
- `src/app/page.tsx` serves as the home page entry point.
- Route-specific directories (`src/app/login/`, `src/app/dashboard/`) contain route components and UI elements.

## Component Libraries and Styling

The UI utilizes:
- **Tailwind CSS** for utility-first styling, evident in className attributes across components (e.g., `container mx-auto max-w-3xl px-4 py-2`).
- **Custom component library** in `src/components/`:
  - `header.tsx`: Application header
  - `providers.tsx`: React context providers (query client, auth, theme)
  - `theme-provider.tsx`: Dark/light mode toggle logic
  - `user-menu.tsx`: User avatar and account actions
  - `sign-in-form.tsx` / `sign-up-form.tsx`: Authentication forms
  - `loader.tsx`, `mode-toggle.tsx`: Shared UI elements
- **Next.js font optimization** via `next/font/google` for Geist and Geist_Mono typefaces.

## State Management

State is managed through:
- **React Query (`@tanstack/react-query`)** for server state:
  - Home page uses `useQuery` with `orpc.healthCheck.queryOptions()` to fetch API status.
  - Query client is instantiated in `src/components/providers.tsx` and wrapped via `<Providers>`.
- **Authentication state** via custom `authClient` (`src/lib/auth-client.ts`):
  - `authClient.useSession()` hook provides session data in dashboard route.
  - Session checks trigger redirects to `/login` when unauthenticated.
- **Type-safe API communication** through `orpc` utility (`src/utils/orpc.ts`):
  - Enables end-to-end type safety for backend procedures.
  - Used in home page health check and likely other data fetching operations.

## Tenant-Scoped Views

Tenant context is implicitly handled through authentication:
- Dashboard route (`src/app/dashboard/page.tsx`) verifies user session via `authClient.useSession()`.
- Absence of session triggers redirect to login page, enforcing tenant-scoped access.
- Backend services (referenced in related systems) enforce tenant isolation; UI layer reflects user-specific data after authentication.
- No explicit tenant switching UI observed in current codebase; context derived from authenticated user's tenant association.

## Entry Points and Control Flow

1. **Application bootstrap**:
   - `src/app/layout.tsx` initializes global styles, fonts, and providers.
   - `<Providers>` wraps React Query client and auth context.

2. **Home page load**:
   - Client component (`src/app/page.tsx`) executes `useQuery` for health check.
   - Renders API status indicator (connected/disconnected) and title art.

3. **Authentication flow**:
   - Unauthenticated access to `/dashboard` redirects to `/login`.
   - Login page renders `SignInForm` and `SignUpForm` components.
   - Successful auth establishes session via `authClient`.

4. **Dashboard access**:
   - Session validation occurs via `useEffect` in `src/app/dashboard/page.tsx`.
   - Authenticated users see dashboard header and `<Dashboard />` component.

## Relationships with Related Systems

- **Company OS** (`/openwiki/systems/company-os.md`): Admin UI serves as the operational interface for company-level configurations.
- **Tenant Management** (`/openwiki/operations/tenant-management.md`): UI reflects tenant-scoped data; authentication gateway enforces tenant boundaries.
- **Admin Workflows** (`/openwiki/workflows/admin-tasks.md`): UI components enable execution of administrative tasks documented in workflows.

## Extension Points

- **Adding new routes**: Create route directories under `src/app/` with `page.tsx` and optional `layout.tsx`.
- **UI components**: Extend `src/components/` with reusable elements following existing patterns (Tailwind, composable props).
- **State management**: Add React Query hooks in `src/lib/` or utilize existing query client via context.
- **Authentication integration**: Enhance `authClient` in `src/lib/auth-client.ts` for additional providers or session properties.