在前幾天的開發中，已經完成醫療資料品質檢查、問題統計卡片、問題明細、資料清理與CSV匯出功能。
不過，當系統完成資料清理後，使用者還需要確認清理前後的資料筆數，以及清理後的資料內容是否符合預期。因此，今天的目標是改善清理後資料預覽的介面，讓使用者能更清楚地了解資料清理的結果。
一、顯示清理前後的資料筆數
首先，使用PHP的count()計算清理後的資料筆數，並將清理前後的筆數與移除的資料數量顯示在網頁上。

echo '<div class="data-summary">';
echo '<div class="data-summary-item">';
echo '清理前 <strong>' . $totalRows . '</strong> 筆';
echo '</div>';
echo '<div class="data-summary-item">';
echo '清理後 <strong>' . count($cleanedRows) . '</strong> 筆';
echo '</div>';
echo '<div class="data-summary-item">';
echo '移除 <strong>'
    . ($totalRows - count($cleanedRows))
    . '</strong> 筆';
echo '</div>';
echo '</div>';

其中，$totalRows代表讀取到的原始資料筆數，而count($cleanedRows)則代表清理後保留下來的資料筆數。
兩者相減後，就能計算資料筆數的減少量。不過，這個數字代表的是筆數差異，不一定全部都是重複資料，也可能包含其他移除規則造成的變化。
二、使用CSS改善摘要區塊

.data-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0;
}
.data-summary-item {
    background: #edf4f1;
    border-radius: 8px;
    padding: 12px 18px;
    color: #245c53;
}
.data-summary-item strong {
    font-size: 20px;
    margin-left: 6px;
}

透過display: flex，不同的摘要資訊可以排列在同一行；當可用空間不足時，flex-wrap: wrap會讓項目自動換行，避免畫面過於擁擠。
三、改善資料表格的瀏覽方式

.table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin: 16px 0 28px;
    border-radius: 10px;
}
.table-wrapper table {
    margin: 0;
    min-width: 760px;
}

這樣可以保留原本的資料欄位，不必為了配合畫面而刪減資料，也能改善使用者在較小螢幕上的瀏覽體驗。
另外，在輸出資料表格時，也使用htmlspecialchars()處理欄位名稱與資料內容，避免特殊字元被瀏覽器直接解讀成HTML。