feat: add search for list pages

src/pages/User/UserListPage/index.tsx

@@ -1,7 +1,7 @@
 import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
 import { ruRU } from "@mui/x-data-grid/locales";
-import { authStore, userStore } from "@shared";
-import { useEffect, useState } from "react";
+import { authStore, userStore, SearchInput } from "@shared";
+import { useEffect, useState, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { Pencil, Trash2, Minus } from "lucide-react";
 import { useNavigate } from "react-router-dom";
@@ -21,6 +21,7 @@ export const UserListPage = observer(() => {
     pageSize: 50,
   });
   const canWriteUsers = authStore.canWrite("users");
+  const [searchQuery, setSearchQuery] = useState("");
 
   useEffect(() => {
     const fetchUsers = async () => {
@@ -107,12 +108,21 @@ export const UserListPage = observer(() => {
     }] : []),
   ];
 
-  const rows = users.data?.map((user) => ({
-    id: user.id,
-    email: user.email,
-    is_admin: user.is_admin || (user.roles ?? []).includes("admin"),
-    name: user.name,
-  }));
+  const rows = useMemo(() => {
+    const query = searchQuery.toLowerCase();
+    return (users.data ?? [])
+      .filter((user) =>
+        !query ||
+        (user.name ?? "").toLowerCase().includes(query) ||
+        (user.email ?? "").toLowerCase().includes(query)
+      )
+      .map((user) => ({
+        id: user.id,
+        email: user.email,
+        is_admin: user.is_admin || (user.roles ?? []).includes("admin"),
+        name: user.name,
+      }));
+  }, [users.data, searchQuery]);
 
   return (
     <>
@@ -136,6 +146,8 @@ export const UserListPage = observer(() => {
           </div>
         )}
 
+        <SearchInput value={searchQuery} onChange={setSearchQuery} />
+
         <DataGrid
           rows={rows}
           columns={columns}