Add Search Feature for users in Facility Organization | add fallback url for goBack()

public/locale/en.json

@@ -1896,6 +1896,7 @@
   "search_tags": "Search tags...",
   "search_user": "Search User",
   "search_user_description": "Search for a user and assign a role to add them to the patient.",
+  "search_users": "Search users...",
   "searching": "Searching...",
   "see_attachments": "See Attachments",
   "see_note": "See Note",

src/components/Auth/Login.tsx

@@ -72,14 +72,14 @@
   const { reCaptchaSiteKey, urls, stateLogo, customLogo, customLogoAlt } =
     careConfig;
   const customDescriptionHtml = __CUSTOM_DESCRIPTION_HTML__;
   const initForm: any = {
     username: "",
     password: "",
   };
   const { forgot } = props;
   const [params] = useQueryParams();
   const { mode } = params;
   const initErr: any = {};
   const [form, setForm] = useState(initForm);
   const [errors, setErrors] = useState(initErr);
   const [isCaptchaEnabled, setCaptcha] = useState(false);
@@ -632,6 +632,7 @@
                             }}
                             maxLength={5}
                             placeholder="Enter 5-digit OTP"
+                            autoFocus
                           />
                           {otpValidationError && (
                             <p className="text-sm text-red-500">

src/components/Patient/EncounterQuestionnaire.tsx

@@ -46,7 +46,9 @@ export default function EncounterQuestionnaire({
                 navigate(`/patient/${patientId}/updates`);
               }
             }}
-            onCancel={() => goBack()}
+            onCancel={() =>
+              goBack(`/facility/${facilityId}/encounter/${encounterId}/updates`)
+            }
           />
         </CardContent>
       </Card>

src/components/Patient/PatientRegistration.tsx

@@ -717,7 +717,7 @@ export default function PatientRegistration(
               <Button
                 variant={"secondary"}
                 type="button"
-                onClick={() => goBack()}
+                onClick={() => goBack(`/facility/${facilityId}/patients`)}
               >
                 {t("cancel")}
               </Button>

src/components/Resource/ResourceCreate.tsx

@@ -440,7 +440,11 @@ export default function ResourceCreate(props: ResourceProps) {
                 <Button
                   type="button"
                   variant="outline"
-                  onClick={() => goBack()}
+                  onClick={() =>
+                    goBack(
+                      `/facility/${facilityId}/patient/${related_patient}/resource_requests`,
+                    )
+                  }
                 >
                   {t("cancel")}
                 </Button>

src/components/Resource/ResourceDetailsUpdate.tsx

@@ -302,7 +302,13 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
             </div>
 
             <div className="mt-4 flex flex-col justify-between gap-2 md:col-span-2 md:flex-row">
-              <Button type="button" variant="outline" onClick={() => goBack()}>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() =>
+                  goBack(`/facility/${props.facilityId}/resource/${props.id}`)
+                }
+              >
                 {t("cancel")}
               </Button>
               <Button type="submit" variant="primary" onClick={handleSubmit}>

src/pages/Appointments/BookAppointment.tsx

@@ -175,7 +175,15 @@ export default function BookAppointment(props: Props) {
           </div>
 
           <div className="flex justify-end gap-4">
-            <Button variant="outline" type="button" onClick={() => goBack()}>
+            <Button
+              variant="outline"
+              type="button"
+              onClick={() =>
+                goBack(
+                  `/facility/${props.facilityId}/patient/${props.patientId}/appointments`,
+                )
+              }
+            >
               {t("cancel")}
             </Button>
             <Button

src/pages/Facility/settings/organizations/FacilityOrganizationUsers.tsx

@@ -1,11 +1,11 @@
 import { useQuery } from "@tanstack/react-query";
-import { useQueryParams } from "raviger";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
 
 import { Avatar } from "@/components/Common/Avatar";
 import {
@@ -14,34 +14,46 @@ import {
 } from "@/components/Common/SkeletonLoading";
 import { UserStatusIndicator } from "@/components/Users/UserListAndCard";
 
+import useFilters from "@/hooks/useFilters";
+
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
+import EditFacilityUserRoleSheet from "@/pages/Facility/settings/organizations/components/EditFacilityUserRoleSheet";
+import FacilityOrganizationLayout from "@/pages/Facility/settings/organizations/components/FacilityOrganizationLayout";
+import LinkFacilityUserSheet from "@/pages/Facility/settings/organizations/components/LinkFacilityUserSheet";
 import AddUserSheet from "@/pages/Organization/components/AddUserSheet";
 import { OrganizationUserRole } from "@/types/organization/organization";
 
-import EditFacilityUserRoleSheet from "./components/EditFacilityUserRoleSheet";
-import FacilityOrganizationLayout from "./components/FacilityOrganizationLayout";
-import LinkFacilityUserSheet from "./components/LinkFacilityUserSheet";
-
 interface Props {
   id: string;
   facilityId: string;
 }
 
 export default function FacilityOrganizationUsers({ id, facilityId }: Props) {
-  const [qParams, setQueryParams] = useQueryParams<{
-    sheet: string;
-    username: string;
-  }>();
+  const { qParams, updateQuery, Pagination, resultsPerPage } = useFilters({
+    limit: 15,
+    cacheBlacklist: ["search"],
+  });
   const { t } = useTranslation();
 
   const openAddUserSheet = qParams.sheet === "add";
   const openLinkUserSheet = qParams.sheet === "link";
 
   const { data: users, isLoading: isLoadingUsers } = useQuery({
-    queryKey: ["facilityOrganizationUsers", facilityId, id],
-    queryFn: query(routes.facilityOrganization.listUsers, {
+    queryKey: [
+      "facilityOrganizationUsers",
+      facilityId,
+      id,
+      qParams.search,
+      qParams.page,
+    ],
+    queryFn: query.debounced(routes.facilityOrganization.listUsers, {
       pathParams: { facilityId, organizationId: id },
+      queryParams: {
+        username: qParams.search,
+        limit: resultsPerPage,
+        offset: ((qParams.page ?? 1) - 1) * resultsPerPage,
+      },
     }),
     enabled: !!id,
   });
@@ -66,27 +78,43 @@ export default function FacilityOrganizationUsers({ id, facilityId }: Props) {
   return (
     <FacilityOrganizationLayout id={id} facilityId={facilityId}>
       <div className="space-y-6">
-        <div className="flex justify-between items-center">
+        <div className="flex flex-col lg:flex-row justify-between item-start lg:items-center gap-4">
           <h2 className="text-lg font-semibold">{t("users")}</h2>
-          <div className="flex gap-2">
-            <AddUserSheet
-              open={openAddUserSheet}
-              setOpen={(open) => {
-                setQueryParams({ sheet: open ? "add" : "", username: "" });
-              }}
-              onUserCreated={(user) => {
-                setQueryParams({ sheet: "link", username: user.username });
-              }}
-            />
-            <LinkFacilityUserSheet
-              facilityId={facilityId}
-              organizationId={id}
-              open={openLinkUserSheet}
-              setOpen={(open) => {
-                setQueryParams({ sheet: open ? "link" : "", username: "" });
-              }}
-              preSelectedUsername={qParams.username}
-            />
+          <div className="flex flex-col items-center md:flex-row sm:items-center gap-4 w-full lg:justify-end">
+            <div className="w-full lg:w-1/3">
+              <Input
+                type="text"
+                placeholder={t("search_users")}
+                value={qParams.search || ""}
+                onChange={(e) =>
+                  updateQuery({
+                    search: e.target.value as string,
+                  })
+                }
+                className="w-full"
+                data-cy="search-user"
+              />
+            </div>
+            <div className="flex flex-row lg:flex-row justify-between gap-2">
+              <AddUserSheet
+                open={openAddUserSheet}
+                setOpen={(open) => {
+                  updateQuery({ sheet: open ? "add" : "" });
+                }}
+                onUserCreated={(user) => {
+                  updateQuery({ sheet: "link", username: user.username });
+                }}
+              />
+              <LinkFacilityUserSheet
+                facilityId={facilityId}
+                organizationId={id}
+                open={openLinkUserSheet}
+                setOpen={(open) => {
+                  updateQuery({ sheet: open ? "link" : "", username: "" });
+                }}
+                preSelectedUsername={qParams.username}
+              />
+            </div>
           </div>
         </div>
 
@@ -165,6 +193,8 @@ export default function FacilityOrganizationUsers({ id, facilityId }: Props) {
             ))
           )}
         </div>
+
+        <Pagination totalCount={users?.count || 0} />
       </div>
     </FacilityOrganizationLayout>
   );

src/pages/Patients/VerifyPatient.tsx

@@ -239,7 +239,7 @@ export default function VerifyPatient(props: { facilityId: string }) {
               <Button
                 variant={"primary_gradient"}
                 className="gap-3 group"
-                onClick={() => goBack()}
+                onClick={() => goBack(`/facility/${props.facilityId}/patients`)}
               >
                 {t("go_back")}
               </Button>

src/pages/PublicAppointments/Schedule.tsx

@@ -216,7 +216,7 @@ export function ScheduleAppointment(props: AppointmentsProps) {
           <Button
             variant="outline"
             className="border border-secondary-400"
-            onClick={() => goBack()}
+            onClick={() => goBack(`/facility/${facilityId}`)}
           >
             <span className="text-sm underline">{t("back")}</span>
           </Button>

src/pages/PublicAppointments/auth/PatientLogin.tsx

@@ -175,7 +175,12 @@ export default function PatientLogin({
                     {t("enter_the_verification_code")}
                   </FormLabel>
                   <FormControl>
-                    <InputOTP maxLength={5} {...field} className="focus:ring-0">
+                    <InputOTP
+                      maxLength={5}
+                      {...field}
+                      className="focus:ring-0"
+                      autoFocus
+                    >
                       <InputOTPGroup>
                         <InputOTPSlot index={0} />
                       </InputOTPGroup>
@@ -229,7 +234,7 @@ export default function PatientLogin({
         className="border border-secondary-400"
         onClick={() =>
           page === "send"
-            ? goBack()
+            ? goBack(`/facility/${facilityId}`)
             : navigate(
                 `/facility/${facilityId}/appointments/${staffId}/otp/send`,
               )