A form-driven report builder with structured section entry, equipment reference data, live summary, and .docx export — built with Next.js and TypeScript.

Step 1 — Report Details

Step 3 — Fill Sections with Equipment Autofill

Step 4 — Summary & Export

Exported .docx Output

DocFlow Report Builder lets users build structured inspection reports through a guided step-by-step flow. Users select which sections to include, fill in typed fields, pick equipment from a reference list, review a live summary, and download a formatted .docx file — all in the browser with no backend required.

No database. No authentication. All data is in-memory.

• Report setup — Enter title, project name, client name, and date
• Section selection — Choose which sections to include: Visual Inspection, Distribution Test, Seal Check
• Structured forms — Text, number, select, checkbox, textarea, and read-only boilerplate fields per section
• Conditional fields — Extra fields appear based on selected values (e.g. review notes when result is "Needs Review")
• Equipment autofill — Select from a reference equipment list to auto-populate instrument details
• Live summary table — Updates in real time as sections are filled in
• .docx export — Downloads a fully structured Word document with all field values, equipment info, boilerplate text, and a summary table

git clone <repo-url>
cd docflow-report-builder
npm install
npm run dev

Open http://localhost:3000 in your browser.

This project deploys to Vercel with no configuration required.

1. Push to a GitHub repository
2. Import the repo at vercel.com/new
3. Click Deploy — no environment variables needed

app/
  layout.tsx          # Root layout with header and footer
  page.tsx            # Home page
  builder/
    page.tsx          # Report builder — step-by-step flow

components/
  ReportMetaForm.tsx  # Title, project, client, date fields
  SectionSelector.tsx # Section selection checkboxes
  SectionForm.tsx     # Dynamic form per section with conditional fields
  EquipmentSelect.tsx # Equipment dropdown with autofill
  SummaryTable.tsx    # Live summary table
  ExportButton.tsx    # .docx generation and download

lib/
  types.ts            # TypeScript interfaces
  buildDocument.ts    # docx assembly logic

data/
  sections.ts         # Section definitions with field schemas
  equipment.ts        # Reference equipment list

• Authentication and user management
• Database or persistent storage
• Multi-report dashboard
• PDF export
• Approval workflows
• Audit history