UI Components & Styling

Layout System

The application uses Angular Flex Layout for responsive design:

Flexbox-based layouts

Responsive breakpoints

Dynamic layout changes

CSS Framework

Bootstrap 5.3.2 provides:

Grid system

Utility classes

Responsive components

Form controls

Angular Material Components

Used throughout the application:

mat-card - Card containers

mat-table - Data tables with sorting and pagination

mat-dialog - Modal dialogs

mat-form-field - Form inputs

mat-select - Dropdown selects

mat-datepicker - Date pickers

mat-icon - Material icons

mat-button - Buttons

mat-menu - Context menus

mat-toolbar - Toolbars

mat-sidenav - Side navigation

Custom Components

Spinner Component (`shared/spinner.component`)

Loading indicator shown during async operations.

Modal Component (`modal/modal.component`)

Accordion Component (`shared/accordion/`)

Collapsible content panels.

Perfect Scrollbar

Custom scrollbar styling for better aesthetics:

const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true
};

Icons & Images

Material Icons for standard UI elements

Custom icons in icons/ directory

Static assets in assets/ directory