Hugging Face's logo

Spaces:
depan724
/
dashboard
Running

App Files Community
depan724 commited on
Commit
b0e8ec1
·
verified ·
1 Parent(s): aada562

il faut ajouter "rechercher" dans le menu de "client" et activer l'option rechercher

Browse files
Files changed (2) hide show
  1. clients.html +24 -14
  2. rechercher-client.html +235 -0
clients.html CHANGED
@@ -32,11 +32,15 @@
32
  <i data-feather="home"></i>
33
  <span>Dashboard</span>
34
  </a>
35
- <a href="clients.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 active-menu">
36
  <i data-feather="users"></i>
37
  <span>Clients</span>
38
  </a>
39
- <a href="employes.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
 
 
 
 
40
  <i data-feather="user-check"></i>
41
  <span>Employés</span>
42
  </a>
@@ -242,21 +246,27 @@
242
  document.getElementById('menu-toggle').addEventListener('click', function() {
243
  document.getElementById('sidebar').classList.toggle('-translate-x-full');
244
  });
245
- // Search functionality
246
- document.querySelector('input[placeholder="Rechercher un client..."]').addEventListener('input', function(e) {
247
- const searchTerm = e.target.value.toLowerCase();
248
- const rows = document.querySelectorAll('tbody tr');
 
 
249
 
250
- rows.forEach(row => {
251
- const text = row.textContent.toLowerCase();
252
- if (text.includes(searchTerm)) {
253
- row.style.display = '';
254
- } else {
255
- row.style.display = 'none';
256
- }
 
 
 
 
257
  });
258
  });
259
- </script>
260
  <script>AOS.init();</script>
261
  <script>feather.replace();</script>
262
  </body>
 
32
  <i data-feather="home"></i>
33
  <span>Dashboard</span>
34
  </a>
35
+ <a href="clients.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
36
  <i data-feather="users"></i>
37
  <span>Clients</span>
38
  </a>
39
+ <a href="rechercher-client.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 active-menu">
40
+ <i data-feather="search"></i>
41
+ <span>Rechercher</span>
42
+ </a>
43
+ <a href="employes.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
44
  <i data-feather="user-check"></i>
45
  <span>Employés</span>
46
  </a>
 
246
  document.getElementById('menu-toggle').addEventListener('click', function() {
247
  document.getElementById('sidebar').classList.toggle('-translate-x-full');
248
  });
249
+ // Enhanced Search functionality
250
+ const searchInput = document.querySelector('input[placeholder="Rechercher un client..."]');
251
+ const searchRows = document.querySelectorAll('tbody tr');
252
+
253
+ searchInput.addEventListener('input', function(e) {
254
+ const searchTerm = e.target.value.toLowerCase().trim();
255
 
256
+ searchRows.forEach(row => {
257
+ const cells = row.querySelectorAll('td');
258
+ let found = false;
259
+
260
+ cells.forEach(cell => {
261
+ if (cell.textContent.toLowerCase().includes(searchTerm)) {
262
+ found = true;
263
+ }
264
+ });
265
+
266
+ row.style.display = found ? '' : 'none';
267
  });
268
  });
269
+ </script>
270
  <script>AOS.init();</script>
271
  <script>feather.replace();</script>
272
  </body>
rechercher-client.html ADDED
@@ -0,0 +1,235 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 - Rechercher Client</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
+ <style>
14
+ .sidebar {
15
+ transition: all 0.3s ease;
16
+ }
17
+ .active-menu {
18
+ background-color: #3B82F6;
19
+ color: white;
20
+ }
21
+ </style>
22
+ </head>
23
+ <body class="bg-gray-100 flex h-screen">
24
+ <!-- Sidebar -->
25
+ <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">
26
+ <div class="text-white flex items-center space-x-2 px-4">
27
+ <i data-feather="truck" class="h-8 w-8"></i>
28
+ <span class="text-2xl font-extrabold">Remorquage Pro</span>
29
+ </div>
30
+ <nav>
31
+ <a href="index.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
32
+ <i data-feather="home"></i>
33
+ <span>Dashboard</span>
34
+ </a>
35
+ <a href="clients.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
36
+ <i data-feather="users"></i>
37
+ <span>Clients</span>
38
+ </a>
39
+ <a href="rechercher-client.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 active-menu">
40
+ <i data-feather="search"></i>
41
+ <span>Rechercher</span>
42
+ </a>
43
+ <a href="employes.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
44
+ <i data-feather="user-check"></i>
45
+ <span>Employés</span>
46
+ </a>
47
+ <a href="vehicules.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
48
+ <i data-feather="truck"></i>
49
+ <span>Véhicules</span>
50
+ </a>
51
+ <a href="missions.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
52
+ <i data-feather="map-pin"></i>
53
+ <span>Missions</span>
54
+ </a>
55
+ <a href="assurances.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
56
+ <i data-feather="shield"></i>
57
+ <span>Assurances</span>
58
+ </a>
59
+ <a href="reglements.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="credit-card"></i>
61
+ <span>Règlements</span>
62
+ </a>
63
+ <a href="rapports.html" class="py-2.5 px-4 rounded transition duration-200 flex items-center space-x-2 hover:bg-blue-700">
64
+ <i data-feather="bar-chart-2"></i>
65
+ <span>Rapports</span>
66
+ </a>
67
+ </nav>
68
+ </div>
69
+
70
+ <!-- Main Content -->
71
+ <div class="flex-1 flex flex-col overflow-hidden">
72
+ <!-- Header -->
73
+ <header class="bg-white shadow-sm">
74
+ <div class="flex items-center justify-between p-4">
75
+ <div class="flex items-center">
76
+ <button id="menu-toggle" class="text-gray-500 focus:outline-none md:hidden">
77
+ <i data-feather="menu"></i>
78
+ </button>
79
+ <h1 class="text-2xl font-semibold text-gray-800 ml-4">Recherche de Clients</h1>
80
+ </div>
81
+ <div class="flex items-center space-x-4">
82
+ <div class="relative">
83
+ <i data-feather="bell" class="text-gray-500"></i>
84
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
85
+ </div>
86
+ <div class="flex items-center">
87
+ <img src="http://static.photos/people/40x40/10" alt="Profile" class="h-10 w-10 rounded-full">
88
+ <span class="ml-2 text-gray-700">Admin</span>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </header>
93
+
94
+ <!-- Content -->
95
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-100">
96
+ <!-- Search Bar -->
97
+ <div class="bg-white rounded-lg shadow p-6 mb-6" data-aos="fade-up">
98
+ <div class="relative">
99
+ <input type="text" placeholder="Rechercher un client (nom, email, téléphone, adresse...)"
100
+ class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
101
+ <i data-feather="search" class="absolute left-3 top-3.5 text-gray-400"></i>
102
+ </div>
103
+ <div class="flex items-center mt-4 space-x-4">
104
+ <div>
105
+ <label class="inline-flex items-center">
106
+ <input type="checkbox" class="form-checkbox text-blue-600" checked>
107
+ <span class="ml-2 text-sm text-gray-700">Particuliers</span>
108
+ </label>
109
+ </div>
110
+ <div>
111
+ <label class="inline-flex items-center">
112
+ <input type="checkbox" class="form-checkbox text-blue-600" checked>
113
+ <span class="ml-2 text-sm text-gray-700">Professionnels</span>
114
+ </label>
115
+ </div>
116
+ <div>
117
+ <label class="inline-flex items-center">
118
+ <input type="checkbox" class="form-checkbox text-blue-600">
119
+ <span class="ml-2 text-sm text-gray-700">Clients actifs uniquement</span>
120
+ </label>
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- Results -->
126
+ <div class="bg-white rounded-lg shadow overflow-hidden" data-aos="fade-up">
127
+ <div class="px-6 py-4 border-b border-gray-200">
128
+ <h2 class="text-lg font-semibold text-gray-800">Résultats de recherche</h2>
129
+ </div>
130
+ <div class="overflow-x-auto">
131
+ <table class="min-w-full divide-y divide-gray-200">
132
+ <thead class="bg-gray-50">
133
+ <tr>
134
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
135
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Téléphone</th>
136
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
137
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
138
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Missions</th>
139
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
140
+ </tr>
141
+ </thead>
142
+ <tbody class="bg-white divide-y divide-gray-200" id="searchResults">
143
+ <!-- Results will be populated here -->
144
+ </tbody>
145
+ </table>
146
+ </div>
147
+ </div>
148
+ </main>
149
+ </div>
150
+
151
+ <script>
152
+ // Toggle sidebar on mobile
153
+ document.getElementById('menu-toggle').addEventListener('click', function() {
154
+ document.getElementById('sidebar').classList.toggle('-translate-x-full');
155
+ });
156
+
157
+ // Search functionality
158
+ document.querySelector('input[placeholder="Rechercher un client (nom, email, téléphone, adresse...)"]')
159
+ .addEventListener('input', function(e) {
160
+ const searchTerm = e.target.value.toLowerCase();
161
+ const resultsContainer = document.getElementById('searchResults');
162
+
163
+ // Simulate search results (in a real app, this would be an API call)
164
+ if (searchTerm.length > 2) {
165
+ resultsContainer.innerHTML = `
166
+ <tr>
167
+ <td class="px-6 py-4 whitespace-nowrap">
168
+ <div class="flex items-center">
169
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/people/40x40/1" alt="Martin Dupont">
170
+ <div class="ml-4">
171
+ <div class="text-sm font-medium text-gray-900">Martin Dupont</div>
172
+ <div class="text-sm text-gray-500">12 Rue de la Paix, Paris</div>
173
+ </div>
174
+ </div>
175
+ </td>
176
+ <td class="px-6 py-4 whitespace-nowrap">
177
+ <div class="text-sm text-gray-900">06 12 34 56 78</div>
178
+ </td>
179
+ <td class="px-6 py-4 whitespace-nowrap">
180
+ <div class="text-sm text-gray-900">martin.dupont@email.com</div>
181
+ </td>
182
+ <td class="px-6 py-4 whitespace-nowrap">
183
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Particulier</span>
184
+ </td>
185
+ <td class="px-6 py-4 whitespace-nowrap">
186
+ <div class="text-sm text-gray-900">15 missions</div>
187
+ </td>
188
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
189
+ <a href="modifier-client.html" class="text-blue-600 hover:text-blue-900 mr-3">Voir</a>
190
+ </td>
191
+ </tr>
192
+ <tr>
193
+ <td class="px-6 py-4 whitespace-nowrap">
194
+ <div class="flex items-center">
195
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/people/40x40/2" alt="Assurance AXA">
196
+ <div class="ml-4">
197
+ <div class="text-sm font-medium text-gray-900">Assurance AXA</div>
198
+ <div class="text-sm text-gray-500">25 Av. des Champs-Élysées, Paris</div>
199
+ </div>
200
+ </div>
201
+ </td>
202
+ <td class="px-6 py-4 whitespace-nowrap">
203
+ <div class="text-sm text-gray-900">01 42 86 95 32</div>
204
+ </td>
205
+ <td class="px-6 py-4 whitespace-nowrap">
206
+ <div class="text-sm text-gray-900">contact@axa.fr</div>
207
+ </td>
208
+ <td class="px-6 py-4 whitespace-nowrap">
209
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Professionnel</span>
210
+ </td>
211
+ <td class="px-6 py-4 whitespace-nowrap">
212
+ <div class="text-sm text-gray-900">42 missions</div>
213
+ </td>
214
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
215
+ <a href="modifier-client.html" class="text-blue-600 hover:text-blue-900 mr-3">Voir</a>
216
+ </td>
217
+ </tr>
218
+ `;
219
+ } else {
220
+ resultsContainer.innerHTML = `
221
+ <tr>
222
+ <td colspan="6" class="px-6 py-4 text-center text-sm text-gray-500">
223
+ Entrez au moins 3 caractères pour lancer la recherche
224
+ </td>
225
+ </tr>
226
+ `;
227
+ }
228
+
229
+ feather.replace();
230
+ });
231
+ </script>
232
+ <script>AOS.init();</script>
233
+ <script>feather.replace();</script>
234
+ </body>
235
+ </html>