add report ar01

src/app/(main)/analytics/LateStartReport/page.tsx

@@ -2,7 +2,7 @@
 import { Metadata } from "next";
 import { I18nProvider } from "@/i18n";
 import Typography from "@mui/material/Typography";
-import LateStartReportComponent from "@/components/LateStartReport";
+import LateStartReportComponent from "@/components/Report/LateStartReport";
 
 export const metadata: Metadata = {
   title: "Project Status by Client",

src/app/(main)/analytics/ResourceOvercomsumptionReport/page.tsx

@@ -1,24 +0,0 @@
-//src\app\(main)\analytics\LateStartReport\page.tsx
-import { Metadata } from "next";
-import { I18nProvider } from "@/i18n";
-import Typography from "@mui/material/Typography";
-import LateStartReportComponent from "@/components/LateStartReport";
-
-export const metadata: Metadata = {
-  title: "Project Status by Client",
-};
-
-const ProjectLateReport: React.FC = () => {
-  return (
-    <I18nProvider namespaces={["analytics"]}>
-      <Typography variant="h4" marginInlineEnd={2}>
-      Resource Overconsumption Report
-      </Typography>
-      {/* <Suspense fallback={<ProgressCashFlowSearch.Loading />}>
-        <ProgressCashFlowSearch/>
-      </Suspense> */}
-      <LateStartReportComponent />
-    </I18nProvider>
-  );
-};
-export default ProjectLateReport;

src/app/api/report/index.ts

@@ -18,10 +18,10 @@ export interface LateStart {
 }
 
 export const preloadProjects = () => {
-  fetchProjectsCashFlow();
+  fetchProjectsLateStart();
 };
 
-export const fetchProjectsCashFlow = cache(async () => {
+export const fetchProjectsLateStart = cache(async () => {
   return mockProjects;
 });
 
@@ -38,7 +38,7 @@ const mockProjects: LateStart[] = [
     targetEndDate: "30/3/2024",
     client: "ss",
     subsidiary: "sus",
-    nextstage:"s1",
+    nextstage:"",
     nextstageenddate:"30/2/2024",
   },
 ];

src/components/LateStartReportGen/DownloadReportButton.tsx

@@ -1,40 +0,0 @@
-// DownloadReportButton.tsx
-// import React, { useState } from 'react';
-// import { generateFakeData } from '../utils/generateFakeData';
-// import { downloadExcel } from '../utils/downloadExcel';
-
-// export const DownloadReportButton: React.FC = () => {
-//     const [isLoading, setIsLoading] = useState(false);
-  
-//     const handleDownload = async () => {
-//       setIsLoading(true);
-//       const data = generateFakeData(10);
-//       downloadExcel(data);
-//       setIsLoading(false);
-//     };
-  
-//     return (
-//       <button onClick={handleDownload} disabled={isLoading}>
-//         {isLoading ? 'Generating...' : 'Download Report'}
-//       </button>
-//     );
-//   };
-
-import React from 'react';
-
-export const DownloadReportButton: React.FC = () => {
-  const handleDownload = () => {
-    const link = document.createElement('a');
-    link.href = '/temp/AR01_Late Start Report.xlsx';  // Adjust the path as necessary
-    link.download = 'AR01_Late Start Report.xlsx';
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  };
-
-  return (
-    <button onClick={handleDownload}>
-      Download Report
-    </button>
-  );
-};

src/components/LateStartReport/LateStartReport.tsx → src/components/Report/LateStartReport/LateStartReport.tsx

@@ -1,9 +1,9 @@
 //src\components\LateStartReport\LateStartReport.tsx
 "use client";
 import * as React from "react";
-import "../../app/global.css";
+import "../../../app/global.css";
 import { Suspense } from "react";
-import LateStartReportGen from "@/components/LateStartReportGen";
+import LateStartReportGen from "@/components/Report/LateStartReportGen";
 
 const LateStartReport: React.FC = () => {
 

src/components/Report/LateStartReportGen/DownloadReportButton.tsx

@@ -0,0 +1,137 @@
+// DownloadReportButton.tsx
+import React, { useState } from 'react';
+import * as XLSX from 'xlsx-js-style';
+//import { generateFakeData } from '../utils/generateFakeData';
+//import { downloadExcel } from '../utils/downloadExcel';
+
+interface CellObject {
+    v?: string | number; // value of cell
+    s?: {               // style of cell
+      font?: {
+        name: string;
+        sz: number;
+        bold?: boolean;
+      }
+    };
+  }
+  
+export const DownloadReportButton: React.FC = () => {
+    const [isLoading, setIsLoading] = useState(false);
+  
+    const handleDownload = async () => {
+      setIsLoading(true);
+  
+      try {
+        const response = await fetch('/temp/AR01_Late Start Report.xlsx', {
+          headers: {
+            'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+          },
+        });
+        if (!response.ok) throw new Error('Network response was not ok.');
+  
+        const data = await response.blob();
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          if (e.target && e.target.result) {
+            const ab = e.target.result as ArrayBuffer;
+            const workbook = XLSX.read(ab, { type: 'array' });
+            const firstSheetName = workbook.SheetNames[0];
+            const worksheet = workbook.Sheets[firstSheetName];
+            
+            // Add the current date to cell C2
+            const cellAddress = 'C2';
+            const date = new Date().toISOString().split('T')[0]; // Format YYYY-MM-DD
+            const formattedDate = date.replace(/-/g, '/'); // Change format to YYYY/MM/DD
+            XLSX.utils.sheet_add_aoa(worksheet, [[formattedDate]], { origin: cellAddress });
+
+            // Calculate the maximum length of content in each column and set column width
+          const colWidths: number[] = [];
+
+          const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, defval: "", blankrows: true }) as (string | number)[][];
+          jsonData.forEach((row: (string | number)[]) => {
+            row.forEach((cell: string | number, index: number) => {
+              const valueLength = cell.toString().length;
+              colWidths[index] = Math.max(colWidths[index] || 0, valueLength);
+            });
+          });
+
+          // Apply calculated widths to each column, skipping column A
+          worksheet['!cols'] = colWidths.map((width, index) => {
+            if (index === 0) {
+              return { wch: 8 }; // Set default or specific width for column A if needed
+            }
+            return { wch: width + 2 }; // Add padding to width
+          });
+
+            // Style for cell A1: Font size 16 and bold
+          if (worksheet['A1']) {
+            worksheet['A1'].s = {
+              font: {
+                bold: true,
+                sz: 16,  // Font size 16
+                //name: 'Times New Roman' // Specify font
+              }
+            };
+          }
+
+            // Apply styles from A2 to A4 (bold)
+          ['A2', 'A3', 'A4'].forEach(cell => {
+            if (worksheet[cell]) {
+              worksheet[cell].s = { font: { bold: true } };
+            }
+          });
+
+          // Formatting from A6 to J6
+          // Apply styles from A6 to J6 (bold, bottom border, center alignment)
+          for (let col = 0; col < 10; col++) { // Columns A to J
+            const cellRef = XLSX.utils.encode_col(col) + '6';
+            if (worksheet[cellRef]) {
+              worksheet[cellRef].s = {
+                font: { bold: true },
+                alignment: { horizontal: 'center' },
+                border: {
+                  bottom: { style: 'thin', color: { auto: 1 } }
+                }
+              };
+            }
+          }
+  
+            // Convert workbook back to XLSX file
+            XLSX.writeFile(workbook, 'Updated_Report.xlsx');
+          } else {
+            throw new Error('Failed to load file');
+          }
+        };
+        reader.readAsArrayBuffer(data);
+      } catch (error) {
+        console.error('Error downloading the file: ', error);
+      }
+  
+      setIsLoading(false);
+    };
+  
+    return (
+      <button onClick={handleDownload} disabled={isLoading}>
+        {isLoading ? 'Processing...' : 'Download Updated Report'}
+      </button>
+    );
+  };
+
+// import React from 'react';
+
+// export const DownloadReportButton: React.FC = () => {
+//   const handleDownload = () => {
+//     const link = document.createElement('a');
+//     link.href = '/temp/AR01_Late Start Report.xlsx';  // Adjust the path as necessary
+//     link.download = 'AR01_Late Start Report.xlsx';
+//     document.body.appendChild(link);
+//     link.click();
+//     document.body.removeChild(link);
+//   };
+
+//   return (
+//     <button onClick={handleDownload}>
+//       Download Report
+//     </button>
+//   );
+// };

src/components/LateStartReportGen/LateStartReportGen.tsx → src/components/Report/LateStartReportGen/LateStartReportGen.tsx

@@ -1,14 +1,14 @@
 //src\components\LateStartReportGen\LateStartReportGen.tsx
 "use client";
 import React, { useMemo, useState } from "react";
-import SearchBox, { Criterion } from "../SearchBox";
+import SearchBox, { Criterion } from "../../ReportSearchBox";
 import { useTranslation } from "react-i18next";
-import { CashFlow } from "@/app/api/cashflow";
-import { DownloadReportButton } from './DownloadReportButton';
+import { LateStart } from "@/app/api/report";
+//import { DownloadReportButton } from './DownloadReportButton';
 interface Props {
-  projects: CashFlow[];
+  projects: LateStart[];
 }
-type SearchQuery = Partial<Omit<CashFlow, "id">>;
+type SearchQuery = Partial<Omit<LateStart, "id">>;
 type SearchParamNames = keyof SearchQuery;
 
 const ProgressByClientSearch: React.FC<Props> = ({ projects }) => {
@@ -36,7 +36,7 @@ const ProgressByClientSearch: React.FC<Props> = ({ projects }) => {
           console.log(query);
         }}
       />
-      <DownloadReportButton />
+      {/* <DownloadReportButton /> */}
     </>
   );
 };

src/components/LateStartReportGen/LateStartReportGenWrapper.tsx → src/components/Report/LateStartReportGen/LateStartReportGenWrapper.tsx

@@ -1,5 +1,5 @@
 //src\components\LateStartReportGen\LateStartReportGenWrapper.tsx
-import { fetchProjectsCashFlow } from "@/app/api/cashflow";
+import { fetchProjectsLateStart } from "@/app/api/report";
 import React from "react";
 import LateStartReportGen from "./LateStartReportGen";
 import LateStartReportGenLoading from "./LateStartReportGenLoading";
@@ -9,7 +9,7 @@ interface SubComponents {
 }
 
 const LateStartReportGenWrapper: React.FC & SubComponents = async () => {
-  const clentprojects = await fetchProjectsCashFlow();
+  const clentprojects = await fetchProjectsLateStart();
 
   return <LateStartReportGen projects={clentprojects} />;
 };

src/components/ReportSearchBox/SearchBox.tsx

@@ -1,3 +1,4 @@
+//src\components\ReportSearchBox\SearchBox.tsx
 "use client";
 
 import Grid from "@mui/material/Grid";
@@ -21,6 +22,8 @@ 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 * as XLSX from 'xlsx-js-style';
+//import { DownloadReportButton } from '../LateStartReportGen/DownloadReportButton';
 
 interface BaseCriterion<T extends string> {
   label: string;
@@ -108,8 +111,104 @@ function SearchBox<T extends string>({
 
   const handleSearch = () => {
     onSearch(inputs);
+    
   };
+  
+  const handleDownload = async () => {
+    //setIsLoading(true);
 
+    try {
+      const response = await fetch('/temp/AR01_Late Start Report.xlsx', {
+        headers: {
+          'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        },
+      });
+      if (!response.ok) throw new Error('Network response was not ok.');
+
+      const data = await response.blob();
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        if (e.target && e.target.result) {
+          const ab = e.target.result as ArrayBuffer;
+          const workbook = XLSX.read(ab, { type: 'array' });
+          const firstSheetName = workbook.SheetNames[0];
+          const worksheet = workbook.Sheets[firstSheetName];
+          
+          // Add the current date to cell C2
+          const cellAddress = 'C2';
+          const date = new Date().toISOString().split('T')[0]; // Format YYYY-MM-DD
+          const formattedDate = date.replace(/-/g, '/'); // Change format to YYYY/MM/DD
+          XLSX.utils.sheet_add_aoa(worksheet, [[formattedDate]], { origin: cellAddress });
+
+          // Calculate the maximum length of content in each column and set column width
+        const colWidths: number[] = [];
+
+        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, defval: "", blankrows: true }) as (string | number)[][];
+        jsonData.forEach((row: (string | number)[]) => {
+          row.forEach((cell: string | number, index: number) => {
+            const valueLength = cell.toString().length;
+            colWidths[index] = Math.max(colWidths[index] || 0, valueLength);
+          });
+        });
+
+        // Apply calculated widths to each column, skipping column A
+        worksheet['!cols'] = colWidths.map((width, index) => {
+          if (index === 0) {
+            return { wch: 8 }; // Set default or specific width for column A if needed
+          }
+          return { wch: width + 2 }; // Add padding to width
+        });
+
+          // Style for cell A1: Font size 16 and bold
+        if (worksheet['A1']) {
+          worksheet['A1'].s = {
+            font: {
+              bold: true,
+              sz: 16,  // Font size 16
+              //name: 'Times New Roman' // Specify font
+            }
+          };
+        }
+
+          // Apply styles from A2 to A4 (bold)
+        ['A2', 'A3', 'A4'].forEach(cell => {
+          if (worksheet[cell]) {
+            worksheet[cell].s = { font: { bold: true } };
+          }
+        });
+
+        // Formatting from A6 to J6
+        // Apply styles from A6 to J6 (bold, bottom border, center alignment)
+        for (let col = 0; col < 10; col++) { // Columns A to J
+          const cellRef = XLSX.utils.encode_col(col) + '6';
+          if (worksheet[cellRef]) {
+            worksheet[cellRef].s = {
+              font: { bold: true },
+              alignment: { horizontal: 'center' },
+              border: {
+                bottom: { style: 'thin', color: { auto: 1 } }
+              }
+            };
+          }
+        }
+
+        // Format filename with date
+        const today = new Date().toISOString().split('T')[0].replace(/-/g, '_'); // Get current date and format as YYYY_MM_DD
+        const filename = `AR01_Late_Start_Report_${today}.xlsx`; // Append formatted date to the filename
+
+          // Convert workbook back to XLSX file
+          XLSX.writeFile(workbook, filename);
+        } else {
+          throw new Error('Failed to load file');
+        }
+      };
+      reader.readAsArrayBuffer(data);
+    } catch (error) {
+      console.error('Error downloading the file: ', error);
+    }
+
+    //setIsLoading(false);
+  };
   return (
     <Card>
       <CardContent sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
@@ -188,9 +287,9 @@ function SearchBox<T extends string>({
             <Button
               variant="outlined"
               startIcon={<Search />}
-              onClick={handleSearch}
+              onClick={handleDownload}
             >
-              {t("Search")}
+              {t("Download Report")}
             </Button>
           </CardActions>
       </CardContent>

src/components/SearchBox/index.ts

@@ -1,2 +1,3 @@
+//src\components\SearchBox\index.ts
 export { default } from "./SearchBox";
 export type { Criterion } from "./SearchBox";