Skip to content

New Invoice: add inline 'New client' option in Client dropdown #71

Description

@n8bar

Gap

On the New Invoice form, the Client dropdown is a flat list of existing clients plus Select…. There's no way to add a new client without leaving the form.

Today's two paths:

  • No clients yet → form swaps to the first-client gate ($showClientGate in resources/views/invoices/create.blade.php). Fine.
  • Has clients, want a new one mid-invoice → user has to navigate to /clients/create, create the client, come back, and re-fill any input they had on the invoice form. Risk of losing input, and breaks the flow.

Proposed

Add a + New client option to the Client dropdown (top of list, separator). Selecting it opens an inline prompt for Name + Email without navigating away. On submit, the client is created and the dropdown re-renders with the new client pre-selected.

UX guardrails

Per docs/UX_GUARDRAILS.md:

  • Preserved input — invoice form fields stay populated through the create-client flow.
  • No layout shift — inline disclosure (modal or expanding panel above the dropdown), not a redirect.
  • Inline guidance/error — validation errors on Name/Email render in the inline prompt; no full-page reload.
  • Focus management — focus enters the inline Name field on open, returns to the dropdown on close (with the new client selected).
  • Mobile/a11y — keyboard-reachable, screen-reader announces the new mode.

Open questions

  • Inline panel vs. modal — modal is simpler to focus-trap; inline panel is less disruptive. Lean: inline.
  • Once this exists, do we collapse $showClientGate (the empty-state form) into the same flow, or keep the gate as the empty-state path?
  • Server-side: reuse the existing clients.store endpoint (XHR) and re-render the dropdown options on success.

Why now

Surfaced during the how-to-invoice video script pass — Rachel's "since you don't have any, let's make one" beat works cleanly with the first-client gate, but the same intent (add a client mid-invoice) has no path once any clients exist. Worth closing the gap so the demo flow generalizes.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions