sight edit update

package.json

@@ -32,6 +32,8 @@
     "i18next": "^24.2.2",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
+    "mobx": "^6.13.7",
+    "mobx-react-lite": "^4.1.0",
     "react": "19.0.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "19.0.0",

src/components/CustomDataGrid.tsx

@@ -1,80 +1,132 @@
-import {DataGrid, type DataGridProps, type GridColumnVisibilityModel} from '@mui/x-data-grid'
+import {
-import {Stack, Button, Typography} from '@mui/material'
+  DataGrid,
-import {ExportButton} from '@refinedev/mui'
+  type DataGridProps,
-import {useExport} from '@refinedev/core'
+  type GridColumnVisibilityModel,
-import React, {useState, useEffect, useMemo} from 'react'
+} from "@mui/x-data-grid";
-import Cookies from 'js-cookie'
+import { Stack, Button, Typography } from "@mui/material";
+import { ExportButton } from "@refinedev/mui";
+import { useExport } from "@refinedev/core";
+import React, { useState, useEffect, useMemo } from "react";
+import Cookies from "js-cookie";
 
-import {localeText} from '../locales/ru/localeText'
+import { localeText } from "../locales/ru/localeText";
 
 interface CustomDataGridProps extends DataGridProps {
-  hasCoordinates?: boolean
+  hasCoordinates?: boolean;
-  resource?: string // Add this prop
+  resource?: string; // Add this prop
 }
 
-const DEV_FIELDS = ['id', 'code', 'country_code', 'city_id', 'carrier_id', 'main_color', 'left_color', 'right_color', 'logo', 'slogan', 'filename', 'arms', 'thumbnail', 'route_sys_number', 'governor_appeal', 'scale_min', 'scale_max', 'rotate', 'center_latitude', 'center_longitude', 'watermark_lu', 'watermark_rd', 'left_article', 'preview_article', 'offset_x', 'offset_y'] as const
+const DEV_FIELDS = [
+  "id",
+  "code",
+  "country_code",
+  "city_id",
+  "carrier_id",
+  "main_color",
+  "left_color",
+  "right_color",
+  "logo",
+  "slogan",
+  "filename",
+  "arms",
+  "thumbnail",
+  "route_sys_number",
+  "governor_appeal",
+  "scale_min",
+  "scale_max",
+  "rotate",
+  "center_latitude",
+  "center_longitude",
+  "watermark_lu",
+  "watermark_rd",
+  "left_article",
+  "preview_article",
+  "offset_x",
+  "offset_y",
+] as const;
 
-export const CustomDataGrid = ({hasCoordinates = false, columns = [], resource, ...props}: CustomDataGridProps) => {
+export const CustomDataGrid = ({
+  hasCoordinates = false,
+  columns = [],
+  resource,
+  ...props
+}: CustomDataGridProps) => {
   // const isDev = import.meta.env.DEV
-  const {triggerExport, isLoading: exportLoading} = useExport({
+  const { triggerExport, isLoading: exportLoading } = useExport({
-    resource: resource ?? '',
+    resource: resource ?? "",
     // pageSize: 100, #*
     // maxItemCount: 100, #*
-  })
+  });
 
-  const initialShowCoordinates = Cookies.get('showCoordinates') === 'true'
+  const initialShowCoordinates = Cookies.get("showCoordinates") === "true";
-  const initialShowDevData = false // Default to false in both prod and dev
+  const initialShowDevData = false; // Default to false in both prod and dev
-  const [showCoordinates, setShowCoordinates] = useState(initialShowCoordinates)
+  const [showCoordinates, setShowCoordinates] = useState(
-  const [showDevData, setShowDevData] = useState(Cookies.get('showDevData') === 'true')
+    initialShowCoordinates
+  );
+  const [showDevData, setShowDevData] = useState(
+    Cookies.get("showDevData") === "true"
+  );
 
-  const availableDevFields = useMemo(() => DEV_FIELDS.filter((field) => columns.some((column) => column.field === field)), [columns])
+  const availableDevFields = useMemo(
+    () =>
+      DEV_FIELDS.filter((field) =>
+        columns.some((column) => column.field === field)
+      ),
+    [columns]
+  );
 
   const initialVisibilityModel = useMemo(() => {
-    const model: GridColumnVisibilityModel = {}
+    const model: GridColumnVisibilityModel = {};
 
     availableDevFields.forEach((field) => {
-      model[field] = initialShowDevData
+      model[field] = initialShowDevData;
-    })
+    });
 
     if (hasCoordinates) {
-      model.latitude = initialShowCoordinates
+      model.latitude = initialShowCoordinates;
-      model.longitude = initialShowCoordinates
+      model.longitude = initialShowCoordinates;
     }
 
-    return model
+    return model;
-  }, [availableDevFields, hasCoordinates, initialShowCoordinates, initialShowDevData])
+  }, [
+    availableDevFields,
+    hasCoordinates,
+    initialShowCoordinates,
+    initialShowDevData,
+  ]);
 
-  const [columnVisibilityModel, setColumnVisibilityModel] = useState<GridColumnVisibilityModel>(initialVisibilityModel)
+  const [columnVisibilityModel, setColumnVisibilityModel] =
+    useState<GridColumnVisibilityModel>(initialVisibilityModel);
 
   useEffect(() => {
     setColumnVisibilityModel((prevModel) => {
-      const newModel = {...prevModel}
+      const newModel = { ...prevModel };
 
       availableDevFields.forEach((field) => {
-        newModel[field] = showDevData
+        newModel[field] = showDevData;
-      })
+      });
 
       if (hasCoordinates) {
-        newModel.latitude = showCoordinates
+        newModel.latitude = showCoordinates;
-        newModel.longitude = showCoordinates
+        newModel.longitude = showCoordinates;
       }
 
-      return newModel
+      return newModel;
-    })
+    });
 
     if (hasCoordinates) {
-      Cookies.set('showCoordinates', String(showCoordinates))
+      Cookies.set("showCoordinates", String(showCoordinates));
     }
-    Cookies.set('showDevData', String(showDevData))
+    Cookies.set("showDevData", String(showDevData));
-  }, [showCoordinates, showDevData, hasCoordinates, availableDevFields])
+  }, [showCoordinates, showDevData, hasCoordinates, availableDevFields]);
 
   const toggleCoordinates = () => {
-    setShowCoordinates((prev) => !prev)
+    setShowCoordinates((prev) => !prev);
-  }
+  };
 
   const toggleDevData = () => {
-    setShowDevData((prev) => !prev)
+    setShowDevData((prev) => !prev);
-  }
+  };
 
   return (
     <Stack spacing={2}>
@@ -92,31 +144,38 @@ export const CustomDataGrid = ({hasCoordinates = false, columns = [], resource,
           //   paginationModel: {pageSize: 25, page: 0},
           // },
           sorting: {
-            sortModel: [{field: 'id', sort: 'asc'}],
+            sortModel: [{ field: "id", sort: "asc" }],
           },
         }}
         pageSizeOptions={[10, 25, 50, 100]}
       />
 
       <Stack direction="row" spacing={2} justifyContent="space-between" mb={2}>
-        <Stack direction="row" spacing={2} sx={{mb: 2}}>
+        <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
           {hasCoordinates && (
             <Button variant="contained" onClick={toggleCoordinates}>
-              {showCoordinates ? 'Скрыть координаты' : 'Показать координаты'}
+              {showCoordinates ? "Скрыть координаты" : "Показать координаты"}
             </Button>
           )}
 
-          {(import.meta.env.DEV || showDevData) && availableDevFields.length > 0 && (
+          {(import.meta.env.DEV || showDevData) &&
-            <Button variant="contained" onClick={toggleDevData}>
+            availableDevFields.length > 0 && (
-              {showDevData ? 'Скрыть служебные данные' : 'Показать служебные данные'}
+              <Button variant="contained" onClick={toggleDevData}>
-            </Button>
+                {showDevData
-          )}
+                  ? "Скрыть служебные данные"
+                  : "Показать служебные данные"}
+              </Button>
+            )}
         </Stack>
 
-        <ExportButton onClick={triggerExport} loading={exportLoading} hideText={false}>
+        <ExportButton
-          <Typography sx={{marginLeft: '-2px'}}>Экспорт</Typography>
+          onClick={triggerExport}
+          loading={exportLoading}
+          hideText={false}
+        >
+          <Typography sx={{ marginLeft: "-2px" }}>Экспорт</Typography>
         </ExportButton>
       </Stack>
     </Stack>
-  )
+  );
-}
+};

src/components/LinkedItems.tsx

@@ -24,8 +24,9 @@ import {
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
 import { axiosInstance } from "../providers/data";
-import { TOKEN_KEY } from "../authProvider";
+
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
+import axios from "axios";
 
 function insertAtPosition<T>(arr: T[], pos: number, value: T): T[] {
   const index = pos - 1;
@@ -79,6 +80,41 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
   type,
   onSave,
 }: LinkedItemsProps<T>) => {
+  const [articleLanguages, setArticleLanguages] = useState<
+    Record<number, string>
+  >({});
+
+  const handleArticleLanguageChange = (
+    articleId: number,
+    languageCode: string
+  ) => {
+    setArticleLanguages((prev) => ({ ...prev, [articleId]: languageCode }));
+    console.log(articleId, languageCode);
+    // Отправка запроса на сервер для сохранения языка
+    axios
+      .get(
+        `${import.meta.env.VITE_KRBL_API}/article/${articleId}/`, // Пример эндпоинта
+        {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem("refine-auth")}`,
+            "X-language": languageCode.toLowerCase(),
+          },
+        }
+      )
+      .then((response) => {
+        setLinkedItems(
+          linkedItems.map((item) => {
+            if (item.id == articleId) {
+              console.log(response.data);
+              return { ...response.data, language: languageCode };
+            } else {
+              return item;
+            }
+          })
+        );
+      });
+  };
+
   const [position, setPosition] = useState<number>(1);
   const [items, setItems] = useState<T[]>([]);
   const [linkedItems, setLinkedItems] = useState<T[]>([]);
@@ -88,6 +124,33 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
   const [mediaOrder, setMediaOrder] = useState<number>(1);
   const theme = useTheme();
 
+  let availableItems = items.filter(
+    (item) => !linkedItems.some((linked) => linked.id === item.id)
+  );
+  useEffect(() => {
+    if (childResource == "station") {
+      availableItems = availableItems.sort((a, b) =>
+        a.name.localeCompare(b.name)
+      );
+    }
+  }, [childResource, availableItems]);
+
+  useEffect(() => {
+    // При загрузке linkedItems можно запросить текущие языки для статей
+    if (childResource === "article" && linkedItems.length > 0) {
+      const initialLanguages: Record<number, string> = {};
+      linkedItems.forEach((article) => {
+        // Предполагается, что у объекта article есть свойство language
+        if (article.language) {
+          initialLanguages[article.id] = article.language;
+        } else {
+          initialLanguages[article.id] = "RU"; // Или другой язык по умолчанию
+        }
+      });
+      setArticleLanguages(initialLanguages);
+    }
+  }, [linkedItems, childResource]);
+
   const onDragEnd = (result: any) => {
     if (!result.destination) return;
 
@@ -149,10 +212,6 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
     }
   }, [linkedItems, childResource, parentResource]);
 
-  const availableItems = items.filter(
-    (item) => !linkedItems.some((linked) => linked.id === item.id)
-  );
-
   const linkItem = () => {
     if (selectedItemId !== null) {
       const requestData =
@@ -256,12 +315,19 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
                         {field.label}
                       </TableCell>
                     ))}
+                    {childResource === "article" && (
+                      <TableCell key="language">Язык</TableCell>
+                    )}
                     {type === "edit" && (
                       <TableCell width="120px">Действие</TableCell>
                     )}
                   </TableRow>
                 </TableHead>
-                <Droppable droppableId="droppable">
+
+                <Droppable
+                  droppableId="droppable"
+                  isDropDisabled={type !== "edit" || !dragAllowed}
+                >
                   {(provided) => (
                     <TableBody
                       ref={provided.innerRef}
@@ -272,7 +338,7 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
                           key={item.id}
                           draggableId={"q" + String(item.id)}
                           index={index}
-                          isDragDisabled={type !== "edit" && dragAllowed}
+                          isDragDisabled={type !== "edit" || !dragAllowed}
                         >
                           {(provided) => (
                             <TableRow
@@ -291,13 +357,105 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
                               <TableCell key={String(item.id)}>
                                 {index + 1}
                               </TableCell>
-                              {fields.map((field) => (
+                              {fields.map((field, index) => (
-                                <TableCell key={String(field.data)}>
+                                <TableCell
+                                  key={String(field.data) + String(index)}
+                                >
                                   {field.render
                                     ? field.render(item[field.data])
                                     : item[field.data]}
                                 </TableCell>
                               ))}
+                              {childResource === "article" && (
+                                <TableCell>
+                                  <Box
+                                    display="flex"
+                                    justifyContent="center"
+                                    alignItems="center"
+                                    flexDirection="column"
+                                    gap={1}
+                                  >
+                                    <Box
+                                      sx={{
+                                        padding: "4px",
+                                        cursor: "pointer",
+                                        background:
+                                          articleLanguages[item.id] === "RU"
+                                            ? theme.palette.primary.main
+                                            : "transparent",
+                                        color:
+                                          articleLanguages[item.id] === "RU"
+                                            ? theme.palette.primary.contrastText
+                                            : theme.palette.text.primary,
+                                        border:
+                                          articleLanguages[item.id] !== "RU"
+                                            ? `1px solid ${theme.palette.primary.main}`
+                                            : "none",
+                                      }}
+                                      onClick={() =>
+                                        handleArticleLanguageChange(
+                                          item.id,
+                                          "RU"
+                                        )
+                                      }
+                                    >
+                                      RU
+                                    </Box>
+                                    <Box
+                                      sx={{
+                                        padding: "4px",
+                                        cursor: "pointer",
+                                        background:
+                                          articleLanguages[item.id] === "EN"
+                                            ? theme.palette.primary.main
+                                            : "transparent",
+                                        color:
+                                          articleLanguages[item.id] === "EN"
+                                            ? theme.palette.primary.contrastText
+                                            : theme.palette.text.primary,
+                                        border:
+                                          articleLanguages[item.id] !== "EN"
+                                            ? `1px solid ${theme.palette.primary.main}`
+                                            : "none",
+                                      }}
+                                      onClick={() =>
+                                        handleArticleLanguageChange(
+                                          item.id,
+                                          "EN"
+                                        )
+                                      }
+                                    >
+                                      EN
+                                    </Box>
+                                    <Box
+                                      sx={{
+                                        padding: "4px",
+                                        cursor: "pointer",
+                                        background:
+                                          articleLanguages[item.id] === "ZH"
+                                            ? theme.palette.primary.main
+                                            : "transparent",
+                                        color:
+                                          articleLanguages[item.id] === "ZH"
+                                            ? theme.palette.primary.contrastText
+                                            : theme.palette.text.primary,
+                                        border:
+                                          articleLanguages[item.id] !== "ZH"
+                                            ? `1px solid ${theme.palette.primary.main}`
+                                            : "none",
+                                      }}
+                                      onClick={() =>
+                                        handleArticleLanguageChange(
+                                          item.id,
+                                          "ZH"
+                                        )
+                                      }
+                                    >
+                                      ZN
+                                    </Box>
+                                  </Box>
+                                </TableCell>
+                              )}
                               {type === "edit" && (
                                 <TableCell>
                                   <Button
@@ -334,7 +492,7 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
               <Autocomplete
                 fullWidth
                 value={
-                  availableItems.find((item) => item.id === selectedItemId) ||
+                  availableItems?.find((item) => item.id === selectedItemId) ||
                   null
                 }
                 onChange={(_, newValue) =>
@@ -366,6 +524,11 @@ export const LinkedItems = <T extends { id: number; [key: string]: any }>({
                     );
                   });
                 }}
+                renderOption={(props, option) => (
+                  <li {...props} key={option.id}>
+                    {String(option[fields[0].data])}
+                  </li>
+                )}
               />
 
               {childResource === "article" && (

src/components/header/index.tsx

@@ -1,181 +1,246 @@
-import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined'
+import DarkModeOutlined from "@mui/icons-material/DarkModeOutlined";
-import LightModeOutlined from '@mui/icons-material/LightModeOutlined'
+import LightModeOutlined from "@mui/icons-material/LightModeOutlined";
-import AppBar from '@mui/material/AppBar'
+import AppBar from "@mui/material/AppBar";
-import Avatar from '@mui/material/Avatar'
+import Avatar from "@mui/material/Avatar";
-import IconButton from '@mui/material/IconButton'
+import IconButton from "@mui/material/IconButton";
-import Stack from '@mui/material/Stack'
+import Stack from "@mui/material/Stack";
-import Toolbar from '@mui/material/Toolbar'
+import Toolbar from "@mui/material/Toolbar";
-import Typography from '@mui/material/Typography'
+import Typography from "@mui/material/Typography";
-import {useGetIdentity, usePermissions, useWarnAboutChange} from '@refinedev/core'
+import {
-import {HamburgerMenu, RefineThemedLayoutV2HeaderProps} from '@refinedev/mui'
+  useGetIdentity,
-import React, {useContext, useEffect} from 'react'
+  useList,
-import {ColorModeContext} from '../../contexts/color-mode'
+  usePermissions,
-import Cookies from 'js-cookie'
+  useWarnAboutChange,
-import {useTranslation} from 'react-i18next'
+} from "@refinedev/core";
-import {Button} from '@mui/material'
+import { HamburgerMenu, RefineThemedLayoutV2HeaderProps } from "@refinedev/mui";
-import {useNavigate} from 'react-router'
+import React, { useContext, useEffect, useState } from "react";
-
+import { ColorModeContext } from "../../contexts/color-mode";
+import Cookies from "js-cookie";
+import { useTranslation } from "react-i18next";
+import {
+  Button,
+  Select,
+  MenuItem,
+  InputLabel,
+  FormControl,
+  SelectChangeEvent,
+} from "@mui/material";
+import { useNavigate } from "react-router";
+import { cityStore } from "../../store/CityStore";
+import { observer } from "mobx-react-lite";
 type IUser = {
-  id: number
+  id: number;
-  name: string
+  name: string;
-  avatar: string
+  avatar: string;
-  is_admin: boolean
+  is_admin: boolean;
-}
+};
 
-export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({sticky = true}) => {
+export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = observer(
-  const {mode, setMode} = useContext(ColorModeContext)
+  ({ sticky }) => {
-  const {data: user} = useGetIdentity<IUser>()
+    const { city_id, setCityIdAction } = cityStore;
-  const {data: permissions} = usePermissions<string[]>()
+    const { data: cities } = useList({
-  const isAdmin = permissions?.includes('admin')
+      resource: "city",
-  const {i18n} = useTranslation()
+    });
-  const {setWarnWhen, warnWhen} = useWarnAboutChange()
 
-  const navigate = useNavigate()
+    const { mode, setMode } = useContext(ColorModeContext);
+    const { data: user } = useGetIdentity<IUser>();
+    const { data: permissions } = usePermissions<string[]>();
+    const isAdmin = permissions?.includes("admin");
+    const { i18n } = useTranslation();
+    const { setWarnWhen, warnWhen } = useWarnAboutChange();
+    const navigate = useNavigate();
 
-  const handleLanguageChange = async (lang: string) => {
+    const handleChange = (event: SelectChangeEvent<string>) => {
-    // console.log('Language change requested:', lang)
+      setCityIdAction(event.target.value);
-    // console.log('Current warnWhen state:', warnWhen)
+    };
 
-    const form = document.querySelector('form')
+    const handleLanguageChange = async (lang: string) => {
-    const inputs = form?.querySelectorAll<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>('input, textarea, select')
+      // console.log('Language change requested:', lang)
-    const saveButton = document.querySelector('.refine-save-button') as HTMLButtonElement
+      // console.log('Current warnWhen state:', warnWhen)
 
-    // Сохраняем текущий URL перед любыми действиями
+      const form = document.querySelector("form");
-    const currentLocation = window.location.pathname + window.location.search
+      const inputs = form?.querySelectorAll<
+        HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+      >("input, textarea, select");
+      const saveButton = document.querySelector(
+        ".refine-save-button"
+      ) as HTMLButtonElement;
 
-    if (form && saveButton) {
+      // Сохраняем текущий URL перед любыми действиями
-      const hasChanges = Array.from(inputs || []).some((input) => {
+      const currentLocation = window.location.pathname + window.location.search;
-        if (input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement) {
-          return input.value !== input.defaultValue
-        }
-        if (input instanceof HTMLSelectElement) {
-          return input.value !== input.options[input.selectedIndex].defaultSelected.toString()
-        }
-        return false
-      })
 
-      if (hasChanges || warnWhen) {
+      if (form && saveButton) {
-        try {
+        const hasChanges = Array.from(inputs || []).some((input) => {
-          // console.log('Attempting to save changes...')
+          if (
-          setWarnWhen(false)
+            input instanceof HTMLInputElement ||
-          saveButton.click()
+            input instanceof HTMLTextAreaElement
-          // console.log('Save button clicked')
+          ) {
+            return input.value !== input.defaultValue;
+          }
+          if (input instanceof HTMLSelectElement) {
+            return (
+              input.value !==
+              input.options[input.selectedIndex].defaultSelected.toString()
+            );
+          }
+          return false;
+        });
 
-          await new Promise((resolve) => setTimeout(resolve, 1000))
+        if (hasChanges || warnWhen) {
+          try {
+            // console.log('Attempting to save changes...')
+            setWarnWhen(false);
+            saveButton.click();
+            // console.log('Save button clicked')
 
-          // После сохранения меняем язык и возвращаемся на ту же страницу
+            await new Promise((resolve) => setTimeout(resolve, 1000));
-          Cookies.set('lang', lang)
+
-          i18n.changeLanguage(lang)
+            // После сохранения меняем язык и возвращаемся на ту же страницу
-          navigate(currentLocation)
+            Cookies.set("lang", lang);
-          return
+            i18n.changeLanguage(lang);
-        } catch (error) {
+            navigate(currentLocation);
-          console.error('Failed to save form:', error)
+            return;
-          setWarnWhen(true)
+          } catch (error) {
-          return
+            console.error("Failed to save form:", error);
+            setWarnWhen(true);
+            return;
+          }
         }
       }
-    }
 
-    // Если нет формы или изменений, просто меняем язык
+      // Если нет формы или изменений, просто меняем язык
-    // console.log('Setting language cookie:', lang)
+      // console.log('Setting language cookie:', lang)
-    Cookies.set('lang', lang)
+      Cookies.set("lang", lang);
 
-    // console.log('Changing i18n language')
+      // console.log('Changing i18n language')
-    i18n.changeLanguage(lang)
+      i18n.changeLanguage(lang);
 
-    // Используем текущий URL для навигации
+      // Используем текущий URL для навигации
-    navigate(0)
+      navigate(0);
-  }
+    };
 
-  useEffect(() => {
+    useEffect(() => {
-    const savedLang = Cookies.get('lang') || 'ru'
+      const savedLang = Cookies.get("lang") || "ru";
-    i18n.changeLanguage(savedLang)
+      i18n.changeLanguage(savedLang);
-  }, [i18n])
+    }, [i18n]);
+
+    return (
+      <AppBar position={sticky ? "sticky" : "relative"}>
+        <Toolbar>
+          <Stack
+            direction="row"
+            width="100%"
+            justifyContent="flex-end"
+            alignItems="center"
+          >
+            <HamburgerMenu />
 
-  return (
-    <AppBar position={sticky ? 'sticky' : 'relative'}>
-      <Toolbar>
-        <Stack direction="row" width="100%" justifyContent="flex-end" alignItems="center">
-          <HamburgerMenu />
-          <Stack direction="row" width="100%" justifyContent="flex-end" alignItems="center" spacing={2}>
             <Stack
               direction="row"
-              spacing={1}
+              width="100%"
-              sx={{
+              justifyContent="flex-end"
-                backgroundColor: 'background.paper',
+              alignItems="center"
-                padding: '4px',
+              spacing={2}
-                borderRadius: '4px',
-              }}
             >
-              {['ru', 'en', 'zh'].map((lang) => (
+              <FormControl variant="standard" sx={{ width: "min-content" }}>
-                <Button
+                {city_id && cities && (
-                  key={lang}
+                  <Select
-                  onClick={() => handleLanguageChange(lang)}
+                    defaultValue={city_id}
-                  variant={i18n.language === lang ? 'contained' : 'outlined'}
+                    value={city_id}
-                  size="small"
+                    onChange={handleChange}
-                  sx={{
+                  >
-                    minWidth: '30px',
+                    {cities.data?.map((city) => (
-                    padding: '2px 0px',
+                      <MenuItem value={String(city.id)} key={city.id}>
-                    textTransform: 'uppercase',
+                        {city.name}
-                  }}
+                      </MenuItem>
-                >
+                    ))}
-                  {lang}
+                  </Select>
-                </Button>
-              ))}
-            </Stack>
-
-            <IconButton
-              color="inherit"
-              onClick={() => {
-                setMode()
-              }}
-              sx={{
-                marginRight: '2px',
-              }}
-            >
-              {mode === 'dark' ? <LightModeOutlined /> : <DarkModeOutlined />}
-            </IconButton>
-
-            {(user?.avatar || user?.name) && (
-              <Stack direction="row" gap="16px" alignItems="center" justifyContent="center">
-                {user?.name && (
-                  <Stack direction="column" alignItems="start" gap="0px">
-                    <Typography
-                      sx={{
-                        display: {
-                          xs: 'none',
-                          sm: 'inline-block',
-                        },
-                      }}
-                      variant="subtitle2"
-                    >
-                      {user?.name}
-                    </Typography>
-
-                    <Typography
-                      sx={{
-                        display: {
-                          xs: 'none',
-                          sm: 'inline-block',
-                        },
-                        backgroundColor: 'primary.main',
-                        color: 'rgba(255, 255, 255, 0.7)',
-                        padding: '1px 4px',
-                        borderRadius: 1,
-                        fontSize: '0.6rem',
-                      }}
-                      variant="subtitle2"
-                    >
-                      {isAdmin ? 'Администратор' : 'Пользователь'}
-                    </Typography>
-                  </Stack>
                 )}
-                <Avatar src={user?.avatar} alt={user?.name} />
+              </FormControl>
+              <Stack
+                direction="row"
+                spacing={1}
+                sx={{
+                  backgroundColor: "background.paper",
+                  padding: "4px",
+                  borderRadius: "4px",
+                }}
+              >
+                {["ru", "en", "zh"].map((lang) => (
+                  <Button
+                    key={lang}
+                    onClick={() => handleLanguageChange(lang)}
+                    variant={i18n.language === lang ? "contained" : "outlined"}
+                    size="small"
+                    sx={{
+                      minWidth: "30px",
+                      padding: "2px 0px",
+                      textTransform: "uppercase",
+                    }}
+                  >
+                    {lang}
+                  </Button>
+                ))}
               </Stack>
-            )}
+
+              <IconButton
+                color="inherit"
+                onClick={() => {
+                  setMode();
+                }}
+                sx={{
+                  marginRight: "2px",
+                }}
+              >
+                {mode === "dark" ? <LightModeOutlined /> : <DarkModeOutlined />}
+              </IconButton>
+
+              {(user?.avatar || user?.name) && (
+                <Stack
+                  direction="row"
+                  gap="16px"
+                  alignItems="center"
+                  justifyContent="center"
+                >
+                  {user?.name && (
+                    <Stack direction="column" alignItems="start" gap="0px">
+                      <Typography
+                        sx={{
+                          display: {
+                            xs: "none",
+                            sm: "inline-block",
+                          },
+                        }}
+                        variant="subtitle2"
+                      >
+                        {user?.name}
+                      </Typography>
+
+                      <Typography
+                        sx={{
+                          display: {
+                            xs: "none",
+                            sm: "inline-block",
+                          },
+                          backgroundColor: "primary.main",
+                          color: "rgba(255, 255, 255, 0.7)",
+                          padding: "1px 4px",
+                          borderRadius: 1,
+                          fontSize: "0.6rem",
+                        }}
+                        variant="subtitle2"
+                      >
+                        {isAdmin ? "Администратор" : "Пользователь"}
+                      </Typography>
+                    </Stack>
+                  )}
+                  <Avatar src={user?.avatar} alt={user?.name} />
+                </Stack>
+              )}
+            </Stack>
           </Stack>
-        </Stack>
+        </Toolbar>
-      </Toolbar>
+      </AppBar>
-    </AppBar>
+    );
-  )
+  }
-}
+);

src/pages/article/create.tsx

@@ -1,72 +1,196 @@
-import {Box, TextField, Typography, Paper} from '@mui/material'
+import { Box, TextField, Typography, Paper } from "@mui/material";
-import {Create} from '@refinedev/mui'
+import { Create } from "@refinedev/mui";
-import {useForm} from '@refinedev/react-hook-form'
+import { useForm } from "@refinedev/react-hook-form";
-import {Controller} from 'react-hook-form'
+import { Controller } from "react-hook-form";
-import React, {useState, useEffect} from 'react'
+import React, { useState, useEffect } from "react";
-import ReactMarkdown from 'react-markdown'
+import ReactMarkdown from "react-markdown";
+import Cookies from "js-cookie";
+import { MarkdownEditor } from "../../components/MarkdownEditor";
+import "easymde/dist/easymde.min.css";
 
-import {MarkdownEditor} from '../../components/MarkdownEditor'
+const MemoizedSimpleMDE = React.memo(MarkdownEditor);
-import 'easymde/dist/easymde.min.css'
-
-const MemoizedSimpleMDE = React.memo(MarkdownEditor)
 
 export const ArticleCreate = () => {
+  const [language, setLanguage] = useState(Cookies.get("lang")!);
+  const [articleData, setArticleData] = useState<{
+    ru: { heading: string; body: string };
+    en: { heading: string; body: string };
+    zh: { heading: string; body: string };
+  }>({
+    ru: { heading: "", body: "" },
+    en: { heading: "", body: "" },
+    zh: { heading: "", body: "" },
+  });
+
   const {
     saveButtonProps,
-    refineCore: {formLoading},
+    refineCore: { formLoading },
     register,
     control,
     watch,
-    formState: {errors},
+    formState: { errors },
+    setValue,
   } = useForm({
     refineCoreProps: {
-      resource: 'article/',
+      resource: "article/",
+      meta: {
+        headers: {
+          "Accept-Language": language,
+        },
+      },
     },
-  })
+  });
 
-  const [preview, setPreview] = useState('')
+  useEffect(() => {
-  const [headingPreview, setHeadingPreview] = useState('')
+    const lang = Cookies.get("lang")!;
+    Cookies.set("lang", language);
+    return () => {
+      Cookies.set("lang", lang);
+    };
+  }, [language]);
+
+  useEffect(() => {
+    setValue(
+      "heading",
+      articleData[language as keyof typeof articleData]?.heading || ""
+    );
+    setValue(
+      "body",
+      articleData[language as keyof typeof articleData]?.body || ""
+    );
+    setPreview(articleData[language as keyof typeof articleData]?.body || "");
+    setHeadingPreview(
+      articleData[language as keyof typeof articleData]?.heading || ""
+    );
+  }, [language, articleData, setValue]);
+
+  const handleLanguageChange = (lang: string) => {
+    setArticleData((prevData) => ({
+      ...prevData,
+      [language]: {
+        heading: watch("heading") || "",
+        body: watch("body") || "",
+      },
+    }));
+    setLanguage(lang);
+    Cookies.set("lang", lang);
+  };
+
+  const [preview, setPreview] = useState("");
+  const [headingPreview, setHeadingPreview] = useState("");
 
   // Следим за изменениями в полях body и heading
-  const bodyContent = watch('body')
+  const bodyContent = watch("body");
-  const headingContent = watch('heading')
+  const headingContent = watch("heading");
 
   useEffect(() => {
-    setPreview(bodyContent || '')
+    setPreview(bodyContent || "");
-  }, [bodyContent])
+  }, [bodyContent]);
 
   useEffect(() => {
-    setHeadingPreview(headingContent || '')
+    setHeadingPreview(headingContent || "");
-  }, [headingContent])
+  }, [headingContent]);
 
   const simpleMDEOptions = React.useMemo(
     () => ({
-      placeholder: 'Введите контент в формате Markdown...',
+      placeholder: "Введите контент в формате Markdown...",
       spellChecker: false,
     }),
-    [],
+    []
-  )
+  );
 
   return (
     <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
-      <Box sx={{display: 'flex', gap: 2}}>
+      <Box sx={{ display: "flex", flex: 1, gap: 2 }}>
         {/* Форма создания */}
-        <Box component="form" sx={{flex: 1, display: 'flex', flexDirection: 'column'}} autoComplete="off">
+        <Box sx={{ display: "flex", flex: 1, flexDirection: "column", gap: 2 }}>
-          <TextField
+          <Box
-            {...register('heading', {
+            sx={{
-              required: 'Это поле является обязательным',
+              flex: 1,
-            })}
+              display: "flex",
-            error={!!(errors as any)?.heading}
+              gap: 2,
-            helperText={(errors as any)?.heading?.message}
+            }}
-            margin="normal"
+          >
-            fullWidth
+            <Box
-            InputLabelProps={{shrink: true}}
+              sx={{
-            type="text"
+                cursor: "pointer",
-            label="Заголовок *"
+                flex: 1,
-            name="heading"
+                display: "flex",
-          />
+                justifyContent: "center",
+                bgcolor: language === "ru" ? "primary.main" : "transparent",
+                color: language === "ru" ? "white" : "inherit",
+                p: 1,
+                borderRadius: 1,
+              }}
+              onClick={() => handleLanguageChange("ru")}
+            >
+              RU
+            </Box>
+            <Box
+              sx={{
+                cursor: "pointer",
+                flex: 1,
+                display: "flex",
+                justifyContent: "center",
+                bgcolor: language === "en" ? "primary.main" : "transparent",
+                color: language === "en" ? "white" : "inherit",
+                p: 1,
+                borderRadius: 1,
+              }}
+              onClick={() => handleLanguageChange("en")}
+            >
+              EN
+            </Box>
+            <Box
+              sx={{
+                cursor: "pointer",
+                flex: 1,
+                display: "flex",
+                justifyContent: "center",
+                bgcolor: language === "zh" ? "primary.main" : "transparent",
+                color: language === "zh" ? "white" : "inherit",
+                p: 1,
+                borderRadius: 1,
+              }}
+              onClick={() => handleLanguageChange("zh")}
+            >
+              ZH
+            </Box>
+          </Box>
+          <Box
+            component="form"
+            sx={{ flex: 1, display: "flex", flexDirection: "column" }}
+            autoComplete="off"
+          >
+            <TextField
+              {...register("heading", {
+                required: "Это поле является обязательным",
+              })}
+              error={!!(errors as any)?.heading}
+              helperText={(errors as any)?.heading?.message}
+              margin="normal"
+              fullWidth
+              InputLabelProps={{ shrink: true }}
+              type="text"
+              label="Заголовок *"
+              name="heading"
+            />
 
-          <Controller control={control} name="body" rules={{required: 'Это поле является обязательным'}} defaultValue="" render={({field: {onChange, value}}) => <MemoizedSimpleMDE value={value} onChange={onChange} options={simpleMDEOptions} className="my-markdown-editor" />} />
+            <Controller
+              control={control}
+              name="body"
+              rules={{ required: "Это поле является обязательным" }}
+              defaultValue=""
+              render={({ field: { onChange, value } }) => (
+                <MemoizedSimpleMDE
+                  value={value}
+                  onChange={onChange}
+                  options={simpleMDEOptions}
+                  className="my-markdown-editor"
+                />
+              )}
+            />
+          </Box>
         </Box>
 
         {/* Блок предпросмотра */}
@@ -74,14 +198,15 @@ export const ArticleCreate = () => {
           sx={{
             flex: 1,
             p: 2,
-            maxHeight: 'calc(100vh - 200px)',
+            maxHeight: "calc(100vh - 200px)",
-            overflowY: 'auto',
+            overflowY: "auto",
-            position: 'sticky',
+            position: "sticky",
             top: 16,
             borderRadius: 2,
-            border: '1px solid',
+            border: "1px solid",
-            borderColor: 'primary.main',
+            borderColor: "primary.main",
-            bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'background.paper' : '#fff'),
+            bgcolor: (theme) =>
+              theme.palette.mode === "dark" ? "background.paper" : "#fff",
           }}
         >
           <Typography variant="h6" gutterBottom color="primary">
@@ -93,7 +218,8 @@ export const ArticleCreate = () => {
             variant="h4"
             gutterBottom
             sx={{
-              color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'),
+              color: (theme) =>
+                theme.palette.mode === "dark" ? "grey.300" : "grey.800",
               mb: 3,
             }}
           >
@@ -103,39 +229,41 @@ export const ArticleCreate = () => {
           {/* Markdown контент */}
           <Box
             sx={{
-              '& img': {
+              "& img": {
-                maxWidth: '100%',
+                maxWidth: "100%",
-                height: 'auto',
+                height: "auto",
                 borderRadius: 1,
               },
-              '& h1, & h2, & h3, & h4, & h5, & h6': {
+              "& h1, & h2, & h3, & h4, & h5, & h6": {
-                color: 'primary.main',
+                color: "primary.main",
                 mt: 2,
                 mb: 1,
               },
-              '& p': {
+              "& p": {
                 mb: 2,
-                color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'),
+                color: (theme) =>
+                  theme.palette.mode === "dark" ? "grey.300" : "grey.800",
               },
-              '& a': {
+              "& a": {
-                color: 'primary.main',
+                color: "primary.main",
-                textDecoration: 'none',
+                textDecoration: "none",
-                '&:hover': {
+                "&:hover": {
-                  textDecoration: 'underline',
+                  textDecoration: "underline",
                 },
               },
-              '& blockquote': {
+              "& blockquote": {
-                borderLeft: '4px solid',
+                borderLeft: "4px solid",
-                borderColor: 'primary.main',
+                borderColor: "primary.main",
                 pl: 2,
                 my: 2,
-                color: 'text.secondary',
+                color: "text.secondary",
               },
-              '& code': {
+              "& code": {
-                bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'grey.900' : 'grey.100'),
+                bgcolor: (theme) =>
+                  theme.palette.mode === "dark" ? "grey.900" : "grey.100",
                 p: 0.5,
                 borderRadius: 0.5,
-                color: 'primary.main',
+                color: "primary.main",
               },
             }}
           >
@@ -144,5 +272,5 @@ export const ArticleCreate = () => {
         </Paper>
       </Box>
     </Create>
-  )
+  );
-}
+};

src/pages/article/edit.tsx

@@ -2,7 +2,7 @@ import { Box, TextField, Typography, Paper } from "@mui/material";
 import { Edit } from "@refinedev/mui";
 import { useForm } from "@refinedev/react-hook-form";
 import { Controller } from "react-hook-form";
-import { useParams } from "react-router";
+import { useLocation, useParams } from "react-router";
 import React, { useState, useEffect } from "react";
 import ReactMarkdown from "react-markdown";
 import { useList } from "@refinedev/core";
@@ -12,31 +12,90 @@ import { LinkedItems } from "../../components/LinkedItems";
 import { MediaItem, mediaFields } from "./types";
 import { TOKEN_KEY } from "../../authProvider";
 import "easymde/dist/easymde.min.css";
-
+import Cookies from "js-cookie";
 const MemoizedSimpleMDE = React.memo(MarkdownEditor);
 
 export const ArticleEdit = () => {
+  // const [initialLanguage] = useState(Cookies.get("lang")!);
+  // const { pathname } = useLocation();
+
+  // useEffect(() => {
+  //   Cookies.set("lang", initialLanguage);
+  // }, [pathname]);
+  const [language, setLanguage] = useState(Cookies.get("lang")!);
+  const [articleData, setArticleData] = useState<{
+    ru: { heading: string; body: string };
+    en: { heading: string; body: string };
+    zh: { heading: string; body: string };
+  }>({
+    ru: { heading: "", body: "" },
+    en: { heading: "", body: "" },
+    zh: { heading: "", body: "" },
+  });
+  const { id: articleId } = useParams<{ id: string }>();
+  const [preview, setPreview] = useState("");
+  const [headingPreview, setHeadingPreview] = useState("");
+  const simpleMDEOptions = React.useMemo(
+    () => ({
+      placeholder: "Введите контент в формате Markdown...",
+      spellChecker: false,
+    }),
+    []
+  );
+
   const {
     saveButtonProps,
     register,
     control,
+    handleSubmit,
     watch,
     formState: { errors },
-  } = useForm();
+    setValue,
-
+  } = useForm({
-  const { id: articleId } = useParams<{ id: string }>();
+    refineCoreProps: {
-  const [preview, setPreview] = useState("");
+      meta: {
-  const [headingPreview, setHeadingPreview] = useState("");
+        headers: {
-
+          "Accept-Language": language,
-  // Получаем привязанные медиа
+        },
-  const { data: mediaData } = useList<MediaItem>({
+      },
-    resource: `article/${articleId}/media`,
-    queryOptions: {
-      enabled: !!articleId,
     },
   });
 
-  // Следим за изменениями в полях body и heading
+  useEffect(() => {
+    const lang = Cookies.get("lang")!;
+    Cookies.set("lang", language);
+    return () => {
+      Cookies.set("lang", lang);
+    };
+  }, [language]);
+
+  useEffect(() => {
+    setValue(
+      "heading",
+      articleData[language as keyof typeof articleData]?.heading || ""
+    );
+    setValue(
+      "body",
+      articleData[language as keyof typeof articleData]?.body || ""
+    );
+    setPreview(articleData[language as keyof typeof articleData]?.body || "");
+    setHeadingPreview(
+      articleData[language as keyof typeof articleData]?.heading || ""
+    );
+  }, [language, articleData, setValue]);
+
+  const handleLanguageChange = (lang: string) => {
+    setArticleData((prevData) => ({
+      ...prevData,
+      [language]: {
+        heading: watch("heading") || "",
+        body: watch("body") || "",
+      },
+    }));
+    setLanguage(lang);
+    Cookies.set("lang", lang);
+  };
+
   const bodyContent = watch("body");
   const headingContent = watch("heading");
 
@@ -48,62 +107,124 @@ export const ArticleEdit = () => {
     setHeadingPreview(headingContent || "");
   }, [headingContent]);
 
-  const simpleMDEOptions = React.useMemo(
+  const onSubmit = (data: { heading: string; body: string }) => {
-    () => ({
+    // Здесь вы будете отправлять данные на сервер,
-      placeholder: "Введите контент в формате Markdown...",
+    // учитывая текущий язык (language)
-      spellChecker: false,
+    console.log("Данные для сохранения:", data, language);
-    }),
+    // ... ваша логика сохранения ...
-    []
+  };
-  );
+
+  const { data: mediaData } = useList<MediaItem>({
+    resource: `article/${articleId}/media`,
+    queryOptions: {
+      enabled: !!articleId,
+    },
+  });
 
   return (
     <Edit saveButtonProps={saveButtonProps}>
       <Box sx={{ display: "flex", gap: 2 }}>
         {/* Форма редактирования */}
-        <Box
+        {/* Форма создания */}
-          component="form"
+        <Box sx={{ display: "flex", flex: 1, flexDirection: "column", gap: 2 }}>
-          sx={{ flex: 1, display: "flex", flexDirection: "column" }}
+          <Box
-          autoComplete="off"
+            sx={{
-        >
+              flex: 1,
-          <TextField
+              display: "flex",
-            {...register("heading", {
+              gap: 2,
-              required: "Это поле является обязательным",
+            }}
-            })}
+          >
-            error={!!(errors as any)?.heading}
+            <Box
-            helperText={(errors as any)?.heading?.message}
+              sx={{
-            margin="normal"
+                cursor: "pointer",
-            fullWidth
+                flex: 1,
-            InputLabelProps={{ shrink: true }}
+                display: "flex",
-            type="text"
+                justifyContent: "center",
-            label="Заголовок *"
+                bgcolor: language === "ru" ? "primary.main" : "transparent",
-            name="heading"
+                color: language === "ru" ? "white" : "inherit",
-          />
+                p: 1,
+                borderRadius: 1,
+              }}
+              onClick={() => handleLanguageChange("ru")}
+            >
+              RU
+            </Box>
+            <Box
+              sx={{
+                cursor: "pointer",
+                flex: 1,
+                display: "flex",
+                justifyContent: "center",
+                bgcolor: language === "en" ? "primary.main" : "transparent",
+                color: language === "en" ? "white" : "inherit",
+                p: 1,
+                borderRadius: 1,
+              }}
+              onClick={() => handleLanguageChange("en")}
+            >
+              EN
+            </Box>
+            <Box
+              sx={{
+                cursor: "pointer",
+                flex: 1,
+                display: "flex",
+                justifyContent: "center",
+                bgcolor: language === "zh" ? "primary.main" : "transparent",
+                color: language === "zh" ? "white" : "inherit",
+                p: 1,
+                borderRadius: 1,
+              }}
+              onClick={() => handleLanguageChange("zh")}
+            >
+              ZH
+            </Box>
+          </Box>
+          <Box
+            component="form"
+            sx={{ flex: 1, display: "flex", flexDirection: "column" }}
+            autoComplete="off"
+          >
+            <TextField
+              {...register("heading", {
+                required: "Это поле является обязательным",
+              })}
+              error={!!(errors as any)?.heading}
+              helperText={(errors as any)?.heading?.message}
+              margin="normal"
+              fullWidth
+              InputLabelProps={{ shrink: true }}
+              type="text"
+              label="Заголовок *"
+              name="heading"
+            />
 
-          <Controller
+            <Controller
-            control={control}
+              control={control}
-            name="body"
+              name="body"
-            rules={{ required: "Это поле является обязательным" }}
+              rules={{ required: "Это поле является обязательным" }}
-            defaultValue=""
+              defaultValue=""
-            render={({ field: { onChange, value } }) => (
+              render={({ field: { onChange, value } }) => (
-              <MemoizedSimpleMDE
+                <MemoizedSimpleMDE
-                value={value} // markdown
+                  value={value} // markdown
-                onChange={onChange}
+                  onChange={onChange}
-                options={simpleMDEOptions}
+                  options={simpleMDEOptions}
-                className="my-markdown-editor"
+                  className="my-markdown-editor"
+                />
+              )}
+            />
+
+            {articleId && (
+              <LinkedItems<MediaItem>
+                type="edit"
+                parentId={articleId}
+                parentResource="article"
+                childResource="media"
+                fields={mediaFields}
+                title="медиа"
               />
             )}
-          />
+          </Box>
-
-          {articleId && (
-            <LinkedItems<MediaItem>
-              type="edit"
-              parentId={articleId}
-              parentResource="article"
-              childResource="media"
-              fields={mediaFields}
-              title="медиа"
-            />
-          )}
         </Box>
 
         {/* Блок предпросмотра */}

src/pages/carrier/edit.tsx

@@ -1,171 +1,191 @@
-import {Autocomplete, Box, TextField} from '@mui/material'
+import { Autocomplete, Box, TextField } from "@mui/material";
-import {Edit, useAutocomplete} from '@refinedev/mui'
+import { Edit, useAutocomplete } from "@refinedev/mui";
-import {useForm} from '@refinedev/react-hook-form'
+import { useForm } from "@refinedev/react-hook-form";
-import {Controller} from 'react-hook-form'
+import { Controller } from "react-hook-form";
 
 export const CarrierEdit = () => {
   const {
     saveButtonProps,
     register,
     control,
-    formState: {errors},
+    formState: { errors },
-  } = useForm()
+  } = useForm();
 
-  const {autocompleteProps: cityAutocompleteProps} = useAutocomplete({
+  const { autocompleteProps: cityAutocompleteProps } = useAutocomplete({
-    resource: 'city',
+    resource: "city",
     onSearch: (value) => [
       {
-        field: 'name',
+        field: "name",
-        operator: 'contains',
+        operator: "contains",
         value,
       },
     ],
-  })
+  });
 
-  const {autocompleteProps: mediaAutocompleteProps} = useAutocomplete({
+  const { autocompleteProps: mediaAutocompleteProps } = useAutocomplete({
-    resource: 'media',
+    resource: "media",
     onSearch: (value) => [
       {
-        field: 'media_name',
+        field: "media_name",
-        operator: 'contains',
+        operator: "contains",
         value,
       },
     ],
-  })
+  });
 
   return (
     <Edit saveButtonProps={saveButtonProps}>
-      <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
+      <Box
+        component="form"
+        sx={{ display: "flex", flexDirection: "column" }}
+        autoComplete="off"
+      >
         <Controller
           control={control}
           name="city_id"
-          rules={{required: 'Это поле является обязательным'}}
+          rules={{ required: "Это поле является обязательным" }}
           defaultValue={null}
-          render={({field}) => (
+          render={({ field }) => (
             <Autocomplete
               {...cityAutocompleteProps}
-              value={cityAutocompleteProps.options.find((option) => option.id === field.value) || null}
+              value={
+                cityAutocompleteProps.options.find(
+                  (option) => option.id === field.value
+                ) || null
+              }
               onChange={(_, value) => {
-                field.onChange(value?.id || '')
+                field.onChange(value?.id || "");
               }}
               getOptionLabel={(item) => {
-                return item ? item.name : ''
+                return item ? item.name : "";
               }}
               isOptionEqualToValue={(option, value) => {
-                return option.id === value?.id
+                return option.id === value?.id;
               }}
-              filterOptions={(options, {inputValue}) => {
+              filterOptions={(options, { inputValue }) => {
-                return options.filter((option) => option.name.toLowerCase().includes(inputValue.toLowerCase()))
+                return options.filter((option) =>
+                  option.name.toLowerCase().includes(inputValue.toLowerCase())
+                );
               }}
-              renderInput={(params) => <TextField {...params} label="Выберите город" margin="normal" variant="outlined" error={!!errors.city_id} helperText={(errors as any)?.city_id?.message} required />}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  label="Выберите город"
+                  margin="normal"
+                  variant="outlined"
+                  error={!!errors.city_id}
+                  helperText={(errors as any)?.city_id?.message}
+                  required
+                />
+              )}
             />
           )}
         />
 
         <TextField
-          {...register('full_name', {
+          {...register("full_name", {
-            required: 'Это поле является обязательным',
+            required: "Это поле является обязательным",
           })}
           error={!!(errors as any)?.full_name}
           helperText={(errors as any)?.full_name?.message}
           margin="normal"
           fullWidth
-          InputLabelProps={{shrink: true}}
+          InputLabelProps={{ shrink: true }}
           type="text"
-          label={'Полное имя *'}
+          label={"Полное имя *"}
           name="full_name"
         />
 
         <TextField
-          {...register('short_name', {
+          {...register("short_name", {
-            required: 'Это поле является обязательным',
+            required: "Это поле является обязательным",
           })}
           error={!!(errors as any)?.short_name}
           helperText={(errors as any)?.short_name?.message}
           margin="normal"
           fullWidth
-          InputLabelProps={{shrink: true}}
+          InputLabelProps={{ shrink: true }}
           type="text"
-          label={'Короткое имя *'}
+          label={"Короткое имя *"}
           name="short_name"
         />
 
         <TextField
-          {...register('main_color', {
+          {...register("main_color", {
             // required: 'Это поле является обязательным',
           })}
           error={!!(errors as any)?.main_color}
           helperText={(errors as any)?.main_color?.message}
           margin="normal"
           fullWidth
-          InputLabelProps={{shrink: true}}
+          InputLabelProps={{ shrink: true }}
           type="color"
-          label={'Основной цвет'}
+          label={"Основной цвет"}
           name="main_color"
           sx={{
-            '& input': {
+            "& input": {
-              height: '50px',
+              height: "50px",
-              paddingBlock: '14px',
+              paddingBlock: "14px",
-              paddingInline: '14px',
+              paddingInline: "14px",
-              cursor: 'pointer',
+              cursor: "pointer",
             },
           }}
         />
 
         <TextField
-          {...register('left_color', {
+          {...register("left_color", {
             // required: 'Это поле является обязательным',
           })}
           error={!!(errors as any)?.left_color}
           helperText={(errors as any)?.left_color?.message}
           margin="normal"
           fullWidth
-          InputLabelProps={{shrink: true}}
+          InputLabelProps={{ shrink: true }}
           type="color"
-          label={'Цвет левого виджета'}
+          label={"Цвет левого виджета"}
           name="left_color"
           sx={{
-            '& input': {
+            "& input": {
-              height: '50px',
+              height: "50px",
-              paddingBlock: '14px',
+              paddingBlock: "14px",
-              paddingInline: '14px',
+              paddingInline: "14px",
-              cursor: 'pointer',
+              cursor: "pointer",
             },
           }}
         />
         <TextField
-          {...register('right_color', {
+          {...register("right_color", {
             // required: 'Это поле является обязательным',
           })}
           error={!!(errors as any)?.right_color}
           helperText={(errors as any)?.right_color?.message}
           margin="normal"
           fullWidth
-          InputLabelProps={{shrink: true}}
+          InputLabelProps={{ shrink: true }}
           type="color"
-          label={'Цвет правого виджета'}
+          label={"Цвет правого виджета"}
           name="right_color"
           sx={{
-            '& input': {
+            "& input": {
-              height: '50px',
+              height: "50px",
-              paddingBlock: '14px',
+              paddingBlock: "14px",
-              paddingInline: '14px',
+              paddingInline: "14px",
-              cursor: 'pointer',
+              cursor: "pointer",
             },
           }}
         />
 
         <TextField
-          {...register('slogan', {
+          {...register("slogan", {
             // required: 'Это поле является обязательным',
           })}
           error={!!(errors as any)?.slogan}
           helperText={(errors as any)?.slogan?.message}
           margin="normal"
           fullWidth
-          InputLabelProps={{shrink: true}}
+          InputLabelProps={{ shrink: true }}
           type="text"
-          label={'Слоган'}
+          label={"Слоган"}
           name="slogan"
         />
 
@@ -174,27 +194,44 @@ export const CarrierEdit = () => {
           name="logo"
           // rules={{required: 'Это поле является обязательным'}}
           defaultValue={null}
-          render={({field}) => (
+          render={({ field }) => (
             <Autocomplete
               {...mediaAutocompleteProps}
-              value={mediaAutocompleteProps.options.find((option) => option.id === field.value) || null}
+              value={
+                mediaAutocompleteProps.options.find(
+                  (option) => option.id === field.value
+                ) || null
+              }
               onChange={(_, value) => {
-                field.onChange(value?.id || '')
+                field.onChange(value?.id || "");
               }}
               getOptionLabel={(item) => {
-                return item ? item.media_name : ''
+                return item ? item.media_name : "";
               }}
               isOptionEqualToValue={(option, value) => {
-                return option.id === value?.id
+                return option.id === value?.id;
               }}
-              filterOptions={(options, {inputValue}) => {
+              filterOptions={(options, { inputValue }) => {
-                return options.filter((option) => option.media_name.toLowerCase().includes(inputValue.toLowerCase()))
+                return options.filter((option) =>
+                  option.media_name
+                    .toLowerCase()
+                    .includes(inputValue.toLowerCase())
+                );
               }}
-              renderInput={(params) => <TextField {...params} label="Выберите логотип" margin="normal" variant="outlined" error={!!errors.logo} helperText={(errors as any)?.logo?.message} />}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  label="Выберите логотип"
+                  margin="normal"
+                  variant="outlined"
+                  error={!!errors.logo}
+                  helperText={(errors as any)?.logo?.message}
+                />
+              )}
             />
           )}
         />
       </Box>
     </Edit>
-  )
+  );
-}
+};

src/pages/carrier/list.tsx

@@ -1,110 +1,173 @@
-import {type GridColDef} from '@mui/x-data-grid'
+import { type GridColDef } from "@mui/x-data-grid";
-import {CustomDataGrid} from '../../components/CustomDataGrid'
+import { CustomDataGrid } from "../../components/CustomDataGrid";
-import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
+import {
-import React from 'react'
+  DeleteButton,
+  EditButton,
+  List,
+  ShowButton,
+  useDataGrid,
+} from "@refinedev/mui";
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { cityStore } from "../../store/CityStore";
 
-export const CarrierList = () => {
+export const CarrierList = observer(() => {
-  const {dataGridProps} = useDataGrid({})
+  const { city_id } = cityStore;
+  const { dataGridProps } = useDataGrid({
+    resource: "carrier",
+    filters: {
+      permanent: [
+        {
+          field: "cityID",
+          operator: "eq",
+          value: city_id,
+        },
+      ],
+    },
+  });
 
   const columns = React.useMemo<GridColDef[]>(
     () => [
       {
-        field: 'id',
+        field: "id",
-        headerName: 'ID',
+        headerName: "ID",
-        type: 'number',
+        type: "number",
         minWidth: 50,
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'city_id',
+        field: "city_id",
-        headerName: 'ID Города',
+        headerName: "ID Города",
-        type: 'number',
+        type: "number",
         minWidth: 100,
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'full_name',
+        field: "full_name",
-        headerName: 'Полное имя',
+        headerName: "Полное имя",
-        type: 'string',
+        type: "string",
         minWidth: 200,
       },
       {
-        field: 'short_name',
+        field: "short_name",
-        headerName: 'Короткое имя',
+        headerName: "Короткое имя",
-        type: 'string',
+        type: "string",
         minWidth: 125,
       },
       {
-        field: 'city',
+        field: "city",
-        headerName: 'Город',
+        headerName: "Город",
-        type: 'string',
+        type: "string",
         minWidth: 125,
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
         flex: 1,
       },
       {
-        field: 'main_color',
+        field: "main_color",
-        headerName: 'Основной цвет',
+        headerName: "Основной цвет",
-        type: 'string',
+        type: "string",
         minWidth: 150,
-        renderCell: ({value}) => <div style={{display: 'grid', placeItems: 'center', width: '100%', height: '100%', backgroundColor: `${value}10`, borderRadius: 10}}>{value}</div>,
+        renderCell: ({ value }) => (
+          <div
+            style={{
+              display: "grid",
+              placeItems: "center",
+              width: "100%",
+              height: "100%",
+              backgroundColor: `${value}10`,
+              borderRadius: 10,
+            }}
+          >
+            {value}
+          </div>
+        ),
       },
       {
-        field: 'left_color',
+        field: "left_color",
-        headerName: 'Цвет левого виджета',
+        headerName: "Цвет левого виджета",
-        type: 'string',
+        type: "string",
         minWidth: 150,
-        renderCell: ({value}) => <div style={{display: 'grid', placeItems: 'center', width: '100%', height: '100%', backgroundColor: `${value}10`, borderRadius: 10}}>{value}</div>,
+        renderCell: ({ value }) => (
+          <div
+            style={{
+              display: "grid",
+              placeItems: "center",
+              width: "100%",
+              height: "100%",
+              backgroundColor: `${value}10`,
+              borderRadius: 10,
+            }}
+          >
+            {value}
+          </div>
+        ),
       },
       {
-        field: 'right_color',
+        field: "right_color",
-        headerName: 'Цвет правого виджета',
+        headerName: "Цвет правого виджета",
-        type: 'string',
+        type: "string",
         minWidth: 150,
-        renderCell: ({value}) => <div style={{display: 'grid', placeItems: 'center', width: '100%', height: '100%', backgroundColor: `${value}10`, borderRadius: 10}}>{value}</div>,
+        renderCell: ({ value }) => (
+          <div
+            style={{
+              display: "grid",
+              placeItems: "center",
+              width: "100%",
+              height: "100%",
+              backgroundColor: `${value}10`,
+              borderRadius: 10,
+            }}
+          >
+            {value}
+          </div>
+        ),
       },
       {
-        field: 'logo',
+        field: "logo",
-        headerName: 'Лого',
+        headerName: "Лого",
-        type: 'string',
+        type: "string",
         minWidth: 150,
       },
       {
-        field: 'slogan',
+        field: "slogan",
-        headerName: 'Слоган',
+        headerName: "Слоган",
-        type: 'string',
+        type: "string",
         minWidth: 150,
       },
       {
-        field: 'actions',
+        field: "actions",
-        headerName: 'Действия',
+        headerName: "Действия",
         minWidth: 120,
-        display: 'flex',
+        display: "flex",
-        align: 'right',
+        align: "right",
-        headerAlign: 'center',
+        headerAlign: "center",
         sortable: false,
         filterable: false,
         disableColumnMenu: true,
-        renderCell: function render({row}) {
+        renderCell: function render({ row }) {
           return (
             <>
               <EditButton hideText recordItemId={row.id} />
               <ShowButton hideText recordItemId={row.id} />
-              <DeleteButton hideText confirmTitle="Вы уверены?" recordItemId={row.id} />
+              <DeleteButton
+                hideText
+                confirmTitle="Вы уверены?"
+                recordItemId={row.id}
+              />
             </>
-          )
+          );
         },
       },
     ],
-    [],
+    []
-  )
+  );
 
   return (
     <List>
       <CustomDataGrid {...dataGridProps} columns={columns} />
     </List>
-  )
+  );
-}
+});

src/pages/route/list.tsx

@@ -1,156 +1,175 @@
-import {type GridColDef} from '@mui/x-data-grid'
+import { type GridColDef } from "@mui/x-data-grid";
-import {CustomDataGrid} from '../../components/CustomDataGrid'
+import { CustomDataGrid } from "../../components/CustomDataGrid";
-import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
+import {
-import {Typography} from '@mui/material'
+  DeleteButton,
-import React from 'react'
+  EditButton,
+  List,
+  ShowButton,
+  useDataGrid,
+} from "@refinedev/mui";
+import { Typography } from "@mui/material";
+import React from "react";
 
-import {localeText} from '../../locales/ru/localeText'
+import { localeText } from "../../locales/ru/localeText";
 
 export const RouteList = () => {
-  const {dataGridProps} = useDataGrid({
+  const { dataGridProps } = useDataGrid({
-    resource: 'route/',
+    resource: "route/",
-  })
+  });
 
   const columns = React.useMemo<GridColDef[]>(
     () => [
       {
-        field: 'id',
+        field: "id",
-        headerName: 'ID',
+        headerName: "ID",
-        type: 'number',
+        type: "number",
         minWidth: 70,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'carrier_id',
+        field: "carrier_id",
-        headerName: 'ID перевозчика',
+        headerName: "ID перевозчика",
-        type: 'number',
+        type: "number",
         minWidth: 150,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'carrier',
+        field: "carrier",
-        headerName: 'Перевозчик',
+        headerName: "Перевозчик",
-        type: 'string',
+        type: "string",
         minWidth: 150,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'route_number',
+        field: "route_number",
-        headerName: 'Номер маршрута',
+        headerName: "Номер маршрута",
-        type: 'string',
+        type: "string",
         minWidth: 150,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'route_sys_number',
+        field: "route_sys_number",
-        headerName: 'Системный номер маршрута',
+        headerName: "Системный номер маршрута",
-        type: 'string',
+        type: "string",
         minWidth: 120,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'governor_appeal',
+        field: "governor_appeal",
-        headerName: 'Обращение губернатора',
+        headerName: "Обращение губернатора",
-        type: 'number',
+        type: "number",
         minWidth: 120,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'scale_min',
+        field: "scale_min",
-        headerName: 'Масштаб (мин)',
+        headerName: "Масштаб (мин)",
-        type: 'number',
+        type: "number",
         minWidth: 120,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'scale_max',
+        field: "scale_max",
-        headerName: 'Масштаб (макс)',
+        headerName: "Масштаб (макс)",
-        type: 'number',
+        type: "number",
         minWidth: 120,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'rotate',
+        field: "rotate",
-        headerName: 'Поворот',
+        headerName: "Поворот",
-        type: 'number',
+        type: "number",
         minWidth: 120,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'center_latitude',
+        field: "center_latitude",
-        headerName: 'Центр. широта',
+        headerName: "Центр. широта",
-        type: 'number',
+        type: "number",
         minWidth: 120,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'center_longitude',
+        field: "center_longitude",
-        headerName: 'Центр. долгота',
+        headerName: "Центр. долгота",
-        type: 'number',
+        type: "number",
         minWidth: 120,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'route_direction',
+        field: "route_direction",
-        headerName: 'Направление маршрута',
+        headerName: "Направление маршрута",
-        type: 'boolean',
+        type: "boolean",
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
         minWidth: 120,
         flex: 1,
-        renderCell: ({value}) => <Typography style={{color: value ? '#48989f' : '#7f6b58'}}>{value ? 'прямое' : 'обратное'}</Typography>,
+        renderCell: ({ value }) => (
+          <Typography style={{ color: value ? "#48989f" : "#7f6b58" }}>
+            {value ? "прямое" : "обратное"}
+          </Typography>
+        ),
       },
       {
-        field: 'actions',
+        field: "actions",
-        headerName: 'Действия',
+        headerName: "Действия",
-        cellClassName: 'route-actions',
+        cellClassName: "route-actions",
-        align: 'right',
+        align: "right",
-        headerAlign: 'center',
+        headerAlign: "center",
         minWidth: 120,
-        display: 'flex',
+        display: "flex",
         sortable: false,
         filterable: false,
         disableColumnMenu: true,
-        renderCell: function render({row}) {
+        renderCell: function render({ row }) {
           return (
             <>
               <EditButton hideText recordItemId={row.id} />
               <ShowButton hideText recordItemId={row.id} />
-              <DeleteButton hideText confirmTitle="Вы уверены?" recordItemId={row.id} />
+              <DeleteButton
+                hideText
+                confirmTitle="Вы уверены?"
+                recordItemId={row.id}
+              />
             </>
-          )
+          );
         },
       },
     ],
-    [],
+    []
-  )
+  );
 
   return (
     <List>
-      <CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} />
+      <CustomDataGrid
+        {...dataGridProps}
+        columns={columns}
+        localeText={localeText}
+        getRowId={(row: any) => row.id}
+      />
     </List>
-  )
+  );
-}
+};

src/pages/route/types.ts

@@ -1,35 +1,36 @@
-import {VEHICLE_TYPES} from '../../lib/constants'
+import { VEHICLE_TYPES } from "../../lib/constants";
 
 export type StationItem = {
-  id: number
+  id: number;
-  name: string
+  name: string;
-  description: string
+  description: string;
-  [key: string]: string | number
+  [key: string]: string | number;
-}
+};
 
 export type VehicleItem = {
-  id: number
+  id: number;
-  tail_number: number
+  tail_number: number;
-  type: number
+  type: number;
-  [key: string]: string | number
+  [key: string]: string | number;
-}
+};
 
 export type FieldType<T> = {
-  label: string
+  label: string;
-  data: keyof T
+  data: keyof T;
-  render?: (value: any) => React.ReactNode
+  render?: (value: any) => React.ReactNode;
-}
+};
 
 export const stationFields: Array<FieldType<StationItem>> = [
-  {label: 'Название', data: 'system_name'},
+  { label: "Название", data: "name" },
-  {label: 'Описание', data: 'description'},
+  { label: "Описание", data: "description" },
-]
+];
 
 export const vehicleFields: Array<FieldType<VehicleItem>> = [
-  {label: 'Бортовой номер', data: 'tail_number'},
+  { label: "Бортовой номер", data: "tail_number" },
   {
-    label: 'Тип',
+    label: "Тип",
-    data: 'type',
+    data: "type",
-    render: (value: number) => VEHICLE_TYPES.find((type) => type.value === value)?.label || value,
+    render: (value: number) =>
+      VEHICLE_TYPES.find((type) => type.value === value)?.label || value,
   },
-]
+];

src/pages/sight/create.tsx

@@ -2,25 +2,45 @@ import { Autocomplete, Box, TextField, Typography, Paper } from "@mui/material";
 import { Create, useAutocomplete } from "@refinedev/mui";
 import { useForm } from "@refinedev/react-hook-form";
 import { Controller } from "react-hook-form";
-import { Link } from "react-router";
+import { cityStore } from "../../store/CityStore";
 import React, { useState, useEffect } from "react";
 import { TOKEN_KEY } from "../../authProvider";
+import { observer } from "mobx-react-lite";
+import Cookies from "js-cookie";
+import { useLocation } from "react-router";
+
+export const SightCreate = observer(() => {
+  const [language, setLanguage] = useState(Cookies.get("lang") || "ru");
+  // Состояния для предпросмотра
+  const handleLanguageChange = (lang: string) => {
+    setLanguage(lang);
+    Cookies.set("lang", lang);
+  };
+
+  useEffect(() => {
+    const lang = Cookies.get("lang")!;
+    Cookies.set("lang", language);
+
+    return () => {
+      Cookies.set("lang", lang);
+    };
+  }, [language]);
 
-export const SightCreate = () => {
   const {
     saveButtonProps,
     refineCore: { formLoading },
     register,
     control,
     watch,
+    setValue,
     formState: { errors },
   } = useForm({
     refineCoreProps: {
       resource: "sight/",
     },
   });
+  const { city_id } = cityStore;
 
-  // Состояния для предпросмотра
   const [namePreview, setNamePreview] = useState("");
   const [coordinatesPreview, setCoordinatesPreview] = useState({
     latitude: "",
@@ -37,6 +57,16 @@ export const SightCreate = () => {
   const [leftArticlePreview, setLeftArticlePreview] = useState("");
   const [previewArticlePreview, setPreviewArticlePreview] = useState("");
 
+  const handleCoordinatesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const [lat, lon] = e.target.value.split(",").map((s) => s.trim());
+    setCoordinatesPreview({
+      latitude: lat,
+      longitude: lon,
+    });
+    setValue("latitude", lat);
+    setValue("longitude", lon);
+  };
+
   // Автокомплиты
   const { autocompleteProps: cityAutocompleteProps } = useAutocomplete({
     resource: "city",
@@ -47,6 +77,11 @@ export const SightCreate = () => {
         value,
       },
     ],
+    meta: {
+      headers: {
+        "Accept-Language": language,
+      },
+    },
   });
 
   const { autocompleteProps: mediaAutocompleteProps } = useAutocomplete({
@@ -73,6 +108,7 @@ export const SightCreate = () => {
 
   // Следим за изменениями во всех полях
   const nameContent = watch("name");
+  const addressContent = watch("address");
   const latitudeContent = watch("latitude");
   const longitudeContent = watch("longitude");
   const cityContent = watch("city_id");
@@ -114,6 +150,12 @@ export const SightCreate = () => {
     );
   }, [thumbnailContent, mediaAutocompleteProps.options]);
 
+  useEffect(() => {
+    if (city_id) {
+      setValue("city_id", +city_id);
+    }
+  }, [city_id, setValue]);
+
   useEffect(() => {
     const selectedWatermarkLU = mediaAutocompleteProps.options.find(
       (option) => option.id === watermarkLUContent
@@ -157,313 +199,380 @@ export const SightCreate = () => {
   return (
     <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
       <Box sx={{ display: "flex", gap: 2 }}>
-        {/* Форма создания */}
+        <Box sx={{ display: "flex", flexDirection: "column", flex: 1, gap: 2 }}>
-        <Box
+          {/* Форма создания */}
-          component="form"
+          <Box
-          sx={{ flex: 1, display: "flex", flexDirection: "column" }}
+            sx={{
-          autoComplete="off"
+              flex: 1,
-        >
+              display: "flex",
-          <TextField
+              gap: 2,
-            {...register("name", {
+            }}
-              required: "Это поле является обязательным",
+          >
-            })}
+            <Box
-            error={!!(errors as any)?.name}
+              sx={{
-            helperText={(errors as any)?.name?.message}
+                cursor: "pointer",
-            margin="normal"
+                flex: 1,
-            fullWidth
+                display: "flex",
-            InputLabelProps={{ shrink: true }}
+                justifyContent: "center",
-            type="text"
+                bgcolor: language === "ru" ? "primary.main" : "transparent",
-            label={"Название *"}
+                color: language === "ru" ? "white" : "inherit",
-            name="name"
+                borderRadius: 1,
-          />
+                p: 1,
-          <TextField
+              }}
-            {...register("latitude", {
+              onClick={() => handleLanguageChange("ru")}
-              required: "Это поле является обязательным",
+            >
-              valueAsNumber: true,
+              RU
-            })}
+            </Box>
-            error={!!(errors as any)?.latitude}
+            <Box
-            helperText={(errors as any)?.latitude?.message}
+              sx={{
-            margin="normal"
+                cursor: "pointer",
-            fullWidth
+                flex: 1,
-            InputLabelProps={{ shrink: true }}
+                display: "flex",
-            type="number"
+                justifyContent: "center",
-            label={"Широта *"}
+                bgcolor: language === "en" ? "primary.main" : "transparent",
-            name="latitude"
+                color: language === "en" ? "white" : "inherit",
-          />
+                borderRadius: 1,
-          <TextField
+                p: 1,
-            {...register("longitude", {
+              }}
-              required: "Это поле является обязательным",
+              onClick={() => handleLanguageChange("en")}
-              valueAsNumber: true,
+            >
-            })}
+              EN
-            error={!!(errors as any)?.longitude}
+            </Box>
-            helperText={(errors as any)?.longitude?.message}
+            <Box
-            margin="normal"
+              sx={{
-            fullWidth
+                cursor: "pointer",
-            InputLabelProps={{ shrink: true }}
+                flex: 1,
-            type="number"
+                display: "flex",
-            label={"Долгота *"}
+                justifyContent: "center",
-            name="longitude"
+                bgcolor: language === "zh" ? "primary.main" : "transparent",
-          />
+                color: language === "zh" ? "white" : "inherit",
+                borderRadius: 1,
+                p: 1,
+              }}
+              onClick={() => handleLanguageChange("zh")}
+            >
+              ZH
+            </Box>
+          </Box>
 
-          <Controller
+          <Box
-            control={control}
+            component="form"
-            name="city_id"
+            sx={{ flex: 1, display: "flex", flexDirection: "column" }}
-            rules={{ required: "Это поле является обязательным" }}
+            autoComplete="off"
-            defaultValue={null}
+          >
-            render={({ field }) => (
+            <TextField
-              <Autocomplete
+              {...register("name", {
-                {...cityAutocompleteProps}
+                required: "Это поле является обязательным",
-                value={
+              })}
-                  cityAutocompleteProps.options.find(
+              error={!!(errors as any)?.name}
-                    (option) => option.id === field.value
+              helperText={(errors as any)?.name?.message}
-                  ) || null
+              margin="normal"
-                }
+              fullWidth
-                onChange={(_, value) => {
+              InputLabelProps={{ shrink: true }}
-                  field.onChange(value?.id || "");
+              type="text"
-                }}
+              label={"Название *"}
-                getOptionLabel={(item) => {
+              name="name"
-                  return item ? item.name : "";
+            />
-                }}
-                isOptionEqualToValue={(option, value) => {
-                  return option.id === value?.id;
-                }}
-                filterOptions={(options, { inputValue }) => {
-                  return options.filter((option) =>
-                    option.name.toLowerCase().includes(inputValue.toLowerCase())
-                  );
-                }}
-                renderInput={(params) => (
-                  <TextField
-                    {...params}
-                    label="Выберите город"
-                    margin="normal"
-                    variant="outlined"
-                    error={!!errors.city_id}
-                    helperText={(errors as any)?.city_id?.message}
-                    required
-                  />
-                )}
-              />
-            )}
-          />
 
-          <Controller
+            <TextField
-            control={control}
+              value={`${coordinatesPreview.latitude}, ${coordinatesPreview.longitude}`}
-            name="thumbnail"
+              onChange={handleCoordinatesChange}
-            defaultValue={null}
+              error={!!(errors as any)?.latitude}
-            render={({ field }) => (
+              helperText={(errors as any)?.latitude?.message}
-              <Autocomplete
+              margin="normal"
-                {...mediaAutocompleteProps}
+              fullWidth
-                value={
+              InputLabelProps={{ shrink: true }}
-                  mediaAutocompleteProps.options.find(
+              type="text"
-                    (option) => option.id === field.value
+              label={"Координаты *"}
-                  ) || null
+            />
-                }
+            <input
-                onChange={(_, value) => {
+              type="hidden"
-                  field.onChange(value?.id || "");
+              {...register("longitude", {
-                }}
+                value: coordinatesPreview.longitude,
-                getOptionLabel={(item) => {
+                required: "Это поле является обязательным",
-                  return item ? item.media_name : "";
+                valueAsNumber: true,
-                }}
+              })}
-                isOptionEqualToValue={(option, value) => {
+            />
-                  return option.id === value?.id;
+            <input
-                }}
+              type="hidden"
-                filterOptions={(options, { inputValue }) => {
+              {...register("latitude", {
-                  return options.filter((option) =>
+                value: coordinatesPreview.latitude,
-                    option.media_name
+                required: "Это поле является обязательным",
-                      .toLowerCase()
+                valueAsNumber: true,
-                      .includes(inputValue.toLowerCase())
+              })}
-                  );
+            />
-                }}
-                renderInput={(params) => (
-                  <TextField
-                    {...params}
-                    label="Выберите обложку"
-                    margin="normal"
-                    variant="outlined"
-                    error={!!errors.arms}
-                    helperText={(errors as any)?.arms?.message}
-                    required
-                  />
-                )}
-              />
-            )}
-          />
 
-          <Controller
+            <TextField
-            control={control}
+              {...register("address", {
-            name="watermark_lu"
+                required: "Это поле является обязательным",
-            defaultValue={null}
+              })}
-            render={({ field }) => (
+              error={!!(errors as any)?.address}
-              <Autocomplete
+              helperText={(errors as any)?.address?.message}
-                {...mediaAutocompleteProps}
+              margin="normal"
-                value={
+              fullWidth
-                  mediaAutocompleteProps.options.find(
+              InputLabelProps={{ shrink: true }}
-                    (option) => option.id === field.value
+              type="text"
-                  ) || null
+              label={"Адрес *"}
-                }
+              name="address"
-                onChange={(_, value) => {
+            />
-                  field.onChange(value?.id || "");
-                }}
-                getOptionLabel={(item) => {
-                  return item ? item.media_name : "";
-                }}
-                isOptionEqualToValue={(option, value) => {
-                  return option.id === value?.id;
-                }}
-                filterOptions={(options, { inputValue }) => {
-                  return options.filter((option) =>
-                    option.media_name
-                      .toLowerCase()
-                      .includes(inputValue.toLowerCase())
-                  );
-                }}
-                renderInput={(params) => (
-                  <TextField
-                    {...params}
-                    label="Выберите водный знак (Левый верх)"
-                    margin="normal"
-                    variant="outlined"
-                    error={!!errors.arms}
-                    helperText={(errors as any)?.arms?.message}
-                    required
-                  />
-                )}
-              />
-            )}
-          />
 
-          <Controller
+            <Controller
-            control={control}
+              control={control}
-            name="watermark_rd"
+              name="city_id"
-            defaultValue={null}
+              rules={{ required: "Это поле является обязательным" }}
-            render={({ field }) => (
+              render={({ field }) => (
-              <Autocomplete
+                <Autocomplete
-                {...mediaAutocompleteProps}
+                  {...cityAutocompleteProps}
-                value={
+                  value={
-                  mediaAutocompleteProps.options.find(
+                    cityAutocompleteProps.options.find(
-                    (option) => option.id === field.value
+                      (option) => option.id === field.value
-                  ) || null
+                    ) || null
-                }
+                  }
-                onChange={(_, value) => {
+                  onChange={(_, value) => {
-                  field.onChange(value?.id || "");
+                    field.onChange(value?.id || "");
-                }}
+                  }}
-                getOptionLabel={(item) => {
+                  getOptionLabel={(item) => {
-                  return item ? item.media_name : "";
+                    return item ? item.name : "";
-                }}
+                  }}
-                isOptionEqualToValue={(option, value) => {
+                  isOptionEqualToValue={(option, value) => {
-                  return option.id === value?.id;
+                    return option.id === value?.id;
-                }}
+                  }}
-                filterOptions={(options, { inputValue }) => {
+                  filterOptions={(options, { inputValue }) => {
-                  return options.filter((option) =>
+                    return options.filter((option) =>
-                    option.media_name
+                      option.name
-                      .toLowerCase()
+                        .toLowerCase()
-                      .includes(inputValue.toLowerCase())
+                        .includes(inputValue.toLowerCase())
-                  );
+                    );
-                }}
+                  }}
-                renderInput={(params) => (
+                  renderInput={(params) => (
-                  <TextField
+                    <TextField
-                    {...params}
+                      {...params}
-                    label="Выберите водный знак (Правый низ)"
+                      label="Выберите город"
-                    margin="normal"
+                      margin="normal"
-                    variant="outlined"
+                      variant="outlined"
-                    error={!!errors.arms}
+                      error={!!errors.city_id}
-                    helperText={(errors as any)?.arms?.message}
+                      helperText={(errors as any)?.city_id?.message}
-                    required
+                      required
-                  />
+                    />
-                )}
+                  )}
-              />
+                />
-            )}
+              )}
-          />
+            />
 
-          <Controller
+            <Controller
-            control={control}
+              control={control}
-            name="left_article"
+              name="thumbnail"
-            defaultValue={null}
+              defaultValue={null}
-            render={({ field }) => (
+              render={({ field }) => (
-              <Autocomplete
+                <Autocomplete
-                {...articleAutocompleteProps}
+                  {...mediaAutocompleteProps}
-                value={
+                  value={
-                  articleAutocompleteProps.options.find(
+                    mediaAutocompleteProps.options.find(
-                    (option) => option.id === field.value
+                      (option) => option.id === field.value
-                  ) || null
+                    ) || null
-                }
+                  }
-                onChange={(_, value) => {
+                  onChange={(_, value) => {
-                  field.onChange(value?.id || "");
+                    field.onChange(value?.id || "");
-                }}
+                  }}
-                getOptionLabel={(item) => {
+                  getOptionLabel={(item) => {
-                  return item ? item.heading : "";
+                    return item ? item.media_name : "";
-                }}
+                  }}
-                isOptionEqualToValue={(option, value) => {
+                  isOptionEqualToValue={(option, value) => {
-                  return option.id === value?.id;
+                    return option.id === value?.id;
-                }}
+                  }}
-                filterOptions={(options, { inputValue }) => {
+                  filterOptions={(options, { inputValue }) => {
-                  return options.filter((option) =>
+                    return options.filter((option) =>
-                    option.heading
+                      option.media_name
-                      .toLowerCase()
+                        .toLowerCase()
-                      .includes(inputValue.toLowerCase())
+                        .includes(inputValue.toLowerCase())
-                  );
+                    );
-                }}
+                  }}
-                renderInput={(params) => (
+                  renderInput={(params) => (
-                  <TextField
+                    <TextField
-                    {...params}
+                      {...params}
-                    label="Левая статья"
+                      label="Выберите обложку"
-                    margin="normal"
+                      margin="normal"
-                    variant="outlined"
+                      variant="outlined"
-                    error={!!errors.arms}
+                      error={!!errors.thumbnail}
-                    helperText={(errors as any)?.arms?.message}
+                      helperText={(errors as any)?.thumbnail?.message}
-                    required
+                      required
-                  />
+                    />
-                )}
+                  )}
-              />
+                />
-            )}
+              )}
-          />
+            />
 
-          <Controller
+            <Controller
-            control={control}
+              control={control}
-            name="preview_article"
+              name="watermark_lu"
-            defaultValue={null}
+              defaultValue={null}
-            render={({ field }) => (
+              render={({ field }) => (
-              <Autocomplete
+                <Autocomplete
-                {...articleAutocompleteProps}
+                  {...mediaAutocompleteProps}
-                value={
+                  value={
-                  articleAutocompleteProps.options.find(
+                    mediaAutocompleteProps.options.find(
-                    (option) => option.id === field.value
+                      (option) => option.id === field.value
-                  ) || null
+                    ) || null
-                }
+                  }
-                onChange={(_, value) => {
+                  onChange={(_, value) => {
-                  field.onChange(value?.id || "");
+                    field.onChange(value?.id || "");
-                }}
+                  }}
-                getOptionLabel={(item) => {
+                  getOptionLabel={(item) => {
-                  return item ? item.heading : "";
+                    return item ? item.media_name : "";
-                }}
+                  }}
-                isOptionEqualToValue={(option, value) => {
+                  isOptionEqualToValue={(option, value) => {
-                  return option.id === value?.id;
+                    return option.id === value?.id;
-                }}
+                  }}
-                filterOptions={(options, { inputValue }) => {
+                  filterOptions={(options, { inputValue }) => {
-                  return options.filter((option) =>
+                    return options.filter((option) =>
-                    option.heading
+                      option.media_name
-                      .toLowerCase()
+                        .toLowerCase()
-                      .includes(inputValue.toLowerCase())
+                        .includes(inputValue.toLowerCase())
-                  );
+                    );
-                }}
+                  }}
-                renderInput={(params) => (
+                  renderInput={(params) => (
-                  <TextField
+                    <TextField
-                    {...params}
+                      {...params}
-                    label="Cтатья-предпросмотр"
+                      label="Выберите водный знак (Левый верх)"
-                    margin="normal"
+                      margin="normal"
-                    variant="outlined"
+                      variant="outlined"
-                    error={!!errors.arms}
+                      error={!!errors.watermark_lu}
-                    helperText={(errors as any)?.arms?.message}
+                      helperText={(errors as any)?.watermark_lu?.message}
-                    required
+                    />
-                  />
+                  )}
-                )}
+                />
-              />
+              )}
-            )}
+            />
-          />
+
+            <Controller
+              control={control}
+              name="watermark_rd"
+              defaultValue={null}
+              render={({ field }) => (
+                <Autocomplete
+                  {...mediaAutocompleteProps}
+                  value={
+                    mediaAutocompleteProps.options.find(
+                      (option) => option.id === field.value
+                    ) || null
+                  }
+                  onChange={(_, value) => {
+                    field.onChange(value?.id || "");
+                  }}
+                  getOptionLabel={(item) => {
+                    return item ? item.media_name : "";
+                  }}
+                  isOptionEqualToValue={(option, value) => {
+                    return option.id === value?.id;
+                  }}
+                  filterOptions={(options, { inputValue }) => {
+                    return options.filter((option) =>
+                      option.media_name
+                        .toLowerCase()
+                        .includes(inputValue.toLowerCase())
+                    );
+                  }}
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      label="Выберите водный знак (Правый верх)"
+                      margin="normal"
+                      variant="outlined"
+                      error={!!errors.watermark_rd}
+                      helperText={(errors as any)?.watermark_rd?.message}
+                    />
+                  )}
+                />
+              )}
+            />
+
+            <Controller
+              control={control}
+              name="left_article"
+              defaultValue={null}
+              render={({ field }) => (
+                <Autocomplete
+                  {...articleAutocompleteProps}
+                  value={
+                    articleAutocompleteProps.options.find(
+                      (option) => option.id === field.value
+                    ) || null
+                  }
+                  onChange={(_, value) => {
+                    field.onChange(value?.id || "");
+                  }}
+                  getOptionLabel={(item) => {
+                    return item ? item.heading : "";
+                  }}
+                  isOptionEqualToValue={(option, value) => {
+                    return option.id === value?.id;
+                  }}
+                  filterOptions={(options, { inputValue }) => {
+                    return options.filter((option) =>
+                      option.heading
+                        .toLowerCase()
+                        .includes(inputValue.toLowerCase())
+                    );
+                  }}
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      label="Левая статья"
+                      margin="normal"
+                      variant="outlined"
+                      error={!!errors.left_article}
+                      helperText={(errors as any)?.left_article?.message}
+                    />
+                  )}
+                />
+              )}
+            />
+
+            <Controller
+              control={control}
+              name="preview_article"
+              defaultValue={null}
+              render={({ field }) => (
+                <Autocomplete
+                  {...articleAutocompleteProps}
+                  value={
+                    articleAutocompleteProps.options.find(
+                      (option) => option.id === field.value
+                    ) || null
+                  }
+                  onChange={(_, value) => {
+                    field.onChange(value?.id || "");
+                  }}
+                  getOptionLabel={(item) => {
+                    return item ? item.heading : "";
+                  }}
+                  isOptionEqualToValue={(option, value) => {
+                    return option.id === value?.id;
+                  }}
+                  filterOptions={(options, { inputValue }) => {
+                    return options.filter((option) =>
+                      option.heading
+                        .toLowerCase()
+                        .includes(inputValue.toLowerCase())
+                    );
+                  }}
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      label="Cтатья-предпросмотр"
+                      margin="normal"
+                      variant="outlined"
+                      error={!!errors.preview_article}
+                      helperText={(errors as any)?.preview_article?.message}
+                    />
+                  )}
+                />
+              )}
+            />
+          </Box>
         </Box>
 
-        {/* Блок предпросмотра */}
+        {/* Preview Panel */}
         <Paper
           sx={{
             flex: 1,
@@ -483,13 +592,14 @@ export const SightCreate = () => {
             Предпросмотр
           </Typography>
 
-          {/* Название */}
+          {/* Название достопримечательности */}
           <Typography
             variant="h4"
             gutterBottom
             sx={{
               color: (theme) =>
                 theme.palette.mode === "dark" ? "grey.300" : "grey.800",
+              mb: 3,
             }}
           >
             {namePreview}
@@ -511,6 +621,22 @@ export const SightCreate = () => {
             </Box>
           </Typography>
 
+          {/* Адрес */}
+          <Typography variant="body1" sx={{ mb: 2 }}>
+            <Box component="span" sx={{ color: "text.secondary" }}>
+              Адрес:{" "}
+            </Box>
+            <Box
+              component="span"
+              sx={{
+                color: (theme) =>
+                  theme.palette.mode === "dark" ? "grey.300" : "grey.800",
+              }}
+            >
+              {addressContent}
+            </Box>
+          </Typography>
+
           {/* Координаты */}
           <Typography variant="body1" sx={{ mb: 2 }}>
             <Box component="span" sx={{ color: "text.secondary" }}>
@@ -523,7 +649,7 @@ export const SightCreate = () => {
                   theme.palette.mode === "dark" ? "grey.300" : "grey.800",
               }}
             >
-              {coordinatesPreview.latitude}, {coordinatesPreview.longitude}
+              {`${coordinatesPreview.latitude}, ${coordinatesPreview.longitude}`}
             </Box>
           </Typography>
 
@@ -543,8 +669,8 @@ export const SightCreate = () => {
                 alt="Обложка"
                 sx={{
                   maxWidth: "100%",
-                  height: "auto",
+                  height: "40vh",
-                  borderRadius: 1,
+                  borderRadius: 2,
                   border: "1px solid",
                   borderColor: "primary.main",
                 }}
@@ -593,7 +719,7 @@ export const SightCreate = () => {
                     gutterBottom
                     sx={{ color: "text.secondary" }}
                   >
-                    Правый нижний:
+                    Правый верхний:
                   </Typography>
                   <Box
                     component="img"
@@ -615,28 +741,16 @@ export const SightCreate = () => {
 
           {/* Связанные статьи */}
           <Box>
-            <Typography
-              variant="body1"
-              gutterBottom
-              sx={{ color: "text.secondary" }}
-            >
-              Связанные статьи:
-            </Typography>
             {leftArticlePreview && (
               <Typography variant="body1" gutterBottom>
                 <Box component="span" sx={{ color: "text.secondary" }}>
                   Левая статья:{" "}
                 </Box>
                 <Box
-                  component={Link}
+                  component="span"
-                  to={`/article/show/${watch("left_article")}`}
                   sx={{
                     color: (theme) =>
                       theme.palette.mode === "dark" ? "grey.300" : "grey.800",
-                    textDecoration: "none",
-                    "&:hover": {
-                      textDecoration: "underline",
-                    },
                   }}
                 >
                   {leftArticlePreview}
@@ -649,15 +763,10 @@ export const SightCreate = () => {
                   Статья-предпросмотр:{" "}
                 </Box>
                 <Box
-                  component={Link}
+                  component="span"
-                  to={`/article/show/${watch("preview_article")}`}
                   sx={{
                     color: (theme) =>
                       theme.palette.mode === "dark" ? "grey.300" : "grey.800",
-                    textDecoration: "none",
-                    "&:hover": {
-                      textDecoration: "underline",
-                    },
                   }}
                 >
                   {previewArticlePreview}
@@ -669,4 +778,4 @@ export const SightCreate = () => {
       </Box>
     </Create>
   );
-};
+});

src/pages/sight/list.tsx

@@ -1,128 +1,158 @@
-import React from 'react'
+import React from "react";
-import {type GridColDef} from '@mui/x-data-grid'
+import { type GridColDef } from "@mui/x-data-grid";
-import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
+import {
-import {Stack} from '@mui/material'
+  DeleteButton,
-import {CustomDataGrid} from '../../components/CustomDataGrid'
+  EditButton,
-import {localeText} from '../../locales/ru/localeText'
+  List,
+  ShowButton,
+  useDataGrid,
+} from "@refinedev/mui";
+import { Stack } from "@mui/material";
+import { CustomDataGrid } from "../../components/CustomDataGrid";
+import { localeText } from "../../locales/ru/localeText";
+import { cityStore } from "../../store/CityStore";
+import { observer } from "mobx-react-lite";
 
-export const SightList = () => {
+export const SightList = observer(() => {
-  const {dataGridProps} = useDataGrid({resource: 'sight/'})
+  const { city_id } = cityStore;
+  const { dataGridProps } = useDataGrid({
+    resource: "sight/",
+    filters: {
+      permanent: [
+        {
+          field: "cityID",
+          operator: "eq",
+          value: city_id,
+        },
+      ],
+    },
+  });
 
   const columns = React.useMemo<GridColDef[]>(
     () => [
       {
-        field: 'id',
+        field: "id",
-        headerName: 'ID',
+        headerName: "ID",
-        type: 'number',
+        type: "number",
         minWidth: 70,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'name',
+        field: "name",
-        headerName: 'Название',
+        headerName: "Название",
-        type: 'string',
+        type: "string",
         minWidth: 150,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'latitude',
+        field: "latitude",
-        headerName: 'Широта',
+        headerName: "Широта",
-        type: 'number',
+        type: "number",
         minWidth: 150,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'longitude',
+        field: "longitude",
-        headerName: 'Долгота',
+        headerName: "Долгота",
-        type: 'number',
+        type: "number",
         minWidth: 150,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'city_id',
+        field: "city_id",
-        headerName: 'ID города',
+        headerName: "ID города",
-        type: 'number',
+        type: "number",
         minWidth: 70,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'city',
+        field: "city",
-        headerName: 'Город',
+        headerName: "Город",
-        type: 'string',
+        type: "string",
         minWidth: 100,
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
         flex: 1,
       },
       {
-        field: 'thumbnail',
+        field: "thumbnail",
-        headerName: 'Карточка',
+        headerName: "Карточка",
-        type: 'string',
+        type: "string",
         minWidth: 150,
       },
       {
-        field: 'watermark_lu',
+        field: "watermark_lu",
-        headerName: 'Вод. знак (lu)',
+        headerName: "Вод. знак (lu)",
-        type: 'string',
+        type: "string",
         minWidth: 150,
       },
       {
-        field: 'watermark_rd',
+        field: "watermark_rd",
-        headerName: 'Вод. знак (rd)',
+        headerName: "Вод. знак (rd)",
-        type: 'string',
+        type: "string",
         minWidth: 150,
       },
       {
-        field: 'left_article',
+        field: "left_article",
-        headerName: 'Левая статья',
+        headerName: "Левая статья",
-        type: 'number',
+        type: "number",
         minWidth: 150,
       },
       {
-        field: 'preview_article',
+        field: "preview_article",
-        headerName: 'Пред. просмотр статьи',
+        headerName: "Пред. просмотр статьи",
-        type: 'number',
+        type: "number",
         minWidth: 150,
       },
       {
-        field: 'actions',
+        field: "actions",
-        headerName: 'Действия',
+        headerName: "Действия",
         minWidth: 120,
-        display: 'flex',
+        display: "flex",
-        align: 'right',
+        align: "right",
-        headerAlign: 'center',
+        headerAlign: "center",
         sortable: false,
         filterable: false,
         disableColumnMenu: true,
-        renderCell: function render({row}) {
+        renderCell: function render({ row }) {
           return (
             <>
               <EditButton hideText recordItemId={row.id} />
               <ShowButton hideText recordItemId={row.id} />
-              <DeleteButton hideText confirmTitle="Вы уверены?" recordItemId={row.id} />
+              <DeleteButton
+                hideText
+                confirmTitle="Вы уверены?"
+                recordItemId={row.id}
+              />
             </>
-          )
+          );
         },
       },
     ],
-    [],
+    []
-  )
+  );
 
   return (
     <List>
       <Stack gap={2.5}>
-        <CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} hasCoordinates />
+        <CustomDataGrid
+          {...dataGridProps}
+          columns={columns}
+          localeText={localeText}
+          getRowId={(row: any) => row.id}
+          hasCoordinates
+        />
       </Stack>
     </List>
-  )
+  );
-}
+});

src/pages/sight/show.tsx

@@ -1,27 +1,28 @@
-import {Stack, Typography} from '@mui/material'
+import { Stack, Typography } from "@mui/material";
-import {useShow} from '@refinedev/core'
+import { useShow } from "@refinedev/core";
-import {Show, TextFieldComponent} from '@refinedev/mui'
+import { Show, TextFieldComponent } from "@refinedev/mui";
-import {LinkedItems} from '../../components/LinkedItems'
+import { LinkedItems } from "../../components/LinkedItems";
-import {ArticleItem, articleFields} from './types'
+import { ArticleItem, articleFields } from "./types";
 
 export const SightShow = () => {
-  const {query} = useShow({})
+  const { query } = useShow({});
-  const {data, isLoading} = query
+  const { data, isLoading } = query;
-  const record = data?.data
+  const record = data?.data;
 
   const fields = [
     // {label: 'ID', data: 'id'},
-    {label: 'Название', data: 'name'},
+    { label: "Название", data: "name" },
     // {label: 'Широта', data: 'latitude'}, #*
     // {label: 'Долгота', data: 'longitude'}, #*
     // {label: 'ID города', data: 'city_id'},
-    {label: 'Город', data: 'city'},
+    { label: "Адрес", data: "address" },
-  ]
+    { label: "Город", data: "city" },
+  ];
 
   return (
     <Show isLoading={isLoading}>
       <Stack gap={4}>
-        {fields.map(({label, data}) => (
+        {fields.map(({ label, data }) => (
           <Stack key={data} gap={1}>
             <Typography variant="body1" fontWeight="bold">
               {label}
@@ -30,8 +31,17 @@ export const SightShow = () => {
           </Stack>
         ))}
 
-        {record?.id && <LinkedItems<ArticleItem> type="show" parentId={record.id} parentResource="sight" childResource="article" fields={articleFields} title="статьи" />}
+        {record?.id && (
+          <LinkedItems<ArticleItem>
+            type="show"
+            parentId={record.id}
+            parentResource="sight"
+            childResource="article"
+            fields={articleFields}
+            title="статьи"
+          />
+        )}
       </Stack>
     </Show>
-  )
+  );
-}
+};

src/pages/station/create.tsx

@@ -1,183 +1,253 @@
-import {Autocomplete, Box, TextField, Typography, Paper, Grid} from '@mui/material'
+import {
-import {Create, useAutocomplete} from '@refinedev/mui'
+  Autocomplete,
-import {useForm} from '@refinedev/react-hook-form'
+  Box,
-import {Controller} from 'react-hook-form'
+  TextField,
+  Typography,
+  FormControlLabel,
+  Checkbox,
+  Grid,
+  Paper,
+} from "@mui/material";
+import { Create, useAutocomplete } from "@refinedev/mui";
+import { useForm } from "@refinedev/react-hook-form";
+import { Controller } from "react-hook-form";
 
 const TRANSFER_FIELDS = [
-  {name: 'bus', label: 'Автобус'},
+  { name: "bus", label: "Автобус" },
-  {name: 'metro_blue', label: 'Метро (синяя)'},
+  { name: "metro_blue", label: "Метро (синяя)" },
-  {name: 'metro_green', label: 'Метро (зеленая)'},
+  { name: "metro_green", label: "Метро (зеленая)" },
-  {name: 'metro_orange', label: 'Метро (оранжевая)'},
+  { name: "metro_orange", label: "Метро (оранжевая)" },
-  {name: 'metro_purple', label: 'Метро (фиолетовая)'},
+  { name: "metro_purple", label: "Метро (фиолетовая)" },
-  {name: 'metro_red', label: 'Метро (красная)'},
+  { name: "metro_red", label: "Метро (красная)" },
-  {name: 'train', label: 'Электричка'},
+  { name: "train", label: "Электричка" },
-  {name: 'tram', label: 'Трамвай'},
+  { name: "tram", label: "Трамвай" },
-  {name: 'trolleybus', label: 'Троллейбус'},
+  { name: "trolleybus", label: "Троллейбус" },
-]
+];
 
 export const StationCreate = () => {
   const {
     saveButtonProps,
-    refineCore: {formLoading},
+    refineCore: { formLoading },
     register,
     control,
-    formState: {errors},
+    formState: { errors },
   } = useForm({
     refineCoreProps: {
-      resource: 'station/',
+      resource: "station/",
     },
-  })
+  });
 
-  const {autocompleteProps: cityAutocompleteProps} = useAutocomplete({
+  const { autocompleteProps: cityAutocompleteProps } = useAutocomplete({
-    resource: 'city',
+    resource: "city",
     onSearch: (value) => [
       {
-        field: 'name',
+        field: "name",
-        operator: 'contains',
+        operator: "contains",
         value,
       },
     ],
-  })
+  });
 
   return (
     <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
-      <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
+      <Box
+        component="form"
+        sx={{ display: "flex", flexDirection: "column" }}
+        autoComplete="off"
+      >
         <TextField
-          {...register('name', {
+          {...register("name", {
-            required: 'Это поле является обязательным',
+            required: "Это поле является обязательным",
           })}
           error={!!(errors as any)?.name}
           helperText={(errors as any)?.name?.message}
           margin="normal"
           fullWidth
-          InputLabelProps={{shrink: true}}
+          InputLabelProps={{ shrink: true }}
           type="text"
-          label={'Название *'}
+          label={"Название *"}
           name="name"
         />
         <TextField
-          {...register('system_name', {
+          {...register("system_name", {
-            required: 'Это поле является обязательным',
+            required: "Это поле является обязательным",
           })}
           error={!!(errors as any)?.system_name}
           helperText={(errors as any)?.system_name?.message}
           margin="normal"
           fullWidth
-          InputLabelProps={{shrink: true}}
+          InputLabelProps={{ shrink: true }}
           type="text"
-          label={'Системное название *'}
+          label={"Системное название *"}
           name="system_name"
         />
         <TextField
-          {...register('description', {
+          {...register("address", {
+            // required: 'Это поле является обязательным',
+          })}
+          error={!!(errors as any)?.address}
+          helperText={(errors as any)?.address?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{ shrink: true }}
+          type="text"
+          label={"Адрес"}
+          name="address"
+        />
+
+        <TextField
+          {...register("description", {
             // required: 'Это поле является обязательным',
           })}
           error={!!(errors as any)?.description}
           helperText={(errors as any)?.description?.message}
           margin="normal"
           fullWidth
-          InputLabelProps={{shrink: true}}
+          InputLabelProps={{ shrink: true }}
           type="text"
-          label={'Описание'}
+          label={"Описание"}
           name="description"
         />
+        <Controller
+          name="direction" // boolean
+          control={control}
+          defaultValue={false}
+          render={({ field }: { field: any }) => (
+            <FormControlLabel
+              label="Прямой маршрут?"
+              control={
+                <Checkbox
+                  {...field}
+                  checked={field.value}
+                  onChange={(e) => field.onChange(e.target.checked)}
+                />
+              }
+            />
+          )}
+        />
         <TextField
-          {...register('latitude', {
+          {...register("latitude", {
-            required: 'Это поле является обязательным',
+            required: "Это поле является обязательным",
             valueAsNumber: true,
           })}
           error={!!(errors as any)?.latitude}
           helperText={(errors as any)?.latitude?.message}
           margin="normal"
           fullWidth
-          InputLabelProps={{shrink: true}}
+          InputLabelProps={{ shrink: true }}
           type="number"
-          label={'Широта *'}
+          label={"Широта *"}
           name="latitude"
         />
         <TextField
-          {...register('longitude', {
+          {...register("longitude", {
-            required: 'Это поле является обязательным',
+            required: "Это поле является обязательным",
             valueAsNumber: true,
           })}
           error={!!(errors as any)?.longitude}
           helperText={(errors as any)?.longitude?.message}
           margin="normal"
           fullWidth
-          InputLabelProps={{shrink: true}}
+          InputLabelProps={{ shrink: true }}
           type="number"
-          label={'Долгота *'}
+          label={"Долгота *"}
           name="longitude"
         />
 
         <Controller
           control={control}
           name="city_id"
-          rules={{required: 'Это поле является обязательным'}}
+          rules={{ required: "Это поле является обязательным" }}
           defaultValue={null}
-          render={({field}) => (
+          render={({ field }) => (
             <Autocomplete
               {...cityAutocompleteProps}
-              value={cityAutocompleteProps.options.find((option) => option.id === field.value) || null}
+              value={
+                cityAutocompleteProps.options.find(
+                  (option) => option.id === field.value
+                ) || null
+              }
               onChange={(_, value) => {
-                field.onChange(value?.id || '')
+                field.onChange(value?.id || "");
               }}
               getOptionLabel={(item) => {
-                return item ? item.name : ''
+                return item ? item.name : "";
               }}
               isOptionEqualToValue={(option, value) => {
-                return option.id === value?.id
+                return option.id === value?.id;
               }}
-              filterOptions={(options, {inputValue}) => {
+              filterOptions={(options, { inputValue }) => {
-                return options.filter((option) => option.name.toLowerCase().includes(inputValue.toLowerCase()))
+                return options.filter((option) =>
+                  option.name.toLowerCase().includes(inputValue.toLowerCase())
+                );
               }}
-              renderInput={(params) => <TextField {...params} label="Выберите город" margin="normal" variant="outlined" error={!!errors.city_id} helperText={(errors as any)?.city_id?.message} required />}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  label="Выберите город"
+                  margin="normal"
+                  variant="outlined"
+                  error={!!errors.city_id}
+                  helperText={(errors as any)?.city_id?.message}
+                  required
+                />
+              )}
             />
           )}
         />
 
         <TextField
-          {...register('offset_x', {
+          {...register("offset_x", {
             // required: 'Это поле является обязательным',
           })}
           error={!!(errors as any)?.offset_x}
           helperText={(errors as any)?.offset_x?.message}
           margin="normal"
           fullWidth
-          InputLabelProps={{shrink: true}}
+          InputLabelProps={{ shrink: true }}
           type="number"
-          label={'Смещение (X)'}
+          label={"Смещение (X)"}
           name="offset_x"
         />
 
         <TextField
-          {...register('offset_y', {
+          {...register("offset_y", {
             // required: 'Это поле является обязательным',
           })}
           error={!!(errors as any)?.offset_y}
           helperText={(errors as any)?.offset_y?.message}
           margin="normal"
           fullWidth
-          InputLabelProps={{shrink: true}}
+          InputLabelProps={{ shrink: true }}
           type="number"
-          label={'Смещение (Y)'}
+          label={"Смещение (Y)"}
           name="offset_y"
         />
 
         {/* Группа полей пересадок */}
-        <Paper sx={{p: 2, mt: 2}}>
+        <Paper sx={{ p: 2, mt: 2 }}>
           <Typography variant="h6" gutterBottom>
             Пересадки
           </Typography>
           <Grid container spacing={2}>
             {TRANSFER_FIELDS.map((field) => (
               <Grid item xs={12} sm={6} md={4} key={field.name}>
-                <TextField {...register(`transfers.${field.name}`)} error={!!(errors as any)?.transfers?.[field.name]} helperText={(errors as any)?.transfers?.[field.name]?.message} margin="normal" fullWidth InputLabelProps={{shrink: true}} type="text" label={field.label} name={`transfers.${field.name}`} />
+                <TextField
+                  {...register(`transfers.${field.name}`)}
+                  error={!!(errors as any)?.transfers?.[field.name]}
+                  helperText={(errors as any)?.transfers?.[field.name]?.message}
+                  margin="normal"
+                  fullWidth
+                  InputLabelProps={{ shrink: true }}
+                  type="text"
+                  label={field.label}
+                  name={`transfers.${field.name}`}
+                />
               </Grid>
             ))}
           </Grid>
         </Paper>
       </Box>
     </Create>
-  )
+  );
-}
+};

src/pages/station/edit.tsx

@@ -1,179 +1,248 @@
-import {Autocomplete, Box, TextField, Typography, Paper, Grid} from '@mui/material'
+import {
-import {Edit, useAutocomplete} from '@refinedev/mui'
+  Autocomplete,
-import {useForm} from '@refinedev/react-hook-form'
+  Box,
-import {Controller} from 'react-hook-form'
+  TextField,
+  Typography,
+  FormControlLabel,
+  Paper,
+  Grid,
+  Checkbox,
+} from "@mui/material";
+import { Edit, useAutocomplete } from "@refinedev/mui";
+import { useForm } from "@refinedev/react-hook-form";
+import { Controller } from "react-hook-form";
 
-import {useParams} from 'react-router'
+import { useParams } from "react-router";
-import {LinkedItems} from '../../components/LinkedItems'
+import { LinkedItems } from "../../components/LinkedItems";
-import {type SightItem, sightFields} from './types'
+import { type SightItem, sightFields } from "./types";
 
 const TRANSFER_FIELDS = [
-  {name: 'bus', label: 'Автобус'},
+  { name: "bus", label: "Автобус" },
-  {name: 'metro_blue', label: 'Метро (синяя)'},
+  { name: "metro_blue", label: "Метро (синяя)" },
-  {name: 'metro_green', label: 'Метро (зеленая)'},
+  { name: "metro_green", label: "Метро (зеленая)" },
-  {name: 'metro_orange', label: 'Метро (оранжевая)'},
+  { name: "metro_orange", label: "Метро (оранжевая)" },
-  {name: 'metro_purple', label: 'Метро (фиолетовая)'},
+  { name: "metro_purple", label: "Метро (фиолетовая)" },
-  {name: 'metro_red', label: 'Метро (красная)'},
+  { name: "metro_red", label: "Метро (красная)" },
-  {name: 'train', label: 'Электричка'},
+  { name: "train", label: "Электричка" },
-  {name: 'tram', label: 'Трамвай'},
+  { name: "tram", label: "Трамвай" },
-  {name: 'trolleybus', label: 'Троллейбус'},
+  { name: "trolleybus", label: "Троллейбус" },
-]
+];
 
 export const StationEdit = () => {
   const {
     saveButtonProps,
     register,
     control,
-    formState: {errors},
+    formState: { errors },
-  } = useForm({})
+  } = useForm({});
 
-  const {id: stationId} = useParams<{id: string}>()
+  const { id: stationId } = useParams<{ id: string }>();
 
-  const {autocompleteProps: cityAutocompleteProps} = useAutocomplete({
+  const { autocompleteProps: cityAutocompleteProps } = useAutocomplete({
-    resource: 'city',
+    resource: "city",
     onSearch: (value) => [
       {
-        field: 'name',
+        field: "name",
-        operator: 'contains',
+        operator: "contains",
         value,
       },
     ],
-  })
+  });
 
   return (
     <Edit saveButtonProps={saveButtonProps}>
-      <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
+      <Box
+        component="form"
+        sx={{ display: "flex", flexDirection: "column" }}
+        autoComplete="off"
+      >
         <TextField
-          {...register('name', {
+          {...register("name", {
-            required: 'Это поле является обязательным',
+            required: "Это поле является обязательным",
           })}
           error={!!(errors as any)?.name}
           helperText={(errors as any)?.name?.message}
           margin="normal"
           fullWidth
-          InputLabelProps={{shrink: true}}
+          InputLabelProps={{ shrink: true }}
           type="text"
-          label={'Название *'}
+          label={"Название *"}
           name="name"
         />
         <TextField
-          {...register('system_name', {
+          {...register("system_name", {
-            required: 'Это поле является обязательным',
+            required: "Это поле является обязательным",
           })}
           error={!!(errors as any)?.system_name}
           helperText={(errors as any)?.system_name?.message}
           margin="normal"
           fullWidth
-          InputLabelProps={{shrink: true}}
+          InputLabelProps={{ shrink: true }}
           type="text"
-          label={'Системное название *'}
+          label={"Системное название *"}
           name="system_name"
         />
+        <Controller
+          name="direction" // boolean
+          control={control}
+          defaultValue={false}
+          render={({ field }: { field: any }) => (
+            <FormControlLabel
+              label="Прямой маршрут?"
+              control={
+                <Checkbox
+                  {...field}
+                  checked={field.value}
+                  onChange={(e) => field.onChange(e.target.checked)}
+                />
+              }
+            />
+          )}
+        />
         <TextField
-          {...register('description', {
+          {...register("description", {
             // required: 'Это поле является обязательным',
           })}
           error={!!(errors as any)?.description}
           helperText={(errors as any)?.description?.message}
           margin="normal"
           fullWidth
-          InputLabelProps={{shrink: true}}
+          InputLabelProps={{ shrink: true }}
           type="text"
-          label={'Описание'}
+          label={"Описание"}
           name="description"
         />
         <TextField
-          {...register('latitude', {
+          {...register("address", {
-            required: 'Это поле является обязательным',
+            // required: 'Это поле является обязательным',
+          })}
+          error={!!(errors as any)?.address}
+          helperText={(errors as any)?.address?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{ shrink: true }}
+          type="text"
+          label={"Адрес"}
+          name="address"
+        />
+        <TextField
+          {...register("latitude", {
+            required: "Это поле является обязательным",
             valueAsNumber: true,
           })}
           error={!!(errors as any)?.latitude}
           helperText={(errors as any)?.latitude?.message}
           margin="normal"
           fullWidth
-          InputLabelProps={{shrink: true}}
+          InputLabelProps={{ shrink: true }}
           type="number"
-          label={'Широта *'}
+          label={"Широта *"}
           name="latitude"
         />
         <TextField
-          {...register('longitude', {
+          {...register("longitude", {
-            required: 'Это поле является обязательным',
+            required: "Это поле является обязательным",
             valueAsNumber: true,
           })}
           error={!!(errors as any)?.longitude}
           helperText={(errors as any)?.longitude?.message}
           margin="normal"
           fullWidth
-          InputLabelProps={{shrink: true}}
+          InputLabelProps={{ shrink: true }}
           type="number"
-          label={'Долгота *'}
+          label={"Долгота *"}
           name="longitude"
         />
 
         <Controller
           control={control}
           name="city_id"
-          rules={{required: 'Это поле является обязательным'}}
+          rules={{ required: "Это поле является обязательным" }}
           defaultValue={null}
-          render={({field}) => (
+          render={({ field }) => (
             <Autocomplete
               {...cityAutocompleteProps}
-              value={cityAutocompleteProps.options.find((option) => option.id === field.value) || null}
+              value={
+                cityAutocompleteProps.options.find(
+                  (option) => option.id === field.value
+                ) || null
+              }
               onChange={(_, value) => {
-                field.onChange(value?.id || '')
+                field.onChange(value?.id || "");
               }}
               getOptionLabel={(item) => {
-                return item ? item.name : ''
+                return item ? item.name : "";
               }}
               isOptionEqualToValue={(option, value) => {
-                return option.id === value?.id
+                return option.id === value?.id;
               }}
-              filterOptions={(options, {inputValue}) => {
+              filterOptions={(options, { inputValue }) => {
-                return options.filter((option) => option.name.toLowerCase().includes(inputValue.toLowerCase()))
+                return options.filter((option) =>
+                  option.name.toLowerCase().includes(inputValue.toLowerCase())
+                );
               }}
-              renderInput={(params) => <TextField {...params} label="Выберите город" margin="normal" variant="outlined" error={!!errors.city_id} helperText={(errors as any)?.city_id?.message} required />}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  label="Выберите город"
+                  margin="normal"
+                  variant="outlined"
+                  error={!!errors.city_id}
+                  helperText={(errors as any)?.city_id?.message}
+                  required
+                />
+              )}
             />
           )}
         />
 
         <TextField
-          {...register('offset_x', {
+          {...register("offset_x", {
             // required: 'Это поле является обязательным',
           })}
           error={!!(errors as any)?.offset_x}
           helperText={(errors as any)?.offset_x?.message}
           margin="normal"
           fullWidth
-          InputLabelProps={{shrink: true}}
+          InputLabelProps={{ shrink: true }}
           type="number"
-          label={'Смещение (X)'}
+          label={"Смещение (X)"}
           name="offset_x"
         />
 
         <TextField
-          {...register('offset_y', {
+          {...register("offset_y", {
             // required: 'Это поле является обязательным',
           })}
           error={!!(errors as any)?.offset_y}
           helperText={(errors as any)?.offset_y?.message}
           margin="normal"
           fullWidth
-          InputLabelProps={{shrink: true}}
+          InputLabelProps={{ shrink: true }}
           type="number"
-          label={'Смещение (Y)'}
+          label={"Смещение (Y)"}
           name="offset_y"
         />
 
         {/* Группа полей пересадок */}
-        <Paper sx={{p: 2, mt: 2}}>
+        <Paper sx={{ p: 2, mt: 2 }}>
           <Typography variant="h6" gutterBottom>
             Пересадки
           </Typography>
           <Grid container spacing={2}>
             {TRANSFER_FIELDS.map((field) => (
               <Grid item xs={12} sm={6} md={4} key={field.name}>
-                <TextField {...register(`transfers.${field.name}`)} error={!!(errors as any)?.transfers?.[field.name]} helperText={(errors as any)?.transfers?.[field.name]?.message} margin="normal" fullWidth InputLabelProps={{shrink: true}} type="text" label={field.label} name={`transfers.${field.name}`} />
+                <TextField
+                  {...register(`transfers.${field.name}`)}
+                  error={!!(errors as any)?.transfers?.[field.name]}
+                  helperText={(errors as any)?.transfers?.[field.name]?.message}
+                  margin="normal"
+                  fullWidth
+                  InputLabelProps={{ shrink: true }}
+                  type="text"
+                  label={field.label}
+                  name={`transfers.${field.name}`}
+                />
               </Grid>
             ))}
           </Grid>
@@ -188,8 +257,9 @@ export const StationEdit = () => {
           childResource="sight"
           fields={sightFields}
           title="достопримечательности"
+          dragAllowed={false}
         />
       )}
     </Edit>
-  )
+  );
-}
+};

src/pages/station/list.tsx

@@ -1,126 +1,157 @@
-import React from 'react'
+import React, { useMemo } from "react";
-import {type GridColDef} from '@mui/x-data-grid'
+import { type GridColDef } from "@mui/x-data-grid";
-import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
+import {
-import {Stack} from '@mui/material'
+  DeleteButton,
-import {CustomDataGrid} from '../../components/CustomDataGrid'
+  EditButton,
-import {localeText} from '../../locales/ru/localeText'
+  List,
+  ShowButton,
+  useDataGrid,
+} from "@refinedev/mui";
+import { Stack } from "@mui/material";
+import { CustomDataGrid } from "../../components/CustomDataGrid";
+import { localeText } from "../../locales/ru/localeText";
+import { cityStore } from "../../store/CityStore";
+import { observer } from "mobx-react-lite";
 
-export const StationList = () => {
+export const StationList = observer(() => {
-  const {dataGridProps} = useDataGrid({resource: 'station/'})
+  const { city_id } = cityStore;
+
+  const { dataGridProps } = useDataGrid({
+    resource: "station",
+    filters: {
+      permanent: [
+        {
+          field: "cityID",
+          operator: "eq",
+          value: city_id,
+        },
+      ],
+    },
+  });
 
   const columns = React.useMemo<GridColDef[]>(
     () => [
       {
-        field: 'id',
+        field: "id",
-        headerName: 'ID',
+        headerName: "ID",
-        type: 'number',
+        type: "number",
         minWidth: 70,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'name',
+        field: "name",
-        headerName: 'Название',
+        headerName: "Название",
-        type: 'string',
+        type: "string",
         minWidth: 300,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'system_name',
+        field: "system_name",
-        headerName: 'Системное название',
+        headerName: "Системное название",
-        type: 'string',
+        type: "string",
         minWidth: 200,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'latitude',
+        field: "latitude",
-        headerName: 'Широта',
+        headerName: "Широта",
-        type: 'number',
+        type: "number",
         minWidth: 150,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'longitude',
+        field: "longitude",
-        headerName: 'Долгота',
+        headerName: "Долгота",
-        type: 'number',
+        type: "number",
         minWidth: 150,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'city_id',
+        field: "city_id",
-        headerName: 'ID города',
+        headerName: "ID города",
-        type: 'number',
+        type: "number",
         minWidth: 120,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'offset_x',
+        field: "offset_x",
-        headerName: 'Смещение (X)',
+        headerName: "Смещение (X)",
-        type: 'number',
+        type: "number",
         minWidth: 120,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'offset_y',
+        field: "offset_y",
-        headerName: 'Смещение (Y)',
+        headerName: "Смещение (Y)",
-        type: 'number',
+        type: "number",
         minWidth: 120,
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
       },
       {
-        field: 'description',
+        field: "description",
-        headerName: 'Описание',
+        headerName: "Описание",
-        type: 'string',
+        type: "string",
-        display: 'flex',
+        display: "flex",
-        align: 'left',
+        align: "left",
-        headerAlign: 'left',
+        headerAlign: "left",
         flex: 1,
       },
       {
-        field: 'actions',
+        field: "actions",
-        headerName: 'Действия',
+        headerName: "Действия",
-        cellClassName: 'station-actions',
+        cellClassName: "station-actions",
-        align: 'right',
+        align: "right",
-        headerAlign: 'center',
+        headerAlign: "center",
         minWidth: 120,
-        display: 'flex',
+        display: "flex",
         sortable: false,
         filterable: false,
         disableColumnMenu: true,
-        renderCell: function render({row}) {
+        renderCell: function render({ row }) {
           return (
             <>
               <EditButton hideText recordItemId={row.id} />
               <ShowButton hideText recordItemId={row.id} />
-              <DeleteButton hideText confirmTitle="Вы уверены?" recordItemId={row.id} />
+              <DeleteButton
+                hideText
+                confirmTitle="Вы уверены?"
+                recordItemId={row.id}
+              />
             </>
-          )
+          );
         },
       },
     ],
-    [],
+    []
-  )
+  );
 
   return (
-    <List>
+    <List key={city_id}>
       <Stack gap={2.5}>
-        <CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} hasCoordinates />
+        <CustomDataGrid
+          {...dataGridProps}
+          columns={columns}
+          localeText={localeText}
+          getRowId={(row: any) => row.id}
+          hasCoordinates
+        />
       </Stack>
     </List>
-  )
+  );
-}
+});

src/pages/station/show.tsx

@@ -1,23 +1,31 @@
-import {useShow} from '@refinedev/core'
+import { useShow } from "@refinedev/core";
-import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
+import { Show, TextFieldComponent as TextField } from "@refinedev/mui";
-import {Stack, Typography} from '@mui/material'
+import { Box, Stack, Typography } from "@mui/material";
-import {LinkedItems} from '../../components/LinkedItems'
+import { LinkedItems } from "../../components/LinkedItems";
-import {type SightItem, sightFields, stationFields} from './types'
+import { type SightItem, sightFields, stationFields } from "./types";
 
 export const StationShow = () => {
-  const {query} = useShow({})
+  const { query } = useShow({});
-  const {data, isLoading} = query
+  const { data, isLoading } = query;
-  const record = data?.data
+  const record = data?.data;
 
   return (
     <Show isLoading={isLoading}>
       <Stack gap={4}>
-        {stationFields.map(({label, data}) => (
+        {stationFields.map(({ label, data }) => (
           <Stack key={data} gap={1}>
             <Typography variant="body1" fontWeight="bold">
               {label}
+              {label === "Системное название" && (
+                <Box>
+                  <TextField
+                    value={record?.direction ? "(Прямой)" : "(Обратный)"}
+                  />
+                </Box>
+              )}
             </Typography>
-            <TextField value={record?.[data] || ''} />
+
+            <TextField value={record?.[data] || ""} />
           </Stack>
         ))}
 
@@ -33,5 +41,5 @@ export const StationShow = () => {
         )}
       </Stack>
     </Show>
-  )
+  );
-}
+};

src/pages/station/types.ts

@@ -1,44 +1,45 @@
-import React from 'react'
+import React from "react";
 
 export type StationItem = {
-  id: number
+  id: number;
-  name: string
+  name: string;
-  description: string
+  description: string;
-  latitude: number
+  latitude: number;
-  longitude: number
+  longitude: number;
-  [key: string]: string | number
+  [key: string]: string | number;
-}
+};
 
 export type SightItem = {
-  id: number
+  id: number;
-  name: string
+  name: string;
-  latitude: number
+  latitude: number;
-  longitude: number
+  longitude: number;
-  city_id: number
+  city_id: number;
-  city: string
+  city: string;
-  [key: string]: string | number
+  [key: string]: string | number;
-}
+};
 
 export type FieldType<T> = {
-  label: string
+  label: string;
-  data: keyof T
+  data: keyof T;
-  render?: (value: any) => React.ReactNode
+  render?: (value: any) => React.ReactNode;
-}
+};
 
 export const stationFields: Array<FieldType<StationItem>> = [
   // {label: 'ID', data: 'id'},
-  {label: 'Название', data: 'name'},
+  { label: "Название", data: "name" },
-  {label: 'Системное название', data: 'system_name'},
+  { label: "Системное название", data: "system_name" },
+  { label: "Адрес", data: "address" },
   // {label: 'Широта', data: 'latitude'},
   // {label: 'Долгота', data: 'longitude'},
-  {label: 'Описание', data: 'description'},
+  { label: "Описание", data: "description" },
-]
+];
 
 export const sightFields: Array<FieldType<SightItem>> = [
   // {label: 'ID', data: 'id'},
-  {label: 'Название', data: 'name'},
+  { label: "Название", data: "name" },
   // {label: 'Широта', data: 'latitude'},
   // {label: 'Долгота', data: 'longitude'},
   // {label: 'ID города', data: 'city_id'},
-  {label: 'Город', data: 'city'},
+  { label: "Город", data: "city" },
-]
+];

src/providers/data.ts

@@ -1,14 +1,22 @@
 import dataProvider from "@refinedev/simple-rest";
-import axios from "axios";
+import axios, { InternalAxiosRequestConfig } from "axios";
 
 import { TOKEN_KEY } from "../authProvider";
 import Cookies from "js-cookie";
 
+interface CustomAxiosRequestConfig extends InternalAxiosRequestConfig {
+  meta?: {
+    headers?: {
+      "X-Language"?: string;
+    };
+  };
+}
+
 export const axiosInstance = axios.create({
   baseURL: import.meta.env.VITE_KRBL_API,
 });
 
-axiosInstance.interceptors.request.use((config) => {
+axiosInstance.interceptors.request.use((config: CustomAxiosRequestConfig) => {
   // Добавляем токен авторизации
   const token = localStorage.getItem(TOKEN_KEY);
   if (token) {
@@ -16,9 +24,15 @@ axiosInstance.interceptors.request.use((config) => {
   }
 
   // Добавляем язык в кастомный заголовок
-  const lang = Cookies.get("lang") || "ru";
+  const metaLang = config.meta?.headers?.["X-Language"];
-  config.headers["X-Language"] = lang; // или 'Accept-Language'
+  if (metaLang) {
-
+    console.log("metaLang", metaLang);
+    config.headers["X-Language"] = metaLang;
+  } else {
+    const lang = Cookies.get("lang") || "ru";
+    console.log("lang", lang);
+    config.headers["X-Language"] = lang;
+  }
   // console.log('Request headers:', config.headers)
 
   return config;

src/store/CityStore.ts

@@ -0,0 +1,21 @@
+import { makeAutoObservable } from "mobx";
+
+class CityStore {
+  city_id: string = "";
+
+  constructor() {
+    makeAutoObservable(this);
+    this.initialize();
+  }
+
+  initialize() {
+    this.city_id = localStorage.getItem("city_id") || "1";
+  }
+
+  setCityIdAction = (city_id: string) => {
+    this.city_id = city_id;
+    localStorage.setItem("city_id", city_id);
+  };
+}
+
+export const cityStore = new CityStore();

yarn.lock

@@ -4789,6 +4789,18 @@ mkdirp@^0.5.1:
   dependencies:
     minimist "^1.2.6"
 
+mobx-react-lite@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-4.1.0.tgz#6a03ed2d94150848213cfebd7d172e123528a972"
+  integrity sha512-QEP10dpHHBeQNv1pks3WnHRCem2Zp636lq54M2nKO2Sarr13pL4u6diQXf65yzXUn0mkk18SyIDCm9UOJYTi1w==
+  dependencies:
+    use-sync-external-store "^1.4.0"
+
+mobx@^6.13.7:
+  version "6.13.7"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.13.7.tgz#70e5dda7a45da947f773b3cd3b065dfe7c8a75de"
+  integrity sha512-aChaVU/DO5aRPmk1GX8L+whocagUUpBQqoPtJk+cm7UOXUk87J4PeWCh6nNmTTIfEhiR9DI/+FnA8dln/hTK7g==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"