// ** React Imports import { SyntheticEvent, useState, useEffect } from 'react' // ** Next Import import { useRouter } from 'next/router' // ** MUI Imports import Box from '@mui/material/Box' import TabList from '@mui/lab/TabList' import TabPanel from '@mui/lab/TabPanel' import TabContext from '@mui/lab/TabContext' import { styled } from '@mui/material/styles' import Typography from '@mui/material/Typography' import MuiTab, { TabProps } from '@mui/material/Tab' import CircularProgress from '@mui/material/CircularProgress' // ** Icon Imports import Icon from 'src/@core/components/icon' // ** Demo Components Imports import UserViewBilling from 'src/views/apps/user/view/UserViewBilling' import UserViewOverview from 'src/views/apps/user/view/UserViewOverview' import UserViewSecurity from 'src/views/apps/user/view/UserViewSecurity' import UserViewConnection from 'src/views/apps/user/view/UserViewConnection' import UserViewNotification from 'src/views/apps/user/view/UserViewNotification' // ** Types import { InvoiceType } from 'src/types/apps/invoiceTypes' interface Props { tab: string invoiceData: InvoiceType[] } // ** Styled Tab component const Tab = styled(MuiTab)(({ theme }) => ({ minHeight: 48, flexDirection: 'row', '& svg': { marginBottom: '0 !important', marginRight: theme.spacing(1) } })) const UserViewRight = ({ tab, invoiceData }: Props) => { // ** State const [activeTab, setActiveTab] = useState(tab) const [isLoading, setIsLoading] = useState(true) // ** Hooks const router = useRouter() const handleChange = (event: SyntheticEvent, value: string) => { setIsLoading(true) setActiveTab(value) router .push({ pathname: `/apps/user/view/${value.toLowerCase()}` }) .then(() => setIsLoading(false)) } useEffect(() => { if (tab && tab !== activeTab) { setActiveTab(tab) } // eslint-disable-next-line react-hooks/exhaustive-deps }, [tab]) useEffect(() => { if (invoiceData) { setIsLoading(false) } }, [invoiceData]) return ( `1px solid ${theme.palette.divider}` }} > } /> } /> } /> } /> } /> {isLoading ? ( Loading... ) : ( <> )} ) } export default UserViewRight