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