# Projet ONA — Documentation complète du UI et du design ## 1. Vue d’ensemble Ce projet est une maquette de tableau de bord d’administration et de supervision pour l’Office National d’Assurance (ONA), pensée comme un système intégré de gestion de présence, de sécurité, de ressources humaines et d’infrastructure opérationnelle. L’interface mêle : - un design institutionnel premium, - une navigation latérale structurée, - une barre supérieure d’information et de contrôle, - des cartes KPI de suivi, - une liste d’agents avec statut biométrique, - des alertes de sécurité et de performance, - un mode sombre avec variante claire. Le projet est construit en HTML/CSS pur, avec des éléments visuels très détaillés et des composants de type dashboard enterprise. --- ## 2. Structure du projet - `login.html` : écran de connexion / boot system / interface d’accès sécurisé - `admin/admin.html` : dashboard principal de supervision RH & sécurité - `admin/Registre.html` : registre général des agents / gestion des listes - `surc/tabl.html` : interface de suivi de succursales ou tableau de présence --- ## 3. Identité visuelle du projet ### Palette graphique officielle Le système utilise une palette fortement institutionnelle et hiérarchisée : - Bleu foncé : `#001233` - Bleu royal : `#002B7F` - Bleu lumineux : `#0040C1` - Rouge ONA : `#D21034` - Or accent : `#D97706` - Blanc : `#FFFFFF` - Noir profond / fond : `#030712` - Vert de confirmation : `#10B981` ### Typographie Le design associe : - `Plus Jakarta Sans` pour les titres, labels, menus, valeurs, contenu principal, - `JetBrains Mono` pour les éléments techniques, horloges, status système et console. ### Style visuel principal Le UI repose sur plusieurs effets : - glassmorphism avec fonds translucides, - cartes arrondies, - bordures subtilement brillantes, - ombres profondes, - dégradés bleu/or/rouge, - icônes Font Awesome pour une lecture rapide et professionnelle, - design sombre dominant avec accent étincelant. --- ## 4. Écran de connexion et système boot Le fichier `login.html` présente une logique de démarrage d’application avec un chargement “kernel bootloader”. ### Détails observés - écran de chargement plein écran, - cercle de rotation autour du logo ONA, - titre : “OFFICE NATIONAL D’ASSURANCE-VIEILLESSE”, - sous-titre : “CONTRÔLE DE SÉCURITÉ & LOGISTIQUE BIOMÉTRIQUE”, - console de démarrage avec barre de progression, - message de statut dynamique : “Initialisation du noyau de gestion SIGP...”, - fond en grille technique avec effets radiaux. ### Objectif visuel Cette phase donne une impression de système centralisé, sécurisé, robuste et d’entreprise critique, comme un logiciel de supervision nationale. --- ## 5. Interface principale du dashboard Le dashboard principal dans `admin/admin.html` est structuré comme un espace de contrôle central : - navigation latérale fixe, - barre supérieure d’état, - panneau KPI, - zone de recherche et filtres, - grille d’agents, - notifications flottantes, - modale détaillée du dossier agent. --- ## 6. Menu latéral (sidebar) La sidebar est le cœur de la navigation. Elle contient : ### Bloc 1 — Gouvernance & RH - Dashboard Principal - Registre Général Agents - Matrice Assiduité RH - Congés & Permissions - Performance & Overtime ### Bloc 2 — Sécurité, IA & CCTV - Détection IA Usage Téléphone - Détection Zones Non Assignées - Détections Sorties Anticipées - Absences Prolongées (>10m) - Détection IA Armes à Feu - Vidéosurveillance CCTV ### Bloc 3 — Télécoms & Infrastructure - Topologie Réseau Succursales - Monitoring Serveurs Edge ### Bloc 4 — Finance & Administration - Audit Retenues Salariales - Rapports PDF Officiels - Paramètres Système & Backup ### Particularités du design - largeur fixe de 310px, - fond semi-transparent avec effet blur, - bordure droite, - catégories avec libellés en uppercase, - items avec hover animés, - item actif en gradient bleu foncé avec surlignage doré, - logo ONA circulaire avec bordure or, - pied de page final : “République d’Haïti © 2026” + “Office National d’Assurance-Vieillesse”. --- ## 7. Barre du haut (top header) La barre supérieure contient plusieurs éléments de contexte et de supervision. ### Éléments présents - badge de projet : “BASE NATIONALE RH & BIOMÉTRIQUE” - pills de télémétrie : - Réseau Succursales ONA - 12 ms (Starlink) - VectorDB Qdrant OK - bouton info / architecture du projet - bouton de bascule du thème clair/sombre - bouton des paramètres système - bouton de notifications avec badge rouge “5” - horloge en direct - bouton de déconnexion ### Comportements - la zone de notifications est un panneau flottant qui apparaît au clic, - le bouton de notif affiche des alertes en direct, - le thème peut être basculé entre sombre et clair avec `toggleTheme()`, - l’horloge affiche l’heure en temps réel. --- ## 8. Centre de notifications Le système contient un panneau d’alertes avec plusieurs catégories : - Zone Non Attribuée Détectée - IA : Usage Téléphone en Service - autre type d’alertes métier et sécurité ### Structure de chaque notification - icône colorée selon type d’alerte, - titre d’alerte, - description avec nom d’agent ou de zone, - horodatage “Il y a 2 min / 5 min”. ### Palette de notifications - téléphone : orange - zone : rouge - sortie : violet - absence : jaune --- ## 9. Cartes KPI du dashboard Les cartes de métriques sont le cœur analytique du dashboard. Chaque carte suit le même style : - fond glassmorphism, - bordure légère, - lancée de couleur sur le haut, - icône dans un carré coloré, - valeur principale grande et bold, - sous-information en vert/orange/rouge selon le contexte. ### Cartes présentes 1. Présence Nationale - 1 420 / 1 500 - 94.6% taux d’assiduité 2. Retards Cumulés - 38 Agents - retenues : -14 200 HTG 3. Absences Anormales - 12 Agents - convocations DRH 4. Congés Validés - 30 Agents - couverture RH OK 5. Performance IA - 98.2 % - indice global --- ## 10. Zone de recherche et filtres La barre de recherche est placée juste avant la grille des agents. ### Éléments - champ de recherche - filtre par catégorie ou statut - style de panneau moderne et homogène - espace flexible pour la recherche d’un agent ou d’une unité La logique de l’interface suggère un système de tri et d’analyse par profils RH, sécurité, performance ou présence. --- ## 11. Grille des agents La grille d’agents est un élément central du dashboard. ### Chaque carte agent comprend : - avatar circulaire avec logo ONA, - statut biométrique (point vert de validation), - nom et prénom de l’agent, - fonction ou poste, - matricule, - détails : service, succursale, statut, présence, - mini-kpis : attendance, performance, sécurité, - bouton d’action pour ouvrir le dossier complet. ### Design des cartes - fond semi-transparent, - ombre profonde, - bordures fines, - élévation au hover, - effet visuel qui donne l’impression d’un tableau de gestion actif et intelligent. --- ## 12. Modal du dossier agent Le projet inclut une fenêtre modale complète pour le dossier de chaque agent. ### Structure de la modale - en-tête avec titre du profil, - image de profil circulaire, - onglets de navigation interne, - section de détails personnels et opérationnels, - grille de données en deux colonnes, - mise en page claire et lisible. ### Onglets possibles Le code montre les mécanismes de tabs pour diviser le dossier par rubrique : - profil général, - présence et assiduité, - performances, - sécurité ou biométrie, - historique / administration. ### Données attendues - nom complet, - fonction, - succursale, - identité biométrique, - présence, - statut professionnel, - historique de sécurité / anomalies. --- ## 13. Thème clair / thème sombre Le dashboard intègre un système de thème avec deux modes visuels : - thème sombre par défaut, - thème clair activé via `body.light-theme`. ### Effets de thème - changement de fond général, - couleur des bordures, - contrastes textuels, - luminosité des cartes, - intensité des ombres, - couleur de la sidebar et du header ajustées. Le mode clair garde la même identité institutionnelle mais rend l’interface plus douce et plus lisible. --- ## 14. Éléments techniques visibles dans le CSS Le code utilise : - variables CSS (`:root`) pour la charte graphique, - composants réutilisables (`.metric-card`, `.agent-card`, `.menu-item`, `.notif-panel`), - pseudo-éléments pour les accents visuels, - transitions fluides sur les états hover, - bordures et shadows pour donner du relief, - media queries qui suggèrent une adaptation des écrans. --- ## 15. Logique fonctionnelle du UI Même si le projet est une interface front-end statique, son design suggère une logique de gestion réelle : - surveillance nationale des agents, - détection d’anomalies via IA, - contrôle d’assiduité, - suivi des congés et permissions, - monitoring réseau et infrastructure, - sécurité biométrique, - stockage de données RH et operationnelles, - génération de rapports PDF, - gestion des paramètres systèmes. --- ## 16. Détails de l’environnement institutionnel Le projet semble conçu pour un cadre public ou semi-public, avec une logique de : - gouvernance nationale, - présence dans les succursales, - autorité centralisée, - suivi de conformité, - sécurité des ressources humaines et physiques, - gestion d’une base biométrique centralisée, - contrôle des accès et des déplacements. --- ## 17. Vision de style général L’interface donne l’impression d’un système “enterprise-grade” construit pour une administration publique moderne. Elle associe : - sérieux institutionnel, - hiérarchie de données claire, - gestion d’urgence et d’alertes, - contrôle de performance, - visualisation de la sécurité et du réseau, - sophistication visuelle sans perdre la lisibilité. --- ## 18. Points forts du design - navigation claire et structurée, - hiérarchie visuelle forte, - interface très professionnelle, - palette cohérente et institutionnelle, - bon contraste entre information, signalement et action, - UI pensée pour un monitoring central, - identité visuelle distinctive ONA, - modernité grâce au glassmorphism et à l’ambiance sombre. --- ## 19. Ce que ce projet pourrait devenir Ce front-end est déjà prêt pour évoluer vers : - une vraie application de gestion RH, - un système d’assiduité connecté à une base de données, - un portail de sécurité IA, - un tableau de bord de monitoring de succursales, - une console de supervision nationale en temps réel, - un dashboard d’administration publique avec authentification, permissions et reporting. --- ## 20. Conclusion Le UI de ce projet est bien plus qu’un simple dashboard HTML : c’est une maquette d’interface d’administration institutionnelle, pensée pour représenter un système complet de gestion des ressources humaines, de biométrie, de sécurité, de réseau et d’analyse opérationnelle. Il combine les éléments suivants avec efficacité : - identité visuelle de marque ONA, - systeme d’alertes, - supervision d’agents, - tableaux de bord analytique, - architecture moderne, - design premium et technologique. C’est une interface très complète, très structurée et très représentative de ce que peut être un tableau de bord centralisé d’une institution publique moderne.