在前 11 天的實作中，我們已經為「AI 智慧用藥監測系統」打造了穩固的 CRUD 基礎與 LocalStorage 資料持久化功能。系統的核心邏輯已經大致完成。從今天開始，我們將焦點轉向UI/UX (使用者體驗)的優化。

對於一款健康管理系統來說，給予使用者明確的「成就感」是非常重要的。今天我們要利用陣列過濾與 Tailwind CSS，實作一個動態的「服藥進度條」，讓使用者一眼就能掌握今天到底吃了多少藥。

Step 1：建立進度條元件
請在 src/components 資料夾下，新增一個名為 MedicationProgress.jsx 的檔案。
我們要透過傳入的 medications 資料，計算出「總藥物數量」與「已服用數量」，並利用簡單的數學換算出百分比。

Step 2：將進度條整合進主畫面
接著打開 src/App.jsx，將我們剛寫好的 MedicationProgress 匯入，並把它放置在表單的下方、清單的上方。

結果如下圖，會看到有一個進度條當你完成你有吃的藥時進度條就會跟著跑。