Fixed Deposit account view update (#1881)

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>
2023-10-19 00:07:22 -06:00
parent d92f6c1c5e
commit c7fe21e74a
217 changed files with 23945 additions and 1869 deletions
@@ -6,50 +6,61 @@

      <div class="profile-image-container">
        <div>
-          <img mat-card-md-image class="profile-image"
-            matTooltip="Fixed Deposits Account"
+          <img mat-card-md-image class="profile-image" matTooltip="Fixed Deposits Account"
            [src]="'assets/images/fd_account_placeholder.png'">
        </div>
      </div>

      <div class="mat-typography account-card-title">
        <mat-card-title>
-          <h3>
-            <i class="fa fa-stop" [ngClass]="fixedDepositsAccountData.status.code | statusLookup" [matTooltip]="fixedDepositsAccountData.status.value"></i>
-              Account Name : {{fixedDepositsAccountData.depositProductName}}
+          <h3 fxFlex="95%">
+            <i class="fa fa-stop" [ngClass]="fixedDepositsAccountData.status.code | statusLookup"
+              [matTooltip]="fixedDepositsAccountData.status.value"></i>
+            Fixed Deposit Product : {{fixedDepositsAccountData.fixedDepositsAccountData}}<span class="m-l-10">
+              <mifosx-account-number accountNo="{{fixedDepositsAccountData.accountNo}}"></mifosx-account-number></span>
          </h3>
+          <div fxFlex="5%">
+            <button mat-icon-button [matMenuTriggerFor]="accountMenu" aria-label="Loan account actions"
+              yPosition="below">
+              <mat-icon matListIcon class="actions-menu">
+                <fa-icon icon="bars" size="sm"></fa-icon>
+              </mat-icon>
+            </button>
+          </div>
        </mat-card-title>
        <mat-card-subtitle>
          <p>
-            Account #: {{fixedDepositsAccountData.accountNo}} | Client Name: {{fixedDepositsAccountData.clientName}}<br/>
-            <span *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval">
-              Current Balance: {{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.summary.accountBalance}}<br/>
-              Deposit Amount: {{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.depositAmount}}<br/>
+            {{entityType}} Name: {{fixedDepositsAccountData.clientName || fixedDepositsAccountData.groupName}}
+            <span class="m-l-10" *ngIf="fixedDepositsAccountData.clientAccountNo">({{fixedDepositsAccountData.clientAccountNo}})</span><br />
+            <span
+              *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval">
+              Current Balance:
+              {{fixedDepositsAccountData.summary.accountBalance | currency:currencyCode:'symbol-narrow':'1.2-2'}}<br />
+              Deposit Amount:
+              {{fixedDepositsAccountData.depositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}<br />
            </span>
          </p>
        </mat-card-subtitle>
      </div>

+      <mat-menu #accountMenu="matMenu">
+        <ng-container *ngFor="let button of buttonConfig.singleButtons">
+          <button mat-menu-item (click)="doAction(button.name)">
+            <i ngClass="{{button.icon}}"></i> {{button.name}}</button>
+        </ng-container>
+
+        <ng-container *ngIf="buttonConfig.options.length">
+          <button mat-menu-item [matMenuTriggerFor]="More">More</button>
+          <mat-menu #More="matMenu">
+            <span *ngFor="let option of buttonConfig.options">
+              <button mat-menu-item (click)="doAction(option.name)">{{option.name}}</button>
+            </span>
+          </mat-menu>
+        </ng-container>
+      </mat-menu>
+
    </mat-card-title-group>

-    <mat-card-actions class="account-actions">
-
-      <ng-container *ngFor="let button of buttonConfig.singleButtons">
-        <button mat-raised-button (click)="doAction(button.name)">
-          <i class="{{button.icon}}"></i> {{button.name}}</button>
-      </ng-container>
-  
-      <ng-container *ngIf="buttonConfig.options.length">
-        <button mat-raised-button [matMenuTriggerFor]="More">More</button>
-        <mat-menu #More="matMenu">
-        <span *ngFor="let option of buttonConfig.options">
-          <button mat-menu-item (click)="doAction(option.name)">{{option.name}}</button>
-        </span>
-        </mat-menu>
-      </ng-container>
-  
-    </mat-card-actions>
-
  </mat-card-header>

  <mat-card-content class="content">
@@ -64,23 +75,28 @@
            <tbody>
              <tr>
                <td>Activated On</td>
-                <td>{{fixedDepositsAccountData.timeline.activatedOnDate ? (fixedDepositsAccountData.timeline.activatedOnDate  | dateFormat) : 'Not Activated'}}</td>
+                <td>{{fixedDepositsAccountData.timeline.activatedOnDate ?
+                  (fixedDepositsAccountData.timeline.activatedOnDate | dateFormat) : 'Not Activated'}}</td>
              </tr>
              <tr *ngIf="fixedDepositsAccountData.timeline.closedOnDate">
                <td>Closed On</td>
-                <td>{{fixedDepositsAccountData.timeline.closedOnDate  | dateFormat}}</td>
+                <td>{{fixedDepositsAccountData.timeline.closedOnDate | dateFormat}}</td>
              </tr>
              <tr>
                <td>Field Officer</td>
-                <td>{{fixedDepositsAccountData.fieldOfficerName ? fixedDepositsAccountData.fieldOfficerName : 'Unassigned'}}</td>
+                <td>{{fixedDepositsAccountData.fieldOfficerName ? fixedDepositsAccountData.fieldOfficerName :
+                  'Unassigned'}}</td>
              </tr>
              <tr>
                <td>Maturity Date</td>
-                <td>{{fixedDepositsAccountData.maturityDate ? (fixedDepositsAccountData.maturityDate  | dateFormat) : 'N/A'}}</td>
+                <td>{{fixedDepositsAccountData.maturityDate ? (fixedDepositsAccountData.maturityDate | dateFormat) :
+                  'N/A'}}</td>
              </tr>
              <tr>
                <td>Deposit Period</td>
-                <td>{{fixedDepositsAccountData.depositPeriod}}&nbsp;{{fixedDepositsAccountData.depositPeriodFrequency.value}}</td>
+                <td>
+                  {{fixedDepositsAccountData.depositPeriod}}&nbsp;{{fixedDepositsAccountData.depositPeriodFrequency.value}}
+                </td>
              </tr>
              <tr *ngIf="fixedDepositsAccountData.withHoldTax">
                <td>Tax Group</td>
@@ -116,8 +132,10 @@
              </tr>
              <tr *ngIf="fixedDepositsAccountData.preClosurePenalApplicable">
                <td>Pre-cloure Penal</td>
-                <td>{{fixedDepositsAccountData.preClosurePenalInterest}} % on {{fixedDepositsAccountData.preClosurePenalInterestOnType.value}}</td>
+                <td>{{fixedDepositsAccountData.preClosurePenalInterest}} % on
+                  {{fixedDepositsAccountData.preClosurePenalInterestOnType.value}}</td>
              </tr>
+            </tbody>
          </table>
        </div>

@@ -125,30 +143,40 @@

      <div fxFlex="49%">

-        <div *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval; else otherDetails">
+        <div
+          *ngIf="!fixedDepositsAccountData.status.rejected && !fixedDepositsAccountData.status.submittedAndPendingApproval; else otherDetails">
          <h4 class="table-headers">Performance History</h4>
          <table>
            <tbody>
              <tr>
                <td>Principal Amount</td>
-                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.depositAmount}}</td>
+                <td class="r-amount">{{fixedDepositsAccountData.depositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+                </td>
              </tr>
              <tr>
                <td>Maturity Amount</td>
-                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.maturityAmount}}</td>
+                <td class="r-amount">{{fixedDepositsAccountData.maturityAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+                </td>
              </tr>
              <tr *ngIf="fixedDepositsAccountData.summary.totalDeposits">
                <td>Total Deposits</td>
-                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.summary.totalDeposits}}</td>
+                <td class="r-amount">
+                  {{fixedDepositsAccountData.summary.totalDeposits | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+                </td>
              </tr>
              <tr *ngIf="fixedDepositsAccountData.summary.totalWithdrawals">
                <td>Total Withdrawals</td>
-                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.summary.totalWithdrawals}}</td>
+                <td class="r-amount">
+                  {{fixedDepositsAccountData.summary.totalWithdrawals | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+                </td>
              </tr>
              <tr *ngIf="fixedDepositsAccountData.summary.totalInterestEarned >= 0">
                <td>Total Interest Earned</td>
-                <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.summary.totalInterestEarned}}</td>
+                <td class="r-amount">
+                  {{fixedDepositsAccountData.summary.totalInterestEarned | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+                </td>
              </tr>
+            </tbody>
          </table>
        </div>

@@ -159,11 +187,15 @@
              <tbody>
                <tr>
                  <td>Principal Amount</td>
-                  <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.depositAmount}}</td>
+                  <td>
+                    {{fixedDepositsAccountData.depositAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+                  </td>
                </tr>
                <tr>
                  <td>Maturity Amount</td>
-                  <td>{{fixedDepositsAccountData.currency.displaySymbol}}&nbsp;{{fixedDepositsAccountData.maturityAmount}}</td>
+                  <td>
+                    {{fixedDepositsAccountData.maturityAmount | currency:currencyCode:'symbol-narrow':'1.2-2'}}
+                  </td>
                </tr>
              </tbody>
            </table>
@@ -176,25 +208,26 @@

    <nav mat-tab-nav-bar class="navigation-tabs">
      <a mat-tab-link [routerLink]="['./interest-rate-chart']" routerLinkActive #IRC="routerLinkActive"
-      [active]="IRC.isActive">
+        [active]="IRC.isActive">
        Interest Rate Chart
      </a>
      <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
-      [active]="transactions.isActive">
+        [active]="transactions.isActive">
        Transactions
      </a>
      <a mat-tab-link [routerLink]="['./charges']" routerLinkActive #charges="routerLinkActive"
-      [active]="charges.isActive">
+        [active]="charges.isActive">
        Charges
      </a>
-      <a mat-tab-link [routerLink]="['./standing-instructions']" routerLinkActive #standingInstructions="routerLinkActive"
-        [active]="standingInstructions.isActive" *ngIf="fixedDepositsAccountData.clientId">
+      <a mat-tab-link [routerLink]="['./standing-instructions']" routerLinkActive
+        #standingInstructions="routerLinkActive" [active]="standingInstructions.isActive"
+        *ngIf="fixedDepositsAccountData.clientId">
        Standing Instructions
      </a>
      <ng-container *ngFor="let savingsDatatable of savingsDatatables">
        <a mat-tab-link *mifosxHasPermission="'READ_' + savingsDatatable.registeredTableName"
-          [routerLink]="['./datatables',savingsDatatable.registeredTableName]"
-          routerLinkActive #datatable="routerLinkActive" [active]="datatable.isActive">
+          [routerLink]="['./datatables',savingsDatatable.registeredTableName]" routerLinkActive
+          #datatable="routerLinkActive" [active]="datatable.isActive">
          {{savingsDatatable.registeredTableName}}
        </a>
      </ng-container>
@@ -32,6 +32,9 @@ export class FixedDepositAccountViewComponent implements OnInit {
  savingsDatatables: any;
  /** Button Configurations */
  buttonConfig: FixedDepositsButtonsConfiguration;
+  /** Entity Type */
+  entityType: string;
+  currencyCode: string;

  /**
   * Fetches fixed deposits account data from `resolve`
@@ -49,7 +52,15 @@ export class FixedDepositAccountViewComponent implements OnInit {
    this.route.data.subscribe((data: { fixedDepositsAccountData: any, savingsDatatables: any  }) => {
      this.fixedDepositsAccountData = data.fixedDepositsAccountData;
      this.savingsDatatables = data.savingsDatatables;
+      this.currencyCode = this.fixedDepositsAccountData.currency.code;
    });
+    if (this.router.url.includes('clients')) {
+      this.entityType = 'Client';
+    } else if (this.router.url.includes('groups')) {
+      this.entityType = 'Group';
+    } else if (this.router.url.includes('centers')) {
+      this.entityType = 'Center';
+    }
  }

  ngOnInit() {
@@ -97,6 +108,7 @@ export class FixedDepositAccountViewComponent implements OnInit {
      case 'Activate':
      case 'Close':
      case 'Undo Approval':
+      case 'Undo Activation':
      case 'Add Charge':
      case 'Withdraw By Client':
      case 'Premature Close':
@@ -34,6 +34,10 @@ export class FixedDepositsButtonsConfiguration {
          {
            name: 'Calculate Interest',
            icon: 'fa fa-table'
+          },
+          {
+            name: 'Undo Activation',
+            icon: 'fa fa-undo'
          }
        ];
        break;
@@ -1,4 +1,4 @@
-<div class="tab-container mat-typography">
+<div class="tab-container mat-typography" *ngIf="showTransactionsData">

  <div fxLayoutAlign="start">
    <div class="m-b-20">
@@ -8,36 +8,47 @@

  <div class="mat-elevation-z1 m-b-25">

-    <table mat-table [dataSource]="dataSource" >
+    <table mat-table [dataSource]="dataSource">

      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> ID </th>
-        <td mat-cell *matCellDef="let transaction"> {{ transaction.id }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="transactionColor(transaction)"> {{ transaction.id }} </td>
      </ng-container>

      <ng-container matColumnDef="transactionDate">
        <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
-        <td mat-cell *matCellDef="let transaction"> {{ transaction.date  | dateFormat }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="transactionColor(transaction)"> {{ transaction.date | dateFormat }} </td>
      </ng-container>

      <ng-container matColumnDef="transactionType">
        <th mat-header-cell *matHeaderCellDef> Transaction Type </th>
-        <td mat-cell *matCellDef="let transaction"> {{ transaction.transactionType.value  }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="transactionColor(transaction)"> {{ transaction.transactionType.value }} </td>
      </ng-container>

      <ng-container matColumnDef="debit">
        <th mat-header-cell *matHeaderCellDef> Debit </th>
-        <td mat-cell *matCellDef="let transaction"> {{ isDebit(transaction.transactionType) ? transaction.amount : 'N/A'}} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="transactionColor(transaction)"> {{ isDebit(transaction.transactionType) ? transaction.amount : 'N/A'}} </td>
      </ng-container>

      <ng-container matColumnDef="credit">
        <th mat-header-cell *matHeaderCellDef> Credit </th>
-        <td mat-cell *matCellDef="let transaction"> {{ !isDebit(transaction.transactionType) ? transaction.amount : 'N/A' }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="transactionColor(transaction)"> {{ !isDebit(transaction.transactionType) ? transaction.amount : 'N/A' }} </td>
      </ng-container>

      <ng-container matColumnDef="balance">
        <th mat-header-cell *matHeaderCellDef> Balance </th>
-        <td mat-cell *matCellDef="let transaction"> {{ transaction.runningBalance }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="transactionColor(transaction)"> {{ transaction.runningBalance | number }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <td mat-cell *matCellDef="let transaction">
+          <button class="account-action-button" mat-raised-button color="primary" matTooltip="View Journal Entries"
+          matTooltipPosition="left" (click)="routeEdit($event)"
+          [routerLink]="['/','journal-entry', 'view', 'S'+transaction.id ]">
+          <i class="fa fa-arrow-circle-right"></i>
+        </button>
+        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
@@ -1,3 +1,5 @@
+@import "assets/styles/helper";
+
 .tab-container {
  padding: 1%;
  margin: 1%;
@@ -6,8 +8,40 @@
  }
  table {
    width: 100%;
+    color: $black;
+    .account-action-button{
+      min-width: 26px;
+      padding: 0 0 3px 0;
+      margin: 0 2%;
+      line-height: 25px;
+    }
    .select-row:hover {
      cursor: pointer;
    }
+    .strike {
+      text-decoration: line-through;
+      color: $status-active-overdue;
+    }
+    .linked {
+      color: $status-approved;
+    }
+    .accrual {
+      color: $msg-default;
+    }
  }
 }
+
+.active {
+  background-color: $status-active;
+  height: 4px;
+}
+
+.linked {
+  background-color: $status-approved;
+  height: 4px;
+}
+
+.undo {
+  background-color: $status-active-overdue;
+  height: 4px;
+}
@@ -14,11 +14,12 @@ import { ActivatedRoute, Router } from '@angular/router';
 export class TransactionsTabComponent implements OnInit {

  /** Fixed Deposits Account Status */
-  status: any;
+  status: string;
+  showTransactionsData = false;
  /** Transactions Data */
  transactionsData: any;
  /** Columns to be displayed in transactions table. */
-  displayedColumns: string[] = ['id', 'transactionDate', 'transactionType', 'debit', 'credit', 'balance'];
+  displayedColumns: string[] = ['id', 'transactionDate', 'transactionType', 'debit', 'credit', 'balance', 'actions'];
  /** Data source for transactions table. */
  dataSource: MatTableDataSource<any>;

@@ -32,6 +33,7 @@ export class TransactionsTabComponent implements OnInit {
    this.route.parent.data.subscribe((data: { fixedDepositsAccountData: any }) => {
      this.transactionsData = data.fixedDepositsAccountData.transactions;
      this.status = data.fixedDepositsAccountData.status.value;
+      this.showTransactionsData = (this.status === 'Active');
    });
  }

@@ -60,4 +62,26 @@ export class TransactionsTabComponent implements OnInit {
    }
  }

+  transactionColor(transaction: any): string {
+    if (transaction.reversed) {
+      return 'strike';
+    }
+    if (this.isAccrual(transaction.transactionType)) {
+      return 'accrual';
+    }
+    return '';
+  }
+
+  private isAccrual(transactionType: any): boolean  {
+    return (transactionType.accrual);
+  }
+
+  /**
+   * Stops the propagation to view pages.
+   * @param $event Mouse Event
+   */
+  routeEdit($event: MouseEvent) {
+    $event.stopPropagation();
+  }
+
 }
@@ -5,6 +5,8 @@
    <mat-card-content>

      <div fxLayout="row wrap" class="content">
+        <div fxFlex="100%" [ngClass]="transactionColor()">
+        </div>

        <div fxFlex="50%" class="mat-body-strong">
          Transaction Id
@@ -13,7 +15,7 @@
        <div fxFlex="50%">
          {{ transactionData.id }}
        </div>
-        
+
        <div fxFlex="50%" class="mat-body-strong">
          Type
        </div>
@@ -27,7 +29,7 @@
        </div>

        <div fxFlex="50%">
-          {{ transactionData.date  | dateFormat }}
+          {{ transactionData.date | dateFormat }}
        </div>

        <div fxFlex="50%" class="mat-body-strong">
@@ -43,7 +45,7 @@
        </div>

        <div fxFlex="50%">
-          {{ transactionData.amount }}
+          {{ transactionData.amount | currency:transactionData.currency.code:'symbol-narrow':'1.2-2' }}
        </div>

        <div fxFlex="50%" *ngIf="transactionData.note" class="mat-body-strong">
@@ -59,47 +61,47 @@
          <div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%" class="mat-body-strong">
            Payment Type
          </div>
-  
+
          <div *ngIf="transactionData.paymentDetailData.paymentType" fxFlex="50%">
            {{ transactionData.paymentDetailData.paymentType.name }}
          </div>
-          
+
          <div *ngIf="transactionData.paymentDetailData.accountNumber" fxFlex="50%" class="mat-body-strong">
            Account No.
          </div>
-  
+
          <div *ngIf="transactionData.paymentDetailData.accountNumber" fxFlex="50%">
            {{ transactionData.paymentDetailData.accountNumber }}
          </div>
-  
+
          <div *ngIf="transactionData.paymentDetailData.checkNumber" fxFlex="50%" class="mat-body-strong">
            Cheque Number
          </div>
-  
+
          <div *ngIf="transactionData.paymentDetailData.checkNumber" fxFlex="50%">
            {{ transactionData.paymentDetailData.checkNumber }}
          </div>
-  
+
          <div *ngIf="transactionData.paymentDetailData.routingCode" fxFlex="50%" class="mat-body-strong">
            Routing Code
          </div>
-  
+
          <div *ngIf="transactionData.paymentDetailData.routingCode" fxFlex="50%">
            {{ transactionData.paymentDetailData.routingCode }}
          </div>
-  
+
          <div *ngIf="transactionData.paymentDetailData.receiptNumber" fxFlex="50%" class="mat-body-strong">
            Receipt No.
          </div>
-  
+
          <div *ngIf="transactionData.paymentDetailData.receiptNumber" fxFlex="50%">
            {{ transactionData.paymentDetailData.receiptNumber }}
          </div>
-  
+
          <div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%" class="mat-body-strong">
            Bank No.
          </div>
-  
+
          <div *ngIf="transactionData.paymentDetailData.bankNumber" fxFlex="50%">
            {{ transactionData.paymentDetailData.bankNumber }}
          </div>
@@ -108,6 +110,9 @@

      </div>

+      <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
+        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">{{ 'Back' | translate }}</button>
+      </div>
    </mat-card-content>

  </mat-card>
@@ -1,6 +1,8 @@
+@import "assets/styles/helper";
+
 .container {
  max-width: 37rem;
-  
+
  .content {
    div {
      margin: 1rem 0;
@@ -8,3 +10,26 @@
    }
  }
 }
+
+.transaction-buttons {
+  margin-top: 3%;
+}
+
+.transaction-relation {
+  background-color: $mid-grey;
+}
+
+.active {
+  background-color: $status-active;
+  height: 4px;
+}
+
+.linked {
+  background-color: $status-approved;
+  height: 4px;
+}
+
+.undo {
+  background-color: $status-active-overdue;
+  height: 4px;
+}
@@ -28,4 +28,11 @@ export class ViewTransactionComponent {
    });
  }

+  transactionColor(): string {
+    if (this.transactionData.manuallyReversed) {
+      return 'undo';
+    }
+    return 'active';
+  }
+
 }