freedakgmail
88 lines
4.0 KiB
TypeScript
88 lines
4.0 KiB
TypeScript
import { useState } from 'react'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import api from '@/lib/api'
|
|
import { CollapsibleSection } from '@/components/CollapsibleSection'
|
|
import { FilterableTable } from '@/components/FilterableTable'
|
|
import { LoadingSpinner } from '@/components/LoadingSpinner'
|
|
import { formatCurrency, formatPercent, formatNumber } from '@/lib/utils'
|
|
|
|
const PAGE_SIZE = 20
|
|
|
|
const RISK_COLORS: Record<string, string> = {
|
|
'即将到期': 'text-red-600 font-medium',
|
|
'年内到期': 'text-orange-600 font-medium',
|
|
'明年上半年到期': 'text-yellow-600',
|
|
'租金占比偏高': 'text-orange-600',
|
|
'正常': '',
|
|
}
|
|
|
|
export function RentRiskTab({ month }: { month: string }) {
|
|
const [page, setPage] = useState(1)
|
|
const [sort, setSort] = useState('rent_rate_pct')
|
|
const [filter, setFilter] = useState('')
|
|
const [riskOnly, setRiskOnly] = useState(false)
|
|
const [order, setOrder] = useState<'asc' | 'desc'>('desc')
|
|
const { data, isLoading } = useQuery({ queryKey: ['se/rent', month, page, sort, filter, riskOnly, order], queryFn: () => api.get(`/store-expense/rent-risk?page=${page}&page_size=${PAGE_SIZE}&sort=${sort}&filter=${filter}&risk_only=${riskOnly}&order=${order}&month=${month}`) })
|
|
|
|
if (isLoading) return <LoadingSpinner text="加载房租及租约风险..." />
|
|
|
|
const rows = (data as any)?.data || []
|
|
const meta = (data as any)?.meta || { page, pageSize: PAGE_SIZE, total: 0 }
|
|
|
|
const filters = [
|
|
{ key: '', label: '全部' },
|
|
{ key: 'profitable', label: '盈利门店' },
|
|
{ key: 'loss', label: '亏损门店' },
|
|
{ key: 'zero_sales', label: '零销售门店' },
|
|
]
|
|
|
|
const sorts = [
|
|
{ key: 'rent_rate_pct', label: '租金率' },
|
|
{ key: 'rent_expense', label: '租金' },
|
|
{ key: 'received', label: '实收' },
|
|
{ key: 'received_per_sqm', label: '坪效' },
|
|
{ key: 'lease_expiry_date', label: '租约到期' },
|
|
]
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<CollapsibleSection title="房租及租约风险" subtitle="租金占比 + 租约到期日，识别续租和关停风险门店">
|
|
<div className="flex gap-2 mb-3 flex-wrap">
|
|
<button onClick={() => { setRiskOnly(!riskOnly); setPage(1) }} className={`px-3 py-1 rounded text-xs ${riskOnly ? 'bg-primary text-primary-foreground' : 'bg-muted'}`}>
|
|
{riskOnly ? '显示全部' : '仅显示风险门店'}
|
|
</button>
|
|
</div>
|
|
<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="rent_rate_pct"
|
|
defaultOrder="desc"
|
|
columns={[
|
|
{ key: 'sales_store_name', label: '门店' },
|
|
{ key: 'received', label: '实收', align: 'right', render: (r) => formatCurrency(r.received) },
|
|
{ key: 'rent_expense', label: '租金', align: 'right', render: (r) => formatCurrency(r.rent_expense) },
|
|
{ key: 'rent_rate_pct', label: '租金率', align: 'right', render: (r) => <span className={parseFloat(r.rent_rate_pct) > 20 ? 'text-red-600 font-medium' : ''}>{formatPercent(r.rent_rate_pct)}</span> },
|
|
{ key: 'area_sqm', label: '面积(㎡)', align: 'right', render: (r) => formatNumber(r.area_sqm) },
|
|
{ key: 'received_per_sqm', label: '坪效', align: 'right', render: (r) => formatNumber(r.received_per_sqm) },
|
|
{ key: 'lease_expiry_date', label: '租约到期', render: (r) => r.lease_expiry_date ? new Date(r.lease_expiry_date).toLocaleDateString('zh-CN') : '-' },
|
|
{ key: 'risk_level', label: '风险等级', render: (r) => <span className={RISK_COLORS[r.risk_level] || ''}>{r.risk_level}</span> },
|
|
{ key: 'suggestion', label: '建议' },
|
|
]}
|
|
/>
|
|
</CollapsibleSection>
|
|
</div>
|
|
)
|
|
}
|