152 lines
5.8 KiB
HTML
152 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" data-theme="auto">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Журнал выдачи спецодежды</title>
|
||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<strong>📦 Журнал выдачи спецодежды</strong>
|
||
<span class="kt-ai-spacer"></span>
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="exportToExcel()">📊 Скачать в Excel</button>
|
||
<button class="kt-ai-btn" data-variant="primary" onclick="openModal()">+ Добавить выдачу</button>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-hero" data-align="center" style="padding-top: var(--kt-ai-space-6); padding-bottom: var(--kt-ai-space-6);">
|
||
<div class="kt-ai-wrap">
|
||
<p class="kt-ai-hero-sub">Учёт выдачи средств индивидуальной защиты сотрудникам</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Счётчики -->
|
||
<section class="kt-ai-section" style="padding-top: 0; padding-bottom: var(--kt-ai-space-6);">
|
||
<div class="kt-ai-wrap" data-width="wide">
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-label">Всего</div>
|
||
<div class="stat-value" id="count-total">0</div>
|
||
</div>
|
||
<div class="stat-card stat-blue">
|
||
<div class="stat-label">В носке</div>
|
||
<div class="stat-value" id="count-worn">0</div>
|
||
</div>
|
||
<div class="stat-card stat-green">
|
||
<div class="stat-label">Сдано</div>
|
||
<div class="stat-value" id="count-returned">0</div>
|
||
</div>
|
||
<div class="stat-card stat-red">
|
||
<div class="stat-label">Просрочено</div>
|
||
<div class="stat-value" id="count-overdue">0</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Поиск и фильтры -->
|
||
<section class="kt-ai-section" style="padding-top: 0; padding-bottom: var(--kt-ai-space-6);">
|
||
<div class="kt-ai-wrap" data-width="wide">
|
||
<div class="search-filters-row">
|
||
<input
|
||
type="text"
|
||
id="search"
|
||
placeholder="🔍 Поиск по ФИО или наименованию..."
|
||
class="kt-ai-input search-input"
|
||
oninput="renderTable()"
|
||
>
|
||
<div class="filters-container" id="filters">
|
||
<!-- Фильтры генерируются JS -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Таблица -->
|
||
<section class="kt-ai-section" style="padding-top: 0; padding-bottom: var(--kt-ai-space-8);">
|
||
<div class="kt-ai-wrap" data-width="wide">
|
||
<div class="kt-ai-card table-container">
|
||
<div class="table-scroll">
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th class="col-num">№</th>
|
||
<th class="col-fio">ФИО сотрудника</th>
|
||
<th class="col-item">Наименование</th>
|
||
<th class="col-date">Дата выдачи</th>
|
||
<th class="col-date">Дата возврата</th>
|
||
<th class="col-status">Статус</th>
|
||
<th class="col-actions">Действия</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="table-body">
|
||
<!-- Строки генерируются JS -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Журнал изменений -->
|
||
<section class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap" data-width="wide">
|
||
<div class="kt-ai-section-head">
|
||
<h2>📋 Журнал изменений</h2>
|
||
<p>История всех операций с записями</p>
|
||
</div>
|
||
<div class="kt-ai-card">
|
||
<div id="log-container" class="log-container">
|
||
<!-- Логи генерируются JS -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 Журнал выдачи спецодежды</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>Локальное хранилище браузера</span>
|
||
</footer>
|
||
|
||
<!-- Модальное окно -->
|
||
<div id="modal" class="modal-overlay hidden">
|
||
<div class="modal-content">
|
||
<h2 class="text-2xl font-bold mb-6" id="modal-title">Новая выдача</h2>
|
||
<form id="form" onsubmit="saveItem(event)">
|
||
<input type="hidden" id="edit-id">
|
||
<div class="kt-ai-field">
|
||
<label class="kt-ai-field-label">ФИО сотрудника *</label>
|
||
<input type="text" id="form-fio" required class="kt-ai-input" placeholder="Иванов И.И.">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label class="kt-ai-field-label">Наименование спецодежды *</label>
|
||
<input type="text" id="form-item" required class="kt-ai-input" placeholder="Каска защитная">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label class="kt-ai-field-label">Дата выдачи *</label>
|
||
<input type="date" id="form-issue-date" required class="kt-ai-input">
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label class="kt-ai-field-label">Плановая дата возврата *</label>
|
||
<input type="date" id="form-return-date" required class="kt-ai-input">
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button type="submit" class="kt-ai-btn" data-variant="primary" data-size="lg">Сохранить</button>
|
||
<button type="button" onclick="closeModal()" class="kt-ai-btn" data-variant="ghost" data-size="lg">Отмена</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|