feat: accounts list — active-only filter, date range & as-on-date search, modern UI

- Show only active accounts (status=300) for SB/CA/FD/RD lists; status sent as query param
- Add FROM/TO date range filter (API fires only when both are set) and independent AS ON DATE filter
- Restrict date pickers to today max (no future date selection)
- Default sort: latest accounts on top (ORDER BY id DESC)
- Full UI redesign: accent header, monospace account pill, client avatar, modern badges
- AccountsService: added status, fromDate, toDate, asOnDate to AccountListParams and all 4 methods

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/accounts/accounts-list/accounts-list.component.ts

@@ -24,14 +24,12 @@ import {
   MatRowDef,
   MatRow
 } from '@angular/material/table';
-import { Subject } from 'rxjs';
+import { Subject, merge } from 'rxjs';
 import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
-import { NgClass, NgIf } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
-import { MatCardModule } from '@angular/material/card';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatButtonModule } from '@angular/material/button';
 import { FormatNumberPipe } from '../../pipes/format-number.pipe';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 import { AccountsService } from '../accounts.service';
@@ -41,8 +39,9 @@ export type AccountType = 'savings' | 'current' | 'fixed-deposits' | 'recurring-
 interface AccountConfig {
   label: string;
   icon: string;
-  color: string;
   accentClass: string;
+  typeLabel: string;
+  typeBadgeClass: string;
 }
 
 @Component({
@@ -68,11 +67,8 @@ interface AccountConfig {
     MatRow,
     MatPaginator,
     NgClass,
-    NgIf,
-    MatCardModule,
     MatTooltipModule,
     MatProgressSpinnerModule,
-    MatButtonModule,
     FormatNumberPipe
   ]
 })
@@ -80,7 +76,6 @@ export class AccountsListComponent implements OnInit, OnDestroy {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private accountsService = inject(AccountsService);
-
   private destroy$ = new Subject<void>();
 
   accountType: AccountType = 'savings';
@@ -102,24 +97,41 @@ export class AccountsListComponent implements OnInit, OnDestroy {
 
   searchControl = new FormControl('');
   searchType: 'accountNo' | 'clientName' = 'accountNo';
+  fromDateControl = new FormControl('');
+  toDateControl = new FormControl('');
+  asOnDateControl = new FormControl('');
 
   @ViewChild(MatPaginator) paginator!: MatPaginator;
   @ViewChild(MatSort) sort!: MatSort;
 
   readonly configs: Record<AccountType, AccountConfig> = {
-    savings: { label: 'Savings Accounts', icon: 'piggy-bank', color: '#1976d2', accentClass: 'accent--saving' },
-    current: { label: 'Current Accounts', icon: 'building', color: '#00796b', accentClass: 'accent--current' },
+    savings: {
+      label: 'Savings Accounts',
+      icon: 'piggy-bank',
+      accentClass: 'accent--saving',
+      typeLabel: 'SB',
+      typeBadgeClass: 'dtype--sb'
+    },
+    current: {
+      label: 'Current Accounts',
+      icon: 'building',
+      accentClass: 'accent--current',
+      typeLabel: 'CA',
+      typeBadgeClass: 'dtype--ca'
+    },
     'fixed-deposits': {
       label: 'Fixed Deposit Accounts',
       icon: 'lock',
-      color: '#6a1b9a',
-      accentClass: 'accent--fd'
+      accentClass: 'accent--fd',
+      typeLabel: 'FD',
+      typeBadgeClass: 'dtype--fd'
     },
     'recurring-deposits': {
       label: 'Recurring Deposit Accounts',
       icon: 'sync',
-      color: '#e65100',
-      accentClass: 'accent--rd'
+      accentClass: 'accent--rd',
+      typeLabel: 'RD',
+      typeBadgeClass: 'dtype--rd'
     }
   };
 
@@ -141,6 +153,22 @@ export class AccountsListComponent implements OnInit, OnDestroy {
         this.pageIndex = 0;
         this.loadAccounts();
       });
+
+    merge(this.fromDateControl.valueChanges, this.toDateControl.valueChanges)
+      .pipe(debounceTime(400), takeUntil(this.destroy$))
+      .subscribe(() => {
+        const from = this.fromDateControl.value;
+        const to = this.toDateControl.value;
+        if ((from && to) || (!from && !to)) {
+          this.pageIndex = 0;
+          this.loadAccounts();
+        }
+      });
+
+    this.asOnDateControl.valueChanges.pipe(debounceTime(300), takeUntil(this.destroy$)).subscribe(() => {
+      this.pageIndex = 0;
+      this.loadAccounts();
+    });
   }
 
   ngOnDestroy() {
@@ -151,11 +179,21 @@ export class AccountsListComponent implements OnInit, OnDestroy {
   loadAccounts() {
     this.isLoading = true;
     const search = (this.searchControl.value || '').trim();
-    const params = {
+    const fromVal = this.fromDateControl.value;
+    const toVal = this.toDateControl.value;
+    const bothDatesSet = !!(fromVal && toVal);
+
+    const params: import('../accounts.service').AccountListParams = {
       offset: this.pageIndex * this.pageSize,
       limit: this.pageSize,
-      accountNo: this.searchType === 'accountNo' ? search : undefined,
-      clientName: this.searchType === 'clientName' ? search : undefined
+      accountNo: this.searchType === 'accountNo' ? search || undefined : undefined,
+      clientName: this.searchType === 'clientName' ? search || undefined : undefined,
+      orderBy: 'id',
+      sortOrder: 'DESC',
+      status: 'active',
+      ...(bothDatesSet && { fromDate: fromVal! }),
+      ...(bothDatesSet && { toDate: toVal! }),
+      ...(this.asOnDateControl.value && { asOnDate: this.asOnDateControl.value })
     };
 
     const obs$ =
@@ -171,20 +209,33 @@ export class AccountsListComponent implements OnInit, OnDestroy {
       next: (res) => {
         let items: any[] = Array.isArray(res) ? res : (res?.pageItems ?? []);
 
-        // Client-side deposit type filter (safety net until backend rebuild)
-        const depositTypeFilter = this.getDepositTypeId();
-        if (depositTypeFilter !== null) {
-          items = items.filter((a: any) => a?.depositType?.id === depositTypeFilter);
+        if (this.accountType === 'savings') {
+          items = items.filter((a: any) => a?.depositType?.id === 100);
         }
 
-        // Client-side search fallback (for when backend search isn't rebuilt yet)
-        const searchTerm = (this.searchControl.value || '').trim().toLowerCase();
+        items = items.filter((a: any) => (a?.status?.id ?? a?.statusId) === 300);
+
+        const searchTerm = search.toLowerCase();
+
         if (searchTerm) {
+          items = items.filter((a: any) =>
+            this.searchType === 'accountNo'
+              ? (a?.accountNo || '').toLowerCase().includes(searchTerm)
+              : (a?.clientName || '').toLowerCase().includes(searchTerm)
+          );
+        }
+
+        if (bothDatesSet || this.asOnDateControl.value) {
+          const fromDate = bothDatesSet ? new Date(fromVal!) : null;
+          const toDate = bothDatesSet ? new Date(toVal! + 'T23:59:59') : null;
+          const asOnDate = this.asOnDateControl.value ? new Date(this.asOnDateControl.value + 'T23:59:59') : null;
           items = items.filter((a: any) => {
-            if (this.searchType === 'accountNo') {
-              return (a?.accountNo || '').toLowerCase().includes(searchTerm);
-            }
-            return (a?.clientName || '').toLowerCase().includes(searchTerm);
+            const d = this.parseFinDate(a?.activationDate ?? a?.submittedOnDate);
+            if (!d) return true;
+            if (fromDate && d < fromDate) return false;
+            if (toDate && d > toDate) return false;
+            if (asOnDate && d > asOnDate) return false;
+            return true;
           });
         }
 
@@ -204,93 +255,74 @@ export class AccountsListComponent implements OnInit, OnDestroy {
     this.loadAccounts();
   }
 
-  onSortChange(sort: Sort) {
+  private parseFinDate(d: any): Date | null {
+    if (!d) return null;
+    if (Array.isArray(d) && d.length >= 3) return new Date(d[0], d[1] - 1, d[2]);
+    if (typeof d === 'string') return new Date(d);
+    return null;
+  }
+
+  readonly today = new Date().toISOString().split('T')[0];
+
+  get hasDateFilters(): boolean {
+    return !!((this.fromDateControl.value && this.toDateControl.value) || this.asOnDateControl.value);
+  }
+
+  clearDateFilters() {
+    this.fromDateControl.setValue(null, { emitEvent: false });
+    this.toDateControl.setValue(null, { emitEvent: false });
+    this.asOnDateControl.setValue(null, { emitEvent: false });
+    this.pageIndex = 0;
+    this.loadAccounts();
+  }
+
+  onSortChange(_sort: Sort) {
     this.pageIndex = 0;
     this.loadAccounts();
   }
 
   toggleSearchType() {
     this.searchType = this.searchType === 'accountNo' ? 'clientName' : 'accountNo';
-    if (this.searchControl.value) {
-      this.loadAccounts();
-    }
+    if (this.searchControl.value) this.loadAccounts();
   }
 
   clearSearch() {
     this.searchControl.setValue('');
   }
 
-  getDepositTypeId(): number | null {
-    // Only filter on savings page — FD/RD endpoints already return correct type
-    return this.accountType === 'savings' ? 100 : null;
-  }
-
-  getDepositTypeBadgeClass(_account: any): string {
-    switch (this.accountType) {
-      case 'savings':
-        return 'dtype--sb';
-      case 'fixed-deposits':
-        return 'dtype--fd';
-      case 'recurring-deposits':
-        return 'dtype--rd';
-      default:
-        return 'dtype--ca';
-    }
-  }
-
-  getDepositTypeLabel(_account: any): string {
-    switch (this.accountType) {
-      case 'savings':
-        return 'SB';
-      case 'fixed-deposits':
-        return 'FD';
-      case 'recurring-deposits':
-        return 'RD';
-      default:
-        return 'CA';
-    }
-  }
-
   viewAccount(account: any) {
     const id = account.id;
-    switch (this.accountType) {
-      case 'savings':
-        this.router.navigate([
-          '/clients',
-          account.clientId,
-          'savings-accounts',
-          id,
-          'general'
-        ]);
-        break;
-      case 'current':
-        this.router.navigate([
-          '/clients',
-          account.clientId,
-          'current-accounts',
-          id,
-          'general'
-        ]);
-        break;
-      case 'fixed-deposits':
-        this.router.navigate([
-          '/clients',
-          account.clientId,
-          'fixed-deposits-accounts',
-          id,
-          'general'
-        ]);
-        break;
-      case 'recurring-deposits':
-        this.router.navigate([
-          '/clients',
-          account.clientId,
-          'recurring-deposits-accounts',
-          id,
-          'general'
-        ]);
-        break;
-    }
+    const routes: Record<AccountType, string[]> = {
+      savings: [
+        '/clients',
+        account.clientId,
+        'savings-accounts',
+        id,
+        'general'
+      ],
+      current: [
+        '/clients',
+        account.clientId,
+        'current-accounts',
+        id,
+        'general'
+      ],
+      'fixed-deposits': [
+        '/clients',
+        account.clientId,
+        'fixed-deposits-accounts',
+        id,
+        'general'
+      ],
+      'recurring-deposits': [
+        '/clients',
+        account.clientId,
+        'recurring-deposits-accounts',
+        id,
+        'general'
+      ]
+    };
+    this.router.navigate(routes[this.accountType]);
   }
 
   getBalance(account: any): number {
@@ -303,22 +335,15 @@ export class AccountsListComponent implements OnInit, OnDestroy {
 
   getStatusClass(account: any): string {
     const id = account?.status?.id ?? account?.statusId;
-    switch (id) {
-      case 100:
-        return 'status--submitted';
-      case 200:
-        return 'status--approved';
-      case 300:
-        return 'status--active';
-      case 400:
-        return 'status--withdrawn';
-      case 500:
-        return 'status--rejected';
-      case 600:
-        return 'status--closed';
-      default:
-        return 'status--default';
-    }
+    const map: Record<number, string> = {
+      100: 'status--submitted',
+      200: 'status--approved',
+      300: 'status--active',
+      400: 'status--withdrawn',
+      500: 'status--rejected',
+      600: 'status--closed'
+    };
+    return map[id] ?? 'status--default';
   }
 
   getStatusLabel(account: any): string {