Merge branch 'mhmfajar' of http://itcorp.primaya.id:3000/rajif/aso into mhmfajar

frontend/client-portal/index.html

@@ -13,8 +13,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
 
   <!-- Using Google Font -->
-  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
+    rel="stylesheet">
 
   <!-- Using Local Font -->
   <link rel="stylesheet" type="text/css" href="/fonts/index.css" />

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

@@ -0,0 +1,25 @@
+/* ---------------------------------- @mui ---------------------------------- */
+import { TablePagination, TablePaginationProps } from '@mui/material';
+import { Box } from '@mui/system';
+
+export default function BaseTablePagination({
+  count,
+  onPageChange,
+  page,
+  rowsPerPage,
+  onRowsPerPageChange,
+}: TablePaginationProps) {
+  return (
+    <Box>
+      <TablePagination
+        component="div"
+        rowsPerPageOptions={[10, 25]}
+        count={count}
+        page={page}
+        onPageChange={onPageChange}
+        rowsPerPage={rowsPerPage}
+        onRowsPerPageChange={onRowsPerPageChange}
+      />
+    </Box>
+  );
+}

frontend/client-portal/src/contexts/LaravelAuthContext.tsx

@@ -78,12 +78,9 @@ function AuthProvider({ children }: AuthProviderProps) {
 
   useEffect(() => {
     (async () => {
-      console.log('initialize', state);
-
       try {
         const accessToken = getSession();
 
-        console.log('');
         if (accessToken) {
           setSession(accessToken);
 
@@ -144,6 +141,8 @@ function AuthProvider({ children }: AuthProviderProps) {
             user,
           },
         });
+
+        return response.data;
       })
       .catch((error) => {
         if (error.response.status !== 404) throw error.response;

frontend/client-portal/src/hooks/useMap.ts

@@ -0,0 +1,50 @@
+import { useCallback, useState } from 'react'
+
+export type MapOrEntries<K, V> = Map<K, V> | [K, V][]
+
+// Public interface
+export interface Actions<K, V> {
+  set: (key: K, value: V) => void
+  setAll: (entries: MapOrEntries<K, V>) => void
+  remove: (key: K) => void
+  reset: Map<K, V>['clear']
+}
+
+// We hide some setters from the returned map to disable autocompletion
+type Return<K, V> = [Omit<Map<K, V>, 'set' | 'clear' | 'delete'>, Actions<K, V>]
+
+function useMap<K, V>(
+  initialState: MapOrEntries<K, V> = new Map(),
+): Return<K, V> {
+  const [map, setMap] = useState(new Map(initialState))
+
+  const actions: Actions<K, V> = {
+    set: useCallback((key, value) => {
+      setMap(prev => {
+        const copy = new Map(prev)
+        copy.set(key, value)
+        return copy
+      })
+    }, []),
+
+    setAll: useCallback(entries => {
+      setMap(() => new Map(entries))
+    }, []),
+
+    remove: useCallback(key => {
+      setMap(prev => {
+        const copy = new Map(prev)
+        copy.delete(key)
+        return copy
+      })
+    }, []),
+
+    reset: useCallback(() => {
+      setMap(() => new Map())
+    }, []),
+  }
+
+  return [map, actions]
+}
+
+export default useMap

frontend/client-portal/src/layouts/dashboard/header/AccountPopover.tsx

@@ -5,8 +5,9 @@ import { Box, Divider, Typography, Stack, MenuItem, Avatar } from '@mui/material
 // components
 import MenuPopover from '../../../components/MenuPopover';
 import { IconButtonAnimate } from '../../../components/animate';
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from 'react-router-dom';
 import useAuth from '../../../hooks/useAuth';
+import useLocalStorage from '../../../hooks/useLocalStorage';
 
 // ----------------------------------------------------------------------
 
@@ -32,6 +33,10 @@ export default function AccountPopover() {
   const navigate = useNavigate();
   const { logout } = useAuth();
 
+  const [emailOrPhone, setEmailOrPhone] = useLocalStorage('emailOrPhone', '');
+  const [emailOrPhoneForm, setEmailOrPhoneForm] = useLocalStorage('emailOrPhoneForm', false);
+  const [loginOrVerifyCode, setLoginOrVerifyCode] = useLocalStorage('loginOrVerifyCode', false);
+
   const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
     setOpen(event.currentTarget);
   };
@@ -41,9 +46,12 @@ export default function AccountPopover() {
   };
 
   const handleLogout = () => {
+    setEmailOrPhone('');
+    setEmailOrPhoneForm(false);
+    setLoginOrVerifyCode(false);
     logout();
     navigate('/auth/login');
-  }
+  };
 
   return (
     <>
@@ -105,7 +113,9 @@ export default function AccountPopover() {
 
         <Divider sx={{ borderStyle: 'dashed' }} />
 
-        <MenuItem sx={{ m: 1 }} onClick={handleLogout}>Logout</MenuItem>
+        <MenuItem sx={{ m: 1 }} onClick={handleLogout}>
+          Logout
+        </MenuItem>
       </MenuPopover>
     </>
   );

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

@@ -11,10 +11,10 @@ const navConfig = [
   {
     subheader: 'Case Management',
     items: [
-      {
+      // {
-        title: 'Alarm Center',
+      //   title: 'Alarm Center',
-        path: '/alarm-center',
+      //   path: '/alarm-center',
-      },
+      // },
       {
         title: 'Claim Report',
         path: '/claim-report',

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

@@ -16,7 +16,6 @@ import Scrollbar from '../../../components/Scrollbar';
 import { NavSectionVertical } from '../../../components/nav-section';
 //
 import navConfig from './NavConfig';
-import NavbarDocs from './NavbarDocs';
 import NavbarAccount from './NavbarAccount';
 import CollapseButton from './CollapseButton';
 
@@ -76,7 +75,7 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
           <Stack direction="row" alignItems="center" justifyContent="space-between">
             <Stack direction="row" alignItems="center">
               <Logo />
-              <Typography ml={3}>PRIME CENTER</Typography>
+              <Typography ml={3}>Client Portal</Typography>
             </Stack>
             <CollapseButton onToggleCollapse={onToggleCollapse} collapseClick={collapseClick} />
           </Stack>
@@ -92,8 +91,6 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
       <NavSectionVertical navConfig={navConfig} isCollapse={isCollapse} />
 
       <Box sx={{ flexGrow: 1 }} />
-
-      {!isCollapse && <NavbarDocs />}
     </Scrollbar>
   );
 

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

@@ -1,19 +1,101 @@
-// mui
+/* ---------------------------------- react --------------------------------- */
-import { Container, Grid, Card } from '@mui/material';
+import { useState, SyntheticEvent } from 'react';
-// components
+/* ---------------------------------- @mui ---------------------------------- */
+import { Box, Tabs, Tab, Container, Grid, Card } from '@mui/material';
+import { styled } from '@mui/material/styles';
+/* ------------------------------- components ------------------------------- */
 import Page from '../../components/Page';
-// utils
+/* ---------------------------------- hooks --------------------------------- */
 import useSettings from '../../hooks/useSettings';
-// sections
-// import ListTable from '../../sections/claimreports/ListTable';
-// import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';
-
 import List from './List';
 
+/* ------------------------------ tabs setting ------------------------------ */
+
+/* ---------------------------------- types --------------------------------- */
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+interface StyledTabsProps {
+  children?: React.ReactNode;
+  value: number;
+  onChange: (event: React.SyntheticEvent, newValue: number) => void;
+}
+
+interface StyledTabProps {
+  label: string;
+  icon?: string | React.ReactElement;
+}
+
+/* -------------------------------- tab style ------------------------------- */
+
+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}`}
+      {...other}
+    >
+      {value === index && <Box>{children}</Box>}
+    </div>
+  );
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+const StyledTabs = styled((props: StyledTabsProps) => <Tabs {...props} />)({
+  backgroundColor: '#F4F6F8',
+  padding: '0 24px',
+  '& .MuiTabs-indicator': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    backgroundColor: 'transparent',
+  },
+  '& .MuiTabs-indicatorSpan': {
+    maxWidth: 40,
+    backgroundColor: '#635ee7',
+  },
+});
+
+const StyledTab = styled((props: StyledTabProps) => <Tab disableRipple {...props} />)(
+  ({ theme }) => ({
+    textTransform: 'none',
+    fontWeight: 600,
+    color: theme.palette.grey[600],
+    marginRight: '5rem',
+    '&.Mui-selected': {
+      color: '#212B36',
+      borderBottom: '2px solid ' + theme.palette.primary.main,
+    },
+    '&:hover': {
+      color: '#212B36',
+      opacity: 1,
+      borderBottom: '2px solid ' + theme.palette.primary.main,
+    },
+  })
+);
+
+/* -------------------------------------------------------------------------- */
+
 export default function Drugs() {
   const { themeStretch } = useSettings();
 
-  // const { corporate_id } = useParams();
+  const [value, setValue] = useState(0);
+  const handleChange = (event: SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
 
   return (
     <Page title="Alarm Center">
@@ -21,7 +103,22 @@ export default function Drugs() {
         <Grid container>
           <Grid item xs={12} lg={12} md={12}>
             <Card>
-              <List />
+              <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                <StyledTabs value={value} onChange={handleChange} aria-label="basic tabs example">
+                  <StyledTab label="All Data (20)" {...a11yProps(0)} />
+                  <StyledTab label="Ongoing (5)" {...a11yProps(1)} />
+                  <StyledTab label="Done (15)" {...a11yProps(2)} />
+                </StyledTabs>
+              </Box>
+              <TabPanel value={value} index={0}>
+                <List />
+              </TabPanel>
+              <TabPanel value={value} index={1}>
+                Item Two
+              </TabPanel>
+              <TabPanel value={value} index={2}>
+                Item Two
+              </TabPanel>
             </Card>
           </Grid>
         </Grid>

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

@@ -1,16 +1,6 @@
-// @mui
+/* ---------------------------------- @mui ---------------------------------- */
 import {
-  Box,
-  Button,
-  Card,
-  Collapse,
-  IconButton,
-  InputLabel,
-  MenuItem,
-  OutlinedInput,
   Paper,
-  Select,
-  SelectChangeEvent,
   Table,
   TableBody,
   TableCell,
@@ -18,400 +8,323 @@ import {
   TableHead,
   TableRow,
   TextField,
-  Typography,
-  Badge,
-  Tab,
-  Tabs,
-  CardHeader,
   Stack,
-  Menu,
+  Button,
-  ButtonGroup,
+  TableSortLabel,
-  Pagination,
+  Box,
-  Grid,
 } from '@mui/material';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import { visuallyHidden } from '@mui/utils';
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+/* ---------------------------------- axios --------------------------------- */
-import AddIcon from '@mui/icons-material/Add';
+import axios from 'axios';
-import UploadIcon from '@mui/icons-material/Upload';
+/* ---------------------------------- react --------------------------------- */
-import CancelIcon from '@mui/icons-material/Cancel';
+import { useEffect, useState } from 'react';
-// hooks
+/* -------------------------------- component ------------------------------- */
-import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
+import Iconify from '../../components/Iconify';
-import useSettings from '../../hooks/useSettings';
+import BaseTablePagination from '../../components/BaseTablePagination';
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+/* ---------------------------------- hooks --------------------------------- */
-// components
+import useMap from '../../hooks/useMap';
-import axios from '../../utils/axios';
+/* ---------------------------------- theme --------------------------------- */
-import { LaravelPaginatedData } from '../../@types/paginated-data';
+import palette from '../../theme/palette';
-import { Icd } from '../../@types/diagnosis';
+
-import BasePagination from '../../components/BasePagination';
+/* ---------------------------------- types --------------------------------- */
-import { Member } from '../../@types/member';
+
+type PaginationTableProps = {
+  current_page: number;
+  from: number;
+  last_page: number;
+  links: [];
+  path: string;
+  per_page: number;
+  to: number;
+  total: number;
+};
+
+type DataTableProps = {
+  name: string;
+  member_id: string;
+  service: string;
+  start_date: string;
+  end_date: string;
+  status: string;
+};
+
+/* -------------------------------------------------------------------------- */
+
+/* -------------------------- enchanced table head -------------------------- */
+
+type Order = 'asc' | 'desc';
+
+interface HeadCell {
+  id: string;
+  label: string;
+}
+
+const headCells: readonly HeadCell[] = [
+  {
+    id: 'name',
+    label: 'Name',
+  },
+  {
+    id: 'member_id',
+    label: 'Member ID',
+  },
+  {
+    id: 'service',
+    label: 'Service',
+  },
+  {
+    id: 'start_date',
+    label: 'Start Date',
+  },
+  {
+    id: 'end_date',
+    label: 'End Date',
+  },
+  {
+    id: 'status',
+    label: 'Status',
+  },
+];
+
+interface EnhancedTableProps {
+  onRequestSort: (event: React.MouseEvent<unknown>, property: string) => void;
+  order: Order;
+  orderBy: string;
+}
+
+function EnhancedTableHead(props: EnhancedTableProps) {
+  const { order, orderBy, onRequestSort } = props;
+  const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
+    onRequestSort(event, property);
+  };
+
+  return (
+    <TableHead>
+      <TableRow>
+        <TableCell align="center">No</TableCell>
+        {headCells.map((headCell) => (
+          <TableCell
+            key={headCell.id}
+            sortDirection={orderBy === headCell.id ? order : false}
+            align="center"
+          >
+            <TableSortLabel
+              active={orderBy === headCell.id}
+              direction={orderBy === headCell.id ? order : 'asc'}
+              onClick={createSortHandler(headCell.id)}
+            >
+              {headCell.label}
+              {orderBy === headCell.id ? (
+                <Box component="span" sx={visuallyHidden}>
+                  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                </Box>
+              ) : null}
+            </TableSortLabel>
+          </TableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
 
 export default function List() {
-  const navigate = useNavigate();
+  const [order, setOrder] = useState<Order>('asc');
-  const { themeStretch } = useSettings();
+  const [orderBy, setOrderBy] = useState('name');
-  const { corporate_id } = useParams();
+  const [customSearchParams, setCustomSearchParams] = useMap<string, any>();
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [isLoading, setIsLoading] = useState(true);
-  const [importResult, setImportResult] = useState(null);
+  const [dataTable, setDataTable] = useState([]);
-
+  const [page, setPage] = useState(0);
-  function SearchInput(props: any) {
+  const [rowsPerPage, setRowsPerPage] = useState(10);
-    // SEARCH
+  const [paginationTable, setPaginationTable] = useState<PaginationTableProps>({
-    const searchInput = useRef<HTMLInputElement>(null);
+    current_page: 0,
-    const [searchText, setSearchText] = useState('');
-
-    const handleSearchChange = (event: any) => {
-      const newSearchText = event.target.value ?? '';
-      setSearchText(newSearchText);
-    };
-
-    const handleSearchSubmit = (event: any) => {
-      event.preventDefault();
-      props.onSearch(searchText); // Trigger to Parent
-    };
-
-    useEffect(() => {
-      // Trigger First Search
-      setSearchText(searchParams.get('search') ?? '');
-    }, [searchParams]);
-
-    return (
-      <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
-        <TextField
-          id="search-input"
-          ref={searchInput}
-          label="Search"
-          variant="outlined"
-          fullWidth
-          onChange={handleSearchChange}
-          value={searchText}
-        />
-      </form>
-    );
-  }
-
-  function ImportForm(props: any) {
-    // IMPORT
-    // Create Button Menu
-    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-    const createMenu = Boolean(anchorEl);
-    const importForm = useRef<HTMLInputElement>(null);
-    const [currentImportFileName, setCurrentImportFileName] = useState(null);
-
-    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-      setAnchorEl(event.currentTarget);
-    };
-
-    const handleClose = () => {
-      setAnchorEl(null);
-    };
-
-    const handleImportButton = () => {
-      if (importForm?.current) {
-        handleClose();
-        importForm.current ? importForm.current.click() : console.log('No File selected');
-      } else {
-        alert('No file selected');
-      }
-    };
-
-    const handleCancelImportButton = () => {
-      importForm.current.value = '';
-      importForm.current.dispatchEvent(new Event('change', { bubbles: true }));
-    };
-
-    const handleImportChange = (event: any) => {
-      if (event.target.files[0]) {
-        setCurrentImportFileName(event.target.files[0].name);
-      } else {
-        setCurrentImportFileName(null);
-      }
-    };
-
-    const handleUpload = () => {
-      if (importForm.current?.files.length) {
-        const formData = new FormData();
-        formData.append('file', importForm.current?.files[0]);
-        axios
-          .post(`master/formularium/import`, formData)
-          .then((response) => {
-            handleCancelImportButton();
-            loadDataTableData();
-            setImportResult(response.data);
-            // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
-          })
-          .catch((response) => {
-            alert(
-              'Looks like something went wrong. Please check your data and try again. ' +
-                response.message
-            );
-          });
-      } else {
-        alert('No File Selected');
-      }
-    };
-
-    return (
-      <div>
-        <input
-          type="file"
-          id="file"
-          ref={importForm}
-          style={{ display: 'none' }}
-          onChange={handleImportChange}
-          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
-        />
-        {!currentImportFileName && (
-          <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
-            <SearchInput onSearch={applyFilter} />
-          </Stack>
-        )}
-
-        {currentImportFileName && (
-          <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
-            <ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
-              <Button onClick={handleImportButton} fullWidth>
-                {currentImportFileName ?? 'No File Selected'}
-              </Button>
-              <Button
-                onClick={handleCancelImportButton}
-                size="small"
-                fullWidth={false}
-                sx={{ p: 1.8 }}
-              >
-                <CancelIcon color="error" />
-              </Button>
-            </ButtonGroup>
-
-            <Button
-              id="upload-button"
-              variant="outlined"
-              startIcon={<UploadIcon />}
-              sx={{ p: 1.8 }}
-              onClick={handleUpload}
-            >
-              Upload
-            </Button>
-          </Stack>
-        )}
-        {importResult && (
-          <Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
-            <Box sx={{ color: 'text.secondary' }}>
-              Last Import Result Report :{' '}
-              <a href={importResult.result_file?.url ?? '#'}>
-                {importResult.result_file?.name ?? '-'}
-              </a>
-            </Box>
-          </Stack>
-        )}
-      </div>
-    );
-  }
-
-  // Called on every row to map the data to the columns
-  function createData(member: Member): Member {
-    return {
-      ...member,
-    };
-  }
-
-  // Generate the every row of the table
-  function Row(props: { row: ReturnType<typeof createData> }) {
-    const { row } = props;
-    const [open, setOpen] = React.useState(true);
-
-    return (
-      <React.Fragment>
-        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
-          <TableCell>
-            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
-              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
-            </IconButton>
-          </TableCell>
-          <TableCell align="left">{row.member_id}</TableCell>
-          <TableCell align="left">{row.payor_id}</TableCell>
-          <TableCell align="left">{row.name}</TableCell>
-          <TableCell align="left">{row.nik}</TableCell>
-          <TableCell align="left">{row.nric}</TableCell>
-
-          <TableCell align="right">
-            <Button variant="outlined" color="success" size="small">
-              Active
-            </Button>
-          </TableCell>
-          {/* <TableCell align="right"><Button variant="outlined" color="error" size="small">Disable</Button></TableCell> */}
-        </TableRow>
-        {/* COLLAPSIBLE ROW */}
-        <TableRow>
-          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
-            <Collapse in={open} timeout="auto" unmountOnExit>
-              <Box sx={{ borderBottom: 1 }}>
-                <Typography variant="body2" gutterBottom component="div">
-                  <Grid></Grid>
-                </Typography>
-              </Box>
-            </Collapse>
-          </TableCell>
-        </TableRow>
-      </React.Fragment>
-    );
-  }
-
-  // Dummy Default Data
-  const [dataTableIsLoading, setDataTableLoading] = useState(true);
-  const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
-  const [dataTableResponseState, setDataTableResponseState] = useState('idle');
-  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
-    current_page: 1,
-    data: [],
-    path: '',
-    first_page_url: '',
-    last_page: 1,
-    last_page_url: '',
-    next_page_url: '',
-    prev_page_url: '',
-    per_page: 10,
     from: 0,
+    last_page: 0,
+    links: [],
+    path: '',
+    per_page: 0,
     to: 0,
     total: 0,
   });
-  const [dataTablePage, setDataTablePage] = useState(5);
 
-  const loadDataTableData = async (appliedFilter: any | null = null) => {
+  /* ------------------------------- handle sort ------------------------------ */
-    setDataTableLoading(true);
+  const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
-    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const isAsc = orderBy === property && order === 'asc';
-    const response = await axios.get('/members', { params: filter });
+    setOrder(isAsc ? 'desc' : 'asc');
+    setOrderBy(property);
+    const params = Object.fromEntries([
+      ...customSearchParams.entries(),
+      ['order', isAsc ? 'desc' : 'asc'],
+      ['orderBy', property],
+    ]);
+    setIsLoading(true);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    loadDataTable(params);
+    setIsLoading(false);
+  };
+  /* -------------------------------------------------------------------------- */
 
-    setDataTableData(response.data.members);
+  /* ------------------------------ Search field ------------------------------ */
-    setDataTableLoading(false);
+  const [searchText, setSearchText] = useState('');
+
+  const handleSearch = (event: any) => {
+    setSearchText(event.target.value);
   };
 
-  const headStyle = {
+  const handleSearchSubmit = async (event: any) => {
-    fontWeight: 'bold',
+    event.preventDefault();
+    const params = Object.fromEntries([...customSearchParams.entries(), ['search', searchText]]);
+    setIsLoading(true);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    loadDataTable(params);
+    setIsLoading(false);
   };
+  /* -------------------------------------------------------------------------- */
 
-  const applyFilter = async (searchFilter: string) => {
+  /* --------------------------- Load Data Table API -------------------------- */
-    await loadDataTableData({ search: searchFilter });
+  const loadDataTable = async (appliedParams: any | null = null) => {
-    setSearchParams({ search: searchFilter });
+    setIsLoading(true);
-  };
 
-  const handlePageChange = (event: ChangeEvent, value: number) => {
+    const params = appliedParams
-    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
+      ? appliedParams
-    loadDataTableData(filter);
+      : Object.fromEntries([
-    setSearchParams(filter);
+          ...customSearchParams.entries(),
+          ['order', order],
+          ['orderBy', orderBy],
+        ]);
+    const response = await axios.get('http://localhost:8001/api/alarm-center', { params: params });
+
+    setDataTable(response.data.data);
+    setPaginationTable(response.data.meta);
+    setRowsPerPage(response.data.meta.per_page);
+    setIsLoading(false);
   };
+  /* -------------------------------------------------------------------------- */
+
+  /* ------------------------ button change pagination ------------------------ */
+  const onPageChangeHandle = async (event: unknown, newPage: number) => {
+    const params = Object.fromEntries([...customSearchParams.entries(), ['page', newPage + 1]]);
+    setPage(newPage);
+    setIsLoading(true);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    loadDataTable(params);
+    setIsLoading(false);
+    setCustomSearchParams.set('page', newPage + 1);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* ----------------------- row page per limit on click ---------------------- */
+  const onRowsPerPageChangeHandle = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    setPage(0);
+    const params = Object.fromEntries([
+      ...customSearchParams.entries(),
+      ['page', 0],
+      ['per_page', parseInt(event.target.value, 10)],
+    ]);
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setIsLoading(true);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    loadDataTable(params);
+    setIsLoading(false);
+    setCustomSearchParams.set('per_page', parseInt(event.target.value, 10));
+  };
+  /* -------------------------------------------------------------------------- */
 
   useEffect(() => {
-    loadDataTableData();
+    loadDataTable();
   }, []);
 
   return (
     <Stack>
-      <Stack
+      {/* Search */}
-        direction="row"
+      <form onSubmit={handleSearchSubmit} style={{ width: '100%', padding: '20px 24px' }}>
-        spacing={5}
+        <TextField
-        sx={{ backgroundColor: '#F4F6F8', paddingX: 3, paddingY: '13px' }}
+          id="search-input"
-      >
+          label="Search"
-        <Button variant="subtitle2" sx={{ position: 'relative' }}>
+          variant="outlined"
-          All Data ( Count )
+          fullWidth
-          <Typography
+          onChange={handleSearch}
-            sx={{
+          value={searchText}
-              borderBottom: '2px solid #19BBBB',
+        />
-              borderRadius: '1px',
+      </form>
-              position: 'absolute',
-              bottom: '-13px',
-              left: 0,
-              width: '100%',
-            }}
-            component="span"
-          />
-        </Button>
-        <Button variant="subtitle2" sx={{ position: 'relative' }}>
-          Ongoing ( Count )
-          {/* <Typography
-            sx={{
-              borderBottom: '2px solid #19BBBB',
-              borderRadius: '1px',
-              position: 'absolute',
-              bottom: '-13px',
-              left: 0,
-              width: '100%',
-            }}
-            component="span"
-          /> */}
-        </Button>
-        <Button variant="subtitle2" sx={{ position: 'relative' }}>
-          Done ( Count )
-          {/* <Typography
-            sx={{
-              borderBottom: '2px solid #19BBBB',
-              borderRadius: '1px',
-              position: 'absolute',
-              bottom: '-13px',
-              left: 0,
-              width: '100%',
-            }}
-            component="span"
-          /> */}
-        </Button>
-      </Stack>
 
-      <ImportForm />
+      {/* The Main Table */}
-
+      <TableContainer component={Paper}>
-      <Card>
+        <Table aria-label="collapsible table">
-        {/* The Main Table */}
+          <EnhancedTableHead order={order} orderBy={orderBy} onRequestSort={handleRequestSort} />
-        <TableContainer component={Paper}>
+          <TableBody>
-          <Table aria-label="collapsible table">
+            {isLoading ? (
-            <TableBody>
               <TableRow>
-                <TableCell style={headStyle} align="left">
+                <TableCell colSpan={8} align="center">
-                  No
+                  Loading . . .
-                </TableCell>
-                <TableCell style={headStyle} align="left">
-                  Name
-                </TableCell>
-                <TableCell style={headStyle} align="left">
-                  Member ID
-                </TableCell>
-                <TableCell style={headStyle} align="left">
-                  Service
-                </TableCell>
-                <TableCell style={headStyle} align="left">
-                  Start Date
-                </TableCell>
-                <TableCell style={headStyle} align="left">
-                  End Date
-                </TableCell>
-                <TableCell style={headStyle} align="right" width={100}>
-                  Status
                 </TableCell>
               </TableRow>
-            </TableBody>
+            ) : dataTable.length >= 1 ? (
-            {dataTableIsLoading ? (
+              dataTable.map((row: DataTableProps, index) => (
-              <TableBody>
+                <TableRow key={index}>
-                <TableRow>
+                  <TableCell align="center">{paginationTable.from + index++}</TableCell>
-                  <TableCell colSpan={8} align="center">
+                  <TableCell align="center">{row.name}</TableCell>
-                    Loading
+                  <TableCell align="center">{row.member_id}</TableCell>
+                  <TableCell align="center">{row.service}</TableCell>
+                  <TableCell align="center">{row.start_date}</TableCell>
+                  <TableCell align="center">{row.end_date}</TableCell>
+                  <TableCell align="center">
+                    {row.status.toLowerCase() === 'done' ? (
+                      <Button
+                        startIcon={<Iconify icon="ic:round-check" />}
+                        sx={{
+                          backgroundColor: palette.light.grey[300],
+                          color: palette.light.grey[800],
+                          paddingX: 1.5,
+                          paddingY: 1,
+                          '&:hover': {
+                            backgroundColor: palette.light.grey[400],
+                            color: palette.light.grey[800],
+                          },
+                        }}
+                      >
+                        {row.status}
+                      </Button>
+                    ) : (
+                      <Button
+                        startIcon={<Iconify icon="fa6-solid:clock" />}
+                        sx={{
+                          backgroundColor: '#CD7B2E',
+                          color: '#FFFF',
+                          paddingX: 1.5,
+                          paddingY: 1,
+                          '&:hover': {
+                            backgroundColor: '#BF6919',
+                            color: '#FFFF',
+                          },
+                        }}
+                      >
+                        {row.status}
+                      </Button>
+                    )}
                   </TableCell>
                 </TableRow>
-              </TableBody>
+              ))
-            ) : dataTableData.data.length === 0 ? (
-              <TableBody>
-                <TableRow>
-                  <TableCell colSpan={8} align="center">
-                    No Data
-                  </TableCell>
-                </TableRow>
-              </TableBody>
             ) : (
-              <TableBody>
+              <TableRow>
-                {dataTableData.data.map((row) => (
+                <TableCell colSpan={8} align="center">
-                  <Row key={row.id} row={row} />
+                  No Data Found
-                ))}
+                </TableCell>
-              </TableBody>
+              </TableRow>
             )}
-          </Table>
+          </TableBody>
-        </TableContainer>
+        </Table>
+      </TableContainer>
 
-        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
+      {/* Pagination */}
-      </Card>
+      <BaseTablePagination
+        count={paginationTable.total}
+        onPageChange={onPageChangeHandle}
+        page={page}
+        rowsPerPage={rowsPerPage}
+        onRowsPerPageChange={onRowsPerPageChangeHandle}
+      />
     </Stack>
   );
 }

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

@@ -1,6 +1,5 @@
 // mui
 import {
-  Button,
   Box,
   Tabs,
   Tab,
@@ -18,7 +17,7 @@ import Page from '../../components/Page';
 import Iconify from '../../components/Iconify';
 // utils
 import useSettings from '../../hooks/useSettings';
-import { useRef, useState, SyntheticEvent } from 'react';
+import { useState, SyntheticEvent } from 'react';
 // sections
 // import ListTable from '../../sections/claimreports/ListTable';
 // import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';
@@ -102,7 +101,7 @@ const StyledTab = styled((props: StyledTabProps) => <Tab disableRipple {...props
   })
 );
 
-export default function Drugs() {
+export default function ServiceMonitoring() {
   const { themeStretch } = useSettings();
 
   const [value, setValue] = useState(0);

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

@@ -0,0 +1,63 @@
+// mui
+import { IconButton, Container, Grid, Stack, Typography } from '@mui/material';
+// components
+import Page from '../../components/Page';
+import Iconify from '../../components/Iconify';
+// utils
+import useSettings from '../../hooks/useSettings';
+// section
+import CardPersonalInformation from '../../sections/alarm-center/user-profile/CardPersonalInformation';
+import CardFamilyInformation from '../../sections/alarm-center/user-profile/CardFamilyInformation';
+import CardPolicyNumber from '../../sections/alarm-center/user-profile/CardPolicyNumber';
+import CardBenefitSummary from '../../sections/alarm-center/user-profile/CardBenefitSummary';
+import CardClaimHistory from '../../sections/alarm-center/user-profile/CardClaimHistory';
+// react
+import { useNavigate } from 'react-router';
+
+// ----------------------------------------------------------------------
+
+export default function UserProfile() {
+  const { themeStretch } = useSettings();
+  const navigate = useNavigate();
+
+  return (
+    <Page title="Profile Peserta Jessica Lie">
+      <Container maxWidth={themeStretch ? false : 'xl'}>
+        <Stack direction="row" alignItems="center" sx={{ marginBottom: 2 }}>
+          <IconButton sx={{ marginRight: '10px', color: '#424242' }} onClick={() => navigate(-1)}>
+            <Iconify icon="heroicons-outline:arrow-narrow-left" />
+          </IconButton>
+          <Typography variant="h5">Profil Peserta</Typography>
+        </Stack>
+        <Grid container spacing={2}>
+          {/* Row 1 */}
+          <Grid item xs={12} md={6}>
+            <Grid container spacing={2}>
+              {/* Item 1 */}
+              <Grid item xs={12} md={12}>
+                <CardPersonalInformation />
+              </Grid>
+              {/* Item 2 */}
+              <Grid item xs={12} md={12}>
+                <CardFamilyInformation />
+              </Grid>
+            </Grid>
+          </Grid>
+          {/* Row 2 */}
+          <Grid item xs={12} md={6}>
+            <Grid container spacing={2}>
+              {/* Item 1 */}
+              <Grid item xs={12}>
+                <CardPolicyNumber />
+              </Grid>
+              {/* Item 2 */}
+              <Grid item xs={12}>
+                <CardClaimHistory />
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Container>
+    </Page>
+  );
+}

frontend/client-portal/src/pages/ClaimReports/Index.tsx

@@ -1,30 +0,0 @@
-// mui
-import { Container, Grid } from '@mui/material';
-// components
-import Page from '../../components/Page';
-// utils
-import useSettings from '../../hooks/useSettings';
-// sections
-import ListTable from '../../sections/claimreports/ListTable';
-import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';
-
-export default function Drugs() {
-  const { themeStretch } = useSettings();
-
-  // const { corporate_id } = useParams();
-
-  return (
-    <Page title="Claim Reports">
-      <Container maxWidth={themeStretch ? false : 'xl'}>
-        <Grid container spacing={2}>
-          <Grid item xs={12} lg={12} md={12}>
-            <ClaimStatusCard />
-          </Grid>
-          <Grid item xs={12} lg={12} md={12}>
-            <ListTable />
-          </Grid>
-        </Grid>
-      </Container>
-    </Page>
-  );
-}

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

@@ -4,11 +4,11 @@ import { Typography, Container, Grid } from '@mui/material';
 import useSettings from '../../hooks/useSettings';
 // components
 import Page from '../../components/Page';
-// Table
-import List from './List';
 // theme
 import CardNotification from '../../sections/dashboard/CardNotification';
 import CardBalance from '../../sections/dashboard/CardBalance';
+import TableList from '../../sections/dashboard/TableList';
+import List from './List';
 
 // ----------------------------------------------------------------------
 
@@ -56,12 +56,11 @@ export default function Dashboard() {
             <CardBalance />
           </Grid>
           <Grid item xs={12} lg={12} md={12}>
+            <TableList />
             {/* <List /> */}
           </Grid>
         </Grid>
       </Container>
-
-      {/* <DialogDetailClaim /> */}
     </Page>
   );
 }

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

@@ -0,0 +1,373 @@
+// @mui
+import {
+  Box,
+  Button,
+  Card,
+  Collapse,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+  Badge,
+  Tab,
+  Tabs,
+  CardHeader,
+  Stack,
+  Menu,
+  ButtonGroup,
+  Pagination,
+  Grid,
+  Autocomplete,
+} from '@mui/material';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import AddIcon from '@mui/icons-material/Add';
+import UploadIcon from '@mui/icons-material/Upload';
+import CancelIcon from '@mui/icons-material/Cancel';
+// hooks
+import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
+import useSettings from '../../hooks/useSettings';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+// components
+import axios from '../../utils/axios';
+import { LaravelPaginatedData } from '../../@types/paginated-data';
+import { Icd } from '../../@types/diagnosis';
+import BasePagination from '../../components/BasePagination';
+import { Member } from '../../@types/member';
+import Iconify from '../../components/Iconify';
+
+const options = [
+  { label: 'The Shawshank Redemption', value: 1994 },
+  { label: 'The Godfather', year: 1972 },
+  { label: 'The Godfather: Part II', year: 1974 },
+  { label: 'The Dark Knight', year: 2008 },
+  { label: '12 Angry Men', year: 1957 },
+  { label: "Schindler's List", year: 1993 },
+  { label: 'Pulp Fiction', year: 1994 },
+];
+
+export default function List() {
+  const navigate = useNavigate();
+  const { themeStretch } = useSettings();
+  const { corporate_id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [importResult, setImportResult] = useState(null);
+
+  function SearchInput(props: any) {
+    // SEARCH
+    const searchInput = useRef<HTMLInputElement>(null);
+    const [searchText, setSearchText] = useState('');
+
+    const [value, setValue] = useState<string | null>(options[0]);
+    const [inputValue, setInputValue] = useState('');
+
+    const handleSearchChange = (event: any) => {
+      const newSearchText = event.target.value ?? '';
+      setSearchText(newSearchText);
+    };
+
+    const handleSearchSubmit = (event: any) => {
+      event.preventDefault();
+      props.onSearch(searchText); // Trigger to Parent
+    };
+
+    useEffect(() => {
+      // Trigger First Search
+      setSearchText(searchParams.get('search') ?? '');
+      console.log(value, inputValue);
+    }, [searchParams, value, inputValue]);
+
+    return (
+      <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+        <Stack direction="row" spacing={2}>
+          <Autocomplete
+            value={value}
+            onChange={(event: any, newValue: string | null) => {
+              setValue(newValue);
+            }}
+            inputValue={inputValue}
+            onInputChange={(event, newInputValue) => {
+              setInputValue(newInputValue);
+            }}
+            id="controllable-states-demo"
+            options={options}
+            sx={{ width: 300 }}
+            renderInput={(params) => <TextField {...params} label="Division" />}
+          />
+          <TextField
+            id="search-input"
+            ref={searchInput}
+            label="Search"
+            variant="outlined"
+            fullWidth
+            onChange={handleSearchChange}
+            value={searchText}
+          />
+        </Stack>
+      </form>
+    );
+  }
+
+  function ImportForm(props: any) {
+    // IMPORT
+    // Create Button Menu
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const createMenu = Boolean(anchorEl);
+    const importForm = useRef<HTMLInputElement>(null);
+    const [currentImportFileName, setCurrentImportFileName] = useState(null);
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
+
+    const handleImportButton = () => {
+      if (importForm?.current) {
+        handleClose();
+        importForm.current ? importForm.current.click() : console.log('No File selected');
+      } else {
+        alert('No file selected');
+      }
+    };
+
+    const handleCancelImportButton = () => {
+      importForm.current.value = '';
+      importForm.current.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+
+    const handleImportChange = (event: any) => {
+      if (event.target.files[0]) {
+        setCurrentImportFileName(event.target.files[0].name);
+      } else {
+        setCurrentImportFileName(null);
+      }
+    };
+
+    const handleUpload = () => {
+      if (importForm.current?.files.length) {
+        const formData = new FormData();
+        formData.append('file', importForm.current?.files[0]);
+        axios
+          .post(`master/formularium/import`, formData)
+          .then((response) => {
+            handleCancelImportButton();
+            loadDataTableData();
+            setImportResult(response.data);
+            // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
+          })
+          .catch((response) => {
+            alert(
+              'Looks like something went wrong. Please check your data and try again. ' +
+                response.message
+            );
+          });
+      } else {
+        alert('No File Selected');
+      }
+    };
+
+    return (
+      <Stack direction="row" spacing={2} padding={2}>
+        <SearchInput onSearch={applyFilter} />
+        <Button
+          id="import-button"
+          variant="outlined"
+          startIcon={<Iconify icon="material-symbols:download-rounded" />}
+          sx={{ paddingY: '15px', paddingX: '22px', flex: '10%' }}
+          component="label"
+        >
+          Import
+          <input
+            type="file"
+            id="file"
+            ref={importForm}
+            style={{ display: 'none' }}
+            onChange={handleImportChange}
+            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
+          />
+        </Button>
+        <Button
+          id="import-button"
+          variant="contained"
+          startIcon={<AddIcon />}
+          sx={{ paddingY: '15px', paddingX: '22px', flex: '15%' }}
+          onClick={handleClick}
+        >
+          Add Data
+        </Button>
+      </Stack>
+    );
+  }
+
+  // Called on every row to map the data to the columns
+  function createData(member: Member): Member {
+    return {
+      ...member,
+    };
+  }
+
+  // Generate the every row of the table
+  function Row(props: { row: ReturnType<typeof createData> }) {
+    const { row } = props;
+    const [open, setOpen] = React.useState(true);
+
+    return (
+      <React.Fragment>
+        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
+          <TableCell>
+            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
+              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
+            </IconButton>
+          </TableCell>
+          <TableCell align="left">{row.member_id}</TableCell>
+          <TableCell align="left">{row.payor_id}</TableCell>
+          <TableCell align="left">{row.name}</TableCell>
+          <TableCell align="left">{row.nik}</TableCell>
+          <TableCell align="left">{row.nric}</TableCell>
+
+          <TableCell align="right">
+            <Button variant="outlined" color="success" size="small">
+              Active
+            </Button>
+          </TableCell>
+          {/* <TableCell align="right"><Button variant="outlined" color="error" size="small">Disable</Button></TableCell> */}
+        </TableRow>
+        {/* COLLAPSIBLE ROW */}
+        <TableRow>
+          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
+            <Collapse in={open} timeout="auto" unmountOnExit>
+              <Box sx={{ borderBottom: 1 }}>
+                <Typography variant="body2" gutterBottom component="div">
+                  <Grid></Grid>
+                </Typography>
+              </Box>
+            </Collapse>
+          </TableCell>
+        </TableRow>
+      </React.Fragment>
+    );
+  }
+
+  // Dummy Default Data
+  const [dataTableIsLoading, setDataTableLoading] = useState(true);
+  const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
+  const [dataTableResponseState, setDataTableResponseState] = useState('idle');
+  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
+    current_page: 1,
+    data: [],
+    path: '',
+    first_page_url: '',
+    last_page: 1,
+    last_page_url: '',
+    next_page_url: '',
+    prev_page_url: '',
+    per_page: 10,
+    from: 0,
+    to: 0,
+    total: 0,
+  });
+  const [dataTablePage, setDataTablePage] = useState(5);
+
+  const loadDataTableData = async (appliedFilter: any | null = null) => {
+    setDataTableLoading(true);
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const response = await axios.get('/members', { params: filter });
+
+    setDataTableData(response.data.members);
+    setDataTableLoading(false);
+  };
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+
+  const applyFilter = async (searchFilter: string) => {
+    await loadDataTableData({ search: searchFilter });
+    setSearchParams({ search: searchFilter });
+  };
+
+  const handlePageChange = (event: ChangeEvent, value: number) => {
+    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
+    loadDataTableData(filter);
+    setSearchParams(filter);
+  };
+
+  useEffect(() => {
+    loadDataTableData();
+  }, []);
+
+  return (
+    <Stack>
+      <Card>
+        <ImportForm />
+
+        {/* The Main Table */}
+        <TableContainer component={Paper} sx={{ paddingX: 1, borderRadius: 2 }}>
+          <Table aria-label="collapsible table">
+            <TableBody>
+              <TableRow sx={{ backgroundColor: '#F4F6F8' }}>
+                <TableCell style={headStyle} align="left">
+                  Member ID
+                </TableCell>
+                <TableCell style={headStyle} align="center">
+                  Name
+                </TableCell>
+                <TableCell style={headStyle} align="center">
+                  Divisi
+                </TableCell>
+                <TableCell style={headStyle} align="center">
+                  Limit
+                </TableCell>
+                <TableCell style={headStyle} align="center">
+                  Status
+                </TableCell>
+                <TableCell style={headStyle} align="right">
+                  {' '}
+                </TableCell>
+              </TableRow>
+            </TableBody>
+            {dataTableIsLoading ? (
+              <TableBody>
+                <TableRow>
+                  <TableCell colSpan={6} align="center">
+                    Loading
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            ) : dataTableData.data.length === 0 ? (
+              <TableBody>
+                <TableRow>
+                  <TableCell colSpan={6} align="center">
+                    No Data
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            ) : (
+              <TableBody>
+                {dataTableData.data.map((row) => (
+                  <Row key={row.id} row={row} />
+                ))}
+              </TableBody>
+            )}
+          </Table>
+        </TableContainer>
+
+        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
+      </Card>
+    </Stack>
+  );
+}

frontend/client-portal/src/pages/auth/Login.tsx

@@ -1,17 +1,16 @@
-// @mui
+/* ---------------------------------- @mui ---------------------------------- */
 import { styled } from '@mui/material/styles';
-import { Box, Card, Divider, Grid, Link, Stack, Typography } from '@mui/material';
+import { Box, Card, Divider, Grid, Link, Stack, Typography, IconButton } from '@mui/material';
-// components
+/* ------------------------------- components ------------------------------- */
 import Page from '../../components/Page';
-import Image from '../../components/Image';
-// sections
-import { LoginEmailForm, LoginPhoneForm } from '../../sections/auth/login';
 import Logo from '../../components/Logo';
-// react
+import Iconify from '../../components/Iconify';
-import { useState, useEffect } from 'react';
+/* ---------------------------------- hooks --------------------------------- */
-import { useLocation } from 'react-router-dom';
+import useLocalStorage from '../../hooks/useLocalStorage';
+/* -------------------------------- sections -------------------------------- */
+import { LoginEmailForm, LoginPhoneForm, VerifyCodeForm } from '../../sections/auth/login';
 
-// ----------------------------------------------------------------------
+/* --------------------------------- styled --------------------------------- */
 
 const RootStyle = styled('div')(({ theme }) => ({
   [theme.breakpoints.up('md')]: {
@@ -33,20 +32,9 @@ const ContentStyle = styled(Card)(({ theme }) => ({
 // ----------------------------------------------------------------------
 
 export default function Login() {
-  const { state } = useLocation();
+  const [emailOrPhone, setEmailOrPhone] = useLocalStorage('emailOrPhone', '');
-  const [formPhone, setFormPhone] = useState(false);
+  const [emailOrPhoneForm, setEmailOrPhoneForm] = useLocalStorage('emailOrPhoneForm', false);
-
+  const [loginOrVerifyCode, setLoginOrVerifyCode] = useLocalStorage('loginOrVerifyCode', false);
-  const handlerChange = (event: any, setForm: boolean) => {
-    event.preventDefault();
-    setFormPhone(setForm);
-  };
-
-  useEffect(() => {
-    if (state !== null) {
-      setFormPhone(state.formPhone);
-    }
-    console.log(state);
-  }, [state]);
 
   return (
     <Page title="Login">
@@ -54,35 +42,99 @@ export default function Login() {
         <ContentStyle>
           <Grid container>
             <Grid item xs={6}>
-              <Image visibleByDefault disabledEffect src="/images/login-image.gif" alt="login" />
+              <video
+                autoPlay={true}
+                loop={true}
+                muted={true}
+                playsInline={true}
+                style={{ width: '100%' }}
+              >
+                <source src="/images/login-image.webm" type="video/webm" />
+                <source src="/images/login-image.mp4" type="video/mp4" />
+              </video>
             </Grid>
             <Grid item xs={6} sx={{ padding: 3 }}>
-              <Stack direction="row" alignItems="center" sx={{ mb: 5 }}>
+              {loginOrVerifyCode && emailOrPhone ? (
-                <Logo sx={{ width: 90, height: 90 }} />
+                <>
-                <Box sx={{ flexGrow: 1 }}>
+                  <Stack direction="column" sx={{ mb: 5 }}>
-                  <Typography variant="h4" gutterBottom>
+                    <Stack direction="row" alignItems="center">
-                    Sign in to LinkSehat
+                      <IconButton
-                  </Typography>
+                        onClick={() => {
-                  <Typography variant="body1" sx={{ color: 'text.secondary' }}>
+                          localStorage.removeItem('emailOrPhone');
-                    Enter your details below.
+                          setLoginOrVerifyCode(false);
-                  </Typography>
+                        }}
-                </Box>
+                      >
-              </Stack>
+                        <Iconify
+                          icon="heroicons-outline:arrow-narrow-left"
+                          sx={{ marginRight: '10px' }}
+                        />
+                      </IconButton>
+                      <Typography variant="h4" gutterBottom>
+                        Verifikasi OTP
+                      </Typography>
+                    </Stack>
+                    <Box sx={{ flexGrow: 1 }}>
+                      <Typography
+                        variant="body1"
+                        sx={{ color: 'text.secondary', textAlign: 'left' }}
+                      >
+                        Masukkan kode OTP anda disini
+                      </Typography>
+                    </Box>
+                  </Stack>
 
-              {formPhone ? (
+                  <VerifyCodeForm
-                <LoginPhoneForm formPhone={formPhone} />
+                    setEmailOrPhoneForm={setEmailOrPhoneForm}
+                    setLoginOrVerifyCode={setLoginOrVerifyCode}
+                    emailOrPhone={emailOrPhone}
+                  />
+
+                  <Stack sx={{ marginTop: 5 }} spacing={1} alignItems="center">
+                    <Typography>Tidak mendapatkan kode?</Typography>
+                    <Link sx={{ cursor: 'pointer' }}>Kirim Ulang Kode OTP</Link>
+                  </Stack>
+                </>
               ) : (
-                <LoginEmailForm formPhone={formPhone} />
+                <>
+                  <Stack direction="row" alignItems="center" sx={{ mb: 5 }}>
+                    <Logo sx={{ width: 90, height: 90 }} />
+                    <Box sx={{ flexGrow: 1 }}>
+                      <Typography variant="h4" gutterBottom>
+                        Sign in to LinkSehat
+                      </Typography>
+                      <Typography variant="body1" sx={{ color: 'text.secondary' }}>
+                        Enter your details below.
+                      </Typography>
+                    </Box>
+                  </Stack>
+
+                  {emailOrPhoneForm ? (
+                    <LoginPhoneForm
+                      setEmailOrPhone={setEmailOrPhone}
+                      setLoginOrVerifyCode={setLoginOrVerifyCode}
+                    />
+                  ) : (
+                    <LoginEmailForm
+                      setEmailOrPhone={setEmailOrPhone}
+                      setLoginOrVerifyCode={setLoginOrVerifyCode}
+                    />
+                  )}
+                </>
               )}
 
               <Divider sx={{ marginTop: 5 }}>Atau</Divider>
 
               <Stack sx={{ marginTop: 5 }}>
-                {formPhone ? (
+                {emailOrPhoneForm ? (
                   <Link
                     align="center"
                     underline="hover"
-                    onClick={(event) => handlerChange(event, false)}
+                    onClick={() => {
+                      setEmailOrPhone('');
+                      setLoginOrVerifyCode(false);
+                      setEmailOrPhoneForm(false);
+                    }}
+                    sx={{ cursor: 'pointer' }}
                   >
                     Masuk menggunakan email
                   </Link>
@@ -90,7 +142,12 @@ export default function Login() {
                   <Link
                     align="center"
                     underline="hover"
-                    onClick={(event) => handlerChange(event, true)}
+                    onClick={() => {
+                      setEmailOrPhone('');
+                      setLoginOrVerifyCode(false);
+                      setEmailOrPhoneForm(true);
+                    }}
+                    sx={{ cursor: 'pointer' }}
                   >
                     Masuk menggunakan nomor handphone
                   </Link>

frontend/client-portal/src/pages/auth/VerifyCode.tsx

@@ -1,107 +0,0 @@
-import { useLocation, useNavigate } from 'react-router-dom';
-// @mui
-import { styled } from '@mui/material/styles';
-import { Box, Card, Divider, IconButton, Grid, Link, Stack, Typography } from '@mui/material';
-// components
-import Page from '../../components/Page';
-import Image from '../../components/Image';
-import Iconify from '../../components/Iconify';
-// sections
-import { VerifyCodeForm } from '../../sections/auth/verify-code';
-import { useEffect } from 'react';
-
-// ----------------------------------------------------------------------
-
-const RootStyle = styled('div')(({ theme }) => ({
-  [theme.breakpoints.up('md')]: {
-    display: 'flex',
-  },
-  minHeight: '100vh',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center',
-}));
-
-const ContentStyle = styled(Card)(({ theme }) => ({
-  [theme.breakpoints.up('md')]: {
-    maxHeight: '600px',
-    maxWidth: '1000px',
-  },
-}));
-// ----------------------------------------------------------------------
-
-export default function VerifyCode() {
-  const { state } = useLocation();
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    if (state === null) {
-      navigate('/auth/login');
-    }
-  }, [state, navigate]);
-
-  return (
-    <Page title="Login">
-      <RootStyle>
-        <ContentStyle>
-          <Grid container>
-            <Grid item xs={6}>
-              <Image visibleByDefault disabledEffect src="/images/login-image.gif" alt="login" />
-            </Grid>
-            <Grid item xs={6} sx={{ padding: 3, textAlign: 'center' }}>
-              <Stack direction="column" sx={{ mb: 5 }}>
-                <Stack direction="row" alignItems="center">
-                  <IconButton
-                    onClick={() =>
-                      navigate('/auth/login', { state: { formPhone: state.formPhone } })
-                    }
-                  >
-                    <Iconify
-                      icon="heroicons-outline:arrow-narrow-left"
-                      sx={{ marginRight: '10px' }}
-                    />
-                  </IconButton>
-                  <Typography variant="h4" gutterBottom>
-                    Verifikasi OTP
-                  </Typography>
-                </Stack>
-                <Box sx={{ flexGrow: 1 }}>
-                  <Typography variant="body1" sx={{ color: 'text.secondary', textAlign: 'left' }}>
-                    Masukkan kode OTP anda disini
-                  </Typography>
-                </Box>
-              </Stack>
-
-              <VerifyCodeForm phoneOrEmail={state.phoneOrEmail} />
-
-              <Typography sx={{ marginTop: 5 }}>Tidak mendapatkan kode?</Typography>
-              <Link sx={{ marginTop: 1 }}>Kirim Ulang Kode OTP</Link>
-
-              <Divider sx={{ marginTop: 5 }}>Atau</Divider>
-
-              <Stack sx={{ marginTop: 5 }}>
-                {state.formPhone ? (
-                  <Link
-                    align="center"
-                    underline="hover"
-                    onClick={() => navigate('/auth/login', { state: { formPhone: false } })}
-                  >
-                    Masuk menggunakan email
-                  </Link>
-                ) : (
-                  <Link
-                    align="center"
-                    underline="hover"
-                    onClick={() => navigate('/auth/login', { state: { formPhone: true } })}
-                  >
-                    Masuk menggunakan nomor handphone
-                  </Link>
-                )}
-              </Stack>
-            </Grid>
-          </Grid>
-        </ContentStyle>
-      </RootStyle>
-    </Page>
-  );
-}

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

@@ -37,16 +37,6 @@ export default function Router() {
             </AuthProvider>
           ),
         },
-        {
-          path: 'verify-code',
-          element: (
-            <AuthProvider>
-              <GuestGuard>
-                <VerifyCode />
-              </GuestGuard>
-            </AuthProvider>
-          ),
-        },
       ],
     },
     {
@@ -66,6 +56,22 @@ export default function Router() {
         },
       ],
     },
+    {
+      path: 'user-profile/:id',
+      element: (
+        <AuthProvider>
+          <AuthGuard>
+            <DashboardLayout />
+          </AuthGuard>
+        </AuthProvider>
+      ),
+      children: [
+        {
+          element: <AlarmCenterUserProfile />,
+          index: true,
+        },
+      ],
+    },
     {
       path: '/alarm-center',
       element: (
@@ -116,7 +122,6 @@ export default function Router() {
 
 // Auth
 const Login = Loadable(lazy(() => import('../pages/auth/Login')));
-const VerifyCode = Loadable(lazy(() => import('../pages/auth/VerifyCode')));
 
 // Dashboard
 const Dashboard = Loadable(lazy(() => import('../pages/Dashboard/Dashboard')));
@@ -127,6 +132,7 @@ const AlarmCenter = Loadable(lazy(() => import('../pages/AlarmCenter/Index')));
 const AlarmCenterServiceMonitoring = Loadable(
   lazy(() => import('../pages/AlarmCenter/ServiceMonitoring'))
 );
+const AlarmCenterUserProfile = Loadable(lazy(() => import('../pages/AlarmCenter/UserProfile')));
 
 // Claim Report
 const ClaimReport = Loadable(lazy(() => import('../pages/ClaimReport/Index')));

frontend/client-portal/src/sections/alarm-center/user-profile/CardBenefitSummary.tsx

@@ -0,0 +1,229 @@
+// mui
+import { styled } from '@mui/material/styles';
+import {
+  Card,
+  Typography,
+  Stack,
+  LinearProgress,
+  linearProgressClasses,
+  Grid,
+} from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+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%)',
+  },
+}));
+
+// ----------------------------------------------------------------------
+
+export default function CardBenefitSummary() {
+  return (
+    <div style={{ marginTop: '1rem' }}>
+      <Typography padding={1} variant="subtitle2">
+        Benefit Summary
+      </Typography>
+      <Card>
+        <Grid container spacing={1} marginTop={1} sx={{ backgroundColor: '#F4F6F8', padding: 1 }}>
+          {/* Card 1 */}
+          <Grid item xs={12} sm={6} md={6} lg={4}>
+            <Card sx={{ padding: 1 }}>
+              <Stack spacing={1}>
+                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+                  Rawat Jalan
+                </Typography>
+                <Typography variant="body2" color="#0A0A0A">
+                  Yearly Limits
+                </Typography>
+                <BorderLinearProgress variant="determinate" value={100} />
+                <Stack direction="row" spacing={0.25}>
+                  <Typography variant="body2">10.000.000</Typography>
+                  <Typography>/</Typography>
+                  <Typography variant="body2" color="#757575">
+                    10.000.000
+                  </Typography>
+                </Stack>
+              </Stack>
+            </Card>
+          </Grid>
+          {/* Card 2 */}
+          <Grid item xs={12} sm={6} md={6} lg={4}>
+            <Card sx={{ padding: 1 }}>
+              <Stack spacing={1}>
+                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+                  Rawat Inap
+                </Typography>
+                <Typography variant="body2" color="#0A0A0A">
+                  Yearly Limits
+                </Typography>
+                <BorderLinearProgress variant="determinate" value={100} />
+                <Stack direction="row" spacing={0.25}>
+                  <Typography variant="body2">10.000.000</Typography>
+                  <Typography>/</Typography>
+                  <Typography variant="body2" color="#757575">
+                    10.000.000
+                  </Typography>
+                </Stack>
+              </Stack>
+            </Card>
+          </Grid>
+          {/* Card 3 */}
+          <Grid item xs={12} sm={6} md={6} lg={4}>
+            <Card sx={{ padding: 1 }}>
+              <Stack spacing={1}>
+                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+                  Manfaat Special
+                </Typography>
+                <Typography variant="body2" color="#0A0A0A">
+                  Yearly Limits
+                </Typography>
+                <BorderLinearProgress variant="determinate" value={100} />
+                <Stack direction="row" spacing={0.25}>
+                  <Typography variant="body2">10.000.000</Typography>
+                  <Typography>/</Typography>
+                  <Typography variant="body2" color="#757575">
+                    10.000.000
+                  </Typography>
+                </Stack>
+              </Stack>
+            </Card>
+          </Grid>
+          {/* Card 4 */}
+          <Grid item xs={12} sm={6} md={6} lg={4}>
+            <Card sx={{ padding: 1 }}>
+              <Stack spacing={1}>
+                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+                  Manfaat Special
+                </Typography>
+                <Typography variant="body2" color="#0A0A0A">
+                  Yearly Limits
+                </Typography>
+                <BorderLinearProgress variant="determinate" value={100} />
+                <Stack direction="row" spacing={0.25}>
+                  <Typography variant="body2">10.000.000</Typography>
+                  <Typography>/</Typography>
+                  <Typography variant="body2" color="#757575">
+                    10.000.000
+                  </Typography>
+                </Stack>
+              </Stack>
+            </Card>
+          </Grid>
+          {/* Card 5 */}
+          <Grid item xs={12} sm={6} md={6} lg={4}>
+            <Card sx={{ padding: 1 }}>
+              <Stack spacing={1}>
+                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+                  Perobatan Mata
+                </Typography>
+                <Typography variant="body2" color="#0A0A0A">
+                  Yearly Limits
+                </Typography>
+                <BorderLinearProgress variant="determinate" value={100} />
+                <Stack direction="row" spacing={0.25}>
+                  <Typography variant="body2">10.000.000</Typography>
+                  <Typography>/</Typography>
+                  <Typography variant="body2" color="#757575">
+                    10.000.000
+                  </Typography>
+                </Stack>
+              </Stack>
+            </Card>
+          </Grid>
+          {/* Card 6 */}
+          <Grid item xs={12} sm={6} md={6} lg={4}>
+            <Card sx={{ padding: 1 }}>
+              <Stack spacing={1}>
+                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+                  Perawatan Gigi
+                </Typography>
+                <Typography variant="body2" color="#0A0A0A">
+                  Yearly Limits
+                </Typography>
+                <BorderLinearProgress variant="determinate" value={100} />
+                <Stack direction="row" spacing={0.25}>
+                  <Typography variant="body2">10.000.000</Typography>
+                  <Typography>/</Typography>
+                  <Typography variant="body2" color="#757575">
+                    10.000.000
+                  </Typography>
+                </Stack>
+              </Stack>
+            </Card>
+          </Grid>
+          {/* Card 7 */}
+          <Grid item xs={12} sm={6} md={6} lg={4}>
+            <Card sx={{ padding: 1 }}>
+              <Stack spacing={1}>
+                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+                  Kehamilan
+                </Typography>
+                <Typography variant="body2" color="#0A0A0A">
+                  Yearly Limits
+                </Typography>
+                <BorderLinearProgress variant="determinate" value={100} />
+                <Stack direction="row" spacing={0.25}>
+                  <Typography variant="body2">10.000.000</Typography>
+                  <Typography>/</Typography>
+                  <Typography variant="body2" color="#757575">
+                    10.000.000
+                  </Typography>
+                </Stack>
+              </Stack>
+            </Card>
+          </Grid>
+          {/* Card 8 */}
+          <Grid item xs={12} sm={6} md={6} lg={4}>
+            <Card sx={{ padding: 1 }}>
+              <Stack spacing={1}>
+                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+                  Laboratorium
+                </Typography>
+                <Typography variant="body2" color="#0A0A0A">
+                  Yearly Limits
+                </Typography>
+                <BorderLinearProgress variant="determinate" value={100} />
+                <Stack direction="row" spacing={0.25}>
+                  <Typography variant="body2">10.000.000</Typography>
+                  <Typography>/</Typography>
+                  <Typography variant="body2" color="#757575">
+                    10.000.000
+                  </Typography>
+                </Stack>
+              </Stack>
+            </Card>
+          </Grid>
+          {/* Card 9 */}
+          <Grid item xs={12} sm={6} md={6} lg={4}>
+            <Card sx={{ padding: 1 }}>
+              <Stack spacing={1}>
+                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+                  Manfaat Farmasi
+                </Typography>
+                <Typography variant="body2" color="#0A0A0A">
+                  Yearly Limits
+                </Typography>
+                <BorderLinearProgress variant="determinate" value={100} />
+                <Stack direction="row" spacing={0.25}>
+                  <Typography variant="body2">10.000.000</Typography>
+                  <Typography>/</Typography>
+                  <Typography variant="body2" color="#757575">
+                    10.000.000
+                  </Typography>
+                </Stack>
+              </Stack>
+            </Card>
+          </Grid>
+        </Grid>
+      </Card>
+    </div>
+  );
+}

frontend/client-portal/src/sections/alarm-center/user-profile/CardClaimHistory.tsx

@@ -0,0 +1,97 @@
+// mui
+import {
+  Card,
+  Typography,
+  Stack,
+  TablePagination,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableBody,
+} from '@mui/material';
+// react
+import { useState } from 'react';
+
+// ----------------------------------------------------------------------
+
+function createData(benefitType: string, submissionDate: string, status: string) {
+  return { benefitType, submissionDate, status };
+}
+
+const rows = [
+  createData('Rawat Jalan', '15-10-2022', 'Request'),
+  createData('Rawat Inap', '15-10-2022', 'Request'),
+  createData('Manfaat Special', '15-10-2022', 'Request'),
+  createData('Perobatan Mata', '15-10-2022', 'Request'),
+  createData('Perawatan Gigi', '15-10-2022', 'Request'),
+  createData('Kehamilan', '15-10-2022', 'Request'),
+  createData('Laboratorium', '15-10-2022', 'Request'),
+  createData('Manfaat Farmasi', '15-10-2022', 'Request'),
+];
+
+// ----------------------------------------------------------------------
+
+export default function CardClaimHistory() {
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(5);
+
+  const handleChangePage = (event: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {
+    setPage(newPage);
+  };
+
+  return (
+    <Card sx={{ padding: 2 }}>
+      <Stack direction="row" justifyContent="space-between" alignItems="center">
+        <Typography variant="subtitle2">Claim History</Typography>
+        <TablePagination
+          component="div"
+          count={rows.length}
+          rowsPerPage={rowsPerPage}
+          rowsPerPageOptions={[]}
+          page={page}
+          onPageChange={handleChangePage}
+          sx={{
+            border: 'none',
+            '.MuiToolbar-root.MuiTablePagination-toolbar': {
+              height: '24px',
+              minHeight: '24px',
+            },
+            '.MuiTablePagination-actions .MuiButtonBase-root:nth-last-of-type': {
+              marginLeft: 2,
+            },
+            '.MuiTablePagination-actions .MuiButtonBase-root': { padding: 1 },
+          }}
+        />
+      </Stack>
+      <Card>
+        <TableContainer>
+          <Table sx={{ minWidth: 650 }} size="small">
+            <TableHead>
+              <TableRow>
+                <TableCell>Benefit Type</TableCell>
+                <TableCell align="center">Submission Date</TableCell>
+                <TableCell align="center">Status</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {/* if you don't need to support IE11, you can replace the `stableSort` call with:
+              rows.sort(getComparator(order, orderBy)).slice() */}
+              {rows
+                // .sort(getComparator(order, orderBy))
+                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                .map((row, index) => (
+                  <TableRow key={index}>
+                    <TableCell>{row.benefitType}</TableCell>
+                    <TableCell align="center">{row.submissionDate}</TableCell>
+                    <TableCell align="center">{row.status}</TableCell>
+                  </TableRow>
+                ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Card>
+    </Card>
+  );
+}

frontend/client-portal/src/sections/alarm-center/user-profile/CardFamilyInformation.tsx

@@ -0,0 +1,359 @@
+// mui
+import { Button, Card, Stack, Typography, Grid, Switch } from '@mui/material';
+// components
+import Iconify from '../../../components/Iconify';
+
+export default function CardFamilyInformation() {
+  return (
+    <Card sx={{ borderRadius: '6px', paddingY: 2 }}>
+      {/* Stack 1 */}
+      <Stack
+        direction="row"
+        alignItems="center"
+        justifyContent="space-between"
+        sx={{ paddingY: 1, paddingX: 3 }}
+      >
+        <Typography variant="subtitle2">Beneficiary / Family</Typography>
+        <Button startIcon={<Iconify icon="ic:round-add" />}>Add Member</Button>
+      </Stack>
+      {/* Stack 2 */}
+      <Grid container maxHeight="307px" spacing={2} paddingX={2} sx={{ overflowY: 'auto' }}>
+        {/* Card 1 */}
+        <Grid item xs={12} sm={6} md={6}>
+          <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
+            {/* Stack 1 */}
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              spacing={2}
+              sx={{ flex: '100%' }}
+            >
+              {/* Row 1 */}
+              <Stack direction="row" spacing={1}>
+                <img
+                  width={24}
+                  height={24}
+                  src="/images/husband-user-profile.png"
+                  alt="user-profile"
+                  style={{ borderRadius: '50%' }}
+                />
+                <Typography variant="body2" sx={{ fontWeight: 500 }}>
+                  Husband
+                </Typography>
+              </Stack>
+              {/* Row 2 */}
+              <Stack alignItems="center">
+                <Typography variant="caption">Suspend</Typography>
+                <Switch aria-label="switch demo" />
+              </Stack>
+            </Stack>
+            <Typography variant="body2" color="#757575">
+              Octa Xavier
+            </Typography>
+            <Typography variant="body2" color="#757575">
+              14 Jan 1986
+            </Typography>
+            <Typography variant="body2" color="#757575">
+              082113256754
+            </Typography>
+            {/* Stack 2 */}
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              marginTop={1.25}
+            >
+              <Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
+                Remove
+              </Button>
+              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
+                Edit Data
+              </Button>
+            </Stack>
+          </Card>
+        </Grid>
+        {/* Card 2 */}
+        <Grid item xs={12} sm={6} md={6}>
+          <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
+            {/* Stack 1 */}
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              spacing={2}
+              sx={{ flex: '100%' }}
+            >
+              {/* Row 1 */}
+              <Stack direction="row" spacing={1}>
+                <div
+                  style={{
+                    borderRadius: '50%',
+                    width: '24px',
+                    height: '24px',
+                    backgroundColor: '#D9D9D9',
+                  }}
+                />
+                <Typography variant="body2" sx={{ fontWeight: 500 }}>
+                  Kid
+                </Typography>
+              </Stack>
+              {/* Row 2 */}
+              <Stack alignItems="center">
+                <Typography variant="caption">Suspend</Typography>
+                <Switch aria-label="switch demo" />
+              </Stack>
+            </Stack>
+            <Typography variant="body2" color="#757575">
+              Celine Claudia
+            </Typography>
+            <Typography variant="body2" color="#757575">
+              15 Oct 2000
+            </Typography>
+            <Typography variant="body2" color="#757575">
+              082113256754
+            </Typography>
+            {/* Stack 2 */}
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              marginTop={1.25}
+            >
+              <Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
+                Remove
+              </Button>
+              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
+                Edit Data
+              </Button>
+            </Stack>
+          </Card>
+        </Grid>
+        {/* Card 3 */}
+        <Grid item xs={12} sm={6} md={6}>
+          <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
+            {/* Stack 1 */}
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              spacing={2}
+              sx={{ flex: '100%' }}
+            >
+              {/* Row 1 */}
+              <Stack direction="row" spacing={1}>
+                <div
+                  style={{
+                    borderRadius: '50%',
+                    width: '24px',
+                    height: '24px',
+                    backgroundColor: '#D9D9D9',
+                  }}
+                />
+                <Typography variant="body2" sx={{ fontWeight: 500 }}>
+                  Kid
+                </Typography>
+              </Stack>
+              {/* Row 2 */}
+              <Stack alignItems="center">
+                <Typography variant="caption">Suspend</Typography>
+                <Switch aria-label="switch demo" />
+              </Stack>
+            </Stack>
+            <Typography variant="body2" color="#757575">
+              Celine Claudia
+            </Typography>
+            <Typography variant="body2" color="#757575">
+              15 Oct 2000
+            </Typography>
+            <Typography variant="body2" color="#757575">
+              082113256754
+            </Typography>
+            {/* Stack 2 */}
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              marginTop={1.25}
+            >
+              <Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
+                Remove
+              </Button>
+              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
+                Edit Data
+              </Button>
+            </Stack>
+          </Card>
+        </Grid>
+        {/* Card 4 */}
+        <Grid item xs={12} sm={6} md={6}>
+          <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
+            {/* Stack 1 */}
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              spacing={2}
+              sx={{ flex: '100%' }}
+            >
+              {/* Row 1 */}
+              <Stack direction="row" spacing={1}>
+                <div
+                  style={{
+                    borderRadius: '50%',
+                    width: '24px',
+                    height: '24px',
+                    backgroundColor: '#D9D9D9',
+                  }}
+                />
+                <Typography variant="body2" sx={{ fontWeight: 500 }}>
+                  Kid
+                </Typography>
+              </Stack>
+              {/* Row 2 */}
+              <Stack alignItems="center">
+                <Typography variant="caption">Suspend</Typography>
+                <Switch aria-label="switch demo" />
+              </Stack>
+            </Stack>
+            <Typography variant="body2" color="#757575">
+              Celine Claudia
+            </Typography>
+            <Typography variant="body2" color="#757575">
+              15 Oct 2000
+            </Typography>
+            <Typography variant="body2" color="#757575">
+              082113256754
+            </Typography>
+            {/* Stack 2 */}
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              marginTop={1.25}
+            >
+              <Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
+                Remove
+              </Button>
+              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
+                Edit Data
+              </Button>
+            </Stack>
+          </Card>
+        </Grid>
+        {/* Card 5 */}
+        <Grid item xs={12} sm={6} md={6}>
+          <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
+            {/* Stack 1 */}
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              spacing={2}
+              sx={{ flex: '100%' }}
+            >
+              {/* Row 1 */}
+              <Stack direction="row" spacing={1}>
+                <div
+                  style={{
+                    borderRadius: '50%',
+                    width: '24px',
+                    height: '24px',
+                    backgroundColor: '#D9D9D9',
+                  }}
+                />
+                <Typography variant="body2" sx={{ fontWeight: 500 }}>
+                  Kid
+                </Typography>
+              </Stack>
+              {/* Row 2 */}
+              <Stack alignItems="center">
+                <Typography variant="caption">Suspend</Typography>
+                <Switch aria-label="switch demo" />
+              </Stack>
+            </Stack>
+            <Typography variant="body2" color="#757575">
+              Celine Claudia
+            </Typography>
+            <Typography variant="body2" color="#757575">
+              15 Oct 2000
+            </Typography>
+            <Typography variant="body2" color="#757575">
+              082113256754
+            </Typography>
+            {/* Stack 2 */}
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              marginTop={1.25}
+            >
+              <Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
+                Remove
+              </Button>
+              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
+                Edit Data
+              </Button>
+            </Stack>
+          </Card>
+        </Grid>
+        {/* Card 6 */}
+        <Grid item xs={12} sm={6} md={6}>
+          <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
+            {/* Stack 1 */}
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              spacing={2}
+              sx={{ flex: '100%' }}
+            >
+              {/* Row 1 */}
+              <Stack direction="row" spacing={1}>
+                <div
+                  style={{
+                    borderRadius: '50%',
+                    width: '24px',
+                    height: '24px',
+                    backgroundColor: '#D9D9D9',
+                  }}
+                />
+                <Typography variant="body2" sx={{ fontWeight: 500 }}>
+                  Kid
+                </Typography>
+              </Stack>
+              {/* Row 2 */}
+              <Stack alignItems="center">
+                <Typography variant="caption">Suspend</Typography>
+                <Switch aria-label="switch demo" />
+              </Stack>
+            </Stack>
+            <Typography variant="body2" color="#757575">
+              Celine Claudia
+            </Typography>
+            <Typography variant="body2" color="#757575">
+              15 Oct 2000
+            </Typography>
+            <Typography variant="body2" color="#757575">
+              082113256754
+            </Typography>
+            {/* Stack 2 */}
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              marginTop={1.25}
+            >
+              <Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
+                Remove
+              </Button>
+              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
+                Edit Data
+              </Button>
+            </Stack>
+          </Card>
+        </Grid>
+      </Grid>
+    </Card>
+  );
+}

frontend/client-portal/src/sections/alarm-center/user-profile/CardPersonalInformation.tsx

@@ -0,0 +1,147 @@
+// mui
+import { Button, IconButton, Card, Stack, Typography } from '@mui/material';
+import { Visibility as VisibilityIcon } from '@mui/icons-material';
+// components
+import Iconify from '../../../components/Iconify';
+
+export default function CardPersonalInformation() {
+  return (
+    <Card sx={{ borderRadius: '6px', paddingY: 2 }}>
+      {/* Stack 1 */}
+      <Stack
+        direction="row"
+        alignItems="center"
+        justifyContent="space-between"
+        sx={{ paddingY: 1, paddingX: 3 }}
+      >
+        <Typography variant="subtitle2">Informasi Pribadi</Typography>
+        <Button startIcon={<Iconify icon="heroicons:pencil-solid" />}>Edit Data</Button>
+      </Stack>
+      {/* Stack 2 */}
+      <Stack direction="row" spacing={2} paddingX={2}>
+        <div style={{ position: 'relative', flex: 'none', height: 'fit-content' }}>
+          <img
+            width={52}
+            height={52}
+            src="/images/user-profile.png"
+            alt="user-profile"
+            style={{ borderRadius: '50%' }}
+          />
+          <IconButton
+            color="primary"
+            sx={{
+              position: 'absolute',
+              bottom: 0,
+              right: 0,
+              width: '20px',
+              height: '20px',
+              padding: '4px',
+              backgroundColor: 'rgba(255,255,255,0.9)',
+            }}
+          >
+            <Iconify icon="material-symbols:photo-camera" />
+          </IconButton>
+        </div>
+        <Stack direction="row" paddingY={1} spacing={2} sx={{ flex: '100%' }}>
+          <Stack sx={{ width: '60%' }}>
+            <Typography variant="caption">Nama Lengkap</Typography>
+            <Typography variant="body2">Jessica Lie</Typography>
+          </Stack>
+          <Stack sx={{ width: '20%' }}>
+            <Typography variant="caption">Berat Badan</Typography>
+            <Typography variant="body2">40 kg</Typography>
+          </Stack>
+          <Stack sx={{ width: '20%' }}>
+            <Typography variant="caption">Tinggi Badan</Typography>
+            <Typography variant="body2">165 cm</Typography>
+          </Stack>
+        </Stack>
+      </Stack>
+      {/* Stack 3 */}
+      <Stack maxHeight="338px" paddingX={2} sx={{ overflowY: 'auto' }}>
+        {/* Stack 3.1 */}
+        <Stack marginTop={2} spacing={1}>
+          <Typography variant="subtitle2">Informasi Dasar</Typography>
+          <Stack direction="row" spacing={2} sx={{ flex: '100%' }}>
+            <Stack sx={{ width: '100%' }}>
+              <Typography variant="caption">Tempat Lahir</Typography>
+              <Typography variant="body2">Jakarta</Typography>
+            </Stack>
+            <Stack sx={{ width: '100%' }}>
+              <Typography variant="caption">Tanggal Lahir</Typography>
+              <Typography variant="body2">15-05-1996</Typography>
+            </Stack>
+            <Stack sx={{ width: '100%' }}>
+              <Typography variant="caption">Jenis Kelamin</Typography>
+              <Typography variant="body2">Perempuan</Typography>
+            </Stack>
+          </Stack>
+        </Stack>
+        {/* Stack 3.2 */}
+        <Stack marginTop={2} spacing={1}>
+          <Typography variant="subtitle2">Informasi Kontak</Typography>
+          <Stack direction="row" spacing={2} sx={{ flex: '100%' }}>
+            <Stack sx={{ width: '100%' }}>
+              <Typography variant="caption">Nomor Telpon</Typography>
+              <Typography variant="body2">081256788765</Typography>
+            </Stack>
+            <Stack sx={{ width: '100%' }}>
+              <Typography variant="caption">Email</Typography>
+              <Typography variant="body2">Jessica.lie@gmail.com</Typography>
+            </Stack>
+          </Stack>
+          <Stack>
+            <Typography variant="caption">Alamat</Typography>
+            <Typography variant="body2">
+              Jl. Kalimantan No.6, Rw. Mekar Jaya, Kec. Serpong, Kota Tangerang Selatan, Banten
+              15310
+            </Typography>
+          </Stack>
+        </Stack>
+        {/* Stack 3.3 */}
+        <Stack marginTop={2} spacing={1}>
+          <Typography variant="subtitle2">Identitas Diri</Typography>
+          <Stack
+            direction="row"
+            justifyContent="space-between"
+            alignItems="center"
+            spacing={2}
+            sx={{ flex: '100%' }}
+          >
+            <Stack>
+              <Typography variant="caption">Nomor NIK</Typography>
+              <Typography variant="body2">081256788765</Typography>
+            </Stack>
+            <Stack>
+              <Button variant="contained" startIcon={<VisibilityIcon />}>
+                Lihat Foto
+              </Button>
+            </Stack>
+          </Stack>
+        </Stack>
+        {/* Stack 3.4 */}
+        <Stack marginTop={2} spacing={1}>
+          <Typography variant="subtitle2">Informasi Lainnya</Typography>
+          <Stack direction="row" justifyContent="space-between" spacing={2} sx={{ flex: '100%' }}>
+            <Stack>
+              <Typography variant="caption">Agama</Typography>
+              <Typography variant="body2">Kristen</Typography>
+            </Stack>
+            <Stack>
+              <Typography variant="caption">Status</Typography>
+              <Typography variant="body2">Menikah</Typography>
+            </Stack>
+            <Stack>
+              <Typography variant="caption">Pendidikan</Typography>
+              <Typography variant="body2">S1</Typography>
+            </Stack>
+            <Stack>
+              <Typography variant="caption">Pekerjaan</Typography>
+              <Typography variant="body2">Ibu Rumah Tangga</Typography>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Card>
+  );
+}

frontend/client-portal/src/sections/alarm-center/user-profile/CardPolicyNumber.tsx

@@ -0,0 +1,50 @@
+// mui
+import { styled } from '@mui/material/styles';
+import { Card, Typography, Stack, LinearProgress, linearProgressClasses } from '@mui/material';
+import CardBenefitSummary from './CardBenefitSummary';
+
+// ----------------------------------------------------------------------
+
+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%)',
+  },
+}));
+
+// ----------------------------------------------------------------------
+
+export default function CardPolicyNumber() {
+  return (
+    <Card sx={{ padding: 2 }}>
+      <Stack>
+        <Stack direction="row" alignItems="center" spacing={1} justifyContent="space-between">
+          <Stack direction="row" spacing={1} alignItems="center">
+            <img width={52} height={52} src="/logo/logo-linksehat.png" alt="LinkSehat" />
+            <Stack spacing={1}>
+              <Typography variant="subtitle2">Policy Number</Typography>
+              <Typography variant="subtitle2">12345678910</Typography>
+            </Stack>
+          </Stack>
+          <Stack spacing={1} sx={{ width: '206.5px' }}>
+            <Typography variant="subtitle2">Yearly Limit</Typography>
+            <BorderLinearProgress variant="determinate" value={100} />
+            <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+              10.000.000 /{' '}
+              <Typography variant="body2" color="#757575" component="span">
+                10.000.000
+              </Typography>
+            </Typography>
+          </Stack>
+        </Stack>
+        {/* Benefit Summary */}
+        <CardBenefitSummary />
+      </Stack>
+    </Card>
+  );
+}

frontend/client-portal/src/sections/auth/login/LoginEmailForm.tsx

@@ -1,34 +1,33 @@
+/* ----------------------------------- yup ---------------------------------- */
 import * as Yup from 'yup';
-import { useNavigate } from 'react-router-dom';
+/* ---------------------------------- form ---------------------------------- */
-// form
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
-// @mui
+/* ---------------------------------- @mui ---------------------------------- */
 import { Stack, Alert } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
-// hooks
+/* ---------------------------------- hooks --------------------------------- */
 import useAuth from '../../../hooks/useAuth';
 import useIsMountedRef from '../../../hooks/useIsMountedRef';
-// components
+/* ------------------------------- components ------------------------------- */
 import { FormProvider, RHFTextField } from '../../../components/hook-form';
 
-// ----------------------------------------------------------------------
+/* ---------------------------------- types --------------------------------- */
+
+type LoginFormProps = {
+  setEmailOrPhone: Function;
+  setLoginOrVerifyCode: Function;
+};
 
 type FormValuesProps = {
   email: string;
   afterSubmit?: string;
 };
 
-interface Props {
+/* -------------------------------------------------------------------------- */
-  formPhone: boolean;
-}
 
-// ----------------------------------------------------------------------
+export default function LoginForm({ setEmailOrPhone, setLoginOrVerifyCode }: LoginFormProps) {
-
-export default function LoginForm({ formPhone }: Props) {
   const { login } = useAuth();
-  const navigate = useNavigate();
-
   const isMountedRef = useIsMountedRef();
 
   const LoginSchema = Yup.object().shape({
@@ -54,8 +53,9 @@ export default function LoginForm({ formPhone }: Props) {
   const onSubmit = async (data: FormValuesProps) => {
     try {
       await login(data.email);
-
+      setEmailOrPhone(data.email);
-      navigate('/auth/verify-code', { state: { phoneOrEmail: data.email, formPhone } });
+      setLoginOrVerifyCode(true);
+      reset();
     } catch (error: any) {
       reset();
 

frontend/client-portal/src/sections/auth/login/LoginPhoneForm.tsx

@@ -1,29 +1,34 @@
+/* ----------------------------------- yup ---------------------------------- */
 import * as Yup from 'yup';
-import { useNavigate } from 'react-router-dom';
+/* ---------------------------------- form ---------------------------------- */
-// form
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
-// @mui
+/* ---------------------------------- @mui ---------------------------------- */
 import { Stack, Alert, InputAdornment } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
-// components
+/* ------------------------------- components ------------------------------- */
 import { FormProvider, RHFTextField } from '../../../components/hook-form';
+/* ---------------------------------- hooks --------------------------------- */
 import useAuth from '../../../hooks/useAuth';
+import useIsMountedRef from '../../../hooks/useIsMountedRef';
 
-// ----------------------------------------------------------------------
+/* ---------------------------------- types --------------------------------- */
+
+type LoginFormProps = {
+  setEmailOrPhone: Function;
+  setLoginOrVerifyCode: Function;
+};
 
 type FormValuesProps = {
   phone: string;
   afterSubmit?: string;
 };
 
-interface Props {
+/* -------------------------------------------------------------------------- */
-  formPhone: boolean;
-}
 
-export default function LoginPhoneForm({ formPhone }: Props) {
+export default function LoginPhoneForm({ setEmailOrPhone, setLoginOrVerifyCode }: LoginFormProps) {
   const { login } = useAuth();
-  const navigate = useNavigate();
+  const isMountedRef = useIsMountedRef();
 
   const LoginSchema = Yup.object().shape({
     phone: Yup.string().required('Phone is required'),
@@ -48,10 +53,15 @@ export default function LoginPhoneForm({ formPhone }: Props) {
   const onSubmit = async (data: FormValuesProps) => {
     try {
       await login(0 + data.phone);
-      navigate('/auth/verify-code', { state: { phoneOrEmail: 0 + data.phone, formPhone } });
+      setEmailOrPhone(0 + data.phone);
+      setLoginOrVerifyCode(true);
+      reset();
     } catch (error: any) {
       reset();
-      setError('afterSubmit', { ...error, message: error.response.data.message });
+
+      if (isMountedRef.current) {
+        setError('afterSubmit', { ...error, message: error.data.message });
+      }
     }
   };
 

frontend/client-portal/src/sections/auth/login/VerifyCodeForm.tsx

@@ -1,17 +1,25 @@
+/* ---------------------------------- @mui ---------------------------------- */
+import { OutlinedInput, Stack } from '@mui/material';
+/* ----------------------------------- yup ---------------------------------- */
 import * as Yup from 'yup';
+/* -------------------------------- snackbar -------------------------------- */
 import { useSnackbar } from 'notistack';
-import { useNavigate, useLocation } from 'react-router-dom';
+/* ---------------------------------- react --------------------------------- */
+import { useNavigate } from 'react-router-dom';
 import { useEffect } from 'react';
-// form
+/* ---------------------------------- form ---------------------------------- */
 import { useForm, Controller } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
-// @mui
+/* ---------------------------------- hooks --------------------------------- */
-import { OutlinedInput, Stack } from '@mui/material';
 import useAuth from '../../../hooks/useAuth';
-// routes
-// import { PATH_DASHBOARD } from '../../../routes/paths';
 
-// ----------------------------------------------------------------------
+/* ---------------------------------- types --------------------------------- */
+
+type VerifyCodeFormProps = {
+  emailOrPhone: string;
+  setEmailOrPhoneForm: Function;
+  setLoginOrVerifyCode: Function;
+};
 
 type FormValuesProps = {
   code1: string;
@@ -20,18 +28,25 @@ type FormValuesProps = {
   code4: string;
 };
 
-type Props = {
-  phoneOrEmail: string;
-};
-
 type ValueNames = 'code1' | 'code2' | 'code3' | 'code4';
 
-export default function VerifyCodeForm({ phoneOrEmail }: Props) {
+type responseProps = {
+  status: string;
+  statusCode: number;
+  data: [];
+  message: string;
+};
+
+/* -------------------------------------------------------------------------- */
+
+export default function VerifyCodeForm({
+  emailOrPhone,
+  setEmailOrPhoneForm,
+  setLoginOrVerifyCode,
+}: VerifyCodeFormProps) {
   const navigate = useNavigate();
-  const location = useLocation();
   const { validateOtp } = useAuth();
   const { enqueueSnackbar } = useSnackbar();
-  const { phone_or_email } = location.state;
 
   const VerifyCodeSchema = Yup.object().shape({
     code1: Yup.string().required('Code is required'),
@@ -47,13 +62,7 @@ export default function VerifyCodeForm({ phoneOrEmail }: Props) {
     code4: '',
   };
 
-  const {
+  const { watch, control, setValue, handleSubmit } = useForm({
-    watch,
-    control,
-    setValue,
-    handleSubmit,
-    formState: { isSubmitting, isValid },
-  } = useForm({
     mode: 'onBlur',
     resolver: yupResolver(VerifyCodeSchema),
     defaultValues,
@@ -62,15 +71,35 @@ export default function VerifyCodeForm({ phoneOrEmail }: Props) {
   const values = watch();
 
   useEffect(() => {
-    console.log('phone number : ' + phone_or_email);
+    const handlePasteClipboard = (event: ClipboardEvent) => {
+      let data: string | string[] = event?.clipboardData?.getData('Text') || '';
+
+      data = data.split('');
+
+      [].forEach.call(document.querySelectorAll('#field-code'), (node: any, index) => {
+        node.value = data[index];
+        const fieldIndex = `code${index + 1}`;
+        setValue(fieldIndex as ValueNames, data[index]);
+      });
+    };
+
     document.addEventListener('paste', handlePasteClipboard);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setValue]);
-  }, []);
 
   const onSubmit = async (data: FormValuesProps) => {
     try {
       await new Promise((resolve) => setTimeout(resolve, 1000));
-      await validateOtp(phoneOrEmail, Object.values(data).join(''));
+      // @ts-ignore
+      const response: responseProps = await validateOtp(emailOrPhone, Object.values(data).join(''));
+
+      if (response.data.length === 0) {
+        return enqueueSnackbar(response.message, {
+          variant: 'error',
+          autoHideDuration: 4000,
+          preventDuplicate: true,
+        });
+      }
+
       navigate('/dashboard');
       enqueueSnackbar('Verify success!', { variant: 'success' });
     } catch (error) {
@@ -78,18 +107,6 @@ export default function VerifyCodeForm({ phoneOrEmail }: Props) {
     }
   };
 
-  const handlePasteClipboard = (event: ClipboardEvent) => {
-    let data: string | string[] = event?.clipboardData?.getData('Text') || '';
-
-    data = data.split('');
-
-    [].forEach.call(document.querySelectorAll('#field-code'), (node: any, index) => {
-      node.value = data[index];
-      const fieldIndex = `code${index + 1}`;
-      setValue(fieldIndex as ValueNames, data[index]);
-    });
-  };
-
   const handleChangeWithNextField = (
     event: React.ChangeEvent<HTMLInputElement>,
     handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void

frontend/client-portal/src/sections/auth/login/index.ts

@@ -1,2 +1,3 @@
 export { default as LoginEmailForm } from './LoginEmailForm';
 export { default as LoginPhoneForm } from './LoginPhoneForm';
+export { default as VerifyCodeForm } from './VerifyCodeForm';

frontend/client-portal/src/sections/auth/verify-code/index.ts

@@ -1 +0,0 @@
-export { default as VerifyCodeForm } from './VerifyCodeForm';

frontend/client-portal/src/sections/claimreports/ClaimStatusCard.tsx

@@ -1,67 +0,0 @@
-// @mui
-import { styled } from '@mui/material/styles';
-import { Card, Typography, Stack } from '@mui/material';
-// theme
-import palette from '../../theme/palette';
-
-// ----------------------------------------------------------------------
-
-const RootStyle = styled(Card)(({ theme }) => ({
-  boxShadow: 'none',
-  padding: theme.spacing(2),
-  color: 'black',
-  backgroundColor: theme.palette.grey[200],
-  maxHeight: '240px',
-}));
-
-// ----------------------------------------------------------------------
-
-interface ClaimStatusType {
-  name: string;
-  value: number;
-  color: string;
-}
-
-export default function ClaimStatusCard({ name, value, color }: ClaimStatusType) {
-  const listItems = [
-    { name: 'Requested', value: 15, color: palette.dark.primary.dark },
-    { name: 'Approval', value: 20, color: palette.dark.warning.dark },
-    { name: 'Disbrusment', value: 20, color: palette.dark.success.dark },
-    { name: 'Rejected', value: 20, color: palette.dark.error.dark },
-  ];
-
-  return (
-    <RootStyle>
-      <Stack sx={{ mb: 1 }}>
-        <Typography variant="body2">Claim Status</Typography>
-      </Stack>
-      <Stack direction="row" spacing={2}>
-        {listItems.map(({ name, value, color }, key) => (
-          <Card
-            key={key}
-            sx={{
-              paddingX: 1,
-              borderRadius: 0.75,
-              borderColor: color,
-              borderStyle: 'solid',
-              borderWidth: '1px',
-              padding: 2,
-              flex: 1,
-              textAlign: 'center',
-            }}
-          >
-            <Typography component="p" variant="body2">
-              {name}
-            </Typography>
-            <Typography component="p" variant="h5" sx={{ marginTop: 2 }}>
-              {value}
-            </Typography>
-            <Typography component="p" variant="body2" sx={{ marginTop: 2 }}>
-              Cases
-            </Typography>
-          </Card>
-        ))}
-      </Stack>
-    </RootStyle>
-  );
-}

frontend/client-portal/src/sections/claimreports/ListTable.tsx

@@ -1,313 +0,0 @@
-// @mui
-import {
-  Autocomplete,
-  Box,
-  Button,
-  Card,
-  Collapse,
-  IconButton,
-  InputLabel,
-  MenuItem,
-  OutlinedInput,
-  Paper,
-  Select,
-  SelectChangeEvent,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TextField,
-  Typography,
-  Badge,
-  Tab,
-  Tabs,
-  CardHeader,
-  Stack,
-  Menu,
-  ButtonGroup,
-  Pagination,
-  TablePagination,
-  Grid,
-} from '@mui/material';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
-import AddIcon from '@mui/icons-material/Add';
-import UploadIcon from '@mui/icons-material/Upload';
-import CancelIcon from '@mui/icons-material/Cancel';
-// hooks
-import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
-import useSettings from '../../hooks/useSettings';
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
-// components
-import axios from '../../utils/axios';
-import { LaravelPaginatedData } from '../../@types/paginated-data';
-import { Member } from '../../@types/member';
-import Iconify from '../../components/Iconify';
-
-export default function ListTable() {
-  const navigate = useNavigate();
-  const { themeStretch } = useSettings();
-  const { corporate_id } = useParams();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [importResult, setImportResult] = useState(null);
-
-  function SearchInput(props: any) {
-    // SEARCH
-    const searchInput = useRef<HTMLInputElement>(null);
-    const [searchText, setSearchText] = useState('');
-
-    const handleSearchChange = (event: any) => {
-      const newSearchText = event.target.value ?? '';
-      setSearchText(newSearchText);
-    };
-
-    const handleSearchSubmit = (event: any) => {
-      event.preventDefault();
-      props.onSearch(searchText); // Trigger to Parent
-    };
-
-    // useEffect(() => {
-    //   // Trigger First Search
-    //   setSearchText(searchParams.get('search') ?? '');
-    // }, [searchParams]);
-
-    return (
-      <form onSubmit={handleSearchSubmit} style={{ flex: '1' }}>
-        <TextField
-          id="search-input"
-          ref={searchInput}
-          label="Search"
-          variant="outlined"
-          fullWidth
-          onChange={handleSearchChange}
-          value={searchText}
-        />
-      </form>
-    );
-  }
-
-  function ImportForm(props: any) {
-    // IMPORT
-    // Create Button Menu
-    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-    const createMenu = Boolean(anchorEl);
-    const importForm = useRef<HTMLInputElement>(null);
-    const [currentImportFileName, setCurrentImportFileName] = useState(null);
-
-    const handleImportChange = (event: any) => {
-      if (event.target.files[0]) {
-        setCurrentImportFileName(event.target.files[0].name);
-      } else {
-        setCurrentImportFileName(null);
-      }
-    };
-
-    const options = ['All', 'Option 2'];
-    const [value, setValue] = React.useState<string | null>(options[0]);
-    const [inputValue, setInputValue] = React.useState('');
-
-    return (
-      <div>
-        <Stack direction={'row'} justifyContent="space-between" spacing={2} sx={{ p: 2 }}>
-          {/* Filter Division */}
-          <Autocomplete
-            value={value}
-            onChange={(event: any, newValue: string | null) => {
-              setValue(newValue);
-            }}
-            inputValue={inputValue}
-            onInputChange={(event, newInputValue) => {
-              setInputValue(newInputValue);
-            }}
-            id="controllable-states-demo"
-            options={options}
-            sx={{ minWidth: 240 }}
-            renderInput={(params) => <TextField {...params} label="Division" />}
-          />
-          {/* Search */}
-          <SearchInput onSearch={applyFilter} />
-
-          {/* Button Import */}
-          <Button
-            id="import-button"
-            variant="outlined"
-            startIcon={<Iconify icon="eva:download-fill" />}
-            sx={{ p: 1.8, minWidth: '104px' }}
-            // onClick={() => {}}
-          >
-            Import
-          </Button>
-          {/* <input
-            type="file"
-            id="file"
-            ref={importForm}
-            style={{ display: 'none' }}
-            onChange={handleImportChange}
-            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
-          /> */}
-          {/* Button Add Task */}
-          <Button variant="contained" startIcon={<AddIcon />} sx={{ p: 1.8, minWidth: '142px' }}>
-            Submit Claim
-          </Button>
-        </Stack>
-      </div>
-    );
-  }
-
-  // Called on every row to map the data to the columns
-  function createData(member: Member): Member {
-    return {
-      ...member,
-    };
-  }
-
-  // Generate the every row of the table
-  // function Row(props: { row: ReturnType<typeof createData> }) {
-  //   const { row } = props;
-  //   const [open, setOpen] = React.useState(true);
-
-  //   return (
-  //     <React.Fragment>
-  //       <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
-  //         <TableCell>
-  //           <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
-  //             {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
-  //           </IconButton>
-  //         </TableCell>
-  //         <TableCell align="left">{row.member_id}</TableCell>
-  //         <TableCell align="left">{row.payor_id}</TableCell>
-  //         <TableCell align="left">{row.name}</TableCell>
-  //         <TableCell align="left">{row.nik}</TableCell>
-  //         <TableCell align="left">{row.nric}</TableCell>
-
-  //         <TableCell align="right">
-  //           <Button variant="outlined" color="success" size="small">
-  //             Active
-  //           </Button>
-  //         </TableCell>
-  //         {/* <TableCell align="right"><Button variant="outlined" color="error" size="small">Disable</Button></TableCell> */}
-  //       </TableRow>
-  //       {/* COLLAPSIBLE ROW */}
-  //       <TableRow>
-  //         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
-  //           <Collapse in={open} timeout="auto" unmountOnExit>
-  //             <Box sx={{ borderBottom: 1 }}>
-  //               <Typography variant="body2" gutterBottom component="div">
-  //                 <Grid></Grid>
-  //               </Typography>
-  //             </Box>
-  //           </Collapse>
-  //         </TableCell>
-  //       </TableRow>
-  //     </React.Fragment>
-  //   );
-  // }
-
-  // Dummy Default Data
-  const [dataTableIsLoading, setDataTableLoading] = useState(true);
-  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
-    current_page: 1,
-    data: [],
-    path: '',
-    first_page_url: '',
-    last_page: 1,
-    last_page_url: '',
-    next_page_url: '',
-    prev_page_url: '',
-    per_page: 10,
-    from: 0,
-    to: 0,
-    total: 0,
-  });
-
-  const loadDataTableData = async (appliedFilter: any | null = null) => {
-    setDataTableLoading(true);
-    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
-    const response = await axios.get('/members', { params: filter });
-
-    setDataTableData(response.data.members);
-    setDataTableLoading(false);
-  };
-
-  const headStyle = {
-    fontWeight: 'bold',
-  };
-
-  const applyFilter = async (searchFilter: string) => {
-    await loadDataTableData({ search: searchFilter });
-    setSearchParams({ search: searchFilter });
-  };
-
-  useEffect(() => {
-    loadDataTableData();
-  }, []);
-
-  return (
-    <Card>
-      <ImportForm />
-      {/* The Main Table */}
-      <TableContainer component={Stack} sx={{ padding: 2, borderRadius: 1 }}>
-        <Table aria-label="collapsible table">
-          <TableBody>
-            <TableRow sx={{ backgroundColor: '#F4F6F8' }}>
-              <TableCell style={headStyle} align="left">
-                MemberID
-              </TableCell>
-              <TableCell style={headStyle} align="left">
-                Name
-              </TableCell>
-              <TableCell style={headStyle} align="left">
-                Divisi
-              </TableCell>
-              <TableCell style={headStyle} align="left">
-                Limit
-              </TableCell>
-              <TableCell style={headStyle} align="right" width={100}>
-                Status
-              </TableCell>
-              <TableCell style={headStyle} align="right" width={100}>
-                Action
-              </TableCell>
-            </TableRow>
-          </TableBody>
-          {dataTableIsLoading ? (
-            <TableBody>
-              <TableRow>
-                <TableCell colSpan={8} align="center">
-                  No Data Found
-                </TableCell>
-              </TableRow>
-            </TableBody>
-          ) : dataTableData.data.length === 0 ? (
-            <TableBody>
-              <TableRow>
-                <TableCell colSpan={8} align="center">
-                  No Data
-                </TableCell>
-              </TableRow>
-            </TableBody>
-          ) : (
-            <TableBody>
-              {/* {dataTableData.data.map((row) => (
-                  <Row key={row.id} row={row} />
-                ))} */}
-              Testing
-            </TableBody>
-          )}
-        </Table>
-      </TableContainer>
-
-      {/* <TablePagination
-          rowsPerPageOptions={[5, 10, 25]}
-          component="div"
-          count={rows.length}
-          rowsPerPage={rowsPerPage}
-          page={page}
-          onPageChange={handleChangePage}
-          onRowsPerPageChange={handleChangeRowsPerPage}
-        /> */}
-    </Card>
-  );
-}

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

@@ -16,17 +16,18 @@ import { useState } from 'react';
 import { fCurrency } from '../../utils/formatNumber';
 // <sections></sections>
 import DialogTopUpLimit from './DialogTopUpLimit';
+import DialogClaimSubmitMember from './DialogClaimSubmitMember';
 
 // ----------------------------------------------------------------------
 
-type DataContent = {
+type DataMembers = {
-  info: string;
+  name: string;
-  date: string;
+  memberId: string;
-  time: string;
+  saldo: string;
 };
 
 type NotificationProps = {
-  data?: DataContent[];
+  data?: { members: DataMembers[] };
 };
 
 // ----------------------------------------------------------------------
@@ -67,7 +68,7 @@ export default function CardBalance({ data }: NotificationProps) {
   const clickHandler = (isDialog: string) => {
     switch (isDialog) {
       case 'submitClaim':
-        setDialogTitle('Notification');
+        setDialogTitle('Add Claim');
         setIsDialog(isDialog);
         setOpenDialog(true);
         break;
@@ -140,14 +141,14 @@ export default function CardBalance({ data }: NotificationProps) {
         </Stack>
       </>
 
-      {/* {isDialog === 'submitClaim' && (
+      {isDialog === 'submitClaim' && (
-        <DialogNotification
+        <DialogClaimSubmitMember
           openDialog={openDialog}
           setOpenDialog={setOpenDialog}
-          title={dialogTitle}
+          title={{ name: dialogTitle }}
-          data={data}
+          data={data?.members}
         />
-      )} */}
+      )}
 
       {isDialog === 'topUpLimit' && (
         <DialogTopUpLimit

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

@@ -0,0 +1,191 @@
+// @mui
+import { styled } from '@mui/material/styles';
+import {
+  Typography,
+  LinearProgress,
+  linearProgressClasses,
+  Stack,
+  TextField,
+  InputAdornment,
+  Card,
+  IconButton,
+} from '@mui/material';
+import { Search as SearchIcon } from '@mui/icons-material';
+// components
+import MuiDialog from '../../components/MuiDialog';
+import Iconify from '../../components/Iconify';
+// React
+import { ReactElement, useRef, useState } from 'react';
+import DialogClaimSubmitMemberSubmission from './DialogClaimSubmitMemberSubmission';
+
+// ----------------------------------------------------------------------
+
+type DataContent = {
+  name: string;
+  memberId: string;
+  saldo: string;
+};
+
+type MuiDialogProps = {
+  title?: {
+    name?: string;
+    icon?: string;
+  };
+  openDialog: boolean;
+  setOpenDialog: Function;
+  content?: ReactElement;
+  data?: DataContent[];
+};
+
+// ----------------------------------------------------------------------
+
+function createData(name: string, memberId: string, saldo: string) {
+  return { name, memberId, saldo };
+}
+
+const rows = [
+  createData('Alexandra tjoa tri atmaja kurniadi', '0122122', '10.000.000'),
+  createData('Marina kurniadi', '0122123', '10.000.000'),
+  createData('Tjoa Indri', '0122124', '10.000.000'),
+  createData('Atmaja Tirta', '0122125', '10.000.000'),
+  createData('Alexandra kurniadi', '0122126', '10.000.000'),
+];
+
+// ----------------------------------------------------------------------
+
+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 DialogClaimSubmitMember = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
+  /* --------------------------------- Search --------------------------------- */
+
+  const searchInput = useRef<HTMLInputElement>(null);
+  const [searchText, setSearchText] = useState('');
+  const [dataMemberClaim, setDataMemberClaim] = useState({
+    name: '',
+    memberId: '',
+    saldo: '',
+  });
+
+  const handleSearchChange = (event: any) => {
+    const newSearchText = event.target.value ?? '';
+    setSearchText(newSearchText);
+  };
+
+  /* -------------------------------------------------------------------------- */
+
+  /* ---------------------------- Get Current Date ---------------------------- */
+
+  const current = new Date();
+  const date = `${current.getDate()} / ${current.getMonth() + 1} / ${current.getFullYear()}`;
+
+  /* -------------------------------------------------------------------------- */
+
+  /* ------------------------------ Icon On Click ----------------------------- */
+
+  const [openDialogClaimMember, setOpenDialogMemberClaim] = useState(false);
+
+  const clickHandler = (name: string, memberId: string, saldo: string) => {
+    setDataMemberClaim({ name: name, memberId: memberId, saldo: saldo });
+    setOpenDialogMemberClaim(true);
+  };
+
+  /* -------------------------------------------------------------------------- */
+
+  const getContent = () => (
+    <Stack>
+      <Stack direction="row" justifyContent="space-between" alignItems="center" paddingY={1}>
+        <Typography variant="subtitle1">Pilih Karyawan</Typography>
+        <Stack sx={{ color: '#757575' }}>
+          <Typography variant="caption">Submission date</Typography>
+          <Typography variant="caption">{date}</Typography>
+        </Stack>
+      </Stack>
+      <TextField
+        id="search-input"
+        ref={searchInput}
+        variant="outlined"
+        fullWidth
+        onChange={handleSearchChange}
+        value={searchText}
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <SearchIcon />
+            </InputAdornment>
+          ),
+        }}
+        placeholder="Cari nama atau member ID disini..."
+        sx={{ marginTop: 2 }}
+      />
+      <Stack marginTop={2} spacing={1}>
+        {rows.map((row, key) => (
+          <Card key={key} sx={{ paddingY: 1, paddingX: 2 }}>
+            <Stack direction="row" alignItems="center" spacing={2}>
+              <img
+                width={40}
+                height={40}
+                src="/images/member.png"
+                alt="user-profile"
+                style={{ borderRadius: '50%' }}
+              />
+              <Stack sx={{ flex: '45%' }}>
+                <Typography variant="subtitle1">{row.name}</Typography>
+                <Typography color="#637381" variant="body2" sx={{ fontWeight: 500 }}>
+                  Member ID : {row.memberId}
+                </Typography>
+              </Stack>
+              <Stack spacing={1} paddingY={1}>
+                <Typography color="#0A0A0A" variant="caption">
+                  Total Limit
+                </Typography>
+                <BorderLinearProgress variant="determinate" value={100} />
+                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+                  {row.saldo} /{' '}
+                  <Typography variant="body2" color="#757575" component="span">
+                    10.000.000
+                  </Typography>
+                </Typography>
+              </Stack>
+              <IconButton onClick={() => clickHandler(row.name, row.memberId, row.saldo)}>
+                <Iconify icon="ic:round-chevron-right" />
+              </IconButton>
+            </Stack>
+          </Card>
+        ))}
+      </Stack>
+    </Stack>
+  );
+
+  return (
+    <>
+      <MuiDialog
+        title={title}
+        openDialog={openDialog}
+        setOpenDialog={setOpenDialog}
+        content={getContent()}
+        maxWidth="sm"
+      />
+
+      <DialogClaimSubmitMemberSubmission
+        title={title}
+        openDialog={openDialogClaimMember}
+        setOpenDialog={setOpenDialogMemberClaim}
+        data={dataMemberClaim}
+      />
+    </>
+  );
+};
+
+export default DialogClaimSubmitMember;

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

@@ -0,0 +1,352 @@
+// @mui
+import { styled } from '@mui/material/styles';
+import {
+  Typography,
+  LinearProgress,
+  linearProgressClasses,
+  Stack,
+  Card,
+  Button,
+  Link,
+  Switch,
+  SwitchProps,
+  FormControlLabel,
+} from '@mui/material';
+import { Add as AddIcon } from '@mui/icons-material';
+// components
+import MuiDialog from '../../components/MuiDialog';
+import Iconify from '../../components/Iconify';
+import { FormProvider } from '../../components/hook-form';
+// React
+import { ReactElement, useEffect, useRef, useState } from 'react';
+// yup
+import * as Yup from 'yup';
+// form
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { LoadingButton } from '@mui/lab';
+
+// ----------------------------------------------------------------------
+
+type DataContent = {
+  name: string;
+  memberId: string;
+  saldo: string;
+};
+
+type MuiDialogProps = {
+  title?: {
+    name?: string;
+    icon?: string;
+  };
+  openDialog: boolean;
+  setOpenDialog: Function;
+  content?: ReactElement;
+  data?: DataContent;
+};
+
+// ----------------------------------------------------------------------
+
+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 DialogClaimSubmitMemberSubmission = ({
+  title,
+  openDialog,
+  setOpenDialog,
+  data,
+}: MuiDialogProps) => {
+  /* --------------------------------- Search --------------------------------- */
+
+  const searchInput = useRef<HTMLInputElement>(null);
+  const [searchText, setSearchText] = useState('');
+
+  const handleSearchChange = (event: any) => {
+    const newSearchText = event.target.value ?? '';
+    setSearchText(newSearchText);
+  };
+
+  /* -------------------------------------------------------------------------- */
+
+  /* ---------------------------- Get Current Date ---------------------------- */
+
+  const current = new Date();
+  const date = `${current.getDate()} / ${current.getMonth() + 1} / ${current.getFullYear()}`;
+
+  /* -------------------------------------------------------------------------- */
+
+  /* ------------------------------- Form Submit ------------------------------ */
+
+  type FormValuesProps = {
+    topup: string;
+  };
+
+  const TopUpSchema = Yup.object().shape({
+    topup: Yup.string(),
+  });
+
+  const defaultValues = {
+    topup: '',
+  };
+
+  const methods = useForm<FormValuesProps>({
+    resolver: yupResolver(TopUpSchema),
+    defaultValues,
+  });
+
+  const {
+    reset,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+  useEffect(() => {
+    if (openDialog === false) {
+      reset();
+    }
+  }, [openDialog, reset]);
+
+  const onSubmit = async (data: FormValuesProps) => {
+    reset();
+  };
+
+  /* -------------------------------------------------------------------------- */
+
+  /* ---------------------------- Ios Switch Style ---------------------------- */
+
+  const IosSwitch = styled((props: SwitchProps) => (
+    <Switch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
+  ))(({ theme }) => ({
+    width: 28,
+    height: 16,
+    padding: 0,
+    marginRight: '10px',
+    '& .MuiSwitch-switchBase': {
+      padding: 0,
+      margin: 2,
+      transitionDuration: '300ms',
+      '&.Mui-checked': {
+        transform: 'translateX(12px)',
+        color: '#fff',
+        '& + .MuiSwitch-track': {
+          opacity: 1,
+          border: 0,
+        },
+        '&.Mui-disabled + .MuiSwitch-track': {
+          opacity: 0.5,
+        },
+      },
+      '&.Mui-focusVisible .MuiSwitch-thumb': {
+        color: '#33cf4d',
+        border: '6px solid #fff',
+      },
+      '&.Mui-disabled .MuiSwitch-thumb': {
+        color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600],
+      },
+      '&.Mui-disabled + .MuiSwitch-track': {
+        opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
+      },
+    },
+    '& .MuiSwitch-thumb': {
+      boxSizing: 'border-box',
+      width: 12,
+      height: 12,
+    },
+    '& .MuiSwitch-track': {
+      borderRadius: 26 / 2,
+      opacity: 1,
+      transition: theme.transitions.create(['background-color'], {
+        duration: 500,
+      }),
+    },
+  }));
+
+  /* -------------------------------------------------------------------------- */
+
+  const getContent = () => (
+    <Stack>
+      <Stack direction="row" justifyContent="space-between" alignItems="center" paddingY={1}>
+        <Typography variant="subtitle1">Claim Submission</Typography>
+        <Stack sx={{ color: '#757575' }}>
+          <Typography variant="caption">Submission date</Typography>
+          <Typography variant="caption">{date}</Typography>
+        </Stack>
+      </Stack>
+      <Card sx={{ paddingY: 1, paddingX: 2, marginTop: 2, backgroundColor: '#F4F6F8' }}>
+        <Stack direction="row" alignItems="center" spacing={2}>
+          <img
+            width={40}
+            height={40}
+            src="/images/member.png"
+            alt="user-profile"
+            style={{ borderRadius: '50%' }}
+          />
+          <Stack sx={{ flex: '45%' }}>
+            <Typography variant="subtitle1">{data && data.name}</Typography>
+            <Typography color="#637381" variant="body2" sx={{ fontWeight: 500 }}>
+              Member ID : {data && data.memberId}
+            </Typography>
+          </Stack>
+        </Stack>
+      </Card>
+      <Card sx={{ paddingY: 1, paddingX: 2, marginTop: 2 }}>
+        <Stack spacing={1} paddingY={1}>
+          <Stack direction="row" justifyContent="space-between">
+            <Typography color="#0A0A0A" variant="caption">
+              Total Limit
+            </Typography>
+            <Link variant="caption" textAlign="center" href="">
+              Details Benefits <Iconify icon="ic:round-chevron-right" />
+            </Link>
+          </Stack>
+          <BorderLinearProgress variant="determinate" value={100} />
+          <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+            {data && data.saldo} /{' '}
+            <Typography variant="body2" color="#757575" component="span">
+              10.000.000
+            </Typography>
+          </Typography>
+        </Stack>
+      </Card>
+      <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+        {/* Invoice */}
+        <Stack marginTop={2} spacing={1}>
+          <Stack>
+            <Typography variant="subtitle2">Real Invoice</Typography>
+            <Typography color="#9E9E9E" variant="caption">
+              Real invoice required
+            </Typography>
+          </Stack>
+          <Card>
+            <Button
+              variant="outlined"
+              startIcon={<AddIcon />}
+              component="label"
+              sx={{ border: 'none', paddingY: 2, width: '100%', ':hover': { border: 'none' } }}
+            >
+              Add Invoice
+              <input name="invoice" hidden accept="image/*" multiple type="file" />
+            </Button>
+          </Card>
+        </Stack>
+        {/* Prescription */}
+        <Stack marginTop={2} spacing={1}>
+          <Stack direction="row" justifyContent="space-between" alignItems="center">
+            <Stack>
+              <Typography variant="subtitle2">
+                Doctor's Prescription and Another Documents
+              </Typography>
+              <Typography color="#9E9E9E" variant="caption">
+                Doctor's Prescription required
+              </Typography>
+            </Stack>
+            <Stack
+              direction="row"
+              padding={1}
+              alignItems="center"
+              sx={{
+                backgroundColor: 'white',
+                border: '1px solid #E0E0E0',
+                borderRadius: '6px',
+                height: 32,
+              }}
+            >
+              <IosSwitch defaultChecked />
+              <Typography color="#404040" variant="body2">
+                Yes
+              </Typography>
+            </Stack>
+          </Stack>
+          <Card>
+            <Button
+              variant="outlined"
+              startIcon={<AddIcon />}
+              component="label"
+              sx={{ border: 'none', paddingY: 2, width: '100%', ':hover': { border: 'none' } }}
+            >
+              Add Prescription
+              <input name="invoice" hidden accept="image/*" multiple type="file" />
+            </Button>
+          </Card>
+        </Stack>
+        {/* Laboratory */}
+        <Stack marginTop={2} spacing={1}>
+          <Stack direction="row" justifyContent="space-between" alignItems="center">
+            <Stack>
+              <Typography variant="subtitle2">
+                Doctor's Prescription and Another Documents
+              </Typography>
+              <Typography color="#9E9E9E" variant="caption">
+                Doctor's Prescription required
+              </Typography>
+            </Stack>
+            <Stack
+              direction="row"
+              padding={1}
+              alignItems="center"
+              sx={{
+                backgroundColor: 'white',
+                border: '1px solid #E0E0E0',
+                borderRadius: '6px',
+                height: 32,
+              }}
+            >
+              <IosSwitch defaultChecked />
+              <Typography color="#404040" variant="body2">
+                Yes
+              </Typography>
+            </Stack>
+          </Stack>
+          <Card>
+            <Button
+              variant="outlined"
+              startIcon={<AddIcon />}
+              component="label"
+              sx={{ border: 'none', paddingY: 2, width: '100%', ':hover': { border: 'none' } }}
+            >
+              Add Result
+              <input name="invoice" hidden accept="image/*" multiple type="file" />
+            </Button>
+          </Card>
+        </Stack>
+        <Stack marginTop={1}>
+          <LoadingButton
+            fullWidth
+            size="large"
+            type="submit"
+            variant="contained"
+            loading={isSubmitting}
+            sx={{ marginTop: 2 }}
+          >
+            Ajukan Permintaan
+          </LoadingButton>
+        </Stack>
+      </FormProvider>
+    </Stack>
+  );
+
+  return (
+    <>
+      <MuiDialog
+        title={title}
+        openDialog={openDialog}
+        setOpenDialog={setOpenDialog}
+        content={getContent()}
+        maxWidth="sm"
+      />
+    </>
+  );
+};
+
+export default DialogClaimSubmitMemberSubmission;

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

@@ -52,7 +52,7 @@ const testData = {
   totalMembers: 50,
   totalCases: 100,
   totalPersen: 75,
-  myLimit: '375.000.000',
+  myLimit: 375000000,
   totalLimit: 500000000,
 };
 
@@ -75,14 +75,14 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
   const [isDisabledButton, setIsDisabledButton] = useState(true);
 
   const TopUpSchema = Yup.object().shape({
-    topup: Yup.string()
+    topup: Yup.number(),
-      /* 
+    //   /*
-    // @ts-ignore */
+    // // @ts-ignore */
-      .test('limit', 'Maximum Top Up Rp. 5.000.000', (val) => (val > 5000000 ? false : true)),
+    //   .test('limit', 'Maximum Top Up Rp. 5.000.000', (val) => (val > 5000000 ? false : true)),
   });
 
   const defaultValues = {
-    topup: '0',
+    topup: 0,
   };
 
   const methods = useForm<FormValuesProps>({
@@ -109,7 +109,8 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
 
   const onCheckHandler = (data: FormValuesProps) => {
     setIsDisabledCheckbox(!isDisabledCheckbox);
-    setValue('topup', '5000000');
+    setIsDisabledButton(false);
+    setValue('topup', testData.totalLimit - testData.myLimit);
   };
 
   const onTopupHandler = (value: string) => {
@@ -175,7 +176,7 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
           <FormControlLabel
             sx={{ typography: 'caption' }}
             control={<Checkbox />}
-            label={'Max ' + fCurrency(5000000)}
+            label={'Max ' + fCurrency(testData.totalLimit - testData.myLimit)}
             onChange={handleSubmit(onCheckHandler)}
           />
 
@@ -188,7 +189,7 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
             sx={{ marginTop: 2 }}
             disabled={isDisabledButton}
           >
-            Login
+            Ajukan Permintaan
           </LoadingButton>
         </FormProvider>
       </Stack>

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

@@ -0,0 +1,361 @@
+/* ---------------------------------- @mui ---------------------------------- */
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Button,
+  TableSortLabel,
+  Box,
+  IconButton,
+  Card,
+  Grid,
+} from '@mui/material';
+import { visuallyHidden } from '@mui/utils';
+/* ---------------------------------- axios --------------------------------- */
+import axios from 'axios';
+/* ---------------------------------- react --------------------------------- */
+import { useEffect, useState } from 'react';
+/* -------------------------------- component ------------------------------- */
+import Iconify from '../../components/Iconify';
+import BaseTablePagination from '../../components/BaseTablePagination';
+/* ---------------------------------- theme --------------------------------- */
+import palette from '../../theme/palette';
+import { useSearchParams } from 'react-router-dom';
+
+/* ---------------------------------- types --------------------------------- */
+
+type PaginationTableProps = {
+  current_page: number;
+  from: number;
+  last_page: number;
+  links: [];
+  path: string;
+  per_page: number;
+  to: number;
+  total: number;
+};
+
+type DataTableProps = {
+  name: string;
+  member_id: string;
+  division: string;
+  limit: string;
+  status: string;
+};
+
+type Order = 'asc' | 'desc';
+
+interface HeadCell {
+  id: string;
+  align: string;
+  label: string;
+  isSort: boolean;
+}
+
+interface EnhancedTableProps {
+  onRequestSort: (event: React.MouseEvent<unknown>, property: string) => void;
+  order: Order;
+  orderBy: string;
+}
+
+/* -------------------------------------------------------------------------- */
+
+/* -------------------------- enchanced table head -------------------------- */
+
+const headCells: readonly HeadCell[] = [
+  {
+    id: 'member_id',
+    align: 'left',
+    label: 'Member ID',
+    isSort: true,
+  },
+  {
+    id: 'name',
+    align: 'center',
+    label: 'Name',
+    isSort: true,
+  },
+  {
+    id: 'division',
+    align: 'center',
+    label: 'Divisi',
+    isSort: true,
+  },
+  {
+    id: 'limit',
+    align: 'center',
+    label: 'Limit',
+    isSort: true,
+  },
+  {
+    id: 'status',
+    align: 'center',
+    label: 'Status',
+    isSort: true,
+  },
+];
+
+function EnhancedTableHead({ order, orderBy, onRequestSort }: EnhancedTableProps) {
+  const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
+    onRequestSort(event, property);
+  };
+
+  return (
+    <TableHead>
+      <TableRow>
+        {headCells.map((headCell) => (
+          <TableCell
+            key={headCell.id}
+            sortDirection={orderBy === headCell.id ? order : false}
+            // @ts-ignore
+            align={headCell.align}
+            sx={{ padding: 2 }}
+          >
+            {headCell.isSort ? (
+              <TableSortLabel
+                active={orderBy === headCell.id}
+                direction={orderBy === headCell.id ? order : 'asc'}
+                onClick={createSortHandler(headCell.id)}
+              >
+                {headCell.label}
+                {orderBy === headCell.id ? (
+                  <Box component="span" sx={visuallyHidden}>
+                    {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                  </Box>
+                ) : null}
+              </TableSortLabel>
+            ) : (
+              headCell.label
+            )}
+          </TableCell>
+        ))}
+        <TableCell align="center">{''}</TableCell>
+      </TableRow>
+    </TableHead>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+
+export default function TableList() {
+  const [order, setOrder] = useState<Order>('asc');
+  const [orderBy, setOrderBy] = useState('name');
+  const [customSearchParams, setCustomSearchParams] = useSearchParams();
+  const [isLoading, setIsLoading] = useState(true);
+  const [dataTable, setDataTable] = useState([]);
+  const [dataDivision, setDataDivision] = useState([]);
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const [appliedParams, setAppliedParams] = useState({});
+  const [paginationTable, setPaginationTable] = useState<PaginationTableProps>({
+    current_page: 0,
+    from: 0,
+    last_page: 0,
+    links: [],
+    path: '',
+    per_page: 0,
+    to: 0,
+    total: 0,
+  });
+
+  /* ------------------------------- handle sort ------------------------------ */
+  const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
+    const isAsc = orderBy === property && order === 'asc';
+    setOrder(isAsc ? 'desc' : 'asc');
+    setOrderBy(property);
+    const params = Object.fromEntries([
+      ...customSearchParams.entries(),
+      ['order', isAsc ? 'desc' : 'asc'],
+      ['orderBy', property],
+    ]);
+    setAppliedParams(params);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* ------------------------------ Search field ------------------------------ */
+  const [searchText, setSearchText] = useState('');
+
+  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchText(event.target.value);
+  };
+
+  const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setIsLoading(true);
+    const params = Object.fromEntries([...customSearchParams.entries(), ['search', searchText]]);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    setAppliedParams(params);
+    setIsLoading(false);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* ---------------------------- table pagination ---------------------------- */
+
+  /* ------------------------ button change pagination ------------------------ */
+  const onPageChangeHandle = async (
+    event: React.MouseEvent<HTMLButtonElement> | null,
+    newPage: number
+  ) => {
+    setIsLoading(true);
+    const params = Object.fromEntries([...customSearchParams.entries(), ['page', newPage + 1]]);
+    setPage(newPage);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    setAppliedParams(params);
+    setIsLoading(false);
+    // setCustomSearchParams.set('page', newPage + 1);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* --------------------------- row page per limit --------------------------- */
+  const onRowsPerPageChangeHandle = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    setIsLoading(true);
+    setPage(0);
+    const params = Object.fromEntries([
+      ...customSearchParams.entries(),
+      ['per_page', parseInt(event.target.value, 10)],
+    ]);
+    setRowsPerPage(parseInt(event.target.value, 10));
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    setAppliedParams(params);
+    setIsLoading(false);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* -------------------------------------------------------------------------- */
+
+  useEffect(() => {
+    (async () => {
+      setIsLoading(true);
+
+      const params =
+        Object.keys(appliedParams).length !== 0
+          ? appliedParams
+          : Object.fromEntries([
+              ...customSearchParams.entries(),
+              ['order', order],
+              ['orderBy', orderBy],
+            ]);
+
+      const response = await axios.get('http://localhost:8001/api/dashboard', {
+        params: params,
+      });
+
+      const division = await axios.get('http://localhost:8001/api/division');
+      setDataDivision(division.data);
+
+      setCustomSearchParams(params);
+      setDataTable(response.data.data);
+      setPaginationTable(response.data.meta);
+      setRowsPerPage(response.data.meta.per_page);
+      setIsLoading(false);
+    })();
+  }, [appliedParams, customSearchParams, order, orderBy, setCustomSearchParams]);
+
+  return (
+    <Card>
+      <Grid container>
+        {/* Field 1 */}
+        <Grid item xs={12} paddingX="24px" paddingY="20px">
+          <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+            <TextField
+              id="search-input"
+              label="Search"
+              variant="outlined"
+              fullWidth
+              onChange={handleSearch}
+              value={searchText}
+            />
+          </form>
+        </Grid>
+        {/* End Field 1 */}
+        {/* Field 2 */}
+        <Grid item xs={12}>
+          <TableContainer component={Paper}>
+            <Table aria-label="collapsible table" size="small">
+              <EnhancedTableHead
+                order={order}
+                orderBy={orderBy}
+                onRequestSort={handleRequestSort}
+              />
+              <TableBody>
+                {isLoading ? (
+                  <TableRow>
+                    <TableCell colSpan={6} align="center">
+                      Loading . . .
+                    </TableCell>
+                  </TableRow>
+                ) : dataTable.length >= 1 ? (
+                  dataTable.map((row: DataTableProps, index) => (
+                    <TableRow key={index}>
+                      <TableCell align="left">{row.member_id}</TableCell>
+                      <TableCell align="center">{row.name}</TableCell>
+                      <TableCell align="center">{row.division}</TableCell>
+                      <TableCell align="center">{row.limit}</TableCell>
+                      <TableCell align="center">
+                        {row.status.toLowerCase() === 'active' ? (
+                          <Button
+                            sx={{
+                              backgroundColor: 'rgba(84, 214, 44, 0.16)',
+                              color: palette.dark.success.dark,
+                              paddingY: 0,
+                              '&:hover': {
+                                backgroundColor: 'rgba(84, 214, 44, 0.32)',
+                                color: palette.dark.success.darker,
+                              },
+                            }}
+                          >
+                            {row.status}
+                          </Button>
+                        ) : (
+                          <Button
+                            sx={{
+                              backgroundColor: 'rgba(255, 72, 66, 0.16)',
+                              color: palette.dark.error.dark,
+                              paddingY: 0,
+                              '&:hover': {
+                                backgroundColor: 'rgba(255, 72, 66, 0.32)',
+                                color: palette.dark.error.darker,
+                              },
+                            }}
+                          >
+                            {row.status}
+                          </Button>
+                        )}
+                      </TableCell>
+                      <TableCell align="right">
+                        <IconButton>
+                          <Iconify icon="ic:baseline-more-vert" />
+                        </IconButton>
+                      </TableCell>
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell colSpan={6} align="center">
+                      No Data Found
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </TableContainer>
+
+          {/* Pagination */}
+          <BaseTablePagination
+            count={paginationTable.total}
+            onPageChange={onPageChangeHandle}
+            page={page}
+            rowsPerPage={rowsPerPage}
+            onRowsPerPageChange={onRowsPerPageChangeHandle}
+          />
+        </Grid>
+        {/* End Field 2 */}
+      </Grid>
+    </Card>
+  );
+}

frontend/client-portal/src/theme/overrides/Table.ts

@@ -4,9 +4,19 @@ import { Theme } from '@mui/material/styles';
 
 export default function Table(theme: Theme) {
   return {
+    MuiTableHead: {
+        styleOverrides: {
+          root: {
+            '.MuiTableRow-root': {
+              borderBottom: 'none',
+            },
+          },
+      },
+    },
     MuiTableRow: {
       styleOverrides: {
         root: {
+          borderBottom: '1px solid rgba(241, 243, 244, 1)',
           '&.Mui-selected': {
             backgroundColor: theme.palette.action.selected,
             '&:hover': {

frontend/dashboard/src/pages/Corporates/Index.tsx

@@ -1,5 +1,30 @@
 // @mui
-import { Box, Button, Card, Collapse, Container, FormControl, Grid, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Stack } from '@mui/material';
+import {
+  Box,
+  Button,
+  Card,
+  Collapse,
+  Container,
+  FormControl,
+  Grid,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+  Badge,
+  Stack,
+} from '@mui/material';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import PublishIcon from '@mui/icons-material/Publish';
@@ -10,7 +35,7 @@ import useSettings from '../../hooks/useSettings';
 import Page from '../../components/Page';
 import axios from '../../utils/axios';
 import useAuth from '../../hooks/useAuth';
-import { Link , NavLink as RouterLink, useSearchParams } from 'react-router-dom';
+import { Link, NavLink as RouterLink, useSearchParams } from 'react-router-dom';
 import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
 import { Theme, useTheme } from '@mui/material/styles';
 import { Corporate } from '../../@types/corporates';
@@ -25,10 +50,10 @@ export default function Corporates() {
   const [searchParams, setSearchParams] = useSearchParams();
 
   // Called on every row to map the data to the columns
-  function createData( corporate: Corporate ): Corporate {
+  function createData(corporate: Corporate): Corporate {
     return {
       ...corporate,
-    }
+    };
   }
 
   // Dummy Default Data
@@ -36,19 +61,19 @@ export default function Corporates() {
   const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
     current_page: 1,
     data: [],
-    path: "",
+    path: '',
-    first_page_url: "",
+    first_page_url: '',
     last_page: 1,
-    last_page_url: "",
+    last_page_url: '',
-    next_page_url: "",
+    next_page_url: '',
-    prev_page_url: "",
+    prev_page_url: '',
     per_page: 10,
     from: 0,
     to: 0,
-    total: 0
+    total: 0,
   });
 
-  const loadDataTableData = async (appliedFilter : any | null = null) => {
+  const loadDataTableData = async (appliedFilter: any | null = null) => {
     setDataTableLoading(true);
     const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
     const response = await axios.get('/corporates', { params: filter });
@@ -56,25 +81,22 @@ export default function Corporates() {
     setDataTableLoading(false);
 
     setDataTableData(response.data);
-  }
+  };
-
 
   const applyFilter = async (searchFilter: any) => {
-    await loadDataTableData({ "search" : searchFilter });
+    await loadDataTableData({ search: searchFilter });
-    setSearchParams({ "search" : searchFilter });
+    setSearchParams({ search: searchFilter });
-  }
+  };
 
-  const handlePageChange = (event : ChangeEvent, value: number) => {
+  const handlePageChange = (event: ChangeEvent, value: number) => {
-    const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
+    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
     loadDataTableData(filter);
     setSearchParams(filter);
-  }
+  };
-
 
   useEffect(() => {
     loadDataTableData();
-  }, [])
+  }, []);
-
 
   const headStyle = {
     fontWeight: 'bold',
@@ -92,13 +114,7 @@ export default function Corporates() {
     },
   };
 
-  const names = [
+  const names = ['PLAN001', 'PLAN002', 'PLAN003', 'PLAN004', 'PLAN005'];
-    'PLAN001',
-    'PLAN002',
-    'PLAN003',
-    'PLAN004',
-    'PLAN005',
-  ];
   function getStyles(name: string, personName: string[], theme: Theme) {
     return {
       fontWeight:
@@ -117,7 +133,7 @@ export default function Corporates() {
     } = event;
     setPlanIdFilter(
       // On autofill we get a stringified value.
-      typeof value === 'string' ? value.split(',') : value,
+      typeof value === 'string' ? value.split(',') : value
     );
   };
 
@@ -128,36 +144,44 @@ export default function Corporates() {
     } = event;
     setStatusFilter(
       // On autofill we get a stringified value.
-      typeof value === 'string' ? value.split(',') : value,
+      typeof value === 'string' ? value.split(',') : value
     );
   };
   // END FILTER SELECT
 
   // Component Search Input
   function SearchInput(props: any) {
-     // SEARCH
+    // SEARCH
     const searchInput = useRef<HTMLInputElement>(null);
-    const [searchText, setSearchText] = useState("");
+    const [searchText, setSearchText] = useState('');
 
     const handleSearchChange = (event: any) => {
-      const newSearchText = event.target.value ?? ''
+      const newSearchText = event.target.value ?? '';
       setSearchText(newSearchText);
-    }
+    };
 
     const handleSubmit = (event: any) => {
       event.preventDefault();
       props.onSearch(searchText); // Trigger to Parent
-    }
+    };
 
-    useEffect(() =>  {
+    useEffect(() => {
       // console.log('Search Input: useEffect')
       setSearchText(searchParams.get('search') ?? '');
-    }, [searchParams])
+    }, [searchParams]);
 
     return (
       <form onSubmit={handleSubmit} style={{ width: '100%' }}>
         <Stack direction={'row'} spacing={2} sx={{ mb: 2 }}>
-          <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+          <TextField
+            id="search-input"
+            ref={searchInput}
+            label="Search"
+            variant="outlined"
+            fullWidth
+            onChange={handleSearchChange}
+            value={searchText}
+          />
 
           {/* <Grid item>
             <TextField id="outlined-basic" label="Search" variant="outlined" sx={{ width: 400 }}/>
@@ -214,17 +238,21 @@ export default function Corporates() {
           </Grid> */}
 
           {/* <Grid item> */}
-            {/* <input id="importMember" ref={importMember} style={{ display: 'none' }} type="file" accept='.csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, text/plain' />
+          {/* <input id="importMember" ref={importMember} style={{ display: 'none' }} type="file" accept='.csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, text/plain' />
             <Button variant="outlined" startIcon={<PublishIcon />} sx={{ p: 1.8 }} onClick={handleImportButton}>
               Import
             </Button> */}
-            <Link to={"/corporates/create"}>
+          <Link to={'/corporates/create'}>
-              <Button variant="outlined" startIcon={<AddIcon />} sx={{ p: 1.8 }} >Create</ Button>
+            <Button variant="outlined" startIcon={<AddIcon />} sx={{ p: 1.8 }}>
-            </Link>
+              Create
+            </Button>
+          </Link>
           {/* </Grid> */}
         </Stack>
 
-        <Button type='submit' sx={{ display: 'none' }}>Search</Button>
+        <Button type="submit" sx={{ display: 'none' }}>
+          Search
+        </Button>
       </form>
     );
   }
@@ -236,50 +264,80 @@ export default function Corporates() {
     const [open, setOpen] = React.useState(false);
 
     const handleActivate = (model: any, status: string) => {
-      axios.put(`/corporates/${row.id}/activation`, { 
+      axios
-        // service_code: service.service_code,
+        .put(`/corporates/${row.id}/activation`, {
-        active: status == 'active'
+          // service_code: service.service_code,
-      })
+          active: status == 'active',
-      .then((res) => {
-        setDataTableData({
-          ...dataTableData,
-          data: dataTableData.data.map((model) => {
-            let updatedModel = model
-            if (row.id == model.id) {
-              updatedModel.active = res.data.corporate.active
-            }
-            return updatedModel
-          })
         })
-      })
+        .then((res) => {
-      .catch((error) => {
+          setDataTableData({
-        // console.log('asdasd', error.response.data.message)
+            ...dataTableData,
-        enqueueSnackbar(error.response.data.message ?? error.message ?? 'Failed Processing Request', { variant: 'error' });
+            data: dataTableData.data.map((model) => {
-      })
+              let updatedModel = model;
-    }
+              if (row.id == model.id) {
+                updatedModel.active = res.data.corporate.active;
+              }
+              return updatedModel;
+            }),
+          });
+        })
+        .catch((error) => {
+          // console.log('asdasd', error.response.data.message)
+          enqueueSnackbar(
+            error.response.data.message ?? error.message ?? 'Failed Processing Request',
+            { variant: 'error' }
+          );
+        });
+    };
 
     return (
       <React.Fragment>
         <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
           <TableCell>
-            <IconButton
+            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
-              aria-label="expand row"
-              size="small"
-              onClick={() => setOpen(!open)}
-            >
               {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
             </IconButton>
           </TableCell>
           <TableCell align="left">{row.code}</TableCell>
           <TableCell align="left">{row.name}</TableCell>
           <TableCell align="left">
-            {( row.active == 1 && <Button variant="outlined" color="success" size="small" onClick={() => { handleActivate(row, 'inactive') }}>Active</Button> )}
+            {row.active == 1 && (
-            {( row.active != 1 && <Button variant="outlined" color="error" size="small" onClick={() => { handleActivate(row, 'active') }}>Inactive</Button> )}
+              <Button
+                variant="outlined"
+                color="success"
+                size="small"
+                onClick={() => {
+                  handleActivate(row, 'inactive');
+                }}
+              >
+                Active
+              </Button>
+            )}
+            {row.active != 1 && (
+              <Button
+                variant="outlined"
+                color="error"
+                size="small"
+                onClick={() => {
+                  handleActivate(row, 'active');
+                }}
+              >
+                Inactive
+              </Button>
+            )}
           </TableCell>
           <TableCell align="right">
             <Stack direction="row" justifyContent="flex-end" spacing={1}>
-              <Link to={"/corporates/" + row.id + "/edit"}><Button variant="outlined" color="primary" size="small">Edit</Button></ Link>
+              <Link to={'/corporates/' + row.id + '/edit'}>
-              <Link to={"/corporates/" + row.id + ""}><Button variant="outlined" color="primary" size="small">Config</Button></ Link>
+                <Button variant="outlined" color="primary" size="small">
+                  Edit
+                </Button>
+              </Link>
+              <Link to={'/corporates/' + row.id + ''}>
+                <Button variant="outlined" color="primary" size="small">
+                  Config
+                </Button>
+              </Link>
             </Stack>
           </TableCell>
         </TableRow>
@@ -335,7 +393,10 @@ export default function Corporates() {
                         Minimal Deposit
                       </Grid>
                       <Grid item xs={6}>
-                        : {row.current_policy ? fCurrency(row.current_policy?.minimal_deposit_net) : '-'}
+                        :{' '}
+                        {row.current_policy
+                          ? fCurrency(row.current_policy?.minimal_deposit_net)
+                          : '-'}
                       </Grid>
                     </Grid>
                   </Grid>
@@ -366,7 +427,6 @@ export default function Corporates() {
                   </Grid>
                 </Grid>
 
-
                 <Typography sx={{ fontWeight: '600', mb: 1, mt: 2 }}>Sub Corporate</Typography>
                 <Grid container>
                   <Grid item xs={12}>
@@ -380,7 +440,6 @@ export default function Corporates() {
                     </Grid>
                   </Grid>
                 </Grid>
-
               </Box>
             </Collapse>
           </TableCell>
@@ -403,47 +462,55 @@ export default function Corporates() {
           ]}
         />
 
-        <SearchInput onSearch={applyFilter}/>
+        <SearchInput onSearch={applyFilter} />
 
         <Card>
-        {/* The Main Table */}
+          {/* The Main Table */}
-        <TableContainer component={Paper}>
+          <TableContainer component={Paper}>
-          <Table aria-label="collapsible table">
+            <Table aria-label="collapsible table">
-            <TableBody>
+              <TableBody>
-              <TableRow>
+                <TableRow>
-                <TableCell style={headStyle} align="left" width={50} />
+                  <TableCell style={headStyle} align="left" width={50} />
-                <TableCell style={headStyle} align="left">Code</TableCell>
+                  <TableCell style={headStyle} align="left">
-                <TableCell style={headStyle} align="left">Name</TableCell>
+                    Code
-                <TableCell style={headStyle} align="left" width={100}>Status</TableCell>
+                  </TableCell>
-                <TableCell style={headStyle} align="right" width={100}>Action</TableCell>
+                  <TableCell style={headStyle} align="left">
-              </TableRow>
+                    Name
-            </TableBody>
+                  </TableCell>
-            {dataTableIsLoading ? 
+                  <TableCell style={headStyle} align="left" width={100}>
-              (
+                    Status
+                  </TableCell>
+                  <TableCell style={headStyle} align="right" width={100}>
+                    Action
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+              {dataTableIsLoading ? (
                 <TableBody>
                   <TableRow>
-                    <TableCell colSpan={8} align="center">Loading</TableCell>
+                    <TableCell colSpan={8} align="center">
+                      Loading
+                    </TableCell>
+                  </TableRow>
+                </TableBody>
+              ) : dataTableData.data.length == 0 ? (
+                <TableBody>
+                  <TableRow>
+                    <TableCell colSpan={8} align="center">
+                      No Data
+                    </TableCell>
                   </TableRow>
                 </TableBody>
               ) : (
-                dataTableData.data.length == 0 ? 
+                <TableBody>
-                (
+                  {dataTableData.data.map((row) => (
-                  <TableBody>
+                    <Row key={row.code} row={row} />
-                    <TableRow>
+                  ))}
-                      <TableCell colSpan={8} align="center">No Data</TableCell>
+                </TableBody>
-                    </TableRow>
+              )}
-                  </TableBody>
+            </Table>
-                ) : (
+          </TableContainer>
-                  <TableBody>
+          <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
-                    {dataTableData.data.map(row => (
-                      <Row key={row.code} row={row} />
-                    ))}
-                  </TableBody>
-                )
-            )}
-          </Table>
-        </TableContainer>
-        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
         </Card>
       </Container>
     </Page>