46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
|
// 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;
|