Invoices List

Purpose

Accounts receivable invoice list with status filters.

Route

/invoices

Stack

  • Framework: Next.js (App Router)
  • Styling: Tailwind CSS
  • Components: shadcn/ui (new-york style)
  • API: Crane Ledger REST API via Authorization: Bearer <API_KEY>

API Integration

ActionMethodEndpoint
GET/organizations/{org_id}/invoices

Request Example

const API_BASE_URL = process.env.NEXT_PUBLIC_CRANE_API_URL ?? 'https://api.craneledger.ai';

const res = await fetch(`${API_BASE_URL}/organizations/${orgId}/...`, {
  headers: { Authorization: `Bearer ${apiKey}` },
});
const data = await res.json();

UI Components (shadcn/ui)

Use: DataTable, Badge, Button

Layout Wireframe

Build a standard accounting screen: page header with title and primary action button, optional filter bar, main content area (table or form), and action modals for create/edit flows.

Reference implementation: themes/railway/small-business-theme/src/components/invoices/Invoices.tsx

States

  • Loading: Skeleton rows or spinner
  • Empty: Illustration + CTA ("Create your first ...")
  • Error: Alert with retry action
  • Success: Toast confirmation

Accessibility

  • All form fields have associated <Label> elements
  • Tables use semantic markup or accessible DataTable
  • Modals trap focus and close on Escape
  • Status indicators include aria-label

Implementation Notes

  • Use org-scoped routes: /organizations/{org_id}/...
  • Pagination: ?limit=50&offset=0 per Pagination docs
  • Error handling per Errors docs

Need help?

Create a free account to access our support portal. Once signed in, use the Support tab in your dashboard to submit a support ticket — our team typically responds within 24 hours.