94 lines
3.8 KiB
TypeScript
94 lines
3.8 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
|
import { BarChart3 } from 'lucide-react';
|
|
import { adminApi, type DashboardResponse } from '@/api/adminApi';
|
|
import { Breadcrumb, Button, Chart, Tag } from '@/components/ui';
|
|
import { createBarOption, createPieOption } from '@/theme/chartOptions';
|
|
|
|
export function AdminAnalyticsPage() {
|
|
const [dashboard, setDashboard] = useState<DashboardResponse | null>(null);
|
|
const [tenantStats, setTenantStats] = useState<Array<{ tenantId: string | null; _count: { _all: number }; _sum: { amountCents?: number | null } }>>([]);
|
|
const [channelStats, setChannelStats] = useState<Array<{ channelId: string | null; _count: { _all: number }; _sum: { amountCents?: number | null } }>>([]);
|
|
const [error, setError] = useState('');
|
|
|
|
function loadData() {
|
|
Promise.all([
|
|
adminApi.getDashboard(),
|
|
adminApi.listStatistics({ groupBy: 'tenantId' }),
|
|
adminApi.listStatistics({ groupBy: 'channelId' }),
|
|
])
|
|
.then(([dashboardData, tenantData, channelData]) => {
|
|
setDashboard(dashboardData);
|
|
setTenantStats((Array.isArray(tenantData) ? tenantData : []) as Array<{ tenantId: string | null; _count: { _all: number }; _sum: { amountCents?: number | null } }>);
|
|
setChannelStats((Array.isArray(channelData) ? channelData : []) as Array<{ channelId: string | null; _count: { _all: number }; _sum: { amountCents?: number | null } }>);
|
|
setError('');
|
|
})
|
|
.catch((failure: Error) => setError(failure.message || '统计数据加载失败'));
|
|
}
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, []);
|
|
|
|
const tenantOption = useMemo(() => createBarOption({
|
|
labels: tenantStats.map((item) => item.tenantId ?? '未绑定企业'),
|
|
series: [{ name: '发送量', data: tenantStats.map((item) => item._count._all) }],
|
|
}), [tenantStats]);
|
|
|
|
const channelOption = useMemo(() => createPieOption({
|
|
data: channelStats.map((item) => ({ name: item.channelId ?? '未分配通道', value: item._count._all })),
|
|
}), [channelStats]);
|
|
|
|
return (
|
|
<section className="page-stack">
|
|
<div className="page-heading">
|
|
<div>
|
|
<Breadcrumb items={['数据统计']} />
|
|
</div>
|
|
<Button icon={<BarChart3 size={16} />} onClick={loadData} variant="ghost">刷新统计</Button>
|
|
</div>
|
|
{error ? <p className="form-error">{error}</p> : null}
|
|
|
|
<div className="dashboard-grid">
|
|
<div className="surface metric-card">
|
|
<span>今日发送量</span>
|
|
<strong>{dashboard?.today.sent.toLocaleString('zh-CN') ?? 0}</strong>
|
|
<small>真实消息记录</small>
|
|
</div>
|
|
<div className="surface metric-card">
|
|
<span>成功率</span>
|
|
<strong>{dashboard?.today.successRate ?? 0}%</strong>
|
|
<small>今日已回执</small>
|
|
</div>
|
|
<div className="surface metric-card">
|
|
<span>待审核</span>
|
|
<strong>{dashboard?.pendingAuditCount ?? 0}</strong>
|
|
<small>企业/签名/模板/风控</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="chart-grid">
|
|
<div className="surface chart-card">
|
|
<div className="section-heading">
|
|
<div>
|
|
<h2>企业发送排行</h2>
|
|
<p className="muted">按真实短信消息记录聚合。</p>
|
|
</div>
|
|
<Tag tone="info">企业</Tag>
|
|
</div>
|
|
<Chart height={320} option={tenantOption} />
|
|
</div>
|
|
<div className="surface chart-card">
|
|
<div className="section-heading">
|
|
<div>
|
|
<h2>通道占比</h2>
|
|
<p className="muted">按通道消息记录聚合。</p>
|
|
</div>
|
|
<Tag tone="accent">通道</Tag>
|
|
</div>
|
|
<Chart height={320} option={channelOption} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|