Bump version 1.2.0 → 1.3.0

Status & filter improvements consolidated:
- StatusBadge: 5 basic categories + leave suffix chip
- Backend filter: enrich-then-filter so badges match result set
- 請假/公假 filter: also match leave/holiday suffix in status_text
- Rest day detection: roster rest weekday → 休息 (not 缺勤)

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "aars-frontend",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "aars-frontend",
-      "version": "1.0.0",
+      "version": "1.2.0",
       "dependencies": {
         "axios": "^1.7.7",
         "lucide-react": "^0.441.0",

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aars-frontend",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.3.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/components/StatusBadge.jsx

@@ -1,26 +1,30 @@
-import { CheckCircle, AlertCircle, Clock, X, AlertTriangle, Briefcase, Stethoscope, Timer, PartyPopper } from 'lucide-react'
+import { CheckCircle, AlertCircle, CalendarX, Palmtree, Briefcase, Coffee } from 'lucide-react'
 
 /**
  * Reusable status badge for attendance records.
- * Handles all status codes including enriched leave types:
- *   normal / late / late_early / late_ot / early / early_ot / ot / abnormal / missing
- *   holiday / al / sl / cl / mixed_leave
+ * Simplified to BASIC status categories — no detailed breakdowns.
+ *
+ * Status mapping (driven by backend status_code / status_text):
+ *   - missing   → 缺勤 (grey)
+ *   - holiday   → 公假 (indigo)
+ *   - al / sl / cl / mixed_leave → 請假 (violet)
+ *   - normal    → 正常 (green)
+ *   - everything else (late/early/ot/abnormal/late_early/...) → 異常 (orange)
+ *
+ * If status_text carries a leave/holiday suffix (e.g. '+ SL2h', '🎉香港…'),
+ * a small secondary chip is rendered next to the main badge so the list page
+ * shows the underlying leave/holiday detail without expanding the row.
  *
  * Props:
  *   - code: status_code string
- *   - text: status_text string (already enriched)
+ *   - text: status_text string (fallback signal + suffix source)
  *   - size: 'sm' | 'md' (default 'sm')
  */
-export default function StatusBadge({ code, text = '', size = 'sm' }) {
+export default function StatusBadge({ code = '', text = '', size = 'sm' }) {
   const sizeCls = size === 'md'
     ? 'px-3 py-1 text-sm'
     : 'px-2 py-0.5 text-xs'
 
-  // Split text into main + leave parts (after ' + ' separator)
-  const parts = text.split(/\s*\+\s*/).filter(Boolean)
-  const mainText = parts[0] || ''
-  const leaveParts = parts.slice(1)
-
   const badge = (icon, label, colorCls) => (
     <span className={`inline-flex items-center gap-1 ${sizeCls} rounded-full font-medium ${colorCls}`}>
       {icon}
@@ -28,97 +32,71 @@ export default function StatusBadge({ code, text = '', size = 'sm' }) {
     </span>
   )
 
-  // ============ Attendance status badges ============
-  if (code === 'normal') {
-    return (
-      <span className="inline-flex items-center gap-1.5">
-        {badge(<CheckCircle size={12} />, mainText || '正常', 'bg-green-100 text-green-700')}
-        {leaveParts.map((lp, i) => (
-          <span key={i} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-slate-100 text-slate-600">
-            + {lp}
-          </span>
-        ))}
-      </span>
-    )
-  }
-  if (code === 'late' || code === 'late_early' || code === 'late_ot') {
-    return (
-      <span className="inline-flex items-center gap-1.5">
-        {badge(<AlertCircle size={12} />, mainText || code, 'bg-orange-100 text-orange-700')}
-        {leaveParts.map((lp, i) => (
-          <span key={i} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-slate-100 text-slate-600">
-            + {lp}
-          </span>
-        ))}
-      </span>
-    )
-  }
-  if (code === 'early' || code === 'early_ot') {
-    return (
-      <span className="inline-flex items-center gap-1.5">
-        {badge(<Clock size={12} />, mainText || code, 'bg-blue-100 text-blue-700')}
-        {leaveParts.map((lp, i) => (
-          <span key={i} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-slate-100 text-slate-600">
-            + {lp}
-          </span>
-        ))}
-      </span>
-    )
-  }
-  if (code === 'ot') {
-    return (
-      <span className="inline-flex items-center gap-1.5">
-        {badge(<Clock size={12} />, mainText || '加班', 'bg-purple-100 text-purple-700')}
-        {leaveParts.map((lp, i) => (
-          <span key={i} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-slate-100 text-slate-600">
-            + {lp}
-          </span>
-        ))}
-      </span>
-    )
-  }
-  if (code === 'abnormal') {
-    return (
-      <span className="inline-flex items-center gap-1.5">
-        {badge(<AlertTriangle size={12} />, mainText || '⚠️異常', 'bg-red-100 text-red-700')}
-        {leaveParts.map((lp, i) => (
-          <span key={i} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-slate-100 text-slate-600">
-            + {lp}
-          </span>
-        ))}
-      </span>
-    )
-  }
-  if (code === 'missing') {
-    return (
-      <span className="inline-flex items-center gap-1.5">
-        {badge(<X size={12} />, '缺勤', 'bg-gray-200 text-gray-600')}
-        {leaveParts.map((lp, i) => (
-          <span key={i} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs bg-slate-100 text-slate-600">
-            {lp}
-          </span>
-        ))}
-      </span>
-    )
+  // Extract leave suffix from status_text (holiday suffix dropped — the main
+  // badge already says 公假, so repeating the long name like
+  // '香港特別行政區成立紀念日' clutters the row).
+  //   '異常-遲到48分 + SL2h' → ['SL2h']
+  //   'OT3分 + AL4h + SL3h' → ['AL4h', 'SL3h']
+  //   '正常 + CL4h' → ['CL4h']
+  const t = String(text || '')
+  const noteParts = []
+  const split = t.split(' + ').map(s => s.trim())
+  if (split.length > 1) {
+    for (let i = 1; i < split.length; i++) {
+      noteParts.push(split[i].replace(/^\(|\)$/g, '').trim())
+    }
   }
 
-  // ============ Enriched leave status badges ============
-  if (code === 'holiday') {
-    return badge(<PartyPopper size={12} />, mainText, 'bg-amber-100 text-amber-700')
-  }
-  if (code === 'al') {
-    return badge(<Briefcase size={12} />, mainText || '年假', 'bg-emerald-100 text-emerald-700')
-  }
-  if (code === 'sl') {
-    return badge(<Stethoscope size={12} />, mainText || '病假', 'bg-pink-100 text-pink-700')
-  }
-  if (code === 'cl') {
-    return badge(<Timer size={12} />, mainText || '補鐘', 'bg-indigo-100 text-indigo-700')
-  }
-  if (code === 'mixed_leave') {
-    return badge(<Timer size={12} />, mainText || '混合假', 'bg-fuchsia-100 text-fuchsia-700')
+  const noteChips = noteParts.filter(Boolean).map((part, idx) => {
+    const cls = 'bg-violet-50 text-violet-600 border border-violet-200'
+    return (
+      <span
+        key={idx}
+        className={`inline-flex items-center ${sizeCls} rounded-full font-normal ${cls}`}
+        title={part}
+      >
+        +{part}
+      </span>
+    )
+  })
+
+  const wrap = (content) => (
+    <span className="inline-flex items-center gap-1 flex-wrap">
+      {content}
+      {noteChips}
+    </span>
+  )
+
+  const c = String(code || '').toLowerCase()
+
+  // 缺勤 (missing)
+  if (c === 'missing' || t === '缺勤') {
+    return wrap(badge(<CalendarX size={12} />, '缺勤', 'bg-gray-200 text-gray-700'))
   }
 
-  // fallback
-  return <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs text-slate-500 bg-slate-100`}>{text || code || '-'}</span>
+  // 休息 (rest day — roster says not scheduled, employee didn't clock in)
+  if (c === 'rest' || t === '休息') {
+    return wrap(badge(<Coffee size={12} />, '休息', 'bg-slate-100 text-slate-600'))
+  }
+
+  // 公假 (holiday)
+  if (c === 'holiday' || t.includes('公假') || t.includes('🏖️')) {
+    return wrap(badge(<Palmtree size={12} />, '公假', 'bg-indigo-100 text-indigo-700'))
+  }
+
+  // 請假 (any leave type)
+  if (['al', 'sl', 'cl', 'mixed_leave'].includes(c)
+      || t.includes('年假') || t.includes('病假') || t.includes('補鐘')
+      || t.includes('混合假')) {
+    return wrap(badge(<Briefcase size={12} />, '請假', 'bg-violet-100 text-violet-700'))
+  }
+
+  // 正常 (only when status_code is 'normal' — text suffix like '+ CL4h' is allowed,
+  // we still want to flag it as 正常 first since the employee did clock in/out normally)
+  if (c === 'normal') {
+    return wrap(badge(<CheckCircle size={12} />, '正常', 'bg-green-100 text-green-700'))
+  }
+
+  // 異常 (late/early/ot/abnormal/late_early/late_ot/early_ot/...)
+  return wrap(badge(<AlertCircle size={12} />, '異常', 'bg-orange-100 text-orange-700'))
 }

frontend/src/pages/List.jsx

@@ -2,7 +2,8 @@ import { useState, useEffect, useMemo } from 'react'
 import { Link } from 'react-router-dom'
 import api from '../../api'
 import toast from 'react-hot-toast'
-import { Search, Eye, ChevronUp, ChevronDown, Filter, X, AlertCircle, Clock, FileCode } from 'lucide-react'
+import { Search, Eye, ChevronUp, ChevronDown, Filter, X, FileCode } from 'lucide-react'
+import StatusBadge from '../components/StatusBadge'
 
 const handleExportHTML = (section) => {
   const token = localStorage.getItem('aars_token')
@@ -18,23 +19,22 @@ export default function AttendanceList() {
   const [search, setSearch] = useState('')
   const [sortKey, setSortKey] = useState(null)
   const [sortDir, setSortDir] = useState('asc')
-  const [filterKey, setFilterKey] = useState('')
-  const [filterValue, setFilterValue] = useState('')
-  const [latenessRecords, setLatenessRecords] = useState([])
+  const [statusFilter, setStatusFilter] = useState('')
 
   useEffect(() => {
     fetchRecords()
-    fetchLateness()
-  }, [])
+  }, [statusFilter])
 
   const fetchRecords = async () => {
     setLoading(true)
     try {
-      const { data } = await api.get('/api/attendance?page=1&page_size=1000')
-      setRecords(data.data || [])
+      const params = { page: 1, per_page: 1000 }
+      if (statusFilter) params.status_text = statusFilter
+      const { data } = await api.get('/api/attendance/records', { params })
+      setRecords(data.records || [])
       
-      if (data.data && data.data.length > 0) {
-        const keys = Object.keys(data.data[0]).filter(k => k !== '_row')
+      if (data.records && data.records.length > 0) {
+        const keys = Object.keys(data.records[0]).filter(k => k !== '_row')
         setHeaders(keys)
       }
     } catch (err) {
@@ -44,37 +44,10 @@ export default function AttendanceList() {
     }
   }
 
-  const fetchLateness = async () => {
-    try {
-      const { data } = await api.get('/api/attendance/lateness/records')
-      setLatenessRecords(data || [])
-    } catch (err) {
-      console.error('Failed to load lateness data:', err)
-    }
-  }
-
-  // Create a map of late records for quick lookup
-  const latenessMap = useMemo(() => {
-    const map = {}
-    latenessRecords.forEach(rec => {
-      const key = `${rec.staff}-${rec.date}`
-      map[key] = rec
-    })
-    return map
-  }, [latenessRecords])
-
-  // Filtered and sorted data
+  // Filtered and sorted data (client-side: search + sort only; status handled by backend)
   const processedData = useMemo(() => {
     let result = [...records]
     
-    // Filter
-    if (filterKey && filterValue) {
-      result = result.filter(r => {
-        const val = String(r[filterKey] || '').toLowerCase()
-        return val.includes(filterValue.toLowerCase())
-      })
-    }
-    
     // Search
     if (search) {
       const searchLower = search.toLowerCase()
@@ -104,7 +77,7 @@ export default function AttendanceList() {
     }
     
     return result
-  }, [records, search, sortKey, sortDir, filterKey, filterValue])
+  }, [records, search, sortKey, sortDir])
 
   const handleSort = (key) => {
     if (sortKey === key) {
@@ -115,42 +88,11 @@ export default function AttendanceList() {
     }
   }
 
-  const handleFilter = (key) => {
-    setFilterKey(key)
-    setFilterValue('')
-  }
-
-  const clearFilter = () => {
-    setFilterKey('')
-    setFilterValue('')
-  }
-
   const getSortIcon = (key) => {
     if (sortKey !== key) return null
     return sortDir === 'asc' ? <ChevronUp size={14} /> : <ChevronDown size={14} />
   }
 
-  // Get lateness info for a record
-  const getLatenessInfo = (record) => {
-    // Find staff name and date columns
-    const staffKey = Object.keys(record).find(k => 
-      k.toLowerCase().includes('staff') || k.toLowerCase().includes('name') || k.toLowerCase().includes('員工')
-    )
-    const dateKey = Object.keys(record).find(k => 
-      k.toLowerCase().includes('date') || k.toLowerCase().includes('日期')
-    )
-    
-    if (!staffKey || !dateKey) return null
-    
-    const staff = record[staffKey]
-    const date = record[dateKey]
-    
-    if (!staff || !date) return null
-    
-    const key = `${staff}-${String(date).slice(0, 10)}`
-    return latenessMap[key]
-  }
-
   return (
     <div className="space-y-4">
       {/* Header */}
@@ -188,43 +130,38 @@ export default function AttendanceList() {
             />
           </div>
           
-          {/* Column Filter */}
+          {/* Status Filter (basic categories — server-side) */}
           <div className="flex items-center gap-2">
             <Filter size={16} className="text-slate-400" />
             <select
-              value={filterKey}
-              onChange={(e) => handleFilter(e.target.value)}
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value)}
               className="text-sm border border-slate-300 rounded-md px-2 py-2"
             >
-              <option value="">篩選欄位</option>
-              {headers.slice(0, 6).map(h => (
-                <option key={h} value={h}>{h}</option>
-              ))}
+              <option value="">全部狀態</option>
+              <option value="normal">正常</option>
+              <option value="abnormal">異常</option>
+              <option value="missing">缺勤</option>
+              <option value="holiday">公假</option>
+              <option value="leave">請假</option>
             </select>
             
-            {filterKey && (
-              <>
-                <input
-                  type="text"
-                  value={filterValue}
-                  onChange={(e) => setFilterValue(e.target.value)}
-                  placeholder="輸入篩選值..."
-                  className="text-sm border border-slate-300 rounded-md px-2 py-2 w-32"
-                />
-                <button onClick={clearFilter} className="p-1 text-slate-400 hover:text-slate-600">
-                  <X size={16} />
-                </button>
-              </>
+            {statusFilter && (
+              <button
+                onClick={() => setStatusFilter('')}
+                className="p-1 text-slate-400 hover:text-slate-600"
+                title="清除篩選"
+              >
+                <X size={16} />
+              </button>
             )}
           </div>
           
           {/* Result count */}
           <div className="text-sm text-slate-500 py-2">
             {processedData.length} 筆記錄
-            {latenessRecords.length > 0 && (
-              <span className="ml-2 text-orange-600">
-                • {latenessRecords.length} 筆遲到
-              </span>
+            {statusFilter && (
+              <span className="ml-2 text-slate-400">• 已篩選：{statusFilter}</span>
             )}
           </div>
         </div>
@@ -267,46 +204,34 @@ export default function AttendanceList() {
                   </td>
                 </tr>
               ) : (
-                processedData.map((record) => {
-                  const lateInfo = getLatenessInfo(record)
-                  const isLate = lateInfo && lateInfo.minutes_late > 0
-                  
-                  return (
-                    <tr 
-                      key={record._row} 
-                      className={`hover:bg-slate-50 cursor-pointer ${isLate ? 'bg-orange-50' : ''}`}
-                      onClick={() => window.location.href = `/attendance/${record._row}`}
-                    >
-                      <td className="px-3 py-2 text-xs text-slate-400">{record._row}</td>
-                      {headers.slice(0, 6).map(h => (
-                        <td key={h} className="px-3 py-2 text-slate-700 max-w-xs truncate">
-                          {record[h] !== null && record[h] !== undefined ? String(record[h]) : '-'}
-                        </td>
-                      ))}
-                      <td className="px-3 py-2 text-center">
-                        {isLate ? (
-                          <div className="flex items-center justify-center gap-1 text-orange-600" title={`遲到 ${lateInfo.minutes_late} 分鐘`}>
-                            <AlertCircle size={14} />
-                            <span className="text-xs font-medium">{lateInfo.minutes_late}分</span>
-                          </div>
-                        ) : (
-                          <div className="flex items-center justify-center gap-1 text-green-600">
-                            <Clock size={14} />
-                            <span className="text-xs">正常</span>
-                          </div>
-                        )}
+                processedData.map((record) => (
+                  <tr 
+                    key={record._row} 
+                    className="hover:bg-slate-50 cursor-pointer"
+                    onClick={() => window.location.href = `/attendance/${record._row}`}
+                  >
+                    <td className="px-3 py-2 text-xs text-slate-400">{record._row}</td>
+                    {headers.slice(0, 6).map(h => (
+                      <td key={h} className="px-3 py-2 text-slate-700 max-w-xs truncate">
+                        {record[h] !== null && record[h] !== undefined ? String(record[h]) : '-'}
                       </td>
-                      <td className="px-3 py-2 text-right" onClick={(e) => e.stopPropagation()}>
-                        <Link
-                          to={`/attendance/${record._row}`}
-                          className="p-1 text-slate-400 hover:text-primary-600 inline-block"
-                        >
-                          <Eye size={16} />
-                        </Link>
-                      </td>
-                    </tr>
-                  )
-                })
+                    ))}
+                    <td className="px-3 py-2 text-center">
+                      <StatusBadge
+                        code={record.status_code}
+                        text={record.status_text}
+                      />
+                    </td>
+                    <td className="px-3 py-2 text-right" onClick={(e) => e.stopPropagation()}>
+                      <Link
+                        to={`/attendance/${record._row}`}
+                        className="p-1 text-slate-400 hover:text-primary-600 inline-block"
+                      >
+                        <Eye size={16} />
+                      </Link>
+                    </td>
+                  </tr>
+                ))
               )}
             </tbody>
           </table>

frontend/src/pages/Settings.jsx

@@ -18,10 +18,16 @@ const RESET_SECTIONS = [
   },
   {
     key: "holidays",
-    label: "假期 Holidays + Leave",
-    description: "刪除所有公眾假期 + 員工請假記錄",
+    label: "假期 Holidays",
+    description: "刪除所有公眾假期記錄",
     color: "amber",
   },
+  {
+    key: "leaves",
+    label: "請假 Leaves",
+    description: "刪除所有員工請假記錄",
+    color: "lime",
+  },
 ]
 
 export default function Settings() {
@@ -212,6 +218,22 @@ export default function Settings() {
                   >
                     <Upload className="w-3.5 h-3.5" /> 還原
                   </button>
+                  <button
+                    onClick={async () => {
+                      if (!confirm(`確定要刪除 ${b.filename}？`)) return
+                      try {
+                        await api.delete(`/api/admin/backup/${b.filename}`)
+                        toast.success(`已刪除 ${b.filename}`)
+                        fetchBackups()
+                      } catch (e) {
+                        toast.error("刪除失敗: " + (e.response?.data?.detail || e.message))
+                      }
+                    }}
+                    className="flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-red-500 hover:text-red-700 hover:bg-red-50 rounded-md transition-colors"
+                    title="Delete backup"
+                  >
+                    <Trash2 className="w-3.5 h-3.5" /> 刪除
+                  </button>
                 </div>
               </div>
             ))

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 || [])
@@ -78,15 +87,21 @@ export default function AttendanceList() {
   }
 
   const getStatusBadge = (record) => {
+    // StatusBadge now drives from status_code + status_text only (basic 5 categories).
     return <StatusBadge code={record.status_code} text={record.status_text} />
   }
 
   const getRowClass = (code) => {
-    if (code === 'abnormal') return 'bg-red-50 hover:bg-red-100'
-    if (code === 'missing') return 'bg-gray-100 hover:bg-gray-200'
-    if (code === 'late' || code === 'late_early' || code === 'late_ot') return 'bg-orange-50 hover:bg-orange-100'
-    if (code === 'early' || code === 'early_ot') return 'bg-blue-50 hover:bg-blue-100'
-    if (code === 'ot') return 'bg-purple-50 hover:bg-purple-100'
+    // Match the basic-status grouping so highlights line up with the badge.
+    const c = String(code || '').toLowerCase()
+    if (c === 'abnormal' || c === 'late' || c === 'early' || c === 'ot'
+        || c === 'late_early' || c === 'late_ot' || c === 'early_ot') {
+      return 'bg-orange-50 hover:bg-orange-100'
+    }
+    if (c === 'missing') return 'bg-gray-100 hover:bg-gray-200'
+    if (c === 'rest') return 'bg-slate-50 hover:bg-slate-100'
+    if (c === 'holiday') return 'bg-indigo-50 hover:bg-indigo-100'
+    if (['al', 'sl', 'cl', 'mixed_leave'].includes(c)) return 'bg-violet-50 hover:bg-violet-100'
     return 'hover:bg-slate-50'
   }
 
@@ -176,16 +191,16 @@ export default function AttendanceList() {
             <span className="text-xs text-slate-500">狀態:</span>
             <select
               value={statusFilter}
-              onChange={(e) => { setStatusFilter(e.target.value); setPage(1) }}
+              onChange={(e) => {
+                setStatusFilter(e.target.value)
+                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>
 

frontend/src/pages/roster/Roster.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { Upload, CheckCircle, Trash2, Clock, Users } from 'lucide-react'
+import { Upload, CheckCircle, Trash2, Clock, Users, RefreshCw } from 'lucide-react'
 import api from '../../api'
 import toast from 'react-hot-toast'
 
@@ -63,6 +63,21 @@ export default function RosterPage() {
     }
   }
 
+  const handleRecalc = async () => {
+    setLoading(true)
+    try {
+      await Promise.all([
+        api.get('/api/roster/info'),
+        api.get('/api/roster/data').catch(() => ({ data: { headers: [], rows: [] } }))
+      ])
+      toast.success('已重新計算')
+    } catch {
+      toast.error('重新計算失敗')
+    } finally {
+      loadRosterData()
+    }
+  }
+
   if (loading) {
     return <div className="p-8 text-center">載入中...</div>
   }
@@ -106,10 +121,16 @@ export default function RosterPage() {
                 </p>
               </div>
             </div>
-            <button onClick={handleDelete} className="btn-danger">
-              <Trash2 size={16} className="inline mr-1" />
-              刪除
-            </button>
+            <div className="flex gap-2">
+              <button onClick={handleRecalc} className="btn-primary">
+                <RefreshCw size={16} className="inline mr-1" />
+                RECALC
+              </button>
+              <button onClick={handleDelete} className="btn-danger">
+                <Trash2 size={16} className="inline mr-1" />
+                刪除
+              </button>
+            </div>
           </div>
         )}
       </div>