# 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)

```js
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