rbox/mywebdav/templates/admin/payments/detail.html

{% extends "admin/base.html" %}

{% block title %}Invoice: {{ invoice.invoice_number }}{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">{{ invoice.invoice_number }}</h1>
    <p class="page-subtitle">Created: {{ invoice.created_at.strftime('%Y-%m-%d %H:%M') }}</p>
</div>

<div class="detail-grid">
    <div class="detail-section">
        <h3 class="detail-section-title">Invoice Details</h3>
        <div class="detail-row">
            <span class="detail-label">Status</span>
            <span class="detail-value">
                {% if invoice.status == 'paid' %}
                <span class="badge badge-success">Paid</span>
                {% elif invoice.status == 'open' %}
                <span class="badge badge-warning">Open</span>
                {% else %}
                <span class="badge badge-secondary">{{ invoice.status }}</span>
                {% endif %}
            </span>
        </div>
        <div class="detail-row">
            <span class="detail-label">User</span>
            <span class="detail-value">
                {% if user %}
                <a href="/manage/users/{{ user.id }}">{{ user.username }}</a>
                {% else %}
                Unknown
                {% endif %}
            </span>
        </div>
        <div class="detail-row">
            <span class="detail-label">Period</span>
            <span class="detail-value">{{ invoice.period_start.strftime('%Y-%m-%d') }} - {{ invoice.period_end.strftime('%Y-%m-%d') }}</span>
        </div>
        <div class="detail-row">
            <span class="detail-label">Due Date</span>
            <span class="detail-value">{% if invoice.due_date %}{{ invoice.due_date.strftime('%Y-%m-%d') }}{% else %}-{% endif %}</span>
        </div>
        {% if invoice.paid_at %}
        <div class="detail-row">
            <span class="detail-label">Paid At</span>
            <span class="detail-value">{{ invoice.paid_at.strftime('%Y-%m-%d %H:%M') }}</span>
        </div>
        {% endif %}
    </div>

    <div class="detail-section">
        <h3 class="detail-section-title">Totals</h3>
        <div class="detail-row">
            <span class="detail-label">Subtotal</span>
            <span class="detail-value">{{ invoice.subtotal | format_currency }}</span>
        </div>
        <div class="detail-row">
            <span class="detail-label">Tax</span>
            <span class="detail-value">{{ invoice.tax | format_currency }}</span>
        </div>
        <div class="detail-row" style="font-size: 1.1rem; font-weight: 600;">
            <span class="detail-label">Total</span>
            <span class="detail-value">{{ invoice.total | format_currency }}</span>
        </div>
    </div>
</div>

<div class="card" style="margin-top: 24px;">
    <div class="card-header">
        <h2 class="card-title">Line Items</h2>
    </div>
    <div class="table-container">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Description</th>
                    <th>Type</th>
                    <th>Quantity</th>
                    <th>Unit Price</th>
                    <th>Amount</th>
                </tr>
            </thead>
            <tbody>
                {% for item in line_items %}
                <tr>
                    <td>{{ item.description }}</td>
                    <td>
                        <span class="badge badge-secondary">{{ item.item_type }}</span>
                    </td>
                    <td>{{ "%.2f" | format(item.quantity) }}</td>
                    <td>{{ item.unit_price | format_currency }}</td>
                    <td><strong>{{ item.amount | format_currency }}</strong></td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="5" class="empty-state">
                        <div class="empty-state-text">No line items</div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{% if invoice.status != 'paid' %}
<div class="card" style="margin-top: 24px;">
    <div class="card-header">
        <h2 class="card-title">Actions</h2>
    </div>
    <form method="POST" action="/manage/payments/{{ invoice.id }}/mark-paid" onsubmit="return confirm('Mark this invoice as paid?');">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <button type="submit" class="btn btn-success">Mark as Paid</button>
    </form>
</div>
{% endif %}

<div style="margin-top: 24px;">
    <a href="/manage/payments" class="btn btn-outline">&larr; Back to Payments</a>
</div>
{% endblock %}