From a894ce6995f9dce2c6fec6997bd2e0878f6d235a Mon Sep 17 00:00:00 2001
From: Amjith Titus <amjithtitus09@gmail.com>
Date: Wed, 22 Jan 2025 13:12:23 +0530
Subject: [PATCH] Add Authored On field (#10094)

---
 public/locale/en.json                         |  1 +
 .../MedicationRequestQuestion.tsx             | 30 +++++++++++++++--
 src/components/ui/date-time-picker.tsx        | 33 ++++++++++---------
 src/types/emr/medicationRequest.ts            |  3 ++
 4 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/public/locale/en.json b/public/locale/en.json
index e7ab17781fc..42547268ec5 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -455,6 +455,7 @@
   "audit_log": "Audit Log",
   "auth_login_title": "Authorized Login",
   "auth_method_unsupported": "This authentication method is not supported, please try a different method",
+  "authored_on": "Authored On",
   "authorize_shift_delete": "Authorize shift delete",
   "auto_generated_for_care": "Auto Generated for Care",
   "autofilled_fields": "Autofilled Fields",
diff --git a/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx b/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
index 6e34f840b3d..f078fa982a2 100644
--- a/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
@@ -20,6 +20,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
+import { DateTimePicker } from "@/components/ui/date-time-picker";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -84,6 +85,7 @@ export function MedicationRequestQuestion({
       ...medications,
       {
         ...parseMedicationStringToRequest(medication),
+        authored_on: new Date().toISOString(),
       },
     ];
     updateQuestionnaireResponseCB({
@@ -166,12 +168,12 @@ export function MedicationRequestQuestion({
         <div className="md:overflow-x-auto w-auto pb-2">
           <div className="min-w-fit">
             <div
-              className={cn("max-w-[2144px] relative lg:border rounded-md", {
+              className={cn("max-w-[2304px] relative lg:border rounded-md", {
                 "bg-gray-50/50": !desktopLayout,
               })}
             >
               {/* Header - Only show on desktop */}
-              <div className="hidden lg:grid grid-cols-[280px,180px,170px,160px,300px,180px,250px,180px,160px,200px,48px] bg-gray-50 border-b text-sm font-medium text-gray-500">
+              <div className="hidden lg:grid grid-cols-[280px,180px,170px,160px,300px,180px,250px,180px,160px,200px,180px,48px] bg-gray-50 border-b text-sm font-medium text-gray-500">
                 <div className="font-semibold text-gray-600 p-3 border-r">
                   {t("medicine")}
                 </div>
@@ -199,6 +201,9 @@ export function MedicationRequestQuestion({
                 <div className="font-semibold text-gray-600 p-3 border-r">
                   {t("intent")}
                 </div>
+                <div className="font-semibold text-gray-600 p-3 border-r">
+                  {t("authored_on")}
+                </div>
                 <div className="font-semibold text-gray-600 p-3 border-r">
                   {t("notes")}
                 </div>
@@ -438,7 +443,7 @@ const MedicationRequestGridRow: React.FC<MedicationRequestGridRowProps> = ({
   };
 
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-[280px,180px,170px,160px,300px,180px,250px,180px,160px,200px,48px] border-b hover:bg-gray-50/50">
+    <div className="grid grid-cols-1 lg:grid-cols-[280px,180px,170px,160px,300px,180px,250px,180px,160px,200px,180px,48px] border-b hover:bg-gray-50/50">
       {/* Medicine Name */}
       <div className="lg:p-4 lg:px-2 lg:py-1 flex items-center justify-between lg:justify-start lg:col-span-1 lg:border-r font-medium overflow-hidden text-sm">
         <span className="break-words line-clamp-2 hidden lg:block">
@@ -742,6 +747,24 @@ const MedicationRequestGridRow: React.FC<MedicationRequestGridRowProps> = ({
           </SelectContent>
         </Select>
       </div>
+      {/* Authored On */}
+      <div className="lg:px-1 lg:py-1 lg:border-r overflow-hidden">
+        <Label className="mb-1.5 block text-sm lg:hidden">
+          {t("authored_on")}
+        </Label>
+        <DateTimePicker
+          value={
+            medication.authored_on
+              ? new Date(medication.authored_on)
+              : undefined
+          }
+          onChange={(date) => {
+            if (!date) return;
+            onUpdate?.({ authored_on: date.toISOString() });
+          }}
+          disabled={disabled}
+        />
+      </div>
       {/* Notes */}
       <div className="lg:px-2 lg:py-1 lg:border-r overflow-hidden">
         <Label className="mb-1.5 block text-sm lg:hidden">{t("notes")}</Label>
@@ -775,6 +798,7 @@ const MedicationRequestGridRow: React.FC<MedicationRequestGridRowProps> = ({
           />
         )}
       </div>
+
       {/* Remove Button */}
       <div className="hidden lg:flex lg:px-2 lg:py-1 items-center justify-center sticky right-0 bg-white shadow-[-12px_0_15px_-4px_rgba(0,0,0,0.15)] w-12">
         <Button
diff --git a/src/components/ui/date-time-picker.tsx b/src/components/ui/date-time-picker.tsx
index 5a791ada2d1..e4874613c3c 100644
--- a/src/components/ui/date-time-picker.tsx
+++ b/src/components/ui/date-time-picker.tsx
@@ -37,24 +37,27 @@ export function DateTimePicker({
 
   const handleTimeChange = (
     type: "hour" | "minute" | "ampm",
-    value: string,
+    selectedValue: string,
   ) => {
-    if (value) {
-      const newDate = new Date(value);
-      if (type === "hour") {
-        newDate.setHours(
-          (parseInt(value) % 12) + (newDate.getHours() >= 12 ? 12 : 0),
-        );
-      } else if (type === "minute") {
-        newDate.setMinutes(parseInt(value));
-      } else if (type === "ampm") {
-        const currentHours = newDate.getHours();
-        newDate.setHours(
-          value === "PM" ? currentHours + 12 : currentHours - 12,
-        );
+    if (!value) return;
+    const newDate = new Date(value);
+
+    if (type === "hour") {
+      newDate.setHours(
+        (parseInt(selectedValue) % 12) + (newDate.getHours() >= 12 ? 12 : 0),
+      );
+    } else if (type === "minute") {
+      newDate.setMinutes(parseInt(selectedValue));
+    } else if (type === "ampm") {
+      const currentHours = newDate.getHours();
+      const isPM = selectedValue === "PM";
+      if (isPM && currentHours < 12) {
+        newDate.setHours(currentHours + 12);
+      } else if (!isPM && currentHours >= 12) {
+        newDate.setHours(currentHours - 12);
       }
-      onChange?.(newDate);
     }
+    onChange?.(newDate);
   };
 
   return (
diff --git a/src/types/emr/medicationRequest.ts b/src/types/emr/medicationRequest.ts
index c102fac90a6..8bd49281e2a 100644
--- a/src/types/emr/medicationRequest.ts
+++ b/src/types/emr/medicationRequest.ts
@@ -161,6 +161,7 @@ export interface MedicationRequest {
   encounter?: string; // UUID
   dosage_instruction: MedicationRequestDosageInstruction[];
   note?: string;
+  authored_on: string;
 }
 
 export interface MedicationRequestRead {
@@ -179,6 +180,7 @@ export interface MedicationRequestRead {
   modified_date: string;
   created_by: UserBareMinimum;
   updated_by: UserBareMinimum;
+  authored_on: string;
 }
 
 export const MEDICATION_REQUEST_TIMING_OPTIONS: Record<
@@ -519,6 +521,7 @@ export function parseMedicationStringToRequest(
     intent: "order",
     category: "inpatient",
     priority: "routine",
+    authored_on: new Date().toISOString(),
   };
 
   return medicationRequest;