Indicatoren app — field-level detail & indicator deep-dive

[SvenVw]

Background

The field-level Indicatoren page shows all BLN3 indicator scores for a single field in detail. Compared to the farm overview (issue-bln3-3), this page provides:

1. A mini map panel showing all farm fields with the current field highlighted in yellow — users can click adjacent fields to switch without going back to the farm overview
2. A radar chart showing the current field's index scores across all indicators
3. Indicator cards grouped by category, each showing status, target, index, and score (with and without measures) side by side
4. A deep-dive sub-route when the user clicks an individual indicator card, showing the full breakdown: status trend, target derivation, impact of each selected measure

Scores are displayed on a 0–100 scale.
Colour coding: 🟢 ≥ 70 · 🟡 40–69 · 🔴 < 40.
Text verdicts alongside colours: "Uitstekend" (≥80) · "Goed" (70–79) · "Matig" (50–69) · "Aandacht gewenst" (40–49) · "Actie nodig" (<40).

User Stories

As an advisor, I want to see all indicator scores for a specific field with full detail (status, target, index, score) so that I can understand the soil health profile of that field.

As an advisor, I want to compare the score with and without measures so that I can evaluate the impact the selected measures have.

As an advisor, I want to navigate between adjacent fields on the map without going back to the farm overview.

As an advisor, I want to drill into a single indicator to see exactly how the score is calculated.

As an advisor, I want to understand why an indicator has a certain score — what was measured, what the formula is, and how my field compares to the optimum — so I can explain results to farmers and make informed decisions. (Full scoring curves and explanations in issue-bln3-7, once BLN3 calculator is open-source.)

As a farmer, I want a plain-language explanation of each indicator (what it means, why it matters for my crops) so I don't need to be a soil scientist to use this tool. (Full descriptions in issue-bln3-7.)

Acceptance Criteria

• Route farm.$b_id_farm.$calendar.indicators.$b_id.tsx renders the field detail page
• Page shows a left panel with a mini map — all farm fields visible, current field yellow-highlighted
• Clicking another field on the map navigates to that field's detail page
• Category tabs (Bodem, Koolstof, Productie, Grondwater, Nutriënten, Oppervlaktewater) filter the visible indicator cards
• Radar chart shows index scores (0–100) for all visible indicators
• Each indicator card shows: indicator name, status value + unit, target value, index score, impact score, final score; index and score both colour-coded
• Indicator cards with score < 40 appear first ("painpoints to the top")
• Clicking an indicator card opens the deep-dive sub-route
• Route farm.$b_id_farm.$calendar.indicators.$b_id.$indicator_id.tsx renders the deep-dive for one indicator
• Deep-dive shows: full indicator description, status value derivation, target derivation, per-measure impact contribution, recommended action
• Both routes are behind PostHog feature flag "bln3"

Wireframe

Field detail (indicators.$b_id)

╔═════════════════╦════════════════════════════════════════════════════╗
║  [MAP]          ║  🌱 Indicatoren — Perceel A                        ║
║  🟡 Prc A  ←YOU ║                                                    ║
║  🟢 Prc B       ║  [Bodem][Koolstof][Productie][Grondwater][Nutriënten]║
║  🔴 Prc C       ║                                                    ║
║  🟢 Prc D       ║   ╭──────────────────────────────────────╮        ║
║                 ║   │          Radar Chart                  │        ║
║                 ║   │   B_DI ●        ● B_SF               │        ║
║                 ║   │      C_N ●   ● C_P                   │        ║
║                 ║   │         spider web                    │        ║
║                 ║   ╰──────────────────────────────────────╯        ║
║                 ║                                                    ║
║                 ║  ┌────────────────────────────────────────┐       ║
║                 ║  │ 🔴 B_SF  Bodemstructuur               │       ║
║                 ║  │ Status: 2.1 (doel: 3.5)               │       ║
║                 ║  │ Index: 32   Score (met maatr.): 45    │       ║
║                 ║  │ [██░░░░░░] → [████░░░░] ▲+13 impact  │       ║
║                 ║  └────────────────────────────────────────┘       ║
║                 ║  ┌────────────────────────────────────────┐       ║
║                 ║  │ 🟡 B_DI  Bodemdichtheid               │       ║
║                 ║  │ Status: 1.35 g/cm³ (doel: <1.3)       │       ║
║                 ║  │ Index: 58   Score (met maatr.): 62    │       ║
║                 ║  └────────────────────────────────────────┘       ║
╚═════════════════╩════════════════════════════════════════════════════╝

Indicator deep-dive (indicators.$b_id.$indicator_id)

╔═════════════════╦════════════════════════════════════════════════════╗
║  [MAP]          ║  🔴 B_SF — Bodemstructuur                         ║
║  (same as       ║  ─────────────────────────────────────────────    ║
║   field detail) ║  Beschrijving: Maat voor de bodemstructuur...     ║
║                 ║                                                    ║
║                 ║  STATUS: 2.1  |  DOEL: 3.5  |  INDEX: 32/100     ║
║                 ║  ┌────────────────────────────────────────┐       ║
║                 ║  │ Hoe is de index berekend?             │       ║
║                 ║  │ Status 2.1 → schalingscurve → 0.32   │       ║
║                 ║  └────────────────────────────────────────┘       ║
║                 ║                                                    ║
║                 ║  IMPACT VAN MAATREGELEN  (+13 punten → 45)        ║
║                 ║  ┌──────────────────────────────────────────┐     ║
║                 ║  │ BM12  Niet-kerende grondbewerking  +8   │     ║
║                 ║  │ BM07  Groenbemester inzaaien       +5   │     ║
║                 ║  └──────────────────────────────────────────┘     ║
║                 ║                                                    ║
║                 ║  ADVIES                                            ║
║                 ║  Overweeg aanvullende maatregelen:                ║
║                 ║  · BM03 Aanvoer van organische stof (+6 impact)  ║
║                 ║  [Ga naar Maatregelen]                            ║
╚═════════════════╩════════════════════════════════════════════════════╝

Technical Notes

Map panel

• Use FieldsSourceAvailable from atlas-sources.tsx
• Highlight current field with fieldsSelected style (existing yellow fill)
• Remaining fields coloured by their lowest indicator score (same as farm overview)
• On click: navigate(\../${b_id}`)` using relative routing

Radar chart

• Use recharts RadarChart (already used elsewhere in fdm-app)
• Data points = indicator index scores scaled 0–100
• Show only indicators in the active category tab
• Red/yellow/green fills for score tiers

Indicator cards

• Sort: score < 40 first, then 40–69, then ≥ 70 (within each group: alphabetical by indicator ID)
• Show both index bar (hollow, represents score without measures) and score bar (filled, with measures) stacked so the delta (impact) is visually clear
• Each card is a <Link> to the deep-dive sub-route

Deep-dive sub-route

• Loads same parent data; no additional API call needed
• Shows the measure impact contributions broken down per measure from the score response
• "Ga naar Maatregelen" button links to ../../../measures/${b_id} (field measures page)

Sidebar navigation

Add to fdm-app/app/components/blocks/sidebar/apps.tsx:

// Farm sidebar
{
    title: "Indicatoren",
    url: `farm/${b_id_farm}/${calendar}/indicators`,
    icon: BarChart3,
    isActive: pathname.startsWith(`farm/${b_id_farm}/${calendar}/indicators`),
    featureFlag: "bln3",
},
{
    title: "Maatregelen",
    url: `farm/${b_id_farm}/${calendar}/measures`,
    icon: Leaf,
    isActive: pathname.startsWith(`farm/${b_id_farm}/${calendar}/measures`),
    featureFlag: "bln3",
},

Use useFeatureFlagEnabled("bln3") (PostHog, same pattern as the existing "rvo" flag).

Dependencies

• Depends on: Add BLN3 measures tables to database schema #573 Add BLN3 score calculation with caching #574 Indicatoren app — farm-level overview #575