Skip to main content

​
Overview

The Tight Dashboard is all you need to provide full financials to your users, including:
  • Onboarding-related action items like linking bank accounts and credit cards
  • Monthly financial summaries
  • As-needed action items whenever the business owner’s attention is needed (e.g. the purpose of a bank transaction is unknown)
  • Access to financial reporting (e.g. Profit & Loss, Balance Sheet, etc.) Tight Dashboard Demo

​
Embedding the Tight 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 Business Owner Dashboard:
HomeDashboard.tsx
import { BusinessOwnerDashboard, Tight } from "@tight-embedded/react";
import "@tight-embedded/react/index.css";

function HomeDashboard({ accessToken }) {
    return (
      <Tight environment="SANDBOX" accessToken={accessToken} >
        <BusinessOwnerDashboard />
      </Tight>
    )
}

​
Props

​
period
object
optional
The time of year for which to show a financial summary, in terms of month and year. If not provided, the period defaults to the current month and year, though the user may navigate between months from the dashboard.Passing in a value for this prop turns this into a controlled component. As such, you must also pass the onChangePeriod prop to set the new value in the parent component.
​
onChangePeriod
function
optional
A function that is called whenever the user changes the viewed financial period from the dashboard. This function will only be invoked if the period prop is also provided. The callback takes period as its single argument.