import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; import { RouterModule } from '@angular/router'; @NgModule({ imports: [ CommonModule, HttpClientModule, RouterModule ], exports: [ HttpClientModule, RouterModule ] }) export class CoreModule { } import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { BehaviorSubject, Observable, tap } from 'rxjs'; import { Router } from '@angular/router'; import { User } from '../models/user.model'; import { environment } from '../../../environments/environment'; @Injectable({ providedIn: 'root' }) export class AuthService { private currentUserSubject = new BehaviorSubject<User | null>(null); currentUser$ = this.currentUserSubject.asObservable(); constructor(private http: HttpClient, private router: Router) {} login(credentials: { email: string; password: string }): Observable<User> { return this.http.post<User>(`${environment.apiUrl}/auth/login`, credentials).pipe( tap(user => { this.currentUserSubject.next(user); localStorage.setItem('currentUser', JSON.stringify(user)); }) ); } register(userData: any): Observable<User> { return this.http.post<User>(`${environment.apiUrl}/auth/register`, userData); } logout(): void { localStorage.removeItem('currentUser'); this.currentUserSubject.next(null); this.router.navigate(['/auth/login']); } getCurrentUser(): User | null { return this.currentUserSubject.value; } hasPermission(permission: string): boolean { const user = this.getCurrentUser(); if (!user) return false; return user.permissions.includes(permission); } } export interface User { id: string; name: string; email: string; role: string; permissions: string[]; tenantId?: string; } import { Injectable } from '@angular/core'; import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router'; import { AuthService } from '../auth/auth.service'; @Injectable({ providedIn: 'root' }) export class AuthGuard implements CanActivate { constructor(private authService: AuthService, private router: Router) {} canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot ): boolean { if (this.authService.getCurrentUser()) { return true; } this.router.navigate(['/auth/login'], { queryParams: { returnUrl: state.url } }); return false; } } import { Injectable } from '@angular/core'; import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router'; import { AuthService } from '../auth/auth.service'; @Injectable({ providedIn: 'root' }) export class RoleGuard implements CanActivate { constructor(private authService: AuthService, private router: Router) {} canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot ): boolean { const requiredRoles = next.data['roles'] as Array<string>; const user = this.authService.getCurrentUser(); if (!user || !requiredRoles.includes(user.role)) { this.router.navigate(['/']); return false; } return true; } } import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { LoginComponent } from './login/login.component'; import { RegisterComponent } from './register/register.component'; import { AuthLayoutComponent } from './auth-layout/auth-layout.component'; @NgModule({ declarations: [ LoginComponent, RegisterComponent, AuthLayoutComponent ], imports: [ CommonModule, ReactiveFormsModule, RouterModule.forChild([ { path: '', component: AuthLayoutComponent, children: [ { path: 'login', component: LoginComponent }, { path: 'register', component: RegisterComponent }, { path: '', redirectTo: 'login', pathMatch: 'full' } ] } ]) ] }) export class AuthModule { } import { Component } from '@angular/core'; @Component({ selector: 'app-auth-layout', templateUrl: './auth-layout.component.html', styleUrls: ['./auth-layout.component.scss'] }) export class AuthLayoutComponent { }

.auth-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f5f5f5; } .auth-card { width: 100%; max-width: 400px; padding: 2rem; background: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { AuthService } from '../../core/auth/auth.service'; import { Router } from '@angular/router'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.scss'] }) export class LoginComponent { loginForm: FormGroup; errorMessage: string = ''; constructor( private fb: FormBuilder, private authService: AuthService, private router: Router ) { this.loginForm = this.fb.group({ email: ['', [Validators.required, Validators.email]], password: ['', Validators.required] }); } onSubmit(): void { if (this.loginForm.valid) { this.authService.login(this.loginForm.value).subscribe({ next: () => { const user = this.authService.getCurrentUser(); if (user?.role === 'admin') { this.router.navigate(['/admin']); } else { this.router.navigate(['/marketplace']); } }, error: (err) => { this.errorMessage = err.error.message || 'Login failed'; } }); } } } form { display: flex; flex-direction: column; gap: 1rem; h2 { text-align: center; margin-bottom: 1.5rem; } } .form-group { display: flex; flex-direction: column; gap: 0.5rem; label { font-weight: 500; } input { padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; &:focus { outline: none; border-color: #3f51b5; } } } .error-message { color: #f44336; font-size: 0.875rem; } button { padding: 0.75rem; background-color: #3f51b5; color: white; border: none; border-radius: 4px; font-size: 1rem; cursor: pointer; margin-top: 1rem; &:hover { background-color: #303f9f; } &:disabled { background-color: #9e9e9e; cursor: not-allowed; } } .register-link { text-align: center; margin-top: 1rem; a { color: #3f51b5; text-decoration: none; &:hover { text-decoration: underline; } } } import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { AuthService } from '../../core/auth/auth.service'; import { Router } from '@angular/router'; @Component({ selector: 'app-register', templateUrl: './register.component.html', styleUrls: ['./register.component.scss'] }) export class RegisterComponent { registerForm: FormGroup; errorMessage: string = ''; successMessage: string = ''; constructor( private fb: FormBuilder, private authService: AuthService, private router: Router ) { this.registerForm = this.fb.group({ name: ['', Validators.required], email: ['', [Validators.required, Validators.email]], password: ['', [Validators.required, Validators.minLength(6)]], confirmPassword: ['', Validators.required], role: ['customer', Validators.required] }, { validator: this.passwordMatchValidator }); } passwordMatchValidator(form: FormGroup) { return form.get('password')?.value === form.get('confirmPassword')?.value ? null : { mismatch: true }; } onSubmit(): void { if (this.registerForm.valid) { const { confirmPassword, ...userData } = this.registerForm.value; this.authService.register(userData).subscribe({ next: () => { this.successMessage = 'Registration successful! Please login.'; this.errorMessage = ''; setTimeout(() => { this.router.navigate(['/auth/login']); }, 2000); }, error: (err) => { this.errorMessage = err.error.message || 'Registration failed'; this.successMessage = ''; } }); } } } @import '../login/login.component.scss'; .form-group select { padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; background-color: white; width: 100%; &:focus { outline: none; border-color: #3f51b5; } } .success-message { color: #4caf50; font-size: 0.875rem; margin-top: 0.5rem; } import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; import { SharedModule } from '../shared/shared.module'; import { MarketplaceLayoutComponent } from './marketplace-layout/marketplace-layout.component'; import { TenantListComponent } from './tenant-list/tenant-list.component'; import { ProductListComponent } from './product-list/product-list.component'; import { CartComponent } from './cart/cart.component'; @NgModule({ declarations: [ MarketplaceLayoutComponent, TenantListComponent, ProductListComponent, CartComponent ], imports: [ CommonModule, SharedModule, RouterModule.forChild([ { path: '', component: MarketplaceLayoutComponent, children: [ { path: '', component: TenantListComponent }, { path: 'tenants/:tenantId/products', component: ProductListComponent }, { path: 'cart', component: CartComponent } ] } ]) ] }) export class MarketplaceModule { } import { Component } from '@angular/core'; @Component({ selector: 'app-marketplace-layout', templateUrl: './marketplace-layout.component.html', styleUrls: ['./marketplace-layout.component.scss'] }) export class MarketplaceLayoutComponent { }

Multi-Tenant Marketplace

.marketplace-container { display: flex; flex-direction: column; min-height: 100vh; } header { background-color: #3f51b5; color: white; padding: 1rem; display: flex; justify-content: space-between; align-items: center; h1 { margin: 0; font-size: 1.5rem; } nav { display: flex; gap: 1rem; a { color: white; text-decoration: none; padding: 0.5rem; border-radius: 4px; &:hover { background-color: rgba(255, 255, 255, 0.1); } } } } main { flex: 1; padding: 1rem; } import { Component, OnInit } from '@angular/core'; import { TenantService } from '../../core/services/tenant.service'; import { Tenant } from '../../core/models/tenant.model'; @Component({ selector: 'app-tenant-list', templateUrl: './tenant-list.component.html', styleUrls: ['./tenant-list.component.scss'] }) export class TenantListComponent implements OnInit { tenants: Tenant[] = []; isLoading = true; constructor(private tenantService: TenantService) {} ngOnInit(): void { this.tenantService.getTenants().subscribe({ next: (tenants) => { this.tenants = tenants; this.isLoading = false; }, error: () => { this.isLoading = false; } }); } }

Available Tenants

Loading tenants...

No tenants available

.tenant-list { max-width: 1200px; margin: 0 auto; padding: 1rem; h2 { margin-bottom: 1.5rem; color: #333; } } .loading, .no-tenants { text-align: center; padding: 2rem; color: #666; } .tenants-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .tenant-card { background: white; border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; &:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } h3 { margin-top: 0; color: #3f51b5; } p { color: #666; margin-bottom: 0; } } import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { ProductService } from '../../core/services/product.service'; import { Product } from '../../core/models/product.model'; import { CartService } from '../../core/services/cart.service'; @Component({ selector: 'app-product-list', templateUrl: './product-list.component.html', styleUrls: ['./product-list.component.scss'] }) export class ProductListComponent implements OnInit { products: Product[] = []; isLoading = true; tenantId: string | null = null; constructor( private route: ActivatedRoute, private productService: ProductService, private cartService: CartService ) {} ngOnInit(): void { this.tenantId = this.route.snapshot.paramMap.get('tenantId'); if (this.tenantId) { this.productService.getProductsByTenant(this.tenantId).subscribe({ next: (products) => { this.products = products; this.isLoading = false; }, error: () => { this.isLoading = false; } }); } } addToCart(product: Product): void { this.cartService.addToCart(product); } }

Products

Loading products...

No products available

${{ product.price }}

@import '../tenant-list/tenant-list.component.scss'; .product-list { max-width: 1200px; margin: 0 auto; padding: 1rem; } .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; } .product-card { background: white; border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; h3 { margin-top: 0; color: #3f51b5; } p { color: #666; margin: 0.5rem 0; flex-grow: 1; } .price { font-weight: bold; color: #4caf50; font-size: 1.25rem; } button { margin-top: 1rem; padding: 0.5rem; background-color: #3f51b5; color: white; border: none; border-radius: 4px; cursor: pointer; &:hover { background-color: #303f9f; } } } import { Component } from '@angular/core'; import { CartService } from '../../core/services/cart.service'; import { CartItem } from '../../core/models/cart-item.model'; @Component({ selector: 'app-cart', templateUrl: './cart.component.html', styleUrls: ['./cart.component.scss'] }) export class CartComponent { constructor(public cartService: CartService) {} removeItem(item: CartItem): void { this.cartService.removeFromCart(item); } updateQuantity(item: CartItem, quantity: number): void { if (quantity > 0) { this.cartService.updateQuantity(item, quantity); } else { this.removeItem(item); } } checkout(): void { // Implement checkout logic alert('Checkout functionality will be implemented here'); } }

Your Cart

Your cart is empty

${{ item.product.price }} each

${{ item.product.price * item.quantity }}

Order Summary

Subtotal ${{ cartService.subtotal }}

Tax ${{ cartService.tax }}

Total ${{ cartService.total }}

.cart-container { max-width: 1200px; margin: 0 auto; padding: 1rem; } .empty-cart { text-align: center; padding: 2rem; color: #666; } .cart-items { margin-bottom: 2rem; } .cart-item { display: flex; justify-content: space-between; padding: 1rem; border-bottom: 1px solid #eee; margin-bottom: 1rem; .item-info { flex: 2; h3 { margin-top: 0; color: #3f51b5; } p { color: #666; margin: 0.5rem 0; } .price { color: #4caf50; font-weight: bold; } } .item-actions { flex: 1; display: flex; flex-direction: column; align-items: flex-end; .quantity-control { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; button { width: 30px; height: 30px; border: 1px solid #ddd; background: white; border-radius: 4px; cursor: pointer; &:hover { background-color: #f5f5f5; } } } .total { font-weight: bold; margin: 0.5rem 0; } .remove { background: none; border: none; color: #f44336; cursor: pointer; padding: 0.25rem; font-size: 0.875rem; &:hover { text-decoration: underline; } } } } .cart-summary { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); max-width: 400px; margin-left: auto; h3 { margin-top: 0; color: #333; border-bottom: 1px solid #eee; padding-bottom: 0.5rem; } .summary-row { display: flex; justify-content: space-between; margin: 0.75rem 0; &.total { font-weight: bold; font-size: 1.1rem; margin-top: 1.5rem; padding-top: 0.75rem; border-top: 1px solid #eee; } } .checkout-btn { width: 100%; padding: 1rem; background-color: #4caf50; color: white; border: none; border-radius: 4px; font-size: 1rem; cursor: pointer; margin-top: 1rem; &:hover { background-color: #388e3c; } } } import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; import { ReactiveFormsModule } from '@angular/forms'; import { SharedModule } from '../shared/shared.module'; import { AdminLayoutComponent } from './admin-layout/admin-layout.component'; import { DashboardComponent } from './dashboard/dashboard.component'; import { TenantManagementComponent } from './tenant-management/tenant-management.component'; import { UserManagementComponent } from './user-management/user-management.component'; import { ProductManagementComponent } from './product-management/product-management.component'; import { OrderManagementComponent } from './order-management/order-management.component'; @NgModule({ declarations: [ AdminLayoutComponent, DashboardComponent, TenantManagementComponent, UserManagementComponent, ProductManagementComponent, OrderManagementComponent ], imports: [ CommonModule, ReactiveFormsModule, SharedModule, RouterModule.forChild([ { path: '', component: AdminLayoutComponent, children: [ { path: '', component: DashboardComponent }, { path: 'tenants', component: TenantManagementComponent }, { path: 'users', component: UserManagementComponent }, { path: 'products', component: ProductManagementComponent }, { path: 'orders', component: OrderManagementComponent } ] } ]) ] }) export class AdminModule { } import { Component } from '@angular/core'; @Component({ selector: 'app-admin-layout', templateUrl: './admin-layout.component.html', styleUrls: ['./admin-layout.component.scss'] }) export class AdminLayoutComponent { }

.admin-container { display: flex; min-height: 100vh; } .sidebar { width: 250px; background-color: #3f51b5; color: white; padding: 1rem; h2 { margin-top: 0; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } nav ul { list-style: none; padding: 0; margin: 0; li { margin-bottom: 0.5rem; a { display: block; color: white; text-decoration: none; padding: 0.5rem; border-radius: 4px; &:hover { background-color: rgba(255, 255, 255, 0.1); } &.active { background-color: rgba(255, 255, 255, 0.2); font-weight: bold; } } } } } .content { flex: 1; padding: 2rem; background-color: #f5f5f5; } import { Component } from '@angular/core'; @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.scss'] }) export class DashboardComponent { }

Admin Dashboard

Total Tenants

Total Users

156

Total Products

342

Total Orders

.dashboard { h1 { color: #333; margin-bottom: 2rem; } } .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; } .stat-card { background: white; border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); text-align: center; h3 { margin-top: 0; color: #666; font-size: 1rem; } .stat-value { font-size: 2rem; font-weight: bold; color: #3f51b5; margin: 0.5rem 0 0; } } import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { TenantService } from '../../core/services/tenant.service'; import { Tenant } from '../../core/models/tenant.model'; @Component({ selector: 'app-tenant-management', templateUrl: './tenant-management.component.html', styleUrls: ['./tenant-management.component.scss'] }) export class TenantManagementComponent implements OnInit { tenants: Tenant[] = []; tenantForm: FormGroup; isEditing = false; currentTenantId: string | null = null; constructor( private fb: FormBuilder, private tenantService: TenantService ) { this.tenantForm = this.fb.group({ name: ['', Validators.required], description: [''], domain: ['', Validators.required] }); } ngOnInit(): void { this.loadTenants(); } loadTenants(): void { this.tenantService.getTenants().subscribe(tenants => { this.tenants = tenants; }); } onSubmit(): void { if (this.tenantForm.valid) { const tenantData = this.tenantForm.value; if (this.isEditing && this.currentTenantId) { this.tenantService.updateTenant(this.currentTenantId, tenantData).subscribe(() => { this.loadTenants(); this.resetForm(); }); } else { this.tenantService.createTenant(tenantData).subscribe(() => { this.loadTenants(); this.resetForm(); }); } } } editTenant(tenant: Tenant): void { this.isEditing = true; this.currentTenantId = tenant.id; this.tenantForm.patchValue({ name: tenant.name, description: tenant.description, domain: tenant.domain }); } deleteTenant(tenantId: string): void { if (confirm('Are you sure you want to delete this tenant?')) { this.tenantService.deleteTenant(tenantId).subscribe(() => { this.loadTenants(); }); } } resetForm(): void { this.tenantForm.reset(); this.isEditing = false; this.currentTenantId = null; } }

Tenant Management

Tenants

Name	Domain	Description	Actions
{{ tenant.name }}	{{ tenant.domain }}	{{ tenant.description }}

.tenant-management { h1 { color: #333; margin-bottom: 2rem; } } .tenant-form { background: white; border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 2rem; h2 { margin-top: 0; color: #3f51b5; } } .form-group { margin-bottom: 1rem; label { display: block; margin-bottom: 0.5rem; font-weight: 500; } input, textarea { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; &:focus { outline: none; border-color: #3f51b5; } } textarea { min-height: 100px; } } .form-actions { display: flex; gap: 1rem; margin-top: 1rem; button { padding: 0.75rem 1.5rem; border: none; border-radius: 4px; font-size: 1rem; cursor: pointer; &:first-child { background-color: #3f51b5; color: white; &:hover { background-color: #303f9f; } &:disabled { background-color: #9e9e9e; cursor: not-allowed; } } &:last-child { background-color: #f5f5f5; color: #333; &:hover { background-color: #e0e0e0; } } } } .tenant-list { background: white; border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); h2 { margin-top: 0; color: #3f51b5; } } table { width: 100%; border-collapse: collapse; margin-top: 1rem; th, td { padding: 1rem; text-align: left; border-bottom: 1px solid #eee; } th { background-color: #f5f5f5; font-weight: 500; } .actions { display: flex; gap: 0.5rem; button { padding: 0.5rem 1rem; border: none; border-radius: 4px; font-size: 0.875rem; cursor: pointer; &:first-child { background-color: #2196f3; color: white; &:hover { background-color: #0b7dda; } } &:last-child { background-color: #f44336; color: white; &:hover { background-color: #d32f2f; } } } } } import { Component, OnInit } from '@angular/core'; import { UserService } from '../../core/services/user.service'; import { User } from '../../core/models/user.model'; @Component({ selector: 'app-user-management', templateUrl: './user-management.component.html', styleUrls: ['./user-management.component.scss'] }) export class UserManagementComponent implements OnInit { users: User[] = []; constructor(private userService: UserService) {} ngOnInit(): void { this.loadUsers(); } loadUsers(): void { this.userService.getUsers().subscribe(users => { this.users = users; }); } updateUserRole(userId: string, newRole: string): void { this.userService.updateUserRole(userId, newRole).subscribe(() => { this.loadUsers(); }); } deleteUser(userId: string): void { if (confirm('Are you sure you want to delete this user?')) { this.userService.deleteUser(userId).subscribe(() => { this.loadUsers(); }); } } }

User Management

Name	Email	Role	Tenant	Actions
{{ user.name }}	{{ user.email }}		{{ user.tenantId \|\| 'N/A' }}

@import '../tenant-management/tenant-management.component.scss'; .user-management { h1 { color: #333; margin-bottom: 2rem; } } .user-list { background: white; border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); table { width: 100%; border-collapse: collapse; margin-top: 1rem; th, td { padding: 1rem; text-align: left; border-bottom: 1px solid #eee; } th { background-color: #f5f5f5; font-weight: 500; } select { padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; background-color: white; } .actions { button { padding: 0.5rem 1rem; border: none; border-radius: 4px; font-size: 0.875rem; cursor: pointer; background-color: #f44336; color: white; &:hover { background-color: #d32f2f; } } } } } import { Component, OnInit } from '@angular/core'; import { ProductService } from '../../core/services/product.service'; import { Product } from '../../core/models/product.model'; import { TenantService } from '../../core/services/tenant.service'; import { Tenant } from '../../core/models/tenant.model'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-product-management', templateUrl: './product-management.component.html', styleUrls: ['./product-management.component.scss'] }) export class ProductManagementComponent implements OnInit { products: Product[] = []; tenants: Tenant[] = []; productForm: FormGroup; isEditing = false; currentProductId: string | null = null; constructor( private fb: FormBuilder, private productService: ProductService, private tenantService: TenantService ) { this.productForm = this.fb.group({ name: ['', Validators.required], description: [''], price: ['', [Validators.required, Validators.min(0)]], tenantId: ['', Validators.required] }); } ngOnInit(): void { this.loadProducts(); this.loadTenants(); } loadProducts(): void { this.productService.getAllProducts().subscribe(products => { this.products = products; }); } loadTenants(): void { this.tenantService.getTenants().subscribe(tenants => { this.tenants = tenants; }); } onSubmit(): void { if (this.productForm.valid) { const productData = this.productForm.value; if (this.isEditing && this.currentProductId) { this.productService.updateProduct(this.currentProductId, productData).subscribe(() => { this.loadProducts(); this.resetForm(); }); } else { this.productService.createProduct(productData).subscribe(() => { this.loadProducts(); this.resetForm(); }); } } } editProduct(product: Product): void { this.isEditing = true; this.currentProductId = product.id; this.productForm.patchValue({ name: product.name, description: product.description, price: product.price, tenantId: product.tenantId }); } deleteProduct(productId: string): void { if (confirm('Are you sure you want to delete this product?')) { this.productService.deleteProduct(productId).subscribe(() => { this.loadProducts(); }); } } resetForm(): void { this.productForm.reset(); this.isEditing = false; this.currentProductId = null; } }

Product Management

Products

Name	Description	Price	Tenant	Actions
{{ product.name }}	{{ product.description }}	${{ product.price }}	{{ getTenantName(product.tenantId) }}

@import '../tenant-management/tenant-management.component.scss'; .product-management { h1 { color: #333; margin-bottom: 2rem; } } .product-form { background: white; border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 2rem; h2 { margin-top: 0; color: #3f51b5; } } .product-list { background: white; border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); h2 { margin-top: 0; color: #3f51b5; } } import { Component, OnInit } from '@angular/core'; import { OrderService } from '../../core/services/order.service'; import { Order } from '../../core/models/order.model'; @Component({ selector: 'app-order-management', templateUrl: './order-management.component.html', styleUrls: ['./order-management.component.scss'] }) export class OrderManagementComponent implements OnInit { orders: Order[] = []; constructor(private orderService: OrderService) {} ngOnInit(): void { this.loadOrders(); } loadOrders(): void { this.orderService.getOrders().subscribe(orders => { this.orders = orders; }); } updateOrderStatus(orderId: string, newStatus: string): void { this.orderService.updateOrderStatus(orderId, newStatus).subscribe(() => { this.loadOrders(); }); } }

Order Management

Order ID	Customer	Total	Status	Date	Actions
{{ order.id }}	{{ order.customerName }}	${{ order.total }}		{{ order.createdAt \| date }}

@import '../tenant-management/tenant-management.component.scss'; .order-management { h1 { color: #333; margin-bottom: 2rem; } } .order-list { background: white; border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); table { width: 100%; border-collapse: collapse; margin-top: 1rem; th, td { padding: 1rem; text-align: left; border-bottom: 1px solid #eee; } th { background-color: #f5f5f5; font-weight: 500; } select { padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; background-color: white; } .actions { button { padding: 0.5rem 1rem; border: none; border-radius: 4px; font-size: 0.875rem; cursor: pointer; background-color: #2196f3; color: white; &:hover { background-color: #0b7dda; } } } } } import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; @NgModule({ imports: [ CommonModule, ReactiveFormsModule, RouterModule ], exports: [ CommonModule, ReactiveFormsModule, RouterModule ] }) export class SharedModule { } import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; import { Tenant } from '../models/tenant.model'; import { environment } from '../../../environments/environment'; @Injectable({ providedIn: 'root' }) export class TenantService { constructor(private http: HttpClient) {} getTenants(): Observable<Tenant[]> { return this.http.get<Tenant[]>(`${environment.apiUrl}/tenants`); } createTenant(tenantData: any): Observable<Tenant> { return this.http.post<Tenant>(`${environment.apiUrl}/tenants`, tenantData); } updateTenant(tenantId: string, tenantData: any): Observable<Tenant> { return this.http.put<Tenant>(`${environment.apiUrl}/tenants/${tenantId}`, tenantData); } deleteTenant(tenantId: string): Observable<void> { return this.http.delete<void>(`${environment.apiUrl}/tenants/${tenantId}`); } } export interface Tenant { id: string; name: string; description: string; domain: string; createdAt: Date; updatedAt: Date; } import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; import { Product } from '../models/product.model'; import { environment } from '../../../environments/environment'; @Injectable({ providedIn: 'root' }) export class ProductService { constructor(private http: HttpClient) {} getProductsByTenant(tenantId: string): Observable<Product[]> { return this.http.get<Product[]>(`${environment.apiUrl}/tenants/${tenantId}/products`); } getAllProducts(): Observable<Product[]> { return this.http.get<Product[]>(`${environment.apiUrl}/products`); } createProduct(productData: any): Observable<Product> { return this.http.post<Product>(`${environment.apiUrl}/products`, productData); } updateProduct(productId: string, productData: any): Observable<Product> { return this.http.put<Product>(`${environment.apiUrl}/products/${productId}`, productData); } deleteProduct(productId: string): Observable<void> { return this.http.delete<void>(`${environment.apiUrl}/products/${productId}`); } } export interface Product { id: string; name: string; description: string; price: number; tenantId: string; createdAt: Date; updatedAt: Date; } import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; import { User } from '../models/user.model'; import { environment } from '../../../environments/environment'; @Injectable({ providedIn: 'root' }) export class UserService { constructor(private http: HttpClient) {} getUsers(): Observable<User[]> { return this.http.get<User[]>(`${environment.apiUrl}/users`); } updateUserRole(userId: string, newRole: string): Observable<User> { return this.http.patch<User>(`${environment.apiUrl}/users/${userId}/role`, { role: newRole }); } deleteUser(userId: string): Observable<void> { return this.http.delete<void>(`${environment.apiUrl}/users/${userId}`); } } import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; import { Order } from '../models/order.model'; import { environment } from '../../../environments/environment'; @Injectable({ providedIn: 'root' }) export class OrderService { constructor(private http: HttpClient) {} getOrders(): Observable<Order[]> { return this.http.get<Order[]>(`${environment.apiUrl}/orders`); } updateOrderStatus(orderId: string, newStatus: string): Observable<Order> { return this.http.patch<Order>(`${environment.apiUrl}/orders/${orderId}/status`, { status: newStatus }); } } export interface Order { id: string; customerId: string; customerName: string; items: OrderItem[]; total: number; status: string; createdAt: Date; updatedAt: Date; } export interface OrderItem { productId: string; productName: string; quantity: number; price: number; } import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; import { Product } from '../models/product.model'; export interface CartItem { product: Product; quantity: number; } @Injectable({ providedIn: 'root' }) export class CartService { private cartItemsSubject = new BehaviorSubject<CartItem[]>([]); cartItems$ = this.cartItemsSubject.asObservable(); get cartItems(): CartItem[] { return this.cartItemsSubject.value; } get subtotal(): number { return this.cartItems.reduce((sum, item) => sum + (item.product.price * item.quantity), 0); } get tax(): number { return this.subtotal * 0.1; // 10% tax } get total(): number { return this.subtotal + this.tax; } addToCart(product: Product): void { const existingItem = this.cartItems.find(item => item.product.id === product.id); if (existingItem) { existingItem.quantity += 1; } else { this.cartItems.push({ product, quantity: 1 }); } this.cartItemsSubject.next([...this.cartItems]); } removeFromCart(item: CartItem): void { const index = this.cartItems.indexOf(item); if (index > -1) { this.cartItems.splice(index, 1); this.cartItemsSubject.next([...this.cartItems]); } } updateQuantity(item: CartItem, quantity: number): void { const existingItem = this.cartItems.find(cartItem => cartItem.product.id === item.product.id); if (existingItem) { existingItem.quantity = quantity; this.cartItemsSubject.next([...this.cartItems]); } } clearCart(): void { this.cartItemsSubject.next([]); } } import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { AppComponent } from './app.component'; import { CoreModule } from './core/core.module'; import { AuthModule } from './auth/auth.module'; import { MarketplaceModule } from './marketplace/marketplace.module'; import { AdminModule } from './admin/admin.module'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule, ReactiveFormsModule, CoreModule, AuthModule, MarketplaceModule, AdminModule, RouterModule.forRoot([ { path: '', redirectTo: '/marketplace', pathMatch: 'full' }, { path: 'auth', loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule) }, { path: 'marketplace', loadChildren: () => import('./marketplace/marketplace.module').then(m => m.MarketplaceModule) }, { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }, { path: '**', redirectTo: '/marketplace' } ]) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { }

/* Global styles can go here */ body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; line-height: 1.5; color: #333; } export const environment = { production: false, apiUrl: 'http://localhost:3000/api' }; export const environment = { production: true, apiUrl: 'https://api.yourdomain.com/api' };

Login

Register

Multi-Tenant Marketplace

Available Tenants

{{ tenant.name }}

Products

{{ product.name }}

Your Cart

{{ item.product.name }}

Order Summary

Admin Dashboard

Total Tenants

Total Users

Total Products

Total Orders

Tenant Management

{{ isEditing ? 'Edit Tenant' : 'Add New Tenant' }}

Tenants

User Management

Product Management

{{ isEditing ? 'Edit Product' : 'Add New Product' }}

Products

Order Management