agmission/Development/client/docs/PILOT_DASHBOARD_QUICK_REFERENCE.md

14 KiB

Pilot Analytics Dashboard - Quick Reference Summary

Project Name: Pilot Analytics Dashboard
Duration: 4-5 weeks (22-27 working days)
Target Go-Live: Late May 2026
Team: Frontend (8 days setup + core delivery) + Backend parallel (8-13 days if needed)

Source Files

This quick reference 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.


At a Glance

┌─────────────────────────────────────────────────────────────────┐
│                   TOTAL PROJECT TIMELINE                        │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  Week 1: Phase 1 (Foundation) ████░░░░░░░░░░░ [Days 1-5]      │
│  Week 2: Phase 2 (Core UI)   ███████░░░░░░░░░░ [Days 6-12]    │
│  Week 3: Phase 3 (Analytics) ██████░░░░░░░░░░░ [Days 13-20]   │
│  Week 4: Phase 4 (QA+Release) ████░░░░░░░░░░░░ [Days 21-27]   │
│  Week 5: UAT & Fix           ██░░░░░░░░░░░░░░░ [Days 28-30]   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Four Phases Overview

Phase Focus Duration Key Deliverable Risk Level
Phase 1 Foundation, API contracts, role branching 5-6 days Service layer + mock data + spec Low
Phase 2 Core UI (layout, KPI, active jobs) 7-8 days Responsive dashboard shell Medium
Phase 3 Charts, indicators, i18n, error handling 6-8 days Full-featured dashboard Medium
Phase 4 Testing, integration, release prep 4-5 days Production-ready build Low

Key Milestones

Milestone Date Criteria
M1: Service Layer Ready EOW 1 (May 2) All 5 endpoints spec'd, mocks created, service layer tested
M2: UI Complete EOW 2 (May 9) KPI, summary, active jobs, responsive tested
M3: Analytics Complete EOW 3 (May 16) Charts, indicators, i18n, error states all working
M4: QA Complete EOW 4 (May 23) E2E tests pass, cross-browser OK, performance audit complete
M5: Release Ready Mid-May 28 Staging deployment, UAT approved, release notes ready

Phase Breakdown (Quick View)

Phase 1: Foundation (Days 1-6)

Tasks: 7
Components: 0 (service layer only)
Deliverables: Dashboard service, mock data, backend spec

Day 1:   Extend JobStatus enum
Days 2-3: Dashboard service + contracts
Day 4:   Role-based home branching
Days 5-6: Backend API spec

Phase 2: Core UI (Days 7-14)

Tasks: 11
Components: 3 (KPI card, summary, active jobs)
Deliverables: Responsive layout, all primary sections

Day 7:       Layout shell
Days 8-9:    KPI + summary strips
Days 10-12:  Active jobs panel with interactions
Days 13-14:  Responsive + accessibility testing

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

Tasks: 12
Components: 2 new (charts, indicators) + refinements
Deliverables: Charting, performance metrics, full i18n, error handling

Days 15-16:  Charts + date range control
Days 17-18:  Performance indicators (XT, altitude)
Days 19-20:  Loading/empty/error states
Days 21-22:  i18n localization (EN/PT/ES)

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

Tasks: 9
Components: 0 (QA & testing focus)
Deliverables: Tested, documented, production build

Days 23-24:  Integration & E2E testing
Days 25-26:  Cross-browser + perf testing
Day 27:      Documentation & release prep

File Structure (Expected)

src/app/dashboard/
├── dashboard.component.ts              (updated: role branching)
├── dashboard.component.html            (updated: template branching)
├── dashboard.component.css             (minimal changes)
│
├── pilot-dashboard/                    (NEW FOLDER)
│   ├── pilot-dashboard.component.ts    (main container)
│   ├── pilot-dashboard.component.html
│   └── pilot-dashboard.component.scss
│
└── components/                         (NEW FOLDER)
    ├── kpi-card/
    │   ├── kpi-card.component.ts
    │   ├── kpi-card.component.html
    │   └── kpi-card.component.scss
    │
    ├── daily-summary/
    │   ├── daily-summary.component.ts
    │   ├── daily-summary.component.html
    │   └── daily-summary.component.scss
    │
    ├── operations-today/
    │   ├── operations-today.component.ts
    │   ├── operations-today.component.html
    │   └── operations-today.component.scss
    │
    ├── active-jobs/
    │   ├── active-jobs.component.ts
    │   ├── job-row.component.ts
    │   ├── active-jobs.component.html
    │   └── active-jobs.component.scss
    │
    ├── hours-chart/
    │   ├── hours-chart.component.ts
    │   ├── hours-chart.component.html
    │   └── hours-chart.component.scss
    │
    ├── hectares-chart/
    │   ├── hectares-chart.component.ts
    │   ├── hectares-chart.component.html
    │   └── hectares-chart.component.scss
    │
    ├── date-range-selector/
    │   ├── date-range-selector.component.ts
    │   ├── date-range-selector.component.html
    │   └── date-range-selector.component.scss
    │
    ├── xt-error-indicator/
    │   ├── xt-error-indicator.component.ts
    │   ├── xt-error-indicator.component.html
    │   └── xt-error-indicator.component.scss
    │
    └── altitude-indicator/
        ├── altitude-indicator.component.ts
        ├── altitude-indicator.component.html
        └── altitude-indicator.component.scss

src/app/domain/
├── models/
│   └── pilot-dashboard.model.ts        (NEW: TS interfaces)
│
└── services/
    └── pilot-dashboard.service.ts      (NEW: API service)
    └── pilot-dashboard.service.spec.ts (NEW: tests)

src/app/shared/
├── mock/
│   └── pilot-dashboard-mock.ts         (NEW: mock data)
│
└── global.ts                           (UPDATED: JobStatus enum)

docs/
├── PILOT_DASHBOARD_ROADMAP.md          (THIS FILE)
├── PILOT_DASHBOARD_TASK_CHECKLIST.md
└── PILOT_DASHBOARD_API_SPEC.md         (NEW: backend contract)

Total Code Changes Summary

Category Lines Changed Impact
New TypeScript ~1500-2000 8-10 new component classes + service
New Templates ~800-1200 HTML for 8 components
New Styles ~600-800 SCSS for responsive layout + indicators
Updated Files ~150-200 global.ts, dashboard.component.*
Tests ~1000-1500 Jasmine specs for service + components
Documentation ~500 API spec + user guide + comments
Total ~4500-6700 12-18 feature files + 2-3 updated files

PR Strategy (4 PRs Total)

PR Phase Files Changed Commits Review Focus
PR1 Foundation 5-10 files 4 commits Service layer, constants, role gating
PR2 Core UI 15-20 files 3 commits Layout, KPI, active jobs, responsive
PR3 Analytics 10-15 files 3 commits Charts, indicators, i18n, error handling
PR4 Release 5-10 files 3 commits Tests, docs, final polish, build

Success Criteria Checklist

Functionality:

  • Pilot users see new dashboard (role isolation works)
  • Non-pilots see original disclaimer (backward compatible)
  • All 5 API endpoints wired and displaying data
  • Active jobs clickable → navigate to job detail
  • Charts render with date range control
  • Performance indicators show correct color bands
  • i18n works (EN, PT, ES selectable)

Quality:

  • No console errors or warnings
  • Performance audit completed
  • Mobile responsive (320px - 1920px)
  • Cross-browser (Chrome, Safari, Firefox, Edge)
  • Accessibility: WCAG AA compliant
  • Appropriate dashboard test coverage added

Release Readiness:

  • Production build succeeds for all locales
  • No breaking changes to existing features
  • Documentation complete (user guide + tech docs)
  • Release notes published
  • Staging deployment successful

Top Risks & Mitigations

Risk Probability Impact Mitigation
Backend endpoints not ready Medium Phase 4 blocked Use mock data through Phase 3; swap at integration
i18n extraction tool issues Low Phase 3 delayed Pre-test localization workflow in Phase 1
Chart library compatibility Low Phase 3 blocked Verify chart.js 2.9.3 + PrimeNG 9 integration early
Mobile responsive issues late Medium Phase 4 delayed Test mobile throughout Phase 2, not at end
Job detail route not working Low Phase 2 blocker E2E test navigation at end of Phase 2
Status enum break existing jobs High Regression Coordinate with backend; test all statuses

Communication Plan

Daily Standup:

  • 10 mins, same time each day
  • Report: completed, in-progress, blockers
  • Update task checklist

Weekly Demo (Friday EOD):

  • Show completed phase sections to PO/team
  • Gather feedback for next phase
  • Update roadmap if needed

Backend Sync (if parallel):

  • Mon & Thu: align on API spec and integration readiness
  • Verify mock data contracts match backend plan

Development Setup Checklist

  • Clone repo / pull latest
  • npm install dependencies
  • ng serve runs without errors
  • Verify existing tests pass: ng test
  • Read PILOT_DASHBOARD_API_SPEC.md (when created in Phase 1)
  • Review requirements docs in /attachments/
  • Have Pilot Dashboard UI mockup open (reference)
  • Setup code editor: prettier, tslint extensions
  • Create feature branch: git checkout -b feature/pilot-dashboard

Key Decisions Made (Frozen for Phase 1)

  1. Active Jobs Display: UI states are NEW, IN PROGRESS, COMPLETED, where IN PROGRESS groups READY, DOWNLOADED, and SPRAYED backend states.
  2. Altitude Priority: sprayHeight → radarAlt → no-data state
  3. Operations Today: Distance and spray volume only in Phase 1; Flights Today is excluded due to unreliable source data.
  4. i18n: EN/PT/ES from day 1
  5. Charts: PrimeNG p-chart (wraps chart.js 2.9.3)
  6. Status Colors: Blue (NEW), Yellow (IN PROGRESS), Green (COMPLETED)

Quick Start Commands

# Clone and setup
git clone <repo>
cd client
npm install

# Development
npm start              # http://localhost:4200

# Testing
ng test               # Unit tests
ng test --code-coverage
ng lint

# Build
ng build --prod --localize    # Production + all locales

# i18n workflow
npm run sync-i18n             # Extract + merge

# Useful for reference
cat docs/PILOT_DASHBOARD_ROADMAP.md        # Detailed roadmap
cat docs/PILOT_DASHBOARD_TASK_CHECKLIST.md # Detailed tasks
cat docs/PILOT_DASHBOARD_API_SPEC.md  # Backend contract (Phase 1.6)

  • docs/PILOT_DASHBOARD_ROADMAP.md ← Full detailed roadmap
  • docs/PILOT_DASHBOARD_TASK_CHECKLIST.md ← Day-by-day task checklist
  • Pilot_Dashboard_PO_Brief_v1.md ← Business requirements (in attachments)
  • Pilot_Dashboard_Requirements_v1.md ← Technical spec (in attachments)
  • Pilot-Dashboard-UI-UX-Design-Specification.md ← Design rules (in attachments)
  • Sample Pilot Dashboard.png ← Reference mockup (in attachments)

Verification Checklist (End of Each Phase)

End of Phase 1

  • Service layer complete and tested
  • Mock data provider ready
  • Backend API spec documented and approved
  • Role branching working (pilot sees placeholder, others see disclaimer)
  • All Phase 1 PRs merged

End of Phase 2

  • All UI sections render correctly
  • Layout responsive on all breakpoints
  • KPI cards, summary, operations, active jobs all visible
  • Job row clicks navigate to job detail
  • Accessibility audit passed
  • All Phase 2 PRs merged

End of Phase 3

  • Charts render and respond to date range changes
  • Performance indicators show data with correct thresholds
  • i18n working (all 3 languages)
  • Error and loading states display correctly
  • No console errors
  • All Phase 3 PRs merged

End of Phase 4

  • Integration testing passed
  • Cross-browser testing passed
  • E2E tests passed
  • Performance audit completed
  • Production build succeeds for all locales
  • Documentation complete
  • All Phase 4 PRs merged
  • Ready for staging deployment

Effort Distribution

Foundation & Contracts:   22% (5-6 days)
├─ Service layer, models, role gating

Core UI Delivery:         30% (7-8 days)
├─ Layout, KPI, summary, active jobs

Analytics & Polish:       28% (6-8 days)
├─ Charts, indicators, i18n, error handling

QA & Release:             20% (4-5 days)
├─ Testing, documentation, build prep

Status: Ready to Start
Created: April 28, 2026
Last Updated: April 28, 2026