107 lines
4.4 KiB
Markdown
107 lines
4.4 KiB
Markdown
# 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
|