131 lines
5.7 KiB
HTML
131 lines
5.7 KiB
HTML
<!--
|
|
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/.
|
|
-->
|
|
<mat-card class="container">
|
|
<div class="table-header">
|
|
<div class="table-header-row">
|
|
<div class="table-title-group">
|
|
<h2 class="table-title">
|
|
<div class="t-logomark"><span></span><span></span><span></span><span></span></div>
|
|
Share Holders
|
|
</h2>
|
|
<span class="table-count" *ngIf="totalRows">{{ totalRows }} records</span>
|
|
</div>
|
|
|
|
<div class="table-buttons"></div>
|
|
</div>
|
|
|
|
<div class="table-filters">
|
|
<mat-form-field class="table-search" appearance="outline">
|
|
<input matInput placeholder="Search by client name or account number" [formControl]="searchControl" />
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="table-filter" appearance="outline">
|
|
<mat-select [(value)]="branchFilter" (selectionChange)="applyFilters()" placeholder="Branch">
|
|
<mat-option value="">All Branches</mat-option>
|
|
<mat-option *ngFor="let office of offices" [value]="office.id">
|
|
{{ office.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="table-filter" appearance="outline">
|
|
<mat-select [(value)]="productFilter" (selectionChange)="applyFilters()" placeholder="Share Product">
|
|
<mat-option value="">All Products</mat-option>
|
|
<mat-option *ngFor="let product of products" [value]="product.id">
|
|
{{ product.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="table-filter" appearance="outline">
|
|
<mat-select [(value)]="statusFilter" (selectionChange)="applyFilters()" placeholder="Status">
|
|
<mat-option value="">All Status</mat-option>
|
|
<mat-option value="active">Active</mat-option>
|
|
<mat-option value="approved">Approved</mat-option>
|
|
<mat-option value="submitted and pending approval">Pending</mat-option>
|
|
<mat-option value="closed">Closed</mat-option>
|
|
<mat-option value="rejected">Rejected</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="table-filter" appearance="outline" (click)="picker.open()">
|
|
<mat-date-range-input [formGroup]="dateRangeForm" [rangePicker]="picker">
|
|
<input matStartDate formControlName="start" placeholder="Start date" (dateChange)="applyFilters()" />
|
|
<input matEndDate formControlName="end" placeholder="End date" (dateChange)="applyFilters()" />
|
|
</mat-date-range-input>
|
|
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
|
<mat-date-range-picker #picker></mat-date-range-picker>
|
|
</mat-form-field>
|
|
|
|
<button mat-icon-button matTooltip="Clear Filters" (click)="clearFilters()">
|
|
<mat-icon>clear</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-container">
|
|
<mat-progress-bar *ngIf="isLoading" mode="indeterminate" class="table-loader"></mat-progress-bar>
|
|
|
|
<table mat-table [dataSource]="dataSource" matSort class="modern-table">
|
|
<!-- Member Name Column (clientName) -->
|
|
<ng-container matColumnDef="clientName">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Client Name</th>
|
|
<td mat-cell *matCellDef="let element">{{ element.clientName || 'N/A' }}</td>
|
|
</ng-container>
|
|
|
|
<!-- Folio Number Column (accountNo) -->
|
|
<ng-container matColumnDef="accountNo">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Account No</th>
|
|
<td mat-cell *matCellDef="let element">{{ element.accountNo || 'N/A' }}</td>
|
|
</ng-container>
|
|
|
|
<!-- Class Column (productName) -->
|
|
<ng-container matColumnDef="productName">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Share Product Name</th>
|
|
<td mat-cell *matCellDef="let element">{{ element.productName || 'N/A' }}</td>
|
|
</ng-container>
|
|
|
|
<!-- Approved Shares Column -->
|
|
<ng-container matColumnDef="totalApprovedShares">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Approved Shares</th>
|
|
<td mat-cell *matCellDef="let element">{{ element.totalApprovedShares || 0 }}</td>
|
|
</ng-container>
|
|
|
|
<!-- Pending Shares Column -->
|
|
<ng-container matColumnDef="totalPendingForApprovalShares">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Pending Shares</th>
|
|
<td mat-cell *matCellDef="let element">{{ element.totalPendingForApprovalShares || 0 }}</td>
|
|
</ng-container>
|
|
|
|
<!-- Currency Column -->
|
|
<ng-container matColumnDef="currency">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Currency</th>
|
|
<td mat-cell *matCellDef="let element">{{ element.currency?.code || 'N/A' }}</td>
|
|
</ng-container>
|
|
|
|
<!-- Activated Date Column -->
|
|
<ng-container matColumnDef="activatedDate">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Activated On</th>
|
|
<td mat-cell *matCellDef="let element">
|
|
{{ element.activatedDate ? (element.activatedDate | dateFormat) : 'Not Activated' }}
|
|
</td>
|
|
</ng-container>
|
|
|
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
|
<!-- We can route to /shares/{accountId} or /clients/{clientId}/shares-accounts/{accountId}/general depending on preference -->
|
|
<tr
|
|
mat-row
|
|
*matRowDef="let row; columns: displayedColumns"
|
|
[routerLink]="['/clients', row.clientId, 'shares-accounts', row.id, 'general']"
|
|
></tr>
|
|
</table>
|
|
|
|
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
|
</div>
|
|
</mat-card>
|