--- titre: Interfaces MVP — premiers écrans statut: Draft v4 date: 2026-05-13 --- # 05 — Interfaces MVP Document de cadrage des **premiers écrans à livrer**. Maquette en mots + composants Bulma. Les wireframes graphiques seront ajoutés en `docs/specifications/wireframes/` au fur et à mesure. > **Changelog v3 (2026-05-11)** : ajout de la colonne Statut + routes effectives. ## Légende statut - ✅ **Livré** — implémenté et fonctionnel sur `develop` - 🟡 **Partiel** — partiellement livré, complément à venir - ⏳ **À faire** — pas encore commencé - 🎨 **Refonte** — fonctionnel mais à re-styler selon la maquette SaaS Startup ## Inventaire | # | Écran | Route effective | Rôles | Priorité | Statut | |---|---|---|---|---|---| | E01 | Login | `/login` | tous | P0 | ✅ | | E02 | Mot de passe oublié | `/forgot-password`, `/reset-password/reset` | tous | P1 | ✅ | | E03 | Acceptation d'invitation | `/invite/{token}` | invité | P0 | ⏳ | | E04 | Sélection d'organisation | `/select-organization` | multi-org | P0 | ⏳ | | E05 | Tableau de bord | `/` | ADMIN / MANAGER / USER / PARTENAIRE | P0 | 🎨 placeholder | | E06 | Liste des comptes | `/accounts` | ADMIN / MANAGER / USER | P0 | ⏳ | | E07 | Détail / édition compte | `/accounts/{id}` | ADMIN / MANAGER / USER | P0 | ⏳ | | E08 | Liste des transactions | `/transactions` | ADMIN / MANAGER / USER | P0 | ⏳ | | E09 | Détail transaction | `/transactions/{id}` | ADMIN / MANAGER / USER | P0 | ⏳ | | E10 | Lancement d'import | `/imports/new` | ADMIN / MANAGER / USER | P0 | ⏳ | | E11 | Suivi d'import | `/imports/{id}` | ADMIN / MANAGER / USER | P0 | ⏳ | | E12 | Liste des imports | `/imports` | ADMIN / MANAGER / USER | P1 | ⏳ | | E13 | Catégories | `/categories` | ADMIN / MANAGER | P1 | ⏳ | | E14 | Membres de l'organisation | onglet sur `/admin/organizations/{id}/edit` | ADMIN | P0 | ✅ (ADMIN org courante + SUPERADMIN) | | E15 | Inviter un membre | `/admin/organizations/{id}/members/new` | ADMIN | P0 | 🟡 sans envoi de mail (mot de passe initial saisi par l'admin) | | E16 | Profil utilisateur | `/account` | tous | P1 | ✅ | | E17 | Backoffice SUPERADMIN — Orgs | `/admin/organizations` | SUPERADMIN | P1 | ✅ | | E18 | Paramètres de l'organisation | onglet sur `/admin/organizations/{id}/edit` | ADMIN | P0 | ✅ (ADMIN org courante via voter `ORG_ADMIN`) | | E19 | Catalogue des tags | `/tags` | ADMIN / MANAGER / USER (lecture) | P1 | ⏳ | | E20 | Biens immobiliers d'une organisation | onglet sur `/admin/organizations/{id}/edit` | ADMIN / MANAGER | P0 | ⏳ | | E21 | Plateformes de location (référentiel global) | `/admin/rental-platforms` | SUPERADMIN | P0 | ⏳ | | E22 | Activation des plateformes par organisation | onglet sur `/admin/organizations/{id}/edit` | ADMIN | P0 | ⏳ | | — | Thème (light/dark/system) | onglet « Préférences » de `/account` | tous | P1 | ✅ (ajout post-spec initiale) | ## Layout général (`base.html.twig`) ``` ┌────────────────────────────────────────────────────────────────┐ │ Navbar Bulma │ │ [VIIZIA logo] [Org Switcher ▾] [🔔] [Profil ▾] │ ├──────────┬─────────────────────────────────────────────────────┤ │ │ │ │ Sidebar │ │ │ │ │ │ - Dashbd │ Contenu principal │ │ - Comptes│ │ │ - Transac│ │ │ - Imports│ │ │ - Catég. │ │ │ - Membres│ │ │ │ │ └──────────┴─────────────────────────────────────────────────────┘ Footer minimaliste ``` - Bulma `navbar` + `columns` pour la sidebar. - Sidebar masquée en mobile (drawer toggleable via Stimulus). - Org switcher dans la navbar : dropdown listant les orgs du user, surligne l'active. - Notifications (icône cloche) — placeholder en MVP. ## E01 — Login Composants : - Bulma `card` centrée, fond `is-light`. - Champ email + champ mot de passe + bouton `is-primary`. - Lien « Mot de passe oublié ? ». - Pas d'auto-inscription publique en v1 (création par invitation uniquement). Comportement : - Rate-limiting : 5 tentatives / 15 min / IP. - Sur succès : si user a 1 seule org → dashboard, sinon → E04. ## E03 — Acceptation d'invitation Url : `/invite/{token}` (token signé, 7 jours de validité). Cas A — l'invité n'a pas de compte : - Formulaire création : nom, prénom, mot de passe. - Crée le `User`, active le `Membership`, redirige vers le dashboard. Cas B — l'invité a déjà un compte : - Login → `Membership` activé → dashboard de l'org invitante. ## E04 — Sélection d'organisation Affiché uniquement si `user.memberships.count > 1`. - Liste des orgs accessibles avec rôle, dernière activité. - Click → set `user.current_organization_id`, redirige vers dashboard. - SUPERADMIN voit en plus un lien « Toutes les organisations » (E17). ## E05 — Tableau de bord Vue **ADMIN / MANAGER** : - Cartes Bulma (`columns is-multiline`) : - Solde consolidé (somme des comptes actifs). - Solde par compte (mini-cartes). - Recettes du mois en cours. - Dépenses du mois en cours. - Solde N-1 vs N (variation). - Graphique d'évolution du solde sur 12 mois (Chart.js ou Apex). - Top 5 catégories de dépenses du mois (donut). - Liste des 10 dernières transactions (lien « voir tout »). Vue **USER** : mêmes blocs mais filtrés sur les comptes assignés. Vue **PARTENAIRE** : - Solde consolidé (sans détail par compte si paramétré ainsi). - Recettes / dépenses agrégées. - Graphique évolution. - **Pas de liste de transactions**. ## E06 — Liste des comptes - Tableau Bulma `table is-striped is-hoverable` : - Libellé · Banque · IBAN masqué · Solde courant · Dernière transaction · Actions - Bouton « + Nouveau compte » (ADMIN, MANAGER). - Filtre par type, recherche par libellé/banque. ## E07 — Détail / édition compte - Header : libellé, banque, solde courant, badge statut. - Sections : - Infos générales (formulaire éditable selon rôle). - Historique du solde (mini-graphique). - Transactions récentes (10 dernières). - Mapping CSV par défaut (édition). - Zone dangereuse : suppression (ADMIN seul). ## E08 — Liste des transactions Le **cœur** de l'application. Soigner la performance et l'ergonomie. Composants : - Filtres en haut (Bulma `field is-grouped`) : - Période (date-from, date-to, presets : ce mois, mois dernier, 3 mois, année, custom). - Compte(s) — multi-select (limité aux comptes accessibles si `restricted`). - Catégorie(s) — multi-select. - **Tags — multi-select** (avec mode ET/OU sélectionnable). - Type (carte, virement, prélèvement…). - Recherche libellé (debounced). - Montant min / max. - Tableau : - Date · Libellé · Compte · Catégorie · **Tags** (badges colorés, max 3 visibles + « +N ») · Montant (vert = crédit, rouge = débit) · Actions. - Tri sur Date, Montant. - Pagination 50 par page (ou scroll infini). - Actions par ligne : éditer catégorie inline, **ajouter/retirer tag inline**, ajouter note, voir détail. - Actions de masse (sélection multiple) : assigner une catégorie en masse, **assigner/retirer un tag en masse**, exporter la sélection. - Bouton « Exporter CSV » des résultats filtrés (ADMIN ; MANAGER limité aux comptes assignés). ## E09 — Détail transaction - Modale ou page dédiée. - Tous les champs : date opération, date valeur, montant, libellé brut, libellé normalisé, référence, type, compte, statement source (lien), import job source (lien). - **Section Tags** : affichage des tags actuels (badges) + tagsinput pour ajouter/retirer (auto-complétion sur les tags de l'org, possibilité de créer un nouveau tag à la volée si l'utilisateur a le droit). - Édition catégorie + notes inline. - Historique des modifications (audit log restreint à cette transaction). ## E10 — Lancement d'import Wizard en 3 étapes (Bulma `steps`) : **Étape 1 — Choix du fichier** - Compte cible (select). - Type : CSV ou PDF (radio buttons). - Drop zone pour le fichier. **Étape 2a — Configuration CSV** - Aperçu des 5 premières lignes. - Réglages : séparateur, encodage, lignes d'en-tête. - Mapping colonnes (drag & drop ou selects par colonne). - Format de date / nombre. - Bouton « Sauvegarder ce mapping pour ce compte ». **Étape 2b — Configuration PDF** - Banque détectée (select éditable). - Aperçu des transactions extraites. - Édition manuelle des lignes problématiques. **Étape 3 — Validation** - Récap : N lignes à importer, X doublons potentiels. - Bouton « Lancer l'import » → redirige vers E11. ## E11 — Suivi d'import - Header avec statut visuel (badge Bulma `tag` coloré). - Barre de progression (polling 2s sur status `running`). - Logs en temps réel (collapsible). - Une fois terminé : - Récap : importés / doublons / erreurs. - Lien vers E08 filtré sur cet import. - Bouton « Annuler cet import » (rollback) si succès et < 24 h. ## E14 — Membres de l'organisation - Tableau : Nom · Email · Rôle · **Mode d'accès** · **Comptes assignés** · Statut · Dernière activité · Actions. - Colonne « Mode d'accès » : badge `Tous les comptes` ou `N comptes` (cliquable → tooltip listant les comptes). - Bouton « + Inviter un membre » (E15). - Actions par ligne : - Changer le rôle (modale). - **Modifier le mode d'accès** (modale : bascule all/restricted + multi-select des comptes si restricted). Désactivé pour les ADMIN. - Révoquer (avec confirmation modale). - Renvoyer l'invitation (si statut `invited`). ## E15 — Inviter un membre Wizard en 2 étapes : **Étape 1 — Identité et rôle** - Email (peut ne pas avoir de compte VIIZIA). - Rôle (radio ADMIN / MANAGER / USER / PARTENAIRE). - Message personnalisé (text area). **Étape 2 — Mode d'accès aux comptes** - Si rôle = ADMIN : étape ignorée (`access_mode` forcé à `all_accounts`, message informatif). - Sinon, choix radio : - **Tous les comptes de l'organisation** (`all_accounts`) - **Comptes spécifiques** (`restricted`) → multi-select obligatoire d'au moins 1 compte parmi ceux de l'org. - Récap visuel avant envoi. → Envoi d'un mail avec lien `/invite/{token}`. Le `Membership` est créé en `status = invited` avec le rôle et le mode d'accès choisis. **Modification a posteriori** : depuis E14, ADMIN peut éditer le `access_mode` et la liste des comptes assignés d'un membre existant. ## E16 — Profil utilisateur Page accessible à tout utilisateur authentifié pour modifier ses propres informations. - **Section identité** : - Prénom, nom (modifiables). - Email (modifiable, déclenche un mail de confirmation sur la nouvelle adresse). - **Section naissance** (optionnels) : - Date de naissance (date picker). - Lieu de naissance (champ libre, ville + pays). - Note RGPD visible : « Ces informations sont optionnelles. Elles seront utilisées pour votre profil et pour préparer la conformité KYC lors de futures intégrations bancaires. » - **Section sécurité** : - Changer le mot de passe (mot de passe actuel + nouveau + confirmation). - Liste des sessions actives (futur). - **Section organisations** : - Liste des organisations dont l'utilisateur est membre (rôle, mode d'accès, statut), lien pour basculer (E04). ## E17 — Backoffice SUPERADMIN — Organisations - Tableau global : Nom · Slug · Statut · Type (entreprise/particulier) · Nb membres · Nb comptes · Créée le · Actions. - Filtres : statut, type, recherche. - Actions : voir détail, suspendre/réactiver, archiver. - KPI globaux plateforme : nb d'orgs, nb de users, nb de transactions, volume importé sur 30j. - Aucune action métier sur les données d'une org sans **intervention support** explicite (audit log). ## E18 — Paramètres de l'organisation Réservé à ADMIN. Onglets dans une `tabs` Bulma. **Onglet « Général »** - Nom de l'organisation, slug (lecture seule après création), email de facturation. - Statut (lecture seule, `active`/`suspended`/`archived`). **Onglet « Identité juridique »** - Toggle `is_company` : « Cette organisation est-elle une entreprise ? » - Si oui (champs visibles) : - Forme juridique (select : SAS, SARL, SA, SCI, EURL, SASU, EI, micro-entreprise, association, autre). - **SIREN** (input 9 chiffres, **obligatoire**, validation Luhn côté serveur, feedback visuel à la saisie). - **SIRET** (input 14 chiffres, optionnel, validation Luhn + cohérence avec SIREN). - Date de création (date picker). - Site internet (URL). - Si non : champs masqués mais valeurs conservées en base (au cas où l'utilisateur rebascule). **Onglet « Adresse postale »** - Ligne 1, ligne 2, code postal, ville, pays (select ISO, défaut FR). - Tous optionnels. **Onglet « Préférences »** (futur, P2) - Devise par défaut, fuseau horaire, format des dates. ## E19 — Catalogue des tags - Tableau : Nom · Couleur · Type (Par défaut / Personnalisé) · Créé par · Nb transactions taggées · Actions. - Filtres : recherche par nom, type. - Bouton « + Nouveau tag » (ADMIN, MANAGER, USER selon matrice). - Actions par ligne : - Modifier (ADMIN, MANAGER) : nom, couleur. - Supprimer (ADMIN pour tous tags ; MANAGER pour les tags personnalisés). La suppression d'un tag retire ses associations sans toucher aux transactions. - Tags par défaut (`is_default = true`) marqués d'un badge « Système ». ## E20 — Biens immobiliers d'une organisation Onglet **« Biens »** dans la page d'édition d'une organisation (en parallèle de Informations / Utilisateurs / Comptes). Cible : organisations de gestion locative qui suivent la rentabilité par bien. **Liste** : - Bouton **« + Ajouter un bien »** (ADMIN/MANAGER). - Tableau : Code · Libellé · Adresse · Surface · Chambres · Statut · Nb transactions · Actions. - Statut affiché en badge : `Actif` (vert), `Archivé` (gris). - Empty state avec CTA. **Création / édition** : - **Code** (obligatoire, ex. `A001`, unique par org) — sert d'identifiant rapide. - **Libellé** (optionnel, ex. « Studio Bastille 25m² »). - **Adresse** : ligne 1, ligne 2, code postal, ville, pays (CountryType, défaut FR). - **Surface (m²)** et **Chambres** : optionnels, entiers. - **Statut** : Actif / Archivé. - **Notes** : zone de texte libre. **Suppression** : - ADMIN seul. Confirmation modale. - Les transactions associées **perdent** leur `property_id` (FK SET NULL) — l'historique reste accessible. **Association à une transaction** : - Dans le formulaire transaction (E09 et création), ajout d'un champ optionnel **« Bien concerné »** (EntityType scoped sur l'org) avec placeholder « — aucun —ʼ. - Filtre `?property=ID` sur la liste des transactions (E08, à venir). **Hors-scope cette première itération** : - Page de détail d'un bien (rentabilité, transactions associées, indicateurs) — viendra avec le dashboard métier. - Photos, contrats, historique locataires. ## E21 — Plateformes de location (référentiel global) Page **`/admin/rental-platforms`** dans la sidebar « Administration », visible **SUPERADMIN uniquement**. Catalogue cross-tenant des plateformes (Booking, Airbnb, Abritel, Direct, Stripe, etc.). **Liste** : - Bouton **« + Ajouter une plateforme »**. - Tableau : Logo/Icône · Nom · Slug · Couleur · Site web · Statut · Nb organisations activées · Actions. - Filtres : statut (Actif/Archivé). **Création / édition** : - **Nom** (obligatoire, ex. « Booking.com »). - **Slug** (auto-généré depuis le nom, modifiable, unique global). - **Couleur** (hex, pour badges) — color picker + saisie manuelle. - **Icône** : nom de classe Tabler (`ti-brand-booking`) ou Font Awesome. - **Site web** : URL. - **Statut** : Actif / Archivé. **Archivage vs suppression** : - L'archivage est la voie normale (cache la plateforme dans l'activation côté org sans casser l'historique). - La suppression dure est réservée aux plateformes créées par erreur sans utilisation effective. Confirmation modale, refusée si la plateforme a au moins une transaction associée. **Seed initial** : Booking.com, Airbnb, Abritel/VRBO, Direct, Stripe. ## E22 — Activation des plateformes par organisation Onglet **« Plateformes »** dans la page d'édition d'une organisation, accessible à l'ADMIN d'org. **Vue** : - Liste des plateformes globales actives (référentiel E21). - Pour chacune, un **switch** Activée/Désactivée. - Champ **notes** optionnel par plateforme activée (taux de commission, identifiant interne…). - Notification info en bas : « Désactiver une plateforme la cache des formulaires mais ne supprime pas son historique ». **Effets** : - Une plateforme désactivée n'apparaît plus dans la liste déroulante du formulaire transaction (E09) pour cette org. - Les transactions existantes liées restent associées et sont toujours visibles. - Si une plateforme est archivée globalement (E21) après activation par une org, elle reste **visible** chez l'org pour consultation historique mais ne peut plus être nouvellement choisie. ## Composants Bulma à uniformiser - `notification` pour les flash messages Symfony (success / warning / danger / info). - `tag` pour statuts (badge couleur selon état). - `modal` pour confirmations destructives. - `pagination` partagée. - `field is-grouped` partout pour les barres de filtres. - Icônes : Font Awesome (cohérent avec Bulma). ## Accessibilité - Tous les formulaires : labels associés, aria-required, focus visible. - Contraste AA minimum (Bulma respecte par défaut). - Navigation clavier dans les tableaux et modales. - `aria-live` pour les notifications de statut d'import. ## Responsive - Mobile (≤ 768 px) : sidebar en drawer, tableaux en cartes empilées, filtres dans un panneau dépliable. - Desktop : layout 2 colonnes. - Pas d'obligation d'app mobile en MVP, mais l'UI doit être utilisable sur tablette en priorité (consultation comptable en mobilité). ## Hors-scope MVP (à noter pour mémoire) - Mode sombre. - Personnalisation des couleurs par organisation (white-label). - Notifications push / mail temps réel. - Recherche transverse globale (Cmd-K). ## Changelog - **v4 — 2026-05-13** : ajout de E20 (Biens d'une org), E21 (Plateformes de location globales SUPERADMIN), E22 (Activation des plateformes par org). Motivation : suivi de rentabilité des locations courte durée. - **v3 — 2026-05-11** : ajout de la colonne Statut, routes effectives, intégration du thème (post-spec). - **v2 — 2026-05-10** : intégration des tags dans E08/E09 + filtres + actions de masse, étape « Mode d'accès » dans E15, ajout E16 (profil + naissance), E18 (paramètres org), E19 (catalogue tags), E14 enrichi. - **v1 — 2026-05-08** : création initiale (17 écrans).