在健身規劃中，短期檢視（當日菜單）與長期趨勢（月/年訓練佔比）同樣重要。今天我們要為專案加入兩個進階的檢視功能：在表格頁面加上「日期導航條」，讓你輕鬆切換查看前一天或特定日期的紀錄；並為圓餅圖加入「時間區間篩選（日/週/月/年）」，讓你的數據儀表板變得更加專業且具備彈性。

AI Prompt:
我的 Vibe Fitness PWA 已經串接好 Firebase Firestore，並且有基本的歷史紀錄清單與 Chart.js 圖表。
請幫我完成以下數據篩選與導航的實作：
歷史紀錄的日期導航條 (Date Navigator)： 請在清單上方加入一個日期切換列，包含「◀ 前一天」、「目前日期」與「後一天 ▶」按鈕。點擊切換時，請根據該選定日期的時間區間（00:00:00 到 23:59:59），重新從 Firestore 撈取或過濾出當天的訓練紀錄並更新清單。
圓餅圖動態時間區間篩選： 請在圖表上方加入一個 下拉選單，選項包含「今日 (Day)、本週 (Week)、本月 (Month)、今年 (Year)」。當使用者切換選項時，程式需自動計算對應的時間門檻 (cutoff time)，篩選出符合該時間區間的數據，重新加總並動態更新 Chart.js 圓餅圖。

可以看到上下兩者是不相同的日期區間。