FuSa SW Tool - Jherrod Thomas

Build a Manage Team Members module that allows users to add, view, and manage team members along with their roles, email addresses, and safety certifications. This module will help maintain team competency and compliance records.

Scope & Features¶

1. Team Members List¶

• Display team members in a card layout

• Each card should show:

  • Avatar with initials
  • Full Name
  • Role
  • Email address
  • Certifications (as tags/badges)

• Responsive layout (desktop & tablet)

2. Add Team Member¶

• “Add Team Member” button opens a modal

• Modal fields:

  • Name (required)
  • Role (required)
  • Email (required, validated format)
  • Certifications (optional, comma-separated)

• Buttons:

  • Add Member
  • Cancel

3. Edit Team Member¶

• Add an Edit (✏️) icon on each team member card

• Clicking the edit icon:

  • Opens the same “Add Team Member” modal
  • Modal fields are pre-filled with selected member data

• User can update:

  • Name
  • Role
  • Email
  • Certifications

• Validation rules remain the same as Add flow

• On save:

  • Changes reflect immediately in the team list

4. Delete Team Member¶

• Add a Delete (🗑️) icon on each team member card

• Clicking delete:

  • Opens a confirmation dialog

    • Message: “Are you sure you want to remove this team member?”

  • Actions:

    • Confirm → Member removed
    • Cancel → No action

• List updates instantly after deletion

5. Search & Filter¶

• Add a Search bar at the top of the Team page

• Search functionality:

  • Search by Name
  • Search by Role
  • Search by Certification

• Search should:

  • Be case-insensitive
  • Update results in real time

• If no results found:

  • Show empty state message: “No team members found”