Hugging Face's logo

Spaces:
depan724
/
dashboard
Running

App Files Community
depan724 commited on
Commit
a6d8958
·
verified ·
1 Parent(s): 5bb33f1

il faut que tu creer la partie modifier

Browse files
Files changed (2) hide show
  1. clients.html +8 -8
  2. modifier-client.html +190 -0
clients.html CHANGED
@@ -141,8 +141,8 @@
141
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">15 missions</span>
142
  </td>
143
  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
144
- <button class="text-blue-600 hover:text-blue-900 mr-3">Modifier</button>
145
- <button class="text-red-600 hover:text-red-900">Supprimer</button>
146
  </td>
147
  </tr>
148
  <tr>
@@ -170,8 +170,8 @@
170
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">42 missions</span>
171
  </td>
172
  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
173
- <button class="text-blue-600 hover:text-blue-900 mr-3">Modifier</button>
174
- <button class="text-red-600 hover:text-red-900">Supprimer</button>
175
  </td>
176
  </tr>
177
  <tr>
@@ -199,8 +199,8 @@
199
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">8 missions</span>
200
  </td>
201
  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
202
- <button class="text-blue-600 hover:text-blue-900 mr-3">Modifier</button>
203
- <button class="text-red-600 hover:text-red-900">Supprimer</button>
204
  </td>
205
  </tr>
206
  <tr>
@@ -228,8 +228,8 @@
228
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">27 missions</span>
229
  </td>
230
  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
231
- <button class="text-blue-600 hover:text-blue-900 mr-3">Modifier</button>
232
- <button class="text-red-600 hover:text-red-900">Supprimer</button>
233
  </td>
234
  </tr>
235
  </tbody>
 
141
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">15 missions</span>
142
  </td>
143
  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
144
+ <a href="modifier-client.html" class="text-blue-600 hover:text-blue-900 mr-3">Modifier</a>
145
+ <button class="text-red-600 hover:text-red-900">Supprimer</button>
146
  </td>
147
  </tr>
148
  <tr>
 
170
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">42 missions</span>
171
  </td>
172
  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
173
+ <a href="modifier-client.html" class="text-blue-600 hover:text-blue-900 mr-3">Modifier</a>
174
+ <button class="text-red-600 hover:text-red-900">Supprimer</button>
175
  </td>
176
  </tr>
177
  <tr>
 
199
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">8 missions</span>
200
  </td>
201
  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
202
+ <a href="modifier-client.html" class="text-blue-600 hover:text-blue-900 mr-3">Modifier</a>
203
+ <button class="text-red-600 hover:text-red-900">Supprimer</button>
204
  </td>
205
  </tr>
206
  <tr>
 
228
  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">27 missions</span>
229
  </td>
230
  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
231
+ <a href="modifier-client.html" class="text-blue-600 hover:text-blue-900 mr-3">Modifier</a>
232
+ <button class="text-red-600 hover:text-red-900">Supprimer</button>
233
  </td>
234
  </tr>
235
  </tbody>
modifier-client.html ADDED
@@ -0,0 +1,190 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 - Modifier 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="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>
43
+ <a href="vehicules.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="truck"></i>
45
+ <span>Véhicules</span>
46
+ </a>
47
+ <a href="missions.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="map-pin"></i>
49
+ <span>Missions</span>
50
+ </a>
51
+ <a href="assurances.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="shield"></i>
53
+ <span>Assurances</span>
54
+ </a>
55
+ <a href="reglements.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="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 -->
67
+ <div class="flex-1 flex flex-col overflow-hidden">
68
+ <!-- Header -->
69
+ <header class="bg-white shadow-sm">
70
+ <div class="flex items-center justify-between p-4">
71
+ <div class="flex items-center">
72
+ <button id="menu-toggle" class="text-gray-500 focus:outline-none md:hidden">
73
+ <i data-feather="menu"></i>
74
+ </button>
75
+ <h1 class="text-2xl font-semibold text-gray-800 ml-4">Modifier Client</h1>
76
+ </div>
77
+ <div class="flex items-center space-x-4">
78
+ <div class="relative">
79
+ <i data-feather="bell" class="text-gray-500"></i>
80
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
81
+ </div>
82
+ <div class="flex items-center">
83
+ <img src="http://static.photos/people/40x40/10" alt="Profile" class="h-10 w-10 rounded-full">
84
+ <span class="ml-2 text-gray-700">Admin</span>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </header>
89
+
90
+ <!-- Content -->
91
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-100">
92
+ <div class="max-w-3xl mx-auto bg-white rounded-lg shadow p-8" data-aos="fade-up">
93
+ <h2 class="text-xl font-semibold text-gray-800 mb-6">Modifier les informations du client</h2>
94
+ <form class="space-y-6">
95
+ <div class="flex items-center space-x-4 mb-6">
96
+ <img src="http://static.photos/people/100x100/1" alt="Client" class="w-16 h-16 rounded-full">
97
+ <div>
98
+ <h3 class="text-lg font-medium text-gray-900">Martin Dupont</h3>
99
+ <p class="text-sm text-gray-500">Client depuis: 15/01/2023</p>
100
+ </div>
101
+ </div>
102
+
103
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
104
+ <div>
105
+ <label class="block text-sm font-medium text-gray-700 mb-1">Nom complet</label>
106
+ <input type="text" value="Martin Dupont" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
107
+ </div>
108
+ <div>
109
+ <label class="block text-sm font-medium text-gray-700 mb-1">Type de client</label>
110
+ <select id="clientType" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
111
+ <option value="particulier" selected>Particulier</option>
112
+ <option value="professionnel">Professionnel</option>
113
+ <option value="assurance">Assurance</option>
114
+ <option value="garage">Garage</option>
115
+ </select>
116
+ </div>
117
+ </div>
118
+
119
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
120
+ <div>
121
+ <label class="block text-sm font-medium text-gray-700 mb-1">Téléphone</label>
122
+ <input type="tel" value="06 12 34 56 78" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
123
+ </div>
124
+ <div>
125
+ <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
126
+ <input type="email" value="martin.dupont@email.com" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
127
+ </div>
128
+ </div>
129
+ <div>
130
+ <label class="block text-sm font-medium text-gray-700 mb-1">Adresse</label>
131
+ <input type="text" value="12 Rue de la Paix, Paris" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
132
+ </div>
133
+
134
+ <div id="siretField" class="hidden">
135
+ <label class="block text-sm font-medium text-gray-700 mb-1">Numéro SIRET/RCS</label>
136
+ <input type="text" id="siret" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
137
+ </div>
138
+
139
+ <div>
140
+ <label class="block text-sm font-medium text-gray-700 mb-1">Informations supplémentaires</label>
141
+ <textarea rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">Client fidèle depuis plusieurs années</textarea>
142
+ </div>
143
+
144
+ <div class="flex justify-end space-x-4 pt-4">
145
+ <a href="clients.html" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition duration-200">
146
+ Annuler
147
+ </a>
148
+ <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-200">
149
+ Enregistrer les modifications
150
+ </button>
151
+ </div>
152
+ </form>
153
+ </div>
154
+ </main>
155
+ </div>
156
+
157
+ <script>
158
+ // Toggle sidebar on mobile
159
+ document.getElementById('menu-toggle').addEventListener('click', function() {
160
+ document.getElementById('sidebar').classList.toggle('-translate-x-full');
161
+ });
162
+
163
+ // Toggle SIRET/RCS field based on client type
164
+ const clientType = document.getElementById('clientType');
165
+ const siretField = document.getElementById('siretField');
166
+
167
+ clientType.addEventListener('change', function() {
168
+ const selectedType = this.value;
169
+ if (selectedType === 'professionnel' || selectedType === 'assurance' || selectedType === 'garage') {
170
+ siretField.classList.remove('hidden');
171
+ document.getElementById('siret').required = true;
172
+ } else {
173
+ siretField.classList.add('hidden');
174
+ document.getElementById('siret').required = false;
175
+ }
176
+ });
177
+
178
+ // Handle form submission
179
+ document.querySelector('form').addEventListener('submit', function(e) {
180
+ e.preventDefault();
181
+
182
+ // Here you would typically handle form submission
183
+ alert('Client modifié avec succès!');
184
+ window.location.href = 'clients.html';
185
+ });
186
+ </script>
187
+ <script>AOS.init();</script>
188
+ <script>feather.replace();</script>
189
+ </body>
190
+ </html>