# Custom Task Status Manager Test

# 🎨 Custom Task Status Manager Component Test

## Test Overview

This test verifies the CustomTaskStatusManager component displays correctly in the Project Settings page.

Component: `frontend/src/components/settings/CustomTaskStatusManager.vue`

Requirements: 1.1, 8.1, 8.2, 8.3

## Prerequisites

### 1. Backend Server Running

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

`cd backend && uvicorn main:app --reload`

### 2. Frontend Server Running

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

`cd frontend && npm run dev`

### 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

## Test Steps

### 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"

## Visual Verification Checklist

- ☐ Component renders without errors
- ☐ System statuses section displays correctly
- ☐ All 5 system statuses are shown (not_started, in_progress, submitted, approved, retake)
- ☐ Each status has a colored circle indicator
- ☐ Status names are properly formatted (underscores replaced with spaces)
- ☐ "System" badges are visible on system statuses
- ☐ Task counts are displayed (showing "0 tasks" for now)
- ☐ Custom statuses section displays correctly
- ☐ "Add Status" button is visible and clickable
- ☐ Empty state message shows when no custom statuses exist
- ☐ Loading state works (spinner shows during data fetch)
- ☐ No console errors in browser developer tools
- ☐ Component styling matches the rest of the application
- ☐ Hover effects work on custom status rows

## Known Limitations (To Be Implemented)

Note: The following features are placeholders and will be implemented in subsequent tasks:

- Add Status dialog (Task 12)
- Edit Status dialog (Task 12)
- Delete Status confirmation (Task 13)
- Drag-and-drop reordering (Task 14)
- Set as Default functionality (Task 15)
- Actual task count fetching from API (requires backend enhancement)

## API Endpoints Used

- `GET /projects/{project_id}/task-statuses` - Fetch all task statuses

## Troubleshooting

### 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

## Success Criteria

✅ Task 11 is complete when:

- CustomTaskStatusManager component renders without errors
- System statuses section displays all 5 system statuses correctly
- Custom statuses section displays with "Add Status" button
- Visual indicators (colors, badges) display correctly
- Task counts are shown for each status (even if 0)
- Loading and error states work properly
- Component is properly integrated into Project Settings Tasks tab
- No TypeScript or console errors

## Next Steps

After verifying this component works correctly, the following tasks will add functionality:

- Task 12: Implement Add/Edit status dialog
- Task 13: Implement status deletion with confirmation
- Task 14: Implement drag-and-drop reordering
- Task 15: Implement default status management