feat: add branches feature, security audit, and multi-branch support

2026-09-09 09:41:07 +03:00
parent 7a003e5df6
commit d6e589d2f5
19 changed files with 1377 additions and 82 deletions
@@ -0,0 +1,253 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Филиалы — Админ-панель</title>
+<link rel="stylesheet" href="admin.css">
+</head>
+<body data-page="branches">
+<div class="layout">
+  <div class="sidebar" id="sidebar"></div>
+  <div class="main">
+    <div class="page-head">
+      <h2>Филиалы</h2>
+      <p class="page-sub">Управление филиалами и привязка групп</p>
+    </div>
+
+    <div class="actions-row" style="margin-bottom:16px">
+      <button class="btn-primary" onclick="openBranchModal()" id="addBranchBtn">
+        <span style="font-size:1.2rem">+</span> Добавить филиал
+      </button>
+    </div>
+
+    <div class="branches-grid" id="branchesGrid">
+      <div class="empty">Загрузка…</div>
+    </div>
+  </div>
+</div>
+
+<!-- Branch Modal -->
+<div class="modal-overlay" id="branchModal" onclick="if(event.target===this)closeBranchModal()">
+  <div class="edit-modal" style="max-width:480px">
+    <h3 id="branchModalTitle">Создать филиал</h3>
+    <form id="branchForm" class="settings-stack" style="gap:12px">
+      <input type="hidden" name="id" id="branchId">
+      <div class="settings-row">
+        <div class="settings-field" style="flex:1">
+          <label>Название <span style="color:#ef4444">*</span></label>
+          <input type="text" name="name" class="settings-input" required placeholder="Например: Центральный офис" autocomplete="off">
+        </div>
+      </div>
+      <div class="settings-row">
+        <div class="settings-field" style="flex:1">
+          <label>Адрес</label>
+          <input type="text" name="address" class="settings-input" placeholder="Улица, дом, офис">
+        </div>
+      </div>
+      <div class="settings-row">
+        <div class="settings-field" style="flex:1">
+          <label>Телефон</label>
+          <input type="text" name="phone" class="settings-input" placeholder="+7 (XXX) XXX-XX-XX">
+        </div>
+      </div>
+      <div class="card-foot" style="justify-content:flex-end;gap:8px">
+        <button type="button" class="btn-primary ghost" onclick="closeBranchModal()">Отмена</button>
+        <button type="submit" class="btn-primary" id="branchSubmitBtn">Создать</button>
+      </div>
+    </form>
+  </div>
+</div>
+
+<div class="modal-overlay" id="imgModal" onclick="this.classList.remove('open')">
+  <img id="imgModalSrc" alt="">
+</div>
+<div class="toast" id="toast"></div>
+<script src="admin.js"></script>
+<script>
+let branches = [];
+
+async function loadBranches() {
+  const res = await fetch(`${API}/api/branches`, { headers: hdr() });
+  if (!res.ok) return;
+  branches = await res.json();
+  renderBranches();
+}
+
+function renderBranches() {
+  const el = document.getElementById('branchesGrid');
+  if (!branches.length) {
+    el.innerHTML = '<div class="empty" style="grid-column:1/-1">Филиалов пока нет. Нажмите «Добавить филиал».</div>';
+    return;
+  }
+  el.innerHTML = branches.map(b => `
+    <div class="branch-card" data-id="${b.id}">
+      <div class="branch-header">
+        <span class="branch-name">${esc(b.name)}</span>
+        <span class="branch-badge">${b.groups_count} ${plural(b.groups_count, 'группа', 'группы', 'групп')}</span>
+      </div>
+      ${b.address ? `<div class="branch-meta">📍 ${esc(b.address)}</div>` : ''}
+      ${b.phone ? `<div class="branch-meta">📞 ${esc(b.phone)}</div>` : ''}
+      <div class="branch-actions">
+        <button class="branch-edit" onclick="openBranchModal(${b.id})" title="Редактировать">✎</button>
+        ${b.groups_count === 0 ? `<button class="branch-delete" onclick="deleteBranch(${b.id})" title="Удалить">&times;</button>` : ''}
+      </div>
+    </div>
+  `).join('');
+}
+
+function plural(n, one, few, many) {
+  n = Math.abs(n) % 100; const n1 = n % 10;
+  if (n > 10 && n < 20) return many;
+  if (n1 > 1 && n1 < 5) return few;
+  if (n1 === 1) return one;
+  return many;
+}
+
+function openBranchModal(id = null) {
+  const modal = document.getElementById('branchModal');
+  const form = document.getElementById('branchForm');
+  const title = document.getElementById('branchModalTitle');
+  const submitBtn = document.getElementById('branchSubmitBtn');
+  form.reset();
+  document.getElementById('branchId').value = '';
+  if (id) {
+    const b = branches.find(x => x.id === id);
+    if (!b) return;
+    title.textContent = 'Редактировать филиал';
+    submitBtn.textContent = 'Сохранить';
+    form.name.value = b.name;
+    form.address.value = b.address || '';
+    form.phone.value = b.phone || '';
+    document.getElementById('branchId').value = b.id;
+  } else {
+    title.textContent = 'Создать филиал';
+    submitBtn.textContent = 'Создать';
+  }
+  modal.classList.add('open');
+  setTimeout(() => form.name.focus(), 100);
+}
+
+function closeBranchModal() {
+  document.getElementById('branchModal').classList.remove('open');
+}
+
+document.getElementById('branchForm').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const fd = new FormData(e.target);
+  const id = fd.get('id');
+  const name = fd.get('name').trim();
+  const address = fd.get('address').trim();
+  const phone = fd.get('phone').trim();
+  if (!name) { alert('Название обязательно'); return; }
+
+  const url = id ? `${API}/api/branches/${id}` : `${API}/api/branches`;
+  const method = id ? 'PUT' : 'POST';
+  const res = await fetch(url, {
+    method,
+    headers: hdrJson(),
+    body: JSON.stringify({ name, address: address || null, phone: phone || null })
+  });
+  if (res.ok) {
+    showToast(id ? 'Филиал обновлён' : 'Филиал создан');
+    closeBranchModal();
+    loadBranches();
+  } else { const err = await res.json(); alert(err.error || 'Ошибка'); }
+});
+
+async function deleteBranch(id) {
+  if (!confirm('Удалить этот филиал?')) return;
+  const res = await fetch(`${API}/api/branches/${id}`, { method: 'DELETE', headers: hdr() });
+  if (res.ok) {
+    showToast('Филиал удалён');
+    loadBranches();
+  } else { const err = await res.json(); alert(err.error || 'Ошибка'); }
+}
+
+(async () => {
+  if (await checkAuth()) {
+    buildSidebar(document.body.dataset.page);
+    loadBranches();
+  }
+})();
+</script>
+<style>
+.branches-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 12px;
+}
+.branch-card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  transition: box-shadow .15s, border-color .15s;
+}
+.branch-card:hover {
+  box-shadow: 0 4px 16px rgba(0,0,0,.08);
+  border-color: var(--accent);
+}
+.branch-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.branch-name {
+  font-weight: 600;
+  font-size: .95rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.branch-badge {
+  font-size: .7rem;
+  font-weight: 600;
+  color: var(--accent);
+  background: rgba(37,99,235,.1);
+  padding: 2px 8px;
+  border-radius: 999px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.branch-meta {
+  font-size: .78rem;
+  color: var(--muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.branch-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+  margin-top: 4px;
+}
+.branch-actions button {
+  background: none;
+  border: none;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 6px 8px;
+  border-radius: 6px;
+  transition: background .15s, color .15s;
+}
+.branch-actions button:hover {
+  background: var(--bg);
+  color: var(--text);
+}
+.branch-actions .branch-delete:hover {
+  color: #ef4444;
+  background: rgba(239,68,68,.1);
+}
+@media (max-width: 640px) {
+  .branches-grid { grid-template-columns: 1fr; }
+}
+</style>
+</body>
+</html>