payment-kit 1.13.217 → 1.13.218

package/api/src/crons/index.ts

@@ -6,9 +6,11 @@ import {
   batchHandleStripePayments,
   batchHandleStripeSubscriptions,
 } from '../integrations/stripe/resource';
+import dayjs from '../libs/dayjs';
 import {
   expiredSessionCleanupCronTime,
   notificationCronTime,
+  paymentStatCronTime,
   revokeStakeCronTime,
   stripeInvoiceCronTime,
   stripePaymentCronTime,
@@ -18,6 +20,7 @@ import {
 import logger from '../libs/logger';
 import { startSubscriptionQueue } from '../queues/subscription';
 import { CheckoutSession } from '../store/models';
+import { createPaymentStat } from './payment-stat';
 import { SubscriptionTrialWillEndSchedule } from './subscription-trial-will-end';
 import { SubscriptionWillCanceledSchedule } from './subscription-will-canceled';
 import { SubscriptionWillRenewSchedule } from './subscription-will-renew';
@@ -83,6 +86,12 @@ function init() {
         fn: checkStakeRevokeTx,
         options: { runOnInit: false },
       },
+      {
+        name: 'payment.stat',
+        time: paymentStatCronTime,
+        fn: () => createPaymentStat(dayjs().subtract(1, 'day').toDate().toISOString()),
+        options: { runOnInit: false },
+      },
     ],
     onError: (error: Error, name: string) => {
       logger.error('run job failed', { name, error: error.message, stack: error.stack });

package/api/src/crons/payment-stat.ts

@@ -0,0 +1,101 @@
+/* eslint-disable no-await-in-loop */
+import fs from 'fs';
+import path from 'path';
+
+import { BN, fromUnitToToken } from '@ocap/util';
+import { Op } from 'sequelize';
+
+import dayjs from '../libs/dayjs';
+import env from '../libs/env';
+import logger from '../libs/logger';
+import { GroupedBN, PaymentCurrency, PaymentIntent, PaymentStat, Payout, Refund } from '../store/models';
+
+export function groupByCurrency(items: { amount: string; currency_id: string }[]) {
+  return items.reduce((acc: GroupedBN, { amount, currency_id }) => {
+    if (!acc[currency_id]) {
+      acc[currency_id] = '0';
+    }
+    acc[currency_id] = new BN(acc[currency_id]).add(new BN(amount)).toString();
+    return acc;
+  }, {});
+}
+
+export async function createPaymentStat(date: string) {
+  const start = dayjs(date).startOf('day');
+  const end = dayjs(date).add(1, 'day').startOf('day');
+  const timestamp = start.unix();
+
+  // group paymentIntents by currency_id
+  const paymentIntents = await PaymentIntent.findAll({
+    where: {
+      updated_at: { [Op.gte]: start.toDate(), [Op.lt]: end.toDate() },
+      status: 'succeeded',
+    },
+    attributes: ['amount', 'currency_id'],
+  });
+  const paymentGrouped = groupByCurrency(paymentIntents);
+
+  // group payouts by currency_id
+  const payouts = await Payout.findAll({
+    where: {
+      updated_at: { [Op.gte]: start.toDate(), [Op.lt]: end.toDate() },
+      status: 'paid',
+    },
+    attributes: ['amount', 'currency_id'],
+  });
+  const payoutGrouped = groupByCurrency(payouts);
+
+  // group refunds by currency_id
+  const refunds = await Refund.findAll({
+    where: {
+      updated_at: { [Op.gte]: start.toDate(), [Op.lt]: end.toDate() },
+      status: 'succeeded',
+    },
+    attributes: ['amount', 'currency_id'],
+  });
+  const refundGrouped = groupByCurrency(refunds);
+
+  // update for insert
+  const currencies = await PaymentCurrency.findAll();
+  await Promise.all(
+    currencies.map(async (currency) => {
+      const exist = await PaymentStat.findOne({ where: { timestamp, currency_id: currency.id } });
+      if (exist) {
+        await exist.update({
+          amount_paid: fromUnitToToken(paymentGrouped[currency.id] || '0', currency.decimal),
+          amount_payout: fromUnitToToken(payoutGrouped[currency.id] || '0', currency.decimal),
+          amount_refund: fromUnitToToken(refundGrouped[currency.id] || '0', currency.decimal),
+        });
+        logger.info('PaymentStat updated', { date, timestamp, currency: currency.symbol });
+      } else {
+        await PaymentStat.create({
+          livemode: currency.livemode,
+          timestamp,
+          currency_id: currency.id,
+          amount_paid: fromUnitToToken(paymentGrouped[currency.id] || '0', currency.decimal),
+          amount_payout: fromUnitToToken(payoutGrouped[currency.id] || '0', currency.decimal),
+          amount_refund: fromUnitToToken(refundGrouped[currency.id] || '0', currency.decimal),
+        });
+        logger.info('PaymentStat created', { date, timestamp, currency: currency.symbol });
+      }
+    })
+  );
+}
+
+export async function ensurePaymentStats() {
+  const lock = path.join(env.dataDir, '.payment_stat.lock');
+  if (fs.existsSync(lock)) {
+    return;
+  }
+
+  const firstPayment = await PaymentIntent.findOne({ order: [['created_at', 'ASC']], attributes: ['created_at'] });
+  if (firstPayment) {
+    const now = dayjs().unix();
+    for (let current = dayjs(firstPayment.created_at); current.unix() < now; current = current.add(1, 'day')) {
+      await createPaymentStat(current.toDate().toISOString());
+    }
+    fs.writeFileSync(lock, '');
+  } else {
+    logger.warn('No payment found, skip payment stat migration');
+  }
+}

package/api/src/hooks/pre-start.ts

@@ -2,6 +2,7 @@ import '@blocklet/sdk/lib/error-handler';
 
 import dotenv from 'dotenv-flow';
 
+import { ensurePaymentStats } from '../crons/payment-stat';
 import { initPaywallResources } from '../libs/resource';
 import { initialize } from '../store/models';
 import { sequelize } from '../store/sequelize';
@@ -12,6 +13,7 @@ dotenv.config({ silent: true });
   try {
     initialize(sequelize);
     await initPaywallResources();
+    await ensurePaymentStats();
     process.exit(0);
   } catch (err) {
     console.error('pre-start error', err.message);

package/api/src/integrations/arcblock/stake.ts

@@ -2,6 +2,7 @@
 /* eslint-disable no-await-in-loop */
 import assert from 'assert';
 
+import { isEthereumDid } from '@arcblock/did';
 import { toStakeAddress } from '@arcblock/did-util';
 import env from '@blocklet/sdk/lib/env';
 import { fromUnitToToken, toBN } from '@ocap/util';
@@ -10,6 +11,7 @@ import { wallet } from '../../libs/auth';
 import { events } from '../../libs/event';
 import logger from '../../libs/logger';
 import { Customer, GroupedBN, PaymentCurrency, PaymentMethod, Subscription } from '../../store/models';
+import { fetchErc20Balance, fetchEtherBalance } from '../ethereum/token';
 
 export async function ensureStakedForGas() {
   const currencies = await PaymentCurrency.findAll({ where: { active: true, is_base_currency: true } });
@@ -201,9 +203,9 @@ export async function getStakeSummaryByDid(did: string, livemode: boolean): Prom
   return results;
 }
 
-export async function getTokenSummaryByDid(did: string, livemode: boolean): Promise<GroupedBN> {
+export async function getTokenSummaryByDid(did: string, livemode: boolean, type?: string): Promise<GroupedBN> {
   const methods = await PaymentMethod.findAll({
-    where: { type: ['arcblock', 'ethereum'], livemode },
+    where: { type, livemode },
     include: [{ model: PaymentCurrency, as: 'payment_currencies' }],
   });
   if (methods.length === 0) {
@@ -224,8 +226,18 @@ export async function getTokenSummaryByDid(did: string, livemode: boolean): Prom
           }
         });
       }
-      if (method.type === 'ethereum') {
-        // FIXME: how do we get balance for ethereum
+      if (method.type === 'ethereum' && isEthereumDid(did)) {
+        const client = method.getEvmClient();
+        await Promise.all(
+          // @ts-ignore
+          method.payment_currencies.map(async (c: PaymentCurrency) => {
+            if (c.contract) {
+              results[c.id] = await fetchErc20Balance(client, c.contract, did);
+            } else {
+              results[c.id] = await fetchEtherBalance(client, did);
+            }
+          })
+        );
       }
     })
   );

package/api/src/libs/env.ts

@@ -1,5 +1,6 @@
 import env from '@blocklet/sdk/lib/env';
 
+export const paymentStatCronTime: string = '0 1 0 * * *'; // 默认每天一次，计算前一天的
 export const subscriptionCronTime: string = process.env.SUBSCRIPTION_CRON_TIME || '0 */30 * * * *'; // 默认每 30 min 行一次
 export const notificationCronTime: string = process.env.NOTIFICATION_CRON_TIME || '0 5 */6 * * *'; // 默认每6个小时执行一次
 export const expiredSessionCleanupCronTime: string = process.env.EXPIRED_SESSION_CLEANUP_CRON_TIME || '0 1 * * * *'; // 默认每小时执行一次

package/api/src/routes/index.ts

@@ -12,6 +12,7 @@ import paymentCurrencies from './payment-currencies';
 import paymentIntents from './payment-intents';
 import paymentLinks from './payment-links';
 import paymentMethods from './payment-methods';
+import paymentStats from './payment-stats';
 import payouts from './payouts';
 import prices from './prices';
 import pricingTables from './pricing-table';
@@ -57,6 +58,7 @@ router.use('/payment-intents', paymentIntents);
 router.use('/payment-links', paymentLinks);
 router.use('/payment-methods', paymentMethods);
 router.use('/payment-currencies', paymentCurrencies);
+router.use('/payment-stats', paymentStats);
 router.use('/prices', prices);
 router.use('/pricing-tables', pricingTables);
 router.use('/products', products);

package/api/src/routes/payment-stats.ts

@@ -0,0 +1,81 @@
+import { Router } from 'express';
+import Joi from 'joi';
+import { Op } from 'sequelize';
+
+import { getTokenSummaryByDid } from '../integrations/arcblock/stake';
+import { createListParamSchema } from '../libs/api';
+import { ethWallet, wallet } from '../libs/auth';
+import dayjs from '../libs/dayjs';
+import { authenticate } from '../libs/security';
+import { Invoice, PaymentIntent, Payout, Refund, Subscription } from '../store/models';
+import { PaymentStat } from '../store/models/payment-stat';
+
+const router = Router();
+const auth = authenticate<PaymentStat>({ component: true, roles: ['owner', 'admin'] });
+
+const schema = createListParamSchema<{ currency_id?: string; start?: number; end?: number }>({
+  currency_id: Joi.string().optional().empty(''),
+  start: Joi.number().positive().optional().empty(''),
+  end: Joi.number().positive().optional().empty(''),
+});
+router.get('/', auth, async (req, res) => {
+  const { page, pageSize, ...query } = await schema.validateAsync(req.query, { stripUnknown: true });
+  const where: any = {};
+
+  if (typeof query.livemode === 'boolean') {
+    where.livemode = query.livemode;
+  }
+  if (query.currency_id) {
+    where.currency_id = query.currency_id;
+  }
+  where.timestamp = {};
+  if (query.start) {
+    where.timestamp[Op.gte] = query.start;
+  } else {
+    where.timestamp[Op.gte] = dayjs().subtract(30, 'days').startOf('day').unix();
+  }
+  if (query.end) {
+    where.timestamp[Op.lt] = query.end;
+  } else {
+    where.timestamp[Op.lt] = dayjs().startOf('day').unix();
+  }
+
+  try {
+    const { rows: list, count } = await PaymentStat.findAndCountAll({
+      where,
+      order: [['created_at', 'ASC']],
+      include: [],
+    });
+
+    res.json({ count, list });
+  } catch (err) {
+    console.error(err);
+    res.json({ count: 0, list: [] });
+  }
+});
+
+// eslint-disable-next-line consistent-return
+router.get('/summary', auth, async (req, res) => {
+  try {
+    const [arcblock, ethereum] = await Promise.all([
+      getTokenSummaryByDid(wallet.address, !!req.livemode, 'arcblock'),
+      getTokenSummaryByDid(ethWallet.address, !!req.livemode, 'ethereum'),
+    ]);
+    res.json({
+      balances: { ...arcblock, ...ethereum },
+      addresses: { arcblock: wallet.address, ethereum: ethWallet.address },
+      summary: {
+        subscription: await Subscription.getSummary(!!req.livemode),
+        invoice: await Invoice.getSummary(!!req.livemode),
+        payment: await PaymentIntent.getSummary(!!req.livemode),
+        payout: await Payout.getSummary(!!req.livemode),
+        refund: await Refund.getSummary(!!req.livemode),
+      },
+    });
+  } catch (err) {
+    console.error(err);
+    res.json(null);
+  }
+});
+
+export default router;

package/api/src/store/migrations/20240416-stat.ts

@@ -0,0 +1,10 @@
+import type { Migration } from '../migrate';
+import models from '../models';
+
+export const up: Migration = async ({ context }) => {
+  await context.createTable('payment_stats', models.PaymentStat.GENESIS_ATTRIBUTES);
+};
+
+export const down: Migration = async ({ context }) => {
+  await context.dropTable('payment_stats');
+};

package/api/src/store/models/index.ts

@@ -11,6 +11,7 @@ import { PaymentCurrency, TPaymentCurrency } from './payment-currency';
 import { PaymentIntent, TPaymentIntent } from './payment-intent';
 import { PaymentLink, TPaymentLink } from './payment-link';
 import { PaymentMethod, TPaymentMethod } from './payment-method';
+import { PaymentStat } from './payment-stat';
 import { Payout, TPayout } from './payout';
 import { Price, TPrice } from './price';
 import { PricingTable, TPricingTable } from './pricing-table';
@@ -37,6 +38,7 @@ const models = {
   PaymentCurrency,
   PaymentIntent,
   PaymentLink,
+  PaymentStat,
   Payout,
   PaymentMethod,
   Price,
@@ -79,6 +81,7 @@ export * from './payment-currency';
 export * from './payment-intent';
 export * from './payment-link';
 export * from './payment-method';
+export * from './payment-stat';
 export * from './payout';
 export * from './price';
 export * from './pricing-table';

package/api/src/store/models/invoice.ts

@@ -8,6 +8,7 @@ import {
   InferCreationAttributes,
   Model,
   Op,
+  Sequelize,
   WhereOptions,
 } from 'sequelize';
 import type { LiteralUnion } from 'type-fest';
@@ -578,6 +579,15 @@ export class Invoice extends Model<InferAttributes<Invoice>, InferCreationAttrib
 
     return this._getUncollectibleAmount(where);
   }
+
+  public static getSummary(livemode: boolean = true, field: string = 'status') {
+    return this.findAndCountAll({
+      where: { livemode },
+      attributes: [field, [Sequelize.fn('COUNT', Sequelize.col(field)), 'count']],
+      group: [field],
+      raw: true,
+    }).then((res) => res.rows);
+  }
 }
 
 export type TInvoice = InferAttributes<Invoice>;

package/api/src/store/models/payment-intent.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/lines-between-class-members */
 /* eslint-disable @typescript-eslint/indent */
 import { BN } from '@ocap/util';
-import { CreationOptional, DataTypes, InferAttributes, InferCreationAttributes, Model, Op } from 'sequelize';
+import { CreationOptional, DataTypes, InferAttributes, InferCreationAttributes, Model, Op, Sequelize } from 'sequelize';
 import type { LiteralUnion } from 'type-fest';
 
 import { createEvent, createStatusEvent } from '../../libs/audit';
@@ -315,6 +315,15 @@ export class PaymentIntent extends Model<InferAttributes<PaymentIntent>, InferCr
       return acc;
     }, {});
   }
+
+  public static getSummary(livemode: boolean = true, field: string = 'status') {
+    return this.findAndCountAll({
+      where: { livemode },
+      attributes: [field, [Sequelize.fn('COUNT', Sequelize.col(field)), 'count']],
+      group: [field],
+      raw: true,
+    }).then((res) => res.rows);
+  }
 }
 
 export type TPaymentIntent = InferAttributes<PaymentIntent>;

package/api/src/store/models/payment-stat.ts

@@ -0,0 +1,79 @@
+/* eslint-disable @typescript-eslint/lines-between-class-members */
+import { CreationOptional, DataTypes, InferAttributes, InferCreationAttributes, Model } from 'sequelize';
+
+import { createIdGenerator } from '../../libs/util';
+
+const nextId = createIdGenerator('ps', 24);
+
+// eslint-disable-next-line prettier/prettier
+export class PaymentStat extends Model<InferAttributes<PaymentStat>, InferCreationAttributes<PaymentStat>> {
+  declare id: CreationOptional<string>;
+  declare livemode: boolean;
+
+  declare timestamp: number;
+  declare currency_id: string;
+
+  declare amount_paid: string;
+  declare amount_payout: string;
+  declare amount_refund: string;
+
+  declare created_at: CreationOptional<Date>;
+  declare updated_at: CreationOptional<Date>;
+
+  public static readonly GENESIS_ATTRIBUTES = {
+    id: {
+      type: DataTypes.STRING(30),
+      primaryKey: true,
+      allowNull: false,
+      defaultValue: nextId,
+    },
+    livemode: {
+      type: DataTypes.BOOLEAN,
+      allowNull: false,
+    },
+    timestamp: {
+      type: DataTypes.INTEGER,
+      defaultValue: 0,
+    },
+    currency_id: {
+      type: DataTypes.STRING(16),
+      allowNull: false,
+    },
+    amount_paid: {
+      type: DataTypes.STRING(64),
+      defaultValue: '0',
+    },
+    amount_payout: {
+      type: DataTypes.STRING(64),
+      defaultValue: '0',
+    },
+    amount_refund: {
+      type: DataTypes.STRING(64),
+      defaultValue: '0',
+    },
+    created_at: {
+      type: DataTypes.DATE,
+      defaultValue: DataTypes.NOW,
+      allowNull: false,
+    },
+    updated_at: {
+      type: DataTypes.DATE,
+      defaultValue: DataTypes.NOW,
+      allowNull: false,
+    },
+  };
+
+  public static initialize(sequelize: any) {
+    this.init(PaymentStat.GENESIS_ATTRIBUTES, {
+      sequelize,
+      modelName: 'PaymentStat',
+      tableName: 'payment_stats',
+      createdAt: 'created_at',
+      updatedAt: 'updated_at',
+    });
+  }
+
+  public static associate() {}
+}
+
+export type TPaymentStat = InferAttributes<PaymentStat>;

package/api/src/store/models/payout.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/lines-between-class-members */
 /* eslint-disable @typescript-eslint/indent */
 import { BN } from '@ocap/util';
-import { CreationOptional, DataTypes, InferAttributes, InferCreationAttributes, Model, Op } from 'sequelize';
+import { CreationOptional, DataTypes, InferAttributes, InferCreationAttributes, Model, Op, Sequelize } from 'sequelize';
 import type { LiteralUnion } from 'type-fest';
 
 import { createEvent, createStatusEvent } from '../../libs/audit';
@@ -238,6 +238,15 @@ export class Payout extends Model<InferAttributes<Payout>, InferCreationAttribut
       return acc;
     }, {});
   }
+
+  public static getSummary(livemode: boolean = true, field: string = 'status') {
+    return this.findAndCountAll({
+      where: { livemode },
+      attributes: [field, [Sequelize.fn('COUNT', Sequelize.col(field)), 'count']],
+      group: [field],
+      raw: true,
+    }).then((res) => res.rows);
+  }
 }
 
 export type TPayout = InferAttributes<Payout>;

package/api/src/store/models/product.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/lines-between-class-members */
 import pick from 'lodash/pick';
-import { CreationOptional, DataTypes, InferAttributes, InferCreationAttributes, Model } from 'sequelize';
+import { CreationOptional, DataTypes, InferAttributes, InferCreationAttributes, Model, Sequelize } from 'sequelize';
 import type { LiteralUnion } from 'type-fest';
 
 import { createEvent } from '../../libs/audit';
@@ -213,6 +213,15 @@ export class Product extends Model<InferAttributes<Product>, InferCreationAttrib
 
     return null;
   }
+
+  public static getSummary(livemode: boolean = true, field: string = 'status') {
+    return this.findAndCountAll({
+      where: { livemode },
+      attributes: [field, [Sequelize.fn('COUNT', Sequelize.col(field)), 'count']],
+      group: [field],
+      raw: true,
+    }).then((res) => res.rows);
+  }
 }
 
 export type TProduct = InferAttributes<Product>;

package/api/src/store/models/refund.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/lines-between-class-members */
 /* eslint-disable @typescript-eslint/indent */
 import { BN } from '@ocap/util';
-import { CreationOptional, DataTypes, InferAttributes, InferCreationAttributes, Model, Op } from 'sequelize';
+import { CreationOptional, DataTypes, InferAttributes, InferCreationAttributes, Model, Op, Sequelize } from 'sequelize';
 import type { LiteralUnion } from 'type-fest';
 
 import { createEvent, createStatusEvent } from '../../libs/audit';
@@ -258,6 +258,15 @@ export class Refund extends Model<InferAttributes<Refund>, InferCreationAttribut
       return acc;
     }, {});
   }
+
+  public static getSummary(livemode: boolean = true, field: string = 'status') {
+    return this.findAndCountAll({
+      where: { livemode },
+      attributes: [field, [Sequelize.fn('COUNT', Sequelize.col(field)), 'count']],
+      group: [field],
+      raw: true,
+    }).then((res) => res.rows);
+  }
 }
 
 export type TRefund = InferAttributes<Refund>;

package/api/src/store/models/subscription.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/indent */
 /* eslint-disable @typescript-eslint/lines-between-class-members */
-import { CreationOptional, DataTypes, InferAttributes, InferCreationAttributes, Model } from 'sequelize';
+import { CreationOptional, DataTypes, InferAttributes, InferCreationAttributes, Model, Sequelize } from 'sequelize';
 import type { LiteralUnion } from 'type-fest';
 
 import { createCustomEvent, createEvent, createStatusEvent } from '../../libs/audit';
@@ -401,6 +401,15 @@ export class Subscription extends Model<InferAttributes<Subscription>, InferCrea
 
     return true;
   }
+
+  public static getSummary(livemode: boolean = true, field: string = 'status') {
+    return this.findAndCountAll({
+      where: { livemode },
+      attributes: [field, [Sequelize.fn('COUNT', Sequelize.col(field)), 'count']],
+      group: [field],
+      raw: true,
+    }).then((res) => res.rows);
+  }
 }
 
 export type TSubscription = InferAttributes<Subscription>;

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.13.217
+version: 1.13.218
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.217",
+  "version": "1.13.218",
   "scripts": {
     "dev": "cross-env COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev --open",
     "eject": "vite eject",
@@ -51,7 +51,7 @@
     "@arcblock/ux": "^2.9.66",
     "@arcblock/validator": "^1.18.115",
     "@blocklet/logger": "1.16.25",
-    "@blocklet/payment-react": "1.13.217",
+    "@blocklet/payment-react": "1.13.218",
     "@blocklet/sdk": "1.16.25",
     "@blocklet/ui-react": "^2.9.66",
     "@blocklet/uploader": "^0.0.76",
@@ -75,6 +75,7 @@
     "cookie-parser": "^1.4.6",
     "copy-to-clipboard": "^3.3.3",
     "cors": "^2.8.5",
+    "date-fns": "^3.6.0",
     "dayjs": "^1.11.10",
     "dotenv-flow": "^3.3.0",
     "erc-20-abi": "^1.0.1",
@@ -90,6 +91,7 @@
     "json-stable-stringify": "^1.1.1",
     "lodash": "^4.17.21",
     "morgan": "^1.10.0",
+    "mui-daterange-picker": "^1.0.5",
     "nanoid": "3",
     "p-all": "3.0.0",
     "p-wait-for": "3",
@@ -115,7 +117,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.25",
     "@arcblock/eslint-config-ts": "^0.3.0",
-    "@blocklet/payment-types": "1.13.217",
+    "@blocklet/payment-types": "1.13.218",
     "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -154,5 +156,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "3ce8954d7c26c881e0a7a46925447318954adca9"
+  "gitHead": "cb421c928f2045ee64b4d283d936fd8ad222010c"
 }

package/src/components/chart.tsx

@@ -0,0 +1,88 @@
+/* eslint-disable react/require-default-props */
+import type { TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
+import { Box, Skeleton } from '@mui/material';
+import { useState } from 'react';
+import { Area, AreaChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+export type TCurrency = TPaymentCurrency & { color: string; method: TPaymentMethod };
+export type TCurrencyMap = { [key: string]: TCurrency };
+
+export default function Chart({
+  loading,
+  data,
+  currencies,
+  height = 320,
+}: {
+  loading: boolean;
+  data: any[];
+  currencies: TCurrencyMap;
+  height?: number;
+}) {
+  const [series, setSeries] = useState<any>(
+    Object.keys(currencies).reduce(
+      (acc, key) => {
+        // @ts-ignore
+        acc[currencies[key].symbol] = false;
+        return acc;
+      },
+      { hover: null }
+    )
+  );
+
+  const onMouseOver = (e: any) => {
+    if (!series[e.dataKey]) {
+      setSeries({ ...series, hover: e.dataKey });
+    }
+  };
+
+  const onMouseOut = () => {
+    setSeries({ ...series, hover: null });
+  };
+
+  const onSelect = (e: any) => {
+    setSeries({ ...series, [e.dataKey]: !series[e.dataKey], hover: null });
+  };
+
+  if (loading) {
+    return <Skeleton variant="rounded" width="100%" height={height} />;
+  }
+
+  return (
+    <Box sx={{ width: '100%', height }}>
+      <ResponsiveContainer width="100%" height="100%">
+        <AreaChart
+          width={height * 1.5}
+          height={height}
+          data={data}
+          margin={{
+            top: 10,
+            right: 0,
+            left: 0,
+            bottom: 0,
+          }}>
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="timestamp" />
+          <YAxis orientation="left" mirror />
+          <Legend onClick={onSelect} onMouseOver={onMouseOver} onMouseOut={onMouseOut} />
+          <Tooltip />
+          {Object.keys(currencies).map((x: string, i) => {
+            const dataKey = currencies[x]?.symbol as string;
+            const color = currencies[x]?.color as string;
+            return (
+              <Area
+                type="monotone"
+                key={x}
+                dataKey={dataKey}
+                stackId={i}
+                fill={color}
+                stroke={color}
+                hide={series[dataKey] === true}
+                fillOpacity={Number(series.hover === dataKey || !series.hover ? 1 : 0.6)}
+              />
+            );
+          })}
+        </AreaChart>
+      </ResponsiveContainer>
+    </Box>
+  );
+}

package/src/components/subscription/items/usage-records.tsx

@@ -4,7 +4,7 @@ import type { TUsageRecord } from '@blocklet/payment-types';
 import { Alert, Box, Button, CircularProgress } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { useState } from 'react';
-import { Bar, BarChart, Rectangle, Tooltip, XAxis, YAxis } from 'recharts';
+import { Bar, BarChart, Legend, Rectangle, Tooltip, XAxis, YAxis } from 'recharts';
 
 const fetchData = (subscriptionId: string, id: string): Promise<{ list: TUsageRecord[]; count: number }> => {
   return api
@@ -58,7 +58,8 @@ export function UsageRecordDialog(props: { subscriptionId: string; id: string; o
             bottom: 5,
           }}>
           <XAxis dataKey="date" />
-          <YAxis />
+          <YAxis mirror />
+          <Legend />
           <Tooltip />
           <Bar dataKey="quantity" fill="#8884d8" activeBar={<Rectangle fill="pink" stroke="blue" />} />
         </BarChart>

package/src/locales/en.tsx

@@ -12,6 +12,11 @@ export default flat({
     },
   },
   admin: {
+    balances: 'Balances',
+    trends: 'Trends',
+    addresses: 'Addresses',
+    metrics: 'Metrics',
+    attention: 'Attention',
     overview: 'Overview',
     payments: 'Payments',
     connections: 'Connections',
@@ -239,12 +244,14 @@ export default flat({
       empty: 'No payment intent',
       refund: 'Refund payment',
       received: 'Received',
+      attention: 'Failed payments',
     },
     payout: {
       list: 'Payouts',
       name: 'Payout',
       view: 'View payout',
       empty: 'No payout',
+      attention: 'Failed payouts',
     },
     paymentMethod: {
       _name: 'Payment Method',
@@ -348,6 +355,7 @@ export default flat({
     },
     invoice: {
       view: 'View invoice',
+      attention: 'Uncollectible invoices',
       name: 'Invoice',
       from: 'Billed from',
       empty: 'No invoice',
@@ -366,6 +374,7 @@ export default flat({
       view: 'View subscription',
       name: 'Subscription',
       empty: 'No subscription',
+      attention: 'Past due subscriptions',
       product: 'Product',
       collectionMethod: 'Billing',
       currentPeriod: 'Current Period',
@@ -488,7 +497,9 @@ export default flat({
       },
     },
     refund: {
+      name: 'Refunds',
       view: 'View refund detail',
+      attention: 'Failed refunds',
     },
   },
 });

package/src/locales/zh.tsx

@@ -12,6 +12,11 @@ export default flat({
     },
   },
   admin: {
+    balances: '余额',
+    addresses: '地址',
+    trends: '趋势',
+    metrics: '指标',
+    attention: '注意',
     overview: '总览',
     payments: '支付管理',
     connections: '连接',
@@ -29,6 +34,7 @@ export default flat({
     webhooks: '钩子',
     events: '事件',
     refunds: '退款记录',
+    payouts: '出款记录',
     logs: '日志',
     passports: '通行证',
     details: '详情',
@@ -208,6 +214,7 @@ export default flat({
       name: '对外支付',
       view: '查看对外支付',
       empty: '没有记录',
+      attention: '失败的对外支付',
     },
     pricingTable: {
       view: '查看定价表',
@@ -236,6 +243,7 @@ export default flat({
       empty: '没有付款记录',
       refund: '退款',
       received: '实收金额',
+      attention: '失败的付款',
     },
     paymentMethod: {
       _name: '支付方式',
@@ -352,12 +360,14 @@ export default flat({
       download: '下载PDF',
       edit: '编辑账单',
       duplicate: '复制账单',
+      attention: '未完成的账单',
     },
     subscription: {
       view: '查看订阅',
       name: '订阅',
       empty: '没有订阅',
       product: '产品',
+      attention: '将过期的订阅',
       collectionMethod: '计费',
       currentPeriod: '当前周期',
       trialingPeriod: '试用期',
@@ -477,6 +487,8 @@ export default flat({
       },
     },
     refund: {
+      name: '退款',
+      attention: '失败的退款',
       view: '查看退款详情',
     },
   },

package/src/pages/admin/overview.tsx

@@ -1,23 +1,319 @@
+/* eslint-disable react/require-default-props */
+/* eslint-disable no-bitwise */
+import DID from '@arcblock/ux/lib/DID';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Button, Stack } from '@mui/material';
-import { Link } from 'react-router-dom';
+import { api, formatAmount, formatToDate, usePaymentContext } from '@blocklet/payment-react';
+import type { GroupedBN, TPaymentMethod, TPaymentStat } from '@blocklet/payment-types';
+import { Avatar, Box, Button, Card, Grid, Popover, Stack, Typography } from '@mui/material';
+import { useRequest, useSetState } from 'ahooks';
+import omit from 'lodash/omit';
+import { DateRangePicker } from 'mui-daterange-picker';
+import { useEffect } from 'react';
+
+import Chart, { TCurrencyMap } from '../../components/chart';
+import dayjs from '../../libs/dayjs';
+
+type TSummary = {
+  balances: GroupedBN;
+  addresses: GroupedBN;
+  summary: { [key: string]: { status: string; count: number }[] };
+};
+
+const stringToColor = (str: string) => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 4) - hash);
+  }
+
+  let color = '#';
+  for (let i = 0; i < 3; i++) {
+    const value = (hash >> (i * 8)) & 0xff;
+    color += `00${value.toString(16)}`.substr(-2);
+  }
+  return color;
+};
+
+export const getDefaultRanges = (date: string) => [
+  {
+    label: 'This Week',
+    startDate: dayjs(date).startOf('week').toDate(),
+    endDate: dayjs(date).endOf('week').toDate(),
+  },
+  {
+    label: 'Last Week',
+    startDate: dayjs(date).subtract(1, 'week').startOf('week').toDate(),
+    endDate: dayjs(date).subtract(1, 'week').endOf('week').toDate(),
+  },
+  {
+    label: 'Last 7 Days',
+    startDate: dayjs(date).subtract(7, 'day').startOf('day').toDate(),
+    endDate: dayjs(date).toDate(),
+  },
+  {
+    label: 'This Month',
+    startDate: dayjs(date).startOf('month').toDate(),
+    endDate: dayjs(date).endOf('month').toDate(),
+  },
+  {
+    label: 'Last Month',
+    startDate: dayjs(date).subtract(1, 'month').startOf('month').toDate(),
+    endDate: dayjs(date).subtract(1, 'month').endOf('month').toDate(),
+  },
+  {
+    label: 'This Year',
+    startDate: dayjs(date).startOf('year').toDate(),
+    endDate: dayjs(date).endOf('year').toDate(),
+  },
+  {
+    label: 'Last Year',
+    startDate: dayjs(date).subtract(1, 'year').startOf('year').toDate(),
+    endDate: dayjs(date).subtract(1, 'year').endOf('year').toDate(),
+  },
+];
+
+export const groupData = (data: TPaymentStat[], currencies: { [key: string]: any }, key: string, locale: string) => {
+  const grouped: { [key: string]: object } = {};
+  data.forEach((x) => {
+    if (!grouped[x.timestamp]) {
+      grouped[x.timestamp] = { timestamp: formatToDate(x.timestamp * 1000, locale, 'YYYY-MM-DD') };
+    }
+
+    const { symbol } = currencies[x.currency_id];
+    // @ts-ignore
+    grouped[x.timestamp][symbol] = +x[key];
+  });
+
+  return Object.values(grouped);
+};
 
 export default function Overview() {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
+  const { settings } = usePaymentContext();
+  const maxDate = dayjs().subtract(1, 'day').toDate();
+  const [state, setState] = useSetState({
+    anchorEl: null,
+    startDate: dayjs().subtract(30, 'day').toDate(),
+    endDate: maxDate,
+  });
+
+  const trend = useRequest<TPaymentStat[], any>(async () => {
+    const result = await api.get('/api/payment-stats', {
+      params: {
+        start: dayjs(state.startDate).unix(),
+        end: dayjs(state.endDate).unix(),
+      },
+    });
+    return result.data.list;
+  });
+
+  const summary = useRequest<TSummary, any>(async () => {
+    const result = await api.get('/api/payment-stats/summary');
+    return result.data;
+  });
+
+  useEffect(() => {
+    if (trend.loading) {
+      return;
+    }
+    if (state.startDate && state.endDate) {
+      trend.runAsync();
+    }
+  }, [state.startDate, state.endDate]);
+
+  const onTogglePicker = (e: any) => {
+    if (state.anchorEl) {
+      setState({ anchorEl: null });
+    } else {
+      setState({ anchorEl: e.currentTarget });
+    }
+  };
+
+  const onRangeChange = (range: any) => {
+    setState({
+      startDate: range.startDate,
+      endDate: range.endDate,
+      anchorEl: null,
+    });
+  };
+
+  const open = Boolean(state.anchorEl);
+  const id = open ? 'date-range-picker-popover' : undefined;
+  const currencies: TCurrencyMap = {};
+  for (const method of settings.paymentMethods) {
+    for (const currency of method.payment_currencies) {
+      currencies[currency.id] = {
+        ...currency,
+        method: omit(method, ['payment_currencies']) as TPaymentMethod,
+        color: stringToColor(currency.id),
+      };
+    }
+  }
+
+  const payments = groupData(trend.data || [], currencies, 'amount_paid', locale);
+  const payouts = groupData(trend.data || [], currencies, 'amount_payout', locale);
+  const refunds = groupData(trend.data || [], currencies, 'amount_refund', locale);
+
+  const metrics = [];
+  const attentions = [];
+  if (summary.data?.summary) {
+    const { subscription, invoice, refund, payment, payout } = summary.data.summary;
+    metrics.push({ type: 'subscription', count: subscription?.find((x) => x.status === 'active')?.count || 0 });
+    metrics.push({ type: 'invoice', count: invoice?.find((x) => x.status === 'paid')?.count || 0 });
+    metrics.push({ type: 'refund', count: refund?.find((x) => x.status === 'succeeded')?.count || 0 });
+    metrics.push({ type: 'paymentIntent', count: payment?.find((x) => x.status === 'succeeded')?.count || 0 });
+    metrics.push({ type: 'payout', count: payout?.find((x) => x.status === 'paid')?.count || 0 });
+
+    attentions.push({ type: 'subscription', count: subscription?.find((x) => x.status === 'past_due')?.count || 0 });
+    attentions.push({ type: 'invoice', count: invoice?.find((x) => x.status === 'uncollectible')?.count || 0 });
+    attentions.push({ type: 'refund', count: refund?.find((x) => x.status === 'failed')?.count || 0 });
+    attentions.push({ type: 'paymentIntent', count: payment?.find((x) => x.status === 'requires_action')?.count || 0 });
+    attentions.push({ type: 'payout', count: payout?.find((x) => x.status === 'failed')?.count || 0 });
+  }
+
   return (
-    <Stack direction="row" spacing={2}>
-      <Button component={Link} variant="outlined" to="/admin/products">
-        {t('admin.products')}
-      </Button>
-      <Button component={Link} variant="outlined" to="/admin/payments">
-        {t('admin.payments')}
-      </Button>
-      <Button component={Link} variant="outlined" to="/admin/customers">
-        {t('admin.customers')}
-      </Button>
-      <Button component={Link} variant="outlined" to="/admin/billing/subscriptions">
-        {t('admin.subscriptions')}
-      </Button>
-    </Stack>
+    <Grid container gap={{ xs: 2, sm: 5, md: 8 }} sx={{ mb: 4 }}>
+      <Grid item xs={12} sm={12} md={8}>
+        <Stack direction="column" gap={{ xs: 1, sm: 3 }}>
+          <Stack direction="row" alignItems="flex-end" justifyContent="space-between">
+            <Typography component="h3" variant="h4">
+              {t('admin.trends')}
+            </Typography>
+            <Button onClick={onTogglePicker} variant="outlined" color="secondary">
+              {formatToDate(state.startDate, locale, 'YYYY-MM-DD')} -{' '}
+              {formatToDate(state.endDate, locale, 'YYYY-MM-DD')}
+            </Button>
+          </Stack>
+          <Stack direction="column" gap={1}>
+            <Typography component="h4" variant="h5">
+              {t('admin.paymentIntent.list')}
+            </Typography>
+            <Chart loading={!trend.data} height={320} data={payments} currencies={currencies} />
+          </Stack>
+          <Stack direction="column" gap={1}>
+            <Typography component="h4" variant="h5">
+              {t('admin.payouts')}
+            </Typography>
+            <Chart loading={!trend.data} height={320} data={payouts} currencies={currencies} />
+          </Stack>
+          <Stack direction="column" gap={1}>
+            <Typography component="h4" variant="h5">
+              {t('admin.refunds')}
+            </Typography>
+            <Chart loading={!trend.data} height={320} data={refunds} currencies={currencies} />
+          </Stack>
+        </Stack>
+      </Grid>
+      <Grid item xs={12} sm={12} md={3}>
+        <Stack direction="column" spacing={2}>
+          {summary.data && summary.data.addresses && (
+            <Box>
+              <Stack direction="row" alignItems="flex-end" justifyContent="space-between">
+                <Typography component="h3" variant="h4">
+                  {t('admin.addresses')}
+                </Typography>
+              </Stack>
+              <Stack direction="column" spacing={1} sx={{ mt: 2 }}>
+                {Object.keys(summary.data.addresses).map((chain) => (
+                  <DID key={chain} did={summary.data?.addresses?.[chain] as string} copyable showQrcode />
+                ))}
+              </Stack>
+            </Box>
+          )}
+          {summary.data && summary.data.balances && (
+            <Box>
+              <Stack direction="row" alignItems="flex-end" justifyContent="space-between">
+                <Typography component="h3" variant="h4">
+                  {t('admin.balances')}
+                </Typography>
+              </Stack>
+              <Stack direction="column" spacing={1} sx={{ mt: 2 }}>
+                {Object.keys(summary.data.balances).map((currencyId) => (
+                  <Card key={currencyId} variant="outlined" sx={{ padding: 1 }}>
+                    <Stack direction="row" alignItems="center">
+                      <Avatar
+                        src={currencies[currencyId]?.logo}
+                        alt={currencies[currencyId]?.name}
+                        sx={{ width: 36, height: 36, marginRight: 1 }}
+                      />
+                      <Box>
+                        <Typography variant="h5" component="div" sx={{ fontSize: '2rem' }}>
+                          {formatAmount(
+                            summary.data?.balances?.[currencyId] as string,
+                            currencies[currencyId]?.decimal as number
+                          )}
+                        </Typography>
+                        <Typography sx={{ fontSize: 14 }} color="text.secondary">
+                          {currencies[currencyId]?.symbol} on {currencies[currencyId]?.method.name}
+                        </Typography>
+                      </Box>
+                    </Stack>
+                  </Card>
+                ))}
+              </Stack>
+            </Box>
+          )}
+          {metrics.length > 0 && (
+            <Box>
+              <Stack direction="row" alignItems="flex-end" justifyContent="space-between">
+                <Typography component="h3" variant="h4">
+                  {t('admin.metrics')}
+                </Typography>
+              </Stack>
+              <Stack direction="row" flexWrap="wrap" gap={1} sx={{ mt: 2 }}>
+                {metrics.map((metric) => (
+                  <Card key={metric.type} variant="outlined" sx={{ padding: 1, width: 0.48 }}>
+                    <Box>
+                      <Typography component="div" sx={{ fontSize: '2rem' }}>
+                        {metric.count}
+                      </Typography>
+                      <Typography sx={{ fontSize: 14 }} color="text.secondary">
+                        {t(`admin.${metric.type}.name`)}
+                      </Typography>
+                    </Box>
+                  </Card>
+                ))}
+              </Stack>
+            </Box>
+          )}
+          {attentions.filter((x) => x.count > 0).length > 0 && (
+            <Box>
+              <Stack direction="row" alignItems="flex-end" justifyContent="space-between">
+                <Typography component="h3" variant="h4" color="error">
+                  {t('admin.attention')}
+                </Typography>
+              </Stack>
+              <Stack direction="row" flexWrap="wrap" gap={1} sx={{ mt: 2 }}>
+                {attentions.map((metric) => (
+                  <Card key={metric.type} variant="outlined" sx={{ padding: 1, width: 0.48 }}>
+                    <Box>
+                      <Typography component="div" sx={{ fontSize: '2rem' }}>
+                        {metric.count}
+                      </Typography>
+                      <Typography sx={{ fontSize: 14 }} color="text.secondary">
+                        {t(`admin.${metric.type}.attention`)}
+                      </Typography>
+                    </Box>
+                  </Card>
+                ))}
+              </Stack>
+            </Box>
+          )}
+        </Stack>
+      </Grid>
+      <Popover
+        id={id}
+        open={open}
+        anchorEl={state.anchorEl}
+        onClose={() => setState({ anchorEl: null })}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
+        <DateRangePicker
+          open
+          toggle={onTogglePicker as any}
+          maxDate={maxDate}
+          definedRanges={getDefaultRanges(maxDate.toISOString())}
+          onChange={onRangeChange}
+        />
+      </Popover>
+    </Grid>
   );
 }