今天是鐵人賽 Day22，目標是完成管理者後台頁面（AdminDashboard），包含商品管理與會員管理顯示功能。

1️⃣ 前端 AdminDashboard.jsx
今天完成管理者後台頁面，整合商品管理與會員管理區塊，主要功能如下：
商品管理
顯示商品名稱、價格、庫存狀態。
管理員可刪除商品，刪除後列表即時更新。
商品圖片顯示方式與 Home.jsx 保持一致，無圖片則顯示灰色背景與文字提示。
按鈕整合 hover 效果與顏色區分。

<button
  className="flex-1 py-2 rounded text-center transition"
  style={{ backgroundColor: "#FF5C5C", color: "#fff" }}
  onMouseOver={(e) => (e.currentTarget.style.backgroundColor = "#e04b4b")}
  onMouseOut={(e) => (e.currentTarget.style.backgroundColor = "#FF5C5C")}
  onClick={() => handleDeleteProduct(p._id)}
>
  刪除
</button>

2️⃣ 會員管理
列出會員名稱、電子郵件與角色。
顯示非管理員會員「升級管理員」按鈕（可觸發升級操作）。
管理員可檢視會員清單。

<td className="p-2 text-center flex justify-center gap-2">
  {u.role !== "admin" && (
    <>
      <button
        onClick={() => handleUpgradeUser(u._id)}
        className="bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded"
      >
        升級管理員
      </button>
      <button
        onClick={() => handleDeleteUser(u._id)}
        className="bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded"
      >
        刪除會員
      </button>
    </>
  )}
</td>

3️⃣ 功能重點
前端串接 API：使用 axios 與後端商品/會員接口連線。
登入狀態判斷：未登入或非管理員時導向 Profile。
操作反饋：商品刪除後即時更新列表、會員升級有提示訊息。
UI 整合：商品與會員列表卡片分區顯示，按鈕有 hover 效果，整體配色與 Home.jsx 保持一致。

4️⃣ 測試流程
登入管理員 → 進入後台
商品刪除 → 列表即時更新
會員列表顯示 → 可升級管理員或刪除操作

🐛 遇到的問題與解決
問題：非管理員也可進入後台頁面
解決：前端 useEffect 驗證身份，非管理員導向 Profile，並提供提示訊息

💡 Day22 收穫

• 完成管理者後台頁面 AdminDashboard
• 前端成功串接後端商品與會員 API
• 商品管理與會員管理整合顯示與操作
• 提升管理者操作便利性與資料呈現效果