HeaderDistrictDisplay

HeaderDistrictDisplay

The HeaderDistrictDisplay component is a generic display component that shows selected district or client information in the header global bar. It displays the entity name and a chevron icon indicating the panel state.

Props

Name	Type	Required	Description
queryHook	() => { data: DistrictType | undefined; isLoading: boolean }	✅	Hook that returns the selected entity data and loading state
noSelectionText	string	✅	Text to display when no entity is selected
isActive	boolean	✅	Whether the header panel is currently open

Types

DistrictType

type DistrictType = {
  id: string; // Entity identifier
  name: string; // Entity display name
  kind: string; // Entity type code
};

Usage

import HeaderDistrictDisplay from '@/components/Layout/HeaderDistrictDisplay';

// With district data
<HeaderDistrictDisplay
  isActive={isHeaderPanelOpen}
  noSelectionText="No district selected"
  queryHook={() => ({ data: selectedDistrict, isLoading: false })}
/>

// With client data
<HeaderDistrictDisplay
  isActive={isHeaderPanelOpen}
  noSelectionText="No client selected"
  queryHook={() => ({ data: selectedClient, isLoading: true })}
/>

Features

Responsive Display

The component adapts to screen size:

• Small screens (sm): Hides text and chevron, shows only in avatar button
• Larger screens: Shows entity name and chevron indicator

Panel State Indicator

Displays different chevron icons based on panel state:

• Panel Open: ChevronUp icon
• Panel Closed: ChevronDown icon

Selection Display

Shows either:

• Selected entity name (if data exists)
• "No selection" text (if no data)

Responsive Behavior

Breakpoint Logic

const breakpoint = useBreakpoint();
const showSimpleView = useMemo(() => breakpoint === "sm", [breakpoint]);

Simple View (Mobile)

When showSimpleView is true:

• Returns null (renders nothing)
• Entity info shown only in expanded panel

Full View (Desktop/Tablet)

When showSimpleView is false:

• Displays entity name or fallback text
• Shows chevron icon indicating panel state

Rendering Logic

{
  showSimpleView ? null : (
    <p className="client-name" data-testid="client-name">
      {data ? data.name : noSelectionText}
    </p>
  );
}
{
  showSimpleView ? null : isActive ? (
    <ChevronUp data-testid="active" />
  ) : (
    <ChevronDown data-testid="inactive" />
  );
}

Chevron Icons

ChevronUp

• Displayed when panel is active/open
• Indicates "click to close"
• Test ID: active

ChevronDown

• Displayed when panel is inactive/closed
• Indicates "click to open"
• Test ID: inactive

Data Flow

Query Hook Pattern

The component uses a query hook to fetch data:

const { data } = queryHook();

The hook expects an object with:

• data: The current entity (or undefined if no selection)
• isLoading: Loading state (prepared but not currently used in rendering)

This allows different implementations (ClientDisplay, DistrictDisplay) to provide their own data sources while maintaining a consistent interface.

Test IDs

• Client name: data-testid="client-name"
• Active state: data-testid="active"
• Inactive state: data-testid="inactive"

Dependencies

Custom Hooks

• useBreakpoint: Detects current screen size breakpoint

Carbon Icons

• ChevronUp: Upward chevron for open state
• ChevronDown: Downward chevron for closed state

Breakpoint Reference

Breakpoint	Screen Width	showSimpleView
sm	< 672px	true
md	672px - 1056px	false
lg	1056px - 1312px	false
xlg	1312px - 1584px	false
max	≥ 1584px	false

Integration Examples

ClientDisplay (BCeID Business)

const ClientDisplay: FC<ClientDisplayProps> = ({ isActive }) => {
  const { getClients } = useAuth();
  const { userPreference } = usePreference();
  const selectedClient = userPreference.selectedClient as
    | CodeDescriptionDto
    | undefined;

  const { data, isLoading } = useQuery({
    queryKey: ["forest-clients", "search", getClients()],
    queryFn: () =>
      APIs.forestclient.searchByClientNumbers(
        getClients(),
        0,
        getClients().length,
      ),
    enabled: !!getClients().length,
    select: (data) =>
      data
        .map((client) => ({
          id: client.clientNumber,
          name: client.name ?? client.clientName,
          acronym: client.acronym,
          kind: client.clientTypeCode?.code,
        }))
        .find((client) => client.id === selectedClient?.code),
  });

  return (
    <HeaderDistrictDisplay
      isActive={isActive}
      noSelectionText="No client selected"
      queryHook={() => ({ data, isLoading })}
    />
  );
};

DistrictDisplay (IDIR)

const DistrictDisplay: FC<DistrictDisplayProps> = ({ isActive }) => {
  const { userPreference } = usePreference();

  const { data, isLoading } = useQuery({
    queryKey: ["districtOptions"],
    queryFn: async () => await APIs.codes.getDistricts(),
    enabled: true,
    select: (data) =>
      data
        .map((district) => ({
          id: district.code,
          name: district.description,
          kind: "D",
        }))
        .find((district) => district.id === userPreference.selectedDistrict),
  });

  return (
    <HeaderDistrictDisplay
      isActive={isActive}
      noSelectionText="No district selected"
      queryHook={() => ({ data, isLoading })}
    />
  );
};

Styling

The component relies on parent styling from LayoutHeaderGlobalBar:

.profile-action-button {
  display: flex;
  gap: 0.5rem;

  .client-name {
    // Inherits text color from parent
  }
}

Related Components

• ClientDisplay: Implementation for business client display
• DistrictDisplay: Implementation for district display
• LayoutHeaderGlobalBar: Parent container component
• AvatarImage: Displayed alongside this component

Best Practices

1. Query Hook Pattern: Use the query hook pattern for flexible data sources
2. Loading States: Handle loading states in the query hook
3. Responsive Design: Component automatically adapts to screen size
4. Consistent Text: Provide clear "no selection" text
5. Test IDs: Use provided test IDs for component testing

Accessibility

• Chevron icons have test IDs for testing
• Client name has semantic paragraph tag
• Component respects user's screen size preferences
• Icons provide visual indication of panel state

Use Cases

1. Business Users: Display selected client in header
2. Government Users: Display selected district in header
3. Multi-Entity Access: Show which entity context is active
4. Panel State: Indicate whether profile panel is open

Notes

• Component is fully responsive and hides on small screens
• Uses memoization for breakpoint detection to avoid unnecessary re-renders
• Data fetching is delegated to wrapper components (ClientDisplay, DistrictDisplay)
• Chevron direction matches Carbon Design System patterns
• Component is purely presentational; state management is external