130 lines
7.0 KiB
HTML
130 lines
7.0 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Журнал выдачи спецодежды</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body class="bg-gray-50 min-h-screen">
|
||
<div class="container mx-auto px-4 py-8 max-w-7xl">
|
||
<!-- Заголовок -->
|
||
<header class="mb-8">
|
||
<h1 class="text-3xl font-bold text-gray-800 mb-2">📦 Журнал выдачи спецодежды</h1>
|
||
<p class="text-gray-600">Учёт выдачи средств индивидуальной защиты сотрудникам</p>
|
||
</header>
|
||
|
||
<!-- Счётчики -->
|
||
<div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
|
||
<div class="bg-white rounded-xl shadow-sm p-4 border border-gray-200">
|
||
<div class="text-sm text-gray-500 mb-1">Всего</div>
|
||
<div class="text-2xl font-bold text-gray-800" id="count-total">0</div>
|
||
</div>
|
||
<div class="bg-white rounded-xl shadow-sm p-4 border border-gray-200">
|
||
<div class="text-sm text-gray-500 mb-1">В носке</div>
|
||
<div class="text-2xl font-bold text-blue-600" id="count-worn">0</div>
|
||
</div>
|
||
<div class="bg-white rounded-xl shadow-sm p-4 border border-gray-200">
|
||
<div class="text-sm text-gray-500 mb-1">Сдано</div>
|
||
<div class="text-2xl font-bold text-green-600" id="count-returned">0</div>
|
||
</div>
|
||
<div class="bg-white rounded-xl shadow-sm p-4 border border-gray-200">
|
||
<div class="text-sm text-gray-500 mb-1">Просрочено</div>
|
||
<div class="text-2xl font-bold text-red-600" id="count-overdue">0</div>
|
||
</div>
|
||
<div class="bg-white rounded-xl shadow-sm p-4 border border-gray-200 flex items-center justify-center">
|
||
<button onclick="openModal()" class="w-full h-full flex items-center justify-center gap-2 text-blue-600 font-semibold hover:bg-blue-50 rounded-lg transition-colors">
|
||
<span class="text-xl">+</span> Добавить выдачу
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Поиск и фильтры -->
|
||
<div class="bg-white rounded-xl shadow-sm p-4 mb-6 border border-gray-200">
|
||
<div class="flex flex-col md:flex-row gap-4">
|
||
<div class="flex-1">
|
||
<input
|
||
type="text"
|
||
id="search"
|
||
placeholder="🔍 Поиск по ФИО или наименованию..."
|
||
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
oninput="renderTable()"
|
||
>
|
||
</div>
|
||
<div class="flex flex-wrap gap-2" id="filters">
|
||
<!-- Фильтры генерируются JS -->
|
||
</div>
|
||
<button onclick="exportToExcel()" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium whitespace-nowrap">
|
||
📊 Скачать в Excel
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Таблица -->
|
||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-6">
|
||
<div class="overflow-x-auto">
|
||
<table class="w-full">
|
||
<thead class="bg-gray-50">
|
||
<tr>
|
||
<th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">№</th>
|
||
<th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">ФИО сотрудника</th>
|
||
<th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Наименование</th>
|
||
<th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Дата выдачи</th>
|
||
<th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Дата возврата</th>
|
||
<th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Статус</th>
|
||
<th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Действия</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="table-body" class="divide-y divide-gray-200">
|
||
<!-- Строки генерируются JS -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Журнал изменений -->
|
||
<div class="bg-white rounded-xl shadow-sm p-6 border border-gray-200">
|
||
<h2 class="text-xl font-bold text-gray-800 mb-4">📋 Журнал изменений</h2>
|
||
<div id="log-container" class="space-y-2 max-h-64 overflow-y-auto">
|
||
<!-- Логи генерируются JS -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Модальное окно -->
|
||
<div id="modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
|
||
<div class="bg-white rounded-xl shadow-2xl p-6 w-full max-w-md mx-4">
|
||
<h2 class="text-2xl font-bold text-gray-800 mb-4" id="modal-title">Новая выдача</h2>
|
||
<form id="form" onsubmit="saveItem(event)">
|
||
<input type="hidden" id="edit-id">
|
||
<div class="space-y-4">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">ФИО сотрудника *</label>
|
||
<input type="text" id="form-fio" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Иванов И.И.">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">Наименование спецодежды *</label>
|
||
<input type="text" id="form-item" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Каска защитная">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">Дата выдачи *</label>
|
||
<input type="date" id="form-issue-date" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">Плановая дата возврата *</label>
|
||
<input type="date" id="form-return-date" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-3 mt-6">
|
||
<button type="submit" class="flex-1 bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors font-medium">Сохранить</button>
|
||
<button type="button" onclick="closeModal()" class="flex-1 bg-gray-200 text-gray-700 py-2 px-4 rounded-lg hover:bg-gray-300 transition-colors font-medium">Отмена</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|