1051 lines
39 KiB
HTML
1051 lines
39 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Sistema de registro de estadísticas diarias de caja</title>
|
|
<link
|
|
href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
|
|
rel="stylesheet"
|
|
/>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css"
|
|
/>
|
|
<!-- Flatpickr CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
|
|
<!-- Flatpickr JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
|
|
<!-- Localización española -->
|
|
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/es.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
</head>
|
|
<body class="bg-gray-100">
|
|
<!-- Contenedor de la aplicación -->
|
|
<div id="app" class="min-h-screen">
|
|
<!-- Экран авторизации -->
|
|
<div
|
|
id="loginScreen"
|
|
class="min-h-screen gradient-bg flex items-center justify-center"
|
|
>
|
|
<div class="bg-white p-8 rounded-lg shadow-xl w-96 animate-fade-in">
|
|
<div class="text-center mb-6">
|
|
<i class="fas fa-cash-register text-4xl text-blue-600 mb-4"></i>
|
|
<h1 class="text-2xl font-bold text-gray-800">
|
|
Sistema de registro de estadísticas de caja
|
|
</h1>
|
|
<p class="text-gray-600 mt-2">Iniciar sesión</p>
|
|
</div>
|
|
|
|
<form id="loginForm">
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2">
|
|
<i class="fas fa-user mr-2"></i>Usuario
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
class="form-input w-full px-3 py-2 rounded-lg"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2">
|
|
<i class="fas fa-lock mr-2"></i>Contraseña
|
|
</label>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
class="form-input w-full px-3 py-2 rounded-lg"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="btn-primary w-full text-white font-bold py-2 px-4 rounded-lg"
|
|
>
|
|
<i class="fas fa-sign-in-alt mr-2"></i>Acceder
|
|
</button>
|
|
|
|
<div id="demoAccountsHint" hidden>
|
|
<div class="mt-4 text-sm text-gray-600 text-center">
|
|
<div class="mb-2"><strong>Cuentas de prueba:</strong></div>
|
|
<div>Administrador: admin / admin123</div>
|
|
<div>Cajero: cashier1 / password123</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div
|
|
id="loginError"
|
|
class="hidden mt-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Интерфейс пользователя -->
|
|
<div id="userInterface" class="hidden">
|
|
<!-- Заголовок -->
|
|
<header class="gradient-bg text-white p-4">
|
|
<div class="container mx-auto flex justify-between items-center">
|
|
<div>
|
|
<h1 class="text-2xl font-bold">
|
|
<i class="fas fa-cash-register mr-2"></i>Reporte de caja
|
|
</h1>
|
|
<p id="userWelcome" class="text-blue-100"></p>
|
|
</div>
|
|
<div class="flex space-x-4">
|
|
<button
|
|
id="todayReportBtn"
|
|
class="bg-white text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-50 transition-colors"
|
|
>
|
|
<i class="fas fa-file-alt mr-2"></i>Informe de hoy
|
|
</button>
|
|
<button
|
|
id="logoutBtn"
|
|
class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition-colors"
|
|
>
|
|
<i class="fas fa-sign-out-alt mr-2"></i>Salir
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Форма отчета -->
|
|
<div class="container mx-auto p-6">
|
|
<form id="reportForm" class="bg-white rounded-lg shadow-xl p-6">
|
|
<!-- Дата отчета -->
|
|
<div class="mb-6">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2">
|
|
<i class="fas fa-calendar-alt mr-2"></i>Fecha del informe *
|
|
</label>
|
|
<input
|
|
type="date"
|
|
id="reportDate"
|
|
class="form-input w-full px-3 py-2 rounded-lg"
|
|
required
|
|
/>
|
|
</div>
|
|
<div
|
|
id="dateEditWarning"
|
|
class="hidden mt-2 text-yellow-800 bg-yellow-100 rounded px-4 py-2 text-sm"
|
|
>
|
|
<i class="fas fa-exclamation-triangle mr-2"></i>
|
|
Advertencia: cambiar la fecha del informe puede afectar la disponibilidad de edición.
|
|
</div>
|
|
|
|
<!-- Selección de tienda -->
|
|
<div class="mb-6">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2">
|
|
<i class="fas fa-store mr-2"></i>Tienda *
|
|
</label>
|
|
<select
|
|
id="storeSelect"
|
|
class="form-input w-full px-3 py-2 rounded-lg"
|
|
required
|
|
>
|
|
<option value="">Seleccionar tienda</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Доходы -->
|
|
<div class="report-section income">
|
|
<h3 class="text-lg font-bold text-green-700 mb-4">
|
|
<i class="fas fa-arrow-up mr-2"></i>Ingresos
|
|
</h3>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<label class="block text-gray-700 text-sm font-bold mb-2"
|
|
>Ingresos del día * €</label
|
|
>
|
|
<input
|
|
type="number"
|
|
id="income"
|
|
class="form-input w-full px-3 py-2 rounded-lg"
|
|
step="0.01"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-gray-700 text-sm font-bold mb-2"
|
|
>Caja inicial * €</label
|
|
>
|
|
<input
|
|
type="number"
|
|
id="cajaInicial"
|
|
class="form-input w-full px-3 py-2 rounded-lg"
|
|
step="0.01"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-gray-700 text-sm font-bold mb-2"
|
|
>Ingresos totales €</label
|
|
>
|
|
<input
|
|
type="number"
|
|
id="totalIncome"
|
|
class="form-input w-full px-3 py-2 rounded-lg bg-gray-100"
|
|
readonly
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Зарплаты -->
|
|
<div class="report-section wages">
|
|
<h3 class="text-lg font-bold text-yellow-700 mb-4">
|
|
<i class="fas fa-users mr-2"></i>Salarios
|
|
</h3>
|
|
|
|
<div id="wagesContainer">
|
|
<div
|
|
class="wage-row grid grid-cols-1 md:grid-cols-3 gap-4 mb-3"
|
|
>
|
|
<input
|
|
type="text"
|
|
placeholder="Nombre del empleado"
|
|
class="wage-name form-input px-3 py-2 rounded-lg"
|
|
/>
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
placeholder="Monto €"
|
|
class="wage-amount form-input px-3 py-2 rounded-lg"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="remove-wage bg-red-500 text-white px-3 py-2 rounded-lg hover:bg-red-600 transition-colors"
|
|
>
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
id="addWage"
|
|
class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors mr-4"
|
|
>
|
|
<i class="fas fa-plus mr-2"></i>Añadir empleado
|
|
</button>
|
|
|
|
<div class="mt-4 text-right">
|
|
<span class="text-lg font-bold"
|
|
>Total wages: €<span id="totalWages">0.00</span></span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Gastos -->
|
|
<div class="report-section expenses">
|
|
<h3 class="text-lg font-bold text-red-700 mb-4">
|
|
<i class="fas fa-arrow-down mr-2"></i>Gastos
|
|
</h3>
|
|
|
|
<div id="expensesContainer">
|
|
<div
|
|
class="expense-row grid grid-cols-1 md:grid-cols-3 gap-4 mb-3"
|
|
>
|
|
<input
|
|
type="text"
|
|
placeholder="Nombre del gasto"
|
|
class="expense-name form-input px-3 py-2 rounded-lg"
|
|
/>
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
placeholder="Monto €"
|
|
class="expense-amount form-input px-3 py-2 rounded-lg"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="remove-expense bg-red-500 text-white px-3 py-2 rounded-lg hover:bg-red-600 transition-colors"
|
|
>
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
id="addExpense"
|
|
class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors mr-4"
|
|
>
|
|
<i class="fas fa-plus mr-2"></i>Añadir gasto
|
|
</button>
|
|
|
|
<div class="mt-4 text-right">
|
|
<span class="text-lg font-bold"
|
|
>Total expenses internal: €<span id="totalExpensesInternal"
|
|
>0.00</span
|
|
></span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Resumen -->
|
|
<div class="report-section">
|
|
<h3 class="text-lg font-bold text-gray-700 mb-4">
|
|
<i class="fas fa-calculator mr-2"></i>Resumen
|
|
</h3>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
|
<div>
|
|
<label class="block text-gray-700 text-sm font-bold mb-2"
|
|
>Ingresos totales €</label
|
|
>
|
|
<input
|
|
type="number"
|
|
id="displayTotalIncome"
|
|
class="form-input w-full px-3 py-2 rounded-lg bg-gray-100"
|
|
readonly
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-gray-700 text-sm font-bold mb-2"
|
|
>Gastos totales €</label
|
|
>
|
|
<input
|
|
type="number"
|
|
id="totalExpenses"
|
|
class="form-input w-full px-3 py-2 rounded-lg bg-gray-100"
|
|
readonly
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-gray-700 text-sm font-bold mb-2"
|
|
>Envelope * €</label
|
|
>
|
|
<input
|
|
type="number"
|
|
id="envelope"
|
|
class="form-input w-full px-3 py-2 rounded-lg"
|
|
step="0.01"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center bg-blue-50 p-4 rounded-lg">
|
|
<span class="text-xl font-bold text-blue-700"
|
|
>Caja final: €<span id="cajaFinal"
|
|
>0.00</span
|
|
></span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mt-6">
|
|
<button
|
|
type="submit"
|
|
class="btn-primary text-white font-bold py-3 px-8 rounded-lg text-lg"
|
|
>
|
|
<i class="fas fa-save mr-2"></i>Guardar informe
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Интерфейс администратора -->
|
|
<div id="adminInterface" class="hidden">
|
|
<!-- Заголовок админа -->
|
|
<header class="gradient-bg text-white p-4">
|
|
<div class="container mx-auto flex justify-between items-center">
|
|
<div>
|
|
<h1 class="text-2xl font-bold">
|
|
<i class="fas fa-chart-line mr-2"></i>Panel de administración
|
|
</h1>
|
|
<p id="adminWelcome" class="text-blue-100"></p>
|
|
</div>
|
|
<button
|
|
id="adminLogoutBtn"
|
|
class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition-colors"
|
|
>
|
|
<i class="fas fa-sign-out-alt mr-2"></i>Salir
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Navegación -->
|
|
<div class="bg-white shadow">
|
|
<div class="container mx-auto">
|
|
<div class="flex space-x-0">
|
|
<button
|
|
class="admin-tab-btn px-6 py-3 font-medium transition-colors border-b-2 border-blue-500 text-blue-600"
|
|
data-tab="dashboard"
|
|
>
|
|
<i class="fas fa-tachometer-alt mr-2"></i>Dashboard
|
|
</button>
|
|
<button
|
|
class="admin-tab-btn px-6 py-3 font-medium text-gray-600 hover:text-blue-600 transition-colors border-b-2 border-transparent hover:border-blue-500"
|
|
data-tab="reports"
|
|
>
|
|
<i class="fas fa-file-alt mr-2"></i>Informes
|
|
</button>
|
|
<button
|
|
class="admin-tab-btn px-6 py-3 font-medium text-gray-600 hover:text-blue-600 transition-colors border-b-2 border-transparent hover:border-blue-500"
|
|
data-tab="users"
|
|
>
|
|
<i class="fas fa-users mr-2"></i>Usuarios
|
|
</button>
|
|
<button
|
|
class="admin-tab-btn px-6 py-3 font-medium text-gray-600 hover:text-blue-600 transition-colors border-b-2 border-transparent hover:border-blue-500"
|
|
data-tab="stores"
|
|
>
|
|
<i class="fas fa-store mr-2"></i>Tiendas
|
|
</button>
|
|
<button
|
|
class="admin-tab-btn px-6 py-3 font-medium text-gray-600 hover:text-blue-600 transition-colors border-b-2 border-transparent hover:border-blue-500"
|
|
data-tab="todo"
|
|
>
|
|
<i class="fas fa-tasks mr-2"></i>TODO
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contenido de pestañas -->
|
|
<div class="container mx-auto p-6">
|
|
<!-- Dashboard -->
|
|
<div id="dashboardTab" class="admin-tab-content">
|
|
<!-- Статистические карточки -->
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
|
<div
|
|
class="stats-card card-gradient text-white p-6 rounded-lg shadow-lg"
|
|
>
|
|
<div class="flex items-center">
|
|
<div class="flex-1">
|
|
<p
|
|
class="text-white-contrast text-sm font-medium uppercase tracking-wide"
|
|
>
|
|
Ingresos totales
|
|
</p>
|
|
<p
|
|
class="text-white-contrast text-3xl font-bold"
|
|
id="totalRevenueCard"
|
|
>
|
|
€0
|
|
</p>
|
|
</div>
|
|
<div class="flex-shrink-0">
|
|
<i
|
|
class="fas fa-euro-sign text-4xl text-white opacity-80"
|
|
></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="stats-card card-gradient-2 text-white p-6 rounded-lg shadow-lg"
|
|
>
|
|
<div class="flex items-center">
|
|
<div class="flex-1">
|
|
<p
|
|
class="text-white-contrast text-sm font-medium uppercase tracking-wide"
|
|
>
|
|
Gastos totales
|
|
</p>
|
|
<p
|
|
class="text-white-contrast text-3xl font-bold"
|
|
id="totalExpensesCard"
|
|
>
|
|
€0
|
|
</p>
|
|
</div>
|
|
<div class="flex-shrink-0">
|
|
<i
|
|
class="fas fa-chart-line text-4xl text-white opacity-80"
|
|
></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="stats-card card-gradient-3 text-white p-6 rounded-lg shadow-lg"
|
|
>
|
|
<div class="flex items-center">
|
|
<div class="flex-1">
|
|
<p
|
|
class="text-white-contrast text-sm font-medium uppercase tracking-wide"
|
|
>
|
|
Número de informes
|
|
</p>
|
|
<p
|
|
class="text-white-contrast text-3xl font-bold"
|
|
id="totalReportsCard"
|
|
>
|
|
0
|
|
</p>
|
|
</div>
|
|
<div class="flex-shrink-0">
|
|
<i
|
|
class="fas fa-file-alt text-4xl text-white opacity-80"
|
|
></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="stats-card card-gradient-4 text-white p-6 rounded-lg shadow-lg"
|
|
>
|
|
<div class="flex items-center">
|
|
<div class="flex-1">
|
|
<p
|
|
class="text-white-contrast text-sm font-medium uppercase tracking-wide"
|
|
>
|
|
Пользователи
|
|
</p>
|
|
<p
|
|
class="text-white-contrast text-3xl font-bold"
|
|
id="totalUsersCard"
|
|
>
|
|
0
|
|
</p>
|
|
</div>
|
|
<div class="flex-shrink-0">
|
|
<i class="fas fa-users text-4xl text-white opacity-80"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Gráficos -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<div class="bg-white p-6 rounded-lg shadow-lg">
|
|
<h3 class="text-lg font-bold text-gray-800 mb-4">
|
|
<i class="fas fa-chart-line mr-2 text-blue-600"></i>Ingresos por día
|
|
|
|
</h3>
|
|
<div style="height: 300px">
|
|
<canvas id="revenueChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-lg">
|
|
<h3 class="text-lg font-bold text-gray-800 mb-4">
|
|
<i class="fas fa-chart-pie mr-2 text-red-600"></i>Gastos por categoría
|
|
</h3>
|
|
<div style="height: 300px">
|
|
<canvas id="expensesChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-lg">
|
|
<h3 class="text-lg font-bold text-gray-800 mb-4">
|
|
<i class="fas fa-chart-bar mr-2 text-green-600"></i>Comparación por tiendas
|
|
</h3>
|
|
<div style="height: 300px">
|
|
<canvas id="storesChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-lg">
|
|
<h3 class="text-lg font-bold text-gray-800 mb-4">
|
|
<i class="fas fa-chart-area mr-2 text-purple-600"></i>Tendencias de ventas
|
|
</h3>
|
|
<div style="height: 300px">
|
|
<canvas id="trendsChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Отчеты -->
|
|
<div id="reportsTab" class="admin-tab-content hidden">
|
|
<div class="bg-white rounded-lg shadow-lg">
|
|
<div class="p-6 border-b">
|
|
<h2 class="text-xl font-bold text-gray-800">
|
|
<i class="fas fa-file-alt mr-2"></i>Gestión de informes
|
|
</h2>
|
|
</div>
|
|
|
|
<!-- Filtros -->
|
|
<div class="p-6 bg-gray-50 border-b">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1"
|
|
>Tienda</label
|
|
>
|
|
<select
|
|
id="filterStore"
|
|
class="form-input w-full px-3 py-2 rounded-lg"
|
|
>
|
|
<option value="">Todas las tiendas</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1"
|
|
>Fecha desde</label
|
|
>
|
|
<input
|
|
type="date"
|
|
id="filterDateFrom"
|
|
class="form-input w-full px-3 py-2 rounded-lg"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1"
|
|
>Fecha hasta</label
|
|
>
|
|
<input
|
|
type="date"
|
|
id="filterDateTo"
|
|
class="form-input w-full px-3 py-2 rounded-lg"
|
|
/>
|
|
</div>
|
|
<div class="flex items-end">
|
|
<button
|
|
id="applyFilters"
|
|
class="btn-primary text-white px-4 py-2 rounded-lg mr-2"
|
|
>
|
|
<i class="fas fa-search mr-2"></i>Buscar
|
|
</button>
|
|
<button
|
|
id="exportExcel"
|
|
class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600"
|
|
>
|
|
<i class="fas fa-file-excel mr-2"></i>Excel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabla de informes -->
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead class="bg-gray-100">
|
|
<tr>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
>
|
|
Fecha
|
|
</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
>
|
|
Tienda
|
|
</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
>
|
|
Ingresos
|
|
</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
>
|
|
Gastos
|
|
</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
>
|
|
Beneficio
|
|
</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
>
|
|
Usuario
|
|
</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
>
|
|
Estado
|
|
</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
>
|
|
Acciones
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody
|
|
id="reportsTableBody"
|
|
class="bg-white divide-y divide-gray-200"
|
|
></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Пользователи -->
|
|
<div id="usersTab" class="admin-tab-content hidden">
|
|
<div class="bg-white rounded-lg shadow-lg">
|
|
<div class="p-6 border-b flex justify-between items-center">
|
|
<h2 class="text-xl font-bold text-gray-800">
|
|
<i class="fas fa-users mr-2"></i>Gestión de usuarios
|
|
</h2>
|
|
<button
|
|
id="addUserBtn"
|
|
class="btn-primary text-white px-4 py-2 rounded-lg"
|
|
>
|
|
<i class="fas fa-plus mr-2"></i>Añadir usuario
|
|
</button>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead class="bg-gray-100">
|
|
<tr>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
>
|
|
ID
|
|
</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
>
|
|
Usuario
|
|
</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
>
|
|
Rol
|
|
</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
>
|
|
Tiendas disponibles
|
|
</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
>
|
|
Acciones
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody
|
|
id="usersTableBody"
|
|
class="bg-white divide-y divide-gray-200"
|
|
></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Магазины -->
|
|
<div id="storesTab" class="admin-tab-content hidden">
|
|
<div class="bg-white rounded-lg shadow-lg">
|
|
<div class="p-6 border-b flex justify-between items-center">
|
|
<h2 class="text-xl font-bold text-gray-800">
|
|
<i class="fas fa-store mr-2"></i>Gestión de tiendas
|
|
</h2>
|
|
<button
|
|
id="addStoreBtn"
|
|
class="btn-primary text-white px-4 py-2 rounded-lg"
|
|
>
|
|
<i class="fas fa-plus mr-2"></i>Añadir tienda
|
|
</button>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead class="bg-gray-100">
|
|
<tr>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
>
|
|
ID
|
|
</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
>
|
|
Nombre
|
|
</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
>
|
|
Número de informes
|
|
</th>
|
|
<th
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
>
|
|
Acciones
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody
|
|
id="storesTableBody"
|
|
class="bg-white divide-y divide-gray-200"
|
|
></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TODO -->
|
|
<div id="todoTab" class="admin-tab-content hidden">
|
|
<div class="bg-white rounded-lg shadow-lg">
|
|
<div class="p-6 border-b flex justify-between items-center">
|
|
<h2 class="text-xl font-bold text-gray-800">
|
|
<i class="fas fa-tasks mr-2"></i>Lista TODO - Seguimiento
|
|
изменений
|
|
</h2>
|
|
<button
|
|
id="addTodoBtn"
|
|
class="btn-primary text-white px-4 py-2 rounded-lg"
|
|
>
|
|
<i class="fas fa-plus mr-2"></i>Añadir tarea
|
|
</button>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<div id="todoList" class="space-y-4"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Модальное окно просмотра отчета -->
|
|
<div id="reportViewModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="text-xl font-bold text-gray-800" id="reportModalTitle">
|
|
Ver informe
|
|
</h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="reportViewContent">
|
|
<!-- Содержимое отчета -->
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<div id="reportModalButtons" class="flex justify-end space-x-3">
|
|
<!-- Кнопки будут добавлены динамически -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Модальное окно редактирования пользователя -->
|
|
<div id="userEditModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="text-xl font-bold text-gray-800" id="userModalTitle">
|
|
Usuario
|
|
</h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="userEditForm">
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2"
|
|
>Usuario</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="userLogin"
|
|
class="form-input w-full px-3 py-2 rounded-lg"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2"
|
|
>Contraseña</label
|
|
>
|
|
<div class="relative">
|
|
<input
|
|
type="password"
|
|
id="userPassword"
|
|
class="form-input w-full px-3 py-2 rounded-lg"
|
|
/>
|
|
<button
|
|
type="button"
|
|
id="togglePasswordBtn"
|
|
class="absolute right-3 top-1/4 -translate-y-1/2 text-xl text-gray-500 hover:text-gray-700"
|
|
tabindex="-1"
|
|
aria-label="Mostrar contraseña"
|
|
>
|
|
<span id="eyeIcon">👁️</span>
|
|
</button>
|
|
</div>
|
|
<small class="text-gray-500"
|
|
>Si no desea cambiar la contraseña, deje este campo sin
|
|
cambios</small
|
|
>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2"
|
|
>Rol</label
|
|
>
|
|
<select
|
|
id="userRole"
|
|
class="form-input w-full px-3 py-2 rounded-lg"
|
|
required
|
|
>
|
|
<option value="employee">Empleado</option>
|
|
<option value="admin">Administrador</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2"
|
|
>Tiendas disponibles</label
|
|
>
|
|
<div id="userStoresAccess" class="space-y-2">
|
|
<!-- Чекбоксы магазинов -->
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
id="saveUserBtn"
|
|
class="btn-success text-white px-4 py-2 rounded-lg mr-2"
|
|
>
|
|
<i class="fas fa-save mr-2"></i>Guardar
|
|
</button>
|
|
<button
|
|
id="cancelUserBtn"
|
|
class="bg-gray-500 text-white px-4 py-2 rounded-lg"
|
|
>
|
|
<i class="fas fa-times mr-2"></i>Cancelar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Модальное окно редактирования магазина -->
|
|
<div id="storeEditModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="text-xl font-bold text-gray-800" id="storeModalTitle">
|
|
Tienda
|
|
</h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="storeEditForm">
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2"
|
|
>Nombre de la tienda</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="storeName"
|
|
autocomplete="off"
|
|
class="form-input w-full px-3 py-2 rounded-lg"
|
|
required
|
|
/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
id="saveStoreBtn"
|
|
class="btn-success text-white px-4 py-2 rounded-lg mr-2"
|
|
>
|
|
<i class="fas fa-save mr-2"></i>Guardar
|
|
</button>
|
|
<button
|
|
id="cancelStoreBtn"
|
|
class="bg-gray-500 text-white px-4 py-2 rounded-lg"
|
|
>
|
|
<i class="fas fa-times mr-2"></i>Cancelar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Модальное окно TODO -->
|
|
<div id="todoEditModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="text-xl font-bold text-gray-800" id="todoModalTitle">
|
|
Tarea TODO
|
|
</h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="todoEditForm">
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2"
|
|
>Título</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="todoTitle"
|
|
class="form-input w-full px-3 py-2 rounded-lg"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2"
|
|
>Descripción</label
|
|
>
|
|
<textarea
|
|
id="todoDescription"
|
|
class="form-input w-full px-3 py-2 rounded-lg"
|
|
rows="3"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2"
|
|
>Prioridad</label
|
|
>
|
|
<select
|
|
id="todoPriority"
|
|
class="form-input w-full px-3 py-2 rounded-lg"
|
|
>
|
|
<option value="low">Baja</option>
|
|
<option value="medium">Media</option>
|
|
<option value="high">Alta</option>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
id="saveTodoBtn"
|
|
class="btn-success text-white px-4 py-2 rounded-lg mr-2"
|
|
>
|
|
<i class="fas fa-save mr-2"></i>Guardar
|
|
</button>
|
|
<button
|
|
id="cancelTodoBtn"
|
|
class="bg-gray-500 text-white px-4 py-2 rounded-lg"
|
|
>
|
|
<i class="fas fa-times mr-2"></i>Cancelar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Уведомления -->
|
|
<div id="notification" class="fixed top-4 right-4 z-50 hidden">
|
|
<div class="bg-green-500 text-white px-6 py-4 rounded-lg shadow-lg">
|
|
<div class="flex items-center">
|
|
<i class="fas fa-check-circle mr-2"></i>
|
|
<span id="notificationText">Guardado exitosamente!</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="api.js"></script>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|
|
<script id="html_badge_script1">
|
|
window.__genspark_remove_badge_link =
|
|
"https://www.genspark.ai/api/html_badge/" +
|
|
"remove_badge?token=To%2FBnjzloZ3UfQdcSaYfDoGCKIErFJRfpZN8xqFLpgBXFp4ygEmJonWufT2IQuq%2BwrOKJaAUdGp5Iz1y4jw6xLPPB%2FcEYkeXPxAi%2BBlNqHM2XOPKaEa4ZiR2TaxePMZPdCquTPKOuZFfT9PPbME%2FFNXOgNiXjDWmKZHen4XLcKtC6KlK223I7%2BmgDvmPBsDB%2FpMR5JvmRBhaofnP73Vs26uiXmIfAuBOVhVR1EboJmnFxVm8ExnGoXu8ysLHJOasq6L9yUyCpFK2FfSJwV2vwkG6WfgDZv7kOhLUBNP3mElr0kmJrfwilosv%2F%2F10PgijRcEe97eK4eaGRvFfURAxJeMl2ketagimb%2BAFebqyY8I5rc%2BzBnPHkWSzVeXgd9goBvtypiobl1BwOgkoFUGGEQXfbpFA%2BVl1eNBrSirrCPtaBpJZYOWikxv4m7T8klO2axu2q38Vd94DlJuJhOe52VXSqAACLgYd0QQQYiCIxJK4iXHG5neQhzBgDBmu0kgMq5xKr0ltTp5OL0jGiP4%2BHTuU08X9DE7CMVA12GC%2Buf8%3D";
|
|
window.__genspark_locale = "en-US";
|
|
window.__genspark_token =
|
|
"To/BnjzloZ3UfQdcSaYfDoGCKIErFJRfpZN8xqFLpgBXFp4ygEmJonWufT2IQuq+wrOKJaAUdGp5Iz1y4jw6xLPPB/cEYkeXPxAi+BlNqHM2XOPKaEa4ZiR2TaxePMZPdCquTPKOuZFfT9PPbME/FNXOgNiXjDWmKZHen4XLcKtC6KlK223I7+mgDvmPBsDB/pMR5JvmRBhaofnP73Vs26uiXmIfAuBOVhVR1EboJmnFxVm8ExnGoXu8ysLHJOasq6L9yUyCpFK2FfSJwV2vwkG6WfgDZv7kOhLUBNP3mElr0kmJrfwilosv//10PgijRcEe97eK4eaGRvFfURAxJeMl2ketagimb+AFebqyY8I5rc+zBnPHkWSzVeXgd9goBvtypiobl1BwOgkoFUGGEQXfbpFA+Vl1eNBrSirrCPtaBpJZYOWikxv4m7T8klO2axu2q38Vd94DlJuJhOe52VXSqAACLgYd0QQQYiCIxJK4iXHG5neQhzBgDBmu0kgMq5xKr0ltTp5OL0jGiP4+HTuU08X9DE7CMVA12GC+uf8=";
|
|
</script>
|
|
|
|
<script
|
|
id="html_notice_dialog_script"
|
|
src="https://www.genspark.ai/notice_dialog.js"
|
|
></script>
|