AutomatedProcessImprovement · abakumova · Jul 7, 2024 · Jul 5, 2024
diff --git a/src/assets/styles/analyticalView.scss b/src/assets/styles/analyticalView.scss
@@ -35,6 +35,10 @@
       border-radius: 10px;
       position: relative;
 
+      &.next_activity {
+        background-color: transparent;
+      }
+
       .recommendation-status {
         position: absolute;
         right: 0;

diff --git a/src/assets/styles/case.scss b/src/assets/styles/case.scss
@@ -69,6 +69,10 @@
     .case-performance {
       padding-right: 20px;
     }
+
+    .kpi {
+      margin-right: 1em;
+    }
   }
 }
 

diff --git a/src/assets/styles/cases.scss b/src/assets/styles/cases.scss
@@ -1,8 +1,7 @@
 // Cases
-
-
 #cases,
-#recommendations {
+#recommendations,
+#resource-management {
   padding: 20px 20px;
   display: flex;
   flex-direction: column;

diff --git a/src/assets/styles/operationalView.scss b/src/assets/styles/operationalView.scss
@@ -54,21 +54,75 @@
     .recommendation {
       display: flex;
       flex-direction: row;
-      margin: 5px 0px;
+      margin: 5px 0;
       padding: 10px;
       transition: .2s;
       background-color: $k-blue3;
       border-radius: 10px;
       justify-content: space-between;
 
-      .column {
-        margin-right: 5px;
+      .recommendation-content {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+      }
+
+      .left-column {
+        flex: 3;
+        margin-right: 10px;
+      }
+
+      .right-column {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+      }
+
+      .text-tooltip-container {
+        display: flex;
+        align-items: center;
+      }
+
+      .button-container {
+        display: flex;
+        justify-content: flex-end;
+        gap: 10px;
+        margin-bottom: 10px;
+      }
+
+      .blue-button {
+        background-color: $k-blue;
+        color: white;
+        border: none;
+        padding: 0.4em 2em;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 15px;
+        margin: 4px 2px;
+        cursor: pointer;
+        border-radius: 25px;
+      }
+
+      &.next_activity {
+        background-color: transparent;
       }
     }
 
-    // .selected{
-    //   background-color: $k-blue4;
-    // }
+  }
+
+  .resource-details {
+    max-width: 60em;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    background-color: $k-white;
+    padding: 15px;
+    border-radius: 10px;
+    height: calc(100vh - 110px - $case-top);
+    overflow-y: auto;
+    margin-right: 1em;
   }
 
 }
diff --git a/src/assets/styles/style.scss b/src/assets/styles/style.scss
@@ -369,7 +369,10 @@ textarea{
 }
 
 .cases-table,
-.recommendations-table {
+.recommendations-table,
+.resources-table {
+  width: 100%;
+  overflow-x: auto;
   display: flex;
   flex: 1;
   align-items: flex-start;
@@ -511,4 +514,72 @@ textarea{
     width: 0 !important;
     height: 0 !important;
   }
+}
+
+.kpi {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  padding: 10px;
+  margin: 10px 10px 0px 0px;
+  background-color: $k-white;
+  box-shadow: 0px 10px 27px rgba(0, 0, 0, 0.05);
+  color: $k-black;
+  border-radius: 10px;
+  transition: 0.2s;
+  height: max-content;
+}
+
+.kpi-number {
+  color: $k-blue;
+}
+
+.show-details {
+  background: none;
+  border: none;
+  font-size: 14px;
+  color: #007bff;
+}
+
+.resources-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+  overflow-x: auto;
+  //min-width: 55rem;
+}
+
+.resources-table th,
+.resources-table td {
+  padding: 8px;
+  vertical-align: middle;
+  border-bottom: 1px solid #ccc;
+  border-top: none !important;
+
+  th.sortable::after, th.vtl-asc::after, th.vtl-desc::after {
+    display: none !important;
+  }
+}
+
+.fixed-width {
+  width: auto;
+  min-width: 13em;
+  text-align: left;
+}
+
+.resource-status {
+  display: inline-block;
+  padding: 4px 8px;
+  text-align: center;
+  font-weight: bold;
+  border-radius: 7px;
+  width: 8em;
+}
+
+.resource-status.available {
+  background: linear-gradient(135deg, $k-green1 5%, $k-green2 100%);
+}
+
+.resource-status.unavailable {
+  background: linear-gradient(135deg, #AAAAAA 0%, #979797 100%);
 }
diff --git a/src/common/utils.js b/src/common/utils.js
@@ -76,6 +76,14 @@ export default {
       pStatus: (p) => p.status,
       pIsRecommended: (p) => p.output.cate > 0
     },
+    'RESOURCE_ALLOCATION': {
+      pType: 'Resource allocation',
+      pColor: 'background-green',
+      pText: (p) => `Allocate resource ${p.output.resource} until ${new Date(p.output.allocated_until).toLocaleString()}`,
+      pMetric: (p) => `Causal effect: ${p.output.cate_category} (${p.output.cate})`,
+      pStatus: (p) => p.status,
+      pIsRecommended: (p) => p.output.cate > 0
+    }
   },
 
   parseDuration(duration) {

diff --git a/src/components/OngoingChartsManagerComponent.vue b/src/components/OngoingChartsManagerComponent.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="cases-charts">
+    <div class="cases-chart shadow">
+      <h3>{{ recommendationTypesTitle }}</h3>
+      <apexchart
+          type="pie"
+          :options="recommendationTypes.chartOptions"
+          :series="recommendationTypes.series">
+      </apexchart>
+    </div>
+    <div class="cases-chart shadow">
+      <h3>{{ recommendationsAcceptanceTitle }}</h3>
+      <apexchart type="pie"
+                 :options="recommendationsAcceptance.chartOptions"
+                 :series="recommendationsAcceptance.series">
+      </apexchart>
+    </div>
+  </div>
+</template>
+
+<script>
+import VueApexCharts from 'vue3-apexcharts';
+
+export default {
+  name: "CustomChartsComponent",
+  components: {
+    apexchart: VueApexCharts,
+  },
+  props: {
+    cases: {
+      type: Array,
+      required: true,
+    },
+    casesData: {
+      type: Array,
+      required: true,
+      validator: function (value) {
+        return value.length === 2 && value.every(v => typeof v === 'number');
+      }
+    },
+    alarmThreshold: {
+      type: Number,
+      required: true,
+    },
+    recommendationTypesTitle: {
+      type: String,
+      default: 'Recommendation Types',
+    },
+    recommendationsAcceptanceTitle: {
+      type: String,
+      default: 'Recommendations Acceptance',
+    },
+  },
+  data() {
+    return {
+      recommendationTypes: {
+        series: this.casesData,
+        chartOptions: this.initChartOptions(['#56CCF2', '#F2994A'], ['Cases with recommendations', 'Cases without recommendations']),
+      },
+      recommendationsAcceptance: {
+        series: [],
+        chartOptions: this.initChartOptions(['#17ad37', '#7e7e7e'], ['Recommendations accepted', 'Recommendations declined']),
+      },
+    };
+  },
+  watch: {
+    cases: {
+      immediate: true,
+      handler() {
+        this.processData();
+      },
+    },
+    casesData: {
+      immediate: true,
+      handler(newVal) {
+        this.recommendationTypes.series = newVal;
+      },
+    }
+  },
+  methods: {
+    initChartOptions(colors, labels) {
+      return {
+        colors: colors,
+        chart: {
+          animations: {
+            enabled: false,
+          },
+          type: 'pie',
+        },
+        labels: labels,
+        responsive: [{
+          breakpoint: 480,
+          options: {
+            chart: {
+              width: 200
+            },
+            legend: {
+              position: 'bottom',
+            }
+          }
+        }]
+      };
+    },
+    processData() {
+      const typeCounts = { total: 0, accepted: 0 };
+      this.cases.forEach(caseItem => {
+        caseItem.activities.forEach(activity => {
+          activity.prescriptions.forEach(prescription => {
+            if (prescription.status === 'accepted') {
+              typeCounts.accepted++;
+            }
+            typeCounts.total++;
+          });
+        });
+      });
+
+      this.recommendationsAcceptance.series = [typeCounts.accepted, typeCounts.total - typeCounts.accepted];
+    }
+  },
+};
+</script>
diff --git a/src/components/PositiveOutcomeItemComponent.vue b/src/components/PositiveOutcomeItemComponent.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="stats-card column">
+    <p>Target</p>
+    <h3 class="blue target-value">{{ object.value }} {{ object.unit }}</h3>
+    <small>Case {{ object.column }} {{ object.operator }}</small>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'PositiveOutcomeItemComponent',
+  props: {
+    object: undefined
+  },
+  computed: {
+    value() {
+      return this.positiveOutcomeItems.value;
+    },
+    unit() {
+      return this.positiveOutcomeItems.unit;
+    },
+    column() {
+      return this.positiveOutcomeItems.column;
+    },
+    operator() {
+      return this.positiveOutcomeItems.operator;
+    }
+  }
+}
+</script>
-Original file line number
+Diff line change
@@ Expand Up / @@ -69,6 +69,10 @@ @@
         .case-performance {
           padding-right: 20px;
         }
+        .kpi {
+          margin-right: 1em;
+        }
       }
     }
@@ Expand Down @@