Hugging Face's logo

Spaces:
TrainHeartX
/
nuevo
Running

App Files Community
nuevo / index.html
TrainHeartX's picture
TrainHeartX
Add 2 files
7fb76fd verified
raw
history blame contribute delete
64.2 kB
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sistema de Feedback Avanzado</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}
.fade-in {
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.card-hover:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
textarea {
resize: none;
}
.progress-bar {
height: 6px;
border-radius: 3px;
transition: width 0.6s ease;
}
.type-tab {
transition: all 0.3s ease;
}
.type-tab.active {
border-bottom: 3px solid;
font-weight: 600;
}
.priority-high {
border-left: 4px solid #ef4444;
}
.priority-medium {
border-left: 4px solid #f59e0b;
}
.priority-low {
border-left: 4px solid #10b981;
}
.status-pending {
background-color: #fef3c7;
color: #d97706;
}
.status-resolved {
background-color: #d1fae5;
color: #059669;
}
.status-in-progress {
background-color: #dbeafe;
color: #2563eb;
}
.chart-container {
height: 300px;
}
.counter-card {
transition: all 0.3s ease;
}
.counter-card:hover {
transform: translateY(-5px);
}
.glow {
box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8 max-w-7xl">
<!-- Header con estadísticas -->
<header class="mb-10">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
<div>
<h1 class="text-4xl font-bold text-indigo-700 mb-2">Sistema de Feedback</h1>
<p class="text-gray-600">Registro y seguimiento de comentarios, bugs y solicitudes</p>
</div>
<div class="mt-4 md:mt-0 flex space-x-3">
<button onclick="openExportModal()" class="px-4 py-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition flex items-center">
<i class="fas fa-file-export mr-2"></i> Exportar
</button>
<button onclick="openAnalyticsModal()" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center glow">
<i class="fas fa-chart-pie mr-2"></i> Analytics
</button>
</div>
</div>
<!-- Estadísticas principales -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
<div class="bg-white rounded-xl shadow p-5 counter-card">
<div class="flex justify-between items-start">
<div>
<p class="text-sm text-gray-500 uppercase tracking-wider">Total Registros</p>
<h3 class="text-2xl font-bold" id="totalCount">0</h3>
<p class="text-xs text-gray-500 mt-1">Último: <span id="lastRecordDate">N/A</span></p>
</div>
<div class="p-3 rounded-full bg-indigo-100 text-indigo-600">
<i class="fas fa-list"></i>
</div>
</div>
<div class="mt-4">
<div class="flex justify-between text-xs text-gray-500 mb-1">
<span>Abiertos</span>
<span id="openCount">0</span>
</div>
<div class="h-1 w-full bg-gray-200 rounded-full">
<div class="h-1 bg-indigo-500 rounded-full progress-bar" id="openProgress"></div>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow p-5 counter-card">
<div class="flex justify-between items-start">
<div>
<p class="text-sm text-gray-500 uppercase tracking-wider">Bugs Reportados</p>
<h3 class="text-2xl font-bold" id="bugsCount">0</h3>
<p class="text-xs text-gray-500 mt-1">Resueltos: <span id="resolvedBugsCount">0</span></p>
</div>
<div class="p-3 rounded-full bg-red-100 text-red-600">
<i class="fas fa-bug"></i>
</div>
</div>
<div class="mt-4">
<div class="flex justify-between text-xs text-gray-500 mb-1">
<span>Prioridad Alta</span>
<span id="highPriorityBugs">0</span>
</div>
<div class="h-1 w-full bg-gray-200 rounded-full">
<div class="h-1 bg-red-500 rounded-full progress-bar" id="bugsProgress"></div>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow p-5 counter-card">
<div class="flex justify-between items-start">
<div>
<p class="text-sm text-gray-500 uppercase tracking-wider">Solicitudes</p>
<h3 class="text-2xl font-bold" id="requestsCount">0</h3>
<p class="text-xs text-gray-500 mt-1">Implementadas: <span id="implementedRequests">0</span></p>
</div>
<div class="p-3 rounded-full bg-purple-100 text-purple-600">
<i class="fas fa-lightbulb"></i>
</div>
</div>
<div class="mt-4">
<div class="flex justify-between text-xs text-gray-500 mb-1">
<span>En progreso</span>
<span id="inProgressRequests">0</span>
</div>
<div class="h-1 w-full bg-gray-200 rounded-full">
<div class="h-1 bg-purple-500 rounded-full progress-bar" id="requestsProgress"></div>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow p-5 counter-card">
<div class="flex justify-between items-start">
<div>
<p class="text-sm text-gray-500 uppercase tracking-wider">Resueltos</p>
<h3 class="text-2xl font-bold" id="resolvedCount">0</h3>
<p class="text-xs text-gray-500 mt-1">Tiempo promedio: <span id="avgResolutionTime">0d</span></p>
</div>
<div class="p-3 rounded-full bg-green-100 text-green-600">
<i class="fas fa-check-circle"></i>
</div>
</div>
<div class="mt-4">
<div class="flex justify-between text-xs text-gray-500 mb-1">
<span>Últimos 7 días</span>
<span id="lastWeekResolved">0</span>
</div>
<div class="h-1 w-full bg-gray-200 rounded-full">
<div class="h-1 bg-green-500 rounded-full progress-bar" id="resolvedProgress"></div>
</div>
</div>
</div>
</div>
<!-- Estadísticas secundarias -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
<div class="bg-white rounded-xl shadow p-4 flex items-center">
<div class="p-3 rounded-full bg-orange-100 text-orange-600 mr-3">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div>
<p class="text-sm text-gray-500">Quejas</p>
<h3 class="text-xl font-bold" id="complaintsCount">0</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow p-4 flex items-center">
<div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-3">
<i class="fas fa-star"></i>
</div>
<div>
<p class="text-sm text-gray-500">Elogios</p>
<h3 class="text-xl font-bold" id="praisesCount">0</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow p-4 flex items-center">
<div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-3">
<i class="fas fa-comment-dots"></i>
</div>
<div>
<p class="text-sm text-gray-500">Sugerencias</p>
<h3 class="text-xl font-bold" id="suggestionsCount">0</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow p-4 flex items-center">
<div class="p-3 rounded-full bg-pink-100 text-pink-600 mr-3">
<i class="fas fa-user-tie"></i>
</div>
<div>
<p class="text-sm text-gray-500">Usuarios únicos</p>
<h3 class="text-xl font-bold" id="uniqueUsersCount">0</h3>
</div>
</div>
</div>
</header>
<!-- Pestañas de tipos -->
<div class="flex overflow-x-auto mb-6 bg-white rounded-lg shadow-sm">
<button onclick="filterByType('all')" class="type-tab active px-6 py-3 text-sm font-medium text-center border-b-2 border-transparent hover:text-gray-600" data-type="all">
<i class="fas fa-layer-group mr-2"></i> Todos
</button>
<button onclick="filterByType('bug')" class="type-tab px-6 py-3 text-sm font-medium text-center border-b-2 border-transparent hover:text-gray-600" data-type="bug">
<i class="fas fa-bug mr-2"></i> Bugs
</button>
<button onclick="filterByType('request')" class="type-tab px-6 py-3 text-sm font-medium text-center border-b-2 border-transparent hover:text-gray-600" data-type="request">
<i class="fas fa-lightbulb mr-2"></i> Solicitudes
</button>
<button onclick="filterByType('complaint')" class="type-tab px-6 py-3 text-sm font-medium text-center border-b-2 border-transparent hover:text-gray-600" data-type="complaint">
<i class="fas fa-exclamation-triangle mr-2"></i> Quejas
</button>
<button onclick="filterByType('praise')" class="type-tab px-6 py-3 text-sm font-medium text-center border-b-2 border-transparent hover:text-gray-600" data-type="praise">
<i class="fas fa-star mr-2"></i> Elogios
</button>
<button onclick="filterByType('suggestion')" class="type-tab px-6 py-3 text-sm font-medium text-center border-b-2 border-transparent hover:text-gray-600" data-type="suggestion">
<i class="fas fa-comment-dots mr-2"></i> Sugerencias
</button>
</div>
<!-- Contenido principal -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Formulario -->
<div class="lg:col-span-1">
<div class="bg-white rounded-xl shadow-md p-6 sticky top-6 transition-all duration-300 hover:shadow-lg">
<h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
<i class="fas fa-plus-circle mr-3 text-indigo-500"></i> Nuevo Registro
</h2>
<form id="feedbackForm" class="space-y-4">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nombre</label>
<input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition" placeholder="Tu nombre" required>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition" placeholder="[email protected]" required>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label for="type" class="block text-sm font-medium text-gray-700 mb-1">Tipo</label>
<select id="type" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition">
<option value="bug">Bug/Error</option>
<option value="request">Solicitud</option>
<option value="complaint">Queja</option>
<option value="praise">Elogio</option>
<option value="suggestion">Sugerencia</option>
</select>
</div>
<div>
<label for="priority" class="block text-sm font-medium text-gray-700 mb-1">Prioridad</label>
<select id="priority" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition">
<option value="low">Baja</option>
<option value="medium" selected>Media</option>
<option value="high">Alta</option>
</select>
</div>
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Mensaje</label>
<textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition" placeholder="Describe con detalle..." required></textarea>
</div>
<div id="bugDetails" class="hidden space-y-4">
<div>
<label for="browser" class="block text-sm font-medium text-gray-700 mb-1">Navegador</label>
<input type="text" id="browser" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition" placeholder="Ej: Chrome 112">
</div>
<div>
<label for="os" class="block text-sm font-medium text-gray-700 mb-1">Sistema Operativo</label>
<input type="text" id="os" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition" placeholder="Ej: Windows 10">
</div>
<div>
<label for="steps" class="block text-sm font-medium text-gray-700 mb-1">Pasos para reproducir</label>
<textarea id="steps" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition" placeholder="Describe cómo reproducir el problema..."></textarea>
</div>
</div>
<div class="flex justify-end space-x-3 pt-2">
<button type="reset" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition">
<i class="fas fa-eraser mr-2"></i> Limpiar
</button>
<button type="submit" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center">
<i class="fas fa-paper-plane mr-2"></i> Enviar
</button>
</div>
</form>
</div>
</div>
<!-- Lista de Registros -->
<div class="lg:col-span-2">
<div class="bg-white rounded-xl shadow-md p-6">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
<h2 class="text-2xl font-semibold text-gray-800 flex items-center">
<i class="fas fa-list-ul mr-3 text-indigo-500"></i> Registros Recientes
</h2>
<div class="mt-3 md:mt-0 flex space-x-2">
<div class="relative">
<select id="filterStatus" onchange="renderFeedbacks()" class="appearance-none px-4 py-2 pr-8 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition text-sm">
<option value="all">Todos los estados</option>
<option value="pending">Pendientes</option>
<option value="in-progress">En progreso</option>
<option value="resolved">Resueltos</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<i class="fas fa-chevron-down text-sm"></i>
</div>
</div>
<div class="relative">
<select id="filterPriority" onchange="renderFeedbacks()" class="appearance-none px-4 py-2 pr-8 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition text-sm">
<option value="all">Todas las prioridades</option>
<option value="high">Alta</option>
<option value="medium">Media</option>
<option value="low">Baja</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<i class="fas fa-chevron-down text-sm"></i>
</div>
</div>
</div>
</div>
<div id="feedbackList" class="space-y-4">
<!-- Los registros aparecerán aquí dinámicamente -->
<div class="text-center py-10 text-gray-500">
<i class="fas fa-inbox text-4xl mb-3 opacity-50"></i>
<p>No hay registros aún. Agrega tu primer comentario o reporte.</p>
</div>
</div>
<div class="mt-6 flex justify-between items-center">
<div class="text-sm text-gray-500" id="showingCount">
Mostrando 0 de 0 registros
</div>
<div class="flex space-x-2">
<button id="prevPage" onclick="changePage(-1)" disabled class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition disabled:opacity-50">
<i class="fas fa-chevron-left"></i>
</button>
<button id="nextPage" onclick="changePage(1)" disabled class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition disabled:opacity-50">
<i class="fas fa-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal de Exportación -->
<div id="exportModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl shadow-xl p-6 w-full max-w-md fade-in">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold text-gray-800">Exportar Datos</h3>
<button onclick="closeExportModal()" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Formato</label>
<div class="grid grid-cols-2 gap-3">
<button onclick="exportData('json')" class="px-4 py-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition flex items-center justify-center">
<i class="fas fa-file-code text-blue-500 mr-2"></i> JSON
</button>
<button onclick="exportData('csv')" class="px-4 py-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition flex items-center justify-center">
<i class="fas fa-file-csv text-green-500 mr-2"></i> CSV
</button>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Filtros</label>
<select id="exportFilter" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition">
<option value="all">Todos los registros</option>
<option value="bug">Solo Bugs</option>
<option value="request">Solo Solicitudes</option>
<option value="complaint">Solo Quejas</option>
<option value="praise">Solo Elogios</option>
<option value="suggestion">Solo Sugerencias</option>
</select>
</div>
</div>
</div>
</div>
<!-- Modal de Analytics -->
<div id="analyticsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl shadow-xl p-6 w-full max-w-4xl max-h-[90vh] overflow-y-auto fade-in">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold text-gray-800">Analíticas de Feedback</h3>
<button onclick="closeAnalyticsModal()" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div class="bg-white p-4 rounded-lg border border-gray-200">
<h4 class="font-medium text-gray-700 mb-3">Distribución por Tipo</h4>
<div class="chart-container" id="typeChart"></div>
</div>
<div class="bg-white p-4 rounded-lg border border-gray-200">
<h4 class="font-medium text-gray-700 mb-3">Estado de Tickets</h4>
<div class="chart-container" id="statusChart"></div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white p-4 rounded-lg border border-gray-200">
<h4 class="font-medium text-gray-700 mb-3">Prioridades</h4>
<div class="chart-container" id="priorityChart"></div>
</div>
<div class="bg-white p-4 rounded-lg border border-gray-200">
<h4 class="font-medium text-gray-700 mb-3">Actividad Reciente</h4>
<div class="chart-container" id="activityChart"></div>
</div>
</div>
<div class="mt-6 pt-4 border-t border-gray-200">
<h4 class="font-medium text-gray-700 mb-3">Top Usuarios</h4>
<div id="topUsers" class="space-y-2">
<!-- Se llenará dinámicamente -->
</div>
</div>
</div>
</div>
<!-- Modal de Detalles -->
<div id="detailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl shadow-xl p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto fade-in">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold text-gray-800">Detalles del Registro</h3>
<button onclick="closeDetailModal()" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div id="modalContent" class="space-y-4">
<!-- Contenido dinámico -->
</div>
<div class="mt-6 pt-4 border-t border-gray-200 flex justify-end space-x-3">
<button onclick="changeStatus('pending')" class="px-4 py-2 bg-yellow-100 text-yellow-800 rounded-lg hover:bg-yellow-200 transition">
<i class="fas fa-clock mr-2"></i> Pendiente
</button>
<button onclick="changeStatus('in-progress')" class="px-4 py-2 bg-blue-100 text-blue-800 rounded-lg hover:bg-blue-200 transition">
<i class="fas fa-spinner mr-2"></i> En Progreso
</button>
<button onclick="changeStatus('resolved')" class="px-4 py-2 bg-green-100 text-green-800 rounded-lg hover:bg-green-200 transition">
<i class="fas fa-check mr-2"></i> Resuelto
</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
// Variables globales
let feedbacks = JSON.parse(localStorage.getItem('feedbacks')) || [];
let currentPage = 1;
const itemsPerPage = 5;
let currentFilterType = 'all';
let currentFilterStatus = 'all';
let currentFilterPriority = 'all';
let currentDetailId = null;
// Inicialización
document.addEventListener('DOMContentLoaded', function() {
// Manejar el envío del formulario
document.getElementById('feedbackForm').addEventListener('submit', handleFormSubmit);
// Mostrar campos adicionales para bugs
document.getElementById('type').addEventListener('change', function() {
const bugDetails = document.getElementById('bugDetails');
bugDetails.classList.toggle('hidden', this.value !== 'bug');
});
// Cargar datos iniciales
updateStats();
renderFeedbacks();
// Agregar algunos datos de ejemplo si está vacío
if (feedbacks.length === 0) {
addSampleData();
}
});
// Agregar datos de ejemplo
function addSampleData() {
const sampleFeedbacks = [
{
id: 1,
name: "Juan Pérez",
email: "[email protected]",
type: "bug",
priority: "high",
message: "El botón de enviar no funciona en la página de contacto",
date: "2023-05-15 10:30",
status: "pending",
browser: "Chrome 112",
os: "Windows 10",
steps: "1. Ir a la página de contacto\n2. Llenar el formulario\n3. Intentar hacer clic en enviar"
},
{
id: 2,
name: "María Gómez",
email: "[email protected]",
type: "request",
priority: "medium",
message: "Sería útil tener un buscador en la sección de productos",
date: "2023-05-14 15:45",
status: "in-progress"
},
{
id: 3,
name: "Carlos Ruiz",
email: "[email protected]",
type: "complaint",
priority: "high",
message: "El tiempo de carga de la página es demasiado lento",
date: "2023-05-13 09:20",
status: "pending"
},
{
id: 4,
name: "Ana López",
email: "[email protected]",
type: "praise",
priority: "low",
message: "Excelente servicio al cliente, muy atentos y resolvieron mi problema rápidamente",
date: "2023-05-12 14:10",
status: "resolved"
},
{
id: 5,
name: "Luis Martínez",
email: "[email protected]",
type: "suggestion",
priority: "low",
message: "Podrían agregar más métodos de pago como PayPal",
date: "2023-05-11 11:25",
status: "pending"
},
{
id: 6,
name: "Sofía Ramírez",
email: "[email protected]",
type: "bug",
priority: "medium",
message: "El menú desplegable no se muestra correctamente en móviles",
date: "2023-05-10 16:50",
status: "resolved",
browser: "Safari 15",
os: "iOS 15",
steps: "1. Abrir el sitio en un iPhone\n2. Intentar abrir el menú principal"
}
];
feedbacks = sampleFeedbacks;
localStorage.setItem('feedbacks', JSON.stringify(feedbacks));
updateStats();
renderFeedbacks();
}
// Manejar el envío del formulario
function handleFormSubmit(e) {
e.preventDefault();
// Obtener valores del formulario
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const type = document.getElementById('type').value;
const priority = document.getElementById('priority').value;
const message = document.getElementById('message').value;
const date = new Date().toISOString().slice(0, 19).replace('T', ' ');
// Datos adicionales para bugs
const bugData = type === 'bug' ? {
browser: document.getElementById('browser').value,
os: document.getElementById('os').value,
steps: document.getElementById('steps').value
} : {};
// Crear nuevo registro
const newFeedback = {
id: Date.now(),
name,
email,
type,
priority,
message,
date,
status: 'pending',
...bugData
};
// Agregar al array y guardar en localStorage
feedbacks.unshift(newFeedback);
localStorage.setItem('feedbacks', JSON.stringify(feedbacks));
// Renderizar la lista actualizada
renderFeedbacks();
updateStats();
// Resetear el formulario
e.target.reset();
// Mostrar notificación
showNotification('Registro guardado correctamente', 'success');
}
// Renderizar la lista de feedbacks
function renderFeedbacks() {
const feedbackList = document.getElementById('feedbackList');
// Obtener filtros actuales
currentFilterStatus = document.getElementById('filterStatus').value;
currentFilterPriority = document.getElementById('filterPriority').value;
// Aplicar filtros
let filteredFeedbacks = feedbacks.filter(feedback => {
const typeMatch = currentFilterType === 'all' || feedback.type === currentFilterType;
const statusMatch = currentFilterStatus === 'all' || feedback.status === currentFilterStatus;
const priorityMatch = currentFilterPriority === 'all' || feedback.priority === currentFilterPriority;
return typeMatch && statusMatch && priorityMatch;
});
// Paginación
const totalPages = Math.ceil(filteredFeedbacks.length / itemsPerPage);
const paginatedFeedbacks = filteredFeedbacks.slice(
(currentPage - 1) * itemsPerPage,
currentPage * itemsPerPage
);
// Actualizar controles de paginación
document.getElementById('prevPage').disabled = currentPage <= 1;
document.getElementById('nextPage').disabled = currentPage >= totalPages;
document.getElementById('showingCount').textContent =
`Mostrando ${paginatedFeedbacks.length} de ${filteredFeedbacks.length} registros`;
// Mostrar mensaje si no hay registros
if (paginatedFeedbacks.length === 0) {
feedbackList.innerHTML = `
<div class="text-center py-10 text-gray-500">
<i class="fas fa-inbox text-4xl mb-3 opacity-50"></i>
<p>No hay registros ${currentFilterType !== 'all' ? 'de este tipo' : ''}.</p>
</div>
`;
return;
}
// Generar HTML para cada registro
feedbackList.innerHTML = paginatedFeedbacks.map(feedback => `
<div class="bg-white border border-gray-200 rounded-lg p-5 card-hover transition-all duration-300 fade-in ${'priority-' + feedback.priority}">
<div class="flex justify-between items-start mb-3">
<div>
<h3 class="font-semibold text-lg text-gray-800">${feedback.name}</h3>
<p class="text-sm text-gray-500">${feedback.email}</p>
</div>
<div class="flex items-center space-x-2">
<span class="px-2 py-1 text-xs rounded-full ${getTypeClass(feedback.type)}">
${getTypeLabel(feedback.type)}
</span>
<span class="px-2 py-1 text-xs rounded-full ${getStatusClass(feedback.status)}">
${getStatusLabel(feedback.status)}
</span>
<span class="text-xs text-gray-400">${formatDate(feedback.date)}</span>
</div>
</div>
<p class="text-gray-700 mb-4">${feedback.message}</p>
<div class="flex justify-between items-center">
<span class="text-xs px-2 py-1 rounded-full ${getPriorityClass(feedback.priority)}">
<i class="fas ${getPriorityIcon(feedback.priority)} mr-1"></i>
${getPriorityLabel(feedback.priority)}
</span>
<div class="flex space-x-2">
<button onclick="viewDetails(${feedback.id})" class="text-indigo-500 hover:text-indigo-700 transition text-sm flex items-center">
<i class="fas fa-eye mr-1"></i> Ver
</button>
<button onclick="deleteFeedback(${feedback.id})" class="text-red-500 hover:text-red-700 transition text-sm flex items-center">
<i class="fas fa-trash-alt mr-1"></i> Eliminar
</button>
</div>
</div>
</div>
`).join('');
}
// Formatear fecha para mostrar
function formatDate(dateString) {
const date = new Date(dateString);
return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
}
// Cambiar página
function changePage(direction) {
const newPage = currentPage + direction;
const filteredFeedbacks = getFilteredFeedbacks();
const totalPages = Math.ceil(filteredFeedbacks.length / itemsPerPage);
if (newPage > 0 && newPage <= totalPages) {
currentPage = newPage;
renderFeedbacks();
}
}
// Filtrar por tipo
function filterByType(type) {
currentFilterType = type;
currentPage = 1;
// Actualizar pestañas activas
document.querySelectorAll('.type-tab').forEach(tab => {
tab.classList.toggle('active', tab.dataset.type === type);
});
renderFeedbacks();
updateStats();
}
// Obtener feedbacks filtrados
function getFilteredFeedbacks() {
return feedbacks.filter(feedback => {
const typeMatch = currentFilterType === 'all' || feedback.type === currentFilterType;
const statusMatch = currentFilterStatus === 'all' || feedback.status === currentFilterStatus;
const priorityMatch = currentFilterPriority === 'all' || feedback.priority === currentFilterPriority;
return typeMatch && statusMatch && priorityMatch;
});
}
// Actualizar estadísticas
function updateStats() {
const total = feedbacks.length;
const bugs = feedbacks.filter(f => f.type === 'bug').length;
const requests = feedbacks.filter(f => f.type === 'request').length;
const complaints = feedbacks.filter(f => f.type === 'complaint').length;
const praises = feedbacks.filter(f => f.type === 'praise').length;
const suggestions = feedbacks.filter(f => f.type === 'suggestion').length;
const resolved = feedbacks.filter(f => f.status === 'resolved').length;
const pending = feedbacks.filter(f => f.status === 'pending').length;
const inProgress = feedbacks.filter(f => f.status === 'in-progress').length;
// Contadores principales
document.getElementById('totalCount').textContent = total;
document.getElementById('bugsCount').textContent = bugs;
document.getElementById('requestsCount').textContent = requests;
document.getElementById('resolvedCount').textContent = resolved;
document.getElementById('complaintsCount').textContent = complaints;
document.getElementById('praisesCount').textContent = praises;
document.getElementById('suggestionsCount').textContent = suggestions;
// Estadísticas secundarias
document.getElementById('openCount').textContent = pending + inProgress;
document.getElementById('resolvedBugsCount').textContent = feedbacks.filter(f => f.type === 'bug' && f.status === 'resolved').length;
document.getElementById('highPriorityBugs').textContent = feedbacks.filter(f => f.type === 'bug' && f.priority === 'high').length;
document.getElementById('implementedRequests').textContent = feedbacks.filter(f => f.type === 'request' && f.status === 'resolved').length;
document.getElementById('inProgressRequests').textContent = feedbacks.filter(f => f.type === 'request' && f.status === 'in-progress').length;
document.getElementById('lastWeekResolved').textContent = feedbacks.filter(f => {
const resolvedDate = new Date(f.date);
const oneWeekAgo = new Date();
oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
return f.status === 'resolved' && resolvedDate > oneWeekAgo;
}).length;
// Fecha del último registro
if (feedbacks.length > 0) {
const lastRecord = feedbacks[0];
document.getElementById('lastRecordDate').textContent = formatDate(lastRecord.date);
} else {
document.getElementById('lastRecordDate').textContent = 'N/A';
}
// Usuarios únicos
const uniqueEmails = [...new Set(feedbacks.map(f => f.email))];
document.getElementById('uniqueUsersCount').textContent = uniqueEmails.length;
// Tiempo promedio de resolución (simulado para el ejemplo)
const avgDays = feedbacks.length > 0 ? Math.floor(Math.random() * 5) + 1 : 0;
document.getElementById('avgResolutionTime').textContent = `${avgDays}d`;
// Actualizar barras de progreso
document.getElementById('bugsProgress').style.width = total > 0 ? `${(bugs / total) * 100}%` : '0%';
document.getElementById('requestsProgress').style.width = total > 0 ? `${(requests / total) * 100}%` : '0%';
document.getElementById('resolvedProgress').style.width = total > 0 ? `${(resolved / total) * 100}%` : '0%';
document.getElementById('openProgress').style.width = total > 0 ? `${((pending + inProgress) / total) * 100}%` : '0%';
}
// Ver detalles
function viewDetails(id) {
const feedback = feedbacks.find(f => f.id === id);
if (!feedback) return;
currentDetailId = id;
// Construir contenido del modal
let detailsHTML = `
<div class="space-y-4">
<div>
<h4 class="text-sm font-medium text-gray-500">Información Básica</h4>
<div class="mt-2 grid grid-cols-2 gap-4">
<div>
<p class="text-xs text-gray-500">Nombre</p>
<p class="font-medium">${feedback.name}</p>
</div>
<div>
<p class="text-xs text-gray-500">Email</p>
<p class="font-medium">${feedback.email}</p>
</div>
<div>
<p class="text-xs text-gray-500">Tipo</p>
<p class="font-medium">
<span class="px-2 py-1 text-xs rounded-full ${getTypeClass(feedback.type)}">
${getTypeLabel(feedback.type)}
</span>
</p>
</div>
<div>
<p class="text-xs text-gray-500">Prioridad</p>
<p class="font-medium">
<span class="px-2 py-1 text-xs rounded-full ${getPriorityClass(feedback.priority)}">
${getPriorityLabel(feedback.priority)}
</span>
</p>
</div>
<div>
<p class="text-xs text-gray-500">Fecha</p>
<p class="font-medium">${formatDate(feedback.date)}</p>
</div>
<div>
<p class="text-xs text-gray-500">Estado</p>
<p class="font-medium">
<span class="px-2 py-1 text-xs rounded-full ${getStatusClass(feedback.status)}">
${getStatusLabel(feedback.status)}
</span>
</p>
</div>
</div>
</div>
<div>
<h4 class="text-sm font-medium text-gray-500">Mensaje</h4>
<div class="mt-2 bg-gray-50 p-4 rounded-lg">
<p class="whitespace-pre-line">${feedback.message}</p>
</div>
</div>
`;
// Mostrar detalles adicionales para bugs
if (feedback.type === 'bug') {
detailsHTML += `
<div>
<h4 class="text-sm font-medium text-gray-500">Detalles del Bug</h4>
<div class="mt-2 grid grid-cols-2 gap-4">
<div>
<p class="text-xs text-gray-500">Navegador</p>
<p class="font-medium">${feedback.browser || 'No especificado'}</p>
</div>
<div>
<p class="text-xs text-gray-500">Sistema Operativo</p>
<p class="font-medium">${feedback.os || 'No especificado'}</p>
</div>
</div>
<div class="mt-4">
<p class="text-xs text-gray-500">Pasos para reproducir</p>
<div class="mt-2 bg-gray-50 p-4 rounded-lg">
<p class="whitespace-pre-line">${feedback.steps || 'No especificado'}</p>
</div>
</div>
</div>
`;
}
detailsHTML += `</div>`;
document.getElementById('modalContent').innerHTML = detailsHTML;
document.getElementById('detailModal').classList.remove('hidden');
}
// Cerrar modal de detalles
function closeDetailModal() {
document.getElementById('detailModal').classList.add('hidden');
currentDetailId = null;
}
// Cambiar estado de un feedback
function changeStatus(newStatus) {
if (!currentDetailId) return;
const index = feedbacks.findIndex(f => f.id === currentDetailId);
if (index !== -1) {
feedbacks[index].status = newStatus;
localStorage.setItem('feedbacks', JSON.stringify(feedbacks));
showNotification('Estado actualizado correctamente', 'success');
renderFeedbacks();
updateStats();
closeDetailModal();
}
}
// Eliminar feedback
function deleteFeedback(id) {
if (!confirm('¿Estás seguro de eliminar este registro?')) return;
feedbacks = feedbacks.filter(feedback => feedback.id !== id);
localStorage.setItem('feedbacks', JSON.stringify(feedbacks));
// Si estamos en la última página y queda vacía, retroceder una página
const filteredCount = getFilteredFeedbacks().length;
const maxPage = Math.ceil(filteredCount / itemsPerPage);
if (currentPage > maxPage && maxPage > 0) {
currentPage = maxPage;
}
renderFeedbacks();
updateStats();
showNotification('Registro eliminado', 'error');
}
// Mostrar notificación
function showNotification(message, type) {
const notification = document.createElement('div');
notification.className = `fixed bottom-6 right-6 px-6 py-3 rounded-lg shadow-lg text-white flex items-center ${
type === 'success' ? 'bg-green-500' : 'bg-red-500'
} fade-in`;
notification.innerHTML = `
<i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'} mr-2"></i>
${message}
`;
document.body.appendChild(notification);
// Eliminar después de 3 segundos
setTimeout(() => {
notification.classList.remove('fade-in');
notification.classList.add('opacity-0', 'transition-opacity', 'duration-300');
setTimeout(() => notification.remove(), 300);
}, 3000);
}
// Funciones para manejar tipos
function getTypeClass(type) {
const classes = {
bug: 'bg-red-100 text-red-800',
request: 'bg-purple-100 text-purple-800',
complaint: 'bg-orange-100 text-orange-800',
praise: 'bg-green-100 text-green-800',
suggestion: 'bg-blue-100 text-blue-800'
};
return classes[type] || 'bg-gray-100 text-gray-800';
}
function getTypeLabel(type) {
const labels = {
bug: 'Bug',
request: 'Solicitud',
complaint: 'Queja',
praise: 'Elogio',
suggestion: 'Sugerencia'
};
return labels[type] || type;
}
// Funciones para manejar prioridades
function getPriorityClass(priority) {
const classes = {
high: 'bg-red-100 text-red-800',
medium: 'bg-yellow-100 text-yellow-800',
low: 'bg-green-100 text-green-800'
};
return classes[priority] || 'bg-gray-100 text-gray-800';
}
function getPriorityLabel(priority) {
const labels = {
high: 'Alta',
medium: 'Media',
low: 'Baja'
};
return labels[priority] || priority;
}
function getPriorityIcon(priority) {
const icons = {
high: 'fa-exclamation-circle',
medium: 'fa-exclamation-triangle',
low: 'fa-info-circle'
};
return icons[priority] || 'fa-question-circle';
}
// Funciones para manejar estados
function getStatusClass(status) {
const classes = {
pending: 'bg-yellow-100 text-yellow-800',
'in-progress': 'bg-blue-100 text-blue-800',
resolved: 'bg-green-100 text-green-800'
};
return classes[status] || 'bg-gray-100 text-gray-800';
}
function getStatusLabel(status) {
const labels = {
pending: 'Pendiente',
'in-progress': 'En Progreso',
resolved: 'Resuelto'
};
return labels[status] || status;
}
// Funciones para exportación
function openExportModal() {
document.getElementById('exportModal').classList.remove('hidden');
}
function closeExportModal() {
document.getElementById('exportModal').classList.add('hidden');
}
function exportData(format) {
const filter = document.getElementById('exportFilter').value;
let dataToExport = feedbacks;
if (filter !== 'all') {
dataToExport = feedbacks.filter(f => f.type === filter);
}
if (format === 'json') {
exportJSON(dataToExport);
} else if (format === 'csv') {
exportCSV(dataToExport);
}
closeExportModal();
showNotification('Exportación completada', 'success');
}
function exportJSON(data) {
const json = JSON.stringify(data, null, 2);
const blob = new Blob([json], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `feedback_${new Date().toISOString().slice(0, 10)}.json`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
function exportCSV(data) {
if (data.length === 0) return;
// Encabezados
const headers = Object.keys(data[0]);
let csv = headers.join(',') + '\n';
// Filas
data.forEach(item => {
const row = headers.map(header => {
let value = item[header];
// Escapar comas y comillas
if (typeof value === 'string') {
value = `"${value.replace(/"/g, '""')}"`;
}
return value;
});
csv += row.join(',') + '\n';
});
const blob = new Blob([csv], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `feedback_${new Date().toISOString().slice(0, 10)}.csv`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
// Funciones para analytics
function openAnalyticsModal() {
document.getElementById('analyticsModal').classList.remove('hidden');
renderCharts();
}
function closeAnalyticsModal() {
document.getElementById('analyticsModal').classList.add('hidden');
}
function renderCharts() {
// Datos para los gráficos
const typeData = [
feedbacks.filter(f => f.type === 'bug').length,
feedbacks.filter(f => f.type === 'request').length,
feedbacks.filter(f => f.type === 'complaint').length,
feedbacks.filter(f => f.type === 'praise').length,
feedbacks.filter(f => f.type === 'suggestion').length
];
const statusData = [
feedbacks.filter(f => f.status === 'pending').length,
feedbacks.filter(f => f.status === 'in-progress').length,
feedbacks.filter(f => f.status === 'resolved').length
];
const priorityData = [
feedbacks.filter(f => f.priority === 'high').length,
feedbacks.filter(f => f.priority === 'medium').length,
feedbacks.filter(f => f.priority === 'low').length
];
// Gráfico de tipos
const typeChart = new ApexCharts(document.querySelector("#typeChart"), {
series: typeData,
chart: {
type: 'donut',
height: '100%'
},
labels: ['Bugs', 'Solicitudes', 'Quejas', 'Elogios', 'Sugerencias'],
colors: ['#EF4444', '#8B5CF6', '#F97316', '#10B981', '#3B82F6'],
legend: {
position: 'bottom'
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
});
typeChart.render();
// Gráfico de estados
const statusChart = new ApexCharts(document.querySelector("#statusChart"), {
series: statusData,
chart: {
type: 'pie',
height: '100%'
},
labels: ['Pendientes', 'En Progreso', 'Resueltos'],
colors: ['#F59E0B', '#3B82F6', '#10B981'],
legend: {
position: 'bottom'
}
});
statusChart.render();
// Gráfico de prioridades
const priorityChart = new ApexCharts(document.querySelector("#priorityChart"), {
series: priorityData,
chart: {
type: 'radialBar',
height: '100%'
},
plotOptions: {
radialBar: {
dataLabels: {
name: {
fontSize: '22px',
},
value: {
fontSize: '16px',
},
total: {
show: true,
label: 'Total',
formatter: function () {
return priorityData.reduce((a, b) => a + b, 0);
}
}
}
}
},
labels: ['Alta', 'Media', 'Baja'],
colors: ['#EF4444', '#F59E0B', '#10B981']
});
priorityChart.render();
// Gráfico de actividad (simulado)
const activityChart = new ApexCharts(document.querySelector("#activityChart"), {
series: [{
name: 'Registros',
data: [5, 8, 12, 7, 9, 15, 10]
}],
chart: {
type: 'area',
height: '100%',
sparkline: {
enabled: false
},
toolbar: {
show: false
}
},
colors: ['#8B5CF6'],
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.3,
}
},
stroke: {
curve: 'smooth',
width: 2
},
xaxis: {
categories: ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom']
},
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
marker: {
show: false
}
}
});
activityChart.render();
// Top usuarios
const userCounts = {};
feedbacks.forEach(f => {
if (userCounts[f.email]) {
userCounts[f.email]++;
} else {
userCounts[f.email] = 1;
}
});
const sortedUsers = Object.entries(userCounts)
.sort((a, b) => b[1] - a[1])
.slice(0, 5);
const topUsersContainer = document.getElementById('topUsers');
topUsersContainer.innerHTML = sortedUsers.map(([email, count]) => `
<div class="flex justify-between items-center p-2 bg-gray-50 rounded-lg">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3">
<i class="fas fa-user text-sm"></i>
</div>
<span class="text-sm font-medium">${email.split('@')[0]}</span>
</div>
<span class="text-xs bg-gray-200 text-gray-700 px-2 py-1 rounded-full">${count} registros</span>
</div>
`).join('');
}
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=TrainHeartX/nuevo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>