Hugging Face's logo

Spaces:
SaidAmchghal
/
gestion-c2gp
Running

App Files Community
SaidAmchghal commited on
Commit
1440679
·
verified ·
1 Parent(s): 308283a

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +1288 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Gestion C2gp
3
- emoji: 🔥
4
- colorFrom: indigo
5
  colorTo: green
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: gestion-c2gp
3
+ emoji: 🐳
4
+ colorFrom: purple
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,1288 @@
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>C2GP - Gestion Interne</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
+ <style>
10
+ .sidebar {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .sidebar-collapsed {
14
+ width: 70px;
15
+ }
16
+ .sidebar-collapsed .sidebar-text {
17
+ display: none;
18
+ }
19
+ .sidebar-collapsed .logo-text {
20
+ display: none;
21
+ }
22
+ .sidebar-collapsed .nav-item {
23
+ justify-content: center;
24
+ }
25
+ .content {
26
+ transition: margin-left 0.3s ease;
27
+ }
28
+ .chart-container {
29
+ position: relative;
30
+ height: 300px;
31
+ }
32
+ .progress-bar {
33
+ height: 6px;
34
+ border-radius: 3px;
35
+ }
36
+ .notification-badge {
37
+ position: absolute;
38
+ top: -5px;
39
+ right: -5px;
40
+ }
41
+ .dropdown-menu {
42
+ display: none;
43
+ position: absolute;
44
+ right: 0;
45
+ min-width: 200px;
46
+ }
47
+ .dropdown:hover .dropdown-menu {
48
+ display: block;
49
+ }
50
+ .project-card:hover {
51
+ transform: translateY(-5px);
52
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
53
+ }
54
+ .tab-content {
55
+ display: none;
56
+ }
57
+ .tab-content.active {
58
+ display: block;
59
+ }
60
+ </style>
61
+ </head>
62
+ <body class="bg-gray-100 font-sans">
63
+ <div class="flex h-screen overflow-hidden">
64
+ <!-- Sidebar -->
65
+ <div class="sidebar bg-blue-900 text-white w-64 flex flex-col sidebar">
66
+ <div class="p-4 flex items-center space-x-2 border-b border-blue-800">
67
+ <div class="bg-white p-2 rounded-lg">
68
+ <i class="fas fa-shield-alt text-blue-900 text-xl"></i>
69
+ </div>
70
+ <span class="logo-text text-xl font-bold">C2GP</span>
71
+ </div>
72
+
73
+ <div class="p-4 border-b border-blue-800">
74
+ <div class="flex items-center space-x-3">
75
+ <img src="https://ui-avatars.com/api/?name=Admin+C2GP&background=random" class="w-10 h-10 rounded-full" alt="Profile">
76
+ <div class="sidebar-text">
77
+ <div class="font-medium">Admin C2GP</div>
78
+ <div class="text-xs text-blue-200">Administrateur</div>
79
+ </div>
80
+ </div>
81
+ </div>
82
+
83
+ <nav class="flex-1 overflow-y-auto p-4 space-y-2">
84
+ <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-blue-800 active" data-tab="dashboard">
85
+ <i class="fas fa-tachometer-alt w-6 text-center"></i>
86
+ <span class="sidebar-text">Tableau de bord</span>
87
+ </a>
88
+
89
+ <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-blue-800" data-tab="projects">
90
+ <i class="fas fa-project-diagram w-6 text-center"></i>
91
+ <span class="sidebar-text">Projets</span>
92
+ </a>
93
+
94
+ <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-blue-800" data-tab="clients">
95
+ <i class="fas fa-users w-6 text-center"></i>
96
+ <span class="sidebar-text">Clients</span>
97
+ </a>
98
+
99
+ <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-blue-800" data-tab="reports">
100
+ <i class="fas fa-file-alt w-6 text-center"></i>
101
+ <span class="sidebar-text">Rapports</span>
102
+ </a>
103
+
104
+ <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-blue-800" data-tab="employees">
105
+ <i class="fas fa-user-tie w-6 text-center"></i>
106
+ <span class="sidebar-text">Employés</span>
107
+ </a>
108
+
109
+ <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-blue-800" data-tab="calendar">
110
+ <i class="fas fa-calendar-alt w-6 text-center"></i>
111
+ <span class="sidebar-text">Calendrier</span>
112
+ </a>
113
+
114
+ <a href="#" class="nav-item flex items-center space-x-3 p-2 rounded hover:bg-blue-800" data-tab="settings">
115
+ <i class="fas fa-cog w-6 text-center"></i>
116
+ <span class="sidebar-text">Paramètres</span>
117
+ </a>
118
+ </nav>
119
+
120
+ <div class="p-4 border-t border-blue-800">
121
+ <button id="toggleSidebar" class="flex items-center space-x-3 text-blue-200 hover:text-white">
122
+ <i class="fas fa-chevron-left w-6 text-center"></i>
123
+ <span class="sidebar-text">Réduire</span>
124
+ </button>
125
+ </div>
126
+ </div>
127
+
128
+ <!-- Main Content -->
129
+ <div class="content flex-1 flex flex-col overflow-hidden">
130
+ <!-- Top Navigation -->
131
+ <header class="bg-white shadow-sm">
132
+ <div class="flex items-center justify-between px-6 py-3">
133
+ <div class="flex items-center space-x-4">
134
+ <h1 class="text-xl font-semibold text-gray-800">Tableau de bord</h1>
135
+ </div>
136
+
137
+ <div class="flex items-center space-x-4">
138
+ <div class="relative">
139
+ <button class="p-2 rounded-full hover:bg-gray-100">
140
+ <i class="fas fa-search text-gray-500"></i>
141
+ </button>
142
+ </div>
143
+
144
+ <div class="relative">
145
+ <button class="p-2 rounded-full hover:bg-gray-100 relative">
146
+ <i class="fas fa-bell text-gray-500"></i>
147
+ <span class="notification-badge bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
148
+ </button>
149
+ </div>
150
+
151
+ <div class="dropdown relative">
152
+ <button class="flex items-center space-x-2 focus:outline-none">
153
+ <img src="https://ui-avatars.com/api/?name=Admin+C2GP&background=random" class="w-8 h-8 rounded-full" alt="Profile">
154
+ <span class="hidden md:inline-block">Admin</span>
155
+ <i class="fas fa-chevron-down text-xs"></i>
156
+ </button>
157
+
158
+ <div class="dropdown-menu mt-2 bg-white rounded shadow-lg py-2 z-50">
159
+ <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">
160
+ <i class="fas fa-user mr-2"></i> Profil
161
+ </a>
162
+ <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">
163
+ <i class="fas fa-cog mr-2"></i> Paramètres
164
+ </a>
165
+ <div class="border-t border-gray-200"></div>
166
+ <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">
167
+ <i class="fas fa-sign-out-alt mr-2"></i> Déconnexion
168
+ </a>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </header>
174
+
175
+ <!-- Main Content Area -->
176
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
177
+ <!-- Dashboard Tab -->
178
+ <div id="dashboard" class="tab-content active">
179
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
180
+ <div class="bg-white rounded-lg shadow p-6">
181
+ <div class="flex items-center justify-between">
182
+ <div>
183
+ <p class="text-gray-500">Projets en cours</p>
184
+ <h3 class="text-2xl font-bold">24</h3>
185
+ </div>
186
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
187
+ <i class="fas fa-project-diagram text-xl"></i>
188
+ </div>
189
+ </div>
190
+ <div class="mt-4">
191
+ <div class="flex justify-between text-sm text-gray-500">
192
+ <span>+12% vs mois dernier</span>
193
+ <span>Voir tout</span>
194
+ </div>
195
+ </div>
196
+ </div>
197
+
198
+ <div class="bg-white rounded-lg shadow p-6">
199
+ <div class="flex items-center justify-between">
200
+ <div>
201
+ <p class="text-gray-500">Rapports validés</p>
202
+ <h3 class="text-2xl font-bold">48</h3>
203
+ </div>
204
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
205
+ <i class="fas fa-file-check text-xl"></i>
206
+ </div>
207
+ </div>
208
+ <div class="mt-4">
209
+ <div class="flex justify-between text-sm text-gray-500">
210
+ <span>+8% vs mois dernier</span>
211
+ <span>Voir tout</span>
212
+ </div>
213
+ </div>
214
+ </div>
215
+
216
+ <div class="bg-white rounded-lg shadow p-6">
217
+ <div class="flex items-center justify-between">
218
+ <div>
219
+ <p class="text-gray-500">Clients actifs</p>
220
+ <h3 class="text-2xl font-bold">36</h3>
221
+ </div>
222
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
223
+ <i class="fas fa-users text-xl"></i>
224
+ </div>
225
+ </div>
226
+ <div class="mt-4">
227
+ <div class="flex justify-between text-sm text-gray-500">
228
+ <span>+5% vs mois dernier</span>
229
+ <span>Voir tout</span>
230
+ </div>
231
+ </div>
232
+ </div>
233
+
234
+ <div class="bg-white rounded-lg shadow p-6">
235
+ <div class="flex items-center justify-between">
236
+ <div>
237
+ <p class="text-gray-500">Revenus (k€)</p>
238
+ <h3 class="text-2xl font-bold">125</h3>
239
+ </div>
240
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
241
+ <i class="fas fa-euro-sign text-xl"></i>
242
+ </div>
243
+ </div>
244
+ <div class="mt-4">
245
+ <div class="flex justify-between text-sm text-gray-500">
246
+ <span>+15% vs mois dernier</span>
247
+ <span>Voir tout</span>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
254
+ <div class="bg-white rounded-lg shadow p-6 lg:col-span-2">
255
+ <div class="flex justify-between items-center mb-4">
256
+ <h2 class="text-lg font-semibold">Activité récente</h2>
257
+ <select class="border rounded px-3 py-1 text-sm">
258
+ <option>Ce mois</option>
259
+ <option>Le mois dernier</option>
260
+ <option>Cette année</option>
261
+ </select>
262
+ </div>
263
+ <div class="chart-container">
264
+ <canvas id="activityChart"></canvas>
265
+ </div>
266
+ </div>
267
+
268
+ <div class="bg-white rounded-lg shadow p-6">
269
+ <div class="flex justify-between items-center mb-4">
270
+ <h2 class="text-lg font-semibold">Statut des projets</h2>
271
+ </div>
272
+ <div class="space-y-4">
273
+ <div>
274
+ <div class="flex justify-between mb-1">
275
+ <span class="text-sm font-medium">En attente</span>
276
+ <span class="text-sm">8</span>
277
+ </div>
278
+ <div class="w-full bg-gray-200 rounded-full h-2">
279
+ <div class="bg-yellow-500 progress-bar h-2 rounded-full" style="width: 25%"></div>
280
+ </div>
281
+ </div>
282
+
283
+ <div>
284
+ <div class="flex justify-between mb-1">
285
+ <span class="text-sm font-medium">En cours</span>
286
+ <span class="text-sm">12</span>
287
+ </div>
288
+ <div class="w-full bg-gray-200 rounded-full h-2">
289
+ <div class="bg-blue-500 progress-bar h-2 rounded-full" style="width: 50%"></div>
290
+ </div>
291
+ </div>
292
+
293
+ <div>
294
+ <div class="flex justify-between mb-1">
295
+ <span class="text-sm font-medium">Terminés</span>
296
+ <span class="text-sm">8</span>
297
+ </div>
298
+ <div class="w-full bg-gray-200 rounded-full h-2">
299
+ <div class="bg-green-500 progress-bar h-2 rounded-full" style="width: 25%"></div>
300
+ </div>
301
+ </div>
302
+
303
+ <div>
304
+ <div class="flex justify-between mb-1">
305
+ <span class="text-sm font-medium">En retard</span>
306
+ <span class="text-sm">4</span>
307
+ </div>
308
+ <div class="w-full bg-gray-200 rounded-full h-2">
309
+ <div class="bg-red-500 progress-bar h-2 rounded-full" style="width: 12.5%"></div>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <div class="bg-white rounded-lg shadow overflow-hidden">
317
+ <div class="p-6">
318
+ <div class="flex justify-between items-center mb-4">
319
+ <h2 class="text-lg font-semibold">Projets récents</h2>
320
+ <a href="#" class="text-blue-600 text-sm">Voir tout</a>
321
+ </div>
322
+
323
+ <div class="overflow-x-auto">
324
+ <table class="min-w-full divide-y divide-gray-200">
325
+ <thead class="bg-gray-50">
326
+ <tr>
327
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Référence</th>
328
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
329
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
330
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
331
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Échéance</th>
332
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
333
+ </tr>
334
+ </thead>
335
+ <tbody class="bg-white divide-y divide-gray-200">
336
+ <tr>
337
+ <td class="px-6 py-4 whitespace-nowrap">PRJ-2023-045</td>
338
+ <td class="px-6 py-4 whitespace-nowrap">Promotion ABC</td>
339
+ <td class="px-6 py-4 whitespace-nowrap">Bâtiment R+5</td>
340
+ <td class="px-6 py-4 whitespace-nowrap">
341
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">En cours</span>
342
+ </td>
343
+ <td class="px-6 py-4 whitespace-nowrap">15/10/2023</td>
344
+ <td class="px-6 py-4 whitespace-nowrap">
345
+ <button class="text-blue-600 hover:text-blue-900 mr-2">
346
+ <i class="fas fa-eye"></i>
347
+ </button>
348
+ <button class="text-green-600 hover:text-green-900">
349
+ <i class="fas fa-edit"></i>
350
+ </button>
351
+ </td>
352
+ </tr>
353
+ <tr>
354
+ <td class="px-6 py-4 whitespace-nowrap">PRJ-2023-044</td>
355
+ <td class="px-6 py-4 whitespace-nowrap">Groupe XYZ</td>
356
+ <td class="px-6 py-4 whitespace-nowrap">Pont</td>
357
+ <td class="px-6 py-4 whitespace-nowrap">
358
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">En attente</span>
359
+ </td>
360
+ <td class="px-6 py-4 whitespace-nowrap">25/09/2023</td>
361
+ <td class="px-6 py-4 whitespace-nowrap">
362
+ <button class="text-blue-600 hover:text-blue-900 mr-2">
363
+ <i class="fas fa-eye"></i>
364
+ </button>
365
+ <button class="text-green-600 hover:text-green-900">
366
+ <i class="fas fa-edit"></i>
367
+ </button>
368
+ </td>
369
+ </tr>
370
+ <tr>
371
+ <td class="px-6 py-4 whitespace-nowrap">PRJ-2023-043</td>
372
+ <td class="px-6 py-4 whitespace-nowrap">Construct DEF</td>
373
+ <td class="px-6 py-4 whitespace-nowrap">Bâtiment R+8</td>
374
+ <td class="px-6 py-4 whitespace-nowrap">
375
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Terminé</span>
376
+ </td>
377
+ <td class="px-6 py-4 whitespace-nowrap">10/09/2023</td>
378
+ <td class="px-6 py-4 whitespace-nowrap">
379
+ <button class="text-blue-600 hover:text-blue-900 mr-2">
380
+ <i class="fas fa-eye"></i>
381
+ </button>
382
+ <button class="text-green-600 hover:text-green-900">
383
+ <i class="fas fa-edit"></i>
384
+ </button>
385
+ </td>
386
+ </tr>
387
+ <tr>
388
+ <td class="px-6 py-4 whitespace-nowrap">PRJ-2023-042</td>
389
+ <td class="px-6 py-4 whitespace-nowrap">Société GHI</td>
390
+ <td class="px-6 py-4 whitespace-nowrap">Silo</td>
391
+ <td class="px-6 py-4 whitespace-nowrap">
392
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">En retard</span>
393
+ </td>
394
+ <td class="px-6 py-4 whitespace-nowrap">05/09/2023</td>
395
+ <td class="px-6 py-4 whitespace-nowrap">
396
+ <button class="text-blue-600 hover:text-blue-900 mr-2">
397
+ <i class="fas fa-eye"></i>
398
+ </button>
399
+ <button class="text-green-600 hover:text-green-900">
400
+ <i class="fas fa-edit"></i>
401
+ </button>
402
+ </td>
403
+ </tr>
404
+ </tbody>
405
+ </table>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </div>
410
+
411
+ <!-- Projects Tab -->
412
+ <div id="projects" class="tab-content">
413
+ <div class="flex justify-between items-center mb-6">
414
+ <h2 class="text-2xl font-bold text-gray-800">Gestion des Projets</h2>
415
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
416
+ <i class="fas fa-plus mr-2"></i> Nouveau Projet
417
+ </button>
418
+ </div>
419
+
420
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
421
+ <div class="p-4 border-b">
422
+ <div class="flex flex-wrap items-center justify-between">
423
+ <div class="flex items-center space-x-4">
424
+ <div class="relative">
425
+ <input type="text" placeholder="Rechercher..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
426
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
427
+ </div>
428
+ </div>
429
+ <div class="flex items-center space-x-4 mt-2 md:mt-0">
430
+ <select class="border rounded px-3 py-2 text-sm">
431
+ <option>Tous les statuts</option>
432
+ <option>En attente</option>
433
+ <option>En cours</option>
434
+ <option>Terminé</option>
435
+ <option>En retard</option>
436
+ </select>
437
+ <select class="border rounded px-3 py-2 text-sm">
438
+ <option>Trier par</option>
439
+ <option>Date d'échéance</option>
440
+ <option>Date de création</option>
441
+ <option>Nom du client</option>
442
+ </select>
443
+ </div>
444
+ </div>
445
+ </div>
446
+
447
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
448
+ <div class="project-card bg-white border rounded-lg overflow-hidden shadow transition duration-300">
449
+ <div class="p-4 border-b">
450
+ <div class="flex justify-between items-start">
451
+ <div>
452
+ <h3 class="font-bold text-lg">PRJ-2023-045</h3>
453
+ <p class="text-gray-600">Promotion ABC</p>
454
+ </div>
455
+ <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">En cours</span>
456
+ </div>
457
+ </div>
458
+ <div class="p-4">
459
+ <p class="text-gray-700 mb-2"><i class="fas fa-building mr-2 text-blue-500"></i> Bâtiment R+5</p>
460
+ <p class="text-gray-700 mb-2"><i class="fas fa-map-marker-alt mr-2 text-blue-500"></i> Paris 15e</p>
461
+ <p class="text-gray-700 mb-4"><i class="fas fa-calendar-alt mr-2 text-blue-500"></i> Échéance: 15/10/2023</p>
462
+
463
+ <div class="flex justify-between items-center">
464
+ <div class="flex -space-x-2">
465
+ <img src="https://ui-avatars.com/api/?name=Jean+Dupont&background=random" class="w-8 h-8 rounded-full border-2 border-white" alt="Team member">
466
+ <img src="https://ui-avatars.com/api/?name=Marie+Martin&background=random" class="w-8 h-8 rounded-full border-2 border-white" alt="Team member">
467
+ </div>
468
+ <div class="flex space-x-2">
469
+ <button class="text-blue-600 hover:text-blue-900">
470
+ <i class="fas fa-eye"></i>
471
+ </button>
472
+ <button class="text-green-600 hover:text-green-900">
473
+ <i class="fas fa-edit"></i>
474
+ </button>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+
480
+ <div class="project-card bg-white border rounded-lg overflow-hidden shadow transition duration-300">
481
+ <div class="p-4 border-b">
482
+ <div class="flex justify-between items-start">
483
+ <div>
484
+ <h3 class="font-bold text-lg">PRJ-2023-044</h3>
485
+ <p class="text-gray-600">Groupe XYZ</p>
486
+ </div>
487
+ <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">En attente</span>
488
+ </div>
489
+ </div>
490
+ <div class="p-4">
491
+ <p class="text-gray-700 mb-2"><i class="fas fa-bridge mr-2 text-blue-500"></i> Pont</p>
492
+ <p class="text-gray-700 mb-2"><i class="fas fa-map-marker-alt mr-2 text-blue-500"></i> Lyon</p>
493
+ <p class="text-gray-700 mb-4"><i class="fas fa-calendar-alt mr-2 text-blue-500"></i> Échéance: 25/09/2023</p>
494
+
495
+ <div class="flex justify-between items-center">
496
+ <div class="flex -space-x-2">
497
+ <img src="https://ui-avatars.com/api/?name=Pierre+Durand&background=random" class="w-8 h-8 rounded-full border-2 border-white" alt="Team member">
498
+ </div>
499
+ <div class="flex space-x-2">
500
+ <button class="text-blue-600 hover:text-blue-900">
501
+ <i class="fas fa-eye"></i>
502
+ </button>
503
+ <button class="text-green-600 hover:text-green-900">
504
+ <i class="fas fa-edit"></i>
505
+ </button>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+
511
+ <div class="project-card bg-white border rounded-lg overflow-hidden shadow transition duration-300">
512
+ <div class="p-4 border-b">
513
+ <div class="flex justify-between items-start">
514
+ <div>
515
+ <h3 class="font-bold text-lg">PRJ-2023-043</h3>
516
+ <p class="text-gray-600">Construct DEF</p>
517
+ </div>
518
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Terminé</span>
519
+ </div>
520
+ </div>
521
+ <div class="p-4">
522
+ <p class="text-gray-700 mb-2"><i class="fas fa-building mr-2 text-blue-500"></i> Bâtiment R+8</p>
523
+ <p class="text-gray-700 mb-2"><i class="fas fa-map-marker-alt mr-2 text-blue-500"></i> Marseille</p>
524
+ <p class="text-gray-700 mb-4"><i class="fas fa-calendar-alt mr-2 text-blue-500"></i> Terminé: 10/09/2023</p>
525
+
526
+ <div class="flex justify-between items-center">
527
+ <div class="flex -space-x-2">
528
+ <img src="https://ui-avatars.com/api/?name=Sophie+Leroy&background=random" class="w-8 h-8 rounded-full border-2 border-white" alt="Team member">
529
+ <img src="https://ui-avatars.com/api/?name=Thomas+Petit&background=random" class="w-8 h-8 rounded-full border-2 border-white" alt="Team member">
530
+ </div>
531
+ <div class="flex space-x-2">
532
+ <button class="text-blue-600 hover:text-blue-900">
533
+ <i class="fas fa-eye"></i>
534
+ </button>
535
+ <button class="text-green-600 hover:text-green-900">
536
+ <i class="fas fa-edit"></i>
537
+ </button>
538
+ </div>
539
+ </div>
540
+ </div>
541
+ </div>
542
+ </div>
543
+
544
+ <div class="px-6 py-4 border-t flex items-center justify-between">
545
+ <div class="text-sm text-gray-600">
546
+ Affichage <span class="font-medium">1</span> à <span class="font-medium">3</span> sur <span class="font-medium">24</span> projets
547
+ </div>
548
+ <div class="flex space-x-2">
549
+ <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100">
550
+ <i class="fas fa-chevron-left"></i>
551
+ </button>
552
+ <button class="px-3 py-1 border rounded bg-blue-600 text-white">1</button>
553
+ <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100">2</button>
554
+ <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100">3</button>
555
+ <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100">
556
+ <i class="fas fa-chevron-right"></i>
557
+ </button>
558
+ </div>
559
+ </div>
560
+ </div>
561
+ </div>
562
+
563
+ <!-- Clients Tab -->
564
+ <div id="clients" class="tab-content">
565
+ <div class="flex justify-between items-center mb-6">
566
+ <h2 class="text-2xl font-bold text-gray-800">Gestion des Clients</h2>
567
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
568
+ <i class="fas fa-plus mr-2"></i> Nouveau Client
569
+ </button>
570
+ </div>
571
+
572
+ <div class="bg-white rounded-lg shadow overflow-hidden">
573
+ <div class="p-4 border-b">
574
+ <div class="flex flex-wrap items-center justify-between">
575
+ <div class="flex items-center space-x-4">
576
+ <div class="relative">
577
+ <input type="text" placeholder="Rechercher un client..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
578
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
579
+ </div>
580
+ </div>
581
+ <div class="flex items-center space-x-4 mt-2 md:mt-0">
582
+ <select class="border rounded px-3 py-2 text-sm">
583
+ <option>Tous les types</option>
584
+ <option>Promoteur</option>
585
+ <option>Constructeur</option>
586
+ <option>Architecte</option>
587
+ <option>Autre</option>
588
+ </select>
589
+ <select class="border rounded px-3 py-2 text-sm">
590
+ <option>Trier par</option>
591
+ <option>Nom</option>
592
+ <option>Date d'ajout</option>
593
+ <option>Nombre de projets</option>
594
+ </select>
595
+ </div>
596
+ </div>
597
+ </div>
598
+
599
+ <div class="overflow-x-auto">
600
+ <table class="min-w-full divide-y divide-gray-200">
601
+ <thead class="bg-gray-50">
602
+ <tr>
603
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
604
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
605
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contact</th>
606
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Projets</th>
607
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dernier projet</th>
608
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
609
+ </tr>
610
+ </thead>
611
+ <tbody class="bg-white divide-y divide-gray-200">
612
+ <tr>
613
+ <td class="px-6 py-4 whitespace-nowrap">
614
+ <div class="flex items-center">
615
+ <div class="flex-shrink-0 h-10 w-10">
616
+ <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=Promotion+ABC&background=random" alt="">
617
+ </div>
618
+ <div class="ml-4">
619
+ <div class="text-sm font-medium text-gray-900">Promotion ABC</div>
620
+ <div class="text-sm text-gray-500">Paris</div>
621
+ </div>
622
+ </div>
623
+ </td>
624
+ <td class="px-6 py-4 whitespace-nowrap">
625
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">Promoteur</span>
626
+ </td>
627
+ <td class="px-6 py-4 whitespace-nowrap">
628
+ <div class="text-sm text-gray-900">Jean Dupont</div>
629
+ <div class="text-sm text-gray-500">jean.dupont@abc.com</div>
630
+ </td>
631
+ <td class="px-6 py-4 whitespace-nowrap">
632
+ <div class="text-sm text-gray-900">5</div>
633
+ </td>
634
+ <td class="px-6 py-4 whitespace-nowrap">
635
+ <div class="text-sm text-gray-900">PRJ-2023-045</div>
636
+ <div class="text-sm text-gray-500">En cours</div>
637
+ </td>
638
+ <td class="px-6 py-4 whitespace-nowrap">
639
+ <button class="text-blue-600 hover:text-blue-900 mr-2">
640
+ <i class="fas fa-eye"></i>
641
+ </button>
642
+ <button class="text-green-600 hover:text-green-900">
643
+ <i class="fas fa-edit"></i>
644
+ </button>
645
+ </td>
646
+ </tr>
647
+ <tr>
648
+ <td class="px-6 py-4 whitespace-nowrap">
649
+ <div class="flex items-center">
650
+ <div class="flex-shrink-0 h-10 w-10">
651
+ <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=Groupe+XYZ&background=random" alt="">
652
+ </div>
653
+ <div class="ml-4">
654
+ <div class="text-sm font-medium text-gray-900">Groupe XYZ</div>
655
+ <div class="text-sm text-gray-500">Lyon</div>
656
+ </div>
657
+ </div>
658
+ </td>
659
+ <td class="px-6 py-4 whitespace-nowrap">
660
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Constructeur</span>
661
+ </td>
662
+ <td class="px-6 py-4 whitespace-nowrap">
663
+ <div class="text-sm text-gray-900">Marie Martin</div>
664
+ <div class="text-sm text-gray-500">marie.martin@xyz.com</div>
665
+ </td>
666
+ <td class="px-6 py-4 whitespace-nowrap">
667
+ <div class="text-sm text-gray-900">3</div>
668
+ </td>
669
+ <td class="px-6 py-4 whitespace-nowrap">
670
+ <div class="text-sm text-gray-900">PRJ-2023-044</div>
671
+ <div class="text-sm text-gray-500">En attente</div>
672
+ </td>
673
+ <td class="px-6 py-4 whitespace-nowrap">
674
+ <button class="text-blue-600 hover:text-blue-900 mr-2">
675
+ <i class="fas fa-eye"></i>
676
+ </button>
677
+ <button class="text-green-600 hover:text-green-900">
678
+ <i class="fas fa-edit"></i>
679
+ </button>
680
+ </td>
681
+ </tr>
682
+ <tr>
683
+ <td class="px-6 py-4 whitespace-nowrap">
684
+ <div class="flex items-center">
685
+ <div class="flex-shrink-0 h-10 w-10">
686
+ <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=Construct+DEF&background=random" alt="">
687
+ </div>
688
+ <div class="ml-4">
689
+ <div class="text-sm font-medium text-gray-900">Construct DEF</div>
690
+ <div class="text-sm text-gray-500">Marseille</div>
691
+ </div>
692
+ </div>
693
+ </td>
694
+ <td class="px-6 py-4 whitespace-nowrap">
695
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Constructeur</span>
696
+ </td>
697
+ <td class="px-6 py-4 whitespace-nowrap">
698
+ <div class="text-sm text-gray-900">Pierre Durand</div>
699
+ <div class="text-sm text-gray-500">pierre.durand@def.com</div>
700
+ </td>
701
+ <td class="px-6 py-4 whitespace-nowrap">
702
+ <div class="text-sm text-gray-900">7</div>
703
+ </td>
704
+ <td class="px-6 py-4 whitespace-nowrap">
705
+ <div class="text-sm text-gray-900">PRJ-2023-043</div>
706
+ <div class="text-sm text-gray-500">Terminé</div>
707
+ </td>
708
+ <td class="px-6 py-4 whitespace-nowrap">
709
+ <button class="text-blue-600 hover:text-blue-900 mr-2">
710
+ <i class="fas fa-eye"></i>
711
+ </button>
712
+ <button class="text-green-600 hover:text-green-900">
713
+ <i class="fas fa-edit"></i>
714
+ </button>
715
+ </td>
716
+ </tr>
717
+ </tbody>
718
+ </table>
719
+ </div>
720
+
721
+ <div class="px-6 py-4 border-t flex items-center justify-between">
722
+ <div class="text-sm text-gray-600">
723
+ Affichage <span class="font-medium">1</span> à <span class="font-medium">3</span> sur <span class="font-medium">36</span> clients
724
+ </div>
725
+ <div class="flex space-x-2">
726
+ <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100">
727
+ <i class="fas fa-chevron-left"></i>
728
+ </button>
729
+ <button class="px-3 py-1 border rounded bg-blue-600 text-white">1</button>
730
+ <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100">2</button>
731
+ <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100">3</button>
732
+ <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100">
733
+ <i class="fas fa-chevron-right"></i>
734
+ </button>
735
+ </div>
736
+ </div>
737
+ </div>
738
+ </div>
739
+
740
+ <!-- Reports Tab -->
741
+ <div id="reports" class="tab-content">
742
+ <div class="flex justify-between items-center mb-6">
743
+ <h2 class="text-2xl font-bold text-gray-800">Gestion des Rapports</h2>
744
+ <div class="flex space-x-3">
745
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center">
746
+ <i class="fas fa-filter mr-2"></i> Filtres
747
+ </button>
748
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
749
+ <i class="fas fa-plus mr-2"></i> Nouveau Rapport
750
+ </button>
751
+ </div>
752
+ </div>
753
+
754
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-6">
755
+ <div class="bg-white rounded-lg shadow p-6">
756
+ <div class="flex items-center justify-between">
757
+ <div>
758
+ <p class="text-gray-500">Rapports validés</p>
759
+ <h3 class="text-2xl font-bold">48</h3>
760
+ </div>
761
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
762
+ <i class="fas fa-check-circle text-xl"></i>
763
+ </div>
764
+ </div>
765
+ </div>
766
+
767
+ <div class="bg-white rounded-lg shadow p-6">
768
+ <div class="flex items-center justify-between">
769
+ <div>
770
+ <p class="text-gray-500">En attente validation</p>
771
+ <h3 class="text-2xl font-bold">12</h3>
772
+ </div>
773
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
774
+ <i class="fas fa-clock text-xl"></i>
775
+ </div>
776
+ </div>
777
+ </div>
778
+
779
+ <div class="bg-white rounded-lg shadow p-6">
780
+ <div class="flex items-center justify-between">
781
+ <div>
782
+ <p class="text-gray-500">À corriger</p>
783
+ <h3 class="text-2xl font-bold">5</h3>
784
+ </div>
785
+ <div class="p-3 rounded-full bg-red-100 text-red-600">
786
+ <i class="fas fa-exclamation-circle text-xl"></i>
787
+ </div>
788
+ </div>
789
+ </div>
790
+
791
+ <div class="bg-white rounded-lg shadow p-6">
792
+ <div class="flex items-center justify-between">
793
+ <div>
794
+ <p class="text-gray-500">En rédaction</p>
795
+ <h3 class="text-2xl font-bold">8</h3>
796
+ </div>
797
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
798
+ <i class="fas fa-pen text-xl"></i>
799
+ </div>
800
+ </div>
801
+ </div>
802
+ </div>
803
+
804
+ <div class="bg-white rounded-lg shadow overflow-hidden">
805
+ <div class="p-4 border-b">
806
+ <div class="flex flex-wrap items-center justify-between">
807
+ <div class="flex items-center space-x-4">
808
+ <div class="relative">
809
+ <input type="text" placeholder="Rechercher un rapport..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
810
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
811
+ </div>
812
+ </div>
813
+ <div class="flex items-center space-x-4 mt-2 md:mt-0">
814
+ <select class="border rounded px-3 py-2 text-sm">
815
+ <option>Tous les statuts</option>
816
+ <option>Validé</option>
817
+ <option>En attente</option>
818
+ <option>À corriger</option>
819
+ <option>En rédaction</option>
820
+ </select>
821
+ <select class="border rounded px-3 py-2 text-sm">
822
+ <option>Trier par</option>
823
+ <option>Date de création</option>
824
+ <option>Date de validation</option>
825
+ <option>Nom du projet</option>
826
+ </select>
827
+ </div>
828
+ </div>
829
+ </div>
830
+
831
+ <div class="overflow-x-auto">
832
+ <table class="min-w-full divide-y divide-gray-200">
833
+ <thead class="bg-gray-50">
834
+ <tr>
835
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Référence</th>
836
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Projet</th>
837
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
838
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
839
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
840
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
841
+ </tr>
842
+ </thead>
843
+ <tbody class="bg-white divide-y divide-gray-200">
844
+ <tr>
845
+ <td class="px-6 py-4 whitespace-nowrap">RPT-2023-128</td>
846
+ <td class="px-6 py-4 whitespace-nowrap">PRJ-2023-045</td>
847
+ <td class="px-6 py-4 whitespace-nowrap">Avant-projet</td>
848
+ <td class="px-6 py-4 whitespace-nowrap">
849
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Validé</span>
850
+ </td>
851
+ <td class="px-6 py-4 whitespace-nowrap">10/09/2023</td>
852
+ <td class="px-6 py-4 whitespace-nowrap">
853
+ <button class="text-blue-600 hover:text-blue-900 mr-2">
854
+ <i class="fas fa-eye"></i>
855
+ </button>
856
+ <button class="text-green-600 hover:text-green-900 mr-2">
857
+ <i class="fas fa-download"></i>
858
+ </button>
859
+ <button class="text-purple-600 hover:text-purple-900">
860
+ <i class="fas fa-print"></i>
861
+ </button>
862
+ </td>
863
+ </tr>
864
+ <tr>
865
+ <td class="px-6 py-4 whitespace-nowrap">RPT-2023-127</td>
866
+ <td class="px-6 py-4 whitespace-nowrap">PRJ-2023-044</td>
867
+ <td class="px-6 py-4 whitespace-nowrap">Définitif</td>
868
+ <td class="px-6 py-4 whitespace-nowrap">
869
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">En attente</span>
870
+ </td>
871
+ <td class="px-6 py-4 whitespace-nowrap">05/09/2023</td>
872
+ <td class="px-6 py-4 whitespace-nowrap">
873
+ <button class="text-blue-600 hover:text-blue-900 mr-2">
874
+ <i class="fas fa-eye"></i>
875
+ </button>
876
+ <button class="text-green-600 hover:text-green-900 mr-2">
877
+ <i class="fas fa-download"></i>
878
+ </button>
879
+ <button class="text-purple-600 hover:text-purple-900">
880
+ <i class="fas fa-print"></i>
881
+ </button>
882
+ </td>
883
+ </tr>
884
+ <tr>
885
+ <td class="px-6 py-4 whitespace-nowrap">RPT-2023-126</td>
886
+ <td class="px-6 py-4 whitespace-nowrap">PRJ-2023-043</td>
887
+ <td class="px-6 py-4 whitespace-nowrap">Définitif</td>
888
+ <td class="px-6 py-4 whitespace-nowrap">
889
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">À corriger</span>
890
+ </td>
891
+ <td class="px-6 py-4 whitespace-nowrap">01/09/2023</td>
892
+ <td class="px-6 py-4 whitespace-nowrap">
893
+ <button class="text-blue-600 hover:text-blue-900 mr-2">
894
+ <i class="fas fa-eye"></i>
895
+ </button>
896
+ <button class="text-green-600 hover:text-green-900 mr-2">
897
+ <i class="fas fa-download"></i>
898
+ </button>
899
+ <button class="text-purple-600 hover:text-purple-900">
900
+ <i class="fas fa-print"></i>
901
+ </button>
902
+ </td>
903
+ </tr>
904
+ <tr>
905
+ <td class="px-6 py-4 whitespace-nowrap">RPT-2023-125</td>
906
+ <td class="px-6 py-4 whitespace-nowrap">PRJ-2023-042</td>
907
+ <td class="px-6 py-4 whitespace-nowrap">Avant-projet</td>
908
+ <td class="px-6 py-4 whitespace-nowrap">
909
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">En rédaction</span>
910
+ </td>
911
+ <td class="px-6 py-4 whitespace-nowrap">28/08/2023</td>
912
+ <td class="px-6 py-4 whitespace-nowrap">
913
+ <button class="text-blue-600 hover:text-blue-900 mr-2">
914
+ <i class="fas fa-eye"></i>
915
+ </button>
916
+ <button class="text-green-600 hover:text-green-900 mr-2">
917
+ <i class="fas fa-download"></i>
918
+ </button>
919
+ <button class="text-purple-600 hover:text-purple-900">
920
+ <i class="fas fa-print"></i>
921
+ </button>
922
+ </td>
923
+ </tr>
924
+ </tbody>
925
+ </table>
926
+ </div>
927
+
928
+ <div class="px-6 py-4 border-t flex items-center justify-between">
929
+ <div class="text-sm text-gray-600">
930
+ Affichage <span class="font-medium">1</span> à <span class="font-medium">4</span> sur <span class="font-medium">48</span> rapports
931
+ </div>
932
+ <div class="flex space-x-2">
933
+ <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100">
934
+ <i class="fas fa-chevron-left"></i>
935
+ </button>
936
+ <button class="px-3 py-1 border rounded bg-blue-600 text-white">1</button>
937
+ <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100">2</button>
938
+ <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100">3</button>
939
+ <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100">
940
+ <i class="fas fa-chevron-right"></i>
941
+ </button>
942
+ </div>
943
+ </div>
944
+ </div>
945
+ </div>
946
+
947
+ <!-- Employees Tab -->
948
+ <div id="employees" class="tab-content">
949
+ <div class="flex justify-between items-center mb-6">
950
+ <h2 class="text-2xl font-bold text-gray-800">Gestion des Employés</h2>
951
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
952
+ <i class="fas fa-plus mr-2"></i> Nouvel Employé
953
+ </button>
954
+ </div>
955
+
956
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
957
+ <div class="bg-white rounded-lg shadow p-6">
958
+ <div class="flex items-center space-x-4">
959
+ <img src="https://ui-avatars.com/api/?name=Jean+Dupont&background=random" class="w-16 h-16 rounded-full" alt="Employee">
960
+ <div>
961
+ <h3 class="font-bold">Jean Dupont</h3>
962
+ <p class="text-gray-600 text-sm">Ingénieur parasismique</p>
963
+ <div class="flex space-x-1 mt-1">
964
+ <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">CDI</span>
965
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Actif</span>
966
+ </div>
967
+ </div>
968
+ </div>
969
+ <div class="mt-4 pt-4 border-t border-gray-200">
970
+ <div class="flex justify-between text-sm">
971
+ <span class="text-gray-500">Projets:</span>
972
+ <span class="font-medium">5</span>
973
+ </div>
974
+ <div class="flex justify-between text-sm mt-1">
975
+ <span class="text-gray-500">Depuis:</span>
976
+ <span class="font-medium">15/03/2020</span>
977
+ </div>
978
+ </div>
979
+ <div class="mt-4 flex space-x-2">
980
+ <button class="text-blue-600 hover:text-blue-900">
981
+ <i class="fas fa-eye"></i>
982
+ </button>
983
+ <button class="text-green-600 hover:text-green-900">
984
+ <i class="fas fa-edit"></i>
985
+ </button>
986
+ <button class="text-red-600 hover:text-red-900">
987
+ <i class="fas fa-trash"></i>
988
+ </button>
989
+ </div>
990
+ </div>
991
+
992
+ <div class="bg-white rounded-lg shadow p-6">
993
+ <div class="flex items-center space-x-4">
994
+ <img src="https://ui-avatars.com/api/?name=Marie+Martin&background=random" class="w-16 h-16 rounded-full" alt="Employee">
995
+ <div>
996
+ <h3 class="font-bold">Marie Martin</h3>
997
+ <p class="text-gray-600 text-sm">Technicienne contrôle</p>
998
+ <div class="flex space-x-1 mt-1">
999
+ <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">CDI</span>
1000
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Actif</span>
1001
+ </div>
1002
+ </div>
1003
+ </div>
1004
+ <div class="mt-4 pt-4 border-t border-gray-200">
1005
+ <div class="flex justify-between text-sm">
1006
+ <span class="text-gray-500">Projets:</span>
1007
+ <span class="font-medium">3</span>
1008
+ </div>
1009
+ <div class="flex justify-between text-sm mt-1">
1010
+ <span class="text-gray-500">Depuis:</span>
1011
+ <span class="font-medium">22/06/2021</span>
1012
+ </div>
1013
+ </div>
1014
+ <div class="mt-4 flex space-x-2">
1015
+ <button class="text-blue-600 hover:text-blue-900">
1016
+ <i class="fas fa-eye"></i>
1017
+ </button>
1018
+ <button class="text-green-600 hover:text-green-900">
1019
+ <i class="fas fa-edit"></i>
1020
+ </button>
1021
+ <button class="text-red-600 hover:text-red-900">
1022
+ <i class="fas fa-trash"></i>
1023
+ </button>
1024
+ </div>
1025
+ </div>
1026
+
1027
+ <div class="bg-white rounded-lg shadow p-6">
1028
+ <div class="flex items-center space-x-4">
1029
+ <img src="https://ui-avatars.com/api/?name=Pierre+Durand&background=random" class="w-16 h-16 rounded-full" alt="Employee">
1030
+ <div>
1031
+ <h3 class="font-bold">Pierre Durand</h3>
1032
+ <p class="text-gray-600 text-sm">Responsable qualité</p>
1033
+ <div class="flex space-x-1 mt-1">
1034
+ <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">CDI</span>
1035
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Actif</span>
1036
+ </div>
1037
+ </div>
1038
+ </div>
1039
+ <div class="mt-4 pt-4 border-t border-gray-200">
1040
+ <div class="flex justify-between text-sm">
1041
+ <span class="text-gray-500">Projets:</span>
1042
+ <span class="font-medium">7</span>
1043
+ </div>
1044
+ <div class="flex justify-between text-sm mt-1">
1045
+ <span class="text-gray-500">Depuis:</span>
1046
+ <span class="font-medium">10/01/2019</span>
1047
+ </div>
1048
+ </div>
1049
+ <div class="mt-4 flex space-x-2">
1050
+ <button class="text-blue-600 hover:text-blue-900">
1051
+ <i class="fas fa-eye"></i>
1052
+ </button>
1053
+ <button class="text-green-600 hover:text-green-900">
1054
+ <i class="fas fa-edit"></i>
1055
+ </button>
1056
+ <button class="text-red-600 hover:text-red-900">
1057
+ <i class="fas fa-trash"></i>
1058
+ </button>
1059
+ </div>
1060
+ </div>
1061
+
1062
+ <div class="bg-white rounded-lg shadow p-6">
1063
+ <div class="flex items-center space-x-4">
1064
+ <img src="https://ui-avatars.com/api/?name=Sophie+Leroy&background=random" class="w-16 h-16 rounded-full" alt="Employee">
1065
+ <div>
1066
+ <h3 class="font-bold">Sophie Leroy</h3>
1067
+ <p class="text-gray-600 text-sm">Ingénieure structure</p>
1068
+ <div class="flex space-x-1 mt-1">
1069
+ <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">CDI</span>
1070
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Actif</span>
1071
+ </div>
1072
+ </div>
1073
+ </div>
1074
+ <div class="mt-4 pt-4 border-t border-gray-200">
1075
+ <div class="flex justify-between text-sm">
1076
+ <span class="text-gray-500">Projets:</span>
1077
+ <span class="font-medium">4</span>
1078
+ </div>
1079
+ <div class="flex justify-between text-sm mt-1">
1080
+ <span class="text-gray-500">Depuis:</span>
1081
+ <span class="font-medium">05/05/2022</span>
1082
+ </div>
1083
+ </div>
1084
+ <div class="mt-4 flex space-x-2">
1085
+ <button class="text-blue-600 hover:text-blue-900">
1086
+ <i class="fas fa-eye"></i>
1087
+ </button>
1088
+ <button class="text-green-600 hover:text-green-900">
1089
+ <i class="fas fa-edit"></i>
1090
+ </button>
1091
+ <button class="text-red-600 hover:text-red-900">
1092
+ <i class="fas fa-trash"></i>
1093
+ </button>
1094
+ </div>
1095
+ </div>
1096
+ </div>
1097
+
1098
+ <div class="bg-white rounded-lg shadow overflow-hidden">
1099
+ <div class="p-4 border-b">
1100
+ <div class="flex flex-wrap items-center justify-between">
1101
+ <div class="flex items-center space-x-4">
1102
+ <div class="relative">
1103
+ <input type="text" placeholder="Rechercher un employé..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
1104
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
1105
+ </div>
1106
+ </div>
1107
+ <div class="flex items-center space-x-4 mt-2 md:mt-0">
1108
+ <select class="border rounded px-3 py-2 text-sm">
1109
+ <option>Tous les statuts</option>
1110
+ <option>Actif</option>
1111
+ <option>Inactif</option>
1112
+ <option>Congé</option>
1113
+ </select>
1114
+ <select class="border rounded px-3 py-2 text-sm">
1115
+ <option>Trier par</option>
1116
+ <option>Nom</option>
1117
+ <option>Date d'embauche</option>
1118
+ <option>Poste</option>
1119
+ </select>
1120
+ </div>
1121
+ </div>
1122
+ </div>
1123
+
1124
+ <div class="overflow-x-auto">
1125
+ <table class="min-w-full divide-y divide-gray-200">
1126
+ <thead class="bg-gray-50">
1127
+ <tr>
1128
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Employé</th>
1129
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Poste</th>
1130
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contrat</th>
1131
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date embauche</th>
1132
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Projets</th>
1133
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
1134
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
1135
+ </tr>
1136
+ </thead>
1137
+ <tbody class="bg-white divide-y divide-gray-200">
1138
+ <tr>
1139
+ <td class="px-6 py-4 whitespace-nowrap">
1140
+ <div class="flex items-center">
1141
+ <div class="flex-shrink-0 h-10 w-10">
1142
+ <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=Jean+Dupont&background=random" alt="">
1143
+ </div>
1144
+ <div class="ml-4">
1145
+ <div class="text-sm font-medium text-gray-900">Jean Dupont</div>
1146
+ <div class="text-sm text-gray-500">jean.dupont@c2gp.com</div>
1147
+ </div>
1148
+ </div>
1149
+ </td>
1150
+ <td class="px-6 py-4 whitespace-nowrap">
1151
+ <div class="text-sm text-gray-900">Ingénieur parasismique</div>
1152
+ </td>
1153
+ <td class="px-6 py-4 whitespace-nowrap">
1154
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">CDI</span>
1155
+ </td>
1156
+ <td class="px-6 py-4 whitespace-nowrap">
1157
+ <div class="text-sm text-gray-900">15/03/2020</div>
1158
+ </td>
1159
+ <td class="px-6 py-4 whitespace-nowrap">
1160
+ <div class="text-sm text-gray-900">5</div>
1161
+ </td>
1162
+ <td class="px-6 py-4 whitespace-nowrap">
1163
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Actif</span>
1164
+ </td>
1165
+ <td class="px-6 py-4 whitespace-nowrap">
1166
+ <button class="text-blue-600 hover:text-blue-900 mr-2">
1167
+ <i class="fas fa-eye"></i>
1168
+ </button>
1169
+ <button class="text-green-600 hover:text-green-900 mr-2">
1170
+ <i class="fas fa-edit"></i>
1171
+ </button>
1172
+ <button class="text-red-600 hover:text-red-900">
1173
+ <i class="fas fa-trash"></i>
1174
+ </button>
1175
+ </td>
1176
+ </tr>
1177
+ <tr>
1178
+ <td class="px-6 py-4 whitespace-nowrap">
1179
+ <div class="flex items-center">
1180
+ <div class="flex-shrink-0 h-10 w-10">
1181
+ <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=Marie+Martin&background=random" alt="">
1182
+ </div>
1183
+ <div class="ml-4">
1184
+ <div class="text-sm font-medium text-gray-900">Marie Martin</div>
1185
+ <div class="text-sm text-gray-500">marie.martin@c2gp.com</div>
1186
+ </div>
1187
+ </div>
1188
+ </td>
1189
+ <td class="px-6 py-4 whitespace-nowrap">
1190
+ <div class="text-sm text-gray-900">Technicienne contrôle</div>
1191
+ </td>
1192
+ <td class="px-6 py-4 whitespace-nowrap">
1193
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">CDI</span>
1194
+ </td>
1195
+ <td class="px-6 py-4 whitespace-nowrap">
1196
+ <div class="text-sm text-gray-900">22/06/2021</div>
1197
+ </td>
1198
+ <td class="px-6 py-4 whitespace-nowrap">
1199
+ <div class="text-sm text-gray-900">3</div>
1200
+ </td>
1201
+ <td class="px-6 py-4 whitespace-nowrap">
1202
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Actif</span>
1203
+ </td>
1204
+ <td class="px-6 py-4 whitespace-nowrap">
1205
+ <button class="text-blue-600 hover:text-blue-900 mr-2">
1206
+ <i class="fas fa-eye"></i>
1207
+ </button>
1208
+ <button class="text-green-600 hover:text-green-900 mr-2">
1209
+ <i class="fas fa-edit"></i>
1210
+ </button>
1211
+ <button class="text-red-600 hover:text-red-900">
1212
+ <i class="fas fa-trash"></i>
1213
+ </button>
1214
+ </td>
1215
+ </tr>
1216
+ <tr>
1217
+ <td class="px-6 py-4 whitespace-nowrap">
1218
+ <div class="flex items-center">
1219
+ <div class="flex-shrink-0 h-10 w-10">
1220
+ <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=Pierre+Durand&background=random" alt="">
1221
+ </div>
1222
+ <div class="ml-4">
1223
+ <div class="text-sm font-medium text-gray-900">Pierre Durand</div>
1224
+ <div class="text-sm text-gray-500">pierre.durand@c2gp.com</div>
1225
+ </div>
1226
+ </div>
1227
+ </td>
1228
+ <td class="px-6 py-4 whitespace-nowrap">
1229
+ <div class="text-sm text-gray-900">Responsable qualité</div>
1230
+ </td>
1231
+ <td class="px-6 py-4 whitespace-nowrap">
1232
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">CDI</span>
1233
+ </td>
1234
+ <td class="px-6 py-4 whitespace-nowrap">
1235
+ <div class="text-sm text-gray-900">10/01/2019</div>
1236
+ </td>
1237
+ <td class="px-6 py-4 whitespace-nowrap">
1238
+ <div class="text-sm text-gray-900">7</div>
1239
+ </td>
1240
+ <td class="px-6 py-4 whitespace-nowrap">
1241
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Actif</span>
1242
+ </td>
1243
+ <td class="px-6 py-4 whitespace-nowrap">
1244
+ <button class="text-blue-600 hover:text-blue-900 mr-2">
1245
+ <i class="fas fa-eye"></i>
1246
+ </button>
1247
+ <button class="text-green-600 hover:text-green-900 mr-2">
1248
+ <i class="fas fa-edit"></i>
1249
+ </button>
1250
+ <button class="text-red-600 hover:text-red-900">
1251
+ <i class="fas fa-trash"></i>
1252
+ </button>
1253
+ </td>
1254
+ </tr>
1255
+ </tbody>
1256
+ </table>
1257
+ </div>
1258
+
1259
+ <div class="px-6 py-4 border-t flex items-center justify-between">
1260
+ <div class="text-sm text-gray-600">
1261
+ Affichage <span class="font-medium">1</span> à <span class="font-medium">3</span> sur <span class="font-medium">12</span> employés
1262
+ </div>
1263
+ <div class="flex space-x-2">
1264
+ <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100">
1265
+ <i class="fas fa-chevron-left"></i>
1266
+ </button>
1267
+ <button class="px-3 py-1 border rounded bg-blue-600 text-white">1</button>
1268
+ <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100">2</button>
1269
+ <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100">3</button>
1270
+ <button class="px-3 py-1 border rounded text-gray-600 hover:bg-gray-100">
1271
+ <i class="fas fa-chevron-right"></i>
1272
+ </button>
1273
+ </div>
1274
+ </div>
1275
+ </div>
1276
+ </div>
1277
+
1278
+ <!-- Calendar Tab -->
1279
+ <div id="calendar" class="tab-content">
1280
+ <div class="flex justify-between items-center mb-6">
1281
+ <h2 class="text-2xl font-bold text-gray-800">Calendrier des Interventions</h2>
1282
+ <div class="flex space-x-3">
1283
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center">
1284
+ <i class="fas fa-filter mr-2"></i> Filtres
1285
+ </button>
1286
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
1287
+ <i class="fas fa-plus mr-2"></i>
1288
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Je veux une application élaborée pour la gestion interne d'un bureau de contrôle technique nommée COMPAGNIE GÉNÉRALE DE GÉNIE PARASISMIQUE (C2GP), contenant toutes les fonctionnalités nécessaires et qui soit conviviale et interactif.