fix: Fix Map page

src/pages/Route/RouteCreatePage/index.tsx

@@ -9,7 +9,7 @@ import {
   Typography,
   Box,
 } from "@mui/material";
-
+import { LanguageSwitcher } from "@widgets";
 import { observer } from "mobx-react-lite";
 import { ArrowLeft, Loader2, Save } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -93,134 +93,135 @@ export const RouteCreatePage = observer(() => {
 
   return (
     <Paper className="w-full h-full p-3 flex flex-col gap-10">
-      <div className="flex justify-between items-center">
+      <LanguageSwitcher />
+      <div className="flex items-center gap-4">
         <button
           className="flex items-center gap-2"
           onClick={() => navigate(-1)}
         >
           <ArrowLeft size={20} />
-          Маршруты / Создать
+          Назад
         </button>
       </div>
-      <Typography variant="h5" fontWeight={700}>
-        Создать маршрут
-      </Typography>
-      <Box className="flex flex-col gap-6 w-full">
-        <FormControl fullWidth required>
-          <InputLabel>Выберите перевозчика</InputLabel>
-          <Select
-            value={carrier}
-            label="Выберите перевозчика"
-            onChange={(e) => setCarrier(e.target.value as string)}
-            disabled={carrierStore.carriers.data.length === 0}
+
+      <div className="flex flex-col gap-10 w-full items-end">
+        <Box className="flex flex-col gap-6 w-full">
+          <FormControl fullWidth required>
+            <InputLabel>Выберите перевозчика</InputLabel>
+            <Select
+              value={carrier}
+              label="Выберите перевозчика"
+              onChange={(e) => setCarrier(e.target.value as string)}
+              disabled={carrierStore.carriers.data.length === 0}
+            >
+              <MenuItem value="">Не выбрано</MenuItem>
+              {carrierStore.carriers.data.map(
+                (c: (typeof carrierStore.carriers.data)[number]) => (
+                  <MenuItem key={c.id} value={c.id}>
+                    {c.full_name}
+                  </MenuItem>
+                )
+              )}
+            </Select>
+          </FormControl>
+          <TextField
+            className="w-full"
+            label="Номер маршрута"
+            required
+            value={routeNumber}
+            onChange={(e) => setRouteNumber(e.target.value)}
+          />
+          <TextField
+            className="w-full"
+            label="Координаты маршрута"
+            multiline
+            minRows={3}
+            value={routeCoords}
+            onChange={(e) => setRouteCoords(e.target.value)}
+          />
+          <TextField
+            className="w-full"
+            label="Номер маршрута в Говорящем Городе"
+            required
+            value={govRouteNumber}
+            onChange={(e) => setGovRouteNumber(e.target.value)}
+          />
+          <FormControl fullWidth required>
+            <InputLabel>Обращение губернатора</InputLabel>
+            <Select
+              value={governorAppeal}
+              label="Обращение губернатора"
+              onChange={(e) => setGovernorAppeal(e.target.value as string)}
+              disabled={articlesStore.articleList.ru.data.length === 0}
+            >
+              <MenuItem value="">Не выбрано</MenuItem>
+              {articlesStore.articleList.ru.data.map(
+                (a: (typeof articlesStore.articleList.ru.data)[number]) => (
+                  <MenuItem key={a.id} value={a.id}>
+                    {a.heading}
+                  </MenuItem>
+                )
+              )}
+            </Select>
+          </FormControl>
+          <FormControl fullWidth required>
+            <InputLabel>Прямой/обратный маршрут</InputLabel>
+            <Select
+              value={direction}
+              label="Прямой/обратный маршрут"
+              onChange={(e) => setDirection(e.target.value)}
+            >
+              <MenuItem value="forward">Прямой</MenuItem>
+              <MenuItem value="backward">Обратный</MenuItem>
+            </Select>
+          </FormControl>
+          <TextField
+            className="w-full"
+            label="Масштаб (мин)"
+            value={scaleMin}
+            onChange={(e) => setScaleMin(e.target.value)}
+          />
+          <TextField
+            className="w-full"
+            label="Масштаб (макс)"
+            value={scaleMax}
+            onChange={(e) => setScaleMax(e.target.value)}
+          />
+          <TextField
+            className="w-full"
+            label="Поворот"
+            value={turn}
+            onChange={(e) => setTurn(e.target.value)}
+          />
+          <TextField
+            className="w-full"
+            label="Центр. широта"
+            value={centerLat}
+            onChange={(e) => setCenterLat(e.target.value)}
+          />
+          <TextField
+            className="w-full"
+            label="Центр. долгота"
+            value={centerLng}
+            onChange={(e) => setCenterLng(e.target.value)}
+          />
+        </Box>
+        <div className="flex w-full justify-end">
+          <Button
+            variant="contained"
+            color="primary"
+            className="w-min flex gap-2 items-center"
+            startIcon={<Save size={20} />}
+            onClick={handleCreateRoute}
+            disabled={isLoading}
           >
-            <MenuItem value="">Не выбрано</MenuItem>
-            {carrierStore.carriers.data.map(
-              (c: (typeof carrierStore.carriers.data)[number]) => (
-                <MenuItem key={c.id} value={c.id}>
-                  {c.full_name}
-                </MenuItem>
-              )
+            {isLoading ? (
+              <Loader2 size={20} className="animate-spin" />
+            ) : (
+              "Сохранить"
             )}
-          </Select>
-        </FormControl>
-        <TextField
-          className="w-full"
-          label="Номер маршрута"
-          required
-          value={routeNumber}
-          onChange={(e) => setRouteNumber(e.target.value)}
-        />
-        <TextField
-          className="w-full"
-          label="Координаты маршрута"
-          multiline
-          minRows={3}
-          value={routeCoords}
-          onChange={(e) => setRouteCoords(e.target.value)}
-        />
-        <TextField
-          className="w-full"
-          label="Номер маршрута в Говорящем Городе"
-          required
-          value={govRouteNumber}
-          onChange={(e) => setGovRouteNumber(e.target.value)}
-        />
-        <FormControl fullWidth required>
-          <InputLabel>Обращение губернатора</InputLabel>
-          <Select
-            value={governorAppeal}
-            label="Обращение губернатора"
-            onChange={(e) => setGovernorAppeal(e.target.value as string)}
-            disabled={articlesStore.articleList.ru.data.length === 0}
-          >
-            <MenuItem value="">Не выбрано</MenuItem>
-            {articlesStore.articleList.ru.data.map(
-              (a: (typeof articlesStore.articleList.ru.data)[number]) => (
-                <MenuItem key={a.id} value={a.id}>
-                  {a.heading}
-                </MenuItem>
-              )
-            )}
-          </Select>
-        </FormControl>
-        <FormControl fullWidth required>
-          <InputLabel>Прямой/обратный маршрут</InputLabel>
-          <Select
-            value={direction}
-            label="Прямой/обратный маршрут"
-            onChange={(e) => setDirection(e.target.value)}
-          >
-            <MenuItem value="forward">Прямой</MenuItem>
-            <MenuItem value="backward">Обратный</MenuItem>
-          </Select>
-        </FormControl>
-        <TextField
-          className="w-full"
-          label="Масштаб (мин)"
-          value={scaleMin}
-          onChange={(e) => setScaleMin(e.target.value)}
-        />
-        <TextField
-          className="w-full"
-          label="Масштаб (макс)"
-          value={scaleMax}
-          onChange={(e) => setScaleMax(e.target.value)}
-        />
-        <TextField
-          className="w-full"
-          label="Поворот"
-          value={turn}
-          onChange={(e) => setTurn(e.target.value)}
-        />
-        <TextField
-          className="w-full"
-          label="Центр. широта"
-          value={centerLat}
-          onChange={(e) => setCenterLat(e.target.value)}
-        />
-        <TextField
-          className="w-full"
-          label="Центр. долгота"
-          value={centerLng}
-          onChange={(e) => setCenterLng(e.target.value)}
-        />
-      </Box>
-      <div className="flex w-full justify-end">
-        <Button
-          variant="contained"
-          color="primary"
-          className="w-min flex gap-2 items-center"
-          startIcon={<Save size={20} />}
-          onClick={handleCreateRoute}
-          disabled={isLoading}
-        >
-          {isLoading ? (
-            <Loader2 size={20} className="animate-spin" />
-          ) : (
-            "Сохранить"
-          )}
-        </Button>
+          </Button>
+        </div>
       </div>
     </Paper>
   );

src/pages/Route/RouteEditPage/index.tsx

@@ -9,7 +9,7 @@ import {
   Typography,
   Box,
 } from "@mui/material";
-
+import { LanguageSwitcher } from "@widgets";
 import { observer } from "mobx-react-lite";
 import { ArrowLeft, Save } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -45,180 +45,181 @@ export const RouteEditPage = observer(() => {
 
   return (
     <Paper className="w-full h-full p-3 flex flex-col gap-10">
-      <div className="flex justify-between items-center">
+      <LanguageSwitcher />
+      <div className="flex items-center gap-4">
         <button
           className="flex items-center gap-2"
           onClick={() => navigate(-1)}
         >
           <ArrowLeft size={20} />
-          Маршруты / Редактировать
+          Назад
         </button>
       </div>
-      <Typography variant="h5" fontWeight={700}>
-        Редактировать маршрут
-      </Typography>
-      <Box className="flex flex-col gap-6 w-full">
-        <FormControl fullWidth required>
-          <InputLabel>Выберите перевозчика</InputLabel>
-          <Select
-            value={editRouteData.carrier_id}
-            label="Выберите перевозчика"
+
+      <div className="flex flex-col gap-10 w-full items-end">
+        <Box className="flex flex-col gap-6 w-full">
+          <FormControl fullWidth required>
+            <InputLabel>Выберите перевозчика</InputLabel>
+            <Select
+              value={editRouteData.carrier_id}
+              label="Выберите перевозчика"
+              onChange={(e) =>
+                routeStore.setEditRouteData({
+                  carrier_id: Number(e.target.value),
+                  carrier:
+                    carrierStore.carriers.data.find(
+                      (c) => c.id === Number(e.target.value)
+                    )?.full_name || "",
+                })
+              }
+              disabled={carrierStore.carriers.data.length === 0}
+            >
+              <MenuItem value="">Не выбрано</MenuItem>
+              {carrierStore.carriers.data.map(
+                (c: (typeof carrierStore.carriers.data)[number]) => (
+                  <MenuItem key={c.id} value={c.id}>
+                    {c.full_name}
+                  </MenuItem>
+                )
+              )}
+            </Select>
+          </FormControl>
+          <TextField
+            className="w-full"
+            label="Номер маршрута"
+            required
+            value={editRouteData.route_number || ""}
             onChange={(e) =>
               routeStore.setEditRouteData({
-                carrier_id: Number(e.target.value),
-                carrier:
-                  carrierStore.carriers.data.find(
-                    (c) => c.id === Number(e.target.value)
-                  )?.full_name || "",
+                route_number: e.target.value,
               })
             }
-            disabled={carrierStore.carriers.data.length === 0}
-          >
-            <MenuItem value="">Не выбрано</MenuItem>
-            {carrierStore.carriers.data.map(
-              (c: (typeof carrierStore.carriers.data)[number]) => (
-                <MenuItem key={c.id} value={c.id}>
-                  {c.full_name}
-                </MenuItem>
-              )
-            )}
-          </Select>
-        </FormControl>
-        <TextField
-          className="w-full"
-          label="Номер маршрута"
-          required
-          value={editRouteData.route_number || ""}
-          onChange={(e) =>
-            routeStore.setEditRouteData({
-              route_number: e.target.value,
-            })
-          }
-        />
-        <TextField
-          className="w-full"
-          label="Координаты маршрута"
-          multiline
-          minRows={3}
-          value={editRouteData.path.map((p) => p.join(" ")).join("\n") || ""}
-          onChange={(e) =>
-            routeStore.setEditRouteData({
-              path: e.target.value
-                .split("\n")
-                .map((line) => line.split(" ").map(Number)),
-            })
-          }
-        />
-        <TextField
-          className="w-full"
-          label="Номер маршрута в Говорящем Городе"
-          required
-          value={editRouteData.route_sys_number || ""}
-          onChange={(e) =>
-            routeStore.setEditRouteData({
-              route_sys_number: e.target.value,
-            })
-          }
-        />
-        <FormControl fullWidth required>
-          <InputLabel>Обращение губернатора</InputLabel>
-          <Select
-            value={editRouteData.governor_appeal || ""}
-            label="Обращение губернатора"
+          />
+          <TextField
+            className="w-full"
+            label="Координаты маршрута"
+            multiline
+            minRows={3}
+            value={editRouteData.path.map((p) => p.join(" ")).join("\n") || ""}
             onChange={(e) =>
               routeStore.setEditRouteData({
-                governor_appeal: Number(e.target.value),
+                path: e.target.value
+                  .split("\n")
+                  .map((line) => line.split(" ").map(Number)),
               })
             }
-            disabled={articlesStore.articleList.ru.data.length === 0}
-          >
-            <MenuItem value="">Не выбрано</MenuItem>
-            {articlesStore.articleList.ru.data.map(
-              (a: (typeof articlesStore.articleList.ru.data)[number]) => (
-                <MenuItem key={a.id} value={a.id}>
-                  {a.heading}
-                </MenuItem>
-              )
-            )}
-          </Select>
-        </FormControl>
-        <FormControl fullWidth required>
-          <InputLabel>Прямой/обратный маршрут</InputLabel>
-          <Select
-            value={editRouteData.route_direction ? "forward" : "backward"}
-            label="Прямой/обратный маршрут"
+          />
+          <TextField
+            className="w-full"
+            label="Номер маршрута в Говорящем Городе"
+            required
+            value={editRouteData.route_sys_number || ""}
             onChange={(e) =>
               routeStore.setEditRouteData({
-                route_direction: e.target.value === "forward",
+                route_sys_number: e.target.value,
               })
             }
+          />
+          <FormControl fullWidth required>
+            <InputLabel>Обращение губернатора</InputLabel>
+            <Select
+              value={editRouteData.governor_appeal || ""}
+              label="Обращение губернатора"
+              onChange={(e) =>
+                routeStore.setEditRouteData({
+                  governor_appeal: Number(e.target.value),
+                })
+              }
+              disabled={articlesStore.articleList.ru.data.length === 0}
+            >
+              <MenuItem value="">Не выбрано</MenuItem>
+              {articlesStore.articleList.ru.data.map(
+                (a: (typeof articlesStore.articleList.ru.data)[number]) => (
+                  <MenuItem key={a.id} value={a.id}>
+                    {a.heading}
+                  </MenuItem>
+                )
+              )}
+            </Select>
+          </FormControl>
+          <FormControl fullWidth required>
+            <InputLabel>Прямой/обратный маршрут</InputLabel>
+            <Select
+              value={editRouteData.route_direction ? "forward" : "backward"}
+              label="Прямой/обратный маршрут"
+              onChange={(e) =>
+                routeStore.setEditRouteData({
+                  route_direction: e.target.value === "forward",
+                })
+              }
+            >
+              <MenuItem value="forward">Прямой</MenuItem>
+              <MenuItem value="backward">Обратный</MenuItem>
+            </Select>
+          </FormControl>
+          <TextField
+            className="w-full"
+            label="Масштаб (мин)"
+            value={editRouteData.scale_min || ""}
+            onChange={(e) =>
+              routeStore.setEditRouteData({
+                scale_min: Number(e.target.value),
+              })
+            }
+          />
+          <TextField
+            className="w-full"
+            label="Масштаб (макс)"
+            value={editRouteData.scale_max || ""}
+            onChange={(e) =>
+              routeStore.setEditRouteData({
+                scale_max: Number(e.target.value),
+              })
+            }
+          />
+          <TextField
+            className="w-full"
+            label="Поворот"
+            value={editRouteData.rotate || ""}
+            onChange={(e) =>
+              routeStore.setEditRouteData({
+                rotate: Number(e.target.value),
+              })
+            }
+          />
+          <TextField
+            className="w-full"
+            label="Центр. широта"
+            value={editRouteData.center_latitude || ""}
+            onChange={(e) =>
+              routeStore.setEditRouteData({
+                center_latitude: Number(e.target.value),
+              })
+            }
+          />
+          <TextField
+            className="w-full"
+            label="Центр. долгота"
+            value={editRouteData.center_longitude || ""}
+            onChange={(e) =>
+              routeStore.setEditRouteData({
+                center_longitude: Number(e.target.value),
+              })
+            }
+          />
+        </Box>
+        <div className="flex w-full justify-end">
+          <Button
+            variant="contained"
+            color="primary"
+            className="w-min flex gap-2 items-center"
+            startIcon={<Save size={20} />}
+            onClick={handleSave}
+            disabled={isLoading}
           >
-            <MenuItem value="forward">Прямой</MenuItem>
-            <MenuItem value="backward">Обратный</MenuItem>
-          </Select>
-        </FormControl>
-        <TextField
-          className="w-full"
-          label="Масштаб (мин)"
-          value={editRouteData.scale_min || ""}
-          onChange={(e) =>
-            routeStore.setEditRouteData({
-              scale_min: Number(e.target.value),
-            })
-          }
-        />
-        <TextField
-          className="w-full"
-          label="Масштаб (макс)"
-          value={editRouteData.scale_max || ""}
-          onChange={(e) =>
-            routeStore.setEditRouteData({
-              scale_max: Number(e.target.value),
-            })
-          }
-        />
-        <TextField
-          className="w-full"
-          label="Поворот"
-          value={editRouteData.rotate || ""}
-          onChange={(e) =>
-            routeStore.setEditRouteData({
-              rotate: Number(e.target.value),
-            })
-          }
-        />
-        <TextField
-          className="w-full"
-          label="Центр. широта"
-          value={editRouteData.center_latitude || ""}
-          onChange={(e) =>
-            routeStore.setEditRouteData({
-              center_latitude: Number(e.target.value),
-            })
-          }
-        />
-        <TextField
-          className="w-full"
-          label="Центр. долгота"
-          value={editRouteData.center_longitude || ""}
-          onChange={(e) =>
-            routeStore.setEditRouteData({
-              center_longitude: Number(e.target.value),
-            })
-          }
-        />
-      </Box>
-      <div className="flex w-full justify-end">
-        <Button
-          variant="contained"
-          color="primary"
-          className="w-min flex gap-2 items-center"
-          startIcon={<Save size={20} />}
-          onClick={handleSave}
-          disabled={isLoading}
-        >
-          Сохранить
-        </Button>
+            Сохранить
+          </Button>
+        </div>
       </div>
     </Paper>
   );

src/pages/Route/RouteListPage/index.tsx

@@ -2,15 +2,18 @@ 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 { Map, Pencil, Trash2 } from "lucide-react";
+import { Map, Pencil, Trash2, Minus } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { CreateButton, DeleteModal } from "@widgets";
+import { 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 [isBulkDeleteModalOpen, setIsBulkDeleteModalOpen] = useState(false);
+  const [rowId, setRowId] = useState<number | null>(null);
+  const [ids, setIds] = useState<number[]>([]);
   const { language } = languageStore;
 
   useEffect(() => {
@@ -22,11 +25,33 @@ export const RouteListPage = observer(() => {
       field: "carrier",
       headerName: "Перевозчик",
       width: 250,
+      renderCell: (params: GridRenderCellParams) => {
+        return (
+          <div className="w-full h-full flex items-center">
+            {params.value ? (
+              params.value
+            ) : (
+              <Minus size={20} className="text-red-500" />
+            )}
+          </div>
+        );
+      },
     },
     {
       field: "route_number",
       headerName: "Номер маршрута",
       flex: 1,
+      renderCell: (params: GridRenderCellParams) => {
+        return (
+          <div className="w-full h-full flex items-center">
+            {params.value ? (
+              params.value
+            ) : (
+              <Minus size={20} className="text-red-500" />
+            )}
+          </div>
+        );
+      },
     },
     {
       field: "route_direction",
@@ -87,15 +112,35 @@ export const RouteListPage = observer(() => {
 
   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>
+
+        <div
+          className="flex justify-end mb-5 duration-300"
+          style={{ opacity: ids.length > 0 ? 1 : 0 }}
+        >
+          <button
+            className="px-4 py-2 bg-red-500 text-white rounded flex gap-2 items-center"
+            onClick={() => setIsBulkDeleteModalOpen(true)}
+          >
+            <Trash2 size={20} className="text-white" /> Удалить выбранные (
+            {ids.length})
+          </button>
+        </div>
+
         <DataGrid
           rows={rows}
           columns={columns}
           hideFooterPagination
+          checkboxSelection
+          onRowSelectionModelChange={(newSelection) => {
+            setIds(Array.from(newSelection.ids) as number[]);
+          }}
           hideFooter
         />
       </div>
@@ -114,6 +159,19 @@ export const RouteListPage = observer(() => {
           setRowId(null);
         }}
       />
+
+      <DeleteModal
+        open={isBulkDeleteModalOpen}
+        onDelete={async () => {
+          await Promise.all(ids.map((id) => deleteRoute(id)));
+          getRoutes();
+          setIsBulkDeleteModalOpen(false);
+          setIds([]);
+        }}
+        onCancel={() => {
+          setIsBulkDeleteModalOpen(false);
+        }}
+      />
     </>
   );
 });