From 92e4da4b9323f3a8c1015a718939540a5bff6b35 Mon Sep 17 00:00:00 2001
From: ThompsonNye <thomas.nuyken@noreply.code.nuyken.dev>
Date: Thu, 19 Jun 2025 17:42:14 +0200
Subject: [PATCH] Add icons in card

---
 .../entry-card/entry-card.component.html      | 20 +++++++++++++++----
 .../entry-card/entry-card.component.ts        | 12 ++++++++++-
 .../entries/entries/entries.component.ts      |  2 +-
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/Vegasco-Web/src/app/modules/entries/entries/components/entry-card/entry-card.component.html b/src/Vegasco-Web/src/app/modules/entries/entries/components/entry-card/entry-card.component.html
index 95f36be..0140a69 100644
--- a/src/Vegasco-Web/src/app/modules/entries/entries/components/entry-card/entry-card.component.html
+++ b/src/Vegasco-Web/src/app/modules/entries/entries/components/entry-card/entry-card.component.html
@@ -6,19 +6,31 @@
     <div class="grid grid-cols-4 gap-4">
 
       <div class="col-span-4 sm:col-span-2 md:col-span-1 flex my-auto items-center justify-center">
-        <div>{{ entry().dateTime | date:"dd.MM.yyyy" }}</div>
+        <div class="flex gap-2 items-center">
+          <ng-icon name="matCalendarMonthSharp" />
+          <div>{{ entry().dateTime | date:"dd.MM.yyyy" }}</div>
+        </div>
       </div>
 
       <div class="col-span-4 sm:col-span-2 md:col-span-1 flex my-auto items-center justify-center">
-        <div>{{ entry().car.name }}</div>
+        <div class="flex gap-2 items-center">
+          <ng-icon name="matDirectionsCarOutline" />
+          <div>{{ entry().car.name }}</div>
+        </div>
       </div>
 
       <div class="col-span-4 sm:col-span-2 md:col-span-1 flex my-auto items-center justify-center">
-        {{entry().distance }} km
+        <div class="flex gap-2 items-center">
+          <ng-icon name="matStraightenSharp" />
+          <div>{{entry().distance }} km</div>
+        </div>
       </div>
 
       <div class="col-span-4 sm:col-span-2 md:col-span-1 flex my-auto items-center justify-center">
-        {{entry().amount }} &#8467;
+        <div class="flex gap-2 items-center">
+          <ng-icon name="matLocalGasStationSharp" />
+          <div>{{entry().amount }} &#8467;</div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/Vegasco-Web/src/app/modules/entries/entries/components/entry-card/entry-card.component.ts b/src/Vegasco-Web/src/app/modules/entries/entries/components/entry-card/entry-card.component.ts
index 57c2b47..b8f2366 100644
--- a/src/Vegasco-Web/src/app/modules/entries/entries/components/entry-card/entry-card.component.ts
+++ b/src/Vegasco-Web/src/app/modules/entries/entries/components/entry-card/entry-card.component.ts
@@ -4,8 +4,14 @@ import { Component, DestroyRef, inject, input, output } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
 import {
-  matDeleteSharp
+  matCalendarMonthSharp,
+  matDeleteSharp,
+  matStraightenSharp,
+  matLocalGasStationSharp,
 } from '@ng-icons/material-icons/sharp';
+import {
+  matDirectionsCarOutline,
+} from '@ng-icons/material-icons/outline';
 import { ConsumptionClient } from '@vegasco-web/api/consumptions/consumption-client';
 import { Consumption } from '@vegasco-web/api/models/consumption';
 import { RoutingService } from '@vegasco-web/services/routing.service';
@@ -28,6 +34,10 @@ import { catchError, EMPTY, Observable, tap, throwError } from 'rxjs';
   providers: [
     provideIcons({
       matDeleteSharp,
+      matCalendarMonthSharp,
+      matDirectionsCarOutline,
+      matStraightenSharp,
+      matLocalGasStationSharp,
     }),
     ConfirmationService,
   ],
diff --git a/src/Vegasco-Web/src/app/modules/entries/entries/entries.component.ts b/src/Vegasco-Web/src/app/modules/entries/entries/entries.component.ts
index 50eb01e..803e9e5 100644
--- a/src/Vegasco-Web/src/app/modules/entries/entries/entries.component.ts
+++ b/src/Vegasco-Web/src/app/modules/entries/entries/entries.component.ts
@@ -19,7 +19,7 @@ import {
 import { EntriesOverviewService } from './services/entries-overview.service';
 import { EntryCardComponent } from './components/entry-card/entry-card.component';
 import {
-  matAddSharp
+  matAddSharp,
 } from '@ng-icons/material-icons/sharp';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';