firefly-iii/resources/views/reports/default/year.blade.php

@extends('layout.v3.session')
@section('breadcrumbs')
    {{ Breadcrumbs::render(Route::getCurrentRoute()->getName(), $accountIds, $start, $end) }}
@endsection

@section('content')

    {{-- charts --}}
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="card mb-2" id="year-inc-exp">
                <div class="card-header">
                    <h3 class="card-title">{{ __('firefly.incomeVsExpenses') }}</h3>
                </div>
                <div class="card-body">
                    <canvas id="income-expenses-chart" class="wide-chart" height="400" width="100%"></canvas>
                </div>
            </div>
        </div>
    </div>

    {{-- balances and inc vs exp --}}
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <div class="card mb-2">
                <div class="card-header">
                    <h3 class="card-title">{{ __('firefly.accountBalances') }}</h3>
                </div>
                <div class="card-body p-0" id="accountReport">
                </div>
                {{-- loading indicator --}}
                <div class="overlay text-center m-2">
                    <div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <div class="card mb-2">
                <div class="card-header">
                    <h3 class="card-title">{{ __('firefly.incomeVsExpenses') }}</h3>
                </div>
                <div class="card-body p-0" id="incomeVsExpenseReport">
                </div>
                {{-- loading indicator --}}
                <div class="overlay text-center m-2">
                    <div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
                </div>
            </div>
        </div>
    </div>

    {{-- income and expenses. --}}
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <div class="card mb-2">
                <div class="card-header">
                    <h3 class="card-title">{{ __('firefly.income') }}</h3>
                </div>
                <div class="card-body p-0" id="incomeReport">
                </div>
                {{-- loading indicator --}}
                <div class="overlay text-center m-2">
                    <div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <div class="card mb-2">
                <div class="card-header">
                    <h3 class="card-title">{{ __('firefly.expenses') }}</h3>
                </div>
                <div class="card-body p-0" id="expenseReport">
                </div>
                {{-- loading indicator --}}
                <div class="overlay text-center m-2">
                    <div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
                </div>
            </div>
        </div>
    </div>

    {{-- net worth --}}
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="card mb-2">
                <div class="card-header">
                    <h3 class="card-title">{{ __('firefly.net_worth') }}</h3>
                </div>
                <div class="card-body">
                    <canvas id="net-worth" class="wide-chart" height="400" width="100%"></canvas>
                </div>
                <div class="card-footer">
                    <small>
                        {{ __('firefly.net_filtered_prefs') }}
                    </small>
                </div>
            </div>
        </div>
    </div>

    {{-- This is the budget overview generated by budget period report --}}
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="card mb-2">
                <div class="card-header">
                    <h3 class="card-title">{{ __('firefly.budgets') }}</h3>
                </div>
                <div class="card-body p-0" id="budgetPeriodReport">
                </div>
                {{-- loading indicator --}}
                <div class="overlay text-center m-2">
                    <div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
                </div>
            </div>
        </div>
    </div>


    {{-- This is the chart that belongs to the above overview. --}}
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="card mb-2">
                <div class="card-header">
                    <h3 class="card-title">{{ __('firefly.chart') }}</h3>
                </div>
                <div class="card-body">
                    <p id="budget_help" class="text-muted text-center">{{ __('firefly.budget_chart_click') }}</p>
                    <canvas id="budget_chart" class="wide-chart" height="400" width="100%"></canvas>
                </div>
            </div>
        </div>
    </div>

    {{-- same thing but for categories (expenses) --}}
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="card mb-2">
                <div class="card-header">
                    <h3 class="card-title">{{ __('firefly.categories') }} ({{ __('firefly.expenses') }})</h3>
                </div>
                <div class="card-body p-0" id="categoryExpense">
                </div>
                {{-- loading indicator --}}
                <div class="overlay text-center m-2">
                    <div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
                </div>
            </div>
        </div>
    </div>

    {{-- same thing but for categories (income) --}}
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="card mb-2">
                <div class="card-header">
                    <h3 class="card-title">{{ __('firefly.categories') }} ({{ __('firefly.income') }})</h3>
                </div>
                <div class="card-body p-0" id="categoryIncome">
                </div>
                {{-- loading indicator --}}
                <div class="overlay text-center m-2">
                    <div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
                </div>
            </div>
        </div>
    </div>

    {{-- and the same chart too! --}}
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="card mb-2">
                <div class="card-header">
                    <h3 class="card-title">{{ __('firefly.chart') }}</h3>
                </div>
                <div class="card-body">
                    <p id="category_help" class="text-muted text-center">{{ __('firefly.category_chart_click') }}</p>
                    <canvas id="category_chart" class="wide-chart" height="400" width="100%"></canvas>
                </div>
            </div>
        </div>
    </div>


@endsection
@section('scripts')
    @vite(['js/pages/generic.js'])
    <script type="text/javascript" src="v1/js/lib/bootstrap-sortable.js?v={{ $FF_BUILD_TIME }}" nonce="{{ $JS_NONCE }}"></script>
    <script type="text/javascript" src="v1/js/lib/Chart.bundle.min.js?v={{ $FF_BUILD_TIME }}" nonce="{{ $JS_NONCE }}"></script>
    <script type="text/javascript" src="v1/js/ff/charts.defaults.js?v={{ $FF_BUILD_TIME }}" nonce="{{ $JS_NONCE }}"></script>
    <script type="text/javascript" src="v1/js/ff/charts.js?v={{ $FF_BUILD_TIME }}" nonce="{{ $JS_NONCE }}"></script>
    <script type="text/javascript" nonce="{{ $JS_NONCE }}">
        var year = '{{ $start->year }}';

        // to report another URL:
        var startDate = '{{ $start->format('Ymd') }}';
        var endDate = '{{ $end->format('Ymd') }}';
        var accountIds = '{{ $accountIds }}';

        var opChartUrl = '{{ route('chart.report.operations', [$accountIds, $start->format('Ymd'), $end->format('Ymd')]) }}';
        var netWorthUrl = '{{ route('chart.report.net-worth', [$accountIds, $start->format('Ymd'), $end->format('Ymd')]) }}';

        var accountReportUrl = '{{ route('report-data.account.general', [$accountIds, $start->format('Ymd'), $end->format('Ymd')]) }}';
        var incomeReportUrl = '{{ route('report-data.operations.income', [$accountIds, $start->format('Ymd'), $end->format('Ymd')]) }}';
        var expenseReportUrl = '{{ route('report-data.operations.expenses', [$accountIds, $start->format('Ymd'), $end->format('Ymd')]) }}';
        var incExpReportUrl = '{{ route('report-data.operations.operations', [$accountIds, $start->format('Ymd'), $end->format('Ymd')]) }}';

        var budgetPeriodReportUrl = '{{ route('report-data.budget.period', [$accountIds, $start->format('Ymd'), $end->format('Ymd')]) }}';
        var categoryExpenseUrl = '{{ route('report-data.category.expenses', [$accountIds, $start->format('Ymd'), $end->format('Ymd')]) }}';
        var categoryIncomeUrl = '{{ route('report-data.category.income', [$accountIds, $start->format('Ymd'), $end->format('Ymd')]) }}';
        var billReportUrl = '';

    </script>
    <script type="text/javascript" src="v1/js/ff/reports/all.js?v={{ $FF_BUILD_TIME }}" nonce="{{ $JS_NONCE }}"></script>
    <script type="text/javascript" src="v1/js/ff/reports/default/all.js?v={{ $FF_BUILD_TIME }}" nonce="{{ $JS_NONCE }}"></script>
    <script type="text/javascript" src="v1/js/ff/reports/default/year.js?v={{ $FF_BUILD_TIME }}" nonce="{{ $JS_NONCE }}"></script>

@endsection
@section('styles')
    <link rel="stylesheet" href="v1/css/bootstrap-sortable.css?v={{ $FF_BUILD_TIME }}" type="text/css" media="all" nonce="{{ $JS_NONCE }}">
@endsection