Merge pull request #6911 from firefly-iii/v3-top-boxes

Clean up top boxes

app/Transformers/V2/TransactionGroupTransformer.php

@@ -239,7 +239,7 @@ class TransactionGroupTransformer extends AbstractTransformer
      */
     private function stringFromArray(NullArrayObject $array, string $key, ?string $default): ?string
     {
-        Log::debug(sprintf('%s: %s', $key, var_export($array[$key])));
+        //Log::debug(sprintf('%s: %s', $key, var_export($array[$key], true)));
         if (null === $array[$key] && null === $default) {
             return null;
         }

frontend/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.2",
-    "@quasar/extras": "^1.15.9",
+    "@quasar/extras": "^1.15.10",
     "apexcharts": "^3.32.1",
     "axios": "^0.21.1",
     "axios-cache-adapter": "^2.7.3",
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.13.14",
-    "@quasar/app-webpack": "^3.6.2",
+    "@quasar/app-webpack": "^3.7.1",
     "@types/node": "^12.20.21",
     "@typescript-eslint/eslint-plugin": "^4.16.1",
     "@typescript-eslint/parser": "^4.16.1",

frontend/quasar.conf.js

@@ -55,7 +55,7 @@ module.exports = configure(function (ctx) {
     extras: [
       // 'ionicons-v4',
       // 'mdi-v5',
-      'fontawesome-v5',
+      'fontawesome-v6',
       // 'eva-icons',
       // 'themify',
       // 'line-awesome',
@@ -126,7 +126,7 @@ module.exports = configure(function (ctx) {
       },
 
       lang: 'en-US', // Quasar language pack
-      iconSet: 'fontawesome-v5',
+      iconSet: 'fontawesome-v6',
 
       // For special cases outside of where the auto-import strategy can have an impact
       // (like functional components as one of the examples),

frontend/src/components/dashboard/BillInsightBox.vue

@@ -22,11 +22,10 @@
   <!-- TODO most left? q-mr-sm -->
   <!-- TODO middle? dan q-mx-sm -->
   <!-- TODO right? dan q-ml-sm -->
-  <div class="q-mr-sm">
+    <q-card bordered flat class="fit">
-    <q-card bordered>
       <q-item>
         <q-item-section>
-          <q-item-label><strong>{{ $t('firefly.bills_to_pay') }}</strong></q-item-label>
+          <q-item-label><strong>{{ $t('firefly.bills') }} </strong></q-item-label>
         </q-item-section>
       </q-item>
       <q-separator />
@@ -63,7 +62,6 @@
         </q-card-section>
       </q-card-section>
     </q-card>
-  </div>
 </template>
 
 <script>

frontend/src/components/dashboard/NetWorthInsightBox.vue

@@ -22,8 +22,7 @@
   <!-- TODO most left? q-mr-sm -->
   <!-- TODO middle? dan q-mx-sm -->
   <!-- TODO right? dan q-ml-sm -->
-  <div class="q-ml-sm">
+    <q-card bordered flat class="fit">
-    <q-card bordered>
       <q-item>
         <q-item-section>
           <q-item-label><strong>{{ $t('firefly.net_worth') }}</strong></q-item-label>
@@ -47,7 +46,6 @@
         </q-card-section>
       </q-card-section>
     </q-card>
-  </div>
 </template>
 
 <script>

frontend/src/components/dashboard/SpendInsightBox.vue

@@ -22,11 +22,10 @@
   <!-- TODO most left? q-mr-sm -->
   <!-- TODO middle? dan q-mx-sm -->
   <!-- TODO right? dan q-ml-sm -->
-  <div class="q-mx-sm">
+    <q-card bordered flat>
-    <q-card bordered>
       <q-item>
         <q-item-section>
-          <q-item-label><strong>{{ $t('firefly.left_to_spend') }}</strong></q-item-label>
+          <q-item-label><strong>{{ $t('firefly.left_to_spend') }} x</strong></q-item-label>
         </q-item-section>
       </q-item>
       <q-separator/>
@@ -66,7 +65,6 @@
         </q-card-section>
       </q-card-section>
     </q-card>
-  </div>
 </template>
 
 <script>

frontend/src/components/transactions/LargeTable.vue

@@ -24,7 +24,6 @@
     :columns="columns"
     :loading="loading"
     :rows="rows"
-    :title="title"
     class="q-ma-md"
     row-key="group_id"
     @request="onRequest"

frontend/src/layouts/MainLayout.vue

@@ -18,10 +18,24 @@
   - along with this program.  If not, see <https://www.gnu.org/licenses/>.
   -->
 
+<!--
+instructions for padding and margin
+
+menu: top padding under top bar: q-pt-xs (padding top, xs)
+page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content some space.
+
+
+
+
+ TODO main DIV always use q-ma-md for the main holder
+ TODO rows use a q-mb-sm to give them space
+
+-->
+
 <template>
   <q-layout view="hHh lpR fFf">
 
-    <q-header class="bg-primary text-white" elevated>
+    <q-header reveal class="bg-primary text-white">
       <q-toolbar>
         <q-btn dense flat icon="fas fa-bars" round @click="toggleLeftDrawer"/>
 
@@ -101,7 +115,7 @@
                 <q-item-section>Currencies</q-item-section>
               </q-item>
               <q-item :to="{ name: 'admin.index' }" clickable>
-                <q-item-section>Administration</q-item-section>
+                <q-item-section>System settings</q-item-section>
               </q-item>
             </q-list>
           </q-menu>
@@ -119,9 +133,12 @@
               <q-item :to="{ name: 'profile.index' }" clickable>
                 <q-item-section> Profile</q-item-section>
               </q-item>
-              <q-item :to="{ name: 'profile.daa' }" clickable>
+              <q-item :to="{ name: 'profile.data' }" clickable>
                 <q-item-section> Data management</q-item-section>
               </q-item>
+              <q-item :to="{ name: 'administration.index' }" clickable>
+                <q-item-section>Administration management</q-item-section>
+              </q-item>
               <q-item :to="{ name: 'preferences.index' }" clickable>
                 <q-item-section>Preferences</q-item-section>
               </q-item>
@@ -137,11 +154,11 @@
         </q-btn>
       </q-toolbar>
     </q-header>
-    <q-drawer v-model="leftDrawerOpen" bordered show-if-above side="left">
+    <q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
       <q-scroll-area class="fit">
-        <div class="q-pa-md">
+        <div class="q-pt-xs">
-          <q-list>
+          <q-list :dense="true">
-            <q-item v-ripple :to="{ name: 'index' }" clickable>
+            <q-item v-ripple :to="{ name: 'index' }" clickable :dense="true">
               <q-item-section avatar>
                 <q-icon name="fas fa-tachometer-alt"/>
               </q-item-section>
@@ -149,7 +166,7 @@
                 Dashboard
               </q-item-section>
             </q-item>
-            <q-item v-ripple :to="{ name: 'budgets.index' }" clickable>
+            <q-item v-ripple :to="{ name: 'budgets.index' }" clickable :dense="true">
               <q-item-section avatar>
                 <q-icon name="fas fa-chart-pie"/>
               </q-item-section>
@@ -157,7 +174,7 @@
                 Budgets
               </q-item-section>
             </q-item>
-            <q-item v-ripple :to="{ name: 'subscriptions.index' }" clickable>
+            <q-item v-ripple :to="{ name: 'subscriptions.index' }" clickable :dense="true">
               <q-item-section avatar>
                 <q-icon name="far fa-calendar-alt"/>
               </q-item-section>
@@ -165,7 +182,7 @@
                 Subscriptions
               </q-item-section>
             </q-item>
-            <q-item v-ripple :to="{ name: 'piggy-banks.index' }" clickable>
+            <q-item v-ripple :to="{ name: 'piggy-banks.index' }" clickable :dense="true">
               <q-item-section avatar>
                 <q-icon name="fas fa-piggy-bank"/>
               </q-item-section>
@@ -174,48 +191,55 @@
               </q-item-section>
             </q-item>
 
-            <q-expansion-item
+            <q-expansion-item :dense="true"
               :default-opened="this.$route.name === 'transactions.index' || this.$route.name === 'transactions.show'"
               expand-separator
               icon="fas fa-exchange-alt"
               label="Transactions"
             >
-              <q-item v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'withdrawal'} }"
+              <q-item  :dense="true" v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'withdrawal'} }"
                       clickable>
                 <q-item-section>
                   Withdrawals
                 </q-item-section>
               </q-item>
-              <q-item v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'deposit'} }"
+              <q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'deposit'} }"
                       clickable>
                 <q-item-section>
                   Deposits
                 </q-item-section>
               </q-item>
-              <q-item v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'transfers'} }"
+              <q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'transfers'} }"
                       clickable>
 
                 <q-item-section>
                   Transfers
                 </q-item-section>
               </q-item>
+              <q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'all'} }"
+                      clickable>
+
+                <q-item-section>
+                  All transactions
+                </q-item-section>
+              </q-item>
 
 
             </q-expansion-item>
 
 
-            <q-expansion-item
+            <q-expansion-item :dense="true"
               default-unopened
               expand-separator
               icon="fas fa-microchip"
               label="Automation"
             >
-              <q-item v-ripple :inset-level="1" :to="{ name: 'rules.index' }" clickable>
+              <q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'rules.index' }" clickable>
                 <q-item-section>
                   Rules
                 </q-item-section>
               </q-item>
-              <q-item v-ripple :inset-level="1" :to="{ name: 'recurring.index' }" clickable>
+              <q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'recurring.index' }" clickable>
                 <q-item-section>
                   Recurring transactions
                 </q-item-section>
@@ -223,18 +247,18 @@
 
             </q-expansion-item>
 
-            <q-expansion-item
+            <q-expansion-item :dense="true"
               :default-opened="this.$route.name === 'accounts.index' || this.$route.name === 'accounts.show'"
               expand-separator
               icon="fas fa-credit-card"
               label="Accounts"
             >
-              <q-item v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'asset'} }" clickable>
+              <q-item  :dense="true" v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'asset'} }" clickable>
                 <q-item-section>
                   Asset accounts
                 </q-item-section>
               </q-item>
-              <q-item v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'expense'} }" clickable>
+              <q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'expense'} }" clickable>
                 <q-item-section>
                   Expense accounts
                 </q-item-section>
@@ -244,7 +268,7 @@
                   Revenue accounts
                 </q-item-section>
               </q-item>
-              <q-item v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'liabilities'} }"
+              <q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'liabilities'} }"
                       clickable>
                 <q-item-section>
                   Liabilities
@@ -253,29 +277,29 @@
 
             </q-expansion-item>
 
-            <q-expansion-item
+            <q-expansion-item :dense="true"
               default-unopened
               expand-separator
               icon="fas fa-tags"
               label="Classification"
             >
-              <q-item v-ripple :inset-level="1" :to="{ name: 'categories.index' }" clickable>
+              <q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'categories.index' }" clickable>
                 <q-item-section>
                   Categories
                 </q-item-section>
               </q-item>
-              <q-item v-ripple :inset-level="1" :to="{ name: 'tags.index' }" clickable>
+              <q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'tags.index' }" clickable>
                 <q-item-section>
                   Tags
                 </q-item-section>
               </q-item>
-              <q-item v-ripple :inset-level="1" :to="{ name: 'groups.index'}" clickable>
+              <q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'groups.index'}" clickable>
                 <q-item-section>
                   Groups
                 </q-item-section>
               </q-item>
             </q-expansion-item>
-            <q-item v-ripple :to="{ name: 'reports.index'}" clickable>
+            <q-item :dense="true" v-ripple :to="{ name: 'reports.index'}" clickable>
               <q-item-section avatar>
                 <q-icon name="far fa-chart-bar"/>
               </q-item-section>
@@ -289,14 +313,15 @@
     </q-drawer>
 
 
-    <q-page-container>
+    <q-page-container class="q-ma-xs">
       <Alert></Alert>
-
       <!-- breadcrumb, page title? -->
-      <div class="q-ma-md">
+      <div class="q-mb-md">
         <div class="row">
           <div class="col-6">
-            <h4 class="q-ma-none q-pa-none">{{ $t($route.meta.pageTitle || 'firefly.welcome_back') }}</h4>
+            <h4 class="q-ma-none q-pa-none">
+              <em class="fa-solid fa-fire"></em>
+              {{ $t($route.meta.pageTitle || 'firefly.welcome_back') }}</h4>
           </div>
           <div class="col-6">
             <q-breadcrumbs align="right">
@@ -314,7 +339,7 @@
     <q-footer class="bg-grey-8 text-white" elevated>
       <q-toolbar>
         <div>
-          <small>Firefly III v TODO &copy; James Cole, AGPL-3.0-or-later.</small>
+          <small>Firefly III v v6.0.0-alpha.2 &copy; James Cole, AGPL-3.0-or-later.</small>
         </div>
       </q-toolbar>
     </q-footer>
@@ -327,6 +352,7 @@
 import {defineComponent, ref} from 'vue';
 import DateRange from "../components/DateRange";
 import Alert from '../components/Alert';
+import {useQuasar} from "quasar";
 
 export default defineComponent(
   {
@@ -339,7 +365,7 @@ export default defineComponent(
     setup() {
       const leftDrawerOpen = ref(true)
       const search = ref('')
-
+      const $q = useQuasar();
       return {
         search,
         leftDrawerOpen,

frontend/src/pages/administration/Index.vue

@@ -0,0 +1,60 @@
+<!--
+  - Index.vue
+  - 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/>.
+  -->
+
+<template>
+  <div>
+    <div class="q-ma-md">
+      <div class="row q-mb-sm">
+        <div class="col">
+          <div class="q-mt-sm q-mr-sm">
+            <q-card bordered>
+              <q-item>
+                <q-item-section>
+                  <q-item-label><strong>Financial administration</strong></q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-separator/>
+              <q-card-section>
+                <p>
+                  Bla bla bla
+                  List of groups.
+                  Edit members, edit group, delete group.
+                  add new administration.
+                  switch to new administration.
+                </p>
+
+              </q-card-section>
+            </q-card>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Index"
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/pages/dashboard/Boxes.vue

@@ -1,207 +0,0 @@
-<!--
-  - Boxes.vue
-  - Copyright (c) 2021 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/>.
-  -->
-
-<template>
-  <div class="row">
-    <div class="col-4 q-pr-sm q-pr-sm">
-      <q-card bordered>
-        <q-card-section class="q-pt-xs">
-          <div class="text-overline">
-            {{ $t('firefly.bills_to_pay') }}
-            <span class="float-right">
-            <span class="text-grey-4 fas fa-redo-alt" style="cursor: pointer;" @click="triggerForcedUpgrade"></span>
-              </span>
-          </div>
-        </q-card-section>
-        <q-card-section class="q-pt-xs">
-          <span v-for="balance in prefBillsUnpaid">{{ balance.value_parsed }}</span>
-          <span v-for="(bill, index) in notPrefBillsUnpaid">
-                                {{ bill.value_parsed }}<span v-if="index+1 !== notPrefBillsUnpaid.length">, </span>
-                            </span>
-        </q-card-section>
-      </q-card>
-    </div>
-    <div class="col-4 q-pr-sm q-pl-sm">
-
-      <q-card bordered>
-        <q-card-section class="q-pt-xs">
-          <div class="text-overline">
-            {{ $t('firefly.left_to_spend') }}
-            <span class="float-right">
-            <span class="text-grey-4 fas fa-redo-alt" style="cursor: pointer;" @click="triggerForcedUpgrade"></span>
-              </span>
-          </div>
-        </q-card-section>
-        <q-card-section class="q-pt-xs">
-          <!-- left to spend in preferred currency -->
-          <span v-for="left in prefLeftToSpend" :title="left.sub_title">{{ left.value_parsed }}</span>
-          <span v-for="(left, index) in notPrefLeftToSpend">
-                                {{ left.value_parsed }}<span v-if="index+1 !== notPrefLeftToSpend.length">, </span>
-                            </span>
-        </q-card-section>
-      </q-card>
-    </div>
-    <div class="col-4 q-pl-sm">
-      <q-card bordered>
-        <q-card-section class="q-pt-xs">
-          <div class="text-overline">
-            {{ $t('firefly.net_worth') }}
-            <span class="float-right">
-            <span class="text-grey-4 fas fa-redo-alt" style="cursor: pointer;" @click="triggerForcedUpgrade"></span>
-              </span>
-          </div>
-        </q-card-section>
-        <q-card-section class="q-pt-xs">
-          <span v-for="nw in prefNetWorth" :title="nw.sub_title">{{ nw.value_parsed }}</span>
-          <span v-for="(nw, index) in notPrefNetWorth">
-                                {{ nw.value_parsed }}<span v-if="index+1 !== notPrefNetWorth.length">, </span>
-                            </span>
-          <span v-if="0===notPrefNetWorth.length">&nbsp;</span>
-        </q-card-section>
-      </q-card>
-    </div>
-  </div>
-</template>
-
-<script>
-import Basic from "src/api/summary/basic";
-import {useFireflyIIIStore} from '../../stores/fireflyiii'
-
-export default {
-  name: 'Boxes',
-  computed: {
-    prefBillsUnpaid: function () {
-      return this.filterOnCurrency(this.billsUnpaid);
-    },
-    notPrefBillsUnpaid: function () {
-      return this.filterOnNotCurrency(this.billsUnpaid);
-    },
-    prefLeftToSpend: function () {
-      return this.filterOnCurrency(this.leftToSpend);
-    },
-    notPrefLeftToSpend: function () {
-      return this.filterOnNotCurrency(this.leftToSpend);
-    },
-    prefNetWorth: function () {
-      return this.filterOnCurrency(this.netWorth);
-    },
-    notPrefNetWorth: function () {
-      return this.filterOnNotCurrency(this.netWorth);
-    },
-  },
-  created() {
-  },
-  data() {
-    return {
-      summary: [],
-      billsPaid: [],
-      billsUnpaid: [],
-      leftToSpend: [],
-      netWorth: [],
-      range: {
-        start: null,
-        end: null,
-      },
-      store: null
-    }
-  },
-  mounted() {
-    this.store = useFireflyIIIStore();
-
-    if (null === this.range.start || null === this.range.end) {
-
-      // subscribe, then update:
-      this.store.$onAction(
-        ({name, $store, args, after, onError,}) => {
-          after((result) => {
-            if (name === 'setRange') {
-              this.range = result;
-              this.triggerUpdate();
-            }
-          })
-        }
-      )
-    }
-
-    if (null !== this.store.getRange.start && null !== this.store.getRange.end) {
-      this.start = this.store.getRange.start;
-      this.end = this.store.getRange.end;
-      this.triggerUpdate();
-    }
-  },
-  methods: {
-    triggerForcedUpgrade: function () {
-      this.store.refreshCacheKey();
-      this.triggerUpdate();
-    },
-    triggerUpdate: function () {
-      if (null !== this.store.getRange.start && null !== this.store.getRange.end) {
-        const basic = new Basic;
-        basic.list({
-          start: this.store.getRange.start,
-          end: this.store.getRange.end
-        }, this.store.getCacheKey).then(data => {
-          this.netWorth = this.getKeyedEntries(data.data, 'net-worth-in-');
-          this.leftToSpend = this.getKeyedEntries(data.data, 'left-to-spend-in-');
-          this.billsPaid = this.getKeyedEntries(data.data, 'bills-paid-in-');
-          this.billsUnpaid = this.getKeyedEntries(data.data, 'bills-unpaid-in-');
-        });
-      }
-    },
-    getKeyedEntries(array, expected) {
-      let result = [];
-      for (const key in array) {
-        if (array.hasOwnProperty(key)) {
-          if (expected === key.substr(0, expected.length)) {
-            result.push(array[key]);
-          }
-        }
-      }
-      return result;
-    },
-    filterOnCurrency(array) {
-      let ret = [];
-      for (const key in array) {
-        if (array.hasOwnProperty(key)) {
-          if (array[key].currency_id === this.store.getCurrencyId) {
-            ret.push(array[key]);
-          }
-        }
-      }
-      // or just the first one:
-      if (0 === ret.length && array.hasOwnProperty(0)) {
-        ret.push(array[0]);
-      }
-      return ret;
-    },
-    filterOnNotCurrency(array) {
-      let ret = [];
-      for (const key in array) {
-        if (array.hasOwnProperty(key)) {
-          if (array[key].currency_id !== this.store.getCurrencyId) {
-            ret.push(array[key]);
-          }
-        }
-      }
-      return ret;
-    },
-  }
-}
-</script>

frontend/src/pages/dashboard/Dashboard.vue

@@ -19,31 +19,29 @@
   -->
 
 <template>
-  <!-- TODO main DIV always use q-ma-md for the main holder-->
+  <div>
-  <!-- TODO rows use a q-mb-sm to give them space -->
+    <div class="row">
-  <div class="q-ma-md">
+      <div class="col q-mr-sm">
-    <div class="row q-mb-sm">
-      <div class="col">
         <BillInsightBox/>
       </div>
-      <div class="col">
+      <div class="col q-mx-sm">
         <SpendInsightBox/>
       </div>
-      <div class="col">
+      <div class="col q-ml-sm">
         <NetWorthInsightBox/>
       </div>
     </div>
-    <div class="row q-mb-sm">
+    <div class="row">
       <div class="col">
         <AccountChart/>
       </div>
     </div>
-    <div class="row q-mb-sm">
+    <div class="row">
       <div class="col">
         <TransactionLists/>
       </div>
     </div>
-    <div class="row q-mb-sm">
+    <div class="row">
       <div class="col">
         <BudgetBox/>
       </div>
@@ -51,7 +49,7 @@
         Category box
       </div>
     </div>
-    <div class="row q-mb-sm">
+    <div class="row">
       <div class="col">
         Expense Box
       </div>
@@ -59,7 +57,7 @@
         Revenue Box
       </div>
     </div>
-    <div class="row q-mb-sm">
+    <div class="row">
       <div class="col">
         Piggy box
       </div>

frontend/src/pages/transactions/Index.vue

@@ -20,12 +20,99 @@
 
 <template>
   <q-page>
+    <div class="row q-mx-md q-mb-sm">
+      <!-- search box -->
+      <div class="col q-mr-sm">
+        <q-card bordered>
+          <q-card-section>
+            <div class="row items-center no-wrap">
+              <div class="col">
+                Search and filter
+              </div>
+
+              <div class="col-auto">
+                <q-btn color="grey" round flat dense
+                       :icon="searchExpanded ? 'fas fa-chevron-up' : 'fas fa-chevron-down'" @click="searchExpanded = !searchExpanded">
+                </q-btn>
+              </div>
+            </div>
+          </q-card-section>
+          <q-slide-transition>
+            <div v-show="searchExpanded">
+              <q-separator />
+              <q-card-section>
+                Here be stuff
+              </q-card-section>
+            </div>
+          </q-slide-transition>
+        </q-card>
+      </div>
+      <!-- date and range box -->
+      <div class="col q-ml-sm">
+        <q-card bordered>
+
+          <q-card-section>
+            <div class="row items-center no-wrap">
+              <div class="col">
+                Dates and ranges
+              </div>
+
+              <div class="col-auto">
+                <q-btn color="grey" round flat dense
+                       :icon="dateExpanded ? 'fas fa-chevron-up' : 'fas fa-chevron-down'" @click="dateExpanded = !dateExpanded">
+                </q-btn>
+              </div>
+            </div>
+          </q-card-section>
+          <q-slide-transition>
+            <div v-show="dateExpanded">
+              <q-separator />
+              <q-card-section>
+                Here be stuff
+              </q-card-section>
+            </div>
+          </q-slide-transition>
+        </q-card>
+      </div>
+    </div>
+    <div class="row q-mx-md">
+      <div class="col">
+        <q-card bordered>
+
+          <q-card-section>
+            <div class="row items-center no-wrap">
+              <div class="col">
+                Stats
+              </div>
+
+              <div class="col-auto">
+                <q-btn color="grey" round flat dense
+                       :icon="statsExpanded ? 'fas fa-chevron-up' : 'fas fa-chevron-down'" @click="statsExpanded = !statsExpanded">
+                </q-btn>
+              </div>
+            </div>
+          </q-card-section>
+          <q-slide-transition>
+            <div v-show="statsExpanded">
+              <q-separator />
+              <q-card-section>
+                Here be stuff
+              </q-card-section>
+            </div>
+          </q-slide-transition>
+        </q-card>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+
 
         <!-- insert LargeTable -->
         <LargeTable ref="table"
                     :loading="loading"
                     :page="page"
                     :rows="rows"
+                    class="mb-5"
                     :rows-number="rowsNumber"
                     :rows-per-page="rowsPerPage"
                     :title="$t('firefly.title_' + this.type)"
@@ -33,10 +120,14 @@
         >
 
         </LargeTable>
+      </div>
+    </div>
+    <div class="box">
+      <div class="row">
         <p>&nbsp;</p>
         <p>&nbsp;</p>
-    <p>&nbsp;</p>
+      </div>
-    <p>&nbsp;</p>
+    </div>
     <q-page-sticky :offset="[18, 18]" position="bottom-right">
       <q-fab
         color="green"
@@ -47,12 +138,15 @@
         square
         vertical-actions-align="right"
       >
-        <q-fab-action :to="{ name: 'transactions.create', params: {type: 'transfer'} }" color="primary" icon="fas fa-exchange-alt"
+        <q-fab-action :to="{ name: 'transactions.create', params: {type: 'transfer'} }" color="primary"
+                      icon="fas fa-exchange-alt"
                       label="New transfer" square/>
-        <q-fab-action :to="{ name: 'transactions.create', params: {type: 'deposit'} }" color="primary" icon="fas fa-long-arrow-alt-right"
+        <q-fab-action :to="{ name: 'transactions.create', params: {type: 'deposit'} }" color="primary"
+                      icon="fas fa-long-arrow-alt-right"
                       label="New deposit"
                       square/>
-        <q-fab-action :to="{ name: 'transactions.create', params: {type: 'withdrawal'} }" color="primary" icon="fas fa-long-arrow-alt-left"
+        <q-fab-action :to="{ name: 'transactions.create', params: {type: 'withdrawal'} }" color="primary"
+                      icon="fas fa-long-arrow-alt-left"
                       label="New withdrawal"
                       square/>
 
@@ -66,6 +160,7 @@
 import List from "../../api/transactions/list";
 import LargeTable from "../../components/transactions/LargeTable";
 import Parser from "../../api/transactions/parser";
+import {useFireflyIIIStore} from "stores/fireflyiii";
 
 export default {
   name: 'Index',
@@ -92,27 +187,26 @@ export default {
       columns: [
         {name: 'type', label: ' ', field: 'type', style: 'width: 30px'},
         {name: 'description', label: 'Description', field: 'description', align: 'left'},
-        {
+        {name: 'amount', label: 'Amount', field: 'amount'},
-          name: 'amount', label: 'Amount', field: 'amount'
+        {name: 'date', label: 'Date', field: 'date', align: 'left',},
-        },
+        //{name: 'source', label: 'Source', field: 'source', align: 'left'},
-        {
+        //{name: 'destination', label: 'Destination', field: 'destination', align: 'left'},
-          name: 'date', label: 'Date', field: 'date',
+        //{name: 'category', label: 'Category', field: 'category', align: 'left'},
-          align: 'left',
+        //{name: 'budget', label: 'Budget', field: 'budget', align: 'left'},
-        },
-        {name: 'source', label: 'Source', field: 'source', align: 'left'},
-        {name: 'destination', label: 'Destination', field: 'destination', align: 'left'},
-        {name: 'category', label: 'Category', field: 'category', align: 'left'},
-        {name: 'budget', label: 'Budget', field: 'budget', align: 'left'},
         {name: 'menu', label: ' ', field: 'menu', align: 'left'},
       ],
       type: 'withdrawal',
       page: 1,
       rowsPerPage: 50,
       rowsNumber: 100,
+      store: null,
       range: {
         start: null,
         end: null
-      }
+      },
+      searchExpanded: false, // TODO store in cookie.
+      dateExpanded : false,
+      statsExpanded: false,
     }
   },
   computed: {
@@ -120,6 +214,8 @@ export default {
   },
   created() {
     this.rowsPerPage = this.getListPageSize;
+    this.store = useFireflyIIIStore();
+
   },
   mounted() {
     this.type = this.$route.params.type;

frontend/src/router/routes.js

@@ -900,6 +900,22 @@ const routes = [
       }
     ]
   },
+  // financial administration
+  {
+    path: '/administrations',
+    component: () => import('layouts/MainLayout.vue'),
+    children: [
+      {
+        path: '',
+        component: () => import('pages/administration/Index.vue'),
+        name: 'administration.index',
+        meta: {
+          pageTitle: 'firefly.administration_index'
+        }
+      }
+    ]
+  },
+
   // profile
   {
     path: '/profile',
@@ -946,17 +962,17 @@ const routes = [
     ]
   },
 
-  // administration
+  // administration (system settings)
   {
-    path: '/admin',
+    path: '/system',
     component: () => import('layouts/MainLayout.vue'),
     children: [
       {
         path: '',
-        component: () => import('pages/admin/Index.vue'),
+        component: () => import('pages/system/Index.vue'),
-        name: 'admin.index',
+        name: 'system.index',
         meta: {
-          pageTitle: 'firefly.administration'
+          pageTitle: 'firefly.system'
         }
       }
     ]

resources/lang/en_US/firefly.php

@@ -1347,6 +1347,9 @@ return [
     'slack_webhook_url_help'                    => 'If you want Firefly III to notify you using Slack, enter the webhook URL here. Otherwise leave the field blank. If you are an admin, you need to set this URL in the administration as well.',
     'slack_url_label'                           => 'Slack "incoming webhook" URL',
 
+    // Financial administrations
+    'administration_index'                      => 'Financial administration',
+
     // profile:
     'purge_data_title'                          => 'Purge data from Firefly III',
     'purge_data_expl'                           => '"Purging" means "deleting that which is already deleted". In normal circumstances, Firefly III deletes nothing permanently. It just hides it. The button below deletes all of these previously "deleted" records FOREVER.',