Admin ui

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.

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 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 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.

Application bootstrap:
- src/app/layout.tsx initializes global styles, fonts, and providers.
- <Providers> wraps React Query client and auth context.
Home page load:
- Client component (src/app/page.tsx) executes useQuery for health check.
- Renders API status indicator (connected/disconnected) and title art.
Authentication flow:
- Unauthenticated access to /dashboard redirects to /login.
- Login page renders SignInForm and SignUpForm components.
- Successful auth establishes session via authClient.
Dashboard access:
- Session validation occurs via useEffect in src/app/dashboard/page.tsx.
- Authenticated users see dashboard header and <Dashboard /> component.

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.

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.