initial
This commit is contained in:
Nadar
110
apps/client/pages/projects/[projectId]/index.vue
Normal file
110
apps/client/pages/projects/[projectId]/index.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<PageToolbar
|
||||
v-model:search="searchTerm"
|
||||
search-label="Search an asset"
|
||||
>
|
||||
<UiButton
|
||||
size="large"
|
||||
@click="notify({ id: 'wip', type: 'warning', text: 'Work in progress' })"
|
||||
>
|
||||
Manage assets
|
||||
</UiButton>
|
||||
</PageToolbar>
|
||||
|
||||
<div class="asset-list">
|
||||
<AssetCard
|
||||
v-for="asset in filteredAssets"
|
||||
:key="asset.code"
|
||||
v-bind="asset"
|
||||
:is-active="sidebarOptions.modelValue && sidebarOptions.attrs.asset?.code === asset.code"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useModal } from 'vue-final-modal'
|
||||
import { AssetSidebar } from '#components'
|
||||
|
||||
definePageMeta({
|
||||
middleware: ['auth'],
|
||||
})
|
||||
|
||||
const { data: account } = useNuxtData('account')
|
||||
|
||||
const route = useRoute()
|
||||
const notify = useNotify()
|
||||
const { open, patchOptions, options: sidebarOptions } = useModal({
|
||||
component: AssetSidebar,
|
||||
attrs: {
|
||||
projectId: route.params.projectId,
|
||||
},
|
||||
})
|
||||
|
||||
const searchTerm = ref('')
|
||||
|
||||
const assets = shallowRef([
|
||||
'USDT:Tether',
|
||||
'LTC:Litecoin',
|
||||
'DOGE:Dogecoin',
|
||||
'BTC:Bitcoin',
|
||||
'XRP:Ripple',
|
||||
'BNB:Binance',
|
||||
'BAT:Basic Attention Token',
|
||||
'EOS:EOS Network',
|
||||
'MKR:Maker',
|
||||
'DAI:Dai',
|
||||
'ETH:Ethereum',
|
||||
'DASH:Dash',
|
||||
].map((item, idx) => {
|
||||
const [code, name] = item.split(':')
|
||||
const balance = $money.format(code === 'USDT' ? account.value.balance : 0, code)
|
||||
const rate = code === 'USDT' ? 1 : 213.25
|
||||
const withdraw = undefined
|
||||
// const balance = $money.format(code === 'USDT' ? account.value.balance : 0.002741, code)
|
||||
// const withdraw = idx % 2 !== 0 ? $money.format(0.15484, code) : undefined
|
||||
const disabled = code !== 'USDT'
|
||||
|
||||
return {
|
||||
code,
|
||||
name,
|
||||
balance,
|
||||
rate,
|
||||
withdraw,
|
||||
disabled,
|
||||
onClick: () => {
|
||||
if (!disabled) {
|
||||
patchOptions({
|
||||
attrs: {
|
||||
asset: {
|
||||
code,
|
||||
name,
|
||||
balance,
|
||||
rate,
|
||||
withdraw,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
open()
|
||||
}
|
||||
// else {
|
||||
// notify({ type: 'warning', title: 'Work in progress', text: 'At the moment we only work with USDT', id: 'wip' })
|
||||
// }
|
||||
},
|
||||
}
|
||||
}))
|
||||
|
||||
const { result: filteredAssets } = useFuseSearch(assets, { keys: ['code', 'name'] }, searchTerm)
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.asset-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
background-color: $clr-white;
|
||||
margin-top: 24px;
|
||||
}
|
||||
</style>
|
||||
288
apps/client/pages/projects/[projectId]/invoices.vue
Normal file
288
apps/client/pages/projects/[projectId]/invoices.vue
Normal file
@@ -0,0 +1,288 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="!total && isFiltersEmpty && !searchTerm && !isInvoicesFetching"
|
||||
class="invoice__empty"
|
||||
>
|
||||
<InvoicesEmpty :id="$route.params.projectId" />
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<PageToolbar
|
||||
v-model:search="searchTerm"
|
||||
search-label="Search an invoices"
|
||||
>
|
||||
<template #prefix>
|
||||
<div class="invoices-awaiting-sum">
|
||||
<div class="invoices-awaiting-sum__value">
|
||||
<span>{{ awaitingSum }}</span> <UiIconSUpRight class="text-clr-cyan-500" />
|
||||
</div>
|
||||
|
||||
<p class="invoices-awaiting-sum__text">
|
||||
Sum of invoices awaiting payment
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<UiButton
|
||||
type="outlined"
|
||||
color="secondary"
|
||||
size="large"
|
||||
:href="`/report/${$route.params.projectId}`"
|
||||
icon="csv"
|
||||
>
|
||||
Export to CSV
|
||||
</UiButton>
|
||||
|
||||
<UiButton
|
||||
size="large"
|
||||
:href="`/create/invoice/${$route.params.projectId}`"
|
||||
>
|
||||
Create an invoice
|
||||
</UiButton>
|
||||
</PageToolbar>
|
||||
|
||||
<div
|
||||
style="
|
||||
margin-top: 24px;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
"
|
||||
>
|
||||
<ResourceFilters
|
||||
class="mb-16"
|
||||
:filters="filters"
|
||||
/>
|
||||
|
||||
<StrippedTable
|
||||
class="invoices__table"
|
||||
:columns="columns"
|
||||
:data="invoices"
|
||||
:loading="isInvoicesFetching"
|
||||
>
|
||||
<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(orderId)="{ row: { original } }">
|
||||
<TextShortener :text="original.orderId" />
|
||||
</template>
|
||||
|
||||
<template #cell(date)="{ row: { original } }">
|
||||
<FormattedDate :value="original.createdAt" />
|
||||
</template>
|
||||
|
||||
<template #cell(status)="{ row: { original } }">
|
||||
<UiBadge
|
||||
:text="$t(`invoice_status.${original.status}`)"
|
||||
:type="getStatusType(original.status)"
|
||||
:icon="getStatusIcon(original.status)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #cell(paymentLink)="{ row: { original } }">
|
||||
<UiCopyButton
|
||||
title="Payment link"
|
||||
pressed-title="Link copied"
|
||||
:value="`${runtimeConfig.public.payHost}/${original.id}`"
|
||||
/>
|
||||
</template>
|
||||
</StrippedTable>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { createColumnHelper } from '@tanstack/vue-table'
|
||||
import { computed } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
import { getStatusIcon, getStatusType } from '~/helpers/invoices.ts'
|
||||
|
||||
definePageMeta({
|
||||
middleware: ['auth'],
|
||||
})
|
||||
|
||||
const runtimeConfig = useRuntimeConfig()
|
||||
|
||||
const filters = [
|
||||
{
|
||||
key: 'statuses[]',
|
||||
label: 'Status',
|
||||
placeholder: 'All statuses',
|
||||
multiple: true,
|
||||
options: [
|
||||
{
|
||||
label: 'Pending',
|
||||
value: 'pending',
|
||||
},
|
||||
{
|
||||
label: 'Completed',
|
||||
value: 'completed',
|
||||
},
|
||||
{
|
||||
label: 'Expired',
|
||||
value: 'expired',
|
||||
},
|
||||
{
|
||||
label: 'Await Payment',
|
||||
value: 'awaiting_payment',
|
||||
},
|
||||
{
|
||||
label: 'Overpaid',
|
||||
value: 'overpaid',
|
||||
},
|
||||
{
|
||||
label: 'Underpaid',
|
||||
value: 'underpaid',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
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: invoicesData, pending: isInvoicesFetching, refresh } = await useAsyncData(
|
||||
'invoices',
|
||||
() =>
|
||||
$api(`/invoices`, {
|
||||
method: 'get',
|
||||
params: {
|
||||
...appliedFilters.value,
|
||||
onlineStoreId: route.params.projectId,
|
||||
query: searchTerm.value,
|
||||
},
|
||||
}),
|
||||
{
|
||||
watch: [appliedFilters, searchTerm],
|
||||
},
|
||||
)
|
||||
|
||||
const total = computed(() => invoicesData.value?.meta.total ?? 0)
|
||||
const invoices = computed(() => invoicesData.value?.invoices)
|
||||
|
||||
const awaitingSum = $money.fullFormat(0, 'USDT')
|
||||
|
||||
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.display({
|
||||
id: 'orderId',
|
||||
header: 'Order ID',
|
||||
}),
|
||||
columnHelper.accessor('createdAt', {
|
||||
id: 'date',
|
||||
header: 'Date',
|
||||
}),
|
||||
columnHelper.display({
|
||||
id: 'status',
|
||||
header: 'Status',
|
||||
}),
|
||||
columnHelper.display({
|
||||
id: 'paymentLink',
|
||||
}),
|
||||
]
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.invoice {
|
||||
&__empty {
|
||||
display: inline-flex;
|
||||
background-color: $clr-white;
|
||||
border-radius: 12px;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
|
||||
> :first-child {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.invoices {
|
||||
&__table {
|
||||
td.payment_link {
|
||||
width: 1%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.invoices-awaiting-sum {
|
||||
padding: 8px 16px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
background-color: $clr-grey-200;
|
||||
|
||||
&__value {
|
||||
@include txt-i-sb;
|
||||
|
||||
> span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
@include txt-s-m;
|
||||
|
||||
color: $clr-grey-500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
220
apps/client/pages/projects/[projectId]/transactions.vue
Normal file
220
apps/client/pages/projects/[projectId]/transactions.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user