cccux 0.1.0

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

@@ -0,0 +1,99 @@
+<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
+  <h1>User Management</h1>
+  <%= link_to "New User", cccux.new_user_path, 
+      style: "background-color: #007bff; color: white; padding: 0.5rem 1rem; text-decoration: none; border-radius: 4px;" %>
+</div>
+
+<div style="background-color: #e7f3ff; border: 1px solid #b8daff; padding: 1rem; border-radius: 4px; margin-bottom: 2rem;">
+  <h4 style="margin-top: 0; color: #004085;">👥 User Management</h4>
+  <p style="color: #004085; font-size: 0.9rem; margin-bottom: 0;">
+    Manage users and their role assignments. Users automatically get the "Basic User" role when created.
+    You can assign additional roles or modify existing assignments.
+  </p>
+</div>
+
+<% if @users.any? %>
+  <div style="background-color: white; border: 1px solid #dee2e6; border-radius: 8px; overflow: hidden;">
+    <table style="width: 100%; border-collapse: collapse;">
+      <thead style="background-color: #f8f9fa;">
+        <tr>
+          <th style="padding: 1rem; text-align: left; border-bottom: 1px solid #dee2e6; font-weight: bold; color: #495057;">ID</th>
+          <th style="padding: 1rem; text-align: left; border-bottom: 1px solid #dee2e6; font-weight: bold; color: #495057;">Email</th>
+          <th style="padding: 1rem; text-align: left; border-bottom: 1px solid #dee2e6; font-weight: bold; color: #495057;">Roles</th>
+          <th style="padding: 1rem; text-align: left; border-bottom: 1px solid #dee2e6; font-weight: bold; color: #495057;">Created</th>
+          <th style="padding: 1rem; text-align: center; border-bottom: 1px solid #dee2e6; font-weight: bold; color: #495057;">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @users.each do |user| %>
+          <tr style="border-bottom: 1px solid #f8f9fa;">
+            <td style="padding: 1rem; color: #6c757d; font-size: 0.9rem; font-family: monospace;">
+              #<%= user.id %>
+            </td>
+            <td style="padding: 1rem; color: #495057;">
+              <strong><%= user.email %></strong>
+              <% if user.created_at > 24.hours.ago %>
+                <span style="background-color: #d4edda; color: #155724; padding: 0.25rem 0.5rem; border-radius: 12px; font-size: 0.75rem; margin-left: 0.5rem;">NEW</span>
+              <% end %>
+            </td>
+            <td style="padding: 1rem;">
+              <% if user.cccux_roles.any? %>
+                <% user.cccux_roles.each do |role| %>
+                  <span style="background-color: #e7f3ff; color: #0066cc; padding: 0.25rem 0.5rem; border-radius: 12px; font-size: 0.75rem; margin-right: 0.25rem; margin-bottom: 0.25rem; display: inline-block;">
+                    <%= role.name %>
+                  </span>
+                <% end %>
+              <% else %>
+                <span style="color: #6c757d; font-style: italic; font-size: 0.9rem;">No roles assigned</span>
+              <% end %>
+            </td>
+            <td style="padding: 1rem; color: #6c757d; font-size: 0.9rem;">
+              <%= user.created_at.strftime('%b %d, %Y') %>
+            </td>
+            <td style="padding: 1rem; text-align: center;">
+              <div style="display: flex; gap: 0.5rem; justify-content: center;">
+                <%= link_to "View", cccux.user_path(user), 
+                    style: "color: #007bff; text-decoration: none; font-size: 0.9rem;" %>
+                <%= link_to "Edit", cccux.edit_user_path(user), 
+                    style: "color: #28a745; text-decoration: none; font-size: 0.9rem;" %>
+                <%= link_to "Delete", cccux.user_path(user), 
+                    data: { "turbo-method": :delete, "turbo-confirm": "Are you sure? This will permanently delete the user." },
+                    style: "color: #dc3545; text-decoration: none; font-size: 0.9rem;" %>
+              </div>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+
+  <div style="margin-top: 1rem; color: #6c757d; font-size: 0.9rem; text-align: center;">
+    Showing <%= @users.count %> users
+  </div>
+<% else %>
+  <div style="text-align: center; padding: 3rem; background-color: #f8f9fa; border-radius: 8px;">
+    <h3 style="color: #495057; margin-bottom: 1rem;">No users found</h3>
+    <p style="color: #6c757d; margin-bottom: 2rem;">Get started by creating your first user.</p>
+    <%= link_to "Create First User", cccux.new_user_path, 
+        style: "background-color: #007bff; color: white; padding: 0.75rem 1.5rem; text-decoration: none; border-radius: 4px; font-weight: bold;" %>
+  </div>
+<% end %>
+
+<!-- Quick Stats -->
+<div style="margin-top: 2rem; padding: 1rem; background-color: #f8f9fa; border-radius: 8px;">
+  <h4 style="margin-top: 0; color: #495057;">Quick Stats</h4>
+  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
+    <div style="text-align: center;">
+      <div style="font-size: 1.5rem; font-weight: bold; color: #007bff;"><%= @users.count %></div>
+      <div style="color: #6c757d; font-size: 0.9rem;">Total Users</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="font-size: 1.5rem; font-weight: bold; color: #28a745;"><%= @users.joins(:cccux_roles).distinct.count %></div>
+      <div style="color: #6c757d; font-size: 0.9rem;">Users with Roles</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="font-size: 1.5rem; font-weight: bold; color: #ffc107;"><%= @roles.count %></div>
+      <div style="color: #6c757d; font-size: 0.9rem;">Available Roles</div>
+    </div>
+  </div>
+</div> 

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

@@ -0,0 +1,94 @@
+<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
+  <h1>Create New User</h1>
+  <%= link_to "← Back to Users", cccux.users_path, 
+      style: "background-color: #6c757d; color: white; padding: 0.5rem 1rem; text-decoration: none; border-radius: 4px;" %>
+</div>
+
+<%= form_with model: [@user], url: cccux.users_path, 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, 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;">Minimum 6 characters</small>
+      </div>
+
+      <div style="margin-bottom: 1.5rem;">
+        <%= form.label :password_confirmation, 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>
+    
+    <!-- Role Assignment -->
+    <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: #e7f3ff; border: 1px solid #b8daff; padding: 1rem; border-radius: 4px; margin-bottom: 1rem;">
+        <p style="margin: 0; color: #004085; font-size: 0.9rem;">
+          <strong>Note:</strong> Users automatically receive the "Basic User" role when created. 
+          You can assign additional roles here.
+        </p>
+      </div>
+      
+      <% if @roles.any? %>
+        <div style="max-height: 200px; overflow-y: auto; border: 1px solid #e9ecef; border-radius: 4px; padding: 0.5rem;">
+          <% @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, false, 
+                  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 %>
+              <% end %>
+            </div>
+          <% end %>
+        </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 "Create 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.users_path, 
+            style: "color: #6c757d; text-decoration: none; padding: 0.75rem 1rem; font-size: 1rem;" %>
+      </div>
+      
+      <div style="color: #6c757d; font-size: 0.9rem;">
+        <em>User will receive login credentials and can change password after first login</em>
+      </div>
+    </div>
+  </div>
+<% end %> 

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

@@ -0,0 +1,138 @@
+<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
+  <h1>User: <%= @user.email %></h1>
+  <div>
+    <%= link_to "Edit", cccux.edit_user_path(@user), 
+        style: "background-color: #28a745; color: white; padding: 0.5rem 1rem; text-decoration: none; border-radius: 4px; margin-right: 0.5rem;" %>
+    <%= link_to "← Back to Users", cccux.users_path, 
+        style: "background-color: #6c757d; color: white; padding: 0.5rem 1rem; text-decoration: none; border-radius: 4px;" %>
+  </div>
+</div>
+
+<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
+  <!-- User Details -->
+  <div style="background-color: white; border: 1px solid #dee2e6; border-radius: 8px; padding: 1.5rem;">
+    <h3 style="margin-top: 0; color: #495057;">User Details</h3>
+    
+    <div style="margin-bottom: 1rem;">
+      <strong style="color: #495057;">Email:</strong>
+      <span style="display: block; margin-top: 0.25rem; color: #6c757d;"><%= @user.email %></span>
+    </div>
+    
+    <div style="margin-bottom: 1rem;">
+      <strong style="color: #495057;">Account Created:</strong>
+      <span style="display: block; margin-top: 0.25rem; color: #6c757d;">
+        <%= @user.created_at.strftime('%B %d, %Y at %I:%M %p') %>
+      </span>
+    </div>
+    
+    <div style="margin-bottom: 1rem;">
+      <strong style="color: #495057;">Last Updated:</strong>
+      <span style="display: block; margin-top: 0.25rem; color: #6c757d;">
+        <%= @user.updated_at.strftime('%B %d, %Y at %I:%M %p') %>
+      </span>
+    </div>
+    
+    <div>
+      <strong style="color: #495057;">Total Roles:</strong>
+      <span style="display: block; margin-top: 0.25rem; color: #6c757d;">
+        <%= pluralize(@user_roles.count, 'role') %> assigned
+      </span>
+    </div>
+  </div>
+  
+  <!-- Current Roles -->
+  <div style="background-color: white; border: 1px solid #dee2e6; border-radius: 8px; padding: 1.5rem;">
+    <h3 style="margin-top: 0; color: #495057;">Current Roles (<%= @user_roles.count %>)</h3>
+    
+    <% if @user_roles.any? %>
+      <div style="margin-bottom: 1.5rem;">
+        <% @user_roles.each do |role| %>
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; border: 1px solid #e9ecef; border-radius: 4px; margin-bottom: 0.5rem;">
+            <div>
+              <strong style="color: #495057;"><%= role.name %></strong>
+              <% if role.description.present? %>
+                <br><small style="color: #6c757d;"><%= role.description %></small>
+              <% end %>
+            </div>
+            <div>
+              <span style="background-color: #e7f3ff; color: #0066cc; padding: 0.25rem 0.5rem; border-radius: 12px; font-size: 0.75rem;">
+                <%= pluralize(role.ability_permissions.count, 'permission') %>
+              </span>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    <% else %>
+      <div style="text-align: center; padding: 2rem; color: #6c757d; font-style: italic; border: 2px dashed #dee2e6; border-radius: 4px;">
+        No roles assigned to this user
+      </div>
+    <% end %>
+    
+    <!-- Quick Role Assignment -->
+    <% if @available_roles.any? %>
+      <div style="border-top: 1px solid #dee2e6; padding-top: 1rem; margin-top: 1rem;">
+        <h5 style="margin-bottom: 0.5rem; color: #495057;">Quick Assign Role:</h5>
+        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
+          <% @available_roles.limit(3).each do |role| %>
+            <%= link_to "+ #{role.name}", cccux.assign_role_user_path(@user, role_id: role.id), 
+                method: :post,
+                style: "background-color: #28a745; color: white; padding: 0.25rem 0.5rem; text-decoration: none; border-radius: 12px; font-size: 0.8rem;" %>
+          <% end %>
+          <% if @available_roles.count > 3 %>
+            <span style="color: #6c757d; font-size: 0.8rem; padding: 0.25rem;">
+              + <%= @available_roles.count - 3 %> more (use Edit)
+            </span>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
+
+<!-- Role Permissions Matrix -->
+<% if @user_roles.any? %>
+  <div style="background-color: white; border: 1px solid #dee2e6; border-radius: 8px; padding: 1.5rem; margin-top: 2rem;">
+    <h3 style="margin-top: 0; color: #495057;">Effective Permissions</h3>
+    <p style="color: #6c757d; font-size: 0.9rem; margin-bottom: 1rem;">
+      All permissions this user has through their assigned roles:
+    </p>
+    
+    <% permissions_by_subject = @user_roles.flat_map(&:ability_permissions).group_by(&:subject) %>
+    <% if permissions_by_subject.any? %>
+      <div style="max-height: 400px; overflow-y: auto; border: 1px solid #e9ecef; border-radius: 4px;">
+        <% permissions_by_subject.each do |subject, permissions| %>
+          <div style="padding: 1rem; border-bottom: 1px solid #f8f9fa;">
+            <h5 style="margin: 0 0 0.5rem 0; color: #495057;"><%= subject %></h5>
+            <div style="display: flex; flex-wrap: wrap; gap: 0.25rem;">
+              <% permissions.uniq.each do |permission| %>
+                <span style="background-color: #e7f3ff; color: #0066cc; padding: 0.2rem 0.4rem; border-radius: 3px; font-size: 0.75rem;">
+                  <%= permission.action %>
+                </span>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    <% else %>
+      <div style="text-align: center; padding: 2rem; color: #6c757d; font-style: italic;">
+        No permissions available (roles may not have permissions assigned)
+      </div>
+    <% end %>
+  </div>
+<% end %>
+
+<!-- Actions -->
+<div style="margin-top: 2rem; padding: 1rem; background-color: #f8f9fa; border-radius: 8px;">
+  <h4 style="margin-top: 0; color: #495057;">Actions</h4>
+  <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
+    <%= link_to "Edit User & Roles", cccux.edit_user_path(@user), 
+        style: "background-color: #007bff; color: white; padding: 0.5rem 1rem; text-decoration: none; border-radius: 4px;" %>
+    <%= link_to "View All Users", cccux.users_path, 
+        style: "background-color: #6f42c1; color: white; padding: 0.5rem 1rem; text-decoration: none; border-radius: 4px;" %>
+    <%= link_to "Manage Roles", cccux.roles_path, 
+        style: "background-color: #fd7e14; color: white; padding: 0.5rem 1rem; text-decoration: none; border-radius: 4px;" %>
+    <%= 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.5rem 1rem; text-decoration: none; border-radius: 4px;" %>
+  </div>
+</div> 

data/app/views/layouts/cccux/admin.html.erb

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CCCUX Authorization Admin</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "stylesheets/cccux/application", "data-turbo-track": "reload" %>
+    <%= javascript_importmap_tags %>
+    
+    <!-- Sortable.js for drag and drop -->
+    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
+    
+    <!-- Drag and drop styles -->
+    <style>
+      .sortable-ghost {
+        opacity: 0.4;
+        background-color: #f8f9fa !important;
+      }
+      
+      .sortable-chosen {
+        box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
+      }
+      
+      .sortable-drag {
+        opacity: 0.8;
+        transform: rotate(5deg);
+      }
+      
+      .role-card:hover {
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        border-color: #007bff;
+      }
+      
+      .drag-handle:hover {
+        color: #007bff !important;
+      }
+    </style>
+  </head>
+
+  <body>
+    <!-- Turbo Loading Indicator -->
+    <div id="turbo-indicator" style="position: fixed; top: 10px; right: 10px; background: #28a745; color: white; padding: 0.5rem; border-radius: 4px; display: none; z-index: 9999;">
+      🚀 Turbo Loading...
+    </div>
+    
+    <script>
+      // Show loading indicator during Turbo navigation
+      document.addEventListener('turbo:before-visit', () => {
+        const indicator = document.getElementById('turbo-indicator');
+        if (indicator) indicator.style.display = 'block';
+        console.log('🚀 TURBO: Starting navigation...');
+      });
+      
+      document.addEventListener('turbo:load', () => {
+        const indicator = document.getElementById('turbo-indicator');
+        if (indicator) indicator.style.display = 'none';
+        console.log('✅ TURBO: Page loaded!');
+      });
+      
+      // For comparison - this fires on traditional page loads
+      document.addEventListener('DOMContentLoaded', () => {
+        console.log('📄 TRADITIONAL: Full page load');
+      });
+      
+      // Initialize role drag and drop
+      function initializeRoleSorting() {
+        const rolesList = document.getElementById('roles_list');
+        if (rolesList && window.Sortable) {
+          new Sortable(rolesList, {
+            animation: 150,
+            ghostClass: 'sortable-ghost',
+            chosenClass: 'sortable-chosen',
+            dragClass: 'sortable-drag',
+            handle: '.role-card',
+            onEnd: function(evt) {
+              // Get the new order of role IDs
+              const roleIds = Array.from(rolesList.children).map(card => 
+                card.dataset.roleId
+              );
+              
+              // Send AJAX request to update priorities
+              const reorderUrl = rolesList.dataset.reorderUrl;
+              fetch(reorderUrl, {
+                method: 'PATCH',
+                headers: {
+                  'Content-Type': 'application/json',
+                  'X-CSRF-Token': document.querySelector('[name="csrf-token"]').content
+                },
+                body: JSON.stringify({ role_ids: roleIds })
+              })
+              .then(response => response.json())
+              .then(data => {
+                if (data.success) {
+                  console.log('✅ Role priorities updated successfully');
+                  // Update priority badges
+                  updatePriorityBadges(roleIds);
+                } else {
+                  console.error('❌ Failed to update role priorities:', data.error);
+                  // Revert the visual change
+                  location.reload();
+                }
+              })
+              .catch(error => {
+                console.error('❌ Error updating role priorities:', error);
+                location.reload();
+              });
+            }
+          });
+        }
+      }
+      
+      // Update priority badges after reordering
+      function updatePriorityBadges(roleIds) {
+        roleIds.forEach((roleId, index) => {
+          const card = document.querySelector(`[data-role-id="${roleId}"]`);
+          const priorityBadge = card.querySelector('.priority-badge');
+          if (priorityBadge) {
+            const newPriority = (index + 1) * 10;
+            priorityBadge.textContent = `Priority: ${newPriority}`;
+          }
+        });
+      }
+      
+      // Initialize on both DOMContentLoaded and turbo:load
+      document.addEventListener('DOMContentLoaded', initializeRoleSorting);
+      document.addEventListener('turbo:load', initializeRoleSorting);
+    </script>
+    
+    <nav class="navbar" style="background-color: #f8f9fa; padding: 1rem; border-bottom: 1px solid #dee2e6;">
+      <div class="container-fluid" style="display: flex; justify-content: space-between; align-items: center;">
+        <div>
+          <%= link_to "CCCUX Authorization", cccux.root_path, style: "font-weight: bold; text-decoration: none; font-size: 1.2rem; color: #007bff;" %>
+          <span style="margin-left: 1rem;">
+            <%= link_to "Dashboard", cccux.root_path, style: "margin-right: 1rem; text-decoration: none;" %>
+            <%= link_to "Users", cccux.users_path, style: "margin-right: 1rem; text-decoration: none;" %>
+            <%= link_to "Roles", cccux.roles_path, style: "margin-right: 1rem; text-decoration: none;" %>
+            <%= link_to "Permissions", cccux.ability_permissions_path, style: "margin-right: 1rem; text-decoration: none;" %>
+            <%= link_to "← Home", main_app.root_path, style: "text-decoration: none; color: #28a745; font-weight: bold;" %>
+          </span>
+        </div>
+        <div>
+          <span style="margin-right: 1rem; color: #666;">
+            Admin Panel
+          </span>
+        </div>
+      </div>
+    </nav>
+    
+    <div class="container" style="max-width: 1200px; margin: 0 auto; padding: 2rem;">
+      <% if notice %>
+        <div class="alert alert-success" style="background-color: #d1edff; border: 1px solid #0c5460; padding: 1rem; margin-bottom: 1rem; border-radius: 4px;">
+          <%= notice %>
+        </div>
+      <% end %>
+      
+      <% if alert %>
+        <div class="alert alert-danger" style="background-color: #f8d7da; border: 1px solid #721c24; padding: 1rem; margin-bottom: 1rem; border-radius: 4px;">
+          <%= alert %>
+        </div>
+      <% end %>
+      
+      <%= yield %>
+    </div>
+  </body>
+</html> 

data/app/views/layouts/cccux/application.html.erb

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Cccux</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= stylesheet_link_tag    "cccux/application", media: "all" %>
+</head>
+<body>
+
+<%= yield %>
+
+<%= render 'shared/footer' %>
+
+</body>
+</html>

data/app/views/shared/_footer.html.erb

@@ -0,0 +1,101 @@
+<footer class="footer">
+  <div class="footer-content">
+    <div class="footer-nav">
+      <% if defined?(current_user) && current_user %>
+        <%= link_to "Home", main_app.root_path, class: "footer-link" %>
+
+        <%= link_to "Dashboard", cccux.root_path, class: "footer-link" %>
+        <%= link_to "Orders", "/orders", class: "footer-link" %>
+        <% if respond_to?(:roles_path) %>
+          <%= link_to "Roles", cccux.roles_path, class: "footer-link" %>
+        <% end %>
+      <% else %>
+        <%= link_to "Home", main_app.root_path, class: "footer-link" %>
+        <%= link_to "Dashboard", cccux.root_path, class: "footer-link" %>
+      <% end %>
+    </div>
+    
+    <div class="footer-auth">
+      <% if defined?(current_user) && current_user %>
+        <span class="user-info">
+          Welcome, <%= current_user.respond_to?(:first_name) ? current_user.first_name : current_user.email %>
+        </span>
+        <%= link_to "Logout", main_app.destroy_user_session_path, method: :delete, class: "footer-link auth-link", data: { turbo_method: :delete } %>
+      <% else %>
+        <%= link_to "Login", main_app.new_user_session_path, class: "footer-link auth-link" %>
+        <%= link_to "Sign Up", main_app.new_user_registration_path, class: "footer-link auth-link" %>
+      <% end %>
+    </div>
+  </div>
+</footer>
+
+<style>
+.footer {
+  background-color: #f8f9fa;
+  border-top: 1px solid #dee2e6;
+  padding: 15px 0;
+  margin-top: 40px;
+  position: relative;
+  bottom: 0;
+  width: 100%;
+}
+
+.footer-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  flex-wrap: wrap;
+}
+
+.footer-nav, .footer-auth {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.footer-link {
+  color: #6c757d;
+  text-decoration: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.footer-link:hover {
+  color: #495057;
+  background-color: #e9ecef;
+  text-decoration: none;
+}
+
+.footer-link.auth-link {
+  color: #007bff;
+  font-weight: 500;
+}
+
+.footer-link.auth-link:hover {
+  color: #0056b3;
+  background-color: #e7f3ff;
+}
+
+.user-info {
+  color: #6c757d;
+  font-size: 14px;
+  margin-right: 10px;
+}
+
+@media (max-width: 768px) {
+  .footer-content {
+    flex-direction: column;
+    gap: 15px;
+    text-align: center;
+  }
+  
+  .footer-nav, .footer-auth {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}
+</style>