Courses

Vue Laravel 12 Starter Kit: CRUD Project

Dashboard Widgets: Charts and Tables

You're reading a FREE PREVIEW of a PREMIUM course.
Login Or Join Premium ($129/year or $29/mo)
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

Link to the repository

[Only for premium members]

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 text lessons of this course? (82 min read)

You also get:

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