ReportingUnitBlocksList

---

type: Component title: ReportingUnitBlocksList description: Blocks section for the Reporting Unit Details page — empty-pageable TableResource showing the built-in "No results" state until backend issue #1250 lands. tags: [frontend, react, reporting-unit, district-average, table, section] timestamp: 2026-10-01T00:00:00Z

ReportingUnitBlocksList

ReportingUnitBlocksList renders the Blocks section of the Reporting Unit Details page. It is a static section component: no props, no data fetching. It renders a "Blocks" heading and an empty-pageable TableResource so the built-in No results empty state shows until the backend blocks endpoint exists (issue #1250). The consumer page is frontend/src/pages/ReportingUnitDetails/index.tsx, which renders it below ReportingUnitDetailsTombstone.

Rationale

Decision D8 (2026-10-01): the blocks list belongs on the Reporting Unit Details page, below the tombstone, rather than on the block details page. The empty pageable pattern (decision D2) reuses TableResource's built-in empty state instead of custom copy; TableResource is unmodified.

Source References

• Source: frontend/src/components/waste/ReportingUnits/ReportingUnitBlocksList/index.tsx
• Styles: frontend/src/components/waste/ReportingUnits/ReportingUnitBlocksList/index.scss
• Tests: frontend/src/components/waste/ReportingUnits/ReportingUnitBlocksList/index.unit.test.tsx

Public Interface

Name	Type	Description
ReportingUnitBlocksList	FC (default export)	Blocks section consumed by frontend/src/pages/ReportingUnitDetails/index.tsx.

No props. The component takes no arguments and reads no router or query state.

Page-internal constants (not exported):

Name	Value	Purpose
ReportingUnitBlocksRow	{ id: number }	Row shape; columns arrive with issue #1250.
EMPTY_BLOCKS_HEADERS	[]	Empty TableHeaderType[] column definitions.
EMPTY_BLOCKS_CONTENT	{ content: [], page: { size: 10, number: 0, totalElements: 0, totalPages: 0 } }	Empty PageableResponse payload that drives the No results state.

TableResource contract

<TableResource
  id="reporting-unit-blocks-list"
  headers={EMPTY_BLOCKS_HEADERS}
  content={EMPTY_BLOCKS_CONTENT}
  loading={false}
  error={false}
  displayToolbar={false}
/>

displayToolbar={false} hides the table toolbar. The empty pageable shape surfaces the built-in No results empty state (decision D2 — no custom empty copy).

Behavior

• Renders a tombstone-style <Column lg={16} md={8} sm={4}> wrapper (rublocks-column__body) ready for the page layout Grid.
• Renders a plain h2 "Blocks" heading (rublocks-column__title), matching the summary card's section-heading pattern.
• Renders the empty-pageable TableResource; the built-in No results state shows because the payload is empty.
• Performs no data fetching. Once the backend blocks endpoint exists (issue #1250), the list populates and its rows link to /reporting-units/$ruId/$blockId.

Feature Flag

Exhibition of this section on the Reporting Unit Details page is controlled by the reporting-unit-block-details-enabled flag (added 2026-10-05, issue #1369, user decision D9 — one flag for both block-details surfaces). frontend/src/pages/ReportingUnitDetails/index.tsx conditionally renders:

{featureFlags['reporting-unit-block-details-enabled'] && <ReportingUnitBlocksList />}

The component itself stays flag-agnostic: no flag read inside it, no props, no behavioral branches. With the flag off, the RU details page skips the section entirely and no h2 "Blocks" heading renders. The same flag gates the block details route — see Feature Flags for the environment matrix.

Pending Backend Endpoint

The blocks-list endpoint does not exist yet. It is tracked on issue #1250 (block-information, submission-details, and eligibility endpoints), which is itself blocked by #1228, #1289, and #1212. Until it lands, the section is a static placeholder.

Scope Decisions

• Empty pageable pattern, no custom empty copy (decision D2).
• The component stays flag-agnostic; decision D5 ("no feature flag") is superseded (2026-10-05) for its exhibition — the RU details page renders it only while reporting-unit-block-details-enabled is on (user decision D9). See Feature Flags.
• Tombstone stays on the RU page and the blocks list was added below it; the block details page keeps only the summary card as context (decision D8).

Known Constraints

• No props or configuration — the section is static until issue #1250 lands.
• Row columns, status tags (constrained by ADR-004), and row links to /reporting-units/$ruId/$blockId arrive with the #1250 work.
• The heading is a plain h2 (rublock style), not a PageTitle.

Change Impact

• frontend/src/pages/ReportingUnitDetails/index.tsx — renders this component below ReportingUnitDetailsTombstone, only while reporting-unit-block-details-enabled is on.
• Routing — the block details route that populated rows will link to.
• ReportingUnitBlockDetails — block page linked from populated rows.

See Also

• Feature Flags — reporting-unit-block-details-enabled controls this section's exhibition.
• Reporting Unit Details Tombstone
• ReportingUnitBlockDetails
• Table
• Custom Made Components