From 7079126cf13d4fedd58ab10a03ff5d4d8d6382d9 Mon Sep 17 00:00:00 2001 From: "MSI\\2Fi" Date: Tue, 13 May 2025 18:45:18 +0800 Subject: [PATCH] Add Month filter --- src/app/api/reporte1/action.ts | 2 + src/app/api/reporte1/index.ts | 3 + .../FinancialSummary.tsx | 93 +++++++++++++++---- .../FinancialStatusReportGen.tsx | 66 +++++++++---- 4 files changed, 132 insertions(+), 32 deletions(-) diff --git a/src/app/api/reporte1/action.ts b/src/app/api/reporte1/action.ts index b82d989..fa45a39 100644 --- a/src/app/api/reporte1/action.ts +++ b/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) => { diff --git a/src/app/api/reporte1/index.ts b/src/app/api/reporte1/index.ts index eb2cd24..6e09d1c 100644 --- a/src/app/api/reporte1/index.ts +++ b/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 = () => { diff --git a/src/components/ProjectFinancialSummaryV2/FinancialSummary.tsx b/src/components/ProjectFinancialSummaryV2/FinancialSummary.tsx index 08dc47b..3c1d2e9 100644 --- a/src/components/ProjectFinancialSummaryV2/FinancialSummary.tsx +++ b/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 = ({ 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 = ({ } 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 = ({ 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 = ({ 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 = ({ }, []); 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 = ({ {/* */} - - + + Financial Year + setIsFuture(!isFuture)} + name="toggleSwitch" + color="primary" + /> + } + label={isFuture ? t("Past Years") : t("Future Years")} + /> @@ -191,7 +252,7 @@ const FinancialSummaryPage: React.FC = ({ 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 = ({ 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)} diff --git a/src/components/Report/FinancialStatusReportGen/FinancialStatusReportGen.tsx b/src/components/Report/FinancialStatusReportGen/FinancialStatusReportGen.tsx index 2a4c71e..ce58748 100644 --- a/src/components/Report/FinancialStatusReportGen/FinancialStatusReportGen.tsx +++ b/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 & SubComponents = ({ projects, t const searchCriteria: Criterion[] = 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 & 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"