initial

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

@@ -0,0 +1,220 @@
+<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>