Syneo/Barcoding

Appearance

Module System Overview ​

Introduction ​

The Syneo/Barcoding system consists of 29 feature modules that provide comprehensive business functionality for manufacturing, operations, human resources, quality management, and administrative functions. These modules are designed as self-contained, lazy-loaded Angular packages that can be independently developed, tested, and deployed.

Architecture ​

Module Structure ​

Each module follows a consistent architectural pattern:

@barcoding/module-<name>/
├── src/
│   └── lib/
│       ├── components/           # UI components
│       │   ├── <name>Dashboard/  # Module dashboard
│       │   ├── <name>Settings/   # Module settings
│       │   ├── <name>List/       # Entity list view
│       │   ├── <name>View/       # Entity detail view
│       │   └── <name>Form/       # Create/edit forms
│       ├── services/             # Business logic services
│       ├── store/                # NGXS state management
│       ├── models/               # TypeScript interfaces
│       ├── shared/               # Shared components/utilities
│       ├── <name>.module.ts      # Module definition
│       ├── <name>.component.ts   # Module root component
│       └── <name>.routing.ts     # Module routing
└── package.json

Common Components ​

Most modules include these standard components:

  • Dashboard Component: Overview and key metrics for the module
  • Settings Component: Module-specific configuration and preferences
  • List Components: Grid-based list views with filtering, sorting, and pagination
  • View Components: Detailed entity views with related data
  • Form Components: Create and edit forms with validation

Module Categories ​

Modules are organized into 11 functional categories:

  1. Customer & Supplier Management (1 module)

    • CRM-SRM: Comprehensive relationship management

  2. Operations & Manufacturing (7 modules)

    • Jobs, Piecework, Production Line Management, Order, Parts, Requisition, Store

  3. Human Resources (2 modules)

    • HR, Skills

  4. IT & Infrastructure (3 modules)

    • IT, Hosting, DMS

  5. Quality & Compliance (3 modules)

    • NCR, TQ, Health & Safety

  6. Asset Management (3 modules)

    • Assets, Tools, Fleet

  7. Maintenance & Operations (2 modules)

    • Faults, Routine

  8. Business Intelligence (2 modules)

    • Reports, Projects

  9. Support & Services (1 module)

    • Ticket

  10. Testing & Validation (1 module)

    • Test Leads

  11. Configuration & Documentation (4 modules)

    • Manual, Sites, Costsheets, Website

Technology Stack ​

Frontend Framework ​

  • Angular 17.3.12: Component framework
  • TypeScript 5.4.5: Type-safe language
  • RxJS 7.5.5: Reactive programming

State Management ​

  • NGXS 3.8.1: State management pattern
  • Each module can define its own state stores
  • Global state managed through Core packages

UI Components ​

  • Kendo UI for Angular 16.7.1: Primary UI component library
    • kendo-grid: Data tables with filtering, sorting, paging
    • kendo-dropdownlist: Dropdowns and selects
    • kendo-datepicker: Date inputs
    • Excel and PDF export capabilities
  • Angular Material 17.3.10: Supplementary UI components
    • Dialogs, tabs, cards, toolbars
    • Icons, buttons, form fields

Forms & Validation ​

  • Reactive Forms: Form handling pattern
  • Custom Validators: Business rule validation
  • Quill Editor: Rich text editing

API Integration ​

  • @barcoding/sdk: Auto-generated API client
  • All modules use SDK controller services
  • Observable-based HTTP calls

Package Dependencies ​

Modules follow a strict dependency hierarchy:

@barcoding/sdk (API client - auto-generated)
    ↓
@barcoding/core (Universal utilities, forms, state)
    ↓
@barcoding/auth-core (Authentication, ACL, guards)
    ↓
@barcoding/gridster-core (Widget system - CRITICAL)
    ↓
@barcoding/backend-core (Backend app utilities)
@barcoding/frontend-core (Frontend app utilities)
@barcoding/dashboard-core (Dashboard app utilities)
    ↓
@barcoding/modules/* (Feature modules)

Important: Modules should only depend on:

  • Core packages (@barcoding/core, @barcoding/auth-core, etc.)
  • SDK package (@barcoding/sdk)
  • App-specific core packages (@barcoding/backend-core, etc.)
  • Angular and third-party libraries

Never create circular dependencies between modules.

Module Usage Across Applications ​

The Syneo/Barcoding system has 3 main application instances:

Backend Application ​

Port: 4200 Purpose: Production analysis and daily operations Modules Used: All 29 modules are available in the Backend application

Front Application ​

Port: 4201 Purpose: User interactions and job tracking Modules Used: Subset of modules relevant to front-line operations

Dashboard Application ​

Port: 4202 Purpose: External views and data visualization Modules Used: Reporting and visualization modules

Module Routing ​

Modules are lazy-loaded through the application routing configuration:

typescript
// Example: Backend application routing
{
  path: 'modules/ticket',
  loadChildren: () => import('@barcoding/module-ticket')
    .then(m => m.TicketModule)
}

Each module defines its own child routes:

typescript
// Example: Ticket module routing
{
  path: '',
  component: TicketComponent,
  children: [
    { path: 'dashboard', component: TicketDashboardComponent },
    { path: 'settings', component: TicketSettingsComponent },
    { path: 'ticketsList', component: TicketListComponent },
    { path: 'ticketView/:id', component: TicketViewComponent }
  ]
}

State Management Pattern ​

Modules use NGXS for state management following this pattern:

State Definition ​

typescript
export interface ModuleStateModel {
  entities: Entity[];
  selectedEntity: Entity | null;
  loading: boolean;
}

@State<ModuleStateModel>({
  name: 'module',
  defaults: {
    entities: [],
    selectedEntity: null,
    loading: false
  }
})
@Injectable()
export class ModuleState {
  // State implementation
}

Actions ​

typescript
export class LoadEntities {
  static readonly type = '[Module] Load Entities';
  constructor(public payload?: any) {}
}

export class SelectEntity {
  static readonly type = '[Module] Select Entity';
  constructor(public id: number) {}
}

Selectors ​

typescript
@Selector()
static entities(state: ModuleStateModel): Entity[] {
  return state.entities;
}

@Selector()
static selectedEntity(state: ModuleStateModel): Entity | null {
  return state.selectedEntity;
}

Common Patterns ​

Dashboard Pattern ​

Most modules include a dashboard component that provides:

  • Key performance indicators (KPIs)
  • Recent activity lists
  • Quick action buttons
  • Visual analytics (charts, graphs)

List-View-Edit Pattern ​

The standard CRUD pattern across modules:

  1. List View: Kendo grid with search, filter, sort
  2. Detail View: Read-only entity details with related data
  3. Form Component: Create/edit with validation
  4. Delete Action: Confirmation dialog before deletion

Settings Pattern ​

Module settings typically include:

  • Default values and preferences
  • Workflow configuration
  • User permissions (if applicable)
  • Custom field definitions
  • Notification settings

Development Guidelines ​

Creating a New Module ​

  1. Generate module structure using Angular CLI or schematics
  2. Define module routes and components
  3. Create NGXS state if needed
  4. Implement API integration using SDK services
  5. Build UI using Kendo and Material components
  6. Add to application routing configuration
  7. Write unit tests (Jest)
  8. Write E2E tests (Playwright)

Module Naming Conventions ​

  • Package: @barcoding/module-<name>
  • Module Class: <Name>Module
  • Component: <Name>Component
  • Service: <Name>Service
  • State: <Name>State
  • Routes File: <name>.routing.ts

Testing Strategy ​

Each module should include:

  • Unit Tests: Component and service logic (Jest)
  • E2E Tests: User workflows (Playwright)
  • Integration Tests: API integration (if applicable)

Build Process ​

bash
# Build single module
ng build @barcoding/module-<name>

# Build all modules
yarn build

# Production build
ng build @barcoding/module-<name> --configuration production

Performance Considerations ​

Lazy Loading ​

  • Modules are loaded on-demand when routes are accessed
  • Reduces initial bundle size
  • Improves time-to-interactive

Code Splitting ​

  • Each module is a separate chunk
  • Shared dependencies are extracted to common chunks
  • Tree-shaking removes unused code

Grid Performance ​

  • Kendo grids support virtual scrolling for large datasets
  • Server-side pagination for very large lists
  • Column virtualization for wide grids

Security & Access Control ​

Authentication ​

  • All modules require authentication via @barcoding/auth-core
  • JWT-based authentication
  • Session management

Authorization ​

  • ACL (Access Control List) system
  • Permission-based route guards
  • Component-level permission checks
  • API-level authorization

Data Security ​

  • Input sanitization
  • XSS protection
  • CSRF tokens
  • Encrypted data transmission

Syneo/Barcoding Documentation

Copyright © 2025