fix: Update map with tables fixes

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

@@ -1,10 +1,30 @@
 import { Stack, Typography, Button } from "@mui/material";
-
 import { useNavigate, useNavigationType } from "react-router";
+import { MediaViewer } from "@widgets";
+import { useMapData } from "./MapDataContext";
+import { observer } from "mobx-react-lite";
+import { useEffect, useState } from "react";
+import { authInstance } from "@shared";
 
-export function LeftSidebar() {
+export const LeftSidebar = observer(() => {
   const navigate = useNavigate();
   const navigationType = useNavigationType(); // PUSH, POP, REPLACE
+  const { routeData } = useMapData();
+  const [carrierThumbnail, setCarrierThumbnail] = useState<string | null>(null);
+  const [carrierLogo, setCarrierLogo] = useState<string | null>(null);
+  useEffect(() => {
+    async function fetchCarrierThumbnail() {
+      if (routeData?.carrier_id) {
+        const { city_id, logo } = (
+          await authInstance.get(`/carrier/${routeData.carrier_id}`)
+        ).data;
+        const { arms } = (await authInstance.get(`/city/${city_id}`)).data;
+        setCarrierThumbnail(arms);
+        setCarrierLogo(logo);
+      }
+    }
+    fetchCarrierThumbnail();
+  }, [routeData?.carrier_id]);
 
   const handleBack = () => {
     if (navigationType === "PUSH") {
@@ -27,6 +47,7 @@ export function LeftSidebar() {
           color: "#fff",
           backgroundColor: "#222",
           borderRadius: 10,
+          height: 40,
           width: "100%",
           border: "none",
           cursor: "pointer",
@@ -41,10 +62,30 @@ export function LeftSidebar() {
         justifyContent="center"
         my={10}
       >
-        <img src={"/Emblem.svg"} alt="logo" width={100} height={100} />
-        <Typography sx={{ mb: 2, color: "#fff" }} textAlign="center">
-          При поддержке Правительства Санкт-Петербурга
-        </Typography>
+        <div
+          style={{
+            maxWidth: 200,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 10,
+          }}
+        >
+          {carrierThumbnail && (
+            <MediaViewer
+              media={{
+                id: carrierThumbnail,
+                media_type: 1, // Тип "Фото" для логотипа
+                filename: "route_thumbnail",
+              }}
+              fullWidth
+              fullHeight
+            />
+          )}
+          <Typography sx={{ mb: 2, color: "#fff" }} textAlign="center">
+            При поддержке Правительства
+          </Typography>{" "}
+        </div>
       </Stack>
 
       <Stack
@@ -65,15 +106,20 @@ export function LeftSidebar() {
       <Stack
         direction="column"
         alignItems="center"
+        maxHeight={150}
         justifyContent="center"
         my={10}
       >
-        <img
-          src={"/GET.png"}
-          alt="logo"
-          width="80%"
-          style={{ margin: "0 auto" }}
-        />
+        {carrierLogo && (
+          <MediaViewer
+            media={{
+              id: carrierLogo,
+              media_type: 1, // Тип "Фото" для логотипа
+              filename: "route_thumbnail_logo",
+            }}
+            fullHeight
+          />
+        )}
       </Stack>
 
       <Typography
@@ -86,4 +132,4 @@ export function LeftSidebar() {
       </Typography>
     </Stack>
   );
-}
+});