agnav/agmission
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
e41ea6c8b3
agmission/Development/client/docs/PILOT_DASHBOARD_TASK_CHECKLIST.md

17 KiB
Raw Blame History

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

  • Create src/app/dashboard/components/daily-summary/daily-summary.component.ts
  • Template: 5 metrics, each with trend arrow
  • Green up arrow for improvement, red down for decline
  • Styles: full-width dark green bar
  • 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: 
    $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

# 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