refactor: move frontend JS to external files and enable strict CSP

public/branches.html

@@ -16,7 +16,7 @@
     </div>
 
     <div class="actions-row" style="margin-bottom:16px">
-      <button class="btn-primary" onclick="openBranchModal()" id="addBranchBtn">
+      <button class="btn-primary" id="addBranchBtn" type="button">
         <span style="font-size:1.2rem">+</span> Добавить филиал
       </button>
     </div>
@@ -28,7 +28,7 @@
 </div>
 
 <!-- Branch Modal -->
-<div class="modal-overlay" id="branchModal" onclick="if(event.target===this)closeBranchModal()">
+<div class="modal-overlay" id="branchModal">
   <div class="edit-modal" style="max-width:480px">
     <h3 id="branchModalTitle">Создать филиал</h3>
     <form id="branchForm" class="settings-stack" style="gap:12px">
@@ -52,125 +52,19 @@
         </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="button" class="btn-primary ghost" id="branchCancelBtn">Отмена</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')">
+<div class="modal-overlay" id="imgModal">
   <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>
+<script src="js/branches.js"></script>
 <style>
 .branches-grid {
   display: grid;