Rebuild frontpage with better bills overview.

app/Transformers/V2/AccountTransformer.php

@@ -144,15 +144,15 @@ class AccountTransformer extends AbstractTransformer
             'currency_symbol'         => $currency->symbol,
             'currency_decimal_places' => (int)$currency->decimal_places,
 
-            'native_id'              => (string)$this->default->id,
+            'native_currency_id'             => (string)$this->default->id,
-            'native_code'            => $this->default->code,
+            'native_currency_code'           => $this->default->code,
-            'native_symbol'          => $this->default->symbol,
+            'native_currency_symbol'         => $this->default->symbol,
-            'native_decimal_places'  => (int)$this->default->decimal_places,
+            'native_currency_decimal_places' => (int)$this->default->decimal_places,
 
             // balance:
-            'current_balance'        => $balance,
+            'current_balance'                => $balance,
-            'native_current_balance' => $nativeBalance,
+            'native_current_balance'         => $nativeBalance,
-            'current_balance_date'   => $this->getDate(),
+            'current_balance_date'           => $this->getDate(),
 
             // more meta
 
@@ -173,7 +173,7 @@ class AccountTransformer extends AbstractTransformer
             //            'longitude'               => $longitude,
             //            'latitude'                => $latitude,
             //            'zoom_level'              => $zoomLevel,
-            'links'                  => [
+            'links'                          => [
                 [
                     'rel' => 'self',
                     'uri' => '/accounts/' . $account->id,

app/Transformers/V2/BillTransformer.php

@@ -107,6 +107,7 @@ class BillTransformer extends AbstractTransformer
         }
         $this->default   = app('amount')->getDefaultCurrency();
         $this->converter = new ExchangeRateConverter();
+
         // grab all paid dates:
         if (null !== $this->parameters->get('start') && null !== $this->parameters->get('end')) {
             $journals   = TransactionJournal::whereIn('bill_id', $bills)
@@ -128,6 +129,7 @@ class BillTransformer extends AbstractTransformer
             }
             /** @var TransactionJournal $journal */
             foreach ($journals as $journal) {
+                app('log')->debug(sprintf('Processing journal #%d', $journal->id));
                 $transaction             = $transactions[(int)$journal->id] ?? [];
                 $billId                  = (int)$journal->bill_id;
                 $currencyId              = (int)$transaction['transaction_currency_id'] ?? 0;
@@ -139,7 +141,9 @@ class BillTransformer extends AbstractTransformer
                 $foreignCurrencyName   = null;
                 $foreignCurrencySymbol = null;
                 $foreignCurrencyDp     = null;
+                app('log')->debug('Foreign currency is NULL');
                 if (null !== $transaction['foreign_currency_id']) {
+                    app('log')->debug(sprintf('Foreign currency is #%d', $transaction['foreign_currency_id']));
                     $foreignCurrencyId              = (int)$transaction['foreign_currency_id'];
                     $currencies[$foreignCurrencyId] = $currencies[$foreignCurrencyId] ?? TransactionCurrency::find($foreignCurrencyId);
                     $foreignCurrencyCode            = $currencies[$foreignCurrencyId]->code;
@@ -157,10 +161,10 @@ class BillTransformer extends AbstractTransformer
                     'currency_name'                   => $currencies[$currencyId]->name,
                     'currency_symbol'                 => $currencies[$currencyId]->symbol,
                     'currency_decimal_places'         => (int)$currencies[$currencyId]->decimal_places,
-                    'native_id'                       => (int)$currencies[$currencyId]->id,
+                    'native_currency_id'              => (int)$currencies[$currencyId]->id,
-                    'native_code'                     => $currencies[$currencyId]->code,
+                    'native_currency_code'            => $currencies[$currencyId]->code,
-                    'native_symbol'                   => $currencies[$currencyId]->symbol,
+                    'native_currency_symbol'          => $currencies[$currencyId]->symbol,
-                    'native_decimal_places'           => (int)$currencies[$currencyId]->decimal_places,
+                    'native_currency_decimal_places'  => (int)$currencies[$currencyId]->decimal_places,
                     'foreign_currency_id'             => $foreignCurrencyId,
                     'foreign_currency_code'           => $foreignCurrencyCode,
                     'foreign_currency_name'           => $foreignCurrencyName,
@@ -169,7 +173,9 @@ class BillTransformer extends AbstractTransformer
                     'amount'                          => $transaction['amount'],
                     'foreign_amount'                  => $transaction['foreign_amount'],
                     'native_amount'                   => $this->converter->convert($currencies[$currencyId], $this->default, $journal->date, $transaction['amount']),
-                    'foreign_native_amount'           => null === $transaction['foreign_amount'] ? null : $this->converter->convert($currencies[$foreignCurrencyId], $this->default, $journal->date, $transaction['foreign_amount']),
+                    'foreign_native_amount'           => '' === (string)$transaction['foreign_amount'] ? null : $this->converter->convert(
+                        $currencies[$foreignCurrencyId],
+                        $this->default, $journal->date, $transaction['foreign_amount']),
                 ];
             }
         }
@@ -199,40 +205,40 @@ class BillTransformer extends AbstractTransformer
 
         $nextExpectedMatchDiff = $this->getNextExpectedMatchDiff($nextExpectedMatch, $payDates);
         return [
-            'id'                       => (int)$bill->id,
+            'id'                             => (int)$bill->id,
-            'created_at'               => $bill->created_at->toAtomString(),
+            'created_at'                     => $bill->created_at->toAtomString(),
-            'updated_at'               => $bill->updated_at->toAtomString(),
+            'updated_at'                     => $bill->updated_at->toAtomString(),
-            'name'                     => $bill->name,
+            'name'                           => $bill->name,
-            'amount_min'               => app('steam')->bcround($bill->amount_min, $currency->decimal_places),
+            'amount_min'                     => app('steam')->bcround($bill->amount_min, $currency->decimal_places),
-            'amount_max'               => app('steam')->bcround($bill->amount_max, $currency->decimal_places),
+            'amount_max'                     => app('steam')->bcround($bill->amount_max, $currency->decimal_places),
-            'native_amount_min'        => $this->converter->convert($currency, $this->default, $date, $bill->amount_min),
+            'native_amount_min'              => $this->converter->convert($currency, $this->default, $date, $bill->amount_min),
-            'native_amount_max'        => $this->converter->convert($currency, $this->default, $date, $bill->amount_max),
+            'native_amount_max'              => $this->converter->convert($currency, $this->default, $date, $bill->amount_max),
-            'currency_id'              => (string)$bill->transaction_currency_id,
+            'currency_id'                    => (string)$bill->transaction_currency_id,
-            'currency_code'            => $currency->code,
+            'currency_code'                  => $currency->code,
-            'currency_name'            => $currency->name,
+            'currency_name'                  => $currency->name,
-            'currency_symbol'          => $currency->symbol,
+            'currency_symbol'                => $currency->symbol,
-            'currency_decimal_places'  => (int)$currency->decimal_places,
+            'currency_decimal_places'        => (int)$currency->decimal_places,
-            'native_id'                => $this->default->id,
+            'native_currency_id'             => $this->default->id,
-            'native_code'              => $this->default->code,
+            'native_currency_code'           => $this->default->code,
-            'native_name'              => $this->default->name,
+            'native_currency_name'           => $this->default->name,
-            'native_symbol'            => $this->default->symbol,
+            'native_currency_symbol'         => $this->default->symbol,
-            'native_decimal_places'    => (int)$this->default->decimal_places,
+            'native_currency_decimal_places' => (int)$this->default->decimal_places,
-            'date'                     => $bill->date->toAtomString(),
+            'date'                           => $bill->date->toAtomString(),
-            'end_date'                 => $bill->end_date?->toAtomString(),
+            'end_date'                       => $bill->end_date?->toAtomString(),
-            'extension_date'           => $bill->extension_date?->toAtomString(),
+            'extension_date'                 => $bill->extension_date?->toAtomString(),
-            'repeat_freq'              => $bill->repeat_freq,
+            'repeat_freq'                    => $bill->repeat_freq,
-            'skip'                     => (int)$bill->skip,
+            'skip'                           => (int)$bill->skip,
-            'active'                   => $bill->active,
+            'active'                         => $bill->active,
-            'order'                    => (int)$bill->order,
+            'order'                          => (int)$bill->order,
-            'notes'                    => $this->notes[(int)$bill->id] ?? null,
+            'notes'                          => $this->notes[(int)$bill->id] ?? null,
-            'object_group_id'          => $group ? $group['object_group_id'] : null,
+            'object_group_id'                => $group ? $group['object_group_id'] : null,
-            'object_group_order'       => $group ? $group['object_group_order'] : null,
+            'object_group_order'             => $group ? $group['object_group_order'] : null,
-            'object_group_title'       => $group ? $group['object_group_title'] : null,
+            'object_group_title'             => $group ? $group['object_group_title'] : null,
-            'next_expected_match'      => $nextExpectedMatch->toAtomString(),
+            'next_expected_match'            => $nextExpectedMatch->toAtomString(),
-            'next_expected_match_diff' => $nextExpectedMatchDiff,
+            'next_expected_match_diff'       => $nextExpectedMatchDiff,
-            'pay_dates'                => $payDates,
+            'pay_dates'                      => $payDates,
-            'paid_dates'               => $paidData,
+            'paid_dates'                     => $paidData,
-            'links'                    => [
+            'links'                          => [
                 [
                     'rel' => 'self',
                     'uri' => sprintf('/bills/%d', $bill->id),

app/Transformers/V2/PiggyBankTransformer.php

@@ -198,38 +198,38 @@ class PiggyBankTransformer extends AbstractTransformer
         }
 
         return [
-            'id'                      => (string)$piggyBank->id,
+            'id'                             => (string)$piggyBank->id,
-            'created_at'              => $piggyBank->created_at->toAtomString(),
+            'created_at'                     => $piggyBank->created_at->toAtomString(),
-            'updated_at'              => $piggyBank->updated_at->toAtomString(),
+            'updated_at'                     => $piggyBank->updated_at->toAtomString(),
-            'account_id'              => (string)$piggyBank->account_id,
+            'account_id'                     => (string)$piggyBank->account_id,
-            'account_name'            => $accountName,
+            'account_name'                   => $accountName,
-            'name'                    => $piggyBank->name,
+            'name'                           => $piggyBank->name,
-            'currency_id'             => (string)$currency->id,
+            'currency_id'                    => (string)$currency->id,
-            'currency_code'           => $currency->code,
+            'currency_code'                  => $currency->code,
-            'currency_symbol'         => $currency->symbol,
+            'currency_symbol'                => $currency->symbol,
-            'currency_decimal_places' => (int)$currency->decimal_places,
+            'currency_decimal_places'        => (int)$currency->decimal_places,
-            'native_id'               => (string)$this->default->id,
+            'native_currency_id'             => (string)$this->default->id,
-            'native_code'             => $this->default->code,
+            'native_currency_code'           => $this->default->code,
-            'native_symbol'           => $this->default->symbol,
+            'native_currency_symbol'         => $this->default->symbol,
-            'native_decimal_places'   => (int)$this->default->decimal_places,
+            'native_currency_decimal_places' => (int)$this->default->decimal_places,
-            'current_amount'          => $currentAmount,
+            'current_amount'                 => $currentAmount,
-            'native_current_amount'   => $nativeCurrentAmount,
+            'native_current_amount'          => $nativeCurrentAmount,
-            'target_amount'           => $targetAmount,
+            'target_amount'                  => $targetAmount,
-            'native_target_amount'    => $nativeTargetAmount,
+            'native_target_amount'           => $nativeTargetAmount,
-            'percentage'              => $percentage,
+            'percentage'                     => $percentage,
-            'left_to_save'            => $leftToSave,
+            'left_to_save'                   => $leftToSave,
-            'native_left_to_save'     => $nativeLeftToSave,
+            'native_left_to_save'            => $nativeLeftToSave,
-            'save_per_month'          => $savePerMonth,
+            'save_per_month'                 => $savePerMonth,
-            'native_save_per_month'   => $nativeSavePerMonth,
+            'native_save_per_month'          => $nativeSavePerMonth,
-            'start_date'              => $startDate,
+            'start_date'                     => $startDate,
-            'target_date'             => $targetDate,
+            'target_date'                    => $targetDate,
-            'order'                   => (int)$piggyBank->order,
+            'order'                          => (int)$piggyBank->order,
-            'active'                  => $piggyBank->active,
+            'active'                         => $piggyBank->active,
-            'notes'                   => $note,
+            'notes'                          => $note,
-            'object_group_id'         => $group ? $group['object_group_id'] : null,
+            'object_group_id'                => $group ? $group['object_group_id'] : null,
-            'object_group_order'      => $group ? $group['object_group_order'] : null,
+            'object_group_order'             => $group ? $group['object_group_order'] : null,
-            'object_group_title'      => $group ? $group['object_group_title'] : null,
+            'object_group_title'             => $group ? $group['object_group_title'] : null,
-            'links'                   => [
+            'links'                          => [
                 [
                     'rel' => 'self',
                     'uri' => '/piggy_banks/' . $piggyBank->id,

app/Transformers/V2/TransactionGroupTransformer.php

@@ -36,7 +36,6 @@ use FireflyIII\Support\Http\Api\ExchangeRateConverter;
 use FireflyIII\Support\NullArrayObject;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\DB;
-use Illuminate\Support\Facades\Log;
 use stdClass;
 
 /**
@@ -192,11 +191,11 @@ class TransactionGroupTransformer extends AbstractTransformer
             'currency_decimal_places'         => (int)$transaction['currency_decimal_places'],
 
             // converted to native currency
-            'native_id'                       => (string)$this->default->id,
+            'native_currency_id'              => (string)$this->default->id,
-            'native_code'                     => $this->default->code,
+            'native_currency_code'            => $this->default->code,
-            'native_name'                     => $this->default->name,
+            'native_currency_name'            => $this->default->name,
-            'native_symbol'                   => $this->default->symbol,
+            'native_currency_symbol'          => $this->default->symbol,
-            'native_decimal_places'           => (int)$this->default->decimal_places,
+            'native_currency_decimal_places'  => (int)$this->default->decimal_places,
 
             // foreign currency amount:
             'foreign_currency_id'             => $this->stringFromArray($transaction, 'foreign_currency_id', null),

public/.well-known/security.txt

@@ -8,7 +8,7 @@ Hash: SHA256
 #
 # 1. Your security report must be related to Firefly III or the associated tools
 # 2. There is no bug bounty program
-# 3. Don't report denial of service attacks on the login form
+# 3. Please don't report denial of service attacks on the login form
 #
 
 Contact: mailto:james@firefly-iii.org
@@ -19,20 +19,23 @@ Policy: https://docs.firefly-iii.org/firefly-iii/support/
 #
 # Thank you for your time!
 #
+# Cheers,
+# James
+#
 -----BEGIN PGP SIGNATURE-----
 
-iQJKBAABCAA0FiEEAvQEbEsjbgYJVxYStJoyS36tbYAFAmUEl4MWHGphbWVzQGZp
+iQJKBAABCAA0FiEEAvQEbEsjbgYJVxYStJoyS36tbYAFAmUGj9gWHGphbWVzQGZp
-cmVmbHktaWlpLm9yZwAKCRC0mjJLfq1tgKipEADC1bsgtE7YNY+2W/qkX3sBlKc3
+cmVmbHktaWlpLm9yZwAKCRC0mjJLfq1tgA0WD/9cHNSphMqPx05Tkak5kNKsmyYW
-E8tDV/dr7D+jWMpV81poGyDzEe8sytJ5DmZWGTFiQez6jxZN5czT5KxZ7fMQOzbw
+YXZ4kcw5haLwcxk4ipudCzYLWejcXI7z/WVdYQrZVMw6Kaz6Z/ZgJQk6mQXTeb3L
-kjT+S6CxKrvD2H05pe5v2ziY+lfDIVe4kI1vxYRB6bgTYi0pfGJF9woSH4qhwMMa
+WcmxmiKGQk5twnmIy7vpoBgt2QH70lhP/x+FH0w1j22RM5b66gj/BZBYowtmUI1L
-5cai0Rj6Ew9pHPx06BvcHOoNjOcmqPWRoBt5a1LOK8EqSMJHbdUv8deAbQSkO/8t
+HIwsTvtjBGZA8aJSPmtRGULJ45/GDZYi/Hjx49hPPLjIE8VP53Wa7L284i4R+gG9
-gDEA7FVRXXB0QRIraOR2cMtU2uW/o7NymDzZeaqWR9+g4eWeosRJjLA4K05akPx+
+IEle9kqb2OUUp0+CmIXSKAvtFpDHt9Yc0AE6PU0WpSg3LI6NqyUiM2CdKvyKvtIV
-3mrKG0qV76dBexfMC99IEfjgk+xiffxg2iiKh37uBbsgK74aakAujYta1q4SsX8d
+Y15LoJTkTuORzudP1HCImfcQUdJgrMe1DGz2siHqxTJVDUwzEVc6mOkGnefhIpFy
-BXMvBpSi6mFuw13tgeueQS7IKqZsbh3vb6M325Dkv+hRe1e/Tw+qE9OWNFBQ2WS4
+jN0ik6pCSkLNsSYImQZq9H6d9yiPPYSR3JFjTDtEVnANjlT08ywPdsyWgvNaHHh1
-H+sJZ8u1Ke++BctttaNkAkOZF0l8+f7+aEZhEaIan31hq0Y1KpFNPLiPMvMEDDBZ
+eMRy9+X24g9cQ7MqU77Y8p2/v3IudWbEsi+M1FUm4W0TE/MsNv9xydRvB6M41eVc
-9OhqIZaWmpZv0vUu/pK+0IU5ESRAU8dSPLi1anj+LWSF+YkaOW8gmA5Di0Oiqta8
+raYnk8cVmEzpjsyxi9lAqpk4+qYD04JecYCPxkX6XxkFxzswS20LR4VVOamfKgv1
-xRDOaDSDgLN9ESd5gF8rca263AXeH1iPoPRHWPEFWgQPTcxVruwAhe7P+0dclCMx
+yIzg1sCMArHeq0OC1k6lskB8DTXvw5+838iw4h8I0T6MAqXj4RKv8C45w7+uSlG9
-8eIaHoc21VGk299lwiCy4X9Wxp2+tQFH9iQG+Lnd/koxnufE6vGEIBLMzPxij6L4
+oXhpUweiiRzyZPWbWXU7jC9BvDyqfuxq9jn4LFDzAOV0raLz6QThiUcR3f7h2Rvo
-2oFicDqAMXd0Ls8kWA==
+KiDjx3KprWU+swTosw==
-=8skS
+=1jlJ
 -----END PGP SIGNATURE-----

public/.well-known/security.txt.sig

@@ -1,17 +1,17 @@
 -----BEGIN PGP SIGNATURE-----
 
-iQJKBAABCAA0FiEEAvQEbEsjbgYJVxYStJoyS36tbYAFAmUEl4MWHGphbWVzQGZp
+iQJKBAABCAA0FiEEAvQEbEsjbgYJVxYStJoyS36tbYAFAmUGj9gWHGphbWVzQGZp
-cmVmbHktaWlpLm9yZwAKCRC0mjJLfq1tgKipEADC1bsgtE7YNY+2W/qkX3sBlKc3
+cmVmbHktaWlpLm9yZwAKCRC0mjJLfq1tgA0WD/9cHNSphMqPx05Tkak5kNKsmyYW
-E8tDV/dr7D+jWMpV81poGyDzEe8sytJ5DmZWGTFiQez6jxZN5czT5KxZ7fMQOzbw
+YXZ4kcw5haLwcxk4ipudCzYLWejcXI7z/WVdYQrZVMw6Kaz6Z/ZgJQk6mQXTeb3L
-kjT+S6CxKrvD2H05pe5v2ziY+lfDIVe4kI1vxYRB6bgTYi0pfGJF9woSH4qhwMMa
+WcmxmiKGQk5twnmIy7vpoBgt2QH70lhP/x+FH0w1j22RM5b66gj/BZBYowtmUI1L
-5cai0Rj6Ew9pHPx06BvcHOoNjOcmqPWRoBt5a1LOK8EqSMJHbdUv8deAbQSkO/8t
+HIwsTvtjBGZA8aJSPmtRGULJ45/GDZYi/Hjx49hPPLjIE8VP53Wa7L284i4R+gG9
-gDEA7FVRXXB0QRIraOR2cMtU2uW/o7NymDzZeaqWR9+g4eWeosRJjLA4K05akPx+
+IEle9kqb2OUUp0+CmIXSKAvtFpDHt9Yc0AE6PU0WpSg3LI6NqyUiM2CdKvyKvtIV
-3mrKG0qV76dBexfMC99IEfjgk+xiffxg2iiKh37uBbsgK74aakAujYta1q4SsX8d
+Y15LoJTkTuORzudP1HCImfcQUdJgrMe1DGz2siHqxTJVDUwzEVc6mOkGnefhIpFy
-BXMvBpSi6mFuw13tgeueQS7IKqZsbh3vb6M325Dkv+hRe1e/Tw+qE9OWNFBQ2WS4
+jN0ik6pCSkLNsSYImQZq9H6d9yiPPYSR3JFjTDtEVnANjlT08ywPdsyWgvNaHHh1
-H+sJZ8u1Ke++BctttaNkAkOZF0l8+f7+aEZhEaIan31hq0Y1KpFNPLiPMvMEDDBZ
+eMRy9+X24g9cQ7MqU77Y8p2/v3IudWbEsi+M1FUm4W0TE/MsNv9xydRvB6M41eVc
-9OhqIZaWmpZv0vUu/pK+0IU5ESRAU8dSPLi1anj+LWSF+YkaOW8gmA5Di0Oiqta8
+raYnk8cVmEzpjsyxi9lAqpk4+qYD04JecYCPxkX6XxkFxzswS20LR4VVOamfKgv1
-xRDOaDSDgLN9ESd5gF8rca263AXeH1iPoPRHWPEFWgQPTcxVruwAhe7P+0dclCMx
+yIzg1sCMArHeq0OC1k6lskB8DTXvw5+838iw4h8I0T6MAqXj4RKv8C45w7+uSlG9
-8eIaHoc21VGk299lwiCy4X9Wxp2+tQFH9iQG+Lnd/koxnufE6vGEIBLMzPxij6L4
+oXhpUweiiRzyZPWbWXU7jC9BvDyqfuxq9jn4LFDzAOV0raLz6QThiUcR3f7h2Rvo
-2oFicDqAMXd0Ls8kWA==
+KiDjx3KprWU+swTosw==
-=8skS
+=1jlJ
 -----END PGP SIGNATURE-----

public/build/manifest.json

@@ -30,10 +30,10 @@
     "integrity": "sha384-B73JAwYNSgI4rwb14zwxigHgAkg1Ms+j6+9sJoDpiL11+VW5RjQCLfIh0RVoi0h6"
   },
   "resources/assets/v2/pages/dashboard/dashboard.js": {
-    "file": "assets/dashboard-1fecd60d.js",
+    "file": "assets/dashboard-4ff29763.js",
     "isEntry": true,
     "src": "resources/assets/v2/pages/dashboard/dashboard.js",
-    "integrity": "sha384-uMRd+uHPChnXYXCT2/X5tvQtKHVVW65WptA71MNTIGO0/i22IQHg/ry2j4ILO/Av"
+    "integrity": "sha384-fYlKWCspBoR7oMXyULGBltY8pcSYJPXrzKzz0Kt99RueUdYoyAa78+kMftyKdoLd"
   },
   "resources/assets/v2/sass/app.scss": {
     "file": "assets/app-28a195fd.css",

public/v2/i18n/bg_BG.json

@@ -9,6 +9,8 @@
             "paid": "\u041f\u043b\u0430\u0442\u0435\u043d\u0438",
             "unpaid": "\u041d\u0435\u043f\u043b\u0430\u0442\u0435\u043d\u0438",
             "default_group_title_name_plain": "ungrouped",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "\u041f\u0440\u0435\u0440\u0430\u0437\u0445\u043e\u0434",
             "money_flowing_in": "\u0412\u0445\u043e\u0434\u044f\u0449\u0438",
             "money_flowing_out": "\u0418\u0437\u0445\u043e\u0434\u044f\u0449\u0438",

public/v2/i18n/ca_ES.json

@@ -9,6 +9,8 @@
             "paid": "Pagat",
             "unpaid": "Pendent de pagament",
             "default_group_title_name_plain": "no agrupades",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "Gastat de m\u00e9s",
             "money_flowing_in": "Entrant",
             "money_flowing_out": "Eixint",

public/v2/i18n/cs_CZ.json

@@ -9,6 +9,8 @@
             "paid": "Zaplaceno",
             "unpaid": "Nezaplaceno",
             "default_group_title_name_plain": "ungrouped",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "P\u0159ekro\u010deny v\u00fddaje",
             "money_flowing_in": "Vstup",
             "money_flowing_out": "V\u00fdstup",

public/v2/i18n/da_DK.json

@@ -9,6 +9,8 @@
             "paid": "Paid",
             "unpaid": "Ubetalt",
             "default_group_title_name_plain": "ungrouped",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "Overspent",
             "money_flowing_in": "In",
             "money_flowing_out": "Ud",

public/v2/i18n/de_DE.json

@@ -9,6 +9,8 @@
             "paid": "Bezahlt",
             "unpaid": "Unbezahlt",
             "default_group_title_name_plain": "ungruppiert",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "Zuviel ausgegeben",
             "money_flowing_in": "Eingehend",
             "money_flowing_out": "Ausgehend",

public/v2/i18n/el_GR.json

@@ -9,6 +9,8 @@
             "paid": "\u03a0\u03bb\u03b7\u03c1\u03c9\u03bc\u03ad\u03bd\u03bf",
             "unpaid": "\u0391\u03c0\u03bb\u03ae\u03c1\u03c9\u03c4\u03bf",
             "default_group_title_name_plain": "ungrouped",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "\u03a5\u03c0\u03ad\u03c1\u03b2\u03b1\u03c3\u03b7 \u03c0\u03c1\u03bf\u03cb\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03bc\u03ce\u03bd",
             "money_flowing_in": "\u0395\u03b9\u03c3\u03c1\u03bf\u03ad\u03c2",
             "money_flowing_out": "\u0395\u03ba\u03c1\u03bf\u03ad\u03c2",

public/v2/i18n/en_GB.json

@@ -9,6 +9,8 @@
             "paid": "Paid",
             "unpaid": "Unpaid",
             "default_group_title_name_plain": "ungrouped",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "Overspent",
             "money_flowing_in": "In",
             "money_flowing_out": "Out",

public/v2/i18n/en_US.json

@@ -9,6 +9,8 @@
             "paid": "Paid",
             "unpaid": "Unpaid",
             "default_group_title_name_plain": "ungrouped",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "Overspent",
             "money_flowing_in": "In",
             "money_flowing_out": "Out",

public/v2/i18n/es_ES.json

@@ -9,6 +9,8 @@
             "paid": "Pagado",
             "unpaid": "No pagado",
             "default_group_title_name_plain": "sin agrupar",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "Sobrepasadas",
             "money_flowing_in": "Entrada",
             "money_flowing_out": "Salida",

public/v2/i18n/fi_FI.json

@@ -9,6 +9,8 @@
             "paid": "Maksettu",
             "unpaid": "Maksamatta",
             "default_group_title_name_plain": "ungrouped",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "Varojen ylitys",
             "money_flowing_in": "Sis\u00e4\u00e4n",
             "money_flowing_out": "Ulos",

public/v2/i18n/fr_FR.json

@@ -9,6 +9,8 @@
             "paid": "Pay\u00e9",
             "unpaid": "Impay\u00e9",
             "default_group_title_name_plain": "non group\u00e9",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "Trop d\u00e9pens\u00e9",
             "money_flowing_in": "Entr\u00e9e",
             "money_flowing_out": "Sortie",

public/v2/i18n/hu_HU.json

@@ -9,6 +9,8 @@
             "paid": "Kifizetve",
             "unpaid": "Nincs fizetve",
             "default_group_title_name_plain": "ungrouped",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "T\u00falk\u00f6lt\u00f6tt",
             "money_flowing_in": "Be",
             "money_flowing_out": "Ki",

public/v2/i18n/id_ID.json

@@ -9,6 +9,8 @@
             "paid": "Dibayar",
             "unpaid": "Tidak dibayar",
             "default_group_title_name_plain": "ungrouped",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "Overspent",
             "money_flowing_in": "Dalam",
             "money_flowing_out": "Keluar",

public/v2/i18n/it_IT.json

@@ -9,6 +9,8 @@
             "paid": "Pagati",
             "unpaid": "Da pagare",
             "default_group_title_name_plain": "ungrouped",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "Speso troppo",
             "money_flowing_in": "Entrate",
             "money_flowing_out": "Uscite",

public/v2/i18n/ja_JP.json

@@ -9,6 +9,8 @@
             "paid": "\u652f\u6255\u3044\u6e08\u307f",
             "unpaid": "\u672a\u6255\u3044",
             "default_group_title_name_plain": "\u30b0\u30eb\u30fc\u30d7\u89e3\u9664",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "\u4f7f\u3044\u3059\u304e",
             "money_flowing_in": "\u5165",
             "money_flowing_out": "\u51fa",

public/v2/i18n/ko_KR.json

@@ -9,6 +9,8 @@
             "paid": "\uc9c0\ubd88\ub428",
             "unpaid": "\ubbf8\uc9c0\ubd88",
             "default_group_title_name_plain": "\uadf8\ub8f9 \ud574\uc81c\ub428",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "\ucd08\uacfc \uc9c0\ucd9c",
             "money_flowing_in": "\ub4e4\uc5b4\uc634",
             "money_flowing_out": "\ub098\uac10",

public/v2/i18n/nb_NO.json

@@ -9,6 +9,8 @@
             "paid": "Betalt",
             "unpaid": "Ikke betalt",
             "default_group_title_name_plain": "ungrouped",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "Overforbruk",
             "money_flowing_in": "Inn",
             "money_flowing_out": "Ut",

public/v2/i18n/nl_NL.json

@@ -9,6 +9,8 @@
             "paid": "Betaald",
             "unpaid": "Niet betaald",
             "default_group_title_name_plain": "ongegroepeerd",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "Teveel uitgegeven",
             "money_flowing_in": "In",
             "money_flowing_out": "Uit",

public/v2/i18n/nn_NO.json

@@ -9,6 +9,8 @@
             "paid": "Betalt",
             "unpaid": "Ikke betalt",
             "default_group_title_name_plain": "ungrouped",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "Overforbruk",
             "money_flowing_in": "Inn",
             "money_flowing_out": "Ut",

public/v2/i18n/pl_PL.json

@@ -9,6 +9,8 @@
             "paid": "Zap\u0142acone",
             "unpaid": "Niezap\u0142acone",
             "default_group_title_name_plain": "bez grupy",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "Przep\u0142acono",
             "money_flowing_in": "Przychodz\u0105ce",
             "money_flowing_out": "Wychodz\u0105ce",

public/v2/i18n/pt_BR.json

@@ -9,6 +9,8 @@
             "paid": "Pago",
             "unpaid": "N\u00e3o pago",
             "default_group_title_name_plain": "sem grupo",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "Gasto excedido",
             "money_flowing_in": "Entrada",
             "money_flowing_out": "Sa\u00edda",

public/v2/i18n/pt_PT.json

@@ -9,6 +9,8 @@
             "paid": "Pago",
             "unpaid": "Por pagar",
             "default_group_title_name_plain": "ungrouped",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "Gasto excedido",
             "money_flowing_in": "Dentro",
             "money_flowing_out": "Fora",

public/v2/i18n/ro_RO.json

@@ -9,6 +9,8 @@
             "paid": "Pl\u0103tit",
             "unpaid": "Nepl\u0103tit",
             "default_group_title_name_plain": "ungrouped",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "Dep\u0103\u0219ire de buget",
             "money_flowing_in": "\u00cen",
             "money_flowing_out": "Afar\u0103",

public/v2/i18n/ru_RU.json

@@ -9,6 +9,8 @@
             "paid": "\u041e\u043f\u043b\u0430\u0447\u0435\u043d\u043e",
             "unpaid": "\u041d\u0435 \u043e\u043f\u043b\u0430\u0447\u0435\u043d\u043e",
             "default_group_title_name_plain": "ungrouped",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "\u041f\u0435\u0440\u0435\u0440\u0430\u0441\u0445\u043e\u0434",
             "money_flowing_in": "\u0412",
             "money_flowing_out": "\u0418\u0437",

public/v2/i18n/sk_SK.json

@@ -9,6 +9,8 @@
             "paid": "Uhraden\u00e9",
             "unpaid": "Neuhraden\u00e9",
             "default_group_title_name_plain": "ungrouped",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "Prekro\u010den\u00e9 v\u00fddaje",
             "money_flowing_in": "Prich\u00e1dzaj\u00face",
             "money_flowing_out": "Odch\u00e1dzaj\u00face",

public/v2/i18n/sl_SI.json

@@ -9,6 +9,8 @@
             "paid": "Pla\u010dano",
             "unpaid": "Nepla\u010dano",
             "default_group_title_name_plain": "ungrouped",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "Preve\u010d porabljeno",
             "money_flowing_in": "Na",
             "money_flowing_out": "Iz",

public/v2/i18n/sv_SE.json

@@ -9,6 +9,8 @@
             "paid": "Betald",
             "unpaid": "Obetald",
             "default_group_title_name_plain": "ungrouped",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "\u00d6veranstr\u00e4ngd",
             "money_flowing_in": "In",
             "money_flowing_out": "Ut",

public/v2/i18n/tr_TR.json

@@ -9,6 +9,8 @@
             "paid": "\u00d6dendi",
             "unpaid": "\u00d6denmedi",
             "default_group_title_name_plain": "ungrouped",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "Fazladan",
             "money_flowing_in": "\u0130\u00e7eri",
             "money_flowing_out": "D\u0131\u015far\u0131",

public/v2/i18n/uk_UA.json

@@ -9,6 +9,8 @@
             "paid": "Paid",
             "unpaid": "Unpaid",
             "default_group_title_name_plain": "ungrouped",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "Overspent",
             "money_flowing_in": "In",
             "money_flowing_out": "Out",

public/v2/i18n/vi_VN.json

@@ -9,6 +9,8 @@
             "paid": "\u0110\u00e3 thanh to\u00e1n",
             "unpaid": "Ch\u01b0a thanh to\u00e1n",
             "default_group_title_name_plain": "ungrouped",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "Qu\u00e1 h\u1ea1n",
             "money_flowing_in": "V\u00e0o",
             "money_flowing_out": "Ra",

public/v2/i18n/zh_CN.json

@@ -9,6 +9,8 @@
             "paid": "\u5df2\u4ed8\u6b3e",
             "unpaid": "\u672a\u4ed8\u6b3e",
             "default_group_title_name_plain": "ungrouped",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "\u8d85\u652f",
             "money_flowing_in": "\u6d41\u5165",
             "money_flowing_out": "\u6d41\u51fa",

public/v2/i18n/zh_TW.json

@@ -9,6 +9,8 @@
             "paid": "\u5df2\u4ed8\u6b3e",
             "unpaid": "\u672a\u4ed8\u6b3e",
             "default_group_title_name_plain": "ungrouped",
+            "subscriptions_in_group": "Subscriptions in group \"%{title}\"",
+            "subscr_expected_x_times": "Expect to pay %{amount} %{times} times this period",
             "overspent": "\u8d85\u652f",
             "money_flowing_in": "\u5728",
             "money_flowing_out": "\u5916",

resources/assets/v2/pages/dashboard/accounts.js

@@ -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);
+                    currencies.push(current.native_currency_code);
-                    dataset.currency_code = current.native_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);

resources/assets/v2/pages/dashboard/budgets.js

@@ -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

resources/assets/v2/pages/dashboard/categories.js

@@ -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)) {

resources/assets/v2/pages/dashboard/piggies.js

@@ -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);

resources/assets/v2/pages/dashboard/sankey.js

@@ -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),
+                colorFrom: (c) => getColor(c.dataset.data[c.dataIndex] ? c.dataset.data[c.dataIndex].from : ''),
-                colorTo: (c) => getColor(c.dataset.data[c.dataIndex].to),
+                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

resources/assets/v2/pages/dashboard/subscriptions.js

@@ -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) {
+// function downloadSubscriptions(params) {
-    console.log('Downloading page ' + params.page + '...');
+//     console.log('Downloading page ' + params.page + '...');
-    const getter = new Get();
+//     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'),
+            start: format(start, 'y-MM-dd'),
-            end: format(new Date(window.store.get('end')), '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();

resources/assets/v2/support/get-cache-key.js

@@ -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};

resources/assets/v2/support/load-translations.js

@@ -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`);
+    if (false === loaded) {
-    const translations = await response.json();
+        const response = await fetch(`./v2/i18n/${locale}.json`);
-    i18n.store(translations);
+        const translations = await response.json();
+        i18n.store(translations);
+    }
+    //loaded = true;
 }
 
 export {loadTranslations};

resources/lang/en_US/firefly.php

@@ -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.',

resources/views/v2/index.blade.php

@@ -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">
+                    <!-- row with account chart -->
-                        <div class="col">
+                    @include('partials.dashboard.account-chart')
-                            <div class="card">
+                    <!-- row with budget chart -->
-                                <div class="card-header">
+                    @include('partials.dashboard.budget-chart')
-                                    <h3 class="card-title"><a href="{{ route('accounts.index',['asset']) }}"
+                    <!-- row with category chart -->
-                                                              title="{{ __('firefly.yourAccounts') }}">{{ __('firefly.yourAccounts') }}</a>
+                    @include('partials.dashboard.category-chart')
-                                    </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>
                 </div>
                 <div class="col-xl-4 col-lg-12 col-sm-12 col-xs-12">
-                    <div class="row">
+                    <!-- row with accounts list -->
-                        <template x-if="loadingAccounts">
+                    @include('partials.dashboard.account-list')
-                            <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>
                 </div>
 
             </div>
+            <!-- row with sankey chart -->
             <div class="row mb-2">
-                <div class="col">
+                @include('partials.dashboard.sankey')
-                    <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>
             </div>
-            <div class="row">
+            <!-- row with piggy banks, subscriptions and empty box -->
-                <div class="col" x-data="subscriptions">
+            <div class="row mb-2">
-                    {{--
+                <!-- column with subscriptions -->
-                    <div class="card">
+                @include('partials.dashboard.subscriptions')
-                        <div class="card-header">
+                <!-- column with piggy banks -->
-                            <h3 class="card-title"><a href="{{ route('subscriptions.index') }}"
+                @include('partials.dashboard.piggy-banks')
-                                                      title="{{ __('firefly.go_to_subscriptions') }}">{{ __('firefly.subscriptions')  }}</a>
+                <!-- column with to do things -->
-                            </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>
                 <div class="col">
                     <div class="card">
                         <div class="card-header">

resources/views/v2/partials/dashboard/account-chart.blade.php

@@ -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>

resources/views/v2/partials/dashboard/account-list.blade.php

@@ -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>

resources/views/v2/partials/dashboard/budget-chart.blade.php

@@ -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>

resources/views/v2/partials/dashboard/category-chart.blade.php

@@ -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>

resources/views/v2/partials/dashboard/piggy-banks.blade.php

@@ -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>

resources/views/v2/partials/dashboard/sankey.blade.php

@@ -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>

resources/views/v2/partials/dashboard/subscriptions.blade.php

@@ -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>