Item Components

Available Components

Component	Description
ItemListTable	Paginated item list
ItemForm	Create/edit item
ItemSelect	Dropdown for selecting items
ItemCard	Display item as card

ItemListTable

Display a searchable catalog:

Item Listtypescript

Copy

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

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

  return (
    id}
      onRowClick={(item) => {
        navigate(`/items/${item.id}`);
      }}
      onCreateClick={() => navigate("/items/new")}
    />
  );
}

Props

Prop	Type	Description
entityId	string	Entity ID
onRowClick	(item) => void	Row click handler
onCreateClick	() => void	Create button handler

ItemForm

Create or edit items:

Item Formtypescript

Copy

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

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

  return (
    id}
      onSuccess={(item) => {
        toast.success("Item created");
        navigate(`/items/${item.id}`);
      }}
      onCancel={() => navigate("/items")}
    />
  );
}

Props

Prop	Type	Description
entityId	string	Entity ID (for create)
itemId	string	Item ID (for edit)
onSuccess	(item) => void	Success callback
onCancel	() => void	Cancel callback

ItemSelect

Select items when creating invoices:

Item Selecttypescript

Copy

import { ItemSelect } from "@/components/space-invoices/items";

function _InvoiceLineItem({ index }) {
  const { setValue, watch } = useFormContext();
  const selectedItemId = watch(`items.${index}.itemId`);

  return (
    id}
      value={selectedItemId}
      onChange={(item) => {
        // Auto-fill fields from selected item
        setValue(`items.${index}.name`, item.name);
        setValue(`items.${index}.price`, item.price);
        setValue(`items.${index}.unit`, item.unit);
      }}
      placeholder="Select an item or type custom..."
    />
  );
}

Props

Prop	Type	Description
entityId	string	Entity ID
value	string	Selected item ID
onChange	(item) => void	Returns full item object
multiple	boolean	Allow multiple selection

Next Steps

• Payments — Payment components
• Invoices — Use items in invoices