Customer Portal. Full Application

One-Line Summary: A comprehensive client-facing React/TypeScript portal where debt settlement customers view their program status, track creditor negotiations, manage payments, upload documents, and interact with an AI assistant. all backed by Salesforce.

--

Problem Statement

The client's debt settlement clients had no self-service visibility into their program. To check their enrolled debt balance, see which creditors were being negotiated, view payment schedules, or upload documents, they had to call their account manager during business hours. This created support call volume, delayed client engagement, and left customers feeling uninformed about a financial program they were paying into weekly. The business needed a full-featured, secure, compliance-ready customer portal. not a prototype, but a production application with MFA, multi-account support, session management, and deep Salesforce integration.

--

Solution

Designed and specified the complete the client Customer Portal as a React/TypeScript single-page application with Salesforce as the backend data source. The portal spans multiple epics covering authentication and security (registration, login, MFA, password reset, session management, access revocation), a financial dashboard (enrolled debt, payment comparison, savings metrics, program progress, account health), a creditor/MCA tracker (creditor portfolio with filtering, settlement negotiation tracking, detailed debt information), payments, document upload and management, callback requests, an AI chat assistant, an onboarding wizard, and a support page.

The application architecture includes a full API service layer for Salesforce REST API communication, React Router-based navigation, and a component library built with Tailwind CSS. Multiple epics (Epic 02: Authentication & Security, Epic 03: Dashboard, Epic 04: MCA Tracker) have been fully specified with user stories, acceptance criteria, and flow diagrams.

--

Tech Stack

--

Key Features

Authentication & Security (Epic 02)

• Registration flow: Triggered by Salesforce contract signature, secure single-use invite link with 7-day expiry, pre-filled email, password creation with complexity requirements
• Login with MFA: Email + password + mandatory MFA code at every login. No "remember this device" for compliance (GLBA, PCI DSS)
• Multi-account selection: Clients with multiple businesses see an Account Selector screen mapping to Salesforce Opportunities/Programs. Account switching without re-login
• Password reset: Email-initiated, 1-hour link expiry, mandatory MFA re-verification, all existing sessions terminated
• Session management: 30-minute idle timeout (warning at 25 minutes), 8-hour max session length, full data clearing on logout
• Account lockout: 5 failed login attempts trigger 30-minute lockout

Dashboard (Epic 03)

• Financial hub: Total enrolled debt, weekly payment comparison (new vs. original), weekly and percentage savings, first draft milestone date, program duration
• Account balance & allocation: Escrow balance breakdown (allocated, fees, available)
• Program progress: Animated progress bar with weighted percentage calculation
• Account health: Color-coded standing and risk level indicators (Low to Critical)
• Journey timeline: Visual stages (Enrolled, Negotiating, Complete) with pulsing animation on current stage
• Case details: Full case information pulled from Salesforce

Creditor/MCA Tracker (Epic 04)

• Creditor portfolio overview: Card-based layout with status badges (Settled, In Negotiation, Queued, On Hold) using distinct color coding
• Filtering: Filter by All, Settled, In Negotiation, Queued, On Hold with persistent filter state
• Settlement tracking: Current offers, counter-offers, expiration dates, last contact date, next steps
• Detailed debt information: Original debt amount, masked account number, enrollment date, debt type
• Financial summary per creditor: Three-column display of Original Debt, Current Offer/Settlement, Potential/Actual Savings

Additional Features

• Payments page: Payment history and schedule
• Document upload & list: Upload and view program-related documents
• Callback request: Request a callback from the support team
• AI chat assistant: Built-in conversational assistant for common questions
• Onboarding wizard: Skippable multi-step onboarding for new users
• Support page: Help resources and contact options

--

Impact / Metrics

• 3 fully specified epics with user stories, acceptance criteria, and architectural flow diagrams (Mermaid)
• 25+ user stories across authentication, dashboard, and creditor tracking
• Compliance-ready design: GLBA Safeguards, PCI DSS, and state regulation adherence built into the authentication and session management specs
• Multi-account support: Handles clients enrolled in multiple debt settlement programs under different businesses
• Full Salesforce integration: Every data point (debt amounts, creditor statuses, payment schedules, program progress) sourced from Salesforce Opportunity and related objects
• Self-service deflection model: Status checks, payment schedules, and creditor updates currently drive account-manager call volume, since clients have no digital alternative. Self-service access to those same data points would deflect a meaningful portion of routine inbound support calls and reclaim account-manager hours weekly, at current operations scale.

--

Status

In active development. Architecture and 25+ user stories complete. Expected to enter Salesforce integration in Q3 2026. Currently a high-fidelity prototype demonstrating the customer self-service model. UI component scaffolding and Vite/React/Tailwind build pipeline in place. This is the full production application, distinct from the "Customer Portal Prototype" referenced elsewhere.