feat: role system

src/pages/Station/StationListPage/index.tsx

@@ -1,14 +1,14 @@
 import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
 import { ruRU } from "@mui/x-data-grid/locales";
 import {
+  authStore,
   languageStore,
   stationsStore,
   selectedCityStore,
-  cityStore,
 } from "@shared";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { Eye, Pencil, Trash2, Minus, Route } from "lucide-react";
+import { Pencil, Trash2, Minus, Route } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import {
   CreateButton,
@@ -35,11 +35,11 @@ export const StationListPage = observer(() => {
     pageSize: 50,
   });
   const { language } = languageStore;
+  const canWriteStations = authStore.canWrite("stations");
 
   useEffect(() => {
     const fetchStations = async () => {
       setIsLoading(true);
-      await cityStore.getCities(language);
       await getStationList();
       setIsLoading(false);
     };
@@ -83,36 +83,38 @@ export const StationListPage = observer(() => {
       field: "actions",
       headerName: "Действия",
       width: 200,
-      align: "center",
-      headerAlign: "center",
+      align: "center" as const,
+      headerAlign: "center" as const,
       sortable: false,
-
       renderCell: (params: GridRenderCellParams) => {
         return (
           <div className="flex h-full gap-7 justify-center items-center">
-            <button onClick={() => navigate(`/station/${params.row.id}/edit`)}>
-              <Pencil size={20} className="text-blue-500" />
-            </button>
-            <button onClick={() => navigate(`/station/${params.row.id}`)}>
-              <Eye size={20} className="text-green-500" />
-            </button>
-            <button
-              onClick={() => {
-                setSelectedStationId(params.row.id);
-                setIsTransfersModalOpen(true);
-              }}
-              title="Редактировать пересадки"
-            >
-              <Route size={20} className="text-purple-500" />
-            </button>
-            <button
-              onClick={() => {
-                setIsDeleteModalOpen(true);
-                setRowId(params.row.id);
-              }}
-            >
-              <Trash2 size={20} className="text-red-500" />
-            </button>
+            {canWriteStations && (
+              <button onClick={() => navigate(`/station/${params.row.id}/edit`)}>
+                <Pencil size={20} className="text-blue-500" />
+              </button>
+            )}
+            {canWriteStations && (
+              <button
+                onClick={() => {
+                  setSelectedStationId(params.row.id);
+                  setIsTransfersModalOpen(true);
+                }}
+                title="Редактировать пересадки"
+              >
+                <Route size={20} className="text-purple-500" />
+              </button>
+            )}
+            {canWriteStations && (
+              <button
+                onClick={() => {
+                  setIsDeleteModalOpen(true);
+                  setRowId(params.row.id);
+                }}
+              >
+                <Trash2 size={20} className="text-red-500" />
+              </button>
+            )}
           </div>
         );
       },
@@ -142,7 +144,9 @@ export const StationListPage = observer(() => {
       <div className="w-full">
         <div className="flex justify-between items-center mb-10">
           <h1 className="text-2xl">Станции</h1>
-          <CreateButton label="Создать остановки" path="/station/create" />
+          {canWriteStations && (
+            <CreateButton label="Создать остановки" path="/station/create" />
+          )}
         </div>
 
         <div className="flex justify-end mb-5 duration-300">