From 27063712eccb09b4af10c95e48c69b49cc5c388e Mon Sep 17 00:00:00 2001
From: Abdul Azees <abdulazeespr@gmail.com>
Date: Sun, 9 Feb 2025 20:18:06 +0530
Subject: [PATCH 1/6] Switch to using cn and variants for AlertDialogAction
 (#10466) (#10499)

---
 src/components/Patient/PatientDetailsTab/PatientUsers.tsx   | 6 ++++--
 .../QuestionTypes/MedicationRequestQuestion.tsx             | 4 ++--
 .../QuestionTypes/MedicationStatementQuestion.tsx           | 4 ++--
 src/components/Questionnaire/show.tsx                       | 6 ++++--
 src/pages/Apps/PlugConfigEdit.tsx                           | 6 ++++--
 .../organizations/components/EditFacilityUserRoleSheet.tsx  | 6 ++++--
 src/pages/Organization/components/EditUserRoleSheet.tsx     | 6 ++++--
 7 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
index 5f0e90e8297..f961544d867 100644
--- a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
+++ b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
@@ -3,6 +3,8 @@ import { t } from "i18next";
 import { useState } from "react";
 import { toast } from "sonner";
 
+import { cn } from "@/lib/utils";
+
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import {
@@ -16,7 +18,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import {
   Select,
   SelectContent,
@@ -287,7 +289,7 @@ export const PatientUsers = (props: PatientProps) => {
                     <AlertDialogAction
                       data-cy="patient-user-remove-confirm-button"
                       onClick={() => removeUser(user.id)}
-                      className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                      className={cn(buttonVariants({ variant: "destructive" }))}
                     >
                       {t("remove")}
                     </AlertDialogAction>
diff --git a/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx b/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
index f9ff069f431..8742560db7b 100644
--- a/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
@@ -15,7 +15,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import {
   Collapsible,
   CollapsibleContent,
@@ -201,7 +201,7 @@ export function MedicationRequestQuestion({
             <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
             <AlertDialogAction
               onClick={confirmRemoveMedication}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              className={cn(buttonVariants({ variant: "destructive" }))}
             >
               {t("remove")}
             </AlertDialogAction>
diff --git a/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx b/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx
index f56be1b82dc..4a26f0afb25 100644
--- a/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx
@@ -18,7 +18,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import {
   Collapsible,
   CollapsibleContent,
@@ -204,7 +204,7 @@ export function MedicationStatementQuestion({
             <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
             <AlertDialogAction
               onClick={confirmRemoveMedication}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              className={cn(buttonVariants({ variant: "destructive" }))}
             >
               {t("remove")}
             </AlertDialogAction>
diff --git a/src/components/Questionnaire/show.tsx b/src/components/Questionnaire/show.tsx
index 4534ce5734b..28c6efcbdf1 100644
--- a/src/components/Questionnaire/show.tsx
+++ b/src/components/Questionnaire/show.tsx
@@ -2,6 +2,8 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { useNavigate } from "raviger";
 import { useState } from "react";
 
+import { cn } from "@/lib/utils";
+
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
@@ -16,7 +18,7 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   DropdownMenu,
@@ -218,7 +220,7 @@ export function QuestionnaireShow({ id }: QuestionnaireShowProps) {
                 <AlertDialogCancel>Cancel</AlertDialogCancel>
                 <AlertDialogAction
                   onClick={handleDelete}
-                  className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                  className={cn(buttonVariants({ variant: "destructive" }))}
                   disabled={isPending}
                 >
                   {isPending ? "Deleting..." : "Delete"}
diff --git a/src/pages/Apps/PlugConfigEdit.tsx b/src/pages/Apps/PlugConfigEdit.tsx
index 353a1796b88..f6230b71f15 100644
--- a/src/pages/Apps/PlugConfigEdit.tsx
+++ b/src/pages/Apps/PlugConfigEdit.tsx
@@ -2,6 +2,8 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { useNavigate } from "raviger";
 import { useEffect, useState } from "react";
 
+import { cn } from "@/lib/utils";
+
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import {
@@ -15,7 +17,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 
@@ -108,7 +110,7 @@ export function PlugConfigEdit({ slug }: Props) {
                 <AlertDialogCancel>Cancel</AlertDialogCancel>
                 <AlertDialogAction
                   onClick={handleDelete}
-                  className="bg-red-600 hover:bg-red-700"
+                  className={cn(buttonVariants({ variant: "destructive" }))}
                 >
                   Delete
                 </AlertDialogAction>
diff --git a/src/pages/Facility/settings/organizations/components/EditFacilityUserRoleSheet.tsx b/src/pages/Facility/settings/organizations/components/EditFacilityUserRoleSheet.tsx
index 3d96f2210a7..dfae40ba31f 100644
--- a/src/pages/Facility/settings/organizations/components/EditFacilityUserRoleSheet.tsx
+++ b/src/pages/Facility/settings/organizations/components/EditFacilityUserRoleSheet.tsx
@@ -3,6 +3,8 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 
+import { cn } from "@/lib/utils";
+
 import {
   AlertDialog,
   AlertDialogAction,
@@ -14,7 +16,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import {
   Select,
@@ -230,7 +232,7 @@ export default function EditUserRoleSheet({
                   <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
                   <AlertDialogAction
                     onClick={() => removeRole()}
-                    className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                    className={cn(buttonVariants({ variant: "destructive" }))}
                   >
                     {t("remove")}
                   </AlertDialogAction>
diff --git a/src/pages/Organization/components/EditUserRoleSheet.tsx b/src/pages/Organization/components/EditUserRoleSheet.tsx
index a70e4633340..fb05aa6dec7 100644
--- a/src/pages/Organization/components/EditUserRoleSheet.tsx
+++ b/src/pages/Organization/components/EditUserRoleSheet.tsx
@@ -3,6 +3,8 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 
+import { cn } from "@/lib/utils";
+
 import {
   AlertDialog,
   AlertDialogAction,
@@ -14,7 +16,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import {
   Select,
@@ -238,7 +240,7 @@ export default function EditUserRoleSheet({
                     <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
                     <AlertDialogAction
                       onClick={() => removeRole()}
-                      className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                      className={cn(buttonVariants({ variant: "destructive" }))}
                     >
                       {t("remove")}
                     </AlertDialogAction>

From f4e941615ea92ed347b4b297134027c28c4992e0 Mon Sep 17 00:00:00 2001
From: Khavin Shankar <khavinshankar@gmail.com>
Date: Mon, 10 Feb 2025 10:43:29 +0530
Subject: [PATCH 2/6] sanitize html before rendering it unsafely (#10485)

---
 src/components/ui/markdown.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/markdown.tsx b/src/components/ui/markdown.tsx
index 99ec3626db5..828f304ce9c 100644
--- a/src/components/ui/markdown.tsx
+++ b/src/components/ui/markdown.tsx
@@ -1,3 +1,4 @@
+import DOMPurify from "dompurify";
 import MarkdownIt from "markdown-it";
 import * as React from "react";
 
@@ -22,7 +23,10 @@ export interface MarkdownProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const Markdown = React.forwardRef<HTMLDivElement, MarkdownProps>(
   ({ className, content, prose = true, ...props }, ref) => {
-    const html = React.useMemo(() => md.render(content), [content]);
+    const html = React.useMemo(() => {
+      const renderedHtml = md.render(content);
+      return DOMPurify.sanitize(renderedHtml);
+    }, [content]);
 
     if (prose) {
       return (

From be859551765b74da5225c64a6cb50e7fc2de35a1 Mon Sep 17 00:00:00 2001
From: Amjith Titus <amjithtitus09@gmail.com>
Date: Mon, 10 Feb 2025 11:27:26 +0530
Subject: [PATCH 3/6] Minor fixes in Encounter, Medication, Administration
 (#10488)

---
 public/locale/en.json                         |   3 +-
 .../ConsultationDetails/QuickAccess.tsx       |  85 +++++-----
 .../AdministrationTab.tsx                     | 145 ++++++++++++------
 .../MedicineAdminForm.tsx                     |  71 ++++++---
 .../MedicineAdminSheet.tsx                    |   2 +-
 .../Medicine/MedicationRequestTable/index.tsx |  14 +-
 src/components/Medicine/MedicationsTable.tsx  |  10 +-
 src/components/Patient/PatientInfoCard.tsx    |  16 --
 .../MedicationRequestQuestion.tsx             |   2 +-
 .../MedicationStatementQuestion.tsx           |   2 +-
 .../medicationAdministration.ts               |   1 -
 11 files changed, 218 insertions(+), 133 deletions(-)

diff --git a/public/locale/en.json b/public/locale/en.json
index 7a455f5a214..0454ba6a8ad 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -1878,11 +1878,12 @@
   "search_for_allergies_to_add": "Search for allergies to add",
   "search_for_diagnoses_to_add": "Search for diagnoses to add",
   "search_for_facility": "Search for Facility",
+  "search_for_medications_to_add": "Search for medications to add",
   "search_for_symptoms_to_add": "Search for symptoms to add",
   "search_icd11_placeholder": "Search for ICD-11 Diagnoses",
   "search_investigation_placeholder": "Search Investigation & Groups",
   "search_medication": "Search Medication",
-  "search_medications": "Search for medications to add",
+  "search_medications": "Search Medications",
   "search_medicine": "Search Medicine",
   "search_patient_page_text": "Search for existing patients using their phone number or create a new patient record",
   "search_patients": "Search Patients",
diff --git a/src/components/Facility/ConsultationDetails/QuickAccess.tsx b/src/components/Facility/ConsultationDetails/QuickAccess.tsx
index b9aa70c903d..2a8353a8f43 100644
--- a/src/components/Facility/ConsultationDetails/QuickAccess.tsx
+++ b/src/components/Facility/ConsultationDetails/QuickAccess.tsx
@@ -1,4 +1,3 @@
-import { useQuery } from "@tanstack/react-query";
 import { Link } from "raviger";
 import { useTranslation } from "react-i18next";
 
@@ -9,9 +8,9 @@ import { Button } from "@/components/ui/button";
 
 import LinkDepartmentsSheet from "@/components/Patient/LinkDepartmentsSheet";
 
-import query from "@/Utils/request/query";
+import useQuestionnaireOptions from "@/hooks/useQuestionnaireOptions";
+
 import { Encounter } from "@/types/emr/encounter";
-import questionnaireApi from "@/types/questionnaire/questionnaireApi";
 
 interface QuickAccessProps {
   encounter: Encounter;
@@ -19,13 +18,7 @@ interface QuickAccessProps {
 
 export default function QuickAccess({ encounter }: QuickAccessProps) {
   const { t } = useTranslation();
-
-  const { data: response } = useQuery({
-    queryKey: ["questionnaires"],
-    queryFn: query(questionnaireApi.list),
-  });
-
-  const questionnaireList = response?.results || [];
+  const questionnaireOptions = useQuestionnaireOptions("encounter_actions");
 
   const encounterSettings = [
     { id: "encounter_settings", label: t("encounter_settings") },
@@ -34,45 +27,47 @@ export default function QuickAccess({ encounter }: QuickAccessProps) {
   return (
     <div className="flex flex-col gap-6">
       {/* Questionnaire Section */}
-      <section className="space-y-2 p-2">
-        <h3 className="text-lg font-semibold mb-3">{t("questionnaire")}</h3>
-        <div className="space-y-3 p-2 font-semibold">
-          {questionnaireList.map((item) => (
-            <Link
-              className="flex items-center gap-2 text-sm hover:text-gray-500 text-gray-900"
-              key={item.id}
-              // className="w-full justify-start gap-2 h-auto py-2"
-              href={`/facility/${encounter.facility.id}/patient/${encounter.patient.id}/encounter/${encounter.id}/questionnaire/${item.slug}`}
-            >
-              <CareIcon icon="l-file-alt" className="h-4 w-4 text-gray-950" />
-              {item.title}
-            </Link>
-          ))}
-        </div>
-      </section>
-
-      <div className="w-full border-t border-dashed border-gray-300" />
-
-      {/* Update Encounter Details */}
-      <section className="text-gray-950">
-        <h3 className="text-lg font-medium mb-3">
-          {t("update_encounter_details")}
-        </h3>
-        <div className="space-y-2">
-          {encounterSettings.map((item) => (
-            <div key={item.id} className="flex items-center space-x-2 px-4">
+      {encounter.status !== "completed" && (
+        <section className="space-y-2 p-2">
+          <h3 className="text-lg font-semibold mb-3">{t("questionnaire")}</h3>
+          <div className="space-y-3 p-2 font-semibold">
+            {questionnaireOptions.map((option) => (
               <Link
-                href={`/facility/${encounter.facility.id}/patient/${encounter.patient.id}/encounter/${encounter.id}/questionnaire/encounter`}
-                className="text-sm text-gray-950 underline font-semibold"
+                key={option.slug}
+                href={`/facility/${encounter.facility.id}/patient/${encounter.patient.id}/encounter/${encounter.id}/questionnaire/${option.slug}`}
+                className="flex items-center gap-2 text-sm hover:text-gray-500 text-gray-900"
+                data-cy="update-encounter-option"
               >
-                {item.label}
+                <CareIcon icon="l-file-alt" className="h-4 w-4 text-gray-950" />
+                {t(option.title)}
               </Link>
-            </div>
-          ))}
-        </div>
-      </section>
+            ))}
+          </div>
+          <div className="w-full border-t border-dashed border-gray-300" />
+        </section>
+      )}
 
-      <div className="w-full border-t border-dashed border-gray-300" />
+      {/* Update Encounter Details */}
+      {encounter.status !== "completed" && (
+        <section className="text-gray-950 space-y-2">
+          <h3 className="text-lg font-medium mb-3">
+            {t("update_encounter_details")}
+          </h3>
+          <div>
+            {encounterSettings.map((item) => (
+              <div key={item.id} className="flex items-center space-x-2 px-4">
+                <Link
+                  href={`/facility/${encounter.facility.id}/patient/${encounter.patient.id}/encounter/${encounter.id}/questionnaire/encounter`}
+                  className="text-sm text-gray-950 underline font-semibold"
+                >
+                  {item.label}
+                </Link>
+              </div>
+            ))}
+          </div>
+          <div className="w-full border-t border-dashed border-gray-300" />
+        </section>
+      )}
 
       {/* Departments and Teams */}
       <section>
diff --git a/src/components/Medicine/MedicationAdministration/AdministrationTab.tsx b/src/components/Medicine/MedicationAdministration/AdministrationTab.tsx
index 39f477f6d65..b4af54bc4f8 100644
--- a/src/components/Medicine/MedicationAdministration/AdministrationTab.tsx
+++ b/src/components/Medicine/MedicationAdministration/AdministrationTab.tsx
@@ -29,7 +29,11 @@ import {
   MedicationAdministration,
   MedicationAdministrationRequest,
 } from "@/types/emr/medicationAdministration/medicationAdministration";
-import { MedicationRequestRead } from "@/types/emr/medicationRequest";
+import {
+  ACTIVE_MEDICATION_STATUSES,
+  INACTIVE_MEDICATION_STATUSES,
+  MedicationRequestRead,
+} from "@/types/emr/medicationRequest";
 import medicationRequestApi from "@/types/emr/medicationRequest/medicationRequestApi";
 
 import { MedicineAdminDialog } from "./MedicineAdminDialog";
@@ -40,14 +44,6 @@ import {
   createMedicationAdministrationRequest,
 } from "./utils";
 
-const ACTIVE_STATUSES = ["active", "on-hold", "draft", "unknown"] as const;
-const INACTIVE_STATUSES = [
-  "ended",
-  "completed",
-  "cancelled",
-  "entered_in_error",
-] as const;
-
 // Utility Functions
 function isTimeInSlot(
   date: Date,
@@ -211,9 +207,13 @@ const MedicationRow: React.FC<MedicationRowProps> = ({
   onEditAdministration,
   onDiscontinue,
 }) => {
+  const isInactive = INACTIVE_MEDICATION_STATUSES.includes(
+    medication.status as (typeof INACTIVE_MEDICATION_STATUSES)[number],
+  );
+
   return (
     <React.Fragment>
-      <div className="p-4 border-t">
+      <div className={`p-4 border-t ${isInactive ? "bg-gray-100" : ""}`}>
         <div className="font-semibold truncate">
           {medication.medication?.display}
         </div>
@@ -247,7 +247,7 @@ const MedicationRow: React.FC<MedicationRowProps> = ({
         return (
           <div
             key={`${format(slot.date, "yyyy-MM-dd")}-${slot.start}`}
-            className="p-4 border-t relative text-sm"
+            className={`p-4 border-t relative text-sm ${isInactive ? "bg-gray-100" : ""}`}
           >
             {administrationRecords?.map((admin) => {
               const colorClass =
@@ -260,16 +260,34 @@ const MedicationRow: React.FC<MedicationRowProps> = ({
                   className={`flex font-medium items-center gap-2 rounded-md p-2 mb-2 cursor-pointer justify-between border ${colorClass}`}
                   onClick={() => onEditAdministration(medication, admin)}
                 >
-                  <div className="flex items-center gap-1">
-                    <CareIcon icon="l-check-circle" className="h-3 w-3" />
-                    {new Date(admin.occurrence_period_start).toLocaleTimeString(
-                      "en-US",
-                      {
+                  <div className="flex flex-col md:flex-row items-center gap-1">
+                    <div>
+                      <CareIcon
+                        icon="l-check-circle"
+                        className="h-3 w-3 self-center"
+                      />
+                      {new Date(
+                        admin.occurrence_period_start,
+                      ).toLocaleTimeString("en-US", {
                         hour: "numeric",
                         minute: "2-digit",
                         hour12: true,
-                      },
-                    )}
+                      })}
+                    </div>
+                    <div>
+                      {admin.occurrence_period_end && (
+                        <>
+                          {"- "}
+                          {new Date(
+                            admin.occurrence_period_end,
+                          ).toLocaleTimeString("en-US", {
+                            hour: "numeric",
+                            minute: "2-digit",
+                            hour12: true,
+                          })}
+                        </>
+                      )}
+                    </div>
                   </div>
                   {admin.note && (
                     <Button
@@ -297,9 +315,11 @@ const MedicationRow: React.FC<MedicationRowProps> = ({
         );
       })}
 
-      <div className="p-4 border-t flex justify-center">
-        {ACTIVE_STATUSES.includes(
-          medication.status as (typeof ACTIVE_STATUSES)[number],
+      <div
+        className={`p-4 border-t flex justify-center ${isInactive ? "bg-gray-100" : ""}`}
+      >
+        {ACTIVE_MEDICATION_STATUSES.includes(
+          medication.status as (typeof ACTIVE_MEDICATION_STATUSES)[number],
         ) && (
           <Popover>
             <PopoverTrigger asChild>
@@ -336,6 +356,7 @@ export const AdministrationTab: React.FC<AdministrationTabProps> = ({
   const currentDate = new Date();
   const [endSlotDate, setEndSlotDate] = useState(currentDate);
   const [showStopped, setShowStopped] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
   const [endSlotIndex, setEndSlotIndex] = useState(
     Math.floor(currentDate.getHours() / 6),
   );
@@ -369,7 +390,7 @@ export const AdministrationTab: React.FC<AdministrationTabProps> = ({
       queryParams: {
         encounter: encounterId,
         limit: 100,
-        status: ACTIVE_STATUSES.join(","),
+        status: ACTIVE_MEDICATION_STATUSES.join(","),
       },
     }),
     enabled: !!patientId,
@@ -382,7 +403,7 @@ export const AdministrationTab: React.FC<AdministrationTabProps> = ({
       queryParams: {
         encounter: encounterId,
         limit: 100,
-        status: INACTIVE_STATUSES.join(","),
+        status: INACTIVE_MEDICATION_STATUSES.join(","),
       },
     }),
     enabled: !!patientId,
@@ -581,36 +602,33 @@ export const AdministrationTab: React.FC<AdministrationTabProps> = ({
       ]
     : activeMedications?.results || [];
 
+  const filteredMedications = medications.filter(
+    (med: MedicationRequestRead) => {
+      if (!searchQuery.trim()) return true;
+      const searchTerm = searchQuery.toLowerCase().trim();
+      const medicationName = med.medication?.display?.toLowerCase() || "";
+      return medicationName.includes(searchTerm);
+    },
+  );
+
+  let content;
   if (!activeMedications || !stoppedMedications) {
-    return (
+    content = (
       <div className="min-h-[200px] flex items-center justify-center">
         <Loading />
       </div>
     );
-  }
-
-  if (!medications?.length) {
-    return (
+  } else if (!medications?.length) {
+    content = (
       <EmptyState
         message={t("no_active_medications")}
         description={t("no_medications_to_administer")}
       />
     );
-  }
-
-  return (
-    <div className="flex flex-col gap-2 m-2">
-      <div className="flex justify-end">
-        <Button
-          variant="outline"
-          className="text-emerald-600 border-emerald-600 hover:bg-emerald-50"
-          onClick={() => setIsSheetOpen(true)}
-        >
-          <CareIcon icon="l-plus" className="mr-2 h-4 w-4" />
-          {t("administer_medicine")}
-        </Button>
-      </div>
-
+  } else if (searchQuery && !filteredMedications.length) {
+    content = <EmptyState searching searchQuery={searchQuery} />;
+  } else {
+    content = (
       <ScrollArea className="w-full whitespace-nowrap rounded-md">
         <Card className="w-full border-none shadow-none min-w-[640px]">
           <div className="grid grid-cols-[minmax(200px,2fr),repeat(4,minmax(140px,1fr)),40px]">
@@ -684,7 +702,7 @@ export const AdministrationTab: React.FC<AdministrationTabProps> = ({
               <div className="border-t bg-[#F3F4F6]" />
 
               {/* Medication rows */}
-              {medications?.map((medication) => (
+              {filteredMedications?.map((medication) => (
                 <MedicationRow
                   key={medication.id}
                   medication={medication}
@@ -718,6 +736,45 @@ export const AdministrationTab: React.FC<AdministrationTabProps> = ({
         </Card>
         <ScrollBar orientation="horizontal" />
       </ScrollArea>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2 mt-4 mx-2">
+      <div className="flex justify-between items-center gap-2">
+        <div className="flex items-center gap-2 flex-1">
+          <div className="flex items-center gap-2 flex-1">
+            <CareIcon icon="l-search" className="text-lg text-gray-500" />
+            <input
+              type="text"
+              placeholder={t("search_medications")}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="flex-1 bg-transparent text-sm outline-none placeholder:text-gray-500"
+            />
+            {searchQuery && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 px-2 text-gray-500 hover:text-foreground"
+                onClick={() => setSearchQuery("")}
+              >
+                <CareIcon icon="l-times" className="text-lg" />
+              </Button>
+            )}
+          </div>
+        </div>
+        <Button
+          variant="outline"
+          className="text-emerald-600 border-emerald-600 hover:bg-emerald-50"
+          onClick={() => setIsSheetOpen(true)}
+        >
+          <CareIcon icon="l-plus" className="mr-2 h-4 w-4" />
+          {t("administer_medicine")}
+        </Button>
+      </div>
+
+      <div className="mt-4">{content}</div>
 
       {selectedMedication && administrationRequest && (
         <MedicineAdminDialog
diff --git a/src/components/Medicine/MedicationAdministration/MedicineAdminForm.tsx b/src/components/Medicine/MedicationAdministration/MedicineAdminForm.tsx
index 62b48d65b65..3519619d08a 100644
--- a/src/components/Medicine/MedicationAdministration/MedicineAdminForm.tsx
+++ b/src/components/Medicine/MedicationAdministration/MedicineAdminForm.tsx
@@ -83,29 +83,37 @@ export const MedicineAdminForm: React.FC<MedicineAdminFormProps> = ({
 
   // Validate and notify parent whenever times change
   useEffect(() => {
-    if (
-      !administrationRequest.occurrence_period_start ||
-      !administrationRequest.occurrence_period_end
-    ) {
+    if (!administrationRequest.occurrence_period_start) {
       isValid?.(false);
       return;
     }
 
     const startDate = new Date(administrationRequest.occurrence_period_start);
-    const endDate = new Date(administrationRequest.occurrence_period_end);
-
     const startError = validateDateTime(startDate, true);
-    const endError = validateDateTime(endDate, false);
-
     setStartTimeError(startError);
-    setEndTimeError(endError);
 
-    isValid?.(!startError && !endError);
+    // Only validate end time if status is completed or if end time is provided
+    if (
+      administrationRequest.status === "completed" ||
+      administrationRequest.occurrence_period_end
+    ) {
+      if (!administrationRequest.occurrence_period_end) {
+        isValid?.(false);
+        return;
+      }
+      const endDate = new Date(administrationRequest.occurrence_period_end);
+      const endError = validateDateTime(endDate, false);
+      setEndTimeError(endError);
+      isValid?.(!startError && !endError);
+    } else {
+      setEndTimeError("");
+      isValid?.(!startError);
+    }
   }, [
     administrationRequest.occurrence_period_start,
     administrationRequest.occurrence_period_end,
+    administrationRequest.status,
     isValid,
-    validateDateTime,
   ]);
 
   const handleDateChange = (newTime: string, isStartTime: boolean) => {
@@ -238,9 +246,21 @@ export const MedicineAdminForm: React.FC<MedicineAdminFormProps> = ({
         <Label>{t("status")}</Label>
         <Select
           value={administrationRequest.status}
-          onValueChange={(value: MedicationAdministrationStatus) =>
-            onChange({ ...administrationRequest, status: value })
-          }
+          onValueChange={(value: MedicationAdministrationStatus) => {
+            const newRequest = { ...administrationRequest, status: value };
+
+            if (value === "in_progress" || value === "not_done") {
+              delete newRequest.occurrence_period_end;
+            } else if (
+              value === "completed" &&
+              !administrationRequest.occurrence_period_end
+            ) {
+              newRequest.occurrence_period_end =
+                administrationRequest.occurrence_period_start;
+            }
+
+            onChange(newRequest);
+          }}
         >
           <SelectTrigger>
             <SelectValue placeholder={t("select_status")} />
@@ -275,13 +295,22 @@ export const MedicineAdminForm: React.FC<MedicineAdminFormProps> = ({
             onValueChange={(newValue) => {
               setIsPastTime(newValue === "yes");
               if (newValue === "no") {
-                // Set both times to current time
                 const now = new Date().toISOString();
-                onChange({
+                const newRequest = {
                   ...administrationRequest,
                   occurrence_period_start: now,
-                  occurrence_period_end: now,
-                });
+                };
+
+                if (
+                  !(
+                    administrationRequest.status === "in_progress" ||
+                    administrationRequest.status === "not_done"
+                  )
+                ) {
+                  newRequest.occurrence_period_end = now;
+                }
+
+                onChange(newRequest);
               }
             }}
             className="flex gap-4"
@@ -370,7 +399,8 @@ export const MedicineAdminForm: React.FC<MedicineAdminFormProps> = ({
                 disabled={
                   !isPastTime ||
                   (!!administrationRequest.id &&
-                    administrationRequest.status !== "in_progress")
+                    administrationRequest.status !== "in_progress") ||
+                  administrationRequest.status === "in_progress"
                 }
               >
                 <CareIcon icon="l-calender" className="mr-2 h-4 w-4" />
@@ -411,7 +441,8 @@ export const MedicineAdminForm: React.FC<MedicineAdminFormProps> = ({
             disabled={
               !isPastTime ||
               (!!administrationRequest.id &&
-                administrationRequest.status !== "in_progress")
+                administrationRequest.status !== "in_progress") ||
+              administrationRequest.status === "in_progress"
             }
           />
         </div>
diff --git a/src/components/Medicine/MedicationAdministration/MedicineAdminSheet.tsx b/src/components/Medicine/MedicationAdministration/MedicineAdminSheet.tsx
index 80b212081c4..a2f7ee23111 100644
--- a/src/components/Medicine/MedicationAdministration/MedicineAdminSheet.tsx
+++ b/src/components/Medicine/MedicationAdministration/MedicineAdminSheet.tsx
@@ -73,7 +73,7 @@ const MedicineListItem = ({
         <Checkbox
           checked={isSelected}
           onCheckedChange={onSelect}
-          className="mt-1"
+          className="mt-1 mr-6 border-gray-800 h-5 w-5"
           aria-label="Select for administration"
         />
       </div>
diff --git a/src/components/Medicine/MedicationRequestTable/index.tsx b/src/components/Medicine/MedicationRequestTable/index.tsx
index 389093ae429..12d9a893bfa 100644
--- a/src/components/Medicine/MedicationRequestTable/index.tsx
+++ b/src/components/Medicine/MedicationRequestTable/index.tsx
@@ -153,7 +153,12 @@ export default function MedicationRequestTable({
                   )}
                 </div>
                 <div className="flex items-center gap-2">
-                  <Button asChild variant="outline" size="sm">
+                  <Button
+                    asChild
+                    variant="outline"
+                    size="sm"
+                    className="text-gray-950 hover:text-gray-700 h-9"
+                  >
                     <Link
                       href={`/facility/${facilityId}/patient/${patientId}/encounter/${encounterId}/questionnaire/medication_request`}
                     >
@@ -161,7 +166,12 @@ export default function MedicationRequestTable({
                       {t("edit")}
                     </Link>
                   </Button>
-                  <Button asChild variant="outline" size="sm">
+                  <Button
+                    asChild
+                    variant="outline"
+                    size="sm"
+                    className="text-gray-950 hover:text-gray-700 h-9"
+                  >
                     <Link
                       href={`/facility/${facilityId}/encounter/${encounterId}/prescriptions/print`}
                     >
diff --git a/src/components/Medicine/MedicationsTable.tsx b/src/components/Medicine/MedicationsTable.tsx
index 05a8e82bada..2f29eec8960 100644
--- a/src/components/Medicine/MedicationsTable.tsx
+++ b/src/components/Medicine/MedicationsTable.tsx
@@ -12,6 +12,7 @@ import {
 import { reverseFrequencyOption } from "@/components/Questionnaire/QuestionTypes/MedicationRequestQuestion";
 
 import {
+  INACTIVE_MEDICATION_STATUSES,
   MEDICATION_REQUEST_TIMING_OPTIONS,
   MedicationRequestDosageInstruction,
   MedicationRequestRead,
@@ -66,8 +67,15 @@ export const MedicationsTable = ({ medications }: MedicationsTableProps) => {
             const duration = instruction?.timing?.repeat?.bounds_duration;
             const remarks = formatSig(instruction);
             const notes = medication.note;
+            const isInactive = INACTIVE_MEDICATION_STATUSES.includes(
+              medication.status as (typeof INACTIVE_MEDICATION_STATUSES)[number],
+            );
+
             return (
-              <TableRow key={medication.id} className="divide-x font-medium">
+              <TableRow
+                key={medication.id}
+                className={`divide-x font-medium ${isInactive ? "bg-gray-100" : ""}`}
+              >
                 <TableCell className="py-2 px-3">
                   {medication.medication?.display}
                 </TableCell>
diff --git a/src/components/Patient/PatientInfoCard.tsx b/src/components/Patient/PatientInfoCard.tsx
index 3f2a2234a6f..499072e6669 100644
--- a/src/components/Patient/PatientInfoCard.tsx
+++ b/src/components/Patient/PatientInfoCard.tsx
@@ -21,7 +21,6 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import {
@@ -32,8 +31,6 @@ import {
 
 import { Avatar } from "@/components/Common/Avatar";
 
-import useQuestionnaireOptions from "@/hooks/useQuestionnaireOptions";
-
 import { PLUGIN_Component } from "@/PluginEngine";
 import routes from "@/Utils/request/api";
 import mutate from "@/Utils/request/mutate";
@@ -53,7 +50,6 @@ export default function PatientInfoCard(props: PatientInfoCardProps) {
   const { patient, encounter } = props;
   const { t } = useTranslation();
   const queryClient = useQueryClient();
-  const questionnaireOptions = useQuestionnaireOptions("encounter_actions");
 
   const { mutate: updateEncounter } = useMutation({
     mutationFn: mutate(routes.encounter.update, {
@@ -376,18 +372,6 @@ export default function PatientInfoCard(props: PatientInfoCardProps) {
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
-                  {questionnaireOptions.map((option) => (
-                    <DropdownMenuItem key={option.slug} asChild>
-                      <Link
-                        href={`/facility/${encounter.facility.id}/patient/${patient.id}/encounter/${encounter.id}/questionnaire/${option.slug}`}
-                        className="cursor-pointer text-gray-800"
-                        data-cy="update-encounter-option"
-                      >
-                        {t(option.title)}
-                      </Link>
-                    </DropdownMenuItem>
-                  ))}
-                  <DropdownMenuSeparator />
                   <DropdownMenuLabel>{t("actions")}</DropdownMenuLabel>
                   <DropdownMenuItem onClick={handleMarkAsComplete}>
                     {t("mark_as_complete")}
diff --git a/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx b/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
index 8742560db7b..45ff8ce6801 100644
--- a/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx
@@ -363,7 +363,7 @@ export function MedicationRequestQuestion({
       <div className="max-w-4xl">
         <ValueSetSelect
           system="system-medication"
-          placeholder={t("search_medications")}
+          placeholder={t("search_for_medications_to_add")}
           onSelect={handleAddMedication}
           disabled={disabled}
           searchPostFix=" clinical drug"
diff --git a/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx b/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx
index 4a26f0afb25..17cba6b7790 100644
--- a/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx
@@ -356,7 +356,7 @@ export function MedicationStatementQuestion({
       <div className="max-w-4xl">
         <ValueSetSelect
           system="system-medication"
-          placeholder={t("search_medications")}
+          placeholder={t("search_for_medications_to_add")}
           onSelect={handleAddMedication}
           disabled={disabled}
           searchPostFix=" clinical drug"
diff --git a/src/types/emr/medicationAdministration/medicationAdministration.ts b/src/types/emr/medicationAdministration/medicationAdministration.ts
index a736846de4a..db45449679f 100644
--- a/src/types/emr/medicationAdministration/medicationAdministration.ts
+++ b/src/types/emr/medicationAdministration/medicationAdministration.ts
@@ -11,7 +11,6 @@ export const MEDICATION_ADMINISTRATION_STATUS = [
   "stopped",
   "in_progress",
   "on_hold",
-  "unknown",
   "cancelled",
 ] as const;
 

From b990c81e7978f059b6bb0ea4a5a4891fd673e116 Mon Sep 17 00:00:00 2001
From: Kamishetty Rishith <119791436+Rishith25@users.noreply.github.com>
Date: Mon, 10 Feb 2025 13:13:05 +0530
Subject: [PATCH 4/6] Minor fixes in resource creation form (#10218)

---
 src/components/Resource/ResourceCreate.tsx | 44 +++++++++++++++-------
 src/components/Resource/ResourceList.tsx   | 11 +++++-
 2 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/src/components/Resource/ResourceCreate.tsx b/src/components/Resource/ResourceCreate.tsx
index b21a74d0c96..73a5ff652e0 100644
--- a/src/components/Resource/ResourceCreate.tsx
+++ b/src/components/Resource/ResourceCreate.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { navigate, useQueryParams } from "raviger";
+import { Link, navigate, useQueryParams } from "raviger";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
@@ -81,13 +81,20 @@ export default function ResourceCreate(props: ResourceProps) {
 
   const { data: facilityData } = useQuery({
     queryKey: ["facility", facilityId],
-    queryFn: () =>
-      query(routes.getAnyFacility, {
-        pathParams: { id: String(facilityId) },
-      }),
+    queryFn: query(routes.getAnyFacility, {
+      pathParams: { id: String(facilityId) },
+    }),
     enabled: !!facilityId,
   });
 
+  const { data: patientData } = useQuery({
+    queryKey: ["patient", related_patient],
+    queryFn: query(routes.patient.getPatient, {
+      pathParams: { id: String(related_patient) },
+    }),
+    enabled: !!related_patient,
+  });
+
   const form = useForm<ResourceFormValues>({
     resolver: zodResolver(resourceFormSchema),
     defaultValues: {
@@ -145,23 +152,34 @@ export default function ResourceCreate(props: ResourceProps) {
     <Page
       title={t("create_resource_request")}
       crumbsReplacements={{
-        [facilityId]: { name: facilityData?.name || "" },
+        [facilityId]: {
+          name: facilityData?.name || "",
+          uri: `/facility/${facilityId}/settings/general`,
+        },
         resource: { style: "pointer-events-none" },
       }}
-      backUrl={`/facility/${facilityId}`}
+      backUrl={`/facility/${facilityId}/settings/general`}
     >
       <div className="container mx-auto max-w-4xl">
         <Card className="mt-4">
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-              {related_patient && (
+              {patientData && (
                 <Alert>
                   <div className="flex items-center gap-2">
-                    <CareIcon icon="l-user" className="h-5 w-5 text-blue-700" />
-                    <AlertDescription className="text-sm text-blue-700">
-                      {t("linked_patient")}:{" "}
-                      <span className="font-medium">{related_patient}</span>
-                    </AlertDescription>
+                    <Link
+                      href={`/facility/${facilityId}/patient/${related_patient}/resource_requests`}
+                      className="flex items-center gap-2"
+                    >
+                      <CareIcon
+                        icon="l-user"
+                        className="h-5 w-5 text-blue-700"
+                      />
+                      <AlertDescription className="text-sm text-blue-700">
+                        {t("linked_patient")}:{" "}
+                        <span className="font-medium">{patientData.name}</span>
+                      </AlertDescription>
+                    </Link>
                   </div>
                 </Alert>
               )}
diff --git a/src/components/Resource/ResourceList.tsx b/src/components/Resource/ResourceList.tsx
index 1ba35b0effe..96bab782705 100644
--- a/src/components/Resource/ResourceList.tsx
+++ b/src/components/Resource/ResourceList.tsx
@@ -103,7 +103,16 @@ export default function ResourceList({ facilityId }: { facilityId: string }) {
   const resources = queryResources?.results || [];
 
   return (
-    <Page title={t("resource")} hideBack={true}>
+    <Page
+      title={t("resource")}
+      hideBack={true}
+      crumbsReplacements={{
+        [facilityId]: {
+          name: facilityId || "",
+          uri: `/facility/${facilityId}/settings/general`,
+        },
+      }}
+    >
       <div className="space-y-4 mt-2">
         <div className="rounded-lg border bg-card shadow-sm">
           <div className="flex flex-col">

From 547edc42044adf0d5b868fe9140d2f33e6456751 Mon Sep 17 00:00:00 2001
From: Mohamed amaan <121436543+modamaan@users.noreply.github.com>
Date: Mon, 10 Feb 2025 13:22:58 +0530
Subject: [PATCH 5/6] FIXED:- Improve Visibility of Status, Role, and Contact
 numbers on User Management Page List View for Mobile Screens (#10419)

---
 src/components/Users/UserListAndCard.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/Users/UserListAndCard.tsx b/src/components/Users/UserListAndCard.tsx
index ee6753c1472..bf8b2b3e96d 100644
--- a/src/components/Users/UserListAndCard.tsx
+++ b/src/components/Users/UserListAndCard.tsx
@@ -133,9 +133,7 @@ const UserListHeader = () => {
   return (
     <thead>
       <tr className="bg-gray-50 text-sm font-medium text-gray-500">
-        <th className="sticky left-0 z-10 bg-gray-50 px-4 py-3 text-left">
-          {t("name")}
-        </th>
+        <th className="px-4 py-3 text-left">{t("name")}</th>
         <th className="w-32 px-10 py-3 text-left">{t("status")}</th>
         <th className="px-10 py-3 text-left">{t("role")}</th>
         <th className="px-4 py-3 text-left">{t("contact_number")}</th>
@@ -151,7 +149,7 @@ const UserListRow = ({ user }: { user: UserBase }) => {
       id={`usr_${user.id}`}
       className="hover:bg-gray-50"
     >
-      <td className="sticky left-0 z-10 bg-white px-4 py-4 lg:pr-20">
+      <td className="px-4 py-4 lg:pr-20">
         <div className="flex items-center gap-3">
           <Avatar
             // TO do: adjust for facility users

From d0c3406e3614cd183a371bcbfe216a5d847d83fc Mon Sep 17 00:00:00 2001
From: Nikhila C <115739037+NikhilA8606@users.noreply.github.com>
Date: Mon, 10 Feb 2025 15:41:14 +0530
Subject: [PATCH 6/6] Replaced the older components with ShadCN components in
 the ResourceCreate Page (#10367)

---
 public/locale/en.json                         |   2 +
 src/components/Common/FacilitySelect.tsx      | 108 ---------
 src/components/Form/AutoCompleteAsync.tsx     | 224 ------------------
 src/components/Resource/ResourceCreate.tsx    |  37 ++-
 .../Resource/ResourceDetailsUpdate.tsx        |  40 +++-
 src/hooks/useDebounce.ts                      |  29 ---
 6 files changed, 62 insertions(+), 378 deletions(-)
 delete mode 100644 src/components/Common/FacilitySelect.tsx
 delete mode 100644 src/components/Form/AutoCompleteAsync.tsx
 delete mode 100644 src/hooks/useDebounce.ts

diff --git a/public/locale/en.json b/public/locale/en.json
index 0454ba6a8ad..31cb125d9ab 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -973,6 +973,7 @@
   "facility": "Facility",
   "facility_actions_menu": "Facility action menu",
   "facility_added_successfully": "Facility created successfully",
+  "facility_assign_request": "What facility would you like to assign the request to?",
   "facility_consent_requests_page_title": "Patient Consent List",
   "facility_count_one": "{{count}} Facility",
   "facility_count_other": "{{count}} Facilities ",
@@ -2031,6 +2032,7 @@
   "start_time_before_authored_error": "Start time cannot be before the medication was prescribed",
   "start_time_future_error": "Start time cannot be in the future",
   "start_time_must_be_before_end_time": "Start time must be before end time",
+  "start_typing_to_search": "Start typing to search...",
   "state": "State",
   "state_reason_for_archiving": "State reason for archiving <strong>{{name}}</strong> file?",
   "status": "Status",
diff --git a/src/components/Common/FacilitySelect.tsx b/src/components/Common/FacilitySelect.tsx
deleted file mode 100644
index 4209de3fc89..00000000000
--- a/src/components/Common/FacilitySelect.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { t } from "i18next";
-import { useCallback } from "react";
-
-import { FacilityModel } from "@/components/Facility/models";
-import AutoCompleteAsync from "@/components/Form/AutoCompleteAsync";
-
-import request from "@/Utils/request/request";
-import facilityApi from "@/types/facility/facilityApi";
-
-interface BaseFacilitySelectProps {
-  name: string;
-  exclude_user?: string;
-  errors?: string | undefined;
-  className?: string;
-  required?: boolean;
-  searchAll?: boolean;
-  disabled?: boolean;
-  multiple?: boolean;
-  facilityType?: number;
-  showAll?: boolean;
-  showNOptions?: number | undefined;
-  freeText?: boolean;
-  allowNone?: boolean;
-  placeholder?: string;
-  filter?: (facilities: FacilityModel) => boolean;
-  id?: string;
-}
-
-interface SingleFacilitySelectProps extends BaseFacilitySelectProps {
-  multiple?: false;
-  selected: FacilityModel | null;
-  setSelected: (selected: FacilityModel | null) => void;
-}
-
-interface MultipleFacilitySelectProps extends BaseFacilitySelectProps {
-  multiple: true;
-  selected: FacilityModel[];
-  setSelected: (selected: FacilityModel[] | null) => void;
-}
-
-type FacilitySelectProps =
-  | SingleFacilitySelectProps
-  | MultipleFacilitySelectProps;
-
-export const FacilitySelect = ({
-  name,
-  exclude_user,
-  required,
-  multiple,
-  selected,
-  setSelected,
-  searchAll,
-  disabled = false,
-  showAll = true,
-  showNOptions,
-  className = "",
-  facilityType,
-  allowNone = false,
-  freeText = false,
-  errors = "",
-  placeholder,
-  filter,
-  id,
-}: FacilitySelectProps) => {
-  const facilitySearch = useCallback(
-    async (text: string) => {
-      const query = {
-        limit: 50,
-        offset: 0,
-        search_text: text,
-        all: searchAll,
-        facility_type: facilityType,
-        exclude_user: exclude_user,
-      };
-
-      const { data } = await request(facilityApi.getAllFacilities, { query });
-
-      if (allowNone)
-        return [
-          { name: t("no_home_facility"), id: "NONE" },
-          ...(data?.results || []),
-        ];
-
-      return data?.results;
-    },
-    [searchAll, showAll, facilityType, exclude_user, freeText],
-  );
-
-  return (
-    <AutoCompleteAsync
-      id={id}
-      placeholder={placeholder}
-      name={name}
-      required={required}
-      multiple={multiple}
-      selected={selected}
-      disabled={disabled}
-      onChange={setSelected}
-      fetchData={facilitySearch}
-      showNOptions={showNOptions}
-      optionLabel={(option: any) => option.name}
-      compareBy="id"
-      className={className}
-      error={errors}
-      filter={filter}
-    />
-  );
-};
diff --git a/src/components/Form/AutoCompleteAsync.tsx b/src/components/Form/AutoCompleteAsync.tsx
deleted file mode 100644
index b561b1f0648..00000000000
--- a/src/components/Form/AutoCompleteAsync.tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-import {
-  Combobox,
-  ComboboxButton,
-  ComboboxInput,
-  ComboboxOption,
-  ComboboxOptions,
-} from "@headlessui/react";
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-
-import CareIcon from "@/CAREUI/icons/CareIcon";
-
-import { DropdownTransition } from "@/components/Common/HelperComponents";
-import {
-  MultiSelectOptionChip,
-  dropdownOptionClassNames,
-} from "@/components/Form/MultiSelectMenuV2";
-
-import useDebounce from "@/hooks/useDebounce";
-
-import { classNames } from "@/Utils/utils";
-
-interface Props {
-  id?: string;
-  name?: string;
-  selected: any | any[];
-  fetchData: (search: string) => Promise<any> | undefined;
-  onChange: (selected: any) => void;
-  optionLabel?: (option: any) => string;
-  optionLabelChip?: (option: any) => string;
-  showNOptions?: number | undefined;
-  multiple?: boolean;
-  compareBy?: string;
-  debounceTime?: number;
-  className?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  error?: string;
-  required?: boolean;
-  onBlur?: () => void;
-  onFocus?: () => void;
-  filter?: (data: any) => boolean;
-}
-
-const AutoCompleteAsync = (props: Props) => {
-  const {
-    id,
-    name,
-    selected,
-    fetchData,
-    onChange,
-    optionLabel = (option: any) => option.label,
-    optionLabelChip = (option: any) => option.label,
-    showNOptions,
-    multiple = false,
-    compareBy,
-    debounceTime = 300,
-    className = "",
-    placeholder,
-    disabled = false,
-    required = false,
-    error,
-    filter,
-  } = props;
-  const [data, setData] = useState([]);
-  const [query, setQuery] = useState("");
-  const [loading, setLoading] = useState(false);
-  const { t } = useTranslation();
-
-  const hasSelection =
-    (!multiple && selected) || (multiple && selected?.length > 0);
-
-  const fetchDataDebounced = useDebounce(async (searchQuery: string) => {
-    setLoading(true);
-    try {
-      const fetchedData = (await fetchData(searchQuery)) || [];
-      const filteredData = filter
-        ? fetchedData.filter((item: any) => filter(item))
-        : fetchedData;
-
-      setData(
-        showNOptions !== undefined
-          ? filteredData.slice(0, showNOptions)
-          : filteredData,
-      );
-    } catch (error) {
-      console.error("Error fetching data:", error);
-    } finally {
-      setLoading(false);
-    }
-  }, debounceTime);
-
-  useEffect(() => {
-    fetchDataDebounced(query);
-  }, [query]);
-
-  return (
-    <div className={className}>
-      <Combobox
-        value={selected}
-        disabled={disabled}
-        onChange={onChange}
-        by={compareBy}
-        multiple={multiple as any}
-        immediate
-      >
-        <div className="relative mt-1">
-          <div className="relative flex">
-            <ComboboxInput
-              id={id}
-              name={name}
-              className={classNames(
-                "cui-input-base truncate pr-16",
-                error && "border-danger-500",
-              )}
-              placeholder={
-                multiple && hasSelection
-                  ? `${selected.length} selected`
-                  : placeholder || "Start typing to search..."
-              }
-              displayValue={() =>
-                hasSelection && !multiple ? optionLabel?.(selected) : ""
-              }
-              onChange={({ target }) => setQuery(target.value)}
-              onFocus={props.onFocus}
-              onBlur={() => {
-                props.onBlur?.();
-              }}
-              autoComplete="off"
-            />
-            {!disabled && (
-              <ComboboxButton className="absolute inset-y-0 right-0 flex items-center pr-2">
-                <div className="absolute right-0 mr-2 flex items-center text-lg text-secondary-900">
-                  {hasSelection && !loading && !required && (
-                    <div className="tooltip" id="clear-button">
-                      <CareIcon
-                        icon="l-times-circle"
-                        className="h-4 w-4 text-secondary-800 transition-colors duration-200 ease-in-out hover:text-secondary-500"
-                        onClick={(e) => {
-                          e.preventDefault();
-                          onChange(null);
-                        }}
-                      />
-                      <span className="tooltip-text tooltip-bottom -translate-x-1/2 text-xs">
-                        {t("clear_selection")}
-                      </span>
-                    </div>
-                  )}
-                  {loading ? (
-                    <CareIcon icon="l-spinner" className="animate-spin" />
-                  ) : (
-                    <CareIcon id="dropdown-toggle" icon="l-angle-down" />
-                  )}
-                </div>
-              </ComboboxButton>
-            )}
-          </div>
-          <DropdownTransition>
-            <ComboboxOptions
-              modal={false}
-              as="ul"
-              className="cui-dropdown-base absolute top-12 z-10 text-sm"
-            >
-              {data?.length === 0 ? (
-                <div className="relative cursor-default select-none px-4 py-2 text-secondary-700">
-                  {query !== ""
-                    ? "Nothing found."
-                    : "Start typing to search..."}
-                </div>
-              ) : (
-                data?.map((item: any) => (
-                  <ComboboxOption
-                    as="li"
-                    key={item.id}
-                    className={dropdownOptionClassNames}
-                    value={item}
-                  >
-                    {({ selected }) => (
-                      <div className="flex items-center justify-between">
-                        <div className="flex items-center gap-2">
-                          {optionLabel(item)}
-                          {optionLabelChip(item) && (
-                            <div className="mt-1 h-fit max-w-fit rounded-full border border-secondary-400 bg-secondary-100 px-2 text-center text-xs text-secondary-900 sm:mt-0">
-                              {optionLabelChip(item)}
-                            </div>
-                          )}
-                        </div>
-                        {selected && (
-                          <CareIcon icon="l-check" className="text-lg" />
-                        )}
-                      </div>
-                    )}
-                  </ComboboxOption>
-                ))
-              )}
-            </ComboboxOptions>
-          </DropdownTransition>
-          {multiple && selected?.length > 0 && (
-            <div className="flex flex-wrap gap-2 p-2">
-              {selected?.map((option: any, index: number) => (
-                <MultiSelectOptionChip
-                  key={index}
-                  label={optionLabel(option)}
-                  onRemove={() =>
-                    onChange(
-                      selected.filter((item: any) => item.id !== option.id),
-                    )
-                  }
-                />
-              ))}
-            </div>
-          )}
-          {error && (
-            <div className="mt-1 text-xs font-medium text-danger-500">
-              {error}
-            </div>
-          )}
-        </div>
-      </Combobox>
-    </div>
-  );
-};
-
-export default AutoCompleteAsync;
diff --git a/src/components/Resource/ResourceCreate.tsx b/src/components/Resource/ResourceCreate.tsx
index 73a5ff652e0..4e45ad78d96 100644
--- a/src/components/Resource/ResourceCreate.tsx
+++ b/src/components/Resource/ResourceCreate.tsx
@@ -1,6 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { Link, navigate, useQueryParams } from "raviger";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
@@ -10,6 +11,7 @@ import Card from "@/CAREUI/display/Card";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Alert, AlertDescription } from "@/components/ui/alert";
+import Autocomplete from "@/components/ui/autocomplete";
 import { Button } from "@/components/ui/button";
 import {
   Form,
@@ -33,7 +35,6 @@ import {
 import { Separator } from "@/components/ui/separator";
 import { Textarea } from "@/components/ui/textarea";
 
-import { FacilitySelect } from "@/components/Common/FacilitySelect";
 import Loading from "@/components/Common/Loading";
 import Page from "@/components/Common/Page";
 
@@ -46,6 +47,7 @@ import routes from "@/Utils/request/api";
 import mutate from "@/Utils/request/mutate";
 import query from "@/Utils/request/query";
 import validators from "@/Utils/validators";
+import facilityApi from "@/types/facility/facilityApi";
 import { ResourceRequest } from "@/types/resourceRequest/resourceRequest";
 
 interface ResourceProps {
@@ -53,6 +55,7 @@ interface ResourceProps {
 }
 
 export default function ResourceCreate(props: ResourceProps) {
+  const [facilitySearch, setFacilitySearch] = useState("");
   const { goBack } = useAppHistory();
   const { facilityId } = props;
   const { t } = useTranslation();
@@ -134,6 +137,21 @@ export default function ResourceCreate(props: ResourceProps) {
     });
   };
 
+  const { data: facilities } = useQuery({
+    queryKey: ["facilities", facilitySearch],
+    queryFn: query.debounced(facilityApi.getAllFacilities, {
+      queryParams: {
+        search_text: facilitySearch,
+        limit: 50,
+      },
+    }),
+  });
+
+  const facilityOptions = facilities?.results.map((facility) => ({
+    label: facility.name,
+    value: facility.id,
+  }));
+
   const fillMyDetails = () => {
     form.setValue(
       "referring_facility_contact_name",
@@ -204,11 +222,18 @@ export default function ResourceCreate(props: ResourceProps) {
                           {t("facility_for_care_support")}
                         </FormLabel>
                         <FormControl>
-                          <FacilitySelect
-                            multiple={false}
-                            name="assigned_facility"
-                            selected={field.value}
-                            setSelected={field.onChange}
+                          <Autocomplete
+                            options={facilityOptions ?? []}
+                            value={field.value?.id ?? ""}
+                            placeholder={t("start_typing_to_search")}
+                            onSearch={setFacilitySearch}
+                            onChange={(value) => {
+                              const facility =
+                                facilities?.results.find(
+                                  (f) => f.id === value,
+                                ) ?? null;
+                              form.setValue("assigned_facility", facility);
+                            }}
                           />
                         </FormControl>
                         <FormDescription>
diff --git a/src/components/Resource/ResourceDetailsUpdate.tsx b/src/components/Resource/ResourceDetailsUpdate.tsx
index f3e48df7af8..475fdd3da5c 100644
--- a/src/components/Resource/ResourceDetailsUpdate.tsx
+++ b/src/components/Resource/ResourceDetailsUpdate.tsx
@@ -7,16 +7,15 @@ import { toast } from "sonner";
 
 import Card from "@/CAREUI/display/Card";
 
+import Autocomplete from "@/components/ui/autocomplete";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 
 import CircularProgress from "@/components/Common/CircularProgress";
-import { FacilitySelect } from "@/components/Common/FacilitySelect";
 import Loading from "@/components/Common/Loading";
 import Page from "@/components/Common/Page";
 import UserAutocomplete from "@/components/Common/UserAutocompleteFormField";
-import { FieldLabel } from "@/components/Form/FormFields/FormField";
 import RadioFormField from "@/components/Form/FormFields/RadioFormField";
 import { SelectFormField } from "@/components/Form/FormFields/SelectFormField";
 import TextFormField from "@/components/Form/FormFields/TextFormField";
@@ -30,6 +29,7 @@ import { RESOURCE_STATUS_CHOICES } from "@/common/constants";
 import routes from "@/Utils/request/api";
 import mutate from "@/Utils/request/mutate";
 import query from "@/Utils/request/query";
+import facilityApi from "@/types/facility/facilityApi";
 import { UpdateResourceRequest } from "@/types/resourceRequest/resourceRequest";
 
 interface resourceProps {
@@ -64,6 +64,7 @@ const initialState = {
 export const ResourceDetailsUpdate = (props: resourceProps) => {
   const { goBack } = useAppHistory();
   const [qParams, _] = useQueryParams();
+  const [facilitySearch, setFacilitySearch] = useState("");
   const [assignedUser, SetAssignedUser] = useState<UserModel>();
   const resourceFormReducer = (state = initialState, action: any) => {
     switch (action.type) {
@@ -159,6 +160,21 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
       },
     });
 
+  const { data: facilities } = useQuery({
+    queryKey: ["facilities", facilitySearch],
+    queryFn: query.debounced(facilityApi.getAllFacilities, {
+      queryParams: {
+        search_text: facilitySearch,
+        limit: 50,
+      },
+    }),
+  });
+
+  const facilityOptions = facilities?.results.map((facility) => ({
+    label: facility.name,
+    value: facility.id,
+  }));
+
   const handleSubmit = async () => {
     const validForm = validateForm();
 
@@ -226,15 +242,17 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
             </div>
 
             <div>
-              <FieldLabel>
-                What facility would you like to assign the request to
-              </FieldLabel>
-              <FacilitySelect
-                multiple={false}
-                name="assigned_facility"
-                selected={state.form.assigned_facility}
-                setSelected={(obj) => setFacility(obj, "assigned_facility")}
-                errors={state.errors.assigned_facility}
+              <Label className="text-gray-700 -mt-3 mb-3">
+                {t("facility_assign_request")}
+              </Label>
+              <Autocomplete
+                options={facilityOptions ?? []}
+                placeholder={t("start_typing_to_search")}
+                value={state.form.assigned_facility}
+                onSearch={setFacilitySearch}
+                onChange={(selected) =>
+                  setFacility(selected, "assigned_facility")
+                }
               />
             </div>
 
diff --git a/src/hooks/useDebounce.ts b/src/hooks/useDebounce.ts
deleted file mode 100644
index 66ee398f962..00000000000
--- a/src/hooks/useDebounce.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useEffect, useRef } from "react";
-
-export default function useDebounce<T extends any[]>(
-  callback: (...args: T) => void,
-  delay: number,
-) {
-  const callbackRef = useRef(callback);
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(() => {
-    callbackRef.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    };
-  }, []);
-
-  const debouncedCallback = (...args: T) => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    timeoutRef.current = setTimeout(() => {
-      callbackRef.current(...args);
-    }, delay);
-  };
-  return debouncedCallback;
-}