86 lines
4.0 KiB
Markdown
86 lines
4.0 KiB
Markdown
# 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.
|