Hugging Face's logo

Spaces:
depan724
/
dashboard
Running

App Files Community
depan724 commited on
Commit
5dea762
·
verified ·
1 Parent(s): 89d30de

creer et active la partie rapport

Browse files
Files changed (7) hide show
  1. clients.html +2 -2
  2. employes.html +1 -1
  3. index.html +4 -4
  4. missions.html +1 -1
  5. rapports.html +348 -0
  6. reglements.html +1 -1
  7. vehicules.html +1 -1
clients.html CHANGED
@@ -56,11 +56,11 @@
56
  <i data-feather="credit-card"></i>
57
  <span>Règlements</span>
58
  </a>
59
- <a href="rapports.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
60
  <i data-feather="bar-chart-2"></i>
61
  <span>Rapports</span>
62
  </a>
63
- </nav>
64
  </div>
65
 
66
  <!-- Main Content -->
 
56
  <i data-feather="credit-card"></i>
57
  <span>Règlements</span>
58
  </a>
59
+ <a href="rapports.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
60
  <i data-feather="bar-chart-2"></i>
61
  <span>Rapports</span>
62
  </a>
63
+ </nav>
64
  </div>
65
 
66
  <!-- Main Content -->
employes.html CHANGED
@@ -60,7 +60,7 @@
60
  <i data-feather="bar-chart-2"></i>
61
  <span>Rapports</span>
62
  </a>
63
- </nav>
64
  </div>
65
 
66
  <!-- Main Content -->
 
60
  <i data-feather="bar-chart-2"></i>
61
  <span>Rapports</span>
62
  </a>
63
+ </nav>
64
  </div>
65
 
66
  <!-- Main Content -->
index.html CHANGED
@@ -33,11 +33,11 @@
33
  <span class="text-2xl font-extrabold">Remorquage Pro</span>
34
  </div>
35
  <nav>
36
- <a href="#" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 active-menu">
37
  <i data-feather="home"></i>
38
  <span>Dashboard</span>
39
  </a>
40
- <a href="clients.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
41
  <i data-feather="users"></i>
42
  <span>Clients</span>
43
  </a>
@@ -61,11 +61,11 @@
61
  <i data-feather="credit-card"></i>
62
  <span>Règlements</span>
63
  </a>
64
- <a href="rapports.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
65
  <i data-feather="bar-chart-2"></i>
66
  <span>Rapports</span>
67
  </a>
68
- </nav>
69
  </div>
70
 
71
  <!-- Main Content -->
 
33
  <span class="text-2xl font-extrabold">Remorquage Pro</span>
34
  </div>
35
  <nav>
36
+ <a href="index.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
37
  <i data-feather="home"></i>
38
  <span>Dashboard</span>
39
  </a>
40
+ <a href="clients.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
41
  <i data-feather="users"></i>
42
  <span>Clients</span>
43
  </a>
 
61
  <i data-feather="credit-card"></i>
62
  <span>Règlements</span>
63
  </a>
64
+ <a href="rapports.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 active-menu">
65
  <i data-feather="bar-chart-2"></i>
66
  <span>Rapports</span>
67
  </a>
68
+ </nav>
69
  </div>
70
 
71
  <!-- Main Content -->
missions.html CHANGED
@@ -60,7 +60,7 @@
60
  <i data-feather="bar-chart-2"></i>
61
  <span>Rapports</span>
62
  </a>
63
- </nav>
64
  </div>
65
 
66
  <!-- Main Content -->
 
60
  <i data-feather="bar-chart-2"></i>
61
  <span>Rapports</span>
62
  </a>
63
+ </nav>
64
  </div>
65
 
66
  <!-- Main Content -->
rapports.html ADDED
@@ -0,0 +1,348 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Remorquage Pro - Rapports</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
14
+ <style>
15
+ .sidebar {
16
+ transition: all 0.3s ease;
17
+ }
18
+ .active-menu {
19
+ background-color: #3B82F6;
20
+ color: white;
21
+ }
22
+ </style>
23
+ </head>
24
+ <body class="bg-gray-100 flex h-screen">
25
+ <!-- Sidebar -->
26
+ <div class="sidebar bg-blue-800 text-white w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0 transition duration-200 ease-in-out" id="sidebar">
27
+ <div class="text-white flex items-center space-x-2 px-4">
28
+ <i data-feather="truck" class="h-8 w-8"></i>
29
+ <span class="text-2xl font-extrabold">Remorquage Pro</span>
30
+ </div>
31
+ <nav>
32
+ <a href="index.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
33
+ <i data-feather="home"></i>
34
+ <span>Dashboard</span>
35
+ </a>
36
+ <a href="clients.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
37
+ <i data-feather="users"></i>
38
+ <span>Clients</span>
39
+ </a>
40
+ <a href="employes.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
41
+ <i data-feather="user-check"></i>
42
+ <span>Employés</span>
43
+ </a>
44
+ <a href="vehicules.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
45
+ <i data-feather="truck"></i>
46
+ <span>Véhicules</span>
47
+ </a>
48
+ <a href="missions.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
49
+ <i data-feather="map-pin"></i>
50
+ <span>Missions</span>
51
+ </a>
52
+ <a href="assurances.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
53
+ <i data-feather="shield"></i>
54
+ <span>Assurances</span>
55
+ </a>
56
+ <a href="reglements.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
57
+ <i data-feather="credit-card"></i>
58
+ <span>Règlements</span>
59
+ </a>
60
+ <a href="rapports.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 active-menu">
61
+ <i data-feather="bar-chart-2"></i>
62
+ <span>Rapports</span>
63
+ </a>
64
+ </nav>
65
+ </div>
66
+
67
+ <!-- Main Content -->
68
+ <div class="flex-1 flex flex-col overflow-hidden">
69
+ <!-- Header -->
70
+ <header class="bg-white shadow-sm">
71
+ <div class="flex items-center justify-between p-4">
72
+ <div class="flex items-center">
73
+ <button id="menu-toggle" class="text-gray-500 focus:outline-none md:hidden">
74
+ <i data-feather="menu"></i>
75
+ </button>
76
+ <h1 class="text-2xl font-semibold text-gray-800 ml-4">Rapports et Statistiques</h1>
77
+ </div>
78
+ <div class="flex items-center space-x-4">
79
+ <div class="relative">
80
+ <i data-feather="bell" class="text-gray-500"></i>
81
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
82
+ </div>
83
+ <div class="flex items-center">
84
+ <img src="http://static.photos/people/40x40/10" alt="Profile" class="h-10 w-10 rounded-full">
85
+ <span class="ml-2 text-gray-700">Admin</span>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </header>
90
+
91
+ <!-- Content -->
92
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-100">
93
+ <!-- Filters -->
94
+ <div class="bg-white rounded-lg shadow p-6 mb-6" data-aos="fade-up">
95
+ <div class="flex flex-col md:flex-row md:items-center md:space-x-6 space-y-4 md:space-y-0">
96
+ <div>
97
+ <label class="block text-sm font-medium text-gray-700 mb-2">Période</label>
98
+ <select class="border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
99
+ <option>Ce mois</option>
100
+ <option>Trimestre dernier</option>
101
+ <option>Cette année</option>
102
+ <option>Année dernière</option>
103
+ </select>
104
+ </div>
105
+ <div>
106
+ <label class="block text-sm font-medium text-gray-700 mb-2">Type de rapport</label>
107
+ <select class="border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
108
+ <option>Performance générale</option>
109
+ <option>Analyse financière</option>
110
+ <option>Statistiques missions</option>
111
+ <option>Performance employés</option>
112
+ </select>
113
+ </div>
114
+ <div class="flex items-end">
115
+ <button class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition duration-200">
116
+ Générer le rapport
117
+ </button>
118
+ </div>
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Stats Cards -->
123
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
124
+ <div class="bg-white rounded-lg shadow p-6" data-aos="fade-up">
125
+ <div class="flex items-center">
126
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
127
+ <i data-feather="map-pin" class="h-6 w-6"></i>
128
+ </div>
129
+ <div class="ml-4">
130
+ <p class="text-sm font-medium text-gray-600">Missions totales</p>
131
+ <h3 class="text-2xl font-bold text-gray-800">247</h3>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ <div class="bg-white rounded-lg shadow p-6" data-aos="fade-up" data-aos-delay="100">
136
+ <div class="flex items-center">
137
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
138
+ <i data-feather="dollar-sign" class="h-6 w-6"></i>
139
+ </div>
140
+ <div class="ml-4">
141
+ <p class="text-sm font-medium text-gray-600">Chiffre d'affaires</p>
142
+ <h3 class="text-2xl font-bold text-gray-800">86 450 €</h3>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ <div class="bg-white rounded-lg shadow p-6" data-aos="fade-up" data-aos-delay="200">
147
+ <div class="flex items-center">
148
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
149
+ <i data-feather="users" class="h-6 w-6"></i>
150
+ </div>
151
+ <div class="ml-4">
152
+ <p class="text-sm font-medium text-gray-600">Clients actifs</p>
153
+ <h3 class="text-2xl font-bold text-gray-800">58</h3>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ <div class="bg-white rounded-lg shadow p-6" data-aos="fade-up" data-aos-delay="300">
158
+ <div class="flex items-center">
159
+ <div class="p-3 rounded-full bg-red-100 text-red-600">
160
+ <i data-feather="trending-up" class="h-6 w-6"></i>
161
+ </div>
162
+ <div class="ml-4">
163
+ <p class="text-sm font-medium text-gray-600">Taux de réussite</p>
164
+ <h3 class="text-2xl font-bold text-gray-800">97.5%</h3>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Charts Section -->
171
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
172
+ <!-- Missions par type -->
173
+ <div class="bg-white rounded-lg shadow p-6" data-aos="fade-right">
174
+ <h2 class="text-lg font-semibold text-gray-800 mb-4">Répartition des missions par type</h2>
175
+ <div class="h-64">
176
+ <canvas id="missionsChart"></canvas>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Évolution mensuelle -->
181
+ <div class="bg-white rounded-lg shadow p-6" data-aos="fade-left">
182
+ <h2 class="text-lg font-semibold text-gray-800 mb-4">Évolution mensuelle du CA</h2>
183
+ <div class="h-64">
184
+ <canvas id="revenueChart"></canvas>
185
+ </div>
186
+ </div>
187
+ </div>
188
+
189
+ <!-- Performance employés -->
190
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-6" data-aos="fade-up">
191
+ <div class="px-6 py-4 border-b border-gray-200">
192
+ <h2 class="text-lg font-semibold text-gray-800">Performance des employés</h2>
193
+ </div>
194
+ <div class="overflow-x-auto">
195
+ <table class="min-w-full divide-y divide-gray-200">
196
+ <thead class="bg-gray-50">
197
+ <tr>
198
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Employé</th>
199
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Missions réalisées</th>
200
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Taux de réussite</th>
201
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">KM moyen/mission</th>
202
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Temps moyen</th>
203
+ </tr>
204
+ </thead>
205
+ <tbody class="bg-white divide-y divide-gray-200">
206
+ <tr>
207
+ <td class="px-6 py-4 whitespace-nowrap">
208
+ <div class="flex items-center">
209
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/40x40/5" alt="Jean Martin">
210
+ <div class="ml-4">
211
+ <div class="text-sm font-medium text-gray-900">Jean Martin</div>
212
+ </div>
213
+ </div>
214
+ </td>
215
+ <td class="px-6 py-4 whitespace-nowrap">
216
+ <div class="text-sm text-gray-900">68 missions</div>
217
+ </td>
218
+ <td class="px-6 py-4 whitespace-nowrap">
219
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">98.5%</span>
220
+ </td>
221
+ <td class="px-6 py-4 whitespace-nowrap">
222
+ <div class="text-sm text-gray-900">22.4 km</div>
223
+ </td>
224
+ <td class="px-6 py-4 whitespace-nowrap">
225
+ <div class="text-sm text-gray-900">42 min</div>
226
+ </td>
227
+ </tr>
228
+ <tr>
229
+ <td class="px-6 py-4 whitespace-nowrap">
230
+ <div class="flex items-center">
231
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/40x40/6" alt="Marie Dubois">
232
+ <div class="ml-4">
233
+ <div class="text-sm font-medium text-gray-900">Marie Dubois</div>
234
+ </div>
235
+ </div>
236
+ </td>
237
+ <td class="px-6 py-4 whitespace-nowrap">
238
+ <div class="text-sm text-gray-900">54 missions</div>
239
+ </td>
240
+ <td class="px-6 py-4 whitespace-nowrap">
241
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">97.2%</span>
242
+ </td>
243
+ <td class="px-6 py-4 whitespace-nowrap">
244
+ <div class="text-sm text-gray-900">25.1 km</div>
245
+ </td>
246
+ <td class="px-6 py-4 whitespace-nowrap">
247
+ <div class="text-sm text-gray-900">38 min</div>
248
+ </td>
249
+ </tr>
250
+ <tr>
251
+ <td class="px-6 py-4 whitespace-nowrap">
252
+ <div class="flex items-center">
253
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/40x40/7" alt="Pierre Moreau">
254
+ <div class="ml-4">
255
+ <div class="text-sm font-medium text-gray-900">Pierre Moreau</div>
256
+ </div>
257
+ </div>
258
+ </td>
259
+ <td class="px-6 py-4 whitespace-nowrap">
260
+ <div class="text-sm text-gray-900">45 missions</div>
261
+ </td>
262
+ <td class="px-6 py-4 whitespace-nowrap">
263
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">95.8%</span>
264
+ </td>
265
+ <td class="px-6 py-4 whitespace-nowrap">
266
+ <div class="text-sm text-gray-900">28.7 km</div>
267
+ </td>
268
+ <td class="px-6 py-4 whitespace-nowrap">
269
+ <div class="text-sm text-gray-900">51 min</div>
270
+ </td>
271
+ </tr>
272
+ </tbody>
273
+ </table>
274
+ </div>
275
+ </div>
276
+
277
+ <!-- Export Section -->
278
+ <div class="bg-white rounded-lg shadow p-6" data-aos="fade-up">
279
+ <div class="flex justify-between items-center">
280
+ <div>
281
+ <h2 class="text-lg font-semibold text-gray-800">Exporter les rapports</h2>
282
+ <p class="text-sm text-gray-600 mt-1">Téléchargez vos rapports au format PDF ou Excel</p>
283
+ </div>
284
+ <div class="flex space-x-4">
285
+ <button class="bg-red-600 text-white px-4 py-2 rounded-lg flex items-center space-x-2 hover:bg-red-700 transition duration-200">
286
+ <i data-feather="file-text"></i>
287
+ <span>PDF</span>
288
+ </button>
289
+ <button class="bg-green-600 text-white px-4 py-2 rounded-lg flex items-center space-x-2 hover:bg-green-700 transition duration-200">
290
+ <i data-feather="download"></i>
291
+ <span>Excel</span>
292
+ </button>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ </main>
297
+ </div>
298
+
299
+ <script>
300
+ // Toggle sidebar on mobile
301
+ document.getElementById('menu-toggle').addEventListener('click', function() {
302
+ document.getElementById('sidebar').classList.toggle('-translate-x-full');
303
+ });
304
+
305
+ // Charts initialization
306
+ document.addEventListener('DOMContentLoaded', function() {
307
+ // Missions by type chart
308
+ const missionsCtx = document.getElementById('missionsChart').getContext('2d');
309
+ const missionsChart = new Chart(missionsCtx, {
310
+ type: 'doughnut',
311
+ data: {
312
+ labels: ['Remorquage', 'Dépannage', 'Assistance', 'Transport'],
313
+ datasets: [{
314
+ data: [45, 30, 15, 10],
315
+ backgroundColor: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444']
316
+ }]
317
+ },
318
+ options: {
319
+ responsive: true,
320
+ maintainAspectRatio: false
321
+ }
322
+ });
323
+
324
+ // Revenue chart
325
+ const revenueCtx = document.getElementById('revenueChart').getContext('2d');
326
+ const revenueChart = new Chart(revenueCtx, {
327
+ type: 'line',
328
+ data: {
329
+ labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin'],
330
+ datasets: [{
331
+ label: 'Chiffre d\'affaires (€)',
332
+ data: [12500, 14200, 13800, 15600, 18240, 19800],
333
+ borderColor: '#3B82F6',
334
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
335
+ fill: true
336
+ }]
337
+ },
338
+ options: {
339
+ responsive: true,
340
+ maintainAspectRatio: false
341
+ }
342
+ });
343
+ });
344
+ </script>
345
+ <script>AOS.init();</script>
346
+ <script>feather.replace();</script>
347
+ </body>
348
+ </html>
reglements.html CHANGED
@@ -60,7 +60,7 @@
60
  <i data-feather="bar-chart-2"></i>
61
  <span>Rapports</span>
62
  </a>
63
- </nav>
64
  </div>
65
 
66
  <!-- Main Content -->
 
60
  <i data-feather="bar-chart-2"></i>
61
  <span>Rapports</span>
62
  </a>
63
+ </nav>
64
  </div>
65
 
66
  <!-- Main Content -->
vehicules.html CHANGED
@@ -60,7 +60,7 @@
60
  <i data-feather="bar-chart-2"></i>
61
  <span>Rapports</span>
62
  </a>
63
- </nav>
64
  </div>
65
 
66
  <!-- Main Content -->
 
60
  <i data-feather="bar-chart-2"></i>
61
  <span>Rapports</span>
62
  </a>
63
+ </nav>
64
  </div>
65
 
66
  <!-- Main Content -->