firefly-iii/resources/views/reports/partials/budgets.twig

<table class="table table-hover sortable">
    <thead>
    <tr>
        <th data-defaultsign="az">{{ 'budget'|_ }}</th>
        <th data-defaultsign="month" class="hidden-xs">{{ 'date'|_ }}</th>
        <th data-defaultsign="_19" style="text-align: right;">{{ 'budgeted'|_ }}</th>
        <th data-defaultsign="_19" style="text-align: right;">{{ 'spent'|_ }}</th>
        <th data-defaultsort="disabled">&nbsp;</th>
        <th data-defaultsign="_19" style="text-align: right;">{{ 'left'|_ }}</th>
        <th data-defaultsign="_19" style="text-align: right;">{{ 'overspent'|_ }}</th>
    </tr>
    </thead>
    <tbody>
    {% for budgetLine in budgets.getBudgetLines %}
        <tr>

            {% if budgetLine.getBudget.id %}
                <td data-value="{{ budgetLine.getBudget.name }}">
                    <a href="{{ route('budgets.show',budgetLine.getBudget.id) }}">{{ budgetLine.getBudget.name }}</a>
                </td>
            {% else %}
                <td data-value="zzzzzzz">
                    <em>{{ 'no_budget'|_ }}</em>
                </td>
            {% endif %}


            {% if budgetLine.getBudgetLimit.id %}
                <td class="hidden-xs" data-value="{{ budgetLine.getBudgetLimit.start_date.format('Y-m-d') }}">
                    <a href="{{ route('budgets.show.limit', [budgetLine.getBudget.id, budgetLine.getBudgetLimit.id]) }}">
                        {{ budgetLine.getBudgetLimit.start_date.formatLocalized(monthAndDayFormat) }}
                        &mdash;
                        {{ budgetLine.getBudgetLimit.end_date.formatLocalized(monthAndDayFormat) }}
                    </a>
                </td>
            {% else %}
                <td data-value="0000-00-00">

                </td>
            {% endif %}


            {% if budgetLine.getBudgetLimit.id %}
                <td data-value="{{ budgetLine.getBudgetLimit.amount }}" style="text-align: right;">
                    {{ budgetLine.getBudgetLimit.amount|formatAmount }}
                </td>
            {% else %}
                <td data-value="0" style="text-align: right;">
                    {{ 0|formatAmount }}
                </td>
            {% endif %}

            <td data-value="{{ budgetLine.getSpent }}" style="text-align: right;">
                {% if budgetLine.getSpent != 0 %}
                    {{ budgetLine.getSpent|formatAmount }}
                    <!-- <i class="fa fa-fw text-muted fa-info-circle firefly-info-button"
                       data-location="budget-spent-amount" data-budget-id="{{ budgetLine.getBudget.id }}"></i>
                       -->
                {% endif %}

                {% if budgetLine.getSpent == 0 %}
                    {{ budgetLine.getSpent|formatAmount }}
                {% endif %}
            </td>
            <td>
                {% if budgetLine.getSpent != 0 %}
                    <i class="fa fa-fw text-muted fa-info-circle firefly-info-button"
                       data-location="budget-spent-amount" data-budget-id="{{ budgetLine.getBudget.id }}"></i>

                {% endif %}
            </td>

            <td data-value="{{ budgetLine.getLeft }}" style="text-align: right;">
                {% if(budgetLine.getOverspent == 0) %}
                    {{ budgetLine.getLeft|formatAmount }}
                {% endif %}
            </td>
            <td data-value="{{ budgetLine.getOverspent }}" style="text-align: right;">
                {% if budgetLine.getOverspent != 0 %}
                    {{ budgetLine.getOverspent|formatAmount }}
                {% endif %}
            </td>
        </tr>
    {% endfor %}
    </tbody>
    <tfoot>
    <tr>
        <td><em>{{ 'sum'|_ }}</em></td>
        <td class="hidden-xs">&nbsp;</td>
        <td style="text-align: right;">{{ budgets.getBudgeted|formatAmount }}</td>
        <td style="text-align: right;">
            {% if budgets.getSpent != 0 %}
                <span class="text-danger">{{ budgets.getSpent|formatAmountPlain }}</span>
            {% endif %}
            {% if budgets.getSpent == 0 %}
                {{ budgets.getSpent|formatAmount }}
            {% endif %}
        </td>
        <td>&nbsp;</td>
        <td style="text-align: right;">{{ budgets.getLeft|formatAmount }}</td>
        <td style="text-align: right;"><span class="text-danger">{{ budgets.getOverspent|formatAmountPlain }}</span></td>
    </tr>
    </tfoot>
</table>