feat: add search for list pages

src/pages/Vehicle/VehicleListPage/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, languageStore, vehicleStore } from "@shared";
-import { useEffect, useState } from "react";
+import { authStore, carrierStore, languageStore, vehicleStore, SearchInput } from "@shared";
+import { useEffect, useState, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { Eye, Pencil, Trash2, Minus } from "lucide-react";
 import { useNavigate } from "react-router-dom";
@@ -24,6 +24,7 @@ export const VehicleListPage = observer(() => {
   });
   const { language } = languageStore;
   const canWriteVehicles = authStore.canWrite("devices");
+  const [searchQuery, setSearchQuery] = useState("");
 
   useEffect(() => {
     const fetchData = async () => {
@@ -136,27 +137,40 @@ export const VehicleListPage = observer(() => {
     },
   ];
 
-  const rows = vehicles.data?.map((vehicle) => ({
-    id: vehicle.vehicle.id,
-    tail_number: vehicle.vehicle.tail_number,
-    type: vehicle.vehicle.type,
-    carrier: vehicle.vehicle.carrier,
-    city: carriers[language].data?.find(
-      (carrier) => carrier.id === vehicle.vehicle.carrier_id
-    )?.city,
-  }));
+  const rows = useMemo(() => {
+    const query = searchQuery.toLowerCase();
+    return (vehicles.data ?? [])
+      .filter(
+        (vehicle) =>
+          !query ||
+          (vehicle.vehicle.tail_number ?? "").toLowerCase().includes(query) ||
+          (vehicle.vehicle.carrier ?? "").toLowerCase().includes(query)
+      )
+      .map((vehicle) => ({
+        id: vehicle.vehicle.id,
+        tail_number: vehicle.vehicle.tail_number,
+        type: vehicle.vehicle.type,
+        carrier: vehicle.vehicle.carrier,
+        city: carriers[language].data?.find(
+          (carrier) => carrier.id === vehicle.vehicle.carrier_id
+        )?.city,
+      }));
+  }, [vehicles.data, carriers[language].data, searchQuery]);
 
   return (
     <>
       <div style={{ width: "100%" }}>
         <div className="flex justify-between items-center mb-10">
           <h1 className="text-2xl">Транспортные средства</h1>
+
           <CreateButton
             label="Создать транспортное средство"
             path="/vehicle/create"
           />
         </div>
 
+        <SearchInput value={searchQuery} onChange={setSearchQuery} />
+
         {canWriteVehicles && ids.length > 0 && (
           <div className="flex justify-end mb-5 duration-300">
             <button