fix: Update language usage with review coordinates

src/pages/carrier/create.tsx

@@ -3,19 +3,63 @@ import { Create, useAutocomplete } from "@refinedev/mui";
 import { useForm } from "@refinedev/react-hook-form";
 import { Controller } from "react-hook-form";
 import { observer } from "mobx-react-lite";
-import { languageStore, META_LANGUAGE } from "../../store/LanguageStore";
+import { META_LANGUAGE } from "../../store/LanguageStore";
+import { LanguageSwitch } from "@/components/LanguageSwitch";
+
+import { useEffect, useState } from "react";
+import { EVERY_LANGUAGE, Languages, languageStore } from "@stores";
+
 export const CarrierCreate = observer(() => {
-  const { language } = languageStore;
+  const { language, setLanguageAction } = languageStore;
   const {
     saveButtonProps,
     refineCore: { formLoading },
     register,
     control,
+    setValue,
+    watch,
     formState: { errors },
   } = useForm({
-    refineCoreProps: META_LANGUAGE(language)
+    refineCoreProps: META_LANGUAGE(language),
   });
 
+  const [carrierData, setCarrierData] = useState({
+    full_name: EVERY_LANGUAGE(""),
+    short_name: EVERY_LANGUAGE(""),
+    slogan: EVERY_LANGUAGE(""),
+  });
+
+  useEffect(() => {
+    setValue("full_name", carrierData.full_name[language]);
+    setValue("short_name", carrierData.short_name[language]);
+    setValue("slogan", carrierData.slogan[language]);
+  }, [carrierData, language, setValue]);
+
+  function updateTranslations(update: boolean = true) {
+    const newCarrierData = {
+      ...carrierData,
+      full_name: {
+        ...carrierData.full_name,
+        [language]: watch("full_name") ?? "",
+      },
+      short_name: {
+        ...carrierData.short_name,
+        [language]: watch("short_name") ?? "",
+      },
+      slogan: {
+        ...carrierData.slogan,
+        [language]: watch("slogan") ?? "",
+      },
+    };
+    if (update) setCarrierData(newCarrierData);
+    return newCarrierData;
+  }
+
+  const handleLanguageChange = (lang: Languages) => {
+    updateTranslations();
+    setLanguageAction(lang);
+  };
+
   const { autocompleteProps: cityAutocompleteProps } = useAutocomplete({
     resource: "city",
     onSearch: (value) => [
@@ -45,6 +89,7 @@ export const CarrierCreate = observer(() => {
         sx={{ display: "flex", flexDirection: "column" }}
         autoComplete="off"
       >
+        <LanguageSwitch action={handleLanguageChange} />
         <Controller
           control={control}
           name="city_id"
@@ -95,7 +140,7 @@ export const CarrierCreate = observer(() => {
           helperText={(errors as any)?.full_name?.message}
           margin="normal"
           fullWidth
-          slotProps={{inputLabel: {shrink: true}}}
+          slotProps={{ inputLabel: { shrink: true } }}
           type="text"
           label={"Полное имя *"}
           name="full_name"
@@ -109,16 +154,13 @@ export const CarrierCreate = observer(() => {
           helperText={(errors as any)?.short_name?.message}
           margin="normal"
           fullWidth
-          slotProps={{inputLabel: {shrink: true}}}
+          slotProps={{ inputLabel: { shrink: true } }}
           type="text"
           label={"Короткое имя"}
           name="short_name"
         />
 
-        <Box component="form"
-          sx={{ display: "flex" }}
-          autoComplete="off"
-        >
+        <Box component="form" sx={{ display: "flex" }} autoComplete="off">
           <TextField
             {...register("main_color", {
               // required: 'Это поле является обязательным',
@@ -127,7 +169,7 @@ export const CarrierCreate = observer(() => {
             helperText={(errors as any)?.main_color?.message}
             margin="normal"
             fullWidth
-            slotProps={{inputLabel: {shrink: true}}}
+            slotProps={{ inputLabel: { shrink: true } }}
             type="color"
             label={"Основной цвет"}
             name="main_color"
@@ -149,7 +191,7 @@ export const CarrierCreate = observer(() => {
             helperText={(errors as any)?.left_color?.message}
             margin="normal"
             fullWidth
-            slotProps={{inputLabel: {shrink: true}}}
+            slotProps={{ inputLabel: { shrink: true } }}
             type="color"
             label={"Цвет левого виджета"}
             name="left_color"
@@ -172,7 +214,7 @@ export const CarrierCreate = observer(() => {
             helperText={(errors as any)?.right_color?.message}
             margin="normal"
             fullWidth
-            slotProps={{inputLabel: {shrink: true}}}
+            slotProps={{ inputLabel: { shrink: true } }}
             type="color"
             label={"Цвет правого виджета"}
             name="right_color"
@@ -195,7 +237,7 @@ export const CarrierCreate = observer(() => {
           helperText={(errors as any)?.slogan?.message}
           margin="normal"
           fullWidth
-          slotProps={{inputLabel: {shrink: true}}}
+          slotProps={{ inputLabel: { shrink: true } }}
           type="text"
           label={"Слоган"}
           name="slogan"

src/pages/city/create.tsx

@@ -1,97 +1,303 @@
-import {Autocomplete, Box, TextField} from '@mui/material'
-import {Create, useAutocomplete} from '@refinedev/mui'
-import {useForm} from '@refinedev/react-hook-form'
-import {Controller} from 'react-hook-form'
+import { Autocomplete, Box, TextField } from "@mui/material";
+import { Create, useAutocomplete } from "@refinedev/mui";
+import { useForm } from "@refinedev/react-hook-form";
+import { Controller } from "react-hook-form";
+import { useEffect, useState } from "react";
+import { EVERY_LANGUAGE, Languages, languageStore } from "@stores"; // Assuming these imports are correct and available
+import { LanguageSwitch } from "@/components/LanguageSwitch"; // Assuming this import is correct and available
+import { axiosInstance, axiosInstanceForGet } from "@/providers"; // Assuming these imports are correct and available
+import { useNavigate } from "react-router";
+import { useNotification } from "@refinedev/core";
 
 export const CityCreate = () => {
+  const { language, setLanguageAction } = languageStore;
+  const navigate = useNavigate();
+  const notification = useNotification();
+  // State to hold all language translations for the city name.
+  // Initialized with an object where each language key maps to an empty string.
+  const [allLanguageNames, setAllLanguageNames] = useState<
+    Record<Languages, string>
+  >(EVERY_LANGUAGE(""));
+
   const {
     saveButtonProps,
-    refineCore: {formLoading},
-    register,
-    control,
-    formState: {errors},
-  } = useForm({})
+    refineCore: { formLoading }, // Indicates if the form is currently loading data
+    register, // Function to register input fields with react-hook-form
+    control, // Object to pass to Controller for controlled components
+    setValue, // Function to programmatically set form values
+    watch, // Function to watch for changes in form values
+    handleSubmit, // Function to handle form submission, including validation
+    formState: { errors }, // Object containing form validation errors
+  } = useForm<{
+    name: string; // This field will hold the name for the *currently active* language
+    country_code: string; // The code for the selected country
+    arms: string; // The ID of the selected media for the city's arms (e.g., coat of arms)
+  }>({});
 
-  const {autocompleteProps: countryAutocompleteProps} = useAutocomplete({
-    resource: 'country',
-  })
+  // useEffect hook to synchronize the 'name' TextField with the 'allLanguageNames' state.
+  // Whenever the active 'language' or the 'allLanguageNames' state changes,
+  // the 'name' field in the form is updated to display the correct translation.
+  useEffect(() => {
+    setValue("name", allLanguageNames[language]);
+  }, [language, allLanguageNames, setValue]);
 
-  const {autocompleteProps: mediaAutocompleteProps} = useAutocomplete({
-    resource: 'media',
+  // Function to update the 'allLanguageNames' state with the current value from the 'name' TextField.
+  // This is crucial to ensure that changes made by the user are saved before
+  // switching languages or submitting the form.
+  const updateCurrentLanguageName = () => {
+    const currentNameValue = watch("name"); // Get the current value typed into the 'name' TextField
+    setAllLanguageNames((prev) => ({
+      ...prev,
+      [language]: currentNameValue || "", // Update the specific language entry in the state
+    }));
+  };
+
+  // Handler for language switch.
+  // It first saves the current input for the active language, then changes the language.
+  const handleLanguageChange = (lang: Languages) => {
+    updateCurrentLanguageName(); // Save the current input before switching language
+    setLanguageAction(lang); // Update the global language state
+  };
+
+  // Autocomplete props for Country selection.
+  // 'resource' specifies the API endpoint, and it's assumed 'code' is the value
+  // to be stored and 'name' is the label to display.
+  const { autocompleteProps: countryAutocompleteProps } = useAutocomplete({
+    resource: "country",
+  });
+
+  // Autocomplete props for Media selection (specifically for city's arms).
+  // 'resource' specifies the API endpoint, and 'onSearch' provides a custom
+  // search filter based on 'media_name'.
+  const { autocompleteProps: mediaAutocompleteProps } = useAutocomplete({
+    resource: "media",
     onSearch: (value) => [
       {
-        field: 'media_name',
-        operator: 'contains',
+        field: "media_name",
+        operator: "contains",
         value,
       },
     ],
-  })
+  });
+
+  // This function is called when the form is submitted and passes validation.
+  // It orchestrates the API calls for creating the city and updating its translations.
+  const onFinish = async (data: {
+    name: string;
+    country_code: string;
+    arms: string;
+  }) => {
+    // Ensure the very latest input for the current language is captured
+    // into 'allLanguageNames' before making API calls. This handles cases
+    // where the user might click 'Save' without blurring the 'name' field.
+    updateCurrentLanguageName();
+
+    // Create a final set of names including the latest value from the form
+    // for the current language.
+    const finalNames = {
+      ...allLanguageNames,
+      [language]: data.name, // Ensure the absolute latest value from the form is included
+    };
+
+    try {
+      // Validate that the Russian name is present, as it's used for the initial POST request.
+      if (!finalNames["ru"]) {
+        console.error("Russian name is required for initial city creation.");
+        // In a real application, you might want to display a user-friendly error message here.
+        return;
+      }
+
+      console.log("Submitting with names:", finalNames);
+
+      // 1. Create the city entry in Russian.
+      // This POST request typically returns the ID of the newly created resource.
+      const ruResponse = await axiosInstanceForGet("ru").post("/city", {
+        name: finalNames["ru"], // Russian name
+        country_code: data.country_code, // Country code from the form
+        arms: data.arms, // Arms ID from the form, included in initial creation
+      });
+
+      const id = ruResponse.data.id; // Extract the ID of the newly created city
+
+      // 2. Patch the city with the English name if available.
+      if (finalNames["en"]) {
+        await axiosInstanceForGet("en").patch(`/city/${id}`, {
+          name: finalNames["en"], // English name
+          country_code: data.country_code, // Country code from the form
+          arms: data.arms, // Arms ID from the form, included in initial creation
+        });
+      }
+
+      // 3. Patch the city with the Chinese name if available.
+      if (finalNames["zh"]) {
+        await axiosInstanceForGet("zh").patch(`/city/${id}`, {
+          name: finalNames["zh"], // Chinese name
+          country_code: data.country_code, // Country code from the form
+          arms: data.arms, // Arms ID from the form, included in initial creation
+        });
+      }
+
+      console.log("City created/updated successfully!");
+      if (notification && typeof notification.open === "function") {
+        notification.open({
+          message: "Город успешно создан",
+          type: "success",
+        });
+      }
+      window.onbeforeunload = null;
+      navigate("/city");
+
+      // After successful creation/update, you might want to:
+      // - Navigate to a different page (e.g., city list).
+      // - Display a success notification to the user.
+    } catch (error) {
+      console.error("Error creating/updating city:", error);
+      // Display an error message to the user if the API calls fail.
+    }
+  };
 
   return (
-    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
-      <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
+    <Create
+      isLoading={formLoading} // Show loading indicator if form data is being fetched
+      // Pass the handleSubmit function to the save button's onClick.
+      // This ensures form validation runs before 'onFinish' is called.
+      saveButtonProps={{
+        ...saveButtonProps,
+        onClick: handleSubmit(onFinish as any),
+      }}
+    >
+      <Box
+        component="form"
+        sx={{ display: "flex", flexDirection: "column" }}
+        autoComplete="off" // Disable browser autocomplete
+      >
+        {/* Language Switch component to change the active language */}
+        <LanguageSwitch action={handleLanguageChange} />
+
+        {/* Country Autocomplete field */}
         <Controller
-          control={control}
-          name="country_code"
-          rules={{required: 'Это поле является обязательным'}}
-          defaultValue={null}
-          render={({field}) => (
+          control={control} // Pass control from useForm
+          name="country_code" // Field name in the form state
+          rules={{ required: "Это поле является обязательным" }} // Validation rule
+          defaultValue={null} // Initial value
+          render={({ field }) => (
             <Autocomplete
-              {...countryAutocompleteProps}
-              value={countryAutocompleteProps.options.find((option) => option.code === field.value) || null}
-              onChange={(_, value) => {
-                field.onChange(value?.code || '')
+              {...countryAutocompleteProps} // Spread autocomplete props from useAutocomplete hook
+              value={
+                // Find the selected option based on the field's current value
+                countryAutocompleteProps.options.find(
+                  (option: { code: string; name: string; id: string }) =>
+                    option.code === field.value
+                ) || null
+              }
+              onChange={(
+                _,
+                value: { code: string; name: string; id: string } | null
+              ) => {
+                // Update the form field's value when an option is selected
+                field.onChange(value?.code || "");
               }}
-              getOptionLabel={(item) => {
-                return item ? item.name : ''
+              getOptionLabel={(item: {
+                code: string;
+                name: string;
+                id: string;
+              }) => {
+                // Define how to display the label for each option
+                return item ? item.name : "";
               }}
-              isOptionEqualToValue={(option, value) => {
-                return option.id === value?.id
+              isOptionEqualToValue={(
+                option: { code: string; name: string; id: string },
+                value: { code: string; name: string; id: string }
+              ) => {
+                // Define how to compare options for equality
+                return option.id === value?.id;
               }}
-              renderInput={(params) => <TextField {...params} label="Выберите страну" margin="normal" variant="outlined" error={!!errors.country_code} helperText={(errors as any)?.country_code?.message} required />}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  label="Выберите страну"
+                  margin="normal"
+                  variant="outlined"
+                  error={!!errors.country_code} // Show error state if validation fails
+                  required // Mark as required in UI
+                />
+              )}
             />
           )}
         />
 
+        {/* City Name TextField for the current language */}
         <TextField
-          {...register('name', {
-            required: 'Это поле является обязательным',
+          {...register("name", {
+            required: "Это поле является обязательным", // Validation rule
+            onBlur: updateCurrentLanguageName, // Update translations when the field loses focus
           })}
-          error={!!(errors as any)?.name}
-          helperText={(errors as any)?.name?.message}
+          error={!!errors.name} // Show error state if validation fails
           margin="normal"
           fullWidth
-          InputLabelProps={{shrink: true}}
+          InputLabelProps={{ shrink: true }}
           type="text"
-          label={'Название *'}
-          name="name"
+          label={"Название *"}
+          name="name" // HTML name attribute, matches register key
         />
 
+        {/* Arms Autocomplete field */}
         <Controller
-          control={control}
-          name="arms"
-          defaultValue={null}
-          render={({field}) => (
+          control={control} // Pass control from useForm
+          name="arms" // Field name in the form state
+          defaultValue={null} // Initial value
+          render={({ field }) => (
             <Autocomplete
-              {...mediaAutocompleteProps}
-              value={mediaAutocompleteProps.options.find((option) => option.id === field.value) || null}
-              onChange={(_, value) => {
-                field.onChange(value?.id || '')
+              {...mediaAutocompleteProps} // Spread autocomplete props from useAutocomplete hook
+              value={
+                // Find the selected option based on the field's current value
+                mediaAutocompleteProps.options.find(
+                  (option: { id: string; media_name: string }) =>
+                    option.id === field.value
+                ) || null
+              }
+              onChange={(
+                _,
+                value: { id: string; media_name: string } | null
+              ) => {
+                // Update the form field's value when an option is selected
+                field.onChange(value?.id || "");
               }}
-              getOptionLabel={(item) => {
-                return item ? item.media_name : ''
+              getOptionLabel={(item: { id: string; media_name: string }) => {
+                // Define how to display the label for each option
+                return item ? item.media_name : "";
               }}
-              isOptionEqualToValue={(option, value) => {
-                return option.id === value?.id
+              isOptionEqualToValue={(
+                option: { id: string; media_name: string },
+                value: { id: string; media_name: string }
+              ) => {
+                // Define how to compare options for equality
+                return option.id === value?.id;
               }}
-              filterOptions={(options, {inputValue}) => {
-                return options.filter((option) => option.media_name.toLowerCase().includes(inputValue.toLowerCase()))
+              filterOptions={(
+                options: { id: string; media_name: string }[],
+                { inputValue }
+              ) => {
+                // Custom filter for options based on input value
+                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} />}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  label="Выберите герб"
+                  margin="normal"
+                  variant="outlined"
+                  error={!!errors.arms} // Show error state if validation fails
+                />
+              )}
             />
           )}
         />
       </Box>
     </Create>
-  )
-}
+  );
+};

src/pages/media/list.tsx

@@ -100,7 +100,6 @@ export const MediaList = observer(() => {
         columns={columns}
         localeText={localeText}
         getRowId={(row: any) => row.id}
-        languageEnabled
       />
     </List>
   );

src/pages/route-preview/Station.tsx

@@ -114,10 +114,10 @@ export const StationLabel = observer(
         rotation={-rotation}
       >
         <pixiText
-          anchor={{ x: 0.5, y: 0.5 }}
+          anchor={{ x: 1, y: 0.5 }}
           text={station.name}
           position={{
-            x: position.x / scale,
+            x: position.x / scale + 24,
             y: position.y / scale,
           }}
           style={{
@@ -129,10 +129,10 @@ export const StationLabel = observer(
 
         {ruLabel && (
           <pixiText
-            anchor={{ x: 0.5, y: -1 }}
+            anchor={{ x: 1, y: -1 }}
             text={ruLabel}
             position={{
-              x: position.x / scale,
+              x: position.x / scale + 24,
               y: position.y / scale,
             }}
             style={{

src/pages/route-preview/index.tsx

@@ -153,7 +153,11 @@ export const RouteMap = observer(() => {
             <Station
               station={obj}
               key={obj.id}
-              ruLabel={language === "ru" ? null : stationData.ru[index].name}
+              ruLabel={
+                language === "ru"
+                  ? stationData.en[index].name
+                  : stationData.ru[index].name
+              }
             />
           ))}
 

src/pages/sight/create.tsx

@@ -22,6 +22,7 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 export const SightCreate = observer(() => {
   const { language, setLanguageAction } = languageStore;
+  const [coordinates, setCoordinates] = useState("");
   const [sightData, setSightData] = useState({
     name: EVERY_LANGUAGE(""),
     address: EVERY_LANGUAGE(""),
@@ -79,10 +80,7 @@ export const SightCreate = observer(() => {
   });
 
   const [namePreview, setNamePreview] = useState("");
-  const [coordinatesPreview, setCoordinatesPreview] = useState({
-    latitude: "",
-    longitude: "",
-  });
+  const [coordinatesPreview, setCoordinatesPreview] = useState("");
 
   const [creatingArticleHeading, setCreatingArticleHeading] =
     useState<string>("");
@@ -102,13 +100,19 @@ export const SightCreate = observer(() => {
   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);
+    setCoordinates(e.target.value);
+    if (e.target.value) {
+      const [lat, lon] = e.target.value.split(" ").map((s) => s.trim());
+      setCoordinatesPreview(
+        `${lat ? Number(lat) : 0}, ${lon ? Number(lon) : 0}`
+      );
+      setValue("latitude", lat ? Number(lat) : 0);
+      setValue("longitude", lon ? Number(lon) : 0);
+    } else {
+      setCoordinatesPreview("");
+      setValue("latitude", "");
+      setValue("longitude", "");
+    }
   };
 
   // Автокомплиты
@@ -170,13 +174,6 @@ export const SightCreate = observer(() => {
     setNamePreview(nameContent ?? "");
   }, [nameContent]);
 
-  useEffect(() => {
-    setCoordinatesPreview({
-      latitude: latitudeContent || "",
-      longitude: longitudeContent || "",
-    });
-  }, [latitudeContent, longitudeContent]);
-
   useEffect(() => {
     const selectedCity = cityAutocompleteProps.options.find(
       (option) => option.id === cityContent
@@ -276,7 +273,7 @@ export const SightCreate = observer(() => {
             />
 
             <TextField
-              value={`${coordinatesPreview.latitude}, ${coordinatesPreview.longitude}`}
+              value={coordinates}
               onChange={handleCoordinatesChange}
               error={!!(errors as any)?.latitude}
               helperText={(errors as any)?.latitude?.message}
@@ -286,10 +283,11 @@ export const SightCreate = observer(() => {
               type="text"
               label={"Координаты *"}
             />
+
             <input
               type="hidden"
               {...register("longitude", {
-                value: coordinatesPreview.longitude,
+                value: coordinates.split(" ")[1],
                 required: "Это поле является обязательным",
                 valueAsNumber: true,
               })}
@@ -297,7 +295,7 @@ export const SightCreate = observer(() => {
             <input
               type="hidden"
               {...register("latitude", {
-                value: coordinatesPreview.latitude,
+                value: coordinates.split(" ")[0],
                 required: "Это поле является обязательным",
                 valueAsNumber: true,
               })}
@@ -668,21 +666,22 @@ export const SightCreate = observer(() => {
           </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",
-              }}
-            >
-              {`${coordinatesPreview.latitude}, ${coordinatesPreview.longitude}`}
-            </Box>
-          </Typography>
-
+          {coordinatesPreview && (
+            <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",
+                }}
+              >
+                {coordinatesPreview}
+              </Box>
+            </Typography>
+          )}
           {/* Обложка */}
           {thumbnailPreview && (
             <Box sx={{ mb: 2 }}>

src/pages/sight/edit.tsx

@@ -70,6 +70,7 @@ export const SightEdit = observer(() => {
     name: EVERY_LANGUAGE(""),
     address: EVERY_LANGUAGE(""),
   });
+  const [coordinates, setCoordinates] = useState("");
 
   const {
     saveButtonProps,
@@ -163,37 +164,13 @@ export const SightEdit = observer(() => {
       setValue("address", sightData.address[language]);
   }, [language, sightData, setValue]);
 
-  useEffect(() => {
-    const latitude = getValues("latitude");
-    const longitude = getValues("longitude");
-    if (latitude && longitude) {
-      setCoordinatesPreview({
-        latitude: latitude,
-        longitude: longitude,
-      });
-    }
-  }, [getValues]);
-
-  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 [creatingArticleHeading, setCreatingArticleHeading] =
     useState<string>("");
   const [creatingArticleBody, setCreatingArticleBody] = useState<string>("");
 
-  const [coordinatesPreview, setCoordinatesPreview] = useState({
-    latitude: "",
-    longitude: "",
-  });
+  const [coordinatesPreview, setCoordinatesPreview] = useState("");
   const [selectedArticleIndex, setSelectedArticleIndex] = useState(-1);
   const [previewMediaFile, setPreviewMediaFile] = useState<MediaData>();
   const [thumbnailPreview, setThumbnailPreview] = useState<string | null>(null);
@@ -243,12 +220,25 @@ export const SightEdit = observer(() => {
   const watermarkRDContent = watch("watermark_rd");
 
   useEffect(() => {
-    setCoordinatesPreview({
-      latitude: latitudeContent ?? "",
-      longitude: longitudeContent ?? "",
-    });
+    if (latitudeContent && longitudeContent) {
+      setCoordinates(`${latitudeContent} ${longitudeContent}`);
+    }
   }, [latitudeContent, longitudeContent]);
 
+  const handleCoordinatesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCoordinates(e.target.value);
+    if (e.target.value) {
+      const [lat, lon] = e.target.value.split(" ").map((s) => s.trim());
+      setCoordinatesPreview(`${lat ?? "0"}, ${lon ?? "0"}`);
+      setValue("latitude", lat ?? "");
+      setValue("longitude", lon ?? "");
+    } else {
+      setCoordinatesPreview("");
+      setValue("latitude", "");
+      setValue("longitude", "");
+    }
+  };
+
   useEffect(() => {
     if (linkedArticles[selectedArticleIndex]?.id) {
       getMedia(linkedArticles[selectedArticleIndex].id).then((media) => {
@@ -505,7 +495,6 @@ export const SightEdit = observer(() => {
                   <input
                     type="hidden"
                     {...register("longitude", {
-                      value: coordinatesPreview.longitude,
                       required: "Это поле является обязательным",
                       valueAsNumber: true,
                     })}
@@ -513,7 +502,6 @@ export const SightEdit = observer(() => {
                   <input
                     type="hidden"
                     {...register("latitude", {
-                      value: coordinatesPreview.latitude,
                       required: "Это поле является обязательным",
                       valueAsNumber: true,
                     })}
@@ -1535,7 +1523,7 @@ export const SightEdit = observer(() => {
                 />
 
                 <TextField
-                  value={`${coordinatesPreview.latitude}, ${coordinatesPreview.longitude}`}
+                  value={coordinates}
                   onChange={handleCoordinatesChange}
                   error={!!(errors as any)?.latitude}
                   helperText={(errors as any)?.latitude?.message}
@@ -1687,7 +1675,7 @@ export const SightEdit = observer(() => {
                             : "grey.800",
                       }}
                     >
-                      {`${coordinatesPreview.latitude}, ${coordinatesPreview.longitude}`}
+                      {coordinatesPreview}
                     </Box>
                   </Typography>
                 </Box>

src/pages/sight/list.tsx

@@ -56,6 +56,7 @@ export const SightList = observer(() => {
         display: "flex",
         align: "left",
         headerAlign: "left",
+        flex: 1,
       },
       {
         field: "latitude",

src/pages/station/create.tsx

@@ -41,40 +41,19 @@ export const StationCreate = () => {
     },
   });
 
-  const [coordinatesPreview, setCoordinatesPreview] = useState({
-    latitude: "",
-    longitude: "",
-  });
+  const [coordinates, setCoordinates] = useState("");
 
   const handleCoordinatesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const [lat, lon] = e.target.value.split(",").map((s) => s.trim());
-    setCoordinatesPreview({
-      latitude: lat,
-      longitude: lon,
-    });
+    setCoordinates(e.target.value);
+    const [lat, lon] = e.target.value
+      .replace(/,/g, "") // Remove all commas from the string
+      .split(" ")
+      .map((s) => s.trim());
+    console.log(lat, lon);
     setValue("latitude", lat);
     setValue("longitude", lon);
   };
-  const latitudeContent = watch("latitude");
-  const longitudeContent = watch("longitude");
 
-  useEffect(() => {
-    setCoordinatesPreview({
-      latitude: latitudeContent || "",
-      longitude: longitudeContent || "",
-    });
-  }, [latitudeContent, longitudeContent]);
-
-  useEffect(() => {
-    const latitude = getValues("latitude");
-    const longitude = getValues("longitude");
-    if (latitude && longitude) {
-      setCoordinatesPreview({
-        latitude: latitude,
-        longitude: longitude,
-      });
-    }
-  }, [getValues]);
   const directions = [
     {
       label: "Прямой",
@@ -188,7 +167,7 @@ export const StationCreate = () => {
           )}
         />
         <TextField
-          value={`${coordinatesPreview.latitude}, ${coordinatesPreview.longitude}`}
+          value={coordinates}
           onChange={handleCoordinatesChange}
           error={!!(errors as any)?.latitude}
           helperText={(errors as any)?.latitude?.message}
@@ -198,10 +177,11 @@ export const StationCreate = () => {
           type="text"
           label={"Координаты *"}
         />
+
         <input
           type="hidden"
           {...register("latitude", {
-            value: coordinatesPreview.latitude,
+            value: coordinates.split(",")[0],
             setValueAs: (value) => {
               if (value === "") {
                 return 0;
@@ -213,7 +193,7 @@ export const StationCreate = () => {
         <input
           type="hidden"
           {...register("longitude", {
-            value: coordinatesPreview.longitude,
+            value: coordinates.split(",")[1],
             setValueAs: (value) => {
               if (value === "") {
                 return 0;

src/pages/station/edit.tsx

@@ -40,24 +40,24 @@ export const StationEdit = observer(() => {
       system_name: "",
       description: "",
       address: "",
-      latitude: "",
-      longitude: "",
+      latitude: 0,
+      longitude: 0,
     },
     en: {
       name: "",
       system_name: "",
       description: "",
       address: "",
-      latitude: "",
-      longitude: "",
+      latitude: 0,
+      longitude: 0,
     },
     zh: {
       name: "",
       system_name: "",
       description: "",
       address: "",
-      latitude: "",
-      longitude: "",
+      latitude: 0,
+      longitude: 0,
     },
   });
 
@@ -69,8 +69,8 @@ export const StationEdit = observer(() => {
         system_name: watch("system_name") ?? "",
         description: watch("description") ?? "",
         address: watch("address") ?? "",
-        latitude: watch("latitude") ?? "",
-        longitude: watch("longitude") ?? "",
+        latitude: Number(watch("latitude")) || 0,
+        longitude: Number(watch("longitude")) || 0,
       },
     }));
   };
@@ -120,7 +120,7 @@ export const StationEdit = observer(() => {
     if (stationData[language as keyof typeof stationData]?.name) {
       setValue("name", stationData[language as keyof typeof stationData]?.name);
     }
-    if (stationData[language as keyof typeof stationData]?.address) {
+    if (stationData[language as keyof typeof stationData]?.system_name) {
       setValue(
         "system_name",
         stationData[language as keyof typeof stationData]?.system_name || ""
@@ -132,16 +132,20 @@ export const StationEdit = observer(() => {
         stationData[language as keyof typeof stationData]?.description || ""
       );
     }
-    if (stationData[language as keyof typeof stationData]?.latitude) {
+    if (
+      stationData[language as keyof typeof stationData]?.latitude !== undefined
+    ) {
       setValue(
         "latitude",
-        stationData[language as keyof typeof stationData]?.latitude || ""
+        stationData[language as keyof typeof stationData]?.latitude || 0
       );
     }
-    if (stationData[language as keyof typeof stationData]?.longitude) {
+    if (
+      stationData[language as keyof typeof stationData]?.longitude !== undefined
+    ) {
       setValue(
         "longitude",
-        stationData[language as keyof typeof stationData]?.longitude || ""
+        stationData[language as keyof typeof stationData]?.longitude || 0
       );
     }
   }, [language, stationData, setValue]);
@@ -150,28 +154,36 @@ export const StationEdit = observer(() => {
     setLanguageAction("ru");
   }, []);
 
-  const { id: stationId } = useParams<{ id: string }>();
+  const [coordinates, setCoordinates] = 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 { id: stationId } = useParams<{ id: string }>();
 
   const latitudeContent = watch("latitude");
   const longitudeContent = watch("longitude");
 
   useEffect(() => {
-    setCoordinatesPreview({
-      latitude: latitudeContent || "",
-      longitude: longitudeContent || "",
-    });
+    if (latitudeContent && longitudeContent) {
+      setCoordinates(`${latitudeContent} ${longitudeContent}`);
+    }
   }, [latitudeContent, longitudeContent]);
 
+  const handleCoordinatesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCoordinates(e.target.value);
+    if (e.target.value) {
+      const [lat, lon] = e.target.value
+        .replace(/,/g, "") // Remove all commas from the string
+        .split(" ")
+        .map((s) => s.trim());
+      setCoordinates(`${lat ?? 0} ${lon ?? 0}`);
+      setValue("latitude", lat ?? 0);
+      setValue("longitude", lon ?? 0);
+    } else {
+      setCoordinates("");
+      setValue("latitude", "");
+      setValue("longitude", "");
+    }
+  };
+
   const { autocompleteProps: cityAutocompleteProps } = useAutocomplete({
     resource: "city",
     onSearch: (value) => [
@@ -282,7 +294,7 @@ export const StationEdit = observer(() => {
         />
 
         <TextField
-          value={`${coordinatesPreview.latitude}, ${coordinatesPreview.longitude}`}
+          value={coordinates}
           onChange={handleCoordinatesChange}
           error={!!(errors as any)?.latitude}
           helperText={(errors as any)?.latitude?.message}
@@ -295,12 +307,28 @@ export const StationEdit = observer(() => {
         <input
           type="hidden"
           {...register("latitude", {
-            value: coordinatesPreview.latitude,
+            valueAsNumber: true,
+            value: Number(coordinates.split(" ")[0]),
+            setValueAs: (value) => {
+              if (value === "") {
+                return 0;
+              }
+              return Number(value);
+            },
           })}
         />
         <input
           type="hidden"
-          {...register("longitude", { value: coordinatesPreview.longitude })}
+          {...register("longitude", {
+            valueAsNumber: true,
+            value: Number(coordinates.split(" ")[1]),
+            setValueAs: (value) => {
+              if (value === "") {
+                return 0;
+              }
+              return Number(value);
+            },
+          })}
         />
 
         <Controller

src/pages/vehicle/list.tsx

@@ -104,6 +104,7 @@ export const VehicleList = observer(() => {
         type: "string",
         minWidth: 150,
         display: "flex",
+        flex: 1,
         align: "left",
         headerAlign: "left",
         renderCell: (params) => {
@@ -116,6 +117,7 @@ export const VehicleList = observer(() => {
         headerName: "Город",
         type: "string",
         minWidth: 150,
+        flex: 1,
         display: "flex",
         align: "left",
         headerAlign: "left",