trajanoo93/orderflow-tracker-pro
0
1<!DOCTYPE html>2<html lang="pt-BR">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>OrderFlow Tracker Pro</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script>12 tailwind.config = {13 theme: {14 extend: {15 colors: {16 primary: '#3B82F6',17 secondary: '#10B981',18 accent: '#F59E0B',19 danger: '#EF4444',20 dark: '#1F2937',21 light: '#F9FAFB'22 }23 }24 }25 }26 </script>27</head>28<body class="bg-gray-50">29<main class="container mx-auto px-4 py-6">30 <!-- Page Header -->31 <div class="flex justify-between items-center mb-8">32 <h1 class="text-3xl font-bold text-dark flex items-center gap-3">33 <i data-feather="shopping-bag" class="text-primary"></i>34 Pedidos35 </h1>36 <button id="btnNovoPedido" class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-all">37 <i data-feather="plus"></i>38 Novo Pedido39 </button>40 </div>41 42 <!-- Filters Card -->43 <div class="bg-white rounded-xl shadow-md p-6 mb-6">44 <div class="grid grid-cols-1 md:grid-cols-4 gap-4">45 <!-- Search -->46 <div>47 <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-2">48 <i data-feather="search" class="w-4 h-4"></i>49 Buscar50 </label>51 <input type="text" id="busca" placeholder="Cliente ou ID do pedido" 52 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition">53 </div>54 55 <!-- Status Filter -->56 <div>57 <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-2">58 <i data-feather="filter" class="w-4 h-4"></i>59 Status60 </label>61 <select id="statusFilter" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition">62 <option value="">Todos</option>63 <option value="pendente">Pendente</option>64 <option value="Em Separação">Em Separação</option>65 <option value="Pedido Separado">Pedido Separado</option>66 <option value="Aguardando Cliente">Aguardando Cliente</option>67 <option value="Aguardando Retirada">Aguardando Retirada</option>68 <option value="Pagamento na Retirada">Pagamento na Retirada</option>69 <option value="Concluído">Concluído</option>70 </select>71 </div>72 73 <!-- Date Range -->74 <div class="md:col-span-2 grid grid-cols-2 gap-4">75 <div>76 <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-2">77 <i data-feather="calendar" class="w-4 h-4"></i>78 Data Início79 </label>80 <input type="date" id="data_inicio" 81 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition">82 </div>83 <div>84 <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-2">85 <i data-feather="calendar" class="w-4 h-4"></i>86 Data Fim87 </label>88 <input type="date" id="data_fim" 89 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition">90 </div>91 </div>92 </div>93 </div>94 95 <!-- Orders Container -->96 <div id="pedidosContainer" class="bg-white rounded-xl shadow-md overflow-hidden">97 <!-- Content will be loaded via AJAX -->98 <div class="flex justify-center items-center p-12">99 <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>100 </div>101 </div>102 </main>103 104 <!-- Status Badges Component -->105 <script src="components/status-badge.js"></script>106 107 <!-- Observações Modal -->108 <div id="observacoesModal" class="hidden fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center p-4">109 <div class="bg-white rounded-xl w-full max-w-lg p-6 animate-fade-in">110 <div class="flex justify-between items-center mb-4">111 <h3 class="text-xl font-bold text-dark flex items-center gap-2">112 <i data-feather="alert-circle" class="text-accent"></i>113 Observações114 </h3>115 <button id="closeObservacoes" class="text-gray-400 hover:text-gray-600">116 <i data-feather="x"></i>117 </button>118 </div>119 <div id="observacoesContent" class="bg-gray-50 p-4 rounded-lg max-h-96 overflow-y-auto"></div>120 </div>121 </div>122 123 <!-- Notification Toast -->124 <div id="notification" class="hidden fixed top-6 right-6 bg-primary text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-3">125 <i data-feather="check-circle"></i>126 <span id="notificationMessage"></span>127 </div>128 <!-- Scripts -->129<script src="script.js"></script>130 <script>131 feather.replace();132 133 // Event listeners will be added in script.js134 </script>135<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>136</body>137</html>