feat: role system

src/pages/Country/CountryListPage/index.tsx

@@ -1,6 +1,6 @@
 import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
 import { ruRU } from "@mui/x-data-grid/locales";
-import { countryStore, languageStore } from "@shared";
+import { authStore, countryStore, languageStore } from "@shared";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Trash2, Minus } from "lucide-react";
@@ -21,6 +21,7 @@ export const CountryListPage = observer(() => {
     pageSize: 50,
   });
   const { language } = languageStore;
+  const canWriteCountries = authStore.canWrite("countries");
 
   useEffect(() => {
     const fetchCountries = async () => {
@@ -48,37 +49,27 @@ export const CountryListPage = observer(() => {
         );
       },
     },
-    {
+    ...(authStore.canWrite("countries") ? [{
       field: "actions",
       headerName: "Действия",
-      align: "center",
-      headerAlign: "center",
+      align: "center" as const,
+      headerAlign: "center" as const,
       width: 200,
       sortable: false,
-      renderCell: (params: GridRenderCellParams) => {
-        return (
-          <div className="flex h-full gap-7 justify-center items-center">
-            {/* <button
-              onClick={() => navigate(`/country/${params.row.code}/edit`)}
-            >
-              <Pencil size={20} className="text-blue-500" />
-            </button> */}
-            {/* <button onClick={() => navigate(`/country/${params.row.code}`)}>
-              <Eye size={20} className="text-green-500" />
-            </button> */}
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                setIsDeleteModalOpen(true);
-                setRowId(params.row.code);
-              }}
-            >
-              <Trash2 size={20} className="text-red-500" />
-            </button>
-          </div>
-        );
-      },
-    },
+      renderCell: (params: GridRenderCellParams) => (
+        <div className="flex h-full gap-7 justify-center items-center">
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsDeleteModalOpen(true);
+              setRowId(params.row.code);
+            }}
+          >
+            <Trash2 size={20} className="text-red-500" />
+          </button>
+        </div>
+      ),
+    }] : []),
   ];
 
   const rows = countries[language]?.data.map((country) => ({
@@ -94,7 +85,9 @@ export const CountryListPage = observer(() => {
       <div className="w-full">
         <div className="flex justify-between items-center mb-10">
           <h1 className="text-2xl">Страны</h1>
-          <CreateButton label="Добавить страну" path="/country/add" />
+          {canWriteCountries && (
+            <CreateButton label="Добавить страну" path="/country/add" />
+          )}
         </div>
 
         {ids.length > 0 && (
@@ -112,7 +105,7 @@ export const CountryListPage = observer(() => {
         <DataGrid
           rows={rows || []}
           columns={columns}
-          checkboxSelection
+          checkboxSelection={authStore.canWrite("countries")}
           disableRowSelectionExcludeModel
           loading={isLoading}
           paginationModel={paginationModel}