109 lines
5.0 KiB
TypeScript
109 lines
5.0 KiB
TypeScript
import React from 'react';
|
||
|
||
/**
|
||
* D5. 报表中心 - 运营报表、合规报表、数据导出
|
||
*
|
||
* 日/周/月运营报表、监管合规报表、自定义数据导出
|
||
* 包括：SOX审计、SEC Filing、税务合规
|
||
*/
|
||
|
||
const reportCategories = [
|
||
{
|
||
title: '运营报表',
|
||
icon: '📊',
|
||
reports: [
|
||
{ name: '日度运营报表', desc: '交易量/金额/用户/核销率', status: '已生成', date: '2026-02-10' },
|
||
{ name: '周度运营报表', desc: '周趋势分析', status: '已生成', date: '2026-02-09' },
|
||
{ name: '月度运营报表', desc: '月度综合分析', status: '已生成', date: '2026-01-31' },
|
||
],
|
||
},
|
||
{
|
||
title: '合规报表',
|
||
icon: '📋',
|
||
reports: [
|
||
{ name: 'SAR可疑活动报告', desc: '本月可疑交易汇总', status: '待审核', date: '2026-02-10' },
|
||
{ name: 'CTR大额交易报告', desc: '>$10,000交易申报', status: '已提交', date: '2026-02-10' },
|
||
{ name: 'OFAC筛查报告', desc: '制裁名单筛查结果', status: '已生成', date: '2026-02-09' },
|
||
],
|
||
},
|
||
{
|
||
title: '财务报表',
|
||
icon: '💰',
|
||
reports: [
|
||
{ name: '发行方结算报表', desc: '各发行方结算明细', status: '已生成', date: '2026-02-10' },
|
||
{ name: '平台收入报表', desc: '手续费/Breakage收入', status: '已生成', date: '2026-01-31' },
|
||
{ name: '税务合规报表', desc: '1099-K/消费税汇总', status: '待生成', date: '' },
|
||
],
|
||
},
|
||
{
|
||
title: '审计报表',
|
||
icon: '🔍',
|
||
reports: [
|
||
{ name: 'SOX合规检查', desc: '内部控制审计', status: '已通过', date: '2026-01-15' },
|
||
{ name: 'SEC Filing', desc: '证券类披露（预留）', status: 'N/A', date: '' },
|
||
{ name: '操作审计日志', desc: '管理员操作记录', status: '已生成', date: '2026-02-10' },
|
||
],
|
||
},
|
||
];
|
||
|
||
const statusStyle = (status: string): React.CSSProperties => {
|
||
const map: Record<string, { bg: string; color: string }> = {
|
||
'已生成': { bg: 'var(--color-success-light)', color: 'var(--color-success)' },
|
||
'已提交': { bg: 'var(--color-info-light)', color: 'var(--color-info)' },
|
||
'已通过': { bg: 'var(--color-success-light)', color: 'var(--color-success)' },
|
||
'待审核': { bg: 'var(--color-warning-light)', color: 'var(--color-warning)' },
|
||
'待生成': { bg: 'var(--color-gray-100)', color: 'var(--color-text-tertiary)' },
|
||
'N/A': { bg: 'var(--color-gray-100)', color: 'var(--color-text-tertiary)' },
|
||
};
|
||
const s = map[status] || map['N/A'];
|
||
return { padding: '2px 8px', borderRadius: 'var(--radius-full)', background: s.bg, color: s.color, font: 'var(--text-caption)', fontWeight: 600 };
|
||
};
|
||
|
||
export const ReportsPage: React.FC = () => {
|
||
return (
|
||
<div>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
|
||
<h1 style={{ font: 'var(--text-h1)', color: 'var(--color-text-primary)' }}>报表中心</h1>
|
||
<button style={{
|
||
padding: '8px 16px', border: 'none', borderRadius: 'var(--radius-sm)',
|
||
background: 'var(--color-primary)', color: 'white', cursor: 'pointer', font: 'var(--text-label)',
|
||
}}>自定义导出</button>
|
||
</div>
|
||
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
|
||
{reportCategories.map(cat => (
|
||
<div key={cat.title} style={{
|
||
background: 'var(--color-surface)', borderRadius: 'var(--radius-md)',
|
||
border: '1px solid var(--color-border-light)', padding: 20,
|
||
}}>
|
||
<h2 style={{ font: 'var(--text-h2)', marginBottom: 16 }}>
|
||
<span style={{ marginRight: 8 }}>{cat.icon}</span>{cat.title}
|
||
</h2>
|
||
{cat.reports.map((r, i) => (
|
||
<div key={i} style={{
|
||
display: 'flex', alignItems: 'center', padding: '12px 0',
|
||
borderBottom: i < cat.reports.length - 1 ? '1px solid var(--color-border-light)' : 'none',
|
||
}}>
|
||
<div style={{ flex: 1 }}>
|
||
<div style={{ font: 'var(--text-label)', color: 'var(--color-text-primary)' }}>{r.name}</div>
|
||
<div style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)' }}>{r.desc}</div>
|
||
</div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||
<span style={statusStyle(r.status)}>{r.status}</span>
|
||
{r.date && <span style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)' }}>{r.date}</span>}
|
||
{r.status !== 'N/A' && r.status !== '待生成' && (
|
||
<button style={{
|
||
padding: '4px 10px', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-sm)',
|
||
background: 'transparent', cursor: 'pointer', font: 'var(--text-caption)', color: 'var(--color-text-secondary)',
|
||
}}>下载</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|