Repository: ohcnetwork/care_fe
Pull request #11221: Adds support for serching practicioners and refactor practicioner selector to be reusable component
Author: login: rithviknishad
Labels: name: needs review
Created: 2025-03-11T10:53:29Z | Merged: 2025-03-11T11:04:47Z

## Proposed Changes

- Fixes #11101

@ohcnetwork/care-fe-code-reviewers

## Merge Checklist

- [x] Add specs that demonstrate bug / test a new feature.
- [ ] Update [product documentation](https://docs.ohc.network).
- [x] Ensure that UI text is kept in I18n files.
- [ ] Prep screenshot or demo video for changelog entry, and attach it to issue.
- [x] Request for Peer Reviews
- [x] Completion of QA in Mobile Devices
- [x] Completion of QA in Desktop Devices


<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
	- Introduced an upgraded, streamlined interface for selecting practitioners during appointment and questionnaire flows. Users now enjoy a searchable list with clear visual cues and responsive feedback during selection.
  
- **Bug Fixes**
	- Corrected the spelling of "Practitioner" across various components and queries, ensuring consistency in terminology.

- **Refactor**
	- Simplified the practitioner selection process by removing outdated methods, leading to a more intuitive and efficient experience when booking appointments.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Linked issue #11101: Replace Practitioner Selector with UserSelector Reusable Component in AppointmentsPage
In the Appointments page, the current Practitioner Selector needs to be replaced with the UserSelector reusable component for consistency and maintainability. This change will ensure a standardized user selection experience across the application.

![Image](https://github.com/user-attachments/assets/d23a6312-920f-43c1-abcc-6db838433eed)
Linked issue comments: user: login: hrit2773
created_at: 2025-03-07T06:30:45Z
body: @Jacobjeevan can I take this up??
author_association: CONTRIBUTOR
user: login: Prasanth-S7
created_at: 2025-03-07T06:43:16Z
body: I would like to pick up this issue if it is valid
author_association: CONTRIBUTOR
user: login: NikhilA8606
created_at: 2025-03-07T06:44:38Z
body: @rithviknishad I would like to work on this issue, please assign to me

author_association: MEMBER
user: login: AdityaJ2305
created_at: 2025-03-08T16:39:08Z
body: @NikhilA8606, UserSelector is meant for selecting users, whereas practitioners here refer to those available for appointments, not necessarily users. Am I understanding this correctly?
cc: @rithviknishad 
author_association: MEMBER
user: login: rithviknishad
created_at: 2025-03-08T16:45:23Z
body: there's a dedicated API to get available practicioners. Any users that is schedulable resource should be shown here.
author_association: MEMBER
user: login: AdityaJ2305
created_at: 2025-03-08T16:51:08Z
body: Yeap, I checked that but my doubt was since `UserSelector` is fetching **users** not **practicioners** are we going to tweak it  
https://github.com/ohcnetwork/care_fe/blob/e4570f7af21c97ab7f473316c2014384dbe8048e/src/components/Common/UserSelector.tsx#L49
author_association: MEMBER
user: login: AdityaJ2305
created_at: 2025-03-08T16:53:15Z
body: https://github.com/ohcnetwork/care_fe/blob/e4570f7af21c97ab7f473316c2014384dbe8048e/src/components/Common/UserSelector.tsx#L51
author_association: MEMBER

Diff:
diff --git a/public/locale/en.json b/public/locale/en.json
index c6bc603b501..fdcd950dfce 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -1650,7 +1650,7 @@
   "no_plots_configured": "No plots configured",
   "no_policy_added": "No Insurance Policy Added",
   "no_policy_found": "No Insurance Policy Found for this Patient",
-  "no_practitioners_found": "No practicioners found",
+  "no_practitioners_found": "No practitioners found",
   "no_presets": "No Presets",
   "no_questionnaire_responses": "No Questionnaire Responses",
   "no_questionnaires_found": "No questionnaires found",
diff --git a/src/components/Questionnaire/QuestionTypes/AppointmentQuestion.tsx b/src/components/Questionnaire/QuestionTypes/AppointmentQuestion.tsx
index 4ec261ca4a4..502009af648 100644
--- a/src/components/Questionnaire/QuestionTypes/AppointmentQuestion.tsx
+++ b/src/components/Questionnaire/QuestionTypes/AppointmentQuestion.tsx
@@ -14,12 +14,11 @@ import {
 } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 
-import { Avatar } from "@/components/Common/Avatar";
-
 import useSlug from "@/hooks/useSlug";
 
 import query from "@/Utils/request/query";
-import { dateQueryString, formatDisplayName } from "@/Utils/utils";
+import { dateQueryString } from "@/Utils/utils";
+import { PractitionerSelector } from "@/pages/Appointments/components/PractitionerSelector";
 import { groupSlotsByAvailability } from "@/pages/Appointments/utils";
 import {
   QuestionnaireResponse,
@@ -72,13 +71,6 @@ export function AppointmentQuestion({
 
   const facilityId = useSlug("facility");
 
-  const resourcesQuery = useQuery({
-    queryKey: ["availableResources", facilityId],
-    queryFn: query(scheduleApis.appointments.availableUsers, {
-      pathParams: { facility_id: facilityId },
-    }),
-  });
-
   const slotsQuery = useQuery({
     queryKey: [
       "slots",
@@ -111,31 +103,12 @@ export function AppointmentQuestion({
       </div>
       <div>
         <Label className="block mb-2">{t("select_practitioner")}</Label>
-        <Select
-          disabled={resourcesQuery.isLoading || disabled}
-          value={resource?.id}
-          onValueChange={(value) =>
-            setResource(resourcesQuery.data?.users.find((r) => r.id === value))
-          }
-        >
-          <SelectTrigger>
-            <SelectValue placeholder={t("show_all")} />
-          </SelectTrigger>
-          <SelectContent>
-            {resourcesQuery.data?.users.map((user) => (
-              <SelectItem key={user.username} value={user.id}>
-                <div className="flex items-center gap-2">
-                  <Avatar
-                    imageUrl={user.profile_picture_url}
-                    name={formatDisplayName(user)}
-                    className="size-6 rounded-full"
-                  />
-                  <span>{formatDisplayName(user)}</span>
-                </div>
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+        <PractitionerSelector
+          facilityId={facilityId}
+          selected={resource ?? null}
+          onSelect={(user) => setResource(user ?? undefined)}
+          clearSelection={t("show_all")}
+        />
       </div>
 
       <div className="flex gap-2">
diff --git a/src/pages/Appointments/AppointmentsPage.tsx b/src/pages/Appointments/AppointmentsPage.tsx
index 84c1c469048..d8ffe255c78 100644
--- a/src/pages/Appointments/AppointmentsPage.tsx
+++ b/src/pages/Appointments/AppointmentsPage.tsx
@@ -1,6 +1,5 @@
 import careConfig from "@careConfig";
 import { CaretDownIcon, CheckIcon } from "@radix-ui/react-icons";
-import { PopoverClose } from "@radix-ui/react-popover";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   addDays,
@@ -57,7 +56,6 @@ import {
 } from "@/components/ui/table";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
-import { Avatar } from "@/components/Common/Avatar";
 import Loading from "@/components/Common/Loading";
 import Page from "@/components/Common/Page";
 
@@ -70,9 +68,9 @@ import { useView } from "@/Utils/useView";
 import {
   dateQueryString,
   formatDisplayName,
-  formatName,
   formatPatientAge,
 } from "@/Utils/utils";
+import { PractitionerSelector } from "@/pages/Appointments/components/PractitionerSelector";
 import {
   formatSlotTimeRange,
   groupSlotsByAvailability,
@@ -244,7 +242,7 @@ export default function AppointmentsPage(props: { facilityId?: string }) {
   const [activeTab, setActiveTab] = useView("appointments", "board");
 
   const schedulableUsersQuery = useQuery({
-    queryKey: ["schedulable-users", facilityId],
+    queryKey: ["practitioners", facilityId],
     queryFn: query(scheduleApis.appointments.availableUsers, {
       pathParams: { facility_id: facilityId },
     }),
@@ -352,94 +350,17 @@ export default function AppointmentsPage(props: { facilityId?: string }) {
             <Label className="mb-2 text-black">
               {t("select_practitioner")}
             </Label>
-            <Popover>
-              <PopoverTrigger
-                asChild
-                disabled={schedulableUsersQuery.isLoading}
-              >
-                <Button
-                  variant="outline"
-                  role="combobox"
-                  className="min-w-60 justify-start"
-                >
-                  {practitioner ? (
-                    <div className="flex items-center gap-2">
-                      <Avatar
-                        imageUrl={practitioner.profile_picture_url}
-                        name={formatName(practitioner)}
-                        className="size-6 rounded-full"
-                      />
-                      <span>{formatName(practitioner)}</span>
-                    </div>
-                  ) : (
-                    <span>{t("show_all")}</span>
-                  )}
-                  <CaretDownIcon className="ml-auto" />
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="p-0" align="start">
-                <Command>
-                  <CommandInput
-                    placeholder={t("search")}
-                    className="outline-none border-none ring-0 shadow-none"
-                  />
-                  <CommandList>
-                    <CommandEmpty>
-                      {schedulableUsersQuery.isFetching
-                        ? t("searching")
-                        : t("no_results")}
-                    </CommandEmpty>
-                    <CommandGroup>
-                      <CommandItem
-                        value="all"
-                        onSelect={() =>
-                          updateQuery({
-                            practitioner: null,
-                            slot: null,
-                          })
-                        }
-                        className="cursor-pointer w-full"
-                      >
-                        <PopoverClose className="w-full flex items-start">
-                          <span>{t("show_all")}</span>
-                          {!qParams.practitioner && (
-                            <CheckIcon className="ml-auto" />
-                          )}
-                        </PopoverClose>
-                      </CommandItem>
-                      {schedulableUsersQuery.data?.users.map((user) => (
-                        <CommandItem
-                          key={user.id}
-                          value={formatName(user)}
-                          onSelect={() =>
-                            updateQuery({
-                              practitioner: user.username,
-                              slot: null,
-                            })
-                          }
-                          className="cursor-pointer w-full"
-                        >
-                          <PopoverClose className="flex items-center gap-2 w-full">
-                            <Avatar
-                              imageUrl={user.profile_picture_url}
-                              name={formatName(user)}
-                              className="size-6 rounded-full"
-                            />
-                            <span>{formatName(user)}</span>
-                            <span className="text-xs text-gray-500 font-medium">
-                              {user.user_type}
-                            </span>
-                          </PopoverClose>
-                          {qParams.practitioner === user.username && (
-                            <CheckIcon className="ml-auto" />
-                          )}
-                        </CommandItem>
-                      ))}
-                    </CommandGroup>
-                  </CommandList>
-                </Command>
-              </PopoverContent>
-            </Popover>
+            <PractitionerSelector
+              facilityId={facilityId}
+              selected={practitioner ?? null}
+              onSelect={(user) =>
+                updateQuery({
+                  practitioner: user?.username ?? null,
+                  slot: null,
+                })
+              }
+              clearSelection={t("show_all")}
+            />
           </div>
 
           <div>
diff --git a/src/pages/Appointments/BookAppointment.tsx b/src/pages/Appointments/BookAppointment.tsx
index 8b0c0bcc6de..0ea4dfa4b8d 100644
--- a/src/pages/Appointments/BookAppointment.tsx
+++ b/src/pages/Appointments/BookAppointment.tsx
@@ -8,23 +8,15 @@ import { cn } from "@/lib/utils";
 
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 
-import { Avatar } from "@/components/Common/Avatar";
 import Page from "@/components/Common/Page";
 
 import useAppHistory from "@/hooks/useAppHistory";
 
 import mutate from "@/Utils/request/mutate";
 import query from "@/Utils/request/query";
-import { formatDisplayName, formatName } from "@/Utils/utils";
+import { PractitionerSelector } from "@/pages/Appointments/components/PractitionerSelector";
 import scheduleApis from "@/types/scheduling/scheduleApi";
 
 import { AppointmentSlotPicker } from "./components/AppointmentSlotPicker";
@@ -44,7 +36,7 @@ export default function BookAppointment(props: Props) {
   const [reason, setReason] = useState("");
 
   const resourcesQuery = useQuery({
-    queryKey: ["availableResources", props.facilityId],
+    queryKey: ["practitioners", props.facilityId],
     queryFn: query(scheduleApis.appointments.availableUsers, {
       pathParams: {
         facility_id: props.facilityId,
@@ -106,7 +98,6 @@ export default function BookAppointment(props: Props) {
       <hr className="mt-6 mb-8" />
       <div className="container mx-auto p-4 max-w-5xl">
         <div className="mb-8">
-          {/* TODO: confirm how to rename this since we are keeping it abstract / not specific to doctor */}
           <h1 className="text-lg font-bold mb-2">{t("book_appointment")}</h1>
         </div>
 
@@ -122,41 +113,13 @@ export default function BookAppointment(props: Props) {
 
           <div className="grid grid-cols-1 md:grid-cols-2">
             <div>
-              <label className="block mb-2">{t("select_practitioner")}</label>
-              <Select
-                disabled={resourcesQuery.isLoading}
-                value={resourceId}
-                onValueChange={(value) => setResourceId(value)}
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder={t("select_practitioner")}>
-                    {resource && (
-                      <div className="flex items-center gap-2">
-                        <Avatar
-                          imageUrl={resource.profile_picture_url}
-                          name={formatName(resource)}
-                          className="size-6 rounded-full"
-                        />
-                        <span>{formatName(resource)}</span>
-                      </div>
-                    )}
-                  </SelectValue>
-                </SelectTrigger>
-                <SelectContent>
-                  {resourcesQuery.data?.users.map((user) => (
-                    <SelectItem key={user.username} value={user.id}>
-                      <div className="flex items-center gap-2">
-                        <Avatar
-                          imageUrl={user.profile_picture_url}
-                          name={formatDisplayName(user)}
-                          className="size-6 rounded-full"
-                        />
-                        <span>{formatDisplayName(user)}</span>
-                      </div>
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+              <Label className="block mb-2">{t("select_practitioner")}</Label>
+              <PractitionerSelector
+                facilityId={props.facilityId}
+                selected={resource ?? null}
+                onSelect={(user) => setResourceId(user?.id ?? undefined)}
+                clearSelection={t("show_all")}
+              />
             </div>
           </div>
 
diff --git a/src/pages/Appointments/components/PractitionerSelector.tsx b/src/pages/Appointments/components/PractitionerSelector.tsx
new file mode 100644
index 00000000000..793c39eaaf8
--- /dev/null
+++ b/src/pages/Appointments/components/PractitionerSelector.tsx
@@ -0,0 +1,129 @@
+import { CaretDownIcon } from "@radix-ui/react-icons";
+import { CheckIcon } from "@radix-ui/react-icons";
+import { PopoverClose } from "@radix-ui/react-popover";
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+import { Avatar } from "@/components/Common/Avatar";
+
+import query from "@/Utils/request/query";
+import { formatName } from "@/Utils/utils";
+import scheduleApi from "@/types/scheduling/scheduleApi";
+import { UserBase } from "@/types/user/user";
+
+interface PractitionerSelectorProps {
+  selected: UserBase | null;
+  onSelect: (user: UserBase | null) => void;
+  facilityId: string;
+  clearSelection?: string;
+}
+
+export const PractitionerSelector = ({
+  facilityId,
+  selected,
+  onSelect,
+  clearSelection,
+}: PractitionerSelectorProps) => {
+  const { t } = useTranslation();
+  const {
+    data: practitioners,
+    isLoading,
+    isFetching,
+  } = useQuery({
+    queryKey: ["practitioners", facilityId],
+    queryFn: query(scheduleApi.appointments.availableUsers, {
+      pathParams: { facility_id: facilityId },
+    }),
+  });
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild disabled={isLoading}>
+        <Button
+          variant="outline"
+          role="combobox"
+          className="min-w-60 w-full justify-start"
+        >
+          {selected ? (
+            <div className="flex items-center gap-2">
+              <Avatar
+                imageUrl={selected.profile_picture_url}
+                name={formatName(selected)}
+                className="size-6 rounded-full"
+              />
+              <span>{formatName(selected)}</span>
+            </div>
+          ) : (
+            <span>{t("show_all")}</span>
+          )}
+          <CaretDownIcon className="ml-auto" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" align="start">
+        <Command>
+          <CommandInput
+            placeholder={t("search")}
+            className="outline-none border-none ring-0 shadow-none"
+          />
+          <CommandList>
+            <CommandEmpty>
+              {isFetching ? t("searching") : t("no_results")}
+            </CommandEmpty>
+            <CommandGroup>
+              {clearSelection && (
+                <CommandItem
+                  value="all"
+                  onSelect={() => onSelect(null)}
+                  className="cursor-pointer w-full"
+                >
+                  <PopoverClose className="w-full flex items-start">
+                    <span>{clearSelection}</span>
+                    {!selected && <CheckIcon className="ml-auto" />}
+                  </PopoverClose>
+                </CommandItem>
+              )}
+              {practitioners?.users.map((user) => (
+                <CommandItem
+                  key={user.id}
+                  value={formatName(user)}
+                  onSelect={() => onSelect(user)}
+                  className="cursor-pointer w-full"
+                >
+                  <PopoverClose className="flex items-center gap-2 w-full">
+                    <Avatar
+                      imageUrl={user.profile_picture_url}
+                      name={formatName(user)}
+                      className="size-6 rounded-full"
+                    />
+                    <span>{formatName(user)}</span>
+                    <span className="text-xs text-gray-500 font-medium">
+                      {user.user_type}
+                    </span>
+                  </PopoverClose>
+                  {selected?.username === user.username && (
+                    <CheckIcon className="ml-auto" />
+                  )}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 13**

<details>
<summary>🧹 Nitpick comments (4)</summary><blockquote>

<details>
<summary>src/pages/Appointments/components/PracticionerSelector.tsx (4)</summary><blockquote>

`118-120`: **Improve selector comparison logic**

The current implementation uses username comparison to identify the selected user, which is good, but could be more consistent with how the component handles selection.

```diff
-                  {selected?.username === user.username && (
+                  {selected?.id === user.id && (
                    <CheckIcon className="ml-auto" />
                  )}
```

This change makes the selection comparison consistent with how users are identified elsewhere (by ID).

---

`94-98`: **Add aria-label to improve accessibility**

The "clear selection" button could benefit from an aria-label for better accessibility.

```diff
-                  <PopoverClose className="w-full flex items-start">
+                  <PopoverClose className="w-full flex items-start" aria-label={t("clear_selection")}>
                    <span>{clearSelection}</span>
                    {!selected && <CheckIcon className="ml-auto" />}
                  </PopoverClose>
```

---

`107-107`: **Add aria-label to practitioner selection buttons**

Similarly, add an aria-label to the practitioner selection buttons for better accessibility.

```diff
-                  <PopoverClose className="flex items-center gap-2 w-full">
+                  <PopoverClose className="flex items-center gap-2 w-full" aria-label={t("select_practitioner", { name: formatName(user) })}>
```

---

`56-76`: **Handle loading state in the button display**

The button is disabled when loading, but there's no visual indication of the loading state. Consider showing a loading indicator.


```diff
      <PopoverTrigger asChild disabled={isLoading}>
        <Button
          variant="outline"
          role="combobox"
          className="min-w-60 w-full justify-start"
        >
+         {isLoading ? (
+           <div className="flex items-center gap-2">
+             <span>{t("loading")}</span>
+           </div>
+         ) : (
          {selected ? (
            <div className="flex items-center gap-2">
              <Avatar
                imageUrl={selected.profile_picture_url}
                name={formatName(selected)}
                className="size-6 rounded-full"
              />
              <span>{formatName(selected)}</span>
            </div>
          ) : (
            <span>{t("show_all")}</span>
          )}
+         )}
          <CaretDownIcon className="ml-auto" />
        </Button>
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

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

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 5a082a3e631183e6a1467d37d0b0020e5e481ab9 and 2e66e6df1bf51c0a6f644ef6f0bdcc0ea5d3d1d9.

</details>

<details>
<summary>📒 Files selected for processing (4)</summary>

* `src/components/Questionnaire/QuestionTypes/AppointmentQuestion.tsx` (2 hunks)
* `src/pages/Appointments/AppointmentsPage.tsx` (3 hunks)
* `src/pages/Appointments/BookAppointment.tsx` (3 hunks)
* `src/pages/Appointments/components/PracticionerSelector.tsx` (1 hunks)

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (1)</summary>

* GitHub Check: cypress-run (1)

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T10:59:47Z
user: login: Jacobjeevan
body: LGTM
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T11:04:20Z

Review comments:
diff_hunk: @@ -44,7 +36,7 @@ export default function BookAppointment(props: Props) {
   const [reason, setReason] = useState("");
 
   const resourcesQuery = useQuery({
-    queryKey: ["availableResources", props.facilityId],
+    queryKey: ["practicioners", props.facilityId],
path: src/pages/Appointments/BookAppointment.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Fix typo in query key naming**

The query key "practicioners" contains the same typo - should be "practitioners".

```diff
-    queryKey: ["practicioners", props.facilityId],
+    queryKey: ["practitioners", props.facilityId],
```

This naming inconsistency should be fixed throughout the codebase to maintain clarity and consistency.


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
    queryKey: ["practitioners", props.facilityId],
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Fixed in commit cea94ab
created_at: 2025-03-11T10:59:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -8,23 +8,15 @@
 
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 
-import { Avatar } from "@/components/Common/Avatar";
 import Page from "@/components/Common/Page";
 
 import useAppHistory from "@/hooks/useAppHistory";
 
 import mutate from "@/Utils/request/mutate";
 import query from "@/Utils/request/query";
-import { formatDisplayName, formatName } from "@/Utils/utils";
+import { PracticionerSelector } from "@/pages/Appointments/components/PracticionerSelector";
path: src/pages/Appointments/BookAppointment.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Fix typo in component name and imports**

The component name "PracticionerSelector" contains a typo. It should be "PractitionerSelector" (with two 't's).

```diff
-import { PracticionerSelector } from "@/pages/Appointments/components/PracticionerSelector";
+import { PractitionerSelector } from "@/pages/Appointments/components/PractitionerSelector";
```

This typo appears consistently across all files in this PR, so it should be fixed everywhere.


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
import { PractitionerSelector } from "@/pages/Appointments/components/PractitionerSelector";
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Fixed in commit cea94ab
created_at: 2025-03-11T10:59:45Z
author_association: CONTRIBUTOR
diff_hunk: @@ -122,41 +113,13 @@
 
           <div className="grid grid-cols-1 md:grid-cols-2">
             <div>
-              <label className="block mb-2">{t("select_practitioner")}</label>
-              <Select
-                disabled={resourcesQuery.isLoading}
-                value={resourceId}
-                onValueChange={(value) => setResourceId(value)}
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder={t("select_practitioner")}>
-                    {resource && (
-                      <div className="flex items-center gap-2">
-                        <Avatar
-                          imageUrl={resource.profile_picture_url}
-                          name={formatName(resource)}
-                          className="size-6 rounded-full"
-                        />
-                        <span>{formatName(resource)}</span>
-                      </div>
-                    )}
-                  </SelectValue>
-                </SelectTrigger>
-                <SelectContent>
-                  {resourcesQuery.data?.users.map((user) => (
-                    <SelectItem key={user.username} value={user.id}>
-                      <div className="flex items-center gap-2">
-                        <Avatar
-                          imageUrl={user.profile_picture_url}
-                          name={formatDisplayName(user)}
-                          className="size-6 rounded-full"
-                        />
-                        <span>{formatDisplayName(user)}</span>
-                      </div>
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+              <Label className="block mb-2">{t("select_practitioner")}</Label>
+              <PracticionerSelector
+                facilityId={props.facilityId}
+                selected={resource ?? null}
+                onSelect={(user) => setResourceId(user?.id ?? undefined)}
+                clearSelection={t("show_all")}
+              />
path: src/pages/Appointments/BookAppointment.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Update component name after fixing typo**

Once the component name is fixed, update the usage accordingly.

```diff
-              <PracticionerSelector
+              <PractitionerSelector
                facilityId={props.facilityId}
                selected={resource ?? null}
                onSelect={(user) => setResourceId(user?.id ?? undefined)}
                clearSelection={t("show_all")}
              />
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
              <PractitionerSelector
                facilityId={props.facilityId}
                selected={resource ?? null}
                onSelect={(user) => setResourceId(user?.id ?? undefined)}
                clearSelection={t("show_all")}
              />
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Fixed in commit cea94ab
created_at: 2025-03-11T10:59:45Z
author_association: CONTRIBUTOR
diff_hunk: @@ -14,12 +14,11 @@ import {
 } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 
-import { Avatar } from "@/components/Common/Avatar";
-
 import useSlug from "@/hooks/useSlug";
 
 import query from "@/Utils/request/query";
-import { dateQueryString, formatDisplayName } from "@/Utils/utils";
+import { dateQueryString } from "@/Utils/utils";
+import { PracticionerSelector } from "@/pages/Appointments/components/PracticionerSelector";
path: src/components/Questionnaire/QuestionTypes/AppointmentQuestion.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Fix typo in component name and imports**

The component name "PracticionerSelector" contains a typo. It should be "PractitionerSelector" (with two 't's).

```diff
-import { PracticionerSelector } from "@/pages/Appointments/components/PracticionerSelector";
+import { PractitionerSelector } from "@/pages/Appointments/components/PractitionerSelector";
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
import { PractitionerSelector } from "@/pages/Appointments/components/PractitionerSelector";
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Fixed in commit cea94ab
created_at: 2025-03-11T10:59:45Z
author_association: CONTRIBUTOR
diff_hunk: @@ -111,31 +103,12 @@
       </div>
       <div>
         <Label className="block mb-2">{t("select_practitioner")}</Label>
-        <Select
-          disabled={resourcesQuery.isLoading || disabled}
-          value={resource?.id}
-          onValueChange={(value) =>
-            setResource(resourcesQuery.data?.users.find((r) => r.id === value))
-          }
-        >
-          <SelectTrigger>
-            <SelectValue placeholder={t("show_all")} />
-          </SelectTrigger>
-          <SelectContent>
-            {resourcesQuery.data?.users.map((user) => (
-              <SelectItem key={user.username} value={user.id}>
-                <div className="flex items-center gap-2">
-                  <Avatar
-                    imageUrl={user.profile_picture_url}
-                    name={formatDisplayName(user)}
-                    className="size-6 rounded-full"
-                  />
-                  <span>{formatDisplayName(user)}</span>
-                </div>
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+        <PracticionerSelector
+          facilityId={facilityId}
+          selected={resource ?? null}
+          onSelect={(user) => setResource(user ?? undefined)}
+          clearSelection={t("show_all")}
+        />
path: src/components/Questionnaire/QuestionTypes/AppointmentQuestion.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Update component name after fixing typo**

After fixing the component name, update the usage here as well.

```diff
-        <PracticionerSelector
+        <PractitionerSelector
          facilityId={facilityId}
          selected={resource ?? null}
          onSelect={(user) => setResource(user ?? undefined)}
          clearSelection={t("show_all")}
        />
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
        <PractitionerSelector
          facilityId={facilityId}
          selected={resource ?? null}
          onSelect={(user) => setResource(user ?? undefined)}
          clearSelection={t("show_all")}
        />
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Fixed in commit cea94ab
created_at: 2025-03-11T10:59:45Z
author_association: CONTRIBUTOR
diff_hunk: @@ -244,7 +242,7 @@ export default function AppointmentsPage(props: { facilityId?: string }) {
   const [activeTab, setActiveTab] = useView("appointments", "board");
 
   const schedulableUsersQuery = useQuery({
-    queryKey: ["schedulable-users", facilityId],
+    queryKey: ["practicioners", facilityId],
path: src/pages/Appointments/AppointmentsPage.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Fix typo in query key naming**

The query key "practicioners" contains the same typo - should be "practitioners".

```diff
-    queryKey: ["practicioners", facilityId],
+    queryKey: ["practitioners", facilityId],
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
    queryKey: ["practitioners", facilityId],
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Fixed in commit cea94ab
created_at: 2025-03-11T10:59:45Z
author_association: CONTRIBUTOR
diff_hunk: @@ -352,94 +350,17 @@
             <Label className="mb-2 text-black">
               {t("select_practitioner")}
             </Label>
-            <Popover>
-              <PopoverTrigger
-                asChild
-                disabled={schedulableUsersQuery.isLoading}
-              >
-                <Button
-                  variant="outline"
-                  role="combobox"
-                  className="min-w-60 justify-start"
-                >
-                  {practitioner ? (
-                    <div className="flex items-center gap-2">
-                      <Avatar
-                        imageUrl={practitioner.profile_picture_url}
-                        name={formatName(practitioner)}
-                        className="size-6 rounded-full"
-                      />
-                      <span>{formatName(practitioner)}</span>
-                    </div>
-                  ) : (
-                    <span>{t("show_all")}</span>
-                  )}
-                  <CaretDownIcon className="ml-auto" />
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="p-0" align="start">
-                <Command>
-                  <CommandInput
-                    placeholder={t("search")}
-                    className="outline-none border-none ring-0 shadow-none"
-                  />
-                  <CommandList>
-                    <CommandEmpty>
-                      {schedulableUsersQuery.isFetching
-                        ? t("searching")
-                        : t("no_results")}
-                    </CommandEmpty>
-                    <CommandGroup>
-                      <CommandItem
-                        value="all"
-                        onSelect={() =>
-                          updateQuery({
-                            practitioner: null,
-                            slot: null,
-                          })
-                        }
-                        className="cursor-pointer w-full"
-                      >
-                        <PopoverClose className="w-full flex items-start">
-                          <span>{t("show_all")}</span>
-                          {!qParams.practitioner && (
-                            <CheckIcon className="ml-auto" />
-                          )}
-                        </PopoverClose>
-                      </CommandItem>
-                      {schedulableUsersQuery.data?.users.map((user) => (
-                        <CommandItem
-                          key={user.id}
-                          value={formatName(user)}
-                          onSelect={() =>
-                            updateQuery({
-                              practitioner: user.username,
-                              slot: null,
-                            })
-                          }
-                          className="cursor-pointer w-full"
-                        >
-                          <PopoverClose className="flex items-center gap-2 w-full">
-                            <Avatar
-                              imageUrl={user.profile_picture_url}
-                              name={formatName(user)}
-                              className="size-6 rounded-full"
-                            />
-                            <span>{formatName(user)}</span>
-                            <span className="text-xs text-gray-500 font-medium">
-                              {user.user_type}
-                            </span>
-                          </PopoverClose>
-                          {qParams.practitioner === user.username && (
-                            <CheckIcon className="ml-auto" />
-                          )}
-                        </CommandItem>
-                      ))}
-                    </CommandGroup>
-                  </CommandList>
-                </Command>
-              </PopoverContent>
-            </Popover>
+            <PracticionerSelector
+              facilityId={facilityId}
+              selected={practitioner ?? null}
+              onSelect={(user) =>
+                updateQuery({
+                  practitioner: user?.username ?? null,
+                  slot: null,
+                })
+              }
+              clearSelection={t("show_all")}
+            />
path: src/pages/Appointments/AppointmentsPage.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Update component name after fixing typo**

After fixing the component name, update the usage here as well.

```diff
-            <PracticionerSelector
+            <PractitionerSelector
              facilityId={facilityId}
              selected={practitioner ?? null}
              onSelect={(user) =>
                updateQuery({
                  practitioner: user?.username ?? null,
                  slot: null,
                })
              }
              clearSelection={t("show_all")}
            />
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
            <PractitionerSelector
              facilityId={facilityId}
              selected={practitioner ?? null}
              onSelect={(user) =>
                updateQuery({
                  practitioner: user?.username ?? null,
                  slot: null,
                })
              }
              clearSelection={t("show_all")}
            />
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Fixed in commit cea94ab
created_at: 2025-03-11T10:59:46Z
author_association: CONTRIBUTOR
diff_hunk: @@ -70,9 +68,9 @@
 import {
   dateQueryString,
   formatDisplayName,
-  formatName,
   formatPatientAge,
 } from "@/Utils/utils";
+import { PracticionerSelector } from "@/pages/Appointments/components/PracticionerSelector";
path: src/pages/Appointments/AppointmentsPage.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Fix typo in component name and imports**

The component name "PracticionerSelector" contains a typo. It should be "PractitionerSelector" (with two 't's).

```diff
-import { PracticionerSelector } from "@/pages/Appointments/components/PracticionerSelector";
+import { PractitionerSelector } from "@/pages/Appointments/components/PractitionerSelector";
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
import { PractitionerSelector } from "@/pages/Appointments/components/PractitionerSelector";
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Fixed in commit cea94ab
created_at: 2025-03-11T10:59:46Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,129 @@
+import { CaretDownIcon } from "@radix-ui/react-icons";
+import { CheckIcon } from "@radix-ui/react-icons";
+import { PopoverClose } from "@radix-ui/react-popover";
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+import { Avatar } from "@/components/Common/Avatar";
+
+import query from "@/Utils/request/query";
+import { formatName } from "@/Utils/utils";
+import scheduleApi from "@/types/scheduling/scheduleApi";
+import { UserBase } from "@/types/user/user";
+
path: src/pages/Appointments/components/PracticionerSelector.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Update file name and component imports due to typo**

Since this is a new file, it should be renamed from "PracticionerSelector.tsx" to "PractitionerSelector.tsx" to fix the spelling error. This would require updating imports across all files, but ensures consistent naming.


The file should be renamed and the imports should be kept as is since they're correct when viewed in isolation.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-03-11T10:59:46Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,129 @@
+import { CaretDownIcon } from "@radix-ui/react-icons";
+import { CheckIcon } from "@radix-ui/react-icons";
+import { PopoverClose } from "@radix-ui/react-popover";
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+import { Avatar } from "@/components/Common/Avatar";
+
+import query from "@/Utils/request/query";
+import { formatName } from "@/Utils/utils";
+import scheduleApi from "@/types/scheduling/scheduleApi";
+import { UserBase } from "@/types/user/user";
+
+interface PracticionerSelectorProps {
+  selected: UserBase | null;
+  onSelect: (user: UserBase | null) => void;
+  facilityId: string;
+  clearSelection?: string;
+}
+
+export const PracticionerSelector = ({
+  facilityId,
+  selected,
+  onSelect,
+  clearSelection,
+}: PracticionerSelectorProps) => {
path: src/pages/Appointments/components/PracticionerSelector.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Fix typo in component name**

The component name should also be updated to use the correct spelling.

```diff
-export const PracticionerSelector = ({
+export const PractitionerSelector = ({
  facilityId,
  selected,
  onSelect,
  clearSelection,
-}: PracticionerSelectorProps) => {
+}: PractitionerSelectorProps) => {
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
export const PractitionerSelector = ({
  facilityId,
  selected,
  onSelect,
  clearSelection,
}: PractitionerSelectorProps) => {
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-03-11T10:59:46Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,129 @@
+import { CaretDownIcon } from "@radix-ui/react-icons";
+import { CheckIcon } from "@radix-ui/react-icons";
+import { PopoverClose } from "@radix-ui/react-popover";
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+import { Avatar } from "@/components/Common/Avatar";
+
+import query from "@/Utils/request/query";
+import { formatName } from "@/Utils/utils";
+import scheduleApi from "@/types/scheduling/scheduleApi";
+import { UserBase } from "@/types/user/user";
+
+interface PracticionerSelectorProps {
+  selected: UserBase | null;
+  onSelect: (user: UserBase | null) => void;
+  facilityId: string;
+  clearSelection?: string;
+}
path: src/pages/Appointments/components/PracticionerSelector.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Fix typo in interface name**

The interface name contains the same typo and should be fixed for consistency.

```diff
-interface PracticionerSelectorProps {
+interface PractitionerSelectorProps {
  selected: UserBase | null;
  onSelect: (user: UserBase | null) => void;
  facilityId: string;
  clearSelection?: string;
}
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
interface PractitionerSelectorProps {
  selected: UserBase | null;
  onSelect: (user: UserBase | null) => void;
  facilityId: string;
  clearSelection?: string;
}
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-03-11T10:59:46Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,129 @@
+import { CaretDownIcon } from "@radix-ui/react-icons";
+import { CheckIcon } from "@radix-ui/react-icons";
+import { PopoverClose } from "@radix-ui/react-popover";
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+import { Avatar } from "@/components/Common/Avatar";
+
+import query from "@/Utils/request/query";
+import { formatName } from "@/Utils/utils";
+import scheduleApi from "@/types/scheduling/scheduleApi";
+import { UserBase } from "@/types/user/user";
+
+interface PracticionerSelectorProps {
+  selected: UserBase | null;
+  onSelect: (user: UserBase | null) => void;
+  facilityId: string;
+  clearSelection?: string;
+}
+
+export const PracticionerSelector = ({
+  facilityId,
+  selected,
+  onSelect,
+  clearSelection,
+}: PracticionerSelectorProps) => {
+  const { t } = useTranslation();
+  const {
+    data: practicioners,
+    isLoading,
+    isFetching,
+  } = useQuery({
+    queryKey: ["practicioners", facilityId],
+    queryFn: query(scheduleApi.appointments.availableUsers, {
+      pathParams: { facility_id: facilityId },
+    }),
+  });
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild disabled={isLoading}>
+        <Button
+          variant="outline"
+          role="combobox"
+          className="min-w-60 w-full justify-start"
+        >
+          {selected ? (
+            <div className="flex items-center gap-2">
+              <Avatar
+                imageUrl={selected.profile_picture_url}
+                name={formatName(selected)}
+                className="size-6 rounded-full"
+              />
+              <span>{formatName(selected)}</span>
+            </div>
+          ) : (
+            <span>{t("show_all")}</span>
+          )}
+          <CaretDownIcon className="ml-auto" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" align="start">
+        <Command>
+          <CommandInput
+            placeholder={t("search")}
+            className="outline-none border-none ring-0 shadow-none"
+          />
+          <CommandList>
+            <CommandEmpty>
+              {isFetching ? t("searching") : t("no_results")}
+            </CommandEmpty>
+            <CommandGroup>
+              {clearSelection && (
+                <CommandItem
+                  value="all"
+                  onSelect={() => onSelect(null)}
+                  className="cursor-pointer w-full"
+                >
+                  <PopoverClose className="w-full flex items-start">
+                    <span>{clearSelection}</span>
+                    {!selected && <CheckIcon className="ml-auto" />}
+                  </PopoverClose>
+                </CommandItem>
+              )}
+              {practicioners?.users.map((user) => (
path: src/pages/Appointments/components/PracticionerSelector.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Update variable reference after fixing typo**

Update the variable reference after renaming practicioners to practitioners.

```diff
-              {practicioners?.users.map((user) => (
+              {practitioners?.users.map((user) => (
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
              {practitioners?.users.map((user) => (
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-03-11T10:59:46Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,129 @@
+import { CaretDownIcon } from "@radix-ui/react-icons";
+import { CheckIcon } from "@radix-ui/react-icons";
+import { PopoverClose } from "@radix-ui/react-popover";
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+import { Avatar } from "@/components/Common/Avatar";
+
+import query from "@/Utils/request/query";
+import { formatName } from "@/Utils/utils";
+import scheduleApi from "@/types/scheduling/scheduleApi";
+import { UserBase } from "@/types/user/user";
+
+interface PracticionerSelectorProps {
+  selected: UserBase | null;
+  onSelect: (user: UserBase | null) => void;
+  facilityId: string;
+  clearSelection?: string;
+}
+
+export const PracticionerSelector = ({
+  facilityId,
+  selected,
+  onSelect,
+  clearSelection,
+}: PracticionerSelectorProps) => {
+  const { t } = useTranslation();
+  const {
+    data: practicioners,
+    isLoading,
+    isFetching,
+  } = useQuery({
+    queryKey: ["practicioners", facilityId],
+    queryFn: query(scheduleApi.appointments.availableUsers, {
+      pathParams: { facility_id: facilityId },
+    }),
+  });
path: src/pages/Appointments/components/PracticionerSelector.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Fix typo in query key and variable name**

The data variable and query key both use the misspelled "practicioners" term.

```diff
  const {
-    data: practicioners,
+    data: practitioners,
    isLoading,
    isFetching,
  } = useQuery({
-    queryKey: ["practicioners", facilityId],
+    queryKey: ["practitioners", facilityId],
    queryFn: query(scheduleApi.appointments.availableUsers, {
      pathParams: { facility_id: facilityId },
    }),
  });
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
  const {
    data: practitioners,
    isLoading,
    isFetching,
  } = useQuery({
    queryKey: ["practitioners", facilityId],
    queryFn: query(scheduleApi.appointments.availableUsers, {
      pathParams: { facility_id: facilityId },
    }),
  });
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-03-11T10:59:46Z
author_association: CONTRIBUTOR

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-03-11T10:53:40Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- This is an auto-generated comment: failure by coderabbit.ai -->

> [!CAUTION]
> ## Review failed
> 
> The pull request is closed.

<!-- end of auto-generated comment: failure by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough
The changes involve correcting the spelling of the `PracticionerSelector` component to `PractitionerSelector` across multiple files. This includes updates to import statements, component usage, and query keys to ensure consistent terminology. The new component allows users to select practitioners from a list, with improved error handling and loading states. Additionally, the localization file has been updated to reflect the correct spelling of "practitioners."

## Changes

| File(s)                                                                                          | Change Summary                                                                                                                                             |
|--------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `src/components/Questionnaire/QuestionTypes/AppointmentQuestion.tsx`, `src/pages/Appointments/AppointmentsPage.tsx`, `src/pages/Appointments/BookAppointment.tsx` | Renamed `PracticionerSelector` to `PractitionerSelector` and updated query keys from `["practicioners", ...]` to `["practitioners", ...]`.                |
| `src/pages/Appointments/components/PracticionerSelector.tsx`                                      | Introduced new `PracticionerSelector` component with props for selecting practitioners, including search functionality and error handling.                  |
| `public/locale/en.json`                                                                          | Corrected spelling of "practicioners" to "practitioners" in the localization file.                                                                       |
| `src/pages/Appointments/components/PractitionerSelector.tsx`                                      | Updated interface and variable names from `PracticionerSelectorProps` to `PractitionerSelectorProps`, ensuring consistent naming conventions.              |

## Suggested labels
`tested`

## Suggested reviewers
- Jacobjeevan

## Poem
> I'm a rabbit coding through the night,  
> Hopping on changes with sheer delight,  
> New seekers in practice now take the stage,  
> Query keys updated, a modern page,  
> Carrots and code in perfect sync, what a sight!  
> 🥕🐇

<!-- walkthrough_end -->
<!-- internal state start -->


<!-- DwQgtGAEAqAWCWBnSTIEMB26CuAXA9mAOYCmGJATmriQCaQDG+Ats2bgFyQAOFk+AIwBWJBrngA3EsgEBPRvlqU0AgfFwA6NPEgQAfACgjoCEYDEZyAAUASpADK2VmgqyjcEj2wAbb5AokAI7Y0riQ4rjedJAARACCtLTIiNjc3PgUYQBmGZCIJC4MCBhEPFRi6vD45BTImPQBWWhiubzNEVU1eSRRLXwEkAKeAdiIKlEKzOnkGLgxkADuaMnYAszqNPRy4bCeo5T+6rAS8ADWGEiwaPT1KMjwSrPwWfDRy5AYTkN8AIw/AEz/H4aGC7MrwZgueSCEQVKT8LI7VC2O7hfCQMhXDAMTy4MFZbDY8TVNDedTQxF4zxoNJkhjUTqDeRkcbwEo7Tz5QqwRg0lTwMm4eQ5PhtCrEmqIEEJWiVEm+WQAGhQYTZDG82CUdX8JCafQRHLK7TlXXyvQIFGVuCoGEQIvW7PUKFm6LQOtG408TCm1XYGncYJR11oAUQ+TqWBIAA8kOJHWGQsrENxRM94PSFZAXjH4ylPJ9mN9IH8fgAGYGgzy8fDpfL0IqYUh1ALoBje7iYV5beRutgUUiMXYMU5kxBhPHUfh4MnkZBUj6iaRjVx5GjcZAiybcKISkEeQeiEex52y+k0OdXMLJ1MvM+dZBXeFDMjoRLRAZKZjVMdUGiGgTYKU2boBg9DnuOYLkAsWYFLg2ABCCACSYSkog6IYPg547JO84AKqIeE0ZhFcMgkC+kJsrg2jkPQbLOjQFAYAy8rwAAXsxWAABSIT8AAcGAAJRZgK0gggAEvgCwkFIloci2LictJyh+OoJDMPcWDzkUh6jhBk4BBRWBqiw24kDQypqhqsrsvO5DvuiqS0NQVYUIo2BiJAtD4AwTjsBxyq8CQHbyXkDABGQiCwJh/B8J+6InEo6KblpWKkN4+ClOwrjKrcEXwZ4wSkuS6AJjaOKQJxACKcRCdUgyYTyX5qBMtxaqcBDcJ50npqJAZVj4fgBMEoSoj5FABLM3jQimWCbimBwBCcJALIgOWgYa+x8CR4RoEQpBgWCARRBImBhEwSg6ktUm1FmrnMIaGREJ27G7pWkC4TYAAyWa5PO3ADTqw1jqiADauwBAAupxsC4Lg64cAA9AjRBHKsGjegj+CwAw5C4AsGSnAj9IBAA+lkJAI/9vgI38gI/AJ/oGPoxjgFAZD0PgiJoHghCkDUzn1iwbCzFwvD8MIojiFIMjyOdyiqOoWg6MzJhQHAqCoJgOAEMQZDKJskzC5w/hoNBKTOCu2xy1QCuaNouhgIYLOmAYiAUAwRMmb6syIAjlUhGOnRMfAAR+wHErQLIKa+3EaT4JRRv+6EnQaLgiBRhwBgxNnBgWJAcSIbr/MG+bkIrpzg6NtIfWVyU0jOhI+DePCbpMONkuMnRtloA6pQV/OAAGVjlOIDCdJQ9g9JLGQD1u3vjuiQ8jyaE9T30A97ggyCOc56BZOTYgyA1hoQukmSrs5RsgQdexjAO/dgu28+LEcXdggPsfpAn7BJ4H1SzwSIkKc3qBROPgUYKAfTnzHJfdgOpyYTTHuyJexox6+goJPc0M9IDbWfFgAI25mjRAWEcQ0bcAhiCmnkFMvhogoPFOPDBa8LQb3zokE0pIppWkfl7GYuAADk2876eDfp4AAUvYAAGjg94eDIA7wNgMRo5okTICYmwWupAQQADl0QNQOF+WUt4OJznRPOdKKMGAxSzISCoLEhQGi0rwuBj5PByMhEoRmec4jeAYiYtEholDqhcP4iu0Yz4G1aKsOkGInjiGrkzSAABhZxswdTqLoFweho9GGYOnhQWedEB5uw9h2JsCNP7x1mEbX2T8+G+2Hqg3JzDsGACTCSA2SV5MKwQU50HSSmU12tICpcdv4+09j6epCNGkMPQXk9eWcc5MxdgMspwzKljLTiMr+1T2CICsEM1O6dM7ZxiLnSwBci762iKXKEBoGx10QDXB5TY+mDw2bsn2BytFpyjAAkSDcm7wnnBNHubI+6UnfjMnJcyWm9LqXAgYnSJSrx6QPZU5CO42TBNeXw4KDQxGhV0jQ8x1bIFBb3VEyjJbRDogIY+85T4ZCvFRGgV9bhOMmXAj0A4SF4lEZACRkjpTsIlJwpUhphorlOCQYUuRya4CKPixA2laA+E9PI/IN1cFkSwAo6IWQ7odJBjEMUMLJQxGVHqAU5JEK0AhrPJFJqzVdMQJarMzQbVCjtQ6nK3g0IKHbhUbFnIaEziIJvaQXpUr1zyi2JgtpYxkAYPILulAHRNwyj2MK+AwxkNSShda6g6hhm8vAAWkApWvClJAcwFzfH63vAE+cQTvAhIlMgMJUYInRCiQIGJ7BKgJKgAAWTMlFegiB4BECYnBFs+raBZKlbIAA0rKrgzrl5oItVaz1gpZA+sKVgYp7tBnlI+bgGp2yqmXr2d8kgRy/mQHaQPZda7ZAbtNcvFFtR3XWv3YevpJ7SlDJjqMz5WyL01PvY+geiSUlcrSRSzJHTgBEu3ai/Jegj39NPWssDOzb3jKg3ew5vzZ4vrQ9+5pPTsNAdWaB69myCM3ug2R9OcHTlGAgGAIwDHz3gaI1sgAQvgfApwSOzEfScnO3jC582uZOpwZcKSaISfuF59cBUD1E+JyTmhyPCQmGyRuzdcSHRZJSh+nhOkYe6fk2eCK0lIqJT++ZLCMUZAoXGUo85cXhoJa5xhJK2GyjFQqbhBUQjStlT9PgCqlXsjQCdAUGrQzgPdvXHVL4F23RYMar9TT0FuoCq5dcGh/22vtY6xem7jQ/pK2UGsUpKveuq36gNmLg2+ZxWG8Fkb+AyU4auCg7k53UnWoAuxTF92OJ4YhsIBlqLyOxDG2gFlsRWXxfOLEtAAsVzNDS+gLqGvXwxONXIbAwygcWLsLAGEjSzMlOgFsORCS0C8fWvxHbm1glbe2ptXae0c1FNE9MsSOjDuSQW9JPcUMDyo/VmjWGcPAbPeswTV6nNbKC7CtFBhIC1qgEnGL8gF1ZLqxUOzjXqzldawe6rz6CsncYTTsrLW91VYdYss5yzeOuzw4x/TtSC0NK3cjvo0mefnPzvJvWv4bnKbuRXTTTyDBxAXNBbHHw4f0FsxLlhMjSIvkoq5NVOJaKaXxACtH+GmMQZFwtsXRWajuYyLBzeqBtecMkkIygpjugqLdCz9BeX7pul0sqWUyY22yG27sEOTWXgTG4OmcbZ2MlITCHgG1rF66D32CT2Qs8oribDx0gAAlRW0VFhwIwCO0MAy6aswUVTyZL2g239pckj4rgxli9qwMH1yCU6H07tawjTMPLKanrm6ACsM6oTnHBQadpAbrB5rPgGSChZjUXxW6Lk7srjd8gLpA0IfJQghrukdIO/ybUHytqb0kIi0YH+tkXIR/EtEDWrRMI0ehCsg2oV2wit2L4D2oYPgacL2ngb260uQCwCAEwCWxQpQTkVESEXMHS6oBQ9m02s8tOqI1Yo+62Ko6Avgvumq/uASuBLgHIieh202IIAAos0DyJfgcKgAQqGOwG8M/kLLcKpMwMqEgemDyDPlqAwXwB3lRLJBkn/tQf0FHA+m9EwQbJwXwKgCcCkOKieOmBWnyu3geMOCgAmgNtrrtlEMgOlNcMqqyvXNsNHqyCGoMHgAQFgEgS+BgW6KgEMPiqgXQIzCwRdltPUAFrcLYdZKUDAlhApJAK/kMgdK5IBDyIPEgJ9PgHYSULPLcAPEgAAGJmQ/4AJtpEAbhGrzjLrKhxoH46jJjfiSC3wHDhKUCvDYgPpGB1r5wNq/hNoDAtqiBtp9HfgGjhLMq9qg79rg6DrxJq5QDaLLRzx8KvhKCLodLoYG7YJFL8YY6EZY6i7TLi5475KwYvx4hNbrj0SUB6g2abEnF9DDzNZHrqiaj4rFLMIoa4RarCYD6QAAA+HwA06KHS1Q7mXAnEm0XA3xlAvx+QAJQJvgQkAAvHoJAI3A8CCQPOPusT+OCiCXkXQfgRKAAPxcB4k5H+hcZ85GD/TTEezpQZgUxkAaBCBoQYAyZnJyZXIK5KYWyqaq41xGKIiRRUGtxeYdx1QCr+b4rWaLAZD0CFZU6s7zADBKkdDFbzACoSIADy2iRmNmdJdICMjJpIzJGArJ7Jk+W8ame8B8MBfm1oB+paY8hhpC84Mq8gA8MQGEJMmhiAZM4CoEMQIJtR2KOEYIDE90qA/m0QXWkQqaVuzRWhswNxRCOieiVIfAM49c8qti4WxU8RhiaYtKVuqAwpjM3RPi32/RZif2QxAOoxQOExIOXg9JEOQ68xkAuiFBNZoxAx9ZwSIxtoYx3aLZ1iRpMxcS1aiwlAngHinR1JPGfGguAm+xeyEy0wG5uOrucKUuXG3JCmvJeQSu5ciIgpBg+4wpeQUUK0CRigaYd4oxvAEILgAocqPkdY/AWA8Z8eoaPQ+2kKuI6asQO5lAqpsAKRRAUUeAhoyKWxFAZxyeqh+4lEaZ5UGSRugwuqam9Ahq+W+uDxFoTx64Le8FRFGQJFiArCKS7cDRoE4KXCho4xmQcZMOmF2Weq3AGBBqRqhFu5aKAS5FAlDmIqYWnQ4qkW6Jb5GqGSyARhAqlhyWbiOF8ZvFBFLq1OZF/pIJkh+K+qGkkq0W8gnp5eA8lO5q/uf6nObWDqQlFlrq1lY8AG1WA2kIaQspiIm0D47wqE6Ici1wQgowBs+F90A8mlrOJJGg3l2l1GxWUVMVka8JqusSKQ8ajRY4cCMpSW606i+KCaUgTwoxzQrkeanKW5UmXRMu1Zja/ZdZng/2w5naiILFkSUxA605UOiEqZFAtxeQ06s6+U8i3FAsWSaFvVRC1gxxIljx7OqOuxLGzGm588zuT2mGkuhmL641fVYFxJlFc19Gq5exrGG52Oq1GpM1FosG8GMOU6M6j+86I1mwWSrVu+wM9xl12xx6C19uQmjuFVOOcVn1iFm1HSr1Ca71QN61huOxR1i1Duy1Uyu1buINHG0uyyTsqssSHMXMPMPJFaL+7AXAVAZsp58gVsig8sagdsysjsBgWNL+6gJMDwAZi0rwUktAJMMC58zM9NrMkA/wJAAAbELcLbQFkD8AIFkAAKw/AMClhoBC1ZBC0AAsKtuoStpYAgtAbYpYBQ0ttAAAzLQD8LQAAJwOyY382M24DM1JAkxs3LR0AkzsyW1AA -->

<!-- internal state end -->

---

<details>
<summary>📜 Recent review details</summary>

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

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 2e66e6df1bf51c0a6f644ef6f0bdcc0ea5d3d1d9 and cea94abe528271fe8e0db77c6039dd87a3a9b44f.

</details>

<details>
<summary>📒 Files selected for processing (8)</summary>

* `src/components/Questionnaire/QuestionTypes/AppointmentQuestion.tsx` (2 hunks)
* `src/pages/Appointments/AppointmentsPage.tsx` (3 hunks)
* `src/pages/Appointments/BookAppointment.tsx` (3 hunks)
* `public/locale/en.json` (1 hunks)
* `src/components/Questionnaire/QuestionTypes/AppointmentQuestion.tsx` (2 hunks)
* `src/pages/Appointments/AppointmentsPage.tsx` (3 hunks)
* `src/pages/Appointments/BookAppointment.tsx` (3 hunks)
* `src/pages/Appointments/components/PractitionerSelector.tsx` (2 hunks)

</details>

</details>
<!-- finishing_touch_checkbox_start -->

<details>
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---



<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=ohcnetwork/care_fe&utm_content=11221):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: CONTRIBUTOR
user: login: netlify[bot]
created_at: 2025-03-11T10:53:46Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *care-ohc* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | cea94abe528271fe8e0db77c6039dd87a3a9b44f |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/care-ohc/deploys/67d0182424f98d0008518463 |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-11221.preview.ohc.network](https://deploy-preview-11221.preview.ohc.network) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTExMjIxLnByZXZpZXcub2hjLm5ldHdvcmsifQ.sMKszfuViWHLms5KF7KDofkkQZv2bYL59hh4Ou--4Fo)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [care-ohc Preview](https://deploy-preview-11221.preview.ohc.network) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/care-ohc/configuration/notifications#deploy-webhooks)._
author_association: NONE
user: login: cypress[bot]
created_at: 2025-03-11T11:03:17Z
body: 
<h3>
  <a href="https://cloud.cypress.io/projects/wf7d2m?utm_source=github&utm_medium=failed&utm_campaign=project">CARE</a>&nbsp;
  <img src="https://assets.cypress.io/github-pr-comment-icons/chevron.svg" alt="" height="14" width="14" />&nbsp;
  <a href="https://cloud.cypress.io/projects/wf7d2m/runs/5176/overview?utm_source=github&utm_medium=failed&utm_campaign=run%20number">Run #5176</a>
</h3>

<details>
  <summary>
    <strong>Run Properties:</strong>&nbsp;
    <code><img src="https://assets.cypress.io/github-pr-comment-icons/failed.svg" alt="status check failed" height="10" width="10" />&nbsp;Failed&nbsp;<a href="https://cloud.cypress.io/projects/wf7d2m/runs/5176/overview?utm_source=github&utm_medium=failed&utm_campaign=run%20number">#5176</a></code> &nbsp;&bull;&nbsp;
    <code><img src="https://assets.cypress.io/github-pr-comment-icons/git-commit.svg" alt="git commit" width="10" height="10" /> <a href="https://github.com/ohcnetwork/care_fe/commit/2e66e6df1bf51c0a6f644ef6f0bdcc0ea5d3d1d9">2e66e6df1b</a>: Adds support for serching practicioners and refactor practicioner selector to be...</code>
  </summary><br />

  <table width="744">
    <tbody>
      <tr />
      <tr height="48">
        <td width="224">
          <strong>Project</strong>
        </td>
        <td width="520">
          <code><a href="https://cloud.cypress.io/projects/wf7d2m?utm_source=github&utm_medium=failed&utm_campaign=project">CARE</a></code>
        </td>
      </tr>
      <tr />
      <tr height="48">
        <td width="224">
          <strong>Branch Review</strong>
        </th>
        <td>
          <code><a href="https://cloud.cypress.io/projects/wf7d2m/branches/rithviknishad%2Ffeat%2Fnext-appointment-search-practicioner/review?utm_source=github&utm_medium=failed&utm_campaign=review%20changes&changeRequest=11221">rithviknishad/feat/next-appointment-search-practicioner</a></code>
        </td>
      </tr>
      <tr />
      <tr height="48">
        <td><strong>Run status</strong></td>
        <td>
          <code><img src="https://assets.cypress.io/github-pr-comment-icons/failed.svg" alt="status check failed" height="10" width="10" />&nbsp;Failed&nbsp;<a href="https://cloud.cypress.io/projects/wf7d2m/runs/5176/overview?utm_source=github&utm_medium=failed&utm_campaign=run%20number">#5176</a></code>
        </td>
      </tr>
      <tr />
      <tr height="48">
        <td><strong>Run duration</strong></td>
        <td><code>07m 59s</code></td>
      </tr>
      <tr />
      <tr height="48">
        <td><strong>Commit</strong></td>
        <td>
          <code><img src="https://assets.cypress.io/github-pr-comment-icons/git-commit.svg" alt="git commit" width="10" height="10" /> <a href="https://github.com/ohcnetwork/care_fe/commit/2e66e6df1bf51c0a6f644ef6f0bdcc0ea5d3d1d9">2e66e6df1b</a>: Adds support for serching practicioners and refactor practicioner selector to be...</code>
        </td>
      </tr>
      <tr />
      <tr height="48">
        <td><strong>Committer</strong></td>
        <td><code>Rithvik Nishad</code></td>
      </tr>
    </tbody>
    <tfoot>
      <tr />
      <tr height="48">
        <td colspan="2">
          <a href="https://cloud.cypress.io/projects/wf7d2m/runs/5176/properties?utm_source=github&utm_medium=failed&utm_campaign=properties">View all properties for this run ↗︎</a>
        </td>
      </tr>
    </tfoot>
  </table>
  <hr />
</details>

<table width="744">
  <thead>
    <tr />
    <tr height="48">
      <th colspan="2" align="left" width="744">Test results</th>
    </tr>
  </thead>
  <tbody>
    <tr height="48">
      <td width="224">
        <img src="https://assets.cypress.io/github-pr-comment-icons/failed.svg" alt="Tests that failed" width="10" height="10" />&nbsp;
        <a href="https://cloud.cypress.io/projects/wf7d2m/runs/5176/overview?reviewViewBy=FAILED&utm_source=github&utm_medium=failed&utm_campaign=failed%20tests">
          <strong>Failures</strong>
        </a>
      </td>
      <td>
        <code><strong>1</strong></code>
      </td>
    </tr>
    <tr />
    <tr height="48">
      <td width="224">
        <img src="https://assets.cypress.io/github-pr-comment-icons/flaky-v3.svg" alt="Tests that were flaky" width="10" height="10" />&nbsp;
        <a href="https://cloud.cypress.io/projects/wf7d2m/runs/5176/overview?reviewViewBy=FLAKY&utm_source=github&utm_medium=failed&utm_campaign=flaky%20tests">
          <strong>Flaky</strong>
        </a>
      </td>
      <td>
        <code><strong>0</strong></code>
      </td>
    </tr>
    <tr />
    <tr height="48">
      <td width="224">
        <img src="https://assets.cypress.io/github-pr-comment-icons/pending.svg" alt="Tests that did not run due to a developer annotating a test with .skip" width="10" height="10" />&nbsp;
        <a href="https://cloud.cypress.io/projects/wf7d2m/runs/5176/test-results?utm_source=github&utm_medium=failed&utm_campaign=pending%20tests&statuses=%5B%7B%22value%22%3A%22PENDING%22%2C%22label%22%3A%22PENDING%22%7D%5D">
          <strong>Pending</strong>
        </a>
      </td>
      <td>
        <code><strong>0</strong></code>
      </td>
    </tr>
    <tr />
    <tr height="48">
      <td width="224">
        <img src="https://assets.cypress.io/github-pr-comment-icons/skipped-v3.svg" alt="Tests that did not run due to a failure in a mocha hook" width="10" height="10" />&nbsp;
        <a href="https://cloud.cypress.io/projects/wf7d2m/runs/5176/test-results?utm_source=github&utm_medium=failed&utm_campaign=skipped%20tests&statuses=%5B%7B%22value%22%3A%22SKIPPED%22%2C%22label%22%3A%22SKIPPED%22%7D%5D">
          <strong>Skipped</strong>
        </a>
      </td>
      <td>
        <code><strong>0</strong></code>
      </td>
    </tr>
    <tr />
    <tr height="48">
      <td width="224">
        <img src="https://assets.cypress.io/github-pr-comment-icons/passed.svg" alt="Tests that passed" width="10" height="10" />&nbsp;
        <a href="https://cloud.cypress.io/projects/wf7d2m/runs/5176/overview?utm_source=github&utm_medium=failed&utm_campaign=passed%20tests">
          <strong>Passing</strong>
        </a>
      </td>
      <td>
        <code><strong>11</strong></code>
      </td>
    </tr><tfoot>
    <tr height="48"><td colspan="2"><a href="https://cloud.cypress.io/projects/wf7d2m/branches/rithviknishad%2Ffeat%2Fnext-appointment-search-practicioner/review?utm_source=github&utm_medium=failed&utm_campaign=review%20changes&changeRequest=11221">View all changes introduced in this branch ↗︎</a></td></tr></tfoot>
  </tbody>
</table>


<hr></hr>
<h3>
  Tests for review
</h3>
<details>
  <summary><img src="https://assets.cypress.io/github-pr-comment-icons/failed.svg" width="12" height="12" alt="Failed" />&nbsp; <b> cypress/e2e/patient_spec/patient_creation.cy.ts</b> • 1 failed test  </summary>

  <a href='https://cloud.cypress.io/projects/wf7d2m/runs/5176/test-results?utm_source=github&utm_medium=failed&utm_campaign=view%20spec&specs=%5B%7B%22value%22%3A%22%5B%5C%22fe81d904-7222-4a02-b425-782b325c7a14%5C%22%5D%22%2C%22label%22%3A%22cypress%2Fe2e%2Fpatient_spec%2Fpatient_creation.cy.ts%22%7D%5D'><code>View</code></a> <a href='https://cloud.cypress.io/projects/wf7d2m/runs/5176/test-results/instance/fe81d904-7222-4a02-b425-782b325c7a14/stdout?utm_source=github&utm_medium=failed&utm_campaign=view%20spec%20stdout'><code>Output</code></a> 

  <table>
    <tr>
      <th align="left" colspan="2" style="width: 100%">
      Test
      </th>
      <th>Artifacts</th>
    </tr>
      <tr>
        <td colspan="2">
          <a href="https://cloud.cypress.io/projects/wf7d2m/runs/5176/overview/3586cc04-1dc8-4d5c-9aaa-a5439201ca3b?reviewViewBy=FAILED&utm_source=github&utm_medium=failed&utm_campaign=view%20test">
            Patient Management > Search patient with phone number and create a new encounter
          </a>
        </td>
        <td>
          <a href="https://cloud.cypress.io/projects/wf7d2m/runs/5176/test-results/3586cc04-1dc8-4d5c-9aaa-a5439201ca3b/replay?utm_source=github&utm_medium=failed&utm_campaign=view%20Test%20Replay">
            <code><b>Test Replay</b></code>
          </a> <a href="https://cloud.cypress.io/projects/wf7d2m/runs/5176/overview/3586cc04-1dc8-4d5c-9aaa-a5439201ca3b/screenshots?reviewViewBy=FAILED&utm_source=github&utm_medium=failed&utm_campaign=view%20test%20screenshots">
            <code>Screenshots</code>
          </a>
        </td>
      </tr></table>
  </details>


author_association: NONE
user: login: cloudflare-workers-and-pages[bot]
created_at: 2025-03-11T11:04:37Z
body: ## Deploying care-fe with &nbsp;<a href="https://pages.dev"><img alt="Cloudflare Pages" src="https://user-images.githubusercontent.com/23264/106598434-9e719e00-654f-11eb-9e59-6167043cfa01.png" width="16"></a> &nbsp;Cloudflare Pages

<table><tr><td><strong>Latest commit:</strong> </td><td>
<code>cea94ab</code>
</td></tr>
<tr><td><strong>Status:</strong></td><td>&nbsp;✅&nbsp; Deploy successful!</td></tr>
<tr><td><strong>Preview URL:</strong></td><td>
<a href='https://a614b3f5.care-fe.pages.dev'>https://a614b3f5.care-fe.pages.dev</a>
</td></tr>
<tr><td><strong>Branch Preview URL:</strong></td><td>
<a href='https://rithviknishad-feat-next-appo.care-fe.pages.dev'>https://rithviknishad-feat-next-appo.care-fe.pages.dev</a>
</td></tr>
</table>

[View logs](https://dash.cloudflare.com/db6d08276fae8cc36808cc6d13f71ca6/pages/view/care-fe/a614b3f5-edeb-4d23-98fc-5e5bdf3bdad0)

author_association: NONE
user: login: github-actions[bot]
created_at: 2025-03-11T11:05:01Z
body: @rithviknishad Your efforts have helped advance digital healthcare and TeleICU systems. :rocket: Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! :raised_hands:
author_association: NONE