From 2d0bec357aa8d15bc96b50b34abf7ee1d4a82d8a Mon Sep 17 00:00:00 2001
From: ayushpatil2122 <ayushitkhede4@gmail.com>
Date: Sat, 17 Aug 2024 00:20:42 +0530
Subject: [PATCH] zoom in out functionality added and added responsiveness for
 mobile screen

---
 src/CAREUI/misc/PrintPreview.tsx         |  42 +++++++-
 src/Components/Medicine/PrintPreview.tsx | 128 ++++++++++++-----------
 2 files changed, 105 insertions(+), 65 deletions(-)

diff --git a/src/CAREUI/misc/PrintPreview.tsx b/src/CAREUI/misc/PrintPreview.tsx
index 243826c7337..5a32be42998 100644
--- a/src/CAREUI/misc/PrintPreview.tsx
+++ b/src/CAREUI/misc/PrintPreview.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, useState } from "react";
 import ButtonV2 from "../../Components/Common/components/ButtonV2";
 import CareIcon from "../icons/CareIcon";
 import { classNames } from "../../Utils/utils";
@@ -11,18 +11,52 @@ type Props = {
   title: string;
 };
 
+const zoom_values = [
+  "scale-50",
+  "scale-75",
+  "scale-100",
+  "scale-125",
+  "scale-150",
+  "scale-175",
+  "scale-200",
+];
+
 export default function PrintPreview(props: Props) {
+  const [zoom, setZoom] = useState(2); // Initial zoom index to 'scale-100'
+
+  const handleZoomIn = () => {
+    setZoom((prevZoom) => (prevZoom < zoom_values.length - 1 ? prevZoom + 1 : prevZoom));
+  };
+
+  const handleZoomOut = () => {
+    setZoom((prevZoom) => (prevZoom > 0 ? prevZoom - 1 : prevZoom));
+  };
+
   return (
     <Page title={props.title}>
-      <div className="mx-auto my-8 w-[50rem]">
-        <div className="top-0 z-20 flex justify-end gap-2 bg-secondary-100 px-2 py-4 xl:absolute xl:right-6 xl:top-8">
+      <div className="mx-auto my-8 w-full max-w-[50rem] px-4">
+        <div className="top-0 z-20 flex justify-between items-center gap-2 bg-secondary-100 px-2 py-4 xl:absolute xl:right-6 xl:top-8">
           <ButtonV2 disabled={props.disabled} onClick={() => window.print()}>
             <CareIcon icon="l-print" className="text-lg" />
             Print
           </ButtonV2>
+          <div className="hidden md:flex gap-4"> {/* Hide on mobile, show on medium screens and up */}
+            <ButtonV2 onClick={handleZoomOut} disabled={zoom === 0}>
+              <CareIcon icon="l-search-minus" className="text-lg" />
+              Zoom Out
+            </ButtonV2>
+            <span>{zoom_values[zoom].split('-')[1]}%</span>
+            <ButtonV2 onClick={handleZoomIn} disabled={zoom === zoom_values.length - 1}>
+              <CareIcon icon="l-search-plus" className="text-lg" />
+              Zoom In
+            </ButtonV2>
+          </div>
         </div>
 
-        <div className="bg-white p-10 text-sm shadow-2xl transition-all duration-200 ease-in-out">
+        <div
+          className={`bg-white p-10 text-sm shadow-2xl transition-transform duration-200 ease-in-out ${zoom_values[zoom]}`} // Apply zoom scaling
+          style={{ transform: 'none' }} // This will ensure transform isn't applied during printing
+        >
           <div
             id="section-to-print"
             className={classNames("w-full", props.className)}
diff --git a/src/Components/Medicine/PrintPreview.tsx b/src/Components/Medicine/PrintPreview.tsx
index 05763e00f79..d78928f21ab 100644
--- a/src/Components/Medicine/PrintPreview.tsx
+++ b/src/Components/Medicine/PrintPreview.tsx
@@ -42,61 +42,62 @@ export default function PrescriptionsPrintPreview() {
 
   return (
     <PrintPreview
-      title={
-        patient ? `Prescriptions - ${patient.name}` : "Print Prescriptions"
-      }
+      title={patient ? `Prescriptions - ${patient.name}` : "Print Prescriptions"}
       disabled={!(patient && encounter && items)}
     >
       <div className="mb-3 flex items-center justify-between p-4">
         <h3>{encounter?.facility_name}</h3>
         <img className="h-10 w-auto" src={main_logo.dark} alt="care logo" />
       </div>
-      <div className="mb-6 grid grid-cols-8 gap-y-1.5 border-2 border-secondary-400 p-2">
-        <PatientDetail name="Patient" className="col-span-5">
-          {patient && (
-            <>
-              <span className="uppercase">{patient.name}</span> -{" "}
-              {t(`GENDER__${patient.gender}`)},{" "}
-              {patientAgeInYears(patient).toString()}yrs
-            </>
-          )}
-        </PatientDetail>
-        <PatientDetail name="IP/OP No." className="col-span-3">
-          {encounter?.patient_no}
-        </PatientDetail>
+      <div className="mb-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-y-1.5 border-2 border-secondary-400 p-2">
+  <PatientDetail name="Patient" className="col-span-1 md:col-span-2 lg:col-span-2">
+    {patient && (
+      <>
+        <span className="uppercase">{patient.name}</span> -{" "}
+        {t(`GENDER__${patient.gender}`)},{" "}
+        {patientAgeInYears(patient).toString()}yrs
+      </>
+    )}
+  </PatientDetail>
+  <PatientDetail name="IP/OP No." className="col-span-1 md:col-span-1 lg:col-span-1">
+    {encounter?.patient_no}
+  </PatientDetail>
 
-        <PatientDetail
-          name={
-            encounter
-              ? `${t(`encounter_suggestion__${encounter.suggestion}`)} on`
-              : ""
-          }
-          className="col-span-5"
-        >
-          {formatDate(encounter?.encounter_date)}
-        </PatientDetail>
-        <PatientDetail name="Bed" className="col-span-3">
-          {encounter?.current_bed?.bed_object.location_object?.name}
-          {" - "}
-          {encounter?.current_bed?.bed_object.name}
-        </PatientDetail>
+  <PatientDetail
+    name={
+      encounter
+        ? `${t(`encounter_suggestion__${encounter.suggestion}`)} on`
+        : ""
+    }
+    className="col-span-1 md:col-span-2 lg:col-span-2"
+  >
+    {formatDate(encounter?.encounter_date)}
+  </PatientDetail>
+  <PatientDetail name="Bed" className="col-span-1 md:col-span-1 lg:col-span-1">
+    {encounter?.current_bed?.bed_object.location_object?.name}
+    {" - "}
+    {encounter?.current_bed?.bed_object.name}
+  </PatientDetail>
+
+  <PatientDetail name="Allergy to medication" className="col-span-1 md:col-span-2 lg:col-span-4">
+    {patient?.allergies ?? "None"}
+  </PatientDetail>
+</div>
 
-        <PatientDetail name="Allergy to medication" className="col-span-8">
-          {patient?.allergies ?? "None"}
-        </PatientDetail>
-      </div>
 
-      <PrescriptionsTable items={normalPrescriptions} />
+      <PrescriptionsTable items={normalPrescriptions}/>
       <PrescriptionsTable items={prnPrescriptions} prn />
 
-      <div className="pt-12">
-        <p className="font-medium text-secondary-800">
+      <div className="pt-12 px-4">
+        <p className="font-medium text-secondary-800 text-base">
           Sign of the Consulting Doctor
         </p>
-        <PatientDetail name="Name of the Consulting Doctor">
-          {encounter?.treating_physician_object &&
-            formatName(encounter?.treating_physician_object)}
-        </PatientDetail>
+        <div className="w-full">
+          <PatientDetail name="Name of the Consulting Doctor">
+            {encounter?.treating_physician_object &&
+              formatName(encounter?.treating_physician_object)}
+          </PatientDetail>
+        </div>
         <p className="pt-6 text-center text-xs font-medium text-secondary-700">
           Generated on: {formatDateTime(new Date())}
         </p>
@@ -106,6 +107,8 @@ export default function PrescriptionsPrintPreview() {
           authorized the same by affixing signature.
         </p>
       </div>
+
+
     </PrintPreview>
   );
 }
@@ -150,31 +153,34 @@ const PrescriptionsTable = ({
   }
 
   if (!items.length) {
-    return;
+    return <div>No prescriptions available</div>; // Add a fallback message for empty items
   }
 
   return (
-    <table className="mb-8 mt-4 w-full border-collapse border-2 border-secondary-400">
-      <caption className="mb-2 caption-top text-lg font-bold">
-        {prn && "PRN"} Prescriptions
-      </caption>
-      <thead className="border-b-2 border-secondary-400 bg-secondary-50">
-        <tr>
-          <th className="max-w-52 p-1">Medicine</th>
-          <th className="p-1">Dosage</th>
-          <th className="p-1">Directions</th>
-          <th className="max-w-32 p-1">Notes / Instructions</th>
-        </tr>
-      </thead>
-      <tbody className="border-b-2 border-secondary-400">
-        {items.map((item) => (
-          <PrescriptionEntry key={item.id} obj={item} />
-        ))}
-      </tbody>
-    </table>
+    <div className="overflow-x-auto">
+      <table className="mb-8 mt-4 w-full max-w-full border-collapse border-2 border-secondary-400">
+        <caption className="mb-2 caption-top text-lg font-bold">
+          {prn && "PRN"} Prescriptions
+        </caption>
+        <thead className="border-b-2 border-secondary-400 bg-secondary-50">
+          <tr>
+            <th className="p-2 text-left text-sm md:text-base">Medicine</th>
+            <th className="p-2 text-left text-sm md:text-base">Dosage</th>
+            <th className="p-2 text-left text-sm md:text-base">Directions</th>
+            <th className="p-2 text-left text-sm md:text-base">Notes / Instructions</th>
+          </tr>
+        </thead>
+        <tbody className="border-b-2 border-secondary-400">
+          {items.map((item) => (
+            <PrescriptionEntry key={item.id} obj={item} />
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
 };
 
+
 const PrescriptionEntry = ({ obj }: { obj: Prescription }) => {
   const { t } = useTranslation();
   const medicine = obj.medicine_object;