From e7746cf8efa18bba575f4acee18e4855d098963d Mon Sep 17 00:00:00 2001
From: Gigin George <mail.gigin@gmail.com>
Date: Tue, 7 Jan 2025 12:55:51 +0530
Subject: [PATCH 1/8] Update Questionnaire Styling

---
 .../Questionnaire/QuestionLabel.tsx           |  27 +++++
 .../QuestionTypes/BooleanQuestion.tsx         |  78 ++++++------
 .../QuestionTypes/ChoiceQuestion.tsx          |  48 +++-----
 .../QuestionTypes/DateTimeQuestion.tsx        | 112 ++++++++----------
 .../QuestionTypes/DiagnosisQuestion.tsx       |  11 +-
 .../MedicationRequestQuestion.tsx             |  11 +-
 .../QuestionTypes/NumberQuestion.tsx          |  26 ++--
 .../QuestionTypes/QuestionGroup.tsx           |   2 +-
 .../QuestionTypes/QuestionInput.tsx           |  12 +-
 .../QuestionTypes/SymptomQuestion.tsx         |  11 +-
 .../QuestionTypes/TextQuestion.tsx            |   9 +-
 11 files changed, 156 insertions(+), 191 deletions(-)
 create mode 100644 src/components/Questionnaire/QuestionLabel.tsx

diff --git a/src/components/Questionnaire/QuestionLabel.tsx b/src/components/Questionnaire/QuestionLabel.tsx
new file mode 100644
index 00000000000..17855845b0f
--- /dev/null
+++ b/src/components/Questionnaire/QuestionLabel.tsx
@@ -0,0 +1,27 @@
+import { Label } from "@/components/ui/label";
+
+import type { Question } from "@/types/questionnaire/question";
+
+interface QuestionLabelProps {
+  question: Question;
+  className?: string;
+}
+
+export function QuestionLabel({
+  question,
+  className = "text-base font-medium block",
+}: QuestionLabelProps) {
+  return (
+    <Label className={className}>
+      <div className="flex justify-between items-center text-gray-800 font-semibold">
+        <div>
+          {question.text}
+          {question.required && <span className="ml-1 text-red-500">*</span>}
+        </div>
+        {question.unit?.code && (
+          <span className="text-sm text-gray-500">{question.unit.code}</span>
+        )}
+      </div>
+    </Label>
+  );
+}
diff --git a/src/components/Questionnaire/QuestionTypes/BooleanQuestion.tsx b/src/components/Questionnaire/QuestionTypes/BooleanQuestion.tsx
index 905a50122da..b2b094790b4 100644
--- a/src/components/Questionnaire/QuestionTypes/BooleanQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/BooleanQuestion.tsx
@@ -20,48 +20,42 @@ export function BooleanQuestion({
   clearError,
 }: BooleanQuestionProps) {
   return (
-    <div className="space-y-2">
-      <Label className="text-sm font-normal">
-        {question.text}
-        {question.required && <span className="ml-1 text-red-500">*</span>}
-      </Label>
-      <RadioGroup
-        value={questionnaireResponse.values[0]?.value?.toString()}
-        onValueChange={(value) => {
-          clearError();
-          updateQuestionnaireResponseCB({
-            ...questionnaireResponse,
-            values: [
-              {
-                type: "boolean",
-                value: value === "true",
-              },
-            ],
-          });
-        }}
-        disabled={disabled}
-      >
-        <div className="flex items-center space-x-6">
-          <div className="flex items-center space-x-2">
-            <RadioGroupItem value="true" id={`${question.id}-true`} />
-            <Label
-              htmlFor={`${question.id}-true`}
-              className="text-sm font-normal"
-            >
-              True
-            </Label>
-          </div>
-          <div className="flex items-center space-x-2">
-            <RadioGroupItem value="false" id={`${question.id}-false`} />
-            <Label
-              htmlFor={`${question.id}-false`}
-              className="text-sm font-normal"
-            >
-              False
-            </Label>
-          </div>
+    <RadioGroup
+      value={questionnaireResponse.values[0]?.value?.toString()}
+      onValueChange={(value) => {
+        clearError();
+        updateQuestionnaireResponseCB({
+          ...questionnaireResponse,
+          values: [
+            {
+              type: "boolean",
+              value: value === "true",
+            },
+          ],
+        });
+      }}
+      disabled={disabled}
+    >
+      <div className="flex items-center space-x-6">
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem value="true" id={`${question.id}-true`} />
+          <Label
+            htmlFor={`${question.id}-true`}
+            className="text-sm font-normal"
+          >
+            True
+          </Label>
         </div>
-      </RadioGroup>
-    </div>
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem value="false" id={`${question.id}-false`} />
+          <Label
+            htmlFor={`${question.id}-false`}
+            className="text-sm font-normal"
+          >
+            False
+          </Label>
+        </div>
+      </div>
+    </RadioGroup>
   );
 }
diff --git a/src/components/Questionnaire/QuestionTypes/ChoiceQuestion.tsx b/src/components/Questionnaire/QuestionTypes/ChoiceQuestion.tsx
index 39f3b66697e..4c0f7259bef 100644
--- a/src/components/Questionnaire/QuestionTypes/ChoiceQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/ChoiceQuestion.tsx
@@ -1,6 +1,5 @@
 import { memo } from "react";
 
-import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
@@ -30,7 +29,6 @@ export const ChoiceQuestion = memo(function ChoiceQuestion({
   questionnaireResponse,
   updateQuestionnaireResponseCB,
   disabled = false,
-  withLabel = true,
   clearError,
   index = 0,
 }: ChoiceQuestionProps) {
@@ -52,32 +50,24 @@ export const ChoiceQuestion = memo(function ChoiceQuestion({
   };
 
   return (
-    <div className="space-y-2">
-      {withLabel && (
-        <Label className="text-base font-medium">
-          {question.text}
-          {question.required && <span className="ml-1 text-red-500">*</span>}
-        </Label>
-      )}
-      <Select
-        value={currentValue}
-        onValueChange={handleValueChange}
-        disabled={disabled}
-      >
-        <SelectTrigger className="w-full">
-          <SelectValue placeholder="Select an option" />
-        </SelectTrigger>
-        <SelectContent>
-          {options.map((option: AnswerOption) => (
-            <SelectItem
-              key={option.value.toString()}
-              value={option.value.toString()}
-            >
-              {properCase(option.display || option.value)}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-    </div>
+    <Select
+      value={currentValue}
+      onValueChange={handleValueChange}
+      disabled={disabled}
+    >
+      <SelectTrigger className="w-full">
+        <SelectValue placeholder="Select an option" />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((option: AnswerOption) => (
+          <SelectItem
+            key={option.value.toString()}
+            value={option.value.toString()}
+          >
+            {properCase(option.display || option.value)}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
   );
 });
diff --git a/src/components/Questionnaire/QuestionTypes/DateTimeQuestion.tsx b/src/components/Questionnaire/QuestionTypes/DateTimeQuestion.tsx
index b83e593452c..b20629e171c 100644
--- a/src/components/Questionnaire/QuestionTypes/DateTimeQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/DateTimeQuestion.tsx
@@ -7,7 +7,6 @@ import CareIcon from "@/CAREUI/icons/CareIcon";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import {
   Popover,
   PopoverContent,
@@ -15,10 +14,8 @@ import {
 } from "@/components/ui/popover";
 
 import type { QuestionnaireResponse } from "@/types/questionnaire/form";
-import type { Question } from "@/types/questionnaire/question";
 
 interface DateTimeQuestionProps {
-  question: Question;
   questionnaireResponse: QuestionnaireResponse;
   updateQuestionnaireResponseCB: (response: QuestionnaireResponse) => void;
   disabled?: boolean;
@@ -27,7 +24,6 @@ interface DateTimeQuestionProps {
 }
 
 export function DateTimeQuestion({
-  question,
   questionnaireResponse,
   updateQuestionnaireResponseCB,
   disabled,
@@ -39,39 +35,39 @@ export function DateTimeQuestion({
     : undefined;
 
   const handleSelect = (date: Date | undefined) => {
-    if (!date) {
-      handleUpdate(undefined);
-      return;
-    }
+    if (!date) return;
 
-    // Preserve the time if it exists, otherwise set to current time
+    clearError();
     if (currentValue) {
       date.setHours(currentValue.getHours());
       date.setMinutes(currentValue.getMinutes());
     }
-    handleUpdate(date);
-  };
 
-  const handleTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const timeString = e.target.value;
-    if (!timeString) return;
+    updateQuestionnaireResponseCB({
+      ...questionnaireResponse,
+      values: [
+        {
+          type: "dateTime",
+          value: date.toISOString(),
+        },
+      ],
+    });
+  };
 
-    const [hours, minutes] = timeString.split(":").map(Number);
-    const newDate = currentValue ? new Date(currentValue) : new Date();
-    newDate.setHours(hours);
-    newDate.setMinutes(minutes);
+  const handleTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const [hours, minutes] = event.target.value.split(":").map(Number);
+    if (isNaN(hours) || isNaN(minutes)) return;
 
-    handleUpdate(newDate);
-  };
+    const date = currentValue || new Date();
+    date.setHours(hours);
+    date.setMinutes(minutes);
 
-  const handleUpdate = (date: Date | undefined) => {
-    clearError();
     updateQuestionnaireResponseCB({
       ...questionnaireResponse,
       values: [
         {
           type: "dateTime",
-          value: date?.toISOString() || "",
+          value: date.toISOString(),
         },
       ],
     });
@@ -86,44 +82,38 @@ export function DateTimeQuestion({
   };
 
   return (
-    <div className="space-y-2">
-      <Label className="text-base font-medium">
-        {question.text}
-        {question.required && <span className="ml-1 text-red-500">*</span>}
-      </Label>
-      <div className="flex gap-2">
-        <Popover>
-          <PopoverTrigger asChild>
-            <Button
-              variant="outline"
-              className={cn(
-                "flex-1 justify-start text-left font-normal",
-                !currentValue && "text-muted-foreground",
-                classes,
-              )}
-              disabled={disabled}
-            >
-              <CareIcon icon="l-calender" className="mr-2 h-4 w-4" />
-              {currentValue ? format(currentValue, "PPP") : "Pick a date"}
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent className="w-auto p-0" align="start">
-            <Calendar
-              mode="single"
-              selected={currentValue}
-              onSelect={handleSelect}
-              initialFocus
-            />
-          </PopoverContent>
-        </Popover>
-        <Input
-          type="time"
-          className="w-[150px]"
-          value={formatTime(currentValue)}
-          onChange={handleTimeChange}
-          disabled={disabled || !currentValue}
-        />
-      </div>
+    <div className="flex gap-2">
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            className={cn(
+              "flex-1 justify-start text-left font-normal",
+              !currentValue && "text-muted-foreground",
+              classes,
+            )}
+            disabled={disabled}
+          >
+            <CareIcon icon="l-calender" className="mr-2 h-4 w-4" />
+            {currentValue ? format(currentValue, "PPP") : "Pick a date"}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={currentValue}
+            onSelect={handleSelect}
+            initialFocus
+          />
+        </PopoverContent>
+      </Popover>
+      <Input
+        type="time"
+        className="w-[150px]"
+        value={formatTime(currentValue)}
+        onChange={handleTimeChange}
+        disabled={disabled || !currentValue}
+      />
     </div>
   );
 }
diff --git a/src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx b/src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
index c1ad524503b..af85d52b152 100644
--- a/src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx
@@ -32,10 +32,8 @@ import {
 } from "@/types/emr/diagnosis/diagnosis";
 import { Code } from "@/types/questionnaire/code";
 import { QuestionnaireResponse } from "@/types/questionnaire/form";
-import { Question } from "@/types/questionnaire/question";
 
 interface DiagnosisQuestionProps {
-  question: Question;
   questionnaireResponse: QuestionnaireResponse;
   updateQuestionnaireResponseCB: (response: QuestionnaireResponse) => void;
   disabled?: boolean;
@@ -49,7 +47,6 @@ const DIAGNOSIS_INITIAL_VALUE: Partial<Diagnosis> = {
 };
 
 export function DiagnosisQuestion({
-  question,
   questionnaireResponse,
   updateQuestionnaireResponseCB,
   disabled,
@@ -90,11 +87,7 @@ export function DiagnosisQuestion({
   };
 
   return (
-    <div className="space-y-4">
-      <Label className="text-base font-medium">
-        {question.text}
-        {question.required && <span className="ml-1 text-red-500">*</span>}
-      </Label>
+    <>
       {diagnoses.length > 0 && (
         <div className="rounded-lg border">
           <div className="hidden md:grid md:grid-cols-12 items-center gap-4 p-3 bg-gray-50 text-sm font-medium text-gray-500">
@@ -123,7 +116,7 @@ export function DiagnosisQuestion({
         onSelect={handleAddDiagnosis}
         disabled={disabled}
       />
-    </div>
+    </>
   );
 }
 
diff --git a/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx b/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
index dd9cb4322aa..ab52140001f 100644
--- a/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
@@ -25,10 +25,8 @@ import {
 } from "@/types/emr/medicationRequest";
 import { Code } from "@/types/questionnaire/code";
 import { QuestionnaireResponse } from "@/types/questionnaire/form";
-import { Question } from "@/types/questionnaire/question";
 
 interface MedicationRequestQuestionProps {
-  question: Question;
   questionnaireResponse: QuestionnaireResponse;
   updateQuestionnaireResponseCB: (response: QuestionnaireResponse) => void;
   disabled?: boolean;
@@ -46,7 +44,6 @@ const MEDICATION_REQUEST_INITIAL_VALUE: MedicationRequest = {
 };
 
 export function MedicationRequestQuestion({
-  question,
   questionnaireResponse,
   updateQuestionnaireResponseCB,
   disabled,
@@ -102,11 +99,7 @@ export function MedicationRequestQuestion({
   };
 
   return (
-    <div className="space-y-4">
-      <Label className="text-base font-medium">
-        {question.text}
-        {question.required && <span className="ml-1 text-red-500">*</span>}
-      </Label>
+    <>
       {medications.length > 0 && (
         <div className="rounded-lg border space-y-4">
           <ul className="space-y-2 divide-y-2 divide-gray-200 divide-dashed">
@@ -133,7 +126,7 @@ export function MedicationRequestQuestion({
         disabled={disabled}
         searchPostFix=" clinical drug"
       />
-    </div>
+    </>
   );
 }
 
diff --git a/src/components/Questionnaire/QuestionTypes/NumberQuestion.tsx b/src/components/Questionnaire/QuestionTypes/NumberQuestion.tsx
index 2d1fe05a5a8..354c4745453 100644
--- a/src/components/Questionnaire/QuestionTypes/NumberQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/NumberQuestion.tsx
@@ -1,7 +1,4 @@
-import { cn } from "@/lib/utils";
-
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 
 import type { QuestionnaireResponse } from "@/types/questionnaire/form";
 import type { Question } from "@/types/questionnaire/question";
@@ -11,7 +8,6 @@ interface NumberQuestionProps {
   questionnaireResponse: QuestionnaireResponse;
   updateQuestionnaireResponseCB: (response: QuestionnaireResponse) => void;
   disabled?: boolean;
-  classes?: string;
 }
 
 export function NumberQuestion({
@@ -19,7 +15,6 @@ export function NumberQuestion({
   questionnaireResponse,
   updateQuestionnaireResponseCB,
   disabled,
-  classes,
 }: NumberQuestionProps) {
   const handleChange = (value: string) => {
     const numericValue =
@@ -37,19 +32,12 @@ export function NumberQuestion({
   };
 
   return (
-    <div className={cn(classes)}>
-      <Label className="text-base font-medium flex justify-between">
-        {question.text}
-        {question.required && <span className="ml-1 text-red-500">*</span>}
-        <span className="text-sm text-gray-500">{question.unit?.code}</span>
-      </Label>
-      <Input
-        type="number"
-        value={questionnaireResponse.values[0]?.value?.toString() || ""}
-        onChange={(e) => handleChange(e.target.value)}
-        step={question.type === "decimal" ? "0.01" : "1"}
-        disabled={disabled}
-      />
-    </div>
+    <Input
+      type="number"
+      value={questionnaireResponse.values[0]?.value?.toString() || ""}
+      onChange={(e) => handleChange(e.target.value)}
+      step={question.type === "decimal" ? "0.01" : "1"}
+      disabled={disabled}
+    />
   );
 }
diff --git a/src/components/Questionnaire/QuestionTypes/QuestionGroup.tsx b/src/components/Questionnaire/QuestionTypes/QuestionGroup.tsx
index e9f6f2a62e2..8176dbaf294 100644
--- a/src/components/Questionnaire/QuestionTypes/QuestionGroup.tsx
+++ b/src/components/Questionnaire/QuestionTypes/QuestionGroup.tsx
@@ -118,7 +118,7 @@ export const QuestionGroup = memo(function QuestionGroup({
     >
       {question.text && (
         <div className="space-y-1">
-          <Label className="text-lg font-semibold text-green-600">
+          <Label className="text-lg font-semibold text-gray-900">
             {question.text}
           </Label>
           {question.description && (
diff --git a/src/components/Questionnaire/QuestionTypes/QuestionInput.tsx b/src/components/Questionnaire/QuestionTypes/QuestionInput.tsx
index 661733bfcc7..c7df9d23153 100644
--- a/src/components/Questionnaire/QuestionTypes/QuestionInput.tsx
+++ b/src/components/Questionnaire/QuestionTypes/QuestionInput.tsx
@@ -2,6 +2,7 @@ import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Button } from "@/components/ui/button";
 
+import { QuestionLabel } from "@/components/Questionnaire/QuestionLabel";
 import { FollowUpAppointmentQuestion } from "@/components/Questionnaire/QuestionTypes/FollowUpAppointmentQuestion";
 
 import { QuestionValidationError } from "@/types/questionnaire/batch";
@@ -72,14 +73,14 @@ export function QuestionInput({
     });
   };
 
-  const renderSingleInput = (index: number = 0, withLabel: boolean = true) => {
+  const renderSingleInput = (index: number = 0) => {
     const commonProps = {
       classes: question.styling_metadata?.classes,
       question,
       questionnaireResponse,
       updateQuestionnaireResponseCB,
       disabled,
-      withLabel,
+      withLabel: false,
       clearError,
       index,
     };
@@ -144,7 +145,7 @@ export function QuestionInput({
       : questionnaireResponse.values;
 
     return (
-      <div className="space-y-2">
+      <div className="">
         {values.map((value, index) => {
           const removeButton = question.repeats &&
             questionnaireResponse.values.length > 1 && (
@@ -161,8 +162,9 @@ export function QuestionInput({
 
           return (
             <div key={index} className="mt-2 gap-2 flex items-end">
-              <div className="flex-1">
-                {renderSingleInput(index, index === 0)}
+              <div className="flex-1 space-y-1">
+                {index === 0 && <QuestionLabel question={question} />}
+                {renderSingleInput(index)}
               </div>
               {removeButton}
             </div>
diff --git a/src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx b/src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx
index 59833e1d8b0..bf0b7e98e8a 100644
--- a/src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx
@@ -35,10 +35,8 @@ import {
 } from "@/types/emr/symptom/symptom";
 import { Code } from "@/types/questionnaire/code";
 import { QuestionnaireResponse } from "@/types/questionnaire/form";
-import { Question } from "@/types/questionnaire/question";
 
 interface SymptomQuestionProps {
-  question: Question;
   questionnaireResponse: QuestionnaireResponse;
   updateQuestionnaireResponseCB: (response: QuestionnaireResponse) => void;
   disabled?: boolean;
@@ -53,7 +51,6 @@ const SYMPTOM_INITIAL_VALUE: Omit<SymptomRequest, "encounter"> = {
 };
 
 export function SymptomQuestion({
-  question,
   questionnaireResponse,
   updateQuestionnaireResponseCB,
   disabled,
@@ -91,11 +88,7 @@ export function SymptomQuestion({
   };
 
   return (
-    <div className="space-y-4">
-      <Label className="text-base font-medium">
-        {question.text}
-        {question.required && <span className="ml-1 text-red-500">*</span>}
-      </Label>
+    <>
       {symptoms.length > 0 && (
         <div className="rounded-lg border">
           <div className="hidden md:grid md:grid-cols-12 items-center gap-4 p-3 bg-gray-50 text-sm font-medium text-gray-500">
@@ -124,7 +117,7 @@ export function SymptomQuestion({
         onSelect={handleAddSymptom}
         disabled={disabled}
       />
-    </div>
+    </>
   );
 }
 
diff --git a/src/components/Questionnaire/QuestionTypes/TextQuestion.tsx b/src/components/Questionnaire/QuestionTypes/TextQuestion.tsx
index c8b5ef9cda8..fabd509328a 100644
--- a/src/components/Questionnaire/QuestionTypes/TextQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/TextQuestion.tsx
@@ -1,5 +1,4 @@
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 
 import type { QuestionnaireResponse } from "@/types/questionnaire/form";
@@ -34,11 +33,7 @@ export function TextQuestion({
   };
 
   return (
-    <div className="space-y-2">
-      <Label className="text-base font-medium">
-        {question.text}
-        {question.required && <span className="ml-1 text-red-500">*</span>}
-      </Label>
+    <>
       {question.type === "text" ? (
         <Textarea
           value={questionnaireResponse.values[0]?.value?.toString() || ""}
@@ -54,6 +49,6 @@ export function TextQuestion({
           disabled={disabled}
         />
       )}
-    </div>
+    </>
   );
 }

From 30fce4f00e6eb81f30a00535e7700faa39faf316 Mon Sep 17 00:00:00 2001
From: Gigin George <mail.gigin@gmail.com>
Date: Tue, 7 Jan 2025 13:25:12 +0530
Subject: [PATCH 2/8] Update Auth Handling

---
 src/Providers/AuthUserProvider.tsx | 29 +++++++---
 src/components/Auth/Login.tsx      | 92 +++++++++++++++---------------
 src/hooks/useAuthUser.ts           |  5 +-
 3 files changed, 71 insertions(+), 55 deletions(-)

diff --git a/src/Providers/AuthUserProvider.tsx b/src/Providers/AuthUserProvider.tsx
index 5cfc64ca1f2..1f9a5effc1a 100644
--- a/src/Providers/AuthUserProvider.tsx
+++ b/src/Providers/AuthUserProvider.tsx
@@ -2,7 +2,7 @@ import careConfig from "@careConfig";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import dayjs from "dayjs";
 import { navigate } from "raviger";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
 import Loading from "@/components/Common/Loading";
 
@@ -27,19 +27,23 @@ export default function AuthUserProvider({
   otpAuthorized,
 }: Props) {
   const queryClient = useQueryClient();
+  const [accessToken, setAccessToken] = useState(
+    localStorage.getItem(LocalStorageKeys.accessToken),
+  );
+  const [isOTPAuthorized, setIsOTPAuthorized] = useState(false);
 
   const { data: user, isLoading } = useQuery({
-    queryKey: ["currentUser"],
+    queryKey: ["currentUser", accessToken],
     queryFn: query(routes.currentUser, { silent: true }),
     retry: false,
     enabled: !!localStorage.getItem(LocalStorageKeys.accessToken),
   });
 
-  const [isOTPAuthorized, setIsOTPAuthorized] = useState(false);
-
-  const tokenData: TokenData = JSON.parse(
-    localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}",
-  );
+  const tokenData: TokenData = useMemo(() => {
+    return JSON.parse(
+      localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}",
+    );
+  }, [isOTPAuthorized]);
 
   useEffect(() => {
     if (
@@ -68,6 +72,7 @@ export default function AuthUserProvider({
       const query = await request(routes.login, { body: creds });
 
       if (query.res?.ok && query.data) {
+        setAccessToken(query.data.access);
         localStorage.setItem(LocalStorageKeys.accessToken, query.data.access);
         localStorage.setItem(LocalStorageKeys.refreshToken, query.data.refresh);
 
@@ -87,6 +92,7 @@ export default function AuthUserProvider({
     localStorage.removeItem(LocalStorageKeys.accessToken);
     localStorage.removeItem(LocalStorageKeys.refreshToken);
     localStorage.removeItem(LocalStorageKeys.patientTokenKey);
+    setIsOTPAuthorized(false);
 
     await queryClient.resetQueries({ queryKey: ["currentUser"] });
 
@@ -132,7 +138,14 @@ export default function AuthUserProvider({
   };
 
   return (
-    <AuthUserContext.Provider value={{ signIn, signOut, user }}>
+    <AuthUserContext.Provider
+      value={{
+        signIn,
+        signOut,
+        user,
+        isOTPAuthorized,
+      }}
+    >
       <SelectedRouter />
     </AuthUserContext.Provider>
   );
diff --git a/src/components/Auth/Login.tsx b/src/components/Auth/Login.tsx
index a7f9018dce5..7fbd5c72d36 100644
--- a/src/components/Auth/Login.tsx
+++ b/src/components/Auth/Login.tsx
@@ -1,7 +1,7 @@
 import careConfig from "@careConfig";
 import { useMutation } from "@tanstack/react-query";
 import { Link, useQueryParams } from "raviger";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import ReCaptcha from "react-google-recaptcha";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
@@ -28,14 +28,13 @@ import BrowserWarning from "@/components/ErrorPages/BrowserWarning";
 
 import { useAuthContext } from "@/hooks/useAuthUser";
 
-import { CarePatientTokenKey } from "@/common/constants";
+import { LocalStorageKeys } from "@/common/constants";
 
 import FiltersCache from "@/Utils/FiltersCache";
 import * as Notification from "@/Utils/Notifications";
 import routes from "@/Utils/request/api";
 import mutate from "@/Utils/request/mutate";
 import request from "@/Utils/request/request";
-import { HTTPError } from "@/Utils/request/types";
 import { TokenData } from "@/types/auth/otpToken";
 
 interface LoginFormData {
@@ -43,10 +42,9 @@ interface LoginFormData {
   password: string;
 }
 
-type LoginMode = "staff" | "patient";
-
-interface LoginProps {
-  forgot?: boolean;
+interface OtpLoginData {
+  phone_number: string;
+  otp: string;
 }
 
 interface OtpError {
@@ -60,10 +58,15 @@ interface OtpError {
   url: string;
 }
 
-// Update interface for OTP data
-interface OtpLoginData {
-  phone_number: string;
-  otp: string;
+interface OtpValidationError {
+  otp?: string;
+  [key: string]: string | undefined;
+}
+
+type LoginMode = "staff" | "patient";
+
+interface LoginProps {
+  forgot?: boolean;
 }
 
 const Login = (props: LoginProps) => {
@@ -83,8 +86,6 @@ const Login = (props: LoginProps) => {
   const [errors, setErrors] = useState(initErr);
   const [isCaptchaEnabled, setCaptcha] = useState(false);
   const { t } = useTranslation();
-  // display spinner while login is under progress
-  const [loading, setLoading] = useState(false);
   const [forgotPassword, setForgotPassword] = useState(forgot);
   const [loginMode, setLoginMode] = useState<LoginMode>(
     mode === "patient" ? "patient" : "staff",
@@ -103,15 +104,6 @@ const Login = (props: LoginProps) => {
     },
     onSuccess: ({ res }) => {
       setCaptcha(res?.status === 429);
-      window.location.href = "/";
-    },
-  });
-
-  // Forgot Password Mutation
-  const { mutate: submitForgetPassword } = useMutation({
-    mutationFn: mutate(routes.forgotPassword),
-    onSuccess: () => {
-      toast.success(t("password_sent"));
     },
   });
 
@@ -160,20 +152,22 @@ const Login = (props: LoginProps) => {
           phoneNumber: `+91${phone}`,
           createdAt: new Date().toISOString(),
         };
-        localStorage.setItem(CarePatientTokenKey, JSON.stringify(tokenData));
-        window.location.href = "/patient/home";
+        localStorage.setItem(
+          LocalStorageKeys.patientTokenKey,
+          JSON.stringify(tokenData),
+        );
       }
     },
-
-    //Invalid OTP error handling
-    onError: (error: HTTPError) => {
+    onError: (error: any) => {
       let errorMessage = t("invalid_otp");
       if (
         error.cause &&
         Array.isArray(error.cause.errors) &&
         error.cause.errors.length > 0
       ) {
-        const otpError = error.cause.errors.find((e) => e.otp);
+        const otpError = error.cause.errors.find(
+          (e: OtpValidationError) => e.otp,
+        );
         if (otpError && otpError.otp) {
           errorMessage = otpError.otp;
         }
@@ -185,14 +179,20 @@ const Login = (props: LoginProps) => {
     },
   });
 
+  // Forgot Password Mutation
+  const { mutate: submitForgetPassword } = useMutation({
+    mutationFn: mutate(routes.forgotPassword),
+    onSuccess: () => {
+      toast.success(t("password_sent"));
+    },
+  });
+
   // Format phone number to include +91
   const formatPhoneNumber = (value: string) => {
     // Remove any non-digit characters
     const digits = value.replace(/\D/g, "");
-
     // Limit to 10 digits
     const truncated = digits.slice(0, 10);
-
     return truncated;
   };
 
@@ -204,7 +204,6 @@ const Login = (props: LoginProps) => {
   };
 
   // Login form validation
-
   const handleChange = (e: any) => {
     const { value, name } = e.target;
     const fieldValue = Object.assign({}, form);
@@ -243,17 +242,9 @@ const Login = (props: LoginProps) => {
       setErrors(err);
       return false;
     }
-
     return form;
   };
 
-  // set loading to false when component is unmounted
-  useEffect(() => {
-    return () => {
-      setLoading(false);
-    };
-  }, []);
-
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     const validated = validateData();
@@ -304,10 +295,19 @@ const Login = (props: LoginProps) => {
   const handlePatientLogin = async (e: React.FormEvent) => {
     e.preventDefault();
 
-    if (!isOtpSent) {
-      sendOtp(phone);
-    } else {
-      verifyOtp({ phone_number: `+91${phone}`, otp });
+    try {
+      if (!isOtpSent) {
+        await sendOtp(phone);
+        setIsOtpSent(true);
+      } else {
+        await verifyOtp({ phone_number: `+91${phone}`, otp });
+      }
+    } catch (error: any) {
+      if (!isOtpSent) {
+        setOtpError(error.message);
+      } else {
+        setOtpValidationError(error.message);
+      }
     }
   };
 
@@ -315,6 +315,8 @@ const Login = (props: LoginProps) => {
     setIsOtpSent(false);
     setPhone("");
     setOtp("");
+    setOtpError("");
+    setOtpValidationError("");
   };
 
   // Loading state derived from mutations
@@ -695,13 +697,13 @@ const Login = (props: LoginProps) => {
                         className="w-full"
                         variant="primary"
                         disabled={
-                          loading ||
+                          isLoading ||
                           !phone ||
                           phone.length !== 10 ||
                           (isOtpSent && otp.length !== 5)
                         }
                       >
-                        {loading ? (
+                        {isLoading ? (
                           <CircularProgress className="text-white" />
                         ) : isOtpSent ? (
                           t("verify_otp")
diff --git a/src/hooks/useAuthUser.ts b/src/hooks/useAuthUser.ts
index 17dd312e6c2..51a91f0e6d8 100644
--- a/src/hooks/useAuthUser.ts
+++ b/src/hooks/useAuthUser.ts
@@ -7,11 +7,12 @@ import { RequestResult } from "@/Utils/request/types";
 
 type SignInReturnType = RequestResult<JwtTokenObtainPair>;
 
-type AuthContextType = {
+interface AuthContextType {
   user: UserModel | undefined;
   signIn: (creds: LoginCredentials) => Promise<SignInReturnType>;
   signOut: () => Promise<void>;
-};
+  isOTPAuthorized: boolean;
+}
 
 export const AuthUserContext = createContext<AuthContextType | null>(null);
 

From 84186b12aa1d154e381f53157519427bb88a9e45 Mon Sep 17 00:00:00 2001
From: Gigin George <mail.gigin@gmail.com>
Date: Tue, 7 Jan 2025 14:14:23 +0530
Subject: [PATCH 3/8] Cleanup Patient Auth State

---
 src/Providers/AuthUserProvider.tsx | 38 +++++++++++++++++-------------
 src/components/Auth/Login.tsx      |  5 ++--
 src/hooks/useAuthUser.ts           |  2 +-
 3 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/Providers/AuthUserProvider.tsx b/src/Providers/AuthUserProvider.tsx
index 1f9a5effc1a..2f657b67fc6 100644
--- a/src/Providers/AuthUserProvider.tsx
+++ b/src/Providers/AuthUserProvider.tsx
@@ -2,7 +2,7 @@ import careConfig from "@careConfig";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import dayjs from "dayjs";
 import { navigate } from "raviger";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import Loading from "@/components/Common/Loading";
 
@@ -13,7 +13,6 @@ import { LocalStorageKeys } from "@/common/constants";
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
 import request from "@/Utils/request/request";
-import { TokenData } from "@/types/auth/otpToken";
 
 interface Props {
   children: React.ReactNode;
@@ -30,7 +29,9 @@ export default function AuthUserProvider({
   const [accessToken, setAccessToken] = useState(
     localStorage.getItem(LocalStorageKeys.accessToken),
   );
-  const [isOTPAuthorized, setIsOTPAuthorized] = useState(false);
+  const [patientToken, setPatientToken] = useState(
+    JSON.parse(localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}"),
+  );
 
   const { data: user, isLoading } = useQuery({
     queryKey: ["currentUser", accessToken],
@@ -39,21 +40,15 @@ export default function AuthUserProvider({
     enabled: !!localStorage.getItem(LocalStorageKeys.accessToken),
   });
 
-  const tokenData: TokenData = useMemo(() => {
-    return JSON.parse(
-      localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}",
-    );
-  }, [isOTPAuthorized]);
-
   useEffect(() => {
     if (
-      tokenData.token &&
-      Object.keys(tokenData).length > 0 &&
-      dayjs(tokenData.createdAt).isAfter(dayjs().subtract(14, "minutes"))
+      patientToken.token &&
+      Object.keys(patientToken).length > 0 &&
+      dayjs(patientToken.createdAt).isAfter(dayjs().subtract(14, "minutes"))
     ) {
-      setIsOTPAuthorized(true);
+      navigate("/patient/home");
     }
-  }, [tokenData]);
+  }, [patientToken]);
 
   useEffect(() => {
     if (!user) {
@@ -88,11 +83,20 @@ export default function AuthUserProvider({
     [queryClient],
   );
 
+  const patientLogin = useCallback(() => {
+    setPatientToken(
+      JSON.parse(
+        localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}",
+      ),
+    );
+    navigate("/patient/home");
+  }, []);
+
   const signOut = useCallback(async () => {
     localStorage.removeItem(LocalStorageKeys.accessToken);
     localStorage.removeItem(LocalStorageKeys.refreshToken);
     localStorage.removeItem(LocalStorageKeys.patientTokenKey);
-    setIsOTPAuthorized(false);
+    setPatientToken({});
 
     await queryClient.resetQueries({ queryKey: ["currentUser"] });
 
@@ -130,7 +134,7 @@ export default function AuthUserProvider({
   const SelectedRouter = () => {
     if (user) {
       return children;
-    } else if (isOTPAuthorized) {
+    } else if (patientToken.token) {
       return otpAuthorized;
     } else {
       return unauthorized;
@@ -143,7 +147,7 @@ export default function AuthUserProvider({
         signIn,
         signOut,
         user,
-        isOTPAuthorized,
+        patientLogin,
       }}
     >
       <SelectedRouter />
diff --git a/src/components/Auth/Login.tsx b/src/components/Auth/Login.tsx
index 7fbd5c72d36..d1756c79624 100644
--- a/src/components/Auth/Login.tsx
+++ b/src/components/Auth/Login.tsx
@@ -70,7 +70,7 @@ interface LoginProps {
 }
 
 const Login = (props: LoginProps) => {
-  const { signIn } = useAuthContext();
+  const { signIn, patientLogin } = useAuthContext();
   const { reCaptchaSiteKey, urls, stateLogo, customLogo, customLogoAlt } =
     careConfig;
   const customDescriptionHtml = __CUSTOM_DESCRIPTION_HTML__;
@@ -119,7 +119,7 @@ const Login = (props: LoginProps) => {
     onSuccess: () => {
       setIsOtpSent(true);
       setOtpError("");
-      Notification.Success({ msg: t("send_otp_success") });
+      toast.success(t("send_otp_success"));
     },
     onError: (error: any) => {
       const errors = error?.data || [];
@@ -156,6 +156,7 @@ const Login = (props: LoginProps) => {
           LocalStorageKeys.patientTokenKey,
           JSON.stringify(tokenData),
         );
+        patientLogin();
       }
     },
     onError: (error: any) => {
diff --git a/src/hooks/useAuthUser.ts b/src/hooks/useAuthUser.ts
index 51a91f0e6d8..4c207d073c7 100644
--- a/src/hooks/useAuthUser.ts
+++ b/src/hooks/useAuthUser.ts
@@ -11,7 +11,7 @@ interface AuthContextType {
   user: UserModel | undefined;
   signIn: (creds: LoginCredentials) => Promise<SignInReturnType>;
   signOut: () => Promise<void>;
-  isOTPAuthorized: boolean;
+  patientLogin: () => void;
 }
 
 export const AuthUserContext = createContext<AuthContextType | null>(null);

From dbab36336eb414adbbaab2637b31f307338ff19d Mon Sep 17 00:00:00 2001
From: Gigin George <mail.gigin@gmail.com>
Date: Tue, 7 Jan 2025 14:20:50 +0530
Subject: [PATCH 4/8] Handle Null created_by

---
 src/components/Patient/PatientHome.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Patient/PatientHome.tsx b/src/components/Patient/PatientHome.tsx
index 713031169e7..1d4f942f900 100644
--- a/src/components/Patient/PatientHome.tsx
+++ b/src/components/Patient/PatientHome.tsx
@@ -165,8 +165,8 @@ export const PatientHome = (props: {
                   <div className="text-xs font-normal text-gray-600">
                     {t("last_updated_by")}{" "}
                     <span className="font-semibold text-gray-900">
-                      {patientData.updated_by.first_name}{" "}
-                      {patientData.updated_by.last_name}
+                      {patientData.updated_by?.first_name}{" "}
+                      {patientData.updated_by?.last_name}
                     </span>
                   </div>
                   <div className="whitespace-normal text-sm font-semibold text-gray-900">
@@ -187,8 +187,8 @@ export const PatientHome = (props: {
                   <div className="text-xs font-normal leading-5 text-gray-600">
                     {t("patient_profile_created_by")}{" "}
                     <span className="font-semibold text-gray-900">
-                      {patientData.created_by.first_name}{" "}
-                      {patientData.created_by.last_name}
+                      {patientData.created_by?.first_name}{" "}
+                      {patientData.created_by?.last_name}
                     </span>
                   </div>
                   <div className="whitespace-normal text-sm font-semibold text-gray-900">

From 9c20bd8eb5ccbdb0afe6741053f5d3dd4c3d3296 Mon Sep 17 00:00:00 2001
From: Gigin George <mail.gigin@gmail.com>
Date: Tue, 7 Jan 2025 14:24:09 +0530
Subject: [PATCH 5/8] Types for null patient.created_by

---
 src/types/emr/newPatient.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/types/emr/newPatient.ts b/src/types/emr/newPatient.ts
index 3e5973b81fd..02946da9ea9 100644
--- a/src/types/emr/newPatient.ts
+++ b/src/types/emr/newPatient.ts
@@ -32,8 +32,8 @@ export interface Patient {
   created_date: string;
   modified_date: string;
   geo_organization: Organization;
-  created_by: UserBareMinimum;
-  updated_by: UserBareMinimum;
+  created_by: UserBareMinimum | null;
+  updated_by: UserBareMinimum | null;
 }
 
 export interface PartialPatientModel {

From 1b86c5ec4f4d9c902b61c056084988033a0d0213 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 7 Jan 2025 09:10:32 +0000
Subject: [PATCH 6/8] Bump i18next from 24.2.0 to 24.2.1 (#9818)

Bumps [i18next](https://github.com/i18next/i18next) from 24.2.0 to 24.2.1.
- [Release notes](https://github.com/i18next/i18next/releases)
- [Changelog](https://github.com/i18next/i18next/blob/master/CHANGELOG.md)
- [Commits](https://github.com/i18next/i18next/compare/v24.2.0...v24.2.1)

---
updated-dependencies:
- dependency-name: i18next
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index aae20921b8a..1b11e080f57 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -59,7 +59,7 @@
         "events": "^3.3.0",
         "hi-profiles": "^1.1.0",
         "html2canvas": "^1.4.1",
-        "i18next": "^24.2.0",
+        "i18next": "^24.2.1",
         "i18next-browser-languagedetector": "^8.0.2",
         "i18next-http-backend": "^3.0.1",
         "input-otp": "^1.4.1",
@@ -11778,9 +11778,9 @@
       }
     },
     "node_modules/i18next": {
-      "version": "24.2.0",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-24.2.0.tgz",
-      "integrity": "sha512-ArJJTS1lV6lgKH7yEf4EpgNZ7+THl7bsGxxougPYiXRTJ/Fe1j08/TBpV9QsXCIYVfdE/HWG/xLezJ5DOlfBOA==",
+      "version": "24.2.1",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-24.2.1.tgz",
+      "integrity": "sha512-Q2wC1TjWcSikn1VAJg13UGIjc+okpFxQTxjVAymOnSA3RpttBQNMPf2ovcgoFVsV4QNxTfNZMAxorXZXsk4fBA==",
       "funding": [
         {
           "type": "individual",
diff --git a/package.json b/package.json
index e66c7f8a6aa..04ccc0e52a4 100644
--- a/package.json
+++ b/package.json
@@ -97,7 +97,7 @@
     "events": "^3.3.0",
     "hi-profiles": "^1.1.0",
     "html2canvas": "^1.4.1",
-    "i18next": "^24.2.0",
+    "i18next": "^24.2.1",
     "i18next-browser-languagedetector": "^8.0.2",
     "i18next-http-backend": "^3.0.1",
     "input-otp": "^1.4.1",

From 83eace20f39ab630ee0d31a214f5d9f12c8205ef Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 7 Jan 2025 09:18:00 +0000
Subject: [PATCH 7/8] Bump input-otp from 1.4.1 to 1.4.2 (#9819)

Bumps [input-otp](https://github.com/guilhermerodz/input-otp/tree/HEAD/packages/input-otp) from 1.4.1 to 1.4.2.
- [Changelog](https://github.com/guilhermerodz/input-otp/blob/master/CHANGELOG.md)
- [Commits](https://github.com/guilhermerodz/input-otp/commits/HEAD/packages/input-otp)

---
updated-dependencies:
- dependency-name: input-otp
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1b11e080f57..edfd7250ef1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -62,7 +62,7 @@
         "i18next": "^24.2.1",
         "i18next-browser-languagedetector": "^8.0.2",
         "i18next-http-backend": "^3.0.1",
-        "input-otp": "^1.4.1",
+        "input-otp": "^1.4.2",
         "lodash-es": "^4.17.21",
         "lucide-react": "^0.469.0",
         "markdown-it": "^14.1.0",
@@ -11986,9 +11986,9 @@
       }
     },
     "node_modules/input-otp": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/input-otp/-/input-otp-1.4.1.tgz",
-      "integrity": "sha512-+yvpmKYKHi9jIGngxagY9oWiiblPB7+nEO75F2l2o4vs+6vpPZZmUl4tBNYuTCvQjhvEIbdNeJu70bhfYP2nbw==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/input-otp/-/input-otp-1.4.2.tgz",
+      "integrity": "sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA==",
       "license": "MIT",
       "peerDependencies": {
         "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc",
diff --git a/package.json b/package.json
index 04ccc0e52a4..cd0f1948a36 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,7 @@
     "i18next": "^24.2.1",
     "i18next-browser-languagedetector": "^8.0.2",
     "i18next-http-backend": "^3.0.1",
-    "input-otp": "^1.4.1",
+    "input-otp": "^1.4.2",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.469.0",
     "markdown-it": "^14.1.0",

From 9b33e90bfc878828e3bc429c1ce30ec40a699b62 Mon Sep 17 00:00:00 2001
From: Bodhish Thomas <bodhish@gmail.com>
Date: Tue, 7 Jan 2025 15:26:26 +0530
Subject: [PATCH 8/8] Rename dosage field to frequency in ongoing medication
 form (#9811)

---
 public/locale/en.json                                           | 1 +
 .../Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/public/locale/en.json b/public/locale/en.json
index a6b499278b3..32cdc9c221c 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -736,6 +736,7 @@
   "domestic_international_travel": "Domestic/international Travel (within last 28 days)",
   "done": "Done",
   "dosage": "Dosage",
+  "dosage_instructions": "Dosage Instructions",
   "down": "Down",
   "download": "Download",
   "download_discharge_summary": "Download discharge summary",
diff --git a/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx b/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx
index 7c237b35f5d..e4b63b125bf 100644
--- a/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx
@@ -243,7 +243,7 @@ const MedicationStatementItem: React.FC<{
           </div>
           <div className="flex-[2]">
             <Label className="mb-1 block text-sm font-medium">
-              {t("dosage")}
+              {t("dosage_instructions")}
             </Label>
             <Input
               value={medication.dosage_text}