All Docs
FeaturesDepositClearUpdated March 11, 2026

Mobile Sticky Deposit Position Bar in Deduction Claim Builder

Mobile Sticky Deposit Position Bar — Deduction Claim Builder

Available from: v0.1.129

Overview

When building a deduction claim on a mobile device, the Deposit Position bar is now pinned to the top of the screen at all times. It gives agents an at-a-glance view of the deposit total, the amount claimed so far, and the expected return — without needing to scroll past claim lines to find the summary.

Why this exists

The Deduction Claim Builder uses a three-column layout on desktop. The rightmost column holds the Deposit Summary card, which includes:

  • A visual progress bar tracking how much of the deposit has been claimed
  • A running total of claimed vs. available deposit
  • An over-deduction warning when the claimed total exceeds the deposit

On mobile, columns stack sequentially. This means the Deposit Summary renders below all claim lines — an agent could add several large deductions and inadvertently exceed the deposit without any visible warning until they scroll down.

What the bar shows

The sticky bar surfaces three values inline:

FieldDescription
DepositThe total deposit held for the tenancy
ClaimedThe running sum of all current deduction lines
ReturnDeposit − Claimed — what the tenant would receive back

Colour coding

  • Return is positive → displayed in green
  • Return is negative (over-deduction) → displayed in red

Over-deduction warning

If the claimed amount exceeds the deposit, the same over-deduction warning banner shown in the desktop sidebar also appears within the sticky bar. This ensures the alert is never out of view on any screen size.

Visibility rules

The bar is mobile-only. It is hidden at the lg breakpoint and above, where the existing right-hand sidebar already provides full deposit visibility.

Mobile  (< lg)  →  Sticky bar visible at page top
Desktop (≥ lg)  →  Sticky bar hidden; sidebar used instead

Implementation notes

  • The bar reads from the financials object already computed in DeductionClaimBuilder — no additional API calls or derived state is required.
  • It is a purely additive change: the desktop three-column layout and sidebar behaviour are completely unchanged.
  • File: src/app/dashboard/deductions/[tenancyId]/deduction-claim-builder.tsx

Related