BlockDetailsSummary

---

type: Component title: BlockDetailsSummary description: Read-only Reporting unit summary card for the block details page (issue #1369). tags: [frontend, react, reporting-unit, district-average, read-only, summary] timestamp: 2026-10-01T00:00:00Z

BlockDetailsSummary

BlockDetailsSummary renders the read-only Reporting unit summary card for the block details page. It displays six summary fields as Readonly Input definition lists inside a bordered Carbon Tile.

Rationale

Use BlockDetailsSummary when the block details page needs the reporting unit's identification and classification fields at a glance. The card is modelled on ReportingUnitDetailsTombstone but is a new component — the tombstone remains untouched and keeps its role-gated client link. BlockDetailsSummary renders display-only values with no inputs, edit controls, or links.

Source References

• Source: frontend/src/components/waste/ReportingUnits/BlockDetailsSummary/index.tsx
• Styles: frontend/src/components/waste/ReportingUnits/BlockDetailsSummary/index.scss
• Tests: covered by the ReportingUnitBlockDetails page tests

Public Interface

Props

Name	Type	Required	Description
data	ReportingUnitDto	yes	The reporting unit whose read-only fields are shown in the summary card.

Displayed Fields

Field	Label	Rendered as
data.client.description	Client name	Plain text.
data.client.code	Client ID	Plain text.
data.district.code + data.district.description	District	{code} - {description}.
data.grade.description	Grades	Empty Value Tag dash placeholder for null or empty values.
data.sampling.code + data.sampling.description	Sampling Option	{code} - {description}.
data.createdAt	Created on	Date Tag with format="MMMM dd, yyyy"; renders nothing when createdAt is absent (decision D3 — DateTag handles empty values).

Behavior

• Renders inside a Carbon <Tile> with a Grid of six responsive Columns (max, xlg, lg, md, sm breakpoints per field).
• All values are read-only; the component renders no inputs, edit controls, or links.
• The Created on field is conditional on data.createdAt, which is optional on reportingUnitSchema and fills once the backend exposes a creation date.

Known Constraints

• No client link — unlike the tombstone, the card intentionally renders the client as plain text.
• Column breakpoints are hardcoded in the component; layout adjustments require source changes.
• Backend issue #1250 tracks the follow-up for exposing the reporting-unit creation date.

Change Impact

• ReportingUnitBlockDetails — sole consumer of this component.
• useReportingUnitDetailsQuery — supplies the ReportingUnitDto rendered here.
• frontend/src/services/reportingUnit.types.ts — createdAt added as optional on reportingUnitSchema.

See Also

• ReportingUnitBlockDetails
• Reporting Unit Details Tombstone
• Waste Components