Skip to content

FE 1.5 - Implement account management page UI #90

@notjackl3

Description

@notjackl3

Create the account management settings page UI following the provided design. This includes the admin settings page shell with sidebar navigation, the manage staff table, edit mode for member types, and the "+ New User" button. Here are some resources:

Notes:

  • Reuse existing layout, navigation, and table components where possible
  • Follow existing styling patterns and design tokens (purple accent for active sidebar items, consistent fonts and spacing)
  • Ensure responsive layout for mobile and desktop
  • The sidebar should highlight the currently active section ("Manage Staff")
  • Use placeholder/mock data for the staff table rows
  • No API integration in this ticket
  • Include a description of the ticket and the implementation in the PR (with screenshots showing default view, edit mode, and new user flow!)

The goal is to:

  • Create the Admin Settings page shell with sidebar navigation ("Account Information" and "Manage Staff") and main content area
  • Add a "Back to dashboard" button at the bottom of the sidebar linking back to the main dashboard
  • Set up routing so each sidebar item renders its respective content panel
  • Create the Manage Staff table with columns: Name, Email, Password, and Member Type
  • Display the "Member Type" column as a dropdown selector showing the current role (e.g., "Admin")
  • Add a "+ New User" button in the top-right corner above the table
  • Add an "Edit member type" button that enables edit mode for the table
    In edit mode, make the "Member Type" dropdown selectable/editable for each staff row
  • Display "Cancel" and "Save" buttons at the bottom-right in edit mode
  • Include input fields for Name, Email, Password, and Member Type for new users, with validation
  • Add a delete/remove action for each staff row
  • Show a confirmation dialog before deleting a user

Sub-issues

Metadata

Metadata

Labels

frontendthis ticket is part of the frontend

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions