Dashboard Customization

We utilize Shadcn UI for creating and customizing the dashboard charts. To adjust widget width, grid layout, sorting, or to create new widgets, refer to the official Shadcn UI guide for Charts Customization.

---

📊 Connect Real-Time Data

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.

💻 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:

// Components Imports
import CardStats from './CardStats'

const fetchCustomers = async () => {
  return await fetch('https://api.lemonsqueezy.com/v1/customers', {
    method: 'GET',
    headers: {
      Accept: 'application/vnd.api+json',
      'Content-Type': 'application/vnd.api+json',
      Authorization: `Bearer ${process.env.LEMON_SQUEEZY_API_KEY}`
    }
  })
    .then(res => res.json())
    .then(json => json.data)
}

const fetchMrr = async () => {
  const customersData = await fetchCustomers()

  let mrr = 0

  customersData.forEach((customer: any) => {
    mrr += customer.attributes.mrr
  })

  return mrr / 100
}

const AdminPage = async () => {
  // Vars
  const mrr = await fetchMrr()

  const data = [
    ...
    {
      title: 'Monthly Recurring Revenue (MRR)',
      stats: `$${(mrr / 1000).toFixed(2)}k`,
      percentage: ...,
      icon: ...
    }
  ]

  return (
    <div className='...'>
      {data.slice(0, 3).map((item, index) => {
        return <CardStats key={index} data={item} className='...' />
      })}
    </div>
  )
}

export default AdminPage

💡 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! 🚀