feat: migrar dashboard a React 19 + TypeScript + Vite + Tailwind v4
- Módulo HITL (/cases): 6 patrones de formularios dinámicos para 53 tipos de caso con validación Zod - Módulo Monitor (/monitor): streaming token-a-token en tiempo real, auto-scroll y notas internas vía WebSocket - Arquitectura híbrida: REST (canal autoritativo) + WebSocket (difusión/streaming) - MSW para desarrollo sin backend, hooks de notificaciones/sonido/título preservados - Backend legacy movido a legacy/, archivos residuales eliminados de raíz
This commit is contained in:
@@ -0,0 +1,659 @@
|
||||
// Claro Cases Frontend Controller
|
||||
let requests = [];
|
||||
let selectedRequest = null;
|
||||
let searchQuery = '';
|
||||
let currentTab = 'all';
|
||||
|
||||
// Independent Multi-Timer State
|
||||
// Structure: { [caseId]: { elapsed: 0, isRunning: false, lastStarted: timestamp } }
|
||||
let caseTimers = {};
|
||||
|
||||
// Tab/Title Notification State
|
||||
let unreadCount = 0;
|
||||
let titleInterval = null;
|
||||
let isTabFocused = true;
|
||||
|
||||
// Audio Context State
|
||||
let audioCtx = null;
|
||||
|
||||
// DOM Elements
|
||||
const casesList = document.getElementById('cases-list');
|
||||
const casesCount = document.getElementById('cases-count');
|
||||
const caseDetails = document.getElementById('case-details');
|
||||
const searchInput = document.getElementById('search-input');
|
||||
const connectionStatus = document.getElementById('connection-status');
|
||||
const connectionText = document.getElementById('connection-text');
|
||||
|
||||
// Initialize
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
loadTimers();
|
||||
fetchRequests();
|
||||
setupSSE();
|
||||
setupSearch();
|
||||
setupTheme();
|
||||
setupTabs();
|
||||
setupWindowFocusListeners();
|
||||
startGlobalInterval();
|
||||
|
||||
// Request desktop notification permissions
|
||||
if (window.Notification && Notification.permission === 'default') {
|
||||
Notification.requestPermission();
|
||||
}
|
||||
});
|
||||
|
||||
// Window Focus Listeners to clear unread counts
|
||||
function setupWindowFocusListeners() {
|
||||
window.addEventListener('focus', () => {
|
||||
isTabFocused = true;
|
||||
unreadCount = 0;
|
||||
stopTitleFlashing();
|
||||
document.title = 'Claro Cases Dashboard';
|
||||
});
|
||||
|
||||
window.addEventListener('blur', () => {
|
||||
isTabFocused = false;
|
||||
});
|
||||
|
||||
// Enable AudioContext on first click/keypress gesture to bypass Chrome's autoplay policies
|
||||
const resumeAudio = () => {
|
||||
if (!audioCtx) {
|
||||
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
||||
}
|
||||
if (audioCtx.state === 'suspended') {
|
||||
audioCtx.resume();
|
||||
}
|
||||
};
|
||||
document.addEventListener('click', resumeAudio);
|
||||
document.addEventListener('keydown', resumeAudio);
|
||||
}
|
||||
|
||||
// Load case timers from localStorage and calculate offset elapsed time for running ones
|
||||
function loadTimers() {
|
||||
const saved = localStorage.getItem('caseTimers');
|
||||
if (saved) {
|
||||
try {
|
||||
caseTimers = JSON.parse(saved);
|
||||
// For any running timer, calculate elapsed time since last reload
|
||||
for (const [id, timer] of Object.entries(caseTimers)) {
|
||||
if (timer.isRunning) {
|
||||
const timeDiff = Math.floor((Date.now() - timer.lastStarted) / 1000);
|
||||
timer.elapsed += (timeDiff > 0 ? timeDiff : 0);
|
||||
timer.lastStarted = Date.now(); // reset start mark to now
|
||||
}
|
||||
}
|
||||
saveTimers();
|
||||
} catch (e) {
|
||||
console.error('Failed to parse saved timers:', e);
|
||||
caseTimers = {};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Save case timers to localStorage
|
||||
function saveTimers() {
|
||||
localStorage.setItem('caseTimers', JSON.stringify(caseTimers));
|
||||
}
|
||||
|
||||
// Fetch all existing requests
|
||||
async function fetchRequests() {
|
||||
try {
|
||||
const response = await fetch('/api/requests');
|
||||
if (!response.ok) throw new Error('Error al obtener solicitudes');
|
||||
requests = await response.json();
|
||||
renderList();
|
||||
} catch (error) {
|
||||
console.error('Fetch error:', error);
|
||||
casesList.innerHTML = `<div class="loading-placeholder" style="color: #ff3b30">Error al cargar solicitudes. Verifica la base de datos.</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
// Connect to Server-Sent Events (SSE) for real-time updates
|
||||
function setupSSE() {
|
||||
const sse = new EventSource('/api/sse');
|
||||
|
||||
sse.onopen = () => {
|
||||
connectionStatus.className = 'status-dot connected';
|
||||
connectionText.textContent = 'En línea';
|
||||
};
|
||||
|
||||
sse.onerror = (error) => {
|
||||
console.error('SSE Error:', error);
|
||||
connectionStatus.className = 'status-dot disconnected';
|
||||
connectionText.textContent = 'Reconectando...';
|
||||
};
|
||||
|
||||
sse.onmessage = (event) => {
|
||||
try {
|
||||
const newRequest = JSON.parse(event.data);
|
||||
// Prepend new request to local state
|
||||
requests.unshift(newRequest);
|
||||
renderList();
|
||||
|
||||
// Play alert chime, send desktop notification and flash tab title
|
||||
playNotificationSound();
|
||||
showDesktopNotification(newRequest);
|
||||
triggerTitleNotification();
|
||||
|
||||
console.log('🔔 Nueva solicitud recibida:', newRequest);
|
||||
} catch (err) {
|
||||
console.error('Error parsing SSE data:', err);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Search Filter
|
||||
function setupSearch() {
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
searchQuery = e.target.value.toLowerCase().trim();
|
||||
renderList();
|
||||
});
|
||||
}
|
||||
|
||||
// Render Request Cards List
|
||||
function renderList() {
|
||||
const filtered = requests.filter(req => {
|
||||
// Tab filter
|
||||
if (currentTab === 'pending' && req.status.toLowerCase() === 'finalizado') {
|
||||
return false;
|
||||
}
|
||||
if (currentTab === 'finalizado' && req.status.toLowerCase() !== 'finalizado') {
|
||||
return false;
|
||||
}
|
||||
|
||||
const titleMatch = req.title.toLowerCase().includes(searchQuery);
|
||||
const extIdMatch = req.external_id && req.external_id.toLowerCase().includes(searchQuery);
|
||||
const descMatch = req.description && req.description.toLowerCase().includes(searchQuery);
|
||||
const cedulaMatch = req.cedula && req.cedula.toLowerCase().includes(searchQuery);
|
||||
const tipoMatch = req.tipo_solicitud && req.tipo_solicitud.toLowerCase().includes(searchQuery);
|
||||
return titleMatch || extIdMatch || descMatch || cedulaMatch || tipoMatch;
|
||||
});
|
||||
|
||||
casesCount.textContent = filtered.length;
|
||||
|
||||
if (filtered.length === 0) {
|
||||
casesList.innerHTML = `<div class="loading-placeholder">No se encontraron solicitudes.</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
casesList.innerHTML = '';
|
||||
filtered.forEach(req => {
|
||||
const card = document.createElement('div');
|
||||
const isActive = selectedRequest && selectedRequest.id === req.id;
|
||||
card.className = `case-card ${isActive ? 'active' : ''}`;
|
||||
|
||||
const formattedDate = new Date(req.created_at).toLocaleString();
|
||||
const statusClass = `status-${req.status.toLowerCase()}`;
|
||||
|
||||
// Get time from this case's timer if active
|
||||
const timer = caseTimers[req.id];
|
||||
let timerTag = '';
|
||||
if (timer) {
|
||||
const elapsedTotal = timer.elapsed + (timer.isRunning ? Math.floor((Date.now() - timer.lastStarted) / 1000) : 0);
|
||||
timerTag = ` <span class="timing-badge" id="card-timer-${req.id}">⏳ ${formatTime(elapsedTotal)}</span>`;
|
||||
}
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="case-card-header">
|
||||
<span class="case-title">${escapeHTML(req.title)}${timerTag}</span>
|
||||
<span class="case-status-badge ${statusClass}">${escapeHTML(req.status)}</span>
|
||||
</div>
|
||||
<p class="case-desc-preview">${escapeHTML(req.description || 'Sin descripción')}</p>
|
||||
<div class="case-footer">
|
||||
<span class="case-id">${req.external_id ? escapeHTML(req.external_id) : '#' + req.id}</span>
|
||||
${req.tipo_solicitud ? `<span class="case-type-badge">${escapeHTML(req.tipo_solicitud)}</span>` : ''}
|
||||
<span class="case-time">${formattedDate}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
card.addEventListener('click', () => {
|
||||
document.querySelectorAll('.case-card').forEach(c => c.classList.remove('active'));
|
||||
card.classList.add('active');
|
||||
|
||||
selectedRequest = req;
|
||||
renderDetails();
|
||||
});
|
||||
|
||||
casesList.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
// Render Selected Request Details
|
||||
function renderDetails() {
|
||||
if (!selectedRequest) {
|
||||
caseDetails.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">📁</div>
|
||||
<h3>Selecciona una solicitud</h3>
|
||||
<p>Haz clic en cualquier elemento de la lista de la izquierda para ver su información detallada y acciones de gestión.</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
const formattedDate = new Date(selectedRequest.created_at).toLocaleString();
|
||||
const statusClass = `status-${selectedRequest.status.toLowerCase()}`;
|
||||
|
||||
// Parse Payload JSON
|
||||
let payloadObj = selectedRequest.payload;
|
||||
if (typeof payloadObj === 'string') {
|
||||
try {
|
||||
payloadObj = JSON.parse(payloadObj);
|
||||
} catch (e) {
|
||||
payloadObj = {};
|
||||
}
|
||||
}
|
||||
|
||||
// Try to find cedula in root or payload fallbacks
|
||||
let displayCedula = selectedRequest.cedula;
|
||||
if (!displayCedula && payloadObj) {
|
||||
displayCedula = payloadObj.cedula || payloadObj.cédula || payloadObj.documento || payloadObj.identification || payloadObj.id || payloadObj.cc;
|
||||
}
|
||||
|
||||
// Generate HTML for payload fields
|
||||
let payloadFieldsHTML = '';
|
||||
if (payloadObj && Object.keys(payloadObj).length > 0) {
|
||||
payloadFieldsHTML = '<div class="info-grid">';
|
||||
for (const [key, value] of Object.entries(payloadObj)) {
|
||||
const displayValue = typeof value === 'object' ? JSON.stringify(value) : value;
|
||||
payloadFieldsHTML += `
|
||||
<div class="info-item">
|
||||
<span class="info-label">${escapeHTML(key)}</span>
|
||||
<span class="info-value">${escapeHTML(displayValue)}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
payloadFieldsHTML += '</div>';
|
||||
} else {
|
||||
payloadFieldsHTML = '<div class="no-payload">Sin datos adicionales</div>';
|
||||
}
|
||||
|
||||
// Interactive buttons and status management panel HTML
|
||||
let actionsPanelHTML = '';
|
||||
const isFinalizado = selectedRequest.status.toLowerCase() === 'finalizado';
|
||||
const timer = caseTimers[selectedRequest.id];
|
||||
|
||||
if (isFinalizado) {
|
||||
const formattedHandlingTime = formatSavedTime(selectedRequest.handling_time);
|
||||
actionsPanelHTML = `
|
||||
<div class="actions-panel finished-panel">
|
||||
<div class="timer-display">
|
||||
<span class="timer-lbl">Tiempo de Gestión:</span>
|
||||
<span class="timer-val">${formattedHandlingTime}</span>
|
||||
</div>
|
||||
<button class="btn btn-danger" onclick="deleteCase(${selectedRequest.id})">Eliminar Caso</button>
|
||||
</div>
|
||||
`;
|
||||
} else if (timer && timer.isRunning) {
|
||||
const elapsedTotal = timer.elapsed + Math.floor((Date.now() - timer.lastStarted) / 1000);
|
||||
const isValidation = selectedRequest.tipo_solicitud &&
|
||||
selectedRequest.tipo_solicitud.toLowerCase().includes('validacion');
|
||||
actionsPanelHTML = `
|
||||
<div class="actions-panel active-panel">
|
||||
<div class="timer-display">
|
||||
<span class="timer-lbl animate-pulse">⏳ Tiempo transcurrido:</span>
|
||||
<span class="timer-val" id="active-timer">${formatTime(elapsedTotal)}</span>
|
||||
</div>
|
||||
${isValidation ? `
|
||||
<div class="validation-section" style="display: flex; flex-direction: column; gap: 8px;">
|
||||
<span style="font-weight: 600; color: var(--text-primary); font-size: 12px; margin-bottom: 4px;">¿El usuario es válido?</span>
|
||||
<div class="button-group">
|
||||
<button class="btn btn-success" onclick="finalizeCase(${selectedRequest.id})">Sí</button>
|
||||
<button class="btn btn-danger" onclick="finalizeCase(${selectedRequest.id})">No</button>
|
||||
</div>
|
||||
</div>
|
||||
` : `
|
||||
<div class="input-resolution-section" style="display: flex; flex-direction: column; gap: 8px; width: 100%;">
|
||||
<span style="font-weight: 600; color: var(--text-primary); font-size: 12px; margin-bottom: 2px;">Ingrese el valor de resolución:</span>
|
||||
<input type="text" id="resolution-input-${selectedRequest.id}" placeholder="Ej. Pago verificado, Pendiente por revisar..." style="padding: 8px 12px; font-size: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); color: var(--text-primary); outline: none; margin-bottom: 4px;" />
|
||||
<div class="button-group">
|
||||
<button class="btn btn-success" onclick="submitResolution(${selectedRequest.id})">Finalizar Caso</button>
|
||||
<button class="btn btn-danger" onclick="deleteCase(${selectedRequest.id})">Eliminar</button>
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
// Show total handling time if there was some time saved, otherwise none
|
||||
const timeDisplay = selectedRequest.handling_time ? `
|
||||
<div class="timer-display">
|
||||
<span class="timer-lbl">Último tiempo guardado:</span>
|
||||
<span class="timer-val">${formatSavedTime(selectedRequest.handling_time)}</span>
|
||||
</div>
|
||||
` : '';
|
||||
|
||||
actionsPanelHTML = `
|
||||
<div class="actions-panel idle-panel">
|
||||
${timeDisplay}
|
||||
<div class="button-group">
|
||||
<button class="btn btn-primary" onclick="startTimer(${selectedRequest.id})">Gestionar Caso</button>
|
||||
<button class="btn btn-danger" onclick="deleteCase(${selectedRequest.id})">Eliminar Caso</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
caseDetails.innerHTML = `
|
||||
<div class="detail-view">
|
||||
<div class="detail-header">
|
||||
<div class="detail-meta">
|
||||
<span class="case-status-badge ${statusClass}">${escapeHTML(selectedRequest.status)}</span>
|
||||
<span class="detail-time">Creado el ${formattedDate}</span>
|
||||
</div>
|
||||
<h2 class="detail-title">${escapeHTML(selectedRequest.title)}</h2>
|
||||
|
||||
<div class="header-metadata-grid">
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">ID de Referencia:</span>
|
||||
<strong class="meta-value">${selectedRequest.external_id ? escapeHTML(selectedRequest.external_id) : '#' + selectedRequest.id}</strong>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">Cédula del Cliente:</span>
|
||||
<strong class="meta-value highlight-meta">${displayCedula ? escapeHTML(String(displayCedula)) : 'No especificada'}</strong>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">Tipo de Solicitud:</span>
|
||||
<strong class="meta-value">${selectedRequest.tipo_solicitud ? escapeHTML(selectedRequest.tipo_solicitud) : 'No especificado'}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Panel with Buttons and Stopwatch -->
|
||||
<div class="detail-section">
|
||||
<h4>Panel de Operación</h4>
|
||||
${actionsPanelHTML}
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h4>Descripción</h4>
|
||||
<p class="description-text">${escapeHTML(selectedRequest.description || 'No se proporcionó una descripción.')}</p>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h4>Datos de la Solicitud</h4>
|
||||
${payloadFieldsHTML}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Timer Functions
|
||||
function startTimer(requestId) {
|
||||
// Initialize timer entry if not existing
|
||||
if (!caseTimers[requestId]) {
|
||||
caseTimers[requestId] = {
|
||||
elapsed: 0,
|
||||
isRunning: false,
|
||||
lastStarted: 0
|
||||
};
|
||||
}
|
||||
|
||||
const timer = caseTimers[requestId];
|
||||
timer.isRunning = true;
|
||||
timer.lastStarted = Date.now();
|
||||
saveTimers();
|
||||
|
||||
// Re-render UI to show ticking elements
|
||||
renderDetails();
|
||||
renderList();
|
||||
}
|
||||
|
||||
// Global ticking function running once per second for all active timers
|
||||
let globalInterval = null;
|
||||
function startGlobalInterval() {
|
||||
if (globalInterval) clearInterval(globalInterval);
|
||||
globalInterval = setInterval(() => {
|
||||
for (const [id, timer] of Object.entries(caseTimers)) {
|
||||
if (timer.isRunning) {
|
||||
const timeDiff = Math.floor((Date.now() - timer.lastStarted) / 1000);
|
||||
const currentTotal = timer.elapsed + timeDiff;
|
||||
|
||||
// Update list card if visible
|
||||
const cardTimer = document.getElementById(`card-timer-${id}`);
|
||||
if (cardTimer) {
|
||||
cardTimer.textContent = `⏳ ${formatTime(currentTotal)}`;
|
||||
}
|
||||
|
||||
// Update active details stopwatch if selected
|
||||
if (selectedRequest && selectedRequest.id === parseInt(id)) {
|
||||
const activeTimer = document.getElementById('active-timer');
|
||||
if (activeTimer) {
|
||||
activeTimer.textContent = formatTime(currentTotal);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function formatTime(totalSeconds) {
|
||||
const mins = Math.floor(totalSeconds / 60);
|
||||
const secs = totalSeconds % 60;
|
||||
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function formatSavedTime(totalSeconds) {
|
||||
if (!totalSeconds) return '0s';
|
||||
const mins = Math.floor(totalSeconds / 60);
|
||||
const secs = totalSeconds % 60;
|
||||
return mins > 0 ? `${mins}m ${secs}s` : `${secs}s`;
|
||||
}
|
||||
|
||||
async function finalizeCase(requestId, additionalPayload = null) {
|
||||
const timer = caseTimers[requestId];
|
||||
let finalTime = 0;
|
||||
|
||||
if (timer) {
|
||||
if (timer.isRunning) {
|
||||
const timeDiff = Math.floor((Date.now() - timer.lastStarted) / 1000);
|
||||
finalTime = timer.elapsed + timeDiff;
|
||||
} else {
|
||||
finalTime = timer.elapsed;
|
||||
}
|
||||
// Delete timer entry from tracking
|
||||
delete caseTimers[requestId];
|
||||
saveTimers();
|
||||
}
|
||||
|
||||
try {
|
||||
const bodyData = { status: 'Finalizado', handling_time: finalTime };
|
||||
if (additionalPayload) {
|
||||
const currentReq = requests.find(r => r.id === requestId);
|
||||
let payloadObj = {};
|
||||
if (currentReq && currentReq.payload) {
|
||||
try {
|
||||
payloadObj = typeof currentReq.payload === 'string' ? JSON.parse(currentReq.payload) : currentReq.payload;
|
||||
} catch (e) {
|
||||
payloadObj = {};
|
||||
}
|
||||
}
|
||||
bodyData.payload = { ...payloadObj, ...additionalPayload };
|
||||
}
|
||||
|
||||
const response = await fetch(`/api/requests/${requestId}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(bodyData)
|
||||
});
|
||||
if (!response.ok) throw new Error('Error al finalizar caso');
|
||||
const updated = await response.json();
|
||||
|
||||
// Update local state list
|
||||
const index = requests.findIndex(r => r.id === requestId);
|
||||
if (index !== -1) {
|
||||
requests[index] = updated;
|
||||
}
|
||||
selectedRequest = updated;
|
||||
renderList();
|
||||
renderDetails();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert('Error al actualizar el estado del caso en el servidor.');
|
||||
}
|
||||
}
|
||||
|
||||
function submitResolution(requestId) {
|
||||
const input = document.getElementById(`resolution-input-${requestId}`);
|
||||
const val = input ? input.value.trim() : '';
|
||||
finalizeCase(requestId, { valor_cierre: val || 'No especificado' });
|
||||
}
|
||||
|
||||
async function deleteCase(requestId) {
|
||||
if (!confirm('¿Estás seguro de que deseas eliminar esta solicitud?')) return;
|
||||
|
||||
// Clear timer tracking for this case
|
||||
if (caseTimers[requestId]) {
|
||||
delete caseTimers[requestId];
|
||||
saveTimers();
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/requests/${requestId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
if (!response.ok) throw new Error('Error al eliminar');
|
||||
|
||||
// Remove from local state
|
||||
requests = requests.filter(r => r.id !== requestId);
|
||||
selectedRequest = null;
|
||||
renderList();
|
||||
renderDetails();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert('Error al eliminar la solicitud.');
|
||||
}
|
||||
}
|
||||
|
||||
// Helper to escape HTML tags
|
||||
function escapeHTML(str) {
|
||||
if (!str) return '';
|
||||
return str.replace(/[&<>'"]/g,
|
||||
tag => ({
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>',
|
||||
"'": ''',
|
||||
'"': '"'
|
||||
}[tag] || tag)
|
||||
);
|
||||
}
|
||||
|
||||
// Theme Switcher
|
||||
function setupTheme() {
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
|
||||
// Check theme settings in local storage
|
||||
const currentTheme = localStorage.getItem('theme') || 'light';
|
||||
if (currentTheme === 'dark') {
|
||||
document.body.classList.add('dark-mode');
|
||||
themeToggle.textContent = '☀️';
|
||||
} else {
|
||||
themeToggle.textContent = '🌙';
|
||||
}
|
||||
|
||||
themeToggle.addEventListener('click', () => {
|
||||
document.body.classList.toggle('dark-mode');
|
||||
const isDark = document.body.classList.contains('dark-mode');
|
||||
themeToggle.textContent = isDark ? '☀️' : '🌙';
|
||||
localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
||||
});
|
||||
}
|
||||
|
||||
// Tab Switcher
|
||||
function setupTabs() {
|
||||
const tabs = document.querySelectorAll('.tab-btn');
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
tabs.forEach(t => t.classList.remove('active'));
|
||||
tab.classList.add('active');
|
||||
currentTab = tab.dataset.tab;
|
||||
renderList();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Play notification sound using Web Audio API
|
||||
function playNotificationSound() {
|
||||
try {
|
||||
// If not initialized yet due to autoplay limits
|
||||
if (!audioCtx) {
|
||||
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
||||
}
|
||||
|
||||
// If it's still suspended (needs user gesture first)
|
||||
if (audioCtx.state === 'suspended') {
|
||||
console.warn('AudioContext is suspended. Click on the dashboard page first to enable sound alerts.');
|
||||
return;
|
||||
}
|
||||
|
||||
const now = audioCtx.currentTime;
|
||||
|
||||
const osc = audioCtx.createOscillator();
|
||||
const gain = audioCtx.createGain();
|
||||
|
||||
osc.type = 'sine';
|
||||
osc.connect(gain);
|
||||
gain.connect(audioCtx.destination);
|
||||
|
||||
// Play a friendly two-tone notification sound (chime)
|
||||
osc.frequency.setValueAtTime(523.25, now); // Tone C5
|
||||
osc.frequency.setValueAtTime(659.25, now + 0.12); // Tone E5
|
||||
|
||||
gain.gain.setValueAtTime(0.08, now);
|
||||
gain.gain.exponentialRampToValueAtTime(0.001, now + 0.45);
|
||||
|
||||
osc.start(now);
|
||||
osc.stop(now + 0.5);
|
||||
} catch (error) {
|
||||
console.warn('AudioContext is blocked or unsupported:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Show HTML5 desktop notification
|
||||
function showDesktopNotification(request) {
|
||||
if (!window.Notification) return;
|
||||
|
||||
if (Notification.permission === 'granted') {
|
||||
const title = `Claro Cases: ${request.title}`;
|
||||
const options = {
|
||||
body: request.description || `ID Referencia: ${request.external_id || '#' + request.id}`,
|
||||
icon: 'favicon.ico'
|
||||
};
|
||||
|
||||
const notification = new Notification(title, options);
|
||||
|
||||
// Clicking the notification automatically selects the request in the UI
|
||||
notification.onclick = () => {
|
||||
window.focus();
|
||||
selectedRequest = request;
|
||||
renderList();
|
||||
renderDetails();
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Tab Title Flashing Alert (Unread cases)
|
||||
function triggerTitleNotification() {
|
||||
if (isTabFocused) return;
|
||||
unreadCount++;
|
||||
startTitleFlashing();
|
||||
}
|
||||
|
||||
function startTitleFlashing() {
|
||||
if (titleInterval) clearInterval(titleInterval);
|
||||
|
||||
let showAlt = false;
|
||||
titleInterval = setInterval(() => {
|
||||
showAlt = !showAlt;
|
||||
document.title = showAlt
|
||||
? `(🔔 ${unreadCount}) ¡Nuevo Caso!`
|
||||
: `(${unreadCount}) Claro Cases Dashboard`;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function stopTitleFlashing() {
|
||||
if (titleInterval) {
|
||||
clearInterval(titleInterval);
|
||||
titleInterval = null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Claro Cases Dashboard</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-container">
|
||||
<header class="app-header">
|
||||
<div class="logo-area">
|
||||
<span class="logo-icon">🔴</span>
|
||||
<h1>Claro Cases</h1>
|
||||
<span class="badge live-badge">En vivo</span>
|
||||
</div>
|
||||
<div class="status-area">
|
||||
<span id="connection-status" class="status-dot disconnected"></span>
|
||||
<span id="connection-text">Desconectado</span>
|
||||
<button id="theme-toggle" class="theme-toggle-btn" aria-label="Cambiar tema">🌙</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="app-main">
|
||||
<!-- Left sidebar: Cases List -->
|
||||
<section class="cases-sidebar">
|
||||
<div class="sidebar-header">
|
||||
<h2>Solicitudes</h2>
|
||||
<span id="cases-count" class="cases-count">0</span>
|
||||
</div>
|
||||
<div class="search-bar">
|
||||
<input type="text" id="search-input" placeholder="Buscar por título o ID..." autocomplete="off">
|
||||
</div>
|
||||
<div class="tabs-container">
|
||||
<button class="tab-btn active" data-tab="all">Todos</button>
|
||||
<button class="tab-btn" data-tab="pending">Pendientes</button>
|
||||
<button class="tab-btn" data-tab="finalizado">Finalizados</button>
|
||||
</div>
|
||||
<div class="cases-list" id="cases-list">
|
||||
<div class="loading-placeholder">Cargando solicitudes...</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Right panel: Case Details -->
|
||||
<section class="case-details" id="case-details">
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">📁</div>
|
||||
<h3>Selecciona una solicitud</h3>
|
||||
<p>Haz clic en cualquier elemento de la lista de la izquierda para ver su información detallada y carga útil (payload).</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,731 @@
|
||||
/* Claro Cases Styling - Replicating Autonomus Brand Line */
|
||||
|
||||
:root {
|
||||
--bg-base: #f0f2f5;
|
||||
--bg-surface: #ffffff;
|
||||
--bg-elevated: #f8fafc;
|
||||
--bg-hover: #e2e8f0;
|
||||
--border: rgba(0, 0, 0, 0.08);
|
||||
--border-accent: rgba(255, 78, 0, 0.25);
|
||||
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #475569;
|
||||
--text-muted: #94a3b8;
|
||||
|
||||
--accent-orange: #ff4e00;
|
||||
--accent-yellow: #ffa600;
|
||||
--accent-red: #f80018;
|
||||
--accent-green: #10b981;
|
||||
|
||||
--gradient-a: linear-gradient(135deg, #ff4e00, #ffa600);
|
||||
--gradient-b: linear-gradient(135deg, #f80018, #ff4e00);
|
||||
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
--shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.12);
|
||||
|
||||
--transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--font-family: 'Inter', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-family);
|
||||
background-color: var(--bg-base);
|
||||
color: var(--text-primary);
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.app-header {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-surface);
|
||||
z-index: 10;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.logo-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.logo-area h1 {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
background: var(--gradient-a);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.live-badge {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: var(--accent-green);
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
font-size: 10px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 20px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.status-dot.connected {
|
||||
background-color: var(--accent-green);
|
||||
box-shadow: 0 0 6px var(--accent-green);
|
||||
}
|
||||
|
||||
.status-dot.disconnected {
|
||||
background-color: var(--accent-red);
|
||||
box-shadow: 0 0 6px var(--accent-red);
|
||||
}
|
||||
|
||||
/* Main Layout */
|
||||
.app-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Sidebar List */
|
||||
.cases-sidebar {
|
||||
width: 320px;
|
||||
background: var(--bg-surface);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar-header h2 {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.cases-count {
|
||||
background: var(--bg-base);
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
padding: 0 16px 12px;
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-family);
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.search-bar input:focus {
|
||||
border-color: var(--accent-orange);
|
||||
box-shadow: 0 0 0 3px rgba(255, 78, 0, 0.1);
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
padding: 0 16px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
flex: 1;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 6px 0;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-family);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
background: rgba(255, 78, 0, 0.08);
|
||||
color: var(--accent-orange);
|
||||
border-color: var(--accent-orange);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
body.dark-mode .tab-btn.active {
|
||||
background: rgba(255, 78, 0, 0.15);
|
||||
}
|
||||
|
||||
.cases-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 16px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Case Card */
|
||||
.case-card {
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
animation: slideIn 0.25s ease-out;
|
||||
}
|
||||
|
||||
.case-card:hover {
|
||||
background: var(--bg-hover);
|
||||
border-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.case-card.active {
|
||||
background: rgba(255, 78, 0, 0.04);
|
||||
border-color: var(--accent-orange);
|
||||
}
|
||||
|
||||
.case-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.case-title {
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
line-height: 1.3;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.case-status-badge {
|
||||
font-size: 9px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.timing-badge {
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
color: var(--accent-orange);
|
||||
background: rgba(255, 78, 0, 0.08);
|
||||
padding: 1px 5px;
|
||||
border-radius: 4px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* Status-specific Badges */
|
||||
.status-pending { background: rgba(255, 166, 0, 0.12); color: var(--accent-yellow); }
|
||||
.status-resolved { background: rgba(16, 185, 129, 0.12); color: var(--accent-green); }
|
||||
.status-failed { background: rgba(248, 0, 24, 0.1); color: var(--accent-red); }
|
||||
.status-finalizado { background: rgba(16, 185, 129, 0.12); color: var(--accent-green); }
|
||||
|
||||
.case-desc-preview {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 8px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.case-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.case-id {
|
||||
font-family: monospace;
|
||||
background: var(--bg-hover);
|
||||
padding: 1px 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Right Detail Panel */
|
||||
.case-details {
|
||||
flex: 1;
|
||||
background: var(--bg-surface);
|
||||
padding: 30px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.empty-state {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
max-width: 380px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Full Detail View Layout */
|
||||
.detail-view {
|
||||
animation: fadeIn 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.detail-meta {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.detail-time {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.header-metadata-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
background: var(--bg-base);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.meta-value {
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.highlight-meta {
|
||||
color: var(--accent-orange);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Operation / Timer Panel */
|
||||
.actions-panel {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 16px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.actions-panel.active-panel {
|
||||
border-color: var(--accent-orange);
|
||||
background: rgba(255, 78, 0, 0.02);
|
||||
}
|
||||
|
||||
.actions-panel.finished-panel {
|
||||
border-color: var(--accent-green);
|
||||
background: rgba(16, 185, 129, 0.02);
|
||||
}
|
||||
|
||||
.timer-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.timer-lbl {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.timer-val {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
font-family: monospace;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.active-panel .timer-val {
|
||||
color: var(--accent-orange);
|
||||
}
|
||||
|
||||
.finished-panel .timer-val {
|
||||
color: var(--accent-green);
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-family);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent-orange);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #e04400;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: var(--accent-green);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background: #0d9668;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: transparent;
|
||||
color: var(--accent-red);
|
||||
border: 1px solid rgba(248, 0, 24, 0.2);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: rgba(248, 0, 24, 0.06);
|
||||
border-color: var(--accent-red);
|
||||
}
|
||||
|
||||
.detail-section h4 {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.detail-section p.description-text {
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
padding: 16px;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
/* Info Grid (Payload Key-Value) */
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 10px;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 12px;
|
||||
color: var(--text-primary);
|
||||
word-break: break-all;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.no-payload {
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
/* Custom Scrollbars */
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--bg-hover);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Placeholders */
|
||||
.loading-placeholder {
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes slideIn {
|
||||
from { transform: translateY(8px); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: pulse-op 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-op {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
/* Theme Toggle Button */
|
||||
.theme-toggle-btn {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
font-size: 14px;
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
margin-left: 12px;
|
||||
transition: var(--transition);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.theme-toggle-btn:hover {
|
||||
background: var(--bg-hover);
|
||||
border-color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Dark Mode Overrides */
|
||||
body.dark-mode {
|
||||
--bg-base: #0c0d14;
|
||||
--bg-surface: #141622;
|
||||
--bg-elevated: #1d2030;
|
||||
--bg-hover: #2b2f46;
|
||||
--border: rgba(255, 255, 255, 0.08);
|
||||
|
||||
--text-primary: #f1f5f9;
|
||||
--text-secondary: #94a3b8;
|
||||
--text-muted: #64748b;
|
||||
}
|
||||
|
||||
body.dark-mode ::-webkit-scrollbar-thumb {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
/* Request Type Badges */
|
||||
.case-type-badge {
|
||||
background: rgba(255, 78, 0, 0.1);
|
||||
color: var(--accent-orange);
|
||||
border: 1px solid rgba(255, 78, 0, 0.25);
|
||||
font-size: 10px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Custom Modal Dialog */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
padding: 24px;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
max-width: 400px;
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
animation: slideIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.modal-message {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-buttons .btn {
|
||||
padding: 8px 24px;
|
||||
}
|
||||
Reference in New Issue
Block a user