FOUR-20544: Review the general status of the process

resources/js/requests/show.js

@@ -16,6 +16,7 @@ import FilesMobile from "./components/FilesMobile.vue";
 import RequestHeaderMobile from "./components/RequestHeaderMobile.vue";
 import FilterMobile from "../Mobile/FilterMobile.vue";
 import FilterMixin from "../Mobile/FilterMixin";
+import NewOverview from "../../jscomposition/cases/casesDetail/components/NewOverview.vue";
 
 Vue.component("DataSummary", DataSummary);
 Vue.component("RequestDetail", RequestDetail);
@@ -31,6 +32,7 @@ Vue.component("SummaryMobile", SummaryMobile);
 Vue.component("FilesMobile", FilesMobile);
 Vue.component("RequestHeaderMobile", RequestHeaderMobile);
 Vue.component("FilterMobile", FilterMobile);
+Vue.component("NewOverview", NewOverview);
 Vue.mixin(FilterMixin);
 
 Vue.use("vue-form-renderer", VueFormRenderer);

resources/jscomposition/cases/casesDetail/components/MapLegend.vue

@@ -0,0 +1,44 @@
+<template>
+  <div
+    id="map-legend"
+    class="tw-absolute tw-top-12 tw-right-12 tw-rounded-md tw-shadow-md tw-bg-white tw-z-10"
+  >
+    <div class="tw-p-4 tw-flex tw-flex-col">
+      <p
+        v-for="(status, index) in statusLegend"
+        :key="index"
+        class="tw-font-bold tw-mb-2 tw-flex tw-items-center tw-gap-2"
+      >
+        <span
+          :style="{ backgroundColor: status.color }"
+          class="tw-inline-block tw-w-1 tw-h-8 tw-mr-4 tw-border-r-3 tw-border-r-gray-400 tw-transform tw-rotate-45"
+        />
+        {{ status.name }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const translate = ProcessMaker.i18n;
+
+const statusLegend = ref(
+  [
+    {
+      name: translate.t("In Progress"),
+      color: "#3FA6FF",
+    },
+    {
+      name: translate.t("Completed"),
+      color: "#00BA7C",
+    },
+    {
+      name: translate.t("Pending / Not Executed"),
+      color: "#CCCCCC",
+    },
+  ],
+);
+
+</script>

resources/jscomposition/cases/casesDetail/components/NewOverview.vue

@@ -3,6 +3,7 @@
     class="tw-w-full tw-h-full tw-overflow-hidden tw-relative"
     data-test="body-container"
   >
+    <MapLegend />
     <ProcessMapTooltip
       v-show="showTooltip"
       ref="tooltipRef"
@@ -41,6 +42,7 @@ import {
 } from "vue";
 import { Modeler } from "@processmaker/modeler";
 import ProcessMapTooltip from "../../../../js/processes/modeler/components/ProcessMapTooltip.vue";
+import MapLegend from "./MapLegend.vue";
 import { getInflightData } from "../variables";
 
 const keyModeler = ref(Math.random());