commit

docs/implementation/task-ux2-crm-form-design-system-standardization.md

@@ -0,0 +1,85 @@
+# 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.