Hugging Face's logo

Spaces:
Xcronious
/
chipflow-commander
Running

App Files Community
Xcronious commited on
Commit
f93b226
·
verified ·
1 Parent(s): 093a961

oke sekarang tolong selesaikan semua isi dari admin dashboard

Browse files
Files changed (2) hide show
  1. admin_dashboard.html +223 -0
  2. admin_login.html +10 -2
admin_dashboard.html ADDED
@@ -0,0 +1,223 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>ChipFlow Commander - Admin Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ </head>
11
+ <body class="bg-gray-100">
12
+ <div class="flex h-screen">
13
+ <!-- Sidebar -->
14
+ <div class="w-64 bg-gray-800 text-white">
15
+ <div class="p-4 border-b border-gray-700">
16
+ <h1 class="text-xl font-bold">ChipFlow Commander</h1>
17
+ <p class="text-sm text-gray-400">Admin Dashboard</p>
18
+ </div>
19
+ <nav class="mt-4">
20
+ <a href="#" class="block py-2 px-4 bg-gray-700 text-white">Dashboard</a>
21
+ <a href="#" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">Users</a>
22
+ <a href="#" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">Transactions</a>
23
+ <a href="#" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">Chips Management</a>
24
+ <a href="#" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">Settings</a>
25
+ <a href="/index.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700 mt-8">Back to Home</a>
26
+ </nav>
27
+ </div>
28
+
29
+ <!-- Main Content -->
30
+ <div class="flex-1 overflow-auto">
31
+ <header class="bg-white shadow-sm p-4">
32
+ <div class="flex justify-between items-center">
33
+ <h2 class="text-xl font-semibold text-gray-800">Dashboard Overview</h2>
34
+ <div class="flex items-center space-x-4">
35
+ <span class="text-gray-600">Admin</span>
36
+ <div class="w-8 h-8 bg-blue-500 rounded-full"></div>
37
+ </div>
38
+ </div>
39
+ </header>
40
+
41
+ <main class="p-6">
42
+ <!-- Stats Cards -->
43
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
44
+ <div class="bg-white rounded-lg shadow p-6">
45
+ <div class="flex items-center">
46
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
47
+ <i data-feather="users"></i>
48
+ </div>
49
+ <div class="ml-4">
50
+ <p class="text-sm font-medium text-gray-500">Total Users</p>
51
+ <p class="text-2xl font-semibold text-gray-800">1,248</p>
52
+ </div>
53
+ </div>
54
+ </div>
55
+ <div class="bg-white rounded-lg shadow p-6">
56
+ <div class="flex items-center">
57
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
58
+ <i data-feather="dollar-sign"></i>
59
+ </div>
60
+ <div class="ml-4">
61
+ <p class="text-sm font-medium text-gray-500">Today's Revenue</p>
62
+ <p class="text-2xl font-semibold text-gray-800">$12,846</p>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ <div class="bg-white rounded-lg shadow p-6">
67
+ <div class="flex items-center">
68
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
69
+ <i data-feather="activity"></i>
70
+ </div>
71
+ <div class="ml-4">
72
+ <p class="text-sm font-medium text-gray-500">Active Sessions</p>
73
+ <p class="text-2xl font-semibold text-gray-800">342</p>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ <div class="bg-white rounded-lg shadow p-6">
78
+ <div class="flex items-center">
79
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
80
+ <i data-feather="alert-circle"></i>
81
+ </div>
82
+ <div class="ml-4">
83
+ <p class="text-sm font-medium text-gray-500">Pending Issues</p>
84
+ <p class="text-2xl font-semibold text-gray-800">8</p>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Charts -->
91
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
92
+ <div class="bg-white rounded-lg shadow p-6">
93
+ <h3 class="text-lg font-medium text-gray-800 mb-4">Revenue Overview</h3>
94
+ <canvas id="revenueChart" height="250"></canvas>
95
+ </div>
96
+ <div class="bg-white rounded-lg shadow p-6">
97
+ <h3 class="text-lg font-medium text-gray-800 mb-4">User Activity</h3>
98
+ <canvas id="activityChart" height="250"></canvas>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Recent Transactions -->
103
+ <div class="bg-white rounded-lg shadow mt-6">
104
+ <div class="p-6 border-b border-gray-200">
105
+ <h3 class="text-lg font-medium text-gray-800">Recent Transactions</h3>
106
+ </div>
107
+ <div class="overflow-x-auto">
108
+ <table class="min-w-full divide-y divide-gray-200">
109
+ <thead class="bg-gray-50">
110
+ <tr>
111
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
112
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
113
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
114
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
115
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
116
+ </tr>
117
+ </thead>
118
+ <tbody class="bg-white divide-y divide-gray-200">
119
+ <tr>
120
+ <td class="px-6 py-4 whitespace-nowrap">#TRX-78945</td>
121
+ <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
122
+ <td class="px-6 py-4 whitespace-nowrap">$125.00</td>
123
+ <td class="px-6 py-4 whitespace-nowrap">Top Up</td>
124
+ <td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Completed</span></td>
125
+ </tr>
126
+ <tr>
127
+ <td class="px-6 py-4 whitespace-nowrap">#TRX-78944</td>
128
+ <td class="px-6 py-4 whitespace-nowrap">Jane Smith</td>
129
+ <td class="px-6 py-4 whitespace-nowrap">$75.00</td>
130
+ <td class="px-6 py-4 whitespace-nowrap">Withdrawal</td>
131
+ <td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Pending</span></td>
132
+ </tr>
133
+ <tr>
134
+ <td class="px-6 py-4 whitespace-nowrap">#TRX-78943</td>
135
+ <td class="px-6 py-4 whitespace-nowrap">Robert Johnson</td>
136
+ <td class="px-6 py-4 whitespace-nowrap">$200.00</td>
137
+ <td class="px-6 py-4 whitespace-nowrap">Top Up</td>
138
+ <td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Completed</span></td>
139
+ </tr>
140
+ <tr>
141
+ <td class="px-6 py-4 whitespace-nowrap">#TRX-78942</td>
142
+ <td class="px-6 py-4 whitespace-nowrap">Emily Davis</td>
143
+ <td class="px-6 py-4 whitespace-nowrap">$150.00</td>
144
+ <td class="px-6 py-4 whitespace-nowrap">Withdrawal</td>
145
+ <td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">Rejected</span></td>
146
+ </tr>
147
+ </tbody>
148
+ </table>
149
+ </div>
150
+ </div>
151
+ </main>
152
+ </div>
153
+ </div>
154
+
155
+ <script>
156
+ // Initialize feather icons
157
+ feather.replace();
158
+
159
+ // Charts initialization
160
+ document.addEventListener('DOMContentLoaded', function() {
161
+ // Revenue Chart
162
+ const revenueCtx = document.getElementById('revenueChart').getContext('2d');
163
+ new Chart(revenueCtx, {
164
+ type: 'line',
165
+ data: {
166
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
167
+ datasets: [{
168
+ label: 'Revenue',
169
+ data: [12000, 19000, 3000, 5000, 2000, 3000, 45000],
170
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
171
+ borderColor: 'rgba(59, 130, 246, 1)',
172
+ borderWidth: 2,
173
+ tension: 0.4,
174
+ fill: true
175
+ }]
176
+ },
177
+ options: {
178
+ responsive: true,
179
+ plugins: {
180
+ legend: {
181
+ display: false
182
+ }
183
+ },
184
+ scales: {
185
+ y: {
186
+ beginAtZero: true
187
+ }
188
+ }
189
+ }
190
+ });
191
+
192
+ // Activity Chart
193
+ const activityCtx = document.getElementById('activityChart').getContext('2d');
194
+ new Chart(activityCtx, {
195
+ type: 'bar',
196
+ data: {
197
+ labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
198
+ datasets: [{
199
+ label: 'Active Users',
200
+ data: [320, 150, 280, 400, 350, 420, 380],
201
+ backgroundColor: 'rgba(124, 58, 237, 0.7)',
202
+ borderColor: 'rgba(124, 58, 237, 1)',
203
+ borderWidth: 1
204
+ }]
205
+ },
206
+ options: {
207
+ responsive: true,
208
+ plugins: {
209
+ legend: {
210
+ display: false
211
+ }
212
+ },
213
+ scales: {
214
+ y: {
215
+ beginAtZero: true
216
+ }
217
+ }
218
+ }
219
+ });
220
+ });
221
+ </script>
222
+ </body>
223
+ </html>
admin_login.html CHANGED
@@ -24,7 +24,6 @@
24
  <label class="block text-gray-700 mb-2">Password</label>
25
  <input type="password" class="w-full px-3 py-2 border rounded-lg" placeholder="••••••••" required>
26
  </div>
27
-
28
  <button type="submit" class="w-full bg-gray-800 hover:bg-gray-900 text-white py-3 px-4 rounded-lg font-bold transition">
29
  Login
30
  </button>
@@ -32,8 +31,17 @@
32
 
33
  <div class="mt-6 text-center text-sm text-gray-500">
34
  <p>Forgot password? <a href="#" class="text-blue-600">Reset here</a></p>
 
35
  </div>
36
- </div>
 
 
 
 
 
 
 
 
37
  </div>
38
  </body>
39
  </html>
 
24
  <label class="block text-gray-700 mb-2">Password</label>
25
  <input type="password" class="w-full px-3 py-2 border rounded-lg" placeholder="••••••••" required>
26
  </div>
 
27
  <button type="submit" class="w-full bg-gray-800 hover:bg-gray-900 text-white py-3 px-4 rounded-lg font-bold transition">
28
  Login
29
  </button>
 
31
 
32
  <div class="mt-6 text-center text-sm text-gray-500">
33
  <p>Forgot password? <a href="#" class="text-blue-600">Reset here</a></p>
34
+ <p class="mt-2"><a href="/index.html" class="text-blue-600">← Back to Home</a></p>
35
  </div>
36
+
37
+ <script>
38
+ document.getElementById('adminLoginForm').addEventListener('submit', function(e) {
39
+ e.preventDefault();
40
+ // In a real app, you would validate credentials here
41
+ window.location.href = '/admin_dashboard.html';
42
+ });
43
+ </script>
44
+ </div>
45
  </div>
46
  </body>
47
  </html>