From 09d88e63247aa5b77e771791990ce96f30fa3a13 Mon Sep 17 00:00:00 2001
From: ncoronel <ncoronel@quo.ar>
Date: Wed, 8 Jul 2026 08:39:52 -0300
Subject: [PATCH] feat(account-page): implement account layout with sidebar,
 profile form, and purchase list components

---
 .../account-layout/account-layout.html        |  6 ++
 .../account-layout/account-layout.scss        | 16 ++++
 .../account-layout/account-layout.ts          | 28 +-----
 .../account-sidebar/account-sidebar.html      |  8 ++
 .../account-sidebar/account-sidebar.scss      | 34 ++++++++
 .../account-sidebar/account-sidebar.ts        | 48 +----------
 .../components/profile-form/profile-form.html | 56 ++++++++++++
 .../components/profile-form/profile-form.scss | 24 ++++++
 .../components/profile-form/profile-form.ts   | 86 +------------------
 .../purchase-list-item.html                   |  9 ++
 .../purchase-list/purchase-list.html          |  6 ++
 .../purchase-list/purchase-list.scss          |  5 ++
 .../components/purchase-list/purchase-list.ts | 17 +---
 .../pages/profile-page/profile-page.html      |  4 +
 .../pages/profile-page/profile-page.scss      | 10 +++
 .../pages/profile-page/profile-page.ts        | 20 +----
 .../pages/purchases-page/purchases-page.html  |  4 +
 .../pages/purchases-page/purchases-page.scss  | 10 +++
 .../pages/purchases-page/purchases-page.ts    | 20 +----
 19 files changed, 204 insertions(+), 207 deletions(-)
 create mode 100644 src/app/features/store/pages/account-page/account-layout/account-layout.html
 create mode 100644 src/app/features/store/pages/account-page/account-layout/account-layout.scss
 create mode 100644 src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.html
 create mode 100644 src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.scss
 create mode 100644 src/app/features/store/pages/account-page/components/profile-form/profile-form.html
 create mode 100644 src/app/features/store/pages/account-page/components/profile-form/profile-form.scss
 create mode 100644 src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.html
 create mode 100644 src/app/features/store/pages/account-page/components/purchase-list/purchase-list.html
 create mode 100644 src/app/features/store/pages/account-page/components/purchase-list/purchase-list.scss
 create mode 100644 src/app/features/store/pages/account-page/pages/profile-page/profile-page.html
 create mode 100644 src/app/features/store/pages/account-page/pages/profile-page/profile-page.scss
 create mode 100644 src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.html
 create mode 100644 src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.scss

diff --git a/src/app/features/store/pages/account-page/account-layout/account-layout.html b/src/app/features/store/pages/account-page/account-layout/account-layout.html
new file mode 100644
index 0000000..bf677af
--- /dev/null
+++ b/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>
diff --git a/src/app/features/store/pages/account-page/account-layout/account-layout.scss b/src/app/features/store/pages/account-page/account-layout/account-layout.scss
new file mode 100644
index 0000000..8d9f665
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/features/store/pages/account-page/account-layout/account-layout.ts b/src/app/features/store/pages/account-page/account-layout/account-layout.ts
index 36f7686..90974f3 100644
--- a/src/app/features/store/pages/account-page/account-layout/account-layout.ts
+++ b/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: `
-    <div class="account-layout">
-      <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;
-    }
-  `,
+  templateUrl: './account-layout.html',
+  styleUrl: './account-layout.scss',
 })
 export class AccountLayout {}
diff --git a/src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.html b/src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.html
new file mode 100644
index 0000000..5750034
--- /dev/null
+++ b/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>
diff --git a/src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.scss b/src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.scss
new file mode 100644
index 0000000..e44aad8
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.ts b/src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.ts
index 524d427..a379049 100644
--- a/src/app/features/store/pages/account-page/components/account-sidebar/account-sidebar.ts
+++ b/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: `
-    <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>
-  `,
-  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;
-    }
-  `,
+  templateUrl: './account-sidebar.html',
+  styleUrl: './account-sidebar.scss',
 })
 export class AccountSidebar {}
diff --git a/src/app/features/store/pages/account-page/components/profile-form/profile-form.html b/src/app/features/store/pages/account-page/components/profile-form/profile-form.html
new file mode 100644
index 0000000..e703057
--- /dev/null
+++ b/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>
diff --git a/src/app/features/store/pages/account-page/components/profile-form/profile-form.scss b/src/app/features/store/pages/account-page/components/profile-form/profile-form.scss
new file mode 100644
index 0000000..2350e4f
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/features/store/pages/account-page/components/profile-form/profile-form.ts b/src/app/features/store/pages/account-page/components/profile-form/profile-form.ts
index 81c2ffc..3301877 100644
--- a/src/app/features/store/pages/account-page/components/profile-form/profile-form.ts
+++ b/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: `
-    <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>
-  `,
-  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;
-    }
-  `,
+  templateUrl: './profile-form.html',
+  styleUrl: './profile-form.scss',
 })
 export class ProfileForm {
   profileForm: FormGroup;
diff --git a/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.html b/src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.html
new file mode 100644
index 0000000..351c8de
--- /dev/null
+++ b/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>
diff --git a/src/app/features/store/pages/account-page/components/purchase-list/purchase-list.html b/src/app/features/store/pages/account-page/components/purchase-list/purchase-list.html
new file mode 100644
index 0000000..cfb45e9
--- /dev/null
+++ b/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>
diff --git a/src/app/features/store/pages/account-page/components/purchase-list/purchase-list.scss b/src/app/features/store/pages/account-page/components/purchase-list/purchase-list.scss
new file mode 100644
index 0000000..5cda089
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/features/store/pages/account-page/components/purchase-list/purchase-list.ts b/src/app/features/store/pages/account-page/components/purchase-list/purchase-list.ts
index f367e93..4211e40 100644
--- a/src/app/features/store/pages/account-page/components/purchase-list/purchase-list.ts
+++ b/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: `
-    <div class="purchase-list-container">
-      <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;
-    }
-  `,
+  templateUrl: './purchase-list.html',
+  styleUrl: './purchase-list.scss',
 })
 export class PurchaseList {
   purchases = [
diff --git a/src/app/features/store/pages/account-page/pages/profile-page/profile-page.html b/src/app/features/store/pages/account-page/pages/profile-page/profile-page.html
new file mode 100644
index 0000000..81292cf
--- /dev/null
+++ b/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>
diff --git a/src/app/features/store/pages/account-page/pages/profile-page/profile-page.scss b/src/app/features/store/pages/account-page/pages/profile-page/profile-page.scss
new file mode 100644
index 0000000..5097d4d
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/features/store/pages/account-page/pages/profile-page/profile-page.ts b/src/app/features/store/pages/account-page/pages/profile-page/profile-page.ts
index ee4a8b8..d400ed8 100644
--- a/src/app/features/store/pages/account-page/pages/profile-page/profile-page.ts
+++ b/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: `
-    <div class="page-container">
-      <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;
-    }
-  `,
+  templateUrl: './profile-page.html',
+  styleUrl: './profile-page.scss',
 })
 export class ProfilePage {}
diff --git a/src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.html b/src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.html
new file mode 100644
index 0000000..aa40a47
--- /dev/null
+++ b/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>
diff --git a/src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.scss b/src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.scss
new file mode 100644
index 0000000..5097d4d
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.ts b/src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.ts
index f34117f..7bd4045 100644
--- a/src/app/features/store/pages/account-page/pages/purchases-page/purchases-page.ts
+++ b/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: `
-    <div class="page-container">
-      <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;
-    }
-  `,
+  templateUrl: './purchases-page.html',
+  styleUrl: './purchases-page.scss',
 })
 export class PurchasesPage {}