6.4 KiB
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
เรียงลำดับดังนี้
- Checkbox (รองรับ Bulk Action)
- Pin (📌)
- หัวข้อประกาศ
- สถานะ
- วันที่เผยแพร่
- วันสิ้นสุด
- ผู้สร้าง
- ไฟล์แนบ
- จัดการ
หัวข้อประกาศ
แสดง
- ชื่อประกาศ
- ข้อความย่อย (ถ้ามี)
ใช้ 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 ถูกสร้างเรียบร้อย