I'll enhance the dynamic form builder with drag and drop functionality so you can easily reorder your form fields.

I've enhanced the dynamic form builder with drag and drop functionality! Here are the new features:

New Drag & Drop Features:

1. Visual Drag Handle: Each field now has a grip icon (⋮⋮) that you can grab to drag
2. Smooth Animations: Fields animate smoothly when being reordered

3. Visual Feedback:

   • Dragged items become semi-transparent
   • Hover effects on drag handles
   • Blue ring appears around dragged items

4. Accessibility:

   • Keyboard navigation support
   • Screen reader friendly
   • Proper ARIA attributes

How to Use Drag & Drop:

1. Mouse: Click and hold the grip icon (⋮⋮) next to any field, then drag it up or down
2. Keyboard: Focus on a field and use arrow keys to move it
3. Touch: On mobile devices, touch and hold the grip icon to drag

Enhanced User Experience:

• Real-time Reordering: The form preview immediately reflects the new field order
• Smooth Transitions: Fields slide smoothly into their new positions
• Visual Cues: Clear indication of what can be dragged
• Responsive Design: Works perfectly on desktop, tablet, and mobile

Technical Implementation:

• Uses @dnd-kit library for modern, accessible drag and drop
• Maintains all existing functionality (add, remove, configure fields)
• Preserves form data during reordering
• Optimized performance with proper React patterns

Now you can easily reorder your form fields by simply dragging them to the desired position! The drag and drop functionality works seamlessly with all the existing features like field configuration, preview mode, and form submission.

ฉันจะปรับปรุง dynamic form builder ให้สามารถเลือกสาขาได้ และเปลี่ยนรูปแบบการแสดงผลเป็น table เพื่อให้ดูง่ายขึ้น

ฉันได้ปรับปรุง Dynamic Form Builder ตามที่คุณต้องการแล้ว!

ฟีเจอร์เลือกสาขาใหม่:

1. Branch Selection Panel: มีพาเนลแยกสำหรับเลือกสาขา
2. สาขาตัวอย่าง: รวมสาขาต่างๆ เช่น สีลม, สุขุมวิท, เชียงใหม่, ภูเก็ต, ขอนแก่น
3. Multiple Selection: สามารถเลือกหลายสาขาพร้อมกันได้
4. Branch Display: แสดงสาขาที่เลือกใน Preview mode
5. Location Info: แสดงที่ตั้งของแต่ละสาขา

รูปแบบ Table ใหม่:

1. Table Layout: เปลี่ยนจากการ์ดเป็น table เพื่อให้ดูข้อมูลได้ง่ายขึ้น

2. Organized Columns:

   • Drag handle
   • ลำดับ (#)
   • ประเภทฟิลด์ (Type)
   • ชื่อแสดง (Label)
   • ชื่อฟิลด์ (Name)
   • Placeholder
   • Properties (Required, Searchable)
   • จำนวน Options
   • Actions (Delete)
3. Color-coded Badges: แต่ละประเภทฟิลด์มีสีที่แตกต่างกัน
4. Compact View: ดูข้อมูลได้มากขึ้นในพื้นที่เดียวกัน
5. Drag & Drop: ยังคงสามารถลากจัดเรียงได้ใน table format

การปรับปรุงอื่นๆ:

1. Responsive Layout: ปรับ layout ให้เหมาะกับหน้าจอขนาดต่างๆ
2. Better Organization: จัดกลุ่ม UI elements ให้เป็นระเบียบมากขึ้น
3. Visual Feedback: เพิ่ม visual cues และ badges เพื่อความชัดเจน
4. Thai Language Support: รองรับภาษาไทยในส่วนของสาขา

ตอนนี้คุณสามารถ:

• เลือกสาขาที่ต้องการแสดง form
• ดู form fields ในรูปแบบ table ที่เป็นระเบียบ
• ลากจัดเรียงฟิลด์ได้ง่ายขึ้น
• ดูข้อมูลฟิลด์ทั้งหมดในมุมมองเดียว