vor kompletter umsetllung

src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { SnackbarContainerComponent } from './shared/components/snackbar-container/snackbar-container.component';
+import { SnackbarContainerComponent } from './shared/components/ui/snackbar-container/snackbar-container.component';
 import { CookieConsentComponent } from './core/components/cookie-consent/cookie-consent.component';
 
 @Component({

src/app/features/demo/components/demo2/demo2.component.html

@@ -57,11 +57,11 @@
 
       <app-card class="grid-col-span-2">
         <h3 class="card-header">Letzte Bestellungen</h3>
-        <!-- <app-orders-table
+        <app-orders-table
           [orders]="ordersData"
           (deleteOrder)="handleDeleteOrder($event)"
         >
-        </app-orders-table> -->
+        </app-orders-table>
         <app-paginator
           [currentPage]="currentPage"
           [totalItems]="totalItems"

src/app/shared/components/data-display/data-display.css

@@ -1,3 +1,61 @@
+/* WICHTIG: Diese Stile sollten aus der globalen styles.css HIERHER VERSCHOBEN werden. */
+:host {
+  display: block;
+}
+
+.kpi-card {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1.5rem;
+}
+
+.kpi-icon {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  background-color: var(--color-surface);
+}
+
+.kpi-icon app-icon {
+  width: 24px;
+  height: 24px;
+  color: #fff;
+}
+
+.icon-blue {
+  background: linear-gradient(135deg, #3498db, #2980b9);
+}
+.icon-green {
+  background: linear-gradient(135deg, #2ecc71, #27ae60);
+}
+.icon-orange {
+  background: linear-gradient(135deg, #f39c12, #f1c40f);
+}
+.icon-purple {
+  background: linear-gradient(135deg, #9b59b6, #8e44ad);
+}
+
+.kpi-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.kpi-value {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: var(--color-text);
+}
+
+.kpi-label {
+  font-size: 0.9rem;
+  color: var(--color-text-light);
+}
+
+
 /* Verschieben Sie alle Tabellen-Stile aus styles.css hierher */
 :host {
   display: block;
@@ -82,4 +140,27 @@
   text-align: center;
   padding: 2rem;
   color: var(--color-text-light);
+}
+
+/* Verschieben Sie diese Stile aus der globalen styles.css hierher */
+:host {
+  display: block;
+}
+
+.paginator {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 1rem;
+  border-top: 1px solid var(--color-border);
+}
+.paginator-info {
+  font-size: 0.9rem;
+  color: var(--color-text-light);
+  font-weight: 500;
+}
+.paginator-controls {
+  display: flex;
+  gap: 0.5rem;
 }

src/app/shared/components/data-display/kpi-card/kpi-card.component.css

@@ -1,56 +0,0 @@
-/* WICHTIG: Diese Stile sollten aus der globalen styles.css HIERHER VERSCHOBEN werden. */
-:host {
-  display: block;
-}
-
-.kpi-card {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1.5rem;
-}
-
-.kpi-icon {
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  display: grid;
-  place-items: center;
-  flex-shrink: 0;
-  background-color: var(--color-surface);
-}
-
-.kpi-icon app-icon {
-  width: 24px;
-  height: 24px;
-  color: #fff;
-}
-
-.icon-blue {
-  background: linear-gradient(135deg, #3498db, #2980b9);
-}
-.icon-green {
-  background: linear-gradient(135deg, #2ecc71, #27ae60);
-}
-.icon-orange {
-  background: linear-gradient(135deg, #f39c12, #f1c40f);
-}
-.icon-purple {
-  background: linear-gradient(135deg, #9b59b6, #8e44ad);
-}
-
-.kpi-content {
-  display: flex;
-  flex-direction: column;
-}
-
-.kpi-value {
-  font-size: 1.75rem;
-  font-weight: 700;
-  color: var(--color-text);
-}
-
-.kpi-label {
-  font-size: 0.9rem;
-  color: var(--color-text-light);
-}

src/app/shared/components/data-display/kpi-card/kpi-card.component.ts

@@ -2,14 +2,14 @@ import { Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IconComponent } from '../../ui/icon/icon.component';
 
-type KpiColor = 'blue' | 'green' | 'orange' | 'purple'; 
+type KpiColor = 'blue' | 'green' | 'orange' | 'purple';
 
 @Component({
   selector: 'app-kpi-card',
   standalone: true,
   imports: [CommonModule, IconComponent],
   templateUrl: './kpi-card.component.html',
-  styleUrl: './kpi-card.component.css',
+  styleUrl: '../data-display.css',
 })
 export class KpiCardComponent {
   @Input() value: string = '';
@@ -17,4 +17,4 @@ export class KpiCardComponent {
   @Input() color: KpiColor = 'blue';
   @Input() iconName: string | null = null;
   @Input() svgColor: string | null = null;
-}
+}

src/app/shared/components/data-display/orders-table/orders-table.component.ts

@@ -29,7 +29,7 @@ export interface Order {
     IconComponent
   ],
   templateUrl: './orders-table.component.html',
-  styleUrl: './orders-table.component.css'
+  styleUrl: '../data-display.css'
 })
 export class OrdersTableComponent {
   // Nimmt die anzuzeigenden Bestelldaten entgegen

src/app/shared/components/data-display/paginator/paginator.component.css

@@ -1,22 +0,0 @@
-/* Verschieben Sie diese Stile aus der globalen styles.css hierher */
-:host {
-  display: block;
-}
-
-.paginator {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 1.5rem;
-  padding: 1rem;
-  border-top: 1px solid var(--color-border);
-}
-.paginator-info {
-  font-size: 0.9rem;
-  color: var(--color-text-light);
-  font-weight: 500;
-}
-.paginator-controls {
-  display: flex;
-  gap: 0.5rem;
-}

src/app/shared/components/data-display/paginator/paginator.component.ts

@@ -7,7 +7,7 @@ import { ButtonComponent } from '../../ui/button/button.component';
   standalone: true,
   imports: [CommonModule, ButtonComponent],
   templateUrl: './paginator.component.html',
-  styleUrl: './paginator.component.css'
+  styleUrl: '../data-display.css'
 })
 export class PaginatorComponent {
   // --- EINGABEN von außen ---

src/app/shared/components/ui/snackbar-container/snackbar-container.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Observable } from 'rxjs';
-import { Snackbar, SnackbarService } from '../../services/snackbar.service';
+import { Snackbar, SnackbarService } from '../../../services/snackbar.service';
 import { SnackbarComponent } from '../snackbar/snackbar.component';
 
 @Component({