commit

Modules/Client/Http/Controllers/Api/ClaimReportController.php

@@ -2,8 +2,10 @@
 
 namespace Modules\Client\Http\Controllers\Api;
 
+use App\Helpers\Helper;
 use Illuminate\Http\Request;
 use App\Http\Controllers\Controller;
+use App\Models\ClaimRequest;
 
 class ClaimReportController extends Controller
 {
@@ -12,52 +14,39 @@ class ClaimReportController extends Controller
      *
      * @return \Illuminate\Http\Response
      */
-    public function index()
+    public function claimStatus($corporateId)
     {
-    }
+        $requesteds = ClaimRequest::query()
+            ->whereHas('member', function ($query) use ($corporateId) {
+                $query->whereHas('employeds', function ($corporateEmployee) use ($corporateId) {
+                    $corporateEmployee->where('corporate_id', $corporateId);
+                });
+            })
+            ->where('status', 'requested')
+            ->get();
+        $approveds = ClaimRequest::query()
+            ->whereHas('member', function ($query) use ($corporateId) {
+                $query->whereHas('employeds', function ($corporateEmployee) use ($corporateId) {
+                    $corporateEmployee->where('corporate_id', $corporateId);
+                });
+            })
+            ->where('status', 'approved')
+            ->get();
 
-    /**
+        $rejecteds = ClaimRequest::query()
-     * Store a newly created resource in storage.
+            ->whereHas('member', function ($query) use ($corporateId) {
-     *
+                $query->whereHas('employeds', function ($corporateEmployee) use ($corporateId) {
-     * @param  \Illuminate\Http\Request  $request
+                    $corporateEmployee->where('corporate_id', $corporateId);
-     * @return \Illuminate\Http\Response
+                });
-     */
+            })
-    public function store(Request $request)
+            ->whereHas('claim', fn ($query) => $query->where('status', 'declined'))
-    {
+            ->where('status', 'approved')
-        //
+            ->get();
-    }
 
-    /**
+        return Helper::responseJson([
-     * Display the specified resource.
+            'requesteds' => count($requesteds),
-     *
+            'approveds' => count($approveds),
-     * @param  int  $id
+            'rejecteds' => count($rejecteds)
-     * @return \Illuminate\Http\Response
+        ]);
-     */
-    public function show($id)
-    {
-        //
-    }
-
-    /**
-     * Update the specified resource in storage.
-     *
-     * @param  \Illuminate\Http\Request  $request
-     * @param  int  $id
-     * @return \Illuminate\Http\Response
-     */
-    public function update(Request $request, $id)
-    {
-        //
-    }
-
-    /**
-     * Remove the specified resource from storage.
-     *
-     * @param  int  $id
-     * @return \Illuminate\Http\Response
-     */
-    public function destroy($id)
-    {
-        //
     }
 }

Modules/Client/Routes/api.php

@@ -10,10 +10,9 @@ use Modules\Client\Http\Controllers\Api\UserController;
 use Modules\Client\Http\Controllers\Api\ClaimController;
 use Modules\Client\Http\Controllers\Api\TopUpController;
 use Modules\Internal\Http\Controllers\ClaimEncounterController;
-use App\Models\Encounter;
+use Modules\Client\Http\Controllers\Api\ClaimReportController;
 use Modules\Client\Http\Controllers\Api\ClaimRequestController;
 use Modules\Client\Http\Controllers\Api\DataController;
-use Modules\Internal\Transformers\EncounterResource;
 
 /*
 |--------------------------------------------------------------------------
@@ -54,6 +53,7 @@ Route::prefix('client')->group(function () {
             Route::get('topup', [TopUpController::class, 'index']);
             // Route::get('topup', [TopUpController::class, 'get']);
             Route::post('topup', [TopUpController::class, 'store']);
+            Route::get('claim-report/claim-status', [ClaimReportController::class, 'claimStatus']);
         });
         Route::get('claims/{id}', [ClaimController::class, 'show']);
 

app/Services/CorporateMemberService.php

@@ -48,6 +48,7 @@ class CorporateMemberService
         $limit = $request->has('perPage') ? $request->input('perPage') : 10;
 
         return Member::query()
+            ->joinClaimRequests('right')
             ->joinCorporateEmployees('left')
             ->joinCorporateDivisions('left')
             ->with('currentPlan')
@@ -61,6 +62,11 @@ class CorporateMemberService
                         ->orWhere('members.name', 'like', "%" . $search . "%");
                 });
             })
+            ->when($request->input('division'), function (Builder $division, $value) {
+                $division->whereHas('division', function (Builder $corporateEmployee) use ($value) {
+                    $corporateEmployee->where('division_id', $value);
+                });
+            })
             ->when($request->has('orderBy'), function (Builder $query) use ($request) {
                 $orderBy = match ($request->orderBy) {
                     'memberId' => 'member_id',
@@ -74,7 +80,7 @@ class CorporateMemberService
                     $query->getQuery()->orderBy('corporate_divisions.name', $request->order);
                 }
             })
-            ->select(['members.id', 'members.person_id', 'members.member_id', 'members.name', 'corporate_divisions.name AS division_name', 'members.active'])
+            ->select(['members.id', 'members.person_id', 'members.member_id', 'members.name', 'corporate_divisions.name AS division_name', 'members.active', 'claim_requests.id', 'claim_requests.member_id', 'claim_requests.submission_date'])
             ->paginate($limit);
     }
 

frontend/client-portal/.env.development

@@ -2,6 +2,6 @@ GENERATE_SOURCEMAP=false
 
 PORT=8083
 
-REACT_APP_HOST_API_URL="http://localhost:8000"
+REACT_APP_HOST_API_URL="http://aso.test"
 
-VITE_API_URL="http://localhost:8000/api/client"
+VITE_API_URL="http://aso.test/api/client"

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

@@ -20,12 +20,20 @@ import List from './List';
 import ClaimItems from '../Claims/components/ClaimItems';
 import DiagnosisHistory from '../Claims/components/DiagnosisHistory';
 import Documents from '../Claims/components/Documents';
+// theme
+import palette from '../../theme/palette';
+
+interface ClaimStatusType {
+  name: string;
+  value: number;
+  color: string;
+}
 
 export default function Drugs() {
   const { themeStretch } = useSettings();
   const { corporateValue } = useContext(UserCurrentCorporateContext);
 
-  const [listClaimStatusItems, setListClaimStatusItems] = useState([]);
+  const [listClaimStatusItems, setListClaimStatusItems] = useState<ClaimStatusType[]>([]);
   const [listAllMemberByClaimStatus, setListAllMemberByClaimStatus] = useState([]);
 
   /* -------------------------------------------------------------------------- */
@@ -127,6 +135,26 @@ export default function Drugs() {
     (async () => {
       setIsLoading(true);
 
+      const claimStatus = await axios.get(`${corporateValue}/claim-report/claim-status`);
+
+      setListClaimStatusItems([
+        {
+          name: 'Requested',
+          value: claimStatus.data.data.requesteds,
+          color: palette.dark.primary.dark,
+        },
+        {
+          name: 'Approval',
+          value: claimStatus.data.data.approveds,
+          color: palette.dark.warning.dark,
+        },
+        {
+          name: 'Rejected',
+          value: claimStatus.data.data.rejecteds,
+          color: palette.dark.error.dark,
+        },
+      ]);
+
       const parameters =
         Object.keys(appliedParams).length !== 0
           ? appliedParams
@@ -142,7 +170,6 @@ export default function Drugs() {
 
       setSearchParams(parameters);
 
-      setListClaimStatusItems(claim.data.data.allClaimStatus);
       setListAllMemberByClaimStatus(claim.data.data.allMembersByClaimStatus.data);
       setPaginationTable(claim.data.data.allMembersByClaimStatus);
 
@@ -158,7 +185,7 @@ export default function Drugs() {
             <CardClaimStatus data={listClaimStatusItems} />
           </Grid>
           <Grid item xs={12} lg={12} md={12}>
-            <List/>
+            <List />
 
             {/* <TableList
               headCells={headCells}

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

@@ -1,289 +1,286 @@
 /* ---------------------------------- @mui ---------------------------------- */
 import {
-    Paper,
+  Paper,
-    Table,
+  Table,
-    TableBody,
+  TableBody,
-    TableCell,
+  TableCell,
-    TableContainer,
+  TableContainer,
-    TableHead,
+  TableHead,
-    TableRow,
+  TableRow,
-    TextField,
+  TextField,
-    Stack,
+  Stack,
-    IconButton,
+  IconButton,
-    Button,
+  Button,
-    TableSortLabel,
+  TableSortLabel,
-    Box,
+  Box,
-  } from '@mui/material';
+} from '@mui/material';
-  import DialogDetailClaim from '../../sections/dashboard/DialogDetailClaim';
+import DialogDetailClaim from '../../sections/dashboard/DialogDetailClaim';
-  import { visuallyHidden } from '@mui/utils';
+import { visuallyHidden } from '@mui/utils';
-  import { MoreVert as MoreVertIcon } from '@mui/icons-material';
+import { MoreVert as MoreVertIcon } from '@mui/icons-material';
-  /* ---------------------------------- axios --------------------------------- */
+/* ---------------------------------- axios --------------------------------- */
-  // import axios from 'axios';
+// import axios from 'axios';
-  import axios from '../../utils/axios';
+import axios from '../../utils/axios';
-  /* ---------------------------------- react --------------------------------- */
+/* ---------------------------------- react --------------------------------- */
-  import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 
-  /* -------------------------------- component ------------------------------- */
+/* -------------------------------- component ------------------------------- */
-  import Iconify from '../../components/Iconify';
+import Iconify from '../../components/Iconify';
-  import BaseTablePagination from '../../components/BaseTablePagination';
+import BaseTablePagination from '../../components/BaseTablePagination';
-  import TableComponent from '../../components/Table';
+import TableComponent from '../../components/Table';
-  import { Navigate } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
 
-  /* ---------------------------------- hooks --------------------------------- */
+/* ---------------------------------- hooks --------------------------------- */
-  import useMap from '../../hooks/useMap';
+import useMap from '../../hooks/useMap';
-  /* ---------------------------------- theme --------------------------------- */
+/* ---------------------------------- theme --------------------------------- */
-  import palette from '../../theme/palette';
+import palette from '../../theme/palette';
-  import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
+import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
-  import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
+import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
-  import { useSearchParams, useNavigate } from 'react-router-dom';
+import { useSearchParams, useNavigate } from 'react-router-dom';
 
+/* ---------------------------------- types --------------------------------- */
 
-  /* ---------------------------------- types --------------------------------- */
+// type PaginationTableProps = {
+//   current_page: number;
+//   from: number;
+//   last_page: number;
+//   links: [];
+//   path: string;
+//   per_page: number;
+//   to: number;
+//   total: number;
+// };
 
-  // type PaginationTableProps = {
+// type DataTableProps = {
-  //   current_page: number;
+//   fullName: string;
-  //   from: number;
+//   memberId: string;
-  //   last_page: number;
+//   service: string;
-  //   links: [];
+//   start_date: string;
-  //   path: string;
+//   end_date: string;
-  //   per_page: number;
+//   status: boolean | number;
-  //   to: number;
+// };
-  //   total: number;
-  // };
 
-  // type DataTableProps = {
+// /* -------------------------------------------------------------------------- */
-  //   fullName: string;
-  //   memberId: string;
-  //   service: string;
-  //   start_date: string;
-  //   end_date: string;
-  //   status: boolean | number;
-  // };
 
-  // /* -------------------------------------------------------------------------- */
+// /* -------------------------- enchanced table head -------------------------- */
 
-  // /* -------------------------- enchanced table head -------------------------- */
+// type Order = 'asc' | 'desc';
 
-  // type Order = 'asc' | 'desc';
+// interface HeadCell {
+//   id: string;
+//   label: string;
+// }
 
-  // interface HeadCell {
+// const headCells: readonly HeadCell[] = [
-  //   id: string;
+//   {
-  //   label: string;
+//     id: 'name',
-  // }
+//     label: 'Name',
+//   },
+//   {
+//     id: 'member_id',
+//     label: 'Member ID',
+//   },
+//   {
+//     id: 'service',
+//     label: 'Service',
+//   },
+//   {
+//     id: 'start_date',
+//     label: 'Start Date',
+//   },
+//   {
+//     id: 'end_date',
+//     label: 'End Date',
+//   },
+//   {
+//     id: 'status',
+//     label: 'Status',
+//   },
+// ];
 
-  // const headCells: readonly HeadCell[] = [
+// interface EnhancedTableProps {
-  //   {
+//   onRequestSort: (event: React.MouseEvent<unknown>, property: string) => void;
-  //     id: 'name',
+//   order: Order;
-  //     label: 'Name',
+//   orderBy: string;
-  //   },
+// }
-  //   {
-  //     id: 'member_id',
-  //     label: 'Member ID',
-  //   },
-  //   {
-  //     id: 'service',
-  //     label: 'Service',
-  //   },
-  //   {
-  //     id: 'start_date',
-  //     label: 'Start Date',
-  //   },
-  //   {
-  //     id: 'end_date',
-  //     label: 'End Date',
-  //   },
-  //   {
-  //     id: 'status',
-  //     label: 'Status',
-  //   },
-  // ];
 
-  // interface EnhancedTableProps {
+// function EnhancedTableHead(props: EnhancedTableProps) {
-  //   onRequestSort: (event: React.MouseEvent<unknown>, property: string) => void;
+//   const { order, orderBy, onRequestSort } = props;
-  //   order: Order;
+//   const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
-  //   orderBy: string;
+//     onRequestSort(event, property);
-  // }
+//   };
 
-  // function EnhancedTableHead(props: EnhancedTableProps) {
+//   return (
-  //   const { order, orderBy, onRequestSort } = props;
+//     <TableHead>
-  //   const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
+//       <TableRow>
-  //     onRequestSort(event, property);
+//         <TableCell align="center">No</TableCell>
-  //   };
+//         {headCells.map((headCell) => (
+//           <TableCell
+//             key={headCell.id}
+//             sortDirection={orderBy === headCell.id ? order : false}
+//             align="center"
+//           >
+//             <TableSortLabel
+//               active={orderBy === headCell.id}
+//               direction={orderBy === headCell.id ? order : 'asc'}
+//               onClick={createSortHandler(headCell.id)}
+//             >
+//               {headCell.label}
+//               {orderBy === headCell.id ? (
+//                 <Box component="span" sx={visuallyHidden}>
+//                   {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+//                 </Box>
+//               ) : null}
+//             </TableSortLabel>
+//           </TableCell>
+//         ))}
+//       </TableRow>
+//     </TableHead>
+//   );
+// }
 
-  //   return (
+/* -------------------------------------------------------------------------- */
-  //     <TableHead>
+
-  //       <TableRow>
+export default function List() {
-  //         <TableCell align="center">No</TableCell>
+  const navigate = useNavigate();
-  //         {headCells.map((headCell) => (
+
-  //           <TableCell
+  const { corporateValue } = useContext(UserCurrentCorporateContext);
-  //             key={headCell.id}
+
-  //             sortDirection={orderBy === headCell.id ? order : false}
+  const [data, setData] = useState([]);
-  //             align="center"
+
-  //           >
+  /* -------------------------------------------------------------------------- */
-  //             <TableSortLabel
+  /*                          setting up for the table                          */
-  //               active={orderBy === headCell.id}
+  /* -------------------------------------------------------------------------- */
-  //               direction={orderBy === headCell.id ? order : 'asc'}
+  const [isLoading, setIsLoading] = useState(true);
-  //               onClick={createSortHandler(headCell.id)}
+
-  //             >
+  const loadings = {
-  //               {headCell.label}
+    isLoading: isLoading,
-  //               {orderBy === headCell.id ? (
+    setIsLoading: setIsLoading,
-  //                 <Box component="span" sx={visuallyHidden}>
+  };
-  //                   {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+
-  //                 </Box>
+  /* ------------------------------ handle params ----------------------------- */
-  //               ) : null}
+  const [searchParams, setSearchParams] = useSearchParams();
-  //             </TableSortLabel>
+  const [appliedParams, setAppliedParams] = useState({});
-  //           </TableCell>
+
-  //         ))}
+  const params = {
-  //       </TableRow>
+    searchParams: searchParams,
-  //     </TableHead>
+    setSearchParams: setSearchParams,
-  //   );
+    appliedParams: appliedParams,
-  // }
+    setAppliedParams: setAppliedParams,
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* ------------------------------ handle order ------------------------------ */
+  const [order, setOrder] = useState<Order>('asc');
+  const [orderBy, setOrderBy] = useState('fullName');
+
+  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,
+  };
 
   /* -------------------------------------------------------------------------- */
 
-  export default function List() {
+  /* ------------------------------ handle search ----------------------------- */
-    const navigate = useNavigate();
+  const [searchText, setSearchText] = useState('');
 
-    const { corporateValue } = useContext(UserCurrentCorporateContext);
+  const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
 
-    const [data, setData] = useState([]);
+    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 = {
-    /*                          setting up for the table                          */
+    searchText: searchText,
-    /* -------------------------------------------------------------------------- */
+    setSearchText: setSearchText,
-    const [isLoading, setIsLoading] = useState(true);
+    handleSearchSubmit: handleSearchSubmit,
+  };
 
-    const loadings = {
+  /* -------------------------------- headCell -------------------------------- */
-      isLoading: isLoading,
+  const headCells: HeadCell<never>[] = [
-      setIsLoading: setIsLoading,
+    {
-    };
+      id: 'memberId',
+      align: 'left',
+      label: 'Member ID',
+      isSort: true,
+    },
+    {
+      id: 'fullName',
+      align: 'left',
+      label: 'Name',
+      isSort: true,
+    },
 
-    /* ------------------------------ handle params ----------------------------- */
+    {
-    const [searchParams, setSearchParams] = useSearchParams();
+      id: 'division',
-    const [appliedParams, setAppliedParams] = useState({});
+      align: 'left',
-  
+      label: 'Divisi',
-    const params = {
+      isSort: true,
-      searchParams: searchParams,
+    },
-      setSearchParams: setSearchParams,
+    /* {
-      appliedParams: appliedParams,
-      setAppliedParams: setAppliedParams,
-    };
-    /* -------------------------------------------------------------------------- */
-  
-    /* ------------------------------ handle order ------------------------------ */
-    const [order, setOrder] = useState<Order>('asc');
-    const [orderBy, setOrderBy] = useState('fullName');
-  
-    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 = {
-      searchText: searchText,
-      setSearchText: setSearchText,
-      handleSearchSubmit: handleSearchSubmit,
-    };
-  
-    /* -------------------------------- headCell -------------------------------- */
-    const headCells: HeadCell<never>[] = [
-      {
-        id: 'memberId',
-        align: 'left',
-        label: 'Member ID',
-        isSort: true,
-      },
-      {
-        id: 'fullName',
-        align: 'left',
-        label: 'Name',
-        isSort: true,
-      },
-      
-      {
-        id: 'division',
-        align: 'left',
-        label: 'Divisi',
-        isSort: true,
-      },
-      /* {
         id: 'end_date',
         align: 'center',
         label: 'End Date',
         isSort: false,
       }, */
-      {
+    {
-        id: 'status',
+      id: 'status',
-        align: 'center',
+      align: 'center',
-        label: 'Status',
+      label: 'Status',
-        isSort: true,
+      isSort: true,
-      },
+    },
-      {
+    {
-        id: 'action',
+      id: 'action',
-        align: 'right',
+      align: 'right',
-        label: '',
+      label: '',
-        isSort: false,
+      isSort: false,
-      },
+    },
+  ];
 
-    ];
+  const [open, setOpen] = useState<HTMLElement | null>(null);
 
-    const [open, setOpen] = useState<HTMLElement | null>(null);
+  const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
-
-    const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
     setOpen(event.currentTarget);
-    };
+  };
 
-    const handleClose = () => {
+  const handleClose = () => {
     setOpen(null);
-    };
+  };
 
-    /* const clickHandler = (isDialog: string) => {
+  /* const clickHandler = (isDialog: string) => {
         switch (isDialog) {
 
           case 'infoDetail':
@@ -296,109 +293,98 @@ import {
             break;
         }
       }; */
-    /* -------------------------------------------------------------------------- */
+  /* -------------------------------------------------------------------------- */
 
+  useEffect(() => {
+    (async () => {
+      setIsLoading(true);
 
+      await new Promise((resolve) => setTimeout(resolve, 250));
 
-    useEffect(() => {
+      const parameters =
-      (async () => {
+        Object.keys(appliedParams).length !== 0
-        setIsLoading(true);
+          ? appliedParams
+          : Object.fromEntries([...searchParams.entries(), ['order', order], ['orderBy', orderBy]]);
 
-        await new Promise((resolve) => setTimeout(resolve, 250));
+      const response = await axios.get(`${corporateValue}/members`, {
+        params: { ...parameters, type: 'claim-report' },
+      });
 
-        const parameters =
+      setData(
-          Object.keys(appliedParams).length !== 0
+        response.data.data.map((obj: any) => ({
-            ? appliedParams
+          ...obj,
-            : Object.fromEntries([...searchParams.entries(), ['order', order], ['orderBy', orderBy]]);
 
-        const response = await axios.get(`${corporateValue}/members`, {
+          /* memberId: <Button onClick={() => navigate ('user-profile/:id')}>{obj.memberId}</Button>, */
-          params: { ...parameters },
+          status:
-        });
+            obj.status === 1 ? (
-  
+              <Button
-        setData(
+                onClick={() => navigate('dialog-detail')}
-          response.data.data.map((obj: any) => {
+                /*  startIcon={<Iconify icon="ic:round-check" />} */
-
+                sx={{
-
+                  backgroundColor: 'rgba(84, 214, 44, 0.16)',
-            return {
+                  color: palette.dark.success.dark,
-              ...obj,
+                  paddingX: 1.5,
-              
+                  paddingY: 1,
-              /* memberId: <Button onClick={() => navigate ('user-profile/:id')}>{obj.memberId}</Button>, */
+                  '&:hover': {
-              status:
+                    backgroundColor: 'rgba(84, 214, 44, 0.16)',
-                obj.status === 1 ? (
+                    color: palette.dark.success.dark,
-                    
+                  },
-                  <Button onClick={() => navigate('dialog-detail')}
+                }}
-                   /*  startIcon={<Iconify icon="ic:round-check" />} */
+              >
-                    sx={{
+                Request
-                      backgroundColor: 'rgba(84, 214, 44, 0.16)',
+              </Button>
-                      color: palette.dark.success.dark,
+            ) : (
-                      paddingX: 1.5,
+              <Button
-                      paddingY: 1,
+                startIcon={<Iconify icon="fa6-solid:clock" />}
-                      '&:hover': {
+                sx={{
-                        backgroundColor: 'rgba(84, 214, 44, 0.16)',
+                  backgroundColor: '#CD7B2E',
-                        color: palette.dark.success.dark,
+                  color: '#FFFF',
-                      },
+                  paddingX: 1.5,
-                    }}
+                  paddingY: 1,
-                  >
+                  '&:hover': {
-                    Request
+                    backgroundColor: '#BF6919',
-                  </Button>
+                    color: '#FFFF',
-                  
+                  },
-                ) : (
+                }}
-                  <Button
+              >
-                    startIcon={<Iconify icon="fa6-solid:clock" />}
+                Ongoing
-                    sx={{
+              </Button>
-                      backgroundColor: '#CD7B2E',
+            ),
-                      color: '#FFFF',
+          /*  action: (
-                      paddingX: 1.5,
-                      paddingY: 1,
-                      '&:hover': {
-                        backgroundColor: '#BF6919',
-                        color: '#FFFF',
-                      },
-                    }}
-                  >
-                    Ongoing
-                  </Button>
-                ),
-               /*  action: (
                     <IconButton onClick={() => clickHandler('infoDetail')}>
                       <MoreVertIcon />
                     </IconButton>
                   ), */
+        }))
+      );
 
-            };
+      setPaginationTable(response.data);
-          })
+      setRowsPerPage(response.data.per_page);
-        );
 
-        setPaginationTable(response.data);
+      if (searchParams.get('page')) {
-        setRowsPerPage(response.data.per_page);
+        //@ts-ignore
+        const currentPage = parseInt(searchParams.get('page')) - 1;
 
-        if (searchParams.get('page')) {
+        paginationTable.current_page = currentPage;
-          //@ts-ignore
+        setPage(currentPage);
-          const currentPage = parseInt(searchParams.get('page')) - 1;
+      }
 
-          paginationTable.current_page = currentPage;
+      setIsLoading(false);
-          setPage(currentPage);
+    })();
-        }
+  }, [appliedParams, searchParams, order, orderBy, setSearchParams, corporateValue]);
-  
-        setIsLoading(false);
-      })();
-    }, [appliedParams, searchParams, order, orderBy, setSearchParams, corporateValue]);
-  
-    return (
-      <Stack>
-        <TableComponent
-          headCells={headCells}
-          rows={data}
-          orders={orders}
-          paginations={paginations}
-          loadings={loadings}
-          params={params}
-          searchs={searchs}
-          // filters={filters}
-        />
-      </Stack>
-
-      
-    );
-  }
 
+  return (
+    <Stack>
+      <TableComponent
+        headCells={headCells}
+        rows={data}
+        orders={orders}
+        paginations={paginations}
+        loadings={loadings}
+        params={params}
+        searchs={searchs}
+        // filters={filters}
+      />
+    </Stack>
+  );
+}

frontend/client-portal/src/sections/claim-report/CardClaimStatus.tsx

@@ -45,7 +45,7 @@ export default function CardClaimStatus({ data }: PropsCardClaimStatus) {
       <Grid container spacing={2}>
         {data
           ? data.map(({ name, value, color }: ClaimStatusType, key) => (
-              <Grid item key={key} xs={6} sm={3}>
+              <Grid item key={key} xs={6} sm={4}>
                 <Card
                   sx={{
                     paddingX: 1,
@@ -71,7 +71,7 @@ export default function CardClaimStatus({ data }: PropsCardClaimStatus) {
               </Grid>
             ))
           : defaultData.map(({ name, value, color }: ClaimStatusType, key) => (
-              <Grid item key={key} xs={6} sm={3}>
+              <Grid item key={key} xs={6} sm={4}>
                 <Card
                   sx={{
                     paddingX: 1,