Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ElodiaTech - Backoffice Pack Administratif Santé Pro</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#1e40af', | |
| secondary: '#1e3a8a', | |
| accent: '#3b82f6', | |
| dark: '#1f2937', | |
| light: '#f9fafb', | |
| success: '#10b981', | |
| warning: '#f59e0b', | |
| danger: '#ef4444', | |
| info: '#3b82f6' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar-collapsed { | |
| width: 70px; | |
| } | |
| .sidebar-collapsed .nav-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; | |
| } | |
| .notification-badge { | |
| position: absolute; | |
| top: -5px; | |
| right: -5px; | |
| } | |
| .dropdown:hover .dropdown-menu { | |
| display: block; | |
| } | |
| .task-item:hover { | |
| background-color: #f3f4f6; | |
| } | |
| .ticket-priority-high { | |
| border-left: 4px solid #ef4444; | |
| } | |
| .ticket-priority-medium { | |
| border-left: 4px solid #f59e0b; | |
| } | |
| .ticket-priority-low { | |
| border-left: 4px solid #3b82f6; | |
| } | |
| .page-content { | |
| display: none; | |
| } | |
| .page-content.active { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-white text-gray-800 shadow-lg w-64 flex flex-col"> | |
| <!-- Logo --> | |
| <div class="p-4 flex items-center border-b border-gray-200"> | |
| <img src="https://www.elodiatech.com/wp-content/uploads/2023/05/logo-elodiatech.png" alt="ElodiaTech Logo" class="h-10"> | |
| <span class="logo-text ml-3 text-xl font-bold text-primary">ElodiaTech</span> | |
| </div> | |
| <!-- User Profile --> | |
| <div class="p-4 flex items-center border-b border-gray-200"> | |
| <div class="relative"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User" class="h-10 w-10 rounded-full"> | |
| <span class="absolute bottom-0 right-0 h-3 w-3 bg-success rounded-full border-2 border-white"></span> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Sarah Johnson</p> | |
| <p class="text-xs text-gray-500">Administrateur</p> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="flex-1 overflow-y-auto"> | |
| <ul class="py-2"> | |
| <li class="px-2"> | |
| <a href="#" class="nav-item flex items-center p-2 text-gray-600 hover:text-primary hover:bg-blue-50 rounded-lg" onclick="showPage('dashboard')"> | |
| <i class="fas fa-tachometer-alt"></i> | |
| <span class="nav-text ml-3">Tableau de bord</span> | |
| </a> | |
| </li> | |
| <li class="px-2 mt-1"> | |
| <a href="#" class="nav-item flex items-center p-2 text-gray-600 hover:text-primary hover:bg-blue-50 rounded-lg" onclick="showPage('clients')"> | |
| <i class="fas fa-users"></i> | |
| <span class="nav-text ml-3">Clients</span> | |
| <span class="ml-auto bg-primary text-white text-xs font-medium px-2 py-0.5 rounded-full">24</span> | |
| </a> | |
| </li> | |
| <li class="px-2 mt-1"> | |
| <a href="#" class="nav-item flex items-center p-2 text-gray-600 hover:text-primary hover:bg-blue-50 rounded-lg" onclick="showPage('appointments')"> | |
| <i class="fas fa-calendar-check"></i> | |
| <span class="nav-text ml-3">Rendez-vous</span> | |
| </a> | |
| </li> | |
| <li class="px-2 mt-1"> | |
| <a href="#" class="nav-item flex items-center p-2 text-gray-600 hover:text-primary hover:bg-blue-50 rounded-lg" onclick="showPage('subscriptions')"> | |
| <i class="fas fa-file-invoice-dollar"></i> | |
| <span class="nav-text ml-3">Abonnements</span> | |
| </a> | |
| </li> | |
| <li class="px-2 mt-1"> | |
| <a href="#" class="nav-item flex items-center p-2 text-gray-600 hover:text-primary hover:bg-blue-50 rounded-lg" onclick="showPage('tasks')"> | |
| <i class="fas fa-tasks"></i> | |
| <span class="nav-text ml-3">Tâches admin</span> | |
| </a> | |
| </li> | |
| <li class="px-2 mt-1"> | |
| <a href="#" class="nav-item flex items-center p-2 text-gray-600 hover:text-primary hover:bg-blue-50 rounded-lg" onclick="showPage('support')"> | |
| <i class="fas fa-headset"></i> | |
| <span class="nav-text ml-3">Support</span> | |
| <span class="ml-auto bg-danger text-white text-xs font-medium px-2 py-0.5 rounded-full">5</span> | |
| </a> | |
| </li> | |
| <li class="px-2 mt-1"> | |
| <a href="#" class="nav-item flex items-center p-2 text-gray-600 hover:text-primary hover:bg-blue-50 rounded-lg" onclick="showPage('reports')"> | |
| <i class="fas fa-chart-bar"></i> | |
| <span class="nav-text ml-3">Rapports</span> | |
| </a> | |
| </li> | |
| <li class="px-2 mt-1"> | |
| <a href="#" class="nav-item flex items-center p-2 text-gray-600 hover:text-primary hover:bg-blue-50 rounded-lg" onclick="showPage('settings')"> | |
| <i class="fas fa-cog"></i> | |
| <span class="nav-text ml-3">Paramètres</span> | |
| </a> | |
| </li> | |
| </ul> | |
| <!-- Collapse Button --> | |
| <div class="p-4 border-t border-gray-200"> | |
| <button onclick="toggleSidebar()" class="flex items-center justify-center w-full p-2 text-gray-600 hover:text-primary hover:bg-blue-50 rounded-lg"> | |
| <i class="fas fa-chevron-left"></i> | |
| <span class="nav-text ml-3">Réduire</span> | |
| </button> | |
| </div> | |
| </nav> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="content flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm z-10"> | |
| <div class="flex items-center justify-between px-6 py-3"> | |
| <div class="flex items-center"> | |
| <h1 class="text-xl font-semibold text-gray-800" id="page-title">Tableau de bord</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <!-- Search --> | |
| <div class="relative"> | |
| <input type="text" placeholder="Rechercher..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <!-- Notifications --> | |
| <div class="relative"> | |
| <button class="p-2 text-gray-600 hover:text-primary rounded-full hover:bg-blue-50"> | |
| <i class="fas fa-bell"></i> | |
| <span class="notification-badge bg-danger text-white text-xs font-medium rounded-full h-5 w-5 flex items-center justify-center">3</span> | |
| </button> | |
| </div> | |
| <!-- User Dropdown --> | |
| <div class="relative dropdown"> | |
| <button class="flex items-center space-x-2 focus:outline-none"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User" class="h-8 w-8 rounded-full"> | |
| <span class="text-sm font-medium">Sarah J.</span> | |
| <i class="fas fa-chevron-down text-xs"></i> | |
| </button> | |
| <div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-20 hidden"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50">Profil</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50">Paramètres</a> | |
| <div class="border-t border-gray-200"></div> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50">Déconnexion</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> | |
| <!-- Dashboard Page --> | |
| <div id="dashboard" class="page-content active"> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-50 text-primary"> | |
| <i class="fas fa-user-plus text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500">Nouvelles demandes</p> | |
| <p class="text-2xl font-semibold text-gray-800">24</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-sm text-success font-medium"><i class="fas fa-arrow-up"></i> 12%</span> | |
| <span class="text-sm text-gray-500 ml-2">vs mois dernier</span> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-50 text-success"> | |
| <i class="fas fa-file-invoice-dollar text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500">Abonnements actifs</p> | |
| <p class="text-2xl font-semibold text-gray-800">187</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-sm text-success font-medium"><i class="fas fa-arrow-up"></i> 8%</span> | |
| <span class="text-sm text-gray-500 ml-2">vs mois dernier</span> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-yellow-50 text-warning"> | |
| <i class="fas fa-headset text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500">Tickets en attente</p> | |
| <p class="text-2xl font-semibold text-gray-800">14</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-sm text-danger font-medium"><i class="fas fa-arrow-down"></i> 5%</span> | |
| <span class="text-sm text-gray-500 ml-2">vs mois dernier</span> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-purple-50 text-purple-600"> | |
| <i class="fas fa-euro-sign text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500">Revenus mensuels</p> | |
| <p class="text-2xl font-semibold text-gray-800">€5,240</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-sm text-success font-medium"><i class="fas fa-arrow-up"></i> 15%</span> | |
| <span class="text-sm text-gray-500 ml-2">vs mois dernier</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts Row --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> | |
| <!-- Inscriptions Chart --> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Évolution des inscriptions</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-xs bg-blue-50 text-primary rounded-lg">Hebdo</button> | |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-lg">Mensuel</button> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="subscriptionsChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Services Chart --> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Répartition des services</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-xs bg-blue-50 text-primary rounded-lg">Mois en cours</button> | |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-lg">Tous</button> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="servicesChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activity and Tickets --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Recent Clients --> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Nouveaux clients</h2> | |
| <a href="#" class="text-sm text-primary font-medium">Voir tout</a> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="h-10 w-10 rounded-full"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Dr. Martin Dupont</p> | |
| <p class="text-xs text-gray-500">Médecin généraliste</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <span class="px-2 py-1 text-xs bg-blue-50 text-primary rounded-full">Base + FSE</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="h-10 w-10 rounded-full"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Dr. Sophie Leroy</p> | |
| <p class="text-xs text-gray-500">Dentiste</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <span class="px-2 py-1 text-xs bg-green-50 text-success rounded-full">Base</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User" class="h-10 w-10 rounded-full"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Dr. Jean Martin</p> | |
| <p class="text-xs text-gray-500">Kinésithérapeute</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <span class="px-2 py-1 text-xs bg-purple-50 text-purple-600 rounded-full">Complet</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="h-10 w-10 rounded-full"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Dr. Marie Lambert</p> | |
| <p class="text-xs text-gray-500">Pédiatre</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <span class="px-2 py-1 text-xs bg-blue-50 text-primary rounded-full">Base + FSE</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Tickets --> | |
| <div class="bg-white p-6 rounded-lg shadow col-span-2"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Tickets récents</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-xs bg-blue-50 text-primary rounded-lg">Tous</button> | |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-lg">Urgents</button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Problème</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Priorité</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> | |
| <th scope="col" 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 class="ticket-priority-high hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#4587</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Dr. Martin Dupont</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Problème de synchronisation ClickoDoc</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-danger text-white rounded-full">Urgent</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-yellow-50 text-warning rounded-full">En cours</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button> | |
| <button class="ml-2 text-success hover:text-green-700"><i class="fas fa-check"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="ticket-priority-medium hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#4586</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Dr. Sophie Leroy</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Question sur le traitement des FSE</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-warning text-white rounded-full">Moyen</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-blue-50 text-primary rounded-full">Nouveau</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button> | |
| <button class="ml-2 text-success hover:text-green-700"><i class="fas fa-check"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="ticket-priority-low hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#4585</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Dr. Jean Martin</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Demande d'information sur les abonnements comptables</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-info text-white rounded-full">Faible</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-green-50 text-success rounded-full">Résolu</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button> | |
| <button class="ml-2 text-success hover:text-green-700"><i class="fas fa-check"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="ticket-priority-high hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#4584</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Dr. Marie Lambert</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Problème urgent avec e-Santé Caraïbe</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-danger text-white rounded-full">Urgent</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-yellow-50 text-warning rounded-full">En cours</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button> | |
| <button class="ml-2 text-success hover:text-green-700"><i class="fas fa-check"></i></button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tasks and Calendar --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-6"> | |
| <!-- Upcoming Tasks --> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Tâches à venir</h2> | |
| <a href="#" class="text-sm text-primary font-medium">Voir tout</a> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="task-item p-3 border border-gray-100 rounded-lg hover:shadow-sm transition"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-primary rounded"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Configurer ClickoDoc pour Dr. Dupont</p> | |
| <p class="text-xs text-gray-500">Aujourd'hui, 14:00</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="task-item p-3 border border-gray-100 rounded-lg hover:shadow-sm transition"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-primary rounded"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Envoyer les documents à l'Assurance Maladie</p> | |
| <p class="text-xs text-gray-500">Demain, 09:00</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="task-item p-3 border border-gray-100 rounded-lg hover:shadow-sm transition"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-primary rounded"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Contacter le fournisseur pour les stocks</p> | |
| <p class="text-xs text-gray-500">Demain, 11:30</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="task-item p-3 border border-gray-100 rounded-lg hover:shadow-sm transition"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-primary rounded"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Rappel: Essai gratuit Dr. Leroy expire dans 3 jours</p> | |
| <p class="text-xs text-gray-500">15 juin, 10:00</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <button class="w-full py-2 px-4 border border-dashed border-gray-300 text-gray-500 rounded-lg hover:bg-blue-50 hover:text-primary hover:border-primary"> | |
| <i class="fas fa-plus mr-2"></i> Ajouter une tâche | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Calendar --> | |
| <div class="bg-white p-6 rounded-lg shadow col-span-2"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Calendrier des rendez-vous</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-xs bg-blue-50 text-primary rounded-lg">Aujourd'hui</button> | |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-lg">Semaine</button> | |
| <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-lg">Mois</button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full"> | |
| <thead> | |
| <tr> | |
| <th class="py-2 text-sm font-medium text-gray-500">Heure</th> | |
| <th class="py-2 text-sm font-medium text-gray-500">Lundi</th> | |
| <th class="py-2 text-sm font-medium text-gray-500">Mardi</th> | |
| <th class="py-2 text-sm font-medium text-gray-500">Mercredi</th> | |
| <th class="py-2 text-sm font-medium text-gray-500">Jeudi</th> | |
| <th class="py-2 text-sm font-medium text-gray-500">Vendredi</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td class="py-2 text-sm text-gray-500">09:00</td> | |
| <td class="py-2"></td> | |
| <td class="py-2"> | |
| <div class="bg-blue-50 text-primary p-2 rounded-lg"> | |
| <p class="text-xs font-medium">Dr. Martin - Consultation</p> | |
| <p class="text-xs">ClickoDoc</p> | |
| </div> | |
| </td> | |
| <td class="py-2"></td> | |
| <td class="py-2"> | |
| <div class="bg-green-50 text-success p-2 rounded-lg"> | |
| <p class="text-xs font-medium">Dr. Leroy - Contrôle</p> | |
| <p class="text-xs">ClickoDoc</p> | |
| </div> | |
| </td> | |
| <td class="py-2"></td> | |
| </tr> | |
| <tr> | |
| <td class="py-2 text-sm text-gray-500">10:00</td> | |
| <td class="py-2"> | |
| <div class="bg-purple-50 text-purple-600 p-2 rounded-lg"> | |
| <p class="text-xs font-medium">Dr. Lambert - Pédiatrie</p> | |
| <p class="text-xs">ClickoDoc</p> | |
| </div> | |
| </td> | |
| <td class="py-2"></td> | |
| <td class="py-2"> | |
| <div class="bg-blue-50 text-primary p-2 rounded-lg"> | |
| <p class="text-xs font-medium">Dr. Dupont - Suivi</p> | |
| <p class="text-xs">ClickoDoc</p> | |
| </div> | |
| </td> | |
| <td class="py-2"></td> | |
| <td class="py-2"></td> | |
| </tr> | |
| <tr> | |
| <td class="py-2 text-sm text-gray-500">11:00</td> | |
| <td class="py-2"></td> | |
| <td class="py-2"> | |
| <div class="bg-yellow-50 text-warning p-2 rounded-lg"> | |
| <p class="text-xs font-medium">Réunion équipe</p> | |
| </div> | |
| </td> | |
| <td class="py-2"></td> | |
| <td class="py-2"> | |
| <div class="bg-blue-50 text-primary p-2 rounded-lg"> | |
| <p class="text-xs font-medium">Dr. Martin - Vaccination</p> | |
| <p class="text-xs">ClickoDoc</p> | |
| </div> | |
| </td> | |
| <td class="py-2"></td> | |
| </tr> | |
| <tr> | |
| <td class="py-2 text-sm text-gray-500">14:00</td> | |
| <td class="py-2"> | |
| <div class="bg-blue-50 text-primary p-2 rounded-lg"> | |
| <p class="text-xs font-medium">Config. ClickoDoc</p> | |
| <p class="text-xs">Dr. Dupont</p> | |
| </div> | |
| </td> | |
| <td class="py-2"></td> | |
| <td class="py-2"> | |
| <div class="bg-green-50 text-success p-2 rounded-lg"> | |
| <p class="text-xs font-medium">Dr. Leroy - Suivi</p> | |
| <p class="text-xs">ClickoDoc</p> | |
| </div> | |
| </td> | |
| <td class="py-2"></td> | |
| <td class="py-2"></td> | |
| </tr> | |
| <tr> | |
| <td class="py-2 text-sm text-gray-500">15:00</td> | |
| <td class="py-2"></td> | |
| <td class="py-2"> | |
| <div class="bg-purple-50 text-purple-600 p-2 rounded-lg"> | |
| <p class="text-xs font-medium">Dr. Lambert - Consultation</p> | |
| <p class="text-xs">ClickoDoc</p> | |
| </div> | |
| </td> | |
| <td class="py-2"></td> | |
| <td class="py-2"> | |
| <div class="bg-blue-50 text-primary p-2 rounded-lg"> | |
| <p class="text-xs font-medium">Support e-Santé</p> | |
| <p class="text-xs">Dr. Martin</p> | |
| </div> | |
| </td> | |
| <td class="py-2"></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Clients Page --> | |
| <div id="clients" class="page-content"> | |
| <div class="bg-white p-6 rounded-lg shadow mb-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-800">Gestion des clients</h2> | |
| <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-secondary flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Nouveau client | |
| </button> | |
| </div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="flex space-x-2"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Rechercher un client..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <option>Tous les statuts</option> | |
| <option>Actif</option> | |
| <option>Inactif</option> | |
| <option>Essai</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="p-2 text-gray-600 hover:text-primary rounded-lg hover:bg-blue-50"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| <button class="p-2 text-gray-600 hover:text-primary rounded-lg hover:bg-blue-50"> | |
| <i class="fas fa-filter"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| <input type="checkbox" class="h-4 w-4 text-primary rounded"> | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Téléphone</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Abonnement</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> | |
| <th scope="col" 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 class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <input type="checkbox" class="h-4 w-4 text-primary rounded"> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="h-10 w-10 rounded-full"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Dr. Martin Dupont</p> | |
| <p class="text-xs text-gray-500">Médecin généraliste</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">m.dupont@example.com</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">06 12 34 56 78</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-blue-50 text-primary rounded-full">Base + FSE</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-green-50 text-success rounded-full">Actif</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button> | |
| <button class="ml-2 text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></button> | |
| <button class="ml-2 text-danger hover:text-red-700"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <input type="checkbox" class="h-4 w-4 text-primary rounded"> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="h-10 w-10 rounded-full"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Dr. Sophie Leroy</p> | |
| <p class="text-xs text-gray-500">Dentiste</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">s.leroy@example.com</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">06 23 45 67 89</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-green-50 text-success rounded-full">Base</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-yellow-50 text-warning rounded-full">Essai</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button> | |
| <button class="ml-2 text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></button> | |
| <button class="ml-2 text-danger hover:text-red-700"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <input type="checkbox" class="h-4 w-4 text-primary rounded"> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User" class="h-10 w-10 rounded-full"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Dr. Jean Martin</p> | |
| <p class="text-xs text-gray-500">Kinésithérapeute</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">j.martin@example.com</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">06 34 56 78 90</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-purple-50 text-purple-600 rounded-full">Complet</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-green-50 text-success rounded-full">Actif</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button> | |
| <button class="ml-2 text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></button> | |
| <button class="ml-2 text-danger hover:text-red-700"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <input type="checkbox" class="h-4 w-4 text-primary rounded"> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="h-10 w-10 rounded-full"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Dr. Marie Lambert</p> | |
| <p class="text-xs text-gray-500">Pédiatre</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">m.lambert@example.com</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">06 45 67 89 01</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-blue-50 text-primary rounded-full">Base + FSE</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-red-50 text-danger rounded-full">Inactif</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button> | |
| <button class="ml-2 text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></button> | |
| <button class="ml-2 text-danger hover:text-red-700"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="flex justify-between items-center mt-4"> | |
| <div class="text-sm text-gray-500"> | |
| Affichage de <span class="font-medium">1</span> à <span class="font-medium">4</span> sur <span class="font-medium">24</span> clients | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-100">Précédent</button> | |
| <button class="px-3 py-1 bg-primary text-white rounded-lg">1</button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-100">2</button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-100">3</button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-100">Suivant</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Appointments Page --> | |
| <div id="appointments" class="page-content"> | |
| <div class="bg-white p-6 rounded-lg shadow mb-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-800">Gestion des rendez-vous</h2> | |
| <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-secondary flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Nouveau rendez-vous | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-4 mb-6"> | |
| <div class="bg-blue-50 p-4 rounded-lg border-l-4 border-primary"> | |
| <p class="text-sm text-gray-500">Rendez-vous aujourd'hui</p> | |
| <p class="text-2xl font-semibold text-gray-800">5</p> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg border-l-4 border-success"> | |
| <p class="text-sm text-gray-500">Confirmés</p> | |
| <p class="text-2xl font-semibold text-gray-800">12</p> | |
| </div> | |
| <div class="bg-yellow-50 p-4 rounded-lg border-l-4 border-warning"> | |
| <p class="text-sm text-gray-500">En attente</p> | |
| <p class="text-2xl font-semibold text-gray-800">3</p> | |
| </div> | |
| <div class="bg-red-50 p-4 rounded-lg border-l-4 border-danger"> | |
| <p class="text-sm text-gray-500">Annulés</p> | |
| <p class="text-2xl font-semibold text-gray-800">2</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="flex space-x-2"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Rechercher un rendez-vous..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <option>Tous les statuts</option> | |
| <option>Confirmé</option> | |
| <option>En attente</option> | |
| <option>Annulé</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="p-2 text-gray-600 hover:text-primary rounded-lg hover:bg-blue-50"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| <button class="p-2 text-gray-600 hover:text-primary rounded-lg hover:bg-blue-50"> | |
| <i class="fas fa-filter"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Durée</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> | |
| <th scope="col" 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 class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <p class="text-sm font-medium text-gray-800">15 juin 2023</p> | |
| <p class="text-xs text-gray-500">10:00 - 11:00</p> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="h-8 w-8 rounded-full"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Dr. Martin Dupont</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Configuration ClickoDoc</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1h</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-green-50 text-success rounded-full">Confirmé</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button> | |
| <button class="ml-2 text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></button> | |
| <button class="ml-2 text-danger hover:text-red-700"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <p class="text-sm font-medium text-gray-800">16 juin 2023</p> | |
| <p class="text-xs text-gray-500">14:00 - 14:30</p> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="h-8 w-8 rounded-full"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Dr. Sophie Leroy</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Formation FSE</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30min</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-yellow-50 text-warning rounded-full">En attente</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button> | |
| <button class="ml-2 text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></button> | |
| <button class="ml-2 text-danger hover:text-red-700"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <p class="text-sm font-medium text-gray-800">17 juin 2023</p> | |
| <p class="text-xs text-gray-500">09:00 - 10:00</p> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User" class="h-8 w-8 rounded-full"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Dr. Jean Martin</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Support technique</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1h</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-green-50 text-success rounded-full">Confirmé</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button> | |
| <button class="ml-2 text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></button> | |
| <button class="ml-2 text-danger hover:text-red-700"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <p class="text-sm font-medium text-gray-800">18 juin 2023</p> | |
| <p class="text-xs text-gray-500">11:00 - 11:30</p> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="h-8 w-8 rounded-full"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Dr. Marie Lambert</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Renouvellement abonnement</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30min</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-red-50 text-danger rounded-full">Annulé</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button> | |
| <button class="ml-2 text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></button> | |
| <button class="ml-2 text-danger hover:text-red-700"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="flex justify-between items-center mt-4"> | |
| <div class="text-sm text-gray-500"> | |
| Affichage de <span class="font-medium">1</span> à <span class="font-medium">4</span> sur <span class="font-medium">12</span> rendez-vous | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-100">Précédent</button> | |
| <button class="px-3 py-1 bg-primary text-white rounded-lg">1</button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-100">2</button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-100">3</button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-100">Suivant</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Subscriptions Page --> | |
| <div id="subscriptions" class="page-content"> | |
| <div class="bg-white p-6 rounded-lg shadow mb-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-800">Gestion des abonnements</h2> | |
| <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-secondary flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Nouvel abonnement | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Abonnements actifs</p> | |
| <p class="text-2xl font-semibold text-gray-800">187</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 text-success"> | |
| <i class="fas fa-check-circle text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Essais en cours</p> | |
| <p class="text-2xl font-semibold text-gray-800">12</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-100 text-warning"> | |
| <i class="fas fa-hourglass-half text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">À renouveler ce mois</p> | |
| <p class="text-2xl font-semibold text-gray-800">24</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-100 text-primary"> | |
| <i class="fas fa-sync-alt text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="flex space-x-2"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Rechercher un abonnement..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <option>Tous les types</option> | |
| <option>Base</option> | |
| <option>Base + FSE</option> | |
| <option>Complet</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="p-2 text-gray-600 hover:text-primary rounded-lg hover:bg-blue-50"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| <button class="p-2 text-gray-600 hover:text-primary rounded-lg hover:bg-blue-50"> | |
| <i class="fas fa-filter"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Début</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fin</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Prix</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> | |
| <th scope="col" 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 class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="h-8 w-8 rounded-full"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Dr. Martin Dupont</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-blue-50 text-primary rounded-full">Base + FSE</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">01/01/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">31/12/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€59/mois</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-green-50 text-success rounded-full">Actif</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button> | |
| <button class="ml-2 text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></button> | |
| <button class="ml-2 text-danger hover:text-red-700"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="h-8 w-8 rounded-full"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Dr. Sophie Leroy</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-green-50 text-success rounded-full">Base</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/05/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">14/08/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€39/mois</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-yellow-50 text-warning rounded-full">Essai</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button> | |
| <button class="ml-2 text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></button> | |
| <button class="ml-2 text-danger hover:text-red-700"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User" class="h-8 w-8 rounded-full"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Dr. Jean Martin</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-purple-50 text-purple-600 rounded-full">Complet</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">01/03/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">28/02/2024</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€89/mois</td> | |
| <td class="px�-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs bg-green-50 text-success rounded-full">Actif</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button> | |
| <button class="ml-2 text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></button> | |
| <button class="ml-2 text-danger hover:text-red-700"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/68 | |
| </html> |