Komponenty

Komponenty

Architektura UI opiera się na komponentach shadcn/ui (headless + Tailwind), rozszerzonych o własną logikę raportową.

Hierarchia komponentów

main.tsx
└── ThemeProvider          # kontekst motywu (dark/light/system)
    └── TooltipProvider    # globalny provider tooltipów (Radix)
        └── App            # główna logika: selektor listy/miesiąca, sekcje raportu
            ├── DarkModeToggle
            ├── ReportTable (T1)
            ├── KpiMonthlyTable (T2)
            └── ReportTable (T5)

ThemeProvider

Plik: src/components/theme-provider.tsx

Zarządza motywem całej aplikacji.

API

// Odczyt i zmiana motywu w dowolnym komponencie:
const { theme, setTheme } = useTheme()

setTheme("dark")    // zawsze ciemny
setTheme("light")   // zawsze jasny
setTheme("system")  // podążaj za OS

Zachowania

• Motyw persystowany w localStorage (klucz: "theme")
• Przy starcie odczytuje zapisaną wartość; brak → "system"
• Reaguje na zmianę prefers-color-scheme w czasie rzeczywistym (gdy theme === "system")
• Reaguje na StorageEvent — synchronizacja między zakładkami
• Skrót klawiszowy D — przełącza dark/light bez użycia myszki (działa gdy focus nie jest na polu tekstowym)
• Przełączenie motywu tymczasowo wyłącza CSS transitions (brak migania)

DarkModeToggle

Komponent Switch powiązany z useTheme. Wyświetla aktualny stan i pozwala go przełączyć kliknięciem.

ReportTable (T1, T5)

Tabela wolumenowa/YTD renderowana przez TanStack Table v8.

Props / dane wejściowe

• Dane: ReportRow[] ładowane z pliku JSON (lub hardcoded reportData w T1)
• Kolumny generowane dynamicznie na podstawie miesięcy (z MONTHS)
• Każda komórka może mieć highlight (kolor tekstu) lub highlightBg (tło)

Funkcje ID

Atrybuty DOM

KpiMonthlyTable (T2)

Tabela KPI z 13 stałymi kolumnami miesięcznymi i 11 wskaźnikami.

Kolumny miesięczne

Zdefiniowane jako stała KPI_MONTH_COLUMNS — od Mar 2026 wstecz do Mar 2025. Kolumna Mar 2026 (bieżący miesiąc) wyświetla zawsze wartość TM (placeholder — dane live).

Props KpiMonthlyTable

KpiLabelCell

Komponent renderujący etykietę wskaźnika z kolorowaniem składni:

• tekst główny — font-medium
• (opis w nawiasach) — kolor text-syntax-opisy
• [slug w nawiasach kwadratowych] — font-mono, kolor text-syntax-slug

CellContent

Wspólny komponent komórki dla T1/T5:

<CellContent cell={{ value: "88 045", highlight: true }} hidePercent={false} />

• highlight: true → text-amber-500 dark:text-amber-400
• highlightBg: true → bg-amber-500/15 dark:bg-amber-500/20 rounded px-1
• hidePercent: true → usuwa znak % z wartości

Komponenty UI (shadcn)

Wszystkie w src/components/ui/. Dodane przez CLI npx shadcn@latest add <nazwa>.

Utilities

cn() — src/lib/utils.ts

import { cn } from "@/lib/utils"

cn("base-class", condition && "conditional-class", "another-class")
// łączy klasy przez clsx, usuwa konflikty przez tailwind-merge

formatRowIndexId(index)

Zamienia indeks wiersza na literę Excel: 0→A, 1→B, ..., 25→Z, 26→AA.