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

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 ได้ไม่สมบูรณ์