Report

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/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) {