cbsnexora/src/app/system/system.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="sys-container">
  <!-- Page header -->
  <div class="sys-header">
    <div class="sys-header__icon">
      <i class="fas fa-cogs"></i>
    </div>
    <div>
      <h1 class="sys-header__title">{{ 'labels.heading.System' | translate }}</h1>
      <p class="sys-header__sub">Manage data tables, codes, roles, configurations and system settings</p>
    </div>
  </div>

  <!-- Card Grid -->
  <div class="sys-grid">
    <!-- Manage Data Tables -->
    <div #datatables>
      <a class="sys-card" [routerLink]="['data-tables']">
        <div class="sys-card__icon sys-card__icon--blue">
          <i class="fas fa-table"></i>
        </div>
        <div class="sys-card__body">
          <h3 class="sys-card__title">{{ 'labels.heading.Manage Data tables' | translate }}</h3>
          <p class="sys-card__desc">{{ 'labels.text.Add new extra fields to any entity' | translate }}</p>
        </div>
        <i class="fas fa-chevron-right sys-card__arrow"></i>
      </a>
    </div>

    <!-- Audit Trails -->
    <a class="sys-card" [routerLink]="['audit-trails']">
      <div class="sys-card__icon sys-card__icon--slate">
        <i class="fas fa-money-check"></i>
      </div>
      <div class="sys-card__body">
        <h3 class="sys-card__title">{{ 'labels.heading.Audit Trails' | translate }}</h3>
        <p class="sys-card__desc">{{ 'labels.text.Audit logs of all the activities' | translate }}</p>
      </div>
      <i class="fas fa-chevron-right sys-card__arrow"></i>
    </a>

    <!-- Manage Codes -->
    <div #codes>
      <a class="sys-card" [routerLink]="['codes']">
        <div class="sys-card__icon sys-card__icon--purple">
          <i class="fas fa-list-ul"></i>
        </div>
        <div class="sys-card__body">
          <h3 class="sys-card__title">{{ 'labels.heading.Manage Codes' | translate }}</h3>
          <p class="sys-card__desc">{{ 'labels.text.Codes are used to define drop down values' | translate }}</p>
        </div>
        <i class="fas fa-chevron-right sys-card__arrow"></i>
      </a>
    </div>

    <!-- Manage Reports -->
    <div #manageReports>
      <a class="sys-card" [routerLink]="['reports']">
        <div class="sys-card__icon sys-card__icon--indigo">
          <i class="fas fa-file-alt"></i>
        </div>
        <div class="sys-card__body">
          <h3 class="sys-card__title">{{ 'labels.heading.Manage Reports' | translate }}</h3>
          <p class="sys-card__desc">{{ 'labels.text.Add new report and classify reports' | translate }}</p>
        </div>
        <i class="fas fa-chevron-right sys-card__arrow"></i>
      </a>
    </div>

    <!-- Manage Roles and Permissions -->
    <div #rolesandpermission>
      <a class="sys-card" [routerLink]="['roles-and-permissions']">
        <div class="sys-card__icon sys-card__icon--amber">
          <i class="fas fa-key"></i>
        </div>
        <div class="sys-card__body">
          <h3 class="sys-card__title">{{ 'labels.heading.Manage Roles and Permissions' | translate }}</h3>
          <p class="sys-card__desc">
            {{ 'labels.text.Define or modify roles and associated permissions' | translate }}
          </p>
        </div>
        <i class="fas fa-chevron-right sys-card__arrow"></i>
      </a>
    </div>

    <!-- Manage Jobs -->
    <a class="sys-card" [routerLink]="['manage-jobs']">
      <div class="sys-card__icon sys-card__icon--teal">
        <i class="fas fa-clock"></i>
      </div>
      <div class="sys-card__body">
        <h3 class="sys-card__title">{{ 'labels.heading.Manage Jobs' | translate }}</h3>
        <p class="sys-card__desc">{{ 'labels.text.Manage Schedule and Workflow jobs, modify jobs' | translate }}</p>
      </div>
      <i class="fas fa-chevron-right sys-card__arrow"></i>
    </a>

    <!-- Configure Maker Checker Tasks -->
    <div #makerCheckerTable>
      <a class="sys-card" [routerLink]="['configure-mc-tasks']">
        <div class="sys-card__icon sys-card__icon--green">
          <i class="fas fa-sitemap"></i>
        </div>
        <div class="sys-card__body">
          <h3 class="sys-card__title">{{ 'labels.heading.Configure Maker Checker Tasks' | translate }}</h3>
          <p class="sys-card__desc">{{ 'labels.text.Define or modify Maker Checker tasks' | translate }}</p>
        </div>
        <i class="fas fa-chevron-right sys-card__arrow"></i>
      </a>
    </div>

    <!-- Configurations -->
    <div #configurations>
      <a class="sys-card" [routerLink]="['configurations']">
        <div class="sys-card__icon sys-card__icon--orange">
          <i class="fas fa-cogs"></i>
        </div>
        <div class="sys-card__body">
          <h3 class="sys-card__title">{{ 'labels.heading.Configurations' | translate }}</h3>
          <p class="sys-card__desc">{{ 'labels.text.Global configurations, Cache and Business Date' | translate }}</p>
        </div>
        <i class="fas fa-chevron-right sys-card__arrow"></i>
      </a>
    </div>

    <!-- Manage Hooks -->
    <a class="sys-card" [routerLink]="['hooks']">
      <div class="sys-card__icon sys-card__icon--cyan">
        <i class="fas fa-anchor"></i>
      </div>
      <div class="sys-card__body">
        <h3 class="sys-card__title">{{ 'labels.heading.Manage Hooks' | translate }}</h3>
        <p class="sys-card__desc">{{ 'labels.text.Define Hooks' | translate }}</p>
      </div>
      <i class="fas fa-chevron-right sys-card__arrow"></i>
    </a>

    <!-- Account Number Preferences -->
    <a class="sys-card" [routerLink]="['account-number-preferences']">
      <div class="sys-card__icon sys-card__icon--emerald">
        <i class="fas fa-key"></i>
      </div>
      <div class="sys-card__body">
        <h3 class="sys-card__title">{{ 'labels.heading.Account Number Preferences' | translate }}</h3>
        <p class="sys-card__desc">
          {{ 'labels.text.Preferences for generating account numbers for client' | translate }}
        </p>
      </div>
      <i class="fas fa-chevron-right sys-card__arrow"></i>
    </a>

    <!-- Entity to Entity Mapping -->
    <a class="sys-card" [routerLink]="['entity-to-entity-mapping']">
      <div class="sys-card__icon sys-card__icon--rose">
        <i class="fas fa-road"></i>
      </div>
      <div class="sys-card__body">
        <h3 class="sys-card__title">{{ 'labels.heading.Entity to Entity Mapping' | translate }}</h3>
        <p class="sys-card__desc">{{ 'labels.text.Define or modify entity to entity mappings' | translate }}</p>
      </div>
      <i class="fas fa-chevron-right sys-card__arrow"></i>
    </a>

    <!-- External Services -->
    <a class="sys-card" [routerLink]="['external-services']">
      <div class="sys-card__icon sys-card__icon--indigo">
        <i class="fas fa-cog"></i>
      </div>
      <div class="sys-card__body">
        <h3 class="sys-card__title">{{ 'labels.heading.External Services' | translate }}</h3>
        <p class="sys-card__desc">{{ 'labels.text.External Services Configuration' | translate }}</p>
      </div>
      <i class="fas fa-chevron-right sys-card__arrow"></i>
    </a>

    <!-- Manage Surveys (disabled) -->
    <div class="sys-card sys-card--disabled">
      <div class="sys-card__icon sys-card__icon--slate">
        <i class="fas fa-file-alt"></i>
      </div>
      <div class="sys-card__body">
        <h3 class="sys-card__title">{{ 'labels.heading.Manage Surveys' | translate }}</h3>
        <p class="sys-card__desc">{{ 'labels.text.Manage Surveys' | translate }}</p>
      </div>
      <i class="fas fa-chevron-right sys-card__arrow"></i>
    </div>

    <!-- About Us -->
    <a class="sys-card" [routerLink]="['about-us']">
      <div class="sys-card__icon sys-card__icon--blue">
        <i class="fas fa-users"></i>
      </div>
      <div class="sys-card__body">
        <h3 class="sys-card__title">{{ 'labels.heading.About Us' | translate }}</h3>
        <p class="sys-card__desc">{{ 'labels.text.Learn about the Mifos Initiative and our mission' | translate }}</p>
      </div>
      <i class="fas fa-chevron-right sys-card__arrow"></i>
    </a>

    <!-- Manage External Events -->
    <a class="sys-card" [routerLink]="['external-events']" *mifosxHasPermission="'READ_EXTERNAL_EVENT_CONFIGURATION'">
      <div class="sys-card__icon sys-card__icon--purple">
        <i class="fas fa-anchor"></i>
      </div>
      <div class="sys-card__body">
        <h3 class="sys-card__title">{{ 'labels.heading.Manage External Events' | translate }}</h3>
        <p class="sys-card__desc">
          {{ 'labels.text.External Events configuration, to enable or disable' | translate }}
        </p>
      </div>
      <i class="fas fa-chevron-right sys-card__arrow"></i>
    </a>

    <!-- System Information -->
    <a class="sys-card" [routerLink]="['system-information']">
      <div class="sys-card__icon sys-card__icon--teal">
        <i class="fas fa-info-circle"></i>
      </div>
      <div class="sys-card__body">
        <h3 class="sys-card__title">{{ 'labels.heading.System Information' | translate }}</h3>
        <p class="sys-card__desc">
          {{ 'labels.text.View system version, server and licensing information' | translate }}
        </p>
      </div>
      <i class="fas fa-chevron-right sys-card__arrow"></i>
    </a>
  </div>
</div>

<!-- Popover Templates (kept for configuration wizard compatibility) -->
<ng-template #templateDatatables let-popover="popover">
  <h2>{{ 'labels.heading.Manage Data Tables' | translate }}</h2>
  <p class="mw300">{{ 'labels.text.Mifos X data-tables allow the user to add custom fields' | 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(); previousStepDatatables()">
      {{ 'labels.buttons.Back' | translate }}
    </button>
    <button mat-raised-button color="primary" (click)="popover.close(); nextStepDatatables()">
      {{ 'labels.buttons.Next' | translate }}
    </button>
  </div>
</ng-template>

<ng-template #templateCodes let-popover="popover">
  <h2>{{ 'labels.heading.Manage Codes' | translate }}</h2>
  <p class="mw300">{{ 'labels.text.Selection you can create new drop-downs and edit' | 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(); previousStepCodes()">
      {{ 'labels.buttons.Back' | translate }}
    </button>
    <button mat-raised-button color="primary" (click)="popover.close(); nextStepCodes()">
      {{ 'labels.buttons.Next' | translate }}
    </button>
  </div>
</ng-template>

<ng-template #templateRolesandPermission let-popover="popover">
  <h2>{{ 'labels.heading.Manage Roles and Permissions' | translate }}</h2>
  <p class="mw300">{{ 'labels.text.Roles and Permissions allow the administrator to control access' | 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(); previousStepRolesandPermission()">
      {{ 'labels.buttons.Back' | translate }}
    </button>
    <button mat-raised-button color="primary" (click)="popover.close(); nextStepRolesandPermission()">
      {{ 'labels.buttons.Next' | translate }}
    </button>
  </div>
</ng-template>

<ng-template #templateMakerCheckerTable let-popover="popover">
  <h2>{{ 'labels.heading.Configure Maker-Checker Tasks' | translate }}</h2>
  <p class="mw300">{{ 'labels.text."Maker-Checker" principle requires every tasks' | 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(); previousStepMakerCheckerTable()">
      {{ 'labels.buttons.Back' | translate }}
    </button>
    <button mat-raised-button color="primary" (click)="popover.close(); nextStepMakerCheckerTable()">
      {{ 'labels.buttons.Next' | translate }}
    </button>
  </div>
</ng-template>

<ng-template #templateConfigurations let-popover="popover">
  <h2>{{ 'labels.heading.Configuration' | translate }}</h2>
  <p class="mw300">{{ 'labels.text.Configurations page allows you to further customize' | 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(); previousStepConfigurations()">
      {{ 'labels.buttons.Back' | translate }}
    </button>
    <button mat-raised-button color="primary" (click)="popover.close(); nextStepConfigurations()">
      {{ 'labels.buttons.Next' | translate }}
    </button>
  </div>
</ng-template>

<ng-template #templateSchedulerJobs let-popover="popover">
  <h2>{{ 'labels.heading.Manage Scheduler Jobs' | translate }}</h2>
  <p class="mw300">{{ 'labels.text.Scheduler Jobs can set batch jobs' | 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(); previousStepSchedulerJobs()">
      {{ 'labels.buttons.Back' | translate }}
    </button>
    <button mat-raised-button color="primary" (click)="popover.close(); nextStepSchedulerJobs()">
      {{ 'labels.buttons.Next' | translate }}
    </button>
  </div>
</ng-template>

<ng-template #templateManageReports let-popover="popover">
  <h2>{{ 'labels.heading.Manage Reports' | translate }}</h2>
  <p class="mw300">{{ 'labels.text.Add customized reports and edit core reports' | 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(); previousStepManageReports()">
      {{ 'labels.buttons.Back' | translate }}
    </button>
    <button mat-raised-button color="primary" (click)="popover.close(); nextStepManageReports()">
      {{ 'labels.buttons.Next' | translate }}
    </button>
  </div>
</ng-template>