StatusBadge: handle missing/holiday/AL/SL/CL/mixed_leave codes; pass status_text to StatusBadge

frontend/src/components/StatusBadge.jsx

@@ -1,4 +1,4 @@
-import { CheckCircle, AlertCircle, Clock, X, AlertTriangle, Briefcase, Stethoscope, Timer, PartyPopper } from 'lucide-react'
+import { CheckCircle, AlertCircle, Clock, X, AlertTriangle, Briefcase, Stethoscope, Timer, PartyPopper, CalendarX, Palmtree } from 'lucide-react'
 
 /**
  * Reusable status badge for attendance records.
@@ -9,9 +9,10 @@ import { CheckCircle, AlertCircle, Clock, X, AlertTriangle, Briefcase, Stethosco
  *   - late: late_minutes number
  *   - early: early_minutes number
  *   - ot: ot_minutes number
+ *   - text: status_text string (used for leave / holiday / mixed)
  *   - size: 'sm' | 'md' (default 'sm')
  */
-export default function StatusBadge({ code, late = 0, early = 0, ot = 0, size = 'sm' }) {
+export default function StatusBadge({ code, late = 0, early = 0, ot = 0, text = '', size = 'sm' }) {
   const sizeCls = size === 'md'
     ? 'px-3 py-1 text-sm'
     : 'px-2 py-0.5 text-xs'
@@ -23,6 +24,36 @@ export default function StatusBadge({ code, late = 0, early = 0, ot = 0, size =
     </span>
   )
 
+  // Missing: show grey 缺勤 badge
+  if (code === 'missing' || text === '缺勤') {
+    return badge(<CalendarX size={12} />, '缺勤', 'bg-gray-200 text-gray-700')
+  }
+
+  // Holiday: show purple 假期 badge
+  if (code === 'holiday' || text === '🏖️公假') {
+    return badge(<Palmtree size={12} />, '公假', 'bg-indigo-100 text-indigo-700')
+  }
+
+  // Annual leave
+  if (code === 'al' || text === '年假 AL') {
+    return badge(<Palmtree size={12} />, '年假 AL', 'bg-pink-100 text-pink-700')
+  }
+
+  // Sick leave
+  if (code === 'sl' || text === '病假 SL') {
+    return badge(<Stethoscope size={12} />, '病假 SL', 'bg-cyan-100 text-cyan-700')
+  }
+
+  // Compensation leave
+  if (code === 'cl' || text === '補鐘 CL') {
+    return badge(<Timer size={12} />, '補鐘 CL', 'bg-amber-100 text-amber-700')
+  }
+
+  // Mixed leave
+  if (code === 'mixed_leave' || text === '混合假') {
+    return badge(<Briefcase size={12} />, '混合假', 'bg-violet-100 text-violet-700')
+  }
+
   const parts = []
 
   // Abnormal (any dimension > 30 min)

frontend/src/pages/attendance/List.jsx

@@ -90,7 +90,7 @@ export default function AttendanceList() {
     const lm = record.late_minutes || 0
     const em = record.early_minutes || 0
     const om = record.ot_minutes || 0
-    return <StatusBadge code={record.status_code} late={lm} early={em} ot={om} />
+    return <StatusBadge code={record.status_code} late={lm} early={em} ot={om} text={record.status_text} />
   }
 
   const getRowClass = (code) => {
@@ -187,10 +187,9 @@ export default function AttendanceList() {
           <div className="flex items-center gap-2">
             <span className="text-xs text-slate-500">狀態:</span>
             <select
-              value={statusFilter ? statusFilter : (statusTextFilter || '')}
+              value={statusFilter}
               onChange={(e) => {
                 setStatusFilter(e.target.value)
-                setStatusTextFilter('')
                 setPage(1)
               }}
               className="text-sm border border-slate-300 rounded-md px-2 py-1.5"