在前面的進度中，成功讓數據上傳雲端並畫出了長條圖。但真實的健身房情境是：舉到力竭時手一滑，不小心把 50 公斤輸入成 500 公斤是常有的事。如果不能修改或刪除，圖表瞬間就會變得毫無參考價值！
同時，只看「總重量」是不夠的。健身時我們需要知道自己這週的訓練有沒有偏食——是猛練胸肌，還是有乖乖練腿？今天，我們不僅要補上完整的資料修改與刪除功能，還要導入 Chart.js 的「圓餅圖 (Pie Chart)」，打造一個專業的肌群佔比儀表板！

寫出完整的 CRUD 與圓餅圖儀表板
這個階段的邏輯包含了資料庫的更新 (updateDoc)、刪除 (deleteDoc) 以及圖表型態的轉換，但在Vibe Coding的世界裡，我只要把需求定義清楚，就不必擔心了。

AI Prompt:
@js/services/workout-service.js @js/views/habits-view.js @js/components/chart-bars.js
為 PWA 加入歷史紀錄的「修改/刪除」功能，並將數據頁面升級為包含「圓餅圖」的複合儀表板。
實作要求：
修改與刪除功能 (CRUD)：
在 workout-service.js 實作 updateWorkoutSet(docId, newData) 與 deleteWorkoutSet(docId)。
在歷史紀錄列表中，為每筆資料加上「✏️ 編輯」與「🗑️ 刪除」按鈕，點擊後能觸發對應的 Firebase 操作並重新載入畫面。
圓餅圖肌群分析 (Pie Chart)：
在圖表元件中新增一個圓餅圖渲染函式 renderMusclePieChart()。
讀取 Firebase 數據時，請根據 machine 或訓練項目推算肌群（例如：胸、背、腿、肩），並統計各肌群的訓練組數占比，繪製成深色科技風的圓餅圖。
複合儀表板佈局：
切換到「📊 數據」頁面時，畫面上方顯示「每日總組數/重量」的長條圖，下方顯示「肌群占比」的圓餅圖。
確保兩個圖表在深色模式下都有良好的發光效果與對比度。

輸出結果:

這裡明顯看到出現bug，昨天以長條圖的形式呈現是有內容的，但今天為了修改為圓餅圖，目前遇到了一點小問題，需要除錯。

AI 在程式碼中試圖使用 habitsRoot 這個變數（這通常是用來裝載圖表或頁面內容的 HTML 容器），但它卻把宣告變數的這行代碼（例如 const habitsRoot = document.querySelector(...)）寫在了呼叫它的邏輯之後。程式還沒「認識」這個變數就被逼著拿來用，所以直接罷工崩潰，導致畫面一片空白。

修改指令:
@index.html @js/views/habits-view.js @js/components/chart-bars.js
目前切換到「數據」頁面時，畫面完全是一片空白，圖表沒有顯示出來。
請幫我檢查並修復以下幾點：
HTML結構：確認 @index.html 的數據頁面區塊中，有正確放入長條圖與圓餅圖所需的 標籤（並確認 ID 命名一致）。
套件引入： 確認 @index.html 中有正確引入 Chart.js 的 CDN。
資料庫追蹤： 在撈取 Firebase 資料的函式中加入 console.log("撈取到的資料: ", data)，確認是否有成功抓到。
空資料防護： 如果 Firebase 抓回來的歷史紀錄是空的，請不要讓程式崩潰，而是在畫面上顯示一行優雅的提示文字：「目前還沒有訓練紀錄，趕快去打卡吧！」。

第一次修改後出現了圖表和歷史紀錄，雖然目前放的都是測試資料，但還是有小bug
，就是修改的功能點下去沒有反應，所以又再一次進行修改了。

修改指令:
@js/views/habits-view.js @js/services/workout-service.js
目前歷史紀錄的 UI 已經成功渲染，也有顯示「編輯」與「刪除」按鈕，但點擊後沒有反應或無法成功更新資料。
請幫我修復按鈕的事件綁定與 CRUD 邏輯：
綁定 Document ID： 在動態生成歷史紀錄清單的 HTML 時，請確保將 Firebase 該筆資料的 doc.id 綁定在編輯與刪除按鈕上（例如使用 data-id="${doc.id}"）。
修復事件監聽： 請確認按鈕的點擊事件有正確觸發。建議在歷史紀錄的「外層容器」上使用事件代理 (Event Delegation)，或是確保在 DOM 渲染完成後才進行事件綁定。
實作修改邏輯： 點擊「編輯」時，請先用原生的 prompt() 分別詢問使用者「新的重量」與「新的次數」。取得數值後，呼叫 workout-service.js 裡的更新函式，透過 updateDoc 將新資料寫入 Firebase。
資料連動刷新： 無論是編輯還是刪除，一旦 Firebase 操作成功，請務必重新撈取最新資料，並「同步刷新」歷史清單、上方的長條圖與圓餅圖。