diff --git a/frontend/client-portal/src/@types/claim.ts b/frontend/client-portal/src/@types/claim.ts
new file mode 100644
index 00000000..2e4324f2
--- /dev/null
+++ b/frontend/client-portal/src/@types/claim.ts
@@ -0,0 +1,5 @@
+export type ClaimStatusType = {
+  name: string;
+  value: number;
+  color: string;
+};
diff --git a/frontend/client-portal/src/pages/ClaimReport/Index.tsx b/frontend/client-portal/src/pages/ClaimReport/Index.tsx
index d4976342..4d92b827 100755
--- a/frontend/client-portal/src/pages/ClaimReport/Index.tsx
+++ b/frontend/client-portal/src/pages/ClaimReport/Index.tsx
@@ -1,43 +1,167 @@
-// @mui
-import { Card, Container, Grid, TableBody, TableCell, TableRow } from '@mui/material';
-// components
+/* ---------------------------------- react --------------------------------- */
+import { useContext, useEffect, useState } from 'react';
+/* ----------------------------------- mui ---------------------------------- */
+import { Container, Grid } from '@mui/material';
+/* ------------------------------- components ------------------------------- */
 import Page from '../../components/Page';
-// utils
+import TableList from '../../components/Table';
+/* ---------------------------------- hooks --------------------------------- */
 import useSettings from '../../hooks/useSettings';
-// theme
-import palette from '../../theme/palette';
-// section
+/* -------------------------------- sections -------------------------------- */
 import CardClaimStatus from '../../sections/claim-report/CardClaimStatus';
-
-// ----------------------------------------------------------------------
-
-const listClaimItems = [
-  { 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 },
-];
-
-const testingData = [
-  { label: 'Member ID', value: 'member_id' },
-  { label: 'Name', value: 'name' },
-  { label: 'Divisi', value: 'division_id' },
-];
-
-// ----------------------------------------------------------------------
+/* ---------------------------------- utils --------------------------------- */
+import axios from '../../utils/axios';
+/* --------------------------------- context -------------------------------- */
+import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
+/* --------------------------------- orders --------------------------------- */
+import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
+import { useSearchParams } from 'react-router-dom';
 
 export default function Drugs() {
   const { themeStretch } = useSettings();
+  const { corporateValue } = useContext(UserCurrentCorporateContext);
+
+  const [listClaimStatusItems, setListClaimStatusItems] = useState([]);
+  const [listAllMemberByClaimStatus, setListAllMemberByClaimStatus] = useState([]);
+
+  /* -------------------------------------------------------------------------- */
+  /*                                  setTable                                  */
+  /* -------------------------------------------------------------------------- */
+
+  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>('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,
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* -------------------------------- headCell -------------------------------- */
+  const headCells: HeadCell<never>[] = [
+    {
+      id: 'memberId',
+      align: 'left',
+      label: 'Member ID',
+      isSort: true,
+    },
+    {
+      id: 'fullName',
+      align: 'center',
+      label: 'Name',
+      isSort: true,
+    },
+    {
+      id: 'division',
+      align: 'center',
+      label: 'Divisi',
+      isSort: true,
+    },
+    {
+      id: 'submissionDate',
+      align: 'center',
+      label: 'Submission Date',
+      isSort: true,
+    },
+    {
+      id: 'status',
+      align: 'center',
+      label: 'Status',
+      isSort: true,
+    },
+  ];
+  /* -------------------------------------------------------------------------- */
+
+  useEffect(() => {
+    (async () => {
+      setIsLoading(true);
+
+      const parameters =
+        Object.keys(appliedParams).length !== 0
+          ? appliedParams
+          : Object.fromEntries([
+              ...searchParams.entries(),
+              ['order', orders.order],
+              ['orderBy', orders.orderBy],
+            ]);
+
+      const claim = await axios.get(`${corporateValue}/claim`, {
+        params: { ...parameters, claimMember: true },
+      });
+
+      setSearchParams(parameters);
+
+      setListClaimStatusItems(claim.data.data.allClaimStatus);
+      setListAllMemberByClaimStatus(claim.data.data.allMembersByClaimStatus.data);
+      setPaginationTable(claim.data.data.allMembersByClaimStatus);
+
+      setIsLoading(false);
+    })();
+  }, [appliedParams, searchParams, order, orderBy, setSearchParams, corporateValue]);
 
   return (
     <Page title="Claim Reports">
       <Container maxWidth={themeStretch ? false : 'xl'}>
         <Grid container spacing={2}>
           <Grid item xs={12} lg={12} md={12}>
-            <CardClaimStatus data={listClaimItems} />
+            <CardClaimStatus data={listClaimStatusItems} />
           </Grid>
           <Grid item xs={12} lg={12} md={12}>
-            <Card></Card>
+            <TableList
+              headCells={headCells}
+              rows={listAllMemberByClaimStatus}
+              orders={orders}
+              paginations={paginations}
+              loadings={loadings}
+              params={params}
+            />
           </Grid>
         </Grid>
       </Container>