From 7367aa9572d030bc3e200a1d09caeae143439027 Mon Sep 17 00:00:00 2001
From: grabowski <berwn@buildfor.life>
Date: Mon, 20 Apr 2026 14:21:57 +0700
Subject: [PATCH] Add '+ New Package' button to expense detail packages section

Visible whenever the user can manage. Always routes to the package
creation page. The link-existing dropdown still shows when other
packages exist.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../expenses/[expenseId]/+page.svelte         | 47 ++++++++++++-------
 1 file changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/routes/(app)/companies/[companyId]/expenses/[expenseId]/+page.svelte b/src/routes/(app)/companies/[companyId]/expenses/[expenseId]/+page.svelte
index 33d7bd4..f70ec7b 100644
--- a/src/routes/(app)/companies/[companyId]/expenses/[expenseId]/+page.svelte
+++ b/src/routes/(app)/companies/[companyId]/expenses/[expenseId]/+page.svelte
@@ -224,7 +224,15 @@
 
 		<!-- Packages -->
 		<div class="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800">
-			<h2 class="mb-3 font-semibold text-gray-900 dark:text-white">Linked Packages</h2>
+			<div class="mb-3 flex items-center justify-between">
+				<h2 class="font-semibold text-gray-900 dark:text-white">Linked Packages</h2>
+				{#if canManage}
+					<a href={`/companies/${data.company.id}/packages/new`}
+						class="rounded-md bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-700">
+						+ New Package
+					</a>
+				{/if}
+			</div>
 
 			{#if data.linkedPackages.length > 0}
 				<div class="mb-3 flex flex-wrap gap-2">
@@ -246,23 +254,28 @@
 				<p class="mb-3 text-sm text-gray-500 dark:text-gray-400">No packages linked yet.</p>
 			{/if}
 
-			{#if canManage && data.availablePackages.length > 0}
-				<form method="POST" action="?/linkPackage" use:enhance={() => async ({ update, formElement }) => {
-					await update({ reset: false });
-					formElement.reset();
-				}} class="flex items-center gap-2 border-t border-gray-100 pt-3 text-sm dark:border-gray-700">
-					<select name="packageId" required class={inputCls + ' flex-1'}>
-						<option value="" disabled selected>Select package to link</option>
-						{#each data.availablePackages as pkg (pkg.id)}
-							{#if !data.linkedPackages.find((l) => l.id === pkg.id)}
+			{#if canManage}
+				{@const selectable = data.availablePackages.filter((p) => !data.linkedPackages.find((l) => l.id === p.id))}
+				{#if selectable.length > 0}
+					<form method="POST" action="?/linkPackage" use:enhance={() => async ({ update, formElement }) => {
+						await update({ reset: false });
+						formElement.reset();
+					}} class="flex items-center gap-2 border-t border-gray-100 pt-3 text-sm dark:border-gray-700">
+						<select name="packageId" required class={inputCls + ' flex-1'}>
+							<option value="" disabled selected>Select an existing package</option>
+							{#each selectable as pkg (pkg.id)}
 								<option value={pkg.id}>{pkg.trackingNumber} — {pkg.carrier} ({pkg.direction})</option>
-							{/if}
-						{/each}
-					</select>
-					<button type="submit" class="rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700">
-						Link
-					</button>
-				</form>
+							{/each}
+						</select>
+						<button type="submit" class="rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700">
+							Link
+						</button>
+					</form>
+				{:else if data.availablePackages.length === 0}
+					<p class="border-t border-gray-100 pt-3 text-xs text-gray-500 dark:border-gray-700 dark:text-gray-400">
+						No packages exist yet. Use "+ New Package" above to create one.
+					</p>
+				{/if}
 			{/if}
 		</div>
 	{/if}