components/order-widget.js

class CustomOrderWidget extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.render();
        window.restaurantApp.eventBus.addEventListener('dataUpdated', () => this.render());
    }

    render() {
        const data = window.restaurantApp.getData();
        this.shadowRoot.innerHTML = `
            <style>
                .order-item {
                    transition: all 0.2s ease;
                }
                .order-item:hover {
                    background-color: rgba(99, 102, 241, 0.1);
                }
                .status-pending {
                    background-color: rgba(234, 179, 8, 0.1);
                    color: rgba(234, 179, 8, 1);
                }
                .status-preparing {
                    background-color: rgba(59, 130, 246, 0.1);
                    color: rgba(59, 130, 246, 1);
                }
                .status-ready {
                    background-color: rgba(16, 185, 129, 0.1);
                    color: rgba(16, 185, 129, 1);
                }
            </style>
            <div class="bg-gray-800 rounded-xl shadow p-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-semibold">Recent Orders</h2>
                    <button class="text-primary-500 hover:text-primary-400 flex items-center">
                        <span>View All</span>
                        <i data-feather="chevron-right" class="ml-1"></i>
                    </button>
                </div>
                <div class="space-y-3">
                    ${data.orders.slice(0, 5).map(order => `
                        <div class="order-item flex justify-between items-center p-3 rounded-lg bg-gray-700">
                            <div>
                                <p class="font-medium">Order #${order.id}</p>
                                <p class="text-sm text-gray-400">${order.items.length} items</p>
                            </div>
                            <div class="flex items-center">
                                <span class="text-xs px-2 py-1 rounded-full ${this.getStatusClass(order.status)}">
                                    ${order.status}
                                </span>
                                <span class="ml-3 font-medium">$${order.total.toFixed(2)}</span>
                            </div>
                        </div>
                    `).join('')}
                </div>
                <button class="mt-4 w-full bg-primary-500 hover:bg-primary-600 text-white py-2 px-4 rounded-lg flex items-center justify-center">
                    <i data-feather="plus" class="mr-2"></i>
                    <span>New Order</span>
                </button>
            </div>
        `;
        feather.replace();
    }

    getStatusClass(status) {
        switch(status.toLowerCase()) {
            case 'pending': return 'status-pending';
            case 'preparing': return 'status-preparing';
            case 'ready': return 'status-ready';
            default: return '';
        }
    }
}
customElements.define('custom-order-widget', CustomOrderWidget);