cobalt-application

byMADIHA ECH-CHOUBI

Tu es un développeur full stack senior expert en React.js, Node.js, Express, MySQL, UI/UX moderne et systèmes de reconnaissance faciale. Je veux construire une application SaaS professionnelle complète de gestion de pointage intelligente pour mon projet de fin d’études (PFE). ━━━━━━━━━━━━━━━━━━━━━━━ 🎯 OBJECTIF DU PROJET ━━━━━━━━━━━━━━━━━━━━━━━ Développer une application moderne de gestion de présence basée sur : - reconnaissance faciale - webcam live - check-in / check-out - analytics - reporting RH - dashboard professionnel L’application doit ressembler à un vrai logiciel RH moderne utilisé en entreprise. ━━━━━━━━━━━━━━━━━━━━━━━ 🧠 LOGIQUE MÉTIER ━━━━━━━━━━━━━━━━━━━━━━━ L’application gère 2 types de personnes : 1️⃣ EMPLOYÉS - identifiés par matricule unique - exemple : EMP-2024-001 - reconnaissance faciale activée 2️⃣ STAGIAIRES - identifiés par nom + prénom - sans matricule obligatoire - reconnaissance faciale possible aussi ━━━━━━━━━━━━━━━━━━━━━━━ ⏱️ SYSTÈME DE POINTAGE ━━━━━━━━━━━━━━━━━━━━━━━ Le système doit gérer : ✅ CHECK-IN (IN) - enregistrement entrée - heure + date - statut = IN ✅ CHECK-OUT (OUT) - enregistrement sortie - heure + date - statut = OUT - calcul automatique durée travaillée Chaque pointage doit afficher : - photo - nom complet - matricule (si employé) - type : IN / OUT - date - heure - statut ━━━━━━━━━━━━━━━━━━━━━━━ 📷 PAGE EMPLOYÉS / STAGIAIRES CAPTURE PHOTO OBLIGATOIRE ━━━━━━━━━━━━━━━━━━━━━━━ Lorsqu’on ajoute un employé ou un stagiaire : ✅ Bouton "Prendre une photo" ➡️ ouvre directement la webcam dans le formulaire d’ajout. Fonctionnement : - capture en un clic - aperçu photo circulaire - possibilité "Reprendre" - sauvegarde image avec données utilisateur Le système doit : - stocker image/photo dans base de données - afficher image dans tableau employés/stagiaires Dans le tableau : - nouvelle colonne "Photo" - afficher photo ronde utilisateur - si pas de photo → afficher avatar/icône par défaut ━━━━━━━━━━━━━━━━━━━━━━━ 📷 PAGE CHECK-IN / RECONNAISSANCE FACIALE ━━━━━━━━━━━━━━━━━━━━━━━ Interface moderne de scan facial. Après reconnaissance : ✅ afficher grande photo circulaire utilisateur ✅ bordure moderne autour image ✅ petit badge vert confirmation ✅ animation succès Si image inexistante : - afficher avatar par défaut 🎨 Animation scan obligatoire : - coins scanner animés - ligne lumineuse scan verticale - effet caméra intelligent - overlay moderne style AI scan Afficher : - reconnu / non reconnu - nom ou matricule - statut IN / OUT - heure exacte ━━━━━━━━━━━━━━━━━━━━━━━ 📊 REPORTS & ANALYTICS ━━━━━━━━━━━━━━━━━━━━━━━ Créer une section complète Analytics / Reporting RH. 📈 Dashboard Analytics : - total employés - total stagiaires - présents aujourd’hui - absents - retards - total check-in - total check-out - heures travaillées 📊 Graphiques : - présence par jour - statistiques hebdomadaires - statistiques mensuelles - comparaison employés/stagiaires - retards - temps de travail Utiliser : - Recharts 📄 Reports : - export PDF - export Excel - filtres par date - filtres employés/stagiaires - filtres IN / OUT ━━━━━━━━━━━━━━━━━━━━━━━ 🎨 DESIGN UI/UX ━━━━━━━━━━━━━━━━━━━━━━━ Style : - SaaS RH moderne - ultra professionnel - responsive mobile + desktop - dashboard moderne - dark mode - animations fluides - Framer Motion UI : - sidebar premium - navbar moderne - cartes statistiques - tables modernes - badges colorés - avatars circulaires - webcam cards - glassmorphism léger Couleurs : - professionnel RH tech - vert pour IN - rouge pour OUT - bleu dashboard ━━━━━━━━━━━━━━━━━━━━━━━ 💻 FRONTEND ━━━━━━━━━━━━━━━━━━━━━━━ Technologies : - React.js - Tailwind CSS - React Router - Framer Motion - Lucide React - Recharts Pages : - Login - Dashboard - Employees - Interns - Add Employee - Add Intern - Check-In Scanner - Attendance History - Reports & Analytics - Settings - Profile Fonctionnalités : - recherche dynamique - filtres - pagination - tables dynamiques - webcam live - notifications toast - loading animations ━━━━━━━━━━━━━━━━━━━━━━━ ⚙️ BACKEND ━━━━━━━━━━━━━━━━━━━━━━━ Technologies : - Node.js - Express.js - MySQL Architecture : - MVC - REST API propre Créer APIs : AUTH : - POST /login EMPLOYEES : - GET /employees - POST /employees - PUT /employees/:id - DELETE /employees/:id INTERNS : - GET /interns - POST /interns - PUT /interns/:id - DELETE /interns/:id ATTENDANCE : - POST /checkin - POST /checkout - GET /attendance - GET /attendance/:id REPORTS : - GET /reports/daily - GET /reports/monthly - GET /reports/analytics FACIAL SYSTEM : - POST /face-recognition UPLOAD : - upload image/photo webcam ━━━━━━━━━━━━━━━━━━━━━━━ 🗄️ MYSQL DATABASE ━━━━━━━━━━━━━━━━━━━━━━━ Créer tables : users employees interns attendance reports face_data Ajouter : - photo_url - face_encoding - timestamps ━━━━━━━━━━━━━━━━━━━━━━━ 📁 STRUCTURE PROJET ━━━━━━━━━━━━━━━━━━━━━━━ /frontend /components /pages /layouts /services /hooks /utils /data /animations /backend /controllers /routes /models /middlewares /uploads /config /database schema.sql ━━━━━━━━━━━━━━━━━━━━━━━ 🚀 IMPORTANT ━━━━━━━━━━━━━━━━━━━━━━━ Je veux : ✅ code COMPLET fichier par fichier ✅ architecture professionnelle ✅ commentaires dans code ✅ installation complète ✅ configuration Tailwind ✅ APIs connectées frontend/backend ✅ projet prêt pour soutenance PFE ✅ UI très moderne et réaliste ✅ simulation reconnaissance faciale ✅ mock data ✅ animations professionnelles ✅ responsive design Le résultat doit ressembler à une vraie application RH SaaS moderne utilisée dans une entreprise.