WEB-635 feat: add about us page (#3210)

improve

src/app/system/about-us/about-us.component.html

@@ -0,0 +1,68 @@
+<!--
+  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="container">
+  <mat-card>
+    <div class="about-us-section">
+      <h2>{{ 'labels.heading.About Us' | translate }}</h2>
+
+      <p [innerHTML]="'labels.aboutUs.Introduction' | translate"></p>
+      <p [innerHTML]="'labels.aboutUs.Platform Description' | translate"></p>
+
+      <h3>{{ 'labels.heading.Our Mission' | translate }}</h3>
+      <p>{{ 'labels.aboutUs.Mission' | translate }}</p>
+
+      <h3>{{ 'labels.heading.Our Vision' | translate }}</h3>
+      <p>{{ 'labels.aboutUs.Vision' | translate }}</p>
+
+      <h3>{{ 'labels.heading.Why Open Source' | translate }}</h3>
+      <p>{{ 'labels.aboutUs.Why Open Source' | translate }}</p>
+
+      <ul class="values-list">
+        <li>
+          <strong>{{ 'labels.aboutUs.Transparent' | translate }}:</strong>
+          {{ 'labels.aboutUs.Transparent Description' | translate }}
+        </li>
+        <li>
+          <strong>{{ 'labels.aboutUs.Affordable' | translate }}:</strong>
+          {{ 'labels.aboutUs.Affordable Description' | translate }}
+        </li>
+        <li>
+          <strong>{{ 'labels.aboutUs.Innovative' | translate }}:</strong>
+          {{ 'labels.aboutUs.Innovative Description' | translate }}
+        </li>
+        <li>
+          <strong>{{ 'labels.aboutUs.Secure' | translate }}:</strong>
+          {{ 'labels.aboutUs.Secure Description' | translate }}
+        </li>
+      </ul>
+
+      <h3>{{ 'labels.heading.The Ecosystem' | translate }}</h3>
+      <p>{{ 'labels.aboutUs.Ecosystem Introduction' | translate }}</p>
+
+      <ul class="ecosystem-list">
+        <li>
+          <strong>{{ 'labels.aboutUs.The Mifos X Platform' | translate }}:</strong>
+          {{ 'labels.aboutUs.Platform Role' | translate }}
+        </li>
+        <li>
+          <strong>{{ 'labels.aboutUs.The Community' | translate }}:</strong>
+          {{ 'labels.aboutUs.Community Role' | translate }}
+        </li>
+        <li>
+          <strong>{{ 'labels.aboutUs.Certified Partners' | translate }}:</strong>
+          {{ 'labels.aboutUs.Partners Role' | translate }}
+        </li>
+        <li>
+          <strong>{{ 'labels.aboutUs.The Foundation' | translate }}:</strong>
+          {{ 'labels.aboutUs.Foundation Role' | translate }}
+        </li>
+      </ul>
+    </div>
+  </mat-card>
+</div>

src/app/system/about-us/about-us.component.scss

@@ -0,0 +1,77 @@
+/**
+ * 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/.
+ */
+
+.about-us-section {
+  padding: 16px 24px;
+
+  h2 {
+    color: #4caf50;
+    margin-top: 24px;
+    margin-bottom: 16px;
+    font-size: 1.5rem;
+    font-weight: 400;
+  }
+
+  h3 {
+    color: #4caf50;
+    margin-top: 20px;
+    margin-bottom: 12px;
+    font-size: 1.2rem;
+    font-weight: 500;
+  }
+
+  p {
+    line-height: 1.6;
+    margin-bottom: 12px;
+    color: var(--md-sys-color-on-surface-variant, #555);
+  }
+
+  // stylelint-disable-next-line selector-pseudo-element-no-unknown
+  ::ng-deep a {
+    color: #4caf50;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  ul {
+    padding-left: 24px;
+    margin-top: 12px;
+
+    li {
+      margin-bottom: 8px;
+      line-height: 1.5;
+      color: var(--md-sys-color-on-surface-variant, #555);
+    }
+  }
+}
+
+// Dark theme support
+:host-context(.dark-theme) {
+  .about-us-section {
+    h2,
+    h3 {
+      color: #66bb6a;
+    }
+
+    p {
+      color: rgb(255 255 255 / 70%);
+    }
+
+    // stylelint-disable-next-line selector-pseudo-element-no-unknown
+    ::ng-deep a {
+      color: #0098ff;
+    }
+
+    ul li {
+      color: rgb(255 255 255 / 70%);
+    }
+  }
+}

src/app/system/about-us/about-us.component.ts

@@ -0,0 +1,18 @@
+/**
+ * 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/.
+ */
+
+import { Component } from '@angular/core';
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+
+@Component({
+  selector: 'mifosx-about-us',
+  templateUrl: './about-us.component.html',
+  styleUrls: ['./about-us.component.scss'],
+  imports: [...STANDALONE_SHARED_IMPORTS]
+})
+export class AboutUsComponent {}

src/app/system/system-routing.module.ts

@@ -55,6 +55,7 @@ import { RolesAndPermissionsComponent } from './roles-and-permissions/roles-and-
 import { ViewRoleComponent } from './roles-and-permissions/view-role/view-role.component';
 import { SystemComponent } from './system.component';
 import { SystemInformationComponent } from './system-information/system-information.component';
+import { AboutUsComponent } from './about-us/about-us.component';
 
 /** Custom Resolvers */
 import { AccountNumberPreferencesResolver } from './account-number-preferences/account-number-preferences.resolver';
@@ -588,6 +589,11 @@ const routes: Routes = [
           component: SystemInformationComponent,
           data: { title: 'System Information', breadcrumb: 'System Information' }
         },
+        {
+          path: 'about-us',
+          component: AboutUsComponent,
+          data: { title: 'About Us', breadcrumb: 'About Us' }
+        },
         {
           path: 'audit-trails',
           data: { title: 'Audit Trails', breadcrumb: 'Audit Trails' },

src/app/system/system.component.html

@@ -568,6 +568,40 @@
               </div>
             </div>
           </mat-list-item>
+
+          <mat-list-item [routerLink]="['about-us']">
+            <div class="menu-list-item-content">
+              <div class="menu-left-section" [routerLink]="['about-us']">
+                <mat-icon matListIcon>
+                  <fa-icon icon="users" size="sm"></fa-icon>
+                </mat-icon>
+                <div matLine>
+                  {{ 'labels.heading.About Us' | translate }}
+                  @if (arrowBooleans[16]) {
+                    <p matLine [routerLink]="['about-us']" class="menu-explanation">
+                      {{ 'labels.text.Learn about the Mifos Initiative and our mission' | translate }}
+                    </p>
+                  }
+                </div>
+              </div>
+              <div class="menu-right-section">
+                @if (!arrowBooleans[16]) {
+                  <fa-icon
+                    (click)="arrowBooleansToggle(16); $event.stopPropagation()"
+                    icon="arrow-down"
+                    size="md"
+                  ></fa-icon>
+                }
+                @if (arrowBooleans[16]) {
+                  <fa-icon
+                    (click)="arrowBooleansToggle(16); $event.stopPropagation()"
+                    icon="arrow-up"
+                    size="md"
+                  ></fa-icon>
+                }
+              </div>
+            </div>
+          </mat-list-item>
         </mat-nav-list>
       </div>
     </div>

src/app/system/system.component.ts

@@ -67,9 +67,9 @@ export class SystemComponent implements AfterViewInit {
   @ViewChild('manageReports') manageReports: ElementRef<any>;
   /* Template for popover on manage reports */
   @ViewChild('templateManageReports') templateManageReports: TemplateRef<any>;
-  // Initialize an array of 15 boolean values, all set to false
+  // Initialize an array of 17 boolean values, all set to false
   isDisabled: boolean = true;
-  arrowBooleans: boolean[] = new Array(16).fill(false);
+  arrowBooleans: boolean[] = new Array(17).fill(false);
 
   /**
    * Popover function

src/app/system/system.module.ts

@@ -86,6 +86,7 @@ import { ErrorLogPopoverComponent } from './manage-jobs/scheduler-jobs/error-log
 import { RunSelectedJobsPopoverComponent } from './manage-jobs/scheduler-jobs/run-selected-jobs-popover/run-selected-jobs-popover.component';
 import { RunSelectedJobsTableComponent } from './manage-jobs/scheduler-jobs/run-selected-jobs-popover/run-selected-jobs-table/run-selected-jobs-table.component';
 import { SystemInformationComponent } from './system-information/system-information.component';
+import { AboutUsComponent } from './about-us/about-us.component';
 
 @NgModule({
   imports: [
@@ -161,7 +162,8 @@ import { SystemInformationComponent } from './system-information/system-informat
     ErrorLogPopoverComponent,
     RunSelectedJobsPopoverComponent,
     RunSelectedJobsTableComponent,
-    SystemInformationComponent
+    SystemInformationComponent,
+    AboutUsComponent
   ]
 })
 export class SystemModule {}

src/assets/translations/en-US.json

@@ -304,6 +304,30 @@
       "Adding External Software": "Considerations to factor in when <a href=\"https://mifosforge.jira.com/wiki/spaces/RES/pages/174456843/Adding+External+Software+to+Mifos\" target=\"_blank\" rel=\"noopener noreferrer\">adding external software to Mifos</a>.",
       "Code of Conduct": "Mifos <a href=\"https://mifos.org/resources/community/code-of-conduct/\" target=\"_blank\" rel=\"noopener noreferrer\">Code of Conduct</a> to abide by when collaborating in the community."
     },
+    "aboutUs": {
+      "Introduction": "The Mifos Initiative is a 501(c)(3) non-profit organization and a global community of developers, financial institutions, and social entrepreneurs. We believe that access to financial services is a fundamental human right, yet billions of people remain excluded from the formal financial system.",
+      "Platform Description": "We bridge this gap by providing the <a href=\"https://mifos.org\" target=\"_blank\" rel=\"noopener noreferrer\">Mifos X Platform</a>\u2014the world's leading open-source core banking system. By making enterprise-grade banking technology free and accessible, we lower the barrier to entry for Microfinance Institutions (MFIs), Fintechs, and NGOs, allowing them to scale their impact and serve the \"last mile\" efficiently.",
+      "Mission": "To accelerate financial inclusion by catalyzing an ecosystem of open-source technology, community, and knowledge sharing.",
+      "Vision": "A world where every individual and small business has access to the financial tools they need to thrive, regardless of their location or income level.",
+      "Why Open Source": "We chose the Open Source model because we believe financial infrastructure should be:",
+      "Transparent": "Transparent",
+      "Transparent Description": "No hidden fees or black-box algorithms.",
+      "Affordable": "Affordable",
+      "Affordable Description": "Eliminating licensing costs allows partners to invest more in their clients.",
+      "Innovative": "Innovative",
+      "Innovative Description": "A global community of developers ensures the platform evolves faster than any single vendor could manage.",
+      "Secure": "Secure",
+      "Secure Description": "With eyes on the code from around the world, security and stability are paramount.",
+      "Ecosystem Introduction": "The Mifos Initiative is the steward of the platform, but the real magic happens in the ecosystem:",
+      "The Mifos X Platform": "The Mifos X Platform",
+      "Platform Role": "The robust core banking engine.",
+      "The Community": "The Community",
+      "Community Role": "Hundreds of developers and implementers contributing code, translations, and support.",
+      "Certified Partners": "Certified Partners",
+      "Partners Role": "A global network of implementation partners who customize and deploy Mifos for local institutions.",
+      "The Foundation": "The Foundation",
+      "Foundation Role": "The non-profit body ensuring the long-term sustainability and governance of the project."
+    },
     "accounting": {
       "Accrual (periodic)": "Accrual (periodic)",
       "Accrual (upfront)": "Accrual (upfront)",
@@ -947,6 +971,7 @@
       "And thereafter, in Multiples of": "And thereafter, in Multiples of",
       "Approve Share": "Approve Share",
       "Approve Checker": "Approve Checker",
+      "About Us": "About Us",
       "Approve Loan": "Approve Loan",
       "Assets": "Assets",
       "Assets / Liability": "Assets / Liability",
@@ -1177,6 +1202,8 @@
       "Offices": "Offices",
       "Options": "Options",
       "Other Details": "Other Details",
+      "Our Mission": "Our Mission",
+      "Our Vision": "Our Vision",
       "Overdue": "Overdue",
       "Overdue Charges": "Overdue Charges",
       "Password Preferences": "Password Preferences",
@@ -1266,6 +1293,7 @@
       "Term Options": "Term Options",
       "Terms": "Terms",
       "Term Variations": "Term Variations",
+      "The Ecosystem": "The Ecosystem",
       "Total Withdrawals": "Total Withdrawals",
       "Transaction Details": "Transaction Details",
       "Transaction Reverted": "Transaction Reverted",
@@ -1296,6 +1324,7 @@
       "Welcome to Mifos": "Welcome to Mifos®",
       "WriteOff reasons to Expense accounts": "WriteOff reasons to Expense accounts",
       "Withdraw Money From Saving Account": "Withdraw Money From Saving Account",
+      "Why Open Source": "Why Open Source",
       "Withhold Tax": "Withhold Tax",
       "Working Days": "Working Days",
       "You have created": "You have created",
@@ -2984,6 +3013,7 @@
       "the Transaction Type": "the Transaction Type"
     },
     "text": {
+      "About Us": "About Us",
       "A": "A",
       "Account Transfers": "Account Transfers",
       "Ability to manage holidays for individual offices": "The ability to manage holidays for individual offices is a very useful tool for an organization spanning multiple locations.Use this option to customize holidays for each office of your organization.",
@@ -3452,6 +3482,7 @@
       "Loans Deferred Income": "Loans Deferred Income",
       "Login into Tenant": "Login into Tenant",
       "Login": "Login",
+      "Learn about the Mifos Initiative and our mission": "Learn about the Mifos Initiative and our mission",
       "Manage Currencies": "Manage Currencies",
       "Manage Data Tables": "Manage Data Tables",
       "Manage Delinquency Bucket": "Manage Delinquency Bucket",