Rewritten Collected ARV patient and Associated Patient Report from jsp to new UI in react!

frontend/src/App.js

@@ -34,6 +34,7 @@ import ImmunohistochemistryCaseView from "./components/immunohistochemistry/Immu
 import RoutedResultsViewer from "./components/patient/resultsViewer/results-viewer.tsx";
 import EOrderPage from "./components/eOrder/Index";
 import RoutineIndex from "./components/Reports/routine/Index.js";
+import StudyIndex from "./components/Reports/study/index.js";
 import PrintBarcode from "./components/printBarcode/Index";
 
 
@@ -389,6 +390,12 @@ export default function App() {
                   exact
                   component={() => <StudyReports />}
                   role="Reports"
+                />
+                 <SecureRoute
+                  path="/StudyReport"
+                  exact
+                  component={() => <StudyIndex />}
+                  role="Reports"
                 />
                 <SecureRoute
                   path="/validation"

frontend/src/components/Reports/Study.js

@@ -112,9 +112,7 @@ export const RoutineReportsMenu = {
       icon: IbmWatsonNaturalLanguageUnderstanding,
       SideNavMenuItem: [
         {
-          link:
-            config.serverBaseUrl +
-            "/Report?type=patient&report=patientCollection",
+          link:"/StudyReport?type=patient&report=patientCollection",
           label:  <FormattedMessage id="sideNav.label.collectedarvpatientreports"/>,
         },
       ],
@@ -124,9 +122,7 @@ export const RoutineReportsMenu = {
       icon: IbmWatsonNaturalLanguageUnderstanding,
       SideNavMenuItem: [
         {
-          link:
-            config.serverBaseUrl +
-            "/Report?type=patient&report=patientAssociated",
+          link:"/StudyReport?type=patient&report=patientAssociated",
           label: <FormattedMessage id="sideNav.label.associatedpatientreport"/>,
         },
       ],

frontend/src/components/Reports/study/common/ReportByID.js

@@ -0,0 +1,95 @@
+import React, { useState } from "react";
+import { FormattedMessage, injectIntl, useIntl } from "react-intl";
+import { Form, Grid, Column, Section, Button, Loading } from "@carbon/react";
+import CustomLabNumberInput from "../../../common/CustomLabNumberInput";
+import { AlertDialog } from "../../../common/CustomNotification";
+import config from "../../../../config.json";
+
+function ReportByID(props) {
+  const intl = useIntl();
+  const [nationalId, setNationalId] = useState("");
+  const [errors, setErrors] = useState({});
+  const [notificationVisible, setNotificationVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = () => {
+    if (!nationalId) {
+      setErrors({ nationalId: "National ID is required" });
+      return;
+    }
+
+    setLoading(true);
+
+    console.log("National ID:", nationalId);
+    const baseParams = `report=${props.report}&type=patient`;
+    const baseUrl = `${config.serverBaseUrl}/ReportPrint`;
+    const url = `${baseUrl}?${baseParams}&patientNumberDirect=${nationalId}`;
+    window.open(url, "_blank");
+
+    setNationalId("");
+    setErrors({});
+    setLoading(false);
+    setNotificationVisible(true);
+  };
+
+  // Function to handle changes in the input field
+  const handleInputChange = (event) => {
+    setErrors({});
+    setNationalId(event.target.value);
+  };
+
+  return (
+    <>
+      <br />
+      <Form>
+        <Section>
+          <Section>
+            <h3>
+              <FormattedMessage id={props.id} />
+            </h3>
+          </Section>
+        </Section>
+        <br />
+        {notificationVisible && <AlertDialog />}
+        {loading && <Loading />}
+        <Grid fullWidth={true}>
+          <Column lg={16}>
+            <Section>
+              <FormattedMessage id="label.report.byNationalId" />
+            </Section>
+          </Column>
+        </Grid>
+        <br />
+        <Grid fullWidth={true}>
+          <Column lg={6}>
+            <CustomLabNumberInput
+              id="nationalID"
+              labelText={intl.formatMessage({
+                id: "nationalID.title",
+                defaultMessage: "National ID",
+              })}
+              className="inputText"
+              value={nationalId}
+              onChange={handleInputChange} // Use the new handler here
+              invalid={errors.nationalId}
+              invalidText={errors.nationalId}
+            />
+          </Column>
+        </Grid>
+        <br />
+        <br />
+        <Grid fullWidth={true}>
+          <Column lg={16}>
+            <Section>
+              <Button type="button" onClick={handleSubmit}>
+                <FormattedMessage id="label.button.generatePrintableVersion" />
+              </Button>
+            </Section>
+          </Column>
+        </Grid>
+      </Form>
+    </>
+  );
+}
+
+export default injectIntl(ReportByID);

frontend/src/components/Reports/study/index.js

@@ -0,0 +1,92 @@
+import React, { useContext, useState, useEffect } from "react";
+import { AlertDialog } from "../../common/CustomNotification";
+import { NotificationContext } from "../../layout/Layout";
+import {
+  Heading,
+  Grid,
+  Column,
+  Section,
+  Breadcrumb,
+  BreadcrumbItem,
+  Loading,
+} from "@carbon/react";
+import { injectIntl, FormattedMessage, useIntl } from "react-intl";
+import ReportByID from "./common/ReportByID";
+import PageBreadCrumb from "../../common/PageBreadCrumb";
+
+const StudyIndex = () => {
+  const intl = useIntl();
+  const { setNotificationVisible, addNotification, notificationVisible } = useContext(NotificationContext);
+
+  const [type, setType] = useState("");
+  const [report, setReport] = useState("");
+  const [source, setSource] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [breadcrumbs, setBreadcrumbs] = useState([]);
+  const breadcrumbMap = {
+    "patient_patientCollection": "patient.report.collection.name",
+    "patient_patientAssociated": "patient.report.associated.name"
+  };
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const paramType = params.get("type");
+    const paramReport = params.get("report");
+
+    setType(paramType);
+    setReport(paramReport);
+
+    // Updating breadcrumbs based on paramType and paramReport
+    if (paramType && paramReport) {
+      const breadcrumbId = breadcrumbMap[`${paramType}_${paramReport}`];
+      if (breadcrumbId) {
+        const breadcrumbLabel = intl.formatMessage({ id: breadcrumbId });
+        setBreadcrumbs([
+          { label: intl.formatMessage({ id: "home.label" }), link: "/" },
+          { label: intl.formatMessage({ id: "label.study.Reports" }), link: "/StudyReports" },
+          {
+            label: breadcrumbLabel,
+            link: `/StudyReport?type=${paramType}&report=${paramReport}`,
+          },
+        ]);
+      }
+      setIsLoading(false);
+    } else {
+      window.location.href = "/StudyReports";
+    }
+  }, [type, report]);
+
+  return (
+    <>
+      <br />
+      <PageBreadCrumb breadcrumbs={breadcrumbs} />
+      <Grid fullWidth={true}>
+        <Column lg={16}>
+          <Section>
+            <Section>
+              <Heading>
+                <FormattedMessage id="selectReportValues.title" />
+              </Heading>
+            </Section>
+          </Section>
+        </Column>
+      </Grid>
+      <div className="orderLegendBody">
+        {notificationVisible === true && <AlertDialog />}
+        {isLoading && <Loading />}
+        {!isLoading && (
+          <>
+            {type === "patient" && report === "patientCollection" && (
+              <ReportByID report="patientCollection" id="patient.report.collection.name" />
+            )}
+            {type === "patient" && report === "patientAssociated" && (
+              <ReportByID report="patientAssociated" id="patient.report.associated.name" />
+            )}
+          </>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default injectIntl(StudyIndex);

frontend/src/languages/en.json

@@ -12,6 +12,8 @@
     "label.button.confirmAction": "Confirm Action",
     "label.button.confirmTitle": "Are You Sure ?",
     "label.button.generatePrintableVersion": "Generate Printable Version",
+    "label.report.byNationalId":"By National ID / Unique Health ID number",
+    "label.study.Reports":"Study Reports",
     "login.title": "Login",
     "login.subtitle": "Login",
     "login.msg.username": "Username",

frontend/src/languages/fr.json

@@ -16,6 +16,8 @@
     "label.button.cancel": "Annuler",
     "label.button.confirmDelete": "Confirmation de la suppression",
     "label.button.generatePrintableVersion": "Générer une version imprimable",
+    "label.report.byNationalId":"Numéro d'Identification Nationale / Identifiant Santé Unique",
+    "label.study.Reports":"Études Rapports",
     "login.title": "Identifiant",
     "login.subtitle": "Identifiant",
     "login.msg.username": "Nom d'utilisateur",