Slice and seperate boxes displaying monthly statistics on dashboard
MODIFY
resources/assets/sass/components/spacing.scss
resources/assets/sass/components/spacing.scss
margin-top: 36px;
}
+.mb-1 {
+ margin-bottom: 10px;
+}
+
+.ml-2 {
+ margin-left: 20px;
+}
+
.mr-05 {
margin-right: 5px;
}

MODIFY
resources/views/dashboard.blade.php
resources/views/dashboard.blade.php
@section('body')
<div class="wrapper spacing-top-large spacing-bottom-large">
<div style="color: black; margin-bottom: 20px;">{{ __('calendar.months.' . $month) }}</div>
- <div class="box mb-4">
+ <div class="row row--gutter mb-4">
+ <div class="row__column">
+ <div class="box">
+ <div class="box__section row">
+ <div class="row__column">
+ <div class="mb-1" style="color: #A7AEBB;">Total Spent</div>
+ <h2 style="font-size: 20px;">{{ $currency->symbol }} {{ number_format($totalSpendings / 100, 2) }}</h2>
+ </div>
+ <div class="row__column row__column--compact ml-2">
+ <i class="fal fa-wallet" style="color: #A7AEBB; font-size: 20px;"></i>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row__column">
+ <div class="box">
<div class="box__section row">
- <div class="row__column text-center">
- <div class="mb-1" style="margin-bottom: 10px; color: #A7AEBB;">Total Spent</div>
- <h2>{{ $currency->symbol }} {{ number_format($totalSpendings / 100, 2) }}</h2>
+ <div class="row__column">
+ <div class="mb-1" style="color: #A7AEBB;">Most Expensive Tag</div>
+ <h2 style="font-size: 20px;">{{ count($mostExpensiveTag) ? $mostExpensiveTag[0]->name : '-' }}</h2>
+ </div>
+ <div class="row__column row__column--compact ml-2">
+ <i class="fal fa-tag" style="color: #A7AEBB; font-size: 20px;"></i>
</div>
- <div class="row__column text-center">
- <div class="mb-1" style="margin-bottom: 10px; color: #A7AEBB;">Most Expensive Tag</div>
- <h2>{{ count($mostExpensiveTag) ? $mostExpensiveTag[0]->name : '-' }}</h2>
</div>
- <div class="row__column text-center">
- <div class="mb-1" style="margin-bottom: 10px; color: #A7AEBB;">Most Expensive Day</div>
- <h2>{{ count($mostExpensiveWeekday) ? __('calendar.weekdays.' . $mostExpensiveWeekday[0]->weekday) : '-' }}</h2>
</div>
</div>
+ <div class="row__column">
+ <div class="box">
+ <div class="box__section row">
+ <div class="row__column">
+ <div class="mb-1" style="color: #A7AEBB;">Most Expensive Day</div>
+ <h2 style="font-size: 20px;">{{ count($mostExpensiveWeekday) ? __('calendar.weekdays.' . $mostExpensiveWeekday[0]->weekday) : '-' }}</h2>
+ </div>
+ <div class="row__column row__column--compact ml-2">
+ <i class="fal fa-calendar" style="color: #A7AEBB; font-size: 20px;"></i>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="box mb-4">
@if (count($tagsBreakdown))
<div class="box__section">
+ <div class="mb-2">Breakdown</div>
<div class="ct-chart ct-perfect-fifth" style="max-width: 500px; margin-left: auto; margin-right: auto;"></div>
</div>
@endif

Slice and seperate boxes displaying monthly statistics on dashboard