mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2024-11-20 10:40:29 +01:00
461 lines
25 KiB
Plaintext
461 lines
25 KiB
Plaintext
@model InvoicesModel
|
||
@{
|
||
ViewData["Title"] = "Invoices";
|
||
}
|
||
@section HeadScripts {
|
||
<script src="~/modal/btcpay.js"></script>
|
||
}
|
||
@Html.HiddenFor(a => a.Count)
|
||
<section>
|
||
<div class="container">
|
||
@if (TempData.HasStatusMessage())
|
||
{
|
||
<div class="row">
|
||
<div class="col-lg-12 text-center">
|
||
<partial name="_StatusMessage" />
|
||
</div>
|
||
</div>
|
||
}
|
||
|
||
<div class="row">
|
||
<div class="col-lg-12 section-heading">
|
||
<h2>@ViewData["Title"]</h2>
|
||
<hr class="primary">
|
||
<p>Create, search or pay an invoice. (<a href="#help" data-toggle="collapse">Help</a>)</p>
|
||
<div id="help" class="collapse text-left">
|
||
<p>
|
||
You can search for invoice Id, deposit address, price, order id, store id, any buyer information and any product information.<br />
|
||
Be sure to split your search parameters with comma, for example: <code>startdate:2019-04-25 13:00:00, status:paid</code><br />
|
||
You can also apply filters to your search by searching for <code>filtername:value</code>, here is a list of supported filters
|
||
</p>
|
||
<ul>
|
||
<li><code>storeid:id</code> for filtering a specific store</li>
|
||
<li><code>orderid:id</code> for filtering a specific order</li>
|
||
<li><code>itemcode:code</code> for filtering a specific type of item purchased through the pos or crowdfund apps</li>
|
||
<li><code>status:(expired|invalid|complete|confirmed|paid|new)</code> for filtering a specific status</li>
|
||
<li><code>exceptionstatus:(paidover|paidlate|paidpartial)</code> for filtering a specific exception state</li>
|
||
<li><code>unusual:(true|false)</code> for filtering invoices which might requires merchant attention (those invalid or with an exceptionstatus)</li>
|
||
<li><code>startdate:yyyy-MM-dd HH:mm:ss</code> getting invoices that were created after certain date</li>
|
||
<li><code>enddate:yyyy-MM-dd HH:mm:ss</code> getting invoices that were created before certain date</li>
|
||
</ul>
|
||
<p>
|
||
If you want all confirmed and complete invoices, you can duplicate a filter <code>status:confirmed, status:complete</code>.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row button-row">
|
||
<div class="col-lg-6">
|
||
<a asp-action="CreateInvoice" class="btn btn-primary" role="button" id="CreateNewInvoice"><span class="fa fa-plus"></span> Create a new invoice</a>
|
||
<a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Export
|
||
</a>
|
||
<a href="https://docs.btcpayserver.org/features/accounting" target="_blank">
|
||
<span class="fa fa-question-circle-o" title="More information..."></span>
|
||
</a>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
|
||
<a asp-action="Export" asp-route-timezoneoffset="0" asp-route-format="csv" asp-route-searchTerm="@Model.SearchTerm" class="dropdown-item export-link" target="_blank">CSV</a>
|
||
<a asp-action="Export" asp-route-timezoneoffset="0" asp-route-format="json" asp-route-searchTerm="@Model.SearchTerm" class="dropdown-item export-link" target="_blank">JSON</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="form-group">
|
||
<form asp-action="ListInvoices" method="get" style="float:right;">
|
||
<input type="hidden" asp-for="Count" />
|
||
<div class="input-group">
|
||
<input asp-for="TimezoneOffset" type="hidden" />
|
||
<input asp-for="SearchTerm" class="form-control" style="width:300px;" />
|
||
<div class="input-group-append">
|
||
<button type="submit" class="btn btn-primary" title="Search invoice">
|
||
<span class="fa fa-search"></span> Search
|
||
</button>
|
||
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
|
||
@{
|
||
var storeIds = string.Join(
|
||
"",
|
||
Model.StoreIds.Select(storeId => $",storeid:{storeId}")
|
||
);
|
||
}
|
||
|
||
<div class="dropdown-menu dropdown-menu-right">
|
||
<a class="dropdown-item" href="/invoices?Count=@Model.Count&SearchTerm=status%3Ainvalid@{@storeIds}">Invalid Invoices</a>
|
||
<a class="dropdown-item" href="/invoices?Count=@Model.Count&SearchTerm=status%3Apaid%2Cstatus%3Aconfirmed%2Cstatus%3Acomplete@{@storeIds}">Paid Invoices</a>
|
||
<a class="dropdown-item" href="/invoices?Count=@Model.Count&SearchTerm=exceptionstatus%3ApaidLate@{@storeIds}s">Paid Late Invoices</a>
|
||
<a class="dropdown-item" href="/invoices?Count=@Model.Count&SearchTerm=exceptionstatus%3ApaidPartial@{@storeIds}">Paid Partial Invoices</a>
|
||
<a class="dropdown-item" href="/invoices?Count=@Model.Count&SearchTerm=exceptionstatus%3ApaidOver@{@storeIds}">Paid Over Invoices</a>
|
||
<a class="dropdown-item" href="/invoices?Count=@Model.Count&SearchTerm=unusual%3Atrue@{@storeIds}">Unusual Invoices</a>
|
||
<div role="separator" class="dropdown-divider"></div>
|
||
<a class="dropdown-item last24" href="/invoices?Count=@Model.Count&timezoneoffset=0&SearchTerm=startDate%3Alast24@{@storeIds}">Last 24 hours</a>
|
||
<a class="dropdown-item last72" href="/invoices?Count=@Model.Count&timezoneoffset=0&SearchTerm=startDate%3Alast72@{@storeIds}">Last 3 days</a>
|
||
<a class="dropdown-item last168" href="/invoices?Count=@Model.Count&timezoneoffset=0&SearchTerm=startDate%3Alast168@{@storeIds}">Last 7 days</a>
|
||
<button type="button" class="dropdown-item" data-toggle="modal" data-target="#customRangeModal" data-backdrop="static">Custom Range</button>
|
||
<div role="separator" class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="/invoices">Unfiltered</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span asp-validation-for="SearchTerm" class="text-danger"></span>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
@* Custom Range Modal *@
|
||
<div class="modal fade" id="customRangeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 550px;">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="exampleModalLongTitle">Filter invoices by Custom Range</h5>
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-group row">
|
||
<label for="dtpStartDate" class="col-sm-3 col-form-label">Start Date</label>
|
||
<div class="col-sm-9">
|
||
<div class="input-group">
|
||
<input id="dtpStartDate" 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" />
|
||
<div class="input-group-append">
|
||
<button type="button" class="btn btn-primary input-group-clear" title="Clear">
|
||
<span class=" fa fa-times"></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group row">
|
||
<label class="col-sm-3 col-form-label">End Date</label>
|
||
<div class="col-sm-9">
|
||
<div class="input-group">
|
||
<input id="dtpEndDate" 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" />
|
||
<div class="input-group-append">
|
||
<button type="button" class="btn btn-primary input-group-clear" title="Clear">
|
||
<span class=" fa fa-times"></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button id="btnCustomRangeDate" type="button" class="btn btn-primary">Filter</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script type="text/javascript">
|
||
$('#btnCustomRangeDate').on('click', function (sender) {
|
||
var filterString = "";
|
||
|
||
var dtpStartDate = $("#dtpStartDate").val();
|
||
if (dtpStartDate !== null && dtpStartDate !== "") {
|
||
filterString = "startDate%3A" + dtpStartDate;
|
||
}
|
||
|
||
var dtpEndDate = $("#dtpEndDate").val();
|
||
if (dtpEndDate !== null && dtpEndDate !== "") {
|
||
if (filterString !== "") {
|
||
filterString += ",";
|
||
}
|
||
filterString += "endDate%3A" + dtpEndDate;
|
||
}
|
||
|
||
if (filterString !== "") {
|
||
var redirectUri = "/invoices?Count=" + $("#Count").val() +
|
||
"&timezoneoffset=" + $("#TimezoneOffset").val() +
|
||
"&SearchTerm=" + filterString;
|
||
|
||
window.location.href = redirectUri;
|
||
} else {
|
||
$("#dtpStartDate").next().trigger("focus");
|
||
}
|
||
})
|
||
</script>
|
||
@* Custom Range Modal *@
|
||
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<table class="table table-sm table-responsive-md">
|
||
<thead>
|
||
<tr>
|
||
<th style="min-width: 90px;" class="col-md-auto">
|
||
Date
|
||
<a href="javascript:switchTimeFormat()">
|
||
<span class="fa fa-clock-o" title="Switch date format"></span>
|
||
</a>
|
||
</th>
|
||
<th style="max-width: 180px;">OrderId</th>
|
||
<th>InvoiceId</th>
|
||
<th style="min-width: 150px;">Status</th>
|
||
<th style="text-align:right">Amount</th>
|
||
<th style="text-align:right">Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
@foreach (var invoice in Model.Invoices)
|
||
{
|
||
<tr>
|
||
<td style="width:10em;">
|
||
<span class="switchTimeFormat" data-switch="@invoice.Date.ToTimeAgo()">
|
||
@invoice.Date.ToBrowserDate()
|
||
</span>
|
||
</td>
|
||
<td style="max-width: 180px;">
|
||
@if (invoice.RedirectUrl != string.Empty)
|
||
{
|
||
<a href="@invoice.RedirectUrl" class="wraptext200">@invoice.OrderId</a>
|
||
}
|
||
else
|
||
{
|
||
<span>@invoice.OrderId</span>
|
||
}
|
||
</td>
|
||
<td>@invoice.InvoiceId</td>
|
||
<td>
|
||
@if (invoice.CanMarkStatus)
|
||
{
|
||
<div id="pavpill_@invoice.InvoiceId">
|
||
<span class="dropdown-toggle dropdown-toggle-split pavpill pavpil-@invoice.Status.ToString().ToLower()"
|
||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
@invoice.StatusString
|
||
</span>
|
||
<div class="dropdown-menu pull-right">
|
||
@if (invoice.CanMarkInvalid)
|
||
{
|
||
<button class="dropdown-item small cursorPointer" onclick="changeInvoiceState(this, '@invoice.InvoiceId', 'invalid')">
|
||
Mark as invalid <span class="fa fa-times"></span>
|
||
</button>
|
||
}
|
||
@if (invoice.CanMarkComplete)
|
||
{
|
||
<button class="dropdown-item small cursorPointer" onclick="changeInvoiceState(this, '@invoice.InvoiceId', 'complete')">
|
||
Mark as complete <span class="fa fa-check-circle"></span>
|
||
</button>
|
||
}
|
||
</div>
|
||
</div>
|
||
}
|
||
else
|
||
{
|
||
<span class="pavpill pavpil-@invoice.Status.ToString().ToLower()">@invoice.StatusString</span>
|
||
}
|
||
</td>
|
||
<td style="text-align:right">@invoice.AmountCurrency</td>
|
||
<td style="text-align:right">
|
||
@if (invoice.ShowCheckout)
|
||
{
|
||
<span>
|
||
<a asp-action="Checkout" class="invoice-checkout-link" id="invoice-checkout-@invoice.InvoiceId" asp-route-invoiceId="@invoice.InvoiceId">Checkout</a>
|
||
<a href="javascript:btcpay.showInvoice('@invoice.InvoiceId')">[^]</a>
|
||
@if (!invoice.CanMarkStatus)
|
||
{
|
||
<span>-</span>
|
||
}
|
||
</span>
|
||
}
|
||
|
||
<a asp-action="Invoice" class="invoice-details-link" asp-route-invoiceId="@invoice.InvoiceId">Details</a>
|
||
@*<span title="Details" class="fa fa-list"></span>*@
|
||
|
||
<a href="javascript:void(0);" onclick="detailsToggle(this, '@invoice.InvoiceId')">
|
||
<span title="Invoice Details Toggle" class="fa fa-1x fa-angle-double-down"></span>
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
<tr id="invoice_@invoice.InvoiceId" style="display:none;">
|
||
<td style="border-top:0"></td>
|
||
<td style="border-top:0" colspan="6" class="pt-3 pb-5">
|
||
@* Leaving this as partial because it abstracts complexity of Invoice Payments *@
|
||
<partial name="ListInvoicesPaymentsPartial" model="(invoice.Details, true)" />
|
||
</td>
|
||
</tr>
|
||
}
|
||
</tbody>
|
||
</table>
|
||
<nav aria-label="..." class="w-100">
|
||
@if (Model.Total != 0) {
|
||
<ul class="pagination float-left">
|
||
<li class="page-item @(Model.Skip == 0 ? "disabled" : null)">
|
||
<a class="page-link" tabindex="-1" href="@ListInvoicesPage(-1, Model.Count)">«</a>
|
||
</li>
|
||
<li class="page-item disabled">
|
||
@if (Model.Total <= Model.Count) {
|
||
<span class="page-link">
|
||
1–@Model.Invoices.Count
|
||
</span>
|
||
} else {
|
||
<span class="page-link">
|
||
@(Model.Skip + 1)–@(Model.Skip + Model.Invoices.Count), Total: @Model.Total
|
||
</span>
|
||
}
|
||
</li>
|
||
<li class="page-item @(Model.Total > (Model.Skip + Model.Invoices.Count) ? null : "disabled")">
|
||
<a class="page-link" href="@ListInvoicesPage(1, Model.Count)">»</a>
|
||
</li>
|
||
</ul>
|
||
}
|
||
<ul class="pagination float-right">
|
||
<li class="page-item disabled">
|
||
<span class="page-link">Page Size:</span>
|
||
</li>
|
||
<li class="page-item @(Model.Count == 50 ? "active" : null)">
|
||
<a class="page-link" href="@ListInvoicesPage(0, 50)">50</a>
|
||
</li>
|
||
<li class="page-item @(Model.Count == 100 ? "active" : null)">
|
||
<a class="page-link" href="@ListInvoicesPage(0, 100)">100</a>
|
||
</li>
|
||
<li class="page-item @(Model.Count == 250 ? "active" : null)">
|
||
<a class="page-link" href="@ListInvoicesPage(0, 250)">250</a>
|
||
</li>
|
||
<li class="page-item @(Model.Count == 500 ? "active" : null)">
|
||
<a class="page-link" href="@ListInvoicesPage(0, 500)">500</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
@{
|
||
string ListInvoicesPage(int prevNext, int count)
|
||
{
|
||
var skip = Model.Skip;
|
||
if (prevNext == -1)
|
||
{
|
||
skip = Math.Max(0, Model.Skip - Model.Count);
|
||
}
|
||
else if (prevNext == 1)
|
||
{
|
||
skip = Model.Skip + count;
|
||
}
|
||
|
||
var act = Url.Action("ListInvoices", new
|
||
{
|
||
searchTerm = Model.SearchTerm,
|
||
skip = skip,
|
||
count = count,
|
||
});
|
||
|
||
return act;
|
||
}
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<script type="text/javascript">
|
||
$(function () {
|
||
var timezoneOffset = new Date().getTimezoneOffset();
|
||
$("#TimezoneOffset").val(timezoneOffset);
|
||
$(".export-link, a.dropdown-item").each(function () {
|
||
this.href = this.href.replace("timezoneoffset=0", "timezoneoffset=" + timezoneOffset);
|
||
});
|
||
|
||
$("a.last24").each(function () { this.href = this.href.replace("last24", getDateStringWithOffset(24)); });
|
||
$("a.last72").each(function () { this.href = this.href.replace("last72", getDateStringWithOffset(72)); });
|
||
$("a.last168").each(function () { this.href = this.href.replace("last168", getDateStringWithOffset(168)); });
|
||
});
|
||
|
||
function getDateStringWithOffset(hoursDiff) {
|
||
var datenow = new Date();
|
||
var newDate = new Date(datenow.getTime() - (hoursDiff * 60 * 60 * 1000));
|
||
var str = newDate.toLocaleDateString() + " " + newDate.toLocaleTimeString();
|
||
return str;
|
||
}
|
||
|
||
function detailsToggle(sender, invoiceId) {
|
||
$("#invoice_" + invoiceId).toggle(0, function () {
|
||
var detailsRow = $(this);
|
||
var btnToggle = $(sender).children().first();
|
||
if (detailsRow.is(':visible')) {
|
||
btnToggle.removeClass('fa-angle-double-down').addClass('fa-angle-double-up');
|
||
} else {
|
||
btnToggle.removeClass('fa-angle-double-up').addClass('fa-angle-double-down');
|
||
}
|
||
});
|
||
return false;
|
||
}
|
||
|
||
function changeInvoiceState(sender, invoiceId, newState) {
|
||
var pavpill = $("#pavpill_" + invoiceId);
|
||
var originalHtml = pavpill.html();
|
||
pavpill.html("<span class='fa fa-bitcoin fa-spin' style='margin-left:16px;'></span>");
|
||
|
||
$.post("invoices/" + invoiceId + "/changestate/" + newState)
|
||
.done(function (data) {
|
||
var statusHtml = "<span class='pavpill pavpil-" + newState + "'>" + data.statusString + " <span class='fa fa-check'></span></span>";
|
||
pavpill.html(statusHtml);
|
||
})
|
||
.fail(function (data) {
|
||
pavpill.html(originalHtml.replace("dropdown-menu pull-right show", "dropdown-menu pull-right"));
|
||
alert("Invoice state update failed");
|
||
});
|
||
}
|
||
</script>
|
||
<style type="text/css">
|
||
|
||
.invoice-payments h3 {
|
||
font-size: 15px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.wraptext200 {
|
||
max-width: 200px;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
display: block;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.pavpill {
|
||
display: inline-block;
|
||
padding: 0.3em 0.5em;
|
||
font-size: 85%;
|
||
font-weight: 500;
|
||
line-height: 1;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
vertical-align: baseline;
|
||
border-radius: 0.25rem;
|
||
}
|
||
|
||
.pavpill.dropdown-toggle {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.dropdown-item {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.pavpil-new {
|
||
background: #d4edda;
|
||
color: #000;
|
||
}
|
||
|
||
.pavpil-expired {
|
||
background: #eee;
|
||
color: #000;
|
||
}
|
||
|
||
.pavpil-invalid {
|
||
background: #c94a47;
|
||
color: #fff;
|
||
}
|
||
|
||
.pavpil-confirmed, .pavpil-paid {
|
||
background: #f1c332;
|
||
color: #000;
|
||
}
|
||
|
||
.pavpil-complete {
|
||
background: #329f80;
|
||
color: #fff;
|
||
}
|
||
</style>
|
||
</section>
|