update finan

src/components/ProjectFinancialSummaryV2/FinancialSummary.tsx

@@ -23,11 +23,6 @@ type DateParams = {
   [key: number]: InputDate;
 }
 
-type ComboParams = {
-  [key: number]: string;
-}
-
-
 const FinancialSummaryPage: React.FC<Props> = ({
     _teamId,
     financialSummByProject
@@ -41,7 +36,7 @@ const FinancialSummaryPage: React.FC<Props> = ({
   // currYear = 2024
   const startDate = "10-01"
   const endDate = "09-30"
-  const lengthOfCombo = 10
+  const lengthOfYear = 5
   const currFinancialYear = useMemo(() => currDate > `${currYear}-${startDate}` ? currYear + 1 : currYear, [currYear])
   const [mainData, setMainData] = useState<FinancialByProject[]>(financialSummByProject)
   const [byTeam, setByTeam] = useState<SumOfByTeam[]>(() => sumUpByTeam(mainData)) // do fetch to set
@@ -85,16 +80,16 @@ const FinancialSummaryPage: React.FC<Props> = ({
     const map: DateParams = {
       0: {startDate: "", endDate: ""},
       1: thisYear,
-      [lengthOfCombo - 1]: {startDate: "", endDate: `${currFinancialYear-(lengthOfCombo - 2)}-${endDate}`}
+      [lengthOfYear - 1]: {startDate: "", endDate: `${currFinancialYear-(lengthOfYear - 2)}-${endDate}`}
     }
-    for (let i = 2; i < lengthOfCombo - 1; i++) {
+    for (let i = 2; i < lengthOfYear - 1; i++) {
       map[i] = {
         startDate: `${currFinancialYear-i}-${startDate}`, 
         endDate: `${currFinancialYear-(i - 1)}-${endDate}`
       }
     }
     return map
-  }, [currDate, currYear, currFinancialYear, startDate, endDate, lengthOfCombo])
+  }, [currDate, currYear, currFinancialYear, startDate, endDate, lengthOfYear])
   
   // const comboList: string[] = useMemo(() => {
   //   const list = ["All"]
@@ -113,15 +108,15 @@ const FinancialSummaryPage: React.FC<Props> = ({
 
   const comboList: string[] = useMemo(() => {
     const list = ["All"];
-    for (let i = 1; i < lengthOfCombo - 1; i++) {
+    for (let i = 1; i < lengthOfYear - 1; i++) {
       const yearRange = `${currFinancialYear - i} - ${currFinancialYear - i + 1}`;
       const label = i === 1 ? `${yearRange} ${t("(current year)")}` : yearRange;
       list.push(label);
     }
-    const oldestYear = currFinancialYear - (lengthOfCombo - 2);
+    const oldestYear = currFinancialYear - (lengthOfYear - 2);
     list.push(`< ${oldestYear}`);
     return list;
-  }, [currFinancialYear, lengthOfCombo, t]);
+  }, [currFinancialYear, lengthOfYear, t]);
 
   const fetchFinancialSummaryByProject = useCallback(async (endDate: string, startDate: string) => {
     setIsLoading(true)
@@ -158,7 +153,7 @@ const FinancialSummaryPage: React.FC<Props> = ({
       setByClient(sumUpByClient(mainData))
     }
   }, [teamId])
-
+  
   return (
   <>
   <Card sx={{ display: "block" }}>
@@ -189,7 +184,7 @@ const FinancialSummaryPage: React.FC<Props> = ({
       <CardContent component={Stack} spacing={4}>
       <div className="ml-10 mr-10" style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'start'}}>
         {_teamId == 0 && allTeam && 
-          <div className="hover:cursor-pointer ml-4 inline-block" key={0} onClick={() => handleCardClick(0)}>
+          <div className="hover:cursor-pointer ml-4 mb-2 inline-block" key={0} onClick={() => handleCardClick(0)}>
             <ProjectFinancialCard 
             Title={t("All Team")}
             TeamId={0}
@@ -203,14 +198,14 @@ const FinancialSummaryPage: React.FC<Props> = ({
             // TotalUnInvoicedAmount={allTeam.uninvoicedAmount} 
             TotalReceivedAmount={allTeam.paidAmount} 
             CashFlowStatus={allTeam.invoicedAmount >= (allTeam.projectExpense + allTeam.manhourExpense) ? "Positive" : "Negative"} 
-            CostPerformanceIndex={isFinite(allTeam.invoicedAmount/(allTeam.projectExpense + allTeam.manhourExpense)) ? 0 : allTeam.invoicedAmount/(allTeam.projectExpense + allTeam.manhourExpense) || 0} 
+            CostPerformanceIndex={!isFinite(allTeam.invoicedAmount/(allTeam.projectExpense + allTeam.manhourExpense)) ? 0 : allTeam.invoicedAmount/(allTeam.projectExpense + allTeam.manhourExpense) || 0} 
             ProjectedCashFlowStatus={allTeam.totalFee >= (allTeam.projectExpense + allTeam.manhourExpense) ? "Positive" : "Negative"} 
-            ProjectedCPI={isFinite(allTeam.totalFee/(allTeam.projectExpense + allTeam.manhourExpense)) ? 0 : allTeam.totalFee/(allTeam.projectExpense + allTeam.manhourExpense) || 0} 
+            ProjectedCPI={!isFinite(allTeam.totalFee/(allTeam.projectExpense + allTeam.manhourExpense)) ? 0 : allTeam.totalFee/(allTeam.projectExpense + allTeam.manhourExpense) || 0} 
             ClickedIndex={isCardClickedIndex} 
             Index={0}/>
         </div>}
           {byTeam.length > 0 && byTeam.map((record) => (
-            <div className="hover:cursor-pointer ml-4 inline-block" key={record.id} onClick={() => handleCardClick(record.id)}>
+            <div className="hover:cursor-pointer ml-4 mb-2 inline-block" key={record.id} onClick={() => handleCardClick(record.id)}>
                   <ProjectFinancialCard 
                   Title={record.team} 
                   TeamId={record.id} 
@@ -224,9 +219,9 @@ const FinancialSummaryPage: React.FC<Props> = ({
                   // TotalUnInvoicedAmount={Math.abs(record.uninvoicedAmount)} 
                   TotalReceivedAmount={record.paidAmount} 
                   CashFlowStatus={record.invoicedAmount >= (record.projectExpense + record.manhourExpense) ? "Positive" : "Negative"} 
-                  CostPerformanceIndex={record.invoicedAmount/(record.projectExpense + record.manhourExpense) || 0} 
+                  CostPerformanceIndex={!isFinite(record.invoicedAmount/(record.projectExpense + record.manhourExpense)) ? 0 : record.invoicedAmount/(record.projectExpense + record.manhourExpense) || 0} 
                   ProjectedCashFlowStatus={record.totalFee >= (record.projectExpense + record.manhourExpense) ? "Positive" : "Negative"} 
-                  ProjectedCPI={record.totalFee/(record.projectExpense + record.manhourExpense) || 0} 
+                  ProjectedCPI={!isFinite(record.totalFee/(record.projectExpense + record.manhourExpense)) ? 0 : record.totalFee/(record.projectExpense + record.manhourExpense) || 0} 
                   ClickedIndex={isCardClickedIndex} 
                   Index={record.id}/>
             </div>