Kundkort Page

Purpose

The detail view for a single company. Top-level shell that fetches data and lays out all sections. File: frontend/kundkort/components/KundkortPage.tsx.

Props

interface KundkortPageProps {
  orgNr: string;
  token: string;
  onBack: () => void;
  onLogout: () => void;
}

Data sources

• useKundkort(orgNr, token) — main payload, hits /api/kundkort/:orgNr. See Kundkort API Client.
• useEcoApi(orgNr, token) — insights, gaps, financial trend, contact distribution. See EcoAPI Integration.

Both run in parallel from the page’s effect chain.

Layout

1. Sticky action bar (KundkortPage.tsx:74-277) — back button + company name on the left; “Ladda om”, “Berika”, “Exportera PDF” on the right. Hidden in print via data-no-print.
2. <CompanyHeader> (KundkortPage.tsx:307) — see Identity Card context, but rendered separately above the tabs.
3. Reklamspärr warning (KundkortPage.tsx:310-328) — shown when data.advertising_block === true. See Reklamspärr.
4. Tab group with three tabs (Tremor <TabGroup>):
   • Översikt: Identity Card, ContactInfoCard, Summary Section, Financials Section, Koncern Section, Varumarken Section
   • Analys & Grafer: Gaps Panel, Insights Panel, FinancialChart, ContactDistributionChart, DataCompletenessChart
   • Kontakter: Contacts Section + duplicate ContactDistributionChart
5. Meta footer (KundkortPage.tsx:445-474) — sources used and fetched_at timestamp.

Berika action

handleEnrich (KundkortPage.tsx:41-69) runs useKundkort.enrich() and useEcoApi.enrich() in parallel. Both POST to /api/kundkort/:orgNr/enrich. Reads mainResult.enrichedData.api_usage to render a 4-8 second toast with credits/cost (e.g. "Berikning klar · 3 Firecrawl-credits · 2 Serper-anrop · $0.0042").

Print

window.print(). Print CSS in index.css:112-181 collapses the grid, removes sticky elements, switches to A4 portrait, and inverts to light theme.

States

• loading → SkeletonLoader
• error → ErrorState (handles 401, 404, 5xx, network)
• data → full layout above

See also

Search Page, Kundkort API Client, EcoAPI Integration, UI Primitives.

See also

• Frontend MOC