/* ============================================================
   Views 4 — Klientų apžvalga, Metinė, CSV importas, dokumentai,
   atostogų kalendorius, veiksmų žurnalas
   ============================================================ */
const D4 = window.PavData;

/* ===================== CONTROL TOWER (buhalteriui) ===================== */
function OverviewView({ companies, onSwitch }) {
  const totalEmp = companies.reduce((s, c) => s + c.employees.length, 0);
  const totalFund = companies.reduce((s, c) => s + c.employees.reduce((x, e) => x + e.gross, 0), 0);
  const allTasks = companies.map((c) => ({ c, ...D4.companyTasks(c) }));
  const pendingTotal = allTasks.reduce((s, t) => s + t.tasks.length, 0);

  const kpis = [
    { ic: "building", label: "Aptarnaujamos įmonės", val: companies.length },
    { ic: "users", label: "Iš viso darbuotojų", val: totalEmp },
    { ic: "wallet", label: "Bendras DU fondas", val: D4.fmtEur(totalFund, 0) },
    { ic: "clock", label: "Laukia veiksmų", val: pendingTotal },
  ];

  const taskIcon = (k) => k === "payroll" ? "calc" : k === "leave" ? "calendar" : "report";

  return (
    <div>
      <div className="info-banner">
        <Icon name="building" size={18} />
        Visų klientų apžvalga vienoje vietoje — matykite, kur reikia jūsų dėmesio, ir greitai perjunkite įmonę.
      </div>
      <div className="kpi-grid">
        {kpis.map((k, i) => (
          <div className="kpi" key={i}>
            <div className="kic"><Icon name={k.ic} size={19} /></div>
            <div className="klabel">{k.label}</div>
            <div className="kval">{k.val}</div>
          </div>
        ))}
      </div>

      <div className="card">
        <div className="card-head"><h3>Klientų būsena</h3><span className="badge-st muted">Sausis 2026</span></div>
        <div className="table-wrap">
          <table className="data">
            <thead>
              <tr><th>Įmonė</th><th className="num">Darbuotojai</th><th className="num">DU fondas</th><th>Reikia atlikti</th><th>DU būsena</th><th></th></tr>
            </thead>
            <tbody>
              {allTasks.map(({ c, tasks, payrollDone }) => {
                const fund = c.employees.reduce((x, e) => x + e.gross, 0);
                return (
                  <tr key={c.id} className="clickable" onClick={() => onSwitch(c.id)}>
                    <td>
                      <span className="cell-emp">
                        <span className="av" style={{ borderRadius: 8, background: "var(--ink)", color: "#fff" }}>{D4.companyInitials(c.name)}</span>
                        <span><span className="nm">{c.name}</span><br /><span className="pos">{c.kind}</span></span>
                      </span>
                    </td>
                    <td className="num">{c.employees.length}</td>
                    <td className="num strong">{D4.fmtEur(fund, 0)}</td>
                    <td>
                      {tasks.length === 0 ? <span className="badge-st ok">Viskas atlikta</span> : (
                        <span style={{ display: "inline-flex", gap: 6, flexWrap: "wrap" }}>
                          {tasks.map((t, i) => (
                            <span key={i} className="badge-st warn" style={{ fontSize: 11 }}><Icon name={taskIcon(t.kind)} size={11} sw={2.2} /> {t.label}</span>
                          ))}
                        </span>
                      )}
                    </td>
                    <td>{payrollDone ? <Badge kind="ok">Patvirtinta</Badge> : <Badge kind="warn">Juodraštis</Badge>}</td>
                    <td className="num"><Icon name="chevRight" size={16} style={{ color: "var(--ink-faint)" }} /></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

/* ===================== METINĖ (GPM312 + year-end + 13th) ===================== */
function AnnualView({ company }) {
  const rows = D4.annualSummary(company);
  const t = rows.reduce((a, r) => ({ g: a.g + r.annualGross, gpm: a.gpm + r.annualGpm, sodra: a.sodra + r.annualSodra, net: a.net + r.annualNet }), { g: 0, gpm: 0, sodra: 0, net: 0 });
  const thirteenth = D4.thirteenthCost(company);
  const [showToast, toastNode] = useToast();

  return (
    <div>
      {toastNode}
      <div className="grid-2-even" style={{ marginBottom: 16 }}>
        <div className="card card-pad" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }}>
          <div>
            <div style={{ fontSize: 13, color: "var(--ink-faint)" }}>GPM312 — metinė A klasės deklaracija</div>
            <div style={{ fontSize: 22, fontWeight: 650, marginTop: 4 }}>2025 m.</div>
            <div style={{ fontSize: 13, color: "var(--ink-soft)", marginTop: 4 }}>Sugeneruota pagal 12 mėn. duomenis</div>
          </div>
          <button className="btn btn--primary" style={{ padding: "10px 16px", fontSize: 14 }} onClick={() => showToast("GPM312 paruošta pateikimui VMI")}><Icon name="send" size={15} /> Pateikti VMI</button>
        </div>
        <div className="card card-pad" style={{ background: "linear-gradient(170deg, color-mix(in srgb, var(--accent-soft) 55%, var(--surface)), var(--surface) 70%)" }}>
          <div style={{ fontSize: 13, color: "var(--ink-soft)" }}>13-os algos (kalėdinės) kaina darbdaviui</div>
          <div style={{ fontFamily: "var(--mono)", fontSize: 30, fontWeight: 650, color: "var(--accent-strong)", marginTop: 6 }}>{D4.fmtEur(thirteenth, 0)}</div>
          <div style={{ fontSize: 12.5, color: "var(--ink-faint)", marginTop: 4 }}>Jei išmokėtumėte po vieną mėnesinį atlyginimą visiems</div>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>Metinė darbuotojų suvestinė</h3><span className="badge-st muted">{company.name}</span></div>
        <div className="table-wrap">
          <table className="data">
            <thead><tr><th>Darbuotojas</th><th className="num">Metinės pajamos</th><th className="num">GPM</th><th className="num">Sodra</th><th className="num">Neto</th></tr></thead>
            <tbody>
              {rows.map((r) => (
                <tr key={r.emp.id}>
                  <td><span className="cell-emp"><Avatar text={r.emp.initials} /><span className="nm">{r.emp.name}</span></span></td>
                  <td className="num strong">{D4.fmtEur(r.annualGross)}</td>
                  <td className="num">{D4.fmtEur(r.annualGpm)}</td>
                  <td className="num">{D4.fmtEur(r.annualSodra)}</td>
                  <td className="num">{D4.fmtEur(r.annualNet)}</td>
                </tr>
              ))}
              <tr className="total">
                <td>Iš viso ({rows.length})</td>
                <td className="num">{D4.fmtEur(t.g)}</td>
                <td className="num">{D4.fmtEur(t.gpm)}</td>
                <td className="num">{D4.fmtEur(t.sodra)}</td>
                <td className="num">{D4.fmtEur(t.net)}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

/* ===================== CSV IMPORT MODAL ===================== */
function ImportModal({ onImport, onClose }) {
  const [text, setText] = useState("");
  const parsed = text.trim() ? D4.parseEmployeesCsv(text) : { rows: [], errors: [] };
  const fileRef = useRef(null);
  const onFile = (e) => {
    const f = e.target.files[0]; if (!f) return;
    const r = new FileReader();
    r.onload = () => setText(String(r.result));
    r.readAsText(f);
  };
  return (
    <Modal
      title="Importuoti darbuotojus" wide onClose={onClose}
      footer={
        <>
          <span style={{ marginRight: "auto", fontSize: 13, color: "var(--ink-soft)" }}>{parsed.rows.length} darbuotojų paruošta</span>
          <button className="btn btn--ghost" style={{ padding: "10px 16px", fontSize: 14 }} onClick={onClose}>Atšaukti</button>
          <button className="btn btn--primary" style={{ padding: "10px 16px", fontSize: 14, opacity: parsed.rows.length ? 1 : .5, pointerEvents: parsed.rows.length ? "auto" : "none" }}
            onClick={() => onImport(parsed.rows)}>
            <Icon name="download" size={15} /> Importuoti {parsed.rows.length ? `(${parsed.rows.length})` : ""}
          </button>
        </>
      }
    >
      <p style={{ fontSize: 13.5, color: "var(--ink-soft)", marginBottom: 14, lineHeight: 1.5 }}>
        Įklijuokite CSV duomenis arba įkelkite failą. Stulpeliai: <b>Vardas, Pavardė, Pareigos, Padalinys, Bruto</b>.
      </p>
      <div style={{ display: "flex", gap: 10, marginBottom: 12 }}>
        <button className="btn btn--ghost" style={{ padding: "8px 14px", fontSize: 13 }} onClick={() => fileRef.current && fileRef.current.click()}><Icon name="doc" size={14} /> Įkelti failą</button>
        <button className="btn btn--ghost" style={{ padding: "8px 14px", fontSize: 13 }} onClick={() => setText(D4.SAMPLE_CSV)}>Užpildyti pavyzdžiu</button>
        <input ref={fileRef} type="file" accept=".csv,.txt" style={{ display: "none" }} onChange={onFile} />
      </div>
      <textarea className="ff-input" style={{ height: 120, padding: 12, fontFamily: "var(--mono)", fontSize: 12.5, resize: "vertical", lineHeight: 1.5 }}
        placeholder={"Vardas;Pavardė;Pareigos;Padalinys;Bruto\nJonas;Petraitis;Vadybininkas;Pardavimai;2000"}
        value={text} onChange={(e) => setText(e.target.value)} />
      {parsed.rows.length > 0 && (
        <div className="table-wrap" style={{ marginTop: 14, border: "1px solid var(--line)", borderRadius: "var(--r-sm)", maxHeight: 220, overflowY: "auto" }}>
          <table className="data">
            <thead><tr><th>Vardas, pavardė</th><th>Pareigos</th><th>Padalinys</th><th className="num">Bruto</th></tr></thead>
            <tbody>
              {parsed.rows.map((r, i) => (
                <tr key={i}>
                  <td className="strong">{r.first} {r.last}</td>
                  <td>{r.position}</td>
                  <td>{r.dept}</td>
                  <td className="num">{r.gross ? D4.fmtEur(r.gross) : <span style={{ color: "#B4453B" }}>—</span>}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
      {parsed.errors.length > 0 && (
        <div style={{ marginTop: 10, fontSize: 12.5, color: "#B4453B" }}>{parsed.errors.slice(0, 3).map((e, i) => <div key={i}>⚠ {e}</div>)}</div>
      )}
    </Modal>
  );
}

/* ===================== EMPLOYEE DOCUMENTS (sutartis / pažyma) ===================== */
function DocModal({ emp, company, kind, onClose }) {
  const c = D4.calcPayroll(emp.gross, emp);
  const today = new Date().toLocaleDateString("lt-LT");
  const isContract = kind === "contract";
  const print = () => {
    document.body.classList.add("print-doc");
    window.print();
    setTimeout(() => document.body.classList.remove("print-doc"), 600);
  };
  return (
    <Modal
      title={isContract ? "Darbo sutartis" : "Pažyma apie atlyginimą"} wide onClose={onClose}
      footer={
        <>
          <button className="btn btn--ghost" style={{ padding: "10px 16px", fontSize: 14 }} onClick={onClose}>Uždaryti</button>
          <button className="btn btn--primary" style={{ padding: "10px 16px", fontSize: 14 }} onClick={print}><Icon name="print" size={15} /> Spausdinti / PDF</button>
        </>
      }
    >
      <div className="doc-sheet">
        <div className="doc-head">
          <div>
            <div className="doc-co">{company.name}</div>
            <div className="doc-meta">Įmonės kodas: {company.code} · {company.address}</div>
          </div>
          <div className="doc-no">{isContract ? "Nr. DS-2026-" + emp.id.toUpperCase().slice(0, 3) : "Nr. PAŽ-" + emp.id.toUpperCase().slice(0, 3)}</div>
        </div>
        <h2 className="doc-title">{isContract ? "DARBO SUTARTIS" : "PAŽYMA APIE DARBO UŽMOKESTĮ"}</h2>
        <div className="doc-place">{company.address.split(",").pop().trim()}, {today}</div>
        {isContract ? (
          <div className="doc-body">
            <p>Darbdavys <b>{company.name}</b>, atstovaujamas direktoriaus, ir darbuotojas <b>{emp.name}</b> sudarė šią darbo sutartį:</p>
            <ol>
              <li>Darbuotojas priimamas į <b>{emp.position}</b> pareigas (<b>{emp.dept}</b> padalinys).</li>
              <li>Nustatomas mėnesinis darbo užmokestis (bruto): <b>{D4.fmtEur(emp.gross)}</b>.</li>
              <li>Darbo sutartis neterminuota, įsigalioja nuo <b>{fmtDate(emp.hireDate)}</b>.</li>
              <li>Taikoma 40 val. per savaitę darbo laiko norma.</li>
              <li>Kasmetinių atostogų trukmė — 20 darbo dienų per metus.</li>
            </ol>
            <div className="doc-sign">
              <div><span>Darbdavys</span><div className="doc-line"></div></div>
              <div><span>Darbuotojas</span><div className="doc-line"></div></div>
            </div>
          </div>
        ) : (
          <div className="doc-body">
            <p>Patvirtiname, kad <b>{emp.name}</b> dirba <b>{company.name}</b> nuo <b>{fmtDate(emp.hireDate)}</b> ir eina <b>{emp.position}</b> pareigas.</p>
            <table className="doc-table">
              <tbody>
                <tr><td>Mėnesinis atlyginimas (bruto)</td><td>{D4.fmtEur(emp.gross)}</td></tr>
                <tr><td>Atskaityta GPM (20 %)</td><td>{D4.fmtEur(c.gpm)}</td></tr>
                <tr><td>Atskaityta Sodra ({(c.sodraRate * 100).toFixed(1).replace(".", ",")} %)</td><td>{D4.fmtEur(c.sodra)}</td></tr>
                <tr className="doc-total"><td>Išmokama (neto)</td><td>{D4.fmtEur(c.net)}</td></tr>
              </tbody>
            </table>
            <p>Pažyma išduota pateikti pagal pareikalavimą.</p>
            <div className="doc-sign">
              <div><span>Buhalteris</span><div className="doc-line"></div></div>
              <div><span>Data</span><div className="doc-line"></div></div>
            </div>
          </div>
        )}
      </div>
    </Modal>
  );
}

/* ===================== AUDIT LOG CARD ===================== */
function AuditCard() {
  const [log, setLog] = useState(() => D4.auditLog());
  useEffect(() => {
    const h = () => setLog(D4.auditLog());
    window.addEventListener("pav:audit", h);
    return () => window.removeEventListener("pav:audit", h);
  }, []);
  const when = (iso) => {
    const d = new Date(iso); const diff = (Date.now() - d) / 60000;
    if (diff < 1) return "ką tik";
    if (diff < 60) return "prieš " + Math.round(diff) + " min.";
    if (diff < 1440) return "prieš " + Math.round(diff / 60) + " val.";
    return d.toLocaleDateString("lt-LT");
  };
  return (
    <div className="card" style={{ marginTop: 16 }}>
      <div className="card-head"><h3>Veiksmų žurnalas</h3><span className="badge-st muted">Auditas</span></div>
      {log.length === 0 ? (
        <div style={{ padding: "26px 22px", fontSize: 13.5, color: "var(--ink-faint)", textAlign: "center" }}>Veiksmų dar nėra. Patvirtinkite DU arba pakeiskite duomenis.</div>
      ) : log.slice(0, 8).map((a, i) => (
        <div className="act-row" key={i}>
          <span className="ad"></span>
          <div><div className="at"><b>{a.who}</b> {a.action}</div><div className="aw">{when(a.at)}</div></div>
        </div>
      ))}
    </div>
  );
}

/* ===================== LEAVE CALENDAR ===================== */
function LeaveCalendar({ company }) {
  const reqs = D4.leaveRequests(company).filter((r) => r.status !== "atmesta");
  const days = 28;
  const colOf = (t) => t === "liga" ? "var(--accent-line)" : t === "nemokamos" ? "var(--ink-faint)" : "var(--accent)";
  // map employee -> set of days in Feb (using from/to within month for demo)
  const inFeb = (iso) => iso.startsWith("2026-02");
  const dayNum = (iso) => parseInt(iso.split("-")[2], 10);
  return (
    <div className="card">
      <div className="card-head"><h3>Komandos kalendorius</h3><span className="badge-st info">Vasaris 2026</span></div>
      <div style={{ overflowX: "auto", padding: "8px 0 16px" }}>
        <div className="cal-grid" style={{ gridTemplateColumns: `180px repeat(${days}, 1fr)` }}>
          <div className="cal-corner"></div>
          {Array.from({ length: days }, (_, i) => <div key={i} className="cal-dnum">{i + 1}</div>)}
          {company.employees.map((e) => {
            const mine = reqs.filter((r) => r.emp.id === e.id && (inFeb(r.from) || inFeb(r.to)));
            return (
              <React.Fragment key={e.id}>
                <div className="cal-emp"><Avatar text={e.initials} size={24} /><span>{e.name}</span></div>
                {Array.from({ length: days }, (_, d) => {
                  const day = d + 1;
                  const hit = mine.find((r) => {
                    const a = inFeb(r.from) ? dayNum(r.from) : 1;
                    const b = inFeb(r.to) ? dayNum(r.to) : days;
                    return day >= a && day <= b;
                  });
                  return <div key={d} className="cal-cell" style={hit ? { background: colOf(hit.type) } : null} title={hit ? hit.type : ""}></div>;
                })}
              </React.Fragment>
            );
          })}
        </div>
      </div>
      <div style={{ display: "flex", gap: 18, padding: "0 22px 18px", fontSize: 12.5, color: "var(--ink-soft)" }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}><span style={{ width: 12, height: 12, borderRadius: 3, background: "var(--accent)" }}></span> Atostogos</span>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}><span style={{ width: 12, height: 12, borderRadius: 3, background: "var(--accent-line)" }}></span> Liga</span>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}><span style={{ width: 12, height: 12, borderRadius: 3, background: "var(--ink-faint)" }}></span> Nemokamos</span>
      </div>
    </div>
  );
}

Object.assign(window, { OverviewView, AnnualView, ImportModal, DocModal, AuditCard, LeaveCalendar, BulkPayrollView, CommandPalette });

/* ===================== COMMAND PALETTE (⌘K) ===================== */
function CommandPalette({ nav, setTheme, companies, switchCompany, onClose }) {
  const [q, setQ] = useState("");
  const [vis, setVis] = useState(false);
  const inputRef = useRef(null);
  useEffect(() => { setVis(true); setTimeout(() => inputRef.current && inputRef.current.focus(), 30); }, []);
  const close = () => { setVis(false); setTimeout(onClose, 180); };

  const cmds = [
    { label: "Eiti į suvestinę", hint: "g d", icon: "grid", run: () => nav("dashboard") },
    { label: "Darbuotojai", hint: "g e", icon: "users", run: () => nav("employees") },
    { label: "Darbo užmokestis", hint: "g p", icon: "calc", run: () => nav("payroll") },
    { label: "Atostogos ir ligos", hint: "g l", icon: "calendar", run: () => nav("leave") },
    { label: "Atlyginimo lapeliai", icon: "doc", run: () => nav("payslips") },
    { label: "Ataskaitos", hint: "g r", icon: "report", run: () => nav("reports") },
    { label: "Metinė ataskaita", hint: "g a", icon: "trend", run: () => nav("annual") },
    { label: "Atlyginimo skaičiuoklė", hint: "g c", icon: "bolt", run: () => nav("calculator") },
    { label: "Klientų apžvalga", hint: "g o", icon: "briefcase", run: () => nav("overview") },
    { label: "Masinis DU (visos įmonės)", hint: "g b", icon: "bolt", run: () => nav("bulk") },
    { label: "Nustatymai", hint: "g s", icon: "gear", run: () => nav("settings") },
    { label: "Perjungti tamsų / šviesų režimą", icon: "sun", run: () => setTheme((t) => (t === "dark" ? "light" : "dark")) },
    ...companies.map((c) => ({ label: "Perjungti įmonę: " + c.name, icon: "building", run: () => { switchCompany(c.id); nav("dashboard"); } })),
  ];
  const filtered = q.trim() ? cmds.filter((c) => c.label.toLowerCase().includes(q.toLowerCase())) : cmds;

  return (
    <div className={"cmdk-scrim" + (vis ? " in" : "")} onClick={close}>
      <div className="cmdk" onClick={(e) => e.stopPropagation()}>
        <div className="cmdk-input">
          <Icon name="search" size={18} />
          <input ref={inputRef} placeholder="Ieškoti komandos arba puslapio…" value={q} onChange={(e) => setQ(e.target.value)}
            onKeyDown={(e) => { if (e.key === "Enter" && filtered[0]) { filtered[0].run(); close(); } }} />
          <kbd>ESC</kbd>
        </div>
        <div className="cmdk-list">
          {filtered.length === 0 && <div className="cmdk-empty">Nieko nerasta</div>}
          {filtered.slice(0, 8).map((c, i) => (
            <div className="cmdk-item" key={i} onClick={() => { c.run(); close(); }}>
              <span className="cmdk-ic"><Icon name={c.icon} size={16} /></span>
              <span className="cmdk-lbl">{c.label}</span>
              {c.hint && <kbd className="cmdk-hint">{c.hint}</kbd>}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ===================== BULK PAYROLL (visos įmonės) ===================== */
function BulkPayrollView({ companies, monthIdx, monthLabel, onConfirmAll }) {
  const [showToast, toastNode] = useToast();
  const rows = companies.map((c) => {
    const calcs = c.employees.map((e) => D4.calcPayroll(e.gross, e));
    return {
      c,
      emps: c.employees.length,
      gross: calcs.reduce((s, x) => s + x.gross, 0),
      net: calcs.reduce((s, x) => s + x.net, 0),
      taxes: calcs.reduce((s, x) => s + x.gpm + x.sodra + x.employerSodra, 0),
      done: !!(c.runs && c.runs[monthIdx]),
    };
  });
  const pending = rows.filter((r) => !r.done);
  const tot = rows.reduce((a, r) => ({ gross: a.gross + r.gross, net: a.net + r.net, taxes: a.taxes + r.taxes, emps: a.emps + r.emps }), { gross: 0, net: 0, taxes: 0, emps: 0 });

  return (
    <div>
      {toastNode}
      <div className="info-banner">
        <Icon name="bolt" size={18} />
        Masinis skaičiavimas — apskaičiuokite ir patvirtinkite {monthLabel} darbo užmokestį visoms įmonėms vienu paspaudimu.
      </div>
      <div className="card">
        <div className="card-head">
          <h3>Visų klientų darbo užmokestis — {monthLabel}</h3>
          <button className="btn btn--primary" style={{ padding: "9px 16px", fontSize: 14, opacity: pending.length ? 1 : .5, pointerEvents: pending.length ? "auto" : "none" }}
            onClick={() => { onConfirmAll(pending.map((r) => r.c.id), monthIdx); showToast(`Patvirtinta ${pending.length} įmonių DU`); }}>
            <Icon name="check" size={15} sw={2.4} /> Patvirtinti visas ({pending.length})
          </button>
        </div>
        <div className="table-wrap">
          <table className="data">
            <thead><tr><th>Įmonė</th><th className="num">Darbuotojai</th><th className="num">DU fondas</th><th className="num">Neto</th><th className="num">Mokesčiai</th><th>Būsena</th></tr></thead>
            <tbody>
              {rows.map((r) => (
                <tr key={r.c.id}>
                  <td><span className="cell-emp"><span className="av" style={{ borderRadius: 8, background: "var(--ink)", color: "#fff" }}>{D4.companyInitials(r.c.name)}</span><span className="nm">{r.c.name}</span></span></td>
                  <td className="num">{r.emps}</td>
                  <td className="num strong">{D4.fmtEur(r.gross, 0)}</td>
                  <td className="num">{D4.fmtEur(r.net, 0)}</td>
                  <td className="num">{D4.fmtEur(r.taxes, 0)}</td>
                  <td>{r.done ? <Badge kind="ok">Patvirtinta</Badge> : <Badge kind="warn">Juodraštis</Badge>}</td>
                </tr>
              ))}
              <tr className="total">
                <td>Iš viso ({rows.length} įmonės)</td>
                <td className="num">{tot.emps}</td>
                <td className="num">{D4.fmtEur(tot.gross, 0)}</td>
                <td className="num">{D4.fmtEur(tot.net, 0)}</td>
                <td className="num">{D4.fmtEur(tot.taxes, 0)}</td>
                <td></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}