AD-02 Client & Tenant Directory | Admin App Specification

Interactive Client Management & Tenant Table

Design System Parity: 100%

All Plans All Statuses

Company	Owner Email	Plan Tier	Status	Created	Actions
Apex Logistics Global	sarah@apexlogistics.com	Premium $29	Active	2026-06-12
Beacon Construction LLC	mike@beaconbuild.com	Standard $19	Trial (3d)	2026-08-01

Client Directory & Drawer Management Wireflow

Click to Zoom Fullscreen

graph LR
    Directory[Clients Directory Table] --> SelectRow[Click 'Manage' Button]
    SelectRow --> OpenDrawer[Open Side Edit Drawer]
    OpenDrawer --> EditForm{Form Modifications}
    EditForm -->|Update Tier| TierSelect[Standard $19/mo vs Premium $29/mo]
    EditForm -->|Toggle Lock| BlockCheck[Check 'Suspend Workspace' is_blocked]
    EditForm -->|Submit| POSTApi[POST /api/clients Endpoint]
    POSTApi --> OptimisticState[Optimistically Update Local State]
    OptimisticState --> Toast[Display Success Toast & Trigger Refresh]

Client Directory Component Structure

• admin/src/app/clients/page.tsx (Server Component Loader)
• admin/src/app/clients/ClientsClient.tsx (Interactive Directory & Drawer)
• POST /api/clients (Form Mutation Endpoint)

Client Directory Guardrails

Workspace Lockout Security: Toggling is_blocked = true immediately disables employee clocks, locks owner login sessions, and revokes API access tokens.

sequenceDiagram
    autonumber
    actor Admin as Super Admin Operator
    participant UI as ClientsClient Component
    participant API as POST /api/clients
    participant DB as Supabase DB (Companies)

    Admin->>UI: Modify Plan Tier / Trial Expiry Date & Submit Form
    UI->>API: Send FormData Payload via fetch("/api/clients")
    API->>DB: UPDATE companies SET plan_tier, trial_ends_at, is_blocked
    DB-->>API: 200 OK Record Updated
    API-->>UI: Return Json { success: true }
    UI->>UI: Optimistically Update Local Companies State & Show Toast
    UI-->>Admin: Close Edit Drawer & Refresh Page Router

Component	Codebase Path / Token
OwnerTable Directory View	admin/src/components/owner/ownerUi.tsx
Manage Client Edit Drawer	admin/src/app/clients/ClientsClient.tsx (Line 247)
Suspend Workspace Checkbox	admin/src/app/clients/ClientsClient.tsx (Line 273)
Stripe Reference Fields	admin/src/app/clients/ClientsClient.tsx (Line 368)

Client & Tenant Directory

Page Visual Switcher

Client Directory & Drawer Management Wireflow

AD-02 Client & Tenant Directory Wireflow