feat: add React client application for FireForm#402
Open
Calebnzm wants to merge 4 commits intofireform-core:mainfrom
Open
feat: add React client application for FireForm#402Calebnzm wants to merge 4 commits intofireform-core:mainfrom
Calebnzm wants to merge 4 commits intofireform-core:mainfrom
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:
textbox_0_0) to standard canonical names.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.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.
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.
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.
What This PR Introduces (Under the Hood)
schemas-panel.tsxworkspace view manages template associations inline.src/lib/api.ts) that strictly typifies (via TypeScript) all payloads.AppNavigationContext) securely manages the global active panel and a nestedWizardViewfor linear configuration steps.Architecture
react-pdfto convert PDF coordinates to CSS-space positions, dynamically recalculating hotspot overlays on zoom changes.Related Issues
api.tsclient implementsreadDetailto robustly extract the centralized error response formats