freedakgmail
227 lines
11 KiB
TypeScript
227 lines
11 KiB
TypeScript
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||
import { useNavigate } from 'react-router-dom'
|
||
import api from '@/lib/api'
|
||
import { Badge } from '@/components/Badge'
|
||
import { DataTable } from '@/components/DataTable'
|
||
import { MetricCard } from '@/components/MetricCard'
|
||
import { Pagination } from '@/components/Pagination'
|
||
import { formatCurrency, formatPercent, riskColor } from '@/lib/utils'
|
||
import { LoadingSpinner } from '@/components/LoadingSpinner'
|
||
import { MonthPicker } from '@/components/MonthPicker'
|
||
import { LineChart, Line, ResponsiveContainer, XAxis, YAxis, Tooltip } from 'recharts'
|
||
import { useState, useMemo } from 'react'
|
||
|
||
const PAGE_SIZE = 10
|
||
|
||
export function RegionalPage() {
|
||
const navigate = useNavigate()
|
||
const queryClient = useQueryClient()
|
||
const [riskFilter, setRiskFilter] = useState('')
|
||
const [month, setMonth] = useState('2026-05')
|
||
const [riskPage, setRiskPage] = useState(1)
|
||
const [checkPage, setCheckPage] = useState(1)
|
||
const [benchPage, setBenchPage] = useState(1)
|
||
const [weeklyModal, setWeeklyModal] = useState<{ taskId: number; storeName: string } | null>(null)
|
||
const [weeklyText, setWeeklyText] = useState('')
|
||
|
||
const { data: riskData, isLoading: riskLoading } = useQuery({
|
||
queryKey: ['stores/risk'],
|
||
queryFn: () => api.get('/stores/risk'),
|
||
})
|
||
|
||
const { data: weeklyData, isLoading: weeklyLoading } = useQuery({
|
||
queryKey: ['tasks/weekly-check'],
|
||
queryFn: () => api.get('/tasks/weekly-check', { params: { month } }),
|
||
})
|
||
|
||
const { data: priorityData, isLoading: priorityLoading } = useQuery({
|
||
queryKey: ['stores/priority'],
|
||
queryFn: () => api.get('/stores/priority'),
|
||
})
|
||
|
||
const { data: benchmarkData } = useQuery({
|
||
queryKey: ['benchmark/composite'],
|
||
queryFn: () => api.get('/benchmark/composite'),
|
||
})
|
||
|
||
const { data: regionData } = useQuery({
|
||
queryKey: ['region/summary'],
|
||
queryFn: () => api.get('/region/summary'),
|
||
})
|
||
|
||
const riskRows = ((riskData as any)?.data || []).filter((r: any) => !riskFilter || r.risk_level === riskFilter)
|
||
const weeklyRows = (weeklyData as any)?.data || []
|
||
const priorityRows = (priorityData as any)?.data || []
|
||
const benchmarkRows = (benchmarkData as any)?.data || []
|
||
const regionRows = (regionData as any)?.data || []
|
||
|
||
const p0p1 = priorityRows.filter((s: any) => s.action_priority?.startsWith('P0') || s.action_priority?.startsWith('P1'))
|
||
const needCheck = weeklyRows.filter((w: any) => parseInt(w.consecutive_no_improve_weeks) >= 2)
|
||
|
||
const pagedRiskRows = useMemo(() => riskRows.slice((riskPage - 1) * PAGE_SIZE, riskPage * PAGE_SIZE), [riskRows, riskPage])
|
||
const pagedNeedCheck = useMemo(() => needCheck.slice((checkPage - 1) * PAGE_SIZE, checkPage * PAGE_SIZE), [needCheck, checkPage])
|
||
const pagedBenchmark = useMemo(() => benchmarkRows.slice((benchPage - 1) * PAGE_SIZE, benchPage * PAGE_SIZE), [benchmarkRows, benchPage])
|
||
|
||
const pageLoading = riskLoading || weeklyLoading || priorityLoading
|
||
|
||
const weeklyMutation = useMutation({
|
||
mutationFn: ({ id, text }: { id: number; text: string }) => api.put(`/tasks/${id}/weekly-check`, { weekly_comment: text }),
|
||
onSuccess: () => {
|
||
queryClient.invalidateQueries({ queryKey: ['tasks/weekly-check'] })
|
||
setWeeklyModal(null)
|
||
setWeeklyText('')
|
||
},
|
||
})
|
||
|
||
if (pageLoading) {
|
||
return <LoadingSpinner text="加载区域经理工作台..." />
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<div className="flex items-center justify-between">
|
||
<h1 className="text-xl font-bold">区域经理工作台</h1>
|
||
<MonthPicker month={month} onChange={setMonth} />
|
||
</div>
|
||
|
||
{/* 汇总卡片 */}
|
||
<div className="grid grid-cols-2 gap-3 md:grid-cols-4">
|
||
<MetricCard title="红黄门店数" value={riskRows.filter((r: any) => r.risk_level !== '绿色').length} />
|
||
<MetricCard title="P0+P1门店" value={p0p1.length} />
|
||
<MetricCard title="需到店检查" value={needCheck.length} />
|
||
<MetricCard title="周检待录入" value={weeklyRows.filter((w: any) => !w.last_check_date).length} />
|
||
</div>
|
||
|
||
{/* 区域汇总 */}
|
||
{regionRows.length > 0 && (
|
||
<div className="rounded-lg border bg-card p-4">
|
||
<h2 className="mb-3 text-sm font-bold">区域经营汇总</h2>
|
||
<DataTable
|
||
columns={[
|
||
{ key: 'region', label: '区域' },
|
||
{ key: 'store_count', label: '门店数', align: 'right' },
|
||
{ key: 'total_received', label: '实收合计', align: 'right', render: (r) => formatCurrency(r.total_received) },
|
||
{ key: 'avg_bill_value', label: '客单价', align: 'right', render: (r) => formatCurrency(r.avg_bill_value) },
|
||
{ key: 'avg_discount_rate', label: '优惠率', align: 'right', render: (r) => formatPercent(r.avg_discount_rate) },
|
||
{ key: 'avg_margin_rate', label: '毛利率', align: 'right', render: (r) => formatPercent(r.avg_margin_rate) },
|
||
{ key: 'avg_anomaly_rate', label: '异常率', align: 'right', render: (r) => formatPercent(r.avg_anomaly_rate) },
|
||
{ key: 'red_count', label: '红', align: 'center', render: (r) => <span className={r.red_count > 0 ? 'font-bold text-red-600' : ''}>{r.red_count}</span> },
|
||
{ key: 'yellow_count', label: '黄', align: 'center', render: (r) => <span className={r.yellow_count > 0 ? 'font-bold text-yellow-600' : ''}>{r.yellow_count}</span> },
|
||
{ key: 'green_count', label: '绿', align: 'center', render: (r) => <span className="text-green-600">{r.green_count}</span> },
|
||
]}
|
||
data={regionRows}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* 风险筛选 */}
|
||
<div className="flex gap-2">
|
||
{['', '红色', '黄色', '绿色'].map((r) => (
|
||
<button
|
||
key={r || 'all'}
|
||
onClick={() => setRiskFilter(r)}
|
||
className={`rounded-md border px-3 py-1.5 text-sm ${riskFilter === r ? 'border-primary bg-primary text-primary-foreground' : ''}`}
|
||
>
|
||
{r || '全部'}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* 门店红黄绿列表 */}
|
||
<div className="rounded-lg border bg-card p-4">
|
||
<h2 className="mb-3 text-sm font-bold">门店风险分级 ({riskRows.length})</h2>
|
||
<Pagination page={riskPage} pageSize={PAGE_SIZE} total={riskRows.length} onPageChange={setRiskPage} />
|
||
<div className="mt-3">
|
||
<DataTable
|
||
columns={[
|
||
{ key: 'store_name', label: '门店' },
|
||
{ key: 'risk_level', label: '风险', render: (r) => <Badge type="risk" text={r.risk_level} /> },
|
||
{ key: 'received', label: '实收', align: 'right', render: (r) => formatCurrency(r.received) },
|
||
{ key: 'discount_rate_pct', label: '优惠率', align: 'right', render: (r) => formatPercent(r.discount_rate_pct) },
|
||
{ key: 'theoretical_margin_pct', label: '毛利率', align: 'right', render: (r) => formatPercent(r.theoretical_margin_pct) },
|
||
{ key: 'anomaly_rate_pct', label: '异常率', align: 'right', render: (r) => formatPercent(r.anomaly_rate_pct) },
|
||
]}
|
||
data={pagedRiskRows}
|
||
onRowClick={(r) => navigate(`/stores/${r.store_code}`)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 需到店检查门店 + 周检录入 */}
|
||
{needCheck.length > 0 && (
|
||
<div className="rounded-lg border bg-card p-4">
|
||
<h2 className="mb-3 text-sm font-bold text-red-600">需到店检查门店（连续2周未改善）({needCheck.length})</h2>
|
||
<Pagination page={checkPage} pageSize={PAGE_SIZE} total={needCheck.length} onPageChange={setCheckPage} />
|
||
<div className="mt-3">
|
||
<DataTable
|
||
columns={[
|
||
{ key: 'store_name', label: '门店' },
|
||
{ key: 'problem_indicator', label: '问题指标' },
|
||
{ key: 'consecutive_no_improve_weeks', label: '连续未改善周数', align: 'center' },
|
||
{ key: 'status', label: '任务状态', render: (r) => <Badge type="status" text={r.status} /> },
|
||
{ key: 'action', label: '操作', render: (r) => (
|
||
<button onClick={(e) => { e.stopPropagation(); setWeeklyModal({ taskId: r.task_id, storeName: r.store_name }); setWeeklyText('') }} className="rounded-md border px-2 py-0.5 text-xs hover:bg-muted">录入周检</button>
|
||
) },
|
||
]}
|
||
data={pagedNeedCheck}
|
||
onRowClick={(r) => navigate(`/tasks/${r.task_id}`)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 同类门店基准对比 */}
|
||
{benchmarkRows.length > 0 && (
|
||
<div className="rounded-lg border bg-card p-4">
|
||
<h2 className="mb-3 text-sm font-bold">同类门店基准对比</h2>
|
||
<Pagination page={benchPage} pageSize={PAGE_SIZE} total={benchmarkRows.length} onPageChange={setBenchPage} />
|
||
<div className="mt-3">
|
||
<DataTable
|
||
columns={[
|
||
{ key: 'store_name', label: '门店' },
|
||
{ key: 'benchmark_score', label: '标杆得分', align: 'right', render: (r) => {
|
||
const v = Number(r.benchmark_score || 0)
|
||
return <span className={v >= 80 ? 'text-green-600' : v >= 60 ? 'text-yellow-600' : 'text-red-600'}>{v.toFixed(1)}</span>
|
||
} },
|
||
{ key: 'received', label: '实收', align: 'right', render: (r) => formatCurrency(r.received) },
|
||
{ key: 'avg_bill_value', label: '客单价', align: 'right', render: (r) => formatCurrency(r.avg_bill_value) },
|
||
{ key: 'discount_rate_pct', label: '优惠率', align: 'right', render: (r) => formatPercent(r.discount_rate_pct) },
|
||
{ key: 'theoretical_margin_pct', label: '毛利率', align: 'right', render: (r) => formatPercent(r.theoretical_margin_pct) },
|
||
{ key: 'member_bill_share_pct', label: '会员占比', align: 'right', render: (r) => formatPercent(r.member_bill_share_pct) },
|
||
]}
|
||
data={pagedBenchmark}
|
||
onRowClick={(r) => navigate(`/stores/${r.store_code}`)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 周检录入弹窗 */}
|
||
{weeklyModal && (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={() => setWeeklyModal(null)}>
|
||
<div className="rounded-lg border bg-card p-4 shadow-lg w-96" onClick={(e) => e.stopPropagation()}>
|
||
<h3 className="mb-2 text-sm font-bold">周检录入 - {weeklyModal.storeName}</h3>
|
||
<textarea
|
||
value={weeklyText}
|
||
onChange={(e) => setWeeklyText(e.target.value)}
|
||
placeholder="录入周度检查评价、指标变化情况、指导意见..."
|
||
className="mb-2 w-full rounded-md border p-2 text-sm"
|
||
rows={4}
|
||
/>
|
||
<div className="flex justify-end gap-2">
|
||
<button onClick={() => setWeeklyModal(null)} className="rounded-md border px-3 py-1 text-sm">取消</button>
|
||
<button
|
||
onClick={() => weeklyMutation.mutate({ id: weeklyModal.taskId, text: weeklyText })}
|
||
disabled={!weeklyText || weeklyMutation.isPending}
|
||
className="rounded-md bg-primary px-3 py-1 text-sm text-primary-foreground disabled:opacity-50"
|
||
>
|
||
{weeklyMutation.isPending ? '提交中...' : '提交'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|