commit

docs/management-change-certificate-preview-review.md

@@ -0,0 +1,78 @@
+# Certificate Preview Review
+
+## Summary
+
+ปรับปรุงการแสดงตัวอย่างใบรับรองในโมดูล Training Records ให้รองรับ fallback ที่ชัดเจนขึ้น:
+
+- ไฟล์รูปภาพ `JPG`, `JPEG`, `PNG`, `GIF`, `WEBP` แสดง preview ได้
+- หากรูปเสีย, โหลดไม่ได้, URL ไม่ถูกต้อง, หรือเป็นไฟล์ที่ไม่ใช่รูปภาพ จะไม่แสดง broken image
+- ใช้ placeholder แบบเดียวกันในตารางประวัติอบรม, หน้ารายละเอียด, และรายการเอกสารแนบ
+- การเปิดไฟล์/ดาวน์โหลดไฟล์ยังทำงานเหมือนเดิม
+
+## Files Changed
+
+- `src/components/icons.tsx`
+- `src/features/training-records/components/certificate-preview-utils.tsx`
+- `src/features/training-records/components/training-record-certificate-manager.tsx`
+- `src/features/training-records/components/training-record-tables/columns.tsx`
+- `src/features/training-records/components/training-record-tables/training-record-image-preview.tsx`
+- `src/features/training-records/server/training-record-data.ts`
+
+## Preview Logic
+
+1. ดึง certificate ล่าสุดของแต่ละ training record เหมือนเดิม
+2. ถ้า `fileType` เป็นรูปภาพที่รองรับ จะส่ง preview URL กลับมาให้ UI
+3. ถ้า `fileType` ไม่ใช่รูปภาพ จะไม่ส่ง preview URL แต่ยังส่งชนิดไฟล์กลับมาเพื่อใช้แสดง placeholder
+4. ฝั่ง UI ตรวจสอบอีกชั้นว่า:
+   - ถ้าเป็นรูปและโหลดได้ ให้แสดงรูป
+   - ถ้าเป็นรูปแต่โหลดไม่ได้ ให้ fallback เป็น placeholder
+   - ถ้าไม่ใช่รูป ให้แสดง placeholder ทันที
+5. ถ้าไม่มีไฟล์แนบเลย จะแสดง `-`
+
+## Placeholder Design
+
+Placeholder ใช้ไอคอน `Award` จากชุดไอคอนของโปรเจกต์ และมีองค์ประกอบดังนี้:
+
+- ไอคอนใบรับรอง
+- ข้อความ `เกียรติบัตร`
+- ชนิดไฟล์แบบ optional เช่น `PDF`, `DOCX`, `ZIP`
+
+ดีไซน์ใช้กรอบ `border-dashed`, พื้นหลัง muted, และจัดวางกึ่งกลางเพื่อให้ดูสอดคล้องกับ UI เดิมของระบบ
+
+## Supported File Types
+
+Preview รูปภาพ:
+
+- `image/jpeg`
+- `image/jpg`
+- `image/png`
+- `image/gif`
+- `image/webp`
+
+Fallback placeholder:
+
+- `application/pdf`
+- `application/vnd.openxmlformats-officedocument.wordprocessingml.document`
+- `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet`
+- `application/vnd.openxmlformats-officedocument.presentationml.presentation`
+- `application/zip`
+- `application/x-rar-compressed`
+- และไฟล์ชนิดอื่นที่ไม่ใช่รูปภาพ
+
+## Manual Test Checklist
+
+- อัปโหลดไฟล์ `JPG` แล้วตรวจสอบว่า preview แสดงถูกต้อง
+- อัปโหลดไฟล์ `PNG` แล้วตรวจสอบว่า preview แสดงถูกต้อง
+- ตรวจสอบ record ที่มี `GIF` หรือ `WEBP` ว่า preview แสดงถูกต้อง
+- ทำให้ URL รูปภาพไม่ถูกต้อง แล้วตรวจสอบว่าแสดง placeholder แทน broken image
+- ตรวจสอบไฟล์ `PDF` ว่าแสดง placeholder พร้อมชนิดไฟล์
+- ตรวจสอบไฟล์ที่ไม่ใช่รูปภาพอื่น เช่น `DOCX`, `XLSX`, `PPTX`, `ZIP`, `RAR` ว่าแสดง placeholder
+- กดปุ่มเปิดไฟล์จากรายการเอกสารแนบ และตรวจสอบว่าเปิดไฟล์ได้
+- ตรวจสอบหน้าตาราง Training Records
+- ตรวจสอบหน้ารายละเอียด Training Record
+- ตรวจสอบรายการเอกสารแนบใน Certificate Manager
+
+## Known Limitations
+
+- UI สำหรับอัปโหลดไฟล์ยังคงจำกัดชนิดไฟล์ตาม validation เดิมของระบบ; งานนี้โฟกัสที่ preview/fallback behavior เป็นหลัก
+- Placeholder แสดงชนิดไฟล์จาก MIME type ที่ระบบมีอยู่ ถ้าแหล่งข้อมูลส่ง MIME type แปลกหรือไม่ครบ อาจแสดง label ได้ไม่สมบูรณ์