feat: add reconciliation and quality reporting

2026-07-15 14:22:50 +08:00
parent 16311546af
commit 8c3336600e
32 changed files with 1730 additions and 200 deletions
@@ -0,0 +1,94 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Search } from 'lucide-react';
+import { adminApi, type AdminChannel, type DailyProfitReport, type EnterpriseApplication, type TenantOption } from '@/api/adminApi';
+import { Breadcrumb, Button, DateRangeInput, Pagination, Select, Tag, type DateRangeValue } from '@/components/ui';
+import { formatCents } from '@/utils/currency';
+import { formatDateTime } from '@/utils/dateTime';
+
+const pageSize = 20;
+
+export function AdminProfitReportsPage() {
+  const [rows, setRows] = useState<DailyProfitReport[]>([]);
+  const [tenants, setTenants] = useState<TenantOption[]>([]);
+  const [applications, setApplications] = useState<EnterpriseApplication[]>([]);
+  const [channels, setChannels] = useState<AdminChannel[]>([]);
+  const [dateRange, setDateRange] = useState<DateRangeValue>(defaultDateRange());
+  const [dimensionType, setDimensionType] = useState<'application' | 'channel'>('application');
+  const [tenantId, setTenantId] = useState('');
+  const [applicationId, setApplicationId] = useState('');
+  const [channelId, setChannelId] = useState('');
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    Promise.all([adminApi.listTenants(), adminApi.listEnterpriseApplications(), adminApi.listChannels()])
+      .then(([nextTenants, nextApplications, nextChannels]) => { setTenants(nextTenants); setApplications(nextApplications); setChannels(nextChannels); })
+      .catch(() => { setTenants([]); setApplications([]); setChannels([]); });
+  }, []);
+  useEffect(() => { void loadData(); }, [page, dateRange.start, dateRange.end, dimensionType, tenantId, applicationId, channelId]);
+
+  async function loadData() {
+    setLoading(true);
+    setError('');
+    try {
+      const response = await adminApi.listProfitReports({ dateFrom: dateRange.start, dateTo: dateRange.end, dimensionType, tenantId: tenantId || undefined, applicationId: applicationId || undefined, channelId: channelId || undefined, page, pageSize });
+      setRows(response.items);
+      setTotal(response.total);
+    } catch (failure) {
+      setRows([]);
+      setTotal(0);
+      setError(failure instanceof Error ? failure.message : '利润报表加载失败');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const availableApplications = useMemo(() => applications.filter((application) => !tenantId || application.tenantId === tenantId), [applications, tenantId]);
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+
+  return (
+    <section className="page-stack">
+      <div className="page-heading">
+        <div><Breadcrumb items={['报表对账', '利润报表']} /><h1>利润报表</h1></div>
+        <Tag tone="info">T+1 生成 · 每日重算 T-4～T-1</Tag>
+      </div>
+
+      <div className="surface" style={{ display: 'grid', gap: 16, gridTemplateColumns: 'minmax(270px, 1.3fr) minmax(180px, .8fr) minmax(210px, 1fr) minmax(220px, 1fr) auto', padding: 20, alignItems: 'end' }}>
+        <DateRangeInput label="发送日期" onChange={(value) => { setDateRange(value); setPage(1); }} value={dateRange} />
+        <Select label="统计维度" onChange={(event) => { setDimensionType(event.target.value as 'application' | 'channel'); setTenantId(''); setApplicationId(''); setChannelId(''); setPage(1); }} options={[{ label: '按企业应用', value: 'application' }, { label: '按通道', value: 'channel' }]} value={dimensionType} />
+        {dimensionType === 'application' ? <Select label="企业" onChange={(event) => { setTenantId(event.target.value); setApplicationId(''); setPage(1); }} options={[{ label: '全部企业', value: '' }, ...tenants.map((tenant) => ({ label: tenant.name, value: tenant.id }))]} value={tenantId} /> : <Select label="短信通道" onChange={(event) => { setChannelId(event.target.value); setPage(1); }} options={[{ label: '全部通道', value: '' }, ...channels.map((channel) => ({ label: channel.name, value: channel.id }))]} value={channelId} />}
+        {dimensionType === 'application' ? <Select label="企业应用" onChange={(event) => { setApplicationId(event.target.value); setPage(1); }} options={[{ label: '全部应用', value: '' }, ...availableApplications.map((application) => ({ label: application.name, value: application.id }))]} value={applicationId} /> : <div />}
+        <Button icon={<Search size={16} />} onClick={() => void loadData()}>查询</Button>
+      </div>
+
+      <div className="surface">
+        <div className="ui-table-wrap">
+          <table className="ui-table">
+            <thead><tr><th>发送日期</th><th>{dimensionType === 'application' ? '企业 / 企业应用' : '通道'}</th><th>日发送条数</th><th>成功条数</th><th>消费金额</th><th>成本金额</th><th>利润</th><th>利润率</th><th>生成时间</th></tr></thead>
+            <tbody>
+              {error ? <tr><td className="ui-table__empty" colSpan={9}>{error}</td></tr>
+                : loading ? <tr><td className="ui-table__empty" colSpan={9}>正在加载真实利润数据...</td></tr>
+                  : rows.length === 0 ? <tr><td className="ui-table__empty" colSpan={9}>暂无已生成的利润报表</td></tr>
+                    : rows.map((row) => <tr key={row.id}><td>{row.reportDate.slice(0, 10)}</td><td><strong>{row.dimensionName}</strong>{row.tenantName ? <div className="muted">{row.tenantName}</div> : null}</td><td>{row.sentUnits.toLocaleString('zh-CN')}</td><td>{row.successUnits.toLocaleString('zh-CN')}</td><td>¥{formatCents(row.revenueCents)}</td><td>¥{formatCents(row.costCents)}</td><td style={{ color: row.profitCents < 0 ? 'var(--danger)' : undefined }}>¥{formatCents(row.profitCents)}</td><td>{(row.profitRateBps / 100).toFixed(2)}%</td><td>{formatDateTime(row.generatedAt)}</td></tr>)}
+            </tbody>
+          </table>
+        </div>
+        <Pagination page={page} totalPages={totalPages} total={total} onPageChange={setPage} onPrevious={() => setPage((value) => Math.max(1, value - 1))} onNext={() => setPage((value) => Math.min(totalPages, value + 1))} previousDisabled={page <= 1} nextDisabled={page >= totalPages} />
+      </div>
+    </section>
+  );
+}
+
+function defaultDateRange(): DateRangeValue {
+  const end = new Date();
+  end.setDate(end.getDate() - 1);
+  const start = new Date(end);
+  start.setDate(start.getDate() - 29);
+  return { start: localDate(start), end: localDate(end) };
+}
+
+function localDate(value: Date) {
+  return `${value.getFullYear()}-${String(value.getMonth() + 1).padStart(2, '0')}-${String(value.getDate()).padStart(2, '0')}`;
+}