From 5aff7611f96e603f0825ddc2b9932348acc2246e Mon Sep 17 00:00:00 2001
From: Viktoriia Abakumova <abakumovaviktory@gmail.com>
Date: Fri, 5 Jul 2024 18:00:53 +0300
Subject: [PATCH] Tactical manager scope

---
 src/assets/styles/analyticalView.scss         |   4 +
 src/assets/styles/case.scss                   |   4 +
 src/assets/styles/cases.scss                  |   5 +-
 src/assets/styles/operationalView.scss        |  66 ++-
 src/assets/styles/style.scss                  |  73 +++-
 src/common/utils.js                           |   8 +
 .../OngoingChartsManagerComponent.vue         | 121 ++++++
 .../PositiveOutcomeItemComponent.vue          |  31 ++
 src/components/ResourcesTableComponent.vue    |  70 ++++
 src/components/SideBarComponent.vue           |  72 ++--
 .../casePage/FlowDiagramComponent.vue         | 156 +++----
 .../casePage/ManagerViewComponent.vue         | 130 ++++++
 ...rationalRecommendationManagerComponent.vue | 155 +++++++
 .../casePage/RecommendationComponent.vue      | 128 +++---
 .../casesPage/CompletedChartsComponent.vue    |  20 +-
 .../casesPage/OngoingChartsComponent.vue      |  35 +-
 src/pages/CasePage.vue                        |  24 +-
 src/pages/CasesPage.vue                       | 168 ++++----
 src/pages/OngoingCasesManager.vue             | 205 ++++++++++
 src/pages/RecommendationsPage.vue             | 379 ++++++++++++------
 src/pages/ResourcesPage.vue                   |  99 +++++
 src/router.js                                 |  18 +-
 src/services/resources.service.js             | 105 +++++
 23 files changed, 1659 insertions(+), 417 deletions(-)
 create mode 100644 src/components/OngoingChartsManagerComponent.vue
 create mode 100644 src/components/PositiveOutcomeItemComponent.vue
 create mode 100644 src/components/ResourcesTableComponent.vue
 create mode 100644 src/components/casePage/ManagerViewComponent.vue
 create mode 100644 src/components/casePage/OperationalRecommendationManagerComponent.vue
 create mode 100644 src/pages/OngoingCasesManager.vue
 create mode 100644 src/pages/ResourcesPage.vue
 create mode 100644 src/services/resources.service.js

diff --git a/src/assets/styles/analyticalView.scss b/src/assets/styles/analyticalView.scss
index 8b3ab30..3d508cd 100644
--- 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
index a169955..1690cb6 100644
--- 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
index 3b7cd93..26d650b 100644
--- 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
index 501466d..90ed17a 100644
--- 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;
   }
 
 }
\ No newline at end of file
diff --git a/src/assets/styles/style.scss b/src/assets/styles/style.scss
index 7e61ac1..37ddb19 100644
--- 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%);
 }
\ No newline at end of file
diff --git a/src/common/utils.js b/src/common/utils.js
index 2baa624..7c71cb3 100644
--- 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
new file mode 100644
index 0000000..8f4b2a2
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/components/PositiveOutcomeItemComponent.vue b/src/components/PositiveOutcomeItemComponent.vue
new file mode 100644
index 0000000..23813d3
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/components/ResourcesTableComponent.vue b/src/components/ResourcesTableComponent.vue
new file mode 100644
index 0000000..994051b
--- /dev/null
+++ b/src/components/ResourcesTableComponent.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="resources-table">
+    <table-lite
+        :is-hide-paging="true"
+        :is-slot-mode="true"
+        :columns="headers"
+        :rows="resources"
+        :total="resources.length"
+        @row-clicked="rowClicked"
+    >
+      <template v-slot:name="data">
+        <td class="fixed-width">{{ data.value.name }}</td>
+      </template>
+      <template v-slot:role="data">
+        <td class="fixed-width">{{ data.value.role }}</td>
+      </template>
+      <template v-slot:status="data">
+        <td class="fixed-width">
+          <div :class="['resource-status', getStatusClass(data.value.status)]">
+            <span>{{ data.value.status }}</span>
+          </div>
+        </td>
+      </template>
+      <template v-slot:_id="data">
+        <td class="fixed-width">
+          <button @click="rowClicked(data.value)" class="show-details">{{ data.value.id }}</button>
+        </td>
+      </template>
+    </table-lite>
+  </div>
+</template>
+
+<script>
+import TableLite from "vue3-table-lite";
+
+export default {
+  name: 'ResourcesTable',
+  components: {
+    TableLite,
+  },
+  props: {
+    resources: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    headers() {
+      return [
+        { label: 'Name', field: 'name', sortable: false },
+        { label: "Role", field: "role", width: "25%", sortable: false },
+        { label: "Status", field: "status", width: "25%", sortable: false },
+        { label: "Case ID", field: "_id", width: "25%", sortable: false }
+      ];
+    },
+  },
+  methods: {
+    getStatusClass(status) {
+      return status === 'Available' ? 'available' : 'unavailable';
+    },
+    rowClicked(row) {
+      if (row && row.id) {
+        this.$router.push({ name: 'case', params: { caseId: row.id, completion: 'ongoing' } });
+      } else {
+        console.error('Invalid row data:', row);
+      }
+    },
+  },
+};
+</script>
diff --git a/src/components/SideBarComponent.vue b/src/components/SideBarComponent.vue
index cb760dc..3ae5f82 100644
--- a/src/components/SideBarComponent.vue
+++ b/src/components/SideBarComponent.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="sidebar" :class="{ 'collapsed': isCollapsed }">
     <ion-icon class="sidebar-collapse-icon pointer" :class="{ active: isCollapsed }" @click="toggleSidebar"
-      name="chevron-back-outline"></ion-icon>
+              name="chevron-back-outline"></ion-icon>
 
     <div class="sidebar-heading pointer" @click="gotToDashboard">
       <img src="../assets/img/laptop2.svg" class="kairos-logo" alt="Kairos logo" />
@@ -13,30 +13,33 @@
         <router-link class="sidebar-item" :to="{ name: 'dashboard' }"><ion-icon
             name="home"></ion-icon>Dashboard</router-link>
         <router-link :class="['sidebar-item', 'cases-sidebar-item', { 'active': isCasesActive }]"
-          :to="{ name: 'cases', params: { logId: logId, completion: 'completed' } }"><ion-icon
+                     :to="{ name: 'cases', params: { logId: logId, completion: 'completed' } }"><ion-icon
             name="list"></ion-icon>Cases</router-link>
         <router-link class="sidebar-item sub-item"
-          :to="{ name: 'cases', params: { logId: logId, completion: 'completed' } }"><ion-icon
+                     :to="{ name: 'cases', params: { logId: logId, completion: 'completed' } }"><ion-icon
             name="stats-chart"></ion-icon>Completed Cases</router-link>
         <router-link class="sidebar-item sub-item"
-          :to="{ name: 'cases', params: { logId: logId, completion: 'ongoing' } }"><ion-icon
+                     :to="{ name: 'cases', params: { logId: logId, completion: 'ongoing' } }"><ion-icon
             name="stats-chart"></ion-icon>Ongoing Cases</router-link>
         <router-link class="sidebar-item" :to="{ logId: logId, name: 'recommendations' }"><ion-icon
             name="document-text"></ion-icon>Recommendations</router-link>
+        <router-link v-if="logId" class="sidebar-item" :to="{ logId: logId, name: 'resources' }">
+          <ion-icon name="apps-outline"></ion-icon>Resources
+        </router-link>
       </div>
 
       <div class="switch-views">
         <h4 class="blue2">SELECT VIEW FOR</h4>
-        <button v-for="view in views" :key="view" class="sidebar-item" :class="{ active: selectedView === view.value }"
-          @click="selectView(view.value)"><ion-icon :name="view.icon"></ion-icon>{{ view.name }}</button>
+        <button v-for="view in views" :key="view.value" class="sidebar-item" :class="{ active: selectedView === view.value }"
+                @click="selectView(view.value)"><ion-icon :name="view.icon"></ion-icon>{{ view.name }}</button>
       </div>
     </div>
 
   </div>
 </template>
 
-<script>
 
+<script>
 import utils from '@/common/utils';
 import { useShepherd } from 'vue-shepherd';
 import { offset } from '@floating-ui/dom';
@@ -51,9 +54,9 @@ export default {
         { name: 'Operational worker', value: 'operational', icon: 'albums' },
         { name: 'Tactical manager', value: 'tactical', icon: 'people' }
       ],
-      selectedView: null,
+      selectedView: utils.getLocal('view') || 'analytical',
       isCollapsed: utils.getLocal('isCollapsed') || false,
-      logId: utils.getLocal('logId'),
+      logId: utils.getLocal('logId') || null,
     }
   },
 
@@ -65,8 +68,10 @@ export default {
 
   mounted() {
     if (!utils.getLocal('view')) utils.setLocal('view', 'analytical', 30);
-    if (!utils.getLocal('logId')) utils.setLocal('logId', this.$route.params.logId, 30);
-    this.selectedView = utils.getLocal('view');
+    if (!utils.getLocal('logId') && this.$route.params.logId) {
+      this.logId = this.$route.params.logId;
+      utils.setLocal('logId', this.logId, 30);
+    }
     window.addEventListener('dashboard-onboarding-completed', this.resumeOnboarding);
   },
 
@@ -80,7 +85,7 @@ export default {
       utils.setLocal('view', view, 30);
       window.dispatchEvent(new CustomEvent('view-changed', {
         detail: {
-          storage: utils.getLocal('view')
+          storage: view
         }
       }));
     },
@@ -92,7 +97,6 @@ export default {
       utils.setLocal('isCollapsed', this.isCollapsed, 5);
     },
     resumeOnboarding() {
-
       const tour = useShepherd({
         useModalOverlay: true,
         defaultStepOptions: {
@@ -101,34 +105,32 @@ export default {
         }
       });
       tour.addStep(
-        {
-          id: 'step5',
-          text: 'The streamed cases will show up in the cases pages.',
-          classes: 'onboarding-step',
-          attachTo: {
-            element: '.cases-sidebar-item',
-            on: 'right-end'
-          },
-          buttons: [
-            {
-              text: 'Done',
-              classes: 'shepherd-button-blue',
-              action: function () {
-                utils.setLocal('onboardingCompleted', true, 10000);
-                tour.complete();
+          {
+            id: 'step5',
+            text: 'The streamed cases will show up in the cases pages.',
+            classes: 'onboarding-step',
+            attachTo: {
+              element: '.cases-sidebar-item',
+              on: 'right-end'
+            },
+            buttons: [
+              {
+                text: 'Done',
+                classes: 'shepherd-button-blue',
+                action: function () {
+                  utils.setLocal('onboardingCompleted', true, 10000);
+                  tour.complete();
+                }
               }
-            }
-          ],
-          floatingUIOptions: {
+            ],
+            floatingUIOptions: {
               middleware: [offset({ mainAxis: 15, crossAxis: 10 })]
+            }
           }
-        }
       );
 
       tour.start();
     }
   }
-
 }
-
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/casePage/FlowDiagramComponent.vue b/src/components/casePage/FlowDiagramComponent.vue
index 691f369..55965bd 100644
--- a/src/components/casePage/FlowDiagramComponent.vue
+++ b/src/components/casePage/FlowDiagramComponent.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flow-diagram">
-    <div id='flow-cy'></div>
+    <div :id="uniqueId"></div>
   </div>
 </template>
 
@@ -12,117 +12,118 @@ import dagre from 'cytoscape-dagre';
 cytoscape.use(dagre);
 
 export default {
-
   name: 'vue-cytoscape',
   props: {
     currentCase: Object,
     caseCompleted: Boolean,
     parameters: Object
   },
-
   data() {
     return {
       cy: null,
       elems: [],
+      uniqueId: `flow-cy-${Math.random().toString(36).substr(2, 9)}`
     }
   },
-
   mounted() {
     this.createDiagram();
   },
-
   watch: {
     currentCase() {
       this.createNodes();
     }
   },
-
   methods: {
     displayDiagram() {
-      this.cy.layout({
-        fit: false,
-        name: 'dagre',
-        rankDir: 'LR',
-        align: 'DR',
-      }).run()
-      this.cy.zoom(1.2);
+      if (this.cy) {
+        this.cy.layout({
+          fit: false,
+          name: 'dagre',
+          rankDir: 'LR',
+          align: 'DR',
+        }).run();
+        this.cy.zoom(1.2);
+      }
     },
-
     createDiagram() {
+      // Wait until the DOM is fully rendered
+      this.$nextTick(() => {
+        const container = document.getElementById(this.uniqueId);
+        if (!container) {
+          console.error("Diagram container not found:", this.uniqueId);
+          return;
+        }
 
-      var width = 15;
-      var height = 15;
-      var lineWidth = 1;
-      var cy = cytoscape({
-        container: document.getElementById('flow-cy'),
-        // zoomingEnabled: false,
-        // panningEnabled: false,
-        autoungrabify: true,
-        // autounselectify: true,
-
-        style: [
-
-          {
-            selector: 'node',
-            style: {
-              'text-halign': 'center',
-              'text-valign': 'bottom',
-              'text-margin-y': 5,
-              'shape': 'ellipse',
-              'background-color': '#d2d6da',
-              'border-width': 0,
-              'text-wrap': 'wrap',
-              'text-max-width': width - 10,
-              'height': height,
-              'width': width,
-              'font-size': 6,
-              'font-family': 'arial'
-            }
-          },
-          {
-            selector: 'edge',
-            style: {
-              'curve-style': 'straight',
-              'target-arrow-shape': 'vee',
-              'width': lineWidth,
-              'line-color': '#252F40',
-              'target-arrow-color': '#252F40',
-            }
-          },
-          {
-            selector: '.nextActivity',
-            style: {
-              'label': 'data(label)',
-              'background-color': '#EBF0FF',
-            }
-          },
+        var width = 15;
+        var height = 15;
+        var lineWidth = 1;
+        var cy = cytoscape({
+          container: container,
+          autoungrabify: true,
+          style: [
+            {
+              selector: 'node',
+              style: {
+                'text-halign': 'center',
+                'text-valign': 'bottom',
+                'text-margin-y': 5,
+                'shape': 'ellipse',
+                'background-color': '#d2d6da',
+                'border-width': 0,
+                'text-wrap': 'wrap',
+                'text-max-width': width - 10,
+                'height': height,
+                'width': width,
+                'font-size': 6,
+                'font-family': 'arial'
+              }
+            },
+            {
+              selector: 'edge',
+              style: {
+                'curve-style': 'straight',
+                'target-arrow-shape': 'vee',
+                'width': lineWidth,
+                'line-color': '#252F40',
+                'target-arrow-color': '#252F40',
+              }
+            },
+            {
+              selector: '.nextActivity',
+              style: {
+                'label': 'data(label)',
+                'background-color': '#EBF0FF',
+              }
+            },
+            {
+              selector: '.completedActivity',
+              style: {
+                'label': 'data(label)',
+                'background-color': '#8392AB',
+              }
+            },
+          ],
+        });
 
-          {
-            selector: '.completedActivity',
-            style: {
-              'label': 'data(label)',
-              'background-color': '#8392AB',
-            }
-          },
-        ],
+        this.cy = cy;
+        this.createNodes();
       });
-
-      this.cy = cy;
-      this.createNodes();
-
     },
-
     createNodes() {
+      if (!this.cy || !this.currentCase.activities) {
+        console.error("Cytoscape instance or activities not available");
+        return;
+      }
+
       let activities = this.currentCase.activities;
-      // activities = activities.slice(-3); // display only last 3 completed activities
       const l = activities.length;
 
       var elems = [];
-      var lastNodeId = 'an' + (l - 1)
+      var lastNodeId = 'an' + (l - 1);
 
       for (let i = 0; i < l; i++) {
         const activity = activities[i];
-        let content = activity[this.parameters.columnsDefinitionReverse['ACTIVITY']]
+        let content = activity[this.parameters.columnsDefinitionReverse['ACTIVITY']];
 
         elems.push({
           group: "nodes",
@@ -144,6 +145,7 @@ export default {
           });
         }
       }
+
       let lastRecommendations = activities[l - 1].prescriptions;
       if (lastRecommendations) {
         let nextActivityRecommendation = lastRecommendations.filter(r => r.type === 'NEXT_ACTIVITY');
@@ -195,8 +197,6 @@ export default {
       this.elems = elems;
       this.displayDiagram();
     }
-
   }
 }
-
 </script>
\ No newline at end of file
diff --git a/src/components/casePage/ManagerViewComponent.vue b/src/components/casePage/ManagerViewComponent.vue
new file mode 100644
index 0000000..7840d17
--- /dev/null
+++ b/src/components/casePage/ManagerViewComponent.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="operational-view">
+    <div class="case-status shadow">
+      <div v-if="parameters.columnsDefinitionReverse" class="column">
+        <h4>Case status</h4>
+        <p>{{ lastActivity[parameters.columnsDefinitionReverse['ACTIVITY']] }} complete</p>
+        <small>{{ lastActivity[parameters.columnsDefinitionReverse['START_TIMESTAMP']] }}</small>
+      </div>
+      <flow-diagram-component :currentCase="currentCase" :parameters="parameters"></flow-diagram-component>
+    </div>
+    <div class="row">
+      <div class="resource-details shadow">
+        <h4>Resources</h4>
+        <p>Recommended resource</p>
+        <ResourcesTable :resources="resources" />
+        <p>All resources</p>
+        <ResourcesTable :resources="resourcesGeneral" />
+      </div>
+      <div class="recommendations-list shadow">
+        <div class="row align-center">
+          <h4>Recommendations</h4>
+          <tooltip-component :iconSize="25" icon="information-circle" color="blue" :tooltipSize="600">
+            <template v-slot:title>
+              <h3 class="bold">Recommendation info</h3>
+            </template>
+            <template v-slot:content>
+              <p>How are recommendations calculated?</p>
+              <p>There are three different algorithms that prescribe recommendations.</p>
+              <p class="bold">Intervention</p>
+              <p>An algorithm estimates the causal effect of performing the intervention at a given point in time. It is shown as ”recommended” when an estimated effect is positive (above 0).</p>
+              <p class="bold">Alarm</p>
+              <p>Probability of not meeting the KPI is high. It is recommended to check on the application.</p>
+              <p class="bold">Next activity</p>
+              <p>There is a high probability of reaching the KPI if you address this recommendation now.</p>
+            </template>
+          </tooltip-component>
+        </div>
+        <tabs :options="tabOptions.recommendations">
+          <tab name="Current" id="tab-current">
+            <operational-recommendation-manager-component :batch="lastActivity" :current="true" :selectedRec="selectedRec" :parameters="parameters" @recommendationSelected="selectRecommendation"></operational-recommendation-manager-component>
+          </tab>
+          <tab name="Past" id="tab-past">
+            <operational-recommendation-manager-component v-for="activity in oldActivities" v-bind:key="activity" :batch="activity" :current="false" :parameters="parameters" :selectedRec="selectedRec" @recommendationSelected="selectRecommendation"></operational-recommendation-manager-component>
+          </tab>
+        </tabs>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import TooltipComponent from '@/components/TooltipComponent.vue';
+import OperationalRecommendationManagerComponent from './OperationalRecommendationManagerComponent.vue';
+import FlowDiagramComponent from './FlowDiagramComponent.vue';
+import utils from '@/common/utils';
+import ResourcesTable from '@/components/ResourcesTableComponent'
+import resourceService from '@/services/resources.service';
+
+export default {
+  name: 'ManagerView',
+  components: {
+    TooltipComponent,
+    OperationalRecommendationManagerComponent,
+    FlowDiagramComponent,
+    ResourcesTable
+  },
+  props: {
+    currentCase: Object,
+    parameters: Object
+  },
+  data() {
+    return {
+      selectedRec: {},
+      selectedRecObject: null,
+      resources: [],
+      resourcesGeneral: [],
+      tabOptions: {
+        recommendations: { defaultTabHash: 'tab-current', useUrlFragment: false },
+        recommendationDetails: { defaultTabHash: 'tab-diagram', useUrlFragment: false }
+      },
+    }
+  },
+  computed: {
+    oldActivities() {
+      return this.currentCase.activities.slice(0, -1);
+    },
+    lastActivity() {
+      return this.currentCase.activities.slice(-1)[0];
+    },
+    caseKpi() {
+      return Array.isArray(this.currentCase.case_performance) ? this.currentCase.case_performance : [[this.currentCase.case_performance]];
+    },
+    caseOutcome() {
+      return utils.calculateCaseOutcome(this.caseKpi);
+    }
+  },
+  methods: {
+    async setup() {
+      this.isLoading = true;
+      try {
+        this.resources = await resourceService.fetchResourceDataByCaseId(this.currentCase._id);
+        this.resourcesGeneral = await resourceService.fetchResourceData();
+      } catch (error) {
+        this.$notify({
+          title: 'An error occurred',
+          text: error.response?.data?.error || error.message || 'Unknown error',
+          type: 'error'
+        });
+      } finally {
+        this.isLoading = false;
+      }
+    },
+    selectRecommendation(selectedRec) {
+      if (!selectedRec.index) {
+        this.selectedRec = {};
+        this.selectedRecObject = null;
+        return;
+      }
+      this.selectedRec = selectedRec;
+      this.selectedRecObject = this.currentCase.activities.filter(a => a.event_id === this.selectedRec.batchId)[0].prescriptions[this.selectedRec.index];
+    }
+  },
+  mounted() {
+    this.setup();
+    console.log("currentCase", this.currentCase);
+    console.log("parameters", this.parameters);
+  }
+};
+</script>
\ No newline at end of file
diff --git a/src/components/casePage/OperationalRecommendationManagerComponent.vue b/src/components/casePage/OperationalRecommendationManagerComponent.vue
new file mode 100644
index 0000000..ba44668
--- /dev/null
+++ b/src/components/casePage/OperationalRecommendationManagerComponent.vue
@@ -0,0 +1,155 @@
+<template>
+  <div class="column">
+    <div class="recommendation" v-for="(r, index) in batchRecommendations" :key="index"
+         :class="[{ selected: selectedRec.batchId === batchId && selectedRec.index === index }, r.type.toLowerCase()]">
+      <div class="recommendation-content">
+        <div class="left-column">
+          <div v-if="r.type !== 'NEXT_ACTIVITY'" class="next_activity">
+            <div class="text-tooltip-container" v-if="current">
+              <h4>{{ r.rec }}</h4>
+              <tooltip-component v-if="r.type !== 'NEXT_ACTIVITY'" :iconSize="15" :tooltipSize="300">
+                <template v-slot:title>
+                  <h3 class="bold">Details - calculation info</h3>
+                </template>
+                <template v-slot:content>
+                  <h4> Model description</h4>
+                  <p v-for="m in r.metrics" :key="m"> {{ m.name }}: {{ m.metric }}</p>
+                </template>
+              </tooltip-component>
+            </div>
+            <p>{{ r.recommended }}</p>
+            <div class="right-column" v-if="current">
+              <div class="button-container">
+                <button type="button" class="blue-button" @click="openModal = true">Assign to</button>
+                <button type="button" class="blue-button" @click="discardRecommendation(index)">Discard</button>
+              </div>
+            </div>
+            <modal-component v-if="openModal" title="Assign a resource to perform this action?" @closeModal="closeModal">
+              <template v-slot:content>
+                <div class="column">
+                  <p>The system recommends to assign this resource to this action. If followed, the probability of reaching the target goal of the process is high.</p>
+                  <div class="row">
+                    <button type="submit" class="btn-blue" @click="openModal = false">Assign</button>
+                    <button class="btn-blue margin-left" @click="openModal = false">Cancel</button>
+                  </div>
+                </div>
+              </template>
+            </modal-component>
+          </div>
+        </div>
+        <p :class="['recommendation-status', 'bold', r.status === 'accepted' ? 'green' : 'warning']">{{ r.status }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TooltipComponent from '@/components/TooltipComponent.vue';
+import utils from '@/common/utils';
+import ModalComponent from "@/components/ModalComponent";
+
+export default {
+  name: 'RecommendationManagerComponent',
+
+  components: {
+    TooltipComponent,
+    ModalComponent
+  },
+
+  props: {
+    batch: Object,
+    current: Boolean,
+    selectedRec: Object,
+    parameters: Object,
+  },
+
+  data() {
+    return {
+      localBatch: Object.assign({}, this.batch),
+      openModal: false,
+      discardedRecommendations: []
+    }
+  },
+
+  computed: {
+    batchRecommendations() {
+      return this.formatRecommendations();
+    }
+  },
+
+  methods: {
+    closeModal() {
+      this.openModal = false;
+    },
+
+    discardRecommendation(index) {
+      const discarded = this.localBatch.prescriptions.splice(index, 1)[0];
+      this.discardedRecommendations.push(discarded);
+    },
+
+    formatRecommendations() {
+      let temp = [];
+      if (!this.localBatch.prescriptions) return [];
+      for (let i = 0; i < this.localBatch.prescriptions.length; i++) {
+        let p = this.localBatch.prescriptions[i];
+
+        let recommendationAttr, recommendedAttr, recommendationMetrics;
+        let recommendationStatus = this.current ? null : p.status;
+        let recommendationType = p.type;
+
+        if (p.type === 'NEXT_ACTIVITY') {
+          recommendationAttr = 'Perform ' + p.output;
+          recommendedAttr = 'It is likely that the application will comply with the target if you perform this recommendation now.';
+          recommendationMetrics = [
+            {name: 'Accuracy', metric: Math.round(p.plugin.accuracy * 100) + '%'},
+            {name: 'Recall', metric: Math.round(p.plugin.recall * 100) + '%'},
+            {name: 'Precision', metric: Math.round(p.plugin.precision * 100) + '%'}
+          ]
+        } else if (p.type === 'ALARM') {
+          recommendationAttr = 'Action required';
+          if (p.output < this.parameters.alarmThreshold) {
+            continue;
+          }
+          recommendationStatus = '';
+          recommendedAttr = 'Probability of not meeting the target is high. It is recommended to check on the application.';
+          recommendationMetrics = [
+            {name: 'Accuracy', metric: Math.round(p.plugin.accuracy * 100) + '%'},
+            {name: 'Recall', metric: Math.round(p.plugin.recall * 100) + '%'},
+            {name: 'Precision', metric: Math.round(p.plugin.precision * 100) + '%'}
+          ]
+        } else if (p.type === 'TREATMENT_EFFECT') {
+          recommendationAttr = utils.formatIntervention(p.output, this.parameters.columnsDefinition);
+          if (p.output.cate <= 0) {
+            continue;
+          }
+          recommendedAttr = 'The causal effect of performing the intervention is positive.';
+          recommendationMetrics = [
+            {name: 'CATE score', metric: p.output.cate},
+            {name: 'Probability if treated', metric: Math.round(p.output.proba_if_treated * 100) + '%'},
+            {name: 'Probability if untreated', metric: Math.round(p.output.proba_if_treated * 100) + '%'}
+          ]
+        }
+        let data = {
+          rec: recommendationAttr,
+          status: recommendationStatus,
+          recommended: recommendedAttr,
+          metrics: recommendationMetrics,
+          type: recommendationType
+        }
+        temp.push(data);
+      }
+      return temp;
+    },
+  },
+
+  watch: {
+    batch: {
+      handler(newValue) {
+        this.localBatch = Object.assign({}, newValue);
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
diff --git a/src/components/casePage/RecommendationComponent.vue b/src/components/casePage/RecommendationComponent.vue
index 29fe53e..350eea1 100644
--- a/src/components/casePage/RecommendationComponent.vue
+++ b/src/components/casePage/RecommendationComponent.vue
@@ -1,82 +1,80 @@
 <template>
-    <div class="column">
-        <p class="bold" v-if="batchRecommendations.length > 0 || current">Case status: {{ caseStatus }} complete</p>
-        <div class="recommendation" v-for="(r, index) in batchRecommendations" :key="index"
-            @click="selectRecommendation(index)"
-            :class="{ selected: selectedRec.batchId === batchId && selectedRec.index === index }">
-            <div class="row">
-                <small class="black">{{ r.recType }}</small>
-                <div :class="['pill', r.color]"></div>
-            </div>
-
-            <p>{{ r.rec }}</p>
-
-            <p :class="['bold', r.recommended ? 'green' : 'warning']">{{ r.recommended ? 'Recommended now' : 'Not recommended now' }}</p>
-
-            <small>{{ r.metric }}</small>
-            <div :class="['recommendation-status', 'bold', r.status === 'accepted' ? 'green' : 'warning']">{{ r.status }}
-            </div>
-        </div>
+  <div class="column">
+    <p class="bold" v-if="batchRecommendations.length > 0 || current">Case status: {{ caseStatus }} complete</p>
+    <div class="recommendation" v-for="(r, index) in batchRecommendations" :key="index"
+         @click="selectRecommendation(index)"
+         :class="{ selected: selectedRec.batchId === batchId && selectedRec.index === index }">
+      <div class="row">
+        <small class="black">{{ r.recType }}</small>
+        <div :class="['pill', r.color]"></div>
+      </div>
+
+      <p>{{ r.rec }}</p>
+
+      <p :class="['bold', r.recommended ? 'green' : 'warning']">{{ r.recommended ? 'Recommended now' : 'Not recommended now' }}</p>
+
+      <small>{{ r.metric }}</small>
+      <div :class="['recommendation-status', 'bold', r.status === 'accepted' ? 'green' : 'warning']">{{ r.status }}</div>
     </div>
+  </div>
 </template>
 
 <script>
 import utils from '@/common/utils';
 
 export default {
-    name: 'RecommendationComponent',
-
-    props: {
-        batch: Object,
-        current: Boolean,
-        selectedRec: Object,
-        parameters: Object,
-    },
-
-    data() {
-        return {
-            caseStatus: null,
-            batchId: null,
-        }
-    },
-
-    computed: {
-        batchRecommendations() {
-            return this.formatRecommendations();
-        }
+  name: 'RecommendationComponent',
+  props: {
+    batch: Object,
+    current: Boolean,
+    selectedRec: Object,
+    parameters: Object,
+  },
+  data() {
+    return {
+      caseStatus: null,
+      batchId: null,
+    }
+  },
+  computed: {
+    batchRecommendations() {
+      return this.formatRecommendations();
+    }
+  },
+  methods: {
+    selectRecommendation(index) {
+      this.$emit('recommendationSelected', { batchId: this.batchId, index: index });
     },
+    formatRecommendations() {
+      let temp = [];
+      this.caseStatus = this.batch[this.parameters.columnsDefinitionReverse['ACTIVITY']];
+      this.batchId = this.batch.event_id;
 
-    methods: {
-        selectRecommendation(index) {
-            this.$emit('recommendationSelected', { batchId: this.batchId, index: index });
-        },
-
-        formatRecommendations() {
-            let temp = [];
-            this.caseStatus = this.batch[this.parameters.columnsDefinitionReverse['ACTIVITY']];
-            this.batchId = this.batch.event_id;
+      if (!this.batch.prescriptions) return [];
 
-            if (!this.batch.prescriptions) return [];
+      for (let i = 0; i < this.batch.prescriptions.length; i++) {
+        let p = this.batch.prescriptions[i];
 
-            for (let i = 0; i < this.batch.prescriptions.length; i++) {
-                let p = this.batch.prescriptions[i];
-                let prescriptionObject = utils.prescriptionAttributes[p.type];
+        if (!p || !p.type || !utils.prescriptionAttributes[p.type]) {
+          console.error('Invalid prescription structure or missing type:', p);
+          continue;
+        }
 
-                let data = {
-                    recType: prescriptionObject.pType,
-                    color: prescriptionObject.pColor,
-                    rec: prescriptionObject.pText(p, this.parameters.columnsDefinition),
-                    metric: prescriptionObject.pMetric(p, this.parameters.alarmThreshold),
-                    status: prescriptionObject.pStatus(p),
-                    recommended: prescriptionObject.pIsRecommended(p, this.parameters.alarmThreshold)
-                };
+        let prescriptionObject = utils.prescriptionAttributes[p.type];
 
-                temp.push(data);
-            }
-            return temp;
-        },
+        let data = {
+          recType: prescriptionObject.pType,
+          color: prescriptionObject.pColor,
+          rec: prescriptionObject.pText(p, this.parameters.columnsDefinition),
+          metric: prescriptionObject.pMetric(p, this.parameters.alarmThreshold),
+          status: prescriptionObject.pStatus(p),
+          recommended: prescriptionObject.pIsRecommended(p, this.parameters.alarmThreshold)
+        };
 
-    }
+        temp.push(data);
+      }
+      return temp;
+    },
+  }
 }
-
 </script>
\ No newline at end of file
diff --git a/src/components/casesPage/CompletedChartsComponent.vue b/src/components/casesPage/CompletedChartsComponent.vue
index 5e713a7..e277aad 100644
--- a/src/components/casesPage/CompletedChartsComponent.vue
+++ b/src/components/casesPage/CompletedChartsComponent.vue
@@ -135,10 +135,10 @@ export default {
           name: "Accepted",
           data: [0, 0, 0],
         },
-        {
-          name: 'Discarded',
-          data: [0, 0, 0]
-        }
+          {
+            name: 'Discarded',
+            data: [0, 0, 0]
+          }
         ],
         chartOptions: {
           colors: ['#17ad37', '#7e7e7e'],
@@ -224,17 +224,21 @@ export default {
 
     createRecommendationsStatistics() {
       this.cases.forEach(({ case_performance, activities }) => {
-        
         const outcome = utils.calculateCaseOutcome(case_performance);
         const prescriptions = activities.map(a => a.prescriptions).flat();
 
         prescriptions.forEach(p => {
+          if (!this.recommendationsStatistics.rows[outcome]) {
+            this.recommendationsStatistics.rows[outcome] = {};
+          }
+          if (!this.recommendationsStatistics.rows[outcome][p.type]) {
+            this.recommendationsStatistics.rows[outcome][p.type] = { total: 0, accepted: 0 };
+          }
           if (p.status === 'accepted') this.recommendationsStatistics.rows[outcome][p.type].accepted += 1;
-          this.recommendationsStatistics.rows[outcome][p.type].total += 1
+          this.recommendationsStatistics.rows[outcome][p.type].total += 1;
         });
       });
-
-    },
+    }
   }
 }
 
diff --git a/src/components/casesPage/OngoingChartsComponent.vue b/src/components/casesPage/OngoingChartsComponent.vue
index c7afc41..01b29b4 100644
--- a/src/components/casesPage/OngoingChartsComponent.vue
+++ b/src/components/casesPage/OngoingChartsComponent.vue
@@ -15,7 +15,6 @@
 </template>
 
 <script>
-
 import VueApexCharts from 'vue3-apexcharts';
 import utils from '@/common/utils';
 
@@ -29,7 +28,7 @@ export default {
   props: {
     cases: Array,
     casesData: Array,
-    alarmThreshold: Number,
+    alarmThreshold: Number
   },
 
   data() {
@@ -70,10 +69,10 @@ export default {
           name: "Accepted",
           data: [0, 0, 0],
         },
-        {
-          name: 'Discarded',
-          data: [0, 0, 0]
-        }
+          {
+            name: 'Discarded',
+            data: [0, 0, 0]
+          }
         ],
         chartOptions: {
           colors: ['#17ad37', '#7e7e7e'],
@@ -122,14 +121,14 @@ export default {
       },
     };
   },
-  
+
   watch: {
-    alarmThreshold(){
+    alarmThreshold() {
       this.createRecommendationTypes();
       this.createRecommendationsAcceptance();
     },
     cases() {
-      if(this.alarmThreshold){
+      if (this.alarmThreshold) {
         this.createRecommendationTypes();
         this.createRecommendationsAcceptance();
       }
@@ -137,7 +136,6 @@ export default {
   },
 
   methods: {
-
     createRecommendationsAcceptance() {
       for (let i = 0; i < Object.keys(this.recommendationsByType).length; i++) {
         const t = Object.values(this.recommendationsByType)[i];
@@ -146,24 +144,32 @@ export default {
       }
     },
 
-    async createRecommendationTypes() {
+    createRecommendationTypes() {
       this.resetRecommendationCounts();
       this.cases.forEach(({ activities }) => {
         const l = activities.length;
         if (l < 1) return;
 
-
         for (let i = 0; i < l; i++) {
           const prescriptions = activities[i].prescriptions;
           prescriptions.forEach(p => {
+            if (!this.recommendationsByType[p.type]) {
+              this.recommendationsByType[p.type] = { total: 0, accepted: 0, recommended: 0 };
+            }
             if (p.status === 'accepted') this.recommendationsByType[p.type].accepted += 1;
             this.recommendationsByType[p.type].total += 1;
-            if (i === (l - 1) && utils.prescriptionAttributes[p.type].pIsRecommended(p, this.alarmThreshold)) this.recommendationsByType[p.type].recommended += 1;
+            if (i === (l - 1) && utils.prescriptionAttributes[p.type].pIsRecommended(p, this.alarmThreshold)) {
+              this.recommendationsByType[p.type].recommended += 1;
+            }
           });
         }
       });
 
-      this.recommendationTypes.series = Object.keys(this.recommendationsByType).map(k => this.recommendationsByType[k].recommended)
+      this.recommendationTypes.series = [
+        this.recommendationsByType['ALARM'].recommended,
+        this.recommendationsByType['NEXT_ACTIVITY'].recommended,
+        this.recommendationsByType['TREATMENT_EFFECT'].recommended
+      ];
     },
 
     resetRecommendationCounts() {
@@ -176,5 +182,4 @@ export default {
     },
   }
 }
-
 </script>
\ No newline at end of file
diff --git a/src/pages/CasePage.vue b/src/pages/CasePage.vue
index 3ab4457..1077a58 100644
--- a/src/pages/CasePage.vue
+++ b/src/pages/CasePage.vue
@@ -48,19 +48,20 @@
         </div>
       </div>
     </div>
-    <operational-view v-show="selectedView === 'operational' || selectedView === 'tactical'" :currentCase="currentCase"
-      :parameters="parameters"></operational-view>
-    <analytical-view v-show="selectedView === 'analytical'" :currentCase="currentCase"
-      :parameters="parameters"></analytical-view>
+
+    <manager-view v-show="selectedView === 'tactical'" :currentCase="currentCase" :parameters="parameters"></manager-view>
+    <analytical-view v-show="selectedView === 'analytical'" :currentCase="currentCase" :parameters="parameters"></analytical-view>
+    <operational-view v-show="selectedView === 'operational'" :currentCase="currentCase" :parameters="parameters"></operational-view>
   </div>
   <error v-else></error>
 </template>
-  
+
 <script>
 import casesService from "@/services/cases.service";
 import logsService from "@/services/logs.service";
 import OperationalView from '@/components/casePage/OperationalViewComponent.vue';
 import AnalyticalView from '@/components/casePage/AnalyticalViewComponent.vue';
+import ManagerView from '@/components/casePage/ManagerViewComponent.vue';
 import SideBar from '@/components/SideBarComponent.vue';
 import Loading from "@/components/LoadingComponent.vue";
 import Error from "@/components/ErrorComponent.vue";
@@ -72,6 +73,7 @@ export default {
     SideBar,
     OperationalView,
     AnalyticalView,
+    ManagerView,
     Loading,
     Error
   },
@@ -90,9 +92,8 @@ export default {
       caseKpi: { value: null, column: null, outcome: false },
       caseDetails: {},
       recommendationsAvailable: false,
-    }
+    };
   },
-
   mounted() {
     window.addEventListener('view-changed', this.changeView);
     this.selectedView = utils.getLocal('view');
@@ -101,14 +102,11 @@ export default {
       this.getProjectStatus();
     }
   },
-
   beforeUnmount() {
     window.removeEventListener('view-changed', this.changeView);
     clearInterval(this.timer);
   },
-
   methods: {
-
     getCase() {
       this.caseId = (this.$route.params.caseId);
       casesService.getCase(this.caseId).then(
@@ -135,7 +133,6 @@ export default {
         }
       );
     },
-
     getParameters() {
       logsService.getParameters(utils.getLocal('logId')).then(
         (response) => {
@@ -160,7 +157,6 @@ export default {
         }
       );
     },
-
     getAdditionalInformation() {
       this.caseDetails = this.currentCase.case_attributes;
       const caseActivities = this.currentCase.activities
@@ -172,11 +168,9 @@ export default {
       }
       this.isLoading = false;
     },
-
     changeView(event) {
       this.selectedView = event.detail.storage;
     },
-
     getProjectStatus() {
       logsService.getProjectStatus(utils.getLocal('logId')).then(
         (response) => {
@@ -192,8 +186,6 @@ export default {
         }
       );
     },
-
   },
-
 };
 </script>
\ No newline at end of file
diff --git a/src/pages/CasesPage.vue b/src/pages/CasesPage.vue
index bc9d482..e599f81 100644
--- a/src/pages/CasesPage.vue
+++ b/src/pages/CasesPage.vue
@@ -23,31 +23,57 @@
         <small>Cases without recommendations</small>
         <h3 class="large-number bg-gray">{{ casesData.length - casesWithRecommendations }}</h3>
       </div>
+
+      <div v-if="completionString === 'Ongoing' && selectedView === 'tactical'">
+        <div class="stats">
+          <div v-if="parameters.kpi" class="hide-scrollbar">
+            <div v-for="(positiveOutcomeGroup, index1) in parameters.kpi" :key="index1" class="row align-center">
+              <small class="outcome-grouping" v-if="index1 > 0">or</small>
+              <div v-for="(positiveOutcomeItem, index2) in positiveOutcomeGroup" :key="index2" class="row align-center">
+                <small class="outcome-grouping" v-if="index2 > 0">and</small>
+                <PositiveOutcomeItemComponent v-if="positiveOutcomeItem" :object="positiveOutcomeItem"/>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
 
     <div class="column" v-show="!showTable">
-      <completed-charts-component v-if="completion" :cases="cases" :casesData="casesData"></completed-charts-component>
-
-      <ongoing-charts-component v-if="!completion" :cases="cases" :casesData="casesData"
-        :alarmThreshold="alarmThreshold"></ongoing-charts-component>
+      <template v-if="completionString === 'Ongoing' && selectedView === 'tactical'">
+        <completed-charts-component v-if="completion" :cases="cases" :casesData="casesData"></completed-charts-component>
+        <ongoing-charts-manager-component v-if="!completion" :cases="cases" :casesData="[casesWithRecommendations, casesWithoutRecommendations]"
+                                          :alarmThreshold="alarmThreshold" recommendation-types-title="Recommendations in cases"
+                                          recommendations-acceptance-title="Recommendations acceptance"></ongoing-charts-manager-component>
+      </template>
+      <template v-else>
+        <completed-charts-component v-if="completion" :cases="cases" :casesData="casesData"></completed-charts-component>
+        <ongoing-charts-component v-if="!completion" :cases="cases" :casesData="casesData" :alarmThreshold="alarmThreshold"></ongoing-charts-component>
+      </template>
     </div>
 
     <div v-if="!showTable" class="cases-table-preview-heading shadow">
       <h3>Cases Overview Table</h3>
-      <button v-if="!showTable" @click="toggleShowTable" class="btn-link">Show full <ion-icon
-          name="open-outline"></ion-icon></button>
+      <button v-if="!showTable" @click="toggleShowTable" class="btn-link">Show full
+        <ion-icon
+            name="open-outline"></ion-icon>
+      </button>
     </div>
     <div class="column">
-      <button v-if="showTable" @click="toggleShowTable" class="btn-link"><ion-icon name="chevron-back"></ion-icon> Return
-        to overview</button>
-
-      <cases-table-component :completed="completion" :performanceColumns="performanceColumns" :caseAttributes="caseAttributes" :cases="casesData"
-        :isFullView="showTable"></cases-table-component>
+      <button v-if="showTable" @click="toggleShowTable" class="btn-link">
+        <ion-icon name="chevron-back"></ion-icon>
+        Return
+        to overview
+      </button>
+
+      <cases-table-component :completed="completion" :performanceColumns="performanceColumns"
+                             :caseAttributes="caseAttributes" :cases="casesData"
+                             :isFullView="showTable"></cases-table-component>
     </div>
 
   </div>
 </template>
-  
+
 <script>
 
 import casesService from "@/services/cases.service";
@@ -58,18 +84,20 @@ import utils from '@/common/utils';
 import CasesTableComponent from "@/components/casesPage/CasesTableComponent.vue";
 import CompletedChartsComponent from "@/components/casesPage/CompletedChartsComponent.vue";
 import OngoingChartsComponent from "@/components/casesPage/OngoingChartsComponent.vue";
+import PositiveOutcomeItemComponent from "@/components/PositiveOutcomeItemComponent";
+import OngoingChartsManagerComponent from "@/components/OngoingChartsManagerComponent";
 
 export default {
   name: 'CasesList',
-
   components: {
     SideBar,
     Loading,
     CasesTableComponent,
     CompletedChartsComponent,
-    OngoingChartsComponent
+    OngoingChartsComponent,
+    PositiveOutcomeItemComponent,
+    OngoingChartsManagerComponent,
   },
-
   computed: {
     completionString() {
       return this.completion ? 'Completed' : 'Ongoing';
@@ -77,91 +105,92 @@ export default {
     casesWithRecommendations() {
       return this.casesData.filter(c => c.recommendations > 0).length;
     },
+    casesWithoutRecommendations() {
+      return this.casesData.length - this.casesWithRecommendations;
+    }
   },
-
   data() {
     return {
       timer: null,
       logStatus: 'NULL',
       completion: this.$route.params.completion === 'completed',
       showTable: utils.getLocal('casesListShowTable') || false,
-
       isLoading: false,
       cases: [],
       casesData: [],
       caseAttributes: [],
       costUnits: {},
-
       performanceColumns: undefined,
       alarmThreshold: undefined,
       columnsDefinition: undefined,
+      selectedView: null,
+      parameters: {}
     };
   },
-
+  watch: {
+    selectedView() {
+      this.setup();
+    }
+  },
   mounted() {
+    window.addEventListener('view-changed', this.changeView);
+    this.selectedView = utils.getLocal('view');
     if (utils.getLocal('logId')) {
       this.setup();
     }
   },
-
-
   beforeUnmount() {
     clearInterval(this.timer);
   },
-
   methods: {
-
     setup() {
       this.isLoading = true;
       this.getCases();
       this.getProjectStatus();
     },
-
     toggleShowTable() {
       this.showTable = !this.showTable;
       utils.setLocal('casesListShowTable', this.showTable, 5);
     },
-
     getCases() {
       casesService.getCasesByLogAndCompletion(utils.getLocal('logId'), this.completionString.toLowerCase()).then(
-        (response) => {
-          if (this.cases !== response.data.cases && response.data.cases.length > 0) {
-            this.cases = response.data.cases;
-            this.formatCases();
+          (response) => {
+            if (this.cases !== response.data.cases && response.data.cases.length > 0) {
+              this.cases = response.data.cases;
+              this.formatCases();
+            } else {
+              this.isLoading = false;
+            }
+          },
+          (error) => {
+            this.isLoading = false;
+            if (error.response.status === 504) return;
+            const resMessage =
+                (error.response && error.response.data && error.response.data.error) ||
+                error.message ||
+                error.toString();
+            this.$notify({
+              title: 'An error occured',
+              text: resMessage,
+              type: 'error'
+            });
           }
-          else this.isLoading = false;
-        },
-        (error) => {
-          this.isLoading = false;
-          if (error.response.status === 504) return;
-          const resMessage =
-            (error.response &&
-              error.response.data &&
-              error.response.data.error) ||
-            error.message ||
-            error.toString();
-          this.$notify({
-            title: 'An error occured',
-            text: resMessage,
-            type: 'error'
-          })
-        }
       );
     },
-
     async getParameters() {
       try {
         const response = await logsService.getParameters(utils.getLocal('logId'));
         this.alarmThreshold = response.data.parameters.alarmThreshold || 1.0;
         this.costUnits = response.data.parameters.costUnits || {};
         this.columnsDefinition = response.data.parameters.columnsDefinition;
+        this.parameters = response.data.parameters;
       } catch (error) {
         this.isLoading = false;
         const resMessage = (error.response &&
-          error.response.data &&
-          error.response.data.error) ||
-          error.message ||
-          error.toString();
+                error.response.data &&
+                error.response.data.error) ||
+            error.message ||
+            error.toString();
         this.$notify({
           title: 'An error occurred',
           text: resMessage,
@@ -169,16 +198,13 @@ export default {
         });
       }
     },
-
     async formatCases() {
       if (this.casesData.length > 0) {
         this.casesData = [];
       } else {
         if (!this.performanceColumns) {
           await this.getParameters();
-
-          let performanceColumns = {}
-
+          let performanceColumns = {};
           let casePerformance = Array.isArray(this.cases[0].case_performance) ? this.cases[0].case_performance : [[this.cases[0].case_performance]];
           casePerformance.forEach(performanceGroup => {
             performanceGroup.forEach(performanceItem => {
@@ -195,34 +221,34 @@ export default {
               sortable: true
             });
           }
-        })
+        });
       }
-
       let data = {};
       for (const el of this.cases) {
         data = utils.formatCase(el, this.alarmThreshold);
         this.casesData.push(data);
       }
-
       this.isLoading = false;
     },
-
     getProjectStatus() {
       logsService.getProjectStatus(utils.getLocal('logId')).then(
-        (response) => {
-          let status = response.data.status;
-
-          if (status === 'SIMULATING') {
-            this.timer = setInterval(() => {
-              this.getCases();
-            }, 5000);
+          (response) => {
+            let status = response.data.status;
+            if (status === 'SIMULATING') {
+              this.timer = setInterval(() => {
+                this.getCases();
+              }, 5000);
+            }
+          },
+          (error) => {
+            console.log(error);
           }
-        },
-        (error) => {
-          console.log(error);
-        }
       );
     },
+    changeView(event) {
+      this.selectedView = event.detail.storage;
+      this.setup();
+    }
   }
-}
+};
 </script>
\ No newline at end of file
diff --git a/src/pages/OngoingCasesManager.vue b/src/pages/OngoingCasesManager.vue
new file mode 100644
index 0000000..3cd2654
--- /dev/null
+++ b/src/pages/OngoingCasesManager.vue
@@ -0,0 +1,205 @@
+<template>
+  <side-bar></side-bar>
+  <loading v-if="isLoading" :startPosition="200"></loading>
+  <div id="cases">
+    <h2>{{ completionString }} Cases Overview</h2>
+    <div class="stats">
+      <div class="stats-card">
+        <div class="column">
+          <small> {{ completionString }} cases</small>
+          <div class="row">
+            <h4> {{ casesData.length }}</h4>
+          </div>
+        </div>
+        <ion-icon name="albums"></ion-icon>
+      </div>
+
+      <div v-if="!this.completion" class="stats-card wrap-text">
+        <small>Cases with recommendations</small>
+        <h3 class="large-number bg-green">{{ casesWithRecommendations }}</h3>
+      </div>
+
+      <div v-if="!this.completion" class="stats-card wrap-text">
+        <small>Cases without recommendations</small>
+        <h3 class="large-number bg-gray">{{ casesData.length - casesWithRecommendations }}</h3>
+      </div>
+    </div>
+
+    <div class="column" v-show="!showTable">
+      <completed-charts-component v-if="completion" :cases="cases" :casesData="casesData"></completed-charts-component>
+
+      <ongoing-charts-component v-if="!completion" :cases="cases" :casesData="casesData"
+                                :alarmThreshold="alarmThreshold"></ongoing-charts-component>
+    </div>
+
+    <div v-if="!showTable" class="cases-table-preview-heading shadow">
+      <h3>Cases Overview Table</h3>
+      <button v-if="!showTable" @click="toggleShowTable" class="btn-link">Show full <ion-icon
+          name="open-outline"></ion-icon></button>
+    </div>
+    <div class="column">
+      <button v-if="showTable" @click="toggleShowTable" class="btn-link"><ion-icon name="chevron-back"></ion-icon> Return
+        to overview</button>
+
+      <cases-table-component :completed="completion" :performanceColumns="performanceColumns" :caseAttributes="caseAttributes" :cases="casesData"
+                             :isFullView="showTable"></cases-table-component>
+    </div>
+  </div>
+</template>
+
+<script>
+import casesService from "@/services/cases.service";
+import logsService from "@/services/logs.service";
+import SideBar from '@/components/SideBarComponent.vue';
+import Loading from "@/components/LoadingComponent.vue";
+import utils from '@/common/utils';
+import CasesTableComponent from "@/components/casesPage/CasesTableComponent.vue";
+import CompletedChartsComponent from "@/components/casesPage/CompletedChartsComponent.vue";
+import OngoingChartsComponent from "@/components/casesPage/OngoingChartsComponent.vue";
+
+export default {
+  name: 'OngoingCasesManager',
+  components: {
+    SideBar,
+    Loading,
+    CasesTableComponent,
+    CompletedChartsComponent,
+    OngoingChartsComponent
+  },
+  computed: {
+    completionString() {
+      return this.completion ? 'Completed' : 'Ongoing';
+    },
+    casesWithRecommendations() {
+      return this.casesData.filter(c => c.recommendations > 0).length;
+    },
+  },
+  data() {
+    return {
+      timer: null,
+      logStatus: 'NULL',
+      completion: this.$route.params.completion === 'completed',
+      showTable: utils.getLocal('casesListShowTable') || false,
+      isLoading: false,
+      cases: [],
+      casesData: [],
+      caseAttributes: [],
+      costUnits: {},
+      performanceColumns: undefined,
+      alarmThreshold: undefined,
+      columnsDefinition: undefined,
+    };
+  },
+  mounted() {
+    if (utils.getLocal('logId')) {
+      this.setup();
+    }
+  },
+  beforeUnmount() {
+    clearInterval(this.timer);
+  },
+  methods: {
+    setup() {
+      this.isLoading = true;
+      this.getCases();
+      this.getProjectStatus();
+    },
+    toggleShowTable() {
+      this.showTable = !this.showTable;
+      utils.setLocal('casesListShowTable', this.showTable, 5);
+    },
+    getCases() {
+      casesService.getCasesByLogAndCompletion(utils.getLocal('logId'), this.completionString.toLowerCase()).then(
+          (response) => {
+            if (this.cases !== response.data.cases && response.data.cases.length > 0) {
+              this.cases = response.data.cases;
+              this.formatCases();
+            } else {
+              this.isLoading = false;
+            }
+          },
+          (error) => {
+            this.isLoading = false;
+            if (error.response.status === 504) return;
+            const resMessage =
+                (error.response && error.response.data && error.response.data.error) ||
+                error.message ||
+                error.toString();
+            this.$notify({
+              title: 'An error occured',
+              text: resMessage,
+              type: 'error'
+            });
+          }
+      );
+    },
+    async getParameters() {
+      try {
+        const response = await logsService.getParameters(utils.getLocal('logId'));
+        this.alarmThreshold = response.data.parameters.alarmThreshold || 1.0;
+        this.costUnits = response.data.parameters.costUnits || {};
+        this.columnsDefinition = response.data.parameters.columnsDefinition;
+      } catch (error) {
+        this.isLoading = false;
+        const resMessage = (error.response &&
+                error.response.data &&
+                error.response.data.error) ||
+            error.message ||
+            error.toString();
+        this.$notify({
+          title: 'An error occurred',
+          text: resMessage,
+          type: 'error'
+        });
+      }
+    },
+    async formatCases() {
+      if (this.casesData.length > 0) {
+        this.casesData = [];
+      } else {
+        if (!this.performanceColumns) {
+          await this.getParameters();
+          let performanceColumns = {};
+          let casePerformance = Array.isArray(this.cases[0].case_performance) ? this.cases[0].case_performance : [[this.cases[0].case_performance]];
+          casePerformance.forEach(performanceGroup => {
+            performanceGroup.forEach(performanceItem => {
+              performanceColumns[performanceItem.column] = this.columnsDefinition[performanceItem.column] || performanceItem.column;
+            });
+          });
+          this.performanceColumns = performanceColumns;
+        }
+        Object.keys(this.cases[0].case_attributes).forEach(k => {
+          if (!this.performanceColumns[k]) {
+            this.caseAttributes.push({
+              label: k + (this.costUnits[k] ? ' (' + this.costUnits[k] + ')' : ''),
+              field: k,
+              sortable: true
+            });
+          }
+        });
+      }
+      let data = {};
+      for (const el of this.cases) {
+        data = utils.formatCase(el, this.alarmThreshold);
+        this.casesData.push(data);
+      }
+      this.isLoading = false;
+    },
+    getProjectStatus() {
+      logsService.getProjectStatus(utils.getLocal('logId')).then(
+          (response) => {
+            let status = response.data.status;
+            if (status === 'SIMULATING') {
+              this.timer = setInterval(() => {
+                this.getCases();
+              }, 5000);
+            }
+          },
+          (error) => {
+            console.log(error);
+          }
+      );
+    },
+  }
+};
+</script>
\ No newline at end of file
diff --git a/src/pages/RecommendationsPage.vue b/src/pages/RecommendationsPage.vue
index 093c83c..e84265d 100644
--- a/src/pages/RecommendationsPage.vue
+++ b/src/pages/RecommendationsPage.vue
@@ -8,50 +8,78 @@
         <div class="column">
           <small>Total current recommendations</small>
           <div class="row">
-            <h4> {{ formattedData.length }}</h4>
+            <h4>{{ formattedData.length }}</h4>
           </div>
         </div>
         <ion-icon name="albums"></ion-icon>
       </div>
-      <button :disabled="table.rows.length < 1" class="btn-blue" @click="exportData()">Export recommendations as
-        CSV</button>
-    </div>
-
-    <div class="recommendations-table">
-      <table-lite :is-hide-paging="true" :is-slot-mode="true" :columns="table.headers" :rows="table.rows"
-        :total="table.rows.length" :sortable="table.sortable" @do-search="doSort" @row-clicked="rowClicked">
-
-        <template v-slot:id="data">
-          <p>{{ formatId(data.value.id) }}</p>
-        </template>
-
-        <template v-slot:performance="data">
-          <p>{{ data.value.performance.value }} {{ data.value.performance.unit }}</p>
-        </template>
-
-      </table-lite>
-
+      <template v-if="selectedView === 'tactical'">
+        <div v-if="parameters.kpi">
+          <div v-for="(positiveOutcomeGroup, index1) in parameters.kpi" :key="index1" class="row align-center">
+            <small class="outcome-grouping" v-if="index1 > 0">or</small>
+            <div v-for="(positiveOutcomeItem, index2) in positiveOutcomeGroup" :key="index2" class="row align-center">
+              <small class="outcome-grouping" v-if="index2 > 0">and</small>
+              <PositiveOutcomeItemComponent v-if="positiveOutcomeItem" :object="positiveOutcomeItem"/>
+            </div>
+          </div>
+        </div>
+      </template>
+      <button :disabled="formattedData.length < 1" class="btn-blue" @click="exportData()">Export recommendations as
+        CSV
+      </button>
     </div>
+    <template v-if="selectedView === 'tactical'">
+      <div class="recommendations-table">
+        <table-lite :is-hide-paging="true" :is-slot-mode="true" :columns="tableManager.headers"
+                    :rows="tableManager.rows"
+                    :total="tableManager.rows.length" :sortable="tableManager.sortable" @row-clicked="rowClicked">
+          <template v-slot:id="data">
+            <p>{{ formatId(data.value.id) }}</p>
+          </template>
+          <template v-slot:performance="data">
+            <p>{{ data.value.performance.value }} {{ data.value.performance.unit }}</p>
+          </template>
+          <template v-slot:details="data">
+            <p>{{ data.value.details }}</p>
+          </template>
+          <template v-slot:showDetails="data">
+            <button @click="rowClicked(data.value.id)" class="show-details">Show details</button>
+          </template>
+        </table-lite>
+      </div>
+    </template>
+    <template v-else>
+      <div class="recommendations-table">
+        <table-lite :is-hide-paging="true" :is-slot-mode="true" :columns="table.headers" :rows="table.rows"
+                    :total="table.rows.length" :sortable="table.sortable" @do-search="doSort" @row-clicked="rowClicked">
+          <template v-slot:id="data">
+            <p>{{ formatId(data.value.id) }}</p>
+          </template>
+          <template v-slot:performance="data">
+            <p>{{ data.value.performance.value }} {{ data.value.performance.unit }}</p>
+          </template>
+        </table-lite>
+      </div>
+    </template>
   </div>
 </template>
-    
-<script>
 
+<script>
 import logsService from "@/services/logs.service";
 import SideBar from '@/components/SideBarComponent.vue';
 import Loading from "@/components/LoadingComponent.vue";
 import TableLite from "vue3-table-lite";
-import utils from '@/common/utils'
+import utils from '@/common/utils';
+import PositiveOutcomeItemComponent from "@/components/PositiveOutcomeItemComponent";
 
 export default {
   name: 'CasesList',
-
   components: {
     SideBar,
     Loading,
     TableLite,
+    PositiveOutcomeItemComponent
   },
-
   data() {
     return {
       timer: null,
@@ -60,7 +88,43 @@ export default {
       formattedData: [],
       performanceColumn: undefined,
       parameters: null,
-
+      selectedView: null,
+      tableManager: {
+        isLoading: false,
+        headers: [
+          {
+            label: 'Case ID',
+            field: 'id',
+            width: "5%",
+            sortable: true,
+          },
+          {
+            label: "Duration",
+            field: "duration",
+            width: "10%",
+            sortable: false,
+          },
+          {
+            label: "Recommendation",
+            field: "recommendationAttribute",
+            width: "10%",
+            sortable: false,
+          },
+          {
+            label: "Details",
+            field: "details",
+            width: "20%",
+            sortable: false,
+          },
+          {
+            label: "",
+            field: "showDetails",
+            width: "5%",
+            sortable: false,
+          }
+        ],
+        rows: [],
+      },
       table: {
         isLoading: false,
         headers: [
@@ -97,61 +161,89 @@ export default {
       },
     };
   },
-
-  mounted() {
-    if (utils.getLocal('logId')) {
-      this.getParameters();
-      this.getProjectStatus();
+  watch: {
+    selectedView() {
+      this.setup();
     }
   },
-
+  mounted() {
+    window.addEventListener('view-changed', this.changeView);
+    this.selectedView = utils.getLocal('view');
+    this.setup();
+  },
   beforeUnmount() {
+    window.removeEventListener('view-changed', this.changeView);
     clearInterval(this.timer);
   },
-
   methods: {
-
+    setup() {
+      this.isLoading = true;
+      if (this.selectedView === 'tactical') {
+        this.getParametersManager();
+      } else {
+        this.getParameters();
+      }
+    },
     formatId(id) {
       if (!id) return null;
       return id.slice(id.indexOf('-') + 1);
     },
-
     rowClicked(row) {
-      this.$router.push({ name: 'case', params: { 'caseId': row.id } })
+      this.$router.push({name: 'case', params: {'caseId': row.id, 'completion': 'ongoing'}});
     },
-
     doSort(offset, limit, order, sort) {
       const sortOrder = sort === 'asc' ? 1 : -1;
       if (order === "performance" && this.performanceColumn === "DURATION") {
         this.table.rows = this.table.rows.sort((a, b) =>
-          (utils.parseDuration(a[order]) > utils.parseDuration(b[order])) ? (1 * sortOrder) : (-1 * sortOrder));
+            (utils.parseDuration(a[order]) > utils.parseDuration(b[order])) ? (1 * sortOrder) : (-1 * sortOrder));
       } else if (order === "performance") {
         this.table.rows = this.table.rows.sort((a, b) =>
-          (a[order].value > b[order].value) ? (1 * sortOrder) : (-1 * sortOrder));
-      }
-      else {
+            (a[order].value > b[order].value) ? (1 * sortOrder) : (-1 * sortOrder));
+      } else {
         this.table.rows = this.table.rows.sort((a, b) => (a[order] > b[order]) ? (1 * sortOrder) : (-1 * sortOrder));
       }
       utils.setLocal('recommendationsOrder', order, 30);
       utils.setLocal('recommendationsSort', sort, 30);
-
       this.table.sortable.order = order;
       this.table.sortable.sort = sort;
     },
+    async exportData() {
+      if (!this.recommendations.length) {
+        this.isLoading = true;
+        try {
+          const response = await logsService.getRecommendations(utils.getLocal('logId'));
+          this.recommendations = response.data.prescriptions;
+          if (this.recommendations.length > 0) {
+            if (this.selectedView === 'tactical') {
+              this.formatRecommendationsManager();
+            } else {
+              this.formatRecommendations();
+            }
+          }
+          this.isLoading = false;
+        } catch (error) {
+          this.isLoading = false;
+          const resMessage = (error.response && error.response.data && error.response.data.error) || error.message || error.toString();
+          this.$notify({
+            title: 'An error occurred',
+            text: resMessage,
+            type: 'error'
+          });
+          return;
+        }
+      }
 
-    exportData() {
-      let csv = this.table.headers.map(h => h.label);
+      let csv = this.table.headers.map(h => h.label).join(',');
       this.table.rows.forEach((row) => {
-        row = Object.values(row);
-        row = row.map(data => {
+        let rowData = Object.values(row).map(data => {
           if (data.value) {
             return [data.value, data.unit].filter(Boolean).join(' ')
           } else {
             return data
           }
-        })
+        });
         csv += "\n";
-        csv += row.join(',');
+        csv += rowData.join(',');
       });
 
       const anchor = document.createElement('a');
@@ -160,54 +252,119 @@ export default {
       anchor.download = 'recommendations.csv';
       anchor.click();
     },
-
-    getRecommendations() {
-      logsService.getRecommendations(utils.getLocal('logId')).then(
-        (response) => {
-          this.recommendations = response.data.prescriptions;
-          if (this.recommendations.length > 0) this.formatRecommendations();
-          this.isLoading = false;
-        },
-        (error) => {
-          this.isLoading = false;
-          const resMessage =
-            (error.response &&
-              error.response.data &&
-              error.response.data.error) ||
-            error.message ||
-            error.toString();
-          this.$notify({
-            title: 'An error occured',
-            text: resMessage,
-            type: 'error'
-          })
+    async getRecommendations() {
+      try {
+        const response = await logsService.getRecommendations(utils.getLocal('logId'));
+        this.recommendations = response.data.prescriptions;
+        if (this.recommendations.length > 0) {
+          if (this.selectedView === 'tactical') {
+            this.formatRecommendationsManager();
+          } else {
+            this.formatRecommendations();
+          }
         }
-      );
+        this.isLoading = false;
+      } catch (error) {
+        this.isLoading = false;
+        const resMessage = (error.response && error.response.data && error.response.data.error) || error.message || error.toString();
+        this.$notify({
+          title: 'An error occurred',
+          text: resMessage,
+          type: 'error'
+        });
+      }
     },
     getParameters() {
-      this.isLoading = true;
       logsService.getParameters(utils.getLocal('logId')).then(
-        (response) => {
-          this.parameters = response.data.parameters;
-          this.getRecommendations();
-        },
-        (error) => {
-          this.isLoading = false;
-          const resMessage =
-            (error.response &&
-              error.response.data &&
-              error.response.data.error) ||
-            error.message ||
-            error.toString();
-          this.$notify({
-            title: 'An error occured',
-            text: resMessage,
-            type: 'error'
-          })
-        }
+          (response) => {
+            this.parameters = response.data.parameters;
+            this.getRecommendations();
+          },
+          (error) => {
+            this.isLoading = false;
+            const resMessage = (error.response && error.response.data && error.response.data.error) || error.message || error.toString();
+            this.$notify({
+              title: 'An error occurred',
+              text: resMessage,
+              type: 'error'
+            });
+          }
       );
     },
+    getParametersManager() {
+      logsService.getParameters(utils.getLocal('logId')).then(
+          (response) => {
+            this.parameters = response.data.parameters;
+            if (!this.parameters.costUnits) this.parameters.costUnits = {};
+            if (!Array.isArray(this.parameters.kpi)) this.parameters.kpi = [[this.parameters.kpi]];
+            this.getRecommendations();
+          },
+          (error) => {
+            this.isLoading = false;
+            const resMessage = (error.response &&
+                    error.response.data &&
+                    error.response.data.error) ||
+                error.message ||
+                error.toString();
+            this.$notify({
+              title: 'An error occurred',
+              text: resMessage,
+              type: 'error'
+            });
+          }
+      );
+    },
+    formatRecommendationsManager() {
+      this.formattedData = [];
+      for (const el of this.recommendations) {
+        var caseId = el._id;
+        var casePerformance = el.case_performance[0][0];
+        for (const batch of el.activities) {
+          for (const rec of batch.prescriptions) {
+            let formattedRec = this.formatRecommendationManager(caseId, casePerformance, rec);
+            if (formattedRec !== null) {
+              this.formattedData.push(formattedRec);
+            }
+          }
+        }
+      }
+      this.tableManager.rows = this.formattedData;
+      if (this.tableManager.sortable && this.tableManager.sortable.order && this.tableManager.sortable.sort) {
+        this.doSort(null, null, this.tableManager.sortable.order, this.tableManager.sortable.sort);
+      }
+    },
+    formatRecommendationManager(id, performance, p) {
+      let recommendationAttr, recommendedAttr;
 
+      if (p.type === 'NEXT_ACTIVITY') {
+        return null;
+      }
+
+      if (p.type === 'ALARM') {
+        recommendationAttr = 'Check the application';
+        if (p.output < this.parameters.alarmThreshold) return null;
+        recommendedAttr = 'Probability of not meeting the KPI is high. It is recommended to check on the application.';
+      } else if (p.type === 'TREATMENT_EFFECT') {
+        recommendationAttr = utils.formatIntervention(p.output, this.parameters.columnsDefinition);
+        if (p.output.cate <= 0) return null;
+
+        recommendedAttr = 'There is a high probability of reaching the KPI if you address this recommendation now.';
+      } else if (p.type === 'RESOURCE_ALLOCATION') {
+        recommendationAttr = utils.formatIntervention(p.output, this.parameters.columnsDefinition);
+        if (p.output.cate <= 0) return null;
+
+        recommendedAttr = 'Resource allocation';
+      }
+
+      let data = {
+        id: id,
+        duration: performance.value + " " + performance.unit,
+        recommendationAttribute: recommendationAttr,
+        details: recommendedAttr,
+      };
+
+      return data;
+    },
     formatRecommendations() {
       this.formattedData = [];
       for (const el of this.recommendations) {
@@ -225,52 +382,48 @@ export default {
       this.table.rows = this.formattedData;
       this.doSort(null, null, this.table.sortable.order, this.table.sortable.sort);
     },
-
     formatRecommendation(id, performance, p) {
       let recommendationAttr, recommendedAttr;
       if (p.type === 'NEXT_ACTIVITY') {
         recommendationAttr = 'Perform ' + p.output;
         recommendedAttr = 'Recommended now';
-      }
-      else if (p.type === 'ALARM') {
+      } else if (p.type === 'ALARM') {
         recommendationAttr = 'Action required';
         if (p.output < this.parameters.alarmThreshold) return null;
         recommendedAttr = 'Predicted probability of not meeting the target is high.';
-      }
-      else if (p.type === 'TREATMENT_EFFECT') {
+      } else if (p.type === 'TREATMENT_EFFECT') {
         recommendationAttr = utils.formatIntervention(p.output, this.parameters.columnsDefinition);
         if (p.output.cate <= 0) return null;
-
         recommendedAttr = 'Predicted effect is positive.';
       }
+
       let data = {
         id: id,
-        performance: { value: performance.value, unit: performance.unit },
+        performance: {value: performance.value, unit: performance.unit},
         recommendationAttribute: recommendationAttr,
         details: recommendedAttr,
-      }
+      };
       return data;
     },
-
     getProjectStatus() {
       logsService.getProjectStatus(utils.getLocal('logId')).then(
-        (response) => {
-          let status = response.data.status;
-
-          if (status === 'SIMULATING') {
-            this.timer = setInterval(() => {
-              this.getRecommendations();
-            }, 4000);
+          (response) => {
+            let status = response.data.status;
+            if (status === 'SIMULATING') {
+              this.timer = setInterval(() => {
+                this.getRecommendations();
+              }, 4000);
+            }
+          },
+          (error) => {
+            console.log(error);
           }
-        },
-        (error) => {
-          console.log(error);
-        }
       );
     },
-
-
+    changeView(event) {
+      this.selectedView = event.detail.storage;
+      this.setup();
+    }
   }
-
-}
-</script>
\ No newline at end of file
+};
+</script>
diff --git a/src/pages/ResourcesPage.vue b/src/pages/ResourcesPage.vue
new file mode 100644
index 0000000..336a596
--- /dev/null
+++ b/src/pages/ResourcesPage.vue
@@ -0,0 +1,99 @@
+<template>
+  <side-bar></side-bar>
+  <loading v-if="isLoading" :startPosition="200"></loading>
+  <div id="resource-management">
+    <h2>Resources</h2>
+    <div class="stats">
+      <div class="kpi wrap-text">
+        <div class="row"><small>Current Workload</small></div>
+        <div class="row"><h3 class="kpi-number large-number">{{ currentWorkload }}%</h3></div>
+      </div>
+      <div class="stats-card bg-light-blue">
+        <div class="column">
+          <small>All Resources</small>
+          <div class="row">
+            <h4>{{ totalResources }}</h4>
+          </div>
+        </div>
+      </div>
+      <div class="stats-card bg-light-green">
+        <div class="column">
+          <small>Available Resources</small>
+          <div class="row">
+            <h4>{{ availableResources }}</h4>
+          </div>
+        </div>
+      </div>
+      <div class="stats-card bg-light-red">
+        <div class="column">
+          <small>Busy Resources</small>
+          <div class="row">
+            <h4>{{ busyResources }}</h4>
+          </div>
+        </div>
+      </div>
+    </div>
+    <ResourcesTable :resources="resources" />
+  </div>
+</template>
+
+<script>
+import SideBar from '@/components/SideBarComponent.vue';
+import Loading from "@/components/LoadingComponent.vue";
+import ResourcesTable from '@/components/ResourcesTableComponent.vue';
+import resourceService from '@/services/resources.service';
+
+export default {
+  name: 'ResourcesPage',
+  components: {
+    SideBar,
+    Loading,
+    ResourcesTable,
+  },
+  data() {
+    return {
+      isLoading: true,
+      resources: [],
+    };
+  },
+  computed: {
+    totalResources() {
+      return this.resources.length;
+    },
+    availableResources() {
+      return this.resources.filter(resource => resource.status === 'Available').length;
+    },
+    busyResources() {
+      return this.resources.filter(resource => resource.status === 'Busy').length;
+    },
+    currentWorkload() {
+      const total = this.totalResources;
+      const busy = this.busyResources;
+      return total > 0 ? Math.round((busy / total) * 100) : 0;
+    }
+  },
+  methods: {
+    async setup() {
+      this.isLoading = true;
+      try {
+        this.resources = await resourceService.fetchResourceData();
+        let newResource = { ...this.resources[0] };
+        newResource.status = "Busy";
+        this.resources.push(newResource);
+        console.log(this.resources);
+      } catch (error) {
+        this.$notify({
+          title: 'An error occurred',
+          text: error.response?.data?.error || error.message || 'Unknown error',
+          type: 'error'
+        });
+      } finally {
+        this.isLoading = false;
+      }
+    },
+  },
+  mounted() {
+    this.setup();
+  }
+};
+</script>
diff --git a/src/router.js b/src/router.js
index 84360e2..162fe88 100644
--- a/src/router.js
+++ b/src/router.js
@@ -7,6 +7,7 @@ import DashBoardPage from './pages/DashBoardPage'
 import ParametersPage from './pages/ParametersPage'
 import ColumnsDefinitionPage from "./pages/ColumnsDefinitionPage"
 import RecommendationsPage from './pages/RecommendationsPage'
+import ResourcesPage from './pages/ResourcesPage.vue';
 
 const routes = [
     {
@@ -57,14 +58,19 @@ const routes = [
                 path: 'columns',
                 name: 'columns',
                 component: ColumnsDefinitionPage,
-            },
-            {
-                path: "recommendations",
-                name: "recommendations",
-                component: RecommendationsPage,
-            },
+            }
         ]
     },
+    {
+        path: '/resources',
+        name: 'resources',
+        component: ResourcesPage,
+    },
+    {
+        path: "/recommendations",
+        name: "recommendations",
+        component: RecommendationsPage,
+    },
 
 ];
 
diff --git a/src/services/resources.service.js b/src/services/resources.service.js
new file mode 100644
index 0000000..8ed2e49
--- /dev/null
+++ b/src/services/resources.service.js
@@ -0,0 +1,105 @@
+import casesService from "@/services/cases.service";
+import utils from "@/common/utils";
+
+const getSystemTime = (cases) => {
+    const casesArray = Array.isArray(cases) ? cases : [cases];
+    for (let event of casesArray) {
+        if (event.activities && Array.isArray(event.activities) && event.activities.length > 0) {
+            for (let activity of event.activities) {
+                if (activity.prescriptions && Array.isArray(activity.prescriptions) && activity.prescriptions.length > 0) {
+                    console.log("Found system time in prescription:", activity.prescriptions[0].date);
+                    return activity.prescriptions[0].date;
+                }
+            }
+        }
+    }
+    console.error("No valid system time found in cases.");
+    return null;
+};
+
+const processResourceData = (cases) => {
+    const systemTime = getSystemTime(cases);
+    if (!systemTime) {
+        console.error("System time is not set. Cannot process resource data.");
+        return [];
+    }
+
+    const systemTimeDate = new Date(systemTime);
+    const casesArray = Array.isArray(cases) ? cases : [cases];
+
+    return casesArray.flatMap(event => {
+        if (!event.activities || !Array.isArray(event.activities) || event.activities.length === 0) {
+            return [];
+        }
+
+        const eventSystemTime = new Date(event.activities[0]["time:timestamp"]);
+
+        return event.activities.flatMap(activity => {
+            return activity.prescriptions
+                .filter(p => p.type === 'RESOURCE_ALLOCATION' && p.output && p.output.allocated_until)
+                .map(p => {
+                    const currentSystemTime = eventSystemTime;
+                    const timeDifference = systemTimeDate - currentSystemTime;
+
+                    const originalAllocatedUntilTime = new Date(p.output.allocated_until);
+                    // Adjust allocated_until by subtracting the time difference
+                    const adjustedAllocatedUntilTime = new Date(originalAllocatedUntilTime.getTime() - timeDifference);
+                    const isBusy = adjustedAllocatedUntilTime > currentSystemTime; // Check if the resource is still allocated
+
+                    return {
+                        id: event._id,
+                        name: `${p.output.resource}`,
+                        role: 'Dynamic Role',
+                        status: isBusy ? 'Busy' : 'Available'
+                    };
+                });
+        });
+    });
+};
+
+const fetchResourceData = async () => {
+    try {
+        const response = await casesService.getCasesByLogAndCompletion(utils.getLocal('logId'), 'ongoing');
+        if (response.data && Array.isArray(response.data.cases) && response.data.cases.length > 0) {
+            return processResourceData(response.data.cases);
+        } else {
+            console.log("No cases data returned from API");
+            return [];
+        }
+    } catch (error) {
+        console.error("Fetching error:", error);
+        throw error;
+    }
+};
+
+const fetchResourceDataByCaseId = async (caseId) => {
+    try {
+        console.log("Fetching cases with logId:", utils.getLocal('logId'));
+        const response = await casesService.getCasesByLogAndCompletion(utils.getLocal('logId'), 'ongoing');
+        console.log("Response from API:", response.data);
+
+        if (response.data && Array.isArray(response.data.cases)) {
+            console.log("Cases is an array with length:", response.data.cases.length);
+            const matchingCase = response.data.cases.find(c => c._id === caseId);
+
+            if (matchingCase) {
+                console.log("Case ID matches:", caseId);
+                return processResourceData([matchingCase]);
+            } else {
+                console.log("No matching case ID found. Expected:", caseId);
+                return [];
+            }
+        } else {
+            console.log("Cases is not an array or is undefined. Cases:", response.data.cases);
+            return [];
+        }
+    } catch (error) {
+        console.error("Fetching error:", error);
+        throw error;
+    }
+};
+
+export default {
+    fetchResourceData,
+    fetchResourceDataByCaseId
+};
\ No newline at end of file