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)

Reusable modal dialog for various purposes.

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