Spaces:
Running
Running
у меня есть EXcel файлы в которых находятся данные для BD для отчетов, правила, пользыватели, пароли и .т.д. Виды отчетов и как должны выглядеть. ключи. как мне это все тебе показать и обединить с проектом?
32e2400
verified
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EmployeeHub Pro - Система управления персоналом</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>👥</text></svg>"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { font-family: 'Inter', sans-serif; } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .card-shadow { | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| } | |
| .excel-table { | |
| border-collapse: collapse; | |
| } | |
| .excel-table td, .excel-table th { | |
| border: 1px solid #e5e7eb; | |
| padding: 8px; | |
| } | |
| .excel-table th { | |
| background-color: #f3f4f6; | |
| font-weight: 600; | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid #6366f1; | |
| color: #6366f1; | |
| } | |
| .cell-editing { | |
| background-color: #fef3c7 ; | |
| } | |
| .sidebar-item:hover { | |
| background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%); | |
| color: white; | |
| } | |
| .stat-card { | |
| transition: all 0.3s ease; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.15); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm border-b border-gray-200 fixed top-0 w-full z-50"> | |
| <div class="px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-16"> | |
| <div class="flex items-center"> | |
| <i data-feather="users" class="w-8 h-8 text-indigo-600 mr-3"></i> | |
| <h1 class="text-xl font-bold text-gray-900">EmployeeHub Pro</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button onclick="showNotifications()" class="relative p-2 rounded-lg hover:bg-gray-100 transition"> | |
| <i data-feather="bell" class="w-5 h-5 text-gray-600"></i> | |
| <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span> | |
| </button> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://static.photos/people/40x40/1" alt="User" class="w-10 h-10 rounded-full"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-900">Администратор</p> | |
| <p class="text-xs text-gray-500">HR Manager</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Container --> | |
| <div class="flex pt-16"> | |
| <!-- Sidebar --> | |
| <aside class="w-64 bg-white h-screen fixed left-0 shadow-lg"> | |
| <nav class="mt-8"> | |
| <a href="#" onclick="showDashboard()" class="sidebar-item flex items-center px-6 py-3 text-gray-700 hover:text-white transition"> | |
| <i data-feather="home" class="w-5 h-5 mr-3"></i> | |
| <span>Дашборд</span> | |
| </a> | |
| <a href="#" onclick="showEmployees()" class="sidebar-item flex items-center px-6 py-3 text-gray-700 hover:text-white transition"> | |
| <i data-feather="users" class="w-5 h-5 mr-3"></i> | |
| <span>Сотрудники</span> | |
| </a> | |
| <a href="#" onclick="showDocuments()" class="sidebar-item flex items-center px-6 py-3 text-gray-700 hover:text-white transition"> | |
| <i data-feather="file-text" class="w-5 h-5 mr-3"></i> | |
| <span>Документы</span> | |
| </a> | |
| <a href="#" onclick="showDataIntegration()" class="sidebar-item flex items-center px-6 py-3 text-gray-700 hover:text-white transition"> | |
| <i data-feather="database" class="w-5 h-5 mr-3"></i> | |
| <span>Интеграция данных</span> | |
| </a> | |
| <a href="#" onclick="showUpload()" class="sidebar-item flex items-center px-6 py-3 text-gray-700 hover:text-white transition"> | |
| <i data-feather="upload" class="w-5 h-5 mr-3"></i> | |
| <span>Загрузка Excel</span> | |
| </a> | |
| <a href="#" onclick="showReports()" class="sidebar-item flex items-center px-6 py-3 text-gray-700 hover:text-white transition"> | |
| <i data-feather="file-text" class="w-5 h-5 mr-3"></i> | |
| <span>Отчеты</span> | |
| </a> | |
| <a href="#" onclick="showAnalytics()" class="sidebar-item flex items-center px-6 py-3 text-gray-700 hover:text-white transition"> | |
| <i data-feather="bar-chart-2" class="w-5 h-5 mr-3"></i> | |
| <span>Аналитика</span> | |
| </a> | |
| </nav> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="ml-64 flex-1 p-8"> | |
| <!-- Dashboard Section --> | |
| <section id="dashboard" class="space-y-6"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-900">Панель управления</h2> | |
| <button onclick="exportData()" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center"> | |
| <i data-feather="download" class="w-4 h-4 mr-2"></i> | |
| Экспорт данных | |
| </button> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="stat-card bg-gradient-to-r from-blue-500 to-blue-600 p-6 rounded-xl text-white"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-blue-100">Общее количество</p> | |
| <p class="text-3xl font-bold mt-2">1,248</p> | |
| </div> | |
| <i data-feather="users" class="w-10 h-10 text-blue-200"></i> | |
| </div> | |
| </div> | |
| <div class="stat-card bg-gradient-to-r from-green-500 to-green-600 p-6 rounded-xl text-white"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-green-100">На площадке</p> | |
| <p class="text-3xl font-bold mt-2">892</p> | |
| </div> | |
| <i data-feather="check-circle" class="w-10 h-10 text-green-200"></i> | |
| </div> | |
| </div> | |
| <div class="stat-card bg-gradient-to-r from-purple-500 to-purple-600 p-6 rounded-xl text-white"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-purple-100">Удаленно</p> | |
| <p class="text-3xl font-bold mt-2">356</p> | |
| </div> | |
| <i data-feather="wifi" class="w-10 h-10 text-purple-200"></i> | |
| </div> | |
| </div> | |
| <div class="stat-card bg-gradient-to-r from-orange-500 to-orange-600 p-6 rounded-xl text-white"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-orange-100">В отпуске</p> | |
| <p class="text-3xl font-bold mt-2">128</p> | |
| </div> | |
| <i data-feather="calendar" class="w-10 h-10 text-orange-200"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts Section --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div class="bg-white p-6 rounded-xl card-shadow"> | |
| <h3 class="text-lg font-semibold mb-4">Распределение по отделам</h3> | |
| <canvas id="departmentChart"></canvas> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl card-shadow"> | |
| <h3 class="text-lg font-semibold mb-4">Ближайшие 3 дня</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg"> | |
| <div class="flex items-center"> | |
| <i data-feather="trending-up" class="w-5 h-5 text-blue-600 mr-2"></i> | |
| <span class="font-medium">Завтра</span> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm text-gray-600">Прилетают</p> | |
| <p class="font-bold text-blue-600">24</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg"> | |
| <div class="flex items-center"> | |
| <i data-feather="trending-down" class="w-5 h-5 text-green-600 mr-2"></i> | |
| <span class="font-medium">Завтра</span> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm text-gray-600">Улетают</p> | |
| <p class="font-bold text-green-600">18</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-purple-50 rounded-lg"> | |
| <div class="flex items-center"> | |
| <i data-feather="calendar" class="w-5 h-5 text-purple-600 mr-2"></i> | |
| <span class="font-medium">Послезавтра</span> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm text-gray-600">Смены</p> | |
| <p class="font-bold text-purple-600">12</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activities --> | |
| <div class="bg-white p-6 rounded-xl card-shadow"> | |
| <h3 class="text-lg font-semibold mb-4">Последние активности</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3"> | |
| <i data-feather="user-plus" class="w-5 h-5 text-green-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Новый сотрудник</p> | |
| <p class="text-sm text-gray-500">Иван Петров - IT отдел</p> | |
| </div> | |
| </div> | |
| <span class="text-sm text-gray-500">2 мин назад</span> | |
| </div> | |
| <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3"> | |
| <i data-feather="file-text" class="w-5 h-5 text-blue-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Обновлен документ</p> | |
| <p class="text-sm text-gray-500">Табель учета времени</p> | |
| </div> | |
| </div> | |
| <span class="text-sm text-gray-500">15 мин назад</span> | |
| </div> | |
| <div class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3"> | |
| <i data-feather="download" class="w-5 h-5 text-purple-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Выгружен отчет</p> | |
| <p class="text-sm text-gray-500">Отчет за декабрь</p> | |
| </div> | |
| </div> | |
| <span class="text-sm text-gray-500">1 час назад</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Employees Section --> | |
| <section id="employees" class="hidden"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-900">Сотрудники</h2> | |
| <div class="flex space-x-3"> | |
| <input type="text" placeholder="Поиск..." class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" onkeyup="searchEmployees(this.value)"> | |
| <button onclick="addEmployee()" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center"> | |
| <i data-feather="plus" class="w-4 h-4 mr-2"></i> | |
| Добавить | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Filter Tabs --> | |
| <div class="bg-white p-4 rounded-lg mb-6 flex space-x-6 border-b"> | |
| <button class="tab-active pb-2 font-medium" onclick="filterEmployees('all')">Все сотрудники</button> | |
| <button class="pb-2 font-medium text-gray-600 hover:text-gray-900" onclick="filterEmployees('onsite')">На площадке</button> | |
| <button class="pb-2 font-medium text-gray-600 hover:text-gray-900" onclick="filterEmployees('remote')">Удаленно</button> | |
| <button class="pb-2 font-medium text-gray-600 hover:text-gray-900" onclick="filterEmployees('vacation')">В отпуске</button> | |
| </div> | |
| <!-- Employees Table --> | |
| <div class="bg-white rounded-xl overflow-hidden"> | |
| <table class="w-full"> | |
| <thead class="bg-gray-50"> | |
| <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> | |
| </tr> | |
| </thead> | |
| <tbody id="employeesTable" class="bg-white divide-y divide-gray-200"> | |
| <!-- Employees will be inserted here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| <!-- Documents Section --> | |
| <section id="documents" class="hidden"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-900">Документы</h2> | |
| <button onclick="addDocument()" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center"> | |
| <i data-feather="plus" class="w-4 h-4 mr-2"></i> | |
| Новый документ | |
| </button> | |
| </div> | |
| <!-- Document Types --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div onclick="openDocumentTemplate('timesheet')" class="bg-white p-6 rounded-xl cursor-pointer hover:shadow-lg transition card-shadow"> | |
| <i data-feather="clock" class="w-10 h-10 text-indigo-600 mb-3"></i> | |
| <h3 class="font-semibold text-lg">Табель учета</h3> | |
| <p class="text-gray-600 text-sm mt-2">Формат Т-12, Т-13</p> | |
| </div> | |
| <div onclick="openDocumentTemplate('vacation')" class="bg-white p-6 rounded-xl cursor-pointer hover:shadow-lg transition card-shadow"> | |
| <i data-feather="umbrella" class="w-10 h-10 text-green-600 mb-3"></i> | |
| <h3 class="font-semibold text-lg">График отпусков</h3> | |
| <p class="text-gray-600 text-sm mt-2">Годовой план отпусков</p> | |
| </div> | |
| <div onclick="openDocumentTemplate('business')" class="bg-white p-6 rounded-xl cursor-pointer hover:shadow-lg transition card-shadow"> | |
| <i data-feather="briefcase" class="w-10 h-10 text-purple-600 mb-3"></i> | |
| <h3 class="font-semibold text-lg">Командировки</h3> | |
| <p class="text-gray-600 text-sm mt-2">Учет командировок</p> | |
| </div> | |
| </div> | |
| <!-- Document Editor --> | |
| <div id="documentEditor" class="hidden bg-white p-6 rounded-xl"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold">Редактор документа</h3> | |
| <div class="flex space-x-2"> | |
| <button onclick="saveDocument()" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition flex items-center"> | |
| <i data-feather="save" class="w-4 h-4 mr-2"></i> | |
| Сохранить | |
| </button> | |
| <button onclick="exportToExcel()" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition flex items-center"> | |
| <i data-feather="download" class="w-4 h-4 mr-2"></i> | |
| Excel | |
| </button> | |
| </div> | |
| </div> | |
| <div class="border-2 border-gray-200 rounded-lg p-4 overflow-auto max-h-96"> | |
| <table id="documentTable" class="excel-table w-full"> | |
| <!-- Document content will be inserted here --> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Data Integration Section --> | |
| <section id="dataIntegration" class="hidden"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-900">Интеграция данных из Excel</h2> | |
| <div class="flex space-x-3"> | |
| <button onclick="showIntegrationGuide()" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition flex items-center"> | |
| <i data-feather="help-circle" class="w-4 h-4 mr-2"></i> | |
| Инструкция | |
| </button> | |
| <button onclick="syncAllData()" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition flex items-center"> | |
| <i data-feather="refresh-cw" class="w-4 h-4 mr-2"></i> | |
| Синхронизировать все | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Data Sources Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"> | |
| <!-- Database Data --> | |
| <div class="bg-white p-6 rounded-xl card-shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center"> | |
| <i data-feather="database" class="w-6 h-6 text-blue-600"></i> | |
| </div> | |
| <span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">Активно</span> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">Данные для БД</h3> | |
| <p class="text-gray-600 text-sm mb-4">Основные данные сотрудников, структура отделов</p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Последняя синхронизация</span> | |
| <span class="text-gray-500">2 часа назад</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button onclick="uploadDatabaseData()" class="flex-1 bg-indigo-600 text-white px-3 py-2 rounded-lg hover:bg-indigo-700 transition text-sm"> | |
| Загрузить | |
| </button> | |
| <button onclick="previewDatabaseData()" class="flex-1 border border-gray-300 px-3 py-2 rounded-lg hover:bg-gray-50 transition text-sm"> | |
| Предпросмотр | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Reports Data --> | |
| <div class="bg-white p-6 rounded-xl card-shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center"> | |
| <i data-feather="file-text" class="w-6 h-6 text-purple-600"></i> | |
| </div> | |
| <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs font-medium rounded-full">Обновляется</span> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">Шаблоны отчетов</h3> | |
| <p class="text-gray-600 text-sm mb-4">Виды отчетов и форматы вывода данных</p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Доступно шаблонов</span> | |
| <span class="text-purple-600 font-medium">12</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-purple-600 h-2 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button onclick="uploadReportsData()" class="flex-1 bg-purple-600 text-white px-3 py-2 rounded-lg hover:bg-purple-700 transition text-sm"> | |
| Загрузить | |
| </button> | |
| <button onclick="previewReportsData()" class="flex-1 border border-gray-300 px-3 py-2 rounded-lg hover:bg-gray-50 transition text-sm"> | |
| Предпросмотр | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Rules Data --> | |
| <div class="bg-white p-6 rounded-xl card-shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center"> | |
| <i data-feather="shield" class="w-6 h-6 text-green-600"></i> | |
| </div> | |
| <span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">Активно</span> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">Правила доступа</h3> | |
| <p class="text-gray-600 text-sm mb-4">Правила, роли и разрешения пользователей</p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Правил загружено</span> | |
| <span class="text-green-600 font-medium">24</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-600 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button onclick="uploadRulesData()" class="flex-1 bg-green-600 text-white px-3 py-2 rounded-lg hover:bg-green-700 transition text-sm"> | |
| Загрузить | |
| </button> | |
| <button onclick="previewRulesData()" class="flex-1 border border-gray-300 px-3 py-2 rounded-lg hover:bg-gray-50 transition text-sm"> | |
| Предпросмотр | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Users Data --> | |
| <div class="bg-white p-6 rounded-xl card-shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center"> | |
| <i data-feather="users" class="w-6 h-6 text-orange-600"></i> | |
| </div> | |
| <span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">Активно</span> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">Пользователи</h3> | |
| <p class="text-gray-600 text-sm mb-4">Учетные записи и права доступа</p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Пользователей загружено</span> | |
| <span class="text-orange-600 font-medium">156</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-orange-600 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button onclick="uploadUsersData()" class="flex-1 bg-orange-600 text-white px-3 py-2 rounded-lg hover:bg-orange-700 transition text-sm"> | |
| Загрузить | |
| </button> | |
| <button onclick="previewUsersData()" class="flex-1 border border-gray-300 px-3 py-2 rounded-lg hover:bg-gray-50 transition text-sm"> | |
| Предпросмотр | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Keys Data --> | |
| <div class="bg-white p-6 rounded-xl card-shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center"> | |
| <i data-feather="key" class="w-6 h-6 text-red-600"></i> | |
| </div> | |
| <span class="px-2 py-1 bg-red-100 text-red-800 text-xs font-medium rounded-full">Защищено</span> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">Ключи доступа</h3> | |
| <p class="text-gray-600 text-sm mb-4">API ключи и пароли доступа</p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Ключей в хранилище</span> | |
| <span class="text-red-600 font-medium">8</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-red-600 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button onclick="uploadKeysData()" class="flex-1 bg-red-600 text-white px-3 py-2 rounded-lg hover:bg-red-700 transition text-sm"> | |
| Загрузить | |
| </button> | |
| <button onclick="showKeysManager()" class="flex-1 border border-gray-300 px-3 py-2 rounded-lg hover:bg-gray-50 transition text-sm"> | |
| Управление | |
| </button> | |
| </div> | |
| </div> | |
| <!-- System Config --> | |
| <div class="bg-white p-6 rounded-xl card-shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center"> | |
| <i data-feather="settings" class="w-6 h-6 text-gray-600"></i> | |
| </div> | |
| <span class="px-2 py-1 bg-gray-100 text-gray-800 text-xs font-medium rounded-full">Настройки</span> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">Конфигурация</h3> | |
| <p class="text-gray-600 text-sm mb-4">Системные настройки и параметры</p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Настроек применено</span> | |
| <span class="text-gray-600 font-medium">42</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-gray-600 h-2 rounded-full" style="width: 88%"></div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button onclick="uploadConfigData()" class="flex-1 bg-gray-600 text-white px-3 py-2 rounded-lg hover:bg-gray-700 transition text-sm"> | |
| Загрузить | |
| </button> | |
| <button onclick="showConfigEditor()" class="flex-1 border border-gray-300 px-3 py-2 rounded-lg hover:bg-gray-50 transition text-sm"> | |
| Редактор | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Integration Status --> | |
| <div class="bg-white p-6 rounded-xl card-shadow"> | |
| <h3 class="text-lg font-semibold mb-4">Статус интеграции</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between p-4 bg-green-50 rounded-lg"> | |
| <div class="flex items-center"> | |
| <i data-feather="check-circle" class="w-5 h-5 text-green-600 mr-3"></i> | |
| <div> | |
| <p class="font-medium">База данных</p> | |
| <p class="text-sm text-gray-600">Все данные успешно синхронизированы</p> | |
| </div> | |
| </div> | |
| <span class="text-sm text-green-600 font-medium">Обновлено</span> | |
| </div> | |
| <div class="flex items-center justify-between p-4 bg-yellow-50 rounded-lg"> | |
| <div class="flex items-center"> | |
| <i data-feather="alert-triangle" class="w-5 h-5 text-yellow-600 mr-3"></i> | |
| <div> | |
| <p class="font-medium">Отчеты</p> | |
| <p class="text-sm text-gray-600">Требуется обновление 3 шаблона</p> | |
| </div> | |
| </div> | |
| <button onclick="updateReports()" class="text-sm text-yellow-600 font-medium hover:text-yellow-700">Обновить</button> | |
| </div> | |
| <div class="flex items-center justify-between p-4 bg-green-50 rounded-lg"> | |
| <div class="flex items-center"> | |
| <i data-feather="check-circle" class="w-5 h-5 text-green-600 mr-3"></i> | |
| <div> | |
| <p class="font-medium">Пользователи</p> | |
| <p class="text-sm text-gray-600">156 учетных записей активно</p> | |
| </div> | |
| </div> | |
| <span class="text-sm text-green-600 font-medium">Обновлено</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Reports Section --> | |
| <section id="reports" class="hidden"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-900">Управление отчетами</h2> | |
| <div class="flex space-x-3"> | |
| <select onchange="filterReportTemplates(this.value)" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option value="all">Все типы</option> | |
| <option value="monthly">Ежемесячные</option> | |
| <option value="quarterly">Квартальные</option> | |
| <option value="yearly">Годовые</option> | |
| <option value="custom">Пользовательские</option> | |
| </select> | |
| <button onclick="createNewReport()" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center"> | |
| <i data-feather="plus" class="w-4 h-4 mr-2"></i> | |
| Новый отчет | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Report Templates Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Monthly Staff Report --> | |
| <div class="bg-white p-6 rounded-xl card-shadow hover:shadow-xl transition"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">Ежемесячный</span> | |
| <button onclick="editReportTemplate('monthly_staff')" class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <i data-feather="users" class="w-10 h-10 text-blue-600 mb-3"></i> | |
| <h3 class="font-semibold text-lg mb-2">Сводка по персоналу</h3> | |
| <p class="text-gray-600 text-sm mb-4">Количество сотрудников по отделам и статусам</p> | |
| <div class="text-sm text-gray-500 mb-4"> | |
| <p>Период: Ежемесячно</p> | |
| <p>Формат: Excel, PDF</p> | |
| <p>Последний запуск: 5 дней назад</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button onclick="generateReport('monthly_staff')" class="flex-1 bg-blue-600 text-white px-3 py-2 rounded-lg hover:bg-blue-700 transition text-sm"> | |
| Сформировать | |
| </button> | |
| <button onclick="previewReport('monthly_staff')" class="flex-1 border border-gray-300 px-3 py-2 rounded-lg hover:bg-gray-50 transition text-sm"> | |
| Предпросмотр | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Attendance Report --> | |
| <div class="bg-white p-6 rounded-xl card-shadow hover:shadow-xl transition"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <span class="px-3 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">Ежемесячный</span> | |
| <button onclick="editReportTemplate('attendance')" class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <i data-feather="calendar" class="w-10 h-10 text-green-600 mb-3"></i> | |
| <h3 class="font-semibold text-lg mb-2">Посещаемость</h3> | |
| <p class="text-gray-600 text-sm mb-4">Отчет по посещаемости и табелю времени</p> | |
| <div class="text-sm text-gray-500 mb-4"> | |
| <p>Период: Ежемесячно</p> | |
| <p>Формат: Excel, PDF</p> | |
| <p>Последний запуск: 1 день назад</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button onclick="generateReport('attendance')" class="flex-1 bg-green-600 text-white px-3 py-2 rounded-lg hover:bg-green-700 transition text-sm"> | |
| Сформировать | |
| </button> | |
| <button onclick="previewReport('attendance')" class="flex-1 border border-gray-300 px-3 py-2 rounded-lg hover:bg-gray-50 transition text-sm"> | |
| Предпросмотр | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Turnover Report --> | |
| <div class="bg-white p-6 rounded-xl card-shadow hover:shadow-xl transition"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <span class="px-3 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded-full">Квартальный</span> | |
| <button onclick="editReportTemplate('turnover')" class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <i data-feather="trending-up" class="w-10 h-10 text-purple-600 mb-3"></i> | |
| <h3 class="font-semibold text-lg mb-2">Текучесть кадров</h3> | |
| <p class="text-gray-600 text-sm mb-4">Анализ текучести персонала</p> | |
| <div class="text-sm text-gray-500 mb-4"> | |
| <p>Период: Квартально</p> | |
| <p>Формат: Excel, PDF</p> | |
| <p>Последний запуск: 1 неделю назад</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button onclick="generateReport('turnover')" class="flex-1 bg-purple-600 text-white px-3 py-2 rounded-lg hover:bg-purple-700 transition text-sm"> | |
| Сформировать | |
| </button> | |
| <button onclick="previewReport('turnover')" class="flex-1 border border-gray-300 px-3 py-2 rounded-lg hover:bg-gray-50 transition text-sm"> | |
| Предпросмотр | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Vacation Schedule --> | |
| <div class="bg-white p-6 rounded-xl card-shadow hover:shadow-xl transition"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <span class="px-3 py-1 bg-orange-100 text-orange-800 text-xs font-medium rounded-full">Годовой</span> | |
| <button onclick="editReportTemplate('vacation')" class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <i data-feather="sun" class="w-10 h-10 text-orange-600 mb-3"></i> | |
| <h3 class="font-semibold text-lg mb-2">График отпусков</h3> | |
| <p class="text-gray-600 text-sm mb-4">Планирование и учет отпусков</p> | |
| <div class="text-sm text-gray-500 mb-4"> | |
| <p>Период: Ежегодно</p> | |
| <p>Формат: Excel, PDF</p> | |
| <p>Последний запуск: 2 недели назад</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button onclick="generateReport('vacation')" class="flex-1 bg-orange-600 text-white px-3 py-2 rounded-lg hover:bg-orange-700 transition text-sm"> | |
| Сформировать | |
| </button> | |
| <button onclick="previewReport('vacation')" class="flex-1 border border-gray-300 px-3 py-2 rounded-lg hover:bg-gray-50 transition text-sm"> | |
| Предпросмотр | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Department Performance --> | |
| <div class="bg-white p-6 rounded-xl card-shadow hover:shadow-xl transition"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <span class="px-3 py-1 bg-red-100 text-red-800 text-xs font-medium rounded-full">Квартальный</span> | |
| <button onclick="editReportTemplate('performance')" class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <i data-feather="target" class="w-10 h-10 text-red-600 mb-3"></i> | |
| <h3 class="font-semibold text-lg mb-2">KPI отделов</h3> | |
| <p class="text-gray-600 text-sm mb-4">Ключевые показатели эффективности</p> | |
| <div class="text-sm text-gray-500 mb-4"> | |
| <p>Период: Квартально</p> | |
| <p>Формат: Excel, PDF</p> | |
| <p>Последний запуск: 3 дня назад</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button onclick="generateReport('performance')" class="flex-1 bg-red-600 text-white px-3 py-2 rounded-lg hover:bg-red-700 transition text-sm"> | |
| Сформировать | |
| </button> | |
| <button onclick="previewReport('performance')" class="flex-1 border border-gray-300 px-3 py-2 rounded-lg hover:bg-gray-50 transition text-sm"> | |
| Предпросмотр | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Salary Report --> | |
| <div class="bg-white p-6 rounded-xl card-shadow hover:shadow-xl transition"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded-full">Ежемесячный</span> | |
| <button onclick="editReportTemplate('salary')" class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <i data-feather="dollar-sign" class="w-10 h-10 text-indigo-600 mb-3"></i> | |
| <h3 class="font-semibold text-lg mb-2">Фонд оплаты труда</h3> | |
| <p class="text-gray-600 text-sm mb-4">Анализ ФОТ по периодам и отделам</p> | |
| <div class="text-sm text-gray-500 mb-4"> | |
| <p>Период: Ежемесячно</p> | |
| <p>Формат: Excel, PDF</p> | |
| <p>Последний запуск: 1 день назад</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button onclick="generateReport('salary')" class="flex-1 bg-indigo-600 text-white px-3 py-2 rounded-lg hover:bg-indigo-700 transition text-sm"> | |
| Сформировать | |
| </button> | |
| <button onclick="previewReport('salary')" class="flex-1 border border-gray-300 px-3 py-2 rounded-lg hover:bg-gray-50 transition text-sm"> | |
| Предпросмотр | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Report History --> | |
| <div class="bg-white p-6 rounded-xl mt-6 card-shadow"> | |
| <h3 class="text-lg font-semibold mb-4">История формирования отчетов</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead class="bg-gray-50"> | |
| <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> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">15.12.2023 14:30</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Сводка по персоналу</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Ежемесячный</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">Готов</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button onclick="downloadReport('monthly_staff_15122023')" class="text-indigo-600 hover:text-indigo-900 mr-3">Скачать</button> | |
| <button onclick="viewReport('monthly_staff_15122023')" class="text-green-600 hover:text-green-900">Просмотр</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">15.12.2023 12:15</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Посещаемость</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Ежемесячный</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">Готов</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button onclick="downloadReport('attendance_15122023')" class="text-indigo-600 hover:text-indigo-900 mr-3">Скачать</button> | |
| <button onclick="viewReport('attendance_15122023')" class="text-green-600 hover:text-green-900">Просмотр</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">14.12.2023 16:45</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Фонд оплаты труда</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Ежемесячный</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800">Формируется</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-gray-400 cursor-not-allowed mr-3">Скачать</button> | |
| <button class="text-gray-400 cursor-not-allowed">Просмотр</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Upload Section --> | |
| <section id="upload" class="hidden"> | |
| <div class="max-w-2xl mx-auto"> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-8">Загрузка данных из Excel</h2> | |
| <div class="bg-white p-8 rounded-xl card-shadow"> | |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-12 text-center hover:border-indigo-500 transition cursor-pointer" onclick="document.getElementById('fileInput').click()"> | |
| <i data-feather="upload-cloud" class="w-16 h-16 text-gray-400 mx-auto mb-4"></i> | |
| <p class="text-xl font-medium text-gray-700 mb-2">Перетащите файл Excel сюда</p> | |
| <p class="text-gray-500 mb-4">или нажмите для выбора</p> | |
| <input type="file" id="fileInput" accept=".xlsx,.xls,.csv" class="hidden" onchange="handleFileUpload(event)"> | |
| <button class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition"> | |
| Выбрать файл | |
| </button> | |
| </div> | |
| <div id="uploadPreview" class="mt-8 hidden"> | |
| <h3 class="text-lg font-semibold mb-4">Предпросмотр данных</h3> | |
| <div class="border rounded-lg overflow-auto max-h-96"> | |
| <table id="previewTable" class="w-full"> | |
| <!-- Preview will be inserted here --> | |
| </table> | |
| </div> | |
| <div class="mt-6 flex space-x-3"> | |
| <button onclick="confirmUpload()" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-700 transition flex items-center"> | |
| <i data-feather="check" class="w-4 h-4 mr-2"></i> | |
| Подтвердить загрузку | |
| </button> | |
| <button onclick="cancelUpload()" class="bg-gray-600 text-white px-6 py-2 rounded-lg hover:bg-gray-700 transition flex items-center"> | |
| <i data-feather="x" class="w-4 h-4 mr-2"></i> | |
| Отмена | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Instructions --> | |
| <div class="bg-blue-50 p-6 rounded-xl mt-6"> | |
| <h3 class="font-semibold text-blue-900 mb-3">Требования к файлу:</h3> | |
| <ul class="space-y-2 text-blue-800"> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0"></i> | |
| <span>Формат файла: .xlsx, .xls или .csv</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0"></i> | |
| <span>Обязательные колонки: ФИО, Отдел, Должность, Телефон</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check-circle" class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0"></i> | |
| <span>Первая строка должна содержать заголовки колонок</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Analytics Section --> | |
| <section id="analytics" class="hidden"> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-8">Аналитика и отчеты</h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div class="bg-white p-6 rounded-xl card-shadow"> | |
| <h3 class="text-lg font-semibold mb-4">Динамика штата</h3> | |
| <canvas id="staffDynamicsChart"></canvas> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl card-shadow"> | |
| <h3 class="text-lg font-semibold mb-4">Текучесть кадров</h3> | |
| <canvas id="turnoverChart"></canvas> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl card-shadow"> | |
| <h3 class="text-lg font-semibold mb-4">Возрастная структура</h3> | |
| <canvas id="ageChart"></canvas> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl card-shadow"> | |
| <h3 class="text-lg font-semibold mb-4">Загрузка отделов</h3> | |
| <canvas id="workloadChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Report Generator --> | |
| <div class="bg-white p-6 rounded-xl mt-6 card-shadow"> | |
| <h3 class="text-lg font-semibold mb-4">Генератор отчетов</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Тип отчета</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option>Ежемесячный отчет</option> | |
| <option>Квартальный отчет</option> | |
| <option>Годовой отчет</option> | |
| <option>Отчет по отделу</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Период</label> | |
| <input type="date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| <div class="flex items-end"> | |
| <button onclick="generateReport()" class="w-full bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center justify-center"> | |
| <i data-feather="file-text" class="w-4 h-4 mr-2"></i> | |
| Сформировать | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <!-- Modal --> | |
| <div id="modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center"> | |
| <div class="bg-white rounded-xl p-6 max-w-2xl w-full mx-4 max-h-screen overflow-y-auto"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 id="modalTitle" class="text-xl font-semibold">Добавить сотрудника</h3> | |
| <button onclick="closeModal()" class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="x" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <div id="modalContent"> | |
| <!-- Modal content will be inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/sidebar.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |