> ## Documentation Index
> Fetch the complete documentation index at: https://docs.whop.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ReportActivityElement

> Financial activity with date, currency, direction, and movement filters, pagination, and CSV export. Mount independently or open it from the balance report.

*Since `v1.0.0`.*

Mounts inside [`Reports`](https://docs.whop.com/elements/upcoming/wallet/reports), in [`Wallet`](https://docs.whop.com/elements/upcoming/wallet/overview). `accountId` and `accessToken` come from `Wallet`. Pass props and callbacks through the create options or React props. Keep the created handle, or React `ref`, to call `refresh()`.

```tsx React theme={null}
import { WhopElements, Wallet, Reports, ReportActivityElement } from "@whop/elements-react";
import { loadWhop } from "@whop/elements";

function Example() {
  return (
    <WhopElements elements={loadWhop()}>
      <Wallet /* options */>
        <Reports>
          <ReportActivityElement onExportReady={(e) => console.log(e)} />
        </Reports>
      </Wallet>
    </WhopElements>
  );
}
```

```html JavaScript theme={null}
<script src="https://cdn.whop.com/elements/amber/elements.js" data-whop-elements></script>
<script type="module">
  const wallet = window.WhopElements().wallet.create({ /* options */ });
  const reports = wallet.create('reports', { /* options */ });
  reports.create('reportActivity', { onExportReady: (e) => console.log(e) }).mount('#wallet-reports-reportActivity');
</script>
```

Example data. [Open the Playground](https://docs.whop.com/elements/upcoming/wallet/overview#playground).

## Props

**filters** `ReportActivityFilters`

Initial filters. Changing these resets the table to the requested activity. Defaults to `{}`.

**properties**

**currency** `string`

**postedAfter** `string`

**postedBefore** `string`

**direction** `"money_in" | "money_out"`

**lineTypes** `string[]`

**values**

Each item is one of `"fees"`, `"platform_balance_transfer_outgoing"`, `"payment_gross"`, `"topup"`, `"topup_fee"`, `"payment_gross_reversal"`, `"topup_reversal"`, `"payment_refund"`, `"payment_refund_reversal"`, `"platform_balance_payment"`, `"platform_balance_payment_refund"`, `"passthrough_gmv"`, `"installment_default"`, `"payment_processing_fixed_fee"`, `"payment_processing_percentage_fee"`, `"billing_percentage_fee"`, `"cross_border_percentage_fee"`, `"fx_percentage_fee"`, `"orchestration_percentage_fee"`, `"revshare_percentage_fee"`, `"stripe_domestic_processing_fee"`, `"stripe_international_processing_fee"`, `"three_ds_fixed_fee"`, `"whop_processing_fee"`, `"economic_intelligence_percentage_fee"`, `"high_risk_merchant_fee"`, `"fraud_prevention_fee"`, `"buyer_fee"`, `"sales_tax_fee"`, `"payout_fee"`, `"affiliate_fee"`, `"marketplace_affiliate_fee"`, `"application_fee"`, `"platform_markup_fee"`, `"platform_markup_fee_payout"`, `"sales_tax_remittance"`, `"sales_tax_remittance_reversal"`, `"payment_dispute"`, `"payment_dispute_adjustment"`, `"payment_dispute_fee"`, `"payment_dispute_reversal"`, `"platform_covered_dispute"`, `"dispute_alert_fee"`, `"dispute_representment_fee"`, `"dispute_hold_adjustment"`, `"withdrawal"`, `"withdrawal_fee"`, `"withdrawal_fee_reversal"`, `"withdrawal_markup_fee"`, `"withdrawal_markup_fee_reversal"`, `"withdrawal_markup_fee_payout"`, `"withdrawal_markup_fee_payout_reversal"`, `"withdrawal_reversal"`, `"withdrawal_clawback"`, `"withdrawal_clawback_reversal"`, `"withdrawal_reclassification"`, `"treasury_payin"`, `"onchain_deposit"`, `"onchain_withdrawal"`, `"onchain_wallet_transfer_outgoing"`, `"onchain_wallet_transfer_incoming"`, `"onchain_platform_transfer_outgoing"`, `"onchain_platform_transfer_incoming"`, `"onchain_internal_transfer_outgoing"`, `"onchain_internal_transfer_incoming"`, `"onchain_swap_source"`, `"onchain_swap_target"`, `"swap_fee"`, `"internal_withdrawal"`, `"internal_withdrawal_reversal"`, `"internal_withdrawal_fee"`, `"internal_withdrawal_fee_reversal"`, `"internal_withdrawal_markup_fee"`, `"internal_withdrawal_markup_fee_reversal"`, `"internal_withdrawal_markup_fee_payout"`, `"internal_withdrawal_markup_fee_payout_reversal"`, `"internal_withdrawal_in_transit"`, `"internal_withdrawal_complete"`, `"internal_withdrawal_in_transit_reversal"`, `"card_load_transfer"`, `"card_load_deposit"`, `"card_unload_transfer"`, `"card_unload_deposit"`, `"external_card_load_deposit"`, `"card_spend_authorization"`, `"card_spend_authorization_void"`, `"card_spend_refund"`, `"cashback"`, `"cashback_funding"`, `"card_interchange"`, `"account_settlement"`, `"currency_conversion_outgoing"`, `"currency_conversion_incoming"`, `"balance_reservation"`, `"balance_reservation_reversal"`, `"platform_credits_payment"`, `"platform_credits_payment_refund"`, `"platform_credits_granted"`, `"platform_balance_transfer_incoming"`, `"internal_balance_transfer_outgoing"`, `"internal_balance_transfer_incoming"`, `"platform_balance_transfer_fee"`, `"connected_account_negative_balance"`, `"ad_publisher_payout"`, `"ad_publisher_payout_received"`, `"company_referral"`, `"platform_affiliate_payment"`, `"platform_affiliate_payment_reversal"`, `"onboarding_reward"`, `"partner_grant_reward"`, `"payment_revshare"`, `"payment_revshare_payout"`, `"payment_revshare_reversal"`, `"payment_revshare_refund"`, `"payment_referral"`, `"payment_referral_reversal"`, `"payment_referral_refund"`, `"application_fee_payout"`, `"platform_earning"`, `"airdrop"`, `"airdrop_reversal"`, `"airdrop_link_returned"`, `"airdrop_link_redeemed"`, `"airdrop_link_created"`, `"resolution_center_refund"`, `"ad_campaign_budget"`, `"ad_spend_charge"`, `"ad_budget_release"`, `"ad_affiliate_payout_received"`, `"misc_reversal"`, `"legacy_crypto_payment"`, `"legacy_payment"`, `"legacy_payment_refund"`, `"license_sale"`, `"license_sale_commission"`, `"license_sale_revenue"`, `"software_rental_revshare"`, `"software_rental_transaction"`, `"misc_purchase"`, `"misc_refund"`, `"referral_bonus"`, `"promo_reversal"`, `"withdrawal_topup_adjustment"`, or `"bank_transfer"`.

**resourceId** `string`

## Events

Pass callbacks in the create options or React props.

### `onExportReady`

The CSV is ready and its download has started.

**payload** `ReportExportReady`

**properties**

**exportId** `string` *required*

**downloadUrl** `string` *required*

### `onLoaderStart`

Runs after the loading skeleton first paints and before `onReady`.

### `onReady`

Runs after the element's first complete paint.

### `onError`

Runs when the element fails to load or crashes. The fallback remains visible. Use `code` for programmatic handling. `sourceKey` identifies a failed host-state source.

**e** `object`

**properties**

**message** `string` *required*

**code** `string`

**sourceKey** `string`

## Methods

Call these on the handle returned by `create`, or through a React `ref`.

### `refresh`

Refresh the report data after activity changes.

**Returns** `Promise<void>`

### `mount`

Mounts the element in `target` and starts loading. React components mount themselves.

**Parameters**

**target** `string | HTMLElement` *required*

### `destroy`

Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.

### `update`

Merges new props into the mounted element. In React, change the component props instead.

**Parameters**

**options** `Partial\<ReportActivityElementProps\>` *required*

## Styling

Style these parts through `appearance.classes`. Use camel case or kebab case for property names and include units. Page stylesheets can't reach the element's frame. The framework validates each declaration before injecting it.

| Class | Targets |
| - | - |
| `.whop-ReportActivity` | The report activity table and filters. |

```ts theme={null}
const wallet = whop.wallet.create({
  appearance: {
    classes: {
      'whop-ReportActivity': { borderRadius: '8px', fontWeight: '600' }
    }
  }
});

wallet.update({
  appearance: {
    classes: { 'whop-ReportActivity': { fontWeight: '700' } }
  }
});
```

In React, pass `appearance` to `<Wallet>`. Set it globally with `WhopElements({ appearance })`.


## Related topics

- [ReportActivityElement](https://docs.whop.com/elements/latest/wallet/reports-reportActivity.md)
- [Reports](https://docs.whop.com/elements/latest/wallet/reports.md)
- [ActivityElement](https://docs.whop.com/elements/beta/wallet/activity.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.