import AppLayout from '@/layouts/app-layout'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Head } from '@inertiajs/react'; import { Shield, Users, CheckCircle2 } from 'lucide-react'; import type { Role, BreadcrumbItem } from '@/types'; import Heading from '@/components/heading'; import { PageHelp } from '@/components/page-help'; import { dashboard } from '@/routes'; interface Props { roles: Array; } const roleColors = { 'Admin': 'bg-red-100 text-red-800 border-red-200', 'Customer': 'bg-blue-100 text-blue-800 border-blue-200', 'Agent': 'bg-green-100 text-green-800 border-green-200', } as const; const roleDescriptions = { 'Admin': 'Full system access with complete control over all features, users, and settings.', 'Customer': 'Standard user with access to their own campaigns, contacts, and call management.', 'Agent': 'Limited user working under a Customer with delegated permissions for specific tasks.', } as const; export default function RolesIndex({ roles }: Props) { const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: dashboard().url }, { title: 'Roles & Permissions', href: '/roles' }, ]; const helpSections = [ { title: 'Role System Overview', content: 'The system uses a 3-tier role hierarchy (Admin, Customer, Agent) with granular permission control across 8 modules: Campaigns, Contacts, Calls, Analytics, Scripts, Audio Files, Users, and Settings.', }, { title: 'Admin Role', content: 'Full system access with complete control over all features, users, and settings. Admins can manage all resources and configure the entire system.', }, { title: 'Customer Role', content: 'Standard user with access to their own campaigns, contacts, and call management. Customers can create campaigns and manage their own data.', }, { title: 'Agent Role', content: 'Limited user working under a Customer with delegated permissions for specific tasks. Agents have restricted access based on assigned permissions.', }, { title: 'Permissions', content: 'Each role has a specific set of permissions that control access to features. Permissions are organized by module (e.g., campaign.create, contact.view).', }, ]; return (
{/* Header */}
{/* Info Card */} About the Role System

This system uses a 3-tier role hierarchy with granular permission control. Roles define what users can do in the system, while permissions provide fine-grained access control across 8 different modules: Campaigns, Contacts, Calls, Analytics, Scripts, Audio Files, Users, and Settings.

{/* Roles Grid */}
{roles.map((role) => (
{role.name} Level {role.level}
{roleDescriptions[role.name as keyof typeof roleDescriptions] || role.description}
{/* Stats */}

Permissions

{role.permissions_count}

Users

{role.users_count}

{/* Permission Modules */} {role.permissions && role.permissions.length > 0 && (

Permission Modules:

{Array.from(new Set(role.permissions.map(p => p.module))).map((module) => ( {module} ))}
)} {/* Key Permissions */} {role.permissions && role.permissions.length > 0 && (

Sample Permissions:

    {role.permissions.slice(0, 4).map((permission) => (
  • {permission.name}
    • ))} {role.permissions.length > 4 && (
  • + {role.permissions.length - 4} more permissions
    • )}
)}
))}
{/* Permission Matrix Info */} Permission Structure Permissions are organized into modules with specific actions

Campaigns

  • • View campaigns
  • • Create campaigns
  • • Edit campaigns
  • • Delete campaigns
  • • Launch/Control

Contacts

  • • View contacts
  • • Add contacts
  • • Edit contacts
  • • Delete contacts
  • • Import/Export

Calls

  • • View call logs
  • • Initiate calls
  • • End calls
  • • View recordings
  • • Download recordings

Analytics

  • • View reports
  • • Export reports
  • • View metrics
  • • View dashboards
  • • Compare data
 {/* Hierarchy Info */} Role Hierarchy
Level 1 Admin → Complete system access
Level 2 Customer → Owns data and can manage agents
Level 3 Agent → Works under Customer with delegated permissions
); }