trajanoo93/orderflow-tracker-pro
0
1document.addEventListener('DOMContentLoaded', function() {2 // Initialize date filters with current month3 const today = new Date();4 const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);5 6 document.getElementById('data_inicio').valueAsDate = firstDayOfMonth;7 document.getElementById('data_fim').valueAsDate = today;8 9 // Apply filters function10 function applyFilters() {11 const busca = document.getElementById('busca').value;12 const status = document.getElementById('statusFilter').value;13 const dataInicio = document.getElementById('data_inicio').value;14 const dataFim = document.getElementById('data_fim').value;15 16 // Show loading state17 const pedidosContainer = document.getElementById('pedidosContainer');18 pedidosContainer.innerHTML = `19 <div class="flex justify-center items-center p-12">20 <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>21 </div>22 `;23 24 // Simulate API call (in a real app, this would be an actual fetch/AJAX call)25 setTimeout(() => {26 // This would be replaced with actual data from your PHP backend27 renderOrders(mockOrders);28 }, 800);29 }30 31 // Filter event listeners32 document.getElementById('busca').addEventListener('input', debounce(applyFilters, 500));33 document.getElementById('statusFilter').addEventListener('change', applyFilters);34 document.getElementById('data_inicio').addEventListener('change', applyFilters);35 document.getElementById('data_fim').addEventListener('change', applyFilters);36 37 // Observações modal38 document.addEventListener('click', function(e) {39 if (e.target.closest('.btn-observacao')) {40 const obs = e.target.closest('.btn-observacao').dataset.observacoes;41 document.getElementById('observacoesContent').textContent = obs || 'Nenhuma observação registrada.';42 document.getElementById('observacoesModal').classList.remove('hidden');43 }44 });45 46 document.getElementById('closeObservacoes').addEventListener('click', function() {47 document.getElementById('observacoesModal').classList.add('hidden');48 });49 50 // Debounce function for performance51 function debounce(func, wait) {52 let timeout;53 return function() {54 const context = this, args = arguments;55 clearTimeout(timeout);56 timeout = setTimeout(() => func.apply(context, args), wait);57 };58 }59 60 // Initial load61 applyFilters();62});63 64// Mock data for demonstration65const mockOrders = [66 {67 id: 1001,68 cliente: "Loja do João",69 cidade: "São Paulo",70 status: "Em Separação",71 status_pagamento: "Pago",72 valor_total: 1250.50,73 observacoes: "Verificar validade dos produtos",74 data_pedido: "2023-06-15"75 },76 {77 id: 1002,78 cliente: "Mercado Silva",79 cidade: "Rio de Janeiro",80 status: "Concluído",81 status_pagamento: "Pago",82 valor_total: 890.75,83 observacoes: "",84 data_pedido: "2023-06-14"85 }86];87 88function renderOrders(orders) {89 const container = document.getElementById('pedidosContainer');90 91 // For desktop92 if (window.innerWidth > 768) {93 container.innerHTML = `94 <table class="min-w-full divide-y divide-gray-200">95 <thead class="bg-gray-50">96 <tr>97 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>98 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cliente</th>99 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cidade</th>100 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>101 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pagamento</th>102 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Valor</th>103 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th>104 </tr>105 </thead>106 <tbody class="bg-white divide-y divide-gray-200">107 ${orders.map(order => `108 <tr class="hover:bg-gray-50 transition">109 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#${order.id}</td>110 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${order.cliente}</td>111 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${order.cidade}</td>112 <td class="px-6 py-4 whitespace-nowrap">113 <status-badge status="${order.status.toLowerCase().replace(' ', '-')}"></status-badge>114 </td>115 <td class="px-6 py-4 whitespace-nowrap">116 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${order.status_pagamento === 'Pago' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">117 ${order.status_pagamento}118 </span>119 </td>120 <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-primary">R$ ${order.valor_total.toFixed(2)}</td>121 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">122 <button class="btn-observacao text-accent hover:text-yellow-600 mr-3" data-observacoes="${order.observacoes}">123 <i data-feather="eye" class="w-4 h-4"></i>124 </button>125 <button class="text-secondary hover:text-green-600">126 <i data-feather="edit" class="w-4 h-4"></i>127 </button>128 </td>129 </tr>130 `).join('')}131 </tbody>132 </table>133 `;134 } else {135 // For mobile136 container.innerHTML = `137 <div class="divide-y divide-gray-200">138 ${orders.map(order => `139 <div class="order-card ${order.status.toLowerCase().replace(' ', '-')} p-4">140 <div class="flex justify-between items-start">141 <div>142 <div class="text-xs text-gray-500">Pedido #${order.id}</div>143 <h3 class="text-lg font-bold text-dark mt-1">${order.cliente}</h3>144 <div class="flex items-center text-sm text-gray-500 mt-1">145 <i data-feather="map-pin" class="w-3 h-3 mr-1"></i>146 ${order.cidade}147 </div>148 </div>149 <div class="flex flex-col items-end">150 <status-badge status="${order.status.toLowerCase().replace(' ', '-')}"></status-badge>151 <span class="mt-2 text-sm font-bold text-primary">R$ ${order.valor_total.toFixed(2)}</span>152 </div>153 </div>154 <div class="flex justify-between items-center mt-4 pt-3 border-t border-gray-100">155 <span class="text-xs px-2 py-1 rounded-full ${order.status_pagamento === 'Pago' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">156 ${order.status_pagamento}157 </span>158 <div class="flex space-x-2">159 <button class="btn-observacao p-2 rounded-full bg-gray-100 text-accent" data-observacoes="${order.observacoes}">160 <i data-feather="eye" class="w-4 h-4"></i>161 </button>162 <button class="p-2 rounded-full bg-gray-100 text-secondary">163 <i data-feather="edit" class="w-4 h-4"></i>164 </button>165 </div>166 </div>167 </div>168 `).join('')}169 </div>170 `;171 }172 173 feather.replace();174}175 176// Listen for window resize to adjust layout177window.addEventListener('resize', function() {178 if (document.getElementById('pedidosContainer')) {179 renderOrders(mockOrders);180 }181});