Kotyata/apps/client/pages/projects/[projectId]/transactions.vue

<template>
  <PageToolbar
    v-model:search="searchTerm"
    search-label="Find a transaction"
  />

  <div
    style="
        margin-top: 24px;
        padding: 16px;
        border-radius: 12px;
        background-color: #fff;
      "
  >
    <ResourceFilters
      class="mb-16"
      :filters="filters"
    />

    <StrippedTable
      class="transactions__table"
      :columns="columns"
      :data="transactions"
      :loading="isTransactionsFetching"
    >
      <template #cell(currency)="{ row: { original } }">
        <CurrencyName :code="original.currencyCode" />
      </template>

      <template #cell(amount)="{ row: { original } }">
        <MoneyAmount
          :value="original.amount"
          :currency="original.currencyCode"
        />
      </template>

      <template #cell(accrued)="{ row: { original } }">
        <MoneyAmount
          :value="original.accrued"
          :currency="original.currencyCode"
        />
      </template>

      <template #cell(address)="{ row: { original } }">
        <span v-if="!original.walletAddress">—</span>
        <TextShortener
          v-else
          :text="original.walletAddress"
        />
      </template>

      <template #cell(date)="{ row: { original } }">
        <FormattedDate :value="original.createdAt" />
      </template>

      <template #cell(type)="{ row: { original } }">
        <OperationType type="Withdraw" />
      </template>

      <template #cell(status)="{ row: { original } }">
        <UiBadge
          :text="$t(`invoice_status.${original.status}`)"
          :type="getStatusType(original.status)"
          :icon="getStatusIcon(original.status)"
        />
      </template>
    </StrippedTable>
  </div>
</template>

<script setup>
import { createColumnHelper } from '@tanstack/vue-table'
import dayjs from 'dayjs'
import { getStatusIcon, getStatusType } from '~/helpers/invoices.ts'

definePageMeta({
  middleware: ['auth'],
})

const runtimeConfig = useRuntimeConfig()

const filters = [
  // {
  //   key: 'networks[]',
  //   label: 'Networks',
  //   placeholder: 'All networks',
  //   multiple: true,
  //   options: [],
  // },
  // {
  //   key: 'assets[]',
  //   label: 'Assets',
  //   placeholder: 'All assets',
  //   multiple: true,
  //   options: [],
  // },
  {
    key: 'statuses[]',
    label: 'Status',
    placeholder: 'All statuses',
    multiple: true,
    options: [
      {
        label: 'Pending',
        value: 'pending',
      },
      {
        label: 'Completed',
        value: 'completed',
      },
      {
        label: 'Investigating',
        value: 'investigating',
      },
      {
        label: 'Broadcasted',
        value: 'broadcasted',
      },
    ],
  },
  {
    type: 'calendar',
    key: 'date',
    label: 'Date',
    placeholder: 'All period',
    transform: (value) => {
      const [dateFrom, dateTo] = value

      if (!dateFrom)
        return

      return {
        dateFrom: dayjs(dateFrom).format('YYYY-MM-DD'),
        dateTo: dateTo ? dayjs(dateTo).format('YYYY-MM-DD') : undefined,
      }
    },
  },
]

const route = useRoute()
const { appliedFilters, empty: isFiltersEmpty } = useFilters(filters)

const searchTerm = ref()

const { data: transactionsData, pending: isTransactionsFetching, refresh } = await useAsyncData(
  'transactions',
  () =>
    $api(`/withdrawals`, {
      method: 'get',
      params: {
        ...appliedFilters.value,
        onlineStoreId: route.params.projectId,
        query: searchTerm.value,
      },
    }),
  {
    watch: [appliedFilters, searchTerm],
  },
)

const transactions = computed(() => transactionsData.value?.withdrawals)

const columnHelper = createColumnHelper()

const columns = [
  columnHelper.accessor('currencyCode', {
    id: 'currency',
    header: 'Currency',
  }),
  columnHelper.accessor('amount', {
    header: 'Amount',
  }),
  columnHelper.display({
    id: 'accrued',
    header: 'Accrued',
  }),
  columnHelper.display({
    id: 'address',
    header: 'Address',
  }),
  columnHelper.accessor('createdAt', {
    id: 'date',
    header: 'Date',
  }),
  columnHelper.display({
    id: 'type',
    header: 'Type operation',
  }),
  columnHelper.display({
    id: 'status',
    header: 'Status',
  }),
]
</script>

<style lang="scss">
.transaction {
  &__empty {
    display: inline-flex;
    background-color: $clr-white;
    border-radius: 12px;
    flex: 1;
    width: 100%;
    padding: 16px;

    > :first-child {
      margin: 0 auto;
    }
  }
}

.transactions {
  &__table {
    td.payment_link {
      width: 1%;
      text-align: right;
    }
  }
}
</style>