tsms/src/components/ProjectFinancialSummary/ProjectFinancialCard.tsx

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 RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
import { useRouter } from "next/navigation";

interface Props {
  Title: string;
  TeamId: number;
  TotalActiveProjectNumber: number;
  TotalFees: number;
  TotalBudget: number;
  TotalCumulative: number;
  TotalInvoicedAmount: number;
  TotalUnInvoicedAmount: number;
  TotalReceivedAmount: number;
  CashFlowStatus: string;
  CostPerformanceIndex: number;
  ClickedIndex: number;
  ProjectedCPI: number;
  ProjectedCashFlowStatus: string;
  Index: number;
}

const dataBaseStyle:any = { color: "#6b87cf", textAlign: "right" }
const dataNegativeStyle:any = { color: "#f896aa", textAlign: "right" }
const dataPositiveStyle:any = { color: "#71d19e", textAlign: "right" }

const ProjectFinancialCard: React.FC<Props> = ({
  Title,
  TeamId,
  TotalActiveProjectNumber,
  TotalFees,
  TotalBudget,
  TotalCumulative,
  TotalInvoicedAmount,
  TotalUnInvoicedAmount,
  TotalReceivedAmount,
  CashFlowStatus,
  CostPerformanceIndex,
  ClickedIndex,
  ProjectedCPI,
  ProjectedCashFlowStatus,
  Index,
}) => {
  const router = useRouter();
  const [SearchCriteria, setSearchCriteria] = React.useState({});
  const { t } = useTranslation("dashboard");
  const handleCheckProjectStatusClick = (TeamId:number) => {
    router.push(`/dashboard/ProjectStatusByTeam?teamLeadId=${TeamId}`);
  };
  const borderColor =
    CashFlowStatus === "Negative"
      ? "border-red-300 border-solid"
      : "border-green-200 border-solid";
  const selectedBackgroundColor =
    ClickedIndex === Index ? "rgb(235 235 235)" : "rgb(255 255 255)";
  return (
    <Card
      style={{
        maxWidth: "25%",
        minWidth: "280px",
        boxShadow:
          "0 0px 10px 0 rgba(0, 0, 0, 0.08), 0 0px 10px 0 rgba(0, 0, 0, 0.08)",
        backgroundColor: selectedBackgroundColor,
      }}
      className={`${borderColor}`}
    >
      <div
        className="text-xl mt-2 font-medium inline-block"
        style={{ width: "100%", textAlign: "center", color: "#898d8d" }}
      >
        {ClickedIndex === Index ? 
        <div className="w-full" style={{ overflow: 'hidden' }}>
        <div className=" float-right mt-1 mr-5 text-gray-500"><RadioButtonCheckedIcon /></div></div>
        :
        <div className="w-full" style={{ overflow: 'hidden' }}>
        <div className=" float-right mt-1 mr-5 text-gray-400"><RadioButtonUncheckedIcon /></div></div>
        }
        {Title !== t("All Team") ?
         <div className="mb-2">{Title}</div>
        :
         <div className="mb-9">{Title}</div>
        }
        
      </div>
      
      {Title !== t("All Team") ?
      <>
      <div onClick={(r) => handleCheckProjectStatusClick(TeamId)} className="bg-lime-100 mb-2 border-b-2 pt-1 pb-1 hover:bg-lime-200" style={{ width: "100%", textAlign: "center", color: "#898d8d" }}>{t("Check Project Status")}</div>
      </>
      :
      <><hr /></>
      }
      <div className="text-sm font-medium ml-5" style={{ color: "#898d8d" }}>
        {"(a) " + t("Total Active Project")}
      </div>
      <div className="text-lg font-medium mx-5" style={dataBaseStyle}>
        {TotalActiveProjectNumber.toLocaleString()}
      </div>
      <hr />
      <div className="text-sm font-medium ml-5" style={{ color: "#898d8d" }}>
        {"(b) " + t("Total Fees")}
      </div>
      <div className="text-lg font-medium mx-5" style={dataBaseStyle}>
        {TotalFees.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
      </div>
      <hr />
      <div className="text-sm font-medium ml-5" style={{ color: "#898d8d" }}>
        {"(c) " + t("Total Budget")}
      </div>
      <div className="text-lg font-medium mx-5" style={dataBaseStyle}>
        {TotalBudget.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
      </div>
      <div style={{ overflow: 'hidden' }}>
        <div className="text-sm font-medium ml-5 border-solid w-fit rounded-md mt-2 float-right mr-2" style={{ color: "#888d8f" }}>
          <div className="ml-2 mr-2 ">{"(c) = (b) * 80%"}</div>
        </div>
      </div>
      <hr />
      <div className="text-sm font-medium ml-5" style={{ color: "#898d8d" }}>
        {"(d) " + t("Total Cumulative Expenditure")}
      </div>
      <div className="text-lg font-medium mx-5" style={dataBaseStyle}>
        {TotalCumulative.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
      </div>
      <hr />
      <div className="text-sm font-medium ml-5" style={{ color: "#898d8d" }}>
        {"(e) " + t("Total Invoiced Amount")}
      </div>
      <div className="text-lg font-medium mx-5" style={dataBaseStyle}>
        {TotalInvoicedAmount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
      </div>
      <hr />
      <div className="text-sm font-medium ml-5" style={{ color: "#898d8d" }}>
        {"(f) " + t("Total Un-Invoiced Amount")}
      </div>
      <div className="text-lg font-medium mx-5" style={dataBaseStyle}>
        {TotalUnInvoicedAmount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
      </div>
      <div style={{ overflow: 'hidden' }}>
        <div className="text-sm font-medium ml-5 border-solid w-fit rounded-md mt-2 float-right mr-2" style={{ color: "#888d8f" }}>
            <div className="ml-2 mr-2">{"(f) =(b) - (e)"}</div>
        </div>
      </div>
      <hr />
      <div className="text-sm font-medium ml-5" style={{ color: "#898d8d" }}>
          {"(g) " + t("Total Received Amount")}
      </div>
      <div className="text-lg font-medium mx-5" style={dataBaseStyle}>
        {TotalReceivedAmount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
      </div>
      <hr />
      <div className="text-sm font-medium ml-5" style={{ color: "#898d8d" }}>
        {"(h) " + t("Cash Flow Status")}
      </div>
      {CashFlowStatus === "Negative" && (
        <>
            <div
              className="text-lg font-medium mx-5"
              style={dataNegativeStyle}
            >
              {t(CashFlowStatus)}
            </div>
            <div style={{ overflow: 'hidden' }}>
              <div className="text-sm font-medium ml-5 border-solid w-fit rounded-md mt-2 float-right mr-2" style={{ color: "#888d8f" }}>
                <div className="ml-2 mr-2 ">{t("Positive") + ": (e) > or = (d)"}</div>
                <div className="ml-2 mr-2 ">{t("Negative") + ": (e) < (d)"}</div>
              </div>
            </div>
          <hr />
        </>
      )}
      {CashFlowStatus === "Positive" && (
        <>
          <div
            className="text-lg font-medium mx-5"
            style={dataPositiveStyle}
          >
            {t(CashFlowStatus)}
          </div>
          <div style={{ overflow: 'hidden' }}>
            <div className="text-sm font-medium ml-5 border-solid w-fit rounded-md mt-2 float-right mr-2" style={{ color: "#888d8f" }}>
              <div className="ml-2 mr-2 ">{t("Positive") + ": (e) > or = (d)"}</div>
              <div className="ml-2 mr-2 ">{t("Negative") + ": (e) < (d)"}</div>
            </div>
          </div>
          <hr />
        </>
      )}
      <div
        className="text-sm mt-2 font-medium mx-5"
        style={{ color: "#898d8d" }}
      >
        {"(i) " + t("Cost Performance Index") + " (CPI)"}
      </div>
      { Number(CostPerformanceIndex) < 1 && (
        <>
          <div
            className="text-lg font-medium mx-5 mb-2"
            style={dataNegativeStyle}
          >
            {CostPerformanceIndex}
          </div>
          <div style={{ overflow: 'hidden' }}>
            <div className="text-sm font-medium ml-5 border-solid w-fit rounded-md mt-2 float-right mr-2" style={{ color: "#888d8f" }}>
              <div className="ml-2 mr-2 ">{"(i) = (e) / (d)"}</div>
            </div>
          </div>
          <hr />
        </>
      )}
      {Number(CostPerformanceIndex) >= 1 && (
        <>
          <div
            className="text-lg font-medium mx-5 mb-2"
            style={dataPositiveStyle}
          >
            {CostPerformanceIndex}
          </div>
          <div style={{ overflow: 'hidden' }}>
            <div className="text-sm font-medium ml-5 border-solid w-fit rounded-md mt-2 float-right mr-2" style={{ color: "#888d8f" }}>
              <div className="ml-2 mr-2 ">{"(i) =(e) / (d)"}</div>
            </div>
          </div>
          <hr />
        </>
      )}
      <div className="text-sm font-medium ml-5" style={{ color: "#898d8d" }}>
        {"(j) " + t("Projected Cash Flow Status")}
      </div>
      {ProjectedCashFlowStatus === "Negative" && (
        <>
          <div
            className="text-lg font-medium mx-5"
            style={dataNegativeStyle}
          >
            {t(ProjectedCashFlowStatus)}
          </div>
          <div style={{ overflow: 'hidden' }}>
            <div className="text-sm font-medium mr-2 border-solid w-fit rounded-md mt-2 float-right" style={{ color: "#888d8f" }}>
              <div className="ml-2 mr-2 ">{t("Positive") + ": (b) > or = (d)"}</div>
              <div className="ml-2 mr-2 ">{t("Negative") + ": (b) < (d)"}</div>
            </div>
          </div>
          <hr />
        </>
      )}
      {ProjectedCashFlowStatus === "Positive" && (
        <>
          <div
            className="text-lg font-medium mx-5"
            style={dataPositiveStyle}
          >
            {t(ProjectedCashFlowStatus)}
          </div>
          <div style={{ overflow: 'hidden' }}>
            <div className="text-sm font-medium mr-2 border-solid w-fit rounded-md mt-2 float-right" style={{ color: "#888d8f" }}>
              <div className="ml-2 mr-2 ">{t("Positive") +  ": (b) > or = (d)"}</div>
              <div className="ml-2 mr-2 ">{t("Negative") + ": (b) < (d)"}</div>
            </div>
          </div>
          <hr />
        </>
      )}
      <div
        className="text-sm mt-2 font-medium ml-5"
        style={{ color: "#898d8d" }}
      >
        {"(k) " + t("Projected Cost Performance Index") + " (CPI)"}
      </div>
      {Number(ProjectedCPI) < 1 && (
        <>
          <div
            className="text-lg font-medium mx-5 mb-2"
            style={dataNegativeStyle}
          >
            {ProjectedCPI}
          </div>
          <div className="text-sm font-medium ml-5 border-solid w-fit rounded-md mb-2 mr-2 float-right" style={{ color: "#888d8f" }}>
            <div className="ml-2 mr-2 ">{"(k) = (b) / (d)"}</div>
          </div>
        </>
      )}
      {Number(ProjectedCPI) >= 1 && (
        <>
          <div
            className="text-lg font-medium mx-5 mb-2"
            style={dataPositiveStyle}
          >
            {ProjectedCPI}
          </div>
          <div className="text-sm font-medium ml-5 border-solid w-fit rounded-md mb-2 mr-2 float-right" style={{ color: "#888d8f" }}>
            <div className="ml-2 mr-2 ">{"(k) = (b) / (d)"}</div>
          </div>
        </>
      )}
    </Card>
  );
};

export default ProjectFinancialCard;