cbsnexora/src/app/accounting/accounting.component.html

<!--
  Copyright since 2025 Mifos Initiative

  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->

<div class="acc-container">
  <!-- Header -->
  <div class="acc-header">
    <div class="acc-header__left">
      <div class="acc-logomark"><span></span><span></span><span></span><span></span></div>
      <h2 class="acc-header__title">{{ 'labels.menus.Accounting' | translate }}</h2>
    </div>
  </div>

  <!-- Cards Grid -->
  <div class="acc-grid">
    <!-- Frequent Postings — hidden while disabled, see disabled-features.ts -->
    @if (!disabledFeatures.frequentPostings) {
      <a
        class="acc-card"
        [routerLink]="['journal-entries/frequent-postings']"
        *mifosxHasPermission="'CREATE_JOURNALENTRY'"
        #frequentPostings
      >
        <div class="acc-card__icon blue"><i class="fas fa-sync-alt"></i></div>
        <div class="acc-card__info">
          <span class="acc-card__title">{{ 'labels.heading.Frequent Postings' | translate }}</span>
          <span class="acc-card__desc">{{ 'labels.text.These are predefined postings' | translate }}</span>
        </div>
      </a>
    }

    <!-- Create Journal Entries — hidden while disabled, see disabled-features.ts -->
    @if (!disabledFeatures.createJournalEntries) {
      <a
        class="acc-card"
        [routerLink]="['journal-entries/create']"
        *mifosxHasPermission="'CREATE_JOURNALENTRY'"
        #createJournalEntries
      >
        <div class="acc-card__icon green"><i class="fas fa-plus-circle"></i></div>
        <div class="acc-card__info">
          <span class="acc-card__title">{{ 'labels.heading.Create Journal Entries' | translate }}</span>
          <span class="acc-card__desc">{{
            'labels.text.Manual journal entry transactions recorded in a journal' | translate
          }}</span>
        </div>
      </a>
    }

    <!-- Search Journal Entries -->
    <a class="acc-card" [routerLink]="['journal-entries']" *mifosxHasPermission="'READ_JOURNALENTRY'">
      <div class="acc-card__icon purple"><i class="fas fa-search"></i></div>
      <div class="acc-card__info">
        <span class="acc-card__title">{{ 'labels.heading.Search Journal Entries' | translate }}</span>
        <span class="acc-card__desc">{{ 'labels.text.Advanced search option for journal entries' | translate }}</span>
      </div>
    </a>

    <!-- Accounts Linked to Financial Activities -->
    <a
      class="acc-card"
      [routerLink]="['financial-activity-mappings']"
      *mifosxHasPermission="'READ_FINANCIALACTIVITYACCOUNT'"
      #accountsLinked
    >
      <div class="acc-card__icon teal"><i class="fas fa-link"></i></div>
      <div class="acc-card__info">
        <span class="acc-card__title">{{ 'labels.heading.Accounts Linked to Financial Activities' | translate }}</span>
        <span class="acc-card__desc">{{
          'labels.text.List of Financial Activities and GL Account Mappings' | translate
        }}</span>
      </div>
    </a>

    <!-- Migrate Opening Balances -->
    <a
      class="acc-card"
      [routerLink]="['migrate-opening-balances']"
      *mifosxHasPermission="'READ_JOURNALENTRY'"
      #migrateOpeningBalances
    >
      <div class="acc-card__icon amber"><i class="fas fa-hand-holding-usd"></i></div>
      <div class="acc-card__info">
        <span class="acc-card__title">{{ 'labels.heading.Migrate Opening Balances (Office-wise)' | translate }}</span>
        <span class="acc-card__desc">{{
          'labels.text.Set or update office-level opening balances for GL accounts' | translate
        }}</span>
      </div>
    </a>

    <!-- Migrate Cash Denomination -->
    <a
      class="acc-card"
      [routerLink]="['migrate-cash-denomination']"
      *mifosxHasPermission="'READ_JOURNALENTRY'"
      #migrateCashDenomination
    >
      <div class="acc-card__icon amber"><i class="fas fa-coins"></i></div>
      <div class="acc-card__info">
        <span class="acc-card__title">Migrate Cash Denomination</span>
        <span class="acc-card__desc">
          Count the vault opening cash into notes and coins, and open the first business day
        </span>
      </div>
    </a>

    <!-- Chart of Accounts -->
    <a class="acc-card" [routerLink]="['chart-of-accounts']" *mifosxHasPermission="'READ_GLACCOUNT'" #chartofAccounts>
      <div class="acc-card__icon blue"><i class="fas fa-sitemap"></i></div>
      <div class="acc-card__info">
        <span class="acc-card__title">{{ 'labels.heading.Chart of Accounts' | translate }}</span>
        <span class="acc-card__desc">{{ 'labels.text.List of accounts used by the organization' | translate }}</span>
      </div>
    </a>

    <!-- Balance Sheet -->
    <a class="acc-card" [routerLink]="['balance-sheet']" *mifosxHasPermission="'READ_GLACCOUNT'" #balanceSheet>
      <div class="acc-card__icon teal"><i class="fas fa-balance-scale"></i></div>
      <div class="acc-card__info">
        <span class="acc-card__title">Balance Sheet</span>
        <span class="acc-card__desc">Header/Detail balances as on any date</span>
      </div>
    </a>

    <!-- Closing Entries — hidden while disabled, see disabled-features.ts -->
    @if (!disabledFeatures.closingEntries) {
      <a class="acc-card" [routerLink]="['closing-entries']" *mifosxHasPermission="'READ_GLCLOSURE'" #closingEntries>
        <div class="acc-card__icon red"><i class="fas fa-archive"></i></div>
        <div class="acc-card__info">
          <span class="acc-card__title">{{ 'labels.heading.Closing Entries' | translate }}</span>
          <span class="acc-card__desc">{{
            'labels.text.Journal entries made at the end of accounting period' | translate
          }}</span>
        </div>
      </a>
    }

    <!-- Accounting Rules — hidden while disabled, see disabled-features.ts -->
    @if (!disabledFeatures.accountingRules) {
      <a class="acc-card" [routerLink]="['accounting-rules']" *mifosxHasPermission="'READ_ACCOUNTINGRULE'">
        <div class="acc-card__icon purple"><i class="fas fa-list-ul"></i></div>
        <div class="acc-card__info">
          <span class="acc-card__title">{{ 'labels.heading.Accounting Rules' | translate }}</span>
          <span class="acc-card__desc">{{ 'labels.text.List of all accounting rules' | translate }}</span>
        </div>
      </a>
    }

    <!-- Accruals — hidden while disabled, see disabled-features.ts -->
    @if (!disabledFeatures.accruals) {
      <a
        class="acc-card"
        [routerLink]="['periodic-accruals']"
        *mifosxHasPermission="'EXECUTE_PERIODICACCRUALACCOUNTING'"
      >
        <div class="acc-card__icon green"><i class="fas fa-calendar-check"></i></div>
        <div class="acc-card__info">
          <span class="acc-card__title">{{ 'labels.heading.Accruals' | translate }}</span>
          <span class="acc-card__desc">{{ 'labels.text.Accrues income, expenses and liabilities' | translate }}</span>
        </div>
      </a>
    }

    <!-- Provisioning Entries — hidden while disabled, see disabled-features.ts -->
    @if (!disabledFeatures.provisioningEntries) {
      <a class="acc-card" [routerLink]="['provisioning-entries']" *mifosxHasPermission="'VIEW_PROVISIONING_ENTRIES'">
        <div class="acc-card__icon amber"><i class="fas fa-cogs"></i></div>
        <div class="acc-card__info">
          <span class="acc-card__title">{{ 'labels.heading.Provisioning Entries' | translate }}</span>
          <span class="acc-card__desc">{{ 'labels.text.Create provisioning entries' | translate }}</span>
        </div>
      </a>
    }
  </div>
</div>

<!-- Config Wizard Templates (keep as-is) -->
<ng-template #templateChartofAccounts let-popover="popover">
  <h2>{{ 'labels.heading.Chart of Accounts' | translate }}</h2>
  <p class="mw300">{{ 'labels.text.The Chart of Accounts - General Ledger Setup' | translate }}</p>
  <div class="layout-row align-end gap-2px responsive-column">
    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
      {{ 'labels.buttons.Close' | translate }}
    </button>
    <button mat-raised-button color="primary" (click)="popover.close(); previousStepChartofAccounts()">
      {{ 'labels.buttons.Back' | translate }}
    </button>
    <button mat-raised-button color="primary" (click)="popover.close(); nextStepChartofAccounts()">
      {{ 'labels.buttons.Next' | translate }}
    </button>
  </div>
</ng-template>

<ng-template #templateAccountsLinked let-popover="popover">
  <h2>{{ 'labels.heading.Accounts Linked to Financial Activities' | translate }}</h2>
  <p class="mw400">{{ 'labels.text.Accounts linked to Financial Activities' | translate }}</p>
  <div class="layout-row align-end gap-2px responsive-column">
    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
      {{ 'labels.buttons.Close' | translate }}
    </button>
    <button mat-raised-button color="primary" (click)="popover.close(); previousStepAccountsLinked()">
      {{ 'labels.buttons.Back' | translate }}
    </button>
    <button mat-raised-button color="primary" (click)="popover.close(); nextStepAccountsLinked()">
      {{ 'labels.buttons.Next' | translate }}
    </button>
  </div>
</ng-template>

<ng-template #templateMigrateOpeningBalances let-popover="popover">
  <h2>{{ 'labels.heading.Migrate Opening Balances (Office-wise)' | translate }}</h2>
  <p class="mw400">{{ 'labels.text.GLAccount Balances Application' | translate }}</p>
  <div class="layout-row align-end gap-2px responsive-column">
    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
      {{ 'labels.buttons.Close' | translate }}
    </button>
    <button mat-raised-button color="primary" (click)="popover.close(); previousStepMigrateOpeningBalances()">
      {{ 'labels.buttons.Back' | translate }}
    </button>
    <button mat-raised-button color="primary" (click)="popover.close(); nextStepMigrateOpeningBalances()">
      {{ 'labels.buttons.Next' | translate }}
    </button>
  </div>
</ng-template>

<ng-template #templateClosingEntries let-popover="popover">
  <h2>{{ 'labels.heading.Closing Entries' | translate }}</h2>
  <p class="mw300">{{ 'labels.text.Accounting to journal entries' | translate }}</p>
  <div class="layout-row align-end gap-2px responsive-column">
    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
      {{ 'labels.buttons.Close' | translate }}
    </button>
    <button mat-raised-button color="primary" (click)="popover.close(); previousStepClosingEntries()">
      {{ 'labels.buttons.Back' | translate }}
    </button>
    <button mat-raised-button color="primary" (click)="popover.close(); nextStepClosingEntries()">
      {{ 'labels.buttons.Next' | translate }}
    </button>
  </div>
</ng-template>

<ng-template #templateCreateJournalEntries let-popover="popover">
  <h2>{{ 'labels.heading.Create Journal Entries' | translate }}</h2>
  <p class="mw300">{{ 'labels.text.Journal Entries Transactions' | translate }}</p>
  <div class="layout-row align-end gap-2px responsive-column">
    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
      {{ 'labels.buttons.Close' | translate }}
    </button>
    <button mat-raised-button color="primary" (click)="popover.close(); previousStepCreateJournalEntries()">
      {{ 'labels.buttons.Back' | translate }}
    </button>
    <button mat-raised-button color="primary" (click)="popover.close(); nextStepCreateJournalEntries()">
      {{ 'labels.buttons.Next' | translate }}
    </button>
  </div>
</ng-template>