Saltar al contenido principal

ui

Purpose and Production Relevance​

ui is the production Angular dashboard for Crimoo. It is where users create GTMs, configure domains and custom loader behavior, manage CRM data, define offline conversion rules, inspect analytics, handle billing, and enter Copilot flows.

Production relevance: core production app.

Stack and Main Dependencies​

  • Angular 20 with standalone components.
  • RxJS, BehaviorSubject, and Angular Signals for state.
  • Angular Router guards and interceptors.
  • @ngx-translate/core for ES, EN, and PT-BR i18n.
  • Chart.js and ng2-charts for analytics visualizations.
  • Stripe browser library for checkout flows.
  • Tailwind-related utilities and icon packages.

Important files and folders:

  • ui/src/app/pages
  • ui/src/app/services
  • ui/src/app/guards
  • ui/src/app/interceptors
  • ui/src/app/models
  • ui/src/app/shared
  • ui/angular.json
  • ui/package.json

Business Responsibilities​

The dashboard turns Crimoo business operations into user workflows:

  • Authentication and account onboarding.
  • Workspace switching and team management.
  • GTM creation, listing, settings, domain setup, and custom loader configuration.
  • CRM contacts, deals, contact timeline, and capture settings.
  • Offline conversion platform credentials, trigger rules, and delivery history.
  • Analytics dashboard widgets and filters.
  • Billing plan selection, checkout, subscription status, and billing success/failure pages.
  • Copilot entry points and user-facing AI chat surfaces.

Technical Architecture and Entry Points​

The app is organized around route-level pages, reusable services, shared components, and request infrastructure.

Primary entry points:

  • src/app/pages contains feature screens.
  • src/app/services owns HTTP clients and cross-page state.
  • src/app/guards protects authenticated routes.
  • src/app/interceptors attaches request behavior.
  • src/app/models defines UI-facing TypeScript shapes.

State model:

  • Auth state is exposed through an auth service with observable user/session state.
  • Workspace state is centralized so backend requests can be scoped to the selected workspace.
  • CRM and dashboard state use local services rather than NgRx.
  • Global filters feed analytics widgets.

Key Data Flows and Service Integrations​

Auth​

The UI calls node-api auth endpoints under /api/auth/*. Production auth uses HTTP-only cookies, so Angular requests must use credentials.

Read:

GTM Setup​

The GTM pages call node-api, which persists control-plane records and calls gtm-fabric for runtime operations. The UI should not know container internals beyond status, logs, domains, loader settings, and health returned by the API.

Read:

CRM​

The CRM pages manage contacts, deals, fields, rules, and timelines. Capture can originate in browser events handled by gtm-fabric and the inspector.

Read:

Offline Conversions​

The UI configures platform credentials and trigger rules. node-api owns execution and delivery history.

Read:

Billing​

The UI starts checkout and renders subscription status. Stripe truth is reconciled in node-api through webhooks.

Read:

Environment, Deploy, and Runtime Notes​

Common commands:

cd ui
npm install
npm run start
npm run build
npm run build:es
npm run test

Local URL:

  • http://localhost:4200

Production:

  • Firebase Hosting project documented as crimoo-bf067.
  • Production API URL points to https://api.crimoo.com, which reaches gtm-proxy first and is forwarded to node-api.

Debugging Checklist​

  • If login works but protected requests fail, check cookies, withCredentials, CORS, and api.crimoo.com proxy routing.
  • If workspace data is mixed or missing, inspect current workspace state and whether requests include the expected workspace context.
  • If GTM actions appear stuck, check node-api GTM endpoints, fabric health, and lifecycle events.
  • If analytics widgets are empty, check global filters, widget query payloads, backend analytics endpoints, and ClickHouse data.
  • If CRM capture UI is out of sync, check capture config endpoints, inspector messages, and CRM state service refresh behavior.
  • If billing redirects fail, check the checkout endpoint response and Stripe return URLs.

Tests or Validation Commands​

cd ui
npm run test
npm run build

Manual smoke tests:

  • Login, refresh, and confirm the session survives.
  • Switch workspace and verify GTMs/CRM data change.
  • Create or open a GTM and inspect settings.
  • Open CRM contacts and timeline.
  • Open offline conversions tabs.
  • Start a billing checkout in a safe environment.

Mastery Checklist​

  • Explain every major route and which backend service it calls.
  • Add a new feature page with service, route guard, request model, and error state.
  • Trace an Angular action through node-api and back to UI feedback.
  • Know when UI state belongs in a feature component, shared service, or global workspace/filter service.
  • Debug auth and CORS issues without changing backend business rules blindly.