B4L/buildfor_life_budget
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add '+ New Package' button to expense detail packages section
Deploy to LXC / deploy (push) Successful in 1m56s
Details
Validate / validate (push) Successful in 35s
Details

Browse Source 
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>
This commit is contained in:
Alexander Grabowski
2026-04-20 14:21:57 +07:00
parent 7465b498e0
commit 7367aa9572
1 changed files with 30 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(app)/companies/[companyId]/expenses/[expenseId]/+page.svelte
+30 -17
View File
@@ -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}