From 736b6fbc3f2e963798e46b8c020b921e3a851603 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Wed, 8 Jan 2025 18:30:35 +0530
Subject: [PATCH 01/18] desing update

---
 .../Common/SearchByMultipleFields.tsx         | 174 +++++++++++-------
 1 file changed, 111 insertions(+), 63 deletions(-)

diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 748bef41540..b481fbfb3d2 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -28,6 +28,8 @@ import {
 import { FieldError } from "@/components/Form/FieldValidators";
 import PhoneNumberFormField from "@/components/Form/FormFields/PhoneNumberFormField";
 
+import { isAppleDevice } from "@/Utils/utils";
+
 interface SearchOption {
   key: string;
   type: "text" | "phone";
@@ -108,13 +110,14 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (
-        e.key === "/" &&
-        !(document.activeElement instanceof HTMLInputElement)
-      ) {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
         setOpen(true);
       }
+      if (e.key === "Escape") {
+        inputRef.current?.focus();
+        setOpen(false);
+      }
       if (open) {
         if (e.key === "ArrowDown") {
           setFocusedIndex((prevIndex) =>
@@ -127,22 +130,6 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
         } else if (e.key === "Enter") {
           handleOptionChange(focusedIndex);
         }
-
-        if (e.key === "Escape") {
-          inputRef.current?.focus();
-          setOpen(false);
-        }
-
-        options.forEach((option, i) => {
-          if (
-            e.key.toLocaleLowerCase() ===
-              option.shortcutKey.toLocaleLowerCase() &&
-            open
-          ) {
-            e.preventDefault();
-            handleOptionChange(i);
-          }
-        });
       }
     };
 
@@ -198,15 +185,40 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
         );
       default:
         return (
-          <Input
-            id={id}
-            type="text"
-            placeholder={selectedOption.placeholder}
-            {...commonProps}
-          />
+          <div className="relative">
+            <Input
+              id={id}
+              type="text"
+              placeholder={selectedOption.placeholder}
+              {...commonProps}
+            />
+            <div className="absolute top-1/2 right-2 transform -translate-y-1/2 flex items-center space-x-2 text-xs text-gray-500">
+              {open ? (
+                <span>ESC</span>
+              ) : (
+                <span>
+                  {isAppleDevice ? (
+                    "⌘K"
+                  ) : (
+                    <div className="flex gap-1 font-medium">
+                      <span className="text-gray-500">Ctrl</span>
+                      <span className="text-gray-500">K</span>
+                    </div>
+                  )}
+                </span>
+              )}
+            </div>
+          </div>
         );
     }
-  }, [selectedOption, searchValue, handleSearchChange, t, inputClassName]);
+  }, [
+    selectedOption,
+    searchValue,
+    handleSearchChange,
+    t,
+    inputClassName,
+    open,
+  ]);
 
   return (
     <div
@@ -222,42 +234,78 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
         aria-haspopup="listbox"
         className="flex items-center rounded-t-lg"
       >
-        <Popover open={open} onOpenChange={setOpen}>
-          <PopoverTrigger asChild>
-            <Button
-              variant="ghost"
-              className="focus:ring-0 px-2 ml-1"
-              size="sm"
-              onClick={() => setOpen(true)}
-            >
-              <CareIcon icon="l-search" className="mr-2 text-base" />/
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent className="w-[250px] p-0">
-            <Command>
-              <CommandList>
-                <CommandGroup>
-                  {options.map((option, index) => (
-                    <CommandItem
-                      key={option.key}
-                      onSelect={() => handleOptionChange(index)}
-                      className={cn({
-                        "bg-gray-100": focusedIndex === index,
-                        "hover:bg-secondary-100": true,
-                      })}
-                    >
-                      <CareIcon icon="l-search" className="mr-2 h-4 w-4" />
-                      <span className="flex-1">{t(option.key)}</span>
-                      <kbd className="ml-auto text-xs text-gray-400">
-                        {option.shortcutKey}
-                      </kbd>
-                    </CommandItem>
-                  ))}
-                </CommandGroup>
-              </CommandList>
-            </Command>
-          </PopoverContent>
-        </Popover>
+        {options.length > 1 && (
+          <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="ghost"
+                className="focus:ring-0 px-2 ml-1"
+                size="sm"
+                onClick={() => setOpen(true)}
+              >
+                <CareIcon icon="l-search" className="mr-2 text-base" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-[250px] p-0">
+              <Command>
+                <CommandList>
+                  <CommandGroup>
+                    <div className="p-2">
+                      <div className="mb-4">
+                        <p className="text-sm font-medium text-gray-600">
+                          Search by
+                        </p>
+                        <div className="flex mt-1">
+                          <Button
+                            onClick={() => setOpen(false)}
+                            variant="outline"
+                            size="xs"
+                            className="bg-primary-100 text-primary-700 hover:bg-primary-200 border-primary-400"
+                          >
+                            <CareIcon icon="l-check" className="" />
+                            {t(options[selectedOptionIndex].key)}
+                          </Button>
+                        </div>
+                      </div>
+
+                      <div>
+                        <p className="text-sm font-medium text-gray-600">
+                          Search by other options
+                        </p>
+                        {options.map((option, index) => {
+                          if (selectedOption.key === option.key) return null;
+
+                          return (
+                            <CommandItem
+                              key={option.key}
+                              onSelect={() => handleOptionChange(index)}
+                              className={cn({
+                                "bg-gray-100": focusedIndex === index,
+                                "hover:bg-secondary-100": true,
+                              })}
+                              onMouseEnter={() => setFocusedIndex(index)}
+                              onMouseLeave={() => setFocusedIndex(-1)}
+                            >
+                              <span className="flex-1">{t(option.key)}</span>
+                              {focusedIndex === index && (
+                                <kbd
+                                  className="ml-auto px-2 py-1 text-xs font-medium text-gray-800 bg-gray-200 rounded shadow-sm hover:bg-gray-300"
+                                  title="Press Enter to select"
+                                >
+                                  ⏎ Enter
+                                </kbd>
+                              )}
+                            </CommandItem>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        )}
         <div className="w-full">{renderSearchInput}</div>
       </div>
       {error && (

From 22cfa91cd3cf7876e8c5046f46c1af418abaa987 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Fri, 10 Jan 2025 21:10:24 +0530
Subject: [PATCH 02/18] fix searchbyphonenumber in org patient

---
 src/pages/Organization/OrganizationPatients.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/pages/Organization/OrganizationPatients.tsx b/src/pages/Organization/OrganizationPatients.tsx
index c31c9652b23..d60a2debffd 100644
--- a/src/pages/Organization/OrganizationPatients.tsx
+++ b/src/pages/Organization/OrganizationPatients.tsx
@@ -81,8 +81,12 @@ export default function OrganizationPatients({ id, navOrganizationId }: Props) {
           onSearch={(key, value) => {
             const searchParams = {
               name: key === "name" ? value : "",
-              phone_number: key === "phone_number" ? value : "",
-              page: 1,
+              phone_number:
+                key === "phone_number"
+                  ? value.length >= 13 || value === ""
+                    ? value
+                    : undefined
+                  : undefined,
             };
             updateQuery(searchParams);
           }}

From f171fc478da5e9592429896428ab30f4429f6753 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Fri, 10 Jan 2025 22:37:42 +0530
Subject: [PATCH 03/18] fix encounter option change query search

---
 src/pages/Encounters/EncounterList.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/pages/Encounters/EncounterList.tsx b/src/pages/Encounters/EncounterList.tsx
index a1fb5da391c..c1108300572 100644
--- a/src/pages/Encounters/EncounterList.tsx
+++ b/src/pages/Encounters/EncounterList.tsx
@@ -161,7 +161,19 @@ export function EncounterList({
     encounter_id,
     external_identifier,
   } = qParams;
-
+  const handleFieldChange = () => {
+    {
+      updateQuery({
+        status,
+        encounter_class: encounterClass,
+        priority,
+        name: undefined,
+        encounter_id: undefined,
+        external_identifier: undefined,
+      });
+      clearSearch.value = true;
+    }
+  };
   const handleSearch = useCallback(
     (key: string, value: string) => {
       updateQuery({
@@ -273,6 +285,7 @@ export function EncounterList({
                       <SearchByMultipleFields
                         id="encounter-search"
                         options={searchOptions}
+                        onFieldChange={handleFieldChange}
                         onSearch={handleSearch}
                         clearSearch={clearSearch}
                         className="w-full border-none shadow-none"

From 171ac9a57a00ddf4dc3b750f8913db8ea1bbeed0 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Fri, 10 Jan 2025 22:52:12 +0530
Subject: [PATCH 04/18] fix searchbyphonenumber in org patient

---
 .../Common/SearchByMultipleFields.tsx         | 52 +++++++++++--------
 .../Organization/OrganizationPatients.tsx     | 28 +++++-----
 2 files changed, 45 insertions(+), 35 deletions(-)

diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index b132690697b..78e20f23466 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -182,29 +182,37 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
       default:
         return (
           <div className="relative">
-            <Input
-              id={id}
-              type="text"
-              placeholder={selectedOption.placeholder}
-              {...commonProps}
-            />
-            <div className="absolute top-1/2 right-2 transform -translate-y-1/2 flex items-center space-x-2 text-xs text-gray-500">
-              {open ? (
-                <span>ESC</span>
-              ) : (
-                <span>
-                  {isAppleDevice ? (
-                    "⌘K"
-                  ) : (
-                    <div className="flex gap-1 font-medium">
-                      <span className="text-gray-500">Ctrl</span>
-                      <span className="text-gray-500">K</span>
-                    </div>
-                  )}
-                </span>
-              )}
-            </div>
+          <Input
+            id={id}
+            type="text"
+            placeholder={selectedOption.placeholder}
+            {...commonProps}
+          />
+          <div className="absolute top-1/2 right-2 transform -translate-y-1/2 flex items-center space-x-2 text-xs text-gray-500">
+            {open ? (
+              <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
+                ESC
+              </span>
+            ) : (
+              <span>
+                {isAppleDevice ? (
+                  <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
+                    ⌘K
+                  </span>
+                ) : (
+                  <div className="flex gap-1 font-medium">
+                    <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
+                      Ctrl
+                    </span>
+                    <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
+                      K
+                    </span>
+                  </div>
+                )}
+              </span>
+            )}
           </div>
+        </div>
         );
     }
   }, [
diff --git a/src/pages/Organization/OrganizationPatients.tsx b/src/pages/Organization/OrganizationPatients.tsx
index bf9497c65e7..7b67c538748 100644
--- a/src/pages/Organization/OrganizationPatients.tsx
+++ b/src/pages/Organization/OrganizationPatients.tsx
@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { Link } from "raviger";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import RecordMeta from "@/CAREUI/display/RecordMeta";
@@ -32,6 +32,19 @@ export default function OrganizationPatients({ id, navOrganizationId }: Props) {
     useFilters({ limit: 14, cacheBlacklist: ["patient"] });
   const [organization, setOrganization] = useState<Organization | null>(null);
 
+  const handleSearch = useCallback((key: string, value: string) => {
+    const searchParams = {
+      name: key === "name" ? value : "",
+      phone_number:
+        key === "phone_number"
+          ? value.length >= 13 || value === ""
+            ? value
+            : undefined
+          : undefined,
+    };
+    updateQuery(searchParams);
+  }, []);
+
   const { data: patients, isLoading } = useQuery({
     queryKey: ["organizationPatients", id, qParams],
     queryFn: query.debounced(organizationApi.listPatients, {
@@ -80,18 +93,7 @@ export default function OrganizationPatients({ id, navOrganizationId }: Props) {
               shortcutKey: "p",
             },
           ]}
-          onSearch={(key, value) => {
-            const searchParams = {
-              name: key === "name" ? value : "",
-              phone_number:
-                key === "phone_number"
-                  ? value.length >= 13 || value === ""
-                    ? value
-                    : undefined
-                  : undefined,
-            };
-            updateQuery(searchParams);
-          }}
+          onSearch={handleSearch}
           clearSearch={{ value: !qParams.name && !qParams.phone_number }}
           onFieldChange={(option) => {
             const clearParams = {

From 95c06f9b9ea2b0891833867476f5590adf5bc31f Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Fri, 10 Jan 2025 22:56:20 +0530
Subject: [PATCH 05/18] fix lint issue

---
 .../Common/SearchByMultipleFields.tsx         | 102 +++++++++++-------
 1 file changed, 64 insertions(+), 38 deletions(-)

diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 78e20f23466..785d780a928 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -168,51 +168,77 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
     switch (selectedOption.type) {
       case "phone":
         return (
-          <PhoneNumberFormField
-            id={id}
-            name={selectedOption.key}
-            placeholder={selectedOption.placeholder}
-            types={["mobile", "landline"]}
-            {...commonProps}
-            errorClassName="hidden"
-            hideHelp={true}
-            onError={(error: FieldError) => setError(error)}
-          />
+          <div className="relative">
+            <PhoneNumberFormField
+              id={id}
+              name={selectedOption.key}
+              placeholder={selectedOption.placeholder}
+              types={["mobile", "landline"]}
+              {...commonProps}
+              errorClassName="hidden"
+              hideHelp={true}
+              onError={(error: FieldError) => setError(error)}
+            />
+            <div className="absolute top-1/2 right-2 transform -translate-y-1/2 flex items-center space-x-2 text-xs text-gray-500">
+              {open ? (
+                <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
+                  ESC
+                </span>
+              ) : (
+                <span>
+                  {isAppleDevice ? (
+                    <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
+                      ⌘K
+                    </span>
+                  ) : (
+                    <div className="flex gap-1 font-medium">
+                      <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
+                        Ctrl
+                      </span>
+                      <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
+                        K
+                      </span>
+                    </div>
+                  )}
+                </span>
+              )}
+            </div>
+          </div>
         );
       default:
         return (
           <div className="relative">
-          <Input
-            id={id}
-            type="text"
-            placeholder={selectedOption.placeholder}
-            {...commonProps}
-          />
-          <div className="absolute top-1/2 right-2 transform -translate-y-1/2 flex items-center space-x-2 text-xs text-gray-500">
-            {open ? (
-              <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
-                ESC
-              </span>
-            ) : (
-              <span>
-                {isAppleDevice ? (
-                  <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
-                    ⌘K
-                  </span>
-                ) : (
-                  <div className="flex gap-1 font-medium">
+            <Input
+              id={id}
+              type="text"
+              placeholder={selectedOption.placeholder}
+              {...commonProps}
+            />
+            <div className="absolute top-1/2 right-2 transform -translate-y-1/2 flex items-center space-x-2 text-xs text-gray-500">
+              {open ? (
+                <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
+                  ESC
+                </span>
+              ) : (
+                <span>
+                  {isAppleDevice ? (
                     <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
-                      Ctrl
+                      ⌘K
                     </span>
-                    <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
-                      K
-                    </span>
-                  </div>
-                )}
-              </span>
-            )}
+                  ) : (
+                    <div className="flex gap-1 font-medium">
+                      <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
+                        Ctrl
+                      </span>
+                      <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
+                        K
+                      </span>
+                    </div>
+                  )}
+                </span>
+              )}
+            </div>
           </div>
-        </div>
         );
     }
   }, [

From 850343047b4673f5319c1a76e156e83b36d475f2 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Fri, 10 Jan 2025 23:38:12 +0530
Subject: [PATCH 06/18] final fix

---
 .../Common/SearchByMultipleFields.tsx         | 91 +++++++++++--------
 .../Organization/OrganizationPatients.tsx     | 30 +++---
 2 files changed, 73 insertions(+), 48 deletions(-)

diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 785d780a928..89e5bfc8748 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -74,7 +74,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
   const [searchValue, setSearchValue] = useState(selectedOption.value || "");
   const [open, setOpen] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
-  const [focusedIndex, setFocusedIndex] = useState(0);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
   const [error, setError] = useState<string | undefined | boolean>();
 
   useEffect(() => {
@@ -108,6 +108,11 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
     [onSearch],
   );
 
+  const unselectedOptions = useMemo(
+    () => options.filter((option) => option.key !== selectedOption.key),
+    [options, selectedOption],
+  );
+
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
@@ -117,18 +122,22 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
       if (e.key === "Escape") {
         inputRef.current?.focus();
         setOpen(false);
+        setSearchValue("");
       }
       if (open) {
         if (e.key === "ArrowDown") {
           setFocusedIndex((prevIndex) =>
-            prevIndex === options.length - 1 ? 0 : prevIndex + 1,
+            prevIndex === unselectedOptions.length - 1 ? 0 : prevIndex + 1,
           );
         } else if (e.key === "ArrowUp") {
           setFocusedIndex((prevIndex) =>
-            prevIndex === 0 ? options.length - 1 : prevIndex - 1,
+            prevIndex === 0 ? unselectedOptions.length - 1 : prevIndex - 1,
+          );
+        } else if (e.key === "Enter" && focusedIndex !== -1) {
+          const selectedOptionIndex = options.findIndex(
+            (option) => option.key === unselectedOptions[focusedIndex].key,
           );
-        } else if (e.key === "Enter") {
-          handleOptionChange(focusedIndex);
+          handleOptionChange(selectedOptionIndex);
         }
       }
     };
@@ -276,58 +285,66 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
                 <CareIcon icon="l-search" className="mr-2 text-base" />
               </Button>
             </PopoverTrigger>
-            <PopoverContent className="w-[250px] p-0">
+            <PopoverContent className="absolute p-0">
               <Command>
                 <CommandList>
                   <CommandGroup>
-                    <div className="p-2">
+                    <div className="p-4">
+                      {/* Search by section */}
                       <div className="mb-4">
                         <p className="text-sm font-medium text-gray-600">
                           Search by
                         </p>
-                        <div className="flex mt-1">
+                        <div className="flex mt-2">
                           <Button
                             onClick={() => setOpen(false)}
                             variant="outline"
                             size="xs"
                             className="bg-primary-100 text-primary-700 hover:bg-primary-200 border-primary-400"
                           >
-                            <CareIcon icon="l-check" className="" />
+                            <CareIcon icon="l-check" className="mr-1" />
                             {t(options[selectedOptionIndex].key)}
                           </Button>
                         </div>
                       </div>
-
+                      <hr className="border-gray-200 mb-3" />
                       <div>
-                        <p className="text-sm font-medium text-gray-600">
-                          Search by other options
+                        <p className="text-xs font-semibold text-gray-500 mb-2">
+                          Choose other search types
                         </p>
-                        {options.map((option, index) => {
-                          if (selectedOption.key === option.key) return null;
+                        <div className="space-y-2">
+                          {unselectedOptions.map((option, index) => {
+                            if (selectedOption.key === option.key) return null;
 
-                          return (
-                            <CommandItem
-                              key={option.key}
-                              onSelect={() => handleOptionChange(index)}
-                              className={cn({
-                                "bg-gray-100": focusedIndex === index,
-                                "hover:bg-secondary-100": true,
-                              })}
-                              onMouseEnter={() => setFocusedIndex(index)}
-                              onMouseLeave={() => setFocusedIndex(-1)}
-                            >
-                              <span className="flex-1">{t(option.key)}</span>
-                              {focusedIndex === index && (
-                                <kbd
-                                  className="ml-auto px-2 py-1 text-xs font-medium text-gray-800 bg-gray-200 rounded shadow-sm hover:bg-gray-300"
-                                  title="Press Enter to select"
-                                >
-                                  ⏎ Enter
-                                </kbd>
-                              )}
-                            </CommandItem>
-                          );
-                        })}
+                            return (
+                              <CommandItem
+                                key={option.key}
+                                onSelect={() => handleOptionChange(index)}
+                                className={cn(
+                                  "flex items-center p-2 rounded-md cursor-pointer",
+                                  {
+                                    "bg-gray-100": focusedIndex === index,
+                                    "hover:bg-secondary-100": true,
+                                  },
+                                )}
+                                onMouseEnter={() => setFocusedIndex(index)}
+                                onMouseLeave={() => setFocusedIndex(-1)}
+                              >
+                                <span className="flex-1 text-sm">
+                                  {t(option.key)}
+                                </span>
+                                {focusedIndex === index && (
+                                  <kbd
+                                    className="ml-2 border border-gray-300 rounded px-1 bg-white text-xs text-gray-500"
+                                    title="Press Enter to select"
+                                  >
+                                    ⏎ Enter
+                                  </kbd>
+                                )}
+                              </CommandItem>
+                            );
+                          })}
+                        </div>
                       </div>
                     </div>
                   </CommandGroup>
diff --git a/src/pages/Organization/OrganizationPatients.tsx b/src/pages/Organization/OrganizationPatients.tsx
index 7b67c538748..6091ea5af15 100644
--- a/src/pages/Organization/OrganizationPatients.tsx
+++ b/src/pages/Organization/OrganizationPatients.tsx
@@ -28,8 +28,14 @@ interface Props {
 
 export default function OrganizationPatients({ id, navOrganizationId }: Props) {
   const { t } = useTranslation();
-  const { qParams, Pagination, advancedFilter, resultsPerPage, updateQuery } =
-    useFilters({ limit: 14, cacheBlacklist: ["patient"] });
+  const {
+    qParams,
+    Pagination,
+    advancedFilter,
+    resultsPerPage,
+    clearSearch,
+    updateQuery,
+  } = useFilters({ limit: 14, cacheBlacklist: ["name", "phone_number"] });
   const [organization, setOrganization] = useState<Organization | null>(null);
 
   const handleSearch = useCallback((key: string, value: string) => {
@@ -45,6 +51,16 @@ export default function OrganizationPatients({ id, navOrganizationId }: Props) {
     updateQuery(searchParams);
   }, []);
 
+  const handleFieldChange = () => {
+    {
+      updateQuery({
+        name: undefined,
+        phone_number: undefined,
+      });
+      clearSearch.value = true;
+    }
+  };
+
   const { data: patients, isLoading } = useQuery({
     queryKey: ["organizationPatients", id, qParams],
     queryFn: query.debounced(organizationApi.listPatients, {
@@ -95,15 +111,7 @@ export default function OrganizationPatients({ id, navOrganizationId }: Props) {
           ]}
           onSearch={handleSearch}
           clearSearch={{ value: !qParams.name && !qParams.phone_number }}
-          onFieldChange={(option) => {
-            const clearParams = {
-              name: option.key === "name" ? qParams.name || "" : "",
-              phone_number:
-                option.key === "phone_number" ? qParams.phone_number || "" : "",
-              page: 1,
-            };
-            updateQuery(clearParams);
-          }}
+          onFieldChange={handleFieldChange}
         />
 
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

From 3cfb24aa5148262da631729a251edda04f9fb5e7 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Sat, 11 Jan 2025 20:22:36 +0530
Subject: [PATCH 07/18] remove alphabet shortcut

---
 src/components/Common/SearchByMultipleFields.tsx | 1 -
 src/components/Patient/PatientIndex.tsx          | 1 -
 src/pages/Encounters/EncounterList.tsx           | 7 +++----
 src/pages/Facility/FacilitiesPage.tsx            | 1 -
 src/pages/Organization/OrganizationPatients.tsx  | 2 --
 5 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 89e5bfc8748..d067fe446e5 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -35,7 +35,6 @@ interface SearchOption {
   type: "text" | "phone";
   placeholder: string;
   value: string;
-  shortcutKey: string;
   component?: React.ComponentType<HTMLDivElement>;
 }
 
diff --git a/src/components/Patient/PatientIndex.tsx b/src/components/Patient/PatientIndex.tsx
index 5e89d419978..daed7b8a673 100644
--- a/src/components/Patient/PatientIndex.tsx
+++ b/src/components/Patient/PatientIndex.tsx
@@ -85,7 +85,6 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
       type: "phone" as const,
       placeholder: t("search_by_phone_number"),
       value: phoneNumber,
-      shortcutKey: "p",
     },
   ];
 
diff --git a/src/pages/Encounters/EncounterList.tsx b/src/pages/Encounters/EncounterList.tsx
index 482b150b2a0..8a70917ebb6 100644
--- a/src/pages/Encounters/EncounterList.tsx
+++ b/src/pages/Encounters/EncounterList.tsx
@@ -214,7 +214,6 @@ export function EncounterList({
     }),
     enabled: !!encounter_id,
   });
-
   const searchOptions = [
     {
       key: "name",
@@ -222,7 +221,6 @@ export function EncounterList({
       type: "text" as const,
       placeholder: "Search by patient name",
       value: name || "",
-      shortcutKey: "n",
     },
     {
       key: "encounter_id",
@@ -230,7 +228,6 @@ export function EncounterList({
       type: "text" as const,
       placeholder: "Search by encounter ID",
       value: encounter_id || "",
-      shortcutKey: "i",
     },
     {
       key: "external_identifier",
@@ -238,7 +235,6 @@ export function EncounterList({
       type: "text" as const,
       placeholder: "Search by external ID",
       value: external_identifier || "",
-      shortcutKey: "e",
     },
   ];
 
@@ -285,6 +281,9 @@ export function EncounterList({
                       <SearchByMultipleFields
                         id="encounter-search"
                         options={searchOptions}
+                        initialOptionIndex={searchOptions.findIndex(
+                          (option) => option.value !== "",
+                        )}
                         onFieldChange={handleFieldChange}
                         onSearch={handleSearch}
                         clearSearch={clearSearch}
diff --git a/src/pages/Facility/FacilitiesPage.tsx b/src/pages/Facility/FacilitiesPage.tsx
index d1427444187..8966aa4a7b3 100644
--- a/src/pages/Facility/FacilitiesPage.tsx
+++ b/src/pages/Facility/FacilitiesPage.tsx
@@ -67,7 +67,6 @@ export function FacilitiesPage() {
               type: "text" as const,
               placeholder: t("facility_search_placeholder_text"),
               value: qParams.name || "",
-              shortcutKey: "f",
             },
           ]}
           className="w-full sm:w-1/2"
diff --git a/src/pages/Organization/OrganizationPatients.tsx b/src/pages/Organization/OrganizationPatients.tsx
index 6091ea5af15..1f8db33054d 100644
--- a/src/pages/Organization/OrganizationPatients.tsx
+++ b/src/pages/Organization/OrganizationPatients.tsx
@@ -99,14 +99,12 @@ export default function OrganizationPatients({ id, navOrganizationId }: Props) {
               type: "text",
               placeholder: "Search by name",
               value: qParams.name || "",
-              shortcutKey: "n",
             },
             {
               key: "phone_number",
               type: "phone",
               placeholder: "Search by phone number",
               value: qParams.phone_number || "",
-              shortcutKey: "p",
             },
           ]}
           onSearch={handleSearch}

From a90cb9fc8da58282f54b4745302f7f105488d16d Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Sun, 12 Jan 2025 15:14:20 +0530
Subject: [PATCH 08/18] remane to GovtOrganizationSelector

---
 src/components/Facility/CreateFacilityForm.tsx             | 4 ++--
 src/components/Facility/FacilityCreate.tsx                 | 4 ++--
 src/components/Patient/PatientRegistration.tsx             | 4 ++--
 src/components/Users/CreateUserForm.tsx                    | 4 ++--
 ...ganizationSelector.tsx => GovtOrganizationSelector.tsx} | 7 ++++---
 src/pages/PublicAppointments/PatientRegistration.tsx       | 4 ++--
 6 files changed, 14 insertions(+), 13 deletions(-)
 rename src/pages/Organization/components/{OrganizationSelector.tsx => GovtOrganizationSelector.tsx} (97%)

diff --git a/src/components/Facility/CreateFacilityForm.tsx b/src/components/Facility/CreateFacilityForm.tsx
index d3c73213422..51899dae926 100644
--- a/src/components/Facility/CreateFacilityForm.tsx
+++ b/src/components/Facility/CreateFacilityForm.tsx
@@ -40,7 +40,7 @@ import {
 import routes from "@/Utils/request/api";
 import mutate from "@/Utils/request/mutate";
 import { parsePhoneNumber } from "@/Utils/utils";
-import OrganizationSelector from "@/pages/Organization/components/OrganizationSelector";
+import GovtOrganizationSelector from "@/pages/Organization/components/GovtOrganizationSelector";
 import { BaseFacility } from "@/types/facility/facility";
 
 const facilityFormSchema = z.object({
@@ -418,7 +418,7 @@ export default function CreateFacilityForm({
                 <FormItem>
                   <FormLabel>Organization</FormLabel>
                   <FormControl>
-                    <OrganizationSelector
+                    <GovtOrganizationSelector
                       value={field.value}
                       onChange={field.onChange}
                       required
diff --git a/src/components/Facility/FacilityCreate.tsx b/src/components/Facility/FacilityCreate.tsx
index 59b87633a8f..8d293164741 100644
--- a/src/components/Facility/FacilityCreate.tsx
+++ b/src/components/Facility/FacilityCreate.tsx
@@ -60,7 +60,7 @@ import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
 import request from "@/Utils/request/request";
 import { parsePhoneNumber } from "@/Utils/utils";
-import OrganizationSelector from "@/pages/Organization/components/OrganizationSelector";
+import GovtOrganizationSelector from "@/pages/Organization/components/GovtOrganizationSelector";
 
 interface FacilityProps {
   facilityId?: string;
@@ -330,7 +330,7 @@ export const FacilityCreate = (props: FacilityProps) => {
                 />
               </div>
               <div className="col-span-2 grid grid-cols-2 gap-5">
-                <OrganizationSelector
+                <GovtOrganizationSelector
                   required={true}
                   onChange={(value) => form.setValue("geo_organization", value)}
                 />
diff --git a/src/components/Patient/PatientRegistration.tsx b/src/components/Patient/PatientRegistration.tsx
index 2cfade10b39..cf879955115 100644
--- a/src/components/Patient/PatientRegistration.tsx
+++ b/src/components/Patient/PatientRegistration.tsx
@@ -44,7 +44,7 @@ import {
   getPincodeDetails,
   parsePhoneNumber,
 } from "@/Utils/utils";
-import OrganizationSelector from "@/pages/Organization/components/OrganizationSelector";
+import GovtOrganizationSelector from "@/pages/Organization/components/GovtOrganizationSelector";
 import { PatientModel, validatePatient } from "@/types/emr/patient";
 
 import Autocomplete from "../ui/autocomplete";
@@ -719,7 +719,7 @@ export default function PatientRegistration(
               </div>
               {form.nationality === "India" && (
                 <>
-                  <OrganizationSelector
+                  <GovtOrganizationSelector
                     required={true}
                     onChange={(value) =>
                       setForm((f) => ({
diff --git a/src/components/Users/CreateUserForm.tsx b/src/components/Users/CreateUserForm.tsx
index da7273b0fe1..1189a7420c7 100644
--- a/src/components/Users/CreateUserForm.tsx
+++ b/src/components/Users/CreateUserForm.tsx
@@ -34,7 +34,7 @@ import { GENDER_TYPES } from "@/common/constants";
 
 import query from "@/Utils/request/query";
 import request from "@/Utils/request/request";
-import OrganizationSelector from "@/pages/Organization/components/OrganizationSelector";
+import GovtOrganizationSelector from "@/pages/Organization/components/GovtOrganizationSelector";
 import { UserBase } from "@/types/user/user";
 import UserApi from "@/types/user/userApi";
 import userApi from "@/types/user/userApi";
@@ -465,7 +465,7 @@ export default function CreateUserForm({ onSubmitSuccess }: Props) {
           render={({ field }) => (
             <FormItem>
               <FormControl>
-                <OrganizationSelector
+                <GovtOrganizationSelector
                   value={field.value}
                   onChange={field.onChange}
                   required
diff --git a/src/pages/Organization/components/OrganizationSelector.tsx b/src/pages/Organization/components/GovtOrganizationSelector.tsx
similarity index 97%
rename from src/pages/Organization/components/OrganizationSelector.tsx
rename to src/pages/Organization/components/GovtOrganizationSelector.tsx
index 04ae00ffe9a..72bdb2c3ab9 100644
--- a/src/pages/Organization/components/OrganizationSelector.tsx
+++ b/src/pages/Organization/components/GovtOrganizationSelector.tsx
@@ -12,7 +12,7 @@ import query from "@/Utils/request/query";
 import { Organization } from "@/types/organization/organization";
 import organizationApi from "@/types/organization/organizationApi";
 
-interface OrganizationSelectorProps {
+interface GovtOrganizationSelectorProps {
   value?: string;
   onChange: (value: string) => void;
   required?: boolean;
@@ -24,8 +24,9 @@ interface AutoCompleteOption {
   value: string;
 }
 
-// TODO: Rename to GovtOrganizationSelector
-export default function OrganizationSelector(props: OrganizationSelectorProps) {
+export default function GovtOrganizationSelector(
+  props: GovtOrganizationSelectorProps,
+) {
   const { onChange, required } = props;
   const [selectedLevels, setSelectedLevels] = useState<Organization[]>([]);
   const [searchQuery, setSearchQuery] = useState("");
diff --git a/src/pages/PublicAppointments/PatientRegistration.tsx b/src/pages/PublicAppointments/PatientRegistration.tsx
index cc31a7c05b8..9bc0168f0f1 100644
--- a/src/pages/PublicAppointments/PatientRegistration.tsx
+++ b/src/pages/PublicAppointments/PatientRegistration.tsx
@@ -46,7 +46,7 @@ import {
   TokenSlot,
 } from "@/types/scheduling/schedule";
 
-import OrganizationSelector from "../Organization/components/OrganizationSelector";
+import GovtOrganizationSelector from "../Organization/components/GovtOrganizationSelector";
 
 const initialForm: AppointmentPatientRegister & {
   ageInputType: "age" | "date_of_birth";
@@ -409,7 +409,7 @@ export function PatientRegistration(props: PatientRegistrationProps) {
                 render={({ field }) => (
                   <FormItem className="flex flex-col">
                     <FormControl>
-                      <OrganizationSelector
+                      <GovtOrganizationSelector
                         required
                         authToken={tokenData.token}
                         onChange={(value) => {

From bbbf9d7391c17118f82354676fc7de451befecad Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Sun, 12 Jan 2025 17:23:15 +0530
Subject: [PATCH 09/18] put initialOptionIndex

---
 .../Common/SearchByMultipleFields.tsx         |  4 +--
 src/components/Patient/PatientIndex.tsx       |  1 +
 src/pages/Encounters/EncounterList.tsx        |  1 +
 src/pages/Facility/FacilitiesPage.tsx         |  1 +
 .../Organization/OrganizationPatients.tsx     | 33 +++++++++++--------
 5 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index d067fe446e5..4938532b4e8 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -42,7 +42,7 @@ interface SearchByMultipleFieldsProps {
   id: string;
   options: SearchOption[];
   onSearch: (key: string, value: string) => void;
-  initialOptionIndex?: number;
+  initialOptionIndex: number;
   className?: string;
   inputClassName?: string;
   buttonClassName?: string;
@@ -67,7 +67,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
 }) => {
   const { t } = useTranslation();
   const [selectedOptionIndex, setSelectedOptionIndex] = useState(
-    initialOptionIndex || 0,
+    initialOptionIndex == -1 ? 0 : initialOptionIndex,
   );
   const selectedOption = options[selectedOptionIndex];
   const [searchValue, setSearchValue] = useState(selectedOption.value || "");
diff --git a/src/components/Patient/PatientIndex.tsx b/src/components/Patient/PatientIndex.tsx
index c438fb628f8..bb91630f0e9 100644
--- a/src/components/Patient/PatientIndex.tsx
+++ b/src/components/Patient/PatientIndex.tsx
@@ -145,6 +145,7 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
           <div>
             <div className="space-y-6">
               <SearchByMultipleFields
+                initialOptionIndex={0}
                 id="patient-search"
                 options={searchOptions}
                 onSearch={handleSearch}
diff --git a/src/pages/Encounters/EncounterList.tsx b/src/pages/Encounters/EncounterList.tsx
index 8a70917ebb6..4d0d10e5e30 100644
--- a/src/pages/Encounters/EncounterList.tsx
+++ b/src/pages/Encounters/EncounterList.tsx
@@ -174,6 +174,7 @@ export function EncounterList({
       clearSearch.value = true;
     }
   };
+
   const handleSearch = useCallback(
     (key: string, value: string) => {
       updateQuery({
diff --git a/src/pages/Facility/FacilitiesPage.tsx b/src/pages/Facility/FacilitiesPage.tsx
index 8966aa4a7b3..cedad69fb07 100644
--- a/src/pages/Facility/FacilitiesPage.tsx
+++ b/src/pages/Facility/FacilitiesPage.tsx
@@ -70,6 +70,7 @@ export function FacilitiesPage() {
             },
           ]}
           className="w-full sm:w-1/2"
+          initialOptionIndex={0}
           onSearch={(key, value) => updateQuery({ name: value })}
           clearSearch={clearSearch}
           enableOptionButtons={false}
diff --git a/src/pages/Organization/OrganizationPatients.tsx b/src/pages/Organization/OrganizationPatients.tsx
index 1f8db33054d..83c6c295164 100644
--- a/src/pages/Organization/OrganizationPatients.tsx
+++ b/src/pages/Organization/OrganizationPatients.tsx
@@ -38,6 +38,21 @@ export default function OrganizationPatients({ id, navOrganizationId }: Props) {
   } = useFilters({ limit: 14, cacheBlacklist: ["name", "phone_number"] });
   const [organization, setOrganization] = useState<Organization | null>(null);
 
+  const searchOptions = [
+    {
+      key: "name",
+      type: "text" as const,
+      placeholder: "Search by name",
+      value: qParams.name || "",
+    },
+    {
+      key: "phone_number",
+      type: "phone" as const,
+      placeholder: "Search by phone number",
+      value: qParams.phone_number || "",
+    },
+  ];
+
   const handleSearch = useCallback((key: string, value: string) => {
     const searchParams = {
       name: key === "name" ? value : "",
@@ -93,20 +108,10 @@ export default function OrganizationPatients({ id, navOrganizationId }: Props) {
 
         <SearchByMultipleFields
           id="patient-search"
-          options={[
-            {
-              key: "name",
-              type: "text",
-              placeholder: "Search by name",
-              value: qParams.name || "",
-            },
-            {
-              key: "phone_number",
-              type: "phone",
-              placeholder: "Search by phone number",
-              value: qParams.phone_number || "",
-            },
-          ]}
+          options={searchOptions}
+          initialOptionIndex={searchOptions.findIndex(
+            (option) => option.value !== "",
+          )}
           onSearch={handleSearch}
           clearSearch={{ value: !qParams.name && !qParams.phone_number }}
           onFieldChange={handleFieldChange}

From a8e3a388bfa4f19efcdd3faf7bb9c901c4def25d Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Sun, 12 Jan 2025 18:11:18 +0530
Subject: [PATCH 10/18] fix focusIndexOption

---
 src/components/Common/SearchByMultipleFields.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 4938532b4e8..7da399ba72f 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -73,7 +73,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
   const [searchValue, setSearchValue] = useState(selectedOption.value || "");
   const [open, setOpen] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
-  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const [focusedIndex, setFocusedIndex] = useState(0);
   const [error, setError] = useState<string | undefined | boolean>();
 
   useEffect(() => {
@@ -132,7 +132,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
           setFocusedIndex((prevIndex) =>
             prevIndex === 0 ? unselectedOptions.length - 1 : prevIndex - 1,
           );
-        } else if (e.key === "Enter" && focusedIndex !== -1) {
+        } else if (e.key === "Enter") {
           const selectedOptionIndex = options.findIndex(
             (option) => option.key === unselectedOptions[focusedIndex].key,
           );
@@ -318,7 +318,15 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
                             return (
                               <CommandItem
                                 key={option.key}
-                                onSelect={() => handleOptionChange(index)}
+                                onSelect={() =>
+                                  handleOptionChange(
+                                    options.findIndex(
+                                      (option) =>
+                                        option.key ===
+                                        unselectedOptions[index].key,
+                                    ),
+                                  )
+                                }
                                 className={cn(
                                   "flex items-center p-2 rounded-md cursor-pointer",
                                   {

From 33698b161238d5c2c43397ba38455951d6ab76c5 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Sun, 12 Jan 2025 19:28:08 +0530
Subject: [PATCH 11/18] reset to 0 focus on reopen

---
 src/components/Common/SearchByMultipleFields.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 7da399ba72f..7b4602b0cc6 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -112,6 +112,12 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
     [options, selectedOption],
   );
 
+  useEffect(() => {
+    if (open) {
+      setFocusedIndex(0);
+    }
+  }, [open]);
+
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {

From 2f3b779284ef93a36fe46c42e8741c0ee85ec6fb Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Sun, 12 Jan 2025 19:56:10 +0530
Subject: [PATCH 12/18] phone  in search

---
 src/components/Common/SearchByMultipleFields.tsx | 12 +++++-------
 src/components/Patient/PatientIndex.tsx          |  2 +-
 src/pages/Organization/OrganizationPatients.tsx  |  7 ++-----
 3 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 7b4602b0cc6..56386c2237c 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -76,12 +76,6 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
   const [focusedIndex, setFocusedIndex] = useState(0);
   const [error, setError] = useState<string | undefined | boolean>();
 
-  useEffect(() => {
-    if (!(selectedOption.type === "phone" && searchValue.length < 13)) {
-      setSearchValue(options[selectedOptionIndex].value);
-    }
-  }, [options]);
-
   useEffect(() => {
     if (clearSearch?.value) {
       const clearinput = options
@@ -158,7 +152,11 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
   }, [selectedOptionIndex]);
 
   useEffect(() => {
-    if (selectedOption.value !== searchValue) {
+    if (
+      selectedOption.key === "phone_number"
+        ? searchValue.length == 13 || searchValue.length == 3
+        : selectedOption.value !== searchValue
+    ) {
       onSearch(selectedOption.key, searchValue);
     }
   }, [searchValue, selectedOption.key, selectedOption.value, onSearch]);
diff --git a/src/components/Patient/PatientIndex.tsx b/src/components/Patient/PatientIndex.tsx
index bb91630f0e9..2fd61ce8b37 100644
--- a/src/components/Patient/PatientIndex.tsx
+++ b/src/components/Patient/PatientIndex.tsx
@@ -91,7 +91,7 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
 
   const handleSearch = useCallback((key: string, value: string) => {
     if (key === "phone_number") {
-      setPhoneNumber(value.length >= 13 || value === "" ? value : "");
+      setPhoneNumber(value.length == 3 ? "" : value);
     }
   }, []);
 
diff --git a/src/pages/Organization/OrganizationPatients.tsx b/src/pages/Organization/OrganizationPatients.tsx
index 83c6c295164..20e5fad9d56 100644
--- a/src/pages/Organization/OrganizationPatients.tsx
+++ b/src/pages/Organization/OrganizationPatients.tsx
@@ -57,12 +57,9 @@ export default function OrganizationPatients({ id, navOrganizationId }: Props) {
     const searchParams = {
       name: key === "name" ? value : "",
       phone_number:
-        key === "phone_number"
-          ? value.length >= 13 || value === ""
-            ? value
-            : undefined
-          : undefined,
+        key === "phone_number" ? (value.length == 3 ? "" : value) : "",
     };
+    console.log(searchParams.phone_number);
     updateQuery(searchParams);
   }, []);
 

From 8fa167002fd44a5620d13356af370468a2be7fd2 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Sun, 12 Jan 2025 20:08:12 +0530
Subject: [PATCH 13/18] fix clearsearch

---
 .../Common/SearchByMultipleFields.tsx         | 14 +++++++++++++
 src/pages/Encounters/EncounterList.tsx        | 21 -------------------
 2 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 56386c2237c..24243fbcf63 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -392,6 +392,20 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
           ))}
         </div>
       )}
+      {searchValue.length !== 0 && (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="w-full justify-start text-muted-foreground"
+          onClick={() => {
+            setSearchValue("");
+            setOpen(false);
+          }}
+        >
+          <CareIcon icon="l-times" className="mr-2 h-4 w-4" />
+          {t("clear_search")}
+        </Button>
+      )}
     </div>
   );
 };
diff --git a/src/pages/Encounters/EncounterList.tsx b/src/pages/Encounters/EncounterList.tsx
index 4d0d10e5e30..718047ca5d3 100644
--- a/src/pages/Encounters/EncounterList.tsx
+++ b/src/pages/Encounters/EncounterList.tsx
@@ -290,27 +290,6 @@ export function EncounterList({
                         clearSearch={clearSearch}
                         className="w-full border-none shadow-none"
                       />
-                      {(name || encounter_id || external_identifier) && (
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="w-full justify-start text-muted-foreground"
-                          onClick={() => {
-                            updateQuery({
-                              status,
-                              encounter_class: encounterClass,
-                              priority,
-                              name: undefined,
-                              encounter_id: undefined,
-                              external_identifier: undefined,
-                            });
-                            clearSearch.value = true;
-                          }}
-                        >
-                          <CareIcon icon="l-times" className="mr-2 h-4 w-4" />
-                          {t("clear_search")}
-                        </Button>
-                      )}
                     </div>
                   </PopoverContent>
                 </Popover>

From f41f32ce1086a4f7cfa7abda338f405a3e92df34 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Sun, 12 Jan 2025 20:09:38 +0530
Subject: [PATCH 14/18] fix clearsearch

---
 src/components/Common/SearchByMultipleFields.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 24243fbcf63..2b59581bc35 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -399,7 +399,6 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
           className="w-full justify-start text-muted-foreground"
           onClick={() => {
             setSearchValue("");
-            setOpen(false);
           }}
         >
           <CareIcon icon="l-times" className="mr-2 h-4 w-4" />

From ed626351c2b90fe0765c38ba379a97ed4034e255 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Sun, 12 Jan 2025 22:58:47 +0530
Subject: [PATCH 15/18] remove log

---
 src/pages/Organization/OrganizationPatients.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/Organization/OrganizationPatients.tsx b/src/pages/Organization/OrganizationPatients.tsx
index 20e5fad9d56..b38ed1fb7bf 100644
--- a/src/pages/Organization/OrganizationPatients.tsx
+++ b/src/pages/Organization/OrganizationPatients.tsx
@@ -59,7 +59,6 @@ export default function OrganizationPatients({ id, navOrganizationId }: Props) {
       phone_number:
         key === "phone_number" ? (value.length == 3 ? "" : value) : "",
     };
-    console.log(searchParams.phone_number);
     updateQuery(searchParams);
   }, []);
 

From 45d37171c05b3a670ce076542fea68e39a836507 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Sun, 12 Jan 2025 23:04:29 +0530
Subject: [PATCH 16/18] hide shortcut keys

---
 .../Common/SearchByMultipleFields.tsx         | 46 ++++++++++---------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 2b59581bc35..93ad0683972 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -191,30 +191,32 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
               hideHelp={true}
               onError={(error: FieldError) => setError(error)}
             />
-            <div className="absolute top-1/2 right-2 transform -translate-y-1/2 flex items-center space-x-2 text-xs text-gray-500">
-              {open ? (
-                <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
-                  ESC
-                </span>
-              ) : (
-                <span>
-                  {isAppleDevice ? (
-                    <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
-                      ⌘K
-                    </span>
-                  ) : (
-                    <div className="flex gap-1 font-medium">
-                      <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
-                        Ctrl
-                      </span>
+            {options.length != 1 && (
+              <div className="absolute top-1/2 right-2 transform -translate-y-1/2 flex items-center space-x-2 text-xs text-gray-500">
+                {open ? (
+                  <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
+                    ESC
+                  </span>
+                ) : (
+                  <span>
+                    {isAppleDevice ? (
                       <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
-                        K
+                        ⌘K
                       </span>
-                    </div>
-                  )}
-                </span>
-              )}
-            </div>
+                    ) : (
+                      <div className="flex gap-1 font-medium">
+                        <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
+                          Ctrl
+                        </span>
+                        <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
+                          K
+                        </span>
+                      </div>
+                    )}
+                  </span>
+                )}
+              </div>
+            )}
           </div>
         );
       default:

From ed5ca3b8895920e947be3d0390f254521a7c4d6b Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Sun, 12 Jan 2025 23:23:12 +0530
Subject: [PATCH 17/18] add locale

---
 public/locale/en.json                            | 2 ++
 src/components/Common/SearchByMultipleFields.tsx | 7 +++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/public/locale/en.json b/public/locale/en.json
index 96f74cf9d81..50da49b27bc 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -532,6 +532,7 @@
   "choose_file": "Upload From Device",
   "choose_localbody": "Choose Local Body",
   "choose_location": "Choose Location",
+  "choose_other_search_type": "Choose other search types",
   "choose_state": "Choose State",
   "claim__add_item": "Add Item",
   "claim__create_claim": "Create Claim",
@@ -1734,6 +1735,7 @@
   "scribe__reviewing_field": "Reviewing field {{currentField}} / {{totalFields}}",
   "scribe_error": "Could not autofill fields",
   "search": "Search",
+  "search_by": "Search by",
   "search_by_emergency_contact_phone_number": "Search by Emergency Contact Phone Number",
   "search_by_emergency_phone_number": "Search by Emergency Phone Number",
   "search_by_patient_name": "Search by Patient Name",
diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 93ad0683972..610e7d19651 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -295,10 +295,9 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
                 <CommandList>
                   <CommandGroup>
                     <div className="p-4">
-                      {/* Search by section */}
                       <div className="mb-4">
                         <p className="text-sm font-medium text-gray-600">
-                          Search by
+                          {t("search_by")}
                         </p>
                         <div className="flex mt-2">
                           <Button
@@ -315,7 +314,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
                       <hr className="border-gray-200 mb-3" />
                       <div>
                         <p className="text-xs font-semibold text-gray-500 mb-2">
-                          Choose other search types
+                          {t("choose_other_search_type")}
                         </p>
                         <div className="space-y-2">
                           {unselectedOptions.map((option, index) => {
@@ -398,7 +397,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
         <Button
           variant="ghost"
           size="sm"
-          className="w-full justify-start text-muted-foreground"
+          className="w-full flex items-center justify-center text-muted-foreground"
           onClick={() => {
             setSearchValue("");
           }}

From e2a9fc2c1fea0c11fe1cf57f04e2135fe180554a Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Sun, 12 Jan 2025 23:38:59 +0530
Subject: [PATCH 18/18] reset to back commit

---
 src/components/Common/SearchByMultipleFields.tsx | 6 +-----
 src/components/Patient/PatientIndex.tsx          | 2 +-
 src/pages/Organization/OrganizationPatients.tsx  | 6 +++++-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 610e7d19651..d802c067256 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -152,11 +152,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
   }, [selectedOptionIndex]);
 
   useEffect(() => {
-    if (
-      selectedOption.key === "phone_number"
-        ? searchValue.length == 13 || searchValue.length == 3
-        : selectedOption.value !== searchValue
-    ) {
+    if (selectedOption.value !== searchValue) {
       onSearch(selectedOption.key, searchValue);
     }
   }, [searchValue, selectedOption.key, selectedOption.value, onSearch]);
diff --git a/src/components/Patient/PatientIndex.tsx b/src/components/Patient/PatientIndex.tsx
index 2fd61ce8b37..bb91630f0e9 100644
--- a/src/components/Patient/PatientIndex.tsx
+++ b/src/components/Patient/PatientIndex.tsx
@@ -91,7 +91,7 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
 
   const handleSearch = useCallback((key: string, value: string) => {
     if (key === "phone_number") {
-      setPhoneNumber(value.length == 3 ? "" : value);
+      setPhoneNumber(value.length >= 13 || value === "" ? value : "");
     }
   }, []);
 
diff --git a/src/pages/Organization/OrganizationPatients.tsx b/src/pages/Organization/OrganizationPatients.tsx
index b38ed1fb7bf..83c6c295164 100644
--- a/src/pages/Organization/OrganizationPatients.tsx
+++ b/src/pages/Organization/OrganizationPatients.tsx
@@ -57,7 +57,11 @@ export default function OrganizationPatients({ id, navOrganizationId }: Props) {
     const searchParams = {
       name: key === "name" ? value : "",
       phone_number:
-        key === "phone_number" ? (value.length == 3 ? "" : value) : "",
+        key === "phone_number"
+          ? value.length >= 13 || value === ""
+            ? value
+            : undefined
+          : undefined,
     };
     updateQuery(searchParams);
   }, []);