It works!

resources/assets/v4/bootstrap.js

@@ -5,7 +5,7 @@
  */
 
 import axios from 'axios';
-import Alpine from 'alpinejs';
+//import Alpine from 'alpinejs';
 import BasicStore from './store/Basic';
 
 window.axios = axios;

resources/assets/v4/dashboard.js

@@ -0,0 +1,38 @@
+/*
+ * dashboard.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 './bootstrap.js';
+import Alpine from "alpinejs";
+
+// move to bootstrap later on?
+window.Alpine = Alpine
+
+import dashboard from './pages/dashboard.js';
+
+const comps = {dashboard};
+
+//import * as comps from '/dist/demo/index.js';
+Object.keys(comps).forEach(comp => {
+    //let data = new comps[comp]();
+    console.log('Loaded component ' + comp);
+    let data = comps[comp]();
+    Alpine.data(comp, () => data);
+});
+Alpine.start();

resources/assets/v4/pages/dashboard.js

@@ -0,0 +1,63 @@
+/*
+ * dashboard.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 Summary from "../api/summary/index.js";
+import {format} from "date-fns";
+
+export default () => ({
+    balanceBox: {amounts: [], subtitles: []},
+    constructor() {
+        console.log('DashboardClass constructor');
+        //
+
+    },
+
+    // Getter
+    init() {
+        // get boxes info.
+        let getter = new Summary();
+        let start = window.BasicStore.get('start');
+        let end = window.BasicStore.get('end');
+
+        // check on NULL values:
+        if (start !== null && end !== null) {
+            start = new Date(start);
+            end = new Date(end);
+        }
+
+        getter.get(format(start, 'yyyy-MM-dd'), format(end, 'yyyy-MM-dd'), null).then((response) => {
+            console.log('DashboardClass done!');
+            console.log(response.data);
+            for (const i in response.data) {
+                if (response.data.hasOwnProperty(i)) {
+                    const current = response.data[i];
+                    if (i.startsWith('balance-in-')) {
+                        console.log('Balance in: ', current);
+                        this.balanceBox.amounts.push(current.value_parsed);
+                        this.balanceBox.subtitles.push(current.sub_title);
+                    }
+                }
+            }
+        });
+
+
+    },
+});

resources/views/index.blade.php

@@ -1,6 +1,6 @@
 @extends('layout.v4.default')
 @section('vite')
-    @vite(['resources/assets/v4/sass/app.scss', 'resources/assets/v4/app.js', 'resources/assets/v4/index.js'])
+    @vite(['resources/assets/v4/sass/app.scss', 'resources/assets/v4/dashboard.js'])
 @endsection
 @section('content')
 

resources/views/partials/dashboard/boxes.blade.php

@@ -2,9 +2,16 @@
     <!--begin::Col-->
     <div class="col-lg-3 col-6">
         <!--begin::Small Box Widget 1-->
-        <div class="small-box text-bg-primary" x-data="amounts">
+        <div class="small-box text-bg-primary" x-data="dashboard">
             <div class="inner">
-                <h3 id="balanceAmount" x-text="get">TODO amount</h3>
+                <h3 id="balanceAmount">
+                    <template x-for="(amount, index) in balanceBox.amounts" :key="index">
+                        <span>
+                            <span x-text="amount"></span><span
+                                :class="{ 'invisible': (balanceBox.amounts.length == index+1) }">, </span>
+                        </span>
+                    </template>
+                </h3>
 
                 <p>
                     <a href="{{ route('reports.report.default', ['allAssetAccounts',$start->format('Ymd'),$end->format('Ymd')]) }}">{{ __('firefly.in_out_period') }}</a>
@@ -15,7 +22,12 @@
             </span>
 
             <span class="small-box-footer">
-                TODO amount + amount
+                <template x-for="(subtitle, index) in balanceBox.subtitles" :key="index">
+                        <span>
+                            <span x-text="subtitle"></span><span
+                                :class="{ 'invisible': (balanceBox.amounts.length == index+1) }"> &amp; </span>
+                        </span>
+                    </template>
             </span>
         </div>
         <!--end::Small Box Widget 1-->