Update Hospital Portal

Modules/HospitalPortal/Http/Controllers/Api/ClaimRequestController.php

@@ -267,6 +267,35 @@ class ClaimRequestController extends Controller
 
                         $query->orderBy($orderBy, $direction);
                     })
+                    ->when($request->input('start_date') && !$request->input('end_date'), function ($query, $start_date) {
+                        $query->where(function ($query) use ($start_date) {
+                            $query->where('claim_requests.submission_date', '<', $start_date);
+                        });
+                    })
+                    ->when($request->input('status'), function ($query, $status) {
+                        $query->where(function ($query) use ($status) {
+                            
+                            if ($status === 'requested') {
+                                $query->where('claim_requests.status', '=', 'requested');
+                            }
+                    
+                            if ($status === 'reviewed') {
+                                $query->where('claim_requests.status', '=', 'approved');
+                                $query->where('claims.status', '=', 'received');
+                            }
+
+                            if ($status === 'approved') {
+                                $query->where('claim_requests.status', '=', 'approved');
+                                $query->where('claims.status', '=', 'approved');
+                            }
+
+                            if ($status === 'declined') {
+                                $query->where('claim_requests.status', '=', 'approved');
+                                $query->where('claims.status', '=', 'declined');
+                            }
+                    
+                        });
+                    })
                     ->select('members.id', 'claim_requests.code','members.member_id', 'members.name as full_name', 'corporate_divisions.name AS division_name', 
                         DB::raw('
                             CASE 

frontend/hospital-portal/src/components/Table.tsx

@@ -204,7 +204,7 @@ export default function Table<T>({
             {searchs && searchs.useSearchs ? (
               <Fragment>
                 {filterStatus && filterStatus.useFilter ? (
-                  <Grid item xs={12} lg={4} xl={4}>
+                  <Grid item xs={12} lg={10} xl={10}>
                     <form onSubmit={searchs.handleSearchSubmit}>
                       <TextField
                         id="search-input"
@@ -251,13 +251,12 @@ export default function Table<T>({
             {/* Start date */}
             {filterStartDate && filterStartDate.useFilter ? (
               <Grid item xs={12} lg={2} xl={2}>
-              <form onChange={filterStartDate.handleStartDateChange}>
+              <form onChange={(event) => filterStartDate.handleStartDateChange(event)}>
                 <TextField
                   id="date-input"
                   type="date"
                   variant="outlined"
                   value={filterStartDate.startDate}
-                  onChange={(event) => filterStartDate.setStartDate(event.target.value)}
                   fullWidth
                   label="Start Date"
                   InputLabelProps={{
@@ -272,13 +271,12 @@ export default function Table<T>({
 
             {filterEndDate && filterEndDate.useFilter ? (
               <Grid item xs={12} lg={2} xl={2}>
-              <form onChange={filterEndDate.handleEndDateChange}>
+              <form onChange={(event) => filterEndDate.handleEndDateChange(event)}>
                 <TextField
                   id="date-input"
                   type="date"
                   variant="outlined"
                   value={filterEndDate.endDate}
-                  onChange={(event) => filterEndDate.setEndDate(event.target.value)}
                   fullWidth
                   label="End Date"
                   InputLabelProps={{

frontend/hospital-portal/src/contexts/CollapseDrawerContext.tsx

@@ -35,14 +35,14 @@ function CollapseDrawerProvider({ children }: CollapseDrawerProviderProps) {
     hover: false
   });
 
-  // useEffect(() => {
-  //   if (isDesktop) {
-  //     setCollapse({
-  //       click: false,
-  //       hover: false
-  //     });
-  //   }
-  // }, [isDesktop]);
+  useEffect(() => {
+    if (isDesktop) {
+      setCollapse({
+        click: false,
+        hover: false
+      });
+    }
+  }, [isDesktop]);
 
   const handleToggleCollapse = () => {
     setCollapse({ ...collapse, click: !collapse.click });

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

@@ -2,7 +2,7 @@ import { createContext, ReactNode, useEffect, useReducer } from 'react';
 // utils
 import axios from '@/utils/axios';
 // import { isValidToken, setSession } from '@/utils/jwt';
-import { setSession, getSession, getUser } from '@/utils/token';
+import { setSession, getSession, setUser, getUser } from '@/utils/token';
 // @types
 import { ActionMap, AuthState, AuthUser, JWTContextType } from '@/@types/auth';
 // ----------------------------------------------------------------------
@@ -135,6 +135,7 @@ function AuthProvider({ children }: AuthProviderProps) {
         .then((response) => {
           const { user, token } = response.data.data;
           setSession(token);
+          setUser(user);
 
           dispatch({
             type: Types.Login,
@@ -168,6 +169,7 @@ function AuthProvider({ children }: AuthProviderProps) {
 
   const logout = async () => {
     setSession(null);
+    setUser(null);
     dispatch({ type: Types.Logout });
   };
 

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

@@ -19,10 +19,10 @@ const MENU_OPTIONS = [
     label: 'Profile',
     linkTo: '/profile',
   },
-  {
-    label: 'Settings',
-    linkTo: '/',
-  },
+  // {
+  //   label: 'Settings',
+  //   linkTo: '/',
+  // },
 ];
 
 // ----------------------------------------------------------------------

frontend/hospital-portal/src/layouts/dashboard/navbar/NavbarDocs.tsx

@@ -7,23 +7,26 @@ import { DocIllustration } from '@/assets';
 
 export default function NavbarDocs() {
   return (
-    <Stack
-      spacing={3}
-      sx={{ px: 5, pb: 5, mt: 10, width: 1, textAlign: 'center', display: 'block' }}
-    >
-      <DocIllustration sx={{ width: 1 }} />
+    <>
+      <Stack
+        spacing={3}
+        sx={{ px: 5, pb: 5, mt: 10, width: 1, textAlign: 'center', display: 'block' }}
+      >
+        <DocIllustration sx={{ width: 1 }} />
 
-      {/* <div>
-        <Typography gutterBottom variant="subtitle1">
-          Hi, Rayan Moran
-        </Typography>
-        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-          Need help?
-          <br /> Please check our docs
-        </Typography>
-      </div>
+        <div>
+          <Typography gutterBottom variant="subtitle1">
+            Hi, Rayan Moran
+          </Typography>
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            Need help?
+            <br /> Please check our docs
+          </Typography>
+        </div>
 
-      <Button variant="contained">Documentation</Button> */}
-    </Stack>
+        <Button variant="contained">Documentation</Button>
+        <Typography variant='body2'>Hak Cipta © 2023 - 2024 Link Sehat</Typography>
+      </Stack>
+    </>
   );
 }

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

@@ -13,7 +13,6 @@ import { Stack } from '@mui/system';
 import { Input } from '@mui/material';
 //sections
 import TableList from '@/sections/dashboard/TableList';
-import TableList2 from '@/sections/dashboard/TableList2';
 import { fDate } from '@/utils/formatTime';
 import DialogDetailClaim from '@/components/dialogs/DialogDetailClaim';
 
@@ -88,13 +87,13 @@ export default function Dashboard() {
       <Container maxWidth={themeStretch ? false : 'xl'}>
         <Grid container spacing={2}>
           <Grid item xs={12} lg={12} md={12}>
-            <CardSearchMember handleSubmitSuccess={() => {console.log('submit success')}}></CardSearchMember>
+            <CardSearchMember/>
           </Grid>
           {/*<Grid item xs={12} lg={6} md={6}>
             <CardNotification data={itemList} />
           </Grid>*/}
           <Grid item xs={12} lg={12} md={12}>
-            <TableList2 dataLoaded={handleDataLoaded}/>
+            <TableList dataLoaded={handleDataLoaded}/>
           </Grid>
         </Grid>
       </Container>

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

@@ -1,351 +1,41 @@
 /* ---------------------------------- @mui ---------------------------------- */
-import { styled } from '@mui/material/styles';
-import {
-  Paper,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TextField,
-  Button,
-  TableSortLabel,
-  Box,
-  IconButton,
-  Card,
-  Grid,
-  FormControl,
-  InputLabel,
-  Select,
-  MenuItem,
-  SelectChangeEvent,
-  Stack,
-  Typography,
-  LinearProgress,
-  linearProgressClasses,
-} from '@mui/material';
-import { visuallyHidden } from '@mui/utils';
+import { Stack, Button, MenuItem, SelectChangeEvent } from '@mui/material';
 /* ---------------------------------- axios --------------------------------- */
-import axios from '@/utils/axios';
+// import axios from 'axios';
+import axios from '../../utils/axios';
 /* ---------------------------------- react --------------------------------- */
 import { useContext, useEffect, useState } from 'react';
+
 /* -------------------------------- component ------------------------------- */
-import Iconify from '@/components/Iconify';
-import BaseTablePagination from '@/components/BaseTablePagination';
+import Iconify from '../../components/Iconify';
+import TableComponent from '../../components/Table';
 /* ---------------------------------- theme --------------------------------- */
-import palette from '@/theme/palette';
-import { useSearchParams } from 'react-router-dom';
-// import { UserCurrentCorporateContext } from '@/contexts/UserCurrentCorporate';
-import { fSplit } from '@/utils/formatNumber';
-import { Chip } from '@mui/material';
-import { enqueueSnackbar } from 'notistack';
-import DialogDetailClaim from '@/components/dialogs/DialogDetailClaim';
+import palette from '../../theme/palette';
+//import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
+import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
+import { useSearchParams, useNavigate } from 'react-router-dom';
+import { fDate, fDateSuffix } from '../../utils/formatTime';
+import Typography from '@mui/material/Typography';
 import { format } from 'date-fns';
-import TableMoreMenu from '@/components/table/TableMoreMenu';
+import TableMoreMenu from '../../components/table/TableMoreMenu';
+import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
+import HistoryIcon from '@mui/icons-material/History';
+import SearchIcon from '@mui/icons-material/Search';
+import Label from '../../components/Label';
+import { enqueueSnackbar } from 'notistack';
 
-/* ---------------------------------- types --------------------------------- */
-type PaginationTableProps = {
-  current_page: number;
-  from: number;
-  last_page: number;
-  links: [];
-  path: string;
-  per_page: number;
-  to: number;
-  total: number;
-};
+export default function TableList2() {
+  const navigate = useNavigate();
 
-type DataTableProps = {
-  fullName: string;
-  memberId: string;
-  division: string;
-  limit: {
-    current: number;
-    total: number;
-    percentage: number;
-  };
-  status: string;
-};
+  //const { corporateValue } = useContext(UserCurrentCorporateContext);
+  //const { corporateValue } = useContext(null);
 
-type Order = 'asc' | 'desc';
+  const [data, setData] = useState([]);
 
-interface HeadCell {
-  id: string;
-  align: string;
-  label: string;
-  isSort: boolean;
-}
-
-interface EnhancedTableProps {
-  onRequestSort: (event: React.MouseEvent<unknown>, property: string) => void;
-  order: Order;
-  orderBy: string;
-}
-
-type DivisionDataProps = {
-  id: number;
-  name: string;
-};
-/* -------------------------------------------------------------------------- */
-
-/* --------------------------------- styled --------------------------------- */
-const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
-  height: 10,
-  borderRadius: 6,
-  [`&.${linearProgressClasses.colorPrimary}`]: {
-    backgroundColor: '#D1F1F1',
-  },
-  [`& .${linearProgressClasses.bar}`]: {
-    borderRadius: 6,
-    backgroundColor: theme.palette.primary.main,
-  },
-}));
-/* -------------------------------------------------------------------------- */
-
-/* -------------------------- enchanced table head -------------------------- */
-const headCells: readonly HeadCell[] = [
-  {
-    id: 'code',
-    align: 'left',
-    label: 'Request Code',
-    isSort: true,
-    width:'25%',
-  },
-  {
-    id: 'member.name',
-    align: 'left',
-    label: 'Name',
-    isSort: false,
-    width: '33%',
-  },
-  {
-    id: 'submission_date',
-    align: 'left',
-    label: 'Submission Date',
-    isSort: true,
-    width: '25%',
-  },
-  {
-    id: 'status',
-    align: 'left',
-    label: 'Status',
-    isSort: true,
-    width: '10%',
-  },
-  {
-    id: 'action',
-    align: 'left',
-    label: '',
-    isSort: true,
-    width: '7%',
-  },
-];
-
-function EnhancedTableHead({ order, orderBy, onRequestSort }: EnhancedTableProps) {
-  const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
-    onRequestSort(event, property);
-  };
-
-  return (
-    <TableHead>
-      <TableRow>
-        {headCells.map((headCell) => (
-          <TableCell
-            key={headCell.id}
-            sortDirection={orderBy === headCell.id ? order : false}
-            // @ts-ignore
-            align={headCell.align}
-            sx={{ padding: 2, width: headCell.width }}
-          >
-            {headCell.isSort ? (
-              <TableSortLabel
-                active={orderBy === headCell.id}
-                direction={orderBy === headCell.id ? order : 'asc'}
-                onClick={createSortHandler(headCell.id)}
-              >
-                {headCell.label}
-                {orderBy === headCell.id ? (
-                  <Box component="span" sx={visuallyHidden}>
-                    {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
-                  </Box>
-                ) : null}
-              </TableSortLabel>
-            ) : (
-              headCell.label
-            )}
-          </TableCell>
-        ))}
-        <TableCell align="center">{''}</TableCell>
-      </TableRow>
-    </TableHead>
-  );
-}
-/* -------------------------------------------------------------------------- */
-
-// TODO Don't use emit
-export default function TableList(props: any) {
-  const [dataTable, setDataTable] = useState([]);
-  const [paginationTable, setPaginationTable] = useState<PaginationTableProps>({
-    current_page: 0,
-    from: 0,
-    last_page: 0,
-    links: [],
-    path: '',
-    per_page: 0,
-    to: 0,
-    total: 0,
-  });
-
-  const [isLoading, setIsLoading] = useState(true);
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [appliedParams, setAppliedParams] = useState({});
-
-  const [order, setOrder] = useState<Order>('asc');
-  const [orderBy, setOrderBy] = useState('name');
-  const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(10);
-
-  /* ------------------------------- handle sort ------------------------------ */
-  const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
-    const isAsc = orderBy === property && order === 'asc';
-    setOrder(isAsc ? 'desc' : 'asc');
-    setOrderBy(property);
-    const params = Object.fromEntries([
-      ...searchParams.entries(),
-      ['order', isAsc ? 'desc' : 'asc'],
-      ['orderBy', property],
-    ]);
-    setAppliedParams(params);
-  };
-  /* -------------------------------------------------------------------------- */
-
-  /* ----------------------------- status field ----------------------------- */
-  const [filterStatus, setFilterStatus] = useState('All');
-  const [statusOptions, setStatusOptions] = useState(['All', 'Requested', 'Approved', 'Declined']);
-
-  const handleStatusChange = (event: SelectChangeEvent) => {
-    setFilterStatus(event.target.value as string);
-
-    if (event.target.value === 'All') {
-      searchParams.delete('status');
-      const params = Object.fromEntries([...searchParams.entries()]);
-      setAppliedParams(params);
-    } else {
-      const params = Object.fromEntries([
-        ...searchParams.entries(),
-        ['status', event.target.value.toLowerCase() as string],
-      ]);
-      setAppliedParams(params);
-    }
-  };
-  /* -------------------------------------------------------------------------- */
-
-  /* ------------------------------ Search field ------------------------------ */
-  const [searchText, setSearchText] = useState('');
-  const [searchStatus, setSearchStatus] = useState('all');
-
-  const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    setIsLoading(true);
-
-    // Filter by Search Text
-    if (searchText === '') {
-      searchParams.delete('search');
-      const params = Object.fromEntries([...searchParams.entries()]);
-      setAppliedParams(params);
-    } else {
-      const params = Object.fromEntries([...searchParams.entries(), ['search', searchText]]);
-      setAppliedParams(params);
-    }
-
-    await new Promise((resolve) => setTimeout(resolve, 500));
-    setIsLoading(false);
-  };
-  /* -------------------------------------------------------------------------- */
-
-  /* ------------------------ button change pagination ------------------------ */
-  const onPageChangeHandle = async (
-    event: React.MouseEvent<HTMLButtonElement> | null,
-    newPage: number
-  ) => {
-    setIsLoading(true);
-    const params = Object.fromEntries([...searchParams.entries(), ['page', newPage + 1]]);
-    setPage(newPage);
-    await new Promise((resolve) => setTimeout(resolve, 500));
-    setAppliedParams(params);
-    setIsLoading(false);
-  };
-  /* -------------------------------------------------------------------------- */
-
-  /* --------------------------- row page per limit --------------------------- */
-  const onRowsPerPageChangeHandle = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    setIsLoading(true);
-    searchParams.delete('page');
-    const params = Object.fromEntries([
-      ...searchParams.entries(),
-      ['per_page', parseInt(event.target.value, 10)],
-    ]);
-    setRowsPerPage(parseInt(event.target.value, 10));
-    await new Promise((resolve) => setTimeout(resolve, 500));
-    setAppliedParams(params);
-    setIsLoading(false);
-  };
-  /* -------------------------------------------------------------------------- */
-
-  useEffect(() => {
-    (async () => {
-      setIsLoading(true);
-
-      // const division = await axios.get(`${corporateValue}/division`);
-      // setDivisionData(division.data);
-
-      const params =
-        Object.keys(appliedParams).length !== 0
-          ? appliedParams
-          : Object.fromEntries([...searchParams.entries(), ['order', order], ['orderBy', orderBy]]);
-
-      const response = await axios.get(`/claim-requests`, {
-        params: { ...params },
-      });
-
-      setSearchParams(params);
-      setDataTable(response.data.data.data);
-      setPaginationTable(response.data.data);
-      setRowsPerPage(response.data.data.per_page);
-      setIsLoading(false);
-
-      // TODO Remove This
-      props.dataLoaded(response.data.data.data);
-    })();
-  }, [appliedParams, searchParams, order, orderBy, setSearchParams]);
-
-  // ---------------------------------------------------------
-  // Dialog Detail Claim
-  const [openDialogDetailClaim, setOpenDialogDetailClaim] = useState(false);
-  const [loadingClaimDetail, setLoadingClaimDetail] = useState(true);
-  const [currentClaim, setCurrentClaim] = useState(null);
-
-  function handleShowClaim(claimRequest) {
-    setLoadingClaimDetail(true);
-    setOpenDialogDetailClaim(true);
-
-    axios.get(`/claim-requests/${claimRequest.id}`)
-      .then(({data}) => {
-        console.log(data.data);
-        setCurrentClaim(data.data);
-        setLoadingClaimDetail(false);
-      })
-      .catch((err) => {
-        enqueueSnackbar(err.message, {variant: 'error'})
-      })
-  }
-
-  // -----------------------------------------------------------------
   // Download LOG
   async function handleDownloadLog(claimRequest) {
     return axios
-      .get(`claim-requests/${claimRequest.id}/log`, {
+      .get(`claim-requests/${claimRequest}/log`, {
         responseType: 'blob',
       })
       .then((response) => {
@@ -357,245 +47,312 @@ export default function TableList(props: any) {
       //   setLoadingLog(false);
       // })
       .catch((response) => {
+        console.log(response);
         enqueueSnackbar(response.message, { variant: 'error' });
         // setLoadingLog(false);
       });
   }
 
-  return (
-    <Card>
-      <Grid container>
-        {/* Field 1 */}
-        <Grid item xs={12} paddingX="24px" paddingY="20px">
-          <Grid container spacing={2}>
-            <Grid item xs={12} lg={3} xl={2}>
-              {/* <FormControl fullWidth>
-                <InputLabel id="simple-division-select-lable">Division</InputLabel>
-                <Select
-                  labelId="simple-division-select-lable"
-                  id="division-select-lable"
-                  value={divisionValue}
-                  label="Division"
-                  onChange={handleDivisionChange}
-                >
-                  <MenuItem value="all">All</MenuItem>
-                  {divisionData.map((row: DivisionDataProps, index) => (
-                    <MenuItem key={index} value={row.id}>
-                      {row.name}
+  /* -------------------------------------------------------------------------- */
+  /*                          setting up for the table                          */
+  /* -------------------------------------------------------------------------- */
+  const [isLoading, setIsLoading] = useState(true);
+
+  const loadings = {
+    isLoading: isLoading,
+    setIsLoading: setIsLoading,
+  };
+
+  /* ------------------------------ handle params ----------------------------- */
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [appliedParams, setAppliedParams] = useState({});
+
+  const params = {
+    searchParams: searchParams,
+    setSearchParams: setSearchParams,
+    appliedParams: appliedParams,
+    setAppliedParams: setAppliedParams,
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* ------------------------------ handle order ------------------------------ */
+  const [order, setOrder] = useState<Order>('desc');
+  const [orderBy, setOrderBy] = useState('submission_date');
+
+  const orders = {
+    order: order,
+    setOrder: setOrder,
+    orderBy: orderBy,
+    setOrderBy: setOrderBy,
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* ---------------------------- handle pagination --------------------------- */
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+
+  const [paginationTable, setPaginationTable] = useState<PaginationTableProps>({
+    current_page: 0,
+    from: 0,
+    last_page: 0,
+    links: [],
+    path: '',
+    per_page: 0,
+    to: 0,
+    total: 0,
+  });
+
+  const paginations = {
+    page: page,
+    setPage: setPage,
+    rowsPerPage: rowsPerPage,
+    setRowsPerPage: setRowsPerPage,
+    paginationTable: paginationTable,
+    setPaginationTable: setPaginationTable,
+  };
+
+  /* -------------------------------------------------------------------------- */
+
+  /* ------------------------------ handle search ----------------------------- */
+  const [searchText, setSearchText] = useState('');
+
+  const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (searchText === '') {
+      searchParams.delete('search');
+      const params = Object.fromEntries([...searchParams.entries()]);
+      setAppliedParams(params);
+    } else {
+      const params = Object.fromEntries([...searchParams.entries(), ['search', searchText]]);
+      setAppliedParams(params);
+    }
+  };
+
+  const searchs = {
+    useSearchs: true,
+    searchText: searchText,
+    setSearchText: setSearchText,
+    handleSearchSubmit: handleSearchSubmit,
+  };
+
+  /* ------------------------------ handle filter ----------------------------- */
+  const [statusValue, setStatusValue] = useState('all');
+  const [filterData, setStatusData] = useState([]);
+
+  // handle status
+  const handleStatusChanges = (event: SelectChangeEvent) => {
+    setStatusValue(event.target.value as string);
+
+    if (event.target.value === 'all') {
+      searchParams.delete('status');
+      const params = Object.fromEntries([...searchParams.entries()]);
+      setAppliedParams(params);
+    } else {
+      const params = Object.fromEntries([
+        ...searchParams.entries(),
+        ['status', event.target.value as string],
+      ]);
+      setAppliedParams(params);
+    }
+  };
+
+  const filterStatus = {
+    useFilter: true,
+    config: {
+      label: 'Status',
+      statusValue: statusValue,
+      filterData: filterData,
+      handleStatusChange: handleStatusChanges,
+    },
+  };
+
+  // handle start date
+  const [startDateValue, setStartDateValue] = useState('');
+
+  const handleStartDateChanges = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const newStartDateValue = event.currentTarget.elements['date-input'].value;
+    setStartDateValue(newStartDateValue);
+    if (newStartDateValue === '') {
+      searchParams.delete('start_date');
+      const params = Object.fromEntries([...searchParams.entries()]);
+      setAppliedParams(params);
+    } else {
+      const params = Object.fromEntries([...searchParams.entries(), ['start_date', newStartDateValue]]);
+      setAppliedParams(params);
+    }
+  };
+
+  const filterStartDate = {
+    useFilter: true,
+    startDate: startDateValue,
+    setStartDate: setStartDateValue,
+    handleStartDateChange: handleStartDateChanges,
+  };
+
+  // handle end date
+  const [endDateValue, setEndDateValue] = useState('');
+
+  const handleEndDateChanges = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const newEndDateValue = event.currentTarget.elements['date-input'].value;
+    setEndDateValue(newEndDateValue);
+    if (newEndDateValue === '') {
+      searchParams.delete('end_date');
+      const params = Object.fromEntries([...searchParams.entries()]);
+      setAppliedParams(params);
+    } else {
+      const params = Object.fromEntries([...searchParams.entries(), ['end_date', newEndDateValue]]);
+      setAppliedParams(params);
+    }
+  };
+
+  const filterEndDate = {
+    useFilter: true,
+    endDate: endDateValue,
+    setEndDate: setEndDateValue,
+    handleEndDateChange: handleEndDateChanges,
+  };
+
+  /* -------------------------------- headCell -------------------------------- */
+  const headCells: HeadCell<never>[] = [
+    {
+      id: 'submission_date',
+      align: 'center',
+      label: 'Request Date',
+      isSort: true,
+    },
+    {
+      id: 'member_id',
+      align: 'left',
+      label: 'Member ID',
+      isSort: true,
+    },
+    {
+      id: 'code',
+      align: 'left',
+      label: 'Claim Code',
+      isSort: true,
+    },
+    {
+      id: 'full_name',
+      align: 'left',
+      label: 'Name',
+      isSort: true,
+    },
+    {
+      id: 'status',
+      align: 'center',
+      label: 'Status',
+      isSort: true,
+    },
+    {
+      id: 'action',
+      align: 'right',
+      label: '',
+      isSort: false,
+    },
+  ];
+
+  useEffect(() => {
+    (async () => {
+      setIsLoading(true);
+
+      await new Promise((resolve) => setTimeout(resolve, 250));
+
+      const parameters =
+        Object.keys(appliedParams).length !== 0
+          ? appliedParams
+          : Object.fromEntries([...searchParams.entries(), ['order', order], ['orderBy', orderBy]]);
+
+      const response = await axios.get(`/get-claim-requests`, {
+        params: { ...parameters, type: 'claim-request' },
+      });
+
+      setData(
+        response.data.data.map((obj: any) => ({
+          ...obj,
+          status:
+            obj.status === 'requested' ? (
+              <Label color='primary'>
+                Request
+              </Label>
+            ) : obj.status === 'approved' ? (
+              <Label color='success' >
+                Approval
+              </Label>
+            ) : obj.status === 'declined' ? (
+              <Label color='error'>
+                Decline
+              </Label>
+            ) : obj.status === 'reviewed' ? (
+              <Label color='info'>
+                Review
+              </Label>
+            ) : (
+              <Label color='primary'>
+                Pending
+              </Label>
+            ),
+            submission_date:
+              <Label>
+                {obj.submission_date ? fDateSuffix(obj.submission_date) : ''}
+              </Label>
+            ,
+            action:
+                <TableMoreMenu actions={
+                  <>
+                    <MenuItem onClick={() => navigate ('/detail/'+obj.claim_request_id)}>
+                      <Iconify icon="eva:eye-fill" />
+                      View
                     </MenuItem>
-                  ))}
-                </Select>
-              </FormControl> */}
-            </Grid>
-            <Grid item xs={12}>
-              <form onSubmit={handleSearchSubmit}>
-                <Grid container spacing={2}>
-                  <Grid item xs={9}>
-                    <TextField
-                      id="search-input"
-                      label="Search"
-                      variant="outlined"
-                      onChange={(event) => setSearchText(event.target.value)}
-                      value={searchText}
-                      fullWidth
-                    />
-                  </Grid>
-                  <Grid item xs={3}>
-                    <FormControl fullWidth>
-                      <InputLabel id="demo-simple-select-label">Status</InputLabel>
-                      <Select
-                        labelId="demo-simple-select-label"
-                        id="demo-simple-select"
-                        value={filterStatus}
-                        label="Status"
-                        onChange={handleStatusChange}
-                        sx={{ width: '100%' }}
-                      >
-                        {statusOptions &&
-                          statusOptions.map((option, index) => (
-                            <MenuItem
-                              value={option}
-                              sx={{ textTransform: 'capitalize' }}
-                              key={index}
-                            >
-                              {option}
-                            </MenuItem>
-                          ))}
-                      </Select>
-                    </FormControl>
-                  </Grid>
-                </Grid>
-                <input type="submit" style={{ display: 'none' }}></input>
-              </form>
-            </Grid>
-          </Grid>
-        </Grid>
-        {/* End Field 1 */}
-        {/* Field 2 */}
-        <Grid item xs={12}>
-          <TableContainer component={Paper}>
-            <Table aria-label="collapsible table" size="small">
-              <EnhancedTableHead
-                order={order}
-                orderBy={orderBy}
-                onRequestSort={handleRequestSort}
-              />
-              <TableBody>
-                {isLoading ? (
-                  <TableRow>
-                    <TableCell colSpan={6} align="center">
-                      Loading . . .
-                    </TableCell>
-                  </TableRow>
-                ) : dataTable.length >= 1 ? (
-                  dataTable.map((row: DataTableProps, index) => (
-                    <TableRow key={index}>
-                      <TableCell align="left">{row.code}</TableCell>
-                      <TableCell align="left">{row.member?.full_name ?? ''}</TableCell>
-                      <TableCell align="center">
-                        <Typography
-                          sx={{
-                            backgroundColor: (theme) => theme.palette.grey[300],
-                            borderRadius: '4px',
-                            width: '70%',
-                          }}
-                          variant="body2"
-                        >
-                          {row.submission_date ? format(new Date(row.submission_date), "d MMM yyyy") : ''}
-                        </Typography>
-                      </TableCell>
-                      <TableCell align="center">
-                       {row.status === 'requested' ? (
-                        <Typography
-                          variant="body2"
-                          sx={{
-                            width: 'Hug (6px)',
-                            height: 'Hug (22px)',
-                            left: '862px',
-                            top: '17px',
-                            color: '#159C9C',
-                            backgroundColor: '#00AB5529',
-                            padding: '1px, 8px',
-                            borderRadius: '6px',
-                          }}
-                        >
-                          Request
-                        </Typography>
-                        ) : row.status === 'approved' ? (
-                          <Typography
-                            variant="body2"
-                            sx={{
-                              width: 'Hug (6px)',
-                              height: 'Hug (22px)',
-                              left: '862px',
-                              top: '17px',
-                              color: '#229A16',
-                              backgroundColor: '#54D62C29',
-                              padding: '1px, 8px',
-                              borderRadius: '6px',
-                            }}
-                          >
-                            Approval
-                          </Typography>
-                        ) : row.status === 'declined' ? (
-                          <Typography
-                            variant="body2"
-                            sx={{
-                              width: 'Hug (6px)',
-                              height: 'Hug (22px)',
-                              left: '862px',
-                              top: '17px',
-                              color: '#B72136',
-                              backgroundColor: '#FF484229',
-                              padding: '1px, 8px',
-                              borderRadius: '6px',
-                            }}
-                          >
-                            Decline
-                          </Typography>
-                        ) : row.status === 'pending' ? (
-                          <Typography
-                            variant="body2"
-                            sx={{
-                              width: 'Hug (6px)',
-                              height: 'Hug (22px)',
-                              left: '862px',
-                              top: '17px',
-                              color: '#BF6919',
-                              backgroundColor: '#FFC10729',
-                              padding: '1px, 8px',
-                              borderRadius: '6px',
-                            }}
-                          >
-                            Pending
-                          </Typography>
-                        ) : row.status === 'reviewed' ? (
-                          <Typography
-                            variant="body2"
-                            sx={{
-                              width: 'Hug (6px)',
-                              height: 'Hug (22px)',
-                              left: '862px',
-                              top: '17px',
-                              color: '#0C53B7',
-                              backgroundColor: '#1890FF29',
-                              padding: '1px, 8px',
-                              borderRadius: '6px',
-                            }}
-                          >
-                            Review
-                          </Typography>
-                        ) : ''}
-                      </TableCell>
+                    <MenuItem onClick={() => handleDownloadLog(obj.claim_request_id)}>
+                     <Iconify icon="eva:download-fill" />
+                      Download LOG
+                    </MenuItem>
+                  </>
+                 } />
+        }))
+      );
 
-                      <TableCell align="center">
-                        <TableMoreMenu actions={
-                          <>
-                            <MenuItem onClick={() => handleShowClaim(row)}>
-                              <Iconify icon="eva:eye-fill" />
-                              View
-                            </MenuItem>
-                            <MenuItem onClick={() => handleDownloadLog(row)}>
-                              <Iconify icon="eva:download-fill" />
-                              Download LOG
-                            </MenuItem>
-                          </>
-                         } />
-                      </TableCell>
-                    </TableRow>
-                  ))
-                ) : (
-                  <TableRow>
-                    <TableCell colSpan={6} align="center">
-                      No Data Found
-                    </TableCell>
-                  </TableRow>
-                )}
-              </TableBody>
-            </Table>
-          </TableContainer>
+      setPaginationTable(response.data);
+      setRowsPerPage(response.data.per_page);
 
-          {/* Pagination */}
-          <BaseTablePagination
-            count={paginationTable.total}
-            onPageChange={onPageChangeHandle}
-            page={page}
-            rowsPerPage={rowsPerPage}
-            onRowsPerPageChange={onRowsPerPageChangeHandle}
-          />
-        </Grid>
-        {/* End Field 2 */}
-      </Grid>
+      if (searchParams.get('page')) {
+        //@ts-ignore
+        const currentPage = parseInt(searchParams.get('page')) - 1;
 
-      
-      
-      <DialogDetailClaim
-        openDialog={openDialogDetailClaim}
-        setOpenDialog={setOpenDialogDetailClaim}
-        title={{ name: 'Claim Request Detail' }}
-        data={{ claim: currentClaim, isLoading: loadingClaimDetail, handleDownloadLog }}
-      ></DialogDetailClaim>
+        paginationTable.current_page = currentPage;
+        setPage(currentPage);
+      }
 
-    </Card>
+      const status = [
+        {"id": "requested", "name": "Request" },
+        {"id": "reviewed", "name": "Review" },
+        {"id": "approved", "name": "Approval" },
+        {"id": "declined", "name": "Decline" },
+      ]
+      setStatusData(status)
+
+      setIsLoading(false);
+    })();
+  }, [appliedParams, searchParams, order, orderBy, setSearchParams]);
+
+  return (
+    <Stack>
+      <TableComponent
+        headCells={headCells}
+        rows={data}
+        orders={orders}
+        paginations={paginations}
+        loadings={loadings}
+        params={params}
+        searchs={searchs}
+        filterStatus={filterStatus}
+        // filterStartDate={filterStartDate}
+        // filterEndDate={filterEndDate}
+      />
+    </Stack>
   );
 }

frontend/hospital-portal/src/sections/dashboard/TableList2.tsx

@@ -1,284 +0,0 @@
-/* ---------------------------------- @mui ---------------------------------- */
-import { Stack, Button, MenuItem } from '@mui/material';
-/* ---------------------------------- axios --------------------------------- */
-// import axios from 'axios';
-import axios from '../../utils/axios';
-/* ---------------------------------- react --------------------------------- */
-import { useContext, useEffect, useState } from 'react';
-
-/* -------------------------------- component ------------------------------- */
-import Iconify from '../../components/Iconify';
-import TableComponent from '../../components/Table';
-/* ---------------------------------- theme --------------------------------- */
-import palette from '../../theme/palette';
-//import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
-import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
-import { useSearchParams, useNavigate } from 'react-router-dom';
-import { fDate, fDateSuffix } from '../../utils/formatTime';
-import Typography from '@mui/material/Typography';
-import { format } from 'date-fns';
-import TableMoreMenu from '../../components/table/TableMoreMenu';
-import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
-import HistoryIcon from '@mui/icons-material/History';
-import SearchIcon from '@mui/icons-material/Search';
-import Label from '../../components/Label';
-import { enqueueSnackbar } from 'notistack';
-
-export default function TableList2() {
-  const navigate = useNavigate();
-
-  //const { corporateValue } = useContext(UserCurrentCorporateContext);
-  //const { corporateValue } = useContext(null);
-
-  const [data, setData] = useState([]);
-
-  // Download LOG
-  async function handleDownloadLog(claimRequest) {
-    return axios
-      .get(`claim-requests/${claimRequest}/log`, {
-        responseType: 'blob',
-      })
-      .then((response) => {
-        window.open(URL.createObjectURL(response.data));
-        // setLoadingLog(false);
-      })
-      // .then((blobFile) => {
-      //   new File([blobFile], 'asdads.pdf', { type: blobFile.type })
-      //   setLoadingLog(false);
-      // })
-      .catch((response) => {
-        console.log(response);
-        enqueueSnackbar(response.message, { variant: 'error' });
-        // setLoadingLog(false);
-      });
-  }
-
-  /* -------------------------------------------------------------------------- */
-  /*                          setting up for the table                          */
-  /* -------------------------------------------------------------------------- */
-  const [isLoading, setIsLoading] = useState(true);
-
-  const loadings = {
-    isLoading: isLoading,
-    setIsLoading: setIsLoading,
-  };
-
-  /* ------------------------------ handle params ----------------------------- */
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [appliedParams, setAppliedParams] = useState({});
-
-  const params = {
-    searchParams: searchParams,
-    setSearchParams: setSearchParams,
-    appliedParams: appliedParams,
-    setAppliedParams: setAppliedParams,
-  };
-  /* -------------------------------------------------------------------------- */
-
-  /* ------------------------------ handle order ------------------------------ */
-  const [order, setOrder] = useState<Order>('desc');
-  const [orderBy, setOrderBy] = useState('submission_date');
-
-  const orders = {
-    order: order,
-    setOrder: setOrder,
-    orderBy: orderBy,
-    setOrderBy: setOrderBy,
-  };
-  /* -------------------------------------------------------------------------- */
-
-  /* ---------------------------- handle pagination --------------------------- */
-  const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(10);
-
-  const [paginationTable, setPaginationTable] = useState<PaginationTableProps>({
-    current_page: 0,
-    from: 0,
-    last_page: 0,
-    links: [],
-    path: '',
-    per_page: 0,
-    to: 0,
-    total: 0,
-  });
-
-  const paginations = {
-    page: page,
-    setPage: setPage,
-    rowsPerPage: rowsPerPage,
-    setRowsPerPage: setRowsPerPage,
-    paginationTable: paginationTable,
-    setPaginationTable: setPaginationTable,
-  };
-
-  /* -------------------------------------------------------------------------- */
-
-  /* ------------------------------ handle search ----------------------------- */
-  const [searchText, setSearchText] = useState('');
-
-  const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    if (searchText === '') {
-      searchParams.delete('search');
-      const params = Object.fromEntries([...searchParams.entries()]);
-      setAppliedParams(params);
-    } else {
-      const params = Object.fromEntries([...searchParams.entries(), ['search', searchText]]);
-      setAppliedParams(params);
-    }
-  };
-
-  const searchs = {
-    useSearchs: true,
-    searchText: searchText,
-    setSearchText: setSearchText,
-    handleSearchSubmit: handleSearchSubmit,
-  };
-
-  /* -------------------------------- headCell -------------------------------- */
-  const headCells: HeadCell<never>[] = [
-    {
-      id: 'submission_date',
-      align: 'center',
-      label: 'Request Date',
-      isSort: true,
-    },
-    {
-      id: 'member_id',
-      align: 'left',
-      label: 'Member ID',
-      isSort: true,
-    },
-    {
-      id: 'code',
-      align: 'left',
-      label: 'Claim Code',
-      isSort: true,
-    },
-    {
-      id: 'full_name',
-      align: 'left',
-      label: 'Name',
-      isSort: true,
-    },
-    {
-      id: 'status',
-      align: 'center',
-      label: 'Status',
-      isSort: true,
-    },
-    {
-      id: 'action',
-      align: 'right',
-      label: '',
-      isSort: false,
-    },
-  ];
-
-  useEffect(() => {
-    (async () => {
-      setIsLoading(true);
-
-      await new Promise((resolve) => setTimeout(resolve, 250));
-
-      const parameters =
-        Object.keys(appliedParams).length !== 0
-          ? appliedParams
-          : Object.fromEntries([...searchParams.entries(), ['order', order], ['orderBy', orderBy]]);
-
-      const response = await axios.get(`/get-claim-requests`, {
-        params: { ...parameters, type: 'claim-report' },
-      });
-
-      setData(
-        response.data.data.map((obj: any) => ({
-          ...obj,
-          status:
-            obj.status === 'requested' ? (
-              <Label color='primary'>
-                Request
-              </Label>
-            ) : obj.status === 'approved' ? (
-              <Label color='success' >
-                Approval
-              </Label>
-            ) : obj.status === 'declined' ? (
-              <Label color='error'>
-                Decline
-              </Label>
-            ) : obj.status === 'pending' ? (
-              <Label color='primary'>
-                Pending
-              </Label>
-            ) : obj.status === 'reviewed' ? (
-              <Label color='info'>
-                Review
-              </Label>
-            ) : (
-              <Button
-                startIcon={<Iconify icon="fa6-solid:clock" />}
-                sx={{
-                  backgroundColor: '#CD7B2E',
-                  color: '#FFFF',
-                  padding: '1px, 8px',
-                  paddingY: 1,
-                  '&:hover': {
-                    backgroundColor: '#BF6919',
-                    color: '#FFFF',
-                  },
-                }}
-              >
-                Ongoing
-              </Button>
-            ),
-            submission_date:
-              <Label>
-                {obj.submission_date ? fDateSuffix(obj.submission_date) : ''}
-              </Label>
-            ,
-            action:
-                <TableMoreMenu actions={
-                  <>
-                    <MenuItem onClick={() => navigate ('/detail/'+obj.claim_request_id)}>
-                      <Iconify icon="eva:eye-fill" />
-                      View
-                    </MenuItem>
-                    <MenuItem onClick={() => handleDownloadLog(obj.claim_request_id)}>
-                     <Iconify icon="eva:download-fill" />
-                      Download LOG
-                    </MenuItem>
-                  </>
-                 } />
-        }))
-      );
-
-      setPaginationTable(response.data);
-      setRowsPerPage(response.data.per_page);
-
-      if (searchParams.get('page')) {
-        //@ts-ignore
-        const currentPage = parseInt(searchParams.get('page')) - 1;
-
-        paginationTable.current_page = currentPage;
-        setPage(currentPage);
-      }
-
-      setIsLoading(false);
-    })();
-  }, [appliedParams, searchParams, order, orderBy, setSearchParams]);
-
-  return (
-    <Stack>
-      <TableComponent
-        headCells={headCells}
-        rows={data}
-        orders={orders}
-        paginations={paginations}
-        loadings={loadings}
-        params={params}
-        searchs={searchs}
-      />
-    </Stack>
-  );
-}