fix: align reporting fields queries and disk monitoring

src/apps/client/ClientSendDetailPage.tsx

@@ -7,6 +7,7 @@ import {
   Input,
   Pagination,
   QueryPanel,
+  QueryButtons,
   Select,
   Tag,
   type DateRangeValue,
@@ -71,6 +72,7 @@ export function ClientSendDetailPage() {
   const [dateRange, setDateRange] = useState<DateRangeValue>(() => recentBeijingDateRange(7));
   const [contentKeyword, setContentKeyword] = useState('');
   const [phoneKeyword, setPhoneKeyword] = useState('');
+  const [applied, setApplied] = useState(() => ({ applicationId, status, dateRange, contentKeyword, phoneKeyword }));
   const [page, setPage] = useState(1);
   const [total, setTotal] = useState(0);
   const [applications, setApplications] = useState<Array<{ id: string; name: string }>>([]);
@@ -80,12 +82,12 @@ export function ClientSendDetailPage() {
   function loadData(targetPage = page) {
     setLoading(true);
     clientApi.listMessages({
-      applicationId: applicationId === 'all' ? undefined : applicationId,
-      phoneNumber: phoneKeyword || undefined,
-      status: status === 'all' ? undefined : status,
-      contentKeyword: contentKeyword || undefined,
-      queuedAtFrom: dateRange.start || undefined,
-      queuedAtTo: dateRange.end || undefined,
+      applicationId: applied.applicationId === 'all' ? undefined : applied.applicationId,
+      phoneNumber: applied.phoneKeyword.trim() || undefined,
+      status: applied.status === 'all' ? undefined : applied.status,
+      contentKeyword: applied.contentKeyword.trim() || undefined,
+      queuedAtFrom: applied.dateRange.start || undefined,
+      queuedAtTo: applied.dateRange.end || undefined,
       page: targetPage,
       pageSize: 10,
     })
@@ -100,7 +102,7 @@ export function ClientSendDetailPage() {
 
   useEffect(() => {
     loadData(page);
-  }, [applicationId, contentKeyword, dateRange.end, dateRange.start, page, phoneKeyword, status]);
+  }, [applied, page]);
 
   useEffect(() => {
     clientApi.listApplicationOptions()
@@ -121,9 +123,21 @@ export function ClientSendDetailPage() {
   const currentPage = Math.min(page, totalPages);
   const visibleRows = filteredRows;
 
-  useEffect(() => {
+  function query() {
     setPage(1);
-  }, [applicationId, contentKeyword, dateRange.end, dateRange.start, phoneKeyword, status]);
+    setApplied({ applicationId, status, dateRange, contentKeyword, phoneKeyword });
+  }
+
+  function reset() {
+    const defaults = { applicationId: 'all', status: 'all', dateRange: recentBeijingDateRange(7), contentKeyword: '', phoneKeyword: '' };
+    setApplicationId(defaults.applicationId);
+    setStatus(defaults.status);
+    setDateRange(defaults.dateRange);
+    setContentKeyword('');
+    setPhoneKeyword('');
+    setPage(1);
+    setApplied(defaults);
+  }
 
   return (
     <section className="page-stack">
@@ -165,6 +179,7 @@ export function ClientSendDetailPage() {
           prefix={<Smartphone size={16} />}
           value={phoneKeyword}
         />
+        <QueryButtons onQuery={query} onReset={reset} />
       </QueryPanel>
 
       {error ? <p className="form-error">{error}</p> : null}