WEB-673 Create a Tasks sections just like it was available in the legacy Mifos Community App (#3106)

src/app/tasks/checker-inbox-and-tasks-tabs/reschedule-loan/reschedule-loan.component.html

@@ -8,34 +8,33 @@
 
 @if (loans && loans.length > 0) {
   <div class="tab-container mat-typography">
-    <div class="layout-row align-start-center">
-      <div class="search-box flex-40">
-        <mat-form-field class="flex-90">
-          <input
-            matInput
-            placeholder="{{ 'labels.text.Filter by name' | translate }}"
-            (keyup)="applyFilter($event.target.value)"
-          />
-        </mat-form-field>
-      </div>
-      <div class="flex-60">
-        <button
-          mat-raised-button
-          color="success"
-          *mifosxHasPermission="'APPROVE_LOANRESCHEDULE'"
-          (click)="bulkLoanReschedule('Approve')"
-        >
-          <fa-icon icon="check" class="m-r-10"></fa-icon>{{ 'labels.buttons.Approve' | translate }}
-        </button>
-        <button
-          mat-raised-button
-          color="reject"
-          *mifosxHasPermission="'APPROVE_LOANRESCHEDULE'"
-          (click)="bulkLoanReschedule('Reject')"
-        >
-          <fa-icon icon="times" class="m-r-10"></fa-icon>{{ 'labels.buttons.Reject' | translate }}
-        </button>
-      </div>
+    <div class="tasks-header">
+      <mat-form-field class="tasks-search-field">
+        <input
+          #filterInput
+          matInput
+          placeholder="{{ 'labels.text.Filter by name' | translate }}"
+          (keyup)="applyFilter(filterInput.value)"
+        />
+      </mat-form-field>
+      <button
+        mat-raised-button
+        color="success"
+        *mifosxHasPermission="'APPROVE_LOANRESCHEDULE'"
+        (click)="bulkLoanReschedule('Approve')"
+        class="tasks-action-btn"
+      >
+        <fa-icon icon="check" class="m-r-10"></fa-icon>{{ 'labels.buttons.Approve' | translate }}
+      </button>
+      <button
+        mat-raised-button
+        color="reject"
+        *mifosxHasPermission="'APPROVE_LOANRESCHEDULE'"
+        (click)="bulkLoanReschedule('Reject')"
+        class="tasks-action-btn"
+      >
+        <fa-icon icon="times" class="m-r-10"></fa-icon>{{ 'labels.buttons.Reject' | translate }}
+      </button>
     </div>
     <table mat-table [dataSource]="dataSource">
       <ng-container matColumnDef="select">
@@ -98,7 +97,7 @@
   </div>
 }
 
-@if (loans.length === 0) {
+@if (loans?.length === 0) {
   <div class="alert">
     <div class="message">
       <i class="fa fa-exclamation-circle alert-check"></i>

src/app/tasks/checker-inbox-and-tasks-tabs/reschedule-loan/reschedule-loan.component.scss

@@ -10,6 +10,34 @@
   padding: 1%;
   margin: 1%;
 
+  ::ng-deep mat-form-field {
+    .mat-mdc-form-field-subscript-wrapper {
+      height: 0;
+      min-height: 0;
+    }
+
+    .mat-mdc-text-field-wrapper {
+      margin-bottom: 0;
+    }
+
+    .mat-mdc-form-field-infix {
+      padding-top: 8px;
+      padding-bottom: 8px;
+      min-height: 48px;
+    }
+
+    input {
+      height: 48px;
+    }
+  }
+
+  button.mat-mdc-raised-button {
+    height: 48px;
+    line-height: 48px;
+    padding: 0 16px;
+    min-height: 48px;
+  }
+
   .mat-raised-button.mat-success {
     color: #fff;
     background-color: #008000ab;
@@ -18,6 +46,22 @@
   .view-details {
     cursor: pointer;
   }
+
+  .tasks-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+
+  .tasks-search-field {
+    width: 280px;
+    margin: 0;
+  }
+
+  .tasks-action-btn {
+    margin: 0;
+  }
 }
 
 .alert {