From b689468077f9310b8b135b358357dc66b86000d7 Mon Sep 17 00:00:00 2001
From: Amjith Titus <amjithtitus09@gmail.com>
Date: Wed, 15 Jan 2025 17:14:40 +0530
Subject: [PATCH] Print Prescription cleanup

---
 public/locale/en.json                      |   7 +
 src/CAREUI/misc/PrintPreview.tsx           |   2 +-
 src/Utils/request/api.tsx                  |   4 +-
 src/pages/Encounters/PrintPrescription.tsx | 326 ++++++++++-----------
 4 files changed, 164 insertions(+), 175 deletions(-)

diff --git a/public/locale/en.json b/public/locale/en.json
index a8211b379a4..6b1d2e0558d 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -593,6 +593,7 @@
   "comments": "Comments",
   "communication__sent_to_hcx": "Sent communication to HCX",
   "completed": "Completed",
+  "computer_generated_prescription": "This is a computer generated prescription.",
   "configure": "Configure",
   "configure_facility": "Configure Facility",
   "confirm": "Confirm",
@@ -865,6 +866,7 @@
   "encounter_class__obsenc": "Observation",
   "encounter_class__planned": "Planned",
   "encounter_class__vr": "Virtual",
+  "encounter_date": "Encounter Date",
   "encounter_date_field_label__A": "Date & Time of Admission to the Facility",
   "encounter_date_field_label__DC": "Date & Time of Domiciliary Care commencement",
   "encounter_date_field_label__DD": "Date & Time of Consultation",
@@ -1064,6 +1066,7 @@
   "general_info_detail": "Provide the patient's personal details, including name, date of birth, gender, and contact information for accurate identification and communication.",
   "generate_link_abha": "Generate/Link ABHA Number",
   "generate_report": "Generate Report",
+  "generated_on": "Generated on:",
   "generated_summary_caution": "This is a computer generated summary using the information captured in the CARE system.",
   "generating": "Generating",
   "generating_discharge_summary": "Generating discharge summary",
@@ -1288,6 +1291,7 @@
   "medication_taken_between": "Medication Taken Between",
   "medicine": "Medicine",
   "medicine_administration_history": "Medicine Administration History",
+  "medicine_prescription": "Medicine Prescription",
   "medicines_administered": "Medicine(s) administered",
   "medicines_administered_error": "Error administering medicine(s)",
   "member_id_required": "Member Id is required",
@@ -1370,6 +1374,7 @@
   "no_log_update_delta": "No changes since previous log update",
   "no_log_updates": "No log updates found",
   "no_medical_history_available": "No Medical History Available",
+  "no_medications_found_for_this_encounter": "No medications found for this encounter.",
   "no_notices_for_you": "No notices for you.",
   "no_observations": "No Observations",
   "no_ongoing_medications": "No Ongoing Medications",
@@ -1613,6 +1618,7 @@
   "prescription_logs": "Prescription Logs",
   "prescription_medication": "Prescription Medication",
   "prescription_medications": "Prescription Medications",
+  "prescriptions": "Prescriptions",
   "prescriptions__dosage_frequency": "Dosage & Frequency",
   "prescriptions__medicine": "Medicine",
   "prescriptions__route": "Route",
@@ -1627,6 +1633,7 @@
   "principal": "Principal",
   "principal_diagnosis": "Principal diagnosis",
   "print": "Print",
+  "print_prescriptions": "Print Prescriptions",
   "print_referral_letter": "Print Referral Letter",
   "priority": "Priority",
   "prn_prescription": "PRN Prescription",
diff --git a/src/CAREUI/misc/PrintPreview.tsx b/src/CAREUI/misc/PrintPreview.tsx
index daf79ecbb34..c34c75f3299 100644
--- a/src/CAREUI/misc/PrintPreview.tsx
+++ b/src/CAREUI/misc/PrintPreview.tsx
@@ -29,7 +29,7 @@ export default function PrintPreview(props: Props) {
 
   return (
     <Page title={props.title}>
-      <div className="mx-auto my-8 w-[50rem]">
+      <div className="mx-auto my-8 w-[50rem] border rounded-xl border-gray-200 shadow-2xl overflow-hidden">
         <div className="top-0 z-20 flex gap-2 bg-secondary-100 px-2 py-4 xl:absolute xl:right-6 xl:top-8 xl:justify-end">
           <Button variant="primary" disabled={props.disabled} onClick={print}>
             <CareIcon icon="l-print" className="text-lg" />
diff --git a/src/Utils/request/api.tsx b/src/Utils/request/api.tsx
index eafc48e3c81..46b7ad2bedd 100644
--- a/src/Utils/request/api.tsx
+++ b/src/Utils/request/api.tsx
@@ -20,7 +20,7 @@ import {
   AppointmentPatientRegister,
 } from "@/pages/Patient/Utils";
 import { Encounter, EncounterEditRequest } from "@/types/emr/encounter";
-import { MedicationRequest } from "@/types/emr/medicationRequest";
+import { MedicationRequestRead } from "@/types/emr/medicationRequest";
 import { MedicationStatement } from "@/types/emr/medicationStatement";
 import { PartialPatientModel, Patient } from "@/types/emr/newPatient";
 import {
@@ -650,7 +650,7 @@ const routes = {
     list: {
       path: "/api/v1/patient/{patientId}/medication/request/",
       method: "GET",
-      TRes: Type<PaginatedResponse<MedicationRequest>>(),
+      TRes: Type<PaginatedResponse<MedicationRequestRead>>(),
     },
   },
 
diff --git a/src/pages/Encounters/PrintPrescription.tsx b/src/pages/Encounters/PrintPrescription.tsx
index c071091306d..f0a14759a9c 100644
--- a/src/pages/Encounters/PrintPrescription.tsx
+++ b/src/pages/Encounters/PrintPrescription.tsx
@@ -5,7 +5,6 @@ import { useTranslation } from "react-i18next";
 
 import PrintPreview from "@/CAREUI/misc/PrintPreview";
 
-import { Separator } from "@/components/ui/separator";
 import {
   Table,
   TableBody,
@@ -20,13 +19,15 @@ import { reverseFrequencyOption } from "@/components/Questionnaire/QuestionTypes
 import api from "@/Utils/request/api";
 import query from "@/Utils/request/query";
 import { formatPatientAge } from "@/Utils/utils";
+import { Encounter } from "@/types/emr/encounter";
 import {
   MEDICATION_REQUEST_TIMING_OPTIONS,
-  MedicationRequest,
+  MedicationRequestDosageInstruction,
+  MedicationRequestRead,
 } from "@/types/emr/medicationRequest";
 
 function getFrequencyDisplay(
-  timing?: MedicationRequest["dosage_instruction"][0]["timing"],
+  timing?: MedicationRequestDosageInstruction["timing"],
 ) {
   if (!timing) return undefined;
   const code = reverseFrequencyOption(timing);
@@ -38,7 +39,7 @@ function getFrequencyDisplay(
 }
 
 // Helper function to format dosage in Rx style
-function formatDosage(instruction: MedicationRequest["dosage_instruction"][0]) {
+function formatDosage(instruction: MedicationRequestDosageInstruction) {
   if (!instruction.dose_and_rate) return "";
 
   if (instruction.dose_and_rate.type === "calculated") {
@@ -54,7 +55,7 @@ function formatDosage(instruction: MedicationRequest["dosage_instruction"][0]) {
 }
 
 // Helper function to format dosage instructions in Rx style
-function formatSig(instruction: MedicationRequest["dosage_instruction"][0]) {
+function formatSig(instruction: MedicationRequestDosageInstruction) {
   const parts: string[] = [];
 
   // Add route if present
@@ -82,7 +83,7 @@ export const PrintPrescription = (props: {
   const { facilityId, encounterId } = props;
   const { t } = useTranslation();
 
-  const { data: encounter } = useQuery({
+  const { data: encounter } = useQuery<Encounter>({
     queryKey: ["encounter", encounterId],
     queryFn: query(api.encounter.get, {
       pathParams: { id: encounterId },
@@ -94,191 +95,171 @@ export const PrintPrescription = (props: {
     queryKey: ["medications", encounter?.patient?.id],
     queryFn: query(api.medicationRequest.list, {
       pathParams: { patientId: encounter?.patient?.id || "" },
-      queryParams: { encounter: encounterId },
+      queryParams: { encounter: encounterId, limit: 50, offset: 0 },
     }),
     enabled: !!encounter?.patient?.id,
   });
 
-  const normalMedications = medications?.results?.filter(
-    (m) => !m.dosage_instruction[0]?.as_needed_boolean,
-  );
-  const prnMedications = medications?.results?.filter(
-    (m) => m.dosage_instruction[0]?.as_needed_boolean,
-  );
-
   if (!medications?.results?.length) {
     return (
       <div className="flex h-[200px] items-center justify-center rounded-lg border-2 border-dashed p-4 text-muted-foreground">
-        No medications found for this encounter.
+        {t("no_medications_found_for_this_encounter")}
       </div>
     );
   }
 
+  // Group medications by prescriber
+  const medicationsByPrescriber = medications.results.reduce<
+    Record<string, MedicationRequestRead[]>
+  >((acc, med) => {
+    const prescriberId = med.created_by.id.toString();
+    if (!acc[prescriberId]) {
+      acc[prescriberId] = [];
+    }
+    acc[prescriberId].push(med);
+    return acc;
+  }, {});
+
   return (
     <PrintPreview
       title={
         encounter?.patient
-          ? `Prescriptions - ${encounter.patient.name}`
-          : "Print Prescriptions"
+          ? `${t("prescriptions")} - ${encounter.patient.name}`
+          : t("print_prescriptions")
       }
       disabled={!(encounter?.patient && medications)}
     >
-      <div className="mx-auto max-w-4xl space-y-4 p-4">
-        {/* Header */}
-        <div className="flex items-start justify-between border-b pb-2">
-          <div>
-            <h2 className="text-xl font-bold">{encounter?.facility?.name}</h2>
+      <div className="min-h-screen bg-white p-2 max-w-4xl mx-auto">
+        <div>
+          {/* Header */}
+          <div className="flex justify-between items-start mb-4 pb-2 border-b">
+            <div>
+              <h1 className="text-3xl font-semibold">
+                {encounter?.facility?.name}
+              </h1>
+              <h2 className="text-gray-500 uppercase text-sm tracking-wide mt-1 font-semibold">
+                {t("medicine_prescription")}
+              </h2>
+            </div>
+            <img
+              src={careConfig.mainLogo?.dark}
+              alt="Care Logo"
+              className="h-10 w-auto object-contain"
+            />
           </div>
-          <img
-            className="h-8 w-auto"
-            src={careConfig.mainLogo?.dark}
-            alt="care logo"
-          />
-        </div>
 
-        {/* Patient Details */}
-        <div className="grid grid-cols-2 gap-4 rounded-lg border p-2 text-sm">
-          <div className="space-y-1">
-            <PatientDetail name="Patient">
-              {encounter?.patient && (
-                <>
-                  <span className="uppercase">{encounter.patient.name}</span>
-                  <span className="ml-2 text-muted-foreground">
-                    ({t(`GENDER__${encounter.patient.gender}`)},{" "}
-                    {formatPatientAge(encounter.patient, true)})
-                  </span>
-                </>
-              )}
-            </PatientDetail>
-            <PatientDetail name="Encounter Date">
-              {encounter?.period?.start &&
-                format(new Date(encounter.period.start), "PPP")}
-            </PatientDetail>
-          </div>
-          {encounter?.external_identifier && (
-            <div>
-              <PatientDetail name="IP/OP No.">
-                {encounter.external_identifier}
-              </PatientDetail>
+          {/* Patient Details */}
+          <div className="grid grid-cols-2 gap-x-12 gap-y-6 mb-8">
+            <div className="space-y-3">
+              <DetailRow
+                label={t("patient")}
+                value={encounter?.patient?.name}
+                isStrong
+              />
+              <DetailRow
+                label={`${t("age")} / ${t("sex")}`}
+                value={
+                  encounter?.patient
+                    ? `${formatPatientAge(encounter.patient, true)}, ${t(`GENDER__${encounter.patient.gender}`)}`
+                    : undefined
+                }
+                isStrong
+              />
             </div>
-          )}
-        </div>
+            <div className="space-y-3">
+              <DetailRow
+                label={t("encounter_date")}
+                value={
+                  encounter?.period?.start &&
+                  format(new Date(encounter.period.start), "dd MMM yyyy, EEEE")
+                }
+                isStrong
+              />
+              <DetailRow
+                label={t("mobile_number")}
+                value={encounter?.patient?.phone_number}
+                isStrong
+              />
+            </div>
+          </div>
 
-        {/* Prescription Table */}
-        <div className="w-full">
-          <h2 className="text-center text-xl font-semibold text-[#046C4E] mb-4">
-            PRESCRIPTION
-          </h2>
-          <Table className="border border-gray-200">
-            <TableHeader className="bg-gray-50">
-              <TableRow>
-                <TableHead className="w-12 text-center text-[#046C4E] font-medium">
-                  #
-                </TableHead>
-                <TableHead className="w-[15%] text-[#046C4E] font-medium">
-                  Medicine
-                </TableHead>
-                <TableHead className="w-[10%] text-[#046C4E] font-medium">
-                  Dose
-                </TableHead>
-                <TableHead className="text-[#046C4E] font-medium">
-                  Frequency
-                </TableHead>
-                <TableHead className="text-[#046C4E] font-medium">
-                  Duration
-                </TableHead>
-                <TableHead className="w-1/3 text-[#046C4E] font-medium">
-                  Remarks
-                </TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {normalMedications?.map((medication, index) => {
-                const instruction = medication.dosage_instruction[0];
-                const frequency = getFrequencyDisplay(instruction?.timing);
-                const dosage = formatDosage(instruction);
-                const duration = instruction?.timing?.repeat?.bounds_duration;
-                const remarks = formatSig(instruction);
+          {/* Prescription Symbol */}
+          <div className="text-2xl font-semibold mb-3">℞</div>
 
-                return (
-                  <TableRow key={medication.id} className="bg-white">
-                    <TableCell className="text-center border-t">
-                      {index + 1}
-                    </TableCell>
-                    <TableCell className="border-t">
-                      <div className="font-medium">
-                        {medication.medication?.display}
-                      </div>
-                    </TableCell>
-                    <TableCell className="border-t">{dosage}</TableCell>
-                    <TableCell className="border-t">
-                      {frequency?.meaning}
-                      {instruction?.additional_instruction?.[0]?.display && (
-                        <div className="text-sm text-gray-600">
-                          {instruction.additional_instruction[0].display}
-                        </div>
-                      )}
-                    </TableCell>
-                    <TableCell className="border-t">
-                      {duration ? `${duration.value} ${duration.unit}` : "-"}
-                    </TableCell>
-                    <TableCell className="border-t text-gray-600">
-                      {remarks || "-"}
-                    </TableCell>
-                  </TableRow>
-                );
-              })}
+          {/* Medications Table */}
+          <div className="border rounded-lg overflow-hidden">
+            <Table className="">
+              <TableHeader>
+                <TableRow className="divide-x bg-gray-100">
+                  <TableHead>{t("medicine")}</TableHead>
+                  <TableHead>{t("dosage")}</TableHead>
+                  <TableHead>{t("frequency")}</TableHead>
+                  <TableHead>{t("duration")}</TableHead>
+                  <TableHead>{t("instructions")}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {medications.results.map((medication) => {
+                  const instruction = medication.dosage_instruction[0];
+                  const frequency = getFrequencyDisplay(instruction?.timing);
+                  const dosage = formatDosage(instruction);
+                  const duration = instruction?.timing?.repeat?.bounds_duration;
+                  const remarks = formatSig(instruction);
 
-              {/* PRN Medications */}
-              {prnMedications?.map((medication, index) => {
-                const instruction = medication.dosage_instruction[0];
-                const dosage = formatDosage(instruction);
-                const remarks =
-                  instruction?.as_needed_for?.display || "As needed (PRN)";
+                  return (
+                    <TableRow
+                      key={medication.id}
+                      className="divide-x font-medium"
+                    >
+                      <TableCell className="py-2 px-3">
+                        {medication.medication?.display}
+                      </TableCell>
+                      <TableCell className="py-2 px-3">{dosage}</TableCell>
+                      <TableCell className="py-2 px-3">
+                        {instruction?.as_needed_boolean
+                          ? `${t("as_needed_prn")} (${instruction?.as_needed_for?.display})`
+                          : frequency?.meaning}
+                        {instruction?.additional_instruction?.[0]?.display && (
+                          <div className="text-sm text-gray-600">
+                            {instruction.additional_instruction[0].display}
+                          </div>
+                        )}
+                      </TableCell>
+                      <TableCell className="py-2 px-3">
+                        {duration ? `${duration.value} ${duration.unit}` : "-"}
+                      </TableCell>
+                      <TableCell className="py-2 px-3">
+                        {remarks || "-"}
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </div>
 
+          {/* Doctor's Signature */}
+          <div className="mt-6 flex justify-end gap-8">
+            {Object.entries(medicationsByPrescriber).map(
+              ([prescriberId, meds]) => {
+                const prescriber = meds[0].created_by;
                 return (
-                  <TableRow key={medication.id} className="bg-white">
-                    <TableCell className="text-center border-t">
-                      {(normalMedications?.length || 0) + index + 1}
-                    </TableCell>
-                    <TableCell className="border-t">
-                      <div className="font-medium">
-                        {medication.medication?.display}
-                      </div>
-                    </TableCell>
-                    <TableCell className="border-t">{dosage}</TableCell>
-                    <TableCell className="border-t">
-                      {t("as_needed_prn")}
-                    </TableCell>
-                    <TableCell className="border-t"></TableCell>
-                    <TableCell className="border-t text-gray-600">
-                      {remarks}
-                    </TableCell>
-                  </TableRow>
+                  <div key={prescriberId} className="text-center">
+                    <p className="text-sm text-gray-600 font-semibold">
+                      Dr. {prescriber.first_name} {prescriber.last_name}
+                    </p>
+                  </div>
                 );
-              })}
-            </TableBody>
-          </Table>
-        </div>
-
-        {/* Footer */}
-        <div className="mt-8 space-y-4">
-          <div className="flex justify-end">
-            <div className="w-48 space-y-1 text-center">
-              <Separator className="mt-6" />
-              <p className="text-xs text-muted-foreground">
-                Sign of the Consulting Doctor
-              </p>
-            </div>
+              },
+            )}
           </div>
 
-          <div className="space-y-1 pt-2 text-center text-[10px] text-muted-foreground">
-            <p>Generated on: {format(new Date(), "PPP 'at' p")}</p>
+          {/* Footer */}
+          <div className="mt-8 space-y-1 pt-2 text-[10px] text-muted-foreground flex justify-between">
             <p>
-              This is a computer generated prescription. It shall be issued to
-              the patient only after the concerned doctor has verified the
-              content and authorized the same by affixing signature.
+              {t("generated_on")} {format(new Date(), "PPP 'at' p")}
             </p>
+            <p>{t("computer_generated_prescription")}</p>
           </div>
         </div>
       </div>
@@ -286,21 +267,22 @@ export const PrintPrescription = (props: {
   );
 };
 
-const PatientDetail = ({
-  name,
-  children,
+const DetailRow = ({
+  label,
+  value,
+  isStrong = false,
 }: {
-  name: string;
-  children?: React.ReactNode;
+  label: string;
+  value?: string | null;
+  isStrong?: boolean;
 }) => {
   return (
-    <div className="space-y-0.5">
-      <p className="text-xs text-muted-foreground">{name}</p>
-      {children != null ? (
-        <p className="font-medium">{children}</p>
-      ) : (
-        <div className="h-4 w-32 animate-pulse rounded bg-secondary" />
-      )}
+    <div className="flex">
+      <span className="text-gray-600 w-32">{label}</span>
+      <span className="text-gray-600">: </span>
+      <span className={`ml-1 ${isStrong ? "font-semibold" : ""}`}>
+        {value || "-"}
+      </span>
     </div>
   );
 };