From db6a03d3e0b4380da2dc56600f17969e429cb697 Mon Sep 17 00:00:00 2001
From: Anisha <anishaworks21@gmail.com>
Date: Thu, 4 Sep 2025 01:38:53 +0530
Subject: [PATCH] (fix): Alignment of buttons and boxes missing on Clients,
 Groups and Centers page

---
 src/app/centers/centers.component.html |  12 +-
 src/app/centers/centers.component.scss |  19 +--
 src/app/clients/clients.component.html |   6 +-
 src/app/clients/clients.component.scss | 165 +--------------------
 src/app/groups/groups.component.html   |  14 +-
 src/app/groups/groups.component.scss   |  17 +--
 src/app/shared/styles/list-layout.scss | 197 +++++++++++++++++++++++++
 7 files changed, 216 insertions(+), 214 deletions(-)
 create mode 100644 src/app/shared/styles/list-layout.scss

diff --git a/src/app/centers/centers.component.html b/src/app/centers/centers.component.html
index f2af3ca9b..64d77f318 100644
--- a/src/app/centers/centers.component.html
+++ b/src/app/centers/centers.component.html
@@ -1,13 +1,13 @@
 <mat-card class="container">
-  <div class="layout-row align-start-center">
-    <div class="search-box">
-      <mat-form-field>
+  <div class="layout-column layout-gt-sm-row align-gt-sm-start-center">
+    <div class="search-box m-r-30">
+      <mat-form-field class="search-box">
         <input matInput placeholder="Search by Name" [formControl]="name" />
       </mat-form-field>
-      <mat-form-field>
+      <mat-form-field class="search-box">
         <input matInput placeholder="Search by ExternalID" [formControl]="externalId" />
       </mat-form-field>
-      <mat-checkbox #showClosedCenters labelPosition="after" (change)="changeShowClosedCenters()">
+      <mat-checkbox #showClosedCenters labelPosition="after" (change)="changeShowClosedCenters()" class="m-r-10">
         {{ 'labels.inputs.Show Closed Centers' | translate }}
       </mat-checkbox>
     </div>
@@ -26,7 +26,7 @@
     </div>
   </div>
 
-  <table mat-table [dataSource]="dataSource" matSort>
+  <table mat-table [dataSource]="dataSource" matSort class="bordered-table">
     <ng-container matColumnDef="name">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
       <td mat-cell *matCellDef="let center">{{ center.name }}</td>
diff --git a/src/app/centers/centers.component.scss b/src/app/centers/centers.component.scss
index d1453a6ab..08ccfe5ce 100644
--- a/src/app/centers/centers.component.scss
+++ b/src/app/centers/centers.component.scss
@@ -1,18 +1 @@
-.container {
-  .action-button {
-    margin-left: auto;
-  }
-
-  .search-button {
-    min-width: 30px;
-    margin: 4px;
-  }
-}
-
-table {
-  width: 100%;
-
-  .select-row:hover {
-    cursor: pointer;
-  }
-}
+@use '../shared/styles/list-layout' as *;
diff --git a/src/app/clients/clients.component.html b/src/app/clients/clients.component.html
index d4b76ce88..6dfc9c0f2 100644
--- a/src/app/clients/clients.component.html
+++ b/src/app/clients/clients.component.html
@@ -22,10 +22,10 @@
         [routerLink]="['../', 'organization', 'bulk-import', 'Clients']"
         *mifosxHasPermission="'CREATE_CLIENT'"
       >
-        <fa-icon icon="download" class="m-r-10"></fa-icon>{{ 'labels.buttons.Import Client' | translate }}
+        <fa-icon icon="download" class="m-r-20"></fa-icon>{{ 'labels.buttons.Import Client' | translate }}
       </button>
       <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CLIENT'">
-        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Create Client' | translate }}
+        <fa-icon icon="plus" class="m-r-20"></fa-icon>{{ 'labels.buttons.Create Client' | translate }}
       </button>
     </div>
   </div>
@@ -34,7 +34,7 @@
     <div *ngIf="isLoading">
       <mat-progress-bar mode="indeterminate"></mat-progress-bar>
     </div>
-    <table mat-table [dataSource]="dataSource" matSort (matSortChange)="sortChanged($event)">
+    <table mat-table [dataSource]="dataSource" matSort (matSortChange)="sortChanged($event)" class="bordered-table">
       <!-- Name Column -->
       <ng-container matColumnDef="displayName">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
diff --git a/src/app/clients/clients.component.scss b/src/app/clients/clients.component.scss
index 6666f7876..08ccfe5ce 100644
--- a/src/app/clients/clients.component.scss
+++ b/src/app/clients/clients.component.scss
@@ -1,164 +1 @@
-.container {
-  .action-button {
-    margin-left: auto;
-  }
-
-  .search-button {
-    min-width: 30px;
-    margin: 4px;
-  }
-
-  .search-box {
-    min-width: 320px;
-  }
-
-  .filter-box {
-    min-width: 280px;
-  }
-}
-
-table {
-  tr.select-row:hover {
-    cursor: pointer;
-  }
-
-  tr:nth-child(odd).td {
-    color: black;
-  }
-}
-
-$bar: 150px;
-$foo: $bar * 8;
-$color: #e2e4ec;
-
-.sidenav {
-  overflow-x: hidden;
-}
-
-@keyframes move {
-  0% {
-    left: 0;
-  }
-
-  16.7% {
-    left: 0;
-  }
-
-  33.3% {
-    left: calc($foo / 2);
-  }
-
-  50% {
-    left: $foo - $bar;
-  }
-
-  66.7% {
-    left: calc($foo / 2);
-  }
-
-  83.3% {
-    left: 0;
-  }
-
-  100% {
-    left: 0;
-  }
-}
-
-@keyframes grow {
-  0% {
-    width: $bar;
-  }
-
-  16.7% {
-    width: calc($foo / 2);
-  }
-
-  33.3% {
-    width: calc($foo / 2);
-  }
-
-  50% {
-    width: $bar;
-  }
-
-  66.7% {
-    width: calc($foo / 2);
-  }
-
-  83.3% {
-    width: calc($foo / 2);
-  }
-
-  100% {
-    width: $bar;
-  }
-}
-
-@media (max-width <= 768px) {
-  .container {
-    .search-box,
-    .filter-box,
-    .action-button {
-      width: 100%;
-      margin-bottom: 15px;
-    }
-
-    .search-box mat-form-field {
-      width: 100%;
-    }
-
-    .action-button {
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-      align-items: stretch;
-    }
-
-    .filter-box {
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  table {
-    width: 100%;
-    overflow-x: auto;
-    display: block;
-
-    thead,
-    tbody,
-    tr,
-    th,
-    td {
-      white-space: nowrap;
-    }
-  }
-
-  .mat-paginator {
-    overflow-x: auto;
-    display: block;
-  }
-
-  .alert {
-    text-align: center;
-    padding: 10px;
-  }
-}
-
-@media screen and (max-width > 768px) {
-  .action-button {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-
-    button {
-      width: 100%;
-    }
-  }
-}
-
-.client-list {
-  padding: 1%;
-}
+@use '../shared/styles/list-layout' as *;
diff --git a/src/app/groups/groups.component.html b/src/app/groups/groups.component.html
index 1f1182c53..18a980e23 100644
--- a/src/app/groups/groups.component.html
+++ b/src/app/groups/groups.component.html
@@ -1,24 +1,24 @@
 <mat-card class="container">
-  <div class="layout-row align-start-center">
-    <div class="search-box">
-      <mat-form-field>
+  <div class="layout-column layout-gt-sm-row align-gt-sm-start-center">
+    <div class="search-box m-r-30">
+      <mat-form-field class="search-box">
         <input matInput placeholder="Search by Name" [formControl]="name" />
       </mat-form-field>
-      <mat-checkbox #showClosedGroups labelPosition="after" (change)="changeShowClosedGroups()">{{
+      <mat-checkbox #showClosedGroups labelPosition="after" (change)="changeShowClosedGroups()" class="m-r-10">{{
         'labels.inputs.Show Closed Groups' | translate
       }}</mat-checkbox>
     </div>
     <div class="action-button gap-25px">
       <button mat-raised-button color="primary" [routerLink]="['../', 'organization', 'bulk-import', 'Groups']">
-        <fa-icon icon="download" class="m-r-10"></fa-icon>{{ 'labels.buttons.Import Group' | translate }}
+        <fa-icon icon="download" class="m-r-20"></fa-icon>{{ 'labels.buttons.Import Group' | translate }}
       </button>
       <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_GROUP'">
-        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Create Group' | translate }}
+        <fa-icon icon="plus" class="m-r-20"></fa-icon>{{ 'labels.buttons.Create Group' | translate }}
       </button>
     </div>
   </div>
 
-  <table mat-table [dataSource]="dataSource" matSort>
+  <table mat-table [dataSource]="dataSource" matSort class="bordered-table">
     <ng-container matColumnDef="name">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
       <td mat-cell *matCellDef="let group">{{ group.name }}</td>
diff --git a/src/app/groups/groups.component.scss b/src/app/groups/groups.component.scss
index 70dccafc1..08ccfe5ce 100644
--- a/src/app/groups/groups.component.scss
+++ b/src/app/groups/groups.component.scss
@@ -1,16 +1 @@
-.container {
-  .action-button {
-    margin-left: auto;
-  }
-
-  .search-button {
-    min-width: 30px;
-    margin: 4px;
-  }
-}
-
-table {
-  tr.select-row:hover {
-    cursor: pointer;
-  }
-}
+@use '../shared/styles/list-layout' as *;
diff --git a/src/app/shared/styles/list-layout.scss b/src/app/shared/styles/list-layout.scss
new file mode 100644
index 000000000..560b9841d
--- /dev/null
+++ b/src/app/shared/styles/list-layout.scss
@@ -0,0 +1,197 @@
+// Variables
+$bar: 150px;
+$foo: $bar * 8;
+$color: #e2e4ec;
+
+// Container styles
+.container {
+  padding: 24px;
+
+  // Support for existing layout classes
+  .layout-column,
+  .layout-gt-sm-row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    flex-wrap: nowrap;
+    gap: 20px;
+
+    &.align-gt-sm-start-center {
+      align-items: center;
+      justify-content: flex-start;
+    }
+
+    .search-box {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+      flex: 1;
+      min-width: 0;
+
+      &.m-r-30 {
+        margin-right: 30px;
+      }
+
+      // Handle multiple form fields in search box
+      mat-form-field {
+        min-width: 200px;
+        flex: 1;
+
+        &.search-box {
+          width: auto;
+        }
+
+        // Ensure form fields are inline
+        + mat-form-field {
+          margin-left: 15px;
+        }
+      }
+
+      mat-checkbox {
+        white-space: nowrap;
+        flex-shrink: 0;
+        margin-left: 15px;
+
+        &.m-r-10 {
+          margin-right: 10px;
+        }
+      }
+    }
+
+    .action-button {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      margin-left: auto;
+
+      &.gap-25px {
+        gap: 25px;
+      }
+
+      button {
+        white-space: nowrap;
+
+        fa-icon {
+          &.m-r-10,
+          &.m-r-20 {
+            margin-right: 10px;
+          }
+        }
+      }
+    }
+  }
+
+  // Table styling
+  .bordered-table {
+    width: 100%;
+    background: white;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-top: 16px;
+
+    .select-row {
+      cursor: pointer;
+
+      &:hover {
+        background-color: #f5f5f5;
+      }
+    }
+
+    th,
+    td {
+      padding: 12px 16px;
+    }
+
+    th {
+      background-color: #fafafa;
+      font-weight: 500;
+      border-bottom: 1px solid #e0e0e0;
+    }
+
+    tr {
+      border-bottom: 1px solid #f0f0f0;
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+
+  // Paginator styling
+  mat-paginator {
+    border-top: 1px solid #e0e0e0;
+    background: white;
+    margin-top: 0;
+  }
+
+  // Progress bar
+  mat-progress-bar {
+    margin: 0;
+  }
+}
+
+// Responsive design
+@media (width <= 768px) {
+  .container {
+    padding: 16px;
+
+    .layout-column,
+    .layout-gt-sm-row {
+      flex-wrap: wrap;
+
+      .search-box {
+        width: 100%;
+        margin-right: 0 !important;
+        margin-bottom: 15px;
+        flex-wrap: wrap;
+
+        mat-form-field {
+          min-width: 150px;
+          margin-bottom: 10px;
+
+          + mat-form-field {
+            margin-left: 0;
+          }
+        }
+
+        mat-checkbox {
+          margin-left: 0;
+          margin-top: 10px;
+        }
+      }
+
+      .action-button {
+        margin-left: 0;
+        width: 100%;
+        justify-content: center;
+
+        &.gap-25px {
+          gap: 15px;
+        }
+      }
+    }
+  }
+}
+
+// Table styles
+table {
+  width: 100%;
+
+  tr.select-row:hover {
+    cursor: pointer;
+  }
+}
+
+// Utility classes
+.m-r-10 {
+  margin-right: 10px !important;
+}
+
+.m-r-20 {
+  margin-right: 20px !important;
+}
+
+.m-r-30 {
+  margin-right: 30px !important;
+}