Skip to content

feat: add React client application for FireForm#402

Open
Calebnzm wants to merge 4 commits intofireform-core:mainfrom
Calebnzm:feat/client
Open

feat: add React client application for FireForm#402
Calebnzm wants to merge 4 commits intofireform-core:mainfrom
Calebnzm:feat/client

Conversation

@Calebnzm
Copy link
Copy Markdown

@Calebnzm Calebnzm commented Mar 31, 2026

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. This builds directly upon the architecture and validation extraction features established in PR #401 and PR #416, delivering a unified, interactive experience without requiring direct API interaction or modifying the underlying PDF files. This PR is huge because it is stacked on top of the 2 other PRs, so kindly take a look.

Previous State

Previously, the system was entirely backend-driven:

  1. Users had to interact directly with the FastAPI endpoints via Swagger or cURL to create schemas, upload templates, configure fields, and trigger canonizations.
  2. There was no visual way to identify and map the native, often cryptic, PDF field names (e.g., textbox_0_0) to standard canonical names.
  3. The rich field-level constraints introduced in previous PRs (description, word limit, allowed values) were difficult to visualize and configure by hand.

End-to-End User Flow

The client introduces a seamless visual pipeline for end users navigating the extraction process:

1. Template Management

A browsable index (templates-panel.tsx) of all uploaded PDF forms available to the organization. This provides the central library where templates are managed and previewed before being attached to specific Schemas.

template_management

2. PDF Field Configuration

The core setup feature: Renders the PDF read-only and overlays interactive, invisible hotspots over every detected AcroForm field. Clicking a hotspot opens a slide-in side panel to map canonical names and define extraction constraints.

pdf_configuration

3. Filling Forms (Extraction Triggering)

Once templates are configured, end users can access the "Fill Schema" interface. Here, they simply provide a submission name and paste their raw source text/transcript, delegating the heavy lifting to the AI pipeline.

filling view

4. Viewing and Downloading Results

Upon successful extraction, users are taken to the Submission Results view. This displays visually verifiable outputs with the extracted data populated directly into the original PDF. A simple "Download PDF" action is provided to retrieve the final artifacts.

filling

What This PR Introduces (Under the Hood)

  1. Interactive Dashboard: High-level overview of total schemas, templates, and library status.
  2. Schema Workspaces & Management: The schemas-panel.tsx workspace view manages template associations inline.
  3. Type-Safe API Client Layer: Introduces a robust frontend data layer (src/lib/api.ts) that strictly typifies (via TypeScript) all payloads.
  4. Centralized Navigation Architecture: React Context (AppNavigationContext) securely manages the global active panel and a nested WizardView for linear configuration steps.

Architecture

  • Frontend Stack: React 18+ with TypeScript, built via Vite.
  • State Management: React Context API manages global navigation and nested view states.
  • PDF Rendering: Integrates react-pdf to convert PDF coordinates to CSS-space positions, dynamically recalculating hotspot overlays on zoom changes.

Related Issues

Issue Relationship
Closes #111 Original client frontend tracking issue
Closes #405 Implements the web-based UI for form uploading and template mapping
Relates to #415 Frontend client requests rely on backend CORS being resolved
Relates to #394 The api.ts client implements readDetail to robustly extract the centralized error response formats

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant