From b7e321667d4dbb195840f3c062020a5c1ececd5c Mon Sep 17 00:00:00 2001
From: samuel mbabhazi <111171386+samuelmbabhazi@users.noreply.github.com>
Date: Thu, 26 Sep 2024 22:26:41 +0200
Subject: [PATCH] [Enhancement] Align fields with header -
 /pages/employees/timesheets (#8268)

* [Enhancement] Align fields with header - /pages/employees/timesheets/daily

* truncate title
---
 .../daily/daily/daily.component.html          | 20 ++++--
 .../daily/daily/daily.component.scss          | 62 ++++++++++---------
 2 files changed, 47 insertions(+), 35 deletions(-)

diff --git a/apps/gauzy/src/app/pages/employees/timesheet/daily/daily/daily.component.html b/apps/gauzy/src/app/pages/employees/timesheet/daily/daily/daily.component.html
index 108c066735e..656322b19cb 100644
--- a/apps/gauzy/src/app/pages/employees/timesheet/daily/daily/daily.component.html
+++ b/apps/gauzy/src/app/pages/employees/timesheet/daily/daily/daily.component.html
@@ -84,7 +84,7 @@
 											</div>
 										</ng-template>
 									</ng-template>
-									<div class="col-3 project-name">
+									<div class="col-3">
 										<ngx-project *ngIf="log?.project; else noProject" [rowData]="log"></ngx-project>
 										<ng-template #noProject>
 											<span>
@@ -94,7 +94,7 @@
 										<div class="mt-2 small">
 											<span *ngIf="log?.task; else noToDo">
 												<strong> {{ 'TIMESHEET.TODO' | translate }} : </strong>
-												{{ log?.task?.title }}
+												{{ log?.task?.title | truncate : 50 }}
 											</span>
 											<ng-template #noToDo>
 												<span>{{ 'TIMESHEET.NO_TODO' | translate }}</span>
@@ -119,10 +119,18 @@
 											{{ log.logType | titlecase }}
 										</span>
 									</div>
-									<div class="col">
-										<span class="log">
-											{{ log.source | replace : '_' : ' ' | titlecase }}
-										</span>
+									<div class="col source-version">
+										<ngx-badge-label
+											[text]="log?.source | replace : '_' : ' ' | titlecase"
+											class="badge-item"
+										></ngx-badge-label>
+
+										<ngx-badge-label
+											*ngIf="log?.version"
+											[text]="log?.version"
+											status="info"
+											class="badge-item"
+										></ngx-badge-label>
 									</div>
 									<div class="col">
 										{{ log.duration | durationFormat }}
diff --git a/apps/gauzy/src/app/pages/employees/timesheet/daily/daily/daily.component.scss b/apps/gauzy/src/app/pages/employees/timesheet/daily/daily/daily.component.scss
index 7eaeae3b3d5..d0f47a77407 100644
--- a/apps/gauzy/src/app/pages/employees/timesheet/daily/daily/daily.component.scss
+++ b/apps/gauzy/src/app/pages/employees/timesheet/daily/daily/daily.component.scss
@@ -1,33 +1,37 @@
 @import '../../weekly/weekly/weekly.component.scss';
 
 :host {
-	nb-card {
-		border-radius: 0 nb-theme(border-radius) nb-theme(border-radius) nb-theme(border-radius);
-	}
-	nb-card-body {
-		height: 100%;
-	}
-	.gauzy-button-action {
-		display: flex;
-		align-content: center;
-		justify-content: flex-end;
-	}
-	.log-container {
-		height: calc(100% - 50px);
-	}
-	.log {
-		width: fit-content;
-		font-size: 12px;
-		font-weight: 600;
-		line-height: 15px;
-		letter-spacing: 0em;
-		text-align: left;
-		padding: 3px 8px;
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-		border-radius: nb-theme(border-radius);
-		background: var(--gauzy-sidebar-background-3);
-	}
+  nb-card {
+    border-radius: 0 nb-theme(border-radius) nb-theme(border-radius) nb-theme(border-radius);
+  }
+  nb-card-body {
+    height: 100%;
+  }
+  .gauzy-button-action {
+    display: flex;
+    align-content: center;
+    justify-content: flex-end;
+  }
+  .log-container {
+    height: calc(100% - 50px);
+  }
+  .log {
+    width: fit-content;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 15px;
+    letter-spacing: 0em;
+    text-align: left;
+    padding: 3px 8px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    border-radius: nb-theme(border-radius);
+    background: var(--gauzy-sidebar-background-3);
+  }
+  .source-version {
+    display: flex;
+    gap: 5%;
+  }
 }