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

client/src/components/smart-scheduling/SchedulingSuggestionTab.tsx

@@ -2,7 +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 { FilterableTable } from '@/components/FilterableTable'
 import { LoadingSpinner } from '@/components/LoadingSpinner'
 import { formatNumber } from '@/lib/utils'
 
@@ -56,7 +56,7 @@ const tableColumns = [
   { key: 'action', label: '建议', render: (r: any) => <span className={ACTION_COLORS[r.action] || ''}>{r.action}</span> },
 ]
 
-export function SchedulingSuggestionTab() {
+export function SchedulingSuggestionTab({ month }: { month: string }) {
   const { data: storesData } = useQuery({
     queryKey: ['ss/stores'],
     queryFn: () => api.get('/smart-scheduling/stores'),
@@ -67,8 +67,8 @@ export function SchedulingSuggestionTab() {
   const [kitchenTarget, setKitchenTarget] = useState(25)
 
   const { data, isLoading } = useQuery({
-    queryKey: ['ss/suggestion', storeName, frontTarget, kitchenTarget],
-    queryFn: () => api.get(`/smart-scheduling/scheduling-suggestion?store=${storeName}&front_target=${frontTarget}&kitchen_target=${kitchenTarget}`),
+    queryKey: ['ss/suggestion', storeName, frontTarget, kitchenTarget, month],
+    queryFn: () => api.get(`/smart-scheduling/scheduling-suggestion?store=${storeName}&front_target=${frontTarget}&kitchen_target=${kitchenTarget}&month=${month}`),
     enabled: !!storeName,
   })
 
@@ -123,11 +123,35 @@ export function SchedulingSuggestionTab() {
             <div className="space-y-4">
               <div>
                 <h3 className="text-sm font-bold mb-2">工作日排班建议</h3>
-                <DataTable columns={tableColumns} data={workdayRows} rowClassName={(r) => ROW_BG[r.action] || ''} />
+                <FilterableTable
+                  data={workdayRows}
+                  sortOptions={[
+                    { key: 'hour', label: '时段' },
+                    { key: 'avg_daily_bills', label: '日均账单' },
+                    { key: 'staff_gap', label: '总缺口' },
+                  ]}
+                  defaultSort="hour"
+                  defaultOrder="asc"
+                  filterKey="action"
+                  filterLabel="全部建议"
+                  columns={tableColumns}
+                />
               </div>
               <div>
                 <h3 className="text-sm font-bold mb-2">周末排班建议</h3>
-                <DataTable columns={tableColumns} data={weekendRows} rowClassName={(r) => ROW_BG[r.action] || ''} />
+                <FilterableTable
+                  data={weekendRows}
+                  sortOptions={[
+                    { key: 'hour', label: '时段' },
+                    { key: 'avg_daily_bills', label: '日均账单' },
+                    { key: 'staff_gap', label: '总缺口' },
+                  ]}
+                  defaultSort="hour"
+                  defaultOrder="asc"
+                  filterKey="action"
+                  filterLabel="全部建议"
+                  columns={tableColumns}
+                />
               </div>
             </div>
           </>