// phase6-pages.jsx — Решта модулів: Гант, Архів, Матеріали, Лікарняні, Аванси, Бонуси, Історія ЗП, АН, Акти, ТУ, ДСНС, КЕП

// ============ ГАНТ ============
function GanttPage({ tasks }) {
  const objects = window.DATA.OBJECTS;
  const stages = window.DATA.STAGES;

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Гант-діаграма</h1>
        <div className="page-sub">
          <span>часова шкала всіх об'єктів</span>
          <span className="dot"></span>
          <span>травень 2026 — грудень 2026</span>
        </div>
      </div>

      <div className="toolbar">
        <div className="filter-pill">
          <button className="filter-pill-item is-active">Місяць</button>
          <button className="filter-pill-item">Квартал</button>
          <button className="filter-pill-item">Рік</button>
        </div>
        <div style={{marginLeft: "auto", fontSize: 12, color: "var(--ink-3)"}}>
          сьогодні · 26 травня 2026
        </div>
      </div>

      <div className="gantt-container">
        <div className="gantt-head">
          <div className="gantt-head-obj">Об'єкт / етап</div>
          <div className="gantt-timeline">
            {["Тра", "Чер", "Лип", "Сер", "Вер", "Жов", "Лис", "Гру"].map((m, i) => (
              <div key={i} className={`gantt-month ${i === 0 ? "is-current" : ""}`}>{m}</div>
            ))}
          </div>
        </div>
        {objects.map(obj => {
          const objStages = stages.map(s => {
            const planned = obj.plan?.[s.id] || 0;
            const isCompleted = obj.completedStages?.includes(s.id);
            const isActive = obj.activeStage === s.id;
            return { stage: s, planned, isCompleted, isActive };
          }).filter(s => s.planned > 0 || s.isCompleted);
          return (
            <div key={obj.id} className="gantt-row">
              <div className="gantt-obj">
                <div className="td-mono" style={{fontSize: 10.5, color: "var(--ink-3)"}}>{obj.code}</div>
                <div className="cell-name">{obj.name}</div>
                <div className="cell-sub">до {obj.deadline}</div>
              </div>
              <div className="gantt-bars">
                {objStages.map((s, i) => {
                  const widthPct = 8 + Math.random() * 20;
                  const startPct = i === 0 ? 0 : objStages.slice(0, i).reduce((sum) => sum + 12, 0);
                  return (
                    <div
                      key={s.stage.id}
                      className={`gantt-bar ${s.isCompleted ? "is-completed" : s.isActive ? "is-active" : ""}`}
                      style={{left: startPct + "%", width: widthPct + "%"}}
                      title={`${s.stage.name} · ${s.planned} задач`}
                    >
                      <span>{s.stage.short}</span>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ============ АРХІВ ПРОЄКТІВ ============
function ArchivePage({ role }) {
  const archived = [
    { code: "УКП-2023-12", name: "ЖК «Дніпровські вежі»", grade: "СС2", client: "ТОВ «РіверБуд»", year: 2023, finalSum: 12400000, drive: true },
    { code: "УКП-2023-08", name: "Школа №201", grade: "СС2", client: "Управління освіти м. Києва", year: 2023, finalSum: 3800000, drive: true },
    { code: "УКП-2022-22", name: "Дитсадок «Веселка»", grade: "СС2", client: "Управління освіти", year: 2022, finalSum: 2900000, drive: true },
    { code: "УКП-2022-15", name: "Котедж в Лютежі", grade: "СС1", client: "Іванов В.І.", year: 2022, finalSum: 380000, drive: true },
    { code: "УКП-2022-05", name: "Реконструкція бібліотеки", grade: "СС2", client: "Мінкультури", year: 2022, finalSum: 1200000, drive: true },
    { code: "УКП-2021-18", name: "Складський комплекс «ЛогіКс»", grade: "СС2", client: "ТОВ «ЛогіКс»", year: 2021, finalSum: 4500000, drive: true },
  ];

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Архів проєктів</h1>
        <div className="page-sub">
          <span>{archived.length} завершених</span>
          <span className="dot"></span>
          <span>довідкова база</span>
          <span className="dot"></span>
          <span>усі матеріали в Drive</span>
        </div>
      </div>

      <div className="hint-box">
        <b>Як використовувати:</b> архів — це портфоліо для тендерів і референси для нових проєктів.
        Кожен проєкт містить всі креслення, експертизи, фотофіксацію в Drive. Можна копіювати рішення
        для подібних об'єктів.
      </div>

      <table className="data-table">
        <thead>
          <tr>
            <th>Шифр</th>
            <th>Назва</th>
            <th>Клас</th>
            <th>Замовник</th>
            <th>Рік</th>
            <th className="num-col">Підсумкова сума</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {archived.map(a => (
            <tr key={a.code} className="is-clickable">
              <td className="td-mono">{a.code}</td>
              <td><div className="cell-name">{a.name}</div></td>
              <td><span className="empl-chip empl-staff">{a.grade}</span></td>
              <td style={{fontSize: 12.5, color: "var(--ink-2)"}}>{a.client}</td>
              <td>{a.year}</td>
              <td className="num-col num-bold">{window.formatMoney(a.finalSum)} ₴</td>
              <td>
                <button className="btn btn-ghost" style={{padding: "4px 8px", fontSize: 12}}>Відкрити Drive ↗</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// ============ БАЗА МАТЕРІАЛІВ ============
function MaterialsPage({ role }) {
  const materials = [
    { name: "Бетон М300", unit: "м³", price: 4500, supplier: "ТОВ «Бетон+»", updated: "2026-05-20", group: "Бетон" },
    { name: "Бетон М400", unit: "м³", price: 5200, supplier: "ТОВ «Бетон+»", updated: "2026-05-20", group: "Бетон" },
    { name: "Арматура А500С Ø12", unit: "т", price: 38500, supplier: "Метінвест", updated: "2026-05-15", group: "Метал" },
    { name: "Арматура А500С Ø16", unit: "т", price: 36800, supplier: "Метінвест", updated: "2026-05-15", group: "Метал" },
    { name: "Цегла керамічна М150", unit: "тис.шт", price: 18500, supplier: "Слобожанська цегла", updated: "2026-05-10", group: "Стіни" },
    { name: "Газобетон D500", unit: "м³", price: 3200, supplier: "Стоунлайт", updated: "2026-05-12", group: "Стіни" },
    { name: "Утеплювач Penoplex 50мм", unit: "м³", price: 2800, supplier: "Епіцентр", updated: "2026-05-08", group: "Утеплення" },
    { name: "Мінвата Rockwool 100мм", unit: "м³", price: 3600, supplier: "Rockwool", updated: "2026-05-08", group: "Утеплення" },
    { name: "Покрівля метал.черепиця", unit: "м²", price: 480, supplier: "Прушинські", updated: "2026-05-05", group: "Покрівля" },
    { name: "Вікно металопластикове Rehau", unit: "м²", price: 4200, supplier: "Rehau", updated: "2026-05-18", group: "Вікна" },
  ];

  const totalGroups = [...new Set(materials.map(m => m.group))];

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">База матеріалів і цін</h1>
        <div className="page-sub">
          <span>{materials.length} позицій</span>
          <span className="dot"></span>
          <span>{totalGroups.length} груп</span>
          <span className="dot"></span>
          <span>ціни оновлено · {window.formatDate("2026-05-20")}</span>
        </div>
      </div>

      <div className="hint-box">
        <b>Для кошторисів:</b> регулярно оновлювана база цін постачальників для швидкого формування
        кошторисів і тендерних пропозицій. Можна імпортувати з Excel або синхронізувати з постачальниками.
      </div>

      <div className="toolbar">
        <div className="filter-pill">
          <button className="filter-pill-item is-active">Усі</button>
          {totalGroups.map(g => <button key={g} className="filter-pill-item">{g}</button>)}
        </div>
        <button className="btn btn-primary" style={{marginLeft: "auto"}}>
          <window.Icon.Plus /> Додати матеріал
        </button>
      </div>

      <table className="data-table">
        <thead>
          <tr>
            <th>Матеріал</th>
            <th>Група</th>
            <th>Одиниця</th>
            <th className="num-col">Ціна, ₴</th>
            <th>Постачальник</th>
            <th>Оновлено</th>
          </tr>
        </thead>
        <tbody>
          {materials.map((m, i) => (
            <tr key={i} className="is-clickable">
              <td><div className="cell-name">{m.name}</div></td>
              <td><span className="doc-type">{m.group}</span></td>
              <td>{m.unit}</td>
              <td className="num-col num-bold">{window.formatMoney(m.price)} ₴</td>
              <td style={{fontSize: 12.5, color: "var(--ink-2)"}}>{m.supplier}</td>
              <td className="td-mono" style={{fontSize: 12}}>{window.formatDate(m.updated)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// ============ АВАНСИ (ЗП) ============
function AdvancePayPage({ role }) {
  const team = window.DATA.TEAM;
  const today = new Date("2026-05-26");
  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Авансові виплати</h1>
        <div className="page-sub">
          <span>аванс на середину місяця · 15 числа</span>
          <span className="dot"></span>
          <span>40% від місячного окладу</span>
        </div>
      </div>

      <div className="kpi-row" style={{gridTemplateColumns: "repeat(3, 1fr)"}}>
        <div className="kpi"><div className="kpi-label">Найближчий аванс</div><div className="kpi-value">15.06</div><div className="kpi-sub">через 20 днів</div></div>
        <div className="kpi"><div className="kpi-label">Сума авансу</div><div className="kpi-value">{window.formatMoney(80000)} <span style={{fontSize: 14, color: "var(--ink-3)"}}>₴</span></div><div className="kpi-sub">40% × штатних</div></div>
        <div className="kpi"><div className="kpi-label">Останній аванс</div><div className="kpi-value">15.05</div><div className="kpi-sub">сплачено вчасно</div></div>
      </div>

      <table className="data-table">
        <thead>
          <tr><th></th><th>Працівник</th><th>Тип</th><th className="num-col">Оклад</th><th className="num-col">Аванс 40%</th><th>Дата виплати</th><th>Статус</th></tr>
        </thead>
        <tbody>
          {team.filter(p => p.employment !== "contractor").map(p => {
            const base = p.baseSalary * (p.partRate || 1);
            const adv = Math.round(base * 0.4);
            return (
              <tr key={p.id}>
                <td><div className="team-avatar" style={{width: 28, height: 28, fontSize: 10}}>{p.initials}</div></td>
                <td><div className="cell-name">{p.name}</div><div className="cell-sub">{p.role}</div></td>
                <td><span className="empl-chip empl-staff">{p.employment === "staff" ? "Штат" : "Часткова"}</span></td>
                <td className="num-col">{window.formatMoney(base)} ₴</td>
                <td className="num-col num-bold">{window.formatMoney(adv)} ₴</td>
                <td className="td-mono" style={{fontSize: 12}}>15.06.2026</td>
                <td><span className="status-tag tone-neutral">заплановано</span></td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

// ============ ЛІКАРНЯНІ ============
function SickPayPage({ role }) {
  const sicks = [
    { who: "tm", from: "2026-05-12", to: "2026-05-14", days: 3, status: "approved", certNumber: "АА-2837401", basis: "лікарняний лист", payable: 1850 },
    { who: "ok", from: "2026-02-08", to: "2026-02-12", days: 5, status: "approved", certNumber: "АА-2745192", basis: "лікарняний лист", payable: 4200, paidDate: "2026-02-20" },
    { who: "ap", from: "2025-11-20", to: "2025-11-24", days: 5, status: "approved", certNumber: "АА-2598437", basis: "лікарняний лист", payable: 2900, paidDate: "2025-12-05" },
  ];

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Лікарняні</h1>
        <div className="page-sub">
          <span>оплата перших 5 днів — компанія</span>
          <span className="dot"></span>
          <span>з 6-го дня — ФСС</span>
        </div>
      </div>

      <div className="hint-box">
        <b>Як рахується:</b> перші 5 днів оплачуються роботодавцем у розмірі 60-100% середньоденного заробітку
        (залежно від стажу). З 6-го дня — Фонд соціального страхування.
      </div>

      <table className="data-table">
        <thead>
          <tr><th></th><th>Працівник</th><th>Період</th><th>Днів</th><th>№ листка</th><th className="num-col">До виплати</th><th>Статус</th></tr>
        </thead>
        <tbody>
          {sicks.map((s, i) => {
            const p = window.getTeam(s.who);
            return (
              <tr key={i}>
                <td><div className="team-avatar" style={{width: 28, height: 28, fontSize: 10}}>{p?.initials}</div></td>
                <td><div className="cell-name">{p?.name}</div></td>
                <td>{window.formatDate(s.from)} – {window.formatDate(s.to)}</td>
                <td><b>{s.days}</b></td>
                <td className="td-mono" style={{fontSize: 11.5}}>{s.certNumber}</td>
                <td className="num-col num-bold">{window.formatMoney(s.payable)} ₴</td>
                <td>{s.paidDate
                  ? <span className="status-tag tone-live">сплачено</span>
                  : <span className="status-tag tone-neutral">до виплати</span>
                }</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

// ============ 13-ТА І РІЧНІ ============
function BonusPayPage({ role }) {
  const team = window.DATA.TEAM;

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">13-та зарплата і річні бонуси</h1>
        <div className="page-sub">
          <span>фінансові пакети наприкінці року</span>
          <span className="dot"></span>
          <span>правила задає директор · KPI-залежні</span>
        </div>
      </div>

      <div className="kpi-row" style={{gridTemplateColumns: "repeat(3, 1fr)"}}>
        <div className="kpi">
          <div className="kpi-label">Бонусний пул 2026</div>
          <div className="kpi-value">{window.formatMoney(420000)} <span style={{fontSize: 14, color: "var(--ink-3)"}}>₴</span></div>
          <div className="kpi-sub">~15% від чистого прибутку</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Дата виплати</div>
          <div className="kpi-value">20.12</div>
          <div className="kpi-sub">перед Новим роком</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Учасників</div>
          <div className="kpi-value">{team.filter(p => p.employment !== "contractor").length}</div>
          <div className="kpi-sub">штат і часткові</div>
        </div>
      </div>

      <table className="data-table">
        <thead>
          <tr><th></th><th>Працівник</th><th>Базовий оклад</th><th>KPI коефіцієнт</th><th>13-та</th><th className="num-col">Річний бонус</th><th>Разом</th></tr>
        </thead>
        <tbody>
          {team.filter(p => p.employment !== "contractor").map(p => {
            const base = p.baseSalary * (p.partRate || 1);
            const kpi = 0.85 + Math.random() * 0.3;
            const thirteenth = Math.round(base);
            const bonus = Math.round(base * kpi);
            return (
              <tr key={p.id}>
                <td><div className="team-avatar" style={{width: 28, height: 28, fontSize: 10}}>{p.initials}</div></td>
                <td><div className="cell-name">{p.name}</div></td>
                <td className="num-col">{window.formatMoney(base)} ₴</td>
                <td><b>×{kpi.toFixed(2)}</b></td>
                <td className="num-col">{window.formatMoney(thirteenth)} ₴</td>
                <td className="num-col num-bold">{window.formatMoney(bonus)} ₴</td>
                <td className="num-col num-bold" style={{color: "var(--c-green-deep)"}}>{window.formatMoney(thirteenth + bonus)} ₴</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

// ============ ІСТОРІЯ ВИПЛАТ ============
function SalaryHistoryPage({ role }) {
  const team = window.DATA.TEAM;
  const months = ["Грудень 2025", "Січень 2026", "Лютий 2026", "Березень 2026", "Квітень 2026"];

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Історія виплат</h1>
        <div className="page-sub">
          <span>усі ЗП-виплати по людях</span>
          <span className="dot"></span>
          <span>зберігається назавжди</span>
        </div>
      </div>

      <div className="toolbar">
        <select className="select-pill">
          <option>Уся команда</option>
          {team.map(p => <option key={p.id}>{p.name}</option>)}
        </select>
        <select className="select-pill">
          <option>2026 рік</option><option>2025 рік</option>
        </select>
        <button className="btn" style={{marginLeft: "auto"}}>Експорт Excel</button>
      </div>

      <table className="data-table">
        <thead>
          <tr>
            <th>Працівник</th>
            {months.map(m => <th key={m} className="num-col">{m}</th>)}
            <th className="num-col">Усього</th>
          </tr>
        </thead>
        <tbody>
          {team.map(p => {
            const monthly = p.baseSalary * (p.partRate || 1);
            const total = monthly * 5;
            return (
              <tr key={p.id}>
                <td>
                  <div style={{display: "flex", alignItems: "center", gap: 10}}>
                    <div className="team-avatar" style={{width: 28, height: 28, fontSize: 10}}>{p.initials}</div>
                    <div className="cell-name">{p.name}</div>
                  </div>
                </td>
                {months.map(m => <td key={m} className="num-col">{window.formatMoney(Math.round(monthly * (0.95 + Math.random() * 0.1)))}</td>)}
                <td className="num-col num-bold">{window.formatMoney(total)} ₴</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

// ============ ЖУРНАЛ АВТ. НАГЛЯДУ ============
function SupervisionJournalPage({ role }) {
  const entries = [
    { date: "2026-05-26", obj: "ukp-89", who: "ok", title: "Перевірка вузлів примикання покрівлі", photos: 8, remarks: 2 },
    { date: "2026-04-15", obj: "ukp-89", who: "ok", title: "Контроль монтажу вентиляції", photos: 12, remarks: 0 },
    { date: "2026-03-22", obj: "ukp-89", who: "ap", title: "Зварювальні роботи каркасу", photos: 15, remarks: 1 },
    { date: "2026-02-10", obj: "ukp-89", who: "ok", title: "Бетонування плит перекриття", photos: 22, remarks: 0 },
    { date: "2026-01-18", obj: "ukp-89", who: "ap", title: "Армування фундаментів", photos: 18, remarks: 3 },
  ];

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Журнал авторського нагляду</h1>
        <div className="page-sub">
          <span>записи виїздів</span>
          <span className="dot"></span>
          <span>з фотофіксацією і зауваженнями</span>
        </div>
      </div>

      <div className="hint-box">
        <b>Як працює:</b> кожен виїзд на майданчик автоматично створює запис з фото з телефону,
        текстовими нотатками і списком зауважень. Юридично значимо — підписується КЕП.
      </div>

      <div className="lead-stack">
        {entries.map((e, i) => {
          const obj = window.getObject(e.obj);
          const p = window.getTeam(e.who);
          return (
            <div key={i} className="lead-card">
              <div className="lead-card-head">
                <div className="lead-card-stage">
                  <span className="td-mono" style={{fontSize: 12, color: "var(--ink-3)"}}>{obj?.code}</span>
                  <span className="empl-chip empl-staff">АН</span>
                </div>
                <div className="td-mono" style={{fontSize: 13, color: "var(--ink-2)"}}>{window.formatDate(e.date)}</div>
              </div>
              <div className="lead-card-name">{e.title}</div>
              <div className="lead-card-meta">
                <span>{obj?.name}</span>
                <span className="dot"></span>
                <span>{p?.name}</span>
              </div>
              <div className="lead-card-foot">
                <div><div className="lead-value-label">фото</div><div className="lead-value-num" style={{display: "inline-flex", alignItems: "center", gap: 4}}><window.Ico name="camera" size={14} /> {e.photos}</div></div>
                <div><div className="lead-action-label">зауваження</div><div className="lead-action-text" style={{color: e.remarks > 0 ? "var(--late)" : "var(--c-green-deep)", fontSize: 14, fontWeight: 600}}>{e.remarks > 0 ? `${e.remarks}` : "немає"}</div></div>
                <button className="btn btn-ghost">Відкрити</button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ============ АКТИ ВИКОНАНИХ РОБІТ ============
function CompletionActsPage({ role }) {
  const [printAct, setPrintAct] = React.useState(null);
  const acts = [
    { num: "47-АКТ-03", date: "2026-05-22", obj: "ukp-47", stage: "Здача робочого проєкту, етап 1", amount: 1260000, status: "signed", signedDate: "2026-05-24" },
    { num: "32-АКТ-01", date: "2025-11-15", obj: "ukp-32", stage: "Аванс після тендеру", amount: 930000, status: "signed", signedDate: "2025-11-18" },
    { num: "51-АКТ-02", date: "2026-04-18", obj: "ukp-51", stage: "Ескізний проєкт", amount: 425000, status: "signed", signedDate: "2026-04-20" },
    { num: "47-АКТ-04", date: "2026-05-25", obj: "ukp-47", stage: "Здача КЖ", amount: 840000, status: "draft" },
    { num: "89-АКТ-04", date: "2026-05-26", obj: "ukp-89", stage: "Авт. нагляд (травень)", amount: 40000, status: "pending" },
  ];

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Акти виконаних робіт</h1>
        <div className="page-sub">
          <span>{acts.length} актів</span>
          <span className="dot"></span>
          <span>{acts.filter(a => a.status === "signed").length} підписано</span>
          <span className="dot"></span>
          <span>{acts.filter(a => a.status === "pending" || a.status === "draft").length} в процесі</span>
        </div>
      </div>

      <table className="data-table">
        <thead>
          <tr><th>№ акта</th><th>Об'єкт</th><th>Етап / робота</th><th>Дата</th><th className="num-col">Сума</th><th>Статус</th><th></th></tr>
        </thead>
        <tbody>
          {acts.map(a => {
            const obj = window.getObject(a.obj);
            const tone = a.status === "signed" ? "live" : a.status === "pending" ? "warn" : "neutral";
            const label = a.status === "signed" ? "Підписано" : a.status === "pending" ? "Очікує підпису" : "Чернетка";
            return (
              <tr key={a.num} className="is-clickable">
                <td className="td-mono">{a.num}</td>
                <td><div className="cell-name">{obj?.name}</div><div className="cell-sub td-mono" style={{fontSize: 11}}>{obj?.code}</div></td>
                <td style={{fontSize: 12.5}}>{a.stage}</td>
                <td className="td-mono" style={{fontSize: 12}}>{window.formatDate(a.date)}</td>
                <td className="num-col num-bold">{window.formatMoney(a.amount)} ₴</td>
                <td>
                  <span className={`status-tag tone-${tone}`}>{label}</span>
                  {a.signedDate && <div style={{fontSize: 11, color: "var(--c-green-deep)", marginTop: 4}}>{window.formatDate(a.signedDate)}</div>}
                </td>
                <td>
                  <div style={{display: "flex", gap: 6, justifyContent: "flex-end"}}>
                    <button className="btn btn-ghost" style={{padding: "4px 8px", fontSize: 12, whiteSpace: "nowrap"}} onClick={(e) => { e.stopPropagation(); setPrintAct(a); }}>
                      <window.InvPrintIcon /> Друк
                    </button>
                    <button className="btn btn-ghost" style={{padding: "4px 8px", fontSize: 12}}>Drive ↗</button>
                  </div>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>

      {printAct && <window.ActPrintDoc act={printAct} onClose={() => setPrintAct(null)} />}
    </div>
  );
}

// ============ ТЕХНІЧНІ УМОВИ ============
function TuPage({ role }) {
  const tu = [];  // демо-приклади прибрано — реальні ТУ заводитимуться пізніше

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Технічні умови (ТУ)</h1>
        <div className="page-sub">
          <span>{tu.length} запитів</span>
          <span className="dot"></span>
          <span>{tu.filter(t => t.status === "received").length} отримано</span>
          <span className="dot"></span>
          <span>{tu.filter(t => t.status === "pending" || t.status === "in_progress").length} в процесі</span>
        </div>
      </div>

      <table className="data-table">
        <thead>
          <tr><th>Тип ТУ</th><th>Об'єкт</th><th>Орган</th><th>Дата запиту</th><th>Дата отримання</th><th>Статус</th></tr>
        </thead>
        <tbody>
          {tu.map((t, i) => {
            const obj = window.getObject(t.obj);
            const tone = t.status === "received" ? "live" : t.status === "pending" ? "warn" : "neutral";
            const label = t.status === "received" ? "Отримано" : t.status === "pending" ? "Простій" : "В процесі";
            return (
              <tr key={i} className="is-clickable">
                <td><div className="cell-name">{t.type}</div>{t.number && <div className="cell-sub td-mono">{t.number}</div>}</td>
                <td><div className="td-mono" style={{fontSize: 11.5, color: "var(--ink-3)"}}>{obj?.code}</div><div className="cell-name" style={{fontSize: 13}}>{obj?.name}</div></td>
                <td style={{fontSize: 12.5}}>{t.organization}</td>
                <td className="td-mono" style={{fontSize: 12}}>{window.formatDate(t.requestDate)}</td>
                <td className="td-mono" style={{fontSize: 12, color: t.receivedDate ? "var(--c-green-deep)" : "var(--ink-4)"}}>{t.receivedDate ? window.formatDate(t.receivedDate) : "—"}</td>
                <td><span className={`status-tag tone-${tone}`}>{label}</span>{t.note && <div style={{fontSize: 11, color: "var(--ink-3)", marginTop: 4}}>{t.note}</div>}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

// ============ ДСНС / УЗГОДЖЕННЯ ============
function DsnsPage({ role }) {
  const approvals = [];  // демо-приклади прибрано — реальні узгодження заводитимуться пізніше

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Узгодження з органами</h1>
        <div className="page-sub">
          <span>ДСНС · СЕС · архітектура · сільради</span>
          <span className="dot"></span>
          <span>{approvals.filter(a => a.status === "approved").length} погоджено · {approvals.filter(a => a.status !== "approved").length} в процесі</span>
        </div>
      </div>

      <table className="data-table">
        <thead>
          <tr><th>Об'єкт</th><th>Орган</th><th>Подано</th><th>Відповідь</th><th>Статус</th><th></th></tr>
        </thead>
        <tbody>
          {approvals.map((a, i) => {
            const obj = window.getObject(a.obj);
            const tone = a.status === "approved" ? "live" : a.status === "pending" ? "warn" : "neutral";
            const label = a.status === "approved" ? "Узгоджено" : a.status === "pending" ? "Простій" : "В процесі";
            return (
              <tr key={i} className="is-clickable">
                <td><div className="cell-name">{obj?.name}</div><div className="cell-sub td-mono" style={{fontSize: 11}}>{obj?.code}</div></td>
                <td><div style={{fontSize: 13}}>{a.body}</div>{a.number && <div className="cell-sub td-mono">{a.number}</div>}</td>
                <td className="td-mono" style={{fontSize: 12}}>{window.formatDate(a.submittedDate)}</td>
                <td className="td-mono" style={{fontSize: 12, color: a.responseDate ? "var(--c-green-deep)" : "var(--ink-4)"}}>{a.responseDate ? window.formatDate(a.responseDate) : "—"}</td>
                <td><span className={`status-tag tone-${tone}`}>{label}</span>{a.note && <div style={{fontSize: 11, color: "var(--ink-3)", marginTop: 4}}>{a.note}</div>}</td>
                <td><button className="btn btn-ghost" style={{padding: "4px 8px", fontSize: 12}}>Drive ↗</button></td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

// ============ КЕП-СЕРТИФІКАТИ ============
function KepPage({ role }) {
  const certs = window.DATA.TEAM
    .filter(p => p.kep)
    .map(p => ({ person: p, ...p.kep, st: window.kepStatus(p.kep.validUntil) }))
    .sort((a, b) => a.validUntil.localeCompare(b.validUntil));

  const active   = certs.filter(c => c.st.state === "active").length;
  const expiring = certs.filter(c => c.st.state === "expiring").length;
  const expired  = certs.filter(c => c.st.state === "expired").length;

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">КЕП-сертифікати команди</h1>
        <div className="page-sub">
          <span>{active} активних</span>
          {expiring > 0 && <><span className="dot"></span><span style={{color: "var(--late)"}}>{expiring} завершуються</span></>}
          {expired > 0 && <><span className="dot"></span><span style={{color: "var(--late)"}}>{expired} прострочено</span></>}
        </div>
      </div>

      <div className="hint-box">
        <b>Чому критично:</b> КЕП потрібен для підписання проєктної документації, договорів,
        подачі в ЄДЕССБ. Прострочений КЕП = неможливість працювати. Сповіщення за 30 днів до завершення.
        Дані синхронізовані з профілями у розділі «Команда».
      </div>

      <table className="data-table">
        <thead>
          <tr><th></th><th>Фахівець</th><th>Тип КЕП</th><th>Провайдер</th><th>Дійсний до</th><th>Залишок</th><th>Статус</th><th></th></tr>
        </thead>
        <tbody>
          {certs.map((c, i) => {
            const p = c.person;
            const danger = c.st.state !== "active";
            return (
              <tr key={i} className="is-clickable">
                <td><div className="team-avatar" style={{width: 28, height: 28, fontSize: 10}}>{p?.initials}</div></td>
                <td><div className="cell-name">{p?.name}</div><div className="cell-sub">{p?.role}</div></td>
                <td style={{fontSize: 13}}>{c.type}</td>
                <td style={{fontSize: 12.5, color: "var(--ink-2)"}}>{c.provider}</td>
                <td className="td-mono" style={{fontSize: 12, color: danger ? "var(--late)" : "var(--ink)"}}>{window.formatDate(c.validUntil)}</td>
                <td style={{fontSize: 12.5, color: danger ? "var(--late)" : "var(--ink-3)", fontWeight: danger ? 600 : 400}}>
                  {c.st.state === "expired" ? `прострочено ${Math.abs(c.st.days)} дн.` : `${c.st.days} дн.`}
                </td>
                <td><span className={`status-tag tone-${c.st.tone}`}>{c.st.label}</span></td>
                <td><button className="btn btn-ghost" style={{padding: "4px 8px", fontSize: 12}}>{danger ? "Оновити" : "Drive ↗"}</button></td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

window.GanttPage = GanttPage;
window.ArchivePage = ArchivePage;
window.MaterialsPage = MaterialsPage;
window.AdvancePayPage = AdvancePayPage;
window.SickPayPage = SickPayPage;
window.BonusPayPage = BonusPayPage;
window.SalaryHistoryPage = SalaryHistoryPage;
window.SupervisionJournalPage = SupervisionJournalPage;
window.CompletionActsPage = CompletionActsPage;
window.TuPage = TuPage;
window.DsnsPage = DsnsPage;
window.KepPage = KepPage;