1026 lines
39 KiB
HTML
1026 lines
39 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Система учета ежедневной кассовой статистики</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"
|
||
/>
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
</head>
|
||
<body class="bg-gray-100">
|
||
<!-- Контейнер приложения -->
|
||
<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">
|
||
Система учета кассовой статистики
|
||
</h1>
|
||
<p class="text-gray-600 mt-2">Войдите в систему</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>Логин
|
||
</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>Пароль
|
||
</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>Войти
|
||
</button>
|
||
|
||
<div class="mt-4 text-sm text-gray-600 text-center">
|
||
<div class="mb-2"><strong>Тестовые аккаунты:</strong></div>
|
||
<div>Админ: admin / admin123</div>
|
||
<div>Кассир: cashier1 / password123</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>Кассовый отчет
|
||
</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>Отчет за сегодня
|
||
</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>Выйти
|
||
</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-store mr-2"></i>Магазин *
|
||
</label>
|
||
<select
|
||
id="storeSelect"
|
||
class="form-input w-full px-3 py-2 rounded-lg"
|
||
required
|
||
>
|
||
<option value="">Выберите магазин</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"
|
||
>Income (Выручка за день) * €</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"
|
||
>Total income (Общий доход) €</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>Зарплаты (Wages)
|
||
</h3>
|
||
|
||
<div id="wagesContainer">
|
||
<div
|
||
class="wage-row grid grid-cols-1 md:grid-cols-3 gap-4 mb-3"
|
||
>
|
||
<input
|
||
type="text"
|
||
placeholder="Имя сотрудника"
|
||
class="wage-name form-input px-3 py-2 rounded-lg"
|
||
/>
|
||
<input
|
||
type="number"
|
||
step="0.01"
|
||
placeholder="Сумма €"
|
||
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>Добавить сотрудника
|
||
</button>
|
||
|
||
<div class="mt-4 text-right">
|
||
<span class="text-lg font-bold"
|
||
>Total wages: €<span id="totalWages">0.00</span></span
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Расходы -->
|
||
<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>Расходы (Expenses)
|
||
</h3>
|
||
|
||
<div id="expensesContainer">
|
||
<div
|
||
class="expense-row grid grid-cols-1 md:grid-cols-3 gap-4 mb-3"
|
||
>
|
||
<input
|
||
type="text"
|
||
placeholder="Название расхода"
|
||
class="expense-name form-input px-3 py-2 rounded-lg"
|
||
/>
|
||
<input
|
||
type="number"
|
||
step="0.01"
|
||
placeholder="Сумма €"
|
||
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>Добавить расход
|
||
</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>
|
||
|
||
<!-- Итоги -->
|
||
<div class="report-section">
|
||
<h3 class="text-lg font-bold text-gray-700 mb-4">
|
||
<i class="fas fa-calculator mr-2"></i>Итого
|
||
</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"
|
||
>Total income €</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"
|
||
>Total expenses €</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>Сохранить отчет
|
||
</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>Админ панель
|
||
</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>Выйти
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Навигация -->
|
||
<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>Отчеты
|
||
</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>Пользователи
|
||
</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>Магазины
|
||
</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>
|
||
|
||
<!-- Контент вкладок -->
|
||
<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"
|
||
>
|
||
Общий доход
|
||
</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"
|
||
>
|
||
Общие расходы
|
||
</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"
|
||
>
|
||
Количество отчетов
|
||
</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>
|
||
|
||
<!-- Графики -->
|
||
<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>Доходы по
|
||
дням
|
||
</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>Расходы по
|
||
категориям
|
||
</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>Сравнение
|
||
по магазинам
|
||
</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>Тренды
|
||
продаж
|
||
</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>Управление отчетами
|
||
</h2>
|
||
</div>
|
||
|
||
<!-- Фильтры -->
|
||
<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"
|
||
>Магазин</label
|
||
>
|
||
<select
|
||
id="filterStore"
|
||
class="form-input w-full px-3 py-2 rounded-lg"
|
||
>
|
||
<option value="">Все магазины</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1"
|
||
>Дата от</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"
|
||
>Дата до</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>Поиск
|
||
</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>
|
||
|
||
<!-- Таблица отчетов -->
|
||
<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"
|
||
>
|
||
Дата
|
||
</th>
|
||
<th
|
||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||
>
|
||
Магазин
|
||
</th>
|
||
<th
|
||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||
>
|
||
Доход
|
||
</th>
|
||
<th
|
||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||
>
|
||
Расходы
|
||
</th>
|
||
<th
|
||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||
>
|
||
Прибыль
|
||
</th>
|
||
<th
|
||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||
>
|
||
Пользователь
|
||
</th>
|
||
<th
|
||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||
>
|
||
Статус
|
||
</th>
|
||
<th
|
||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||
>
|
||
Действия
|
||
</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>Управление пользователями
|
||
</h2>
|
||
<button
|
||
id="addUserBtn"
|
||
class="btn-primary text-white px-4 py-2 rounded-lg"
|
||
>
|
||
<i class="fas fa-plus mr-2"></i>Добавить пользователя
|
||
</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"
|
||
>
|
||
Логин
|
||
</th>
|
||
<th
|
||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||
>
|
||
Роль
|
||
</th>
|
||
<th
|
||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||
>
|
||
Доступные магазины
|
||
</th>
|
||
<th
|
||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||
>
|
||
Действия
|
||
</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>Управление магазинами
|
||
</h2>
|
||
<button
|
||
id="addStoreBtn"
|
||
class="btn-primary text-white px-4 py-2 rounded-lg"
|
||
>
|
||
<i class="fas fa-plus mr-2"></i>Добавить магазин
|
||
</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"
|
||
>
|
||
Название
|
||
</th>
|
||
<th
|
||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||
>
|
||
Количество отчетов
|
||
</th>
|
||
<th
|
||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||
>
|
||
Действия
|
||
</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>TODO лист - Отслеживание
|
||
изменений
|
||
</h2>
|
||
<button
|
||
id="addTodoBtn"
|
||
class="btn-primary text-white px-4 py-2 rounded-lg"
|
||
>
|
||
<i class="fas fa-plus mr-2"></i>Добавить задачу
|
||
</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">
|
||
Просмотр отчета
|
||
</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">
|
||
Пользователь
|
||
</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"
|
||
>Логин</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"
|
||
>Пароль</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="Показать пароль"
|
||
>
|
||
<span id="eyeIcon">👁️</span>
|
||
</button>
|
||
</div>
|
||
<small class="text-gray-500"
|
||
>Если не хотите менять пароль, оставьте поле без
|
||
изменений</small
|
||
>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<label class="block text-gray-700 text-sm font-bold mb-2"
|
||
>Роль</label
|
||
>
|
||
<select
|
||
id="userRole"
|
||
class="form-input w-full px-3 py-2 rounded-lg"
|
||
required
|
||
>
|
||
<option value="employee">Сотрудник</option>
|
||
<option value="admin">Администратор</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<label class="block text-gray-700 text-sm font-bold mb-2"
|
||
>Доступные магазины</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>Сохранить
|
||
</button>
|
||
<button
|
||
id="cancelUserBtn"
|
||
class="bg-gray-500 text-white px-4 py-2 rounded-lg"
|
||
>
|
||
<i class="fas fa-times mr-2"></i>Отмена
|
||
</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">
|
||
Магазин
|
||
</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"
|
||
>Название магазина</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>Сохранить
|
||
</button>
|
||
<button
|
||
id="cancelStoreBtn"
|
||
class="bg-gray-500 text-white px-4 py-2 rounded-lg"
|
||
>
|
||
<i class="fas fa-times mr-2"></i>Отмена
|
||
</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">
|
||
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"
|
||
>Заголовок</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"
|
||
>Описание</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"
|
||
>Приоритет</label
|
||
>
|
||
<select
|
||
id="todoPriority"
|
||
class="form-input w-full px-3 py-2 rounded-lg"
|
||
>
|
||
<option value="low">Низкий</option>
|
||
<option value="medium">Средний</option>
|
||
<option value="high">Высокий</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>Сохранить
|
||
</button>
|
||
<button
|
||
id="cancelTodoBtn"
|
||
class="bg-gray-500 text-white px-4 py-2 rounded-lg"
|
||
>
|
||
<i class="fas fa-times mr-2"></i>Отмена
|
||
</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">Успешно сохранено!</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>
|