400 lines
8.4 KiB
Markdown
400 lines
8.4 KiB
Markdown
# Skills portail - integration utile sans surcouche
|
|
|
|
## Intention
|
|
|
|
Le portail dispose deja d'un socle UX et metier solide.
|
|
L'objectif n'est donc pas d'injecter artificiellement une nouvelle couche de "skills", mais de :
|
|
|
|
- capitaliser sur les briques deja presentes ;
|
|
- renforcer les zones qui apportent un vrai gain utilisateur ;
|
|
- eviter les dependances ou abstractions inutiles ;
|
|
- garder un portail fluide, lisible et robuste.
|
|
|
|
En pratique, un "skill" correspond ici a un **bloc de capacite reutilisable** :
|
|
|
|
- regle de layout ;
|
|
- logique UX ;
|
|
- moteur de donnees ;
|
|
- comportement mobile ;
|
|
- outil d'efficacite admin ;
|
|
- aide a l'autonomie association.
|
|
|
|
## Principe de pilotage
|
|
|
|
Avant d'ajouter un nouveau skill, verifier :
|
|
|
|
1. si le portail a deja une brique equivalente ;
|
|
2. si cette brique peut etre etendue proprement ;
|
|
3. si le gain UX ou metier est concret ;
|
|
4. si l'ajout ne degrade pas la performance ou la lisibilite.
|
|
|
|
## Lecture par priorite
|
|
|
|
### Priorite 1 - Skills structurels
|
|
|
|
Ces skills sont deja largement presents et doivent rester la base unique.
|
|
|
|
#### Responsive Engine
|
|
|
|
Etat :
|
|
|
|
- deja present
|
|
|
|
Points d'appui :
|
|
|
|
- [client/src/hooks/useMobile.tsx](/Users/selecta/Documents/portail-associations/client/src/hooks/useMobile.tsx)
|
|
- [client/src/components/DashboardLayout.tsx](/Users/selecta/Documents/portail-associations/client/src/components/DashboardLayout.tsx)
|
|
- [client/src/index.css](/Users/selecta/Documents/portail-associations/client/src/index.css)
|
|
|
|
Role :
|
|
|
|
- detection mobile / tablette / desktop ;
|
|
- adaptation sidebar / densite / structure ;
|
|
- reduction des regressions multi-appareils.
|
|
|
|
#### UI Kit Global
|
|
|
|
Etat :
|
|
|
|
- deja present
|
|
|
|
Points d'appui :
|
|
|
|
- [client/src/components/ui](/Users/selecta/Documents/portail-associations/client/src/components/ui)
|
|
- [client/src/components/portal/PortalSurface.tsx](/Users/selecta/Documents/portail-associations/client/src/components/portal/PortalSurface.tsx)
|
|
|
|
Role :
|
|
|
|
- boutons, badges, cartes, dialogues, tables, panneaux ;
|
|
- langage visuel commun entre public, association et admin.
|
|
|
|
#### Layout Manager
|
|
|
|
Etat :
|
|
|
|
- deja present
|
|
|
|
Points d'appui :
|
|
|
|
- [client/src/components/DashboardLayout.tsx](/Users/selecta/Documents/portail-associations/client/src/components/DashboardLayout.tsx)
|
|
- [client/src/components/portal/PortalSurface.tsx](/Users/selecta/Documents/portail-associations/client/src/components/portal/PortalSurface.tsx)
|
|
|
|
Role :
|
|
|
|
- structure stable ;
|
|
- alignements ;
|
|
- marges ;
|
|
- paddings ;
|
|
- hierarchie des surfaces.
|
|
|
|
#### Typography System
|
|
|
|
Etat :
|
|
|
|
- deja present et relie au module Apparence
|
|
|
|
Points d'appui :
|
|
|
|
- [shared/appearance.ts](/Users/selecta/Documents/portail-associations/shared/appearance.ts)
|
|
- [client/src/lib/appearance.ts](/Users/selecta/Documents/portail-associations/client/src/lib/appearance.ts)
|
|
- [client/src/index.css](/Users/selecta/Documents/portail-associations/client/src/index.css)
|
|
|
|
Role :
|
|
|
|
- famille de police ;
|
|
- echelle des titres ;
|
|
- lisibilite globale ;
|
|
- personnalisation sans casser la coherence.
|
|
|
|
### Priorite 2 - Skills UX
|
|
|
|
#### Smooth Navigation
|
|
|
|
Etat :
|
|
|
|
- partiellement present, renforce dans ce tour
|
|
|
|
Points d'appui :
|
|
|
|
- [client/src/components/DashboardLayout.tsx](/Users/selecta/Documents/portail-associations/client/src/components/DashboardLayout.tsx)
|
|
- [client/src/pages/Home.tsx](/Users/selecta/Documents/portail-associations/client/src/pages/Home.tsx)
|
|
- [client/src/lib/routePrefetch.ts](/Users/selecta/Documents/portail-associations/client/src/lib/routePrefetch.ts)
|
|
|
|
Role :
|
|
|
|
- navigation plus immediate ;
|
|
- prechargement des vues clefs au survol, au focus et au toucher ;
|
|
- reduction de la sensation d'attente entre clic et affichage.
|
|
|
|
#### Panel Interaction
|
|
|
|
Etat :
|
|
|
|
- deja present
|
|
|
|
Points d'appui :
|
|
|
|
- composants `Dialog`, `Sheet`, `DropdownMenu`, `Sidebar`
|
|
- regroupements d'actions secondaires deja poses sur plusieurs vues
|
|
|
|
Role :
|
|
|
|
- ouverture/fermeture propre ;
|
|
- actions secondaires discretes ;
|
|
- meilleure densite operationnelle.
|
|
|
|
#### List Enhancer
|
|
|
|
Etat :
|
|
|
|
- present par endroits, a propager selon besoin
|
|
|
|
Points d'appui :
|
|
|
|
- filtres et vues admin ;
|
|
- densite compacte / detaillee ;
|
|
- recherche sur annuaire et bordereau.
|
|
|
|
Role :
|
|
|
|
- tri ;
|
|
- recherche ;
|
|
- pagination ;
|
|
- lecture dense mais lisible.
|
|
|
|
#### Action Visibility
|
|
|
|
Etat :
|
|
|
|
- deja present sur les zones prioritaires
|
|
|
|
Role :
|
|
|
|
- mettre en avant valider / ignorer / appliquer / ouvrir ;
|
|
- reduire le bruit visuel ;
|
|
- garder une action principale claire.
|
|
|
|
### Priorite 3 - Skills Data
|
|
|
|
#### Matching Engine
|
|
|
|
Etat :
|
|
|
|
- deja present
|
|
|
|
Points d'appui :
|
|
|
|
- [server/associationDirectoryMatcher.ts](/Users/selecta/Documents/portail-associations/server/associationDirectoryMatcher.ts)
|
|
- [server/routers.ts](/Users/selecta/Documents/portail-associations/server/routers.ts)
|
|
|
|
Role :
|
|
|
|
- detection des correspondances ;
|
|
- rapprochement portail / bordereau ;
|
|
- reduction des doublons.
|
|
|
|
#### Fusion Engine
|
|
|
|
Etat :
|
|
|
|
- present en logique de validation, a etendre si besoin
|
|
|
|
Role :
|
|
|
|
- fusion propre ;
|
|
- arbitrage humain ;
|
|
- tracabilite.
|
|
|
|
#### Data Validation
|
|
|
|
Etat :
|
|
|
|
- deja largement present
|
|
|
|
Points d'appui :
|
|
|
|
- normalisations dans `server/associationDirectory.ts`
|
|
- validations schema Zod dans `server/routers.ts`
|
|
- helpers partages `shared/*`
|
|
|
|
#### API Connector (RNA / SIRENE / HelloAsso)
|
|
|
|
Etat :
|
|
|
|
- present et renforce
|
|
|
|
Points d'appui :
|
|
|
|
- [server/associationReferenceSync.ts](/Users/selecta/Documents/portail-associations/server/associationReferenceSync.ts)
|
|
- [docs/compliance/association-directory-official-enrichment.md](/Users/selecta/Documents/portail-associations/docs/compliance/association-directory-official-enrichment.md)
|
|
|
|
Role :
|
|
|
|
- enrichissement controle ;
|
|
- aucune creation automatique ;
|
|
- validation admin obligatoire.
|
|
|
|
### Priorite 4 - Skills Mobile
|
|
|
|
#### Mobile Scroll
|
|
|
|
Etat :
|
|
|
|
- renforce
|
|
|
|
Points d'appui :
|
|
|
|
- [client/src/index.css](/Users/selecta/Documents/portail-associations/client/src/index.css)
|
|
- [client/src/lib/appearance.ts](/Users/selecta/Documents/portail-associations/client/src/lib/appearance.ts)
|
|
|
|
Role :
|
|
|
|
- limiter les couches couteuses pendant le scroll ;
|
|
- garder les fonds immersifs sans penaliser la fluidite.
|
|
|
|
#### Lazy Loading
|
|
|
|
Etat :
|
|
|
|
- deja present sur les routes et certaines cartes
|
|
|
|
Points d'appui :
|
|
|
|
- `lazy(...)` dans [client/src/App.tsx](/Users/selecta/Documents/portail-associations/client/src/App.tsx)
|
|
|
|
#### Prefetch Engine
|
|
|
|
Etat :
|
|
|
|
- ajoute dans ce tour
|
|
|
|
Points d'appui :
|
|
|
|
- [client/src/lib/routePrefetch.ts](/Users/selecta/Documents/portail-associations/client/src/lib/routePrefetch.ts)
|
|
|
|
Role :
|
|
|
|
- precharger les vues les plus frequentes ;
|
|
- accelerer la navigation percue ;
|
|
- ne rien casser dans le routeur existant.
|
|
|
|
#### Touch Gestures
|
|
|
|
Etat :
|
|
|
|
- a traiter seulement si un vrai besoin apparait
|
|
|
|
Decision UX :
|
|
|
|
- ne pas ajouter de gestuelle complexe par defaut ;
|
|
- privilegier une ergonomie simple avant les gestures.
|
|
|
|
### Priorite 5 - Skills Admin
|
|
|
|
#### Admin Dashboard
|
|
|
|
Etat :
|
|
|
|
- deja present
|
|
|
|
#### Correspondence Manager
|
|
|
|
Etat :
|
|
|
|
- deja present et enrichi
|
|
|
|
Role :
|
|
|
|
- correspondances a valider ;
|
|
- propositions officielles ;
|
|
- workflow de decision humain.
|
|
|
|
#### Notification Engine
|
|
|
|
Etat :
|
|
|
|
- deja present
|
|
|
|
Role :
|
|
|
|
- alertes ;
|
|
- badges ;
|
|
- suivi des dossiers prioritaires.
|
|
|
|
### Priorite 6 - Skills Association
|
|
|
|
#### Association Portal
|
|
|
|
Etat :
|
|
|
|
- deja present et fortement harmonise
|
|
|
|
#### Reservation Flow
|
|
|
|
Etat :
|
|
|
|
- deja present
|
|
|
|
#### Document Center
|
|
|
|
Etat :
|
|
|
|
- deja present
|
|
|
|
## Ce qui a ete ajoute dans ce tour
|
|
|
|
### 1. Prefetch discret des routes clefs
|
|
|
|
Ajout du fichier :
|
|
|
|
- [client/src/lib/routePrefetch.ts](/Users/selecta/Documents/portail-associations/client/src/lib/routePrefetch.ts)
|
|
|
|
Et branchement sur :
|
|
|
|
- la sidebar dashboard/admin ;
|
|
- la navigation et les CTA principaux de l'accueil.
|
|
|
|
Impact attendu :
|
|
|
|
- navigation plus fluide ;
|
|
- sensation de site plus reactif ;
|
|
- zero changement de logique metier.
|
|
|
|
### 2. Clarification strategique
|
|
|
|
On ne traite pas les skills comme des plugins externes a injecter partout.
|
|
|
|
On les traite comme :
|
|
|
|
- des capacites internes ;
|
|
- deja presentes ou utiles ;
|
|
- propageres seulement quand elles ont un vrai impact.
|
|
|
|
## Recommandation UX
|
|
|
|
Le bon ordre reste :
|
|
|
|
1. structurel ;
|
|
2. UX ;
|
|
3. data ;
|
|
4. mobile ;
|
|
5. admin ;
|
|
6. association.
|
|
|
|
Mais dans le code, cela doit se traduire par :
|
|
|
|
- extension des briques existantes ;
|
|
- pas de sur-abstraction ;
|
|
- pas de moteur supplementaire si la base actuelle couvre deja le besoin.
|
|
|
|
## Regle de prudence
|
|
|
|
Un skill n'est utile que s'il rend le portail :
|
|
|
|
- plus stable ;
|
|
- plus fluide ;
|
|
- plus lisible ;
|
|
- plus simple a administrer ;
|
|
- plus confortable pour l'association.
|
|
|
|
Sinon, c'est du superflu.
|