tsms/src/components/ProjectCashFlow/ProjectCashFlow.tsx

"use client";
import * as React from "react";
import Grid from "@mui/material/Grid";
import { useState,useEffect, useMemo } from 'react'
import Paper from "@mui/material/Paper";
import { TFunction } from "i18next";
import { useTranslation } from "react-i18next";
import {Card,CardHeader}  from '@mui/material';
import CustomSearchForm from "../CustomSearchForm/CustomSearchForm";
import CustomDatagrid from '../CustomDatagrid/CustomDatagrid';
import ReactApexChart from 'react-apexcharts';
import { ApexOptions } from 'apexcharts';
import { GridColDef, GridRowSelectionModel} from '@mui/x-data-grid';
import ReportProblemIcon from '@mui/icons-material/ReportProblem';
import dynamic from 'next/dynamic';
import '../../app/global.css';
import { AnyARecord, AnyCnameRecord } from "dns";
import SearchBox, { Criterion } from "../SearchBox";
import ProgressByClientSearch from "@/components/ProgressByClientSearch";
import { Suspense } from "react";
import ProgressCashFlowSearch from "@/components/ProgressCashFlowSearch";

const ProjectCashFlow: React.FC = () => {
  const [selectionModel, setSelectionModel] : any[] = React.useState([]);
//   const series: ApexAxisChartSeries | ApexNonAxisChartSeries = [{
//     name: 'Monthly Income',
//     type: 'line',
//     data: [80, 55, 40, 65, 70],
//   },
//   {
//     name: 'Monthly Incomess',
//     type: 'column',
//     data: [80, 55, 40, 65, 70],
//   }
// ];
  const columns = [
    {
      id: 'projectCode',
      field: 'projectCode',
      headerName: "Project Code",
      flex: 1,
  },
  {
      id: 'projectName',
      field: 'projectName',
      headerName: "Project Name",
      flex: 1,
  },
  {
    id: 'team',
    field: 'team',
    headerName: "Team",
    flex: 1,
  },
  {
    id: 'teamLeader',
    field: 'teamLeader',
    headerName: "Team Leader",
    flex: 1,
  },
  {
    id: 'startDate',
    field: 'startDate',
    headerName: "Start Date",
    flex: 1,
  },
  {
    id: 'targetEndDate',
    field: 'targetEndDate',
    headerName: "Target End Date",
    flex: 1,
  },
  {
    id: 'client',
    field: 'client',
    headerName: "Client",
    flex: 1,
  },
  {
    id: 'subsidiary',
    field: 'subsidiary',
    headerName: "Subsidiary",
    flex: 1,
  },
  ];

  const options: ApexOptions = {
    chart: {
      height: 350,
      type: 'line',
    },
    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: 'Monthly Income and Expenditure (HKD)'
      },
      labels: {
        maxWidth: 300, 
        style: {
          cssClass: 'apexcharts-yaxis-label',
        },
      },
    },
    {
      opposite: true,
      title: {
        text: 'Cumulative Income and Expenditure (HKD)'
    }}
  ],
    title: {
      text: 'Current Stage Completion Percentage',
      align: 'center'
    },
    grid: {
      borderColor: '#f1f1f1',
    },
    annotations: {
    },
    series:[
      {
        name:"Monthly Income",
        type:"column",
        color: "#ffde91",
        data:[0,110000,0,0,185000,0,0,189000,0,0,300000,0]
      },
      {
        name:"Monthly Expenditure",
        type:"column",
        color: "#82b59d",
        data:[0,160000,120000,120000,55000,55000,55000,55000,55000,70000,55000,55000]
      },
      {
        name:"Cumulative Income",
        type:"line",
        color: "#EE6D7A",
        data:[1,2,3,5,6,9,8,5,6,1,16,15]
      },
      
      {
        name:"Cumulative Expenditure",
        type:"line",
        color: "#EE6D7A",
        data:[1,2,3,5,6,9,8,5,6,1,16,15]
      }
    ]
  };

  const rows = [{id: 1,projectCode:"M1001",projectName:"Consultancy Project A", team:"XXX", teamLeader:"XXX", startDate:"01/07/2022", targetEndDate: "01/04/2024", client:"Client B", subsidiary:"N/A"},
  {id: 2,projectCode:"M1301",projectName:"Consultancy Project AAAA", team:"XXX", teamLeader:"XXX", startDate:"01/09/2022", targetEndDate: "20/02/2024", client:"Client C", subsidiary:"Subsidiary A"},
  {id: 3,projectCode:"M1354",projectName:"Consultancy Project BBB", team:"YYY", teamLeader:"YYY", startDate:"01/02/2023", targetEndDate: "31/01/2024", client:"Client D", subsidiary:"Subsidiary C"}
  ]
  const [selectedTeamData, setSelectedTeamData] : any[] = React.useState(rows);
  const handleSelectionChange = (newSelectionModel: GridRowSelectionModel) => {
    const selectedRowsData = selectedTeamData.filter((row:any) =>
      newSelectionModel.includes(row.id)
    );
    console.log(selectedRowsData)
  }

  return (
    <>
      <Suspense fallback={<ProgressCashFlowSearch.Loading />}>
        <ProgressCashFlowSearch/>
      </Suspense>
      <CustomDatagrid rows={selectedTeamData} columns={columns} columnWidth={200} dataGridHeight={300} checkboxSelection={true} onRowSelectionModelChange={handleSelectionChange} selectionModel={selectionModel}/>
        <Grid item sm>
          <div style={{display:"inline-block",width:"50%"}}>
            <Grid item xs={12} md={12} lg={12}>
              <Card>
                <CardHeader className="text-slate-500" title="Project Cash Flow by Month"/>
                <div style={{display:"inline-block",width:"99%"}}>
                    <ReactApexChart
                      options={options}
                      series={options.series}
                      height={350}
                    />
                  </div>
              </Card>
            </Grid>
          </div>
        </Grid>
    </>
  );
};

export default ProjectCashFlow;