> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tight.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tight Dashboard

> All agentic accounting functionality in one place for the business owner

## 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.)

<img src="https://mintcdn.com/tight-7c882d74/vy9R1TCSlmf1xFdD/embeddable-ui/gifs/financialOverview/tightFinancialOverview.gif?s=7e0fb06263bb702d39a401dbf2f9dcee" alt="Tight Dashboard Demo" width="1067" height="600" data-path="embeddable-ui/gifs/financialOverview/tightFinancialOverview.gif" />

<img src="https://mintcdn.com/tight-7c882d74/vy9R1TCSlmf1xFdD/embeddable-ui/gifs/financialOverview/tightMobileFinancialOverview.gif?s=be06c1028c17d4f271897d1909666cad" alt="Mobile Tight Dashboard Demo" width="277" height="600" data-path="embeddable-ui/gifs/financialOverview/tightMobileFinancialOverview.gif" />

## Embedding the Tight Dashboard

To initialize the Tight Embedded experience in your React project, follow the instructions on [Embedding Tight's white-labeled UI](/embeddable-ui/react/patterns/embedding).

Below is an example embedding of the Financial Overview:

```TSX HomeDashboard.tsx theme={null}
import { FinancialOverview, Tight } from "@tight-embedded/react";
import "@tight-embedded/react/index.css";

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

## Props

<ResponseField name={"period"} type={"object"} post={["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.

  <Expandable title={"fields"}>
    <ResponseField name={"month"} type={"number"}>
      The month of the year for the displayed financial period. Must be a number between 0 and 11, where 0 is January
      and 11 is December.
    </ResponseField>

    <ResponseField name={"year"} type={"number"}>
      The year for the displayed financial period.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name={"onChangePeriod"} type={"function"} post={["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.

  <Expandable title={"parameters"}>
    <ResponseField name={"period"} type={"object"}>
      The new financial period

      <Expandable title={"fields"}>
        <ResponseField name={"month"} type={"number"}>
          The month of the year for the displayed financial period. Must be a number between 0 and 11, where 0 is January
          and 11 is December.
        </ResponseField>

        <ResponseField name={"year"} type={"number"}>
          The year for the displayed financial period.
        </ResponseField>
      </Expandable>
    </ResponseField>
  </Expandable>
</ResponseField>