# 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.