Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>C2GP - Gestion Interne</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar-collapsed { | |
| width: 70px; | |
| } | |
| .sidebar-collapsed .sidebar-text { | |
| display: none; | |
| } | |
| .sidebar-collapsed .logo-text { | |
| display: none; | |
| } | |
| .sidebar-collapsed .nav-item { | |
| justify-content: center; | |
| } | |
| .content { | |
| transition: margin-left 0.3s ease; | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 300px; | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| border-radius: 3px; | |
| } | |
| .notification-badge { | |
| position: absolute; | |
| top: -5px; | |
| right: -5px; | |
| } | |
| .dropdown-menu { | |
| display: none; | |
| position: absolute; | |
| right: 0; | |
| min-width: 200px; | |
| } | |
| .dropdown:hover .dropdown-menu { | |
| display: block; | |
| } | |
| .project-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-blue-900 text-white w-64 flex flex-col sidebar"> | |
| <div class="p-4 flex items-center space-x-2 border-b border-blue-800"> | |
| <div class="bg-white p-2 rounded-lg"> | |
| <i class="fas fa-shield-alt text-blue-900 text-xl"></i> | |
| </div> | |
| <span class="logo-text text-xl font-bold">C2GP</span> | |
| </div> | |
| <div class="p-4 border-b border-blue-800"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://ui-avatars.com/api/?name=Admin+C2GP&background=random" class="w-10 h-10 rounded-full" alt="Profile"> | |
| <div class="sidebar-text"> | |
| <div class="font-medium">Admin C2GP</div> | |
| <div class="text-xs text-blue-200">Administrateur</div> | |
| </div> | |
| </div> | |
| </div> | |
| <nav class="flex-1 overflow-y-auto p-4 space-y-2"> | |
| <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-blue-800 active" data-tab="dashboard"> | |
| <i class="fas fa-tachometer-alt w-6 text-center"></i> | |
| <span class="sidebar-text">Tableau de bord</span> | |
| </a> | |
| <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-blue-800" data-tab="projects"> | |
| <i class="fas fa-project-diagram w-6 text-center"></i> | |
| <span class="sidebar-text">Projets</span> | |
| </a> | |
| <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-blue-800" data-tab="clients"> | |
| <i class="fas fa-users w-6 text-center"></i> | |
| <span class="sidebar-text">Clients</span> | |
| </a> | |
| <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-blue-800" data-tab="reports"> | |
| <i class="fas fa-file-alt w-6 text-center"></i> | |
| <span class="sidebar-text">Rapports</span> | |
| </a> | |
| <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-blue-800" data-tab="employees"> | |
| <i class="fas fa-user-tie w-6 text-center"></i> | |
| <span class="sidebar-text">Employés</span> | |
| </a> | |
| <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-blue-800" data-tab="calendar"> | |
| <i class="fas fa-calendar-alt w-6 text-center"></i> | |
| <span class="sidebar-text">Calendrier</span> | |
| </a> | |
| <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-blue-800" data-tab="settings"> | |
| <i class="fas fa-cog w-6 text-center"></i> | |
| <span class="sidebar-text">Paramètres</span> | |
| </a> | |
| </nav> | |
| <div class="p-4 border-t border-blue-800"> | |
| <button id="toggleSidebar" class="flex items-center space-x-3 text-blue-200 hover:text-white"> | |
| <i class="fas fa-chevron-left w-6 text-center"></i> | |
| <span class="sidebar-text">Réduire</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="content flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="flex items-center justify-between px-6 py-3"> | |
| <div class="flex items-center space-x-4"> | |
| <h1 class="text-xl font-semibold text-gray-800">Tableau de bord</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-search text-gray-500"></i> | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <button class="p-2 rounded-full hover:bg-gray-100 relative"> | |
| <i class="fas fa-bell text-gray-500"></i> | |
| <span class="notification-badge bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> | |
| </button> | |
| </div> | |
| <div class="dropdown relative"> | |
| <button class="flex items-center space-x-2 focus:outline-none"> | |
| <img src="https://ui-avatars.com/api/?name=Admin+C2GP&background=random" class="w-8 h-8 rounded-full" alt="Profile"> | |
| <span class="hidden md:inline-block">Admin</span> | |
| <i class="fas fa-chevron-down text-xs"></i> | |
| </button> | |
| <div class="dropdown-menu mt-2 bg-white rounded shadow-lg py-2 z-50"> | |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100"> | |
| <i class="fas fa-user mr-2"></i> Profil | |
| </a> | |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100"> | |
| <i class="fas fa-cog mr-2"></i> Paramètres | |
| </a> | |
| <div class="border-t border-gray-200"></div> | |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100"> | |
| <i class="fas fa-sign-out-alt mr-2"></i> Déconnexion | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> | |
| <!-- Dashboard Tab --> | |
| <div id="dashboard" class="tab-content active"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Projets en cours</p> | |
| <h3 class="text-2xl font-bold">24</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> | |
| <i class="fas fa-project-diagram text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>+12% vs mois dernier</span> | |
| <span>Voir tout</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Rapports validés</p> | |
| <h3 class="text-2xl font-bold">48</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> | |
| <i class="fas fa-file-check text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>+8% vs mois dernier</span> | |
| <span>Voir tout</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Clients actifs</p> | |
| <h3 class="text-2xl font-bold">36</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> | |
| <i class="fas fa-users text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>+5% vs mois dernier</span> | |
| <span>Voir tout</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Revenus (k€)</p> | |
| <h3 class="text-2xl font-bold">125</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> | |
| <i class="fas fa-euro-sign text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>+15% vs mois dernier</span> | |
| <span>Voir tout</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-6 lg:col-span-2"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold">Activité récente</h2> | |
| <select class="border rounded px-3 py-1 text-sm"> | |
| <option>Ce mois</option> | |
| <option>Le mois dernier</option> | |
| <option>Cette année</option> | |
| </select> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="activityChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold">Statut des projets</h2> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">En attente</span> | |
| <span class="text-sm">8</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-yellow-500 progress-bar h-2 rounded-full" style="width: 25%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">En cours</span> | |
| <span class="text-sm">12</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-500 progress-bar h-2 rounded-full" style="width: 50%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">Terminés</span> | |
| <span class="text-sm">8</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 progress-bar h-2 rounded-full" style="width: 25%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">En retard</span> | |
| <span class="text-sm">4</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-red-500 progress-bar h-2 rounded-full" style="width: 12.5%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold">Projets récents</h2> | |
| <a href="#" class="text-blue-600 text-sm">Voir tout</a> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Référence</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Échéance</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap">PRJ-2023-045</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Promotion ABC</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Bâtiment R+5</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">En cours</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap">15/10/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-900"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap">PRJ-2023-044</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Groupe XYZ</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Pont</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">En attente</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap">25/09/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-900"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap">PRJ-2023-043</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Construct DEF</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Bâtiment R+8</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Terminé</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap">10/09/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-900"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap">PRJ-2023-042</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Société GHI</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Silo</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">En retard</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap">05/09/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-900"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Projects Tab --> | |
| <div id="projects" class="tab-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Gestion des Projets</h2> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Nouveau Projet | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-lg shadow overflow-hidden mb-6"> | |
| <div class="p-4 border-b"> | |
| <div class="flex flex-wrap items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Rechercher..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4 mt-2 md:mt-0"> | |
| <select class="border rounded px-3 py-2 text-sm"> | |
| <option>Tous les statuts</option> | |
| <option>En attente</option> | |
| <option>En cours</option> | |
| <option>Terminé</option> | |
| <option>En retard</option> | |
| </select> | |
| <select class="border rounded px-3 py-2 text-sm"> | |
| <option>Trier par</option> | |
| <option>Date d'échéance</option> | |
| <option>Date de création</option> | |
| <option>Nom du client</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6"> | |
| <div class="project-card bg-white border rounded-lg overflow-hidden shadow transition duration-300"> | |
| <div class="p-4 border-b"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg">PRJ-2023-045</h3> | |
| <p class="text-gray-600">Promotion ABC</p> | |
| </div> | |
| <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">En cours</span> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-700 mb-2"><i class="fas fa-building mr-2 text-blue-500"></i> Bâtiment R+5</p> | |
| <p class="text-gray-700 mb-2"><i class="fas fa-map-marker-alt mr-2 text-blue-500"></i> Paris 15e</p> | |
| <p class="text-gray-700 mb-4"><i class="fas fa-calendar-alt mr-2 text-blue-500"></i> Échéance: 15/10/2023</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://ui-avatars.com/api/?name=Jean+Dupont&background=random" class="w-8 h-8 rounded-full border-2 border-white" alt="Team member"> | |
| <img src="https://ui-avatars.com/api/?name=Marie+Martin&background=random" class="w-8 h-8 rounded-full border-2 border-white" alt="Team member"> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-900"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-900"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="project-card bg-white border rounded-lg overflow-hidden shadow transition duration-300"> | |
| <div class="p-4 border-b"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg">PRJ-2023-044</h3> | |
| <p class="text-gray-600">Groupe XYZ</p> | |
| </div> | |
| <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">En attente</span> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-700 mb-2"><i class="fas fa-bridge mr-2 text-blue-500"></i> Pont</p> | |
| <p class="text-gray-700 mb-2"><i class="fas fa-map-marker-alt mr-2 text-blue-500"></i> Lyon</p> | |
| <p class="text-gray-700 mb-4"><i class="fas fa-calendar-alt mr-2 text-blue-500"></i> Échéance: 25/09/2023</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://ui-avatars.com/api/?name=Pierre+Durand&background=random" class="w-8 h-8 rounded-full border-2 border-white" alt="Team member"> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-900"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-900"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="project-card bg-white border rounded-lg overflow-hidden shadow transition duration-300"> | |
| <div class="p-4 border-b"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg">PRJ-2023-043</h3> | |
| <p class="text-gray-600">Construct DEF</p> | |
| </div> | |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Terminé</span> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-700 mb-2"><i class="fas fa-building mr-2 text-blue-500"></i> Bâtiment R+8</p> | |
| <p class="text-gray-700 mb-2"><i class="fas fa-map-marker-alt mr-2 text-blue-500"></i> Marseille</p> | |
| <p class="text-gray-700 mb-4"><i class="fas fa-calendar-alt mr-2 text-blue-500"></i> Terminé: 10/09/2023</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://ui-avatars.com/api/?name=Sophie+Leroy&background=random" class="w-8 h-8 rounded-full border-2 border-white" alt="Team member"> | |
| <img src="https://ui-avatars.com/api/?name=Thomas+Petit&background=random" class="w-8 h-8 rounded-full border-2 border-white" alt="Team member"> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-900"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-900"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 border-t flex items-center justify-between"> | |
| <div class="text-sm text-gray-600"> | |
| Affichage <span class="font-medium">1</span> à <span class="font-medium">3</span> sur <span class="font-medium">24</span> projets | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button class="px-3 py-1 border rounded bg-blue-600 text-white">1</button> | |
| <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100">2</button> | |
| <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100">3</button> | |
| <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Clients Tab --> | |
| <div id="clients" class="tab-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Gestion des Clients</h2> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Nouveau Client | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b"> | |
| <div class="flex flex-wrap items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Rechercher un client..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4 mt-2 md:mt-0"> | |
| <select class="border rounded px-3 py-2 text-sm"> | |
| <option>Tous les types</option> | |
| <option>Promoteur</option> | |
| <option>Constructeur</option> | |
| <option>Architecte</option> | |
| <option>Autre</option> | |
| </select> | |
| <select class="border rounded px-3 py-2 text-sm"> | |
| <option>Trier par</option> | |
| <option>Nom</option> | |
| <option>Date d'ajout</option> | |
| <option>Nombre de projets</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contact</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Projets</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dernier projet</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=Promotion+ABC&background=random" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Promotion ABC</div> | |
| <div class="text-sm text-gray-500">Paris</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">Promoteur</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Jean Dupont</div> | |
| <div class="text-sm text-gray-500">jean.dupont@abc.com</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">5</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">PRJ-2023-045</div> | |
| <div class="text-sm text-gray-500">En cours</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-900"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=Groupe+XYZ&background=random" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Groupe XYZ</div> | |
| <div class="text-sm text-gray-500">Lyon</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Constructeur</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Marie Martin</div> | |
| <div class="text-sm text-gray-500">marie.martin@xyz.com</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">3</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">PRJ-2023-044</div> | |
| <div class="text-sm text-gray-500">En attente</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-900"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=Construct+DEF&background=random" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Construct DEF</div> | |
| <div class="text-sm text-gray-500">Marseille</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Constructeur</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Pierre Durand</div> | |
| <div class="text-sm text-gray-500">pierre.durand@def.com</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">7</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">PRJ-2023-043</div> | |
| <div class="text-sm text-gray-500">Terminé</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-900"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="px-6 py-4 border-t flex items-center justify-between"> | |
| <div class="text-sm text-gray-600"> | |
| Affichage <span class="font-medium">1</span> à <span class="font-medium">3</span> sur <span class="font-medium">36</span> clients | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button class="px-3 py-1 border rounded bg-blue-600 text-white">1</button> | |
| <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100">2</button> | |
| <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100">3</button> | |
| <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Reports Tab --> | |
| <div id="reports" class="tab-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Gestion des Rapports</h2> | |
| <div class="flex space-x-3"> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-filter mr-2"></i> Filtres | |
| </button> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Nouveau Rapport | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Rapports validés</p> | |
| <h3 class="text-2xl font-bold">48</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> | |
| <i class="fas fa-check-circle text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">En attente validation</p> | |
| <h3 class="text-2xl font-bold">12</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> | |
| <i class="fas fa-clock text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">À corriger</p> | |
| <h3 class="text-2xl font-bold">5</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-red-100 text-red-600"> | |
| <i class="fas fa-exclamation-circle text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">En rédaction</p> | |
| <h3 class="text-2xl font-bold">8</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> | |
| <i class="fas fa-pen text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b"> | |
| <div class="flex flex-wrap items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Rechercher un rapport..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4 mt-2 md:mt-0"> | |
| <select class="border rounded px-3 py-2 text-sm"> | |
| <option>Tous les statuts</option> | |
| <option>Validé</option> | |
| <option>En attente</option> | |
| <option>À corriger</option> | |
| <option>En rédaction</option> | |
| </select> | |
| <select class="border rounded px-3 py-2 text-sm"> | |
| <option>Trier par</option> | |
| <option>Date de création</option> | |
| <option>Date de validation</option> | |
| <option>Nom du projet</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Référence</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Projet</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap">RPT-2023-128</td> | |
| <td class="px-6 py-4 whitespace-nowrap">PRJ-2023-045</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Avant-projet</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Validé</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap">10/09/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-900 mr-2"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| <button class="text-purple-600 hover:text-purple-900"> | |
| <i class="fas fa-print"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap">RPT-2023-127</td> | |
| <td class="px-6 py-4 whitespace-nowrap">PRJ-2023-044</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Définitif</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">En attente</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap">05/09/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-900 mr-2"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| <button class="text-purple-600 hover:text-purple-900"> | |
| <i class="fas fa-print"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap">RPT-2023-126</td> | |
| <td class="px-6 py-4 whitespace-nowrap">PRJ-2023-043</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Définitif</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">À corriger</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap">01/09/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-900 mr-2"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| <button class="text-purple-600 hover:text-purple-900"> | |
| <i class="fas fa-print"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap">RPT-2023-125</td> | |
| <td class="px-6 py-4 whitespace-nowrap">PRJ-2023-042</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Avant-projet</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">En rédaction</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap">28/08/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-900 mr-2"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| <button class="text-purple-600 hover:text-purple-900"> | |
| <i class="fas fa-print"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="px-6 py-4 border-t flex items-center justify-between"> | |
| <div class="text-sm text-gray-600"> | |
| Affichage <span class="font-medium">1</span> à <span class="font-medium">4</span> sur <span class="font-medium">48</span> rapports | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button class="px-3 py-1 border rounded bg-blue-600 text-white">1</button> | |
| <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100">2</button> | |
| <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100">3</button> | |
| <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Employees Tab --> | |
| <div id="employees" class="tab-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Gestion des Employés</h2> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Nouvel Employé | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center space-x-4"> | |
| <img src="https://ui-avatars.com/api/?name=Jean+Dupont&background=random" class="w-16 h-16 rounded-full" alt="Employee"> | |
| <div> | |
| <h3 class="font-bold">Jean Dupont</h3> | |
| <p class="text-gray-600 text-sm">Ingénieur parasismique</p> | |
| <div class="flex space-x-1 mt-1"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">CDI</span> | |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Actif</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-200"> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-500">Projets:</span> | |
| <span class="font-medium">5</span> | |
| </div> | |
| <div class="flex justify-between text-sm mt-1"> | |
| <span class="text-gray-500">Depuis:</span> | |
| <span class="font-medium">15/03/2020</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-900"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-900"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-red-600 hover:text-red-900"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center space-x-4"> | |
| <img src="https://ui-avatars.com/api/?name=Marie+Martin&background=random" class="w-16 h-16 rounded-full" alt="Employee"> | |
| <div> | |
| <h3 class="font-bold">Marie Martin</h3> | |
| <p class="text-gray-600 text-sm">Technicienne contrôle</p> | |
| <div class="flex space-x-1 mt-1"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">CDI</span> | |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Actif</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-200"> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-500">Projets:</span> | |
| <span class="font-medium">3</span> | |
| </div> | |
| <div class="flex justify-between text-sm mt-1"> | |
| <span class="text-gray-500">Depuis:</span> | |
| <span class="font-medium">22/06/2021</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-900"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-900"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-red-600 hover:text-red-900"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center space-x-4"> | |
| <img src="https://ui-avatars.com/api/?name=Pierre+Durand&background=random" class="w-16 h-16 rounded-full" alt="Employee"> | |
| <div> | |
| <h3 class="font-bold">Pierre Durand</h3> | |
| <p class="text-gray-600 text-sm">Responsable qualité</p> | |
| <div class="flex space-x-1 mt-1"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">CDI</span> | |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Actif</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-200"> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-500">Projets:</span> | |
| <span class="font-medium">7</span> | |
| </div> | |
| <div class="flex justify-between text-sm mt-1"> | |
| <span class="text-gray-500">Depuis:</span> | |
| <span class="font-medium">10/01/2019</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-900"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-900"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-red-600 hover:text-red-900"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center space-x-4"> | |
| <img src="https://ui-avatars.com/api/?name=Sophie+Leroy&background=random" class="w-16 h-16 rounded-full" alt="Employee"> | |
| <div> | |
| <h3 class="font-bold">Sophie Leroy</h3> | |
| <p class="text-gray-600 text-sm">Ingénieure structure</p> | |
| <div class="flex space-x-1 mt-1"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">CDI</span> | |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Actif</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-200"> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-500">Projets:</span> | |
| <span class="font-medium">4</span> | |
| </div> | |
| <div class="flex justify-between text-sm mt-1"> | |
| <span class="text-gray-500">Depuis:</span> | |
| <span class="font-medium">05/05/2022</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-900"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-900"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-red-600 hover:text-red-900"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b"> | |
| <div class="flex flex-wrap items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Rechercher un employé..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4 mt-2 md:mt-0"> | |
| <select class="border rounded px-3 py-2 text-sm"> | |
| <option>Tous les statuts</option> | |
| <option>Actif</option> | |
| <option>Inactif</option> | |
| <option>Congé</option> | |
| </select> | |
| <select class="border rounded px-3 py-2 text-sm"> | |
| <option>Trier par</option> | |
| <option>Nom</option> | |
| <option>Date d'embauche</option> | |
| <option>Poste</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Employé</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Poste</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contrat</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date embauche</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Projets</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=Jean+Dupont&background=random" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Jean Dupont</div> | |
| <div class="text-sm text-gray-500">jean.dupont@c2gp.com</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Ingénieur parasismique</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">CDI</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">15/03/2020</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">5</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Actif</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-900 mr-2"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-red-600 hover:text-red-900"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=Marie+Martin&background=random" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Marie Martin</div> | |
| <div class="text-sm text-gray-500">marie.martin@c2gp.com</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Technicienne contrôle</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">CDI</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">22/06/2021</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">3</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Actif</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-900 mr-2"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-red-600 hover:text-red-900"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=Pierre+Durand&background=random" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Pierre Durand</div> | |
| <div class="text-sm text-gray-500">pierre.durand@c2gp.com</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Responsable qualité</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">CDI</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">10/01/2019</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">7</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Actif</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-900 mr-2"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-red-600 hover:text-red-900"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="px-6 py-4 border-t flex items-center justify-between"> | |
| <div class="text-sm text-gray-600"> | |
| Affichage <span class="font-medium">1</span> à <span class="font-medium">3</span> sur <span class="font-medium">12</span> employés | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button class="px-3 py-1 border rounded bg-blue-600 text-white">1</button> | |
| <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100">2</button> | |
| <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100">3</button> | |
| <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Calendar Tab --> | |
| <div id="calendar" class="tab-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Calendrier des Interventions</h2> | |
| <div class="flex space-x-3"> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-filter mr-2"></i> Filtres | |
| </button> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> | |
| </html> |