cccux 0.1.0

data/app/views/cccux/roles/edit.html.erb

@@ -0,0 +1,317 @@
+<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
+  <h1>Edit Role: <%= @role.name %></h1>
+  <div>
+    <%= link_to "View Role", cccux.role_path(@role), 
+        style: "background-color: #17a2b8; color: white; padding: 0.5rem 1rem; text-decoration: none; border-radius: 4px; margin-right: 0.5rem;" %>
+    <%= link_to "Back to Roles", cccux.roles_path, 
+        style: "background-color: #6c757d; color: white; padding: 0.5rem 1rem; text-decoration: none; border-radius: 4px;" %>
+  </div>
+</div>
+
+<%= form_with model: [@role], url: cccux.role_path(@role), local: true, method: :patch do |form| %>
+  <% if @role.errors.any? %>
+    <div style="background-color: #f8d7da; border: 1px solid #721c24; padding: 1rem; margin-bottom: 2rem; border-radius: 4px;">
+      <h4><%= pluralize(@role.errors.count, "error") %> prohibited this role from being saved:</h4>
+      <ul>
+        <% @role.errors.full_messages.each do |message| %>
+          <li><%= message %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; margin-bottom: 2rem;">
+    <!-- Basic Role Information -->
+    <div style="background-color: white; border: 1px solid #dee2e6; border-radius: 8px; padding: 1.5rem;">
+      <h3 style="margin-top: 0; color: #495057;">Basic Information</h3>
+      
+      <div style="margin-bottom: 1.5rem;">
+        <%= form.label :name, style: "display: block; margin-bottom: 0.5rem; font-weight: bold; color: #495057;" %>
+        <%= form.text_field :name, 
+            style: "width: 100%; padding: 0.75rem; border: 1px solid #ced4da; border-radius: 4px; font-size: 1rem;" %>
+      </div>
+
+      <div style="margin-bottom: 1.5rem;">
+        <%= form.label :description, style: "display: block; margin-bottom: 0.5rem; font-weight: bold; color: #495057;" %>
+        <%= form.text_area :description, rows: 4,
+            style: "width: 100%; padding: 0.75rem; border: 1px solid #ced4da; border-radius: 4px; font-size: 1rem; resize: vertical;" %>
+      </div>
+
+      <div style="margin-bottom: 1.5rem;">
+        <label style="display: flex; align-items: center; cursor: pointer;">
+          <%= form.check_box :active, { checked: @role.active.nil? ? true : @role.active }, 
+              style: "margin-right: 0.5rem; transform: scale(1.2);" %>
+          <span style="font-weight: bold; color: #495057;">Active Role</span>
+        </label>
+        <small style="color: #6c757d; font-size: 0.9rem; margin-top: 0.25rem; display: block; margin-left: 1.5rem;">
+          Only active roles can be assigned to users. Inactive roles are hidden from user assignment forms.
+        </small>
+      </div>
+      
+      <div style="background-color: #f8f9fa; padding: 1rem; border-radius: 4px;">
+        <strong style="color: #495057;">Current Users:</strong>
+        <div style="margin-top: 0.5rem;">
+          <%= pluralize(@role.users.count, 'user') %> assigned to this role
+        </div>
+      </div>
+    </div>
+    
+    <!-- Permission Management -->
+    <div style="background-color: white; border: 1px solid #dee2e6; border-radius: 8px; padding: 1.5rem;">
+      <h3 style="margin-top: 0; color: #495057;">Permissions</h3>
+      
+      <!-- Permission Legend -->
+      <div style="background-color: #e7f3ff; border: 1px solid #b8daff; padding: 1rem; border-radius: 4px; margin-bottom: 1.5rem;">
+        <h6 style="margin: 0 0 0.5rem 0; color: #004085; font-weight: bold;">Access Types:</h6>
+        <div style="font-size: 0.85rem; color: #004085; line-height: 1.4;">
+          <div style="margin-bottom: 0.25rem;"><strong>Global:</strong> Access all records everywhere</div>
+          <div style="margin-bottom: 0.25rem;"><strong>Owned:</strong> Access records you own, or records you have access to via a parent/manager relationship (e.g., store manager can access all orders in their store). Configure the ownership model and keys below to define what "owned" means for this permission.</div>
+        </div>
+      </div>
+      
+      <% if @available_permissions.any? %>
+        <% @available_permissions.each do |subject, permissions| %>
+          <div style="margin-bottom: 1.5rem; padding: 1rem; border: 1px solid #e9ecef; border-radius: 4px;">
+            <h5 style="margin: 0 0 0.75rem 0; color: #495057; font-weight: bold;"><%= subject %></h5>
+            
+            <!-- Action Permissions with Access Type Controls -->
+            <div style="display: grid; grid-template-columns: 1fr; gap: 0.5rem;">
+              <% permissions.each do |permission| %>
+                <% 
+                  # Check if this permission is currently assigned to the role
+                  is_assigned = @role.ability_permissions.include?(permission)
+                  
+                  # Get the current access type for this specific permission
+                  role_ability = @role.role_abilities.find_by(ability_permission: permission)
+                  current_access_type = role_ability&.access_type || 'global'
+                %>
+                
+                <div style="display: flex; align-items: center; padding: 0.75rem; border: 1px solid #e9ecef; border-radius: 4px; background-color: #f8f9fa;"
+                     data-permission-id="<%= permission.id %>">
+                  
+                  <div style="margin-right: 1rem; min-width: 100px;">
+                    <%= check_box_tag "role[ability_permission_ids][]", 
+                        permission.id, 
+                        is_assigned,
+                        style: "margin-right: 0.5rem;",
+                        class: "permission-checkbox",
+                        data: { permission_id: permission.id } %>
+                    <span style="font-size: 0.9rem; color: #495057; font-weight: bold;">
+                      <%= permission.action.capitalize %>
+                    </span>
+                  </div>
+                  
+                  <!-- Access Type Controls -->
+                  <div style="margin-left: auto; display: flex; align-items: center; gap: 1.5rem;">
+                    <span style="font-size: 0.8rem; color: #6c757d; font-weight: bold;">Access:</span>
+                    
+                    <%= radio_button_tag "role[permission_access_type][#{permission.id}]", "global", 
+                        current_access_type == 'global', 
+                        id: "access_global_#{permission.id}",
+                        style: "margin-right: 0.25rem;",
+                        class: "access-radio",
+                        disabled: !is_assigned %>
+                    <%= label_tag "access_global_#{permission.id}", "Global", 
+                        style: "font-size: 0.8rem; cursor: pointer; margin-right: 0.75rem;",
+                        class: "access-label #{is_assigned ? '' : 'text-muted'}" %>
+                    
+                    <%= radio_button_tag "role[permission_access_type][#{permission.id}]", "owned", 
+                        current_access_type == 'owned', 
+                        id: "access_owned_#{permission.id}",
+                        style: "margin-right: 0.25rem;",
+                        class: "access-radio",
+                        disabled: !is_assigned %>
+                    <%= label_tag "access_owned_#{permission.id}", "Owned", 
+                        style: "font-size: 0.8rem; cursor: pointer;",
+                        class: "access-label #{is_assigned ? '' : 'text-muted'}" %>
+                  </div>
+                </div>
+                
+                <!-- Ownership Configuration (shown when "Owned" is selected) -->
+                <div class="ownership-config" 
+                     style="display: none; margin-top: 0.5rem; padding: 0.75rem; background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px;"
+                     data-permission-id="<%= permission.id %>">
+                  <div style="font-size: 0.8rem; color: #856404; font-weight: bold; margin-bottom: 0.5rem;">
+                    Ownership Configuration:
+                  </div>
+                  
+                  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem;">
+                    <div>
+                      <label style="font-size: 0.75rem; color: #856404; display: block; margin-bottom: 0.25rem;">
+                        Ownership Model:
+                      </label>
+                      <%= select_tag "role[ownership_source][#{permission.id}]", 
+                          options_for_select([['Select model...', '']] + (@available_ownership_models || []).map { |m| [m, m] }, role_ability&.ownership_source),
+                          class: "ownership-source-field",
+                          data: { permission_id: permission.id },
+                          style: "width: 100%; padding: 0.25rem; font-size: 0.75rem; border: 1px solid #ffeaa7; border-radius: 2px;" %>
+                      <small style="font-size: 0.7rem; color: #856404;">
+                        Model that defines ownership (optional)
+                      </small>
+                    </div>
+                    
+                    <div>
+                      <label style="font-size: 0.75rem; color: #856404; display: block; margin-bottom: 0.25rem;">
+                        Foreign Key:
+                      </label>
+                      <%= text_field_tag "role[ownership_foreign_key][#{permission.id}]", 
+                          (role_ability&.ownership_conditions.present? ? JSON.parse(role_ability.ownership_conditions)["foreign_key"] : nil),
+                          placeholder: "e.g., store_id",
+                          style: "width: 100%; padding: 0.25rem; font-size: 0.75rem; border: 1px solid #ffeaa7; border-radius: 2px;",
+                          class: "ownership-foreign-key-field" %>
+                      <small style="font-size: 0.7rem; color: #856404;">
+                        Links to main model (auto-detected if blank)
+                      </small>
+                    </div>
+                  </div>
+                  
+                  <div>
+                    <label style="font-size: 0.75rem; color: #856404; display: block; margin-bottom: 0.25rem;">
+                      User Key:
+                    </label>
+                    <%= text_field_tag "role[ownership_user_key][#{permission.id}]", 
+                        (role_ability&.ownership_conditions.present? ? JSON.parse(role_ability.ownership_conditions)["user_key"] : nil),
+                        placeholder: "e.g., user_id",
+                        style: "width: 100%; padding: 0.25rem; font-size: 0.75rem; border: 1px solid #ffeaa7; border-radius: 2px;",
+                        class: "ownership-user-key-field" %>
+                    <small style="font-size: 0.7rem; color: #856404;">
+                      Identifies the user (defaults to user_id)
+                    </small>
+                  </div>
+                </div>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+        
+        <!-- Hidden field to ensure empty array is sent when no permissions are selected -->
+        <%= hidden_field_tag "role[ability_permission_ids][]", "", id: nil %>
+      <% else %>
+        <p style="color: #6c757d; font-style: italic;">No permissions available to assign.</p>
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Enhanced JavaScript for permission interactions -->
+  <script>
+    document.addEventListener('DOMContentLoaded', initializeRoleForm);
+    document.addEventListener('turbo:load', initializeRoleForm);
+    
+    function initializeRoleForm() {
+      // Handle permission checkboxes and access type radios
+      const permissionCheckboxes = document.querySelectorAll('.permission-checkbox');
+      
+      permissionCheckboxes.forEach(checkbox => {
+        const permissionId = checkbox.value;
+        const accessTypeRadios = document.querySelectorAll(`input[name="role[permission_access_type][${permissionId}]"]`);
+        const accessLabels = document.querySelectorAll(`label[for^="access_"][for$="_${permissionId}"]`);
+        const ownershipConfig = document.querySelector(`.ownership-config[data-permission-id="${permissionId}"]`);
+        
+        function updateAccessTypeVisibility() {
+          const isChecked = checkbox.checked;
+          
+          // Enable/disable access type radios
+          accessTypeRadios.forEach(radio => {
+            radio.disabled = !isChecked;
+          });
+          
+          // Update label opacity
+          accessLabels.forEach(label => {
+            label.style.opacity = isChecked ? '1' : '0.5';
+            if (isChecked) {
+              label.classList.remove('text-muted');
+            } else {
+              label.classList.add('text-muted');
+            }
+          });
+          
+          // Hide ownership config when permission is unchecked
+          if (ownershipConfig) {
+            if (!isChecked) {
+              ownershipConfig.style.display = 'none';
+            } else {
+              // Check if "Owned" is selected
+              const ownedRadio = document.querySelector(`#access_owned_${permissionId}`);
+              if (ownedRadio && ownedRadio.checked) {
+                ownershipConfig.style.display = 'block';
+              }
+            }
+          }
+        }
+        
+        checkbox.addEventListener('change', updateAccessTypeVisibility);
+        updateAccessTypeVisibility();
+      });
+      
+      // Handle access type radio changes to show/hide ownership config
+      const accessRadios = document.querySelectorAll('.access-radio');
+      
+      accessRadios.forEach(radio => {
+        radio.addEventListener('change', function() {
+          // Extract permission ID from the radio button name or ID
+          const permissionId = this.name.match(/\[(\d+)\]$/)?.[1] || this.id.match(/_(\d+)$/)?.[1];
+          const ownershipConfig = document.querySelector(`.ownership-config[data-permission-id="${permissionId}"]`);
+          const checkbox = document.querySelector(`input[value="${permissionId}"].permission-checkbox`);
+          
+          if (ownershipConfig && checkbox && checkbox.checked) {
+            if (this.value === 'owned') {
+              ownershipConfig.style.display = 'block';
+            } else {
+              ownershipConfig.style.display = 'none';
+            }
+          }
+        });
+      });
+      
+      // Handle ownership source model dropdown
+      const ownershipSourceSelects = document.querySelectorAll('.ownership-source-field');
+      
+      ownershipSourceSelects.forEach(select => {
+        select.addEventListener('change', function() {
+          const permissionId = this.dataset.permissionId;
+          const selectedModel = this.value;
+          
+          if (selectedModel) {
+            console.log(`Model selected for permission ${permissionId}: ${selectedModel}`);
+          }
+        });
+      });
+      
+      // Add CSS for muted text
+      if (!document.getElementById('cccux-muted-style')) {
+        const style = document.createElement('style');
+        style.id = 'cccux-muted-style';
+        style.textContent = `
+          .text-muted {
+            color: #6c757d !important;
+          }
+        `;
+        document.head.appendChild(style);
+      }
+    }
+  </script>
+
+  <!-- Form Actions -->
+  <div style="background-color: white; border: 1px solid #dee2e6; border-radius: 8px; padding: 1.5rem;">
+    <div style="display: flex; justify-content: space-between; align-items: center;">
+      <div>
+        <%= form.submit "Update Role", 
+            style: "background-color: #28a745; color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; margin-right: 1rem;" %>
+        <%= link_to "Cancel", cccux.role_path(@role), 
+            style: "color: #6c757d; text-decoration: none; padding: 0.75rem 1rem; font-size: 1rem;" %>
+      </div>
+      
+      <% unless @role.users.any? %>
+        <div>
+          <%= link_to "Delete Role", cccux.role_path(@role), 
+              data: { "turbo-method": :delete, "turbo-confirm": "Are you sure? This action cannot be undone." },
+              style: "background-color: #dc3545; color: white; padding: 0.75rem 1.5rem; text-decoration: none; border-radius: 4px; font-size: 1rem;" %>
+        </div>
+      <% else %>
+        <div style="color: #6c757d; font-size: 0.9rem; font-style: italic;">
+          Cannot delete role with assigned users
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/views/cccux/roles/index.html.erb

@@ -0,0 +1,51 @@
+<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
+  <h1>Role Management</h1>
+  <%= link_to "New Role", cccux.new_role_path, 
+      data: { turbo_frame: "new_role_form" },
+      style: "background-color: #007bff; color: white; padding: 0.5rem 1rem; text-decoration: none; border-radius: 4px;" %>
+</div>
+
+<!-- Flash Messages Area -->
+<div id="flash" style="margin-bottom: 1rem;">
+  <% if notice %>
+    <div class="alert alert-success" style="background-color: #d1edff; border: 1px solid #0c5460; padding: 1rem; border-radius: 4px;">
+      <%= notice %>
+    </div>
+  <% end %>
+  <% if alert %>
+    <div class="alert alert-danger" style="background-color: #f8d7da; border: 1px solid #721c24; padding: 1rem; border-radius: 4px;">
+      <%= alert %>
+    </div>
+  <% end %>
+</div>
+
+<!-- New Role Form Area -->
+<%= turbo_frame_tag "new_role_form" do %>
+  <!-- Form will load here when "New Role" is clicked -->
+<% end %>
+
+<!-- Roles List -->
+<div style="margin-bottom: 1rem;">
+  <h3 style="color: #495057; margin-bottom: 0.5rem;">Role Hierarchy</h3>
+  <p style="color: #6c757d; font-size: 0.9rem; margin-bottom: 1.5rem;">
+    <strong>Drag and drop</strong> roles to reorder their priority. Higher positions = higher priority.
+  </p>
+</div>
+
+<div id="roles_list" 
+     data-reorder-url="<%= cccux.reorder_roles_path %>"
+     style="display: flex; flex-direction: column; gap: 1rem; max-width: 600px;">
+  <% @roles.each do |role| %>
+    <%= render "role", role: role %>
+  <% end %>
+</div>
+
+<% if @roles.empty? %>
+  <div style="text-align: center; padding: 3rem; background-color: #f8f9fa; border-radius: 4px;">
+    <h3>No roles found</h3>
+    <p>Create your first role to get started.</p>
+    <%= link_to "Create Role", cccux.new_role_path, 
+        data: { turbo_frame: "new_role_form" },
+        style: "background-color: #007bff; color: white; padding: 0.5rem 1rem; text-decoration: none; border-radius: 4px;" %>
+  </div>
+<% end %> 

data/app/views/cccux/roles/new.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag "new_role_form" do %>
+  <%= render 'form', role: @role %>
+<% end %>

data/app/views/cccux/roles/show.html.erb

@@ -0,0 +1,99 @@
+<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
+  <h1>Role: <%= @role.name %></h1>
+  <div>
+    <%= link_to "Edit", cccux.edit_role_path(@role), 
+        style: "background-color: #28a745; color: white; padding: 0.5rem 1rem; text-decoration: none; border-radius: 4px; margin-right: 0.5rem;" %>
+    <%= link_to "Back to Roles", cccux.roles_path, 
+        style: "background-color: #6c757d; color: white; padding: 0.5rem 1rem; text-decoration: none; border-radius: 4px;" %>
+  </div>
+</div>
+    somewhere,. 
+
+<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
+  <!-- Role Details -->
+  <div style="background-color: white; border: 1px solid #dee2e6; border-radius: 8px; padding: 1.5rem;">
+    <h3 style="margin-top: 0; color: #495057;">Role Details</h3>
+    
+    <div style="margin-bottom: 1rem;">
+      <strong style="color: #495057;">Name:</strong>
+      <span style="display: block; margin-top: 0.25rem; color: #6c757d;"><%= @role.name %></span>
+    </div>
+    
+    <div style="margin-bottom: 1rem;">
+      <strong style="color: #495057;">Description:</strong>
+      <span style="display: block; margin-top: 0.25rem; color: #6c757d;">
+        <%= @role.description.present? ? @role.description : "No description provided" %>
+      </span>
+    </div>
+    
+    <div style="margin-bottom: 1rem;">
+      <strong style="color: #495057;">Users with this role:</strong>
+      <span style="display: block; margin-top: 0.25rem; color: #6c757d;">
+        <%= pluralize(@users_with_role.count, 'user') %>
+      </span>
+    </div>
+    
+    <div>
+      <strong style="color: #495057;">Created:</strong>
+      <span style="display: block; margin-top: 0.25rem; color: #6c757d;">
+        <%= @role.created_at.strftime('%B %d, %Y at %I:%M %p') %>
+      </span>
+    </div>
+  </div>
+  
+  <!-- Users with this Role -->
+  <div style="background-color: white; border: 1px solid #dee2e6; border-radius: 8px; padding: 1.5rem;">
+    <h3 style="margin-top: 0; color: #495057;">Users (<%= @users_with_role.count %>)</h3>
+    
+    <% if @users_with_role.any? %>
+      <div style="max-height: 300px; overflow-y: auto;">
+        <% @users_with_role.each do |user| %>
+          <div style="padding: 0.75rem; border-bottom: 1px solid #e9ecef; display: flex; justify-content: space-between; align-items: center;">
+            <span style="color: #495057;"><%= user.email %></span>
+            <small style="color: #6c757d;"><%= user.created_at.strftime('%Y-%m-%d') %></small>
+          </div>
+        <% end %>
+      </div>
+    <% else %>
+      <p style="color: #6c757d; font-style: italic;">No users assigned to this role.</p>
+    <% end %>
+  </div>
+</div>
+
+<!-- Assigned Permissions -->
+<div style="background-color: white; border: 1px solid #dee2e6; border-radius: 8px; padding: 1.5rem; margin-top: 2rem;">
+  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
+    <h3 style="margin: 0; color: #495057;">Assigned Permissions (<%= @role.ability_permissions.count %>)</h3>
+    <%= link_to "Manage Permissions", cccux.edit_role_path(@role), 
+        style: "background-color: #007bff; color: white; padding: 0.375rem 0.75rem; text-decoration: none; border-radius: 4px; font-size: 0.875rem;" %>
+  </div>
+  
+  <% if @role.ability_permissions.any? %>
+    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.75rem;">
+      <% @role.ability_permissions.each do |permission| %>
+        <div style="padding: 0.75rem; border: 1px solid #e9ecef; border-radius: 4px; background-color: #f8f9fa;">
+          <div style="font-weight: bold; color: #495057; margin-bottom: 0.25rem;">
+            <%= permission.subject %>
+          </div>
+          <div style="display: flex; align-items: center;">
+            <span style="background-color: <%= permission.action.in?(['read', 'create', 'update', 'destroy']) ? '#28a745' : '#007bff' %>; 
+                         color: white; padding: 0.125rem 0.375rem; border-radius: 12px; font-size: 0.75rem; font-weight: bold;">
+              <%= permission.action %>
+            </span>
+            <% if permission.description.present? %>
+              <span style="margin-left: 0.5rem; color: #6c757d; font-size: 0.875rem;">
+                <%= truncate(permission.description, length: 40) %>
+              </span>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  <% else %>
+    <div style="text-align: center; padding: 2rem; color: #6c757d;">
+      <p style="margin-bottom: 1rem; font-style: italic;">No permissions assigned to this role.</p>
+      <%= link_to "Add Permissions", cccux.edit_role_path(@role), 
+          style: "background-color: #28a745; color: white; padding: 0.75rem 1.5rem; text-decoration: none; border-radius: 4px; font-weight: bold;" %>
+    </div>
+  <% end %>
+</div> 

data/app/views/cccux/users/edit.html.erb

@@ -0,0 +1,117 @@
+<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
+  <h1>Edit User: <%= @user.email %></h1>
+  <%= link_to "← Back to User", cccux.user_path(@user), 
+      style: "background-color: #6c757d; color: white; padding: 0.5rem 1rem; text-decoration: none; border-radius: 4px;" %>
+</div>
+
+<%= form_with model: [@user], url: cccux.user_path(@user), method: :patch, local: true do |form| %>
+  <% if @user.errors.any? %>
+    <div style="background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; padding: 1rem; border-radius: 4px; margin-bottom: 2rem;">
+      <h4 style="margin-top: 0;">Please fix the following errors:</h4>
+      <ul style="margin-bottom: 0;">
+        <% @user.errors.full_messages.each do |message| %>
+          <li><%= message %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem;">
+    <!-- User Information -->
+    <div style="background-color: white; border: 1px solid #dee2e6; border-radius: 8px; padding: 1.5rem;">
+      <h3 style="margin-top: 0; color: #495057;">User Information</h3>
+      
+      <div style="margin-bottom: 1.5rem;">
+        <%= form.label :email, style: "display: block; margin-bottom: 0.5rem; font-weight: bold; color: #495057;" %>
+        <%= form.email_field :email, 
+            style: "width: 100%; padding: 0.75rem; border: 1px solid #ced4da; border-radius: 4px; font-size: 1rem;" %>
+      </div>
+
+      <div style="margin-bottom: 1.5rem;">
+        <%= form.label :password, "New Password (leave blank to keep current)", 
+            style: "display: block; margin-bottom: 0.5rem; font-weight: bold; color: #495057;" %>
+        <%= form.password_field :password, 
+            style: "width: 100%; padding: 0.75rem; border: 1px solid #ced4da; border-radius: 4px; font-size: 1rem;" %>
+        <small style="color: #6c757d; font-size: 0.875rem;">Leave blank to keep current password</small>
+      </div>
+
+      <div style="margin-bottom: 1.5rem;">
+        <%= form.label :password_confirmation, "Confirm New Password", 
+            style: "display: block; margin-bottom: 0.5rem; font-weight: bold; color: #495057;" %>
+        <%= form.password_field :password_confirmation, 
+            style: "width: 100%; padding: 0.75rem; border: 1px solid #ced4da; border-radius: 4px; font-size: 1rem;" %>
+      </div>
+      
+      <div style="background-color: #f8f9fa; padding: 1rem; border-radius: 4px;">
+        <strong style="color: #495057;">Account Info:</strong>
+        <div style="margin-top: 0.5rem; font-size: 0.9rem; color: #6c757d;">
+          Created: <%= @user.created_at.strftime('%b %d, %Y') %><br>
+          Last Updated: <%= @user.updated_at.strftime('%b %d, %Y') %>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Role Management -->
+    <div style="background-color: white; border: 1px solid #dee2e6; border-radius: 8px; padding: 1.5rem;">
+      <h3 style="margin-top: 0; color: #495057;">Role Assignment</h3>
+      
+      <div style="background-color: #fff3cd; border: 1px solid #ffeaa7; padding: 1rem; border-radius: 4px; margin-bottom: 1rem;">
+        <p style="margin: 0; color: #856404; font-size: 0.9rem;">
+          <strong>Current:</strong> <%= @user.role_names.join(', ') %>
+        </p>
+      </div>
+      
+      <% if @available_roles.any? %>
+        <div style="max-height: 300px; overflow-y: auto; border: 1px solid #e9ecef; border-radius: 4px; padding: 0.5rem;">
+          <% @available_roles.each do |role| %>
+            <div style="padding: 0.5rem; border-bottom: 1px solid #f8f9fa; display: flex; align-items: center;">
+              <%= check_box_tag "user[role_ids][]", role.id, @user_role_ids.include?(role.id), 
+                  id: "role_#{role.id}",
+                  style: "margin-right: 0.5rem;" %>
+              <%= label_tag "role_#{role.id}", style: "margin: 0; cursor: pointer; flex: 1;" do %>
+                <strong style="color: #495057;"><%= role.name %></strong>
+                <% if role.description.present? %>
+                  <br><small style="color: #6c757d;"><%= role.description %></small>
+                <% end %>
+                <% if @user_role_ids.include?(role.id) %>
+                  <span style="background-color: #d4edda; color: #155724; padding: 0.2rem 0.4rem; border-radius: 3px; font-size: 0.7rem; margin-left: 0.5rem;">CURRENT</span>
+                <% end %>
+              <% end %>
+            </div>
+          <% end %>
+        </div>
+        
+        <div style="margin-top: 1rem; padding: 1rem; background-color: #e7f3ff; border-radius: 4px;">
+          <h5 style="margin: 0 0 0.5rem 0; color: #004085;">Role Selection Tips:</h5>
+          <ul style="margin: 0; padding-left: 1.5rem; color: #004085; font-size: 0.9rem;">
+            <li>Check roles to assign them to this user</li>
+            <li>Uncheck roles to remove them from this user</li>
+            <li>Users automatically keep their "Basic User" role</li>
+          </ul>
+        </div>
+      <% else %>
+        <div style="text-align: center; padding: 2rem; color: #6c757d; font-style: italic;">
+          No roles available. Create roles first.
+        </div>
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Form Actions -->
+  <div style="background-color: white; border: 1px solid #dee2e6; border-radius: 8px; padding: 1.5rem;">
+    <div style="display: flex; justify-content: space-between; align-items: center;">
+      <div>
+        <%= form.submit "Update User", 
+            style: "background-color: #28a745; color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; margin-right: 1rem;" %>
+        <%= link_to "Cancel", cccux.user_path(@user), 
+            style: "color: #6c757d; text-decoration: none; padding: 0.75rem 1rem; font-size: 1rem;" %>
+      </div>
+      
+      <div>
+        <%= link_to "Delete User", cccux.user_path(@user), 
+            data: { "turbo-method": :delete, "turbo-confirm": "Are you sure? This will permanently delete the user and all their role assignments." },
+            style: "background-color: #dc3545; color: white; padding: 0.75rem 1.5rem; text-decoration: none; border-radius: 4px; font-size: 1rem;" %>
+      </div>
+    </div>
+  </div>
+<% end %>