admin.html - master - tarabarski/HasselDash

Репозиторий помещен в архив 08 июля 2026. Вся функциональность доступна только для чтения.
admin.html
675 строк41 KB
tarabarski
Create: contacts.html, admin.html, db.js, designer.html, styles.css, admin-settings.html, index.html, project.html, admin-designer.html, admin-project.html, config.js, google-drive.js, storage.js
05 июл 2026, 22:48
Верифицирован
05 июл 2026, 22:48fa4f112
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HASSEL — Админ-панель</title>
<link rel="stylesheet" href="styles.css">
<style>
  .bell-wrap { position:relative; }
  .bell-btn { width:38px;height:38px;border-radius:12px;border:1px solid var(--line-strong);background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:16px;position:relative; }
  .bell-btn .dot { position:absolute;top:5px;right:6px;width:10px;height:10px;border-radius:50%;background:var(--danger);display:none;box-shadow:0 0 0 2px var(--surface); }
  .bell-btn.has-unread .dot { display:block;animation:bell-pulse 1.8s ease-in-out infinite; }
  @keyframes bell-pulse {
    0%,100% { transform:scale(1);box-shadow:0 0 0 2px var(--surface),0 0 0 0 rgba(220,53,69,0.6); }
    50%      { transform:scale(1.25);box-shadow:0 0 0 2px var(--surface),0 0 0 6px rgba(220,53,69,0); }
  }
  .bell-dropdown { position:absolute;top:48px;right:0;width:320px;background:#FFFBF4;border:1px solid var(--line-strong);border-radius:var(--radius-m);box-shadow:0 16px 48px -8px rgba(27,24,21,0.40);display:none;z-index:200;overflow:hidden; }
  @media (max-width:480px) {
    .bell-dropdown { position:fixed;top:62px;left:14px;right:14px;width:auto;border-radius:16px; }
  }
  .bell-item { padding:12px 14px;border-bottom:1px solid rgba(27,24,21,0.08);display:block; }
  .bell-item:hover { background:#F5EFE2; }
  .bell-dropdown.open { display:block; }
  .bell-dropdown .head { padding:12px 14px;font-weight:700;font-size:13px;border-bottom:1px solid var(--line); }
  .bell-item { padding:12px 14px;border-bottom:1px solid var(--line);display:block; }
  .bell-item:hover { background:var(--paper-dim); }
  .bell-item .from { font-weight:700;font-size:12.5px; }
  .bell-item .txt  { font-size:12.5px;color:var(--ink-soft);margin-top:3px; }
  .bell-item .time { font-size:11px;color:var(--graphite);margin-top:4px; }
  .bell-empty { padding:24px 16px;text-align:center;color:var(--graphite);font-size:12.5px; }
  .tab-section { display:none; }
  .tab-section.active { display:block; }
  .delete-x { width:28px;height:28px;border-radius:9px;border:1px solid var(--line-strong);background:var(--surface);color:var(--danger);font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
  .delete-x:hover { background:var(--danger-dim);border-color:var(--danger-dim); }
  .archive-row { display:flex;align-items:center;gap:14px;padding:14px 18px; }
  .archive-section-title { font-size:13px;font-weight:700;color:var(--ink-soft);margin:22px 0 10px;text-transform:uppercase;letter-spacing:.04em; }
  .archive-section-title:first-child { margin-top:0; }
  .drive-status { position:absolute;bottom:14px;left:0;right:0;text-align:center; }
</style>
</head>
<body>
<div class="app-shell">
  <aside class="sidebar">
    <div class="brand">
      <div class="mark">
        <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect x="6" y="6" width="88" height="88" stroke="currentColor" stroke-width="6"/>
          <rect x="24" y="24" width="52" height="52" stroke="currentColor" stroke-width="6"/>
          <rect x="42" y="42" width="16" height="16" stroke="currentColor" stroke-width="6"/>
        </svg>
      </div>
      <div class="name-wrap"><div class="name">HASSEL</div><div class="tag">Студия мебели</div></div>
    </div>
    <nav class="nav-group">
      <a class="nav-item active" href="#" id="tabProjectsBtn"><span class="ic"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="1.5" y="1.5" width="5" height="5" rx="1.2"/><rect x="9.5" y="1.5" width="5" height="5" rx="1.2"/><rect x="1.5" y="9.5" width="5" height="5" rx="1.2"/><rect x="9.5" y="9.5" width="5" height="5" rx="1.2"/></svg></span> Проекты</a>
      <a class="nav-item" href="#" id="tabDesignersBtn"><span class="ic"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><circle cx="8" cy="5.5" r="2.8"/><path d="M2.5 14.5c0-3.038 2.462-5.5 5.5-5.5s5.5 2.462 5.5 5.5"/></svg></span> Дизайнеры</a>
      <a class="nav-item" href="#" id="tabArchiveBtn"><span class="ic"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M1.5 4h13v2.5h-13z"/><path d="M2.5 6.5v8h11v-8"/><path d="M6 10.5h4"/></svg></span> Архив</a>
      <a class="nav-item" href="contacts.html" title="Контакты"><span class="ic"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M2 4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4z"/><path d="M2 4l6 5 6-5"/></svg></span> Контакты</a>
      <a class="nav-item" href="admin-settings.html"><span class="ic"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><circle cx="8" cy="8" r="2.2"/><path d="M8 1.5V3M8 13v1.5M1.5 8H3M13 8h1.5M3.4 3.4l1.06 1.06M11.54 11.54l1.06 1.06M12.6 3.4l-1.06 1.06M4.46 11.54l-1.06 1.06"/></svg></span> Настройки</a>
    </nav>

    <div class="sidebar-footer">
      <div class="who"><b id="whoName"></b><span id="whoEmail"></span></div>
      <button id="logoutBtn" title="Выйти"></button>
    </div>
  </aside>

  <!-- Оверлей мобильного меню -->
  <div class="mob-sidebar-ov" id="mobSidebarOv" onclick="closeMobMenu()"></div>

  <div class="main">
    <div class="topbar">
      <div class="row gap-8" style="align-items:center;">
        <button class="mob-menu-btn" onclick="openMobMenu()">☰</button>
        <div class="crumbs"><b id="crumbTitle">Все проекты</b></div>
      </div>
      <div class="row gap-12">
        <label class="top-search"><span class="ic">🔍</span><input type="text" id="searchInput" placeholder="Поиск проектов…"></label>
        <div class="bell-wrap">
          <button class="bell-btn" id="bellBtn">🔔<span class="dot"></span></button>
          <div class="bell-dropdown" id="bellDropdown">
            <div class="head" style="display:flex;align-items:center;justify-content:space-between;">
              <span>Уведомления</span>
              <button onclick="clearNotifs()" style="border:none;background:none;color:var(--graphite);font-size:11px;cursor:pointer;padding:2px 6px;">Очистить</button>
            </div>
            <div id="bellList"></div>
          </div>
        </div>
        <div class="av-menu-wrap">
          <div class="avatar-circle" id="whoAvatar" onclick="toggleAvMenu()"></div>
          <div class="av-dropdown" id="avDropdown">
            <div class="av-dropdown-header">
              <div class="av-dropdown-name" id="avDropName">—</div>
              <div class="av-dropdown-role">Администратор</div>
            </div>
            <a class="av-dropdown-item" href="admin-settings.html"><span class="av-ic">⚙</span> Настройки аккаунта</a>
            <button class="av-dropdown-item" onclick="switchAccount()"><span class="av-ic">↔</span> Сменить аккаунт</button>
            <button class="av-dropdown-item av-dropdown-danger" onclick="doLogout()"><span class="av-ic">⏻</span> Выйти</button>
          </div>
        </div>
      </div>
    </div>

    <div class="content">
      <div id="projectsTab" class="tab-section active">
        <div class="row between" style="margin-bottom:16px;">
          <h3 style="font-size:15px;">Все проекты</h3>
          <div class="row gap-8">
            <div id="driveStatusEl"></div>
            <button class="btn btn-primary" id="newProjectBtn">+ Новый проект</button>
          </div>
        </div>
        <div id="projectGrid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;"></div>
      </div>

      <div id="designersTab" class="tab-section">
        <div class="row between" style="margin-bottom:14px;">
          <h3 style="font-size:15px;">Дизайнеры студии</h3>
          <button class="btn btn-primary btn-sm" id="newDesignerBtn">+ Добавить дизайнера</button>
        </div>
        <div id="designersList" style="display:flex;flex-direction:column;gap:10px;"></div>
      </div>

      <div id="archiveTab" class="tab-section">
        <p class="text-sm muted" style="margin-bottom:18px;">Архивированные проекты и дизайнеры. Восстановите или удалите навсегда (потребуется пароль).</p>
        <div class="archive-section-title">Проекты в архиве</div>
        <div id="archivedProjects" style="display:flex;flex-direction:column;gap:10px;"></div>
        <div class="archive-section-title">Дизайнеры в архиве</div>
        <div id="archivedDesigners" style="display:flex;flex-direction:column;gap:10px;"></div>
      </div>
    </div>
  </div>
</div>

<!-- Модалка: новый проект -->
<div id="modalOverlay" style="display:none;position:fixed;inset:0;background:rgba(21,23,43,.45);backdrop-filter:blur(4px);z-index:50;align-items:center;justify-content:center;">
  <div class="card" style="width:440px;padding:24px;">
    <h3 style="font-size:17px;margin-bottom:18px;">Новый проект</h3>
    <div class="field"><label>Название проекта</label><input id="pTitle" placeholder="ЖК River Park, Квартира 120 м²"></div>
    <div class="field"><label>Заказчик</label><input id="pClient" placeholder="Анна Смирнова"></div>
    <div class="field"><label>Дизайнер</label><select id="pDesigner"></select></div>
    <div class="field">
      <label>Обложка проекта</label>
      <div style="display:flex;gap:10px;align-items:center;">
        <label style="flex:1;cursor:pointer;padding:9px 14px;border:1px dashed var(--line-strong);border-radius:10px;text-align:center;font-size:12.5px;color:var(--graphite);background:var(--paper-dim);">
          <input type="file" id="pCoverFile" accept="image/*" style="display:none;" onchange="previewCover(this)">
          📷 Выбрать фото
        </label>
        <div id="pCoverPreview" style="width:52px;height:52px;border-radius:10px;background:var(--paper-dim);border:1px solid var(--line);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:18px;">📁</div>
      </div>
    </div>
    <div id="driveCreateInfo" style="display:none;font-size:12px;color:var(--success);margin-bottom:12px;">
      ✓ На Google Drive будет создана папка проекта
    </div>
    <div class="row gap-8" style="justify-content:flex-end;margin-top:8px;">
      <button class="btn btn-ghost" id="cancelModal">Отмена</button>
      <button class="btn btn-primary" id="saveProject">Создать проект</button>
    </div>
  </div>
</div>

<!-- Модалка: новый дизайнер -->
<div id="designerOverlay" style="display:none;position:fixed;inset:0;background:rgba(21,23,43,.45);backdrop-filter:blur(4px);z-index:50;align-items:center;justify-content:center;">
  <div class="card" style="width:380px;padding:24px;">
    <h3 style="font-size:17px;margin-bottom:18px;">Новый дизайнер</h3>
    <div class="field"><label>Имя</label><input id="uName" placeholder="Мария Иванова"></div>
    <div class="field"><label>Логин</label><input id="uEmail" placeholder="maria"></div>
    <div class="field"><label>Пароль</label><input type="password" id="uPassword" placeholder="••••••••"></div>
    <div class="field"><label>Описание (видно только админу)</label><textarea id="uDesc" placeholder="Специализация, контакты…" style="height:72px;border-radius:10px;resize:none;"></textarea></div>
    <div class="field"><label>Описание <span class='muted' style='font-weight:400;'>(видно только вам)</span></label><textarea id="uDesc" placeholder="Специализация, стиль работы…" style="height:72px;border-radius:var(--radius-s);"></textarea></div>
    <div class="row gap-8" style="justify-content:flex-end;margin-top:8px;">
      <button class="btn btn-ghost" id="cancelDesignerModal">Отмена</button>
      <button class="btn btn-primary" id="saveDesigner">Добавить</button>
    </div>
  </div>
</div>

<!-- Модалка: пароль для удаления -->
<div id="passwordOverlay" style="display:none;position:fixed;inset:0;background:rgba(21,23,43,.5);backdrop-filter:blur(4px);z-index:60;align-items:center;justify-content:center;">
  <div class="card" style="width:380px;padding:24px;">
    <h3 style="font-size:17px;margin-bottom:6px;">Удалить навсегда</h3>
    <p class="text-sm muted" style="margin-bottom:16px;" id="passwordWarning"></p>
    <div class="field"><label>Пароль администратора</label><input type="password" id="confirmPassword" placeholder="••••••••"></div>
    <div class="error-msg" id="passwordError">Неверный пароль.</div>
    <div class="row gap-8" style="justify-content:flex-end;margin-top:8px;">
      <button class="btn btn-ghost" id="cancelPasswordModal">Отмена</button>
      <button class="btn btn-danger" id="confirmPasswordBtn">Удалить навсегда</button>
    </div>
  </div>
</div>

<!-- Модалка: редактировать проект -->
<div id="editProjectOverlay" style="display:none;position:fixed;inset:0;background:rgba(21,23,43,.45);backdrop-filter:blur(4px);z-index:50;align-items:center;justify-content:center;">
  <div class="card" style="width:460px;padding:24px;">
    <h3 style="font-size:17px;margin-bottom:18px;">Редактировать проект</h3>
    <input type="hidden" id="epId">
    <div class="field"><label>Название проекта</label><input id="epTitle" placeholder="ЖК River Park, Квартира 120 м²"></div>
    <div class="field"><label>Заказчик</label><input id="epClient" placeholder="Анна Смирнова"></div>
    <div class="field"><label>Дизайнер</label><select id="epDesigner"></select></div>
    <div class="field"><label>Описание</label><textarea id="epDesc" placeholder="Краткое описание проекта…" style="height:72px;border-radius:10px;resize:none;"></textarea></div>
    <div class="field">
      <label>Обложка</label>
      <div style="display:flex;gap:10px;align-items:center;">
        <label style="flex:1;cursor:pointer;padding:9px 14px;border:1px dashed var(--line-strong);border-radius:10px;text-align:center;font-size:12.5px;color:var(--graphite);background:var(--paper-dim);">
          <input type="file" id="epCoverFile" accept="image/*" style="display:none;" onchange="previewEditCover(this)">
          📷 Заменить фото
        </label>
        <div id="epCoverPreview" style="width:52px;height:52px;border-radius:10px;background:var(--paper-dim);border:1px solid var(--line);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:18px;">📁</div>
      </div>
    </div>
    <div class="row gap-8" style="justify-content:flex-end;margin-top:8px;">
      <button class="btn btn-ghost" id="cancelEditProject">Отмена</button>
      <button class="btn btn-primary" id="saveEditProject">Сохранить</button>
    </div>
  </div>
</div>

<script src="config.js"></script>
<script src="db.js"></script>
<script src="storage.js"></script>
<script src="google-drive.js"></script>
<script>
const session = requireAuth('admin');
if (session) {
  document.getElementById('whoName').textContent  = session.name;
  document.getElementById('whoEmail').textContent = 'Администратор';
  const _av = document.getElementById('whoAvatar');
  if (session.avatar) {
    _av.innerHTML = `<img src="${session.avatar}" style="width:100%;height:100%;object-fit:cover;border-radius:50%;">`;
  } else {
    _av.textContent = initials(session.name);
  }
}
document.getElementById('logoutBtn').onclick = doLogout;
if (session) document.getElementById('avDropName').textContent = session.name;

function toggleAvMenu() { document.getElementById('avDropdown').classList.toggle('open'); }
function doLogout() { clearSession(); window.location.replace('index.html?logout=1'); }
function switchAccount() { clearSession(); window.location.replace('index.html'); }
document.addEventListener('click', e => { if (!e.target.closest('.av-menu-wrap')) document.getElementById('avDropdown').classList.remove('open'); });

/* ── Мобильное меню ── */
function openMobMenu() {
  document.querySelector('.sidebar').classList.add('mob-open');
  document.getElementById('mobSidebarOv').classList.add('open');
}
function closeMobMenu() {
  document.querySelector('.sidebar').classList.remove('mob-open');
  document.getElementById('mobSidebarOv').classList.remove('open');
}
function mobNavClick(tab) {
  closeMobMenu();
  ['projects','designers','archive'].forEach(t => {
    document.getElementById('mbn' + t.charAt(0).toUpperCase() + t.slice(1))?.classList.toggle('active', t === tab);
  });
  switchTab(tab);
}

let db = loadDB();

/* ── Drive ── */
driveInit().then(() => {
  document.getElementById('driveStatusEl').innerHTML = driveStatusBadge();
  if (driveEnabled()) document.getElementById('driveCreateInfo').style.display = 'block';
});

/* ── Вкладки ── */
const tabBtns     = { projects:document.getElementById('tabProjectsBtn'), designers:document.getElementById('tabDesignersBtn'), archive:document.getElementById('tabArchiveBtn') };
const tabSections = { projects:document.getElementById('projectsTab'),    designers:document.getElementById('designersTab'),    archive:document.getElementById('archiveTab') };
const tabTitles   = { projects:'Все проекты', designers:'Дизайнеры', archive:'Архив' };
function showTab(name) {
  Object.keys(tabBtns).forEach(k => {
    tabBtns[k].classList.toggle('active', k === name);
    tabSections[k].classList.toggle('active', k === name);
  });
  document.getElementById('crumbTitle').textContent = tabTitles[name];
  if (name === 'designers') renderDesigners();
  if (name === 'archive')   renderArchive();
}
tabBtns.projects.onclick = e => { e.preventDefault(); showTab('projects'); };
tabBtns.designers.onclick = e => { e.preventDefault(); showTab('designers'); };
tabBtns.archive.onclick   = e => { e.preventDefault(); showTab('archive'); };

/* ── Уведомления ── */
const _eventLabels = { comment:'💬 Комментарий', status:'🔄 Статус изменён' };
const _roleLabels  = { admin:'Админ', designer:'Дизайнер' };

function renderBell() {
  db = loadDB();
  const unread = unreadNotifications(db);
  document.getElementById('bellBtn').classList.toggle('has-unread', unread.length > 0);
  const list  = document.getElementById('bellList');
  const items = [...db.notifications].reverse().slice(0, 20);
  if (!items.length) { list.innerHTML = `<div class="bell-empty">Пока нет уведомлений</div>`; return; }
  list.innerHTML = items.map(n => {
    const p     = db.projects.find(x => x.id === n.projectId);
    const label = _eventLabels[n.event] || '📋 Событие';
    const role  = _roleLabels[n.fromRole] || '';
    return `<a class="bell-item" href="project.html?token=${p?p.accessToken:''}&item=${n.itemId}" onclick="markRead('${n.id}')" style="${n.read?'opacity:.55;':''}">
      <div class="from" style="display:flex;gap:6px;align-items:center;">
        <span>${label}</span>
        <span style="color:var(--graphite);font-weight:400;">· ${escapeHtml(n.fromName)}</span>
        ${role?`<span style="color:var(--graphite);font-weight:400;font-size:11px;">(${role})</span>`:''}
      </div>
      <div class="txt">${p?'<b>'+escapeHtml(p.title)+'</b>: ':''}${escapeHtml(n.text)}</div>
      <div class="time">${n.createdAt}</div>
    </a>`;
  }).join('');
}
function escapeHtml(s) { const d=document.createElement('div');d.textContent=s;return d.innerHTML; }
function markRead(id) { db=loadDB(); const n=db.notifications.find(x=>x.id===id); if(n) n.read=true; saveDB(db); }
function clearNotifs() {
  db = loadDB();
  clearAllNotifications(db);
  saveDB(db);
  renderBell();
}
document.getElementById('bellBtn').onclick = () => { document.getElementById('bellDropdown').classList.toggle('open'); renderBell(); };
document.addEventListener('click', e => { if (!e.target.closest('.bell-wrap')) document.getElementById('bellDropdown').classList.remove('open'); });

/* ── Проекты ── */
function designerName(id) { const u=db.users.find(u=>u.id===id); return u?u.name:'—'; }

function renderProjects() {
  db = loadDB();
  const grid = document.getElementById('projectGrid');
  const q = (document.getElementById('searchInput').value||'').trim().toLowerCase();
  const active = db.projects.filter(p => !p.archived);
  const list   = active.filter(p => !q || p.title.toLowerCase().includes(q) || p.client.toLowerCase().includes(q));
  if (!active.length) {
    grid.innerHTML = `<div class="empty-state" style="grid-column:1/-1;"><div class="ic">▦</div><h3>Проектов пока нет</h3><p>Создайте первый проект.</p></div>`;
    return;
  }
  if (!list.length) {
    grid.innerHTML = `<div class="empty-state" style="grid-column:1/-1;"><div class="ic">🔍</div><h3>Ничего не найдено</h3></div>`;
    return;
  }
  const RU_MONTHS = ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'];
  const sorted = [...list].sort((a, b) => (b.createdAt||'').localeCompare(a.createdAt||''));
  let curMonthKey = null;
  grid.innerHTML = sorted.map(p => {
    const rooms = db.rooms.filter(r => r.projectId === p.id);
    const items = db.items.filter(it => rooms.some(r => r.id === it.roomId));
    const link  = `project.html?token=${p.accessToken}`;
    const statusHtml = p.status === 'approved'
      ? '<span class="badge badge-green">Согласовано</span> <span class="badge badge-purple">Утверждено</span>'
      : `<span class="badge ${STATUS_CLASSES[p.status]||'badge-amber'}">${STATUS_LABELS[p.status]||p.status}</span>`;
    const swatch = ['#C9BBA5','#9AA7B0','#D7CFC4','#B7A98F','#A9B7A0'][Math.abs(p.id.split('').reduce((a,c)=>a+c.charCodeAt(0),0))%5];

    let divider = '';
    if (p.createdAt) {
      const [yr, mo] = p.createdAt.split('-');
      const mk = `${yr}-${mo}`;
      if (mk !== curMonthKey) {
        curMonthKey = mk;
        const label = `${RU_MONTHS[parseInt(mo,10)-1]} ${yr}`;
        divider = `<div style="grid-column:1/-1;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--graphite);padding:4px 2px 2px;border-bottom:1px solid var(--line);margin-bottom:2px;">${label}</div>`;
      }
    }

    return divider + `
    <div class="card" style="padding:0;display:flex;flex-direction:column;overflow:hidden;">
      ${p.coverImage
        ? `<div style="height:100px;flex-shrink:0;"><img src="${p.coverImage}" style="width:100%;height:100%;object-fit:cover;display:block;"></div>`
        : `<div style="height:6px;background:${swatch};"></div>`
      }
      <div style="padding:16px;display:flex;flex-direction:column;gap:8px;flex:1;">
        <a href="${link}" style="text-decoration:none;color:inherit;">
          <div style="font-size:16px;font-weight:800;line-height:1.35;margin-bottom:4px;">${p.title}</div>
        </a>
        <div style="font-size:13px;color:var(--ink-soft);line-height:1.6;">
          Заказчик: <span style="text-decoration:underline;font-weight:600;">${p.client}</span><br>
          Дизайнер: <span style="text-decoration:underline;font-weight:600;">${designerName(p.designerId)}</span>
          <span style="color:var(--graphite);margin-left:8px;">${rooms.length} помещ. · ${items.length} изд.</span><br>
          <span style="color:var(--graphite);font-size:11.5px;">Создан: ${p.createdAt}</span>
        </div>
        <div style="display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:2px;">
          ${statusHtml}
        </div>
        <div style="display:flex;align-items:center;gap:6px;padding-top:8px;border-top:1px solid var(--line);margin-top:auto;">
          <a class="btn btn-ghost btn-sm" href="${link}" style="flex:1;justify-content:center;">Открыть</a>
          <button class="btn btn-ghost btn-sm" onclick="openEditProject('${p.id}')" style="flex:1;justify-content:center;">Изменить</button>
          <button class="btn btn-ghost btn-sm" onclick="copyDesignerLink('${location.href.replace('admin.html','')}${link}','${p.designerId}')" style="flex:1;justify-content:center;">Ссылка</button>
          <button class="delete-x" title="В архив" onclick="confirmArchiveProject('${p.id}')">✕</button>
        </div>
      </div>
    </div>`;
  }).join('');
}
function copyLink(link) { navigator.clipboard?.writeText(link).catch(()=>{}); alert('Ссылка скопирована:\n'+link); }
function copyDesignerLink(base, designerId) {
  const link = base + '&did=' + designerId;
  navigator.clipboard?.writeText(link).catch(()=>{});
  alert('Ссылка для дизайнера скопирована:\n' + link);
}

function confirmArchiveProject(id) {
  if (!confirm('Переместить проект в архив?')) return;
  db = loadDB(); archiveProject(db, id); saveDB(db); renderProjects();
}

const overlay = document.getElementById('modalOverlay');
document.getElementById('newProjectBtn').onclick = () => {
  const sel = document.getElementById('pDesigner');
  sel.innerHTML = db.users.filter(u=>u.role==='designer'&&!u.archived).map(u=>`<option value="${u.id}">${u.name}</option>`).join('');
  if (!sel.innerHTML) { alert('Сначала добавьте дизайнера.'); return; }
  document.getElementById('pTitle').value = '';
  document.getElementById('pClient').value = '';
  const prev = document.getElementById('pCoverPreview');
  prev.innerHTML = '📁'; prev._b64 = null;
  document.getElementById('pCoverFile').value = '';
  overlay.style.display = 'flex';
};
document.getElementById('cancelModal').onclick = () => overlay.style.display = 'none';
document.getElementById('saveProject').onclick = async () => {
  const title      = document.getElementById('pTitle').value.trim();
  const client     = document.getElementById('pClient').value.trim();
  const designerId = document.getElementById('pDesigner').value;
  const coverImage = document.getElementById('pCoverPreview')?._b64 || null;
  if (!title || !client) { alert('Заполните все поля'); return; }
  const btn = document.getElementById('saveProject');
  btn.disabled = true; btn.textContent = 'Создаю…';

  const token = 'p-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2,6);
  let driveFolderId = null, driveFolderLink = null;

  if (driveEnabled()) {
    try {
      const folder = await driveCreateFolder(title, GOOGLE_CONFIG.ROOT_FOLDER_ID);
      driveFolderId  = folder.id;
      driveFolderLink = folder.webViewLink;
    } catch(e) { console.warn('[Drive] Ошибка создания папки:', e); }
  }

  db = loadDB();
  db.projects.push({
    id: uid('p'), title, client, designerId, status:'review', accessToken:token,
    createdAt: new Date().toISOString().slice(0,10), updatedAt: new Date().toISOString().slice(0,10),
    archived: false, driveFolderId, driveFolderLink, coverImage
  });
  saveDB(db);
  btn.disabled = false; btn.textContent = 'Создать проект';
  overlay.style.display = 'none';
  renderProjects();
};

/* ── Дизайнеры ── */
const designerOverlay = document.getElementById('designerOverlay');
document.getElementById('newDesignerBtn').onclick = () => {
  document.getElementById('uName').value = '';
  document.getElementById('uEmail').value = '';
  document.getElementById('uPassword').value = '';
  if(document.getElementById('uDesc')) document.getElementById('uDesc').value = '';
  designerOverlay.style.display = 'flex';
};
document.getElementById('cancelDesignerModal').onclick = () => designerOverlay.style.display = 'none';
document.getElementById('saveDesigner').onclick = () => {
  const name        = document.getElementById('uName').value.trim();
  const email       = document.getElementById('uEmail').value.trim();
  const password    = document.getElementById('uPassword').value.trim();
  const description = document.getElementById('uDesc')?.value?.trim()||'';
  const desc     = (document.getElementById('uDesc')?.value||'').trim();
  if (!name||!email||!password) { alert('Заполните все поля'); return; }
  db = loadDB();
  if (db.users.some(u=>u.email.toLowerCase()===email.toLowerCase())) { alert('Такой логин уже занят'); return; }
  db.users.push({ id:uid('designer'), role:'designer', name, email, password, description, archived:false });
  saveDB(db); designerOverlay.style.display = 'none'; renderDesigners();
};

function renderDesigners() {
  db = loadDB();
  const designers = db.users.filter(u=>u.role==='designer'&&!u.archived);
  const wrap = document.getElementById('designersList');
  if (!designers.length) {
    wrap.innerHTML = `<div class="empty-state"><div class="ic">◎</div><h3>Дизайнеров пока нет</h3></div>`;
    return;
  }
  wrap.innerHTML = designers.map(u => {
    const projects = db.projects.filter(p=>p.designerId===u.id&&!p.archived);
    const cnt = projects.length;
    const swatches = ['#C9BBA5','#9AA7B0','#D7CFC4','#B7A98F','#A9B7A0'];
    const projectsHtml = projects.length ? `<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;padding:12px 14px;border-top:1px solid var(--line);background:rgba(255,251,244,0.35);">${projects.map(p => {
      const rooms = db.rooms.filter(r=>r.projectId===p.id);
      const items = db.items.filter(it=>rooms.some(r=>r.id===it.roomId));
      const link = `project.html?token=${p.accessToken}&did=${u.id}`;
      const statusHtml = p.status==='approved'
        ? '<span class="badge badge-green" style="font-size:10px;">Согласовано</span>'
        : `<span class="badge ${STATUS_CLASSES[p.status]}" style="font-size:10px;">${STATUS_LABELS[p.status]}</span>`;
      const color = swatches[Math.abs(p.id.split('').reduce((a,c)=>a+c.charCodeAt(0),0))%swatches.length];
      const coverHtml = p.coverImage
        ? `<div style="height:72px;flex-shrink:0;overflow:hidden;"><img src="${p.coverImage}" style="width:100%;height:100%;object-fit:cover;display:block;"></div>`
        : `<div style="height:5px;background:${color};flex-shrink:0;"></div>`;
      return `<a href="${link}" style="display:flex;flex-direction:column;border-radius:12px;border:1px solid var(--line-strong);overflow:hidden;background:rgba(255,251,244,0.9);text-decoration:none;color:inherit;box-shadow:0 2px 8px -4px rgba(27,24,21,.12);transition:box-shadow .15s;">
        ${coverHtml}
        <div style="padding:10px 12px;flex:1;display:flex;flex-direction:column;gap:5px;">
          <div style="font-size:12.5px;font-weight:800;line-height:1.3;color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;">${escapeHtml(p.title)}</div>
          <div style="font-size:11px;color:var(--graphite);">${escapeHtml(p.client)}</div>
          <div style="font-size:10.5px;color:var(--graphite);">${rooms.length} помещ. · ${items.length} изд.</div>
          <div style="margin-top:auto;padding-top:6px;">${statusHtml}</div>
        </div>
      </a>`;
    }).join('')}</div>` : `<div style="padding:10px 14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--graphite);font-style:italic;">Проектов нет</div>`;
    return `
    <div class="card" style="padding:0;overflow:hidden;">
      <div style="display:flex;align-items:center;gap:14px;padding:14px 18px;">
        <div style="width:38px;height:38px;border-radius:50%;background:var(--blueprint-dim);color:var(--blueprint);display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;">${initials(u.name)}</div>
        <div style="flex:1;min-width:0;">
          <b>${escapeHtml(u.name)}</b>
          <div class="text-sm muted">${escapeHtml(u.email)}${u.phone?` · ${escapeHtml(u.phone)}`:''}${u.contactEmail?` · ${escapeHtml(u.contactEmail)}`:''}</div>
          ${u.description?`<div class="text-sm" style="color:var(--ink-soft);margin-top:2px;">${escapeHtml(u.description)}</div>`:''}
        </div>
        <span class="dim-tag" style="flex-shrink:0;">${cnt} проектов</span>
        <button class="btn btn-ghost btn-sm" onclick="toggleDesignerEdit('${u.id}')" title="Редактировать">✎</button>
        <button class="delete-x" title="В архив" onclick="confirmArchiveDesigner('${u.id}')">✕</button>
      </div>
      <div id="dedit-${u.id}" style="display:none;padding:14px 18px;border-top:1px solid var(--line);background:rgba(255,251,244,0.6);">
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:10px;">
          <div class="field" style="margin-bottom:0;grid-column:1/-1;">
            <label style="font-size:10px;">Описание</label>
            <input id="ddesc-${u.id}" value="${escapeHtml(u.description||'')}" placeholder="Коротко о дизайнере…" style="font-size:13px;padding:6px 10px;">
          </div>
          <div class="field" style="margin-bottom:0;">
            <label style="font-size:10px;">Телефон</label>
            <input id="dphone-${u.id}" value="${escapeHtml(u.phone||'')}" placeholder="+7 (___) ___-__-__" style="font-size:13px;padding:6px 10px;">
          </div>
          <div class="field" style="margin-bottom:0;">
            <label style="font-size:10px;">Email (контактный)</label>
            <input id="dcemail-${u.id}" value="${escapeHtml(u.contactEmail||'')}" placeholder="mail@example.com" style="font-size:13px;padding:6px 10px;">
          </div>
        </div>
        <div class="row gap-8">
          <button class="btn btn-primary btn-sm" onclick="saveDesignerInfo('${u.id}')">Сохранить</button>
          <button class="btn btn-ghost btn-sm" onclick="toggleDesignerEdit('${u.id}')">Отмена</button>
        </div>
      </div>
      ${projectsHtml}
    </div>`;
  }).join('');
}
function toggleDesignerEdit(id) {
  const el = document.getElementById('dedit-' + id);
  if (el) el.style.display = el.style.display === 'none' ? 'block' : 'none';
}
function saveDesignerInfo(id) {
  db = loadDB();
  const u = db.users.find(x => x.id === id);
  if (!u) return;
  u.description  = document.getElementById('ddesc-'  + id)?.value.trim() || '';
  u.phone        = document.getElementById('dphone-' + id)?.value.trim() || '';
  u.contactEmail = document.getElementById('dcemail-'+ id)?.value.trim() || '';
  saveDB(db); renderDesigners();
}
function confirmArchiveDesigner(id) {
  const u = db.users.find(x=>x.id===id);
  if (!confirm(`Переместить дизайнера «${u.name}» в архив?`)) return;
  db = loadDB(); archiveDesigner(db, id); saveDB(db); renderDesigners();
}

/* ── Архив ── */
function renderArchive() {
  db = loadDB();
  const pWrap = document.getElementById('archivedProjects');
  const dWrap = document.getElementById('archivedDesigners');
  const ap = db.projects.filter(p=>p.archived);
  const ad = db.users.filter(u=>u.role==='designer'&&u.archived);
  pWrap.innerHTML = !ap.length ? `<div class="empty-state"><p>Архив проектов пуст.</p></div>`
    : ap.map(p=>`
    <div class="card archive-row">
      <div style="flex:1;min-width:0;"><b>${p.title}</b><div class="text-sm muted">Заказчик: ${p.client} · Дизайнер: ${designerName(p.designerId)}</div></div>
      <button class="btn btn-ghost btn-sm" onclick="restoreProjectAction('${p.id}')">Восстановить</button>
      <button class="btn btn-danger btn-sm" onclick="openPasswordModal('project','${p.id}','${escapeHtml(p.title)}')">Удалить навсегда</button>
    </div>`).join('');
  dWrap.innerHTML = !ad.length ? `<div class="empty-state"><p>Архив дизайнеров пуст.</p></div>`
    : ad.map(u=>`
    <div class="card archive-row">
      <div style="flex:1;min-width:0;"><b>${u.name}</b><div class="text-sm muted">${u.email}</div></div>
      <button class="btn btn-ghost btn-sm" onclick="restoreDesignerAction('${u.id}')">Восстановить</button>
      <button class="btn btn-danger btn-sm" onclick="openPasswordModal('designer','${u.id}','${escapeHtml(u.name)}')">Удалить навсегда</button>
    </div>`).join('');
}
function restoreProjectAction(id)  { db=loadDB(); restoreProject(db,id);  saveDB(db); renderArchive(); }
function restoreDesignerAction(id) { db=loadDB(); restoreDesigner(db,id); saveDB(db); renderArchive(); }

let pendingDelete = null;
const passwordOverlay = document.getElementById('passwordOverlay');
function openPasswordModal(type,id,name) {
  pendingDelete = { type, id };
  document.getElementById('passwordWarning').textContent = type==='project'
    ? `Проект «${name}» и все его данные будут удалены без возможности восстановления.`
    : `Дизайнер «${name}» и все его проекты будут удалены навсегда.`;
  document.getElementById('confirmPassword').value = '';
  document.getElementById('passwordError').classList.remove('show');
  passwordOverlay.style.display = 'flex';
}
document.getElementById('cancelPasswordModal').onclick = () => { passwordOverlay.style.display='none'; pendingDelete=null; };
document.getElementById('confirmPasswordBtn').onclick = async () => {
  if (!pendingDelete) return;
  const password = document.getElementById('confirmPassword').value;
  db = loadDB();
  if (!verifyAdminPassword(db, session.id, password)) { document.getElementById('passwordError').classList.add('show'); return; }
  if (pendingDelete.type === 'project') {
    const p = db.projects.find(x=>x.id===pendingDelete.id);
    if (p?.driveFolderId && driveEnabled()) driveTrash(p.driveFolderId);
    deleteProjectPermanently(db, pendingDelete.id);
  } else {
    deleteDesignerPermanently(db, pendingDelete.id);
  }
  saveDB(db); passwordOverlay.style.display='none'; pendingDelete=null; renderArchive();
};

/* ── Редактировать проект ── */
const editProjectOverlay = document.getElementById('editProjectOverlay');
function openEditProject(id) {
  db = loadDB();
  const p = db.projects.find(x=>x.id===id);
  document.getElementById('epId').value     = p.id;
  document.getElementById('epTitle').value  = p.title;
  document.getElementById('epClient').value = p.client;
  document.getElementById('epDesc').value   = p.description||'';
  const epDes = document.getElementById('epDesigner');
  epDes.innerHTML = db.users.filter(u=>u.role==='designer'&&!u.archived).map(u=>`<option value="${u.id}" ${u.id===p.designerId?'selected':''}>${u.name}</option>`).join('');
  document.getElementById('epCoverFile').value = '';
  const prev = document.getElementById('epCoverPreview');
  if (p.coverImage) {
    prev.innerHTML = `<img src="${p.coverImage}" style="width:100%;height:100%;object-fit:cover;">`;
    prev._b64 = p.coverImage;
  } else { prev.innerHTML='📁'; prev._b64=null; }
  editProjectOverlay.style.display='flex';
}
async function previewEditCover(input) {
  if (!input.files || !input.files[0]) return;
  try {
    const compressed = await compressImage(input.files[0], 800, 500, 0.85);
    const prev = document.getElementById('epCoverPreview');
    prev.innerHTML = `<img src="${compressed}" style="width:100%;height:100%;object-fit:cover;">`;
    prev._b64 = compressed;
  } catch(e) { console.warn('cover compress error', e); }
}
document.getElementById('cancelEditProject').onclick = ()=>editProjectOverlay.style.display='none';
document.getElementById('saveEditProject').onclick = ()=>{
  const id       = document.getElementById('epId').value;
  const title    = document.getElementById('epTitle').value.trim();
  const client   = document.getElementById('epClient').value.trim();
  const desc     = document.getElementById('epDesc').value.trim();
  const designer = document.getElementById('epDesigner').value;
  const cover    = document.getElementById('epCoverPreview')._b64||null;
  if (!title||!client) { alert('Заполните название и заказчика'); return; }
  db = loadDB();
  const p = db.projects.find(x=>x.id===id);
  p.title=title; p.client=client; p.description=desc; p.designerId=designer;
  if (cover) p.coverImage=cover;
  p.updatedAt=new Date().toISOString().slice(0,10);
  saveDB(db);
  editProjectOverlay.style.display='none';
  renderProjects();
};

/* ── Обложка проекта ── */
async function previewCover(input) {
  if (!input.files || !input.files[0]) return;
  try {
    const compressed = await compressImage(input.files[0], 800, 500, 0.85);
    const prev = document.getElementById('pCoverPreview');
    prev.innerHTML = `<img src="${compressed}" style="width:100%;height:100%;object-fit:cover;">`;
    prev._b64 = compressed;
  } catch(e) { console.warn('cover compress error', e); }
}

renderProjects(); renderBell();
document.getElementById('searchInput').addEventListener('input', renderProjects);
if (location.hash === '#designers') showTab('designers');
if (location.hash === '#archive')   showTab('archive');
</script>
</body>
</html>