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

# Invoice Dashboard

> The fully-featured experience for viewing and managing invoices (A/R)

## Overview

The Invoice Dashboard is all you need to provide full invoicing to your users, with a full user experience allowing your users to:

* Create invoices with auto-complete line items, including:
  * Reimbursement for expenses (including mark-ups)
  * Ability to bill for time tracked
  * Manual line item creation
  * Sales tax line items
* Invoice template customization to match your user's business's branding, including:
  * Custom logo upload
  * Custom brand colors using color wheel or hex code
  * Ability to set business address and sender
* See status of invoices, including when the customer last viewed the invoice
* Generate Aged AR reporting

## Embedding the Invoice 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 Invoice Dashboard:

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

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

## Props

<ParamField body={"filters"} type={"object"} post={["optional"]}>
  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.

  <Expandable title={"filters"}>
    <ParamField body={"date"}>
      <Expandable title={"child attributes"}>
        <ParamField body={"equal"} type={"string"}>
          Value - returns all records with specified field equal to this value.
        </ParamField>

        <ParamField body={"notEqual"} type={"string"}>
          Value - returns all records with specified field not equal to this value.
        </ParamField>

        <ParamField body={"greaterThan"} type={"string"}>
          Value - returns all records with specified field greater than to this value.
        </ParamField>

        <ParamField body={"greaterThanEqual"} type={"string"}>
          Value - returns all records with specified field greater than or equal to this value.
        </ParamField>

        <ParamField body={"lessThan"} type={"string"}>
          Value - returns all records with specified field less than to this value.
        </ParamField>

        <ParamField body={"lessThanEqual"} type={"string"}>
          Value - returns all records with specified field less than or equal to this value.
        </ParamField>
      </Expandable>
    </ParamField>

    <ParamField body={"status"}>
      Type filter

      <Expandable title={"child attributes"}>
        <ParamField body={"in"} type={"string[]"}>
          List of values to include.

          Available options: `DRAFT`,
          `OPEN`,
          `CLOSED`,
          `CANCELED`,
          `REFUNDED`
        </ParamField>

        <ParamField body={"notIn"} type={"string[]"}>
          List of values to exclude.

          Available options: `DRAFT`,
          `OPEN`,
          `CLOSED`,
          `CANCELED`,
          `REFUNDED`
        </ParamField>
      </Expandable>
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body={"onChangeFilters"} type={"function"} post={["optional"]}>
  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.
</ParamField>

<ParamField body={"pageSize"} type={"number"} default={25} post={["max: 250", "optional"]}>
  The number of transactions to show on a single page of the Invoice Dashboard.
</ParamField>