Dashboard

The default Textstem dashboard if fairly simple - it has a few widgets. In most cases, you will want to customise the dashboard for your site - to show latest sales, event visits and so on. The simplest way to do this is create a new blade component called "Dashboard" and include a grid of 'dashboard widgets' like this:

<x-slot name="header">
    <h1 class="h1">
        Welcome to Textstem
    </h1>
</x-slot>

<div class="container-wrapper min-h-[50vh] ">
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
            <livewire:textstem::dashboard-widgets.welcome span="1" />
            <livewire:textstem::dashboard-widgets.site-overview span="1" />
            <livewire:dashboard-widgets.site-sales-summary span="2"  />
            <livewire:dashboard-widgets.site-traffic-summary span="4"  />
        </div>
</div>

Dashboard Widgets are Livewire components.

<?php

namespace App\Livewire\DashboardWidgets;
use Medialight\Textstem\Livewire\DashboardWidget;

use Spatie\Analytics\Facades\Analytics;
use Spatie\Analytics\Period;

class TopPageViews  extends DashboardWidget
{
    public function render()
    {
        $period = 7;
        $analyticsData = Analytics::fetchMostVisitedPages(Period::days($period), 20);
        return view('livewire.dashboard-widgets.top-page-views', [
            'period' =>$period,
            'data' => $analyticsData,
        ]);
    }
}

The blade file can use the x-widget component:

<x-widget refreshIntervalInSeconds="300" span="2" title="Top Pages (Past {{$period}} days}">
    <div>
        <table class="datatable  text-xs ">
            <tbody class="block w-full overflow-y-auto" style="height:300px">
            @foreach($data as $item)
                <tr class="w-full">
                    <td class="w-full">
                        <a href="https://{{$item['fullPageUrl'] ??'#'}}"
                           target="_blank">{{ !empty($item['pageTitle']) ? $item['pageTitle'] : '--' }}</a>
                    </td>
                    <td>
                        {{ !empty($item['screenPageViews']) ? $item['screenPageViews'] : '--' }}
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
    <div wire:loading class="absolute bottom-4 right-4 h-4 w-4">
        <x-ts::spinner/>
    </div>
</x-widget>