# DRE Portal Mockups — Reference Index

All mockups live at `/root/portal-mockup/` and are served via Caddy at `https://app.itpropartner.com/`.

## Customer-Facing Pages

| Page | Purpose | Design Notes |
|------|---------|-------------|
| `debt-recovery.html` | Claim intake form | Split-screen: dark gradient (navy→amber) brand left, clean white form right. Form order: Your Info → Debtor Info → Claim Details → Docs → Terms → Turnstile → Submit. Upload area empty until files selected. Turnstile invisible mode. |
| `dre-client-dashboard.html` | Client portal after login | White theme, summary cards top, active claim with tier progress indicator (4-step flex column: circles + labels centered below + connecting lines), past claims table with outcome badges, right sidebar with submit button + stats + disbursements. **Agent D.R.E chat widget** embedded as fixed bottom-right amber bubble. |
| `dre-pay.html` | Debtor payment landing page | Minimal single-column card. Fields: Claim/Invoice #, Full Name, Amount. Turnstile. "Continue to Payment" button → Stripe checkout. Trust signals (Secure, ACH, Receipt). No navigation, no clutter. |
| `dre-fee-calculator.html` | Live fee calculator | Input amount in any currency, see all 4 tiers side-by-side showing "You receive" and "DRE fee" at each tier. Color-coded cards (green→blue→amber→red). Live JavaScript recalculation on input change. |

## Internal DRE Pages (dark theme, #0f172a background)

| Page | Purpose | Sections |
|------|---------|----------|
| `dre-dashboard.html` | Internal claims queue + claim detail | Claims table (score, status, age), claim detail card with action buttons, recovery progression timeline (tiered), case timeline (event stream), change history (audit log), AI analysis panel (score gauge + factor bars + weakness text + risk flags), debtor research panel (ScrapingAnt + Sherlock results + TX SoS data), case comparison stats. |
| `dre-case-aging.html` | Case aging dashboard | Summary cards (active/avg age/on-track rate), table: claim/debtor/amount/tier/age in tier/target/status, stalled alert banner, SMS notification status card. Targets: Tier 1=5d, Tier 2=7d, Tier 3=10d. |
| `dre-pay.html` | Debtor payment page | Minimal single-column: claim/invoice #, full name, amount, Turnstile → Stripe. No navigation. Trust signals. |
| `dre-fee-calculator.html` | Live fee calculator | Input amount, see all 4 tiers side-by-side. Color-coded cards. JavaScript live recalculation. |

## Approval Workflow UI

- Approve & Continue button has hover tooltip explaining dual-approval workflow
- Pending approvals shown in header nav as amber badge: "● 1 Pending Approval" with hover detail
- Status in claims table: "Pending Germaine ✓", "Pending Tony ✓", "Acknowledged"
- Anita has read-only view — approver-only elements hidden

## Color Schemes

| Context | Theme | Card bg | Border accent | Text |
|---------|-------|---------|--------------|------|
| Customer | White (#f8fafc bg, white cards) | #ffffff | Blue/amber | Gray-900 headers, gray-500 body |
| Internal | Dark (#0f172a bg) | #1e293b | #334155 | Gray-300 body, amber/blue/green for status |
| Debtor pay | Light (#f8fafc) | White card | Gray-200 | Gray-900, amber CTAs |

## ScrapingAnt-Inspired Layout (used on debt-recovery.html)

```
Left (50%): Gradient navy → amber, logo, tagline, feature icons with descriptions, trust footer
Right (50%): Clean white form max-w-md centered vertically
Mobile: Single column, brand info collapses to top header
```

## Agent D.R.E Chat Widget (embedded in dre-client-dashboard.html)

Three states:
1. **Lead capture** (non-logged-in visitor) — 4 fields (Name*, Company, Email*, Phone), submit unlocks chat
2. **Logged-in greeting** — "Welcome back, {Company}! Your claim against {Debtor} is in {Tier N}. I'm Agent D.R.E."
3. **Conversation** — FAQ buttons + free-text input + message team form

Personality: empathetic, engaging with leading questions, no promises, never shares internal methods. Knowledge isolation documented in debt-recovery-workflow skill.

Message team form: subject dropdown + free text + send/cancel buttons. Logs to case file, notifies team.