accounts-list.component.html

<div class="card accountListTable">
    <div class="font-semibold text-xl mb-4">Accounts List</div>
    <div class="mb-6 border-b border-gray-200 dark:border-gray-700 pb-6" *ngIf="accounts.length > 0 && !loading">
        <div class="text-sm font-semibold text-gray-500 dark:text-gray-400 mb-4">Summary by Currency</div>
        <div class="flex flex-wrap gap-4">
            <div *ngFor="let currency of getUniqueCurrencies()" class="flex-1 min-w-[250px] border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                <div class="text-base font-bold text-gray-700 dark:text-gray-300 mb-3">{{ currency }}</div>
                <div class="flex flex-col gap-2">
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600 dark:text-gray-400">Total Balance:</span>
                        <span class="font-bold text-base text-gray-900 dark:text-gray-100">{{ formatAmount(getTotalBalanceByCurrency(currency).toString()) }}</span>
                    </div>
                    <div class="flex justify-between items-center" *ngIf="serverConfig.baseCurrency">
                        <span class="text-sm text-gray-600 dark:text-gray-400">Debits (Period):</span>
                        <span class="font-bold text-green-600 dark:text-green-400">{{ formatAmount(getTotalDebitsByCurrency(currency).toString()) }}</span>
                    </div>
                    <div class="flex justify-between items-center" *ngIf="serverConfig.baseCurrency">
                        <span class="text-sm text-gray-600 dark:text-gray-400">Credits (Period):</span>
                        <span class="font-bold text-red-600 dark:text-red-400">{{ formatAmount(getTotalCreditsByCurrency(currency).toString()) }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <p-table #dt1
             dataKey="id"
             [value]="accounts"
             [tableStyle]="{ 'min-width': '50rem' }"
             [rows]="1000"
             [loading]="loading"
             sortMode="multiple"
             [rowHover]="true"
             [showGridlines]="true"
             [filters]="filters"
             [multiSortMeta]="multiSortMeta"
             [resizableColumns]="true" columnResizeMode="expand"
             [paginator]="false"
             [globalFilterFields]="['account.name', 'account.number', 'account.currency']"
             (onFilter)="syncStateToUrl()"
             (onSort)="syncStateToUrl()"
             responsiveLayout="scroll">
        <ng-template #caption>
            <div class="flex justify-between items-center flex-column sm:flex-row gap-2">
                <p-iconfield iconPosition="left" class="ml-auto">
                    <p-inputicon>
                        <i class="pi pi-search"></i>
                    </p-inputicon>
                    <input #filter pInputText type="text" (input)="onGlobalFilter(dt1, $event)"
                           placeholder="Search keyword" />
                    <p-button class="p-button-outlined mb-2 " icon="pi pi-filter-slash"
                              (click)="clear(dt1)"></p-button>
                </p-iconfield>

                <div class="flex gap-2">
                    <p-button icon="pi pi-refresh" severity="secondary"
                              pTooltip="Refresh table" tooltipPosition="top"
                              (click)="refreshTable()" />
                    <p-button label="Create new account" class="p-button-link"
                              (click)="this.router.navigate(['/accounts', 'new'], { queryParams: { returnUrl: currentReturnUrl } })" />
                </div>
            </div>
        </ng-template>
        <ng-template #header>
            <tr>
                <th pSortableColumn="account.name">
                    <p class="flex justify-between items-center text-left">
                        Name
                        <p-sortIcon field="account.name" />
                    </p>
                </th>
                <th>
                    <p class="text-left">
                        Type
                    </p>
                </th>
                <th>
                    <p class="text-left">
                        Currency
                    </p>
                </th>
                <th>
                    <p class="text-center">
                        Current Balance
                    </p>
                </th>
                <th>
                    <p class="text-center">
                        Debit/Credit
                    </p>
                </th>
                <th>
                    <p class="text-left">
                        Account number
                    </p>
                </th>
                <th>
                    <p class="text-left">
                        Tags
                    </p>
                </th>
                <th style="width: 1%; white-space: nowrap;"></th>
            </tr>
            <tr>
                <th>
                    <p-columnFilter type="text" showAddButton="false" showMatchModes="false" field="account.name"
                                    showMenu="true"
                                    [showApplyButton]="false"
                                    matchMode="contains"
                                    placeholder="Filter"></p-columnFilter>
                </th>
                <th>
                    <p-columnFilter field="account.type" matchMode="equals" [showMenu]="false">
                        <ng-template #filter let-value let-filter="filterCallback">
                            <p-multiselect appendTo="body" [filter]="true" [(ngModel)]="value"
                                           [options]="accountTypes"
                                           field="account.type"
                                           selectedItemsLabel="{{value?.length}} items"
                                           maxSelectedLabels="1"
                                           optionLabel="name" optionValue="value" (onChange)="filter($event.value)"
                                           placeholder="Select" [showClear]="false">
                            </p-multiselect>
                        </ng-template>
                    </p-columnFilter>
                </th>
                <th>
                    <p-columnFilter field="account.currency" matchMode="equals" [showMenu]="false">
                        <ng-template #filter let-value let-filter="filterCallback">
                            <p-multiselect appendTo="body" [filter]="true" [(ngModel)]="value"
                                           [options]="accountCurrencies"
                                           field="account.currency"
                                           maxSelectedLabels="1"
                                           optionLabel="id" optionValue="id" (onChange)="filter($event.value)"
                                           placeholder="Select" [showClear]="false">
                            </p-multiselect>
                        </ng-template>
                    </p-columnFilter>
                </th>
                <th>
                    <p-columnFilter type="numeric" showAddButton="false" showMatchModes="true"
                                    field="account.currentBalance"
                        showMenu="true"
                                    [showApplyButton]="false"
                                    matchMode="between"
                                    placeholder="Amount"></p-columnFilter>
                </th>
                <th></th>
                <th>
                    <p-columnFilter type="text" showAddButton="false" showMatchModes="false"
                                    field="account.accountNumber"
                                    showMenu="true"
                                    [showApplyButton]="false"
                                    matchMode="contains"
                                    placeholder="Filter"></p-columnFilter>
                </th>
                <th>
                    <p-multiselect appendTo="body" [filter]="true"
                                   [(ngModel)]="selectedTagIds"
                                   (onChange)="onTagFilterChange()"
                                   [options]="tags"
                                   maxSelectedLabels="1"
                                   optionLabel="name" optionValue="id"
                                   placeholder="Select" [showClear]="true"
                                   styleClass="w-full">
                    </p-multiselect>
                </th>
                <th></th>
            </tr>
        </ng-template>
        <ng-template #body let-accountItem>
            <tr>
                <td>
                    <a [href]="getAccountUrl(accountItem)" [routerLink]="getAccountUrl(accountItem)">
                        {{ accountItem.account.name }}
                    </a>
                </td>
                <td>
                    {{ this.accountTypesMap[accountItem.account.type].name }}
                </td>
                <td>
                    {{ accountItem.account.currency }}
                </td>
                <td class="text-center" style="width: 1%; white-space: nowrap;">
                    <div class="flex flex-col gap-1 items-center">
                        <div class="{{accountItem.account.currentBalance < 0 ? 'text-red-500' : 'text-green-500'}} font-semibold text-base">
                            <i class="pi text-xs"
                               [ngClass]="{'pi-arrow-down': accountItem.account.currentBalance < 0, 'pi-arrow-up': accountItem.account.currentBalance >= 0}"></i>
                            {{ accountItem.account.currentBalance }}
                        </div>
                        <div class="text-xs text-gray-500 dark:text-gray-400">
                            {{ accountItem.account.currency }}
                        </div>
                    </div>
                </td>
                <td class="text-center">
                    <div *ngIf="getAnalytics(accountItem.account.id)" class="flex flex-col gap-1 items-center">
                        <div class="flex items-center gap-1 text-base">
                            <span class="text-green-600 dark:text-green-500 font-semibold">↑ {{ formatAmount(getAnalytics(accountItem.account.id)!.totalDebitsAmount) }}</span>
                            <span class="text-gray-400">/</span>
                            <span class="text-red-600 dark:text-red-500 font-semibold">↓ {{ formatAmount(getAnalytics(accountItem.account.id)!.totalCreditsAmount) }}</span>
                        </div>
                        <div class="text-xs text-gray-500 dark:text-gray-400">
                            {{ serverConfig.baseCurrency }}
                        </div>
                    </div>
                </td>
                <td style="max-width: 10rem">
                    <p class="text-wrap break-all">
                        {{ accountItem.account.accountNumber }}
                    </p>
                </td>
                <td>
                    <div class="flex gap-1 flex-wrap">
                        @for (tagID of accountItem.account.tagIds; track tagID) {
                            <fancy-tag [tag]="getTag(tagID)"></fancy-tag>
                        }
                    </div>
                </td>
                <td>
                    <div class="flex gap-2">
                        <a [routerLink]="['/', 'accounts', 'edit', accountItem.account.id]"
                           [queryParams]="{ returnUrl: currentReturnUrl }">
                            <p-button icon="pi pi-pencil"
                                      pTooltip="Edit account" tooltipPosition="top" placeholder="Top"
                                      severity="secondary" [rounded]="true" />
                        </a>
                        <p-button icon="pi pi-receipt"
                                  (onClick)="showReconcile(accountItem)"
                                  pTooltip="Reconcile account" tooltipPosition="top" placeholder="Top"
                                  severity="secondary" [rounded]="true" />
                    </div>
                </td>
            </tr>
        </ng-template>
        <ng-template #emptymessage>
            <tr>
                <td colspan="9">No accounts found.</td>
            </tr>
        </ng-template>
        <ng-template #loadingbody>
            <tr>
                <td colspan="9">Loading accounts data. Please wait.</td>
            </tr>
        </ng-template>
    </p-table>
    @if (selectedAccount && selectedAccount.account) {
        <app-reconciliation-modal (closed)="reconciliationDialogVisible = false; this.refreshTable()"
                                  [account]="selectedAccount.account"
                                  [visible]="reconciliationDialogVisible"></app-reconciliation-modal>
    }
</div>