@appthen/cli 1.2.11 → 1.2.12

package/tests/test-app/src/pages/data-overview.tsx

@@ -0,0 +1,600 @@
+/**
+ * 数据分析中心 - 业务监控大屏
+ * 实时监控业务数据，提供多维度分析
+ *
+ * @type Page
+ * @route /data-overview
+ * @screen 1920w
+ * @frames web
+ */
+import React from 'react';
+
+
+
+class IProps {
+  autoRefresh?: boolean;
+  refreshInterval?: number;
+}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  /* 总销售额 */
+  totalSales?: number;
+  /* 今日访问 */
+  todayVisits?: number;
+  /* 新增用户 */
+  newUsers?: number;
+  /* 转化率 */
+  conversionRate?: number;
+  /* 平均客单价 */
+  avgOrderValue?: number;
+  /* 完成订单 */
+  completedOrders?: number;
+  /* 退款率 */
+  refundRate?: number;
+  /* 客户满意度 */
+  satisfactionRate?: number;
+  /* 销售数据（月份） */
+  monthlySales?: {
+    /* @example 1月 */month?: string,
+    /* @example 185000 */sales?: number,
+    /* @example 150000 */target?: number,
+  }[];
+  /* 分类销售占比 */
+  categorySales?: {
+    /* @example 电子产品 */name?: string,
+    /* @example 45 */value?: number,
+    /* @example #3b82f6 */color?: string,
+    /* @example 📱 */icon?: string,
+  }[];
+  /* 渠道流量 */
+  channelTraffic?: {
+    /* @example 直接访问 */name?: string,
+    /* @example 42 */value?: number,
+    /* @example #6366f1 */color?: string,
+  }[];
+  /* 热门地区 */
+  hotRegions?: {
+    /* @example 广东省 */name?: string,
+    /* @example 2850 */value?: number,
+    /* @example 22.5 */percentage?: number,
+  }[];
+  /* 活跃时段 */
+  activeHours?: {
+    /* @example 0-2 */hour?: string,
+    /* @example 320 */value?: number,
+  }[];
+  /* 最新活动 */
+  recentActivities?: {
+    /* @example order */type?: string,
+    /* @example 用户 28563 */user?: string,
+    /* @example 完成了一笔订单 */action?: string,
+    /* @example ¥12,580 */amount?: string,
+    /* @example 2分钟前 */time?: string,
+  }[];
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    totalSales: 2847560,
+    todayVisits: 15680,
+    newUsers: 892,
+    conversionRate: 4.8,
+    avgOrderValue: 385,
+    completedOrders: 7390,
+    refundRate: 2.1,
+    satisfactionRate: 96.5,
+    monthlySales: [
+      { month: '1月', sales: 185000, target: 150000 },
+      { month: '2月', sales: 223000, target: 150000 },
+      { month: '3月', sales: 278000, target: 200000 },
+      { month: '4月', sales: 245000, target: 200000 },
+      { month: '5月', sales: 312000, target: 250000 },
+      { month: '6月', sales: 356000, target: 300000 },
+      { month: '7月', sales: 398000, target: 350000 },
+      { month: '8月', sales: 425000, target: 350000 },
+      { month: '9月', sales: 368000, target: 350000 },
+      { month: '10月', sales: 389000, target: 350000 },
+      { month: '11月', sales: 456000, target: 400000 },
+      { month: '12月', sales: 512000, target: 500000 },
+    ],
+    categorySales: [
+      { name: '电子产品', value: 45, color: '#3b82f6', icon: '📱' },
+      { name: '服装服饰', value: 28, color: '#10b981', icon: '👕' },
+      { name: '家居生活', value: 15, color: '#f59e0b', icon: '🏠' },
+      { name: '食品饮料', value: 8, color: '#ef4444', icon: '🍔' },
+      { name: '其他', value: 4, color: '#8b5cf6', icon: '📦' },
+    ],
+    channelTraffic: [
+      { name: '直接访问', value: 42, color: '#6366f1' },
+      { name: '搜索引擎', value: 28, color: '#ec4899' },
+      { name: '社交媒体', value: 18, color: '#14b8a6' },
+      { name: '广告投放', value: 8, color: '#f97316' },
+      { name: '其他', value: 4, color: '#84cc16' },
+    ],
+    hotRegions: [
+      { name: '广东省', value: 2850, percentage: 22.5 },
+      { name: '浙江省', value: 2180, percentage: 17.2 },
+      { name: '江苏省', value: 1920, percentage: 15.1 },
+      { name: '北京市', value: 1560, percentage: 12.3 },
+      { name: '上海市', value: 1420, percentage: 11.2 },
+    ],
+    activeHours: [
+      { hour: '0-2', value: 320 },
+      { hour: '2-4', value: 180 },
+      { hour: '4-6', value: 150 },
+      { hour: '6-8', value: 520 },
+      { hour: '8-10', value: 1850 },
+      { hour: '10-12', value: 2380 },
+      { hour: '12-14', value: 1960 },
+      { hour: '14-16', value: 2250 },
+      { hour: '16-18', value: 2680 },
+      { hour: '18-20', value: 3150 },
+      { hour: '20-22', value: 2850 },
+      { hour: '22-24', value: 890 },
+    ],
+    recentActivities: [
+      {
+        type: 'order',
+        user: '用户 28563',
+        action: '完成了一笔订单',
+        amount: '¥12,580',
+        time: '2分钟前',
+      },
+      {
+        type: 'register',
+        user: '新用户',
+        action: '注册成功',
+        amount: '-',
+        time: '5分钟前',
+      },
+      {
+        type: 'refund',
+        user: '用户 18234',
+        action: '申请退款',
+        amount: '¥3,280',
+        time: '8分钟前',
+      },
+      {
+        type: 'review',
+        user: '用户 45921',
+        action: '发布了评价',
+        amount: '⭐⭐⭐⭐⭐',
+        time: '12分钟前',
+      },
+      {
+        type: 'order',
+        user: '用户 67123',
+        action: '完成了一笔订单',
+        amount: '¥8,950',
+        time: '15分钟前',
+      },
+    ],
+  };
+
+  componentDidMount() {
+    this.loadData();
+  }
+
+  async loadData() {
+    // 加载数据逻辑
+  }
+
+  getActivityIcon(type) {
+    const icons = {
+      order: '🛒',
+      register: '👤',
+      refund: '↩️',
+      review: '⭐',
+    };
+    return icons[type] || '📌';
+  }
+
+  getActivityColor(type) {
+    const colors = {
+      order: 'bg-green-100 text-green-700',
+      register: 'bg-blue-100 text-blue-700',
+      refund: 'bg-red-100 text-red-700',
+      review: 'bg-yellow-100 text-yellow-700',
+    };
+    return colors[type] || 'bg-gray-100 text-gray-700';
+  }
+
+  render() {
+    return (
+      <Page className="bg-gradient-to-br from-[#0f172a] via-purple-900 to-[#0f172a] min-h-screen">
+        <View className="bg-slate-900/50 backdrop-blur-md border-white/10 pl-[32px] pr-[32px] pt-[24px] pb-[24px] border-b-[1px] border-b-solid">
+          <View className="flex items-center justify-between ml-[auto] mr-[auto]">
+            <View>
+              <h1 className="bg-gradient-to-r from-blue-400 via-purple-400 to-[#f472b6] [WebkitBackgroundClip:text] [WebkitTextFillColor:transparent] [backgroundClip:text] [backgroundClip:text] [WebkitBackgroundClip:text] text-[transparent] text-3xl font-bold">
+                🎯 数据分析中心
+              </h1>
+              <p className="text-[#9ca3af] mt-[4px]">
+                实时监控 · 智能分析 · 数据驱动
+              </p>
+            </View>
+            <View className="space-x-4 flex items-center">
+              <View className="bg-green-500/20 border-green-500/30 pl-[16px] pr-[16px] pt-[8px] pb-[8px] rounded-full border border-solid">
+                <Text className="text-[var(--green-400)] text-sm font-medium">
+                  ● 系统运行中
+                </Text>
+              </View>
+              <button
+                onClick={() => this.loadData()}
+                className="hover:shadow-lg hover:scale-105 transition-all duration-300 bg-gradient-to-r from-purple-500 to-[#ec4899] pl-[16px] pr-[16px] pt-[8px] pb-[8px] text-[#ffffff] rounded-lg font-medium"
+              >
+                🔄 刷新
+              </button>
+            </View>
+          </View>
+        </View>
+        <View className="p-[32px] ml-[auto] mr-[auto]">
+          <Row gutter={[24, 24]} className="mb-[32px]">
+            <Col xs={24} sm={12} lg={6}>
+              <View className="backdrop-blur-sm border-blue-500/30 hover:shadow-2xl hover:border-blue-400/50 transition-all duration-300 group bg-gradient-to-br from-[var(--blue-500/20)] to-[var(--blue-600/10)] border border-solid rounded-2xl p-[24px]">
+                <View className="flex items-center justify-between mb-[16px]">
+                  <View className="group-hover:scale-110 transition-transform duration-300 text-4xl">
+                    💰
+                  </View>
+                  <View className="bg-green-500/20 pl-[12px] pr-[12px] pt-[4px] pb-[4px] rounded-full text-[var(--green-400)] text-sm font-medium">
+                    +15.2%
+                  </View>
+                </View>
+                <View className="text-[#9ca3af] text-sm mb-[4px]">
+                  总销售额
+                </View>
+                <View className="text-3xl font-bold text-[#ffffff] mb-[8px]">
+                  ¥<Text>{this.state.totalSales?.toLocaleString()}</Text>
+                </View>
+                <View className="text-[#6b7280] text-xs">目标达成率 96.8%</View>
+              </View>
+            </Col>
+            <Col xs={24} sm={12} lg={6}>
+              <View className="backdrop-blur-sm border-purple-500/30 hover:shadow-2xl hover:border-purple-400/50 transition-all duration-300 group bg-gradient-to-br from-[var(--purple-500/20)] to-[var(--purple-600/10)] border border-solid rounded-2xl p-[24px]">
+                <View className="flex items-center justify-between mb-[16px]">
+                  <View className="group-hover:scale-110 transition-transform duration-300 text-4xl">
+                    👁️
+                  </View>
+                  <View className="bg-green-500/20 pl-[12px] pr-[12px] pt-[4px] pb-[4px] rounded-full text-[var(--green-400)] text-sm font-medium">
+                    +8.5%
+                  </View>
+                </View>
+                <View className="text-[#9ca3af] text-sm mb-[4px]">
+                  今日访问
+                </View>
+                <View className="text-3xl font-bold text-[#ffffff] mb-[8px]">
+                  <Text>{this.state.todayVisits?.toLocaleString()}</Text>
+                </View>
+                <View className="text-[#6b7280] text-xs">较昨日增加 1,230</View>
+              </View>
+            </Col>
+            <Col xs={24} sm={12} lg={6}>
+              <View className="backdrop-blur-sm border-pink-500/30 hover:shadow-2xl hover:border-pink-400/50 transition-all duration-300 group bg-gradient-to-br from-[var(--pink-500/20)] to-[var(--pink-600/10)] border border-solid rounded-2xl p-[24px]">
+                <View className="flex items-center justify-between mb-[16px]">
+                  <View className="group-hover:scale-110 transition-transform duration-300 text-4xl">
+                    👥
+                  </View>
+                  <View className="bg-green-500/20 pl-[12px] pr-[12px] pt-[4px] pb-[4px] rounded-full text-[var(--green-400)] text-sm font-medium">
+                    +12.3%
+                  </View>
+                </View>
+                <View className="text-[#9ca3af] text-sm mb-[4px]">
+                  新增用户
+                </View>
+                <View className="text-3xl font-bold text-[#ffffff] mb-[8px]">
+                  <Text>{this.state.newUsers?.toLocaleString()}</Text>
+                </View>
+                <View className="text-[#6b7280] text-xs">用户总数 28,562</View>
+              </View>
+            </Col>
+            <Col xs={24} sm={12} lg={6}>
+              <View className="backdrop-blur-sm border-cyan-500/30 hover:shadow-2xl hover:border-cyan-400/50 transition-all duration-300 group bg-gradient-to-br from-[var(--cyan-500/20)] to-[var(--cyan-600/10)] border border-solid rounded-2xl p-[24px]">
+                <View className="flex items-center justify-between mb-[16px]">
+                  <View className="group-hover:scale-110 transition-transform duration-300 text-4xl">
+                    📊
+                  </View>
+                  <View className="bg-yellow-500/20 pl-[12px] pr-[12px] pt-[4px] pb-[4px] rounded-full text-[var(--yellow-400)] text-sm font-medium">
+                    -2.1%
+                  </View>
+                </View>
+                <View className="text-[#9ca3af] text-sm mb-[4px]">转化率</View>
+                <View className="text-3xl font-bold text-[#ffffff] mb-[8px]">
+                  <Text>{this.state.conversionRate}</Text>%
+                </View>
+                <View className="text-[#6b7280] text-xs">行业平均 3.5%</View>
+              </View>
+            </Col>
+          </Row>
+          <Row gutter={[24, 24]} className="mb-[32px]">
+            <Col xs={24} sm={12} lg={4}>
+              <View className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:bg-slate-700/50 transition-all duration-300 border border-solid rounded-xl p-[16px]">
+                <View className="text-[#9ca3af] text-xs mb-[8px]">
+                  平均客单价
+                </View>
+                <View className="text-xl font-bold text-[#ffffff]">
+                  ¥<Text>{this.state.avgOrderValue}</Text>
+                </View>
+              </View>
+            </Col>
+            <Col xs={24} sm={12} lg={4}>
+              <View className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:bg-slate-700/50 transition-all duration-300 border border-solid rounded-xl p-[16px]">
+                <View className="text-[#9ca3af] text-xs mb-[8px]">
+                  完成订单
+                </View>
+                <View className="text-xl font-bold text-[#ffffff]">
+                  <Text>{this.state.completedOrders?.toLocaleString()}</Text>
+                </View>
+              </View>
+            </Col>
+            <Col xs={24} sm={12} lg={4}>
+              <View className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:bg-slate-700/50 transition-all duration-300 border border-solid rounded-xl p-[16px]">
+                <View className="text-[#9ca3af] text-xs mb-[8px]">退款率</View>
+                <View className="text-xl font-bold text-[#ffffff]">
+                  <Text>{this.state.refundRate}</Text>%
+                </View>
+              </View>
+            </Col>
+            <Col xs={24} sm={12} lg={4}>
+              <View className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:bg-slate-700/50 transition-all duration-300 border border-solid rounded-xl p-[16px]">
+                <View className="text-[#9ca3af] text-xs mb-[8px]">
+                  客户满意度
+                </View>
+                <View className="text-xl font-bold text-[var(--green-400)]">
+                  <Text>{this.state.satisfactionRate}</Text>%
+                </View>
+              </View>
+            </Col>
+          </Row>
+          <Row gutter={[24, 24]} className="mb-[32px]">
+            <Col xs={24}>
+              <View className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:border-purple-500/30 transition-all duration-300 border border-solid rounded-2xl p-[24px]">
+                <View className="flex items-center justify-between mb-[24px]">
+                  <h2 className="text-xl font-bold text-[#ffffff] flex items-center">{`月度销售趋势`}</h2>
+                  <View className="space-x-4 flex items-center text-sm">
+                    <Text className="text-[#9ca3af]">2024年度</Text>
+                    <Text className="bg-green-500/20 pl-[12px] pr-[12px] pt-[4px] pb-[4px] rounded-full text-[var(--green-400)]">
+                      达成率 94.2%
+                    </Text>
+                  </View>
+                </View>
+                <View className="space-y-3">
+                  {this.state.monthlySales.map((item, index) => {
+                    const actualPercent = (item.sales / 520000) * 100;
+                    const targetPercent = (item.target / 520000) * 100;
+                    const isOverTarget = item.sales >= item.target;
+                    return (
+                      <View key={index} className="flex items-center">
+                        <View className="w-[48px] text-[#9ca3af] text-sm">
+                          <Text>{item.month}</Text>
+                        </View>
+                        <View className="space-x-2 flex-1 flex items-center">
+                          <View className="bg-slate-700/50 flex-1 rounded-full h-[24px] overflow-hidden relative">
+                            <View
+                              className="absolute top-0 left-0 h-full bg-gradient-to-r from-purple-500 to-pink-500 transition-all duration-500"
+                              style={{ width: `${actualPercent}%` }}
+                            />
+                            <View
+                              className="absolute top-0 left-0 h-full border-2 border-dashed border-white/30 transition-all duration-500"
+                              style={{ width: `${targetPercent}%` }}
+                            />
+                          </View>
+                        </View>
+                        <View className="w-[96px] text-[var(--right)]">
+                          <View
+                            className={`text-sm font-medium ${
+                              isOverTarget ? 'text-green-400' : 'text-white'
+                            }`}
+                          >
+                            ¥<Text>{(item.sales / 10000).toFixed(1)}</Text>万
+                          </View>
+                        </View>
+                      </View>
+                    );
+                  })}
+                </View>
+                <View className="space-x-6 flex items-center justify-center mt-[16px] text-xs text-[#6b7280]">
+                  <Text className="flex items-center">
+                    <Text className="bg-gradient-to-r from-purple-500 to-[#ec4899] w-[16px] h-[16px] rounded mr-[8px]" />
+                    实际销售
+                  </Text>
+                  <Text className="flex items-center">
+                    <Text className="border-2 border-dashed border-white/30 w-[16px] h-[16px] rounded mr-[8px]" />
+                    目标销售
+                  </Text>
+                </View>
+              </View>
+            </Col>
+          </Row>
+          <Row gutter={[24, 24]} className="mb-[32px]">
+            <Col xs={24} lg={12}>
+              <View className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:border-blue-500/30 transition-all duration-300 border border-solid rounded-2xl p-[24px]">
+                <h2 className="text-xl font-bold text-[#ffffff] mb-[24px] flex items-center">{`分类销售占比`}</h2>
+                <View className="space-y-4">
+                  {this.state.categorySales.map((item, index) => (
+                    <View key={index}>
+                      <View className="flex items-center justify-between mb-[8px]">
+                        <View className="flex items-center">
+                          <Text className="text-2xl mr-[12px]">
+                            {item.icon}
+                          </Text>
+                          <Text className="text-[#d1d5db] font-medium">
+                            {item.name}
+                          </Text>
+                        </View>
+                        <Text className="text-[#ffffff] font-bold">
+                          {item.value}%
+                        </Text>
+                      </View>
+                      <View className="bg-slate-700/50 w-full rounded-full h-[12px] overflow-hidden">
+                        <View
+                          className="h-full rounded-full transition-all duration-500"
+                          style={{
+                            width: `${item.value}%`,
+                            backgroundColor: item.color,
+                          }}
+                        />
+                      </View>
+                    </View>
+                  ))}
+                </View>
+              </View>
+            </Col>
+            <Col xs={24} lg={12}>
+              <View className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:border-pink-500/30 transition-all duration-300 border border-solid rounded-2xl p-[24px]">
+                <h2 className="text-xl font-bold text-[#ffffff] mb-[24px] flex items-center">{`渠道流量来源`}</h2>
+                <View className="space-y-4">
+                  {this.state.channelTraffic.map((item, index) => (
+                    <View key={index}>
+                      <View className="flex items-center justify-between mb-[8px]">
+                        <Text className="text-[#d1d5db] font-medium">
+                          {item.name}
+                        </Text>
+                        <Text className="text-[#ffffff] font-bold">
+                          {item.value}%
+                        </Text>
+                      </View>
+                      <View className="bg-slate-700/50 w-full rounded-full h-[12px] overflow-hidden">
+                        <View
+                          className="h-full rounded-full transition-all duration-500"
+                          style={{
+                            width: `${item.value}%`,
+                            backgroundColor: item.color,
+                          }}
+                        />
+                      </View>
+                    </View>
+                  ))}
+                </View>
+              </View>
+            </Col>
+          </Row>
+          <Row gutter={[24, 24]} className="mb-[32px]">
+            <Col xs={24} lg={12}>
+              <View className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:border-green-500/30 transition-all duration-300 border border-solid rounded-2xl p-[24px]">
+                <h2 className="text-xl font-bold text-[#ffffff] mb-[24px] flex items-center">{`热门地区 TOP 5`}</h2>
+                <View className="space-y-4">
+                  {this.state.hotRegions.map((region, index) => (
+                    <View
+                      key={index}
+                      className="flex items-center justify-between"
+                    >
+                      <View className="flex items-center">
+                        <View
+                          className={`w-8 h-8 rounded-lg flex items-center justify-center mr-3 text-white font-bold ${
+                            index === 0
+                              ? 'bg-gradient-to-br from-yellow-400 to-yellow-600'
+                              : index === 1
+                              ? 'bg-gradient-to-br from-gray-400 to-gray-600'
+                              : index === 2
+                              ? 'bg-gradient-to-br from-orange-400 to-orange-600'
+                              : 'bg-gradient-to-br from-slate-500 to-slate-600'
+                          }`}
+                        >
+                          <Text>{index + 1}</Text>
+                        </View>
+                        <Text className="text-[#d1d5db] font-medium">
+                          {region.name}
+                        </Text>
+                      </View>
+                      <View className="text-[var(--right)]">
+                        <View className="text-[#ffffff] font-bold">
+                          <Text>{region.value?.toLocaleString()}</Text>
+                        </View>
+                        <View className="text-[#6b7280] text-xs">
+                          <Text>{region.percentage}</Text>%
+                        </View>
+                      </View>
+                    </View>
+                  ))}
+                </View>
+              </View>
+            </Col>
+            <Col xs={24} lg={12}>
+              <View className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:border-orange-500/30 transition-all duration-300 border border-solid rounded-2xl p-[24px]">
+                <h2 className="text-xl font-bold text-[#ffffff] mb-[24px] flex items-center">{`活跃时段分布`}</h2>
+                <View className="space-y-2">
+                  {this.state.activeHours.map((item, index) => {
+                    const max = Math.max(
+                      ...this.state.activeHours.map(h => h.value)
+                    );
+                    const percent = (item.value / max) * 100;
+                    const isActive = item.value >= 2000;
+                    return (
+                      <View key={index} className="flex items-center">
+                        <View className="w-[56px] text-[#9ca3af] text-sm">
+                          <Text>{item.hour}</Text>
+                        </View>
+                        <View className="bg-slate-700/50 flex-1 rounded-full h-[20px] overflow-hidden">
+                          <View
+                            className={`h-full rounded-full transition-all duration-300 ${
+                              isActive
+                                ? 'bg-gradient-to-r from-orange-400 to-pink-500'
+                                : 'bg-gradient-to-r from-slate-600 to-slate-500'
+                            }`}
+                            style={{ width: `${percent}%` }}
+                          />
+                        </View>
+                        <View className="w-[64px] text-[#9ca3af] text-sm">
+                          <Text>{item.value}</Text>
+                        </View>
+                      </View>
+                    );
+                  })}
+                </View>
+              </View>
+            </Col>
+          </Row>
+          <Row gutter={[24, 24]}>
+            <Col xs={24}>
+              <View className="bg-slate-800/50 backdrop-blur-sm border-slate-700/50 hover:border-cyan-500/30 transition-all duration-300 border border-solid rounded-2xl p-[24px]">
+                <h2 className="text-xl font-bold text-[#ffffff] mb-[24px] flex items-center">{`最新动态`}</h2>
+                <View className="space-y-3">
+                  {this.state.recentActivities.map((activity, index) => (
+                    <View
+                      key={index}
+                      className="bg-slate-700/30 hover:bg-slate-700/50 transition-all duration-300 flex items-center justify-between p-[16px] rounded-xl cursor-pointer"
+                    >
+                      <View className="flex items-center flex-1">
+                        <View
+                          className={`w-10 h-10 rounded-full flex items-center justify-center mr-4 ${this.getActivityColor(
+                            activity.type
+                          )}`}
+                        >
+                          <Text className="text-lg">
+                            {this.getActivityIcon(activity.type)}
+                          </Text>
+                        </View>
+                        <View className="flex-1">
+                          <View className="space-x-2 flex items-center">
+                            <Text className="text-[#ffffff] font-medium">
+                              {activity.user}
+                            </Text>
+                            <Text className="text-[#9ca3af]">
+                              {activity.action}
+                            </Text>
+                          </View>
+                          <View className="text-[#6b7280] text-sm mt-[4px]">
+                            <Text>{activity.time}</Text>
+                          </View>
+                        </View>
+                      </View>
+                      <View className="text-[var(--right)] ml-[16px]">
+                        <View className="text-[#ffffff] font-bold">
+                          <Text>{activity.amount}</Text>
+                        </View>
+                      </View>
+                    </View>
+                  ))}
+                </View>
+              </View>
+            </Col>
+          </Row>
+        </View>
+      </Page>
+    );
+  }
+}
+
+export default Document;