alla-tms/plans/training-attachment.md

Prompt: ปรับปรุงหน้า Create/Edit Training Record สำหรับ Public Training Attachment Requirement

Objective

ปรับปรุงหน้าที่เกี่ยวข้องกับการสร้าง/แก้ไขประวัติการอบรม เพื่อให้กรณีเลือกประเภทการอบรมเป็น อบรมภายนอก (Public Training) ระบบต้องแสดงหมายเหตุสีแดงในส่วน Upload และบังคับให้ผู้ใช้งานแนบไฟล์ประกอบก่อนบันทึก

Scope

ให้ตรวจสอบและปรับปรุงทุกหน้าที่เกี่ยวข้อง เช่น

• training-records/new
• หน้าแก้ไขประวัติการอบรม
• หน้า HRD/Admin ที่สามารถสร้างหรือแก้ไข Training Record ได้
• Component/Form ที่ใช้ร่วมกันกับ Training Record Form

Requirement

1. เงื่อนไขการแสดงหมายเหตุ

เมื่อผู้ใช้เลือกประเภทการอบรมเป็น

• อบรมภายนอก (Public Training)

ให้แสดงข้อความหมายเหตุสีแดงแบบ Dynamic ทันที โดยไม่ต้อง Refresh หน้า

หากเลือกประเภทอื่น ให้ซ่อนข้อความดังกล่าว

2. ตำแหน่งการแสดงผล

ให้แสดงในส่วน Upload ตามลำดับนี้

หัวข้อ Upload

หมายเหตุสีแดง

ช่อง Upload Attachment

3. ข้อความหมายเหตุ

ให้ใช้ข้อความนี้

หมายเหตุ: สำหรับการอบรมภายนอก ผู้ใช้งานจำเป็นต้องแนบใบรับรองการอบรมและแบบรายงานผลการฝึกอบรม/ดูงานภายนอก เพื่อใช้ประกอบการพิจารณา หากไม่แนบเอกสาร HRD อาจตีกลับรายการเพื่อให้ดำเนินการแก้ไข

4. Validation

กรณีเลือกประเภทการอบรมเป็น อบรมภายนอก (Public Training)

ระบบต้องบังคับให้แนบไฟล์ก่อนบันทึก

หากไม่ได้แนบไฟล์ ให้แสดง Validation Error และไม่อนุญาตให้ Submit

5. Attachment Rule

ช่อง Attachment ปัจจุบันรองรับไฟล์:

• PDF
• JPG
• JPEG
• PNG

ให้คงเงื่อนไขเดิมไว้ และปรับให้รองรับการแนบไฟล์ได้หลายไฟล์ ไม่จำกัดจำนวนไฟล์ แต่ขนาดรวม/หรือขนาดไฟล์ต้องไม่เกิน 10 MB ตาม Pattern เดิมของระบบ

ห้ามแก้ไขชนิดไฟล์ที่รองรับโดยไม่จำเป็น

6. UX/UI Requirement

• ข้อความหมายเหตุต้องเป็นสีแดง
• ใช้ Component / Style เดิมของโปรเจกต์ก่อน เช่น FormDescription, Alert, FormMessage, Label, Text, หรือ class ที่มีอยู่
• ต้องรองรับ Responsive
• ต้องรองรับ Dark Mode ถ้าระบบเดิมรองรับ
• ไม่ทำให้ Layout เดิมเสีย
• ข้อความต้องอ่านง่ายและอยู่ใกล้กับช่อง Upload

7. Technical Requirement

ก่อนแก้ไขให้ตรวจสอบก่อนว่าโปรเจกต์ใช้ Form Pattern แบบใด เช่น

• React Hook Form
• TanStack Form
• Zod Validation
• Server Action
• API Route
• Shared Form Component

ให้แก้ไขตาม Pattern เดิมของโปรเจกต์เท่านั้น

ห้ามสร้าง Logic ซ้ำ หากมี Component หรือ Validation Schema ใช้ร่วมกันอยู่แล้ว

8. สิ่งที่ต้องตรวจสอบก่อนแก้ไข

ให้ตรวจสอบไฟล์/ส่วนที่เกี่ยวข้อง เช่น

• Training Record Form Component
• Create Training Record Page
• Edit Training Record Page
• HRD/Admin Training Record Page
• Attachment Upload Component
• Validation Schema
• API/Mutation ที่เกี่ยวข้องกับการบันทึก Training Record
• Type ของ Training Record
• ค่า enum หรือ master data ของ Training Type

ต้องยืนยันให้ได้ว่าค่า Public Training ในระบบถูกเก็บเป็นค่าใด เช่น

PUBLIC_TRAINING
public_training
Public Training
อบรมภายนอก

ห้ามเดาค่าเอง ให้ตรวจสอบจาก Source Code หรือ Database Seed/Master Data ก่อน

Implementation Steps

1. อ่านโครงสร้างเดิมของ Training Record Form
2. ตรวจสอบว่าประเภทการอบรมถูกเก็บและใช้งานอย่างไร
3. ตรวจสอบ Attachment Upload Component เดิม
4. เพิ่ม Dynamic Warning สำหรับ Public Training
5. เพิ่ม Validation บังคับแนบไฟล์เมื่อเลือก Public Training
6. ตรวจสอบการแนบหลายไฟล์และขนาดไม่เกิน 10 MB
7. ทดสอบทุกหน้าที่เกี่ยวข้อง
8. ตรวจสอบ TypeScript, ESLint และ Build
9. สร้างเอกสารรายงานผลการทำงานไว้ในโฟลเดอร์ docs/

Expected Behavior

Case 1: เลือกประเภทอื่นที่ไม่ใช่ Public Training

• ไม่แสดงหมายเหตุสีแดง
• ไม่บังคับแนบ Attachment เพิ่มเติม
• บันทึกได้ตามเงื่อนไขเดิม

Case 2: เลือก Public Training แต่ไม่แนบไฟล์

• แสดงหมายเหตุสีแดง
• Submit ไม่สำเร็จ
• แสดงข้อความแจ้งเตือนว่าจำเป็นต้องแนบไฟล์ประกอบ

Case 3: เลือก Public Training และแนบไฟล์ถูกต้อง

• แสดงหมายเหตุสีแดง
• Submit สำเร็จ
• ไฟล์ Attachment ถูกบันทึกตาม Flow เดิม

Case 4: เลือก Public Training แล้วเปลี่ยนกลับเป็นประเภทอื่น

• ซ่อนหมายเหตุสีแดงทันที
• Validation เรื่อง Attachment ต้องกลับไปใช้เงื่อนไขเดิม

Testing Checklist

ให้ทดสอบอย่างน้อยดังนี้

• หน้า training-records/new
• หน้า Edit Training Record
• หน้า HRD/Admin ที่เกี่ยวข้อง
• เลือก Public Training แล้วข้อความแสดงทันที
• เปลี่ยนจาก Public Training เป็นประเภทอื่นแล้วข้อความหาย
• Public Training ไม่แนบไฟล์แล้ว Submit ไม่ได้
• Public Training แนบไฟล์แล้ว Submit ได้
• แนบไฟล์ PDF ได้
• แนบไฟล์ JPG/JPEG/PNG ได้
• ไฟล์เกิน 10 MB ต้องถูกปฏิเสธ
• Layout ไม่เสียบน Desktop
• Layout ไม่เสียบน Mobile
• ไม่มี TypeScript Error
• ไม่มี ESLint Error
• Build ผ่าน

Report Requirement

หลังดำเนินการเสร็จ ให้สร้างไฟล์เอกสารรายงานผลไว้ในโฟลเดอร์ docs/

ตั้งชื่อไฟล์ประมาณนี้

docs/public-training-attachment-requirement-report.md

ในรายงานต้องมีหัวข้อดังนี้

# Public Training Attachment Requirement Report

## Summary

สรุปสิ่งที่ดำเนินการ

## Files Changed

รายการไฟล์ที่แก้ไข

## Requirement Mapping

Mapping ระหว่าง Requirement กับสิ่งที่แก้ไข

## Implementation Details

รายละเอียดการปรับปรุง Logic/UI/Validation

## Validation Rules

สรุปเงื่อนไข Validation ที่เพิ่ม

## Testing Result

ผลการทดสอบตาม Checklist

## Impact Analysis

ผลกระทบต่อระบบเดิม

## Notes / Limitations

ข้อจำกัดหรือสิ่งที่ควรตรวจสอบเพิ่มเติม

Important Rules

• ห้ามแก้ไขส่วนที่ไม่เกี่ยวข้อง
• ห้ามเปลี่ยน Database Schema หากไม่จำเป็น
• ห้ามเปลี่ยน API Contract เดิมโดยไม่จำเป็น
• ห้ามเปลี่ยน Role Permission เดิม
• ต้องใช้ Pattern เดิมของโปรเจกต์
• ต้องสร้างรายงานไว้ใน docs/ หลังแก้ไขเสร็จ
• หากพบว่า Requirement กระทบหลายจุด ให้สรุปก่อนแก้ไขใน plan.md