frontend/README.md

FinSight Frontend

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

Quick start

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:

// 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.