Components

Custom Made Components

Some components where custom made to fit the specific needs of the Waste ++ system and the FDS Team. These components are generic enough to be reused in other contexts and applications. On each component, you will find the component code, any types and utilities required for it to work along with tests written using vitest and react testing library.

List of components

The Base Components collection provides a set of ready-to-use, well-documented UI components that are ideal for building consistent and robust applications. These components are designed to be easily integrated into your project and follow best practices for usability and accessibility.

Below is a list of the available base components, each with a brief description and a link to its detailed documentation.

Core

The core components are components that are easy to reuse and adapt for different purposes. They provide essential functionality and can be extended or modified as needed.

Component	Description
Configuration Card	Generic presentational card built on Carbon Tile. Renders a heading, optional body content, and an optional action button. No router coupling — all navigation is delegated via callback prop.
Empty Section	Provides a standardized way to display empty states or placeholders in your UI. Supports optional icons, pictograms, a title, and a description.
Page Title	A standardized header for pages, including a title, optional subtitle, breadcrumbs, and an experimental tag. Helps maintain consistent page layouts and navigation.
Subtitle	A simple utility for rendering section subtitles or supporting text in a consistent style. Accepts plain text or React nodes.
Tags - Under Construction	Displays a tag with a tooltip to indicate that a page or feature is still in development. Useful for marking experimental or incomplete areas.
Tags - Yes/No	Converts loose boolean-like values (boolean, number, string, null, undefined) into a simple display label: Yes or No.
Tags - Empty value	Renders a value or a fallback dash placeholder for empty or missing values. Handles null, undefined, empty string, and whitespace-only strings.
Tags - Date	Displays a user friendly date. Useful for displaying date formatted dates. if the date is null or empty, it will display the provided value, as-is
Tags - Color	Displays a tag with a tooltip with both the code and the description of the provided value. As the body, it only displays the description.
Tags - Legacy Data	Renders a purple tag that indicates a record originates from the legacy system. Clicking it opens the legacy system record in a new tab.
Tags - Wrapper	Wraps any child element with any tag component, positioning the tag either to the left or right of the content. The tag can be toggled on or off independently.

Form

The form components are designed to handle user input, validation and form data in general. They provide a consistent way to create and manage forms throughout the application.

Component	Description
ActiveMultiSelect	A custom multi-select input based on Carbon's FilterableMultiSelect. Supports a skeleton loading state and all props from the base component.
Autocomplete Input	A generic, debounced autocomplete input built on Carbon's ComboBox. Fetches suggestions asynchronously as the user types, supports custom item extraction, and provides loading/empty states. Ideal for search fields and dynamic dropdowns.
Conditional Field	Declaratively shows or hides — and optionally resets — a field or group of fields based on the runtime value of another TanStack Form field. Supports nine comparison operators, AND/OR logic, keep-mounted mode, and CSS transitions.
Formula Input	A Monaco-powered math formula editor with mathjs BigNumber evaluation, live inline result previews, variable autocomplete, precision drift detection, and Carbon Design System styling. Designed for billing-grade formula authoring.
Readonly Input	A labeled read-only value display built with semantic description-list markup. Supports skeleton loading, optional tooltip help text, placeholder fallback, and a numeric display style.
Search Input	A reusable controlled search field built on Carbon's Search component. Supports standard typing, clearing, blur reconciliation, and optional Enter-triggered search callbacks.
Table	A generic, reusable table for displaying paginated data with optional loading, error, and empty states. Supports custom column rendering and integrates with Carbon's DataTable and Pagination components.
File Upload Input	A generic, pluggable file upload component built on Carbon's FileUploaderDropContainer. Handles file selection, slot limits, size guards, and loading state. All domain logic (extension check, header validation, row parsing) lives in a caller-provided FileProcessor<T>.

Layout

The layout components provide the application's structural framework, including navigation, headers, and user interface elements.

Component	Description
Avatar Image	Displays a circular avatar with user initials. Extracts initials from a user's full name and renders them in a styled circle with two size variants.
Client Display	Specialized wrapper for HeaderDistrictDisplay that fetches and displays the currently selected forest client for BCeID Business users.
District Display	Specialized wrapper for HeaderDistrictDisplay that fetches and displays the currently selected district for IDIR (government) users.
Header District Display	Generic display component that shows selected district or client information in the header global bar with a chevron icon indicating panel state.
Header Panel Profile	Displays comprehensive user profile information, preferences, and account actions within the header panel. Provides client/district selection and logout functionality.
Layout	Main application wrapper that provides the overall structure for the application, combining header, side navigation, and content area.
Layout Header	Main application header providing navigation controls, branding, global actions, and user interface elements.
Layout Header Global Bar	Provides global action buttons in the application header, including theme toggle and user profile access with contextual district/client display.
Layout Header Panel	Slide-out panel that displays user profile information and preferences, appearing from the right side when the profile button is clicked.
Layout Side Nav	Main navigation menu for the application displaying a hierarchical menu structure that adapts based on user roles and online/offline status.
Theme Toggle	Animated toggle switch that allows users to switch between light and dark themes with a sliding circle animation and theme-appropriate icons.

Selection and Listing

The selection components provide consistent interfaces for choosing entities like clients and districts.

Component	Description
Client Listing	Specialized implementation of DistrictSelection for displaying and selecting forest clients from the authenticated user's client list.
District Item	Renders an individual item within a DistrictSelection list, displaying an icon, name, and optional ID with loading states.
District Listing	Specialized implementation of DistrictSelection for displaying and selecting forest districts with search functionality.
District Selection	Flexible, reusable shell component for displaying and managing selectable lists of items with search functionality, loading states, and preference persistence.

Waste

The waste components provide specialized UI elements for displaying waste-related data and information.

Component	Description
Code Description Tag	Displays a simple formatted code and description pair in the format {code} - {description}. Useful for displaying CodeDescriptionDto data formats consistently.
Redirect Link Tag	Displays a clickable link that redirects to a specified URL. Opens in a new tab by default with proper security attributes.
Tooltip Redirect Link Tag	Wraps RedirectLinkTag with a Carbon DefinitionTooltip to provide contextual help while preserving link behavior.

Services

Services are pure, decoupled utility classes that handle business logic independent of the UI layer.

Service	Description
ExcelReader	Pure file-reading service for Layer 1 of the import pipeline. Reads Excel and CSV files into raw row objects without validation or transformation. Uses SheetJS (xlsx) library. No React or UI dependencies.

Configuration Pages

Pages for managing formula configuration with date-effective lifecycle.

Page	Description
FormulaConfigurationList	Paginated list of formula sets with area badges, status indicators, and edit/delete actions.
FormulaConfigurationDetail	Create/edit/view formula sets with FormulaInput per row, carry-forward logic, and validation error display.