Updated TreatmentSummary component by integrating it with PrintPreview Component #8430

cypress/pageobject/Asset/AssetFilters.ts

@@ -3,7 +3,7 @@ export class AssetFilters {
     facilityName: string,
     assetStatus: string,
     assetClass: string,
-    assetLocation: string
+    assetLocation: string,
   ) {
     cy.contains("Advanced Filters").click();
     cy.get("input[name='Facilities']")

cypress/pageobject/Asset/AssetSearch.ts

@@ -17,7 +17,7 @@ export class AssetSearchPage {
   verifyBadgeContent(expectedText: string) {
     cy.get("[data-testid='Name/Serial No./QR ID']").should(
       "contain",
-      expectedText
+      expectedText,
     );
   }
 
@@ -54,7 +54,7 @@ export class AssetSearchPage {
   verifyAssetListContains(dummyCameraText: string) {
     cy.get("[data-testid='created-asset-list']").should(
       "contain",
-      dummyCameraText
+      dummyCameraText,
     );
   }
 }

cypress/pageobject/Patient/PatientInsurance.ts

@@ -2,7 +2,7 @@ class PatientInsurance {
   typePatientInsuranceDetail(
     containerId: string,
     fieldId: string,
-    value: string
+    value: string,
   ) {
     cy.get(`#${containerId}`).within(() => {
       cy.get(`#${fieldId}`).click().type(value);

cypress/pageobject/Patient/PatientMedicalHistory.ts

@@ -31,7 +31,7 @@ class PatientMedicalHistory {
     patientSymptoms4,
     patientSymptoms5,
     patientSymptoms6,
-    patientSymptoms7
+    patientSymptoms7,
   ) {
     cy.get("[data-testid=patient-details]").then(($dashboard) => {
       cy.url().should("include", "/facility/");
@@ -51,7 +51,7 @@ class PatientMedicalHistory {
   verifyNoSymptosPresent(patientSymptoms1: string) {
     cy.get("[data-testid=patient-details]").should(
       "not.contain",
-      patientSymptoms1
+      patientSymptoms1,
     );
   }
 }

scripts/generate-build-version.js

@@ -20,5 +20,5 @@ fs.writeFile(
       return console.log(err);
     }
     return null;
-  }
+  },
 );

src/Components/Common/PageTitle.tsx

@@ -70,15 +70,15 @@ export default function PageTitle({
             >
               <CareIcon
                 icon="l-angle-left"
-                className="border-box mr-1 rounded-md text-5xl hover:bg-secondary-200"
+                className="border-box mr-1 rounded-md text-5xl hover:bg-secondary-200 print:hidden"
               />{" "}
             </button>
           )}
           <h2 className="ml-0 text-2xl font-semibold leading-tight">{title}</h2>
         </div>
         {componentRight}
       </div>
-      <div className={hideBack ? "my-2" : "my-2 ml-8"}>
+      <div className={hideBack ? "my-2" : "my-2 ml-8 print:hidden"}>
         {breadcrumbs && <Breadcrumbs replacements={crumbsReplacements} />}
       </div>
     </div>

src/Components/Facility/Investigations/InvestigationTable.tsx

@@ -84,16 +84,10 @@ export const InvestigationTable = ({
   return (
     <div className="m-4 p-4">
       <div className="mb flex flex-col items-center justify-between sm:flex-row">
-        {title && <div className="text-xl font-bold">{title}</div>}
-        <div className="flex flex-col py-2 sm:flex-row">
-          <ButtonV2
-            variant="primary"
-            onClick={() => window.print()}
-            className="my-2 mr-2"
-            disabled={showForm}
-          >
-            Print Report
-          </ButtonV2>
+        {title && (
+          <div className="text-xl font-bold print:text-xs">{title}</div>
+        )}
+        <div className="flex flex-col py-2 sm:flex-row print:hidden">
           <ButtonV2
             disabled={isDischargedPatient}
             variant="primary"
@@ -120,30 +114,31 @@ export const InvestigationTable = ({
       <TextFormField
         name="test_search"
         label="Search Test"
-        className="mt-2"
+        className="mt-2 print:hidden"
         placeholder="Search test"
         value={searchFilter}
         onChange={(e) => setSearchFilter(e.value)}
       />
       <br />
-      <div id="section-to-print">
-        <div className="overflow-x-scroll border-b border-secondary-200 shadow sm:rounded-lg">
-          <table className="min-w-full divide-y divide-secondary-200">
-            <thead className="bg-secondary-50">
+      <div className="print:w-full">
+        <div className="overflow-x-scroll border-b border-secondary-200 shadow sm:rounded-lg print:overflow-visible print:border-none print:shadow-none">
+          <table className="min-w-full divide-y divide-secondary-200 print:min-w-0 print:divide-none">
+            <thead className="bg-secondary-50 print:bg-white">
               <tr>
                 {["Name", "Value", "Unit", "Min", "Max", "Ideal"].map(
                   (heading) => (
                     <th
+                      key={heading}
                       scope="col"
-                      className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-secondary-800"
+                      className="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-secondary-800 print:text-sm print:font-normal print:tracking-normal print:text-black"
                     >
                       {heading}
                     </th>
                   ),
                 )}
               </tr>
             </thead>
-            <tbody x-max="2">
+            <tbody className="print:divide-none">
               {filterTests.length > 0 ? (
                 filterTests.map((t: any, i) => {
                   const value =
@@ -173,12 +168,13 @@ export const InvestigationTable = ({
                               };
                         handleValueChange(value, target);
                       }}
+                      className="print:text-black"
                     />
                   );
                 })
               ) : (
-                <tr className="text-center text-secondary-500">
-                  No tests taken
+                <tr className="text-center text-secondary-500 print:text-black">
+                  <td className="col-span-6">No tests taken</td>
                 </tr>
               )}
             </tbody>

src/Components/Facility/Investigations/ShowInvestigation.tsx

@@ -1,14 +1,13 @@
 import _, { set } from "lodash-es";
 import { navigate } from "raviger";
 import { lazy, useCallback, useReducer } from "react";
-import { useTranslation } from "react-i18next";
 import routes from "../../../Redux/api";
 import * as Notification from "../../../Utils/Notifications.js";
 import request from "../../../Utils/request/request";
 import useQuery from "../../../Utils/request/useQuery";
-import PageTitle from "../../Common/PageTitle";
 import InvestigationTable from "./InvestigationTable";
-
+import PrintPreview from "../../../CAREUI/misc/PrintPreview";
+import { useTranslation } from "react-i18next";
 const Loading = lazy(() => import("../../Common/Loading"));
 
 const initialState = {
@@ -35,10 +34,15 @@ const updateFormReducer = (state = initialState, action: any) => {
   }
 };
 
-export default function ShowInvestigation(props: any) {
+interface ShowInvestigationProps {
+  consultationId: string;
+  patientId: string;
+  sessionId: string;
+  facilityId: string;
+}
+export default function ShowInvestigation(props: ShowInvestigationProps) {
+  const { consultationId, patientId, sessionId } = props;
   const { t } = useTranslation();
-  const { consultationId, patientId, facilityId, sessionId } = props;
-
   const [state, dispatch] = useReducer(updateFormReducer, initialState);
   const { loading: investigationLoading } = useQuery(routes.getInvestigation, {
     pathParams: {
@@ -141,27 +145,23 @@ export default function ShowInvestigation(props: any) {
   if (patientLoading || investigationLoading) {
     return <Loading />;
   }
-
   return (
-    <div className="mx-auto max-w-7xl px-4">
-      <PageTitle
-        title={t("investigations")}
-        className="mx-3 md:mx-4"
-        crumbsReplacements={{
-          [facilityId]: { name: patientData?.facility_object?.name },
-          [patientId]: { name: patientData?.name },
-        }}
-        backUrl={`/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}`}
-      />
+    <PrintPreview
+      title={t("Investigation Report for {{name}}", {
+        name: patientData?.name,
+      })}
+    >
       <InvestigationTable
-        title={`ID: ${sessionId}`}
+        title={t("Investigation Report of : {{name}}", {
+          name: patientData?.name,
+        })}
         data={state.initialValues}
         isDischargedPatient={!!consultation?.discharge_date}
         changedFields={state.changedFields}
         handleValueChange={handleValueChange}
         handleUpdateCancel={handleUpdateCancel}
         handleSave={handleSubmit}
       />
-    </div>
+    </PrintPreview>
   );
 }

src/Components/Facility/TreatmentSummary.tsx

@@ -4,10 +4,8 @@ import {
   formatDateTime,
   formatPatientAge,
 } from "../../Utils/utils";
-import useAppHistory from "../../Common/hooks/useAppHistory";
 import routes from "../../Redux/api";
 import useQuery from "../../Utils/request/useQuery";
-import CareIcon from "../../CAREUI/icons/CareIcon";
 import { ConsultationModel } from "./models";
 import { useMemo } from "react";
 import {
@@ -18,6 +16,8 @@ import PageHeadTitle from "../Common/PageHeadTitle";
 import { useTranslation } from "react-i18next";
 import { PatientModel } from "../Patient/models";
 import MedicineRoutes from "../Medicine/routes";
+import PrintPreview from "../../CAREUI/misc/PrintPreview";
+import careConfig from "@careConfig";
 
 export interface ITreatmentSummaryProps {
   consultationId: string;
@@ -28,12 +28,9 @@ export interface ITreatmentSummaryProps {
 export default function TreatmentSummary({
   consultationId,
   patientId,
-  facilityId,
 }: ITreatmentSummaryProps) {
   const { t } = useTranslation();
   const date = new Date();
-  const { goBack } = useAppHistory();
-  const url = `/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}`;
 
   const { data: patientData } = useQuery(routes.getPatient, {
     pathParams: { id: patientId },
@@ -49,50 +46,42 @@ export default function TreatmentSummary({
     <div>
       <PageHeadTitle title={t("treatment_summary__head_title")} />
       <div className="my-4">
-        <div className="my-4 flex flex-wrap justify-center gap-2 sm:justify-end">
-          <button
-            onClick={(_) => window.print()}
-            className="btn btn-primary mr-2"
-          >
-            <CareIcon icon="l-print" className="mr-2" />
-            {t("treatment_summary__print")}
-          </button>
-          <button onClick={(_) => goBack(url)} className="btn btn-default">
-            <CareIcon icon="l-times" className="mr-2" />
-            {t("close")}
-          </button>
-        </div>
-
-        <div id="section-to-print" className="mx-5">
-          <h2 className="text-center text-lg">
-            {consultationData?.facility_name ?? ""}
-          </h2>
+        <PrintPreview title={t("treatment_summary__head_title")}>
+          <div id="section-to-print" className="mx-5">
+            <div className="mb-3 flex items-center justify-between p-4">
+              <h3>{consultationData?.facility_name}</h3>
+              <img
+                className="h-10 w-auto"
+                src={careConfig.mainLogo?.dark}
+                alt="care logo"
+              />
+            </div>
+            <h2 className="text-center text-lg">
+              {t("treatment_summary__heading")}
+            </h2>
 
-          <h2 className="text-center text-lg">
-            {t("treatment_summary__heading")}
-          </h2>
+            <div className="text-right font-bold">{formatDate(date)}</div>
 
-          <div className="text-right font-bold">{formatDate(date)}</div>
+            <div className="mb-5 mt-2 border border-gray-800">
+              <BasicDetailsSection
+                patientData={patientData}
+                consultationData={consultationData}
+              />
 
-          <div className="mb-5 mt-2 border border-gray-800">
-            <BasicDetailsSection
-              patientData={patientData}
-              consultationData={consultationData}
-            />
+              <ComorbiditiesSection patientData={patientData} />
 
-            <ComorbiditiesSection patientData={patientData} />
+              <DiagnosisSection consultationData={consultationData} />
 
-            <DiagnosisSection consultationData={consultationData} />
+              <InvestigationsSection consultationId={consultationId} />
 
-            <InvestigationsSection consultationId={consultationId} />
+              <TreatmentSection consultationData={consultationData} />
 
-            <TreatmentSection consultationData={consultationData} />
+              <PrescriptionsSection consultationId={consultationId} />
 
-            <PrescriptionsSection consultationId={consultationId} />
-
-            <InstructionsSection consultationData={consultationData} />
+              <InstructionsSection consultationData={consultationData} />
+            </div>
           </div>
-        </div>
+        </PrintPreview>
       </div>
     </div>
   );

src/style/index.css

@@ -435,7 +435,6 @@ button:disabled,
     background-size: 1000px 100%;
 }
 
-
 @media print {
     body * {
         visibility: hidden;
@@ -450,7 +449,7 @@ button:disabled,
         left: 0;
         top: 0;
     }
-}
+}   
 
 .header-section .appBar {
     z-index: 1201;