feat: add Welcome Kit dispatch dialog and Share Holders view

src/app/shares/share-holders/share-holders.component.html

@@ -0,0 +1,130 @@
+<!--
+  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>