From cfb91d13e90a13b74ef43014fb6a98ff58f4903b Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Wed, 4 Sep 2024 13:31:57 -0400
Subject: [PATCH] feature/FOUR-18227

---
 .../components/BaseChart.vue                  |  4 +-
 .../optionsMenu/ChartSaveSearch.vue           | 54 +++++++++++++++++--
 2 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/resources/js/processes-catalogue/components/BaseChart.vue b/resources/js/processes-catalogue/components/BaseChart.vue
index 5d1633ff5a..087d209feb 100644
--- a/resources/js/processes-catalogue/components/BaseChart.vue
+++ b/resources/js/processes-catalogue/components/BaseChart.vue
@@ -280,7 +280,7 @@ export default {
 <style scoped>
 .default-chart {
   width: 325px;
-  margin-top: 16px;
+  margin-top: 24px;
   padding: 20px 0;
   border-radius: 16px;
   border: 0.88px solid #CDDDEE;
@@ -296,7 +296,6 @@ export default {
 }
 @media (width < 1360px) and (width > 768px) {
   .default-chart {
-    margin-top: 0;
     margin-left: 32px;
   }
 }
@@ -305,7 +304,6 @@ export default {
     width: 100%;
     max-width: 100%;
     margin-right: 32px;
-    margin-top: 24px;
   }
 }
 </style>
diff --git a/resources/js/processes-catalogue/components/optionsMenu/ChartSaveSearch.vue b/resources/js/processes-catalogue/components/optionsMenu/ChartSaveSearch.vue
index 65d757c385..51d12b3dca 100644
--- a/resources/js/processes-catalogue/components/optionsMenu/ChartSaveSearch.vue
+++ b/resources/js/processes-catalogue/components/optionsMenu/ChartSaveSearch.vue
@@ -1,19 +1,34 @@
 <template>
   <div>
-    <span class="title">
-      {{ $t('Analytics') }}
-    </span>
-    <base-chart ref="baseChart" :process="process"></base-chart>
+    <div class="title">
+      <span>
+        {{ $t('Analytics') }}
+      </span>
+      <a
+        class="btn btn-link button-view"
+        href="../analytics/process-intelligence"
+      >
+        <span>
+          {{ $t('View More') }}
+        </span>
+        <i class="fas fa-external-link-alt" />
+      </a>
+    </div>
+    <base-chart
+      ref="baseChart"
+      :process="process"
+    />
   </div>
 </template>
 
 <script>
 import BaseChart from "../BaseChart.vue";
+
 export default {
-  props: ["process"],
   components: {
     BaseChart,
   },
+  props: ["process"],
   data() {
     return {
       chart: true,
@@ -26,10 +41,27 @@ export default {
 
 <style scoped>
 .title {
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
   color: #1572C2;
   font-size: 18px;
   font-weight: 700;
   letter-spacing: -0.02em;
+  font-family: Open Sans, 'sans-serif';
+  line-height: 27px;
+  letter-spacing: -0.02em;
+}
+
+.button-view {
+  color: #1572C2;
+  text-transform: capitalize;
+  font-family: Open Sans, 'sans-serif';
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: -0.02em;
+  padding: 0px;
 }
 
 .image-container {
@@ -47,4 +79,16 @@ export default {
   left: 5%; 
   object-fit: cover; 
 }
+
+@media (width < 1360px) and (width > 768px) {
+  .title {
+    margin-left: 32px;
+  }
+}
+@media (min-width: 641px) and (max-width: 768px) {
+  .default-chart {
+    margin-right: 32px;
+    margin-top: 24px;
+  }
+}
 </style>