# 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.