Customer Components

Available Components

Component	Description
CustomerListTable	Paginated customer list
CustomerForm	Create/edit customer
CustomerView	Display customer details
CustomerSelect	Dropdown for selecting customers

CustomerListTable

Display a searchable list of customers:

Customer Listtypescript

Copy

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

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

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

Props

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

CustomerForm

Create or edit customers:

Customer Formtypescript

Copy

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

// Create new customer
function _NewCustomerPage() {
  const { activeEntity } = useEntities();

  return (
    id}
      onSuccess={(customer) => {
        toast.success("Customer created");
        navigate(`/customers/${customer.id}`);
      }}
      onCancel={() => navigate("/customers")}
    />
  );
}

// Edit existing customer
function _EditCustomerPage({ customerId }) {
  return (
     {
        toast.success("Customer updated");
        navigate(`/customers/${customerId}`);
      }}
      onCancel={() => navigate(`/customers/${customerId}`)}
    />
  );
}

Props

Prop	Type	Description
entityId	string	Entity ID (for create)
customerId	string	Customer ID (for edit)
onSuccess	(customer) => void	Success callback
onCancel	() => void	Cancel callback

CustomerSelect

Dropdown for selecting a customer:

Customer Selecttypescript

Copy

import { CustomerSelect } from "@/components/space-invoices/customers";

function _InvoiceForm() {
  const [customerId, setCustomerId] = useState();

  return (
    id}
      value={customerId}
      onChange={setCustomerId}
      placeholder="Select a customer..."
    />
  );
}

Props

Prop	Type	Description
entityId	string	Entity ID
value	string	Selected customer ID
onChange	(customerId) => void	Change handler
placeholder	string	Placeholder text

CustomerView

Display customer details:

Customer Viewtypescript

Copy

import { CustomerView } from "@/components/space-invoices/customers";

function _CustomerDetailPage({ customerId }) {
  return (
     navigate(`/customers/${customerId}/edit`)}
      onCreateInvoice={() => {
        navigate(`/invoices/new?customerId=${customerId}`);
      }}
    />
  );
}

Next Steps

• Items — Product/service components
• Invoices — Invoice components