Fix: Loses focus on User Search in users tab

cypress/pageobject/Users/UserSearch.ts

@@ -83,6 +83,6 @@ export class UserPage {
   }
 
   verifyListView() {
-    cy.get("#user-list-view").should("have.class", "text-white");
+    cy.get("#user-list-view").should("have.attr", "data-state", "active");
   }
 }

package.json

@@ -65,6 +65,7 @@
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.2",
     "@radix-ui/react-toast": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.1.6",
     "@sentry/browser": "^8.47.0",

src/components/Facility/FacilityUsers.tsx

@@ -2,8 +2,14 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import CountBlock from "@/CAREUI/display/Count";
+import CareIcon from "@/CAREUI/icons/CareIcon";
 
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+import Loading from "@/components/Common/Loading";
 import Page from "@/components/Common/Page";
+import SearchByMultipleFields from "@/components/Common/SearchByMultipleFields";
+// import Tabs from "@/components/Common/Tabs";
 import UserListView from "@/components/Users/UserListAndCard";
 
 import useFilters from "@/hooks/useFilters";
@@ -13,11 +19,14 @@ import useTanStackQueryInstead from "@/Utils/request/useQuery";
 
 export default function FacilityUsers(props: { facilityId: number }) {
   const { t } = useTranslation();
+
+  let usersList: JSX.Element = <></>;
+
   const { qParams, updateQuery, Pagination, resultsPerPage } = useFilters({
     limit: 18,
     cacheBlacklist: ["username"],
   });
-  const [activeTab, setActiveTab] = useState(0);
+  const [activeTab, setActiveTab] = useState("cardView");
   const { facilityId } = props;
 
   const { data: facilityData } = useTanStackQueryInstead(
@@ -43,6 +52,20 @@ export default function FacilityUsers(props: { facilityId: number }) {
       prefetch: facilityId !== undefined,
     });
 
+  if (userListLoading || !userListData) {
+    usersList = <Loading />;
+  } else {
+    usersList = (
+      <div>
+        <UserListView
+          users={userListData?.results ?? []}
+          activeTab={activeTab}
+        />
+        <Pagination totalCount={userListData.count} />
+      </div>
+    );
+  }
+
   return (
     <Page
       title={`${t("users")} - ${facilityData?.name}`}
@@ -56,16 +79,42 @@ export default function FacilityUsers(props: { facilityId: number }) {
         icon="d-people"
         className="my-3 flex flex-col items-center sm:items-start"
       />
-
-      <UserListView
-        users={userListData?.results ?? []}
-        onSearch={(username) => updateQuery({ username })}
-        searchValue={qParams.username}
-        activeTab={activeTab}
-        onTabChange={setActiveTab}
-      />
-
-      <Pagination totalCount={userListData?.count ?? 0} />
+      <div className="mb-4 flex flex-col items-center justify-between gap-3 sm:flex-row">
+        <div className="flex-grow w-full">
+          <SearchByMultipleFields
+            id="search-by-username"
+            className="w-full"
+            onSearch={(key, value) => updateQuery({ username: value })}
+            options={[
+              {
+                key: "username",
+                label: "username",
+                type: "text" as const,
+                placeholder: t("search_by_username"),
+                value: qParams.username || "",
+                shortcutKey: "u",
+              },
+            ]}
+          />
+        </div>
+        <Tabs value={activeTab} onValueChange={setActiveTab}>
+          <TabsList>
+            <TabsTrigger value="cardView" id="user-card-view">
+              <div className="flex items-center gap-2">
+                <CareIcon icon="l-credit-card" className="text-lg" />
+                <span>Card</span>
+              </div>
+            </TabsTrigger>
+            <TabsTrigger value="listView" id="user-list-view">
+              <div className="flex items-center gap-2">
+                <CareIcon icon="l-list-ul" className="text-lg" />
+                <span>List</span>
+              </div>
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+      <div>{usersList}</div>
     </Page>
   );
 }

src/components/Users/ManageUsers.tsx

@@ -6,9 +6,13 @@ import CountBlock from "@/CAREUI/display/Count";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 import { AdvancedFilterButton } from "@/CAREUI/interactive/FiltersSlideover";
 
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
 import ButtonV2 from "@/components/Common/ButtonV2";
 import Loading from "@/components/Common/Loading";
 import Page from "@/components/Common/Page";
+import SearchByMultipleFields from "@/components/Common/SearchByMultipleFields";
+// import Tabs from "@/components/Common/Tabs";
 import UserFilter from "@/components/Users/UserFilter";
 import UserListView from "@/components/Users/UserListAndCard";
 
@@ -29,17 +33,18 @@ export default function ManageUsers() {
     FilterBadges,
     advancedFilter,
     resultsPerPage,
+    clearSearch,
   } = useFilters({
     limit: 18,
     cacheBlacklist: ["username"],
   });
-  let manageUsers: JSX.Element = <></>;
+  let usersList: JSX.Element = <></>;
   const authUser = useAuthUser();
   const userIndex = USER_TYPES.indexOf(authUser.user_type);
   const userTypes = authUser.is_superuser
     ? [...USER_TYPES]
     : USER_TYPES.slice(0, userIndex + 1);
-  const [activeTab, setActiveTab] = useState(0);
+  const [activeTab, setActiveTab] = useState("cardView");
 
   const { data: homeFacilityData } = useTanStackQueryInstead(
     routes.getAnyFacility,
@@ -94,23 +99,20 @@ export default function ManageUsers() {
     </ButtonV2>
   );
 
-  if (userListLoading || districtDataLoading || !userListData?.results) {
-    return <Loading />;
+  if (userListLoading || districtDataLoading || !userListData) {
+    usersList = <Loading />;
+  } else {
+    usersList = (
+      <div>
+        <UserListView
+          users={userListData?.results ?? []}
+          activeTab={activeTab}
+        />
+        <Pagination totalCount={userListData.count} />
+      </div>
+    );
   }
 
-  manageUsers = (
-    <div>
-      <UserListView
-        users={userListData?.results ?? []}
-        onSearch={(username) => updateQuery({ username })}
-        searchValue={qParams.username}
-        activeTab={activeTab}
-        onTabChange={setActiveTab}
-      />
-      <Pagination totalCount={userListData.count} />
-    </div>
-  );
-
   return (
     <Page title={t("user_management")} hideBack={true} breadcrumbs={false}>
       <div className="mt-5 flex flex-col items-center justify-between gap-3 sm:flex-row">
@@ -170,7 +172,43 @@ export default function ManageUsers() {
       </div>
 
       <div className="pt-4">
-        <div>{manageUsers}</div>
+        <div className="mb-4 flex flex-col items-center justify-between gap-3 sm:flex-row">
+          <div className="flex-grow w-full">
+            <SearchByMultipleFields
+              id="search-by-username"
+              className="w-full"
+              onSearch={(key, value) => updateQuery({ username: value })}
+              options={[
+                {
+                  key: "username",
+                  label: "username",
+                  type: "text" as const,
+                  placeholder: t("search_by_username"),
+                  value: qParams.username || "",
+                  shortcutKey: "u",
+                },
+              ]}
+              clearSearch={clearSearch}
+            />
+          </div>
+          <Tabs value={activeTab} onValueChange={setActiveTab}>
+            <TabsList>
+              <TabsTrigger value="cardView" id="user-card-view">
+                <div className="flex items-center gap-2">
+                  <CareIcon icon="l-credit-card" className="text-lg" />
+                  <span>Card</span>
+                </div>
+              </TabsTrigger>
+              <TabsTrigger value="listView" id="user-list-view">
+                <div className="flex items-center gap-2" id="user-list-view">
+                  <CareIcon icon="l-list-ul" className="text-lg" />
+                  <span>List</span>
+                </div>
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+        <div>{usersList}</div>
       </div>
     </Page>
   );