# 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