added notification module

src/app/app.component.html

@@ -23,14 +23,14 @@
   </div>
 </mat-toolbar>
 
-<mat-toolbar class="mobile-toolbar">
+<mat-toolbar class="mobile-toolbar" color="primary">
   <ng-container *ngTemplateOutlet="toolbarItems"/>
 </mat-toolbar>
 
 <ng-template #toolbarItems>
   @for (item of [
       {icon:'home',link:'/',title:'Home',titleKey:'home'},
-      {icon:'notifications',link:'/',title:'Notifications',titleKey:'notifications'},
+      {icon:'notifications',title:'Notifications',titleKey:'notifications',menu:notifications},
       {icon:'account_circle',menu:userMenu,title:'User',titleKey:'user'}
     ]; track $index) {
       @switch (true) {
@@ -42,8 +42,11 @@
         }
         @case (item.menu !== undefined) {
           <div id="{{item.titleKey}}" class="toolbar-item" [matMenuTriggerFor]="item.menu">
-            <mat-icon>{{item.icon}}</mat-icon>
+            <mat-icon id="{{item.titleKey}}-icon">{{item.icon}}</mat-icon>
             <mat-label>{{(item.titleKey|tr:item.title)}}</mat-label>
+            @if (item.titleKey === 'notifications' && notificationCount > 0) {
+              <div class="count">{{notificationCount}}</div>
+            }
           </div>
         }
         @default {
@@ -63,9 +66,14 @@
 <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
 <!-- * * * * * * * * * * End of Placeholder  * * * * * * * * * * * * -->
 <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<div class="container">
+<div [ngClass]="theme" class="container">
   <div class="main">
     <router-outlet></router-outlet>
+    <footer>
+      © {{currentDate.getFullYear()}} 
+      {{cs.getLabel('companyName.full','Software Optima Sdn. Bhd.')}}
+      <span style="font-size: x-small;">(ver. {{cs.info?.version}})</span>
+    </footer>
   </div>
 </div>
 
@@ -121,3 +129,7 @@
     </button>
   }
 </mat-menu>
+
+<mat-menu #notifications="matMenu">
+  <notification (click)="$event.stopPropagation()"/>
+</mat-menu>

src/app/app.component.scss

@@ -1,4 +1,4 @@
-
+@import 'angularlib/styles/common.scss';
 :host {
     --bright-blue: oklch(51.01% 0.274 263.83);
     --pill-accent: var(--bright-blue);
@@ -22,6 +22,22 @@
     flex-grow: 1;
 }
 
+#notifications {
+    position: relative;
+}
+#notifications .count {
+    position: absolute;
+    width:15px;
+    height: 15px;
+    background-color: red;
+    right: 3px;
+    top: -5px;
+    font-size: 8pt;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
 
 .toolbar-item {
     display: flex;
@@ -33,6 +49,7 @@
     border-radius: 10px;
     .mat-icon {
         flex-grow: 2;
+        max-height: fit-content;
     }
     mat-label {
         line-height: 9pt;
@@ -78,6 +95,28 @@
     background-position: center;
 }
 
+.test {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+}
+
+footer {
+    padding-top: 2px;
+    color:#868686;
+    font-size: 8pt;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    border-top: 1px solid;
+}
+
+[class*='dark-theme'] {
+    footer {
+        color: #bdbdbd;
+    }
+}
+
 /** Mobile styles */
 @media screen and (pointer: none), (pointer: coarse) {
     .toolbar {display: none;}
@@ -87,4 +126,9 @@
     .mobile-toolbar {
         display: flex;
     }
+
+    #notifications .count {
+        right: 35%;
+        top: -3px;
+    }
 }

src/app/app.component.ts

@@ -10,8 +10,11 @@ import { LoginService } from 'angularlib/login/login.service';
 import { CommonModule } from '@angular/common';
 import { ChangeTheme } from 'angularlib/ui.state/ui.state.actions';
 import { ChangeLanguage } from 'angularlib/labels/label.actions';
-import { Label } from 'angularlib/labels/label.interface';
 import { ComponentService } from 'angularlib/component.service';
+import { NotificationModule } from 'angularlib/notification/notification.module';
+import { NotificationState } from 'angularlib/notification/notification.state';
+import { Notification } from 'angularlib/notification/notification.actions';
+import { generateId } from 'angularlib/base.service';
 
 @Component({
   selector: 'app-root',
@@ -21,7 +24,8 @@ import { ComponentService } from 'angularlib/component.service';
     RouterOutlet, 
     MatModule, 
     RouterModule,
-    Angularlib
+    Angularlib,
+    NotificationModule
   ],
   templateUrl: './app.component.html',
   styleUrls: [
@@ -31,6 +35,9 @@ import { ComponentService } from 'angularlib/component.service';
 export class AppComponent extends BaseComponent implements OnInit {
   title = 'FIS App';
 
+  /**current date */
+  protected currentDate = new Date();
+
   /**login timeout duration in milliseconds
      * @default 5 minutes
     */
@@ -46,6 +53,9 @@ export class AppComponent extends BaseComponent implements OnInit {
   /**current theme of application */
   protected theme;
 
+  /**number of notifications */
+  protected notificationCount: number = 0;
+
   constructor(
     private router: Router,
     private store: Store,
@@ -65,7 +75,6 @@ export class AppComponent extends BaseComponent implements OnInit {
 
   ngOnInit(): void {
     this.setDefaultTheme();
-
     this.router.events.pipe(untilDestroy(this),
     filter((event) => event instanceof RoutesRecognized),
     map((res:any) => {
@@ -85,6 +94,12 @@ export class AppComponent extends BaseComponent implements OnInit {
         this.timeout.pipe(untilDestroy(this),takeUntil(this.loginService.loggedOut)).subscribe();
       }
     });
+
+    this.store.select(NotificationState).pipe(untilDestroy(this)).subscribe({
+      next: (state:any) => {
+        this.notificationCount = state.notifications.length;
+      }
+    });
   }
 
   /**
@@ -115,4 +130,10 @@ export class AppComponent extends BaseComponent implements OnInit {
     localStorage.setItem('theme',this.theme);
     this.store.dispatch(new ChangeTheme(this.theme));
   }
+
+  protected addNotification() {
+    this.store.dispatch(new Notification.Add({
+      message:{title:generateId(),desc:generateId(),timestamp: new Date()}
+    }));
+  }
 }

src/config/info.json

@@ -3,5 +3,5 @@
     "orgnProfile":{
         "companyName":"Software Optima Sdn. Bhd."
     },
-    "version":"240318"
+    "version":"240501"
 }

src/dependencies/angularlib

@@ -1 +1 @@
-Subproject commit cd56f488517a51de6c13fb22ca54b6924896bddc
+Subproject commit 3216047d9ea497c0a942bcdb11f9b570c96f7f30