You are a Senior React/Next.js Engineer.

Project:
Training Management System (TMS)

Current task:
Improve certificate preview fallback behavior.

Requirements:

1. If uploaded certificate is an image:
   - jpg
   - jpeg
   - png
   - gif
   - webp

   Show image preview.

2. If image cannot be loaded:
   - broken image
   - 404
   - invalid url

   Show certificate placeholder icon.

3. If uploaded file is not an image:
   - pdf
   - docx
   - xlsx
   - pptx
   - zip
   - rar

   Show certificate placeholder icon.

4. Use Lucide icon:

Preferred:

- Award

Fallback:

- GraduationCap
- FileBadge
- FileCheck

5. Placeholder UI should contain:

- Icon
- Text:
  "เกียรติบัตร"

- Optional file type

Example:

🏆

เกียรติบัตร
PDF

6. Never display broken image icons.

7. Download/Open certificate action must still work.

8. Apply to:

- Training History
- Training Detail
- Training Record Table

Files likely involved:

src/features/training-records/components/\*
src/features/training-records/components/training-record-view-page.tsx
src/features/training-records/components/training-record-certificate-manager.tsx
src/features/training-records/components/training-record-tables/columns.tsx

Output:

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

Include:

1. Summary
2. Files Changed
3. Preview Logic
4. Placeholder Design
5. Supported File Types
6. Manual Test Checklist
7. Known Limitations