QuotePilot Automation

Build a Next.js + Tailwind + shadcn/ui mockup for an internal web application called "QuotePilot" — used by estimators at OC Custom Coating (a defense-industry powder coating company) to convert customer RFQ emails into structured, priced quotes and cross-check against Odoo before export.

CRITICAL: Use a SINGLE-COLUMN layout throughout. No side-by-side panels within sections. The entire content area is one column that stretches to a comfortable max-width (max-w-5xl or similar) and centers on the page. Estimators will scroll through the content top-to-bottom.

The workflow has 3 sequential sections shown as a horizontal stepper at the top: "1. Input Form", "2. Extraction Results", "3. Odoo Cross-Check". Each section has a completion state (green checkmark when done, current-active in green, pending in gray). Make the stepper clickable so users can jump between sections.

===

DESIGN SYSTEM:

• Primary color: industrial green (#2D5F3F)
• Warning/attention: warm amber (#B45309)
• Success: emerald (#10B981)
• Error/danger: red (#DC2626)
• Neutrals: white background, light gray borders (#E5E7EB), dark text (#111827)
• Body font: Inter or system UI
• Typography scale:
  • Page title (section header): text-3xl font-bold
  • Card title: text-xl font-semibold
  • Sub-section title: text-base font-semibold
  • Body: text-base
  • Helper/small: text-sm text-gray-500
• Cards: white background, rounded-lg, shadow-sm, border border-gray-200, p-6
• Consistent 24px (space-y-6) between cards
• shadcn/ui components throughout: Card, Tabs, Table, Badge, Button, Input, Textarea, Select, Alert, Separator, Tooltip

TOP NAV (fixed):

• Left: small circle logo in industrial green with "QP" text + product name "QuotePilot" + small tagline "RFQ Automation"
• Right: user avatar with name "Ted Kunewa", Save Draft ghost button, "Sync to Odoo" primary button

STEPPER (below top nav, sticky): Full-width bar with 3 numbered circles connected by lines:

1. Input Form (completed — green checkmark)
2. Extraction Results (currently active — green background, white number)
3. Odoo Cross-Check (pending — gray) Each step is clickable.

RFQ HEADER (below stepper, above main content): Small header showing:

• Left: large RFQ ID "QP26-001" in bold, with badge "Extraction Complete"
• Right: metadata pills — "BU: Maverick Powder Coating" | "Received: July 5, 2026" | "Customer: ABC Metal Works"

Now build the 3 sections. Show Section 2 (Extraction Results) as the currently visible/active screen with all details filled in.

===

SECTION 1: INPUT FORM

Section title: "Input Form" Section subtitle: "Enter customer email content and upload drawings to begin extraction."

CARD 1 — "Request / Email Details"

• Large textarea (min-height 250px) with label "Paste the customer's RFQ email content"
• Prefilled placeholder text: "Hi, Could we please get pricing for the attached items? The qty will be 6 each. Thanks, John ABC Company 714-555-1212"
• Small "Clear" ghost button in bottom-right corner of card

CARD 2 — "Upload Drawings"

• Drag-and-drop zone with dashed border and upload icon
• Label: "Upload or drop drawing files. Limit 200 MB per file. Supported: PDF, STP, STEP"
• Show 3 uploaded files as stacked cards (not side-by-side):
  • Row 1: 📄 Filename1.pdf | 5,426 KB | badge "PDF" | [View] [× Remove]
  • Row 2: 🔧 Filename2.stp | 6,426 KB | badge "CAD — accurate surface area" (green) | [View] [× Remove]
  • Row 3: 🔧 Filename3.step | 7,426 KB | badge "CAD — accurate surface area" (green) | [View] [× Remove]

CARD 3 — "Additional Info"

• Radio group: "Parts delivered in hand?" — options: "At receiving" | "Not received"
• Dropdown: "Business Unit" with "Maverick Powder Coating" selected

CARD 4 — "Process the RFQ" Single-row layout:

• Left: Dropdown "AI Model" with options: Gemini 2.5 Pro (selected), Claude Opus 4.8, Grok 4.20
• Right: Large primary button "RUN Extraction →"

===

SECTION 2: EXTRACTION RESULTS (this is the main focus — build in most detail)

Section title: "Extraction Results" Section subtitle: "Review each part's coating specs and pricing before Odoo cross-check."

Metadata line: small text "Extracted with Gemini 2.5 Pro · 47 fields · 3 flagged for review"

Alert banner at top:

• Green/success: "AI extraction complete. Review each part below."
• Include a "View Extraction Log" link on the right

CARD 1 — "Customer Information" (collapsible, expanded by default) Single column of fields (each label on its own line, value below, with inline edit-pencil icon on hover):

• Odoo Q#: (empty — helper "If applicable")
• Company: ABC Metal Works
• Contact: John Smith
• Email: [email protected]
• Phone: 714-555-1212
• Address: 123 Main St, Los Angeles, CA 90024
• Email/Req Date: July 5, 2026
• Request DD (Due Date): Unknown ⚠️ (amber warning)
• Request Summary: "Request for quote to apply CARC powder coating to two riveted assemblies per drawings 117-0018-001 and 117-0019-001."

CARD 2 — "Part Summary" Above-the-fold summary table showing all parts at a glance:

• Table with columns: # | Part # | Qty | Name/Description | Price/unit | Total
• Row 1: 1 | Pa4-354/35 | 10 | Rivet Panel Holder | $300 / 250 sqin | $3,000
• Row 2: 2 | DSC4577524 | 25 | Wheel Bearing Insert | $55 / 10 sqin | $1,375
• Row 3: 3 | ABCsdf456456 | 3 | Lamp Shade Panel With Multi-Colors | $2,000 / 1,562 sqin | $6,000
• Bottom row (bold): "Total Quote: $10,375" — right-aligned, larger text

CARD 3 — "Part Details" — this is the biggest card and contains one sub-card per part. Show Part 1 (Pa4-354/35) fully expanded. Show Parts 2 and 3 as collapsed rows with expand chevron and part name/number visible.

PART 1 SUB-CARD (fully expanded, single column, all content stacked vertically):

Header row of the sub-card:

• Left: "Pa4-354/35 → Rivet Panel Holder" (bold, larger)
• Right: [✏️ Edit] [🗑 Delete] buttons

This is the beginning of the README. Read the rest at the original. Read the full README ↗