460 lines
5.3 KiB
Markdown
460 lines
5.3 KiB
Markdown
# 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
|