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;
  TotalReceivedAmount: number;
  CashFlowStatus: string;
  CostPerformanceIndex: number;
  ClickedIndex: number;
  Index: number;
}

const ProjectFinancialCard: React.FC<Props> = ({
  Title,
  TotalActiveProjectNumber,
  TotalFees,
  TotalBudget,
  TotalCumulative,
  TotalInvoicedAmount,
  TotalReceivedAmount,
  CashFlowStatus,
  CostPerformanceIndex,
  ClickedIndex,
  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 ml-5" style={{ color: "#898d8d" }}>
        Total Active Project
      </div>
      <div className="text-lg font-medium ml-5" style={{ color: "#6b87cf" }}>
        {TotalActiveProjectNumber.toLocaleString()}
      </div>
      <hr />
      <div className="text-sm font-medium ml-5" style={{ color: "#898d8d" }}>
        Total Fees
      </div>
      <div className="text-lg font-medium ml-5" style={{ color: "#6b87cf" }}>
        {TotalFees.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
      </div>
      <hr />
      <div className="text-sm font-medium ml-5" style={{ color: "#898d8d" }}>
        Total Budget
      </div>
      <div className="text-lg font-medium ml-5" style={{ color: "#6b87cf" }}>
        {TotalBudget.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
      </div>
      <hr />
      <div className="text-sm font-medium ml-5" style={{ color: "#898d8d" }}>
        Total Cumulative Expenditure
      </div>
      <div className="text-lg font-medium ml-5" style={{ color: "#6b87cf" }}>
        {TotalCumulative.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
      </div>
      <hr />
      <div className="text-sm font-medium ml-5" style={{ color: "#898d8d" }}>
        Total Invoiced Amount
      </div>
      <div className="text-lg font-medium ml-5" style={{ color: "#6b87cf" }}>
        {TotalInvoicedAmount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
      </div>
      <hr />
      <div className="text-sm font-medium ml-5" style={{ color: "#898d8d" }}>
        Total Received Amount
      </div>
      <div className="text-lg font-medium ml-5" style={{ color: "#6b87cf" }}>
        {TotalReceivedAmount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
      </div>
      <hr />
      <div className="text-sm font-medium ml-5" style={{ color: "#898d8d" }}>
        Cash Flow Status
      </div>
      {CashFlowStatus === "Negative" && (
        <>
          <div
            className="text-lg font-medium ml-5"
            style={{ color: "#f896aa" }}
          >
            {CashFlowStatus}
          </div>
          <hr />
        </>
      )}
      {CashFlowStatus === "Positive" && (
        <>
          <div
            className="text-lg font-medium ml-5"
            style={{ color: "#71d19e" }}
          >
            {CashFlowStatus}
          </div>
          <hr />
        </>
      )}
      <div
        className="text-sm mt-2 font-medium ml-5"
        style={{ color: "#898d8d" }}
      >
        Cost Performance Index (CPI)
      </div>
      {Number(CostPerformanceIndex) < 1 && (
        <>
          <div
            className="text-lg font-medium ml-5 mb-2"
            style={{ color: "#f896aa" }}
          >
            {CostPerformanceIndex}
          </div>
        </>
      )}
      {Number(CostPerformanceIndex) >= 1 && (
        <>
          <div
            className="text-lg font-medium ml-5 mb-2"
            style={{ color: "#71d19e" }}
          >
            {CostPerformanceIndex}
          </div>
        </>
      )}
    </Card>
  );
};

export default ProjectFinancialCard;