Skip to main content

Customer Lifecycle Portal (/dashboard)

The Customer Lifecycle Portal (/[locale]/dashboard) is an authenticated, responsive web portal delivering account self-service, referral earnings tracking, submission audit histories, and quote draft resumption for policyholders and affiliate partners.

1. Portal Architecture & Navigation​

The customer dashboard is implemented in src/app/[locale]/(dashboard)/dashboard/page.tsx and wrapped by src/components/feature/dashboard/user-dashboard.tsx.

It is partitioned into three functional workspaces:

2. Workspace 1: Profile Management Tab (user-profile-tab.tsx)​

The Profile Management workspace allows policyholders to inspect account credentials, review verification statuses, and customize their public avatar:

2.1 Profile Field Locking (profileLocked)​

To prevent identity theft, unauthorized account takeovers, and fraudulent redirection of referral rewards:

  • Core identity attributes (email, phone, referralCode) can be marked as immutable via the profileLocked attribute on the User document.
  • When profileLocked: true, UI edit inputs are disabled and server-side mutations via PATCH /api/user/profile are rejected with HTTP 403 Forbidden.

2.2 Interactive Avatar Upload & Cropping Engine​

Implemented via src/components/ui/image-crop-modal.tsx:

  1. File Selection: User selects an image file from their device.
  2. Crop Gate (react-easy-crop): Opens an accessible modal dialog forcing a 1:1 square aspect ratio. The user can zoom (1x to 3x) and pan the canvas to frame their photo.
  3. Canvas Rasterization: An off-screen HTML5 <canvas> renders the cropped coordinates, stripping malicious EXIF tags and converting the image to a clean WebP/JPEG data URI.
  4. Server Persistence (POST /api/user/profile/avatar):
    • Validates MIME type against whitelist (image/png, image/jpeg, image/webp).
    • Rejects payloads exceeding 2 MB.
    • Stores the data URI on User.profilePictureUrl and triggers immediate session cache invalidation.

3. Workspace 2: Refer & Earn Rewards Tab (user-referral-tab.tsx)​

HiTech Insurance operates a referral program rewarding clients and partners for qualified referrals:

3.1 Attributed Referral Links & QR Codes​

  • Attributed Link: Dynamically generated using the user's unique uppercase code:
    https://hitechinsurance.ai/en/refer-and-earn?ref=USR77492
  • Dynamic QR Code: Uses the qrcode library to render a high-resolution QR code on screen, enabling immediate in-person scanning at logistics terminals or dealerships.

3.2 Referral Email Invitation Dispatcher (POST /api/referral/invite)​

Allows registered users to invite friends, colleagues, and freight partners directly from the dashboard:

  • Evaluated under the AUTHENTICATED_MUTATION rate limiter tier (30 requests per minute).
  • Dispatches a personalized HTML email via the Azure Email Service.

3.3 Activity Tracking Table & Reward Payout Lifecycle​

The activity table queries Referral.find({ referrer: session.user.id }) and reports the lifecycle status of every referred client:

  • Payout Statuses: pending (under review) → approved (cleared for disbursement) → disbursed (funds transferred to user).
  • Administrative Restriction: Internal administrator accounts (admin, super_admin) are barred from participating in commercial referral rewards. If an admin accesses this tab, the system displays AdminRestrictedModal.

4. Workspace 3: Submissions Explorer & Draft Resumption​

4.1 Unified 6-Domain Submission Explorer​

Clients frequently submit multiple inquiries over time. Rather than fragmenting records across different pages, the Submissions tab aggregates records across all six customer touchpoints:

  1. Quote Inquiries & Applications (Lead)
  2. Scheduled Phone Consultations (CallLead)
  3. First Notice of Loss Claims (ClaimsForm)
  4. Career Applications (CareerForm)
  5. General Support Messages (ContactForm)
  6. Data Privacy Rights Requests (PrivacyIntakeForm)

4.2 Incomplete Draft Resumption Protocol​

When a visitor starts an insurance quote questionnaire on the public website but closes their tab, the incomplete application is tagged with an amber "Incomplete Draft" badge:

  • Resumption Button: The dashboard renders an interactive "Resume Application" button.
  • State Hydration: Clicking "Resume" instantiates InsuranceQuoteModal, passing the existing draftLeadId and pre-populating all previously answered questions.
  • Completion Transition: Submitting the remaining questions atomically promotes the document to status: 'completed' and dispatches it to the HTI CRM.

4.3 Deep Submission Inspector Modal (submission-details-modal.tsx)​

Clicking any historical record opens the comprehensive Submission Inspector:

  • Displays full submission metadata, timestamps, assigned agent notes, and status badges.
  • Formats dynamic arrays (drivers, vehicles, equipment, incident details) into readable tables.
  • Implements Synthetic History Interception (window.history.pushState), ensuring that tapping the browser or mobile back button dismisses the modal dialog cleanly rather than navigating away from the dashboard.