Thai Honda - Smart Factory

# สรุปข้อกำหนด: ระบบแสดง Icon Status บนการ์ดพนักงาน

## ภาพรวม

พัฒนาระบบแสดงไอคอนและป้ายสถานะ (Status Icon & Label) บนการ์ดพนักงานในหน้าเลือกช่างซ่อมบำรุง (AssignMaintenanceSupportDrawer) แทนที่ placeholder "ICON" และ "STATUS" ที่มีอยู่ใน `EmployeeItem` component

## ที่มาของข้อมูลสถานะ

ข้อมูลสถานะมาจาก API (`/call-terminal/employee`) ซึ่ง query จาก DB โดยตรง:

- **is_available** (boolean): `true` = ไม่มีงาน `during work` ที่ active อยู่ (ว่างรับงานได้)

- **is_working** (boolean): `true` = มีงาน `during work` ที่ active และไม่ถูก suspend (กำลังทำงานอยู่)

- **Off Shift**: คำนวณจากกะหมุนเวียน — ดู `ms_shift_pattern_week_detail` ว่าวันนี้พนักงาน (ตาม work_group_id) ทำกะอะไร แล้วเทียบเวลาปัจจุบันกับ `start_ts` / `end_ts` ของกะนั้น

> ⚠️ ปัจจุบัน API ยังไม่มี field `is_off_shift` — ต้องเพิ่ม logic คำนวณจาก `ms_shift_pattern` + `ms_shift_pattern_week_detail` + `ms_shift` (ผ่าน `work_group_id` ของพนักงาน)

### SQL Query ปัจจุบัน (employee.repository.ts)

```sql

-- is_available: ไม่มีงาน during work

NOT EXISTS (

  SELECT 1 FROM mp_request_work_worker mp

  JOIN request_work rw ON rw.id = mp.request_work_id

  WHERE mp.employee_id = me.id

    AND mp.worker_type = 'employee'

    AND mp.is_active = TRUE

    AND rw.current_status = 'during work'

) AS is_available

-- is_working: มีงาน during work ที่ไม่ถูก suspend

EXISTS (

  SELECT 1 FROM mp_request_work_worker mp

  JOIN request_work rw ON rw.id = mp.request_work_id

  WHERE mp.employee_id = me.id

    AND mp.worker_type = 'employee'

    AND mp.is_active = TRUE

    AND rw.current_status = 'during work'

    AND rw.is_suspension = FALSE

) AS is_working

-- shift_start_ts / shift_end_ts: ดึงจาก ms_shift ผ่าน work_shift_id (กะตายตัว)

CAST(ms.start_ts AS TEXT) AS shift_start_ts,

CAST(ms.end_ts AS TEXT) AS shift_end_ts

-- JOIN: LEFT JOIN ms_shift ms ON ms.id = me.work_shift_id

```

### ปัญหาของ SQL ปัจจุบัน

- `shift_start_ts` / `shift_end_ts` ดึงจาก `ms_shift` ผ่าน `work_shift_id` ตรงๆ

- ใช้ได้แค่กะตายตัว (เช่น กลุ่ม C ที่ทำ 08:00-17:00 ตลอด)

- **ไม่รองรับกะหมุน** — เพราะกลุ่ม A อาจทำกะเช้า (06:00-14:30) สัปดาห์นี้ แต่ทำกะบ่าย (14:30-23:00) สัปดาห์หน้า

### Frontend Logic ปัจจุบัน (useInteralAssignMaintenanceDrawer.ts)

- Function `isInShiftRange()` เทียบเวลาปัจจุบันกับ `shift_start_ts`/`shift_end_ts` ที่ได้จาก API

- รองรับกะข้ามวัน (overnight shift) อยู่แล้ว

- **ไม่ต้องแก้ Frontend** ถ้า Backend ส่ง `shift_start_ts`/`shift_end_ts` ที่ถูกต้องมา

### SQL ที่ต้องแก้ (รองรับกะหมุนเวียน)

เปลี่ยนจาก JOIN `ms_shift` ผ่าน `work_shift_id` เป็นคำนวณจาก pattern:

```sql

SELECT

  me.id,

  mct.value AS department_incharge_value,

  me.firstname,

  me.lastname,

  NOT EXISTS (

    SELECT 1

    FROM mp_request_work_worker mp

    JOIN request_work rw ON rw.id = mp.request_work_id

    WHERE mp.employee_id = me.id

      AND mp.worker_type = 'employee'

      AND mp.is_active = TRUE

      AND rw.current_status = 'during work'

  ) AS is_available,

  EXISTS (

    SELECT 1

    FROM mp_request_work_worker mp

    JOIN request_work rw ON rw.id = mp.request_work_id

    WHERE mp.employee_id = me.id

      AND mp.worker_type = 'employee'

      AND mp.is_active = TRUE

      AND rw.current_status = 'during work'

  ) AS is_working,

  -- ใหม่: ดึง shift_start_ts / shift_end_ts จากกะหมุนเวียน

  CAST(rotation_shift.start_ts AS TEXT) AS shift_start_ts,

  CAST(rotation_shift.end_ts AS TEXT) AS shift_end_ts

FROM

  ms_employee me

  LEFT JOIN ms_code_table mct ON mct.id = me.department_incharge

    AND mct.code = 'department_incharge'

  -- ใหม่: JOIN กะหมุนเวียนแทน ms_shift ตรงๆ

  LEFT JOIN ms_work_group wg ON wg.id = me.work_group_id

  LEFT JOIN LATERAL (

    SELECT s.start_ts, s.end_ts

    FROM ms_shift_pattern sp

    JOIN ms_shift_pattern_week_detail d ON d.pattern_id = sp.id

      AND d.work_group_id = wg.id

      AND d.is_active = TRUE

      AND d.is_deleted = FALSE

    JOIN ms_shift s ON s.id = d.shift_id

    WHERE sp.is_active = TRUE

      AND sp.is_deleted = FALSE

      AND d.week_no = (

        FLOOR(

          ((CURRENT_DATE - sp.anchor_date) % sp.cycle_days)::int / 7

        ) + 1

      )

    LIMIT 1

  ) rotation_shift ON TRUE

WHERE

  me.is_active = TRUE

  AND me.is_deleted = FALSE

ORDER BY

  me.firstname;

```

**หลักการ:**

1. JOIN `ms_work_group` ผ่าน `work_group_id` ของพนักงาน

2. ใช้ LATERAL subquery คำนวณ week_no จาก `anchor_date` + `cycle_days`

3. ดึง `start_ts`/`end_ts` ของกะที่กลุ่มนั้นทำในสัปดาห์นั้น

4. Frontend ใช้ `isInShiftRange()` เหมือนเดิม — ไม่ต้องแก้

### ตรรกะ Off Shift (ต้องแก้ใหม่ — รองรับกะหมุนเวียน)

**เดิม (กะตายตัว):**

```

Off Shift = เวลาปัจจุบัน ไม่อยู่ในช่วง ms_shift.start_ts ~ ms_shift.end_ts

            ของกะที่ผูกกับพนักงาน (ms_employee.work_shift_id → ms_shift.id)

```

**ใหม่ (รองรับกะหมุนเวียน):**

```

1. ดู work_group_id ของพนักงาน → ได้กลุ่ม (เช่น A)

2. ดึง ms_shift_pattern ที่ active → ได้ anchor_date, cycle_days

3. คำนวณ week_no = floor(((วันนี้ - anchor_date) % cycle_days) / 7) + 1

4. ดู ms_shift_pattern_week_detail WHERE week_no = ค่าที่คำนวณ AND work_group_id = กลุ่มพนักงาน

   → ได้ shift_id (เช่น MORNING)

5. ดู ms_shift → ได้ start_ts / end_ts (เช่น 06:00-14:30)

6. เทียบเวลาปัจจุบันกับ start_ts ~ end_ts

7. ถ้าไม่อยู่ในช่วง → is_off_shift = true

```

**SQL ใหม่ (concept):**

```sql

-- คำนวณ is_off_shift จากกะหมุนเวียน

WITH current_pattern AS (

    SELECT id, anchor_date, cycle_days

    FROM ms_shift_pattern

    WHERE is_active = true AND is_deleted = false

    LIMIT 1

),

current_week AS (

    SELECT 

        floor(((CURRENT_DATE - cp.anchor_date) % cp.cycle_days) / 7) + 1 AS week_no,

        cp.id AS pattern_id

    FROM current_pattern cp

)

SELECT 

    me.id AS employee_id,

    CASE 

        WHEN CURRENT_TIME NOT BETWEEN s.start_ts AND s.end_ts THEN true

        ELSE false

    END AS is_off_shift

FROM ms_employee me

JOIN ms_work_group wg ON wg.id = me.work_group_id

JOIN current_week cw ON true

JOIN ms_shift_pattern_week_detail d 

    ON d.pattern_id = cw.pattern_id

    AND d.week_no = cw.week_no

    AND d.work_group_id = wg.id

    AND d.is_active = true

    AND d.is_deleted = false

JOIN ms_shift s ON s.id = d.shift_id

WHERE me.id = :employee_id;

```

> ⚠️ กรณีกะดึก (NIGHT: 23:00-06:00) ที่ข้ามวัน ต้องจัดการ logic เพิ่ม:

> `CURRENT_TIME >= start_ts OR CURRENT_TIME <= end_ts` (แทนที่จะใช้ BETWEEN)

## เลย์เอาต์การ์ดพนักงาน

### โครงสร้างทั่วไป

```

┌─────────────────────────────────┐

│  ชื่อ นามสกุล (bold)        ● ← จุดสี (Status Dot)

│                                 │

│  ⊙ Available                    │  ← ไอคอน + ข้อความสถานะ

└─────────────────────────────────┘

```

- **แถวบน**: ชื่อพนักงาน (ซ้าย) + วงกลมสีทึบ 16x16px (ขวา)

- **แถวล่าง**: ไอคอน 16x16px + ข้อความสถานะ (ชิดซ้าย, gap-2)

### ตัวอย่างการ์ดแต่ละสถานะ

#### ✅ Available (ว่าง) — สีเขียว

```

┌─────────────────────────────────┐

│                                 │

│  Anupong Chaiya             🟢  │  ← bg-green-500

│                                 │

│  ✓ Available                    │  ← CheckCircle + text-green-600

│                                 │

└─────────────────────────────────┘

  border: border-gray-300 (ปกติ)

  bg: bg-white

```

#### 🔧 Working (กำลังทำงาน) — สีน้ำเงิน

```

┌─────────────────────────────────┐

│                                 │

│  Chaiyong Siripong          🔵  │  ← bg-blue-500

│                                 │

│  🕐 Working                     │  ← Clock + text-blue-600

│                                 │

└─────────────────────────────────┘

  border: border-gray-300 (ปกติ)

  bg: bg-white

```

#### 🚫 Off Shift (ไม่อยู่กะ) — สีเทา

```

┌─────────────────────────────────┐

│                                 │

│  Somchai Three              ⚪  │  ← bg-gray-400

│                                 │

│  ⊘ Off Shift                    │  ← MinusCircle + text-gray-400

│                                 │

└─────────────────────────────────┘

  border: border-gray-300 (ปกติ)

  bg: bg-white

```

#### 🔲 เมื่อถูกเลือก (Selected) — ทุกสถานะเหมือนกัน

```

┌═════════════════════════════════┐

│                                 │  ← border-blue-600 (เส้นขอบน้ำเงิน)

│  Sakchai Rattana            🟢  │     bg-blue-50 (พื้นหลังฟ้าอ่อน)

│                                 │

│  ✓ Available                    │

│                                 │

└═════════════════════════════════┘

  border: border-blue-600 (เลือกแล้ว)

  bg: bg-blue-50

```

### ตัวอย่างหน้าจอรวม (Grid 4 คอลัมน์)

```

⚡ Electrician  12

┌──────────────────┐  ┌──────────────────┐  ┌──────────────────┐  ┌──────────────────┐

│ Anupong Chaiya 🟢│  │ Ganya Ratchada 🟢│  │ Sakchai Rattan 🟢│  │ Chaiyong Siri  🔵│

│ ✓ Available      │  │ ✓ Available      │  │ ✓ Available      │  │ 🕐 Working       │

└──────────────────┘  └──────────────────┘  └──────────────────┘  └──────────────────┘

🔧 Mechanic  5

┌──────────────────┐  ┌──────────────────┐  ┌──────────────────┐  ┌──────────────────┐

│ Somchai Three  ⚪│  │ User One       🟢│  │ Prasit Kaew    🔵│  │ Wichai Suk     ⚪│

│ ⊘ Off Shift      │  │ ✓ Available      │  │ 🕐 Working       │  │ ⊘ Off Shift      │

└──────────────────┘  └──────────────────┘  └──────────────────┘  └──────────────────┘

```

### ตัวอย่างปุ่มกรองสถานะ

```

┌───────────────────────────────────────────────────────────────────────────────────┐

│  🔍 Search maintenance staff...     [  All  ] [ Available ] [ Working ] [Off Shift]│

│                                      (red)     (green)       (blue)     (gray)    │

└───────────────────────────────────────────────────────────────────────────────────┘

```

- **All** (แดง): แสดงทุกคน

- **Available** (เขียว): แสดงเฉพาะ `is_available = true` AND `is_off_shift = false`

- **Working** (น้ำเงิน): แสดงเฉพาะ `is_working = true` AND `is_off_shift = false`

- **Off Shift** (เทา): แสดงเฉพาะ `is_off_shift = true`

## สถานะทั้ง 3 แบบ (Priority: Off Shift > Working > Available)

| สถานะ | เงื่อนไข | สี Dot | ไอคอน | ข้อความ | สีข้อความ/ไอคอน |

|---|---|---|---|---|---|

| Off Shift | ไม่อยู่ในเวลากะ (`is_off_shift = true`) | ⚪ bg-gray-400 | MinusCircle | "Off Shift" | text-gray-400 |

| Working | ถูก assign เครื่อง + งานเป็น `during work` (`is_working = true`) | 🔵 bg-blue-500 | Clock | "Working" | text-blue-600 |

| Available | อยู่ในกะ + ไม่ได้ทำงาน (`is_available = true` AND `is_off_shift = false`) | 🟢 bg-green-500 | CheckCircle | "Available" | text-green-600 |

> Priority: ถ้า Off Shift → แสดง Off Shift เสมอ (แม้จะมีงาน assign อยู่)

## ไฟล์ที่เกี่ยวข้อง

### Frontend (Web)

| ไฟล์ | สิ่งที่ต้องทำ |

|---|---|

| `EmployeeItem.tsx` | แทนที่ placeholder ด้วย status dot, icon, label จริง |

| `assign-maintenance.model.ts` | เพิ่ม `is_available`, `is_working`, `is_off_shift` ใน EmployeeRecordData interface |

| `useInteralAssignMaintenanceDrawer.ts` | เพิ่ม filter logic สำหรับ "offShift" โดยใช้ `is_off_shift` |

### Backend (API)

| ไฟล์ | สิ่งที่ต้องทำ |

|---|---|

| `employee.repository.ts` | แก้ SQL คำนวณ `is_off_shift` — เปลี่ยนจากดู `ms_shift` ตรงๆ เป็นคำนวณผ่าน `ms_shift_pattern` + `ms_shift_pattern_week_detail` + `ms_shift` (รองรับกะหมุนเวียน) |

| `employee.model.ts` | เพิ่ม `is_off_shift: boolean` ใน `EmployeeForGroupByWorkType` interface |

## รายการข้อกำหนด (8 ข้อ)

### 1. เพิ่ม/แก้ is_off_shift ใน API (Backend) — รองรับกะหมุนเวียน

- แก้ SQL ใน `employee.repository.ts` เพื่อคำนวณ `is_off_shift` จากกะหมุนเวียน

- Logic ใหม่:

  1. ดึง `work_group_id` ของพนักงาน

  2. ดึง `ms_shift_pattern` ที่ active → ได้ `anchor_date`, `cycle_days`

  3. คำนวณ `week_no` = floor(((วันนี้ - anchor_date) % cycle_days) / 7) + 1

  4. JOIN `ms_shift_pattern_week_detail` ด้วย week_no + work_group_id → ได้ shift_id

  5. JOIN `ms_shift` → ได้ start_ts / end_ts

  6. เทียบเวลาปัจจุบันกับ start_ts ~ end_ts → ถ้าไม่อยู่ในช่วง = Off Shift

- กรณีกะดึก (ข้ามวัน): ใช้ `CURRENT_TIME >= start_ts OR CURRENT_TIME <= end_ts`

- เพิ่ม `is_off_shift: boolean` ใน `EmployeeForGroupByWorkType` interface (API model)

### 2. ขยาย EmployeeRecordData Model (Frontend)

- เพิ่มฟิลด์ `is_available: boolean`, `is_working: boolean`, `is_off_shift: boolean` ใน interface

- ให้ EmployeeItem ใช้งานได้โดยไม่มี type error

### 3. ตรรกะคำนวณสถานะ (Status Derivation Logic)

- `is_off_shift = true` → "offShift" (priority สูงสุด)

- `is_working = true` → "working"

- `is_available = true` AND `is_off_shift = false` → "available"

- Working = ช่างที่ถูก assign เครื่องไว้ + สถานะงาน `during work`

- Off Shift = ไม่อยู่ในเวลาที่ตั้งไว้ใน `ms_shift`

### 4. วงกลมสีสถานะ (Status Dot)

- แสดงจุดกลมทึบ 16x16px ที่มุมขวาบนของการ์ด

- สี: เขียว (available), น้ำเงิน (working), เทา (offShift)

### 5. ไอคอนสถานะ (Status Icon)

- แสดงใต้ชื่อพนักงาน ฝั่งซ้าย ขนาด 16x16px

- ไอคอน: CheckCircle (available), Clock (working), MinusCircle (offShift)

- ใช้ lucide-react

### 6. ข้อความสถานะ (Status Label)

- แสดงคู่กับไอคอน: "Available", "Working", "Off Shift"

- สีตรงกับสถานะ

### 7. เลือกได้ทุกสถานะ — ไม่ล็อก

- พนักงานทุกสถานะ (available, working, offShift) กดเลือกได้หมด

- เมื่อเลือกแล้วแสดง border-blue-600, bg-blue-50 เหมือนกันทุกสถานะ

### 8. ตัวกรอง Off Shift

- เพิ่ม filter logic: เมื่อเลือก "Off Shift" → แสดงเฉพาะพนักงานที่ `is_off_shift = true`

- ปุ่มกรองที่มีอยู่แล้ว: All, Available, Working, Off Shift