Demand Letter Management Page

Last updated: 2026-07-07

Overview

Single-file HTML mockup (dre-demand-letters.html) for managing DRE demand letters. Covers the full lifecycle: draft → needs approval → ready to send → sent.

Sections

1. Pending Letters Table

Filter tabs: All / Draft / Needs Approval / Ready to Send / Sent
Columns: Claim # (mono amber), Debtor, Status badge, Authored By, Edit action
Pending count badge in header
Empty state when no letters match filter

2. Letter Composer (Left Panel)

Claim info bar: claim #, debtor name, amount, tier, status badge, author
Full-width textarea with mock demand letter content
Action buttons: Regenerate with AI, Submit for Approval, Send Now

3. AI Chat Sidebar (Right Panel, 360px)

Agent DRE header with online status dot
Chat message area with user/agent styled bubbles
3 preset buttons: "Make it firmer", "Add lien language", "Shorten to 1 paragraph"
Simulated AI responses that actually modify the letter text: firmer tone, lien clauses, condensed content, friendlier language

4. Approval Panel

Shows author name, submitted timestamp
Anita-authored letters: "Waiting on Tony or Germaine" banner, Approve/Reject buttons
Tony/Germaine-authored letters: "Ready to Send" auto-approved, disabled buttons
Rejection flow: textarea for reason, confirmation dialog, status returns to draft

5. Sent History (Collapsible)

Columns: Date Sent, Debtor, Claim, Status (opened/paid/returned), Sent To
Chevron toggle animation

6. Global Elements

Confirm dialog: Modal overlay for destructive actions (approve, reject, send)
Toast notifications: Animated slide-in, auto-dismiss (3.5s)
Header: D|R|E industrial logo, page title, user badge (Germaine Admin), dark toggle (stub)

Approval Workflow Implementation

Action	Source	Target	Condition
New Letter	Draft	—	Starts as draft
Submit for Approval	Draft	Needs Approval	Author sets submittedAt
Approve	Needs Approval	Ready to Send	Only allows if authored by Anita (Tony/Germaine role assumed)
Reject	Needs Approval	Draft	Requires reason text
Send Now	Ready to Send	Sent	Appends to sent history

Letters authored by Tony or Germaine skip the needs-approval step and go directly to ready-to-send.

Chat Intent Detection

The AI chat sidebar parses user input to detect intent and modifies letter content accordingly:

Intent	Trigger Words	Effect
firmer	firm, strong, aggressive, strict	Shortens payment window, strengthens language, adds FINAL NOTICE prefix
lien	lien, ucc, property	Appends UCC-1, judgment lien, Notice of Lien clauses
shorten	short, condense, brief, paragraph	Replaces entire letter with single-paragraph summary
friendlier	friendly, soft, gentle, kind	Replaces "demand" with "request", softens legal warnings
default	everything else	Generic "updated the draft" response

Dark Theme Convention

Background: #0b1121 / #0f172a (navy)
Cards: #0f172a with border-gray-800
Accent: #f59e0b (amber) for interactive elements, status badges in needs-approval state
Table rows: border-gray-800/50, hover bg-navy-800/40
Selected row: bg-navy-800/60
Chat user msg: bg-[#1e293b] border #334155
Chat agent msg: bg-[#0f172a] with amber border

Status Badges

Status	Class	Colors
Draft	badge-draft	bg-gray-700 text-gray-400
Needs Approval	badge-needs-approval	bg-amber-900/30 text-amber-300
Ready to Send	badge-ready	bg-emerald-900/30 text-emerald-400
Sent	badge-sent	bg-blue-900/30 text-blue-300

Data Model (Mock)

letter = {
  id: Number,
  claim: String,      // "DRE-2026-0142"
  debtor: String,     // "Marcus Bellweather"
  status: String,     // "draft" | "needs-approval" | "ready-to-send" | "sent"
  authoredBy: String, // "Anita Rodriguez" | "Tony Martelli" | "Germaine Vance"
  amount: Number,     // 12840.00
  tier: String,       // "Standard" | "Priority" | "Premium"
  submittedAt: String, // ISO timestamp or null
  content: String     // Letter body text
}

File Location

Source: /root/dre-demand-letters.html
Self-contained single HTML file with Tailwind CSS CDN and Font Awesome icons
No build step — open directly in browser

4.4 KiB Raw Blame History