diff --git a/src/app/api/cashflow/index.ts b/src/app/api/cashflow/index.ts
index ed26b3a..4de997c 100644
--- a/src/app/api/cashflow/index.ts
+++ b/src/app/api/cashflow/index.ts
@@ -30,6 +30,34 @@ export interface CashFlowByMonthChartResult {
   expenditureList: any[];
 }
 
+export interface CashFlowReceivableAndExpenditure {
+  receivedPercentage: number;
+  expenditurePercentage: number;
+  totalInvoiced: number;
+  totalReceived: number;
+  receivable: number;
+  totalBudget: number;
+  totalExpenditure: number;
+  expenditureReceivable: number;
+}
+export interface CashFlowAnticipatedChartResult {
+  anticipateIncomeList: any[];
+  anticipateExpenditure: any[];
+  monthanticipateIncome: number;
+  anticipateIncomeDate: number;
+  anticipateIncome:number;
+  anticipateExpenditureList: any[];
+  id: number;
+  name: string;
+  planStart: string;
+  planEnd: string;
+  startMonth: number;
+  Duration: number;
+  AverageManhours: number;
+  teamLead: number;
+  totalManhour: number;
+}
+
 export const preloadProjects = () => {
   fetchProjectsCashFlow();
 };
@@ -48,3 +76,25 @@ export const fetchProjectsCashFlowMonthlyChart = cache(async (projectIdList: num
   }
   
 });
+
+export const fetchProjectsCashFlowReceivableAndExpenditure = cache(async (projectIdList: number[]) => {
+  if (projectIdList.length !== 0) {
+    const queryParams = new URLSearchParams();
+    queryParams.append('projectIdList', projectIdList.join(','));
+    return serverFetchJson<CashFlowReceivableAndExpenditure[]>(`${BASE_API_URL}/dashboard/searchCashFlowReceivableAndExpenditure?${queryParams.toString()}`);
+  } else {
+    return [];
+  }
+  
+});
+
+export const fetchProjectsCashFlowAnticipate = cache(async (projectIdList: number[],year:number) => {
+  if (projectIdList.length !== 0) {
+    const queryParams = new URLSearchParams();
+    queryParams.append('projectIdList', projectIdList.join(','));
+    return serverFetchJson<CashFlowAnticipatedChartResult[]>(`${BASE_API_URL}/dashboard/searchCashFlowAnticipate?${queryParams.toString()}&year=${year}`);
+  } else {
+    return [];
+  }
+  
+});
diff --git a/src/components/ProjectCashFlow/ProjectCashFlow.tsx b/src/components/ProjectCashFlow/ProjectCashFlow.tsx
index 14b40a0..7d422a2 100644
--- a/src/components/ProjectCashFlow/ProjectCashFlow.tsx
+++ b/src/components/ProjectCashFlow/ProjectCashFlow.tsx
@@ -19,7 +19,7 @@ import SearchBox, { Criterion } from "../SearchBox";
 import ProgressByClientSearch from "@/components/ProgressByClientSearch";
 import { Suspense } from "react";
 import ProgressCashFlowSearch from "@/components/ProgressCashFlowSearch";
-import { fetchProjectsCashFlow,fetchProjectsCashFlowMonthlyChart} from "@/app/api/cashflow";
+import { fetchProjectsCashFlow,fetchProjectsCashFlowMonthlyChart,fetchProjectsCashFlowReceivableAndExpenditure,fetchProjectsCashFlowAnticipate} from "@/app/api/cashflow";
 import { Input, Label } from "reactstrap";
 import { CashFlow } from "@/app/api/cashflow";
 import dayjs from 'dayjs';
@@ -43,6 +43,14 @@ const ProjectCashFlow: React.FC = () => {
   const [monthlyCumulativeExpenditureList, setMonthlyCumulativeExpenditureList]: any[] = React.useState([]);
   const [monthlyChartLeftMax, setMonthlyChartLeftMax]: any[] = React.useState(0);
   const [monthlyChartRightMax, setMonthlyChartRightMax]: any[] = React.useState(0);
+  const [receivedPercentage,setReceivedPercentage]: any[] = React.useState(0);
+  const [totalBudget,setTotalBudget]: any[] = React.useState(0);
+  const [totalInvoiced,setTotalInvoiced]: any[] = React.useState(0);
+  const [totalReceived,setTotalReceived]: any[] = React.useState(0);
+  const [receivable,setReceivable]: any[] = React.useState(0);
+  const [totalExpenditure,setTotalExpenditure]: any[] = React.useState(0);
+  const [expenditureReceivable,setExpenditureReceivable]: any[] = React.useState(0);
+  const [expenditurePercentage,setExpenditurePercentage]: any[] = React.useState(0);
   const [cashFlowYear, setCashFlowYear]: any[] = React.useState(
     todayDate.getFullYear(),
   );
@@ -100,12 +108,41 @@ const ProjectCashFlow: React.FC = () => {
     }
     
   }
+  const fetchReceivableAndExpenditureData = async () => {
+    const cashFlowReceivableAndExpenditureData = await fetchProjectsCashFlowReceivableAndExpenditure(selectedProjectIdList);
+    if(cashFlowReceivableAndExpenditureData.length !== 0){
+      setReceivedPercentage(cashFlowReceivableAndExpenditureData[0].receivedPercentage)
+      setTotalInvoiced(cashFlowReceivableAndExpenditureData[0].totalInvoiced)
+      setTotalReceived(cashFlowReceivableAndExpenditureData[0].totalReceived)
+      setReceivable(cashFlowReceivableAndExpenditureData[0].receivable)
+      setExpenditurePercentage(cashFlowReceivableAndExpenditureData[0].expenditurePercentage)
+      setTotalBudget(cashFlowReceivableAndExpenditureData[0].totalBudget)
+      setTotalExpenditure(cashFlowReceivableAndExpenditureData[0].totalExpenditure)
+      setExpenditureReceivable(cashFlowReceivableAndExpenditureData[0].expenditureReceivable)
+    }
+  }
+  const fetchAnticipateData = async () => {
+    const cashFlowAnticipateData = await fetchProjectsCashFlowAnticipate(selectedProjectIdList,cashFlowYear);
+    const monthlyAnticipateIncome = []
+    var anticipateLeftMax = 0
+    if(cashFlowAnticipateData.length !== 0){
+      for (var i = 0; i < cashFlowAnticipateData[0].anticipateIncomeList.length; i++) {
+        if (anticipateLeftMax < cashFlowAnticipateData[0].anticipateIncomeList[i].anticipateIncome){
+          anticipateLeftMax = Math.max(cashFlowAnticipateData[0].anticipateIncomeList[i].anticipateIncome,cashFlowAnticipateData[0].anticipateIncomeList[i].anticipateIncome)
+        }
+        monthlyAnticipateIncome.push(cashFlowAnticipateData[0].anticipateIncomeList[i].anticipateIncome)
+      }
+    }
+    console.log(monthlyAnticipateIncome)
+  }
   useEffect(() => {
     fetchData()
    }, []);
 
    useEffect(() => {
     fetchChartData()
+    fetchReceivableAndExpenditureData()
+    fetchAnticipateData()
    }, [cashFlowYear,selectedProjectIdList]);
   const columns = [
     {
@@ -416,7 +453,7 @@ const ProjectCashFlow: React.FC = () => {
 
   const accountsReceivableOptions: ApexOptions = {
     colors: ["#20E647"],
-    series: [80],
+    series: [receivedPercentage],
     chart: {
       height: 350,
       type: "radialBar",
@@ -465,7 +502,7 @@ const ProjectCashFlow: React.FC = () => {
 
   const expenditureOptions: ApexOptions = {
     colors: ["#20E647"],
-    series: [95],
+    series: [expenditurePercentage],
     chart: {
       height: 350,
       type: "radialBar",
@@ -734,7 +771,7 @@ const ProjectCashFlow: React.FC = () => {
                   className="text-lg font-medium ml-5"
                   style={{ color: "#6b87cf" }}
                 >
-                  1,000,000.00
+                  {totalInvoiced.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                 </div>
                 <hr />
                 <div
@@ -747,7 +784,7 @@ const ProjectCashFlow: React.FC = () => {
                   className="text-lg font-medium ml-5"
                   style={{ color: "#6b87cf" }}
                 >
-                  800,000.00
+                  {totalReceived.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                 </div>
                 <hr />
                 <div
@@ -760,7 +797,7 @@ const ProjectCashFlow: React.FC = () => {
                   className="text-lg font-medium ml-5 mb-2"
                   style={{ color: "#6b87cf" }}
                 >
-                  200,000.00
+                  {receivable.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                 </div>
               </Card>
             </Card>
@@ -796,7 +833,7 @@ const ProjectCashFlow: React.FC = () => {
                   className="text-lg font-medium ml-5"
                   style={{ color: "#6b87cf" }}
                 >
-                  800,000.00
+                  {totalBudget.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                 </div>
                 <hr />
                 <div
@@ -809,7 +846,7 @@ const ProjectCashFlow: React.FC = () => {
                   className="text-lg font-medium ml-5"
                   style={{ color: "#6b87cf" }}
                 >
-                  760,000.00
+                  {totalExpenditure.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                 </div>
                 <hr />
                 <div
@@ -822,7 +859,7 @@ const ProjectCashFlow: React.FC = () => {
                   className="text-lg font-medium ml-5 mb-2"
                   style={{ color: "#6b87cf" }}
                 >
-                  40,000.00
+                  {expenditureReceivable.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                 </div>
               </Card>
             </Card>