All Docs
FeaturesDepositClearUpdated March 10, 2026

Wear & Tear Guidance: Slide-Over Drawer (v0.1.75)

Wear & Tear Slide-Over Drawer

Introduced in v0.1.75

The Wear & Tear (W&T) guidance panel in the Add Deduction dialog has been redesigned. Instead of expanding inline inside the modal, the guidance now opens in a slide-over drawer on the right side of the screen.

How it works

  1. Open the Add Deduction dialog from the Deduction Claim Builder (/dashboard/deductions/[tenancyId]).
  2. The dialog shows only the core deduction fields:
    • Description
    • Category
    • Amount
    • Wear & Tear acknowledgement
  3. Click "View W&T Guidance" to open the slide-over drawer.
  4. The drawer slides in from the right, overlaying the page — not the dialog — so you can read guidance and interact with the form at the same time.
  5. Close the drawer at any time without losing your form input.

What's inside the drawer

The slide-over contains the same three W&T sub-sections that were previously inline:

SectionDescription
Fair Wear & TearGuidance on what constitutes normal deterioration that cannot be charged to the tenant.
Tenant LiableCriteria for damage or neglect that goes beyond fair wear and tear.
Depreciation CalculatorTool for calculating an age-adjusted deduction amount based on item age and expected lifespan.

Using the Depreciation Calculator

Previously, using the Depreciation Calculator required scrolling within the modal to copy the calculated amount back to the Amount field. The slide-over layout removes this friction:

  1. Open the W&T drawer and navigate to the Depreciation Calculator section.
  2. Enter the item's original cost, age, and expected lifespan.
  3. Use the "Apply to Amount" action to push the calculated value directly into the Amount field in the main dialog.
  4. Close the drawer — your form is still open with the value populated.

Keyboard & accessibility

  • The drawer can be dismissed with the Escape key.
  • Focus is trapped within the drawer while it is open.
  • Closing the drawer returns focus to the "View W&T Guidance" button in the main dialog.

Affected component

src/app/dashboard/deductions/[tenancyId]/deduction-claim-builder.tsx

The AddDeductionDialog component was refactored to separate the W&T panel into a dedicated slide-over component. No changes were made to the underlying deduction data model or API.