// salary-pages.jsx — Зарплата: Розрахунок · Реєстр виплат · Аналітика

// ============ РОЗРАХУНОК ============
function PayrollPage({ role }) {
  const team = window.DATA.TEAM;
  const period = window.PAYROLL_PERIOD;
  window.useTabel(); // ререндер при зміні табеля
  const tabelSt = window.tabelStatus(period.id);
  const [editingId, setEditingId] = React.useState(null);
  const canEdit = role === "director" || role === "accountant";

  const rows = team.map(p => {
    const hours = period.hoursByPerson[p.id] || 0;
    const plan = window.tabelNorm(period.id, p.id) || period.workhours;
    const pay = window.computePayroll(p.id, hours, plan);
    return { person: p, hours, pay };
  });

  const totalGross = rows.reduce((s, r) => s + (r.pay?.gross || 0), 0);
  const totalNet   = rows.reduce((s, r) => s + (r.pay?.net   || 0), 0);
  const totalTax   = rows.reduce((s, r) => s + (r.pay?.pdfo + r.pay?.vz || 0), 0);
  const totalCash  = rows.reduce((s, r) => s + (r.person.cashSalary || 0), 0);
  const showCash   = window.useCashVisible() && window.canSeeCash(role);

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Розрахунок ЗП</h1>
        <div className="page-sub">
          <span>{period.label}</span>
          <span className="dot"></span>
          <span>{period.workdays} робочих днів · {period.workhours} год</span>
          <span className="dot"></span>
          {period.status === "closed"
            ? <span style={{color: "var(--c-green-deep)"}}><b>Закрито</b> {window.formatDate(period.closedAt)}</span>
            : <span style={{color: "var(--ink-2)"}}>Період відкритий</span>
          }
        </div>
      </div>

      <div className="hint-box" style={{marginBottom: 18, display: "flex", alignItems: "center", gap: 14}}>
        <span style={{flex: 1}}>
          {tabelSt === "closed"
            ? <><b>Години взято із закритого табеля за {period.label}.</b> Оклад штатних скориговано пропорційно нормі; лікарняні та відпустки — окремо.</>
            : <><b>Години — з табеля за {period.label}.</b> Табель ще не закрито — суми попередні й оновляться після закриття місяця.</>}
        </span>
        {window.__setPage && <button className="btn btn-sm" onClick={() => window.__setPage("time")}>Відкрити табель</button>}
      </div>

      {/* Підсумок */}
      <div className="kpi-row" style={{gridTemplateColumns: "repeat(4, 1fr)"}}>
        <div className="kpi">
          <div className="kpi-label">До нарахування (gross)</div>
          <div className="kpi-value">{window.formatMoney(totalGross)} <span style={{fontSize: 16, color: "var(--ink-3)"}}>₴</span></div>
          <div className="kpi-sub">за весь період</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">До виплати (net)</div>
          <div className="kpi-value" style={{color: "var(--c-green-deep)"}}>{window.formatMoney(totalNet)} <span style={{fontSize: 16, color: "var(--ink-3)"}}>₴</span></div>
          <div className="kpi-sub">після утримань</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Податки і збори</div>
          <div className="kpi-value">{window.formatMoney(totalTax)} <span style={{fontSize: 16, color: "var(--ink-3)"}}>₴</span></div>
          <div className="kpi-sub">ПДФО 18% + ВЗ 5%</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Працівників</div>
          <div className="kpi-value">{team.length}</div>
          <div className="kpi-sub">{team.filter(t => t.employment === "staff").length} штат · {team.filter(t => t.employment === "contractor").length} ЦПХ</div>
        </div>
      </div>

      <div className="toolbar" style={{marginTop: 20}}>
        {showCash && <span style={{fontSize: 12.5, color: "var(--ink-2)"}}>Готівкою за період: <b style={{color: "var(--ink)"}}>{window.formatMoney(totalCash)} ₴</b> · до видачі разом <b style={{color: "var(--c-green-deep)"}}>{window.formatMoney(totalNet + totalCash)} ₴</b></span>}
        <div style={{marginLeft: "auto"}}><window.CashToggle role={role} /></div>
      </div>

      <table className="data-table payroll-table">
        <thead>
          <tr>
            <th></th>
            <th>Працівник</th>
            <th>Модель</th>
            <th className="num-col">Год</th>
            <th className="num-col">Оклад</th>
            <th className="num-col">Бонус</th>
            <th className="num-col">ЄДЕССБ</th>
            <th className="num-col">До нарах.</th>
            <th className="num-col">ПДФО</th>
            <th className="num-col">ВЗ</th>
            <th className="num-col">Офіційно</th>
            {showCash && <th className="num-col cash-col">Готівкою</th>}
            {showCash && <th className="num-col cash-col">До видачі</th>}
            <th style={{width: 90}}></th>
          </tr>
        </thead>
        <tbody>
          {rows.map(({ person, hours, pay }) => {
            const empl = window.EMPLOYMENT_LABELS[person.employment];
            return (
              <tr key={person.id}>
                <td><div className="team-avatar" style={{width: 28, height: 28, fontSize: 10}}>{person.initials}</div></td>
                <td>
                  <div className="cell-name">{person.name}</div>
                  <div className="cell-sub">{person.role} · <span className={`empl-chip empl-${person.employment}`} style={{padding: "1px 6px", fontSize: 9.5}}>{empl?.short}</span></div>
                </td>
                <td>
                  <span style={{fontSize: 11.5, color: "var(--ink-3)"}}>{window.SALARY_MODEL_LABELS[person.salaryModel]}</span>
                </td>
                <td className="num-col">{hours}</td>
                <td className="num-col">{window.formatMoney(pay.base)}</td>
                <td className="num-col">{pay.bonus > 0 ? window.formatMoney(pay.bonus) : <span style={{color: "var(--ink-4)"}}>—</span>}</td>
                <td className="num-col">{pay.edessb > 0 ? <span title={`${person.edessbRegistrar.hours} год × ${person.edessbRegistrar.rate} ₴`}>{window.formatMoney(pay.edessb)}</span> : <span style={{color: "var(--ink-4)"}}>—</span>}</td>
                <td className="num-col num-bold">{window.formatMoney(pay.gross)}</td>
                <td className="num-col" style={{color: "var(--ink-3)"}}>{pay.pdfo > 0 ? window.formatMoney(pay.pdfo) : "—"}</td>
                <td className="num-col" style={{color: "var(--ink-3)"}}>{pay.vz > 0 ? window.formatMoney(pay.vz) : "—"}</td>
                <td className="num-col num-bold" style={{color: "var(--c-green-deep)"}}>{window.formatMoney(pay.net)} ₴</td>
                {showCash && <td className="num-col cash-col">{person.cashSalary > 0 ? window.formatMoney(person.cashSalary) : <span style={{color: "var(--ink-4)"}}>—</span>}</td>}
                {showCash && <td className="num-col cash-col num-bold">{window.formatMoney(pay.net + (person.cashSalary || 0))} ₴</td>}
                <td>
                  <button className="btn btn-ghost" style={{padding: "4px 8px", fontSize: 12}} onClick={() => setEditingId(person.id)}>Деталі</button>
                </td>
              </tr>
            );
          })}
        </tbody>
        <tfoot>
          <tr>
            <td colSpan={6}><b>Усього</b></td>
            <td className="num-col" style={{color: "var(--ink-3)"}}>{window.formatMoney(rows.reduce((s,r) => s + (r.pay.edessb||0), 0))}</td>
            <td className="num-col num-bold">{window.formatMoney(totalGross)}</td>
            <td className="num-col" style={{color: "var(--ink-3)"}}>{window.formatMoney(rows.reduce((s,r) => s + r.pay.pdfo, 0))}</td>
            <td className="num-col" style={{color: "var(--ink-3)"}}>{window.formatMoney(rows.reduce((s,r) => s + r.pay.vz, 0))}</td>
            <td className="num-col num-bold" style={{color: "var(--c-green-deep)"}}>{window.formatMoney(totalNet)} ₴</td>
            {showCash && <td className="num-col cash-col num-bold">{window.formatMoney(totalCash)} ₴</td>}
            {showCash && <td className="num-col cash-col num-bold">{window.formatMoney(totalNet + totalCash)} ₴</td>}
            <td></td>
          </tr>
        </tfoot>
      </table>

      <div style={{marginTop: 24, display: "flex", gap: 12, alignItems: "center"}}>
        <button className="btn btn-primary" disabled={!canEdit}>
          Сформувати реєстр виплат
        </button>
        <button className="btn" disabled={!canEdit}>Експорт в Excel</button>
        <span style={{marginLeft: "auto", fontSize: 12, color: "var(--ink-3)"}}>
          Бонуси розраховуються за правилами KPI · правила задаються РМ
        </span>
      </div>

      {editingId && <PayrollDetail person={team.find(t => t.id === editingId)} hours={period.hoursByPerson[editingId] || 0} period={period} onClose={() => setEditingId(null)} />}
    </div>
  );
}

function PayrollDetail({ person, hours, period, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  const plan = window.tabelNorm(period.id, person.id) || period.workhours;
  const pay = window.computePayroll(person.id, hours, plan);
  const empl = window.EMPLOYMENT_LABELS[person.employment];

  return (
    <>
      <div className="drawer-overlay" onClick={onClose}></div>
      <aside className="drawer">
        <div className="drawer-head">
          <button className="drawer-close" onClick={onClose}><window.Icon.X /></button>
          <span style={{fontSize: 12, color: "var(--ink-3)"}}>Розрахунок · {period.label}</span>
        </div>
        <div className="drawer-body">
          <div style={{display: "flex", gap: 14, alignItems: "center", marginBottom: 20}}>
            <div className="team-avatar" style={{width: 48, height: 48, fontSize: 17}}>{person.initials}</div>
            <div>
              <h1 className="drawer-h1" style={{marginBottom: 4}}>{person.name}</h1>
              <div style={{fontSize: 13, color: "var(--ink-3)"}}>{person.role} · <span className={`empl-chip empl-${person.employment}`}>{empl?.label}</span></div>
            </div>
          </div>

          <div className="payroll-breakdown">
            <div className="pb-row">
              <span className="pb-label">Базовий оклад</span>
              <span className="pb-val">{window.formatMoney(person.baseSalary || person.taskRate)} ₴ {person.salaryModel === "task_rate" ? "/ год" : "/ міс"}</span>
            </div>
            {person.partRate && (
              <div className="pb-row">
                <span className="pb-label">Частка ставки</span>
                <span className="pb-val">× {person.partRate}</span>
              </div>
            )}
            <div className="pb-row">
              <span className="pb-label">Відпрацьовано</span>
              <span className="pb-val">{hours} год з {plan}</span>
            </div>
            {pay.notes.map((n, i) => (
              <div key={i} className="pb-row pb-note">
                <span></span>
                <span className="pb-val" style={{fontSize: 11.5, color: "var(--ink-3)"}}>{n}</span>
              </div>
            ))}
            <div className="pb-row pb-sub">
              <span className="pb-label">Нарахування</span>
              <span className="pb-val num-bold">{window.formatMoney(pay.base)} ₴</span>
            </div>
            {pay.bonus > 0 && (
              <div className="pb-row pb-sub">
                <span className="pb-label">Бонус ({(person.bonusRate*100).toFixed(1)}%)</span>
                <span className="pb-val num-bold" style={{color: "var(--c-green-deep)"}}>+ {window.formatMoney(pay.bonus)} ₴</span>
              </div>
            )}
            {pay.edessb > 0 && (
              <div className="pb-row pb-sub">
                <span className="pb-label">Реєстратор ЄДЕССБ ({person.edessbRegistrar.hours} год × {person.edessbRegistrar.rate} ₴)</span>
                <span className="pb-val num-bold" style={{color: "var(--c-green-deep)"}}>+ {window.formatMoney(pay.edessb)} ₴</span>
              </div>
            )}
            <div className="pb-row pb-sum">
              <span className="pb-label">До нарахування (gross)</span>
              <span className="pb-val num-bold">{window.formatMoney(pay.gross)} ₴</span>
            </div>
            {pay.pdfo > 0 && (
              <div className="pb-row pb-deduct">
                <span className="pb-label">ПДФО 18%</span>
                <span className="pb-val" style={{color: "var(--ink-3)"}}>− {window.formatMoney(pay.pdfo)} ₴</span>
              </div>
            )}
            {pay.vz > 0 && (
              <div className="pb-row pb-deduct">
                <span className="pb-label">Військовий збір 5%</span>
                <span className="pb-val" style={{color: "var(--ink-3)"}}>− {window.formatMoney(pay.vz)} ₴</span>
              </div>
            )}
            <div className="pb-row pb-final">
              <span className="pb-label">До виплати (net)</span>
              <span className="pb-val">{window.formatMoney(pay.net)} ₴</span>
            </div>
          </div>

          <div className="drawer-section" style={{marginTop: 24}}>
            <div className="drawer-section-h">Реквізити</div>
            <dl className="info-grid">
              <div><dt>IBAN</dt><dd className="td-mono" style={{fontSize: 11}}>{person.iban}</dd></div>
              <div><dt>Тип виплати</dt><dd>{person.employment === "contractor" ? "Гонорар ЦПХ" : "ЗП"}</dd></div>
            </dl>
          </div>
        </div>
        <div className="drawer-foot">
          <button className="btn btn-primary">Затвердити</button>
          <button className="btn">Перерахувати</button>
        </div>
      </aside>
    </>
  );
}

// ============ РЕЄСТР ВИПЛАТ ============
function RegistryPage({ role }) {
  const team = window.DATA.TEAM;
  const period = window.PAYROLL_PERIOD;
  window.useTabel();
  const rows = team.map(p => {
    const hours = period.hoursByPerson[p.id] || 0;
    const plan = window.tabelNorm(period.id, p.id) || period.workhours;
    const pay = window.computePayroll(p.id, hours, plan);
    return { person: p, pay, status: "ready" };
  });
  const total = rows.reduce((s, r) => s + r.pay.net, 0);
  const showCash = window.useCashVisible() && window.canSeeCash(role);
  const cashRows = team.filter(p => p.cashSalary > 0);
  const totalCash = cashRows.reduce((s, p) => s + p.cashSalary, 0);

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Реєстр виплат</h1>
        <div className="page-sub">
          <span>{period.label}</span>
          <span className="dot"></span>
          <span>сформовано {window.formatDate("2026-05-05")}</span>
          <span className="dot"></span>
          <span style={{color: "var(--c-green-deep)"}}><b>Готово до банку</b></span>
        </div>
      </div>

      <div className="registry-summary">
        <div>
          <div className="kpi-label">Сума на картки (офіційно, через банк)</div>
          <div style={{fontSize: 32, fontWeight: 600, color: "var(--c-green-deep)", marginTop: 4, fontVariantNumeric: "tabular-nums"}}>
            {window.formatMoney(total)} ₴
          </div>
          <div className="kpi-sub" style={{marginTop: 4}}>{rows.length} платежів{showCash && totalCash > 0 ? <> · готівкою ще <b style={{color: "var(--ink)"}}>{window.formatMoney(totalCash)} ₴</b></> : ""}</div>
        </div>
        <div style={{display: "flex", gap: 10, marginLeft: "auto", alignItems: "center"}}>
          <window.CashToggle role={role} />
          <button className="btn">Експорт XML для Приват24</button>
          <button className="btn">Експорт CSV</button>
          <button className="btn btn-primary">Відправити в банк</button>
        </div>
      </div>

      <table className="data-table">
        <thead>
          <tr>
            <th>№</th>
            <th>Одержувач</th>
            <th>IBAN</th>
            <th>Призначення</th>
            <th className="num-col">Сума</th>
            <th>Статус</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={r.person.id}>
              <td style={{color: "var(--ink-3)", fontFamily: "var(--font-mono)"}}>{String(i+1).padStart(2,"0")}</td>
              <td>
                <div className="cell-name">{r.person.name}</div>
                <div className="cell-sub">{r.person.role}</div>
              </td>
              <td className="td-mono" style={{fontSize: 11}}>{r.person.iban}</td>
              <td style={{fontSize: 12.5, color: "var(--ink-2)"}}>
                {r.person.employment === "contractor"
                  ? `Гонорар за роботу, ${period.label}, ЦПХ`
                  : `Заробітна плата за ${period.label}`}
              </td>
              <td className="num-col num-bold">{window.formatMoney(r.pay.net)} ₴</td>
              <td><span className="status-tag tone-live">готово</span></td>
            </tr>
          ))}
        </tbody>
        <tfoot>
          <tr>
            <td colSpan={4}><b>Усього {rows.length} платежів</b></td>
            <td className="num-col num-bold" style={{fontSize: 16, color: "var(--c-green-deep)"}}>{window.formatMoney(total)} ₴</td>
            <td></td>
          </tr>
        </tfoot>
      </table>

      {showCash && cashRows.length > 0 && (
        <section className="section" style={{marginTop: 32}}>
          <div className="section-head">
            <h2 className="section-h2">Готівкою · в конверті</h2>
            <span className="section-sub">поза банківським реєстром · конфіденційно</span>
          </div>
          <table className="data-table cash-table">
            <thead>
              <tr>
                <th>№</th>
                <th>Одержувач</th>
                <th>Призначення</th>
                <th className="num-col">Сума</th>
                <th>Спосіб</th>
              </tr>
            </thead>
            <tbody>
              {cashRows.map((p, i) => (
                <tr key={p.id}>
                  <td style={{color: "var(--ink-3)", fontFamily: "var(--font-mono)"}}>{String(i+1).padStart(2,"0")}</td>
                  <td><div className="cell-name">{p.name}</div><div className="cell-sub">{p.role}</div></td>
                  <td style={{fontSize: 12.5, color: "var(--ink-2)"}}>Доплата готівкою, {period.label}</td>
                  <td className="num-col num-bold">{window.formatMoney(p.cashSalary)} ₴</td>
                  <td><span className="status-tag tone-amber">готівка</span></td>
                </tr>
              ))}
            </tbody>
            <tfoot>
              <tr>
                <td colSpan={3}><b>Усього готівкою</b></td>
                <td className="num-col num-bold" style={{fontSize: 16}}>{window.formatMoney(totalCash)} ₴</td>
                <td></td>
              </tr>
            </tfoot>
          </table>
          <div className="hint-box" style={{marginTop: 14}}>
            <b>Управлінський облік.</b> Ці виплати не проходять через банк і офіційну звітність. Розділ бачать лише директор і бухгалтер.
            Майте на увазі податкові та юридичні ризики неофіційних виплат.
          </div>
        </section>
      )}
    </div>
  );
}

// ============ АНАЛІТИКА ============
function AnalyticsPage({ role }) {
  const team = window.DATA.TEAM;
  const objects = window.DATA.OBJECTS;

  // Фонд ЗП по місяцях (моки)
  const fundMonths = [
    { m: "Грудень 25", v: 234000 },
    { m: "Січень 26",  v: 241500 },
    { m: "Лютий 26",   v: 238900 },
    { m: "Березень 26",v: 252100 },
    { m: "Квітень 26", v: 247600 },
    { m: "Травень 26 (план)", v: 251200, projected: true },
  ];
  const maxFund = Math.max(...fundMonths.map(x => x.v));

  // Розподіл фонду по типах
  const breakdown = [
    { label: "Штатні оклади", v: 174000, color: "var(--c-green-deep)" },
    { label: "Бонуси за проєкти", v: 38000, color: "var(--c-green)" },
    { label: "Часткова зайнятість", v: 22000, color: "var(--c-blue)" },
    { label: "Субпідряд (ЦПХ)", v: 13600, color: "var(--c-mint)" },
  ];
  const breakSum = breakdown.reduce((s, x) => s + x.v, 0);

  // Дохід vs ЗП по об'єктах
  const objAnalytics = objects.map(o => {
    const contractM = parseFloat(o.contract.replace(/[^\d.]/g, ""));
    const contract = contractM * 1000000;
    // спрощено: ЗП = 25% від контракту
    const salary = Math.round(contract * 0.25);
    const margin = contract - salary;
    return { obj: o, contract, salary, margin };
  });

  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>
          <span className="dot"></span>
          <span>прибутковість по об'єктах</span>
        </div>
      </div>

      {/* Фонд по місяцях */}
      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Фонд ЗП по місяцях</h2>
          <span className="section-sub">останні 6 місяців</span>
        </div>
        <div className="bar-chart">
          {fundMonths.map(m => (
            <div key={m.m} className={`bar-col ${m.projected ? "is-projected" : ""}`}>
              <div className="bar-val">{Math.round(m.v / 1000)}<span>k</span></div>
              <div className="bar-track">
                <div className="bar-fill" style={{height: (m.v / maxFund * 100) + "%"}}></div>
              </div>
              <div className="bar-label">{m.m}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Розподіл */}
      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Структура фонду · травень</h2>
          <span className="section-sub">{window.formatMoney(breakSum)} ₴ загалом</span>
        </div>
        <div className="break-stack">
          <div className="break-bar">
            {breakdown.map(b => (
              <div key={b.label} className="break-bar-seg" style={{flex: b.v, background: b.color}} title={`${b.label} · ${window.formatMoney(b.v)} ₴`}></div>
            ))}
          </div>
          <div className="break-legend">
            {breakdown.map(b => (
              <div key={b.label} className="break-legend-item">
                <span className="break-dot" style={{background: b.color}}></span>
                <span className="break-label">{b.label}</span>
                <span className="break-val">{window.formatMoney(b.v)} ₴</span>
                <span className="break-pct">{Math.round(b.v / breakSum * 100)}%</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Завантаження команди */}
      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Завантаження команди</h2>
          <span className="section-sub">розподіл по людях</span>
        </div>
        <table className="data-table compact-table">
          <thead>
            <tr>
              <th></th>
              <th>Працівник</th>
              <th>Завантаження</th>
              <th>Активних задач</th>
              <th>Ефективність</th>
            </tr>
          </thead>
          <tbody>
            {team.map(p => {
              const eff = Math.round(80 + Math.random() * 25 - (p.load > 90 ? 15 : 0));
              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>
                    <div className="load-bar">
                      <div className="load-bar-track">
                        <div className={`load-bar-fill ${p.load >= 90 ? "is-high" : ""}`} style={{width: p.load + "%"}}></div>
                      </div>
                      <span className="load-bar-val">{p.load}%</span>
                    </div>
                  </td>
                  <td style={{fontVariantNumeric: "tabular-nums"}}>—</td>
                  <td>
                    <div className="load-bar">
                      <div className="load-bar-track">
                        <div className="load-bar-fill" style={{width: eff + "%", background: "var(--c-green)"}}></div>
                      </div>
                      <span className="load-bar-val">{eff}%</span>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </section>

      {/* Прибутковість */}
      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Прибутковість об'єктів</h2>
          <span className="section-sub">оцінка · ЗП склад ~25% контракту</span>
        </div>
        <table className="data-table">
          <thead>
            <tr>
              <th>Шифр</th>
              <th>Об'єкт</th>
              <th className="num-col">Договір</th>
              <th className="num-col">Витрати на ЗП</th>
              <th className="num-col">Маржа</th>
              <th>Маржа</th>
            </tr>
          </thead>
          <tbody>
            {objAnalytics.map(({ obj, contract, salary, margin }) => {
              const marginPct = Math.round(margin / contract * 100);
              return (
                <tr key={obj.id}>
                  <td className="td-mono" style={{fontSize: 11.5, color: "var(--ink-3)"}}>{obj.code}</td>
                  <td><div className="cell-name">{obj.name}</div></td>
                  <td className="num-col">{window.formatMoney(Math.round(contract))} ₴</td>
                  <td className="num-col" style={{color: "var(--ink-3)"}}>{window.formatMoney(salary)} ₴</td>
                  <td className="num-col num-bold" style={{color: "var(--c-green-deep)"}}>{window.formatMoney(margin)} ₴</td>
                  <td style={{width: 130}}>
                    <div className="load-bar">
                      <div className="load-bar-track">
                        <div className="load-bar-fill" style={{width: marginPct + "%", background: "var(--c-green-deep)"}}></div>
                      </div>
                      <span className="load-bar-val">{marginPct}%</span>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </section>
    </div>
  );
}

window.PayrollPage = PayrollPage;
window.RegistryPage = RegistryPage;
window.AnalyticsPage = AnalyticsPage;