Proyecto ChatBot Con Gemini

chatbot-admin/src/components/AdminPanel.tsx

@@ -0,0 +1,46 @@
+// src/components/AdminPanel.tsx
+import React, { useState } from 'react';
+import { Box, Typography, AppBar, Toolbar, IconButton, Tabs, Tab } from '@mui/material';
+import LogoutIcon from '@mui/icons-material/Logout';
+
+// Importamos los dos componentes que mostraremos en las pestañas
+import ContextManager from './ContextManager'; // Renombraremos el AdminPanel original
+import LogsViewer from './LogsViewer';
+
+interface AdminPanelProps {
+  onLogout: () => void;
+}
+
+// El componente se convierte en un contenedor con pestañas
+const AdminPanel: React.FC<AdminPanelProps> = ({ onLogout }) => {
+  const [currentTab, setCurrentTab] = useState(0);
+
+  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
+    setCurrentTab(newValue);
+  };
+
+  return (
+    <Box>
+      <AppBar position="static">
+        <Toolbar>
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+            Panel de Administración del Chatbot
+          </Typography>
+          <IconButton color="inherit" onClick={onLogout} aria-label="Cerrar sesión">
+            <LogoutIcon />
+          </IconButton>
+        </Toolbar>
+        <Tabs value={currentTab} onChange={handleTabChange} textColor="inherit" indicatorColor="secondary">
+          <Tab label="Gestor de Contexto" />
+          <Tab label="Historial de Conversaciones" />
+        </Tabs>
+      </AppBar>
+      
+      {/* Mostramos el componente correspondiente a la pestaña activa */}
+      {currentTab === 0 && <ContextManager onAuthError={onLogout} />}
+      {currentTab === 1 && <LogsViewer onAuthError={onLogout} />}
+    </Box>
+  );
+};
+
+export default AdminPanel;