mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-12-12 01:42:32 +00:00
Rebuild frontpage with better bills overview.
This commit is contained in:
James Cole
@@ -84,10 +84,10 @@ export default () => ({
|
||||
|
||||
// use the "native" currency code and use the "native_entries" as array
|
||||
if (this.autoConversion) {
|
||||
currencies.push(current.native_code);
|
||||
dataset.currency_code = current.native_code;
|
||||
currencies.push(current.native_currency_code);
|
||||
dataset.currency_code = current.native_currency_code;
|
||||
collection = Object.values(current.native_entries);
|
||||
yAxis = 'y' + current.native_code;
|
||||
yAxis = 'y' + current.native_currency_code;
|
||||
}
|
||||
if (!this.autoConversion) {
|
||||
yAxis = 'y' + current.currency_code;
|
||||
@@ -208,7 +208,7 @@ export default () => ({
|
||||
amount_raw: parseFloat(currentTransaction.amount),
|
||||
amount: formatMoney(currentTransaction.amount, currentTransaction.currency_code),
|
||||
native_amount_raw: parseFloat(currentTransaction.native_amount),
|
||||
native_amount: formatMoney(currentTransaction.native_amount, currentTransaction.native_code),
|
||||
native_amount: formatMoney(currentTransaction.native_amount, currentTransaction.native_currency_code),
|
||||
});
|
||||
}
|
||||
groups.push(group);
|
||||
@@ -221,7 +221,7 @@ export default () => ({
|
||||
balance_raw: parseFloat(parent.attributes.current_balance),
|
||||
balance: formatMoney(parent.attributes.current_balance, parent.attributes.currency_code),
|
||||
native_balance_raw: parseFloat(parent.attributes.native_current_balance),
|
||||
native_balance: formatMoney(parent.attributes.native_current_balance, parent.attributes.native_code),
|
||||
native_balance: formatMoney(parent.attributes.native_current_balance, parent.attributes.native_currency_code),
|
||||
groups: groups,
|
||||
});
|
||||
// console.log(parent.attributes);
|
||||
|
||||
@@ -134,7 +134,7 @@ export default () => ({
|
||||
let label = current.label + ' (' + current.currency_code + ')';
|
||||
options.data.labels.push(label);
|
||||
if (this.autoConversion) {
|
||||
currencies.push(current.native_code);
|
||||
currencies.push(current.native_currency_code);
|
||||
// series 0: spent
|
||||
options.data.datasets[0].data.push(parseFloat(current.native_entries.spent) * -1);
|
||||
// series 1: left
|
||||
|
||||
@@ -46,7 +46,7 @@ export default () => ({
|
||||
let code = current.currency_code;
|
||||
// only use native code when doing auto conversion.
|
||||
if (this.autoConversion) {
|
||||
code = current.native_code;
|
||||
code = current.native_currency_code;
|
||||
}
|
||||
|
||||
if (!series.hasOwnProperty(code)) {
|
||||
@@ -67,7 +67,7 @@ export default () => ({
|
||||
let current = data[i];
|
||||
let code = current.currency_code;
|
||||
if (this.autoConversion) {
|
||||
code = current.native_code;
|
||||
code = current.native_currency_code;
|
||||
}
|
||||
|
||||
// loop series, add 0 if not present or add actual amount.
|
||||
@@ -80,7 +80,7 @@ export default () => ({
|
||||
yAxis = 'y' + current.currency_code;
|
||||
if (this.autoConversion) {
|
||||
amount = parseFloat(current.native_amount);
|
||||
yAxis = 'y' + current.native_code;
|
||||
yAxis = 'y' + current.native_currency_code;
|
||||
}
|
||||
}
|
||||
if (series[ii].data.hasOwnProperty(current.label)) {
|
||||
|
||||
@@ -96,7 +96,7 @@ export default () => ({
|
||||
target_amount: this.autoConversion ? current.attributes.native_target_amount : current.attributes.target_amount,
|
||||
// save per month
|
||||
save_per_month: this.autoConversion ? current.attributes.native_save_per_month : current.attributes.save_per_month,
|
||||
currency_code: this.autoConversion ? current.attributes.native_code : current.attributes.currency_code,
|
||||
currency_code: this.autoConversion ? current.attributes.native_currency_code : current.attributes.currency_code,
|
||||
|
||||
};
|
||||
dataSet[groupName].piggies.push(piggy);
|
||||
|
||||
@@ -164,7 +164,7 @@ export default () => ({
|
||||
if (group.attributes.transactions.hasOwnProperty(ii)) {
|
||||
// properties of the transaction, used in the generation of the chart:
|
||||
let transaction = group.attributes.transactions[ii];
|
||||
let currencyCode = this.autoConversion ? transaction.native_code : transaction.currency_code;
|
||||
let currencyCode = this.autoConversion ? transaction.native_currency_code : transaction.currency_code;
|
||||
let amount = this.autoConversion ? parseFloat(transaction.native_amount) : parseFloat(transaction.amount);
|
||||
let flowKey;
|
||||
|
||||
@@ -260,8 +260,8 @@ export default () => ({
|
||||
{
|
||||
label: 'Firefly III dashboard sankey chart',
|
||||
data: [],
|
||||
colorFrom: (c) => getColor(c.dataset.data[c.dataIndex].from),
|
||||
colorTo: (c) => getColor(c.dataset.data[c.dataIndex].to),
|
||||
colorFrom: (c) => getColor(c.dataset.data[c.dataIndex] ? c.dataset.data[c.dataIndex].from : ''),
|
||||
colorTo: (c) => getColor(c.dataset.data[c.dataIndex] ? c.dataset.data[c.dataIndex].to : ''),
|
||||
colorMode: 'gradient', // or 'from' or 'to'
|
||||
labels: labels,
|
||||
size: 'min', // or 'min' if flow overlap is preferred
|
||||
|
||||
@@ -19,59 +19,308 @@
|
||||
*/
|
||||
import {getVariable} from "../../store/get-variable.js";
|
||||
import Get from "../../api/v2/model/subscription/get.js";
|
||||
import {getDefaultChartSettings} from "../../support/default-chart-settings.js";
|
||||
import {format} from "date-fns";
|
||||
import {Chart} from 'chart.js';
|
||||
import {I18n} from "i18n-js";
|
||||
import {loadTranslations} from "../../support/load-translations.js";
|
||||
import {getCacheKey} from "../../support/get-cache-key.js";
|
||||
import {Chart} from "chart.js";
|
||||
import formatMoney from "../../util/format-money.js";
|
||||
|
||||
|
||||
//const CACHE_KEY = 'dashboard-subscriptions-data';
|
||||
const SUBSCRIPTION_CACHE_KEY = 'dashboard-subscriptions-data';
|
||||
// let chart = null;
|
||||
// let chartData = null;
|
||||
let afterPromises = false;
|
||||
let i18n; // for translating items in the chart.
|
||||
let apiData = [];
|
||||
const SUBSCRIPTION_CACHE_KEY = 'subscriptions-data-dashboard';
|
||||
let subscriptionData = {};
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function downloadSubscriptions(params) {
|
||||
console.log('Downloading page ' + params.page + '...');
|
||||
const getter = new Get();
|
||||
// function downloadSubscriptions(params) {
|
||||
// console.log('Downloading page ' + params.page + '...');
|
||||
// const getter = new Get();
|
||||
//
|
||||
// getter.get(params).then((response) => {
|
||||
// let data = response.data;
|
||||
// let totalPages = parseInt(data.meta.pagination.total_pages);
|
||||
// apiData = [...apiData, ...data.data];
|
||||
// if (totalPages > params.page) {
|
||||
// params.page++;
|
||||
// downloadSubscriptions(params);
|
||||
// }
|
||||
// console.log('Done! ' + apiData.length + ' items downloaded.');
|
||||
// });
|
||||
// }
|
||||
|
||||
|
||||
function downloadSubscriptions(params) {
|
||||
const getter = new Get();
|
||||
return getter.get(params)
|
||||
// first promise: parse the data:
|
||||
.then((response) => {
|
||||
let data = response.data.data;
|
||||
//console.log(data);
|
||||
for (let i in data) {
|
||||
if (data.hasOwnProperty(i)) {
|
||||
let current = data[i];
|
||||
//console.log(current);
|
||||
if (current.attributes.active && current.attributes.pay_dates.length > 0) {
|
||||
let objectGroupId = null === current.attributes.object_group_id ? 0 : current.attributes.object_group_id;
|
||||
let objectGroupTitle = null === current.attributes.object_group_title ? i18n.t('firefly.default_group_title_name_plain') : current.attributes.object_group_title;
|
||||
let objectGroupOrder = null === current.attributes.object_group_order ? 0 : current.attributes.object_group_order;
|
||||
if (!subscriptionData.hasOwnProperty(objectGroupId)) {
|
||||
subscriptionData[objectGroupId] = {
|
||||
id: objectGroupId,
|
||||
title: objectGroupTitle,
|
||||
order: objectGroupOrder,
|
||||
payment_info: {},
|
||||
bills: [],
|
||||
};
|
||||
}
|
||||
// TODO this conversion needs to be inside some kind of a parsing class.
|
||||
let bill = {
|
||||
id: current.id,
|
||||
name: current.attributes.name,
|
||||
// amount
|
||||
amount_min: current.attributes.amount_min,
|
||||
amount_max: current.attributes.amount_max,
|
||||
amount: (parseFloat(current.attributes.amount_max) + parseFloat(current.attributes.amount_min)) / 2,
|
||||
currency_code: current.attributes.currency_code,
|
||||
|
||||
// native amount
|
||||
native_amount_min: current.attributes.native_amount_min,
|
||||
native_amount_max: current.attributes.native_amount_max,
|
||||
native_amount: (parseFloat(current.attributes.native_amount_max) + parseFloat(current.attributes.native_amount_min)) / 2,
|
||||
native_currency_code: current.attributes.native_currency_code,
|
||||
|
||||
// paid transactions:
|
||||
transactions: [],
|
||||
|
||||
// unpaid moments
|
||||
pay_dates: current.attributes.pay_dates,
|
||||
paid: current.attributes.paid_dates.length > 0,
|
||||
};
|
||||
// set variables
|
||||
bill.expected_amount = params.autoConversion ? formatMoney(bill.native_amount, bill.native_currency_code) :
|
||||
formatMoney(bill.amount, bill.currency_code);
|
||||
bill.expected_times = i18n.t('firefly.subscr_expected_x_times', {
|
||||
times: current.attributes.pay_dates.length,
|
||||
amount: bill.expected_amount
|
||||
});
|
||||
|
||||
// add transactions (simpler version)
|
||||
for (let iii in current.attributes.paid_dates) {
|
||||
if (current.attributes.paid_dates.hasOwnProperty(iii)) {
|
||||
const currentPayment = current.attributes.paid_dates[iii];
|
||||
let percentage = 100;
|
||||
// math: -100+(paid/expected)*100
|
||||
if (params.autoConversion) {
|
||||
percentage = Math.round(-100 + ((parseFloat(currentPayment.native_amount) * -1) / parseFloat(bill.native_amount)) * 100);
|
||||
}
|
||||
if (!params.autoConversion) {
|
||||
percentage = Math.round(-100 + ((parseFloat(currentPayment.amount) * -1) / parseFloat(bill.amount)) * 100);
|
||||
}
|
||||
|
||||
let currentTransaction = {
|
||||
amount: params.autoConversion ? formatMoney(currentPayment.native_amount, currentPayment.native_currency_code) : formatMoney(currentPayment.amount, currentPayment.currency_code),
|
||||
percentage: percentage,
|
||||
date: format(new Date(currentPayment.date), 'PP'),
|
||||
foreign_amount: null,
|
||||
};
|
||||
if (null !== currentPayment.foreign_currency_code) {
|
||||
currentTransaction.foreign_amount = params.autoConversion ? currentPayment.foreign_native_amount : currentPayment.foreign_amount;
|
||||
currentTransaction.foreign_currency_code = params.autoConversion ? currentPayment.native_currency_code : currentPayment.foreign_currency_code;
|
||||
}
|
||||
|
||||
bill.transactions.push(currentTransaction);
|
||||
}
|
||||
}
|
||||
|
||||
subscriptionData[objectGroupId].bills.push(bill);
|
||||
if (0 === current.attributes.paid_dates.length) {
|
||||
// bill is unpaid, count the "pay_dates" and multiply with the "amount".
|
||||
// since bill is unpaid, this can only be in currency amount and native currency amount.
|
||||
const totalAmount = current.attributes.pay_dates.length * bill.amount;
|
||||
const totalNativeAmount = current.attributes.pay_dates.length * bill.native_amount;
|
||||
// for bill's currency
|
||||
if (!subscriptionData[objectGroupId].payment_info.hasOwnProperty(bill.currency_code)) {
|
||||
subscriptionData[objectGroupId].payment_info[bill.currency_code] = {
|
||||
currency_code: bill.currency_code,
|
||||
paid: 0,
|
||||
unpaid: 0,
|
||||
native_currency_code: bill.native_currency_code,
|
||||
native_paid: 0,
|
||||
native_unpaid: 0,
|
||||
};
|
||||
}
|
||||
subscriptionData[objectGroupId].payment_info[bill.currency_code].unpaid += totalAmount;
|
||||
subscriptionData[objectGroupId].payment_info[bill.currency_code].native_unpaid += totalNativeAmount;
|
||||
}
|
||||
|
||||
if (current.attributes.paid_dates.length > 0) {
|
||||
for (let ii in current.attributes.paid_dates) {
|
||||
if (current.attributes.paid_dates.hasOwnProperty(ii)) {
|
||||
// bill is paid!
|
||||
// since bill is paid, 3 possible currencies:
|
||||
// native, currency, foreign currency.
|
||||
// foreign currency amount (converted to native or not) will be ignored.
|
||||
let currentJournal = current.attributes.paid_dates[ii];
|
||||
// new array for the currency
|
||||
if (!subscriptionData[objectGroupId].payment_info.hasOwnProperty(currentJournal.currency_code)) {
|
||||
subscriptionData[objectGroupId].payment_info[currentJournal.currency_code] = {
|
||||
currency_code: bill.currency_code,
|
||||
paid: 0,
|
||||
unpaid: 0,
|
||||
native_currency_code: bill.native_currency_code,
|
||||
native_paid: 0,
|
||||
native_unpaid: 0,
|
||||
};
|
||||
}
|
||||
const amount = parseFloat(currentJournal.amount) * -1;
|
||||
const nativeAmount = parseFloat(currentJournal.native_amount) * -1;
|
||||
subscriptionData[objectGroupId].payment_info[currentJournal.currency_code].paid += amount;
|
||||
subscriptionData[objectGroupId].payment_info[currentJournal.currency_code].native_paid += nativeAmount;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// if next page, return the same function + 1 page:
|
||||
if (parseInt(response.data.meta.pagination.total_pages) > params.page) {
|
||||
params.page++;
|
||||
return downloadSubscriptions(params);
|
||||
}
|
||||
// otherwise return resolved promise:
|
||||
return Promise.resolve();
|
||||
});
|
||||
|
||||
getter.get(params).then((response) => {
|
||||
let data = response.data;
|
||||
let totalPages = parseInt(data.meta.pagination.total_pages);
|
||||
apiData = [...apiData, ...data.data];
|
||||
if (totalPages > params.page) {
|
||||
params.page++;
|
||||
downloadSubscriptions(params);
|
||||
}
|
||||
console.log('Done! ' + apiData.length + ' items downloaded.');
|
||||
});
|
||||
}
|
||||
|
||||
//
|
||||
// function refreshSubscriptions() {
|
||||
// console.log('refreshSubscriptions');
|
||||
//
|
||||
// const cacheValid = window.store.get('cacheValid');
|
||||
// let cachedData = window.store.get(CACHE_KEY);
|
||||
//
|
||||
// // if (cacheValid && typeof cachedData !== 'undefined') {
|
||||
// // // this.drawChart(this.generateOptions(cachedData));
|
||||
// // // this.loading = false;
|
||||
// // // return;
|
||||
// // }
|
||||
//
|
||||
// let params = {
|
||||
// start: format(new Date(window.store.get('start')), 'y-MM-dd'),
|
||||
// end: format(new Date(window.store.get('end')), 'y-MM-dd'),
|
||||
// page: 1,
|
||||
// };
|
||||
// downloadSubscriptions(params).then(() => {
|
||||
// console.log('Done with download!');
|
||||
// console.log(subscriptionData);
|
||||
// });
|
||||
//
|
||||
//
|
||||
// //
|
||||
// // getter.paid(params).then((response) => {
|
||||
// // let paidData = response.data;
|
||||
// // getter.unpaid(params).then((response) => {
|
||||
// // let unpaidData = response.data;
|
||||
// // let chartData = {paid: paidData, unpaid: unpaidData};
|
||||
// // window.store.set(CACHE_KEY, chartData);
|
||||
// // this.drawChart(this.generateOptions(chartData));
|
||||
// // this.loading = false;
|
||||
// // });
|
||||
// // });
|
||||
// }
|
||||
|
||||
|
||||
export default () => ({
|
||||
loading: false,
|
||||
autoConversion: false,
|
||||
subscriptions: [],
|
||||
startSubscriptions() {
|
||||
this.loading = true;
|
||||
let start = new Date(window.store.get('start'));
|
||||
let end = new Date(window.store.get('end'));
|
||||
|
||||
console.log('here we are');
|
||||
const cacheValid = window.store.get('cacheValid');
|
||||
let cachedData = window.store.get(SUBSCRIPTION_CACHE_KEY);
|
||||
let cachedData = window.store.get(getCacheKey(SUBSCRIPTION_CACHE_KEY, start, end));
|
||||
|
||||
if (cacheValid && typeof cachedData !== 'undefined' && false) {
|
||||
console.error('cannot handle yet');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('cache is invalid, must download');
|
||||
let params = {
|
||||
start: format(new Date(window.store.get('start')), 'y-MM-dd'),
|
||||
end: format(new Date(window.store.get('end')), 'y-MM-dd'),
|
||||
start: format(start, 'y-MM-dd'),
|
||||
end: format(end, 'y-MM-dd'),
|
||||
autoConversion: this.autoConversion,
|
||||
page: 1
|
||||
};
|
||||
downloadSubscriptions(params);
|
||||
downloadSubscriptions(params).then(() => {
|
||||
console.log('Done with download!');
|
||||
let set = Object.values(subscriptionData);
|
||||
// convert subscriptionData to usable data (especially for the charts)
|
||||
for (let i in set) {
|
||||
if (set.hasOwnProperty(i)) {
|
||||
let group = set[i];
|
||||
const keys = Object.keys(group.payment_info);
|
||||
// do some parsing here.
|
||||
group.col_size = 1 === keys.length ? 'col-6 offset-3' : 'col-6';
|
||||
group.chart_width = 1 === keys.length ? '50%' : '100%';
|
||||
group.payment_length = keys.length;
|
||||
|
||||
// then add to array
|
||||
this.subscriptions.push(group);
|
||||
//console.log(group);
|
||||
}
|
||||
}
|
||||
|
||||
// then assign to this.subscriptions.
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
drawPieChart(groupId, groupTitle, data) {
|
||||
let id = '#pie_' + groupId + '_' + data.currency_code;
|
||||
//console.log(data);
|
||||
const unpaidAmount = this.autoConversion ? data.native_unpaid : data.unpaid;
|
||||
const paidAmount = this.autoConversion ? data.native_paid : data.paid;
|
||||
const currencyCode = this.autoConversion ? data.native_currency_code : data.currency_code;
|
||||
const chartData = {
|
||||
labels: [
|
||||
i18n.t('firefly.paid'),
|
||||
i18n.t('firefly.unpaid')
|
||||
],
|
||||
datasets: [{
|
||||
label: i18n.t('firefly.subscriptions_in_group', {title: groupTitle}),
|
||||
data: [paidAmount, unpaidAmount],
|
||||
backgroundColor: [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(54, 162, 235)',
|
||||
],
|
||||
hoverOffset: 4
|
||||
}]
|
||||
};
|
||||
const config = {
|
||||
type: 'doughnut',
|
||||
data: chartData,
|
||||
options: {
|
||||
plugins: {
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function (tooltipItem) {
|
||||
return tooltipItem.dataset.label + ': ' + formatMoney(tooltipItem.raw, currencyCode);
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
new Chart(document.querySelector(id), config);
|
||||
},
|
||||
|
||||
// loadChart() {
|
||||
@@ -183,9 +432,9 @@ export default () => ({
|
||||
|
||||
|
||||
init() {
|
||||
// console.log('subscriptions init');
|
||||
console.log('subscriptions init');
|
||||
Promise.all([getVariable('autoConversion', false), getVariable('language', 'en-US')]).then((values) => {
|
||||
// console.log('subscriptions after promises');
|
||||
console.log('subscriptions after promises');
|
||||
this.autoConversion = values[0];
|
||||
afterPromises = true;
|
||||
|
||||
@@ -203,7 +452,7 @@ export default () => ({
|
||||
if (!afterPromises) {
|
||||
return;
|
||||
}
|
||||
// console.log('subscriptions observe end');
|
||||
console.log('subscriptions observe end');
|
||||
if (false === this.loading) {
|
||||
this.startSubscriptions();
|
||||
}
|
||||
@@ -212,7 +461,7 @@ export default () => ({
|
||||
if (!afterPromises) {
|
||||
return;
|
||||
}
|
||||
// console.log('subscriptions observe autoConversion');
|
||||
console.log('subscriptions observe autoConversion');
|
||||
this.autoConversion = newValue;
|
||||
if (false === this.loading) {
|
||||
this.startSubscriptions();
|
||||
|
||||
29
resources/assets/v2/support/get-cache-key.js
Normal file
29
resources/assets/v2/support/get-cache-key.js
Normal file
@@ -0,0 +1,29 @@
|
||||
/*
|
||||
* load-translations.js
|
||||
* Copyright (c) 2023 james@firefly-iii.org
|
||||
*
|
||||
* This file is part of Firefly III (https://github.com/firefly-iii).
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import {format} from "date-fns";
|
||||
|
||||
async function getCacheKey(string, start, end) {
|
||||
const cacheKey = format(start, 'y-MM-dd') + '_' + format(end, 'y-MM-dd') + '_' + string;
|
||||
console.log('getCacheKey: ' + cacheKey);
|
||||
return cacheKey;
|
||||
}
|
||||
|
||||
export {getCacheKey};
|
||||
@@ -18,10 +18,15 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
let loaded = false;
|
||||
|
||||
async function loadTranslations(i18n, locale) {
|
||||
const response = await fetch(`./v2/i18n/${locale}.json`);
|
||||
const translations = await response.json();
|
||||
i18n.store(translations);
|
||||
if (false === loaded) {
|
||||
const response = await fetch(`./v2/i18n/${locale}.json`);
|
||||
const translations = await response.json();
|
||||
i18n.store(translations);
|
||||
}
|
||||
//loaded = true;
|
||||
}
|
||||
|
||||
export {loadTranslations};
|
||||
|
||||
@@ -1682,6 +1682,8 @@ return [
|
||||
|
||||
// bills:
|
||||
'not_expected_period' => 'Not expected this period',
|
||||
'subscriptions_in_group' => 'Subscriptions in group "%{title}"',
|
||||
'subscr_expected_x_times' => 'Expect to pay %{amount} %{times} times this period',
|
||||
'not_or_not_yet' => 'Not (yet)',
|
||||
'visit_bill' => 'Visit bill ":name" at Firefly III',
|
||||
'match_between_amounts' => 'Bill matches transactions between :low and :high.',
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
<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>
|
||||
86
resources/views/v2/partials/dashboard/account-list.blade.php
Normal file
86
resources/views/v2/partials/dashboard/account-list.blade.php
Normal file
@@ -0,0 +1,86 @@
|
||||
<div class="row mb-2">
|
||||
<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>
|
||||
15
resources/views/v2/partials/dashboard/budget-chart.blade.php
Normal file
15
resources/views/v2/partials/dashboard/budget-chart.blade.php
Normal file
@@ -0,0 +1,15 @@
|
||||
<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>
|
||||
@@ -0,0 +1,14 @@
|
||||
<div class="row mb-2" 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>
|
||||
28
resources/views/v2/partials/dashboard/piggy-banks.blade.php
Normal file
28
resources/views/v2/partials/dashboard/piggy-banks.blade.php
Normal file
@@ -0,0 +1,28 @@
|
||||
<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>
|
||||
13
resources/views/v2/partials/dashboard/sankey.blade.php
Normal file
13
resources/views/v2/partials/dashboard/sankey.blade.php
Normal file
@@ -0,0 +1,13 @@
|
||||
<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>
|
||||
151
resources/views/v2/partials/dashboard/subscriptions.blade.php
Normal file
151
resources/views/v2/partials/dashboard/subscriptions.blade.php
Normal file
@@ -0,0 +1,151 @@
|
||||
<div class="col" x-data="subscriptions">
|
||||
<template x-for="group in subscriptions">
|
||||
<div class="card mb-2">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
<a href="{{ route('subscriptions.index') }}" title="{{ __('firefly.go_to_subscriptions') }}">
|
||||
<span x-text="group.title"></span>
|
||||
</a>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="row mb-2">
|
||||
<template x-for="pie in group.payment_info">
|
||||
<div :class='group.col_size'>
|
||||
<canvas :id='"pie_" + group.id + "_" + pie.currency_code'
|
||||
:width="group.width"
|
||||
x-init="drawPieChart(group.id, group.title, pie)"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<table class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>TODO Subscription</th>
|
||||
<th>(Expected) amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template x-for="bill in group.bills">
|
||||
<tr>
|
||||
<td>
|
||||
<a href="#" :title="bill.name">
|
||||
<span x-text="bill.name"></span>
|
||||
</a>
|
||||
<template x-if="bill.paid">
|
||||
<small class="text-muted"><br>{{ __('firefly.paid') }}</small>
|
||||
</template>
|
||||
<template x-if="!bill.paid">
|
||||
<small class="text-muted"><br>{{ __('firefly.unpaid') }}</small>
|
||||
</template>
|
||||
</td>
|
||||
<td>
|
||||
<template x-if="!bill.paid">
|
||||
<span>
|
||||
<template x-if="1 === bill.pay_dates.length">
|
||||
<span x-text="'~ ' + bill.expected_amount"></span>
|
||||
</template>
|
||||
<template x-if="bill.pay_dates.length > 1">
|
||||
<span>
|
||||
<span x-text="bill.expected_times"></span>
|
||||
</span>
|
||||
</template>
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="bill.paid">
|
||||
<ul class="list-unstyled">
|
||||
<template x-for="transaction in bill.transactions">
|
||||
<li>
|
||||
<span x-text="transaction.amount"></span>
|
||||
(<span x-text="transaction.percentage"></span>%)
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<p class="text-center">
|
||||
<em class="fa-solid fa-spinner fa-spin"></em>
|
||||
</p>
|
||||
</template>
|
||||
{{--
|
||||
<div class="card mb-2">
|
||||
<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">
|
||||
<div class="row">
|
||||
<div class="col-6 offset-3">
|
||||
<canvas id="subscriptions-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mb-2">
|
||||
<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 p-0">
|
||||
<div class="row mb-2">
|
||||
<div class="col-6">
|
||||
<div class="col-6 offset-3">
|
||||
PIE CHART HIER
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Subscription</th>
|
||||
<th>(Expected) amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Subscription name
|
||||
</td>
|
||||
<td>
|
||||
Expected: X
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Subscription name
|
||||
</td>
|
||||
<td>
|
||||
3,33 ( + 10%)
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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') }}
|
||||
(TO DO group)</a>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Tabel: per item verwacht in deze periode betaald niet betaald<br>
|
||||
if betaald dan percentage over / onder.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
--}}
|
||||
</div>
|
||||
Reference in New Issue
Block a user