report 01 update

src/app/api/reports/actions.ts

@@ -35,15 +35,31 @@ export const fetchMonthlyWorkHoursReport = async (data: MonthlyWorkHoursReportRe
     return reportBlob
 };
 
+// export const fetchLateStartReport = async (data: LateStartReportRequest) => {
+//     const response  = await serverFetchBlob<FileResponse>(
+//         `${BASE_API_URL}/reports/downloadLateStartReport`,
+//         {
+//             method: "POST",
+//             body: JSON.stringify(data),
+//             headers: { "Content-Type": "application/json" },
+//         },
+//     );
+
+//     return response;
+// };
+
 export const fetchLateStartReport = async (data: LateStartReportRequest) => {
-    const reportBlob = await serverFetchBlob<FileResponse>(
-        `${BASE_API_URL}/reports/downloadLateStartReport`,
-        {
-            method: "POST",
-            body: JSON.stringify(data),
-            headers: { "Content-Type": "application/json" },
-        },
-    );
+    const response = await fetch(`${BASE_API_URL}/reports/downloadLateStartReport`, {
+        method: "POST",
+        body: JSON.stringify(data),
+        headers: { "Content-Type": "application/json" },
+    });
+    if (!response.ok) {
+        const errorText = await response.text(); // Attempt to read the response text
+        throw new Error(`Network response was not ok: ${response.status} - ${errorText}`);
+    }
+    const blob = await response.blob();
+    return { fileBlob: blob, fileName: 'Late_Start_Report.xlsx' }; 
+    
+};
 
-    return reportBlob
-};

src/app/api/reports/index.ts

@@ -31,7 +31,7 @@ export interface LateStartReportFilter {
 }
 
 export interface LateStartReportRequest {
-    team: string[];
-    client: string[];
+    team: string;
+    client: string;
     date: any;
 }

src/app/api/team/index.ts

@@ -3,34 +3,46 @@ import { BASE_API_URL } from "@/config/api";
 import { cache } from "react";
 import "server-only";
 
-
 export interface TeamResult {
-    action: any;
-    id: number;
-    teamId: number;
-    name: string;
-    code: string;
-    description: string;
-    staffId: string;
-    staffName: string;
-    posLabel: string;
-    posCode: string;
-    teamLead: number;
-
-  }
-  
+  action: any;
+  id: number;
+  teamId: number;
+  name: string;
+  code: string;
+  description: string;
+  staffId: string;
+  staffName: string;
+  posLabel: string;
+  posCode: string;
+  teamLead: number;
+
+}
+
+export interface comboProp {
+  id: any;
+  label: string;
+}
+
+export interface combo {
+  records: comboProp[];
+}
+
 export const fetchTeam = cache(async () => {
-    return serverFetchJson<TeamResult[]>(`${BASE_API_URL}/team`, {
-      next: { tags: ["team"] },
-    });
+  return serverFetchJson<TeamResult[]>(`${BASE_API_URL}/team`, {
+    next: { tags: ["team"] },
   });
+});
 
-  export const preloadTeamDetail = () => {
-    fetchTeamDetail();
-  };
+export const preloadTeamDetail = () => {
+  fetchTeamDetail();
+};
 
 export const fetchTeamDetail = cache(async () => {
-    return serverFetchJson<TeamResult[]>(`${BASE_API_URL}/team/detail`, {
-      next: { tags: ["team"] },
-    });
-  });
+  return serverFetchJson<TeamResult[]>(`${BASE_API_URL}/team/detail`, {
+    next: { tags: ["team"] },
+  });
+});
+
+export const fetchTeamCombo = cache(async () => {
+  return serverFetchJson<combo>(`${BASE_API_URL}/team/combo`);
+});

src/components/Report/LateStartReportGen/LateStartReportGen.tsx

@@ -1,12 +1,13 @@
 //src\components\LateStartReportGen\LateStartReportGen.tsx
 "use client";
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import SearchBox, { Criterion } from "../ReportSearchBox";
 import { useTranslation } from "react-i18next";
 import { LateStart } from "@/app/api/report";
 //import { DownloadReportButton } from './DownloadReportButton';
 // import axios from 'axios';
 import { apiPath } from '../../../auth/utils';
+import { fetchTeamCombo } from "@/app/api/team/actions";
 //import { GET_QC_CATEGORY_COMBO } from 'utils/ApiPathConst';
 interface Props {
   projects: LateStart[];
@@ -16,6 +17,9 @@ type SearchParamNames = keyof SearchQuery;
 
 const ProgressByClientSearch: React.FC<Props> = ({ projects }) => {
   const { t } = useTranslation("projects");
+  const [teamCombo, setteamCombo] = useState<string[]>([])
+  const [clientCombo, setclientCombo] = useState<string[]>([])
+  const [isLoading, setIsLoading] = useState(true)
   // const  [teamCombo, setteamCombo] = useState([]);
   // const getteamCombo = () => {
   //   axios.get(`${apiPath}${GET_QC_CATEGORY_COMBO}`)
@@ -25,9 +29,32 @@ const ProgressByClientSearch: React.FC<Props> = ({ projects }) => {
   //     console.error('Error fetching data: ', error);
   //   });
   // }
+
+  const getTeamCombo = async() => {
+    try {
+      const response = await fetchTeamCombo()
+      setteamCombo(response.records.map(record => record.label))
+      setIsLoading(false)
+    } catch (err) {
+      console.log(err)
+    }
+  }
+  // const getClientCombo = async() => {
+  //   try {
+  //     const response = await fetchCombo()
+  //     setclientCombo(response.records.map(record => record.label))
+  //     setIsLoading(false)
+  //   } catch (err) {
+  //     console.log(err)
+  //   }
+  // }
+  useEffect(() => {
+    getTeamCombo()
+  }, [])
+
   const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
     () => [
-      { label: "Team", paramName: "team", type: "select", options: ["AAA", "BBB", "CCC"] },
+      { label: "Team", paramName: "team", type: "select", options: teamCombo },
       { label: "Client", paramName: "client", type: "select", options: ["Cust A", "Cust B", "Cust C"] },
       {
         label: "Remained Date From",
@@ -36,17 +63,17 @@ const ProgressByClientSearch: React.FC<Props> = ({ projects }) => {
         type: "dateRange",
       },
     ],
-    [t],
+    [t, teamCombo],
   );
 
   return (
     <>
-      <SearchBox
+      {!isLoading && <SearchBox
         criteria={searchCriteria}
         onSearch={(query) => {
           console.log(query);
         }}
-      />
+      />}
       {/* <DownloadReportButton /> */}
     </>
   );

src/components/Report/LateStartReportGen/LateStartReportGenWrapper.tsx

@@ -11,7 +11,7 @@ interface SubComponents {
 const LateStartReportGenWrapper: React.FC & SubComponents = async () => {
   const clentprojects = await fetchProjectsLateStart();
 
-  return <LateStartReportGen projects={clentprojects} />;
+  return <LateStartReportGen projects={clentprojects}/>;
 };
 
 LateStartReportGenWrapper.Loading = LateStartReportGenLoading;

src/components/Report/ReportSearchBox/SearchBox.tsx

@@ -22,7 +22,10 @@ import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { Box } from "@mui/material";
+import { fetchLateStartReport } from "@/app/api/reports/actions";
 import * as XLSX from 'xlsx-js-style';
+import { LateStartReportRequest } from "@/app/api/reports";
+import { fetchTeamCombo } from "@/app/api/team/actions";
 //import { DownloadReportButton } from '../LateStartReportGen/DownloadReportButton';
 
 interface BaseCriterion<T extends string> {
@@ -113,25 +116,39 @@ function SearchBox<T extends string>({
     onSearch(inputs);
     
   };
+
+  
+  //fetchLateStartReport
   const handleDownload = async () => {
     try {
-      const response = await fetch('/api/reports', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ projectId: '123' }),  // Example payload
-      });
-      if (!response.ok) throw new Error('Network response was not ok.');
+      // Create a request object, which includes the projectId
+      const abc = await fetchTeamCombo()
+
+      //console.log(abc.records)
+      const requestData: LateStartReportRequest = {
+        team: 'Your Team Name',   // Example value, adjust as necessary
+        client: 'Client Name',    // Example value, adjust as necessary
+        date: new Date().toISOString() // Current date in ISO format, adjust as necessary
+    };
+    
+      // Call fetchLateStartReport and wait for the blob
+      //const responseBlob = await fetchLateStartReport(requestData);
+      const fileResponse = await fetchLateStartReport(requestData);
+    const blob = fileResponse.fileBlob;
   
-      const data = await response.blob();
-      const url = window.URL.createObjectURL(data);
+      // Create a URL from the Blob response
+      const url = window.URL.createObjectURL(blob);
+  
+      // Create an anchor element and trigger the download
       const a = document.createElement('a');
       a.href = url;
-      a.download = "Project_Cash_Flow_Report.xlsx";
+      a.download = "Late_Start_Report.xlsx"; // Set the filename for download
       document.body.appendChild(a);
       a.click();
       a.remove();
+  
+      // Optionally revoke the URL if you want to free up resources
+      window.URL.revokeObjectURL(url);
     } catch (error) {
       console.error('Error downloading the file: ', error);
     }