WEB-560 Fix version information below to the login button (#2974)

src/app/login/login.component.html

@@ -36,7 +36,6 @@
           </a>
         </div>
       </div>
-      <mifosx-footer variant="compact"></mifosx-footer>
     </div>
   </div>
 
@@ -89,6 +88,28 @@
           }
         </div>
 
+        <!-- Version Info Table -->
+        <div class="login-version-info">
+          <table class="login-version-table">
+            <tr>
+              <td class="version-label">Tenant</td>
+              <td class="version-value">{{ versions?.tenant || 'Default' }}</td>
+            </tr>
+            <tr>
+              <td class="version-label">Mifos® WebApp</td>
+              <td class="version-value">{{ versions?.mifos }}</td>
+            </tr>
+            <tr>
+              <td class="version-label">Apache Fineract®</td>
+              <td class="version-value">{{ versions?.fineract?.version }}</td>
+            </tr>
+            <tr>
+              <td class="version-label">Server</td>
+              <td class="version-value">{{ server }}</td>
+            </tr>
+          </table>
+        </div>
+
         <!-- Resources Links -->
         <div class="resources-section">
           <div class="resources-divider">

src/app/login/login.component.scss

@@ -1,3 +1,44 @@
+// Version Info Table
+.login-version-table {
+  width: 100%;
+  max-width: 350px;
+  margin: 0 auto;
+  border-collapse: collapse;
+  font-size: 0.95rem;
+  background: none;
+}
+
+.login-version-table td {
+  padding: 0.4rem 0.7rem;
+  text-align: left;
+  vertical-align: middle;
+}
+
+.version-label {
+  font-weight: 500;
+  color: var(--md-sys-color-on-surface-variant, #44474e);
+  width: 50%;
+}
+
+.version-value {
+  font-weight: 400;
+  color: var(--md-sys-color-on-surface, #1a1c1e);
+  width: 50%;
+  word-break: break-all;
+}
+
+// Responsive
+@media (width <= 768px) {
+  .login-version-table {
+    font-size: 0.85rem;
+    max-width: 100%;
+  }
+
+  .login-version-table td {
+    padding: 0.3rem 0.4rem;
+  }
+}
+
 /**
  * Modern Material Design 3 Login Component Styles
  */
@@ -358,6 +399,15 @@
   flex-shrink: 0;
 }
 
+// ===== Version Info Section =====
+.login-version-info {
+  margin-bottom: 1rem;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 // ===== Resources Section =====
 .resources-section {
   margin-top: auto;
@@ -511,76 +561,6 @@
   }
 }
 
-// ===== Dark Theme Support =====
-:host-context(.dark-theme) {
-  .login-wrapper {
-    background: #1a1c1e;
-  }
-
-  .login-panel {
-    background: #1a1c1e;
-  }
-
-  .login-card {
-    background: #1a1c1e;
-    box-shadow:
-      0 1px 2px #0000004d,
-      0 2px 6px #0003,
-      0 8px 24px #0000004d;
-  }
-
-  .logo-image {
-    max-width: 20rem;
-    padding: 0;
-    margin: 0;
-    height: 63px;
-    content: url('../../assets/images/white-mifos.png');
-  }
-
-  .welcome-text {
-    color: var(--md-sys-color-on-surface, #e2e2e5);
-  }
-
-  .welcome-subtitle {
-    color: var(--md-sys-color-on-surface-variant, #c4c6d0);
-  }
-
-  .resources-divider {
-    &::before {
-      background: var(--md-sys-color-outline-variant, #44474e);
-    }
-
-    .divider-text {
-      background: var(--md-sys-color-surface-container-low, #2c2f36);
-      color: var(--md-sys-color-on-surface, #e2e2e5);
-    }
-  }
-
-  .resource-button {
-    color: var(--md-sys-color-primary, #5ba2ec);
-
-    &:hover {
-      background: #5ba2ec1f;
-    }
-  }
-
-  // Header controls dark theme
-  .login-header {
-    ::ng-deep mifosx-theme-toggle {
-      button {
-        color: var(--md-sys-color-on-surface, #e2e2e5);
-
-        &:hover {
-          background: #5ba2ec1f;
-          color: var(--md-sys-color-primary, #5ba2ec);
-        }
-      }
-    }
-
-    // Language selector and server selector dark theme styles are handled by the components themselves
-  }
-}
-
 // ===== Responsive Design =====
 
 // Tablet
@@ -709,6 +689,14 @@
     margin-bottom: 0.75rem;
   }
 
+  .login-version-info {
+    margin-bottom: 0.75rem;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    font-size: 0.85rem;
+  }
+
   .login-footer {
     flex-direction: column;
     align-items: center;

src/app/login/login.component.ts

@@ -3,7 +3,19 @@ import { Component, OnInit, OnDestroy, inject } from '@angular/core';
 import { Router } from '@angular/router';
 
 /** rxjs Imports */
+
 import { Subscription } from 'rxjs';
+import { take } from 'rxjs/operators';
+/**
+ * Interface for version information.
+ */
+export interface VersionInfo {
+  tenant?: string;
+  mifos?: string;
+  fineract?: {
+    version?: string;
+  };
+}
 
 /** Custom Models */
 import { Alert } from '../core/alert/alert.model';
@@ -23,11 +35,12 @@ import { LoginFormComponent } from './login-form/login-form.component';
 import { ResetPasswordComponent } from './reset-password/reset-password.component';
 import { TwoFactorAuthenticationComponent } from './two-factor-authentication/two-factor-authentication.component';
 import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
-import { FooterComponent } from '../shared/footer/footer.component';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 import { M3IconComponent } from '../shared/m3-ui/m3-icon/m3-icon.component';
 
+import { VersionService } from '../system/version.service';
+
 /**
  * Login component.
  */
@@ -45,7 +58,6 @@ import { M3IconComponent } from '../shared/m3-ui/m3-icon/m3-icon.component';
     ResetPasswordComponent,
     TwoFactorAuthenticationComponent,
     MatMenuTrigger,
-    FooterComponent,
     FaIconComponent,
     MatMenu,
     MatMenuItem,
@@ -58,8 +70,15 @@ export class LoginComponent implements OnInit, OnDestroy {
   private themingService = inject(ThemingService);
   private router = inject(Router);
 
+  private versionService = inject(VersionService);
+
   public environment = environment;
 
+  /** Version info for display */
+  versions: VersionInfo = {};
+  /** Server info for display */
+  server: string = '';
+
   /** True if password requires a reset. */
   resetPassword = false;
   /** True if user requires two factor authentication. */
@@ -103,6 +122,35 @@ export class LoginComponent implements OnInit, OnDestroy {
         this.updateLogo();
       }
     });
+
+    // Load version info for table
+    this.versionService
+      .getBackendInfo()
+      .pipe(take(1))
+      .subscribe(
+        (info: any) => {
+          this.versions = {
+            tenant: this.settingsService.tenantIdentifier,
+            mifos: info?.mifos || info?.mifosX || info?.mifos_x || info?.version || environment.version,
+            fineract:
+              typeof info?.fineract === 'object' && info?.fineract !== null
+                ? { version: info.fineract.version }
+                : typeof info?.fineract === 'string'
+                  ? { version: info.fineract }
+                  : info?.fineractX || info?.fineract_x
+                    ? { version: info.fineractX || info.fineract_x }
+                    : { version: info?.git?.build?.version }
+          };
+        },
+        () => {
+          this.versions = {
+            tenant: this.settingsService.tenantIdentifier,
+            mifos: environment.version,
+            fineract: { version: '' }
+          };
+        }
+      );
+    this.server = this.settingsService.server;
   }
 
   /**