diff --git a/src/app/(main)/analytics/ProjectMonthlyReport/page.tsx b/src/app/(main)/analytics/ProjectMonthlyReport/page.tsx new file mode 100644 index 0000000..149b7df --- /dev/null +++ b/src/app/(main)/analytics/ProjectMonthlyReport/page.tsx @@ -0,0 +1,28 @@ +import { Metadata } from "next"; +import { Suspense } from "react"; +import { I18nProvider, getServerI18n } from "@/i18n"; +import GenerateProjectMonthlyReport from "@/components/GenerateProjectMonthlyReport"; +import { Typography } from "@mui/material"; + +export const metadata: Metadata = { + title: "Staff Monthly Work Hours Analysis Report", +}; + +const ProjectMonthlyReport: React.FC = async () => { + const { t } = await getServerI18n("report"); + + return ( + <> + + {t("Staff Monthly Work Hours Analysis Report")} + + + }> + + + + + ); +}; + +export default ProjectMonthlyReport; diff --git a/src/app/api/reports/actions.ts b/src/app/api/reports/actions.ts index 994547d..c4fe1cd 100644 --- a/src/app/api/reports/actions.ts +++ b/src/app/api/reports/actions.ts @@ -1,7 +1,7 @@ "use server"; import { serverFetchBlob } from "@/app/utils/fetchUtil"; -import { MonthlyWorkHoursReportRequest, ProjectCashFlowReportRequest, LateStartReportRequest, ProjectResourceOverconsumptionReportRequest, ProjectPandLReportRequest, ProjectCompletionReportRequest, ProjectPotentialDelayReportRequest, CostAndExpenseReportRequest, CrossTeamChargeReportRequest, ProjectManhourSummaryReportRequest } from "."; +import { MonthlyWorkHoursReportRequest, ProjectCashFlowReportRequest, LateStartReportRequest, ProjectResourceOverconsumptionReportRequest, ProjectPandLReportRequest, ProjectCompletionReportRequest, ProjectPotentialDelayReportRequest, CostAndExpenseReportRequest, CrossTeamChargeReportRequest, ProjectManhourSummaryReportRequest, ProjectMonthlyReportRequest } from "."; import { BASE_API_URL } from "@/config/api"; export interface FileResponse { @@ -148,4 +148,18 @@ export const fetchProjectManhourSummaryReport = async (data: ProjectManhourSumma ); return reportBlob -}; \ No newline at end of file +}; + + +export const fetchProjectMonthlyReport = async (data: ProjectMonthlyReportRequest) => { + const reportBlob = await serverFetchBlob( + `${BASE_API_URL}/reports/gen-project-monthly-report`, + { + method: "POST", + body: JSON.stringify(data), + headers: { "Content-Type": "application/json" }, + }, + ); + + return reportBlob +}; diff --git a/src/app/api/reports/index.ts b/src/app/api/reports/index.ts index 7d18325..07f55fb 100644 --- a/src/app/api/reports/index.ts +++ b/src/app/api/reports/index.ts @@ -136,4 +136,15 @@ export interface ProjectManhourSummaryReportRequest { teamId: number; startDate: string; endDate: string; +} + +export interface ProjectMonthlyReportRequest { + projectId: number; + yearMonth: string; + holidays: String[]; +} + +export interface ProjectMonthlyReportFilter { + projects: string[]; + date: string; } \ No newline at end of file diff --git a/src/components/GenerateProjectMonthlyReport/GenerateProjectMonthlyReport.tsx b/src/components/GenerateProjectMonthlyReport/GenerateProjectMonthlyReport.tsx new file mode 100644 index 0000000..1caad76 --- /dev/null +++ b/src/components/GenerateProjectMonthlyReport/GenerateProjectMonthlyReport.tsx @@ -0,0 +1,82 @@ +"use client"; +import React, { useMemo } from "react"; +import SearchBox, { Criterion } from "../SearchBox"; +import { useTranslation } from "react-i18next"; +import { ProjectResult } from "@/app/api/projects"; +import { + fetchProjectMonthlyReport, +} from "@/app/api/reports/actions"; +import { downloadFile } from "@/app/utils/commonUtil"; +import { ProjectMonthlyReportFilter } from "@/app/api/reports"; + + +import dayjs from "dayjs"; +import { getPublicHolidaysForNYears } from "@/app/utils/holidayUtils"; + +interface Props { + projects: ProjectResult[]; + companyHolidays: String[]; +} + +type SearchQuery = Partial>; +type SearchParamNames = keyof SearchQuery; + +const GenerateProjectMonthlyReport: React.FC = ({ projects, companyHolidays }) => { + const { t } = useTranslation("report"); + const projectCombo = projects.map((project) => ({label: `${project.code} - ${project.name}`, value: project.id})) + console.log(companyHolidays) + + const searchCriteria: Criterion[] = useMemo( + () => [ + { + label: t("Project"), + paramName: "projects", + type: "autocomplete", + options: projectCombo, + needAll: false, + }, + { + label: t("Date"), + paramName: "date", + type: "monthYear", + }, + ], + [t] + ); + + return ( + <> + { + + console.log(query); + const yearNeeded = parseInt(dayjs(query.date).format("YYYY")) + const holidayList: String[] = [...getPublicHolidaysForNYears(1, yearNeeded).map((item) => dayjs(item.date).format("DD/MM/YYYY")), ...companyHolidays] + const uniqueHoliday = holidayList.filter((value, index, arr) => index === arr.indexOf(value)); + + let postData = { + projectId: query.projects, + yearMonth: dayjs().format("YYYY-MM").toString(), + holidays: uniqueHoliday + }; + console.log(query.date.length > 0) + if (query.date.length > 0) { + postData.yearMonth = query.date + } + console.log(postData) + const response = await fetchProjectMonthlyReport(postData); + if (response) { + downloadFile( + new Uint8Array(response.blobValue), + response.filename!! + ); + } + }} + /> + + ); +}; + +export default GenerateProjectMonthlyReport; diff --git a/src/components/GenerateProjectMonthlyReport/GenerateProjectMonthlyReportLoading.tsx b/src/components/GenerateProjectMonthlyReport/GenerateProjectMonthlyReportLoading.tsx new file mode 100644 index 0000000..ca17f49 --- /dev/null +++ b/src/components/GenerateProjectMonthlyReport/GenerateProjectMonthlyReportLoading.tsx @@ -0,0 +1,38 @@ +import Card from "@mui/material/Card"; +import CardContent from "@mui/material/CardContent"; +import Skeleton from "@mui/material/Skeleton"; +import Stack from "@mui/material/Stack"; +import React from "react"; + +// Can make this nicer +export const GenerateProjectMonthlyReportLoading: React.FC = () => { + return ( + <> + + + + + + + + + + + + + + + + + + + + ); +}; + +export default GenerateProjectMonthlyReportLoading; \ No newline at end of file diff --git a/src/components/GenerateProjectMonthlyReport/GenerateProjectMonthlyReportWrapper.tsx b/src/components/GenerateProjectMonthlyReport/GenerateProjectMonthlyReportWrapper.tsx new file mode 100644 index 0000000..16aad17 --- /dev/null +++ b/src/components/GenerateProjectMonthlyReport/GenerateProjectMonthlyReportWrapper.tsx @@ -0,0 +1,38 @@ +import React from "react"; +import GenerateProjectMonthlyReportLoading from "./GenerateProjectMonthlyReportLoading"; +import GenerateProjectMonthlyReport from "./GenerateProjectMonthlyReport"; +import { fetchStaff } from "@/app/api/staff"; +import { getServerSession } from "next-auth"; +import { authOptions } from "@/config/authConfig"; +import { TEAM_LEAD } from "@/middleware"; +import { fetchHolidays } from "@/app/api/holidays"; +import { convertDateArrayToString } from "@/app/utils/formatUtil"; +import { fetchProjects } from "@/app/api/projects"; +interface SubComponents { + Loading: typeof GenerateProjectMonthlyReportLoading; +} + +const GenerateProjectMonthlyReportWrapper: React.FC & + SubComponents = async () => { + const session: any = await getServerSession(authOptions); + const teamId = session.staff?.teamId; + const role = session.role; + + const companyHolidays = await fetchHolidays() + let companyHolidaysList: String[] = [] + if (companyHolidays.length > 0) { + companyHolidaysList = companyHolidays.map(item => convertDateArrayToString(item.date, "DD/MM/YYYY")) as String[] + } + console.log(companyHolidaysList) + let projects = await fetchProjects(); + + if (role.includes(TEAM_LEAD)) { + projects = projects.filter((project) => project.teamId === teamId); + } + + return ; +}; + +GenerateProjectMonthlyReportWrapper.Loading = GenerateProjectMonthlyReportLoading; + +export default GenerateProjectMonthlyReportWrapper; diff --git a/src/components/GenerateProjectMonthlyReport/index.ts b/src/components/GenerateProjectMonthlyReport/index.ts new file mode 100644 index 0000000..e6e2425 --- /dev/null +++ b/src/components/GenerateProjectMonthlyReport/index.ts @@ -0,0 +1 @@ +export { default } from "./GenerateProjectMonthlyReportWrapper"; \ No newline at end of file diff --git a/src/components/NavigationContent/NavigationContent.tsx b/src/components/NavigationContent/NavigationContent.tsx index cf72724..d4801f6 100644 --- a/src/components/NavigationContent/NavigationContent.tsx +++ b/src/components/NavigationContent/NavigationContent.tsx @@ -313,10 +313,15 @@ const NavigationContent: React.FC = ({ abilities, username }) => { }, { icon: , - label: "Project Manhour Summary Report", + label: "Project Manhour Summary Monthly Report", path: "/analytics/ProjectManhourSummaryReport", isHidden: false }, + { + icon: , + label: "Project Manhour Summary Daily Report", + path: "/analytics/ProjectMonthlyReport", + }, { icon: , label: "Staff Monthly Work Hours Analysis Report", @@ -333,6 +338,7 @@ const NavigationContent: React.FC = ({ abilities, username }) => { abilities!.includes(ability), ), }, + ], }, {