Spaces:

eubottura
/

anycoder-c8aae04a

Running

App Files Files Community

eubottura commited on 26 days ago

Commit

8a76265

verified ·

1 Parent(s): aa7c668

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +476 -495

index.html CHANGED Viewed

@@ -1,75 +1,115 @@
 <!DOCTYPE html>
-<html lang="pt-BR">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Relatório de Vendas por UTM - Shopify Integration</title>
-  <!-- Importing Remix Icon for modern UI icons -->
   <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
   <style>
     :root {
-      /* Shopify Polaris-inspired Color Palette */
-      --color-bg-surface: #ffffff;
-      --color-bg-surface-hover: #f6f6f7;
-      --color-bg-surface-subdued: #f1f2f3;
-      --color-text-primary: #202223;
-      --color-text-secondary: #6d7175;
-      --color-border: #e1e3e5;
-      --color-border-hover: #babfc3;
-      --color-primary: #008060;
-      --color-primary-hover: #004c3f;
-      --color-bg-primary: #008060;
-      --color-text-on-primary: #ffffff;
-      --color-critical: #d82c0d;
-      --color-warning: #ffc453;
-      --color-warning-bg: #fffaed;
-      --color-success: #008060;
-      --color-success-bg: #e4f5ec;
-      --color-info: #202223;
-      --font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-      --border-radius: 8px;
-      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-      --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-      --spacing-base: 16px;
-      --spacing-large: 24px;
     }
     * {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
     }
     body {
       font-family: var(--font-family);
-      background-color: var(--color-bg-surface-subdued);
-      color: var(--color-text-primary);
       line-height: 1.5;
       -webkit-font-smoothing: antialiased;
-      padding-bottom: 40px;
     }
-    /* Layout & Containers */
     .container {
-      max-width: 1200px;
       margin: 0 auto;
-      padding: 0 var(--spacing-base);
     }
     header {
-      background-color: var(--color-bg-surface);
-      border-bottom: 1px solid var(--color-border);
-      padding: var(--spacing-base) 0;
-      margin-bottom: var(--spacing-base);
       position: sticky;
       top: 0;
-      z-index: 100;
     }
     .header-content {
@@ -78,553 +118,544 @@
       align-items: center;
     }
-    h1 {
-      font-size: 1.25rem;
-      font-weight: 600;
-    }
-    .anycoder-link {
-      font-size: 0.875rem;
-      color: var(--color-text-secondary);
-      text-decoration: none;
       display: flex;
       align-items: center;
-      gap: 4px;
-      transition: color 0.2s;
     }
-    .anycoder-link:hover {
       color: var(--color-primary);
     }
-    /* Sections */
-    section {
-      background: var(--color-bg-surface);
-      border-radius: var(--border-radius);
-      box-shadow: var(--shadow-sm);
-      padding: var(--spacing-large);
-      margin-bottom: var(--spacing-base);
-      border: 1px solid var(--color-border);
-    }
-    .section-header {
-      margin-bottom: var(--spacing-base);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    h2 {
       font-size: 1.125rem;
-      font-weight: 600;
-      margin-bottom: 0.5rem;
-    }
-    /* Controls */
-    .controls {
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--spacing-base);
-      align-items: flex-end;
     }
-    .control-group {
       display: flex;
-      flex-direction: column;
-      gap: 6px;
-      flex: 1;
-      min-width: 200px;
-    }
-    label {
-      font-size: 0.875rem;
-      font-weight: 500;
-      color: var(--color-text-primary);
-    }
-    select,
-    input[type="text"],
-    input[type="password"],
-    input[type="date"] {
-      padding: 8px 12px;
-      border: 1px solid var(--color-border);
-      border-radius: 4px;
-      font-size: 1rem;
-      background-color: var(--color-bg-surface);
-      width: 100%;
-    }
-    select:focus,
-    input:focus {
-      outline: 2px solid var(--color-primary);
-      outline-offset: -1px;
-      border-color: transparent;
     }
-    /* Buttons */
     .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
-      padding: 8px 16px;
-      border-radius: 4px;
       font-weight: 500;
-      font-size: 1rem;
       cursor: pointer;
-      transition: all 0.2s;
       border: 1px solid transparent;
-      text-decoration: none;
-    }
-    .btn:disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
     }
     .btn-primary {
-      background-color: var(--color-bg-primary);
-      color: var(--color-text-on-primary);
     }
     .btn-primary:hover:not(:disabled) {
       background-color: var(--color-primary-hover);
     }
     .btn-secondary {
-      background-color: var(--color-bg-surface);
-      border-color: var(--color-border);
-      color: var(--color-text-primary);
     }
     .btn-secondary:hover:not(:disabled) {
-      background-color: var(--color-bg-surface-hover);
-      border-color: var(--color-border-hover);
     }
     .btn-ghost {
       background: transparent;
-      color: var(--color-text-secondary);
-      padding: 4px 8px;
     }
     .btn-ghost:hover {
-      background: var(--color-bg-surface-hover);
-      color: var(--color-text-primary);
     }
-    /* Banners */
-    .banner {
-      padding: 12px 16px;
-      border-radius: var(--border-radius);
-      margin-bottom: var(--spacing-base);
       display: flex;
-      gap: 12px;
-      align-items: flex-start;
-      font-size: 0.9375rem;
     }
-    .banner-warning {
-      background-color: var(--color-warning-bg);
-      color: #5c4508;
-      border: 1px solid #f0a83b;
     }
-    .banner-critical {
-      background-color: #fff1f0;
-      color: #840505;
-      border: 1px solid #d82c0d;
     }
-    .banner-info {
-      background-color: #edf7fe;
-      color: #042a46;
-      border: 1px solid #007ace;
     }
-    .banner-icon {
-      font-size: 1.25rem;
     }
-    /* Metrics Grid */
     .metrics-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-      gap: var(--spacing-base);
     }
     .metric-card {
-      padding: var(--spacing-base);
-      background-color: var(--color-bg-surface);
-      border: 1px solid var(--color-border);
-      border-radius: var(--border-radius);
     }
     .metric-label {
-      font-size: 0.875rem;
-      color: var(--color-text-secondary);
-      margin-bottom: 4px;
     }
     .metric-value {
-      font-size: 1.5rem;
-      font-weight: 600;
-      color: var(--color-text-primary);
     }
     .metric-sub {
-      font-size: 0.8125rem;
-      color: var(--color-text-secondary);
-      margin-top: 4px;
     }
-    /* Table */
-    .table-container {
       width: 100%;
       overflow-x: auto;
-      border: 1px solid var(--color-border);
-      border-radius: var(--border-radius);
     }
     table {
       width: 100%;
       border-collapse: collapse;
-      font-size: 0.9375rem;
     }
     th {
-      background-color: var(--color-bg-surface-subdued);
-      text-align: left;
-      padding: 12px 16px;
       font-weight: 600;
-      color: var(--color-text-secondary);
-      border-bottom: 1px solid var(--color-border);
-      white-space: nowrap;
       cursor: pointer;
       user-select: none;
     }
-    th:hover {
-      background-color: #e3e4e5;
-    }
     td {
-      padding: 12px 16px;
-      border-bottom: 1px solid var(--color-border);
-      vertical-align: middle;
     }
-    tr:last-child td {
-      border-bottom: none;
     }
-    tr.total-row td {
-      background-color: var(--color-bg-surface-subdued);
-      font-weight: 600;
-      border-top: 2px solid var(--color-border);
     }
-    /* Badges & Indicators */
     .badge {
-      display: inline-flex;
-      align-items: center;
-      padding: 2px 8px;
-      border-radius: 12px;
-      font-size: 0.75rem;
       font-weight: 600;
       text-transform: uppercase;
     }
-    .badge-success {
-      background-color: var(--color-success-bg);
-      color: var(--color-success);
-    }
-    .badge-warning {
-      background-color: var(--color-warning-bg);
-      color: #805b00;
     }
-    .badge-critical {
-      background-color: #fff1f0;
-      color: var(--color-critical);
     }
-    .status-bar-container {
-      width: 120px;
-      height: 8px;
-      background-color: #e1e3e5;
-      border-radius: 4px;
-      overflow: hidden;
-      display: inline-block;
-      vertical-align: middle;
     }
-    .status-bar-fill {
-      height: 100%;
-      background-color: var(--color-success);
     }
-    /* Utility */
-    .text-subdued {
-      color: var(--color-text-secondary);
     }
-    .text-strong {
-      font-weight: 600;
     }
-    .hidden {
-      display: none !important;
     }
-    /* Loading Spinner */
-    .spinner {
-      border: 3px solid rgba(0, 0, 0, 0.1);
-      width: 24px;
-      height: 24px;
       border-radius: 50%;
-      border-left-color: var(--color-primary);
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
     }
-    /* Config Section Styles */
-    .config-grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 16px;
-    }
-    .config-help {
-      font-size: 0.8rem;
-      color: var(--color-text-secondary);
-      margin-top: 4px;
-    }
-    /* Responsive adjustments */
     @media (max-width: 768px) {
-      .config-grid {
-        grid-template-columns: 1fr;
-      }
-      .controls {
-        flex-direction: column;
-        align-items: stretch;
-      }
-      .header-content {
-        flex-direction: column;
-        gap: 10px;
-        text-align: center;
-      }
     }
   </style>
 </head>
 <body>
   <header>
     <div class="container header-content">
-      <h1>Relatório Shopify: Vendas vs. Pagamentos por UTM</h1>
-      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
-        Built with anycoder <i class="ri-external-link-line"></i>
-      </a>
     </div>
   </header>
   <main class="container">
-    <!-- API Configuration Section -->
-    <section id="config-section">
-      <div class="section-header">
-        <h2>🔌 Configuração da API Shopify</h2>
-        <button id="toggle-config-btn" class="btn btn-ghost" style="font-size: 0.875rem;">
-          <i class="ri-settings-3-line"></i> Ocultar
         </button>
       </div>
-      <div id="config-form" class="config-grid">
-        <div class="control-group">
           <label for="store-name">Nome da Loja</label>
-          <input type="text" id="store-name" placeholder="ex: minha-loja (sem .myshopify.com)">
-          <p class="config-help">O nome que aparece na URL da sua admin.</p>
         </div>
-        <div class="control-group">
-          <label for="access-token">Access Token (Admin API)</label>
           <input type="password" id="access-token" placeholder="shpat_xxxxx...">
-          <p class="config-help">Token de acesso de App Customizado ou Privado.</p>
         </div>
-        <div class="control-group">
           <label for="cors-proxy">Proxy CORS (Opcional)</label>
-          <input type="text" id="cors-proxy" placeholder="https://cors-anywhere.herokuapp.com/">
-          <p class="config-help">⚠️ Necessário rodar localmente. Deixe vazio se tiver backend.</p>
         </div>
-        <div class="control-group" style="justify-content: flex-end;">
           <button id="save-config-btn" class="btn btn-primary">
-            <i class="ri-save-line"></i> Salvar Credenciais
           </button>
         </div>
       </div>
-      <div id="config-status" class="hidden banner banner-info" style="margin-top: 12px;">
-        <i class="ri-checkbox-circle-fill banner-icon"></i>
-        <span>Credenciais salvas com sucesso no navegador.</span>
-      </div>
-    </section>
-    <!-- Banner Limitação -->
-    <div id="limitation-banner" class="banner banner-warning">
-      <i class="ri-alert-fill banner-icon"></i>
-      <div>
-        <p class="text-strong">📌 Modo de Análise</p>
-        <p>Este relatório processa os pedidos retornados pela API Shopify e os agrupa pelo atributo <code>utm_content</code>.</p>
       </div>
-    </div>
-    <!-- Controles -->
-    <section id="filters-section">
-      <div class="controls">
-        <div class="control-group">
           <label for="date-range-select">Período</label>
           <select id="date-range-select">
             <option value="hoje">Hoje</option>
             <option value="ontem">Ontem</option>
             <option value="ultimos7">Últimos 7 dias</option>
             <option value="ultimos30">Últimos 30 dias</option>
-            <option value="customizado">Período customizado</option>
           </select>
         </div>
-        <div class="control-group hidden" id="custom-date-group">
-          <label for="custom-date-picker">Data Início - Fim</label>
-          <input type="date" id="custom-date-start">
-          <input type="date" id="custom-date-end" style="margin-top: 5px;">
         </div>
-        <div style="display: flex; gap: 12px; margin-top: auto;">
           <button id="refresh-button" class="btn btn-primary" disabled>
-            <i class="ri-refresh-line"></i> Buscar Dados Shopify
           </button>
           <button id="export-csv-button" class="btn btn-secondary" disabled>
-            <i class="ri-download-line"></i> Exportar CSV
           </button>
         </div>
       </div>
     </section>
-    <!-- Erro -->
-    <div id="error-banner" class="banner banner-critical hidden">
-      <i class="ri-error-warning-fill banner-icon"></i>
-      <div>
-        <p class="text-strong">Erro na Requisição</p>
-        <span id="error-message"></span>
-      </div>
-    </div>
-    <!-- Info Snapshot -->
-    <div id="last-update-info" class="hidden">
-      <div style="background: var(--color-bg-surface-subdued); padding: 12px; border-radius: 8px; border: 1px solid var(--color-border);">
-        <p class="text-strong">📅 Última Sincronização: <span id="snapshot-time"></span></p>
-        <p class="text-subdued">Dados vindos da Shopify</p>
-      </div>
     </div>
-    <!-- Dia Mudou -->
-    <div id="day-changed-banner" class="banner banner-info hidden">
-      <i class="ri-sun-fill banner-icon"></i>
-      <div>
-        <p class="text-strong">🌅 Novo dia detectado</p>
-        <p>Clique em 'Buscar Dados' para atualizar com as vendas mais recentes.</p>
-      </div>
     </div>
-    <!-- Estado Vazio Inicial -->
-    <div id="no-data-section" class="hidden" style="text-align: center; padding: 40px;">
-      <h2>Pronto para conectar</h2>
-      <p class="text-subdued" style="margin-bottom: 20px;">Configure as credenciais da Shopify acima e clique em buscar.</p>
-      <button id="initial-load-button" class="btn btn-primary">🔄 Buscar Dados Shopify</button>
     </div>
-    <!-- Novos Pedidos (Delta) -->
-    <div id="new-orders-section" class="hidden">
-      <div style="background: var(--color-bg-surface-subdued); padding: 16px; border-radius: 8px; border: 1px solid var(--color-border);">
-        <h2>🔔 Novas Vendas desde a Última Atualização</h2>
-        <div style="margin-top: 12px;">
-          <p><span class="text-strong">⏱️ Tempo desde última atualização:</span> <span id="diff-time"></span></p>
-          <div id="new-orders-content" style="margin-top: 10px;"></div>
         </div>
-        <div id="campaign-breakdown" style="margin-top: 16px;"></div>
-        <hr style="border: 0; border-top: 1px solid var(--color-border); margin: 16px 0;">
-        <button id="reset-snapshot-button" class="btn btn-secondary" style="font-size: 0.875rem;">🔄 Resetar Ponto de Partida</button>
       </div>
     </div>
-    <!-- Métricas -->
-    <section id="summary-metrics-section" class="hidden">
-      <h2>Resumo Geral</h2>
-      <div class="metrics-grid">
-        <div class="metric-card">
-          <p class="metric-label">📦 Total de Pedidos</p>
-          <p class="metric-value" id="metric-total-pedidos">0</p>
-          <p class="metric-sub" id="metric-unique-utms">0 UTMs únicos</p>
-        </div>
-        <div class="metric-card">
-          <p class="metric-label">📊 Taxa de Pagamento Geral</p>
-          <p class="metric-value" id="metric-taxa-geral">0%</p>
-          <span class="badge" id="badge-taxa-geral">-</span>
-        </div>
-        <div class="metric-card">
-          <p class="metric-label">💰 Total de Vendas</p>
-          <p class="metric-value" id="metric-total-vendas">R$ 0,00</p>
-          <p class="metric-sub">Bruto</p>
-        </div>
-        <div class="metric-card">
-          <p class="metric-label">✅ Vendas Pagas</p>
-          <p class="metric-value" id="metric-vendas-pagas">R$ 0,00</p>
-          <p class="metric-sub" id="metric-count-pagas">0 pedidos pagos</p>
-        </div>
       </div>
     </section>
-    <!-- Tabela -->
-    <section id="table-section">
       <div id="loading-state" class="hidden" style="text-align: center; padding: 40px;">
-        <div style="display: inline-block; vertical-align: middle;">
-          <div class="spinner"></div>
-        </div>
-        <h2 style="margin-top: 10px; display: inline-block; margin-left: 10px;">Conectando à Shopify...</h2>
-        <p class="text-subdued">Buscando pedidos e processando UTMs</p>
       </div>
       <div id="empty-state" class="hidden" style="text-align: center; padding: 40px;">
-        <h2>Nenhum pedido encontrado</h2>
-        <p class="text-subdued">Não há pedidos para o período selecionado ou com as UTMs esperadas.</p>
       </div>
       <div id="table-wrapper" class="hidden">
-        <div class="table-container">
-          <table id="utm-report-table">
-            <thead>
-              <tr>
-                <th onclick="app.handleSort('lastParameter')">Campanha / UTM ↕</th>
-                <th>Pagos / Total</th>
-                <th onclick="app.handleSort('clientesUnicos')">Clientes Únicos ↕</th>
-                <th onclick="app.handleSort('totalVendas')">Total Vendas ↕</th>
-                <th onclick="app.handleSort('vendasPagas')">Vendas Pagas ↕</th>
-                <th onclick="app.handleSort('taxaPagamento')">Taxa Pagamento ↕</th>
-              </tr>
-            </thead>
-            <tbody id="table-body">
-              <!-- Rows injected here -->
-            </tbody>
-          </table>
-        </div>
       </div>
     </section>
@@ -660,9 +691,8 @@
       buildUrl(startDate, endDate, pageinfo = '') {
         const baseUrl = `https://${this.config.storeName}.myshopify.com/admin/api/${this.config.apiVersion}/orders.json`;
-        // Construct query params
         const params = new URLSearchParams({
-          status: 'any', // open, closed, cancelled, any
           created_at_min: startDate,
           created_at_max: endDate,
           limit: '250'
@@ -674,11 +704,9 @@
         let finalUrl = `${baseUrl}?${params.toString()}`;
-        // Add CORS Proxy if configured
         if (this.config.corsProxy && this.config.corsProxy.trim() !== '') {
-          // Ensure proxy doesn't have double slashes if user pasted full url
           const proxy = this.config.corsProxy.replace(/\/$/, '');
-          finalUrl = `${proxy}/${finalUrl}`;
         }
         return finalUrl;
@@ -686,7 +714,7 @@
       async fetchAllOrders(startDate, endDate) {
         if (!this.config.storeName || !this.config.accessToken) {
-          throw new Error("Credenciais da Shopify não configuradas.");
         }
         let orders = [];
@@ -703,9 +731,9 @@
             });
             if (!response.ok) {
-              if (response.status === 401) throw new Error("Erro de autenticação (401). Verifique o Token.");
-              if (response.status === 404) throw new Error("Loja não encontrada (404). Verifique o nome da loja.");
-              throw new Error(`Erro na API Shopify: ${response.status} ${response.statusText}`);
             }
             const data = await response.json();
@@ -713,7 +741,6 @@
               orders = orders.concat(data.orders);
             }
-            // Check Link header for pagination
             const linkHeader = response.headers.get('Link');
             if (linkHeader) {
               const nextUrl = this.parseLinkHeader(linkHeader, 'next');
@@ -723,9 +750,8 @@
             }
           } catch (error) {
-            // Specific CORS error message
             if (error.name === 'TypeError' && error.message === 'Failed to fetch') {
-               throw new Error("Erro de bloqueio CORS. O navegador bloqueou o pedido direto. Tente usar um campo 'Proxy CORS' nas configurações ou use uma extensão como 'Allow CORS'.");
             }
             throw error;
           }
@@ -751,30 +777,26 @@
      * Main Application Logic
      */
     const app = {
-      // State
       dateRangeOption: 'hoje',
       loading: false,
       error: null,
       utmData: [],
       totalOrders: 0,
       lastUpdate: '',
-      sortColumn: 'totalPedidos',
       sortDirection: 'desc',
-      snapshot: null, // { timestamp, orderIds: Set }
       newOrdersReport: null,
       isFirstLoad: true,
       hasLoadedData: false,
-      dayChanged: false,
-      // In-memory store
       allSessionOrders: [],
-      sessionOrderIds: new Set(),
       init() {
         this.cacheDOM();
         this.bindEvents();
         this.loadInitialConfig();
         this.checkInitialView();
       },
       cacheDOM() {
@@ -799,13 +821,10 @@
           initialLoadBtn: document.getElementById('initial-load-button'),
           resetSnapshotBtn: document.getElementById('reset-snapshot-button'),
-          // Banners & Info
           limitationBanner: document.getElementById('limitation-banner'),
           errorBanner: document.getElementById('error-banner'),
           errorMsg: document.getElementById('error-message'),
-          lastUpdateInfo: document.getElementById('last-update-info'),
-          snapshotTime: document.getElementById('snapshot-time'),
-          dayChangedBanner: document.getElementById('day-changed-banner'),
           // Sections
           noDataSection: document.getElementById('no-data-section'),
@@ -829,10 +848,32 @@
           loadingState: document.getElementById('loading-state'),
           emptyState: document.getElementById('empty-state'),
           tableWrapper: document.getElementById('table-wrapper'),
-          tableBody: document.getElementById('table-body')
         };
       },
       loadInitialConfig() {
         const config = ShopifyService.loadConfig();
         if (config) {
@@ -844,16 +885,10 @@
       },
       bindEvents() {
-        // Config
         this.dom.toggleConfigBtn.addEventListener('click', () => {
           const isHidden = this.dom.configForm.classList.contains('hidden');
-          if (isHidden) {
-            this.dom.configForm.classList.remove('hidden');
-            this.dom.toggleConfigBtn.innerHTML = '<i class="ri-eye-off-line"></i> Ocultar';
-          } else {
-            this.dom.configForm.classList.add('hidden');
-            this.dom.toggleConfigBtn.innerHTML = '<i class="ri-settings-3-line"></i> Configurar';
-          }
         });
         this.dom.saveConfigBtn.addEventListener('click', () => {
@@ -862,7 +897,7 @@
           const proxy = this.dom.corsProxyInput.value.trim();
           if (!storeName || !token) {
-            alert("Por favor, preencha o nome da loja e o token de acesso.");
             return;
           }
@@ -872,7 +907,6 @@
           setTimeout(() => this.dom.configStatus.classList.add('hidden'), 3000);
         });
-        // Filters
         this.dom.dateSelect.addEventListener('change', (e) => {
           this.dateRangeOption = e.target.value;
           this.toggleCustomDateInput();
@@ -944,10 +978,9 @@
       },
       async fetchOrders() {
-        // Check config
         const config = ShopifyService.loadConfig();
         if (!config || !config.storeName || !config.accessToken) {
-          alert("Por favor, configure as credenciais da Shopify primeiro.");
           this.dom.configSection.scrollIntoView({ behavior: 'smooth' });
           return;
         }
@@ -955,74 +988,22 @@
         this.setLoading(true);
         this.error = null;
         this.dom.errorBanner.classList.add('hidden');
         const { startDate, endDate } = this.getDateRange();
         try {
-          // Fetch from Shopify API
           const fetchedOrders = await ShopifyService.fetchAllOrders(startDate, endDate);
-          // If we are just reloading "Today", we usually get the same data.
-          // To simulate "New Orders" detection, we compare with local snapshot.
-          // Logic:
-          // 1. If First Load -> Just show data.
-          // 2. If Update -> Compare IDs with snapshot to find "New" ones.
           const report = this.analyzeNewOrders(fetchedOrders, this.snapshot);
           this.newOrdersReport = report;
           const newSnapshot = this.createSnapshot(fetchedOrders);
           this.snapshot = newSnapshot;
-          this.allSessionOrders = fetchedOrders; // Replace current view with fetched data
           this.isFirstLoad = false;
           this.hasLoadedData = true;
-          this.dayChanged = false;
           this.processOrders(this.allSessionOrders);
-          this.totalOrders = this.allSessionOrders.length;
-          const now = new Date();
-          this.lastUpdate = now.toLocaleString('pt-BR');
-          this.updateUI();
-        } catch (err) {
-          console.error(err);
-          this.error = err.message || 'Erro ao carregar pedidos.';
-          this.dom.errorMsg.textContent = this.error;
-          this.dom.errorBanner.classList.remove('hidden');
-        } finally {
-          this.setLoading(false);
-        }
-      },
-      analyzeNewOrders(currentOrders, previousSnapshot) {
-        if (!previousSnapshot) return null;
-        const previousOrderIds = previousSnapshot.orderIds;
-        // Find orders in currentOrders that were NOT in previousSnapshot
-        const newOrders = currentOrders.filter((order) => !previousOrderIds.has(order.id));
-        if (newOrders.length === 0) {
-          return {
-            newOrderCount: 0,
-            newOrdersTotal: 0,
-            newOrdersPaid: 0,
-            newOrdersPaidCount: 0,
-            newOrderNumbers: [],
-            timeDifference: this.calculateTimeDifference(previousSnapshot.timestamp),
-            campaignBreakdown: []
-          };
-        }
-        const newOrdersTotal = newOrders.reduce((sum, order) => sum + parseFloat(order.total_price), 0);
-        const paidOrders = newOrders.filter((o) => o.financial_status === 'paid');
-        const newOrdersPaid = paidOrders.reduce((sum, order) => sum + parseFloat(order.total_price), 0);
-        const newOrderNumbers = newOrders.map((order) => order.name);
-        const campaignGroups = new Map();
-        newOrders.forEach((order) => {
-          const utmContent = this.getUtmContent(order);
-          if (!campaignGroups.has

 <!DOCTYPE html>
+<html lang="pt-BR" data-theme="dark">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Relatório de Vendas UTM - Pro Analytics</title>
+  <!-- Importing Inter Font -->
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <!-- Importing Remix Icon -->
   <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
   <style>
+    /* --- CSS VARIABLES & THEME CONFIGURATION --- */
     :root {
+      /* Dark Theme (Default) - Profitfy Inspired */
+      --bg-body: #09090b; /* Zinc 950 */
+      --bg-card: #18181b; /* Zinc 900 */
+      --bg-surface: #27272a; /* Zinc 800 */
+      --bg-hover: #3f3f46; /* Zinc 700 */
+      --border-color: #27272a;
+      --border-light: #3f3f46;
+      --text-primary: #f4f4f5; /* Zinc 100 */
+      --text-secondary: #a1a1aa; /* Zinc 400 */
+      --text-muted: #71717a; /* Zinc 500 */
+      --color-primary: #10b981; /* Emerald 500 */
+      --color-primary-hover: #059669;
+      --color-primary-glow: rgba(16, 185, 129, 0.2);
+      --color-accent: #8b5cf6; /* Violet */
+      --color-danger: #ef4444;
+      --color-warning: #f59e0b;
+      --color-info: #3b82f6;
+      --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.15);
+      --shadow-glow: 0 0 15px var(--color-primary-glow);
+      --radius-md: 12px;
+      --radius-sm: 8px;
+      --font-family: 'Inter', sans-serif;
+      --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }
+    [data-theme="light"] {
+      /* Light Theme */
+      --bg-body: #f4f4f5;
+      --bg-card: #ffffff;
+      --bg-surface: #e4e4e7;
+      --bg-hover: #d4d4d8;
+      --border-color: #e4e4e7;
+      --border-light: #d4d4d8;
+      --text-primary: #18181b;
+      --text-secondary: #52525b;
+      --text-muted: #a1a1aa;
+      --color-primary: #059669;
+      --color-primary-hover: #047857;
+      --color-primary-glow: rgba(5, 150, 105, 0.1);
+      --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+      --shadow-glow: none;
+    }
+    /* --- RESET & BASE --- */
     * {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
+      outline: none;
     }
     body {
       font-family: var(--font-family);
+      background-color: var(--bg-body);
+      color: var(--text-primary);
       line-height: 1.5;
       -webkit-font-smoothing: antialiased;
+      transition: background-color 0.3s ease, color 0.3s ease;
+      padding-bottom: 80px;
     }
+    a { text-decoration: none; color: inherit; }
+    ul { list-style: none; }
+    /* --- LAYOUT --- */
     .container {
+      max-width: 1280px;
       margin: 0 auto;
+      padding: 0 24px;
     }
+    /* --- HEADER --- */
     header {
+      background-color: rgba(9, 9, 11, 0.8);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border-bottom: 1px solid var(--border-color);
       position: sticky;
       top: 0;
+      z-index: 50;
+      padding: 16px 0;
+    }
+    [data-theme="light"] header {
+      background-color: rgba(255, 255, 255, 0.8);
     }
     .header-content {
       align-items: center;
     }
+    .logo-area {
       display: flex;
       align-items: center;
+      gap: 12px;
     }
+    .logo-icon {
+      font-size: 24px;
       color: var(--color-primary);
     }
+    h1 {
       font-size: 1.125rem;
+      font-weight: 700;
+      letter-spacing: -0.025em;
     }
+    .header-actions {
       display: flex;
+      gap: 16px;
+      align-items: center;
     }
+    /* --- BUTTONS & CONTROLS --- */
     .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
+      padding: 10px 20px;
+      border-radius: var(--radius-sm);
       font-weight: 500;
+      font-size: 0.875rem;
       cursor: pointer;
+      transition: var(--transition);
       border: 1px solid transparent;
+      white-space: nowrap;
     }
     .btn-primary {
+      background-color: var(--color-primary);
+      color: #ffffff;
+      box-shadow: 0 0 10px var(--color-primary-glow);
     }
     .btn-primary:hover:not(:disabled) {
       background-color: var(--color-primary-hover);
+      transform: translateY(-1px);
     }
     .btn-secondary {
+      background-color: var(--bg-surface);
+      color: var(--text-primary);
+      border: 1px solid var(--border-color);
     }
     .btn-secondary:hover:not(:disabled) {
+      background-color: var(--bg-hover);
+      border-color: var(--border-light);
     }
     .btn-ghost {
       background: transparent;
+      color: var(--text-secondary);
     }
     .btn-ghost:hover {
+      color: var(--text-primary);
+      background-color: var(--bg-hover);
     }
+    .btn-icon {
+      padding: 8px;
+      border-radius: 50%;
+    }
+    .btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      transform: none !important;
+      box-shadow: none !important;
+    }
+    /* --- THEME TOGGLE --- */
+    .theme-toggle {
+      cursor: pointer;
+      font-size: 1.25rem;
+      color: var(--text-secondary);
+      transition: var(--transition);
+    }
+    .theme-toggle:hover { color: var(--color-primary); }
+    /* --- SECTIONS & CARDS --- */
+    main {
+      padding-top: 32px;
       display: flex;
+      flex-direction: column;
+      gap: 24px;
     }
+    .card {
+      background-color: var(--bg-card);
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-md);
+      padding: 24px;
+      box-shadow: var(--shadow-card);
+      position: relative;
+      overflow: hidden;
     }
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
     }
+    .card-title {
+      font-size: 1rem;
+      font-weight: 600;
+      color: var(--text-primary);
+      display: flex;
+      align-items: center;
+      gap: 8px;
     }
+    /* --- FORMS --- */
+    .form-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 20px;
+    }
+    .input-group {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    label {
+      font-size: 0.8rem;
+      font-weight: 500;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    input, select {
+      background-color: var(--bg-body);
+      border: 1px solid var(--border-color);
+      color: var(--text-primary);
+      padding: 12px;
+      border-radius: var(--radius-sm);
+      font-size: 0.95rem;
+      transition: var(--transition);
+      width: 100%;
     }
+    input:focus, select:focus {
+      border-color: var(--color-primary);
+      box-shadow: 0 0 0 2px var(--color-primary-glow);
+    }
+    /* --- METRICS GRID --- */
     .metrics-grid {
       display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+      gap: 20px;
     }
     .metric-card {
+      background: linear-gradient(145deg, var(--bg-card), var(--bg-surface));
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius-md);
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      position: relative;
+    }
+    .metric-card::before {
+      content: '';
+      position: absolute;
+      top: 0; left: 0; width: 4px; height: 100%;
+      background-color: var(--color-primary);
+      border-top-left-radius: var(--radius-md);
+      border-bottom-left-radius: var(--radius-md);
+      opacity: 0.5;
     }
     .metric-label {
+      font-size: 0.8rem;
+      color: var(--text-secondary);
+      font-weight: 500;
     }
     .metric-value {
+      font-size: 1.75rem;
+      font-weight: 700;
+      color: var(--text-primary);
+      letter-spacing: -0.03em;
     }
     .metric-sub {
+      font-size: 0.75rem;
+      color: var(--text-muted);
     }
+    /* --- TABLE --- */
+    .table-wrapper {
       width: 100%;
       overflow-x: auto;
+      border-radius: var(--radius-sm);
+      border: 1px solid var(--border-color);
     }
     table {
       width: 100%;
       border-collapse: collapse;
+      font-size: 0.9rem;
+      white-space: nowrap;
     }
     th {
+      background-color: var(--bg-surface);
+      color: var(--text-secondary);
       font-weight: 600;
+      text-transform: uppercase;
+      font-size: 0.75rem;
+      padding: 16px;
+      text-align: left;
+      letter-spacing: 0.05em;
+      border-bottom: 1px solid var(--border-color);
       cursor: pointer;
       user-select: none;
     }
+    th:hover { color: var(--text-primary); }
     td {
+      padding: 16px;
+      border-bottom: 1px solid var(--border-color);
+      color: var(--text-primary);
     }
+    tr:last-child td { border-bottom: none; }
+    tr:hover td {
+      background-color: rgba(255, 255, 255, 0.02);
     }
+    [data-theme="light"] tr:hover td {
+      background-color: rgba(0, 0, 0, 0.02);
     }
+    .text-right { text-align: right; }
+    .text-center { text-align: center; }
+    /* --- BADGES --- */
     .badge {
+      padding: 4px 10px;
+      border-radius: 20px;
+      font-size: 0.7rem;
       font-weight: 600;
       text-transform: uppercase;
     }
+    .badge-success { background-color: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.2); }
+    .badge-warning { background-color: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.2); }
+    .badge-danger { background-color: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.2); }
+    /* --- ALERTS & BANNERS --- */
+    .alert {
+      padding: 16px;
+      border-radius: var(--radius-sm);
+      margin-bottom: 20px;
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      border: 1px solid transparent;
+      font-size: 0.9rem;
     }
+    .alert-warning {
+      background-color: rgba(245, 158, 11, 0.1);
+      border-color: rgba(245, 158, 11, 0.2);
+      color: #fbbf24;
     }
+    .alert-info {
+      background-color: rgba(59, 130, 246, 0.1);
+      border-color: rgba(59, 130, 246, 0.2);
+      color: #60a5fa;
     }
+    .alert-error {
+      background-color: rgba(239, 68, 68, 0.1);
+      border-color: rgba(239, 68, 68, 0.2);
+      color: #f87171;
     }
+    /* --- UTILITIES --- */
+    .hidden { display: none !important; }
+    .status-pill {
+      height: 6px;
+      width: 6px;
+      border-radius: 50%;
+      display: inline-block;
+      margin-right: 6px;
     }
+    .status-pill.green { background-color: var(--color-primary); box-shadow: 0 0 8px var(--color-primary); }
+    .status-pill.red { background-color: var(--color-danger); }
+    .anycoder-link {
+      font-size: 0.8rem;
+      color: var(--text-muted);
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      transition: color 0.2s;
     }
+    .anycoder-link:hover { color: var(--color-primary); }
+    /* --- ANIMATIONS --- */
+    @keyframes pulse {
+      0% { opacity: 1; }
+      50% { opacity: 0.5; }
+      100% { opacity: 1; }
     }
+    .loading-spinner {
+      width: 40px;
+      height: 40px;
+      border: 3px solid var(--bg-surface);
+      border-top-color: var(--color-primary);
       border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+      margin: 0 auto 16px;
     }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    /* --- RESPONSIVE --- */
     @media (max-width: 768px) {
+      .header-content { flex-direction: column; gap: 16px; text-align: center; }
+      .card-header { flex-direction: column; gap: 12px; align-items: flex-start; }
+      .controls { flex-direction: column; width: 100%; }
+      .controls > * { width: 100%; }
+      .form-grid { grid-template-columns: 1fr; }
     }
   </style>
 </head>
 <body>
+  <!-- Header -->
   <header>
     <div class="container header-content">
+      <div class="logo-area">
+        <i class="ri-bar-chart-box-fill logo-icon"></i>
+        <h1>UTM Analytics Pro</h1>
+      </div>
+      <div class="header-actions">
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+          Built with anycoder <i class="ri-external-link-line"></i>
+        </a>
+        <div class="theme-toggle" id="theme-toggle" title="Alternar Tema">
+          <i class="ri-sun-line" id="theme-icon"></i>
+        </div>
+      </div>
     </div>
   </header>
   <main class="container">
+    <!-- API Configuration -->
+    <section class="card" id="config-section">
+      <div class="card-header">
+        <div class="card-title">
+          <i class="ri-settings-4-line"></i> Configuração da API
+        </div>
+        <button id="toggle-config-btn" class="btn btn-ghost btn-icon">
+          <i class="ri-arrow-up-s-line"></i>
         </button>
       </div>
+      <div id="config-form" class="form-grid">
+        <div class="input-group">
           <label for="store-name">Nome da Loja</label>
+          <input type="text" id="store-name" placeholder="minha-loja">
         </div>
+        <div class="input-group">
+          <label for="access-token">Access Token</label>
           <input type="password" id="access-token" placeholder="shpat_xxxxx...">
         </div>
+        <div class="input-group">
           <label for="cors-proxy">Proxy CORS (Opcional)</label>
+          <input type="text" id="cors-proxy" placeholder="https://corsproxy.io/?">
         </div>
+        <div class="input-group" style="justify-content: flex-end;">
           <button id="save-config-btn" class="btn btn-primary">
+            <i class="ri-save-3-line"></i> Salvar Config
           </button>
         </div>
       </div>
+      <div id="config-status" class="hidden alert alert-info" style="margin-top: 16px;">
+        <i class="ri-checkbox-circle-line"></i>
+        <span>Configurações salvas com sucesso.</span>
       </div>
+    </section>
+    <!-- Filters & Controls -->
+    <section class="card" id="filters-section">
+      <div class="form-grid" style="align-items: end;">
+        <div class="input-group">
           <label for="date-range-select">Período</label>
           <select id="date-range-select">
             <option value="hoje">Hoje</option>
             <option value="ontem">Ontem</option>
             <option value="ultimos7">Últimos 7 dias</option>
             <option value="ultimos30">Últimos 30 dias</option>
+            <option value="customizado">Customizado</option>
           </select>
         </div>
+        <div class="input-group hidden" id="custom-date-group">
+          <label>Data Início - Fim</label>
+          <div style="display: flex; gap: 8px;">
+            <input type="date" id="custom-date-start">
+            <input type="date" id="custom-date-end">
+          </div>
         </div>
+        <div style="display: flex; gap: 12px; width: 100%; justify-content: flex-end;">
           <button id="refresh-button" class="btn btn-primary" disabled>
+            <i class="ri-refresh-line"></i> Buscar Dados
           </button>
           <button id="export-csv-button" class="btn btn-secondary" disabled>
+            <i class="ri-file-download-line"></i> CSV
           </button>
         </div>
       </div>
     </section>
+    <!-- Alerts -->
+    <div id="error-banner" class="alert alert-error hidden">
+      <i class="ri-error-warning-fill"></i>
+      <span id="error-message"></span>
     </div>
+    <div id="limitation-banner" class="alert alert-warning">
+      <i class="ri-information-fill"></i>
+      <span>Este relatório agrupa pedidos pelo atributo <code>utm_content</code> via API Shopify.</span>
     </div>
+    <!-- Empty State -->
+    <div id="no-data-section" class="card hidden" style="text-align: center; padding: 60px 20px;">
+      <i class="ri-database-2-line" style="font-size: 48px; color: var(--text-muted);"></i>
+      <h3 style="margin-top: 16px; color: var(--text-primary);">Aguardando Conexão</h3>
+      <p style="color: var(--text-secondary); margin-bottom: 24px;">Configure as credenciais e inicie a busca.</p>
+      <button id="initial-load-button" class="btn btn-primary">Conectar Shopify</button>
     </div>
+    <!-- New Orders Snapshot -->
+    <div id="new-orders-section" class="card hidden">
+      <div class="card-header">
+        <div class="card-title">
+          <span class="status-pill green"></span> Novo Delta Detectado
         </div>
+        <button id="reset-snapshot-button" class="btn btn-ghost" style="font-size: 0.8rem;">Resetar Base</button>
+      </div>
+      <div style="display: grid; gap: 12px;">
+        <p><strong>Tempo decorrido:</strong> <span id="diff-time" style="color: var(--text-muted);">--</span></p>
+        <div id="new-orders-content"></div>
+        <div id="campaign-breakdown"></div>
       </div>
     </div>
+    <!-- Metrics -->
+    <section id="summary-metrics-section" class="metrics-grid hidden">
+      <div class="metric-card">
+        <span class="metric-label">Total de Pedidos</span>
+        <span class="metric-value" id="metric-total-pedidos">0</span>
+        <span class="metric-sub">UTMs Únicas: <span id="metric-unique-utms">0</span></span>
+      </div>
+      <div class="metric-card">
+        <span class="metric-label">Taxa de Conversão Financeira</span>
+        <span class="metric-value" id="metric-taxa-geral">0%</span>
+        <span class="badge badge-success" id="badge-taxa-geral">OK</span>
+      </div>
+      <div class="metric-card">
+        <span class="metric-label">Faturamento Bruto</span>
+        <span class="metric-value" id="metric-total-vendas">R$ 0,00</span>
+        <span class="metric-sub">Total de pedidos</span>
+      </div>
+      <div class="metric-card">
+        <span class="metric-label">Faturamento Pago</span>
+        <span class="metric-value" id="metric-vendas-pagas" style="color: var(--color-primary);">R$ 0,00</span>
+        <span class="metric-sub" id="metric-count-pagas">0 pedidos</span>
       </div>
     </section>
+    <!-- Table Section -->
+    <section class="card" id="table-section">
+      <!-- Loading State -->
       <div id="loading-state" class="hidden" style="text-align: center; padding: 40px;">
+        <div class="loading-spinner"></div>
+        <p style="color: var(--text-secondary);">Processando dados da API...</p>
       </div>
+      <!-- Empty Data State -->
       <div id="empty-state" class="hidden" style="text-align: center; padding: 40px;">
+        <p style="color: var(--text-secondary);">Nenhum dado encontrado para este período.</p>
       </div>
+      <!-- Data Table -->
       <div id="table-wrapper" class="hidden">
+        <table id="utm-report-table">
+          <thead>
+            <tr>
+              <th onclick="app.handleSort('lastParameter')">Campanha / UTM <i class="ri-arrow-up-down-line"></i></th>
+              <th class="text-center">Pagos / Total</th>
+              <th onclick="app.handleSort('clientesUnicos')" class="text-center">Clientes <i class="ri-arrow-up-down-line"></i></th>
+              <th onclick="app.handleSort('totalVendas')" class="text-right">Total Vendas <i class="ri-arrow-up-down-line"></i></th>
+              <th onclick="app.handleSort('vendasPagas')" class="text-right">Vendas Pagas <i class="ri-arrow-up-down-line"></i></th>
+              <th onclick="app.handleSort('taxaPagamento')" class="text-right">Taxa Pagto <i class="ri-arrow-up-down-line"></i></th>
+            </tr>
+          </thead>
+          <tbody id="table-body">
+            <!-- Rows injected here -->
+          </tbody>
+        </table>
       </div>
     </section>
       buildUrl(startDate, endDate, pageinfo = '') {
         const baseUrl = `https://${this.config.storeName}.myshopify.com/admin/api/${this.config.apiVersion}/orders.json`;
         const params = new URLSearchParams({
+          status: 'any',
           created_at_min: startDate,
           created_at_max: endDate,
           limit: '250'
         let finalUrl = `${baseUrl}?${params.toString()}`;
         if (this.config.corsProxy && this.config.corsProxy.trim() !== '') {
           const proxy = this.config.corsProxy.replace(/\/$/, '');
+          finalUrl = `${proxy}${finalUrl}`;
         }
         return finalUrl;
       async fetchAllOrders(startDate, endDate) {
         if (!this.config.storeName || !this.config.accessToken) {
+          throw new Error("Credenciais não configuradas.");
         }
         let orders = [];
             });
             if (!response.ok) {
+              if (response.status === 401) throw new Error("Erro de Autenticação (401).");
+              if (response.status === 404) throw new Error("Loja não encontrada (404).");
+              throw new Error(`API Error: ${response.status}`);
             }
             const data = await response.json();
               orders = orders.concat(data.orders);
             }
             const linkHeader = response.headers.get('Link');
             if (linkHeader) {
               const nextUrl = this.parseLinkHeader(linkHeader, 'next');
             }
           } catch (error) {
             if (error.name === 'TypeError' && error.message === 'Failed to fetch') {
+               throw new Error("Erro de CORS. Use um Proxy.");
             }
             throw error;
           }
      * Main Application Logic
      */
     const app = {
       dateRangeOption: 'hoje',
       loading: false,
       error: null,
       utmData: [],
       totalOrders: 0,
       lastUpdate: '',
+      sortColumn: 'vendasPagas',
       sortDirection: 'desc',
+      snapshot: null,
       newOrdersReport: null,
       isFirstLoad: true,
       hasLoadedData: false,
       allSessionOrders: [],
       init() {
         this.cacheDOM();
         this.bindEvents();
         this.loadInitialConfig();
         this.checkInitialView();
+        this.initTheme();
       },
       cacheDOM() {
           initialLoadBtn: document.getElementById('initial-load-button'),
           resetSnapshotBtn: document.getElementById('reset-snapshot-button'),
+          // Banners
           limitationBanner: document.getElementById('limitation-banner'),
           errorBanner: document.getElementById('error-banner'),
           errorMsg: document.getElementById('error-message'),
           // Sections
           noDataSection: document.getElementById('no-data-section'),
           loadingState: document.getElementById('loading-state'),
           emptyState: document.getElementById('empty-state'),
           tableWrapper: document.getElementById('table-wrapper'),
+          tableBody: document.getElementById('table-body'),
+          // Theme
+          themeToggle: document.getElementById('theme-toggle'),
+          themeIcon: document.getElementById('theme-icon')
         };
       },
+      initTheme() {
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        this.updateThemeIcon(savedTheme);
+        this.dom.themeToggle.addEventListener('click', () => {
+          const current = document.documentElement.getAttribute('data-theme');
+          const next = current === 'dark' ? 'light' : 'dark';
+          document.documentElement.setAttribute('data-theme', next);
+          localStorage.setItem('theme', next);
+          this.updateThemeIcon(next);
+        });
+      },
+      updateThemeIcon(theme) {
+        this.dom.themeIcon.className = theme === 'dark' ? 'ri-sun-line' : 'ri-moon-line';
+      },
       loadInitialConfig() {
         const config = ShopifyService.loadConfig();
         if (config) {
       },
       bindEvents() {
         this.dom.toggleConfigBtn.addEventListener('click', () => {
           const isHidden = this.dom.configForm.classList.contains('hidden');
+          this.dom.configForm.classList.toggle('hidden');
+          this.dom.toggleConfigBtn.querySelector('i').className = isHidden ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line';
         });
         this.dom.saveConfigBtn.addEventListener('click', () => {
           const proxy = this.dom.corsProxyInput.value.trim();
           if (!storeName || !token) {
+            alert("Preencha o nome da loja e o token.");
             return;
           }
           setTimeout(() => this.dom.configStatus.classList.add('hidden'), 3000);
         });
         this.dom.dateSelect.addEventListener('change', (e) => {
           this.dateRangeOption = e.target.value;
           this.toggleCustomDateInput();
       },
       async fetchOrders() {
         const config = ShopifyService.loadConfig();
         if (!config || !config.storeName || !config.accessToken) {
+          alert("Configure as credenciais primeiro.");
           this.dom.configSection.scrollIntoView({ behavior: 'smooth' });
           return;
         }
         this.setLoading(true);
         this.error = null;
         this.dom.errorBanner.classList.add('hidden');
+        this.dom.newOrdersSection.classList.add('hidden');
         const { startDate, endDate } = this.getDateRange();
         try {
           const fetchedOrders = await ShopifyService.fetchAllOrders(startDate, endDate);
           const report = this.analyzeNewOrders(fetchedOrders, this.snapshot);
           this.newOrdersReport = report;
           const newSnapshot = this.createSnapshot(fetchedOrders);
           this.snapshot = newSnapshot;
+          this.allSessionOrders = fetchedOrders;
           this.isFirstLoad = false;
           this.hasLoadedData = true;
           this.processOrders(this.allSessionOrders);
+          this.totalOrders = this.allSessionOrders.length;