Cloud-Based Architecture

{
  "name": "caad-erp",
  "version": "0.0.0",
  "dependencies": {
    "@angular/core": "^18.2.0",
    "@angular/platform-browser": "^18.2.0",
    "@angular/platform-server": "^18.2.0",
    "@angular/ssr": "^18.2.8",
    "express": "^4.18.2",
    "gsap": "^3.12.5",
    "animejs": "^3.2.2"
  }
}

// Server configuration from server.ts
import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr';
import express from 'express';

export function app(): express.Express {
  const server = express();
  const serverDistFolder = dirname(fileURLToPath(import.meta.url));
  const browserDistFolder = resolve(serverDistFolder, '../browser');
  const indexHtml = join(serverDistFolder, 'index.server.html');

  const commonEngine = new CommonEngine();

  server.set('view engine', 'html');
  server.set('views', browserDistFolder);

  // Serve static files from /browser
  server.get('**', express.static(browserDistFolder, {
    maxAge: '1y',
    index: 'index.html',
  }));

  // All regular routes use the Angular engine
  server.get('**', (req, res, next) => {
    commonEngine
      .render({
        bootstrap: AppServerModule,
        documentFilePath: indexHtml,
        url: `${protocol}://${headers.host}${originalUrl}`,
        publicPath: browserDistFolder,
        providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
      })
      .then((html) => res.send(html))
      .catch((err) => next(err));
  });

  return server;
}

// Real-time updates powered by Angular's reactive architecture
import { Component } from '@angular/core';
import { gsap } from 'gsap';

export class ERPComponent {
  // Multi-language support for global operations
  selectedLanguage = 'English';
  selectedFlag = 'Flags/unitedstates.png';
  
  languages = [
    { name: 'English', flag: 'Flags/unitedstates.png' },
    { name: 'UAE', flag: 'Flags/UAE.png' },
    { name: 'Malayalam', flag: 'Flags/india.png' },
  ];

  selectLanguage(language: {name: string; flag: string}){
    this.selectedLanguage = language.name;
    this.selectedFlag = language.flag;
    // Changes sync across all user sessions
  }
}

// Application module structure from app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule, provideClientHydration } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';
import { CaadLandingModule } from './caad-landing/caad-landing.module';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SharedModule,
  ],
  providers: [
    provideClientHydration()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

// SSR configuration for fast initial page loads
import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr';

// Server renders pages before sending to browser
commonEngine.render({
  bootstrap: AppServerModule,
  documentFilePath: indexHtml,
  url: `${protocol}://${headers.host}${originalUrl}`,
  publicPath: browserDistFolder,
  providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
})

// Static file serving with long-term caching
server.get('**', express.static(browserDistFolder, {
  maxAge: '1y',  // 1-year cache for static assets
  index: 'index.html',
}));

// Multi-language implementation from erp.component.ts:11-30
languageDropdown() {
  this.islanguageDropdownOpen = true;
}

selectLanguage(language: {name: string; flag: string}){
  this.selectedLanguage = language.name;
  this.selectedFlag = language.flag;
  this.islanguageDropdownOpen = false;
}

<!-- Integrated module navigation from erp.component.html -->
<section class="systems-layout">
  <div class="systems-item">
    <img src="landing/BillingPrinter.jpg" alt="Desktop POS" />
    <p>Desktop POS</p>
  </div>
  <div class="systems-item">
    <img src="landing/POS.jpg" alt="Mobile POS" />
    <p>Mobile POS</p>
  </div>
  <div class="systems-item">
    <img src="landing/4ee.png" alt="Tablet POS" />
    <p>Tablet POS</p>
  </div>
</section>