Skip to main content

​
Overview

The Mileage Dashboard is all you need to provide full mileage tracking to your users, with a full user experience allowing your users to:
  • Add drives, with auto-complete start and end addresses, route calculation/visualization, and reverse geocoding
  • View drives/routes/addresses
  • Classify drive purpose (business vs. personal)
  • Define favorite locations
  • Assign drives to classes

​
Embedding the Mileage Dashboard

To initialize the Tight Embedded experience in your React project, follow the instructions on Embedding Tight’s white-labeled UI. Below is an example embedding of the Mileage Dashboard:
MileageDashboard.tsx
import { MileageDashboard, Tight } from "@tight-embedded/react";
import "@tight-embedded/react/index.css";

function MileageDash({ accessToken }) {
    return (
      <Tight environment="SANDBOX" accessToken={accessToken} >
        <MileageDashboard />
      </Tight>
    )
}

​
Props

​
filters
object
The set of filters to apply to the dashboard.Passing in a value for this prop turns this into a controlled component. As such, you must also pass the onChangeFilters prop to adjust the filters for user input.
​
onChangeFilters
function
A function that is called whenever the user changes the filters from the dashboard. This function will only be invoked if the filters prop is also provided. The callback takes filters as its single argument.
​
pageSize
number
default:25
The number of transactions to show on a single page of the dashboard.