feat(i18n): translate the motorcycle flow (3.6)

bikontrol-web/src/app/modules/dashboard/components/dashboard-layout/dashboard-layout.component.html

@@ -4,7 +4,7 @@
   <div
     class="fixed top-16 left-0 right-0 z-10 bg-amber-100 border-b border-amber-300 text-amber-900 text-center text-sm py-2 px-4"
   >
-    Estás viendo la demo en modo solo lectura — los cambios están deshabilitados.
+    {{ 'dash.demoBanner' | t }}
   </div>
 }
 

bikontrol-web/src/app/modules/dashboard/components/dashboard-layout/dashboard-layout.component.ts

@@ -5,9 +5,11 @@ import { BottomNavComponent } from '../../../../shared/components/bottom-nav/bot
 import { RouterOutlet } from '@angular/router';
 import { AuthService } from '../../../auth/services/auth.service';
 
+import { TranslatePipe } from '../../../../shared/i18n/translate.pipe';
+
 @Component({
   selector: 'app-dashboard-layout',
-  imports: [TopNavComponent, BottomNavComponent, RouterOutlet],
+  imports: [TopNavComponent, BottomNavComponent, RouterOutlet, TranslatePipe],
   templateUrl: './dashboard-layout.component.html',
   changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './dashboard-layout.component.scss',

bikontrol-web/src/app/modules/dashboard/components/motorcycle-card/motorcycle-card.component.html

@@ -25,7 +25,9 @@
       {{ motorcycle.name }}
     </h2>
     <p class="text-gray-500 text-sm">{{ motorcycle.brand }} - {{ motorcycle.year }}</p>
-    <p class="text-sm mt-1 text-gray-700">Apodo: {{ motorcycle.nickname }}</p>
+    <p class="text-sm mt-1 text-gray-700">
+      {{ 'motoCard.nickname' | t: { name: motorcycle.nickname } }}
+    </p>
 
     <p class="mt-2 flex items-center text-gray-600 text-sm">
       <img src="/icons/route.svg" class="w-5 h-5 mr-1 text-primary" alt="route icon" />
@@ -66,7 +68,7 @@
           85-28-29 57 57-29-28Z"
               />
             </svg>
-            <span>Editar</span>
+            <span>{{ 'motoCard.edit' | t }}</span>
           </button>
           <button
             (click)="confirmDelete($event)"
@@ -86,7 +88,7 @@
             0h80v-360h-80v360ZM280-720v520-520Z"
               />
             </svg>
-            <span>Borrar</span>
+            <span>{{ 'motoCard.delete' | t }}</span>
           </button>
         </div>
       }

bikontrol-web/src/app/modules/dashboard/components/motorcycle-card/motorcycle-card.component.ts

@@ -16,9 +16,12 @@ import { SwalService } from '../../../../shared/services/swal.service';
 import { HttpErrorService } from '../../../../shared/services/http-error.service';
 import { AuthService } from '../../../auth/services/auth.service';
 
+import { TranslatePipe } from '../../../../shared/i18n/translate.pipe';
+import { I18nService } from '../../../../shared/i18n/i18n.service';
+
 @Component({
   selector: 'app-motorcycle-card',
-  imports: [],
+  imports: [TranslatePipe],
   templateUrl: './motorcycle-card.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrl: './motorcycle-card.component.scss',
@@ -29,6 +32,7 @@ export class MotorcycleCardComponent implements OnInit {
   private swal = inject(SwalService);
   private httpError = inject(HttpErrorService);
   private authService = inject(AuthService);
+  private i18n = inject(I18nService);
 
   @Input() motorcycle!: Motorcycle;
   @Output() deleted = new EventEmitter<void>();
@@ -67,14 +71,11 @@ export class MotorcycleCardComponent implements OnInit {
     this.motorcyclesService.deleteMotorcycle(this.motorcycle.id!).subscribe({
       next: () => {
         this.swal
-          .success('¡Eliminada!', 'La motocicleta fue eliminada correctamente.')
+          .success(this.i18n.t('motoCard.deletedTitle'), this.i18n.t('motoCard.deletedText'))
           .then(() => this.deleted.emit());
       },
       error: (err) => {
-        this.swal.error(
-          'Error',
-          this.httpError.message(err, 'No se pudo eliminar la motocicleta.'),
-        );
+        this.swal.error('Error', this.httpError.message(err, this.i18n.t('motoCard.deleteError')));
       },
     });
   }
@@ -84,10 +85,10 @@ export class MotorcycleCardComponent implements OnInit {
 
     this.swal
       .confirm(
-        '¿Estás seguro?',
-        `Esto eliminará permanentemente "${this.motorcycle.name}".`,
-        'Sí, eliminar',
-        'Cancelar',
+        this.i18n.t('motoCard.deleteConfirmTitle'),
+        this.i18n.t('motoCard.deleteConfirmText', { name: this.motorcycle.name }),
+        this.i18n.t('common.yesDelete'),
+        this.i18n.t('common.cancel'),
         'warning',
       )
       .then((result) => {

bikontrol-web/src/app/modules/dashboard/pages/home/home.component.html

@@ -1,19 +1,17 @@
 <div class="p-4">
-  <h1 class="text-2xl font-bold mb-2 text-center">Bienvenido de nuevo</h1>
-  <p class="text-gray-400 mb-4 text-center">Tus motocicletas</p>
+  <h1 class="text-2xl font-bold mb-2 text-center">{{ 'home.welcome' | t }}</h1>
+  <p class="text-gray-400 mb-4 text-center">{{ 'home.subtitle' | t }}</p>
 
   @if (motorcycles.value().length === 0) {
     <div class="bg-card rounded-xl p-6 mt-6 text-center">
-      <h2 class="text-lg font-bold text-primary mb-2">¡Te damos la bienvenida!</h2>
-      <p class="text-sm text-textdark mb-4">
-        Agregá tu moto y elegí un plan de mantenimiento en un par de minutos.
-      </p>
+      <h2 class="text-lg font-bold text-primary mb-2">{{ 'home.emptyTitle' | t }}</h2>
+      <p class="text-sm text-textdark mb-4">{{ 'home.emptyText' | t }}</p>
       @if (!isDemo) {
         <button
           routerLink="/dashboard/onboarding"
           class="w-full py-2 bg-primary text-textlight rounded-lg hover:bg-accent transition-colors font-semibold"
         >
-          Comenzar
+          {{ 'home.start' | t }}
         </button>
       }
     </div>
@@ -34,7 +32,7 @@ <h2 class="text-lg font-bold text-primary mb-2">¡Te damos la bienvenida!</h2>
         routerLink="/dashboard/motorcycles/add"
         class="w-full mt-6 py-2 bg-primary text-textlight rounded-lg hover:bg-accent transition-colors"
       >
-        + Agregar motocicleta
+        {{ 'home.addMotorcycle' | t }}
       </button>
     </div>
   }

bikontrol-web/src/app/modules/dashboard/pages/home/home.component.ts

@@ -6,9 +6,11 @@ import { MotorcyclesService } from '../../service/motorcycles.service';
 import { SwalService } from '../../../../shared/services/swal.service';
 import { HttpErrorService } from '../../../../shared/services/http-error.service';
 
+import { TranslatePipe } from '../../../../shared/i18n/translate.pipe';
+
 @Component({
   selector: 'app-home',
-  imports: [MotorcycleCardComponent, RouterModule],
+  imports: [MotorcycleCardComponent, RouterModule, TranslatePipe],
   templateUrl: './home.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrl: './home.component.scss',