feat(frontend): ✨ Show energy data

FrontEnd/package.json

@@ -11,14 +11,15 @@
   "private": true,
   "packageManager": "pnpm@11.1.1",
   "dependencies": {
-    "@angular/compiler": "^21.2.14",
     "@angular/common": "^21.2.14",
+    "@angular/compiler": "^21.2.14",
     "@angular/core": "^21.2.0",
     "@angular/forms": "^21.2.14",
     "@angular/platform-browser": "^21.2.0",
     "@angular/router": "^21.2.13",
     "@fortawesome/fontawesome-free": "^7.2.0",
     "@primeuix/themes": "^2.0.3",
+    "chart.js": "^4.5.1",
     "primeng": "^21.1.7",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"

FrontEnd/src/app/app.html

@@ -8,7 +8,17 @@
 
   <div class="shell-body">
     <aside class="left-nav">
-      <p-menu [model]="sideMenuItems()" styleClass="left-menu" />
+      <div class="menu-section">
+        <p-menu [model]="homeMenuItems()" styleClass="left-menu" />
+      </div>
+      <div class="menu-section">
+        <div class="menu-section-header">Configuration</div>
+        <p-menu [model]="configMenuItems()" styleClass="left-menu" />
+      </div>
+      <div class="menu-section">
+        <div class="menu-section-header">Analytics</div>
+        <p-menu [model]="analyticsMenuItems()" styleClass="left-menu" />
+      </div>
     </aside>
 
     <main class="content-area">

FrontEnd/src/app/app.routes.ts

@@ -3,6 +3,7 @@ import { Home } from './pages/home/home';
 import { HomeAssistantConnection } from './pages/home-assistant-connection/home-assistant-connection';
 import { PowerEntitySetup } from './pages/power-entity-setup/power-entity-setup';
 import { EnergyHistorySetup } from './pages/energy-history-setup/energy-history-setup';
+import { EnergyHistoryView } from './pages/energy-history-view/energy-history-view';
 
 export const routes: Routes = [
 	{
@@ -20,5 +21,9 @@ export const routes: Routes = [
 	{
 		path: 'energy-history',
 		component: EnergyHistorySetup,
+	},
+	{
+		path: 'energy-history-view',
+		component: EnergyHistoryView,
 	}
 ];

FrontEnd/src/app/app.scss

@@ -72,9 +72,27 @@
 	font-weight: 600;
 }
 
-:host ::ng-deep .left-menu {
+.menu-section {
+	margin-bottom: 1.5rem;
+	padding: 0.75rem;
 	border: 1px solid var(--line);
-	background: rgba(255, 255, 255, 0.55);
+	border-radius: 0.5rem;
+	background: rgba(255, 255, 255, 0.3);
+}
+
+.menu-section-header {
+	font-size: 0.875rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--sea-700);
+	margin-bottom: 0.5rem;
+	padding: 0 0.5rem;
+}
+
+:host ::ng-deep .left-menu {
+	border: 0;
+	background: transparent;
 }
 
 :host ::ng-deep .left-menu .p-menu-item-link {

FrontEnd/src/app/app.ts

@@ -17,12 +17,15 @@ export class App implements OnInit {
 
   protected readonly configStatus = inject(ConfigurationStatusService);
 
-  protected readonly sideMenuItems = computed<MenuItem[]>(() => [
+  protected readonly homeMenuItems = computed<MenuItem[]>(() => [
     {
       label: 'Home',
       icon: 'fa-solid fa-house',
       routerLink: '/',
     },
+  ]);
+
+  protected readonly configMenuItems = computed<MenuItem[]>(() => [
     {
       label: 'HA Connection',
       icon: 'fa-solid fa-plug',
@@ -39,7 +42,7 @@ export class App implements OnInit {
       disabled: !this.configStatus.haConnectionConfigured(),
     },
     {
-      label: 'Energy History',
+      label: 'Get Energy History',
       icon: 'fa-solid fa-chart-line',
       routerLink: '/energy-history',
       badge: this.configStatus.energyHistoryFetched() ? '✓' : undefined,
@@ -48,6 +51,15 @@ export class App implements OnInit {
     },
   ]);
 
+  protected readonly analyticsMenuItems = computed<MenuItem[]>(() => [
+    {
+      label: 'Energy History',
+      icon: 'fa-solid fa-chart-column',
+      routerLink: '/energy-history-view',
+      disabled: !this.configStatus.energyHistoryFetched(),
+    },
+  ]);
+
   ngOnInit(): void {
     this.configStatus.refresh();
   }

FrontEnd/src/app/pages/energy-history-view/energy-history-view.html

@@ -0,0 +1,66 @@
+<div class="energy-history-view">
+  <h1>Energy History</h1>
+
+  @if (loading()) {
+    <div class="loading">Loading energy history data...</div>
+  } @else {
+    <div class="year-controls">
+      <p-button 
+        icon="fa-solid fa-chevron-left" 
+        [disabled]="!canGoPrevious()" 
+        (onClick)="previousYear()"
+        [text]="true"
+      />
+      <h2 class="year-display">{{ selectedYear() }}</h2>
+      <p-button 
+        icon="fa-solid fa-chevron-right" 
+        [disabled]="!canGoNext()" 
+        (onClick)="nextYear()"
+        [text]="true"
+      />
+    </div>
+
+    <div class="chart-container">
+      <p-chart type="bar" [data]="chartData()" [options]="chartOptions()" />
+    </div>
+
+    <div class="table-container">
+      <h2>Detailed Data</h2>
+      <p-table
+        [value]="energyHistory()"
+        [paginator]="true"
+        [rows]="10"
+        [rowsPerPageOptions]="[10, 25, 50]"
+      >
+        <ng-template #header>
+          <tr>
+            <th scope="col" pSortableColumn="year">
+              Year <p-sortIcon field="year" />
+            </th>
+            <th scope="col" pSortableColumn="month">
+              Month <p-sortIcon field="month" />
+            </th>
+            <th scope="col" pSortableColumn="entityType">
+              Type <p-sortIcon field="entityType" />
+            </th>
+            <th scope="col" pSortableColumn="entityId">
+              Entity ID <p-sortIcon field="entityId" />
+            </th>
+            <th scope="col" pSortableColumn="averageValue">
+              Average Value (kWh) <p-sortIcon field="averageValue" />
+            </th>
+          </tr>
+        </ng-template>
+        <ng-template #body let-item>
+          <tr>
+            <td>{{ item.year }}</td>
+            <td>{{ item.month }}</td>
+            <td>{{ getEntityTypeName(item.entityType) }}</td>
+            <td>{{ item.entityId }}</td>
+            <td>{{ item.averageValue | number: '1.2-2' }}</td>
+          </tr>
+        </ng-template>
+      </p-table>
+    </div>
+  }
+</div>

FrontEnd/src/app/pages/energy-history-view/energy-history-view.scss

@@ -0,0 +1,68 @@
+
+.energy-history-view {
+  width: 100%;
+  max-width: 100%;
+
+  h1 {
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+    color: var(--sea-900);
+  }
+
+  h2 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+    color: var(--sea-700);
+  }
+
+  .loading {
+    text-align: center;
+    padding: 2rem;
+    font-size: 1.1rem;
+    color: var(--sea-700);
+  }
+
+  .year-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+    background: white;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+    .year-display {
+      font-size: 1.75rem;
+      font-weight: 700;
+      color: var(--sea-900);
+      margin: 0;
+      min-width: 5rem;
+      text-align: center;
+    }
+  }
+
+  .chart-container {
+    background: white;
+    padding: 1.5rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    margin-bottom: 2rem;
+    height: 400px;
+  }
+
+  .table-container {
+    background: white;
+    padding: 1.5rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    overflow-x: auto;
+    width: 100%;
+  }
+}
+.p-chart{
+    height: 100%;
+}