task-fixdatetime

plans/task-datetime.md

@@ -0,0 +1,259 @@
+# 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.