From b612d7fbd11d185e485cd5b328a050b8a8583d11 Mon Sep 17 00:00:00 2001
From: leoho2fi <leo.ho@2fi-solutions.com.hk>
Date: Thu, 18 Apr 2024 17:10:38 +0800
Subject: [PATCH] add report page

---
 package.json                                  |   4 +-
 public/temp/AR01_Late Start Report.xlsx       | Bin 0 -> 12581 bytes
 .../analytics/CostandExpenseReport/page.tsx   |  24 +++
 src/app/(main)/analytics/DelayReport/page.tsx |  24 +++
 .../(main)/analytics/LateStartReport/page.tsx |  24 +++
 .../ProjectCompletionReport/page.tsx          |  24 +++
 .../ProjectCompletionReportWO/page.tsx        |  24 +++
 .../ResourceOvercomsumptionReport/page.tsx    |  24 +++
 src/app/(main)/analytics/page.tsx             |   4 +-
 src/app/api/report/index.ts                   |  44 ++++
 .../LateStartReport/LateStartReport.tsx       |  17 ++
 src/components/LateStartReport/index.ts       |   2 +
 .../DownloadReportButton.tsx                  |  40 ++++
 .../LateStartReportGen/LateStartReportGen.tsx |  44 ++++
 .../LateStartReportGenLoading.tsx             |  41 ++++
 .../LateStartReportGenWrapper.tsx             |  19 ++
 src/components/LateStartReportGen/index.ts    |   2 +
 src/components/ReportSearchBox/SearchBox.tsx  | 201 ++++++++++++++++++
 src/components/ReportSearchBox/index.ts       |   3 +
 src/components/utils/downloadExcel.ts         |   9 +
 src/components/utils/generateFakeData.ts      |  40 ++++
 21 files changed, 612 insertions(+), 2 deletions(-)
 create mode 100644 public/temp/AR01_Late Start Report.xlsx
 create mode 100644 src/app/(main)/analytics/CostandExpenseReport/page.tsx
 create mode 100644 src/app/(main)/analytics/DelayReport/page.tsx
 create mode 100644 src/app/(main)/analytics/LateStartReport/page.tsx
 create mode 100644 src/app/(main)/analytics/ProjectCompletionReport/page.tsx
 create mode 100644 src/app/(main)/analytics/ProjectCompletionReportWO/page.tsx
 create mode 100644 src/app/(main)/analytics/ResourceOvercomsumptionReport/page.tsx
 create mode 100644 src/app/api/report/index.ts
 create mode 100644 src/components/LateStartReport/LateStartReport.tsx
 create mode 100644 src/components/LateStartReport/index.ts
 create mode 100644 src/components/LateStartReportGen/DownloadReportButton.tsx
 create mode 100644 src/components/LateStartReportGen/LateStartReportGen.tsx
 create mode 100644 src/components/LateStartReportGen/LateStartReportGenLoading.tsx
 create mode 100644 src/components/LateStartReportGen/LateStartReportGenWrapper.tsx
 create mode 100644 src/components/LateStartReportGen/index.ts
 create mode 100644 src/components/ReportSearchBox/SearchBox.tsx
 create mode 100644 src/components/ReportSearchBox/index.ts
 create mode 100644 src/components/utils/downloadExcel.ts
 create mode 100644 src/components/utils/generateFakeData.ts

diff --git a/package.json b/package.json
index 5db5867..2578a2f 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@faker-js/faker": "^8.4.1",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/plus-jakarta-sans": "^5.0.18",
     "@mui/icons-material": "^5.15.0",
@@ -38,7 +39,8 @@
     "react-select": "^5.8.0",
     "reactstrap": "^9.2.2",
     "styled-components": "^6.1.8",
-    "sweetalert2": "^11.10.3"
+    "sweetalert2": "^11.10.3",
+    "xlsx-js-style": "^1.2.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.202",
diff --git a/public/temp/AR01_Late Start Report.xlsx b/public/temp/AR01_Late Start Report.xlsx
new file mode 100644
index 0000000000000000000000000000000000000000..03d6b6b9e3c5bfedd5dfc213cb61cad67522123d
GIT binary patch
literal 12581
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

literal 0
HcmV?d00001

diff --git a/src/app/(main)/analytics/CostandExpenseReport/page.tsx b/src/app/(main)/analytics/CostandExpenseReport/page.tsx
new file mode 100644
index 0000000..2f046c3
--- /dev/null
+++ b/src/app/(main)/analytics/CostandExpenseReport/page.tsx
@@ -0,0 +1,24 @@
+//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}>
+      Cost and Expense Report
+      </Typography>
+      {/* <Suspense fallback={<ProgressCashFlowSearch.Loading />}>
+        <ProgressCashFlowSearch/>
+      </Suspense> */}
+      <LateStartReportComponent />
+    </I18nProvider>
+  );
+};
+export default ProjectLateReport;
diff --git a/src/app/(main)/analytics/DelayReport/page.tsx b/src/app/(main)/analytics/DelayReport/page.tsx
new file mode 100644
index 0000000..154fd58
--- /dev/null
+++ b/src/app/(main)/analytics/DelayReport/page.tsx
@@ -0,0 +1,24 @@
+//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}>
+     Delay Report
+      </Typography>
+      {/* <Suspense fallback={<ProgressCashFlowSearch.Loading />}>
+        <ProgressCashFlowSearch/>
+      </Suspense> */}
+      <LateStartReportComponent />
+    </I18nProvider>
+  );
+};
+export default ProjectLateReport;
diff --git a/src/app/(main)/analytics/LateStartReport/page.tsx b/src/app/(main)/analytics/LateStartReport/page.tsx
new file mode 100644
index 0000000..7f4ade5
--- /dev/null
+++ b/src/app/(main)/analytics/LateStartReport/page.tsx
@@ -0,0 +1,24 @@
+//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}>
+     Late Start Report
+      </Typography>
+      {/* <Suspense fallback={<ProgressCashFlowSearch.Loading />}>
+        <ProgressCashFlowSearch/>
+      </Suspense> */}
+      <LateStartReportComponent />
+    </I18nProvider>
+  );
+};
+export default ProjectLateReport;
diff --git a/src/app/(main)/analytics/ProjectCompletionReport/page.tsx b/src/app/(main)/analytics/ProjectCompletionReport/page.tsx
new file mode 100644
index 0000000..c938efc
--- /dev/null
+++ b/src/app/(main)/analytics/ProjectCompletionReport/page.tsx
@@ -0,0 +1,24 @@
+//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}>
+      Project Completion Report
+      </Typography>
+      {/* <Suspense fallback={<ProgressCashFlowSearch.Loading />}>
+        <ProgressCashFlowSearch/>
+      </Suspense> */}
+      <LateStartReportComponent />
+    </I18nProvider>
+  );
+};
+export default ProjectLateReport;
diff --git a/src/app/(main)/analytics/ProjectCompletionReportWO/page.tsx b/src/app/(main)/analytics/ProjectCompletionReportWO/page.tsx
new file mode 100644
index 0000000..5b914ad
--- /dev/null
+++ b/src/app/(main)/analytics/ProjectCompletionReportWO/page.tsx
@@ -0,0 +1,24 @@
+//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}>
+      Project Completion Report with Outstanding Un-billed Hours
+      </Typography>
+      {/* <Suspense fallback={<ProgressCashFlowSearch.Loading />}>
+        <ProgressCashFlowSearch/>
+      </Suspense> */}
+      <LateStartReportComponent />
+    </I18nProvider>
+  );
+};
+export default ProjectLateReport;
diff --git a/src/app/(main)/analytics/ResourceOvercomsumptionReport/page.tsx b/src/app/(main)/analytics/ResourceOvercomsumptionReport/page.tsx
new file mode 100644
index 0000000..4f5c75a
--- /dev/null
+++ b/src/app/(main)/analytics/ResourceOvercomsumptionReport/page.tsx
@@ -0,0 +1,24 @@
+//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;
diff --git a/src/app/(main)/analytics/page.tsx b/src/app/(main)/analytics/page.tsx
index 9ca9a24..d20fa34 100644
--- a/src/app/(main)/analytics/page.tsx
+++ b/src/app/(main)/analytics/page.tsx
@@ -1,3 +1,4 @@
+//src\app\(main)\analytics\page.tsx
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -5,7 +6,8 @@ export const metadata: Metadata = {
 };
 
 const Analytics: React.FC = async () => {
-  return "Analytics";
+  //return "Analytics";
+  return <div>Analytics</div>;
 };
 
 export default Analytics;
diff --git a/src/app/api/report/index.ts b/src/app/api/report/index.ts
new file mode 100644
index 0000000..588692c
--- /dev/null
+++ b/src/app/api/report/index.ts
@@ -0,0 +1,44 @@
+//src\app\api\report\index.ts
+import { cache } from "react";
+
+export interface LateStart {
+  id: number;
+  projectCode: string;
+  projectName: string;
+  team: string;
+  teamLeader: string;
+  startDate: string;
+  startDateFrom: string;
+  startDateTo: string;
+  targetEndDate: string;
+  client: string;
+  subsidiary: string;
+  nextstage: string;
+  nextstageenddate: string;
+}
+
+export const preloadProjects = () => {
+  fetchProjectsCashFlow();
+};
+
+export const fetchProjectsCashFlow = cache(async () => {
+  return mockProjects;
+});
+
+const mockProjects: LateStart[] = [
+  {
+    id: 1,
+    projectCode: "CUST-001",
+    projectName: "Client A",
+    team: "N/A",
+    teamLeader: "N/A",
+    startDate: "1/2/2024",
+    startDateFrom: "1/2/2024",
+    startDateTo: "1/2/2024",
+    targetEndDate: "30/3/2024",
+    client: "ss",
+    subsidiary: "sus",
+    nextstage:"s1",
+    nextstageenddate:"30/2/2024",
+  },
+];
diff --git a/src/components/LateStartReport/LateStartReport.tsx b/src/components/LateStartReport/LateStartReport.tsx
new file mode 100644
index 0000000..85df0b9
--- /dev/null
+++ b/src/components/LateStartReport/LateStartReport.tsx
@@ -0,0 +1,17 @@
+//src\components\LateStartReport\LateStartReport.tsx
+"use client";
+import * as React from "react";
+import "../../app/global.css";
+import { Suspense } from "react";
+import LateStartReportGen from "@/components/LateStartReportGen";
+
+const LateStartReport: React.FC = () => {
+
+  return (
+      <Suspense fallback={<LateStartReportGen.Loading />}>
+        <LateStartReportGen />
+      </Suspense>
+  );
+};
+
+export default LateStartReport;
\ No newline at end of file
diff --git a/src/components/LateStartReport/index.ts b/src/components/LateStartReport/index.ts
new file mode 100644
index 0000000..bb8ef69
--- /dev/null
+++ b/src/components/LateStartReport/index.ts
@@ -0,0 +1,2 @@
+//src\components\LateStartReport\index.ts
+export { default } from "./LateStartReport";
diff --git a/src/components/LateStartReportGen/DownloadReportButton.tsx b/src/components/LateStartReportGen/DownloadReportButton.tsx
new file mode 100644
index 0000000..b838fba
--- /dev/null
+++ b/src/components/LateStartReportGen/DownloadReportButton.tsx
@@ -0,0 +1,40 @@
+// 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>
+  );
+};
\ No newline at end of file
diff --git a/src/components/LateStartReportGen/LateStartReportGen.tsx b/src/components/LateStartReportGen/LateStartReportGen.tsx
new file mode 100644
index 0000000..8ebfae2
--- /dev/null
+++ b/src/components/LateStartReportGen/LateStartReportGen.tsx
@@ -0,0 +1,44 @@
+//src\components\LateStartReportGen\LateStartReportGen.tsx
+"use client";
+import React, { useMemo, useState } from "react";
+import SearchBox, { Criterion } from "../SearchBox";
+import { useTranslation } from "react-i18next";
+import { CashFlow } from "@/app/api/cashflow";
+import { DownloadReportButton } from './DownloadReportButton';
+interface Props {
+  projects: CashFlow[];
+}
+type SearchQuery = Partial<Omit<CashFlow, "id">>;
+type SearchParamNames = keyof SearchQuery;
+
+const ProgressByClientSearch: React.FC<Props> = ({ projects }) => {
+  const { t } = useTranslation("projects");
+
+  const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
+    () => [
+      { label: "Team", paramName: "team", type: "text" },
+      { label: "Client", paramName: "client", type: "text" },
+      {
+        label: "Remained Date From",
+        label2: "Remained Date To",
+        paramName: "targetEndDate",
+        type: "dateRange",
+      },
+    ],
+    [t],
+  );
+
+  return (
+    <>
+      <SearchBox
+        criteria={searchCriteria}
+        onSearch={(query) => {
+          console.log(query);
+        }}
+      />
+      <DownloadReportButton />
+    </>
+  );
+};
+
+export default ProgressByClientSearch;
diff --git a/src/components/LateStartReportGen/LateStartReportGenLoading.tsx b/src/components/LateStartReportGen/LateStartReportGenLoading.tsx
new file mode 100644
index 0000000..93143ce
--- /dev/null
+++ b/src/components/LateStartReportGen/LateStartReportGenLoading.tsx
@@ -0,0 +1,41 @@
+//src\components\LateStartReportGen\LateStartReportGenLoading.tsx
+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 LateStartReportGenLoading: React.FC = () => {
+  return (
+    <>
+      <Card>
+        <CardContent>
+          <Stack spacing={2}>
+            <Skeleton variant="rounded" height={60} />
+            <Skeleton variant="rounded" height={60} />
+            <Skeleton variant="rounded" height={60} />
+            <Skeleton
+              variant="rounded"
+              height={50}
+              width={100}
+              sx={{ alignSelf: "flex-end" }}
+            />
+          </Stack>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardContent>
+          <Stack spacing={2}>
+            <Skeleton variant="rounded" height={40} />
+            <Skeleton variant="rounded" height={40} />
+            <Skeleton variant="rounded" height={40} />
+            <Skeleton variant="rounded" height={40} />
+          </Stack>
+        </CardContent>
+      </Card>
+    </>
+  );
+};
+
+export default LateStartReportGenLoading;
diff --git a/src/components/LateStartReportGen/LateStartReportGenWrapper.tsx b/src/components/LateStartReportGen/LateStartReportGenWrapper.tsx
new file mode 100644
index 0000000..5ba8325
--- /dev/null
+++ b/src/components/LateStartReportGen/LateStartReportGenWrapper.tsx
@@ -0,0 +1,19 @@
+//src\components\LateStartReportGen\LateStartReportGenWrapper.tsx
+import { fetchProjectsCashFlow } from "@/app/api/cashflow";
+import React from "react";
+import LateStartReportGen from "./LateStartReportGen";
+import LateStartReportGenLoading from "./LateStartReportGenLoading";
+
+interface SubComponents {
+  Loading: typeof LateStartReportGenLoading;
+}
+
+const LateStartReportGenWrapper: React.FC & SubComponents = async () => {
+  const clentprojects = await fetchProjectsCashFlow();
+
+  return <LateStartReportGen projects={clentprojects} />;
+};
+
+LateStartReportGenWrapper.Loading = LateStartReportGenLoading;
+
+export default LateStartReportGenWrapper;
\ No newline at end of file
diff --git a/src/components/LateStartReportGen/index.ts b/src/components/LateStartReportGen/index.ts
new file mode 100644
index 0000000..55e0f5d
--- /dev/null
+++ b/src/components/LateStartReportGen/index.ts
@@ -0,0 +1,2 @@
+//src\components\LateStartReportGen\index.ts
+export { default } from "./LateStartReportGenWrapper";
diff --git a/src/components/ReportSearchBox/SearchBox.tsx b/src/components/ReportSearchBox/SearchBox.tsx
new file mode 100644
index 0000000..fe058f7
--- /dev/null
+++ b/src/components/ReportSearchBox/SearchBox.tsx
@@ -0,0 +1,201 @@
+"use client";
+
+import Grid from "@mui/material/Grid";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import Typography from "@mui/material/Typography";
+import React, { useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import TextField from "@mui/material/TextField";
+import FormControl from "@mui/material/FormControl";
+import InputLabel from "@mui/material/InputLabel";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
+import CardActions from "@mui/material/CardActions";
+import Button from "@mui/material/Button";
+import RestartAlt from "@mui/icons-material/RestartAlt";
+import Search from "@mui/icons-material/Search";
+import dayjs from "dayjs";
+import "dayjs/locale/zh-hk";
+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";
+
+interface BaseCriterion<T extends string> {
+  label: string;
+  label2?: string;
+  paramName: T;
+  paramName2?: T;
+}
+
+interface TextCriterion<T extends string> extends BaseCriterion<T> {
+  type: "text";
+}
+
+interface SelectCriterion<T extends string> extends BaseCriterion<T> {
+  type: "select";
+  options: string[];
+}
+
+interface DateRangeCriterion<T extends string> extends BaseCriterion<T> {
+  type: "dateRange";
+}
+
+export type Criterion<T extends string> =
+  | TextCriterion<T>
+  | SelectCriterion<T>
+  | DateRangeCriterion<T>;
+
+interface Props<T extends string> {
+  criteria: Criterion<T>[];
+  onSearch: (inputs: Record<T, string>) => void;
+  onReset?: () => void;
+}
+
+function SearchBox<T extends string>({
+  criteria,
+  onSearch,
+  onReset,
+}: Props<T>) {
+  const { t } = useTranslation("common");
+  const defaultInputs = useMemo(
+    () =>
+      criteria.reduce<Record<T, string>>(
+        (acc, c) => {
+          return { ...acc, [c.paramName]: c.type === "select" ? "All" : "" };
+        },
+        {} as Record<T, string>,
+      ),
+    [criteria],
+  );
+  const [inputs, setInputs] = useState(defaultInputs);
+
+  const makeInputChangeHandler = useCallback(
+    (paramName: T): React.ChangeEventHandler<HTMLInputElement> => {
+      return (e) => {
+        setInputs((i) => ({ ...i, [paramName]: e.target.value }));
+      };
+    },
+    [],
+  );
+
+  const makeSelectChangeHandler = useCallback((paramName: T) => {
+    return (e: SelectChangeEvent) => {
+      setInputs((i) => ({ ...i, [paramName]: e.target.value }));
+    };
+  }, []);
+
+  const makeDateChangeHandler = useCallback((paramName: T) => {
+    return (e: any) => {
+      setInputs((i) => ({ ...i, [paramName]: dayjs(e).format("YYYY-MM-DD") }));
+    };
+  }, []);
+
+  const makeDateToChangeHandler = useCallback((paramName: T) => {
+    return (e: any) => {
+      setInputs((i) => ({
+        ...i,
+        [paramName + "To"]: dayjs(e).format("YYYY-MM-DD"),
+      }));
+    };
+  }, []);
+
+  const handleReset = () => {
+    setInputs(defaultInputs);
+    onReset?.();
+  };
+
+  const handleSearch = () => {
+    onSearch(inputs);
+  };
+
+  return (
+    <Card>
+      <CardContent sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
+        <Typography variant="overline">{t("Search Criteria")}</Typography>
+        <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
+          {criteria.map((c) => {
+            return (
+              <Grid key={c.paramName} item xs={6}>
+                {c.type === "text" && (
+                  <TextField
+                    label={c.label}
+                    fullWidth
+                    onChange={makeInputChangeHandler(c.paramName)}
+                    value={inputs[c.paramName]}
+                  />
+                )}
+                {c.type === "select" && (
+                  <FormControl fullWidth>
+                    <InputLabel>{c.label}</InputLabel>
+                    <Select
+                      label={c.label}
+                      onChange={makeSelectChangeHandler(c.paramName)}
+                      value={inputs[c.paramName]}
+                    >
+                      <MenuItem value={"All"}>{t("All")}</MenuItem>
+                      {c.options.map((option, index) => (
+                        <MenuItem key={`${option}-${index}`} value={option}>
+                          {option}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                )}
+                {c.type === "dateRange" && (
+                  <LocalizationProvider
+                    dateAdapter={AdapterDayjs}
+                    // TODO: Should maybe use a custom adapterLocale here to support YYYY-MM-DD
+                    adapterLocale="zh-hk"
+                  >
+                    <Box display="flex">
+                      <FormControl fullWidth>
+                        <DatePicker
+                          label={c.label}
+                          onChange={makeDateChangeHandler(c.paramName)}
+                        />
+                      </FormControl>
+                      <Box
+                        display="flex"
+                        alignItems="center"
+                        justifyContent="center"
+                        marginInline={2}
+                      >
+                        {"-"}
+                      </Box>
+                      <FormControl fullWidth>
+                        <DatePicker
+                          label={c.label2}
+                          onChange={makeDateToChangeHandler(c.paramName)}
+                        />
+                      </FormControl>
+                    </Box>
+                  </LocalizationProvider>
+                )}
+              </Grid>
+            );
+          })}
+        </Grid>
+          <CardActions sx={{ justifyContent: "flex-end" }}>
+            <Button
+              variant="text"
+              startIcon={<RestartAlt />}
+              onClick={handleReset}
+            >
+              {t("Reset")}
+            </Button>
+            <Button
+              variant="outlined"
+              startIcon={<Search />}
+              onClick={handleSearch}
+            >
+              {t("Search")}
+            </Button>
+          </CardActions>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default SearchBox;
diff --git a/src/components/ReportSearchBox/index.ts b/src/components/ReportSearchBox/index.ts
new file mode 100644
index 0000000..37a0659
--- /dev/null
+++ b/src/components/ReportSearchBox/index.ts
@@ -0,0 +1,3 @@
+//src\components\SearchBox\index.ts
+export { default } from "./SearchBox";
+export type { Criterion } from "./SearchBox";
diff --git a/src/components/utils/downloadExcel.ts b/src/components/utils/downloadExcel.ts
new file mode 100644
index 0000000..825ccb3
--- /dev/null
+++ b/src/components/utils/downloadExcel.ts
@@ -0,0 +1,9 @@
+// downloadExcel.ts
+import * as XLSX from 'xlsx-js-style';
+
+export const downloadExcel = (data: any[]) => {
+  const worksheet = XLSX.utils.json_to_sheet(data);
+  const workbook = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(workbook, worksheet, 'Report');
+  XLSX.writeFile(workbook, 'Report.xlsx');
+};
diff --git a/src/components/utils/generateFakeData.ts b/src/components/utils/generateFakeData.ts
new file mode 100644
index 0000000..2b2df45
--- /dev/null
+++ b/src/components/utils/generateFakeData.ts
@@ -0,0 +1,40 @@
+// generateFakeData.ts
+import { faker } from '@faker-js/faker';
+
+interface ProjectData {
+  id: number;
+  projectCode: string;
+  projectName: string;
+  team: string;
+  teamLeader: string;
+  startDate: string;
+  startDateFrom: string;
+  startDateTo: string;
+  targetEndDate: string;
+  client: string;
+  subsidiary: string;
+  nextstage: string;
+  nextstageenddate: string;
+}
+
+export const generateFakeData = (numEntries: number): ProjectData[] => {
+  const data: ProjectData[] = [];
+  for (let i = 0; i < numEntries; i++) {
+    data.push({
+      id: i + 1,
+      projectCode: faker.datatype.uuid(),
+      projectName: faker.commerce.productName(),
+      team: faker.commerce.department(),
+      teamLeader: faker.name.fullName(),  // Corrected from findName to fullName
+      startDate: faker.date.recent(90).toISOString().split('T')[0],
+      startDateFrom: faker.date.past(1).toISOString().split('T')[0],
+      startDateTo: faker.date.future(1).toISOString().split('T')[0],
+      targetEndDate: faker.date.future(1).toISOString().split('T')[0],
+      client: faker.company.name(),  // Corrected from companyName to name
+      subsidiary: faker.company.name(),  // Corrected from companyName to name
+      nextstage: "Design",
+      nextstageenddate: faker.date.future(2).toISOString().split('T')[0],
+    });
+  }
+  return data;
+};