commit

plans/change-certificate-preview.md

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