src/pages/Organization/OrganizationPatients.tsx (1)

41-52: Consider improving phone number validation.

The phone number validation logic could be more robust:

1. The magic number 13 should be extracted as a constant for better maintainability.
2. The validation should consider minimum length requirements for different phone number formats.

Apply this diff to improve the validation:

+const MIN_PHONE_LENGTH = 13;
+
 const handleSearch = useCallback((key: string, value: string) => {
   const searchParams = {
     name: key === "name" ? value : "",
     phone_number:
       key === "phone_number"
-        ? value.length >= 13 || value === ""
+        ? value.length >= MIN_PHONE_LENGTH || value === ""
           ? value
           : undefined
         : undefined,
   };
   updateQuery(searchParams);
 }, []);

src/components/Common/SearchByMultipleFields.tsx (2)

191-214: Reduce code duplication in keyboard shortcut hints.

The keyboard shortcut hint UI is duplicated between the phone number input and text input sections. Consider extracting it into a reusable component.

Create a new component for the keyboard hints:

const KeyboardShortcutHint: React.FC<{ isOpen: boolean }> = ({ isOpen }) => {
  if (isOpen) {
    return (
      <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
        ESC
      </span>
    );
  }
  
  return (
    <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>
  );
};

Then use it in both places:

 <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>
-  )}
+  <KeyboardShortcutHint isOpen={open} />
 </div>

Also applies to: 226-249

---

130-140: Enhance keyboard navigation robustness.

The keyboard navigation logic could be improved in two areas:

1. Add visual feedback when no item is focused (focusedIndex === -1)
2. Make the Enter key handler more defensive

Apply these improvements:

 } else if (e.key === "Enter" && focusedIndex !== -1) {
+  if (focusedIndex >= unselectedOptions.length) {
+    return;
+  }
   const selectedOptionIndex = options.findIndex(
     (option) => option.key === unselectedOptions[focusedIndex].key,
   );
+  if (selectedOptionIndex === -1) {
+    return;
+  }
   handleOptionChange(selectedOptionIndex);
 }

Also, consider adding a CSS class to indicate when no item is focused:

 className={cn(
   "flex items-center p-2 rounded-md cursor-pointer",
   {
     "bg-gray-100": focusedIndex === index,
+    "bg-gray-50": focusedIndex === -1,
     "hover:bg-secondary-100": true,
   },
 )}

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

src/pages/Facility/FacilitiesPage.tsx (1)

73-73: Consider implementing keyboard shortcuts using useKeyboardShortcut hook

While setting initialOptionIndex is good for UX, consider implementing keyboard shortcuts using the useKeyboardShortcut hook as suggested in the PR comments. This would provide better accessibility and user experience.

+import useKeyboardShortcut from "use-keyboard-shortcut";
+
 export function FacilitiesPage() {
+  const handleSearchFocus = useCallback(() => {
+    document.getElementById("facility-search")?.focus();
+  }, []);
+
+  useKeyboardShortcut(["shift", "f"], handleSearchFocus);

src/pages/Organization/components/GovtOrganizationSelector.tsx (1)

Line range hint 15-28: LGTM! Consider adding JSDoc comments

The renaming to GovtOrganizationSelector better reflects the component's purpose. Consider adding JSDoc comments to document the component's specific use for government organizations and the props interface.

+/**
+ * Props for the GovtOrganizationSelector component
+ * @interface GovtOrganizationSelectorProps
+ */
 interface GovtOrganizationSelectorProps {
   value?: string;
   onChange: (value: string) => void;
   required?: boolean;
   authToken?: string;
 }

+/**
+ * A component for selecting government organizations in a hierarchical manner
+ * @component
+ */
 export default function GovtOrganizationSelector(
   props: GovtOrganizationSelectorProps,
 ) {

src/pages/PublicAppointments/PatientRegistration.tsx (1)

Line range hint 412-419: Add error handling for the geo_organization field.

While the component implementation is correct, consider adding error handling to display validation errors for the geo_organization field, similar to other form fields in the component.

 <GovtOrganizationSelector
   required
   authToken={tokenData.token}
   onChange={(value) => {
     field.onChange(value);
   }}
 />
+<FormMessage />

src/components/Facility/FacilityCreate.tsx (1)

Line range hint 333-337: Enhance the GovtOrganizationSelector implementation.

Consider these improvements:

1. Add error handling to display validation errors
2. Use FormField wrapper for consistency with other form fields

-<GovtOrganizationSelector
-  required={true}
-  onChange={(value) => form.setValue("geo_organization", value)}
-/>
+<FormField
+  control={form.control}
+  name="geo_organization"
+  render={({ field }) => (
+    <FormItem>
+      <FormControl>
+        <GovtOrganizationSelector
+          required={true}
+          onChange={field.onChange}
+          value={field.value}
+        />
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  )}
+/>

src/components/Patient/PatientRegistration.tsx (1)

Line range hint 722-731: Remove unnecessary Fragment wrapper.

The Fragment wrapper (<>...</>) is not needed here as there's only one child element.

-<>
  <GovtOrganizationSelector
    required={true}
    onChange={(value) =>
      setForm((f) => ({
        ...f,
        geo_organization: value,
      }))
    }
  />
-</>

src/pages/Organization/OrganizationPatients.tsx (1)

56-64: Remove debug console.log statement.

The function implementation is correct, but it contains a debug console.log statement that should be removed before merging.

Apply this diff to remove the debug statement:

  const handleSearch = useCallback((key: string, value: string) => {
    const searchParams = {
      name: key === "name" ? value : "",
      phone_number:
        key === "phone_number" ? (value.length == 3 ? "" : value) : "",
    };
-   console.log(searchParams.phone_number);
    updateQuery(searchParams);
  }, []);

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

src/pages/Organization/OrganizationPatients.tsx (3)

31-38: Document the significance of the limit value.

Consider adding a comment explaining why the limit is set to 14 items per page, as this seems like a non-standard value.

---

41-54: Consider using a type-safe approach for search options.

Instead of type assertions, consider defining an enum or union type for the search field types.

type SearchFieldType = 'text' | 'phone';

const searchOptions = [
  {
    key: "name",
    type: "text" satisfies SearchFieldType,
    placeholder: "Search by name",
    value: qParams.name || "",
  },
  // ...
];

---

107-113: Simplify complex conditions.

Consider these improvements for better readability:

1. Extract the initialOptionIndex calculation to a named variable
2. Simplify the clearSearch condition

const activeSearchIndex = searchOptions.findIndex(option => option.value !== "");
const hasActiveSearch = qParams.name || qParams.phone_number;

<SearchByMultipleFields
  id="patient-search"
  options={searchOptions}
  initialOptionIndex={activeSearchIndex}
  onSearch={handleSearch}
  clearSearch={{ value: !hasActiveSearch }}
  onFieldChange={handleFieldChange}
/>

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

src/components/Common/SearchByMultipleFields.tsx (4)

117-125: Document the new keyboard shortcut

The change from "/" to "Cmd/Ctrl + K" is a good improvement, but should be documented for users.

Consider adding a comment explaining the shortcut change:

+// Using Cmd/Ctrl + K as it's a more standard shortcut for search functionality
 if (e.key === "k" && (e.metaKey || e.ctrlKey)) {

---

155-159: Improve phone number validation logic

The phone number validation logic could be more robust. Consider extracting the validation to a separate function.

+const isValidPhoneNumber = (value: string) => value.length === 13 || value.length === 3;
+
 if (
-  selectedOption.key === "phone_number"
-    ? searchValue.length == 13 || searchValue.length == 3
-    : selectedOption.value !== searchValue
+  selectedOption.key === "phone_number"
+    ? isValidPhoneNumber(searchValue)
+    : selectedOption.value !== searchValue
 ) {

---

397-409: Add data-testid for clear search button

The clear search button is a good addition, but should include a data-testid for testing.

 <Button
   variant="ghost"
   size="sm"
+  data-testid={`${id}__clear-search`}
   className="w-full justify-start text-muted-foreground"
   onClick={() => {
     setSearchValue("");
   }}
 >

---

281-292: Enhance accessibility with ARIA labels

While the basic ARIA implementation is good, consider adding more descriptive labels.

 <Button
   variant="ghost"
   className="focus:ring-0 px-2 ml-1"
   size="sm"
+  aria-label={t("open_search_options")}
   onClick={() => setOpen(true)}
 >

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro