Backend Aug 22-25: AI analysis, welcome-packet templating, LetterStream, DocuSeal, staff RBAC + tier gate

- analysis.py: deterministic claim scorer + /analyze /approve /letter /advance-tier endpoints (auto-runs on intake) - packet.py + packet_fields.json: welcome-packet templating engine (6 onboarding docs, field catalog) - letterstream.py + letters.py: certified-mail send pipeline + letter lifecycle (webhook verified) - docuseal.py: DocuSeal signing integration - staff.py/models.py/schema.sql/auth.py: approval actor from staff key, tier gate (APPROVED+ACTIVE+onboarding docs), onboarding_docs table - frontend/: dependency-free static portal (intake, magic-link login/verify, dashboard) - landing-mockups/: 4 design-stance mockups + favicons - legal/: aup/privacy/sms-terms/terms HTML - docs/: letter-queue scope, letterstream API contract, 6 welcome-packet templates - review-dre-landing-2026-08-21.md: 3-variant landing feedback sprint - compliance/DRE_Compliance_Manual.md: updated Source synced from deployed /opt/dre-portal/app/ (was 4 days ahead of git).
2026-08-26 02:26:33 -04:00
parent 7a5603b495
commit 7a62b0b340
46 changed files with 11004 additions and 35 deletions
@@ -0,0 +1,86 @@
+# DRE Customer Portal - Static Frontend
+
+Dependency-free HTML/CSS/JS frontend for the Debt Recovery Experts (DRE)
+customer portal. No build step, no frameworks, no npm. Every page loads
+`css/dre.css` and (where interactive) `js/dre-api.js` via plain `<script>`
+tags, and calls the backend using relative `/api/*` paths only. This is
+intended to be dropped behind Caddy, which proxies `/api/*` to the FastAPI
+backend and serves everything else as static files on the two subdomains
+below.
+
+This directory is a DESIGN-ONLY deliverable: no deploy, no Caddy/systemd
+config, no backend changes were made or are included here.
+
+## Files created
+
+```
+/root/projects/dre/frontend/
+  index.html          Public intake form
+  login.html          Client login (request magic link)
+  verify.html         Magic-link verification landing page
+  dashboard.html       Client dashboard (claims list + detail + upload + messages)
+  css/dre.css         Shared stylesheet for all four pages
+  js/dre-api.js        Shared JS helper: fetch wrapper, session storage, formatting
+  README.md           This file
+```
+
+## Route / subdomain mapping
+
+| File            | Serves at                                       | Auth required |
+|------------------|--------------------------------------------------|---------------|
+| `index.html`     | `portal.debtrecoveryexperts.com/` (site root)     | No (public)   |
+| `login.html`     | `my.debtrecoveryexperts.com/` (site root)         | No (public)   |
+| `verify.html`    | `my.debtrecoveryexperts.com/verify`               | No (public, consumes a one-time token) |
+| `dashboard.html` | `my.debtrecoveryexperts.com/dashboard`            | Yes (redirects to `login.html` if no session) |
+| `css/dre.css`    | `/css/dre.css` on both subdomains                 | -             |
+| `js/dre-api.js`  | `/js/dre-api.js` on both subdomains               | -             |
+
+Caddy is expected to:
+1. Serve `portal.debtrecoveryexperts.com` from this directory with `index.html` as the site index.
+2. Serve `my.debtrecoveryexperts.com` from this directory with `login.html` as the site index, `verify.html` at `/verify`, and `dashboard.html` at `/dashboard`.
+3. Reverse-proxy `/api/*` on both subdomains to the FastAPI backend (same-origin so the JS `fetch()` calls need no CORS config and no hardcoded backend host).
+
+No Caddyfile is included per the design-only constraint; this table is the
+spec for whoever wires up routing.
+
+## API contract implemented (verified against backend/main.py, backend/models.py, backend/claims.py, backend/intake.py)
+
+- `POST /api/intake` - body `{client:{company_name, contact_name, email, phone?}, debtor:{name, business_type, contact_email?, contact_phone?, physical_address?}, claim:{amount_cents, description?, client_reference?, invoice_date?}, tos_accepted:true}`. Response `{claim_number, client_number, status, message}`. Amount is collected as dollars in the UI and converted to integer cents client-side before posting.
+- `POST /api/auth/request` - body `{email}`. Always returns the anti-enumeration message `{message: "If an account exists..."}`; UI always shows the "check your email" state on a 2xx response regardless of whether the account exists.
+- `POST /api/auth/verify` - body `{token}`. Response `{session_token, expires_at, client:{client_number, company_name, contact_name}}`. Token is read from `?token=` in the URL, stripped from the address bar immediately (history.replaceState) before the API call, and the session token is stored in `localStorage` under the key `dre_session_token`.
+- `GET /api/auth/me` - `Authorization: Bearer <token>`. Response `{client:{...}, claim_count}`.
+- `POST /api/auth/logout` - `Authorization: Bearer <token>`. Clears local storage and redirects to login regardless of response.
+- `GET /api/claims` - Response `{claims:[{claim_number, status, status_label, tier, amount_cents, amount_display, debtor_name, created_at, date_resolved}]}`.
+- `GET /api/claims/{claim_number}` - Response includes `status_label`, `tier_step` (used to render the 4-step progress bar), `debtor:{name, business_type}`, `documents:[...]`, `notes:[...]`. Note: this endpoint does not return a claim `created_at`; the UI shows `date_assigned` (or "Not yet assigned") instead of a submission date.
+- `POST /api/claims/{claim_number}/documents` - multipart `FormData` with field name `file` (matches `UploadFile = File(...)` param name in `claims.py`). Client-side pre-checks: 20 MB max, extensions `.pdf .jpg .jpeg .png .doc .docx` (mirrors `ALLOWED_EXT` in `claims.py`).
+- `POST /api/claims/{claim_number}/messages` - body `{subject, content}`. `subject` must be one of the fixed `MESSAGE_SUBJECTS` enum from `models.py`; rendered as a `<select>` with those exact values. (The backend's client-facing endpoint for adding case correspondence is `/messages`, not `/notes` - the dashboard's "Message the Team" panel targets this and refreshes the notes list on success, since messages are stored as shared case notes.)
+
+Error envelope handled uniformly everywhere: `{"error": {"code", "message"}}`.
+Specific codes handled: `validation_error` (422, including per-field mapping
+on the intake form for `client.*` / `debtor.*` / `claim.*` / `tos_accepted`
+locations), `unauthorized` (401, clears session + redirects to login),
+`not_found` (404), `rate_limited` (429), `payload_too_large` /
+`unsupported_media_type` / `conflict` (document upload).
+
+## Compliance / safety notes
+
+- No field anywhere collects SSN, full bank account, or card numbers. The intake form has an explicit on-page warning, and the backend's PII regex rejection (`validation_error`) is surfaced inline on the matching form field when triggered.
+- All user-authored or backend-sourced free text (case notes, messages) is rendered via `textContent`, never `innerHTML`, so it cannot execute as markup even though the backend also HTML-escapes it server-side.
+- Wording throughout intake/login/dashboard is neutral and professional (e.g. "recovery review", "claim", "case notes") - no aggressive or threatening collector language, consistent with FDCPA/TDCPA constraints.
+- Dollar amounts are always rendered from integer cents (`amount_cents / 100`), formatted as USD via `DRE.formatCentsUSD()`.
+
+## What was NOT done (out of scope for this seat)
+
+- No deployment: nothing was copied to `/opt/dre-portal` or any web root.
+- No Caddy or systemd configuration was created or modified.
+- No backend files were modified (only read for contract verification).
+- No database was created, seeded, or touched.
+
+## Manual smoke test performed
+
+Served this directory locally with `python3 -m http.server` (throwaway, not
+part of the deliverable) and confirmed all six files return HTTP 200,
+all inline `<script>` blocks parse without syntax errors (`node -c`
+equivalent check), all HTML tags balance, and every `getElementById()`
+reference in the JS resolves to an element that actually exists in the
+corresponding HTML file.
@@ -0,0 +1,434 @@
+/* ==========================================================================
+   DRE Customer Portal — shared stylesheet
+   Dependency-free. Used by index.html, login.html, verify.html, dashboard.html
+   ========================================================================== */
+
+:root {
+  --dre-navy: #0f2942;
+  --dre-navy-dark: #0a1c2e;
+  --dre-teal: #0f766e;
+  --dre-teal-light: #14b8a6;
+  --dre-ink: #1b2733;
+  --dre-slate: #52606d;
+  --dre-slate-light: #8896a5;
+  --dre-line: #dfe5eb;
+  --dre-bg: #f6f8fa;
+  --dre-white: #ffffff;
+  --dre-ok-bg: #e8f6f1;
+  --dre-ok-text: #0f6b52;
+  --dre-warn-bg: #fdf3e7;
+  --dre-warn-text: #92600a;
+  --dre-err-bg: #fdecec;
+  --dre-err-text: #9b2226;
+  --dre-radius: 10px;
+  --dre-shadow: 0 1px 2px rgba(15, 41, 66, 0.06), 0 4px 16px rgba(15, 41, 66, 0.06);
+  --dre-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--dre-font);
+  color: var(--dre-ink);
+  background: var(--dre-bg);
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+a { color: var(--dre-teal); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+h1, h2, h3 { color: var(--dre-navy); line-height: 1.25; margin: 0 0 0.5em; }
+h1 { font-size: 1.75rem; }
+h2 { font-size: 1.3rem; }
+h3 { font-size: 1.05rem; }
+p { margin: 0 0 1em; color: var(--dre-slate); }
+
+/* ---------------------------------------------------------------- header */
+.dre-header {
+  background: var(--dre-navy);
+  color: #fff;
+  padding: 0.9rem 1.5rem;
+}
+.dre-header-inner {
+  max-width: 1100px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+.dre-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  color: #fff;
+  font-weight: 700;
+  font-size: 1.15rem;
+  letter-spacing: 0.01em;
+}
+.dre-brand:hover { text-decoration: none; }
+.dre-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  background: var(--dre-teal-light);
+  color: var(--dre-navy-dark);
+  font-weight: 800;
+  font-size: 0.85rem;
+}
+.dre-brand-sub {
+  font-weight: 400;
+  font-size: 0.78rem;
+  color: #c6d3de;
+  display: block;
+}
+.dre-header-actions { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; }
+.dre-header-actions a { color: #dbe7f0; }
+.dre-header-actions .dre-user { color: #cfe0ea; }
+
+/* ---------------------------------------------------------------- layout */
+.dre-main {
+  flex: 1;
+  width: 100%;
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 2rem 1.5rem 3rem;
+}
+.dre-main.dre-narrow { max-width: 640px; }
+
+.dre-footer {
+  text-align: center;
+  padding: 1.5rem;
+  color: var(--dre-slate-light);
+  font-size: 0.82rem;
+  border-top: 1px solid var(--dre-line);
+  background: var(--dre-white);
+}
+
+/* ---------------------------------------------------------------- cards */
+.dre-card {
+  background: var(--dre-white);
+  border: 1px solid var(--dre-line);
+  border-radius: var(--dre-radius);
+  box-shadow: var(--dre-shadow);
+  padding: 1.75rem;
+  margin-bottom: 1.5rem;
+}
+.dre-card-tight { padding: 1.1rem 1.4rem; }
+
+.dre-intro { text-align: center; margin-bottom: 2rem; }
+.dre-intro p { max-width: 560px; margin-left: auto; margin-right: auto; }
+
+/* ---------------------------------------------------------------- forms */
+.dre-form-section { margin-bottom: 1.75rem; }
+.dre-form-section:last-of-type { margin-bottom: 0; }
+.dre-form-section h3 {
+  border-bottom: 1px solid var(--dre-line);
+  padding-bottom: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.dre-field { margin-bottom: 1.1rem; }
+.dre-field label {
+  display: block;
+  font-weight: 600;
+  font-size: 0.88rem;
+  color: var(--dre-navy);
+  margin-bottom: 0.35rem;
+}
+.dre-field .dre-hint {
+  display: block;
+  font-weight: 400;
+  color: var(--dre-slate-light);
+  font-size: 0.8rem;
+  margin-top: 0.3rem;
+}
+.dre-required { color: var(--dre-err-text); }
+
+.dre-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
+@media (max-width: 620px) {
+  .dre-row { grid-template-columns: 1fr; }
+}
+
+input[type="text"],
+input[type="email"],
+input[type="tel"],
+input[type="number"],
+input[type="date"],
+select,
+textarea {
+  width: 100%;
+  padding: 0.6rem 0.75rem;
+  font-size: 0.95rem;
+  font-family: inherit;
+  color: var(--dre-ink);
+  background: #fff;
+  border: 1px solid #c9d3dc;
+  border-radius: 7px;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+textarea { resize: vertical; min-height: 90px; }
+input:focus, select:focus, textarea:focus {
+  outline: none;
+  border-color: var(--dre-teal);
+  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
+}
+input[aria-invalid="true"], textarea[aria-invalid="true"] {
+  border-color: var(--dre-err-text);
+}
+
+.dre-checkbox-field {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.6rem;
+}
+.dre-checkbox-field input[type="checkbox"] {
+  margin-top: 0.2rem;
+  width: 17px;
+  height: 17px;
+  flex-shrink: 0;
+}
+.dre-checkbox-field label { font-weight: 400; color: var(--dre-slate); font-size: 0.9rem; }
+
+/* ---------------------------------------------------------------- buttons */
+.dre-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.7rem 1.4rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  font-family: inherit;
+  border-radius: 7px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: background 0.15s, opacity 0.15s, box-shadow 0.15s;
+}
+.dre-btn-primary {
+  background: var(--dre-teal);
+  color: #fff;
+}
+.dre-btn-primary:hover { background: #0c5e57; }
+.dre-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
+.dre-btn-secondary {
+  background: #fff;
+  color: var(--dre-navy);
+  border-color: #c9d3dc;
+}
+.dre-btn-secondary:hover { background: #f2f5f7; }
+.dre-btn-block { width: 100%; }
+.dre-btn-sm { padding: 0.4rem 0.9rem; font-size: 0.85rem; }
+.dre-btn-danger { background: #fff; color: var(--dre-err-text); border-color: #eec5c6; }
+.dre-btn-danger:hover { background: var(--dre-err-bg); }
+
+/* ---------------------------------------------------------------- spinner */
+.dre-spinner {
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  border: 2px solid rgba(255,255,255,0.4);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: dre-spin 0.7s linear infinite;
+}
+.dre-spinner-dark {
+  border-color: rgba(15,41,66,0.2);
+  border-top-color: var(--dre-navy);
+}
+@keyframes dre-spin { to { transform: rotate(360deg); } }
+
+/* ---------------------------------------------------------------- alerts */
+.dre-alert {
+  border-radius: 8px;
+  padding: 0.85rem 1rem;
+  margin-bottom: 1.25rem;
+  font-size: 0.9rem;
+  display: none;
+}
+.dre-alert.is-visible { display: block; }
+.dre-alert-error { background: var(--dre-err-bg); color: var(--dre-err-text); border: 1px solid #f3c8c9; }
+.dre-alert-success { background: var(--dre-ok-bg); color: var(--dre-ok-text); border: 1px solid #b9e3d4; }
+.dre-alert-info { background: #eaf2fb; color: #1c4d80; border: 1px solid #c9def4; }
+.dre-field-error {
+  color: var(--dre-err-text);
+  font-size: 0.82rem;
+  margin-top: 0.35rem;
+  display: none;
+}
+.dre-field-error.is-visible { display: block; }
+
+/* ---------------------------------------------------------------- states */
+.dre-state {
+  text-align: center;
+  padding: 2rem 1rem;
+}
+.dre-state-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 1rem;
+  font-size: 1.6rem;
+  font-weight: 700;
+}
+.dre-state-icon.ok { background: var(--dre-ok-bg); color: var(--dre-ok-text); }
+.dre-state-icon.err { background: var(--dre-err-bg); color: var(--dre-err-text); }
+.dre-state-icon.info { background: #eaf2fb; color: #1c4d80; }
+
+.dre-kv {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.4rem 1rem;
+  text-align: left;
+  max-width: 360px;
+  margin: 1.25rem auto 0;
+  font-size: 0.92rem;
+}
+.dre-kv dt { color: var(--dre-slate); font-weight: 600; }
+.dre-kv dd { margin: 0; color: var(--dre-ink); }
+
+/* ---------------------------------------------------------------- claims list */
+.dre-stats-row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+@media (max-width: 620px) {
+  .dre-stats-row { grid-template-columns: 1fr; }
+}
+.dre-stat {
+  background: var(--dre-white);
+  border: 1px solid var(--dre-line);
+  border-radius: var(--dre-radius);
+  padding: 1.1rem 1.3rem;
+  box-shadow: var(--dre-shadow);
+}
+.dre-stat .dre-stat-label { font-size: 0.8rem; color: var(--dre-slate-light); text-transform: uppercase; letter-spacing: 0.03em; }
+.dre-stat .dre-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--dre-navy); margin-top: 0.2rem; }
+
+.dre-claim-list { display: flex; flex-direction: column; gap: 0.75rem; }
+.dre-claim-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  background: var(--dre-white);
+  border: 1px solid var(--dre-line);
+  border-radius: var(--dre-radius);
+  padding: 1rem 1.25rem;
+  cursor: pointer;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.dre-claim-row:hover { border-color: var(--dre-teal); box-shadow: var(--dre-shadow); }
+.dre-claim-main { display: flex; flex-direction: column; gap: 0.2rem; }
+.dre-claim-number { font-weight: 700; color: var(--dre-navy); font-size: 0.95rem; }
+.dre-claim-sub { font-size: 0.85rem; color: var(--dre-slate); }
+.dre-claim-amount { font-weight: 700; color: var(--dre-navy); font-size: 1.05rem; text-align: right; }
+.dre-claim-meta { text-align: right; font-size: 0.8rem; color: var(--dre-slate-light); margin-top: 0.15rem; }
+
+.dre-badge {
+  display: inline-block;
+  padding: 0.2rem 0.65rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  background: #eef1f4;
+  color: var(--dre-slate);
+}
+.dre-badge-new, .dre-badge-under_review { background: #eaf2fb; color: #1c4d80; }
+.dre-badge-active, .dre-badge-negotiation { background: var(--dre-warn-bg); color: var(--dre-warn-text); }
+.dre-badge-legal { background: #f3e8fd; color: #6b21a8; }
+.dre-badge-settled, .dre-badge-closed { background: var(--dre-ok-bg); color: var(--dre-ok-text); }
+.dre-badge-write_off, .dre-badge-rejected { background: var(--dre-err-bg); color: var(--dre-err-text); }
+
+/* ---------------------------------------------------------------- claim detail */
+.dre-back-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1rem; font-size: 0.9rem; }
+
+.dre-progress {
+  display: flex;
+  gap: 0.4rem;
+  margin: 1.25rem 0 0.4rem;
+}
+.dre-progress-step {
+  flex: 1;
+  height: 8px;
+  border-radius: 4px;
+  background: #e6eaee;
+}
+.dre-progress-step.is-done { background: var(--dre-teal); }
+.dre-progress-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.72rem;
+  color: var(--dre-slate-light);
+  margin-bottom: 1.25rem;
+}
+
+.dre-detail-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.9rem 1.5rem;
+  margin-top: 1rem;
+}
+@media (max-width: 620px) {
+  .dre-detail-grid { grid-template-columns: 1fr; }
+}
+.dre-detail-grid dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--dre-slate-light); margin: 0; }
+.dre-detail-grid dd { margin: 0.15rem 0 0; color: var(--dre-ink); font-size: 0.95rem; }
+
+.dre-doc-list, .dre-note-list { list-style: none; margin: 0; padding: 0; }
+.dre-doc-item, .dre-note-item {
+  border: 1px solid var(--dre-line);
+  border-radius: 8px;
+  padding: 0.8rem 1rem;
+  margin-bottom: 0.6rem;
+}
+.dre-doc-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
+.dre-doc-name { font-weight: 600; color: var(--dre-navy); font-size: 0.9rem; }
+.dre-doc-meta { font-size: 0.78rem; color: var(--dre-slate-light); }
+.dre-note-head { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--dre-slate-light); margin-bottom: 0.35rem; }
+.dre-note-author { font-weight: 700; color: var(--dre-navy); }
+.dre-note-body { font-size: 0.92rem; color: var(--dre-ink); white-space: pre-wrap; word-break: break-word; }
+
+.dre-dropzone {
+  border: 2px dashed #c9d3dc;
+  border-radius: 8px;
+  padding: 1.5rem;
+  text-align: center;
+  color: var(--dre-slate);
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+.dre-dropzone:hover, .dre-dropzone.is-dragover { border-color: var(--dre-teal); background: #f0faf8; }
+.dre-dropzone input[type="file"] { display: none; }
+
+.dre-empty {
+  text-align: center;
+  padding: 2.5rem 1rem;
+  color: var(--dre-slate);
+}
+
+/* ---------------------------------------------------------------- utility */
+.dre-hidden { display: none !important; }
+.dre-mt { margin-top: 1.5rem; }
+.dre-center { text-align: center; }
+.dre-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
+.dre-small { font-size: 0.85rem; color: var(--dre-slate-light); }
@@ -0,0 +1,540 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Dashboard - Debt Recovery Experts Client Portal</title>
+<link rel="stylesheet" href="css/dre.css">
+</head>
+<body>
+
+<header class="dre-header">
+  <div class="dre-header-inner">
+    <a class="dre-brand" href="dashboard.html">
+      <span class="dre-mark">DRE</span>
+      <span>
+        Debt Recovery Experts
+        <span class="dre-brand-sub">Client Portal</span>
+      </span>
+    </a>
+    <div class="dre-header-actions">
+      <span class="dre-user" id="header-user"></span>
+      <a href="#" id="logout-link">Log Out</a>
+    </div>
+  </div>
+</header>
+
+<main class="dre-main">
+
+  <div id="dash-alert" class="dre-alert dre-alert-error" role="alert"></div>
+
+  <!-- ============================== LOADING STATE ============================== -->
+  <div id="dash-loading" class="dre-state">
+    <div class="dre-spinner dre-spinner-dark" style="width:32px;height:32px;border-width:3px;margin:0 auto 1rem;"></div>
+    <p>Loading your account...</p>
+  </div>
+
+  <!-- ============================== LIST VIEW ============================== -->
+  <div id="view-list" class="dre-hidden">
+    <div class="dre-flex-between" style="margin-bottom:1.25rem;">
+      <h1 style="margin:0;">Your Claims</h1>
+    </div>
+
+    <div class="dre-stats-row">
+      <div class="dre-stat">
+        <div class="dre-stat-label">Total Claims</div>
+        <div class="dre-stat-value" id="stat-total">0</div>
+      </div>
+      <div class="dre-stat">
+        <div class="dre-stat-label">Open</div>
+        <div class="dre-stat-value" id="stat-open">0</div>
+      </div>
+      <div class="dre-stat">
+        <div class="dre-stat-label">Recovered / Resolved</div>
+        <div class="dre-stat-value" id="stat-resolved">0</div>
+      </div>
+    </div>
+
+    <div id="claim-list" class="dre-claim-list"></div>
+
+    <div id="claim-empty" class="dre-card dre-empty dre-hidden">
+      <h3>No Claims Yet</h3>
+      <p>You have not submitted any claims. Once you submit a claim, it will appear here with
+         live status updates.</p>
+      <a href="https://my.debtrecoveryexperts.com/start" class="dre-btn dre-btn-primary">Submit a Claim</a>
+    </div>
+  </div>
+
+  <!-- ============================== DETAIL VIEW ============================== -->
+  <div id="view-detail" class="dre-hidden">
+    <a href="#" id="back-to-list" class="dre-back-link">&larr; Back to all claims</a>
+
+    <div class="dre-card">
+      <div class="dre-flex-between">
+        <div>
+          <h2 id="detail-claim-number" style="margin-bottom:0.2rem;">--</h2>
+          <span id="detail-badge" class="dre-badge">--</span>
+        </div>
+        <div style="text-align:right;">
+          <div class="dre-stat-label">Amount</div>
+          <div class="dre-stat-value" id="detail-amount">--</div>
+        </div>
+      </div>
+
+      <div class="dre-progress" id="detail-progress"></div>
+      <div class="dre-progress-labels">
+        <span>Soft Touch</span>
+        <span>Formal Demand</span>
+        <span>Escalation</span>
+        <span>Legal Action</span>
+      </div>
+
+      <dl class="dre-detail-grid">
+        <div>
+          <dt>Debtor</dt>
+          <dd id="detail-debtor-name">--</dd>
+        </div>
+        <div>
+          <dt>Debtor Type</dt>
+          <dd id="detail-debtor-type">--</dd>
+        </div>
+        <div>
+          <dt>Description</dt>
+          <dd id="detail-description">--</dd>
+        </div>
+        <div>
+          <dt>Your Reference</dt>
+          <dd id="detail-reference">--</dd>
+        </div>
+        <div>
+          <dt>Invoice Date</dt>
+          <dd id="detail-invoice-date">--</dd>
+        </div>
+        <div>
+          <dt>Date Assigned</dt>
+          <dd id="detail-created">--</dd>
+        </div>
+      </dl>
+    </div>
+
+    <div class="dre-card">
+      <h3>Documents</h3>
+      <ul id="doc-list" class="dre-doc-list"></ul>
+      <p id="doc-empty" class="dre-small dre-hidden">No documents uploaded yet.</p>
+
+      <div id="upload-alert" class="dre-alert dre-alert-error" role="alert"></div>
+      <label for="doc-file-input" class="dre-dropzone" id="dropzone">
+        <strong>Click to choose a file</strong> or drag one here<br>
+        <span class="dre-small">PDF, JPG, PNG, DOC, DOCX up to 20 MB</span>
+        <input type="file" id="doc-file-input" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx">
+      </label>
+      <div id="upload-progress" class="dre-small dre-hidden dre-mt">Uploading...</div>
+    </div>
+
+    <div class="dre-card">
+      <h3>Case Notes</h3>
+      <ul id="note-list" class="dre-note-list"></ul>
+      <p id="note-empty" class="dre-small dre-hidden">No notes yet.</p>
+    </div>
+
+    <div class="dre-card">
+      <h3>Message the Team</h3>
+      <div id="message-alert" class="dre-alert dre-alert-error" role="alert"></div>
+      <div id="message-sent" class="dre-alert dre-alert-success" role="status"></div>
+      <form id="message-form">
+        <div class="dre-field">
+          <label for="message-subject">Subject <span class="dre-required">*</span></label>
+          <select id="message-subject" required>
+            <option value="Question about my claim">Question about my claim</option>
+            <option value="New information about the debtor">New information about the debtor</option>
+            <option value="Payment received / want to stop recovery">Payment received / want to stop recovery</option>
+            <option value="Update my contact info">Update my contact info</option>
+            <option value="Complaint or concern">Complaint or concern</option>
+            <option value="Other">Other</option>
+          </select>
+        </div>
+        <div class="dre-field">
+          <label for="message-content">Message <span class="dre-required">*</span></label>
+          <textarea id="message-content" maxlength="10000" required placeholder="Type your message to the recovery team..."></textarea>
+        </div>
+        <button type="submit" id="message-submit" class="dre-btn dre-btn-primary">Send Message</button>
+      </form>
+    </div>
+  </div>
+
+</main>
+
+<footer class="dre-footer">
+  Debt Recovery Experts Client Portal. All account activity is logged for compliance purposes.
+</footer>
+
+<script src="js/dre-api.js"></script>
+<script>
+(function () {
+  "use strict";
+
+  var token = DRE.requireSessionOrRedirect("login.html");
+  if (!token) return; // redirect already triggered
+
+  var loadingEl = document.getElementById("dash-loading");
+  var listView = document.getElementById("view-list");
+  var detailView = document.getElementById("view-detail");
+  var dashAlert = document.getElementById("dash-alert");
+
+  var claimsCache = [];
+
+  function handleAuthFailure(result) {
+    if (result.status === 401) {
+      DRE.clearSessionToken();
+      window.location.href = "login.html";
+      return true;
+    }
+    return false;
+  }
+
+  function logout() {
+    DRE.apiFetch("/api/auth/logout", { method: "POST", auth: true }).then(function () {
+      DRE.clearSessionToken();
+      window.location.href = "login.html";
+    });
+  }
+  document.getElementById("logout-link").addEventListener("click", function (e) {
+    e.preventDefault();
+    logout();
+  });
+
+  // ---------------------------------------------------------- init: /me
+  DRE.apiFetch("/api/auth/me", { auth: true }).then(function (result) {
+    if (!result.ok) {
+      if (handleAuthFailure(result)) return;
+      loadingEl.classList.add("dre-hidden");
+      DRE.showAlert(dashAlert, DRE.getErrorMessage(result, "Could not load your account."));
+      return;
+    }
+    var client = result.data.client || {};
+    document.getElementById("header-user").textContent =
+      (client.contact_name || "") + (client.company_name ? " - " + client.company_name : "");
+    loadClaims();
+  });
+
+  // ---------------------------------------------------------- claim list
+  function loadClaims() {
+    DRE.apiFetch("/api/claims", { auth: true }).then(function (result) {
+      loadingEl.classList.add("dre-hidden");
+      if (!result.ok) {
+        if (handleAuthFailure(result)) return;
+        DRE.showAlert(dashAlert, DRE.getErrorMessage(result, "Could not load your claims."));
+        listView.classList.remove("dre-hidden");
+        return;
+      }
+      claimsCache = result.data.claims || [];
+      renderClaimList(claimsCache);
+      listView.classList.remove("dre-hidden");
+      routeFromHash();
+    });
+  }
+
+  function renderClaimList(claims) {
+    var listEl = document.getElementById("claim-list");
+    var emptyEl = document.getElementById("claim-empty");
+    listEl.innerHTML = "";
+
+    var openCount = 0, resolvedCount = 0;
+    var openStatuses = { NEW: 1, UNDER_REVIEW: 1, ACTIVE: 1, NEGOTIATION: 1, LEGAL: 1 };
+    var resolvedStatuses = { SETTLED: 1, CLOSED: 1, WRITE_OFF: 1 };
+
+    claims.forEach(function (c) {
+      if (openStatuses[c.status]) openCount++;
+      if (resolvedStatuses[c.status]) resolvedCount++;
+
+      var row = document.createElement("div");
+      row.className = "dre-claim-row";
+      row.setAttribute("role", "button");
+      row.setAttribute("tabindex", "0");
+
+      var main = document.createElement("div");
+      main.className = "dre-claim-main";
+
+      var num = document.createElement("span");
+      num.className = "dre-claim-number";
+      num.textContent = c.claim_number;
+
+      var sub = document.createElement("span");
+      sub.className = "dre-claim-sub";
+      sub.textContent = "Debtor: " + (c.debtor_name || "--");
+
+      var badge = document.createElement("span");
+      badge.className = DRE.badgeClass(c.status);
+      badge.textContent = c.status_label || c.status;
+      badge.style.marginTop = "0.3rem";
+      badge.style.width = "fit-content";
+
+      main.appendChild(num);
+      main.appendChild(sub);
+      main.appendChild(badge);
+
+      var right = document.createElement("div");
+      var amt = document.createElement("div");
+      amt.className = "dre-claim-amount";
+      amt.textContent = c.amount_display || DRE.formatCentsUSD(c.amount_cents);
+      var meta = document.createElement("div");
+      meta.className = "dre-claim-meta";
+      meta.textContent = "Submitted " + DRE.formatDate(c.created_at);
+      right.appendChild(amt);
+      right.appendChild(meta);
+
+      row.appendChild(main);
+      row.appendChild(right);
+
+      row.addEventListener("click", function () {
+        window.location.hash = "claim/" + encodeURIComponent(c.claim_number);
+      });
+      row.addEventListener("keypress", function (e) {
+        if (e.key === "Enter") window.location.hash = "claim/" + encodeURIComponent(c.claim_number);
+      });
+
+      listEl.appendChild(row);
+    });
+
+    document.getElementById("stat-total").textContent = claims.length;
+    document.getElementById("stat-open").textContent = openCount;
+    document.getElementById("stat-resolved").textContent = resolvedCount;
+
+    emptyEl.classList.toggle("dre-hidden", claims.length !== 0);
+    listEl.classList.toggle("dre-hidden", claims.length === 0);
+  }
+
+  // ---------------------------------------------------------- claim detail
+  var currentClaimNumber = null;
+
+  function showListView() {
+    detailView.classList.add("dre-hidden");
+    listView.classList.remove("dre-hidden");
+  }
+
+  function showDetailView(claimNumber) {
+    currentClaimNumber = claimNumber;
+    listView.classList.add("dre-hidden");
+    detailView.classList.remove("dre-hidden");
+    loadClaimDetail(claimNumber);
+  }
+
+  document.getElementById("back-to-list").addEventListener("click", function (e) {
+    e.preventDefault();
+    window.location.hash = "";
+  });
+
+  var TIER_LABELS = {
+    TIER_1: "Soft Touch", TIER_2: "Formal Demand", TIER_2_5: "Lien Threat",
+    TIER_3: "Escalation", TIER_4: "Legal Action",
+  };
+
+  function loadClaimDetail(claimNumber) {
+    DRE.hideAlert(dashAlert);
+    DRE.apiFetch("/api/claims/" + encodeURIComponent(claimNumber), { auth: true }).then(function (result) {
+      if (!result.ok) {
+        if (handleAuthFailure(result)) return;
+        if (result.status === 404) {
+          DRE.showAlert(dashAlert, "That claim was not found on your account.");
+          window.location.hash = "";
+          return;
+        }
+        DRE.showAlert(dashAlert, DRE.getErrorMessage(result, "Could not load claim detail."));
+        return;
+      }
+      renderClaimDetail(result.data);
+    });
+  }
+
+  function renderClaimDetail(c) {
+    document.getElementById("detail-claim-number").textContent = c.claim_number;
+    var badge = document.getElementById("detail-badge");
+    badge.className = DRE.badgeClass(c.status);
+    badge.textContent = c.status_label || c.status;
+    document.getElementById("detail-amount").textContent = c.amount_display || DRE.formatCentsUSD(c.amount_cents);
+    document.getElementById("detail-debtor-name").textContent = (c.debtor && c.debtor.name) || "--";
+    document.getElementById("detail-debtor-type").textContent = (c.debtor && c.debtor.business_type) || "--";
+    document.getElementById("detail-description").textContent = c.description || "Not provided";
+    document.getElementById("detail-reference").textContent = c.client_reference || "Not provided";
+    document.getElementById("detail-invoice-date").textContent = c.invoice_date ? DRE.formatDate(c.invoice_date) : "Not provided";
+    document.getElementById("detail-created").textContent = c.date_assigned ? DRE.formatDate(c.date_assigned) : "Not yet assigned";
+
+    // progress bar
+    var progressEl = document.getElementById("detail-progress");
+    progressEl.innerHTML = "";
+    var step = c.tier_step || 1;
+    for (var i = 1; i <= 4; i++) {
+      var seg = document.createElement("div");
+      seg.className = "dre-progress-step" + (i <= step ? " is-done" : "");
+      progressEl.appendChild(seg);
+    }
+
+    // documents
+    var docList = document.getElementById("doc-list");
+    var docEmpty = document.getElementById("doc-empty");
+    docList.innerHTML = "";
+    var docs = c.documents || [];
+    docs.forEach(function (d) {
+      var li = document.createElement("li");
+      li.className = "dre-doc-item";
+      var left = document.createElement("div");
+      var name = document.createElement("div");
+      name.className = "dre-doc-name";
+      name.textContent = d.original_name;
+      var meta = document.createElement("div");
+      meta.className = "dre-doc-meta";
+      meta.textContent = DRE.formatBytes(d.size_bytes) + " - Uploaded " + DRE.formatDateTime(d.created_at);
+      left.appendChild(name);
+      left.appendChild(meta);
+      li.appendChild(left);
+      docList.appendChild(li);
+    });
+    docEmpty.classList.toggle("dre-hidden", docs.length !== 0);
+
+    // notes
+    var noteList = document.getElementById("note-list");
+    var noteEmpty = document.getElementById("note-empty");
+    noteList.innerHTML = "";
+    var notes = c.notes || [];
+    notes.forEach(function (n) {
+      var li = document.createElement("li");
+      li.className = "dre-note-item";
+      var head = document.createElement("div");
+      head.className = "dre-note-head";
+      var author = document.createElement("span");
+      author.className = "dre-note-author";
+      author.textContent = n.author_name + (n.subject ? " - " + n.subject : "");
+      var when = document.createElement("span");
+      when.textContent = DRE.formatDateTime(n.created_at);
+      head.appendChild(author);
+      head.appendChild(when);
+      var body = document.createElement("div");
+      body.className = "dre-note-body";
+      // Backend already HTML-escapes content; we still use textContent so
+      // it renders literally either way (defense in depth, no innerHTML).
+      body.textContent = n.content;
+      li.appendChild(head);
+      li.appendChild(body);
+      noteList.appendChild(li);
+    });
+    noteEmpty.classList.toggle("dre-hidden", notes.length !== 0);
+  }
+
+  // ---------------------------------------------------------- document upload
+  var fileInput = document.getElementById("doc-file-input");
+  var dropzone = document.getElementById("dropzone");
+  var uploadAlert = document.getElementById("upload-alert");
+  var uploadProgress = document.getElementById("upload-progress");
+
+  fileInput.addEventListener("change", function () {
+    if (fileInput.files && fileInput.files[0]) {
+      uploadFile(fileInput.files[0]);
+    }
+  });
+
+  ["dragover", "dragenter"].forEach(function (evt) {
+    dropzone.addEventListener(evt, function (e) {
+      e.preventDefault();
+      dropzone.classList.add("is-dragover");
+    });
+  });
+  ["dragleave", "drop"].forEach(function (evt) {
+    dropzone.addEventListener(evt, function (e) {
+      e.preventDefault();
+      dropzone.classList.remove("is-dragover");
+    });
+  });
+  dropzone.addEventListener("drop", function (e) {
+    e.preventDefault();
+    var files = e.dataTransfer && e.dataTransfer.files;
+    if (files && files[0]) uploadFile(files[0]);
+  });
+
+  function uploadFile(file) {
+    DRE.hideAlert(uploadAlert);
+    if (file.size > 20 * 1024 * 1024) {
+      DRE.showAlert(uploadAlert, "File exceeds the 20 MB limit.");
+      fileInput.value = "";
+      return;
+    }
+    var allowedExt = [".pdf", ".jpg", ".jpeg", ".png", ".doc", ".docx"];
+    var lower = file.name.toLowerCase();
+    var ok = allowedExt.some(function (ext) { return lower.endsWith(ext); });
+    if (!ok) {
+      DRE.showAlert(uploadAlert, "File type not allowed. Use PDF, JPG, PNG, DOC, or DOCX.");
+      fileInput.value = "";
+      return;
+    }
+
+    var formData = new FormData();
+    formData.append("file", file);
+    uploadProgress.classList.remove("dre-hidden");
+
+    DRE.apiFetch("/api/claims/" + encodeURIComponent(currentClaimNumber) + "/documents", {
+      method: "POST",
+      body: formData,
+      auth: true,
+    }).then(function (result) {
+      uploadProgress.classList.add("dre-hidden");
+      fileInput.value = "";
+      if (!result.ok) {
+        if (handleAuthFailure(result)) return;
+        DRE.showAlert(uploadAlert, DRE.getErrorMessage(result, "Upload failed. Please try again."));
+        return;
+      }
+      loadClaimDetail(currentClaimNumber);
+    });
+  }
+
+  // ---------------------------------------------------------- message the team
+  var messageForm = document.getElementById("message-form");
+  var messageAlert = document.getElementById("message-alert");
+  var messageSent = document.getElementById("message-sent");
+  var messageSubmit = document.getElementById("message-submit");
+
+  messageForm.addEventListener("submit", function (e) {
+    e.preventDefault();
+    DRE.hideAlert(messageAlert);
+    DRE.hideAlert(messageSent);
+
+    var subject = document.getElementById("message-subject").value;
+    var content = document.getElementById("message-content").value.trim();
+    if (!content) {
+      DRE.showAlert(messageAlert, "Please enter a message before sending.");
+      return;
+    }
+
+    DRE.setLoading(messageSubmit, true, "Sending...");
+    DRE.apiFetch("/api/claims/" + encodeURIComponent(currentClaimNumber) + "/messages", {
+      method: "POST",
+      body: { subject: subject, content: content },
+      auth: true,
+    }).then(function (result) {
+      DRE.setLoading(messageSubmit, false, null, "Send Message");
+      if (!result.ok) {
+        if (handleAuthFailure(result)) return;
+        DRE.showAlert(messageAlert, DRE.getErrorMessage(result, "Could not send your message. Please try again."));
+        return;
+      }
+      document.getElementById("message-content").value = "";
+      DRE.showAlert(messageSent, "Message sent. Our team will follow up if needed.");
+      loadClaimDetail(currentClaimNumber);
+    });
+  });
+
+  // ---------------------------------------------------------- hash routing
+  function routeFromHash() {
+    var hash = window.location.hash.replace(/^#/, "");
+    if (hash.indexOf("claim/") === 0) {
+      var claimNumber = decodeURIComponent(hash.slice("claim/".length));
+      showDetailView(claimNumber);
+    } else {
+      showListView();
+    }
+  }
+  window.addEventListener("hashchange", routeFromHash);
+})();
+</script>
+
+</body>
+</html>
@@ -0,0 +1,345 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Submit a Claim - Debt Recovery Experts</title>
+<meta name="description" content="Submit a commercial claim for recovery review. Debt Recovery Experts helps businesses recover what they are owed through professional, compliant collection services.">
+<link rel="stylesheet" href="css/dre.css">
+</head>
+<body>
+
+<header class="dre-header">
+  <div class="dre-header-inner">
+    <a class="dre-brand" href="index.html">
+      <span class="dre-mark">DRE</span>
+      <span>
+        Debt Recovery Experts
+        <span class="dre-brand-sub">Commercial Claim Recovery</span>
+      </span>
+    </a>
+    <div class="dre-header-actions">
+      <a href="login.html">Client Login</a>
+    </div>
+  </div>
+</header>
+
+<main class="dre-main dre-narrow">
+
+  <div class="dre-intro">
+    <h1>Submit a Claim</h1>
+    <p>Tell us about the outstanding balance you would like our team to review. Submission
+       takes about three minutes. There is no obligation, and a member of our team will follow
+       up after reviewing your claim.</p>
+  </div>
+
+  <div id="intake-alert" class="dre-alert dre-alert-error" role="alert"></div>
+
+  <!-- ============================== FORM STATE ============================== -->
+  <form id="intake-form" class="dre-card" novalidate>
+
+    <div class="dre-form-section">
+      <h3>Your Information</h3>
+
+      <div class="dre-row">
+        <div class="dre-field">
+          <label for="company_name">Company Name <span class="dre-required">*</span></label>
+          <input type="text" id="company_name" name="company_name" maxlength="200" required autocomplete="organization">
+          <span class="dre-field-error" data-error-for="company_name"></span>
+        </div>
+        <div class="dre-field">
+          <label for="contact_name">Your Full Name <span class="dre-required">*</span></label>
+          <input type="text" id="contact_name" name="contact_name" maxlength="200" required autocomplete="name">
+          <span class="dre-field-error" data-error-for="contact_name"></span>
+        </div>
+      </div>
+
+      <div class="dre-row">
+        <div class="dre-field">
+          <label for="email">Email Address <span class="dre-required">*</span></label>
+          <input type="email" id="email" name="email" maxlength="254" required autocomplete="email">
+          <span class="dre-hint">We will send your secure client-portal login link here.</span>
+          <span class="dre-field-error" data-error-for="email"></span>
+        </div>
+        <div class="dre-field">
+          <label for="phone">Phone Number</label>
+          <input type="tel" id="phone" name="phone" maxlength="50" autocomplete="tel">
+          <span class="dre-field-error" data-error-for="phone"></span>
+        </div>
+      </div>
+    </div>
+
+    <div class="dre-form-section">
+      <h3>Debtor Information</h3>
+      <p class="dre-small" style="margin-bottom:1rem;">The business or individual that owes the balance.</p>
+
+      <div class="dre-field">
+        <label for="debtor_name">Debtor Name <span class="dre-required">*</span></label>
+        <input type="text" id="debtor_name" name="debtor_name" maxlength="200" required>
+        <span class="dre-field-error" data-error-for="debtor_name"></span>
+      </div>
+
+      <div class="dre-field">
+        <label for="debtor_business_type">Debtor Entity Type <span class="dre-required">*</span></label>
+        <select id="debtor_business_type" name="debtor_business_type" required>
+          <option value="INDIVIDUAL">Individual</option>
+          <option value="SOLE_PROPRIETORSHIP">Sole Proprietorship</option>
+          <option value="LLC" selected>LLC</option>
+          <option value="CORPORATION">Corporation</option>
+          <option value="PARTNERSHIP">Partnership</option>
+          <option value="OTHER">Other</option>
+        </select>
+        <span class="dre-field-error" data-error-for="debtor_business_type"></span>
+      </div>
+
+      <div class="dre-row">
+        <div class="dre-field">
+          <label for="debtor_contact_email">Debtor Email</label>
+          <input type="email" id="debtor_contact_email" name="debtor_contact_email" maxlength="254">
+          <span class="dre-field-error" data-error-for="debtor_contact_email"></span>
+        </div>
+        <div class="dre-field">
+          <label for="debtor_contact_phone">Debtor Phone</label>
+          <input type="tel" id="debtor_contact_phone" name="debtor_contact_phone" maxlength="50">
+          <span class="dre-field-error" data-error-for="debtor_contact_phone"></span>
+        </div>
+      </div>
+
+      <div class="dre-field">
+        <label for="debtor_physical_address">Debtor Address</label>
+        <input type="text" id="debtor_physical_address" name="debtor_physical_address" maxlength="500" placeholder="Street, City, State, ZIP">
+        <span class="dre-field-error" data-error-for="debtor_physical_address"></span>
+      </div>
+    </div>
+
+    <div class="dre-form-section">
+      <h3>Claim Details</h3>
+
+      <div class="dre-row">
+        <div class="dre-field">
+          <label for="amount">Amount Owed (USD) <span class="dre-required">*</span></label>
+          <input type="number" id="amount" name="amount" min="0.01" max="1000000" step="0.01" required placeholder="15000.00">
+          <span class="dre-hint">Maximum $1,000,000 per claim.</span>
+          <span class="dre-field-error" data-error-for="amount"></span>
+        </div>
+        <div class="dre-field">
+          <label for="invoice_date">Invoice / Debt Date</label>
+          <input type="date" id="invoice_date" name="invoice_date">
+          <span class="dre-field-error" data-error-for="invoice_date"></span>
+        </div>
+      </div>
+
+      <div class="dre-field">
+        <label for="client_reference">Your Invoice / PO Number</label>
+        <input type="text" id="client_reference" name="client_reference" maxlength="200" placeholder="INV-2048">
+        <span class="dre-field-error" data-error-for="client_reference"></span>
+      </div>
+
+      <div class="dre-field">
+        <label for="description">Description of the Debt</label>
+        <textarea id="description" name="description" maxlength="5000" placeholder="What is the debt for? (service, goods, contract, etc.)"></textarea>
+        <span class="dre-field-error" data-error-for="description"></span>
+      </div>
+
+      <div class="dre-field" style="background:#fdf3e7; border:1px solid #f2ddb8; border-radius:8px; padding:0.85rem 1rem;">
+        <span class="dre-small" style="color:#92600a;">
+          Important: Do not enter Social Security numbers, full bank account numbers, or card
+          numbers anywhere on this form. Submissions containing this information will be rejected.
+        </span>
+      </div>
+    </div>
+
+    <div class="dre-form-section">
+      <div class="dre-checkbox-field">
+        <input type="checkbox" id="tos_accepted" name="tos_accepted" required>
+        <label for="tos_accepted">
+          I confirm the information provided is accurate and I authorize Debt Recovery Experts
+          to review and pursue recovery of this claim on my behalf. I have read and agree to the
+          Terms of Service. <span class="dre-required">*</span>
+        </label>
+      </div>
+      <span class="dre-field-error" data-error-for="tos_accepted"></span>
+    </div>
+
+    <button type="submit" id="intake-submit" class="dre-btn dre-btn-primary dre-btn-block">
+      Submit Claim
+    </button>
+  </form>
+
+  <!-- ============================== SUCCESS STATE ============================== -->
+  <div id="intake-success" class="dre-card dre-state dre-hidden">
+    <div class="dre-state-icon ok">&#10003;</div>
+    <h2>Claim Received</h2>
+    <p id="intake-success-message">Our team will review and contact you shortly.</p>
+    <dl class="dre-kv">
+      <dt>Claim Number</dt>
+      <dd id="intake-claim-number">--</dd>
+      <dt>Client Number</dt>
+      <dd id="intake-client-number">--</dd>
+    </dl>
+    <p class="dre-mt">
+      <strong>Check your email.</strong> We will send a secure login link to access your client
+      portal, where you can track claim status, upload documents, and message our team.
+    </p>
+    <a href="login.html" class="dre-btn dre-btn-secondary dre-mt">Go to Client Login</a>
+  </div>
+
+</main>
+
+<footer class="dre-footer">
+  Debt Recovery Experts operates in compliance with the FDCPA and applicable state debt collection
+  laws. This form is for submitting claims for review only.
+</footer>
+
+<script src="js/dre-api.js"></script>
+<script>
+(function () {
+  "use strict";
+
+  var form = document.getElementById("intake-form");
+  var alertEl = document.getElementById("intake-alert");
+  var submitBtn = document.getElementById("intake-submit");
+  var successEl = document.getElementById("intake-success");
+
+  function clearFieldErrors() {
+    var errs = form.querySelectorAll(".dre-field-error");
+    for (var i = 0; i < errs.length; i++) {
+      errs[i].classList.remove("is-visible");
+      errs[i].textContent = "";
+    }
+    var inputs = form.querySelectorAll("[aria-invalid]");
+    for (var j = 0; j < inputs.length; j++) {
+      inputs[j].removeAttribute("aria-invalid");
+    }
+  }
+
+  function showFieldError(fieldKey, message) {
+    var el = form.querySelector('[data-error-for="' + fieldKey + '"]');
+    if (el) {
+      el.textContent = message;
+      el.classList.add("is-visible");
+    }
+  }
+
+  // Map a backend validation error location like "client.email" or
+  // "debtor.name" or "claim.amount_cents" to a local field key.
+  function mapLocToField(loc) {
+    var map = {
+      "client.company_name": "company_name",
+      "client.contact_name": "contact_name",
+      "client.email": "email",
+      "client.phone": "phone",
+      "debtor.name": "debtor_name",
+      "debtor.business_type": "debtor_business_type",
+      "debtor.contact_email": "debtor_contact_email",
+      "debtor.contact_phone": "debtor_contact_phone",
+      "debtor.physical_address": "debtor_physical_address",
+      "claim.amount_cents": "amount",
+      "claim.description": "description",
+      "claim.client_reference": "client_reference",
+      "claim.invoice_date": "invoice_date",
+      "tos_accepted": "tos_accepted",
+    };
+    return map[loc] || null;
+  }
+
+  function distributeValidationMessage(message) {
+    // Backend joins multiple errors with "; ", each like "loc: msg"
+    var parts = message.split("; ");
+    var matched = false;
+    parts.forEach(function (part) {
+      var idx = part.indexOf(": ");
+      if (idx === -1) return;
+      var loc = part.slice(0, idx);
+      var msg = part.slice(idx + 2);
+      var field = mapLocToField(loc);
+      if (field) {
+        showFieldError(field, msg);
+        var input = form.querySelector('[name="' + field + '"]');
+        if (input) input.setAttribute("aria-invalid", "true");
+        matched = true;
+      }
+    });
+    return matched;
+  }
+
+  form.addEventListener("submit", function (e) {
+    e.preventDefault();
+    DRE.hideAlert(alertEl);
+    clearFieldErrors();
+
+    var amountRaw = document.getElementById("amount").value;
+    var amountCents = Math.round(parseFloat(amountRaw || "0") * 100);
+
+    var payload = {
+      client: {
+        company_name: document.getElementById("company_name").value.trim(),
+        contact_name: document.getElementById("contact_name").value.trim(),
+        email: document.getElementById("email").value.trim(),
+        phone: document.getElementById("phone").value.trim() || null,
+      },
+      debtor: {
+        name: document.getElementById("debtor_name").value.trim(),
+        business_type: document.getElementById("debtor_business_type").value,
+        contact_email: document.getElementById("debtor_contact_email").value.trim() || null,
+        contact_phone: document.getElementById("debtor_contact_phone").value.trim() || null,
+        physical_address: document.getElementById("debtor_physical_address").value.trim() || null,
+      },
+      claim: {
+        amount_cents: amountCents,
+        description: document.getElementById("description").value.trim() || null,
+        client_reference: document.getElementById("client_reference").value.trim() || null,
+        invoice_date: document.getElementById("invoice_date").value || null,
+      },
+      tos_accepted: document.getElementById("tos_accepted").checked,
+    };
+
+    if (!payload.tos_accepted) {
+      showFieldError("tos_accepted", "You must accept the Terms of Service to submit a claim.");
+      return;
+    }
+    if (!amountCents || amountCents <= 0) {
+      showFieldError("amount", "Enter a valid amount greater than $0.");
+      return;
+    }
+
+    DRE.setLoading(submitBtn, true, "Submitting...");
+
+    DRE.apiFetch("/api/intake", { method: "POST", body: payload }).then(function (result) {
+      DRE.setLoading(submitBtn, false, null, "Submit Claim");
+
+      if (result.ok) {
+        var data = result.data;
+        document.getElementById("intake-claim-number").textContent = data.claim_number || "--";
+        document.getElementById("intake-client-number").textContent = data.client_number || "--";
+        document.getElementById("intake-success-message").textContent =
+          data.message || "Our team will review and contact you shortly.";
+        form.classList.add("dre-hidden");
+        successEl.classList.remove("dre-hidden");
+        successEl.scrollIntoView({ behavior: "smooth", block: "start" });
+        return;
+      }
+
+      var code = DRE.getErrorCode(result);
+      var message = DRE.getErrorMessage(result, "We could not submit your claim. Please try again.");
+
+      if (code === "validation_error") {
+        var matched = distributeValidationMessage(message);
+        if (!matched) {
+          DRE.showAlert(alertEl, message);
+        } else {
+          DRE.showAlert(alertEl, "Please correct the highlighted fields below.");
+        }
+      } else if (code === "rate_limited") {
+        DRE.showAlert(alertEl, "Too many submissions from this connection. Please try again in a few minutes.");
+      } else {
+        DRE.showAlert(alertEl, message);
+      }
+      alertEl.scrollIntoView({ behavior: "smooth", block: "start" });
+    });
+  });
+})();
+</script>
+
+</body>
+</html>
@@ -0,0 +1,208 @@
+/* ==========================================================================
+   DRE Customer Portal — shared JS helpers
+   Dependency-free. Relative /api/* calls only (same-origin; Caddy proxies).
+   ========================================================================== */
+
+(function (global) {
+  "use strict";
+
+  var SESSION_KEY = "dre_session_token";
+
+  /**
+   * Perform a JSON fetch against the API.
+   * @param {string} path - relative API path, e.g. "/api/claims"
+   * @param {object} opts - { method, body, auth, headers }
+   * Returns a Promise resolving to { ok, status, data } where data is the
+   * parsed JSON body (success payload or {error:{code,message}}).
+   */
+  function apiFetch(path, opts) {
+    opts = opts || {};
+    var headers = Object.assign({}, opts.headers || {});
+    var fetchOpts = { method: opts.method || "GET", headers: headers };
+
+    if (opts.body !== undefined && !(opts.body instanceof FormData)) {
+      headers["Content-Type"] = "application/json";
+      fetchOpts.body = JSON.stringify(opts.body);
+    } else if (opts.body instanceof FormData) {
+      fetchOpts.body = opts.body; // browser sets multipart boundary
+    }
+
+    if (opts.auth) {
+      var token = getSessionToken();
+      if (token) {
+        headers["Authorization"] = "Bearer " + token;
+      }
+    }
+
+    return fetch(path, fetchOpts)
+      .then(function (res) {
+        return res
+          .json()
+          .catch(function () {
+            return {};
+          })
+          .then(function (data) {
+            return { ok: res.ok, status: res.status, data: data };
+          });
+      })
+      .catch(function (err) {
+        return {
+          ok: false,
+          status: 0,
+          data: {
+            error: {
+              code: "network_error",
+              message: "Could not reach the server. Check your connection and try again.",
+            },
+          },
+        };
+      });
+  }
+
+  function getErrorMessage(result, fallback) {
+    if (result && result.data && result.data.error && result.data.error.message) {
+      return result.data.error.message;
+    }
+    return fallback || "Something went wrong. Please try again.";
+  }
+
+  function getErrorCode(result) {
+    if (result && result.data && result.data.error && result.data.error.code) {
+      return result.data.error.code;
+    }
+    return null;
+  }
+
+  function getSessionToken() {
+    try {
+      return localStorage.getItem(SESSION_KEY);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  function setSessionToken(token) {
+    try {
+      localStorage.setItem(SESSION_KEY, token);
+    } catch (e) {
+      /* localStorage unavailable; session will not persist across reload */
+    }
+  }
+
+  function clearSessionToken() {
+    try {
+      localStorage.removeItem(SESSION_KEY);
+    } catch (e) {
+      /* ignore */
+    }
+  }
+
+  function requireSessionOrRedirect(loginUrl) {
+    var token = getSessionToken();
+    if (!token) {
+      window.location.href = loginUrl || "login.html";
+      return null;
+    }
+    return token;
+  }
+
+  function formatCentsUSD(cents) {
+    var n = typeof cents === "number" ? cents : parseInt(cents, 10) || 0;
+    return "$" + (n / 100).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+  }
+
+  function formatDate(iso) {
+    if (!iso) return "--";
+    try {
+      var d = new Date(iso);
+      if (isNaN(d.getTime())) return iso;
+      return d.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
+    } catch (e) {
+      return iso;
+    }
+  }
+
+  function formatDateTime(iso) {
+    if (!iso) return "--";
+    try {
+      var d = new Date(iso);
+      if (isNaN(d.getTime())) return iso;
+      return d.toLocaleString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+      });
+    } catch (e) {
+      return iso;
+    }
+  }
+
+  function formatBytes(n) {
+    if (!n && n !== 0) return "";
+    if (n < 1024) return n + " B";
+    if (n < 1024 * 1024) return (n / 1024).toFixed(1) + " KB";
+    return (n / (1024 * 1024)).toFixed(1) + " MB";
+  }
+
+  function showAlert(el, message, isVisible) {
+    if (!el) return;
+    el.textContent = message || "";
+    if (isVisible === false) {
+      el.classList.remove("is-visible");
+    } else {
+      el.classList.add("is-visible");
+    }
+  }
+
+  function hideAlert(el) {
+    if (!el) return;
+    el.classList.remove("is-visible");
+    el.textContent = "";
+  }
+
+  function setLoading(button, loading, loadingText, normalText) {
+    if (!button) return;
+    if (loading) {
+      button.disabled = true;
+      button.dataset.originalText = button.dataset.originalText || button.innerHTML;
+      button.innerHTML = '<span class="dre-spinner"></span> ' + (loadingText || "Please wait...");
+    } else {
+      button.disabled = false;
+      button.innerHTML = normalText || button.dataset.originalText || button.innerHTML;
+    }
+  }
+
+  function badgeClass(status) {
+    return "dre-badge dre-badge-" + (status || "").toLowerCase();
+  }
+
+  // Escape helper for any spot where we must build markup with dynamic text.
+  // Prefer textContent everywhere; this exists only as a defensive fallback.
+  function escapeHtml(str) {
+    var div = document.createElement("div");
+    div.textContent = str === undefined || str === null ? "" : String(str);
+    return div.innerHTML;
+  }
+
+  global.DRE = {
+    SESSION_KEY: SESSION_KEY,
+    apiFetch: apiFetch,
+    getErrorMessage: getErrorMessage,
+    getErrorCode: getErrorCode,
+    getSessionToken: getSessionToken,
+    setSessionToken: setSessionToken,
+    clearSessionToken: clearSessionToken,
+    requireSessionOrRedirect: requireSessionOrRedirect,
+    formatCentsUSD: formatCentsUSD,
+    formatDate: formatDate,
+    formatDateTime: formatDateTime,
+    formatBytes: formatBytes,
+    showAlert: showAlert,
+    hideAlert: hideAlert,
+    setLoading: setLoading,
+    badgeClass: badgeClass,
+    escapeHtml: escapeHtml,
+  };
+})(window);
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Client Login - Debt Recovery Experts</title>
+<meta name="description" content="Log in to your Debt Recovery Experts client portal to track claim status, upload documents, and message the recovery team.">
+<link rel="stylesheet" href="css/dre.css">
+</head>
+<body>
+
+<header class="dre-header">
+  <div class="dre-header-inner">
+    <a class="dre-brand" href="index.html">
+      <span class="dre-mark">DRE</span>
+      <span>
+        Debt Recovery Experts
+        <span class="dre-brand-sub">Client Portal</span>
+      </span>
+    </a>
+    <div class="dre-header-actions">
+      <a href="start.html">Submit a Claim</a>
+    </div>
+  </div>
+</header>
+
+<main class="dre-main dre-narrow">
+
+  <div class="dre-intro">
+    <h1>Client Login</h1>
+    <p>Enter the email address on file for your account. We will send you a secure, one-time
+       login link. No password required.</p>
+    <p class="dre-small">New here? <a href="start.html">Submit a claim</a> - no account needed.</p>
+  </div>
+
+  <div id="login-alert" class="dre-alert dre-alert-error" role="alert"></div>
+
+  <!-- ============================== REQUEST FORM ============================== -->
+  <form id="login-form" class="dre-card">
+    <div class="dre-field">
+      <label for="email">Email Address <span class="dre-required">*</span></label>
+      <input type="email" id="email" name="email" maxlength="254" required autocomplete="email" autofocus>
+      <span class="dre-field-error" data-error-for="email"></span>
+    </div>
+    <button type="submit" id="login-submit" class="dre-btn dre-btn-primary dre-btn-block">
+      Email Me a Login Link
+    </button>
+  </form>
+
+  <!-- ============================== SENT STATE ============================== -->
+  <div id="login-sent" class="dre-card dre-state dre-hidden">
+    <div class="dre-state-icon info">&#9993;</div>
+    <h2>Check Your Email</h2>
+    <p>If an account exists for that email address, we have sent a secure login link. The link
+       expires in 15 minutes and can only be used once.</p>
+    <p class="dre-small">Did not get an email? Check your spam folder, or
+       <a href="#" id="login-try-again">try a different email address</a>.</p>
+  </div>
+
+</main>
+
+<footer class="dre-footer">
+  Having trouble accessing your account? Contact your Debt Recovery Experts representative.
+</footer>
+
+<script src="js/dre-api.js"></script>
+<script>
+(function () {
+  "use strict";
+
+  // If already logged in, skip straight to the dashboard.
+  if (DRE.getSessionToken()) {
+    window.location.href = "dashboard.html";
+    return;
+  }
+
+  var form = document.getElementById("login-form");
+  var alertEl = document.getElementById("login-alert");
+  var submitBtn = document.getElementById("login-submit");
+  var sentEl = document.getElementById("login-sent");
+  var tryAgainLink = document.getElementById("login-try-again");
+
+  tryAgainLink.addEventListener("click", function (e) {
+    e.preventDefault();
+    sentEl.classList.add("dre-hidden");
+    form.classList.remove("dre-hidden");
+    document.getElementById("email").focus();
+  });
+
+  form.addEventListener("submit", function (e) {
+    e.preventDefault();
+    DRE.hideAlert(alertEl);
+
+    var emailField = document.getElementById("email");
+    var email = emailField.value.trim();
+    var errEl = form.querySelector('[data-error-for="email"]');
+    errEl.classList.remove("is-visible");
+    emailField.removeAttribute("aria-invalid");
+
+    if (!email) {
+      errEl.textContent = "Email address is required.";
+      errEl.classList.add("is-visible");
+      emailField.setAttribute("aria-invalid", "true");
+      return;
+    }
+
+    DRE.setLoading(submitBtn, true, "Sending...");
+
+    DRE.apiFetch("/api/auth/request", { method: "POST", body: { email: email } }).then(function (result) {
+      DRE.setLoading(submitBtn, false, null, "Email Me a Login Link");
+
+      // Backend responds 200 with a generic anti-enumeration message on
+      // success. Only a genuine transport/rate-limit failure should show
+      // an error; otherwise always show the "check your email" state.
+      if (result.ok) {
+        form.classList.add("dre-hidden");
+        sentEl.classList.remove("dre-hidden");
+        sentEl.scrollIntoView({ behavior: "smooth", block: "start" });
+        return;
+      }
+
+      var code = DRE.getErrorCode(result);
+      if (code === "rate_limited") {
+        DRE.showAlert(alertEl, DRE.getErrorMessage(result, "Too many requests. Please try again later."));
+      } else if (code === "validation_error") {
+        errEl.textContent = DRE.getErrorMessage(result, "Enter a valid email address.");
+        errEl.classList.add("is-visible");
+        emailField.setAttribute("aria-invalid", "true");
+      } else {
+        DRE.showAlert(alertEl, DRE.getErrorMessage(result, "We could not send the login link. Please try again."));
+      }
+    });
+  });
+})();
+</script>
+
+</body>
+</html>
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Verifying Login - Debt Recovery Experts</title>
+<link rel="stylesheet" href="css/dre.css">
+</head>
+<body>
+
+<header class="dre-header">
+  <div class="dre-header-inner">
+    <a class="dre-brand" href="index.html">
+      <span class="dre-mark">DRE</span>
+      <span>
+        Debt Recovery Experts
+        <span class="dre-brand-sub">Client Portal</span>
+      </span>
+    </a>
+  </div>
+</header>
+
+<main class="dre-main dre-narrow">
+
+  <!-- ============================== CHECKING STATE ============================== -->
+  <div id="verify-checking" class="dre-card dre-state">
+    <div class="dre-spinner dre-spinner-dark" style="width:32px;height:32px;border-width:3px;margin:0 auto 1rem;"></div>
+    <h2>Verifying Your Login Link...</h2>
+    <p>Please wait a moment.</p>
+  </div>
+
+  <!-- ============================== ERROR STATE ============================== -->
+  <div id="verify-error" class="dre-card dre-state dre-hidden">
+    <div class="dre-state-icon err">&#10007;</div>
+    <h2>Login Link Invalid or Expired</h2>
+    <p id="verify-error-message">
+      This login link is invalid, has expired, or has already been used. Login links are valid
+      for 15 minutes and can only be used once.
+    </p>
+    <a href="login.html" class="dre-btn dre-btn-primary dre-mt">Request a New Login Link</a>
+  </div>
+
+  <!-- ============================== NO TOKEN STATE ============================== -->
+  <div id="verify-no-token" class="dre-card dre-state dre-hidden">
+    <div class="dre-state-icon err">&#10007;</div>
+    <h2>Missing Login Link</h2>
+    <p>No login token was found in this link. Please use the link from your email, or request a
+       new one below.</p>
+    <a href="login.html" class="dre-btn dre-btn-primary dre-mt">Go to Login</a>
+  </div>
+
+  <!-- ============================== SUCCESS STATE ============================== -->
+  <div id="verify-success" class="dre-card dre-state dre-hidden">
+    <div class="dre-state-icon ok">&#10003;</div>
+    <h2>Login Successful</h2>
+    <p>Redirecting you to your dashboard...</p>
+  </div>
+
+</main>
+
+<footer class="dre-footer">
+  Debt Recovery Experts Client Portal
+</footer>
+
+<script src="js/dre-api.js"></script>
+<script>
+(function () {
+  "use strict";
+
+  var checkingEl = document.getElementById("verify-checking");
+  var errorEl = document.getElementById("verify-error");
+  var noTokenEl = document.getElementById("verify-no-token");
+  var successEl = document.getElementById("verify-success");
+
+  function showOnly(el) {
+    [checkingEl, errorEl, noTokenEl, successEl].forEach(function (e) {
+      e.classList.add("dre-hidden");
+    });
+    el.classList.remove("dre-hidden");
+  }
+
+  var params = new URLSearchParams(window.location.search);
+  var token = params.get("token");
+
+  // Strip the token from the URL immediately so it does not linger in
+  // browser history / can't be re-shared accidentally, per spec.
+  if (token && window.history && window.history.replaceState) {
+    window.history.replaceState({}, document.title, window.location.pathname);
+  }
+
+  if (!token) {
+    showOnly(noTokenEl);
+  } else {
+    DRE.apiFetch("/api/auth/verify", { method: "POST", body: { token: token } }).then(function (result) {
+      if (result.ok && result.data && result.data.session_token) {
+        DRE.setSessionToken(result.data.session_token);
+        try {
+          if (result.data.client) {
+            localStorage.setItem("dre_client_summary", JSON.stringify(result.data.client));
+          }
+        } catch (e) {
+          /* ignore storage errors */
+        }
+        showOnly(successEl);
+        setTimeout(function () {
+          window.location.href = "dashboard.html";
+        }, 800);
+        return;
+      }
+
+      var message = DRE.getErrorMessage(result, "This login link is invalid, has expired, or has already been used.");
+      document.getElementById("verify-error-message").textContent = message;
+      showOnly(errorEl);
+    });
+  }
+})();
+</script>
+
+</body>
+</html>