уведомления декрет архив замещение

index.html

@@ -96,6 +96,31 @@
             margin-bottom: 25px;
         }
 
+        .archive-toggle {
+            background: #fff;
+            padding: 15px 20px;
+            border-radius: 4px;
+            margin-bottom: 20px;
+            border: 1px solid #e0e6ed;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+        }
+
+        .archive-toggle input[type="checkbox"] {
+            width: 20px;
+            height: 20px;
+            cursor: pointer;
+        }
+
+        .archive-toggle label {
+            font-size: 0.95rem;
+            color: #333;
+            font-weight: 500;
+            cursor: pointer;
+        }
+
         .stat-card {
             background: #fff;
             padding: 20px;
@@ -270,6 +295,123 @@
             border: 1px solid #b3d9f2;
         }
 
+        .decoration-badge {
+            display: inline-block;
+            background: #fff3cd;
+            color: #856404;
+            padding: 6px 12px;
+            border-radius: 4px;
+            font-size: 0.85rem;
+            font-weight: 500;
+            margin-top: 10px;
+            border: 1px solid #ffc107;
+        }
+
+        .substitute-info {
+            margin-top: 12px;
+            padding: 12px;
+            background: #e8f5e9;
+            border-radius: 4px;
+            border: 1px solid #a5d6a7;
+            font-size: 0.9rem;
+            color: #2e7d32;
+        }
+
+        .substitute-info strong {
+            display: block;
+            margin-bottom: 4px;
+        }
+
+        .modal-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .modal-overlay.active {
+            display: flex;
+        }
+
+        .modal {
+            background: #fff;
+            border-radius: 8px;
+            max-width: 600px;
+            width: 90%;
+            max-height: 80vh;
+            overflow-y: auto;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+        }
+
+        .modal-header {
+            background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
+            color: #fff;
+            padding: 20px;
+            border-radius: 8px 8px 0 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .modal-header h3 {
+            font-size: 1.2rem;
+            font-weight: 600;
+        }
+
+        .modal-close {
+            background: none;
+            border: none;
+            color: #fff;
+            font-size: 1.5rem;
+            cursor: pointer;
+            padding: 0;
+            line-height: 1;
+        }
+
+        .modal-body {
+            padding: 20px;
+        }
+
+        .notification-item {
+            padding: 15px;
+            margin-bottom: 12px;
+            border-radius: 6px;
+            border-left: 4px solid;
+        }
+
+        .notification-item.urgent {
+            background: #fff3cd;
+            border-color: #ffc107;
+            color: #856404;
+        }
+
+        .notification-item.warning {
+            background: #f8d7da;
+            border-color: #dc3545;
+            color: #721c24;
+        }
+
+        .notification-item.info {
+            background: #d1ecf1;
+            border-color: #17a2b8;
+            color: #0c5460;
+        }
+
+        .notification-item h4 {
+            margin-bottom: 5px;
+            font-size: 1rem;
+        }
+
+        .notification-item p {
+            font-size: 0.9rem;
+        }
+
         .no-results {
             text-align: center;
             padding: 60px;
@@ -316,6 +458,11 @@
             <p>Корпоративная система управления персоналом | АО «Казахтелеком»</p>
         </header>
 
+        <div class="archive-toggle">
+            <input type="checkbox" id="archiveFilter" onchange="applyFilters()">
+            <label for="archiveFilter">📁 Показать архив (уволенные сотрудники)</label>
+        </div>
+
         <div class="filters">
             <div class="filter-group">
                 <label>🔍 Поиск</label>
@@ -378,6 +525,18 @@
         </div>
     </div>
 
+    <!-- Modal для уведомлений -->
+    <div class="modal-overlay" id="notificationModal">
+        <div class="modal">
+            <div class="modal-header">
+                <h3>🔔 Уведомления</h3>
+                <button class="modal-close" onclick="closeModal()">×</button>
+            </div>
+            <div class="modal-body" id="notificationBody">
+            </div>
+        </div>
+    </div>
+
     <script>
         const employees = [
             {
@@ -505,6 +664,52 @@
                     { start: "15.09.2025", end: "28.09.2025" }
                 ],
                 location: "Хозяйственный отдел"
+            },
+            {
+                id: 7,
+                tabNumber: "001240",
+                fullName: "Нурова Айгуль Ержановна",
+                birthDate: "12.06.1992",
+                age: 34,
+                position: "Менеджер по кадрам",
+                familyStatus: "Замужем",
+                children: [
+                    { name: "Нуров Али", age: 2, school: "До 3 лет" }
+                ],
+                address: "г. Алматы, ул. Абылай хана 33, кв. 67",
+                phone: "+7 (777) 789-01-23",
+                experience: "6 лет",
+                experienceYears: 6,
+                vacations: [
+                    { start: "01.09.2025", end: "14.09.2025", type: "Ежегодный" },
+                    { start: "15.01.2026", end: "15.07.2026", type: "Декретный" }
+                ],
+                location: "Отдел кадров",
+                onDecree: true,
+                substitute: "Ахметова Гульнара Ерлановна"
+            },
+            {
+                id: 8,
+                tabNumber: "001241",
+                fullName: "Ибраев Болатбек Серикович",
+                birthDate: "25.03.1975",
+                age: 51,
+                position: "Главный бухгалтер",
+                familyStatus: "Женат",
+                children: [
+                    { name: "Ибраева Сауле", age: 25, school: "Работает" }
+                ],
+                address: "г. Алматы, ул. Желтоксан 88, кв. 12",
+                phone: "+7 (777) 890-12-34",
+                experience: "28 лет",
+                experienceYears: 28,
+                vacations: [
+                    { start: "10.06.2025", end: "24.06.2025" }
+                ],
+                location: "Бухгалтерия",
+                dismissed: true,
+                dismissDate: "15.01.2025",
+                dismissReason: "По собственному желанию"
             }
         ];
 
@@ -519,22 +724,110 @@
             return age;
         }
 
+        function parseDate(dateStr) {
+            const parts = dateStr.split('.');
+            return new Date(parts[2], parts[1] - 1, parts[0]);
+        }
+
+        function isWithinMonth(dateStr) {
+            if (!dateStr) return false;
+            const targetDate = parseDate(dateStr);
+            const today = new Date();
+            const oneMonthFromNow = new Date();
+            oneMonthFromNow.setMonth(oneMonthFromNow.getMonth() + 1);
+            
+            return targetDate >= today && targetDate <= oneMonthFromNow;
+        }
+
+        function getUpcomingNotifications() {
+            const notifications = [];
+            const today = new Date();
+            
+            employees.forEach(emp => {
+                if (emp.dismissed) return; // Не показывать уведомления для уволенных
+                
+                // Проверка отпусков
+                if (emp.vacations) {
+                    emp.vacations.forEach(vac => {
+                        // Уведомление за месяц до начала отпуска
+                        if (isWithinMonth(vac.start)) {
+                            notifications.push({
+                                type: 'urgent',
+                                title: `Отпуск: ${emp.fullName}`,
+                                message: `Начало отпуска ${vac.start} (${vac.type || 'ежегодный'}). Табельный № ${emp.tabNumber}`
+                            });
+                        }
+                        
+                        // Уведомление о выходе из декрета
+                        if (vac.type === 'Декретный' && vac.end) {
+                            if (isWithinMonth(vac.end)) {
+                                notifications.push({
+                                    type: 'warning',
+                                    title: `Выход из декрета: ${emp.fullName}`,
+                                    message: `Выход на работу ${vac.end}. Замещающий: ${emp.substitute || 'не назначен'}`
+                                });
+                            }
+                        }
+                    });
+                }
+                
+                // Уведомление о декрете за месяц до начала
+                if (emp.onDecree) {
+                    const decreeStart = emp.vacations?.find(v => v.type === 'Декретный')?.start;
+                    if (decreeStart && isWithinMonth(decreeStart)) {
+                        notifications.push({
+                            type: 'info',
+                            title: `Декретный отпуск: ${emp.fullName}`,
+                            message: `Начало декрета ${decreeStart}. Замещает: ${emp.substitute || 'не назначен'}`
+                        });
+                    }
+                }
+            });
+            
+            return notifications;
+        }
+
+        function showNotifications() {
+            const notifications = getUpcomingNotifications();
+            const modal = document.getElementById('notificationModal');
+            const body = document.getElementById('notificationBody');
+            
+            if (notifications.length === 0) {
+                body.innerHTML = '<p style="color: #28a745; text-align: center; padding: 20px;">✅ Новых уведомлений нет</p>';
+            } else {
+                body.innerHTML = notifications.map(n => `
+                    <div class="notification-item ${n.type}">
+                        <h4>${n.title}</h4>
+                        <p>${n.message}</p>
+                    </div>
+                `).join('');
+            }
+            
+            modal.classList.add('active');
+        }
+
+        function closeModal() {
+            document.getElementById('notificationModal').classList.remove('active');
+        }
+
         function renderEmployees(data) {
             const grid = document.getElementById('employeesGrid');
             grid.innerHTML = '';
 
             if (data.length === 0) {
-                grid.innerHTML = '<div class="no-results">😕 Сотрудники не найдены</div>';
+                const archiveFilter = document.getElementById('archiveFilter');
+                const showArchived = archiveFilter ? archiveFilter.checked : false;
+                grid.innerHTML = '<div class="no-results">' + (showArchived ? '😕 В архиве нет сотрудников' : '😕 Сотрудники не найдены') + '</div>';
                 return;
             }
 
             data.forEach(emp => {
-                const childrenUnder14 = emp.children.filter(c => c.age < 14);
+                const childrenUnder14 = emp.children ? emp.children.filter(c => c.age < 14) : [];
-                const firstGraders = emp.children.filter(c => c.age >= 6 && c.age <= 7);
+                const firstGraders = emp.children ? emp.children.filter(c => c.age >= 6 && c.age <= 7) : [];
-                const eleventhGraders = emp.children.filter(c => c.age >= 17 && c.age <= 18);
+                const eleventhGraders = emp.children ? emp.children.filter(c => c.age >= 17 && c.age <= 18) : [];
 
                 let childrenHtml = '';
-                if (emp.children.length > 0) {
+                if (emp.children && emp.children.length > 0) {
                     childrenHtml = '<div class="children-section"><h4>👶 Дети (' + emp.children.length + ')</h4>';
                     emp.children.forEach(child => {
                         let childClass = '';
@@ -556,14 +849,29 @@
                 }
 
                 let vacationHtml = '';
-                if (emp.vacations.length > 0) {
+                if (emp.vacations && emp.vacations.length > 0) {
-                    vacationHtml = '<div class="vacation-section"><h4>🏖 Отпуска 2025</h4>';
+                    vacationHtml = '<div class="vacation-section"><h4>🏖 Отпуска</h4>';
                     emp.vacations.forEach(vac => {
-                        vacationHtml += '<div class="vacation-item"><span>📅 ' + vac.start + ' — ' + vac.end + '</span></div>';
+                        vacationHtml += '<div class="vacation-item"><span>📅 ' + vac.start + ' — ' + vac.end + (vac.type ? ' (' + vac.type + ')' : '') + '</span></div>';
                     });
                     vacationHtml += '</div>';
                 }
 
+                let decreeBadge = '';
+                if (emp.onDecree) {
+                    decreeBadge = '<div class="decoration-badge">🤰 В декретном отпуске</div>';
+                }
+
+                let substituteHtml = '';
+                if (emp.substitute) {
+                    substituteHtml = '<div class="substitute-info"><strong>👤 Временно замещает:</strong>' + emp.substitute + '</div>';
+                }
+
+                let dismissInfo = '';
+                if (emp.dismissed) {
+                    dismissInfo = '<div class="vacation-section" style="background: #f8d7da; border-color: #dc3545;"><h4 style="color: #dc3545;">❌ Уволен</h4><div class="vacation-item"><span>📅 Дата: ' + emp.dismissDate + '</span></div><div class="vacation-item"><span>📝 Причина: ' + emp.dismissReason + '</span></div></div>';
+                }
+
                 const card = document.createElement('div');
                 card.className = 'employee-card';
                 card.innerHTML = `
@@ -598,6 +906,9 @@
                     </div>
                     ${childrenHtml}
                     ${vacationHtml}
+                    ${dismissInfo}
+                    ${decreeBadge}
+                    ${substituteHtml}
                     <div class="location-badge">📍 ${emp.location}</div>
                 `;
                 grid.appendChild(card);
@@ -627,14 +938,21 @@
             });
         }
 
-        function filterEmployees() {
+        function applyFilters() {
             const searchTerm = document.getElementById('searchInput').value.toLowerCase();
             const location = document.getElementById('locationFilter').value;
             const childrenFilter = document.getElementById('childrenFilter').value;
             const experienceFilter = document.getElementById('experienceFilter').value;
             const familyFilter = document.getElementById('familyFilter').value;
+            const archiveFilter = document.getElementById('archiveFilter');
+            const showArchived = archiveFilter ? archiveFilter.checked : false;
 
-            let filtered = employees.filter(emp => {
+            // Сначала фильтруем по архиву
+            let baseFiltered = employees.filter(emp => {
+                return showArchived ? emp.dismissed : !emp.dismissed;
+            });
+
+            let filtered = baseFiltered.filter(emp => {
                 const matchSearch = emp.fullName.toLowerCase().includes(searchTerm) ||
                     emp.position.toLowerCase().includes(searchTerm) ||
                     emp.phone.includes(searchTerm) ||
@@ -674,15 +992,22 @@
             updateStats(filtered);
         }
 
-        document.getElementById('searchInput').addEventListener('input', filterEmployees);
+        document.getElementById('searchInput').addEventListener('input', applyFilters);
-        document.getElementById('locationFilter').addEventListener('change', filterEmployees);
+        document.getElementById('locationFilter').addEventListener('change', applyFilters);
-        document.getElementById('childrenFilter').addEventListener('change', filterEmployees);
+        document.getElementById('childrenFilter').addEventListener('change', applyFilters);
-        document.getElementById('experienceFilter').addEventListener('change', filterEmployees);
+        document.getElementById('experienceFilter').addEventListener('change', applyFilters);
-        document.getElementById('familyFilter').addEventListener('change', filterEmployees);
+        document.getElementById('familyFilter').addEventListener('change', applyFilters);
+
+        // Показываем уведомления при загрузке
+        window.addEventListener('load', function() {
+            setTimeout(function() {
+                showNotifications();
+            }, 500);
+        });
 
         populateLocationFilter();
-        renderEmployees(employees);
+        renderEmployees(employees.filter(emp => !emp.dismissed));
-        updateStats(employees);
+        updateStats(employees.filter(emp => !emp.dismissed));
     </script>
 </body>
 </html>