Hugging Face's logo

Spaces:
davidegato1
/
transferflow-pro-command-management-system
Running

App Files Community
davidegato1 commited on
Commit
cc9967f
·
verified ·
1 Parent(s): e1b7382

ajoute les page commande, devices, users avec leur crud et la page analitics

Browse files
Files changed (1) hide show
  1. commands.html +322 -0
commands.html ADDED
@@ -0,0 +1,322 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```html
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Commands - TransferFlow Pro</title>
8
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: '#3B82F6',
18
+ secondary: '#10B981',
19
+ accent: '#8B5CF6',
20
+ dark: '#1F2937',
21
+ light: '#F9FAFB'
22
+ }
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ <style>
28
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
29
+
30
+ body {
31
+ font-family: 'Inter', sans-serif;
32
+ }
33
+
34
+ .sidebar {
35
+ transition: all 0.3s ease;
36
+ }
37
+
38
+ .card-hover {
39
+ transition: all 0.3s ease;
40
+ }
41
+
42
+ .card-hover:hover {
43
+ transform: translateY(-2px);
44
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
45
+ }
46
+
47
+ @media (max-width: 768px) {
48
+ .sidebar {
49
+ transform: translateX(-100%);
50
+ }
51
+
52
+ .sidebar.open {
53
+ transform: translateX(0);
54
+ }
55
+ }
56
+ </style>
57
+ </head>
58
+ <body class="bg-gray-100">
59
+ <div class="flex h-screen">
60
+ <!-- Sidebar -->
61
+ <div class="sidebar bg-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 z-30">
62
+ <div class="flex items-center space-x-2 px-4">
63
+ <i data-feather="send" class="text-primary h-8 w-8"></i>
64
+ <span class="text-2xl font-extrabold text-dark">TransferFlow</span>
65
+ </div>
66
+
67
+ <nav>
68
+ <a href="dashboard.html" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-100 text-gray-600">
69
+ <i data-feather="home" class="inline-block w-5 h-5 mr-2"></i>
70
+ Dashboard
71
+ </a>
72
+ <a href="commands.html" class="block py-2.5 px-4 rounded transition duration-200 bg-primary text-white">
73
+ <i data-feather="list" class="inline-block w-5 h-5 mr-2"></i>
74
+ Commands
75
+ </a>
76
+ <a href="devices.html" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-100 text-gray-600">
77
+ <i data-feather="smartphone" class="inline-block w-5 h-5 mr-2"></i>
78
+ Devices
79
+ </a>
80
+ <a href="analytics.html" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-100 text-gray-600">
81
+ <i data-feather="bar-chart-2" class="inline-block w-5 h-5 mr-2"></i>
82
+ Analytics
83
+ </a>
84
+ <a href="users.html" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-100 text-gray-600">
85
+ <i data-feather="users" class="inline-block w-5 h-5 mr-2"></i>
86
+ Users
87
+ </a>
88
+ <a href="settings.html" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-100 text-gray-600">
89
+ <i data-feather="settings" class="inline-block w-5 h-5 mr-2"></i>
90
+ Settings
91
+ </a>
92
+ </nav>
93
+ </div>
94
+
95
+ <!-- Main content -->
96
+ <div class="flex-1 flex flex-col overflow-hidden">
97
+ <!-- Header -->
98
+ <header class="flex items-center justify-between px-6 py-4 bg-white border-b">
99
+ <div class="flex items-center">
100
+ <button class="text-gray-500 focus:outline-none lg:hidden" id="menu-toggle">
101
+ <i data-feather="menu" class="h-6 w-6"></i>
102
+ </button>
103
+
104
+ <div class="ml-4">
105
+ <h1 class="text-xl font-semibold text-gray-800">Command Management</h1>
106
+ </div>
107
+ </div>
108
+
109
+ <div class="flex items-center space-x-4">
110
+ <div class="relative">
111
+ <button class="text-gray-500 focus:outline-none">
112
+ <i data-feather="bell" class="h-6 w-6"></i>
113
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
114
+ </button>
115
+ </div>
116
+ <div class="relative">
117
+ <button class="flex items-center text-sm focus:outline-none">
118
+ <div class="h-8 w-8 rounded-full bg-primary flex items-center justify-center text-white font-semibold">S</div>
119
+ <span class="ml-2 text-gray-700">stidjani@proconsulting-info.com</span>
120
+ <i data-feather="chevron-down" class="ml-1 h-4 w-4 text-gray-500"></i>
121
+ </button>
122
+ </div>
123
+ </div>
124
+ </header>
125
+
126
+ <!-- Main content area -->
127
+ <main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100 p-6">
128
+ <!-- Action Bar -->
129
+ <div class="mb-6 flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0">
130
+ <div>
131
+ <h2 class="text-2xl font-semibold text-gray-800">Commands</h2>
132
+ <p class="text-gray-600">Manage and monitor all transfer commands</p>
133
+ </div>
134
+
135
+ <div class="flex space-x-3">
136
+ <!-- Filter Dropdown -->
137
+ <select class="border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary bg-white">
138
+ <option>All Status</option>
139
+ <option>Pending</option>
140
+ <option>Dispatched</option>
141
+ <option>In Progress</option>
142
+ <option>Completed</option>
143
+ <option>Failed</option>
144
+ </select>
145
+
146
+ <!-- Date Filter -->
147
+ <div class="flex space-x-2">
148
+ <input type="date" class="border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary">
149
+ <input type="date" class="border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary">
150
+ </div>
151
+
152
+ <!-- Create Command Button -->
153
+ <button class="bg-primary text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-primary flex items-center">
154
+ <i data-feather="plus" class="h-4 w-4 mr-2"></i>
155
+ New Command
156
+ </button>
157
+ </div>
158
+ </div>
159
+
160
+ <!-- Commands Table -->
161
+ <div class="bg-white rounded-lg shadow overflow-hidden">
162
+ <div class="overflow-x-auto">
163
+ <table class="min-w-full divide-y divide-gray-200">
164
+ <thead class="bg-gray-50">
165
+ <tr>
166
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
167
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
168
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Beneficiary</th>
169
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
170
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phone</th>
171
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
172
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
173
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
174
+ </tr>
175
+ </thead>
176
+ <tbody class="bg-white divide-y divide-gray-200">
177
+ <!-- Command Row 1 -->
178
+ <tr class="hover:bg-gray-50">
179
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">CMD-001</td>
180
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
181
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
182
+ Transfer
183
+ </span>
184
+ </td>
185
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">John Doe</td>
186
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$150.00</td>
187
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">+1234567890</td>
188
+ <td class="px-6 py-4 whitespace-nowrap">
189
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
190
+ Completed
191
+ </span>
192
+ </td>
193
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-12-01 14:30</td>
194
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
195
+ <button class="text-primary hover:text-blue-700 mr-3">
196
+ <i data-feather="eye" class="h-4 w-4"></i>
197
+ </button>
198
+ <button class="text-yellow-600 hover:text-yellow-800 mr-3">
199
+ <i data-feather="edit" class="h-4 w-4"></i>
200
+ </button>
201
+ <button class="text-red-600 hover:text-red-800">
202
+ <i data-feather="trash-2" class="h-4 w-4"></i>
203
+ </button>
204
+ </td>
205
+ </tr>
206
+
207
+ <!-- Command Row 2 -->
208
+ <tr class="hover:bg-gray-50">
209
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">CMD-002</td>
210
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
211
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
212
+ Bill Payment
213
+ </span>
214
+ </td>
215
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Electricity Company</td>
216
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$75.50</td>
217
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">+1234567891</td>
218
+ <td class="px-6 py-4 whitespace-nowrap">
219
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
220
+ In Progress
221
+ </span>
222
+ </td>
223
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-12-01 14:25</td>
224
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
225
+ <button class="text-primary hover:text-blue-700 mr-3">
226
+ <i data-feather="eye" class="h-4 w-4"></i>
227
+ </button>
228
+ <button class="text-yellow-600 hover:text-yellow-800 mr-3">
229
+ <i data-feather="edit" class="h-4 w-4"></i>
230
+ </button>
231
+ <button class="text-red-600 hover:text-red-800">
232
+ <i data-feather="trash-2" class="h-4 w-4"></i>
233
+ </button>
234
+ </td>
235
+ </tr>
236
+
237
+ <!-- Command Row 3 -->
238
+ <tr class="hover:bg-gray-50">
239
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">CMD-003</td>
240
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
241
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
242
+ Deposit
243
+ </span>
244
+ </td>
245
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Jane Smith</td>
246
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$200.00</td>
247
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">+1234567892</td>
248
+ <td class="px-6 py-4 whitespace-nowrap">
249
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
250
+ Pending
251
+ </span>
252
+ </td>
253
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-12-01 14:20</td>
254
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
255
+ <button class="text-primary hover:text-blue-700 mr-3">
256
+ <i data-feather="eye" class="h-4 w-4"></i>
257
+ </button>
258
+ <button class="text-yellow-600 hover:text-yellow-800 mr-3">
259
+ <i data-feather="edit" class="h-4 w-4"></i>
260
+ </button>
261
+ <button class="text-red-600 hover:text-red-800">
262
+ <i data-feather="trash-2" class="h-4 w-4"></i>
263
+ </button>
264
+ </td>
265
+ </tr>
266
+
267
+ <!-- Command Row 4 -->
268
+ <tr class="hover:bg-gray-50">
269
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">CMD-004</td>
270
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
271
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
272
+ Transfer
273
+ </span>
274
+ </td>
275
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Bob Johnson</td>
276
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$300.00</td>
277
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">+1234567893</td>
278
+ <td class="px-6 py-4 whitespace-nowrap">
279
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
280
+ Failed
281
+ </span>
282
+ </td>
283
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-12-01 14:15</td>
284
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
285
+ <button class="text-primary hover:text-blue-700 mr-3">
286
+ <i data-feather="eye" class="h-4 w-4"></i>
287
+ </button>
288
+ <button class="text-yellow-600 hover:text-yellow-800 mr-3">
289
+ <i data-feather="edit" class="h-4 w-4"></i>
290
+ </button>
291
+ <button class="text-red-600 hover:text-red-800">
292
+ <i data-feather="trash-2" class="h-4 w-4"></i>
293
+ </button>
294
+ </td>
295
+ </tr>
296
+ </tbody>
297
+ </table>
298
+ </div>
299
+
300
+ <!-- Pagination -->
301
+ <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
302
+ <div class="flex-1 flex justify-between items-center">
303
+ <div>
304
+ <p class="text-sm text-gray-700">
305
+ Showing
306
+ <span class="font-medium">1</span>
307
+ to
308
+ <span class="font-medium">4</span>
309
+ of
310
+ <span class="font-medium">12</span>
311
+ results
312
+ </p>
313
+ </div>
314
+ <div>
315
+ <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
316
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
317
+ <span class="sr-only">Previous</span>
318
+ <i data-feather="chevron-left" class="h-4 w-4"></i>
319
+ </a>
320
+ <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">1</a>
321
+ <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">2</a>
322
+ <a href="#" class="relative inline-flex items