Hugging Face's logo

Spaces:
elodiatech
/
eloadminbackoffice
Running

App Files Community
elodiatech commited on
Commit
144f593
·
verified ·
1 Parent(s): 621eca6

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1137 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Eloadminbackoffice
3
- emoji: 🚀
4
- colorFrom: blue
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: eloadminbackoffice
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1137 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ElodiaTech - Backoffice Pack Administratif Santé Pro</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#1e40af',
15
+ secondary: '#1e3a8a',
16
+ accent: '#3b82f6',
17
+ dark: '#1f2937',
18
+ light: '#f9fafb',
19
+ success: '#10b981',
20
+ warning: '#f59e0b',
21
+ danger: '#ef4444',
22
+ info: '#3b82f6'
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ .sidebar {
30
+ transition: all 0.3s ease;
31
+ }
32
+ .sidebar-collapsed {
33
+ width: 70px;
34
+ }
35
+ .sidebar-collapsed .nav-text {
36
+ display: none;
37
+ }
38
+ .sidebar-collapsed .logo-text {
39
+ display: none;
40
+ }
41
+ .sidebar-collapsed .nav-item {
42
+ justify-content: center;
43
+ }
44
+ .content {
45
+ transition: margin-left 0.3s ease;
46
+ }
47
+ .chart-container {
48
+ position: relative;
49
+ height: 300px;
50
+ }
51
+ .notification-badge {
52
+ position: absolute;
53
+ top: -5px;
54
+ right: -5px;
55
+ }
56
+ .dropdown:hover .dropdown-menu {
57
+ display: block;
58
+ }
59
+ .task-item:hover {
60
+ background-color: #f3f4f6;
61
+ }
62
+ .ticket-priority-high {
63
+ border-left: 4px solid #ef4444;
64
+ }
65
+ .ticket-priority-medium {
66
+ border-left: 4px solid #f59e0b;
67
+ }
68
+ .ticket-priority-low {
69
+ border-left: 4px solid #3b82f6;
70
+ }
71
+ .page-content {
72
+ display: none;
73
+ }
74
+ .page-content.active {
75
+ display: block;
76
+ }
77
+ </style>
78
+ </head>
79
+ <body class="bg-gray-50 font-sans">
80
+ <div class="flex h-screen overflow-hidden">
81
+ <!-- Sidebar -->
82
+ <div class="sidebar bg-white text-gray-800 shadow-lg w-64 flex flex-col">
83
+ <!-- Logo -->
84
+ <div class="p-4 flex items-center border-b border-gray-200">
85
+ <img src="https://www.elodiatech.com/wp-content/uploads/2023/05/logo-elodiatech.png" alt="ElodiaTech Logo" class="h-10">
86
+ <span class="logo-text ml-3 text-xl font-bold text-primary">ElodiaTech</span>
87
+ </div>
88
+
89
+ <!-- User Profile -->
90
+ <div class="p-4 flex items-center border-b border-gray-200">
91
+ <div class="relative">
92
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User" class="h-10 w-10 rounded-full">
93
+ <span class="absolute bottom-0 right-0 h-3 w-3 bg-success rounded-full border-2 border-white"></span>
94
+ </div>
95
+ <div class="ml-3">
96
+ <p class="text-sm font-medium">Sarah Johnson</p>
97
+ <p class="text-xs text-gray-500">Administrateur</p>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Navigation -->
102
+ <nav class="flex-1 overflow-y-auto">
103
+ <ul class="py-2">
104
+ <li class="px-2">
105
+ <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')">
106
+ <i class="fas fa-tachometer-alt"></i>
107
+ <span class="nav-text ml-3">Tableau de bord</span>
108
+ </a>
109
+ </li>
110
+ <li class="px-2 mt-1">
111
+ <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')">
112
+ <i class="fas fa-users"></i>
113
+ <span class="nav-text ml-3">Clients</span>
114
+ <span class="ml-auto bg-primary text-white text-xs font-medium px-2 py-0.5 rounded-full">24</span>
115
+ </a>
116
+ </li>
117
+ <li class="px-2 mt-1">
118
+ <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')">
119
+ <i class="fas fa-calendar-check"></i>
120
+ <span class="nav-text ml-3">Rendez-vous</span>
121
+ </a>
122
+ </li>
123
+ <li class="px-2 mt-1">
124
+ <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')">
125
+ <i class="fas fa-file-invoice-dollar"></i>
126
+ <span class="nav-text ml-3">Abonnements</span>
127
+ </a>
128
+ </li>
129
+ <li class="px-2 mt-1">
130
+ <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')">
131
+ <i class="fas fa-tasks"></i>
132
+ <span class="nav-text ml-3">Tâches admin</span>
133
+ </a>
134
+ </li>
135
+ <li class="px-2 mt-1">
136
+ <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')">
137
+ <i class="fas fa-headset"></i>
138
+ <span class="nav-text ml-3">Support</span>
139
+ <span class="ml-auto bg-danger text-white text-xs font-medium px-2 py-0.5 rounded-full">5</span>
140
+ </a>
141
+ </li>
142
+ <li class="px-2 mt-1">
143
+ <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')">
144
+ <i class="fas fa-chart-bar"></i>
145
+ <span class="nav-text ml-3">Rapports</span>
146
+ </a>
147
+ </li>
148
+ <li class="px-2 mt-1">
149
+ <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')">
150
+ <i class="fas fa-cog"></i>
151
+ <span class="nav-text ml-3">Paramètres</span>
152
+ </a>
153
+ </li>
154
+ </ul>
155
+
156
+ <!-- Collapse Button -->
157
+ <div class="p-4 border-t border-gray-200">
158
+ <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">
159
+ <i class="fas fa-chevron-left"></i>
160
+ <span class="nav-text ml-3">Réduire</span>
161
+ </button>
162
+ </div>
163
+ </nav>
164
+ </div>
165
+
166
+ <!-- Main Content -->
167
+ <div class="content flex-1 flex flex-col overflow-hidden">
168
+ <!-- Top Navigation -->
169
+ <header class="bg-white shadow-sm z-10">
170
+ <div class="flex items-center justify-between px-6 py-3">
171
+ <div class="flex items-center">
172
+ <h1 class="text-xl font-semibold text-gray-800" id="page-title">Tableau de bord</h1>
173
+ </div>
174
+
175
+ <div class="flex items-center space-x-4">
176
+ <!-- Search -->
177
+ <div class="relative">
178
+ <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">
179
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
180
+ </div>
181
+
182
+ <!-- Notifications -->
183
+ <div class="relative">
184
+ <button class="p-2 text-gray-600 hover:text-primary rounded-full hover:bg-blue-50">
185
+ <i class="fas fa-bell"></i>
186
+ <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>
187
+ </button>
188
+ </div>
189
+
190
+ <!-- User Dropdown -->
191
+ <div class="relative dropdown">
192
+ <button class="flex items-center space-x-2 focus:outline-none">
193
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User" class="h-8 w-8 rounded-full">
194
+ <span class="text-sm font-medium">Sarah J.</span>
195
+ <i class="fas fa-chevron-down text-xs"></i>
196
+ </button>
197
+ <div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-20 hidden">
198
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50">Profil</a>
199
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50">Paramètres</a>
200
+ <div class="border-t border-gray-200"></div>
201
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50">Déconnexion</a>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </header>
207
+
208
+ <!-- Main Content Area -->
209
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
210
+ <!-- Dashboard Page -->
211
+ <div id="dashboard" class="page-content active">
212
+ <!-- Stats Cards -->
213
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
214
+ <div class="bg-white p-6 rounded-lg shadow">
215
+ <div class="flex items-center">
216
+ <div class="p-3 rounded-full bg-blue-50 text-primary">
217
+ <i class="fas fa-user-plus text-xl"></i>
218
+ </div>
219
+ <div class="ml-4">
220
+ <p class="text-sm font-medium text-gray-500">Nouvelles demandes</p>
221
+ <p class="text-2xl font-semibold text-gray-800">24</p>
222
+ </div>
223
+ </div>
224
+ <div class="mt-4">
225
+ <span class="text-sm text-success font-medium"><i class="fas fa-arrow-up"></i> 12%</span>
226
+ <span class="text-sm text-gray-500 ml-2">vs mois dernier</span>
227
+ </div>
228
+ </div>
229
+
230
+ <div class="bg-white p-6 rounded-lg shadow">
231
+ <div class="flex items-center">
232
+ <div class="p-3 rounded-full bg-green-50 text-success">
233
+ <i class="fas fa-file-invoice-dollar text-xl"></i>
234
+ </div>
235
+ <div class="ml-4">
236
+ <p class="text-sm font-medium text-gray-500">Abonnements actifs</p>
237
+ <p class="text-2xl font-semibold text-gray-800">187</p>
238
+ </div>
239
+ </div>
240
+ <div class="mt-4">
241
+ <span class="text-sm text-success font-medium"><i class="fas fa-arrow-up"></i> 8%</span>
242
+ <span class="text-sm text-gray-500 ml-2">vs mois dernier</span>
243
+ </div>
244
+ </div>
245
+
246
+ <div class="bg-white p-6 rounded-lg shadow">
247
+ <div class="flex items-center">
248
+ <div class="p-3 rounded-full bg-yellow-50 text-warning">
249
+ <i class="fas fa-headset text-xl"></i>
250
+ </div>
251
+ <div class="ml-4">
252
+ <p class="text-sm font-medium text-gray-500">Tickets en attente</p>
253
+ <p class="text-2xl font-semibold text-gray-800">14</p>
254
+ </div>
255
+ </div>
256
+ <div class="mt-4">
257
+ <span class="text-sm text-danger font-medium"><i class="fas fa-arrow-down"></i> 5%</span>
258
+ <span class="text-sm text-gray-500 ml-2">vs mois dernier</span>
259
+ </div>
260
+ </div>
261
+
262
+ <div class="bg-white p-6 rounded-lg shadow">
263
+ <div class="flex items-center">
264
+ <div class="p-3 rounded-full bg-purple-50 text-purple-600">
265
+ <i class="fas fa-euro-sign text-xl"></i>
266
+ </div>
267
+ <div class="ml-4">
268
+ <p class="text-sm font-medium text-gray-500">Revenus mensuels</p>
269
+ <p class="text-2xl font-semibold text-gray-800">€5,240</p>
270
+ </div>
271
+ </div>
272
+ <div class="mt-4">
273
+ <span class="text-sm text-success font-medium"><i class="fas fa-arrow-up"></i> 15%</span>
274
+ <span class="text-sm text-gray-500 ml-2">vs mois dernier</span>
275
+ </div>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- Charts Row -->
280
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
281
+ <!-- Inscriptions Chart -->
282
+ <div class="bg-white p-6 rounded-lg shadow">
283
+ <div class="flex justify-between items-center mb-4">
284
+ <h2 class="text-lg font-semibold text-gray-800">Évolution des inscriptions</h2>
285
+ <div class="flex space-x-2">
286
+ <button class="px-3 py-1 text-xs bg-blue-50 text-primary rounded-lg">Hebdo</button>
287
+ <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-lg">Mensuel</button>
288
+ </div>
289
+ </div>
290
+ <div class="chart-container">
291
+ <canvas id="subscriptionsChart"></canvas>
292
+ </div>
293
+ </div>
294
+
295
+ <!-- Services Chart -->
296
+ <div class="bg-white p-6 rounded-lg shadow">
297
+ <div class="flex justify-between items-center mb-4">
298
+ <h2 class="text-lg font-semibold text-gray-800">Répartition des services</h2>
299
+ <div class="flex space-x-2">
300
+ <button class="px-3 py-1 text-xs bg-blue-50 text-primary rounded-lg">Mois en cours</button>
301
+ <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-lg">Tous</button>
302
+ </div>
303
+ </div>
304
+ <div class="chart-container">
305
+ <canvas id="servicesChart"></canvas>
306
+ </div>
307
+ </div>
308
+ </div>
309
+
310
+ <!-- Recent Activity and Tickets -->
311
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
312
+ <!-- Recent Clients -->
313
+ <div class="bg-white p-6 rounded-lg shadow">
314
+ <div class="flex justify-between items-center mb-4">
315
+ <h2 class="text-lg font-semibold text-gray-800">Nouveaux clients</h2>
316
+ <a href="#" class="text-sm text-primary font-medium">Voir tout</a>
317
+ </div>
318
+ <div class="space-y-4">
319
+ <div class="flex items-center">
320
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="h-10 w-10 rounded-full">
321
+ <div class="ml-3">
322
+ <p class="text-sm font-medium text-gray-800">Dr. Martin Dupont</p>
323
+ <p class="text-xs text-gray-500">Médecin généraliste</p>
324
+ </div>
325
+ <div class="ml-auto">
326
+ <span class="px-2 py-1 text-xs bg-blue-50 text-primary rounded-full">Base + FSE</span>
327
+ </div>
328
+ </div>
329
+ <div class="flex items-center">
330
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="h-10 w-10 rounded-full">
331
+ <div class="ml-3">
332
+ <p class="text-sm font-medium text-gray-800">Dr. Sophie Leroy</p>
333
+ <p class="text-xs text-gray-500">Dentiste</p>
334
+ </div>
335
+ <div class="ml-auto">
336
+ <span class="px-2 py-1 text-xs bg-green-50 text-success rounded-full">Base</span>
337
+ </div>
338
+ </div>
339
+ <div class="flex items-center">
340
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User" class="h-10 w-10 rounded-full">
341
+ <div class="ml-3">
342
+ <p class="text-sm font-medium text-gray-800">Dr. Jean Martin</p>
343
+ <p class="text-xs text-gray-500">Kinésithérapeute</p>
344
+ </div>
345
+ <div class="ml-auto">
346
+ <span class="px-2 py-1 text-xs bg-purple-50 text-purple-600 rounded-full">Complet</span>
347
+ </div>
348
+ </div>
349
+ <div class="flex items-center">
350
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="h-10 w-10 rounded-full">
351
+ <div class="ml-3">
352
+ <p class="text-sm font-medium text-gray-800">Dr. Marie Lambert</p>
353
+ <p class="text-xs text-gray-500">Pédiatre</p>
354
+ </div>
355
+ <div class="ml-auto">
356
+ <span class="px-2 py-1 text-xs bg-blue-50 text-primary rounded-full">Base + FSE</span>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ </div>
361
+
362
+ <!-- Recent Tickets -->
363
+ <div class="bg-white p-6 rounded-lg shadow col-span-2">
364
+ <div class="flex justify-between items-center mb-4">
365
+ <h2 class="text-lg font-semibold text-gray-800">Tickets récents</h2>
366
+ <div class="flex space-x-2">
367
+ <button class="px-3 py-1 text-xs bg-blue-50 text-primary rounded-lg">Tous</button>
368
+ <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-lg">Urgents</button>
369
+ </div>
370
+ </div>
371
+ <div class="overflow-x-auto">
372
+ <table class="min-w-full divide-y divide-gray-200">
373
+ <thead class="bg-gray-50">
374
+ <tr>
375
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
376
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
377
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Problème</th>
378
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Priorité</th>
379
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
380
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
381
+ </tr>
382
+ </thead>
383
+ <tbody class="bg-white divide-y divide-gray-200">
384
+ <tr class="ticket-priority-high hover:bg-gray-50">
385
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#4587</td>
386
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Dr. Martin Dupont</td>
387
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Problème de synchronisation ClickoDoc</td>
388
+ <td class="px-6 py-4 whitespace-nowrap">
389
+ <span class="px-2 py-1 text-xs bg-danger text-white rounded-full">Urgent</span>
390
+ </td>
391
+ <td class="px-6 py-4 whitespace-nowrap">
392
+ <span class="px-2 py-1 text-xs bg-yellow-50 text-warning rounded-full">En cours</span>
393
+ </td>
394
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
395
+ <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button>
396
+ <button class="ml-2 text-success hover:text-green-700"><i class="fas fa-check"></i></button>
397
+ </td>
398
+ </tr>
399
+ <tr class="ticket-priority-medium hover:bg-gray-50">
400
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#4586</td>
401
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Dr. Sophie Leroy</td>
402
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Question sur le traitement des FSE</td>
403
+ <td class="px-6 py-4 whitespace-nowrap">
404
+ <span class="px-2 py-1 text-xs bg-warning text-white rounded-full">Moyen</span>
405
+ </td>
406
+ <td class="px-6 py-4 whitespace-nowrap">
407
+ <span class="px-2 py-1 text-xs bg-blue-50 text-primary rounded-full">Nouveau</span>
408
+ </td>
409
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
410
+ <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button>
411
+ <button class="ml-2 text-success hover:text-green-700"><i class="fas fa-check"></i></button>
412
+ </td>
413
+ </tr>
414
+ <tr class="ticket-priority-low hover:bg-gray-50">
415
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#4585</td>
416
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Dr. Jean Martin</td>
417
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Demande d'information sur les abonnements comptables</td>
418
+ <td class="px-6 py-4 whitespace-nowrap">
419
+ <span class="px-2 py-1 text-xs bg-info text-white rounded-full">Faible</span>
420
+ </td>
421
+ <td class="px-6 py-4 whitespace-nowrap">
422
+ <span class="px-2 py-1 text-xs bg-green-50 text-success rounded-full">Résolu</span>
423
+ </td>
424
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
425
+ <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button>
426
+ <button class="ml-2 text-success hover:text-green-700"><i class="fas fa-check"></i></button>
427
+ </td>
428
+ </tr>
429
+ <tr class="ticket-priority-high hover:bg-gray-50">
430
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#4584</td>
431
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Dr. Marie Lambert</td>
432
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Problème urgent avec e-Santé Caraïbe</td>
433
+ <td class="px-6 py-4 whitespace-nowrap">
434
+ <span class="px-2 py-1 text-xs bg-danger text-white rounded-full">Urgent</span>
435
+ </td>
436
+ <td class="px-6 py-4 whitespace-nowrap">
437
+ <span class="px-2 py-1 text-xs bg-yellow-50 text-warning rounded-full">En cours</span>
438
+ </td>
439
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
440
+ <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button>
441
+ <button class="ml-2 text-success hover:text-green-700"><i class="fas fa-check"></i></button>
442
+ </td>
443
+ </tr>
444
+ </tbody>
445
+ </table>
446
+ </div>
447
+ </div>
448
+ </div>
449
+
450
+ <!-- Tasks and Calendar -->
451
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-6">
452
+ <!-- Upcoming Tasks -->
453
+ <div class="bg-white p-6 rounded-lg shadow">
454
+ <div class="flex justify-between items-center mb-4">
455
+ <h2 class="text-lg font-semibold text-gray-800">Tâches à venir</h2>
456
+ <a href="#" class="text-sm text-primary font-medium">Voir tout</a>
457
+ </div>
458
+ <div class="space-y-4">
459
+ <div class="task-item p-3 border border-gray-100 rounded-lg hover:shadow-sm transition">
460
+ <div class="flex items-center">
461
+ <input type="checkbox" class="h-4 w-4 text-primary rounded">
462
+ <div class="ml-3">
463
+ <p class="text-sm font-medium text-gray-800">Configurer ClickoDoc pour Dr. Dupont</p>
464
+ <p class="text-xs text-gray-500">Aujourd'hui, 14:00</p>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ <div class="task-item p-3 border border-gray-100 rounded-lg hover:shadow-sm transition">
469
+ <div class="flex items-center">
470
+ <input type="checkbox" class="h-4 w-4 text-primary rounded">
471
+ <div class="ml-3">
472
+ <p class="text-sm font-medium text-gray-800">Envoyer les documents à l'Assurance Maladie</p>
473
+ <p class="text-xs text-gray-500">Demain, 09:00</p>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ <div class="task-item p-3 border border-gray-100 rounded-lg hover:shadow-sm transition">
478
+ <div class="flex items-center">
479
+ <input type="checkbox" class="h-4 w-4 text-primary rounded">
480
+ <div class="ml-3">
481
+ <p class="text-sm font-medium text-gray-800">Contacter le fournisseur pour les stocks</p>
482
+ <p class="text-xs text-gray-500">Demain, 11:30</p>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ <div class="task-item p-3 border border-gray-100 rounded-lg hover:shadow-sm transition">
487
+ <div class="flex items-center">
488
+ <input type="checkbox" class="h-4 w-4 text-primary rounded">
489
+ <div class="ml-3">
490
+ <p class="text-sm font-medium text-gray-800">Rappel: Essai gratuit Dr. Leroy expire dans 3 jours</p>
491
+ <p class="text-xs text-gray-500">15 juin, 10:00</p>
492
+ </div>
493
+ </div>
494
+ </div>
495
+ </div>
496
+ <div class="mt-4">
497
+ <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">
498
+ <i class="fas fa-plus mr-2"></i> Ajouter une tâche
499
+ </button>
500
+ </div>
501
+ </div>
502
+
503
+ <!-- Calendar -->
504
+ <div class="bg-white p-6 rounded-lg shadow col-span-2">
505
+ <div class="flex justify-between items-center mb-4">
506
+ <h2 class="text-lg font-semibold text-gray-800">Calendrier des rendez-vous</h2>
507
+ <div class="flex space-x-2">
508
+ <button class="px-3 py-1 text-xs bg-blue-50 text-primary rounded-lg">Aujourd'hui</button>
509
+ <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-lg">Semaine</button>
510
+ <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-lg">Mois</button>
511
+ </div>
512
+ </div>
513
+ <div class="overflow-x-auto">
514
+ <table class="min-w-full">
515
+ <thead>
516
+ <tr>
517
+ <th class="py-2 text-sm font-medium text-gray-500">Heure</th>
518
+ <th class="py-2 text-sm font-medium text-gray-500">Lundi</th>
519
+ <th class="py-2 text-sm font-medium text-gray-500">Mardi</th>
520
+ <th class="py-2 text-sm font-medium text-gray-500">Mercredi</th>
521
+ <th class="py-2 text-sm font-medium text-gray-500">Jeudi</th>
522
+ <th class="py-2 text-sm font-medium text-gray-500">Vendredi</th>
523
+ </tr>
524
+ </thead>
525
+ <tbody>
526
+ <tr>
527
+ <td class="py-2 text-sm text-gray-500">09:00</td>
528
+ <td class="py-2"></td>
529
+ <td class="py-2">
530
+ <div class="bg-blue-50 text-primary p-2 rounded-lg">
531
+ <p class="text-xs font-medium">Dr. Martin - Consultation</p>
532
+ <p class="text-xs">ClickoDoc</p>
533
+ </div>
534
+ </td>
535
+ <td class="py-2"></td>
536
+ <td class="py-2">
537
+ <div class="bg-green-50 text-success p-2 rounded-lg">
538
+ <p class="text-xs font-medium">Dr. Leroy - Contrôle</p>
539
+ <p class="text-xs">ClickoDoc</p>
540
+ </div>
541
+ </td>
542
+ <td class="py-2"></td>
543
+ </tr>
544
+ <tr>
545
+ <td class="py-2 text-sm text-gray-500">10:00</td>
546
+ <td class="py-2">
547
+ <div class="bg-purple-50 text-purple-600 p-2 rounded-lg">
548
+ <p class="text-xs font-medium">Dr. Lambert - Pédiatrie</p>
549
+ <p class="text-xs">ClickoDoc</p>
550
+ </div>
551
+ </td>
552
+ <td class="py-2"></td>
553
+ <td class="py-2">
554
+ <div class="bg-blue-50 text-primary p-2 rounded-lg">
555
+ <p class="text-xs font-medium">Dr. Dupont - Suivi</p>
556
+ <p class="text-xs">ClickoDoc</p>
557
+ </div>
558
+ </td>
559
+ <td class="py-2"></td>
560
+ <td class="py-2"></td>
561
+ </tr>
562
+ <tr>
563
+ <td class="py-2 text-sm text-gray-500">11:00</td>
564
+ <td class="py-2"></td>
565
+ <td class="py-2">
566
+ <div class="bg-yellow-50 text-warning p-2 rounded-lg">
567
+ <p class="text-xs font-medium">Réunion équipe</p>
568
+ </div>
569
+ </td>
570
+ <td class="py-2"></td>
571
+ <td class="py-2">
572
+ <div class="bg-blue-50 text-primary p-2 rounded-lg">
573
+ <p class="text-xs font-medium">Dr. Martin - Vaccination</p>
574
+ <p class="text-xs">ClickoDoc</p>
575
+ </div>
576
+ </td>
577
+ <td class="py-2"></td>
578
+ </tr>
579
+ <tr>
580
+ <td class="py-2 text-sm text-gray-500">14:00</td>
581
+ <td class="py-2">
582
+ <div class="bg-blue-50 text-primary p-2 rounded-lg">
583
+ <p class="text-xs font-medium">Config. ClickoDoc</p>
584
+ <p class="text-xs">Dr. Dupont</p>
585
+ </div>
586
+ </td>
587
+ <td class="py-2"></td>
588
+ <td class="py-2">
589
+ <div class="bg-green-50 text-success p-2 rounded-lg">
590
+ <p class="text-xs font-medium">Dr. Leroy - Suivi</p>
591
+ <p class="text-xs">ClickoDoc</p>
592
+ </div>
593
+ </td>
594
+ <td class="py-2"></td>
595
+ <td class="py-2"></td>
596
+ </tr>
597
+ <tr>
598
+ <td class="py-2 text-sm text-gray-500">15:00</td>
599
+ <td class="py-2"></td>
600
+ <td class="py-2">
601
+ <div class="bg-purple-50 text-purple-600 p-2 rounded-lg">
602
+ <p class="text-xs font-medium">Dr. Lambert - Consultation</p>
603
+ <p class="text-xs">ClickoDoc</p>
604
+ </div>
605
+ </td>
606
+ <td class="py-2"></td>
607
+ <td class="py-2">
608
+ <div class="bg-blue-50 text-primary p-2 rounded-lg">
609
+ <p class="text-xs font-medium">Support e-Santé</p>
610
+ <p class="text-xs">Dr. Martin</p>
611
+ </div>
612
+ </td>
613
+ <td class="py-2"></td>
614
+ </tr>
615
+ </tbody>
616
+ </table>
617
+ </div>
618
+ </div>
619
+ </div>
620
+ </div>
621
+
622
+ <!-- Clients Page -->
623
+ <div id="clients" class="page-content">
624
+ <div class="bg-white p-6 rounded-lg shadow mb-6">
625
+ <div class="flex justify-between items-center mb-6">
626
+ <h2 class="text-xl font-semibold text-gray-800">Gestion des clients</h2>
627
+ <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-secondary flex items-center">
628
+ <i class="fas fa-plus mr-2"></i> Nouveau client
629
+ </button>
630
+ </div>
631
+
632
+ <div class="flex justify-between items-center mb-4">
633
+ <div class="flex space-x-2">
634
+ <div class="relative">
635
+ <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">
636
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
637
+ </div>
638
+ <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
639
+ <option>Tous les statuts</option>
640
+ <option>Actif</option>
641
+ <option>Inactif</option>
642
+ <option>Essai</option>
643
+ </select>
644
+ </div>
645
+ <div class="flex items-center space-x-2">
646
+ <button class="p-2 text-gray-600 hover:text-primary rounded-lg hover:bg-blue-50">
647
+ <i class="fas fa-download"></i>
648
+ </button>
649
+ <button class="p-2 text-gray-600 hover:text-primary rounded-lg hover:bg-blue-50">
650
+ <i class="fas fa-filter"></i>
651
+ </button>
652
+ </div>
653
+ </div>
654
+
655
+ <div class="overflow-x-auto">
656
+ <table class="min-w-full divide-y divide-gray-200">
657
+ <thead class="bg-gray-50">
658
+ <tr>
659
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
660
+ <input type="checkbox" class="h-4 w-4 text-primary rounded">
661
+ </th>
662
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
663
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
664
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Téléphone</th>
665
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Abonnement</th>
666
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
667
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
668
+ </tr>
669
+ </thead>
670
+ <tbody class="bg-white divide-y divide-gray-200">
671
+ <tr class="hover:bg-gray-50">
672
+ <td class="px-6 py-4 whitespace-nowrap">
673
+ <input type="checkbox" class="h-4 w-4 text-primary rounded">
674
+ </td>
675
+ <td class="px-6 py-4 whitespace-nowrap">
676
+ <div class="flex items-center">
677
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="h-10 w-10 rounded-full">
678
+ <div class="ml-3">
679
+ <p class="text-sm font-medium text-gray-800">Dr. Martin Dupont</p>
680
+ <p class="text-xs text-gray-500">Médecin généraliste</p>
681
+ </div>
682
+ </div>
683
+ </td>
684
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">m.dupont@example.com</td>
685
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">06 12 34 56 78</td>
686
+ <td class="px-6 py-4 whitespace-nowrap">
687
+ <span class="px-2 py-1 text-xs bg-blue-50 text-primary rounded-full">Base + FSE</span>
688
+ </td>
689
+ <td class="px-6 py-4 whitespace-nowrap">
690
+ <span class="px-2 py-1 text-xs bg-green-50 text-success rounded-full">Actif</span>
691
+ </td>
692
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
693
+ <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button>
694
+ <button class="ml-2 text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></button>
695
+ <button class="ml-2 text-danger hover:text-red-700"><i class="fas fa-trash"></i></button>
696
+ </td>
697
+ </tr>
698
+ <tr class="hover:bg-gray-50">
699
+ <td class="px-6 py-4 whitespace-nowrap">
700
+ <input type="checkbox" class="h-4 w-4 text-primary rounded">
701
+ </td>
702
+ <td class="px-6 py-4 whitespace-nowrap">
703
+ <div class="flex items-center">
704
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="h-10 w-10 rounded-full">
705
+ <div class="ml-3">
706
+ <p class="text-sm font-medium text-gray-800">Dr. Sophie Leroy</p>
707
+ <p class="text-xs text-gray-500">Dentiste</p>
708
+ </div>
709
+ </div>
710
+ </td>
711
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">s.leroy@example.com</td>
712
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">06 23 45 67 89</td>
713
+ <td class="px-6 py-4 whitespace-nowrap">
714
+ <span class="px-2 py-1 text-xs bg-green-50 text-success rounded-full">Base</span>
715
+ </td>
716
+ <td class="px-6 py-4 whitespace-nowrap">
717
+ <span class="px-2 py-1 text-xs bg-yellow-50 text-warning rounded-full">Essai</span>
718
+ </td>
719
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
720
+ <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button>
721
+ <button class="ml-2 text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></button>
722
+ <button class="ml-2 text-danger hover:text-red-700"><i class="fas fa-trash"></i></button>
723
+ </td>
724
+ </tr>
725
+ <tr class="hover:bg-gray-50">
726
+ <td class="px-6 py-4 whitespace-nowrap">
727
+ <input type="checkbox" class="h-4 w-4 text-primary rounded">
728
+ </td>
729
+ <td class="px-6 py-4 whitespace-nowrap">
730
+ <div class="flex items-center">
731
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User" class="h-10 w-10 rounded-full">
732
+ <div class="ml-3">
733
+ <p class="text-sm font-medium text-gray-800">Dr. Jean Martin</p>
734
+ <p class="text-xs text-gray-500">Kinésithérapeute</p>
735
+ </div>
736
+ </div>
737
+ </td>
738
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">j.martin@example.com</td>
739
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">06 34 56 78 90</td>
740
+ <td class="px-6 py-4 whitespace-nowrap">
741
+ <span class="px-2 py-1 text-xs bg-purple-50 text-purple-600 rounded-full">Complet</span>
742
+ </td>
743
+ <td class="px-6 py-4 whitespace-nowrap">
744
+ <span class="px-2 py-1 text-xs bg-green-50 text-success rounded-full">Actif</span>
745
+ </td>
746
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
747
+ <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button>
748
+ <button class="ml-2 text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></button>
749
+ <button class="ml-2 text-danger hover:text-red-700"><i class="fas fa-trash"></i></button>
750
+ </td>
751
+ </tr>
752
+ <tr class="hover:bg-gray-50">
753
+ <td class="px-6 py-4 whitespace-nowrap">
754
+ <input type="checkbox" class="h-4 w-4 text-primary rounded">
755
+ </td>
756
+ <td class="px-6 py-4 whitespace-nowrap">
757
+ <div class="flex items-center">
758
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="h-10 w-10 rounded-full">
759
+ <div class="ml-3">
760
+ <p class="text-sm font-medium text-gray-800">Dr. Marie Lambert</p>
761
+ <p class="text-xs text-gray-500">Pédiatre</p>
762
+ </div>
763
+ </div>
764
+ </td>
765
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">m.lambert@example.com</td>
766
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">06 45 67 89 01</td>
767
+ <td class="px-6 py-4 whitespace-nowrap">
768
+ <span class="px-2 py-1 text-xs bg-blue-50 text-primary rounded-full">Base + FSE</span>
769
+ </td>
770
+ <td class="px-6 py-4 whitespace-nowrap">
771
+ <span class="px-2 py-1 text-xs bg-red-50 text-danger rounded-full">Inactif</span>
772
+ </td>
773
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
774
+ <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button>
775
+ <button class="ml-2 text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></button>
776
+ <button class="ml-2 text-danger hover:text-red-700"><i class="fas fa-trash"></i></button>
777
+ </td>
778
+ </tr>
779
+ </tbody>
780
+ </table>
781
+ </div>
782
+
783
+ <div class="flex justify-between items-center mt-4">
784
+ <div class="text-sm text-gray-500">
785
+ Affichage de <span class="font-medium">1</span> à <span class="font-medium">4</span> sur <span class="font-medium">24</span> clients
786
+ </div>
787
+ <div class="flex space-x-2">
788
+ <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-100">Précédent</button>
789
+ <button class="px-3 py-1 bg-primary text-white rounded-lg">1</button>
790
+ <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-100">2</button>
791
+ <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-100">3</button>
792
+ <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-100">Suivant</button>
793
+ </div>
794
+ </div>
795
+ </div>
796
+ </div>
797
+
798
+ <!-- Appointments Page -->
799
+ <div id="appointments" class="page-content">
800
+ <div class="bg-white p-6 rounded-lg shadow mb-6">
801
+ <div class="flex justify-between items-center mb-6">
802
+ <h2 class="text-xl font-semibold text-gray-800">Gestion des rendez-vous</h2>
803
+ <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-secondary flex items-center">
804
+ <i class="fas fa-plus mr-2"></i> Nouveau rendez-vous
805
+ </button>
806
+ </div>
807
+
808
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-4 mb-6">
809
+ <div class="bg-blue-50 p-4 rounded-lg border-l-4 border-primary">
810
+ <p class="text-sm text-gray-500">Rendez-vous aujourd'hui</p>
811
+ <p class="text-2xl font-semibold text-gray-800">5</p>
812
+ </div>
813
+ <div class="bg-green-50 p-4 rounded-lg border-l-4 border-success">
814
+ <p class="text-sm text-gray-500">Confirmés</p>
815
+ <p class="text-2xl font-semibold text-gray-800">12</p>
816
+ </div>
817
+ <div class="bg-yellow-50 p-4 rounded-lg border-l-4 border-warning">
818
+ <p class="text-sm text-gray-500">En attente</p>
819
+ <p class="text-2xl font-semibold text-gray-800">3</p>
820
+ </div>
821
+ <div class="bg-red-50 p-4 rounded-lg border-l-4 border-danger">
822
+ <p class="text-sm text-gray-500">Annulés</p>
823
+ <p class="text-2xl font-semibold text-gray-800">2</p>
824
+ </div>
825
+ </div>
826
+
827
+ <div class="flex justify-between items-center mb-4">
828
+ <div class="flex space-x-2">
829
+ <div class="relative">
830
+ <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">
831
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
832
+ </div>
833
+ <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
834
+ <option>Tous les statuts</option>
835
+ <option>Confirmé</option>
836
+ <option>En attente</option>
837
+ <option>Annulé</option>
838
+ </select>
839
+ </div>
840
+ <div class="flex items-center space-x-2">
841
+ <button class="p-2 text-gray-600 hover:text-primary rounded-lg hover:bg-blue-50">
842
+ <i class="fas fa-download"></i>
843
+ </button>
844
+ <button class="p-2 text-gray-600 hover:text-primary rounded-lg hover:bg-blue-50">
845
+ <i class="fas fa-filter"></i>
846
+ </button>
847
+ </div>
848
+ </div>
849
+
850
+ <div class="overflow-x-auto">
851
+ <table class="min-w-full divide-y divide-gray-200">
852
+ <thead class="bg-gray-50">
853
+ <tr>
854
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
855
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
856
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
857
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Durée</th>
858
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
859
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
860
+ </tr>
861
+ </thead>
862
+ <tbody class="bg-white divide-y divide-gray-200">
863
+ <tr class="hover:bg-gray-50">
864
+ <td class="px-6 py-4 whitespace-nowrap">
865
+ <p class="text-sm font-medium text-gray-800">15 juin 2023</p>
866
+ <p class="text-xs text-gray-500">10:00 - 11:00</p>
867
+ </td>
868
+ <td class="px-6 py-4 whitespace-nowrap">
869
+ <div class="flex items-center">
870
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="h-8 w-8 rounded-full">
871
+ <div class="ml-3">
872
+ <p class="text-sm font-medium text-gray-800">Dr. Martin Dupont</p>
873
+ </div>
874
+ </div>
875
+ </td>
876
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Configuration ClickoDoc</td>
877
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1h</td>
878
+ <td class="px-6 py-4 whitespace-nowrap">
879
+ <span class="px-2 py-1 text-xs bg-green-50 text-success rounded-full">Confirmé</span>
880
+ </td>
881
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
882
+ <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button>
883
+ <button class="ml-2 text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></button>
884
+ <button class="ml-2 text-danger hover:text-red-700"><i class="fas fa-trash"></i></button>
885
+ </td>
886
+ </tr>
887
+ <tr class="hover:bg-gray-50">
888
+ <td class="px-6 py-4 whitespace-nowrap">
889
+ <p class="text-sm font-medium text-gray-800">16 juin 2023</p>
890
+ <p class="text-xs text-gray-500">14:00 - 14:30</p>
891
+ </td>
892
+ <td class="px-6 py-4 whitespace-nowrap">
893
+ <div class="flex items-center">
894
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="h-8 w-8 rounded-full">
895
+ <div class="ml-3">
896
+ <p class="text-sm font-medium text-gray-800">Dr. Sophie Leroy</p>
897
+ </div>
898
+ </div>
899
+ </td>
900
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Formation FSE</td>
901
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30min</td>
902
+ <td class="px-6 py-4 whitespace-nowrap">
903
+ <span class="px-2 py-1 text-xs bg-yellow-50 text-warning rounded-full">En attente</span>
904
+ </td>
905
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
906
+ <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button>
907
+ <button class="ml-2 text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></button>
908
+ <button class="ml-2 text-danger hover:text-red-700"><i class="fas fa-trash"></i></button>
909
+ </td>
910
+ </tr>
911
+ <tr class="hover:bg-gray-50">
912
+ <td class="px-6 py-4 whitespace-nowrap">
913
+ <p class="text-sm font-medium text-gray-800">17 juin 2023</p>
914
+ <p class="text-xs text-gray-500">09:00 - 10:00</p>
915
+ </td>
916
+ <td class="px-6 py-4 whitespace-nowrap">
917
+ <div class="flex items-center">
918
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User" class="h-8 w-8 rounded-full">
919
+ <div class="ml-3">
920
+ <p class="text-sm font-medium text-gray-800">Dr. Jean Martin</p>
921
+ </div>
922
+ </div>
923
+ </td>
924
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Support technique</td>
925
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1h</td>
926
+ <td class="px-6 py-4 whitespace-nowrap">
927
+ <span class="px-2 py-1 text-xs bg-green-50 text-success rounded-full">Confirmé</span>
928
+ </td>
929
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
930
+ <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button>
931
+ <button class="ml-2 text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></button>
932
+ <button class="ml-2 text-danger hover:text-red-700"><i class="fas fa-trash"></i></button>
933
+ </td>
934
+ </tr>
935
+ <tr class="hover:bg-gray-50">
936
+ <td class="px-6 py-4 whitespace-nowrap">
937
+ <p class="text-sm font-medium text-gray-800">18 juin 2023</p>
938
+ <p class="text-xs text-gray-500">11:00 - 11:30</p>
939
+ </td>
940
+ <td class="px-6 py-4 whitespace-nowrap">
941
+ <div class="flex items-center">
942
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="h-8 w-8 rounded-full">
943
+ <div class="ml-3">
944
+ <p class="text-sm font-medium text-gray-800">Dr. Marie Lambert</p>
945
+ </div>
946
+ </div>
947
+ </td>
948
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Renouvellement abonnement</td>
949
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30min</td>
950
+ <td class="px-6 py-4 whitespace-nowrap">
951
+ <span class="px-2 py-1 text-xs bg-red-50 text-danger rounded-full">Annulé</span>
952
+ </td>
953
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
954
+ <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button>
955
+ <button class="ml-2 text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></button>
956
+ <button class="ml-2 text-danger hover:text-red-700"><i class="fas fa-trash"></i></button>
957
+ </td>
958
+ </tr>
959
+ </tbody>
960
+ </table>
961
+ </div>
962
+
963
+ <div class="flex justify-between items-center mt-4">
964
+ <div class="text-sm text-gray-500">
965
+ Affichage de <span class="font-medium">1</span> à <span class="font-medium">4</span> sur <span class="font-medium">12</span> rendez-vous
966
+ </div>
967
+ <div class="flex space-x-2">
968
+ <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-100">Précédent</button>
969
+ <button class="px-3 py-1 bg-primary text-white rounded-lg">1</button>
970
+ <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-100">2</button>
971
+ <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-100">3</button>
972
+ <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-100">Suivant</button>
973
+ </div>
974
+ </div>
975
+ </div>
976
+ </div>
977
+
978
+ <!-- Subscriptions Page -->
979
+ <div id="subscriptions" class="page-content">
980
+ <div class="bg-white p-6 rounded-lg shadow mb-6">
981
+ <div class="flex justify-between items-center mb-6">
982
+ <h2 class="text-xl font-semibold text-gray-800">Gestion des abonnements</h2>
983
+ <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-secondary flex items-center">
984
+ <i class="fas fa-plus mr-2"></i> Nouvel abonnement
985
+ </button>
986
+ </div>
987
+
988
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
989
+ <div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm">
990
+ <div class="flex items-center justify-between">
991
+ <div>
992
+ <p class="text-sm text-gray-500">Abonnements actifs</p>
993
+ <p class="text-2xl font-semibold text-gray-800">187</p>
994
+ </div>
995
+ <div class="p-3 rounded-full bg-green-100 text-success">
996
+ <i class="fas fa-check-circle text-xl"></i>
997
+ </div>
998
+ </div>
999
+ </div>
1000
+ <div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm">
1001
+ <div class="flex items-center justify-between">
1002
+ <div>
1003
+ <p class="text-sm text-gray-500">Essais en cours</p>
1004
+ <p class="text-2xl font-semibold text-gray-800">12</p>
1005
+ </div>
1006
+ <div class="p-3 rounded-full bg-yellow-100 text-warning">
1007
+ <i class="fas fa-hourglass-half text-xl"></i>
1008
+ </div>
1009
+ </div>
1010
+ </div>
1011
+ <div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm">
1012
+ <div class="flex items-center justify-between">
1013
+ <div>
1014
+ <p class="text-sm text-gray-500">À renouveler ce mois</p>
1015
+ <p class="text-2xl font-semibold text-gray-800">24</p>
1016
+ </div>
1017
+ <div class="p-3 rounded-full bg-blue-100 text-primary">
1018
+ <i class="fas fa-sync-alt text-xl"></i>
1019
+ </div>
1020
+ </div>
1021
+ </div>
1022
+ </div>
1023
+
1024
+ <div class="flex justify-between items-center mb-4">
1025
+ <div class="flex space-x-2">
1026
+ <div class="relative">
1027
+ <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">
1028
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
1029
+ </div>
1030
+ <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
1031
+ <option>Tous les types</option>
1032
+ <option>Base</option>
1033
+ <option>Base + FSE</option>
1034
+ <option>Complet</option>
1035
+ </select>
1036
+ </div>
1037
+ <div class="flex items-center space-x-2">
1038
+ <button class="p-2 text-gray-600 hover:text-primary rounded-lg hover:bg-blue-50">
1039
+ <i class="fas fa-download"></i>
1040
+ </button>
1041
+ <button class="p-2 text-gray-600 hover:text-primary rounded-lg hover:bg-blue-50">
1042
+ <i class="fas fa-filter"></i>
1043
+ </button>
1044
+ </div>
1045
+ </div>
1046
+
1047
+ <div class="overflow-x-auto">
1048
+ <table class="min-w-full divide-y divide-gray-200">
1049
+ <thead class="bg-gray-50">
1050
+ <tr>
1051
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
1052
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
1053
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Début</th>
1054
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fin</th>
1055
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Prix</th>
1056
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
1057
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
1058
+ </tr>
1059
+ </thead>
1060
+ <tbody class="bg-white divide-y divide-gray-200">
1061
+ <tr class="hover:bg-gray-50">
1062
+ <td class="px-6 py-4 whitespace-nowrap">
1063
+ <div class="flex items-center">
1064
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="h-8 w-8 rounded-full">
1065
+ <div class="ml-3">
1066
+ <p class="text-sm font-medium text-gray-800">Dr. Martin Dupont</p>
1067
+ </div>
1068
+ </div>
1069
+ </td>
1070
+ <td class="px-6 py-4 whitespace-nowrap">
1071
+ <span class="px-2 py-1 text-xs bg-blue-50 text-primary rounded-full">Base + FSE</span>
1072
+ </td>
1073
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">01/01/2023</td>
1074
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">31/12/2023</td>
1075
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€59/mois</td>
1076
+ <td class="px-6 py-4 whitespace-nowrap">
1077
+ <span class="px-2 py-1 text-xs bg-green-50 text-success rounded-full">Actif</span>
1078
+ </td>
1079
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1080
+ <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button>
1081
+ <button class="ml-2 text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></button>
1082
+ <button class="ml-2 text-danger hover:text-red-700"><i class="fas fa-trash"></i></button>
1083
+ </td>
1084
+ </tr>
1085
+ <tr class="hover:bg-gray-50">
1086
+ <td class="px-6 py-4 whitespace-nowrap">
1087
+ <div class="flex items-center">
1088
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="h-8 w-8 rounded-full">
1089
+ <div class="ml-3">
1090
+ <p class="text-sm font-medium text-gray-800">Dr. Sophie Leroy</p>
1091
+ </div>
1092
+ </div>
1093
+ </td>
1094
+ <td class="px-6 py-4 whitespace-nowrap">
1095
+ <span class="px-2 py-1 text-xs bg-green-50 text-success rounded-full">Base</span>
1096
+ </td>
1097
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/05/2023</td>
1098
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">14/08/2023</td>
1099
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€39/mois</td>
1100
+ <td class="px-6 py-4 whitespace-nowrap">
1101
+ <span class="px-2 py-1 text-xs bg-yellow-50 text-warning rounded-full">Essai</span>
1102
+ </td>
1103
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1104
+ <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button>
1105
+ <button class="ml-2 text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></button>
1106
+ <button class="ml-2 text-danger hover:text-red-700"><i class="fas fa-trash"></i></button>
1107
+ </td>
1108
+ </tr>
1109
+ <tr class="hover:bg-gray-50">
1110
+ <td class="px-6 py-4 whitespace-nowrap">
1111
+ <div class="flex items-center">
1112
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User" class="h-8 w-8 rounded-full">
1113
+ <div class="ml-3">
1114
+ <p class="text-sm font-medium text-gray-800">Dr. Jean Martin</p>
1115
+ </div>
1116
+ </div>
1117
+ </td>
1118
+ <td class="px-6 py-4 whitespace-nowrap">
1119
+ <span class="px-2 py-1 text-xs bg-purple-50 text-purple-600 rounded-full">Complet</span>
1120
+ </td>
1121
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">01/03/2023</td>
1122
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">28/02/2024</td>
1123
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">€89/mois</td>
1124
+ <td class="px�-6 py-4 whitespace-nowrap">
1125
+ <span class="px-2 py-1 text-xs bg-green-50 text-success rounded-full">Actif</span>
1126
+ </td>
1127
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1128
+ <button class="text-primary hover:text-secondary"><i class="fas fa-eye"></i></button>
1129
+ <button class="ml-2 text-warning hover:text-yellow-700"><i class="fas fa-edit"></i></button>
1130
+ <button class="ml-2 text-danger hover:text-red-700"><i class="fas fa-trash"></i></button>
1131
+ </td>
1132
+ </tr>
1133
+ <tr class="hover:bg-gray-50">
1134
+ <td class="px-6 py-4 whitespace-nowrap">
1135
+ <div class="flex items-center">
1136
+ <img src="https://randomuser.me/api/portraits/women/68
1137
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ tu dois creer les autres pages,clients,rendez-vous,abonnements,tâches admin,support,rapports,parametres.et ajoutes les liens des pages au tableau de bord,san modifier le tableau de bord deja fait.