feat: add React client application for FireForm

[Calebnzm]

feat: Add React Client Application

Summary

This PR introduces the complete React + TypeScript frontend for FireForm. The client connects to the existing FastAPI backend and provides a full UI for creating and managing report schemas, attaching PDF templates, configuring per-field metadata, and running canonization — all without modifying the underlying PDF files.

---

Motivation

The backend introduced a report-centric schema system with a rich data model, but had no user-facing interface. This PR closes that gap by delivering a client that makes the schema management workflow accessible through a modern, interactive web application.

---

Stack

Layer	Choice
Framework	React 19 + TypeScript 5.9 via Vite 8
Styling	Tailwind CSS v4 + tw-animate-css
Component library	shadcn/ui (Radix primitives)
PDF rendering	react-pdf / pdf.js
Font	Geist Variable (@fontsource-variable/geist)
API base URL	VITE_API_URL env var (falls back to http://127.0.0.1:8000)

---

Workflow

Dashboard → New Schema → Attach Templates → Configure Fields → Canonize

1. Dashboard — Overview of total schemas and templates; quick-access buttons to create a schema or browse the template library.
2. New Schema — Form to name a schema and describe its extraction use case.
3. Workspace — Attach templates to a schema (upload a new PDF or pick from the library). Each attached template auto-creates SchemaField stubs for every detected form field.
4. Configure Fields — The PDF is rendered read-only; invisible hotspot overlays appear over every AcroForm field. Clicking a hotspot opens a side panel to set the canonical name, data type, description, word limit, required flag, and allowed values for that field.
5. Canonize — Triggers the backend canonization pass, which groups fields by canonical name and displays the resolved canonical schema in the workspace.

---

Key Advantages

Feature	Detail
Non-destructive field editing	Metadata is stored in the database; the original PDF is never modified
Hotspot overlay	Invisible <div>s are positioned pixel-perfectly over PDF AcroForm widgets using coordinate space conversion (PDF bottom-left → CSS top-left)
Canonical name autocomplete	A <datalist> surfaces all existing canonical names across the schema, making cross-template unification fast and consistent
Context-driven navigation	A single AppNavigationContext manages panel + wizard state, enabling deep-link-like navigation (browse → create → workspace → configure) without a router library
Optimistic UI updates	Field saves update local state immediately without a full page reload

---

Changes

src/lib/api.ts (new)

• Typed fetch wrapper covering all backend endpoints:
  • Schemas: listSchemas, createSchema, getSchema
  • Schema fields: listSchemaFields, updateSchemaField
  • Template association: associateTemplate, removeTemplateFromSchema, syncTemplateFieldsFromPdf, ensurePdfSchemaField
  • Templates: listTemplates, getTemplate, createTemplateUpload, deleteTemplate, templatePdfUrl
  • Canonization: canonizeSchema
• Shared TypeScript types: ReportSchema, TemplateRecord, SchemaField, SchemaFieldUpdate, CanonicalSchema, CanonicalFieldEntry, Datatype.
• Centralised readDetail helper extracts structured error messages from API responses.

src/context/app-navigation-context.tsx (new)

• AppNavigationProvider: global client-side navigation state via React context. Tracks the active panel (dashboard | schemas | templates | settings | help | search) and a nested WizardView discriminated union (browse | create | workspace | configure).
• Exposes navigation helpers: navigatePanel, goHome, quickCreate, goBrowse, goCreate, goWorkspace, goConfigure.
• Derives a dynamic headerTitle from the current view/panel combination.
• useAppNavigation hook for consuming the context throughout the tree.

src/pages/dashboard.tsx (new)

• Stat cards: total schemas, total templates, library status (empty vs active).
• "Recent Schemas" list (last 5) with direct-open links to schema workspaces.
• Quick-action buttons: New Schema and Browse Templates.
• Loads data in parallel via Promise.all([listSchemas(), listTemplates()]) with a silent empty-state fallback on error.

src/pages/schemas-panel.tsx (new)

Four views driven by WizardView:

• BrowseView — Card grid of all existing schemas; empty state with CTA.
• CreateSchemaView — Controlled form (name, description, use case). Navigates to the new schema's workspace on success.
• WorkspaceView — Tabbed form to add templates (Upload PDF or pick from library). Lists linked templates with field counts, Configure and Remove actions. Shows canonization results inline after running.
• ConfigureView — Loads the PdfFieldConfigurator for a given schema + template pair.

src/components/pdf-field-configurator.tsx (new)

• PdfFieldConfigurator: renders a PDF via react-pdf. On page load, extracts all AcroForm Widget annotations and converts PDF coordinates to CSS-space positions (left = x1 × scale, top = (pageHeight − y2) × scale). Lays invisible <div> hotspots over each field. Overlay positions recalculate reactively on zoom changes.
• Toolbar: page navigation (◀ pageNum / total ▶) and zoom controls (− / +, 50 %–300 % range in 25 % steps).
• FieldConfigPanel: slide-in side panel (fixed 288 px width) shown when a hotspot is clicked.
  • Displays the read-only native PDF field name.
  • Editable fields: canonical name (with <datalist> autocomplete from existing schema canonical names), data type (string | int | date | enum), description, word limit (string only), allowed values (enum only, comma-separated), required checkbox.
  • Saves via PUT /schemas/{id}/fields/{fieldId} and propagates the updated field to the parent overlay and workspace without remounting.

src/pages/templates-panel.tsx (new)

• Browsable list of all uploaded PDF templates.
• Each entry links to the raw PDF preview via templatePdfUrl.

src/components/ — App Shell

• DashboardShell — Main layout wrapper (sidebar + content area).
• AppSidebar — Navigation sidebar using nav-main, nav-documents, nav-secondary, nav-user.
• SiteHeader — Top bar displaying the dynamic headerTitle.
• components/ui/ — shadcn/ui primitives: Button, Tabs, Popover, Badge, etc.

src/App.tsx / src/main.tsx

• Wraps the app in AppNavigationProvider and next-themes ThemeProvider.
• Routes between panels via AppNavigationContext.

Config files

• vite.config.ts, tsconfig*.json, eslint.config.js, components.json, index.html — standard Vite + shadcn project scaffolding.

---

Running Locally

cd client
npm install
npm run dev          # starts at http://localhost:5173

Set VITE_API_URL to point at your backend if it's not on http://127.0.0.1:8000.

---

Related Issues

Closes: #111