Gaps Panel

Purpose

Left-hand card on the Analys & Grafer tab. Lists detected data gaps and offers a “Fyll gap” button. File: frontend/kundkort/components/ui/GapsPanel.tsx.

Data source

useEcoApi.gaps: GapsResponse | null (services/ecoApiClient.ts:34-40). Despite the name, this is built client-side by inspecting the main API payload — not from EcoAPI. See EcoAPI Integration caveat.

GapsResponse:

{ org_nr, total_gaps, high_priority_gaps, gaps: DataGap[], recommendation }

DataGap:

{ field, priority: 'high'|'medium'|'low', current_value, fillable_via_enrichment }

Gaps detected

fetchGaps() checks (ecoApiClient.ts:103-138):

• financials — priority: high if finansiell_historik, omsattning, anstallda all empty
• contacts — priority: high if kontakter empty
• website — priority: medium if neither hemsida nor domain set

Layout

• Header line “N datagap identifierade (M högprioriterade)” or the green ”✓ All data komplett”
• “Fyll gap” button on the right when total_gaps > 0. Clicking it triggers the same handleEnrich from Kundkort Page (passed via onEnrich prop).
• <Accordion> with one AccordionItem per priority bucket. Bucket colour: high → red, medium → yellow, low → gray (GapsPanel.tsx:11-15).
• Each gap row: priority badge + Swedish label from FIELD_LABELS (GapsPanel.tsx:17-26) + “Kan fyllas” badge if fillable_via_enrichment.

Warning

FIELD_LABELS covers turnover, employees, contacts, vd_contact_info, website, email, phone, tech_stack but fetchGaps() actually emits financials, contacts, website. So financials falls back to its raw English key in the UI (GapsPanel.tsx:113).

See also

Insights Panel, EcoAPI Integration, Kundkort Page.

See also

• Frontend MOC