# Fyro Finance — Design System

Pacchetto per lo sviluppatore. Contiene il sistema visivo completo dell'app: token, font, regole sui numeri, componenti base.

Stack di riferimento: React 18 + Vite + TypeScript, Tailwind CSS 3.4, shadcn/ui ("default", cssVariables), lucide-react, recharts. **Nessuna libreria nuova.**

## Contenuto

| Cartella / file | Cosa contiene |
|---|---|
| `screens/01…06.png` | Le 6 sezioni del design system come immagini: Brand, Colori, Colori P&L, Tipografia e spazi, Formattazione numeri, Componenti |
| `Fyro Design System.dc.html` + `support.js` | La pagina originale del design system. Si apre nel browser, tenendo i due file nella stessa cartella |
| `tokens/index.css` | Tutti i token in HSL, tema chiaro (`:root`) e scuro (`.dark`). Sostituisce `src/index.css` |
| `tokens/tailwind.config.patch.md` | Le aggiunte a `tailwind.config.ts`, per usare i token come classi (`bg-pl-income`, `text-positive`, `bg-cc-3`…) |
| `tokens/fonts-index-html.md` | Il link Google Fonts di Geist e Geist Mono, più title e meta per `index.html` |
| `lib/format.ts` + test | **Unico punto** che trasforma numeri e date in testo: importi, %, variazioni, tassi, date, EN/IT |
| `lib/fx.ts` + test | Conversione EUR/USD con il tasso medio del mese |
| `components/` | Componenti base già scritti: Segmented, KpiCard, Sparkline, e la struttura del P&L con le classi colore per sezione |

## Regole principali

### Colori
- Ogni colore viene dai token (`bg-card`, `text-muted-foreground`, `bg-primary`…). **Mai** HEX o HSL scritti a mano nei componenti, altrimenti il tema scuro si rompe.
- Primario viola `--primary` (249 66% 54%). Niente sfumature (gradient).
- I segni hanno un colore fisso:
  - `--positive` (verde) per crescite buone e importi in entrata;
  - `--negative` (rosso) per netti negativi e perdite;
  - `--warning` (ambra) per dati da controllare, come un tasso stimato o un item non mappato.
- Sezioni del P&L: ogni sezione ha 3 toni, cioè fondo (`--pl-*`), barra laterale (`--pl-*-bar`) e testo (`--pl-*-ink`). Le classi pronte sono in `components/pnl-structure.ts`.
- Centri di costo e aziende: 10 colori fissi, `--cc-1…10`, assegnati in ordine (alfabetico per le aziende, per importo per i centri). `--cc-rest` per tutti gli altri.

### Tipografia
- **Geist** per l'interfaccia, **Geist Mono** per tutti i numeri, con cifre tabellari (`tabular-nums`).
- Scala: 10 (etichette maiuscole), 11, 12, 13 (testo tabelle), 15, 17 (titolo pagina), 22–30 (numeri KPI).

### Spazi, raggi, ombre
- Raggio base 10px (`--radius`): card 12px, pulsanti e input 8px, badge 5–6px.
- Ombre solo `--shadow-sm` / `md` / `lg` / `xl`.
- Altezze fisse:
  - desktop: barra titolo 56px, barra filtri 52px, pulsanti 30–32px;
  - mobile: aree da toccare di almeno 44px.

### Numeri (vedi `screens/05-number-formatting.png`)
- Sempre 2 decimali negli importi: `€ 12,480.00` in EN, `€ 12.480,00` in IT.
- Il segno meno è `−` (U+2212), mai il trattino.
- Tassi di cambio sempre con **6 decimali**: `1.086420`.
- Il valore mancante si scrive `—`, non 0.
- Valute diverse non si sommano mai senza conversione. Il totale convertito usa sempre **il tasso medio del mese** (tabella `monthly_exchange_rates`), e trimestre o anno sono la somma dei mesi già convertiti.

### Lingua
- Interfaccia in EN e IT.
- Categorie, item e righe del P&L **non si traducono**: restano i nomi del database.

## Come applicarlo

```
1. Sostituisci src/index.css con tokens/index.css.
2. Applica tokens/tailwind.config.patch.md a tailwind.config.ts, senza togliere nulla.
3. Aggiungi i font e i meta da tokens/fonts-index-html.md in index.html.
4. Copia lib/format.ts e lib/fx.ts in src/lib/, con i test. npm test deve passare.
5. Copia i componenti di components/ in src/components/ (Segmented in layout/, KpiCard e Sparkline in charts/,
   pnl-structure.ts come pnl/structure.ts).
6. Sostituisci ogni toFixed / toLocaleString sugli importi con le funzioni di format.ts.
```

Le schermate complete (Home, Cash Flow, Consolidated, Transactions, Setup) sono nei pacchetti `fase-1`, `fase-2` e `fase-3`, che usano questo sistema.