v2 - add sections

index.html

@@ -8,14 +8,16 @@
 :root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--red:#FF5252;--green:#4CAF50;--orange:#FF9800}
 *{box-sizing:border-box;margin:0;padding:0}
 body{font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--white);background:var(--ink)}
-.sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;background:#1a1f2e;padding:24px 0}
+.sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;background:#1a1f2e;padding:24px 0;z-index:100}
 .sidebar h1{font-size:18px;font-weight:700;padding:0 24px;margin-bottom:32px;color:var(--cyan)}
-.sidebar nav a{display:block;padding:12px 24px;color:var(--gray-500);text-decoration:none;font-weight:500}
+.sidebar nav a{display:block;padding:12px 24px;color:var(--gray-500);text-decoration:none;font-weight:500;transition:all 0.2s}
 .sidebar nav a:hover,.sidebar nav a.active{color:var(--white);background:rgba(255,255,255,0.05)}
 .main{margin-left:240px;padding:32px}
 .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}
 .header h2{font-size:24px;font-weight:700}
 .header .date{color:var(--gray-500)}
+.section{margin-bottom:48px;scroll-margin-top:32px}
+.section h3{font-size:20px;font-weight:600;margin-bottom:24px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.1);color:var(--cyan)}
 .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:32px}
 .stat{background:#1a1f2e;border-radius:12px;padding:24px}
 .stat .label{color:var(--gray-500);font-size:13px;margin-bottom:8px}
@@ -26,7 +28,7 @@ body{font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,s
 .stat .value.cyan{color:var(--cyan)}
 .grid{display:grid;grid-template-columns:2fr 1fr;gap:24px}
 .panel{background:#1a1f2e;border-radius:12px;padding:24px}
-.panel h3{font-size:16px;font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.1)}
+.panel h4{font-size:16px;font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.1)}
 .task{display:flex;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.05)}
 .task:last-child{border-bottom:none}
 .task .status{width:8px;height:8px;border-radius:50%;margin-right:12px}
@@ -42,11 +44,22 @@ body{font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,s
 .task .priority.low{background:rgba(76,175,80,0.2);color:var(--green)}
 .employee{display:flex;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.05)}
 .employee:last-child{border-bottom:none}
-.employee .avatar{width:40px;height:40px;border-radius:50%;background:var(--cyan);display:flex;align-items:center;justify-content:center;font-weight:700;margin-right:12px}
+.employee .avatar{width:40px;height:40px;border-radius:50%;background:var(--cyan);display:flex;align-items:center;justify-content:center;font-weight:700;margin-right:12px;color:var(--ink)}
 .employee .info{flex:1}
 .employee .name{font-weight:500}
 .employee .role{font-size:13px;color:var(--gray-500)}
 .employee .tasks-count{font-size:13px;color:var(--cyan)}
+.table{width:100%;border-collapse:collapse}
+.table th,.table td{padding:12px;text-align:left;border-bottom:1px solid rgba(255,255,255,0.05)}
+.table th{color:var(--gray-500);font-weight:600;font-size:13px}
+.table tr:hover{background:rgba(255,255,255,0.02)}
+.badge{display:inline-block;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:600}
+.badge.pending{background:rgba(255,152,0,0.2);color:var(--orange)}
+.badge.approved{background:rgba(76,175,80,0.2);color:var(--green)}
+.badge.rejected{background:rgba(255,82,82,0.2);color:var(--red)}
+.card{background:#1a1f2e;border-radius:12px;padding:24px;margin-bottom:16px}
+.card h4{margin-bottom:16px}
+.card p{color:var(--gray-500);margin-bottom:8px}
 @media(max-width:1024px){.sidebar{display:none}.main{margin-left:0}.stats{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}}
 @media(max-width:640px){.stats{grid-template-columns:1fr}.header{flex-direction:column;align-items:flex-start;gap:8px}}
 </style>
@@ -56,130 +69,334 @@ body{font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,s
 <aside class="sidebar">
   <h1>АХО Панель</h1>
   <nav>
-    <a href="#" class="active">Задачи</a>
+    <a href="#tasks" class="active">Задачи</a>
-    <a href="#">Сотрудники</a>
+    <a href="#employees">Сотрудники</a>
-    <a href="#">Закупки</a>
+    <a href="#purchases">Закупки</a>
-    <a href="#">Заявки</a>
+    <a href="#requests">Заявки</a>
-    <a href="#">Отчёты</a>
+    <a href="#reports">Отчёты</a>
-    <a href="#">Настройки</a>
+    <a href="#settings">Настройки</a>
   </nav>
 </aside>
 
 <main class="main">
   <div class="header">
-    <h2>Задачи на сегодня</h2>
+    <h2>Панель управления АХО</h2>
     <div class="date">19 июня 2026</div>
   </div>
 
-  <div class="stats">
+  <!-- ЗАДАЧИ -->
-    <div class="stat">
+  <section id="tasks" class="section">
-      <div class="label">Всего задач</div>
+    <h3>Задачи</h3>
-      <div class="value cyan">24</div>
+    <div class="stats">
+      <div class="stat">
+        <div class="label">Всего задач</div>
+        <div class="value cyan">24</div>
+      </div>
+      <div class="stat">
+        <div class="label">Просрочено</div>
+        <div class="value red">3</div>
+      </div>
+      <div class="stat">
+        <div class="label">В работе</div>
+        <div class="value orange">12</div>
+      </div>
+      <div class="stat">
+        <div class="label">Выполнено</div>
+        <div class="value green">9</div>
+      </div>
     </div>
-    <div class="stat">
+    <div class="grid">
-      <div class="label">Просрочено</div>
+      <div class="panel">
-      <div class="value red">3</div>
+        <h4>Активные задачи</h4>
+        <div class="task">
+          <div class="status overdue"></div>
+          <div class="info">
+            <div class="title">Закупить канцелярию для отдела</div>
+            <div class="meta">Исполнитель: Айгуль • Дедлайн: 18 июня</div>
+          </div>
+          <div class="priority high">Срочно</div>
+        </div>
+        <div class="task">
+          <div class="status overdue"></div>
+          <div class="info">
+            <div class="title">Ремонт кондиционера в переговорной</div>
+            <div class="meta">Исполнитель: Руслан • Дедлайн: 17 июня</div>
+          </div>
+          <div class="priority high">Срочно</div>
+        </div>
+        <div class="task">
+          <div class="status overdue"></div>
+          <div class="info">
+            <div class="title">Подготовить акт осмотра помещения</div>
+            <div class="meta">Исполнитель: Динара • Дедлайн: 18 июня</div>
+          </div>
+          <div class="priority high">Срочно</div>
+        </div>
+        <div class="task">
+          <div class="status progress"></div>
+          <div class="info">
+            <div class="title">Заказать уборку офиса на пятницу</div>
+            <div class="meta">Исполнитель: Айгуль • Дедлайн: 20 июня</div>
+          </div>
+          <div class="priority medium">Средний</div>
+        </div>
+        <div class="task">
+          <div class="status progress"></div>
+          <div class="info">
+            <div class="title">Оформить пропуска для подрядчиков</div>
+            <div class="meta">Исполнитель: Руслан • Дедлайн: 21 июня</div>
+          </div>
+          <div class="priority medium">Средний</div>
+        </div>
+        <div class="task">
+          <div class="status done"></div>
+          <div class="info">
+            <div class="title">Согласовать смету на ремонт</div>
+            <div class="meta">Исполнитель: Динара • Выполнено</div>
+          </div>
+          <div class="priority low">Низкий</div>
+        </div>
+      </div>
+      <div class="panel">
+        <h4>Загрузка сотрудников</h4>
+        <div class="employee">
+          <div class="avatar">А</div>
+          <div class="info">
+            <div class="name">Айгуль К.</div>
+            <div class="role">Специалист АХО</div>
+          </div>
+          <div class="tasks-count">8 задач</div>
+        </div>
+        <div class="employee">
+          <div class="avatar">Р</div>
+          <div class="info">
+            <div class="name">Руслан М.</div>
+            <div class="role">Техник</div>
+          </div>
+          <div class="tasks-count">6 задач</div>
+        </div>
+        <div class="employee">
+          <div class="avatar">Д</div>
+          <div class="info">
+            <div class="name">Динара С.</div>
+            <div class="role">Документооборот</div>
+          </div>
+          <div class="tasks-count">5 задач</div>
+        </div>
+        <div class="employee">
+          <div class="avatar">А</div>
+          <div class="info">
+            <div class="name">Алексей В.</div>
+            <div class="role">Кладовщик</div>
+          </div>
+          <div class="tasks-count">5 задач</div>
+        </div>
+      </div>
     </div>
-    <div class="stat">
+  </section>
-      <div class="label">В работе</div>
-      <div class="value orange">12</div>
-    </div>
-    <div class="stat">
-      <div class="label">Выполнено</div>
-      <div class="value green">9</div>
-    </div>
-  </div>
 
-  <div class="grid">
+  <!-- СОТРУДНИКИ -->
+  <section id="employees" class="section">
+    <h3>Сотрудники</h3>
     <div class="panel">
-      <h3>Активные задачи</h3>
+      <table class="table">
-      <div class="task">
+        <thead>
-        <div class="status overdue"></div>
+          <tr>
-        <div class="info">
+            <th>Имя</th>
-          <div class="title">Закупить канцелярию для отдела</div>
+            <th>Должность</th>
-          <div class="meta">Исполнитель: Айгуль • Дедлайн: 18 июня</div>
+            <th>Активных задач</th>
-        </div>
+            <th>Выполнено за месяц</th>
-        <div class="priority high">Срочно</div>
+            <th>Эффективность</th>
-      </div>
+          </tr>
-      <div class="task">
+        </thead>
-        <div class="status overdue"></div>
+        <tbody>
-        <div class="info">
+          <tr>
-          <div class="title">Ремонт кондиционера в переговорной</div>
+            <td>Айгуль К.</td>
-          <div class="meta">Исполнитель: Руслан • Дедлайн: 17 июня</div>
+            <td>Специалист АХО</td>
-        </div>
+            <td>8</td>
-        <div class="priority high">Срочно</div>
+            <td>34</td>
-      </div>
+            <td><span class="badge approved">92%</span></td>
-      <div class="task">
+          </tr>
-        <div class="status overdue"></div>
+          <tr>
-        <div class="info">
+            <td>Руслан М.</td>
-          <div class="title">Подготовить акт осмотра помещения</div>
+            <td>Техник</td>
-          <div class="meta">Исполнитель: Динара • Дедлайн: 18 июня</div>
+            <td>6</td>
-        </div>
+            <td>28</td>
-        <div class="priority high">Срочно</div>
+            <td><span class="badge approved">88%</span></td>
-      </div>
+          </tr>
-      <div class="task">
+          <tr>
-        <div class="status progress"></div>
+            <td>Динара С.</td>
-        <div class="info">
+            <td>Документооборот</td>
-          <div class="title">Заказать уборку офиса на пятницу</div>
+            <td>5</td>
-          <div class="meta">Исполнитель: Айгуль • Дедлайн: 20 июня</div>
+            <td>42</td>
-        </div>
+            <td><span class="badge approved">95%</span></td>
-        <div class="priority medium">Средний</div>
+          </tr>
-      </div>
+          <tr>
-      <div class="task">
+            <td>Алексей В.</td>
-        <div class="status progress"></div>
+            <td>Кладовщик</td>
-        <div class="info">
+            <td>5</td>
-          <div class="title">Оформить пропуска для подрядчиков</div>
+            <td>31</td>
-          <div class="meta">Исполнитель: Руслан • Дедлайн: 21 июня</div>
+            <td><span class="badge pending">78%</span></td>
-        </div>
+          </tr>
-        <div class="priority medium">Средний</div>
+        </tbody>
-      </div>
+      </table>
-      <div class="task">
-        <div class="status done"></div>
-        <div class="info">
-          <div class="title">Согласовать смету на ремонт</div>
-          <div class="meta">Исполнитель: Динара • Выполнено</div>
-        </div>
-        <div class="priority low">Низкий</div>
-      </div>
     </div>
+  </section>
 
+  <!-- ЗАКУПКИ -->
+  <section id="purchases" class="section">
+    <h3>Закупки</h3>
     <div class="panel">
-      <h3>Загрузка сотрудников</h3>
+      <table class="table">
-      <div class="employee">
+        <thead>
-        <div class="avatar">А</div>
+          <tr>
-        <div class="info">
+            <th>Наименование</th>
-          <div class="name">Айгуль К.</div>
+            <th>Сумма</th>
-          <div class="role">Специалист АХО</div>
+            <th>Статус</th>
-        </div>
+            <th>Срок</th>
-        <div class="tasks-count">8 задач</div>
+            <th>Исполнитель</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Канцелярия для отдела</td>
+            <td>45 000 ₸</td>
+            <td><span class="badge pending">Ожидает</span></td>
+            <td>18 июня</td>
+            <td>Айгуль</td>
+          </tr>
+          <tr>
+            <td>Уборочные средства</td>
+            <td>32 000 ₸</td>
+            <td><span class="badge approved">Согласовано</span></td>
+            <td>20 июня</td>
+            <td>Айгуль</td>
+          </tr>
+          <tr>
+            <td>Запчасти для кондиционера</td>
+            <td>28 500 ₸</td>
+            <td><span class="badge rejected">Отклонено</span></td>
+            <td>17 июня</td>
+            <td>Руслан</td>
+          </tr>
+          <tr>
+            <td>Бумага для принтера</td>
+            <td>18 000 ₸</td>
+            <td><span class="badge approved">Согласовано</span></td>
+            <td>22 июня</td>
+            <td>Динара</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+
+  <!-- ЗАЯВКИ -->
+  <section id="requests" class="section">
+    <h3>Заявки на ремонт</h3>
+    <div class="panel">
+      <table class="table">
+        <thead>
+          <tr>
+            <th>Объект</th>
+            <th>Проблема</th>
+            <th>Приоритет</th>
+            <th>Статус</th>
+            <th>Дата подачи</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Переговорная №3</td>
+            <td>Не работает кондиционер</td>
+            <td><span class="badge rejected">Высокий</span></td>
+            <td><span class="badge pending">В работе</span></td>
+            <td>15 июня</td>
+          </tr>
+          <tr>
+            <td>Офис 204</td>
+            <td>Протекает кран</td>
+            <td><span class="badge pending">Средний</span></td>
+            <td><span class="badge approved">Назначен</span></td>
+            <td>16 июня</td>
+          </tr>
+          <tr>
+            <td>Коридор 2 этаж</td>
+            <td>Не горит свет</td>
+            <td><span class="badge rejected">Высокий</span></td>
+            <td><span class="badge approved">Выполнено</span></td>
+            <td>14 июня</td>
+          </tr>
+          <tr>
+            <td>Склад</td>
+            <td>Заклинила дверь</td>
+            <td><span class="badge pending">Низкий</span></td>
+            <td><span class="badge pending">Ожидает</span></td>
+            <td>18 июня</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+
+  <!-- ОТЧЁТЫ -->
+  <section id="reports" class="section">
+    <h3>Отчёты</h3>
+    <div class="grid">
+      <div class="card">
+        <h4>Сводка за июнь</h4>
+        <p>Выполнено задач: 9 из 24</p>
+        <p>Просроченных задач: 3</p>
+        <p>Сумма закупок: 123 500 ₸</p>
+        <p>Заявок на ремонт: 4</p>
       </div>
-      <div class="employee">
+      <div class="card">
-        <div class="avatar">Р</div>
+        <h4>Эффективность</h4>
-        <div class="info">
+        <p>Средний % выполнения: 88%</p>
-          <div class="name">Руслан М.</div>
+        <p>Лучший сотрудник: Динара С. (95%)</p>
-          <div class="role">Техник</div>
+        <p>Задач без исполнителя: 0</p>
-        </div>
-        <div class="tasks-count">6 задач</div>
-      </div>
-      <div class="employee">
-        <div class="avatar">Д</div>
-        <div class="info">
-          <div class="name">Динара С.</div>
-          <div class="role">Документооборот</div>
-        </div>
-        <div class="tasks-count">5 задач</div>
-      </div>
-      <div class="employee">
-        <div class="avatar">А</div>
-        <div class="info">
-          <div class="name">Алексей В.</div>
-          <div class="role">Кладовщик</div>
-        </div>
-        <div class="tasks-count">5 задач</div>
       </div>
     </div>
-  </div>
+  </section>
+
+  <!-- НАСТРОЙКИ -->
+  <section id="settings" class="section">
+    <h3>Настройки</h3>
+    <div class="panel">
+      <p style="color:var(--gray-500);margin-bottom:16px">Раздел настроек панели управления</p>
+      <div class="task">
+        <div class="info">
+          <div class="title">Уведомления о просроченных задачах</div>
+          <div class="meta">Включено • Ежедневно в 9:00</div>
+        </div>
+        <div class="priority low">Активно</div>
+      </div>
+      <div class="task">
+        <div class="info">
+          <div class="title">Автоматическое напоминание исполнителям</div>
+          <div class="meta">За 24 часа до дедлайна</div>
+        </div>
+        <div class="priority low">Активно</div>
+      </div>
+      <div class="task">
+        <div class="info">
+          <div class="title">Экспорт отчётов в PDF</div>
+          <div class="meta">Раз в неделю по пятницам</div>
+        </div>
+        <div class="priority low">Активно</div>
+      </div>
+    </div>
+  </section>
 </main>
 
+<script>
+document.querySelectorAll('.sidebar nav a').forEach(link => {
+  link.addEventListener('click', function(e) {
+    document.querySelectorAll('.sidebar nav a').forEach(l => l.classList.remove('active'));
+    this.classList.add('active');
+  });
+});
+</script>
+
 </body>
 </html>