More work on v4

resources/views/index.blade.php

@@ -1,28 +1,17 @@
 @extends('layout.v4.default')
 @section('vite')
-    @vite(['resources/assets/v4/index.js'])
+    @vite(['resources/assets/v4/sass/app.scss', 'resources/assets/v4/app.js', 'resources/assets/v4/index.js'])
 @endsection
 @section('content')
 
     <div class="app-content">
         <!--begin::Container-->
         <div class="container-fluid">
-            Here be content.
+            @include('partials.dashboard.boxes')
 
-            <!-- /.row (main row) -->
-            <div x-data="{ count: 0 }">
-                <button x-on:click="count++">Increment</button>
-
-                <span x-text="count"></span>
-                <button x-on:click="app.changeDateRange">KLIK</button>
-            </div>
 
         </div>
 
-        Icon: <i class="fa-solid fa-user"></i><br>
-        <!-- uses solid style -->
-        Icon: <i class="fa-brands fa-github-square"></i>
-        <!--end::Container-->
     </div>
 
 @endsection

resources/views/layout/v4/default.blade.php

@@ -36,11 +36,11 @@
                 <li class="nav-item dropdown">
                     <a class="nav-link daterange-holder" data-bs-toggle="dropdown" href="#"></a>
                     <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end" x-data="">
-                        <a href="#" class="dropdown-item daterange-current">
+                        <a href="#" class="dropdown-item daterange-current" @click="app.changeDateRange">
 
                         </a>
                         <div class="dropdown-divider"></div>
-                        <a href="#" x-on:click="app.changeDateRange" class="dropdown-item daterange-next">
+                        <a href="#" @click="app.changeDateRange" class="dropdown-item daterange-next">
                             next
                         </a>
                         <div class="dropdown-divider"></div>
@@ -65,7 +65,7 @@
                         </a>
                         <div class="dropdown-divider"></div>
                         <a href="#" class="dropdown-item dropdown-footer daterange-custom" @click="app.doCustomRange">
-                            {{ __('firefly.customRange') }}
+                            TODO {{ __('firefly.customRange') }}
                         </a>
                     </div>
                 </li>

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

@@ -0,0 +1,81 @@
+<div class="row">
+    <!--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="inner">
+                <h3 id="balanceAmount" x-text="get">TODO amount</h3>
+
+                <p>
+                    <a href="{{ route('reports.report.default', ['allAssetAccounts',$start->format('Ymd'),$end->format('Ymd')]) }}">{{ __('firefly.in_out_period') }}</a>
+                </p>
+            </div>
+            <span class="small-box-icon">
+                <i class="fa-solid fa-scale-balanced"></i>
+            </span>
+
+            <span class="small-box-footer">
+                TODO amount + amount
+            </span>
+        </div>
+        <!--end::Small Box Widget 1-->
+    </div>
+    <!--end::Col-->
+    <div class="col-lg-3 col-6">
+        <!--begin::Small Box Widget 2-->
+        <div class="small-box text-bg-success">
+            <div class="inner">
+                <h3>TODO amount</h3>
+
+                <p><a href="{{ route('bills.index') }}">{{ __('firefly.bills_to_pay') }}</a></p>
+            </div>
+            <span class="small-box-icon">
+                <em class="fa-regular fa-calendar"></em>
+            </span>
+            <span class="small-box-footer">
+                {{ __('firefly.paid') }}: TODO amount
+            </span>
+        </div>
+        <!--end::Small Box Widget 2-->
+    </div>
+    <!--end::Col-->
+    <div class="col-lg-3 col-6">
+        <!--begin::Small Box Widget 3-->
+        <div class="small-box text-bg-warning">
+            <div class="inner">
+                <h3>TODO amount</h3>
+
+                <p><a href="{{ route('budgets.index') }}">{{ __('firefly.left_to_spend') }}</a></p>
+            </div>
+            <span class="small-box-icon">
+                <em class="fa-solid fa-money-check-dollar"></em>
+            </span>
+            <span class="small-box-footer">
+                {{ __('firefly.per_day') }}: TODO amount
+            </span>
+        </div>
+        <!--end::Small Box Widget 3-->
+    </div>
+    <!--end::Col-->
+    <div class="col-lg-3 col-6">
+        <!--begin::Small Box Widget 4-->
+        <div class="small-box text-bg-danger">
+            <div class="inner">
+                <h3>TODO amount</h3>
+
+                <p>
+                    <a href="{{ route('reports.report.default', ['allAssetAccounts','currentYearStart','currentYearEnd']) }}">{{ __('firefly.net_worth') }}</a>
+                </p>
+            </div>
+            <span class="small-box-icon">
+                <i class="fa-solid fa-chart-line"></i>
+            </span>
+            <span class="small-box-footer">
+                &nbsp;
+            </span>
+        </div>
+        <!--end::Small Box Widget 4-->
+    </div>
+    <!--end::Col-->
+</div>
+<!--end::Row-->

resources/views/partials/layout/v4/head.blade.php

@@ -41,8 +41,6 @@
     <!--begin::Required Plugin(AdminLTE)-->
     <link rel="stylesheet" href="v4/css/adminlte.css">
     <!--end::Required Plugin(AdminLTE)-->
-
-    @vite(['resources/assets/v4/sass/app.scss', 'resources/assets/v4/app.js'])
     @yield('vite')
 
 </head>