diff --git a/public/temp/AR01_Late Start Report.xlsx b/public/temp/AR01_Late Start Report.xlsx index 03d6b6b..24da97f 100644 Binary files a/public/temp/AR01_Late Start Report.xlsx and b/public/temp/AR01_Late Start Report.xlsx differ diff --git a/public/temp/AR02_Delay Report.xlsx b/public/temp/AR02_Delay Report.xlsx new file mode 100644 index 0000000..a8c53a8 Binary files /dev/null and b/public/temp/AR02_Delay Report.xlsx differ diff --git a/src/app/(main)/analytics/LateStartReport/page.tsx b/src/app/(main)/analytics/LateStartReport/page.tsx index 7f4ade5..23bdcfb 100644 --- a/src/app/(main)/analytics/LateStartReport/page.tsx +++ b/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", diff --git a/src/app/(main)/analytics/ResourceOvercomsumptionReport/page.tsx b/src/app/(main)/analytics/ResourceOvercomsumptionReport/page.tsx deleted file mode 100644 index 4f5c75a..0000000 --- a/src/app/(main)/analytics/ResourceOvercomsumptionReport/page.tsx +++ /dev/null @@ -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 ( - - - Resource Overconsumption Report - - {/* }> - - */} - - - ); -}; -export default ProjectLateReport; diff --git a/src/app/api/report/index.ts b/src/app/api/report/index.ts index 588692c..3eeab3d 100644 --- a/src/app/api/report/index.ts +++ b/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", }, ]; diff --git a/src/components/LateStartReportGen/DownloadReportButton.tsx b/src/components/LateStartReportGen/DownloadReportButton.tsx deleted file mode 100644 index b838fba..0000000 --- a/src/components/LateStartReportGen/DownloadReportButton.tsx +++ /dev/null @@ -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 ( -// -// ); -// }; - -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 ( - - ); -}; \ No newline at end of file diff --git a/src/components/LateStartReport/LateStartReport.tsx b/src/components/Report/LateStartReport/LateStartReport.tsx similarity index 68% rename from src/components/LateStartReport/LateStartReport.tsx rename to src/components/Report/LateStartReport/LateStartReport.tsx index 85df0b9..eee4e56 100644 --- a/src/components/LateStartReport/LateStartReport.tsx +++ b/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 = () => { diff --git a/src/components/LateStartReport/index.ts b/src/components/Report/LateStartReport/index.ts similarity index 100% rename from src/components/LateStartReport/index.ts rename to src/components/Report/LateStartReport/index.ts diff --git a/src/components/Report/LateStartReportGen/DownloadReportButton.tsx b/src/components/Report/LateStartReportGen/DownloadReportButton.tsx new file mode 100644 index 0000000..33691c0 --- /dev/null +++ b/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 ( + + ); + }; + +// 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 ( +// +// ); +// }; \ No newline at end of file diff --git a/src/components/LateStartReportGen/LateStartReportGen.tsx b/src/components/Report/LateStartReportGen/LateStartReportGen.tsx similarity index 76% rename from src/components/LateStartReportGen/LateStartReportGen.tsx rename to src/components/Report/LateStartReportGen/LateStartReportGen.tsx index 8ebfae2..81ff1a0 100644 --- a/src/components/LateStartReportGen/LateStartReportGen.tsx +++ b/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>; +type SearchQuery = Partial>; type SearchParamNames = keyof SearchQuery; const ProgressByClientSearch: React.FC = ({ projects }) => { @@ -36,7 +36,7 @@ const ProgressByClientSearch: React.FC = ({ projects }) => { console.log(query); }} /> - + {/* */} ); }; diff --git a/src/components/LateStartReportGen/LateStartReportGenLoading.tsx b/src/components/Report/LateStartReportGen/LateStartReportGenLoading.tsx similarity index 100% rename from src/components/LateStartReportGen/LateStartReportGenLoading.tsx rename to src/components/Report/LateStartReportGen/LateStartReportGenLoading.tsx diff --git a/src/components/LateStartReportGen/LateStartReportGenWrapper.tsx b/src/components/Report/LateStartReportGen/LateStartReportGenWrapper.tsx similarity index 75% rename from src/components/LateStartReportGen/LateStartReportGenWrapper.tsx rename to src/components/Report/LateStartReportGen/LateStartReportGenWrapper.tsx index 5ba8325..2ea7f26 100644 --- a/src/components/LateStartReportGen/LateStartReportGenWrapper.tsx +++ b/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 ; }; diff --git a/src/components/LateStartReportGen/index.ts b/src/components/Report/LateStartReportGen/index.ts similarity index 100% rename from src/components/LateStartReportGen/index.ts rename to src/components/Report/LateStartReportGen/index.ts diff --git a/src/components/ReportSearchBox/SearchBox.tsx b/src/components/ReportSearchBox/SearchBox.tsx index fe058f7..6ca34f1 100644 --- a/src/components/ReportSearchBox/SearchBox.tsx +++ b/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 { label: string; @@ -108,8 +111,104 @@ function SearchBox({ 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 ( @@ -188,9 +287,9 @@ function SearchBox({ diff --git a/src/components/SearchBox/index.ts b/src/components/SearchBox/index.ts index c4da6a2..37a0659 100644 --- a/src/components/SearchBox/index.ts +++ b/src/components/SearchBox/index.ts @@ -1,2 +1,3 @@ +//src\components\SearchBox\index.ts export { default } from "./SearchBox"; export type { Criterion } from "./SearchBox";