add role badge into Header component

src/components/AdminOnly.tsx

@@ -0,0 +1,12 @@
+import {usePermissions} from '@refinedev/core'
+import {PropsWithChildren} from 'react'
+
+export const AdminOnly: React.FC<PropsWithChildren> = ({children}) => {
+  const {data: permissions} = usePermissions<string[]>() // добавляем generic тип
+
+  if (!permissions?.includes('admin')) {
+    return null
+  }
+
+  return <>{children}</>
+}

src/components/CustomDataGrid.tsx

@@ -106,7 +106,7 @@ export const CustomDataGrid = ({hasCoordinates = false, columns = [], resource,
             </Button>
           )}
 
-          {showDevData && availableDevFields.length > 0 && (
+          {(import.meta.env.DEV || showDevData) && availableDevFields.length > 0 && (
             <Button variant="contained" onClick={toggleDevData}>
               {showDevData ? 'Скрыть служебные данные' : 'Показать служебные данные'}
             </Button>

src/components/header/index.tsx

@@ -6,7 +6,7 @@ import IconButton from '@mui/material/IconButton'
 import Stack from '@mui/material/Stack'
 import Toolbar from '@mui/material/Toolbar'
 import Typography from '@mui/material/Typography'
-import {useGetIdentity} from '@refinedev/core'
+import {useGetIdentity, usePermissions} from '@refinedev/core'
 import {HamburgerMenu, RefineThemedLayoutV2HeaderProps} from '@refinedev/mui'
 import React, {useContext} from 'react'
 import {ColorModeContext} from '../../contexts/color-mode'
@@ -15,12 +15,14 @@ type IUser = {
   id: number
   name: string
   avatar: string
+  is_admin: boolean
 }
 
 export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({sticky = true}) => {
   const {mode, setMode} = useContext(ColorModeContext)
-
   const {data: user} = useGetIdentity<IUser>()
+  const {data: permissions} = usePermissions<string[]>()
+  const isAdmin = permissions?.includes('admin')
 
   return (
     <AppBar position={sticky ? 'sticky' : 'relative'}>
@@ -33,6 +35,9 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({sticky = true
               onClick={() => {
                 setMode()
               }}
+              sx={{
+                marginRight: '2px',
+              }}
             >
               {mode === 'dark' ? <LightModeOutlined /> : <DarkModeOutlined />}
             </IconButton>
@@ -40,6 +45,7 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({sticky = true
             {(user?.avatar || user?.name) && (
               <Stack direction="row" gap="16px" alignItems="center" justifyContent="center">
                 {user?.name && (
+                  <Stack direction="column" alignItems="start" gap="0px">
                     <Typography
                       sx={{
                         display: {
@@ -51,6 +57,24 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({sticky = true
                     >
                       {user?.name}
                     </Typography>
+
+                    <Typography
+                      sx={{
+                        display: {
+                          xs: 'none',
+                          sm: 'inline-block',
+                        },
+                        backgroundColor: 'primary.main',
+                        color: 'text.secondary',
+                        padding: '1px 4px',
+                        borderRadius: 1,
+                        fontSize: '0.6rem',
+                      }}
+                      variant="subtitle2"
+                    >
+                      {isAdmin ? 'Администратор' : 'Пользователь'}
+                    </Typography>
+                  </Stack>
                 )}
                 <Avatar src={user?.avatar} alt={user?.name} />
               </Stack>