dialog component, dash & service-monitoring slice

frontend/client-portal/src/components/MuiDialog.tsx

@@ -0,0 +1,56 @@
+import { Dialog, DialogTitle, DialogContent, Stack, Typography, IconButton } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { ReactElement } from 'react';
+import Iconify from './Iconify';
+
+// ----------------------------------------------------------------------
+
+type MuiDialogProps = {
+  title?: {
+    name?: string;
+    icon?: string;
+  };
+  openDialog: boolean;
+  setOpenDialog: Function;
+  content?: ReactElement;
+  maxWidth?: string;
+};
+
+// ----------------------------------------------------------------------
+
+const MuiDialog = ({ title, openDialog, setOpenDialog, content, maxWidth }: MuiDialogProps) => {
+  const handleClose = () => {
+    setOpenDialog(false);
+  };
+
+  let maxWidthDialog = 'md';
+
+  if (maxWidth) {
+    maxWidthDialog = maxWidth;
+  }
+
+  return (
+    <Dialog open={openDialog} onClose={handleClose} fullWidth={true} maxWidth={maxWidthDialog}>
+      <DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
+        <Stack direction="row" alignItems="center" justifyContent="space-between">
+          {title?.icon ? (
+            <Stack direction="row">
+              <Iconify icon={title?.icon} width={25} height={25} sx={{ marginRight: '10px' }} />
+              <Typography variant="h6">{title?.name}</Typography>
+            </Stack>
+          ) : (
+            <Typography variant="h6">{title?.name ? title?.name : 'Testing Title'}</Typography>
+          )}
+          <IconButton sx={{ color: '#FFF' }} onClick={handleClose}>
+            <CloseIcon />
+          </IconButton>
+        </Stack>
+      </DialogTitle>
+      <DialogContent sx={{ backgroundColor: '#F9FAFB' }}>
+        {content ? content : 'Testing Content Dialog'}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default MuiDialog;

frontend/client-portal/src/components/nav-section/vertical/NavItem.tsx

@@ -10,12 +10,18 @@ import { isExternalLink } from '..';
 
 // ----------------------------------------------------------------------
 
-export function NavItemRoot({ item, isCollapse, open = false, active, onOpen }: NavItemProps) {
-  const { title, path, icon, info, children } = item;
+export function NavItemRoot({
+  item,
+  isCollapse,
+  open = false,
+  active = false,
+  onOpen,
+}: NavItemProps) {
+  const { title, path, info, children } = item;
 
   const renderContent = (
     <>
-      {icon && <ListItemIconStyle>{icon}</ListItemIconStyle>}
+      <DotIcon active={active} />
       <ListItemTextStyle disableTypography primary={title} isCollapse={isCollapse} />
       {!isCollapse && (
         <>

frontend/client-portal/src/layouts/dashboard/navbar/NavConfig.tsx

@@ -1,50 +1,13 @@
-// components
-import SvgIconStyle from '../../../components/SvgIconStyle';
-
 // ----------------------------------------------------------------------
 
-const getIcon = (name: string) => (
-  <SvgIconStyle src={`/icons/${name}.svg`} sx={{ width: 1, height: 1 }} />
-);
-
-const ICONS = {
-  user: getIcon('ic_user'),
-  ecommerce: getIcon('ic_ecommerce'),
-  analytics: getIcon('ic_analytics'),
-  dashboard: getIcon('ic_dashboard'),
-};
-
 const navConfig = [
   // GENERAL
   // ----------------------------------------------------------------------
   {
-    items: [{ title: 'Dashboard', path: '/dashboard', icon: ICONS.dashboard }],
+    items: [{ title: 'Dashboard', path: '/dashboard' }],
   },
 
-  // Membership
-  // ----------------------------------------------------------------------
-  {
-    subheader: 'Membership',
-    items: [
-      {
-        title: 'Member List',
-        path: '/members',
-        icon: ICONS.user,
-      },
-      // {
-      //   title: 'Member Movement',
-      //   // path: '/',
-      //   icon: ICONS.user,
-      //   children: [
-      //     { title: '', path: '/medicines' },
-      //     { title: 'Obat', path: '/medicines' },
-      //     { title: 'Obat', path: '/medicines' },
-      //   ],
-      // },
-    ],
-  },
-
-  // Membership
+  // Alarm Center
   // ----------------------------------------------------------------------
   {
     subheader: 'Case Management',
@@ -52,18 +15,11 @@ const navConfig = [
       {
         title: 'Alarm Center',
         path: '/alarm-center',
-        icon: ICONS.ecommerce,
       },
-      // {
-      //   title: 'Member Movement',
-      //   // path: '/',
-      //   icon: ICONS.user,
-      //   children: [
-      //     { title: '', path: '/medicines' },
-      //     { title: 'Obat', path: '/medicines' },
-      //     { title: 'Obat', path: '/medicines' },
-      //   ],
-      // },
+      {
+        title: 'Claim Report',
+        path: '/claim-report',
+      },
     ],
   },
 ];

frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx

@@ -0,0 +1,291 @@
+// mui
+import {
+  Button,
+  Box,
+  Tabs,
+  Tab,
+  IconButton,
+  Container,
+  Grid,
+  Card,
+  Stack,
+  Typography,
+} from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { Favorite } from '@mui/icons-material';
+// components
+import Page from '../../components/Page';
+import Iconify from '../../components/Iconify';
+// utils
+import useSettings from '../../hooks/useSettings';
+import { useRef, useState, SyntheticEvent } from 'react';
+// sections
+// import ListTable from '../../sections/claimreports/ListTable';
+// import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      style={{ backgroundColor: '#F9FAFB' }}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ p: 3 }}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  );
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+interface StyledTabsProps {
+  children?: React.ReactNode;
+  value: number;
+  onChange: (event: React.SyntheticEvent, newValue: number) => void;
+}
+
+const StyledTabs = styled((props: StyledTabsProps) => <Tabs {...props} />)({
+  '& .MuiTabs-indicator': {
+    display: 'flex',
+    justifyContent: 'center',
+    backgroundColor: 'transparent',
+  },
+  '& .MuiTabs-indicatorSpan': {
+    maxWidth: 40,
+    width: '100%',
+    backgroundColor: '#635ee7',
+  },
+});
+
+interface StyledTabProps {
+  label: string;
+  icon?: string | React.ReactElement;
+}
+
+const StyledTab = styled((props: StyledTabProps) => <Tab disableRipple {...props} />)(
+  ({ theme }) => ({
+    textTransform: 'none',
+    fontWeight: 500,
+    fontSize: theme.typography.pxToRem(20),
+    color: theme.palette.primary.main,
+    maxWidth: '100%',
+    flex: 1,
+    margin: '0 !important',
+    '&.Mui-selected': {
+      color: '#FFF',
+      backgroundColor: theme.palette.primary.main,
+    },
+    '&:hover': {
+      backgroundColor: theme.palette.primary.dark,
+      color: '#FFF',
+      opacity: 1,
+    },
+  })
+);
+
+export default function Drugs() {
+  const { themeStretch } = useSettings();
+
+  const [value, setValue] = useState(0);
+  const handleChange = (event: SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Page title="Service Monitoring 123456">
+      <Container maxWidth={themeStretch ? false : 'xl'}>
+        <Stack direction="row" alignItems="center" sx={{ marginBottom: 2 }}>
+          <IconButton sx={{ marginRight: '10px', color: '#424242' }}>
+            <Iconify icon="heroicons-outline:arrow-narrow-left" />
+          </IconButton>
+          <Typography variant="h5">Service Monitoring</Typography>
+          <Stack
+            direction="row"
+            alignItems="center"
+            sx={{
+              backgroundColor: '#DFE3E8',
+              color: '#212B36',
+              paddingX: 2,
+              paddingY: 1,
+              marginLeft: 3,
+              borderRadius: 1,
+            }}
+          >
+            <Iconify icon="akar-icons:check" sx={{ marginRight: 1 }} />
+            <Typography variant="caption">Done</Typography>
+          </Stack>
+        </Stack>
+        <Grid container spacing={3} sx={{ marginBottom: 5 }}>
+          {/* Item 1 */}
+          <Grid item xs={4} lg={4} md={6}>
+            <Card sx={{ borderRadius: '6px' }}>
+              <Stack>
+                <Stack
+                  direction="row"
+                  alignItems="center"
+                  sx={{ backgroundColor: '#F5F5F5', paddingY: 1, paddingX: 2, color: '#19BBBB' }}
+                >
+                  <Iconify icon="bxs:user" width={22} height={18} sx={{ marginRight: '10px' }} />
+                  <Typography>Employee Profiles</Typography>
+                </Stack>
+                <Stack direction="row" spacing={1} sx={{ paddingY: 1, paddingX: 2 }}>
+                  <Stack spacing={2}>
+                    <Stack>
+                      <Typography variant="caption">Nama perusahaan</Typography>
+                      <Typography variant="body2">PT. Amman Mineral</Typography>
+                    </Stack>
+                    <Stack>
+                      <Typography variant="caption">Nama Lengkap</Typography>
+                      <Typography variant="body2">Stephen kuow</Typography>
+                    </Stack>
+                    <Stack>
+                      <Typography variant="caption">Tanggal lahir</Typography>
+                      <Typography variant="body2">09 Aug 1980</Typography>
+                    </Stack>
+                    <Stack>
+                      <Typography variant="caption">Email</Typography>
+                      <Typography variant="body2">Stephen.uow@gmal.com</Typography>
+                    </Stack>
+                    <Stack>
+                      <Typography variant="caption">No telepon</Typography>
+                      <Typography variant="body2">+62 821-8123-2323</Typography>
+                    </Stack>
+                  </Stack>
+                  <Stack>
+                    <Typography variant="caption">ID Karyawan</Typography>
+                    <Typography variant="body2">12345678</Typography>
+                  </Stack>
+                </Stack>
+              </Stack>
+            </Card>
+          </Grid>
+          {/* Item 2 */}
+          <Grid item xs={4} lg={4} md={6}>
+            <Card sx={{ borderRadius: '6px', height: '100%' }}>
+              <Stack>
+                <Stack
+                  direction="row"
+                  alignItems="center"
+                  sx={{ backgroundColor: '#F5F5F5', paddingY: 1, paddingX: 2, color: '#19BBBB' }}
+                >
+                  <Iconify
+                    icon="heroicons-solid:clipboard-list"
+                    width={22}
+                    height={18}
+                    sx={{ marginRight: '10px' }}
+                  />
+                  <Typography>Diagnose Summary</Typography>
+                </Stack>
+                <Stack spacing={2} sx={{ paddingY: 1, paddingX: 2 }}>
+                  <Stack>
+                    <Typography variant="caption">Gejala</Typography>
+                    <Typography variant="body2">Nyeri dada</Typography>
+                  </Stack>
+                  <Stack>
+                    <Typography variant="caption">Tanda</Typography>
+                    <Typography variant="body2">Sesak Napas</Typography>
+                  </Stack>
+                  <Stack>
+                    <Typography variant="caption">Main Diagnose</Typography>
+                    <Typography variant="body2">
+                      J46 Status asthmaticus, Acute severe asthma
+                    </Typography>
+                  </Stack>
+                  <Stack>
+                    <Typography variant="caption">Diagnosis pembanding</Typography>
+                    <Typography variant="body2">K21 Gastro-oesophageal reflux disease</Typography>
+                  </Stack>
+                </Stack>
+              </Stack>
+            </Card>
+          </Grid>
+          {/* Item 3 */}
+          <Grid item xs={4} lg={4} md={6}>
+            <Card sx={{ borderRadius: '6px', height: '100%' }}>
+              <Stack>
+                <Stack
+                  direction="row"
+                  alignItems="center"
+                  sx={{ backgroundColor: '#F5F5F5', paddingY: 1, paddingX: 2, color: '#19BBBB' }}
+                >
+                  <Iconify
+                    icon="iconoir:healthcare"
+                    width={22}
+                    height={18}
+                    sx={{ marginRight: '10px' }}
+                  />
+                  <Typography>Services</Typography>
+                </Stack>
+                <Stack direction="row" spacing={1} sx={{ paddingY: 1, paddingX: 2 }}>
+                  <Stack spacing={2}>
+                    <Stack>
+                      <Typography variant="caption">Evakuasi medis</Typography>
+                      <Typography variant="body2">Land Transportation</Typography>
+                    </Stack>
+                    <Stack>
+                      <Typography variant="caption">Rumah sakit</Typography>
+                      <Typography variant="body2">Primaya Hospital</Typography>
+                    </Stack>
+                    <Stack direction="row" spacing={16}>
+                      <Stack>
+                        <Typography variant="caption">Tanggal mulai</Typography>
+                        <Typography variant="body2">17 Aug 2022</Typography>
+                      </Stack>
+                      <Stack>
+                        <Typography variant="caption">Selesai</Typography>
+                        <Typography variant="body2">18 Aug 2022</Typography>
+                      </Stack>
+                    </Stack>
+                    <Stack>
+                      <Typography variant="caption">Daftar layanan</Typography>
+                      <Typography variant="body2">
+                        Inpatient, Medivac (Medical Evacuation)
+                      </Typography>
+                    </Stack>
+                  </Stack>
+                </Stack>
+              </Stack>
+            </Card>
+          </Grid>
+          <Grid item sm>
+            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+              <StyledTabs value={value} onChange={handleChange} aria-label="basic tabs example">
+                <StyledTab icon={<Favorite />} label="Daily Monitoring" {...a11yProps(0)} />
+                <StyledTab
+                  icon={<Iconify icon="heroicons-solid:beaker" />}
+                  label="Item Two"
+                  {...a11yProps(1)}
+                />
+              </StyledTabs>
+            </Box>
+            <TabPanel value={value} index={0}>
+              Item One
+            </TabPanel>
+            <TabPanel value={value} index={1}>
+              Item Two
+            </TabPanel>
+          </Grid>
+        </Grid>
+      </Container>
+    </Page>
+  );
+}

frontend/client-portal/src/pages/Dashboard/Dashboard.tsx

@@ -1,74 +1,17 @@
 // @mui
-import { styled } from '@mui/material/styles';
-import {
-  Button,
-  Card,
-  Typography,
-  Link,
-  Divider,
-  Stack,
-  LinearProgress,
-  linearProgressClasses,
-  Container,
-  Grid,
-} from '@mui/material';
-import { ChevronRight } from '@mui/icons-material';
+import { Typography, Container, Grid } from '@mui/material';
 // hooks
 import useSettings from '../../hooks/useSettings';
-// utils
-import { fCurrency } from '../../utils/formatNumber';
 // components
 import Page from '../../components/Page';
-import Iconify from '../../components/Iconify';
-// import Popup from '../components/Popup';
-// import axios from '../utils/axios';
-// DashboardComponent
-// import BalanceCard from '../sections/dashboard/BalanceCard';
-// import NotificationCard from '../sections/dashboard/NotificationCard';
-// import DashboardTable from '../sections/dashboard/DashboardTable';
-// React
-import { useState } from 'react';
 // Table
 import List from './List';
+// theme
+import CardNotification from '../../sections/dashboard/CardNotification';
+import CardBalance from '../../sections/dashboard/CardBalance';
 
 // ----------------------------------------------------------------------
 
-const RootBalanceStyle = styled(Card)(({ theme }) => ({
-  boxShadow: 'none',
-  padding: theme.spacing(3),
-  color: 'black',
-  backgroundColor: theme.palette.grey[200],
-  maxHeight: '240px',
-}));
-
-const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
-  height: 10,
-  borderRadius: 6,
-  [`&.${linearProgressClasses.colorPrimary}`]: {
-    backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
-  },
-  [`& .${linearProgressClasses.bar}`]: {
-    borderRadius: 6,
-    backgroundColor: theme.palette.primary.main,
-  },
-}));
-
-const RootNotificationStyle = styled(Card)(({ theme }) => ({
-  boxShadow: 'none',
-  padding: '1rem 0.5rem',
-  color: 'black',
-  backgroundColor: theme.palette.grey[200],
-  maxHeight: '240px',
-}));
-
-const ItemNotificationStyle = styled(Card)(({ theme }) => ({
-  boxShadow: 'none',
-  padding: theme.spacing(1),
-  borderRadius: 0.5,
-  color: 'black',
-  maxHeight: '170px',
-}));
-
 const itemList = [
   { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '08:00 WIB' },
   { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '09:00 WIB' },
@@ -76,17 +19,11 @@ const itemList = [
   { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '11:00 WIB' },
 ];
 
-const INITIAL = '500.000.000';
-const TOTAL = 375000000;
-const PERCENT = 75;
-
 // ----------------------------------------------------------------------
 
 export default function Dashboard() {
   const { themeStretch } = useSettings();
-  const [openPopup, setOpenPopup] = useState(false);
 
-  // const { logout } = useAuth();
   // const [corporate, setCorporate] = useState({});
 
   // const loadSomething = () => {
@@ -113,139 +50,18 @@ export default function Dashboard() {
 
         <Grid container spacing={2}>
           <Grid item xs={6} lg={6} md={12}>
-            <RootNotificationStyle>
-              <Stack direction="row" justifyContent="space-between" alignItems="center">
-                <Typography>
-                  <Typography
-                    variant="body2"
-                    component="span"
-                    sx={{ display: 'flex', alignItems: 'center' }}
-                  >
-                    <Iconify icon="eva:bell-fill" marginRight={0.75} />
-                    Notification
-                    <div
-                      style={{
-                        width: '12px',
-                        height: '12px',
-                        backgroundColor: '#19BBBB',
-                        marginLeft: '0.5rem',
-                        borderRadius: '50%',
-                      }}
-                    />
-                  </Typography>
-                </Typography>
-                <Button sx={{ typography: 'body2' }} endIcon={<ChevronRight />}>
-                  View All
-                </Button>
-              </Stack>
-
-              <Stack sx={{ marginTop: 2 }}>
-                <ItemNotificationStyle>
-                  {itemList.map(({ info, date, time }, key) => (
-                    <div key={key}>
-                      {key >= 1 ? <Divider sx={{ marginY: 0.5 }} /> : ''}
-                      <Stack direction="row" justifyContent="space-between" alignItems="center">
-                        <Stack
-                          direction="column"
-                          justifyContent="flex-start"
-                          alignItems="flex-start"
-                        >
-                          <Typography sx={{ typography: 'caption' }}>{info}</Typography>
-                          <Link
-                            component="button"
-                            variant="caption"
-                            underline="always"
-                            onClick={() => {
-                              alert('Info Detail');
-                            }}
-                          >
-                            Info Detail
-                          </Link>
-                        </Stack>
-                        <Stack
-                          direction="column"
-                          justifyContent="flex-start"
-                          alignItems="flex-start"
-                        >
-                          <Typography sx={{ typography: 'caption', color: '#656565' }}>
-                            {date}
-                          </Typography>
-                          <Typography sx={{ typography: 'caption', color: '#656565' }}>
-                            {time}
-                          </Typography>
-                        </Stack>
-                      </Stack>
-                    </div>
-                  ))}
-                </ItemNotificationStyle>
-              </Stack>
-            </RootNotificationStyle>
+            <CardNotification data={itemList} />
           </Grid>
           <Grid item xs={6} lg={6} md={12}>
-            <RootBalanceStyle>
-              <Stack direction="row" justifyContent="space-between" sx={{ mb: 1 }}>
-                <div>
-                  <Typography variant="body2" component="span" sx={{ opacity: 0.72 }}>
-                    Total Limit
-                  </Typography>
-                  <Typography sx={{ typography: 'body2' }}>{fCurrency(TOTAL)}</Typography>
-                  <Typography sx={{ typography: 'caption', color: '#919EAB' }}>
-                    / {INITIAL}
-                  </Typography>
-                </div>
-
-                <Stack direction="row" alignItems="center" justifyContent="center">
-                  <Typography variant="h5" sx={{ ml: 0.5 }}>
-                    {PERCENT}%
-                  </Typography>
-                </Stack>
-              </Stack>
-
-              <BorderLinearProgress variant="determinate" value={PERCENT} sx={{ mb: 1 }} />
-
-              <Stack sx={{ backgroundColor: '#B2E8E8', paddingY: 1, paddingX: 1.5, mb: 2 }}>
-                <Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
-                  <Iconify
-                    icon="bxs:lock-alt"
-                    width={12}
-                    height={13}
-                    sx={{ color: '#424242', marginRight: '6px' }}
-                  />
-                  <Typography variant="caption" component="span">
-                    Lock Fund ( 25% )
-                  </Typography>
-                </Typography>
-                <Typography sx={{ typography: 'caption', color: '#637381' }}>
-                  125.000.000 / 125.000.000
-                </Typography>
-              </Stack>
-
-              <Stack direction="row" spacing={2}>
-                <Button
-                  variant="outlined"
-                  startIcon={<Iconify icon="bi:clipboard-check-fill" />}
-                  fullWidth={true}
-                  onClick={() => setOpenPopup(true)}
-                >
-                  Submit Claim
-                </Button>
-                <Button
-                  variant="contained"
-                  startIcon={<Iconify icon="heroicons-solid:cash" />}
-                  fullWidth={true}
-                >
-                  Top Up
-                </Button>
-              </Stack>
-            </RootBalanceStyle>
+            <CardBalance />
           </Grid>
           <Grid item xs={12} lg={12} md={12}>
-            <List />
+            {/* <List /> */}
           </Grid>
         </Grid>
       </Container>
 
-      {/* <Popup openPopup={openPopup} setOpenPopup={setOpenPopup} /> */}
+      {/* <DialogDetailClaim /> */}
     </Page>
   );
 }

frontend/client-portal/src/routes/index.tsx

@@ -52,10 +52,6 @@ export default function Router() {
         // { path: 'reset-password', element: <ResetPassword /> },
       ],
     },
-    // {
-    //   path: '/',
-    //   element: <Navigate to="/dashboard/one" replace />,
-    // },
     {
       path: '/',
       element: (
@@ -73,26 +69,6 @@ export default function Router() {
         },
       ],
     },
-    {
-      path: '/members',
-      element: (
-        <AuthProvider>
-          <AuthGuard>
-            <DashboardLayout />
-          </AuthGuard>
-        </AuthProvider>
-      ),
-      children: [
-        {
-          element: <Members />,
-          index: true,
-        },
-        {
-          path: 'create',
-          element: <MembersCreate />,
-        },
-      ],
-    },
     {
       path: '/alarm-center',
       element: (
@@ -107,29 +83,12 @@ export default function Router() {
           element: <AlarmCenter />,
           index: true,
         },
+        {
+          path: 'service-monitoring/:id',
+          element: <AlarmCenterServiceMonitoring />,
+        },
       ],
     },
-    // {
-    //   path: '/dashboard',
-    //   element: <DashboardLayout />,
-    //   children: [
-    //     { element: <Navigate to="/dashboard/one" replace />, index: true },
-    //     { path: 'one', element:
-    //         <AuthProvider><PageOne /></AuthProvider> },
-    //     { path: 'two', element:
-    //         <AuthProvider><PageTwo /></AuthProvider> },
-    //     { path: 'three', element:
-    //         <AuthProvider><PageThree /></AuthProvider> },
-    //     {
-    //       path: 'user',
-    //       children: [
-    //         { element: <Navigate to="/dashboard/user/four" replace />, index: true },
-    //         { path: 'four', element: <AuthProvider><PageFour /></AuthProvider> },
-    //         { path: 'six', element: <AuthProvider><PageSix /> </AuthProvider> },
-    //       ],
-    //     },
-    //   ],
-    // },
     {
       path: '*',
       element: <LogoOnlyLayout />,
@@ -150,9 +109,8 @@ const VerifyCode = Loadable(lazy(() => import('../pages/auth/VerifyCode')));
 const Dashboard = Loadable(lazy(() => import('../pages/Dashboard/Dashboard')));
 const NotFound = Loadable(lazy(() => import('../pages/Page404')));
 
-// Members
-const Members = Loadable(lazy(() => import('../pages/Members/Index')));
-const MembersCreate = Loadable(lazy(() => import('../pages/Members/Create')));
-
 // Alarm Center
 const AlarmCenter = Loadable(lazy(() => import('../pages/AlarmCenter/Index')));
+const AlarmCenterServiceMonitoring = Loadable(
+  lazy(() => import('../pages/AlarmCenter/ServiceMonitoring'))
+);

frontend/client-portal/src/sections/dashboard/CardBalance.tsx

@@ -0,0 +1,161 @@
+// @mui
+import { styled } from '@mui/material/styles';
+import {
+  Button,
+  Card,
+  Typography,
+  LinearProgress,
+  linearProgressClasses,
+  Stack,
+} from '@mui/material';
+// components
+import Iconify from '../../components/Iconify';
+// React
+import { useState } from 'react';
+// utils
+import { fCurrency } from '../../utils/formatNumber';
+// <sections></sections>
+import DialogTopUpLimit from './DialogTopUpLimit';
+
+// ----------------------------------------------------------------------
+
+type DataContent = {
+  info: string;
+  date: string;
+  time: string;
+};
+
+type NotificationProps = {
+  data?: DataContent[];
+};
+
+// ----------------------------------------------------------------------
+
+const RootBalanceStyle = styled(Card)(({ theme }) => ({
+  boxShadow: 'none',
+  padding: theme.spacing(3),
+  color: 'black',
+  backgroundColor: theme.palette.grey[200],
+  maxHeight: '240px',
+}));
+
+const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
+  height: 10,
+  borderRadius: 6,
+  [`&.${linearProgressClasses.colorPrimary}`]: {
+    backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
+  },
+  [`& .${linearProgressClasses.bar}`]: {
+    borderRadius: 6,
+    backgroundColor: theme.palette.primary.main,
+  },
+}));
+
+// ----------------------------------------------------------------------
+
+const INITIAL = '500.000.000';
+const TOTAL = 375000000;
+const PERCENT = 75;
+
+// ----------------------------------------------------------------------
+
+export default function CardBalance({ data }: NotificationProps) {
+  const [openDialog, setOpenDialog] = useState(false);
+  const [dialogTitle, setDialogTitle] = useState('');
+  const [isDialog, setIsDialog] = useState('');
+
+  const clickHandler = (isDialog: string) => {
+    switch (isDialog) {
+      case 'submitClaim':
+        setDialogTitle('Notification');
+        setIsDialog(isDialog);
+        setOpenDialog(true);
+        break;
+      case 'topUpLimit':
+        setDialogTitle('Top Up Limit');
+        setIsDialog(isDialog);
+        setOpenDialog(true);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  return (
+    <RootBalanceStyle>
+      <>
+        <Stack direction="row" justifyContent="space-between" sx={{ mb: 1 }}>
+          <div>
+            <Typography variant="body2" component="span" sx={{ opacity: 0.72 }}>
+              Total Limit
+            </Typography>
+            <Typography sx={{ typography: 'body2' }}>{fCurrency(TOTAL)}</Typography>
+            <Typography sx={{ typography: 'caption', color: '#919EAB' }}>/ {INITIAL}</Typography>
+          </div>
+
+          <Stack direction="row" alignItems="center" justifyContent="center">
+            <Typography variant="h5" sx={{ ml: 0.5 }}>
+              {PERCENT}%
+            </Typography>
+          </Stack>
+        </Stack>
+
+        <BorderLinearProgress variant="determinate" value={PERCENT} sx={{ mb: 1 }} />
+
+        <Stack sx={{ backgroundColor: '#B2E8E8', paddingY: 1, paddingX: 1.5, mb: 2 }}>
+          <Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
+            <Iconify
+              icon="bxs:lock-alt"
+              width={12}
+              height={13}
+              sx={{ color: '#424242', marginRight: '6px' }}
+            />
+            <Typography variant="caption" component="span">
+              Lock Fund ( 25% )
+            </Typography>
+          </Typography>
+          <Typography sx={{ typography: 'caption', color: '#637381' }}>
+            125.000.000 / 125.000.000
+          </Typography>
+        </Stack>
+
+        <Stack direction="row" spacing={2}>
+          <Button
+            variant="outlined"
+            startIcon={<Iconify icon="bi:clipboard-check-fill" />}
+            fullWidth={true}
+            onClick={() => clickHandler('submitClaim')}
+          >
+            Submit Claim
+          </Button>
+          <Button
+            variant="contained"
+            startIcon={<Iconify icon="heroicons-solid:cash" />}
+            fullWidth={true}
+            onClick={() => clickHandler('topUpLimit')}
+          >
+            Top Up
+          </Button>
+        </Stack>
+      </>
+
+      {/* {isDialog === 'submitClaim' && (
+        <DialogNotification
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          title={dialogTitle}
+          data={data}
+        />
+      )} */}
+
+      {isDialog === 'topUpLimit' && (
+        <DialogTopUpLimit
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          title={{ name: dialogTitle, icon: 'heroicons-solid:cash' }}
+        />
+      )}
+    </RootBalanceStyle>
+  );
+}

frontend/client-portal/src/sections/dashboard/CardNotification.tsx

@@ -0,0 +1,143 @@
+// @mui
+import { styled } from '@mui/material/styles';
+import { Button, Card, Typography, Link, Divider, Stack } from '@mui/material';
+import { ChevronRight } from '@mui/icons-material';
+// components
+import Iconify from '../../components/Iconify';
+//  Section
+import DialogNotification from './DialogNotification';
+import DialogDetailClaim from './DialogDetailClaim';
+// React
+import { useState } from 'react';
+
+// ----------------------------------------------------------------------
+
+type DataContent = {
+  info: string;
+  date: string;
+  time: string;
+};
+
+type NotificationProps = {
+  data?: DataContent[];
+};
+
+// ----------------------------------------------------------------------
+
+const RootNotificationStyle = styled(Card)(({ theme }) => ({
+  boxShadow: 'none',
+  padding: '1rem 0.5rem',
+  color: 'black',
+  backgroundColor: theme.palette.grey[200],
+  maxHeight: '240px',
+}));
+
+const ItemNotificationStyle = styled(Card)(({ theme }) => ({
+  boxShadow: 'none',
+  padding: theme.spacing(1),
+  borderRadius: 0.5,
+  color: 'black',
+}));
+
+// ----------------------------------------------------------------------
+
+export default function CardNotification({ data }: NotificationProps) {
+  const [openDialog, setOpenDialog] = useState(false);
+  const [dialogTitle, setDialogTitle] = useState('');
+  const [isDialog, setIsDialog] = useState('');
+
+  const clickHandler = (isDialog: string) => {
+    switch (isDialog) {
+      case 'allNotification':
+        setDialogTitle('Notification');
+        setIsDialog(isDialog);
+        setOpenDialog(true);
+        break;
+      case 'infoDetail':
+        setDialogTitle('Claim Details');
+        setIsDialog(isDialog);
+        setOpenDialog(true);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  return (
+    <RootNotificationStyle>
+      <Stack direction="row" justifyContent="space-between" alignItems="center">
+        <Typography>
+          <Typography
+            variant="body2"
+            component="span"
+            sx={{ display: 'flex', alignItems: 'center' }}
+          >
+            <Iconify icon="eva:bell-fill" marginRight={0.75} />
+            Notification
+            <span
+              style={{
+                width: '12px',
+                height: '12px',
+                backgroundColor: '#19BBBB',
+                marginLeft: '0.5rem',
+                borderRadius: '50%',
+              }}
+            />
+          </Typography>
+        </Typography>
+        <Button
+          sx={{ typography: 'body2' }}
+          endIcon={<ChevronRight />}
+          onClick={() => clickHandler('allNotification')}
+        >
+          View All
+        </Button>
+      </Stack>
+
+      <ItemNotificationStyle sx={{ marginTop: 2, overflowY: 'auto', maxHeight: '154px' }}>
+        {data
+          ? data.map(({ info, date, time }, key) => (
+              <div key={key}>
+                {key >= 1 ? <Divider sx={{ marginY: 0.5 }} /> : ''}
+                <Stack direction="row" justifyContent="space-between" alignItems="center">
+                  <Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
+                    <Typography sx={{ typography: 'caption' }}>{info}</Typography>
+                    <Link
+                      component="button"
+                      variant="caption"
+                      underline="always"
+                      onClick={() => clickHandler('infoDetail')}
+                    >
+                      Info Detail
+                    </Link>
+                  </Stack>
+                  <Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
+                    <Typography sx={{ typography: 'caption', color: '#656565' }}>{date}</Typography>
+                    <Typography sx={{ typography: 'caption', color: '#656565' }}>{time}</Typography>
+                  </Stack>
+                </Stack>
+              </div>
+            ))
+          : ''}
+      </ItemNotificationStyle>
+
+      {isDialog === 'allNotification' && (
+        <DialogNotification
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          title={{ name: dialogTitle }}
+          data={data}
+        />
+      )}
+
+      {isDialog === 'infoDetail' && (
+        <DialogDetailClaim
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          title={{ name: dialogTitle }}
+        />
+      )}
+    </RootNotificationStyle>
+  );
+}

frontend/client-portal/src/sections/dashboard/DialogDetailClaim.tsx

@@ -0,0 +1,175 @@
+// @mui
+import {
+  Button,
+  Box,
+  Stepper,
+  Step,
+  StepLabel,
+  Card,
+  Typography,
+  Divider,
+  Stack,
+} from '@mui/material';
+import { Add } from '@mui/icons-material';
+// components
+import MuiDialog from '../../components/MuiDialog';
+// theme
+import palette from '../../theme/palette';
+// React
+import { ReactElement } from 'react';
+
+type DataContent = {
+  info: string;
+  date: string;
+  time: string;
+};
+
+type MuiDialogProps = {
+  title?: {
+    name?: string;
+    icon?: string;
+  };
+  openDialog: boolean;
+  setOpenDialog: Function;
+  content?: ReactElement;
+  data?: DataContent[];
+};
+
+const steps = ['Review', 'Approval', 'Disbursement'];
+
+const DialogDetailClaim = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
+  const getContent = () => (
+    <>
+      <Stack
+        alignItems="center"
+        justifyContent="space-between"
+        direction="row"
+        sx={{ marginTop: 1 }}
+      >
+        <Typography variant="subtitle1" sx={{ height: 'max-content' }}>
+          Claim Request
+        </Typography>
+        <Stack>
+          <Typography variant="caption">Submission date</Typography>
+          <Typography variant="caption">15 / 05 / 2022</Typography>
+        </Stack>
+      </Stack>
+      <Box sx={{ width: '100%', marginTop: 2 }}>
+        <Stepper alternativeLabel>
+          {steps.map((label) => (
+            <Step key={label}>
+              <StepLabel>{label}</StepLabel>
+            </Step>
+          ))}
+        </Stepper>
+      </Box>
+      <Stack marginTop={2}>
+        <Typography variant="subtitle1" paddingY={2}>
+          17 Mei 2022
+        </Typography>
+      </Stack>
+      <Stack direction="row" spacing={2}>
+        <Divider orientation="vertical" flexItem sx={{ borderStyle: 'dashed' }} />
+        <Stack spacing={2} sx={{ flex: 1, maxWidth: '100%' }}>
+          {/* Item 1 */}
+          <Card sx={{ paddingY: 2, paddingX: 3 }}>
+            <Stack direction="row" justifyContent="space-between" alignItems="center">
+              <Typography variant="body1">09:10 WIB</Typography>
+              <Typography
+                sx={{
+                  backgroundColor: palette.light.warning.lighter,
+                  color: palette.light.warning.dark,
+                  borderColor: palette.light.warning.dark,
+                  border: '1px solid',
+                  borderRadius: '6px',
+                  padding: 1,
+                }}
+                variant="caption"
+              >
+                Approval
+              </Typography>
+            </Stack>
+            <Divider sx={{ marginY: 2 }} />
+            <Stack>
+              <Typography variant="subtitle2" color="#404040">
+                Details : mohon melengkapi kekurangan dokumen
+              </Typography>
+              <Typography variant="caption" color="#757575" sx={{ marginTop: 2, marginBottom: 1 }}>
+                Lab pemeriksaan darah
+              </Typography>
+              <Button
+                variant="outlined"
+                startIcon={<Add />}
+                fullWidth
+                sx={{ typography: 'subtitle2', borderColor: '#F5F5F5' }}
+              >
+                Hasil Pemeriksaan Laboratorium
+              </Button>
+            </Stack>
+          </Card>
+          {/* Item 2 */}
+          <Card sx={{ flex: 1, maxWidth: '100%', paddingY: 2, paddingX: 3 }}>
+            <Stack direction="row" justifyContent="space-between" alignItems="center">
+              <Typography variant="body1">09:00 WIB</Typography>
+              <Typography
+                sx={{
+                  backgroundColor: palette.light.warning.lighter,
+                  color: palette.light.warning.dark,
+                  borderColor: palette.light.warning.dark,
+                  border: '1px solid',
+                  borderRadius: '6px',
+                  padding: 1,
+                }}
+                variant="caption"
+              >
+                Approval
+              </Typography>
+            </Stack>
+            <Divider sx={{ marginY: 2 }} />
+            <Stack>
+              <Typography variant="subtitle2" color="#404040">
+                Details : Penilaian Dokter
+              </Typography>
+            </Stack>
+          </Card>
+          {/* Item 3 */}
+          <Card sx={{ flex: 1, maxWidth: '100%', paddingY: 2, paddingX: 3 }}>
+            <Stack direction="row" justifyContent="space-between" alignItems="center">
+              <Typography variant="body1">08:00 WIB</Typography>
+              <Typography
+                sx={{
+                  backgroundColor: '#F5F5F5',
+                  color: '#757575',
+                  borderColor: '#757575',
+                  border: '1px solid',
+                  borderRadius: '6px',
+                  padding: 1,
+                }}
+                variant="caption"
+              >
+                Review
+              </Typography>
+            </Stack>
+            <Divider sx={{ marginY: 2 }} />
+            <Stack>
+              <Typography variant="subtitle2" color="#404040">
+                Details : Klaim Diajukan
+              </Typography>
+            </Stack>
+          </Card>
+        </Stack>
+      </Stack>
+    </>
+  );
+
+  return (
+    <MuiDialog
+      title={title}
+      openDialog={openDialog}
+      setOpenDialog={setOpenDialog}
+      content={getContent()}
+    />
+  );
+};
+
+export default DialogDetailClaim;

frontend/client-portal/src/sections/dashboard/DialogNotification.tsx

@@ -0,0 +1,93 @@
+// react
+import { ReactElement, useState } from 'react';
+// mui
+import { Card, Divider, Link, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+// Component
+import MuiDialog from '../../components/MuiDialog';
+// Sections
+import DialogDetailClaim from './DialogDetailClaim';
+
+type DataContent = {
+  info: string;
+  date: string;
+  time: string;
+};
+
+type MuiDialogProps = {
+  title?: {
+    name?: string;
+    icon?: string;
+  };
+  openDialog: boolean;
+  setOpenDialog: Function;
+  content?: ReactElement;
+  data?: DataContent[];
+};
+
+const ItemNotificationStyle = styled(Card)(({ theme }) => ({
+  boxShadow: 'none',
+  padding: theme.spacing(1),
+  borderRadius: 0.5,
+  color: 'black',
+}));
+
+const DialogNotification = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
+  const [openDialogClaim, setOpenDialogClaim] = useState(false);
+  const [dialogTitleClaim, setDialogTitleClaim] = useState('');
+
+  const clickHandler = () => {
+    setDialogTitleClaim('Claim Details');
+    setOpenDialogClaim(true);
+  };
+
+  const getContent = () => (
+    <Stack sx={{ marginTop: 2 }}>
+      <ItemNotificationStyle>
+        {data
+          ? data.map(({ info, date, time }: DataContent, key) => (
+              <div key={key}>
+                {key >= 1 ? <Divider sx={{ marginY: 0.5 }} /> : ''}
+                <Stack direction="row" justifyContent="space-between" alignItems="center">
+                  <Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
+                    <Typography sx={{ typography: 'caption' }}>{info}</Typography>
+                    <Link
+                      component="button"
+                      variant="caption"
+                      underline="always"
+                      onClick={clickHandler}
+                    >
+                      Info Detail
+                    </Link>
+                  </Stack>
+                  <Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
+                    <Typography sx={{ typography: 'caption', color: '#656565' }}>{date}</Typography>
+                    <Typography sx={{ typography: 'caption', color: '#656565' }}>{time}</Typography>
+                  </Stack>
+                </Stack>
+              </div>
+            ))
+          : ''}
+      </ItemNotificationStyle>
+    </Stack>
+  );
+
+  return (
+    <>
+      <MuiDialog
+        title={title}
+        openDialog={openDialog}
+        setOpenDialog={setOpenDialog}
+        content={getContent()}
+      />
+
+      <DialogDetailClaim
+        openDialog={openDialogClaim}
+        setOpenDialog={setOpenDialogClaim}
+        title={{ name: dialogTitleClaim }}
+      />
+    </>
+  );
+};
+
+export default DialogNotification;

frontend/client-portal/src/sections/dashboard/DialogTopUpLimit.tsx

@@ -0,0 +1,209 @@
+// @mui
+import { styled } from '@mui/material/styles';
+import {
+  Typography,
+  LinearProgress,
+  linearProgressClasses,
+  Stack,
+  FormControlLabel,
+} from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+import Checkbox from '@mui/material/Checkbox';
+// components
+import MuiDialog from '../../components/MuiDialog';
+import { FormProvider, RHFTextField } from '../../components/hook-form';
+// React
+import { ReactElement, useEffect, useState } from 'react';
+import { fCurrency } from '../../utils/formatNumber';
+// yup
+import * as Yup from 'yup';
+// form
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+
+// ----------------------------------------------------------------------
+
+type DataContent = {
+  info: string;
+  date: string;
+  time: string;
+};
+
+type MuiDialogProps = {
+  title?: {
+    name?: string;
+    icon?: string;
+  };
+  openDialog: boolean;
+  setOpenDialog: Function;
+  content?: ReactElement;
+  data?: DataContent[];
+};
+
+type FormValuesProps = {
+  topup: string;
+};
+
+// ----------------------------------------------------------------------
+
+const testData = {
+  companyName: 'PT. Aman Mineral',
+  policyNumber: 12345678,
+  totalMembers: 50,
+  totalCases: 100,
+  totalPersen: 75,
+  myLimit: '375.000.000',
+  totalLimit: 500000000,
+};
+
+const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
+  height: 10,
+  borderRadius: 6,
+  [`&.${linearProgressClasses.colorPrimary}`]: {
+    backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
+  },
+  [`& .${linearProgressClasses.bar}`]: {
+    borderRadius: 6,
+    background: 'linear-gradient(270deg, #19BBBB 38.42%, #FF9565 76.21%, #FE7253 104.02%)',
+  },
+}));
+
+// ----------------------------------------------------------------------
+
+const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
+  const [isDisabledCheckbox, setIsDisabledCheckbox] = useState(false);
+  const [isDisabledButton, setIsDisabledButton] = useState(true);
+
+  const TopUpSchema = Yup.object().shape({
+    topup: Yup.string()
+      /* 
+    // @ts-ignore */
+      .test('limit', 'Maximum Top Up Rp. 5.000.000', (val) => (val > 5000000 ? false : true)),
+  });
+
+  const defaultValues = {
+    topup: '0',
+  };
+
+  const methods = useForm<FormValuesProps>({
+    resolver: yupResolver(TopUpSchema),
+    defaultValues,
+  });
+
+  const {
+    setValue,
+    reset,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+  useEffect(() => {
+    if (openDialog === false) {
+      reset();
+    }
+  }, [openDialog, reset]);
+
+  const onSubmit = async (data: FormValuesProps) => {
+    reset();
+  };
+
+  const onCheckHandler = (data: FormValuesProps) => {
+    setIsDisabledCheckbox(!isDisabledCheckbox);
+    setValue('topup', '5000000');
+  };
+
+  const onTopupHandler = (value: string) => {
+    value === '0' || value === '' ? setIsDisabledButton(true) : setIsDisabledButton(false);
+    setValue('topup', value);
+  };
+
+  const getContent = () => (
+    <Stack spacing={1} marginTop={2}>
+      <Stack>
+        <Typography variant="caption" color="#637381">
+          Company Name
+        </Typography>
+        <Typography variant="body2">{testData.companyName}</Typography>
+      </Stack>
+      <Stack>
+        <Typography variant="caption" color="#637381">
+          Policy Number
+        </Typography>
+        <Typography variant="body2">{testData.policyNumber}</Typography>
+      </Stack>
+      <Stack direction="row" spacing={22}>
+        <Stack>
+          <Typography variant="caption" color="#637381">
+            Total Member
+          </Typography>
+          <Typography variant="body2">{testData.totalMembers} Person</Typography>
+        </Stack>
+        <Stack>
+          <Typography variant="caption" color="#637381">
+            Total Cases
+          </Typography>
+          <Typography variant="body2">{testData.totalCases} Cases</Typography>
+        </Stack>
+      </Stack>
+      <Stack spacing={1} sx={{ backgroundColor: '#F4F6F8', borderRadius: 1.5, padding: 2 }}>
+        <Stack direction="row" justifyContent="space-between" alignItems="center">
+          <Stack>
+            <Typography variant="body2">Company Pooled Fund</Typography>
+            <Typography variant="body2">{fCurrency(testData.myLimit)}</Typography>
+            <Typography variant="caption" color="#919EAB">
+              / {testData.totalLimit}
+            </Typography>
+          </Stack>
+          <Stack>
+            <Typography variant="h5">{testData.totalPersen}%</Typography>
+          </Stack>
+        </Stack>
+        <BorderLinearProgress variant="determinate" value={testData.totalPersen} />
+      </Stack>
+      <Stack spacing={2}>
+        <Typography variant="subtitle1" marginTop={3}>
+          Top Up Limit
+        </Typography>
+        <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+          <RHFTextField
+            name="topup"
+            label="Top Up"
+            type="number"
+            disabled={isDisabledCheckbox}
+            onChange={(e) => onTopupHandler(e.target.value)}
+          />
+          <FormControlLabel
+            sx={{ typography: 'caption' }}
+            control={<Checkbox />}
+            label={'Max ' + fCurrency(5000000)}
+            onChange={handleSubmit(onCheckHandler)}
+          />
+
+          <LoadingButton
+            fullWidth
+            size="large"
+            type="submit"
+            variant="contained"
+            loading={isSubmitting}
+            sx={{ marginTop: 2 }}
+            disabled={isDisabledButton}
+          >
+            Login
+          </LoadingButton>
+        </FormProvider>
+      </Stack>
+    </Stack>
+  );
+
+  return (
+    <MuiDialog
+      title={title}
+      openDialog={openDialog}
+      setOpenDialog={setOpenDialog}
+      content={getContent()}
+      maxWidth="xs"
+    />
+  );
+};
+
+export default DialogTopUpLimit;