basic single event dashboard

admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-card/single-event-dashboard-card.html

@@ -1,7 +1,7 @@
-<div class="card bg-base-100 shadow-sm" [class]="styleClass()">
+<div class="card bg-base-100 hover:bg-base-300 shadow-sm h-full" [class]="">
   <div class="card-body items-center ">
-    <h2 class="card-title">{{ title() }}</h2>
+    <h2 class="card-title text-center">{{ title() }}</h2>
-    <p>{{ description() }}</p>
+    <p class="text-center">{{ description() }}</p>
     <div class="card-actions justify-end">
       <button class="btn btn-primary">
         <!-- Using the new @if control flow -->

admin/src/app/features/calendar/components/calendar-view/single-event-dashboard-card/single-event-dashboard-card.ts

@@ -18,14 +18,14 @@ export class SingleEventDashboardCard {
 
   // 1. Define the Input Signal to receive class names as a string or array
   // Example: 'grow-2 align-center'
-  public customClasses = input<string | null>(null);
+  public styleClass = input<string | null>(null);
 
   // 2. Create a computed signal that filters out any null/undefined and returns the class string
   private hostClasses = computed(() => {
     // We append a base class that should always be present (e.g., 'flex-item')
     const classes = ['flex-item'];
 
-    const custom = this.customClasses();
+    const custom = this.styleClass();
     if (custom) {
       // Split the input string and add the class names
       classes.push(...custom.trim().split(/\s+/));

admin/src/app/features/calendar/components/calendar-view/single-event-dashboard/single-event-dashboard.html

@@ -1,4 +1,4 @@
-<h3>Esemény</h3>
+<h2 class="text-xl">Esemény</h2>
 
 @if (config) {
   <app-detail-view
@@ -6,7 +6,7 @@
   ></app-detail-view>
 }
 
-<div class="flex mt-3 gap-2 flex-wrap  ">
+<div class="flex mt-3 gap-2 flex-wrap content-stretch ">
   @for (card of cards; let i = $index; track i) {
 
     <app-single-event-dashboard-card
@@ -14,7 +14,7 @@
       [svgIcon]="card.svgIcon"
       [description]="card.description"
       [buttonTitle]="card.buttonTitle"
-      [customClasses]="'flex-1'"
+      [styleClass]="'flex-1'"
 
     ></app-single-event-dashboard-card>
 <!--      [customClasses]="'flex-[50_1_0] w-50' "-->

admin/src/app/features/calendar/components/calendar-view/single-event-dashboard/single-event-dashboard.ts

@@ -1,17 +1,13 @@
-import { Component, effect, input, signal } from '@angular/core';
+import { Component, effect, input } from '@angular/core';
-import { CalendarEventDto, EventsInRangeDTO } from '../../../models/events-in-range-dto.model';
+import { CalendarEventDto } from '../../../models/events-in-range-dto.model';
 import { DetailView, DetailViewConfig } from '../../../../../components/detail-view/detail-view';
-import { JsonPipe } from '@angular/common';
 import { SvgIcons } from '../../../../../svg-icons';
-import { SafeHtmlPipe } from '../../../../../pipes/safe-html-pipe';
 import { SingleEventDashboardCard } from '../single-event-dashboard-card/single-event-dashboard-card';
 
 @Component({
   selector: 'app-single-event-dashboard',
   imports: [
     DetailView,
-    JsonPipe,
-    SafeHtmlPipe,
     SingleEventDashboardCard,
   ],
   templateUrl: './single-event-dashboard.html',
@@ -27,32 +23,32 @@ export class SingleEventDashboard {
       buttonTitle: 'Szerkesztés',
       title: 'Szerkesztés',
       svgIcon: SvgIcons.heorPencilSquare,
-      description: 'Az esemény módosítása'
+      description: 'Az esemény módosítása',
     },
     {
-      buttonTitle: 'Esemény lemondása',
+      buttonTitle: 'Lemondás',
       title: 'Esemény lemondása',
       svgIcon: SvgIcons.heroXcircle,
-      description: 'Az esemény  lemondása'
+      description: 'Az esemény  lemondása, email küldése a jelentkezőknek',
     },
     {
-      buttonTitle: 'Esemény törlése',
+      buttonTitle: 'Törlése',
       title: 'Esemény törlése',
       svgIcon: SvgIcons.heroTrash,
-      description: 'Az esemény  törlése'
+      description: 'Az esemény  törlése',
     },
     {
       buttonTitle: 'Bejelentkezés',
       title: 'Időpont foglalás',
-      svgIcon: SvgIcons.heroTrash,
+      svgIcon: SvgIcons.heroUserPlus,
-      description: 'Időpont foglalása eseményre'
+      description: 'Időpont foglalása eseményre',
     },
     {
       buttonTitle: 'Lemondás',
-      title: 'Időpont lemondása',
+      title: 'Lemondása',
-      svgIcon: SvgIcons.heroTrash,
+      svgIcon: SvgIcons.heroUserMinus,
-      description: 'Az időpont lemondása'
+      description: 'Az időpont lemondása',
-    }
+    },
   ];
 
   constructor() {
@@ -71,14 +67,14 @@ export class SingleEventDashboard {
           {
             attribute: 'startTime',
             getTitle: 'Kezdési időpont',
-            format: 'datetime'
+            format: 'datetime',
           },
           {
             attribute: 'eventType',
             getTitle: 'Esemény típusa',
             getValue: obj => obj.eventType.name,
 
-          }
+          },
         ],
       };
     });
@@ -86,7 +82,8 @@ export class SingleEventDashboard {
 
   protected readonly SvgIcons = SvgIcons;
 }
-export interface CardConfig{
+
+export interface CardConfig {
   title?: string;
   description?: string;
   buttonTitle?: string;

admin/src/app/svg-icons.ts

@@ -24,4 +24,16 @@ export class SvgIcons {
 </svg>
 `;
 
+  public static heroUserPlus = `
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
+    </svg>
+`
+  public static heroUserMinus = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M22 10.5h-6m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM4 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 10.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
+</svg>
+
+  `
+
+
 }