Agent-Fi - Portail de rapports financiers

Agent-Fi - Portail de rapports financiers

Agent-Fi produit des rapports d'analyse financière destinés à des gestionnaires de fortune. Le projet a consisté à concevoir et développer le portail privé qui les diffuse : un espace sur invitation, sans inscription publique, où l'administrateur dépose les rapports et où chaque client consulte uniquement ceux qui lui sont destinés, classés par classe d'actifs, dans une interface sobre inspirée de l'univers de la banque privée.

Contexte

Objectifs

• Diffuser des rapports d'analyse financière confidentiels à des gestionnaires de fortune, sans passer par l'e-mail ni par des pièces jointes.
• Garantir un accès strictement privé : connexion sur invitation uniquement, sans inscription publique, avec un espace cloisonné par client.
• Permettre à l'administrateur de publier, classer et retirer des rapports en autonomie, sans intervention technique.

Mon rôle

• UI Design: création d'un design system sombre aux accents or, inspiré de l'univers de la banque privée, avec des composants et des tokens partagés sur l'ensemble du portail.
• Développement Full-stack: architecture, authentification, base de données, stockage des fichiers et déploiement.

Processus

Recherche et Inspiration

• Reprise de l'écran de connexion de l'outil d'analyse existant du client, logo, scène 3D et accroches, pour assurer une continuité visuelle, le reste du portail étant conçu de zéro.
• Direction visuelle inspirée des interfaces Apple et de la banque privée : fond quasi noir, typographie Geist, accent or et animations discrètes.

Définition des fonctionnalités

• Connexion sur invitation uniquement : comptes créés par l'administrateur, sans page d'inscription ni de récupération de mot de passe.
• Architecture multi-client : chaque gestionnaire accède uniquement à son propre espace, l'administrateur à l'ensemble des portails.
• Classement des rapports en quatre registres par classe d'actifs : actions, obligations, fonds et placements alternatifs.
• Espace d'administration pour déposer, dater, classer et supprimer les rapports.
• Lecteur de rapports intégré, affichant chaque document dans un cadre isolé après vérification de la session et des droits d'accès.
• Espace de démonstration dédié, utilisé pour présenter le portail à des prospects.

Développement

• Développement avec Next.js (App Router), React, TypeScript et Tailwind CSS, déployé sur Vercel.
• Authentification par cookie de session signé (JWT httpOnly via jose) et mots de passe hachés avec bcrypt, avec un contrôle d'accès centralisé qui redirige chaque rôle vers son espace.
• Base de données Postgres hébergée sur Neon, limitée aux comptes, aux clients et aux métadonnées : les rapports sont conservés à part, dans un stockage objet privé (Vercel Blob), jamais dans la base ni dans les fichiers publics.
• Rapports servis par une route authentifiée puis affichés dans une iframe sandboxée, pour isoler leur contenu du reste de l'application.
• Interface construite sur des primitives Radix UI accessibles, animations avec Motion et scène 3D Spline sur l'écran de connexion.
• Rédaction d'un document d'architecture non technique pour expliquer au client le rôle de chaque brique : domaine, hébergement, base de données et stockage.

Conclusion

Défis rencontrés

• Garantir le cloisonnement entre clients à chaque niveau, routage, pages et accès aux fichiers, pour qu'aucun rapport ne soit accessible en dehors de l'espace auquel il appartient.
• Fiabiliser l'affichage des rapports en production : le système de fichiers de l'hébergement serverless étant éphémère, passage à un stockage objet privé, avec chargement du document avant affichage et message explicite si un fichier manque, plutôt qu'un cadre vide.
• Faire évoluer une liste de rapports à plat vers quatre registres par classe d'actifs, sans perturber les documents déjà publiés.

Résultats et Apprentissages

• Portail en production, accessible uniquement sur invitation, permettant de publier et de consulter des rapports confidentiels de bout en bout.
• Architecture multi-client prête à accueillir de nouveaux gestionnaires sans nouveau développement.
• Montée en compétence sur la sécurisation d'une application Next.js : sessions signées, contrôle d'accès par rôle et diffusion de fichiers privés.