ReportingUnitDetailsTombstone

ReportingUnitDetailsTombstone

ReportingUnitDetailsTombstone renders the read-only header panel (tombstone) for a reporting unit details page, displaying key identification and classification fields in a Carbon grid layout.

Rationale

Use ReportingUnitDetailsTombstone when displaying the immutable top-level facts for a single reporting unit. The tombstone pattern surfaces the most critical fields at a glance without allowing editing, and it acts as the authoritative view of the unit's provenance metadata.

Source References

• Source: frontend/src/components/waste/ReportingUnits/ReportingUnitDetailsTombstone/index.tsx
• Tests: frontend/src/components/waste/ReportingUnits/ReportingUnitDetailsTombstone/index.unit.test.tsx

Public Interface

Props

Name	Type	Required	Description
data	ReportingUnitDto	Yes	The reporting unit data object containing all fields to display.

Displayed Fields

Field	Label	Notes
data.client.description	Client name	Plain text.
data.client.code	Client number	Gated link to client details. Only active for IDIR role via TooltipRoleBasedRedirectLinkTag.
data.clientStatus.description	Client status	Plain text.
data.district.code + data.district.description	District	Rendered as {code} - {description}.
data.grade.description	Grades	Wrapped in EmptyValueTag to handle null/empty values.
data.sampling.code + data.sampling.description	Sampling option	Rendered as {code} - {description}.

Behavior

• Renders inside a Carbon <Column lg={16} ...> / <Grid> with responsive breakpoints per field.
• All fields are read-only and use ReadonlyInput to maintain a consistent form-label look.
• The client number link is role-gated: IDIR users see a tooltip redirect to VITE_CLIENT_BASE_URL/clients/details/{code}; other roles see plain text.
• Uses EmptyValueTag for the grades field to show a dash when no grade description is available.

Examples

Happy path: fully populated reporting unit

import ReportingUnitDetailsTombstone from '@/components/waste/ReportingUnits/ReportingUnitDetailsTombstone';

const data: ReportingUnitDto = {
  id: 1234,
  client: { code: '00001001', description: 'Acme Logging Co.' },
  clientStatus: { code: 'ACTIVE', description: 'Active' },
  district: { code: 'DCR', description: 'Campbell River Natural Resource District' },
  grade: { code: 'G1', description: 'Grade 1' },
  sampling: { code: 'S01', description: 'Block sampling' },
};

<ReportingUnitDetailsTombstone data={data} />

Edge case: missing grade description renders empty-value tag

const data: ReportingUnitDto = {
  // ...
  grade: { code: null, description: null },
};

<ReportingUnitDetailsTombstone data={data} />
// Grades field renders the EmptyValueTag dash placeholder.

Known Constraints

• The client link is constructed from env.VITE_CLIENT_BASE_URL at render time; no override is possible at the component level.
• All fields are read-only — this component intentionally has no edit capability.
• Responsive column breakpoints are hardcoded in the component; layout adjustments require source changes.

Change Impact

• architecture/frontend/Frontend Architecture Overview.md — references the Reporting Unit Details feature.
• codes/frontend/Waste/TooltipRoleBasedRedirectLinkTag.md — used for the client number field.
• codes/frontend/Waste/ReportingUnitBlocksList.md — blocks list rendered below the tombstone on the Reporting Unit Details page (decision D8, added 2026-10-01).
• pages/ReportingUnitDetails — the sole consumer of this component.

See Also

• TooltipRoleBasedRedirectLinkTag
• Components