From 7ebaff322cac8d957c1b4619e42c0eb483fdb460 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20K=C3=BCng?= <joekueng05@gmail.com>
Date: Thu, 12 Feb 2026 12:44:12 +0100
Subject: [PATCH] feat(web): improvements in routes for calculator

---
 frontend/src/app/app.routes.ts                |  2 +-
 .../src/app/core/layout/navbar.component.html |  2 +-
 .../calculator/calculator-page.component.ts   | 20 +++++++++++++++----
 .../features/calculator/calculator.routes.ts  |  4 +++-
 .../src/app/features/home/home.component.html |  4 ++--
 5 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts
index 9d013b7..183f658 100644
--- a/frontend/src/app/app.routes.ts
+++ b/frontend/src/app/app.routes.ts
@@ -10,7 +10,7 @@ export const routes: Routes = [
         loadComponent: () => import('./features/home/home.component').then(m => m.HomeComponent)
       },
       { 
-        path: 'cal', 
+        path: 'calculator', 
         loadChildren: () => import('./features/calculator/calculator.routes').then(m => m.CALCULATOR_ROUTES) 
       },
       { 
diff --git a/frontend/src/app/core/layout/navbar.component.html b/frontend/src/app/core/layout/navbar.component.html
index 5c1fd28..189ff6f 100644
--- a/frontend/src/app/core/layout/navbar.component.html
+++ b/frontend/src/app/core/layout/navbar.component.html
@@ -10,7 +10,7 @@
 
         <nav class="nav-links" [class.open]="isMenuOpen">
           <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" (click)="closeMenu()">{{ 'NAV.HOME' | translate }}</a>
-          <a routerLink="/cal" routerLinkActive="active" [routerLinkActiveOptions]="{exact: false}" (click)="closeMenu()">{{ 'NAV.CALCULATOR' | translate }}</a>
+          <a routerLink="/calculator/basic" routerLinkActive="active" [routerLinkActiveOptions]="{exact: false}" (click)="closeMenu()">{{ 'NAV.CALCULATOR' | translate }}</a>
           <a routerLink="/shop" routerLinkActive="active" (click)="closeMenu()">{{ 'NAV.SHOP' | translate }}</a>
           <a routerLink="/about" routerLinkActive="active" (click)="closeMenu()">{{ 'NAV.ABOUT' | translate }}</a>
           <a routerLink="/contact" routerLinkActive="active" (click)="closeMenu()">{{ 'NAV.CONTACT' | translate }}</a>
diff --git a/frontend/src/app/features/calculator/calculator-page.component.ts b/frontend/src/app/features/calculator/calculator-page.component.ts
index 99dfad1..dc08f1e 100644
--- a/frontend/src/app/features/calculator/calculator-page.component.ts
+++ b/frontend/src/app/features/calculator/calculator-page.component.ts
@@ -1,4 +1,4 @@
-import { Component, signal, ViewChild, ElementRef } from '@angular/core';
+import { Component, signal, ViewChild, ElementRef, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 
@@ -9,7 +9,7 @@ import { QuoteResultComponent } from './components/quote-result/quote-result.com
 import { QuoteRequest, QuoteResult, QuoteEstimatorService } from './services/quote-estimator.service';
 import { UserDetailsComponent } from './components/user-details/user-details.component';
 import { SuccessStateComponent } from '../../shared/components/success-state/success-state.component';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-calculator-page',
@@ -18,7 +18,7 @@ import { Router } from '@angular/router';
   templateUrl: './calculator-page.component.html',
   styleUrl: './calculator-page.component.scss'
 })
-export class CalculatorPageComponent {
+export class CalculatorPageComponent implements OnInit {
   mode = signal<any>('easy');
   step = signal<'upload' | 'quote' | 'details' | 'success'>('upload');
   
@@ -32,7 +32,19 @@ export class CalculatorPageComponent {
   @ViewChild('uploadForm') uploadForm!: UploadFormComponent;
   @ViewChild('resultCol') resultCol!: ElementRef;
 
-  constructor(private estimator: QuoteEstimatorService, private router: Router) {}
+  constructor(
+    private estimator: QuoteEstimatorService, 
+    private router: Router,
+    private route: ActivatedRoute
+  ) {}
+
+  ngOnInit() {
+    this.route.data.subscribe(data => {
+      if (data['mode']) {
+        this.mode.set(data['mode']);
+      }
+    });
+  }
 
   onCalculate(req: QuoteRequest) {
     // ... (logic remains the same, simplified for diff)
diff --git a/frontend/src/app/features/calculator/calculator.routes.ts b/frontend/src/app/features/calculator/calculator.routes.ts
index 39a0c2e..739f736 100644
--- a/frontend/src/app/features/calculator/calculator.routes.ts
+++ b/frontend/src/app/features/calculator/calculator.routes.ts
@@ -2,5 +2,7 @@ import { Routes } from '@angular/router';
 import { CalculatorPageComponent } from './calculator-page.component';
 
 export const CALCULATOR_ROUTES: Routes = [
-  { path: '', component: CalculatorPageComponent }
+  { path: '', redirectTo: 'basic', pathMatch: 'full' },
+  { path: 'basic', component: CalculatorPageComponent, data: { mode: 'easy' } },
+  { path: 'advanced', component: CalculatorPageComponent, data: { mode: 'advanced' } }
 ];
diff --git a/frontend/src/app/features/home/home.component.html b/frontend/src/app/features/home/home.component.html
index f1c0826..4d4b943 100644
--- a/frontend/src/app/features/home/home.component.html
+++ b/frontend/src/app/features/home/home.component.html
@@ -15,7 +15,7 @@
               Se devi ancora crearlo, il nostro team di design lo progetterà per te.
             </p>
             <div class="hero-actions">
-              <app-button variant="primary" routerLink="/cal">Calcola Preventivo</app-button>
+              <app-button variant="primary" routerLink="/calculator/basic">Calcola Preventivo</app-button>
               <app-button variant="outline" routerLink="/shop">Vai allo shop</app-button>
               <app-button variant="text" routerLink="/contact">Parla con noi</app-button>
             </div>
@@ -49,7 +49,7 @@
               <li>Ricevi subito costo e tempo</li>
             </ul>
             <div class="quote-actions">
-              <app-button variant="primary" [fullWidth]="true" routerLink="/cal">Apri calcolatore</app-button>
+              <app-button variant="primary" [fullWidth]="true" routerLink="/calculator/basic">Apri calcolatore</app-button>
               <app-button variant="outline" [fullWidth]="true" routerLink="/contact">Parla con noi</app-button>
             </div>
           </app-card>