From 8527b25ac4d0280544f21a58d5fda28ce0252f9d Mon Sep 17 00:00:00 2001
From: firdausfazil <m.firdausfazil94@gmail.com>
Date: Thu, 29 May 2025 20:17:32 +0800
Subject: [PATCH] initial-rbac

---
 navigation/index.js             |   19 +
 pages/create-user/index.vue     |  386 +++++++++++
 pages/rbac-permission/index.vue | 1147 +++++++++++++++++++++++++++++++
 3 files changed, 1552 insertions(+)
 create mode 100644 pages/create-user/index.vue
 create mode 100644 pages/rbac-permission/index.vue

diff --git a/navigation/index.js b/navigation/index.js
index 9a543d0..f688b46 100644
--- a/navigation/index.js
+++ b/navigation/index.js
@@ -25,6 +25,25 @@ export default [
     ],
     "meta": {}
   },
+  {
+    "header": "RBAC",
+    "description": "",
+    "child": [
+      {
+        "title": "Create User",
+        "path": "/create-user",
+        "icon": "",
+        "child": []
+      },
+      {
+        "title": "Permission",
+        "path": "/rbac-permission",
+        "icon": "",
+        "child": []
+      }
+    ],
+    "meta": {}
+  },
   {
     "header": "Pentadbiran",
     "description": "Urus aplikasi anda",
diff --git a/pages/create-user/index.vue b/pages/create-user/index.vue
new file mode 100644
index 0000000..e6520bf
--- /dev/null
+++ b/pages/create-user/index.vue
@@ -0,0 +1,386 @@
+<script setup>
+definePageMeta({
+  title: "Create User",
+  middleware: ["auth"],
+  requiresAuth: true,
+});
+
+import { ref, reactive } from 'vue'
+
+// Form data
+const formData = reactive({
+  fullName: '',
+  username: '',
+  email: '',
+  phone: '',
+  password: '',
+  confirmPassword: '',
+  status: 'active',
+  mfaEnabled: true,
+  mfaMethod: 'authenticator_app'
+})
+
+// Form validation
+const errors = reactive({})
+const isSubmitting = ref(false)
+
+
+
+// Status options
+const statusOptions = [
+  { value: 'active', label: 'Active' },
+  { value: 'inactive', label: 'Inactive' },
+  { value: 'pending', label: 'Pending' }
+]
+
+// MFA Method options
+const mfaMethodOptions = [
+  { value: 'authenticator_app', label: 'Authenticator App' },
+  { value: 'sms', label: 'SMS' },
+  { value: 'email', label: 'Email' }
+]
+
+// Validation functions
+const validateForm = () => {
+  const newErrors = {}
+  
+  if (!formData.fullName.trim()) {
+    newErrors.fullName = 'Full name is required'
+  }
+  
+  if (!formData.username.trim()) {
+    newErrors.username = 'Username is required'
+  } else if (formData.username.length < 3) {
+    newErrors.username = 'Username must be at least 3 characters'
+  }
+  
+  if (!formData.email.trim()) {
+    newErrors.email = 'Email is required'
+  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+    newErrors.email = 'Please enter a valid email address'
+  }
+  
+  if (!formData.phone.trim()) {
+    newErrors.phone = 'Phone number is required'
+  }
+  
+  if (!formData.password) {
+    newErrors.password = 'Password is required'
+  } else if (formData.password.length < 8) {
+    newErrors.password = 'Password must be at least 8 characters'
+  }
+  
+  if (formData.password !== formData.confirmPassword) {
+    newErrors.confirmPassword = 'Passwords do not match'
+  }
+  
+  Object.assign(errors, newErrors)
+  return Object.keys(newErrors).length === 0
+}
+
+// Clear specific error
+const clearError = (field) => {
+  delete errors[field]
+}
+
+// Submit form
+const submitForm = async () => {
+  if (!validateForm()) {
+    return
+  }
+  
+  isSubmitting.value = true
+  
+  try {
+    // Prepare data for submission (exclude confirmPassword)
+    const { confirmPassword, ...submitData } = formData
+    
+    // Here you would typically make an API call
+    console.log('Submitting user data:', submitData)
+    
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    
+    // Success handling
+    alert('User created successfully!')
+    
+    // Reset form or redirect
+    // resetForm()
+    
+  } catch (error) {
+    console.error('Error creating user:', error)
+    alert('Error creating user. Please try again.')
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+// Reset form
+const resetForm = () => {
+  Object.assign(formData, {
+    fullName: '',
+    username: '',
+    email: '',
+    phone: '',
+    password: '',
+    confirmPassword: '',
+    status: 'active',
+    mfaEnabled: true,
+    mfaMethod: 'authenticator_app'
+  })
+  Object.keys(errors).forEach(key => delete errors[key])
+}
+</script>
+
+<template>
+  <div>
+    <LayoutsBreadcrumb />
+    <rs-card>
+      <template #header>
+        <div class="flex justify-between items-center">
+          <h2 class="text-xl font-semibold">Create User</h2>
+        </div>
+      </template>
+      <template #body>
+        <form @submit.prevent="submitForm" class="space-y-6">
+          <!-- Personal Information Section -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <!-- Full Name -->
+            <div>
+              <label for="fullName" class="block text-sm font-medium text-gray-700 mb-2">
+                Full Name <span class="text-red-500">*</span>
+              </label>
+              <input
+                id="fullName"
+                v-model="formData.fullName"
+                @input="clearError('fullName')"
+                type="text"
+                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                :class="{ 'border-red-500': errors.fullName }"
+                placeholder="Enter full name"
+              />
+              <p v-if="errors.fullName" class="text-red-500 text-sm mt-1">{{ errors.fullName }}</p>
+            </div>
+
+            <!-- Username -->
+            <div>
+              <label for="username" class="block text-sm font-medium text-gray-700 mb-2">
+                Username <span class="text-red-500">*</span>
+              </label>
+              <input
+                id="username"
+                v-model="formData.username"
+                @input="clearError('username')"
+                type="text"
+                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                :class="{ 'border-red-500': errors.username }"
+                placeholder="Enter username"
+              />
+              <p v-if="errors.username" class="text-red-500 text-sm mt-1">{{ errors.username }}</p>
+            </div>
+
+            <!-- Email -->
+            <div>
+              <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
+                Email Address <span class="text-red-500">*</span>
+              </label>
+              <input
+                id="email"
+                v-model="formData.email"
+                @input="clearError('email')"
+                type="email"
+                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                :class="{ 'border-red-500': errors.email }"
+                placeholder="Enter email address"
+              />
+              <p v-if="errors.email" class="text-red-500 text-sm mt-1">{{ errors.email }}</p>
+            </div>
+
+            <!-- Phone -->
+            <div>
+              <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">
+                Phone Number <span class="text-red-500">*</span>
+              </label>
+              <input
+                id="phone"
+                v-model="formData.phone"
+                @input="clearError('phone')"
+                type="tel"
+                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                :class="{ 'border-red-500': errors.phone }"
+                placeholder="+60123456789"
+              />
+              <p v-if="errors.phone" class="text-red-500 text-sm mt-1">{{ errors.phone }}</p>
+            </div>
+          </div>
+
+          <!-- Password Section -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <!-- Password -->
+            <div>
+              <label for="password" class="block text-sm font-medium text-gray-700 mb-2">
+                Password <span class="text-red-500">*</span>
+              </label>
+              <input
+                id="password"
+                v-model="formData.password"
+                @input="clearError('password')"
+                type="password"
+                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                :class="{ 'border-red-500': errors.password }"
+                placeholder="Enter password"
+              />
+              <p v-if="errors.password" class="text-red-500 text-sm mt-1">{{ errors.password }}</p>
+            </div>
+
+            <!-- Confirm Password -->
+            <div>
+              <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-2">
+                Confirm Password <span class="text-red-500">*</span>
+              </label>
+              <input
+                id="confirmPassword"
+                v-model="formData.confirmPassword"
+                @input="clearError('confirmPassword')"
+                type="password"
+                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                :class="{ 'border-red-500': errors.confirmPassword }"
+                placeholder="Confirm password"
+              />
+              <p v-if="errors.confirmPassword" class="text-red-500 text-sm mt-1">{{ errors.confirmPassword }}</p>
+            </div>
+          </div>
+
+          <!-- Role and Status Section -->
+          
+
+          <!-- MFA Section -->
+          <div class="border-t pt-6">
+            <h3 class="text-lg font-medium text-gray-900 mb-4">Multi-Factor Authentication (MFA)</h3>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <!-- MFA Enabled -->
+              <div>
+                <label class="flex items-center">
+                  <input
+                    v-model="formData.mfaEnabled"
+                    type="checkbox"
+                    class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
+                  />
+                  <span class="ml-2 text-sm font-medium text-gray-700">Enable MFA</span>
+                </label>
+                <p class="text-sm text-gray-500 mt-1">Enhance account security with multi-factor authentication</p>
+              </div>
+
+              <!-- MFA Method -->
+              <div v-if="formData.mfaEnabled">
+                <label for="mfaMethod" class="block text-sm font-medium text-gray-700 mb-2">
+                  MFA Method
+                </label>
+                <div class="relative">
+                  <select
+                    id="mfaMethod"
+                    v-model="formData.mfaMethod"
+                    class="appearance-none w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white pr-10 cursor-pointer hover:border-gray-400 transition-colors duration-200"
+                  >
+                    <option v-for="method in mfaMethodOptions" :key="method.value" :value="method.value">
+                      {{ method.label }}
+                    </option>
+                  </select>
+                  <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
+                    <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                    </svg>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Form Actions -->
+          <div class="flex justify-end space-x-4 pt-6 border-t">
+            <button
+              type="button"
+              @click="resetForm"
+              class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              :disabled="isSubmitting"
+            >
+              Reset
+            </button>
+            <button
+              type="submit"
+              class="px-4 py-2 bg-blue-600 border border-transparent rounded-md shadow-sm text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+              :disabled="isSubmitting"
+            >
+              <span v-if="isSubmitting">Creating...</span>
+              <span v-else>Create User</span>
+            </button>
+          </div>
+        </form>
+      </template>
+    </rs-card>
+  </div>
+</template>
+
+<style scoped>
+/* Custom styles for better form appearance */
+.grid {
+  display: grid;
+}
+
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+@media (min-width: 768px) {
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.gap-6 {
+  gap: 1.5rem;
+}
+
+.space-y-6 > * + * {
+  margin-top: 1.5rem;
+}
+
+.border-t {
+  border-top: 1px solid #e5e7eb;
+}
+
+.pt-6 {
+  padding-top: 1.5rem;
+}
+
+/* Focus styles for better accessibility */
+input:focus,
+select:focus {
+  outline: none;
+  ring: 2px;
+  ring-color: #3b82f6;
+  border-color: transparent;
+}
+
+/* Error state styles */
+.border-red-500 {
+  border-color: #ef4444;
+}
+
+.text-red-500 {
+  color: #ef4444;
+}
+
+/* Button styles */
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Checkbox styles */
+input[type="checkbox"] {
+  width: 1rem;
+  height: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/pages/rbac-permission/index.vue b/pages/rbac-permission/index.vue
new file mode 100644
index 0000000..4d4b475
--- /dev/null
+++ b/pages/rbac-permission/index.vue
@@ -0,0 +1,1147 @@
+<script setup>
+definePageMeta({
+  title: "Assign RBAC Permissions",
+  middleware: ["auth"],
+  requiresAuth: true,
+});
+
+import { ref, reactive, onMounted, watch } from 'vue'
+
+// Form data
+const formData = reactive({
+  roleId: '',
+  permissions: [],
+  users: [] // Add users array to store assigned users
+})
+
+// New role form data
+const newRoleForm = reactive({
+  name: '',
+  description: ''
+})
+
+// Modal state
+const isNewRoleModalOpen = ref(false)
+
+// Loading states
+const isLoading = ref(false)
+const isSubmitting = ref(false)
+const isCreatingRole = ref(false)
+
+// Options data
+const roles = ref([])
+const menus = ref([])
+const components = ref([])
+const users = ref([]) // Store available users
+const searchQuery = ref('') // For user search
+const filteredUsers = ref([]) // For filtered user list
+
+// Action options (static)
+const actionOptions = [
+  { value: 'View', label: 'View', icon: 'M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z' },
+  { value: 'Create', label: 'Create', icon: 'M12 6v6m0 0v6m0-6h6m-6 0H6' },
+  { value: 'Edit', label: 'Edit', icon: 'M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z' },
+  { value: 'Delete', label: 'Delete', icon: 'M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16' }
+]
+
+// Component name validation
+const validateComponentName = (value) => {
+  if (value === '*') {
+    return true
+  }
+  // Only allow letters, numbers, underscores, and hyphens
+  const pattern = /^[a-zA-Z0-9_-]+$/
+  return pattern.test(value)
+}
+
+const formatComponentName = (value) => {
+  // Allow asterisk as a special case
+  if (value === '*') {
+    return value
+  }
+  // Remove spaces and special characters except underscore and hyphen
+  return value.replace(/[^a-zA-Z0-9_-]/g, '')
+}
+
+const getComponentDisplayName = (componentName) => {
+  return componentName === '*' ? 'All Components' : componentName
+}
+
+// Form validation
+const errors = reactive({})
+const roleErrors = reactive({
+  name: '',
+  description: ''
+})
+
+// Mock API functions (replace with actual API calls)
+const fetchRoles = async () => {
+  // Simulate API call
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve([
+        { id: '1', name: 'Administrator', description: 'Full system access' },
+        { id: '2', name: 'Manager', description: 'Management level access' },
+        { id: '3', name: 'Editor', description: 'Content editing access' },
+        { id: '4', name: 'Viewer', description: 'Read-only access' }
+      ])
+    }, 500)
+  })
+}
+
+const fetchMenus = async () => {
+  // Simulate API call
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve([
+        { id: '1', name: 'All Menus', path: '/*' },
+        { id: '2', name: 'Dashboard', path: '/dashboard' },
+        { id: '3', name: 'Users', path: '/users' },
+        { id: '4', name: 'Settings', path: '/settings' },
+        { id: '5', name: 'Reports', path: '/reports' },
+        { id: '6', name: 'Analytics', path: '/analytics' }
+      ])
+    }, 300)
+  })
+}
+
+const fetchComponents = async () => {
+  // Simulate API call
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve([
+        { id: '1', name: 'UserList', description: 'User listing component' },
+        { id: '2', name: 'UserForm', description: 'User creation/editing form' },
+        { id: '3', name: 'SettingsPanel', description: 'System settings panel' },
+        { id: '4', name: 'ReportGenerator', description: 'Report generation tool' },
+        { id: '5', name: 'Dashboard', description: 'Main dashboard component' }
+      ])
+    }, 400)
+  })
+}
+
+const fetchUsers = async () => {
+  // Simulate API call - replace with actual API call
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve([
+        { id: '1', name: 'John Doe', email: 'john@example.com', department: 'IT' },
+        { id: '2', name: 'Jane Smith', email: 'jane@example.com', department: 'HR' },
+        { id: '3', name: 'Mike Johnson', email: 'mike@example.com', department: 'Finance' },
+        { id: '4', name: 'Sarah Williams', email: 'sarah@example.com', department: 'Marketing' }
+      ])
+    }, 500)
+  })
+}
+
+const createNewRole = async (roleData) => {
+  // Simulate API call
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const newRole = {
+        id: String(roles.value.length + 1),
+        name: roleData.name,
+        description: roleData.description
+      }
+      resolve(newRole)
+    }, 500)
+  })
+}
+
+// Load initial data
+onMounted(async () => {
+  isLoading.value = true
+  try {
+    const [rolesData, menusData, componentsData, usersData] = await Promise.all([
+      fetchRoles(),
+      fetchMenus(),
+      fetchComponents(),
+      fetchUsers()
+    ])
+    
+    roles.value = rolesData
+    menus.value = menusData
+    components.value = componentsData
+    users.value = usersData
+    filteredUsers.value = usersData
+  } catch (error) {
+    console.error('Error loading data:', error)
+  } finally {
+    isLoading.value = false
+  }
+})
+
+// Add new permission entry
+const addPermission = () => {
+  formData.permissions.push({
+    id: Date.now(), // Temporary ID for tracking
+    menuName: '',
+    componentName: '',
+    actions: [] // Array of selected actions
+  })
+}
+
+// Remove permission entry
+const removePermission = (index) => {
+  formData.permissions.splice(index, 1)
+}
+
+// Clear specific error
+const clearError = (field) => {
+  delete errors[field]
+}
+
+// Validate form
+const validateForm = () => {
+  const newErrors = {}
+  
+  if (!formData.roleId) {
+    newErrors.roleId = 'Please select a role'
+  }
+  
+  if (formData.permissions.length === 0) {
+    newErrors.permissions = 'At least one permission must be assigned'
+  } else {
+    formData.permissions.forEach((permission, index) => {
+      if (!permission.menuName) {
+        newErrors[`permission_${index}_menu`] = 'Menu is required'
+      }
+      if (!permission.componentName) {
+        newErrors[`permission_${index}_component`] = 'Component is required'
+      } else if (!validateComponentName(permission.componentName)) {
+        newErrors[`permission_${index}_component`] = 'Component name can only contain letters, numbers, underscores (_) and hyphens (-)'
+      }
+      if (!permission.actions || permission.actions.length === 0) {
+        newErrors[`permission_${index}_actions`] = 'At least one action must be selected'
+      }
+    })
+  }
+  
+  Object.assign(errors, newErrors)
+  return Object.keys(newErrors).length === 0
+}
+
+// Handle component name input
+const handleComponentNameInput = (permission, index) => {
+  // Format the input value
+  permission.componentName = formatComponentName(permission.componentName)
+  
+  // Clear error if value is valid
+  if (validateComponentName(permission.componentName)) {
+    clearError(`permission_${index}_component`)
+  }
+}
+
+// Submit form
+const submitForm = async () => {
+  if (!validateForm()) {
+    return
+  }
+  
+  isSubmitting.value = true
+  
+  try {
+    // Prepare submission data
+    const submissionData = {
+      roleId: formData.roleId,
+      permissions: formData.permissions.map(p => ({
+        menuName: p.menuName,
+        componentName: p.componentName,
+        action: p.action
+      })),
+      users: formData.users.map(u => u.id)
+    }
+    
+    console.log('Submitting RBAC assignment:', submissionData)
+    
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    
+    alert('RBAC permissions assigned successfully!')
+    resetForm()
+    
+  } catch (error) {
+    console.error('Error assigning permissions:', error)
+    alert('Error assigning permissions. Please try again.')
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+// Reset form
+const resetForm = () => {
+  formData.roleId = ''
+  formData.permissions = []
+  Object.keys(errors).forEach(key => delete errors[key])
+}
+
+// Get role name by ID
+const getRoleName = (roleId) => {
+  const role = roles.value.find(r => r.id === roleId)
+  return role ? role.name : ''
+}
+
+// Get menu name by ID
+const getMenuName = (menuId) => {
+  const menu = menus.value.find(m => m.id === menuId)
+  return menu ? menu.name : ''
+}
+
+// Get component name by ID
+const getComponentName = (componentId) => {
+  const component = components.value.find(c => c.id === componentId)
+  return component ? component.name : ''
+}
+
+// Initialize with one permission entry
+watch(() => formData.permissions.length, (newLength) => {
+  if (newLength === 0) {
+    addPermission()
+  }
+}, { immediate: true })
+
+// User management functions
+const getAvailableUsers = () => {
+  return users.value.filter(user => 
+    !formData.users.some(assignedUser => assignedUser.id === user.id)
+  )
+}
+
+const filterUsers = () => {
+  const query = searchQuery.value.toLowerCase()
+  const availableUsers = getAvailableUsers()
+  
+  filteredUsers.value = availableUsers.filter(user => 
+    user.name.toLowerCase().includes(query) ||
+    user.email.toLowerCase().includes(query) ||
+    user.department.toLowerCase().includes(query)
+  )
+}
+
+const addUser = (user) => {
+  if (!formData.users.some(u => u.id === user.id)) {
+    formData.users.push(user)
+    filterUsers() // Refresh the available users list
+  }
+}
+
+const removeUser = (userId) => {
+  const index = formData.users.findIndex(u => u.id === userId)
+  if (index !== -1) {
+    formData.users.splice(index, 1)
+    filterUsers() // Refresh the available users list
+  }
+}
+
+// Watch for search query changes
+watch(searchQuery, () => {
+  filterUsers()
+})
+
+// Watch for changes in assigned users to update available users list
+watch(() => formData.users.length, () => {
+  filterUsers()
+})
+
+// Role management functions
+const openNewRoleModal = () => {
+  isNewRoleModalOpen.value = true
+  newRoleForm.name = ''
+  newRoleForm.description = ''
+  roleErrors.name = ''
+  roleErrors.description = ''
+}
+
+const closeNewRoleModal = () => {
+  isNewRoleModalOpen.value = false
+}
+
+const validateNewRoleForm = () => {
+  let isValid = true
+  roleErrors.name = ''
+  roleErrors.description = ''
+
+  if (!newRoleForm.name.trim()) {
+    roleErrors.name = 'Role name is required'
+    isValid = false
+  } else if (roles.value.some(role => role.name.toLowerCase() === newRoleForm.name.toLowerCase())) {
+    roleErrors.name = 'Role name already exists'
+    isValid = false
+  }
+
+  if (!newRoleForm.description.trim()) {
+    roleErrors.description = 'Role description is required'
+    isValid = false
+  }
+
+  return isValid
+}
+
+const submitNewRole = async () => {
+  if (!validateNewRoleForm()) {
+    return
+  }
+
+  isCreatingRole.value = true
+  try {
+    const newRole = await createNewRole(newRoleForm)
+    roles.value.push(newRole)
+    formData.roleId = newRole.id // Automatically select the new role
+    closeNewRoleModal()
+  } catch (error) {
+    console.error('Error creating role:', error)
+  } finally {
+    isCreatingRole.value = false
+  }
+}
+</script>
+
+<template>
+  <div>
+    <LayoutsBreadcrumb />
+    <rs-card>
+      <template #header>
+        <div class="flex justify-between items-center">
+          <div>
+            <h2 class="text-xl font-semibold text-gray-900">Assign RBAC Permissions</h2>
+            <p class="text-sm text-gray-600 mt-1">Assign permissions to roles based on menus and components</p>
+          </div>
+        </div>
+      </template>
+      <template #body>
+        <div v-if="isLoading" class="flex justify-center items-center py-12">
+          <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+          <span class="ml-2 text-gray-600">Loading data...</span>
+        </div>
+
+        <form v-else @submit.prevent="submitForm" class="space-y-8">
+          <!-- Role Selection -->
+          <div class="bg-gray-50 p-6 rounded-lg">
+            <h3 class="text-lg font-medium text-gray-900 mb-4">Group Selection</h3>
+            
+            <div class="max-w-md">
+              <label for="roleId" class="block text-sm font-medium text-gray-700 mb-2">
+                Select Group <span class="text-red-500">*</span>
+              </label>
+              <div class="flex space-x-2">
+                <div class="select-container flex-1">
+                  <select
+                    id="roleId"
+                    v-model="formData.roleId"
+                    @change="clearError('roleId')"
+                    class="w-full px-3 py-2.5 border border-gray-300 rounded-md bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    :class="{ 'border-red-500': errors.roleId }"
+                  >
+                    <option value="" disabled>Choose a group</option>
+                    <option v-for="role in roles" :key="role.id" :value="role.id">
+                      {{ role.name }} - {{ role.description }}
+                    </option>
+                  </select>
+                </div>
+                <button
+                  type="button"
+                  @click="openNewRoleModal"
+                  class="px-4 py-2.5 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-colors duration-200"
+                >
+                  <span class="flex items-center">
+                    <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
+                    </svg>
+                    New Role
+                  </span>
+                </button>
+              </div>
+              <p v-if="errors.roleId" class="text-red-500 text-sm mt-1">{{ errors.roleId }}</p>
+            </div>
+          </div>
+
+          <!-- New Role Modal -->
+          <div
+            v-if="isNewRoleModalOpen"
+            class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50"
+            @click.self="closeNewRoleModal"
+          >
+            <div class="bg-white rounded-lg shadow-xl w-full max-w-md p-6">
+              <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-medium text-gray-900">Create New Role</h3>
+                <button
+                  type="button"
+                  @click="closeNewRoleModal"
+                  class="text-gray-400 hover:text-gray-500 focus:outline-none"
+                >
+                  <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                  </svg>
+                </button>
+              </div>
+
+              <form @submit.prevent="submitNewRole" class="space-y-4">
+                <div>
+                  <label for="roleName" class="block text-sm font-medium text-gray-700 mb-1">
+                    Role Name <span class="text-red-500">*</span>
+                  </label>
+                  <input
+                    type="text"
+                    id="roleName"
+                    v-model="newRoleForm.name"
+                    class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    :class="{ 'border-red-500': roleErrors.name }"
+                    placeholder="Enter role name"
+                  />
+                  <p v-if="roleErrors.name" class="text-red-500 text-sm mt-1">{{ roleErrors.name }}</p>
+                </div>
+
+                <div>
+                  <label for="roleDescription" class="block text-sm font-medium text-gray-700 mb-1">
+                    Description <span class="text-red-500">*</span>
+                  </label>
+                  <textarea
+                    id="roleDescription"
+                    v-model="newRoleForm.description"
+                    rows="3"
+                    class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    :class="{ 'border-red-500': roleErrors.description }"
+                    placeholder="Enter role description"
+                  ></textarea>
+                  <p v-if="roleErrors.description" class="text-red-500 text-sm mt-1">{{ roleErrors.description }}</p>
+                </div>
+
+                <div class="flex justify-end space-x-3 mt-6">
+                  <button
+                    type="button"
+                    @click="closeNewRoleModal"
+                    class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                    :disabled="isCreatingRole"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    class="px-4 py-2 bg-blue-600 border border-transparent rounded-md shadow-sm text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                    :disabled="isCreatingRole"
+                  >
+                    <span v-if="isCreatingRole">Creating...</span>
+                    <span v-else>Create Role</span>
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+
+          <!-- Permissions Section -->
+          <div class="bg-white border border-gray-200 rounded-lg p-6">
+            <div class="flex justify-between items-center mb-6">
+              <div>
+                <h3 class="text-lg font-medium text-gray-900">Permissions</h3>
+                <p class="text-sm text-gray-600">Select permissions by menu and component</p>
+              </div>
+              <button
+                type="button"
+                @click="addPermission"
+                class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              >
+                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
+                </svg>
+                Add Permission
+              </button>
+            </div>
+
+            <p v-if="errors.permissions" class="text-red-500 text-sm mb-4">{{ errors.permissions }}</p>
+
+            <!-- Permission Entries -->
+            <div class="space-y-4">
+              <div
+                v-for="(permission, index) in formData.permissions"
+                :key="permission.id"
+                class="border border-gray-200 rounded-lg p-4 bg-gray-50"
+              >
+                <div class="flex justify-between items-start mb-4">
+                  <h4 class="text-md font-medium text-gray-900">Permission #{{ index + 1 }}</h4>
+                  <button
+                    v-if="formData.permissions.length > 1"
+                    type="button"
+                    @click="removePermission(index)"
+                    class="text-red-600 hover:text-red-800 focus:outline-none"
+                  >
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                    </svg>
+                  </button>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <!-- Menu Selection -->
+                  <div>
+                    <label :for="`menu_${index}`" class="block text-sm font-medium text-gray-700 mb-2">
+                      Menu <span class="text-red-500">*</span>
+                    </label>
+                    <div class="select-container">
+                      <select
+                        :id="`menu_${index}`"
+                        v-model="permission.menuName"
+                        @change="clearError(`permission_${index}_menu`)"
+                        class="w-full px-3 py-2.5 border border-gray-300 rounded-md bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        :class="{ 'border-red-500': errors[`permission_${index}_menu`] }"
+                      >
+                        <option value="" disabled>Select menu</option>
+                        <option v-for="menu in menus" :key="menu.id" :value="menu.id">
+                          {{ menu.name }}
+                        </option>
+                      </select>
+                    </div>
+                    <p v-if="errors[`permission_${index}_menu`]" class="text-red-500 text-xs mt-1">
+                      {{ errors[`permission_${index}_menu`] }}
+                    </p>
+                  </div>
+
+                  <!-- Component Input -->
+                  <div>
+                    <label :for="`component_${index}`" class="block text-sm font-medium text-gray-700 mb-2">
+                      Component <span class="text-red-500">*</span>
+                    </label>
+                    <div class="relative">
+                      <input
+                        type="text"
+                        :id="`component_${index}`"
+                        v-model="permission.componentName"
+                        @input="handleComponentNameInput(permission, index)"
+                        placeholder="Enter component name"
+                        class="w-full px-3 py-2.5 border border-gray-300 rounded-md bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
+                        :class="{
+                          'border-red-500 bg-red-50': errors[`permission_${index}_component`],
+                          'border-green-500 bg-green-50': permission.componentName && validateComponentName(permission.componentName)
+                        }"
+                      />
+                      <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+                        <!-- Success Icon -->
+                        <svg
+                          v-if="permission.componentName && validateComponentName(permission.componentName)"
+                          class="h-5 w-5 text-green-500"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M5 13l4 4L19 7"
+                          />
+                        </svg>
+                        <!-- Error Icon -->
+                        <svg
+                          v-if="errors[`permission_${index}_component`]"
+                          class="h-5 w-5 text-red-500"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                    <div class="mt-1">
+                      <p v-if="errors[`permission_${index}_component`]" class="text-red-500 text-xs">
+                        {{ errors[`permission_${index}_component`] }}
+                      </p>
+                      <p v-else class="text-gray-500 text-xs">
+                        Use letters, numbers, underscores (_), hyphens (-), or * for all components. No spaces allowed.
+                      </p>
+                      <p v-if="permission.componentName === '*'" class="text-blue-600 text-xs mt-1 flex items-center">
+                        <svg class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                        </svg>
+                        This will apply to all components
+                      </p>
+                    </div>
+                  </div>
+
+                  <!-- Action Selection -->
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-2">
+                      Actions <span class="text-red-500">*</span>
+                    </label>
+                    <div class="flex items-center">
+                      <div class="inline-flex rounded-md shadow-sm" role="group">
+                        <button
+                          v-for="(action, actionIndex) in actionOptions"
+                          :key="action.value"
+                          type="button"
+                          @click="() => {
+                            if (permission.actions.includes(action.value)) {
+                              permission.actions = permission.actions.filter(a => a !== action.value)
+                            } else {
+                              permission.actions.push(action.value)
+                            }
+                            clearError(`permission_${index}_actions`)
+                          }"
+                          :class="[
+                            'relative min-w-[100px] flex items-center justify-center h-[44px] px-4 text-sm font-medium transition-all duration-200',
+                            'focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500',
+                            permission.actions.includes(action.value)
+                              ? 'bg-blue-50 text-blue-700 hover:bg-blue-100 border-blue-300'
+                              : 'bg-white text-gray-700 hover:bg-gray-50 border-gray-300',
+                            'border',
+                            // Round only the first and last buttons
+                            actionIndex === 0 ? 'rounded-l-md' : '',
+                            actionIndex === actionOptions.length - 1 ? 'rounded-r-md' : '',
+                            // Add negative margin to overlap borders
+                            actionIndex !== 0 ? '-ml-px' : ''
+                          ]"
+                        >
+                          <div class="flex items-center justify-center space-x-1.5">
+                            <svg 
+                              class="w-4 h-4" 
+                              :class="permission.actions.includes(action.value) ? 'text-blue-600' : 'text-gray-500'"
+                              fill="none" 
+                              stroke="currentColor" 
+                              viewBox="0 0 24 24"
+                            >
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :d="action.icon"/>
+                            </svg>
+                            <span>{{ action.label }}</span>
+                          </div>
+                          <!-- Selected indicator dot -->
+                          <div
+                            v-if="permission.actions.includes(action.value)"
+                            class="absolute top-3 right-2 w-2 h-2 rounded-full bg-blue-500"
+                          ></div>
+                        </button>
+                      </div>
+                      
+                      <!-- Error or status message -->
+                      <!-- <div class="ml-4 flex-shrink-0">
+                        <p v-if="errors[`permission_${index}_actions`]" class="text-red-500 text-xs flex items-center">
+                          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                          </svg>
+                          {{ errors[`permission_${index}_actions`] }}
+                        </p>
+                        <p v-else-if="permission.actions.length === 0" class="text-gray-500 text-xs">
+                          Select permissions
+                        </p>
+                        <p v-else class="text-blue-600 text-xs flex items-center">
+                          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                          </svg>
+                          {{ permission.actions.length }} selected
+                        </p>
+                      </div> -->
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Permission Preview -->
+                <div v-if="permission.menuName && permission.componentName && permission.actions.length > 0" class="mt-4 p-3 bg-blue-50 rounded-md">
+                  <p class="text-sm text-blue-800">
+                    <strong>Preview:</strong> 
+                    {{ getMenuName(permission.menuName) }} → {{ getComponentDisplayName(permission.componentName) }} → 
+                                          <span class="space-x-1">
+                        <span 
+                          v-for="action in permission.actions" 
+                          :key="action"
+                          class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800"
+                        >
+                          <svg 
+                            class="w-3 h-3 mr-1" 
+                            fill="none" 
+                            stroke="currentColor" 
+                            viewBox="0 0 24 24"
+                          >
+                            <path 
+                              stroke-linecap="round" 
+                              stroke-linejoin="round" 
+                              stroke-width="2" 
+                              :d="actionOptions.find(a => a.value === action)?.icon"
+                            />
+                          </svg>
+                          {{ action }}
+                        </span>
+                      </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- User Management Section -->
+          <div class="bg-white border border-gray-200 rounded-lg p-6">
+            <div class="flex justify-between items-center mb-6">
+              <div>
+                <h3 class="text-lg font-medium text-gray-900">Assign Users</h3>
+                <p class="text-sm text-gray-600">Add users to this role group</p>
+              </div>
+            </div>
+
+            <!-- User Search -->
+            <div class="mb-6">
+              <div class="max-w-md">
+                <label for="userSearch" class="block text-sm font-medium text-gray-700 mb-2">
+                  Search Users
+                </label>
+                <input
+                  type="text"
+                  id="userSearch"
+                  v-model="searchQuery"
+                  placeholder="Search by name, email, or department"
+                  class="w-full px-3 py-2.5 border border-gray-300 rounded-md bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
+                />
+              </div>
+            </div>
+
+            <!-- Available Users List -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+              <div class="border border-gray-200 rounded-lg p-4">
+                <h4 class="text-sm font-medium text-gray-700 mb-3">Available Users</h4>
+                <div class="max-h-60 overflow-y-auto">
+                  <div
+                    v-if="filteredUsers.length > 0"
+                    v-for="user in filteredUsers"
+                    :key="user.id"
+                    class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-md cursor-pointer"
+                    @click="addUser(user)"
+                  >
+                    <div>
+                      <p class="text-sm font-medium text-gray-900">{{ user.name }}</p>
+                      <p class="text-xs text-gray-500">{{ user.email }}</p>
+                      <span class="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">
+                        {{ user.department }}
+                      </span>
+                    </div>
+                    <button
+                      type="button"
+                      class="text-blue-600 hover:text-blue-800 text-sm font-medium"
+                    >
+                      Add
+                    </button>
+                  </div>
+                  <div
+                    v-if="filteredUsers.length === 0 && !searchQuery"
+                    class="text-center py-4 text-gray-500 text-sm"
+                  >
+                    All users have been assigned
+                  </div>
+                  <div
+                    v-if="filteredUsers.length === 0 && searchQuery"
+                    class="text-center py-4 text-gray-500 text-sm"
+                  >
+                    No users found matching your search
+                  </div>
+                </div>
+              </div>
+
+              <!-- Assigned Users List -->
+              <div class="border border-gray-200 rounded-lg p-4">
+                <h4 class="text-sm font-medium text-gray-700 mb-3">Assigned Users</h4>
+                <div class="max-h-60 overflow-y-auto">
+                  <div
+                    v-for="user in formData.users"
+                    :key="user.id"
+                    class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-md"
+                  >
+                    <div>
+                      <p class="text-sm font-medium text-gray-900">{{ user.name }}</p>
+                      <p class="text-xs text-gray-500">{{ user.email }}</p>
+                      <span class="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">
+                        {{ user.department }}
+                      </span>
+                    </div>
+                    <button
+                      type="button"
+                      @click="removeUser(user.id)"
+                      class="text-red-600 hover:text-red-800 text-sm font-medium"
+                    >
+                      Remove
+                    </button>
+                  </div>
+                  <div
+                    v-if="formData.users.length === 0"
+                    class="text-center py-4 text-gray-500 text-sm"
+                  >
+                    No users assigned yet
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Summary Section -->
+          <div v-if="formData.roleId && (formData.permissions.some(p => p.menuName && p.componentName && p.actions.length > 0) || formData.users.length > 0)" 
+               class="bg-green-50 border border-green-200 rounded-lg p-6">
+            <h3 class="text-lg font-medium text-green-900 mb-3">Assignment Summary</h3>
+            <p class="text-sm text-green-800 mb-3">
+              <strong>Role:</strong> {{ getRoleName(formData.roleId) }}
+            </p>
+            
+            <!-- Permissions Summary -->
+            <div v-if="formData.permissions.some(p => p.menuName && p.componentName && p.actions.length > 0)" class="mb-4">
+              <p class="text-sm text-green-800 mb-2"><strong>Permissions:</strong></p>
+              <ul class="list-disc list-inside text-sm text-green-700 space-y-2">
+                <li v-for="(permission, index) in formData.permissions" :key="index">
+                  <span v-if="permission.menuName && permission.componentName && permission.actions.length > 0">
+                    <div class="ml-4 mt-1">
+                      <span class="font-medium">{{ getMenuName(permission.menuName) }}</span> → 
+                      <span class="font-medium">{{ getComponentDisplayName(permission.componentName) }}</span>
+                      <div class="mt-1 flex flex-wrap gap-1">
+                        <span
+                          v-for="action in permission.actions"
+                          :key="action"
+                          class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800"
+                        >
+                          {{ action }}
+                        </span>
+                      </div>
+                    </div>
+                  </span>
+                </li>
+              </ul>
+            </div>
+
+            <!-- Users Summary -->
+            <div v-if="formData.users.length > 0">
+              <p class="text-sm text-green-800 mb-2"><strong>Assigned Users:</strong></p>
+              <ul class="list-disc list-inside text-sm text-green-700 space-y-1">
+                <li v-for="user in formData.users" :key="user.id">
+                  {{ user.name }} ({{ user.department }})
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <!-- Form Actions -->
+          <div class="flex justify-end space-x-4 pt-6 border-t border-gray-200">
+            <button
+              type="button"
+              @click="resetForm"
+              class="px-6 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              :disabled="isSubmitting"
+            >
+              Reset
+            </button>
+            <button
+              type="submit"
+              class="px-6 py-2 bg-blue-600 border border-transparent rounded-md shadow-sm text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+              :disabled="isSubmitting || formData.permissions.length === 0"
+            >
+              <span v-if="isSubmitting">Assigning...</span>
+              <span v-else>Assign Permissions</span>
+            </button>
+          </div>
+        </form>
+      </template>
+    </rs-card>
+  </div>
+</template>
+
+<style scoped>
+/* Animation for loading spinner */
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+/* Modal animations */
+@keyframes modal-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes modal-slide-in {
+  from {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.fixed {
+  animation: modal-fade-in 0.2s ease-out;
+}
+
+.fixed > div {
+  animation: modal-slide-in 0.2s ease-out;
+}
+
+/* Grid responsive styles */
+.grid {
+  display: grid;
+}
+
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+@media (min-width: 768px) {
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.space-y-4 > * + * {
+  margin-top: 1rem;
+}
+
+.space-y-8 > * + * {
+  margin-top: 2rem;
+}
+
+/* Enhanced input styles */
+input[type="text"] {
+  appearance: none;
+  transition: all 0.2s ease-in-out;
+}
+
+input[type="text"]:hover {
+  border-color: #4B5563;
+}
+
+input[type="text"]:focus {
+  border-color: #3B82F6;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+}
+
+input[type="text"]::placeholder {
+  color: #9CA3AF;
+}
+
+input[type="text"]:disabled {
+  background-color: #F3F4F6;
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+/* Enhanced dropdown styles */
+select {
+  appearance: none;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+  transition: all 0.2s ease-in-out;
+}
+
+select:hover {
+  border-color: #4B5563;
+}
+
+select:focus {
+  border-color: #3B82F6;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+  outline: none;
+  ring: 2px;
+  ring-color: #3b82f6;
+}
+
+select:disabled {
+  background-color: #F3F4F6;
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+select option {
+  padding: 0.5rem;
+  font-size: 0.875rem;
+}
+
+select option:hover {
+  background-color: #F3F4F6;
+}
+
+/* Focus and error styles */
+.border-red-500 {
+  border-color: #ef4444;
+}
+
+.text-red-500 {
+  color: #ef4444;
+}
+
+/* Button hover effects */
+button:hover {
+  transition: all 0.2s ease-in-out;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Card and section styling */
+.bg-gray-50 {
+  background-color: #f9fafb;
+}
+
+.bg-blue-50 {
+  background-color: #eff6ff;
+}
+
+.bg-green-50 {
+  background-color: #f0fdf4;
+}
+
+.border-gray-200 {
+  border-color: #e5e7eb;
+}
+
+.border-green-200 {
+  border-color: #bbf7d0;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
+/* Custom dropdown container */
+.select-container {
+  position: relative;
+  width: 100%;
+}
+
+.select-container::after {
+  pointer-events: none;
+}
+
+/* Error state enhancements */
+select.border-red-500,
+input.border-red-500 {
+  border-color: #ef4444;
+  background-color: #FEF2F2;
+}
+
+select.border-red-500:focus,
+input.border-red-500:focus {
+  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
+}
+
+/* Placeholder styling */
+select option[value=""] {
+  color: #9CA3AF;
+}
+</style>
\ No newline at end of file