mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-10-31 02:36:28 +00:00
230 lines
12 KiB
Twig
230 lines
12 KiB
Twig
{% extends './layout/default' %}
|
|
|
|
{% block breadcrumbs %}
|
|
{{ Breadcrumbs.render(Route.getCurrentRoute.getName, budget, budgetLimit) }}
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row">
|
|
<div class="{% if attachments.count() == 0 %}col-lg-12 col-md-12 col-sm-12 col-xs-12{% else %}col-lg-8 col-md-6 col-sm-12 col-xs-12{% endif %}">
|
|
<div class="box">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">
|
|
{% if budgetLimit %}
|
|
{{ trans('firefly.chart_budget_in_period', {name: budget.name, start: budgetLimit.start_date.isoFormat(monthAndDayFormat), end: budgetLimit.end_date.isoFormat(monthAndDayFormat),currency: budgetLimit.transactionCurrency.name }) }}
|
|
{% else %}
|
|
{{ trans('firefly.chart_all_journals_for_budget', {name:budget.name}) }}
|
|
{% endif %}
|
|
</h3>
|
|
<div class="box-tools pull-right">
|
|
<div class="btn-group">
|
|
<button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><span class="fa fa-ellipsis-v"></span></button>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="{{ route('budgets.edit',budget.id) }}"><span class="fa fa-pencil fa-fw"></span> {{ 'edit'|_ }}</a></li>
|
|
<li><a href="{{ route('budgets.delete',budget.id) }}"><span class="fa fa-trash fa-fw"></span> {{ 'delete'|_ }}</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box-body">
|
|
<canvas id="budgetOverview" style="width:100%;height:400px;" height="400" width="100%"></canvas>
|
|
</div>
|
|
{% if budgetLimit %}
|
|
<div class="box-footer">
|
|
<p class="text-muted">
|
|
{{ trans('firefly.chart_budget_in_period_only_currency', {currency: budgetLimit.transactionCurrency.name}) }}
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% if attachments.count() > 0 %}
|
|
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
|
|
<div class="box">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">
|
|
{{ 'attachments'|_ }}
|
|
</h3>
|
|
</div>
|
|
<div class="box-body no-padding">
|
|
{% include 'list.attachments' %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
|
|
<div class="box">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">{{ 'expenses_by_category'|_ }}</h3>
|
|
</div>
|
|
<div class="box-body">
|
|
<div style="width:100%;margin:0 auto;">
|
|
<canvas id="budget-cat-out" style="width:100%;height:250px;" height="250"></canvas>
|
|
</div>
|
|
</div>
|
|
{% if budgetLimit %}
|
|
<div class="box-footer">
|
|
<p class="text-muted">
|
|
{{ trans('firefly.chart_budget_in_period_only_currency', {currency: budgetLimit.transactionCurrency.name}) }}
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
|
|
<div class="box">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">{{ 'expenses_by_asset_account'|_ }}</h3>
|
|
</div>
|
|
<div class="box-body">
|
|
<div style="width:100%;margin:0 auto;">
|
|
<canvas id="budget-asset-out" style="width:100%;height:250px;" height="250"></canvas>
|
|
</div>
|
|
</div>
|
|
{% if budgetLimit %}
|
|
<div class="box-footer">
|
|
<p class="text-muted">
|
|
{{ trans('firefly.chart_budget_in_period_only_currency', {currency: budgetLimit.transactionCurrency.name}) }}
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
|
|
<div class="box">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">{{ 'expenses_by_expense_account'|_ }}</h3>
|
|
</div>
|
|
<div class="box-body">
|
|
<div style="width:100%;margin:0 auto;">
|
|
<canvas id="budget-expense-out" style="width:100%;height:250px;" height="250"></canvas>
|
|
</div>
|
|
</div>
|
|
{% if budgetLimit %}
|
|
<div class="box-footer">
|
|
<p class="text-muted">
|
|
{{ trans('firefly.chart_budget_in_period_only_currency', {currency: budgetLimit.transactionCurrency.name}) }}
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% if limits|length > 0 %}
|
|
<div class="row">
|
|
<div class="col-lg-offset-9 col-lg-3 col-md-offset-9 col-md-3 col-sm-12 col-xs-12">
|
|
<p class="small text-center"><a href="{{ route('budgets.show',budget.id) }}">{{ 'showEverything'|_ }}</a></p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="row">
|
|
<div class="{% if limits|length > 0 %}col-lg-9 col-md-9 col-sm-12 col-xs-12{% else %}col-lg-12 col-md-12 col-sm-12 col-xs-12{% endif %}">
|
|
|
|
<div class="box">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">{{ 'transactions'|_ }}</h3>
|
|
</div>
|
|
<div class="box-body">
|
|
{% include 'list.groups' %}
|
|
{% if budgetLimit %}
|
|
<p>
|
|
<span class="fa fa-calendar"></span>
|
|
<a href="{{ route('budgets.show', [budget.id]) }}">
|
|
{{ 'show_all_no_filter'|_ }}
|
|
</a>
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% if limits|length > 0 %}
|
|
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
|
|
{% for limit in limits %}
|
|
<div class="box {% if limit.start_date == budgetLimit.start_date %}box-primary box-solid{% endif %}">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title"><a
|
|
href="{{ route('budgets.show.limit',[budget.id,limit.id]) }}">
|
|
{{ limit.start_date.isoFormat(monthAndDayFormat) }} —
|
|
{{ limit.end_date.isoFormat(monthAndDayFormat) }}
|
|
</a>
|
|
</h3>
|
|
</div>
|
|
<div class="box-body no-padding">
|
|
<table class="table table-hover">
|
|
<tr>
|
|
<td style="width:33%;">{{ 'amount'|_ }}</td>
|
|
<td>
|
|
{{ formatAmountBySymbol(limit.amount, limit.transactionCurrency.symbol, limit.transactionCurrency.decimal_places) }}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width:33%;">{{ 'spent'|_ }}</td>
|
|
<td>
|
|
{{ formatAmountBySymbol(limit.spent, limit.transactionCurrency.symbol, limit.transactionCurrency.decimal_places) }}
|
|
</td>
|
|
</tr>
|
|
{% if limit.spent > 0 %}
|
|
<tr>
|
|
<td colspan="2">
|
|
{% set overspent = limit.amount + limit.spent < 0 %}
|
|
|
|
{% if overspent %}
|
|
{% set pct = (limit.spent != 0 ? (limit.amount / (limit.spent*-1))*100 : 0) %} {# must have -1 here #}
|
|
<div class="progress progress-striped">
|
|
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="{{ pct|round }}"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100" style="width: {{ pct|round }}%;"></div>
|
|
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="{{ (100-pct)|round }}"
|
|
aria-valuemin="0" aria-valuemax="100" style="width: {{ (100-pct)|round }}%;"></div>
|
|
</div>
|
|
{% else %}
|
|
{% set pct = (limit.amount != 0 ? (((limit.spent*-1) / limit.amount)*100) : 0) %} {# must have -1 here #}
|
|
<div class="progress progress-striped">
|
|
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{ pct|round }}"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100" style="width: {{ pct|round }}%;"></div>
|
|
</div>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
<p class="small text-center"><a href="{{ route('budgets.show',budget.id) }}">{{ 'showEverything'|_ }}</a></p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% endblock %}
|
|
{% block scripts %}
|
|
<script type="text/javascript" nonce="{{ JS_NONCE }}">
|
|
var budgetID = {{ budget.id }};
|
|
var budgetLimitID = 0;
|
|
{% if budgetLimit.id %}
|
|
budgetLimitID = {{ budgetLimit.id }};
|
|
var budgetChartUrl = '{{ route('chart.budget.budget-limit', [budget.id, budgetLimit.id] ) }}';
|
|
var currencySymbol = '{{ budgetLimit.transactionCurrency.symbol }}';
|
|
var expenseCategoryUrl = '{{ route('chart.budget.expense-category', [budget.id, budgetLimit.id]) }}';
|
|
var expenseAssetUrl = '{{ route('chart.budget.expense-asset', [budget.id, budgetLimit.id]) }}';
|
|
var expenseExpenseUrl = '{{ route('chart.budget.expense-expense', [budget.id, budgetLimit.id]) }}';
|
|
{% else %}
|
|
var budgetChartUrl = '{{ route('chart.budget.budget', [budget.id] ) }}';
|
|
var expenseCategoryUrl = '{{ route('chart.budget.expense-category', [budget.id]) }}';
|
|
var expenseAssetUrl = '{{ route('chart.budget.expense-asset', [budget.id]) }}';
|
|
var expenseExpenseUrl = '{{ route('chart.budget.expense-expense', [budget.id]) }}';
|
|
{% endif %}
|
|
</script>
|
|
|
|
<script type="text/javascript" src="v1/js/lib/Chart.bundle.min.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
|
|
<script type="text/javascript" src="v1/js/ff/charts.defaults.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
|
|
<script type="text/javascript" src="v1/js/ff/charts.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
|
|
<script type="text/javascript" src="v1/js/ff/budgets/show.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
|
|
{# required for groups.twig #}
|
|
<script type="text/javascript" src="v1/js/ff/list/groups.js?v={{ FF_VERSION }}" nonce="{{ JS_NONCE }}"></script>
|
|
{% endblock %}
|