remove unused employee images and update employee data fetching logic

src/components/EmployeeSector.vue

@@ -2,7 +2,7 @@
     <div class="employee-sector">
         <h3 style="color: black;">เลือกพนักงาน</h3>
         <div class="employee-list">
-            <div v-for="employee in employees" :key="employee.id" class="employee-card" draggable="true"
+            <div v-for="employee in employees" :key="employee.EmployeeID" class="employee-card" draggable="true"
                 @dragstart="onDragStart($event, employee)">
                 <!-- ✅ ปิด Drag Default ของรูปภาพ -->
                 <img :src="employee.image || defaultImage" alt="employee" class="employee-image" @dragstart.prevent />
@@ -14,26 +14,29 @@
 
 <script setup lang="ts">
 import type { Employee } from '@/types/Employee'
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
+import { listEmployees } from '@/services/employee'; // ✅ import API
 
-// ข้อมูลพนักงาน 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 employees = ref<Employee[]>([]);
+const defaultImage = '/images/noimage.jpg'; // เพิ่ม `/` ข้างหน้าให้เป็น path root
 
 const onDragStart = (event: DragEvent, employee: Employee) => {
-    event.dataTransfer?.setData('text/plain', JSON.stringify(employee))
-    event.dataTransfer!.effectAllowed = 'move'
+    event.dataTransfer?.setData('text/plain', JSON.stringify(employee));
+    event.dataTransfer!.effectAllowed = 'move';
+};
+
+// ✅ โหลดข้อมูลพนักงานตอน mount
+onMounted(async () => {
+    try {
+        const res = await listEmployees();
+        employees.value = res.map((e) => ({
+            ...e,
+            image: e.image ? `http://localhost:4000/images/emp/${e.image}` : defaultImage,
+        }));
+    } catch (error) {
+        console.error('โหลดพนักงานไม่สำเร็จ', error);
     }
+});
 </script>
 
 <style scoped>

src/stores/employee.ts

+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { Employee } from '@/types/Employee'
+import * as employeeService from '@/services/employee'
+
+export const useEmployeeStore = defineStore('employee', () => {
+  const employees = ref<Employee[]>([])
+  const loading = ref<boolean>(false)
+  const error = ref<string | null>(null)
+
+  const IMAGE_BASE_URL = 'http://localhost:4000/images/emp/'
+  const FALLBACK_IMAGE = '/images/noimage.jpg'
+
+  // ✅ ดึงรายการ Employee ทั้งหมดจาก backend และแปะ path รูป
+  async function fetchEmployees() {
+    loading.value = true
+    error.value = null
+    try {
+      const res = await employeeService.listEmployees()
+      employees.value = res.map((e) => ({
+        ...e,
+        image: e.image ? IMAGE_BASE_URL + e.image : FALLBACK_IMAGE
+      }))
+    } catch (err: any) {
+      error.value = err.message || 'Unknown Error'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // ✅ ดึง Employee รายการเดียว พร้อมแปะ path รูป
+  async function fetchEmployee(id: number): Promise<Employee | null> {
+    loading.value = true
+    error.value = null
+    try {
+      const res = await employeeService.getEmployee(id)
+      return {
+        ...res,
+        image: res.image ? IMAGE_BASE_URL + res.image : FALLBACK_IMAGE
+      }
+    } catch (err: any) {
+      error.value = err.message || 'Unknown Error'
+      return null
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // ✅ สร้าง Employee ใหม่
+  async function addEmployee(payload: Partial<Employee>) {
+    loading.value = true
+    error.value = null
+    try {
+      const newEmployee = await employeeService.createEmployee(payload)
+      newEmployee.image = newEmployee.image ? IMAGE_BASE_URL + newEmployee.image : FALLBACK_IMAGE
+      employees.value.push(newEmployee)
+    } catch (err: any) {
+      error.value = err.message || 'Unknown Error'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // ✅ อัปเดตข้อมูล Employee
+  async function editEmployee(id: number, payload: Partial<Employee>) {
+    loading.value = true
+    error.value = null
+    try {
+      const updated = await employeeService.updateEmployee(id, payload)
+      updated.image = updated.image ? IMAGE_BASE_URL + updated.image : FALLBACK_IMAGE
+
+      const index = employees.value.findIndex((e) => e.EmployeeID === id)
+      if (index !== -1) {
+        employees.value[index] = updated
+      }
+    } catch (err: any) {
+      error.value = err.message || 'Unknown Error'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // ✅ ลบ Employee
+  async function removeEmployee(id: number) {
+    loading.value = true
+    error.value = null
+    try {
+      await employeeService.deleteEmployee(id)
+      employees.value = employees.value.filter((e) => e.EmployeeID !== id)
+    } catch (err: any) {
+      error.value = err.message || 'Unknown Error'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    employees,
+    loading,
+    error,
+    fetchEmployees,
+    fetchEmployee,
+    addEmployee,
+    editEmployee,
+    removeEmployee
+  }
+})

src/types/Employee.ts

 type Gender = 'male' | 'female' | 'others'
 
-type Employee = {
-  id?: number
+export interface Employee {
+  EmployeeID: number // Primary Key (Auto Increment)
   name: string
-  gender?: Gender
-  image?: string
+  gender: Gender
+  age: number
+  mainRole: string
+  secondRole?: string | null
   tel: string
   dailyWageRate: number
+  startDate: string // ใช้เป็น string ในรูปแบบ ISO date เช่น "2024-01-01"
+  image?: string | null
 }
 
-export type { Gender, Employee }
+export type { Gender }