风险与内控管理优化: 异常账单服务端分页/筛选/收银员搜索/合计, 收银员TOP15按异常账单数排序, 双击跳转明细, MonthPicker靠右, 侧边栏底部间距

client/src/components/store-expense/StoreRankingTab.tsx

@@ -2,8 +2,7 @@ import { useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import api from '@/lib/api'
 import { CollapsibleSection } from '@/components/CollapsibleSection'
-import { DataTable } from '@/components/DataTable'
-import { Pagination } from '@/components/Pagination'
+import { FilterableTable } from '@/components/FilterableTable'
 import { LoadingSpinner } from '@/components/LoadingSpinner'
 import { formatCurrency, formatPercent, formatNumber } from '@/lib/utils'
 
@@ -13,7 +12,7 @@ export function StoreRankingTab({ month }: { month: string }) {
   const [page, setPage] = useState(1)
   const [sort, setSort] = useState('operating_expense_rate_pct')
   const [filter, setFilter] = useState('')
-  const [order, setOrder] = useState('desc')
+  const [order, setOrder] = useState<'asc' | 'desc'>('desc')
 
   const { data, isLoading } = useQuery({ queryKey: ['se/ranking', month, page, sort, filter, order], queryFn: () => api.get(`/store-expense/store-ranking?page=${page}&page_size=${PAGE_SIZE}&sort=${sort}&filter=${filter}&order=${order}&month=${month}`) })
 
@@ -41,20 +40,23 @@ export function StoreRankingTab({ month }: { month: string }) {
   return (
     <div className="space-y-4">
       <CollapsibleSection title="门店费用率排名" subtitle="按费用率降序，支持筛选和排序">
-        <div className="flex gap-2 mb-3 flex-wrap">
-          {filters.map(f => (
-            <button key={f.key} onClick={() => { setFilter(f.key); setPage(1) }} className={`px-3 py-1 rounded text-xs ${filter === f.key ? 'bg-primary text-primary-foreground' : 'bg-muted'}`}>{f.label}</button>
-          ))}
-          <span className="mx-2 text-muted-foreground">|</span>
-          {sorts.map(s => (
-            <button key={s.key} onClick={() => { setSort(s.key); setPage(1) }} className={`px-3 py-1 rounded text-xs ${sort === s.key ? 'bg-primary text-primary-foreground' : 'bg-muted'}`}>按{s.label}</button>
-          ))}
-          <span className="mx-2 text-muted-foreground">|</span>
-          <button onClick={() => { setOrder(order === 'asc' ? 'desc' : 'asc'); setPage(1) }} className="px-3 py-1 rounded text-xs bg-muted">
-            {order === 'asc' ? '↑ 升序' : '↓ 降序'}
-          </button>
-        </div>
-        <DataTable
+        <FilterableTable
+          data={rows}
+          serverSide
+          page={page}
+          onPageChange={setPage}
+          sort={sort}
+          onSortChange={setSort}
+          order={order}
+          onOrderChange={setOrder}
+          pageSize={PAGE_SIZE}
+          total={meta.total}
+          filter={filter}
+          onFilterChange={setFilter}
+          filterButtons={filters}
+          sortOptions={sorts}
+          defaultSort="operating_expense_rate_pct"
+          defaultOrder="desc"
           columns={[
             { key: 'sales_store_name', label: '门店' },
             { key: 'received', label: '实收', align: 'right', render: (r) => formatCurrency(r.received) },
@@ -67,9 +69,7 @@ export function StoreRankingTab({ month }: { month: string }) {
             { key: 'actual_store_contribution_rate_pct', label: '贡献率', align: 'right', render: (r) => formatPercent(r.actual_store_contribution_rate_pct) },
             { key: 'received_per_sqm', label: '坪效', align: 'right', render: (r) => formatNumber(r.received_per_sqm) },
           ]}
-          data={rows}
         />
-        <Pagination page={page} pageSize={meta.pageSize} total={meta.total} onPageChange={setPage} />
       </CollapsibleSection>
     </div>
   )