btcpayserver/BTCPayServer/Views/Invoice/ListInvoices.cshtml

@model InvoicesModel
@{
    ViewData["Title"] = "Invoices";
}

@section HeadScripts {
    <script src="~/modal/btcpay.js"></script>
}

<section>
    <div class="container">

        <div class="row">
            <div class="col-lg-12 text-center">
                <partial name="_StatusMessage" for="StatusMessage" />
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading">@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 no-gutter" style="margin-bottom: 5px;">
            <div class="col-lg-6">
                <a asp-action="CreateInvoice" class="btn btn-primary" role="button"><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;">
                        <div class="input-group">
                            <input asp-for="TimezoneOffset" type="hidden" />
                            <input asp-for="SearchTerm" class="form-control" style="width:300px;" />
                            <span class="input-group-btn">
                                <button type="submit" class="btn btn-primary" title="Search invoice">
                                    <span class="fa fa-search"></span> Search
                                </button>
                            </span>
                        </div>
                        <input type="hidden" asp-for="Count" />
                        <span asp-validation-for="SearchTerm" class="text-danger"></span>
                    </form>
                </div>
            </div>
        </div>

        <div class="row">
            <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: 140px;">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>
                                <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" asp-route-invoiceId="@invoice.InvoiceId">Checkout</a>
                                        <a href="javascript:btcpay.showInvoice('@invoice.InvoiceId')">[^]</a>
                                        @if (!invoice.CanMarkStatus)
                                        {
                                            <span>-</span>
                                        }
                                    </span>
                                }
                                &nbsp;
                                <a asp-action="Invoice" asp-route-invoiceId="@invoice.InvoiceId">Details</a>
                                @*<span title="Details" class="fa fa-list"></span>*@
                                &nbsp;
                                <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 colspan="99">
                                <div style="margin-left: 15px; margin-bottom: 0px;">
                                    <partial name="InvoicePaymentsPartial" model="invoice.Details" />
                                </div>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>

            <nav aria-label="..." class="w-100">
                <ul class="pagination float-left">
                    <li class="page-item @(Model.Skip == 0 ? "disabled" : null)">
                        <a class="page-link" tabindex="-1" href="@listInvoices(-1, Model.Count)">&laquo;</a>
                    </li>
                    <li class="page-item disabled">
                        <span class="page-link">@(Model.Skip + 1) to @(Model.Skip + Model.Invoices.Count) of @Model.Total</span>
                    </li>
                    <li class="page-item @(Model.Total > (Model.Skip + Model.Invoices.Count) ? null : "disabled")">
                        <a class="page-link" href="@listInvoices(1, Model.Count)">&raquo;</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="@listInvoices(0, 50)">50</a>
                    </li>
                    <li class="page-item @(Model.Count == 100 ? "active" : null)">
                        <a class="page-link" href="@listInvoices(0, 100)">100</a>
                    </li>
                    <li class="page-item @(Model.Count == 250 ? "active" : null)">
                        <a class="page-link" href="@listInvoices(0, 250)">250</a>
                    </li>
                    <li class="page-item @(Model.Count == 500 ? "active" : null)">
                        <a class="page-link" href="@listInvoices(0, 500)">500</a>
                    </li>
                </ul>
            </nav>
            @{
                string listInvoices(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>

    <script type="text/javascript">
        $(function () {
            var timezoneOffset = new Date().getTimezoneOffset()
            $("#TimezoneOffset").val(timezoneOffset);
            $(".export-link").each(function () {
                this.href = this.href.replace("timezoneoffset=0", "timezoneoffset=" + timezoneOffset);
            });
        })

        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>";
                    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>