upd: role akses

src/frontend/routes/users.tsx

@@ -1,48 +1,47 @@
+import { DashboardLayout } from '@/frontend/components/DashboardLayout'
+import { StatsCard } from '@/frontend/components/StatsCard'
 import {
   ActionIcon,
+  Avatar,
   Badge,
   Button,
   Card,
   Container,
+  Divider,
   Group,
+  List,
+  Modal,
+  Pagination,
+  Paper,
+  PasswordInput,
+  Select,
+  SimpleGrid,
   Stack,
   Table,
+  Tabs,
   Text,
   TextInput,
-  Title,
-  Paper,
-  Tabs,
-  Avatar,
-  SimpleGrid,
   ThemeIcon,
-  List,
-  Divider,
-  Pagination,
-  Modal,
-  Select,
-  PasswordInput,
+  Title,
 } from '@mantine/core'
-import { createFileRoute } from '@tanstack/react-router'
-import { useState, useEffect } from 'react'
 import { useDisclosure } from '@mantine/hooks'
 import { notifications } from '@mantine/notifications'
-import { 
-  TbPlus, 
-  TbSearch, 
-  TbPencil, 
-  TbTrash, 
-  TbUserCheck, 
-  TbShieldCheck,
+import { createFileRoute } from '@tanstack/react-router'
+import { useEffect, useState } from 'react'
+import {
   TbAccessPoint,
   TbCircleCheck,
   TbCircleX,
-  TbClock,
-  TbApps,
+  TbPencil,
+  TbPlus,
+  TbSearch,
+  TbShieldCheck,
+  TbTrash,
+  TbUserCheck
 } from 'react-icons/tb'
-import { DashboardLayout } from '@/frontend/components/DashboardLayout'
-import { StatsCard } from '@/frontend/components/StatsCard'
 import useSWR from 'swr'
 import { API_URLS } from '../config/api'
+import { useSession } from '../hooks/useAuth'
 
 export const Route = createFileRoute('/users')({
   component: UsersPage,
@@ -59,13 +58,13 @@ const getRoleColor = (role: string) => {
 }
 
 const roles = [
-  { 
-    name: 'DEVELOPER', 
+  {
+    name: 'DEVELOPER',
     color: 'red',
     permissions: ['Full Access', 'Error Feedback', 'Error Management', 'App Version Management', 'User Management']
   },
-  { 
-    name: 'ADMIN', 
+  {
+    name: 'ADMIN',
     color: 'orange',
     permissions: ['View All Apps', 'View Logs', 'Report Errors']
   },
@@ -75,6 +74,8 @@ function UsersPage() {
   const [search, setSearch] = useState('')
   const [debouncedSearch, setDebouncedSearch] = useState('')
   const [page, setPage] = useState(1)
+  const { data: session } = useSession()
+  const isDeveloper = session?.user?.role === 'DEVELOPER'
 
   useEffect(() => {
     const timer = setTimeout(() => setDebouncedSearch(search), 300)
@@ -244,15 +245,17 @@ function UsersPage() {
                       setPage(1)
                     }}
                   />
-                  <Button
-                    variant="gradient"
-                    gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
-                    leftSection={<TbPlus size={18} />}
-                    radius="md"
-                    onClick={openCreate}
-                  >
-                    Add New User
-                  </Button>
+                  {isDeveloper && (
+                    <Button
+                      variant="gradient"
+                      gradient={{ from: '#2563EB', to: '#7C3AED', deg: 135 }}
+                      leftSection={<TbPlus size={18} />}
+                      radius="md"
+                      onClick={openCreate}
+                    >
+                      Add New User
+                    </Button>
+                  )}
                 </Group>
 
                 <Paper withBorder radius="2xl" className="glass" p={0} style={{ overflow: 'hidden' }}>
@@ -302,12 +305,12 @@ function UsersPage() {
                             </Table.Td>
                             <Table.Td>
                               <Group gap="xs">
-                                  <ActionIcon variant="light" size="sm" color="blue" onClick={() => handleOpenEdit(user)}>
-                                    <TbPencil size={14} />
-                                  </ActionIcon>
-                                  <ActionIcon variant="light" size="sm" color="red" onClick={() => handleOpenDelete(user)}>
-                                    <TbTrash size={14} />
-                                  </ActionIcon>
+                                <ActionIcon disabled={!isDeveloper} variant="light" size="sm" color="blue" onClick={() => handleOpenEdit(user)}>
+                                  <TbPencil size={14} />
+                                </ActionIcon>
+                                <ActionIcon disabled={!isDeveloper} variant="light" size="sm" color="red" onClick={() => handleOpenDelete(user)}>
+                                  <TbTrash size={14} />
+                                </ActionIcon>
                               </Group>
                             </Table.Td>
                           </Table.Tr>
@@ -340,14 +343,14 @@ function UsersPage() {
                           <TbShieldCheck size={28} />
                         </ThemeIcon>
                       </Group>
-                      
+
                       <Stack gap={4}>
                         <Title order={4}>{role.name.replace('_', ' ')}</Title>
                         <Text size="sm" c="dimmed">Core role for secure app management.</Text>
                       </Stack>
 
                       <Divider />
-                      
+
                       <Text size="xs" fw={700} c="dimmed" style={{ textTransform: 'uppercase' }}>Key Permissions</Text>
                       <List
                         spacing="xs"