Persistent Breadcrumb & Back-Navigation in Deduction and Check-Out Builders

Introduced in v0.1.382

Overview

The deduction claim builder and check-out report builder can be opened from multiple places in the dashboard — the Work Queue CTA, the Tenancy hub, the Check-Out list, and any future entry points. From v0.1.382 onwards, both builders:

1. Remember where the user came from using sessionStorage, and
2. Display a contextual breadcrumb at the top of the page showing the full navigation path.

This mirrors the pattern already in place on the tenancy detail view and ensures users are never left disoriented inside a deeply nested form.

---

How it works

Session-storage return URL

When a user navigates into either builder, the originating URL is written to sessionStorage (following the same readTenancyListUrl convention used in tenancy-detail-view.tsx). On exit — whether the user completes the workflow, cancels, or uses the breadcrumb link — they are taken back to that stored URL.

The stored URL is scoped to the browser tab session and is cleared once the user is returned to their origin, so it does not persist across sessions or interfere with subsequent navigations.

PageBreadcrumb component

A PageBreadcrumb component is rendered at the very top of both builders. It constructs the breadcrumb trail from the navigation context at the time the page was opened. A typical trail looks like:

Tenancies → 123 High Street → Deductions

or, for the check-out builder:

Check-Out → 123 High Street → Report

Each segment in the breadcrumb is a navigable link except for the current page (the rightmost segment), which is rendered as plain text.

---

Affected components

Component	File
Deduction Claim Builder	src/app/dashboard/deductions/[tenancyId]/deduction-claim-builder.tsx
Check-Out Report Builder	src/app/dashboard/check-out/[reportId]/report-builder.tsx

---

Entry points supported

The breadcrumb and return-URL are populated correctly regardless of which entry point the user came from:

• Work Queue CTA — e.g. an action card prompting the user to raise a deduction
• Tenancy hub — navigating into deductions from a specific tenancy's detail page
• Check-Out list — opening a report builder directly from the check-out pipeline

---

Relationship to existing navigation patterns

This feature extends a pattern that was already established in tenancy-detail-view.tsx. The same sessionStorage key convention and PageBreadcrumb component are now consistently applied across all three deeply nested views:

View	Persistent return URL	Breadcrumb
Tenancy detail view	✅	✅
Deduction claim builder	✅ (new in v0.1.382)	✅ (new in v0.1.382)
Check-out report builder	✅ (new in v0.1.382)	✅ (new in v0.1.382)

---

Notes for developers

• The sessionStorage key follows the readTenancyListUrl naming convention already documented in tenancy-detail-view.tsx. If you add new entry points to either builder, no additional code is needed — the originating URL is captured automatically at navigation time.
• The PageBreadcrumb component is a shared UI component. If you need to customise the breadcrumb trail for a new entry context, pass the relevant path segments as props.