260 lines
2.5 KiB
Markdown
260 lines
2.5 KiB
Markdown
# Task: Global Date & Time Formatting Standard (Hydration-safe)
|
|
|
|
## Objective
|
|
|
|
Eliminate all React hydration mismatch issues caused by inconsistent date formatting between Server Components and Client Components.
|
|
|
|
Establish a single global date formatting standard across the entire application.
|
|
|
|
---
|
|
|
|
## Problem
|
|
|
|
Current implementation uses:
|
|
|
|
* Date.toLocaleString()
|
|
* Date.toLocaleDateString()
|
|
* Date.toLocaleTimeString()
|
|
|
|
These APIs depend on:
|
|
|
|
* Browser Locale
|
|
* Operating System Locale
|
|
* Server Locale
|
|
* Server Timezone
|
|
* Browser Timezone
|
|
|
|
This causes inconsistent rendering between SSR and Client Hydration.
|
|
|
|
Example
|
|
|
|
Server
|
|
|
|
16/6/2569 17:00:00
|
|
|
|
Client
|
|
|
|
6/16/2026, 5:00:00 PM
|
|
|
|
Result
|
|
|
|
React Hydration Error
|
|
|
|
---
|
|
|
|
## Requirements
|
|
|
|
### 1. Create Global Date Utility
|
|
|
|
Create
|
|
|
|
```
|
|
src/lib/date-format.ts
|
|
```
|
|
|
|
All UI must use this utility.
|
|
|
|
---
|
|
|
|
### 2. Never use
|
|
|
|
Forbidden
|
|
|
|
```
|
|
toLocaleString()
|
|
|
|
toLocaleDateString()
|
|
|
|
toLocaleTimeString()
|
|
|
|
Intl.DateTimeFormat()
|
|
|
|
new Date().toString()
|
|
```
|
|
|
|
directly inside React components.
|
|
|
|
---
|
|
|
|
### 3. Standard Display Format
|
|
|
|
Date only
|
|
|
|
```
|
|
YYYY-MM-DD
|
|
|
|
Example
|
|
|
|
2026-06-25
|
|
```
|
|
|
|
Date Time
|
|
|
|
```
|
|
YYYY-MM-DD HH:mm:ss
|
|
|
|
Example
|
|
|
|
2026-06-25 14:35:20
|
|
```
|
|
|
|
Time
|
|
|
|
```
|
|
HH:mm:ss
|
|
```
|
|
|
|
Month
|
|
|
|
```
|
|
YYYY-MM
|
|
```
|
|
|
|
Year
|
|
|
|
```
|
|
YYYY
|
|
```
|
|
|
|
---
|
|
|
|
### 4. Timezone
|
|
|
|
Always
|
|
|
|
```
|
|
Asia/Bangkok
|
|
```
|
|
|
|
Never depend on browser timezone.
|
|
|
|
---
|
|
|
|
### 5. Calendar
|
|
|
|
Always use
|
|
|
|
Gregorian Calendar
|
|
|
|
Never Buddhist Calendar.
|
|
|
|
Display
|
|
|
|
2026
|
|
|
|
Never
|
|
|
|
2569
|
|
|
|
---
|
|
|
|
### 6. SSR Safe
|
|
|
|
Formatting must produce identical output on
|
|
|
|
* Server
|
|
* Client
|
|
* Static Render
|
|
* Hydration
|
|
|
|
No locale-dependent output.
|
|
|
|
---
|
|
|
|
### 7. Usage
|
|
|
|
Replace every occurrence of
|
|
|
|
```
|
|
toLocaleString()
|
|
|
|
toLocaleDateString()
|
|
|
|
toLocaleTimeString()
|
|
|
|
Intl.DateTimeFormat()
|
|
```
|
|
|
|
with
|
|
|
|
```
|
|
formatDate()
|
|
|
|
formatDateTime()
|
|
|
|
formatTime()
|
|
|
|
formatMonth()
|
|
|
|
formatYear()
|
|
```
|
|
|
|
---
|
|
|
|
### 8. Dashboard
|
|
|
|
Update all CRM Dashboard components.
|
|
|
|
Especially
|
|
|
|
* Approval Metrics
|
|
* Lead Tables
|
|
* Opportunity Tables
|
|
* Quotation Tables
|
|
* Activity Timeline
|
|
* Follow-up
|
|
* Reports
|
|
|
|
---
|
|
|
|
### 9. Tables
|
|
|
|
Default date column
|
|
|
|
```
|
|
YYYY-MM-DD
|
|
```
|
|
|
|
Only show time when business requires it.
|
|
|
|
---
|
|
|
|
### 10. Forms
|
|
|
|
Date Picker
|
|
|
|
Store
|
|
|
|
ISO8601 UTC
|
|
|
|
Display
|
|
|
|
YYYY-MM-DD
|
|
|
|
---
|
|
|
|
### 11. API
|
|
|
|
API returns
|
|
|
|
ISO8601
|
|
|
|
Example
|
|
|
|
```
|
|
2026-06-25T10:35:20.000Z
|
|
```
|
|
|
|
UI handles formatting.
|
|
|
|
---
|
|
|
|
## Acceptance Criteria
|
|
|
|
* No Hydration mismatch.
|
|
* No locale-dependent rendering.
|
|
* Same output in Server and Client.
|
|
* All dashboard pages use global formatter.
|
|
* All table date columns display YYYY-MM-DD.
|
|
* No usage of toLocaleString(), toLocaleDateString(), toLocaleTimeString() inside UI components.
|