🎨 Custom Task Status Manager Component Test

1. Backend Server Running

Ensure the backend server is running on http://localhost:8000

2. Frontend Server Running

Ensure the frontend development server is running on http://localhost:5173

3. User Authentication

You must be logged in as a coordinator or admin user

4. Test Project

You need at least one project in the system to test with

Step 1: Navigate to Project Settings

1. Go to http://localhost:5173

2. Click on a project from the projects list

3. Click on the "Settings" or gear icon to access project settings

Expected: You should see the Project Settings page with multiple tabs

Step 2: Navigate to Tasks Tab

1. Click on the "Tasks" tab in the Project Settings page

Expected: You should see the Tasks tab content with three sections:

• Custom Task Statuses (NEW - at the top)
• Custom Task Types
• Default Task Templates Editor

Step 3: Verify Custom Task Status Manager Display

Check that the Custom Task Status Manager section displays:

• ✅ Section header: "Custom Task Statuses"
• ✅ Description text about defining custom statuses
• ✅ System Statuses section with shield icon
• ✅ List of system statuses (not_started, in_progress, submitted, approved, retake)
• ✅ Each system status shows:
  • Color indicator (colored circle)
  • Status name (formatted with spaces)
  • "System" badge
  • Task count (currently showing "0 tasks")

Step 4: Verify Custom Statuses Section

Check the Custom Statuses section:

• ✅ Section header: "Custom Statuses" with palette icon
• ✅ "Add Status" button on the right
• ✅ If no custom statuses exist: Shows empty state message
• ✅ If custom statuses exist: Shows list with:
  • Color indicator
  • Status name
  • "Default" badge with star icon (if default)
  • "Custom" badge (if not default)
  • Task count
  • Edit button (pencil icon)
  • Delete button (trash icon)

Step 5: Test Loading States

1. Refresh the page while on the Tasks tab

Expected: You should see a loading spinner while data is being fetched

Step 6: Test Button Interactions (Placeholder)

1. Click the "Add Status" button

Expected: Toast notification saying "Coming Soon - Add status dialog will be implemented in the next task"

2. If custom statuses exist, click the Edit button on a status

Expected: Toast notification saying "Coming Soon - Edit status dialog will be implemented in the next task"

3. If custom statuses exist, click the Delete button on a status

Expected: Toast notification saying "Coming Soon - Delete status dialog will be implemented in the next task"

Component Not Visible

If the component doesn't appear:

• Check browser console for errors
• Verify you're on the "Tasks" tab in Project Settings
• Ensure you have proper permissions (coordinator or admin)
• Check that the backend API is responding correctly

Loading State Never Completes

If the loading spinner never disappears:

• Check browser console for API errors
• Verify backend server is running
• Check network tab for failed requests
• Ensure project ID is valid

System Statuses Not Showing

If system statuses don't appear:

• Check the API response in network tab
• Verify the backend is returning system_statuses array
• Check browser console for data parsing errors