Proyecto ChatBot Con Gemini

chatbot-admin/src/components/LogsViewer.tsx

@@ -0,0 +1,72 @@
+// 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;