Shaping a Section

Let's define the scope and requirements for Invoice Management.

Do you have any notes or ideas about what this section should include?
Share any thoughts about the features, user flows, or UI patterns you're
envisioning. If you're not sure yet, we can start with questions.

Should this section's screen designs be displayed inside the app shell
(with navigation header), or should they be standalone pages (without the shell)?

# Invoice Management Specification

## Overview
Manage invoices for client billing, track payment status, and generate
professional invoice documents for services rendered.

## User Flows
- View all invoices in a filterable list
- Create new invoices with line items
- Edit draft invoices before sending
- Mark invoices as sent/paid
- Delete draft invoices

## UI Requirements
- Table or card layout showing invoice number, client, amount, status, due date
- Status badges (draft, sent, paid, overdue)
- Actions: view, edit, delete, mark as sent
- Create button prominently displayed

## Configuration
- shell: true

{
  "_meta": {
    "models": {
      "invoices": "Each invoice represents a bill sent to a client for work completed.",
      "lineItems": "Line items are individual services or products on each invoice."
    },
    "relationships": [
      "Each Invoice contains one or more Line Items",
      "Invoices track which Client they belong to via clientName"
    ]
  },
  "invoices": [
    {
      "id": "inv-001",
      "invoiceNumber": "INV-2024-001",
      "clientName": "Acme Corp",
      "clientEmail": "[email protected]",
      "total": 1500.00,
      "status": "sent",
      "dueDate": "2024-02-15",
      "lineItems": [
        {
          "description": "Web Design",
          "quantity": 1,
          "rate": 1500.00
        }
      ]
    }
  ]
}

// Data shapes
export interface LineItem {
  description: string
  quantity: number
  rate: number
}

export interface Invoice {
  id: string
  invoiceNumber: string
  clientName: string
  clientEmail: string
  total: number
  status: 'draft' | 'sent' | 'paid' | 'overdue'
  dueDate: string
  lineItems: LineItem[]
}

// Component props
export interface InvoiceListProps {
  /** The list of invoices to display */
  invoices: Invoice[]
  /** Called when user wants to view an invoice's details */
  onView?: (id: string) => void
  /** Called when user wants to edit an invoice */
  onEdit?: (id: string) => void
  /** Called when user wants to delete an invoice */
  onDelete?: (id: string) => void
  /** Called when user wants to create a new invoice */
  onCreate?: () => void
}