Public Facilities Filters

public/locale/en.json

@@ -907,7 +907,6 @@
   "facility_not_found": "Facility Not Found",
   "facility_organizations": "Facility Organizations",
   "facility_preference": "Facility preference",
-  "facility_search_placeholder": "Search by Facility / District Name",
   "facility_search_placeholder_text": "Search by Facility name",
   "facility_type": "Facility Type",
   "failed_to_create_appointment": "Failed to create an appointment",
@@ -1605,14 +1604,17 @@
   "select": "Select",
   "select_all": "Select All",
   "select_date": "Select date",
+  "select_district": "Select District",
   "select_eligible_policy": "Select an Eligible Insurance Policy",
   "select_facility_for_discharged_patients_warning": "Facility needs to be selected to view discharged patients.",
+  "select_facility_type": "Select Facility Type",
   "select_for_administration": "Select for Administration",
   "select_groups": "Select Groups",
   "select_investigation": "Select Investigations (all investigations will be selected by default)",
   "select_investigation_groups": "Select Investigation Groups",
   "select_investigations": "Select Investigations",
   "select_local_body": "Select Local Body",
+  "select_localbody": "Select Local Body",
   "select_patient": "Select Patient",
   "select_policy": "Select an Insurance Policy",
   "select_policy_to_add_items": "Select a Policy to Add Items",
@@ -1623,6 +1625,7 @@
   "select_skills": "Select and add some skills",
   "select_time": "Select time",
   "select_time_slot": "Select time slot",
+  "select_ward": "Select Ward",
   "select_wards": "Select wards",
   "self_booked": "Self-booked",
   "send": "Send",

src/components/Common/UserSelector.tsx

@@ -80,7 +80,7 @@ export default function UserSelector({
         </Button>
       </PopoverTrigger>
       <PopoverContent
-        className="p-0 w-[var(--radix-popover-trigger-width)] max-w-[--radix-popover-content-available-width]"
+        className="p-0 w-[var(--radix-popover-trigger-width)]"
         align="start"
         sideOffset={4}
       >

src/components/ui/autocomplete.tsx

@@ -31,6 +31,8 @@ interface AutocompleteProps {
   placeholder?: string;
   noOptionsMessage?: string;
   disabled?: boolean;
+  align?: "start" | "center" | "end";
+  popoverClassName?: string;
 }
 
 export default function Autocomplete({
@@ -41,12 +43,14 @@ export default function Autocomplete({
   placeholder = "Select...",
   noOptionsMessage = "No options found",
   disabled,
+  align = "center",
+  popoverClassName,
 }: AutocompleteProps) {
   const [open, setOpen] = React.useState(false);
 
   return (
     <Popover open={open} onOpenChange={setOpen} modal={true}>
-      <PopoverTrigger asChild>
+      <PopoverTrigger asChild className={popoverClassName}>
         <Button
           title={
             value
@@ -67,7 +71,10 @@ export default function Autocomplete({
           <CaretSortIcon className="ml-2 size-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-full p-0 pointer-events-auto">
+      <PopoverContent
+        className="sm:w-full p-0 pointer-events-auto w-[var(--radix-popover-trigger-width)]"
+        align={align}
+      >
         <Command>
           <CommandInput
             placeholder="Search option..."

src/pages/Appoinments/PatientRegistration.tsx

@@ -6,8 +6,6 @@ import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
 
-import CareIcon from "@/CAREUI/icons/CareIcon";
-
 import { Button } from "@/components/ui/button";
 import {
   Form,
@@ -235,7 +233,6 @@ export function PatientRegistration(props: PatientRegistrationProps) {
             )
           }
         >
-          <CareIcon icon="l-square-shape" className="h-4 w-4 mr-1" />
           <span className="text-sm underline">{t("back")}</span>
         </Button>
       </div>

src/pages/Appoinments/PatientSelect.tsx

@@ -4,8 +4,6 @@ import { navigate } from "raviger";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import CareIcon from "@/CAREUI/icons/CareIcon";
-
 import { Button } from "@/components/ui/button";
 
 import Loading from "@/components/Common/Loading";
@@ -210,7 +208,6 @@ export default function PatientSelect({
             )
           }
         >
-          <CareIcon icon="l-square-shape" className="h-4 w-4 mr-1" />
           <span className="text-sm underline">{t("back")}</span>
         </Button>
       </div>

src/pages/Appoinments/Schedule.tsx

@@ -147,7 +147,6 @@ export function ScheduleAppointment(props: AppointmentsProps) {
             className="border border-secondary-400"
           >
             <Link href={`/facility/${facilityId}`}>
-              <CareIcon icon="l-square-shape" className="h-4 w-4 mr-1" />
               <span className="text-sm underline">{t("back")}</span>
             </Link>
           </Button>

src/pages/Appoinments/auth/PatientLogin.tsx

@@ -7,8 +7,6 @@ import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
 
-import CareIcon from "@/CAREUI/icons/CareIcon";
-
 import { Button } from "@/components/ui/button";
 import {
   Form,
@@ -293,8 +291,7 @@ export default function PatientLogin({
               )
         }
       >
-        <CareIcon icon="l-square-shape" className="h-4 w-4 mr-1" />
-        <span className="text-sm underline">Back</span>
+        <span className="text-sm underline">{t("back")}</span>
       </Button>
       {page === "send" ? renderPhoneNumberForm() : renderVerifyForm()}
     </div>

src/pages/Facility/FacilitiesPage.tsx

@@ -2,6 +2,7 @@ import careConfig from "@careConfig";
 import { useQuery } from "@tanstack/react-query";
 import dayjs from "dayjs";
 import { Link, navigate } from "raviger";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { Button } from "@/components/ui/button";
@@ -13,14 +14,15 @@ import { FacilityModel } from "@/components/Facility/models";
 
 import useFilters from "@/hooks/useFilters";
 
-import { CarePatientTokenKey } from "@/common/constants";
+import { LocalStorageKeys } from "@/common/constants";
 import { RESULTS_PER_PAGE_LIMIT } from "@/common/constants";
 
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
 import { PaginatedResponse } from "@/Utils/request/types";
 import { TokenData } from "@/types/auth/otpToken";
 
+import OrganizationFilter from "../Organization/components/OrganizationFilter";
 import { FacilityCard } from "./components/FacilityCard";
 
 export function FacilitiesPage() {
@@ -31,21 +33,34 @@ export function FacilitiesPage() {
     });
 
   const tokenData: TokenData = JSON.parse(
-    localStorage.getItem(CarePatientTokenKey) || "{}",
+    localStorage.getItem(LocalStorageKeys.patientTokenKey) || "{}",
   );
 
   const { t } = useTranslation();
+  const [selectedOrgs, setSelectedOrgs] = useState<string[]>(() => {
+    return qParams.organization ? [qParams.organization] : [];
+  });
+
+  useEffect(() => {
+    if (selectedOrgs.length > 0) {
+      const lastSelected = selectedOrgs[selectedOrgs.length - 1];
+      updateQuery({ organization: lastSelected });
+    } else {
+      updateQuery({ organization: undefined });
+    }
+  }, [selectedOrgs]);
 
   const { data: facilitiesResponse, isLoading } = useQuery<
     PaginatedResponse<FacilityModel>
   >({
     queryKey: ["facilities", qParams],
     queryFn: query(routes.getAllFacilities, {
       queryParams: {
+        name: qParams.search,
+        ...(qParams.facility_type && { facility_type: qParams.facility_type }),
         ...(qParams.organization && {
           organization: qParams.organization,
         }),
-
         page: qParams.page,
         limit: RESULTS_PER_PAGE_LIMIT,
         offset: (qParams.page - 1) * RESULTS_PER_PAGE_LIMIT,
@@ -68,7 +83,7 @@ export function FacilitiesPage() {
               className="text-sm font-medium hover:bg-gray-100 rounded-full px-6"
               onClick={() => navigate("/patient/home")}
             >
-              Patient Dashboard
+              {t("patient_dashboard")}
             </Button>
           </div>
         </header>
@@ -82,7 +97,7 @@ export function FacilitiesPage() {
             className="text-sm font-medium hover:bg-gray-100 rounded-full px-6"
             onClick={() => navigate("/login")}
           >
-            Sign in
+            {t("sign_in")}
           </Button>
         </div>
       </header>
@@ -99,20 +114,42 @@ export function FacilitiesPage() {
         </Link>
         <GetLoginHeader />
       </div>
-      <div className="flex flex-col justify-between sm:flex-row items-center gap-4 mb-6">
+      <div className="flex flex-col justify-between sm:flex-row items-center gap-5 mb-6">
+        <OrganizationFilter
+          skipLevels={[]}
+          selected={selectedOrgs}
+          onChange={(filter, level) => {
+            if ("organization" in filter) {
+              if (filter.organization) {
+                setSelectedOrgs((prev) => {
+                  const newOrgId = filter.organization as string;
+                  const newOrgs = prev.slice(0, level);
+                  newOrgs.push(newOrgId);
+                  return newOrgs;
+                });
+              } else {
+                setSelectedOrgs([]);
+              }
+            }
+            if ("facility_type" in filter) {
+              updateQuery({ facility_type: filter.facility_type });
+            }
+          }}
+          className="flex flex-row w-full"
+        />
         <SearchByMultipleFields
           id="facility-search"
           options={[
             {
               key: "facility_search_text",
               type: "text" as const,
               placeholder: t("facility_search_placeholder_text"),
-              value: qParams.name || "",
+              value: qParams.search || "",
               shortcutKey: "f",
             },
           ]}
-          className="w-full sm:w-1/2"
-          onSearch={(key, value) => updateQuery({ name: value })}
+          className="w-[calc(100vw-1rem)] sm:w-3/12"
+          onSearch={(key, value) => updateQuery({ search: value })}
           clearSearch={clearSearch}
           enableOptionButtons={false}
         />

src/pages/Facility/FacilityDetailsPage.tsx

@@ -149,7 +149,6 @@ export function FacilityDetailsPage({ id }: Props) {
           className="border border-secondary-400"
         >
           <Link href="/facilities">
-            <CareIcon icon="l-square-shape" className="h-4 w-4 mr-1" />
             <span className="text-sm underline">{t("back")}</span>
           </Link>
         </Button>