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";

interface Props {
  Title: string;
  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,
  TotalActiveProjectNumber,
  TotalFees,
  TotalBudget,
  TotalCumulative,
  TotalInvoicedAmount,
  TotalUnInvoicedAmount,
  TotalReceivedAmount,
  CashFlowStatus,
  CostPerformanceIndex,
  ClickedIndex,
  ProjectedCPI,
  ProjectedCashFlowStatus,
  Index,
}) => {
  const [SearchCriteria, setSearchCriteria] = React.useState({});
  const { t } = useTranslation("dashboard");
  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"
        style={{ width: "100%", textAlign: "center", color: "#898d8d" }}
      >
        {Title}
      </div>
      <hr />
      <div className="text-sm font-medium mx-5" style={{ color: "#898d8d" }}>
        {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 mx-5" style={{ color: "#898d8d" }}>
        {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 mx-5" style={{ color: "#898d8d" }}>
        {t("Total Budget")}
      </div>
      <div className="text-lg font-medium mx-5" style={dataBaseStyle}>
        {TotalBudget.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
      </div>
      <hr />
      <div className="text-sm font-medium mx-5" style={{ color: "#898d8d" }}>
        {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 mx-5" style={{ color: "#898d8d" }}>
        {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 mx-5" style={{ color: "#898d8d" }}>
        {t("Total Un-Invoiced Amount")}
      </div>
      <div className="text-lg font-medium mx-5" style={dataBaseStyle}>
        {TotalUnInvoicedAmount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
      </div>
      <hr />
      <div className="text-sm font-medium mx-5" style={{ color: "#898d8d" }}>
          {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 mx-5" style={{ color: "#898d8d" }}>
        {t("Cash Flow Status")}
      </div>
        <>
          <div
            className="text-lg font-medium mx-5"
            style={CashFlowStatus === "Negative" && dataNegativeStyle || dataPositiveStyle}
          >
            {t(CashFlowStatus)}
          </div>
          <hr />
        </>
      <div
        className="text-sm mt-2 font-medium mx-5"
        style={{ color: "#898d8d" }}
      >
        {t("Cost Performance Index") + " (CPI)"}
      </div>
      { (
        <>
          <div
            className="text-lg font-medium mx-5 mb-2"
            style={Number(CostPerformanceIndex) < 1 && dataNegativeStyle || dataPositiveStyle}
          >
            {CostPerformanceIndex}
          </div>
          <hr />
        </>
      )}
      <div className="text-sm font-medium mx-5" style={{ color: "#898d8d" }}>
        {t("Projected Cash Flow Status")}
      </div>
      <>
        <div
          className="text-lg font-medium mx-5"
          style={ProjectedCashFlowStatus === "Negative"  && dataNegativeStyle || dataPositiveStyle}
        >
          {t(ProjectedCashFlowStatus)}
        </div>
        <hr />
      </>
      <div
        className="text-sm mt-2 font-medium mx-5"
        style={{ color: "#898d8d" }}
      >
        {t("Projected Cost Performance Index") + " (CPI)"}
      </div>
        <>
        <div
          className="text-lg font-medium mx-5 mb-2"
          style={Number(ProjectedCPI) < 1  && dataNegativeStyle || dataPositiveStyle}
        >
          {ProjectedCPI}
        </div>
        </>
    </Card>
  );
};

export default ProjectFinancialCard;