sidebar improvments

Author: suxrobGM

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

@@ -63,10 +63,13 @@
         <p-overlayPanel #accountingPanel>
           @for (item of accountingMenuItems[0].items; track item.label) {
             @if (!item.separator) {
-              <p-button styleClass="p-button-secondary"
-                [label]="item.label"
-                (click)="item?.command({})">
-              </p-button>
+              <div class="p-1">
+                <p-button severity="secondary"
+                  [text]="true"
+                  [label]="item.label"
+                  (click)="item?.command({})">
+                </p-button>
+              </div>
             }
           }
         </p-overlayPanel>
@@ -102,10 +105,13 @@
         <p-overlayPanel #profilePanel>
           @for (item of profileMenuItems[0].items; track item.label) {
             @if (!item.separator) {
-              <p-button styleClass="p-button-secondary"
-                [label]="item.label"
-                (click)="item?.command({})">
-              </p-button>
+              <div class="p-1">
+                <p-button severity="secondary"
+                  [text]="true"
+                  [label]="item.label"
+                  (click)="item?.command({})">
+                </p-button>
+              </div>
             }
           }
         </p-overlayPanel>

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

@@ -28,26 +28,28 @@
   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;
+:host ::ng-deep {
+  .p-panelmenu-header-content {
+    background-color: transparent;
+  }
+
+  .p-menuitem-link {
+    text-decoration: none;
+  }
+
+  .p-panelmenu-header chevronrighticon {
+    order: 2;
+  }
+
+  .p-panelmenu-content {
+    background-color: transparent;
+  }
+
+  .p-panelmenu-header chevrondownicon {
+    order: 2;
+  }
+
+  .p-panelmenu-header .p-menuitem-text {
+    order: 1;
+  }
 }

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

@@ -71,15 +71,15 @@ export class SidebarComponent implements OnInit {
         items: [
           {
             label: 'Payrolls',
-            command: () => router.navigateByUrl('/accounting/payrolls'),
+            routerLink: '/accounting/payrolls',
           },
           {
             label: 'Payments',
-            command: () => router.navigateByUrl('/accounting/payments'),
+            routerLink: '/accounting/payments',
           },
           {
             label: 'Invoices',
-            command: () => router.navigateByUrl('/accounting/invoices'),
+            routerLink: '/accounting/invoices',
           },
         ],
       },

src/Client/Logistics.OfficeApp/src/app/pages/accounting/list-invoices/list-invoices.component.html

@@ -32,10 +32,6 @@ <h1>Invoices for the past 90 days</h1>
               Payment Amount
               <p-sortIcon field="paymentAmount"></p-sortIcon>
             </th>
-            <th pSortableColumn="paymentStatus">
-              Payment Status
-              <p-sortIcon field="paymentStatus"></p-sortIcon>
-            </th>
             <th pSortableColumn="createdDate">
               Invoice Date
               <p-sortIcon field="createdDate"></p-sortIcon>
@@ -44,24 +40,24 @@ <h1>Invoices for the past 90 days</h1>
               Payment Date
               <p-sortIcon field="paymentDate"></p-sortIcon>
             </th>
+            <th pSortableColumn="paymentStatus">
+              Payment Status
+              <p-sortIcon field="paymentStatus"></p-sortIcon>
+            </th>
             <th>Action</th>
           </tr>
         </ng-template>
 
         <ng-template pTemplate="body" let-invoice>
           <tr>
-            <td>
-              <a [routerLink]="['/loads/edit', invoice.loadId]">
-                {{invoice.loadRef}}
-              </a>
-            </td>
+            <td>{{invoice.loadRef}}</td>
             <td>{{invoice.customer.name}}</td>
             <td>{{invoice.payment.amount | currency}}</td>
+            <td>{{invoice.createdDate | date:'mediumDate'}}</td>
+            <td>{{invoice.payment.paymentDate | date:'mediumDate'}}</td>
             <td>
               <app-payment-status-tag [paymentStatus]="invoice.payment.status"></app-payment-status-tag>
             </td>
-            <td>{{invoice.createdDate | date:'mediumDate'}}</td>
-            <td>{{invoice.payment.paymentDate | date:'mediumDate'}}</td>
             <td>
               @if (invoice.payment.status === paymentStatus.Pending) {
                 <p-button