comitting

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/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/pages/AlarmCenter/ServiceMonitoring.tsx

@@ -102,7 +102,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,10 @@ 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 List from './List';
 
 // ----------------------------------------------------------------------
 
@@ -56,12 +55,10 @@ export default function Dashboard() {
             <CardBalance />
           </Grid>
           <Grid item xs={12} lg={12} md={12}>
-            {/* <List /> */}
+            <List />
           </Grid>
         </Grid>
       </Container>
-
-      {/* <DialogDetailClaim /> */}
     </Page>
   );
 }

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

@@ -0,0 +1,364 @@
+// @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 = ['All', 'Option 2'];
+
+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') ?? '');
+    }, [searchParams]);
+
+    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/Dashboard/ListTest.tsx

@@ -0,0 +1,401 @@
+// @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,
+} 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';
+
+export default function ListTest() {
+  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={{ 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} />
+            {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
+            <Button
+              id="import-button"
+              variant="outlined"
+              startIcon={<AddIcon />}
+              sx={{ p: 1.8 }}
+              aria-controls={createMenu ? 'basic-menu' : undefined}
+              aria-haspopup="true"
+              aria-expanded={createMenu ? 'true' : undefined}
+              onClick={handleClick}
+            >
+              Create
+            </Button>
+            <Menu
+              id="import-button"
+              anchorEl={anchorEl}
+              open={createMenu}
+              onClose={handleClose}
+              MenuListProps={{
+                'aria-labelledby': 'basic-button',
+              }}
+            >
+              <MenuItem
+                onClick={() => {
+                  navigate('/master/formularium/create');
+                }}
+              >
+                Create
+              </MenuItem>
+              <MenuItem onClick={handleImportButton}>Import</MenuItem>
+              <MenuItem onClick={handleClose}>Download Template</MenuItem>
+            </Menu>
+          </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,
+    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>
+      <ImportForm />
+
+      <Card>
+        {/* The Main Table */}
+        <TableContainer component={Paper}>
+          <Table aria-label="collapsible table">
+            <TableBody>
+              <TableRow>
+                <TableCell style={headStyle} align="left">
+                  Detail
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  MemberID
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  PayorID
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Name
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  NIK
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  PlanID
+                </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">
+                    Loading
+                  </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} />
+                ))}
+              </TableBody>
+            )}
+          </Table>
+        </TableContainer>
+
+        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
+      </Card>
+    </Stack>
+  );
+}

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

@@ -54,7 +54,16 @@ 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 }}>

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

@@ -66,6 +66,22 @@ export default function Router() {
         },
       ],
     },
+    {
+      path: 'user-profile/:id',
+      element: (
+        <AuthProvider>
+          <AuthGuard>
+            <DashboardLayout />
+          </AuthGuard>
+        </AuthProvider>
+      ),
+      children: [
+        {
+          element: <AlarmCenterUserProfile />,
+          index: true,
+        },
+      ],
+    },
     {
       path: '/alarm-center',
       element: (
@@ -127,6 +143,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/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>