72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
|
// src/components/LogsViewer.tsx
|
||
|
|
import React, { useState, useEffect, useCallback } from 'react';
|
||
|
|
import axios from 'axios';
|
||
|
|
import { DataGrid, type GridColDef } from '@mui/x-data-grid';
|
||
|
|
import { Box, Typography, Alert } from '@mui/material';
|
||
|
|
import apiClient from '../api/apiClient';
|
||
|
|
|
||
|
|
interface ConversacionLog {
|
||
|
|
id: number;
|
||
|
|
usuarioMensaje: string;
|
||
|
|
botRespuesta: string;
|
||
|
|
fecha: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface LogsViewerProps {
|
||
|
|
onAuthError: () => void; // Función para desloguear si el token es inválido
|
||
|
|
}
|
||
|
|
|
||
|
|
const LogsViewer: React.FC<LogsViewerProps> = ({ onAuthError }) => {
|
||
|
|
const [logs, setLogs] = useState<ConversacionLog[]>([]);
|
||
|
|
const [error, setError] = useState<string | null>(null);
|
||
|
|
|
||
|
|
const fetchLogs = useCallback(async () => {
|
||
|
|
try {
|
||
|
|
const response = await apiClient.get('/api/admin/logs');
|
||
|
|
setLogs(response.data);
|
||
|
|
} catch (err) {
|
||
|
|
setError('No se pudieron cargar los logs.');
|
||
|
|
if (axios.isAxiosError(err) && err.response?.status === 401) {
|
||
|
|
onAuthError(); // Llamamos a la función de logout si hay un error de autenticación
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, [onAuthError]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
fetchLogs();
|
||
|
|
}, [fetchLogs]);
|
||
|
|
|
||
|
|
const columns: GridColDef[] = [
|
||
|
|
{
|
||
|
|
field: 'fecha',
|
||
|
|
headerName: 'Fecha',
|
||
|
|
width: 200,
|
||
|
|
valueGetter: (value) => new Date(value).toLocaleString(),
|
||
|
|
},
|
||
|
|
{ field: 'usuarioMensaje', headerName: 'Mensaje del Usuario', flex: 1 },
|
||
|
|
{ field: 'botRespuesta', headerName: 'Respuesta del Bot', flex: 1 },
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box sx={{ p: 4 }}>
|
||
|
|
<Typography variant="h4" gutterBottom>
|
||
|
|
Historial de Conversaciones
|
||
|
|
</Typography>
|
||
|
|
{error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
|
||
|
|
<Box sx={{ height: 700, width: '100%' }}>
|
||
|
|
<DataGrid
|
||
|
|
rows={logs}
|
||
|
|
columns={columns}
|
||
|
|
pageSizeOptions={[25, 50, 100]}
|
||
|
|
initialState={{
|
||
|
|
sorting: {
|
||
|
|
sortModel: [{ field: 'fecha', sort: 'desc' }],
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default LogsViewer;
|