2.1 KiB
2.1 KiB
You are a Senior Frontend Engineer.
Project: Training Management System (TMS)
Current task: Improve certificate attachment display fallback.
Requirement: In the certificate column/card, show a certificate icon placeholder when there is no image preview. If there is no attached file, show the same certificate icon but display "ไม่มีไฟล์แนบ".
Important constraints:
- Do NOT change database schema.
- Do NOT break certificate download/open behavior.
- Keep Thai UI.
- Keep responsive behavior.
- Minimal-impact changes only.
Display rules:
Case 1: Image file exists and preview loads
- Show image preview.
Supported preview image types:
- jpg
- jpeg
- png
- webp
- gif
Case 2: File exists but is not previewable Examples:
- docx
- xlsx
- pptx
- zip
- image preview fails
Show placeholder:
- Certificate icon
- Text: เกียรติบัตร
- File type, e.g. PDF, DOCX, XLSX
Case 3: No file attached Show placeholder:
- Certificate icon
- Text: ไม่มีไฟล์แนบ
Do NOT show:
- broken image icon
- "-"
- empty cell
Recommended icon:
- Award or
- FileBadge or
- FileCheck
UI requirement:
- Same card size for image, PDF, and no attachment states.
- Center icon and text.
- Border should be dashed or light border.
- Text should be small and readable.
- Works inside table cell.
Files likely involved:
- src/features/training-records/components/training-record-certificate-manager.tsx
- src/features/training-records/components/training-record-view-page.tsx
- src/features/training-records/components/training-record-tables/columns.tsx
- src/components/certificate-preview.tsx if exists
Output Review File: Create: docs/management-change-certificate-empty-state-review.md
Manual Test Checklist:
- Image certificate displays preview.
- PDF certificate shows certificate icon and PDF.
- DOCX certificate shows certificate icon and DOCX.
- Broken image shows certificate icon.
- No attachment shows certificate icon and "ไม่มีไฟล์แนบ".
- No table cell displays "-".
- Download/open still works when file exists.
- Mobile/table layout does not break.