From e4d2a0f2fc405e611393f34544758ff2c166a1dc Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Wed, 4 Oct 2023 09:56:13 +0530
Subject: [PATCH] Prescription: show prescribed on & by and discontinued date
 in detail card (#6365)

---
 src/CAREUI/display/RecordMeta.tsx             | 18 ++++++++++-----
 .../Medicine/PrescriptionDetailCard.tsx       | 22 +++++++++++++++++--
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/CAREUI/display/RecordMeta.tsx b/src/CAREUI/display/RecordMeta.tsx
index 83928f1f23a..48cc8d370ad 100644
--- a/src/CAREUI/display/RecordMeta.tsx
+++ b/src/CAREUI/display/RecordMeta.tsx
@@ -11,13 +11,14 @@ interface Props {
     last_name: string;
     last_login: string | undefined;
   };
+  inlineUser?: boolean;
 }
 
 /**
  * A generic component to display relative time along with a tooltip and a user
  * if provided.
  */
-const RecordMeta = ({ time, user, prefix, className }: Props) => {
+const RecordMeta = ({ time, user, prefix, className, inlineUser }: Props) => {
   const isOnline = user && isUserOnline(user);
 
   let child = (
@@ -25,14 +26,15 @@ const RecordMeta = ({ time, user, prefix, className }: Props) => {
       <span className="underline">{relativeTime(time)}</span>
       <span className="tooltip-text tooltip-bottom flex -translate-x-1/2 gap-1 text-xs font-medium tracking-wider">
         {formatDateTime(time)}
-        {user && (
-          <>
+        {user && !inlineUser && (
+          <span className="flex items-center gap-1">
+            by
             <CareIcon className="care-l-user" />
             {user.first_name} {user.last_name}
             {isOnline && (
-              <div className="h-1 w-1 rounded-full bg-primary-500" />
+              <div className="h-1.5 w-1.5 rounded-full bg-primary-400" />
             )}
-          </>
+          </span>
         )}
       </span>
     </div>
@@ -43,7 +45,13 @@ const RecordMeta = ({ time, user, prefix, className }: Props) => {
       <div className="flex items-center gap-1">
         {prefix}
         {child}
+        {user && inlineUser && <span>by</span>}
         {user && <CareIcon className="care-l-user" />}
+        {user && inlineUser && (
+          <span className="font-medium">
+            {user.first_name} {user.last_name}
+          </span>
+        )}
       </div>
     );
   }
diff --git a/src/Components/Medicine/PrescriptionDetailCard.tsx b/src/Components/Medicine/PrescriptionDetailCard.tsx
index 6da4fa7ae8d..bf27aa34068 100644
--- a/src/Components/Medicine/PrescriptionDetailCard.tsx
+++ b/src/Components/Medicine/PrescriptionDetailCard.tsx
@@ -5,6 +5,7 @@ import ReadMore from "../Common/components/Readmore";
 import ButtonV2 from "../Common/components/ButtonV2";
 import { PrescriptionActions } from "../../Redux/actions";
 import { useTranslation } from "react-i18next";
+import RecordMeta from "../../CAREUI/display/RecordMeta";
 
 export default function PrescriptionDetailCard({
   prescription,
@@ -29,7 +30,7 @@ export default function PrescriptionDetailCard({
         prescription.discontinued && "bg-gray-200 opacity-80"
       )}
     >
-      <div className="flex flex-1 flex-col gap-2">
+      <div className="flex flex-1 flex-col">
         <div>
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-4">
@@ -83,7 +84,7 @@ export default function PrescriptionDetailCard({
           </div>
         </div>
 
-        <div className="mt-2 grid grid-cols-9 items-center gap-2">
+        <div className="mt-4 grid grid-cols-9 items-center gap-2">
           <Detail className="col-span-9 md:col-span-5" label={t("medicine")}>
             {prescription.medicine_object?.name ?? prescription.medicine_old}
           </Detail>
@@ -146,6 +147,23 @@ export default function PrescriptionDetailCard({
             </Detail>
           )}
         </div>
+
+        <div className="flex flex-col gap-1 text-xs text-gray-600 md:mt-3 md:flex-row md:items-center">
+          <span className="flex gap-1">
+            Prescribed
+            <RecordMeta
+              time={prescription.created_date}
+              user={prescription.prescribed_by}
+              inlineUser
+            />
+          </span>
+          {prescription.discontinued && (
+            <span className="flex gap-1">
+              and was discontinued
+              <RecordMeta time={prescription.discontinued_date} />
+            </span>
+          )}
+        </div>
       </div>
 
       {props.children}