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