Fix(WEB-114): Implement modern empty state for Group list

Signed-off-by: Harsh Deep <deepkashyapharsh@gmail.com>

Author: HarshDeep-dev

src/app/groups/groups.component.html

@@ -25,8 +25,18 @@
       </button>
     </div>
   </div>
+  <div *ngIf="(dataSource?.records$ | async) === 0" class="empty-state-container">
+    <div class="m-t-40 m-b-40 text-center">
+      <fa-icon icon="users" size="6x" class="gray-text m-b-20"></fa-icon>
+      <h2 class="mat-h2">{{ 'labels.text.No Groups Found' | translate }}</h2>
+      <p class="gray-text">{{ 'labels.text.No Groups Found Description' | translate }}</p>
+      <button mat-raised-button color="primary" [routerLink]="['create']">
+        <fa-icon icon="plus" class="m-r-10"></fa-icon> {{ 'labels.buttons.Create Your First Group' | translate }}
+      </button>
+    </div>
+  </div>
 
-  <table mat-table [dataSource]="dataSource" matSort class="bordered-table">
+  <table *ngIf="(dataSource?.records$ | async) > 0" 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>

src/app/groups/groups.component.scss

@@ -7,3 +7,31 @@
  */
 
 @use '../shared/styles/list-layout' as *;
+@use '../../assets/styles/colours' as *; // This imports the official Mifos colors
+
+.empty-state-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 24px; // 24 is a multiple of 8
+  background-color: $light-grey; // Uses official variable instead of #f9f9f9
+  border: 2px dashed $silver; // Uses official variable instead of #e0e0e0
+  border-radius: 8px; // 8 is a multiple of 8
+  margin: 24px 0;
+
+  .gray-text {
+    color: $asbestos; // Uses official variable instead of #757575
+    font-size: 1.1rem;
+    margin-bottom: 24px;
+  }
+
+  fa-icon {
+    color: $silver;
+  }
+
+  h2 {
+    margin-top: 8px;
+    font-weight: 500;
+  }
+}

src/assets/translations/cs-CS.json

@@ -350,6 +350,7 @@
       "Home": "Domov"
     },
     "buttons": {
+      "Create Your First Group": "Create Your First Group",
       "Accept Transfer": "Přijmout převod",
       "Actions": "Akce",
       "Activate": "aktivovat",
@@ -3025,6 +3026,8 @@
       "the Transaction Type": "typ transakce"
     },
     "text": {
+      "No Groups Found": "No Groups Found",
+      "No Groups Found Description": "We couldn't find any groups. Try a different search or create one now.",
       "Loading data": "Načítání dat",
       "No repayment schedule available": "Není k dispozici žádný splátkový kalendář",
       "About Us": "O Nás",

src/assets/translations/de-DE.json

@@ -350,6 +350,7 @@
       "Home": "Heim"
     },
     "buttons": {
+      "Create Your First Group": "Erstellen Sie Ihre erste Gruppe",
       "Accept Transfer": "Akzeptieren Sie die Übertragung",
       "Actions": "Aktionen",
       "Activate": "aktivieren Sie",
@@ -3026,6 +3027,8 @@
       "the Transaction Type": "der Transaktionstyp"
     },
     "text": {
+      "No Groups Found": "Keine Gruppen gefunden",
+      "No Groups Found Description": "Wir konnten keine Gruppen finden. Versuchen Sie eine andere Suche oder erstellen Sie jetzt eine.",
       "Loading data": "Daten werden geladen",
       "No repayment schedule available": "Kein Rückzahlungsplan verfügbar",
       "About Us": "Über Uns",

src/assets/translations/en-US.json

@@ -351,6 +351,7 @@
       "Home": "Home"
     },
     "buttons": {
+      "Create Your First Group": "Create Your First Group",
       "Accept Transfer": "Accept Transfer",
       "Actions": "Actions",
       "Activate": "Activate",
@@ -3059,6 +3060,8 @@
       "the Transaction Type": "the Transaction Type"
     },
     "text": {
+      "No Groups Found": "No Groups Found",
+      "No Groups Found Description": "We couldn't find any groups. Try a different search or create one now.",
       "About Us": "About Us",
       "A": "A",
       "Account Transfers": "Account Transfers",

src/assets/translations/es-CL.json

@@ -350,6 +350,7 @@
       "Home": "Inicio"
     },
     "buttons": {
+      "Create Your First Group": "Crea tu primer grupo",
       "Accept Transfer": "Aceptar transferencia",
       "Actions": "Acciones",
       "Activate": "Activar",
@@ -3025,6 +3026,8 @@
       "the Transaction Type": "el tipo de transacción"
     },
     "text": {
+      "No Groups Found": "No se encontraron grupos",
+      "No Groups Found Description": "No pudimos encontrar ningún grupo. Intente una búsqueda diferente o cree uno ahora.",
       "Loading data": "Cargando datos",
       "No repayment schedule available": "No hay cronograma de pagos disponible",
       "About Us": "Sobre Nosotros",

src/assets/translations/es-MX.json

@@ -350,6 +350,7 @@
       "Home": "Inicio"
     },
     "buttons": {
+      "Create Your First Group": "Crea tu primer grupo",
       "Accept Transfer": "Aceptar transferencia",
       "Actions": "Acciones",
       "Activate": "Activar",
@@ -3040,6 +3041,8 @@
       "the Transaction Type": "el tipo de transacción"
     },
     "text": {
+      "No Groups Found": "No se encontraron grupos",
+      "No Groups Found Description": "No pudimos encontrar ningún grupo. Intente una búsqueda diferente o cree uno ahora.",
       "Unable to load vendors. Please check your connection and try again.": "No se pudieron cargar los proveedores. Verifique su conexión e intente de nuevo.",
       "This remittance has a terminal status and cannot be processed further.": "Esta remesa tiene un estado terminal y no puede ser procesada.",
       "This remittance has already been paid successfully.": "Esta remesa ya ha sido pagada exitosamente.",

src/assets/translations/fr-FR.json

@@ -350,6 +350,7 @@
       "Home": "Maison"
     },
     "buttons": {
+      "Create Your First Group": "Créez votre premier groupe",
       "Accept Transfer": "Accepter le transfert",
       "Actions": "Actions",
       "Activate": "Activer",
@@ -3027,6 +3028,8 @@
       "the Transaction Type": "le type de transaction"
     },
     "text": {
+      "No Groups Found": "Aucun groupe trouvé",
+      "No Groups Found Description": "Nous n'avons trouvé aucun groupe. Essayez une autre recherche ou créez-en un maintenant.",
       "Loading data": "Chargement des données",
       "No repayment schedule available": "Aucun calendrier de remboursement disponible",
       "About Us": "À Propos de Nous",

src/assets/translations/it-IT.json

@@ -350,6 +350,7 @@
       "Home": "Casa"
     },
     "buttons": {
+      "Create Your First Group": "Crea il tuo primo gruppo",
       "Accept Transfer": "Accetta trasferimento",
       "Actions": "Azioni",
       "Activate": "Attivare",
@@ -3023,6 +3024,8 @@
       "the Transaction Type": "il tipo di transazione"
     },
     "text": {
+      "No Groups Found": "Nessun gruppo trovato",
+      "No Groups Found Description": "Non siamo riusciti a trovare alcun gruppo. Prova una ricerca diversa o creane uno ora.",
       "Loading data": "Caricamento dati",
       "No repayment schedule available": "Nessun piano di rimborso disponibile",
       "About Us": "Chi Siamo",

src/assets/translations/ko-KO.json

@@ -350,6 +350,7 @@
       "Home": "집"
     },
     "buttons": {
+      "Create Your First Group": "첫 번째 그룹 생성",
       "Accept Transfer": "전송 수락",
       "Actions": "행위",
       "Activate": "활성화",
@@ -3023,6 +3024,8 @@
       "the Transaction Type": "거래 유형"
     },
     "text": {
+      "No Groups Found": "그룹을 찾을 수 없습니다",
+      "No Groups Found Description": "그룹을 찾을 수 없습니다. 다른 검색을 시도하거나 지금 하나를 생성하십시오.",
       "Loading data": "데이터 로딩 중",
       "No repayment schedule available": "상환 일정을 사용할 수 없습니다",
       "About Us": "회사 소개",