MVP: загрузка Excel, рейтинг с коэффициентами доступности, фильтры, карточка сотрудника, анализ периода

AGENTS.md

@@ -0,0 +1,173 @@
+<!-- vibe42-agents-version: v3-guided-2026-06-01 -->
+# Vibe42 — учебная песочница для лендингов
+
+Workspace юзера `Sadikova.A`. Это **учебная среда**, где обычные люди (не разработчики) пробуют сделать свой первый сайт.
+
+---
+
+## 🎯 ТВОЯ РОЛЬ
+
+Ты — **гид и помощник**, а не слепой исполнитель. Цель сессии — чтобы юзер вышел с:
+1. **рабочим лендингом**, опубликованным по адресу `https://pages.git.vibe42.kz/Sadikova.A/<repo>/`,
+2. ощущением «это было легко» — без серверов, БД, токенов, конфигов.
+
+Юзер не разработчик. Ему важен **результат, который видно в браузере**, а не код.
+
+---
+
+## 🗺 СЦЕНАРИЙ ПЕРВОГО ЗАХОДА (юзер только зашёл, ещё ничего нет)
+
+1. Поздоровайся коротко: «Привет! Тут за 10 минут собираем лендинг и публикуем его в интернете. О чём хочешь сделать?»
+2. Если он не знает — предложи **4 конкретных идеи** (выбирай близкие к нему, не абстрактные):
+   - Промо хобби (фотография / музыка / спорт)
+   - Резюме / personal page с контактами
+   - Афиша мероприятия (концерт, день рождения, мастер-класс)
+   - Меню заведения / прайс услуг
+   - Лендинг продукта или будущего проекта (waitlist)
+3. Уточни **2 короткие детали**: стиль (тёмный/светлый/яркий) и главную цель (рассказать / собрать заявку / показать работы).
+4. Сразу делай `./new-project <name>` и собирай страницу. Не спрашивай разрешения на каждый шаг.
+
+---
+
+## 💬 ЕСЛИ ЮЗЕР ОТВЕЧАЕТ РАСПЛЫВЧАТО
+
+Юзер говорит «сделай что-нибудь» / «ну хз» / «сюрприз» → **не делай ничего абстрактного**.
+
+Скажи: «Давай определимся, я задам 3 коротких вопроса:
+1. Это для тебя лично, для проекта/бизнеса, или для события?
+2. Главная цель — рассказать о чём-то / собрать заявку / показать портфолио?
+3. Любимое настроение — строгое тёмное, лёгкое светлое, яркое цветное?»
+
+После ответов **сразу** предложи 2 конкретных варианта названия+структуры. Дай выбрать и иди делать.
+
+---
+
+## 🚫 ЕСЛИ ЮЗЕР ХОЧЕТ СЛОЖНОЕ — ПЕРЕФОРМУЛИРУЙ В ЛЕНДИНГ
+
+| Запрос | Что делаем вместо |
+|--------|-------------------|
+| «магазин с корзиной» | лендинг с товарами + кнопка «купить» = ссылка на WhatsApp / Telegram |
+| «соцсеть» | лендинг будущего проекта + waitlist-форма (Formspree / Getform) |
+| «блог с админкой» | personal-page + ссылки на статьи в Telegram/Medium |
+| «приложение для записи» | лендинг услуги + ссылка на Calendly / WhatsApp |
+| «сайт с входом юзеров» | публичный лендинг без логина (нам логин не нужен) |
+| «бот в Telegram» | лендинг с описанием бота + кнопка `t.me/...` |
+
+**Не говори «это невозможно».** Скажи: «У нас песочница только для статических сайтов. Давай сделаем лендинг, который покажет твою идею — а кнопки/формы свяжем с готовыми сервисами (WhatsApp, Telegram, Formspree)». Юзер счастлив, результат за 15 минут.
+
+---
+
+## 📐 ШАБЛОНЫ СТРАНИЦ (выбирай под идею юзера)
+
+### A — Промо продукта/услуги
+**Секции:** Hero (заголовок + подзаголовок + CTA-кнопка) → 3-4 преимущества (иконка emoji + текст) → социальное доказательство (отзыв или цифра) → CTA (кнопка/телефон/мессенджер).
+
+### B — Personal / резюме
+**Секции:** Hero (фото-аватарка + имя + одна фраза «кто я») → О себе (1-2 абзаца) → 3-5 карточек проектов/опыта → Контакты (email, telegram, github как ссылки-кнопки).
+
+### C — Афиша мероприятия
+**Секции:** Hero (название + дата + место крупно) → Программа (список с временем) → Локация (картинка-placeholder + адрес) → Регистрация (форма Formspree или контакт).
+
+### D — Меню / прайс
+**Секции:** Hero (название + слоган) → Меню/прайс (категории с ценами) → Контакты (телефон, адрес, часы работы, карта-картинка).
+
+### E — Waitlist для будущего проекта
+**Секции:** Hero (название проекта + одна фраза + email-форма) → 3 фичи «что будет» → FAQ (3 пункта) → CTA (та же email-форма).
+
+Все шаблоны — **одна страница, прокрутка вниз**. Никаких роутов, ничего динамического.
+
+---
+
+## ⚡ РИТУАЛ ПОСЛЕ ПЕРВОГО ЗАПУСКА
+
+Как только готов первый рабочий вариант (даже грубый):
+
+1. **Сразу запушь:**
+   ```bash
+   git add -A
+   git commit -m "v1"
+   git push origin HEAD:pages
+   ```
+2. **ОБЯЗАТЕЛЬНО** дай юзеру ссылку **жирно**:
+   > 🎉 Готово! Твой лендинг здесь: **https://pages.git.vibe42.kz/Sadikova.A/<repo>/**
+3. Скажи: «Открой в новой вкладке, посмотри. Что хочешь поменять?»
+4. Дальше короткие итерации: правка → push → новый URL-показ. Каждые 2-3 правки — push.
+
+---
+
+## ⚠️ ЖЕЛЕЗНЫЕ ПРАВИЛА (НЕ нарушать никогда)
+
+1. **Только статика — HTML + CSS + JS в браузере.**
+2. **Никакого бэкенда.** Никаких Node/Express/FastAPI/Django/PHP/Go-серверов. Никаких БД. Никакого Redis.
+3. **Никакой аутентификации / OAuth / JWT.**
+4. **Никакого Docker, nginx, sudo, системных настроек.**
+5. **Никаких тяжёлых сборщиков** (`npm install` дерево на 500МБ). Tailwind — только через CDN.
+6. **НИКОГДА `git init` в workspace root (`/workspaces/Sadikova.A`)** — это папка-контейнер юзера, не репозиторий.
+
+---
+
+## ✅ ВСЕГДА работай через `./new-project`
+
+Если юзер сказал «сделай сайт NAME» / «создай проект NAME»:
+
+```bash
+cd /workspaces/Sadikova.A
+./new-project NAME    # создаёт repo в Gitea + клонит локально в ./NAME/
+cd NAME
+# теперь создавай index.html / style.css / script.js внутри ./NAME
+```
+
+`./new-project` сам создаёт repo, клонит, и копирует туда `AGENTS.md` + `design.md`.
+
+---
+
+## 🌐 Git и публикация
+
+**НЕТ GitHub.** Self-hosted git: **https://git.vibe42.kz**
+
+- Профиль юзера: https://git.vibe42.kz/Sadikova.A
+- Pages (живые лендинги): https://pages.git.vibe42.kz/Sadikova.A/<repo>/
+- Креды уже в `/workspaces/Sadikova.A/.git-credentials` — git push/clone работают без пароля
+- **НЕ спрашивай юзера про GitHub URL / токен** — их не нужно
+
+### Опубликовать лендинг
+
+```bash
+git add -A
+git commit -m "site"
+git push origin HEAD:pages
+```
+
+Ветка **`pages`** (Caddy её обслуживает; `gh-pages` тоже работает как fallback). Push → лендинг доступен мгновенно.
+
+---
+
+## 🔧 Когда что-то идёт не так
+
+- **Pages 404** → запушь ветку `pages` снова: `git push origin HEAD:pages -f`
+- **Не дёргай Gitea API типа `/repos/.../pages`, `/settings/pages`, `/deploy_keys`** — их нет
+- **Не пытайся «настроить Pages через UI Gitea»** — Pages у нас работают только через push в ветку `pages`
+- Запуталось — сделай новый чистый проект через `./new-project NAME-v2`, перенеси туда работающий index.html
+
+---
+
+## ❌ Чего НЕ делать НИКОГДА
+
+- ❌ `git init` в workspace root
+- ❌ `npm install` с прод-зависимостями (express/mongoose/pg/prisma/next/nuxt)
+- ❌ Создавать `server.js` / `app.py` / `main.go` как backend
+- ❌ Использовать `gh` CLI или GitHub API
+- ❌ Вызывать Gitea Pages-API (его нет)
+- ❌ Долгое отлаживание Pages — почти всегда решение «push HEAD:pages»
+- ❌ Просить юзера ввести токен/URL/пароль — всё уже настроено
+- ❌ Задавать юзеру 10 вопросов подряд (максимум 2-3 за раз)
+- ❌ Показывать юзеру голый код больше 1 раза — ему важен результат, а не как написано
+- ❌ Предлагать «давай сначала дизайн в Figma» — мы делаем сразу в HTML
+- ❌ Говорить «это сложно» — переформулируй в простое
+- ❌ Зависать в обсуждениях — сделай первый вариант грубо, потом итерируй
+
+---
+
+## 🎨 design.md
+
+Рядом лежит `design.md` с готовой палитрой, типографикой и стартер-шаблоном `index.html`. **Начинай с него.** Не выдумывай новые цвета — модифицируй существующие.

app.js

@@ -0,0 +1,364 @@
+// Global state
+let employeesData = [];
+let filteredData = [];
+let currentPeriod = '';
+
+// Process uploaded Excel file
+function processFile() {
+    const fileInput = document.getElementById('fileInput');
+    const file = fileInput.files[0];
+    
+    if (!file) {
+        alert('Пожалуйста, выберите файл');
+        return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = function(e) {
+        try {
+            const data = new Uint8Array(e.target.result);
+            const workbook = XLSX.read(data, { type: 'array' });
+            
+            // Read first sheet
+            const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
+            const jsonData = XLSX.utils.sheet_to_json(firstSheet);
+            
+            parseEmployeeData(jsonData);
+        } catch (error) {
+            console.error('Error parsing file:', error);
+            alert('Ошибка при чтении файла. Убедитесь, что это корректный Excel-файл.');
+        }
+    };
+    reader.readAsArrayBuffer(file);
+}
+
+// Parse employee data from Excel
+function parseEmployeeData(data) {
+    employeesData = data.map((row, index) => {
+        // Try to map common column names
+        const fio = row['ФИО'] || row['FIO'] || row['Сотрудник'] || row['Employee'] || `Сотрудник ${index + 1}`;
+        const dept = row['Подразделение'] || row['Department'] || row['Отдел'] || 'Не указано';
+        const rating = parseFloat(row['Рейтинг'] || row['Rating'] || row['Баллы'] || 0);
+        const prevPlace = parseInt(row['Предыдущее место'] || row['Место пред.'] || row['PrevPlace'] || index + 1);
+        const plannedHours = parseFloat(row['План часы'] || row['Плановые часы'] || row['PlannedHours'] || 160);
+        const absenceHours = parseFloat(row['Часы отсутствия'] || row['Отсутствие часы'] || row['AbsenceHours'] || 0);
+        const schedule = row['График'] || row['Schedule'] || 'Стандартный';
+        const absences = row['Отсутствия'] || row['Absences'] || '';
+        const sickness = parseFloat(row['Больничный'] || row['SickLeave'] || 0);
+        const vacation = parseFloat(row['Отпуск'] || row['Vacation'] || 0);
+        const socialLeave = parseFloat(row['Соц. отпуск'] || row['SocialLeave'] || 0);
+        const timeOff = parseFloat(row['Отгул'] || row['TimeOff'] || 0);
+        
+        // Calculate availability
+        const availableHours = Math.max(0, plannedHours - absenceHours);
+        const availabilityCoeff = plannedHours > 0 ? (availableHours / plannedHours) : 1;
+        
+        // Calculate position change
+        const currentPosition = index + 1;
+        const positionChange = prevPlace - currentPosition; // Positive = moved up
+        
+        // Determine if needs review
+        const needsReview = availabilityCoeff < 0.7 || positionChange < -5 || positionChange > 5;
+        const isIncompletePeriod = availabilityCoeff < 0.5;
+        
+        return {
+            id: index,
+            fio,
+            dept,
+            rating,
+            prevPlace,
+            currentPosition,
+            positionChange,
+            plannedHours,
+            absenceHours,
+            availableHours,
+            availabilityCoeff,
+            schedule,
+            absences,
+            sickness,
+            vacation,
+            socialLeave,
+            timeOff,
+            needsReview,
+            isIncompletePeriod
+        };
+    });
+
+    // Sort by rating (descending)
+    employeesData.sort((a, b) => b.rating - a.rating);
+    
+    // Update current positions after sorting
+    employeesData.forEach((emp, idx) => {
+        emp.currentPosition = idx + 1;
+    });
+
+    filteredData = [...employeesData];
+    
+    // Show controls and table
+    document.getElementById('controlsSection').classList.remove('hidden');
+    document.getElementById('tableView').classList.remove('hidden');
+    
+    // Populate filters
+    populateDepartmentFilter();
+    applyFilters();
+}
+
+// Populate department filter
+function populateDepartmentFilter() {
+    const depts = [...new Set(employeesData.map(emp => emp.dept))].sort();
+    const select = document.getElementById('deptFilter');
+    select.innerHTML = '<option value="">Все подразделения</option>';
+    depts.forEach(dept => {
+        const option = document.createElement('option');
+        option.value = dept;
+        option.textContent = dept;
+        select.appendChild(option);
+    });
+}
+
+// Apply filters
+function applyFilters() {
+    const deptFilter = document.getElementById('deptFilter').value;
+    const nameFilter = document.getElementById('nameFilter').value.toLowerCase();
+    
+    filteredData = employeesData.filter(emp => {
+        const matchesDept = !deptFilter || emp.dept === deptFilter;
+        const matchesName = !nameFilter || emp.fio.toLowerCase().includes(nameFilter);
+        return matchesDept && matchesName;
+    });
+    
+    renderTable();
+}
+
+// Render table
+function renderTable() {
+    const tbody = document.getElementById('ratingTableBody');
+    tbody.innerHTML = '';
+    
+    filteredData.forEach(emp => {
+        const tr = document.createElement('tr');
+        tr.className = 'hover:bg-gray-50 cursor-pointer transition';
+        tr.onclick = () => showEmployeeModal(emp.id);
+        
+        const trendClass = emp.positionChange > 0 ? 'trend-up' : emp.positionChange < 0 ? 'trend-down' : 'trend-neutral';
+        const trendIcon = emp.positionChange > 0 ? '↑' : emp.positionChange < 0 ? '↓' : '−';
+        
+        let statusBadge = '<span class="px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-700">Норма</span>';
+        if (emp.isIncompletePeriod) {
+            statusBadge = '<span class="px-2 py-1 rounded-full text-xs font-medium warning-badge">⚠️ Неполный период</span>';
+        } else if (emp.availabilityCoeff < 0.7) {
+            statusBadge = '<span class="px-2 py-1 rounded-full text-xs font-medium low-availability">Низкая доступность</span>';
+        }
+        
+        tr.innerHTML = `
+            <td class="px-4 py-4 text-sm font-semibold text-gray-900">${emp.currentPosition}</td>
+            <td class="px-4 py-4 text-sm text-gray-900 font-medium">${emp.fio}</td>
+            <td class="px-4 py-4 text-sm text-gray-600">${emp.dept}</td>
+            <td class="px-4 py-4 text-sm">
+                <span class="text-lg font-bold text-purple-600">${emp.rating.toFixed(2)}</span>
+            </td>
+            <td class="px-4 py-4 text-sm text-gray-600">${emp.prevPlace}</td>
+            <td class="px-4 py-4 text-sm font-semibold ${trendClass}">${trendIcon} ${Math.abs(emp.positionChange)}</td>
+            <td class="px-4 py-4 text-sm">
+                <div class="flex items-center gap-2">
+                    <div class="w-24 bg-gray-200 rounded-full h-2">
+                        <div class="h-2 rounded-full ${emp.availabilityCoeff >= 0.9 ? 'bg-green-500' : emp.availabilityCoeff >= 0.7 ? 'bg-yellow-500' : 'bg-red-500'}" 
+                             style="width: ${emp.availabilityCoeff * 100}%"></div>
+                    </div>
+                    <span class="text-xs font-medium">${(emp.availabilityCoeff * 100).toFixed(0)}%</span>
+                </div>
+            </td>
+            <td class="px-4 py-4 text-sm">${statusBadge}</td>
+        `;
+        
+        tbody.appendChild(tr);
+    });
+}
+
+// Switch view
+function switchView(view) {
+    const tableView = document.getElementById('tableView');
+    const analysisView = document.getElementById('analysisView');
+    const tableViewBtn = document.getElementById('tableViewBtn');
+    const analysisViewBtn = document.getElementById('analysisViewBtn');
+    
+    if (view === 'table') {
+        tableView.classList.remove('hidden');
+        analysisView.classList.add('hidden');
+        tableViewBtn.classList.add('tab-active');
+        tableViewBtn.classList.remove('text-gray-600');
+        analysisViewBtn.classList.remove('tab-active');
+        analysisViewBtn.classList.add('text-gray-600');
+    } else {
+        tableView.classList.add('hidden');
+        analysisView.classList.remove('hidden');
+        analysisViewBtn.classList.add('tab-active');
+        analysisViewBtn.classList.remove('text-gray-600');
+        tableViewBtn.classList.remove('tab-active');
+        tableViewBtn.classList.add('text-gray-600');
+        renderAnalysis();
+    }
+}
+
+// Render analysis view
+function renderAnalysis() {
+    // TOP employees
+    const topEmployees = employeesData.slice(0, 5);
+    document.getElementById('topEmployees').innerHTML = topEmployees.map((emp, i) => `
+        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+            <div>
+                <span class="text-lg font-bold ${i === 0 ? 'text-yellow-500' : i === 1 ? 'text-gray-400' : i === 2 ? 'text-amber-600' : 'text-gray-600'}">#${i + 1}</span>
+                <span class="ml-2 font-medium text-gray-800">${emp.fio}</span>
+            </div>
+            <span class="text-purple-600 font-semibold">${emp.rating.toFixed(2)}</span>
+        </div>
+    `).join('');
+    
+    // Biggest growth
+    const growth = [...employeesData].filter(e => e.positionChange > 0).sort((a, b) => b.positionChange - a.positionChange).slice(0, 5);
+    document.getElementById('biggestGrowth').innerHTML = growth.map(emp => `
+        <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg">
+            <div class="font-medium text-gray-800">${emp.fio}</div>
+            <span class="trend-up font-semibold">↑ ${emp.positionChange}</span>
+        </div>
+    `).join('') || '<p class="text-gray-500 text-sm">Нет данных</p>';
+    
+    // Biggest decline
+    const decline = [...employeesData].filter(e => e.positionChange < 0).sort((a, b) => a.positionChange - b.positionChange).slice(0, 5);
+    document.getElementById('biggestDecline').innerHTML = decline.map(emp => `
+        <div class="flex items-center justify-between p-3 bg-red-50 rounded-lg">
+            <div class="font-medium text-gray-800">${emp.fio}</div>
+            <span class="trend-down font-semibold">↓ ${Math.abs(emp.positionChange)}</span>
+        </div>
+    `).join('') || '<p class="text-gray-500 text-sm">Нет данных</p>';
+    
+    // Low availability
+    const lowAvail = employeesData.filter(e => e.availabilityCoeff < 0.7).slice(0, 5);
+    document.getElementById('lowAvailability').innerHTML = lowAvail.map(emp => `
+        <div class="flex items-center justify-between p-3 bg-red-50 rounded-lg">
+            <div class="font-medium text-gray-800">${emp.fio}</div>
+            <span class="text-red-600 font-semibold">${(emp.availabilityCoeff * 100).toFixed(0)}%</span>
+        </div>
+    `).join('') || '<p class="text-gray-500 text-sm">Все сотрудники с нормальной доступностью</p>';
+    
+    // Needs review
+    const review = employeesData.filter(e => e.needsReview).slice(0, 5);
+    document.getElementById('needsReview').innerHTML = review.map(emp => `
+        <div class="p-3 bg-yellow-50 rounded-lg">
+            <div class="font-medium text-gray-800">${emp.fio}</div>
+            <div class="text-xs text-gray-600 mt-1">
+                ${emp.isIncompletePeriod ? '⚠️ Неполный период' : ''}
+                ${emp.availabilityCoeff < 0.7 ? '⚠️ Низкая доступность' : ''}
+                ${Math.abs(emp.positionChange) > 5 ? '⚠️ Резкое изменение позиции' : ''}
+            </div>
+        </div>
+    `).join('') || '<p class="text-gray-500 text-sm">Все сотрудники в норме</p>';
+    
+    // Summary stats
+    const avgRating = employeesData.reduce((sum, e) => sum + e.rating, 0) / employeesData.length;
+    const avgAvailability = employeesData.reduce((sum, e) => sum + e.availabilityCoeff, 0) / employeesData.length;
+    const growthCount = employeesData.filter(e => e.positionChange > 0).length;
+    const declineCount = employeesData.filter(e => e.positionChange < 0).length;
+    
+    document.getElementById('summaryStats').innerHTML = `
+        <div class="flex justify-between py-2 border-b">
+            <span class="text-gray-600">Всего сотрудников:</span>
+            <span class="font-semibold">${employeesData.length}</span>
+        </div>
+        <div class="flex justify-between py-2 border-b">
+            <span class="text-gray-600">Средний рейтинг:</span>
+            <span class="font-semibold">${avgRating.toFixed(2)}</span>
+        </div>
+        <div class="flex justify-between py-2 border-b">
+            <span class="text-gray-600">Средняя доступность:</span>
+            <span class="font-semibold">${(avgAvailability * 100).toFixed(1)}%</span>
+        </div>
+        <div class="flex justify-between py-2 border-b">
+            <span class="text-gray-600">Рост позиций:</span>
+            <span class="font-semibold text-green-600">${growthCount}</span>
+        </div>
+        <div class="flex justify-between py-2">
+            <span class="text-gray-600">Снижение позиций:</span>
+            <span class="font-semibold text-red-600">${declineCount}</span>
+        </div>
+    `;
+}
+
+// Show employee modal
+function showEmployeeModal(id) {
+    const emp = employeesData.find(e => e.id === id);
+    if (!emp) return;
+    
+    document.getElementById('modalName').textContent = emp.fio;
+    document.getElementById('modalDept').textContent = emp.dept;
+    document.getElementById('modalRating').textContent = emp.rating.toFixed(2);
+    document.getElementById('modalPrevPlace').textContent = `#${emp.prevPlace}`;
+    document.getElementById('modalAvailability').textContent = `${(emp.availabilityCoeff * 100).toFixed(1)}%`;
+    document.getElementById('modalPlannedHours').textContent = `${emp.plannedHours} ч`;
+    document.getElementById('modalAbsenceHours').textContent = `${emp.absenceHours} ч`;
+    document.getElementById('modalAvailableHours').textContent = `${emp.availableHours} ч`;
+    document.getElementById('modalSchedule').textContent = emp.schedule;
+    
+    // Absences
+    const absencesDiv = document.getElementById('modalAbsences');
+    if (emp.absences || emp.sickness || emp.vacation || emp.socialLeave || emp.timeOff) {
+        absencesDiv.innerHTML = `
+            <div class="space-y-2 text-sm">
+                ${emp.sickness > 0 ? `<div class="flex justify-between"><span>🤒 Больничный:</span><span>${emp.sickness} ч</span></div>` : ''}
+                ${emp.vacation > 0 ? `<div class="flex justify-between"><span>🏖️ Отпуск:</span><span>${emp.vacation} ч</span></div>` : ''}
+                ${emp.socialLeave > 0 ? `<div class="flex justify-between"><span>📋 Соц. отпуск:</span><span>${emp.socialLeave} ч</span></div>` : ''}
+                ${emp.timeOff > 0 ? `<div class="flex justify-between"><span>⏰ Отгул:</span><span>${emp.timeOff} ч</span></div>` : ''}
+                ${emp.absences ? `<div class="text-gray-600 mt-2">${emp.absences}</div>` : ''}
+            </div>
+        `;
+    } else {
+        absencesDiv.innerHTML = '<p class="text-gray-500 text-sm">Отсутствий не зафиксировано</p>';
+    }
+    
+    // Warnings
+    const warningsDiv = document.getElementById('modalWarnings');
+    if (emp.isIncompletePeriod || emp.availabilityCoeff < 0.7) {
+        warningsDiv.innerHTML = `
+            <div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-4">
+                <h3 class="text-lg font-semibold text-red-800 mb-2">⚠️ Внимание</h3>
+                ${emp.isIncompletePeriod ? '<p class="text-sm text-red-700">🔴 Требуется учитывать неполный период при сравнении</p>' : ''}
+                ${emp.availabilityCoeff < 0.7 ? '<p class="text-sm text-red-700 mt-1">🔴 Низкая доступность рабочего времени</p>' : ''}
+            </div>
+        `;
+    } else {
+        warningsDiv.innerHTML = '';
+    }
+    
+    // Explanation
+    document.getElementById('modalExplanation').textContent = 
+        `Рейтинг ${emp.rating.toFixed(2)} рассчитан на основе показателей за период. ` +
+        `Коэффициент доступности ${(emp.availabilityCoeff * 100).toFixed(1)}% показывает, ` +
+        `какую часть планового времени сотрудник был доступен. ` +
+        `${emp.positionChange > 0 ? `Позиция улучшилась на ${emp.positionChange} места.` : 
+          emp.positionChange < 0 ? `Позиция снизилась на ${Math.abs(emp.positionChange)} места.` : 
+          'Позиция не изменилась.'} ` +
+        `${emp.isIncompletePeriod ? '⚠️ Рекомендация: не использовать для кадровых решений из-за неполного периода.' : ''}`;
+    
+    document.getElementById('employeeModal').classList.remove('hidden');
+    document.getElementById('employeeModal').classList.add('flex');
+}
+
+// Close modal
+function closeModal() {
+    document.getElementById('employeeModal').classList.add('hidden');
+    document.getElementById('employeeModal').classList.remove('flex');
+}
+
+// Close modal on overlay click
+document.getElementById('employeeModal').addEventListener('click', function(e) {
+    if (e.target === this) {
+        closeModal();
+    }
+});
+
+// Keyboard shortcut
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') {
+        closeModal();
+    }
+});

index.html

@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Справедливый рейтинг сотрудников</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.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 { transition: all 0.3s ease; }
+        .card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
+        .trend-up { color: #10b981; }
+        .trend-down { color: #ef4444; }
+        .trend-neutral { color: #6b7280; }
+        .warning-badge { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
+        .low-availability { background: #fee2e2; color: #991b1b; }
+        .modal-overlay { background: rgba(0,0,0,0.5); }
+        .tab-active { border-bottom: 2px solid #667eea; color: #667eea; }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <!-- Header -->
+    <header class="gradient-bg text-white py-6 shadow-lg">
+        <div class="container mx-auto px-4">
+            <h1 class="text-3xl font-bold mb-2">📊 Справедливый рейтинг сотрудников</h1>
+            <p class="text-purple-100">Анализ рейтинга с учётом фактически отработанного времени</p>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
+        <!-- Upload Section -->
+        <section id="uploadSection" class="mb-8">
+            <div class="bg-white rounded-xl shadow-md p-6 card">
+                <h2 class="text-xl font-semibold mb-4 text-gray-800">📁 Загрузка отчёта</h2>
+                <div class="flex items-center gap-4">
+                    <label class="block">
+                        <span class="sr-only">Выберите Excel файл</span>
+                        <input type="file" id="fileInput" accept=".xlsx,.xls" 
+                            class="block w-full text-sm text-gray-500 file:mr-4 file:py-3 file:px-6 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-purple-50 file:text-purple-700 hover:file:bg-purple-100 cursor-pointer"/>
+                    </label>
+                    <button onclick="processFile()" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium transition">
+                        Загрузить
+                    </button>
+                </div>
+                <p class="text-sm text-gray-500 mt-2">Загрузите файл «Сводный рейтинг с нарастающим итогом за 01.08–06.08.2026»</p>
+            </div>
+        </section>
+
+        <!-- Filters & Controls -->
+        <section id="controlsSection" class="mb-6 hidden">
+            <div class="bg-white rounded-xl shadow-md p-6">
+                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Подразделение</label>
+                        <select id="deptFilter" onchange="applyFilters()" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent">
+                            <option value="">Все подразделения</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Сотрудник</label>
+                        <input type="text" id="nameFilter" placeholder="Поиск по ФИО" oninput="applyFilters()" 
+                            class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-purple-500 focus:border-transparent"/>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Период</label>
+                        <input type="text" id="periodDisplay" readonly class="w-full border border-gray-300 rounded-lg px-3 py-2 bg-gray-50"/>
+                    </div>
+                    <div class="flex items-end">
+                        <button onclick="switchView('table')" id="tableViewBtn" class="tab-active px-4 py-2 font-medium">📋 Таблица</button>
+                        <button onclick="switchView('analysis')" id="analysisViewBtn" class="px-4 py-2 font-medium text-gray-600">📈 Анализ периода</button>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Table View -->
+        <section id="tableView" class="hidden">
+            <div class="bg-white rounded-xl shadow-md overflow-hidden">
+                <div class="overflow-x-auto">
+                    <table class="w-full">
+                        <thead class="bg-gray-100">
+                            <tr>
+                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Место</th>
+                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">ФИО</th>
+                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Подразделение</th>
+                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Рейтинг</th>
+                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Предыдущее</th>
+                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Δ</th>
+                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Коэфф. доступности</th>
+                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Статус</th>
+                            </tr>
+                        </thead>
+                        <tbody id="ratingTableBody" class="divide-y divide-gray-200"></tbody>
+                    </table>
+                </div>
+            </div>
+        </section>
+
+        <!-- Analysis View -->
+        <section id="analysisView" class="hidden">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+                <!-- TOP Employees -->
+                <div class="bg-white rounded-xl shadow-md p-6 card">
+                    <h3 class="text-lg font-semibold text-gray-800 mb-4">🏆 ТОП сотрудников</h3>
+                    <div id="topEmployees" class="space-y-3"></div>
+                </div>
+
+                <!-- Biggest Growth -->
+                <div class="bg-white rounded-xl shadow-md p-6 card">
+                    <h3 class="text-lg font-semibold text-gray-800 mb-4">📈 Наибольший рост</h3>
+                    <div id="biggestGrowth" class="space-y-3"></div>
+                </div>
+
+                <!-- Biggest Decline -->
+                <div class="bg-white rounded-xl shadow-md p-6 card">
+                    <h3 class="text-lg font-semibold text-gray-800 mb-4">📉 Наибольшее снижение</h3>
+                    <div id="biggestDecline" class="space-y-3"></div>
+                </div>
+
+                <!-- Low Availability -->
+                <div class="bg-white rounded-xl shadow-md p-6 card">
+                    <h3 class="text-lg font-semibold text-gray-800 mb-4">⚠️ Низкая доступность</h3>
+                    <div id="lowAvailability" class="space-y-3"></div>
+                </div>
+
+                <!-- Needs Review -->
+                <div class="bg-white rounded-xl shadow-md p-6 card">
+                    <h3 class="text-lg font-semibold text-gray-800 mb-4">🔍 Требует проверки</h3>
+                    <div id="needsReview" class="space-y-3"></div>
+                </div>
+
+                <!-- Summary Stats -->
+                <div class="bg-white rounded-xl shadow-md p-6 card">
+                    <h3 class="text-lg font-semibold text-gray-800 mb-4">📊 Общая статистика</h3>
+                    <div id="summaryStats" class="space-y-3"></div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Employee Modal -->
+    <div id="employeeModal" class="modal-overlay fixed inset-0 hidden items-center justify-center z-50">
+        <div class="bg-white rounded-2xl shadow-2xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto">
+            <div class="gradient-bg text-white p-6 rounded-t-2xl">
+                <div class="flex justify-between items-start">
+                    <div>
+                        <h2 id="modalName" class="text-2xl font-bold"></h2>
+                        <p id="modalDept" class="text-purple-100"></p>
+                    </div>
+                    <button onclick="closeModal()" class="text-white hover:text-gray-200 text-2xl">&times;</button>
+                </div>
+            </div>
+            <div class="p-6">
+                <!-- Rating Overview -->
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                    <div class="bg-purple-50 rounded-xl p-4">
+                        <p class="text-sm text-gray-600">Текущий рейтинг</p>
+                        <p id="modalRating" class="text-3xl font-bold text-purple-700"></p>
+                    </div>
+                    <div class="bg-blue-50 rounded-xl p-4">
+                        <p class="text-sm text-gray-600">Предыдущее место</p>
+                        <p id="modalPrevPlace" class="text-3xl font-bold text-blue-700"></p>
+                    </div>
+                    <div class="bg-green-50 rounded-xl p-4">
+                        <p class="text-sm text-gray-600">Коэффициент доступности</p>
+                        <p id="modalAvailability" class="text-3xl font-bold text-green-700"></p>
+                    </div>
+                </div>
+
+                <!-- Availability Details -->
+                <div class="mb-6">
+                    <h3 class="text-lg font-semibold text-gray-800 mb-3">⏱️ Рабочее время</h3>
+                    <div class="bg-gray-50 rounded-xl p-4 space-y-2">
+                        <div class="flex justify-between">
+                            <span class="text-gray-600">Плановое рабочее время:</span>
+                            <span id="modalPlannedHours" class="font-medium"></span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-600">Время отсутствия:</span>
+                            <span id="modalAbsenceHours" class="font-medium"></span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-600">Доступное рабочее время:</span>
+                            <span id="modalAvailableHours" class="font-medium"></span>
+                        </div>
+                        <div class="border-t pt-2 flex justify-between">
+                            <span class="text-gray-600">График:</span>
+                            <span id="modalSchedule" class="font-medium"></span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Absences -->
+                <div class="mb-6">
+                    <h3 class="text-lg font-semibold text-gray-800 mb-3">📋 Отсутствия</h3>
+                    <div id="modalAbsences" class="bg-gray-50 rounded-xl p-4"></div>
+                </div>
+
+                <!-- Warnings -->
+                <div id="modalWarnings" class="mb-6"></div>
+
+                <!-- Rating Explanation -->
+                <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-4">
+                    <h3 class="text-lg font-semibold text-yellow-800 mb-2">💡 Прозрачность расчёта</h3>
+                    <p id="modalExplanation" class="text-sm text-yellow-700"></p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+</html>