Compliance Dashboard: Cross-Highlighting

Available from: v0.1.156

Overview

The Compliance Dashboard presents two panels side by side:

• Portfolio Table (left, 3/5 width) — lists all properties in your portfolio.
• Open Issues Panel (right, 2/5 width) — lists all outstanding compliance issues across the portfolio.

From v0.1.156, clicking a row in the Portfolio Table cross-highlights the Open Issues Panel, filtering it to show only the issues that belong to that property. The selected row is visually highlighted to confirm the active linkage.

---

How It Works

1. Select a property

Click any row in the Portfolio Table. The selected row is outlined with a primary-colour ring (ring-1 ring-primary) to indicate it is active.

2. Issues panel filters automatically

The Open Issues Panel immediately updates to show only the compliance issues associated with the selected property. A contextual header appears at the top of the panel:

Showing 3 issues for 14 Elm Street, Bristol

3. Clear the filter

To return to the full portfolio-wide issues list, click the Clear button in the issues panel header. The table row highlight is also removed.

---

Mental Model

The two panels share a bidirectional relationship:

• Selecting a table row → scopes the issues panel.
• The issues panel header always reflects the current scope (all properties or a single address).

This lets you quickly audit compliance exposure for a specific tenancy without leaving the dashboard.

---

Technical Detail

The linkage is implemented via a selectedTenancyId state held in ComplianceDashboard. Both child components receive this value as a prop:

• PortfolioTable uses it to apply ring-1 ring-primary to the matching row.
• OpenIssuesPanel uses it to filter its issues list and render the contextual header and clear button.

Setting selectedTenancyId to null (via the Clear button) resets both panels to their default unfiltered state.