DDS: approvals tab, vouchers, payout & close, Sundry GL search, closure tab, fixes
This commit is contained in:
tarunmalviya
@@ -0,0 +1,211 @@
|
||||
<!--
|
||||
Copyright since 2025 Mifos Initiative
|
||||
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="acl-page">
|
||||
<!-- Header -->
|
||||
<div class="acl-header accent--rd">
|
||||
<div class="acl-header__icon">
|
||||
<fa-icon icon="coins"></fa-icon>
|
||||
</div>
|
||||
<div class="acl-header__text">
|
||||
<h2 class="acl-header__title">DDS Accounts</h2>
|
||||
<span class="acl-header__count">
|
||||
@if (isLoading) {
|
||||
Loading...
|
||||
} @else {
|
||||
{{ allCount }} accounts · {{ activeCount }} active · {{ closedCount }} closed
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Bar -->
|
||||
<div class="acl-search-wrap">
|
||||
<div class="acl-search">
|
||||
<fa-icon icon="search" class="acl-search__icon"></fa-icon>
|
||||
<input
|
||||
[formControl]="searchControl"
|
||||
class="acl-search__input"
|
||||
[placeholder]="
|
||||
searchType === 'accountNo' ? 'Search by account number or party code…' : 'Search by client name…'
|
||||
"
|
||||
/>
|
||||
@if (searchControl.value) {
|
||||
<button class="acl-search__clear" (click)="clearSearch()">
|
||||
<fa-icon icon="times"></fa-icon>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
<button
|
||||
class="acl-btn acl-btn--toggle"
|
||||
(click)="toggleSearchType()"
|
||||
[matTooltip]="'Switch to ' + (searchType === 'accountNo' ? 'client name' : 'account number') + ' search'"
|
||||
>
|
||||
<fa-icon icon="exchange-alt"></fa-icon>
|
||||
{{ searchType === 'accountNo' ? 'Acct No' : 'Client' }}
|
||||
</button>
|
||||
<button class="acl-btn acl-btn--icon" (click)="loadAccounts()" matTooltip="Refresh">
|
||||
<fa-icon icon="sync-alt"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Status: all accounts, only the open ones, or only the closed -->
|
||||
<div class="dds-status-filter" role="tablist">
|
||||
<button
|
||||
type="button"
|
||||
class="dds-status-filter__btn"
|
||||
[class.is-on]="statusFilter === 'ALL'"
|
||||
(click)="setStatusFilter('ALL')"
|
||||
>
|
||||
All <span class="dds-status-filter__count">{{ allCount }}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="dds-status-filter__btn dds-status-filter__btn--active"
|
||||
[class.is-on]="statusFilter === 'ACTIVE'"
|
||||
(click)="setStatusFilter('ACTIVE')"
|
||||
>
|
||||
Active <span class="dds-status-filter__count">{{ activeCount }}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="dds-status-filter__btn dds-status-filter__btn--closed"
|
||||
[class.is-on]="statusFilter === 'CLOSED'"
|
||||
(click)="setStatusFilter('CLOSED')"
|
||||
>
|
||||
Closed <span class="dds-status-filter__count">{{ closedCount }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Date Filters: by the day the account was opened -->
|
||||
<div class="acl-filters">
|
||||
<div class="acl-filters__group">
|
||||
<div class="acl-datepick">
|
||||
<span class="acl-datepick__label">Opened From</span>
|
||||
<input type="date" class="acl-datepick__input" [formControl]="fromDateControl" [max]="today" />
|
||||
</div>
|
||||
<div class="acl-filters__arrow">
|
||||
<fa-icon icon="arrow-right"></fa-icon>
|
||||
</div>
|
||||
<div class="acl-datepick">
|
||||
<span class="acl-datepick__label">To</span>
|
||||
<input type="date" class="acl-datepick__input" [formControl]="toDateControl" [max]="today" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="acl-filters__sep"></div>
|
||||
|
||||
<div class="acl-datepick acl-datepick--ason">
|
||||
<span class="acl-datepick__label">
|
||||
<fa-icon icon="clock"></fa-icon>
|
||||
As On Date
|
||||
</span>
|
||||
<input type="date" class="acl-datepick__input" [formControl]="asOnDateControl" [max]="today" />
|
||||
</div>
|
||||
|
||||
@if (hasDateFilters) {
|
||||
<button class="acl-filters__clear" (click)="clearDateFilters()">
|
||||
<fa-icon icon="times"></fa-icon>
|
||||
Clear
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="acl-card">
|
||||
@if (isLoading) {
|
||||
<div class="acl-state acl-state--loading">
|
||||
<mat-spinner diameter="32"></mat-spinner>
|
||||
<span>Loading accounts…</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (!isLoading && rows.length === 0) {
|
||||
<div class="acl-state acl-state--empty">
|
||||
<div class="acl-state__icon">
|
||||
<fa-icon icon="inbox"></fa-icon>
|
||||
</div>
|
||||
<p class="acl-state__title">No DDS accounts found</p>
|
||||
<p class="acl-state__sub">Try adjusting your search</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (!isLoading && rows.length > 0) {
|
||||
<div class="acl-table-wrap">
|
||||
<table mat-table [dataSource]="rows" class="acl-table">
|
||||
<ng-container matColumnDef="accountNo">
|
||||
<th mat-header-cell *matHeaderCellDef class="acl-th">Account No</th>
|
||||
<td mat-cell *matCellDef="let row" class="acl-td">
|
||||
<span class="acl-acct-no">{{ row.accountNo }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="depositType">
|
||||
<th mat-header-cell *matHeaderCellDef class="acl-th acl-th--center">Type</th>
|
||||
<td mat-cell *matCellDef="let row" class="acl-td acl-td--center">
|
||||
<span class="acl-type-badge dtype--rd">DDS</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="clientName">
|
||||
<th mat-header-cell *matHeaderCellDef class="acl-th">Client</th>
|
||||
<td mat-cell *matCellDef="let row" class="acl-td">
|
||||
<div class="acl-client">
|
||||
<div class="acl-client__avatar">{{ (row.clientName || row.partyName || '?')[0] }}</div>
|
||||
<span class="acl-client__name">{{ row.clientName || row.partyName }}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="productName">
|
||||
<th mat-header-cell *matHeaderCellDef class="acl-th">Product</th>
|
||||
<td mat-cell *matCellDef="let row" class="acl-td">
|
||||
<span class="acl-product">{{ row.subType }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="balance">
|
||||
<th mat-header-cell *matHeaderCellDef class="acl-th acl-th--right">Balance</th>
|
||||
<td mat-cell *matCellDef="let row" class="acl-td acl-td--right">
|
||||
<span class="acl-balance">₹ {{ row.currentBalance || 0 | formatNumber }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="status">
|
||||
<th mat-header-cell *matHeaderCellDef class="acl-th acl-th--center">Status</th>
|
||||
<td mat-cell *matCellDef="let row" class="acl-td acl-td--center">
|
||||
<span class="acl-status" [ngClass]="getStatusClass(row)">{{ row.status }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef class="acl-th acl-th--center">Actions</th>
|
||||
<td mat-cell *matCellDef="let row" class="acl-td acl-td--center">
|
||||
<button class="acl-view-btn" (click)="$event.stopPropagation(); viewAccount(row)" matTooltip="View">
|
||||
<fa-icon icon="eye"></fa-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns" class="acl-header-row"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns" class="acl-row" (click)="viewAccount(row)"></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<mat-paginator
|
||||
[length]="totalRecords"
|
||||
[pageSize]="pageSize"
|
||||
[pageIndex]="pageIndex"
|
||||
[pageSizeOptions]="[10, 20, 50, 100]"
|
||||
(page)="onPageChange($event)"
|
||||
class="acl-paginator"
|
||||
showFirstLastButtons
|
||||
></mat-paginator>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user