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.pngand 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 installdependenciesng serveruns 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)
- Active Jobs Display: UI states are NEW, IN PROGRESS, COMPLETED, where IN PROGRESS groups READY, DOWNLOADED, and SPRAYED backend states.
- Altitude Priority: sprayHeight → radarAlt → no-data state
- Operations Today: Distance and spray volume only in Phase 1; Flights Today is excluded due to unreliable source data.
- i18n: EN/PT/ES from day 1
- Charts: PrimeNG p-chart (wraps chart.js 2.9.3)
- 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)
Related Documents
- 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