style(kanban): improve edit audit trail readability with emphasized user/date metadata

Author: Diogo-Ferraz

src/app/features/projects/components/project-kanban/project-kanban.component.html

@@ -274,6 +274,26 @@ <h3>Edit Task</h3>
         </div>
       </div>
 
+      <div class="task-dialog-section" *ngIf="editTaskAudit as audit">
+        <div class="task-dialog-section__title">Audit trail</div>
+        <div class="task-dialog-audit">
+          <div class="task-dialog-audit__item">
+            <i class="pi pi-plus-circle"></i>
+            <span class="task-dialog-audit__label">Created</span>
+            <span class="task-dialog-audit__date">{{ audit.createdAt | date:'medium' }}</span>
+            <span class="task-dialog-audit__by">by</span>
+            <span class="task-dialog-audit__user">{{ audit.createdByUserName || 'Unknown' }}</span>
+          </div>
+          <div class="task-dialog-audit__item">
+            <i class="pi pi-refresh"></i>
+            <span class="task-dialog-audit__label">Last updated</span>
+            <span class="task-dialog-audit__date">{{ audit.lastModifiedAt | date:'medium' }}</span>
+            <span class="task-dialog-audit__by">by</span>
+            <span class="task-dialog-audit__user">{{ audit.lastModifiedByUserName || 'Unknown' }}</span>
+          </div>
+        </div>
+      </div>
+
       <div class="task-dialog-actions">
         <button pButton type="button" label="Cancel" class="p-button-text" (click)="closeTaskDialogs()"></button>
         <button pButton type="button" label="Save changes" icon="pi pi-check" [loading]="isSavingTask" [disabled]="!taskForm.title.trim()" (click)="saveEditTask()"></button>

src/app/features/projects/components/project-kanban/project-kanban.component.scss

@@ -510,6 +510,49 @@
   border-top: 1px solid var(--surface-border);
 }
 
+.task-dialog-audit {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+}
+
+.task-dialog-audit__item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.45rem;
+  color: var(--text-color-secondary);
+  font-size: 0.82rem;
+  padding: 0.45rem 0.55rem;
+  border: 1px solid var(--surface-border);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--surface-0) 88%, var(--surface-100));
+}
+
+.task-dialog-audit__label {
+  font-weight: 600;
+  color: var(--text-color);
+}
+
+.task-dialog-audit__date {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  font-size: 0.78rem;
+  color: var(--text-color-secondary);
+  background: color-mix(in srgb, var(--surface-100) 72%, transparent);
+  border: 1px solid var(--surface-border);
+  border-radius: 999px;
+  padding: 0.1rem 0.45rem;
+}
+
+.task-dialog-audit__by {
+  color: var(--text-color-secondary);
+}
+
+.task-dialog-audit__user {
+  font-weight: 600;
+  color: color-mix(in srgb, var(--primary-color) 62%, var(--text-color));
+}
+
 :host ::ng-deep .task-dialog-form .p-inputtext,
 :host ::ng-deep .task-dialog-form .p-inputtextarea,
 :host ::ng-deep .task-dialog-form .p-dropdown,

src/app/features/projects/components/project-kanban/project-kanban.component.ts

@@ -152,6 +152,14 @@ export class ProjectKanbanComponent implements OnInit, OnDestroy {
     return this.authService.hasAnyRole([...MANAGEMENT_ROLES]);
   }
 
+  get editTaskAudit(): TaskItemDto | null {
+    if (!this.editTaskId) {
+      return null;
+    }
+
+    return this.findTaskById(this.editTaskId) ?? null;
+  }
+
   ngOnInit(): void {
     this.loadProjects();
   }