# 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 ถูกสร้างเรียบร้อย