From ac183b53ac79075ebfc613710ddad52f09dcd3cd Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Mon, 16 Sep 2024 14:32:54 -0400
Subject: [PATCH 1/5] FOUR-19000: Create a NEW VIEW for cases Part List

---
 .../jscomposition/base/form/Dropdown.vue      | 147 +++---
 .../jscomposition/base/form/InputLeading.vue  |   4 +-
 .../jscomposition/base/table/BaseTable.vue    |   2 +-
 .../jscomposition/base/table/Pagination.vue   |   2 +-
 resources/jscomposition/base/table/TCell.vue  |  79 +--
 resources/jscomposition/base/ui/AppAvatar.vue |  29 ++
 .../jscomposition/base/ui/AppTooltip.vue      | 183 +++++++
 .../jscomposition/base/ui/SimplePopover.vue   | 120 +++++
 resources/jscomposition/base/ui/index.js      |   5 +-
 .../jscomposition/cases/casesMain/App.vue     |   2 +-
 .../cases/casesMain/CasesDataSection.vue      |   8 +-
 .../cases/casesMain/CasesMain.vue             |  17 +-
 .../cases/casesMain/api/index.js              | 455 ++++++++++++++++++
 .../casesMain/components/BadgeContainer.vue   |  20 -
 .../cases/casesMain/config/columns.js         |  66 ++-
 .../cases/casesMain/utils/counters.js         |  10 +-
 resources/jscomposition/system/index.js       |   2 +
 .../system/table/cell/CaseTitleCell.vue       |  46 ++
 .../system/table/cell/ParticipantsCell.vue    |  81 ++++
 .../system/table/cell/StatusCell.vue          |  70 +++
 .../table/cell/TruncatedOptionsCell.vue       |  95 ++++
 .../jscomposition/system/table/cell/index.js  |  11 +
 resources/jscomposition/system/table/index.js |   1 +
 resources/views/cases/casesMain.blade.php     |   2 +-
 24 files changed, 1295 insertions(+), 162 deletions(-)
 create mode 100644 resources/jscomposition/base/ui/AppAvatar.vue
 create mode 100644 resources/jscomposition/base/ui/AppTooltip.vue
 create mode 100644 resources/jscomposition/base/ui/SimplePopover.vue
 delete mode 100644 resources/jscomposition/cases/casesMain/components/BadgeContainer.vue
 create mode 100644 resources/jscomposition/system/table/cell/CaseTitleCell.vue
 create mode 100644 resources/jscomposition/system/table/cell/ParticipantsCell.vue
 create mode 100644 resources/jscomposition/system/table/cell/StatusCell.vue
 create mode 100644 resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue
 create mode 100644 resources/jscomposition/system/table/cell/index.js
 create mode 100644 resources/jscomposition/system/table/index.js

diff --git a/resources/jscomposition/base/form/Dropdown.vue b/resources/jscomposition/base/form/Dropdown.vue
index d203f60b34..1e28d9eff9 100644
--- a/resources/jscomposition/base/form/Dropdown.vue
+++ b/resources/jscomposition/base/form/Dropdown.vue
@@ -1,15 +1,19 @@
 <template>
-  <div class="t-relative">
+  <div class="tw-relative">
     <slot
       v-bind="{
         toogleShow,
-        data,
+        data
       }"
-      name="input">
+      name="input"
+    >
       <button
-        @click.prevent.stop="show = !show"
-        class="t-flex t-w-full t-justify-between t-items-center t-py-2 t-px-3 t-ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-400">
-        <span>{{ data?.label || data?.value || "" }} </span>
+        class="tw-flex tw-w-full tw-justify-between tw-items-center
+          tw-py-2 tw-px-3 tw-ring-1 tw-ring-inset tw-ring-gray-300 tw-rounded-lg
+          focus:tw-ring-2 focus:tw-ring-inset focus:tw-ring-primary-400"
+        @click.prevent.stop="toogleShow"
+      >
+        <span>{{ data?.label || data?.value }} </span>
 
         <i class="fas fa-chevron-down" />
       </button>
@@ -18,29 +22,39 @@
     <transition :name="animation">
       <div
         v-if="show"
-        :class="'bg-' + color + '-500'"
-        class="block mt-1 rounded absolute z-10 shadow-lg w-full bg-white">
-        <ul class="list-none overflow-hidden rounded">
-          <li
-            v-for="(option, index) in optionsModel"
-            :key="index"
-            class="hover:bg-gray-200"
-            :class="{
-              'bg-gray-300': option?.value === data?.value,
+        class="tw-block tw-mt-1 tw-rounded-lg tw-absolute tw-z-10 tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-inset tw-ring-gray-300"
+      >
+        <ul class="tw-list-none tw-overflow-hidden tw-rounded">
+          <slot
+            name="options"
+            v-bind="{
+              options: optionsModel,
+              data,
+              onClick
             }"
-            @click.prevent.stop="onClick(option, index)">
-            <slot
-              name="option"
-              v-bind="{
-                option,
-              }">
-              <span
-                class="flex py-2 px-4 transition duration-300"
-                :class="'theme-' + color"
-                >{{ option.label || option.value }}</span
+          >
+            <li
+              v-for="(option, index ) in optionsModel"
+              :key="index"
+              class="hover:tw-bg-gray-200"
+              @click.prevent.stop="onClick(option, index)"
+            >
+              <slot
+                name="option"
+                v-bind="{
+                  option,
+                  data
+                }"
               >
-            </slot>
-          </li>
+                <span
+                  :class="{
+                    'tw-bg-gray-300': option?.value === data?.value
+                  }"
+                  class="tw-flex tw-py-2 tw-px-4 transition duration-300"
+                >{{ option.label || option.value }}</span>
+              </slot>
+            </li>
+          </slot>
         </ul>
       </div>
     </transition>
@@ -49,19 +63,22 @@
 
 <script>
 import {
-  defineComponent,
-  ref,
-  computed,
-  onMounted,
-  onUnmounted,
+  defineComponent, ref, computed, onMounted, onUnmounted,
 } from "vue";
 
+/**
+ * <Dropdown
+ *  animation="fade"
+ *  :options='{"label":"Label 1" , "value": "1"}'
+ *  :value="model"
+ * />
+ *
+ * slot::input -> dropdown button
+ * slot:option -> Custom component dropdown option
+ */
+
 export default defineComponent({
   props: {
-    color: {
-      type: String,
-      default: () => "blue",
-    },
     animation: {
       type: String,
       default: () => "fade",
@@ -71,22 +88,21 @@ export default defineComponent({
       type: Array,
       default: () => [],
     },
-    modelValue: {
+    value: {
       type: Object,
       default: () => null,
     },
   },
-  emits: ["update:modelValue", "change"],
+  emits: ["input", "change"],
   setup(props, { emit }) {
     const show = ref(false);
-    const count = ref(0);
 
     const data = computed({
       get() {
-        return props.modelValue;
+        return props.value;
       },
       set(value) {
-        emit("update:modelValue", value);
+        emit("input", value);
       },
     });
 
@@ -126,7 +142,6 @@ export default defineComponent({
       show,
       data,
       optionsModel,
-      count,
       onClick,
       toogleShow,
     };
@@ -136,71 +151,59 @@ export default defineComponent({
 
 <style scoped>
 /* Animations */
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.1s;
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .1s;
 }
-.fade-enter,
-.fade-leave-to {
+.fade-enter, .fade-leave-to {
   opacity: 0;
 }
 
 /* Slide-in-up animation*/
-.slide-in-up-enter-active,
-.slide-in-up-leave-active {
-  transition: all 0.5s;
+.slide-in-up-enter-active, .slide-in-up-leave-active {
+  transition: all .5s;
   transform: translateY(0);
 }
-.slide-in-up-enter,
-.slide-in-up-leave-to {
+.slide-in-up-enter, .slide-in-up-leave-to {
   opacity: 0;
   transform: translateY(20px);
 }
 
 /* Slide-in-right animation*/
-.slide-in-right-enter-active,
-.slide-in-right-leave-active {
-  transition: all 0.5s;
+.slide-in-right-enter-active, .slide-in-right-leave-active {
+  transition: all .5s;
   transform: translateX(0);
 }
-.slide-in-right-enter,
-.slide-in-right-leave-to {
+.slide-in-right-enter, .slide-in-right-leave-to {
   opacity: 0;
   transform: translateX(20px);
 }
 
 /* Slide-in-left animation*/
-.slide-in-left-enter-active,
-.slide-in-left-leave-active {
-  transition: all 0.5s;
+.slide-in-left-enter-active, .slide-in-left-leave-active {
+  transition: all .5s;
   transform: translateX(0);
 }
-.slide-in-left-enter,
-.slide-in-left-leave-to {
+.slide-in-left-enter, .slide-in-left-leave-to {
   opacity: 0;
   transform: translateX(-20px);
 }
 
 /* Scale animation*/
-.scale-enter-active,
-.scale-leave-active {
-  transition: all 0.5s;
+.scale-enter-active, .scale-leave-active {
+  transition: all .5s;
   transform: scale(1);
 }
-.scale-enter,
-.scale-leave-to {
+.scale-enter, .scale-leave-to {
   opacity: 0;
   transform: scale(0);
 }
 
 /* Rotate animation*/
-.rotate-enter-active,
-.rotate-leave-active {
-  transition: all 0.5s;
+.rotate-enter-active, .rotate-leave-active {
+  transition: all .5s;
   transform: scale(1) rotate(-360deg);
 }
-.rotate-enter,
-.rotate-leave-to {
+.rotate-enter, .rotate-leave-to {
   opacity: 0;
   transform: scale(0) rotate(360deg);
 }
diff --git a/resources/jscomposition/base/form/InputLeading.vue b/resources/jscomposition/base/form/InputLeading.vue
index a2fb84868f..d65427d1b6 100644
--- a/resources/jscomposition/base/form/InputLeading.vue
+++ b/resources/jscomposition/base/form/InputLeading.vue
@@ -5,7 +5,7 @@
                 <i :class="icon"></i>
             </slot>
         </div>
-        <input class="tw-block tw-w-full tw-rounded-md tw-border-0 tw-py-2 tw-pl-10 
+        <input class="tw-block tw-w-full tw-rounded-lg tw-border-0 tw-py-2 tw-pl-10 
                 tw-text-gray-900 tw-ring-1 tw-ring-inset tw-ring-gray-300 
                 placeholder:tw-text-gray-400 focus:tw-ring-2 focus:tw-ring-inset
                 focus-visible:tw-outline-none
@@ -23,7 +23,7 @@ export default defineComponent({
         },
         icon: {
             type: String,
-            default: () => ("fa-solid fa-magnifying-glass")
+            default: () => ("fas fa-search")
         }
     },
     setup(props, { emit }) {
diff --git a/resources/jscomposition/base/table/BaseTable.vue b/resources/jscomposition/base/table/BaseTable.vue
index 638ba50f69..e61f117aba 100644
--- a/resources/jscomposition/base/table/BaseTable.vue
+++ b/resources/jscomposition/base/table/BaseTable.vue
@@ -2,7 +2,7 @@
   <div class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
       tw-border tw-rounded-xl tw-border-gray-300 tw-overflow-hidden tw-overflow-x-auto">
     <table class="tw-w-full tw-border-collapse">
-      <thead class="tw-border-b tw-sticky tw-top-0 tw-bg-gray-100">
+      <thead class="tw-border-b tw-sticky tw-top-0 tw-z-10 tw-bg-gray-100">
         <tr>
           <THeader
             v-for="(column, index) in columns"
diff --git a/resources/jscomposition/base/table/Pagination.vue b/resources/jscomposition/base/table/Pagination.vue
index 37fa4d9dff..548b10e20f 100644
--- a/resources/jscomposition/base/table/Pagination.vue
+++ b/resources/jscomposition/base/table/Pagination.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tw-flex tw-items-center tw-justify-start tw-space-x-2 tw-bg-white tw-tw-px-4 tw-py-3 sm:tw-px-6">
+    class="tw-flex tw-items-center tw-justify-start tw-space-x-2 tw-bg-white">
     <div>
       <svg
         class="tw-h-5 tw-w-5"
diff --git a/resources/jscomposition/base/table/TCell.vue b/resources/jscomposition/base/table/TCell.vue
index e990f8d452..0b30ea4f8b 100644
--- a/resources/jscomposition/base/table/TCell.vue
+++ b/resources/jscomposition/base/table/TCell.vue
@@ -1,15 +1,22 @@
 <template>
-  <td class="tw-p-3">
-    <slot
-      v-if="!column.cellRenderer"
-      :columns="columns"
-      :column="column"
-      :row="row">
-      {{ getValue() }}
-    </slot>
-
-    <component v-else :is="column.cellRenderer()" />
-  </td>
+	<td class="tw-p-3">
+		<div
+			v-if="!column.cellRenderer"
+			:style="{ maxWidth: `${column.width}px` }">
+			<slot
+				:columns="columns"
+				:column="column"
+				:row="row">
+				{{ getValue() }}
+			</slot>
+		</div>
+		<component
+			v-else
+			:is="column.cellRenderer()"
+			:columns="columns"
+			:column="column"
+			:row="row" />
+	</td>
 </template>
 
 <script>
@@ -17,30 +24,30 @@ import { defineComponent } from "vue";
 import { isFunction, get } from "lodash";
 
 export default defineComponent({
-  props: {
-    columns: {
-      type: Array,
-      default: () => [],
-    },
-    column: {
-      type: Object,
-      default: () => {},
-    },
-    row: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  setup(props, { emit }) {
-    const getValue = () => {
-      if (isFunction(props.column?.formatter)) {
-        return props.column?.formatter(props.row, props.column, props.columns);
-      }
-      return get(props.row, props.column?.field) || "";
-    };
-    return {
-      getValue,
-    };
-  },
+	props: {
+		columns: {
+			type: Array,
+			default: () => [],
+		},
+		column: {
+			type: Object,
+			default: () => {},
+		},
+		row: {
+			type: Object,
+			default: () => {},
+		},
+	},
+	setup(props, { emit }) {
+		const getValue = () => {
+			if (isFunction(props.column?.formatter)) {
+				return props.column?.formatter(props.row, props.column, props.columns);
+			}
+			return get(props.row, props.column?.field) || "";
+		};
+		return {
+			getValue,
+		};
+	},
 });
 </script>
diff --git a/resources/jscomposition/base/ui/AppAvatar.vue b/resources/jscomposition/base/ui/AppAvatar.vue
new file mode 100644
index 0000000000..cdad2ccb14
--- /dev/null
+++ b/resources/jscomposition/base/ui/AppAvatar.vue
@@ -0,0 +1,29 @@
+<template>
+    <span v-if="initials"
+      class="tw-inline-flex tw-items-center tw-justify-center tw-h-6 tw-w-6 tw-rounded-full tw-bg-gray-500 tw-ring-1 tw-ring-white">
+      <span class="tw-text-xs tw-font-medium tw-leading-none tw-text-white">{{ initials }}</span>
+    </span>
+
+    <img v-else
+      class="tw-relative tw-z-30 tw-inline-block tw-h-6 tw-w-6 tw-rounded-full tw-ring-1 tw-ring-white"
+      src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+      alt="" />
+</template>
+<script>
+import { defineComponent } from "vue";
+export default defineComponent({
+  props: {
+    src: {
+      type: String,
+      default: () => null,
+    },
+    initials: {
+      type: String,
+      default: () => "NA",
+    },
+  },
+  setup(props, {emit}) {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/base/ui/AppTooltip.vue b/resources/jscomposition/base/ui/AppTooltip.vue
new file mode 100644
index 0000000000..1ca69ed684
--- /dev/null
+++ b/resources/jscomposition/base/ui/AppTooltip.vue
@@ -0,0 +1,183 @@
+<template>
+  <div
+    class="tooltip-wrapper"
+    ref="tooltipWrapper"
+    @mouseenter="showTooltip"
+    @mouseleave="hideTooltip">
+    <slot name="default"></slot>
+    <div
+      v-if="visible"
+      class="tooltip-content"
+      :style="{
+        top: `${tooltipPosition.top}px`,
+        left: `${tooltipPosition.left}px`,
+      }"
+      :class="calculatedPosition"
+      ref="tooltip">
+      <slot name="content">
+        {{ content }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, watch, onMounted, nextTick } from "vue";
+
+export default {
+  props: {
+    content: {
+      type: String,
+    },
+    position: {
+      type: String,
+      default: "top", // options: 'top', 'bottom', 'left', 'right'
+      validator: (value) => ["top", "bottom", "left", "right"].includes(value),
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const tooltip = ref(null);
+    const tooltipWrapper = ref(null);
+    const tooltipPosition = ref({ top: 0, left: 0 });
+    const visible = ref(false);
+    const calculatedPosition = ref(props.position);
+
+    const calculatePosition = () => {
+      const wrapperRect = tooltipWrapper.value.getBoundingClientRect();
+      const tooltipRect = tooltip.value.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      let top = 0;
+      let left = 0;
+
+      // Position calculated dynamicaly
+      switch (props.position) {
+        case "top":
+          top = wrapperRect.top - tooltipRect.height - 10;
+          left =
+            wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
+          // Verify space top
+          if (top < 0) {
+            calculatedPosition.value = "bottom";
+            top = wrapperRect.bottom + 10;
+          }
+          break;
+        case "bottom":
+          top = wrapperRect.bottom + 10;
+          left =
+            wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
+          // Verify space bottom
+          if (top + tooltipRect.height > viewportHeight) {
+            calculatedPosition.value = "top";
+            top = wrapperRect.top - tooltipRect.height - 10;
+          }
+          break;
+        case "left":
+          top =
+            wrapperRect.top + wrapperRect.height / 2 - tooltipRect.height / 2;
+          left = wrapperRect.left - tooltipRect.width - 10;
+          // Verify space left
+          if (left < 0) {
+            calculatedPosition.value = "right";
+            left = wrapperRect.right + 10;
+          }
+          break;
+        case "right":
+          top =
+            wrapperRect.top + wrapperRect.height / 2 - tooltipRect.height / 2;
+          left = wrapperRect.right + 10;
+          // Verify space right
+          if (left + tooltipRect.width > viewportWidth) {
+            calculatedPosition.value = "left";
+            left = wrapperRect.left - tooltipRect.width - 10;
+          }
+          break;
+      }
+
+      //Verify if tooltip leaves the viewport
+      top = Math.max(
+        10,
+        Math.min(top, viewportHeight - tooltipRect.height - 10)
+      );
+      left = Math.max(
+        10,
+        Math.min(left, viewportWidth - tooltipRect.width - 10)
+      );
+
+      tooltipPosition.value = { top, left };
+    };
+
+    const showTooltip = () => {
+      visible.value = true;
+      nextTick(() => {
+        calculatePosition();
+      });
+    };
+
+    const hideTooltip = () => {
+      visible.value = false;
+    };
+
+    // Recalculated position when property visible changes
+    watch(
+      () => props.visible,
+      (newVal) => {
+        if (newVal) {
+          showTooltip();
+        } else {
+          hideTooltip();
+        }
+      }
+    );
+
+    onMounted(() => {
+      if (props.visible) {
+        showTooltip();
+      }
+    });
+
+    return {
+      tooltip,
+      tooltipWrapper,
+      tooltipPosition,
+      visible,
+      calculatedPosition,
+      showTooltip,
+      hideTooltip,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.tooltip-wrapper {
+  display: inline-block;
+  position: relative;
+}
+
+.tooltip-content {
+  position: fixed;
+  z-index: 1000;
+}
+
+.tooltip-content.top {
+  transform: translateX(-50%);
+}
+
+.tooltip-content.bottom {
+  transform: translateX(-50%);
+}
+
+.tooltip-content.left {
+  transform: translateY(-50%);
+}
+
+.tooltip-content.right {
+  transform: translateY(-50%);
+}
+</style>
diff --git a/resources/jscomposition/base/ui/SimplePopover.vue b/resources/jscomposition/base/ui/SimplePopover.vue
new file mode 100644
index 0000000000..7dc4e1e8d5
--- /dev/null
+++ b/resources/jscomposition/base/ui/SimplePopover.vue
@@ -0,0 +1,120 @@
+<template>
+		<transition :name="animation">
+			<div
+				v-if="showModel"
+				class="tw-block tw-mt-1 tw-rounded-lg tw-absolute tw-z-10 tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-inset tw-ring-gray-300">
+				<slot></slot>
+			</div>
+		</transition>
+</template>
+
+<script>
+import { defineComponent, ref, computed, onMounted, onUnmounted } from "vue";
+
+export default defineComponent({
+	props: {
+		animation: {
+			type: String,
+			default: () => "fade",
+		},
+		show: {
+			type: Boolean,
+			default: () => false,
+		},
+	},
+	emits: ["input", "close"],
+	setup(props, { emit }) {
+		const showModel = computed(() => {
+			return props.show;
+		});
+
+		const addBodyListener = () => {
+			emit("close", true);
+		};
+
+		onMounted(() => {
+			document.body.addEventListener("click", addBodyListener);
+		});
+
+		onUnmounted(() => {
+			document.body.removeEventListener("click", addBodyListener);
+		});
+
+		return {
+			showModel,
+		};
+	},
+});
+</script>
+
+<style scoped>
+/* Animations */
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.1s;
+}
+.fade-enter,
+.fade-leave-to {
+	opacity: 0;
+}
+
+/* Slide-in-up animation*/
+.slide-in-up-enter-active,
+.slide-in-up-leave-active {
+	transition: all 0.5s;
+	transform: translateY(0);
+}
+.slide-in-up-enter,
+.slide-in-up-leave-to {
+	opacity: 0;
+	transform: translateY(20px);
+}
+
+/* Slide-in-right animation*/
+.slide-in-right-enter-active,
+.slide-in-right-leave-active {
+	transition: all 0.5s;
+	transform: translateX(0);
+}
+.slide-in-right-enter,
+.slide-in-right-leave-to {
+	opacity: 0;
+	transform: translateX(20px);
+}
+
+/* Slide-in-left animation*/
+.slide-in-left-enter-active,
+.slide-in-left-leave-active {
+	transition: all 0.5s;
+	transform: translateX(0);
+}
+.slide-in-left-enter,
+.slide-in-left-leave-to {
+	opacity: 0;
+	transform: translateX(-20px);
+}
+
+/* Scale animation*/
+.scale-enter-active,
+.scale-leave-active {
+	transition: all 0.5s;
+	transform: scale(1);
+}
+.scale-enter,
+.scale-leave-to {
+	opacity: 0;
+	transform: scale(0);
+}
+
+/* Rotate animation*/
+.rotate-enter-active,
+.rotate-leave-active {
+	transition: all 0.5s;
+	transform: scale(1) rotate(-360deg);
+}
+.rotate-enter,
+.rotate-leave-to {
+	opacity: 0;
+	transform: scale(0) rotate(360deg);
+}
+</style>
diff --git a/resources/jscomposition/base/ui/index.js b/resources/jscomposition/base/ui/index.js
index 0e62cb7097..15c2f92ff7 100644
--- a/resources/jscomposition/base/ui/index.js
+++ b/resources/jscomposition/base/ui/index.js
@@ -1,5 +1,8 @@
 import Badge from "./Badge.vue";
+import SimplePopover from "./SimplePopover.vue";
+import AppAvatar from "./AppAvatar.vue";
+import AppTooltip from "./AppTooltip.vue";
 
 export default {};
 
-export { Badge };
+export { Badge, SimplePopover, AppAvatar, AppTooltip};
diff --git a/resources/jscomposition/cases/casesMain/App.vue b/resources/jscomposition/cases/casesMain/App.vue
index fc6d013cb4..6f6b358b21 100644
--- a/resources/jscomposition/cases/casesMain/App.vue
+++ b/resources/jscomposition/cases/casesMain/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tw-p-4">
+  <div class="tw-flex tw-h-[90vh] ">
     <RouterView></RouterView>
   </div>
 </template>
diff --git a/resources/jscomposition/cases/casesMain/CasesDataSection.vue b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
index ff7a733cc7..382e9ea959 100644
--- a/resources/jscomposition/cases/casesMain/CasesDataSection.vue
+++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="tw-w-full tw-space-y-4">
+  <div class="tw-w-full tw-space-y-3 tw-flex tw-flex-col tw-overflow-hidden">
     <CaseFilter />
 
     <BadgesSection v-model="badgesData" />
 
-    <BaseTable :columns="columnsConfig" :data="data" />
+    <BaseTable :columns="columnsConfig" :data="data" class="tw-grow tw-overflow-y-scroll" />
 
     <Pagination />
   </div>
@@ -17,7 +17,7 @@ import { BaseTable, Pagination } from "../../base";
 import { getColumns } from "./config/columns";
 import { Breadcrums } from "../../system";
 import { badges } from "./config/badges";
-import { getData } from "./api";
+import { getData, getAllData } from "./api";
 
 export default defineComponent({
   props: {
@@ -39,7 +39,7 @@ export default defineComponent({
     const data = ref();
 
     onMounted(async () => {
-      data.value = await getData();
+      data.value = await getAllData({type: props.listId, page:15});
 
       columnsConfig.value = getColumns(props.listId);
     });
diff --git a/resources/jscomposition/cases/casesMain/CasesMain.vue b/resources/jscomposition/cases/casesMain/CasesMain.vue
index 71e136cc11..086cc57bce 100644
--- a/resources/jscomposition/cases/casesMain/CasesMain.vue
+++ b/resources/jscomposition/cases/casesMain/CasesMain.vue
@@ -1,13 +1,16 @@
 <template>
-  <div class="tw-w-full tw-space-y-4">
-    <Breadcrums />
+  <div class="tw-w-full tw-space-y-4 tw-flex-col tw-flex tw-grow">
+    <Breadcrums class="tw-bg-white tw-py-3 tw-border-gray-200 tw-border-b tw-shadow-md" />
 
-    <AppCounters
-      class="tw-w-full"
-      v-model="countersData"
-      @change="onChangeCounter" />
+    <div class="tw-mx-4 tw-p-4 tw-bg-white tw-rounded-2xl 
+      tw-border-gray-200 tw-border tw-space-y-4 tw-flex tw-flex-col tw-overflow-hidden tw-grow tw-shadow-md">
+      <AppCounters
+        class="tw-w-full"
+        v-model="countersData"
+        @change="onChangeCounter" />
 
-    <RouterView :key="route.fullPath" />
+      <RouterView :key="route.fullPath" />
+    </div>
   </div>
 </template>
 <script>
diff --git a/resources/jscomposition/cases/casesMain/api/index.js b/resources/jscomposition/cases/casesMain/api/index.js
index b7cbc82bc6..fe86c33782 100644
--- a/resources/jscomposition/cases/casesMain/api/index.js
+++ b/resources/jscomposition/cases/casesMain/api/index.js
@@ -33,3 +33,458 @@ export const getData = async () => {
 
   return objects_list;
 };
+
+export const getAllData = async({type, page})=>{
+  const response = allCasesData.data.map(e=> {
+    e.case_title = `${type} ${page} ${e.case_title}`
+    e.case_title_formatted = `${type} ${page} ${e.case_title_formatted}`
+    return e;
+  })
+  
+ 
+  return response;
+}
+
+export const allCasesData = {
+  data: [
+    {
+      case_number: 0,
+      user_id: 3,
+      case_title: "aut enim natus",
+      case_title_formatted: "ratione repellat <b>rerum</b>",
+      case_status: "COMPLETED",
+      processes: [
+        { id: 5, name: "eligendi ut" },
+        { id: 29869, name: "dolorem qui" },
+        { id: 3, name: "accusantium consectetur" },
+      ],
+      requests: [
+        { id: 92570, name: "delectus voluptatem", parent_request: 24 },
+        { id: 8846, name: "est accusamus culpa", parent_request: 2 },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_6351", name: "libero tenetur quos quibusdam" },
+        { id: "node_2329", name: "modi voluptas quo" },
+        { id: "node_4561", name: "asperiores tenetur" },
+      ],
+      participants: [
+        { id: 25, name: "Dr. Madie Predovic PhD" }
+      ],
+      initiated_at: "1997-08-01T19:59:17.000000Z",
+      completed_at: "2015-11-10T21:25:11.000000Z",
+    },
+    {
+      case_number: 1,
+      user_id: 3,
+      case_title: "et tempora omnis",
+      case_title_formatted: "odio reprehenderit eum",
+      case_status: "IN_PROGRESS",
+      processes: [
+        { id: 39969254, name: "aut itaque" },
+        { id: 316545, name: "voluptatem optio" },
+        { id: 540006393, name: "et dolor" },
+      ],
+      requests: [
+        { id: 689, name: "voluptas aut", parent_request: 185512574 },
+        { id: 3262060, name: "adipisci est qui", parent_request: 93397820 },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_8166", name: "asperiores qui qui molestias" },
+        { id: "node_4102", name: "non repudiandae aut" },
+        { id: "node_4351", name: "ducimus facilis" },
+      ],
+      participants: [
+        { id: 122025, name: "Jaylin Heaney" },
+        { id: 6, name: "Jessika Heller" },
+        { id: 748506844, name: "Jillian Gibson" },
+      ],
+      initiated_at: "1980-12-28T08:22:58.000000Z",
+      completed_at: "2012-07-05T12:27:04.000000Z",
+    },
+    {
+      case_number: 2,
+      user_id: 3,
+      case_title: "qui cum amet",
+      case_title_formatted: "ad ab modi",
+      case_status: "COMPLETED",
+      processes: [
+        { id: 6624, name: "velit voluptatibus" },
+        { id: 34, name: "consequatur quis" },
+        { id: 527764, name: "sint dolores" },
+      ],
+      requests: [
+        { id: 57, name: "impedit ducimus", parent_request: 476 },
+        { id: 4, name: "qui dolorum non", parent_request: 688 },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_1050", name: "maiores vel iste a" },
+        { id: "node_7764", name: "vel nesciunt ratione" },
+        { id: "node_4394", name: "molestiae qui" },
+      ],
+      participants: [
+        { id: 8, name: "Kristofer Crist" },
+        { id: 163202910, name: "Leonard Bergnaum DDS" },
+        { id: 444, name: "Mr. Arvid Schiller MD" },
+      ],
+      initiated_at: "1983-05-19T16:24:24.000000Z",
+      completed_at: "2019-09-07T09:29:56.000000Z",
+    },
+    {
+      case_number: 3,
+      user_id: 3,
+      case_title: "voluptatem quidem quia",
+      case_title_formatted: "qui officiis sapiente",
+      case_status: "COMPLETED",
+      processes: [
+        { id: 92, name: "repellendus voluptatibus" },
+        { id: 880611150, name: "architecto est" },
+        { id: 9284, name: "eligendi veniam" },
+      ],
+      requests: [
+        { id: 3, name: "et aliquid", parent_request: 34377361 },
+        { id: 400403, name: "consequatur vel magni", parent_request: 81981614 },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_1259", name: "et temporibus totam quia" },
+        { id: "node_6096", name: "perferendis animi sapiente" },
+        { id: "node_3455", name: "ut occaecati" },
+      ],
+      participants: [
+        { id: 448166, name: "Eldon Cartwright DVM" },
+        { id: 62433751, name: "Miss Ofelia Grimes" },
+        { id: 96612, name: "Dr. Wilburn Treutel" },
+      ],
+      initiated_at: "2006-05-21T07:20:51.000000Z",
+      completed_at: "1982-03-29T07:36:25.000000Z",
+    },
+    {
+      case_number: 4,
+      user_id: 1,
+      case_title: "sit ut sit",
+      case_title_formatted: "voluptatem deleniti commodi",
+      case_status: "IN_PROGRESS",
+      processes: [
+        { id: 767, name: "cupiditate in" },
+        { id: 38716, name: "recusandae sequi" },
+        { id: 5101818, name: "ut atque" },
+      ],
+      requests: [
+        { id: 845, name: "est voluptates", parent_request: 991 },
+        { id: 6922, name: "repellat deserunt vitae", parent_request: 7 },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_9443", name: "et dignissimos quibusdam esse" },
+        { id: "node_3803", name: "fuga voluptatem ratione" },
+        { id: "node_6273", name: "non omnis" },
+      ],
+      participants: [
+        { id: 2, name: "Allene Purdy" },
+        { id: 13471022, name: "Rhiannon Beer DDS" },
+        { id: 493335, name: "Emma Lemke PhD" },
+      ],
+      initiated_at: "1989-01-02T20:52:49.000000Z",
+      completed_at: "1990-07-04T19:11:55.000000Z",
+    },
+    {
+      case_number: 5,
+      user_id: 1,
+      case_title: "est est ad",
+      case_title_formatted: "dicta vel molestiae",
+      case_status: "IN_PROGRESS",
+      processes: [
+        { id: 69224450, name: "vero ea" },
+        { id: 2477, name: "excepturi voluptatem" },
+        { id: 11857, name: "aut occaecati" },
+      ],
+      requests: [
+        { id: 95, name: "molestias voluptatem", parent_request: 6682658 },
+        { id: 9706673, name: "et quasi ipsum", parent_request: 2 },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_1023", name: "quia a molestiae labore" },
+        { id: "node_8478", name: "assumenda omnis quis" },
+        { id: "node_1863", name: "repellendus saepe" },
+      ],
+      participants: [
+        { id: 5762571, name: "Prof. Chad Ledner" },
+        { id: 9550, name: "Leta Wunsch Jr." },
+        { id: 6589672, name: "Mr. Raul Turcotte" },
+      ],
+      initiated_at: "2018-07-11T00:44:04.000000Z",
+      completed_at: "1977-04-21T20:33:50.000000Z",
+    },
+    {
+      case_number: 6,
+      user_id: 1,
+      case_title: "ullam error doloribus",
+      case_title_formatted: "officiis molestiae ut",
+      case_status: "IN_PROGRESS",
+      processes: [
+        { id: 5181637, name: "delectus dolores" },
+        { id: 58250809, name: "fuga beatae" },
+        { id: 93813951, name: "atque neque" },
+      ],
+      requests: [
+        { id: 6694520, name: "nihil aperiam", parent_request: 525456 },
+        { id: 9067565, name: "beatae voluptatem dolorem", parent_request: 0 },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_8227", name: "totam rerum aut ipsum" },
+        { id: "node_5132", name: "culpa nisi deleniti" },
+        { id: "node_7065", name: "exercitationem minus" },
+      ],
+      participants: [
+        { id: 37343205, name: "Abbey Fay" },
+        { id: 9459, name: "Dr. Ricardo Bernier" },
+        { id: 790987, name: "Baylee Brekke" },
+      ],
+      initiated_at: "2022-12-11T20:48:55.000000Z",
+      completed_at: "2021-11-07T18:15:58.000000Z",
+    },
+    {
+      case_number: 7,
+      user_id: 3,
+      case_title: "eaque amet repellendus",
+      case_title_formatted: "et debitis sit",
+      case_status: "IN_PROGRESS",
+      processes: [
+        { id: 328969, name: "facere sit" },
+        { id: 30, name: "aut omnis" },
+        { id: 261429681, name: "rerum est" },
+      ],
+      requests: [
+        { id: 5157906, name: "voluptate ratione", parent_request: 0 },
+        { id: 60923, name: "voluptatem eius ipsa", parent_request: 27 },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_8511", name: "cumque exercitationem quia sit" },
+        { id: "node_4341", name: "et qui aliquid" },
+        { id: "node_8437", name: "rerum exercitationem" },
+      ],
+      participants: [
+        { id: 7556, name: "Bonnie Altenwerth" },
+        { id: 442, name: "Prof. Nathanael Vandervort" },
+        { id: 23533498, name: "Kirk Pfeffer" },
+      ],
+      initiated_at: "1974-10-13T02:35:47.000000Z",
+      completed_at: "1976-05-06T00:54:14.000000Z",
+    },
+    {
+      case_number: 8,
+      user_id: 3,
+      case_title: "reiciendis optio dicta",
+      case_title_formatted: "voluptas omnis culpa",
+      case_status: "IN_PROGRESS",
+      processes: [
+        { id: 44327628, name: "quod illum" },
+        { id: 5080232, name: "in omnis" },
+        { id: 54, name: "veritatis qui" },
+      ],
+      requests: [
+        { id: 4444, name: "corrupti adipisci", parent_request: 2310454 },
+        { id: 562211360, name: "voluptatibus id omnis", parent_request: 4 },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_8141", name: "fugiat tenetur nihil pariatur" },
+        { id: "node_1343", name: "omnis labore illo" },
+        { id: "node_0356", name: "aut aspernatur" },
+      ],
+      participants: [
+        { id: 2, name: "Luella Gislason" },
+        { id: 47785406, name: "Miss Janae Turner" },
+        { id: 96768614, name: "Amya Larson" },
+      ],
+      initiated_at: "1978-01-13T20:53:00.000000Z",
+      completed_at: "2003-05-09T01:51:49.000000Z",
+    },
+    {
+      case_number: 9,
+      user_id: 1,
+      case_title: "sint eius corporis",
+      case_title_formatted: "eaque ea quas",
+      case_status: "COMPLETED",
+      processes: [
+        { id: 219515988, name: "consequatur maiores" },
+        { id: 174836, name: "soluta sed" },
+        { id: 9, name: "hic architecto" },
+      ],
+      requests: [
+        { id: 3084, name: "tempore incidunt", parent_request: 30470 },
+        { id: 2, name: "neque aut suscipit", parent_request: 81171529 },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_7893", name: "quos ipsam odit quia" },
+        { id: "node_0942", name: "et voluptatem perferendis" },
+        { id: "node_3020", name: "voluptas recusandae" },
+      ],
+      participants: [
+        { id: 8, name: "Kira Buckridge" },
+        { id: 34, name: "Briana Rath" },
+        { id: 3526, name: "Mr. Franco Veum" },
+      ],
+      initiated_at: "1988-02-11T06:46:46.000000Z",
+      completed_at: "1997-11-09T18:06:35.000000Z",
+    },
+    {
+      case_number: 11,
+      user_id: 3,
+      case_title: "facere accusantium sequi",
+      case_title_formatted: "inventore et sequi",
+      case_status: "IN_PROGRESS",
+      processes: [
+        { id: 94422, name: "sapiente culpa" },
+        { id: 4, name: "vero dolorum" },
+        { id: 294713669, name: "sit dolor" },
+      ],
+      requests: [
+        { id: 898, name: "voluptatum perferendis", parent_request: 116178 },
+        { id: 96313178, name: "dolor quis ad", parent_request: 480366 },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_3665", name: "eligendi explicabo suscipit sed" },
+        { id: "node_7456", name: "eaque pariatur consectetur" },
+        { id: "node_8114", name: "dignissimos occaecati" },
+      ],
+      participants: [
+        { id: 52560, name: "Turner Schuppe" },
+        { id: 16577119, name: "Chasity Reinger" },
+        { id: 116, name: "Victor Padberg" },
+      ],
+      initiated_at: "1995-05-26T12:28:06.000000Z",
+      completed_at: "1995-12-13T11:27:23.000000Z",
+    },
+    {
+      case_number: 12,
+      user_id: 1,
+      case_title: "quasi perspiciatis ut",
+      case_title_formatted: "perferendis non ut",
+      case_status: "IN_PROGRESS",
+      processes: [
+        { id: 284983263, name: "dolorem soluta" },
+        { id: 95252498, name: "quos aut" },
+        { id: 1115, name: "sed saepe" },
+      ],
+      requests: [
+        { id: 17469, name: "tenetur temporibus", parent_request: 3 },
+        { id: 94439, name: "odio accusantium sed", parent_request: 189566 },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_6891", name: "unde ratione ab quia" },
+        { id: "node_2660", name: "tenetur odio sed" },
+        { id: "node_5814", name: "ut unde" },
+      ],
+      participants: [
+        { id: 44, name: "Kathlyn Johns IV" },
+        { id: 447100, name: "Mr. Jamie Yundt" },
+        { id: 6992588, name: "Cade McCullough" },
+      ],
+      initiated_at: "1994-05-27T02:03:26.000000Z",
+      completed_at: "2021-01-29T20:34:17.000000Z",
+    },
+    {
+      case_number: 13,
+      user_id: 1,
+      case_title: "recusandae quas provident",
+      case_title_formatted: "placeat veniam fugiat",
+      case_status: "IN_PROGRESS",
+      processes: [
+        { id: 16, name: "ad ratione" },
+        { id: 605, name: "molestiae libero" },
+        { id: 57, name: "quia aspernatur" },
+      ],
+      requests: [
+        { id: 4536, name: "sit quia", parent_request: 78 },
+        { id: 7982002, name: "ea ut itaque", parent_request: 7 },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_1228", name: "error vero exercitationem in" },
+        { id: "node_1423", name: "et quia voluptas" },
+        { id: "node_8448", name: "consequatur ipsa" },
+      ],
+      participants: [
+        { id: 629, name: "Mrs. Vivianne Kling Sr." },
+        { id: 170285, name: "Anthony Reichert" },
+        { id: 845, name: "Miss Cayla Hyatt DVM" },
+      ],
+      initiated_at: "1994-01-07T14:19:05.000000Z",
+      completed_at: "1976-07-19T06:02:22.000000Z",
+    },
+    {
+      case_number: 14,
+      user_id: 1,
+      case_title: "dolore expedita possimus",
+      case_title_formatted: "quia consequuntur blanditiis",
+      case_status: "COMPLETED",
+      processes: [
+        { id: 96, name: "deleniti nam" },
+        { id: 79, name: "totam aut" },
+        { id: 142841245, name: "commodi quod" },
+      ],
+      requests: [
+        { id: 346, name: "eum consequatur", parent_request: 78984 },
+        { id: 353990, name: "aut dolorem deleniti", parent_request: 6272 },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_0731", name: "quia excepturi ea aspernatur" },
+        { id: "node_4862", name: "iure fugit sed" },
+        { id: "node_6267", name: "repellendus fugiat" },
+      ],
+      participants: [
+        { id: 76277, name: "Madonna Purdy" },
+        { id: 28625426, name: "Mr. Timmothy Ankunding MD" },
+        { id: 377993949, name: "Johann Stoltenberg" },
+      ],
+      initiated_at: "1972-11-14T13:12:41.000000Z",
+      completed_at: "1989-03-29T06:06:42.000000Z",
+    },
+    {
+      case_number: 15,
+      user_id: 3,
+      case_title: "adipisci quisquam nulla",
+      case_title_formatted: "velit facere nihil",
+      case_status: "IN_PROGRESS",
+      processes: [
+        { id: 770828, name: "recusandae saepe" },
+        { id: 5361354, name: "quia voluptatem" },
+        { id: 47187, name: "earum molestiae" },
+      ],
+      requests: [
+        { id: 4160, name: "voluptas qui", parent_request: 50115 },
+        {
+          id: 3757,
+          name: "sunt delectus perspiciatis",
+          parent_request: 942749,
+        },
+      ],
+      request_tokens: null,
+      tasks: [
+        { id: "node_7354", name: "commodi sint aliquid et" },
+        { id: "node_0561", name: "quod similique eum" },
+        { id: "node_1082", name: "soluta ut" },
+      ],
+      participants: [
+        { id: 53865127, name: "Marcellus Bailey" },
+        { id: 4, name: "Adrianna Leannon" },
+        { id: 86, name: "Dr. Luis Miller Jr." },
+      ],
+      initiated_at: "1980-10-10T09:54:40.000000Z",
+      completed_at: "1990-08-24T08:24:20.000000Z",
+    },
+  ],
+  meta: { total: 1000, perPage: 15, currentPage: 1, lastPage: 67 },
+};
+
diff --git a/resources/jscomposition/cases/casesMain/components/BadgeContainer.vue b/resources/jscomposition/cases/casesMain/components/BadgeContainer.vue
deleted file mode 100644
index af50e69d44..0000000000
--- a/resources/jscomposition/cases/casesMain/components/BadgeContainer.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <div class="tw-flex tw-justify-center">
-    <Badge color="green"> In progress </Badge>
-  </div>
-</template>
-
-<script>
-import { Badge } from "../../../base/ui/index";
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  components: {
-    Badge,
-  },
-  props: {},
-  setup() {
-    return {};
-  },
-});
-</script>
diff --git a/resources/jscomposition/cases/casesMain/config/columns.js b/resources/jscomposition/cases/casesMain/config/columns.js
index 531f9b6a60..69110dd672 100644
--- a/resources/jscomposition/cases/casesMain/config/columns.js
+++ b/resources/jscomposition/cases/casesMain/config/columns.js
@@ -1,5 +1,34 @@
-import BadgeContainer from "../components/BadgeContainer.vue";
 import AvatarContainer from "../components/AvatarContainer.vue";
+import {
+  CaseTitleCell,
+  TruncatedOptionsCell,
+  ParticipantsCell,
+  StatusCell,
+} from "../../../system/index";
+import moment from "moment";
+
+const formatDate = (value, format) => {
+  let config = "DD/MM/YYYY hh:mm";
+  if (
+    typeof ProcessMaker !== "undefined" &&
+    ProcessMaker.user &&
+    ProcessMaker.user.datetime_format
+  ) {
+    if (format === "datetime") {
+      config = ProcessMaker.user.datetime_format;
+    }
+    if (format === "date") {
+      config = ProcessMaker.user.datetime_format.replace(/[\sHh:msaAzZ]/g, "");
+    }
+  }
+  if (value) {
+    if (moment(value).isValid()) {
+      return moment(value).format(config);
+    }
+    return value;
+  }
+  return "n/a";
+};
 
 export default {};
 /**
@@ -21,31 +50,40 @@ export default {};
 // AllRequest : [Case#, Case Title, Process, Task, Participants, Status, Started, Completed]
 
 export const caseNumberColumn = () => ({
-  field: "caseNumber",
+  field: "case_number",
   headerName: "Case #",
   resizable: true,
-  width: 200,
+  width: 100,
 });
 
 export const caseTitleColumn = () => ({
-  field: "caseTitle",
+  field: "case_title",
   headerName: "Case Title",
   resizable: true,
   width: 200,
+  cellRenderer: () => {
+    return CaseTitleCell;
+  },
 });
 
 export const processColumn = () => ({
-  field: "process",
+  field: "processes",
   headerName: "Process",
   resizable: true,
   width: 200,
+  cellRenderer: () => {
+    return TruncatedOptionsCell;
+  },
 });
 
 export const taskColumn = () => ({
-  field: "task",
+  field: "tasks",
   headerName: "Task",
   resizable: true,
   width: 200,
+  cellRenderer: () => {
+    return TruncatedOptionsCell;
+  },
 });
 
 export const participantsColumn = () => ({
@@ -54,32 +92,38 @@ export const participantsColumn = () => ({
   resizable: true,
   width: 200,
   cellRenderer: () => {
-    return AvatarContainer;
+    return ParticipantsCell;
   },
 });
 
 export const statusColumn = () => ({
-  field: "status",
+  field: "case_status",
   headerName: "Status",
   resizable: true,
   width: 200,
   cellRenderer: () => {
-    return BadgeContainer;
+    return StatusCell;
   },
 });
 
 export const startedColumn = () => ({
-  field: "started",
+  field: "initiated_at",
   headerName: "Started",
   resizable: true,
   width: 200,
+  formatter: (row, column, columns) => {
+    return formatDate(row.initiated_at, "datetime");
+  },
 });
 
 export const completedColumn = () => ({
-  field: "completed",
+  field: "completed_at",
   headerName: "Completed",
   resizable: true,
   width: 200,
+  formatter: (row, column, columns) => {
+    return formatDate(row.completed_at, "datetime");
+  },
 });
 
 export const getColumns = (type) => {
diff --git a/resources/jscomposition/cases/casesMain/utils/counters.js b/resources/jscomposition/cases/casesMain/utils/counters.js
index 2ce87946f8..84569e2e9b 100644
--- a/resources/jscomposition/cases/casesMain/utils/counters.js
+++ b/resources/jscomposition/cases/casesMain/utils/counters.js
@@ -7,35 +7,35 @@ export const formatCounters = (data) => {
       header: t("My cases"),
       body: data.myCases.toString(),
       color: "amber",
-      icon: "fa-regular fa-user",
+      icon: "far fa-user",
       url: "/cases-main/my-cases",
     },
     {
       header: t("In progress"),
       body: data.inProgress.toString(),
       color: "green",
-      icon: "fa-solid fa-list",
+      icon: "fas fa-list",
       url: "/cases-main/in-progress",
     },
     {
       header: t("Completed"),
       body: data.completed.toString(),
       color: "blue",
-      icon: "fa-regular fa-circle-check",
+      icon: "far fa-check-circle",
       url: "/cases-main/completed",
     },
     {
       header: t("All cases"),
       body: data.allCases.toString(),
       color: "purple",
-      icon: "fa-regular fa-clipboard",
+      icon: "far fa-clipboard",
       url: "/cases-main/all-cases",
     },
     {
       header: t("All requests"),
       body: data.allRequests.toString(),
       color: "gray",
-      icon: "fa-solid fa-play",
+      icon: "fas fa-play",
       url: () => {
         window.location.href = "/cases";
       },
diff --git a/resources/jscomposition/system/index.js b/resources/jscomposition/system/index.js
index 02e0d67feb..462c7f79f3 100644
--- a/resources/jscomposition/system/index.js
+++ b/resources/jscomposition/system/index.js
@@ -1,5 +1,7 @@
 import Breadcrums from "./Breadcrums.vue";
 
+export * from "./table/index"
+
 export default {};
 
 export { Breadcrums };
diff --git a/resources/jscomposition/system/table/cell/CaseTitleCell.vue b/resources/jscomposition/system/table/cell/CaseTitleCell.vue
new file mode 100644
index 0000000000..df0d4019b5
--- /dev/null
+++ b/resources/jscomposition/system/table/cell/CaseTitleCell.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <div
+      class="tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis"
+      :style="{ width: column.width + 'px' }"
+      v-if="row.case_title_formatted"
+      v-html="row.case_title_formatted" />
+    <slot
+      v-else
+      :columns="columns"
+      :column="column"
+      :row="row">
+      {{ getValue() }}
+    </slot>
+  </div>
+</template>
+<script>
+import { defineComponent } from "vue";
+export default defineComponent({
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    column: {
+      type: Object,
+      default: () => ({}),
+    },
+    row: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup() {
+    const getValue = () => {
+      if (isFunction(props.column?.formatter)) {
+        return props.column?.formatter(props.row, props.column, props.columns);
+      }
+      return get(props.row, props.column?.field) || "";
+    };
+    return {
+      getValue,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/cell/ParticipantsCell.vue b/resources/jscomposition/system/table/cell/ParticipantsCell.vue
new file mode 100644
index 0000000000..0556fd0077
--- /dev/null
+++ b/resources/jscomposition/system/table/cell/ParticipantsCell.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class=" tw-overflow-hidden tw-flex -tw-space-x-1 tw-items-center tw-justify-center">
+    <div
+      class="tw-group"
+      v-for="(participant, index) in participants">
+      <AppTooltip position="bottom">
+        <AppAvatar
+          :key="index"
+          :class="`${participant.color}`"
+          :initials="participant.name[0]"
+          class="tw-cursor-pointer">
+        </AppAvatar>
+
+        <template #content> 
+            <div class="tw-p-2 tw-rounded-lg tw-border tw-border-gray-300 tw-bg-white">
+                {{ participant.name }}
+            </div>
+        </template>
+      </AppTooltip>
+    </div>
+
+    <span
+      class="tw-px-2"
+      v-if="participants.length == 1"
+      >{{ participants[0].name }}</span
+    >
+  </div>
+</template>
+<script>
+import { defineComponent, computed, ref } from "vue";
+import { AppAvatar, AppTooltip } from "../../../base";
+
+const colors = [
+  "tw-bg-green-500",
+  "tw-bg-gray-400",
+  "tw-bg-yellow-500",
+  "tw-bg-emerald-500",
+  "tw-bg-red-500",
+  "tw-bg-blue-500",
+  "tw-bg-gray-500",
+  "tw-bg-purple-500",
+];
+
+const getRandomInt = (max) => {
+  return Math.floor(Math.random() * max);
+};
+
+export default defineComponent({
+  components: {
+    AppTooltip,
+    AppAvatar,
+  },
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    column: {
+      type: Object,
+      default: () => ({}),
+    },
+    row: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props, { emit }) {
+    const participants = computed(() => {
+      const response = props.row[props.column.field].map((e) => ({
+        ...e,
+        color: colors[getRandomInt(colors.length - 1)],
+      }));
+      return response;
+    });
+
+    return {
+      participants,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/cell/StatusCell.vue b/resources/jscomposition/system/table/cell/StatusCell.vue
new file mode 100644
index 0000000000..d736b57092
--- /dev/null
+++ b/resources/jscomposition/system/table/cell/StatusCell.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="tw-flex tw-justify-center">
+    <span
+      :class="`tw-inline-flex tw-items-center tw-text-xs tw-border-1 tw-rounded-lg
+        tw-bg-${color}-100 tw-px-2 tw-py-1 tw-text-${color}-500`">
+      {{ label }}
+    </span>
+  </div>
+</template>
+<script>
+import { defineComponent, computed } from "vue";
+
+export const statuses = {
+  DRAFT: {
+    color: "red",
+    label: "Draft",
+  },
+  CANCELED: {
+    color: "red",
+    label: "Canceled",
+  },
+  COMPLETED: {
+    color: "blue",
+    label: "Completed",
+  },
+  ERROR: {
+    color: "red",
+    label: "Error",
+  },
+  IN_PROGRESS: {
+    color: "green",
+    label: "In progress",
+  },
+};
+
+export default defineComponent({
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    column: {
+      type: Object,
+      default: () => ({}),
+    },
+    row: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props, { emit }) {
+    const color = computed(() => {
+      return (
+        statuses[props.row[props.column.field]].color || statuses.IN_PROGRESS.color
+      );
+    });
+
+    const label = computed(() => {
+      return (
+        statuses[props.row[props.column.field]].label || statuses.IN_PROGRESS.label
+      );
+    });
+
+    return {
+      color,
+      label,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue b/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue
new file mode 100644
index 0000000000..00272e97bc
--- /dev/null
+++ b/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue
@@ -0,0 +1,95 @@
+<template>
+	<div class="tw-relative ">
+		<div class="tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis"
+			:style="{maxWidth: column.width + 'px'}">
+			<a
+				href="#"
+				v-for="(item, index) in row[column.field]"
+				:key="index"
+				class="hover:tw-text-blue-400
+					[&:not(:last-child)::after]:tw-content-['|'] after:tw-text-gray-400/70 after:tw-text-lg"
+				@click.stop.self="onClick($event, item, index)"
+					>
+				{{ item.name }}
+			</a>
+		</div>
+		
+		<SimplePopover :show="show" @close="onClose">
+			<ul class="tw-list-none tw-overflow-hidden tw-rounded tw-w-50 tw-text-sm">
+            <li
+              v-for="(option, index ) in optionsModel"
+              :key="index"
+              class="hover:tw-bg-gray-200"
+              @click.prevent.stop="onClickOption(option, index)"
+            >
+                <span
+                  class="tw-flex tw-py-2 tw-px-4 transition duration-300 hover:tw-bg-gray-200 hover:tw-cursor-pointer"
+                >{{ option.name || option.id }}</span>    
+            </li>
+        </ul>
+		</SimplePopover>
+	</div>
+</template>
+<script>
+import { defineComponent, nextTick, ref} from "vue";
+import { SimplePopover } from '../../../base/index'
+
+const isTruncated =(element) => {
+	return element.scrollWidth > element.clientWidth;
+}
+
+export default defineComponent({
+	components:{
+		SimplePopover
+	},
+	props: {
+		columns: {
+			type: Array,
+			default: () => [],
+		},
+		column: {
+			type: Object,
+			default: () => ({}),
+		},
+		row: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	setup(props, { emit }) {
+		const show = ref(false)
+		const optionsModel = ref()
+
+		const onClick = (event, item, index)=>{
+			if(isTruncated(event.currentTarget.parentNode) &&
+				event.currentTarget.getBoundingClientRect().right > event.currentTarget.parentNode.getBoundingClientRect().right){
+					optionsModel.value = props.row[props.column.field].slice(index);
+
+					nextTick(()=>{
+						show.value = true;
+					})
+				return	
+			}
+
+			show.value = false;
+			onClickOption(item, index);
+		}
+
+		const onClickOption = (option, index)=>{
+		}
+
+		const onClose = ()=>{
+			show.value = false;
+		}
+
+		return {
+			show,
+			optionsModel,
+			onClose,
+			onClickOption,
+			onClick
+		};
+	},
+});
+</script>
+<style
diff --git a/resources/jscomposition/system/table/cell/index.js b/resources/jscomposition/system/table/cell/index.js
new file mode 100644
index 0000000000..3c33f8bb4f
--- /dev/null
+++ b/resources/jscomposition/system/table/cell/index.js
@@ -0,0 +1,11 @@
+import ParticipantsCell from "./ParticipantsCell.vue"
+import TruncatedOptionsCell from "./TruncatedOptionsCell.vue"
+import StatusCell from "./StatusCell.vue"
+import CaseTitleCell from "./CaseTitleCell.vue"
+
+export {
+  ParticipantsCell,
+  TruncatedOptionsCell,
+  StatusCell,
+  CaseTitleCell
+}
diff --git a/resources/jscomposition/system/table/index.js b/resources/jscomposition/system/table/index.js
new file mode 100644
index 0000000000..08ba296b39
--- /dev/null
+++ b/resources/jscomposition/system/table/index.js
@@ -0,0 +1 @@
+export * from "./cell/index"
\ No newline at end of file
diff --git a/resources/views/cases/casesMain.blade.php b/resources/views/cases/casesMain.blade.php
index 96c49d4dcb..cab8d50617 100644
--- a/resources/views/cases/casesMain.blade.php
+++ b/resources/views/cases/casesMain.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layout',['content_margin' => '', 'overflow-auto' => ''])
 
 @section('title')
 @endsection

From 63793d3c24b7c8a807acb5b192f2d6ef42adceb8 Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Mon, 16 Sep 2024 15:02:28 -0400
Subject: [PATCH 2/5] FOUR-19000: Create a NEW VIEW for cases Part List

---
 resources/jscomposition/base/table/TCell.vue  | 86 +++++++++----------
 .../jscomposition/base/ui/AppTooltip.vue      | 32 +++----
 2 files changed, 55 insertions(+), 63 deletions(-)

diff --git a/resources/jscomposition/base/table/TCell.vue b/resources/jscomposition/base/table/TCell.vue
index 0b30ea4f8b..74d87bdc2f 100644
--- a/resources/jscomposition/base/table/TCell.vue
+++ b/resources/jscomposition/base/table/TCell.vue
@@ -1,22 +1,22 @@
 <template>
-	<td class="tw-p-3">
-		<div
-			v-if="!column.cellRenderer"
-			:style="{ maxWidth: `${column.width}px` }">
-			<slot
-				:columns="columns"
-				:column="column"
-				:row="row">
-				{{ getValue() }}
-			</slot>
-		</div>
-		<component
-			v-else
-			:is="column.cellRenderer()"
-			:columns="columns"
-			:column="column"
-			:row="row" />
-	</td>
+  <td class="tw-p-3">
+    <div
+      v-if="!column.cellRenderer"
+      :style="{ maxWidth: `${column.width}px` }">
+      <slot
+        :columns="columns"
+        :column="column"
+        :row="row">
+        {{ getValue() }}
+      </slot>
+    </div>
+    <component
+      v-else
+      :is="column.cellRenderer()"
+      :columns="columns"
+      :column="column"
+      :row="row" />
+  </td>
 </template>
 
 <script>
@@ -24,30 +24,30 @@ import { defineComponent } from "vue";
 import { isFunction, get } from "lodash";
 
 export default defineComponent({
-	props: {
-		columns: {
-			type: Array,
-			default: () => [],
-		},
-		column: {
-			type: Object,
-			default: () => {},
-		},
-		row: {
-			type: Object,
-			default: () => {},
-		},
-	},
-	setup(props, { emit }) {
-		const getValue = () => {
-			if (isFunction(props.column?.formatter)) {
-				return props.column?.formatter(props.row, props.column, props.columns);
-			}
-			return get(props.row, props.column?.field) || "";
-		};
-		return {
-			getValue,
-		};
-	},
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    column: {
+      type: Object,
+      default: () => {},
+    },
+    row: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  setup(props, { emit }) {
+    const getValue = () => {
+      if (isFunction(props.column?.formatter)) {
+        return props.column?.formatter(props.row, props.column, props.columns);
+      }
+      return get(props.row, props.column?.field) || "";
+    };
+    return {
+      getValue,
+    };
+  },
 });
 </script>
diff --git a/resources/jscomposition/base/ui/AppTooltip.vue b/resources/jscomposition/base/ui/AppTooltip.vue
index 1ca69ed684..c33ad96549 100644
--- a/resources/jscomposition/base/ui/AppTooltip.vue
+++ b/resources/jscomposition/base/ui/AppTooltip.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import { ref, watch, onMounted, nextTick } from "vue";
+import { ref, watch, onMounted, nextTick, onUnmounted } from "vue";
 
 export default {
   props: {
@@ -59,8 +59,7 @@ export default {
       switch (props.position) {
         case "top":
           top = wrapperRect.top - tooltipRect.height - 10;
-          left =
-            wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
+          left = wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
           // Verify space top
           if (top < 0) {
             calculatedPosition.value = "bottom";
@@ -69,8 +68,7 @@ export default {
           break;
         case "bottom":
           top = wrapperRect.bottom + 10;
-          left =
-            wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
+          left = wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
           // Verify space bottom
           if (top + tooltipRect.height > viewportHeight) {
             calculatedPosition.value = "top";
@@ -78,8 +76,7 @@ export default {
           }
           break;
         case "left":
-          top =
-            wrapperRect.top + wrapperRect.height / 2 - tooltipRect.height / 2;
+          top = wrapperRect.top + wrapperRect.height / 2 - tooltipRect.height / 2;
           left = wrapperRect.left - tooltipRect.width - 10;
           // Verify space left
           if (left < 0) {
@@ -88,8 +85,7 @@ export default {
           }
           break;
         case "right":
-          top =
-            wrapperRect.top + wrapperRect.height / 2 - tooltipRect.height / 2;
+          top = wrapperRect.top + wrapperRect.height / 2 - tooltipRect.height / 2;
           left = wrapperRect.right + 10;
           // Verify space right
           if (left + tooltipRect.width > viewportWidth) {
@@ -100,14 +96,8 @@ export default {
       }
 
       //Verify if tooltip leaves the viewport
-      top = Math.max(
-        10,
-        Math.min(top, viewportHeight - tooltipRect.height - 10)
-      );
-      left = Math.max(
-        10,
-        Math.min(left, viewportWidth - tooltipRect.width - 10)
-      );
+      top = Math.max(10, Math.min(top, viewportHeight - tooltipRect.height - 10));
+      left = Math.max(10, Math.min(left, viewportWidth - tooltipRect.width - 10));
 
       tooltipPosition.value = { top, left };
     };
@@ -124,9 +114,7 @@ export default {
     };
 
     // Recalculated position when property visible changes
-    watch(
-      () => props.visible,
-      (newVal) => {
+    const unwatch = watch(() => props.visible, (newVal) => {
         if (newVal) {
           showTooltip();
         } else {
@@ -141,6 +129,10 @@ export default {
       }
     });
 
+    onUnmounted(() => {
+      unwatch();
+    });
+
     return {
       tooltip,
       tooltipWrapper,

From b38b177c042edee53759e5929cbeb123773507bb Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Mon, 16 Sep 2024 15:28:27 -0400
Subject: [PATCH 3/5] FOUR-19000: Create a NEW VIEW for cases Part List

---
 .../jscomposition/base/ui/SimplePopover.vue   | 114 +++++++++---------
 .../table/cell/TruncatedOptionsCell.vue       |  22 ++--
 2 files changed, 69 insertions(+), 67 deletions(-)

diff --git a/resources/jscomposition/base/ui/SimplePopover.vue b/resources/jscomposition/base/ui/SimplePopover.vue
index 7dc4e1e8d5..f5010f50ec 100644
--- a/resources/jscomposition/base/ui/SimplePopover.vue
+++ b/resources/jscomposition/base/ui/SimplePopover.vue
@@ -1,49 +1,49 @@
 <template>
-		<transition :name="animation">
-			<div
-				v-if="showModel"
-				class="tw-block tw-mt-1 tw-rounded-lg tw-absolute tw-z-10 tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-inset tw-ring-gray-300">
-				<slot></slot>
-			</div>
-		</transition>
+  <transition :name="animation">
+    <div
+      v-if="showModel"
+      class="tw-block tw-mt-1 tw-rounded-lg tw-absolute tw-z-10 tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-inset tw-ring-gray-300">
+      <slot></slot>
+    </div>
+  </transition>
 </template>
 
 <script>
 import { defineComponent, ref, computed, onMounted, onUnmounted } from "vue";
 
 export default defineComponent({
-	props: {
-		animation: {
-			type: String,
-			default: () => "fade",
-		},
-		show: {
-			type: Boolean,
-			default: () => false,
-		},
-	},
-	emits: ["input", "close"],
-	setup(props, { emit }) {
-		const showModel = computed(() => {
-			return props.show;
-		});
+  props: {
+    animation: {
+      type: String,
+      default: () => "fade",
+    },
+    show: {
+      type: Boolean,
+      default: () => false,
+    },
+  },
+  emits: ["input", "close"],
+  setup(props, { emit }) {
+    const showModel = computed(() => {
+      return props.show;
+    });
 
-		const addBodyListener = () => {
-			emit("close", true);
-		};
+    const addBodyListener = () => {
+      emit("close", true);
+    };
 
-		onMounted(() => {
-			document.body.addEventListener("click", addBodyListener);
-		});
+    onMounted(() => {
+      document.body.addEventListener("click", addBodyListener);
+    });
 
-		onUnmounted(() => {
-			document.body.removeEventListener("click", addBodyListener);
-		});
+    onUnmounted(() => {
+      document.body.removeEventListener("click", addBodyListener);
+    });
 
-		return {
-			showModel,
-		};
-	},
+    return {
+      showModel,
+    };
+  },
 });
 </script>
 
@@ -51,70 +51,70 @@ export default defineComponent({
 /* Animations */
 .fade-enter-active,
 .fade-leave-active {
-	transition: opacity 0.1s;
+  transition: opacity 0.1s;
 }
 .fade-enter,
 .fade-leave-to {
-	opacity: 0;
+  opacity: 0;
 }
 
 /* Slide-in-up animation*/
 .slide-in-up-enter-active,
 .slide-in-up-leave-active {
-	transition: all 0.5s;
-	transform: translateY(0);
+  transition: all 0.5s;
+  transform: translateY(0);
 }
 .slide-in-up-enter,
 .slide-in-up-leave-to {
-	opacity: 0;
-	transform: translateY(20px);
+  opacity: 0;
+  transform: translateY(20px);
 }
 
 /* Slide-in-right animation*/
 .slide-in-right-enter-active,
 .slide-in-right-leave-active {
-	transition: all 0.5s;
-	transform: translateX(0);
+  transition: all 0.5s;
+  transform: translateX(0);
 }
 .slide-in-right-enter,
 .slide-in-right-leave-to {
-	opacity: 0;
-	transform: translateX(20px);
+  opacity: 0;
+  transform: translateX(20px);
 }
 
 /* Slide-in-left animation*/
 .slide-in-left-enter-active,
 .slide-in-left-leave-active {
-	transition: all 0.5s;
-	transform: translateX(0);
+  transition: all 0.5s;
+  transform: translateX(0);
 }
 .slide-in-left-enter,
 .slide-in-left-leave-to {
-	opacity: 0;
-	transform: translateX(-20px);
+  opacity: 0;
+  transform: translateX(-20px);
 }
 
 /* Scale animation*/
 .scale-enter-active,
 .scale-leave-active {
-	transition: all 0.5s;
-	transform: scale(1);
+  transition: all 0.5s;
+  transform: scale(1);
 }
 .scale-enter,
 .scale-leave-to {
-	opacity: 0;
-	transform: scale(0);
+  opacity: 0;
+  transform: scale(0);
 }
 
 /* Rotate animation*/
 .rotate-enter-active,
 .rotate-leave-active {
-	transition: all 0.5s;
-	transform: scale(1) rotate(-360deg);
+  transition: all 0.5s;
+  transform: scale(1) rotate(-360deg);
 }
 .rotate-enter,
 .rotate-leave-to {
-	opacity: 0;
-	transform: scale(0) rotate(360deg);
+  opacity: 0;
+  transform: scale(0) rotate(360deg);
 }
 </style>
diff --git a/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue b/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue
index 00272e97bc..29ad9f7d04 100644
--- a/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue
+++ b/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue
@@ -16,16 +16,18 @@
 		
 		<SimplePopover :show="show" @close="onClose">
 			<ul class="tw-list-none tw-overflow-hidden tw-rounded tw-w-50 tw-text-sm">
-            <li
-              v-for="(option, index ) in optionsModel"
-              :key="index"
-              class="hover:tw-bg-gray-200"
-              @click.prevent.stop="onClickOption(option, index)"
-            >
-                <span
-                  class="tw-flex tw-py-2 tw-px-4 transition duration-300 hover:tw-bg-gray-200 hover:tw-cursor-pointer"
-                >{{ option.name || option.id }}</span>    
-            </li>
+				<li
+					v-for="(option, index ) in optionsModel"
+					:key="index"
+					class="hover:tw-bg-gray-200"
+					@click.prevent.stop="onClickOption(option, index)"
+				>
+					<span
+							class="tw-flex tw-py-2 tw-px-4 transition 
+							duration-300 hover:tw-bg-gray-200 hover:tw-cursor-pointer">
+						{{ option.name || option.id }}
+					</span>    
+				</li>
         </ul>
 		</SimplePopover>
 	</div>

From 2c67f4d3998a413c724fae010a4f1d7e693fea13 Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Tue, 17 Sep 2024 11:55:53 -0400
Subject: [PATCH 4/5] FOUR-19000: Create a NEW VIEW for cases Part List

---
 .../ui/{AppTooltip.vue => AppPopover.vue}     |  32 +++-
 resources/jscomposition/base/ui/index.js      |   4 +-
 .../cases/casesMain/system/Breadcrums.vue     |  46 ++++++
 .../cases/casesMain/system/index.js           |   7 +
 .../system/table/cell/CaseTitleCell.vue       |  46 ++++++
 .../system/table/cell/ParticipantsCell.vue    |  83 ++++++++++
 .../system/table/cell/StatusCell.vue          |  70 ++++++++
 .../table/cell/TruncatedOptionsCell.vue       |  85 ++++++++++
 .../casesMain/system/table/cell/index.js      |  11 ++
 .../cases/casesMain/system/table/index.js     |   1 +
 .../system/table/cell/CaseTitleCell.vue       |   2 +-
 .../system/table/cell/ParticipantsCell.vue    |  30 ++--
 .../table/cell/TruncatedOptionsCell.vue       | 154 ++++++++----------
 13 files changed, 464 insertions(+), 107 deletions(-)
 rename resources/jscomposition/base/ui/{AppTooltip.vue => AppPopover.vue} (84%)
 create mode 100644 resources/jscomposition/cases/casesMain/system/Breadcrums.vue
 create mode 100644 resources/jscomposition/cases/casesMain/system/index.js
 create mode 100644 resources/jscomposition/cases/casesMain/system/table/cell/CaseTitleCell.vue
 create mode 100644 resources/jscomposition/cases/casesMain/system/table/cell/ParticipantsCell.vue
 create mode 100644 resources/jscomposition/cases/casesMain/system/table/cell/StatusCell.vue
 create mode 100644 resources/jscomposition/cases/casesMain/system/table/cell/TruncatedOptionsCell.vue
 create mode 100644 resources/jscomposition/cases/casesMain/system/table/cell/index.js
 create mode 100644 resources/jscomposition/cases/casesMain/system/table/index.js

diff --git a/resources/jscomposition/base/ui/AppTooltip.vue b/resources/jscomposition/base/ui/AppPopover.vue
similarity index 84%
rename from resources/jscomposition/base/ui/AppTooltip.vue
rename to resources/jscomposition/base/ui/AppPopover.vue
index c33ad96549..306646a0b6 100644
--- a/resources/jscomposition/base/ui/AppTooltip.vue
+++ b/resources/jscomposition/base/ui/AppPopover.vue
@@ -2,8 +2,8 @@
   <div
     class="tooltip-wrapper"
     ref="tooltipWrapper"
-    @mouseenter="showTooltip"
-    @mouseleave="hideTooltip">
+    @mouseenter="($event) => hover && showTooltip($event)"
+    @mouseleave="($event) => hover && hideTooltip($event)">
     <slot name="default"></slot>
     <div
       v-if="visible"
@@ -22,28 +22,41 @@
 </template>
 
 <script>
-import { ref, watch, onMounted, nextTick, onUnmounted } from "vue";
+import { ref, watch, onMounted, nextTick, onUnmounted, computed } from "vue";
 
 export default {
   props: {
     content: {
       type: String,
     },
+    hover: {
+      type: Boolean,
+      default: false,
+    },
     position: {
       type: String,
       default: "top", // options: 'top', 'bottom', 'left', 'right'
       validator: (value) => ["top", "bottom", "left", "right"].includes(value),
     },
-    visible: {
+    value: {
       type: Boolean,
       default: false,
     },
   },
-  setup(props) {
+  setup(props, { emit }) {
     const tooltip = ref(null);
     const tooltipWrapper = ref(null);
     const tooltipPosition = ref({ top: 0, left: 0 });
-    const visible = ref(false);
+    const visible = props.hover
+      ? ref(false)
+      : computed({
+          get: () => {
+            return props.value;
+          },
+          set: (val) => {
+            emit("input", val);
+          },
+        });
     const calculatedPosition = ref(props.position);
 
     const calculatePosition = () => {
@@ -114,7 +127,9 @@ export default {
     };
 
     // Recalculated position when property visible changes
-    const unwatch = watch(() => props.visible, (newVal) => {
+    const unwatch = watch(
+      () => props.value,
+      (newVal) => {
         if (newVal) {
           showTooltip();
         } else {
@@ -127,9 +142,12 @@ export default {
       if (props.visible) {
         showTooltip();
       }
+
+      !props.hover && document.body.addEventListener("click", hideTooltip);
     });
 
     onUnmounted(() => {
+      !props.hover && document.body.removeEventListener("click", hideTooltip);
       unwatch();
     });
 
diff --git a/resources/jscomposition/base/ui/index.js b/resources/jscomposition/base/ui/index.js
index 15c2f92ff7..73f3a8c79c 100644
--- a/resources/jscomposition/base/ui/index.js
+++ b/resources/jscomposition/base/ui/index.js
@@ -1,8 +1,8 @@
 import Badge from "./Badge.vue";
 import SimplePopover from "./SimplePopover.vue";
 import AppAvatar from "./AppAvatar.vue";
-import AppTooltip from "./AppTooltip.vue";
+import AppPopover from "./AppPopover.vue";
 
 export default {};
 
-export { Badge, SimplePopover, AppAvatar, AppTooltip};
+export { Badge, SimplePopover, AppAvatar, AppPopover};
diff --git a/resources/jscomposition/cases/casesMain/system/Breadcrums.vue b/resources/jscomposition/cases/casesMain/system/Breadcrums.vue
new file mode 100644
index 0000000000..a302a27c55
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/system/Breadcrums.vue
@@ -0,0 +1,46 @@
+<template>
+  <nav class="tw-flex tw-text-xs tw-text-gray-400 hover:tw-text-gray-500">
+    <ol class="tw-flex tw-items-center tw-space-x-1">
+      <li>
+        <div>
+          <a href="#" class="">
+            <i class="fa-solid fa-house"></i>
+            <span class="sr-only">Home</span>
+          </a>
+        </div>
+      </li>
+      <li v-for="page in pages" :key="page.name">
+        <div class="tw-flex tw-items-center">
+          <svg
+            class="tw-h-5 tw-w-5 tw-flex-shrink-0"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            aria-hidden="true">
+            <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
+          </svg>
+          <a
+            :href="page.href"
+            class="tw-text-gray-500 hover:tw-text-gray-700"
+            :aria-current="page.current ? 'page' : undefined"
+            >{{ page.name }}</a
+          >
+        </div>
+      </li>
+    </ol>
+  </nav>
+</template>
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    const pages = [
+      { name: "Projects", href: "#", current: false },
+      { name: "Project Nero", href: "#", current: true },
+    ];
+    return {
+      pages,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesMain/system/index.js b/resources/jscomposition/cases/casesMain/system/index.js
new file mode 100644
index 0000000000..462c7f79f3
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/system/index.js
@@ -0,0 +1,7 @@
+import Breadcrums from "./Breadcrums.vue";
+
+export * from "./table/index"
+
+export default {};
+
+export { Breadcrums };
diff --git a/resources/jscomposition/cases/casesMain/system/table/cell/CaseTitleCell.vue b/resources/jscomposition/cases/casesMain/system/table/cell/CaseTitleCell.vue
new file mode 100644
index 0000000000..07c430d5c2
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/system/table/cell/CaseTitleCell.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <div
+      v-if="row.case_title_formatted"
+      class="tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis"
+      :style="{ width: column.width + 'px' }"
+      v-html="row.case_title_formatted" />
+    <slot
+      v-else
+      :columns="columns"
+      :column="column"
+      :row="row">
+      {{ getValue() }}
+    </slot>
+  </div>
+</template>
+<script>
+import { defineComponent } from "vue";
+export default defineComponent({
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    column: {
+      type: Object,
+      default: () => ({}),
+    },
+    row: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup() {
+    const getValue = () => {
+      if (isFunction(props.column?.formatter)) {
+        return props.column?.formatter(props.row, props.column, props.columns);
+      }
+      return get(props.row, props.column?.field) || "";
+    };
+    return {
+      getValue,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesMain/system/table/cell/ParticipantsCell.vue b/resources/jscomposition/cases/casesMain/system/table/cell/ParticipantsCell.vue
new file mode 100644
index 0000000000..ae7ba0a69e
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/system/table/cell/ParticipantsCell.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="tw-overflow-hidden tw-flex -tw-space-x-1 tw-items-center tw-justify-center">
+    <div
+      v-for="(participant, index) in participants"
+      class="tw-group">
+      <AppPopover
+        position="bottom"
+        :hover="true">
+        <AppAvatar
+          :key="index"
+          :class="`${participant.color}`"
+          :initials="participant.name[0]"
+          class="tw-cursor-pointer">
+        </AppAvatar>
+
+        <template #content>
+          <div class="tw-p-2 tw-rounded-lg tw-border tw-border-gray-300 tw-bg-white">
+            {{ participant.name }}
+          </div>
+        </template>
+      </AppPopover>
+    </div>
+
+    <span
+      v-if="participants.length == 1"
+      class="tw-px-2">
+      {{ participants[0].name }}
+    </span>
+  </div>
+</template>
+<script>
+import { defineComponent, computed, ref } from "vue";
+import { AppAvatar, AppPopover } from "../../../base";
+
+const colors = [
+  "tw-bg-green-500",
+  "tw-bg-gray-400",
+  "tw-bg-yellow-500",
+  "tw-bg-emerald-500",
+  "tw-bg-red-500",
+  "tw-bg-blue-500",
+  "tw-bg-gray-500",
+  "tw-bg-purple-500",
+];
+
+const getRandomInt = (max) => {
+  return Math.floor(Math.random() * max);
+};
+
+export default defineComponent({
+  components: {
+    AppPopover,
+    AppAvatar,
+  },
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    column: {
+      type: Object,
+      default: () => ({}),
+    },
+    row: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props, { emit }) {
+    const participants = computed(() => {
+      const response = props.row[props.column.field].map((e) => ({
+        ...e,
+        color: colors[getRandomInt(colors.length - 1)],
+      }));
+      return response;
+    });
+
+    return {
+      participants,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesMain/system/table/cell/StatusCell.vue b/resources/jscomposition/cases/casesMain/system/table/cell/StatusCell.vue
new file mode 100644
index 0000000000..d736b57092
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/system/table/cell/StatusCell.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="tw-flex tw-justify-center">
+    <span
+      :class="`tw-inline-flex tw-items-center tw-text-xs tw-border-1 tw-rounded-lg
+        tw-bg-${color}-100 tw-px-2 tw-py-1 tw-text-${color}-500`">
+      {{ label }}
+    </span>
+  </div>
+</template>
+<script>
+import { defineComponent, computed } from "vue";
+
+export const statuses = {
+  DRAFT: {
+    color: "red",
+    label: "Draft",
+  },
+  CANCELED: {
+    color: "red",
+    label: "Canceled",
+  },
+  COMPLETED: {
+    color: "blue",
+    label: "Completed",
+  },
+  ERROR: {
+    color: "red",
+    label: "Error",
+  },
+  IN_PROGRESS: {
+    color: "green",
+    label: "In progress",
+  },
+};
+
+export default defineComponent({
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    column: {
+      type: Object,
+      default: () => ({}),
+    },
+    row: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props, { emit }) {
+    const color = computed(() => {
+      return (
+        statuses[props.row[props.column.field]].color || statuses.IN_PROGRESS.color
+      );
+    });
+
+    const label = computed(() => {
+      return (
+        statuses[props.row[props.column.field]].label || statuses.IN_PROGRESS.label
+      );
+    });
+
+    return {
+      color,
+      label,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesMain/system/table/cell/TruncatedOptionsCell.vue b/resources/jscomposition/cases/casesMain/system/table/cell/TruncatedOptionsCell.vue
new file mode 100644
index 0000000000..77be8e0a5f
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/system/table/cell/TruncatedOptionsCell.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="tw-flex tw-relative tw-text-nowrap tw-whitespace-nowrap"
+		:style="{ width: column.width + 'px' }">
+    <div class="tw-overflow-hidden tw-text-ellipsis ">
+			{{ row[column.field][0].name }}
+		</div>
+
+    <AppPopover
+		  v-model="show"
+      :hover="false"
+      position="bottom"
+      class="!tw-absolute -tw-right-3">
+      <div
+        class="hover:tw-bg-gray-200 tw-bg-white tw-px-2 tw-rounded-md hover:tw-cursor-pointer"
+        @click.prevent.stop="onClick">
+        <i class="fa-solid fa-ellipsis-vertical"></i>
+      </div>
+
+      <template #content>
+        <ul
+          class="tw-bg-white tw-list-none tw-text-gray-600 tw-overflow-hidden tw-rounded-lg tw-w-50 tw-text-sm tw-border tw-border-gray-300">
+          <li
+            v-for="(option, index) in optionsModel"
+            :key="index"
+            class="hover:tw-bg-gray-100"
+            @click.prevent.stop="onClickOption(option, index)">
+            <span class="tw-flex tw-py-2 tw-px-4 transition duration-300 hover:tw-bg-gray-200 hover:tw-cursor-pointer">
+              {{ option.name || option.id }}
+            </span>
+          </li>
+        </ul>
+      </template>
+    </AppPopover>
+  </div>
+</template>
+<script>
+import { defineComponent, nextTick, ref } from "vue";
+import { AppPopover } from "../../../base/index";
+
+const isTruncated = (element) => {
+  return element.scrollWidth > element.clientWidth;
+};
+
+export default defineComponent({
+  components: {
+    AppPopover,
+  },
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    column: {
+      type: Object,
+      default: () => ({}),
+    },
+    row: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props, { emit }) {
+    const show = ref(false);
+    const optionsModel = ref(props.row[props.column.field]);
+
+    const onClick = () => {
+      show.value = !show.value;
+    };
+
+    const onClickOption = (option, index) => {};
+
+    const onClose = () => {
+      show.value = false;
+    };
+
+    return {
+      show,
+      optionsModel,
+      onClose,
+      onClickOption,
+      onClick,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesMain/system/table/cell/index.js b/resources/jscomposition/cases/casesMain/system/table/cell/index.js
new file mode 100644
index 0000000000..3c33f8bb4f
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/system/table/cell/index.js
@@ -0,0 +1,11 @@
+import ParticipantsCell from "./ParticipantsCell.vue"
+import TruncatedOptionsCell from "./TruncatedOptionsCell.vue"
+import StatusCell from "./StatusCell.vue"
+import CaseTitleCell from "./CaseTitleCell.vue"
+
+export {
+  ParticipantsCell,
+  TruncatedOptionsCell,
+  StatusCell,
+  CaseTitleCell
+}
diff --git a/resources/jscomposition/cases/casesMain/system/table/index.js b/resources/jscomposition/cases/casesMain/system/table/index.js
new file mode 100644
index 0000000000..08ba296b39
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/system/table/index.js
@@ -0,0 +1 @@
+export * from "./cell/index"
\ No newline at end of file
diff --git a/resources/jscomposition/system/table/cell/CaseTitleCell.vue b/resources/jscomposition/system/table/cell/CaseTitleCell.vue
index df0d4019b5..07c430d5c2 100644
--- a/resources/jscomposition/system/table/cell/CaseTitleCell.vue
+++ b/resources/jscomposition/system/table/cell/CaseTitleCell.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <div
+      v-if="row.case_title_formatted"
       class="tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis"
       :style="{ width: column.width + 'px' }"
-      v-if="row.case_title_formatted"
       v-html="row.case_title_formatted" />
     <slot
       v-else
diff --git a/resources/jscomposition/system/table/cell/ParticipantsCell.vue b/resources/jscomposition/system/table/cell/ParticipantsCell.vue
index 0556fd0077..ae7ba0a69e 100644
--- a/resources/jscomposition/system/table/cell/ParticipantsCell.vue
+++ b/resources/jscomposition/system/table/cell/ParticipantsCell.vue
@@ -1,9 +1,11 @@
 <template>
-  <div class=" tw-overflow-hidden tw-flex -tw-space-x-1 tw-items-center tw-justify-center">
+  <div class="tw-overflow-hidden tw-flex -tw-space-x-1 tw-items-center tw-justify-center">
     <div
-      class="tw-group"
-      v-for="(participant, index) in participants">
-      <AppTooltip position="bottom">
+      v-for="(participant, index) in participants"
+      class="tw-group">
+      <AppPopover
+        position="bottom"
+        :hover="true">
         <AppAvatar
           :key="index"
           :class="`${participant.color}`"
@@ -11,24 +13,24 @@
           class="tw-cursor-pointer">
         </AppAvatar>
 
-        <template #content> 
-            <div class="tw-p-2 tw-rounded-lg tw-border tw-border-gray-300 tw-bg-white">
-                {{ participant.name }}
-            </div>
+        <template #content>
+          <div class="tw-p-2 tw-rounded-lg tw-border tw-border-gray-300 tw-bg-white">
+            {{ participant.name }}
+          </div>
         </template>
-      </AppTooltip>
+      </AppPopover>
     </div>
 
     <span
-      class="tw-px-2"
       v-if="participants.length == 1"
-      >{{ participants[0].name }}</span
-    >
+      class="tw-px-2">
+      {{ participants[0].name }}
+    </span>
   </div>
 </template>
 <script>
 import { defineComponent, computed, ref } from "vue";
-import { AppAvatar, AppTooltip } from "../../../base";
+import { AppAvatar, AppPopover } from "../../../base";
 
 const colors = [
   "tw-bg-green-500",
@@ -47,7 +49,7 @@ const getRandomInt = (max) => {
 
 export default defineComponent({
   components: {
-    AppTooltip,
+    AppPopover,
     AppAvatar,
   },
   props: {
diff --git a/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue b/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue
index 29ad9f7d04..71b6f03c0b 100644
--- a/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue
+++ b/resources/jscomposition/system/table/cell/TruncatedOptionsCell.vue
@@ -1,97 +1,85 @@
 <template>
-	<div class="tw-relative ">
-		<div class="tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis"
-			:style="{maxWidth: column.width + 'px'}">
-			<a
-				href="#"
-				v-for="(item, index) in row[column.field]"
-				:key="index"
-				class="hover:tw-text-blue-400
-					[&:not(:last-child)::after]:tw-content-['|'] after:tw-text-gray-400/70 after:tw-text-lg"
-				@click.stop.self="onClick($event, item, index)"
-					>
-				{{ item.name }}
-			</a>
+  <div class="tw-flex tw-relative tw-text-nowrap tw-whitespace-nowrap"
+		:style="{ width: column.width + 'px' }">
+    <div class="tw-overflow-hidden tw-text-ellipsis ">
+			{{ row[column.field][0].name }}
 		</div>
-		
-		<SimplePopover :show="show" @close="onClose">
-			<ul class="tw-list-none tw-overflow-hidden tw-rounded tw-w-50 tw-text-sm">
-				<li
-					v-for="(option, index ) in optionsModel"
-					:key="index"
-					class="hover:tw-bg-gray-200"
-					@click.prevent.stop="onClickOption(option, index)"
-				>
-					<span
-							class="tw-flex tw-py-2 tw-px-4 transition 
-							duration-300 hover:tw-bg-gray-200 hover:tw-cursor-pointer">
-						{{ option.name || option.id }}
-					</span>    
-				</li>
+
+    <AppPopover
+		  v-model="show"
+      :hover="false"
+      position="bottom"
+      class="!tw-absolute -tw-right-3">
+      <div
+        class="hover:tw-bg-gray-200 tw-bg-white tw-px-2 tw-rounded-md hover:tw-cursor-pointer"
+        @click.prevent.stop="onClick">
+        <i class="fas fa-ellipsis-v"></i>
+      </div>
+
+      <template #content>
+        <ul
+          class="tw-bg-white tw-list-none tw-text-gray-600 tw-overflow-hidden tw-rounded-lg tw-w-50 tw-text-sm tw-border tw-border-gray-300">
+          <li
+            v-for="(option, index) in optionsModel"
+            :key="index"
+            class="hover:tw-bg-gray-100"
+            @click.prevent.stop="onClickOption(option, index)">
+            <span class="tw-flex tw-py-2 tw-px-4 transition duration-300 hover:tw-bg-gray-200 hover:tw-cursor-pointer">
+              {{ option.name || option.id }}
+            </span>
+          </li>
         </ul>
-		</SimplePopover>
-	</div>
+      </template>
+    </AppPopover>
+  </div>
 </template>
 <script>
-import { defineComponent, nextTick, ref} from "vue";
-import { SimplePopover } from '../../../base/index'
+import { defineComponent, nextTick, ref } from "vue";
+import { AppPopover } from "../../../base/index";
 
-const isTruncated =(element) => {
-	return element.scrollWidth > element.clientWidth;
-}
+const isTruncated = (element) => {
+  return element.scrollWidth > element.clientWidth;
+};
 
 export default defineComponent({
-	components:{
-		SimplePopover
-	},
-	props: {
-		columns: {
-			type: Array,
-			default: () => [],
-		},
-		column: {
-			type: Object,
-			default: () => ({}),
-		},
-		row: {
-			type: Object,
-			default: () => ({}),
-		},
-	},
-	setup(props, { emit }) {
-		const show = ref(false)
-		const optionsModel = ref()
-
-		const onClick = (event, item, index)=>{
-			if(isTruncated(event.currentTarget.parentNode) &&
-				event.currentTarget.getBoundingClientRect().right > event.currentTarget.parentNode.getBoundingClientRect().right){
-					optionsModel.value = props.row[props.column.field].slice(index);
-
-					nextTick(()=>{
-						show.value = true;
-					})
-				return	
-			}
+  components: {
+    AppPopover,
+  },
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    column: {
+      type: Object,
+      default: () => ({}),
+    },
+    row: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props, { emit }) {
+    const show = ref(false);
+    const optionsModel = ref(props.row[props.column.field]);
 
-			show.value = false;
-			onClickOption(item, index);
-		}
+    const onClick = () => {
+      show.value = !show.value;
+    };
 
-		const onClickOption = (option, index)=>{
-		}
+    const onClickOption = (option, index) => {};
 
-		const onClose = ()=>{
-			show.value = false;
-		}
+    const onClose = () => {
+      show.value = false;
+    };
 
-		return {
-			show,
-			optionsModel,
-			onClose,
-			onClickOption,
-			onClick
-		};
-	},
+    return {
+      show,
+      optionsModel,
+      onClose,
+      onClickOption,
+      onClick,
+    };
+  },
 });
 </script>
-<style

From 22483ec2bfad255cc8e91b6ad0ee19284ed889bf Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Tue, 17 Sep 2024 12:21:02 -0400
Subject: [PATCH 5/5] FOUR-19000: Create a NEW VIEW for cases Part List

---
 .../cases/casesMain/system/table/cell/StatusCell.vue            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/jscomposition/cases/casesMain/system/table/cell/StatusCell.vue b/resources/jscomposition/cases/casesMain/system/table/cell/StatusCell.vue
index d736b57092..b904ce8470 100644
--- a/resources/jscomposition/cases/casesMain/system/table/cell/StatusCell.vue
+++ b/resources/jscomposition/cases/casesMain/system/table/cell/StatusCell.vue
@@ -12,7 +12,7 @@ import { defineComponent, computed } from "vue";
 
 export const statuses = {
   DRAFT: {
-    color: "red",
+    color: "yellow",
     label: "Draft",
   },
   CANCELED: {