Refactor dashboard to show recent activity
MODIFY
app/Http/Controllers/DashboardController.php
app/Http/Controllers/DashboardController.php
@@ -5,103 +5,27 @@ namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Auth;
-use DB;
class DashboardController extends Controller {
- public function index($year = null, $month = null) {
- if (!$year && !$month) {
- $year = date('Y');
-
- $month = date('n');
- }
-
- $previousYear = $year;
- $previousMonth = $month - 1;
- $nextYear = $year;
- $nextMonth = $month + 1;
-
- if ($previousMonth < 1) {
- $previousYear --;
- $previousMonth = 12;
- } else if ($nextMonth > 12) {
- $nextYear ++;
- $nextMonth = 1;
- }
-
+ public function index() {
$user = Auth::user();
- $currency = $user->currency;
-
- $spendingsByTag = DB::select('
- SELECT
- tags.id,
- tags.name,
- SUM(spendings.amount) AS spendings
- FROM tags
- INNER JOIN spendings
- ON spendings.tag_id = tags.id
- WHERE YEAR(spendings.date) = ? AND MONTH(spendings.date) = ?
- GROUP BY tags.id
- ORDER BY spendings DESC
- ', [$year, $month]);
-
- $totalEarnings = $user->earnings()
- ->whereYear('date', $year)
- ->whereMonth('date', $month)
- ->sum('amount');
-
- $totalSpendings = $user->spendings()
- ->whereYear('date', $year)
- ->whereMonth('date', $month)
- ->sum('amount');
-
- $balance = $totalEarnings - $totalSpendings;
-
- $earnings = $user->earnings()
- ->whereYear('date', $year)
- ->whereMonth('date', $month)
+ $recentEarnings = $user
+ ->earnings()
->orderBy('date', 'DESC')
+ ->limit(3)
->get();
- $spendings = $user->spendings()
- ->whereYear('date', $year)
- ->whereMonth('date', $month)
+ $recentSpendings = $user
+ ->spendings()
->orderBy('date', 'DESC')
+ ->limit(3)
->get();
- $budgets = $user->budgets()
- ->where('year', $year)
- ->where('month', $month)
- ->get();
-
- $spendingsByTags = [];
-
- foreach ($spendings as $spending) {
- if ($spending->tag) {
- if (!isset($spendingsByTag[$spending->tag->name])) {
- $spendingsByTags[$spending->tag->name] = 0;
- }
-
- $spendingsByTags[$spending->tag->name] += $spending->amount;
- }
- }
-
- return view('dashboard', compact(
- 'year',
- 'month',
- 'previousYear',
- 'nextYear',
- 'previousMonth',
- 'nextMonth',
- 'currency',
- 'spendingsByTag',
- 'totalEarnings',
- 'totalSpendings',
- 'balance',
- 'earnings',
- 'spendings',
- 'budgets',
- 'spendingsByTags'
- ));
+ return view('dashboard', [
+ 'currency' => $user->currency,
+ 'recentEarnings' => $recentEarnings,
+ 'recentSpendings' => $recentSpendings
+ ]);
}
}

MODIFY
resources/assets/sass/app.scss
resources/assets/sass/app.scss
@@ -40,6 +40,17 @@ canvas {
bottom: 0;
}
+// Colors
+.color {
+ &-green {
+ color: green;
+ }
+
+ &-red {
+ color: red;
+ }
+}
+
// Date Picker
.date-picker {
width: 352px;

MODIFY
resources/assets/sass/components/box.scss
resources/assets/sass/components/box.scss
border: 1px solid $colors-border;
border-radius: 8px;
+ .box__section {
+ padding: 25px;
+ border-bottom: 1px solid $colors-border;
+
+ &.box__section--small {
+ padding: 20px;
+ }
+
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+
+ ul.box__section {
+ padding: 0; // TODO REMOVE THIS
+ list-style: none;
+
+ li {
+ padding: 25px;
+ border-bottom: 1px solid $colors-border;
+
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+ }
+
.section {
padding: 32px;
border-bottom: 1px solid $colors-border;

MODIFY
resources/views/dashboard.blade.php
resources/views/dashboard.blade.php
@extends('layout')
@section('body')
- <div class="banner">
- <div class="row gutter">
- <div class="column tight align-middle">
- <a href="/dashboard/{{ $previousYear }}/{{ $previousMonth }}">
- <i class="fa fa-angle-left" style="font-size: 24px;"></i>
- </a>
- </div>
- <div class="column tight align-middle">
- <h1>@lang('months.' . $month), {{ $year }}</h1>
- </div>
- <div class="column tight align-middle">
- <a href="/dashboard/{{ $nextYear }}/{{ $nextMonth }}">
- <i class="fa fa-angle-right" style="font-size: 24px;"></i>
- </a>
- </div>
- </div>
- </div>
-
<div class="wrapper spacing-top-large spacing-bottom-large">
- <div class="box spacing-bottom-large">
- <div class="section">
- <h3>Spendings by Tag</h3>
- <ul class="t st-3">
- @foreach ($spendingsByTag as $tag)
- <li class="row">
- <div class="column">
- {{ $tag->name }}
- </div>
- <div class="column tight sl-1">
- {{ $currency->symbol }} {{ $tag->spendings }}
- </div>
- </li>
- @endforeach
- </ul>
- </div>
- </div>
-
<div class="row gutter spacing-bottom-large">
<div class="column">
+ <div class="color-dark spacing-bottom-large">Recent Earnings</div>
<div class="box">
- <div class="section">
- <p class="spacing-bottom-small">@lang('general.earnings')</p>
- <h1>{{ $currency->symbol }} {{ $totalEarnings }}</h1>
- </div>
- </div>
- </div>
- <div class="column">
- <div class="box">
- <div class="section">
- <p class="spacing-bottom-small">@lang('general.spendings')</p>
- <h1>{{ $currency->symbol }} {{ $totalSpendings }}</h1>
- </div>
- </div>
- </div>
- <div class="column">
- <div class="box">
- <div class="section">
- <p class="spacing-bottom-small">@lang('general.balance')</p>
- <h1>{{ $currency->symbol }} {{ $balance }}</h1>
- </div>
- </div>
- </div>
- </div>
- <div class="box">
- <div class="section">
- <div class="row">
- <div class="column">
- <span class="color-dark">@lang('general.budgets')</span>
- </div>
- <div class="column align-middle text-align-right">
- <a href="/budgets/create">@lang('actions.create')</a>
- </div>
- </div>
- </div>
- @if ($budgets->count())
- <ul class="section">
- @foreach ($budgets as $budget)
+ @if (count($recentEarnings))
+ <ul class="box__section">
+ @foreach ($recentEarnings as $earning)
<li>
- <div class="row">
- <div class="column">{{ $budget->tag->name }}</div>
- <div class="column align-middle">
- <progress min="0" max="{{ $budget->amount }}" value="{{ $budget->spendings()->sum('amount') }}"></progress>
- </div>
- <div class="column text-align-right align-middle">{{ $currency->symbol }} {{ $budget->spendings()->sum('amount') }} @lang('general.of') {{ $currency->symbol }} {{ $budget->amount }}</div>
- </div>
- </li>
- @endforeach
- </ul>
- @else
- <div class="section">You don't have any budgets</div>
- @endif
- </div>
- <div class="row gutter spacing-top-large">
- <div class="column">
- <div class="box">
- <div class="section">
<div class="row">
<div class="column">
- <span class="color-dark">@lang('general.earnings')</span>
- </div>
- <div class="column align-middle text-align-right">
- <a href="/earnings/create">@lang('actions.create')</a>
- </div>
- </div>
- </div>
- @if ($earnings->count())
- <ul class="section">
- @foreach ($earnings as $earning)
- <li>
- <div class="row">
- <div class="column">
- <a href="/earnings/{{ $earning->id }}">{{ $earning->description }}</a>
- <p class="spacing-top-small">{{ date('jS', strtotime($earning->date)) }}</p>
- </div>
- <div class="column text-align-right align-middle">
- <h3>{{ $currency->symbol }} {{ $earning->amount }}</h3>
+ <div class="color-dark">{{ $earning->description }}</div>
+ <div style="margin-top: 10px;">{{ intval((time() - strtotime($earning->date)) / 86400) }} day(s) ago</div>
</div>
+ <div class="column text-align-right align-middle color-green">{{ $currency->symbol }} {{ $earning->amount }}</h3></div>
</div>
</li>
@endforeach
</ul>
@else
- <div class="section">You don't have any earnings</div>
+ <div class="box__section">You don't have any earnings</div>
@endif
+ <div class="box__section">
+ <a href="/earnings">Show More</a>
+ </div>
</div>
</div>
<div class="column">
+ <div class="color-dark spacing-bottom-large">Recent Spendings</div>
<div class="box">
- <div class="section">
- <div class="row">
- <div class="column">
- <span class="color-dark">@lang('general.spendings')</span>
- </div>
- <div class="column align-middle text-align-right">
- <a href="/spendings/create">@lang('actions.create')</a>
- </div>
- </div>
- </div>
- @if ($spendings->count())
- <div class="section">
- <BarChart slices='{!! json_encode($spendingsByTags) !!}'></BarChart>
- </div>
- <ul class="section">
- @foreach ($spendings as $spending)
+ @if (count($recentSpendings))
+ <ul class="box__section">
+ @foreach ($recentSpendings as $spending)
<li>
<div class="row">
<div class="column">
- <a href="/spendings/{{ $spending->id }}">{{ $spending->description }}</a>
- @if ($spending->tag)
- <p class="spacing-top-small">{{ $spending->tag->name }} &middot; {{ date('jS', strtotime($spending->date)) }}</p>
- @else
- <p class="spacing-top-small">{{ date('jS', strtotime($spending->date)) }}</p>
- @endif
- </div>
- <div class="column text-align-right align-middle">
- <h3>{{ $currency->symbol }} {{ $spending->amount }}</h3>
+ <div class="color-dark">{{ $spending->description }}</div>
+ <div style="margin-top: 10px;">{{ intval((time() - strtotime($spending->date)) / 86400) }} day(s) ago</div>
</div>
+ <div class="column text-align-right align-middle color-red">{{ $currency->symbol }} {{ $spending->amount }}</h3></div>
</div>
</li>
@endforeach
</ul>
@else
- <div class="section">You don't have any spendings</div>
+ <div class="box__section">You don't have any spendings</div>
@endif
+ <div class="box__section">
+ <a href="/spendings">Show More</a>
+ </div>
</div>
</div>
</div>

MODIFY
routes/web.php
routes/web.php
@@ -9,7 +9,7 @@ Route::get('/register', 'RegisterController@index')->name('register');
Route::post('/register', 'RegisterController@store');
Route::group(['middleware' => ['auth']], function () {
- Route::get('/dashboard/{year?}/{month?}', 'DashboardController@index')->name('dashboard');
+ Route::get('/dashboard', 'DashboardController@index')->name('dashboard');
Route::get('/search', 'SearchController@index')->name('search');

Refactor dashboard to show recent activity