Skip to content

Customer Portal - Customer CRM

Purpose

Enables business tenants to manage end-to-end B2B customer relationships, commercial sales opportunities, team interaction activities, and product offerings. The module gives sales and account management teams a 360-degree view of corporate accounts, visual Kanban opportunity tracking, and pricing standardization.

Users and permissions

All authenticated workspace users can access the CRM module (/crm). Super admin, admin, and tenant owner have full create, update, and export access.

Action Super admin Admin Tenant owner User
View Customer Directory & Deals Yes Yes Yes Yes
Add & Edit Customer Company Yes Yes Yes Yes
Add & Edit Contact Persons Yes Yes Yes Yes
Manage Sales Pipeline Deals Yes Yes Yes Yes
Log Interactions & Timeline Notes Yes Yes Yes Yes
Manage Products & Price Book Yes Yes Yes No
Export Customers to CSV Yes Yes Yes Yes

Requirements

ID Priority Requirement
CRM-01 Must Responsive customer workspace CRM view located at /crm with 4 operational tabs: Customer Directory, Sales Pipeline, Activity Stream, and Products & Price Book.
CRM-02 Must Customer Directory table rendering Company Name, Representative, Contact Info (Email, Phone), Industry, Contract Value, Segment Status badge, and View 360° action button. Industry is a sky-blue tinted badge (not a solid black secondary pill) so it sits with the coloured status badges.
CRM-03 Must Search across company name, customer code, representative, and email. Filter by relationship segment (VIP, Active, Negotiating, Lead) and industry.
CRM-04 Must Seed at least 20 realistic sample B2B customer records across all segments and major industries (Software, Retail, Logistics, Healthcare, Construction, Manufacturing, Finance).
CRM-05 Must Customer 360° profile modal displaying Company Profile (tax ID, head office address, website, account manager, contract value), Contact Persons, Linked Deals, and Activity Timeline.
CRM-06 Must Add Contact Person capability allowing multiple point-of-contacts per company with name, job title, email, phone, and primary contact designation.
CRM-07 Must Interactive activity logger allowing instant recording of Meetings, Phone Calls, Emails, and Internal Notes into the customer's chronological timeline.
CRM-08 Must Sales Pipeline Kanban board with 5 stages: New Leads, Discovery & Qualify, Proposal & Quote, Negotiation, and Closed Won. Each column shows deal count and total stage valuation.
CRM-09 Must Create Deal modal linked to associated customer company with title, value in VND, stage, probability percentage, expected close date, and account owner.
CRM-10 Must Stage progression control (Advance) on deal cards that shifts opportunities forward to the subsequent pipeline stage and logs a milestone activity.
CRM-11 Must Activity Stream timeline displaying cross-account team customer interactions with type filtering (meetings, calls, emails, deal milestones, memos).
CRM-12 Must Products and Price Book catalog tab displaying standard offerings with item SKU code, category, unit price in VND, unit type, and Add Product modal.
CRM-13 Must KPI metric cards banner displaying Total Corporate Accounts, Active Pipeline Valuation, Key Accounts (VIP), and Pipeline Win Rate.
CRM-14 Must Export customer directory data to CSV format.
CRM-15 Must All user interface labels, tables, dialogs, charts, and error states are presented in English (CUST-12).
CRM-22 Must Add Customer and Edit Customer forms require Company Name, Representative / Primary Contact, and Corporate / Business Email. Contact Phone, Contract Value, and other profile fields are optional (provisional — pending stakeholder review).
CRM-23 Must Add and Edit forms reject mismatched characters as the user types: person names, company names, cities, and job titles cannot contain digits; phone numbers cannot contain letters; tax IDs are digits (optional hyphen); account/SKU codes are alphanumeric with hyphen; email and website strip spaces and illegal characters. Submit is blocked when email is malformed or a filled phone has fewer than 8 digits.
CRM-24 Must The Leads table omits email and phone so the row fits without horizontal scrolling. Contact details remain on the Lead Detail dialog opened from Details or a row click. Search still matches email and phone.

Screens

  1. CRM Main Dashboard (/crm):
  2. Header with title, description, "+ Add Deal", and "+ Add new customer" buttons.
  3. 4 KPI summary cards (Corporate Accounts, Pipeline Value, Key Accounts, Win Rate).

  4. 4-tab selector: Customer Directory, Sales Pipeline, Activity Stream, Products & Price Book.

  5. Customer Directory Tab:

  6. Search input, Segment dropdown filter, Industry dropdown filter, Export CSV button.
  7. Customer table with row click and "View 360°" action. Industry column uses a sky-blue tinted badge.

  8. Pagination bar (10 records per page).

  9. Customer 360° Profile Dialog:

  10. Company header with logo initial, name, segment badge, code, industry, total contract value, and "Edit Profile" action.
  11. Tab 1 - Company Profile: Corporate details, tax code, address, website, assigned manager, internal notes.
  12. Tab 2 - Contacts: Linked contact list with primary badge, and "+ Add Contact" form.
  13. Tab 3 - Deals: Active opportunities associated with this account.

  14. Tab 4 - Activity Timeline: Historical feed of interactions and "+ Log Activity" form.

  15. Sales Leads Management Tab:

  16. 4 summary metrics: Total Inbound Leads, High Priority (Hot) Prospects, Pipeline Potential (VND), and Converted Accounts.
  17. Search bar across lead name, company, email, phone, and lead code.
  18. Multi-faceted filters: Status (new, contacted, qualified, unqualified, converted), Rating (hot, warm, cold), and Source (website, inbound, referral, event, partner, outbound).
  19. Leads table with Lead Code, Prospect & Company, Source, Rating badge (Flame for Hot), Status badge, Est. Value, and Rep. Email and phone are not columns; they appear in the Lead Detail dialog.
  20. Row actions: "Details" (opens a wide Lead Detail Dialog, max-w-4xl, with Contact Information and Pipeline Attribution side by side) and "Convert" (opens Convert Lead Dialog).

  21. "Add Lead" modal to capture new prospective clients.

  22. Contacts Directory Tab:

  23. 3 summary metrics: Total Contact Persons, Key Decision Makers, and Covered Companies.
  24. Search by contact name, job title, company name, email, or direct phone.
  25. Company filter dropdown and "Primary Decision Makers" filter toggle.
  26. Direct mailto and phone tel links.
  27. Row actions: "Edit Contact", "Delete Contact", and quick company 360° view navigation.

  28. Standalone "Add Contact" modal allowing company assignment.

  29. Sales Pipeline Board Tab:

  30. 5 Kanban columns with color-coded headers and stage sum badges.

  31. Deal cards showing deal title, customer name, amount in VND, owner chip, win probability, expected close date, and Advance action.

  32. Activity Stream Tab:

  33. Chronological card feed with icon per interaction type, search, and type filter.

  34. Products & Price Book Tab:

  35. Offerings catalog table with SKU, category badge, standard price, and "+ Add Product" modal.

Business rules

  • Customer Statuses:
  • vip: Key strategic client with contract value > 400M VND or multi-site deployment.
  • active_client: Established client under active service agreement.
  • negotiating: High-intent prospect currently in formal quotation/contract negotiations.
  • lead: Inbound or prospecting lead undergoing initial qualification.
  • Lead Lifecycle & Conversion:
  • new ➔ contacted ➔ qualified ➔ converted (or unqualified).
  • Conversion flow creates an active Customer Account in the customer directory, establishes a Primary Contact Person, and optionally creates an associated Pipeline Deal in the designated stage.
  • Contact Priority:
  • Accounts can have multiple contacts, with designated isPrimary flag for primary key account decision makers.
  • Deal Stages & Flow:
  • new ➔ discovery ➔ proposal ➔ negotiation ➔ won (or lost).
  • Advancing a deal automatically sets probability to 100% upon reaching won and generates an audit activity log entry.
  • Data Isolation:
  • Customer data is scoped to the authenticated tenant workspace and is completely isolated from other tenancies.
  • Customer form required fields (provisional):
  • Required: company name, representative / primary contact, corporate email.
  • Optional: customer code (auto-generated when blank), phone, contract value, industry, tier, city, owner, notes, tax ID, website, address.
  • Typed field masks (Add/Edit Customer, Lead, Contact, Convert Lead, Deal owner, Product SKU, Settings legal profile):
  • Person / company / city / job title: Unicode letters and light punctuation only; digits are dropped.
  • Phone: digits, +, spaces, parentheses, hyphen; letters are dropped. Optional, but a filled value must have 8–15 digits.
  • Tax ID: digits and hyphen. Account/SKU code: A–Z, 0–9, hyphen.
  • Email and website: whitespace stripped; submit requires a valid email when the field is required.

Acceptance criteria

  • CRM-01: When an authenticated user accesses /crm, the page renders 4 metric cards, action buttons, and 6 functional tabs.
  • CRM-02: Customer Directory renders table columns for company name, representative, contacts, industry (sky-blue badge), contract value, and segment badge.
  • CRM-03: Filtering by segment VIP updates the table to show only VIP customers.
  • CRM-04: Customer Directory loads with 22 pre-seeded sample records across 7 distinct industries.
  • CRM-05: Clicking a customer row opens the Customer 360° Profile dialog with all 4 sub-tabs and Edit Profile button.
  • CRM-06: Submitting the Add Contact form adds the new contact person immediately to the customer's contact list.
  • CRM-07: Submitting the Log Activity form prepends the new interaction to the customer's timeline.
  • CRM-08: The Sales Pipeline tab renders 5 columns: New Leads, Discovery & Qualify, Proposal & Quote, Negotiation, and Closed Won.
  • CRM-09: Creating a new deal via "+ Add Deal" adds the card into the pipeline board and increments the total pipeline value.
  • CRM-10: Clicking "Advance" on a deal moves it to the next pipeline stage.
  • CRM-12: The Products & Price Book tab renders standard products with prices and allows creating a new product item.
  • CRM-14: Clicking "Export CSV" triggers a browser download of the customer CSV dataset.
  • CRM-15: All text labels in the CRM view are displayed in English.
  • CRM-16: Leads tab displays 22 realistic sales leads with status, rating, source filters, and CSV export.
  • CRM-17: Clicking "Convert" on a qualified lead opens the conversion modal and creates customer account, contact, and deal records.
  • CRM-18: Contacts Directory displays 22 contact records across accounts with role, primary tag, and company link.
  • CRM-19: Users can edit and delete contacts directly with confirmation.
  • CRM-20: Users can edit customer corporate profile details via the Edit Customer modal.
  • CRM-21: Deleting or archiving a customer removes the account and updates the corporate count metrics.
  • CRM-22: Add/Edit Customer blocks submit without company name, primary contact, and business email; phone and contract value remain optional.
  • CRM-23: Add/Edit forms drop letters from phone and digits from names while typing, and block submit on invalid email or undersized phone.
  • CRM-24: The Leads table has no Contact Info column; email and phone are shown in the Lead Detail dialog.