From 170663bf4f065506e9f4d5f42c2dbf5f533c4dc3 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Wed, 14 May 2025 15:51:01 -0400
Subject: [PATCH 1/7] FOUR-24227:Add in the display screen a New control - Case
 Progress Bar

---
 src/components/index.js                       |   3 +-
 src/components/renderer/case-progress-bar.vue | 189 ++++++++++++++++++
 src/components/renderer/index.js              |   1 +
 src/form-builder-controls.js                  |  28 +++
 4 files changed, 220 insertions(+), 1 deletion(-)
 create mode 100644 src/components/renderer/case-progress-bar.vue

diff --git a/src/components/index.js b/src/components/index.js
index 5740296da..d44f2c126 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -48,7 +48,7 @@ import FormListTable from "./renderer/form-list-table.vue";
 import FormAnalyticsChart from "./renderer/form-analytics-chart.vue";
 import accordions from "@/components/accordions";
 import VariableNameGenerator from "@/components/VariableNameGenerator";
-import { LinkButton } from "./renderer";
+import { LinkButton, CaseProgressBar } from "./renderer";
 import "../assets/css/tabs.css";
 import FormCollectionRecordControl from "./renderer/form-collection-record-control.vue";
 import FormCollectionViewControl from "./renderer/form-collection-view-control.vue";
@@ -166,6 +166,7 @@ export default {
     Vue.use(Vuex);
     Vue.component("FormListTable", FormListTable);
     Vue.component("LinkButton", LinkButton);
+    Vue.component("CaseProgressBar", CaseProgressBar);
     Vue.component("FormCollectionRecordControl", FormCollectionRecordControl);
     Vue.component("FormCollectionViewControl", FormCollectionViewControl);
     const store = new Vuex.Store({
diff --git a/src/components/renderer/case-progress-bar.vue b/src/components/renderer/case-progress-bar.vue
new file mode 100644
index 000000000..9bae9ee5a
--- /dev/null
+++ b/src/components/renderer/case-progress-bar.vue
@@ -0,0 +1,189 @@
+<template>
+  <div v-if="stagesPerCase.length > 0">
+    <div class="pipeline-wrapper">
+      <div class="pipeline">
+        <div
+          v-for="(stage, index) in stagesPerCase"
+          :key="index"
+          class="stage-container"
+        >
+          <div
+            :class="['stage-block', getStageClass(stage.status)]"
+            :style="getClipPathStyle(index)"
+          >
+            <div class="stage-name">{{ stage.name }}</div>
+            <template v-if="validateDate(stage.completed_at)">
+              <div class="stage-date">{{ formatDate(stage.completed_at) }}</div>
+            </template>
+            <template v-else>
+              <div class="stage-status">{{ getStatusLabel(stage.status) }}</div>
+            </template>
+          </div>
+          <!-- Connector Arrow, not shown after last block -->
+          <div
+            v-if="index < stagesPerCase.length - 1"
+            :class="['arrow-connector', getStageClass(stage.status)]"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from "moment";
+import { getUserDateFormat } from "@processmaker/vue-form-elements";
+
+export default {
+  props: ["label", "event", "eventData"],
+  data() {
+    return {
+      stagesPerCase: [],
+      stagesStatus: {
+        Done: "closed",
+        "In Progress": "active",
+        Pending: "pending"
+      }
+    };
+  },
+  mounted() {
+    const { caseNumber } = window.ProcessMaker;
+    this.getStageStatus(caseNumber);
+  },
+  methods: {
+    getStageStatus(caseNumber) {
+      ProcessMaker.api
+        .get(`cases/${caseNumber}/stages_bar`)
+        .then((response) => {
+          this.stagesPerCase = response.data.stages_per_case;
+        })
+        .catch((error) => {
+          console.error("Error fetching data:", error);
+        });
+    },
+    validateDate(date) {
+      return date && date !== "null";
+    },
+    getStageClass(status) {
+      return this.stagesStatus[status] || "pending";
+    },
+    getStatusLabel(status) {
+      if (status === "Done") return "Completed";
+      return status || "Pending";
+    },
+    formatDate(date) {
+      if (!date || date === "null") return "";
+      return moment
+        .utc(date, [getUserDateFormat(), moment.ISO_8601], true)
+        .toISOString()
+        .split(RegExp("T[0-9]"))[0];
+    },
+    getClipPathStyle(index) {
+      if (index === 0) {
+        return {
+          clipPath: "none"
+        };
+      }
+      if (this.stagesPerCase.length > 1) {
+        return {
+          clipPath: "polygon(0 0, 100% 0, 100% 100%, 0px 100%, 20px 50%)"
+        };
+      }
+      return {
+        clipPath: "none"
+      };
+    }
+  }
+};
+</script>
+<style scoped>
+.pipeline-wrapper {
+  width: 100%;
+  overflow-x: hidden;
+  padding: 10px;
+}
+.pipeline {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+}
+.stage-container {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  margin-left: -10px;
+  align-self: stretch;
+}
+
+.stage-block {
+  flex: 1;
+  height: 100px;
+  padding: 22px 8px 40px 44px;;
+  color: #333;
+  text-align: center;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 4px;
+  transition: background-color 0.3s ease;
+  box-sizing: border-box;
+}
+.stage-block.active {
+  background-color: #ffcc99;
+}
+.stage-block.closed {
+  background-color: #ffd9b3;
+}
+.stage-block.pending {
+  background-color: #f0f0f0;
+  color: #999;
+}
+.stage-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: break-spaces;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: -0.16px;
+}
+.stage-status,
+.stage-date {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: -0.12px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.75);
+  position: absolute;
+  right: 4.999px;
+  bottom: 12px;
+  display: flex;
+  padding: 2px 6px;
+  align-items: center;
+  gap: 10px;
+}
+
+.arrow-connector {
+  width: 0;
+  height: 0;
+  border-top: 50px solid transparent;
+  border-bottom: 50px solid transparent;
+  border-left: 20px solid;
+  flex-shrink: 0;
+}
+.arrow-connector.active {
+  color: #ffcc99;
+}
+.arrow-connector.closed {
+  color: #ffd9b3;
+}
+.arrow-connector.pending {
+  color: #f0f0f0;
+}
+</style>
diff --git a/src/components/renderer/index.js b/src/components/renderer/index.js
index dc0a61768..aca6deff0 100755
--- a/src/components/renderer/index.js
+++ b/src/components/renderer/index.js
@@ -21,3 +21,4 @@ export { default as FormTasks } from "./form-tasks.vue";
 export { default as LinkButton } from "./link-button.vue";
 export { default as FormCollectionRecordControl } from "./form-collection-record-control.vue";
 export { default as FormCollectionViewControl } from "./form-collection-view-control.vue";
+export { default as CaseProgressBar } from "./case-progress-bar.vue";
diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index 46a8ca53e..ab6ee7077 100755
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -26,6 +26,7 @@ import {
 } from '@processmaker/vue-form-elements';
 import { dataSourceValues } from '@/components/inspector/data-source-types';
 import LinkButton from "./components/renderer/link-button.vue";
+import CaseProgressBar from "./components/renderer/case-progress-bar.vue";
 
 import {
   bgcolorProperty,
@@ -50,6 +51,8 @@ import {
   bgcolorPropertyRecord,
   colorPropertyRecord,
 } from './form-control-common-properties';
+import { editor } from 'monaco-editor';
+import { render } from 'mustache';
 
 export default [
   {
@@ -1209,5 +1212,30 @@ export default [
         }
       ],
     },
+  },
+  {
+    editorComponent: CaseProgressBar,
+    editorBinding: 'CaseProgressBar',
+    rendererComponent: CaseProgressBar,
+    rendererBinding: 'CaseProgressBar',
+    control: {
+      popoverContent: "Add a progress bar to show the status of a case",
+      order: 7.0,
+      group: 'Dashboards',
+      label: 'Case Progress Bar',
+      component: 'CaseProgressBar',
+      'editor-component': 'CaseProgressBar',
+      'editor-control': 'CaseProgressBar',
+      config: {
+        label: 'New Case Progress Bar',
+        icon: 'fas fa-chart-bar',
+        variant: 'primary',
+        event: 'submit',
+        name: null,
+        fieldValue: null,
+        tooltip: {},
+      },
+      inspector: [],
+    }
   }
 ];

From 2308d8ce5d10f617cb033ce08d8255de47fdf648 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Wed, 14 May 2025 15:54:10 -0400
Subject: [PATCH 2/7] validation

---
 src/components/renderer/case-progress-bar.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/renderer/case-progress-bar.vue b/src/components/renderer/case-progress-bar.vue
index 9bae9ee5a..fd3149c78 100644
--- a/src/components/renderer/case-progress-bar.vue
+++ b/src/components/renderer/case-progress-bar.vue
@@ -52,6 +52,10 @@ export default {
   },
   methods: {
     getStageStatus(caseNumber) {
+      if (!caseNumber) {
+        console.error("Case number is not defined.");
+        return;
+      }
       ProcessMaker.api
         .get(`cases/${caseNumber}/stages_bar`)
         .then((response) => {

From 332dd18bfd8dc42835bc2d49c1bca07df7116810 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Thu, 15 May 2025 16:41:35 -0400
Subject: [PATCH 3/7] Update

---
 src/components/renderer/case-progress-bar.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/renderer/case-progress-bar.vue b/src/components/renderer/case-progress-bar.vue
index fd3149c78..0bc3e9484 100644
--- a/src/components/renderer/case-progress-bar.vue
+++ b/src/components/renderer/case-progress-bar.vue
@@ -28,6 +28,17 @@
       </div>
     </div>
   </div>
+  <div v-else>
+    <div class="pipeline-wrapper">
+      <div class="pipeline">
+        <div class="stage-container">
+          <div class="stage-block pending">
+            <div class="stage-name">No stages available</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -38,6 +49,7 @@ export default {
   props: ["label", "event", "eventData"],
   data() {
     return {
+      caseNumber: null,
       stagesPerCase: [],
       stagesStatus: {
         Done: "closed",
@@ -47,8 +59,8 @@ export default {
     };
   },
   mounted() {
-    const { caseNumber } = window.ProcessMaker;
-    this.getStageStatus(caseNumber);
+    this.caseNumber = window.ProcessMaker?.caseNumber;
+    this.getStageStatus(this.caseNumber);
   },
   methods: {
     getStageStatus(caseNumber) {

From 1e5487540dfb8060c0844ec5b210e186154ec2f7 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Thu, 15 May 2025 16:55:32 -0400
Subject: [PATCH 4/7] update timeout for tests

---
 tests/e2e/specs/FOUR6788_ScreenPerformanceTests.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/e2e/specs/FOUR6788_ScreenPerformanceTests.spec.js b/tests/e2e/specs/FOUR6788_ScreenPerformanceTests.spec.js
index 1c3b14a95..b678833e2 100644
--- a/tests/e2e/specs/FOUR6788_ScreenPerformanceTests.spec.js
+++ b/tests/e2e/specs/FOUR6788_ScreenPerformanceTests.spec.js
@@ -1,6 +1,6 @@
 describe("FOUR-6788 screen performance", () => {
   // @todo Improve the boot-time of the stand alone app (general and within cypress)
-  const avgBootTime = 22000;
+  const avgBootTime = 36000;
   const minimumPerformanceScore = 12;
   const accessibility = 50;
 

From 39aeb7f7af191bdb4004c4d5f7bfecba2604f7e7 Mon Sep 17 00:00:00 2001
From: Fabio Rodolfo Guachalla Blanco <frguachallab@gmail.com>
Date: Fri, 16 May 2025 08:31:56 -0400
Subject: [PATCH 5/7] Update form-builder-controls.js

---
 src/form-builder-controls.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index ab6ee7077..3cf165d4f 100755
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -51,8 +51,6 @@ import {
   bgcolorPropertyRecord,
   colorPropertyRecord,
 } from './form-control-common-properties';
-import { editor } from 'monaco-editor';
-import { render } from 'mustache';
 
 export default [
   {

From b007ad39f5e754ae62b865f4dd4e9784156625a4 Mon Sep 17 00:00:00 2001
From: Fabio Rodolfo Guachalla Blanco <frguachallab@gmail.com>
Date: Fri, 16 May 2025 11:26:22 -0400
Subject: [PATCH 6/7] Update case-progress-bar.vue

---
 src/components/renderer/case-progress-bar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/renderer/case-progress-bar.vue b/src/components/renderer/case-progress-bar.vue
index 0bc3e9484..48488ceaf 100644
--- a/src/components/renderer/case-progress-bar.vue
+++ b/src/components/renderer/case-progress-bar.vue
@@ -68,7 +68,7 @@ export default {
         console.error("Case number is not defined.");
         return;
       }
-      ProcessMaker.api
+      ProcessMaker.apiClient
         .get(`cases/${caseNumber}/stages_bar`)
         .then((response) => {
           this.stagesPerCase = response.data.stages_per_case;

From 3f4e9a1b093b8c10797f264184717869e1b130bd Mon Sep 17 00:00:00 2001
From: Paula Quispe <paula.quispe@processmaker.com>
Date: Mon, 19 May 2025 16:23:45 -0400
Subject: [PATCH 7/7] FOUR-24448

---
 src/components/renderer/case-progress-bar.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/renderer/case-progress-bar.vue b/src/components/renderer/case-progress-bar.vue
index 48488ceaf..dc37ea2dd 100644
--- a/src/components/renderer/case-progress-bar.vue
+++ b/src/components/renderer/case-progress-bar.vue
@@ -64,12 +64,12 @@ export default {
   },
   methods: {
     getStageStatus(caseNumber) {
-      if (!caseNumber) {
-        console.error("Case number is not defined.");
-        return;
+      let url_api = 'cases/stages_bar';
+      if (caseNumber) {
+        url_api += `/${caseNumber}`;
       }
       ProcessMaker.apiClient
-        .get(`cases/${caseNumber}/stages_bar`)
+        .get(url_api)
         .then((response) => {
           this.stagesPerCase = response.data.stages_per_case;
         })