273 lines
16 KiB
TypeScript
273 lines
16 KiB
TypeScript
import React from 'react';
|
||
|
||
/**
|
||
* Tax Compliance Management - 税务合规管理
|
||
*
|
||
* 管理平台在各司法管辖区的税务义务，追踪联邦和州级税务申报，
|
||
* 包括所得税、销售税、预扣税、交易税等，以及IRS表格提交进度。
|
||
*/
|
||
|
||
const taxStats = [
|
||
{ label: '应纳税额', value: '$1,245,890', color: 'var(--color-primary)' },
|
||
{ label: '已缴税额', value: '$982,450', color: 'var(--color-success)' },
|
||
{ label: '税务合规率', value: '96.8%', color: 'var(--color-info)' },
|
||
{ label: '待处理事项', value: '5', color: 'var(--color-warning)' },
|
||
];
|
||
|
||
const taxObligations = [
|
||
{ jurisdiction: 'Federal', taxType: 'Corporate Income Tax', period: 'FY 2025', amount: '$425,000', paid: '$425,000', status: '已缴', dueDate: '2026-04-15' },
|
||
{ jurisdiction: 'Federal', taxType: 'Employment Tax (FICA)', period: 'Q4 2025', amount: '$68,200', paid: '$68,200', status: '已缴', dueDate: '2026-01-31' },
|
||
{ jurisdiction: 'California', taxType: 'State Income Tax', amount: '$187,500', paid: '$187,500', period: 'FY 2025', status: '已缴', dueDate: '2026-04-15' },
|
||
{ jurisdiction: 'California', taxType: 'Sales & Use Tax', amount: '$42,300', paid: '$42,300', period: 'Q4 2025', status: '已缴', dueDate: '2026-01-31' },
|
||
{ jurisdiction: 'New York', taxType: 'State Income Tax', amount: '$156,800', paid: '$120,000', period: 'FY 2025', status: '部分缴纳', dueDate: '2026-04-15' },
|
||
{ jurisdiction: 'New York', taxType: 'Metropolitan Commuter Tax', amount: '$12,400', paid: '$0', period: 'FY 2025', status: '待缴', dueDate: '2026-04-15' },
|
||
{ jurisdiction: 'Texas', taxType: 'Franchise Tax', amount: '$34,600', paid: '$34,600', period: 'FY 2025', status: '已缴', dueDate: '2026-05-15' },
|
||
{ jurisdiction: 'Florida', taxType: 'Sales Tax', amount: '$28,900', paid: '$28,900', period: 'Q4 2025', status: '已缴', dueDate: '2026-01-31' },
|
||
{ jurisdiction: 'Federal', taxType: 'Estimated Tax (Q1 2026)', amount: '$263,190', paid: '$0', period: 'Q1 2026', status: '待缴', dueDate: '2026-04-15' },
|
||
];
|
||
|
||
const taxTypeBreakdown = [
|
||
{ type: 'Income Tax (所得税)', federal: '$425,000', state: '$344,300', total: '$769,300', percentage: 61.7 },
|
||
{ type: 'Sales/Use Tax (销售税)', federal: '-', state: '$71,200', total: '$71,200', percentage: 5.7 },
|
||
{ type: 'Employment/Withholding Tax (预扣税)', federal: '$68,200', state: '$45,600', total: '$113,800', percentage: 9.1 },
|
||
{ type: 'Transaction Tax (交易税)', federal: '$28,400', state: '$0', total: '$28,400', percentage: 2.3 },
|
||
{ type: 'Estimated Tax (预估税)', federal: '$263,190', state: '$0', total: '$263,190', percentage: 21.2 },
|
||
];
|
||
|
||
const irsFilings = [
|
||
{ form: 'Form 1120', description: '公司所得税申报', taxYear: '2025', deadline: '2026-04-15', status: '准备中', filedDate: '-' },
|
||
{ form: 'Form 1099-K', description: '支付卡和第三方网络交易', taxYear: '2025', deadline: '2026-01-31', status: '已提交', filedDate: '2026-01-28' },
|
||
{ form: 'Form 1099-MISC', description: '杂项收入（承包商支付）', taxYear: '2025', deadline: '2026-01-31', status: '已提交', filedDate: '2026-01-29' },
|
||
{ form: 'Form 1099-NEC', description: '非雇员报酬', taxYear: '2025', deadline: '2026-01-31', status: '已提交', filedDate: '2026-01-30' },
|
||
{ form: 'Form 941', description: '雇主季度联邦税', taxYear: 'Q4 2025', deadline: '2026-01-31', status: '已提交', filedDate: '2026-01-25' },
|
||
{ form: 'Form W-2', description: '工资与税务声明', taxYear: '2025', deadline: '2026-01-31', status: '已提交', filedDate: '2026-01-27' },
|
||
{ form: 'Form 1042-S', description: '外国人预扣所得', taxYear: '2025', deadline: '2026-03-15', status: '准备中', filedDate: '-' },
|
||
{ form: 'Form 8300', description: '现金支付超$10,000报告', taxYear: '2025', deadline: '交易后15天', status: '按需提交', filedDate: '-' },
|
||
];
|
||
|
||
const taxDeadlines = [
|
||
{ date: '2026-01-31', event: 'Form 1099-K/1099-MISC/W-2 提交截止', done: true },
|
||
{ date: '2026-01-31', event: 'Q4 Employment Tax (Form 941) 截止', done: true },
|
||
{ date: '2026-03-15', event: 'Form 1042-S 外国人预扣税申报截止', done: false },
|
||
{ date: '2026-04-15', event: 'Form 1120 公司所得税申报截止', done: false },
|
||
{ date: '2026-04-15', event: 'Q1 2026 Estimated Tax Payment', done: false },
|
||
{ date: '2026-04-15', event: 'CA/NY State Income Tax 截止', done: false },
|
||
{ date: '2026-05-15', event: 'Texas Franchise Tax 截止', done: false },
|
||
{ date: '2026-06-15', event: 'Q2 2026 Estimated Tax Payment', done: false },
|
||
];
|
||
|
||
const getPaymentStatusStyle = (status: string) => {
|
||
switch (status) {
|
||
case '已缴':
|
||
return { background: 'var(--color-success-light)', color: 'var(--color-success)' };
|
||
case '部分缴纳':
|
||
return { background: 'var(--color-warning-light)', color: 'var(--color-warning)' };
|
||
case '待缴':
|
||
return { background: 'var(--color-error-light)', color: 'var(--color-error)' };
|
||
default:
|
||
return { background: 'var(--color-gray-100)', color: 'var(--color-text-tertiary)' };
|
||
}
|
||
};
|
||
|
||
const getFilingStatusStyle = (status: string) => {
|
||
switch (status) {
|
||
case '已提交':
|
||
return { background: 'var(--color-success-light)', color: 'var(--color-success)' };
|
||
case '准备中':
|
||
return { background: 'var(--color-warning-light)', color: 'var(--color-warning)' };
|
||
case '按需提交':
|
||
return { background: 'var(--color-info-light)', color: 'var(--color-info)' };
|
||
case '逾期':
|
||
return { background: 'var(--color-error-light)', color: 'var(--color-error)' };
|
||
default:
|
||
return { background: 'var(--color-gray-100)', color: 'var(--color-text-tertiary)' };
|
||
}
|
||
};
|
||
|
||
export const TaxCompliancePage: 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-full)',
|
||
background: 'var(--color-primary)',
|
||
color: 'white',
|
||
cursor: 'pointer',
|
||
font: 'var(--text-label-sm)',
|
||
}}>
|
||
导出税务报告
|
||
</button>
|
||
</div>
|
||
|
||
{/* Stats */}
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 24 }}>
|
||
{taxStats.map(s => (
|
||
<div key={s.label} style={{
|
||
background: 'var(--color-surface)', borderRadius: 'var(--radius-md)',
|
||
border: '1px solid var(--color-border-light)', padding: 20,
|
||
}}>
|
||
<div style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)', marginBottom: 8 }}>{s.label}</div>
|
||
<div style={{ font: 'var(--text-h1)', color: s.color }}>{s.value}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Tax Obligations by Jurisdiction */}
|
||
<div style={{
|
||
background: 'var(--color-surface)', borderRadius: 'var(--radius-md)',
|
||
border: '1px solid var(--color-border-light)', overflow: 'hidden', marginBottom: 24,
|
||
}}>
|
||
<div style={{ padding: '16px 20px', borderBottom: '1px solid var(--color-border-light)' }}>
|
||
<h2 style={{ font: 'var(--text-h2)', color: 'var(--color-text-primary)' }}>各司法管辖区税务义务</h2>
|
||
</div>
|
||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||
<thead>
|
||
<tr style={{ background: 'var(--color-gray-50)' }}>
|
||
{['管辖区', '税种', '期间', '应缴金额', '已缴金额', '截止日期', '状态'].map(h => (
|
||
<th key={h} style={{ font: 'var(--text-label-sm)', color: 'var(--color-text-tertiary)', padding: '10px 14px', textAlign: 'left' }}>{h}</th>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{taxObligations.map((t, i) => (
|
||
<tr key={i} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
|
||
<td style={{ padding: '10px 14px' }}>
|
||
<span style={{
|
||
padding: '2px 8px', borderRadius: 'var(--radius-full)',
|
||
background: t.jurisdiction === 'Federal' ? 'var(--color-primary-light)' : 'var(--color-info-light)',
|
||
color: t.jurisdiction === 'Federal' ? 'var(--color-primary)' : 'var(--color-info)',
|
||
font: 'var(--text-caption)', fontWeight: 600,
|
||
}}>{t.jurisdiction}</span>
|
||
</td>
|
||
<td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-primary)' }}>{t.taxType}</td>
|
||
<td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-tertiary)' }}>{t.period}</td>
|
||
<td style={{ font: 'var(--text-label-sm)', padding: '10px 14px', color: 'var(--color-text-primary)' }}>{t.amount}</td>
|
||
<td style={{ font: 'var(--text-label-sm)', padding: '10px 14px', color: 'var(--color-success)' }}>{t.paid}</td>
|
||
<td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-tertiary)' }}>{t.dueDate}</td>
|
||
<td style={{ padding: '10px 14px' }}>
|
||
<span style={{
|
||
padding: '2px 8px', borderRadius: 'var(--radius-full)', font: 'var(--text-caption)', fontWeight: 600,
|
||
...getPaymentStatusStyle(t.status),
|
||
}}>{t.status}</span>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{/* Tax Type Breakdown + IRS Filings */}
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 24 }}>
|
||
{/* Tax Type Breakdown */}
|
||
<div style={{
|
||
background: 'var(--color-surface)', borderRadius: 'var(--radius-md)',
|
||
border: '1px solid var(--color-border-light)', overflow: 'hidden',
|
||
}}>
|
||
<div style={{ padding: '16px 20px', borderBottom: '1px solid var(--color-border-light)' }}>
|
||
<h2 style={{ font: 'var(--text-h2)', color: 'var(--color-text-primary)' }}>税种分类汇总</h2>
|
||
</div>
|
||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||
<thead>
|
||
<tr style={{ background: 'var(--color-gray-50)' }}>
|
||
{['税种', '联邦', '州级', '合计', '占比'].map(h => (
|
||
<th key={h} style={{ font: 'var(--text-label-sm)', color: 'var(--color-text-tertiary)', padding: '10px 14px', textAlign: 'left' }}>{h}</th>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{taxTypeBreakdown.map((row, i) => (
|
||
<tr key={i} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
|
||
<td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-primary)' }}>{row.type}</td>
|
||
<td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-secondary)' }}>{row.federal}</td>
|
||
<td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-secondary)' }}>{row.state}</td>
|
||
<td style={{ font: 'var(--text-label-sm)', padding: '10px 14px', color: 'var(--color-text-primary)' }}>{row.total}</td>
|
||
<td style={{ padding: '10px 14px' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||
<div style={{ flex: 1, height: 6, background: 'var(--color-gray-100)', borderRadius: 'var(--radius-full)', overflow: 'hidden' }}>
|
||
<div style={{ width: `${row.percentage}%`, height: '100%', background: 'var(--color-primary)', borderRadius: 'var(--radius-full)' }} />
|
||
</div>
|
||
<span style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)', minWidth: 40, textAlign: 'right' }}>{row.percentage}%</span>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{/* Tax Calendar / Deadlines */}
|
||
<div 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 }}>税务日历</h2>
|
||
{taxDeadlines.map((evt, i) => (
|
||
<div key={i} style={{ display: 'flex', alignItems: 'flex-start', padding: '10px 0', borderBottom: '1px solid var(--color-border-light)' }}>
|
||
<div style={{
|
||
width: 20, height: 20, borderRadius: '50%', marginRight: 12, marginTop: 2, flexShrink: 0,
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
background: evt.done ? 'var(--color-success)' : 'var(--color-error)',
|
||
color: 'white', fontSize: 10,
|
||
}}>
|
||
{evt.done ? '✓' : '!'}
|
||
</div>
|
||
<div style={{ flex: 1 }}>
|
||
<div style={{ font: 'var(--text-body)', color: 'var(--color-text-primary)' }}>{evt.event}</div>
|
||
<div style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)', marginTop: 2 }}>{evt.date}</div>
|
||
</div>
|
||
<span style={{
|
||
font: 'var(--text-caption)',
|
||
color: evt.done ? 'var(--color-success)' : 'var(--color-error)',
|
||
}}>
|
||
{evt.done ? '已完成' : '待处理'}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* IRS Filing Tracker */}
|
||
<div style={{
|
||
background: 'var(--color-surface)', borderRadius: 'var(--radius-md)',
|
||
border: '1px solid var(--color-border-light)', overflow: 'hidden',
|
||
}}>
|
||
<div style={{ padding: '16px 20px', borderBottom: '1px solid var(--color-border-light)' }}>
|
||
<h2 style={{ font: 'var(--text-h2)', color: 'var(--color-text-primary)' }}>IRS表格提交追踪</h2>
|
||
</div>
|
||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||
<thead>
|
||
<tr style={{ background: 'var(--color-gray-50)' }}>
|
||
{['表格', '说明', '税务年度', '截止日期', '提交日期', '状态'].map(h => (
|
||
<th key={h} style={{ font: 'var(--text-label-sm)', color: 'var(--color-text-tertiary)', padding: '10px 14px', textAlign: 'left' }}>{h}</th>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{irsFilings.map((f, i) => (
|
||
<tr key={i} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
|
||
<td style={{ padding: '10px 14px' }}>
|
||
<span style={{
|
||
padding: '2px 10px', borderRadius: 'var(--radius-full)',
|
||
background: 'var(--color-primary-light)', color: 'var(--color-primary)',
|
||
font: 'var(--text-label-sm)', fontWeight: 600,
|
||
}}>{f.form}</span>
|
||
</td>
|
||
<td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-primary)' }}>{f.description}</td>
|
||
<td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-tertiary)' }}>{f.taxYear}</td>
|
||
<td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-secondary)' }}>{f.deadline}</td>
|
||
<td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-tertiary)' }}>{f.filedDate}</td>
|
||
<td style={{ padding: '10px 14px' }}>
|
||
<span style={{
|
||
padding: '2px 8px', borderRadius: 'var(--radius-full)', font: 'var(--text-caption)', fontWeight: 600,
|
||
...getFilingStatusStyle(f.status),
|
||
}}>{f.status}</span>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|