Dashboard com Laravel 12, Breeze e Fortify – Parte 7

Após concluirmos a funcionalidade completa de filtragem, ordenação, busca e paginação no CRUD de tarefas, nesta etapa vamos criar um dashboard simples e funcional para exibir um resumo dos dados registrados. A ideia aqui é apresentar algumas métricas úteis, como:

• Total de tarefas cadastradas
• Quantidade de tarefas concluídas
• Tarefas pendentes
• Última tarefa criada

Essa visualização ajuda o usuário a ter uma noção geral da aplicação logo após o login.

1. Objetivo desta Etapa

Nosso objetivo com esta etapa é criar uma tela inicial mais informativa do que apenas uma saudação padrão, transformando o /dashboard em um painel com contadores e pequenos resumos sobre o banco de dados de tarefas.

Lembrando que o foco deste projeto é didático, por isso o dashboard será simples. Há diversas melhorias visuais e funcionais que poderiam ser implementadas com bibliotecas JS ou componentes de UI, mas isso foge do escopo atual.

---

2. Criando o Controller para o Dashboard

Vamos começar criando um novo controller chamado DashboardController para centralizar a lógica do painel.

php artisan make:controller DashboardController

Em seguida, abra o arquivo recém-criado em app/Http/Controllers/DashboardController.php e adicione o seguinte conteúdo:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Task;
use Illuminate\Support\Facades\Auth; // Filtrar por usuário logado

class DashboardController extends Controller
{
    public function index()
    {
        // Filtrar tarefas pelo usuário logado para o dashboard
        $userTasks = Task::where('user_id', Auth::id());

        return view('dashboard', [
            'totalTasks'       => $userTasks->count(),
            'completedTasks'   => $userTasks->where('is_completed', true)->count(),
            'pendingTasks'     => $userTasks->where('is_completed', false)->count(),
            'latestTask'       => Task::where('user_id', Auth::id())->latest()->first(),
        ]);
    }
}

---

3. Atualizando a Rota do Dashboard

Agora que temos o controller pronto, precisamos ajustar a rota do /dashboard no arquivo routes/web.php, que atualmente aponta para uma view simples.

Substitua a rota antiga:

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');

Pelo seguinte código:

// ... outras uses no topo do arquivo ...
use App\Http\Controllers\DashboardController; // Adicionar esta linha

Route::get('/', function () {
    return view('welcome');
});

Route::get('/dashboard', [DashboardController::class, 'index']) // Rota do dashboard atualizada
    ->middleware(['auth', 'verified'])
    ->name('dashboard');

// ... suas outras rotas existentes (ex: rotas de profile, tasks, etc.) ...

require __DIR__.'/auth.php';

---

4. Criando a View do Dashboard

Vamos agora editar a view resources/views/dashboard.blade.php para apresentar os dados de forma organizada.

Aqui está um exemplo funcional:

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    {{ __("You're logged in!") }}
                </div>
            </div>
        </div>
    </div>

    <div class="py-6">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="bg-white shadow rounded p-6">
                    <p class="text-gray-600">{{ __('Total Tasks') }}</p>
                    <p class="text-2xl font-bold">{{ $totalTasks }}</p>
                </div>
                <div class="bg-white shadow rounded p-6">
                    <p class="text-gray-600">{{ __('Completed') }}</p>
                    <p class="text-2xl font-bold">{{ $completedTasks }}</p>
                </div>
                <div class="bg-white shadow rounded p-6">
                    <p class="text-gray-600">{{ __('Pending') }}</p>
                    <p class="text-2xl font-bold">{{ $pendingTasks }}</p>
                </div>
                <div class="bg-white shadow rounded p-6">
                    <p class="text-gray-600">{{ __('Latest Task') }}</p>
                    @if($latestTask)
                        <p class="text-sm text-gray-800">{{ $latestTask->title }}</p>
                        <p class="text-xs text-gray-500">{{ $latestTask->created_at->format('d/m/Y H:i') }}</p>
                    @else
                        <p class="text-sm text-gray-500">{{ __('No task yet') }}</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

</x-app-layout>

Esse layout é responsivo e aproveita os recursos do Tailwind CSS e dos componentes Blade do Breeze. Ele mostrará os resumos de forma clara e profissional.

---

Conclusão

Com essa implementação, o sistema agora oferece uma visão geral das tarefas logo após o login. O painel de controle é um excelente ponto de partida para qualquer aplicação, pois permite ao usuário visualizar informações importantes de forma rápida.

Embora o dashboard seja simples, ele já entrega um valor real ao usuário. Em um projeto real, poderíamos estender com gráficos, listagens dinâmicas e filtros personalizados — mas essas melhorias visuais fogem do escopo deste artigo, que tem fins educativos.

🔗 Leitura recomendada: CRUD com Laravel 12, Breeze e Fortify – Parte 6.