(function () {
  const DS = window.MS7DesignSystem_5d5172;
  /* CSS da camada visual (só tokens) — dashboard, análises, conferência */
  (function () {
    if (document.getElementById('ms7-dash-css')) return;
    const s = document.createElement('style');
    s.id = 'ms7-dash-css';
    s.textContent = [
      '.ms7d-hero-num{display:block;font-size:clamp(34px,4.6vw,44px);font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}',
      '.ms7d-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:4px;padding-top:16px;border-top:1px solid var(--line)}',
      '.ms7d-fact{min-width:0;padding:0 18px}.ms7d-fact:first-child{padding-left:0}.ms7d-fact+.ms7d-fact{border-left:1px solid var(--line)}',
      '.ms7d-fact-v{margin-top:5px;font-size:18px;font-weight:600;letter-spacing:-.03em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}',
      '@media (max-width:520px){.ms7d-facts{grid-template-columns:1fr}.ms7d-fact{padding:10px 0;border-left:0!important;border-top:1px solid var(--border-subtle)}.ms7d-fact:first-child{border-top:0;padding-top:0}}',
      /* flutuantes (tooltip do gráfico): vidro sólido — no claro cai no card */
      '.ms7d-tip{position:absolute;top:6px;padding:8px 12px;border-radius:10px;background:var(--glass-solid,var(--surface-card));backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);box-shadow:var(--shadow-pop);pointer-events:none;white-space:nowrap;animation:ms7-pop 200ms var(--ease-out) both}',
      '.ms7d-tip-d{display:block;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}',
      /* tooltips dos gráficos do DS (bar/line) — eram caixa preta com texto branco */
      '.ms7-chart-bar>div>div>div,.ms7-chart-line>div>div>div{background:var(--glass-solid,var(--surface-card))!important;color:var(--text-primary)!important;backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);box-shadow:var(--shadow-pop);border-radius:9px!important;padding:7px 10px!important;font-size:12px!important;font-variant-numeric:tabular-nums;z-index:2}',
      '.ms7-chart-line svg circle{stroke:var(--surface-page)!important}',
      '.ms7d-list{display:flex;flex-direction:column}',
      '.ms7d-row{display:flex;align-items:center;gap:12px;padding:12px 10px;margin:0 -10px;border-radius:10px;transition:background var(--dur-fast)}',
      '.ms7d-row:hover{background:var(--glass-2,var(--surface-muted))}.ms7d-row.is-click{cursor:pointer}',
      '.ms7d-list>.ms7d-row:not(:last-child){border-bottom:1px solid var(--border-subtle)}',
      '.ms7d-tile{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center}',
      '.ms7d-t{font-size:14px;font-weight:600;letter-spacing:-.005em;line-height:1.3;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
      '.ms7d-s{font-size:12.5px;font-weight:500;color:var(--text-secondary);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
      '.ms7d-val{font-size:13.5px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}',
      '@media (max-width:520px){.ms7d-t,.ms7d-s{white-space:normal}.ms7d-row.has-val{flex-wrap:wrap}.ms7d-row.has-val>.ms7d-val{flex:1 0 100%;padding-left:46px;margin-top:-2px}}',
      '.ms7d-chips{display:flex;flex-wrap:wrap;gap:8px}',
      '.ms7d-chip{display:inline-flex;align-items:center;height:36px;padding:0 14px 0 10px;border-radius:999px;border:1px solid var(--line);background:var(--glass,var(--surface-card));box-shadow:var(--glass-edge,none);transition:border-color var(--dur-fast),background var(--dur-fast),transform var(--dur-base) var(--ease-standard)}',
      '.ms7d-chip:hover{border-color:var(--line-strong);background:var(--glass-2,var(--surface-card));transform:translateY(-1px)}',
      '.ms7d-chip.is-on{border-color:color-mix(in oklab,var(--ms7-green-900) 45%,var(--line));background:color-mix(in oklab,var(--ms7-green-900) 10%,transparent)}',
      '.ms7d-chip .ms7-check{font-size:13.5px;font-weight:600;gap:8px}',
      '.ms7d-pos{width:26px;height:26px;border-radius:8px;background:var(--surface-muted);font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}',
      '.ms7d-pos.is-first{background:var(--ms7-lime-500);color:var(--text-on-lime)}',
      '.ms7d-rede{padding:18px 20px;display:flex;flex-direction:column;gap:12px}',
      '.ms7d-rede-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:12px;border-top:1px solid var(--border-subtle)}',
      '.ms7d-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}',
      '.ms7d-tile-box{padding:14px 16px;border-radius:12px;background:var(--surface-muted)}',
      '.ms7d-form{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}.ms7d-form>.ms7-field{flex:1 1 180px}',
      '.ms7d-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;margin-bottom:12px;border-radius:12px;background:var(--surface-muted)}',
      '.ms7d-legend{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}',
      '.ms7d-legend-bar{width:120px;height:8px;border-radius:4px;background:linear-gradient(90deg,color-mix(in oklab,var(--ms7-green) 10%,var(--surface-muted)),color-mix(in oklab,var(--ms7-green) 55%,var(--surface-card)),var(--ms7-green-900))}',
      '.ms7-chart-heat>div>div>span{font-weight:600!important}',
      '.ms7-chart-heat>div>div:last-child>span:first-child{font-weight:500!important;color:var(--text-secondary)}',
      '.ms7d-grp{display:flex;align-items:center;gap:14px;padding:16px 20px;flex-wrap:wrap}',
      '.ms7d-grp+.ms7d-grp,.ms7d-grp-det+.ms7d-grp{border-top:1px solid var(--border-subtle)}',
      '.ms7d-grp-det{border-top:1px solid var(--border-subtle);padding:2px 8px 6px}',
    ].join('');
    document.head.appendChild(s);
  })();
  const pct = function (v) {
    return (isFinite(v) ? v : 0).toLocaleString('pt-BR', { maximumFractionDigits: 0 }) + '%';
  };
  function comPer(opId, per) {
    return DB.get().coops.filter(function (c) {
      return c.status === 'Concluída' && (!opId || c.opId === opId) && DB.inPeriod(DB.comData(c), per) && DB.fxOk(c);
    });
  }
  function opRows(per) {
    const db = DB.get();
    return db.operadores.filter(function (o) { return !o.arquivado || DB.coopsFor({ opId: o.id, per: per }).length; }).map(function (o) {
      const g = DB.agg(DB.coopsFor({ opId: o.id, per: per }));
      const cc = comPer(o.id, per);
      const gc = DB.agg(cc);
      return Object.assign({ id: o.id, nome: DB.opApres(o.id), ativo: o.ativo }, g, { comC: gc.com, lucroC: gc.lucro, roiC: gc.roi, concl: cc.length });
    });
  }
  function buildAlerts(session) {
    const db = DB.get();
    const out = [];
    const mine = function (c) {
      return session.role !== 'operador' || c.opId === session.opId;
    };
    db.coops
      .filter(function (c) {
        return mine(c) && (c.status === 'Em andamento' || c.status === 'Ativa');
      })
      .forEach(function (c) {
        c.contas
          .filter(function (k) {
            return k.status === 'Bloqueado';
          })
          .forEach(function (k) {
            out.push({
              icon: 'shield-alert',
              tone: 'error',
              title: 'Conta bloqueada: ' + k.usuario,
              sub: DB.coopNome(c) + ' · ' + DB.opApres(c.opId),
              coop: c.id,
            });
          });
      });
    if (session.role !== 'operador' && window.getPixGrupos)
      getPixGrupos().forEach(function (g) {
        const d = g.chaves.filter(function (k) {
          return PIXV.st(k, '').status === 'disponivel';
        }).length;
        if (d <= 1)
          out.push({
            icon: 'key-round',
            tone: 'yellow',
            title: 'Chaves PIX acabando: ' + g.nome,
            sub: d + ' disponível(is) de ' + g.chaves.length,
            page: 'gestao',
          });
      });
    db.coops
      .filter(function (c) {
        return mine(c) && c.status === 'Em andamento' && !c.ciclos && (DB.today - new Date(c.inicio + 'T12:00:00')) / 864e5 >= 3;
      })
      .forEach(function (c) {
        out.push({
          icon: 'clock',
          tone: 'blue',
          title: 'Ciclo sem fechamento: ' + DB.coopNome(c),
          sub: 'Em andamento desde ' + DB.fmtDate(c.inicio),
          coop: c.id,
        });
      });
    return out;
  }
  function AlertNotifier({ session }) {
    DB.useDB();
    const db = DB.get();
    const al = buildAlerts(session).filter(function (a) {
      return a.icon !== 'shield-alert';
    });
    const sig = al
      .map(function (a) {
        return a.title;
      })
      .join('|');
    React.useEffect(
      function () {
        const K = 'ms7op-alertas-vistos';
        const hoje = DB.iso(DB.today);
        let v = {};
        try {
          v = JSON.parse(localStorage.getItem(K) || '{}');
        } catch (e) {}
        if (v._d !== hoje) v = { _d: hoje };
        let ch = false;
        al.forEach(function (a) {
          if (v[a.title]) return;
          v[a.title] = 1;
          ch = true;
          if (window.notifyLocal) notifyLocal({ type: 'alerta', title: a.title, body: a.sub });
        });
        if (ch) localStorage.setItem(K, JSON.stringify(v));
      },
      [sig],
    );
    return null;
  }
  function openCoop(id) {
    localStorage.setItem('ms7op-open-coop', id);
    window.ms7Go('cooperacoes');
  }
  /* tile de ícone tingido (detalhe de cor, nunca card inteiro) */
  const tint = function (c) {
    return 'color-mix(in oklab, ' + c + ' 12%, var(--surface-card))';
  };
  /* título de card com 1 emoji (regra do guia: só em título, antes do texto) */
  const ttl = function (emo, txt) {
    return (
      <React.Fragment>
        <span className="ms7-emo" aria-hidden="true" style={{ marginRight: 8 }}>
          {emo}
        </span>
        {txt}
      </React.Fragment>
    );
  };
  function AlertsCard({ session }) {
    const { Card, Badge } = DS;
    const al = buildAlerts(session);
    return (
      <Card
        title={ttl('🔔', 'Alertas')}
        action={
          al.length ? (
            <Badge size="sm" tone="error">
              {al.length}
            </Badge>
          ) : null
        }
      >
        {al.length ? (
          <div className="ms7d-list">
            {al.slice(0, 6).map(function (a, i) {
              const c = 'var(--ms7-' + (a.tone === 'error' ? 'error' : a.tone === 'yellow' ? 'orange' : 'blue') + ')';
              return (
                <div
                  key={i}
                  className="ms7d-row is-click"
                  onClick={function () {
                    a.coop ? openCoop(a.coop) : window.ms7Go(a.page);
                  }}
                >
                  <span className="ms7d-tile" style={{ background: tint(c), color: c }}>
                    <DS.Icon name={a.icon} size={16} strokeWidth={2} />
                  </span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="ms7d-t">{a.title}</div>
                    <div className="ms7d-s">{a.sub}</div>
                  </div>
                  <DS.Icon name="chevron-right" size={16} color="var(--text-secondary)" />
                </div>
              );
            })}
          </div>
        ) : (
          <Empty art="Bell" compact title="Tudo certo" sub="Nenhum alerta no momento." />
        )}
      </Card>
    );
  }
  function FinHero({ per, op, gC }) {
    const db = DB.get();
    /* cor da linha/área do gráfico: acento (lima no escuro, verde no claro) */
    const LINE = 'var(--ms7-green-900)';
    const notifs = window.useNotifs ? useNotifs() : [];
    const [hv, setHv] = React.useState(null);
    const L = comPer(op || null, per);
    const by = {};
    L.forEach(function (c) {
      const k = DB.comData(c) || '';
      if (!k) return;
      by[k] = (by[k] || 0) + DB.calc(c).lucro;
    });
    const ks = Object.keys(by).sort();
    const vals = ks.map(function (k) {
      return by[k];
    });
    const best = vals.length ? Math.max.apply(null, vals) : 0;
    const media = vals.length
      ? vals.reduce(function (a, b) {
          return a + b;
        }, 0) / vals.length
      : 0;
    const ds = L.reduce(function (a, c) {
        return a + DB.calc(c).ds;
      }, 0),
      sal = L.reduce(function (a, c) {
        return a + (DB.calc(c).sal || 0);
      }, 0);
    const brlS = function (v) {
      return (v > 0 ? '+' : v < 0 ? '-' : '') + MS7.brl(Math.abs(v));
    };
    const col = function (v) {
      return v > 0 ? 'var(--ms7-green)' : v < 0 ? 'var(--ms7-error)' : 'var(--text-primary)';
    };
    const W = 600,
      H = 170,
      P = 8;
    const mx = Math.max(1, Math.max.apply(null, vals.map(Math.abs).concat([1])));
    const y0 = H / 2;
    const pts = vals.map(function (v, i) {
      return [vals.length > 1 ? P + (i * (W - 2 * P)) / (vals.length - 1) : W / 2, y0 - (v / mx) * (H / 2 - P)];
    });
    const line = pts
      .map(function (p, i) {
        return (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1);
      })
      .join(' ');
    const area = pts.length ? line + ' L' + pts[pts.length - 1][0].toFixed(1) + ' ' + y0 + ' L' + pts[0][0].toFixed(1) + ' ' + y0 + ' Z' : '';
    const Lall = db.coops.filter(function (c) {
      return c.status !== 'Lixeira' && (!op || c.opId === op);
    });
    const at = Lall.filter(function (c) {
        return c.status === 'Ativa' || c.status === 'Em andamento';
      }),
      fi = Lall.filter(function (c) {
        return c.status === 'Finalizada';
      });
    const sm = function (l) {
      return l.reduce(function (a, c) {
        return a + DB.calc(c).lucro;
      }, 0);
    };
    const tDep = L.reduce(function (a, c) {
        const k = DB.calc(c);
        return a + k.dep + k.red;
      }, 0),
      tSaq = L.reduce(function (a, c) {
        const k = DB.calc(c);
        return a + k.ds + k.dep + k.red;
      }, 0);
    const comp = [
      ['Saques e baú', tSaq],
      ['Salário', sal],
      ['Depósitos', -tDep],
      ['Comissão dos operadores', -gC.com],
    ];
    const cmx = Math.max(
      1,
      Math.max.apply(
        null,
        comp.map(function (x) {
          return Math.abs(x[1]);
        }),
      ),
    );
    const nTar = window.tarefasPend ? tarefasPend(db, 'admin') : 0;
    const bloq = at.reduce(function (a, c) {
      return (
        a +
        c.contas.filter(function (k) {
          return k.status === 'Bloqueado';
        }).length
      );
    }, 0);
    const acoes = [
      fi.length ? ['flag', 'Cooperações finalizadas aguardando análise', fi.length, 'Revisar', 'cooperacoes'] : null,
      nTar ? ['square-check', 'Tarefas da Gestão para hoje', nTar, 'Abrir', 'tarefas'] : null,
      bloq ? ['shield-alert', 'Contas bloqueadas em cooperações ativas', bloq, 'Ver', 'cooperacoes'] : null,
    ].filter(Boolean);
    const rem = notifs
      .filter(function (n) {
        return n.type === 'ciclo';
      })
      .slice(0, 5);
    const sec = { fontSize: 13.5, fontWeight: 500, color: 'var(--text-secondary)' };
    const num = function (v, size) {
      return { fontSize: size || 14, fontWeight: 600, color: col(v), whiteSpace: 'nowrap' };
    };
    /* ---- direção CRM: curva suave (Catmull-Rom → Bézier) ---- */
    const smooth = function (P) {
      if (P.length < 3) return P.map(function (p, i) { return (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1); }).join(' ');
      let d = 'M' + P[0][0].toFixed(1) + ' ' + P[0][1].toFixed(1);
      for (let i = 0; i < P.length - 1; i++) {
        const p0 = P[i - 1] || P[i], p1 = P[i], p2 = P[i + 1], p3 = P[i + 2] || p2;
        const c1x = p1[0] + (p2[0] - p0[0]) / 6, c1y = p1[1] + (p2[1] - p0[1]) / 6;
        const c2x = p2[0] - (p3[0] - p1[0]) / 6, c2y = p2[1] - (p3[1] - p1[1]) / 6;
        d += ' C' + c1x.toFixed(1) + ' ' + c1y.toFixed(1) + ', ' + c2x.toFixed(1) + ' ' + c2y.toFixed(1) + ', ' + p2[0].toFixed(1) + ' ' + p2[1].toFixed(1);
      }
      return d;
    };
    const CW = 640, CH = 220, CP = 6;
    const vMax = Math.max(0, Math.max.apply(null, vals.concat([0]))), vMin = Math.min(0, Math.min.apply(null, vals.concat([0])));
    const span = Math.max(1, vMax - vMin);
    const yOf = function (v) { return CP + ((vMax - v) / span) * (CH - 2 * CP); };
    const cpts = vals.map(function (v, i) { return [vals.length > 1 ? (i * CW) / (vals.length - 1) : CW / 2, yOf(v)]; });
    const cline = smooth(cpts);
    const carea = cpts.length ? cline + ' L' + cpts[cpts.length - 1][0].toFixed(1) + ' ' + CH + ' L' + cpts[0][0].toFixed(1) + ' ' + CH + ' Z' : '';
    const yMedia = yOf(media), yZero = yOf(0);
    const ticks = [vMax, (vMax + vMin) / 2, vMin].map(function (v) { return [v, yOf(v)]; });
    const kShort = function (v) { const a = Math.abs(v); return (v < 0 ? '-' : '') + 'R$ ' + (a >= 1000 ? (a / 1000).toLocaleString('pt-BR', { maximumFractionDigits: 1 }) + 'k' : Math.round(a)); };
    const xl = ks.length ? [0, Math.floor((ks.length - 1) / 3), Math.floor(((ks.length - 1) * 2) / 3), ks.length - 1].filter(function (v, i, a) { return a.indexOf(v) === i; }) : [];
    const dm = function (k) { return k.split('-').reverse().slice(0, 2).join('/'); };
    const hot = at
      .map(function (c) { return { c: c, k: DB.calc(c) }; })
      .sort(function (a, b) { return Math.abs(b.k.lucro) - Math.abs(a.k.lucro); })
      .slice(0, 4);
    const opNome = function (id) { const o = (db.operadores || []).find(function (x) { return x.id === id; }); return o ? DB.opApres(o.id) : ''; };
    const tileTone = ['is-gray', 'is-gray', 'is-gray', 'is-gray'];
    const abrir = function (c) {
      try { localStorage.setItem('ms7op-open-coop', c.id); } catch (e) {}
      window.ms7Go('geral');
      setTimeout(function () { window.ms7Go('cooperacoes'); }, 30);
    };
    const compCol = ['var(--ms7-lime-500)', 'var(--ms7-sky, var(--ms7-blue))', 'var(--ms7-coral, var(--ms7-error))', 'var(--ms7-rose, var(--ms7-purple))'];
    const IconBtn = function (p) {
      return (
        <button type="button" className="crm-ib" title={p.label} aria-label={p.label} onClick={p.onClick}>
          <DS.Icon name={p.icon} size={16} strokeWidth={1.8} />
        </button>
      );
    };
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
        <div className="crm-row1">
          <section className="ms7-card crm-card">
            <div className="crm-card-h">
              <span className="crm-card-t">Lucro por dia</span>
              <div className="crm-card-a">
                <IconBtn icon="arrow-up-right" label="Abrir análises" onClick={function () { window.ms7Go('analises'); }} />
              </div>
            </div>
            <div className="crm-big">
              <DS.CountUp value={brlS(gC.lucro)} className="crm-big-v ms7-num" />
              <span className="crm-big-s">
                {'lucro das concluídas · '}
                <b>{ks.length}</b>
                {ks.length === 1 ? ' dia com resultado' : ' dias com resultado'}
              </span>
            </div>
            <div className="crm-legend">
              <span><i style={{ background: 'var(--ms7-lime-500)' }} />Lucro do dia</span>
              <span><i className="is-dash" />{'Média · ' + kShort(media)}</span>
              <span><i style={{ background: 'var(--ms7-coral, var(--ms7-error))' }} />{'Melhor dia · ' + kShort(best)}</span>
            </div>
            {vals.length ? (
              <div className="crm-chart">
                <div className="crm-chart-y">
                  {ticks.map(function (t, i) {
                    return <span key={i} style={{ top: (t[1] / CH) * 100 + '%' }}>{kShort(t[0])}</span>;
                  })}
                </div>
                <div className="crm-chart-plot" onMouseLeave={function () { setHv(null); }}>
                  <svg viewBox={'0 0 ' + CW + ' ' + CH} preserveAspectRatio="none" width="100%" height="100%" aria-label="Lucro por dia">
                    <defs>
                      <linearGradient id="crmArea" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stopColor="#C7F25B" stopOpacity=".34" />
                        <stop offset="100%" stopColor="#C7F25B" stopOpacity="0" />
                      </linearGradient>
                    </defs>
                    {vMin < 0 ? <line x1="0" x2={CW} y1={yZero} y2={yZero} stroke="rgba(255,255,255,.12)" strokeWidth="1" vectorEffect="non-scaling-stroke" /> : null}
                    <line className="crm-media" x1="0" x2={CW} y1={yMedia} y2={yMedia} stroke="rgba(243,242,240,.75)" strokeWidth="1.6" strokeDasharray="7 7" vectorEffect="non-scaling-stroke" />
                    <path d={carea} fill="url(#crmArea)" />
                    <path className="crm-line" d={cline} fill="none" stroke="var(--ms7-lime-500)" strokeWidth="2.6" strokeLinecap="round" vectorEffect="non-scaling-stroke" />
                    {hv != null ? <line x1={cpts[hv][0]} x2={cpts[hv][0]} y1="0" y2={CH} stroke="rgba(255,255,255,.25)" strokeWidth="1" vectorEffect="non-scaling-stroke" /> : null}
                    {cpts.map(function (p, i) {
                      return (
                        <rect key={i} x={i ? (cpts[i - 1][0] + p[0]) / 2 : 0} y="0" width={((cpts[i + 1] ? cpts[i + 1][0] : CW) - (i ? cpts[i - 1][0] : 0)) / 2 + 0.5} height={CH} fill="transparent" onMouseEnter={function () { setHv(i); }} />
                      );
                    })}
                  </svg>
                  {hv != null ? <span className="crm-dot" style={{ left: (cpts[hv][0] / CW) * 100 + '%', top: (cpts[hv][1] / CH) * 100 + '%' }} /> : null}
                  {hv != null ? (
                    <div className="crm-tip" style={{ left: Math.min(78, Math.max(0, (cpts[hv][0] / CW) * 100 - 6)) + '%' }}>
                      <span>{dm(ks[hv])}</span>
                      <b className="ms7-num" style={{ color: col(vals[hv]) }}>{brlS(vals[hv])}</b>
                    </div>
                  ) : null}
                </div>
                <div className="crm-chart-x">
                  {xl.map(function (i) {
                    return <span key={i} style={{ left: (cpts[i][0] / CW) * 100 + '%' }}>{dm(ks[i])}</span>;
                  })}
                </div>
              </div>
            ) : (
              <Empty art="Chart" compact title="Sem resultado no período" sub="Quando uma cooperação for concluída, o lucro do dia aparece aqui." />
            )}
          </section>

          <section className="ms7-card crm-card">
            <div className="crm-card-h">
              <span className="crm-card-t">Cooperações em andamento</span>
              <div className="crm-card-a">
                <span className="crm-card-n">{at.length + ' ativas · ' + kShort(sm(at))}</span>
                <IconBtn icon="plus" label="Nova cooperação" onClick={function () { window.ms7Go('cooperacoes'); }} />
                <IconBtn icon="arrow-up-right" label="Ver cooperações" onClick={function () { window.ms7Go('cooperacoes'); }} />
              </div>
            </div>
            {hot.length ? (
              <div className="crm-deals">
                {hot.map(function (x, i) {
                  const c = x.c, k = x.k;
                  const nome = opNome(c.opId);
                  return (
                    <button type="button" key={c.id} className={'ms7-tile crm-deal ' + tileTone[i]} onClick={function () { abrir(c); }}>
                      <span className="crm-deal-top">
                        <span>{c.inicio ? 'Início ' + dm(DB.dIso(c.inicio) || String(c.inicio)) : c.status}</span>
                        <span className="crm-deal-more" aria-hidden="true"><DS.Icon name="more-horizontal" size={15} /></span>
                      </span>
                      <span className="crm-deal-n">{DB.coopNome(c)}</span>
                      <span className="crm-deal-s">{[c.plataforma, c.rede].filter(Boolean).join(' · ') || c.status}</span>
                      <span className="crm-deal-b">
                        <span>
                          <b className="ms7-num" style={{ color: col(k.lucro) }}>{brlS(k.lucro)}</b>
                          <small>{(c.contas || []).length + ' contas · ' + c.status}</small>
                        </span>
                        {nome ? <DS.Avatar name={nome} size={30} /> : null}
                      </span>
                    </button>
                  );
                })}
              </div>
            ) : (
              <Empty art="Coop" compact title="Nenhuma cooperação ativa" sub="As cooperações em andamento aparecem aqui com o resultado parcial." />
            )}
            {fi.length ? (
              <button type="button" className="crm-foot" onClick={function () { window.ms7Go('cooperacoes'); }}>
                <span>{fi.length + (fi.length === 1 ? ' finalizada aguardando análise' : ' finalizadas aguardando análise')}</span>
                <b className="ms7-num" style={{ color: col(sm(fi)) }}>{brlS(sm(fi))}</b>
              </button>
            ) : null}
          </section>
        </div>

        <div className="crm-row2">
          <section className="ms7-card crm-card">
            <div className="crm-card-h">
              <span className="crm-card-t">Composição do lucro</span>
            </div>
            <div className="crm-big is-sm">
              <span className="crm-big-v ms7-num" style={{ color: col(gC.lucro) }}>{brlS(gC.lucro)}</span>
              <span className="crm-big-s">lucro líquido no período</span>
            </div>
            <div className="crm-comp">
              {comp.map(function (x, i) {
                return (
                  <div key={x[0]} className="crm-comp-r">
                    <span className="crm-comp-l"><i style={{ background: compCol[i] }} />{x[0]}</span>
                    <span className="ms7-num crm-comp-v">{brlS(x[1])}</span>
                    <span className="crm-comp-bar"><i style={{ width: Math.max(2, (Math.abs(x[1]) / cmx) * 100) + '%', background: compCol[i] }} /></span>
                  </div>
                );
              })}
            </div>
          </section>

          <section className="ms7-card crm-card">
            <div className="crm-card-h">
              <span className="crm-card-t">Sua próxima ação</span>
              {acoes.length ? <span className="crm-pill is-coral">{acoes.length + (acoes.length === 1 ? ' pendência' : ' pendências')}</span> : null}
            </div>
            {acoes.length ? (
              <div className="crm-list">
                {acoes.map(function (a) {
                  return (
                    <div key={a[1]} className="crm-li">
                      <span className="crm-li-ico"><DS.Icon name={a[0]} size={16} strokeWidth={1.8} /></span>
                      <span className="crm-li-t">{a[1]}</span>
                      <span className="crm-pill is-gray">{a[2]}</span>
                      <button type="button" className="crm-li-b" onClick={function () { window.ms7Go(a[4]); }}>
                        {a[3]}
                        <DS.Icon name="arrow-up-right" size={14} />
                      </button>
                    </div>
                  );
                })}
              </div>
            ) : (
              <Empty art="Tasks" compact title="Nada pendente agora" sub="Cooperações finalizadas, tarefas do dia e contas bloqueadas aparecem aqui." />
            )}
          </section>

          <section className="ms7-card crm-card">
            <div className="crm-card-h">
              <span className="crm-card-t">Últimas remessas</span>
              <IconBtn icon="bell" label="Notificações" onClick={function () { const b = document.querySelector('[aria-label="Notificações"]'); if (b) b.click(); }} />
            </div>
            {rem.length ? (
              <div className="crm-list">
                {rem.map(function (n) {
                  const b = String(n.body || '').split('\n');
                  const r = b.find(function (x) { return /^Resultado/.test(x); }) || '';
                  const quem = (b[0] || '').replace(/^Operador:\s*/, '');
                  return (
                    <div key={n.id} className="crm-li">
                      <DS.Avatar name={quem || '?'} size={34} />
                      <span className="crm-li-t">
                        {n.title}
                        <small>{[quem, n.at].filter(Boolean).join(' · ')}</small>
                      </span>
                      {r ? (
                        <b className="ms7-num crm-li-v" style={{ color: /-R\$|PREJU/i.test(r) ? 'var(--ms7-coral, var(--ms7-error))' : 'var(--ms7-lime-500)' }}>
                          {r.replace(/^Resultado:\s*/, '').replace(/^(LUCRO|PREJUÍZO) de /i, '')}
                        </b>
                      ) : null}
                    </div>
                  );
                })}
              </div>
            ) : (
              <Empty art="Inbox" compact title="Sem remessas ainda" sub="Os ciclos enviados pelos operadores aparecem aqui." />
            )}
          </section>
        </div>
      </div>
    );
  }
  function GeralScreen({ session }) {
    const { Card, DataTable, BarChart, Badge, Avatar, Select } = DS;
    DB.useDB();
    const isOp = session.role === 'operador';
    const [per, setPer] = usePersist('geral-per', '30 dias');
    const [op, setOp] = usePersist('geral-op', '');
    const [rede, setRede] = usePersist('geral-rede', '');
    const [tipo, setTipo] = usePersist('geral-tipo', '');
    DB.setFx({ rede: rede, tipo: tipo });
    React.useEffect(function () { return function () { DB.setFx(null); }; }, []);
    const [apres, setApres0] = React.useState(DB.apresOn());
    const setApres = function (v) { try { localStorage.setItem('ms7op-apres', v ? '1' : '0'); } catch (e) {} setApres0(v); };
    const g = DB.agg(DB.coopsFor({ opId: isOp ? session.opId : op || null, per: per }));
    const gC = DB.agg(comPer(isOp ? session.opId : op || null, per));
    const nAt = DB.coopsFor({ opId: isOp ? session.opId : op || null, per: per }).filter(function (c) {
      return c.status === 'Ativa' || c.status === 'Em andamento' || c.status === 'Finalizada';
    }).length;
    const [det, setDet] = React.useState(null);
    const rows = isOp
      ? []
      : opRows(per)
          .filter(function (r) {
            return !op || r.id === op;
          })
          .sort(function (a, b) {
            return b.lucroC - a.lucroC;
          });
    const kpis = isOp
      ? [
          { icon: 'percent', label: 'Minha comissão', value: MS7.brlK(g.com), tone: 'green' },
          { icon: 'trending-up', label: 'Resultado das contas', value: MS7.brlK(g.res), tone: 'blue', signed: g.res },
          { icon: 'users', label: 'Contas no período', value: g.n, tone: 'yellow' },
          {
            icon: 'shield-alert',
            label: 'Contas bloqueadas',
            value: g.bloq,
            tone: 'orange',
            trend: g.n ? ((g.bloq / g.n) * 100).toLocaleString('pt-BR', { maximumFractionDigits: 1 }) + '%' : null,
            trendTone: 'up-bad',
          },
        ]
      : [
          {
            icon: 'circle-dollar-sign',
            label: gC.lucro >= 0 ? 'Lucro (concluídas)' : 'Prejuízo (concluídas)',
            value: MS7.brlK(gC.lucro),
            tone: 'green',
            signed: gC.lucro,
          },
          { icon: 'trending-up', label: 'ROI (concluídas)', value: pct(gC.roi), tone: 'blue', signed: gC.roi },
          {
            icon: 'shield-alert',
            label: 'Contas bloqueadas',
            value: g.bloq + ' de ' + g.n,
            tone: 'orange',
            trend: g.n ? ((g.bloq / g.n) * 100).toLocaleString('pt-BR', { maximumFractionDigits: 1 }) + '%' : null,
            trendTone: 'up-bad',
          },
          { icon: 'percent', label: 'Comissão (concluídas)', value: MS7.brl(gC.com), tone: 'yellow' },
        ];
    const pctB = g.n ? ((g.bloq / g.n) * 100).toLocaleString('pt-BR', { maximumFractionDigits: 1 }) + '%' : null;
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
        <DS.HeadSlot>
          {isOp ? (
            <React.Fragment>
              <DS.HeadStat icon="percent" value={MS7.brlK(g.com)} label="Minha comissão no período" />
              <DS.HeadStat icon="trending-up" value={MS7.brlK(g.res)} label="Resultado das contas" color={g.res < 0 ? 'var(--ms7-coral)' : null} />
              <DS.HeadStat icon="users" value={String(g.n)} label="Contas no período" badge={g.bloq ? g.bloq + ' bloq.' : null} tone="coral" />
            </React.Fragment>
          ) : (
            <React.Fragment>
              <DS.HeadStat icon="trophy" value={MS7.brlK(gC.lucro)} label={gC.lucro >= 0 ? 'Lucro das concluídas' : 'Prejuízo das concluídas'} badge={'ROI ' + pct(gC.roi)} tone={gC.roi >= 0 ? 'lime' : 'coral'} />
              <DS.HeadStat icon="briefcase" value={String(nAt)} label="Cooperações abertas no período" />
              <DS.HeadStat icon="shield-alert" value={g.bloq + ' de ' + g.n} label="Contas bloqueadas" badge={pctB} tone="coral" />
            </React.Fragment>
          )}
        </DS.HeadSlot>
        <PeriodBar value={per} onChange={setPer}>
          {!isOp ? (
            <Select
              variant="pill"
              value={op}
              onChange={function (e) {
                setOp(e.target.value);
              }}
              options={[{ value: '', label: 'Todos operadores' }].concat(
                DB.get().operadores.filter(function (o) { return !o.arquivado || o.id === op; }).map(function (o) {
                  return { value: o.id, label: DB.opApres(o.id) };
                }),
              )}
            />
          ) : null}
          <Select variant="pill" value={rede} onChange={function (e) { setRede(e.target.value); }} options={[{ value: '', label: 'Todas redes' }].concat((DB.get().redes || []).map(function (r) { return { value: r.nome, label: r.nome }; }))} />
          <Select variant="pill" value={tipo} onChange={function (e) { setTipo(e.target.value); }} options={[{ value: '', label: 'Cooperações e baú' }, { value: 'coop', label: 'Só cooperações' }, { value: 'bau', label: 'Só baú' }]} />
          {!isOp ? (
            <DS.Button size="sm" variant={apres ? 'primary' : 'secondary'} iconLeft={apres ? 'eye-off' : 'eye'} onClick={function () { setApres(!apres); }}>
              {apres ? 'Nomes ocultos' : 'Ocultar nomes'}
            </DS.Button>
          ) : null}
        </PeriodBar>
        {isOp ? <KpiRow items={kpis} /> : <FinHero per={per} op={op} gC={gC} />}
        {isOp ? (
          <Grid min={340}>
            <Card title={ttl('🤝', 'Minhas cooperações no período')}>
              <RankList
                rows={DB.coopsFor({ opId: session.opId, per: per }).map(function (c) {
                  return { nome: DB.coopNome(c), v: DB.calc(c).com };
                })}
                valueKey="v"
              />
            </Card>
            <AlertsCard session={session} />
          </Grid>
        ) : window.ms7SemOp ? (
          (function () {
            const cu = (DB.get().custos || [])
              .filter(function (x) {
                return DB.inPeriod(x.data, per);
              })
              .reduce(function (s, x) {
                return s + (+x.valor || 0);
              }, 0);
            const it = [
              ['Contas feitas', String(g.n), null],
              [
                'Contas bloqueadas',
                g.bloq + (g.n ? ' · ' + ((g.bloq / g.n) * 100).toLocaleString('pt-BR', { maximumFractionDigits: 1 }) + '%' : ''),
                g.bloq ? 'var(--ms7-error)' : null,
              ],
              ['Custos', MS7.brl(cu), null],
              ['Lucro total', MS7.brl(gC.lucro - cu), gC.lucro - cu >= 0 ? 'var(--ms7-green)' : 'var(--ms7-error)'],
            ];
            return (
              <Card title={ttl('📊', 'Resumo do período')}>
                <div className="ms7d-tiles ms7-stagger">
                  {it.map(function (x) {
                    return (
                      <div key={x[0]} className="ms7d-tile-box">
                        <div className="ms7-eyebrow">{x[0]}</div>
                        <div className="ms7-num" style={{ marginTop: 6, fontSize: 22, fontWeight: 600, letterSpacing: '-0.03em', lineHeight: 1.1, color: x[2] || 'var(--text-primary)' }}>
                          {x[1]}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </Card>
            );
          })()
        ) : (
          <Card
            title={ttl('👥', 'Operadores')}
            action={
              <DS.Button
                size="sm"
                variant="outline"
                iconLeft="download"
                onClick={function () {
                  exportCSV(
                    'operadores-' + per.replace(' ', ''),
                    [
                      {
                        label: 'Operador',
                        get: function (r) {
                          return r.nome;
                        },
                      },
                      {
                        label: 'Cooperações',
                        get: function (r) {
                          return r.coops;
                        },
                      },
                      {
                        label: 'Contas',
                        get: function (r) {
                          return r.n;
                        },
                      },
                      {
                        label: 'Bloqueadas',
                        get: function (r) {
                          return r.bloq;
                        },
                      },
                      {
                        label: 'Resultado',
                        get: function (r) {
                          return r.res;
                        },
                      },
                      {
                        label: 'Comissão',
                        get: function (r) {
                          return r.com;
                        },
                      },
                      {
                        label: 'Lucro (concluídas)',
                        get: function (r) {
                          return r.lucroC;
                        },
                      },
                      {
                        label: 'ROI % (concluídas)',
                        get: function (r) {
                          return r.roiC;
                        },
                      },
                    ],
                    rows,
                  );
                }}
              >
                Exportar
              </DS.Button>
            }
          >
            {rows.length ? (
              <div className="ms7-table-wrap">
                <table className="ms7-table" style={{ minWidth: 720 }}>
                  <thead>
                    <tr>
                      <th>Operador</th>
                      <th style={{ textAlign: 'center' }}>Contas</th>
                      <th style={{ textAlign: 'center' }}>Bloqueadas</th>
                      <th style={{ textAlign: 'right' }}>Comissão</th>
                      <th style={{ textAlign: 'right' }}>Lucro</th>
                      <th style={{ width: '22%' }}></th>
                    </tr>
                  </thead>
                  <tbody>
                    {(function () {
                      const mx = Math.max(
                        1,
                        Math.max.apply(
                          null,
                          rows.map(function (o) {
                            return Math.abs(o.lucroC);
                          }),
                        ),
                      );
                      return rows.map(function (o) {
                        return (
                          <tr
                            key={o.id}
                            className="is-click"
                            onClick={function () {
                              setDet(o.id);
                            }}
                          >
                            <td>
                              <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
                                <Avatar name={o.nome} size={30} />
                                <div style={{ minWidth: 0 }}>
                                  <div className="ms7d-t">{o.nome}</div>
                                  <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--text-secondary)' }}>{o.concl + (o.concl === 1 ? ' concluída' : ' concluídas')}</div>
                                </div>
                              </div>
                            </td>
                            <td className="ms7-num" style={{ textAlign: 'center', fontWeight: 600 }}>
                              {o.n}
                            </td>
                            <td style={{ textAlign: 'center' }}>
                              {o.bloq ? (
                                <Badge tone="error" size="sm">
                                  {o.bloq + ' · ' + ((o.bloq / Math.max(1, o.n)) * 100).toLocaleString('pt-BR', { maximumFractionDigits: 1 }) + '%'}
                                </Badge>
                              ) : (
                                <span style={{ color: 'var(--text-secondary)' }}>0</span>
                              )}
                            </td>
                            <td className="ms7-num" style={{ textAlign: 'right', fontWeight: 600 }}>
                              {MS7.brl(o.comC)}
                            </td>
                            <td className="ms7-num" style={{ textAlign: 'right', fontWeight: 600, color: o.lucroC >= 0 ? 'var(--ms7-green)' : 'var(--ms7-error)' }}>
                              {MS7.brl(o.lucroC)}
                            </td>
                            <td>
                              <div className="ms7-bar">
                                <i style={{ width: Math.max(2, Math.round((Math.abs(o.lucroC) / mx) * 100)) + '%', background: o.lucroC >= 0 ? 'var(--ms7-green)' : 'var(--ms7-error)' }}></i>
                              </div>
                            </td>
                          </tr>
                        );
                      });
                    })()}
                  </tbody>
                </table>
              </div>
            ) : (
              <Empty
                art="People"
                title="Nenhum operador"
                sub="Cadastre operadores em Gestão → Operadores."
                action={
                  <DS.Button
                    variant="brand"
                    iconLeft="user-plus"
                    onClick={function () {
                      window.ms7Go('gestao');
                    }}
                  >
                    Cadastrar operador
                  </DS.Button>
                }
              />
            )}
          </Card>
        )}

        {det
          ? (function () {
              const l = comPer(det, per);
              const tot = l.reduce(function (a, c) {
                return a + DB.calc(c).com;
              }, 0);
              return (
                <DS.Modal
                  open={true}
                  onClose={function () {
                    setDet(null);
                  }}
                  title={'Comissão de ' + DB.opApres(det)}
                  subtitle={
                    (DB.perLabel ? DB.perLabel(per) : per) + ' · ' + l.length + (l.length === 1 ? ' cooperação concluída' : ' cooperações concluídas') + ' · total ' + MS7.brl(tot)
                  }
                  footer={
                    <React.Fragment>
                      <DS.Button
                        variant="secondary"
                        onClick={function () {
                          setDet(null);
                        }}
                      >
                        Fechar
                      </DS.Button>
                      <DS.Button
                        variant="brand"
                        iconLeft="banknote"
                        onClick={function () {
                          setDet(null);
                          window.ms7Go('financeiro');
                        }}
                      >
                        Ver pagamentos
                      </DS.Button>
                    </React.Fragment>
                  }
                >
                  <div className="ms7d-list">
                    {l.map(function (c) {
                      const k = DB.calc(c);
                      return (
                        <div key={c.id} className="ms7d-row">
                          <div style={{ flex: 1, minWidth: 0 }}>
                            <div className="ms7d-t">{DB.coopNome(c)}</div>
                            <div className="ms7d-s">{'Finalizada em ' + DB.fmtDate(DB.comData(c)) + ' · ' + DB.comText(c)}</div>
                          </div>
                          <span className="ms7-num" style={{ fontSize: 14, fontWeight: 600, whiteSpace: 'nowrap' }}>
                            {MS7.brl(k.com)}
                          </span>
                        </div>
                      );
                    })}
                    {!l.length ? <Empty art="Coop" compact title="Nenhuma cooperação neste período" sub="As cooperações concluídas do operador aparecem aqui com a comissão de cada uma." /> : null}
                  </div>
                </DS.Modal>
              );
            })()
          : null}
      </div>
    );
  }
  function ComparacaoScreen() {
    const { Card, Checkbox, BarChart, DataTable, Badge } = DS;
    DB.useDB();
    const O = DB.get().operadores;
    const [per, setPer] = usePersist('comp-per', '30 dias');
    const [sel, setSel] = usePersist(
      'comp-sel',
      O.slice(0, 4).map(function (o) {
        return o.id;
      }),
    );
    const rows = opRows(per)
      .filter(function (o) {
        return sel.indexOf(o.id) >= 0;
      })
      .sort(function (a, b) {
        return b.lucro - a.lucro;
      });
    const s = function (k) {
      return rows.reduce(function (a, o) {
        return a + o[k];
      }, 0);
    };
    function tog(id) {
      setSel(
        sel.indexOf(id) >= 0
          ? sel.filter(function (x) {
              return x !== id;
            })
          : sel.concat([id]),
      );
    }
    const d = function (k, div) {
      return rows.map(function (o) {
        return { label: o.nome.split(' ')[0], values: [Math.max(0, div ? Math.round((o[k] / div) * 10) / 10 : o[k])] };
      });
    };
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        <PeriodBar value={per} onChange={setPer} />
        <KpiRow
          items={[
            { icon: 'circle-dollar-sign', label: 'Lucro líquido', value: MS7.brlK(s('lucro')), tone: 'green', signed: s('lucro') },
            { icon: 'percent', label: 'Comissão total', value: MS7.brlK(s('com')), tone: 'yellow' },
            { icon: 'users', label: 'Operadores', value: rows.length, tone: 'blue' },
            { icon: 'circle-check', label: 'Coops concluídas', value: s('concluidas'), tone: 'orange' },
          ]}
        />
        <Card
          title={ttl('👥', 'Operadores')}
          subtitle={'Marque os operadores que deseja comparar · ' + sel.length + ' de ' + O.length + ' selecionados'}
          action={
            <div style={{ display: 'flex', gap: 6 }}>
              <DS.Button
                size="sm"
                variant={sel.length === O.length ? 'brand' : 'secondary'}
                iconLeft="check-check"
                onClick={function () {
                  setSel(
                    O.map(function (o) {
                      return o.id;
                    }),
                  );
                }}
              >
                {'Todos (' + O.length + ')'}
              </DS.Button>
              <DS.Button
                size="sm"
                variant="ghost"
                disabled={!sel.length}
                onClick={function () {
                  setSel([]);
                }}
              >
                Limpar
              </DS.Button>
            </div>
          }
        >
          <div className="ms7d-chips">
            {O.map(function (o) {
              const on = sel.indexOf(o.id) >= 0;
              return (
                <div key={o.id} className={'ms7d-chip' + (on ? ' is-on' : '')}>
                  <Checkbox
                    label={DB.opApres(o.id)}
                    checked={on}
                    onChange={function () {
                      tog(o.id);
                    }}
                  />
                </div>
              );
            })}
          </div>
        </Card>
        {rows.length === 0 ? (
          <Card>
            <Empty art="People" title="Nenhum operador selecionado" sub="Marque ao menos um operador acima para ver a comparação." />
          </Card>
        ) : (
          <React.Fragment>
            <Grid min={300}>
              <Card title="Lucro líquido (mil R$)">
                <BarChart height={200} data={d('lucro', 1000)} series={[{ name: 'Lucro', color: 'var(--chart-1)' }]} />
              </Card>
              <Card title="Comissão (mil R$)">
                <BarChart height={200} data={d('com', 1000)} series={[{ name: 'Comissão', color: 'var(--chart-2)' }]} />
              </Card>
            </Grid>
            <Card title={ttl('🏆', 'Comparação ranqueada')} reveal>
              <DataTable
                rows={rows.map(function (o, i) {
                  return Object.assign({ pos: i + 1 }, o);
                })}
                columns={[
                  {
                    key: 'pos',
                    label: '#',
                    width: 44,
                    render: function (r) {
                      return <span className={'ms7d-pos' + (r.pos === 1 ? ' is-first' : '')}>{String(r.pos).padStart(2, '0')}</span>;
                    },
                  },
                  {
                    key: 'nome',
                    label: 'Operador',
                    render: function (r) {
                      return (
                        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                          <DS.Avatar name={r.nome} size={30} />
                          <span style={{ fontWeight: 600 }}>{r.nome}</span>
                        </span>
                      );
                    },
                  },
                  { key: 'coops', label: 'Coops', align: 'center' },
                  { key: 'n', label: 'Contas', align: 'center' },
                  {
                    key: 'lucro',
                    label: 'Lucro líquido',
                    align: 'right',
                    render: function (r) {
                      return <Money v={r.lucro} signed />;
                    },
                  },
                  {
                    key: 'com',
                    label: 'Comissão',
                    align: 'right',
                    render: function (r) {
                      return <span className="ms7-num">{MS7.brl(r.com)}</span>;
                    },
                  },
                  {
                    key: 'roi',
                    label: 'ROI',
                    align: 'right',
                    render: function (r) {
                      return (
                        <span className="ms7-num" style={{ fontWeight: 600 }}>
                          {pct(r.roi)}
                        </span>
                      );
                    },
                  },
                  {
                    key: 'b',
                    label: '',
                    align: 'center',
                    render: function (r) {
                      return r.pos === 1 && r.coops ? (
                        <Badge tone="lime" size="sm">
                          Líder
                        </Badge>
                      ) : null;
                    },
                  },
                ]}
              />
            </Card>
          </React.Fragment>
        )}
      </div>
    );
  }
  function RedesScreen() {
    const { Card, BarChart } = DS;
    DB.useDB();
    const [per, setPer] = usePersist('redes-per', '30 dias');
    const R = DB.get()
      .redes.map(function (r) {
        const g = DB.agg(
          DB.coopsFor({ per: per }).filter(function (c) {
            return c.rede === r.nome;
          }),
        );
        return Object.assign({ nome: r.nome }, g);
      })
      .filter(function (r) {
        return r.coops;
      })
      .sort(function (a, b) {
        return b.lucro - a.lucro;
      });
    const s = function (k) {
      return R.reduce(function (a, o) {
        return a + o[k];
      }, 0);
    };
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        <PeriodBar value={per} onChange={setPer} />
        <KpiRow
          items={[
            { icon: 'network', label: 'Redes com operação', value: R.length, tone: 'blue' },
            { icon: 'circle-dollar-sign', label: 'Lucro líquido', value: MS7.brlK(s('lucro')), tone: 'green', signed: s('lucro') },
            { icon: 'users', label: 'Contas', value: s('n'), tone: 'yellow' },
            { icon: 'shield-alert', label: 'Contas bloqueadas', value: s('bloq'), tone: 'orange' },
          ]}
        />
        {R.length ? (
          <React.Fragment>
            <Card title="Lucro líquido por rede (mil R$)">
              <BarChart
                height={240}
                data={R.map(function (r) {
                  return { label: r.nome.replace('Rede ', ''), values: [Math.max(0, Math.round(r.lucro / 100) / 10)] };
                })}
                series={[{ name: 'Lucro (mil R$)', color: 'var(--chart-1)' }]}
              />
            </Card>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600, letterSpacing: '-0.015em', lineHeight: 1.25 }}>{ttl('🌐', 'Redes')}</h3>
                <DS.CountDot tone="muted">{R.length}</DS.CountDot>
              </div>
              <div className="ms7-stagger" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(230px,1fr))', gap: 16 }}>
                {R.map(function (r) {
                  return (
                    <section key={r.nome} className="ms7-card ms7d-rede">
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
                        <span className="ms7d-tile" style={{ width: 30, height: 30, borderRadius: 9, background: tint('var(--ms7-green-900)'), color: 'var(--ms7-green-900)' }}>
                          <DS.Icon name="network" size={15} strokeWidth={2} />
                        </span>
                        <span className="ms7d-t" style={{ fontSize: 15 }}>
                          {r.nome}
                        </span>
                      </div>
                      <div>
                        <div className="ms7-eyebrow">Lucro líquido</div>
                        <div className="ms7-num" style={{ marginTop: 4, fontSize: 20, fontWeight: 600, letterSpacing: '-0.03em', lineHeight: 1.1, color: r.lucro >= 0 ? 'var(--ms7-green)' : 'var(--ms7-error)' }}>
                          {MS7.brl(r.lucro)}
                        </div>
                      </div>
                      <div className="ms7d-rede-facts">
                        {[
                          ['Coops', r.coops],
                          ['Contas', r.n],
                          ['ROI', pct(r.roi)],
                        ].map(function (x) {
                          return (
                            <div key={x[0]} style={{ minWidth: 0 }}>
                              <div className="ms7-eyebrow">{x[0]}</div>
                              <div className="ms7-num" style={{ marginTop: 3, fontSize: 14, fontWeight: 600 }}>
                                {x[1]}
                              </div>
                            </div>
                          );
                        })}
                      </div>
                    </section>
                  );
                })}
              </div>
            </div>
          </React.Fragment>
        ) : (
          <Card>
            <Empty art="Globe" title="Sem operações neste período" sub="As redes aparecem aqui assim que tiverem cooperações no período escolhido." />
          </Card>
        )}
      </div>
    );
  }
  Object.assign(window, {
    AlertNotifier: AlertNotifier,
    GeralScreen: GeralScreen,
    ComparacaoScreen: ComparacaoScreen,
    RedesScreen: RedesScreen,
    buildAlerts: buildAlerts,
  });
})();