196 lines
7.5 KiB
HTML
196 lines
7.5 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/.
|
|
-->
|
|
|
|
<div class="pl-root">
|
|
<div class="pl-header">
|
|
<div class="pl-header-left">
|
|
<div class="pl-header-ic"><fa-icon icon="user-tie"></fa-icon></div>
|
|
<div class="pl-header-text">
|
|
<h2>Agent Master</h2>
|
|
<p>The DDS collection agents on file.</p>
|
|
</div>
|
|
</div>
|
|
<div class="pl-header-right">
|
|
<div class="pl-count-chip" matTooltip="Total agents">
|
|
<fa-icon icon="user-tie"></fa-icon>
|
|
<strong>{{ totalCount }}</strong>
|
|
<span>{{ totalCount === 1 ? 'agent' : 'agents' }}</span>
|
|
</div>
|
|
<button class="pl-create-btn" type="button" [routerLink]="['create']">
|
|
<fa-icon icon="plus"></fa-icon>
|
|
<span>Create Agent</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pl-kpis">
|
|
<div class="pl-kpi pl-kpi--blue">
|
|
<div class="pl-kpi-ic"><fa-icon icon="user-tie"></fa-icon></div>
|
|
<div>
|
|
<div class="pl-kpi-n">{{ totalCount | number }}</div>
|
|
<div class="pl-kpi-l">Total Agents</div>
|
|
</div>
|
|
</div>
|
|
<div class="pl-kpi pl-kpi--purple">
|
|
<div class="pl-kpi-ic"><fa-icon icon="toggle-on"></fa-icon></div>
|
|
<div>
|
|
<div class="pl-kpi-n">{{ activeCount | number }}</div>
|
|
<div class="pl-kpi-l">Active Agents</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="pl-kpi pl-kpi--teal"
|
|
matTooltip="Money collected from parties that agents have not yet handed over to a branch"
|
|
>
|
|
<div class="pl-kpi-ic"><fa-icon icon="wallet"></fa-icon></div>
|
|
<div>
|
|
<div class="pl-kpi-n">{{ totalCurrentBalance | number: '1.2-2' }}</div>
|
|
<div class="pl-kpi-l">Cash With Agents (Unsettled)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pl-card">
|
|
<div class="pl-toolbar">
|
|
<div class="pl-search">
|
|
<fa-icon icon="search" class="pl-search-ic"></fa-icon>
|
|
<input type="text" (input)="applyFilter($any($event.target).value)" placeholder="Search by code or name…" />
|
|
</div>
|
|
</div>
|
|
|
|
@if (totalCount === 0) {
|
|
<div class="pl-empty">
|
|
<div class="pl-empty-ic"><fa-icon icon="user-tie"></fa-icon></div>
|
|
<h3>No agents yet</h3>
|
|
<p>Create one so daily collections can be recorded against it.</p>
|
|
<button class="pl-create-btn" type="button" [routerLink]="['create']">
|
|
<fa-icon icon="plus"></fa-icon>
|
|
<span>Create Agent</span>
|
|
</button>
|
|
</div>
|
|
} @else {
|
|
<div class="pl-table-wrap">
|
|
<table mat-table [dataSource]="dataSource" matSort class="pl-table">
|
|
<ng-container matColumnDef="agentCode">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Agent Code</th>
|
|
<td mat-cell *matCellDef="let a">
|
|
<div class="pl-product-cell">
|
|
<div class="pl-product-icon"><fa-icon icon="user-tie"></fa-icon></div>
|
|
<div class="pl-product-meta">
|
|
<div class="pl-product-name">{{ a.agentCode }}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="clientName">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Agent Name</th>
|
|
<td mat-cell *matCellDef="let a">{{ a.agentNameId }}</td>
|
|
</ng-container>
|
|
|
|
<!-- Which branch the agent's collections belong to. Its own column rather than a subtitle:
|
|
it decides which branch's batch run picks the agent up, so it has to be scannable. -->
|
|
<!-- The GL the cashier takes this agent's cash into, so it is to hand without opening the agent. -->
|
|
<ng-container matColumnDef="glAccount">
|
|
<th mat-header-cell *matHeaderCellDef>GL Account</th>
|
|
<td mat-cell *matCellDef="let a">
|
|
@if (a.glAccountCode) {
|
|
<span class="pl-tag">{{ a.glAccountCode }} · {{ a.glAccountName }}</span>
|
|
} @else {
|
|
<span class="am-no-branch">Not set</span>
|
|
}
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="homeBranch">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Branch</th>
|
|
<td mat-cell *matCellDef="let a">
|
|
@if (a.homeBranch) {
|
|
<span class="pl-tag">{{ a.homeBranch }}</span>
|
|
} @else {
|
|
<span class="am-no-branch">Not set</span>
|
|
}
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="agentCity">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>City</th>
|
|
<td mat-cell *matCellDef="let a">{{ a.agentCity }}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="agentSavingAccountNo">
|
|
<th mat-header-cell *matHeaderCellDef>Saving A/C No</th>
|
|
<td mat-cell *matCellDef="let a">
|
|
<span class="pl-tag">{{ a.agentSavingAccountNo }}</span>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="agentCurrentBalance">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header class="num">Current Balance</th>
|
|
<td mat-cell *matCellDef="let a" class="num">
|
|
<strong>{{ a.agentCurrentBalance | number: '1.2-2' }}</strong>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="status">
|
|
<th mat-header-cell *matHeaderCellDef>Status</th>
|
|
<td mat-cell *matCellDef="let a">
|
|
<span class="am-pill" [class.am-pill--off]="!a.active">
|
|
{{ a.active ? 'Active' : 'Inactive' }}
|
|
</span>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="createdDate">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Created</th>
|
|
<td mat-cell *matCellDef="let a">
|
|
{{ a.createdDate ? (a.createdDate | dateFormat: 'DD MMM YYYY, hh:mm A') : '—' }}
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="actions">
|
|
<th mat-header-cell *matHeaderCellDef class="num">Actions</th>
|
|
<td mat-cell *matCellDef="let a" class="num">
|
|
<!-- A closed agent is off the books: nothing can be changed on it, only read. -->
|
|
@if (a.closeDate) {
|
|
<span class="am-closed-on">Closed {{ a.closeDate | dateFormat }}</span>
|
|
} @else {
|
|
<button
|
|
type="button"
|
|
class="pl-action-btn pl-action-btn--edit"
|
|
[routerLink]="[a.id, 'edit']"
|
|
matTooltip="Edit this agent"
|
|
>
|
|
<fa-icon icon="edit"></fa-icon><span>Edit</span>
|
|
</button>
|
|
}
|
|
</td>
|
|
</ng-container>
|
|
|
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
|
<tr
|
|
mat-row
|
|
*matRowDef="let row; columns: displayedColumns"
|
|
class="pl-row"
|
|
[class.am-row--inactive]="!row.active"
|
|
></tr>
|
|
</table>
|
|
|
|
@if (filteredCount === 0 && totalCount > 0) {
|
|
<div class="pl-no-match">
|
|
<fa-icon icon="search"></fa-icon>
|
|
<span>No agents match your filter.</span>
|
|
</div>
|
|
}
|
|
|
|
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" [pageSize]="10" showFirstLastButtons></mat-paginator>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|