(web): dashboard enhancements

service/app-hub/dashboard/src/app/pages/accounting/accounting-lane/accounting-lane.component.ts

@@ -2,7 +2,7 @@ import {
   CdkVirtualScrollViewport,
   ScrollingModule,
 } from '@angular/cdk/scrolling';
-import { AsyncPipe, CurrencyPipe, NgClass, NgFor, NgIf } from '@angular/common';
+import { AsyncPipe, NgIf } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -32,32 +32,31 @@ import {
 import { AccountingTourViewComponent } from '../accounting-tour-view/accounting-tour-view.component';
 import { DashboardAccountingService } from '../dashboard-accounting.service';
 import { AccountingItemComponent } from './accounting-item.component';
-import { AccountingLaneFooterComponent } from './accounting-lane-footer.component';
 import { AccountingLaneHeaderComponent } from './accounting-lane-header.component';
 
 @Component({
-    selector: 'dks-accounting-lane',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    templateUrl: './accounting-lane.component.html',
-    styles: [
-        `
+  selector: 'dks-accounting-lane',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './accounting-lane.component.html',
+  host: {
+    class: 'rounded h-full w-full grid',
+  },
+  styles: [
+    `
       :host {
-        @apply rounded bg-gray-200 h-full w-full grid;
+        box-shadow: var(--mat-sys-level1);
+        background-color: var(--mat-sys-surface-container-low);
         grid-template-rows: auto 1fr auto;
       }
     `,
-    ],
-    imports: [
-        AccountingLaneHeaderComponent,
-        AccountingLaneFooterComponent,
-        AccountingItemComponent,
-        NgFor,
-        NgIf,
-        NgClass,
-        AsyncPipe,
-        CurrencyPipe,
-        ScrollingModule,
-    ]
+  ],
+  imports: [
+    AccountingLaneHeaderComponent,
+    AccountingItemComponent,
+    NgIf,
+    AsyncPipe,
+    ScrollingModule,
+  ],
 })
 export class AccountingLaneComponent {
   private dialog = inject(DialogService);
@@ -91,7 +90,7 @@ export class AccountingLaneComponent {
       this.accountingService.fetchAccountingStateMeta(accountingState)
     )
   );
-  tours$: Observable<Tour[]>;
+  tours$: Observable<(Tour & { ticket: Ticket })[]>;
 
   constructor() {
     const batchMap: Observable<Record<string, Tour & { ticket: Ticket }>> =