Hugging Face's logo

Spaces:
Acronite
/
undefined
Running

App Files Community
Acronite commited on
Commit
3145588
·
verified ·
1 Parent(s): 60905a2

Can you add iDeal as a payment gateway with support for all Dutch Banks.

Browse files
Files changed (4) hide show
  1. README.md +9 -5
  2. index.html +440 -18
  3. settings.html +751 -0
  4. transactions.html +209 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🐨
4
- colorFrom: gray
5
- colorTo: yellow
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: undefined
3
+ colorFrom: purple
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,441 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>PayGate Commander | Dashboard</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12
+ <style>
13
+ .sidebar {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .sidebar-collapsed {
17
+ width: 80px;
18
+ }
19
+ .sidebar-collapsed .nav-text {
20
+ display: none;
21
+ }
22
+ .content {
23
+ transition: margin-left 0.3s ease;
24
+ }
25
+ .gradient-bg {
26
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="bg-gray-100">
31
+ <div class="flex h-screen overflow-hidden">
32
+ <!-- Sidebar -->
33
+ <div class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0">
34
+ <div class="p-4 flex items-center justify-between border-b border-indigo-700">
35
+ <div class="flex items-center space-x-2">
36
+ <i data-feather="credit-card" class="w-6 h-6"></i>
37
+ <span class="text-xl font-bold">PayGate Commander</span>
38
+ </div>
39
+ <button id="toggleSidebar" class="text-gray-300 hover:text-white">
40
+ <i data-feather="chevron-left"></i>
41
+ </button>
42
+ </div>
43
+ <nav class="p-4">
44
+ <div class="mb-8">
45
+ <p class="text-xs uppercase text-indigo-300 mb-2">Main</p>
46
+ <a href="#" class="flex items-center space-x-3 py-2 px-3 rounded-lg bg-indigo-700 text-white">
47
+ <i data-feather="home"></i>
48
+ <span class="nav-text">Dashboard</span>
49
+ </a>
50
+ </div>
51
+ <div class="mb-8">
52
+ <p class="text-xs uppercase text-indigo-300 mb-2">Payments</p>
53
+ <a href="#" class="flex items-center space-x-3 py-2 px-3 rounded-lg text-gray-300 hover:bg-indigo-700 hover:text-white">
54
+ <i data-feather="dollar-sign"></i>
55
+ <span class="nav-text">Transactions</span>
56
+ </a>
57
+ <a href="#" class="flex items-center space-x-3 py-2 px-3 rounded-lg text-gray-300 hover:bg-indigo-700 hover:text-white">
58
+ <i data-feather="refresh-cw"></i>
59
+ <span class="nav-text">Refunds</span>
60
+ </a>
61
+ <a href="#" class="flex items-center space-x-3 py-2 px-3 rounded-lg text-gray-300 hover:bg-indigo-700 hover:text-white">
62
+ <i data-feather="bar-chart-2"></i>
63
+ <span class="nav-text">Analytics</span>
64
+ </a>
65
+ </div>
66
+ <div class="mb-8">
67
+ <p class="text-xs uppercase text-indigo-300 mb-2">Settings</p>
68
+ <a href="#" class="flex items-center space-x-3 py-2 px-3 rounded-lg text-gray-300 hover:bg-indigo-700 hover:text-white">
69
+ <i data-feather="settings"></i>
70
+ <span class="nav-text">Gateway Config</span>
71
+ </a>
72
+ <a href="#" class="flex items-center space-x-3 py-2 px-3 rounded-lg text-gray-300 hover:bg-indigo-700 hover:text-white">
73
+ <i data-feather="shield"></i>
74
+ <span class="nav-text">Security</span>
75
+ </a>
76
+ <a href="#" class="flex items-center space-x-3 py-2 px-3 rounded-lg text-gray-300 hover:bg-indigo-700 hover:text-white">
77
+ <i data-feather="users"></i>
78
+ <span class="nav-text">Users</span>
79
+ </a>
80
+ </div>
81
+ <div class="absolute bottom-4 left-4 right-4">
82
+ <div class="bg-indigo-900 p-3 rounded-lg">
83
+ <div class="flex items-center space-x-3">
84
+ <div class="w-10 h-10 rounded-full bg-indigo-700 flex items-center justify-center">
85
+ <i data-feather="user"></i>
86
+ </div>
87
+ <div class="nav-text">
88
+ <p class="text-sm font-medium">Admin User</p>
89
+ <p class="text-xs text-indigo-300">Super Admin</p>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </nav>
95
+ </div>
96
+
97
+ <!-- Main Content -->
98
+ <div class="content flex-1 overflow-auto">
99
+ <!-- Top Navigation -->
100
+ <header class="bg-white shadow-sm">
101
+ <div class="px-6 py-4 flex items-center justify-between">
102
+ <h1 class="text-2xl font-bold text-gray-800">Dashboard Overview</h1>
103
+ <div class="flex items-center space-x-4">
104
+ <div class="relative">
105
+ <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
106
+ <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
107
+ </div>
108
+ <button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200">
109
+ <i data-feather="bell"></i>
110
+ </button>
111
+ </div>
112
+ </div>
113
+ </header>
114
+
115
+ <!-- Stats Cards -->
116
+ <div class="px-6 py-6">
117
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
118
+ <div class="bg-white rounded-xl shadow-sm p-6">
119
+ <div class="flex items-center justify-between">
120
+ <div>
121
+ <p class="text-sm text-gray-500">Total Revenue</p>
122
+ <h3 class="text-2xl font-bold mt-1">$24,780</h3>
123
+ <p class="text-sm text-green-500 mt-1">+12.5% from last month</p>
124
+ </div>
125
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
126
+ <i data-feather="trending-up"></i>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ <div class="bg-white rounded-xl shadow-sm p-6">
131
+ <div class="flex items-center justify-between">
132
+ <div>
133
+ <p class="text-sm text-gray-500">Transactions</p>
134
+ <h3 class="text-2xl font-bold mt-1">1,458</h3>
135
+ <p class="text-sm text-red-500 mt-1">-2.3% from last month</p>
136
+ </div>
137
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
138
+ <i data-feather="credit-card"></i>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ <div class="bg-white rounded-xl shadow-sm p-6">
143
+ <div class="flex items-center justify-between">
144
+ <div>
145
+ <p class="text-sm text-gray-500">Success Rate</p>
146
+ <h3 class="text-2xl font-bold mt-1">98.7%</h3>
147
+ <p class="text-sm text-green-500 mt-1">+0.8% from last month</p>
148
+ </div>
149
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
150
+ <i data-feather="check-circle"></i>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ <div class="bg-white rounded-xl shadow-sm p-6">
155
+ <div class="flex items-center justify-between">
156
+ <div>
157
+ <p class="text-sm text-gray-500">Avg. Processing</p>
158
+ <h3 class="text-2xl font-bold mt-1">1.2s</h3>
159
+ <p class="text-sm text-green-500 mt-1">-0.4s from last month</p>
160
+ </div>
161
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
162
+ <i data-feather="clock"></i>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Main Content Area -->
170
+ <div class="px-6 pb-6">
171
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
172
+ <!-- Revenue Chart -->
173
+ <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6">
174
+ <div class="flex items-center justify-between mb-6">
175
+ <h2 class="text-lg font-semibold">Revenue Overview</h2>
176
+ <div class="flex space-x-2">
177
+ <button class="px-3 py-1 text-sm bg-indigo-100 text-indigo-700 rounded-lg">Monthly</button>
178
+ <button class="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-lg">Quarterly</button>
179
+ <button class="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-lg">Yearly</button>
180
+ </div>
181
+ </div>
182
+ <canvas id="revenueChart" height="300"></canvas>
183
+ </div>
184
+
185
+ <!-- Recent Transactions -->
186
+ <div class="bg-white rounded-xl shadow-sm p-6">
187
+ <div class="flex items-center justify-between mb-6">
188
+ <h2 class="text-lg font-semibold">Recent Transactions</h2>
189
+ <button class="text-indigo-600 text-sm font-medium">View All</button>
190
+ </div>
191
+ <div class="space-y-4">
192
+ <div class="flex items-center justify-between p-3 border-b">
193
+ <div class="flex items-center space-x-3">
194
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
195
+ <i data-feather="check-circle"></i>
196
+ </div>
197
+ <div>
198
+ <p class="font-medium">Payment Received</p>
199
+ <p class="text-xs text-gray-500">#TXN-4872 • 10 min ago</p>
200
+ </div>
201
+ </div>
202
+ <div class="text-right">
203
+ <p class="font-medium">+$128.00</p>
204
+ <p class="text-xs text-green-500">Completed</p>
205
+ </div>
206
+ </div>
207
+ <div class="flex items-center justify-between p-3 border-b">
208
+ <div class="flex items-center space-x-3">
209
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
210
+ <i data-feather="credit-card"></i>
211
+ </div>
212
+ <div>
213
+ <p class="font-medium">Payment Processed</p>
214
+ <p class="text-xs text-gray-500">#TXN-4871 • 25 min ago</p>
215
+ </div>
216
+ </div>
217
+ <div class="text-right">
218
+ <p class="font-medium">+$85.50</p>
219
+ <p class="text-xs text-green-500">Completed</p>
220
+ </div>
221
+ </div>
222
+ <div class="flex items-center justify-between p-3 border-b">
223
+ <div class="flex items-center space-x-3">
224
+ <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
225
+ <i data-feather="clock"></i>
226
+ </div>
227
+ <div>
228
+ <p class="font-medium">Pending Payment</p>
229
+ <p class="text-xs text-gray-500">#TXN-4870 • 1 hour ago</p>
230
+ </div>
231
+ </div>
232
+ <div class="text-right">
233
+ <p class="font-medium">+$42.99</p>
234
+ <p class="text-xs text-yellow-500">Processing</p>
235
+ </div>
236
+ </div>
237
+ <div class="flex items-center justify-between p-3">
238
+ <div class="flex items-center space-x-3">
239
+ <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-600">
240
+ <i data-feather="x-circle"></i>
241
+ </div>
242
+ <div>
243
+ <p class="font-medium">Failed Payment</p>
244
+ <p class="text-xs text-gray-500">#TXN-4869 • 2 hours ago</p>
245
+ </div>
246
+ </div>
247
+ <div class="text-right">
248
+ <p class="font-medium">$64.20</p>
249
+ <p class="text-xs text-red-500">Declined</p>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- Gateway Status -->
258
+ <div class="px-6 pb-6">
259
+ <div class="bg-white rounded-xl shadow-sm p-6">
260
+ <h2 class="text-lg font-semibold mb-6">Gateway Status</h2>
261
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
262
+ <div class="border rounded-lg p-4">
263
+ <div class="flex items-center justify-between mb-3">
264
+ <div class="flex items-center space-x-2">
265
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
266
+ <span class="font-medium">Stripe</span>
267
+ </div>
268
+ <span class="text-sm text-gray-500">Primary</span>
269
+ </div>
270
+ <div class="flex items-center justify-between">
271
+ <div>
272
+ <p class="text-sm text-gray-500">Last Sync</p>
273
+ <p class="text-sm">2 minutes ago</p>
274
+ </div>
275
+ <div>
276
+ <p class="text-sm text-gray-500">Volume</p>
277
+ <p class="text-sm">$18,245</p>
278
+ </div>
279
+ <button class="text-indigo-600 text-sm font-medium">Configure</button>
280
+ </div>
281
+ </div>
282
+ <div class="border rounded-lg p-4">
283
+ <div class="flex items-center justify-between mb-3">
284
+ <div class="flex items-center space-x-2">
285
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
286
+ <span class="font-medium">PayPal</span>
287
+ </div>
288
+ <span class="text-sm text-gray-500">Secondary</span>
289
+ </div>
290
+ <div class="flex items-center justify-between">
291
+ <div>
292
+ <p class="text-sm text-gray-500">Last Sync</p>
293
+ <p class="text-sm">5 minutes ago</p>
294
+ </div>
295
+ <div>
296
+ <p class="text-sm text-gray-500">Volume</p>
297
+ <p class="text-sm">$4,873</p>
298
+ </div>
299
+ <button class="text-indigo-600 text-sm font-medium">Configure</button>
300
+ </div>
301
+ </div>
302
+ <div class="border rounded-lg p-4">
303
+ <div class="flex items-center justify-between mb-3">
304
+ <div class="flex items-center space-x-2">
305
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
306
+ <span class="font-medium">Bank Transfer</span>
307
+ </div>
308
+ <span class="text-sm text-gray-500">Inactive</span>
309
+ </div>
310
+ <div class="flex items-center justify-between">
311
+ <div>
312
+ <p class="text-sm text-gray-500">Last Sync</p>
313
+ <p class="text-sm">3 days ago</p>
314
+ </div>
315
+ <div>
316
+ <p class="text-sm text-gray-500">Volume</p>
317
+ <p class="text-sm">$1,662</p>
318
+ </div>
319
+ <button class="text-indigo-600 text-sm font-medium">Configure</button>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+
328
+ <script>
329
+ feather.replace();
330
+
331
+ // Toggle sidebar
332
+ document.getElementById('toggleSidebar').addEventListener('click', function() {
333
+ document.querySelector('.sidebar').classList.toggle('sidebar-collapsed');
334
+ document.querySelector('.content').classList.toggle('ml-64');
335
+ document.querySelector('.content').classList.toggle('ml-20');
336
+
337
+ const icon = this.querySelector('i');
338
+ if (icon.getAttribute('data-feather') === 'chevron-left') {
339
+ icon.setAttribute('data-feather', 'chevron-right');
340
+ } else {
341
+ icon.setAttribute('data-feather', 'chevron-left');
342
+ }
343
+ feather.replace();
344
+ });
345
+
346
+ // Revenue Chart
347
+ const revenueCtx = document.getElementById('revenueChart').getContext('2d');
348
+ const revenueChart = new Chart(revenueCtx, {
349
+ type: 'line',
350
+ data: {
351
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
352
+ datasets: [{
353
+ label: 'Revenue',
354
+ data: [8500, 10200, 9800, 11500, 12000, 14500, 16800],
355
+ backgroundColor: 'rgba(99, 102, 241, 0.1)',
356
+ borderColor: 'rgba(99, 102, 241, 1)',
357
+ borderWidth: 2,
358
+ tension: 0.4,
359
+ fill: true
360
+ }]
361
+ },
362
+ options: {
363
+ responsive: true,
364
+ plugins: {
365
+ legend: {
366
+ display: false
367
+ }
368
+ },
369
+ scales: {
370
+ y: {
371
+ beginAtZero: true,
372
+ grid: {
373
+ drawBorder: false
374
+ }
375
+ },
376
+ x: {
377
+ grid: {
378
+ display: false
379
+ }
380
+ }
381
+ }
382
+ }
383
+ });
384
+
385
+ // Simulate real-time data updates
386
+ setInterval(() => {
387
+ // Generate random data
388
+ const randomValue = Math.floor(Math.random() * 2000) + 500;
389
+
390
+ // Update stats cards
391
+ const totalRevenue = document.querySelectorAll('.text-2xl.font-bold')[0];
392
+ const currentRevenue = parseInt(totalRevenue.textContent.replace('$', '').replace(',', ''));
393
+ totalRevenue.textContent = '$' + (currentRevenue + randomValue).toLocaleString();
394
+
395
+ // Update transaction count
396
+ const transactionCount = document.querySelectorAll('.text-2xl.font-bold')[1];
397
+ const currentCount = parseInt(transactionCount.textContent.replace(',', ''));
398
+ transactionCount.textContent = (currentCount + Math.floor(Math.random() * 10) + 1).toLocaleString();
399
+
400
+ // Add a new transaction to the list
401
+ if (Math.random() > 0.7) {
402
+ const transactionsList = document.querySelector('.space-y-4');
403
+ const statuses = ['Completed', 'Processing', 'Failed'];
404
+ const icons = ['check-circle', 'clock', 'x-circle'];
405
+ const colors = ['green', 'yellow', 'red'];
406
+
407
+ const statusIndex = Math.floor(Math.random() * 3);
408
+ const amount = (Math.random() * 200 + 5).toFixed(2);
409
+ const txnId = Math.floor(Math.random() * 9000) + 1000;
410
+ const minutesAgo = Math.floor(Math.random() * 120) + 1;
411
+
412
+ const newTransaction = document.createElement('div');
413
+ newTransaction.className = 'flex items-center justify-between p-3 border-b';
414
+ newTransaction.innerHTML = `
415
+ <div class="flex items-center space-x-3">
416
+ <div class="w-10 h-10 rounded-full bg-${colors[statusIndex]}-100 flex items-center justify-center text-${colors[statusIndex]}-600">
417
+ <i data-feather="${icons[statusIndex]}"></i>
418
+ </div>
419
+ <div>
420
+ <p class="font-medium">Payment ${statuses[statusIndex]}</p>
421
+ <p class="text-xs text-gray-500">#TXN-${txnId} • ${minutesAgo} min ago</p>
422
+ </div>
423
+ </div>
424
+ <div class="text-right">
425
+ <p class="font-medium">${statusIndex < 2 ? '+' : ''}$${amount}</p>
426
+ <p class="text-xs text-${colors[statusIndex]}-500">${statuses[statusIndex]}</p>
427
+ </div>
428
+ `;
429
+
430
+ transactionsList.insertBefore(newTransaction, transactionsList.firstChild);
431
+ feather.replace();
432
+
433
+ // Remove oldest transaction if more than 4
434
+ if (transactionsList.children.length > 4) {
435
+ transactionsList.removeChild(transactionsList.lastChild);
436
+ }
437
+ }
438
+ }, 5000);
439
+ </script>
440
+ </body>
441
  </html>
settings.html ADDED
@@ -0,0 +1,751 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>PayGate Commander | Settings</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <style>
12
+ .sidebar {
13
+ transition: all 0.3s ease;
14
+ }
15
+ .sidebar-collapsed {
16
+ width: 80px;
17
+ }
18
+ .sidebar-collapsed .nav-text {
19
+ display: none;
20
+ }
21
+ .content {
22
+ transition: margin-left 0.3s ease;
23
+ }
24
+ .tab-content {
25
+ display: none;
26
+ }
27
+ .tab-content.active {
28
+ display: block;
29
+ }
30
+ </style>
31
+ </head>
32
+ <body class="bg-gray-100">
33
+ <div class="flex h-screen overflow-hidden">
34
+ <!-- Sidebar (same as index.html) -->
35
+ <div class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0">
36
+ <!-- Sidebar content same as index.html -->
37
+ <!-- ... -->
38
+ </div>
39
+
40
+ <!-- Main Content -->
41
+ <div class="content flex-1 overflow-auto">
42
+ <!-- Top Navigation -->
43
+ <header class="bg-white shadow-sm">
44
+ <div class="px-6 py-4 flex items-center justify-between">
45
+ <h1 class="text-2xl font-bold text-gray-800">Gateway Settings</h1>
46
+ <div class="flex items-center space-x-4">
47
+ <div class="relative">
48
+ <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
49
+ <input type="text" placeholder="Search settings..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
50
+ </div>
51
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center space-x-2">
52
+ <i data-feather="save" class="w-4 h-4"></i>
53
+ <span>Save Changes</span>
54
+ </button>
55
+ </div>
56
+ </div>
57
+ </header>
58
+
59
+ <!-- Settings Tabs -->
60
+ <div class="px-6 pt-6">
61
+ <div class="border-b border-gray-200">
62
+ <nav class="-mb-px flex space-x-8">
63
+ <button id="gatewayTab" class="tab-button border-indigo-500 text-indigo-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm active">Gateway Configuration</button>
64
+ <button id="securityTab" class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Security</button>
65
+ <button id="usersTab" class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Users</button>
66
+ <button id="apiTab" class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">API Settings</button>
67
+ <button id="notificationsTab" class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Notifications</button>
68
+ </nav>
69
+ </div>
70
+ </div>
71
+
72
+ <!-- Gateway Configuration Tab Content -->
73
+ <div id="gatewayContent" class="tab-content active px-6 py-6">
74
+ <div class="bg-white rounded-xl shadow-sm p-6">
75
+ <h2 class="text-lg font-semibold mb-6">Payment Gateway Settings</h2>
76
+
77
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
78
+ <!-- Stripe Configuration -->
79
+ <div class="md:col-span-2 border rounded-lg p-6">
80
+ <div class="flex items-center justify-between mb-4">
81
+ <div class="flex items-center space-x-2">
82
+ <img src="https://cdn.worldvectorlogo.com/logos/stripe-4.svg" alt="Stripe" class="h-8">
83
+ <span class="font-medium">Stripe Integration</span>
84
+ </div>
85
+ <label class="relative inline-flex items-center cursor-pointer">
86
+ <input type="checkbox" value="" class="sr-only peer" checked>
87
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
88
+ <span class="ml-3 text-sm font-medium text-gray-900">Active</span>
89
+ </label>
90
+ </div>
91
+
92
+ <div class="space-y-4">
93
+ <div>
94
+ <label class="block text-sm font-medium text-gray-700 mb-1">Publishable Key</label>
95
+ <div class="relative">
96
+ <input type="password" value="pk_test_51MZ..." class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
97
+ <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700">
98
+ <i data-feather="eye"></i>
99
+ </button>
100
+ </div>
101
+ </div>
102
+
103
+ <div>
104
+ <label class="block text-sm font-medium text-gray-700 mb-1">Secret Key</label>
105
+ <div class="relative">
106
+ <input type="password" value="sk_test_51MZ..." class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
107
+ <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700">
108
+ <i data-feather="eye"></i>
109
+ </button>
110
+ </div>
111
+ </div>
112
+
113
+ <div>
114
+ <label class="block text-sm font-medium text-gray-700 mb-1">Webhook Secret</label>
115
+ <div class="relative">
116
+ <input type="password" value="whsec_..." class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
117
+ <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700">
118
+ <i data-feather="eye"></i>
119
+ </button>
120
+ </div>
121
+ </div>
122
+
123
+ <div class="pt-4">
124
+ <label class="block text-sm font-medium text-gray-700 mb-1">Accepted Payment Methods</label>
125
+ <div class="flex flex-wrap gap-2">
126
+ <label class="inline-flex items-center">
127
+ <input type="checkbox" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
128
+ <span class="ml-2 text-sm text-gray-700">Credit Cards</span>
129
+ </label>
130
+ <label class="inline-flex items-center">
131
+ <input type="checkbox" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
132
+ <span class="ml-2 text-sm text-gray-700">Apple Pay</span>
133
+ </label>
134
+ <label class="inline-flex items-center">
135
+ <input type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
136
+ <span class="ml-2 text-sm text-gray-700">Google Pay</span>
137
+ </label>
138
+ <label class="inline-flex items-center">
139
+ <input type="checkbox" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
140
+ <span class="ml-2 text-sm text-gray-700">Bank Transfers</span>
141
+ </label>
142
+ </div>
143
+ </div>
144
+ </div>
145
+
146
+ <div class="mt-6 flex justify-end space-x-3">
147
+ <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Test Connection</button>
148
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">Save</button>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Other Gateways -->
153
+ <div class="space-y-6">
154
+ <!-- PayPal Configuration -->
155
+ <div class="border rounded-lg p-4">
156
+ <div class="flex items-center justify-between mb-3">
157
+ <div class="flex items-center space-x-2">
158
+ <img src="https://cdn.worldvectorlogo.com/logos/paypal-3.svg" alt="PayPal" class="h-6">
159
+ <span class="font-medium">PayPal</span>
160
+ </div>
161
+ <label class="relative inline-flex items-center cursor-pointer">
162
+ <input type="checkbox" value="" class="sr-only peer" checked>
163
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
164
+ </label>
165
+ </div>
166
+ <button class="w-full mt-2 px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200">Configure</button>
167
+ </div>
168
+
169
+ <!-- Bank Transfer Configuration -->
170
+ <div class="border rounded-lg p-4">
171
+ <div class="flex items-center justify-between mb-3">
172
+ <div class="flex items-center space-x-2">
173
+ <i data-feather="bank" class="text-blue-500"></i>
174
+ <span class="font-medium">Bank Transfer</span>
175
+ </div>
176
+ <label class="relative inline-flex items-center cursor-pointer">
177
+ <input type="checkbox" value="" class="sr-only peer">
178
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
179
+ </label>
180
+ </div>
181
+ <button class="w-full mt-2 px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200">Configure</button>
182
+ </div>
183
+
184
+ <!-- Add New Gateway -->
185
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 hover:bg-gray-50 cursor-pointer">
186
+ <div class="flex flex-col items-center justify-center text-gray-400">
187
+ <i data-feather="plus" class="w-6 h-6 mb-2"></i>
188
+ <span class="text-sm">Add New Gateway</span>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Security Tab Content -->
197
+ <div id="securityContent" class="tab-content px-6 py-6">
198
+ <div class="bg-white rounded-xl shadow-sm p-6">
199
+ <h2 class="text-lg font-semibold mb-6">Security Settings</h2>
200
+
201
+ <div class="space-y-6">
202
+ <!-- Two-Factor Authentication -->
203
+ <div class="border rounded-lg p-6">
204
+ <div class="flex items-start justify-between">
205
+ <div>
206
+ <h3 class="font-medium text-lg">Two-Factor Authentication</h3>
207
+ <p class="text-sm text-gray-500 mt-1">Add an extra layer of security to your account</p>
208
+ </div>
209
+ <label class="relative inline-flex items-center cursor-pointer">
210
+ <input type="checkbox" value="" class="sr-only peer">
211
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
212
+ </label>
213
+ </div>
214
+
215
+ <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
216
+ <div class="border rounded-lg p-4 text-center">
217
+ <i data-feather="smartphone" class="w-8 h-8 mx-auto text-gray-600"></i>
218
+ <h4 class="font-medium mt-2">Authenticator App</h4>
219
+ <p class="text-sm text-gray-500 mt-1">Set up using Google Authenticator or similar</p>
220
+ <button class="mt-3 px-3 py-1 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700">Set Up</button>
221
+ </div>
222
+
223
+ <div class="border rounded-lg p-4 text-center">
224
+ <i data-feather="mail" class="w-8 h-8 mx-auto text-gray-600"></i>
225
+ <h4 class="font-medium mt-2">Email Verification</h4>
226
+ <p class="text-sm text-gray-500 mt-1">Receive codes via email</p>
227
+ <button class="mt-3 px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-lg hover:bg-gray-200">Set Up</button>
228
+ </div>
229
+
230
+ <div class="border rounded-lg p-4 text-center">
231
+ <i data-feather="message-square" class="w-8 h-8 mx-auto text-gray-600"></i>
232
+ <h4 class="font-medium mt-2">SMS Verification</h4>
233
+ <p class="text-sm text-gray-500 mt-1">Receive codes via text message</p>
234
+ <button class="mt-3 px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-lg hover:bg-gray-200">Set Up</button>
235
+ </div>
236
+ </div>
237
+ </div>
238
+
239
+ <!-- Session Management -->
240
+ <div class="border rounded-lg p-6">
241
+ <div class="flex items-center justify-between mb-4">
242
+ <div>
243
+ <h3 class="font-medium text-lg">Session Management</h3>
244
+ <p class="text-sm text-gray-500 mt-1">Manage your active login sessions</p>
245
+ </div>
246
+ </div>
247
+
248
+ <div class="space-y-3">
249
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
250
+ <div class="flex items-center space-x-3">
251
+ <i data-feather="monitor" class="text-gray-500"></i>
252
+ <div>
253
+ <p class="font-medium">Chrome on Windows</p>
254
+ <p class="text-xs text-gray-500">192.168.1.1 • Active now</p>
255
+ </div>
256
+ </div>
257
+ <button class="text-red-500 hover:text-red-700">
258
+ <i data-feather="log-out"></i>
259
+ </button>
260
+ </div>
261
+
262
+ <div class="flex items-center justify-between p-3 rounded-lg">
263
+ <div class="flex items-center space-x-3">
264
+ <i data-feather="smartphone" class="text-gray-500"></i>
265
+ <div>
266
+ <p class="font-medium">Safari on iPhone</p>
267
+ <p class="text-xs text-gray-500">192.168.1.2 • 2 hours ago</p>
268
+ </div>
269
+ </div>
270
+ <button class="text-red-500 hover:text-red-700">
271
+ <i data-feather="log-out"></i>
272
+ </button>
273
+ </div>
274
+ </div>
275
+
276
+ <button class="mt-4 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 text-sm">
277
+ Log out from all devices
278
+ </button>
279
+ </div>
280
+
281
+ <!-- Password Update -->
282
+ <div class="border rounded-lg p-6">
283
+ <h3 class="font-medium text-lg mb-4">Change Password</h3>
284
+
285
+ <div class="space-y-4">
286
+ <div>
287
+ <label class="block text-sm font-medium text-gray-700 mb-1">Current Password</label>
288
+ <div class="relative">
289
+ <input type="password" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
290
+ <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700">
291
+ <i data-feather="eye"></i>
292
+ </button>
293
+ </div>
294
+ </div>
295
+
296
+ <div>
297
+ <label class="block text-sm font-medium text-gray-700 mb-1">New Password</label>
298
+ <div class="relative">
299
+ <input type="password" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
300
+ <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700">
301
+ <i data-feather="eye"></i>
302
+ </button>
303
+ </div>
304
+ </div>
305
+
306
+ <div>
307
+ <label class="block text-sm font-medium text-gray-700 mb-1">Confirm New Password</label>
308
+ <div class="relative">
309
+ <input type="password" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
310
+ <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700">
311
+ <i data-feather="eye"></i>
312
+ </button>
313
+ </div>
314
+ </div>
315
+
316
+ <div class="pt-2">
317
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
318
+ Update Password
319
+ </button>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+
327
+ <!-- Users Tab Content -->
328
+ <div id="usersContent" class="tab-content px-6 py-6">
329
+ <div class="bg-white rounded-xl shadow-sm p-6">
330
+ <h2 class="text-lg font-semibold mb-6">User Management</h2>
331
+
332
+ <div class="flex items-center justify-between mb-6">
333
+ <div class="relative w-64">
334
+ <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
335
+ <input type="text" placeholder="Search users..." class="pl-10 pr-4 py-2 border rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-indigo-500">
336
+ </div>
337
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center space-x-2">
338
+ <i data-feather="plus" class="w-4 h-4"></i>
339
+ <span>Add User</span>
340
+ </button>
341
+ </div>
342
+
343
+ <div class="overflow-x-auto">
344
+ <table class="min-w-full divide-y divide-gray-200">
345
+ <thead class="bg-gray-50">
346
+ <tr>
347
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
348
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
349
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Active</th>
350
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
351
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
352
+ </tr>
353
+ </thead>
354
+ <tbody class="bg-white divide-y divide-gray-200">
355
+ <tr class="hover:bg-gray-50">
356
+ <td class="px-6 py-4 whitespace-nowrap">
357
+ <div class="flex items-center">
358
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center">
359
+ <i data-feather="user" class="text-gray-400"></i>
360
+ </div>
361
+ <div class="ml-4">
362
+ <div class="text-sm font-medium text-gray-900">Admin User</div>
363
+ <div class="text-sm text-gray-500">admin@example.com</div>
364
+ </div>
365
+ </div>
366
+ </td>
367
+ <td class="px-6 py-4 whitespace-nowrap">
368
+ <div class="text-sm text-gray-900">Super Admin</div>
369
+ </td>
370
+ <td class="px-6 py-4 whitespace-nowrap">
371
+ <div class="text-sm text-gray-900">Just now</div>
372
+ </td>
373
+ <td class="px-6 py-4 whitespace-nowrap">
374
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
375
+ </td>
376
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
377
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</button>
378
+ <button class="text-red-600 hover:text-red-900">Remove</button>
379
+ </td>
380
+ </tr>
381
+ <!-- More user rows... -->
382
+ </tbody>
383
+ </table>
384
+ </div>
385
+
386
+ <div class="mt-6 flex items-center justify-between">
387
+ <div>
388
+ <select class="border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
389
+ <option>10 per page</option>
390
+ <option>25 per page</option>
391
+ <option>50 per page</option>
392
+ </select>
393
+ </div>
394
+ <div class="flex items-center space-x-4">
395
+ <span class="text-sm text-gray-700">Showing 1 to 5 of 5 entries</span>
396
+ <div class="flex space-x-1">
397
+ <button class="px-3 py-1 border rounded-lg bg-gray-100 text-gray-400 cursor-not-allowed">
398
+ <i data-feather="chevron-left" class="w-4 h-4"></i>
399
+ </button>
400
+ <button class="px-3 py-1 border rounded-lg bg-gray-100 text-gray-400 cursor-not-allowed">
401
+ <i data-feather="chevron-right" class="w-4 h-4"></i>
402
+ </button>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+
409
+ <!-- API Settings Tab Content -->
410
+ <div id="apiContent" class="tab-content px-6 py-6">
411
+ <div class="bg-white rounded-xl shadow-sm p-6">
412
+ <h2 class="text-lg font-semibold mb-6">API Settings</h2>
413
+
414
+ <div class="space-y-6">
415
+ <!-- API Keys -->
416
+ <div class="border rounded-lg p-6">
417
+ <div class="flex items-center justify-between mb-4">
418
+ <div>
419
+ <h3 class="font-medium text-lg">API Keys</h3>
420
+ <p class="text-sm text-gray-500 mt-1">Manage your API access keys</p>
421
+ </div>
422
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center space-x-2">
423
+ <i data-feather="plus" class="w-4 h-4"></i>
424
+ <span>Generate New Key</span>
425
+ </button>
426
+ </div>
427
+
428
+ <div class="space-y-3">
429
+ <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
430
+ <div>
431
+ <div class="flex items-center space-x-2">
432
+ <span class="font-medium">Production Key</span>
433
+ <span class="px-2 py-0.5 text-xs bg-green-100 text-green-800 rounded-full">Active</span>
434
+ </div>
435
+ <p class="text-sm text-gray-500 mt-1">Last used: 2 hours ago</p>
436
+ </div>
437
+ <div class="flex space-x-2">
438
+ <button class="p-2 text-gray-500 hover:text-gray-700">
439
+ <i data-feather="eye"></i>
440
+ </button>
441
+ <button class="p-2 text-red-500 hover:text-red-700">
442
+ <i data-feather="trash-2"></i>
443
+ </button>
444
+ </div>
445
+ </div>
446
+
447
+ <div class="flex items-center justify-between p-4 rounded-lg border">
448
+ <div>
449
+ <div class="flex items-center space-x-2">
450
+ <span class="font-medium">Test Key</span>
451
+ <span class="px-2 py-0.5 text-xs bg-yellow-100 text-yellow-800 rounded-full">Inactive</span>
452
+ </div>
453
+ <p class="text-sm text-gray-500 mt-1">Last used: 5 days ago</p>
454
+ </div>
455
+ <div class="flex space-x-2">
456
+ <button class="p-2 text-gray-500 hover:text-gray-700">
457
+ <i data-feather="eye"></i>
458
+ </button>
459
+ <button class="p-2 text-red-500 hover:text-red-700">
460
+ <i data-feather="trash-2"></i>
461
+ </button>
462
+ </div>
463
+ </div>
464
+ </div>
465
+ </div>
466
+
467
+ <!-- API Documentation -->
468
+ <div class="border rounded-lg p-6">
469
+ <div class="flex items-center justify-between mb-4">
470
+ <div>
471
+ <h3 class="font-medium text-lg">API Documentation</h3>
472
+ <p class="text-sm text-gray-500 mt-1">Learn how to integrate with our API</p>
473
+ </div>
474
+ </div>
475
+
476
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
477
+ <a href="#" class="border rounded-lg p-4 hover:bg-gray-50">
478
+ <div class="flex items-center space-x-3">
479
+ <div class="p-2 rounded-full bg-blue-100 text-blue-600">
480
+ <i data-feather="book"></i>
481
+ </div>
482
+ <div>
483
+ <h4 class="font-medium">Getting Started</h4>
484
+ <p class="text-sm text-gray-500">Learn the basics</p>
485
+ </div>
486
+ </div>
487
+ </a>
488
+
489
+ <a href="#" class="border rounded-lg p-4 hover:bg-gray-50">
490
+ <div class="flex items-center space-x-3">
491
+ <div class="p-2 rounded-full bg-purple-100 text-purple-600">
492
+ <i data-feather="code"></i>
493
+ </div>
494
+ <div>
495
+ <h4 class="font-medium">API Reference</h4>
496
+ <p class="text-sm text-gray-500">Full endpoint docs</p>
497
+ </div>
498
+ </div>
499
+ </a>
500
+
501
+ <a href="#" class="border rounded-lg p-4 hover:bg-gray-50">
502
+ <div class="flex items-center space-x-3">
503
+ <div class="p-2 rounded-full bg-green-100 text-green-600">
504
+ <i data-feather="download"></i>
505
+ </div>
506
+ <div>
507
+ <h4 class="font-medium">SDKs & Libraries</h4>
508
+ <p class="text-sm text-gray-500">Client libraries</p>
509
+ </div>
510
+ </div>
511
+ </a>
512
+ </div>
513
+ </div>
514
+
515
+ <!-- Webhooks -->
516
+ <div class="border rounded-lg p-6">
517
+ <div class="flex items-center justify-between mb-4">
518
+ <div>
519
+ <h3 class="font-medium text-lg">Webhooks</h3>
520
+ <p class="text-sm text-gray-500 mt-1">Configure your webhook endpoints</p>
521
+ </div>
522
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center space-x-2">
523
+ <i data-feather="plus" class="w-4 h-4"></i>
524
+ <span>Add Webhook</span>
525
+ </button>
526
+ </div>
527
+
528
+ <div class="overflow-x-auto">
529
+ <table class="min-w-full divide-y divide-gray-200">
530
+ <thead class="bg-gray-50">
531
+ <tr>
532
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">URL</th>
533
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Events</th>
534
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
535
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Triggered</th>
536
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
537
+ </tr>
538
+ </thead>
539
+ <tbody class="bg-white divide-y divide-gray-200">
540
+ <tr class="hover:bg-gray-50">
541
+ <td class="px-6 py-4 whitespace-nowrap">
542
+ <div class="text-sm font-medium text-gray-900">https://api.example.com/webhooks/payments</div>
543
+ </td>
544
+ <td class="px-6 py-4 whitespace-nowrap">
545
+ <div class="text-sm text-gray-900">payment.success, payment.failed</div>
546
+ </td>
547
+ <td class="px-6 py-4 whitespace-nowrap">
548
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
549
+ </td>
550
+ <td class="px-6 py-4 whitespace-nowrap">
551
+ <div class="text-sm text-gray-900">2 hours ago</div>
552
+ </td>
553
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
554
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</button>
555
+ <button class="text-red-600 hover:text-red-900">Remove</button>
556
+ </td>
557
+ </tr>
558
+ </tbody>
559
+ </table>
560
+ </div>
561
+ </div>
562
+ </div>
563
+ </div>
564
+ </div>
565
+
566
+ <!-- Notifications Tab Content -->
567
+ <div id="notificationsContent" class="tab-content px-6 py-6">
568
+ <div class="bg-white rounded-xl shadow-sm p-6">
569
+ <h2 class="text-lg font-semibold mb-6">Notification Settings</h2>
570
+
571
+ <div class="space-y-6">
572
+ <!-- Email Notifications -->
573
+ <div class="border rounded-lg p-6">
574
+ <div class="flex items-center justify-between mb-4">
575
+ <div>
576
+ <h3 class="font-medium text-lg">Email Notifications</h3>
577
+ <p class="text-sm text-gray-500 mt-1">Configure which email notifications you receive</p>
578
+ </div>
579
+ <label class="relative inline-flex items-center cursor-pointer">
580
+ <input type="checkbox" value="" class="sr-only peer" checked>
581
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
582
+ </label>
583
+ </div>
584
+
585
+ <div class="space-y-3">
586
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
587
+ <div>
588
+ <p class="font-medium">Successful Payments</p>
589
+ <p class="text-sm text-gray-500">Receive notifications for successful payments</p>
590
+ </div>
591
+ <label class="relative inline-flex items-center cursor-pointer">
592
+ <input type="checkbox" value="" class="sr-only peer" checked>
593
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
594
+ </label>
595
+ </div>
596
+
597
+ <div class="flex items-center justify-between p-3 rounded-lg">
598
+ <div>
599
+ <p class="font-medium">Failed Payments</p>
600
+ <p class="text-sm text-gray-500">Receive notifications for failed payment attempts</p>
601
+ </div>
602
+ <label class="relative inline-flex items-center cursor-pointer">
603
+ <input type="checkbox" value="" class="sr-only peer" checked>
604
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
605
+ </label>
606
+ </div>
607
+
608
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
609
+ <div>
610
+ <p class="font-medium">Refunds Issued</p>
611
+ <p class="text-sm text-gray-500">Receive notifications when refunds are processed</p>
612
+ </div>
613
+ <label class="relative inline-flex items-center cursor-pointer">
614
+ <input type="checkbox" value="" class="sr-only peer" checked>
615
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
616
+ </label>
617
+ </div>
618
+
619
+ <div class="flex items-center justify-between p-3 rounded-lg">
620
+ <div>
621
+ <p class="font-medium">Chargebacks</p>
622
+ <p class="text-sm text-gray-500">Receive notifications for chargebacks</p>
623
+ </div>
624
+ <label class="relative inline-flex items-center cursor-pointer">
625
+ <input type="checkbox" value="" class="sr-only peer" checked>
626
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
627
+ </label>
628
+ </div>
629
+ </div>
630
+ </div>
631
+
632
+ <!-- SMS Notifications -->
633
+ <div class="border rounded-lg p-6">
634
+ <div class="flex items-center justify-between mb-4">
635
+ <div>
636
+ <h3 class="font-medium text-lg">SMS Notifications</h3>
637
+ <p class="text-sm text-gray-500 mt-1">Configure which SMS notifications you receive</p>
638
+ </div>
639
+ <label class="relative inline-flex items-center cursor-pointer">
640
+ <input type="checkbox" value="" class="sr-only peer">
641
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
642
+ </label>
643
+ </div>
644
+
645
+ <div class="space-y-3">
646
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
647
+ <div>
648
+ <p class="font-medium">High-Value Payments</p>
649
+ <p class="text-sm text-gray-500">Receive SMS for payments above $1,000</p>
650
+ </div>
651
+ <label class="relative inline-flex items-center cursor-pointer">
652
+ <input type="checkbox" value="" class="sr-only peer">
653
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
654
+ </label>
655
+ </div>
656
+
657
+ <div class="flex items-center justify-between p-3 rounded-lg">
658
+ <div>
659
+ <p class="font-medium">System Alerts</p>
660
+ <p class="text-sm text-gray-500">Receive SMS for system issues</p>
661
+ </div>
662
+ <label class="relative inline-flex items-center cursor-pointer">
663
+ <input type="checkbox" value="" class="sr-only peer">
664
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
665
+ </label>
666
+ </div>
667
+ </div>
668
+
669
+ <div class="mt-6">
670
+ <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
671
+ <div class="relative">
672
+ <select class="appearance-none bg-white border rounded-l-lg pl-3 pr-8 py-2 w-24 focus:outline-none focus:ring-2 focus:ring-indigo-500">
673
+ <option>+1</option>
674
+ <option>+44</option>
675
+ <option>+61</option>
676
+ </select>
677
+ <i data-feather="chevron-down" class="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none"></i>
678
+ <input type="tel" placeholder="Phone number" class="w-full px-3 py-2 border-t border-b border-r rounded-r-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" style="margin-left: -1px;">
679
+ </div>
680
+ </div>
681
+ </div>
682
+ </div>
683
+ </div>
684
+ </div>
685
+ </div>
686
+ </div>
687
+
688
+ <script>
689
+ feather.replace();
690
+
691
+ // Toggle sidebar (same as index.html)
692
+ document.getElementById('toggleSidebar').addEventListener('click', function() {
693
+ document.querySelector('.sidebar').classList.toggle('sidebar-collapsed');
694
+ document.querySelector('.content').classList.toggle('ml-64');
695
+ document.querySelector('.content').classList.toggle('ml-20');
696
+
697
+ const icon = this.querySelector('i');
698
+ if (icon.getAttribute('data-feather') === 'chevron-left') {
699
+ icon.setAttribute('data-feather', 'chevron-right');
700
+ } else {
701
+ icon.setAttribute('data-feather', 'chevron-left');
702
+ }
703
+ feather.replace();
704
+ });
705
+
706
+ // Tab switching
707
+ const tabs = ['gateway', 'security', 'users', 'api', 'notifications'];
708
+ tabs.forEach(tab => {
709
+ const button = document.getElementById(`${tab}Tab`);
710
+ const content = document.getElementById(`${tab}Content`);
711
+
712
+ button.addEventListener('click', function() {
713
+ // Hide all tab contents
714
+ document.querySelectorAll('.tab-content').forEach(el => {
715
+ el.classList.remove('active');
716
+ });
717
+
718
+ // Remove active class from all tab buttons
719
+ document.querySelectorAll('.tab-button').forEach(el => {
720
+ el.classList.remove('active', 'border-indigo-500', 'text-indigo-600');
721
+ el.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
722
+ });
723
+
724
+ // Show selected tab content
725
+ content.classList.add('active');
726
+
727
+ // Add active class to selected tab button
728
+ this.classList.add('active', 'border-indigo-500', 'text-indigo-600');
729
+ this.classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
730
+ });
731
+ });
732
+
733
+ // Toggle password visibility
734
+ document.querySelectorAll('input[type="password"] + button').forEach(button => {
735
+ button.addEventListener('click', function() {
736
+ const input = this.previousElementSibling;
737
+ const icon = this.querySelector('i');
738
+
739
+ if (input.type === 'password') {
740
+ input.type = 'text';
741
+ icon.setAttribute('data-feather', 'eye-off');
742
+ } else {
743
+ input.type = 'password';
744
+ icon.setAttribute('data-feather', 'eye');
745
+ }
746
+ feather.replace();
747
+ });
748
+ });
749
+ </script>
750
+ </body>
751
+ </html>
transactions.html ADDED
@@ -0,0 +1,209 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>PayGate Commander | Transactions</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <style>
12
+ .sidebar {
13
+ transition: all 0.3s ease;
14
+ }
15
+ .sidebar-collapsed {
16
+ width: 80px;
17
+ }
18
+ .sidebar-collapsed .nav-text {
19
+ display: none;
20
+ }
21
+ .content {
22
+ transition: margin-left 0.3s ease;
23
+ }
24
+ </style>
25
+ </head>
26
+ <body class="bg-gray-100">
27
+ <div class="flex h-screen overflow-hidden">
28
+ <!-- Sidebar (same as index.html) -->
29
+ <div class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0">
30
+ <!-- Sidebar content same as index.html -->
31
+ <!-- ... -->
32
+ </div>
33
+
34
+ <!-- Main Content -->
35
+ <div class="content flex-1 overflow-auto">
36
+ <!-- Top Navigation -->
37
+ <header class="bg-white shadow-sm">
38
+ <div class="px-6 py-4 flex items-center justify-between">
39
+ <h1 class="text-2xl font-bold text-gray-800">Transaction Management</h1>
40
+ <div class="flex items-center space-x-4">
41
+ <div class="relative">
42
+ <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
43
+ <input type="text" placeholder="Search transactions..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
44
+ </div>
45
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center space-x-2">
46
+ <i data-feather="plus" class="w-4 h-4"></i>
47
+ <span>New Transaction</span>
48
+ </button>
49
+ </div>
50
+ </div>
51
+ </header>
52
+
53
+ <!-- Filters -->
54
+ <div class="px-6 py-4 bg-white shadow-sm border-b">
55
+ <div class="flex flex-wrap items-center justify-between gap-4">
56
+ <div class="flex items-center space-x-2">
57
+ <div class="relative">
58
+ <select class="appearance-none bg-white border rounded-lg pl-3 pr-8 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
59
+ <option>All Status</option>
60
+ <option>Completed</option>
61
+ <option>Processing</option>
62
+ <option>Failed</option>
63
+ <option>Refunded</option>
64
+ </select>
65
+ <i data-feather="chevron-down" class="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none"></i>
66
+ </div>
67
+ <div class="relative">
68
+ <select class="appearance-none bg-white border rounded-lg pl-3 pr-8 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
69
+ <option>All Gateways</option>
70
+ <option>Stripe</option>
71
+ <option>PayPal</option>
72
+ <option>Bank Transfer</option>
73
+ </select>
74
+ <i data-feather="chevron-down" class="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none"></i>
75
+ </div>
76
+ </div>
77
+ <div class="flex items-center space-x-4">
78
+ <div class="relative">
79
+ <i data-feather="calendar" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
80
+ <input type="text" placeholder="Date Range" class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
81
+ </div>
82
+ <button class="px-4 py-2 bg-white border rounded-lg hover:bg-gray-50 flex items-center space-x-2">
83
+ <i data-feather="filter" class="w-4 h-4"></i>
84
+ <span>More Filters</span>
85
+ </button>
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Transactions Table -->
91
+ <div class="px-6 py-6">
92
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden">
93
+ <div class="overflow-x-auto">
94
+ <table class="min-w-full divide-y divide-gray-200">
95
+ <thead class="bg-gray-50">
96
+ <tr>
97
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transaction ID</th>
98
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
99
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
100
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
101
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Gateway</th>
102
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
103
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
104
+ </tr>
105
+ </thead>
106
+ <tbody class="bg-white divide-y divide-gray-200">
107
+ <tr class="hover:bg-gray-50">
108
+ <td class="px-6 py-4 whitespace-nowrap">
109
+ <div class="text-sm font-medium text-indigo-600">#TXN-4872</div>
110
+ </td>
111
+ <td class="px-6 py-4 whitespace-nowrap">
112
+ <div class="flex items-center">
113
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center">
114
+ <i data-feather="user" class="text-gray-400"></i>
115
+ </div>
116
+ <div class="ml-4">
117
+ <div class="text-sm font-medium text-gray-900">John Smith</div>
118
+ <div class="text-sm text-gray-500">john@example.com</div>
119
+ </div>
120
+ </div>
121
+ </td>
122
+ <td class="px-6 py-4 whitespace-nowrap">
123
+ <div class="text-sm text-gray-900">May 15, 2023</div>
124
+ <div class="text-sm text-gray-500">10:30 AM</div>
125
+ </td>
126
+ <td class="px-6 py-4 whitespace-nowrap">
127
+ <div class="text-sm text-gray-900 font-medium">$128.00</div>
128
+ </td>
129
+ <td class="px-6 py-4 whitespace-nowrap">
130
+ <div class="flex items-center">
131
+ <div class="h-5 w-5 rounded-full bg-blue-100 flex items-center justify-center mr-2">
132
+ <i data-feather="credit-card" class="w-3 h-3 text-blue-600"></i>
133
+ </div>
134
+ <span class="text-sm text-gray-900">Stripe</span>
135
+ </div>
136
+ </td>
137
+ <td class="px-6 py-4 whitespace-nowrap">
138
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span>
139
+ </td>
140
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
141
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">View</button>
142
+ <button class="text-gray-600 hover:text-gray-900">Refund</button>
143
+ </td>
144
+ </tr>
145
+ <!-- More transaction rows... -->
146
+ </tbody>
147
+ </table>
148
+ </div>
149
+ <div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200">
150
+ <div class="flex-1 flex justify-between sm:hidden">
151
+ <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">Previous</a>
152
+ <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">Next</a>
153
+ </div>
154
+ <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
155
+ <div>
156
+ <p class="text-sm text-gray-700">
157
+ Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">24</span> results
158
+ </p>
159
+ </div>
160
+ <div>
161
+ <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
162
+ <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">
163
+ <span class="sr-only">Previous</span>
164
+ <i data-feather="chevron-left" class="h-5 w-5"></i>
165
+ </a>
166
+ <a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">1</a>
167
+ <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">2</a>
168
+ <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">3</a>
169
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
170
+ <span class="sr-only">Next</span>
171
+ <i data-feather="chevron-right" class="h-5 w-5"></i>
172
+ </a>
173
+ </nav>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+
182
+ <script>
183
+ feather.replace();
184
+
185
+ // Toggle sidebar (same as index.html)
186
+ document.getElementById('toggleSidebar').addEventListener('click', function() {
187
+ document.querySelector('.sidebar').classList.toggle('sidebar-collapsed');
188
+ document.querySelector('.content').classList.toggle('ml-64');
189
+ document.querySelector('.content').classList.toggle('ml-20');
190
+
191
+ const icon = this.querySelector('i');
192
+ if (icon.getAttribute('data-feather') === 'chevron-left') {
193
+ icon.setAttribute('data-feather', 'chevron-right');
194
+ } else {
195
+ icon.setAttribute('data-feather', 'chevron-left');
196
+ }
197
+ feather.replace();
198
+ });
199
+
200
+ // Initialize datepicker
201
+ const dateInput = document.querySelector('input[placeholder="Date Range"]');
202
+ dateInput.addEventListener('focus', function() {
203
+ // Here you would initialize a date range picker
204
+ // For example: $(this).daterangepicker();
205
+ this.type = 'date';
206
+ });
207
+ </script>
208
+ </body>
209
+ </html>