Language Selector

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 }
     });
   }
 

Interface/src/Components/home/home.component.html

@@ -4,7 +4,7 @@
     <ng-container *ngIf="isLoggedIn; else notLoggedIn">
       <h1 style="color: #20c0bd;">{{ 'WELCOME_TITLE' | translate }}</h1>
       <p style="color: #f7f8fc;">{{ 'WELCOME_SUBTITLE' | translate }}</p>
-      <button class="gif-button" (click)="onButtonClick()" routerLink="/dashboard" routerLinkActive="active" style="color: #f7f8fc;">
+      <button class="gif-button" (click)="onButtonClick()" routerLink="/dashboard" routerLinkActive="active" style="color: #f7f8fc; font-weight: bold; font-size: 24px;">
         <img src="assets/gif/report.webp" alt="Button GIF"> {{ 'CREATE_REPORT' | translate }}
       </button>
     </ng-container>

Interface/src/Components/navbar/navbar.component.css

@@ -173,7 +173,6 @@ body {
 
 .language-switcher select {
   appearance: none;
-  -webkit-appearance: none;
   -moz-appearance: none;
   padding: 6px 40px 6px 12px;
   border-radius: 6px;
@@ -185,6 +184,7 @@ body {
   cursor: pointer;
   position: relative;
   min-width: 120px;
+  margin-bottom: 10px;
 
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;

Interface/src/Components/navbar/navbar.component.html

@@ -11,12 +11,11 @@
 
   <ul class="navbar-links" [ngClass]="{ 'open': menuOpen }">
     <li class="language-switcher">
-        <label for="language-selector">🌐 &nbsp;</label>
         <select [value]="getCurrentLanguage()" (change)="switchLanguage($any($event.target).value)" id="language-selector">
-          <option value="en">English</option>
-          <option value="ar">العربية</option>
-          <option value="fr">français</option>
-          <option value="es">español</option>
+          <option value="en">🌍 English</option>
+          <option value="ar"> 🌍 العربية</option>
+          <option value="fr">🌍 français</option>
+          <option value="es">🌍 español</option>
         </select>
     </li>
     <li><a routerLink="/home" routerLinkActive="active active-link" [routerLinkActiveOptions]="{ exact: true }">{{ 'HOME' | translate }}</a></li>

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,42 +52,33 @@ h2 {
   display: flex;
   gap: 20px;
   margin-bottom: 20px;
-    /*display: flex;
-    justify-content: space-between;
-    margin-bottom: 20px;*/
 }
 
 input[type="date"] {
   width: 100%;
   padding: 10px;
   margin-top: 5px;
   border: 1px solid #ccc;
-  border-radius: 5px;
+  border-radius: 5px !important;
 
   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;
 }
@@ -142,22 +132,42 @@ input:focus, textarea:focus, select:focus {
   margin-bottom: 20px;
 }
 
+.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-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;
@@ -183,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;
@@ -265,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) {