fixed up dashboard

apps/interface-services/trading-dashboard/src/app/components/notifications/notifications.html

@@ -0,0 +1,75 @@
+<button 
+  mat-icon-button 
+  [matMenuTriggerFor]="notificationMenu"
+  [matBadge]="unreadCount"
+  [matBadgeHidden]="unreadCount === 0"
+  matBadgeColor="warn"
+  matBadgeSize="small">
+  <mat-icon>notifications</mat-icon>
+</button>
+
+<mat-menu #notificationMenu="matMenu" class="notification-menu">
+  <div mat-menu-item disabled class="notification-header">
+    <div class="flex items-center justify-between w-full px-2">
+      <span class="font-semibold">Notifications</span>
+      @if (notifications.length > 0) {
+        <div class="flex gap-2">
+          <button mat-button (click)="markAllAsRead()" class="text-xs">
+            Mark all read
+          </button>
+          <button mat-button (click)="clearAll()" class="text-xs">
+            Clear all
+          </button>
+        </div>
+      }
+    </div>
+  </div>
+  
+  <mat-divider></mat-divider>
+
+  @if (notifications.length === 0) {
+    <div mat-menu-item disabled class="notification-empty">
+      <div class="text-center py-4 text-gray-500">
+        <mat-icon class="text-2xl">notifications_none</mat-icon>
+        <p class="mt-1 text-sm">No notifications</p>
+      </div>
+    </div>
+  } @else {
+    @for (notification of notifications.slice(0, 5); track notification.id) {
+      <div 
+        mat-menu-item 
+        class="notification-item"
+        [class.unread]="!notification.read"
+        (click)="markAsRead(notification)">
+        <div class="flex items-start gap-3 w-full">
+          <mat-icon [class]="getNotificationColor(notification.type)" class="mt-1">
+            {{ getNotificationIcon(notification.type) }}
+          </mat-icon>
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center justify-between">
+              <p class="font-medium text-sm truncate">{{ notification.title }}</p>
+              <button 
+                mat-icon-button 
+                (click)="clearNotification(notification); $event.stopPropagation()"
+                class="text-gray-400 hover:text-gray-600 ml-2">
+                <mat-icon class="text-lg">close</mat-icon>
+              </button>
+            </div>
+            <p class="text-gray-600 text-xs mt-1 line-clamp-2">{{ notification.message }}</p>
+            <p class="text-gray-400 text-xs mt-1">{{ formatTime(notification.timestamp) }}</p>
+          </div>
+        </div>
+      </div>
+      @if (!$last) {
+        <mat-divider></mat-divider>
+      }
+    }
+    
+    @if (notifications.length > 5) {
+      <mat-divider></mat-divider>
+      <div mat-menu-item disabled class="text-center text-sm text-gray-500">
+        {{ notifications.length - 5 }} more notifications...
+      </div>
+    }
+  }
+</mat-menu>