source: interfejs/admin.html@ 69f2a41

finki-main main
Last change on this file since 69f2a41 was 69f2a41, checked in by Klimentina Efremova <klimentina08642@…>, 7 months ago

Initial commit
  • Property mode set to 100644
File size: 13.0 KB
RevLine 
[69f2a41]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>Admin Dashboard - Handcraft Marketplace</title>
7 <link rel="stylesheet" href="style.css">
8</head>
9<body>
10<header>
11 <div class="logo-container">
12 <img src="../images/administrative/logo.jpg" alt="Handcraft Marketplace Logo" onerror="this.style.display='none'">
13 <h1>🎨 Handcraft Marketplace</h1>
14 </div>
15 <nav>
16 <ul>
17 <li><a href="index.html">Home</a></li>
18 <li><a href="products.html">Products</a></li>
19 <li><a href="#" id="dashboard-link" class="active">Admin</a></li>
20 </ul>
21 </nav>
22</header>
23
24<main>
25 <div class="dashboard-header">
26 <h2>Admin Dashboard</h2>
27 <p>Welcome, <span id="admin-name">Administrator</span>!</p>
28 </div>
29
30 <div class="dashboard-stats">
31 <div class="stat-card pink">
32 <h3>Total Users</h3>
33 <div class="stat-number" id="total-users">0</div>
34 </div>
35 <div class="stat-card blue">
36 <h3>Total Stores</h3>
37 <div class="stat-number" id="total-stores">0</div>
38 </div>
39 <div class="stat-card">
40 <h3>Total Orders</h3>
41 <div class="stat-number" id="total-orders">0</div>
42 </div>
43 <div class="stat-card pink">
44 <h3>Total Products</h3>
45 <div class="stat-number" id="total-products">0</div>
46 </div>
47 </div>
48
49 <div class="tabs">
50 <button class="tab-btn active" data-tab="users">Users</button>
51 <button class="tab-btn" data-tab="stores">Stores</button>
52 <button class="tab-btn" data-tab="orders">Orders</button>
53 <button class="tab-btn" data-tab="reports">Reports</button>
54 <button class="tab-btn" data-tab="audit">Audit Log</button>
55 </div>
56
57 <!-- Users Tab -->
58 <div id="users-tab" class="tab-content active">
59 <div class="dashboard-section">
60 <h3>User Management</h3>
61 <div class="table-responsive">
62 <table id="users-table">
63 <thead>
64 <tr>
65 <th>ID</th>
66 <th>Name</th>
67 <th>Email</th>
68 <th>Type</th>
69 <th>Actions</th>
70 </tr>
71 </thead>
72 <tbody id="users-list">
73 <tr><td colspan="5" class="loading">Loading users...</td></tr>
74 </tbody>
75 </table>
76 </div>
77 </div>
78 </div>
79
80 <!-- Stores Tab -->
81 <div id="stores-tab" class="tab-content">
82 <div class="dashboard-section">
83 <h3>Store Management</h3>
84 <div class="table-responsive">
85 <table id="stores-table">
86 <thead>
87 <tr>
88 <th>Store ID</th>
89 <th>Name</th>
90 <th>Email</th>
91 <th>Rating</th>
92 <th>Actions</th>
93 </tr>
94 </thead>
95 <tbody id="stores-list">
96 <tr><td colspan="5" class="loading">Loading stores...</td></tr>
97 </tbody>
98 </table>
99 </div>
100 </div>
101 </div>
102
103 <!-- Orders Tab -->
104 <div id="orders-tab" class="tab-content">
105 <div class="dashboard-section">
106 <h3>All Orders</h3>
107 <div class="table-responsive">
108 <table id="orders-table">
109 <thead>
110 <tr>
111 <th>Order #</th>
112 <th>Client</th>
113 <th>Store</th>
114 <th>Date</th>
115 <th>Status</th>
116 <th>Total</th>
117 </tr>
118 </thead>
119 <tbody id="orders-list">
120 <tr><td colspan="6" class="loading">Loading orders...</td></tr>
121 </tbody>
122 </table>
123 </div>
124 </div>
125 </div>
126
127 <!-- Reports Tab -->
128 <div id="reports-tab" class="tab-content">
129 <div class="dashboard-section">
130 <h3>System Reports</h3>
131 <div class="form-group">
132 <label for="report-type">Report Type</label>
133 <select id="report-type">
134 <option value="users">User Registration Report</option>
135 <option value="stores">Store Performance Report</option>
136 <option value="sales">Sales Report</option>
137 <option value="revenue">Revenue Report</option>
138 </select>
139 </div>
140 <div class="form-row">
141 <div class="form-group">
142 <label for="report-start">Start Date</label>
143 <input type="date" id="report-start">
144 </div>
145 <div class="form-group">
146 <label for="report-end">End Date</label>
147 <input type="date" id="report-end">
148 </div>
149 </div>
150 <button id="generate-report" class="btn-primary">Generate Report</button>
151 <div id="report-results" style="margin-top: 2rem;"></div>
152 </div>
153 </div>
154
155 <!-- Audit Log Tab -->
156 <div id="audit-tab" class="tab-content">
157 <div class="dashboard-section">
158 <h3>Audit Log</h3>
159 <div class="table-responsive">
160 <table id="audit-table">
161 <thead>
162 <tr>
163 <th>Timestamp</th>
164 <th>User</th>
165 <th>Action</th>
166 <th>Resource</th>
167 <th>Details</th>
168 <th>IP Address</th>
169 </tr>
170 </thead>
171 <tbody id="audit-list">
172 <tr><td colspan="6" class="loading">Loading audit log...</td></tr>
173 </tbody>
174 </table>
175 </div>
176 </div>
177 </div>
178</main>
179
180<footer>
181 <div class="footer-content">
182 <div class="footer-section">
183 <h3>Handcraft Marketplace</h3>
184 <p>Admin Panel</p>
185 </div>
186 <div class="footer-section">
187 <h3>Quick Links</h3>
188 <ul>
189 <li><a href="index.html">Home</a></li>
190 <li><a href="products.html">Products</a></li>
191 </ul>
192 </div>
193 </div>
194 <div class="footer-bottom">
195 <p>&copy; 2025 Handcraft Marketplace. All rights reserved.</p>
196 </div>
197</footer>
198
199<script src="script.js"></script>
200<script>
201 document.addEventListener('DOMContentLoaded', async () => {
202 const user = await loadUserData();
203 if (!user || user.userType !== 'admin') {
204 window.location.href = 'index.html';
205 return;
206 }
207
208 document.getElementById('admin-name').textContent = user.username || 'Administrator';
209
210 // Tab switching
211 document.querySelectorAll('.tab-btn').forEach(btn => {
212 btn.addEventListener('click', () => {
213 document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
214 document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
215 btn.classList.add('active');
216 document.getElementById(`${btn.dataset.tab}-tab`).classList.add('active');
217
218 // Load data for the selected tab
219 switch(btn.dataset.tab) {
220 case 'users':
221 loadUsers();
222 break;
223 case 'stores':
224 loadStores();
225 break;
226 case 'orders':
227 loadAllOrders();
228 break;
229 case 'audit':
230 loadAuditLog();
231 break;
232 }
233 });
234 });
235
236 // Load initial data
237 loadStats();
238 loadUsers();
239
240 // Report generation
241 document.getElementById('generate-report').addEventListener('click', generateReport);
242 });
243
244 async function loadStats() {
245 try {
246 const [usersRes, storesRes, ordersRes, productsRes] = await Promise.all([
247 fetch('/api/all-users'),
248 fetch('/api/stores'),
249 fetch('/api/all-orders'),
250 fetch('/api/products')
251 ]);
252
253 const usersData = await usersRes.json();
254 const storesData = await storesRes.json();
255 const ordersData = await ordersRes.json();
256 const productsData = await productsRes.json();
257
258 document.getElementById('total-users').textContent = usersData.success ? usersData.users.length : 0;
259 document.getElementById('total-stores').textContent = storesData.success ? storesData.stores.length : 0;
260 document.getElementById('total-orders').textContent = ordersData.success ? ordersData.orders.length : 0;
261 document.getElementById('total-products').textContent = productsData.success ? productsData.products.length : 0;
262 } catch (error) {
263 console.error('Error loading stats:', error);
264 }
265 }
266
267 async function loadUsers() {
268 try {
269 const response = await fetch('/api/all-users');
270 const data = await response.json();
271
272 const tbody = document.getElementById('users-list');
273 if (data.success && data.users.length > 0) {
274 tbody.innerHTML = data.users.map(user => `
275 <tr>
276 <td>${user.id || user.client_id || 'N/A'}</td>
277 <td>${user.firstName || user.first_name || user.username || 'N/A'} ${user.lastName || user.last_name || ''}</td>
278 <td>${user.email || 'N/A'}</td>
279 <td><span class="status-badge status-${user.user_type || user.userType || 'unknown'}">${user.user_type || user.userType || 'unknown'}</span></td>
280 <td>
281 <button class="btn-small" onclick="viewUser('${user.id || user.client_id}')">View</button>
282 </td>
283 </tr>
284 `).join('');
285 } else {
286 tbody.innerHTML = '<tr><td colspan="5">No users found</td></tr>';
287 }
288 } catch (error) {
289 console.error('Error loading users:', error);
290 document.getElementById('users-list').innerHTML = '<tr><td colspan="5">Error loading users</td></tr>';
291 }
292 }
293
294 async function loadStores() {
295 try {
296 const response = await fetch('/api/stores');
297 const data = await response.json();
298
299 const tbody = document.getElementById('stores-list');
300 if (data.success && data.stores.length > 0) {
301 tbody.innerHTML = data.stores.map(store => `
302 <tr>
303 <td>${store.store_id}</td>
304 <td>${store.name}</td>
305 <td>${store.store_email}</td>
306 <td>${store.rating || '0.0'}</td>
307 <td>
308 <button class="btn-small" onclick="viewStore('${store.store_id}')">View</button>
309 </td>
310 </tr>
311 `).join('');
312 } else {
313 tbody.innerHTML = '<tr><td colspan="5">No stores found</td></tr>';
314 }
315 } catch (error) {
316 console.error('Error loading stores:', error);
317 document.getElementById('stores-list').innerHTML = '<tr><td colspan="5">Error loading stores</td></tr>';
318 }
319 }
320
321 async function loadAllOrders() {
322 try {
323 const response = await fetch('/api/all-orders');
324 const data = await response.json();
325
326 const tbody = document.getElementById('orders-list');
327 if (data.success && data.orders.length > 0) {
328 tbody.innerHTML = data.orders.map(order => `
329 <tr>
330 <td>${order.order_num}</td>
331 <td>${order.first_name} ${order.last_name}</td>
332 <td>${order.store_name}</td>
333 <td>${new Date(order.order_date).toLocaleDateString()}</td>
334 <td><span class="status-badge status-${order.status}">${order.status}</span></td>
335 <td>$${parseFloat(order.total || 0).toFixed(2)}</td>
336 </tr>
337 `).join('');
338 } else {
339 tbody.innerHTML = '<tr><td colspan="6">No orders found</td></tr>';
340 }
341 } catch (error) {
342 console.error('Error loading orders:', error);
343 document.getElementById('orders-list').innerHTML = '<tr><td colspan="6">Error loading orders</td></tr>';
344 }
345 }
346
347 async function loadAuditLog() {
348 // This would need a separate API endpoint
349 document.getElementById('audit-list').innerHTML = '<tr><td colspan="6">Audit log feature coming soon</td></tr>';
350 }
351
352 async function generateReport() {
353 const type = document.getElementById('report-type').value;
354 const start = document.getElementById('report-start').value;
355 const end = document.getElementById('report-end').value;
356
357 if (!start || !end) {
358 alert('Please select start and end dates');
359 return;
360 }
361
362 // Mock report generation
363 document.getElementById('report-results').innerHTML = `
364 <div class="dashboard-section">
365 <h4>Generated Report: ${type}</h4>
366 <p>Period: ${start} to ${end}</p>
367 <div class="loading">Generating report...</div>
368 </div>
369 `;
370
371 // Simulate report generation
372 setTimeout(() => {
373 document.getElementById('report-results').innerHTML = `
374 <div class="dashboard-section">
375 <h4>Report Results</h4>
376 <p><strong>Total Records:</strong> 42</p>
377 <p><strong>Summary:</strong> Sample report data for demonstration</p>
378 <button class="btn-small" onclick="downloadReport()">Download Report</button>
379 </div>
380 `;
381 }, 1500);
382 }
383
384 window.viewUser = (userId) => {
385 alert(`View user ${userId} - Feature coming soon`);
386 };
387
388 window.viewStore = (storeId) => {
389 alert(`View store ${storeId} - Feature coming soon`);
390 };
391
392 window.downloadReport = () => {
393 alert('Report download feature coming soon');
394 };
395</script>
396</body>
397</html>
Note: See TracBrowser for help on using the repository browser.