/* JRN — Admin: Dashboards, Empresas e Log de auditoria */

/* ---------- Modal: cadastro / edição de dashboard ---------- */
function DashboardFormModal({ dash, onClose, onSave, empresas }) {
  const isEdit = !!dash;
  const defaultCompany = (empresas && empresas[0]) ? empresas[0].id : 'jrn';
  const [f, setF] = useState(dash
    ? { nome: dash.nome, companyId: dash.companyId, categoria: dash.categoria, embedUrl: dash.embedUrl, status: dash.status, id: dash.id, _dbId: dash._dbId, _companyDbId: dash._companyDbId }
    : { nome: '', companyId: defaultCompany, categoria: 'Financeiro', embedUrl: '', status: 'ativo' });
  const [saving, setSaving] = useState(false);
  const [err, setErr] = useState('');
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const valid = f.nome.trim() && f.companyId;
  const company = (empresas || []).find(c => c.id === f.companyId) || {};

  const handleSave = async () => {
    setSaving(true);
    setErr('');
    try {
      await onSave(f);
    } catch (e) {
      setErr(e.message || 'Erro ao salvar dashboard.');
      setSaving(false);
    }
  };

  return (
    <Modal
      title={isEdit ? 'Editar dashboard' : 'Cadastrar dashboard'}
      sub="Vincule um relatório do Power BI a uma empresa do grupo."
      onClose={onClose} width={600}
      footer={<React.Fragment>
        <Btn variant="ghost" onClick={onClose}>Cancelar</Btn>
        <Btn icon="check" disabled={!valid || saving} onClick={handleSave}>
          {saving ? <Icons.refresh className="spin" size={14} /> : null}
          {isEdit ? 'Salvar' : 'Cadastrar dashboard'}
        </Btn>
      </React.Fragment>}>
      {err && <div style={{ marginBottom: 14, padding: '10px 13px', background: 'var(--danger-soft)', color: 'var(--danger)', borderRadius: 8, fontSize: 13 }}>{err}</div>}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <Field label="Nome do dashboard" full>
          <TextInput value={f.nome} onChange={e => set('nome', e.target.value)} placeholder="Ex.: Faturamento Mensal" />
        </Field>
        <Field label="Empresa">
          <Select value={f.companyId} onChange={e => set('companyId', e.target.value)}>
            {(empresas || []).map(c => <option key={c.id} value={c.id}>{c.nome}</option>)}
          </Select>
        </Field>
        <Field label="Categoria">
          <Select value={f.categoria} onChange={e => set('categoria', e.target.value)}>
            {CATEGORIAS.map(c => <option key={c} value={c}>{c}</option>)}
          </Select>
        </Field>
        <Field label="URL de incorporação (Power BI)" full hint="Cole o link de embed do relatório (Publicar na web / Embed).">
          <TextInput value={f.embedUrl} onChange={e => set('embedUrl', e.target.value)}
            placeholder="https://app.powerbi.com/reportEmbed?reportId=..." />
        </Field>
        <Field label="Status">
          <Select value={f.status} onChange={e => set('status', e.target.value)}>
            <option value="ativo">Ativo</option>
            <option value="manutencao">Em manutenção</option>
            <option value="inativo">Inativo</option>
          </Select>
        </Field>
        <Field label="Pré-visualização">
          {company.cor ? (
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px', border: '1px solid var(--line)', borderRadius: 8, background: company.corSoft || '#f5f5f5' }}>
              <CompanyMark company={company} size={30} />
              <span style={{ fontSize: 12.5, fontWeight: 600, color: company.cor }}>{company.nome}</span>
            </div>
          ) : (
            <div style={{ padding: '8px 12px', border: '1px solid var(--line)', borderRadius: 8, fontSize: 12.5, color: 'var(--muted)' }}>Selecione uma empresa</div>
          )}
        </Field>
      </div>
    </Modal>
  );
}

/* ---------- Página: dashboards ---------- */
function DashboardsAdmin({ empresas, toast }) {
  const [dashboards, setDashboards] = useState([]);
  const [loading, setLoading] = useState(true);
  const [q, setQ] = useState('');
  const [comp, setComp] = useState('todas');
  const [modal, setModal] = useState(null);

  const loadDashboards = () => {
    setLoading(true);
    apiDashboardsGet().then(setDashboards)
      .catch(() => toast('Erro ao carregar dashboards.', 'danger'))
      .finally(() => setLoading(false));
  };

  useEffect(loadDashboards, []);

  const filtered = dashboards.filter(d =>
    (comp === 'todas' || d.companyId === comp) &&
    d.nome.toLowerCase().includes(q.toLowerCase())
  );

  const save = async (f) => {
    if (f._dbId) {
      await apiDashboardsUpdate(f, empresas);
      toast('Dashboard atualizado.');
    } else {
      await apiDashboardsCreate(f, empresas);
      toast('Dashboard cadastrado.');
    }
    setModal(null);
    loadDashboards();
  };

  const remove = async (d) => {
    if (!confirm(`Remover "${d.nome}"?`)) return;
    try {
      await apiDashboardsDelete(d);
      toast('Dashboard removido.', 'danger');
      loadDashboards();
    } catch (e) {
      toast(e.message || 'Erro ao remover.', 'danger');
    }
  };

  return (
    <div className="fade-in">
      <PageHead kicker="Administração" title="Dashboards"
        sub="Cadastre e organize os painéis do Power BI vinculados a cada empresa do grupo."
        actions={<Btn icon="plus" onClick={() => setModal({})}>Novo dashboard</Btn>} />

      <div className="card">
        <div style={{ display: 'flex', gap: 12, padding: '14px 16px', borderBottom: '1px solid var(--line-2)', flexWrap: 'wrap' }}>
          <div style={{ position: 'relative', flex: 1, minWidth: 220 }}>
            <Icons.search size={16} style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: 'var(--muted)' }} />
            <input className="input" style={{ paddingLeft: 36 }} placeholder="Buscar dashboard…" value={q} onChange={e => setQ(e.target.value)} />
          </div>
          <div style={{ width: 220 }}>
            <Select value={comp} onChange={e => setComp(e.target.value)}>
              <option value="todas">Todas as empresas</option>
              {(empresas || []).map(c => <option key={c.id} value={c.id}>{c.nome}</option>)}
            </Select>
          </div>
        </div>

        {loading ? (
          <div style={{ textAlign: 'center', padding: 48 }}>
            <Icons.refresh className="spin" size={22} style={{ color: 'var(--muted)' }} />
          </div>
        ) : (
          <React.Fragment>
            <table className="tbl">
              <thead><tr><th>Dashboard</th><th>Empresa</th><th>Categoria</th><th>Atualização</th><th>Status</th><th></th></tr></thead>
              <tbody>
                {filtered.map(d => {
                  const c = (empresas || []).find(x => x.id === d.companyId)
                    || COMPANIES.find(x => x.id === d.companyId)
                    || { cor: '#aaa', corSoft: '#f5f5f5', nome: d.companyId, logo: '' };
                  return (
                    <tr key={d.id}>
                      <td>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
                          <span style={{ width: 32, height: 32, borderRadius: 8, background: c.corSoft, color: c.cor, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                            <Icons.chart size={16} />
                          </span>
                          <span>
                            <span style={{ display: 'block', fontWeight: 600, color: 'var(--ink)' }}>{d.nome}</span>
                            {d.embedUrl && <span className="mono" style={{ fontSize: 10.5, color: 'var(--muted-2)' }}>{d.embedUrl.slice(0, 44)}…</span>}
                          </span>
                        </div>
                      </td>
                      <td>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                          <CompanyMark company={c} size={24} />
                          <span style={{ fontSize: 13 }}>{c.nome}</span>
                        </div>
                      </td>
                      <td><span className="badge badge-neutral">{d.categoria}</span></td>
                      <td className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>
                        {d.atualizacao ? d.atualizacao.split('-').reverse().join('/') : '—'}
                      </td>
                      <td><StatusBadge status={d.status} /></td>
                      <td>
                        <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
                          <button title="Editar" onClick={() => setModal(d)}
                            className="btn btn-ghost btn-sm" style={{ padding: 8, border: '1px solid var(--line)' }}>
                            <Icons.edit size={16} />
                          </button>
                          <button title="Remover" onClick={() => remove(d)}
                            className="btn btn-danger btn-sm" style={{ padding: 8 }}>
                            <Icons.trash size={16} />
                          </button>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
            {filtered.length === 0 && <Empty icon="chart" title="Nenhum dashboard encontrado" sub="Cadastre um novo painel ou ajuste o filtro." />}
          </React.Fragment>
        )}
      </div>

      {modal !== null && (
        <DashboardFormModal
          dash={modal && modal._dbId ? modal : null}
          onClose={() => setModal(null)}
          onSave={save}
          empresas={empresas}
        />
      )}
    </div>
  );
}

/* ---------- Modal: cadastro / edição de empresa ---------- */
function EmpresaFormModal({ empresa, onClose, onSave }) {
  const isEdit = !!empresa;
  const [f, setF] = useState(empresa
    ? { nome: empresa.nome, slug: empresa.slug, tipo: empresa.tipo, setor: empresa.setor, cor_hex: empresa.cor_hex, logo_path: empresa.logo_path, ativo: empresa.ativo, _dbId: empresa._dbId }
    : { nome: '', slug: '', tipo: '', setor: '', cor_hex: '#15233f', logo_path: '', ativo: true });
  const [saving, setSaving] = useState(false);
  const [savingStep, setSavingStep] = useState('');
  const [err, setErr] = useState('');
  const [logoFile, setLogoFile] = useState(null);
  const [logoPreview, setLogoPreview] = useState(null);
  const fileInputRef = React.useRef(null);
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const valid = f.nome.trim() && f.slug.trim();

  // Auto-gera slug a partir do nome (só na criação)
  const handleNome = (v) => {
    set('nome', v);
    if (!isEdit) {
      const slug = v.toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, '').replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
      set('slug', slug);
    }
  };

  const handleFileChange = (e) => {
    const file = e.target.files && e.target.files[0];
    if (!file) return;
    if (logoPreview) URL.revokeObjectURL(logoPreview);
    setLogoFile(file);
    setLogoPreview(URL.createObjectURL(file));
  };

  const clearFile = () => {
    if (logoPreview) URL.revokeObjectURL(logoPreview);
    setLogoFile(null);
    setLogoPreview(null);
    if (fileInputRef.current) fileInputRef.current.value = '';
  };

  const handleSave = async () => {
    setSaving(true); setErr('');
    try {
      if (isEdit) {
        setSavingStep('Salvando dados…');
        await apiEmpresasUpdate(f);
        if (logoFile) {
          setSavingStep('Enviando logo…');
          await apiEmpresasUploadLogo(f._dbId, logoFile);
        }
      } else {
        setSavingStep('Cadastrando empresa…');
        const result = await apiEmpresasCreate(f);
        if (logoFile && result.id) {
          setSavingStep('Enviando logo…');
          await apiEmpresasUploadLogo(result.id, logoFile);
        }
      }
      onSave();
    } catch (e) {
      setErr(e.message || 'Erro ao salvar.');
      setSaving(false);
      setSavingStep('');
    }
  };

  // Exibe o logo atual ou a prévia do arquivo selecionado
  const currentLogo = logoPreview || (f.logo_path ? f.logo_path : null);

  return (
    <Modal
      title={isEdit ? 'Editar empresa' : 'Cadastrar empresa'}
      sub={isEdit ? 'Atualize os dados da empresa.' : 'Adicione uma nova empresa ao grupo JRN.'}
      onClose={onClose} width={560}
      footer={<React.Fragment>
        <Btn variant="ghost" onClick={onClose} disabled={saving}>Cancelar</Btn>
        <Btn icon="check" disabled={!valid || saving} onClick={handleSave}>
          {saving
            ? <React.Fragment><Icons.refresh className="spin" size={14} />{savingStep}</React.Fragment>
            : (isEdit ? 'Salvar alterações' : 'Cadastrar empresa')}
        </Btn>
      </React.Fragment>}>
      {err && <div style={{ marginBottom: 14, padding: '10px 13px', background: 'var(--danger-soft)', color: 'var(--danger)', borderRadius: 8, fontSize: 13 }}>{err}</div>}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <Field label="Nome da empresa" full>
          <TextInput value={f.nome} onChange={e => handleNome(e.target.value)} placeholder="Ex.: Horizon Media" />
        </Field>
        <Field label="Slug (identificador único)" hint={isEdit ? 'Não pode ser alterado após criação.' : 'Gerado automaticamente. Apenas letras, números e hífens.'}>
          <TextInput value={f.slug} onChange={e => set('slug', e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))} placeholder="ex.: horizon" disabled={isEdit} />
        </Field>
        <Field label="Tipo">
          <TextInput value={f.tipo} onChange={e => set('tipo', e.target.value)} placeholder="Ex.: Mídia & Publicidade" />
        </Field>
        <Field label="Setor">
          <TextInput value={f.setor} onChange={e => set('setor', e.target.value)} placeholder="Ex.: Comunicação" />
        </Field>
        <Field label="Cor da marca">
          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            <input type="color" value={f.cor_hex} onChange={e => set('cor_hex', e.target.value)}
              style={{ width: 42, height: 38, padding: 3, border: '1px solid var(--line)', borderRadius: 8, cursor: 'pointer', background: '#fff' }} />
            <TextInput value={f.cor_hex} onChange={e => set('cor_hex', e.target.value)} placeholder="#15233f" style={{ flex: 1 }} />
          </div>
        </Field>
        <Field label="Logo" hint={logoFile ? logoFile.name : (f.logo_path || 'PNG, JPG, SVG ou WebP')}>
          <input ref={fileInputRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={handleFileChange} />
          <div
            onClick={() => !saving && fileInputRef.current && fileInputRef.current.click()}
            style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '9px 13px', border: '1px dashed var(--line)', borderRadius: 9,
              cursor: saving ? 'default' : 'pointer', background: 'var(--surface-2)',
              transition: 'border-color .15s',
            }}
            onMouseEnter={e => { if (!saving) e.currentTarget.style.borderColor = 'var(--navy-400)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--line)'; }}>
            {currentLogo ? (
              <img src={currentLogo} alt="logo"
                style={{ height: 34, width: 34, objectFit: 'contain', borderRadius: 6, border: '1px solid var(--line)', background: '#fff', padding: 2 }} />
            ) : (
              <div style={{ height: 34, width: 34, borderRadius: 6, border: '1px solid var(--line)', background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icons.image size={18} style={{ color: 'var(--muted)' }} />
              </div>
            )}
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: logoFile ? 'var(--ink)' : 'var(--navy-700)' }}>
                {logoFile ? logoFile.name : 'Clique para anexar logo'}
              </div>
              {logoFile && (
                <div style={{ fontSize: 11.5, color: 'var(--muted)', marginTop: 1 }}>
                  {(logoFile.size / 1024).toFixed(0)} KB
                </div>
              )}
            </div>
            {logoFile && (
              <button type="button" onClick={e => { e.stopPropagation(); clearFile(); }}
                style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4, color: 'var(--muted)' }}>
                <Icons.x size={15} />
              </button>
            )}
          </div>
        </Field>
        {isEdit && (
          <Field label="Status" full>
            <label style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer', padding: '10px 13px', border: '1px solid var(--line)', borderRadius: 9, background: f.ativo ? 'var(--ok-soft)' : 'var(--surface-2)' }}>
              <Switch on={f.ativo} onChange={v => set('ativo', v)} accent="var(--ok)" />
              <span style={{ fontSize: 13, fontWeight: 600, color: f.ativo ? 'var(--ok)' : 'var(--muted)' }}>
                {f.ativo ? 'Empresa ativa' : 'Empresa inativa'}
              </span>
            </label>
          </Field>
        )}
      </div>
    </Modal>
  );
}

/* ---------- Página: empresas ---------- */
function CompaniesAdmin() {
  const [empresas, setEmpresas] = useState([]);
  const [loading, setLoading] = useState(true);
  const [modal, setModal] = useState(null); // null | {} (nova) | empresa (editar)

  const load = () => {
    setLoading(true);
    apiEmpresasGet().then(setEmpresas).finally(() => setLoading(false));
  };

  useEffect(load, []);

  const save = () => {
    setModal(null);
    load();
  };

  const toggleAtivo = async (c) => {
    await apiEmpresasUpdate({ ...c, ativo: !c.ativo });
    load();
  };

  const remove = async (c) => {
    if (!confirm(`Remover "${c.nome}"? Esta ação removerá também todos os dashboards vinculados.`)) return;
    try {
      await apiEmpresasDelete(c);
      load();
    } catch (e) {
      alert(e.message || 'Erro ao remover empresa.');
    }
  };

  if (loading) {
    return (
      <div className="fade-in">
        <PageHead kicker="Administração" title="Empresas do grupo" />
        <div style={{ textAlign: 'center', padding: 48 }}>
          <Icons.refresh className="spin" size={22} style={{ color: 'var(--muted)' }} />
        </div>
      </div>
    );
  }

  return (
    <div className="fade-in">
      <PageHead kicker="Administração" title="Empresas do grupo"
        sub="Gerencie as empresas controladas pela JRN S/A e seus painéis de indicadores."
        actions={<Btn icon="plus" onClick={() => setModal({})}>Nova empresa</Btn>} />

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(290px,1fr))', gap: 18 }}>
        {empresas.map(c => (
          <div key={c.id} className="card" style={{ overflow: 'hidden', opacity: c.ativo ? 1 : .6 }}>
            <div style={{ height: 4, background: c.cor }}></div>
            <div style={{ padding: '20px 20px' }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8 }}>
                <CompanyMark company={c} size={50} ring />
                <div style={{ display: 'flex', gap: 5 }}>
                  {!c.ativo && <span className="badge badge-neutral" style={{ fontSize: 10.5 }}>Inativa</span>}
                  {c.setor && <span className="badge badge-neutral" style={{ background: c.corSoft, color: c.cor, fontSize: 10.5 }}>{c.setor}</span>}
                </div>
              </div>
              <h3 style={{ fontSize: 18, marginTop: 15 }}>{c.nome}</h3>
              <div style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 3 }}>{c.tipo}</div>
              <div style={{ display: 'flex', gap: 24, marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--line-2)' }}>
                <div>
                  <div style={{ fontFamily: 'var(--font-head)', fontSize: 22, fontWeight: 700 }}>{c.qtdDashboards}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>painéis</div>
                </div>
                <div>
                  <div style={{ fontFamily: 'var(--font-head)', fontSize: 22, fontWeight: 700 }}>{c.qtdUsuarios}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>com acesso</div>
                </div>
                <div style={{ marginLeft: 'auto', display: 'flex', gap: 6, alignItems: 'center' }}>
                  <button title={c.ativo ? 'Desativar' : 'Ativar'} onClick={() => toggleAtivo(c)}
                    className="btn btn-ghost btn-sm" style={{ padding: 7, border: '1px solid var(--line)' }}>
                    {c.ativo
                      ? <Icons.eyeOff size={15} style={{ color: 'var(--warn)' }} />
                      : <Icons.eye size={15} style={{ color: 'var(--ok)' }} />}
                  </button>
                  <button title="Editar" onClick={() => setModal(c)}
                    className="btn btn-ghost btn-sm" style={{ padding: 7, border: '1px solid var(--line)' }}>
                    <Icons.edit size={15} />
                  </button>
                  <button title="Remover" onClick={() => remove(c)}
                    className="btn btn-danger btn-sm" style={{ padding: 7 }}>
                    <Icons.trash size={15} />
                  </button>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {empresas.length === 0 && (
        <div className="card" style={{ padding: 20 }}>
          <Empty icon="building" title="Nenhuma empresa cadastrada" sub="Cadastre a primeira empresa do grupo." />
        </div>
      )}

      {modal !== null && (
        <EmpresaFormModal
          empresa={modal && modal._dbId ? modal : null}
          onClose={() => setModal(null)}
          onSave={save}
        />
      )}
    </div>
  );
}

/* ---------- Página: log de auditoria ---------- */
function AuditAdmin() {
  const [logs, setLogs] = useState([]);
  const [loading, setLoading] = useState(true);
  const [q, setQ] = useState('');

  useEffect(() => {
    let timer;
    const fetch = () => {
      setLoading(true);
      apiAuditoriaGet(q).then(setLogs)
        .finally(() => setLoading(false));
    };
    timer = setTimeout(fetch, q ? 350 : 0);
    return () => clearTimeout(timer);
  }, [q]);

  return (
    <div className="fade-in">
      <PageHead kicker="Administração" title="Log de auditoria"
        sub="Histórico de acessos e ações realizadas no portal, para fins de governança e segurança."
        actions={<Btn variant="ghost" icon="download">Exportar CSV</Btn>} />

      <div className="card">
        <div style={{ display: 'flex', gap: 12, padding: '14px 16px', borderBottom: '1px solid var(--line-2)' }}>
          <div style={{ position: 'relative', flex: 1 }}>
            <Icons.search size={16} style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: 'var(--muted)' }} />
            <input className="input" style={{ paddingLeft: 36 }} placeholder="Buscar no histórico…"
              value={q} onChange={e => setQ(e.target.value)} />
          </div>
        </div>

        {loading ? (
          <div style={{ textAlign: 'center', padding: 48 }}>
            <Icons.refresh className="spin" size={22} style={{ color: 'var(--muted)' }} />
          </div>
        ) : (
          <React.Fragment>
            <table className="tbl">
              <thead><tr><th>Data / hora</th><th>Usuário</th><th>Ação</th><th>Alvo</th><th>IP</th></tr></thead>
              <tbody>
                {logs.map(l => (
                  <tr key={l.id}>
                    <td className="mono" style={{ fontSize: 12, color: 'var(--muted)', whiteSpace: 'nowrap' }}>{l.data}</td>
                    <td style={{ fontWeight: 600, color: 'var(--ink)' }}>{l.usuario}</td>
                    <td>
                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
                        {l.alerta && <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--danger)', flexShrink: 0 }}></span>}
                        <span style={{ color: l.alerta ? 'var(--danger)' : 'var(--ink-2)' }}>{l.acao}</span>
                      </span>
                    </td>
                    <td style={{ color: 'var(--muted)' }}>{l.alvo}</td>
                    <td className="mono" style={{ fontSize: 12, color: 'var(--muted-2)' }}>{l.ip}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            {logs.length === 0 && <Empty icon="history" title="Nenhum registro encontrado" sub="Ajuste a busca ou aguarde novas ações no portal." />}
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { DashboardsAdmin, CompaniesAdmin, AuditAdmin, DashboardFormModal });