Don't have an account?{' '}
diff --git a/src/components/PermissionGate.tsx b/src/components/PermissionGate.tsx
new file mode 100644
index 0000000..5569bf3
--- /dev/null
+++ b/src/components/PermissionGate.tsx
@@ -0,0 +1,50 @@
+import { ReactNode } from 'react'
+import { usePermissions } from '@/hooks/use-permissions'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { ShieldSlash } from '@phosphor-icons/react'
+
+interface PermissionGateProps {
+ permission?: string
+ permissions?: string[]
+ requireAll?: boolean
+ fallback?: ReactNode
+ children: ReactNode
+}
+
+export function PermissionGate({
+ permission,
+ permissions = [],
+ requireAll = false,
+ fallback,
+ children
+}: PermissionGateProps) {
+ const { hasPermission, hasAnyPermission, hasAllPermissions } = usePermissions()
+
+ const hasAccess = (() => {
+ if (permission) {
+ return hasPermission(permission)
+ }
+ if (permissions.length > 0) {
+ return requireAll
+ ? hasAllPermissions(permissions)
+ : hasAnyPermission(permissions)
+ }
+ return true
+ })()
+
+ if (!hasAccess) {
+ if (fallback) {
+ return <>{fallback}
+ }
+ return (
+
+
+
+ You don't have permission to access this content
+
+
+ )
+ }
+
+ return <>{children}
+}
diff --git a/src/components/ViewRouter.tsx b/src/components/ViewRouter.tsx
index cd7d2fe..3c1ea0f 100644
--- a/src/components/ViewRouter.tsx
+++ b/src/components/ViewRouter.tsx
@@ -42,6 +42,7 @@ const BusinessLogicDemo = lazy(() => import('@/components/BusinessLogicDemo').th
const DataAdminView = lazy(() => import('@/components/views/data-admin-view').then(m => ({ default: m.DataAdminView })))
const TranslationDemo = lazy(() => import('@/components/TranslationDemo').then(m => ({ default: m.TranslationDemo })))
const ProfileView = lazy(() => import('@/components/views/profile-view').then(m => ({ default: m.ProfileView })))
+const RolesPermissionsView = lazy(() => import('@/components/views/roles-permissions-view').then(m => ({ default: m.RolesPermissionsView })))
interface ViewRouterProps {
currentView: View
@@ -258,6 +259,9 @@ export function ViewRouter({
case 'profile':
return
+ case 'roles-permissions':
+ return
+
default:
return
}
diff --git a/src/components/nav/nav-sections.tsx b/src/components/nav/nav-sections.tsx
index d63c33f..34d1d00 100644
--- a/src/components/nav/nav-sections.tsx
+++ b/src/components/nav/nav-sections.tsx
@@ -16,7 +16,8 @@ import {
FileText,
UserPlus,
CalendarBlank,
- Translate
+ Translate,
+ Shield
} from '@phosphor-icons/react'
import { NavItem } from './NavItem'
import { NavGroup } from './NavGroup'
@@ -172,6 +173,13 @@ export function ConfigurationNav({ currentView, setCurrentView, expandedGroups,
onClick={() => setCurrentView('contract-validation')}
view="contract-validation"
/>
+ }
+ label="Roles & Permissions"
+ active={currentView === 'roles-permissions'}
+ onClick={() => setCurrentView('roles-permissions')}
+ view="roles-permissions"
+ />
)
}
diff --git a/src/components/views/roles-permissions-view.tsx b/src/components/views/roles-permissions-view.tsx
new file mode 100644
index 0000000..897cfc9
--- /dev/null
+++ b/src/components/views/roles-permissions-view.tsx
@@ -0,0 +1,496 @@
+import { useState } from 'react'
+import { PageHeader } from '@/components/ui/page-header'
+import { Card } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Input } from '@/components/ui/input'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { usePermissions, Role, Permission } from '@/hooks/use-permissions'
+import { Plus, Shield, Users, Key, MagnifyingGlass, Pencil, Copy } from '@phosphor-icons/react'
+import { Grid } from '@/components/ui/grid'
+import { useAppSelector } from '@/store/hooks'
+
+interface RoleWithUsers extends Role {
+ userCount?: number
+}
+
+export function RolesPermissionsView() {
+ const { roles, permissions, hasPermission } = usePermissions()
+ const currentUser = useAppSelector(state => state.auth.user)
+
+ const [selectedRole, setSelectedRole] = useState(null)
+ const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
+ const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
+ const [searchQuery, setSearchQuery] = useState('')
+ const [filterModule, setFilterModule] = useState('all')
+
+ const canManageRoles = hasPermission('settings.edit') || hasPermission('users.edit')
+
+ const rolesWithUsers: RoleWithUsers[] = roles.map(role => ({
+ ...role,
+ userCount: Math.floor(Math.random() * 50)
+ }))
+
+ const filteredRoles = rolesWithUsers.filter(role =>
+ role.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+ role.description.toLowerCase().includes(searchQuery.toLowerCase())
+ )
+
+ const modules = Array.from(new Set(permissions.map(p => p.module)))
+
+ const filteredPermissions = filterModule === 'all'
+ ? permissions
+ : permissions.filter(p => p.module === filterModule)
+
+ const getColorClass = (color: string) => {
+ const colorMap: Record = {
+ primary: 'bg-primary text-primary-foreground',
+ secondary: 'bg-secondary text-secondary-foreground',
+ accent: 'bg-accent text-accent-foreground',
+ success: 'bg-success text-success-foreground',
+ warning: 'bg-warning text-warning-foreground',
+ destructive: 'bg-destructive text-destructive-foreground',
+ info: 'bg-info text-info-foreground',
+ muted: 'bg-muted text-muted-foreground',
+ }
+ return colorMap[color] || colorMap.muted
+ }
+
+ return (
+
+
setIsCreateDialogOpen(true)}>
+
+ Create Role
+
+ ) : undefined
+ }
+ />
+
+
+
+
+
+ Roles
+
+
+
+ Permissions
+
+
+
+
+
+
+
+ setSearchQuery(e.target.value)}
+ className="pl-10"
+ />
+
+
+ {filteredRoles.map((role) => (
+
+
+
+
+
{role.name}
+
+ {role.id}
+
+
+
{role.description}
+
+
+
+ {role.userCount} users
+ •
+
+ {role.permissions.length} permissions
+
+
+
+
+ {canManageRoles && (
+ <>
+
+
+
+ )}
+
+ ))}
+
+
+
+ setSearchQuery(e.target.value)}
+ className="pl-10"
+ />
+
+
+
+ {modules.map(module => {
+ const modulePermissions = filteredPermissions.filter(p => p.module === module)
+ if (modulePermissions.length === 0) return null
+
+ return (
+
+
+ {module}
+
+
+ {modulePermissions.map(permission => (
+
+
+
+
+ {permission.id}
+
+ {permission.name}
+
+
+ {permission.description}
+
+
+
+ ))}
+
+
+ )
+ })}
+