# Pilot Analytics Dashboard - Task Checklist & Tracking

Use this checklist to track your daily progress. Update status as you move through each task.

## Source Files

This checklist is derived from the following source files:

- Primary: `Pilot_Dashboard_PO_Brief_v1.md` (v1.5)
- Primary: `Pilot_Dashboard_Requirements_v1.md` (v1.5)
- Supporting: `plan-pilotAnalyticsDashboard.prompt.md`
- Supporting: `Pilot-Dashboard-UI-UX-Design-Specification.md`
- Supporting visual reference: `Sample Pilot Dashboard.png` and the PyQt mockup

When source documents conflict, the v1.5 PO brief and v1.5 technical requirements take precedence.

---

## Phase 1: Foundation & Contracts (Days 1-6)

### Day 1: Extend JobStatus Enum

**Task 1.1** - Extend JobStatus enum + global constants
- [ ] Add `COMPLETED = 4` to JobStatus enum in global.ts
- [ ] Add `INVOICED = 5` to JobStatus enum in global.ts
- [ ] Update JobStatuses map with new status labels
- [ ] Update GC.selJobStatuses with new options
- [ ] Add new status to jobListStatus constants
- [ ] Update JobStatusPipe to handle new values
- [ ] Lint and verify no breaking changes
- [ ] **Commit:** `refactor(global): add completed and invoiced job statuses`

---

### Days 2-3: Dashboard Service Layer

**Task 1.2** - Design dashboard data contracts
- [ ] Create new file: `src/app/domain/models/pilot-dashboard.model.ts`
- [ ] Define `PilotKpiResponse` interface
- [ ] Define `PilotSummaryResponse` interface (today vs yesterday)
- [ ] Define `PilotOperationsResponse` interface
- [ ] Define `PilotActiveJobsResponse` interface
- [ ] Define `PilotTrendResponse` interface
- [ ] Define `PilotPerformanceResponse` interface
- [ ] Add detailed JSDoc comments to each

**Task 1.3** - Implement dashboard service
- [ ] Create `src/app/domain/services/pilot-dashboard.service.ts`
- [ ] Inject HttpClient
- [ ] Implement `getKpi()` → GET /api/dashboard/pilot/kpi
- [ ] Implement `getSummary()` → GET /api/dashboard/pilot/summary
- [ ] Implement `getActiveJobs()` → GET /api/dashboard/pilot/active-jobs
- [ ] Implement `getTrend(startDate, endDate)` → GET /api/dashboard/pilot/trend
- [ ] Implement `getPerformance()` → GET /api/dashboard/pilot/performance
- [ ] Add proper HttpParams for query strings
- [ ] Add operators like `catchError` for error handling
- [ ] **Commit:** `feat(dashboard): add pilot dashboard api service and response models`

**Task 1.4** - Add service unit tests
- [ ] Create `src/app/domain/services/pilot-dashboard.service.spec.ts`
- [ ] Mock HttpClient
- [ ] Test each endpoint method calls correct URL
- [ ] Test response type mapping
- [ ] Test error handling
- [ ] Verify tests pass: `ng test --include='*dashboard.service.spec.ts'`

**Task 1.5** - Setup mock data provider
- [ ] Create `src/app/shared/mock/pilot-dashboard-mock.ts`
- [ ] Export mock KPI data
- [ ] Export mock summary data
- [ ] Export mock active jobs (3-5 sample jobs)
- [ ] Export mock trend data (7 days)
- [ ] Export mock performance data
- [ ] Create `PilotDashboardMockService extends PilotDashboardService` (optional)
- [ ] Document how to use in development

---

### Day 4: Role-Based Home Branching

**Task 1.5** - Update dashboard component
- [ ] Open `src/app/dashboard/dashboard.component.ts`
- [ ] Inject `AuthService` and `PilotDashboardService`
- [ ] Add `isPilot$: Observable<boolean>` property
- [ ] Add `isPilot = this.authSvc.isPilotUser` getter
- [ ] Add component initialization logic

**Task 1.5b** - Update dashboard template
- [ ] Open `src/app/dashboard/dashboard.component.html`
- [ ] Replace entire template with:
  ```html
  <div class="ui-g">
    <ng-container *ngIf="authSvc.isPilotUser; then pilotDashboard; else disclaimerSection"></ng-container>
  </div>
  
  <ng-template #pilotDashboard>
    <agm-pilot-dashboard></agm-pilot-dashboard>
  </ng-template>
  
  <ng-template #disclaimerSection>
    <!-- Keep existing disclaimer template -->
  </ng-template>
  ```
- [ ] Keep existing disclaimer template intact
- [ ] **Commit:** `feat(home): add pilot-only dashboard branch with fallback disclaimer`

---

### Days 5-6: Backend Spec & Documentation

**Task 1.6** - Finalize backend API spec
- [ ] Create `docs/PILOT_DASHBOARD_API_SPEC.md`
- [ ] Document all 5 endpoint specs with:
  - [ ] Request path, method, query params
  - [ ] Request body (if POST)
  - [ ] Response shape (TypeScript interface)
  - [ ] Sample request/response JSON
  - [ ] Error cases (400, 401, 404, 500)
  - [ ] Pilot data isolation requirements (filter by Job.operator = pilotId)
- [ ] Get sign-off from backend team
- [ ] **Commit:** `docs(dashboard): specify pilot dashboard backend api contracts`

---

## Phase 2: Core UI Delivery (Days 7-14)

### Day 7: Responsive Layout Shell

**Task 2.1** - Build responsive grid layout
- [ ] Create new component: `src/app/dashboard/pilot-dashboard/pilot-dashboard.component.ts`
- [ ] Create template: `src/app/dashboard/pilot-dashboard/pilot-dashboard.component.html`
- [ ] Create styles: `src/app/dashboard/pilot-dashboard/pilot-dashboard.component.scss`
- [ ] Import in DashboardComponent
- [ ] Setup PrimeNG grid (p-grid, p-col):
  - [ ] Full-width KPI row
  - [ ] Two-column layout: left 65%, right 35%
  - [ ] Mobile: single column, stack all sections
- [ ] Add placeholder divs for each section
- [ ] Test responsive breakpoints (1920px, 1366px, 768px, 420px)
- [ ] **Commit:** `feat(dashboard-ui): add responsive pilot dashboard layout shell`

---

### Days 8-9: KPI Cards & Summary Strips

**Task 2.2** - Create KPI card component
- [ ] Create `src/app/dashboard/components/kpi-card/kpi-card.component.ts`
- [ ] Add `@Input() icon`, `@Input() value`, `@Input() unit`, `@Input() historical`
- [ ] Template: large value + mini historical lines
- [ ] Styles: card, icon, responsive text sizing
- [ ] No data loading yet (will wire to service later)

**Task 2.3** - Implement daily summary strip
- [x] Create `src/app/dashboard/components/daily-summary/daily-summary.component.ts`
- [x] Template: 5 metrics, each with trend arrow
- [x] Green up arrow for improvement, red down for decline
- [x] Styles: full-width dark green bar
- [x] Calculate deltas (today vs yesterday percentages)

**Task 2.4** - Add operations today panel
- [ ] Create `src/app/dashboard/components/operations-today/operations-today.component.ts`
- [ ] Template: distance (km) + spray volume (L)
- [ ] Styles: simple two-metric strip layout
- [ ] Do not include flights today in Phase 1 because current data is not reliable enough
- [ ] Keep data binding flexible for service calls

**Task 2.5** - Wire KPI + Summary to template
- [ ] Add KPI cards to main template (4 cards in row)
- [ ] Add daily summary below KPI
- [ ] Add operations today below summary
- [ ] Add mock data injection initially
- [ ] **Commit:** `feat(dashboard-kpi): implement kpi cards daily summary and operations strip`

---

### Days 10-12: Active Jobs Panel

**Task 2.6** - Build active jobs panel component
- [ ] Create `src/app/dashboard/components/active-jobs/active-jobs.component.ts`
- [ ] Create job row component: `job-row.component.ts`
- [ ] Template: scrollable list, each row shows:
  - [ ] Left color bar (blue/yellow/green)
  - [ ] Status badge
  - [ ] Aircraft tail + field name
  - [ ] Client name
  - [ ] Progress bar (visible for IN PROGRESS and COMPLETED only)
  - [ ] Ha sprayed / Ha total
  - [ ] Volume applied

**Task 2.7** - Implement status colors
- [ ] Define CSS classes for status colors:
  - [ ] `.status-new` = blue
  - [ ] `.status-in-progress` = yellow
  - [ ] `.status-completed` = green
- [ ] Add color to left edge bar
- [ ] Add color to status badge
- [ ] Add progress bar fill percentage

**Task 2.8** - Add row interactions
- [ ] Click row → navigate to job detail route
- [ ] Add "View All" link at bottom → /jobs
- [ ] Add hover effects (slight shadow/highlight)
- [ ] Make panel independently scrollable
- [ ] Test with 10+ mock jobs

**Task 2.9** - Add loading and empty states
- [ ] Show skeleton loaders while fetching
- [ ] Show "No jobs assigned" when empty
- [ ] Show error message on API failure
- [ ] **Commit:** `feat(active-jobs): implement status-driven list with progress and navigation`

---

### Days 13-14: Responsive Testing & Accessibility

**Task 2.10** - Responsive testing
- [ ] Test on mobile (420px width): stacks vertically
- [ ] Test on tablet (768px width): 65/35 split adjusted
- [ ] Test on desktop (1920px width): full layout
- [ ] Test orientation changes (portrait ↔ landscape)
- [ ] Verify text doesn't clip
- [ ] Verify scrolling works on all sections

**Task 2.11** - Accessibility audit
- [ ] Check ARIA labels on all interactive elements
- [ ] Verify keyboard navigation (Tab, Enter)
- [ ] Check color contrast ratios (WCAG AA)
- [ ] Verify focus indicators visible
- [ ] Test with screen reader (NVDA or JAWS)
- [ ] Run Lighthouse accessibility audit
- [ ] **Commit:** `test(dashboard-layout): add responsive and accessibility tests`

---

## Phase 3: Analytics & Polish (Days 15-22)

### Days 15-16: Charts & Date Range Control

**Task 3.1** - Integrate hours flown chart
- [ ] Create `src/app/dashboard/components/hours-chart/hours-chart.component.ts`
- [ ] Use PrimeNG `p-chart` component
- [ ] Chart type: line
- [ ] X-axis: Mon-Sun labels
- [ ] Y-axis: hours
- [ ] Mock data: 7 data points

**Task 3.2** - Integrate hectares per day chart
- [ ] Create `src/app/dashboard/components/hectares-chart/hectares-chart.component.ts`
- [ ] Chart type: bar
- [ ] X-axis: Mon-Sun labels
- [ ] Y-axis: hectares
- [ ] Add target line overlay (from dashboard spec)

**Task 3.3** - Build date range control
- [ ] Add PrimeNG Calendar (p-calendar) component above charts
- [ ] Default to current week (Mon-Sun)
- [ ] Allow user to select custom start/end dates
- [ ] Max range: 90 days
- [ ] Emit event on date change
- [ ] Re-fetch chart data on date change
- [ ] **Commit:** `feat(trends): add weekly trend charts with date range controls`

---

### Days 17-18: Performance Indicators

**Task 3.4** - Implement XT Error indicator
- [ ] Create `src/app/dashboard/components/xt-error-indicator/xt-error-indicator.component.ts`
- [ ] Display current XT Error value in meters
- [ ] Horizontal color bar:
  - [ ] Green: < 1.0 m (Good)
  - [ ] Yellow: 1.0 - 3.0 m (Monitor)
  - [ ] Red: > 3.0 m (Poor)
- [ ] Show threshold labels below bar


**Task 3.5** - Implement altitude indicator
- [ ] Create `src/app/dashboard/components/altitude-indicator/altitude-indicator.component.ts`
- [ ] Display current altitude in meters and feet
- [ ] Horizontal color bar:
  - [ ] Green: within ±0.15 m of 3.7 m target (Good)
  - [ ] Yellow: within ±0.46 m of target (Monitor)
  - [ ] Red: beyond ±0.46 m (Poor)
- [ ] Show threshold labels below bar
- [ ] Show altitude source (sprayHeight / radarAlt / GPS)

**Task 3.6** - Add no-data state
- [ ] If no altitude data available: show placeholder
- [ ] Message: "Altitude data not available (requires Flight Master or radar)"
- [ ] Don't crash if data missing
- [ ] **Commit:** `feat(performance): add xt error and altitude indicators with threshold bands`

---

### Days 19-20: Loading, Empty, & Error States

**Task 3.7** - Add loading skeletons
- [ ] Add skeleton loaders for:
  - [ ] KPI cards
  - [ ] Daily summary
  - [ ] Active jobs (3-row skeleton)
  - [ ] Charts (chart-shaped skeleton)
  - [ ] Indicators
- [ ] Use consistent skeleton styling
- [ ] Show during initial load and refresh

**Task 3.8** - Add empty states
- [ ] "No jobs assigned" for active jobs section
- [ ] "No data available" for charts with date range
- [ ] "No recent flights" for performance indicators
- [ ] Add friendly icons + messages

**Task 3.9** - Implement error handling
- [ ] Catch HTTP errors from all 5 endpoints
- [ ] Show toast notification on error
- [ ] Retry button for failed requests
- [ ] Fallback to empty state or mock data
- [ ] Log errors to console for debugging
- [ ] **Commit:** `feat(dashboard-state): add loading empty and error states for dashboard widgets`

---

### Days 21-22: i18n Integration

**Task 3.10** - Extract English strings
- [ ] Add $localize() calls to all new labels:
  ```typescript
  $localize`:@@assignedJobs:Assigned Jobs`
  $localize`:@@hectaresSprayed:Hectares Sprayed Today`
  // ... (all new strings)
  ```
- [ ] Update `src/locale/en-Application.json` with new keys
- [ ] Run extraction: `npm run i18n-extract`
- [ ] Verify messages.xlf has all new strings

**Task 3.11** - Generate PT & ES translations
- [ ] Run merge: `npm run i18n-merge`
- [ ] Translate new strings in PT (messages.pt.xlf)
- [ ] Translate new strings in ES (messages.es.xlf)
- [ ] Verify no hardcoded English in templates
- [ ] Test locale switching (browser locale or route param)

**Task 3.12** - Test i18n functionality
- [ ] Test EN version: all labels in English
- [ ] Test PT version: all labels in Portuguese
- [ ] Test ES version: all labels in Spanish
- [ ] Verify numbers/dates format per locale
- [ ] **Commit:** `feat(i18n): localize pilot dashboard labels for en pt es`

---

## Phase 4: QA, Integration & Release (Days 23-27)

### Days 23-24: Integration & End-to-End Testing

**Task 4.1** - Integration with backend (if available)
- [ ] Swap mock service with real PilotDashboardService
- [ ] Verify all 5 endpoints respond correctly
- [ ] Check response shapes match interfaces
- [ ] Verify data displays in UI without errors
- [ ] Test pagination/limits (if applicable)

**Task 4.2** - Role isolation testing
- [ ] Login as PILOT → see dashboard
- [ ] Login as APP → see disclaimer
- [ ] Login as ADMIN → see disclaimer
- [ ] Login as OFFICER → see disclaimer
- [ ] Login as CLIENT → see disclaimer
- [ ] Verify no console errors

**Task 4.3** - E2E user flow testing
- [ ] Login as pilot
- [ ] Dashboard loads with data
- [ ] Click KPI card (navigate to job or open detail view)
- [ ] Click job row → opens job detail page
- [ ] Click "View All" → navigates to /jobs
- [ ] Change date range → charts update
- [ ] **Commit:** `test(dashboard): add e2e and integration tests`

---

### Days 25-26: Cross-Browser & Performance Testing

**Task 4.4** - Cross-browser testing
- [ ] Chrome (latest)
- [ ] Safari (latest)
- [ ] Firefox (latest)
- [ ] Edge (latest)
- [ ] Mobile browsers (iOS Safari, Chrome Mobile)
- [ ] Verify layout, fonts, colors consistent

**Task 4.5** - Mobile device testing
- [ ] iPhone 12/13
- [ ] iPad
- [ ] Android phone (Samsung)
- [ ] Android tablet
- [ ] Test touch interactions, scroll, tap
- [ ] Verify text readable, buttons tappable

**Task 4.6** - Performance audit
- [ ] Run performance audit and record findings
- [ ] Check bundle size impact
- [ ] Analyze chart rendering performance (no lag)
- [ ] Check for memory leaks (DevTools profiler)
- [ ] Optimize if needed (lazy-load charts, virtual scroll)

**Task 4.7** - Regression testing
- [ ] Verify existing home page still works for non-pilots
- [ ] Verify existing jobs page unaffected
- [ ] Verify existing job detail page unaffected
- [ ] Run full test suite: `ng test`
- [ ] Run linter: `ng lint`
- [ ] **Commit:** `test(dashboard): add role isolation and regression tests`

---

### Day 27: Documentation & Release Prep

**Task 4.8** - Documentation
- [ ] Update README.md with feature section
- [ ] Document known limitations
- [ ] Add screenshots to feature doc
- [ ] Create user guide (pilot-facing)
- [ ] Add architecture notes for future maintainers

**Task 4.9** - Build & release preparation
- [ ] Build production: `ng build --prod --localize`
- [ ] Verify build succeeds for all locales
- [ ] Test build output in static server
- [ ] Create CHANGELOG entry
- [ ] Create release notes (features, fixes, known issues)
- [ ] **Commit:** `chore(dashboard): final ui polish and accessibility adjustments`
- [ ] **Commit:** `docs(dashboard): add pilot dashboard user guide and feature summary`

---

## Summary Progress Tracker

| Phase | Status | Days Actual | Notes |
|-------|--------|------------|-------|
| Phase 1 | Not Started | — | Foundation & contracts |
| Phase 2 | Not Started | — | Core UI (KPI, summary, active jobs) |
| Phase 3 | Not Started | — | Analytics & i18n |
| Phase 4 | Not Started | — | QA & release |

---

## Daily Standup Template

Use this daily to track progress:

```
### Day X (Date)

**Completed Today:**
- Task 1.1: Extended JobStatus enum
- Task 1.2: Designed dashboard models

**In Progress:**
- Task 1.3: Implementing service layer (50% done)

**Blocked:**
- None

**Next Day Plan:**
- Complete Task 1.3 service implementation
- Start unit tests for service
- Setup mock data provider

**Notes:**
- Chart.js 2.9.3 tested OK with PrimeNG
- XT thresholds and altitude bands aligned to v1.5 requirement docs
```

---

## Useful Commands

```bash
# Development server
npm start

# Run tests
ng test
ng test --include='*dashboard*.spec.ts'  # Dashboard tests only

# Linting
ng lint

# Build production
ng build --prod --localize

# i18n workflow
npm run sync-i18n          # Extract + merge (macOS/Linux)
npm run sync-i18n-w        # Extract + merge (Windows)

# Generate coverage report
ng test --code-coverage

# Bundle analysis
npm run bundle-report
```

---

Last Updated: April 28, 2026