119 lines
5.1 KiB
HTML
119 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org"
|
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
xmlns:with="http://www.thymeleaf.org/extras/with"
|
|
layout:decorate="~{layout}"
|
|
with:title="Reports">
|
|
<th:block layout:fragment="content">
|
|
<div class="container-fluid">
|
|
<div class="row justify-content-center mb-3">
|
|
<div class="col-md-12">
|
|
<div class="card ">
|
|
<div class="card-header bg-dark align-items-center">
|
|
<span class="md-12 display-5 text-light">Kontodaten</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="md-12 display-5" th:text="'Name: ' + ${accountName}"></p>
|
|
<p class="md-12 display-5" th:text="'IBAN: ' + ${iban}"></p>
|
|
<p class="md-12 display-5" th:text="'Datum: ' + ${date}"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-center mb-3">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header bg-dark align-items-center">
|
|
<span class="md-12 display-5 text-light">Cashflow Analyse</span>
|
|
</div>
|
|
<div class="card-body scrollable-table">
|
|
<div layout:replace="~{fragments/table :: table(data=${cashFlow})}"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-center mb-3">
|
|
<!-- Chart -->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header bg-dark align-items-center">
|
|
<span class="md-12 display-5 text-light">Kontostand Verlauf</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="line-chart-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Chart End -->
|
|
<!-- Chart -->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header bg-dark align-items-center">
|
|
<span class="md-12 display-5 text-light">Verteilung Einnahmen und Ausgaben</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="chart-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Chart End -->,
|
|
</div>
|
|
<div class="row justify-content-center mb-3">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header bg-dark align-items-center">
|
|
<span class="md-12 display-5 text-light">Einkommen</span>
|
|
</div>
|
|
|
|
<div class="card-body scrollable-table">
|
|
<div layout:replace="~{fragments/table :: table(data=${income})}"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-center mb-3">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header bg-dark align-items-center"><span class="md-12 display-5 text-light">Verträge</span></div>
|
|
<div class="card-body scrollable-table">
|
|
<div layout:replace="~{fragments/table :: table(data=${standingOrders})}"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center mb-3">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header bg-dark align-items-center"><span class="md-12 display-5 text-light">Keine Verträge</span></div>
|
|
<div class="card-body scrollable-table">
|
|
<div layout:replace="~{fragments/table :: table(data=${notStandingOrders})}"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-center mb-3">
|
|
<!-- Chart -->
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header bg-dark align-items-center"><span class="md-12 display-5 text-light">Kategorien der Ausgaben</span></div>
|
|
<div class="card-body">
|
|
<div id="bubble-chart-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Chart End -->
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div layout:replace="~{fragments/body_end_scripts :: scripts(id=${'bubble-chart-container'}, data=${transactionCategories})}"/>
|
|
<div layout:replace="~{fragments/body_end_scripts :: scripts(id=${'chart-container'}, data=${incomeExpenseColumnReport})}"/>
|
|
<div layout:replace="~{fragments/body_end_scripts :: scripts(id=${'line-chart-container'}, data=${accountBalanceLineChart})}"/>
|
|
|
|
</th:block> |