From 209632cd7ab671c53738a67aa5046c77cf93b6b3 Mon Sep 17 00:00:00 2001
From: mahendar <mahendarchikkolla@gmail.com>
Date: Thu, 13 Feb 2025 21:07:33 +0530
Subject: [PATCH 1/2] added phone number search for organization users

---
 src/pages/Organization/OrganizationUsers.tsx | 72 ++++++++++++++++----
 1 file changed, 58 insertions(+), 14 deletions(-)

diff --git a/src/pages/Organization/OrganizationUsers.tsx b/src/pages/Organization/OrganizationUsers.tsx
index 479059fa9a3..65faa7a572d 100644
--- a/src/pages/Organization/OrganizationUsers.tsx
+++ b/src/pages/Organization/OrganizationUsers.tsx
@@ -1,13 +1,14 @@
 import { useQuery } from "@tanstack/react-query";
+import { useCallback } from "react";
 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 SearchByMultipleFields from "@/components/Common/SearchByMultipleFields";
 import { CardGridSkeleton } from "@/components/Common/SkeletonLoading";
 import { UserStatusIndicator } from "@/components/Users/UserListAndCard";
 
@@ -30,19 +31,62 @@ interface Props {
 export default function OrganizationUsers({ id, navOrganizationId }: Props) {
   const { qParams, updateQuery, Pagination, resultsPerPage } = useFilters({
     limit: 15,
-    cacheBlacklist: ["search"],
+    cacheBlacklist: ["name", "phone_number"],
   });
   const { t } = useTranslation();
 
+  const searchOptions = [
+    {
+      key: "username",
+      type: "text" as const,
+      placeholder: "Search by username",
+      value: qParams.name || "",
+    },
+    {
+      key: "phone_number",
+      type: "phone" as const,
+      placeholder: "Search by phone number",
+      value: qParams.phone_number || "",
+    },
+  ];
+
+  const handleSearch = useCallback((key: string, value: string) => {
+    const searchParams = {
+      name: key === "username" ? value : "",
+      phone_number:
+        key === "phone_number"
+          ? value.length >= 13 || value === ""
+            ? value
+            : undefined
+          : undefined,
+    };
+    updateQuery(searchParams);
+  }, []);
+
+  const handleFieldChange = () => {
+    updateQuery({
+      name: undefined,
+      phone_number: undefined,
+    });
+  };
+
   const openAddUserSheet = qParams.sheet === "add";
   const openLinkUserSheet = qParams.sheet === "link";
 
   const { data: users, isFetching: isFetchingUsers } = useQuery({
-    queryKey: ["organizationUsers", id, qParams.search, qParams.page],
+    queryKey: [
+      "organizationUsers",
+      id,
+      qParams.name,
+      qParams.phone_number,
+      qParams.page,
+    ],
     queryFn: query.debounced(organizationApi.listUsers, {
       pathParams: { id },
       queryParams: {
-        username: qParams.search,
+        username: qParams.name,
+        phone_number: qParams.phone_number,
+        page: qParams.page,
         limit: resultsPerPage,
         offset: ((qParams.page ?? 1) - 1) * resultsPerPage,
       },
@@ -88,16 +132,16 @@ export default function OrganizationUsers({ id, navOrganizationId }: Props) {
           </div>
         </div>
         <div className="flex gap-2">
-          <Input
-            type="text"
-            placeholder="Search users..."
-            value={qParams.search || ""}
-            onChange={(e) =>
-              updateQuery({
-                search: e.target.value as string,
-              })
-            }
-            className="max-w-sm"
+          <SearchByMultipleFields
+            id="user-search"
+            options={searchOptions}
+            initialOptionIndex={Math.max(
+              searchOptions.findIndex((option) => option.value !== ""),
+              0,
+            )}
+            onSearch={handleSearch}
+            onFieldChange={handleFieldChange}
+            className="w-full"
             data-cy="search-user"
           />
         </div>

From a90295c79035d273409eb45d620dc40c6a700362 Mon Sep 17 00:00:00 2001
From: mahendar <mahendarchikkolla@gmail.com>
Date: Fri, 14 Feb 2025 17:57:20 +0530
Subject: [PATCH 2/2] coderabbit suggestions

---
 src/pages/Organization/OrganizationUsers.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/Organization/OrganizationUsers.tsx b/src/pages/Organization/OrganizationUsers.tsx
index 65faa7a572d..e05e6374097 100644
--- a/src/pages/Organization/OrganizationUsers.tsx
+++ b/src/pages/Organization/OrganizationUsers.tsx
@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
+import { isValidPhoneNumber } from "react-phone-number-input";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
@@ -55,7 +56,7 @@ export default function OrganizationUsers({ id, navOrganizationId }: Props) {
       name: key === "username" ? value : "",
       phone_number:
         key === "phone_number"
-          ? value.length >= 13 || value === ""
+          ? isValidPhoneNumber(value)
             ? value
             : undefined
           : undefined,