(UI improved) Notes for Clients, Groups, Centers rendered properly (#2633)

- Fixed rendering issues in Notes for Clients, Groups, and Centers
- Removed unnecessary mat-list and mat-item usage
- Improved UI consistency across entities

src/app/shared/tabs/entity-notes-tab/entity-notes-tab.component.html

@@ -1,11 +1,11 @@
 <div class="tab-container mat-typography">
   <h3>{{ 'labels.heading.Notes' | translate }}</h3>
 
-  <div>
+  <div class="add-note-section">
     <form
       #formRef="ngForm"
       [formGroup]="noteForm"
-      class="layout-row align-start-baseline gap-20px"
+      class="layout-row align-start-baseline gap-10px"
       (ngSubmit)="addNote()"
     >
       <mat-form-field class="flex-85-minus-20px">
@@ -24,28 +24,33 @@
     </form>
   </div>
 
-  <mat-list>
-    <mat-list-item *ngFor="let entityNote of entityNotes; let i = index">
-      <div class="list-item-content">
-        <div class="left-section">
-          <fa-icon icon="sticky-note" matListIcon></fa-icon>
-          <span>{{ entityNote.note }}</span>
-          <span class="note-details">
-            <b>{{ 'labels.inputs.Created By' | translate }}:</b> {{ entityNote.createdByUsername }}
-            <b>{{ 'labels.inputs.Date' | translate }}:</b> {{ entityNote.createdOn | dateFormat }}
-          </span>
+  <div class="notes-container">
+    <div *ngIf="entityNotes && entityNotes.length > 0; else emptyState">
+      <div class="note-card" *ngFor="let entityNote of entityNotes; let i = index">
+        <div class="note-content">
+          {{ entityNote.note }}
         </div>
-        <div class="right-section">
-          <div class="layout-row align-start">
-            <button mat-button color="primary" (click)="editNote(entityNote.id, entityNote.note, i)">
-              <fa-icon icon="edit"></fa-icon>
-            </button>
-            <button mat-button color="warn" (click)="deleteNote(entityNote.id, i)">
-              <fa-icon icon="trash"></fa-icon>
+
+        <div class="note-footer">
+          <div class="note-meta">
+            <div class="created-by">Created by {{ entityNote.createdByUsername }}</div>
+            <div class="created-date">
+              {{ entityNote.createdOn | dateFormat }}
+            </div>
+          </div>
+
+          <div class="note-actions">
+            <button class="edit-btn" (click)="editNote(entityNote.id, entityNote.note, i)" title="Edit note">
+              Edit
             </button>
+            <button class="delete-btn" (click)="deleteNote(entityNote.id, i)" title="Delete note">Delete</button>
           </div>
         </div>
       </div>
-    </mat-list-item>
-  </mat-list>
+    </div>
+
+    <ng-template #emptyState>
+      <div class="empty-state">No notes available</div>
+    </ng-template>
+  </div>
 </div>