mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-10-12 15:35:15 +00:00
Rebuild frontpage with better bills overview.
This commit is contained in:
James Cole
@@ -9,232 +9,34 @@
|
||||
<div class="container-fluid">
|
||||
@include('partials.dashboard.boxes')
|
||||
|
||||
<!-- row with account data -->
|
||||
<!-- row with account, budget and category data -->
|
||||
<div class="row mb-2" x-data="accounts">
|
||||
<!-- column with 3 charts -->
|
||||
<div class="col-xl-8 col-lg-12 col-sm-12 col-xs-12">
|
||||
<div class="row mb-2">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title"><a href="{{ route('accounts.index',['asset']) }}"
|
||||
title="{{ __('firefly.yourAccounts') }}">{{ __('firefly.yourAccounts') }}</a>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body p-0" style="position: relative;height:400px;">
|
||||
<canvas id="account-chart"></canvas>
|
||||
</div>
|
||||
<div class="card-footer text-end">
|
||||
<template x-if="autoConversion">
|
||||
<button type="button" @click="switchAutoConversion"
|
||||
class="btn btn-outline-info btm-sm">
|
||||
<span
|
||||
class="fa-solid fa-comments-dollar"></span> {{ __('firefly.disable_auto_convert') }}
|
||||
</button>
|
||||
</template>
|
||||
<template x-if="!autoConversion">
|
||||
<button type="button" @click="switchAutoConversion"
|
||||
class="btn btn-outline-info btm-sm">
|
||||
<span
|
||||
class="fa-solid fa-comments-dollar"></span> {{ __('firefly.enable_auto_convert') }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2" x-data="budgets">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title"><a href="{{ route('budgets.index') }}"
|
||||
title="{{ __('firefly.go_to_budgets') }}">{{ __('firefly.budgetsAndSpending') }}</a>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body p-0" style="position: relative;height:350px;">
|
||||
<canvas id="budget-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" x-data="categories">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title"><a href="{{ route('categories.index') }}"
|
||||
title="{{ __('firefly.go_to_categories') }}">{{ __('firefly.categories') }}</a>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body p-0" style="position: relative;height:350px;">
|
||||
<canvas id="category-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- row with account chart -->
|
||||
@include('partials.dashboard.account-chart')
|
||||
<!-- row with budget chart -->
|
||||
@include('partials.dashboard.budget-chart')
|
||||
<!-- row with category chart -->
|
||||
@include('partials.dashboard.category-chart')
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-12 col-sm-12 col-xs-12">
|
||||
<div class="row">
|
||||
<template x-if="loadingAccounts">
|
||||
<p class="text-center">
|
||||
<em class="fa-solid fa-spinner fa-spin"></em>
|
||||
</p>
|
||||
</template>
|
||||
<template x-for="account in accountList">
|
||||
<div class="col-12 mb-2" x-model="account">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
<a :href="'{{ route('accounts.show', '') }}/' + account.id"
|
||||
x-text="account.name"></a>
|
||||
|
||||
<span class="small">
|
||||
@include('partials.elements.amount', ['autoConversion' => true,'amount' => 'account.balance','native' => 'account.native_balance'])
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<p class="text-center small" x-show="account.groups.length < 1">
|
||||
{{ __('firefly.no_transactions_period') }}
|
||||
</p>
|
||||
<table class="table table-sm" x-show="account.groups.length > 0">
|
||||
<tbody>
|
||||
<template x-for="group in account.groups">
|
||||
<tr>
|
||||
<td>
|
||||
<template x-if="group.title">
|
||||
<span>
|
||||
TODO ICON
|
||||
<a
|
||||
:href="'{{route('transactions.show', '') }}/' + group.id"
|
||||
x-text="group.title"></a><br/></span>
|
||||
</template>
|
||||
<template x-for="transaction in group.transactions">
|
||||
<span>
|
||||
<template x-if="group.title">
|
||||
<span>-
|
||||
<span
|
||||
x-text="transaction.description"></span><br>
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="!group.title">
|
||||
<span>
|
||||
<!-- withdrawal -->
|
||||
<template
|
||||
x-if="transaction.type == 'withdrawal'">
|
||||
<span
|
||||
class="text-muted fa-solid fa-arrow-left fa-fw"></span>
|
||||
</template>
|
||||
<template x-if="transaction.type == 'deposit'">
|
||||
<span
|
||||
class="text-muted fa-solid fa-arrow-right fa-fw"></span>
|
||||
</template>
|
||||
<template x-if="transaction.type == 'transfer'">
|
||||
<span
|
||||
class="text-muted fa-solid fa-arrows-rotate fa-fw"></span>
|
||||
</template>
|
||||
<a
|
||||
:href="'{{route('transactions.show', '') }}/' + group.id"
|
||||
x-text="transaction.description"></a><br>
|
||||
</span>
|
||||
</template>
|
||||
</span>
|
||||
</template>
|
||||
</td>
|
||||
<td style="width:30%;" class="text-end">
|
||||
<template x-if="group.title">
|
||||
<span><br/></span>
|
||||
</template>
|
||||
<template x-for="transaction in group.transactions">
|
||||
<span>
|
||||
@include('partials.elements.amount', ['autoConversion' => true,'amount' => 'transaction.amount','native' => 'transaction.native_amount'])
|
||||
</span>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<!-- row with accounts list -->
|
||||
@include('partials.dashboard.account-list')
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- row with sankey chart -->
|
||||
<div class="row mb-2">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title"><a href="{{ route('reports.index') }}"
|
||||
title="{{ __('firefly.income_and_expense') }}"
|
||||
>{{ __('firefly.income_and_expense') }}</a>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body" x-data="sankey">
|
||||
<canvas id="sankey-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@include('partials.dashboard.sankey')
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col" x-data="subscriptions">
|
||||
{{--
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title"><a href="{{ route('subscriptions.index') }}"
|
||||
title="{{ __('firefly.go_to_subscriptions') }}">{{ __('firefly.subscriptions') }}</a>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body" x-data="subscriptions">
|
||||
<canvas id="subscriptions-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title"><a href="{{ route('subscriptions.index') }}"
|
||||
title="{{ __('firefly.go_to_subscriptions') }}">{{ __('firefly.subscriptions') }}
|
||||
(TODO group)</a>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body" x-data="subscriptions">
|
||||
Tabel: per item verwacht in deze periode betaald niet betaald<br>
|
||||
if betaald dan percentage over / onder.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
--}}
|
||||
|
||||
</div>
|
||||
<div class="col" x-data="piggies">
|
||||
|
||||
<template x-for="group in piggies">
|
||||
<div class="card mb-2">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title"><a href="{{ route('piggy-banks.index') }}"
|
||||
title="{{ __('firefly.go_to_piggies') }}">{{ __('firefly.piggy_banks') }}
|
||||
(<span
|
||||
x-text="group.title"></span>)</a></h3>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<template x-for="piggy in group.piggies">
|
||||
<li class="list-group-item">
|
||||
<strong x-text="piggy.name"></strong>
|
||||
<div class="progress" role="progressbar" aria-label="Info example"
|
||||
:aria-valuenow="piggy.percentage" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-info text-dark"
|
||||
:style="'width: ' + piggy.percentage +'%'">
|
||||
<span x-text="piggy.percentage + '%'"></span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
<!-- row with piggy banks, subscriptions and empty box -->
|
||||
<div class="row mb-2">
|
||||
<!-- column with subscriptions -->
|
||||
@include('partials.dashboard.subscriptions')
|
||||
<!-- column with piggy banks -->
|
||||
@include('partials.dashboard.piggy-banks')
|
||||
<!-- column with to do things -->
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
|
||||
Reference in New Issue
Block a user