btcpayserver/BTCPayServer/Views/UIStores/Dashboard.cshtml

@using BTCPayServer.Components.StoreLightningBalance
@using BTCPayServer.Components.StoreLightningServices
@using BTCPayServer.Components.StoreNumbers
@using BTCPayServer.Components.StoreRecentInvoices
@using BTCPayServer.Components.StoreRecentTransactions
@using BTCPayServer.Components.StoreWalletBalance
@using BTCPayServer.Components.AppSales
@using BTCPayServer.Components.AppTopItems
@model StoreDashboardViewModel;

@{
    ViewData.SetActivePage(StoreNavPages.Dashboard, Model.StoreName, Model.StoreId);
    var store = ViewContext.HttpContext.GetStoreData();
}

<partial name="_StatusMessage" />

<div class="d-flex align-items-center justify-content-between">
    <h2 class="mb-0">@ViewData["Title"]</h2>
    @if (Model.IsSetUp)
    {
        <button type="button" class="btn btn-secondary only-for-js" data-bs-toggle="modal" data-bs-target="#WhatsNew">What's New</button>
    }
</div>

<div class="modal fade" id="WhatsNew" tabindex="-1" aria-labelledby="WhatsNewTitle" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="WhatsNewTitle">What's New</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <vc:icon symbol="close"/>
                </button>
            </div>
            <div class="modal-body">
                <h5 class="alert-heading">Updated in <a href="https://blog.btcpayserver.org/btcpay-server-1-7-0/" target="_blank" rel="noreferrer noopener">v1.7.0</a></h5>
                <p class="mb-2">We've redesigned the checkout and the new version is available as an opt-in feature. We're looking forward to your <a href="https://github.com/btcpayserver/btcpayserver/discussions/4308" target="_blank" rel="noreferrer noopener">feedback</a>!</p>
                <p class="mb-0">You can now also request customer data (e.g. their shipping address) when they pay an invoice.</p>
                <hr style="height:1px;background-color:var(--btcpay-body-text-muted);margin:var(--btcpay-space-m) 0;" />
                <h5 class="alert-heading">Updated in <a href="https://blog.btcpayserver.org/btcpay-server-1-6-0/" target="_blank" rel="noreferrer noopener">v1.6.0</a></h5>
                <p class="mb-2">The dashboard now contains your Lightning balances and services, as well as Point of Sale statistics.</p>
                <p class="mb-0">We've also added invoice receipts and LNURL withdraw for payouts.</p>
                <hr style="height:1px;background-color:var(--btcpay-body-text-muted);margin:var(--btcpay-space-m) 0;" />
                <h5 class="alert-heading">Updated in <a href="https://blog.btcpayserver.org/btcpay-server-1-5-0/" target="_blank" rel="noreferrer noopener">v1.5.0</a></h5>
                <p class="mb-0">Stores now have a neat dashboard like the one you see here! 🗠🎉</p>
            </div>
        </div>
    </div>
</div>

@if (Model.IsSetUp)
{
    /* include chart library inline so that it instantly renders */
    <link rel="stylesheet" href="~/vendor/chartist/chartist.css" asp-append-version="true">
    <script src="~/vendor/chartist/chartist.min.js" asp-append-version="true"></script>
    <script>
        const DashboardUtils = {
            toDefaultCurrency(amount, rate) {
                return Math.round((amount * rate) * 100) / 100;
            },
            displayDefaultCurrency(amount, rate, currency, divisibility) {
                const value = DashboardUtils.toDefaultCurrency(amount, rate);
                const locale = currency === 'USD' ? 'en-US' : navigator.language;
                const opts = { currency, style: 'decimal', minimumFractionDigits: divisibility };
                return new Intl.NumberFormat(locale, opts).format(value);
            },
            async fetchRate(currencyPair) {
                const storeId = @Safe.Json(Context.GetRouteValue("storeId"));
                const pathBase = @Safe.Json(Context.Request.PathBase);
                const response = await fetch(`${pathBase}/api/rates?storeId=${storeId}&currencyPairs=${currencyPair}`);
                const json = await response.json();
                const rate = json[0] && json[0].rate;
                if (rate) return rate;
                else console.warn(`Fetching rate for ${currencyPair} failed.`);
            }
        };
    </script>
    <div id="Dashboard" class="mt-4">
        <vc:ui-extension-point location="dashboard" model="@Model"/>
        @if (Model.WalletEnabled)
        {
            <vc:store-wallet-balance store="@store"/>
        }
        else
        {
            <div class="widget setup-guide">
                <header>
                    <h5 class="mb-4 text-muted">This store is ready to accept transactions, good job!</h5>
                </header>
                <div class="list-group" id="SetupGuide">
                    <div class="list-group-item d-flex align-items-center" id="SetupGuide-LightningDone">
                        <vc:icon symbol="done"/>
                        <div class="content">
                            <h5 class="mb-0 text-success">Set up a Lightning node</h5>
                        </div>
                    </div>
                    <a asp-controller="UIStores" asp-action="SetupWallet" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="@Model.CryptoCode" id="SetupGuide-Wallet" class="list-group-item list-group-item-action d-flex align-items-center">
                        <vc:icon symbol="new-wallet"/>
                        <div class="content">
                            <h5 class="mb-0">Set up a wallet</h5>
                        </div>
                        <vc:icon symbol="caret-right"/>
                    </a>
                </div>
            </div>
        }
        <vc:store-numbers vm="@(new StoreNumbersViewModel { Store = store, CryptoCode = Model.CryptoCode, InitialRendering = true })"/>
        @if (Model.LightningEnabled)
        {
            <vc:store-lightning-balance vm="@(new StoreLightningBalanceViewModel { Store = store, CryptoCode = Model.CryptoCode, InitialRendering = true })"/>
            <vc:store-lightning-services vm="@(new StoreLightningServicesViewModel { Store = store, CryptoCode = Model.CryptoCode })"/>
        }
        @if (Model.WalletEnabled)
        {
            <vc:store-recent-transactions vm="@(new StoreRecentTransactionsViewModel { Store = store, CryptoCode = Model.CryptoCode, InitialRendering = true })"/>
        }
        <vc:store-recent-invoices vm="@(new StoreRecentInvoicesViewModel { Store = store, CryptoCode = Model.CryptoCode, InitialRendering = true })"/>
        @foreach (var app in Model.Apps)
        {
            <vc:app-sales vm="@(new AppSalesViewModel { App = app, InitialRendering = true })"/>
            <vc:app-top-items vm="@(new AppTopItemsViewModel { App = app, InitialRendering = true })"/>
        }
    </div>
}
else
{
    <p class="lead text-secondary mt-2">To start accepting payments, set up a wallet or a Lightning node.</p>
    
    <div class="list-group" id="SetupGuide">
        <div class="list-group-item d-flex align-items-center" id="SetupGuide-StoreDone">
            <vc:icon symbol="done"/>
            <div class="content">
                <h5 class="mb-0 text-success">Create your store</h5>
            </div>
        </div>
        @if (Model.Network is BTCPayNetwork)
        {

            @if (!Model.WalletEnabled)
            {
                <a asp-controller="UIStores" asp-action="SetupWallet" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="@Model.CryptoCode" id="SetupGuide-Wallet" class="list-group-item list-group-item-action d-flex align-items-center order-1">
                    <vc:icon symbol="new-wallet"/>
                    <div class="content">
                        <h5 class="mb-0">Set up a wallet</h5>
                    </div>
                    <vc:icon symbol="caret-right"/>
                </a>
            }
            else
            {
                <div class="list-group-item d-flex align-items-center" id="SetupGuide-WalletDone">
                    <vc:icon symbol="done"/>
                    <div class="content">
                        <h5 class="mb-0 text-success">Set up a wallet</h5>
                    </div>
                </div>
            }
        }
        @if (Model.LightningSupported) {
            if (!Model.LightningEnabled)
            {
                <a asp-controller="UIStores" asp-action="SetupLightningNode" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="@Model.CryptoCode" id="SetupGuide-Lightning" class="list-group-item list-group-item-action d-flex align-items-center order-1">
                    <vc:icon symbol="new-wallet"/>
                    <div class="content">
                        <h5 class="mb-0">Set up a Lightning node</h5>
                    </div>
                    <vc:icon symbol="caret-right"/>
                </a>
            }
            else
            {
                <div class="list-group-item d-flex align-items-center" id="SetupGuide-LightningDone">
                    <vc:icon symbol="done"/>
                    <div class="content">
                        <h5 class="mb-0 text-success">Set up a Lightning node</h5>
                    </div>
                </div>
            }
        }
    </div>
}