feat: pagination for tables with deleted station directions

src/app/router/index.tsx

@@ -22,6 +22,7 @@ import {
   CityCreatePage,
   CarrierCreatePage,
   VehicleCreatePage,
+  VehicleEditPage,
   CountryEditPage,
   CityEditPage,
   UserCreatePage,
@@ -153,6 +154,7 @@ const router = createBrowserRouter([
       { path: "station/:id", element: <StationPreviewPage /> },
       { path: "station/:id/edit", element: <StationEditPage /> },
       { path: "vehicle/create", element: <VehicleCreatePage /> },
+      { path: "vehicle/:id/edit", element: <VehicleEditPage /> },
       { path: "article", element: <ArticleListPage /> },
       { path: "article/:id", element: <ArticlePreviewPage /> },
     ],

src/pages/Article/ArticleListPage/index.tsx

@@ -17,6 +17,10 @@ export const ArticleListPage = observer(() => {
   const { language } = languageStore;
   const [ids, setIds] = useState<number[]>([]);
   const [isLoading, setIsLoading] = useState(false);
+  const [paginationModel, setPaginationModel] = useState({
+    page: 0,
+    pageSize: 50,
+  });
 
   useEffect(() => {
     const fetchArticles = async () => {
@@ -83,31 +87,41 @@ export const ArticleListPage = observer(() => {
           <h1 className="text-2xl">Статьи</h1>
         </div>
 
-        <div
+        {ids.length > 0 && (
-          className="flex justify-end mb-5 duration-300"
+          <div className="flex justify-end mb-5 duration-300">
-          style={{ opacity: ids.length > 0 ? 1 : 0 }}
+            <button
-        >
+              className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
-          <button
+              onClick={() => setIsBulkDeleteModalOpen(true)}
-            className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
+            >
-            onClick={() => setIsBulkDeleteModalOpen(true)}
+              <Trash2 size={20} className="text-white" /> Удалить выбранные (
-          >
+              {ids.length})
-            <Trash2 size={20} className="text-white" /> Удалить выбранные (
+            </button>
-            {ids.length})
+          </div>
-          </button>
+        )}
-        </div>
 
         <div className="w-full">
           <DataGrid
             rows={rows}
             columns={columns}
-            hideFooterPagination
             checkboxSelection
+            disableRowSelectionExcludeModel
             loading={isLoading}
+            paginationModel={paginationModel}
+            onPaginationModelChange={setPaginationModel}
+            pageSizeOptions={[50]}
             localeText={ruRU.components.MuiDataGrid.defaultProps.localeText}
-            onRowSelectionModelChange={(newSelection) => {
+            onRowSelectionModelChange={(newSelection: any) => {
-              setIds(Array.from(newSelection.ids) as number[]);
+              if (Array.isArray(newSelection)) {
+                const selectedIds = newSelection.map((id: string | number) => Number(id));
+                setIds(selectedIds);
+              } else if (newSelection && typeof newSelection === 'object' && 'ids' in newSelection) {
+                const idsSet = newSelection.ids as Set<string | number>;
+                const selectedIds = Array.from(idsSet).map((id: string | number) => Number(id));
+                setIds(selectedIds);
+              } else {
+                setIds([]);
+              }
             }}
-            hideFooter
             slots={{
               noRowsOverlay: () => (
                 <Box

src/pages/Carrier/CarrierListPage/index.tsx

@@ -17,6 +17,10 @@ export const CarrierListPage = observer(() => {
   const [rowId, setRowId] = useState<number | null>(null);
   const [ids, setIds] = useState<number[]>([]);
   const [isLoading, setIsLoading] = useState(false);
+  const [paginationModel, setPaginationModel] = useState({
+    page: 0,
+    pageSize: 50,
+  });
   const { language } = languageStore;
 
   useEffect(() => {
@@ -129,28 +133,39 @@ export const CarrierListPage = observer(() => {
           <CreateButton label="Создать перевозчика" path="/carrier/create" />
         </div>
 
-        <div
+        {ids.length > 0 && (
-          className="flex justify-end mb-5 duration-300"
+          <div className="flex justify-end mb-5 duration-300">
-          style={{ opacity: ids.length > 0 ? 1 : 0 }}
+            <button
-        >
+              className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
-          <button
+              onClick={() => setIsBulkDeleteModalOpen(true)}
-            className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
+            >
-            onClick={() => setIsBulkDeleteModalOpen(true)}
+              <Trash2 size={20} className="text-white" /> Удалить выбранные (
-          >
+              {ids.length})
-            <Trash2 size={20} className="text-white" /> Удалить выбранные (
+            </button>
-            {ids.length})
+          </div>
-          </button>
+        )}
-        </div>
 
         <DataGrid
           rows={rows}
           columns={columns}
-          hideFooter
           checkboxSelection
+          disableRowSelectionExcludeModel
           loading={isLoading}
+          paginationModel={paginationModel}
+          onPaginationModelChange={setPaginationModel}
+          pageSizeOptions={[50]}
           localeText={ruRU.components.MuiDataGrid.defaultProps.localeText}
-          onRowSelectionModelChange={(newSelection) => {
+          onRowSelectionModelChange={(newSelection: any) => {
-            setIds(Array.from(newSelection.ids as unknown as number[]));
+            if (Array.isArray(newSelection)) {
+              const selectedIds = newSelection.map((id: string | number) => Number(id));
+              setIds(selectedIds);
+            } else if (newSelection && typeof newSelection === 'object' && 'ids' in newSelection) {
+              const idsSet = newSelection.ids as Set<string | number>;
+              const selectedIds = Array.from(idsSet).map((id: string | number) => Number(id));
+              setIds(selectedIds);
+            } else {
+              setIds([]);
+            }
           }}
           slots={{
             noRowsOverlay: () => (

src/pages/City/CityListPage/index.tsx

@@ -18,6 +18,10 @@ export const CityListPage = observer(() => {
   const [ids, setIds] = useState<number[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [rows, setRows] = useState<any[]>([]);
+  const [paginationModel, setPaginationModel] = useState({
+    page: 0,
+    pageSize: 50,
+  });
   const { language } = languageStore;
 
   useEffect(() => {
@@ -128,28 +132,39 @@ export const CityListPage = observer(() => {
           <CreateButton label="Создать город" path="/city/create" />
         </div>
 
-        <div
+        {ids.length > 0 && (
-          className="flex justify-end mb-5 duration-300"
+          <div className="flex justify-end mb-5 duration-300">
-          style={{ opacity: ids.length > 0 ? 1 : 0 }}
+            <button
-        >
+              className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
-          <button
+              onClick={() => setIsBulkDeleteModalOpen(true)}
-            className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
+            >
-            onClick={() => setIsBulkDeleteModalOpen(true)}
+              <Trash2 size={20} className="text-white" /> Удалить выбранные (
-          >
+              {ids.length})
-            <Trash2 size={20} className="text-white" /> Удалить выбранные (
+            </button>
-            {ids.length})
+          </div>
-          </button>
+        )}
-        </div>
 
         <DataGrid
           rows={rows}
           columns={columns}
-          hideFooter
           checkboxSelection
+          disableRowSelectionExcludeModel
           loading={isLoading}
+          paginationModel={paginationModel}
+          onPaginationModelChange={setPaginationModel}
+          pageSizeOptions={[50]}
           localeText={ruRU.components.MuiDataGrid.defaultProps.localeText}
-          onRowSelectionModelChange={(newSelection) => {
+          onRowSelectionModelChange={(newSelection: any) => {
-            setIds(Array.from(newSelection.ids as unknown as number[]));
+            if (Array.isArray(newSelection)) {
+              const selectedIds = newSelection.map((id: string | number) => Number(id));
+              setIds(selectedIds);
+            } else if (newSelection && typeof newSelection === 'object' && 'ids' in newSelection) {
+              const idsSet = newSelection.ids as Set<string | number>;
+              const selectedIds = Array.from(idsSet).map((id: string | number) => Number(id));
+              setIds(selectedIds);
+            } else {
+              setIds([]);
+            }
           }}
           slots={{
             noRowsOverlay: () => (

src/pages/Country/CountryListPage/index.tsx

@@ -16,6 +16,10 @@ export const CountryListPage = observer(() => {
   const [rowId, setRowId] = useState<string | null>(null);
   const [ids, setIds] = useState<number[]>([]);
   const [isLoading, setIsLoading] = useState(false);
+  const [paginationModel, setPaginationModel] = useState({
+    page: 0,
+    pageSize: 50,
+  });
   const { language } = languageStore;
 
   useEffect(() => {
@@ -93,28 +97,39 @@ export const CountryListPage = observer(() => {
           <CreateButton label="Добавить страну" path="/country/add" />
         </div>
 
-        <div
+        {ids.length > 0 && (
-          className="flex justify-end mb-5 duration-300"
+          <div className="flex justify-end mb-5 duration-300">
-          style={{ opacity: ids.length > 0 ? 1 : 0 }}
+            <button
-        >
+              className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
-          <button
+              onClick={() => setIsBulkDeleteModalOpen(true)}
-            className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
+            >
-            onClick={() => setIsBulkDeleteModalOpen(true)}
+              <Trash2 size={20} className="text-white" /> Удалить выбранные (
-          >
+              {ids.length})
-            <Trash2 size={20} className="text-white" /> Удалить выбранные (
+            </button>
-            {ids.length})
+          </div>
-          </button>
+        )}
-        </div>
 
         <DataGrid
           rows={rows || []}
           columns={columns}
-          hideFooter
           checkboxSelection
+          disableRowSelectionExcludeModel
           loading={isLoading}
+          paginationModel={paginationModel}
+          onPaginationModelChange={setPaginationModel}
+          pageSizeOptions={[50]}
           localeText={ruRU.components.MuiDataGrid.defaultProps.localeText}
-          onRowSelectionModelChange={(newSelection) => {
+          onRowSelectionModelChange={(newSelection: any) => {
-            setIds(Array.from(newSelection.ids as unknown as number[]));
+            if (Array.isArray(newSelection)) {
+              const selectedIds = newSelection.map((id: string | number) => Number(id));
+              setIds(selectedIds);
+            } else if (newSelection && typeof newSelection === 'object' && 'ids' in newSelection) {
+              const idsSet = newSelection.ids as Set<string | number>;
+              const selectedIds = Array.from(idsSet).map((id: string | number) => Number(id));
+              setIds(selectedIds);
+            } else {
+              setIds([]);
+            }
           }}
           slots={{
             noRowsOverlay: () => (

src/pages/Media/MediaListPage/index.tsx

@@ -16,6 +16,10 @@ export const MediaListPage = observer(() => {
   const [rowId, setRowId] = useState<string | null>(null);
   const [ids, setIds] = useState<string[]>([]);
   const [isLoading, setIsLoading] = useState(false);
+  const [paginationModel, setPaginationModel] = useState({
+    page: 0,
+    pageSize: 50,
+  });
   const { language } = languageStore;
 
   useEffect(() => {
@@ -100,29 +104,39 @@ export const MediaListPage = observer(() => {
   return (
     <>
       <div className="w-full">
-        <div
+        {ids.length > 0 && (
-          className="flex justify-end mb-5 duration-300"
+          <div className="flex justify-end mb-5 duration-300">
-          style={{ opacity: ids.length > 0 ? 1 : 0 }}
+            <button
-        >
+              className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
-          <button
+              onClick={() => setIsBulkDeleteModalOpen(true)}
-            className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
+            >
-            onClick={() => setIsBulkDeleteModalOpen(true)}
+              <Trash2 size={20} className="text-white" /> Удалить выбранные (
-          >
+              {ids.length})
-            <Trash2 size={20} className="text-white" /> Удалить выбранные (
+            </button>
-            {ids.length})
+          </div>
-          </button>
+        )}
-        </div>
 
         <DataGrid
           rows={rows}
           columns={columns}
-          hideFooterPagination
           checkboxSelection
+          disableRowSelectionExcludeModel
           loading={isLoading}
-          onRowSelectionModelChange={(newSelection) => {
+          paginationModel={paginationModel}
-            setIds(Array.from(newSelection.ids) as string[]);
+          onPaginationModelChange={setPaginationModel}
+          pageSizeOptions={[50]}
+          onRowSelectionModelChange={(newSelection: any) => {
+            if (Array.isArray(newSelection)) {
+              const selectedIds = newSelection.map((id: string | number) => String(id));
+              setIds(selectedIds);
+            } else if (newSelection && typeof newSelection === 'object' && 'ids' in newSelection) {
+              const idsSet = newSelection.ids as Set<string | number>;
+              const selectedIds = Array.from(idsSet).map((id: string | number) => String(id));
+              setIds(selectedIds);
+            } else {
+              setIds([]);
+            }
           }}
-          hideFooter
           localeText={ruRU.components.MuiDataGrid.defaultProps.localeText}
           slots={{
             noRowsOverlay: () => (

src/pages/Route/LinekedStations.tsx

@@ -78,7 +78,6 @@ type LinkedItemsProps<T> = {
   disableCreation?: boolean;
   updatedLinkedItems?: T[];
   refresh?: number;
-  routeDirection?: boolean;
 };
 
 export const LinkedItems = <
@@ -128,7 +127,6 @@ const LinkedItemsContentsInner = <
   disableCreation = false,
   updatedLinkedItems,
   refresh,
-  routeDirection,
 }: LinkedItemsProps<T>) => {
   const { language } = languageStore;
 
@@ -153,11 +151,6 @@ const LinkedItemsContentsInner = <
 
   const availableItems = allItems
     .filter((item) => !linkedItems.some((linked) => linked.id === item.id))
-    .filter((item) => {
-      if (routeDirection === undefined) return true;
-
-      return item.direction === routeDirection;
-    })
     .filter((item) => {
       const selectedCityId = selectedCityStore.selectedCityId;
       if (selectedCityId && "city_id" in item) {
@@ -513,12 +506,6 @@ const LinkedItemsContentsInner = <
       {type === "edit" && !disableCreation && (
         <Stack gap={2} mt={2}>
           <Typography variant="subtitle1">Добавить остановки</Typography>
-          {routeDirection !== undefined && (
-            <Typography variant="body2" color="textSecondary">
-              Показываются только остановки для{" "}
-              {routeDirection ? "прямого" : "обратного"} направления
-            </Typography>
-          )}
 
           <Tabs
             value={activeTab}
@@ -547,6 +534,7 @@ const LinkedItemsContentsInner = <
                     <TextField
                       {...params}
                       label="Выберите остановку"
+                      placeholder="Введите название или описание остановки..."
                       fullWidth
                     />
                   )}
@@ -554,16 +542,15 @@ const LinkedItemsContentsInner = <
                     option.id === value?.id
                   }
                   filterOptions={(options, { inputValue }) => {
-                    const searchWords = inputValue
+                    if (!inputValue.trim()) return options;
-                      .toLowerCase()
+                    const query = inputValue.toLowerCase();
-                      .split(" ")
-                      .filter(Boolean);
                     return options.filter((option) => {
-                      const optionWords = String(option.name)
+                      const name = String(option.name || "").toLowerCase();
-                        .toLowerCase()
+                      const description = String(
-                        .split(" ");
+                        option.description || ""
-                      return searchWords.every((searchWord) =>
+                      ).toLowerCase();
-                        optionWords.some((word) => word.startsWith(searchWord))
+                      return (
+                        name.includes(query) || description.includes(query)
                       );
                     });
                   }}

src/pages/Route/RouteEditPage/index.tsx

@@ -575,7 +575,6 @@ export const RouteEditPage = observer(() => {
           onUpdate={() => {
             routeStore.getRoute(Number(id));
           }}
-          routeDirection={editRouteData.route_direction}
         />
 
         <div className="flex w-full justify-between">

src/pages/Route/RouteListPage/index.tsx

@@ -17,6 +17,10 @@ export const RouteListPage = observer(() => {
   const [rowId, setRowId] = useState<number | null>(null);
   const [ids, setIds] = useState<number[]>([]);
   const [isLoading, setIsLoading] = useState(false);
+  const [paginationModel, setPaginationModel] = useState({
+    page: 0,
+    pageSize: 50,
+  });
   const { language } = languageStore;
 
   useEffect(() => {
@@ -149,28 +153,39 @@ export const RouteListPage = observer(() => {
           <CreateButton label="Создать маршрут" path="/route/create" />
         </div>
 
-        <div
+        {ids.length > 0 && (
-          className="flex justify-end mb-5 duration-300"
+          <div className="flex justify-end mb-5 duration-300">
-          style={{ opacity: ids.length > 0 ? 1 : 0 }}
+            <button
-        >
+              className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
-          <button
+              onClick={() => setIsBulkDeleteModalOpen(true)}
-            className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
+            >
-            onClick={() => setIsBulkDeleteModalOpen(true)}
+              <Trash2 size={20} className="text-white" /> Удалить выбранные (
-          >
+              {ids.length})
-            <Trash2 size={20} className="text-white" /> Удалить выбранные (
+            </button>
-            {ids.length})
+          </div>
-          </button>
+        )}
-        </div>
 
         <DataGrid
           rows={rows}
           columns={columns}
-          hideFooter
           checkboxSelection
+          disableRowSelectionExcludeModel
           loading={isLoading}
+          paginationModel={paginationModel}
+          onPaginationModelChange={setPaginationModel}
+          pageSizeOptions={[50]}
           localeText={ruRU.components.MuiDataGrid.defaultProps.localeText}
-          onRowSelectionModelChange={(newSelection) => {
+          onRowSelectionModelChange={(newSelection: any) => {
-            setIds(Array.from(newSelection.ids as unknown as number[]));
+            if (Array.isArray(newSelection)) {
+              const selectedIds = newSelection.map((id: string | number) => Number(id));
+              setIds(selectedIds);
+            } else if (newSelection && typeof newSelection === 'object' && 'ids' in newSelection) {
+              const idsSet = newSelection.ids as Set<string | number>;
+              const selectedIds = Array.from(idsSet).map((id: string | number) => Number(id));
+              setIds(selectedIds);
+            } else {
+              setIds([]);
+            }
           }}
           slots={{
             noRowsOverlay: () => (

src/pages/Sight/SightListPage/index.tsx

@@ -22,6 +22,10 @@ export const SightListPage = observer(() => {
   const [rowId, setRowId] = useState<string | null>(null);
   const [ids, setIds] = useState<number[]>([]);
   const [isLoading, setIsLoading] = useState(false);
+  const [paginationModel, setPaginationModel] = useState({
+    page: 0,
+    pageSize: 50,
+  });
   const { language } = languageStore;
 
   useEffect(() => {
@@ -98,7 +102,6 @@ export const SightListPage = observer(() => {
     },
   ];
 
-  // Фильтрация достопримечательностей по выбранному городу
   const filteredSights = useMemo(() => {
     const { selectedCityId } = selectedCityStore;
     if (!selectedCityId) {
@@ -126,28 +129,39 @@ export const SightListPage = observer(() => {
           />
         </div>
 
-        <div
+        {ids.length > 0 && (
-          className="flex justify-end mb-5 duration-300"
+          <div className="flex justify-end mb-5 duration-300">
-          style={{ opacity: ids.length > 0 ? 1 : 0 }}
+            <button
-        >
+              className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
-          <button
+              onClick={() => setIsBulkDeleteModalOpen(true)}
-            className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
+            >
-            onClick={() => setIsBulkDeleteModalOpen(true)}
+              <Trash2 size={20} className="text-white" /> Удалить выбранные (
-          >
+              {ids.length})
-            <Trash2 size={20} className="text-white" /> Удалить выбранные (
+            </button>
-            {ids.length})
+          </div>
-          </button>
+        )}
-        </div>
 
         <DataGrid
           rows={rows}
           columns={columns}
-          hideFooter
           checkboxSelection
+          disableRowSelectionExcludeModel
           loading={isLoading}
+          paginationModel={paginationModel}
+          onPaginationModelChange={setPaginationModel}
+          pageSizeOptions={[50]}
           localeText={ruRU.components.MuiDataGrid.defaultProps.localeText}
-          onRowSelectionModelChange={(newSelection) => {
+          onRowSelectionModelChange={(newSelection: any) => {
-            setIds(Array.from(newSelection.ids as unknown as number[]));
+            if (Array.isArray(newSelection)) {
+              const selectedIds = newSelection.map((id: string | number) => Number(id));
+              setIds(selectedIds);
+            } else if (newSelection && typeof newSelection === 'object' && 'ids' in newSelection) {
+              const idsSet = newSelection.ids as Set<string | number>;
+              const selectedIds = Array.from(idsSet).map((id: string | number) => Number(id));
+              setIds(selectedIds);
+            } else {
+              setIds([]);
+            }
           }}
           slots={{
             noRowsOverlay: () => (

src/pages/Snapshot/SnapshotListPage/index.tsx

@@ -12,10 +12,14 @@ export const SnapshotListPage = observer(() => {
     snapshotStore;
 
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const [rowId, setRowId] = useState<string | null>(null); // Lifted state
+  const [rowId, setRowId] = useState<string | null>(null);
   const { language } = languageStore;
   const [isRestoreModalOpen, setIsRestoreModalOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const [paginationModel, setPaginationModel] = useState({
+    page: 0,
+    pageSize: 50,
+  });
 
   useEffect(() => {
     const fetchSnapshots = async () => {
@@ -87,9 +91,10 @@ export const SnapshotListPage = observer(() => {
         <DataGrid
           rows={rows}
           columns={columns}
-          hideFooterPagination
-          hideFooter
           loading={isLoading}
+          paginationModel={paginationModel}
+          onPaginationModelChange={setPaginationModel}
+          pageSizeOptions={[50]}
           localeText={ruRU.components.MuiDataGrid.defaultProps.localeText}
           slots={{
             noRowsOverlay: () => (

src/pages/Station/StationCreatePage/index.tsx

@@ -136,23 +136,6 @@ export const StationCreatePage = observer(() => {
           }
         />
 
-        <FormControl fullWidth>
-          <InputLabel id="direction-label">Прямой/обратный маршрут</InputLabel>
-          <Select
-            labelId="direction-label"
-            value={createStationData.common.direction ? "Прямой" : "Обратный"}
-            label="Прямой/обратный маршрут"
-            onChange={(e) =>
-              setCreateCommonData({
-                direction: e.target.value === "Прямой",
-              })
-            }
-          >
-            <MenuItem value="Прямой">Прямой</MenuItem>
-            <MenuItem value="Обратный">Обратный</MenuItem>
-          </Select>
-        </FormControl>
-
         <TextField
           fullWidth
           label="Описание"

src/pages/Station/StationEditPage/index.tsx

@@ -162,23 +162,6 @@ export const StationEditPage = observer(() => {
           }
         />
 
-        <FormControl fullWidth>
-          <InputLabel id="direction-label">Прямой/обратный маршрут</InputLabel>
-          <Select
-            labelId="direction-label"
-            value={editStationData.common.direction ? "Прямой" : "Обратный"}
-            label="Прямой/обратный маршрут"
-            onChange={(e) =>
-              setEditCommonData({
-                direction: e.target.value === "Прямой",
-              })
-            }
-          >
-            <MenuItem value="Прямой">Прямой</MenuItem>
-            <MenuItem value="Обратный">Обратный</MenuItem>
-          </Select>
-        </FormControl>
-
         <TextField
           fullWidth
           label="Описание"

src/pages/Station/StationListPage/index.tsx

@@ -30,6 +30,10 @@ export const StationListPage = observer(() => {
   );
   const [ids, setIds] = useState<number[]>([]);
   const [isLoading, setIsLoading] = useState(false);
+  const [paginationModel, setPaginationModel] = useState({
+    page: 0,
+    pageSize: 50,
+  });
   const { language } = languageStore;
 
   useEffect(() => {
@@ -75,25 +79,6 @@ export const StationListPage = observer(() => {
         );
       },
     },
-    {
-      field: "direction",
-      headerName: "Направление",
-      width: 200,
-      align: "center",
-      headerAlign: "center",
-
-      renderCell: (params: GridRenderCellParams) => {
-        return (
-          <p
-            className={
-              params.row.direction === true ? "text-green-500" : "text-red-500"
-            }
-          >
-            {params.row.direction ? "Прямой" : "Обратный"}
-          </p>
-        );
-      },
-    },
     {
       field: "actions",
       headerName: "Действия",
@@ -134,7 +119,6 @@ export const StationListPage = observer(() => {
     },
   ];
 
-  // Фильтрация станций по выбранному городу
   const filteredStations = () => {
     const { selectedCityId } = selectedCityStore;
     if (!selectedCityId) {
@@ -149,7 +133,6 @@ export const StationListPage = observer(() => {
     id: station.id,
     name: station.name,
     description: station.description,
-    direction: station.direction,
   }));
 
   return (
@@ -162,29 +145,75 @@ export const StationListPage = observer(() => {
           <CreateButton label="Создать остановки" path="/station/create" />
         </div>
 
-        <div
+        <div className="flex justify-end mb-5 duration-300">
-          className="flex justify-end mb-5 duration-300"
-          style={{ opacity: ids.length > 0 ? 1 : 0 }}
-        >
           <button
-            className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
+            className={`px-4 py-2 rounded flex gap-2 items-center transition-all ${
-            onClick={() => setIsBulkDeleteModalOpen(true)}
+              ids.length > 0
+                ? "bg-red-500 text-white cursor-pointer opacity-100"
+                : "bg-gray-300 text-gray-500 cursor-not-allowed opacity-0 pointer-events-none"
+            }`}
+            onClick={() => {
+              if (ids.length > 0) {
+                setIsBulkDeleteModalOpen(true);
+              }
+            }}
+            disabled={ids.length === 0}
           >
-            <Trash2 size={20} className="text-white" /> Удалить выбранные (
+            <Trash2
-            {ids.length})
+              size={20}
+              className={ids.length > 0 ? "text-white" : "text-gray-500"}
+            />
+            Удалить выбранные ({ids.length})
           </button>
         </div>
 
         <DataGrid
           rows={rows}
           columns={columns}
-          hideFooterPagination
           checkboxSelection
+          disableRowSelectionExcludeModel
           loading={isLoading}
-          onRowSelectionModelChange={(newSelection) => {
+          paginationModel={paginationModel}
-            setIds(Array.from(newSelection.ids) as number[]);
+          onPaginationModelChange={setPaginationModel}
+          pageSizeOptions={[50]}
+          onRowSelectionModelChange={(newSelection: any) => {
+            if (Array.isArray(newSelection)) {
+              const selectedIds = newSelection
+                .map((id: string | number) => {
+                  const numId =
+                    typeof id === "string"
+                      ? Number.parseInt(id, 10)
+                      : Number(id);
+                  return numId;
+                })
+                .filter(
+                  (id: number) =>
+                    !Number.isNaN(id) && id !== null && id !== undefined
+                );
+              setIds(selectedIds);
+            } else if (
+              newSelection &&
+              typeof newSelection === "object" &&
+              "ids" in newSelection
+            ) {
+              const idsSet = newSelection.ids as Set<string | number>;
+              const selectedIds = Array.from(idsSet)
+                .map((id: string | number) => {
+                  const numId =
+                    typeof id === "string"
+                      ? Number.parseInt(id, 10)
+                      : Number(id);
+                  return numId;
+                })
+                .filter(
+                  (id: number) =>
+                    !Number.isNaN(id) && id !== null && id !== undefined
+                );
+              setIds(selectedIds);
+            } else {
+              setIds([]);
+            }
           }}
-          hideFooter
           localeText={ruRU.components.MuiDataGrid.defaultProps.localeText}
           slots={{
             noRowsOverlay: () => (

src/pages/Station/StationPreviewPage/index.tsx

@@ -67,21 +67,6 @@ export const StationPreviewPage = observer(() => {
           <p>{stationPreview[id!]?.[language]?.data.system_name}</p>
         </div>
 
-        <div className="flex flex-col gap-2">
-          <h1 className="text-lg font-bold">Направление</h1>
-          <p
-            className={`${
-              stationPreview[id!]?.[language]?.data.direction
-                ? "text-green-500"
-                : "text-red-500"
-            }`}
-          >
-            {stationPreview[id!]?.[language]?.data.direction
-              ? "Прямой"
-              : "Обратный"}
-          </p>
-        </div>
-
         {stationPreview[id!]?.[language]?.data.address && (
           <div className="flex flex-col gap-2">
             <h1 className="text-lg font-bold">Адрес</h1>

src/pages/User/UserListPage/index.tsx

@@ -16,6 +16,10 @@ export const UserListPage = observer(() => {
   const [rowId, setRowId] = useState<number | null>(null);
   const [ids, setIds] = useState<number[]>([]);
   const [isLoading, setIsLoading] = useState(false);
+  const [paginationModel, setPaginationModel] = useState({
+    page: 0,
+    pageSize: 50,
+  });
 
   useEffect(() => {
     const fetchUsers = async () => {
@@ -126,29 +130,39 @@ export const UserListPage = observer(() => {
           <CreateButton label="Создать пользователя" path="/user/create" />
         </div>
 
-        <div
+        {ids.length > 0 && (
-          className="flex justify-end mb-5 duration-300"
+          <div className="flex justify-end mb-5 duration-300">
-          style={{ opacity: ids.length > 0 ? 1 : 0 }}
+            <button
-        >
+              className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
-          <button
+              onClick={() => setIsBulkDeleteModalOpen(true)}
-            className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
+            >
-            onClick={() => setIsBulkDeleteModalOpen(true)}
+              <Trash2 size={20} className="text-white" /> Удалить выбранные (
-          >
+              {ids.length})
-            <Trash2 size={20} className="text-white" /> Удалить выбранные (
+            </button>
-            {ids.length})
+          </div>
-          </button>
+        )}
-        </div>
 
         <DataGrid
           rows={rows}
           columns={columns}
-          hideFooterPagination
           checkboxSelection
+          disableRowSelectionExcludeModel
           loading={isLoading}
-          onRowSelectionModelChange={(newSelection) => {
+          paginationModel={paginationModel}
-            setIds(Array.from(newSelection.ids) as number[]);
+          onPaginationModelChange={setPaginationModel}
+          pageSizeOptions={[50]}
+          onRowSelectionModelChange={(newSelection: any) => {
+            if (Array.isArray(newSelection)) {
+              const selectedIds = newSelection.map((id: string | number) => Number(id));
+              setIds(selectedIds);
+            } else if (newSelection && typeof newSelection === 'object' && 'ids' in newSelection) {
+              const idsSet = newSelection.ids as Set<string | number>;
+              const selectedIds = Array.from(idsSet).map((id: string | number) => Number(id));
+              setIds(selectedIds);
+            } else {
+              setIds([]);
+            }
           }}
-          hideFooter
           localeText={ruRU.components.MuiDataGrid.defaultProps.localeText}
           slots={{
             noRowsOverlay: () => (

src/pages/Vehicle/VehicleEditPage/index.tsx

@@ -6,6 +6,7 @@ import {
   FormControl,
   InputLabel,
   Button,
+  Box,
 } from "@mui/material";
 import { observer } from "mobx-react-lite";
 import { ArrowLeft, Loader2, Save } from "lucide-react";
@@ -16,6 +17,7 @@ import {
   languageStore,
   VEHICLE_TYPES,
   vehicleStore,
+  LoadingSpinner,
 } from "@shared";
 import { toast } from "react-toastify";
 
@@ -31,6 +33,8 @@ export const VehicleEditPage = observer(() => {
   } = vehicleStore;
   const { getCarriers } = carrierStore;
   const { language } = languageStore;
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingData, setIsLoadingData] = useState(true);
 
   useEffect(() => {
     // Устанавливаем русский язык при загрузке страницы
@@ -38,31 +42,58 @@ export const VehicleEditPage = observer(() => {
   }, []);
 
   useEffect(() => {
-    (async () => {
+    const fetchAndSetVehicleData = async () => {
-      await getVehicle(Number(id));
+      if (!id) {
-      await getCarriers(language);
+        setIsLoadingData(false);
+        return;
+      }
 
-      setEditVehicleData({
+      setIsLoadingData(true);
-        tail_number: vehicle[Number(id)]?.vehicle.tail_number,
+      try {
-        type: vehicle[Number(id)]?.vehicle.type,
+        await getVehicle(Number(id));
-        carrier: vehicle[Number(id)]?.vehicle.carrier,
+        await getCarriers(language);
-        carrier_id: vehicle[Number(id)]?.vehicle.carrier_id,
+
-      });
+        setEditVehicleData({
-    })();
+          tail_number: vehicle[Number(id)]?.vehicle.tail_number,
+          type: vehicle[Number(id)]?.vehicle.type,
+          carrier: vehicle[Number(id)]?.vehicle.carrier,
+          carrier_id: vehicle[Number(id)]?.vehicle.carrier_id,
+        });
+      } finally {
+        setIsLoadingData(false);
+      }
+    };
+
+    fetchAndSetVehicleData();
   }, [id, language]);
-  const [isLoading, setIsLoading] = useState(false);
   const handleEdit = async () => {
     try {
       setIsLoading(true);
       await editVehicle(Number(id), editVehicleData);
       toast.success("Транспортное средство успешно обновлено");
-      navigate("/vehicle");
+      navigate("/devices");
     } catch (error) {
       toast.error("Ошибка при обновлении транспортного средства");
     } finally {
       setIsLoading(false);
     }
   };
+
+  if (isLoadingData) {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          minHeight: "60vh",
+        }}
+      >
+        <LoadingSpinner message="Загрузка данных транспортного средства..." />
+      </Box>
+    );
+  }
+
   return (
     <Paper className="w-full h-full p-3 flex flex-col gap-10">
       <div className="flex items-center gap-4">

src/pages/Vehicle/VehicleListPage/index.tsx

@@ -18,6 +18,10 @@ export const VehicleListPage = observer(() => {
   const [rowId, setRowId] = useState<number | null>(null);
   const [ids, setIds] = useState<number[]>([]);
   const [isLoading, setIsLoading] = useState(false);
+  const [paginationModel, setPaginationModel] = useState({
+    page: 0,
+    pageSize: 50,
+  });
   const { language } = languageStore;
 
   useEffect(() => {
@@ -148,29 +152,39 @@ export const VehicleListPage = observer(() => {
           />
         </div>
 
-        <div
+        {ids.length > 0 && (
-          className="flex justify-end mb-5 duration-300"
+          <div className="flex justify-end mb-5 duration-300">
-          style={{ opacity: ids.length > 0 ? 1 : 0 }}
+            <button
-        >
+              className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
-          <button
+              onClick={() => setIsBulkDeleteModalOpen(true)}
-            className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
+            >
-            onClick={() => setIsBulkDeleteModalOpen(true)}
+              <Trash2 size={20} className="text-white" /> Удалить выбранные (
-          >
+              {ids.length})
-            <Trash2 size={20} className="text-white" /> Удалить выбранные (
+            </button>
-            {ids.length})
+          </div>
-          </button>
+        )}
-        </div>
 
         <DataGrid
           rows={rows}
           columns={columns}
-          hideFooterPagination
           checkboxSelection
+          disableRowSelectionExcludeModel
           loading={isLoading}
-          onRowSelectionModelChange={(newSelection) => {
+          paginationModel={paginationModel}
-            setIds(Array.from(newSelection.ids) as number[]);
+          onPaginationModelChange={setPaginationModel}
+          pageSizeOptions={[50]}
+          onRowSelectionModelChange={(newSelection: any) => {
+            if (Array.isArray(newSelection)) {
+              const selectedIds = newSelection.map((id: string | number) => Number(id));
+              setIds(selectedIds);
+            } else if (newSelection && typeof newSelection === 'object' && 'ids' in newSelection) {
+              const idsSet = newSelection.ids as Set<string | number>;
+              const selectedIds = Array.from(idsSet).map((id: string | number) => Number(id));
+              setIds(selectedIds);
+            } else {
+              setIds([]);
+            }
           }}
-          hideFooter
           localeText={ruRU.components.MuiDataGrid.defaultProps.localeText}
           slots={{
             noRowsOverlay: () => (

src/shared/store/StationsStore/index.ts

@@ -13,7 +13,6 @@ type StationLanguageData = {
 
 type StationCommonData = {
   city_id: number;
-  direction: boolean;
   description: string;
   icon: string;
   latitude: number;
@@ -44,7 +43,6 @@ type Station = {
   city: string;
   city_id: number;
   description: string;
-  direction: boolean;
   icon: string;
   latitude: number;
   longitude: number;
@@ -123,7 +121,6 @@ class StationsStore {
     common: {
       city: "",
       city_id: 0,
-      direction: false,
       description: "",
       icon: "",
       latitude: 0,
@@ -169,7 +166,6 @@ class StationsStore {
     common: {
       city: "",
       city_id: 0,
-      direction: false,
       description: "",
       icon: "",
       latitude: 0,
@@ -252,7 +248,6 @@ class StationsStore {
       common: {
         city: ruResponse.data.city,
         city_id: ruResponse.data.city_id,
-        direction: ruResponse.data.direction,
         description: ruResponse.data.description,
         icon: ruResponse.data.icon,
         latitude: ruResponse.data.latitude,
@@ -277,7 +272,6 @@ class StationsStore {
   editStation = async (id: number) => {
     const commonDataPayload = {
       city_id: this.editStationData.common.city_id,
-      direction: this.editStationData.common.direction,
       icon: this.editStationData.common.icon,
       latitude: this.editStationData.common.latitude,
       longitude: this.editStationData.common.longitude,
@@ -405,7 +399,6 @@ class StationsStore {
     const { language } = languageStore;
     let commonDataPayload: Partial<StationCommonData> = {
       city_id: this.createStationData.common.city_id,
-      direction: this.createStationData.common.direction,
       icon: this.createStationData.common.icon,
       latitude: this.createStationData.common.latitude,
       longitude: this.createStationData.common.longitude,
@@ -479,7 +472,6 @@ class StationsStore {
         common: {
           city: "",
           city_id: 0,
-          direction: false,
           icon: "",
           latitude: 0,
           description: "",
@@ -526,7 +518,6 @@ class StationsStore {
       common: {
         city: "",
         city_id: 0,
-        direction: false,
         description: "",
         icon: "",
         latitude: 0,
@@ -575,7 +566,6 @@ class StationsStore {
     // Формируем commonDataPayload как в editStation, с обновленными transfers
     const commonDataPayload = {
       city_id: stationData.city_id,
-      direction: stationData.direction,
       latitude: stationData.latitude,
       longitude: stationData.longitude,
       offset_x: stationData.offset_x,

src/widgets/DevicesTable/index.tsx

@@ -5,18 +5,18 @@ import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import Paper from "@mui/material/Paper";
-import { Check, Copy, RotateCcw, Trash2, X } from "lucide-react";
+import { Check, Copy, Pencil, RotateCcw, Trash2, X } from "lucide-react";
 import {
   authInstance,
   devicesStore,
   Modal,
   snapshotStore,
   vehicleStore,
+  Vehicle,
 } from "@shared";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Button, Checkbox, Typography } from "@mui/material";
-import { Vehicle } from "@shared";
 import { toast } from "react-toastify";
 import { useNavigate } from "react-router-dom";
 import { DeleteModal } from "@widgets";
@@ -47,6 +47,7 @@ const formatDate = (dateString: string | null) => {
 };
 
 type TableRowData = {
+  vehicle_id: number;
   tail_number: number;
   online: boolean;
   lastUpdate: string | null;
@@ -56,6 +57,7 @@ type TableRowData = {
   device_uuid: string | null;
 };
 function createData(
+  vehicle_id: number,
   tail_number: number,
   online: boolean,
   lastUpdate: string | null,
@@ -65,6 +67,7 @@ function createData(
   device_uuid: string | null
 ): TableRowData {
   return {
+    vehicle_id,
     tail_number,
     online,
     lastUpdate,
@@ -80,6 +83,7 @@ const transformDevicesToRows = (vehicles: Vehicle[]): TableRowData[] => {
     const uuid = vehicle.vehicle.uuid;
     if (!uuid)
       return {
+        vehicle_id: vehicle.vehicle.id,
         tail_number: vehicle.vehicle.tail_number,
         online: false,
         lastUpdate: null,
@@ -89,6 +93,7 @@ const transformDevicesToRows = (vehicles: Vehicle[]): TableRowData[] => {
         device_uuid: null,
       };
     return createData(
+      vehicle.vehicle.id,
       vehicle.vehicle.tail_number,
       vehicle.device_status?.online ?? false,
       vehicle.device_status?.last_update ?? null,
@@ -404,37 +409,54 @@ export const DevicesTable = observer(() => {
                   </div>
                 </TableCell>
                 <TableCell align="center">
-                  <Button
+                  <div className="flex items-center justify-center gap-1">
-                    onClick={async (e) => {
+                    <Button
-                      e.stopPropagation();
+                      onClick={(e) => {
-                      try {
+                        e.stopPropagation();
-                        if (
+                        navigate(`/vehicle/${row.vehicle_id}/edit`);
-                          row.device_uuid &&
+                      }}
-                          devices.find((device) => device === row.device_uuid)
+                      title="Редактировать транспорт"
-                        ) {
+                      size="small"
-                          await handleReloadStatus(row.device_uuid);
+                      variant="text"
-                          toast.success("Статус устройства обновлен");
+                    >
-                        } else {
+                      <Pencil size={16} />
-                          toast.error("Нет связи с устройством");
+                    </Button>
+                    <Button
+                      onClick={async (e) => {
+                        e.stopPropagation();
+                        try {
+                          if (
+                            row.device_uuid &&
+                            devices.find((device) => device === row.device_uuid)
+                          ) {
+                            await handleReloadStatus(row.device_uuid);
+                            toast.success("Статус устройства обновлен");
+                          } else {
+                            toast.error("Нет связи с устройством");
+                          }
+                        } catch (error) {
+                          toast.error("Ошибка сервера");
                         }
-                      } catch (error) {
+                      }}
-                        toast.error("Ошибка сервера");
+                      title="Перезапросить статус"
-                      }
+                      size="small"
-                    }}
+                      variant="text"
-                    title="Перезапросить статус"
+                    >
-                    size="small"
+                      <RotateCcw size={16} />
-                    variant="text"
+                    </Button>
-                  >
+                    <Button
-                    <RotateCcw size={16} />
+                      onClick={(e) => {
-                  </Button>
+                        e.stopPropagation();
-                  <Button
+                        navigator.clipboard.writeText(row.device_uuid ?? "");
-                    onClick={() => {
+                        toast.success("UUID скопирован");
-                      navigator.clipboard.writeText(row.device_uuid ?? "");
+                      }}
-                      toast.success("UUID скопирован");
+                      title="Копировать UUID"
-                    }}
+                      size="small"
-                  >
+                      variant="text"
-                    <Copy size={16} />
+                    >
-                  </Button>
+                      <Copy size={16} />
+                    </Button>
+                  </div>
                 </TableCell>
               </TableRow>
             ))}