feat: integrate analytics and fragment receipt improvements

src/apps/admin/ReportImportAuditPanel.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Check, Eye, Search, X } from 'lucide-react';
 import { adminApi, type ReportImportReviewBatch, type ReportImportReviewItem } from '@/api/adminApi';
-import { Button, Input, Modal, Pagination, Select, Table, Tag, Textarea, type TableColumn } from '@/components/ui';
+import { Button, DateRangeInput, Input, Modal, Pagination, Select, Table, Tag, Textarea, type DateRangeValue, type TableColumn } from '@/components/ui';
 import { formatDateTime } from '@/utils/dateTime';
 
 const statusLabels: Record<string, string> = {
@@ -38,6 +38,7 @@ export function ReportImportAuditPanel({ reportType }: { reportType: 'signature'
   const pageSize = 20;
   const [keyword, setKeyword] = useState('');
   const [status, setStatus] = useState('all');
+  const [submittedDateRange, setSubmittedDateRange] = useState<DateRangeValue>({});
   const [detail, setDetail] = useState<ReportImportReviewBatch>();
   const [selected, setSelected] = useState<Set<string>>(new Set());
   const [rejectOpen, setRejectOpen] = useState(false);
@@ -50,6 +51,8 @@ export function ReportImportAuditPanel({ reportType }: { reportType: 'signature'
       reportType,
       status: status === 'all' ? undefined : status,
       keyword: keyword.trim() || undefined,
+      startAt: submittedDateRange.start,
+      endAt: submittedDateRange.end,
       page: targetPage,
       pageSize,
     }).then((result) => {
@@ -61,7 +64,7 @@ export function ReportImportAuditPanel({ reportType }: { reportType: 'signature'
 
   useEffect(() => {
     load(page);
-  }, [page, pageSize, reportType, status]);
+  }, [page, pageSize, reportType, status, submittedDateRange.end, submittedDateRange.start]);
 
   const pendingItems = detail?.items.filter((item) => item.status === 'pending_review') ?? [];
   const allPendingSelected = pendingItems.length > 0 && pendingItems.every((item) => selected.has(item.id));
@@ -81,6 +84,8 @@ export function ReportImportAuditPanel({ reportType }: { reportType: 'signature'
         reportType,
         status: status === 'all' ? undefined : status,
         keyword: keyword.trim() || undefined,
+        startAt: submittedDateRange.start,
+        endAt: submittedDateRange.end,
         page,
         pageSize,
       });
@@ -126,7 +131,7 @@ export function ReportImportAuditPanel({ reportType }: { reportType: 'signature'
   return <div className="page-stack">
     {error ? <p className="form-error">{error}</p> : null}
     <div className="surface audit-filter-card">
-      <div className="audit-filter-grid audit-filter-grid--template">
+      <div className="ui-filter-row">
         <Input label="批次号/文件名" onChange={(event) => setKeyword(event.target.value)} placeholder="搜索导入批次或文件" value={keyword} />
         <Select label="批次状态" onChange={(event) => { setStatus(event.target.value); setPage(1); }} options={[
           { label: '全部状态', value: 'all' },
@@ -136,7 +141,8 @@ export function ReportImportAuditPanel({ reportType }: { reportType: 'signature'
           { label: '部分通过', value: 'partially_approved' },
           { label: '已驳回', value: 'rejected' },
         ]} value={status} />
-        <div className="audit-filter-actions"><Button icon={<Search size={16} />} onClick={() => { setPage(1); load(1); }}>查询</Button></div>
+        <DateRangeInput label="提交时间" onChange={(value) => { setSubmittedDateRange(value); setPage(1); }} value={submittedDateRange} />
+        <div className="audit-filter-actions ui-filter-actions"><Button icon={<Search size={16} />} onClick={() => { setPage(1); load(1); }}>查询</Button><Button onClick={() => { setKeyword(''); setStatus('all'); setSubmittedDateRange({}); setPage(1); }} variant="ghost">重置</Button></div>
       </div>
     </div>
     <div className="surface"><Table columns={columns} data={data.items} emptyText="暂无导入审核批次" pagination={false} rowKey="id" /></div>