commit

plans/change-certificate-empty-state.md

@@ -0,0 +1,98 @@
+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.