Task UX.2: CRM Form Design System Standardization

Objective

Establish one reusable CRM form design foundation for shared controls, field behaviors, filter bars, textarea sizing, and select trigger stability across the CRM surface.

Files Added

docs/implementation/task-ux2-crm-form-design-system-standardization.md
src/features/crm/shared/formats.ts
src/features/crm/components/crm-form-controls.tsx
src/components/forms/fields/currency-field.tsx
src/components/forms/fields/percentage-field.tsx

Files Modified

docs/standards/project-foundations.md
src/components/forms/fields/date-picker-field.tsx
src/components/forms/fields/index.tsx
src/components/forms/fields/textarea-field.tsx
src/components/ui/select.tsx
src/components/ui/tanstack-form.tsx
src/features/crm/customers/components/contact-form-sheet.tsx
src/features/crm/customers/components/contact-share-sheet.tsx
src/features/crm/customers/components/customer-form-sheet.tsx
src/features/crm/customers/components/customer-owner-card.tsx
src/features/crm/dashboard/components/dashboard-filters.tsx
src/features/crm/enquiries/components/enquiry-form-sheet.tsx
src/features/crm/enquiries/components/enquiry-outcome-card.tsx
src/features/crm/enquiries/components/followup-form-sheet.tsx
src/features/crm/quotations/components/quotation-approval-tab.tsx
src/features/crm/quotations/components/quotation-detail.tsx
src/features/crm/quotations/components/quotation-form-sheet.tsx
src/features/crm/reports/components/report-filter-bar.tsx

Drift Inventory

Before this task, CRM forms and filters had multiple inconsistent patterns:

raw type="date" inputs mixed with a calendar button pattern
numeric commercial fields implemented as generic text or bare number inputs
long select values stretching trigger width in customer and project-party flows
arbitrary textarea heights across dialogs, forms, and approval panels
report and dashboard filters using different control families from CRM forms
manual quotation dialogs bypassing the shared TanStack field wrappers

Foundation Created

New reusable CRM form foundation now standardizes:

date input behavior through CrmDateInput
number, currency, and percentage behavior through CrmNumberInput, CrmCurrencyInput, and CrmPercentageInput
textarea sizes through CrmTextarea with sm | md | lg
display formatting helpers through formatCrmDate() and formatCrmNumber()
TanStack form wrappers through FormCurrencyField and FormPercentageField
select trigger width stability through the shared SelectTrigger primitive

Module Coverage

The standardization was applied where CRM already had production form or filter surfaces:

Customers: customer form, contact form, owner assignment dialog, contact sharing dialog
Enquiries and leads: enquiry form, follow-up form, outcome dialogs
Quotations: quotation header form, approval submit panel, item/topic/follow-up/attachment dialogs
Reports and dashboard: shared date filter behavior for dashboard and report filter bars

UX Decisions Frozen

Date selection uses a calendar picker
User-facing date display uses DD/MM/YYYY
Select triggers stay w-full max-w-full and truncate long selected labels
Desktop CRM form layout remains primarily md:grid-cols-2
Textareas use named sizes instead of arbitrary heights
Report and dashboard filters reuse the same CRM date control family
Required field display continues to use the existing label * indicator pattern

Verification

Ran npm exec tsc --noEmit
Verified no remaining raw CRM type="date" or ad hoc textarea usage outside the shared CRM controls file itself

Remaining Notes

Some older dialogs still use direct Input for plain text fields, which is acceptable because the drift for this task was primarily around date, numeric, textarea, and select behavior.
Several legacy files still contain mojibake in Thai strings. This task avoided rewriting business copy unless required for control standardization.

4.0 KiB Raw Blame History