update completion reports

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

@@ -1,24 +1,28 @@
 //src\app\(main)\analytics\ProjectCompletionReport\page.tsx
 import { Metadata } from "next";
-import { I18nProvider } from "@/i18n";
+import { I18nProvider, getServerI18n } from "@/i18n";
 import Typography from "@mui/material/Typography";
-import ProjectCompletionReportComponent from "@/components/Report/ProjectCompletionReport";
+import { Suspense } from "react";
+import ProjectCompletionReport from "@/components/ProjectCompletionReport";
 
 export const metadata: Metadata = {
   title: "Project Completion Report",
 };
 
-const ProjectCompletionReport: React.FC = () => {
+const ProjectCompletionReportPage: React.FC = async () => {
+  const { t } = await getServerI18n("report");
+
   return (
-    <I18nProvider namespaces={["analytics"]}>
-      <Typography variant="h4" marginInlineEnd={2}>
-      Project Completion Report
+    <>
+    <Typography variant="h4" marginInlineEnd={2}>
+        {t("Project Completion Report")}
       </Typography>
-      {/* <Suspense fallback={<ProgressCashFlowSearch.Loading />}>
-        <ProgressCashFlowSearch/>
-      </Suspense> */}
-      <ProjectCompletionReportComponent />
-    </I18nProvider>
+        <I18nProvider namespaces={["report", "common"]}>
+          <Suspense fallback={<ProjectCompletionReport.Loading />}>
+            <ProjectCompletionReport />
+          </Suspense>
+        </I18nProvider>
+    </>
   );
 };
-export default ProjectCompletionReport;
+export default ProjectCompletionReportPage;

src/app/api/reports/actions.ts

@@ -1,7 +1,7 @@
 "use server";
 
 import { serverFetchBlob, serverFetchJson } from "@/app/utils/fetchUtil";
-import { MonthlyWorkHoursReportRequest, ProjectCashFlowReportRequest, LateStartReportRequest, ProjectResourceOverconsumptionReportRequest, ProjectPandLReportRequest } from ".";
+import { MonthlyWorkHoursReportRequest, ProjectCashFlowReportRequest, LateStartReportRequest, ProjectResourceOverconsumptionReportRequest, ProjectPandLReportRequest, ProjectCompletionReportRequest } from ".";
 import { BASE_API_URL } from "@/config/api";
 
 export interface FileResponse {
@@ -48,6 +48,19 @@ export const fetchProjectResourceOverconsumptionReport = async (data: ProjectRes
     return reportBlob
 };
 
+export const fetchProjectCompletionReport = async (data: ProjectCompletionReportRequest) => {
+    const reportBlob = await serverFetchBlob<FileResponse>(
+        `${BASE_API_URL}/reports/ProjectCompletionReportwithOutstandingAccountsReceivable`,
+        {
+            method: "POST",
+            body: JSON.stringify(data),
+            headers: { "Content-Type": "application/json" },
+        },
+    );
+
+    return reportBlob
+};
+
 // export const fetchLateStartReport = async (data: LateStartReportRequest) => {
 //     const response  = await serverFetchBlob<FileResponse>(
 //         `${BASE_API_URL}/reports/downloadLateStartReport`,

src/app/api/reports/index.ts

@@ -65,3 +65,15 @@ export interface LateStartReportRequest {
     client: string;
     date: any;
 }
+
+export interface ProjectCompletionReportFilter {
+    startDate: String;
+    startDateTo: String;
+    Outstanding: String;
+}
+
+export interface ProjectCompletionReportRequest {
+    startDate: String;
+    endDate: String;
+    outstanding: Boolean;
+}

src/components/NavigationContent/NavigationContent.tsx

@@ -162,11 +162,11 @@ const NavigationContent: React.FC<Props> = ({ abilities }) => {
           label: "Completion Report",
           path: "/analytics/ProjectCompletionReport",
         },
-        {
-          icon: <Analytics />,
-          label: "Completion Report with Outstanding Un-billed Hours Report",
-          path: "/analytics/ProjectCompletionReportWO",
-        },
+        // {
+        //   icon: <Analytics />,
+        //   label: "Completion Report with Outstanding Un-billed Hours Report",
+        //   path: "/analytics/ProjectCompletionReportWO",
+        // },
         {
           icon: <Analytics />,
           label: "Project Claims Report",

src/components/ProjectCompletionReport/ProjectCompletionReport.tsx

@@ -0,0 +1,95 @@
+"use client";
+import {
+  ProjectCompletionReportFilter,
+  ProjectCompletionReportRequest,
+} from "@/app/api/reports";
+import React, { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import SearchBox, { Criterion } from "../SearchBox";
+import dayjs from "dayjs";
+import { INPUT_DATE_FORMAT } from "@/app/utils/formatUtil";
+import { downloadFile } from "@/app/utils/commonUtil";
+import { fetchProjectCompletionReport } from "@/app/api/reports/actions";
+
+interface Props {
+  // team: TeamResult[]
+  // customer: Customer[]
+}
+
+type SearchQuery = Partial<Omit<ProjectCompletionReportFilter, "id">>;
+type SearchParamNames = keyof SearchQuery;
+
+const ProjectCompletionReport: React.FC<Props> = (
+  {
+    // team,
+    // customer
+  }
+) => {
+  const { t } = useTranslation("report");
+  const [error, setError] = useState("");
+  const outstandingList = ["Regular", "Outstanding Accounts Receivable"]
+
+  const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
+    () => [
+      {
+        label: t("startDate"),
+        label2: t("endDate"),
+        paramName: "startDate",
+        type: "dateRange",
+      },
+      {
+        label: t("Type"),
+        paramName: "Outstanding",
+        type: "select",
+        needAll: false,
+        options: outstandingList
+      },
+    ],
+    [t]
+  );
+
+  return (
+    <>
+      <SearchBox
+        criteria={searchCriteria}
+        onSearch={async (query: any) => {
+          console.log(query);
+          let postData: ProjectCompletionReportRequest = {
+            startDate: "",
+            endDate: dayjs().format(INPUT_DATE_FORMAT).toString(),
+            oustanding: false
+          };
+          if (query.endDate && query.endDate.length > 0) {
+            postData.endDate = query.endDate;
+          }
+
+          // check if start date exist
+          if (query.startDate.length === 0) {
+            setError(t("Start Date cant be empty"));
+          } else {
+            postData.startDate = query.startDate;
+            if (query.Outstanding && query.Outstanding === "Outstanding Accounts Receivable") {
+                // outstanding report
+                postData.outstanding = true
+            }
+            console.log(postData)
+            const response =
+              await fetchProjectCompletionReport(
+                postData
+              );
+            // normal report
+
+            if (response) {
+              downloadFile(
+                new Uint8Array(response.blobValue),
+                response.filename!!
+              );
+            }
+          }
+        }}
+      />
+    </>
+  );
+};
+
+export default ProjectCompletionReport;

src/components/ProjectCompletionReport/ProjectCompletionReportLoading.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 ProjectCompletionReportLoading: 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 ProjectCompletionReportLoading;

src/components/ProjectCompletionReport/ProjectCompletionReportWrapper.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { fetchAllCustomers } from "@/app/api/customer";
+import { fetchTeam } from "@/app/api/team";
+import ProjectCompletionReportLoading from "./ProjectCompletionReportLoading";
+import ProjectCompletionReport from "./ProjectCompletionReport";
+
+interface SubComponents {
+  Loading: typeof ProjectCompletionReportLoading;
+}
+
+const ProjectCompletionReportWrapper: React.FC & SubComponents = async () => {
+  
+    return <ProjectCompletionReport/>
+};
+
+ProjectCompletionReportWrapper.Loading = ProjectCompletionReportLoading;
+
+export default ProjectCompletionReportWrapper;

src/components/ProjectCompletionReport/index.ts

@@ -0,0 +1 @@
+export { default } from "./ProjectCompletionReportWrapper";