Insights Panel

Purpose

Right-hand card on the Analys & Grafer tab. Summarises company insights from EcoAPI. File: frontend/kundkort/components/ui/InsightsPanel.tsx.

Data source

useEcoApi.insights: EcoApiInsights | null (services/ecoApiClient.ts:11-25):

interface EcoApiInsights {
  org_nr: string;
  financial_trend: { years; turnover; employees };
  contact_distribution: Record<string, number>;
  data_completeness: { overall: number; by_category: Record<string, number> };
  growth_signals: string[];
  risk_signals: string[];
}

Layout

1. Two <MetricCard>s side-by-side (InsightsPanel.tsx:26-37):
   • Datakompletthet — data_completeness.overall percent. Colour: ≥75 emerald, ≥50 yellow, else red.
   • Kontakter — sum of contact_distribution values, blue.
2. Tillväxtsignaler — first 5 of growth_signals[], prefixed with ↗, only shown if non-empty.
3. Risk-signaler — first 5 of risk_signals[], prefixed with ⚠, red.
4. Empty fallback: “Inga specifika signaler identifierade ännu.”

Signal source

Warning

growth_signals is currently populated by services/ecoApiClient.ts:84-87 from EcoAPI’s data.trends.revenueGrowth and data.trends.profitGrowth only. risk_signals is always [] from the client (ecoApiClient.ts:88). The “Risk-signaler” branch in InsightsPanel will never render in the current wiring even though the UI supports it.

MetricCard

Inline component at the bottom of the file (InsightsPanel.tsx:78-85). Builds Tailwind classes with template strings (bg-${color}-50, text-${color}-700) — relies on the safelist in tailwind.config.js. See Frontend Build colour caveat.

See also

Gaps Panel, EcoAPI Integration, Tremor Charts.

See also

• Frontend MOC