correcao de logs

frontend/src/App.jsx

@@ -6,6 +6,8 @@ import PesquisaTab from './components/PesquisaTab'
 import RepositorioTab from './components/RepositorioTab'
 import VisualizacaoTab from './components/VisualizacaoTab'
 
+const LOGS_PAGE_SIZE = 30
+
 const TABS = [
   { key: 'Início', label: 'Início', hint: 'Visão geral rápida do aplicativo' },
   { key: 'Pesquisa', label: 'Pesquisa', hint: 'Busca inicial de modelos .dai' },
@@ -33,11 +35,17 @@ export default function App() {
   const [logsError, setLogsError] = useState('')
   const [logsScope, setLogsScope] = useState('')
   const [logsUsuario, setLogsUsuario] = useState('')
-  const [logsLimit, setLogsLimit] = useState(200)
+  const [logsPage, setLogsPage] = useState(1)
 
   const isAdmin = String(authUser?.perfil || '').toLowerCase() === 'admin'
   const logsEnabled = Boolean(logsStatus?.enabled)
   const logsDisabledReason = String(logsStatus?.reason || 'Logs indisponíveis')
+  const logsViewActive = Boolean(authUser && isAdmin && logsOpen)
+  const logsTotalPages = Math.max(1, Math.ceil(logsEvents.length / LOGS_PAGE_SIZE))
+  const logsCurrentPage = Math.min(logsPage, logsTotalPages)
+  const logsStartIndex = logsEvents.length ? (logsCurrentPage - 1) * LOGS_PAGE_SIZE : 0
+  const logsVisibleEvents = logsEvents.slice(logsStartIndex, logsStartIndex + LOGS_PAGE_SIZE)
+  const logsEndIndex = logsEvents.length ? Math.min(logsStartIndex + LOGS_PAGE_SIZE, logsEvents.length) : 0
 
   function resetToLogin(message = '') {
     setAuthToken('')
@@ -50,6 +58,7 @@ export default function App() {
     setLogsOpen(false)
     setLogsEvents([])
     setLogsError('')
+    setLogsPage(1)
     setActiveTab(TABS[0].key)
     setAuthError(message)
   }
@@ -131,6 +140,7 @@ export default function App() {
       setLogsOpen(false)
       setLogsEvents([])
       setLogsError('')
+      setLogsPage(1)
       setLogsStatusLoading(false)
       setLogsLoading(false)
       return
@@ -138,6 +148,16 @@ export default function App() {
     void carregarLogsStatus()
   }, [authUser, isAdmin])
 
+  useEffect(() => {
+    if (!logsEvents.length && logsPage !== 1) {
+      setLogsPage(1)
+      return
+    }
+    if (logsPage > logsTotalPages) {
+      setLogsPage(logsTotalPages)
+    }
+  }, [logsEvents.length, logsPage, logsTotalPages])
+
   async function onSubmitLogin(event) {
     event.preventDefault()
     setAuthError('')
@@ -191,11 +211,13 @@ export default function App() {
     setLogsLoading(true)
     setLogsError('')
     try {
-      const resp = await api.logsEvents({ scope: logsScope, usuario: logsUsuario, limit: logsLimit })
+      const resp = await api.logsEvents({ scope: logsScope, usuario: logsUsuario, limit: 1000 })
       setLogsEvents(Array.isArray(resp?.events) ? resp.events : [])
+      setLogsPage(1)
     } catch (err) {
       setLogsError(err.message || 'Falha ao carregar logs.')
       setLogsEvents([])
+      setLogsPage(1)
     } finally {
       setLogsLoading(false)
     }
@@ -212,6 +234,10 @@ export default function App() {
     await carregarEventosLogs()
   }
 
+  function onCloseLogsView() {
+    setLogsOpen(false)
+  }
+
   return (
     <div className="app-shell">
       <header className="app-header app-header-logo-only">
@@ -230,10 +256,10 @@ export default function App() {
               <button
                 type="button"
                 onClick={() => void onToggleLogs()}
-                disabled={logsStatusLoading || !logsEnabled}
-                title={!logsEnabled ? logsDisabledReason : 'Abrir leitura de logs'}
+                disabled={logsStatusLoading || (!logsEnabled && !logsOpen)}
+                title={logsOpen ? 'Fechar visualização de logs' : !logsEnabled ? logsDisabledReason : 'Abrir leitura de logs'}
               >
-                Logs
+                {logsOpen ? 'Fechar logs' : 'Logs'}
               </button>
             ) : null}
             <button type="button" onClick={() => void onLogout()}>
@@ -243,98 +269,6 @@ export default function App() {
         </div>
       ) : null}
 
-      {authUser && isAdmin && logsOpen ? (
-        <section className="logs-panel">
-          <div className="logs-panel-head">
-            <h3>Logs</h3>
-            <div className="logs-panel-meta">
-              <span>{logsStatus?.backend === 'hf_dataset' ? 'Origem: Dataset HF' : 'Origem: indisponível'}</span>
-              {logsStatus?.revision ? <span>Revisão: {String(logsStatus.revision).slice(0, 8)}</span> : null}
-            </div>
-          </div>
-
-          {!logsEnabled ? (
-            <div className="section1-empty-hint">{logsDisabledReason}</div>
-          ) : (
-            <>
-              <div className="logs-filters">
-                <div className="logs-field">
-                  <label htmlFor="logs-scope">Escopo</label>
-                  <select id="logs-scope" value={logsScope} onChange={(event) => setLogsScope(event.target.value)}>
-                    <option value="">Todos</option>
-                    <option value="auth">Auth</option>
-                    <option value="repositorio">Repositório</option>
-                    <option value="elaboracao">Elaboração</option>
-                    <option value="visualizacao">Visualização</option>
-                  </select>
-                </div>
-                <div className="logs-field">
-                  <label htmlFor="logs-usuario">Usuário</label>
-                  <input
-                    id="logs-usuario"
-                    type="text"
-                    value={logsUsuario}
-                    onChange={(event) => setLogsUsuario(event.target.value)}
-                    placeholder="filtrar por usuário"
-                    autoComplete="off"
-                  />
-                </div>
-                <div className="logs-field logs-field-small">
-                  <label htmlFor="logs-limit">Limite</label>
-                  <input
-                    id="logs-limit"
-                    type="number"
-                    min="1"
-                    max="1000"
-                    value={logsLimit}
-                    onChange={(event) => setLogsLimit(Number(event.target.value || 200))}
-                  />
-                </div>
-                <button type="button" onClick={() => void carregarEventosLogs()} disabled={logsLoading}>
-                  Atualizar
-                </button>
-              </div>
-
-              {logsError ? <div className="error-line">{logsError}</div> : null}
-
-              <div className="table-container">
-                <table className="logs-table">
-                  <thead>
-                    <tr>
-                      <th>Timestamp</th>
-                      <th>Usuário</th>
-                      <th>Perfil</th>
-                      <th>Escopo</th>
-                      <th>Ação</th>
-                      <th>Status</th>
-                      <th>Detalhes</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {logsEvents.map((item) => (
-                      <tr key={item.event_id || `${item.ts}-${item.action}`}>
-                        <td>{item.ts || '-'}</td>
-                        <td>{item.usuario || '-'}</td>
-                        <td>{item.perfil || '-'}</td>
-                        <td>{item.scope || '-'}</td>
-                        <td>{item.action || '-'}</td>
-                        <td>{item.status || '-'}</td>
-                        <td className="logs-table-details">{JSON.stringify(item.details || {})}</td>
-                      </tr>
-                    ))}
-                    {!logsEvents.length ? (
-                      <tr>
-                        <td colSpan={7}>{logsLoading ? 'Carregando logs...' : 'Nenhum log encontrado para os filtros.'}</td>
-                      </tr>
-                    ) : null}
-                  </tbody>
-                </table>
-              </div>
-            </>
-          )}
-        </section>
-      ) : null}
-
       {authLoading ? <div className="status-line">Validando autenticação...</div> : null}
 
       {!authLoading && !authUser ? (
@@ -377,7 +311,116 @@ export default function App() {
       ) : null}
 
       {authUser ? (
-        <>
+        logsViewActive ? (
+          <section className="logs-panel logs-panel-dedicated">
+            <div className="logs-panel-head">
+              <div className="logs-panel-head-main">
+                <h3>Logs</h3>
+                <p className="logs-close-hint">Para voltar ao app, clique em "Fechar logs".</p>
+              </div>
+              <div className="logs-panel-head-actions">
+                <div className="logs-panel-meta">
+                  <span>{logsStatus?.backend === 'hf_dataset' ? 'Origem: Dataset HF' : 'Origem: indisponível'}</span>
+                  {logsStatus?.revision ? <span>Revisão: {String(logsStatus.revision).slice(0, 8)}</span> : null}
+                </div>
+                <button type="button" className="logs-close-btn" onClick={onCloseLogsView}>
+                  Fechar logs
+                </button>
+              </div>
+            </div>
+
+            {!logsEnabled ? (
+              <div className="section1-empty-hint">{logsDisabledReason}</div>
+            ) : (
+              <>
+                <div className="logs-filters">
+                  <div className="logs-field">
+                    <label htmlFor="logs-scope">Escopo</label>
+                    <select id="logs-scope" value={logsScope} onChange={(event) => setLogsScope(event.target.value)}>
+                      <option value="">Todos</option>
+                      <option value="auth">Auth</option>
+                      <option value="repositorio">Repositório</option>
+                      <option value="elaboracao">Elaboração</option>
+                      <option value="visualizacao">Visualização</option>
+                    </select>
+                  </div>
+                  <div className="logs-field">
+                    <label htmlFor="logs-usuario">Usuário</label>
+                    <input
+                      id="logs-usuario"
+                      type="text"
+                      value={logsUsuario}
+                      onChange={(event) => setLogsUsuario(event.target.value)}
+                      placeholder="filtrar por usuário"
+                      autoComplete="off"
+                    />
+                  </div>
+                  <button type="button" onClick={() => void carregarEventosLogs()} disabled={logsLoading}>
+                    Atualizar
+                  </button>
+                </div>
+
+                {logsError ? <div className="error-line">{logsError}</div> : null}
+
+                <div className="table-container">
+                  <table className="logs-table">
+                    <thead>
+                      <tr>
+                        <th>Timestamp</th>
+                        <th>Usuário</th>
+                        <th>Perfil</th>
+                        <th>Escopo</th>
+                        <th>Ação</th>
+                        <th>Status</th>
+                        <th>Detalhes</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {logsVisibleEvents.map((item) => (
+                        <tr key={item.event_id || `${item.ts}-${item.action}`}>
+                          <td>{item.ts || '-'}</td>
+                          <td>{item.usuario || '-'}</td>
+                          <td>{item.perfil || '-'}</td>
+                          <td>{item.scope || '-'}</td>
+                          <td>{item.action || '-'}</td>
+                          <td>{item.status || '-'}</td>
+                          <td className="logs-table-details">{JSON.stringify(item.details || {})}</td>
+                        </tr>
+                      ))}
+                      {!logsEvents.length ? (
+                        <tr>
+                          <td colSpan={7}>{logsLoading ? 'Carregando logs...' : 'Nenhum log encontrado para os filtros.'}</td>
+                        </tr>
+                      ) : null}
+                    </tbody>
+                  </table>
+                </div>
+
+                <div className="logs-pagination">
+                  <span>{logsEvents.length ? `Exibindo ${logsStartIndex + 1}-${logsEndIndex} de ${logsEvents.length}` : 'Exibindo 0 de 0'}</span>
+                  <div className="logs-pagination-actions">
+                    <button
+                      type="button"
+                      onClick={() => setLogsPage((prev) => Math.max(1, prev - 1))}
+                      disabled={logsLoading || logsCurrentPage <= 1}
+                    >
+                      Anterior
+                    </button>
+                    <span>Página {logsCurrentPage} de {logsTotalPages}</span>
+                    <button
+                      type="button"
+                      onClick={() => setLogsPage((prev) => Math.min(logsTotalPages, prev + 1))}
+                      disabled={logsLoading || logsCurrentPage >= logsTotalPages}
+                    >
+                      Próxima
+                    </button>
+                  </div>
+                </div>
+              </>
+            )}
+          </section>
+        ) : (
+          <>
           <nav className="tabs" aria-label="Navegação principal">
             {TABS.map((tab) => {
               const active = tab.key === activeTab
@@ -416,7 +459,8 @@ export default function App() {
           <div className="tab-pane" hidden={activeTab !== 'Repositório'}>
             <RepositorioTab authUser={authUser} />
           </div>
-        </>
+          </>
+        )
       ) : null}
     </div>
   )

frontend/src/styles.css

@@ -328,21 +328,43 @@ textarea {
   padding: 12px;
 }
 
+.logs-panel-dedicated {
+  margin-top: 10px;
+}
+
 .logs-panel-head {
   display: flex;
   justify-content: space-between;
-  align-items: baseline;
+  align-items: flex-start;
   gap: 10px;
   flex-wrap: wrap;
   margin-bottom: 10px;
 }
 
+.logs-panel-head-main {
+  display: grid;
+  gap: 4px;
+}
+
 .logs-panel-head h3 {
   margin: 0;
   font-family: 'Sora', sans-serif;
   color: #2b4258;
 }
 
+.logs-close-hint {
+  margin: 0;
+  color: #5f7388;
+  font-size: 0.82rem;
+}
+
+.logs-panel-head-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
 .logs-panel-meta {
   display: inline-flex;
   gap: 10px;
@@ -350,9 +372,16 @@ textarea {
   font-size: 0.82rem;
 }
 
+.logs-close-btn {
+  border: 1px solid #adc3d8;
+  background: #eef5fb;
+  color: #2f4760;
+  font-weight: 700;
+}
+
 .logs-filters {
   display: grid;
-  grid-template-columns: 1.1fr 1.2fr 100px auto;
+  grid-template-columns: 1.1fr 1.2fr auto;
   gap: 10px;
   align-items: end;
   margin-bottom: 10px;
@@ -398,6 +427,27 @@ textarea {
   max-width: 420px;
 }
 
+.logs-pagination {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  flex-wrap: wrap;
+  color: #4b6278;
+  font-size: 0.82rem;
+}
+
+.logs-pagination-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.logs-pagination-actions button {
+  min-width: 96px;
+}
+
 .inner-tabs {
   display: flex;
   flex-wrap: wrap;