```
## 🔍 Audit Workflow (กระบวนการทำงานของคุณ)
-1. **รับคำสั่ง:** ตรวจสอบชื่อไฟล์ / Component Block ที่รับมอบหมาย
-2. **Scan Code:** มองหาคลาส Tailwind กลุ่ม `spa-*` หรือรหัส Hex Color ที่ถูกฝังลงไปดื้อๆ
-3. **Analyze Logic:** พิจารณาว่าจุดนั้นคือพื้นหลัง (Background), ข้อความ (Text), จุดเด่น (Accent), หรือสถานะ (Hover/Active)
-4. **Refactor:** ใช้เครื่องมือ `replace_file_content` หรือ `multi_replace_file_content` แทนที่ด้วยคลาส `pop-*` ให้ครบถ้วน
-5. **Verify Context:** ตรวจทานความถูกต้องของ Contrast เช่น ถ้าพื้นหลังเป็น `bg-pop-black` ตัวหนังสือต้องเป็น `text-pop-bg` (ห้ามใช้สีมืดชนกันเอง)
+1. **Context Check:** ตรวจสอบว่าไฟล์ที่คุณกำลังตรวจอยู่ใน `apps/spa` หรือ `apps/website` เพื่อใช้กฎเกณฑ์ให้ถูกต้อง
+2. **Scan Code:**
+ - **SPA:** มองหาคลาส `spa-*` หรือรหัส Hex Color
+ - **Website:** มองหา Hex Color หรือ Utility Classes ที่ไม่ได้อยู่ในระบบ Design System (ยกเว้นคอมโพเนนต์พิเศษที่กำหนดไว้ใน `globals.css`)
+3. **Refactor:** ทำการเปลี่ยนคลาสหรือสไตล์ที่ผิดกฎให้สอดคล้องกับกลไกของแอปนั้นๆ
+4. **Verify Context:** ตรวจทานความถูกต้องของ Contrast (เช่น พื้นมืดต้องคู่อักษรสว่าง)
## ⚖️ Disciplines
-- **"Do not break the pipe"**: คุณต้องตระหนักว่าคลาส `pop-pink` ไม่ใช่ "สีชมพู" แต่มันคือ "ท่อลำเลียงสี Brand Primary" ที่มาจาก Admin
-- **"System Flow is King"**: หน้าที่ของคุณคือผูกโค้ดเข้ากับท่อส่งตัวแปร CSS เหล่านั้น ห้ามดึงน้ำออกจากท่อมาสาดใส่โค้ดเองเด็ดขาด
+- **"System Flow is King"**: หน้าที่ของคุณคือผูกโค้ดเข้ากับท่อส่งตัวแปรเหล่านั้น ไม่ว่าจะเป็นท่อ `pop-*` (SPA) หรือท่อ Utility ของ `@theme` Tailwind v4 (Website)
+- ห้ามดึงค่า API มาสาดใส่ component แบบ inline style เด็ดขาด ให้ใช้โครงสร้างที่มีอยู่แล้วเสมอ
diff --git a/apps/admin/src/App.tsx b/apps/admin/src/App.tsx
index f130494..a69202d 100644
--- a/apps/admin/src/App.tsx
+++ b/apps/admin/src/App.tsx
@@ -33,6 +33,7 @@ import LazadaAnalyticsPage from './pages/LazadaAnalyticsPage'
import LazadaOverviewPage from './pages/LazadaOverviewPage'
import GlobalAnalyticsPage from './pages/GlobalAnalyticsPage'
import MediaLibraryPage from './pages/MediaLibraryPage'
+import ContactMessagesPage from './pages/ContactMessagesPage'
function App() {
return (
@@ -62,6 +63,7 @@ function App() {
} />
} />
} />
+
} />
} />
} />
} />
diff --git a/apps/admin/src/components/Sidebar.tsx b/apps/admin/src/components/Sidebar.tsx
index 084861b..e3f3e86 100644
--- a/apps/admin/src/components/Sidebar.tsx
+++ b/apps/admin/src/components/Sidebar.tsx
@@ -16,7 +16,8 @@ import {
Layers,
Globe2,
Users,
- Image as ImageIcon
+ Image as ImageIcon,
+ MessageSquare
} from 'lucide-react'
const MENU_ITEMS = [
@@ -45,6 +46,7 @@ const MENU_ITEMS = [
{ icon: Globe2, label: 'All Analytics', to: '/global-analytics' },
{ icon: Layers, label: 'Menu Manager', to: '/menu-manager' },
{ icon: Users, label: 'Subscribers', to: '/subscribers' },
+ { icon: MessageSquare, label: 'Contact Messages', to: '/contacts' },
{ icon: Settings, label: 'Settings', to: '/settings' },
]
diff --git a/apps/admin/src/pages/ContactMessagesPage.tsx b/apps/admin/src/pages/ContactMessagesPage.tsx
new file mode 100644
index 0000000..6ab6646
--- /dev/null
+++ b/apps/admin/src/pages/ContactMessagesPage.tsx
@@ -0,0 +1,143 @@
+import { useState, useEffect } from 'react'
+import { API_BASE } from '@homaroma/types'
+import { CheckCircle2, MessageSquare, Clock, AlertCircle } from 'lucide-react'
+
+interface ContactMessage {
+ id: number
+ name: string
+ email: string
+ message: string
+ isRead: boolean
+ createdAt: string
+ updatedAt: string
+}
+
+export default function ContactMessagesPage() {
+ const [messages, setMessages] = useState
([])
+ const [loading, setLoading] = useState(true)
+
+ const fetchMessages = async () => {
+ setLoading(true)
+ try {
+ const r = await fetch(`${API_BASE}/contacts`)
+ const data = await r.json()
+ setMessages(data)
+ } catch (err) {
+ console.error(err)
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ useEffect(() => {
+ fetchMessages()
+ }, [])
+
+ const toggleReadStatus = async (id: number, currentStatus: boolean) => {
+ try {
+ const res = await fetch(`${API_BASE}/contacts/${id}`, {
+ method: 'PATCH',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ isRead: !currentStatus })
+ })
+
+ if (res.ok) {
+ fetchMessages()
+ } else {
+ const errorData = await res.json()
+ alert(errorData.error || 'Failed to update status')
+ }
+ } catch (err) {
+ console.error('Update error:', err)
+ alert('An error occurred while updating.')
+ }
+ }
+
+ return (
+
+
+
+
+ Contact Messages
+
+
Review and manage inquiries submitted from the website.
+
+
+
+
+
+
+
+ | Status |
+ Date |
+ Name |
+ Email |
+ Message |
+ Action |
+
+
+
+ {loading ? (
+
+ |
+ Loading messages...
+ |
+
+ ) : messages.length === 0 ? (
+
+ |
+ No messages found.
+ |
+
+ ) : (
+ messages.map((msg) => (
+
+ |
+ {msg.isRead ? (
+
+
+ Read
+
+ ) : (
+
+ )}
+ |
+
+
+
+ {new Date(msg.createdAt).toLocaleDateString('en-GB', {
+ day: '2-digit', month: 'short', year: 'numeric',
+ hour: '2-digit', minute: '2-digit'
+ })}
+
+ |
+ {msg.name} |
+ {msg.email} |
+
+ {msg.message}
+ |
+
+
+ |
+
+ ))
+ )}
+
+
+
+
+