1.4 KiB
You are a Senior React/Next.js Engineer.
Project: Training Management System (TMS)
Current task: Improve certificate preview fallback behavior.
Requirements:
-
If uploaded certificate is an image:
- jpg
- jpeg
- png
- gif
- webp
Show image preview.
-
If image cannot be loaded:
- broken image
- 404
- invalid url
Show certificate placeholder icon.
-
If uploaded file is not an image:
- docx
- xlsx
- pptx
- zip
- rar
Show certificate placeholder icon.
-
Use Lucide icon:
Preferred:
- Award
Fallback:
- GraduationCap
- FileBadge
- FileCheck
- Placeholder UI should contain:
-
Icon
-
Text: "เกียรติบัตร"
-
Optional file type
Example:
🏆
เกียรติบัตร PDF
-
Never display broken image icons.
-
Download/Open certificate action must still work.
-
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:
- Summary
- Files Changed
- Preview Logic
- Placeholder Design
- Supported File Types
- Manual Test Checklist
- Known Limitations