add anticipate monthly income chart

src/components/ProjectCashFlow/ProjectCashFlow.tsx

@@ -27,6 +27,9 @@ const ProjectCashFlow: React.FC = () => {
   const [cashFlowYear, setCashFlowYear]: any[] = React.useState(
     todayDate.getFullYear(),
   );
+  const [anticipateCashFlowYear, setAnticipateCashFlowYear]: any[] = React.useState(
+    todayDate.getFullYear(),
+  );
   const columns = [
     {
       id: "projectCode",
@@ -236,6 +239,113 @@ const ProjectCashFlow: React.FC = () => {
     ],
   };
 
+  const anticipateOptions: ApexOptions = {
+    chart: {
+      height: 350,
+      type: "line",
+    },
+    stroke: {
+      width: [0, 0, 2, 2],
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        distributed: false,
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    xaxis: {
+      categories: [
+        "Q1",
+        "Q2",
+        "Q3",
+        "Q4",
+        "Q5",
+        "Q6",
+        "Q7",
+        "Q8",
+        "Q9",
+        "Q10",
+        "Q11",
+        "Q12",
+      ],
+    },
+    yaxis: [
+      {
+        title: {
+          text: "Anticipate Monthly Income and Expenditure(HKD)",
+        },
+        min: 0,
+        max: 350000,
+        tickAmount: 5,
+        labels: {
+          formatter: function (val) {
+              return val.toLocaleString()
+          }
+        }
+      },
+      {
+        show: false,
+        seriesName: "Monthly_Expenditure",
+        title: {
+          text: "Monthly Expenditure (HKD)",
+        },
+        min: 0,
+        max: 350000,
+        tickAmount: 5,
+      },
+      {
+        seriesName: "Cumulative_Income",
+        opposite: true,
+        title: {
+          text: "Cumulative Income and Expenditure(HKD)",
+        },
+        min: 0,
+        max: 850000,
+        tickAmount: 5,
+        labels: {
+          formatter: function (val) {
+              return val.toLocaleString()
+          }
+        }
+      },
+      {
+        show: false,
+        seriesName: "Cumulative_Expenditure",
+        opposite: true,
+        title: {
+          text: "Cumulative Expenditure (HKD)",
+        },
+        min: 0,
+        max: 850000,
+        tickAmount: 5,
+      },
+    ],
+    grid: {
+      borderColor: "#f1f1f1",
+    },
+    annotations: {},
+    series: [
+      {
+        name: "Monthly_Income",
+        type: "column",
+        color: "#f1c48a",
+        data: [0, 110000, 0, 0, 185000, 0, 0, 189000, 0, 0, 300000, 0],
+      },
+      {
+        name: "Monthly_Expenditure",
+        type: "column",
+        color: "#89d7f3",
+        data: [
+          60000, 60000, 60000, 60000, 60000, 60000, 60000, 60000, 60000, 60000,
+          60000, 60000,
+        ],
+      }
+    ],
+  };
+
   const accountsReceivableOptions: ApexOptions = {
     colors: ["#20E647"],
     series: [80],
@@ -624,6 +734,48 @@ const ProjectCashFlow: React.FC = () => {
           }}
         >
           <Grid item xs={12} md={12} lg={12}>
+          <Card>
+              <CardHeader
+                className="text-slate-500"
+                title="Anticipate Cash Flow by Month"
+              />
+              <div style={{ display: "inline-block", width: "99%" }}>
+                <div className="inline-block">
+                  <Label className="text-slate-500 font-medium ml-6">
+                    Period:&nbsp;
+                  </Label>
+                  <Input
+                    id={"cashFlowYear"}
+                    value={anticipateCashFlowYear}
+                    readOnly={true}
+                    bsSize="lg"
+                    className="rounded-md text-base w-12"
+                  />
+                </div>
+                <div className="inline-block ml-1">
+                  <button
+                    onClick={() => setAnticipateCashFlowYear(cashFlowYear - 1)}
+                    className="hover:cursor-pointer hover:bg-slate-200 bg-transparent rounded-md w-8 h-8 text-base"
+                  >
+                    &lt;
+                  </button>
+                </div>
+                <div className="inline-block ml-1">
+                  <button
+                    onClick={() => setAnticipateCashFlowYear(cashFlowYear + 1)}
+                    className="hover:cursor-pointer hover:bg-slate-200 bg-transparent rounded-md w-8 h-8 text-base"
+                  >
+                    &gt;
+                  </button>
+                </div>
+                <ReactApexChart
+                  options={anticipateOptions}
+                  series={anticipateOptions.series}
+                  type="line"
+                  height="350"
+                />
+              </div>
+            </Card>
             <Card>
               <CardHeader
                 className="text-slate-500"