Invoice Components

Available Components

Component	Description
`InvoiceListTable`	Paginated invoice list with filters
`CreateInvoiceForm`	Multi-step invoice creation

InvoiceListTable

Display a paginated list of invoices:

Invoice Listtypescript

import { InvoiceListTable } from "@/components/space-invoices/invoices";
import { useEntities } from "@/providers/entities-provider";

function _InvoicesPage() {
  const { activeEntity } = useEntities();

  return (
    id}
      onRowClick={(invoice) => {
        navigate(`/invoices/${invoice.id}`);
      }}
    />
  );
}

Props

Prop	Type	Description
`entityId`	`string`	Entity ID to fetch invoices for
`onRowClick`	`(invoice) => void`	Callback when row is clicked
`filters`	`InvoiceFilters`	Initial filter values

CreateInvoiceForm

Create new invoices with customer and item selection:

Create Invoicetypescript

import { CreateInvoiceForm } from "@/components/space-invoices/invoices";
import { useEntities } from "@/providers/entities-provider";

function _NewInvoicePage() {
  const { activeEntity } = useEntities();

  return (
    id}
      onSuccess={(invoice) => {
        toast.success(`Invoice ${invoice.number} created`);
        navigate(`/invoices/${invoice.id}`);
      }}
      onCancel={() => navigate("/invoices")}
    />
  );
}

Props

Prop	Type	Description
`entityId`	`string`	Entity ID
`onSuccess`	`(invoice) => void`	Called after creation
`onCancel`	`() => void`	Called when cancelled
`defaultValues`	`Partial<Invoice>`	Pre-fill values

Composing Detail And Edit Screens

The current installable invoice kit is centered on:

InvoiceListTable for browsing
CreateInvoiceForm for create and edit flows

For invoice detail pages, most teams compose their own screen around SDK data plus copied document components and route-specific actions. That keeps the page flexible for branding, fiscalization, custom actions, and surrounding layout.

Customization Example

Modify the invoice form to add a custom field:

// In your copied CreateInvoiceForm component
<FormField
  control={form.control}
  name="customField"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Internal Reference</FormLabel>
      <FormControl>
        <Input {...field} />
      </FormControl>
    </FormItem>
  )}
/>

Next Steps

Customers — Customer components
Items — Item components
Customization — Deep customization