# Genex Web 管理前端开发指南

> 平台管理后台（Admin Dashboard） — React + TypeScript + Next.js

---

## 1. 技术栈

| 技术 | 版本 | 用途 |
|------|------|------|
| **React** | 18.x | UI框架 |
| **TypeScript** | 5.x | 类型安全 |
| **Next.js** | 14.x | SSR/SSG + App Router |
| **Zustand** | 4.x | 轻量状态管理（UI状态） |
| **Redux Toolkit** | 2.x | 复杂业务状态（交易、审核流程） |
| **RTK Query** | 内置 | API数据获取与缓存 |
| **Ant Design** | 5.x | 企业级UI组件库 |
| **ECharts / Recharts** | 最新 | 数据可视化 |
| **TanStack Table** | 8.x | 高性能数据表格 |
| **React Hook Form** | 7.x | 表单管理 |
| **Zod** | 3.x | 运行时类型校验 |

---

## 2. 项目结构

```
genex-admin/
├── src/
│   ├── app/                          # Next.js App Router
│   │   ├── layout.tsx                # 根布局
│   │   ├── page.tsx                  # Dashboard首页
│   │   ├── (auth)/                   # 认证路由组
│   │   │   ├── login/page.tsx
│   │   │   └── layout.tsx
│   │   ├── (dashboard)/              # 管理面板路由组
│   │   │   ├── layout.tsx            # 侧边栏+顶栏布局
│   │   │   ├── users/                # 用户管理
│   │   │   ├── issuers/              # 发行方管理
│   │   │   ├── coupons/              # 券管理
│   │   │   ├── trading/              # 交易监控
│   │   │   ├── compliance/           # 合规管理
│   │   │   ├── risk/                 # 风控中心
│   │   │   ├── finance/              # 财务管理
│   │   │   ├── chain/                # 链上监控
│   │   │   └── system/               # 系统管理
│   ├── components/
│   │   ├── ui/                       # 基础UI组件
│   │   ├── business/                 # 业务组件
│   │   └── ai-agent/                 # AI Agent组件
│   ├── features/                     # 功能模块（Redux slices）
│   │   ├── auth/
│   │   ├── users/
│   │   ├── issuers/
│   │   ├── coupons/
│   │   ├── trading/
│   │   ├── compliance/
│   │   └── risk/
│   ├── services/                     # API服务层
│   │   ├── api.ts                    # RTK Query base API
│   │   └── endpoints/                # 按模块分的API端点
│   ├── stores/                       # Zustand stores
│   │   ├── ui-store.ts               # UI状态（侧边栏、主题）
│   │   └── ai-agent-store.ts         # AI Agent状态
│   ├── hooks/                        # 自定义Hooks
│   ├── lib/                          # 工具函数
│   │   ├── constants.ts
│   │   ├── utils.ts
│   │   └── types.ts
│   └── styles/                       # 全局样式
├── public/
├── tests/
├── next.config.js
├── tailwind.config.ts
└── package.json
```

---

## 3. 状态管理策略

### Zustand vs Redux Toolkit 分工

| 类型 | 工具 | 场景 |
|------|------|------|
| **UI状态** | Zustand | 侧边栏折叠、主题切换、弹窗控制 |
| **服务端数据** | RTK Query | API数据获取、缓存、自动刷新 |
| **复杂业务流** | Redux Toolkit | 审核流程、交易状态机、多步骤表单 |
| **AI Agent** | Zustand | 对话历史、Agent面板状态 |

### 3.1 RTK Query API定义

```typescript
// src/services/api.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: '/api/v1',
    prepareHeaders: (headers) => {
      const token = getToken();
      if (token) headers.set('Authorization', `Bearer ${token}`);
      return headers;
    },
  }),
  tagTypes: ['Users', 'Issuers', 'Coupons', 'Orders', 'Compliance'],
  endpoints: () => ({}),
});
```

```typescript
// src/services/endpoints/issuers.ts
export const issuerApi = api.injectEndpoints({
  endpoints: (builder) => ({
    getIssuers: builder.query<PaginatedResult<Issuer>, IssuerQuery>({
      query: (params) => ({ url: '/issuers', params }),
      providesTags: ['Issuers'],
    }),
    approveIssuer: builder.mutation<void, { id: string; decision: 'approve' | 'reject' }>({
      query: ({ id, ...body }) => ({
        url: `/issuers/${id}/review`,
        method: 'POST',
        body,
      }),
      invalidatesTags: ['Issuers'],
    }),
  }),
});
```

### 3.2 Zustand UI Store

```typescript
// src/stores/ui-store.ts
import { create } from 'zustand';

interface UiState {
  sidebarCollapsed: boolean;
  theme: 'light' | 'dark';
  toggleSidebar: () => void;
  setTheme: (theme: 'light' | 'dark') => void;
}

export const useUiStore = create<UiState>((set) => ({
  sidebarCollapsed: false,
  theme: 'light',
  toggleSidebar: () => set((s) => ({ sidebarCollapsed: !s.sidebarCollapsed })),
  setTheme: (theme) => set({ theme }),
}));
```

---

## 4. 核心页面模块

### 4.1 Dashboard 首页

- 关键指标卡片：日交易量、活跃用户、新发行方、待审核数
- 交易量趋势图（ECharts线图）
- 异常交易告警列表
- AI洞察面板

### 4.2 用户管理

- 用户列表（TanStack Table，支持搜索/排序/分页）
- KYC审核详情
- 用户资产查看（我的券、余额、交易记录）
- 风控标记用户处理

### 4.3 发行方管理

```typescript
// 发行方审核流程
interface IssuerReview {
  issuerId: string;
  companyName: string;
  businessLicense: string;
  documents: Document[];
  creditRating: CreditRating;
  aiRiskScore: number;          // AI预审风险分
  aiRiskFlags: string[];        // AI标记的风险点
  reviewStatus: 'pending' | 'approved' | 'rejected';
}
```

| 功能 | 说明 |
|------|------|
| 入驻审核 | AI预审+人工复核，标记风险点 |
| 信用管理 | 查看/调整信用评级，额度管理 |
| 发行监控 | 发行量、兑付率、Breakage率监控 |
| 违约处理 | 降级、冻结发行、账户冻结 |

### 4.4 交易监控

- 实时交易流（WebSocket推送）
- 订单簿深度图
- 异常交易检测告警
- 做市商活动监控

### 4.5 合规管理

```typescript
interface ComplianceCase {
  id: string;
  type: 'KYC' | 'AML' | 'OFAC' | 'TravelRule';
  severity: 'low' | 'medium' | 'high' | 'critical';
  status: 'open' | 'investigating' | 'resolved' | 'escalated';
  aiAnalysis: string;           // AI合规分析
  suggestedAction: string;      // AI建议操作
}
```

### 4.6 风控中心

- 风控仪表盘（实时风险指标）
- 异常交易图谱（关联分析可视化）
- 自动冻结记录
- SAR（可疑交易报告）管理

### 4.7 系统管理

| 页面 | 功能 |
|------|------|
| 管理员账号 | 管理员列表、RBAC角色权限、操作日志 |
| 系统配置 | 手续费率、KYC阈值、交易限额 |
| 合约管理 | 合约部署状态、升级提案、升级日志 |
| 系统监控 | 服务健康、API响应时间、Genex Chain节点状态 |

---

## 5. AI Agent 集成

### 5.1 管理端AI Agent功能

| 场景 | AI能力 | UI实现 |
|------|--------|--------|
| 风险预警 | 实时检测异常交易模式 | 仪表盘AI警告卡片+处理建议 |
| 审核辅助 | AI预审发行方资料，标记风险点 | 审核页面AI评分+风险标签 |
| 合规报告 | 自动生成SAR/CTR/监管报表草稿 | 合规报表页AI生成按钮 |
| 运营洞察 | 分析运营数据，提出优化建议 | Dashboard AI洞察面板 |
| 智能搜索 | 自然语言查询用户/订单/交易 | 全局搜索框支持NL查询 |
| 决策支持 | 手续费率调整建议、额度配置建议 | 系统配置页AI建议标签 |

### 5.2 AI Agent侧边面板

```tsx
// src/components/ai-agent/AgentPanel.tsx
export function AgentPanel() {
  const { messages, sendMessage, isStreaming } = useAgentChat();

  return (
    <Drawer title="AI助手" placement="right" width={400}>
      <ChatMessageList messages={messages} />
      {isStreaming && <StreamingIndicator />}
      <ChatInput onSend={sendMessage} placeholder="描述你要查询或分析的内容..." />
    </Drawer>
  );
}
```

---

## 6. 权限管理（RBAC）

```typescript
// 角色定义
enum AdminRole {
  SuperAdmin = 'super_admin',     // 超级管理员：全部权限
  OperationAdmin = 'ops_admin',   // 运营管理员：用户+发行方+券管理
  ComplianceOfficer = 'compliance', // 合规官：合规+风控
  FinanceAdmin = 'finance_admin', // 财务管理员：财务+结算
  Viewer = 'viewer',              // 只读：仅查看Dashboard
}

// 路由守卫
function AuthGuard({ children, requiredRole }: GuardProps) {
  const { user } = useAuth();
  if (!hasPermission(user.role, requiredRole)) {
    return <ForbiddenPage />;
  }
  return children;
}
```

---

## 7. 实时数据

```typescript
// WebSocket连接管理
class AdminWebSocket {
  private ws: WebSocket;

  connect() {
    this.ws = new WebSocket('wss://api.gogenex.com/admin/ws');
    this.ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      switch (data.type) {
        case 'trade_alert':
          store.dispatch(addTradeAlert(data.payload));
          break;
        case 'risk_warning':
          store.dispatch(addRiskWarning(data.payload));
          break;
        case 'chain_event':
          store.dispatch(updateChainStatus(data.payload));
          break;
      }
    };
  }
}
```

---

## 8. 测试策略

| 类型 | 工具 | 覆盖 |
|------|------|------|
| 单元测试 | Vitest | Redux slices、工具函数、Hooks |
| 组件测试 | React Testing Library | 关键表单、表格、弹窗 |
| E2E测试 | Playwright | 审核流程、配置变更、报表导出 |

---

## 9. 部署

```yaml
# Next.js部署配置
# Docker + Kubernetes
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./
RUN npm ci --production
EXPOSE 3000
CMD ["npm", "start"]
```

---

## 10. 数据报表与分析

### 10.1 平台数据报表

```typescript
// src/features/reports/types.ts
interface PlatformReport {
  type: 'daily' | 'monthly' | 'quarterly';
  metrics: {
    totalTransactionVolume: number;
    totalTransactionAmount: number;
    activeUsers: number;
    newIssuers: number;
    avgDiscountRate: number;
    platformRevenue: number; // 手续费收入
    breakageRevenue: number;
  };
}
```

### 10.2 用户行为分析

```typescript
// src/features/analytics/user-analytics.ts
interface UserBehaviorAnalytics {
  registrationFunnel: FunnelData;      // 注册→KYC→首次交易转化率
  retentionRate: RetentionData;        // 留存率（日/周/月）
  activeUserTrend: TimeSeriesData;     // DAU/WAU/MAU
  tradingPatterns: TradingPatternData; // 交易行为模式
  kycLevelDistribution: PieData;       // KYC等级分布
  walletModeDistribution: PieData;     // 标准/Pro模式占比
}
```

### 10.3 券类别分析

```typescript
// src/features/analytics/coupon-analytics.ts
interface CouponCategoryAnalytics {
  byIndustry: CategoryBreakdown[];    // 按行业（餐饮/购物/娱乐）
  byTemplate: CategoryBreakdown[];    // 按模板（满减/折扣/礼品卡/储值）
  byIssuerTier: CategoryBreakdown[];  // 按发行方层级
  redemptionByCategory: BarData;      // 各品类兑付率
  breakageByCategory: BarData;        // 各品类Breakage率
  priceDistribution: HistogramData;   // 价格分布
}
```

---

## 11. 税务合规报表

### 11.1 IRS 1099报表管理

```typescript
// src/features/compliance/tax-reports.ts
interface Tax1099Management {
  // IRS Form 1099-DA/1099-B 生成与管理
  generateBatch: (taxYear: number) => Promise<Tax1099Report[]>;
  reviewReport: (reportId: string) => Promise<Tax1099Report>;
  submitToIRS: (reportIds: string[]) => Promise<SubmissionResult>;
  userPortalExport: (userId: string, taxYear: number) => Promise<TaxDocument>;
}

// 1099报表页面
export function Tax1099Page() {
  const [taxYear, setTaxYear] = useState(2025);
  const reports = useQuery(['tax1099', taxYear], () => taxApi.getReports(taxYear));

  return (
    <div>
      <YearSelector value={taxYear} onChange={setTaxYear} />
      <StatsCards>
        <Card title="需生成1099" value={reports.pendingCount} />
        <Card title="已生成" value={reports.generatedCount} />
        <Card title="已提交IRS" value={reports.submittedCount} />
      </StatsCards>
      <Button onClick={() => taxApi.generateBatch(taxYear)}>批量生成1099</Button>
      <TanStackTable data={reports.data} columns={tax1099Columns} />
    </div>
  );
}
```

### 11.2 FATCA跨境税务

```typescript
interface FatcaReport {
  foreignAccountHolders: ForeignUser[];
  totalUsSourceIncome: number;
  reportingStatus: 'pending' | 'submitted';
}
```

---

## 12. 消费者保护与虚假宣传监控

```typescript
// src/features/compliance/consumer-protection.ts
interface ConsumerProtectionCase {
  id: string;
  type: 'misleading_description' | 'false_advertising' | 'undisclosed_conditions';
  couponId: string;
  issuerId: string;
  reportedBy: 'user' | 'ai_scan' | 'admin';
  evidence: {
    couponDescription: string;        // 券描述
    actualRedemptionInfo: string;     // 实际兑付情况
    discrepancy: string;              // 差异说明
  };
  status: 'reported' | 'investigating' | 'confirmed' | 'dismissed';
  action: 'warning' | 'delist' | 'suspend_issuer' | 'none';
}

// AI扫描券描述一致性
export function FalseAdvertisingMonitor() {
  return (
    <div>
      <h3>虚假宣传监控</h3>
      {/* AI自动扫描所有上架券的描述 vs 实际兑付记录 */}
      <AlertList alerts={consumerProtectionAlerts} />
      {/* 手动审查队列 */}
      <CaseQueue cases={pendingCases} onResolve={handleResolve} />
    </div>
  );
}
```

---

## 13. SOX审计模块

```typescript
// src/features/compliance/sox-audit.ts
interface SoxAuditDashboard {
  // Section 302: CEO/CFO认证追踪
  certifications: CertificationRecord[];
  // Section 404: 内部控制评估
  internalControls: InternalControlAssessment[];
  // 智能合约升级审计追踪
  contractUpgradeAudit: ContractUpgradeLog[];
  // 链上记录与GAAP对账
  chainToGaapReconciliation: ReconciliationReport;
}

interface ContractUpgradeLog {
  proposalId: string;
  contractName: string;
  oldImplementation: string;
  newImplementation: string;
  proposedBy: string;
  approvedBy: string[];           // 多签审批人
  timelockExpiry: Date;
  executedAt: Date;
  auditReport: string;           // 第三方审计报告链接
}

// SOX审计页面
export function SoxAuditPage() {
  return (
    <Tabs>
      <Tab label="内部控制">
        <InternalControlMatrix />
      </Tab>
      <Tab label="合约升级日志">
        <ContractUpgradeAuditTrail />
      </Tab>
      <Tab label="链上对账">
        <ChainGaapReconciliation />
      </Tab>
      <Tab label="操作审计日志">
        <AuditLogViewer />  {/* 全链路操作日志，append-only */}
      </Tab>
    </Tabs>
  );
}
```

---

## 14. 财务管理

### 14.1 手续费管理

```typescript
// src/features/finance/fee-management.ts
interface FeeConfiguration {
  tradingFees: {
    takerBuy: number;    // 0.5%
    takerSell: number;
    makerBuy: number;    // 0.1%
    makerSell: number;
  };
  issuanceFees: Record<IssuerTier, number>;
  breakageSharePercent: number; // 平台Breakage分润比例
}

// 手续费收入仪表盘
export function FeeRevenueDashboard() {
  return (
    <div>
      <RevenueCards>
        <Card title="交易手续费" value={tradingFeeRevenue} />
        <Card title="发行服务费" value={issuanceFeeRevenue} />
        <Card title="Breakage分润" value={breakageRevenue} />
        <Card title="增值服务" value={vasRevenue} />
      </RevenueCards>
      <RevenueChart data={revenueTimeSeries} />
    </div>
  );
}
```

### 14.2 结算管理

```typescript
// 发行方结算管理
interface SettlementManagement {
  pendingSettlements: SettlementBatch[];
  completedSettlements: SettlementBatch[];
  issuerBalances: IssuerBalance[];
  withdrawalRequests: WithdrawalRequest[];
}
```

---

## 15. 争议与仲裁处理

```typescript
// src/features/disputes/types.ts
interface DisputeCase {
  id: string;
  type: 'buyer_complaint' | 'seller_complaint' | 'refund_request';
  status: 'submitted' | 'evidence_collection' | 'arbitration' | 'resolved' | 'escalated';
  orderId: string;
  buyerId: string;
  sellerId: string;
  chainEvidence: {
    txHash: string;
    blockNumber: number;
    timestamp: Date;
    transferRecord: string;
  };
  sla: {
    responseDeadline: Date;    // 24h响应
    resolutionDeadline: Date;  // 72h处理
  };
  arbitrationDecision?: {
    decidedBy: string;
    decision: 'refund' | 'reject' | 'partial_refund';
    reason: string;
  };
}

// 争议处理页面
export function DisputeManagementPage() {
  return (
    <div>
      <SlaOverview />
      <DisputeList
        columns={[
          { key: 'id', title: '工单号' },
          { key: 'type', title: '类型' },
          { key: 'status', title: '状态' },
          { key: 'sla', title: 'SLA倒计时', render: (sla) => <SlaCountdown deadline={sla.resolutionDeadline} /> },
          { key: 'actions', title: '操作', render: (_, row) => <ArbitrationActions dispute={row} /> },
        ]}
      />
    </div>
  );
}
```

---

## 16. Web商户核销后台

```typescript
// src/app/(dashboard)/merchant-redemption/page.tsx
// 门店管理员通过浏览器核销+查看核销记录
export default function MerchantRedemptionPage() {
  return (
    <div>
      <h2>Web端核销后台</h2>

      {/* 输码核销 */}
      <Card title="核销券">
        <Input placeholder="输入券码" />
        <Button type="primary">查询并核销</Button>
      </Card>

      {/* 核销记录 */}
      <Card title="核销记录">
        <DateRangePicker />
        <TanStackTable
          data={redemptionRecords}
          columns={[
            { key: 'couponCode', title: '券码' },
            { key: 'couponName', title: '券名' },
            { key: 'faceValue', title: '面值' },
            { key: 'operator', title: '核销员' },
            { key: 'store', title: '门店' },
            { key: 'time', title: '核销时间' },
            { key: 'status', title: '状态' },
          ]}
        />
      </Card>

      {/* 门店数据汇总 */}
      <StoreRedemptionStats />
    </div>
  );
}
```

---

## 17. 做市商管理

```typescript
// src/features/trading/market-maker-management.ts
interface MarketMakerManagement {
  marketMakers: MarketMaker[];
  obligations: MarketMakerObligation[];
  performanceMetrics: MmPerformanceMetric[];
  violationAlerts: MmViolation[];
}

// 做市商活动监控页面
export function MarketMakerMonitorPage() {
  return (
    <div>
      <h3>做市商监控</h3>
      <MmPerformanceTable data={marketMakers} />
      {/* Spoofing/Layering检测告警 */}
      <ManipulationAlerts alerts={spoofingAlerts} />
      {/* 做市义务合规检查 */}
      <ObligationComplianceCheck />
    </div>
  );
}
```

---

## 18. Nasdaq上市合规管理

### 18.1 SEC Filing管理

```typescript
// src/features/compliance/sec-filing.ts
interface SecFiling {
  type: '10-K' | '10-Q' | '8-K' | 'S-1' | 'Form ATS' | 'Form ATS-N';
  status: 'drafting' | 'internal_review' | 'legal_review' | 'filed' | 'accepted';
  period?: string;            // 报告期间（如 "FY2027", "Q1 2027"）
  dueDate: Date;
  filedDate?: Date;
  preparedBy: string;
  reviewedBy: string[];
  secEdgarLink?: string;       // SEC EDGAR提交链接
  attachments: FilingAttachment[];
}

interface FilingSchedule {
  annual: { type: '10-K', deadline: '年度结束后60天（加速申报人）' };
  quarterly: { type: '10-Q', deadline: '季度结束后40天' };
  materialEvent: { type: '8-K', deadline: '事件发生后4个工作日' };
}

// SEC Filing管理页面
export function SecFilingManagementPage() {
  return (
    <div>
      <h2>SEC Filing管理</h2>

      {/* Filing日历 */}
      <Card title="申报日历">
        <FilingCalendar
          filings={upcomingFilings}
          onSelect={(filing) => openFilingDetail(filing)}
        />
      </Card>

      {/* 10-K/10-Q编制追踪 */}
      <Card title="定期报告">
        <TanStackTable
          data={periodicFilings}
          columns={[
            { key: 'type', title: '类型' },
            { key: 'period', title: '报告期' },
            { key: 'status', title: '状态', render: (s) => <FilingStatusBadge status={s} /> },
            { key: 'dueDate', title: '截止日期', render: (d) => <DueDateCountdown date={d} /> },
            { key: 'preparedBy', title: '编制人' },
            { key: 'actions', title: '操作', render: (_, row) => (
              <>
                <Button onClick={() => openDraft(row)}>编辑</Button>
                <Button onClick={() => submitForReview(row)}>提交审核</Button>
              </>
            )},
          ]}
        />
      </Card>

      {/* 8-K重大事件快速申报 */}
      <Card title="8-K重大事件">
        <Button type="primary" onClick={create8K}>新建8-K申报</Button>
        <EventList events={materialEvents} />
      </Card>
    </div>
  );
}
```

### 18.2 牌照与注册管理

```typescript
// src/features/compliance/license-management.ts
interface LicenseRecord {
  type: 'MSB' | 'MTL' | 'BitLicense' | 'DFAL' | 'Broker-Dealer' | 'Form ATS';
  jurisdiction: string;       // 联邦 / 州名
  regulatoryBody: string;     // FinCEN / NYDFS / SEC等
  status: 'active' | 'pending' | 'expired' | 'not_applied';
  obtainedDate?: Date;
  expiryDate?: Date;
  renewalDate?: Date;
  applicationRef?: string;
  notes: string;
}

// 牌照看板
export function LicenseDashboardPage() {
  return (
    <div>
      <h2>牌照与注册状态</h2>

      {/* 联邦级牌照 */}
      <Card title="联邦级">
        <LicenseStatusCard license={msbLicense} icon="federal" />
      </Card>

      {/* 州级MTL地图 */}
      <Card title="州级MTL覆盖">
        <UsStateMap
          data={stateLicenses}
          colorScale={{
            active: 'green',
            pending: 'yellow',
            not_applied: 'gray',
            restricted: 'red',
          }}
          onClick={(state) => openStateDetail(state)}
        />
        <StateLicenseTable data={stateLicenses} />
      </Card>

      {/* 到期提醒 */}
      <Card title="续期提醒">
        <RenewalAlertList licenses={expiringLicenses} />
      </Card>
    </div>
  );
}
```

### 18.3 商业保险管理

```typescript
// src/features/compliance/insurance-management.ts
interface InsurancePolicy {
  type: 'D&O' | 'E&O' | 'CYBER' | 'FIDELITY' | 'GL';
  name: string;
  carrier: string;
  policyNumber: string;
  coverageAmount: number;
  annualPremium: number;
  effectiveDate: Date;
  expiryDate: Date;
  status: 'active' | 'expiring_soon' | 'expired' | 'not_purchased';
  isAdequate: boolean;        // 覆盖额度是否满足要求
}

// 保险管理页面
export function InsuranceManagementPage() {
  return (
    <div>
      <h2>商业保险管理</h2>

      {/* 保险概览卡片 */}
      <Row gutter={16}>
        {insurancePolicies.map(policy => (
          <Col span={8} key={policy.type}>
            <InsurancePolicyCard
              policy={policy}
              required={requiredPolicies[policy.type]}
            />
          </Col>
        ))}
      </Row>

      {/* 保险充足性分析 */}
      <Card title="覆盖充足性">
        <CoverageAdequacyChart
          policies={insurancePolicies}
          benchmarks={industryBenchmarks}
        />
      </Card>

      {/* 到期/续期日历 */}
      <Card title="续期日历">
        <InsuranceRenewalCalendar policies={insurancePolicies} />
      </Card>
    </div>
  );
}
```

### 18.4 IPO准备清单

```typescript
// src/features/compliance/ipo-readiness.ts
interface IpoChecklistItem {
  category: 'legal' | 'financial' | 'compliance' | 'governance' | 'insurance' | 'technical';
  item: string;
  status: 'completed' | 'in_progress' | 'not_started' | 'blocked';
  owner: string;
  targetDate: Date;
  dependencies: string[];
  notes: string;
}

// IPO准备看板
export function IpoReadinessPage() {
  const categories = [
    {
      name: '法律与牌照',
      items: [
        { item: 'MSB注册（FinCEN Form 107）', status: 'completed' },
        { item: '州级MTL（49州+DC）', status: 'in_progress' },
        { item: 'NY BitLicense', status: 'in_progress' },
        { item: '券法律属性意见书', status: 'not_started' },
        { item: 'GNX代币法律分类', status: 'not_started' },
      ],
    },
    {
      name: '财务与审计',
      items: [
        { item: '聘请PCAOB注册审计师', status: 'not_started' },
        { item: '2年+经审计GAAP财报', status: 'not_started' },
        { item: 'FASB ASU 2023-08数字资产会计', status: 'not_started' },
        { item: 'ASC 606收入确认（Breakage/递延负债）', status: 'in_progress' },
        { item: '链上数据与GAAP对账机制', status: 'in_progress' },
      ],
    },
    {
      name: 'SOX合规',
      items: [
        { item: 'Section 302 CEO/CFO认证流程', status: 'in_progress' },
        { item: 'Section 404(a) 内部控制评估', status: 'not_started' },
        { item: 'Section 404(b) 外部审计师审计', status: 'not_started' },
        { item: '智能合约升级审计追踪', status: 'completed' },
      ],
    },
    {
      name: '公司治理',
      items: [
        { item: '独立董事（多数席位）', status: 'not_started' },
        { item: '审计委员会（全部独立董事）', status: 'not_started' },
        { item: '薪酬委员会', status: 'not_started' },
        { item: 'SEC注册声明（Form S-1）', status: 'not_started' },
      ],
    },
    {
      name: '商业保险',
      items: [
        { item: 'D&O保险（匹配市值）', status: 'not_started' },
        { item: 'E&O专业责任险', status: 'not_started' },
        { item: '网络安全险（覆盖数字资产托管）', status: 'not_started' },
        { item: '忠诚保证金', status: 'not_started' },
      ],
    },
  ];

  return (
    <div>
      <h2>IPO准备清单</h2>
      <OverallProgress categories={categories} />
      {categories.map(cat => (
        <Card key={cat.name} title={cat.name}>
          <ChecklistTable items={cat.items} />
        </Card>
      ))}
      <TimelineGantt categories={categories} ipoTargetDate={ipoTarget} />
    </div>
  );
}
```

---

*文档版本: v2.1*
*基于: Genex 券交易平台 - 软件需求规格说明书 v4.1*
*技术栈: React 18 + TypeScript 5 + Next.js 14 + Zustand + Redux Toolkit*
*更新: v2.1补充Nasdaq上市合规管理（SEC Filing/牌照管理/商业保险/IPO准备清单）*