Hugging Face's logo

Spaces:
Dannylova31
/
helloappppppp-med
Running

App Files Community
Dannylova31 commited on
Commit
8bd4f57
·
verified ·
1 Parent(s): a509644

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1255 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Helloappppppp Med
3
- emoji: 🏢
4
- colorFrom: yellow
5
- colorTo: purple
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: helloappppppp-med
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: green
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,1255 @@
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>Gestion RDV - Centre Médico-Radiologique Avicenne</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 src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ medical: {
17
+ blue: '#0077B6',
18
+ lightblue: '#90E0EF',
19
+ darkblue: '#03045E',
20
+ teal: '#00B4D8',
21
+ white: '#CAF0F8'
22
+ }
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-expanded {
36
+ width: 250px;
37
+ }
38
+ .main-content {
39
+ transition: margin-left 0.3s ease;
40
+ }
41
+ .fade-in {
42
+ animation: fadeIn 0.5s;
43
+ }
44
+ @keyframes fadeIn {
45
+ from { opacity: 0; }
46
+ to { opacity: 1; }
47
+ }
48
+ .card-hover:hover {
49
+ transform: translateY(-5px);
50
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
51
+ }
52
+ </style>
53
+ </head>
54
+ <body class="bg-gray-100 font-sans">
55
+ <div class="flex h-screen overflow-hidden">
56
+ <!-- Sidebar -->
57
+ <div id="sidebar" class="sidebar sidebar-expanded bg-medical-blue text-white flex flex-col">
58
+ <div class="p-4 flex items-center justify-between border-b border-medical-lightblue">
59
+ <div class="flex items-center space-x-2">
60
+ <div class="flex items-center justify-center w-10 h-10 rounded-full bg-white text-medical-blue">
61
+ <i class="fas fa-heartbeat text-2xl"></i>
62
+ </div>
63
+ <span id="logo-text" class="text-xl font-bold text-white">Avicenne</span>
64
+ </div>
65
+ <button id="toggle-sidebar" class="text-white hover:text-medical-lightblue">
66
+ <i class="fas fa-bars"></i>
67
+ </button>
68
+ </div>
69
+
70
+ <div class="p-4 flex items-center space-x-3 border-b border-medical-lightblue">
71
+ <div class="w-10 h-10 rounded-full bg-white text-medical-blue flex items-center justify-center">
72
+ <i class="fas fa-user-md"></i>
73
+ </div>
74
+ <div id="user-info">
75
+ <p class="font-semibold">Dr. Yassine</p>
76
+ <p class="text-xs text-medical-white">Radiologue</p>
77
+ </div>
78
+ </div>
79
+
80
+ <nav class="flex-1 overflow-y-auto py-4">
81
+ <ul>
82
+ <li>
83
+ <a href="#" id="dashboard-link" class="flex items-center space-x-3 p-3 bg-medical-darkblue rounded-lg mx-2">
84
+ <i class="fas fa-tachometer-alt w-6 text-center"></i>
85
+ <span id="dashboard-text">Tableau de bord</span>
86
+ </a>
87
+ </li>
88
+ <li>
89
+ <a href="#" id="appointments-link" class="flex items-center space-x-3 p-3 bg-medical-darkblue rounded-lg mx-2">
90
+ <i class="fas fa-calendar-check w-6 text-center"></i>
91
+ <span id="appointments-text">Rendez-vous</span>
92
+ </a>
93
+ </li>
94
+ <li>
95
+ <a href="#" id="patients-link" class="flex items-center space-x-3 p-3 hover:bg-medical-darkblue rounded-lg mx-2">
96
+ <i class="fas fa-procedures w-6 text-center"></i>
97
+ <span id="patients-text">Patients</span>
98
+ </a>
99
+ </li>
100
+ <li>
101
+ <a href="#" id="reports-link" class="flex items-center space-x-3 p-3 hover:bg-medical-darkblue rounded-lg mx-2">
102
+ <i class="fas fa-file-medical w-6 text-center"></i>
103
+ <span id="reports-text">Rapports</span>
104
+ </a>
105
+ </li>
106
+ <li>
107
+ <a href="#" id="logs-link" class="flex items-center space-x-3 p-3 hover:bg-medical-darkblue rounded-lg mx-2">
108
+ <i class="fas fa-clipboard-list w-6 text-center"></i>
109
+ <span id="logs-text">Journal d'activité</span>
110
+ </a>
111
+ </li>
112
+ <li>
113
+ <a href="#" id="settings-link" class="flex items-center space-x-3 p-3 hover:bg-medical-darkblue rounded-lg mx-2">
114
+ <i class="fas fa-cog w-6 text-center"></i>
115
+ <span id="settings-text">Paramètres</span>
116
+ </a>
117
+ </li>
118
+ </ul>
119
+ </nav>
120
+
121
+ <div class="p-4 border-t border-medical-lightblue">
122
+ <button id="logout-btn" class="flex items-center space-x-3 w-full p-2 hover:bg-medical-darkblue rounded-lg">
123
+ <i class="fas fa-sign-out-alt w-6 text-center"></i>
124
+ <span id="logout-text">Déconnexion</span>
125
+ </button>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Main Content -->
130
+ <div id="main-content" class="main-content flex-1 overflow-y-auto">
131
+ <!-- Header -->
132
+ <header class="bg-white shadow-sm p-4 flex justify-between items-center">
133
+ <h1 class="text-2xl font-bold text-medical-blue">Gestion des Rendez-vous</h1>
134
+ <div class="flex items-center space-x-4">
135
+ <div class="relative">
136
+ <input type="text" placeholder="Rechercher..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-medical-blue">
137
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
138
+ </div>
139
+ <div class="relative">
140
+ <button id="notifications-btn" class="text-gray-600 hover:text-medical-blue relative">
141
+ <i class="fas fa-bell text-xl"></i>
142
+ <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
143
+ </button>
144
+ </div>
145
+ </div>
146
+ </header>
147
+
148
+ <!-- Content -->
149
+ <main class="p-6">
150
+ <!-- Aperçu des RDV -->
151
+ <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
152
+ <div class="p-4 border-b">
153
+ <h2 class="text-xl font-semibold text-medical-blue">Aperçu des Rendez-vous</h2>
154
+ </div>
155
+ <div class="p-4">
156
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
157
+ <div class="border rounded-lg p-4">
158
+ <h3 class="font-medium text-medical-blue mb-2">RDV Aujourd'hui</h3>
159
+ <div class="space-y-2" id="today-appointments">
160
+ <!-- RDV seront ajoutés dynamiquement -->
161
+ </div>
162
+ </div>
163
+ <div class="border rounded-lg p-4">
164
+ <h3 class="font-medium text-medical-blue mb-2">RDV Demain</h3>
165
+ <div class="space-y-2" id="tomorrow-appointments">
166
+ <!-- RDV seront ajoutés dynamiquement -->
167
+ </div>
168
+ </div>
169
+ <div class="border rounded-lg p-4">
170
+ <h3 class="font-medium text-medical-blue mb-2">Prochains RDV</h3>
171
+ <div class="space-y-2" id="upcoming-appointments">
172
+ <!-- RDV seront ajoutés dynamiquement -->
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+
179
+ <!-- Stats Cards -->
180
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
181
+ <div class="bg-white rounded-lg shadow-md p-6 card-hover transition-all duration-300 border-l-4 border-medical-blue">
182
+ <div class="flex justify-between items-center">
183
+ <div>
184
+ <p class="text-gray-500">RDV aujourd'hui</p>
185
+ <h3 class="text-2xl font-bold text-medical-blue">12</h3>
186
+ </div>
187
+ <div class="bg-medical-lightblue text-medical-blue p-3 rounded-full">
188
+ <i class="fas fa-calendar-day text-xl"></i>
189
+ </div>
190
+ </div>
191
+ <p class="text-sm text-green-500 mt-2"><i class="fas fa-arrow-up"></i> 2 de plus qu'hier</p>
192
+ </div>
193
+
194
+ <div class="bg-white rounded-lg shadow-md p-6 card-hover transition-all duration-300 border-l-4 border-medical-teal">
195
+ <div class="flex justify-between items-center">
196
+ <div>
197
+ <p class="text-gray-500">RDV cette semaine</p>
198
+ <h3 class="text-2xl font-bold text-medical-blue">42</h3>
199
+ </div>
200
+ <div class="bg-blue-100 text-medical-teal p-3 rounded-full">
201
+ <i class="fas fa-calendar-week text-xl"></i>
202
+ </div>
203
+ </div>
204
+ <p class="text-sm text-green-500 mt-2"><i class="fas fa-arrow-up"></i> 5% vs semaine dernière</p>
205
+ </div>
206
+
207
+ <div class="bg-white rounded-lg shadow-md p-6 card-hover transition-all duration-300 border-l-4 border-green-500">
208
+ <div class="flex justify-between items-center">
209
+ <div>
210
+ <p class="text-gray-500">Patients confirmés</p>
211
+ <h3 class="text-2xl font-bold text-medical-blue">38</h3>
212
+ </div>
213
+ <div class="bg-green-100 text-green-500 p-3 rounded-full">
214
+ <i class="fas fa-check-circle text-xl"></i>
215
+ </div>
216
+ </div>
217
+ <p class="text-sm text-gray-500 mt-2">4 en attente de confirmation</p>
218
+ </div>
219
+
220
+ <div class="bg-white rounded-lg shadow-md p-6 card-hover transition-all duration-300 border-l-4 border-red-500">
221
+ <div class="flex justify-between items-center">
222
+ <div>
223
+ <p class="text-gray-500">Annulations</p>
224
+ <h3 class="text-2xl font-bold text-medical-blue">2</h3>
225
+ </div>
226
+ <div class="bg-red-100 text-red-500 p-3 rounded-full">
227
+ <i class="fas fa-times-circle text-xl"></i>
228
+ </div>
229
+ </div>
230
+ <p class="text-sm text-gray-500 mt-2">1% du total des RDV</p>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Appointments Table -->
235
+ <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
236
+ <div class="p-4 border-b flex justify-between items-center">
237
+ <h2 class="text-xl font-semibold text-medical-blue">Liste des Rendez-vous</h2>
238
+ <div class="flex space-x-2">
239
+ <button id="export-pdf" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg flex items-center space-x-2">
240
+ <i class="fas fa-file-pdf"></i>
241
+ <span>PDF</span>
242
+ </button>
243
+ <button id="export-excel" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg flex items-center space-x-2">
244
+ <i class="fas fa-file-excel"></i>
245
+ <span>Excel</span>
246
+ </button>
247
+ <button id="add-appointment" class="bg-medical-blue hover:bg-medical-darkblue text-white px-4 py-2 rounded-lg flex items-center space-x-2">
248
+ <i class="fas fa-plus"></i>
249
+ <span>Nouveau RDV</span>
250
+ </button>
251
+ </div>
252
+ </div>
253
+
254
+ <div class="overflow-x-auto">
255
+ <table class="min-w-full divide-y divide-gray-200">
256
+ <thead class="bg-gray-50">
257
+ <tr>
258
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Patient</th>
259
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date/Heure</th>
260
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type d'examen</th>
261
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
262
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
263
+ </tr>
264
+ </thead>
265
+ <tbody class="bg-white divide-y divide-gray-200" id="appointments-table-body">
266
+ <!-- Rows will be added dynamically -->
267
+ </tbody>
268
+ </table>
269
+ </div>
270
+
271
+ <div class="p-4 border-t flex justify-between items-center">
272
+ <div class="text-sm text-gray-500">
273
+ Affichage de <span id="start-item">1</span> à <span id="end-item">10</span> sur <span id="total-items">24</span> rendez-vous
274
+ </div>
275
+ <div class="flex space-x-2">
276
+ <button class="px-3 py-1 border rounded-md text-gray-700 disabled:opacity-50" id="prev-page" disabled>
277
+ <i class="fas fa-chevron-left"></i>
278
+ </button>
279
+ <button class="px-3 py-1 border rounded-md bg-medical-blue text-white">1</button>
280
+ <button class="px-3 py-1 border rounded-md text-gray-700 hover:bg-gray-100">2</button>
281
+ <button class="px-3 py-1 border rounded-md text-gray-700 hover:bg-gray-100">3</button>
282
+ <button class="px-3 py-1 border rounded-md text-gray-700" id="next-page">
283
+ <i class="fas fa-chevron-right"></i>
284
+ </button>
285
+ </div>
286
+ </div>
287
+ </div>
288
+
289
+ <!-- Calendar View -->
290
+ <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
291
+ <div class="p-4 border-b flex justify-between items-center">
292
+ <h2 class="text-xl font-semibold text-medical-blue">Vue Calendrier</h2>
293
+ <div class="flex items-center space-x-4">
294
+ <div class="flex items-center space-x-2">
295
+ <button class="px-3 py-1 border rounded-md text-gray-700">
296
+ <i class="fas fa-chevron-left"></i>
297
+ </button>
298
+ <span class="font-medium">Mai 2023</span>
299
+ <button class="px-3 py-1 border rounded-md text-gray-700">
300
+ <i class="fas fa-chevron-right"></i>
301
+ </button>
302
+ </div>
303
+ <div class="relative">
304
+ <select class="appearance-none bg-white border rounded-md pl-3 pr-8 py-1 focus:outline-none focus:ring-2 focus:ring-medical-blue">
305
+ <option>Vue semaine</option>
306
+ <option selected>Vue mois</option>
307
+ <option>Vue jour</option>
308
+ </select>
309
+ <i class="fas fa-chevron-down absolute right-3 top-2 text-gray-400 pointer-events-none"></i>
310
+ </div>
311
+ </div>
312
+ </div>
313
+
314
+ <div class="p-4">
315
+ <div class="grid grid-cols-7 gap-1 mb-2">
316
+ <div class="text-center font-medium text-gray-500 py-2">Lun</div>
317
+ <div class="text-center font-medium text-gray-500 py-2">Mar</div>
318
+ <div class="text-center font-medium text-gray-500 py-2">Mer</div>
319
+ <div class="text-center font-medium text-gray-500 py-2">Jeu</div>
320
+ <div class="text-center font-medium text-gray-500 py-2">Ven</div>
321
+ <div class="text-center font-medium text-gray-500 py-2">Sam</div>
322
+ <div class="text-center font-medium text-gray-500 py-2">Dim</div>
323
+ </div>
324
+
325
+ <div class="grid grid-cols-7 gap-1" id="calendar-grid">
326
+ <!-- Calendar cells will be added dynamically -->
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </main>
331
+ </div>
332
+ </div>
333
+
334
+ <!-- Add Appointment Modal -->
335
+ <div id="add-appointment-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
336
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto">
337
+ <div class="p-4 border-b flex justify-between items-center">
338
+ <h3 class="text-xl font-semibold text-medical-blue">Nouveau Rendez-vous</h3>
339
+ <button id="close-add-modal" class="text-gray-500 hover:text-gray-700">
340
+ <i class="fas fa-times"></i>
341
+ </button>
342
+ </div>
343
+
344
+ <div class="p-6">
345
+ <form id="appointment-form">
346
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
347
+ <div>
348
+ <label class="block text-gray-700 mb-2" for="patient">Patient</label>
349
+ <select id="patient" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-medical-blue">
350
+ <option value="">Sélectionner un patient</option>
351
+ <option value="1">Jean Martin</option>
352
+ <option value="2">Marie Dubois</option>
353
+ <option value="3">Pierre Lambert</option>
354
+ <option value="4">Sophie Moreau</option>
355
+ </select>
356
+ </div>
357
+
358
+ <div>
359
+ <label class="block text-gray-700 mb-2" for="examen-type">Type d'examen</label>
360
+ <select id="examen-type" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-medical-blue">
361
+ <option value="">Sélectionner un type</option>
362
+ <option value="radiographie">Radiographie</option>
363
+ <option value="irm">IRM</option>
364
+ <option value="scanner">Scanner</option>
365
+ <option value="echographie">Échographie</option>
366
+ <option value="mammographie">Mammographie</option>
367
+ </select>
368
+ </div>
369
+
370
+ <div>
371
+ <label class="block text-gray-700 mb-2" for="appointment-date">Date</label>
372
+ <input type="date" id="appointment-date" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-medical-blue">
373
+ </div>
374
+
375
+ <div>
376
+ <label class="block text-gray-700 mb-2" for="appointment-time">Heure</label>
377
+ <input type="time" id="appointment-time" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-medical-blue">
378
+ </div>
379
+
380
+ <div class="md:col-span-2">
381
+ <label class="block text-gray-700 mb-2" for="notes">Notes</label>
382
+ <textarea id="notes" rows="3" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-medical-blue"></textarea>
383
+ </div>
384
+ </div>
385
+
386
+ <div class="flex justify-end space-x-3">
387
+ <button type="button" id="cancel-add-appointment" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">
388
+ Annuler
389
+ </button>
390
+ <button type="submit" class="px-4 py-2 bg-medical-blue text-white rounded-lg hover:bg-medical-darkblue">
391
+ Enregistrer
392
+ </button>
393
+ </div>
394
+ </form>
395
+ </div>
396
+ </div>
397
+ </div>
398
+
399
+ <!-- Edit Appointment Modal -->
400
+ <div id="edit-appointment-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
401
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto">
402
+ <div class="p-4 border-b flex justify-between items-center">
403
+ <h3 class="text-xl font-semibold text-medical-blue">Modifier Rendez-vous</h3>
404
+ <button id="close-edit-modal" class="text-gray-500 hover:text-gray-700">
405
+ <i class="fas fa-times"></i>
406
+ </button>
407
+ </div>
408
+
409
+ <div class="p-6">
410
+ <form id="edit-appointment-form">
411
+ <input type="hidden" id="edit-appointment-id">
412
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
413
+ <div>
414
+ <label class="block text-gray-700 mb-2" for="edit-patient">Patient</label>
415
+ <select id="edit-patient" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-medical-blue">
416
+ <option value="">Sélectionner un patient</option>
417
+ <option value="1">Jean Martin</option>
418
+ <option value="2">Marie Dubois</option>
419
+ <option value="3">Pierre Lambert</option>
420
+ <option value="4">Sophie Moreau</option>
421
+ </select>
422
+ </div>
423
+
424
+ <div>
425
+ <label class="block text-gray-700 mb-2" for="edit-examen-type">Type d'examen</label>
426
+ <select id="edit-examen-type" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-medical-blue">
427
+ <option value="">Sélectionner un type</option>
428
+ <option value="radiographie">Radiographie</option>
429
+ <option value="irm">IRM</option>
430
+ <option value="scanner">Scanner</option>
431
+ <option value="echographie">Échographie</option>
432
+ <option value="mammographie">Mammographie</option>
433
+ </select>
434
+ </div>
435
+
436
+ <div>
437
+ <label class="block text-gray-700 mb-2" for="edit-appointment-date">Date</label>
438
+ <input type="date" id="edit-appointment-date" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-medical-blue">
439
+ </div>
440
+
441
+ <div>
442
+ <label class="block text-gray-700 mb-2" for="edit-appointment-time">Heure</label>
443
+ <input type="time" id="edit-appointment-time" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-medical-blue">
444
+ </div>
445
+
446
+ <div class="md:col-span-2">
447
+ <label class="block text-gray-700 mb-2" for="edit-status">Statut</label>
448
+ <select id="edit-status" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-medical-blue">
449
+ <option value="confirmed">Confirmé</option>
450
+ <option value="pending">En attente</option>
451
+ <option value="cancelled">Annulé</option>
452
+ <option value="completed">Terminé</option>
453
+ </select>
454
+ </div>
455
+
456
+ <div class="md:col-span-2">
457
+ <label class="block text-gray-700 mb-2" for="edit-notes">Notes</label>
458
+ <textarea id="edit-notes" rows="3" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-medical-blue"></textarea>
459
+ </div>
460
+ </div>
461
+
462
+ <div class="flex justify-end space-x-3">
463
+ <button type="button" id="cancel-edit-appointment" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">
464
+ Annuler
465
+ </button>
466
+ <button type="submit" class="px-4 py-2 bg-medical-blue text-white rounded-lg hover:bg-medical-darkblue">
467
+ Enregistrer
468
+ </button>
469
+ </div>
470
+ </form>
471
+ </div>
472
+ </div>
473
+ </div>
474
+
475
+ <!-- View Appointment Modal -->
476
+ <div id="view-appointment-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
477
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto">
478
+ <div class="p-4 border-b flex justify-between items-center">
479
+ <h3 class="text-xl font-semibold text-medical-blue">Détails du Rendez-vous</h3>
480
+ <button id="close-view-modal" class="text-gray-500 hover:text-gray-700">
481
+ <i class="fas fa-times"></i>
482
+ </button>
483
+ </div>
484
+
485
+ <div class="p-6">
486
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
487
+ <div>
488
+ <h4 class="text-lg font-semibold text-medical-blue mb-4">Informations patient</h4>
489
+ <div class="space-y-4">
490
+ <div>
491
+ <p class="text-gray-500">Nom complet</p>
492
+ <p id="view-patient-name" class="font-medium">Jean Martin</p>
493
+ </div>
494
+ <div>
495
+ <p class="text-gray-500">Date de naissance</p>
496
+ <p id="view-patient-dob" class="font-medium">15/03/1975</p>
497
+ </div>
498
+ <div>
499
+ <p class="text-gray-500">Numéro de sécurité sociale</p>
500
+ <p id="view-patient-ssn" class="font-medium">1 85 03 75 123 456 78</p>
501
+ </div>
502
+ <div>
503
+ <p class="text-gray-500">Téléphone</p>
504
+ <p id="view-patient-phone" class="font-medium">06 12 34 56 78</p>
505
+ </div>
506
+ </div>
507
+ </div>
508
+
509
+ <div>
510
+ <h4 class="text-lg font-semibold text-medical-blue mb-4">Détails du rendez-vous</h4>
511
+ <div class="space-y-4">
512
+ <div>
513
+ <p class="text-gray-500">Date et heure</p>
514
+ <p id="view-appointment-datetime" class="font-medium">15 mai 2023 à 14:30</p>
515
+ </div>
516
+ <div>
517
+ <p class="text-gray-500">Type d'examen</p>
518
+ <p id="view-examen-type" class="font-medium">IRM cérébrale</p>
519
+ </div>
520
+ <div>
521
+ <p class="text-gray-500">Statut</p>
522
+ <p id="view-status" class="font-medium">
523
+ <span class="px-2 py-1 rounded-full bg-green-100 text-green-800">Confirmé</span>
524
+ </p>
525
+ </div>
526
+ <div>
527
+ <p class="text-gray-500">Médecin assigné</p>
528
+ <p id="view-doctor" class="font-medium">Dr. Dupont</p>
529
+ </div>
530
+ </div>
531
+ </div>
532
+
533
+ <div class="md:col-span-2">
534
+ <h4 class="text-lg font-semibold text-medical-blue mb-4">Notes</h4>
535
+ <div class="bg-gray-50 p-4 rounded-lg">
536
+ <p id="view-notes">Le patient présente des maux de tête persistants. Une IRM cérébrale a été prescrite pour évaluer d'éventuelles anomalies.</p>
537
+ </div>
538
+ </div>
539
+
540
+ <div class="md:col-span-2">
541
+ <h4 class="text-lg font-semibold text-medical-blue mb-4">Historique des modifications</h4>
542
+ <div class="space-y-3">
543
+ <div class="flex items-start space-x-3">
544
+ <div class="mt-1">
545
+ <div class="w-2 h-2 rounded-full bg-medical-blue"></div>
546
+ </div>
547
+ <div>
548
+ <p class="text-sm font-medium">Modifié par Dr. Dupont</p>
549
+ <p class="text-sm text-gray-500">15/05/2023 à 09:15 - Changement d'horaire</p>
550
+ </div>
551
+ </div>
552
+ <div class="flex items-start space-x-3">
553
+ <div class="mt-1">
554
+ <div class="w-2 h-2 rounded-full bg-medical-blue"></div>
555
+ </div>
556
+ <div>
557
+ <p class="text-sm font-medium">Créé par Sec. Martin</p>
558
+ <p class="text-sm text-gray-500">10/05/2023 à 14:30 - Rendez-vous créé</p>
559
+ </div>
560
+ </div>
561
+ </div>
562
+ </div>
563
+ </div>
564
+
565
+ <div class="flex justify-end space-x-3">
566
+ <button id="print-appointment" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 flex items-center space-x-2">
567
+ <i class="fas fa-print"></i>
568
+ <span>Imprimer</span>
569
+ </button>
570
+ <button id="edit-from-view" class="px-4 py-2 bg-medical-blue text-white rounded-lg hover:bg-medical-darkblue flex items-center space-x-2">
571
+ <i class="fas fa-edit"></i>
572
+ <span>Modifier</span>
573
+ </button>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ </div>
578
+
579
+ <!-- Notification Panel -->
580
+ <div id="notification-panel" class="fixed right-0 top-0 h-full w-80 bg-white shadow-lg transform translate-x-full transition-transform duration-300 z-50">
581
+ <div class="p-4 border-b flex justify-between items-center">
582
+ <h3 class="text-lg font-semibold">Notifications</h3>
583
+ <button id="close-notifications" class="text-gray-500 hover:text-gray-700">
584
+ <i class="fas fa-times"></i>
585
+ </button>
586
+ </div>
587
+
588
+ <div class="overflow-y-auto h-full">
589
+ <div class="p-4 border-b hover:bg-gray-50 cursor-pointer">
590
+ <div class="flex items-start space-x-3">
591
+ <div class="mt-1">
592
+ <div class="w-2 h-2 rounded-full bg-red-500"></div>
593
+ </div>
594
+ <div>
595
+ <p class="font-medium">Nouveau rendez-vous</p>
596
+ <p class="text-sm text-gray-500">Sophie Moreau a pris rendez-vous pour une échographie</p>
597
+ <p class="text-xs text-gray-400">Il y a 10 minutes</p>
598
+ </div>
599
+ </div>
600
+ </div>
601
+
602
+ <div class="p-4 border-b hover:bg-gray-50 cursor-pointer">
603
+ <div class="flex items-start space-x-3">
604
+ <div class="mt-1">
605
+ <div class="w-2 h-2 rounded-full bg-blue-500"></div>
606
+ </div>
607
+ <div>
608
+ <p class="font-medium">Rappel de rendez-vous</p>
609
+ <p class="text-sm text-gray-500">Jean Martin a un rendez-vous demain à 14h30</p>
610
+ <p class="text-xs text-gray-400">Il y a 1 heure</p>
611
+ </div>
612
+ </div>
613
+ </div>
614
+
615
+ <div class="p-4 border-b hover:bg-gray-50 cursor-pointer">
616
+ <div class="flex items-start space-x-3">
617
+ <div class="mt-1">
618
+ <div class="w-2 h-2 rounded-full bg-yellow-500"></div>
619
+ </div>
620
+ <div>
621
+ <p class="font-medium">Rendez-vous annulé</p>
622
+ <p class="text-sm text-gray-500">Pierre Lambert a annulé son scanner</p>
623
+ <p class="text-xs text-gray-400">Il y a 3 heures</p>
624
+ </div>
625
+ </div>
626
+ </div>
627
+
628
+ <div class="p-4 hover:bg-gray-50 cursor-pointer">
629
+ <div class="flex items-start space-x-3">
630
+ <div class="mt-1">
631
+ <div class="w-2 h-2 rounded-full bg-green-500"></div>
632
+ </div>
633
+ <div>
634
+ <p class="font-medium">Nouveau message</p>
635
+ <p class="text-sm text-gray-500">Vous avez reçu un message du Dr. Lefèvre</p>
636
+ <p class="text-xs text-gray-400">Hier à 16:45</p>
637
+ </div>
638
+ </div>
639
+ </div>
640
+ </div>
641
+ </div>
642
+
643
+ <script>
644
+ // Sample data for appointments
645
+ const appointments = [
646
+ {
647
+ id: 1,
648
+ patient: "Jean Martin",
649
+ date: "2023-05-15",
650
+ time: "14:30",
651
+ type: "IRM cérébrale",
652
+ status: "confirmed",
653
+ doctor: "Dr. Yassine",
654
+ notes: "Le patient présente des maux de tête persistants."
655
+ },
656
+ {
657
+ id: 2,
658
+ patient: "Marie Dubois",
659
+ date: "2023-05-16",
660
+ time: "09:15",
661
+ type: "Mammographie",
662
+ status: "pending",
663
+ doctor: "Dr. Lefèvre",
664
+ notes: "Contrôle annuel."
665
+ },
666
+ {
667
+ id: 3,
668
+ patient: "Pierre Lambert",
669
+ date: "2023-05-16",
670
+ time: "11:00",
671
+ type: "Radiographie thoracique",
672
+ status: "confirmed",
673
+ doctor: "Dr. Yassine",
674
+ notes: "Douleurs thoraciques persistantes."
675
+ },
676
+ {
677
+ id: 4,
678
+ patient: "Sophie Moreau",
679
+ date: "2023-05-17",
680
+ time: "15:45",
681
+ type: "Échographie abdominale",
682
+ status: "confirmed",
683
+ doctor: "Dr. Lefèvre",
684
+ notes: "Douleurs abdominales inexpliquées."
685
+ },
686
+ {
687
+ id: 5,
688
+ patient: "Lucie Bernard",
689
+ date: "2023-05-17",
690
+ time: "16:30",
691
+ type: "Scanner",
692
+ status: "cancelled",
693
+ doctor: "Dr. Yassine",
694
+ notes: "Annulé par le patient."
695
+ },
696
+ {
697
+ id: 6,
698
+ patient: "Thomas Petit",
699
+ date: "2023-05-18",
700
+ time: "10:00",
701
+ type: "IRM lombaire",
702
+ status: "in-progress",
703
+ doctor: "Dr. Yassine",
704
+ notes: "Lombalgie chronique."
705
+ },
706
+ {
707
+ id: 7,
708
+ patient: "Emma Laurent",
709
+ date: "2023-05-18",
710
+ time: "13:15",
711
+ type: "Échographie thyroïdienne",
712
+ status: "pending",
713
+ doctor: "Dr. Lefèvre",
714
+ notes: "Nodule détecté lors de la consultation."
715
+ },
716
+ {
717
+ id: 8,
718
+ patient: "Nicolas Roux",
719
+ date: "2023-05-19",
720
+ time: "08:30",
721
+ type: "Radiographie du genou",
722
+ status: "confirmed",
723
+ doctor: "Dr. Yassine",
724
+ notes: "Douleur au genou suite à une chute."
725
+ },
726
+ {
727
+ id: 9,
728
+ patient: "Camille Leroy",
729
+ date: "2023-05-19",
730
+ time: "14:00",
731
+ type: "Mammographie",
732
+ status: "confirmed",
733
+ doctor: "Dr. Lefèvre",
734
+ notes: "Dépistage annuel."
735
+ },
736
+ {
737
+ id: 10,
738
+ patient: "Antoine Michel",
739
+ date: "2023-05-20",
740
+ time: "11:45",
741
+ type: "Scanner abdominal",
742
+ status: "confirmed",
743
+ doctor: "Dr. Dupont",
744
+ notes: "Suspicion d'appendicite."
745
+ }
746
+ ];
747
+
748
+ // DOM Elements
749
+ const sidebar = document.getElementById('sidebar');
750
+ const toggleSidebarBtn = document.getElementById('toggle-sidebar');
751
+ const mainContent = document.getElementById('main-content');
752
+ const appointmentsTableBody = document.getElementById('appointments-table-body');
753
+ const addAppointmentBtn = document.getElementById('add-appointment');
754
+ const addAppointmentModal = document.getElementById('add-appointment-modal');
755
+ const closeAddModalBtn = document.getElementById('close-add-modal');
756
+ const cancelAddAppointmentBtn = document.getElementById('cancel-add-appointment');
757
+ const appointmentForm = document.getElementById('appointment-form');
758
+ const editAppointmentModal = document.getElementById('edit-appointment-modal');
759
+ const closeEditModalBtn = document.getElementById('close-edit-modal');
760
+ const cancelEditAppointmentBtn = document.getElementById('cancel-edit-appointment');
761
+ const editAppointmentForm = document.getElementById('edit-appointment-form');
762
+ const viewAppointmentModal = document.getElementById('view-appointment-modal');
763
+ const closeViewModalBtn = document.getElementById('close-view-modal');
764
+ const editFromViewBtn = document.getElementById('edit-from-view');
765
+ const printAppointmentBtn = document.getElementById('print-appointment');
766
+ const exportPdfBtn = document.getElementById('export-pdf');
767
+ const exportExcelBtn = document.getElementById('export-excel');
768
+ const notificationsBtn = document.getElementById('notifications-btn');
769
+ const notificationPanel = document.getElementById('notification-panel');
770
+ const closeNotificationsBtn = document.getElementById('close-notifications');
771
+
772
+ // Initialize the app
773
+ document.addEventListener('DOMContentLoaded', function() {
774
+ renderAppointments();
775
+ renderCalendar();
776
+ renderAppointmentsPreview();
777
+
778
+ // Set today's date as default in the add appointment form
779
+ const today = new Date().toISOString().split('T')[0];
780
+ document.getElementById('appointment-date').value = today;
781
+ document.getElementById('appointment-date').min = today;
782
+ });
783
+
784
+ // Toggle sidebar
785
+ toggleSidebarBtn.addEventListener('click', function() {
786
+ sidebar.classList.toggle('sidebar-collapsed');
787
+ sidebar.classList.toggle('sidebar-expanded');
788
+
789
+ // Toggle text elements in sidebar
790
+ const textElements = ['logo-text', 'user-info', 'dashboard-text', 'appointments-text',
791
+ 'patients-text', 'reports-text', 'logs-text', 'settings-text', 'logout-text'];
792
+
793
+ textElements.forEach(id => {
794
+ const element = document.getElementById(id);
795
+ if (element) {
796
+ element.classList.toggle('hidden');
797
+ }
798
+ });
799
+
800
+ // Adjust main content margin
801
+ if (sidebar.classList.contains('sidebar-collapsed')) {
802
+ mainContent.classList.add('ml-16');
803
+ } else {
804
+ mainContent.classList.remove('ml-16');
805
+ }
806
+ });
807
+
808
+ // Render appointments table
809
+ function renderAppointments() {
810
+ appointmentsTableBody.innerHTML = '';
811
+
812
+ appointments.forEach(appointment => {
813
+ const row = document.createElement('tr');
814
+ row.className = 'hover:bg-gray-50';
815
+ row.innerHTML = `
816
+ <td class="px-6 py-4 whitespace-nowrap">
817
+ <div class="flex items-center">
818
+ <div class="flex-shrink-0 h-10 w-10 bg-medical-lightblue rounded-full flex items-center justify-center">
819
+ <i class="fas fa-user text-medical-blue"></i>
820
+ </div>
821
+ <div class="ml-4">
822
+ <div class="text-sm font-medium text-gray-900">${appointment.patient}</div>
823
+ <div class="text-sm text-gray-500">${appointment.doctor}</div>
824
+ </div>
825
+ </div>
826
+ </td>
827
+ <td class="px-6 py-4 whitespace-nowrap">
828
+ <div class="text-sm text-gray-900">${formatDate(appointment.date)}</div>
829
+ <div class="text-sm text-gray-500">${appointment.time}</div>
830
+ </td>
831
+ <td class="px-6 py-4 whitespace-nowrap">
832
+ <div class="text-sm text-gray-900">${appointment.type}</div>
833
+ </td>
834
+ <td class="px-6 py-4 whitespace-nowrap">
835
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusClass(appointment.status)}">
836
+ ${getStatusText(appointment.status)}
837
+ </span>
838
+ </td>
839
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
840
+ <button class="text-medical-blue hover:text-medical-darkblue mr-3 view-btn" data-id="${appointment.id}">
841
+ <i class="fas fa-eye"></i>
842
+ </button>
843
+ <button class="text-yellow-600 hover:text-yellow-900 mr-3 edit-btn" data-id="${appointment.id}">
844
+ <i class="fas fa-edit"></i>
845
+ </button>
846
+ <button class="text-red-600 hover:text-red-900 delete-btn" data-id="${appointment.id}">
847
+ <i class="fas fa-trash"></i>
848
+ </button>
849
+ </td>
850
+ `;
851
+
852
+ appointmentsTableBody.appendChild(row);
853
+ });
854
+
855
+ // Add event listeners to buttons
856
+ document.querySelectorAll('.view-btn').forEach(btn => {
857
+ btn.addEventListener('click', function() {
858
+ const appointmentId = parseInt(this.getAttribute('data-id'));
859
+ viewAppointment(appointmentId);
860
+ });
861
+ });
862
+
863
+ document.querySelectorAll('.edit-btn').forEach(btn => {
864
+ btn.addEventListener('click', function() {
865
+ const appointmentId = parseInt(this.getAttribute('data-id'));
866
+ editAppointment(appointmentId);
867
+ });
868
+ });
869
+
870
+ document.querySelectorAll('.delete-btn').forEach(btn => {
871
+ btn.addEventListener('click', function() {
872
+ const appointmentId = parseInt(this.getAttribute('data-id'));
873
+ deleteAppointment(appointmentId);
874
+ });
875
+ });
876
+ }
877
+
878
+ // Format date
879
+ function formatDate(dateString) {
880
+ const options = { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' };
881
+ return new Date(dateString).toLocaleDateString('fr-FR', options);
882
+ }
883
+
884
+ // Get status class
885
+ function getStatusClass(status) {
886
+ switch(status) {
887
+ case 'confirmed':
888
+ return 'bg-green-100 text-green-800';
889
+ case 'pending':
890
+ return 'bg-yellow-100 text-yellow-800';
891
+ case 'cancelled':
892
+ return 'bg-red-100 text-red-800';
893
+ case 'completed':
894
+ return 'bg-blue-100 text-blue-800';
895
+ case 'in-progress':
896
+ return 'bg-purple-100 text-purple-800';
897
+ default:
898
+ return 'bg-gray-100 text-gray-800';
899
+ }
900
+ }
901
+
902
+ // Get status text
903
+ function getStatusText(status) {
904
+ switch(status) {
905
+ case 'confirmed':
906
+ return 'Confirmé';
907
+ case 'pending':
908
+ return 'En attente';
909
+ case 'cancelled':
910
+ return 'Annulé';
911
+ case 'completed':
912
+ return 'Terminé';
913
+ case 'in-progress':
914
+ return 'En cours';
915
+ default:
916
+ return 'Inconnu';
917
+ }
918
+ }
919
+
920
+ // Render calendar
921
+ function renderCalendar() {
922
+ const calendarGrid = document.getElementById('calendar-grid');
923
+ calendarGrid.innerHTML = '';
924
+
925
+ // Get current date
926
+ const currentDate = new Date();
927
+ const currentMonth = currentDate.getMonth();
928
+ const currentYear = currentDate.getFullYear();
929
+
930
+ // Get first day of month
931
+ const firstDay = new Date(currentYear, currentMonth, 1).getDay();
932
+ // Adjust for Monday as first day (French calendar)
933
+ const firstDayAdjusted = firstDay === 0 ? 6 : firstDay - 1;
934
+
935
+ // Get days in month
936
+ const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
937
+
938
+ // Get days from previous month to show
939
+ const prevMonthDays = new Date(currentYear, currentMonth, 0).getDate();
940
+
941
+ // Create calendar cells
942
+ let dayCount = 0;
943
+ let nextMonthDay = 1;
944
+
945
+ // 6 rows x 7 columns = 42 cells
946
+ for (let i = 0; i < 42; i++) {
947
+ const cell = document.createElement('div');
948
+ cell.className = 'min-h-24 p-1 border border-gray-100';
949
+
950
+ // Days from previous month
951
+ if (i < firstDayAdjusted) {
952
+ const prevDay = prevMonthDays - (firstDayAdjusted - i - 1);
953
+ cell.innerHTML = `<div class="text-right text-gray-400">${prevDay}</div>`;
954
+ cell.classList.add('bg-gray-50');
955
+ }
956
+ // Days in current month
957
+ else if (dayCount < daysInMonth) {
958
+ dayCount++;
959
+ const dateStr = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(dayCount).padStart(2, '0')}`;
960
+
961
+ cell.innerHTML = `
962
+ <div class="text-right font-medium">${dayCount}</div>
963
+ <div class="mt-1 space-y-1" id="events-${dateStr}"></div>
964
+ `;
965
+
966
+ // Highlight today
967
+ if (dayCount === currentDate.getDate() && currentMonth === new Date().getMonth() && currentYear === new Date().getFullYear()) {
968
+ cell.querySelector('div:first-child').classList.add('bg-medical-blue', 'text-white', 'rounded-full', 'w-6', 'h-6', 'flex', 'items-center', 'justify-center', 'mx-auto');
969
+ }
970
+
971
+ // Add appointments to the cell
972
+ const eventsContainer = cell.querySelector(`#events-${dateStr}`);
973
+ const dayAppointments = appointments.filter(apt => apt.date === dateStr);
974
+
975
+ dayAppointments.forEach(apt => {
976
+ const event = document.createElement('div');
977
+ event.className = `text-xs p-1 rounded truncate ${getStatusClass(apt.status)}`;
978
+ event.textContent = `${apt.time} - ${apt.patient.split(' ')[0]}`;
979
+ eventsContainer.appendChild(event);
980
+ });
981
+ }
982
+ // Days from next month
983
+ else {
984
+ cell.innerHTML = `<div class="text-right text-gray-400">${nextMonthDay}</div>`;
985
+ cell.classList.add('bg-gray-50');
986
+ nextMonthDay++;
987
+ }
988
+
989
+ calendarGrid.appendChild(cell);
990
+ }
991
+ }
992
+
993
+ // Add new appointment
994
+ addAppointmentBtn.addEventListener('click', function() {
995
+ addAppointmentModal.classList.remove('hidden');
996
+ });
997
+
998
+ closeAddModalBtn.addEventListener('click', function() {
999
+ addAppointmentModal.classList.add('hidden');
1000
+ });
1001
+
1002
+ cancelAddAppointmentBtn.addEventListener('click', function() {
1003
+ addAppointmentModal.classList.add('hidden');
1004
+ });
1005
+
1006
+ appointmentForm.addEventListener('submit', function(e) {
1007
+ e.preventDefault();
1008
+
1009
+ // Get form values
1010
+ const patientSelect = document.getElementById('patient');
1011
+ const patientText = patientSelect.options[patientSelect.selectedIndex].text;
1012
+ const examenType = document.getElementById('examen-type').value;
1013
+ const date = document.getElementById('appointment-date').value;
1014
+ const time = document.getElementById('appointment-time').value;
1015
+ const notes = document.getElementById('notes').value;
1016
+
1017
+ // Create new appointment
1018
+ const newAppointment = {
1019
+ id: appointments.length > 0 ? Math.max(...appointments.map(a => a.id)) + 1 : 1,
1020
+ patient: patientText,
1021
+ date: date,
1022
+ time: time,
1023
+ type: examenType.charAt(0).toUpperCase() + examenType.slice(1),
1024
+ status: 'pending',
1025
+ doctor: 'Dr. Dupont',
1026
+ notes: notes
1027
+ };
1028
+
1029
+ // Add to appointments array
1030
+ appointments.push(newAppointment);
1031
+
1032
+ // Show success message
1033
+ alert('Rendez-vous créé avec succès!');
1034
+
1035
+ // Close modal and reset form
1036
+ addAppointmentModal.classList.add('hidden');
1037
+ appointmentForm.reset();
1038
+
1039
+ // Refresh appointments list and calendar
1040
+ renderAppointments();
1041
+ renderCalendar();
1042
+ });
1043
+
1044
+ // View appointment
1045
+ function viewAppointment(id) {
1046
+ const appointment = appointments.find(apt => apt.id === id);
1047
+ if (!appointment) return;
1048
+
1049
+ // Populate view modal
1050
+ document.getElementById('view-patient-name').textContent = appointment.patient;
1051
+ document.getElementById('view-patient-dob').textContent = '15/03/1975'; // Sample data
1052
+ document.getElementById('view-patient-ssn').textContent = '1 85 03 75 123 456 78'; // Sample data
1053
+ document.getElementById('view-patient-phone').textContent = '06 12 34 56 78'; // Sample data
1054
+
1055
+ const formattedDate = new Date(appointment.date).toLocaleDateString('fr-FR', {
1056
+ weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
1057
+ });
1058
+ document.getElementById('view-appointment-datetime').textContent =
1059
+ `${formattedDate} à ${appointment.time}`;
1060
+
1061
+ document.getElementById('view-examen-type').textContent = appointment.type;
1062
+ document.getElementById('view-status').innerHTML =
1063
+ `<span class="px-2 py-1 rounded-full ${getStatusClass(appointment.status)}">${getStatusText(appointment.status)}</span>`;
1064
+ document.getElementById('view-doctor').textContent = appointment.doctor;
1065
+ document.getElementById('view-notes').textContent = appointment.notes;
1066
+
1067
+ // Store appointment ID in edit button
1068
+ editFromViewBtn.setAttribute('data-id', appointment.id);
1069
+
1070
+ // Show modal
1071
+ viewAppointmentModal.classList.remove('hidden');
1072
+ }
1073
+
1074
+ closeViewModalBtn.addEventListener('click', function() {
1075
+ viewAppointmentModal.classList.add('hidden');
1076
+ });
1077
+
1078
+ // Edit from view
1079
+ editFromViewBtn.addEventListener('click', function() {
1080
+ const appointmentId = parseInt(this.getAttribute('data-id'));
1081
+ viewAppointmentModal.classList.add('hidden');
1082
+ editAppointment(appointmentId);
1083
+ });
1084
+
1085
+ // Print appointment
1086
+ printAppointmentBtn.addEventListener('click', function() {
1087
+ window.print();
1088
+ });
1089
+
1090
+ // Edit appointment
1091
+ function editAppointment(id) {
1092
+ const appointment = appointments.find(apt => apt.id === id);
1093
+ if (!appointment) return;
1094
+
1095
+ // Populate edit form
1096
+ document.getElementById('edit-appointment-id').value = appointment.id;
1097
+ document.getElementById('edit-patient').value = '1'; // Sample data - would be appointment.patientId in real app
1098
+ document.getElementById('edit-examen-type').value = appointment.type.toLowerCase().split(' ')[0]; // Simplified for demo
1099
+ document.getElementById('edit-appointment-date').value = appointment.date;
1100
+ document.getElementById('edit-appointment-time').value = appointment.time;
1101
+ document.getElementById('edit-status').value = appointment.status;
1102
+ document.getElementById('edit-notes').value = appointment.notes;
1103
+
1104
+ // Show modal
1105
+ editAppointmentModal.classList.remove('hidden');
1106
+ }
1107
+
1108
+ closeEditModalBtn.addEventListener('click', function() {
1109
+ editAppointmentModal.classList.add('hidden');
1110
+ });
1111
+
1112
+ cancelEditAppointmentBtn.addEventListener('click', function() {
1113
+ editAppointmentModal.classList.add('hidden');
1114
+ });
1115
+
1116
+ editAppointmentForm.addEventListener('submit', function(e) {
1117
+ e.preventDefault();
1118
+
1119
+ // Get form values
1120
+ const id = parseInt(document.getElementById('edit-appointment-id').value);
1121
+ const patientSelect = document.getElementById('edit-patient');
1122
+ const patientText = patientSelect.options[patientSelect.selectedIndex].text;
1123
+ const examenType = document.getElementById('edit-examen-type').value;
1124
+ const date = document.getElementById('edit-appointment-date').value;
1125
+ const time = document.getElementById('edit-appointment-time').value;
1126
+ const status = document.getElementById('edit-status').value;
1127
+ const notes = document.getElementById('edit-notes').value;
1128
+
1129
+ // Find and update appointment
1130
+ const appointmentIndex = appointments.findIndex(apt => apt.id === id);
1131
+ if (appointmentIndex !== -1) {
1132
+ appointments[appointmentIndex] = {
1133
+ ...appointments[appointmentIndex],
1134
+ patient: patientText,
1135
+ date: date,
1136
+ time: time,
1137
+ type: examenType.charAt(0).toUpperCase() + examenType.slice(1),
1138
+ status: status,
1139
+ notes: notes
1140
+ };
1141
+ }
1142
+
1143
+ // Show success message
1144
+ alert('Rendez-vous modifié avec succès!');
1145
+
1146
+ // Close modal and reset form
1147
+ editAppointmentModal.classList.add('hidden');
1148
+ editAppointmentForm.reset();
1149
+
1150
+ // Refresh appointments list and calendar
1151
+ renderAppointments();
1152
+ renderCalendar();
1153
+ });
1154
+
1155
+ // Render appointments preview
1156
+ function renderAppointmentsPreview() {
1157
+ const today = new Date().toISOString().split('T')[0];
1158
+ const tomorrow = new Date();
1159
+ tomorrow.setDate(tomorrow.getDate() + 1);
1160
+ const tomorrowStr = tomorrow.toISOString().split('T')[0];
1161
+
1162
+ // Filter appointments
1163
+ const todayAppointments = appointments.filter(apt => apt.date === today);
1164
+ const tomorrowAppointments = appointments.filter(apt => apt.date === tomorrowStr);
1165
+ const upcomingAppointments = appointments.filter(apt => apt.date > today && apt.date !== tomorrowStr)
1166
+ .sort((a, b) => new Date(a.date) - new Date(b.date))
1167
+ .slice(0, 3); // Show only 3 upcoming
1168
+
1169
+ // Render today's appointments
1170
+ const todayContainer = document.getElementById('today-appointments');
1171
+ todayContainer.innerHTML = todayAppointments.length > 0 ?
1172
+ todayAppointments.map(apt => `
1173
+ <div class="text-sm p-2 rounded ${getStatusClass(apt.status)}">
1174
+ <div class="font-medium">${apt.patient}</div>
1175
+ <div>${apt.time} - ${apt.type}</div>
1176
+ </div>
1177
+ `).join('') : '<p class="text-gray-500 text-sm">Aucun rendez-vous aujourd\'hui</p>';
1178
+
1179
+ // Render tomorrow's appointments
1180
+ const tomorrowContainer = document.getElementById('tomorrow-appointments');
1181
+ tomorrowContainer.innerHTML = tomorrowAppointments.length > 0 ?
1182
+ tomorrowAppointments.map(apt => `
1183
+ <div class="text-sm p-2 rounded ${getStatusClass(apt.status)}">
1184
+ <div class="font-medium">${apt.patient}</div>
1185
+ <div>${apt.time} - ${apt.type}</div>
1186
+ </div>
1187
+ `).join('') : '<p class="text-gray-500 text-sm">Aucun rendez-vous demain</p>';
1188
+
1189
+ // Render upcoming appointments
1190
+ const upcomingContainer = document.getElementById('upcoming-appointments');
1191
+ upcomingContainer.innerHTML = upcomingAppointments.length > 0 ?
1192
+ upcomingAppointments.map(apt => `
1193
+ <div class="text-sm p-2 rounded ${getStatusClass(apt.status)}">
1194
+ <div class="font-medium">${apt.patient}</div>
1195
+ <div>${formatDate(apt.date)} - ${apt.time}</div>
1196
+ <div>${apt.type}</div>
1197
+ </div>
1198
+ `).join('') : '<p class="text-gray-500 text-sm">Aucun rendez-vous à venir</p>';
1199
+ }
1200
+
1201
+ // Delete appointment
1202
+ function deleteAppointment(id) {
1203
+ if (confirm('Êtes-vous sûr de vouloir supprimer ce rendez-vous?')) {
1204
+ // Find and remove appointment
1205
+ const appointmentIndex = appointments.findIndex(apt => apt.id === id);
1206
+ if (appointmentIndex !== -1) {
1207
+ appointments.splice(appointmentIndex, 1);
1208
+ }
1209
+
1210
+ // Show success message
1211
+ alert('Rendez-vous supprimé avec succès!');
1212
+
1213
+ // Refresh appointments list and calendar
1214
+ renderAppointments();
1215
+ renderCalendar();
1216
+ }
1217
+ }
1218
+
1219
+ // Export to PDF
1220
+ exportPdfBtn.addEventListener('click', function() {
1221
+ // In a real app, you would use jsPDF to generate a PDF
1222
+ alert('Export PDF en cours de développement');
1223
+ });
1224
+
1225
+ // Export to Excel
1226
+ exportExcelBtn.addEventListener('click', function() {
1227
+ // Create a worksheet
1228
+ const ws = XLSX.utils.json_to_sheet(appointments.map(apt => ({
1229
+ 'Patient': apt.patient,
1230
+ 'Date': apt.date,
1231
+ 'Heure': apt.time,
1232
+ 'Type d\'examen': apt.type,
1233
+ 'Statut': getStatusText(apt.status),
1234
+ 'Médecin': apt.doctor
1235
+ })));
1236
+
1237
+ // Create a workbook
1238
+ const wb = XLSX.utils.book_new();
1239
+ XLSX.utils.book_append_sheet(wb, ws, "Rendez-vous");
1240
+
1241
+ // Export the workbook
1242
+ XLSX.writeFile(wb, "rendez-vous_avicenne.xlsx");
1243
+ });
1244
+
1245
+ // Notifications panel
1246
+ notificationsBtn.addEventListener('click', function() {
1247
+ notificationPanel.classList.remove('translate-x-full');
1248
+ });
1249
+
1250
+ closeNotificationsBtn.addEventListener('click', function() {
1251
+ notificationPanel.classList.add('translate-x-full');
1252
+ });
1253
+ </script>
1254
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Dannylova31/helloappppppp-med" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1255
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ ACTIVE LE BOTTON Tableau de bord est dans le tablau il aura une posibilité de voir un apercu des rendez vous