commit

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,8 +185,8 @@ export default function Drugs() {
             <CardClaimStatus data={listClaimStatusItems} />
           </Grid>
           <Grid item xs={12} lg={12} md={12}>
-            <List/>
-            
+            <List />
+
             {/* <TableList
               headCells={headCells}
               rows={listAllMemberByClaimStatus}