====== UI Modernization ====== ===== Objectif ===== Transformer l'ensemble des interfaces utilisateur afin de permettre une utilisation simple, intuitive et efficace d'une plateforme Enterprise contenant plusieurs centaines de fonctionnalités. Cette phase ne modifie pas les fonctionnalités existantes. Elle transforme uniquement la manière dont elles sont présentées et utilisées. Objectifs principaux : * Réduire la complexité perçue * Limiter la profondeur des menus * Guider l'utilisateur par ses activités * Adapter automatiquement l'interface au rôle * Réduire le nombre de clics * Uniformiser les six interfaces * Préparer l'intégration des futurs modules Enterprise ---- ===== Principes UX ===== L'ensemble des interfaces devra respecter les principes suivants. * Interface orientée activités * Navigation contextuelle * Information progressive * Zéro écran vide * Maximum trois niveaux de navigation * Recherche omniprésente * Personnalisation utilisateur * Responsive * Accessible (WCAG AA) ---- ===== Architecture générale ===== Toutes les interfaces devront partager le même Design System. Design System ↓ Layout Engine ↓ Navigation Engine ↓ Widgets ↓ Pages Le moteur Experience Builder devient le fournisseur de tous les composants visuels. ---- ===== Navigation globale ===== La navigation principale est composée de trois niveaux maximum. Workspace ↓ Activité ↓ Vue Exemple : Commercial ↓ Owners ↓ Fiche propriétaire Aucune profondeur supplémentaire ne devra être introduite. ---- ===== Espaces de travail ===== Chaque interface est organisée en Workspaces. Exemple Tenant Console : Accueil Mon activité Commercial Patrimoine Séjours Finance Marketing Configuration Chaque Workspace constitue une application métier autonome. ---- ===== Tableau de bord ===== Le Dashboard disparaît progressivement au profit d'un Cockpit. Le Cockpit présente uniquement : * les tâches prioritaires * les indicateurs utiles au rôle connecté * les raccourcis métier * les alertes Le Cockpit ne doit jamais présenter l'ensemble des statistiques de la plateforme. ---- ===== Activity Hub ===== Chaque utilisateur dispose d'un espace "Mon activité". Celui-ci présente automatiquement : * Mes tâches * Mes validations * Mes signatures * Mes réservations * Mes tickets * Mes messages * Mes alertes L'utilisateur travaille depuis cette vue sans rechercher les menus. ---- ===== Navigation contextuelle ===== Toutes les fiches métier deviennent des centres de travail. Exemple : Owner Informations Propriétés Contrats Documents Facturation Historique Statistiques Messages L'utilisateur ne change plus de menu. ---- ===== Fiches 360° ===== Les objets principaux disposent d'une vue complète. Sont concernés : * Tenant * Owner * Guest * Property * Reservation * Contract * Invoice * Ticket Chaque fiche regroupe : * informations * historique * documents * activités * statistiques * communications * actions ---- ===== Recherche globale ===== Une barre de recherche permanente est disponible sur toutes les interfaces. Elle recherche : * tenants * owners * guests * biens * réservations * factures * contrats * tickets * documents La recherche ouvre directement la fiche correspondante. ---- ===== Command Palette ===== Une palette de commandes est disponible. Raccourci : CTRL + K Elle permet : * ouvrir un écran * rechercher un objet * lancer une action * accéder à une documentation * exécuter une commande Exemples : Créer un owner Nouvelle réservation Publier le site Créer un contrat Ajouter un bien ---- ===== Quick Actions ===== Chaque écran possède une zone "Actions rapides". Exemple : + Nouveau bien + Nouvelle réservation + Nouveau propriétaire + Nouvelle facture Les opérations courantes restent accessibles en permanence. ---- ===== Menus intelligents ===== Les menus sont construits dynamiquement. Ils dépendent : * du rôle * des permissions * des modules activés * de l'abonnement * des préférences utilisateur Un utilisateur ne voit jamais les fonctionnalités inutiles. ---- ===== Favoris ===== Chaque utilisateur peut : * épingler des menus * épingler des recherches * épingler des tableaux * épingler des biens * épingler des propriétaires Les favoris apparaissent dans le Cockpit. ---- ===== Vues intelligentes ===== Les listes deviennent des vues métier. Exemple : Guests Mes Guests Arrivées aujourd'hui Départs aujourd'hui VIP En attente Tous Les vues mémorisent : * filtres * tris * colonnes * regroupements ---- ===== Navigation par contexte ===== Depuis une réservation, l'utilisateur peut accéder directement : Guest ↓ Property ↓ Owner ↓ Paiement ↓ Facture ↓ Contrat sans retourner au menu principal. ---- ===== Interface adaptative ===== L'interface s'adapte automatiquement : * Desktop * Laptop * Tablette * Mobile Les composants changent selon la taille d'écran. ---- ===== Widgets ===== Toutes les pages sont composées de widgets indépendants. Exemples : * KPI * Tableau * Calendrier * Carte * Timeline * Messages * Documents * Activités Chaque widget peut être : * déplacé * masqué * redimensionné selon les droits utilisateur. ---- ===== Notifications ===== Toutes les notifications sont centralisées. Types : * information * rappel * validation * alerte * urgence L'utilisateur accède à l'historique complet. ---- ===== Fil d'activité ===== Chaque objet métier possède un journal. Exemple Reservation : Créée Paiement reçu Contrat signé Check-in Message envoyé Check-out Avis publié ---- ===== Documentation contextuelle ===== L'aide est intégrée à chaque écran. Elle comprend : * aide rapide * tutoriels * vidéos * FAQ * documentation sans quitter l'application. ---- ===== Uniformisation ===== Les interfaces suivantes partagent : * Design System * Widgets * Layout * Navigation * Composants * Icônes * Thèmes Interfaces concernées : * Platform Console * Tenant Console * Experience Builder * Platform Marketing * Tenant Marketing * Owner Portal * Guest Portal ---- ===== Définition de terminé ===== La transformation UX est terminée lorsque : ✓ tous les menus sont organisés par activités ✓ aucune navigation ne dépasse trois niveaux ✓ toutes les fiches sont des vues 360° ✓ la recherche globale est disponible ✓ la Command Palette est disponible ✓ les Cockpits remplacent les anciens Dashboards ✓ les menus sont personnalisés selon le rôle ✓ les listes disposent de vues intelligentes ✓ toutes les interfaces utilisent le même Design System ✓ les utilisateurs peuvent réaliser leurs tâches principales sans connaître l'arborescence complète de la plateforme. --- ===== Une recommandation d'architecture supplémentaire ===== Jusqu'à présent, le code par est structuré par applications (apps/api, apps/platform-console, etc.). Désormais, le structurer également par plateformes fonctionnelles. Par exemple : apps/ api/ platform-console/ tenant-console/ experience-app/ platform-marketing/ packages/ ui-platform/ crm-platform/ pms-platform/ billing-platform/ identity-platform/ integration-platform/ analytics-platform/ Chaque "platform" regroupera les composants, hooks, services, modèles et contrats d'un domaine transversal. Cela permettra de partager énormément de code entre les six interfaces tout en gardant une séparation claire des responsabilités. Cette évolution est cohérente avec la taille que prend désormais le produit et préparera beaucoup mieux les futurs développements que la simple multiplication des applications frontales.