Implement role-based UI enforcement for admin/member/viewer hierarchy

[Copilot]

Frontend was using hardcoded isAdmin = true placeholders. Backend already has role system (admin/member/viewer) with JWT tokens containing role claims.

Changes

Auth utilities (frontend/src/utils/auth.js)

• Extracts role from localStorage user object
• Provides isAdmin(), isMember(), hasRole() helpers with hierarchical checks

Component updates

• Navbar: Role badge with color coding (red/blue/gray)
• BoardsList: Hide create button (member+), delete icons (admin)
• BoardViewPage: Hide column/card creation (member+), column deletion (admin)
• EditTicketModal: Disable all fields + hide save/delete for viewers
• CommentThread: Hide comment input for viewers

Test infrastructure

• create-test-users.js script for seeding admin/member/viewer accounts
• Documentation with permission matrix and test cases

Example

// Before
const isAdmin = true;  // Hardcoded

// After
import { isAdmin, isMember } from '../utils/auth';

const userIsAdmin = isAdmin();
const userIsMember = isMember();

{userIsMember && <Button>Create Board</Button>}
{userIsAdmin && <IconButton><DeleteIcon /></IconButton>}

Role hierarchy enforced: viewers read-only, members create/edit, admins delete boards/columns.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>(CT) Role Enforcement UI/UX</issue_title>
<issue_description>Backend provides user role/permissions
Frontend shows/hides features based on roles
Test permission boundaries</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes (CT) Role Enforcement UI/UX #66

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.