Cashouts System

<aside class="sidebar">
  <button class="role-btn operator active">Submit a Cashout</button>
  <button class="role-btn supervisor">🔍 Review a Cashout</button>
  <button class="role-btn rules">📜 Cashout Rules</button>
  <button class="role-btn leaderboard">🏆 Leaderboard</button>
  <button class="role-btn stats">📊 Stats</button>
  <button class="role-btn" id="manageTeamBtn" style="display: none;">👥 Manage Team</button>
</aside>

// 1. Form submission captures data
cashoutPendiente = {
  operationCode: document.getElementById('operationCode').value,
  operatorName: currentUser.fullName, // From JWT
  company: document.getElementById('company').value,
  observacion: ""
};

// 2. Optional observation modal
document.getElementById('observacionModal').style.display = 'flex';

// 3. Submit to API
await apiFetch(`/cashouts`, {
  method: "POST",
  body: JSON.stringify(cashoutPendiente)
});

// 4. Success notification
document.getElementById('operatorSuccess').style.display = 'block';
showNotification("¡Cash out enviado correctamente!", "success");

function iniciarAutoRefresh() {
  if (autoRefreshInterval) return;
  autoRefreshInterval = setInterval(() => {
    if (reviewSection.style.display === 'block') cargarCola();
  }, 10000); // Refresh every 10 seconds
}

<div class="stats-filters">
  <input type="date" id="statsStartDate" />
  <input type="date" id="statsEndDate" />
  <select id="statsCompanyFilter">
    <option value="">Todas las compañías</option>
  </select>
  <button id="applyStatsFilters">Aplicar Filtros</button>
</div>

<div id="leaderboardModal" class="modal-overlay">
  <div class="modal-content leaderboard-modal">
    <div class="leaderboard-header">
      <h2 class="leaderboard-title">🏆 LEADERBOARD</h2>
      <button id="cerrarLeaderboard" class="btn-close-leaderboard">✕</button>
    </div>
    <div id="leaderboardContent" class="leaderboard-body">
      <p>Cargando estadísticas...</p>
    </div>
  </div>
</div>

<div style="background: rgba(42, 157, 143, 0.05);">
  <h3>+ Crear Nuevo Usuario</h3>
  <input type="text" id="newFullName" placeholder="Nombre Completo">
  <input type="text" id="newUsername" placeholder="Usuario de acceso">
  <input type="password" id="newPassword" placeholder="Contraseña">
  <select id="newRole">
    <option value="analista">Analista</option>
    <option value="supervisor">Supervisor</option>
    <option value="chats">Chats</option>
  </select>
  <button id="btnCreateUser">Crear Cuenta</button>
</div>

<table>
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Usuario</th>
      <th>Rol</th>
      <th>Acción</th>
    </tr>
  </thead>
  <tbody id="usersTableBody">
    <!-- Dynamically populated -->
  </tbody>
</table>

function renderizarCola(items) {
  // Sort by newest first
  items.sort((a, b) => 
    new Date(b.cashoutChecking || b.timestamp) - 
    new Date(a.cashoutChecking || a.timestamp)
  );

  const idsActuales = items.map(i => i.row).sort().join(',');
  const idsEnUI = Array.from(verificationQueue.querySelectorAll('[data-cashout-id]'))
    .map(el => el.getAttribute('data-cashout-id'))
    .sort().join(',');

  // Only update timers if no structural changes
  if (idsActuales === idsEnUI && items.length > 0) {
    items.forEach(item => {
      const div = verificationQueue.querySelector(`[data-cashout-id="${item.row}"]`);
      if (div && item.cashoutChecking) {
        const cro = div.querySelector('.cronometro-live');
        if (cro) cro.textContent = `⏱️ ${calcularTiempoTranscurrido(item.cashoutChecking)}`;
      }
    });
    return; // Skip full re-render
  }

  // Full render if items changed
  // ...
}

function showNotification(msg, type = "success") {
  notification.textContent = msg;
  notification.style.background = type === "error" 
    ? "linear-gradient(135deg, #FF6B9D, #FFA07A)" 
    : "linear-gradient(135deg, #00C9FF, #92FE9D)";
  notification.style.color = type === "error" ? "#fff" : "#003d5c";
  notification.classList.add('show');
  setTimeout(() => notification.classList.remove('show'), 3200);
}