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

# Aged Accounts Receivable (A/R) Report

> Track and manage your outstanding customer invoices

## Overview

The Aged AR Report shows outstanding invoice totals, grouped on how many days they have been outstanding for, on a per-customer basis. This interactive report provides insight to the business owner-operator regarding how much money they are owed and what cash flow to realistically expect in the near future.

This interactive report can be drilled down into to see all of the individual invoices that are outstanding.

## Embedding the interactive Aged AR Report

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 Aged AR Report:

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

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

## Props

<ParamField body={"filters"}>
  <Expandable title={"filters"}>
    <ParamField body={"dimensionValues"}>
      Dimension value filter

      <Expandable title={"child attributes"}>
        <ParamField body={"id"} type={"object"}>
          Id filter - returns all entities with the following attachments.

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

    <ParamField body={"dateRange"} type={"object"} post={["optional"]}>
      The date range for which to show the report.

      Passing in a value for this prop turns this into a controlled component. As such, you must also pass the
      `onChangeDateRange` prop to set the new value in the parent component.

      <Expandable title={"fields"}>
        <ParamField body={"start"} type={"string"}>
          The beginning of the range, inclusive.
        </ParamField>

        <ParamField body={"end"} type={"string"}>
          The end of the range, inclusive.
        </ParamField>
      </Expandable>
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body={"daysOverdue"} type={"string"} post={["optional"]}>
  The number of due days for this report

  Available options: `ZERO_DAYS_AND_UP`, `THIRTY_ONE_DAYS_AND_UP`, `SIXTY_ONE_DAYS_AND_UP`, `NINETY_DAYS_AND_UP`
</ParamField>

<ParamField body={"onChangeDaysOverdue"} type={"function"} post={["optional"]}>
  A function that is called whenever the user changes the days overdue from the dashboard.
  This function will only be invoked if the `daysOverdue` prop is also provided. The callback takes a `daysOverdue` as its single
  argument.
</ParamField>

<ParamField body={"onChangeFilters"} type={"function"} post={["optional"]}>
  A function that is called whenever the user changes the filters from the report.
  This function will only be invoked if the `filters` prop is also provided. The callback takes `filters` as its single
  argument.
</ParamField>
