41 lines
1.6 KiB
TypeScript
41 lines
1.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Box, Tabs, Tab } from '@mui/material';
|
|
import { ClientsOverview } from '../clients/ClientsOverview';
|
|
import { UserManagement } from './UserManagement';
|
|
import { LoginHistory } from './LoginHistory';
|
|
import { Allocation } from './Allocation';
|
|
import { AuditHistory } from './AuditHistory';
|
|
import { DevTickets } from './DevTickets';
|
|
import { MissingMedia } from './MissingMedia';
|
|
|
|
export const AdminConsole: React.FC = () => {
|
|
const [tab, setTab] = useState(0);
|
|
|
|
return (
|
|
// MainLayout's <main> is height:100vh + overflow:hidden (by design, so other
|
|
// pages can own their own internal scroll regions - see AnomalyTable.tsx/
|
|
// GlobalFeed.tsx for the same pattern). This tab's content (filters + large
|
|
// tables) can exceed the viewport, so it needs its own bounded, scrollable
|
|
// container rather than relying on the page ever growing taller than 100vh.
|
|
<Box sx={{ p: 3, height: 'calc(100vh - 64px)', overflowY: 'auto' }}>
|
|
<Tabs value={tab} onChange={(_, value) => setTab(value)} sx={{ mb: 3 }}>
|
|
<Tab label="Clients" />
|
|
<Tab label="Users" />
|
|
<Tab label="Login History" />
|
|
<Tab label="Allocation" />
|
|
<Tab label="Audit & Rectification History" />
|
|
<Tab label="Dev Tickets" />
|
|
<Tab label="Missing Media" />
|
|
</Tabs>
|
|
|
|
{tab === 0 && <ClientsOverview />}
|
|
{tab === 1 && <UserManagement />}
|
|
{tab === 2 && <LoginHistory />}
|
|
{tab === 3 && <Allocation />}
|
|
{tab === 4 && <AuditHistory />}
|
|
{tab === 5 && <DevTickets />}
|
|
{tab === 6 && <MissingMedia />}
|
|
</Box>
|
|
);
|
|
};
|