Skip to main content

​
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. Below is an example embedding of the Invoice Dashboard:
InvoiceDashboard.tsx
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

​
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 Transactions Dashboard.