source: interfejs/admin.html@ 81bc7da

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

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