advisersPage

import { Box, Stack, Tab, Tabs, Typography } from '@mui/material';
import { mainHeaderStyle, tabsStyle } from '../ops/opsPage';
import { useMyProfile } from '../common/hooks/auth';
import { useState } from 'react';
import AdvisersDashboard from './advisersDashboard';
import ClientsInProgress from '../clients/components/clientsInProgress';
import Content from '../common/components/context';
import Layout from '../common/components/layout';

const AdvisersPage = () => {
  const profile = useMyProfile();
  const [currentTab, setCurrentTab] = useState(0);

  if (!profile) return null;

  return (
    <Layout>
      <Content sx={mainHeaderStyle}>
        <Box marginY={2} display="flex" justifyContent="end">
          <Typography variant="h3" fontWeight={600} color="primary.main">
            Reintermediation
          </Typography>
        </Box>
        <Stack direction="row" justifyContent="space-between" alignItems="center">
          <Tabs
            sx={tabsStyle}
            variant="scrollable"
            scrollButtons="auto"
            allowScrollButtonsMobile
            value={currentTab}
            onChange={(_, newValue: number) => setCurrentTab(newValue)}
          >
            <Tab label="Dashboard" />
            <Tab label="In progress" />
            <Tab label="Signed clients" />
          </Tabs>
        </Stack>
      </Content>
      <Box bgcolor="common.white" sx={{ flexGrow: 1 }} paddingY={4}>
        <Content>
          {currentTab === 0 && <AdvisersDashboard />}
          {currentTab === 1 && (
            <ClientsInProgress apiQueryFilters={{ isAllocated: 1, allocatedAgentId: profile.id }} />
          )}
          {currentTab === 2 && (
            <ClientsInProgress
              apiQueryFilters={{ isAllocated: 1, isSigned: 1, allocatedAgentId: profile.id }}
            />
          )}
        </Content>
      </Box>
    </Layout>
  );
};

export default AdvisersPage;