/* ops2-overview.jsx — Обзор как операционный дашборд (cockpit)
   Состав (по фидбэку Roma): Воронка · Скоро сдача этапа · Бюджет→счёт ·
   Новые и сдача · Сводная по команде · Проблемные (Требует внимания) · Живые объекты.
   Экономика / Дебиторка / Структура затрат вынесены в Аналитика → Экономика. */
(function () {
  const { Card, Badge, Button } = window.DesignSystem_9e0a09;
  const CardHead = window.CardHead;

  /* ---- big metric figure ---- */
  function Figure({ value, unit, label, delta, deltaTone, hint, color }) {
    return (
      <div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
          <span className="t-num" style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-0.025em', color: color || 'var(--foreground)' }}>{value}</span>
          {unit && <span style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-tertiary)' }}>{unit}</span>}
        </div>
        <div style={{ fontSize: 12.5, color: 'var(--text-secondary)', marginTop: 3 }}>{label}</div>
        {(delta != null || hint) &&
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 7 }}>
            {delta != null && <Delta value={delta} tone={deltaTone} />}
            {hint && <span style={{ fontSize: 11.5, color: 'var(--text-tertiary)' }}>{hint}</span>}
          </div>
        }
      </div>);
  }

  /* ---- notify ЛК helper: dispatches a global event the app layer renders ---- */
  function notifyLk(detail) {window.dispatchEvent(new CustomEvent('ops:notify-lk', { detail }));}
  function initials(name) {return (name || '').split(' ').map((w) => w[0]).filter(Boolean).slice(0, 2).join('');}

  /* ============================================================ */
  function Overview({ period, prevLabel, go, openProject, openClient }) {
    const O = window.OPS;
    const f = O.FUNNEL[period];
    const ts = O.TEAM_SUMMARY;
    const [excFilter, setExcFilter] = React.useState(new Set());

    const projects = O.PROJECTS;
    const upcoming = projects.filter((p) => p.stageDueDays != null).sort((a, b) => a.stageDueDays - b.stageDueDays);
    const fresh = projects.filter((p) => p.kind === 'new');
    const finishing = projects.filter((p) => p.kind === 'finishing' || p.pct >= 80);
    const newClients = O.CLIENTS.filter((c) => ['lead', 'meeting', 'estimate'].includes(c.stage));
    const stBadge = (st) => {const s = O.STAGE[st];return <Badge bg={s.bg} color={s.fg} dot>{s.l}</Badge>;};
    const dstatus = O.DEAL_STATUS;

    /* Реестр сделок — фильтры по статусу + период с автосуммой */
    const [dealStatusF, setDealStatusF] = React.useState('');
    const [dealPeriodF, setDealPeriodF] = React.useState('all');
    const DEAL_WEEK = new Set(['14 июн', '13 июн', '11 июн', '9 июн', '8 июн']);
    const DEAL_MONTH = new Set([...DEAL_WEEK, '5 июн', '2 июн']);
    const inPeriod = (d) => dealPeriodF === 'all' ? true : dealPeriodF === 'week' ? DEAL_WEEK.has(d.date) : DEAL_MONTH.has(d.date);
    const dealsFiltered = O.DEALS.filter((d) => (!dealStatusF || d.status === dealStatusF) && inPeriod(d));
    const dealTotals = dealsFiltered.reduce((a, d) => ({ budget: a.budget + d.budget, costs: a.costs + (d.costs || 0), profit: a.profit + (d.profit || 0), won: a.won + (d.status === 'accepted' || d.status === 'overrun' || d.status === 'done' ? 1 : 0) }), { budget: 0, costs: 0, profit: 0, won: 0 });
    const critical = O.EXCEPTIONS.filter((x) => x.severity === 'high');

    /* exceptions (Проблемные) */
    const exc = O.EXCEPTIONS.filter((x) => excFilter.size === 0 || excFilter.has(x.type));
    const toggleExc = (id) => {const s = new Set(excFilter);if (s.has(id)) s.delete(id);else s.add(id);setExcFilter(s);};

    const dueBadge = (d) => {
      if (d == null) return null;
      const tone = d <= 2 ? 'danger' : d <= 5 ? 'warning' : 'neutral';
      return <Badge tone={tone} dot>{d === 0 ? 'сегодня' : `через ${d} дн`}</Badge>;
    };

    const activeMeasures = O.MEASURE_VISITS.filter((m) => m.status !== 'done');

    const pipeGroups = [
      { id: 'clients', label: 'Новые клиенты', statLabel: 'Клиенты', hint: 'Лиды и сметы до подписания договора', icon: 'user-plus', count: newClients.length, empty: 'Нет новых клиентов в воронке' },
      { id: 'measures', label: 'Выезды на замеры', statLabel: 'Выезды', hint: 'Запланированные выезды и ожидающие назначения', icon: 'ruler', count: activeMeasures.length, empty: 'Нет активных выездов' },
      { id: 'stages', label: 'Скоро сдача этапа', statLabel: 'Сдачи', hint: 'Ближайшие дедлайны по объектам в работе', icon: 'flag-triangle-right', count: upcoming.length, empty: 'Нет этапов с ближайшим дедлайном' },
    ];

    const clientsRows = newClients.map((c) =>
      <button key={'c' + c.id} type="button" className="ov-pipe-item" onClick={() => openClient(c.id)}>
        <span className="ov-pipe-item-body">
          <span className="ov-pipe-item-top">
            <span className="ov-pipe-item-name">{c.name}</span>
            <span className="ov-pipe-item-val t-num">{fmtCompact(c.budget)} ₽</span>
          </span>
          <span className="ov-pipe-item-foot">
            <span className="ov-pipe-item-meta">{c.city.split(' · ')[0]} · {c.type} · {c.area} м²</span>
            <span className="ov-pipe-item-tags">
              {c.manager !== '—'
                ? <span className="ov-pipe-item-mgr">{c.manager}</span>
                : <span className="ov-pipe-item-mgr ov-pipe-item-mgr--pool">в пуле</span>}
              {stBadge(c.stage)}
            </span>
          </span>
        </span>
      </button>
    );
    const measureRows = activeMeasures.map((m, i) => {
      const s = O.MEASURE_STATUS[m.status];
      return (
        <div key={'m' + i} className={'ov-pipe-item ov-pipe-item--static' + (m.status === 'unassigned' ? ' ov-pipe-item--alert' : '')}>
          <span className="ov-pipe-item-when">
            <span className="ov-pipe-item-date">{m.date}</span>
            <span className="ov-pipe-item-time t-num">{m.time}</span>
          </span>
          <span className="ov-pipe-item-body">
            <span className="ov-pipe-item-name">{m.client}</span>
            <span className="ov-pipe-item-foot">
              <span className="ov-pipe-item-meta">{m.address}</span>
              <span className={'ov-pipe-item-mgr' + (m.assignee === 'не назначен' ? ' ov-pipe-item-mgr--pool' : '')}>{m.assignee}</span>
            </span>
          </span>
          <Badge bg={s.bg} color={s.fg}>{s.l}</Badge>
        </div>
      );
    });
    const stageRows = upcoming.map((p) =>
      <button key={'s' + p.id} type="button" className="ov-pipe-item" onClick={() => openProject(p.id)}>
        <span className="ov-pipe-item-body">
          <span className="ov-pipe-item-top">
            <span className="ov-pipe-item-name">Этап «{p.stage}»</span>
            {dueBadge(p.stageDueDays)}
          </span>
          <span className="ov-pipe-item-meta">
            {p.client}
            {p.foreman !== '—' ? ` · Прораб ${p.foreman}` : ' · Без прораба'}
            {` · ${p.pct}%`}
          </span>
        </span>
      </button>
    );
    const pipeRowsByGroup = { clients: clientsRows, measures: measureRows, stages: stageRows };
    return (
      <div className="ov">
        {/* ===== ВОРОНКА ПРОДАЖ (приоритет №1) ===== */}
        <Card variant="glass" padding="sm" id="ov-funnel" style={{ gridColumn: '1 / -1' }}>
          <CardHead title="Воронка продаж" sub={`Лиды → встречи → сметы → договоры · сравнение с ${prevLabel}`}
          action={<span className="ov-priority-tag">Приоритет №1</span>} />
          <div className="ov-inset">
            <SalesFunnel data={f} onDrill={() => go('clients')} />
          </div>
          <div className="ov-inset ov-funnel-foot">
            <div><div className="ov-foot-l">Средний чек</div><div className="t-num ov-foot-v">{fmtCompact(f.avgCheck)} ₽</div></div>
            <div><div className="ov-foot-l">Лид → договор</div><div className="t-num ov-foot-v">{f.leadDays} дн</div></div>
            <div><div className="ov-foot-l">Конверсия лид→сделка</div><div className="t-num ov-foot-v">{Math.round(f.contracts / f.leads * 100)}%</div></div>
            <div><div className="ov-foot-l">Winrate к {prevLabel}</div><div className="ov-foot-v"><Delta value={f.winrateDelta} /></div></div>
          </div>
        </Card>

        {/* ===== ПРОСРОЧЕНО · задачи и дедлайны за SLA ===== */}
        {(() => {
          const overdue = O.EXCEPTIONS.filter((x) => x.type === 'overdue');
          if (!overdue.length) return null;
          return (
            <Card variant="glass" padding="sm" style={{ gridColumn: '1 / -1' }}>
              <CardHead title="Просрочено" sub="Задачи и дедлайны за SLA — требуют реакции сейчас"
                action={<Badge tone="danger" dot>{overdue.length} просрочено</Badge>} />
              <div className="ov-inset">
              <div className="uni-list">
                {overdue.map((x, i) => {
                  return (
                    <div key={i} className="uni-row">
                      <div className="uni-main"><div className="uni-t">{x.title}</div><div className="uni-s">{x.object} · ответственный {x.owner}</div></div>
                      <Badge tone={x.severity === 'high' ? 'danger' : x.severity === 'mid' ? 'warning' : 'neutral'} dot>{x.severity === 'high' ? 'критично' : x.severity === 'mid' ? 'средне' : 'низко'}</Badge>
                    </div>);
                })}
              </div>
              </div>
            </Card>);
        })()}

        {/* ===== ① ПАЙПЛАЙН · план работ ===== */}
        <Card variant="glass" padding="sm" id="ov-pipeline" style={{ gridColumn: '1 / -1', overflow: 'hidden' }}>
          <div className="ov-pipe-shell">
            <div className="ov-pipe-banner">
              <div className="ov-pipe-banner-main">
                <div className="ov-pipe-banner-title">Пайплайн · план работ</div>
                <div className="ov-pipe-banner-sub">Лиды, выезды и сдачи этапов на одном экране</div>
              </div>
              <div className="ov-pipe-banner-stats" aria-label="Сводка по группам">
                {pipeGroups.map((g) => (
                  <div key={g.id} className="ov-pipe-stat">
                    <span className="ov-pipe-stat-val t-num">{g.count}</span>
                    <span className="ov-pipe-stat-l">{g.statLabel}</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="ov-pipe-body">
              <div className="ov-pipe-grid">
                {pipeGroups.map((g) => (
                  <section key={g.id} className="ov-pipe-group" aria-labelledby={`pipe-${g.id}`}>
                    <header className="ov-pipe-group-head" id={`pipe-${g.id}`}>
                      <div className="ov-pipe-group-text">
                        <h3 className="ov-pipe-group-title">{g.label}</h3>
                        <p className="ov-pipe-group-hint">{g.hint}</p>
                      </div>
                      <span className="ov-pipe-group-count t-num" aria-label={`${g.count} записей`}>{g.count}</span>
                    </header>
                    <div className="ov-inset ov-pipe-list-inset">
                      <div className="ov-pipe-list">
                        {g.count === 0
                          ? <div className="ov-empty-sm ov-pipe-empty">{g.empty}</div>
                          : pipeRowsByGroup[g.id]}
                      </div>
                    </div>
                  </section>
                ))}
              </div>
            </div>
          </div>
        </Card>

        {/* ===== ② БЮДЖЕТ / ОСВОЕНО → СЧЁТ ===== */}
        <Card variant="glass" padding="sm">
          <CardHead title="Бюджет / освоено" sub="Сигнал готовить счёт · ответственный менеджер"
          action={<Badge tone="neutral" dot>{projects.filter((p) => p.invoice && p.invoice.ready).length} к счёту</Badge>} />
          <div className="ov-inset">
          <div className="ov-list ov-budget-list">
            {projects.map((p) => {
              const inv = p.invoice && p.invoice.ready;
              const over = p.spent > p.estimate ? Math.round((p.spent / p.estimate - 1) * 100) : 0;
              const cl = O.CLIENTS.find((x) => x.id === p.clientId);
              const debt = cl ? cl.debt : 0;
              const barColor = over > 0 ? 'var(--destructive)' : `var(--cat-${p.cat}-fg)`;
              return (
                <div key={p.id} className="ov-budget">
                  <div className="ov-budget-main">
                    <div className="ov-budget-head">
                      <div className="ov-budget-ident">
                        <span className="ov-budget-title">{p.client}</span>
                        <span className="ov-budget-code">{p.code}</span>
                      </div>
                      <div className="ov-budget-head-actions">
                        {inv ?
                        <button type="button" className="ov-invoice-cta" onClick={() => openProject(p.id)}>Готовить счёт · {fmtCompact(p.invoice.amount)} ₽</button> :
                        <span className="ov-mgr">{p.manager}</span>}
                      </div>
                    </div>
                    <div className="ov-budget-meter">
                      <div className="ov-budget-meter-top">
                        <span className="ov-budget-meter-label">Освоено бюджета</span>
                        <span className="t-num ov-budget-pct">{Math.round(p.spendPct)}%</span>
                      </div>
                      <div className="ov-budget-bar"><Bar pct={p.spendPct} color={barColor} height={8} track="rgba(255, 255, 255, 0.55)" /></div>
                      <div className="ov-budget-amount-row">
                        <span className="t-num ov-budget-spent">{fmtCompact(p.spent)} ₽</span>
                        <span className="ov-budget-amount-sep">из</span>
                        <span className="t-num ov-budget-estimate">{fmtCompact(p.estimate)} ₽</span>
                      </div>
                    </div>
                    <div className="ov-budget-foot">
                      <div className="ov-budget-tags">
                        {over > 0
                          ? <span className="ov-tag danger">перерасход +{over}%</span>
                          : <span className="ov-tag ok">в бюджете</span>}
                        {debt > 0
                          ? <span className={'ov-tag' + (cl && (cl.sla === 'red' || cl.sla === 'amber') ? ' danger' : ' warn')}>долг {fmtCompact(debt)} ₽</span>
                          : <span className="ov-tag muted">оплачено</span>}
                      </div>
                      {inv && <div className="ov-invoice-reason">{p.invoice.reason}</div>}
                    </div>
                  </div>
                  <button type="button" className="ov-budget-open" onClick={() => openProject(p.id)} aria-label={`Открыть проект ${p.code}`}>
                    <span className="ov-budget-open-label">Открыть</span>
                  </button>
                </div>);

            })}
          </div>
          </div>
        </Card>

        {/* ===== ④ НОВЫЕ И СДАЧА ПРОЕКТОВ ===== */}
        <Card variant="glass" padding="sm" id="ov-flow">
          <CardHead title="Новые и сдача" sub="Приток в работу и объекты на финишной прямой" />
          <div className="ov-inset ov-flow">
            <section className="ov-flow-lane" aria-labelledby="ov-flow-inflow-title">
              <header className="ov-flow-lane-head">
                <div className="ov-flow-lane-copy">
                  <h3 id="ov-flow-inflow-title" className="ov-flow-lane-title">Новые в работе</h3>
                  <p className="ov-flow-lane-hint">Старт и согласование смет</p>
                </div>
                <span className="ov-flow-lane-count t-num" aria-label={`${fresh.length} проектов`}>{fresh.length}</span>
              </header>
              <div className="ov-flow-list">
                {fresh.length === 0
                  ? <div className="ov-flow-empty">Нет новых проектов</div>
                  : fresh.map((p) => (
                    <button key={p.id} type="button" className="ov-flow-item" onClick={() => openProject(p.id)}>
                      <span className="ov-flow-item-body">
                        <span className="ov-flow-item-top">
                          <span className="ov-flow-item-name">{p.client}</span>
                          <span className="ov-flow-item-code t-num">{p.code}</span>
                        </span>
                        <span className="ov-flow-item-meta">{p.momentum}</span>
                      </span>
                    </button>
                  ))}
              </div>
            </section>

            <section className="ov-flow-lane" aria-labelledby="ov-flow-finish-title">
              <header className="ov-flow-lane-head">
                <div className="ov-flow-lane-copy">
                  <h3 id="ov-flow-finish-title" className="ov-flow-lane-title">На сдаче</h3>
                  <p className="ov-flow-lane-hint">Финишная прямая и приёмка этапов</p>
                </div>
                <span className="ov-flow-lane-count t-num" aria-label={`${finishing.length} проектов`}>{finishing.length}</span>
              </header>
              <div className="ov-flow-list">
                {finishing.length === 0
                  ? <div className="ov-flow-empty">Нет объектов на сдаче</div>
                  : finishing.map((p) => (
                    <button key={p.id} type="button" className="ov-flow-item ov-flow-item--finish" onClick={() => openProject(p.id)}>
                      <span className="ov-flow-item-body">
                        <span className="ov-flow-item-top">
                          <span className="ov-flow-item-name">{p.client}</span>
                          <span className="ov-flow-item-code t-num">{p.code}</span>
                          <span className="ov-flow-item-pct t-num">{p.pct}%</span>
                        </span>
                        <span className="ov-flow-item-meta">{p.day}</span>
                        <span className="ov-flow-progress" role="progressbar" aria-valuenow={p.pct} aria-valuemin={0} aria-valuemax={100} aria-label={`Готовность ${p.pct} процентов`}>
                          <span className="ov-flow-progress-fill" style={{ width: `${p.pct}%` }} />
                        </span>
                      </span>
                    </button>
                  ))}
              </div>
            </section>
          </div>
        </Card>

        {/* ===== ③ СВОДНАЯ ПО КОМАНДЕ ===== */}
        <Card variant="glass" padding="sm">
          <CardHead title="Сводная по команде" sub="Кто работает · загрузка · ЗП · приёмка"
          action={<Button variant="ghost" size="sm" onClick={() => go('team')}>Команда</Button>} />
          <div className="ov-team-grid">
            <Figure value={`${ts.onShift} / ${ts.total}`} label="На смене сейчас" hint="активные таймшиты" />
            <Figure value={`${fmtCompact(ts.payable)} ₽`} label="ЗП к выплате" hint={`выплачено ${Math.round(ts.payablePaid * 100)}%`} color="var(--primary)" />
          </div>
          <div className="ov-load-row">
            {[['low', ts.load.low], ['mid', ts.load.mid], ['high', ts.load.high], ['off', ts.load.off]].map(([k, v]) =>
            <div key={k} className="ov-load-chip">
                <span style={{ width: 9, height: 9, borderRadius: '50%', background: O.LOAD[k].c }} />
                <span className="t-num" style={{ fontWeight: 700, fontSize: 14 }}>{v}</span>
                <span style={{ fontSize: 11.5, color: 'var(--text-tertiary)' }}>{O.LOAD[k].l}</span>
              </div>
            )}
          </div>
          <div className="ov-team-foot">
            <div className="ov-signal warn"><span><b>{ts.checklistsPending}</b> чек-листа ждут приёмки · дольше всех {ts.checklistsWaitMax} дня</span></div>
            <div className="ov-signal flow"><span><b>{ts.liveChats}</b> прямые линии с клиентом</span></div>
          </div>
        </Card>

        {/* ===== ⑥ ПРОБЛЕМНЫЕ (Требует внимания) ===== */}
        <Card variant="glass" padding="sm" style={{ gridColumn: '1 / -1' }} id="ov-exceptions">
          <CardHead title="Проблемные · требует внимания" sub="Кто · у кого · почему — споры, ошибки, просрочки и неотвеченное"
          action={<Badge tone="danger" dot>{O.EXCEPTIONS.filter((x) => x.severity === 'high').length} критичных</Badge>} />
          <div className="crit-grid">
            {critical.map((x, i) =>
              <div key={i} className="crit-widget">
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="crit-obj">{x.object}</div>
                  <div className="crit-title">{x.title}</div>
                  <div className="crit-foot"><span className="crit-age">висит {x.age}</span><button className="crit-cta" onClick={() => notifyLk({ name: x.owner, ava: initials(x.owner), avaC: x.wc, context: x.title, object: x.object })}>{x.cta}</button></div>
                </div>
              </div>
            )}
          </div>
          <div className="ov-chips">
            <button className={'ov-chip' + (excFilter.size === 0 ? ' on' : '')} onClick={() => setExcFilter(new Set())}>Все · {O.EXCEPTIONS.length}</button>
            {O.EXC_FILTERS.map((c) =>
            <button key={c.id} className={'ov-chip' + (excFilter.has(c.id) ? ' on' : '')} onClick={() => toggleExc(c.id)}>
                <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--text-tertiary)' }} />{c.label}
              </button>
            )}
          </div>
          <div className="ov-exc-list">
            {exc.map((x, i) =>
            <div key={i} className="ov-exc-row">
                <div className="ov-exc-body">
                  <div className="ov-exc-title">{x.title}</div>
                  <div className="ov-exc-meta">
                    <span className="ov-exc-object">{x.object}</span>
                    <span className="ov-exc-asg"><span className="mini-ava" style={{ background: x.wc, width: 17, height: 17, fontSize: 8 }}>{initials(x.owner)}</span>{x.owner}</span>
                    <span className="ov-exc-age">висит {x.age}</span>
                  </div>
                </div>
                <div className="ov-exc-actions">
                  <button type="button" className="ov-notify" title="Послать заметное уведомление в ЛК ответственного"
                onClick={() => notifyLk({ name: x.owner, ava: initials(x.owner), avaC: x.wc, context: x.title, object: x.object })}>
                    Уведомить в ЛК
                  </button>
                  <button type="button" className="ov-exc-cta">{x.cta}</button>
                </div>
              </div>
            )}
            {exc.length === 0 && <div className="ov-empty-sm">Нет проблем по фильтру</div>}
          </div>
        </Card>

        {/* ===== РЕЕСТР СДЕЛОК · акцент на сметах (заменил «Живые объекты») ===== */}
        <Card variant="glass" padding="sm" style={{ gridColumn: '1 / -1', overflow: 'hidden' }}>
          <div className="cl-toolbar cl-toolbar--flat" style={{ flexWrap: 'wrap' }}>
            <div>
              <div className="cl-toolbar-title">Реестр сделок · акцент на сметах</div>
              <div className="cl-toolbar-sub">Дата · клиент · проект · бюджет · расходы · прибыль · статус сметы · менеджер</div>
            </div>
            <div className="period-seg" style={{ marginLeft: 'auto' }}>
              {[['all', 'Всё'], ['week', 'Неделя'], ['month', 'Месяц']].map(([k, l]) =>
                <button key={k} className={dealPeriodF === k ? 'on' : ''} onClick={() => setDealPeriodF(k)}>{l}</button>)}
            </div>
            <Button variant="ghost" size="sm" onClick={() => go('clients')}>Картотека</Button>
          </div>
          <div className="deals-chips">
            <button className={'ov-chip' + (dealStatusF === '' ? ' on' : '')} onClick={() => setDealStatusF('')}>Все статусы</button>
            {Object.entries(dstatus).map(([k, v]) =>
              <button key={k} className={'ov-chip' + (dealStatusF === k ? ' on' : '')} onClick={() => setDealStatusF(dealStatusF === k ? '' : k)}>
                <span style={{ width: 7, height: 7, borderRadius: '50%', background: v.fg }} />{v.l}
              </button>)}
          </div>
          <div className="tbl-scroll">
            <table className="cl-tbl deals-tbl">
              <thead><tr>
                <th>Дата</th><th>Клиент</th><th>Проект</th><th style={{ textAlign: 'right' }}>Бюджет</th><th style={{ textAlign: 'right' }}>Расходы</th><th style={{ textAlign: 'right' }}>Прибыль</th><th>Статус процесса</th><th>Менеджер</th>
              </tr></thead>
              <tbody>
                {dealsFiltered.map((d, i) => {
                  const s = dstatus[d.status];
                  return (
                    <tr key={i} onClick={() => d.projId && openProject(d.projId)} style={{ cursor: d.projId ? 'pointer' : 'default' }}>
                      <td className="t-num" style={{ color: 'var(--text-tertiary)', whiteSpace: 'nowrap' }}>{d.date}</td>
                      <td><div className="cell-person"><span className="mini-ava" style={{ background: d.avaC, width: 28, height: 28, fontSize: 10.5 }}>{d.ava}</span><span className="cell-name">{d.client}</span></div></td>
                      <td style={{ fontSize: 12.5, fontWeight: 600, color: d.projId ? 'var(--foreground)' : 'var(--text-tertiary)' }}>{d.project}</td>
                      <td className="t-num" style={{ textAlign: 'right', fontWeight: 600 }}>{fmtCompact(d.budget)} ₽</td>
                      <td className="t-num" style={{ textAlign: 'right', color: 'var(--text-secondary)' }}>{d.costs != null ? fmtCompact(d.costs) + ' ₽' : '—'}</td>
                      <td className="t-num" style={{ textAlign: 'right', fontWeight: 700, color: d.profit == null ? 'var(--text-tertiary)' : 'var(--foreground)' }}>{d.profit != null ? '≈ ' + fmtCompact(d.profit) + ' ₽' : '—'}</td>
                      <td><Badge bg={s.bg} color={s.fg} dot>{s.l}</Badge></td>
                      <td>{d.manager !== '—' ? <span style={{ fontSize: 12.5 }}>{d.manager}</span> : <span style={{ fontSize: 12.5, color: 'var(--destructive)', fontWeight: 600 }}>в пуле</span>}</td>
                    </tr>);
                })}
                {dealsFiltered.length === 0 && <tr><td colSpan={8} style={{ textAlign: 'center', padding: 28, color: 'var(--text-tertiary)', fontSize: 13 }}>Нет сделок по фильтру</td></tr>}
              </tbody>
              <tfoot>
                <tr className="deals-total">
                  <td colSpan={3}>Итого · {dealsFiltered.length} сделок {dealPeriodF !== 'all' && <span style={{ color: 'var(--text-tertiary)', fontWeight: 500 }}>за {dealPeriodF === 'week' ? 'неделю' : 'месяц'}</span>} · выиграно {dealTotals.won}</td>
                  <td className="t-num" style={{ textAlign: 'right' }}>{fmtCompact(dealTotals.budget)} ₽</td>
                  <td className="t-num" style={{ textAlign: 'right' }}>{fmtCompact(dealTotals.costs)} ₽</td>
                  <td className="t-num" style={{ textAlign: 'right', color: 'var(--foreground)' }}>≈ {fmtCompact(dealTotals.profit)} ₽</td>
                  <td colSpan={2}></td>
                </tr>
              </tfoot>
            </table>
          </div>
        </Card>
      </div>);
  }

  window.Overview = Overview;
  window.opsNotifyLk = notifyLk;
})();