feat: role system

src/pages/User/UserListPage/index.tsx

@@ -1,6 +1,6 @@
 import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
 import { ruRU } from "@mui/x-data-grid/locales";
-import { userStore } from "@shared";
+import { authStore, userStore } from "@shared";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Pencil, Trash2, Minus } from "lucide-react";
@@ -20,6 +20,7 @@ export const UserListPage = observer(() => {
     page: 0,
     pageSize: 50,
   });
+  const canWriteUsers = authStore.canWrite("users");
 
   useEffect(() => {
     const fetchUsers = async () => {
@@ -81,44 +82,35 @@ export const UserListPage = observer(() => {
       },
     },
 
-    {
+    ...(canWriteUsers ? [{
       field: "actions",
       headerName: "Действия",
       flex: 1,
-      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>
-              <Pencil
-                size={20}
-                className="text-blue-500"
-                onClick={() => {
-                  navigate(`/user/${params.row.id}/edit`);
-                }}
-              />
-            </button>
-            <button
-              onClick={() => {
-                setIsDeleteModalOpen(true);
-                setRowId(params.row.id);
-              }}
-            >
-              <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={() => navigate(`/user/${params.row.id}/edit`)}>
+            <Pencil size={20} className="text-blue-500" />
+          </button>
+          <button
+            onClick={() => {
+              setIsDeleteModalOpen(true);
+              setRowId(params.row.id);
+            }}
+          >
+            <Trash2 size={20} className="text-red-500" />
+          </button>
+        </div>
+      ),
+    }] : []),
   ];
 
   const rows = users.data?.map((user) => ({
     id: user.id,
     email: user.email,
-    is_admin: user.is_admin,
+    is_admin: user.is_admin || (user.roles ?? []).includes("admin"),
     name: user.name,
   }));
 
@@ -127,7 +119,9 @@ export const UserListPage = observer(() => {
       <div className="w-full">
         <div className="flex justify-between items-center mb-10">
           <h1 className="text-2xl">Пользователи</h1>
-          <CreateButton label="Создать пользователя" path="/user/create" />
+          {canWriteUsers && (
+            <CreateButton label="Создать пользователя" path="/user/create" />
+          )}
         </div>
 
         {ids.length > 0 && (
@@ -145,7 +139,7 @@ export const UserListPage = observer(() => {
         <DataGrid
           rows={rows}
           columns={columns}
-          checkboxSelection
+          checkboxSelection={canWriteUsers}
           disableRowSelectionExcludeModel
           loading={isLoading}
           paginationModel={paginationModel}