refactor: change Tel to tel in Employee type and add EmployeeSector component

src/components/EmployeeSector.vue

+<template>
+    <div class="employee-sector">
+        <h3>เลือกพนักงาน</h3>
+        <div class="employee-list">
+            <div v-for="employee in employees" :key="employee.id" class="employee-card" draggable="true"
+                @dragstart="onDragStart($event, employee)">
+                <img :src="employee.image || defaultImage" alt="employee" class="employee-image" />
+                <span>{{ employee.name }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Employee } from '@/types/Employee'
+import { ref } from 'vue'
+
+// ข้อมูลพนักงาน Mock (ยังไม่เชื่อม API)
+const employees = ref<Employee[]>([
+    { id: 1, name: 'นก', gender: 'female', image: 'images/em001.jpg', tel: '0812345678', dailyWageRate: 450 },
+    { id: 2, name: 'เจน', gender: 'female', image: 'images/em002.jpg', tel: '0823456789', dailyWageRate: 450 },
+    { id: 3, name: 'เจม', gender: 'male', image: 'images/em003.jpg', tel: '0834567890', dailyWageRate: 450 },
+    { id: 4, name: 'แอน', gender: 'female', image: 'images/em004.jpg', tel: '0845678901', dailyWageRate: 450 },
+    { id: 5, name: 'พิมาย', gender: 'others', image: 'images/em005.jpg', tel: '0856789012', dailyWageRate: 450 },
+    { id: 6, name: 'น้อง', gender: 'male', image: 'images/em006.jpg', tel: '0867890123', dailyWageRate: 450 },
+    { id: 7, name: 'ปุ๊ก', gender: 'female', image: 'images/em007.jpg', tel: '0878901234', dailyWageRate: 450 },
+    { id: 8, name: 'เป้', gender: 'male', image: 'images/em008.jpg', tel: '0889012345', dailyWageRate: 450 }
+]);
+
+const defaultImage = 'images/noimage.jpg' // ใช้รูป default ถ้าไม่มีรูปพนักงาน
+
+const onDragStart = (event: DragEvent, employee: Employee) => {
+    event.dataTransfer?.setData('text/plain', JSON.stringify(employee))
+    event.dataTransfer!.effectAllowed = 'move'
+}
+</script>
+
+<style scoped>
+.employee-sector {
+    padding: 1rem;
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+/* ✅ ใช้ Grid ให้มี 5 คอลัมน์ */
+.employee-list {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    /* 5 คนต่อแถว */
+    gap: 10px;
+    justify-items: center;
+    padding: 10px;
+}
+
+/* ✅ ปรับ Employee Card ให้พอดีกับ Grid */
+.employee-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100px;
+    height: 120px;
+    border: 2px solid #ccc;
+    border-radius: 10px;
+    cursor: grab;
+    background: white;
+    transition: all 0.3s ease;
+}
+
+.employee-card:hover {
+    background: #f0f0f0;
+}
+
+.employee-card:active {
+    cursor: grabbing;
+}
+
+.employee-image {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-bottom: 5px;
+}
+</style>

src/types/Employee.ts

@@ -5,7 +5,7 @@ type Employee = {
   name: string
   gender?: Gender
   image?: string
-  Tel: string
+  tel: string
   dailyWageRate: number
 }