feat: add search for list pages

src/pages/Carrier/CarrierListPage/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, carrierStore, cityStore, languageStore } from "@shared";
-import { useEffect, useState } from "react";
+import { authStore, carrierStore, cityStore, languageStore, 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";
@@ -22,6 +22,7 @@ export const CarrierListPage = observer(() => {
   });
   const { language } = languageStore;
   const canReadCities = authStore.canRead("cities");
+  const [searchQuery, setSearchQuery] = useState("");
 
   useEffect(() => {
     const fetchData = async () => {
@@ -119,16 +120,23 @@ export const CarrierListPage = observer(() => {
 
   const canWriteCarriers = authStore.canWrite("carriers");
 
-  const rows = carriers[language].data
-    ?.filter((carrier) =>
-      !allowedCityIds || allowedCityIds.includes(carrier.city_id),
-    )
-    .map((carrier) => ({
-      id: carrier.id,
-      full_name: carrier.full_name,
-      short_name: carrier.short_name,
-      city_id: carrier.city_id,
-    }));
+  const rows = useMemo(() => {
+    const query = searchQuery.toLowerCase();
+    return (carriers[language].data ?? [])
+      .filter((carrier) => !allowedCityIds || allowedCityIds.includes(carrier.city_id))
+      .filter(
+        (carrier) =>
+          !query ||
+          (carrier.full_name ?? "").toLowerCase().includes(query) ||
+          (carrier.short_name ?? "").toLowerCase().includes(query)
+      )
+      .map((carrier) => ({
+        id: carrier.id,
+        full_name: carrier.full_name,
+        short_name: carrier.short_name,
+        city_id: carrier.city_id,
+      }));
+  }, [carriers[language].data, searchQuery, allowedCityIds]);
 
   return (
     <>
@@ -153,6 +161,8 @@ export const CarrierListPage = observer(() => {
           </div>
         )}
 
+        <SearchInput value={searchQuery} onChange={setSearchQuery} />
+
         <DataGrid
           rows={rows}
           columns={columns}