Courses

Vue Laravel 12 Starter Kit: CRUD Project

Dashboard Widgets: Charts and Tables

Summary of this lesson:
- Modifying database seeding for better test data
- Building Controller methods for dashboard data
- Implementing Shadcn Vue chart components for data visualization

In this lesson, let's change our dashboard to something more interesting than static placeholders.

Typically, we have charts and numbers on the dashboard of such projects. So, we can calculate something like these:

  • Tasks completed vs in progress
  • Tasks due today
  • Tasks created this week, grouped by day

Let's show them all on the dashboard.


Change Factory and Re-Seed Data

To have some data to show, we need to randomize a few things and seed more tasks.

database/factories/TaskFactory.php:

return [
'name' => fake()->name(),
'is_completed' => fake()->boolean(),
'due_date' => fake()->dateTimeBetween('now', '+1 month'),
'created_at' => fake()->dateTimeBetween(now()->startOfWeek(), now()->endOfWeek()),
];

The full lesson is only for Premium Members.
Want to access all 14 lessons of this course? (82 min read)

You also get:

  • 73 courses
  • Premium tutorials
  • Access to repositories
  • Private Discord