> For the complete documentation index, see [llms.txt](https://developer.usemultiplier.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.usemultiplier.com/multiplier-embed-sdks/components/payroll/contractor-invoice.md).

# Contractor Invoice

The `ContractorInvoices` compound component lets partners embed a **contractor invoice list** experience. Partners control navigation through callbacks, with no router setup required.

{% hint style="info" %}
**Phase 1:** `ContractorInvoices.List` is available now. `ContractorInvoices.Details` is coming in a future release.
{% endhint %}

## Overview

`ContractorInvoices` currently exposes one sub-component:

| Component                    | Description                                                                                                           |
| ---------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| `ContractorInvoices.List`    | Displays the company contractor invoice list with tabs for Pending, Approved, Processing, Rejected, and Paid invoices |
| `ContractorInvoices.Details` | *(Coming soon — future phase)*                                                                                        |

## Prerequisites

The component must be rendered inside a `MultiplierGlobalConfigProvider`. See [Global Configuration](/multiplier-embed-sdks/installation-and-configuration.md#option-b-global-configuration) for setup instructions.

## `ContractorInvoices.List`

Renders the company contractor invoice list. The list includes tab-based filtering (Pending, Approved, Processing, Rejected, Paid), bulk selection, and approval actions — all handled internally.

### Basic Usage

```tsx
import { ContractorInvoices } from '@Multiplier-Core/partner-sdk-react';

function ContractorInvoicesPage() {
  return <ContractorInvoices.List />;
}
```

### Usage with Row Click Handler

```tsx
import { useState } from 'react';
import { ContractorInvoices } from '@Multiplier-Core/partner-sdk-react';

function ContractorInvoicesPage() {
  const [invoiceId, setInvoiceId] = useState<string | null>(null);

  const handleRowClick = (id: string) => {
    setInvoiceId(id);
    // Navigate to your details page when ContractorInvoices.Details ships
    // e.g. router.push(`/invoices/${id}`)
  };

  return <ContractorInvoices.List onRowClick={handleRowClick} />;
}
```

{% hint style="info" %}
Always store the `invoiceId` from the callback even before `ContractorInvoices.Details` is available. This means your list integration will need no changes when Details ships.
{% endhint %}

### Props

| Prop         | Type                          | Required | Description                                                                                                                |
| ------------ | ----------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------- |
| `onRowClick` | `(invoiceId: string) => void` | No       | Called when an invoice row is clicked. Use this to store the `invoiceId` in state, ready for `ContractorInvoices.Details`. |

## Preparing for `ContractorInvoices.Details`

When `ContractorInvoices.Details` ships, it will require an `invoiceId`. Store it today so you don't need to change your list integration later:

```tsx
import { useState } from 'react';
import { ContractorInvoices } from '@Multiplier-Core/partner-sdk-react';

function ContractorInvoicesPage() {
  const [invoiceId, setInvoiceId] = useState<string | null>(null);

  if (invoiceId) {
    // Replace this placeholder with ContractorInvoices.Details when it ships
    return (
      <div>
        <button onClick={() => setInvoiceId(null)}>← Back to list</button>
        <p>Invoice ID: {invoiceId}</p>
      </div>
    );
  }

  return (
    <ContractorInvoices.List
      onRowClick={(id) => setInvoiceId(id)}
    />
  );
}
```

## CSS Customization

The component exposes a stable CSS class hook for layout customization. This class carries no default styles — it is purely for targeting.

| Class                                       | Element                                   | Description                   |
| ------------------------------------------- | ----------------------------------------- | ----------------------------- |
| `.multiplier-sdk__contractor-invoices-list` | Root wrapper of `ContractorInvoices.List` | Wraps the entire invoice list |

### Example

```css
/* Give the list full page width */
.multiplier-sdk__contractor-invoices-list {
  width: 100%;
}

/* Add spacing inside a card layout */
.invoices-card .multiplier-sdk__contractor-invoices-list {
  padding: 16px;
}
```

## Notes

* **No router required.** The component works with any navigation strategy (React Router, Next.js, plain `useState`, etc.).
* **Context is managed internally.** The component handles its own selection state — you do not need to provide any context wrappers.
* The component automatically handles loading states, empty states, and error states internally.
* Invoice approval and bulk selection actions are available within the list and are handled by the component without any additional setup.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://developer.usemultiplier.com/multiplier-embed-sdks/components/payroll/contractor-invoice.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.