feat: Add more pages

2025-06-06 16:08:15 +03:00
parent f2aab1ab33
commit d74789a0d8
67 changed files with 3491 additions and 787 deletions
--- a/src/pages/Article/ArticleListPage/index.tsx
+++ b/src/pages/Article/ArticleListPage/index.tsx
@ -0,0 +1,86 @@
+import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
+import { articlesStore, languageStore } from "@shared";
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Trash2, FileText } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { DeleteModal, LanguageSwitcher } from "@widgets";
+
+export const ArticleListPage = observer(() => {
+  const { articleList, getArticleList } = articlesStore;
+  const navigate = useNavigate();
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [rowId, setRowId] = useState<string | null>(null); // Lifted state
+  const { language } = languageStore;
+
+  useEffect(() => {
+    getArticleList();
+  }, [language]);
+
+  const columns: GridColDef[] = [
+    {
+      field: "heading",
+      headerName: "Название",
+      flex: 1,
+    },
+
+    {
+      field: "actions",
+      headerName: "Действия",
+
+      renderCell: (params: GridRenderCellParams) => {
+        return (
+          <div className="flex h-full gap-7 justify-center items-center">
+            <button onClick={() => navigate(`/media/${params.row.id}`)}>
+              <FileText size={20} className="text-green-500" />
+            </button>
+            <button
+              onClick={() => {
+                setIsDeleteModalOpen(true);
+                setRowId(params.row.id);
+              }}
+            >
+              <Trash2 size={20} className="text-red-500" />
+            </button>
+          </div>
+        );
+      },
+    },
+  ];
+
+  const rows = articleList.map((article) => ({
+    id: article.id,
+    heading: article.heading,
+    body: article.body,
+  }));
+
+  return (
+    <>
+      <LanguageSwitcher />
+
+      <div className="w-full">
+        <DataGrid
+          rows={rows}
+          columns={columns}
+          hideFooterPagination
+          hideFooter
+        />
+      </div>
+
+      <DeleteModal
+        open={isDeleteModalOpen}
+        onDelete={async () => {
+          if (rowId) {
+            getArticleList();
+          }
+          setIsDeleteModalOpen(false);
+          setRowId(null);
+        }}
+        onCancel={() => {
+          setIsDeleteModalOpen(false);
+          setRowId(null);
+        }}
+      />
+    </>
+  );
+});
--- a/src/pages/Article/index.ts
+++ b/src/pages/Article/index.ts
@ -0,0 +1 @@
+export * from "./ArticleListPage";
--- a/src/pages/Carrier/CarrierCreatePage/index.tsx
+++ b/src/pages/Carrier/CarrierCreatePage/index.tsx
@ -0,0 +1,202 @@
+import {
+  Button,
+  Paper,
+  TextField,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+  Box,
+} from "@mui/material";
+import { observer } from "mobx-react-lite";
+import { ArrowLeft, Save } from "lucide-react";
+import { Loader2 } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import { carrierStore, cityStore, mediaStore } from "@shared";
+import { useState, useEffect } from "react";
+import { LanguageSwitcher, MediaViewer } from "@widgets";
+import { HexColorPicker } from "react-colorful";
+
+export const CarrierCreatePage = observer(() => {
+  const navigate = useNavigate();
+  const [fullName, setFullName] = useState("");
+  const [shortName, setShortName] = useState("");
+  const [cityId, setCityId] = useState<number | null>(null);
+  const [primaryColor, setPrimaryColor] = useState("#000000");
+  const [secondaryColor, setSecondaryColor] = useState("#ffffff");
+  const [accentColor, setAccentColor] = useState("#ff0000");
+  const [slogan, setSlogan] = useState("");
+  const [selectedMediaId, setSelectedMediaId] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    cityStore.getCities();
+    mediaStore.getMedia();
+  }, []);
+
+  const handleCreate = async () => {
+    try {
+      setIsLoading(true);
+      await carrierStore.createCarrier(
+        fullName,
+        shortName,
+        cityStore.cities.find((c) => c.id === cityId)?.name!,
+        cityId!,
+        primaryColor,
+        secondaryColor,
+        accentColor,
+        slogan,
+        selectedMediaId!
+      );
+      toast.success("Перевозчик успешно создан");
+      navigate("/carrier");
+    } catch (error) {
+      toast.error("Ошибка при создании перевозчика");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Paper className="w-full h-full p-3 flex flex-col gap-10">
+      <LanguageSwitcher />
+      <div className="flex items-center gap-4">
+        <button
+          className="flex items-center gap-2"
+          onClick={() => navigate("/carrier")}
+        >
+          <ArrowLeft size={20} />
+          Назад
+        </button>
+      </div>
+
+      <div className="flex flex-col gap-10 w-full items-end">
+        <FormControl fullWidth>
+          <InputLabel>Город</InputLabel>
+          <Select
+            value={cityId || ""}
+            label="Город"
+            required
+            onChange={(e) => setCityId(e.target.value as number)}
+          >
+            {cityStore.cities.map((city) => (
+              <MenuItem key={city.id} value={city.id}>
+                {city.name}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+
+        <TextField
+          fullWidth
+          label="Полное название"
+          value={fullName}
+          required
+          onChange={(e) => setFullName(e.target.value)}
+        />
+
+        <TextField
+          fullWidth
+          label="Короткое название"
+          value={shortName}
+          required
+          onChange={(e) => setShortName(e.target.value)}
+        />
+
+        <div className="w-full flex flex-col gap-4">
+          <div className="flex items-center gap-4">
+            <span className="w-32">Основной цвет:</span>
+            <Box
+              sx={{
+                width: 40,
+                height: 40,
+                backgroundColor: primaryColor,
+                border: "1px solid #ccc",
+                cursor: "pointer",
+              }}
+            />
+            <HexColorPicker color={primaryColor} onChange={setPrimaryColor} />
+          </div>
+
+          <div className="flex items-center gap-4">
+            <span className="w-32">Вторичный цвет:</span>
+            <Box
+              sx={{
+                width: 40,
+                height: 40,
+                backgroundColor: secondaryColor,
+                border: "1px solid #ccc",
+                cursor: "pointer",
+              }}
+            />
+            <HexColorPicker
+              color={secondaryColor}
+              onChange={setSecondaryColor}
+            />
+          </div>
+
+          <div className="flex items-center gap-4">
+            <span className="w-32">Акцентный цвет:</span>
+            <Box
+              sx={{
+                width: 40,
+                height: 40,
+                backgroundColor: accentColor,
+                border: "1px solid #ccc",
+                cursor: "pointer",
+              }}
+            />
+            <HexColorPicker color={accentColor} onChange={setAccentColor} />
+          </div>
+        </div>
+
+        <TextField
+          fullWidth
+          label="Слоган"
+          value={slogan}
+          onChange={(e) => setSlogan(e.target.value)}
+        />
+
+        <div className="w-full flex flex-col gap-4">
+          <FormControl fullWidth>
+            <InputLabel>Логотип</InputLabel>
+            <Select
+              value={selectedMediaId || ""}
+              label="Логотип"
+              required
+              onChange={(e) => setSelectedMediaId(e.target.value as string)}
+            >
+              {mediaStore.media.map((media) => (
+                <MenuItem key={media.id} value={media.id}>
+                  {media.media_name || media.filename}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+          {selectedMediaId && (
+            <div className="w-32 h-32">
+              <MediaViewer media={{ id: selectedMediaId, media_type: 1 }} />
+            </div>
+          )}
+        </div>
+
+        <Button
+          variant="contained"
+          className="w-min flex gap-2 items-center"
+          startIcon={<Save size={20} />}
+          onClick={handleCreate}
+          disabled={
+            isLoading || !fullName || !shortName || !cityId || !selectedMediaId
+          }
+        >
+          {isLoading ? (
+            <Loader2 size={20} className="animate-spin" />
+          ) : (
+            "Создать"
+          )}
+        </Button>
+      </div>
+    </Paper>
+  );
+});
--- a/src/pages/Carrier/CarrierListPage/index.tsx
+++ b/src/pages/Carrier/CarrierListPage/index.tsx
@ -0,0 +1,101 @@
+import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
+import { carrierStore, languageStore } from "@shared";
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Eye, Trash2 } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { DeleteModal, LanguageSwitcher } from "@widgets";
+
+export const CarrierListPage = observer(() => {
+  const { carriers, getCarriers, deleteCarrier } = carrierStore;
+  const navigate = useNavigate();
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [rowId, setRowId] = useState<number | null>(null); // Lifted state
+  const { language } = languageStore;
+
+  useEffect(() => {
+    getCarriers();
+  }, [language]);
+
+  const columns: GridColDef[] = [
+    {
+      field: "full_name",
+      headerName: "Полное имя",
+
+      width: 300,
+    },
+    {
+      field: "short_name",
+      headerName: "Короткое имя",
+      width: 200,
+    },
+    {
+      field: "city",
+      headerName: "Город",
+      flex: 1,
+    },
+    {
+      field: "actions",
+      headerName: "Действия",
+
+      renderCell: (params: GridRenderCellParams) => {
+        return (
+          <div className="flex h-full gap-7 justify-center items-center">
+            <button onClick={() => navigate(`/carrier/${params.row.id}`)}>
+              <Eye size={20} className="text-green-500" />
+            </button>
+            <button
+              onClick={() => {
+                setIsDeleteModalOpen(true);
+                setRowId(params.row.id);
+              }}
+            >
+              <Trash2 size={20} className="text-red-500" />
+            </button>
+          </div>
+        );
+      },
+    },
+  ];
+
+  const rows = carriers.map((carrier) => ({
+    id: carrier.id,
+    full_name: carrier.full_name,
+    short_name: carrier.short_name,
+    city: carrier.city,
+  }));
+
+  return (
+    <>
+      <LanguageSwitcher />
+
+      <div className="w-full">
+        <div className="flex justify-between items-center mb-10">
+          <h1 className="text-2xl">Перевозчики</h1>
+          {/* <CreateButton label="Создать перевозчика" path="/carrier/create" /> */}
+        </div>
+        <DataGrid
+          rows={rows}
+          columns={columns}
+          hideFooterPagination
+          hideFooter
+        />
+      </div>
+
+      <DeleteModal
+        open={isDeleteModalOpen}
+        onDelete={async () => {
+          if (rowId) {
+            deleteCarrier(rowId);
+          }
+          setIsDeleteModalOpen(false);
+          setRowId(null);
+        }}
+        onCancel={() => {
+          setIsDeleteModalOpen(false);
+          setRowId(null);
+        }}
+      />
+    </>
+  );
+});
--- a/src/pages/Carrier/CarrierPreviewPage/index.tsx
+++ b/src/pages/Carrier/CarrierPreviewPage/index.tsx
@ -0,0 +1,120 @@
+import { Paper } from "@mui/material";
+import { carrierStore, mediaStore } from "@shared";
+import { MediaViewer } from "@widgets";
+import { observer } from "mobx-react-lite";
+import { ArrowLeft } from "lucide-react";
+import { useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+
+export const CarrierPreviewPage = observer(() => {
+  const { id } = useParams();
+  const { getCarrier, carrier } = carrierStore;
+  const { oneMedia, getOneMedia } = mediaStore;
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    (async () => {
+      const carrierResponse = await getCarrier(Number(id));
+      await getOneMedia(carrierResponse?.logo as string);
+    })();
+  }, [id]);
+
+  return (
+    <Paper className="w-full h-full p-3 flex flex-col gap-10">
+      {carrier && (
+        <>
+          <div className="flex justify-between items-center">
+            <button
+              className="flex items-center gap-2"
+              onClick={() => navigate(-1)}
+            >
+              <ArrowLeft size={20} />
+              Назад
+            </button>
+            {/* <div className="flex gap-2">
+              <Button
+                variant="contained"
+                color="primary"
+                onClick={() => navigate(`/carrier/${id}/edit`)}
+                startIcon={<Pencil size={20} />}
+              >
+                Редактировать
+              </Button>
+              <Button
+                variant="contained"
+                color="error"
+                onClick={() => navigate(`/carrier/${id}/delete`)}
+                startIcon={<Trash2 size={20} />}
+              >
+                Удалить
+              </Button>
+            </div> */}
+          </div>
+          <div className="flex flex-col gap-10 w-full">
+            <div className="flex flex-col gap-2">
+              <h1 className="text-lg font-bold">Полное имя</h1>
+              <p>{carrier?.full_name}</p>
+            </div>
+
+            <div className="flex flex-col gap-2">
+              <h1 className="text-lg font-bold">Полное имя</h1>
+              <p>{carrier?.full_name}</p>
+            </div>
+            <div className="flex flex-col gap-2">
+              <h1 className="text-lg font-bold">Город</h1>
+              <p>{carrier?.city}</p>
+            </div>
+            <div className="flex flex-col gap-2 ">
+              <h1 className="text-lg font-bold">Основной цвет</h1>
+              <div
+                className="w-min"
+                style={{
+                  backgroundColor: `${carrier?.main_color}90`,
+                }}
+              >
+                {carrier?.main_color}
+              </div>
+            </div>
+            <div className="flex flex-col gap-2">
+              <h1 className="text-lg font-bold">Цвет левого виджета</h1>
+              <div
+                className="w-min"
+                style={{
+                  backgroundColor: `${carrier?.left_color}90`,
+                }}
+              >
+                {carrier?.left_color}
+              </div>
+            </div>
+            <div className="flex flex-col gap-2">
+              <h1 className="text-lg font-bold">Цвет правого виджета</h1>
+              <div
+                className="w-min"
+                style={{
+                  backgroundColor: `${carrier?.right_color}90`,
+                }}
+              >
+                {carrier?.right_color}
+              </div>
+            </div>
+            <div className="flex flex-col gap-2">
+              <h1 className="text-lg font-bold">Краткое имя</h1>
+              <p>{carrier?.short_name}</p>
+            </div>
+            <div className="flex flex-col gap-2">
+              <h1 className="text-lg font-bold">Логотип</h1>
+
+              <MediaViewer
+                media={{
+                  id: oneMedia?.id as string,
+                  media_type: oneMedia?.media_type as number,
+                  filename: oneMedia?.filename,
+                }}
+              />
+            </div>
+          </div>
+        </>
+      )}
+    </Paper>
+  );
+});
--- a/src/pages/Carrier/index.ts
+++ b/src/pages/Carrier/index.ts
@ -0,0 +1,3 @@
+export * from "./CarrierListPage";
+export * from "./CarrierPreviewPage";
+export * from "./CarrierCreatePage";
--- a/src/pages/City/CityCreatePage/index.tsx
+++ b/src/pages/City/CityCreatePage/index.tsx
@ -0,0 +1,166 @@
+import {
+  Button,
+  Paper,
+  TextField,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+  Box,
+} from "@mui/material";
+import { observer } from "mobx-react-lite";
+import { ArrowLeft, Save, ImagePlus } from "lucide-react";
+import { Loader2 } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import { cityStore, countryStore, mediaStore } from "@shared";
+import { useState, useEffect } from "react";
+import { LanguageSwitcher, MediaViewer } from "@widgets";
+import { SelectMediaDialog } from "@shared";
+
+export const CityCreatePage = observer(() => {
+  const navigate = useNavigate();
+  const [name, setName] = useState("");
+  const [countryCode, setCountryCode] = useState("");
+  const [selectedMediaId, setSelectedMediaId] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSelectMediaOpen, setIsSelectMediaOpen] = useState(false);
+
+  useEffect(() => {
+    countryStore.getCountries();
+    mediaStore.getMedia();
+  }, []);
+
+  const handleCreate = async () => {
+    try {
+      setIsLoading(true);
+      await cityStore.createCity(
+        name,
+        countryStore.countries.find((c) => c.code === countryCode)?.name!,
+        countryCode,
+        selectedMediaId!
+      );
+      toast.success("Город успешно создан");
+      navigate("/city");
+    } catch (error) {
+      toast.error("Ошибка при создании города");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleMediaSelect = (media: {
+    id: string;
+    filename: string;
+    media_name?: string;
+    media_type: number;
+  }) => {
+    setSelectedMediaId(media.id);
+  };
+
+  const selectedMedia = selectedMediaId
+    ? mediaStore.media.find((m) => m.id === selectedMediaId)
+    : null;
+
+  return (
+    <Paper className="w-full h-full p-3 flex flex-col gap-10">
+      <LanguageSwitcher />
+      <div className="flex items-center gap-4">
+        <button
+          className="flex items-center gap-2"
+          onClick={() => navigate("/city")}
+        >
+          <ArrowLeft size={20} />
+          Назад
+        </button>
+      </div>
+
+      <div className="flex flex-col gap-10 w-full items-end">
+        <TextField
+          fullWidth
+          label="Название города"
+          value={name}
+          required
+          onChange={(e) => setName(e.target.value)}
+        />
+
+        <FormControl fullWidth>
+          <InputLabel>Страна</InputLabel>
+          <Select
+            value={countryCode}
+            label="Страна"
+            required
+            onChange={(e) => setCountryCode(e.target.value)}
+          >
+            {countryStore.countries.map((country) => (
+              <MenuItem key={country.code} value={country.code}>
+                {country.name}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+
+        <div className="w-full flex flex-col gap-4">
+          <label className="text-sm text-gray-600">Герб города</label>
+          <div className="flex items-center gap-4">
+            <Button
+              variant="outlined"
+              onClick={() => setIsSelectMediaOpen(true)}
+              startIcon={<ImagePlus size={20} />}
+            >
+              Выбрать герб
+            </Button>
+            {selectedMedia && (
+              <span className="text-sm text-gray-600">
+                {selectedMedia.media_name || selectedMedia.filename}
+              </span>
+            )}
+          </div>
+          {selectedMedia && (
+            <Box
+              sx={{
+                width: "200px",
+                height: "200px",
+                border: "1px solid #e0e0e0",
+                borderRadius: "8px",
+                overflow: "hidden",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <MediaViewer
+                media={{
+                  id: selectedMedia.id,
+                  media_type: selectedMedia.media_type,
+                  filename: selectedMedia.filename,
+                }}
+              />
+            </Box>
+          )}
+        </div>
+
+        <Button
+          variant="contained"
+          className="w-min flex gap-2 items-center"
+          startIcon={<Save size={20} />}
+          onClick={handleCreate}
+          disabled={isLoading || !name || !countryCode}
+        >
+          {isLoading ? (
+            <Loader2 size={20} className="animate-spin" />
+          ) : (
+            "Создать"
+          )}
+        </Button>
+      </div>
+
+      <SelectMediaDialog
+        open={isSelectMediaOpen}
+        onClose={() => setIsSelectMediaOpen(false)}
+        onSelectMedia={handleMediaSelect}
+        mediaType={3} // Тип медиа для иконок
+      />
+    </Paper>
+  );
+});
--- a/src/pages/City/CityListPage/index.tsx
+++ b/src/pages/City/CityListPage/index.tsx
@ -0,0 +1,96 @@
+import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
+import { cityStore, languageStore } from "@shared";
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Eye, Trash2 } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { CreateButton, DeleteModal, LanguageSwitcher } from "@widgets";
+
+export const CityListPage = observer(() => {
+  const { cities, getCities, deleteCity } = cityStore;
+  const navigate = useNavigate();
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [rowId, setRowId] = useState<number | null>(null);
+  const { language } = languageStore;
+
+  useEffect(() => {
+    getCities();
+  }, [language]);
+
+  const columns: GridColDef[] = [
+    {
+      field: "country",
+      headerName: "Страна",
+      width: 150,
+    },
+    {
+      field: "name",
+      headerName: "Название",
+      flex: 1,
+    },
+    {
+      field: "actions",
+      headerName: "Действия",
+      align: "center",
+      headerAlign: "center",
+
+      renderCell: (params: GridRenderCellParams) => {
+        return (
+          <div className="flex h-full gap-7 justify-center items-center">
+            <button onClick={() => navigate(`/city/${params.row.id}`)}>
+              <Eye size={20} className="text-green-500" />
+            </button>
+            <button
+              onClick={() => {
+                setIsDeleteModalOpen(true);
+                setRowId(params.row.id);
+              }}
+            >
+              <Trash2 size={20} className="text-red-500" />
+            </button>
+          </div>
+        );
+      },
+    },
+  ];
+
+  const rows = cities.map((city) => ({
+    id: city.id,
+    name: city.name,
+    country: city.country,
+  }));
+
+  return (
+    <>
+      <LanguageSwitcher />
+
+      <div className="w-full">
+        <div className="flex justify-between items-center mb-10">
+          <h1 className="text-2xl">Города</h1>
+          <CreateButton label="Создать город" path="/city/create" />
+        </div>
+        <DataGrid
+          rows={rows}
+          columns={columns}
+          hideFooterPagination
+          hideFooter
+        />
+      </div>
+
+      <DeleteModal
+        open={isDeleteModalOpen}
+        onDelete={async () => {
+          if (rowId) {
+            deleteCity(rowId);
+          }
+          setIsDeleteModalOpen(false);
+          setRowId(null);
+        }}
+        onCancel={() => {
+          setIsDeleteModalOpen(false);
+          setRowId(null);
+        }}
+      />
+    </>
+  );
+});
--- a/src/pages/City/CityPreviewPage/index.tsx
+++ b/src/pages/City/CityPreviewPage/index.tsx
@ -0,0 +1,76 @@
+import { Paper } from "@mui/material";
+import { cityStore, mediaStore } from "@shared";
+import { MediaViewer } from "@widgets";
+import { observer } from "mobx-react-lite";
+import { ArrowLeft } from "lucide-react";
+import { useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+
+export const CityPreviewPage = observer(() => {
+  const { id } = useParams();
+  const { getCity, city } = cityStore;
+  const { oneMedia, getOneMedia } = mediaStore;
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    (async () => {
+      const cityResponse = await getCity(id as string);
+      await getOneMedia(cityResponse.arms as string);
+    })();
+  }, [id]);
+
+  return (
+    <Paper className="w-full h-full p-3 flex flex-col gap-10">
+      <div className="flex justify-between items-center">
+        <button
+          className="flex items-center gap-2"
+          onClick={() => navigate(-1)}
+        >
+          <ArrowLeft size={20} />
+          Назад
+        </button>
+        {/* <div className="flex gap-2">
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => navigate(`/city/${id}/edit`)}
+            startIcon={<Pencil size={20} />}
+          >
+            Редактировать
+          </Button>
+          <Button
+            variant="contained"
+            color="error"
+            onClick={() => navigate(`/city/${id}/edit`)}
+            startIcon={<Trash2 size={20} />}
+          >
+            Удалить
+          </Button>
+        </div> */}
+      </div>
+      <div className="flex flex-col gap-10 w-full">
+        <div className="flex flex-col gap-2">
+          <h1 className="text-lg font-bold">Название</h1>
+          <p>{city?.name}</p>
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <h1 className="text-lg font-bold">Страна</h1>
+          <p>{city?.country}</p>
+        </div>
+        <div className="flex flex-col gap-2">
+          <h1 className="text-lg font-bold">Герб</h1>
+          <div className="w-[300px] h-[200px]">
+            <MediaViewer
+              media={{
+                id: oneMedia?.id as string,
+                media_type: oneMedia?.media_type as number,
+                filename: oneMedia?.filename,
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </Paper>
+  );
+});
--- a/src/pages/City/index.ts
+++ b/src/pages/City/index.ts
@ -0,0 +1,3 @@
+export * from "./CityListPage";
+export * from "./CityPreviewPage";
+export * from "./CityCreatePage";
--- a/src/pages/Country/CountryCreatePage/index.tsx
+++ b/src/pages/Country/CountryCreatePage/index.tsx
@ -0,0 +1,75 @@
+import { Button, Paper, TextField } from "@mui/material";
+import { observer } from "mobx-react-lite";
+import { ArrowLeft, Save } from "lucide-react";
+import { Loader2 } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import { countryStore } from "@shared";
+import { useState } from "react";
+import { LanguageSwitcher } from "@widgets";
+
+export const CountryCreatePage = observer(() => {
+  const navigate = useNavigate();
+  const [name, setName] = useState("");
+  const [code, setCode] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleCreate = async () => {
+    try {
+      setIsLoading(true);
+      await countryStore.createCountry(code, name);
+      toast.success("Страна успешно создана");
+      navigate("/country");
+    } catch (error) {
+      toast.error("Ошибка при создании страны");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Paper className="w-full h-full p-3 flex flex-col gap-10">
+      <LanguageSwitcher />
+      <div className="flex items-center gap-4">
+        <button
+          className="flex items-center gap-2"
+          onClick={() => navigate("/country")}
+        >
+          <ArrowLeft size={20} />
+          Назад
+        </button>
+      </div>
+
+      <div className="flex flex-col gap-10 w-full items-end">
+        <TextField
+          fullWidth
+          label="Код страны"
+          value={code}
+          required
+          onChange={(e) => setCode(e.target.value)}
+        />
+        <TextField
+          fullWidth
+          label="Название"
+          value={name}
+          required
+          onChange={(e) => setName(e.target.value)}
+        />
+
+        <Button
+          variant="contained"
+          className="w-min flex gap-2 items-center"
+          startIcon={<Save size={20} />}
+          onClick={handleCreate}
+          disabled={isLoading || !name || !code}
+        >
+          {isLoading ? (
+            <Loader2 size={20} className="animate-spin" />
+          ) : (
+            "Создать"
+          )}
+        </Button>
+      </div>
+    </Paper>
+  );
+});
--- a/src/pages/Country/CountryListPage/index.tsx
+++ b/src/pages/Country/CountryListPage/index.tsx
@ -0,0 +1,86 @@
+import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
+import { countryStore, languageStore } from "@shared";
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Eye, Trash2 } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { CreateButton, DeleteModal, LanguageSwitcher } from "@widgets";
+
+export const CountryListPage = observer(() => {
+  const { countries, getCountries } = countryStore;
+  const navigate = useNavigate();
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [rowId, setRowId] = useState<string | null>(null); // Lifted state
+  const { language } = languageStore;
+
+  useEffect(() => {
+    getCountries();
+  }, [language]);
+
+  const columns: GridColDef[] = [
+    {
+      field: "name",
+      headerName: "Название",
+      flex: 1,
+    },
+    {
+      field: "actions",
+      headerName: "Действия",
+      align: "center",
+      headerAlign: "center",
+
+      renderCell: (params: GridRenderCellParams) => {
+        return (
+          <div className="flex h-full gap-7 justify-center items-center">
+            <button onClick={() => navigate(`/country/${params.row.code}`)}>
+              <Eye size={20} className="text-green-500" />
+            </button>
+            <button
+              onClick={() => {
+                setIsDeleteModalOpen(true);
+                setRowId(params.row.code);
+              }}
+            >
+              <Trash2 size={20} className="text-red-500" />
+            </button>
+          </div>
+        );
+      },
+    },
+  ];
+
+  const rows = countries.map((country) => ({
+    id: country.code,
+    code: country.code,
+    name: country.name,
+  }));
+
+  return (
+    <>
+      <LanguageSwitcher />
+
+      <div className="w-full">
+        <div className="flex justify-between items-center mb-10">
+          <h1 className="text-2xl">Страны</h1>
+          <CreateButton label="Создать страну" path="/country/create" />
+        </div>
+        <DataGrid rows={rows} columns={columns} hideFooter />
+      </div>
+      <DeleteModal
+        open={isDeleteModalOpen}
+        onDelete={async () => {
+          if (rowId) {
+            await countryStore.deleteCountry(rowId);
+            getCountries(); // Refresh the list after deletion
+          }
+          setIsDeleteModalOpen(false);
+          setRowId(null);
+        }}
+        onCancel={() => {
+          setIsDeleteModalOpen(false);
+          setRowId(null);
+        }}
+      />
+    </>
+  );
+});
--- a/src/pages/Country/CountryPreviewPage/index.tsx
+++ b/src/pages/Country/CountryPreviewPage/index.tsx
@ -0,0 +1,58 @@
+import { Paper } from "@mui/material";
+import { countryStore } from "@shared";
+import { observer } from "mobx-react-lite";
+import { ArrowLeft } from "lucide-react";
+import { useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+
+export const CountryPreviewPage = observer(() => {
+  const { id } = useParams();
+  const { getCountry, country } = countryStore;
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    (async () => {
+      await getCountry(id as string);
+    })();
+  }, [id]);
+
+  return (
+    <Paper className="w-full h-full p-3 flex flex-col gap-10">
+      <div className="flex justify-between items-center">
+        <button
+          className="flex items-center gap-2"
+          onClick={() => navigate(-1)}
+        >
+          <ArrowLeft size={20} />
+          Назад
+        </button>
+        {/* <div className="flex gap-2">
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => navigate(`/user/${id}/edit`)}
+            startIcon={<Pencil size={20} />}
+          >
+            Редактировать
+          </Button>
+          <Button
+            variant="contained"
+            color="error"
+            onClick={() => navigate(`/user/${id}/delete`)}
+            startIcon={<Trash2 size={20} />}
+          >
+            Удалить
+          </Button>
+        </div> */}
+      </div>
+      {country && (
+        <div className="flex flex-col gap-10 w-full">
+          <div className="flex flex-col gap-2">
+            <h1 className="text-lg font-bold">Название</h1>
+            <p>{country?.name}</p>
+          </div>
+        </div>
+      )}
+    </Paper>
+  );
+});
--- a/src/pages/Country/index.ts
+++ b/src/pages/Country/index.ts
@ -0,0 +1,3 @@
+export * from "./CountryListPage";
+export * from "./CountryPreviewPage";
+export * from "./CountryCreatePage";
--- a/src/pages/CreateMediaPage/index.tsx
+++ b/src/pages/CreateMediaPage/index.tsx
@ -1,126 +0,0 @@
-// import { Button, Paper, Typography, Box, Alert, Snackbar } from "@mui/material";
-// import { useNavigate } from "react-router-dom";
-// import { ArrowLeft, Upload } from "lucide-react";
-// import { observer } from "mobx-react-lite";
-// import { useState, DragEvent, useRef, useEffect } from "react";
-// import { editSightStore, UploadMediaDialog } from "@shared";
-
-// export const CreateMediaPage = observer(() => {
-//   const navigate = useNavigate();
-//   const [isDragging, setIsDragging] = useState(false);
-
-//   const [error, setError] = useState<string | null>(null);
-//   const [success, setSuccess] = useState(false);
-//   const fileInputRef = useRef<HTMLInputElement>(null);
-//   const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
-
-//   const handleDrop = (e: DragEvent<HTMLDivElement>) => {
-//     e.preventDefault();
-//     e.stopPropagation();
-//     setIsDragging(false);
-
-//     const files = Array.from(e.dataTransfer.files);
-//     if (files.length > 0) {
-//       editSightStore.fileToUpload = files[0];
-//       setUploadDialogOpen(true);
-//     }
-//   };
-
-//   const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
-//     e.preventDefault();
-//     setIsDragging(true);
-//   };
-
-//   const handleDragLeave = () => {
-//     setIsDragging(false);
-//   };
-
-//   const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-//     const files = e.target.files;
-//     if (files && files.length > 0) {
-//       editSightStore.fileToUpload = files[0];
-//       setUploadDialogOpen(true);
-//     }
-//   };
-
-//   const handleUploadSuccess = () => {
-//     setSuccess(true);
-//     setUploadDialogOpen(false);
-//   };
-
-//   return (
-//     <div className="w-full h-full p-8">
-//       <div className="flex items-center gap-4 mb-8">
-//         <Button
-//           variant="outlined"
-//           startIcon={<ArrowLeft size={20} />}
-//           onClick={() => navigate("/media")}
-//         >
-//           Назад
-//         </Button>
-//         <Typography variant="h5">Загрузка медиафайла</Typography>
-//       </div>
-
-//       <Paper
-//         elevation={3}
-//         className={`w-full h-[60vh] flex flex-col items-center justify-center p-8 transition-colors ${
-//           isDragging ? "bg-blue-50 border-2 border-blue-500" : "bg-gray-50"
-//         }`}
-//         onDrop={handleDrop}
-//         onDragOver={handleDragOver}
-//         onDragLeave={handleDragLeave}
-//       >
-//         <input
-//           type="file"
-//           ref={fileInputRef}
-//           className="hidden"
-//           onChange={handleFileSelect}
-//           accept="image/*,video/*,.glb,.gltf"
-//         />
-
-//         <Box className="flex flex-col items-center gap-4 text-center">
-//           <Upload size={48} className="text-gray-400" />
-//           <Typography variant="h6" className="text-gray-600">
-//             Перетащите файл сюда или
-//           </Typography>
-//           <Button
-//             variant="contained"
-//             onClick={() => fileInputRef.current?.click()}
-//             startIcon={<Upload size={20} />}
-//           >
-//             Выберите файл
-//           </Button>
-//           <Typography variant="body2" className="text-gray-500 mt-4">
-//             Поддерживаемые форматы: JPG, PNG, GIF, MP4, WebM, GLB, GLTF
-//           </Typography>
-//         </Box>
-//       </Paper>
-
-//       <UploadMediaDialog
-//         open={uploadDialogOpen}
-//         onClose={() => setUploadDialogOpen(false)}
-//         afterUpload={handleUploadSuccess}
-//       />
-
-//       <Snackbar
-//         open={success}
-//         autoHideDuration={2000}
-//         onClose={() => setSuccess(false)}
-//       >
-//         <Alert severity="success" onClose={() => setSuccess(false)}>
-//           Медиафайл успешно загружен
-//         </Alert>
-//       </Snackbar>
-
-//       <Snackbar
-//         open={!!error}
-//         autoHideDuration={6000}
-//         onClose={() => setError(null)}
-//       >
-//         <Alert severity="error" onClose={() => setError(null)}>
-//           {error}
-//         </Alert>
-//       </Snackbar>
-//     </div>
-//   );
-// });
--- a/src/pages/Media/MediaCreatePage/index.tsx
+++ b/src/pages/Media/MediaCreatePage/index.tsx
@ -0,0 +1,89 @@
+import {
+  Button,
+  Paper,
+  TextField,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+} from "@mui/material";
+import { mediaStore, MEDIA_TYPE_LABELS } from "@shared";
+import { observer } from "mobx-react-lite";
+import { ArrowLeft, Loader2, Save } from "lucide-react";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+
+export const MediaCreatePage = observer(() => {
+  const navigate = useNavigate();
+  const [name, setName] = useState("");
+  const [type, setType] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleCreate = async () => {
+    try {
+      setIsLoading(true);
+      await mediaStore.createMedia(name, type);
+      toast.success("Медиа успешно создано");
+      navigate("/media");
+    } catch (error) {
+      toast.error("Ошибка при создании медиа");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Paper className="w-full h-full p-3 flex flex-col gap-10">
+      <div className="flex justify-between items-center">
+        <button
+          className="flex items-center gap-2"
+          onClick={() => navigate(-1)}
+        >
+          <ArrowLeft size={20} />
+          Назад
+        </button>
+      </div>
+      <h1 className="text-2xl font-bold">Создание медиа</h1>
+      <div className="flex flex-col gap-10 w-full items-end">
+        <TextField
+          className="w-full"
+          label="Название"
+          required
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+        <FormControl fullWidth>
+          <InputLabel>Тип</InputLabel>
+          <Select
+            value={type}
+            label="Тип"
+            onChange={(e) => setType(e.target.value)}
+            required
+          >
+            {Object.entries(MEDIA_TYPE_LABELS).map(([value, label]) => (
+              <MenuItem key={value} value={value}>
+                {label}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+
+        <Button
+          variant="contained"
+          color="primary"
+          className="w-min flex gap-2 items-center"
+          startIcon={<Save size={20} />}
+          onClick={handleCreate}
+          disabled={isLoading || !name || !type}
+        >
+          {isLoading ? (
+            <Loader2 size={20} className="animate-spin" />
+          ) : (
+            "Создать"
+          )}
+        </Button>
+      </div>
+    </Paper>
+  );
+});
--- a/src/pages/Media/MediaEditPage/index.tsx
+++ b/src/pages/Media/MediaEditPage/index.tsx
@ -19,7 +19,7 @@ import { Save, ArrowLeft } from "lucide-react";
 import { authInstance, mediaStore, MEDIA_TYPE_LABELS } from "@shared";
 import { MediaViewer } from "@widgets";

-export const EditMediaPage = observer(() => {
+export const MediaEditPage = observer(() => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [isLoading, setIsLoading] = useState(false);
--- a/src/pages/Media/MediaListPage/index.tsx
+++ b/src/pages/Media/MediaListPage/index.tsx
@ -0,0 +1,110 @@
+import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
+import { languageStore, MEDIA_TYPE_LABELS, mediaStore } from "@shared";
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Eye, Trash2 } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { CreateButton, DeleteModal, LanguageSwitcher } from "@widgets";
+
+export const MediaListPage = observer(() => {
+  const { media, getMedia, deleteMedia } = mediaStore;
+  const navigate = useNavigate();
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [rowId, setRowId] = useState<string | null>(null); // Lifted state
+  const { language } = languageStore;
+
+  useEffect(() => {
+    getMedia();
+  }, [language]);
+
+  const columns: GridColDef[] = [
+    {
+      field: "media_name",
+      headerName: "Название",
+      flex: 1,
+    },
+    {
+      field: "media_type",
+      headerName: "Тип",
+      width: 200,
+      flex: 1,
+      renderCell: (params: GridRenderCellParams) => {
+        return (
+          <p>
+            {
+              MEDIA_TYPE_LABELS[
+                params.row.media_type as keyof typeof MEDIA_TYPE_LABELS
+              ]
+            }
+          </p>
+        );
+      },
+    },
+    {
+      field: "actions",
+      headerName: "Действия",
+      flex: 1,
+      align: "center",
+      headerAlign: "center",
+
+      renderCell: (params: GridRenderCellParams) => {
+        return (
+          <div className="flex h-full gap-7 justify-center items-center">
+            <button onClick={() => navigate(`/media/${params.row.id}`)}>
+              <Eye size={20} className="text-green-500" />
+            </button>
+            <button
+              onClick={() => {
+                setIsDeleteModalOpen(true);
+                setRowId(params.row.id);
+              }}
+            >
+              <Trash2 size={20} className="text-red-500" />
+            </button>
+          </div>
+        );
+      },
+    },
+  ];
+
+  const rows = media.map((media) => ({
+    id: media.id,
+    media_name: media.media_name,
+    media_type: media.media_type,
+  }));
+
+  return (
+    <>
+      <LanguageSwitcher />
+
+      <div className="w-full">
+        <div className="flex justify-between items-center mb-10">
+          <h1 className="text-2xl">Медиа</h1>
+          <CreateButton label="Создать медиа" path="/media/create" />
+        </div>
+        <DataGrid
+          rows={rows}
+          columns={columns}
+          hideFooterPagination
+          hideFooter
+        />
+      </div>
+
+      <DeleteModal
+        open={isDeleteModalOpen}
+        onDelete={async () => {
+          if (rowId) {
+            deleteMedia(rowId.toString());
+            getMedia();
+          }
+          setIsDeleteModalOpen(false);
+          setRowId(null);
+        }}
+        onCancel={() => {
+          setIsDeleteModalOpen(false);
+          setRowId(null);
+        }}
+      />
+    </>
+  );
+});
--- a/src/pages/Media/MediaPreviewPage/index.tsx
+++ b/src/pages/Media/MediaPreviewPage/index.tsx
@ -1,12 +1,12 @@
 import { mediaStore } from "@shared";
 import { useEffect } from "react";
 import { useParams } from "react-router-dom";
-import { MediaViewer } from "../../widgets/MediaViewer/index";
+import { MediaViewer } from "@widgets";
 import { observer } from "mobx-react-lite";
 import { Download } from "lucide-react";
 import { Button } from "@mui/material";

-export const PreviewMediaPage = observer(() => {
+export const MediaPreviewPage = observer(() => {
  const { id } = useParams();
  const { oneMedia, getOneMedia } = mediaStore;

--- a/src/pages/Media/index.ts
+++ b/src/pages/Media/index.ts
@ -0,0 +1,3 @@
+export * from "./MediaEditPage";
+export * from "./MediaListPage";
+export * from "./MediaPreviewPage";
--- a/src/pages/MediaListPage/index.tsx
+++ b/src/pages/MediaListPage/index.tsx
@ -1,88 +0,0 @@
-import { TableBody } from "@mui/material";
-import { TableRow, TableCell } from "@mui/material";
-import { Table, TableHead } from "@mui/material";
-import { mediaStore, MEDIA_TYPE_LABELS } from "@shared";
-import { useEffect, useState } from "react";
-import { observer } from "mobx-react-lite";
-import { Eye, Pencil, Trash2 } from "lucide-react";
-import { useNavigate } from "react-router-dom";
-import { DeleteModal } from "@widgets";
-
-const rows = (media: any[]) => {
-  return media.map((row) => ({
-    id: row.id,
-    media_name: row.media_name,
-    media_type:
-      MEDIA_TYPE_LABELS[row.media_type as keyof typeof MEDIA_TYPE_LABELS],
-  }));
-};
-
-export const MediaListPage = observer(() => {
-  const { media, getMedia, deleteMedia } = mediaStore;
-  const navigate = useNavigate();
-  useEffect(() => {
-    getMedia();
-  }, []);
-
-  const currentRows = rows(media);
-  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const [rowId, setRowId] = useState<number | null>(null);
-  return (
-    <>
-      <Table sx={{ minWidth: 650 }} aria-label="simple table">
-        <TableHead>
-          <TableRow>
-            <TableCell align="center">Название</TableCell>
-            <TableCell align="center">Тип</TableCell>
-            <TableCell align="center">Действия</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {currentRows.map((row) => (
-            <TableRow
-              key={row.media_name}
-              sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
-            >
-              <TableCell align="center">{row.media_name}</TableCell>
-              <TableCell align="center">{row.media_type}</TableCell>
-              <TableCell align="center">
-                <div className="flex gap-7 justify-center">
-                  <button onClick={() => navigate(`/media/${row.id}`)}>
-                    <Eye size={20} className="text-green-500" />
-                  </button>
-
-                  <button onClick={() => navigate(`/media/${row.id}/edit`)}>
-                    <Pencil size={20} className="text-blue-500" />
-                  </button>
-
-                  <button
-                    onClick={() => {
-                      setIsDeleteModalOpen(true);
-                      setRowId(row.id);
-                    }}
-                  >
-                    <Trash2 size={20} className="text-red-500" />
-                  </button>
-                </div>
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-      <DeleteModal
-        open={isDeleteModalOpen}
-        onDelete={async () => {
-          if (rowId) {
-            await deleteMedia(rowId.toString());
-          }
-          setIsDeleteModalOpen(false);
-          setRowId(null);
-        }}
-        onCancel={() => {
-          setIsDeleteModalOpen(false);
-          setRowId(null);
-        }}
-      />
-    </>
-  );
-});
--- a/src/pages/Route/RouteCreatePage/index.tsx
+++ b/src/pages/Route/RouteCreatePage/index.tsx
@ -0,0 +1,86 @@
+import {
+  Button,
+  Paper,
+  TextField,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+} from "@mui/material";
+
+import { observer } from "mobx-react-lite";
+import { ArrowLeft, Loader2, Save } from "lucide-react";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+
+export const RouteCreatePage = observer(() => {
+  const navigate = useNavigate();
+  const [routeNumber, setRouteNumber] = useState("");
+  const [direction, setDirection] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  return (
+    <Paper className="w-full h-full p-3 flex flex-col gap-10">
+      <div className="flex justify-between items-center">
+        <button
+          className="flex items-center gap-2"
+          onClick={() => navigate(-1)}
+        >
+          <ArrowLeft size={20} />
+          Назад
+        </button>
+      </div>
+      <h1 className="text-2xl font-bold">Создание маршрута</h1>
+      <div className="flex flex-col gap-10 w-full items-end">
+        <TextField
+          className="w-full"
+          label="Номер маршрута"
+          required
+          value={routeNumber}
+          onChange={(e) => setRouteNumber(e.target.value)}
+        />
+        <FormControl fullWidth>
+          <InputLabel>Направление</InputLabel>
+          <Select
+            value={direction}
+            label="Направление"
+            onChange={(e) => setDirection(e.target.value)}
+            required
+          >
+            <MenuItem value="forward">Прямое</MenuItem>
+            <MenuItem value="backward">Обратное</MenuItem>
+          </Select>
+        </FormControl>
+
+        <Button
+          variant="contained"
+          color="primary"
+          className="w-min flex gap-2 items-center"
+          startIcon={<Save size={20} />}
+          onClick={async () => {
+            try {
+              setIsLoading(true);
+              // await createRoute(routeNumber, direction === "forward");
+              setIsLoading(false);
+              toast.success("Маршрут успешно создан");
+              navigate(-1);
+            } catch (error) {
+              console.error(error);
+              toast.error("Произошла ошибка");
+            } finally {
+              setIsLoading(false);
+            }
+          }}
+          disabled={isLoading}
+        >
+          {isLoading ? (
+            <Loader2 size={20} className="animate-spin" />
+          ) : (
+            "Сохранить"
+          )}
+        </Button>
+      </div>
+    </Paper>
+  );
+});
--- a/src/pages/Route/RouteListPage/index.tsx
+++ b/src/pages/Route/RouteListPage/index.tsx
@ -0,0 +1,115 @@
+import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
+import { languageStore, routeStore } from "@shared";
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Eye, Trash2 } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { CreateButton, DeleteModal, LanguageSwitcher } from "@widgets";
+
+export const RouteListPage = observer(() => {
+  const { routes, getRoutes, deleteRoute } = routeStore;
+  const navigate = useNavigate();
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [rowId, setRowId] = useState<number | null>(null); // Lifted state
+  const { language } = languageStore;
+
+  useEffect(() => {
+    getRoutes();
+  }, [language]);
+
+  const columns: GridColDef[] = [
+    {
+      field: "carrier",
+      headerName: "Перевозчик",
+      width: 250,
+    },
+    {
+      field: "route_number",
+      headerName: "Номер маршрута",
+      flex: 1,
+    },
+    {
+      field: "route_direction",
+      headerName: "Направление",
+      flex: 1,
+      renderCell: (params: GridRenderCellParams) => {
+        return (
+          <p
+            className={
+              params.row.route_direction === "Прямой"
+                ? "text-green-500"
+                : "text-red-500"
+            }
+          >
+            {params.row.route_direction}
+          </p>
+        );
+      },
+    },
+    {
+      field: "actions",
+      headerName: "Действия",
+      width: 140,
+      align: "center",
+      headerAlign: "center",
+      renderCell: (params: GridRenderCellParams) => {
+        return (
+          <div className="flex h-full gap-7 justify-center items-center">
+            <button onClick={() => navigate(`/route/${params.row.id}`)}>
+              <Eye size={20} className="text-green-500" />
+            </button>
+            <button
+              onClick={() => {
+                setIsDeleteModalOpen(true);
+                setRowId(params.row.id);
+              }}
+            >
+              <Trash2 size={20} className="text-red-500" />
+            </button>
+          </div>
+        );
+      },
+    },
+  ];
+
+  const rows = routes.map((route) => ({
+    id: route.id,
+    carrier: route.carrier,
+    route_number: route.route_number,
+    route_direction: route.route_direction ? "Прямой" : "Обратный",
+  }));
+
+  return (
+    <>
+      <LanguageSwitcher />
+
+      <div style={{ width: "100%" }}>
+        <div className="flex justify-between items-center mb-10">
+          <h1 className="text-2xl">Маршруты</h1>
+          <CreateButton label="Создать маршрут" path="/route/create" />
+        </div>
+        <DataGrid
+          rows={rows}
+          columns={columns}
+          hideFooterPagination
+          hideFooter
+        />
+      </div>
+
+      <DeleteModal
+        open={isDeleteModalOpen}
+        onDelete={async () => {
+          if (rowId) {
+            deleteRoute(rowId);
+          }
+          setIsDeleteModalOpen(false);
+          setRowId(null);
+        }}
+        onCancel={() => {
+          setIsDeleteModalOpen(false);
+          setRowId(null);
+        }}
+      />
+    </>
+  );
+});
--- a/src/pages/Route/index.ts
+++ b/src/pages/Route/index.ts
@ -0,0 +1 @@
+export * from "./RouteListPage";
--- a/src/pages/Sight/SightListPage/index.tsx
+++ b/src/pages/Sight/SightListPage/index.tsx
@ -0,0 +1,96 @@
+import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
+import { languageStore, sightsStore } from "@shared";
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Pencil, Trash2 } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { DeleteModal, LanguageSwitcher } from "@widgets";
+
+export const SightListPage = observer(() => {
+  const { sights, getSights, deleteListSight } = sightsStore;
+  const navigate = useNavigate();
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [rowId, setRowId] = useState<string | null>(null); // Lifted state
+  const { language } = languageStore;
+
+  useEffect(() => {
+    getSights();
+  }, [language]);
+
+  const columns: GridColDef[] = [
+    {
+      field: "name",
+      headerName: "Имя",
+      flex: 1,
+    },
+    {
+      field: "city",
+      headerName: "Город",
+      flex: 1,
+    },
+
+    {
+      field: "actions",
+      headerName: "Действия",
+      align: "center",
+      headerAlign: "center",
+
+      renderCell: (params: GridRenderCellParams) => {
+        return (
+          <div className="flex h-full gap-7 justify-center items-center">
+            <button onClick={() => navigate(`/sight/${params.row.id}`)}>
+              <Pencil size={20} className="text-blue-500" />
+            </button>
+            {/* <button onClick={() => navigate(`/sight/${params.row.id}`)}>
+              <Eye size={20} className="text-green-500" />
+            </button> */}
+            <button
+              onClick={() => {
+                setIsDeleteModalOpen(true);
+                setRowId(params.row.id);
+              }}
+            >
+              <Trash2 size={20} className="text-red-500" />
+            </button>
+          </div>
+        );
+      },
+    },
+  ];
+
+  const rows = sights.map((sight) => ({
+    id: sight.id,
+    name: sight.name,
+    city: sight.city,
+  }));
+
+  return (
+    <>
+      <LanguageSwitcher />
+
+      <div className="w-full">
+        <DataGrid
+          rows={rows}
+          columns={columns}
+          hideFooterPagination
+          hideFooter
+        />
+      </div>
+
+      <DeleteModal
+        open={isDeleteModalOpen}
+        onDelete={async () => {
+          if (rowId) {
+            await deleteListSight(Number(rowId));
+          }
+          setIsDeleteModalOpen(false);
+          setRowId(null);
+        }}
+        onCancel={() => {
+          setIsDeleteModalOpen(false);
+          setRowId(null);
+        }}
+      />
+    </>
+  );
+});
--- a/src/pages/Sight/index.ts
+++ b/src/pages/Sight/index.ts
@ -0,0 +1 @@
+export * from "./SightListPage";
--- a/src/pages/Snapshot/SnapshotCreatePage/index.tsx
+++ b/src/pages/Snapshot/SnapshotCreatePage/index.tsx
@ -0,0 +1,69 @@
+import { Button, Paper, TextField } from "@mui/material";
+import { snapshotStore } from "@shared";
+import { observer } from "mobx-react-lite";
+import { ArrowLeft, Loader2, Save } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { toast } from "react-toastify";
+
+export const SnapshotCreatePage = observer(() => {
+  const { id } = useParams();
+  const { getSnapshot, createSnapshot } = snapshotStore;
+  const navigate = useNavigate();
+  const [name, setName] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      await getSnapshot(id as string);
+    })();
+  }, [id]);
+
+  return (
+    <Paper className="w-full h-full p-3 flex flex-col gap-10">
+      <div className="flex justify-between items-center">
+        <button
+          className="flex items-center gap-2"
+          onClick={() => navigate(-1)}
+        >
+          <ArrowLeft size={20} />
+          Назад
+        </button>
+      </div>
+      <h1 className="text-2xl font-bold">Создание снапшота</h1>
+      <div className="flex flex-col gap-10 w-full items-end">
+        <TextField
+          className="w-full"
+          label="Название"
+          required
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+
+        <Button
+          variant="contained"
+          color="primary"
+          className="w-min flex gap-2 items-center"
+          startIcon={<Save size={20} />}
+          onClick={async () => {
+            try {
+              setIsLoading(true);
+              await createSnapshot(name);
+              setIsLoading(false);
+              toast.success("Снапшот успешно создан");
+            } catch (error) {
+              console.error(error);
+            }
+          }}
+          disabled={isLoading}
+        >
+          {isLoading ? (
+            <Loader2 size={20} className="animate-spin" />
+          ) : (
+            "Сохранить"
+          )}
+        </Button>
+      </div>
+    </Paper>
+  );
+});
--- a/src/pages/Snapshot/SnapshotListPage/index.tsx
+++ b/src/pages/Snapshot/SnapshotListPage/index.tsx
@ -0,0 +1,127 @@
+import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
+import { languageStore, snapshotStore } from "@shared";
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { DatabaseBackup, Eye, Trash2 } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import {
+  CreateButton,
+  DeleteModal,
+  LanguageSwitcher,
+  SnapshotRestore,
+} from "@widgets";
+
+export const SnapshotListPage = observer(() => {
+  const { snapshots, getSnapshots, deleteSnapshot, restoreSnapshot } =
+    snapshotStore;
+  const navigate = useNavigate();
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [rowId, setRowId] = useState<string | null>(null); // Lifted state
+  const { language } = languageStore;
+  const [isRestoreModalOpen, setIsRestoreModalOpen] = useState(false);
+
+  useEffect(() => {
+    getSnapshots();
+  }, [language]);
+
+  const columns: GridColDef[] = [
+    {
+      field: "name",
+      headerName: "Название",
+      flex: 1,
+    },
+    {
+      field: "parent",
+      headerName: "Родитель",
+      flex: 1,
+    },
+
+    {
+      field: "actions",
+      headerName: "Действия",
+      width: 300,
+      headerAlign: "center",
+
+      renderCell: (params: GridRenderCellParams) => {
+        return (
+          <div className="flex h-full gap-7 justify-center items-center">
+            <button
+              onClick={() => {
+                setIsRestoreModalOpen(true);
+                setRowId(params.row.id);
+              }}
+            >
+              <DatabaseBackup size={20} className="text-blue-500" />
+            </button>
+            <button onClick={() => navigate(`/snapshot/${params.row.id}`)}>
+              <Eye size={20} className="text-green-500" />
+            </button>
+            <button
+              onClick={() => {
+                setIsDeleteModalOpen(true);
+                setRowId(params.row.id);
+              }}
+            >
+              <Trash2 size={20} className="text-red-500" />
+            </button>
+          </div>
+        );
+      },
+    },
+  ];
+
+  const rows = snapshots.map((snapshot) => ({
+    id: snapshot.ID,
+    name: snapshot.Name,
+    parent: snapshots.find((s) => s.ID === snapshot.ParentID)?.Name,
+  }));
+
+  return (
+    <>
+      <LanguageSwitcher />
+
+      <div style={{ width: "100%" }}>
+        <div className="flex justify-between items-center mb-10">
+          <h1 className="text-2xl ">Снапшоты</h1>
+          <CreateButton label="Создать снапшот" path="/snapshot/create" />
+        </div>
+        <DataGrid
+          rows={rows}
+          columns={columns}
+          hideFooterPagination
+          hideFooter
+        />
+      </div>
+
+      <DeleteModal
+        open={isDeleteModalOpen}
+        onDelete={async () => {
+          if (rowId) {
+            await deleteSnapshot(rowId);
+          }
+          setIsDeleteModalOpen(false);
+          setRowId(null);
+        }}
+        onCancel={() => {
+          setIsDeleteModalOpen(false);
+          setRowId(null);
+        }}
+      />
+
+      <SnapshotRestore
+        open={isRestoreModalOpen}
+        onDelete={async () => {
+          if (rowId) {
+            await restoreSnapshot(rowId);
+          }
+          setIsRestoreModalOpen(false);
+          setRowId(null);
+        }}
+        onCancel={() => {
+          setIsRestoreModalOpen(false);
+          setRowId(null);
+        }}
+      />
+    </>
+  );
+});
--- a/src/pages/Snapshot/SnapshotPreviewPage/index.tsx
+++ b/src/pages/Snapshot/SnapshotPreviewPage/index.tsx
@ -0,0 +1,58 @@
+import { Paper } from "@mui/material";
+import { snapshotStore } from "@shared";
+import { observer } from "mobx-react-lite";
+import { ArrowLeft } from "lucide-react";
+import { useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+
+export const SnapshotPreviewPage = observer(() => {
+  const { id } = useParams();
+  const { getSnapshot, snapshot } = snapshotStore;
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    (async () => {
+      await getSnapshot(id as string);
+    })();
+  }, [id]);
+
+  return (
+    <Paper className="w-full h-full p-3 flex flex-col gap-10">
+      <div className="flex justify-between items-center">
+        <button
+          className="flex items-center gap-2"
+          onClick={() => navigate(-1)}
+        >
+          <ArrowLeft size={20} />
+          Назад
+        </button>
+        {/* <div className="flex gap-2">
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => navigate(`/snapshot/${id}/edit`)}
+            startIcon={<Pencil size={20} />}
+          >
+            Редактировать
+          </Button>
+          <Button
+            variant="contained"
+            color="error"
+            onClick={() => navigate(`/snapshot/${id}/delete`)}
+            startIcon={<Trash2 size={20} />}
+          >
+            Удалить
+          </Button>
+        </div> */}
+      </div>
+      {snapshot && (
+        <div className="flex flex-col gap-10 w-full">
+          <div className="flex flex-col gap-2">
+            <h1 className="text-lg font-bold">Название</h1>
+            <p>{snapshot?.Name}</p>
+          </div>
+        </div>
+      )}
+    </Paper>
+  );
+});
--- a/src/pages/Snapshot/index.ts
+++ b/src/pages/Snapshot/index.ts
@ -0,0 +1,3 @@
+export * from "./SnapshotListPage";
+export * from "./SnapshotPreviewPage";
+export * from "./SnapshotCreatePage";
--- a/src/pages/Station/StationCreatePage/index.tsx
+++ b/src/pages/Station/StationCreatePage/index.tsx
@ -0,0 +1,94 @@
+import {
+  Button,
+  Paper,
+  TextField,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+} from "@mui/material";
+import { observer } from "mobx-react-lite";
+import { ArrowLeft, Loader2, Save } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import { stationsStore } from "@shared";
+import { useState } from "react";
+
+export const StationCreatePage = observer(() => {
+  const navigate = useNavigate();
+  const [name, setName] = useState("");
+  const [systemName, setSystemName] = useState("");
+  const [direction, setDirection] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleCreate = async () => {
+    try {
+      setIsLoading(true);
+      await stationsStore.createStation(name, systemName, direction);
+      toast.success("Станция успешно создана");
+      navigate("/station");
+    } catch (error) {
+      toast.error("Ошибка при создании станции");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Paper className="w-full h-full p-3 flex flex-col gap-10">
+      <div className="flex justify-between items-center">
+        <button
+          className="flex items-center gap-2"
+          onClick={() => navigate(-1)}
+        >
+          <ArrowLeft size={20} />
+          Назад
+        </button>
+      </div>
+      <h1 className="text-2xl font-bold">Создание станции</h1>
+      <div className="flex flex-col gap-10 w-full items-end">
+        <TextField
+          className="w-full"
+          label="Название"
+          required
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+        <TextField
+          className="w-full"
+          label="Системное название"
+          required
+          value={systemName}
+          onChange={(e) => setSystemName(e.target.value)}
+        />
+        <FormControl fullWidth>
+          <InputLabel>Направление</InputLabel>
+          <Select
+            value={direction}
+            label="Направление"
+            onChange={(e) => setDirection(e.target.value)}
+            required
+          >
+            <MenuItem value="forward">Прямое</MenuItem>
+            <MenuItem value="backward">Обратное</MenuItem>
+          </Select>
+        </FormControl>
+
+        <Button
+          variant="contained"
+          color="primary"
+          className="w-min flex gap-2 items-center"
+          startIcon={<Save size={20} />}
+          onClick={handleCreate}
+          disabled={isLoading || !name || !systemName || !direction}
+        >
+          {isLoading ? (
+            <Loader2 size={20} className="animate-spin" />
+          ) : (
+            "Создать"
+          )}
+        </Button>
+      </div>
+    </Paper>
+  );
+});
--- a/src/pages/Station/StationListPage/index.tsx
+++ b/src/pages/Station/StationListPage/index.tsx
@ -0,0 +1,117 @@
+import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
+import { languageStore, stationsStore } from "@shared";
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Eye, Trash2 } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { CreateButton, DeleteModal, LanguageSwitcher } from "@widgets";
+
+export const StationListPage = observer(() => {
+  const { stations, getStations, deleteStation } = stationsStore;
+  const navigate = useNavigate();
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [rowId, setRowId] = useState<number | null>(null); // Lifted state
+  const { language } = languageStore;
+
+  useEffect(() => {
+    getStations();
+  }, [language]);
+
+  const columns: GridColDef[] = [
+    {
+      field: "name",
+      headerName: "Название",
+      flex: 1,
+    },
+    {
+      field: "system_name",
+      headerName: "Системное название",
+      flex: 1,
+    },
+    {
+      field: "direction",
+      headerName: "Направление",
+      width: 200,
+      align: "center",
+      headerAlign: "center",
+
+      renderCell: (params: GridRenderCellParams) => {
+        return (
+          <p
+            className={
+              params.row.direction === true ? "text-green-500" : "text-red-500"
+            }
+          >
+            {params.row.direction ? "Прямой" : "Обратный"}
+          </p>
+        );
+      },
+    },
+    {
+      field: "actions",
+      headerName: "Действия",
+      width: 140,
+      align: "center",
+      headerAlign: "center",
+
+      renderCell: (params: GridRenderCellParams) => {
+        return (
+          <div className="flex h-full gap-7 justify-center items-center">
+            <button onClick={() => navigate(`/station/${params.row.id}`)}>
+              <Eye size={20} className="text-green-500" />
+            </button>
+            <button
+              onClick={() => {
+                setIsDeleteModalOpen(true);
+                setRowId(params.row.id);
+              }}
+            >
+              <Trash2 size={20} className="text-red-500" />
+            </button>
+          </div>
+        );
+      },
+    },
+  ];
+
+  const rows = stations.map((station) => ({
+    id: station.id,
+    name: station.name,
+    system_name: station.system_name,
+    direction: station.direction,
+  }));
+
+  return (
+    <>
+      <LanguageSwitcher />
+
+      <div style={{ width: "100%" }}>
+        <div className="flex justify-between items-center mb-10">
+          <h1 className="text-2xl">Станции</h1>
+          <CreateButton label="Создать станцию" path="/station/create" />
+        </div>
+        <DataGrid
+          rows={rows}
+          columns={columns}
+          hideFooterPagination
+          hideFooter
+        />
+      </div>
+
+      <DeleteModal
+        open={isDeleteModalOpen}
+        onDelete={async () => {
+          if (rowId) {
+            deleteStation(rowId);
+          }
+          setIsDeleteModalOpen(false);
+          setRowId(null);
+        }}
+        onCancel={() => {
+          setIsDeleteModalOpen(false);
+          setRowId(null);
+        }}
+      />
+    </>
+  );
+});
--- a/src/pages/Station/index.ts
+++ b/src/pages/Station/index.ts
@ -0,0 +1 @@
+export * from "./StationListPage";
--- a/src/pages/User/UserListPage/index.tsx
+++ b/src/pages/User/UserListPage/index.tsx
@ -0,0 +1,112 @@
+import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
+import { languageStore, userStore } from "@shared";
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Eye, Trash2 } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { DeleteModal, LanguageSwitcher } from "@widgets";
+
+export const UserListPage = observer(() => {
+  const { users, getUsers, deleteUser } = userStore;
+  const navigate = useNavigate();
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [rowId, setRowId] = useState<number | null>(null); // Lifted state
+  const { language } = languageStore;
+
+  useEffect(() => {
+    getUsers();
+  }, [language]);
+
+  const columns: GridColDef[] = [
+    {
+      field: "name",
+      headerName: "Имя",
+      width: 400,
+    },
+    {
+      field: "email",
+      headerName: "Email",
+      width: 400,
+    },
+    {
+      field: "is_admin",
+      headerName: "Роль",
+      flex: 1,
+
+      renderCell: (params: GridRenderCellParams) => {
+        return (
+          <p
+            className={
+              params.row.is_admin === true ? "text-green-500" : "text-red-500"
+            }
+          >
+            {params.row.is_admin ? "Администратор" : "Пользователь"}
+          </p>
+        );
+      },
+    },
+
+    {
+      field: "actions",
+      headerName: "Действия",
+      flex: 1,
+      align: "center",
+      headerAlign: "center",
+
+      renderCell: (params: GridRenderCellParams) => {
+        return (
+          <div className="flex h-full gap-7 justify-center items-center">
+            <button onClick={() => navigate(`/user/${params.row.id}`)}>
+              <Eye size={20} className="text-green-500" />
+            </button>
+            <button
+              onClick={() => {
+                setIsDeleteModalOpen(true);
+                setRowId(params.row.id);
+              }}
+            >
+              <Trash2 size={20} className="text-red-500" />
+            </button>
+          </div>
+        );
+      },
+    },
+  ];
+
+  const rows = users.map((user) => ({
+    id: user.id,
+    email: user.email,
+    is_admin: user.is_admin,
+    name: user.name,
+  }));
+
+  return (
+    <>
+      <LanguageSwitcher />
+
+      <div style={{ width: "100%" }}>
+        <DataGrid
+          rows={rows}
+          columns={columns}
+          hideFooterPagination
+          hideFooter
+        />
+      </div>
+
+      <DeleteModal
+        open={isDeleteModalOpen}
+        onDelete={async () => {
+          if (rowId) {
+            await deleteUser(rowId);
+          }
+          setIsDeleteModalOpen(false);
+          setRowId(null);
+        }}
+        onCancel={() => {
+          setIsDeleteModalOpen(false);
+          setRowId(null);
+        }}
+      />
+    </>
+  );
+});
--- a/src/pages/User/UserPreviewPage/index.tsx
+++ b/src/pages/User/UserPreviewPage/index.tsx
@ -0,0 +1,74 @@
+import { Paper } from "@mui/material";
+import { userStore } from "@shared";
+import { observer } from "mobx-react-lite";
+import { ArrowLeft } from "lucide-react";
+import { useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+
+export const UserPreviewPage = observer(() => {
+  const { id } = useParams();
+  const { getUser, user } = userStore;
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    (async () => {
+      await getUser(Number(id));
+    })();
+  }, [id]);
+
+  return (
+    <Paper className="w-full h-full p-3 flex flex-col gap-10">
+      <div className="flex justify-between items-center">
+        <button
+          className="flex items-center gap-2"
+          onClick={() => navigate(-1)}
+        >
+          <ArrowLeft size={20} />
+          Назад
+        </button>
+        {/* <div className="flex gap-2">
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => navigate(`/user/${id}/edit`)}
+            startIcon={<Pencil size={20} />}
+          >
+            Редактировать
+          </Button>
+          <Button
+            variant="contained"
+            color="error"
+            onClick={() => navigate(`/user/${id}/delete`)}
+            startIcon={<Trash2 size={20} />}
+          >
+            Удалить
+          </Button>
+        </div> */}
+      </div>
+      {user && (
+        <div className="flex flex-col gap-10 w-full">
+          <div className="flex flex-col gap-2">
+            <h1 className="text-lg font-bold">Название</h1>
+            <p>{user?.name}</p>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <h1 className="text-lg font-bold">Email</h1>
+            <p>{user?.email}</p>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <h1 className="text-lg font-bold">Роль</h1>
+            <p
+              className={
+                user?.is_admin === true ? "text-green-500" : "text-red-500"
+              }
+            >
+              {user?.is_admin ? "Администратор" : "Пользователь"}
+            </p>
+          </div>
+        </div>
+      )}
+    </Paper>
+  );
+});
--- a/src/pages/User/index.ts
+++ b/src/pages/User/index.ts
@ -0,0 +1,2 @@
+export * from "./UserListPage";
+export * from "./UserPreviewPage";
--- a/src/pages/Vehicle/VehicleCreatePage/index.tsx
+++ b/src/pages/Vehicle/VehicleCreatePage/index.tsx
@ -0,0 +1,117 @@
+import {
+  Button,
+  Paper,
+  TextField,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+} from "@mui/material";
+import { vehicleStore, VEHICLE_TYPES, carrierStore } from "@shared";
+import { observer } from "mobx-react-lite";
+import { ArrowLeft, Save } from "lucide-react";
+import { Loader2 } from "lucide-react";
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import { LanguageSwitcher } from "@widgets";
+
+export const VehicleCreatePage = observer(() => {
+  const navigate = useNavigate();
+  const [tailNumber, setTailNumber] = useState("");
+  const [type, setType] = useState("");
+  const [carrierId, setCarrierId] = useState<number | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    carrierStore.getCarriers();
+  }, []);
+
+  const handleCreate = async () => {
+    try {
+      setIsLoading(true);
+      await vehicleStore.createVehicle(
+        Number(tailNumber),
+        type,
+        carrierStore.carriers.find((c) => c.id === carrierId)?.full_name!,
+        carrierId!
+      );
+      toast.success("Транспорт успешно создан");
+    } catch (error) {
+      toast.error("Ошибка при создании транспорта");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Paper className="w-full h-full p-3 flex flex-col gap-10">
+      <LanguageSwitcher />
+      <div className="flex items-center gap-4">
+        <button
+          className="flex items-center gap-2"
+          onClick={() => navigate("/vehicle")}
+        >
+          <ArrowLeft size={20} />
+          Назад
+        </button>
+      </div>
+
+      <div className="flex flex-col gap-10 w-full items-end">
+        <TextField
+          fullWidth
+          label="Бортовой номер"
+          value={tailNumber}
+          required
+          onChange={(e) => setTailNumber(e.target.value)}
+        />
+
+        <FormControl fullWidth>
+          <InputLabel>Тип</InputLabel>
+          <Select
+            value={type}
+            label="Тип"
+            required
+            onChange={(e) => setType(e.target.value)}
+          >
+            {VEHICLE_TYPES.map((type) => (
+              <MenuItem key={type.value} value={type.value}>
+                {type.label}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+
+        <FormControl fullWidth>
+          <InputLabel>Перевозчик</InputLabel>
+          <Select
+            value={carrierId || ""}
+            label="Перевозчик"
+            required
+            onChange={(e) => setCarrierId(e.target.value as number)}
+          >
+            {carrierStore.carriers.map((carrier) => (
+              <MenuItem key={carrier.id} value={carrier.id}>
+                {carrier.full_name}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+
+        <Button
+          variant="contained"
+          className="w-min flex gap-2 items-center"
+          startIcon={<Save size={20} />}
+          onClick={handleCreate}
+          disabled={isLoading || !tailNumber || !type || !carrierId}
+        >
+          {isLoading ? (
+            <Loader2 size={20} className="animate-spin" />
+          ) : (
+            "Создать"
+          )}
+        </Button>
+      </div>
+    </Paper>
+  );
+});
--- a/src/pages/Vehicle/VehicleListPage/index.tsx
+++ b/src/pages/Vehicle/VehicleListPage/index.tsx
@ -0,0 +1,133 @@
+import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
+import { carrierStore, languageStore, vehicleStore } from "@shared";
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Eye, Trash2 } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { CreateButton, DeleteModal, LanguageSwitcher } from "@widgets";
+import { VEHICLE_TYPES } from "@shared";
+
+export const VehicleListPage = observer(() => {
+  const { vehicles, getVehicles, deleteVehicle } = vehicleStore;
+  const { carriers, getCarriers } = carrierStore;
+  const navigate = useNavigate();
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [rowId, setRowId] = useState<number | null>(null);
+  const { language } = languageStore;
+
+  useEffect(() => {
+    getVehicles();
+    getCarriers();
+  }, [language]);
+
+  const columns: GridColDef[] = [
+    {
+      field: "tail_number",
+      headerName: "Бортовой номер",
+      flex: 1,
+      align: "center",
+      headerAlign: "center",
+    },
+    {
+      field: "type",
+      headerName: "Тип",
+      flex: 1,
+      align: "center",
+      headerAlign: "center",
+      renderCell: (params: GridRenderCellParams) => {
+        return (
+          <div className="flex h-full gap-7 justify-center items-center">
+            {VEHICLE_TYPES.find((type) => type.value === params.row.type)
+              ?.label || params.row.type}
+          </div>
+        );
+      },
+    },
+    {
+      field: "carrier",
+      headerName: "Перевозчик",
+      flex: 1,
+      align: "center",
+      headerAlign: "center",
+    },
+    {
+      field: "city",
+      headerName: "Город",
+      flex: 1,
+      align: "center",
+      headerAlign: "center",
+    },
+
+    {
+      field: "actions",
+      headerName: "Действия",
+      flex: 1,
+      align: "center",
+      headerAlign: "center",
+
+      renderCell: (params: GridRenderCellParams) => {
+        return (
+          <div className="flex h-full gap-7 justify-center items-center">
+            <button onClick={() => navigate(`/vehicle/${params.row.id}`)}>
+              <Eye size={20} className="text-green-500" />
+            </button>
+            <button
+              onClick={() => {
+                setIsDeleteModalOpen(true);
+                setRowId(params.row.id);
+              }}
+            >
+              <Trash2 size={20} className="text-red-500" />
+            </button>
+          </div>
+        );
+      },
+    },
+  ];
+
+  const rows = vehicles.map((vehicle) => ({
+    id: vehicle.vehicle.id,
+    tail_number: vehicle.vehicle.tail_number,
+    type: vehicle.vehicle.type,
+    carrier: vehicle.vehicle.carrier,
+    city: carriers.find((carrier) => carrier.id === vehicle.vehicle.carrier_id)
+      ?.city,
+  }));
+
+  return (
+    <>
+      <LanguageSwitcher />
+
+      <div style={{ width: "100%" }}>
+        <div className="flex justify-between items-center mb-10">
+          <h1 className="text-2xl">Транспортные средства</h1>
+          <CreateButton
+            label="Создать транспортное средство"
+            path="/vehicle/create"
+          />
+        </div>
+        <DataGrid
+          rows={rows}
+          columns={columns}
+          hideFooterPagination
+          hideFooter
+        />
+      </div>
+
+      <DeleteModal
+        open={isDeleteModalOpen}
+        onDelete={async () => {
+          if (rowId) {
+            await deleteVehicle(rowId);
+          }
+          setIsDeleteModalOpen(false);
+          setRowId(null);
+        }}
+        onCancel={() => {
+          setIsDeleteModalOpen(false);
+          setRowId(null);
+        }}
+      />
+    </>
+  );
+});
--- a/src/pages/Vehicle/VehiclePreviewPage/index.tsx
+++ b/src/pages/Vehicle/VehiclePreviewPage/index.tsx
@ -0,0 +1,70 @@
+import { Paper } from "@mui/material";
+import { vehicleStore, VEHICLE_TYPES } from "@shared";
+import { observer } from "mobx-react-lite";
+import { ArrowLeft } from "lucide-react";
+import { useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+
+export const VehiclePreviewPage = observer(() => {
+  const { id } = useParams();
+  const { getVehicle, vehicle } = vehicleStore;
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    (async () => {
+      await getVehicle(Number(id));
+    })();
+  }, [id]);
+
+  return (
+    <Paper className="w-full h-full p-3 flex flex-col gap-10">
+      <div className="flex justify-between items-center">
+        <button
+          className="flex items-center gap-2"
+          onClick={() => navigate(-1)}
+        >
+          <ArrowLeft size={20} />
+          Назад
+        </button>
+        {/* <div className="flex gap-2">
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => navigate(`/vehicle/${id}/edit`)}
+            startIcon={<Pencil size={20} />}
+          >
+            Редактировать
+          </Button>
+          <Button
+            variant="contained"
+            color="error"
+            onClick={() => navigate(`/vehicle/${id}/delete`)}
+            startIcon={<Trash2 size={20} />}
+          >
+            Удалить
+          </Button>
+        </div> */}
+      </div>
+      {vehicle && (
+        <div className="flex flex-col gap-10 w-full">
+          <div className="flex flex-col gap-2">
+            <h1 className="text-lg font-bold">Системный номер</h1>
+            <p>{vehicle?.vehicle.tail_number}</p>
+          </div>
+          <div className="flex flex-col gap-2">
+            <h1 className="text-lg font-bold">Тип транспортного средства</h1>
+            <p>
+              {VEHICLE_TYPES.find(
+                (type) => type.value === vehicle?.vehicle.type
+              )?.label || vehicle?.vehicle.type}
+            </p>
+          </div>
+          <div className="flex flex-col gap-2">
+            <h1 className="text-lg font-bold">Перевозчик</h1>
+            <p>{vehicle?.vehicle.carrier}</p>
+          </div>
+        </div>
+      )}
+    </Paper>
+  );
+});
--- a/src/pages/Vehicle/index.ts
+++ b/src/pages/Vehicle/index.ts
@ -0,0 +1,3 @@
+export * from "./VehicleListPage";
+export * from "./VehiclePreviewPage";
+export * from "./VehicleCreatePage";
--- a/src/pages/index.ts
+++ b/src/pages/index.ts
@ -5,7 +5,15 @@ export * from "./DevicesPage";
 export * from "./SightPage";
 export * from "./CreateSightPage";
 export * from "./MapPage";
-export * from "./MediaListPage";
-export * from "./PreviewMediaPage";
-export * from "./EditMediaPage";
+export * from "./Media";
 // export * from "./CreateMediaPage";
+export * from "./Country";
+export * from "./City";
+export * from "./Route";
+export * from "./User";
+export * from "./Snapshot";
+export * from "./Carrier";
+export * from "./Station";
+export * from "./Vehicle";
+export * from "./Article";
+export * from "./Sight";