5.3 KiB
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:
w-full
Use for:
- names
- titles
- references
- remarks
Number Input
Use:
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:
1,234,567.89
Consistently throughout CRM.
Examples:
- quotation value
- budget estimate
- revenue
- PO amount
Percentage Input
Display:
0%
25%
50%
75%
100%
Consistently.
Scope UX2.3 Date Standardization
Replace inconsistent date inputs.
Standard:
Calendar Picker
Use for:
- quotation date
- enquiry date
- lead date
- follow-up date
- expected closing date
- PO date
Date format:
DD/MM/YYYY
System-wide.
Scope UX2.4 Select Component Standardization
Fix oversized select controls.
Requirements:
w-full
max-w-full
truncate selected text
Dropdown content may be wider.
Trigger width must remain stable.
Fix known issue:
Project Parties
Customer Selection
Long Customer Names
must not stretch layout.
Scope UX2.5 Form Grid Standardization
Desktop:
2-column layout
Default.
Mobile:
1-column layout
Default.
Examples:
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:
Customer Name *
or
Required Badge
Choose one pattern and apply globally.
Scope UX2.7 Textarea Standardization
Textarea sizing rules:
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:
Overflow
Horizontal Scroll
Layout Shift
Scope UX2.9 Report Filter Standardization
Apply same control standards to:
CRM Reports
Dashboard Filters
Analytics Filters
Reuse CRM form controls.
No custom filter controls.
Scope UX2.10 Foundation Creation
Add to:
docs/standards/project-foundations.md
New Foundation:
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:
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