feat: Add header and sidebar UI components with user profile management and authentication features.

Author: pphatdev

src/client/views/components/header.ejs

@@ -46,7 +46,10 @@
                     </div>
                     <div>
                         <p id="user-name" class="text-sm font-semibold text-slate-900">User</p>
-                        <p id="user-email" class="text-xs text-slate-500">user@stackdev.cloud</p>
+                        <div class="flex items-center gap-2">
+                            <p id="user-email" class="text-xs text-slate-500">user@stackdev.cloud</p>
+                            <span id="user-role-badge" class="px-1.5 py-0.5 text-[10px] font-bold rounded uppercase tracking-wider bg-primary/10 text-primary">Role</span>
+                        </div>
                     </div>
                 </div>
                 <div class="py-2">
@@ -85,6 +88,21 @@
                 if (userName) userName.textContent = user.name;
                 if (userEmail) userEmail.textContent = user.email || "";
                 
+                const userRoleBadge = document.getElementById("user-role-badge");
+                if (userRoleBadge) {
+                    const role = user.role || 'user';
+                    userRoleBadge.textContent = role === 'user' ? 'Author' : role;
+                    
+                    // Simple color coding for roles
+                    if (role === 'admin') {
+                        userRoleBadge.className = "px-1.5 py-0.5 text-[10px] font-bold rounded uppercase tracking-wider bg-orange-100 text-orange-700";
+                    } else if (role === 'viewer') {
+                        userRoleBadge.className = "px-1.5 py-0.5 text-[10px] font-bold rounded uppercase tracking-wider bg-slate-100 text-slate-700";
+                    } else {
+                        userRoleBadge.className = "px-1.5 py-0.5 text-[10px] font-bold rounded uppercase tracking-wider bg-primary/10 text-primary";
+                    }
+                }
+                
                 const defaultAvatar = `https://ui-avatars.com/api/?name=${encodeURIComponent(user.name)}&background=0f766e&color=fff`;
                 const avatarUrl = user.avatar || defaultAvatar;
 

src/client/views/layouts/sidebar.ejs

@@ -11,6 +11,11 @@
 
     <nav class="space-y-1 mb-10">
         <% modules.forEach(function(module) { 
+            // Role-based visibility check
+            if (module.roles && (!locals.user || !module.roles.includes(locals.user.role))) {
+                return;
+            }
+
             const isActive = module.activeUrls 
                 ? module.activeUrls.some(u => currentPath === u || currentPath.startsWith(u + '/'))
                 : (currentPath === module.url || currentPath.startsWith(module.url + '/'));

src/client/views/pages/users.ts

@@ -193,7 +193,7 @@ function renderUsers() {
                 <td class="px-6 py-4 text-sm text-foreground/80">${user.email || '-'}</td>
                 <td class="px-6 py-4">
                     <span class="px-2 py-1 text-xs font-medium rounded-full ${getRoleBadgeClass(user.role)}">
-                        ${user.role}
+                        ${getRoleDisplayName(user.role)}
                     </span>
                 </td>
                 <td class="px-6 py-4">
@@ -233,6 +233,11 @@ function getRoleBadgeClass(role: UserRole): string {
     return classes[role as keyof typeof classes] || classes.user;
 }
 
+function getRoleDisplayName(role: UserRole): string {
+    if (role === 'user') return 'Author';
+    return role.charAt(0).toUpperCase() + role.slice(1);
+}
+
 function formatDate(dateString?: string | null): string {
     if (!dateString) return 'Never';
     const date = new Date(dateString);