piraidasan/tms-frontend

Purpose and runtime

TMS Frontend is an Angular 20 single-page administrative application for token/queue management. It supports dashboard monitoring, kiosk/token operations, location and workflow setup, users/roles/features, global configuration, and operational reports. It runs in the browser; Angular CLI provides local serving and production builds. Entry points are src/main.ts, src/app/app.ts, and src/app/app.config.ts.

Application shell and navigation

The root application composes global providers, styles, and route rendering. Route definitions determine public versus management screens, while the dashboard layout provides persistent navbar/sidebar chrome for authenticated areas.

• src/app/app.routes.ts

• src/app/components/layout/dashboard-layout.component.ts

• src/app/components/sidebar/sidebar.component.ts

Authentication and route boundary

Login and location-login pages establish the authenticated context. An auth guard protects restricted routes; AuthService owns auth-related client behavior, with environment auth configuration separating deployment settings.

• src/app/pages/login/login.component.ts

• src/app/core/guards/auth.guard.ts

• src/app/core/services/auth.service.ts

• src/environments/auth-config.ts

API access and service layer

Page components call domain-specific services, which centralize backend resource access. HttpWrapperService, API configuration, response interfaces, and BaseCrudService form the shared HTTP/error/CRUD boundary. The backend itself is external and not included in this repository.

• src/app/core/services/http-wrapper.service.ts

• src/app/core/services/base-crud.service.ts

• src/app/core/services/api-config.service.ts

• src/app/services/token-transaction.service.ts

Operational domains

Management functionality is organized by page/service pairs: location hierarchy and counters, workflow stages/service categories, customer/application settings, and user roles/features/accounts. Create/edit/list pages are separate routed feature screens over these domains.

• src/app/pages/location-management/location-management.component.ts

• src/app/services/location-management/location.service.ts

• src/app/pages/workflow-management/workflow-management.component.ts

• src/app/services/workflow-management/stage.service.ts

• src/app/services/user-management/user.service.ts

Kiosk, dashboard, and reporting flows

The kiosk and Enjaz token-management screens initiate or manage token transactions; dashboard data is loaded through its dedicated service. Report pages query historical, queue-list, and TAT report services and present operational analysis.

• src/app/pages/kiosk/kiosk.component.ts

• src/app/pages/dashboard/dashboard.component.ts

• src/app/services/dashboard/dashboard.service.ts

• src/app/services/reports/tat-report.service.ts

Client state and reusable interaction layer

State services retain selected location, feature/role data, master data, and tabs across routed views. A refresh bus coordinates invalidation/reload behavior. Shared UI components provide tables, forms, modal confirmation, notifications, date ranges, and icon rendering; pages should use these rather than duplicate interaction primitives.

• src/app/services/state/location-state.service.ts

• src/app/services/state/master-data-store.service.ts

• src/app/core/services/refresh-bus.service.ts

• src/app/components/common/dynamic-table/dynamic-table.component.ts

• src/app/components/common/notification/toast-notification.component.ts

Deployment assets and localization

Build/runtime configuration varies by environment (development, UAT, production). The frontend ships static kiosk/icon assets and translation catalogs, including Arabic, German, English, and Italian.

• src/environments/environment.ts

• src/environments/environment.uat.ts

• src/environments/environment.prod.ts

• src/assets/i18n/en.json

• public/assets/kiosk