commit

plans/redesign-announcement.md

@@ -0,0 +1,289 @@
+# Prompt: Redesign Announcement List to Enterprise Data Table
+
+## Objective
+
+ปรับปรุงหน้า **Announcements List** จาก Card Layout ให้เป็น **Enterprise Data Table** เพื่อให้เหมาะสำหรับการจัดการประกาศของผู้ดูแลระบบ (Admin / HRD / HRD Manager)
+
+เป้าหมายของงานนี้คือ
+
+- ลดพื้นที่แนวตั้งของรายการ
+- รองรับข้อมูลจำนวนมาก
+- ค้นหาและจัดการประกาศได้สะดวก
+- รองรับ Sorting, Filtering และ Bulk Actions
+- ใช้ Design System เดิมของระบบ (shadcn/ui + TailwindCSS)
+- ไม่เปลี่ยน Business Logic, Workflow หรือ Permission เดิม
+
+---
+
+# Existing Implementation Compatibility
+
+ก่อนเริ่มพัฒนา ให้ตรวจสอบโครงสร้างเดิมทั้งหมด เช่น
+
+- Announcement List Page
+- Announcement Card Component
+- Query และ Pagination
+- Filters
+- Search
+- Status Badge
+- Action Menu
+- Permission
+- API
+- Server Actions
+- Shared Components
+
+หากสามารถ Reuse Component เดิมได้ ให้ Reuse เป็นหลัก
+
+ใช้หลัก
+
+> Reuse > Extend > Refactor > Create New
+
+ห้าม Rewrite Module ทั้งหมด
+
+---
+
+# Scope
+
+ดำเนินการดังนี้
+
+- เปลี่ยน Card Layout เป็น Data Table
+- คง Search เดิม
+- คง Filter เดิม
+- เพิ่ม Sorting
+- เพิ่ม Action Menu
+- รองรับ Bulk Selection (ถ้ามีโครงสร้างรองรับ)
+- แสดงสถานะและการปักหมุดใน Table
+- ตรวจสอบ Responsive
+
+---
+
+# Table Columns
+
+เรียงลำดับดังนี้
+
+1. Checkbox (รองรับ Bulk Action)
+2. Pin (📌)
+3. หัวข้อประกาศ
+4. สถานะ
+5. วันที่เผยแพร่
+6. วันสิ้นสุด
+7. ผู้สร้าง
+8. ไฟล์แนบ
+9. จัดการ
+
+### หัวข้อประกาศ
+
+แสดง
+
+- ชื่อประกาศ
+- ข้อความย่อย (ถ้ามี)
+
+ใช้ `truncate`
+
+---
+
+### Status
+
+ใช้ Badge ตามมาตรฐานของระบบ
+
+- Draft
+- Pending Review
+- Approved
+- Published
+- Expired
+- Archived
+
+---
+
+### Pin
+
+หากประกาศถูกปักหมุด
+
+แสดงไอคอน 📌 หรือ Badge `Pinned`
+
+หากไม่ปักหมุด ไม่ต้องแสดงข้อความ
+
+---
+
+### Publish Date
+
+แสดงวันที่เผยแพร่
+
+หากยังไม่เผยแพร่ แสดง "-"
+
+---
+
+### Expire Date
+
+แสดงวันสิ้นสุดการแสดงผล
+
+หากไม่มี แสดง "ไม่กำหนด"
+
+---
+
+### Attachment
+
+หากมีไฟล์แนบ
+
+แสดงไอคอนคลิปหนีบกระดาษ พร้อมจำนวนไฟล์ (ถ้ามีหลายไฟล์)
+
+หากไม่มี
+
+แสดง "-"
+
+---
+
+### Action Menu
+
+ใช้ Dropdown Menu
+
+รายการ Action ต้องเปลี่ยนตาม Status และ Permission
+
+ตัวอย่าง
+
+- ดูรายละเอียด
+- แก้ไข
+- ส่งตรวจสอบ
+- อนุมัติ
+- เผยแพร่
+- ปักหมุด
+- ยกเลิกการปักหมุด
+- Archive
+- ลบ
+
+---
+
+# Search
+
+คง Search เดิม
+
+ค้นหา
+
+- หัวข้อประกาศ
+- รายละเอียดประกาศ (ถ้าระบบรองรับ)
+
+---
+
+# Filter
+
+คง Filter เดิม และปรับ Layout ให้เหมาะกับ Data Table
+
+รองรับ
+
+- Status
+- ประเภท
+- ผู้สร้าง
+- ปี
+- ปักหมุด
+
+---
+
+# Sorting
+
+รองรับการเรียงลำดับ
+
+- หัวข้อ
+- สถานะ
+- วันที่เผยแพร่
+- วันสิ้นสุด
+- ผู้สร้าง
+
+---
+
+# Bulk Action
+
+หากระบบมี Permission และ API รองรับ
+
+เพิ่ม Bulk Actions
+
+- Publish
+- Archive
+- Delete
+- Pin
+- Unpin
+
+หากยังไม่มีโครงสร้างรองรับ ให้เตรียม UI และระบุในรายงานว่าเป็น Future Enhancement
+
+---
+
+# Pagination
+
+ใช้ Pagination เดิมของระบบ
+
+ไม่เปลี่ยน Logic
+
+---
+
+# Responsive
+
+Desktop
+
+ใช้ Data Table
+
+Mobile
+
+สามารถแสดงเป็น Card ได้ หาก Data Table ใช้งานยากบนหน้าจอเล็ก
+
+---
+
+# Performance
+
+- Reuse Query เดิม
+- ไม่ Fetch ซ้ำ
+- ใช้ Memoization ตามมาตรฐานเดิม
+- ไม่กระทบ Server Pagination
+
+---
+
+# Business Logic
+
+ห้ามแก้ไข
+
+- Approval Workflow
+- Publish Workflow
+- Schedule Publish
+- Permission
+- Validation
+- API Contract
+- Business Rules
+
+ให้เปลี่ยนเฉพาะการแสดงผล (Presentation Layer)
+
+---
+
+# Deliverables
+
+เมื่อดำเนินการเสร็จ
+
+สร้างเอกสาร
+
+`docs/announcement-list-table-redesign.md`
+
+ประกอบด้วย
+
+- Existing Structure Review
+- Files Changed
+- UI Before / After
+- Table Columns
+- Action Menu
+- Responsive Result
+- Performance Impact
+- Regression Check
+- Future Improvements
+
+---
+
+# Success Criteria
+
+งานถือว่าเสร็จเมื่อ
+
+- เปลี่ยน Card Layout เป็น Data Table
+- แสดงข้อมูลครบถ้วน
+- Search และ Filter ยังทำงานได้
+- Action Menu ใช้งานได้
+- Sorting ทำงานได้
+- Responsive สมบูรณ์
+- ไม่มี Regression
+- TypeScript ไม่มี Error
+- ESLint ผ่าน
+- Build ผ่าน
+- Report ถูกสร้างเรียบร้อย