diff --git a/src/app/api/reporte1/action.ts b/src/app/api/reporte1/action.ts
new file mode 100644
index 0000000..a82d532
--- /dev/null
+++ b/src/app/api/reporte1/action.ts
@@ -0,0 +1,27 @@
+'use server'
+
+import { serverFetchBlob } from "@/app/utils/fetchUtil";
+import { BASE_API_URL } from "@/config/api";
+
+
+export interface FileResponse {
+    filename: string;
+    blobValue: Uint8Array;
+}
+
+export interface FinancialStatusReportRequest {
+    projectId: number;
+}
+
+export const fetchProjectsFinancialStatusReport = async (data: FinancialStatusReportRequest) => {
+    const reportBlob = await serverFetchBlob<FileResponse>(
+        `${BASE_API_URL}/reports/fetchProjectsFinancialStatusReport`,
+        {
+            method: "POST",
+            body: JSON.stringify(data),
+            headers: { "Content-Type": "application/json" },
+        },
+    );
+
+    return reportBlob
+};
\ No newline at end of file
diff --git a/src/app/api/reporte1/index.ts b/src/app/api/reporte1/index.ts
index 5e27648..b01df24 100644
--- a/src/app/api/reporte1/index.ts
+++ b/src/app/api/reporte1/index.ts
@@ -1,4 +1,6 @@
 //src\app\api\report\index.ts
+import { serverFetchJson } from "@/app/utils/fetchUtil";
+import { BASE_API_URL } from "@/config/api";
 import { cache } from "react";
 
 export interface FinancialStatus {
@@ -16,6 +18,12 @@ export interface FinancialStatus {
   status: string;
 }
 
+export interface ProjectCombo {
+  id: number;
+  name: string;
+  code: string;
+}
+
 export const preloadProjects = () => {
   fetchProjectsFinancialStatus();
 };
@@ -24,6 +32,12 @@ export const fetchProjectsFinancialStatus = cache(async () => {
   return mockProjects;
 });
 
+export const fetchProjectCombo = cache(async () => {
+  return serverFetchJson<ProjectCombo[]>(`${BASE_API_URL}/projects`, {
+    next: { tags: ["projects"] },
+  });
+});
+
 const mockProjects: FinancialStatus[] = [
   {
     id: 1,
diff --git a/src/app/api/reports/index.ts b/src/app/api/reports/index.ts
index bdc5cbe..8923829 100644
--- a/src/app/api/reports/index.ts
+++ b/src/app/api/reports/index.ts
@@ -1,5 +1,9 @@
 import { records } from "../staff/actions";
 
+export interface FinancialStatusReportFilter {
+    project: string[];
+}
+
 //  - Project Cash Flow Report
 export interface ProjectCashFlowReportFilter {
     project: string[];
diff --git a/src/components/Report/FinancialStatusReport/FinancialStatusReport.tsx b/src/components/Report/FinancialStatusReport/FinancialStatusReport.tsx
index 893b0ba..c437708 100644
--- a/src/components/Report/FinancialStatusReport/FinancialStatusReport.tsx
+++ b/src/components/Report/FinancialStatusReport/FinancialStatusReport.tsx
@@ -1,5 +1,6 @@
 //src\components\DelayReport\DelayReport.tsx
-"use client";
+// "use client";
+
 import * as React from "react";
 import "../../../app/global.css";
 import { Suspense } from "react";
diff --git a/src/components/Report/FinancialStatusReportGen/FinancialStatusReportGen.tsx b/src/components/Report/FinancialStatusReportGen/FinancialStatusReportGen.tsx
index bf4a7cd..775e849 100644
--- a/src/components/Report/FinancialStatusReportGen/FinancialStatusReportGen.tsx
+++ b/src/components/Report/FinancialStatusReportGen/FinancialStatusReportGen.tsx
@@ -1,22 +1,30 @@
 //src\components\LateStartReportGen\LateStartReportGen.tsx
 "use client";
 import React, { useMemo, useState } from "react";
-import SearchBox, { Criterion } from "../ReportSearchBoxe1";
+// import SearchBox, { Criterion } from "../ReportSearchBoxe1";
 import { useTranslation } from "react-i18next";
-import { FinancialStatus } from "@/app/api/reporte1";
+import { FinancialStatus, ProjectCombo } from "@/app/api/reporte1";
+import SearchBox, { Criterion } from "@/components/SearchBox";
+import { FinancialStatusReportFilter } from "@/app/api/reports";
+import { fetchAllClientSubsidiaryProjects } from "@/app/api/clientprojects/actions";
+import { fetchProjectsFinancialStatusReport } from "@/app/api/reporte1/action";
+import { downloadFile } from "@/app/utils/commonUtil";
 //import { DownloadReportButton } from './DownloadReportButton';
 interface Props {
   projects: FinancialStatus[];
+  projectCombo : ProjectCombo[];
 }
-type SearchQuery = Partial<Omit<FinancialStatus, "id">>;
+type SearchQuery = Partial<Omit<ProjectCombo, "id">>;
 type SearchParamNames = keyof SearchQuery;
 
-const ProgressByClientSearch: React.FC<Props> = ({ projects }) => {
+const GenFinancialStatusReport: React.FC<Props> = ({ projects, projectCombo }) => {
   const { t } = useTranslation("projects");
 
+  const combo = projectCombo.map(project => {return `${project.code} - ${project.name}`})
+
   const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
     () => [
-      { label: "{Project Code}", paramName: "projectCode", type: "select", options: ["M1234", "M1268", "M1352", "M1393"] },
+      { label: t("Project No"), paramName: "code", type: "select", options: combo,  },
       // {
       //   label: "Status",
       //   label2: "Remained Date To",
@@ -31,8 +39,13 @@ const ProgressByClientSearch: React.FC<Props> = ({ projects }) => {
     <>
       <SearchBox
         criteria={searchCriteria}
-        onSearch={(query) => {
-          console.log(query);
+        onSearch={async (query) => {
+          const projectIndex = projectCombo.findIndex((project) => `${project.code} - ${project.name}` === query.code)
+          console.log(projectCombo[projectIndex].id)
+          const response = await fetchProjectsFinancialStatusReport({ projectId: projects[projectIndex].id })
+          if (response) {
+              downloadFile(new Uint8Array(response.blobValue), response.filename!!)
+          }
         }}
       />
       {/* <DownloadReportButton /> */}
@@ -40,4 +53,4 @@ const ProgressByClientSearch: React.FC<Props> = ({ projects }) => {
   );
 };
 
-export default ProgressByClientSearch;
+export default GenFinancialStatusReport;
diff --git a/src/components/Report/FinancialStatusReportGen/FinancialStatusReportGenWrapper.tsx b/src/components/Report/FinancialStatusReportGen/FinancialStatusReportGenWrapper.tsx
index e82ea4b..7939307 100644
--- a/src/components/Report/FinancialStatusReportGen/FinancialStatusReportGenWrapper.tsx
+++ b/src/components/Report/FinancialStatusReportGen/FinancialStatusReportGenWrapper.tsx
@@ -1,5 +1,5 @@
 //src\components\LateStartReportGen\LateStartReportGenWrapper.tsx
-import { fetchProjectsFinancialStatus } from "@/app/api/reporte1";
+import { fetchProjectCombo, fetchProjectsFinancialStatus } from "@/app/api/reporte1";
 import React from "react";
 import FinancialStatusReportGen from "./FinancialStatusReportGen";
 import FinancialStatusReportGenLoading from "./FinancialStatusReportGenLoading";
@@ -11,7 +11,9 @@ interface SubComponents {
 const FinancialStatusReportGenWrapper: React.FC & SubComponents = async () => {
   const clentprojects = await fetchProjectsFinancialStatus();
 
-  return <FinancialStatusReportGen projects={clentprojects} />;
+  const projectCombo = await fetchProjectCombo()
+
+  return <FinancialStatusReportGen projects={clentprojects} projectCombo={projectCombo}/>;
 };
 
 FinancialStatusReportGenWrapper.Loading = FinancialStatusReportGenLoading;