99 lines
2.1 KiB
Markdown
99 lines
2.1 KiB
Markdown
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:
|
|
|
|
- pdf
|
|
- 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.
|