Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Emmanuel-Mtz-777/TechStore-Explorer/llms.txt

Use this file to discover all available pages before exploring further.

The admin-only dashboard at GET /dashboard gives store administrators a real-time overview of how customers are using their wishlists. All analytics are derived from the wishlists table and rendered as interactive charts using Chart.js via Vue Chart.js — no third-party analytics service required.

​
Access control

The dashboard is protected by three middleware layers: auth, verified, and admin. A user who is not authenticated is redirected to the login page; a logged-in but unverified user is sent to the email verification notice; and any authenticated, verified user without the admin role receives a 403 Forbidden response from AdminMiddleware. 
Route::get('/dashboard', [DashboardController::class, 'index'])
    ->middleware(['auth', 'verified', 'admin'])
    ->name('dashboard');

​
Analytics provided

The DashBoardController@index method runs four separate queries against the wishlists table and passes the results to the Blade view as a single $stats array.

Favorite Categories

Counts wishlist entries grouped by category_name and orders results descending by total. Rendered as a Pie chart in the Vue Dashboard component with up to six distinct colours.

Most Favorited Products

Top 5 products by wishlist count, grouped by product_name and ordered descending. Rendered as a Bar chart so relative popularity is easy to compare at a glance.

Average Product Price

Computes avg('product_price') across every row in the wishlists table and rounds to 2 decimal places. Displayed as a large stat card alongside active users.

Active Users

Counts User records that have at least one wishlist entry using whereHas('wishlists'). A user is considered “active” the moment they save their first product.

​
Controller query logic

public function index()
{
    $favoriteCategories = Wishlist::select(
            'category_name',
            DB::raw('count(*) as total')
        )
        ->groupBy('category_name')
        ->orderByDesc('total')
        ->get();

    $mostFavoriteProducts = Wishlist::select(
            'product_name',
            DB::raw('count(*) as total')
        )
        ->groupBy('product_name')
        ->orderByDesc('total')
        ->limit(5)
        ->get();

    $averagePrice = Wishlist::avg('product_price');

    $activeUsers = User::whereHas('wishlists')
        ->count();

    return view('dashboard', [
        'stats' => [
            'categories'   => $favoriteCategories,
            'products'     => $mostFavoriteProducts,
            'averagePrice' => round($averagePrice, 2),
            'activeUsers'  => $activeUsers,
        ]
    ]);
}

​
Tech stack

The dashboard is built with a thin hybrid approach: Laravel computes all data server-side and passes it to the Blade view, which bootstraps a Vue 3 component for the interactive charts.
LayerTechnologyRole
Data layerLaravel / Eloquent (DashBoardController)Aggregates wishlist data from the database
View layerLaravel Blade (dashboard.blade.php)Renders the page shell and passes $stats as a prop
Chart componentVue 3 (resources/js/components/Dashboard.vue)Receives stats as a prop, builds chart datasets
Charting libraryChart.js + vue-chartjsRenders <Pie> and <Bar> charts reactively
The Vue component registers ArcElement, BarElement, CategoryScale, LinearScale, Tooltip, and Legend from Chart.js and maps the Laravel-provided data directly to chart datasets: 
const categoryChart = {
    labels: props.stats.categories.map(item => item.category_name),
    datasets: [{
        label: 'Favoritos',
        data: props.stats.categories.map(item => item.total),
        backgroundColor: [
            '#ef4444', '#3b82f6', '#22c55e',
            '#eab308', '#a855f7', '#f97316'
        ]
    }]
}

const productChart = {
    labels: props.stats.products.map(item => item.product_name),
    datasets: [{
        label: 'Favoritos',
        data: props.stats.products.map(item => item.total),
        backgroundColor: '#3b82f6'
    }]
}
All dashboard analytics aggregate data across every user’s wishlist — this is a store-wide view, not a per-user report. Individual user wishlist data is not segmented or filtered on the dashboard.

Build docs developers (and LLMs) love

Get started for freeTalk to us