Spaces:
Running
Running
| // Main application script | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize tooltips | |
| const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); | |
| tooltipTriggerList.map(function (tooltipTriggerEl) { | |
| return new bootstrap.Tooltip(tooltipTriggerEl); | |
| }); | |
| // Toggle mobile menu | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (mobileMenuButton && mobileMenu) { | |
| mobileMenuButton.addEventListener('click', function() { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| } | |
| // Load orders from Wareed API | |
| async function loadOrders() { | |
| try { | |
| const response = await fetch('https://admin.wareed.com.sa/api/orders'); | |
| const orders = await response.json(); | |
| const tableBody = document.querySelector('tbody'); | |
| tableBody.innerHTML = ''; | |
| orders.forEach(order => { | |
| const row = document.createElement('tr'); | |
| row.innerHTML = ` | |
| <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">${order.id}</td> | |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">${order.customer_name}</td> | |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">${new Date(order.created_at).toLocaleDateString()}</td> | |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> | |
| <span class="inline-flex items-center rounded-full ${getStatusColor(order.status)} px-2.5 py-0.5 text-xs font-medium">${order.status}</span> | |
| </td> | |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">SAR ${order.total.toFixed(2)}</td> | |
| <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6"> | |
| <a href="/order-details.html?id=${order.id}" class="text-indigo-600 hover:text-indigo-900">View<span class="sr-only">, ${order.id}</span></a> | |
| </td> | |
| `; | |
| tableBody.appendChild(row); | |
| }); | |
| } catch (error) { | |
| console.error('Error loading orders:', error); | |
| // Show error message to user | |
| } | |
| } | |
| function getStatusColor(status) { | |
| switch(status.toLowerCase()) { | |
| case 'completed': | |
| return 'bg-green-100 text-green-800'; | |
| case 'pending': | |
| return 'bg-yellow-100 text-yellow-800'; | |
| case 'cancelled': | |
| return 'bg-red-100 text-red-800'; | |
| default: | |
| return 'bg-gray-100 text-gray-800'; | |
| } | |
| } | |
| loadOrders(); | |
| }); |