Add /api/attendance/status_texts endpoint; dynamic status filter in Attendance List (filter by status_text LIKE)

frontend/src/pages/attendance/List.jsx

@@ -17,15 +17,24 @@ export default function AttendanceList() {
   const [staffFilter, setStaffFilter] = useState('')
   const [statusFilter, setStatusFilter] = useState('')
   const [page, setPage] = useState(1)
+  const [statusOptions, setStatusOptions] = useState([])
   const perPage = 50
 
   const [staffList, setStaffList] = useState([])
 
   useEffect(() => {
     fetchRecords()
+    fetchStatusTexts()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [page, sortBy, sortOrder, dateFrom, dateTo, staffFilter, statusFilter, search])
 
+  const fetchStatusTexts = async () => {
+    try {
+      const { data } = await api.get('/api/attendance/status_texts')
+      setStatusOptions(data || [])
+    } catch (e) { console.error('Failed to fetch status texts', e) }
+  }
+
   const fetchRecords = async () => {
     setLoading(true)
     try {
@@ -39,7 +48,7 @@ export default function AttendanceList() {
       if (dateFrom) params.append('date_from', dateFrom)
       if (dateTo) params.append('date_to', dateTo)
       if (staffFilter) params.append('staff', staffFilter)
-      if (statusFilter) params.append('status', statusFilter)
+      if (statusFilter) params.append('status_text', statusFilter)
 
       const { data } = await api.get(`/api/attendance/records?${params}`)
       setRecords(data.records || [])
@@ -175,17 +184,18 @@ export default function AttendanceList() {
           <div className="flex items-center gap-2">
             <span className="text-xs text-slate-500">狀態:</span>
             <select
-              value={statusFilter}
-              onChange={(e) => { setStatusFilter(e.target.value); setPage(1) }}
+              value={statusFilter ? statusFilter : (statusTextFilter || '')}
+              onChange={(e) => {
+                setStatusFilter(e.target.value)
+                setStatusTextFilter('')
+                setPage(1)
+              }}
               className="text-sm border border-slate-300 rounded-md px-2 py-1.5"
             >
               <option value="">全部</option>
-              <option value="normal">正常</option>
-              <option value="late">遲到</option>
-              <option value="early">早退</option>
-              <option value="ot">OT</option>
-              <option value="abnormal">異常</option>
-              <option value="missing">缺勤</option>
+              {statusOptions.map(opt => (
+                <option key={opt} value={opt}>{opt}</option>
+              ))}
             </select>
           </div>