From 14b6e3819bc95c4efa0dd1015a22b91ff882f8b9 Mon Sep 17 00:00:00 2001
From: Aya Abdellatif <ayaabdllatif112@gmail.com>
Date: Sat, 21 Jun 2025 00:57:29 +0300
Subject: [PATCH 1/3] Add page name to the report

---
 Interface/src/Components/dashboard/dashboard.component.ts      | 3 ++-
 .../Components/page-analytics/page-analytics.component.html    | 1 +
 .../src/Components/page-analytics/page-analytics.component.ts  | 2 ++
 Interface/src/assets/i18n/ar.json                              | 3 ++-
 Interface/src/assets/i18n/en.json                              | 3 ++-
 Interface/src/assets/i18n/es.json                              | 3 ++-
 Interface/src/assets/i18n/fr.json                              | 3 ++-
 7 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/Interface/src/Components/dashboard/dashboard.component.ts b/Interface/src/Components/dashboard/dashboard.component.ts
index 60ea0a90..f23a0429 100644
--- a/Interface/src/Components/dashboard/dashboard.component.ts
+++ b/Interface/src/Components/dashboard/dashboard.component.ts
@@ -160,9 +160,10 @@ export class DashboardComponent implements OnInit{
 
   goToAnalytics(page: FacebookPage) {
     const facebookId = page.id;
+    const pageName = page.name;
     console.log('Navigating to page-analytics with ID:', facebookId);
     this.router.navigate(['/page-analytics'], {
-      queryParams: { facebookId }
+      queryParams: { facebookId, pageName }
     });
   }
 
diff --git a/Interface/src/Components/page-analytics/page-analytics.component.html b/Interface/src/Components/page-analytics/page-analytics.component.html
index 6fbbd73f..a68f15d9 100644
--- a/Interface/src/Components/page-analytics/page-analytics.component.html
+++ b/Interface/src/Components/page-analytics/page-analytics.component.html
@@ -27,6 +27,7 @@ <h2>{{ 'ANALYTICS_PAGE_DESCRIPTION' | translate }}</h2>
 
     <div class="report">
       <div *ngIf="goals.length > 0" class="goals-section">
+        <h3> {{pageName}} {{'IMPACT_REPORT' | translate}}</h3>
         <h3>{{ 'REPORT_FROM' | translate }} {{ startDate }} {{ 'TO' | translate }} {{ endDate }}</h3>
         <h4>{{ 'GOALS' | translate }}:</h4>
         <ul>
diff --git a/Interface/src/Components/page-analytics/page-analytics.component.ts b/Interface/src/Components/page-analytics/page-analytics.component.ts
index 70c742b1..69d5ecaf 100644
--- a/Interface/src/Components/page-analytics/page-analytics.component.ts
+++ b/Interface/src/Components/page-analytics/page-analytics.component.ts
@@ -28,6 +28,7 @@ export class PageAnalyticsComponent implements OnInit {
   endDate = '';
   chartImages: SafeUrl[] = [];
   goals: string[] = [];
+  pageName = '';
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   metrics: any;
   constructor(private route: ActivatedRoute,
@@ -38,6 +39,7 @@ export class PageAnalyticsComponent implements OnInit {
   ngOnInit(): void {
     this.route.queryParams.subscribe(params => {
       this.facebookId = params['facebookId'];
+      this.pageName = params['pageName'];
     });
   }
 
diff --git a/Interface/src/assets/i18n/ar.json b/Interface/src/assets/i18n/ar.json
index 2341d7d1..f70cc500 100644
--- a/Interface/src/assets/i18n/ar.json
+++ b/Interface/src/assets/i18n/ar.json
@@ -135,5 +135,6 @@
   "WELCOME_BACK": "مرحبًا بعودتك!",
   "LOGIN_FAILED": "فشل تسجيل الدخول",
   "INVALID_CREDENTIALS": "بيانات الاعتماد غير صحيحة",
-  "OK": "حسنًا"
+  "OK": "حسنًا",
+  "IMPACT_REPORT": "IMPACT_REPORT"
 }
diff --git a/Interface/src/assets/i18n/en.json b/Interface/src/assets/i18n/en.json
index b7406553..86b74e2d 100644
--- a/Interface/src/assets/i18n/en.json
+++ b/Interface/src/assets/i18n/en.json
@@ -135,5 +135,6 @@
   "WELCOME_BACK": "Welcome back!",
   "LOGIN_FAILED": "Login Failed",
   "INVALID_CREDENTIALS": "Invalid credentials",
-  "OK": "Ok"
+  "OK": "Ok",
+  "IMPACT_REPORT": "Impact Report"
 }
diff --git a/Interface/src/assets/i18n/es.json b/Interface/src/assets/i18n/es.json
index 0cda524a..85510688 100644
--- a/Interface/src/assets/i18n/es.json
+++ b/Interface/src/assets/i18n/es.json
@@ -135,5 +135,6 @@
   "WELCOME_BACK": "¡Bienvenido de nuevo!",
   "LOGIN_FAILED": "Error al Iniciar Sesión",
   "INVALID_CREDENTIALS": "Credenciales inválidas",
-  "OK": "Aceptar"
+  "OK": "Aceptar",
+  "IMPACT_REPORT": "INFORME DE IMPACTO"
 }
diff --git a/Interface/src/assets/i18n/fr.json b/Interface/src/assets/i18n/fr.json
index a453a428..12e9876c 100644
--- a/Interface/src/assets/i18n/fr.json
+++ b/Interface/src/assets/i18n/fr.json
@@ -135,5 +135,6 @@
   "WELCOME_BACK": "Content de vous revoir !",
   "LOGIN_FAILED": "Échec de la Connexion",
   "INVALID_CREDENTIALS": "Identifiants invalides",
-  "OK": "Ok"
+  "OK": "Ok",
+  "IMPACT_REPORT": "RAPPORT D'IMPACT"
 }

From 5b41f73a796c711b3a651ffda1680811facf3dfa Mon Sep 17 00:00:00 2001
From: Aya Abdellatif <ayaabdllatif112@gmail.com>
Date: Sat, 21 Jun 2025 01:24:00 +0300
Subject: [PATCH 2/3] Edit report title

---
 .../page-analytics.component.css              |   7 +++++-
 .../page-analytics.component.html             |  22 ++++++++++++++----
 Interface/src/assets/i18n/ar.json             |   2 +-
 Interface/src/assets/i18n/en.json             |   4 ++--
 Interface/src/assets/i18n/es.json             |   2 +-
 Interface/src/assets/i18n/fr.json             |   2 +-
 Interface/src/assets/icons/dot-arrow.png      | Bin 0 -> 3364 bytes
 Interface/src/assets/icons/dots.png           | Bin 0 -> 1284 bytes
 Interface/src/assets/icons/right-arrow.png    | Bin 0 -> 1703 bytes
 9 files changed, 28 insertions(+), 11 deletions(-)
 create mode 100644 Interface/src/assets/icons/dot-arrow.png
 create mode 100644 Interface/src/assets/icons/dots.png
 create mode 100644 Interface/src/assets/icons/right-arrow.png

diff --git a/Interface/src/Components/page-analytics/page-analytics.component.css b/Interface/src/Components/page-analytics/page-analytics.component.css
index bdfd28d0..59423f44 100644
--- a/Interface/src/Components/page-analytics/page-analytics.component.css
+++ b/Interface/src/Components/page-analytics/page-analytics.component.css
@@ -62,7 +62,7 @@ input[type="date"] {
   padding: 10px;
   margin-top: 5px;
   border: 1px solid #ccc;
-  border-radius: 5px;
+  border-radius: 5px !important;
 
   font-size: 1rem;
   color: #666;
@@ -142,6 +142,11 @@ input:focus, textarea:focus, select:focus {
   margin-bottom: 20px;
 }
 
+.report .date-style{
+  color: #0a2640;
+  font-style: italic;
+}
+
 .goals-section, .images-section {
   margin-top: 30px;
   text-align: left; /* left-align content inside sections */
diff --git a/Interface/src/Components/page-analytics/page-analytics.component.html b/Interface/src/Components/page-analytics/page-analytics.component.html
index a68f15d9..7c320d81 100644
--- a/Interface/src/Components/page-analytics/page-analytics.component.html
+++ b/Interface/src/Components/page-analytics/page-analytics.component.html
@@ -26,17 +26,28 @@ <h2>{{ 'ANALYTICS_PAGE_DESCRIPTION' | translate }}</h2>
     </div>
 
     <div class="report">
+      
       <div *ngIf="goals.length > 0" class="goals-section">
-        <h3> {{pageName}} {{'IMPACT_REPORT' | translate}}</h3>
-        <h3>{{ 'REPORT_FROM' | translate }} {{ startDate }} {{ 'TO' | translate }} {{ endDate }}</h3>
-        <h4>{{ 'GOALS' | translate }}:</h4>
+
+        <!--Report Header-->
+        <h3 style="text-align: center;">{{pageName}} {{'IMPACT_REPORT' | translate}}</h3>
+        <h3 style="text-align: center;">
+          {{ 'REPORT_FROM' | translate }} 
+          <span class="date-style">{{ startDate }}</span>
+          {{ 'TO' | translate }} 
+          <span class="date-style">{{ endDate }}</span>  
+        </h3>
+
+        <!--Goals section-->
+        <h4><img src="assets/icons/dot-arrow.png">{{ 'GOALS' | translate }}:</h4>
         <ul>
           <li *ngFor="let goal of goals">{{ goal }}</li>
         </ul>
       </div>
 
+      <!--Images Section-->
       <div *ngIf="chartImages.length > 0" class="images-section">
-        <h4>{{ 'ANALYTICS_IMAGES' | translate }}:</h4>
+        <h4><img src="assets/icons/dot-arrow.png">{{ 'ANALYTICS_IMAGES' | translate }}:</h4>
         <div class="images-container">
           <div *ngFor="let img of chartImages" class="image-wrapper">
             <img [src]="img" alt="Analytics Chart" class="analytics-image" />
@@ -44,8 +55,9 @@ <h4>{{ 'ANALYTICS_IMAGES' | translate }}:</h4>
         </div>
       </div>
 
+      <!--Tables-->
       <div *ngIf="metrics" class="goals-section">
-        <h4>{{ 'METRICS' | translate }}:</h4>
+        <h4><img src="assets/icons/dot-arrow.png">{{ 'METRICS' | translate }}:</h4>
 
         <!-- Sentiment Counts -->
         <h5>{{ 'SENTIMENT_COUNTS' | translate }}</h5>
diff --git a/Interface/src/assets/i18n/ar.json b/Interface/src/assets/i18n/ar.json
index f70cc500..01c19b70 100644
--- a/Interface/src/assets/i18n/ar.json
+++ b/Interface/src/assets/i18n/ar.json
@@ -113,7 +113,7 @@
   "END_DATE": "تاريخ الانتهاء",
   "SEE_INSIGHTS": "عرض التحليلات",
   "SELECT_DATES_WARNING": "يرجى تحديد كل من تاريخ البدء والانتهاء للمتابعة.",
-  "REPORT_FROM": "تقرير من",
+  "REPORT_FROM": "من",
   "TO": "إلى",
   "GOALS": "الأهداف",
   "ANALYTICS_IMAGES": "صور التحليلات",
diff --git a/Interface/src/assets/i18n/en.json b/Interface/src/assets/i18n/en.json
index 86b74e2d..0540270b 100644
--- a/Interface/src/assets/i18n/en.json
+++ b/Interface/src/assets/i18n/en.json
@@ -113,8 +113,8 @@
   "END_DATE": "End Date",
   "SEE_INSIGHTS": "See Insights",
   "SELECT_DATES_WARNING": "Please select both start and end dates to proceed.",
-  "REPORT_FROM": "Report from",
-  "TO": "to",
+  "REPORT_FROM": "From",
+  "TO": "To",
   "GOALS": "Goals",
   "ANALYTICS_IMAGES": "Analytics Images",
   "METRICS": "Metrics",
diff --git a/Interface/src/assets/i18n/es.json b/Interface/src/assets/i18n/es.json
index 85510688..a80b8d70 100644
--- a/Interface/src/assets/i18n/es.json
+++ b/Interface/src/assets/i18n/es.json
@@ -113,7 +113,7 @@
   "END_DATE": "Fecha de Fin",
   "SEE_INSIGHTS": "Ver Análisis",
   "SELECT_DATES_WARNING": "Por favor, selecciona una fecha de inicio y una fecha de fin para continuar.",
-  "REPORT_FROM": "Informe del",
+  "REPORT_FROM": "del",
   "TO": "al",
   "GOALS": "Objetivos",
   "ANALYTICS_IMAGES": "Imágenes de Análisis",
diff --git a/Interface/src/assets/i18n/fr.json b/Interface/src/assets/i18n/fr.json
index 12e9876c..08968b29 100644
--- a/Interface/src/assets/i18n/fr.json
+++ b/Interface/src/assets/i18n/fr.json
@@ -113,7 +113,7 @@
   "END_DATE": "Date de Fin",
   "SEE_INSIGHTS": "Voir les Analyses",
   "SELECT_DATES_WARNING": "Veuillez sélectionner une date de début et une date de fin pour continuer.",
-  "REPORT_FROM": "Rapport du",
+  "REPORT_FROM": "du",
   "TO": "au",
   "GOALS": "Objectifs",
   "ANALYTICS_IMAGES": "Images d'Analyses",
diff --git a/Interface/src/assets/icons/dot-arrow.png b/Interface/src/assets/icons/dot-arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..e26935c5e06e5b2bd3016bcdcb0dc357c43d5248
GIT binary patch
literal 3364
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

literal 0
HcmV?d00001

diff --git a/Interface/src/assets/icons/dots.png b/Interface/src/assets/icons/dots.png
new file mode 100644
index 0000000000000000000000000000000000000000..e67bf40f6d3c4232442d926c5e924fad2233e799
GIT binary patch
literal 1284
zcmV+f1^fDmP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00009a7bBm000id
z000id0mpBsWB>pF8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H11d&NZ
zK~#90?OR=M8$}d7cXqe*2M~!Wtr8$Yssw678!08lXpJd6Qwi|{Ok30!1pk8%36&Q2
z2M`sBs;?okya*lu^+U8gREm<2Qd(4aZIs=a+XsJS*WRyqCSFI`^XAz(b9S$1XMB(E
z044S}DCxqK=N$t3N5OcGSln83-A6kaSeLJh8PA)L%AY6Zr!4WuYOVG-uHQfa4lgfH
zS{A+};C%q1)2sm8khZ+Iar(@|G+|x7E@qm|!vU$!0h|r#OCrARDC@#~*L@Q1Pch`5
z08GaZPaDz>=93;mm#>R#eXRKbpZvR4`>)$zhp%=bmqZ4@N36j58trd)0J{7zro83X
zN%46G5wW<m=DN4DI6kQ_C{-WRj!oYH_@LX+n*lSPHxVfR5w@pI5)@cW_P^7*{4m-N
zkDmb?>@;nH#i_I)OnKfRQvQQ1eFg&C2_{z--u)Nh&OQfoIc~nqVLsO1sLKz76zbT1
zcmOy^BtJ?WmHnf6^a-$)Z}s%I3Cx^D?sXMvYp_w1AMN4CkW$Ad#Ru~0gQz$2djSvu
z-vl6Y(3J@AXMdwEKMael27t{_(^D`SX&kl=+(CP{$<+59|M%{PUI12WwZ}w!J(JFK
zEpAWM<%hB2x_2!Wb6|W$;7d$uVYOPllg3%ERQ>^QBU2w(eDKD5|93w`b^%9O7q&>9
zK=MkuBAwvVq>**`k&do=7r-ZZ`gS30dC>~&696Ac8kU9gS-2sxXxw+*Cw{;u0bE0L
zIx7I*v2fl@+rxGFy4W~<=ApEMc>q5k`Z_2uElOKfIy0q*#Gk@5o;RW7)-fqaNyon(
zo;G=)%h$zpv-tubkF%gH;q$$$*RDi~68jU0i(t_hm7g$n0T{KPFjfI5!cVZ1E)0{8
zNBFI!S+Mw+m=p_nW&N#pZe?*y`Ux+!mR?g#b$}cu)kxBhodLt-;}L#qX_i?066UkO
z!g}THn@Jp#enR`<#jknpKUQq0d_2Op&JXb0V<y6+pV0p1`}D!F`U!$N&&M;tNcRAY
z`U&LZ9V<2f!{p;(u#i{!`HCr(Z_-a-QvLV8nRNe&yTHrM=BpB_PQ;EPzM5wd3uCIa
zG%J|u%;YPk#$VOyy)4d)tslQ<rn9M?m=@RE>W5ilO*fmzLFybaDKHvIe!^I7gReB3
z&u@|X4QYOYEh{Fs!90u3$WVlzFjg}ljH3O75+zFP5A50^Saf|rUVY;MD7rpir}{<%
zF#h!cgZf7O0HgH*Bk~iB`2j}j14ig481n<n)(4EvPcY{P7|rM7NW0@F81n;+=JO-;
z6O8%+CiD4G`3Xk1!6Nc`U45f|K+*L9!|3nYPvN5T`J(kplqj(`uxsZ9bWvD+z+TJe
zbz$_pfG!HJ4=`Wvk2=7<#a5$J`I(9$^o^Yth!KzY2^NdFv>+6vZ|uB47$oT&`to@R
zHM07Eo#>l8FOUHuPXEuoAbn%!1^VPJqd%V~zM94;N<Xp-nErphXQL_cZC1U1QTmYp
u?8SUu7e>zu=whtu1B%Y4i`Fl(U+@eQZD(YVUN4IP0000<MNUMnLSTYey=A}v

literal 0
HcmV?d00001

diff --git a/Interface/src/assets/icons/right-arrow.png b/Interface/src/assets/icons/right-arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..7c9aae59766951765c645cac7294cf61c1cb772d
GIT binary patch
literal 1703
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

literal 0
HcmV?d00001


From b0aae855b8e3083f2427d5c994e4ab80703ec319 Mon Sep 17 00:00:00 2001
From: Aya Abdellatif <ayaabdllatif112@gmail.com>
Date: Sat, 21 Jun 2025 05:55:05 +0300
Subject: [PATCH 3/3] report

---
 .../page-analytics.component.css              | 129 +++++++++++-------
 .../page-analytics.component.html             | 101 ++++++++------
 Interface/src/assets/i18n/ar.json             |   5 +-
 Interface/src/assets/i18n/en.json             |   5 +-
 Interface/src/assets/i18n/es.json             |   5 +-
 Interface/src/assets/i18n/fr.json             |   5 +-
 Interface/src/assets/icons/try.png            | Bin 0 -> 619 bytes
 7 files changed, 156 insertions(+), 94 deletions(-)
 create mode 100644 Interface/src/assets/icons/try.png

diff --git a/Interface/src/Components/page-analytics/page-analytics.component.css b/Interface/src/Components/page-analytics/page-analytics.component.css
index 59423f44..255f439d 100644
--- a/Interface/src/Components/page-analytics/page-analytics.component.css
+++ b/Interface/src/Components/page-analytics/page-analytics.component.css
@@ -37,7 +37,7 @@
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   text-align: center;
-  margin-top: 80px; /* Pushes the whole section down from the navbar */
+  margin-top: 80px;
   padding-bottom: 0;
 }
 
@@ -52,9 +52,6 @@ h2 {
   display: flex;
   gap: 20px;
   margin-bottom: 20px;
-    /*display: flex;
-    justify-content: space-between;
-    margin-bottom: 20px;*/
 }
 
 input[type="date"] {
@@ -66,28 +63,22 @@ input[type="date"] {
 
   font-size: 1rem;
   color: #666;
-    /*width: 45%;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    font-size: 1rem;*/
 }
 
 input[type="date"]::-webkit-calendar-picker-indicator {
   opacity: 1;
   filter: invert(46%) sepia(42%) saturate(748%) hue-rotate(135deg) brightness(95%) contrast(95%);
   cursor: pointer;
-
 }
 
 input:focus, textarea:focus, select:focus {
-    border-color: #20c0bd; /* your custom border color */
-    outline: none; /* remove extra outline if any */
+  border-color: #20c0bd;
+  outline: none;
 }
 
 .input-group{
-    flex: 1; /* Each date input will take 50% */
-    display: flex;
+  flex: 1; /* Each date input will take 50% */
+  display: flex;
 }
 
 .input-group label{
@@ -132,7 +123,6 @@ input:focus, textarea:focus, select:focus {
 
 .report{
   margin-top: 30px;
-  padding: 20px;
   background: #f7f8fc;
   border-radius: 10px;
 }
@@ -143,26 +133,41 @@ input:focus, textarea:focus, select:focus {
 }
 
 .report .date-style{
+  color: #4a4c6c;
+  /*font-style: italic;*/
+  font-size: smaller;
+}
+
+.custom-list {
+  list-style: none;
+  border-left: 4px solid #20c0bd;
+  background-color: #f9fefe;
+  padding: 10px 15px;
+  margin-top: 15px;
   color: #0a2640;
-  font-style: italic;
+  font-size: 16px;
+}
+
+.custom-list::before {
+  content: '\2022';
+  color: #20c0bd;
+  font-size: 20px;
+  position: absolute;
+  left: 15px;
+  top: 0;
 }
 
 .goals-section, .images-section {
   margin-top: 30px;
-  text-align: left; /* left-align content inside sections */
+  text-align: left;
 }
 
 .goals-section h4, .images-section h4 {
-  color: #20c0bd;
+  color: #4a4c6c;
   margin-bottom: 15px;
+  font-weight: bold;
 }
 
-  /*h4 {
-    font-size: 1.5rem;
-    margin-bottom: 15px;
-    color: #333;
-  }*/
-
 ul {
   list-style-type: disc;
   padding-left: 20px;
@@ -188,24 +193,18 @@ li {
 }
 
 .image-wrapper {
-    /*max-width: 300px;*/
-
-  width: 100%; /* Full width of container */
-  max-width: 500px; /* Set a bigger max width */
+  width: 100%;
+  max-width: 500px;
   height: auto;
   border: 1px solid #ccc;
   border-radius: 10px;
   overflow: hidden;
   background: #f9f9f9;
   padding: 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 
 .analytics-image {
-    /*width: 100%;
-    height: auto;
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);*/
-
   width: 100%;
   height: auto;
   object-fit: contain;
@@ -270,40 +269,78 @@ SECTION 2
 
 table {
   width: 100%;
-  margin: 30px auto;
   border-collapse: collapse;
-  border-radius: 10px;
+  font-size: 14px;
+  margin-bottom: 20px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  border-radius: 6px;
   overflow: hidden;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  background-color: #ffffff;
+  background-color: #f3f9fb;
 }
 
 th {
-  background-color: #0a2640;
+  background-color: #20c0bd;
   color: white;
-  padding: 12px;
+  padding: 8px 12px;
+  /*border: 1px solid #ddd;*/
   text-align: left;
-  font-weight: bold;
+  font-weight: 600;
 }
 
 td {
-  padding: 12px;
-  color: #333;
-  border-top: 1px solid #eee;
+  padding: 10px 15px;
+  border-bottom: 1px solid #eaeaea;
+  /*border: 1px solid #ddd;*/
 }
 
 tr:nth-child(even) {
-  background-color: #f7f8fc;
+  background-color: #f9ffff;
 }
 
 tr:hover {
-  background-color: #e0f7f6;
+  background-color: #ddecec;
+}
+
+.table-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.table-container {
+  flex: 1;
+  min-width: 300px;
+}
+
+.badge {
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  display: inline-block;
+}
+
+.mini-list {
+  list-style: none;
+  padding-left: 0;
+}
+
+.mini-list li {
+  padding: 6px 0;
+  border-bottom: 1px solid #eee;
 }
 
 h5 {
-  color: #20c0bd;
+  color: #4a4c6c;
   margin: 20px 0 10px;
   font-size: 1.3rem;
+  font-weight: bold;
+}
+
+hr {
+  /*border: none;*/
+  border-top: 2px solid #e0f7f6;
+  margin: 20px 0;
+  color: #20c0bd;
 }
 
 @media (max-width: 768px) {
diff --git a/Interface/src/Components/page-analytics/page-analytics.component.html b/Interface/src/Components/page-analytics/page-analytics.component.html
index 7c320d81..4f18d16b 100644
--- a/Interface/src/Components/page-analytics/page-analytics.component.html
+++ b/Interface/src/Components/page-analytics/page-analytics.component.html
@@ -30,8 +30,8 @@ <h2>{{ 'ANALYTICS_PAGE_DESCRIPTION' | translate }}</h2>
       <div *ngIf="goals.length > 0" class="goals-section">
 
         <!--Report Header-->
-        <h3 style="text-align: center;">{{pageName}} {{'IMPACT_REPORT' | translate}}</h3>
-        <h3 style="text-align: center;">
+        <h3 style="text-align: center; font-weight: bold; margin-top: 50px;">{{pageName}} {{'IMPACT_REPORT' | translate}}</h3>
+        <h3 style="text-align: center; font-weight: bold;">
           {{ 'REPORT_FROM' | translate }} 
           <span class="date-style">{{ startDate }}</span>
           {{ 'TO' | translate }} 
@@ -39,15 +39,17 @@ <h3 style="text-align: center;">
         </h3>
 
         <!--Goals section-->
-        <h4><img src="assets/icons/dot-arrow.png">{{ 'GOALS' | translate }}:</h4>
+        <h4><img src="assets/icons/dot-arrow.png" alt="icon" style="width: 24px; height: 24px; margin-right: 10px;">{{ 'GOALS' | translate }}:</h4>
         <ul>
-          <li *ngFor="let goal of goals">{{ goal }}</li>
+          <li *ngFor="let goal of goals" class="custom-list">{{ goal }}</li>
         </ul>
       </div>
 
+      <hr>
+
       <!--Images Section-->
       <div *ngIf="chartImages.length > 0" class="images-section">
-        <h4><img src="assets/icons/dot-arrow.png">{{ 'ANALYTICS_IMAGES' | translate }}:</h4>
+        <h4><img src="assets/icons/dot-arrow.png" alt="icon" style="width: 24px; height: 24px; margin-right: 10px;">{{ 'ANALYTICS_IMAGES' | translate }}:</h4>
         <div class="images-container">
           <div *ngFor="let img of chartImages" class="image-wrapper">
             <img [src]="img" alt="Analytics Chart" class="analytics-image" />
@@ -55,55 +57,66 @@ <h4><img src="assets/icons/dot-arrow.png">{{ 'ANALYTICS_IMAGES' | translate }}:<
         </div>
       </div>
 
+      <hr>
+
       <!--Tables-->
+
       <div *ngIf="metrics" class="goals-section">
-        <h4><img src="assets/icons/dot-arrow.png">{{ 'METRICS' | translate }}:</h4>
+        <h4><img src="assets/icons/dot-arrow.png" alt="icon" style="width: 24px; height: 24px; margin-right: 10px;">{{ 'METRICS' | translate }}:</h4>
 
         <!-- Sentiment Counts -->
-        <h5>{{ 'SENTIMENT_COUNTS' | translate }}</h5>
+        <h5><img src="assets/icons/try.png" alt="icon" style="width: 24px; height: 24px; margin-right: 10px; margin-left: 10px;">{{ 'SENTIMENT_COUNTS' | translate }}</h5>
         <table>
           <tr>
-            <th>{{ 'SENTIMENT' | translate }}</th>
-            <th>{{ 'COUNT' | translate }}</th>
+            <th>{{ 'NEGATIVE' | translate }}</th>
+            <th>{{ 'POSITIVE' | translate }}</th>
+            <th>{{ 'NEUTRAL' | translate }}</th>
           </tr>
-          <tr *ngFor="let sentiment of getMetricKeys('sentiment_counts')">
-            <td>{{ sentiment.charAt(0).toUpperCase() + sentiment.slice(1) }}</td>
-            <td>{{ metrics.sentiment_counts[sentiment] }}</td>
-          </tr>
-        </table>
-
-        <!-- Topic Counts -->
-        <h5>{{ 'TOPIC_COUNTS' | translate }}</h5>
-        <table>
           <tr>
-            <th>{{ 'TOPIC' | translate }}</th>
-            <th>{{ 'COUNT' | translate }}</th>
-          </tr>
-          <tr *ngFor="let topic of getMetricKeys('topic_counts')">
-            <ng-container *ngIf="topic !== 'NONE'">
-              <td>{{ formatValue(topic) }}</td>
-              <td>{{ metrics.topic_counts[topic] }}</td>
-            </ng-container>
+            <td>{{ metrics.sentiment_counts.negative }}</td>
+            <td>{{ metrics.sentiment_counts.positive }}</td>
+            <td>{{ metrics.sentiment_counts.neutral }}</td>
           </tr>
         </table>
 
-        <!-- Top 5 Topics -->
-        <h5>{{ 'TOP_5_TOPICS' | translate }}</h5>
-        <table>
-          <tr>
-            <th>{{ 'TOPIC' | translate }}</th>
-            <th>{{ 'COUNT' | translate }}</th>
-          </tr>
-          <tr *ngFor="let topic of getMetricKeys('top_5_topics')">
-            <ng-container *ngIf="topic !== 'NONE'">
-              <td>{{ formatValue(topic) }}</td>
-              <td>{{ metrics.top_5_topics[topic] }}</td>
-            </ng-container>
-          </tr>
-        </table>
+        <!-- Grid Layout for Topics -->
+        <div class="table-grid">
+          <div class="table-container">
+            <!-- Topic Counts -->
+            <h5><img src="assets/icons/try.png" alt="icon" style="width: 24px; height: 24px; margin-right: 10px; margin-left: 10px;">{{ 'TOPIC_COUNTS' | translate }}</h5>
+            <table>
+              <tr>
+                <th>{{ 'TOPIC' | translate }}</th>
+                <th>{{ 'COUNT' | translate }}</th>
+              </tr>
+              <tr *ngFor="let topic of getMetricKeys('topic_counts')">
+                <ng-container *ngIf="topic !== 'NONE'">
+                  <td>{{ formatValue(topic) }}</td>
+                  <td>{{ metrics.topic_counts[topic] }}</td>
+                </ng-container>
+              </tr>
+            </table>
+          </div>
+          <div class="table-container">
+            <!-- Top 5 Topics -->
+            <h5><img src="assets/icons/try.png" alt="icon" style="width: 24px; height: 24px; margin-right: 10px; margin-left: 10px;">{{ 'TOP_5_TOPICS' | translate }}</h5>
+            <table>
+              <tr>
+                <th>{{ 'TOPIC' | translate }}</th>
+                <th>{{ 'COUNT' | translate }}</th>
+              </tr>
+              <tr *ngFor="let topic of getMetricKeys('top_5_topics')">
+                <ng-container *ngIf="topic !== 'NONE'">
+                  <td>{{ formatValue(topic) }}</td>
+                  <td>{{ metrics.top_5_topics[topic] }}</td>
+                </ng-container>
+              </tr>
+            </table>
+          </div>
+        </div>
 
         <!-- Most Frequent Sentiment Per Topic -->
-        <h5>{{ 'MOST_FREQ_SENTIMENT_PER_TOPIC' | translate }}</h5>
+        <h5><img src="assets/icons/try.png" alt="icon" style="width: 24px; height: 24px; margin-right: 10px; margin-left: 10px;">{{ 'MOST_FREQ_SENTIMENT_PER_TOPIC' | translate }}</h5>
         <table>
           <tr>
             <th>{{ 'TOPIC' | translate }}</th>
@@ -113,12 +126,12 @@ <h5>{{ 'MOST_FREQ_SENTIMENT_PER_TOPIC' | translate }}</h5>
             <ng-container *ngIf="topic !== 'NONE'">
               <td>{{ formatValue(topic) }}</td>
               <td>{{ metrics.most_freq_sentiment_per_topic[topic].charAt(0).toUpperCase() + metrics.most_freq_sentiment_per_topic[topic].slice(1)}}</td>
+              <!--<td>{{ metrics.most_freq_sentiment_per_topic[topic] | titlecase }}</td>-->
             </ng-container>
           </tr>
         </table>
 
-        <!-- Most Frequent Topic Per Sentiment -->
-        <h5>{{ 'MOST_FREQ_TOPIC_PER_SENTIMENT' | translate }}</h5>
+        <h5 style="margin-top: 40px;"><img src="assets/icons/try.png" alt="icon" style="width: 24px; height: 24px; margin-right: 10px; margin-left: 10px;">{{ 'MOST_FREQ_TOPIC_PER_SENTIMENT' | translate }}</h5>
         <table>
           <tr>
             <th>{{ 'SENTIMENT' | translate }}</th>
@@ -126,7 +139,7 @@ <h5>{{ 'MOST_FREQ_TOPIC_PER_SENTIMENT' | translate }}</h5>
           </tr>
           <ng-container *ngFor="let sentiment of getMetricKeys('most_freq_topic_per_sentiment')">
             <tr *ngIf="metrics.most_freq_topic_per_sentiment[sentiment] !== 'NONE'">
-              <td>{{ sentiment.charAt(0).toUpperCase() + sentiment.slice(1) }}</td>
+              <td>{{ sentiment | titlecase }}</td>
               <td>{{ formatValue(metrics.most_freq_topic_per_sentiment[sentiment]) }}</td>
             </tr>
           </ng-container>
diff --git a/Interface/src/assets/i18n/ar.json b/Interface/src/assets/i18n/ar.json
index 01c19b70..5e53bbaa 100644
--- a/Interface/src/assets/i18n/ar.json
+++ b/Interface/src/assets/i18n/ar.json
@@ -136,5 +136,8 @@
   "LOGIN_FAILED": "فشل تسجيل الدخول",
   "INVALID_CREDENTIALS": "بيانات الاعتماد غير صحيحة",
   "OK": "حسنًا",
-  "IMPACT_REPORT": "IMPACT_REPORT"
+  "IMPACT_REPORT": "تقرير تأثير",
+  "NEGATIVE": "سلبي",
+  "POSITIVE": "إيجابي",
+  "NEUTRAL": "محايد"
 }
diff --git a/Interface/src/assets/i18n/en.json b/Interface/src/assets/i18n/en.json
index 0540270b..e01bc9df 100644
--- a/Interface/src/assets/i18n/en.json
+++ b/Interface/src/assets/i18n/en.json
@@ -136,5 +136,8 @@
   "LOGIN_FAILED": "Login Failed",
   "INVALID_CREDENTIALS": "Invalid credentials",
   "OK": "Ok",
-  "IMPACT_REPORT": "Impact Report"
+  "IMPACT_REPORT": "Impact Report",
+  "NEGATIVE": "Negative",
+  "POSITIVE": "Positive",
+  "NEUTRAL": "Neutral"
 }
diff --git a/Interface/src/assets/i18n/es.json b/Interface/src/assets/i18n/es.json
index a80b8d70..11ae4953 100644
--- a/Interface/src/assets/i18n/es.json
+++ b/Interface/src/assets/i18n/es.json
@@ -136,5 +136,8 @@
   "LOGIN_FAILED": "Error al Iniciar Sesión",
   "INVALID_CREDENTIALS": "Credenciales inválidas",
   "OK": "Aceptar",
-  "IMPACT_REPORT": "INFORME DE IMPACTO"
+  "IMPACT_REPORT": "INFORME DE IMPACTO",
+  "NEGATIVE": "Negativo",
+  "POSITIVE": "Positiva",
+  "NEUTRAL": "Neutro"
 }
diff --git a/Interface/src/assets/i18n/fr.json b/Interface/src/assets/i18n/fr.json
index 08968b29..11670edd 100644
--- a/Interface/src/assets/i18n/fr.json
+++ b/Interface/src/assets/i18n/fr.json
@@ -136,5 +136,8 @@
   "LOGIN_FAILED": "Échec de la Connexion",
   "INVALID_CREDENTIALS": "Identifiants invalides",
   "OK": "Ok",
-  "IMPACT_REPORT": "RAPPORT D'IMPACT"
+  "IMPACT_REPORT": "RAPPORT D'IMPACT",
+  "NEGATIVE": "Négatif",
+  "POSITIVE": "Positive",
+  "NEUTRAL": "Neutre"
 }
diff --git a/Interface/src/assets/icons/try.png b/Interface/src/assets/icons/try.png
new file mode 100644
index 0000000000000000000000000000000000000000..b3e1184ae3f7eeeb05f4c88157eae9ae4c673d6c
GIT binary patch
literal 619
zcmV-x0+juUP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00009a7bBm000id
z000id0mpBsWB>pF8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H10r*Ko
zK~zYI)m6J|6hRpOzS(<u5HSW3V!WNr1+OrTMvz2}Y&=A4V&MZj(ZWiwu}hIwEB^&6
zVGBXTLv(g#Hn$uSt`QN02stE`AY$Rg+tdAQa*-2v?{*;uf7LvGk8g%~0Q_$_B*fTw
z^I5UiXWSFFxt9025|?^|T*{M^N>qWCS<(Q5F`oZcTrpSN;{X5{MdV6x04TI<`+XG0
z^j;mqpGK}_+pB;`6OG26joI1nN3<RbFnokS4>M8XmTk9s?TYV@bh_OxGCEHLWeh>C
zFD$$vhF=N80w7YUULQ4r%_>*wW4jQnWjfingt!#D+^JeE4~}C15pw0;IPAY1j}-tw
zNy-^hiw9+;releg7H3RP-kfPRvj6}<%gofm9u%<qm}tD%&$W9!YQ9vjk0$Z!KZcHD
zWP{wTOuO?WQt%^KOcKx!A_T`V;wYAsl~mrA5C<(KE~gU5V0(+gEL6Ms;`3odTbD3d
z07G2cn48-iMud#!69=r%pIaSP1Yy`7n)}bdJ#lR(e7Cm<0l!SWuI(LIh!PjlMG@hk
z_n#}Z&(iW<65HQ~h-7)EPYo#ItU>rVNkAVg?cU+ay<749kw51ql{%5y_-`mHHO-}5
z+zP&8dh%i#pU58#a=|AEavuNyiU&SFeRuR~kgC$1#xL)nt&i+R0y6*r002ovPDHLk
FV1m-Q3SR&K

literal 0
HcmV?d00001