update accounting journal entry UI and API response
This commit is contained in:
Nitesh Yadav
@@ -106,6 +106,40 @@ export class AccountingService {
|
||||
return this.http.get('/journalentries', { params: httpParams });
|
||||
}
|
||||
|
||||
/**
|
||||
* CBS GL Account Ledger Report: returns opening balance, day-wise summary, totals, and paginated entries.
|
||||
*/
|
||||
getGLAccountLedger(params: {
|
||||
glAccountId?: number;
|
||||
officeId?: number;
|
||||
fromDate?: string;
|
||||
toDate?: string;
|
||||
dateFormat?: string;
|
||||
locale?: string;
|
||||
manualEntriesOnly?: boolean;
|
||||
transactionId?: string;
|
||||
offset?: number;
|
||||
limit?: number;
|
||||
orderBy?: string;
|
||||
sortOrder?: string;
|
||||
}): Observable<any> {
|
||||
let httpParams = new HttpParams();
|
||||
if (params.glAccountId) httpParams = httpParams.set('glAccountId', params.glAccountId.toString());
|
||||
if (params.officeId) httpParams = httpParams.set('officeId', params.officeId.toString());
|
||||
if (params.fromDate) httpParams = httpParams.set('fromDate', params.fromDate);
|
||||
if (params.toDate) httpParams = httpParams.set('toDate', params.toDate);
|
||||
if (params.dateFormat) httpParams = httpParams.set('dateFormat', params.dateFormat);
|
||||
if (params.locale) httpParams = httpParams.set('locale', params.locale);
|
||||
if (params.manualEntriesOnly != null)
|
||||
httpParams = httpParams.set('manualEntriesOnly', params.manualEntriesOnly.toString());
|
||||
if (params.transactionId) httpParams = httpParams.set('transactionId', params.transactionId);
|
||||
if (params.offset != null) httpParams = httpParams.set('offset', params.offset.toString());
|
||||
if (params.limit != null) httpParams = httpParams.set('limit', params.limit.toString());
|
||||
if (params.orderBy) httpParams = httpParams.set('orderBy', params.orderBy);
|
||||
if (params.sortOrder) httpParams = httpParams.set('sortOrder', params.sortOrder);
|
||||
return this.http.get('/journalentries/ledger', { params: httpParams });
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} transactionId Transaction ID to be reverted.
|
||||
* @param {string} comments Any comments.
|
||||
|
||||
@@ -6,68 +6,74 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
/** Angular Imports */
|
||||
import { CollectionViewer, DataSource } from '@angular/cdk/collections';
|
||||
|
||||
/** rxjs Imports */
|
||||
import { Observable, BehaviorSubject } from 'rxjs';
|
||||
|
||||
/** Custom Services */
|
||||
import { AccountingService } from '../accounting.service';
|
||||
|
||||
/**
|
||||
* Journal entries custom data source to implement server side filtering, pagination and sorting.
|
||||
*/
|
||||
export class JournalEntriesDataSource implements DataSource<any> {
|
||||
/** Journal entries behavior subject to represent loaded journal entries page. */
|
||||
private journalEntriesSubject = new BehaviorSubject<any[]>([]);
|
||||
/** Records subject to represent total number of filtered journal entry records. */
|
||||
private filteredSubject = new BehaviorSubject<any[]>([]);
|
||||
private recordsSubject = new BehaviorSubject<number>(0);
|
||||
/** Records observable which can be subscribed to get the value of total number of filtered journal entry records. */
|
||||
public records$ = this.recordsSubject.asObservable();
|
||||
|
||||
/**
|
||||
* @param {AccountingService} accountingService Accounting Service
|
||||
*/
|
||||
public records$ = this.recordsSubject.asObservable();
|
||||
public entries$ = this.filteredSubject.asObservable();
|
||||
|
||||
private accountTypeFilter = '';
|
||||
|
||||
constructor(private accountingService: AccountingService) {}
|
||||
|
||||
/**
|
||||
* Gets journal entries on the basis of provided parameters and emits the value.
|
||||
* @param {any} filterBy Properties by which entries should be filtered.
|
||||
* @param {string} orderBy Property by which entries should be sorted.
|
||||
* @param {string} sortOrder Sort order: ascending or descending.
|
||||
* @param {number} pageIndex Page number.
|
||||
* @param {number} limit Number of entries within the page.
|
||||
*/
|
||||
getJournalEntries(
|
||||
filterBy: any,
|
||||
orderBy: string = '',
|
||||
sortOrder: string = '',
|
||||
pageIndex: number = 0,
|
||||
limit: number = 10
|
||||
) {
|
||||
getJournalEntries(filterBy: any, orderBy = '', sortOrder = '', pageIndex = 0, limit = 10) {
|
||||
this.journalEntriesSubject.next([]);
|
||||
this.filteredSubject.next([]);
|
||||
|
||||
// Extract client-side glAccountClassification filter — not sent to server
|
||||
const classificationFilter = filterBy.find((f: any) => f.type === 'glAccountClassification');
|
||||
this.accountTypeFilter = classificationFilter?.value || '';
|
||||
const serverFilters = filterBy.filter((f: any) => f.type !== 'glAccountClassification');
|
||||
|
||||
orderBy = orderBy === 'debit' || orderBy === 'credit' ? 'amount' : orderBy;
|
||||
|
||||
// Always request running balance and transaction details for the entries table
|
||||
const runningBalanceFilter = { type: 'runningBalance', value: 'true' };
|
||||
const txnDetailsFilter = { type: 'transactionDetails', value: 'true' };
|
||||
const filtersWithExtras = [
|
||||
...serverFilters,
|
||||
runningBalanceFilter,
|
||||
txnDetailsFilter
|
||||
];
|
||||
|
||||
this.accountingService
|
||||
.getJournalEntries(filterBy, orderBy, sortOrder, pageIndex * limit, limit)
|
||||
.getJournalEntries(filtersWithExtras, orderBy, sortOrder, pageIndex * limit, limit)
|
||||
.subscribe((journalEntries: any) => {
|
||||
this.recordsSubject.next(journalEntries.totalFilteredRecords);
|
||||
this.journalEntriesSubject.next(journalEntries.pageItems);
|
||||
const all: any[] = journalEntries.pageItems || [];
|
||||
this.journalEntriesSubject.next(all);
|
||||
|
||||
// Client-side account type filter
|
||||
const filtered = this.accountTypeFilter
|
||||
? all.filter((e) => e.glAccountType?.value === this.accountTypeFilter)
|
||||
: all;
|
||||
|
||||
this.recordsSubject.next(this.accountTypeFilter ? filtered.length : journalEntries.totalFilteredRecords);
|
||||
this.filteredSubject.next(filtered);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {CollectionViewer} collectionViewer
|
||||
*/
|
||||
/** Apply account type filter on already-loaded data without re-fetching */
|
||||
applyAccountTypeFilter(type: string) {
|
||||
this.accountTypeFilter = type;
|
||||
const all = this.journalEntriesSubject.getValue();
|
||||
const filtered = type ? all.filter((e) => e.glAccountType?.value === type) : all;
|
||||
this.recordsSubject.next(filtered.length || (type ? 0 : this.recordsSubject.getValue()));
|
||||
this.filteredSubject.next(filtered);
|
||||
}
|
||||
|
||||
connect(collectionViewer: CollectionViewer): Observable<any[]> {
|
||||
return this.journalEntriesSubject.asObservable();
|
||||
return this.filteredSubject.asObservable();
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {CollectionViewer} collectionViewer
|
||||
*/
|
||||
disconnect(collectionViewer: CollectionViewer): void {
|
||||
this.journalEntriesSubject.complete();
|
||||
this.filteredSubject.complete();
|
||||
this.recordsSubject.complete();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,179 +6,715 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container layout-row-wrap gap-2px responsive-column filter-container">
|
||||
<mat-form-field class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Office Name' | translate }}</mat-label>
|
||||
<input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete" />
|
||||
</mat-form-field>
|
||||
<!-- ══════════════════════════════════════════════════════════
|
||||
HERO HEADER — glassmorphism + animated gradient
|
||||
══════════════════════════════════════════════════════════ -->
|
||||
<div class="gl-hero">
|
||||
<div class="gl-hero__bg"></div>
|
||||
<div class="gl-hero__content">
|
||||
<div class="gl-hero__left">
|
||||
<div class="gl-hero__icon-wrap">
|
||||
<fa-icon icon="building-columns" class="gl-hero__icon"></fa-icon>
|
||||
<div class="gl-hero__icon-pulse"></div>
|
||||
</div>
|
||||
<div class="gl-hero__text">
|
||||
<div class="gl-hero__breadcrumb">
|
||||
<fa-icon icon="home" class="gl-hero__bc-icon"></fa-icon>
|
||||
<span>Accounting</span>
|
||||
<fa-icon icon="chevron-right" class="gl-hero__bc-sep"></fa-icon>
|
||||
<span class="gl-hero__bc-active">General Ledger</span>
|
||||
</div>
|
||||
<h1 class="gl-hero__title">General Ledger</h1>
|
||||
<p class="gl-hero__subtitle" *ngIf="!glAccountInfo">
|
||||
Full double-entry journal — view, filter & analyse all accounting entries
|
||||
</p>
|
||||
<div class="gl-hero__acct-pill" *ngIf="glAccountInfo">
|
||||
<span [class]="'gl-pill gl-pill--' + (glAccountInfo.type?.value | lowercase)">
|
||||
<fa-icon [icon]="getAccountTypeIcon(glAccountInfo.type?.value)" class="gl-pill__icon"></fa-icon>
|
||||
{{ glAccountInfo.type?.value }}
|
||||
</span>
|
||||
<span class="gl-hero__acct-code">{{ glAccountInfo.glCode }}</span>
|
||||
<span class="gl-hero__acct-sep">·</span>
|
||||
<span class="gl-hero__acct-name">{{ glAccountInfo.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mifosx-gl-account-selector
|
||||
class="flex-31"
|
||||
[inputFormControl]="glAccount"
|
||||
[glAccountList]="glAccountData"
|
||||
[required]="true"
|
||||
[inputLabel]="'GL Account Name or Code'"
|
||||
>
|
||||
</mifosx-gl-account-selector>
|
||||
|
||||
<mat-form-field class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
|
||||
<mat-select [formControl]="entryTypeFilter" (selectionChange)="applyFilter($event.value, 'manualEntriesOnly')">
|
||||
@for (filter of entryTypeFilterData; track filter) {
|
||||
<mat-option [value]="filter.value">
|
||||
{{ filter.option | translate }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-31" (click)="transactionDateFromPicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.Transaction Date From' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="transactionDateFromPicker"
|
||||
[formControl]="transactionDateFrom"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="transactionDateFromPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #transactionDateFromPicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-31" (click)="transactionDateToPicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.Transaction Date To' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="transactionDateToPicker"
|
||||
[formControl]="transactionDateTo"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="transactionDateToPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #transactionDateToPicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-31">
|
||||
<mat-label>{{ 'labels.inputs.Transaction ID' | translate }}</mat-label>
|
||||
<input matInput [formControl]="transactionId" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-31" (click)="submittedOnDateFromPicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.Submitted on Date From' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[max]="submittedOnDateTo.value"
|
||||
[matDatepicker]="submittedOnDateFromPicker"
|
||||
[formControl]="submittedOnDateFrom"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="submittedOnDateFromPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #submittedOnDateFromPicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-31" (click)="submittedOnDateToPicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.Submitted on Date To' | translate }} </mat-label>
|
||||
<input
|
||||
matInput
|
||||
[min]="submittedOnDateFrom.value"
|
||||
[matDatepicker]="submittedOnDateToPicker"
|
||||
[formControl]="submittedOnDateTo"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="submittedOnDateToPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #submittedOnDateToPicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<div class="gl-hero__actions">
|
||||
<div class="gl-hero__meta" *ngIf="ledgerData?.fromDate || ledgerData?.toDate">
|
||||
<fa-icon icon="calendar-alt" class="gl-hero__meta-icon"></fa-icon>
|
||||
<span>{{ formatLedgerDate(ledgerData?.fromDate) }} → {{ formatLedgerDate(ledgerData?.toDate) }}</span>
|
||||
</div>
|
||||
<button
|
||||
class="gl-hero-btn gl-hero-btn--ghost"
|
||||
(click)="loadLedgerSummary(); loadJournalEntriesPage()"
|
||||
matTooltip="Refresh data"
|
||||
>
|
||||
<fa-icon icon="sync" [class.fa-spin]="ledgerLoading"></fa-icon>
|
||||
Refresh
|
||||
</button>
|
||||
<button class="gl-hero-btn gl-hero-btn--primary" [routerLink]="['/accounting/journal-entries/create']">
|
||||
<fa-icon icon="plus"></fa-icon>
|
||||
New Entry
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Autocomplete data -->
|
||||
<mat-autocomplete autoActiveFirstOption #officeNameAutocomplete="matAutocomplete" [displayWith]="displayOfficeName">
|
||||
@for (office of filteredOfficeData | async; track office) {
|
||||
<mat-option [value]="{ id: office.id, name: office.name }">
|
||||
{{ office.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
|
||||
<div class="mat-elevation-z8 container table-container">
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
<ng-container matColumnDef="id">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Entry ID' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let journalEntry">{{ journalEntry.id }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="officeName">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let journalEntry">{{ journalEntry.officeName }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="transactionId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Transaction ID' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let journalEntry">{{ journalEntry.transactionId }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="transactionDate">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Transaction Date' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let journalEntry">{{ journalEntry.transactionDate | dateFormat }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="glAccountType">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let journalEntry">{{ journalEntry.glAccountType.value }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="createdByUserName">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Created By' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let journalEntry">{{ journalEntry.createdByUserName }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="submittedOnDate">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Submitted on date' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let journalEntry">{{ journalEntry.submittedOnDate | datetimeFormat }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="glAccountCode">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account Code' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let journalEntry">{{ journalEntry.glAccountCode }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="glAccountName">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Account Name' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let journalEntry">{{ journalEntry.glAccountName }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="currency">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Currency' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let journalEntry">{{ journalEntry.currency.code }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="debit">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Debit' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let journalEntry">
|
||||
@if (journalEntry.entryType.value === 'DEBIT') {
|
||||
<span> {{ journalEntry.amount | formatNumber }} </span>
|
||||
}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="credit">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Credit' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let journalEntry">
|
||||
@if (journalEntry.entryType.value === 'CREDIT') {
|
||||
<span> {{ journalEntry.amount | formatNumber }} </span>
|
||||
}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr
|
||||
mat-row
|
||||
*matRowDef="let row; columns: displayedColumns"
|
||||
[routerLink]="['transactions/view', row.transactionId]"
|
||||
class="select-row"
|
||||
></tr>
|
||||
</table>
|
||||
|
||||
<mat-paginator
|
||||
[length]="dataSource?.records$ | async"
|
||||
[pageSize]="50"
|
||||
[pageSizeOptions]="[10, 25, 50, 100]"
|
||||
showFirstLastButtons
|
||||
></mat-paginator>
|
||||
<!-- ══════════════════════════════════════════════════════════
|
||||
LOADING SKELETON / PROGRESS BAR
|
||||
══════════════════════════════════════════════════════════ -->
|
||||
<div class="gl-progress-bar" *ngIf="ledgerLoading">
|
||||
<div class="gl-progress-bar__fill"></div>
|
||||
</div>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════════
|
||||
GL ACCOUNT DETAIL STRIP (visible when account selected)
|
||||
══════════════════════════════════════════════════════════ -->
|
||||
<div class="gl-acct-strip" *ngIf="glAccountInfo">
|
||||
<div class="gl-acct-strip__item">
|
||||
<div class="gl-acct-strip__label">Account Code</div>
|
||||
<div class="gl-acct-strip__value gl-mono">{{ glAccountInfo.glCode }}</div>
|
||||
</div>
|
||||
<div class="gl-acct-strip__divider"></div>
|
||||
<div class="gl-acct-strip__item">
|
||||
<div class="gl-acct-strip__label">Account Name</div>
|
||||
<div class="gl-acct-strip__value">{{ glAccountInfo.name }}</div>
|
||||
</div>
|
||||
<div class="gl-acct-strip__divider"></div>
|
||||
<div class="gl-acct-strip__item">
|
||||
<div class="gl-acct-strip__label">Classification</div>
|
||||
<div class="gl-acct-strip__value">
|
||||
<span [class]="'gl-pill gl-pill--sm gl-pill--' + (glAccountInfo.type?.value | lowercase)">
|
||||
<fa-icon [icon]="getAccountTypeIcon(glAccountInfo.type?.value)" class="gl-pill__icon"></fa-icon>
|
||||
{{ glAccountInfo.type?.value }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gl-acct-strip__divider"></div>
|
||||
<div class="gl-acct-strip__item">
|
||||
<div class="gl-acct-strip__label">Usage</div>
|
||||
<div class="gl-acct-strip__value">{{ glAccountInfo.usage?.value || '—' }}</div>
|
||||
</div>
|
||||
<div class="gl-acct-strip__divider"></div>
|
||||
<div class="gl-acct-strip__item">
|
||||
<div class="gl-acct-strip__label">Manual Entries</div>
|
||||
<div class="gl-acct-strip__value">
|
||||
<span [class]="glAccountInfo.manualEntriesAllowed ? 'gl-status gl-status--on' : 'gl-status gl-status--off'">
|
||||
<fa-icon [icon]="glAccountInfo.manualEntriesAllowed ? 'check-circle' : 'times-circle'"></fa-icon>
|
||||
{{ glAccountInfo.manualEntriesAllowed ? 'Allowed' : 'Restricted' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gl-acct-strip__divider" *ngIf="glAccountInfo.description"></div>
|
||||
<div class="gl-acct-strip__item gl-acct-strip__item--desc" *ngIf="glAccountInfo.description">
|
||||
<div class="gl-acct-strip__label">Description</div>
|
||||
<div class="gl-acct-strip__value gl-acct-strip__value--muted">{{ glAccountInfo.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════════
|
||||
KPI CARDS — 6 metrics with micro bar indicators
|
||||
══════════════════════════════════════════════════════════ -->
|
||||
<div class="gl-kpi-grid" [class.gl-kpi-grid--loading]="ledgerLoading">
|
||||
<!-- Opening Balance -->
|
||||
<div class="gl-kpi gl-kpi--opening">
|
||||
<div class="gl-kpi__header">
|
||||
<div class="gl-kpi__icon-box">
|
||||
<fa-icon icon="door-open"></fa-icon>
|
||||
</div>
|
||||
<div class="gl-kpi__trend gl-kpi__trend--neutral" matTooltip="Balance before the selected period">
|
||||
<fa-icon icon="info-circle"></fa-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gl-kpi__body">
|
||||
<div class="gl-kpi__label">Opening Balance</div>
|
||||
<div class="gl-kpi__value" [class.gl-kpi__value--neg]="openingBalance < 0">
|
||||
{{ openingBalance | formatNumber }}
|
||||
</div>
|
||||
<div class="gl-kpi__caption">Before {{ formatLedgerDate(ledgerData?.fromDate) || 'period start' }}</div>
|
||||
</div>
|
||||
<div class="gl-kpi__bar gl-kpi__bar--opening"></div>
|
||||
</div>
|
||||
|
||||
<!-- Total Debit -->
|
||||
<div class="gl-kpi gl-kpi--dr">
|
||||
<div class="gl-kpi__header">
|
||||
<div class="gl-kpi__icon-box">
|
||||
<fa-icon icon="arrow-up"></fa-icon>
|
||||
</div>
|
||||
<div class="gl-kpi__trend gl-kpi__trend--dr" matTooltip="Sum of all debit entries in period">
|
||||
<fa-icon icon="arrow-up"></fa-icon> DR
|
||||
</div>
|
||||
</div>
|
||||
<div class="gl-kpi__body">
|
||||
<div class="gl-kpi__label">Total Debit</div>
|
||||
<div class="gl-kpi__value gl-kpi__value--dr">{{ totalDebit | formatNumber }}</div>
|
||||
<div class="gl-kpi__caption">Debit entries in period</div>
|
||||
</div>
|
||||
<div class="gl-kpi__bar gl-kpi__bar--dr"></div>
|
||||
</div>
|
||||
|
||||
<!-- Total Credit -->
|
||||
<div class="gl-kpi gl-kpi--cr">
|
||||
<div class="gl-kpi__header">
|
||||
<div class="gl-kpi__icon-box">
|
||||
<fa-icon icon="arrow-down"></fa-icon>
|
||||
</div>
|
||||
<div class="gl-kpi__trend gl-kpi__trend--cr" matTooltip="Sum of all credit entries in period">
|
||||
<fa-icon icon="arrow-down"></fa-icon> CR
|
||||
</div>
|
||||
</div>
|
||||
<div class="gl-kpi__body">
|
||||
<div class="gl-kpi__label">Total Credit</div>
|
||||
<div class="gl-kpi__value gl-kpi__value--cr">{{ totalCredit | formatNumber }}</div>
|
||||
<div class="gl-kpi__caption">Credit entries in period</div>
|
||||
</div>
|
||||
<div class="gl-kpi__bar gl-kpi__bar--cr"></div>
|
||||
</div>
|
||||
|
||||
<!-- Net Movement -->
|
||||
<div class="gl-kpi gl-kpi--net">
|
||||
<div class="gl-kpi__header">
|
||||
<div class="gl-kpi__icon-box">
|
||||
<fa-icon icon="scale-balanced"></fa-icon>
|
||||
</div>
|
||||
<div
|
||||
[class]="netMovementPositive ? 'gl-kpi__trend gl-kpi__trend--pos' : 'gl-kpi__trend gl-kpi__trend--neg'"
|
||||
[matTooltip]="isDebitNormal ? 'DR − CR (Debit-normal account)' : 'CR − DR (Credit-normal account)'"
|
||||
>
|
||||
<fa-icon [icon]="netMovementPositive ? 'arrow-up' : 'arrow-down'"></fa-icon>
|
||||
<span class="gl-kpi__norm-tag">{{ isDebitNormal ? 'DR−CR' : 'CR−DR' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gl-kpi__body">
|
||||
<div class="gl-kpi__label">Net Movement</div>
|
||||
<div
|
||||
class="gl-kpi__value"
|
||||
[class.gl-kpi__value--pos]="netMovementPositive"
|
||||
[class.gl-kpi__value--neg]="!netMovementPositive"
|
||||
>
|
||||
{{ netMovement | formatNumber }}
|
||||
</div>
|
||||
<div class="gl-kpi__caption">
|
||||
{{ netMovementPositive ? 'Net Positive' : 'Net Negative' }} ·
|
||||
{{ isDebitNormal ? 'Debit Normal' : 'Credit Normal' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="gl-kpi__bar gl-kpi__bar--net"></div>
|
||||
</div>
|
||||
|
||||
<!-- Closing Balance -->
|
||||
<div class="gl-kpi gl-kpi--closing">
|
||||
<div class="gl-kpi__header">
|
||||
<div class="gl-kpi__icon-box">
|
||||
<fa-icon icon="box-open"></fa-icon>
|
||||
</div>
|
||||
<div
|
||||
[class]="closingBalance >= 0 ? 'gl-kpi__trend gl-kpi__trend--pos' : 'gl-kpi__trend gl-kpi__trend--neg'"
|
||||
matTooltip="Opening + Net Movement"
|
||||
>
|
||||
<fa-icon [icon]="closingBalance >= 0 ? 'arrow-up' : 'arrow-down'"></fa-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gl-kpi__body">
|
||||
<div class="gl-kpi__label">Closing Balance</div>
|
||||
<div class="gl-kpi__value" [class.gl-kpi__value--neg]="closingBalance < 0">
|
||||
{{ closingBalance | formatNumber }}
|
||||
</div>
|
||||
<div class="gl-kpi__caption">As of {{ formatLedgerDate(ledgerData?.toDate) || 'period end' }}</div>
|
||||
</div>
|
||||
<div class="gl-kpi__bar gl-kpi__bar--closing"></div>
|
||||
</div>
|
||||
|
||||
<!-- Entry Count -->
|
||||
<div class="gl-kpi gl-kpi--count">
|
||||
<div class="gl-kpi__header">
|
||||
<div class="gl-kpi__icon-box">
|
||||
<fa-icon icon="receipt"></fa-icon>
|
||||
</div>
|
||||
<div class="gl-kpi__trend gl-kpi__trend--neutral" matTooltip="Total filtered records">
|
||||
<fa-icon icon="filter"></fa-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gl-kpi__body">
|
||||
<div class="gl-kpi__label">Total Entries</div>
|
||||
<div class="gl-kpi__value gl-kpi__value--count">{{ totalEntries || (dataSource?.records$ | async) || 0 }}</div>
|
||||
<div class="gl-kpi__caption">Matching journal entries</div>
|
||||
</div>
|
||||
<div class="gl-kpi__bar gl-kpi__bar--count"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════════
|
||||
QUICK DATE CHIPS
|
||||
══════════════════════════════════════════════════════════ -->
|
||||
<div class="gl-quick-bar">
|
||||
<div class="gl-quick-bar__label"><fa-icon icon="clock"></fa-icon> Quick Range</div>
|
||||
<div class="gl-quick-bar__chips">
|
||||
<button
|
||||
*ngFor="let q of quickFilters"
|
||||
[class.active]="activeQuickFilter === q.label"
|
||||
class="gl-qchip"
|
||||
(click)="applyQuickFilter(q)"
|
||||
>
|
||||
<fa-icon [icon]="q.icon"></fa-icon>
|
||||
{{ q.label }}
|
||||
</button>
|
||||
<button *ngIf="activeQuickFilter" class="gl-qchip gl-qchip--clear" (click)="clearQuickFilter()">
|
||||
<fa-icon icon="times"></fa-icon> Clear
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════════
|
||||
FILTER PANEL
|
||||
══════════════════════════════════════════════════════════ -->
|
||||
<div class="gl-filter-panel">
|
||||
<!-- Primary filters -->
|
||||
<div class="gl-filter-panel__primary">
|
||||
<div class="gl-fgroup">
|
||||
<label class="gl-flabel"><fa-icon icon="calendar-alt"></fa-icon> From Date</label>
|
||||
<mat-form-field appearance="outline" class="gl-ffield">
|
||||
<input matInput [matDatepicker]="dpFrom" [min]="minDate" [max]="maxDate" [formControl]="transactionDateFrom" />
|
||||
<mat-datepicker-toggle matSuffix [for]="dpFrom"></mat-datepicker-toggle>
|
||||
<mat-datepicker #dpFrom></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="gl-fgroup">
|
||||
<label class="gl-flabel"><fa-icon icon="calendar-alt"></fa-icon> To Date</label>
|
||||
<mat-form-field appearance="outline" class="gl-ffield">
|
||||
<input matInput [matDatepicker]="dpTo" [min]="minDate" [max]="maxDate" [formControl]="transactionDateTo" />
|
||||
<mat-datepicker-toggle matSuffix [for]="dpTo"></mat-datepicker-toggle>
|
||||
<mat-datepicker #dpTo></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="gl-fgroup gl-fgroup--wide">
|
||||
<label class="gl-flabel"><fa-icon icon="building-columns"></fa-icon> GL Account</label>
|
||||
<div class="gl-ffield gl-ffield--selector">
|
||||
<mifosx-gl-account-selector
|
||||
[inputFormControl]="glAccount"
|
||||
[glAccountList]="glAccountData"
|
||||
></mifosx-gl-account-selector>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gl-fgroup">
|
||||
<label class="gl-flabel"><fa-icon icon="toggle-on"></fa-icon> Entry Source</label>
|
||||
<mat-form-field appearance="outline" class="gl-ffield">
|
||||
<mat-select [formControl]="entryTypeFilter">
|
||||
<mat-option *ngFor="let et of entryTypeFilterData" [value]="et.value">{{ et.option }}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="gl-filter-actions">
|
||||
<button
|
||||
class="gl-fab gl-fab--adv"
|
||||
(click)="showAdvancedFilters = !showAdvancedFilters"
|
||||
[class.gl-fab--adv-on]="showAdvancedFilters"
|
||||
matTooltip="More filters"
|
||||
>
|
||||
<fa-icon icon="sliders-h"></fa-icon>
|
||||
<span *ngIf="activeFiltersCount > 0" class="gl-fab__badge">{{ activeFiltersCount }}</span>
|
||||
</button>
|
||||
<button class="gl-fab gl-fab--reset" (click)="clearFilters()" matTooltip="Reset all filters">
|
||||
<fa-icon icon="times"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Advanced filters (collapsible) -->
|
||||
<div class="gl-filter-panel__advanced" [class.gl-filter-panel__advanced--open]="showAdvancedFilters">
|
||||
<div class="gl-filter-panel__adv-inner">
|
||||
<div class="gl-fgroup">
|
||||
<label class="gl-flabel"><fa-icon icon="university"></fa-icon> Office</label>
|
||||
<mat-form-field appearance="outline" class="gl-ffield">
|
||||
<input matInput [formControl]="officeName" [matAutocomplete]="officeAc" placeholder="Search office…" />
|
||||
<mat-autocomplete #officeAc="matAutocomplete" [displayWith]="displayOfficeName">
|
||||
<mat-option *ngFor="let o of filteredOfficeData | async" [value]="o">{{ o.name }}</mat-option>
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="gl-fgroup">
|
||||
<label class="gl-flabel"><fa-icon icon="hashtag"></fa-icon> Transaction ID</label>
|
||||
<mat-form-field appearance="outline" class="gl-ffield">
|
||||
<input matInput [formControl]="transactionIdCtrl" placeholder="e.g. L000001" />
|
||||
<fa-icon icon="search" matSuffix class="gl-field-suffix-icon"></fa-icon>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="gl-fgroup">
|
||||
<label class="gl-flabel"><fa-icon icon="calendar-check"></fa-icon> Submitted From</label>
|
||||
<mat-form-field appearance="outline" class="gl-ffield">
|
||||
<input
|
||||
matInput
|
||||
[matDatepicker]="dpSubFrom"
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[formControl]="submittedOnDateFrom"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="dpSubFrom"></mat-datepicker-toggle>
|
||||
<mat-datepicker #dpSubFrom></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="gl-fgroup">
|
||||
<label class="gl-flabel"><fa-icon icon="calendar-check"></fa-icon> Submitted To</label>
|
||||
<mat-form-field appearance="outline" class="gl-ffield">
|
||||
<input matInput [matDatepicker]="dpSubTo" [min]="minDate" [max]="maxDate" [formControl]="submittedOnDateTo" />
|
||||
<mat-datepicker-toggle matSuffix [for]="dpSubTo"></mat-datepicker-toggle>
|
||||
<mat-datepicker #dpSubTo></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════════
|
||||
TIP CARD — shown when no GL account selected
|
||||
══════════════════════════════════════════════════════════ -->
|
||||
<div class="gl-tip" *ngIf="!hasGlAccountFilter">
|
||||
<div class="gl-tip__icon"><fa-icon icon="lightbulb"></fa-icon></div>
|
||||
<div class="gl-tip__body">
|
||||
<strong>Select a GL Account</strong> to unlock full ledger details — opening balance, day-wise running balance,
|
||||
closing balance, and per-entry running totals.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════════
|
||||
DAY-WISE BALANCE TIMELINE
|
||||
══════════════════════════════════════════════════════════ -->
|
||||
<div class="gl-timeline-section" *ngIf="dayWiseData.length > 0">
|
||||
<div class="gl-section-head">
|
||||
<div class="gl-section-head__left">
|
||||
<div class="gl-section-head__dot gl-section-head__dot--purple"></div>
|
||||
<span class="gl-section-head__title">Day-wise Balance Timeline</span>
|
||||
<span class="gl-section-head__badge">{{ dayWiseData.length }} days</span>
|
||||
</div>
|
||||
<div class="gl-section-head__right">
|
||||
<span class="gl-legend-pill gl-legend-pill--open">Opening</span>
|
||||
<span class="gl-legend-pill gl-legend-pill--dr">Debit</span>
|
||||
<span class="gl-legend-pill gl-legend-pill--cr">Credit</span>
|
||||
<span class="gl-legend-pill gl-legend-pill--net">Net</span>
|
||||
<span class="gl-legend-pill gl-legend-pill--close">Closing</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gl-timeline-wrap">
|
||||
<table class="gl-tl-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="gl-tl-th">Date</th>
|
||||
<th class="gl-tl-th gl-tl-th--num">Opening Bal</th>
|
||||
<th class="gl-tl-th gl-tl-th--num gl-tl-th--dr">Debit (DR)</th>
|
||||
<th class="gl-tl-th gl-tl-th--num gl-tl-th--cr">Credit (CR)</th>
|
||||
<th class="gl-tl-th gl-tl-th--bar">Movement</th>
|
||||
<th class="gl-tl-th gl-tl-th--num">Net</th>
|
||||
<th class="gl-tl-th gl-tl-th--num gl-tl-th--close">Closing Bal</th>
|
||||
<th class="gl-tl-th gl-tl-th--ctr">Entries</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
*ngFor="let row of dayWiseData; let i = index"
|
||||
class="gl-tl-row"
|
||||
[class.gl-tl-row--first]="i === 0"
|
||||
[class.gl-tl-row--last]="i === dayWiseData.length - 1"
|
||||
>
|
||||
<td class="gl-tl-date">
|
||||
<div class="gl-tl-date__inner">
|
||||
<div
|
||||
class="gl-tl-date__dot"
|
||||
[class.gl-tl-date__dot--up]="row.netMovement >= 0"
|
||||
[class.gl-tl-date__dot--down]="row.netMovement < 0"
|
||||
></div>
|
||||
<div class="gl-tl-date__text">{{ formatLedgerDate(row.date) }}</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="gl-tl-num">{{ row.openingBalance | formatNumber }}</td>
|
||||
|
||||
<td class="gl-tl-num gl-tl-num--dr">
|
||||
<span *ngIf="row.totalDebit > 0">{{ row.totalDebit | formatNumber }}</span>
|
||||
<span *ngIf="row.totalDebit === 0" class="gl-tl-nil">—</span>
|
||||
</td>
|
||||
|
||||
<td class="gl-tl-num gl-tl-num--cr">
|
||||
<span *ngIf="row.totalCredit > 0">{{ row.totalCredit | formatNumber }}</span>
|
||||
<span *ngIf="row.totalCredit === 0" class="gl-tl-nil">—</span>
|
||||
</td>
|
||||
|
||||
<!-- Mini visual bar — DR vs CR side by side as % of their combined total -->
|
||||
<td class="gl-tl-bar-cell">
|
||||
<div class="gl-minibar">
|
||||
<div
|
||||
class="gl-minibar__dr"
|
||||
[style.flex]="row.totalDebit"
|
||||
matTooltip="DR: {{ row.totalDebit | formatNumber }}"
|
||||
></div>
|
||||
<div
|
||||
class="gl-minibar__cr"
|
||||
[style.flex]="row.totalCredit"
|
||||
matTooltip="CR: {{ row.totalCredit | formatNumber }}"
|
||||
></div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="gl-tl-num"
|
||||
[class.gl-tl-num--pos]="row.netMovement >= 0"
|
||||
[class.gl-tl-num--neg]="row.netMovement < 0"
|
||||
>
|
||||
<fa-icon [icon]="row.netMovement >= 0 ? 'arrow-up' : 'arrow-down'" class="gl-tl-net-icon"></fa-icon>
|
||||
{{ row.netMovement | formatNumber }}
|
||||
</td>
|
||||
|
||||
<td class="gl-tl-num gl-tl-num--close" [class.gl-tl-num--neg]="row.closingBalance < 0">
|
||||
<strong>{{ row.closingBalance | formatNumber }}</strong>
|
||||
</td>
|
||||
|
||||
<td class="gl-tl-ctr">
|
||||
<span class="gl-tl-badge">{{ row.entryCount }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr class="gl-tl-footer">
|
||||
<td class="gl-tl-footer__label">Period Total</td>
|
||||
<td class="gl-tl-num">{{ openingBalance | formatNumber }}</td>
|
||||
<td class="gl-tl-num gl-tl-num--dr">
|
||||
<strong>{{ totalDebit | formatNumber }}</strong>
|
||||
</td>
|
||||
<td class="gl-tl-num gl-tl-num--cr">
|
||||
<strong>{{ totalCredit | formatNumber }}</strong>
|
||||
</td>
|
||||
<td></td>
|
||||
<td
|
||||
class="gl-tl-num"
|
||||
[class.gl-tl-num--pos]="netMovementPositive"
|
||||
[class.gl-tl-num--neg]="!netMovementPositive"
|
||||
>
|
||||
<strong>{{ netMovement | formatNumber }}</strong>
|
||||
</td>
|
||||
<td class="gl-tl-num gl-tl-num--close" [class.gl-tl-num--neg]="closingBalance < 0">
|
||||
<strong>{{ closingBalance | formatNumber }}</strong>
|
||||
</td>
|
||||
<td class="gl-tl-ctr">
|
||||
<span class="gl-tl-badge gl-tl-badge--total">{{ (dataSource?.records$ | async) || 0 }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════════
|
||||
JOURNAL ENTRIES TABLE
|
||||
══════════════════════════════════════════════════════════ -->
|
||||
<div class="gl-entries-section">
|
||||
<div class="gl-section-head">
|
||||
<div class="gl-section-head__left">
|
||||
<div class="gl-section-head__dot gl-section-head__dot--blue"></div>
|
||||
<span class="gl-section-head__title">Journal Entries</span>
|
||||
<span class="gl-section-head__badge">{{ (dataSource?.records$ | async) || 0 }}</span>
|
||||
</div>
|
||||
<div class="gl-section-head__right">
|
||||
<div class="gl-entries-totals">
|
||||
<span class="gl-entries-totals__dr">
|
||||
<fa-icon icon="arrow-up"></fa-icon> DR <strong>{{ totalDebit | formatNumber }}</strong>
|
||||
</span>
|
||||
<div class="gl-entries-totals__sep"></div>
|
||||
<span class="gl-entries-totals__cr">
|
||||
<fa-icon icon="arrow-down"></fa-icon> CR <strong>{{ totalCredit | formatNumber }}</strong>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gl-table-shell">
|
||||
<mat-table [dataSource]="dataSource" matSort class="gl-mat-table">
|
||||
<!-- #ID -->
|
||||
<ng-container matColumnDef="id">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="gl-th">#</mat-header-cell>
|
||||
<mat-cell *matCellDef="let e" class="gl-td">
|
||||
<a [routerLink]="['/accounting/journal-entries/transactions/view', e.transactionId]" class="gl-id-link"
|
||||
>#{{ e.id }}</a
|
||||
>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Transaction Date -->
|
||||
<ng-container matColumnDef="transactionDate">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="gl-th">Date</mat-header-cell>
|
||||
<mat-cell *matCellDef="let e" class="gl-td">
|
||||
<div class="gl-date-cell">
|
||||
<div class="gl-date-cell__main">{{ formatLedgerDate(e.transactionDate) }}</div>
|
||||
</div>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Transaction ID -->
|
||||
<ng-container matColumnDef="transactionId">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="gl-th">Txn ID</mat-header-cell>
|
||||
<mat-cell *matCellDef="let e" class="gl-td">
|
||||
<a
|
||||
[routerLink]="['/accounting/journal-entries/transactions/view', e.transactionId]"
|
||||
class="gl-txn-link gl-mono"
|
||||
matTooltip="{{ e.transactionId }}"
|
||||
>
|
||||
{{ e.transactionId }}
|
||||
</a>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Office -->
|
||||
<ng-container matColumnDef="officeName">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="gl-th">Office</mat-header-cell>
|
||||
<mat-cell *matCellDef="let e" class="gl-td">
|
||||
<div class="gl-office-cell">
|
||||
<fa-icon icon="university" class="gl-office-icon"></fa-icon>
|
||||
{{ e.officeName }}
|
||||
</div>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- GL Code -->
|
||||
<ng-container matColumnDef="glAccountCode">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="gl-th">Code</mat-header-cell>
|
||||
<mat-cell *matCellDef="let e" class="gl-td">
|
||||
<span class="gl-code-chip">{{ e.glAccountCode }}</span>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- GL Account Name -->
|
||||
<ng-container matColumnDef="glAccountName">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="gl-th">Account</mat-header-cell>
|
||||
<mat-cell *matCellDef="let e" class="gl-td">
|
||||
<span class="gl-acct-cell" matTooltip="{{ e.glAccountName }}">{{ e.glAccountName }}</span>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Account Type -->
|
||||
<ng-container matColumnDef="glAccountType">
|
||||
<mat-header-cell *matHeaderCellDef class="gl-th">Type</mat-header-cell>
|
||||
<mat-cell *matCellDef="let e" class="gl-td">
|
||||
<span [class]="'gl-pill gl-pill--sm gl-pill--' + (e.glAccountType?.value | lowercase)">
|
||||
<fa-icon [icon]="getAccountTypeIcon(e.glAccountType?.value)" class="gl-pill__icon"></fa-icon>
|
||||
{{ e.glAccountType?.value }}
|
||||
</span>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Entry Type DR/CR -->
|
||||
<ng-container matColumnDef="entryType">
|
||||
<mat-header-cell *matHeaderCellDef class="gl-th">Type</mat-header-cell>
|
||||
<mat-cell *matCellDef="let e" class="gl-td">
|
||||
<span [class]="e.entryType?.value === 'DEBIT' ? 'gl-drcr gl-drcr--dr' : 'gl-drcr gl-drcr--cr'">
|
||||
{{ e.entryType?.value === 'DEBIT' ? 'DR' : 'CR' }}
|
||||
</span>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Debit -->
|
||||
<ng-container matColumnDef="debit">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="gl-th gl-th--num">Debit</mat-header-cell>
|
||||
<mat-cell *matCellDef="let e" class="gl-td gl-td--num">
|
||||
<span *ngIf="e.entryType?.value === 'DEBIT'" class="gl-amt gl-amt--dr">{{ e.amount | formatNumber }}</span>
|
||||
<span *ngIf="e.entryType?.value !== 'DEBIT'" class="gl-amt-nil">—</span>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Credit -->
|
||||
<ng-container matColumnDef="credit">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="gl-th gl-th--num">Credit</mat-header-cell>
|
||||
<mat-cell *matCellDef="let e" class="gl-td gl-td--num">
|
||||
<span *ngIf="e.entryType?.value === 'CREDIT'" class="gl-amt gl-amt--cr">{{ e.amount | formatNumber }}</span>
|
||||
<span *ngIf="e.entryType?.value !== 'CREDIT'" class="gl-amt-nil">—</span>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Running Balance -->
|
||||
<ng-container matColumnDef="runningBalance">
|
||||
<mat-header-cell *matHeaderCellDef class="gl-th gl-th--num">Running Bal</mat-header-cell>
|
||||
<mat-cell *matCellDef="let e" class="gl-td gl-td--num">
|
||||
<span
|
||||
class="gl-running"
|
||||
[class.gl-running--neg]="getRunningBalance(e) < 0"
|
||||
matTooltip="Office running balance"
|
||||
>
|
||||
{{ getRunningBalance(e) | formatNumber }}
|
||||
</span>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Source (Manual/System) -->
|
||||
<ng-container matColumnDef="manualEntry">
|
||||
<mat-header-cell *matHeaderCellDef class="gl-th">Source</mat-header-cell>
|
||||
<mat-cell *matCellDef="let e" class="gl-td">
|
||||
<span [class]="e.manualEntry ? 'gl-src gl-src--manual' : 'gl-src gl-src--system'">
|
||||
<fa-icon [icon]="e.manualEntry ? 'pencil-alt' : 'cog'"></fa-icon>
|
||||
{{ e.manualEntry ? 'Manual' : 'System' }}
|
||||
</span>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Created By -->
|
||||
<ng-container matColumnDef="createdByUserName">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="gl-th">By</mat-header-cell>
|
||||
<mat-cell *matCellDef="let e" class="gl-td">
|
||||
<div class="gl-user-cell">
|
||||
<div class="gl-user-avatar">{{ (e.createdByUserName || 'U').charAt(0).toUpperCase() }}</div>
|
||||
<span>{{ e.createdByUserName }}</span>
|
||||
</div>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Submitted On -->
|
||||
<ng-container matColumnDef="submittedOnDate">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header class="gl-th">Submitted</mat-header-cell>
|
||||
<mat-cell *matCellDef="let e" class="gl-td">
|
||||
<span class="gl-ts">{{ e.submittedOnDate | datetimeFormat }}</span>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Actions -->
|
||||
<ng-container matColumnDef="actions">
|
||||
<mat-header-cell *matHeaderCellDef class="gl-th"></mat-header-cell>
|
||||
<mat-cell *matCellDef="let e" class="gl-td">
|
||||
<a
|
||||
[routerLink]="['/accounting/journal-entries/transactions/view', e.transactionId]"
|
||||
class="gl-view-btn"
|
||||
matTooltip="View transaction"
|
||||
>
|
||||
<fa-icon icon="eye"></fa-icon>
|
||||
</a>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="gl-header-row"></mat-header-row>
|
||||
<mat-row
|
||||
*matRowDef="let row; columns: displayedColumns"
|
||||
[class.gl-data-row--dr]="row.entryType?.value === 'DEBIT'"
|
||||
[class.gl-data-row--cr]="row.entryType?.value === 'CREDIT'"
|
||||
class="gl-data-row"
|
||||
></mat-row>
|
||||
<tr class="mat-row" *matNoDataRow>
|
||||
<td class="mat-cell" [attr.colspan]="displayedColumns.length">
|
||||
<div class="gl-empty">
|
||||
<div class="gl-empty__icon"><fa-icon icon="search"></fa-icon></div>
|
||||
<div class="gl-empty__title">No entries found</div>
|
||||
<div class="gl-empty__sub">Try adjusting your filters or date range</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</mat-table>
|
||||
|
||||
<div class="gl-pager-wrap">
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -6,26 +6,20 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit, ViewChild, AfterViewInit, inject } from '@angular/core';
|
||||
import { Component, OnInit, OnDestroy, ViewChild, AfterViewInit, inject } from '@angular/core';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatSort, MatSortHeader } from '@angular/material/sort';
|
||||
import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
|
||||
import { UntypedFormControl } from '@angular/forms';
|
||||
import { ActivatedRoute, RouterLink } from '@angular/router';
|
||||
|
||||
/** rxjs Imports */
|
||||
import { merge } from 'rxjs';
|
||||
import { tap, startWith, map, distinctUntilChanged, debounceTime } from 'rxjs/operators';
|
||||
|
||||
/** Custom Services */
|
||||
import { AccountingService } from '../accounting.service';
|
||||
import { SettingsService } from 'app/settings/settings.service';
|
||||
/** Custom Data Source */
|
||||
import { JournalEntriesDataSource } from './journal-entry.datasource';
|
||||
import { Dates } from 'app/core/utils/dates';
|
||||
import { MatAutocompleteTrigger, MatOption, MatAutocomplete } from '@angular/material/autocomplete';
|
||||
import { MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
|
||||
import { GlAccountSelectorComponent } from '../../shared/accounting/gl-account-selector/gl-account-selector.component';
|
||||
import { AsyncPipe } from '@angular/common';
|
||||
import { AsyncPipe, NgClass, NgIf, NgFor, DecimalPipe, CurrencyPipe } from '@angular/common';
|
||||
import {
|
||||
MatTable,
|
||||
MatColumnDef,
|
||||
@@ -36,18 +30,23 @@ import {
|
||||
MatHeaderRowDef,
|
||||
MatHeaderRow,
|
||||
MatRowDef,
|
||||
MatRow
|
||||
MatRow,
|
||||
MatNoDataRow
|
||||
} from '@angular/material/table';
|
||||
import { DateFormatPipe } from '../../pipes/date-format.pipe';
|
||||
import { DatetimeFormatPipe } from '../../pipes/datetime-format.pipe';
|
||||
import { FormatNumberPipe } from '../../pipes/format-number.pipe';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
|
||||
const STATE_KEY = 'gl_ledger_filter_state';
|
||||
|
||||
/**
|
||||
* Search journal entry component.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-search-journal-entry',
|
||||
standalone: true,
|
||||
templateUrl: './search-journal-entry.component.html',
|
||||
styleUrls: ['./search-journal-entry.component.scss'],
|
||||
imports: [
|
||||
@@ -67,97 +66,120 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
MatHeaderRow,
|
||||
MatRowDef,
|
||||
MatRow,
|
||||
MatNoDataRow,
|
||||
MatPaginator,
|
||||
AsyncPipe,
|
||||
NgClass,
|
||||
NgIf,
|
||||
NgFor,
|
||||
DateFormatPipe,
|
||||
DatetimeFormatPipe,
|
||||
FormatNumberPipe
|
||||
FormatNumberPipe,
|
||||
FaIconComponent,
|
||||
MatCardModule,
|
||||
MatTooltipModule,
|
||||
MatIconModule,
|
||||
RouterLink
|
||||
]
|
||||
})
|
||||
export class SearchJournalEntryComponent implements OnInit, AfterViewInit {
|
||||
export class SearchJournalEntryComponent implements OnInit, OnDestroy, AfterViewInit {
|
||||
private accountingService = inject(AccountingService);
|
||||
private settingsService = inject(SettingsService);
|
||||
private dateUtils = inject(Dates);
|
||||
private route = inject(ActivatedRoute);
|
||||
|
||||
/** Minimum transaction date allowed. */
|
||||
// ── Misc ──────────────────────────────────────────────────────────────────
|
||||
minDate = new Date(2000, 0, 1);
|
||||
/** Maximum transaction date allowed. */
|
||||
maxDate = new Date();
|
||||
/** Office name filter form control. */
|
||||
|
||||
// ── Filter controls ───────────────────────────────────────────────────────
|
||||
officeName = new UntypedFormControl();
|
||||
/** Office data. */
|
||||
officeData: any;
|
||||
/** Filtered office data for autocomplete. */
|
||||
filteredOfficeData: any;
|
||||
/** Gl Account filter form control. */
|
||||
glAccount = new UntypedFormControl();
|
||||
/** Gl Account data. */
|
||||
glAccountData: any;
|
||||
/** Filtered gl account data. */
|
||||
filteredGLAccountData: any;
|
||||
/** Entry type filter form control. */
|
||||
entryTypeFilter = new UntypedFormControl('');
|
||||
/** Entry type filter data. */
|
||||
entryTypeFilterData = [
|
||||
{
|
||||
option: 'labels.inputs.All',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
option: 'labels.inputs.Manual Entries',
|
||||
value: true
|
||||
},
|
||||
{
|
||||
option: 'labels.inputs.System Entries',
|
||||
value: false // Bug: unable to implement from server side
|
||||
}
|
||||
];
|
||||
/** Transaction date from form control. */
|
||||
transactionDateFrom = new UntypedFormControl(new Date(new Date().setMonth(new Date().getMonth() - 1)));
|
||||
/** Transaction date to form control. */
|
||||
transactionDateTo = new UntypedFormControl(new Date());
|
||||
/** Transaction ID form control. */
|
||||
transactionId = new UntypedFormControl();
|
||||
/** Submitted on date from form control. */
|
||||
transactionIdCtrl = new UntypedFormControl();
|
||||
submittedOnDateFrom = new UntypedFormControl();
|
||||
/** Submitted on date to form control. */
|
||||
submittedOnDateTo = new UntypedFormControl();
|
||||
/** Columns to be displayed in journal entries table. */
|
||||
referenceNumber = new UntypedFormControl();
|
||||
|
||||
entryTypeFilterData = [
|
||||
{ option: 'All Entries', value: '' },
|
||||
{ option: 'Manual Entries', value: 'true' },
|
||||
{ option: 'System Entries', value: 'false' }
|
||||
];
|
||||
|
||||
// ── Table columns ─────────────────────────────────────────────────────────
|
||||
displayedColumns: string[] = [
|
||||
'id',
|
||||
'officeName',
|
||||
'transactionId',
|
||||
'transactionDate',
|
||||
'glAccountType',
|
||||
'createdByUserName',
|
||||
'submittedOnDate',
|
||||
'transactionId',
|
||||
'officeName',
|
||||
'glAccountCode',
|
||||
'glAccountName',
|
||||
'currency',
|
||||
'glAccountType',
|
||||
'entryType',
|
||||
'debit',
|
||||
'credit'
|
||||
'credit',
|
||||
'runningBalance',
|
||||
'manualEntry',
|
||||
'createdByUserName',
|
||||
'submittedOnDate',
|
||||
'actions'
|
||||
];
|
||||
/** Data source for journal entries table. */
|
||||
dayWiseColumns = [
|
||||
'date',
|
||||
'openingBalance',
|
||||
'totalDebit',
|
||||
'totalCredit',
|
||||
'netMovement',
|
||||
'closingBalance',
|
||||
'entryCount'
|
||||
];
|
||||
|
||||
dataSource: JournalEntriesDataSource;
|
||||
/** Journal entries filter. */
|
||||
|
||||
// ── Ledger summary (from backend /ledger endpoint) ────────────────────────
|
||||
ledgerData: any = null;
|
||||
ledgerLoading = false;
|
||||
|
||||
openingBalance = 0;
|
||||
closingBalance = 0;
|
||||
totalDebit = 0;
|
||||
totalCredit = 0;
|
||||
netMovement = 0;
|
||||
totalEntries = 0;
|
||||
isDebitNormal = true;
|
||||
dayWiseData: any[] = [];
|
||||
glAccountInfo: any = null;
|
||||
|
||||
// ── UI state ──────────────────────────────────────────────────────────────
|
||||
activeQuickFilter = '';
|
||||
activeFiltersCount = 0;
|
||||
showAdvancedFilters = false;
|
||||
selectedGlAccountId: number | null = null;
|
||||
|
||||
// ── Quick date filter presets ─────────────────────────────────────────────
|
||||
quickFilters = [
|
||||
{ label: 'Today', icon: 'calendar-day', type: 'day' },
|
||||
{ label: 'Yesterday', icon: 'calendar-alt', type: 'prev' },
|
||||
{ label: 'This Week', icon: 'calendar-week', type: 'week' },
|
||||
{ label: 'Last Week', icon: 'calendar-week', type: 'lastweek' },
|
||||
{ label: 'This Month', icon: 'calendar-alt', type: 'month' },
|
||||
{ label: 'Last Month', icon: 'calendar-alt', type: 'lastmonth' },
|
||||
{ label: 'Last 3 Mo', icon: 'chart-area', type: 'range', days: 90 },
|
||||
{ label: 'Last 6 Mo', icon: 'chart-area', type: 'range', days: 180 },
|
||||
{ label: 'This Year', icon: 'calendar-check', type: 'year' }
|
||||
];
|
||||
|
||||
filterJournalEntriesBy = [
|
||||
{
|
||||
type: 'officeId',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
type: 'glAccountId',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
type: 'manualEntriesOnly',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
type: 'transactionId',
|
||||
value: ''
|
||||
},
|
||||
{ type: 'officeId', value: '' },
|
||||
{ type: 'glAccountId', value: '' },
|
||||
{ type: 'manualEntriesOnly', value: '' },
|
||||
{ type: 'transactionId', value: '' },
|
||||
{
|
||||
type: 'fromDate',
|
||||
value: this.dateUtils.formatDate(
|
||||
@@ -165,39 +187,16 @@ export class SearchJournalEntryComponent implements OnInit, AfterViewInit {
|
||||
this.settingsService.dateFormat
|
||||
)
|
||||
},
|
||||
{
|
||||
type: 'toDate',
|
||||
value: this.dateUtils.formatDate(new Date(), this.settingsService.dateFormat)
|
||||
},
|
||||
{
|
||||
type: 'submittedOnDateFrom',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
type: 'submittedOnDateTo',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
type: 'dateFormat',
|
||||
value: this.settingsService.dateFormat
|
||||
},
|
||||
{
|
||||
type: 'locale',
|
||||
value: this.settingsService.language.code
|
||||
}
|
||||
{ type: 'toDate', value: this.dateUtils.formatDate(new Date(), this.settingsService.dateFormat) },
|
||||
{ type: 'submittedOnDateFrom', value: '' },
|
||||
{ type: 'submittedOnDateTo', value: '' },
|
||||
{ type: 'dateFormat', value: this.settingsService.dateFormat },
|
||||
{ type: 'locale', value: this.settingsService.language.code }
|
||||
];
|
||||
|
||||
/** Paginator for journal entries table. */
|
||||
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
|
||||
/** Sorter for journal entries table. */
|
||||
@ViewChild(MatSort, { static: true }) sort: MatSort;
|
||||
|
||||
/**
|
||||
* Retrieves the offices and gl accounts data from `resolve`.
|
||||
* @param {AccountingService} accountingService Accounting Service.
|
||||
* @param {ActivatedRoute} route Activated Route.
|
||||
* @param {SettingsService} settingsService Settings Service.
|
||||
*/
|
||||
constructor() {
|
||||
this.route.data.subscribe((data: { offices: any; glAccounts: any }) => {
|
||||
this.officeData = data.offices;
|
||||
@@ -205,51 +204,130 @@ export class SearchJournalEntryComponent implements OnInit, AfterViewInit {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets filtered offices and gl accounts for autocomplete and journal entries table.
|
||||
*/
|
||||
ngOnInit() {
|
||||
this.maxDate = this.settingsService.businessDate;
|
||||
this.paginator.pageSize = 10;
|
||||
this.restoreState();
|
||||
this.setFilteredOffices();
|
||||
this.setFilteredGlAccounts();
|
||||
this.getJournalEntries();
|
||||
this.loadLedgerSummary();
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.saveState();
|
||||
}
|
||||
|
||||
private saveState() {
|
||||
const fromFilter = this.filterJournalEntriesBy.find((f) => f.type === 'fromDate');
|
||||
const toFilter = this.filterJournalEntriesBy.find((f) => f.type === 'toDate');
|
||||
const state = {
|
||||
fromDateFilter: fromFilter?.value || '',
|
||||
toDateFilter: toFilter?.value || '',
|
||||
fromDateIso: this.transactionDateFrom.value ? new Date(this.transactionDateFrom.value).toISOString() : '',
|
||||
toDateIso: this.transactionDateTo.value ? new Date(this.transactionDateTo.value).toISOString() : '',
|
||||
glAccountId: this.selectedGlAccountId,
|
||||
glAccountValue: this.glAccount.value,
|
||||
entryType: this.entryTypeFilter.value,
|
||||
activeQuickFilter: this.activeQuickFilter,
|
||||
pageIndex: this.paginator.pageIndex,
|
||||
pageSize: this.paginator.pageSize
|
||||
};
|
||||
sessionStorage.setItem(STATE_KEY, JSON.stringify(state));
|
||||
}
|
||||
|
||||
private restoreState() {
|
||||
try {
|
||||
const raw = sessionStorage.getItem(STATE_KEY);
|
||||
if (!raw) {
|
||||
return;
|
||||
}
|
||||
const state = JSON.parse(raw);
|
||||
|
||||
// Restore date pickers and filter strings
|
||||
if (state.fromDateIso) {
|
||||
this.transactionDateFrom.setValue(new Date(state.fromDateIso), { emitEvent: false });
|
||||
const idx = this.filterJournalEntriesBy.findIndex((f) => f.type === 'fromDate');
|
||||
if (idx >= 0) {
|
||||
this.filterJournalEntriesBy[idx].value = state.fromDateFilter;
|
||||
}
|
||||
}
|
||||
if (state.toDateIso) {
|
||||
this.transactionDateTo.setValue(new Date(state.toDateIso), { emitEvent: false });
|
||||
const idx = this.filterJournalEntriesBy.findIndex((f) => f.type === 'toDate');
|
||||
if (idx >= 0) {
|
||||
this.filterJournalEntriesBy[idx].value = state.toDateFilter;
|
||||
}
|
||||
}
|
||||
|
||||
// Restore GL account — set the form value so the selector shows it
|
||||
if (state.glAccountId) {
|
||||
this.selectedGlAccountId = state.glAccountId;
|
||||
this.glAccount.setValue(state.glAccountValue, { emitEvent: false });
|
||||
const idx = this.filterJournalEntriesBy.findIndex((f) => f.type === 'glAccountId');
|
||||
if (idx >= 0) {
|
||||
this.filterJournalEntriesBy[idx].value = String(state.glAccountId);
|
||||
}
|
||||
}
|
||||
|
||||
// Restore entry type filter
|
||||
if (state.entryType !== undefined && state.entryType !== null) {
|
||||
this.entryTypeFilter.setValue(state.entryType, { emitEvent: false });
|
||||
const idx = this.filterJournalEntriesBy.findIndex((f) => f.type === 'manualEntriesOnly');
|
||||
if (idx >= 0) {
|
||||
this.filterJournalEntriesBy[idx].value = state.entryType;
|
||||
}
|
||||
}
|
||||
|
||||
if (state.activeQuickFilter) {
|
||||
this.activeQuickFilter = state.activeQuickFilter;
|
||||
}
|
||||
if (state.pageIndex != null) {
|
||||
this.paginator.pageIndex = state.pageIndex;
|
||||
}
|
||||
if (state.pageSize != null) {
|
||||
this.paginator.pageSize = state.pageSize;
|
||||
}
|
||||
} catch (_) {
|
||||
/* ignore corrupt state */
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Subscribes to all search filters:
|
||||
* Office Name, GL Account, Transaction ID, Transaction Date From, Transaction Date To,
|
||||
* sort change and page change.
|
||||
*/
|
||||
ngAfterViewInit() {
|
||||
this.officeName.valueChanges
|
||||
.pipe(
|
||||
map((value) => (value.id ? value.id : '')),
|
||||
map((v) => (v?.id ? String(v.id) : '')),
|
||||
debounceTime(500),
|
||||
distinctUntilChanged(),
|
||||
tap((filterValue) => {
|
||||
this.applyFilter(filterValue, 'officeId');
|
||||
})
|
||||
tap((val) => this.applyFilter(val, 'officeId'))
|
||||
)
|
||||
.subscribe();
|
||||
|
||||
this.glAccount.valueChanges
|
||||
.pipe(
|
||||
map((value) => (value ? value : '')),
|
||||
debounceTime(500),
|
||||
distinctUntilChanged(),
|
||||
tap((filterValue) => {
|
||||
this.applyFilter(filterValue, 'glAccountId');
|
||||
tap((val) => {
|
||||
// GlAccountSelectorComponent emits the account id (number) directly
|
||||
const id = val != null && val !== '' ? String(val) : '';
|
||||
this.selectedGlAccountId = id ? Number(id) : null;
|
||||
this.applyFilter(id, 'glAccountId');
|
||||
})
|
||||
)
|
||||
.subscribe();
|
||||
|
||||
this.transactionId.valueChanges
|
||||
this.entryTypeFilter.valueChanges
|
||||
.pipe(
|
||||
debounceTime(500),
|
||||
debounceTime(300),
|
||||
distinctUntilChanged(),
|
||||
tap((filterValue) => {
|
||||
this.applyFilter(filterValue, 'transactionId');
|
||||
})
|
||||
tap((val) => this.applyFilter(val ?? '', 'manualEntriesOnly'))
|
||||
)
|
||||
.subscribe();
|
||||
|
||||
this.transactionIdCtrl.valueChanges
|
||||
.pipe(
|
||||
debounceTime(600),
|
||||
distinctUntilChanged(),
|
||||
tap((val) => this.applyFilter(val ?? '', 'transactionId'))
|
||||
)
|
||||
.subscribe();
|
||||
|
||||
@@ -257,9 +335,7 @@ export class SearchJournalEntryComponent implements OnInit, AfterViewInit {
|
||||
.pipe(
|
||||
debounceTime(500),
|
||||
distinctUntilChanged(),
|
||||
tap((filterValue) => {
|
||||
this.applyFilter(this.dateUtils.formatDate(filterValue, this.settingsService.dateFormat), 'fromDate');
|
||||
})
|
||||
tap((val) => this.applyFilter(this.dateUtils.formatDate(val, this.settingsService.dateFormat), 'fromDate'))
|
||||
)
|
||||
.subscribe();
|
||||
|
||||
@@ -267,9 +343,7 @@ export class SearchJournalEntryComponent implements OnInit, AfterViewInit {
|
||||
.pipe(
|
||||
debounceTime(500),
|
||||
distinctUntilChanged(),
|
||||
tap((filterValue) => {
|
||||
this.applyFilter(this.dateUtils.formatDate(filterValue, this.settingsService.dateFormat), 'toDate');
|
||||
})
|
||||
tap((val) => this.applyFilter(this.dateUtils.formatDate(val, this.settingsService.dateFormat), 'toDate'))
|
||||
)
|
||||
.subscribe();
|
||||
|
||||
@@ -277,12 +351,9 @@ export class SearchJournalEntryComponent implements OnInit, AfterViewInit {
|
||||
.pipe(
|
||||
debounceTime(500),
|
||||
distinctUntilChanged(),
|
||||
tap((filterValue) => {
|
||||
this.applyFilter(
|
||||
this.dateUtils.formatDate(filterValue, this.settingsService.dateFormat),
|
||||
'submittedOnDateFrom'
|
||||
);
|
||||
})
|
||||
tap((val) =>
|
||||
this.applyFilter(this.dateUtils.formatDate(val, this.settingsService.dateFormat), 'submittedOnDateFrom')
|
||||
)
|
||||
)
|
||||
.subscribe();
|
||||
|
||||
@@ -290,106 +361,181 @@ export class SearchJournalEntryComponent implements OnInit, AfterViewInit {
|
||||
.pipe(
|
||||
debounceTime(500),
|
||||
distinctUntilChanged(),
|
||||
tap((filterValue) => {
|
||||
this.applyFilter(
|
||||
this.dateUtils.formatDate(filterValue, this.settingsService.dateFormat),
|
||||
'submittedOnDateTo'
|
||||
);
|
||||
})
|
||||
tap((val) =>
|
||||
this.applyFilter(this.dateUtils.formatDate(val, this.settingsService.dateFormat), 'submittedOnDateTo')
|
||||
)
|
||||
)
|
||||
.subscribe();
|
||||
|
||||
this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0));
|
||||
|
||||
merge(this.sort.sortChange, this.paginator.page)
|
||||
.pipe(tap(() => this.loadJournalEntriesPage()))
|
||||
.subscribe();
|
||||
}
|
||||
|
||||
/**
|
||||
* Loads a page of journal entries.
|
||||
*/
|
||||
// ── Ledger Summary (backend-computed) ─────────────────────────────────────
|
||||
loadLedgerSummary() {
|
||||
this.ledgerLoading = true;
|
||||
const fromFilter = this.filterJournalEntriesBy.find((f) => f.type === 'fromDate');
|
||||
const toFilter = this.filterJournalEntriesBy.find((f) => f.type === 'toDate');
|
||||
const offFilter = this.filterJournalEntriesBy.find((f) => f.type === 'officeId');
|
||||
const manFilter = this.filterJournalEntriesBy.find((f) => f.type === 'manualEntriesOnly');
|
||||
const txnFilter = this.filterJournalEntriesBy.find((f) => f.type === 'transactionId');
|
||||
|
||||
this.accountingService
|
||||
.getGLAccountLedger({
|
||||
glAccountId: this.selectedGlAccountId ?? undefined,
|
||||
officeId: offFilter?.value ? Number(offFilter.value) : undefined,
|
||||
fromDate: fromFilter?.value || undefined,
|
||||
toDate: toFilter?.value || undefined,
|
||||
dateFormat: this.settingsService.dateFormat,
|
||||
locale: this.settingsService.language.code,
|
||||
manualEntriesOnly: manFilter?.value === 'true' ? true : manFilter?.value === 'false' ? false : undefined,
|
||||
transactionId: txnFilter?.value || undefined,
|
||||
limit: 0, // summary only — no entries page needed from this call
|
||||
offset: 0
|
||||
})
|
||||
.subscribe({
|
||||
next: (data: any) => {
|
||||
this.ledgerData = data;
|
||||
this.glAccountInfo = data.glAccount;
|
||||
this.openingBalance = Number(data.openingBalance ?? 0);
|
||||
this.closingBalance = Number(data.closingBalance ?? 0);
|
||||
this.totalDebit = Number(data.totalDebit ?? 0);
|
||||
this.totalCredit = Number(data.totalCredit ?? 0);
|
||||
this.netMovement = Number(data.netMovement ?? 0);
|
||||
this.totalEntries = Number(data.totalEntries ?? 0);
|
||||
this.isDebitNormal = data.debitNormal !== false;
|
||||
this.dayWiseData = (data.dayWiseSummary || []).map((d: any) => ({
|
||||
date: d.date,
|
||||
openingBalance: Number(d.openingBalance ?? 0),
|
||||
totalDebit: Number(d.totalDebit ?? 0),
|
||||
totalCredit: Number(d.totalCredit ?? 0),
|
||||
netMovement: Number(d.netMovement ?? 0),
|
||||
closingBalance: Number(d.closingBalance ?? 0),
|
||||
entryCount: d.entryCount || 0
|
||||
}));
|
||||
this.updateActiveFiltersCount();
|
||||
this.ledgerLoading = false;
|
||||
},
|
||||
error: (err: any) => {
|
||||
console.error('[LedgerSummary] API error:', err);
|
||||
this.ledgerLoading = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ── Quick filter ──────────────────────────────────────────────────────────
|
||||
applyQuickFilter(q: any) {
|
||||
this.activeQuickFilter = q.label;
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
let from: Date, to: Date;
|
||||
|
||||
switch (q.type) {
|
||||
case 'day':
|
||||
from = new Date(today);
|
||||
to = new Date(today);
|
||||
break;
|
||||
case 'prev':
|
||||
from = new Date(today);
|
||||
from.setDate(from.getDate() - 1);
|
||||
to = new Date(from);
|
||||
break;
|
||||
case 'week': {
|
||||
const dow = today.getDay();
|
||||
from = new Date(today);
|
||||
from.setDate(today.getDate() - dow);
|
||||
to = new Date(today);
|
||||
break;
|
||||
}
|
||||
case 'lastweek': {
|
||||
const dow = today.getDay();
|
||||
to = new Date(today);
|
||||
to.setDate(today.getDate() - dow - 1);
|
||||
from = new Date(to);
|
||||
from.setDate(to.getDate() - 6);
|
||||
break;
|
||||
}
|
||||
case 'month':
|
||||
from = new Date(today.getFullYear(), today.getMonth(), 1);
|
||||
to = new Date(today);
|
||||
break;
|
||||
case 'lastmonth':
|
||||
from = new Date(today.getFullYear(), today.getMonth() - 1, 1);
|
||||
to = new Date(today.getFullYear(), today.getMonth(), 0);
|
||||
break;
|
||||
case 'year':
|
||||
from = new Date(today.getFullYear(), 0, 1);
|
||||
to = new Date(today);
|
||||
break;
|
||||
default:
|
||||
from = new Date(today);
|
||||
from.setDate(today.getDate() - (q.days || 90));
|
||||
to = new Date(today);
|
||||
}
|
||||
|
||||
this.transactionDateFrom.setValue(from, { emitEvent: false });
|
||||
this.transactionDateTo.setValue(to, { emitEvent: false });
|
||||
this.applyFilter(this.dateUtils.formatDate(from, this.settingsService.dateFormat), 'fromDate');
|
||||
this.applyFilter(this.dateUtils.formatDate(to, this.settingsService.dateFormat), 'toDate');
|
||||
}
|
||||
|
||||
clearQuickFilter() {
|
||||
this.activeQuickFilter = '';
|
||||
const dfrom = new Date(new Date().setMonth(new Date().getMonth() - 1));
|
||||
const dto = new Date();
|
||||
this.transactionDateFrom.setValue(dfrom, { emitEvent: false });
|
||||
this.transactionDateTo.setValue(dto, { emitEvent: false });
|
||||
this.applyFilter(this.dateUtils.formatDate(dfrom, this.settingsService.dateFormat), 'fromDate');
|
||||
this.applyFilter(this.dateUtils.formatDate(dto, this.settingsService.dateFormat), 'toDate');
|
||||
}
|
||||
|
||||
clearFilters() {
|
||||
sessionStorage.removeItem(STATE_KEY);
|
||||
this.officeName.setValue('', { emitEvent: false });
|
||||
this.glAccount.setValue('', { emitEvent: false });
|
||||
this.entryTypeFilter.setValue('', { emitEvent: false });
|
||||
this.transactionIdCtrl.setValue('', { emitEvent: false });
|
||||
this.submittedOnDateFrom.setValue('', { emitEvent: false });
|
||||
this.submittedOnDateTo.setValue('', { emitEvent: false });
|
||||
this.referenceNumber.setValue('', { emitEvent: false });
|
||||
this.selectedGlAccountId = null;
|
||||
this.filterJournalEntriesBy.forEach((f) => {
|
||||
if (![
|
||||
'fromDate',
|
||||
'toDate',
|
||||
'dateFormat',
|
||||
'locale'
|
||||
].includes(f.type)) f.value = '';
|
||||
});
|
||||
this.clearQuickFilter();
|
||||
this.loadLedgerSummary();
|
||||
this.loadJournalEntriesPage();
|
||||
}
|
||||
|
||||
// ── Table & pagination ────────────────────────────────────────────────────
|
||||
loadJournalEntriesPage() {
|
||||
if (!this.sort.direction) {
|
||||
delete this.sort.active;
|
||||
delete (this.sort as any).active;
|
||||
}
|
||||
this.dataSource.getJournalEntries(
|
||||
this.filterJournalEntriesBy,
|
||||
this.sort.active,
|
||||
this.sort.direction,
|
||||
this.paginator.pageIndex,
|
||||
this.paginator.pageSize
|
||||
this.paginator.pageSize || 10
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Filters data in journal entries table based on passed value and poperty.
|
||||
* @param {string} filterValue Value to filter data.
|
||||
* @param {string} property Property to filter data by.
|
||||
*/
|
||||
applyFilter(filterValue: string, property: string) {
|
||||
this.paginator.pageIndex = 0;
|
||||
const findIndex = this.filterJournalEntriesBy.findIndex((filter) => filter.type === property);
|
||||
this.filterJournalEntriesBy[findIndex].value = filterValue;
|
||||
const idx = this.filterJournalEntriesBy.findIndex((f) => f.type === property);
|
||||
if (idx >= 0) this.filterJournalEntriesBy[idx].value = filterValue;
|
||||
this.loadJournalEntriesPage();
|
||||
this.loadLedgerSummary();
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays office name in form control input.
|
||||
* @param {any} office Office data.
|
||||
* @returns {string} Office name if valid otherwise undefined.
|
||||
*/
|
||||
displayOfficeName(office?: any): string | undefined {
|
||||
return office ? office.name : undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets filtered offices for autocomplete.
|
||||
*/
|
||||
setFilteredOffices() {
|
||||
this.filteredOfficeData = this.officeName.valueChanges.pipe(
|
||||
startWith(''),
|
||||
map((office: any) => (typeof office === 'string' ? office : office.name)),
|
||||
map((officeName: string) => (officeName ? this.filterOfficeAutocompleteData(officeName) : this.officeData))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets filtered gl accounts for autocomplete.
|
||||
*/
|
||||
setFilteredGlAccounts() {
|
||||
this.filteredGLAccountData = this.glAccount.valueChanges.pipe(
|
||||
startWith(''),
|
||||
map((glAccount: any) =>
|
||||
typeof glAccount === 'string' ? glAccount : glAccount.name + ' (' + glAccount.glCode + ')'
|
||||
),
|
||||
map((glAccount: string) => (glAccount ? this.filterGLAccountAutocompleteData(glAccount) : this.glAccountData))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Filters offices.
|
||||
* @param {string} officeName Office name to filter office by.
|
||||
* @returns {any} Filtered offices.
|
||||
*/
|
||||
private filterOfficeAutocompleteData(officeName: string): any {
|
||||
return this.officeData.filter((office: any) => office.name.toLowerCase().includes(officeName.toLowerCase()));
|
||||
}
|
||||
|
||||
/**
|
||||
* Filters gl accounts.
|
||||
* @param {string} glAccount Gl Account name to filter gl account by.
|
||||
* @returns {any} Filtered gl accounts.
|
||||
*/
|
||||
private filterGLAccountAutocompleteData(glAccount: string): any {
|
||||
return this.glAccountData.filter((option: any) =>
|
||||
(option.name + ' (' + option.glCode + ')').toLowerCase().includes(glAccount.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes the data source for journal entries table and loads the first page.
|
||||
*/
|
||||
getJournalEntries() {
|
||||
this.dataSource = new JournalEntriesDataSource(this.accountingService);
|
||||
this.dataSource.getJournalEntries(
|
||||
@@ -397,7 +543,83 @@ export class SearchJournalEntryComponent implements OnInit, AfterViewInit {
|
||||
this.sort.active,
|
||||
this.sort.direction,
|
||||
this.paginator.pageIndex,
|
||||
this.paginator.pageSize
|
||||
this.paginator.pageSize || 10
|
||||
);
|
||||
}
|
||||
|
||||
// ── Helper getters ────────────────────────────────────────────────────────
|
||||
get hasGlAccountFilter(): boolean {
|
||||
return !!this.selectedGlAccountId;
|
||||
}
|
||||
|
||||
get netMovementPositive(): boolean {
|
||||
return this.netMovement >= 0;
|
||||
}
|
||||
|
||||
getRunningBalance(entry: any): number {
|
||||
return Number(entry.officeRunningBalance ?? entry.organizationRunningBalance ?? 0);
|
||||
}
|
||||
|
||||
getAccountTypeBadgeClass(type: string): string {
|
||||
const m: Record<string, string> = {
|
||||
ASSET: 'gl-badge--asset',
|
||||
LIABILITY: 'gl-badge--liability',
|
||||
INCOME: 'gl-badge--income',
|
||||
EXPENSE: 'gl-badge--expense',
|
||||
EQUITY: 'gl-badge--equity'
|
||||
};
|
||||
return m[type] || 'gl-badge--default';
|
||||
}
|
||||
|
||||
getAccountTypeIcon(type: string): string {
|
||||
const m: Record<string, string> = {
|
||||
ASSET: 'building-columns',
|
||||
LIABILITY: 'file-lines',
|
||||
INCOME: 'arrow-down',
|
||||
EXPENSE: 'arrow-up',
|
||||
EQUITY: 'scale-balanced'
|
||||
};
|
||||
return m[type] || 'tag';
|
||||
}
|
||||
|
||||
getEntryTypeClass(entry: any): string {
|
||||
return entry.entryType?.value === 'DEBIT' ? 'gl-row--dr' : 'gl-row--cr';
|
||||
}
|
||||
|
||||
getDayNetClass(net: number): string {
|
||||
return net >= 0 ? 'gl-positive' : 'gl-negative';
|
||||
}
|
||||
|
||||
private updateActiveFiltersCount() {
|
||||
this.activeFiltersCount = this.filterJournalEntriesBy.filter(
|
||||
(f) => ![
|
||||
'dateFormat',
|
||||
'locale',
|
||||
'fromDate',
|
||||
'toDate'
|
||||
].includes(f.type) && f.value !== ''
|
||||
).length;
|
||||
}
|
||||
|
||||
displayOfficeName(office?: any): string | undefined {
|
||||
return office ? office.name : undefined;
|
||||
}
|
||||
|
||||
setFilteredOffices() {
|
||||
this.filteredOfficeData = this.officeName.valueChanges.pipe(
|
||||
startWith(''),
|
||||
map((o: any) => (typeof o === 'string' ? o : o?.name || '')),
|
||||
map((n: string) =>
|
||||
n ? this.officeData?.filter((o: any) => o.name.toLowerCase().includes(n.toLowerCase())) : this.officeData
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
formatLedgerDate(dateArr: any): string {
|
||||
if (!dateArr) return '—';
|
||||
if (Array.isArray(dateArr)) {
|
||||
return `${dateArr[0]}-${String(dateArr[1]).padStart(2, '0')}-${String(dateArr[2]).padStart(2, '0')}`;
|
||||
}
|
||||
return String(dateArr).substring(0, 10);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user