From 7de082707037a04091c5efdd0c3619150fc08b72 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 19 Apr 2026 19:28:37 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/routes/invoices.new.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/routes/invoices.new.tsx b/src/routes/invoices.new.tsx
index 9fc22b9..fd4f6e2 100644
--- a/src/routes/invoices.new.tsx
+++ b/src/routes/invoices.new.tsx
@@ -1,4 +1,4 @@
-import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { createFileRoute, useNavigate, Outlet, useMatches } from "@tanstack/react-router";
 import { useEffect, useMemo, useState } from "react";
 import { ProtectedLayout } from "@/components/protected-layout";
 import { PageContainer, PageHeader } from "@/components/app-shell";
@@ -11,12 +11,20 @@ import { Search, ArrowLeft } from "lucide-react";
 import { formatCurrency } from "@/lib/format";
 
 export const Route = createFileRoute("/invoices/new")({
-  component: () => (
+  component: NewInvoiceLayout,
+});
+
+function NewInvoiceLayout() {
+  // If a child route (e.g. /invoices/new/$clientId) is matched, render only it.
+  const matches = useMatches();
+  const hasChild = matches.some((m) => m.routeId !== "/invoices/new" && m.routeId.startsWith("/invoices/new/"));
+  if (hasChild) return <Outlet />;
+  return (
     <ProtectedLayout>
       <NewInvoicePickClient />
     </ProtectedLayout>
-  ),
-});
+  );
+}
 
 interface ClientLite {
   id: string;