# FinSight Frontend

A calm, data-first fintech dashboard for analysing financial filings — built in React + TypeScript with Vite.

## Quick start

```bash
npm install
npm run dev          # starts on http://localhost:5173
```

The dev server proxies `/api/*` → `http://localhost:8000` (your FinSight backend). Change the target in `vite.config.ts` if your backend runs elsewhere.

## Folder structure

```
src/
├── api/
│   └── client.ts          # All API calls + NotFoundError
├── components/
│   ├── layout/
│   │   └── AppLayout.tsx  # Sidebar + route layout
│   └── ui/
│       ├── Alert.tsx
│       ├── ConfidenceBadge.tsx
│       ├── MetricCard.tsx
│       ├── RecommendationBadge.tsx
│       ├── SeverityBadge.tsx
│       └── Spinner.tsx
├── pages/
│   ├── UploadPage.tsx     # POST /upload with low_confidence_metrics callout
│   ├── ReportPage.tsx     # GET /report + /red_flags + /recommendation
│   ├── AskPage.tsx        # POST /query — chat interface
│   ├── ComparePage.tsx    # POST /compare — side-by-side table
│   └── CompaniesPage.tsx  # GET /companies — search & browse
├── types/
│   └── api.ts             # All TypeScript types mirroring OpenAPI schema
├── App.tsx                # Router
├── main.tsx
└── styles.css             # Full design system (CSS custom properties)
```

## Design decisions

- **Confidence is a first-class UI concept.** Every metric, red flag, and query answer surfaces its confidence level as a coloured pill badge (green/amber/red).
- **SKIP is not an error.** `RecommendationBadge` renders SKIP as a neutral grey state with "Insufficient data."
- **API `error` fields on 200 responses** are shown as yellow warning banners — not treated as exceptions.
- **404 responses** show "No filing found. Upload a filing first." — not a generic error.
- **Metric dual-format.** `MetricCard` handles both rich `{value, confidence, …}` objects and plain numeric ratio values.
- **Proxy in dev.** All `/api/*` requests proxy to the backend — no CORS issues during development.

## Connecting to the backend

The only file you need to change for a different backend URL is:

```ts
// vite.config.ts
proxy: {
  '/api': {
    target: 'http://localhost:8000',   // ← change this
```

For production, set a `VITE_API_BASE` env var and update `client.ts` accordingly.