Add RECALC button to Roster page to refresh data

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">
+            <div className="flex gap-2">
-              <Trash2 size={16} className="inline mr-1" />
+              <button onClick={handleRecalc} className="btn-secondary">
-              刪除
+                <RefreshCw size={16} className="inline mr-1" />
-            </button>
+                RECALC
+              </button>
+              <button onClick={handleDelete} className="btn-danger">
+                <Trash2 size={16} className="inline mr-1" />
+                刪除
+              </button>
+            </div>
           </div>
         )}
       </div>