btcpayserver/BTCPayServer/Views/UIReports/StoreReports.cshtml

139 lines
6.5 KiB
Text
Raw Normal View History

@using BTCPayServer.Abstractions.Extensions;
@using BTCPayServer.Client.Models;
@using BTCPayServer.Models.StoreReportsViewModels;
@using BTCPayServer.Views.Invoice;
@using BTCPayServer.Views.Stores;
@using BTCPayServer.Abstractions.Services;
@using Microsoft.AspNetCore.Routing;
@inject Safe Safe
@inject BTCPayServer.Security.ContentSecurityPolicies Csp
@model StoreReportsViewModel
@{
ViewData.SetActivePage(StoreNavPages.Reporting, "Reporting");
Csp.UnsafeEval();
}
@section PageHeadContent
{
@* Set a height for the responsive table container to make it work with the fixed table headers.
Details described here: thttps://uxdesign.cc/position-stuck-96c9f55d9526 *@
<style>#app .table-responsive { max-height: 80vh; }</style>
}
<div class="sticky-header">
2023-11-02 08:12:28 +01:00
<div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
<h2 class="mb-0">
@ViewData["Title"]
<a href="https://docs.btcpayserver.org/Accounting/" target="_blank" rel="noreferrer noopener" title="More information...">
<vc:icon symbol="info" />
</a>
</h2>
<div class="d-flex flex-wrap gap-3">
<a cheat-mode="true" class="btn btn-outline-info text-nowrap" asp-action="StoreReports" asp-route-fakeData="true" asp-route-viewName="@Model.Request?.ViewName">Create fake date</a>
<button id="exportCSV" class="btn btn-primary text-nowrap" type="button">
Export CSV
</button>
</div>
</div>
2023-11-02 08:12:28 +01:00
</div>
<div class="d-flex flex-column flex-sm-row align-items-center gap-3 mb-l">
<div class="dropdown" v-pre>
<button id="ViewNameToggle" class="btn btn-secondary dropdown-toggle dropdown-toggle-custom-caret" type="button" data-bs-toggle="dropdown" aria-expanded="false">@Model.Request.ViewName</button>
<div class="dropdown-menu" aria-labelledby="ViewNameToggle">
@foreach (var v in Model.AvailableViews)
{
<a href="#" data-view="@v" class="available-view dropdown-item @(Model.Request.ViewName == v ? "custom-active" : "")">@v</a>
}
</div>
</div>
<div class="input-group">
<input id="fromDate" class="form-control flatdtpicker" type="datetime-local"
data-fdtp='{ "enableTime": true, "enableSeconds": true, "dateFormat": "Y-m-d H:i:S", "time_24hr": true, "defaultHour": 0 }'
placeholder="Start Date" />
<button type="button" class="btn btn-primary input-group-clear" title="Clear">
<span class="fa fa-times"></span>
</button>
</div>
<div class="input-group">
<input id="toDate" class="form-control flatdtpicker" type="datetime-local"
data-fdtp='{ "enableTime": true, "enableSeconds": true, "dateFormat": "Y-m-d H:i:S", "time_24hr": true, "defaultHour": 0 }'
placeholder="End Date" />
<button type="button" class="btn btn-primary input-group-clear" title="Clear">
<span class="fa fa-times"></span>
</button>
</div>
</div>
<div id="app" v-cloak class="w-100-fixed">
<article v-for="chart in srv.charts" class="mb-5">
<h3>{{ chart.name }}</h3>
<div class="table-responsive" v-if="chart.rows.length || chart.hasGrandTotal">
<table class="table table-hover w-auto">
2023-11-02 08:12:28 +01:00
<thead class="bg-body">
<tr>
<th v-for="group in chart.groups">{{ titleCase(group) }}</th>
<th v-for="agg in chart.aggregates" class="text-end">{{ titleCase(agg) }}</th>
</tr>
</thead>
<tbody>
<tr v-for="row in chart.rows">
<td v-for="group in row.groups" :rowspan="group.rowCount">{{ group.name }}</td>
<td v-if="row.isTotal" :colspan="row.rLevel">Total</td>
<td v-for="value in row.values" class="text-end">{{ displayValue(value) }}</td>
</tr>
<tr v-if="chart.hasGrandTotal">
<td :colspan="chart.groups.length">Grand Total</td>
<td v-for="value in chart.grandTotalValues" class="text-end">{{ displayValue(value) }}</td>
</tr>
</tbody>
</table>
</div>
<p v-else class="mt-3 mb-5 text-secondary">No data</p>
</article>
<article v-if="srv.result.data">
<h3 id="raw-data">Raw data</h3>
<div class="table-responsive" v-if="srv.result.data.length">
<table class="table table-hover w-auto">
<thead class="sticky-top bg-body">
<tr>
2023-10-18 10:09:03 +02:00
<th v-for="field in srv.result.fields" :class="{ 'text-end': ['integer', 'decimal', 'amount'].includes(field.type) }">
<a class="text-nowrap sort-column"
href="#"
:data-field="field.name"
@@click.prevent="srv.sortBy(field.name)"
:title="srv.fieldViews[field.name].sortByTitle">
{{ titleCase(field.name) }}
<span :class="srv.fieldViews[field.name].sortIconClass" />
</a>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in srv.result.data" :key="index">
<td class="text-nowrap" v-for="(value, columnIndex) in row" :key="columnIndex" :class="{ 'text-end': ['integer', 'decimal', 'amount'].includes(srv.result.fields[columnIndex].type) }">
<a :href="getInvoiceUrl(value)"
target="_blank"
v-if="srv.result.fields[columnIndex].type === 'invoice_id'">{{ displayValue(value) }}</a>
<a :href="getExplorerUrl(value, row[columnIndex-1])"
target="_blank"
rel="noreferrer noopener"
v-else-if="srv.result.fields[columnIndex].type === 'tx_id'">{{ displayValue(value) }}</a>
<template v-else>{{ displayValue(value) }}</template>
</td>
</tr>
</tbody>
</table>
</div>
<p v-else class="mt-3 mb-5 text-secondary">No data</p>
</article>
</div>
@section PageFootContent {
<script src="~/vendor/decimal.js/decimal.min.js" asp-append-version="true"></script>
<script src="~/vendor/FileSaver/FileSaver.min.js" asp-append-version="true"></script>
<script src="~/vendor/papaparse/papaparse.min.js" asp-append-version="true"></script>
<script src="~/vendor/vuejs/vue.min.js" asp-append-version="true"></script>
<script>const srv = @Safe.Json(Model);</script>
<script src="~/js/datatable.js" asp-append-version="true"></script>
<script src="~/js/store-reports.js" asp-append-version="true"></script>
}