Add Month filter

src/app/api/reporte1/action.ts

@@ -11,6 +11,8 @@ export interface FileResponse {
 
 export interface FinancialStatusReportRequest {
     teamLeadId: number;
+    startMonth: string;
+    endMonth: string;
 }
 
 export const fetchProjectsFinancialStatusReport = async (data: FinancialStatusReportRequest) => {

src/app/api/reporte1/index.ts

@@ -22,6 +22,9 @@ export interface TeamCombo {
   id: number;
   name: string;
   code: string;
+  targetDate: string;
+  targetDateFrom: string;
+  targetDateTo: string;
 }
 
 export const preloadProjects = () => {

src/components/ProjectFinancialSummaryV2/FinancialSummary.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { FinancialByProject, fetchFinancialSummaryByProjectV2 } from '@/app/api/financialsummary';
-import { Box, Card, CardContent, CardHeader, FormControl, InputLabel, MenuItem, Select, Stack } from '@mui/material';
+import { Box, Card, CardContent, CardHeader, FormControl, FormControlLabel, InputLabel, MenuItem, Select, Stack, Switch } from '@mui/material';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from "react-i18next";
 import ProjectFinancialCard from '../ProjectFinancialSummary/ProjectFinancialCard';
@@ -72,6 +72,7 @@ const FinancialSummaryPage: React.FC<Props> = ({
   const [teamId, setTeamId] = useState(_teamId)
   const [isCardClickedIndex, setIsCardClickedIndex] = useState(_teamId || 0);
   const [period, setPeriod] = useState(0);
+  const [isFuture, setIsFuture] = useState(false);
 
   const dateMap: DateParams = useMemo(() => {
     const thisYear = currDate <= `${currYear}-${endDate}` ? 
@@ -90,7 +91,16 @@ const FinancialSummaryPage: React.FC<Props> = ({
     }
     return map
   }, [currDate, currYear, currFinancialYear, startDate, endDate, lengthOfCombo])
-  
+
+  const futureDateMap: DateParams = useMemo(() => {
+    const futureMap: DateParams = {};
+    for (let i = 0; i < lengthOfCombo; i++){
+      const financialStartDate = `${currYear+i}-${startDate}`; // Assuming financial year starts on April 1
+      const financialEndDate = `${currYear+i+1}-${endDate}`; // Assuming financial year ends on March 31
+      futureMap[i] = { startDate: financialStartDate, endDate: financialEndDate };
+    }
+    return futureMap
+  }, [currDate, currYear, startDate, endDate, lengthOfCombo])
   // const comboList: string[] = useMemo(() => {
   //   const list = ["All"]
   //   var lastYear = ""
@@ -118,6 +128,27 @@ const FinancialSummaryPage: React.FC<Props> = ({
     return list;
   }, [currFinancialYear, lengthOfCombo, t]);
 
+  const futureList: string[] = useMemo(() => {
+    const result = [];
+
+    // Get the keys of the futureDateMap
+    const years = Object.keys(futureDateMap);
+
+    // Iterate over the keys except the last one
+    for (let i = 0; i < years.length - 1; i++) {
+      const year = years[i];
+      result.push(`${year} - ${parseInt(year) + 1}`);
+    }
+
+    // Handle the last item separately
+    if (years.length > 0) {
+      const lastYear = years[years.length - 1];
+      result.push(`> ${lastYear}`);
+    }
+
+    return result;
+  }, [futureDateMap])
+
   const fetchFinancialSummaryByProject = useCallback(async (endDate: string, startDate: string) => {
     setIsLoading(true)
     const data = await fetchFinancialSummaryByProjectV2(_teamId, endDate, startDate)
@@ -126,7 +157,7 @@ const FinancialSummaryPage: React.FC<Props> = ({
     setByProject(data)
     setByClient(sumUpByClient(data))
     setIsLoading(false)
-  }, [setMainData, setByTeam, setByProject, setByClient])
+  }, [setMainData, setByTeam, setByProject, setByClient, isFuture])
 
   const handleCardClick = useCallback((teamId: number) => {
     setIsCardClickedIndex(teamId)
@@ -134,14 +165,25 @@ const FinancialSummaryPage: React.FC<Props> = ({
   }, []);
 
   const handleFilter = useCallback(async (value: number) => {
-    setPeriod(value)
-    console.log(value)
-    var _startDate = dateMap[value as keyof DateParams].startDate
-    var _endDate = dateMap[value as keyof DateParams].endDate
-    console.log(_startDate)
-    console.log(_endDate)
+    if (isFuture){
+      setPeriod(value)
+      console.log(value)
+      var _startDate = dateMap[value as keyof DateParams].startDate
+      var _endDate = dateMap[value as keyof DateParams].endDate
+      console.log(_startDate)
+      console.log(_endDate)
+    }else{
+      setPeriod(value)
+      console.log(value)
+      var _startDate = futureDateMap[value as keyof DateParams].startDate
+      var _endDate = futureDateMap[value as keyof DateParams].endDate
+      console.log(_startDate)
+      console.log(_endDate)
+    }
+    
     await fetchFinancialSummaryByProject(_endDate, _startDate)
-  }, [isCardClickedIndex])
+
+  }, [isCardClickedIndex, isFuture])
 
   useEffect(() => {
     if (teamId > 0) {
@@ -159,8 +201,8 @@ const FinancialSummaryPage: React.FC<Props> = ({
   <Card sx={{ display: "block" }}>
     {/* <CardHeader className="text-slate-500" title= {t("Filter")}/> */}
     <CardContent component={Stack} spacing={1}>
-      <Box sx={{ minWidth: 120 }}>
-        <FormControl fullWidth>
+      <Box sx={{ minWidth: 120, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <FormControl fullWidth sx={{ mr: 2 }}>
           <InputLabel id="demo-simple-select-label">Financial Year</InputLabel>
           <Select
             labelId="demo-simple-select-label"
@@ -170,12 +212,31 @@ const FinancialSummaryPage: React.FC<Props> = ({
             onChange={(e) => handleFilter(Number(e.target.value))}
           >
             {
-              comboList.map((str, i) => {
-                return <MenuItem key={i} value={i}>{str}</MenuItem>
+              isFuture 
+              ?
+              comboList.map((str, i) => (
+                <MenuItem key={i} value={i}>{str}</MenuItem>
+              ))
+              : 
+              Object.entries(futureDateMap).map(([year, dates], index) => {
+                const isLastItem = index === Object.keys(futureDateMap).length - 1;
+                const str = isLastItem ? `> ${dates.startDate.slice(0,4)}` : `${dates.startDate.slice(0,4)} - ${dates.endDate.slice(0,4)}`;
+                return <MenuItem key={year} value={year}>{str}</MenuItem>;
               })
             }
           </Select>
         </FormControl>
+        <FormControlLabel
+          control={
+            <Switch
+              checked={!isFuture}
+              onChange={() => setIsFuture(!isFuture)}
+              name="toggleSwitch"
+              color="primary"
+            />
+          }
+          label={isFuture ? t("Past Years") : t("Future Years")}
+        />
       </Box>
     </CardContent>
   </Card>
@@ -191,7 +252,7 @@ const FinancialSummaryPage: React.FC<Props> = ({
             TotalActiveProjectNumber={allTeam.activeProject} 
             TotalFees={allTeam.totalFee} 
             TotalBudget={allTeam.totalBudget} 
-            TotalCumulative={allTeam.manhourExpense + allTeam.projectExpense} 
+            TotalCumulative={allTeam.manhourExpense} 
             TotalProjectExpense={allTeam.projectExpense} 
             TotalInvoicedAmount={allTeam.invoicedAmount}
             TotalUnInvoicedAmount={allTeam.totalFee - allTeam.invoicedAmount} 
@@ -212,7 +273,7 @@ const FinancialSummaryPage: React.FC<Props> = ({
                   TotalActiveProjectNumber={record.activeProject} 
                   TotalFees={record.totalFee} 
                   TotalBudget={record.totalBudget} 
-                  TotalCumulative={record.projectExpense + record.manhourExpense} 
+                  TotalCumulative={record.manhourExpense} 
                   TotalProjectExpense={record.projectExpense} 
                   TotalInvoicedAmount={record.invoicedAmount} 
                   TotalUnInvoicedAmount={Math.abs(record.totalFee - record.invoicedAmount)} 

src/components/Report/FinancialStatusReportGen/FinancialStatusReportGen.tsx

@@ -11,6 +11,7 @@ import { fetchProjectsFinancialStatusReport } from "@/app/api/reporte1/action";
 import { downloadFile } from "@/app/utils/commonUtil";
 import { SessionStaff } from "@/config/authConfig";
 import FinancialStatusReportGenLoading from "./FinancialStatusReportGenLoading";
+import dayjs from "dayjs";
 //import { DownloadReportButton } from './DownloadReportButton';
 interface Props {
   projects: FinancialStatus[];
@@ -34,12 +35,13 @@ const GenFinancialStatusReport: React.FC<Props> & SubComponents = ({ projects, t
   const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
     () => [
       { label: t("Team"), paramName: "code", type: "select", options: combo, needAll: !Boolean(userStaff?.isTeamLead) },
-      // {
-      //   label: "Status",
-      //   label2: "Remained Date To",
-      //   paramName: "targetEndDate",
-      //   type: "dateRange",
-      // },
+      {
+        label: "Date From",
+        label2: "Date To",
+        paramName: "targetDate",
+        type: "dateRange",
+        needMonth: true,
+      },
     ],
     [t],
   );
@@ -54,20 +56,52 @@ const GenFinancialStatusReport: React.FC<Props> & SubComponents = ({ projects, t
         criteria={searchCriteria}
         onSearch={async (query) => {
           setLoading(true)
-          if (query.code.length > 0 && query.code.toLocaleLowerCase() !== "all") {
+          let postData = {
+            teamLeadId: -1,
+            startMonth: "1970-01-01",
+            endMonth: dayjs().format("YYYY-MM-DD").toString()
+          }
+          if(query.targetDate){
+            postData.startMonth = query.targetDate
+          }
+
+          if(query.targetDateTo){
+            postData.endMonth = query.targetDateTo
+          }
+
+          if(query.code.length > 0 && query.code.toLocaleLowerCase() !== "all") {
             const projectIndex = teamCombo.findIndex((project) => `${project.code} - ${project.name}` === query.code)
-            console.log(teamCombo[projectIndex].id)
-            const response = await fetchProjectsFinancialStatusReport({ teamLeadId: teamCombo[projectIndex].id })
-            if (response) {
-                downloadFile(new Uint8Array(response.blobValue), response.filename!!)
-            }
-          }else{
-            console.log(query.code)
-            const response = await fetchProjectsFinancialStatusReport({ teamLeadId: -1 })
+            postData.teamLeadId = teamCombo[projectIndex].id
+          }
+
+          try {
+            const response = await fetchProjectsFinancialStatusReport(postData)
             if (response) {
                 downloadFile(new Uint8Array(response.blobValue), response.filename!!)
             }
-          } 
+          }catch (error){
+            console.log(error)
+          }
+
+          setLoading(false)
+
+          // if (query.code.length > 0 && query.code.toLocaleLowerCase() !== "all") {
+          //   const projectIndex = teamCombo.findIndex((project) => `${project.code} - ${project.name}` === query.code)
+          //   console.log(query.targetDate)
+          //   console.log(query.targetDateTo)
+          //   const response = await fetchProjectsFinancialStatusReport({ teamLeadId: teamCombo[projectIndex].id, startMonth: query.targetDate, endMonth: query.targetDateTo })
+          //   if (response) {
+          //       downloadFile(new Uint8Array(response.blobValue), response.filename!!)
+          //   }
+          // }else{
+          //   console.log(query.code)
+          //   console.log(query.targetDate)
+          //   console.log(query.targetDateTo)
+          //   const response = await fetchProjectsFinancialStatusReport({ teamLeadId: -1, startMonth: query.targetDate, endMonth: query.targetDateTo })
+          //   if (response) {
+          //       downloadFile(new Uint8Array(response.blobValue), response.filename!!)
+          //   }
+          // } 
           setLoading(false)
         }}
         formType="download"