Aller au contenu

Story CP-028: Tenant Switch UX (Performance, Dashboard, Roles)

Module: control-plane Slice: Slice 11b from architecture (split from CP-011) Brand context: Papillon HR Suite Priority: 11.1 Depends on: CP-011 Estimated complexity: S

Objective

Polish the tenant switching experience: ensure switch completes in under 2 seconds, add "Mes entreprises" tenant thumbnail cards to the dashboard for multi-tenant users, and display the user's role per tenant in the switcher. Builds on the core switching mechanism from CP-011.

Backend Scope

No new backend endpoints. Uses existing endpoints from CP-003/CP-011:

Method Path Response Auth
GET /api/v1/auth/my-tenants MyTenantsResponse Any authenticated
POST /api/v1/auth/switch-tenant SwitchTenantResponse Any authenticated

MyTenantsResponse must include per-tenant role information. If not already present from CP-003, extend the DTO:

public record TenantMembershipDto(
    UUID tenantId, String tenantName,
    String logoUrl, String roleName,
    boolean isCurrent
) {}

public record MyTenantsResponse(
    List<TenantMembershipDto> tenants
) {}

Frontend Scope

Pages & Routes

  • Dashboard: "Mes entreprises" section added as a card (only for multi-tenant users)

Components

  • DashboardTenantSection.tsx — "Mes entreprises" thumbnail cards on dashboard. Each card shows: logo placeholder, company name, role. Tap → trigger tenant switch via TenantSwitchOverlay (from CP-011).

Performance Optimization

The full tenant switch flow must complete in under 2 seconds: 1. POST /api/v1/auth/switch-tenant (token exchange) — target: < 500ms 2. Clear IndexedDB + in-memory caches — target: < 200ms 3. Prefetch new tenant's critical data (dashboard, user profile) — target: < 1000ms 4. Redirect to new tenant's dashboard — target: < 300ms

Optimization strategies: - Parallel cache clearing + token exchange - Prefetch only critical data (dashboard summary), lazy-load the rest - Use requestIdleCallback for non-critical cleanup - Show switch overlay immediately to mask latency

UI States

State Behavior French Copy
Single tenant "Mes entreprises" section not shown on dashboard —
Multi-tenant Thumbnail cards for each tenant "Mes entreprises"
Role display Each card shows role name e.g., "DG", "Comptable", "RH"

Responsive Behavior

  • 360px (mobile): Horizontal scrollable row of tenant thumbnail cards
  • 1024px+ (desktop): Grid of tenant cards (3 per row max)

Interactions

On login (multi-tenant user): - Lands on home_tenant_id dashboard - "Mes entreprises" section appears as a card on the dashboard with tenant thumbnails - Quick-switch by tapping any thumbnail → triggers full switch flow from CP-011

Acceptance Criteria

AC-092: Switch completes in under 2 seconds
Given I initiate a tenant switch
When the token exchange and data loading complete
Then the total switch time is under 2 seconds

AC-093: Dashboard tenant thumbnails
Given I am a multi-tenant user logged into my home tenant
When the dashboard loads
Then I see a "Mes entreprises" section with thumbnail cards for each tenant

AC-094: Role display per tenant
Given I am DG in tenant A and Comptable in tenant B
When I view the tenant switcher
Then tenant A shows "DG" and tenant B shows "Comptable"

OHADA & Regulatory Rules

No direct regulatory requirements for this story.

Standards & Conventions

  • docs/standards/react-typescript-guidelines.md — §Dashboard cards, §Performance targets
  • docs/standards/offline-sync-guidelines.md — §IndexedDB clearing on context switch

Testing Requirements

Unit Tests

  • DashboardTenantSection: renders only for multi-tenant users
  • DashboardTenantSection: renders correct number of tenant cards
  • TenantMembershipDto: role name displayed correctly per tenant

Integration Tests

  • Switch performance: measure end-to-end time < 2 seconds
  • Multiple rapid switches: no stale data from previous tenant
  • Dashboard thumbnails: tap → triggers switch flow → lands on correct tenant dashboard

What QA Will Validate

  • Dashboard thumbnails appear for multi-tenant users only
  • Role displayed correctly per tenant
  • Switch completes in under 2 seconds (measure with browser DevTools)
  • No stale data after switch (employee list, settings reflect new tenant)

Out of Scope

  • Core tenant switch mechanism (token exchange, cache clearing) — CP-011
  • Tenant switcher component (bottom sheet/dropdown) — CP-011
  • Home tenant ID configuration — V2
  • Tenant list search — V2
  • Cross-tenant reporting — V2

Definition of Done

  • [ ] DashboardTenantSection renders correctly at 360px, 768px, 1024px
  • [ ] Role display per tenant is correct
  • [ ] Switch completes in under 2 seconds (measured)
  • [ ] French micro-copy matches design spec exactly
  • [ ] All acceptance criteria pass manually
  • [ ] Unit tests written and passing
  • [ ] Integration tests written and passing
  • [ ] No TypeScript any — all types explicit
  • [ ] Dashboard section only visible for multi-tenant users