feat(account-page): implement account layout with sidebar, profile form, and purchase list components

src/app/features/store/pages/account-page/account-layout/account-layout.html

@@ -0,0 +1,6 @@
+    <div class="account-layout">
+      <app-account-sidebar class="account-sidebar"></app-account-sidebar>
+      <div class="account-content">
+        <router-outlet></router-outlet>
+      </div>
+    </div>

src/app/features/store/pages/account-page/account-layout/account-layout.scss

@@ -0,0 +1,16 @@
+.account-layout {
+  display: flex;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px 20px;
+  gap: 40px;
+  background-color: #f7f7f7;
+  min-height: calc(100vh - 100px);
+}
+.account-sidebar {
+  width: 250px;
+  flex-shrink: 0;
+}
+.account-content {
+  flex: 1;
+}

src/app/features/store/pages/account-page/account-layout/account-layout.ts

@@ -6,31 +6,7 @@ import { AccountSidebar } from '../components/account-sidebar/account-sidebar';
   selector: 'app-account-layout',
   standalone: true,
   imports: [RouterOutlet, AccountSidebar],
-  template: `
+  templateUrl: './account-layout.html',
-    <div class="account-layout">
+  styleUrl: './account-layout.scss',
-      <app-account-sidebar class="account-sidebar"></app-account-sidebar>
-      <div class="account-content">
-        <router-outlet></router-outlet>
-      </div>
-    </div>
-  `,
-  styles: `
-    .account-layout {
-      display: flex;
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 40px 20px;
-      gap: 40px;
-      background-color: #f7f7f7;
-      min-height: calc(100vh - 100px);
-    }
-    .account-sidebar {
-      width: 250px;
-      flex-shrink: 0;
-    }
-    .account-content {
-      flex: 1;
-    }
-  `,
 })
 export class AccountLayout {}

src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.html

@@ -0,0 +1,8 @@
+    <div class="sidebar-container">
+      <h2 class="sidebar-title">MI CUENTA</h2>
+      <div class="divider"></div>
+      <nav class="sidebar-nav">
+        <a routerLink="/mi-cuenta/datos-personales" routerLinkActive="active" class="nav-link">Datos Personales</a>
+        <a routerLink="/mi-cuenta/compras" routerLinkActive="active" class="nav-link">Mis compras</a>
+      </nav>
+    </div>

src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.scss

@@ -0,0 +1,34 @@
+.sidebar-container {
+  display: flex;
+  flex-direction: column;
+}
+.sidebar-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #1a1a1a;
+  margin-bottom: 12px;
+}
+.divider {
+  height: 1px;
+  background-color: #e0e0e0;
+  margin-bottom: 20px;
+}
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.nav-link {
+  text-decoration: none;
+  color: #888;
+  font-size: 14px;
+  font-weight: 500;
+  transition: color 0.2s;
+}
+.nav-link:hover {
+  color: #5a5a5a;
+}
+.nav-link.active {
+  color: #5b75ff; /* Blue color matching the image */
+  font-weight: 600;
+}

src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.ts

@@ -5,51 +5,7 @@ import { RouterLink, RouterLinkActive } from '@angular/router';
   selector: 'app-account-sidebar',
   standalone: true,
   imports: [RouterLink, RouterLinkActive],
-  template: `
+  templateUrl: './account-sidebar.html',
-    <div class="sidebar-container">
+  styleUrl: './account-sidebar.scss',
-      <h2 class="sidebar-title">MI CUENTA</h2>
-      <div class="divider"></div>
-      <nav class="sidebar-nav">
-        <a routerLink="/mi-cuenta/datos-personales" routerLinkActive="active" class="nav-link">Datos Personales</a>
-        <a routerLink="/mi-cuenta/compras" routerLinkActive="active" class="nav-link">Mis compras</a>
-      </nav>
-    </div>
-  `,
-  styles: `
-    .sidebar-container {
-      display: flex;
-      flex-direction: column;
-    }
-    .sidebar-title {
-      font-size: 16px;
-      font-weight: bold;
-      color: #1a1a1a;
-      margin-bottom: 12px;
-    }
-    .divider {
-      height: 1px;
-      background-color: #e0e0e0;
-      margin-bottom: 20px;
-    }
-    .sidebar-nav {
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-    }
-    .nav-link {
-      text-decoration: none;
-      color: #888;
-      font-size: 14px;
-      font-weight: 500;
-      transition: color 0.2s;
-    }
-    .nav-link:hover {
-      color: #5a5a5a;
-    }
-    .nav-link.active {
-      color: #5b75ff; /* Blue color matching the image */
-      font-weight: 600;
-    }
-  `,
 })
 export class AccountSidebar {}

src/app/features/store/pages/account-page/components/profile-form/profile-form.html

@@ -0,0 +1,56 @@
+    <form [formGroup]="profileForm" class="profile-form">
+      <div class="form-group">
+        <label>Nombre y Apellido:</label>
+        <app-input
+          type="text"
+          placeholder="Descripción"
+          [value]="profileForm.controls['fullName'].value"
+          (valueChange)="profileForm.controls['fullName'].setValue($event)"
+        ></app-input>
+      </div>
+      
+      <div class="form-group">
+        <label>Email:</label>
+        <app-input
+          type="email"
+          placeholder="Descripción"
+          [value]="profileForm.controls['email'].value"
+          (valueChange)="profileForm.controls['email'].setValue($event)"
+        ></app-input>
+      </div>
+      
+      <div class="form-group">
+        <label>DNI:</label>
+        <app-input
+          type="text"
+          placeholder="Descripción"
+          [value]="profileForm.controls['dni'].value"
+          (valueChange)="profileForm.controls['dni'].setValue($event)"
+        ></app-input>
+      </div>
+      
+      <div class="form-group">
+        <label>Teléfono:</label>
+        <app-input
+          type="text"
+          placeholder="Descripción"
+          [value]="profileForm.controls['phone'].value"
+          (valueChange)="profileForm.controls['phone'].setValue($event)"
+        ></app-input>
+      </div>
+      
+      <div class="form-group">
+        <label>Contraseña:</label>
+        <app-input
+          type="password"
+          placeholder="Descripción"
+          [value]="profileForm.controls['password'].value"
+          (valueChange)="profileForm.controls['password'].setValue($event)"
+        ></app-input>
+      </div>
+      
+      <div class="form-actions">
+        <app-button type="button" variant="cancel" hostClass="action-btn">Cancelar</app-button>
+        <app-button type="submit" variant="primary" hostClass="action-btn">Guardar</app-button>
+      </div>
+    </form>

src/app/features/store/pages/account-page/components/profile-form/profile-form.scss

@@ -0,0 +1,24 @@
+.profile-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 500px;
+}
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.form-group label {
+  font-size: 14px;
+  color: #888;
+}
+.form-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 16px;
+}
+.action-btn {
+  flex: 1;
+  display: block;
+}

src/app/features/store/pages/account-page/components/profile-form/profile-form.ts

@@ -7,90 +7,8 @@ import { ButtonComponent } from '../../../../../../shared/components/button/butt
   selector: 'app-profile-form',
   standalone: true,
   imports: [ReactiveFormsModule, InputComponent, ButtonComponent],
-  template: `
+  templateUrl: './profile-form.html',
-    <form [formGroup]="profileForm" class="profile-form">
+  styleUrl: './profile-form.scss',
-      <div class="form-group">
-        <label>Nombre y Apellido:</label>
-        <app-input
-          type="text"
-          placeholder="Descripción"
-          [value]="profileForm.controls['fullName'].value"
-          (valueChange)="profileForm.controls['fullName'].setValue($event)"
-        ></app-input>
-      </div>
-      
-      <div class="form-group">
-        <label>Email:</label>
-        <app-input
-          type="email"
-          placeholder="Descripción"
-          [value]="profileForm.controls['email'].value"
-          (valueChange)="profileForm.controls['email'].setValue($event)"
-        ></app-input>
-      </div>
-      
-      <div class="form-group">
-        <label>DNI:</label>
-        <app-input
-          type="text"
-          placeholder="Descripción"
-          [value]="profileForm.controls['dni'].value"
-          (valueChange)="profileForm.controls['dni'].setValue($event)"
-        ></app-input>
-      </div>
-      
-      <div class="form-group">
-        <label>Teléfono:</label>
-        <app-input
-          type="text"
-          placeholder="Descripción"
-          [value]="profileForm.controls['phone'].value"
-          (valueChange)="profileForm.controls['phone'].setValue($event)"
-        ></app-input>
-      </div>
-      
-      <div class="form-group">
-        <label>Contraseña:</label>
-        <app-input
-          type="password"
-          placeholder="Descripción"
-          [value]="profileForm.controls['password'].value"
-          (valueChange)="profileForm.controls['password'].setValue($event)"
-        ></app-input>
-      </div>
-      
-      <div class="form-actions">
-        <app-button type="button" variant="cancel" hostClass="action-btn">Cancelar</app-button>
-        <app-button type="submit" variant="primary" hostClass="action-btn">Guardar</app-button>
-      </div>
-    </form>
-  `,
-  styles: `
-    .profile-form {
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-      max-width: 500px;
-    }
-    .form-group {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-    }
-    .form-group label {
-      font-size: 14px;
-      color: #888;
-    }
-    .form-actions {
-      display: flex;
-      gap: 12px;
-      margin-top: 16px;
-    }
-    .action-btn {
-      flex: 1;
-      display: block;
-    }
-  `,
 })
 export class ProfileForm {
   profileForm: FormGroup;

src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.html

@@ -0,0 +1,9 @@
+    <div class="purchase-item">
+      <div class="purchase-info">
+        <span class="purchase-id">Compra {{ purchase.id }}.</span>
+        <span class="purchase-date">Fecha de compra: {{ purchase.date }}</span>
+      </div>
+      <div class="purchase-action">
+        <span class="arrow-icon">›</span>
+      </div>
+    </div>

src/app/features/store/pages/account-page/components/purchase-list/purchase-list.html

@@ -0,0 +1,6 @@
+    <div class="purchase-list-container">
+      <app-purchase-list-item 
+        *ngFor="let purchase of purchases" 
+        [purchase]="purchase">
+      </app-purchase-list-item>
+    </div>

src/app/features/store/pages/account-page/components/purchase-list/purchase-list.scss

@@ -0,0 +1,5 @@
+.purchase-list-container {
+  display: flex;
+  flex-direction: column;
+  max-width: 600px;
+}

src/app/features/store/pages/account-page/components/purchase-list/purchase-list.ts

@@ -6,21 +6,8 @@ import { PurchaseListItem } from '../purchase-list-item/purchase-list-item';
   selector: 'app-purchase-list',
   standalone: true,
   imports: [CommonModule, PurchaseListItem],
-  template: `
+  templateUrl: './purchase-list.html',
-    <div class="purchase-list-container">
+  styleUrl: './purchase-list.scss',
-      <app-purchase-list-item 
-        *ngFor="let purchase of purchases" 
-        [purchase]="purchase">
-      </app-purchase-list-item>
-    </div>
-  `,
-  styles: `
-    .purchase-list-container {
-      display: flex;
-      flex-direction: column;
-      max-width: 600px;
-    }
-  `,
 })
 export class PurchaseList {
   purchases = [

src/app/features/store/pages/account-page/pages/profile-page/profile-page.html

@@ -0,0 +1,4 @@
+    <div class="page-container">
+      <h2 class="page-title">DATOS PERSONALES</h2>
+      <app-profile-form></app-profile-form>
+    </div>

src/app/features/store/pages/account-page/pages/profile-page/profile-page.scss

@@ -0,0 +1,10 @@
+.page-container {
+  display: flex;
+  flex-direction: column;
+}
+.page-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #888;
+  margin-bottom: 24px;
+}

src/app/features/store/pages/account-page/pages/profile-page/profile-page.ts

@@ -5,23 +5,7 @@ import { ProfileForm } from '../../components/profile-form/profile-form';
   selector: 'app-profile-page',
   standalone: true,
   imports: [ProfileForm],
-  template: `
+  templateUrl: './profile-page.html',
-    <div class="page-container">
+  styleUrl: './profile-page.scss',
-      <h2 class="page-title">DATOS PERSONALES</h2>
-      <app-profile-form></app-profile-form>
-    </div>
-  `,
-  styles: `
-    .page-container {
-      display: flex;
-      flex-direction: column;
-    }
-    .page-title {
-      font-size: 16px;
-      font-weight: bold;
-      color: #888;
-      margin-bottom: 24px;
-    }
-  `,
 })
 export class ProfilePage {}

src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.html

@@ -0,0 +1,4 @@
+    <div class="page-container">
+      <h2 class="page-title">MIS COMPRAS</h2>
+      <app-purchase-list></app-purchase-list>
+    </div>

src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.scss

@@ -0,0 +1,10 @@
+.page-container {
+  display: flex;
+  flex-direction: column;
+}
+.page-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #888;
+  margin-bottom: 24px;
+}

src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.ts

@@ -5,23 +5,7 @@ import { PurchaseList } from '../../components/purchase-list/purchase-list';
   selector: 'app-purchases-page',
   standalone: true,
   imports: [PurchaseList],
-  template: `
+  templateUrl: './purchases-page.html',
-    <div class="page-container">
+  styleUrl: './purchases-page.scss',
-      <h2 class="page-title">MIS COMPRAS</h2>
-      <app-purchase-list></app-purchase-list>
-    </div>
-  `,
-  styles: `
-    .page-container {
-      display: flex;
-      flex-direction: column;
-    }
-    .page-title {
-      font-size: 16px;
-      font-weight: bold;
-      color: #888;
-      margin-bottom: 24px;
-    }
-  `,
 })
 export class PurchasesPage {}