Skip to main content
Customers lists and manages accounts-receivable customer records with search, customer-type, and active/inactive filters. Route: /fa/customers

​
Overview

The route /fa/customers redirects to /fa/receivables?tab=customers in the router. The CustomersPage component fetches customers via useCustomerList(organizationId, { search, type, isActive }). Filters: text search, CustomerType dropdown (from fa_customer_type enum), and active/inactive toggle (default: active). The New Customer button and the edit action per row open CustomerDialog. Delete calls useDeleteCustomer.

​
Who it’s for

Access follows your organization’s role and module configuration.

​
Before you start

  • The current organization must be set.
  • Customer type definitions come from the fa_customer_type database enum.
  • Navigate to the Receivables Hub at /fa/receivables?tab=customers to access customer management.

​
Steps

1

Navigate to Customers

Go to /fa/customers or the Customers tab in the Receivables hub.
2

Search and filter

Enter a search term, select a customer type, and toggle between active and inactive customers.
3

Create a customer

Click New Customer to open CustomerDialog with a blank form.
4

Edit a customer

Click the edit action on a row to open CustomerDialog pre-populated.
5

Delete a customer

Click delete on a row to call useDeleteCustomer.
6

View customer detail

Click a customer name to navigate to /fa/customers/:id.

​
Key concepts

  • useCustomerList — Primary list hook; accepts organizationId and { search, type, isActive }.
  • CustomerType — From fa_customer_type database enum.
  • useDeleteCustomer — Mutation hook for customer deletion.
  • CustomerDialog — Create/edit dialog for customer records.

​
Viewing a customer

The detail view at /fa/customers/:id shows all information for a single customer record including associated invoices, payments, credit memos, and an edit action. The page loads the customer via useCustomer(id, currentOrganization?.id). Related data is fetched in parallel: invoices via useInvoiceList (filtered by customerId), payments via useCustomerPayments, and credit memos via useCreditMemoList. The breadcrumb shows customer_name. A tabbed interface displays: Invoices (InvoicesTable), Payments (CustomerPaymentsTable), and Credit Memos (CreditMemosTable). Invoice actions include send (useSendInvoice), void (useVoidInvoice), and delete (useDeleteInvoice). The edit button opens CustomerDialog. Key concepts:
  • useCustomer — Primary data hook; fetches a single customer by id and organizationId.
  • InvoicesTable — Component rendering the customer’s invoice list.
  • CustomerPaymentsTable — Component rendering payment history.
  • CreditMemosTable — Component rendering credit memos filtered by customer.
  • CustomerDialog — Edit dialog for customer record fields.
Customer detail fields visible on CustomerDetailPage: customer_name, customer_number, billing_address_line1, billing_address_line2, billing_city, billing_state, billing_postal_code.
  1. Go to /fa/customers/:id or click a customer row from the Customers list.
  2. Review the header section showing customer name and key attributes.
  3. Review the Invoices tab for all customer invoices with send, void, and delete actions.
  4. Review the Payments tab for customer payment history via CustomerPaymentsTable.
  5. Review the Credit Memos tab for applicable credit memos via CreditMemosTable.
  6. Click Edit to open CustomerDialog and update the customer record.

​
Creating a customer

New customer creation is accessible via the Receivables Hub. The /fa/customers route redirects to /fa/receivables?tab=customers. Customer creation is handled via CustomerDialog within that tab.
SME: The creation interface within ReceivablesHubPage is not fully observable from the CustomerDetailPage component. Confirm the creation flow with the implementation team.
  1. Navigate to /fa/receivables?tab=customers.
  2. Use the Receivables Hub interface to create a new customer.

Finance & Revenue

Finance & Revenue core overview.

Governance & parity

This page documents shipped product behavior. It is not medical, legal, or billing advice. Verify against your organization’s policies and applicable regulations before using it for clinical, compliance, or billing decisions. Protected health information (PHI) shown in the product is governed by your tenant’s access controls and is never exposed in this documentation.
  • src/routes/fa.tsx
  • src/cores/fa/pages/CustomersPage.tsx
  • src/cores/fa/pages/CustomerDetailPage.tsx
  • src/cores/fa/pages/ReceivablesHubPage.tsx
  • src/cores/fa/hooks/useCustomers.ts
  • src/cores/fa/hooks/useInvoices.ts
  • src/cores/fa/hooks/useCustomerPayments.ts
  • src/cores/fa/hooks/useCreditMemos.ts
  • src/cores/fa/components/CustomersTable.tsx
  • src/cores/fa/components/CustomerDialog.tsx
  • src/integrations/supabase/types.ts