Assist_Design/docs/uat/03-dashboard-and-profile.md
2026-02-24 11:09:35 +09:00

12 KiB

Dashboard and Profile

Overview

This journey covers the main dashboard that users see after logging in, the profile page where they can view and edit their personal information and address, and the identity verification section. The dashboard provides an at-a-glance summary of the account, while the profile/settings page lets users manage their details.

Portal Flow

The Dashboard

After logging in, you land on the dashboard at /account. The page title is "Dashboard" with the description "Overview of your account."

Greeting Section

At the top of the page, you see a personalized greeting:

  • "Welcome back" in small text above your name.
  • Your first name displayed in large bold text (or your email username if no first name is on file).
  • Below that, a status badge shows the number of tasks that need your attention:
    • If there are urgent tasks, the badge is red and shows an exclamation icon (for example, "1 task needs attention").
    • If there are non-urgent tasks, the badge is yellow.
    • If everything is up to date, you see the message "Everything is up to date."

Tasks Section

Below the greeting, the dashboard shows up to 4 task cards. These are action items that need your attention. Each task card has:

  • A colored left border indicating priority (red for critical, yellow for warning, blue for info, or neutral).
  • An icon representing the task type.
  • A title and description explaining what needs to be done.
  • An action button or link to resolve the task.

The following task types can appear (each only shows when its condition is met):

  • Overdue or upcoming invoice -- Reminds you to pay an invoice that is due soon or overdue. Links to the invoices page.
  • Add a payment method -- Prompts you to add a payment method if none is on file. Links to the payments page.
  • Order in progress -- Shows that an order is being processed. Links to the orders page.
  • Internet eligibility pending -- Indicates that your address eligibility check is still in progress.
  • ID verification needed -- Prompts you to upload or re-upload your residence card for identity verification. Links to the verification page.
  • Onboarding -- Suggests next steps for new accounts.

Account Overview (Quick Stats)

In the bottom-left area, an "Account Overview" section shows three clickable stat cards:

  • Active Services -- Shows the number of active subscriptions. Clicking takes you to /account/services.
  • Open Support Cases -- Shows the number of open support tickets. Clicking takes you to /account/support. If there are open cases, the card is highlighted in yellow.
  • Recent Orders -- Shows the number of recent orders (if any). Clicking takes you to /account/orders.

Each card shows the count in large bold text, or a message like "No active services" if the count is zero.

Recent Activity

In the bottom-right area, a "Recent Activity" timeline shows the most recent account events (up to 5). Each activity item has:

  • A colored icon indicating the activity type.
  • A title describing what happened.
  • A relative timestamp (for example, "2 hours ago" or "Yesterday").

Activity types include:

  • Invoice created (blue icon) -- A new invoice was generated.
  • Invoice paid (green icon) -- An invoice was paid.
  • Service activated (purple/primary icon) -- A service was activated.
  • Case created (yellow icon) -- A support case was opened.
  • Case closed (green icon) -- A support case was resolved.

Clicking on a clickable activity item takes you to the relevant page (for example, clicking an invoice activity takes you to that invoice).

If there is no recent activity, you see a placeholder message: "No recent activity. Your account activity will appear here as you use our services."

Internet Eligibility Toast

If your internet eligibility check was previously pending and has now been completed, a toast notification appears at the top of the dashboard saying: "We've finished reviewing your address -- you can now choose personalized internet plans."

The Profile / Settings Page

Navigate to /account/settings (accessible from the account navigation). The page is titled "Profile" with the description "Manage your account information."

The profile page has three main sections:

Personal Information Card

This card shows your personal details with a pencil Edit button in the top-right corner.

Read-only fields (cannot be changed from the portal):

  • First Name -- Shows your first name, with a note: "Name cannot be changed from the portal."
  • Last Name -- Shows your last name, with the same note.
  • Customer Number -- Your Salesforce Customer Number, with a note: "Customer number is read-only."
  • Date of Birth -- Your date of birth, with a note: "Date of birth is stored in billing profile."
  • Gender -- Your gender selection, with a note: "Gender is stored in billing profile."

Editable fields (can be changed when you click Edit):

  • Email Address -- Your email. In view mode, it shows a note: "Email can be updated from the portal." In edit mode, it becomes a text input you can modify.
  • Phone Number -- Your phone number. In edit mode, it becomes a text input.

When you click Edit, the editable fields switch to input fields. Two buttons appear:

  • Cancel -- Discards changes and returns to view mode.
  • Save Changes -- Saves your updates. While saving, the button shows "Saving..."

Address Information Card

This card shows your mailing address with an Edit button.

In view mode, the address is displayed in a formatted block showing:

  • Street address (Address 1 and Address 2)
  • City, State/Prefecture, Postcode
  • Country

If no address is on file, you see a placeholder message "No address on file" with an Add Address button.

In edit mode, an address form appears where you can update:

  • Address 1 (street)
  • Address 2 (apartment, suite, etc.)
  • City
  • State/Prefecture
  • Postcode
  • Country
  • Phone Number and Phone Country Code (for the address)

Two buttons appear at the bottom:

  • Cancel -- Discards changes.
  • Save Address -- Saves the updated address. While saving, the button shows "Saving..."

If there is an error saving the address, a red error banner appears below the form.

Identity Verification Card

This card shows the status of your residence card verification with a status pill in the top-right corner.

The status pill shows one of:

  • Verified (green) -- Your identity has been verified. The card shows "Your identity has been verified. No further action is needed." along with the verification date.
  • Under Review (blue) -- Your document has been submitted and is being reviewed. The card shows "Your residence card has been submitted. We'll verify it before activating SIM service." along with the submission date.
  • Action Needed (yellow) -- Your submission was rejected. The card shows the rejection reason (if provided by the reviewer) and asks you to upload a new document. Tips are provided: make sure all text is readable, avoid glare, and keep file size under 5 MB.
  • Required for SIM (yellow) -- No document has been submitted yet. The card explains that uploading a residence card is required to activate SIM services.

When upload is available (status is "Action Needed" or "Required for SIM"), you see:

  • A file input accepting images (JPG, PNG) or PDF, up to 5 MB.
  • After selecting a file, the file name is shown with a Change button.
  • A Submit Document button to upload the file. While uploading, the button shows "Uploading..."
  • Accepted formats note: "Accepted formats: JPG, PNG, or PDF (max 5MB). Make sure all text is readable."

What Happens in WHMCS

Dashboard

  • The dashboard data is read from multiple sources. The active services count, open cases count, and recent orders come from the portal's aggregated status endpoint, which pulls data from WHMCS and Salesforce.
  • No records are created or modified in WHMCS when viewing the dashboard.

Profile and Address Changes

  • When you edit your email or phone number from the Personal Information card, the change is written to the WHMCS Client record.
    • In WHMCS, go to Clients > Client List, find the client, and confirm the email or phone number was updated.
  • When you edit your address, the change is written directly to the WHMCS Client record.
    • In WHMCS, open the Client record and check the address fields (Address 1, Address 2, City, State, Postcode, Country) to confirm they match.
  • Changes appear immediately in WHMCS because the portal clears the WHMCS cache for that user after saving.
  • Name, date of birth, and gender cannot be changed from the portal. To change these, an administrator must update them directly in WHMCS.

Identity Verification

  • The residence card verification status is stored in Salesforce, not WHMCS. No WHMCS records are involved.

What Happens in Salesforce

Dashboard

  • The dashboard reads some data from Salesforce (through the portal backend) such as order information and eligibility status. No Salesforce records are created or modified when viewing the dashboard.

Profile Changes

  • Email and phone changes made through the portal are written to WHMCS only. Salesforce Address data is only updated as a snapshot when orders are created, not from the profile page.

Identity Verification

  • When you upload a residence card, the file and verification status are managed through Salesforce.
  • To check the verification status in Salesforce:
    • Find the customer's Account record.
    • Look for the Id Verification Status field (or related verification object).
    • Status values: Not Submitted, Submitted (pending review), Verified, Rejected.
  • When verification status changes in Salesforce (to Verified or Rejected), a Platform Event is fired which triggers an in-app notification in the portal.

Key Things to Verify

Dashboard

  • After logging in, confirm the dashboard loads with your correct first name in the greeting.
  • If you have an unpaid invoice, confirm a task card appears for it.
  • If you have no payment method, confirm a task card prompts you to add one.
  • If you recently placed an order, confirm it appears in the Recent Activity timeline.
  • Click the "Active Services" stat card and confirm it navigates to /account/services.
  • Click the "Open Support Cases" stat card and confirm it navigates to /account/support.
  • Confirm the Recent Activity section shows relevant events with correct timestamps.
  • For a brand-new account with no services or activity, confirm the dashboard shows "Everything is up to date" and "No recent activity."

Profile / Personal Information

  • Navigate to /account/settings and confirm your name, email, phone, customer number, date of birth, and gender are displayed correctly.
  • Click Edit, change the email or phone number, click Save Changes, and confirm the change is saved.
  • After saving, check the WHMCS Client record to confirm the email or phone was updated.
  • Confirm that First Name, Last Name, Customer Number, Date of Birth, and Gender are not editable (they should be displayed as read-only with explanatory notes).
  • Click Edit and then Cancel -- confirm no changes are saved.

Address

  • Navigate to /account/settings and check the Address Information card.
  • If an address is on file, confirm it displays correctly.
  • Click Edit, change the address, click Save Address, and confirm the change is saved.
  • After saving, check the WHMCS Client record to confirm the address fields were updated.
  • If no address is on file, confirm the "No address on file" message appears with an Add Address button.

Identity Verification

  • If no residence card has been submitted, confirm the status shows "Required for SIM" and the upload form is visible.
  • Upload a test document (JPG, PNG, or PDF under 5 MB) and confirm it submits successfully. The status should change to "Under Review."
  • Try uploading a file larger than 5 MB or an unsupported format and confirm an error is shown.
  • If the verification was rejected, confirm the rejection reason is displayed and you can re-upload a new document.
  • If the verification is complete, confirm the status shows "Verified" and no upload option is shown.