added accounting routes, enhanced sidebar

Author: suxrobGM

src/Client/Logistics.OfficeApp/src/app/app.routes.ts

@@ -56,6 +56,13 @@ export const APP_ROUTES: Routes = [
       breadcrumb: 'Customers',
     },
   },
+  {
+    path: 'accounting',
+    loadChildren: () => import('./pages/accounting').then((m) => m.ACCOUNTING_ROUTES),
+    data: {
+      breadcrumb: '',
+    },
+  },
   {
     path: '**',
     redirectTo: '404',

src/Client/Logistics.OfficeApp/src/app/layout/sidebar/sidebar.component.html

@@ -3,7 +3,8 @@
     <img src="assets/images/logo.svg" class="img-fluid" height="40" alt="logo" />
     <span class="h4" *ngIf="isOpened">{{companyName}}</span>
   </a>
-  <ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
+
+  <ul class="nav flex-column mb-auto">
     <li>
       <a class="nav-link border-bottom" [routerLink]="['/home']">
         <i class="bi bi-house-door h1" pTooltip="Home"></i>
@@ -40,6 +41,27 @@
         <span class="ms-2" *ngIf="isOpened">Customers</span>
       </a>
     </li>
+    <li class="nav-item">
+      <!-- <a class="nav-link border-bottom">
+        <i class="bi bi-journal-text h1"></i>
+        <span class="ms-2" *ngIf="isOpened">Accounting</span>
+      </a> -->
+
+      <p-panelMenu *ngIf="isOpened else accountingIcon" [model]="accountingMenuItems"></p-panelMenu>
+      <ng-template #accountingIcon>
+        <p-overlayPanel #accountingPanel>
+          <div *ngFor="let item of accountingMenuItems[0].items">
+            <button *ngIf="!item.separator" class="p-button p-button-text p-button-secondary" (click)="item?.command({})" role="none">
+              {{item.label}}
+            </button>
+          </div>
+        </p-overlayPanel>
+        <div class="text-center">
+          <i (click)="accountingPanel.toggle($event)" class="bi bi-journal-text h1" pTooltip="Accounting" role="presentation"></i>
+        </div>
+      </ng-template>
+
+    </li>
     <li class="nav-item">
       <a class="nav-link border-bottom">
         <i *ngIf="isOpened else rightArrowIcon" class="bi bi-arrow-left h1" (click)="toggle()" pTooltip="Minimize menu" role="presentation"></i>
@@ -55,10 +77,17 @@
       Role: <span class="fw-bold">{{userRole}}</span>
     </div>
 
-    <p-panelMenu *ngIf="isOpened else accountIcon" [model]="accountMenuItems"></p-panelMenu>
-    <ng-template #accountIcon>
+    <p-panelMenu *ngIf="isOpened else profileIcon" [model]="profileMenuItems"></p-panelMenu>
+    <ng-template #profileIcon>
+      <p-overlayPanel #profilePanel>
+        <div *ngFor="let item of profileMenuItems[0].items">
+          <button *ngIf="!item.separator" class="p-button p-button-text p-button-secondary" (click)="item?.command({})" role="none">
+            {{item.label}}
+          </button>
+        </div>
+      </p-overlayPanel>
       <div class="text-center">
-        <i (click)="toggle()" class="bi bi-person-circle h1" pTooltip="Account" role="presentation"></i>
+        <i (click)="profilePanel.toggle($event)" class="bi bi-person-circle h1" pTooltip="Account" role="presentation"></i>
       </div>
     </ng-template>
   </div>

src/Client/Logistics.OfficeApp/src/app/layout/sidebar/sidebar.component.scss

@@ -27,3 +27,27 @@
   display: flex;
   align-items: center;
 }
+
+:host ::ng-deep .p-panelmenu-header-content {
+  background-color: transparent;
+}
+
+:host ::ng-deep .p-panelmenu-content {
+  background-color: transparent;
+}
+
+:host ::ng-deep .p-menuitem-link {
+  text-decoration: none;
+}
+
+:host ::ng-deep .p-panelmenu-header chevronrighticon {
+  order: 2;
+}
+
+:host ::ng-deep .p-panelmenu-header chevrondownicon {
+  order: 2;
+}
+
+:host ::ng-deep .p-panelmenu-header .p-menuitem-text {
+  order: 1;
+}

src/Client/Logistics.OfficeApp/src/app/layout/sidebar/sidebar.component.ts

@@ -4,6 +4,7 @@ import {RouterLink} from '@angular/router';
 import {TooltipModule} from 'primeng/tooltip';
 import {SplitButtonModule} from 'primeng/splitbutton';
 import {PanelMenuModule} from 'primeng/panelmenu';
+import {OverlayPanelModule} from 'primeng/overlaypanel';
 import {MenuItem} from 'primeng/api';
 import {AppConfig} from '@configs';
 import {AuthService} from '@core/auth';
@@ -21,6 +22,7 @@ import {ApiService, TenantService} from '@core/services';
     TooltipModule,
     SplitButtonModule,
     PanelMenuModule,
+    OverlayPanelModule,
   ],
 })
 export class SidebarComponent implements OnInit {
@@ -30,7 +32,8 @@ export class SidebarComponent implements OnInit {
   public companyName?: string;
   public userRole?: string | null;
   public userFullName?: string;
-  public accountMenuItems: MenuItem[];
+  public profileMenuItems: MenuItem[];
+  public accountingMenuItems: MenuItem[];
 
   constructor(
     private authService: AuthService,
@@ -40,7 +43,7 @@ export class SidebarComponent implements OnInit {
     this.isAuthenticated = false;
     this.isOpened = false;
     this.isLoading = false;
-    this.accountMenuItems = [
+    this.profileMenuItems = [
       {
         label: 'User name',
         icon: 'bi bi-person-circle',
@@ -59,25 +62,46 @@ export class SidebarComponent implements OnInit {
         ],
       },
     ];
+
+    this.accountingMenuItems = [
+      {
+        label: 'Accounting',
+        icon: 'bi bi-journal-text h1',
+        items: [
+          {
+            label: 'Payroll Management',
+            // command: () => this.openAccountUrl(),
+          },
+          {
+            label: 'Payments',
+            // command: () => this.logout(),
+          },
+          {
+            label: 'Invoices',
+            // command: () => this.logout(),
+          },
+        ],
+      },
+    ];
   }
 
   ngOnInit(): void {
     this.authService.onUserDataChanged().subscribe((userData) => {
       this.userFullName = userData?.getFullName();
       this.userRole = this.authService.getUserRoleName();
-      this.accountMenuItems[0].label = this.userFullName;
+      this.profileMenuItems[0].label = this.userFullName;
       this.fetchTenantData();
     });
   }
 
   private fetchTenantData() {
     this.apiService.getTenant().subscribe((result) => {
-      if (result.isError) {
+      if (result.isError || !result.data) {
         return;
       }
 
-      this.tenantService.setTenantData(result.data!);
-      this.companyName = result.data!.displayName;
+      this.tenantService.setTenantData(result.data);
+      this.companyName = result.data.displayName;
     });
   }
 

src/Client/Logistics.OfficeApp/src/app/pages/accounting/index.ts

@@ -0,0 +1 @@
+export * from './accounting.routes';

src/Client/Logistics.OfficeApp/src/app/pages/home/components/notifications-panel/notifications-panel.component.html

@@ -1,7 +1,7 @@
 <p-card>
   <ng-template pTemplate="header">
     <div class="ps-3 pt-3 pb-1 h4">
-      <i class="bi bi-bell" pBadge [badgeDisabled]="!notifications.length" [value]="getUnreadNotificationsCount()"></i>
+      <i class="bi bi-bell" pBadge [value]="getUnreadNotificationsCount()"></i>
       <span class="ms-3">Notifications</span>
     </div>
     <hr class="w-100 m-0" />

src/Client/Logistics.OfficeApp/src/app/pages/home/components/notifications-panel/notifications-panel.component.ts

@@ -102,8 +102,6 @@ export class NotificationsPanelComponent implements OnInit, OnDestroy {
   }
 
   getUnreadNotificationsCount(): string {
-    console.log(this.notifications.filter((i) => !i.isRead).length);
-    
     return this.notifications.filter((i) => !i.isRead).length.toString();
   }