commit

plans/task-ux.2.md

@@ -0,0 +1,459 @@
+# Task UX.2: CRM Form Design System Standardization
+
+## Objective
+
+Standardize all CRM form controls, layouts, field behaviors, and visual consistency across the entire ALLA CRM platform.
+
+This task focuses on usability, consistency, accessibility, and maintainability.
+
+The goal is to eliminate UI drift caused by different implementation patterns across Customer, Lead, Enquiry, Quotation, Approval, Settings, and Report modules.
+
+This task creates the official CRM Form Design Foundation.
+
+---
+
+# Mandatory Review
+
+Before implementation review:
+
+* AGENTS.md
+* docs/standards/ui-ux-rules.md
+* docs/standards/project-foundations.md
+* UX.1 Thai CRM Terminology Standardization
+* Kiranism Dashboard Skill
+* Existing shared form components
+* Existing select-field implementation
+* Existing date-picker implementation
+* Existing currency/number inputs
+
+---
+
+# Required Skills
+
+## Governance
+
+* AGENTS.md
+* Architecture Rules
+* UI/UX Rules
+* Task Review Checklist
+
+---
+
+## Frontend
+
+* Kiranism Dashboard Skill
+* Bento Grid Guidelines
+* shadcn/ui Conventions
+* React Hook Form Conventions
+
+---
+
+## CRM
+
+* UX.1 Thai CRM Terminology
+* Customer Foundation
+* Lead / Enquiry Foundation
+* Quotation Foundation
+
+---
+
+# Scope UX2.1 Form Control Inventory
+
+Audit all CRM forms.
+
+Identify:
+
+* text inputs
+* number inputs
+* currency inputs
+* percentage inputs
+* date fields
+* select fields
+* textarea fields
+* autocomplete fields
+
+Document inconsistencies.
+
+---
+
+# Scope UX2.2 Standard Input Components
+
+Create official CRM form standards.
+
+## Text Input
+
+Default:
+
+```txt
+w-full
+```
+
+Use for:
+
+* names
+* titles
+* references
+* remarks
+
+---
+
+## Number Input
+
+Use:
+
+```txt
+type="number"
+```
+
+or dedicated number component.
+
+No numeric values should use generic text input.
+
+Examples:
+
+* quantity
+* chance %
+* expected value
+
+---
+
+## Currency Input
+
+Create a dedicated currency pattern.
+
+Display:
+
+```txt
+1,234,567.89
+```
+
+Consistently throughout CRM.
+
+Examples:
+
+* quotation value
+* budget estimate
+* revenue
+* PO amount
+
+---
+
+## Percentage Input
+
+Display:
+
+```txt
+0%
+25%
+50%
+75%
+100%
+```
+
+Consistently.
+
+---
+
+# Scope UX2.3 Date Standardization
+
+Replace inconsistent date inputs.
+
+Standard:
+
+```txt
+Calendar Picker
+```
+
+Use for:
+
+* quotation date
+* enquiry date
+* lead date
+* follow-up date
+* expected closing date
+* PO date
+
+---
+
+Date format:
+
+```txt
+DD/MM/YYYY
+```
+
+System-wide.
+
+---
+
+# Scope UX2.4 Select Component Standardization
+
+Fix oversized select controls.
+
+Requirements:
+
+```txt
+w-full
+max-w-full
+truncate selected text
+```
+
+Dropdown content may be wider.
+
+Trigger width must remain stable.
+
+---
+
+Fix known issue:
+
+```txt
+Project Parties
+Customer Selection
+Long Customer Names
+```
+
+must not stretch layout.
+
+---
+
+# Scope UX2.5 Form Grid Standardization
+
+Desktop:
+
+```txt
+2-column layout
+```
+
+Default.
+
+---
+
+Mobile:
+
+```txt
+1-column layout
+```
+
+Default.
+
+---
+
+Examples:
+
+```txt
+Customer Name      Customer Group
+
+Customer Type      Customer Sub Group
+
+Phone              Email
+```
+
+---
+
+# Scope UX2.6 Required Field Standardization
+
+All required fields must display a consistent indicator.
+
+Example:
+
+```txt
+Customer Name *
+```
+
+or
+
+```txt
+Required Badge
+```
+
+Choose one pattern and apply globally.
+
+---
+
+# Scope UX2.7 Textarea Standardization
+
+Textarea sizing rules:
+
+```txt
+Small
+Medium
+Large
+```
+
+Avoid arbitrary heights.
+
+Examples:
+
+* Remarks
+* Exclusions
+* Terms
+* Internal Notes
+
+---
+
+# Scope UX2.8 Responsive Dialog Standards
+
+Standardize:
+
+* Sheet widths
+* Dialog widths
+* Form container widths
+
+Prevent:
+
+```txt
+Overflow
+Horizontal Scroll
+Layout Shift
+```
+
+---
+
+# Scope UX2.9 Report Filter Standardization
+
+Apply same control standards to:
+
+```txt
+CRM Reports
+Dashboard Filters
+Analytics Filters
+```
+
+Reuse CRM form controls.
+
+No custom filter controls.
+
+---
+
+# Scope UX2.10 Foundation Creation
+
+Add to:
+
+```txt
+docs/standards/project-foundations.md
+```
+
+New Foundation:
+
+```txt
+CRM Form Design Foundation
+```
+
+Purpose:
+
+Standardized CRM form controls and layouts.
+
+---
+
+# Deliverables
+
+## New Documentation
+
+* docs/implementation/task-ux2-crm-form-design-system-standardization.md
+
+---
+
+## Components Updated
+
+* shared input controls
+* shared select controls
+* shared date controls
+* shared number controls
+* shared currency controls
+
+---
+
+## CRM Modules Updated
+
+* Customers
+* Leads
+* Enquiries
+* Quotations
+* Approvals
+* Settings
+* Reports
+
+where applicable.
+
+---
+
+# Explicit Non-Scope
+
+Do NOT:
+
+* redesign business workflows
+* change CRM statuses
+* change permissions
+* change APIs
+* change database schema
+
+This task is UI/UX consistency only.
+
+---
+
+# Verification
+
+Verify:
+
+## Customer Form
+
+* width consistency
+* select consistency
+* date consistency
+
+---
+
+## Lead Form
+
+* responsive layout
+* required fields
+
+---
+
+## Enquiry Form
+
+* date picker behavior
+
+---
+
+## Quotation Form
+
+* currency formatting
+* project party selects
+
+---
+
+## Report Filters
+
+* control consistency
+
+---
+
+Run:
+
+```txt
+npm exec tsc --noEmit
+```
+
+and verify visually.
+
+---
+
+# Definition of Done
+
+Task is complete when:
+
+* all CRM forms use the same control standards
+* all date fields use the same date picker pattern
+* all select fields behave consistently
+* long values no longer break layouts
+* form widths are standardized
+* report filters follow the same design system
+* CRM Form Design Foundation is documented
+
+Result:
+
+CRM Form Design System = ESTABLISHED
+
+CRM UX Consistency = IMPROVED
+
+Future CRM Forms = STANDARDIZED