Site

Management App Frontend

This project was generated with Angular CLI version 18.2.6. Angular 18 frontend for Management App - a comprehensive business management platform for streamlining operations, managing teams, and driving business growth.

Development server

Architecture at a Glance

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Browser (Angular app)
  ├─ Routing layer (AppRoutingModule)
  │   ├─ Public pages: home, services, refurbished
  │   └─ Admin pages: dashboard, admin, notifications, add-*
  ├─ UI layer
  │   ├─ pages/        (route-level screens)
  │   ├─ components/   (reusable sections/widgets)
  │   └─ shared/       (cross-cutting UI like OTP/confirmation)
  ├─ State + domain services
  │   ├─ AuthService
  │   ├─ QuotationService
  │   ├─ NotificationsService
  │   └─ SharedService
  └─ HTTP integration
      └─ Backend API via environment.API_URL

Code scaffolding

Tech Stack

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

• Angular 18 (NgModule-based)
• Angular Router + route guards
• Angular Material + ng-bootstrap + Bootstrap + Font Awesome
• RxJS (Observable, BehaviorSubject)
• Angular HttpClient
• Angular CLI build system with Netlify deployment config

Build

Source Layout

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

src/
  app/
    app.module.ts                # Root module (composition root)
    app-routing.module.ts        # Route table + guards
    app.module.server.ts         # Server module for SSR build target
    components/                  # Reusable UI building blocks
    pages/                       # Route-level page components
    services/                    # Data access and local app state
    guards/                      # Access control for routes
    shared/                      # Shared cross-page components
    pipes/                       # Presentation transforms
    models/                      # Interfaces and contracts
  environment/
    environment.ts               # Dev runtime config
    environment.prod.ts          # Prod runtime config (rewritten by set-env.js)
  main.ts                        # Browser bootstrap
  main.server.ts                 # Server bootstrap export
set-env.js                       # Injects API_URL for production build
netlify.toml                     # Build/publish/redirect settings

Running unit tests

Core Architectural Decisions

Run ng test to execute the unit tests via Karma.

1 Composition Root: AppModule

AppModule wires all declarations/imports, provides client hydration, and uses HashLocationStrategy for route URLs.

Running end-to-end tests

Impact: route navigation is hash-based (example: /#/home) instead of path-based.

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

2 Route-Driven Screens

AppRoutingModule maps URLs to page components. The app is organized as:

Further help

• Public routes: /home, /services, /refurbished
• Restricted/admin routes: /dashboard, /admin, /notifications, /add-product, /add-user, /add-client
• Default redirect: '' → /home

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

3 Guard Model

• AuthGuard: strict auth check (AuthService.isAuthenticated()), redirects unauthorized users to /home.
• DevAuthGuard: development bypass that seeds localStorage auth values when missing, then allows access.

Current behavior: admin routes currently use DevAuthGuard.

4 Service Boundaries

• AuthService
  • Calls auth endpoints (/auth/login, /auth/signup, /auth/verify, /auth/refresh)
  • Persists token/user/expiry to localStorage
  • Publishes auth state via isAuthenticated$
• QuotationService
  • Loads quotations and triggers quote email/PDF operations
• NotificationsService
  • In-memory notifications stream with unread counters
• SharedService
  • Lightweight shared user state utility

5 Configuration and Environment Strategy

• Development API base URL: http://localhost:8080
• Production API base URL defaults to '/'
• set-env.js rewrites environment.prod.ts using process.env.API_URL at build time

Why: enables environment-specific API targets without source changes.

Runtime Flow (Typical Request)

1. Component/page handles user interaction.
2. Component calls a service method.
3. Service builds URL from environment.API_URL.
4. HttpClient returns an observable.
5. Component updates UI based on response.
6. For auth flows, token and user state are persisted and broadcast.

Build, Test, and Run

npm install
npm start            # Dev server
npm run build        # Production build
npm run test         # Unit tests (Karma/Jasmine)
npm run build:netlify

Deployment Notes (Netlify)

• Build command: node set-env.js && ng build --configuration production
• Publish directory: dist/site/browser
• SPA redirect fallback configured to index.html

Known Architecture Follow-Ups

• Replace DevAuthGuard on sensitive routes with production-grade authorization.
• Add strict response interfaces (reduce any usage in services).
• Consider feature modules if domain scope keeps growing.