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

Three states:

Lead capture (non-logged-in visitor) — 4 fields (Name*, Company, Email*, Phone), submit unlocks chat
Logged-in greeting — "Welcome back, {Company}! Your claim against {Debtor} is in {Tier N}. I'm Agent D.R.E."
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.

4.1 KiB Raw Permalink Blame History