feat: big major update

src/pages/Carrier/CarrierCreatePage/index.tsx

@@ -8,8 +8,8 @@ import {
   InputLabel,
 } from "@mui/material";
 import { observer } from "mobx-react-lite";
-import { ArrowLeft, Save } from "lucide-react";
-import { Loader2 } from "lucide-react";
+import { ArrowLeft, Loader2, Save } from "lucide-react";
+
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import {
@@ -17,15 +17,14 @@ import {
   cityStore,
   mediaStore,
   languageStore,
+  isMediaIdEmpty,
   useSelectedCity,
-} from "@shared";
-import { useState, useEffect } from "react";
-import { ImageUploadCard, LanguageSwitcher } from "@widgets";
-import {
   SelectMediaDialog,
   UploadMediaDialog,
   PreviewMediaDialog,
 } from "@shared";
+import { useState, useEffect } from "react";
+import { ImageUploadCard, LanguageSwitcher } from "@widgets";
 
 export const CarrierCreatePage = observer(() => {
   const navigate = useNavigate();
@@ -56,7 +55,7 @@ export const CarrierCreatePage = observer(() => {
         selectedCityId,
         createCarrierData[language].slogan,
         selectedMediaId || "",
-        language
+        language,
       );
     }
   }, [selectedCityId, createCarrierData.city_id]);
@@ -88,13 +87,17 @@ export const CarrierCreatePage = observer(() => {
       createCarrierData.city_id,
       createCarrierData[language].slogan,
       media.id,
-      language
+      language,
     );
   };
 
-  const selectedMedia = selectedMediaId
-    ? mediaStore.media.find((m) => m.id === selectedMediaId)
-    : null;
+  const selectedMedia =
+    selectedMediaId && !isMediaIdEmpty(selectedMediaId)
+      ? mediaStore.media.find((m) => m.id === selectedMediaId)
+      : null;
+  const effectiveLogoUrl = isMediaIdEmpty(selectedMediaId)
+    ? null
+    : selectedMedia?.id ?? selectedMediaId ?? null;
 
   return (
     <Paper className="w-full h-full p-3 flex flex-col gap-10">
@@ -127,7 +130,7 @@ export const CarrierCreatePage = observer(() => {
                 e.target.value as number,
                 createCarrierData[language].slogan,
                 selectedMediaId || "",
-                language
+                language,
               )
             }
           >
@@ -151,7 +154,7 @@ export const CarrierCreatePage = observer(() => {
               createCarrierData.city_id,
               createCarrierData[language].slogan,
               selectedMediaId || "",
-              language
+              language,
             )
           }
         />
@@ -168,7 +171,7 @@ export const CarrierCreatePage = observer(() => {
               createCarrierData.city_id,
               createCarrierData[language].slogan,
               selectedMediaId || "",
-              language
+              language,
             )
           }
         />
@@ -184,7 +187,7 @@ export const CarrierCreatePage = observer(() => {
               createCarrierData.city_id,
               e.target.value,
               selectedMediaId || "",
-              language
+              language,
             )
           }
         />
@@ -193,10 +196,10 @@ export const CarrierCreatePage = observer(() => {
           <ImageUploadCard
             title="Логотип перевозчика"
             imageKey="thumbnail"
-            imageUrl={selectedMedia?.id}
+            imageUrl={effectiveLogoUrl}
             onImageClick={() => {
               setIsPreviewMediaOpen(true);
-              setMediaId(selectedMedia?.id ?? "");
+              setMediaId(effectiveLogoUrl ?? "");
             }}
             onDeleteImageClick={() => {
               setSelectedMediaId(null);
@@ -207,7 +210,7 @@ export const CarrierCreatePage = observer(() => {
                 createCarrierData.city_id,
                 createCarrierData[language].slogan,
                 "",
-                language
+                language,
               );
             }}
             onSelectFileClick={() => {

src/pages/Carrier/CarrierEditPage/index.tsx

@@ -18,6 +18,7 @@ import {
   cityStore,
   mediaStore,
   languageStore,
+  isMediaIdEmpty,
   LoadingSpinner,
 } from "@shared";
 import { useState, useEffect } from "react";
@@ -123,9 +124,13 @@ export const CarrierEditPage = observer(() => {
     );
   };
 
-  const selectedMedia = editCarrierData.logo
-    ? mediaStore.media.find((m) => m.id === editCarrierData.logo)
-    : null;
+  const selectedMedia =
+    editCarrierData.logo && !isMediaIdEmpty(editCarrierData.logo)
+      ? mediaStore.media.find((m) => m.id === editCarrierData.logo)
+      : null;
+  const effectiveLogoUrl = isMediaIdEmpty(editCarrierData.logo)
+    ? null
+    : (selectedMedia?.id ?? editCarrierData.logo);
 
   if (isLoadingData) {
     return (
@@ -238,10 +243,10 @@ export const CarrierEditPage = observer(() => {
           <ImageUploadCard
             title="Логотип перевозчика"
             imageKey="thumbnail"
-            imageUrl={selectedMedia?.id}
+            imageUrl={effectiveLogoUrl}
             onImageClick={() => {
               setIsPreviewMediaOpen(true);
-              setMediaId(selectedMedia?.id ?? "");
+              setMediaId(effectiveLogoUrl ?? "");
             }}
             onDeleteImageClick={() => {
               setIsDeleteLogoModalOpen(true);

src/pages/City/CityCreatePage/index.tsx

@@ -12,14 +12,18 @@ import { ArrowLeft, Save } from "lucide-react";
 import { Loader2 } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
-import { cityStore, countryStore, languageStore, mediaStore } from "@shared";
-import { useState, useEffect } from "react";
-import { LanguageSwitcher, ImageUploadCard } from "@widgets";
 import {
+  cityStore,
+  countryStore,
+  languageStore,
+  mediaStore,
+  isMediaIdEmpty,
   SelectMediaDialog,
   UploadMediaDialog,
   PreviewMediaDialog,
 } from "@shared";
+import { useState, useEffect } from "react";
+import { LanguageSwitcher, ImageUploadCard } from "@widgets";
 
 export const CityCreatePage = observer(() => {
   const navigate = useNavigate();
@@ -72,9 +76,13 @@ export const CityCreatePage = observer(() => {
     );
   };
 
-  const selectedMedia = createCityData.arms
-    ? mediaStore.media.find((m) => m.id === createCityData.arms)
-    : null;
+  const selectedMedia =
+    createCityData.arms && !isMediaIdEmpty(createCityData.arms)
+      ? mediaStore.media.find((m) => m.id === createCityData.arms)
+      : null;
+  const effectiveArmsUrl = isMediaIdEmpty(createCityData.arms)
+    ? null
+    : (selectedMedia?.id ?? createCityData.arms);
 
   return (
     <Paper className="w-full h-full p-3 flex flex-col gap-10">
@@ -135,10 +143,10 @@ export const CityCreatePage = observer(() => {
           <ImageUploadCard
             title="Герб города"
             imageKey="image"
-            imageUrl={selectedMedia?.id}
+            imageUrl={effectiveArmsUrl}
             onImageClick={() => {
               setIsPreviewMediaOpen(true);
-              setMediaId(selectedMedia?.id ?? "");
+              setMediaId(effectiveArmsUrl ?? "");
             }}
             onDeleteImageClick={() => {
               setCreateCityData(

src/pages/City/CityEditPage/index.tsx

@@ -9,8 +9,7 @@ import {
   Box,
 } from "@mui/material";
 import { observer } from "mobx-react-lite";
-import { ArrowLeft, Save } from "lucide-react";
-import { Loader2 } from "lucide-react";
+import { ArrowLeft, Loader2, Save } from "lucide-react";
 import { useNavigate, useParams } from "react-router-dom";
 import { toast } from "react-toastify";
 import {
@@ -18,16 +17,15 @@ import {
   countryStore,
   languageStore,
   mediaStore,
+  isMediaIdEmpty,
   CashedCities,
   LoadingSpinner,
-} from "@shared";
-import { useEffect, useState } from "react";
-import { LanguageSwitcher, ImageUploadCard } from "@widgets";
-import {
   SelectMediaDialog,
   UploadMediaDialog,
   PreviewMediaDialog,
 } from "@shared";
+import { useEffect, useState } from "react";
+import { LanguageSwitcher, ImageUploadCard } from "@widgets";
 
 export const CityEditPage = observer(() => {
   const navigate = useNavigate();
@@ -99,13 +97,17 @@ export const CityEditPage = observer(() => {
       editCityData[language].name,
       editCityData.country_code,
       media.id,
-      language
+      language,
     );
   };
 
-  const selectedMedia = editCityData.arms
-    ? mediaStore.media.find((m) => m.id === editCityData.arms)
-    : null;
+  const selectedMedia =
+    editCityData.arms && !isMediaIdEmpty(editCityData.arms)
+      ? mediaStore.media.find((m) => m.id === editCityData.arms)
+      : null;
+  const effectiveArmsUrl = isMediaIdEmpty(editCityData.arms)
+    ? null
+    : selectedMedia?.id ?? editCityData.arms;
 
   if (isLoadingData) {
     return (
@@ -149,7 +151,7 @@ export const CityEditPage = observer(() => {
               e.target.value,
               editCityData.country_code,
               editCityData.arms,
-              language
+              language,
             )
           }
         />
@@ -165,7 +167,7 @@ export const CityEditPage = observer(() => {
                 editCityData[language].name,
                 e.target.value,
                 editCityData.arms,
-                language
+                language,
               );
             }}
           >
@@ -181,17 +183,17 @@ export const CityEditPage = observer(() => {
           <ImageUploadCard
             title="Герб города"
             imageKey="image"
-            imageUrl={selectedMedia?.id}
+            imageUrl={effectiveArmsUrl}
             onImageClick={() => {
               setIsPreviewMediaOpen(true);
-              setMediaId(selectedMedia?.id ?? "");
+              setMediaId(effectiveArmsUrl ?? "");
             }}
             onDeleteImageClick={() => {
               setEditCityData(
                 editCityData[language].name,
                 editCityData.country_code,
                 "",
-                language
+                language,
               );
               setActiveMenuType(null);
             }}

src/pages/MapPage/index.tsx

@@ -186,7 +186,7 @@ const saveHiddenRoutes = (hiddenRoutes: Set<number>): void => {
   try {
     localStorage.setItem(
       HIDDEN_ROUTES_KEY,
-      JSON.stringify(Array.from(hiddenRoutes))
+      JSON.stringify(Array.from(hiddenRoutes)),
     );
   } catch (error) {
     console.warn("Failed to save hidden routes:", error);
@@ -221,7 +221,7 @@ class MapStore {
     try {
       localStorage.setItem(
         HIDE_SIGHTS_BY_HIDDEN_ROUTES_KEY,
-        JSON.stringify(!!val)
+        JSON.stringify(!!val),
       );
     } catch (e) {}
   }
@@ -239,7 +239,7 @@ class MapStore {
 
   private sortFeatures<T extends ApiStation | ApiSight>(
     features: T[],
-    sortType: SortType
+    sortType: SortType,
   ): T[] {
     const sorted = [...features];
     switch (sortType) {
@@ -324,7 +324,7 @@ class MapStore {
       return this.sortedStations;
     }
     return this.sortedStations.filter(
-      (station) => station.city_id === selectedCityId
+      (station) => station.city_id === selectedCityId,
     );
   }
 
@@ -365,7 +365,7 @@ class MapStore {
     const response = await languageInstance("ru").get("/route");
     const routesIds = response.data.map((route: any) => route.id);
     const routePromises = routesIds.map((id: number) =>
-      languageInstance("ru").get(`/route/${id}`)
+      languageInstance("ru").get(`/route/${id}`),
     );
     const routeResponses = await Promise.all(routePromises);
     this.routes = routeResponses.map((res) => ({
@@ -379,7 +379,7 @@ class MapStore {
     }));
 
     this.routes = this.routes.sort((a, b) =>
-      a.route_number.localeCompare(b.route_number)
+      a.route_number.localeCompare(b.route_number),
     );
 
     await this.preloadRouteStations(routesIds);
@@ -391,14 +391,14 @@ class MapStore {
     const stationPromises = routesIds.map(async (routeId) => {
       try {
         const stationsResponse = await languageInstance("ru").get(
-          `/route/${routeId}/station`
+          `/route/${routeId}/station`,
         );
         const stationIds = stationsResponse.data.map((s: any) => s.id);
         this.routeStationsCache.set(routeId, stationIds);
       } catch (error) {
         console.error(
           `Failed to preload stations for route ${routeId}:`,
-          error
+          error,
         );
       }
     });
@@ -409,7 +409,7 @@ class MapStore {
     const sightPromises = routesIds.map(async (routeId) => {
       try {
         const sightsResponse = await languageInstance("ru").get(
-          `/route/${routeId}/sight`
+          `/route/${routeId}/sight`,
         );
         const sightIds = sightsResponse.data.map((s: any) => s.id);
         this.routeSightsCache.set(routeId, sightIds);
@@ -493,7 +493,7 @@ class MapStore {
 
       if (selectedCityStore.selectedCityId) {
         const carriersInCity = carrierStore.carriers.ru.data.filter(
-          (c: any) => c.city_id === selectedCityStore.selectedCityId
+          (c: any) => c.city_id === selectedCityStore.selectedCityId,
         );
 
         if (carriersInCity.length > 0) {
@@ -521,7 +521,7 @@ class MapStore {
 
       if (!carrier_id && selectedCityStore.selectedCityId) {
         toast.error(
-          "В выбранном городе нет доступных перевозчиков, маршрут отображается в общем списке"
+          "В выбранном городе нет доступных перевозчиков, маршрут отображается в общем списке",
         );
       }
       createdItem = routeStore.routes.data[routeStore.routes.data.length - 1];
@@ -573,7 +573,7 @@ class MapStore {
       const centerCoords = getCenter(lineGeom.getExtent());
       const [center_longitude, center_latitude] = toLonLat(
         centerCoords,
-        "EPSG:3857"
+        "EPSG:3857",
       );
       data = {
         route_number: properties.name,
@@ -606,7 +606,7 @@ class MapStore {
         return;
       }
       throw new Error(
-        `Could not find old data for ${featureType} with id ${numericId}`
+        `Could not find old data for ${featureType} with id ${numericId}`,
       );
     }
 
@@ -626,7 +626,7 @@ class MapStore {
 
     const response = await languageInstance("ru").patch(
       `/${featureType}/${numericId}`,
-      requestBody
+      requestBody,
     );
 
     const updateStore = (store: any[], updatedItem: any) => {
@@ -745,7 +745,7 @@ class MapService {
   private selectInteraction: Select;
   private hoveredFeatureId: string | number | null;
   private boundHandlePointerMove: (
-    event: MapBrowserEvent<PointerEvent>
+    event: MapBrowserEvent<PointerEvent>,
   ) => void;
   private boundHandlePointerLeave: () => void;
   private boundHandleContextMenu: (event: MouseEvent) => void;
@@ -784,7 +784,7 @@ class MapService {
     onFeaturesChange: (features: Feature<Geometry>[]) => void,
     onFeatureSelect: (feature: Feature<Geometry> | null) => void,
     tooltipElement: HTMLElement,
-    onSelectionChange?: (ids: Set<string | number>) => void
+    onSelectionChange?: (ids: Set<string | number>) => void,
   ) {
     this.map = null;
     this.tooltipElement = tooltipElement;
@@ -933,7 +933,7 @@ class MapService {
       style: (featureLike: FeatureLike) => {
         const clusterFeature = featureLike as Feature<Point>;
         const featuresInCluster = clusterFeature.get(
-          "features"
+          "features",
         ) as Feature<Point>[];
         const size = featuresInCluster.length;
 
@@ -991,18 +991,18 @@ class MapService {
 
     this.pointSource.on(
       "addfeature",
-      this.handleFeatureEvent.bind(this) as any
+      this.handleFeatureEvent.bind(this) as any,
     );
     this.pointSource.on("removefeature", () => this.updateFeaturesInReact());
     this.pointSource.on(
       "changefeature",
-      this.handleFeatureChange.bind(this) as any
+      this.handleFeatureChange.bind(this) as any,
     );
     this.lineSource.on("addfeature", this.handleFeatureEvent.bind(this) as any);
     this.lineSource.on("removefeature", () => this.updateFeaturesInReact());
     this.lineSource.on(
       "changefeature",
-      this.handleFeatureChange.bind(this) as any
+      this.handleFeatureChange.bind(this) as any,
     );
 
     let renderCompleteHandled = false;
@@ -1056,7 +1056,7 @@ class MapService {
         if (center && zoom !== undefined && this.map) {
           const [lon, lat] = toLonLat(
             center,
-            this.map.getView().getProjection()
+            this.map.getView().getProjection(),
           );
           saveMapPosition({ center: [lon, lat], zoom });
         }
@@ -1068,7 +1068,7 @@ class MapService {
         if (center && zoom !== undefined && this.map) {
           const [lon, lat] = toLonLat(
             center,
-            this.map.getView().getProjection()
+            this.map.getView().getProjection(),
           );
           saveMapPosition({ center: [lon, lat], zoom });
         }
@@ -1189,7 +1189,7 @@ class MapService {
         const feature = this.map?.forEachFeatureAtPixel(
           event.pixel,
           (f: FeatureLike) => f as Feature<Geometry>,
-          { layerFilter, hitTolerance: 5 }
+          { layerFilter, hitTolerance: 5 },
         );
 
         if (!feature) return;
@@ -1227,7 +1227,7 @@ class MapService {
         }
 
         const newCoordinates = coordinates.filter(
-          (_, index) => index !== closestIndex
+          (_, index) => index !== closestIndex,
         );
         lineString.setCoordinates(newCoordinates);
         this.saveModifiedFeature(feature);
@@ -1270,7 +1270,7 @@ class MapService {
               selected.add(f.getId()!);
             }
           }
-        }
+        },
       );
 
       this.setSelectedIds(selected);
@@ -1417,7 +1417,7 @@ class MapService {
   public loadFeaturesFromApi(
     _apiStations: typeof mapStore.stations,
     _apiRoutes: typeof mapStore.routes,
-    _apiSights: typeof mapStore.sights
+    _apiSights: typeof mapStore.sights,
   ): void {
     if (!this.map) return;
 
@@ -1450,8 +1450,8 @@ class MapService {
         transform(
           [station.longitude, station.latitude],
           "EPSG:4326",
-          projection
-        )
+          projection,
+        ),
       );
       const feature = new Feature({ geometry: point, name: station.name });
       feature.setId(`station-${station.id}`);
@@ -1462,7 +1462,7 @@ class MapService {
     filteredSights.forEach((sight) => {
       if (sight.longitude == null || sight.latitude == null) return;
       const point = new Point(
-        transform([sight.longitude, sight.latitude], "EPSG:4326", projection)
+        transform([sight.longitude, sight.latitude], "EPSG:4326", projection),
       );
       const feature = new Feature({
         geometry: point,
@@ -1482,7 +1482,7 @@ class MapService {
       const coordinates = route.path
         .filter((c) => c && c[0] != null && c[1] != null)
         .map((c: [number, number]) =>
-          transform([c[1], c[0]], "EPSG:4326", projection)
+          transform([c[1], c[0]], "EPSG:4326", projection),
         );
 
       if (coordinates.length === 0) return;
@@ -1568,7 +1568,7 @@ class MapService {
 
   public startDrawing(
     type: "Point" | "LineString",
-    featureType: FeatureType
+    featureType: FeatureType,
   ): void {
     if (!this.map) return;
 
@@ -1732,7 +1732,7 @@ class MapService {
       this.map.forEachFeatureAtPixel(
         event.pixel,
         (f: FeatureLike) => f as Feature<Geometry>,
-        { layerFilter, hitTolerance: 5 }
+        { layerFilter, hitTolerance: 5 },
       );
 
     let finalFeature: Feature<Geometry> | null = null;
@@ -1807,7 +1807,7 @@ class MapService {
 
   public deleteFeature(
     featureId: string | number | undefined,
-    recourse: string
+    recourse: string,
   ): void {
     if (featureId === undefined) return;
 
@@ -1863,7 +1863,7 @@ class MapService {
               const lineFeature = this.lineSource.getFeatureById(id);
               if (lineFeature)
                 this.lineSource.removeFeature(
-                  lineFeature as Feature<LineString>
+                  lineFeature as Feature<LineString>,
                 );
               const pointFeature = this.pointSource.getFeatureById(id);
               if (pointFeature)
@@ -1890,11 +1890,11 @@ class MapService {
       if (targetEl instanceof HTMLElement) {
         targetEl.removeEventListener(
           "contextmenu",
-          this.boundHandleContextMenu
+          this.boundHandleContextMenu,
         );
         targetEl.removeEventListener(
           "pointerleave",
-          this.boundHandlePointerLeave
+          this.boundHandlePointerLeave,
         );
       }
       this.map.un("pointermove", this.boundHandlePointerMove as any);
@@ -1907,7 +1907,7 @@ class MapService {
   }
 
   private handleFeatureEvent(
-    event: VectorSourceEvent<Feature<Geometry>>
+    event: VectorSourceEvent<Feature<Geometry>>,
   ): void {
     if (!event.feature) return;
     const feature = event.feature;
@@ -1918,7 +1918,7 @@ class MapService {
   }
 
   private handleFeatureChange(
-    event: VectorSourceEvent<Feature<Geometry>>
+    event: VectorSourceEvent<Feature<Geometry>>,
   ): void {
     if (!event.feature) return;
     this.updateFeaturesInReact();
@@ -1956,7 +1956,7 @@ class MapService {
     });
 
     this.modifyInteraction.setActive(
-      this.selectInteraction.getFeatures().getLength() > 0
+      this.selectInteraction.getFeatures().getLength() > 0,
     );
     this.clusterLayer.changed();
     this.routeLayer.changed();
@@ -2026,7 +2026,7 @@ class MapService {
     if (typeof featureId === "number" || !String(featureId).includes("-")) {
       console.warn(
         "Skipping save for feature with non-standard ID:",
-        featureId
+        featureId,
       );
       return;
     }
@@ -2074,7 +2074,7 @@ class MapService {
     try {
       const createdFeatureData = await mapStore.createFeature(
         featureType,
-        featureGeoJSON
+        featureGeoJSON,
       );
 
       const newFeatureId = `${featureType}-${createdFeatureData.id}`;
@@ -2093,8 +2093,8 @@ class MapService {
 
         const lineGeom = new LineString(
           routeData.path.map((c) =>
-            transform([c[1], c[0]], "EPSG:4326", projection)
-          )
+            transform([c[1], c[0]], "EPSG:4326", projection),
+          ),
         );
         feature.setGeometry(lineGeom);
       } else {
@@ -2196,8 +2196,8 @@ const MapControls: React.FC<MapControlsProps> = ({
           isDisabled
             ? "bg-gray-200 text-gray-400 cursor-not-allowed"
             : isActive
-            ? "bg-blue-600 text-white shadow-md hover:bg-blue-700"
-            : "bg-gray-100 text-gray-700 hover:bg-blue-100 hover:text-blue-700"
+              ? "bg-blue-600 text-white shadow-md hover:bg-blue-700"
+              : "bg-gray-100 text-gray-700 hover:bg-blue-100 hover:text-blue-700"
         }`;
         return (
           <button
@@ -2247,7 +2247,7 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
 
     const actualFeatures = useMemo(
       () => mapFeatures.filter((f) => !f.get("isProxy")),
-      [mapFeatures]
+      [mapFeatures],
     );
 
     const allFeatures = useMemo(() => {
@@ -2257,8 +2257,8 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
             transform(
               [station.longitude, station.latitude],
               "EPSG:4326",
-              "EPSG:3857"
-            )
+              "EPSG:3857",
+            ),
           ),
           name: station.name,
           description: station.description || "",
@@ -2275,8 +2275,8 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
             transform(
               [sight.longitude, sight.latitude],
               "EPSG:4326",
-              "EPSG:3857"
-            )
+              "EPSG:3857",
+            ),
           ),
           name: sight.name,
           description: sight.description,
@@ -2320,7 +2320,7 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
           (f.get("routeNumber") as string) || "",
         ];
         return candidates.some((value) =>
-          value.toLowerCase().includes(normalizedQuery)
+          value.toLowerCase().includes(normalizedQuery),
         );
       });
     }, [allFeatures, searchQuery]);
@@ -2343,7 +2343,7 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
           mapService.selectFeature(id);
         }
       },
-      [mapService, selectedIds, setSelectedIds]
+      [mapService, selectedIds, setSelectedIds],
     );
 
     const handleDeleteFeature = useCallback(
@@ -2353,7 +2353,7 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
           mapService.deleteFeature(id, resource);
         }
       },
-      [mapService]
+      [mapService],
     );
 
     const handleCheckboxChange = useCallback(
@@ -2365,14 +2365,14 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
         setSelectedIds(newSet);
         mapService.setSelectedIds(newSet);
       },
-      [mapService, selectedIds, setSelectedIds]
+      [mapService, selectedIds, setSelectedIds],
     );
 
     const handleBulkDelete = useCallback(() => {
       if (!mapService || selectedIds.size === 0) return;
       if (
         window.confirm(
-          `Вы уверены, что хотите удалить ${selectedIds.size} объект(ов)?`
+          `Вы уверены, что хотите удалить ${selectedIds.size} объект(ов)?`,
         )
       ) {
         mapService.deleteMultipleFeatures(Array.from(selectedIds));
@@ -2386,7 +2386,7 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
         if (!featureType || !numericId) return;
         navigate(`/${featureType}/${numericId}/edit`);
       },
-      [navigate]
+      [navigate],
     );
 
     const handleHideRoute = useCallback(
@@ -2413,7 +2413,7 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
             const coordinates = route.path
               .filter((c) => c && c[0] != null && c[1] != null)
               .map((c: [number, number]) =>
-                transform([c[1], c[0]], "EPSG:4326", projection)
+                transform([c[1], c[0]], "EPSG:4326", projection),
               );
 
             if (coordinates.length > 0) {
@@ -2435,7 +2435,7 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
 
             const visibleRouteIds = allRouteIds.filter(
               (id: number) =>
-                id !== numericRouteId && !mapStore.hiddenRoutes.has(id)
+                id !== numericRouteId && !mapStore.hiddenRoutes.has(id),
             );
 
             const stationsInVisibleRoutes = new Set<number>();
@@ -2443,12 +2443,12 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
               const stationIds =
                 mapStore.routeStationsCache.get(otherRouteId) || [];
               stationIds.forEach((id: number) =>
-                stationsInVisibleRoutes.add(id)
+                stationsInVisibleRoutes.add(id),
               );
             });
 
             const stationsToShow = routeStationIds.filter(
-              (id: number) => !stationsInVisibleRoutes.has(id)
+              (id: number) => !stationsInVisibleRoutes.has(id),
             );
 
             for (const stationId of stationsToShow) {
@@ -2459,8 +2459,8 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
                 transform(
                   [station.longitude, station.latitude],
                   "EPSG:4326",
-                  projection
-                )
+                  projection,
+                ),
               );
               const feature = new Feature({
                 geometry: point,
@@ -2470,7 +2470,7 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
               feature.set("featureType", "station");
 
               const existingFeature = mapService.pointSource.getFeatureById(
-                `station-${station.id}`
+                `station-${station.id}`,
               );
               if (!existingFeature) {
                 mapService.pointSource.addFeature(feature);
@@ -2487,7 +2487,7 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
 
             const visibleRouteIds = allRouteIds.filter(
               (id: number) =>
-                id !== numericRouteId && !mapStore.hiddenRoutes.has(id)
+                id !== numericRouteId && !mapStore.hiddenRoutes.has(id),
             );
 
             const stationsInVisibleRoutes = new Set<number>();
@@ -2495,21 +2495,21 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
               const stationIds =
                 mapStore.routeStationsCache.get(otherRouteId) || [];
               stationIds.forEach((id: number) =>
-                stationsInVisibleRoutes.add(id)
+                stationsInVisibleRoutes.add(id),
               );
             });
 
             const stationsToHide = routeStationIds.filter(
-              (id: number) => !stationsInVisibleRoutes.has(id)
+              (id: number) => !stationsInVisibleRoutes.has(id),
             );
 
             stationsToHide.forEach((stationId: number) => {
               const pointFeature = mapService.pointSource.getFeatureById(
-                `station-${stationId}`
+                `station-${stationId}`,
               );
               if (pointFeature) {
                 mapService.pointSource.removeFeature(
-                  pointFeature as Feature<Point>
+                  pointFeature as Feature<Point>,
                 );
               }
             });
@@ -2517,7 +2517,7 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
             const lineFeature = mapService.lineSource.getFeatureById(routeId);
             if (lineFeature) {
               mapService.lineSource.removeFeature(
-                lineFeature as Feature<LineString>
+                lineFeature as Feature<LineString>,
               );
             }
 
@@ -2529,31 +2529,31 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
         } catch (error) {
           console.error(
             "[handleHideRoute] Error toggling route visibility:",
-            error
+            error,
           );
           toast.error("Ошибка при изменении видимости маршрута");
         }
       },
-      [mapService]
+      [mapService],
     );
 
     const sortFeaturesByType = <T extends Feature<Geometry>>(
       features: T[],
-      sortType: SortType
+      sortType: SortType,
     ): T[] => {
       const sorted = [...features];
       switch (sortType) {
         case "name_asc":
           return sorted.sort((a, b) =>
             ((a.get("name") as string) || "").localeCompare(
-              (b.get("name") as string) || ""
-            )
+              (b.get("name") as string) || "",
+            ),
           );
         case "name_desc":
           return sorted.sort((a, b) =>
             ((b.get("name") as string) || "").localeCompare(
-              (a.get("name") as string) || ""
-            )
+              (a.get("name") as string) || "",
+            ),
           );
         case "created_asc":
           return sorted.sort((a, b) => {
@@ -2580,13 +2580,13 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
             const aDate = a.get("updated_at")
               ? new Date(a.get("updated_at"))
               : a.get("created_at")
-              ? new Date(a.get("created_at"))
-              : new Date(0);
+                ? new Date(a.get("created_at"))
+                : new Date(0);
             const bDate = b.get("updated_at")
               ? new Date(b.get("updated_at"))
               : b.get("created_at")
-              ? new Date(b.get("created_at"))
-              : new Date(0);
+                ? new Date(b.get("created_at"))
+                : new Date(0);
             return aDate.getTime() - bDate.getTime();
           });
         case "updated_desc":
@@ -2594,13 +2594,13 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
             const aDate = a.get("updated_at")
               ? new Date(a.get("updated_at"))
               : a.get("created_at")
-              ? new Date(a.get("created_at"))
-              : new Date(0);
+                ? new Date(a.get("created_at"))
+                : new Date(0);
             const bDate = b.get("updated_at")
               ? new Date(b.get("updated_at"))
               : b.get("created_at")
-              ? new Date(b.get("created_at"))
-              : new Date(0);
+                ? new Date(b.get("created_at"))
+                : new Date(0);
             return bDate.getTime() - aDate.getTime();
           });
         default:
@@ -2609,13 +2609,13 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
     };
 
     const stations = filteredFeatures.filter(
-      (f) => f.get("featureType") === "station"
+      (f) => f.get("featureType") === "station",
     );
     const lines = filteredFeatures.filter(
-      (f) => f.get("featureType") === "route"
+      (f) => f.get("featureType") === "route",
     );
     const sights = filteredFeatures.filter(
-      (f) => f.get("featureType") === "sight"
+      (f) => f.get("featureType") === "sight",
     );
 
     const sortedStations = sortFeaturesByType(stations, stationSort);
@@ -2624,7 +2624,7 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
     const renderFeatureList = (
       features: Feature<Geometry>[],
       featureType: "station" | "route" | "sight",
-      IconComponent: React.ElementType
+      IconComponent: React.ElementType,
     ) => (
       <div className="space-y-1 pr-1">
         {features.length > 0 ? (
@@ -2897,7 +2897,7 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
                 }`}
                 onClick={() =>
                   mapStore.setHideSightsByHiddenRoutes(
-                    !mapStore.hideSightsByHiddenRoutes
+                    !mapStore.hideSightsByHiddenRoutes,
                   )
                 }
               >
@@ -2992,7 +2992,7 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
                       </>
                     )}
                   </div>
-                )
+                ),
             )
           )}
         </div>
@@ -3009,7 +3009,7 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
         )}
       </div>
     );
-  }
+  },
 );
 
 export const MapPage: React.FC = observer(() => {
@@ -3025,7 +3025,7 @@ export const MapPage: React.FC = observer(() => {
   const [selectedFeatureForSidebar, setSelectedFeatureForSidebar] =
     useState<Feature<Geometry> | null>(null);
   const [selectedIds, setSelectedIds] = useState<Set<string | number>>(
-    new Set()
+    new Set(),
   );
   const [isLassoActive, setIsLassoActive] = useState<boolean>(false);
   const [showHelp, setShowHelp] = useState<boolean>(false);
@@ -3037,7 +3037,7 @@ export const MapPage: React.FC = observer(() => {
 
   const handleFeaturesChange = useCallback(
     (feats: Feature<Geometry>[]) => setMapFeatures([...feats]),
-    []
+    [],
   );
 
   const handleFeatureSelectForSidebar = useCallback(
@@ -3049,8 +3049,8 @@ export const MapPage: React.FC = observer(() => {
           featureType === "sight"
             ? "sights"
             : featureType === "route"
-            ? "lines"
-            : "layers";
+              ? "lines"
+              : "layers";
         setActiveSectionFromParent(sectionId);
         setTimeout(() => {
           document
@@ -3059,7 +3059,7 @@ export const MapPage: React.FC = observer(() => {
         }, 100);
       }
     },
-    []
+    [],
   );
 
   useEffect(() => {
@@ -3080,7 +3080,7 @@ export const MapPage: React.FC = observer(() => {
           mapService.loadFeaturesFromApi(
             mapStore.stations,
             mapStore.routes,
-            mapStore.sights
+            mapStore.sights,
           );
         } catch (e) {
           console.error("Failed to load initial map data:", e);
@@ -3099,7 +3099,7 @@ export const MapPage: React.FC = observer(() => {
           handleFeaturesChange,
           handleFeatureSelectForSidebar,
           tooltipRef.current,
-          setSelectedIds
+          setSelectedIds,
         );
         setMapServiceInstance(service);
 
@@ -3110,7 +3110,7 @@ export const MapPage: React.FC = observer(() => {
         loadInitialData(service);
       } catch (e: any) {
         setError(
-          `Ошибка инициализации карты: ${e.message || "Неизвестная ошибка"}.`
+          `Ошибка инициализации карты: ${e.message || "Неизвестная ошибка"}.`,
         );
         setIsMapLoading(false);
         setIsDataLoading(false);
@@ -3203,7 +3203,7 @@ export const MapPage: React.FC = observer(() => {
       mapServiceInstance.loadFeaturesFromApi(
         mapStore.stations,
         mapStore.routes,
-        mapStore.sights
+        mapStore.sights,
       );
     }
   }, [selectedCityId, mapServiceInstance, isDataLoading]);
@@ -3216,7 +3216,7 @@ export const MapPage: React.FC = observer(() => {
       mapServiceInstance.loadFeaturesFromApi(
         mapStore.stations,
         mapStore.routes,
-        mapStore.sights
+        mapStore.sights,
       );
     }
   }, [
@@ -3232,7 +3232,7 @@ export const MapPage: React.FC = observer(() => {
     selectedFeatureForSidebar !== null || selectedIds.size > 0;
 
   return (
-    <div className="flex flex-col md:flex-row font-sans bg-gray-100 h-[90vh] overflow-hidden">
+    <div className="-mb-4 flex flex-col md:flex-row font-sans bg-gray-100 h-[90vh] overflow-hidden">
       <div className="relative flex-grow flex">
         <div
           ref={mapRef}
@@ -3279,35 +3279,87 @@ export const MapPage: React.FC = observer(() => {
           />
         )}
 
-        <button
-          onClick={() => setShowHelp(!showHelp)}
-          className="absolute bottom-4 right-4 z-20 p-2 bg-white rounded-full shadow-md hover:bg-gray-100"
-          title="Помощь по клавишам"
-        >
-          <InfoIcon size={20} />
-        </button>
-
         {showHelp && (
-          <div className="absolute bottom-16 right-4 z-20 p-4 bg-white rounded-lg shadow-xl max-w-xs">
-            <h4 className="font-bold mb-2">Горячие клавиши:</h4>
-            <ul className="text-sm space-y-2">
-              <li>
-                <span className="font-mono bg-gray-100 px-1 rounded">
-                  Shift
-                </span>{" "}
-                - Режим выделения (лассо)
-              </li>
-              <li>
-                <span className="font-mono bg-gray-100 px-1 rounded">
-                  Ctrl + клик
-                </span>{" "}
-                - Добавить/убрать из выделения
-              </li>
-              <li>
-                <span className="font-mono bg-gray-100 px-1 rounded">Esc</span>{" "}
-                - Отменить выделение
-              </li>
-            </ul>
+          <div className="absolute bottom-16 right-4 z-20 p-4 bg-white rounded-lg shadow-xl max-w-md max-h-[30vh] overflow-y-auto scrollbar-visible">
+            <h4 className="font-bold mb-2">Управление картой</h4>
+            <div className="text-sm space-y-3">
+              <div>
+                <p className="font-semibold mb-1">Перемещение и масштаб:</p>
+                <ul className="space-y-1">
+                  <li>Колесо мыши — приблизить / отдалить.</li>
+                  <li>
+                    Средняя кнопка мыши (колесо зажато) — перетаскивание карты.
+                  </li>
+                </ul>
+              </div>
+
+              <div>
+                <p className="font-semibold mb-1">Выделение объектов:</p>
+                <ul className="space-y-1">
+                  <li>Одинарный клик по объекту — выделить и центрировать.</li>
+                  <li>
+                    <span className="font-mono bg-gray-100 px-1 rounded">
+                      Ctrl
+                    </span>{" "}
+                    + клик — добавить / убрать объект из выделения.
+                  </li>
+                  <li>
+                    <span className="font-mono bg-gray-100 px-1 rounded">
+                      Shift
+                    </span>{" "}
+                    — временно включить режим лассо (выделение области).
+                  </li>
+                  <li>Клик по пустому месту карты — снять выделение.</li>
+                  <li>
+                    <span className="font-mono bg-gray-100 px-1 rounded">
+                      Esc
+                    </span>{" "}
+                    — снять выделение всех объектов.
+                  </li>
+                </ul>
+              </div>
+
+              <div>
+                <p className="font-semibold mb-1">
+                  Рисование и редактирование:
+                </p>
+                <ul className="space-y-1">
+                  <li>
+                    Кнопки в верхней панели — выбор режима: редактирование,
+                    добавление остановки, достопримечательности или маршрута.
+                  </li>
+                  <li>
+                    При рисовании маршрута: правый клик — завершить линию.
+                  </li>
+                  <li>
+                    В режиме редактирования: перетаскивайте точки маршрута для
+                    изменения траектории.
+                  </li>
+                  <li>
+                    Двойной клик по внутренней точке маршрута — удалить эту
+                    точку (при наличии не менее 2 точек).
+                  </li>
+                </ul>
+              </div>
+
+              <div>
+                <p className="font-semibold mb-1">Боковая панель:</p>
+                <ul className="space-y-1">
+                  <li>Клик по строке в списке — перейти к объекту на карте.</li>
+                  <li>
+                    Иконка карандаша — открыть объект в режиме редактирования.
+                  </li>
+                  <li>
+                    Иконка карты у маршрутов — открыть предпросмотр маршрута.
+                  </li>
+                  <li>
+                    Иконка глаза у маршрутов — скрыть / показать маршрут и
+                    связанные остановки.
+                  </li>
+                  <li>Иконка корзины — удалить объект.</li>
+                </ul>
+              </div>
+            </div>
             <button
               onClick={() => setShowHelp(false)}
               className="mt-3 text-xs text-blue-600 hover:text-blue-800"
@@ -3316,6 +3368,14 @@ export const MapPage: React.FC = observer(() => {
             </button>
           </div>
         )}
+
+        <button
+          onClick={() => setShowHelp(!showHelp)}
+          className="absolute bottom-4 right-4 z-20 p-2 bg-white rounded-full shadow-md hover:bg-gray-100"
+          title="Помощь по управлению картой"
+        >
+          <InfoIcon size={20} />
+        </button>
       </div>
       {showContent && (
         <MapSightbar

src/pages/Route/RouteCreatePage/index.tsx

@@ -13,22 +13,30 @@ import {
   DialogContent,
   DialogActions,
 } from "@mui/material";
-import { MediaViewer, VideoPreviewCard } from "@widgets";
+import {
+  MediaViewer,
+  VideoPreviewCard,
+  ImageUploadCard,
+} from "@widgets";
 import { observer } from "mobx-react-lite";
 import { ArrowLeft, Loader2, Save, Plus, X } from "lucide-react";
 import { useEffect, useState, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
-import { carrierStore } from "../../../shared/store/CarrierStore";
-import { articlesStore } from "../../../shared/store/ArticlesStore";
-import { Route, routeStore } from "../../../shared/store/RouteStore";
 import {
+  carrierStore,
+  articlesStore,
+  routeStore,
   languageStore,
+  mediaStore,
+  isMediaIdEmpty,
   ArticleSelectOrCreateDialog,
   SelectMediaDialog,
   selectedCityStore,
   UploadMediaDialog,
+  PreviewMediaDialog,
 } from "@shared";
+import type { Route } from "@shared";
 
 export const RouteCreatePage = observer(() => {
   const navigate = useNavigate();
@@ -45,18 +53,27 @@ export const RouteCreatePage = observer(() => {
   const [centerLat, setCenterLat] = useState("");
   const [centerLng, setCenterLng] = useState("");
   const [videoPreview, setVideoPreview] = useState<string>("");
+  const [icon, setIcon] = useState<string>("");
   const [isLoading, setIsLoading] = useState(false);
   const [isSelectArticleDialogOpen, setIsSelectArticleDialogOpen] =
     useState(false);
   const [isSelectVideoDialogOpen, setIsSelectVideoDialogOpen] = useState(false);
   const [isVideoPreviewOpen, setIsVideoPreviewOpen] = useState(false);
   const [isUploadVideoDialogOpen, setIsUploadVideoDialogOpen] = useState(false);
+  const [isSelectIconDialogOpen, setIsSelectIconDialogOpen] = useState(false);
+  const [isUploadIconDialogOpen, setIsUploadIconDialogOpen] = useState(false);
+  const [isPreviewIconOpen, setIsPreviewIconOpen] = useState(false);
+  const [previewIconId, setPreviewIconId] = useState("");
+  const [activeIconMenuType, setActiveIconMenuType] = useState<
+    "thumbnail" | "watermark_lu" | "watermark_rd" | "image" | null
+  >(null);
   const [fileToUpload, setFileToUpload] = useState<File | null>(null);
   const { language } = languageStore;
 
   useEffect(() => {
     carrierStore.getCarriers(language);
     articlesStore.getArticleList();
+    mediaStore.getMedia();
   }, [language]);
 
   const filteredCarriers = useMemo(() => {
@@ -150,6 +167,23 @@ export const RouteCreatePage = observer(() => {
     setIsVideoPreviewOpen(true);
   };
 
+  const handleIconSelect = (media: {
+    id: string;
+    filename: string;
+    media_name?: string;
+    media_type: number;
+  }) => {
+    setIcon(media.id);
+    setIsSelectIconDialogOpen(false);
+  };
+
+  const selectedIconMedia =
+    icon && !isMediaIdEmpty(icon)
+      ? mediaStore.media.find((m) => m.id === icon)
+      : null;
+  const effectiveIconUrl = isMediaIdEmpty(icon) ? null : selectedIconMedia?.id ?? icon;
+  const effectiveVideoId = isMediaIdEmpty(videoPreview) ? null : videoPreview;
+
   const handleCreateRoute = async () => {
     try {
       setIsLoading(true);
@@ -243,8 +277,8 @@ export const RouteCreatePage = observer(() => {
         center_latitude,
         center_longitude,
         path,
-        video_preview:
-          videoPreview && videoPreview !== "" ? videoPreview : undefined,
+        video_preview: !isMediaIdEmpty(videoPreview) ? videoPreview : undefined,
+        icon: !isMediaIdEmpty(icon) ? icon : undefined,
       };
 
       if (governor_appeal !== undefined) {
@@ -403,16 +437,41 @@ export const RouteCreatePage = observer(() => {
             </Button>
           </Box>
 
-          <VideoPreviewCard
-            title="Видеозаставка"
-            videoId={videoPreview}
-            onVideoClick={handleVideoPreviewClick}
-            onDeleteVideoClick={() => {
-              setVideoPreview("");
-            }}
-            onSelectVideoClick={handleVideoFileSelect}
-            className="w-full"
-          />
+          <Box className="w-full flex justify-center gap-4 flex-wrap">
+            <div className="flex flex-col gap-4 max-w-[300px]">
+              <ImageUploadCard
+                title="Иконка маршрута"
+                imageKey="thumbnail"
+                imageUrl={effectiveIconUrl}
+                onImageClick={() => {
+                  setIsPreviewIconOpen(true);
+                  setPreviewIconId(selectedIconMedia?.id ?? icon ?? "");
+                }}
+                onDeleteImageClick={() => {
+                  setIcon("");
+                  setActiveIconMenuType(null);
+                }}
+                onSelectFileClick={() => {
+                  setActiveIconMenuType("image");
+                  setIsSelectIconDialogOpen(true);
+                }}
+                setUploadMediaOpen={() => {
+                  setIsUploadIconDialogOpen(true);
+                  setActiveIconMenuType("image");
+                }}
+              />
+            </div>
+            <div className="flex flex-col gap-4 max-w-[300px]">
+              <VideoPreviewCard
+                title="Видеозаставка"
+                videoId={effectiveVideoId}
+                onVideoClick={handleVideoPreviewClick}
+                onDeleteVideoClick={() => setVideoPreview("")}
+                onSelectVideoClick={handleVideoFileSelect}
+                className="w-full"
+              />
+            </div>
+          </Box>
 
           <FormControl fullWidth required>
             <InputLabel>Прямой/обратный маршрут</InputLabel>
@@ -522,7 +581,7 @@ export const RouteCreatePage = observer(() => {
         onSelectMedia={handleVideoSelect}
         mediaType={2}
       />
-      {videoPreview && videoPreview !== "" && (
+      {effectiveVideoId && (
         <Dialog
           open={isVideoPreviewOpen}
           onClose={() => setIsVideoPreviewOpen(false)}
@@ -534,7 +593,7 @@ export const RouteCreatePage = observer(() => {
             <Box className="flex justify-center items-center p-4">
               <MediaViewer
                 media={{
-                  id: videoPreview,
+                  id: effectiveVideoId,
                   media_type: 2,
                   filename: "video_preview",
                 }}
@@ -560,6 +619,28 @@ export const RouteCreatePage = observer(() => {
         initialFile={fileToUpload || undefined}
         afterUpload={handleVideoUpload}
       />
+
+      <SelectMediaDialog
+        open={isSelectIconDialogOpen}
+        onClose={() => setIsSelectIconDialogOpen(false)}
+        onSelectMedia={handleIconSelect}
+        mediaType={1}
+      />
+
+      <UploadMediaDialog
+        open={isUploadIconDialogOpen}
+        onClose={() => setIsUploadIconDialogOpen(false)}
+        contextObjectName={routeName || "Маршрут"}
+        contextType="route"
+        afterUpload={handleIconSelect}
+        hardcodeType={activeIconMenuType}
+      />
+
+      <PreviewMediaDialog
+        open={isPreviewIconOpen}
+        onClose={() => setIsPreviewIconOpen(false)}
+        mediaId={previewIconId}
+      />
     </Paper>
   );
 });

src/pages/Route/RouteEditPage/index.tsx

@@ -13,24 +13,31 @@ import {
   DialogContent,
   DialogActions,
 } from "@mui/material";
-import { MediaViewer, VideoPreviewCard } from "@widgets";
+import {
+  MediaViewer,
+  VideoPreviewCard,
+  ImageUploadCard,
+  DeleteModal,
+} from "@widgets";
 import { observer } from "mobx-react-lite";
 import { ArrowLeft, Copy, Save, Plus, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-
-import { carrierStore } from "../../../shared/store/CarrierStore";
-import { articlesStore } from "../../../shared/store/ArticlesStore";
+import { toast } from "react-toastify";
 import {
+  carrierStore,
+  articlesStore,
   routeStore,
   languageStore,
+  mediaStore,
+  isMediaIdEmpty,
+  stationsStore,
   ArticleSelectOrCreateDialog,
   SelectMediaDialog,
   UploadMediaDialog,
+  PreviewMediaDialog,
   LoadingSpinner,
 } from "@shared";
-import { toast } from "react-toastify";
-import { stationsStore } from "@shared";
 import { LinkedItems } from "../LinekedStations";
 
 export const RouteEditPage = observer(() => {
@@ -44,6 +51,14 @@ export const RouteEditPage = observer(() => {
   const [isSelectVideoDialogOpen, setIsSelectVideoDialogOpen] = useState(false);
   const [isVideoPreviewOpen, setIsVideoPreviewOpen] = useState(false);
   const [isUploadVideoDialogOpen, setIsUploadVideoDialogOpen] = useState(false);
+  const [isSelectIconDialogOpen, setIsSelectIconDialogOpen] = useState(false);
+  const [isUploadIconDialogOpen, setIsUploadIconDialogOpen] = useState(false);
+  const [isPreviewIconOpen, setIsPreviewIconOpen] = useState(false);
+  const [isDeleteIconModalOpen, setIsDeleteIconModalOpen] = useState(false);
+  const [previewIconId, setPreviewIconId] = useState("");
+  const [activeIconMenuType, setActiveIconMenuType] = useState<
+    "thumbnail" | "watermark_lu" | "watermark_rd" | "image" | null
+  >(null);
   const [fileToUpload, setFileToUpload] = useState<File | null>(null);
   const { language } = languageStore;
   const [coordinates, setCoordinates] = useState<string>("");
@@ -71,10 +86,32 @@ export const RouteEditPage = observer(() => {
       await carrierStore.getCarriers(language);
       await stationsStore.getStations();
       await articlesStore.getArticleList();
+      await mediaStore.getMedia();
     };
     fetchData();
   }, [id, language]);
 
+  const handleIconSelect = (media: {
+    id: string;
+    filename: string;
+    media_name?: string;
+    media_type: number;
+  }) => {
+    routeStore.setEditRouteData({ icon: media.id });
+    setIsSelectIconDialogOpen(false);
+  };
+
+  const selectedIconMedia =
+    editRouteData.icon && !isMediaIdEmpty(editRouteData.icon)
+      ? mediaStore.media.find((m) => m.id === editRouteData.icon)
+      : null;
+  const effectiveIconUrl = isMediaIdEmpty(editRouteData.icon)
+    ? null
+    : (selectedIconMedia?.id ?? editRouteData.icon);
+  const effectiveVideoId = isMediaIdEmpty(editRouteData.video_preview)
+    ? null
+    : editRouteData.video_preview;
+
   useEffect(() => {
     if (editRouteData.path && editRouteData.path.length > 0) {
       const formattedPath = editRouteData.path
@@ -552,16 +589,42 @@ export const RouteEditPage = observer(() => {
             </Button>
           </Box>
 
-          <VideoPreviewCard
-            title="Видеозаставка"
-            videoId={editRouteData.video_preview}
-            onVideoClick={handleVideoPreviewClick}
-            onDeleteVideoClick={() => {
-              routeStore.setEditRouteData({ video_preview: "" });
-            }}
-            onSelectVideoClick={handleVideoFileSelect}
-            className="w-full"
-          />
+          <Box className="w-full flex justify-center gap-4 flex-wrap">
+            <div className="flex flex-col gap-4 max-w-[300px]">
+              <ImageUploadCard
+                title="Иконка маршрута"
+                imageKey="thumbnail"
+                imageUrl={effectiveIconUrl}
+                onImageClick={() => {
+                  setIsPreviewIconOpen(true);
+                  setPreviewIconId(
+                    selectedIconMedia?.id ?? editRouteData.icon ?? ""
+                  );
+                }}
+                onDeleteImageClick={() => setIsDeleteIconModalOpen(true)}
+                onSelectFileClick={() => {
+                  setActiveIconMenuType("image");
+                  setIsSelectIconDialogOpen(true);
+                }}
+                setUploadMediaOpen={() => {
+                  setIsUploadIconDialogOpen(true);
+                  setActiveIconMenuType("image");
+                }}
+              />
+            </div>
+            <div className="flex flex-col gap-4 max-w-[300px]">
+              <VideoPreviewCard
+                title="Видеозаставка"
+                videoId={effectiveVideoId}
+                onVideoClick={handleVideoPreviewClick}
+                onDeleteVideoClick={() => {
+                  routeStore.setEditRouteData({ video_preview: "" });
+                }}
+                onSelectVideoClick={handleVideoFileSelect}
+                className="w-full"
+              />
+            </div>
+          </Box>
         </Box>
 
         <LinkedItems
@@ -621,10 +684,10 @@ export const RouteEditPage = observer(() => {
         <DialogTitle>Предпросмотр видео</DialogTitle>
         <DialogContent>
           <Box className="flex justify-center items-center p-4">
-            {editRouteData.video_preview && (
+            {effectiveVideoId && (
               <MediaViewer
                 media={{
-                  id: editRouteData.video_preview,
+                  id: effectiveVideoId,
                   media_type: 2,
                   filename: "video_preview",
                 }}
@@ -648,6 +711,38 @@ export const RouteEditPage = observer(() => {
         initialFile={fileToUpload || undefined}
         afterUpload={handleVideoUpload}
       />
+
+      <SelectMediaDialog
+        open={isSelectIconDialogOpen}
+        onClose={() => setIsSelectIconDialogOpen(false)}
+        onSelectMedia={handleIconSelect}
+        mediaType={1}
+      />
+
+      <UploadMediaDialog
+        open={isUploadIconDialogOpen}
+        onClose={() => setIsUploadIconDialogOpen(false)}
+        contextObjectName={editRouteData.route_name || "Маршрут"}
+        contextType="route"
+        afterUpload={handleIconSelect}
+        hardcodeType={activeIconMenuType}
+      />
+
+      <PreviewMediaDialog
+        open={isPreviewIconOpen}
+        onClose={() => setIsPreviewIconOpen(false)}
+        mediaId={previewIconId}
+      />
+
+      <DeleteModal
+        open={isDeleteIconModalOpen}
+        onDelete={() => {
+          routeStore.setEditRouteData({ icon: "" });
+          setIsDeleteIconModalOpen(false);
+        }}
+        onCancel={() => setIsDeleteIconModalOpen(false)}
+        edit
+      />
     </Paper>
   );
 });

src/pages/Route/route-preview/LeftSidebar.tsx

@@ -4,7 +4,7 @@ import { MediaViewer } from "@widgets";
 import { useMapData } from "./MapDataContext";
 import { observer } from "mobx-react-lite";
 import { useEffect, useState } from "react";
-import { authInstance } from "@shared";
+import { authInstance, isMediaIdEmpty } from "@shared";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import LanguageSelector from "./web-gl/LanguageSelector";
 
@@ -106,7 +106,7 @@ export const LeftSidebar = observer(({ open, onToggle }: LeftSidebarProps) => {
                 gap: 10,
               }}
             >
-              {carrierThumbnail && (
+              {carrierThumbnail && !isMediaIdEmpty(carrierThumbnail) && (
                 <MediaViewer
                   media={{
                     id: carrierThumbnail,
@@ -143,7 +143,7 @@ export const LeftSidebar = observer(({ open, onToggle }: LeftSidebarProps) => {
           justifyContent="center"
           flexGrow={1}
         >
-          {carrierLogo && (
+          {carrierLogo && !isMediaIdEmpty(carrierLogo) && (
             <MediaViewer
               media={{
                 id: carrierLogo,

src/pages/Route/route-preview/types.ts

@@ -33,6 +33,7 @@ export interface StationData {
   address: string;
   city_id?: number;
   description: string;
+  icon?: string;
   id: number;
   latitude: number;
   longitude: number;

src/pages/Route/route-preview/webgl-prototype/WebGLRouteMapPrototype.tsx

@@ -1960,6 +1960,11 @@ export const WebGLRouteMapPrototype = observer(() => {
                 ? { right: 0, transform: "none" }
                 : { left: "50%", transform: "translateX(-50%)" };
 
+            const iconUrl = station.icon
+              ? `${import.meta.env.VITE_KRBL_MEDIA}${station.icon}/download?token=${localStorage.getItem("token") ?? ""}`
+              : null;
+            const iconSizePx = Math.round(primaryFontSize * 1.2);
+
             const secondaryLineHeight = 1.2;
             const secondaryHeight = showSecondary
               ? secondaryFontSize * secondaryLineHeight
@@ -2019,10 +2024,24 @@ export const WebGLRouteMapPrototype = observer(() => {
                       <div
                         style={{
                           position: "relative",
-                          display: "inline-block",
+                          display: "inline-flex",
+                          alignItems: "center",
+                          gap: iconUrl ? 6 : 0,
                           pointerEvents: "none",
                         }}
                       >
+                        {iconUrl ? (
+                          <img
+                            src={iconUrl}
+                            alt=""
+                            style={{
+                              width: iconSizePx,
+                              height: iconSizePx,
+                              flexShrink: 0,
+                              pointerEvents: "none",
+                            }}
+                          />
+                        ) : null}
                         <div
                           style={{
                             fontWeight: 700,
@@ -2263,4 +2282,4 @@ export const WebGLRouteMapPrototype = observer(() => {
   );
 });
 
-export default WebGLRouteMapPrototype;
+export default WebGLRouteMapPrototype;

src/pages/Snapshot/SnapshotCreatePage/index.tsx

@@ -25,7 +25,7 @@ export const SnapshotCreatePage = observer(() => {
             Назад
           </button>
         </div>
-        <h1 className="text-2xl font-bold">Создание снапшота</h1>
+        <h1 className="text-2xl font-bold">Создание экспорта медиа</h1>
         <div className="flex flex-col gap-10 w-full items-end">
           <TextField
             className="w-full"
@@ -53,7 +53,7 @@ export const SnapshotCreatePage = observer(() => {
                 }
 
                 if (snapshotStore.snapshotStatus?.Status === "done") {
-                  toast.success("Снапшот успешно создан");
+                  toast.success("Экспорт медиа успешно создан");
 
                   runInAction(() => {
                     snapshotStore.snapshotStatus = null;
@@ -63,7 +63,7 @@ export const SnapshotCreatePage = observer(() => {
                 }
               } catch (error) {
                 console.error(error);
-                toast.error("Ошибка при создании снапшота");
+                toast.error("Ошибка при создании экспорта медиа");
               } finally {
                 setIsLoading(false);
               }

src/pages/Snapshot/SnapshotListPage/index.tsx

@@ -30,6 +30,14 @@ export const SnapshotListPage = observer(() => {
     fetchSnapshots();
   }, [language]);
 
+  const formatCreationTime = (isoString: string | undefined) => {
+    if (!isoString) return "";
+    const [datePart, timePartWithMs] = isoString.split("T");
+    if (!datePart || !timePartWithMs) return isoString;
+    const timePart = timePartWithMs.split(".")[0];
+    return `${datePart} - ${timePart}`;
+  };
+
   const columns: GridColDef[] = [
     {
       field: "name",
@@ -41,7 +49,14 @@ export const SnapshotListPage = observer(() => {
       headerName: "Родитель",
       flex: 1,
     },
-
+    {
+      field: "created_at",
+      headerName: "Дата создания",
+      flex: 1,
+      renderCell: (params: GridRenderCellParams) => {
+        return <div>{params.value ? params.value : "-"}</div>;
+      },
+    },
     {
       field: "actions",
       headerName: "Действия",
@@ -79,14 +94,15 @@ export const SnapshotListPage = observer(() => {
     id: snapshot.ID,
     name: snapshot.Name,
     parent: snapshots.find((s) => s.ID === snapshot.ParentID)?.Name,
+    created_at: formatCreationTime(snapshot.CreationTime),
   }));
 
   return (
     <>
       <div style={{ width: "100%" }}>
         <div className="flex justify-between items-center mb-10">
-          <h1 className="text-2xl ">Снапшоты</h1>
-          <CreateButton label="Создать снапшот" path="/snapshot/create" />
+          <h1 className="text-2xl ">Экспорт Медиа</h1>
+          <CreateButton label="Создать экспорт медиа" path="/snapshot/create" />
         </div>
         <DataGrid
           rows={rows}
@@ -99,7 +115,11 @@ export const SnapshotListPage = observer(() => {
           slots={{
             noRowsOverlay: () => (
               <Box sx={{ mt: 5, textAlign: "center", color: "text.secondary" }}>
-                {isLoading ? <CircularProgress size={20} /> : "Нет снапшотов"}
+                {isLoading ? (
+                  <CircularProgress size={20} />
+                ) : (
+                  "Нет экспортов медиа"
+                )}
               </Box>
             ),
           }}

src/pages/Station/StationCreatePage/index.tsx

@@ -1,26 +1,33 @@
 import {
   Button,
-  Paper,
   TextField,
   Select,
   MenuItem,
   FormControl,
   InputLabel,
+  Box,
 } from "@mui/material";
 import { observer } from "mobx-react-lite";
-import { ArrowLeft, Save } from "lucide-react";
-import { Loader2 } from "lucide-react";
+import { ArrowLeft, Loader2, Save } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import {
   stationsStore,
   languageStore,
   cityStore,
+  mediaStore,
+  isMediaIdEmpty,
   useSelectedCity,
+  SelectMediaDialog,
+  UploadMediaDialog,
+  PreviewMediaDialog,
 } from "@shared";
 import { useEffect, useState } from "react";
-import { LanguageSwitcher } from "@widgets";
-import { SaveWithoutCityAgree } from "@widgets";
+import {
+  ImageUploadCard,
+  LanguageSwitcher,
+  SaveWithoutCityAgree,
+} from "@widgets";
 
 export const StationCreatePage = observer(() => {
   const navigate = useNavigate();
@@ -35,6 +42,13 @@ export const StationCreatePage = observer(() => {
   const { cities, getCities } = cityStore;
   const { selectedCityId, selectedCity } = useSelectedCity();
   const [coordinates, setCoordinates] = useState<string>("");
+  const [isSelectMediaOpen, setIsSelectMediaOpen] = useState(false);
+  const [isUploadMediaOpen, setIsUploadMediaOpen] = useState(false);
+  const [isPreviewMediaOpen, setIsPreviewMediaOpen] = useState(false);
+  const [mediaId, setMediaId] = useState("");
+  const [activeMenuType, setActiveMenuType] = useState<
+    "thumbnail" | "watermark_lu" | "watermark_rd" | "image" | null
+  >(null);
 
   const [isSaveWarningOpen, setIsSaveWarningOpen] = useState(false);
 
@@ -96,8 +110,27 @@ export const StationCreatePage = observer(() => {
     };
 
     fetchCities();
+    mediaStore.getMedia();
   }, []);
 
+  const handleMediaSelect = (media: {
+    id: string;
+    filename: string;
+    media_name?: string;
+    media_type: number;
+  }) => {
+    setCreateCommonData({ icon: media.id });
+  };
+
+  const selectedMedia =
+    createStationData.common.icon &&
+    !isMediaIdEmpty(createStationData.common.icon)
+      ? mediaStore.media.find((m) => m.id === createStationData.common.icon)
+      : null;
+  const effectiveIconUrl = isMediaIdEmpty(createStationData.common.icon)
+    ? null
+    : selectedMedia?.id ?? createStationData.common.icon;
+
   useEffect(() => {
     if (selectedCityId && selectedCity && !createStationData.common.city_id) {
       setCreateCommonData({
@@ -108,7 +141,7 @@ export const StationCreatePage = observer(() => {
   }, [selectedCityId, selectedCity, createStationData.common.city_id]);
 
   return (
-    <Paper className="w-full h-full p-3 flex flex-col gap-10">
+    <Box className="w-full h-full p-3 flex flex-col gap-10">
       <LanguageSwitcher />
       <div className="flex items-center gap-4">
         <button
@@ -213,6 +246,30 @@ export const StationCreatePage = observer(() => {
           </Select>
         </FormControl>
 
+        <div className="w-full flex flex-col gap-4 max-w-[300px] mx-auto">
+          <ImageUploadCard
+            title="Иконка остановки"
+            imageKey="thumbnail"
+            imageUrl={effectiveIconUrl}
+            onImageClick={() => {
+              setIsPreviewMediaOpen(true);
+              setMediaId(effectiveIconUrl ?? "");
+            }}
+            onDeleteImageClick={() => {
+              setCreateCommonData({ icon: "" });
+              setActiveMenuType(null);
+            }}
+            onSelectFileClick={() => {
+              setActiveMenuType("image");
+              setIsSelectMediaOpen(true);
+            }}
+            setUploadMediaOpen={() => {
+              setIsUploadMediaOpen(true);
+              setActiveMenuType("image");
+            }}
+          />
+        </div>
+
         <Button
           variant="contained"
           className="w-min flex gap-2 items-center"
@@ -229,6 +286,28 @@ export const StationCreatePage = observer(() => {
       </div>
 
       {/* ИНТЕГРИРОВАННОЕ ПРЕДУПРЕЖДАЮЩЕЕ ОКНО */}
+      <SelectMediaDialog
+        open={isSelectMediaOpen}
+        onClose={() => setIsSelectMediaOpen(false)}
+        onSelectMedia={handleMediaSelect}
+        mediaType={1}
+      />
+
+      <UploadMediaDialog
+        open={isUploadMediaOpen}
+        onClose={() => setIsUploadMediaOpen(false)}
+        contextObjectName={createStationData[language].name || "Остановка"}
+        contextType="station"
+        afterUpload={handleMediaSelect}
+        hardcodeType={activeMenuType}
+      />
+
+      <PreviewMediaDialog
+        open={isPreviewMediaOpen}
+        onClose={() => setIsPreviewMediaOpen(false)}
+        mediaId={mediaId}
+      />
+
       {isSaveWarningOpen && (
         <SaveWithoutCityAgree
           blocker={{
@@ -237,6 +316,6 @@ export const StationCreatePage = observer(() => {
           }}
         />
       )}
-    </Paper>
+    </Box>
   );
 });

src/pages/Station/StationEditPage/index.tsx

@@ -1,6 +1,5 @@
 import {
   Button,
-  Paper,
   TextField,
   Select,
   MenuItem,
@@ -9,20 +8,28 @@ import {
   Box,
 } from "@mui/material";
 import { observer } from "mobx-react-lite";
-import { ArrowLeft, Save } from "lucide-react";
-import { Loader2 } from "lucide-react";
+import { ArrowLeft, Loader2, Save } from "lucide-react";
 import { useNavigate, useParams } from "react-router-dom";
 import { toast } from "react-toastify";
 import {
   stationsStore,
   languageStore,
   cityStore,
+  mediaStore,
+  isMediaIdEmpty,
   LoadingSpinner,
+  SelectMediaDialog,
+  PreviewMediaDialog,
+  UploadMediaDialog,
 } from "@shared";
 import { useEffect, useState } from "react";
-import { LanguageSwitcher } from "@widgets";
+import {
+  ImageUploadCard,
+  LanguageSwitcher,
+  SaveWithoutCityAgree,
+  DeleteModal,
+} from "@widgets";
 import { LinkedSights } from "../LinkedSights";
-import { SaveWithoutCityAgree } from "@widgets";
 
 export const StationEditPage = observer(() => {
   const navigate = useNavigate();
@@ -39,6 +46,14 @@ export const StationEditPage = observer(() => {
   } = stationsStore;
   const { cities, getCities } = cityStore;
   const [coordinates, setCoordinates] = useState<string>("");
+  const [isSelectMediaOpen, setIsSelectMediaOpen] = useState(false);
+  const [isUploadMediaOpen, setIsUploadMediaOpen] = useState(false);
+  const [isPreviewMediaOpen, setIsPreviewMediaOpen] = useState(false);
+  const [mediaId, setMediaId] = useState("");
+  const [isDeleteIconModalOpen, setIsDeleteIconModalOpen] = useState(false);
+  const [activeMenuType, setActiveMenuType] = useState<
+    "thumbnail" | "watermark_lu" | "watermark_rd" | "image" | null
+  >(null);
 
   const [isSaveWarningOpen, setIsSaveWarningOpen] = useState(false);
 
@@ -95,6 +110,23 @@ export const StationEditPage = observer(() => {
     setIsSaveWarningOpen(false);
   };
 
+  const handleMediaSelect = (media: {
+    id: string;
+    filename: string;
+    media_name?: string;
+    media_type: number;
+  }) => {
+    setEditCommonData({ icon: media.id });
+  };
+
+  const selectedMedia =
+    editStationData.common.icon && !isMediaIdEmpty(editStationData.common.icon)
+      ? mediaStore.media.find((m) => m.id === editStationData.common.icon)
+      : null;
+  const effectiveIconUrl = isMediaIdEmpty(editStationData.common.icon)
+    ? null
+    : selectedMedia?.id ?? editStationData.common.icon;
+
   useEffect(() => {
     const fetchAndSetStationData = async () => {
       if (!id) {
@@ -109,6 +141,7 @@ export const StationEditPage = observer(() => {
         await getCities("ru");
         await getCities("en");
         await getCities("zh");
+        await mediaStore.getMedia();
       } finally {
         setIsLoadingData(false);
       }
@@ -133,7 +166,7 @@ export const StationEditPage = observer(() => {
   }
 
   return (
-    <Paper className="w-full h-full p-3 flex flex-col gap-10">
+    <Box className="w-full h-full p-3 flex flex-col gap-10">
       <LanguageSwitcher />
 
       <div className="flex items-center gap-4">
@@ -239,6 +272,29 @@ export const StationEditPage = observer(() => {
           </Select>
         </FormControl>
 
+        <div className="w-full flex flex-col gap-4 max-w-[300px] mx-auto">
+          <ImageUploadCard
+            title="Иконка остановки"
+            imageKey="thumbnail"
+            imageUrl={effectiveIconUrl}
+            onImageClick={() => {
+              setIsPreviewMediaOpen(true);
+              setMediaId(effectiveIconUrl ?? "");
+            }}
+            onDeleteImageClick={() => {
+              setIsDeleteIconModalOpen(true);
+            }}
+            onSelectFileClick={() => {
+              setActiveMenuType("image");
+              setIsSelectMediaOpen(true);
+            }}
+            setUploadMediaOpen={() => {
+              setIsUploadMediaOpen(true);
+              setActiveMenuType("image");
+            }}
+          />
+        </div>
+
         {id && (
           <LinkedSights
             parentId={Number(id)}
@@ -262,6 +318,38 @@ export const StationEditPage = observer(() => {
         </Button>
       </div>
 
+      <SelectMediaDialog
+        open={isSelectMediaOpen}
+        onClose={() => setIsSelectMediaOpen(false)}
+        onSelectMedia={handleMediaSelect}
+        mediaType={1}
+      />
+
+      <UploadMediaDialog
+        open={isUploadMediaOpen}
+        onClose={() => setIsUploadMediaOpen(false)}
+        contextObjectName={editStationData[language].name || "Остановка"}
+        contextType="station"
+        afterUpload={handleMediaSelect}
+        hardcodeType={activeMenuType}
+      />
+
+      <PreviewMediaDialog
+        open={isPreviewMediaOpen}
+        onClose={() => setIsPreviewMediaOpen(false)}
+        mediaId={mediaId}
+      />
+
+      <DeleteModal
+        open={isDeleteIconModalOpen}
+        onDelete={() => {
+          setEditCommonData({ icon: "" });
+          setIsDeleteIconModalOpen(false);
+        }}
+        onCancel={() => setIsDeleteIconModalOpen(false)}
+        edit
+      />
+
       {/* ИНТЕГРИРОВАННОЕ ПРЕДУПРЕЖДАЮЩЕЕ ОКНО */}
       {isSaveWarningOpen && (
         <SaveWithoutCityAgree
@@ -271,6 +359,6 @@ export const StationEditPage = observer(() => {
           }}
         />
       )}
-    </Paper>
+    </Box>
   );
 });

src/pages/User/UserCreatePage/index.tsx

@@ -6,17 +6,35 @@ import {
   FormControlLabel,
 } from "@mui/material";
 import { observer } from "mobx-react-lite";
-import { ArrowLeft, Save } from "lucide-react";
-import { Loader2 } from "lucide-react";
+import { ArrowLeft, Loader2, Save } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
-import { userStore } from "@shared";
-import { useState } from "react";
+import {
+  userStore,
+  mediaStore,
+  isMediaIdEmpty,
+  SelectMediaDialog,
+  UploadMediaDialog,
+  PreviewMediaDialog,
+} from "@shared";
+import { useState, useEffect } from "react";
+import { ImageUploadCard } from "@widgets";
 
 export const UserCreatePage = observer(() => {
   const navigate = useNavigate();
   const { createUserData, setCreateUserData, createUser } = userStore;
   const [isLoading, setIsLoading] = useState(false);
+  const [isSelectMediaOpen, setIsSelectMediaOpen] = useState(false);
+  const [isUploadMediaOpen, setIsUploadMediaOpen] = useState(false);
+  const [isPreviewMediaOpen, setIsPreviewMediaOpen] = useState(false);
+  const [mediaId, setMediaId] = useState("");
+  const [activeMenuType, setActiveMenuType] = useState<
+    "thumbnail" | "watermark_lu" | "watermark_rd" | "image" | null
+  >(null);
+
+  useEffect(() => {
+    mediaStore.getMedia();
+  }, []);
 
   const handleCreate = async () => {
     try {
@@ -31,6 +49,29 @@ export const UserCreatePage = observer(() => {
     }
   };
 
+  const handleMediaSelect = (media: {
+    id: string;
+    filename: string;
+    media_name?: string;
+    media_type: number;
+  }) => {
+    setCreateUserData(
+      createUserData.name || "",
+      createUserData.email || "",
+      createUserData.password || "",
+      createUserData.is_admin || false,
+      media.id
+    );
+  };
+
+  const selectedMedia =
+    createUserData.icon && !isMediaIdEmpty(createUserData.icon)
+      ? mediaStore.media.find((m) => m.id === createUserData.icon)
+      : null;
+  const effectiveIconUrl = isMediaIdEmpty(createUserData.icon)
+    ? null
+    : selectedMedia?.id ?? createUserData.icon ?? null;
+
   return (
     <Paper className="w-full h-full p-3 flex flex-col gap-10">
       <div className="flex items-center gap-4">
@@ -54,7 +95,8 @@ export const UserCreatePage = observer(() => {
               e.target.value,
               createUserData.email || "",
               createUserData.password || "",
-              createUserData.is_admin || false
+              createUserData.is_admin || false,
+              createUserData.icon
             )
           }
         />
@@ -69,7 +111,8 @@ export const UserCreatePage = observer(() => {
               createUserData.name || "",
               e.target.value,
               createUserData.password || "",
-              createUserData.is_admin || false
+              createUserData.is_admin || false,
+              createUserData.icon
             )
           }
         />
@@ -84,7 +127,8 @@ export const UserCreatePage = observer(() => {
               createUserData.name || "",
               createUserData.email || "",
               e.target.value,
-              createUserData.is_admin || false
+              createUserData.is_admin || false,
+              createUserData.icon
             )
           }
         />
@@ -99,7 +143,8 @@ export const UserCreatePage = observer(() => {
                     createUserData.name || "",
                     createUserData.email || "",
                     createUserData.password || "",
-                    e.target.checked
+                    e.target.checked,
+                    createUserData.icon
                   );
                 }}
               />
@@ -108,6 +153,36 @@ export const UserCreatePage = observer(() => {
           />
         </div>
 
+        <div className="w-full flex flex-col gap-4 max-w-[300px] mx-auto">
+          <ImageUploadCard
+            title="Аватар"
+            imageKey="thumbnail"
+            imageUrl={effectiveIconUrl}
+            onImageClick={() => {
+              setIsPreviewMediaOpen(true);
+              setMediaId(effectiveIconUrl ?? "");
+            }}
+            onDeleteImageClick={() => {
+              setCreateUserData(
+                createUserData.name || "",
+                createUserData.email || "",
+                createUserData.password || "",
+                createUserData.is_admin || false,
+                ""
+              );
+              setActiveMenuType(null);
+            }}
+            onSelectFileClick={() => {
+              setActiveMenuType("image");
+              setIsSelectMediaOpen(true);
+            }}
+            setUploadMediaOpen={() => {
+              setIsUploadMediaOpen(true);
+              setActiveMenuType("image");
+            }}
+          />
+        </div>
+
         <Button
           variant="contained"
           className="w-min flex gap-2 items-center"
@@ -124,6 +199,28 @@ export const UserCreatePage = observer(() => {
           )}
         </Button>
       </div>
+
+      <SelectMediaDialog
+        open={isSelectMediaOpen}
+        onClose={() => setIsSelectMediaOpen(false)}
+        onSelectMedia={handleMediaSelect}
+        mediaType={1}
+      />
+
+      <UploadMediaDialog
+        open={isUploadMediaOpen}
+        onClose={() => setIsUploadMediaOpen(false)}
+        contextObjectName={createUserData.name || "Пользователь"}
+        contextType="user"
+        afterUpload={handleMediaSelect}
+        hardcodeType={activeMenuType}
+      />
+
+      <PreviewMediaDialog
+        open={isPreviewMediaOpen}
+        onClose={() => setIsPreviewMediaOpen(false)}
+        mediaId={mediaId}
+      />
     </Paper>
   );
 });

src/pages/User/UserEditPage/index.tsx

@@ -7,12 +7,21 @@ import {
   Box,
 } from "@mui/material";
 import { observer } from "mobx-react-lite";
-import { ArrowLeft, Save } from "lucide-react";
-import { Loader2 } from "lucide-react";
+import { ArrowLeft, Loader2, Save } from "lucide-react";
 import { useNavigate, useParams } from "react-router-dom";
 import { toast } from "react-toastify";
-import { userStore, languageStore, LoadingSpinner } from "@shared";
+import {
+  userStore,
+  languageStore,
+  LoadingSpinner,
+  mediaStore,
+  isMediaIdEmpty,
+  SelectMediaDialog,
+  UploadMediaDialog,
+  PreviewMediaDialog,
+} from "@shared";
 import { useEffect, useState } from "react";
+import { ImageUploadCard, DeleteModal } from "@widgets";
 
 export const UserEditPage = observer(() => {
   const navigate = useNavigate();
@@ -22,8 +31,16 @@ export const UserEditPage = observer(() => {
   const { id } = useParams();
   const { editUserData, editUser, getUser, setEditUserData } = userStore;
 
+  const [isSelectMediaOpen, setIsSelectMediaOpen] = useState(false);
+  const [isUploadMediaOpen, setIsUploadMediaOpen] = useState(false);
+  const [isPreviewMediaOpen, setIsPreviewMediaOpen] = useState(false);
+  const [mediaId, setMediaId] = useState("");
+  const [isDeleteIconModalOpen, setIsDeleteIconModalOpen] = useState(false);
+  const [activeMenuType, setActiveMenuType] = useState<
+    "thumbnail" | "watermark_lu" | "watermark_rd" | "image" | null
+  >(null);
+
   useEffect(() => {
-    // Устанавливаем русский язык при загрузке страницы
     languageStore.setLanguage("ru");
   }, []);
 
@@ -40,19 +57,38 @@ export const UserEditPage = observer(() => {
     }
   };
 
+  const handleMediaSelect = (media: {
+    id: string;
+    filename: string;
+    media_name?: string;
+    media_type: number;
+  }) => {
+    setEditUserData(
+      editUserData.name || "",
+      editUserData.email || "",
+      editUserData.password || "",
+      editUserData.is_admin || false,
+      media.id
+    );
+  };
+
   useEffect(() => {
     (async () => {
       if (id) {
         setIsLoadingData(true);
         try {
+          await mediaStore.getMedia();
           const data = await getUser(Number(id));
 
-          setEditUserData(
-            data?.name || "",
-            data?.email || "",
-            data?.password || "",
-            data?.is_admin || false
-          );
+          if (data) {
+            setEditUserData(
+              data.name || "",
+              data.email || "",
+              data.password || "",
+              data.is_admin || false,
+              data.icon || ""
+            );
+          }
         } finally {
           setIsLoadingData(false);
         }
@@ -62,6 +98,14 @@ export const UserEditPage = observer(() => {
     })();
   }, [id]);
 
+  const selectedMedia =
+    editUserData.icon && !isMediaIdEmpty(editUserData.icon)
+      ? mediaStore.media.find((m) => m.id === editUserData.icon)
+      : null;
+  const effectiveIconUrl = isMediaIdEmpty(editUserData.icon)
+    ? null
+    : selectedMedia?.id ?? editUserData.icon ?? null;
+
   if (isLoadingData) {
     return (
       <Box
@@ -100,7 +144,8 @@ export const UserEditPage = observer(() => {
               e.target.value,
               editUserData.email || "",
               editUserData.password || "",
-              editUserData.is_admin || false
+              editUserData.is_admin || false,
+              editUserData.icon
             )
           }
         />
@@ -114,7 +159,8 @@ export const UserEditPage = observer(() => {
               editUserData.name || "",
               e.target.value,
               editUserData.password || "",
-              editUserData.is_admin || false
+              editUserData.is_admin || false,
+              editUserData.icon
             )
           }
         />
@@ -129,7 +175,8 @@ export const UserEditPage = observer(() => {
               editUserData.name || "",
               editUserData.email || "",
               e.target.value,
-              editUserData.is_admin || false
+              editUserData.is_admin || false,
+              editUserData.icon
             )
           }
         />
@@ -142,7 +189,8 @@ export const UserEditPage = observer(() => {
                   editUserData.name || "",
                   editUserData.email || "",
                   editUserData.password || "",
-                  e.target.checked
+                  e.target.checked,
+                  editUserData.icon
                 )
               }
             />
@@ -150,6 +198,27 @@ export const UserEditPage = observer(() => {
           label="Администратор"
         />
 
+        <div className="w-full flex flex-col gap-4 max-w-[300px]">
+          <ImageUploadCard
+            title="Аватар"
+            imageKey="thumbnail"
+            imageUrl={effectiveIconUrl}
+            onImageClick={() => {
+              setIsPreviewMediaOpen(true);
+              setMediaId(effectiveIconUrl ?? "");
+            }}
+            onDeleteImageClick={() => setIsDeleteIconModalOpen(true)}
+            onSelectFileClick={() => {
+              setActiveMenuType("image");
+              setIsSelectMediaOpen(true);
+            }}
+            setUploadMediaOpen={() => {
+              setIsUploadMediaOpen(true);
+              setActiveMenuType("image");
+            }}
+          />
+        </div>
+
         <Button
           variant="contained"
           className="w-min flex gap-2 items-center self-end"
@@ -164,6 +233,44 @@ export const UserEditPage = observer(() => {
           )}
         </Button>
       </div>
+
+      <SelectMediaDialog
+        open={isSelectMediaOpen}
+        onClose={() => setIsSelectMediaOpen(false)}
+        onSelectMedia={handleMediaSelect}
+        mediaType={1}
+      />
+
+      <UploadMediaDialog
+        open={isUploadMediaOpen}
+        onClose={() => setIsUploadMediaOpen(false)}
+        contextObjectName={editUserData.name || "Пользователь"}
+        contextType="user"
+        afterUpload={handleMediaSelect}
+        hardcodeType={activeMenuType}
+      />
+
+      <PreviewMediaDialog
+        open={isPreviewMediaOpen}
+        onClose={() => setIsPreviewMediaOpen(false)}
+        mediaId={mediaId}
+      />
+
+      <DeleteModal
+        open={isDeleteIconModalOpen}
+        onDelete={() => {
+          setEditUserData(
+            editUserData.name || "",
+            editUserData.email || "",
+            editUserData.password || "",
+            editUserData.is_admin || false,
+            ""
+          );
+          setIsDeleteIconModalOpen(false);
+        }}
+        onCancel={() => setIsDeleteIconModalOpen(false)}
+        edit
+      />
     </Paper>
   );
 });

src/pages/Vehicle/VehicleCreatePage/index.tsx

@@ -25,6 +25,7 @@ export const VehicleCreatePage = observer(() => {
   const [tailNumber, setTailNumber] = useState("");
   const [type, setType] = useState("");
   const [carrierId, setCarrierId] = useState<number | null>(null);
+  const [model, setModel] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const { language } = languageStore;
 
@@ -40,7 +41,8 @@ export const VehicleCreatePage = observer(() => {
         Number(type),
         carrierStore.carriers[language].data?.find((c) => c.id === carrierId)
           ?.full_name as string,
-        carrierId!
+        carrierId!,
+        model || undefined,
       );
       toast.success("Транспорт успешно создан");
     } catch (error) {
@@ -103,6 +105,14 @@ export const VehicleCreatePage = observer(() => {
           </Select>
         </FormControl>
 
+        <TextField
+          fullWidth
+          label="Модель ТС"
+          value={model}
+          onChange={(e) => setModel(e.target.value)}
+          placeholder="Произвольное название модели"
+        />
+
         <Button
           variant="contained"
           className="w-min flex gap-2 items-center"

src/pages/Vehicle/VehicleEditPage/index.tsx

@@ -7,6 +7,8 @@ import {
   InputLabel,
   Button,
   Box,
+  FormControlLabel,
+  Checkbox,
 } from "@mui/material";
 import { observer } from "mobx-react-lite";
 import { ArrowLeft, Loader2, Save } from "lucide-react";
@@ -54,10 +56,13 @@ export const VehicleEditPage = observer(() => {
         await getCarriers(language);
 
         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,
+          tail_number: vehicle[Number(id)]?.vehicle.tail_number ?? "",
+          type: vehicle[Number(id)]?.vehicle.type ?? 0,
+          carrier: vehicle[Number(id)]?.vehicle.carrier ?? "",
+          carrier_id: vehicle[Number(id)]?.vehicle.carrier_id ?? 0,
+          model: vehicle[Number(id)]?.vehicle.model ?? "",
+          snapshot_update_blocked:
+            vehicle[Number(id)]?.vehicle.snapshot_update_blocked ?? false,
         });
       } finally {
         setIsLoadingData(false);
@@ -159,6 +164,35 @@ export const VehicleEditPage = observer(() => {
           </Select>
         </FormControl>
 
+        <TextField
+          fullWidth
+          label="Модель ТС"
+          value={editVehicleData.model}
+          onChange={(e) =>
+            setEditVehicleData({
+              ...editVehicleData,
+              model: e.target.value,
+            })
+          }
+          placeholder="Произвольное название модели"
+        />
+
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={editVehicleData.snapshot_update_blocked}
+              onChange={(e) =>
+                setEditVehicleData({
+                  ...editVehicleData,
+                  snapshot_update_blocked: e.target.checked,
+                })
+              }
+              color="primary"
+            />
+          }
+          label="Блокировка обновления ПО"
+        />
+
         <Button
           variant="contained"
           className="w-min flex gap-2 items-center"

src/shared/config/constants.tsx

@@ -36,7 +36,7 @@ export const NAVIGATION_ITEMS: {
   primary: [
     {
       id: "snapshots",
-      label: "Снапшоты",
+      label: "Экспорт",
       icon: GitBranch,
       path: "/snapshot",
       for_admin: true,
@@ -124,6 +124,16 @@ export const NAVIGATION_ITEMS: {
 };
 
 export const VEHICLE_TYPES = [
-  { label: "Трамвай", value: 1 },
+  { label: "Автобус", value: 3 },
   { label: "Троллейбус", value: 2 },
+  { label: "Трамвай", value: 1 },
+  { label: "Электробус", value: 4 },
+  { label: "Электричка", value: 5 },
+  { label: "Вагон метро", value: 6 },
+  { label: "Вагон ЖД", value: 7 },
 ];
+
+export const VEHICLE_MODELS = [
+  { label: "71-431P «Довлатов»", value: "71-431P «Довлатов»" },
+  { label: "71-638M-02 «Альтаир»", value: "71-638M-02 «Альтаир»" },
+] as const;

src/shared/lib/index.ts

@@ -33,3 +33,12 @@ export const generateDefaultMediaName = (
 
   return `${objectName || "Название"}_${fileNameWithoutExtension}_Медиа`;
 };
+
+/** Медиа-id считается пустым, если строка пустая или состоит только из нулей (с дефисами или без). */
+export const isMediaIdEmpty = (
+  id: string | null | undefined
+): boolean => {
+  if (id == null || id === "") return true;
+  const digits = id.replace(/-/g, "");
+  return digits === "" || /^0+$/.test(digits);
+};

src/shared/modals/UploadMediaDialog/index.tsx

@@ -51,7 +51,9 @@ interface UploadMediaDialogProps {
     | "carrier"
     | "country"
     | "vehicle"
-    | "station";
+    | "station"
+    | "route"
+    | "user";
   isArticle?: boolean;
   articleName?: string;
   initialFile?: File;

src/shared/store/RouteStore/index.ts

@@ -1,5 +1,10 @@
 import { makeAutoObservable, runInAction } from "mobx";
-import { authInstance, languageInstance, languageStore } from "@shared";
+import {
+  authInstance,
+  languageInstance,
+  languageStore,
+  isMediaIdEmpty,
+} from "@shared";
 
 export type Route = {
   route_name: string;
@@ -9,6 +14,7 @@ export type Route = {
   center_longitude: number;
   governor_appeal: number;
   id: number;
+  icon: string;
   path: number[][];
   rotate: number;
   route_direction: boolean;
@@ -137,6 +143,7 @@ class RouteStore {
     center_longitude: "",
     governor_appeal: 0,
     id: 0,
+    icon: "",
     path: [] as number[][],
     rotate: 0,
     route_direction: false,
@@ -152,9 +159,15 @@ class RouteStore {
   };
 
   editRoute = async (id: number) => {
-    if (!this.editRouteData.video_preview) {
+    if (
+      !this.editRouteData.video_preview ||
+      isMediaIdEmpty(this.editRouteData.video_preview)
+    ) {
       delete this.editRouteData.video_preview;
     }
+    if (!this.editRouteData.icon || isMediaIdEmpty(this.editRouteData.icon)) {
+      delete (this.editRouteData as any).icon;
+    }
     const dataToSend: any = {
       ...this.editRouteData,
       center_latitude: parseFloat(this.editRouteData.center_latitude),

src/shared/store/UserStore/index.ts

@@ -7,6 +7,7 @@ export type User = {
   is_admin: boolean;
   name: string;
   password?: string;
+  icon?: string;
 };
 
 class UserStore {
@@ -57,15 +58,23 @@ class UserStore {
     email: "",
     password: "",
     is_admin: false,
+    icon: "",
   };
 
   setCreateUserData = (
     name: string,
     email: string,
     password: string,
-    is_admin: boolean
+    is_admin: boolean,
+    icon?: string
   ) => {
-    this.createUserData = { name, email, password, is_admin };
+    this.createUserData = {
+      name,
+      email,
+      password,
+      is_admin,
+      icon: icon ?? "",
+    };
   };
 
   createUser = async () => {
@@ -73,7 +82,9 @@ class UserStore {
     if (this.users.data.length > 0) {
       id = this.users.data[this.users.data.length - 1].id + 1;
     }
-    const response = await authInstance.post("/user", this.createUserData);
+    const payload = { ...this.createUserData };
+    if (!payload.icon) delete payload.icon;
+    const response = await authInstance.post("/user", payload);
 
     runInAction(() => {
       this.users.data.push({
@@ -88,19 +99,29 @@ class UserStore {
     email: "",
     password: "",
     is_admin: false,
+    icon: "",
   };
 
   setEditUserData = (
     name: string,
     email: string,
     password: string,
-    is_admin: boolean
+    is_admin: boolean,
+    icon?: string
   ) => {
-    this.editUserData = { name, email, password, is_admin };
+    this.editUserData = {
+      name,
+      email,
+      password,
+      is_admin,
+      icon: icon ?? "",
+    };
   };
 
   editUser = async (id: number) => {
-    const response = await authInstance.patch(`/user/${id}`, this.editUserData);
+    const payload = { ...this.editUserData };
+    if (!payload.icon) delete payload.icon;
+    const response = await authInstance.patch(`/user/${id}`, payload);
 
     runInAction(() => {
       this.users.data = this.users.data.map((user) =>

src/shared/store/VehicleStore/index.ts

@@ -9,6 +9,9 @@ export type Vehicle = {
     carrier_id: number;
     carrier: string;
     uuid?: string;
+    model?: string;
+    current_snapshot_uuid?: string;
+    snapshot_update_blocked?: boolean;
   };
   device_status?: {
     device_uuid: string;
@@ -65,14 +68,18 @@ class VehicleStore {
     tailNumber: string,
     type: number,
     carrier: string,
-    carrierId: number
+    carrierId: number,
+    model?: string
   ) => {
-    const response = await languageInstance("ru").post("/vehicle", {
+    const payload: Record<string, unknown> = {
       tail_number: tailNumber,
       type,
       carrier,
       carrier_id: carrierId,
-    });
+    };
+    // TODO: когда будет бекенд — добавить model в payload и в ответ
+    if (model != null && model !== "") payload.model = model;
+    const response = await languageInstance("ru").post("/vehicle", payload);
 
     runInAction(() => {
       this.vehicles.data.push({
@@ -83,6 +90,7 @@ class VehicleStore {
           carrier_id: response.data.carrier_id,
           carrier: response.data.carrier,
           uuid: response.data.uuid,
+          model: response.data.model ?? model,
         },
       });
     });
@@ -93,11 +101,15 @@ class VehicleStore {
     type: number;
     carrier: string;
     carrier_id: number;
+    model: string;
+    snapshot_update_blocked: boolean;
   } = {
     tail_number: "",
     type: 0,
     carrier: "",
     carrier_id: 0,
+    model: "",
+    snapshot_update_blocked: false,
   };
 
   setEditVehicleData = (data: {
@@ -105,6 +117,8 @@ class VehicleStore {
     type: number;
     carrier: string;
     carrier_id: number;
+    model?: string;
+    snapshot_update_blocked?: boolean;
   }) => {
     this.editVehicleData = {
       ...this.editVehicleData,
@@ -119,27 +133,45 @@ class VehicleStore {
       type: number;
       carrier: string;
       carrier_id: number;
+      model?: string;
+      snapshot_update_blocked?: boolean;
     }
   ) => {
-    const response = await languageInstance("ru").patch(`/vehicle/${id}`, {
+    const payload: Record<string, unknown> = {
       tail_number: data.tail_number,
       type: data.type,
       carrier: data.carrier,
       carrier_id: data.carrier_id,
-    });
+    };
+    if (data.model != null && data.model !== "") payload.model = data.model;
+    if (data.snapshot_update_blocked != null)
+      payload.snapshot_update_blocked = data.snapshot_update_blocked;
+    const response = await languageInstance("ru").patch(
+      `/vehicle/${id}`,
+      payload
+    );
 
     runInAction(() => {
+      const updated = {
+        ...response.data,
+        model: response.data.model ?? data.model,
+        snapshot_update_blocked:
+          response.data.snapshot_update_blocked ?? data.snapshot_update_blocked,
+      };
       this.vehicle[id] = {
         vehicle: {
           ...this.vehicle[id].vehicle,
-          ...response.data,
+          ...updated,
         },
       };
       this.vehicles.data = this.vehicles.data.map((vehicle) =>
         vehicle.vehicle.id === id
           ? {
               ...vehicle,
-              ...response.data,
+              vehicle: {
+                ...vehicle.vehicle,
+                ...updated,
+              },
             }
           : vehicle
       );

src/shared/ui/Modal/index.tsx

@@ -1,10 +1,11 @@
-import { Modal as MuiModal, Typography, Box } from "@mui/material";
+import { Modal as MuiModal, Typography, Box, SxProps, Theme } from "@mui/material";
 
 interface ModalProps {
   open: boolean;
   onClose: () => void;
   children: React.ReactNode;
   title?: string;
+  sx?: SxProps<Theme>;
 }
 
 const style = {
@@ -19,7 +20,7 @@ const style = {
   borderRadius: 2,
 };
 
-export const Modal = ({ open, onClose, children, title }: ModalProps) => {
+export const Modal = ({ open, onClose, children, title, sx }: ModalProps) => {
   return (
     <MuiModal
       open={open}
@@ -27,7 +28,7 @@ export const Modal = ({ open, onClose, children, title }: ModalProps) => {
       aria-labelledby="modal-modal-title"
       aria-describedby="modal-modal-description"
     >
-      <Box sx={style}>
+      <Box sx={{ ...style, ...sx }}>
         {title && (
           <Typography
             id="modal-modal-title"

src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+declare const __APP_VERSION__: string;

src/widgets/DevicesTable/DeviceLogsModal.tsx

@@ -0,0 +1,132 @@
+import { API_URL, authInstance, Modal } from "@shared";
+import { CircularProgress } from "@mui/material";
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
+
+interface DeviceLogChunk {
+  date?: string;
+  lines?: string[];
+}
+
+interface DeviceLogsModalProps {
+  open: boolean;
+  deviceUuid: string | null;
+  onClose: () => void;
+}
+
+const formatDate = (date: Date) => {
+  return new Intl.DateTimeFormat("ru-RU", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+  }).format(date);
+};
+
+const formatLogTimestamp = (timestampStr: string) => {
+  return timestampStr.replace(/^\[|\]$/g, "").trim();
+};
+
+const parseLogLine = (line: string, index: number) => {
+  const match = line.match(/^(\[[^\]]+\])\s*(.*)$/);
+  if (match) {
+    return { id: index, time: match[1], text: match[2].trim() || line };
+  }
+  return { id: index, time: "", text: line };
+};
+
+const toYYYYMMDD = (d: Date) => d.toISOString().slice(0, 10);
+
+export const DeviceLogsModal = ({
+  open,
+  deviceUuid,
+  onClose,
+}: DeviceLogsModalProps) => {
+  const [chunks, setChunks] = useState<DeviceLogChunk[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const today = new Date();
+  const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);
+  const dateStr = toYYYYMMDD(today);
+  const dateStrYesterday = toYYYYMMDD(yesterday);
+
+  useEffect(() => {
+    if (!open || !deviceUuid) return;
+
+    const fetchLogs = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const { data } = await authInstance.get<DeviceLogChunk[]>(
+          `${API_URL}/devices/${deviceUuid}/logs`,
+          { params: { from: dateStrYesterday, to: dateStr } }
+        );
+        setChunks(Array.isArray(data) ? data : []);
+      } catch (err: unknown) {
+        const msg =
+          err && typeof err === "object" && "message" in err
+            ? String((err as { message?: string }).message)
+            : "Ошибка загрузки логов";
+        setError(msg);
+        toast.error(msg);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchLogs();
+  }, [open, deviceUuid, dateStr]);
+
+  const logs = chunks.flatMap((chunk, chunkIdx) =>
+    (chunk.lines ?? []).map((line, i) =>
+      parseLogLine(line, chunkIdx * 10000 + i)
+    )
+  );
+
+  return (
+    <Modal open={open} onClose={onClose} sx={{ width: "80vw", p: 1.5 }}>
+      <div className="flex flex-col gap-6 h-[85vh]">
+        <div className="flex gap-3 items-center justify-between w-full">
+          <h2 className="text-2xl font-semibold text-[#000000BF]">Логи</h2>
+          <span className="text-lg text-[#00000040]">{formatDate(today)}</span>
+        </div>
+
+        <div className="flex-1 flex flex-col min-h-0 w-full">
+          {isLoading && (
+            <div className="w-full h-full flex items-center justify-center bg-white rounded-xl shadow-inner">
+              <CircularProgress />
+            </div>
+          )}
+
+          {!isLoading && error && (
+            <div className="w-full h-full flex items-center justify-center text-red-500">
+              {error}
+            </div>
+          )}
+
+          {!isLoading && !error && (
+            <div className="w-full bg-white p-4 h-full overflow-y-auto rounded-xl shadow-inner">
+              <div className="flex flex-col gap-2 font-mono">
+                {logs.length > 0 ? (
+                  logs.map((log) => (
+                    <div key={log.id} className="flex gap-3 items-start p-2">
+                      <div className="text-sm text-[#00000050] shrink-0 whitespace-nowrap pt-px">
+                        {log.time ? `[${formatLogTimestamp(log.time)}]` : null}
+                      </div>
+                      <div className="text-sm text-[#000000BF] break-words w-full">
+                        {log.text}
+                      </div>
+                    </div>
+                  ))
+                ) : (
+                  <div className="h-full flex items-center justify-center text-gray-500">
+                    Логи отсутствуют.
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </Modal>
+  );
+};

src/widgets/Layout/index.tsx

@@ -8,7 +8,7 @@ import { AppBar } from "./ui/AppBar";
 import { Drawer } from "./ui/Drawer";
 import { DrawerHeader } from "./ui/DrawerHeader";
 import { NavigationList } from "@features";
-import { authStore, userStore, menuStore } from "@shared";
+import { authStore, userStore, menuStore, isMediaIdEmpty } from "@shared";
 import { observer } from "mobx-react-lite";
 import { useEffect } from "react";
 import { Typography } from "@mui/material";
@@ -67,18 +67,18 @@ export const Layout: React.FC<LayoutProps> = observer(({ children }) => {
           </div>
 
           <div className="flex gap-2 items-center">
-            <div className="flex flex-col gap-1">
-              {(() => {
-                return (
-                  <>
-                    <p className=" text-white">
-                      {
-                        users?.data?.find(
-                          // @ts-ignore
-                          (user) => user.id === authStore.payload?.user_id
-                        )?.name
-                      }
-                    </p>
+            {(() => {
+              const currentUser = users?.data?.find(
+                (user) => user.id === (authStore.payload as { user_id?: number })?.user_id,
+              );
+              const hasAvatar =
+                currentUser?.icon && !isMediaIdEmpty(currentUser.icon);
+              const token = localStorage.getItem("token");
+
+              return (
+                <>
+                  <div className="flex flex-col gap-1">
+                    <p className="text-white">{currentUser?.name}</p>
                     <div
                       className="text-center text-xs"
                       style={{
@@ -88,18 +88,27 @@ export const Layout: React.FC<LayoutProps> = observer(({ children }) => {
                         padding: "2px 10px",
                       }}
                     >
-                      {/* @ts-ignore */}
-                      {authStore.payload?.is_admin
+                      {(authStore.payload as { is_admin?: boolean })?.is_admin
                         ? "Администратор"
                         : "Режим пользователя"}
                     </div>
-                  </>
-                );
-              })()}
-            </div>
-            <div className="w-10 h-10 bg-gray-600 rounded-full flex items-center justify-center">
-              <User />
-            </div>
+                  </div>
+                  <div className="w-10 h-10 rounded-full flex items-center justify-center overflow-hidden bg-gray-600 shrink-0">
+                    {hasAvatar ? (
+                      <img
+                        src={`${
+                          import.meta.env.VITE_KRBL_MEDIA
+                        }${currentUser!.icon}/download?token=${token}`}
+                        alt="Аватар"
+                        className="w-full h-full object-cover"
+                      />
+                    ) : (
+                      <User className="text-white" size={20} />
+                    )}
+                  </div>
+                </>
+              );
+            })()}
           </div>
         </Toolbar>
       </AppBar>
@@ -138,6 +147,9 @@ export const Layout: React.FC<LayoutProps> = observer(({ children }) => {
           )}
         </DrawerHeader>
         <NavigationList open={open} onDrawerOpen={handleDrawerOpen} />
+        <div className="mt-auto flex justify-center items-center pb-5 text-sm text-gray-300">
+          v.{__APP_VERSION__}
+        </div>
       </Drawer>
       <Box
         component="main"

src/widgets/SightTabs/CreateInformationTab/index.tsx

@@ -16,6 +16,7 @@ import {
   languageStore,
   Language,
   cityStore,
+  isMediaIdEmpty,
   SelectMediaDialog,
   PreviewMediaDialog,
   SightLanguageInfo,
@@ -308,7 +309,7 @@ export const CreateInformationTab = observer(
                   <ImageUploadCard
                     title="Водяной знак (левый верхний)"
                     imageKey="watermark_lu"
-                    imageUrl={sight.watermark_lu}
+                    imageUrl={isMediaIdEmpty(sight.watermark_lu) ? null : sight.watermark_lu}
                     onImageClick={() => {
                       setIsPreviewMediaOpen(true);
                       setMediaId(sight.watermark_lu ?? "");
@@ -363,7 +364,7 @@ export const CreateInformationTab = observer(
 
                   <VideoPreviewCard
                     title="Видеозаставка"
-                    videoId={sight.video_preview}
+                    videoId={isMediaIdEmpty(sight.video_preview) ? null : sight.video_preview}
                     onVideoClick={handleVideoPreviewClick}
                     onDeleteVideoClick={() => {
                       handleChange({

src/widgets/SightTabs/InformationTab/index.tsx

@@ -17,6 +17,7 @@ import {
   Language,
   cityStore,
   editSightStore,
+  isMediaIdEmpty,
   SelectMediaDialog,
   PreviewMediaDialog,
   SightLanguageInfo,
@@ -334,7 +335,7 @@ export const InformationTab = observer(
                   <ImageUploadCard
                     title="Водяной знак (левый верхний)"
                     imageKey="watermark_lu"
-                    imageUrl={sight.common.watermark_lu}
+                    imageUrl={isMediaIdEmpty(sight.common.watermark_lu) ? null : sight.common.watermark_lu}
                     onImageClick={() => {
                       setIsPreviewMediaOpen(true);
                       setMediaId(sight.common.watermark_lu ?? "");
@@ -396,7 +397,7 @@ export const InformationTab = observer(
 
                   <VideoPreviewCard
                     title="Видеозаставка"
-                    videoId={sight.common.video_preview}
+                    videoId={isMediaIdEmpty(sight.common.video_preview) ? null : sight.common.video_preview}
                     onVideoClick={handleVideoPreviewClick}
                     onDeleteVideoClick={() => {
                       handleChange(

src/widgets/SnapshotRestore/index.tsx

@@ -19,7 +19,7 @@ export const SnapshotRestore = ({
     >
       <div className="bg-white p-4 w-140 rounded-lg flex flex-col gap-4 items-center">
         <p className="text-black w-110 text-center">
-          Вы уверены, что хотите восстановить этот снапшот?
+          Вы уверены, что хотите восстановить этот экспорт медиа?
         </p>
         <p className="text-black w-100 text-center">
           Это действие нельзя будет отменить.

vite.config.ts

@@ -2,12 +2,10 @@ import { defineConfig, type UserConfigExport } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
 import path from "path";
+import pkg from "./package.json";
 
 export default defineConfig({
-  plugins: [
-    react(), 
-    tailwindcss(),
-  ],
+  plugins: [react(), tailwindcss()],
   resolve: {
     alias: {
       "@shared": path.resolve(__dirname, "src/shared"),
@@ -18,9 +16,11 @@ export default defineConfig({
       "@app": path.resolve(__dirname, "src/app"),
     },
   },
+  define: {
+    __APP_VERSION__: JSON.stringify(pkg.version),
+  },
 
   build: {
     chunkSizeWarningLimit: 5000,
   },
 });
-