Référentiel UI des Écrans et Composants

Ce document constitue la référence exhaustive de l'interface utilisateur de la console web TkushPatch (ota-web-console), construite sur Next.js 15, React 19, Tailwind CSS et Lucide Icons.

---

1. Cartographie Complète des Routes App Router

Route	Fichier source	Rôles RBAC autorisés	Finalité principale
/	src/app/page.tsx	Tous les rôles	Cockpit principal : métriques globales, alertes de patchs en attente et statut des services.
/login	src/app/login/page.tsx	Public	Mire de connexion par identifiant/mot de passe et déclenchement du challenge OTP 2FA.
/register	src/app/register/page.tsx	Public	Enregistrement d'organisation ou finalisation d'invitation avec jeton sécurisé.
/forgot-password	src/app/forgot-password/page.tsx	Public	Récupération de compte par réinitialisation de mot de passe via lien temporaire signé.
/releases	src/app/releases/page.tsx	ADMIN, DEV, SECURITY, SRE	Dashboard master-detail des releases Store, architectures (aarch64/arm) et patchs associés.
/rollout	src/app/rollout/page.tsx	ADMIN, SRE	Pilotage du Canary Rollout (0-100 %), ciblage géographique par pays et Kill-Switch d'urgence.
/catalog	src/app/catalog/page.tsx	Tous les rôles	Catalogue des applications enregistrées, identifiants app_id et clés publiques moteur de signature.
/assets	src/app/assets/page.tsx	ADMIN, DEV	Gestion et téléversement des ressources dynamiques OTA (traductions i18n, assets graphiques).
/approvals	src/app/approvals/page.tsx	ADMIN, SECURITY, AUDITOR (lecture)	Centre d'approbation réglementaire Maker-Checker et signature asymétrique moteur de signature RSA.
/symbols	src/app/symbols/page.tsx	ADMIN, DEV, SRE	Gestion des archives .symbols, inspection des traces obfusquées et désobfuscateur Dart en direct.
/policies	src/app/policies/page.tsx	ADMIN, SECURITY, AUDITOR (lecture)	Paramétrage des politiques 4-yeux, expiration OTP, SMTP d'organisation et bouclier mobile.
/cli/login	src/app/cli/login/page.tsx	ADMIN, DEV	Passerelle de consentement OAuth/PKCE pour les sessions en ligne de commande tk-ota-push.
/telemetry	src/app/telemetry/page.tsx	ADMIN, SECURITY, SRE, AUDITOR	War Room télémétrique temps réel, taux de crashs, latence réseau et alertes circuit-breaker.
/support	src/app/support/page.tsx	ADMIN, DEV, SRE	Console de diagnostic N3, inspection par client_id, liste blanche QA et rollback ciblé.
/audit	src/app/audit/page.tsx	ADMIN, SECURITY, AUDITOR	Journal d'audit immuable avec signatures SHA-256 et export réglementaire certifié (CSV/PDF).
/health	src/app/health/page.tsx	ADMIN, SRE	Supervision Day-2 : métriques moteur de signature (sealed/unsealed), espace disque et purge des binaires.
/teams	src/app/teams/page.tsx	ADMIN (écriture), Tous (lecture)	Gestion des membres de l'organisation, attribution des 5 rôles RBAC et réinitialisation MFA.
/account	src/app/account/page.tsx	Tous les rôles	Espace profil opérateur, préférences de thème (clair/sombre) et statut de sécurité.
/organization/settings	src/app/organization/settings/page.tsx	ADMIN	Nom d'organisation, quotas d'applications et paramètres de facturation/licence.
/apps/[appId]/tracks	src/app/apps/[appId]/tracks/page.tsx	ADMIN, DEV, SECURITY, SRE	Gestion des canaux (dev, staging, stable) et promotion 1-clic zéro-recompilation.

---

2. Composants Structurels et de Layout

L'architecture visuelle repose sur des composants d'encadrement garantissant cohérence et ergonomie :

Composant	Emplacement	Rôle technique
AppLayoutShell	src/components/layout/AppLayoutShell.tsx	Structure globale de la console : barre latérale rétractable, entête fixe et zone de contenu responsive.
Header	src/components/layout/Header.tsx	Entête supérieur : sélecteur de projet (ProjectSwitcher), basculeur de thème, sélecteur de langue et menu profil.
ProjectSwitcher	src/components/layout/ProjectSwitcher.tsx	Menu déroulant permettant de basculer instantanément le contexte de l'application active (selectedAppId).
RoleGuard	src/lib/auth/RoleGuard.tsx	Composant d'isolation RBAC enveloppant les pages et boutons pour masquer les fonctionnalités non autorisées.
IdleTimer	src/lib/auth/IdleTimer.tsx	Détecteur d'inactivité opérateur sur événements souris/clavier déclenchant le verrouillage automatique de session.

---

3. Composants Spécialisés Déploiement et Releases

Ces composants modulaires animent les pages complexes de déploiement et de pilotage :

Composant	Emplacement	Fonctionnalité
ReleaseListMasterPane	src/components/deployments/ReleaseListMasterPane.tsx	Volet gauche de la vue releases : liste ordonnée des versions de base avec badges multi-plateformes.
ReleaseDetailInspectorPane	src/components/deployments/ReleaseDetailInspectorPane.tsx	Volet droit d'inspection : métriques détaillées, patchs enfants, statut de verrouillage et actions.
FullWidthPlatformBar	src/components/deployments/FullWidthPlatformBar.tsx	Sélecteur visuel pleine largeur basculant entre Android, iOS et plateformes unifiées.
PlatformSegmentedControl	src/components/deployments/PlatformSegmentedControl.tsx	Contrôle segmenté compact pour filtrer rapidement les architectures processeur (arm64-v8a, armeabi-v7a).
PatchActionMenu	src/components/deployments/PatchActionMenu.tsx	Menu contextuel unifié proposant Rollback, Promotion, Suspension et Téléchargement binaire.
CountrySelectorModal	src/components/deployments/CountrySelectorModal.tsx	Boîte de dialogue permettant la sélection et le filtrage des codes pays ISO (ex. CM, CI, SN) pour le déploiement.
UpdateStrategyModal	src/components/deployments/UpdateStrategyModal.tsx	Modale de configuration des politiques de mise à jour (Wi-Fi obligatoire vs Forcée avec blocage UI).
CreateProjectModal	src/components/project/CreateProjectModal.tsx	Formulaire modal de création d'une nouvelle application avec détection de namespace Store.
ReleaseHistoryDrawer	src/components/deployments/ReleaseHistoryDrawer.tsx	Tiroir coulissant présentant la chronologie exhaustive des modifications d'une release.

---

4. Composants UI Atomiques

Composant	Emplacement	Rôle et caractéristiques
StatusBadge	src/components/ui/StatusBadge.tsx	Badge de statut coloré avec icône associée pour ACTIVE, STAGED, REVOKED, etc.
CopyableHash	src/components/ui/CopyableHash.tsx	Affichage tronqué et ergonomique de hachages SHA-256 avec bouton de copie instantanée et retour visuel.
PaginationBar	src/components/ui/PaginationBar.tsx	Barre de pagination serveur standardisée (10, 25, 50 éléments par page) avec navigation rapide.
Toast	src/components/ui/Toast.tsx	Notifications toast contextuelles (Succès, Erreur, Avertissement, Info) avec disparition automatique.
Button	src/components/ui/Button.tsx	Bouton accessible supportant les variantes primary, secondary, danger, outline et les états de chargement (isLoading).