feat(auth): user management UI in Settings + GET /api/auth/users

- New: GET /api/auth/users (admin only) returns [{id, email, name, role, is_active}]
- New: 'User Management' card in Settings page
  - Lists all users with role badge (admin/user) and inactive indicator
  - 'Reset Password' button per user
  - Modal: enter new password (>=6 chars), confirm/cancel
  - Toast success / inline error
  - Esc closes modal, click backdrop closes
  - ESC + Enter shortcuts
  - Non-admin (or 403) shows empty state

backend/main.py

@@ -305,6 +305,25 @@ async def reset_password(
         "reset_by": current_user.email,
     }
 
+
+@app.get("/api/auth/users")
+async def list_users(
+    db: Session = Depends(get_db),
+    current_user: User = Depends(get_current_admin),
+):
+    """Admin-only: list all users (id, email, name, role, is_active)."""
+    users = db.query(User).order_by(User.id.asc()).all()
+    return [
+        {
+            "id": u.id,
+            "email": u.email,
+            "name": u.name,
+            "role": u.role,
+            "is_active": u.is_active,
+        }
+        for u in users
+    ]
+
 # ============ Excel File Storage ============
 def get_excel_path(section: str) -> str:
     """Get path to the stored Excel file for a section"""

frontend/src/pages/Settings.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react"
-import { Trash2, AlertTriangle, Shield, Download, Upload, RefreshCw, Database, Info } from "lucide-react"
+import { Trash2, AlertTriangle, Shield, Download, Upload, RefreshCw, Database, Info, KeyRound, User as UserIcon } from "lucide-react"
 import api from "../api"
 import toast from "react-hot-toast"
 
@@ -41,11 +41,68 @@ export default function Settings() {
   const [restoring, setRestoring] = useState(null)
   const [restoreConfirm, setRestoreConfirm] = useState("")
 
+  // User management (admin only)
+  const [users, setUsers] = useState([])
+  const [loadingUsers, setLoadingUsers] = useState(false)
+  const [resetTarget, setResetTarget] = useState(null)
+  const [newPassword, setNewPassword] = useState("")
+  const [resetting, setResetting] = useState(false)
+  const [resetError, setResetError] = useState(null)
+
   useEffect(() => {
     fetchVersion()
     fetchBackups()
+    fetchUsers()
   }, [])
 
+  const fetchUsers = async () => {
+    setLoadingUsers(true)
+    try {
+      const { data } = await api.get("/api/auth/users")
+      setUsers(data || [])
+    } catch (e) {
+      // 403 if not admin — leave list empty
+      setUsers([])
+    } finally {
+      setLoadingUsers(false)
+    }
+  }
+
+  const openResetDialog = (u) => {
+    setResetTarget(u)
+    setNewPassword("")
+    setResetError(null)
+  }
+
+  const closeResetDialog = () => {
+    if (resetting) return
+    setResetTarget(null)
+    setNewPassword("")
+    setResetError(null)
+  }
+
+  const handleResetPassword = async () => {
+    if (!resetTarget || !newPassword) return
+    if (newPassword.length < 6) {
+      setResetError("密碼至少需要 6 個字元")
+      return
+    }
+    setResetting(true)
+    setResetError(null)
+    try {
+      await api.post("/api/auth/reset-password", {
+        email: resetTarget.email,
+        new_password: newPassword,
+      })
+      toast.success(`已重設 ${resetTarget.email} 嘅密碼`)
+      closeResetDialog()
+    } catch (e) {
+      setResetError(e.response?.data?.detail || e.message)
+    } finally {
+      setResetting(false)
+    }
+  }
+
   const fetchVersion = async () => {
     try {
       const { data } = await api.get("/api/version")
@@ -273,6 +330,122 @@ export default function Settings() {
         )}
       </div>
 
+      {/* User Management — admin only */}
+      <div className="bg-white border border-slate-200 rounded-xl overflow-hidden">
+        <div className="px-5 py-4 border-b border-slate-100 bg-slate-50">
+          <div className="flex items-center gap-2">
+            <UserIcon className="w-5 h-5 text-slate-600" />
+            <h2 className="text-lg font-semibold text-slate-800">使用者管理 User Management</h2>
+          </div>
+          <p className="text-sm text-slate-500 mt-1">
+            重設使用者密碼。Admin 限。
+          </p>
+        </div>
+
+        <div className="divide-y divide-slate-100">
+          {loadingUsers && (
+            <div className="px-5 py-6 text-sm text-slate-400 text-center">載入中…</div>
+          )}
+          {!loadingUsers && users.length === 0 && (
+            <div className="px-5 py-6 text-sm text-slate-400 text-center">
+              沒有使用者（或你唔係 admin）
+            </div>
+          )}
+          {!loadingUsers && users.map((u) => (
+            <div key={u.id} className="px-5 py-3 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+              <div className="flex items-center gap-3 min-w-0">
+                <div className="w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center shrink-0">
+                  <UserIcon className="w-4 h-4 text-slate-500" />
+                </div>
+                <div className="min-w-0">
+                  <div className="text-sm font-medium text-slate-800 truncate">
+                    {u.name || u.email}
+                  </div>
+                  <div className="text-xs text-slate-500 truncate">
+                    {u.email}
+                    <span className={`ml-2 inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold ${
+                      u.role === 'admin' ? 'bg-purple-100 text-purple-700' : 'bg-slate-100 text-slate-600'
+                    }`}>
+                      {u.role}
+                    </span>
+                    {!u.is_active && (
+                      <span className="ml-1 inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-red-100 text-red-700">
+                        inactive
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </div>
+              <button
+                onClick={() => openResetDialog(u)}
+                className="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-slate-700 bg-white border border-slate-300 hover:bg-slate-50 hover:border-slate-400 rounded-md transition-colors"
+              >
+                <KeyRound className="w-3.5 h-3.5" />
+                重設密碼
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Reset Password Modal */}
+      {resetTarget && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4" onClick={closeResetDialog}>
+          <div
+            className="bg-white rounded-xl shadow-2xl w-full max-w-md overflow-hidden"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="px-6 py-4 border-b border-slate-100">
+              <h3 className="text-lg font-semibold text-slate-900">重設密碼</h3>
+              <p className="text-sm text-slate-500 mt-1">
+                為 <span className="font-mono text-slate-700">{resetTarget.email}</span> 設定新密碼
+              </p>
+            </div>
+            <div className="px-6 py-5 space-y-3">
+              <label className="block text-sm font-medium text-slate-700">
+                新密碼
+                <input
+                  type="text"
+                  value={newPassword}
+                  onChange={(e) => {
+                    setNewPassword(e.target.value)
+                    setResetError(null)
+                  }}
+                  placeholder="至少 6 個字元"
+                  className="mt-1.5 block w-full px-3 py-2 text-sm border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  autoFocus
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') handleResetPassword()
+                    if (e.key === 'Escape') closeResetDialog()
+                  }}
+                />
+              </label>
+              {resetError && (
+                <div className="text-sm text-red-700 bg-red-50 border border-red-200 rounded-md px-3 py-2">
+                  ❌ {resetError}
+                </div>
+              )}
+            </div>
+            <div className="px-6 py-3 bg-slate-50 border-t border-slate-100 flex items-center justify-end gap-2">
+              <button
+                onClick={closeResetDialog}
+                disabled={resetting}
+                className="px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100 rounded-md transition-colors disabled:opacity-50"
+              >
+                取消
+              </button>
+              <button
+                onClick={handleResetPassword}
+                disabled={resetting || !newPassword}
+                className="flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:bg-slate-300 disabled:cursor-not-allowed rounded-md transition-colors"
+              >
+                {resetting ? "重設中…" : "確認重設"}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Danger Zone */}
       <div className="bg-white border border-red-200 rounded-xl overflow-hidden">
         <div className="px-5 py-4 border-b border-red-100 bg-red-50/50">