client portal dashboard & claim-reports

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

@@ -0,0 +1,19 @@
+// react
+import React from 'react';
+// mui
+import { Dialog, DialogTitle, DialogContent } from '@mui/material';
+
+export default function Popup(props: any) {
+  const { title, children, openPopup, setOpenPopup } = props;
+
+  return (
+    <Dialog open={openPopup}>
+      <DialogTitle>
+        <div>Title goes here.</div>
+      </DialogTitle>
+      <DialogContent>
+        <div>Content goes here.</div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -18,21 +18,29 @@ const navConfig = [
   // GENERAL
   // ----------------------------------------------------------------------
   {
-    items: [
+    items: [{ title: 'Dashboard', path: '/dashboard' }],
-      { title: 'Dashboard', path: '/dashboard', icon: ICONS.dashboard },
-    ],
   },
 
-  // Membership
+  // Case Management
   // ----------------------------------------------------------------------
   {
-    subheader: 'Membership',
+    subheader: 'Case Management',
     items: [
       {
-        title: 'Member List',
+        title: 'Alarm Center',
         path: '/members',
-        icon: ICONS.user,
+        // icon: ICONS.default,
       },
+      {
+        title: 'Claim Report',
+        path: '/claim-reports',
+        // icon: ICONS.default,
+      },
+      // {
+      //   title: 'Member List',
+      //   path: '/members',
+      //   icon: ICONS.user,
+      // },
       // {
       //   title: 'Member Movement',
       //   // path: '/',
@@ -45,6 +53,25 @@ const navConfig = [
       // },
     ],
   },
+
+  // User Management
+  // ----------------------------------------------------------------------
+  // {
+  //   subheader: 'User Management',
+  //   items: [
+  //     {
+  //       title: 'User',
+  //       path: '/members',
+  //       icon: ICONS.default,
+  //     },
+  //   ],
+  // },
+
+  // Linking Tools
+  // ----------------------------------------------------------------------
+  // {
+  //   subheader: 'Linking Tools',
+  // },
 ];
 
 export default navConfig;

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

@@ -0,0 +1,30 @@
+// 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.tsx

@@ -4,16 +4,20 @@ import { Container, Grid, Typography } from '@mui/material';
 import useSettings from '../hooks/useSettings';
 // components
 import Page from '../components/Page';
+import Popup from '../components/Popup';
 // import axios from '../utils/axios';
-// import { useEffect, useState } from 'react';
+// DashboardComponent
 import BalanceCard from '../sections/dashboard/BalanceCard';
 import NotificationCard from '../sections/dashboard/NotificationCard';
 import DashboardTable from '../sections/dashboard/DashboardTable';
+// React
+import { useState } from 'react';
 
 // ----------------------------------------------------------------------
 
 export default function Dashboard() {
   const { themeStretch } = useSettings();
+  const [openPopup, setOpenPopup] = useState(false);
 
   // const { logout } = useAuth();
   // const [corporate, setCorporate] = useState({});
@@ -45,13 +49,15 @@ export default function Dashboard() {
             <NotificationCard />
           </Grid>
           <Grid item xs={6} lg={6} md={12}>
-            <BalanceCard />
+            <BalanceCard setOpenPopup={setOpenPopup} />
           </Grid>
           <Grid item xs={12} lg={12} md={12}>
             <DashboardTable />
           </Grid>
         </Grid>
       </Container>
+
+      <Popup openPopup={openPopup} setOpenPopup={setOpenPopup} />
     </Page>
   );
 }

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

@@ -1,38 +0,0 @@
-import { Card, Grid } from "@mui/material";
-import { useParams } from "react-router-dom";
-import HeaderBreadcrumbs from "../../components/HeaderBreadcrumbs";
-import Page from "../../components/Page";
-import useSettings from "../../hooks/useSettings";
-import List from "./List";
-
-
-
-export default function Drugs() {
-  const { themeStretch } = useSettings();
-
-  const { corporate_id } = useParams();
-
-  const pageTitle = 'Formularium';
-  return (
-    <Page title={ pageTitle }>
-
-      <HeaderBreadcrumbs
-        heading={ pageTitle }
-        links={[
-          {
-            name: 'Master',
-            href: '/master',
-          },
-          {
-            name: 'Formularium',
-            href: '/master/formulariums',
-          },
-        ]}
-      />
-      
-      <Card>
-        <List />
-      </Card>
-    </Page>
-  );
-}

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

@@ -1,314 +0,0 @@
-// @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 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 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/routes/index.tsx

@@ -7,9 +7,6 @@ import LogoOnlyLayout from '../layouts/LogoOnlyLayout';
 import LoadingScreen from '../components/LoadingScreen';
 import GuestGuard from '../guards/GuestGuard';
 import { RegisterForm } from '../sections/auth/register';
-import Register from '../pages/auth/Register';
-import ResetPassword from '../pages/auth/ResetPassword';
-import VerifyCode from '../pages/auth/VerifyCode';
 import { AuthProvider } from '../contexts/LaravelAuthContext';
 import AuthGuard from '../guards/AuthGuard';
 
@@ -68,18 +65,19 @@ export default function Router() {
           <AuthGuard>
             <DashboardLayout />
           </AuthGuard>
-        </AuthProvider>),
+        </AuthProvider>
-      children:[
+      ),
+      children: [
         { element: <Navigate to="/dashboard" replace />, index: true },
         {
           path: 'dashboard',
           element: <Dashboard />,
         },
         {
-          path: 'members',
+          path: 'claim-reports',
-          element: <Members />,
+          element: <ClaimReports />,
         },
-      ]
+      ],
     },
     // {
     //   path: '/dashboard',
@@ -120,6 +118,5 @@ const Login = Loadable(lazy(() => import('../pages/auth/Login')));
 const Dashboard = Loadable(lazy(() => import('../pages/Dashboard')));
 const NotFound = Loadable(lazy(() => import('../pages/Page404')));
 
-// Members
+// Claim Reports
-const Members = Loadable(lazy(() => import('../pages/Members/Index')));
+const ClaimReports = Loadable(lazy(() => import('../pages/ClaimReports/Index')));
-const MedicinesCreate = Loadable(lazy(() => import('../pages/Medicines/Create')));

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

@@ -1,28 +1,21 @@
 import * as Yup from 'yup';
-import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
-import { Link as RouterLink, useNavigate } from 'react-router-dom';
 // form
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 // @mui
-import { Link, Stack, Alert, IconButton, InputAdornment } from '@mui/material';
+import { Stack, Alert } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
-// routes
-import { PATH_AUTH } from '../../../routes/paths';
 // hooks
 import useAuth from '../../../hooks/useAuth';
 import useIsMountedRef from '../../../hooks/useIsMountedRef';
 // components
-import Iconify from '../../../components/Iconify';
+import { FormProvider, RHFTextField } from '../../../components/hook-form';
-import { FormProvider, RHFTextField, RHFCheckbox } from '../../../components/hook-form';
 
 // ----------------------------------------------------------------------
 
 type FormValuesProps = {
   email: string;
-  password: string;
-  remember: boolean;
-  afterSubmit?: string;
 };
 
 export default function LoginForm() {
@@ -31,22 +24,13 @@ export default function LoginForm() {
 
   const isMountedRef = useIsMountedRef();
 
-  const [showPassword, setShowPassword] = useState(false);
-
   const LoginSchema = Yup.object().shape({
     email: Yup.string().email('Email must be a valid email address').required('Email is required'),
     password: Yup.string().required('Password is required'),
   });
 
-  const defaultValues = {
-    email: 'admin@linksehat.dev',
-    password: 'password',
-    remember: true,
-  };
-
   const methods = useForm<FormValuesProps>({
     resolver: yupResolver(LoginSchema),
-    defaultValues,
   });
 
   const {
@@ -58,7 +42,7 @@ export default function LoginForm() {
 
   const onSubmit = async (data: FormValuesProps) => {
     try {
-      const loginResult = await login(data.email, data.password );
+      await login(data.email);
 
       navigate('/dashboard');
     } catch (error) {
@@ -75,32 +59,10 @@ export default function LoginForm() {
   return (
     <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
       <Stack spacing={3}>
-        <Alert severity='primary'>Email : admin@linksehat.dev & Password : password</Alert>
+        <Alert severity="info">Masukkan akun yang telah terdaftar</Alert>
         {!!errors.afterSubmit && <Alert severity="error">{errors.afterSubmit.message}</Alert>}
 
         <RHFTextField name="email" label="Email address" />
-
-        <RHFTextField
-          name="password"
-          label="Password"
-          type={showPassword ? 'text' : 'password'}
-          InputProps={{
-            endAdornment: (
-              <InputAdornment position="end">
-                <IconButton onClick={() => setShowPassword(!showPassword)} edge="end">
-                  <Iconify icon={showPassword ? 'eva:eye-fill' : 'eva:eye-off-fill'} />
-                </IconButton>
-              </InputAdornment>
-            ),
-          }}
-        />
-      </Stack>
-
-      <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ my: 2 }}>
-        <RHFCheckbox name="remember" label="Remember me" />
-        <Link component={RouterLink} variant="subtitle2" to={PATH_AUTH.resetPassword}>
-          Forgot password?
-        </Link>
       </Stack>
 
       <LoadingButton

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

@@ -0,0 +1,67 @@
+// @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

@@ -0,0 +1,313 @@
+// @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/BalanceCard.tsx

@@ -25,11 +25,13 @@ const RootStyle = styled(Card)(({ theme }) => ({
 
 // ----------------------------------------------------------------------
 
-const INITIAL = 500000000;
+const INITIAL = '500.000.000';
-const TOTAL = 250000000;
+const TOTAL = 375000000;
-const PERCENT = 50;
+const PERCENT = 75;
+
+export default function BalanceCard(props: any) {
+  const { setOpenPopup } = props;
 
-export default function BalanceCard() {
   const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
     height: 10,
     borderRadius: 6,
@@ -50,7 +52,7 @@ export default function BalanceCard() {
             Total Limit
           </Typography>
           <Typography sx={{ typography: 'body2' }}>{fCurrency(TOTAL)}</Typography>
-          <Typography sx={{ typography: 'caption' }}>/ {INITIAL}</Typography>
+          <Typography sx={{ typography: 'caption', color: '#919EAB' }}>/ {INITIAL}</Typography>
         </div>
 
         <Stack direction="row" alignItems="center" justifyContent="center">
@@ -60,11 +62,23 @@ export default function BalanceCard() {
         </Stack>
       </Stack>
 
-      <BorderLinearProgress variant="determinate" value={50} sx={{ mb: 1 }} />
+      <BorderLinearProgress variant="determinate" value={PERCENT} sx={{ mb: 1 }} />
 
       <Stack sx={{ backgroundColor: '#B2E8E8', paddingY: 1, paddingX: 1.5, mb: 2 }}>
-        <Typography sx={{ typography: 'caption' }}>Lock Fund ( 25% )</Typography>
+        <Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
-        <Typography sx={{ typography: 'caption' }}>125.000.000 / 125.000.000</Typography>
+          <Iconify
+            icon="bxs:lock-alt"
+            width={12}
+            height={13}
+            sx={{ color: '#424242', marginRight: '6px' }}
+          />
+          <Typography variant="caption" component="span">
+            Lock Fund ( 25% )
+          </Typography>
+        </Typography>
+        <Typography sx={{ typography: 'caption', color: '#637381' }}>
+          125.000.000 / 125.000.000
+        </Typography>
       </Stack>
 
       <Stack direction="row" spacing={2}>
@@ -72,6 +86,7 @@ export default function BalanceCard() {
           variant="outlined"
           startIcon={<Iconify icon="bi:clipboard-check-fill" />}
           fullWidth={true}
+          onClick={() => setOpenPopup(true)}
         >
           Submit Claim
         </Button>

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

@@ -148,7 +148,7 @@ export default function DashboardTable() {
             accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
           /> */}
           {/* Button Add Task */}
-          <Button startIcon={<AddIcon />} sx={{ p: 1.8, minWidth: '142px' }}>
+          <Button variant="contained" startIcon={<AddIcon />} sx={{ p: 1.8, minWidth: '142px' }}>
             Add Data
           </Button>
         </Stack>