Show medicine's generic in prescriptions table and details card (#8137)

* fixes #8135; show medicine generic in prescriptions table * show generic and brand in prescription details card * fix cypress
ohcnetwork · Jul 17, 2024 · 7264652 · 7264652
1 parent de37c31
commit 7264652
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 54 deletions.
diff --git a/cypress/pageobject/Patient/PatientPrescription.ts b/cypress/pageobject/Patient/PatientPrescription.ts
@@ -28,7 +28,7 @@ export class PatientPrescription {
   }
 
   clickAdministerButton() {
-    cy.get("#administer-medicine").should("be.visible");
+    cy.get("#administer-medicine").scrollIntoView().should("be.visible");
     cy.verifyAndClickElement("#administer-medicine", "Administer");
   }
 

diff --git a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTableRow.tsx b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTableRow.tsx
@@ -182,30 +182,35 @@ export default function MedicineAdministrationTableRow({
           onClick={() => setShowDetails(true)}
         >
           <div className="flex flex-col gap-1 lg:flex-row lg:justify-between lg:gap-2">
-            <div className="flex items-center gap-2">
-              <span
-                className={classNames(
-                  "text-sm font-semibold",
-                  prescription.discontinued
-                    ? "text-secondary-700"
-                    : "text-secondary-900",
-                )}
-              >
-                {prescription.medicine_object?.name ??
-                  prescription.medicine_old}
-              </span>
-
-              {prescription.discontinued && (
-                <span className="hidden rounded-full border border-secondary-500 bg-secondary-200 px-1.5 text-xs font-medium text-secondary-700 lg:block">
-                  {t("discontinued")}
+            <div className="flex flex-col gap-1">
+              <div className="flex items-center gap-2">
+                <span
+                  className={classNames(
+                    "text-sm font-semibold uppercase",
+                    prescription.discontinued
+                      ? "text-secondary-700"
+                      : "text-secondary-900",
+                  )}
+                >
+                  {prescription.medicine_object?.name ??
+                    prescription.medicine_old}
                 </span>
-              )}
 
-              {prescription.route && (
-                <span className="hidden rounded-full border border-blue-500 bg-blue-100 px-1.5 text-xs font-medium text-blue-700 lg:block">
-                  {t(prescription.route)}
-                </span>
-              )}
+                {prescription.discontinued && (
+                  <span className="hidden rounded-full border border-secondary-500 bg-secondary-200 px-1.5 text-xs font-medium text-secondary-700 lg:block">
+                    {t("discontinued")}
+                  </span>
+                )}
+
+                {prescription.route && (
+                  <span className="hidden rounded-full border border-blue-500 bg-blue-100 px-1.5 text-xs font-medium text-blue-700 lg:block">
+                    {t(prescription.route)}
+                  </span>
+                )}
+              </div>
+              <span className="text-xs font-medium capitalize text-secondary-700">
+                {prescription.medicine_object?.generic}
+              </span>
             </div>
 
             <div className="flex gap-1 text-xs font-semibold text-secondary-900 lg:flex-col lg:px-2 lg:text-center">

diff --git a/src/Components/Medicine/PrescriptionDetailCard.tsx b/src/Components/Medicine/PrescriptionDetailCard.tsx
@@ -30,6 +30,8 @@ export default function PrescriptionDetailCard({
     collapsible && prescription.discontinued,
   );
 
+  const medicine = prescription.medicine_object;
+
   return (
     <div
       className={classNames(
@@ -59,8 +61,7 @@ export default function PrescriptionDetailCard({
                 )}
               >
                 {isCollapsed ? (
-                  prescription.medicine_object?.name ??
-                  prescription.medicine_old
+                  medicine?.name ?? prescription.medicine_old
                 ) : (
                   <>
                     {prescription.prescription_type === "DISCHARGE" &&
@@ -126,47 +127,54 @@ export default function PrescriptionDetailCard({
         </div>
         {!isCollapsed && (
           <div className="mt-4 grid grid-cols-10 items-center gap-2">
-            <Detail
-              className={
-                prescription.dosage_type === "TITRATED"
-                  ? "col-span-10"
-                  : "col-span-10 md:col-span-4"
-              }
-              label={t("medicine")}
-            >
-              {prescription.medicine_object?.name ?? prescription.medicine_old}
-            </Detail>
-            <Detail
-              className="col-span-10 break-all sm:col-span-4"
-              label={t("route")}
-            >
-              {prescription.route &&
-                t("PRESCRIPTION_ROUTE_" + prescription.route)}
+            <Detail className="col-span-10">
+              <div className="flex flex-col gap-1">
+                <div className="flex items-center gap-3">
+                  <span className="font-semibold uppercase">
+                    {medicine?.name ?? prescription.medicine_old}
+                  </span>
+                </div>
+                {medicine?.type === "brand" && (
+                  <span className="text-xs text-secondary-600">
+                    Generic:{" "}
+                    <span className="capitalize text-secondary-800">
+                      {medicine.generic}
+                    </span>
+                    ; Brand:{" "}
+                    <span className="capitalize text-secondary-800">
+                      {medicine.company}
+                    </span>
+                  </span>
+                )}
+              </div>
             </Detail>
+
             {prescription.dosage_type === "TITRATED" ? (
               <>
-                <Detail
-                  className="col-span-5 sm:col-span-3"
-                  label={t("start_dosage")}
-                >
+                <Detail className="col-span-5" label={t("start_dosage")}>
                   {prescription.base_dosage}
                 </Detail>
-                <Detail
-                  className="col-span-5 sm:col-span-3"
-                  label={t("target_dosage")}
-                >
+                <Detail className="col-span-5" label={t("target_dosage")}>
                   {prescription.target_dosage}
                 </Detail>
               </>
             ) : (
               <Detail
-                className="col-span-10 sm:col-span-6 md:col-span-2"
+                className="col-span-10 sm:col-span-6 md:col-span-4"
                 label={t("dosage")}
               >
                 {prescription.base_dosage}
               </Detail>
             )}
 
+            <Detail
+              className="col-span-10 break-all sm:col-span-6"
+              label={t("route")}
+            >
+              {prescription.route &&
+                t("PRESCRIPTION_ROUTE_" + prescription.route)}
+            </Detail>
+
             {prescription.dosage_type === "PRN" ? (
               <>
                 <Detail
@@ -257,15 +265,17 @@ export default function PrescriptionDetailCard({
 
 const Detail = (props: {
   className?: string;
-  label: string;
+  label?: string;
   children?: React.ReactNode;
 }) => {
   const { t } = useTranslation();
   return (
     <div className={classNames("flex flex-col gap-1", props.className)}>
-      <label className="text-sm font-medium text-secondary-600">
-        {props.label}
-      </label>
+      {props.label && (
+        <label className="text-sm font-medium text-secondary-600">
+          {props.label}
+        </label>
+      )}
       <div className="cui-input-base w-full">
         {props.children ? (
           <span className="font-medium">{props.children}</span>