Dashboard Customization

We use Filament Panel Builder to create and customize the dashboard. To adjust widget width, grid layout, sorting, or to create new widgets, please refer to the official Filament guide for Dashboard Customization.

Connect Real-Time Data to Your Dashboard widgets 📊

In JetShip dashboard, we've provided all the essential visuals to track your SaaS key metrics. These visuals use mock data, but with a few simple steps, you can connect them to live data from either Lemon Squeezy or Stripe APIs. This guide will walk you through how to connect Monthly Recurring Revenue (MRR) from the Lemon Squeezy API and make your dashboard dynamic and real-time.

Step-by-Step: Fetching Real-Time Data with the Lemon Squeezy API

The following example shows how to fetch real-time MRR data from the Lemon Squeezy API and display it in the dashboard. We use the Http facade in Laravel to make API requests and update the widget with live data.

Modified Widget Code for Fetching MRR from Lemon Squeezy

Here is a detailed breakdown of the code and how to set up real-time data fetching:

<?php

namespace App\Filament\Widgets;

use Filament\Widgets\Widget;
use Illuminate\Contracts\View\View;
use Illuminate\Support\Facades\Http;

class UserEngagementStats extends Widget
{
    // Setting the display order for the widget
    protected static ?int $sort = 1;
    
    // Defining the widget span (full width in this case)
    protected int | string | array $columnSpan = 'full';

    /**
     * Fetch customers from Lemon Squeezy API
     */
    protected function fetchCustomers()
    {
        // Make a GET request to Lemon Squeezy API to retrieve customer data
        $response = Http::withHeaders([
            'Accept' => 'application/vnd.api+json',
            'Content-Type' => 'application/vnd.api+json',
            'Authorization' => 'Bearer ' . env('LEMON_SQUEEZY_API_KEY'), // Use your Lemon Squeezy API key
        ])->get('https://api.lemonsqueezy.com/v1/customers');

        // Parse the JSON response to get customer data
        $customers = $response->json()['data'];

        return $customers;
    }

    /**
     * Fetch Monthly Recurring Revenue (MRR)
     */
    protected function fetchMrr(): ?string
    {
        // Fetch customers from the Lemon Squeezy API
        $customers = $this->fetchCustomers();

        // Initialize MRR to zero
        $mrr = 0;

        // Loop through each customer to calculate MRR
        foreach ($customers as $customer) {
            $mrr += $customer['attributes']['mrr']; // Assuming 'mrr' attribute exists
        }

        // Return MRR divided by 100 to get a readable format (dollars)
        return $mrr / 100;
    }

    /**
     * Get data for the user engagement stats widget
     */
    public function getUserEngagementData(): array
    {
        return [
            [
                'title' => 'Monthly Active Users',
                'value' => '12.5k',
                'color' => 'primary',
                'widgetIcon' => 'tabler-users',
                'difference' => '15.4%',
                'differenceIcon' => 'tabler-trending-up',
                'differenceTime' => 'vs prev. month',
                'differenceTextColor' => 'success'
            ],
            [
                'title' => 'Customer Churn Rate',
                'value' => '2.8%', // Static mock data (can be fetched from API)
                'color' => 'primary',
                'widgetIcon' => 'tabler-chart-bar',
                'difference' => '-1.2%',
                'differenceIcon' => 'tabler-trending-down',
                'differenceTime' => 'vs prev. month',
                'differenceTextColor' => 'success'
            ],
            [
                'title' => 'Monthly Recurring Revenue (MRR)',
                'value' => '$' . $this->fetchMrr(), // Real-time MRR data
                'color' => 'primary',
                'widgetIcon' => 'tabler-receipt',
                'difference' => '12.7%',
                'differenceIcon' => 'tabler-trending-up',
                'differenceTime' => 'vs prev. month',
                'differenceTextColor' => 'success'
            ]
        ];
    }

    /**
     * Render the widget view
     */
    public function render(): View
    {
        return view('filament.widgets.user-engagement-stats'); // View rendering the widget
    }
}

How It Works

1. fetchCustomers(): This function makes an API request to the Lemon Squeezy API to retrieve a list of customers. It sends a GET request to https://api.lemonsqueezy.com/v1/customers using your Lemon Squeezy API key.

2. fetchMrr(): This function calculates the total MRR (Monthly Recurring Revenue) by iterating through the list of customers retrieved from the API. It sums up the mrr attribute for each customer and returns the total in a readable format.

Connecting Other Visuals 📈

To make your entire dashboard interactive with live data, follow a similar approach for other metrics as well.

Each chart & visual in your dashboard can be dynamically populated using API data. Simply modify the fetching functions to call the appropriate API endpoints for the data you want to display (e.g., active users, revenue, churn rate).

By integrating the Lemon Squeezy or Stripe API with your JetShip dashboard, you can monitor real-time insights, making your platform more valuable and interactive. 🎉

INFO

If you’re using Stripe instead of Lemon Squeezy, you can adjust the API endpoints accordingly. You’ll need to refer to Stripe’s API documentation to fetch key data such as transactions, customer count, and recurring revenue.

For Stripe API reference, visit the Stripe API Docs.

For LemonSqueezy API reference, visit the LemonSqueezy API Docs.

Feel free to visit these links when you need specific API details for your integration! 🚀