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 -->
    <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 -->
    <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>

    <!-- Closing Entries -->
    <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 -->
    <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 -->
    <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 -->
    <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>