94 lines
1.4 KiB
Markdown
94 lines
1.4 KiB
Markdown
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
|