From bc94f649de44483e2e42fc224bfbf7cc13dae3b6 Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Thu, 12 Sep 2024 10:24:18 -0400
Subject: [PATCH 1/4] FOUR-19004: Create a NEW VIEW for cases Part Counters

---
 .../Http/Controllers/CasesController.php      |  44 ++++
 .../base/buttons/OutlineButton.vue            |  32 +++
 resources/jscomposition/base/buttons/index.js |   7 +
 .../base/cards/ThreeSectionCard.vue           |  68 +++++++
 resources/jscomposition/base/cards/index.js   |   7 +
 .../jscomposition/base/form/Dropdown.vue      | 191 ++++++++++++++++++
 .../jscomposition/base/form/InputLeading.vue  |  34 ++++
 resources/jscomposition/base/form/index.js    |   9 +
 resources/jscomposition/base/index.js         |   7 +
 .../jscomposition/base/table/BaseTable.vue    |  72 +++++++
 .../jscomposition/base/table/Pagination.vue   | 128 ++++++++++++
 resources/jscomposition/base/table/TCell.vue  |  43 ++++
 .../jscomposition/base/table/TFooter.vue      |  16 ++
 .../jscomposition/base/table/THeader.vue      |  55 +++++
 resources/jscomposition/base/table/TRow.vue   |  14 ++
 .../table/composables/columnComposable.js     |  55 +++++
 resources/jscomposition/base/table/index.js   |  15 ++
 resources/jscomposition/base/ui/Badge.vue     |  22 ++
 resources/jscomposition/base/ui/index.js      |   7 +
 .../jscomposition/cases/casesMain/App.vue     |  18 ++
 .../cases/casesMain/CasesDataSection.vue      |  54 +++++
 .../cases/casesMain/CasesMain.vue             |  49 +++++
 .../cases/casesMain/api/index.js              |  35 ++++
 .../casesMain/components/AppCounters.vue      |  67 ++++++
 .../casesMain/components/AvatarContainer.vue  |  17 ++
 .../casesMain/components/BadgeContainer.vue   |  23 +++
 .../casesMain/components/BadgesSection.vue    |  35 ++++
 .../cases/casesMain/components/CaseFilter.vue |  22 ++
 .../cases/casesMain/config/badges.js          |  16 ++
 .../cases/casesMain/config/columns.js         | 132 ++++++++++++
 .../cases/casesMain/config/index.js           |   2 +
 .../jscomposition/cases/casesMain/main.js     |  20 ++
 .../jscomposition/cases/casesMain/routes.js   |  28 +++
 .../cases/casesMain/utils/counters.js         |  45 +++++
 .../cases/casesMain/utils/index.js            |   1 +
 resources/jscomposition/system/Breadcrums.vue |  38 ++++
 resources/jscomposition/system/index.js       |   7 +
 resources/views/cases/casesMain.blade.php     |  24 +++
 routes/web.php                                |   6 +
 webpack.mix.js                                |   4 +
 40 files changed, 1469 insertions(+)
 create mode 100644 ProcessMaker/Http/Controllers/CasesController.php
 create mode 100644 resources/jscomposition/base/buttons/OutlineButton.vue
 create mode 100644 resources/jscomposition/base/buttons/index.js
 create mode 100644 resources/jscomposition/base/cards/ThreeSectionCard.vue
 create mode 100644 resources/jscomposition/base/cards/index.js
 create mode 100644 resources/jscomposition/base/form/Dropdown.vue
 create mode 100644 resources/jscomposition/base/form/InputLeading.vue
 create mode 100644 resources/jscomposition/base/form/index.js
 create mode 100644 resources/jscomposition/base/index.js
 create mode 100644 resources/jscomposition/base/table/BaseTable.vue
 create mode 100644 resources/jscomposition/base/table/Pagination.vue
 create mode 100644 resources/jscomposition/base/table/TCell.vue
 create mode 100644 resources/jscomposition/base/table/TFooter.vue
 create mode 100644 resources/jscomposition/base/table/THeader.vue
 create mode 100644 resources/jscomposition/base/table/TRow.vue
 create mode 100644 resources/jscomposition/base/table/composables/columnComposable.js
 create mode 100644 resources/jscomposition/base/table/index.js
 create mode 100644 resources/jscomposition/base/ui/Badge.vue
 create mode 100644 resources/jscomposition/base/ui/index.js
 create mode 100644 resources/jscomposition/cases/casesMain/App.vue
 create mode 100644 resources/jscomposition/cases/casesMain/CasesDataSection.vue
 create mode 100644 resources/jscomposition/cases/casesMain/CasesMain.vue
 create mode 100644 resources/jscomposition/cases/casesMain/api/index.js
 create mode 100644 resources/jscomposition/cases/casesMain/components/AppCounters.vue
 create mode 100644 resources/jscomposition/cases/casesMain/components/AvatarContainer.vue
 create mode 100644 resources/jscomposition/cases/casesMain/components/BadgeContainer.vue
 create mode 100644 resources/jscomposition/cases/casesMain/components/BadgesSection.vue
 create mode 100644 resources/jscomposition/cases/casesMain/components/CaseFilter.vue
 create mode 100644 resources/jscomposition/cases/casesMain/config/badges.js
 create mode 100644 resources/jscomposition/cases/casesMain/config/columns.js
 create mode 100644 resources/jscomposition/cases/casesMain/config/index.js
 create mode 100644 resources/jscomposition/cases/casesMain/main.js
 create mode 100644 resources/jscomposition/cases/casesMain/routes.js
 create mode 100644 resources/jscomposition/cases/casesMain/utils/counters.js
 create mode 100644 resources/jscomposition/cases/casesMain/utils/index.js
 create mode 100644 resources/jscomposition/system/Breadcrums.vue
 create mode 100644 resources/jscomposition/system/index.js
 create mode 100644 resources/views/cases/casesMain.blade.php

diff --git a/ProcessMaker/Http/Controllers/CasesController.php b/ProcessMaker/Http/Controllers/CasesController.php
new file mode 100644
index 0000000000..d628cad18e
--- /dev/null
+++ b/ProcessMaker/Http/Controllers/CasesController.php
@@ -0,0 +1,44 @@
+<?php
+
+namespace ProcessMaker\Http\Controllers;
+
+use Facades\ProcessMaker\RollbackProcessRequest;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Route;
+use ProcessMaker\Cache\CacheRemember;
+use ProcessMaker\Events\FilesDownloaded;
+use ProcessMaker\Events\ScreenBuilderStarting;
+use ProcessMaker\Filters\SaveSession;
+use ProcessMaker\Helpers\DefaultColumns;
+use ProcessMaker\Helpers\MobileHelper;
+use ProcessMaker\Http\Controllers\Controller;
+use ProcessMaker\Managers\DataManager;
+use ProcessMaker\Managers\ScreenBuilderManager;
+use ProcessMaker\Models\Comment;
+use ProcessMaker\Models\Process;
+use ProcessMaker\Models\ProcessRequest;
+use ProcessMaker\Models\ProcessRequestToken;
+use ProcessMaker\Models\Screen;
+use ProcessMaker\Models\ScreenVersion;
+use ProcessMaker\Models\UserResourceView;
+use ProcessMaker\Package\PackageComments\PackageServiceProvider;
+use ProcessMaker\ProcessTranslations\ProcessTranslation;
+use ProcessMaker\RetryProcessRequest;
+use ProcessMaker\Traits\HasControllerAddons;
+use ProcessMaker\Traits\SearchAutocompleteTrait;
+use Spatie\MediaLibrary\MediaCollections\Models\Media;
+
+class CasesController extends Controller
+{
+        /**
+     * Get the list of requests.
+     *
+     * @return \Illuminate\View\View|\Illuminate\Contracts\View
+     */
+    public function index($type = null)
+    {
+   
+        return view('cases.casesMain');
+    }
+}
diff --git a/resources/jscomposition/base/buttons/OutlineButton.vue b/resources/jscomposition/base/buttons/OutlineButton.vue
new file mode 100644
index 0000000000..3b492172de
--- /dev/null
+++ b/resources/jscomposition/base/buttons/OutlineButton.vue
@@ -0,0 +1,32 @@
+<template>
+  <button
+    type="button"
+    :class="`tw-flex tw-rounded-lg tw-border tw-border-${color}-300 tw-text-${color}-500
+        tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    color: {
+      type: String,
+      default: () => "gray",
+    },
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    const onClick = () => {
+      emit("click");
+    };
+    return {
+      onClick,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/base/buttons/index.js b/resources/jscomposition/base/buttons/index.js
new file mode 100644
index 0000000000..4e49f4b276
--- /dev/null
+++ b/resources/jscomposition/base/buttons/index.js
@@ -0,0 +1,7 @@
+import OutlineButton from "./OutlineButton.vue";
+
+export default {}
+
+export {
+    OutlineButton
+}
\ No newline at end of file
diff --git a/resources/jscomposition/base/cards/ThreeSectionCard.vue b/resources/jscomposition/base/cards/ThreeSectionCard.vue
new file mode 100644
index 0000000000..9ff7ef6221
--- /dev/null
+++ b/resources/jscomposition/base/cards/ThreeSectionCard.vue
@@ -0,0 +1,68 @@
+<template>
+  <div
+    class="tw-flex tw-justify-between tw-items-center
+            tw-p-4 tw-transition tw-duration-150 tw-ease-out
+            hover:tw-ease-in tw-border tw-cursor-pointer tw-rounded-lg tw-text-gray-600"
+    :class="[{
+      [`tw-bg-${color}-100/50 hover:tw-bg-${color}-100`]:!active,
+      [`tw-outline tw-bg-${color}-100 tw-border-${color}-500 tw-outline-${color}-300 tw-bg-${color}-100 hover:tw-bg-${color}-200`]:active
+    }]"
+    @click="handleClick"
+  >
+    <div>
+      <slot name="header">
+        <div class="tw-text-xs">
+          {{ header }}
+        </div>
+      </slot>
+      <slot name="body">
+        <div class="tw-text-2xl">
+          {{ body }}
+        </div>
+      </slot>
+    </div>
+
+    <slot name="icon">
+      <i
+        :class="[`tw-text-${color}-500 tw-text-3xl`, icon]"
+      />
+    </slot>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    header: {
+      type: String,
+      default: () => "header",
+    },
+    body: {
+      type: String,
+      default: () => "body",
+    },
+    icon: {
+      type: String,
+      default: () => "",
+    },
+    active: {
+      type: Boolean,
+      default: () => false,
+    },
+    color: {
+      type: String,
+      default: () => "gray",
+    },
+  },
+  setup(props, { emit }) {
+    const handleClick = () => {
+      emit("click");
+    };
+    return {
+      handleClick,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/base/cards/index.js b/resources/jscomposition/base/cards/index.js
new file mode 100644
index 0000000000..ca12216c61
--- /dev/null
+++ b/resources/jscomposition/base/cards/index.js
@@ -0,0 +1,7 @@
+import ThreeSectionCard from "./ThreeSectionCard.vue"
+
+export default {}
+
+export {
+    ThreeSectionCard
+}
\ No newline at end of file
diff --git a/resources/jscomposition/base/form/Dropdown.vue b/resources/jscomposition/base/form/Dropdown.vue
new file mode 100644
index 0000000000..0d2cd15bfb
--- /dev/null
+++ b/resources/jscomposition/base/form/Dropdown.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="t-relative" >
+    <slot
+      v-bind="{
+        toogleShow,
+        data
+      }"
+      
+      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>
+
+        <i class="fas fa-chevron-down" />
+      </button>
+    </slot>
+
+    <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
+            }"
+            @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>
+            </slot>
+          </li>
+        </ul>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import {
+  defineComponent, ref, computed, onMounted, onUnmounted, nextTick,
+} from 'vue';
+
+export default defineComponent({
+  props: {
+    color: {
+      type: String,
+      default: () => 'blue',
+    },
+    animation: {
+      type: String,
+      default: () => 'fade',
+    },
+    // Example input options {"label":"Label 1" , "value": "1"}
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    modelValue: {
+      type: Object,
+      default: () => null,
+    },
+  },
+  emits: ['update:modelValue', 'change'],
+  setup(props, { emit }) {
+    const show = ref(false);
+    const count = ref(0);
+
+    const data = computed({
+      get() {
+        return props.modelValue;
+      },
+      set(value) {
+        emit('update:modelValue', value);
+      },
+    });
+
+    const optionsModel = computed({
+      get() {
+        return props.options;
+      },
+      set(val) {
+        emit('update:options', val);
+      },
+    });
+
+    const onClick = (option, index) => {
+      show.value = false;
+      data.value = option;
+
+
+      emit('change', option);
+    };
+
+    const addBodyListener = () => {
+      show.value = false;
+    };
+
+    const toogleShow = () => {
+      show.value = !show.value;
+    };
+
+    onMounted(() => {
+      document.body.addEventListener('click', addBodyListener);
+    });
+
+    onUnmounted(() => {
+      document.body.removeEventListener('click', addBodyListener);
+    });
+
+    return {
+      show,
+      data,
+      optionsModel,
+      count,
+      onClick,
+      toogleShow,
+    };
+  },
+});
+</script>
+
+<style scoped>
+/* Animations */
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .1s;
+}
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+/* Slide-in-up animation*/
+.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 {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+/* Slide-in-right animation*/
+.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 {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+/* Slide-in-left animation*/
+.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 {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+
+/* Scale animation*/
+.scale-enter-active, .scale-leave-active {
+  transition: all .5s;
+  transform: scale(1);
+}
+.scale-enter, .scale-leave-to {
+  opacity: 0;
+  transform: scale(0);
+}
+
+/* Rotate animation*/
+.rotate-enter-active, .rotate-leave-active {
+  transition: all .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/form/InputLeading.vue b/resources/jscomposition/base/form/InputLeading.vue
new file mode 100644
index 0000000000..0fc68eb6a5
--- /dev/null
+++ b/resources/jscomposition/base/form/InputLeading.vue
@@ -0,0 +1,34 @@
+<template>
+    <div class="tw-relative tw-rounded-lg tw-shadow-sm tw-text-gray-500">
+        <div class="tw-pointer-events-none tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-items-center tw-pl-3">
+            <slot name="icon">
+                <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 
+                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
+                 sm:tw-text-sm sm:tw-leading-6" :placeholder="placeholder">
+    </div>
+</template>
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    props: {
+        placeholder: {
+            type: String,
+            default: () => ""
+        },
+        icon: {
+            type: String,
+            default: () => ("fa-solid fa-magnifying-glass")
+        }
+    },
+    setup(props, {emit}) {
+        return {};
+    }
+});
+</script>
\ No newline at end of file
diff --git a/resources/jscomposition/base/form/index.js b/resources/jscomposition/base/form/index.js
new file mode 100644
index 0000000000..8eec1e2f5b
--- /dev/null
+++ b/resources/jscomposition/base/form/index.js
@@ -0,0 +1,9 @@
+import Dropdown from "./Dropdown.vue";
+import InputLeading from "./InputLeading.vue";
+
+export default {}
+
+export {
+    Dropdown,
+    InputLeading
+}
\ No newline at end of file
diff --git a/resources/jscomposition/base/index.js b/resources/jscomposition/base/index.js
new file mode 100644
index 0000000000..ddbe2a67b6
--- /dev/null
+++ b/resources/jscomposition/base/index.js
@@ -0,0 +1,7 @@
+export * from "./buttons/index"
+export * from "./cards/index"
+export * from "./form/index"
+export * from "./table/index"
+export * from "./ui/index"
+
+export default {}
diff --git a/resources/jscomposition/base/table/BaseTable.vue b/resources/jscomposition/base/table/BaseTable.vue
new file mode 100644
index 0000000000..fe2a6bfb7f
--- /dev/null
+++ b/resources/jscomposition/base/table/BaseTable.vue
@@ -0,0 +1,72 @@
+<template>
+    <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">      
+                <tr>
+                    <THeader 
+                        v-for="(column, index) in columns" :key="index"
+                        :columns="columns" :column="column">
+                        <slot :name="`theader-${column.field}`">                            
+                        </slot>
+                    </THeader>
+                </tr>
+            </thead>
+            <tbody>
+                <TRow v-for="(row, indexRow) in data" :key="indexRow">
+                    <TCell v-for="(column, indexColumn) in columns" :key="indexColumn"
+                            :columns="columns" :column="column" :row="row">
+                        <slot :name="`tcell-${indexRow}-${column.field}`">                            
+                        </slot>
+                    </TCell>
+                </TRow>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+import { defineComponent, ref} from 'vue';
+import THeader from './THeader.vue';
+import TRow from './TRow.vue';
+import TCell from './TCell.vue';
+
+function generateUniqueId(length = 8) {
+  const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  let uniqueId = '';
+  for (let i = 0; i < length; i++) {
+    const randomIndex = Math.floor(Math.random() * charset.length);
+    uniqueId += charset[randomIndex];
+  }
+  return uniqueId;
+}
+
+const columnBase = {
+    width: 200
+}
+
+
+export default defineComponent({
+    components: {
+        THeader,
+        TRow,
+        TCell
+    },
+    props:{
+        columns:{
+            type: Array,
+            default: () => [] 
+        },
+        data: {
+            type: Array,
+            default: () => []
+        },
+        config:{
+            type: Object,
+            default: () => ({})
+        },
+ }, 
+ setup(props, {emit}){     
+    return {}
+ }
+});
+</script>
\ No newline at end of file
diff --git a/resources/jscomposition/base/table/Pagination.vue b/resources/jscomposition/base/table/Pagination.vue
new file mode 100644
index 0000000000..9e2d350dba
--- /dev/null
+++ b/resources/jscomposition/base/table/Pagination.vue
@@ -0,0 +1,128 @@
+<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">
+
+        <div>
+            <svg class="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd"
+                    d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+                    clip-rule="evenodd" />
+            </svg>
+        </div>
+
+        <div>
+            <svg class="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd"
+                    d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+                    clip-rule="evenodd" />
+            </svg>
+        </div>
+
+        <div>
+            <div
+                class="tw-flex tw-border-1 tw-rounded-md
+                tw-ring-1 tw-ring-inset tw-ring-gray-300">
+                <input class="tw-block tw-flex-1 tw-border-0 
+                    tw-bg-transparent tw-pl-1 
+                    focus-visible:tw-outline-none
+                    placeholder:tw-text-gray-400" placeholder="1">
+          
+            </div>
+        </div>
+
+        <div>
+            <svg class="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd"
+                    d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+                    clip-rule="evenodd" />
+            </svg>
+        </div>
+
+        <div>
+            <svg class="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd"
+                    d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+                    clip-rule="evenodd" />
+            </svg>
+        </div>
+
+
+        <!-- <div>
+            <nav class="tw-isolate tw-inline-flex -tw-space-x-px tw-rounded-md tw-shadow-sm" aria-label="Pagination">
+                <a href="#" class="tw-relative tw-inline-flex tw-items-center tw-rounded-l-md tw-px-2 tw-py-2
+                            tw-text-gray-400 tw-ring-1 tw-ring-inset tw-ring-gray-300 hover:tw-bg-gray-50
+                            focus:tw-z-20 focus:tw-outline-offset-0">
+                    <span class="sr-only">Previous</span>
+                    <svg class="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd"
+                            d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+                            clip-rule="evenodd" />
+                    </svg>
+                </a>
+                 <a href="#" aria-current="page"
+                    class="tw-relative tw-z-10 tw-inline-flex
+                            tw-items-center bg-indigo-600 tw-px-4 tw-py-2
+                            tw-text-sm tw-font-semibold
+                            tw-text-white focus:tw-z-20 focus-visible:outline
+                            focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">1</a>
+                <a href="#" class="tw-relative tw-inline-flex
+                            tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-font-semibold
+                            text-gray-900 tw-ring-1 tw-ring-inset tw-ring-gray-300 hover:tw-bg-gray-50
+                            focus:tw-z-20 focus:tw-outline-offset-0">2</a>
+                <a href="#" class="tw-relative tw-hidden tw-items-center tw-px-4 tw-py-2
+                            tw-text-sm tw-font-semibold text-gray-900 tw-ring-1
+                            tw-ring-inset tw-ring-gray-300 hover:tw-bg-gray-50
+                            focus:tw-z-20 focus:tw-outline-offset-0 md:tw-inline-flex">3</a>
+                <span class="tw-relative tw-inline-flex tw-items-center tw-px-4 tw-py-2
+                        tw-text-sm tw-font-semibold tw-text-gray-700 tw-ring-1 
+                        w-ring-inset tw-ring-gray-300 focus:tw-outline-offset-0">...</span>
+                <a href="#" class="tw-relative tw-hidden tw-items-center tw-px-4 tw-py-2
+                            tw-text-sm tw-font-semibold text-gray-900 tw-ring-1
+                            tw-ring-inset tw-ring-gray-300 hover:tw-bg-gray-50
+                            focus:tw-z-20 focus:tw-outline-offset-0 md:tw-inline-flex">8</a>
+                <a href="#" class="tw-relative tw-inline-flex tw-items-center
+                            tw-px-4 tw-py-2 tw-text-sm tw-font-semibold text-gray-900
+                            tw-ring-1 tw-ring-inset tw-ring-gray-300 hover:tw-bg-gray-50
+                            focus:tw-z-20 focus:tw-outline-offset-0">9</a>
+                <a href="#" class="tw-relative tw-inline-flex tw-items-center
+                            tw-px-4 tw-py-2 tw-text-sm tw-font-semibold text-gray-900
+                            tw-ring-1 tw-ring-inset tw-ring-gray-300 hover:tw-bg-gray-50 focus:tw-z-20
+                            focus:tw-outline-offset-0">10</a>
+                <a href="#" class="tw-relative tw-inline-flex tw-items-center
+                        tw-rounded-r-md tw-px-2 tw-py-2 tw-text-gray-400 tw-ring-1 tw-ring-inset
+                        tw-ring-gray-300 hover:tw-bg-gray-50 focus:tw-z-20
+                         focus:tw-outline-offset-0">
+                    <span class="sr-only">Next</span>
+                    <svg class="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd"
+                            d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+                            clip-rule="evenodd" />
+                    </svg>
+                </a>
+            </nav>
+        </div> -->
+
+        <div>
+            <span> 153 items </span>
+        </div>
+
+        <div>
+            <span> 15 per page</span>
+        </div>
+
+
+    </div>
+</template>
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    setup() {
+        return {};
+    }
+});
+</script>
+<style lang="">
+
+</style>
\ No newline at end of file
diff --git a/resources/jscomposition/base/table/TCell.vue b/resources/jscomposition/base/table/TCell.vue
new file mode 100644
index 0000000000..ebbcca8edf
--- /dev/null
+++ b/resources/jscomposition/base/table/TCell.vue
@@ -0,0 +1,43 @@
+<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>
+</template>
+
+<script>
+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
+      }
+   }
+});
+</script>
\ No newline at end of file
diff --git a/resources/jscomposition/base/table/TFooter.vue b/resources/jscomposition/base/table/TFooter.vue
new file mode 100644
index 0000000000..6c5177e3ea
--- /dev/null
+++ b/resources/jscomposition/base/table/TFooter.vue
@@ -0,0 +1,16 @@
+<template>
+  
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+export default defineComponent({
+ setup(){
+    return {}
+ }
+});
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/resources/jscomposition/base/table/THeader.vue b/resources/jscomposition/base/table/THeader.vue
new file mode 100644
index 0000000000..e1faf00fb3
--- /dev/null
+++ b/resources/jscomposition/base/table/THeader.vue
@@ -0,0 +1,55 @@
+<template>
+   <th>
+      <div class="tw-flex tw-justify-between">
+         <div
+            class="tw-w-full tw-relative tw-py-4 tw-px-3 tw-text-left tw-overflow-hidden tw-whitespace-nowrap tw-text-ellipsis"
+            :style="{ width: width + 'px' }">
+            <slot>
+               {{ getValue() }}
+            </slot>
+         </div>
+         <div :class="{ '!tw-cursor-col-resize': column.resizable }"
+            class="tw-w-[10px] tw-cursor-default tw-border-r tw-border-gray-400"
+            @mousedown="column.resizable ? columnResize.startResize($event) : null">&nbsp;</div>
+      </div>
+   </th>
+</template>
+
+<script>
+import { defineComponent, computed } from 'vue';
+import { columnResizeComposable } from "./composables/columnComposable"
+import { isFunction } from 'lodash';
+
+export default defineComponent({
+   props: {
+      columns: {
+         type: Array,
+         default: () => []
+      },
+      column: {
+         type: Object,
+         default: () => { }
+      }
+   },
+   setup(props, { emit }) {
+      const columnResize = columnResizeComposable(props.column);
+
+      const width = computed(() => {
+         return props.column.width || 200;
+      })
+
+      const getValue = () => {
+         if (isFunction(props.column?.headerFormatter)) {
+            return props.column?.headerFormatter(props.columns);
+         }
+
+         return props.column.headerName || props.column.field || "";
+      }
+      return {
+         getValue,
+         width,
+         columnResize
+      }
+   }
+});
+</script>
\ No newline at end of file
diff --git a/resources/jscomposition/base/table/TRow.vue b/resources/jscomposition/base/table/TRow.vue
new file mode 100644
index 0000000000..1d700ef645
--- /dev/null
+++ b/resources/jscomposition/base/table/TRow.vue
@@ -0,0 +1,14 @@
+<template>
+  <tr class="tw-border-b">
+   <slot></slot>
+  </tr>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+export default defineComponent({
+ setup(){
+    return {}
+ }
+});
+</script>
\ No newline at end of file
diff --git a/resources/jscomposition/base/table/composables/columnComposable.js b/resources/jscomposition/base/table/composables/columnComposable.js
new file mode 100644
index 0000000000..cae2353f02
--- /dev/null
+++ b/resources/jscomposition/base/table/composables/columnComposable.js
@@ -0,0 +1,55 @@
+import {
+  ref, onUnmounted
+} from "vue";
+
+export default {};
+/**
+ * This composable only works with columns in AppTable
+ * @param {*} column is a ref variable, come from App Table
+ * @param {*} tableName
+ * @returns
+ */
+export const columnResizeComposable = (column) => {
+  const startX = ref(0);
+  const startWidth = ref(0);
+  const isResizing = ref(false);
+
+  //Resize the column value
+  const doResize = (event) => {
+   
+    if (isResizing.value) {
+      const diff = event.pageX - startX.value;
+      const min = 63;
+      const currentWidth = Math.max(min, startWidth.value + diff);
+   
+      column.width = currentWidth;
+    }
+  };
+
+  const stopResize = () => {
+    if (isResizing.value) {
+      document.removeEventListener("mousemove", doResize);
+      document.removeEventListener("mouseup", stopResize);
+      isResizing.value = false;
+    }
+  };
+
+  // Init the events in mousemove and finish in mouseup event
+  const startResize = (event, index) => {
+    isResizing.value = true;
+    startX.value = event.pageX;
+    startWidth.value =column.width || 200;
+   
+    document.addEventListener("mousemove", doResize);
+    document.addEventListener("mouseup", stopResize);
+  };
+
+  onUnmounted(() => {
+    document.removeEventListener("mousemove", doResize);
+    document.removeEventListener("mouseup", stopResize);
+  });
+
+  return {
+    startResize,
+  };
+};
diff --git a/resources/jscomposition/base/table/index.js b/resources/jscomposition/base/table/index.js
new file mode 100644
index 0000000000..927748b7d0
--- /dev/null
+++ b/resources/jscomposition/base/table/index.js
@@ -0,0 +1,15 @@
+import BaseTable from "./BaseTable.vue";
+import Pagination from "./Pagination.vue";
+import TCell from "./TCell.vue";
+import THeader from "./THeader.vue";
+import TRow from "./TRow.vue";
+
+export default {}
+
+export {
+    BaseTable,
+    Pagination,
+    TCell,
+    THeader,
+    TRow
+}
\ No newline at end of file
diff --git a/resources/jscomposition/base/ui/Badge.vue b/resources/jscomposition/base/ui/Badge.vue
new file mode 100644
index 0000000000..488d6be08a
--- /dev/null
+++ b/resources/jscomposition/base/ui/Badge.vue
@@ -0,0 +1,22 @@
+<template>
+    <span :class="`tw-inline-flex tw-items-center
+        tw-text-sm tw-border-1 tw-rounded-lg tw-border tw-border-${color}-300
+        tw-bg-${color}-50 tw-px-2 tw-py-1 tw-text-${color}-500`">
+        <slot></slot>
+    </span>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+export default defineComponent({
+    props:{
+        color:{
+            type:String,    
+            default: ()=> 'gray'
+        }
+    },
+    setup(){
+        return{};
+    }
+})
+</script>
\ No newline at end of file
diff --git a/resources/jscomposition/base/ui/index.js b/resources/jscomposition/base/ui/index.js
new file mode 100644
index 0000000000..d62371ab35
--- /dev/null
+++ b/resources/jscomposition/base/ui/index.js
@@ -0,0 +1,7 @@
+import Badge from "./Badge.vue"
+
+export default {}
+
+export {
+    Badge
+}
\ No newline at end of file
diff --git a/resources/jscomposition/cases/casesMain/App.vue b/resources/jscomposition/cases/casesMain/App.vue
new file mode 100644
index 0000000000..e5b412c4ed
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/App.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="tw-p-4">
+    <RouterView></RouterView>
+  </div>
+</template>
+<script>
+import { ref, defineComponent } from "vue";
+import { RouterView } from "vue-router";
+
+export default defineComponent({
+  components: {
+    RouterView
+  },
+  setup() {
+    return {}
+  }
+});
+</script>
diff --git a/resources/jscomposition/cases/casesMain/CasesDataSection.vue b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
new file mode 100644
index 0000000000..ab6bc00201
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
@@ -0,0 +1,54 @@
+<template>
+    <div class="tw-w-full tw-space-y-4">
+        <CaseFilter />
+
+        <BadgesSection v-model="badgesData" />
+
+        <BaseTable :columns="columnsConfig" :data="data"/>
+
+        <Pagination />
+    </div>
+</template>
+<script>
+import { defineComponent, ref, onMounted } from 'vue';
+import CaseFilter from './components/CaseFilter.vue';
+import BadgesSection from './components/BadgesSection.vue';
+import { BaseTable, Pagination } from '../../base';
+import { getColumns } from './config/columns'
+import { Breadcrums } from '../../system';
+import { badges } from './config/badges';
+import { getData } from './api';
+
+export default defineComponent({
+    props: {
+        listId: {
+            type: String,
+            default: () => 'myCases'
+        }
+    },
+    components: {
+        CaseFilter,
+        BadgesSection,
+        BaseTable,
+        Pagination,
+        Breadcrums
+    },
+    setup(props, { emit }) {
+        const badgesData = ref(badges);
+        const columnsConfig = ref()
+        const data = ref();
+
+        onMounted(async () => {
+            data.value = await getData();
+
+            columnsConfig.value = getColumns(props.listId);
+        });
+
+        return {
+            columnsConfig,
+            data,
+            badgesData,
+        };
+    }
+});
+</script>
\ No newline at end of file
diff --git a/resources/jscomposition/cases/casesMain/CasesMain.vue b/resources/jscomposition/cases/casesMain/CasesMain.vue
new file mode 100644
index 0000000000..dd294634be
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/CasesMain.vue
@@ -0,0 +1,49 @@
+<template>
+    <div class="tw-w-full tw-space-y-4">
+        <Breadcrums />
+
+        <AppCounters class="tw-w-full" v-model="countersData" @change="onChangeCounter" />
+
+        <RouterView :key="route.fullPath" />
+    </div>
+</template>
+<script>
+import { defineComponent, ref, onMounted } from 'vue';
+import AppCounters from './components/AppCounters.vue';
+import { formatCounters } from './utils/counters';
+import { getCounters } from './api';
+import { Breadcrums } from '../../system';
+import { useRouter, useRoute } from 'vue-router/composables';
+
+
+export default defineComponent({
+    components: {
+        AppCounters,
+        Breadcrums
+    },
+    setup() {
+        const countersData = ref([])
+        const router = useRouter();
+        const route = useRoute();
+
+        const onChangeCounter = (counter) => {
+            if (typeof counter.url == "function") {
+                return counter.url();
+            }
+
+            router.push({ path: counter.url }).catch((e) => { })
+        }
+
+        onMounted(async () => {
+            const resCounters = await getCounters();
+            countersData.value = formatCounters(resCounters);
+        })
+
+        return {
+            countersData,
+            route,
+            onChangeCounter
+        };
+    }
+});
+</script>
\ No newline at end of file
diff --git a/resources/jscomposition/cases/casesMain/api/index.js b/resources/jscomposition/cases/casesMain/api/index.js
new file mode 100644
index 0000000000..ca51c56e1b
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/api/index.js
@@ -0,0 +1,35 @@
+export default {}
+
+// Method to get counters - change with processmaker API
+export const getCounters = async () => {
+  const url = "http://localhost:3000/appcounters";
+    return {
+      myCases: 36,
+      inProgress: 20,
+      completed: 125,
+      allCases: 145,
+      allRequests: 777
+    }
+};
+
+// Method to get data case list - change with processmaker API
+export const getData = async () => {
+  let objects_list = []
+
+  for (let i = 0; i <= 31; i++) {
+    const obj = {
+      "caseNumber": `${i}`,
+      "caseTitle": `Case Title ${i}`,
+      "process": `Process ${i}`,
+      "task": `Task ${i}`,
+      "participants": `Avatar ${i}`,
+      "status": `badge ${i}`,
+      "started": `21/21/${i}`,
+      "completed": `22/22/${i}`
+    };
+
+    objects_list.push(obj);
+  }
+
+  return objects_list;
+};
\ No newline at end of file
diff --git a/resources/jscomposition/cases/casesMain/components/AppCounters.vue b/resources/jscomposition/cases/casesMain/components/AppCounters.vue
new file mode 100644
index 0000000000..6c4bb421de
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/components/AppCounters.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="tw-w-auto tw-flex tw-flex-col sm:tw-flex-row
+    tw-space-y-2 sm:tw-space-y-0  
+    sm:tw-space-x-4 sm:tw-py-0" >
+
+    <ThreeSectionCard
+      v-for="(counter, index) in data"
+      :key="index"
+      :header="counter.header"
+      :body="counter.body"
+      :active="counter.active"
+      class="tw-w-full"
+      :color="counter.color"
+      :icon="counter.icon"
+      @click="onClick(counter, index)"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref,computed,  onMounted } from "vue";
+import { ThreeSectionCard } from "../../../base/index";
+
+export default defineComponent({
+  components: { ThreeSectionCard },
+  props: {
+    value: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  emits:['input', 'change', 'update:value'],
+  setup(props, { emit }) {
+    const data = computed({
+      get() {
+        return props.value;
+      },
+      set(dt) {
+        emit('input', dt);
+      },
+    });
+
+    const onClick = (counter, idxCounter) => {
+      const dt = data.value.map((x, index) => {
+        x.active = false;
+      
+        if(index == idxCounter){
+          x.active = true;
+        }
+        return x;
+      });
+      
+      data.value = dt
+
+      emit('change', counter, idxCounter);
+    };
+
+    onMounted(() => {
+    });
+
+    return {
+      data,
+      onClick,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesMain/components/AvatarContainer.vue b/resources/jscomposition/cases/casesMain/components/AvatarContainer.vue
new file mode 100644
index 0000000000..7bac3776a2
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/components/AvatarContainer.vue
@@ -0,0 +1,17 @@
+<template>
+    <div class="tw-isolate tw-flex -tw-space-x-1 tw-overflow-hidden tw-justify-center">
+    <img class="tw-relative tw-z-30 tw-inline-block tw-h-8 tw-w-8 tw-rounded-full tw-ring-2 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="" />
+    <img class="tw-relative tw-z-20 tw-inline-block tw-h-8 tw-w-8 tw-rounded-full tw-ring-2 tw-ring-white" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
+    <img class="tw-relative tw-z-10 tw-inline-block tw-h-8 tw-w-8 tw-rounded-full tw-ring-2 tw-ring-white" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80" alt="" />
+    <img class="tw-relative tw-z-0 tw-inline-block tw-h-8 tw-w-8 tw-rounded-full tw-ring-2 tw-ring-white" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
+  </div>
+</template>
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    setup(){
+        return {};
+    }
+})
+</script>
\ No newline at end of file
diff --git a/resources/jscomposition/cases/casesMain/components/BadgeContainer.vue b/resources/jscomposition/cases/casesMain/components/BadgeContainer.vue
new file mode 100644
index 0000000000..e2c2a493cb
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/components/BadgeContainer.vue
@@ -0,0 +1,23 @@
+<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>
\ No newline at end of file
diff --git a/resources/jscomposition/cases/casesMain/components/BadgesSection.vue b/resources/jscomposition/cases/casesMain/components/BadgesSection.vue
new file mode 100644
index 0000000000..1e50276c65
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/components/BadgesSection.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="tw-flex tw-space-x-1">
+        <Badge
+            class="tw-text-xs"
+            color="gray"
+            v-for="(item, index) in data" :key="index">
+            {{ item.label }}
+        </Badge>
+    </div>
+</template>
+<script>
+import { Badge } from '../../../base/ui/index';
+import { defineComponent, computed } from 'vue';
+
+export default defineComponent({
+    props: {
+        value: {
+            type: Array,
+            default: () => []
+        }
+    },
+    components: {
+        Badge
+    },
+    setup(props, { emit }) {
+        const data = computed(() => {
+            return props.value
+        })
+
+        return {
+            data
+        };
+    }
+});
+</script>
\ No newline at end of file
diff --git a/resources/jscomposition/cases/casesMain/components/CaseFilter.vue b/resources/jscomposition/cases/casesMain/components/CaseFilter.vue
new file mode 100644
index 0000000000..38c94e66e9
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/components/CaseFilter.vue
@@ -0,0 +1,22 @@
+<template>
+    <div class="tw-flex tw-space-x-2">
+        <div class="tw-w-full">
+            <InputLeading placeholder="Search here"></InputLeading>
+        </div>
+    </div>
+</template>
+<script>
+import { OutlineButton } from '../../../base/buttons/index';
+import { InputLeading } from '../../../base/form/index';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    components: {
+        OutlineButton,
+        InputLeading
+    },
+    setup() {
+        return {};
+    }
+})
+</script>
\ No newline at end of file
diff --git a/resources/jscomposition/cases/casesMain/config/badges.js b/resources/jscomposition/cases/casesMain/config/badges.js
new file mode 100644
index 0000000000..b36f828a65
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/config/badges.js
@@ -0,0 +1,16 @@
+export default {};
+
+export const badges = [
+    {
+        label: "Status : In progress"
+    },
+    {
+        label: "Status : To do"
+    },
+    {
+        label: "Status : New Badge"
+    },
+    {
+        label: "Status : Badge Example"
+    }
+];
diff --git a/resources/jscomposition/cases/casesMain/config/columns.js b/resources/jscomposition/cases/casesMain/config/columns.js
new file mode 100644
index 0000000000..4f6722f327
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/config/columns.js
@@ -0,0 +1,132 @@
+import BadgeContainer from "../components/BadgeContainer.vue";
+import AvatarContainer from "../components/AvatarContainer.vue";
+
+export default {}
+/**
+ * Example Column
+ * field: String
+ * headerName: String
+ * headerFormatter: callback
+ * resizable: Boolean
+ * visible: Callback
+ * formatter: Callback - Build the value in the cell
+ * width: Number
+ * cellRenderer: Object Vue to custom the cell
+ */
+
+// My cases: [Case#, Case Title, Process, Task, Participants, Status, Started, Completed]
+// In Progress : [ Case#, Case Title, Process, Task, Participants, Status, Started]
+// Completed : [Case#, Case Title, Process, Task, Participants, Status, Started, Completed]
+// AllCases : [Case#, Case Title, Process, Task, Participants, Status, Started, Completed]
+// AllRequest : [Case#, Case Title, Process, Task, Participants, Status, Started, Completed]
+
+
+export const caseNumberColumn = ()=>({
+  field: "caseNumber",
+  headerName: "Case #",
+  resizable: true,
+  width: 200,
+})
+
+export const caseTitleColumn = ()=>({
+  field: "caseTitle",
+  headerName: "Case Title",
+  resizable: true,
+  width: 200,
+})
+
+export const processColumn = ()=>({
+  field: "process",
+  headerName: "Process",
+  resizable: true,
+  width: 200
+})
+
+export const taskColumn = ()=>({
+  field: "task",
+  headerName: "Task",
+  resizable: true,
+  width: 200
+})
+
+
+export const participantsColumn = ()=>({
+  field: "participants",
+  headerName: "Participants",
+  resizable: true,
+  width: 200,
+  cellRenderer: () => {
+    return AvatarContainer;
+  }
+})
+
+export const statusColumn = ()=>({
+  field: "status",
+  headerName: "Status",
+  resizable: true,
+  width: 200,
+  cellRenderer: () => {
+    return BadgeContainer;
+  }
+})
+
+export const startedColumn = ()=>({
+  field: "started",
+  headerName: "Started",
+  resizable: true,
+  width: 200
+})
+
+export const completedColumn = ()=>({
+  field: "completed",
+  headerName: "Completed",
+  resizable: true,
+  width: 200
+})
+
+export const getColumns = (type) => {
+  const columnsDefinition = {
+    'my-cases': [
+      caseNumberColumn(),
+      caseTitleColumn(),
+      processColumn(),
+      taskColumn(),
+      participantsColumn(),
+      statusColumn(),
+      startedColumn(),
+      completedColumn()
+    ],
+    'in-progress': [
+      caseNumberColumn(),
+      caseTitleColumn(),
+      processColumn(),
+      taskColumn(),
+      participantsColumn(),
+      statusColumn(),
+      startedColumn()
+    ],
+    'completed': [
+      caseNumberColumn(),
+      caseTitleColumn(),
+      processColumn(),
+      taskColumn(),
+      participantsColumn(),
+      statusColumn(),
+      startedColumn(),
+      completedColumn()
+    ],
+    'all-cases': [
+      caseNumberColumn(),
+      caseTitleColumn(),
+      processColumn(),
+      taskColumn(),
+      participantsColumn(),
+      statusColumn(),
+      startedColumn(),
+      completedColumn()
+    ]
+  }
+
+  return columnsDefinition[type] || columnsDefinition.myCases;
+}
+
diff --git a/resources/jscomposition/cases/casesMain/config/index.js b/resources/jscomposition/cases/casesMain/config/index.js
new file mode 100644
index 0000000000..5bc60f9ebc
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/config/index.js
@@ -0,0 +1,2 @@
+export * from './columns'
+export * from './badges'
diff --git a/resources/jscomposition/cases/casesMain/main.js b/resources/jscomposition/cases/casesMain/main.js
new file mode 100644
index 0000000000..8b4676c85a
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/main.js
@@ -0,0 +1,20 @@
+
+import App from './App.vue'
+import { routes } from './routes';
+
+Vue.use(VueRouter);
+
+const router = new VueRouter({
+  mode: "history",
+  base: "/",
+  routes
+});
+
+new Vue({
+    el: "#cases-main",
+    router,
+    components:{
+        App
+    },
+    render: (h) => h(App),
+})
diff --git a/resources/jscomposition/cases/casesMain/routes.js b/resources/jscomposition/cases/casesMain/routes.js
new file mode 100644
index 0000000000..2a8c3f028b
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/routes.js
@@ -0,0 +1,28 @@
+import CasesMain from "./CasesMain.vue"
+import CasesDataSection from "./CasesDataSection.vue"
+
+export default {}
+
+export const routes = [
+    {
+        name: "cases",
+        path: "/cases-main",
+        component: CasesMain,
+        props(route) {
+            return {};
+        },
+        children:[
+            {
+                name: "cases-request",
+                path: ":id?",
+                component: CasesDataSection,
+                props(route) {
+                    return {
+                        listId: route.params?.id || 'my-cases',
+                    };
+                }
+            }
+        ]
+    
+    }
+]
\ No newline at end of file
diff --git a/resources/jscomposition/cases/casesMain/utils/counters.js b/resources/jscomposition/cases/casesMain/utils/counters.js
new file mode 100644
index 0000000000..63c26b053c
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/utils/counters.js
@@ -0,0 +1,45 @@
+export default {}
+
+export const formatCounters = (data)=>{
+    const counters = [
+        {
+            header: "My cases",
+            body:data.myCases.toString(),
+            color:"amber",
+            icon:"fa-regular fa-user",
+            url:'/cases-main/my-cases'
+        },
+        {
+            header: "In progress",
+            body:data.inProgress.toString(),
+            color:"green",
+            icon:"fa-solid fa-list",
+            url:'/cases-main/in-progress'
+        },
+        {
+            header: "Completed",
+            body:data.completed.toString(),
+            color:"blue",
+            icon:"fa-regular fa-circle-check",
+            url:'/cases-main/completed'
+        },
+        {
+            header: "All cases",
+            body:data.allCases.toString(),
+            color:"purple",
+            icon:"fa-regular fa-clipboard",
+            url:'/cases-main/all-cases'
+        },
+        {
+            header: "All requests",
+            body:data.allRequests.toString(),
+            color:"gray",
+            icon:"fa-solid fa-play",
+            url:()=>{
+                window.location.href = "/cases"
+            }
+        }
+    ]
+    
+    return counters
+}
diff --git a/resources/jscomposition/cases/casesMain/utils/index.js b/resources/jscomposition/cases/casesMain/utils/index.js
new file mode 100644
index 0000000000..069f2719f6
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/utils/index.js
@@ -0,0 +1 @@
+export * from './counters'
\ No newline at end of file
diff --git a/resources/jscomposition/system/Breadcrums.vue b/resources/jscomposition/system/Breadcrums.vue
new file mode 100644
index 0000000000..0c41c4d43a
--- /dev/null
+++ b/resources/jscomposition/system/Breadcrums.vue
@@ -0,0 +1,38 @@
+<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>
\ No newline at end of file
diff --git a/resources/jscomposition/system/index.js b/resources/jscomposition/system/index.js
new file mode 100644
index 0000000000..87a413c41b
--- /dev/null
+++ b/resources/jscomposition/system/index.js
@@ -0,0 +1,7 @@
+import Breadcrums from "./Breadcrums.vue";
+
+export default {}
+
+export {
+    Breadcrums
+}
\ No newline at end of file
diff --git a/resources/views/cases/casesMain.blade.php b/resources/views/cases/casesMain.blade.php
new file mode 100644
index 0000000000..9cc846d4de
--- /dev/null
+++ b/resources/views/cases/casesMain.blade.php
@@ -0,0 +1,24 @@
+@extends('layouts.layout')
+
+<link href="{{ mix('css/tailwind.css') }}" rel="stylesheet">
+
+@section('title')
+@endsection
+
+@section('sidebar')
+@include('layouts.sidebar', ['sidebar'=> Menu::get('sidebar_request')])
+@endsection
+
+@section('breadcrumbs')
+@endsection
+
+@section('content')
+<div id="cases-main"></div>
+@endsection
+
+@section('js')
+<script src="{{mix('js/composition/cases/casesMain/main.js')}}"></script>
+@endsection
+
+@section('css')
+@endsection
diff --git a/routes/web.php b/routes/web.php
index c3848838a7..2fa719a5f2 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -32,6 +32,7 @@
 use ProcessMaker\Http\Controllers\ProcessesCatalogueController;
 use ProcessMaker\Http\Controllers\ProfileController;
 use ProcessMaker\Http\Controllers\RequestController;
+use ProcessMaker\Http\Controllers\CasesController;
 use ProcessMaker\Http\Controllers\Saml\MetadataController;
 use ProcessMaker\Http\Controllers\TaskController;
 use ProcessMaker\Http\Controllers\TemplateController;
@@ -136,6 +137,11 @@
     Route::post('/keep-alive', [LoginController::class, 'keepAlive'])->name('keep-alive');
     // Cases
     Route::get('cases', [RequestController::class, 'index'])->name('cases.index')->middleware('no-cache');
+    Route::get('cases-main', [CasesController::class, 'index'])->name('cases-main.index')->middleware('no-cache');
+
+
+
+
     Route::get('cases/{type?}', [RequestController::class, 'index'])->name('cases_by_type')
         ->where('type', 'all|in_progress|completed')
         ->middleware('no-cache');
diff --git a/webpack.mix.js b/webpack.mix.js
index 34d8ca2839..d525298ac9 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -121,6 +121,10 @@ mix
   .js("resources/js/requests/mobile.js", "public/js/requests/mobile.js")
   .js("resources/js/requests/show.js", "public/js/requests")
   .js("resources/js/requests/preview.js", "public/js/requests")
+  
+  
+  .js("resources/jscomposition/cases/casesMain/main.js", "public/js/composition/cases/casesMain/main.js")
+  
 
   .js("resources/js/processes/translations/import.js", "public/js/processes/translations")
 

From 2f43d89016764038bdbec6f0ed754b8dab3ac344 Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Thu, 12 Sep 2024 13:02:34 -0400
Subject: [PATCH 2/4] FOUR-19004: Create a NEW VIEW for cases Part Counters

---
 .../Http/Controllers/CasesController.php      |   4 +-
 resources/jscomposition/base/buttons/index.js |   2 -
 resources/jscomposition/base/cards/index.js   |   2 -
 .../jscomposition/base/form/Dropdown.vue      |   2 +-
 .../jscomposition/base/form/InputLeading.vue  |   9 +-
 .../jscomposition/base/table/BaseTable.vue    | 113 +++++------
 .../jscomposition/base/table/Pagination.vue   | 181 +++++++-----------
 resources/jscomposition/base/table/TCell.vue  |  71 +++----
 .../jscomposition/base/table/THeader.vue      |  92 ++++-----
 resources/jscomposition/base/table/TRow.vue   |  13 +-
 .../table/composables/columnComposable.js     |  11 +-
 resources/jscomposition/base/table/index.js   |  10 +-
 resources/jscomposition/base/ui/Badge.vue     |  30 +--
 resources/jscomposition/base/ui/index.js      |   8 +-
 .../jscomposition/cases/casesMain/App.vue     |   8 +-
 .../cases/casesMain/CasesDataSection.vue      |  82 ++++----
 .../cases/casesMain/CasesMain.vue             |  84 ++++----
 .../cases/casesMain/api/index.js              |  36 ++--
 .../casesMain/components/AppCounters.vue      |  28 ++-
 .../casesMain/components/AvatarContainer.vue  |  35 ++--
 .../casesMain/components/BadgeContainer.vue   |  31 ++-
 .../casesMain/components/BadgesSection.vue    |  55 +++---
 .../cases/casesMain/components/CaseFilter.vue |  32 ++--
 .../cases/casesMain/config/badges.js          |  24 +--
 .../cases/casesMain/config/columns.js         |  71 ++++---
 .../cases/casesMain/config/index.js           |   4 +-
 .../jscomposition/cases/casesMain/main.js     |  21 +-
 .../jscomposition/cases/casesMain/routes.js   |  45 +++--
 .../cases/casesMain/utils/counters.js         |  89 ++++-----
 .../cases/casesMain/utils/index.js            |   2 +-
 resources/jscomposition/system/Breadcrums.vue |  28 ++-
 resources/jscomposition/system/index.js       |   6 +-
 routes/web.php                                |   4 -
 webpack.mix.js                                |   4 -
 34 files changed, 593 insertions(+), 644 deletions(-)

diff --git a/ProcessMaker/Http/Controllers/CasesController.php b/ProcessMaker/Http/Controllers/CasesController.php
index d628cad18e..8a5c5f7196 100644
--- a/ProcessMaker/Http/Controllers/CasesController.php
+++ b/ProcessMaker/Http/Controllers/CasesController.php
@@ -31,14 +31,14 @@
 
 class CasesController extends Controller
 {
-        /**
+    /**
      * Get the list of requests.
      *
      * @return \Illuminate\View\View|\Illuminate\Contracts\View
      */
     public function index($type = null)
     {
-   
+       // This is a temporary API the engine team will provide the new
         return view('cases.casesMain');
     }
 }
diff --git a/resources/jscomposition/base/buttons/index.js b/resources/jscomposition/base/buttons/index.js
index 4e49f4b276..5a6c8fc3a0 100644
--- a/resources/jscomposition/base/buttons/index.js
+++ b/resources/jscomposition/base/buttons/index.js
@@ -1,7 +1,5 @@
 import OutlineButton from "./OutlineButton.vue";
 
-export default {}
-
 export {
     OutlineButton
 }
\ No newline at end of file
diff --git a/resources/jscomposition/base/cards/index.js b/resources/jscomposition/base/cards/index.js
index ca12216c61..c8901f3cd2 100644
--- a/resources/jscomposition/base/cards/index.js
+++ b/resources/jscomposition/base/cards/index.js
@@ -1,7 +1,5 @@
 import ThreeSectionCard from "./ThreeSectionCard.vue"
 
-export default {}
-
 export {
     ThreeSectionCard
 }
\ No newline at end of file
diff --git a/resources/jscomposition/base/form/Dropdown.vue b/resources/jscomposition/base/form/Dropdown.vue
index 0d2cd15bfb..cbf7e11ebb 100644
--- a/resources/jscomposition/base/form/Dropdown.vue
+++ b/resources/jscomposition/base/form/Dropdown.vue
@@ -10,7 +10,7 @@
       <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>
+        <span>{{ data?.label || data?.value || ""}} </span>
 
         <i class="fas fa-chevron-down" />
       </button>
diff --git a/resources/jscomposition/base/form/InputLeading.vue b/resources/jscomposition/base/form/InputLeading.vue
index 0fc68eb6a5..a2fb84868f 100644
--- a/resources/jscomposition/base/form/InputLeading.vue
+++ b/resources/jscomposition/base/form/InputLeading.vue
@@ -5,12 +5,11 @@
                 <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-md 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
-                 sm:tw-text-sm sm:tw-leading-6" :placeholder="placeholder">
+                focus-visible:tw-outline-none
+                sm:tw-text-sm sm:tw-leading-6" :placeholder="placeholder">
     </div>
 </template>
 <script>
@@ -27,7 +26,7 @@ export default defineComponent({
             default: () => ("fa-solid fa-magnifying-glass")
         }
     },
-    setup(props, {emit}) {
+    setup(props, { emit }) {
         return {};
     }
 });
diff --git a/resources/jscomposition/base/table/BaseTable.vue b/resources/jscomposition/base/table/BaseTable.vue
index fe2a6bfb7f..638ba50f69 100644
--- a/resources/jscomposition/base/table/BaseTable.vue
+++ b/resources/jscomposition/base/table/BaseTable.vue
@@ -1,38 +1,44 @@
 <template>
-    <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">      
-                <tr>
-                    <THeader 
-                        v-for="(column, index) in columns" :key="index"
-                        :columns="columns" :column="column">
-                        <slot :name="`theader-${column.field}`">                            
-                        </slot>
-                    </THeader>
-                </tr>
-            </thead>
-            <tbody>
-                <TRow v-for="(row, indexRow) in data" :key="indexRow">
-                    <TCell v-for="(column, indexColumn) in columns" :key="indexColumn"
-                            :columns="columns" :column="column" :row="row">
-                        <slot :name="`tcell-${indexRow}-${column.field}`">                            
-                        </slot>
-                    </TCell>
-                </TRow>
-            </tbody>
-        </table>
-    </div>
+  <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">
+        <tr>
+          <THeader
+            v-for="(column, index) in columns"
+            :key="index"
+            :columns="columns"
+            :column="column">
+            <slot :name="`theader-${column.field}`"> </slot>
+          </THeader>
+        </tr>
+      </thead>
+      <tbody>
+        <TRow v-for="(row, indexRow) in data" :key="indexRow">
+          <TCell
+            v-for="(column, indexColumn) in columns"
+            :key="indexColumn"
+            :columns="columns"
+            :column="column"
+            :row="row">
+            <slot :name="`tcell-${indexRow}-${column.field}`"> </slot>
+          </TCell>
+        </TRow>
+      </tbody>
+    </table>
+  </div>
 </template>
 
 <script>
-import { defineComponent, ref} from 'vue';
-import THeader from './THeader.vue';
-import TRow from './TRow.vue';
-import TCell from './TCell.vue';
+import { defineComponent } from "vue";
+import THeader from "./THeader.vue";
+import TRow from "./TRow.vue";
+import TCell from "./TCell.vue";
 
 function generateUniqueId(length = 8) {
-  const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-  let uniqueId = '';
+  const charset =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let uniqueId = "";
   for (let i = 0; i < length; i++) {
     const randomIndex = Math.floor(Math.random() * charset.length);
     uniqueId += charset[randomIndex];
@@ -40,33 +46,28 @@ function generateUniqueId(length = 8) {
   return uniqueId;
 }
 
-const columnBase = {
-    width: 200
-}
-
-
 export default defineComponent({
-    components: {
-        THeader,
-        TRow,
-        TCell
+  components: {
+    THeader,
+    TRow,
+    TCell,
+  },
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    config: {
+      type: Object,
+      default: () => ({}),
     },
-    props:{
-        columns:{
-            type: Array,
-            default: () => [] 
-        },
-        data: {
-            type: Array,
-            default: () => []
-        },
-        config:{
-            type: Object,
-            default: () => ({})
-        },
- }, 
- setup(props, {emit}){     
-    return {}
- }
+  },
+  setup(props, { emit }) {
+    return {};
+  },
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/jscomposition/base/table/Pagination.vue b/resources/jscomposition/base/table/Pagination.vue
index 9e2d350dba..e337041d4f 100644
--- a/resources/jscomposition/base/table/Pagination.vue
+++ b/resources/jscomposition/base/table/Pagination.vue
@@ -1,128 +1,81 @@
 <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">
-
-        <div>
-            <svg class="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd"
-                    d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
-                    clip-rule="evenodd" />
-            </svg>
-        </div>
-
-        <div>
-            <svg class="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd"
-                    d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
-                    clip-rule="evenodd" />
-            </svg>
-        </div>
-
-        <div>
-            <div
-                class="tw-flex tw-border-1 tw-rounded-md
-                tw-ring-1 tw-ring-inset tw-ring-gray-300">
-                <input class="tw-block tw-flex-1 tw-border-0 
-                    tw-bg-transparent tw-pl-1 
-                    focus-visible:tw-outline-none
-                    placeholder:tw-text-gray-400" placeholder="1">
-          
-            </div>
-        </div>
-
-        <div>
-            <svg class="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd"
-                    d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
-                    clip-rule="evenodd" />
-            </svg>
-        </div>
-
-        <div>
-            <svg class="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd"
-                    d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
-                    clip-rule="evenodd" />
-            </svg>
-        </div>
+  <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">
+    <div>
+      <svg
+        class="tw-h-5 tw-w-5"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true">
+        <path
+          fill-rule="evenodd"
+          d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+          clip-rule="evenodd" />
+      </svg>
+    </div>
 
+    <div>
+      <svg
+        class="tw-h-5 tw-w-5"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true">
+        <path
+          fill-rule="evenodd"
+          d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+          clip-rule="evenodd" />
+      </svg>
+    </div>
 
-        <!-- <div>
-            <nav class="tw-isolate tw-inline-flex -tw-space-x-px tw-rounded-md tw-shadow-sm" aria-label="Pagination">
-                <a href="#" class="tw-relative tw-inline-flex tw-items-center tw-rounded-l-md tw-px-2 tw-py-2
-                            tw-text-gray-400 tw-ring-1 tw-ring-inset tw-ring-gray-300 hover:tw-bg-gray-50
-                            focus:tw-z-20 focus:tw-outline-offset-0">
-                    <span class="sr-only">Previous</span>
-                    <svg class="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                        <path fill-rule="evenodd"
-                            d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
-                            clip-rule="evenodd" />
-                    </svg>
-                </a>
-                 <a href="#" aria-current="page"
-                    class="tw-relative tw-z-10 tw-inline-flex
-                            tw-items-center bg-indigo-600 tw-px-4 tw-py-2
-                            tw-text-sm tw-font-semibold
-                            tw-text-white focus:tw-z-20 focus-visible:outline
-                            focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">1</a>
-                <a href="#" class="tw-relative tw-inline-flex
-                            tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-font-semibold
-                            text-gray-900 tw-ring-1 tw-ring-inset tw-ring-gray-300 hover:tw-bg-gray-50
-                            focus:tw-z-20 focus:tw-outline-offset-0">2</a>
-                <a href="#" class="tw-relative tw-hidden tw-items-center tw-px-4 tw-py-2
-                            tw-text-sm tw-font-semibold text-gray-900 tw-ring-1
-                            tw-ring-inset tw-ring-gray-300 hover:tw-bg-gray-50
-                            focus:tw-z-20 focus:tw-outline-offset-0 md:tw-inline-flex">3</a>
-                <span class="tw-relative tw-inline-flex tw-items-center tw-px-4 tw-py-2
-                        tw-text-sm tw-font-semibold tw-text-gray-700 tw-ring-1 
-                        w-ring-inset tw-ring-gray-300 focus:tw-outline-offset-0">...</span>
-                <a href="#" class="tw-relative tw-hidden tw-items-center tw-px-4 tw-py-2
-                            tw-text-sm tw-font-semibold text-gray-900 tw-ring-1
-                            tw-ring-inset tw-ring-gray-300 hover:tw-bg-gray-50
-                            focus:tw-z-20 focus:tw-outline-offset-0 md:tw-inline-flex">8</a>
-                <a href="#" class="tw-relative tw-inline-flex tw-items-center
-                            tw-px-4 tw-py-2 tw-text-sm tw-font-semibold text-gray-900
-                            tw-ring-1 tw-ring-inset tw-ring-gray-300 hover:tw-bg-gray-50
-                            focus:tw-z-20 focus:tw-outline-offset-0">9</a>
-                <a href="#" class="tw-relative tw-inline-flex tw-items-center
-                            tw-px-4 tw-py-2 tw-text-sm tw-font-semibold text-gray-900
-                            tw-ring-1 tw-ring-inset tw-ring-gray-300 hover:tw-bg-gray-50 focus:tw-z-20
-                            focus:tw-outline-offset-0">10</a>
-                <a href="#" class="tw-relative tw-inline-flex tw-items-center
-                        tw-rounded-r-md tw-px-2 tw-py-2 tw-text-gray-400 tw-ring-1 tw-ring-inset
-                        tw-ring-gray-300 hover:tw-bg-gray-50 focus:tw-z-20
-                         focus:tw-outline-offset-0">
-                    <span class="sr-only">Next</span>
-                    <svg class="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                        <path fill-rule="evenodd"
-                            d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
-                            clip-rule="evenodd" />
-                    </svg>
-                </a>
-            </nav>
-        </div> -->
+    <div>
+      <div class="tw-flex tw-border-1 tw-rounded-md tw-ring-1 tw-ring-inset tw-ring-gray-300">
+        <input
+          class="tw-block tw-flex-1 tw-border-0 tw-bg-transparent tw-pl-1 focus-visible:tw-outline-none placeholder:tw-text-gray-400"
+          placeholder="1" />
+      </div>
+    </div>
 
-        <div>
-            <span> 153 items </span>
-        </div>
+    <div>
+      <svg
+        class="tw-h-5 tw-w-5"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true">
+        <path
+          fill-rule="evenodd"
+          d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+          clip-rule="evenodd" />
+      </svg>
+    </div>
 
-        <div>
-            <span> 15 per page</span>
-        </div>
+    <div>
+      <svg
+        class="tw-h-5 tw-w-5"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true">
+        <path
+          fill-rule="evenodd"
+          d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+          clip-rule="evenodd" />
+      </svg>
+    </div>
 
+    <div>
+      <span> 153 items </span>
+    </div>
 
+    <div>
+      <span> 15 per page</span>
     </div>
+  </div>
 </template>
 <script>
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
 
 export default defineComponent({
-    setup() {
-        return {};
-    }
+  setup() {
+    return {};
+  },
 });
 </script>
-<style lang="">
-
-</style>
\ No newline at end of file
+<style lang=""></style>
diff --git a/resources/jscomposition/base/table/TCell.vue b/resources/jscomposition/base/table/TCell.vue
index ebbcca8edf..e990f8d452 100644
--- a/resources/jscomposition/base/table/TCell.vue
+++ b/resources/jscomposition/base/table/TCell.vue
@@ -1,43 +1,46 @@
 <template>
-   <td class="tw-p-3">
-      <slot v-if="!column.cellRenderer" :columns="columns" :column="column" :row="row">
-         {{ getValue() }}
-      </slot>
+  <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>
+    <component v-else :is="column.cellRenderer()" />
+  </td>
 </template>
 
 <script>
-import { defineComponent } from 'vue';
-import { isFunction, get } from 'lodash';
+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: ()=>{}
+  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);
       }
-   },
-   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
-      }
-   }
+      return get(props.row, props.column?.field) || "";
+    };
+    return {
+      getValue,
+    };
+  },
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/jscomposition/base/table/THeader.vue b/resources/jscomposition/base/table/THeader.vue
index e1faf00fb3..e7dee4d39e 100644
--- a/resources/jscomposition/base/table/THeader.vue
+++ b/resources/jscomposition/base/table/THeader.vue
@@ -1,55 +1,59 @@
 <template>
-   <th>
-      <div class="tw-flex tw-justify-between">
-         <div
-            class="tw-w-full tw-relative tw-py-4 tw-px-3 tw-text-left tw-overflow-hidden tw-whitespace-nowrap tw-text-ellipsis"
-            :style="{ width: width + 'px' }">
-            <slot>
-               {{ getValue() }}
-            </slot>
-         </div>
-         <div :class="{ '!tw-cursor-col-resize': column.resizable }"
-            class="tw-w-[10px] tw-cursor-default tw-border-r tw-border-gray-400"
-            @mousedown="column.resizable ? columnResize.startResize($event) : null">&nbsp;</div>
+  <th>
+    <div class="tw-flex tw-justify-between">
+      <div
+        class="tw-w-full tw-relative tw-py-4 tw-px-3 tw-text-left
+         tw-overflow-hidden tw-whitespace-nowrap tw-text-ellipsis"
+        :style="{ width: width + 'px' }">
+        <slot>
+          {{ getValue() }}
+        </slot>
       </div>
-   </th>
+      <div
+        :class="{ '!tw-cursor-col-resize': column.resizable }"
+        class="tw-w-[10px] tw-cursor-default tw-border-r tw-border-gray-400"
+        @mousedown="column.resizable ? columnResize.startResize($event) : null">
+        &nbsp;
+      </div>
+    </div>
+  </th>
 </template>
 
 <script>
-import { defineComponent, computed } from 'vue';
-import { columnResizeComposable } from "./composables/columnComposable"
-import { isFunction } from 'lodash';
+import { isFunction } from "lodash";
+import { defineComponent, computed } from "vue";
+import { columnResizeComposable } from "./composables/columnComposable";
 
 export default defineComponent({
-   props: {
-      columns: {
-         type: Array,
-         default: () => []
-      },
-      column: {
-         type: Object,
-         default: () => { }
-      }
-   },
-   setup(props, { emit }) {
-      const columnResize = columnResizeComposable(props.column);
-
-      const width = computed(() => {
-         return props.column.width || 200;
-      })
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    column: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  setup(props, { emit }) {
+    const columnResize = columnResizeComposable(props.column);
 
-      const getValue = () => {
-         if (isFunction(props.column?.headerFormatter)) {
-            return props.column?.headerFormatter(props.columns);
-         }
+    const width = computed(() => {
+      return props.column.width || 200;
+    });
 
-         return props.column.headerName || props.column.field || "";
+    const getValue = () => {
+      if (isFunction(props.column?.headerFormatter)) {
+        return props.column?.headerFormatter(props.columns);
       }
-      return {
-         getValue,
-         width,
-         columnResize
-      }
-   }
+
+      return props.column.headerName || props.column.field || "";
+    };
+    return {
+      getValue,
+      width,
+      columnResize,
+    };
+  },
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/jscomposition/base/table/TRow.vue b/resources/jscomposition/base/table/TRow.vue
index 1d700ef645..ad929a275a 100644
--- a/resources/jscomposition/base/table/TRow.vue
+++ b/resources/jscomposition/base/table/TRow.vue
@@ -1,14 +1,15 @@
 <template>
   <tr class="tw-border-b">
-   <slot></slot>
+    <slot></slot>
   </tr>
 </template>
 
 <script>
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
+
 export default defineComponent({
- setup(){
-    return {}
- }
+  setup() {
+    return {};
+  },
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/jscomposition/base/table/composables/columnComposable.js b/resources/jscomposition/base/table/composables/columnComposable.js
index cae2353f02..2ce357f833 100644
--- a/resources/jscomposition/base/table/composables/columnComposable.js
+++ b/resources/jscomposition/base/table/composables/columnComposable.js
@@ -1,6 +1,4 @@
-import {
-  ref, onUnmounted
-} from "vue";
+import { ref, onUnmounted } from "vue";
 
 export default {};
 /**
@@ -16,12 +14,11 @@ export const columnResizeComposable = (column) => {
 
   //Resize the column value
   const doResize = (event) => {
-   
     if (isResizing.value) {
       const diff = event.pageX - startX.value;
       const min = 63;
       const currentWidth = Math.max(min, startWidth.value + diff);
-   
+
       column.width = currentWidth;
     }
   };
@@ -38,8 +35,8 @@ export const columnResizeComposable = (column) => {
   const startResize = (event, index) => {
     isResizing.value = true;
     startX.value = event.pageX;
-    startWidth.value =column.width || 200;
-   
+    startWidth.value = column.width || 200;
+
     document.addEventListener("mousemove", doResize);
     document.addEventListener("mouseup", stopResize);
   };
diff --git a/resources/jscomposition/base/table/index.js b/resources/jscomposition/base/table/index.js
index 927748b7d0..6183b1cc26 100644
--- a/resources/jscomposition/base/table/index.js
+++ b/resources/jscomposition/base/table/index.js
@@ -4,12 +4,4 @@ import TCell from "./TCell.vue";
 import THeader from "./THeader.vue";
 import TRow from "./TRow.vue";
 
-export default {}
-
-export {
-    BaseTable,
-    Pagination,
-    TCell,
-    THeader,
-    TRow
-}
\ No newline at end of file
+export { BaseTable, Pagination, TCell, THeader, TRow };
diff --git a/resources/jscomposition/base/ui/Badge.vue b/resources/jscomposition/base/ui/Badge.vue
index 488d6be08a..f1f6c173b4 100644
--- a/resources/jscomposition/base/ui/Badge.vue
+++ b/resources/jscomposition/base/ui/Badge.vue
@@ -1,22 +1,24 @@
 <template>
-    <span :class="`tw-inline-flex tw-items-center
+  <span
+    :class="`tw-inline-flex tw-items-center
         tw-text-sm tw-border-1 tw-rounded-lg tw-border tw-border-${color}-300
         tw-bg-${color}-50 tw-px-2 tw-py-1 tw-text-${color}-500`">
-        <slot></slot>
-    </span>
+    <slot></slot>
+  </span>
 </template>
 
 <script>
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
+
 export default defineComponent({
-    props:{
-        color:{
-            type:String,    
-            default: ()=> 'gray'
-        }
+  props: {
+    color: {
+      type: String,
+      default: () => "gray",
     },
-    setup(){
-        return{};
-    }
-})
-</script>
\ No newline at end of file
+  },
+  setup() {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/base/ui/index.js b/resources/jscomposition/base/ui/index.js
index d62371ab35..0e62cb7097 100644
--- a/resources/jscomposition/base/ui/index.js
+++ b/resources/jscomposition/base/ui/index.js
@@ -1,7 +1,5 @@
-import Badge from "./Badge.vue"
+import Badge from "./Badge.vue";
 
-export default {}
+export default {};
 
-export {
-    Badge
-}
\ No newline at end of file
+export { Badge };
diff --git a/resources/jscomposition/cases/casesMain/App.vue b/resources/jscomposition/cases/casesMain/App.vue
index e5b412c4ed..fc6d013cb4 100644
--- a/resources/jscomposition/cases/casesMain/App.vue
+++ b/resources/jscomposition/cases/casesMain/App.vue
@@ -4,15 +4,15 @@
   </div>
 </template>
 <script>
-import { ref, defineComponent } from "vue";
+import { defineComponent } from "vue";
 import { RouterView } from "vue-router";
 
 export default defineComponent({
   components: {
-    RouterView
+    RouterView,
   },
   setup() {
-    return {}
-  }
+    return {};
+  },
 });
 </script>
diff --git a/resources/jscomposition/cases/casesMain/CasesDataSection.vue b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
index ab6bc00201..ff7a733cc7 100644
--- a/resources/jscomposition/cases/casesMain/CasesDataSection.vue
+++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
@@ -1,54 +1,54 @@
 <template>
-    <div class="tw-w-full tw-space-y-4">
-        <CaseFilter />
+  <div class="tw-w-full tw-space-y-4">
+    <CaseFilter />
 
-        <BadgesSection v-model="badgesData" />
+    <BadgesSection v-model="badgesData" />
 
-        <BaseTable :columns="columnsConfig" :data="data"/>
+    <BaseTable :columns="columnsConfig" :data="data" />
 
-        <Pagination />
-    </div>
+    <Pagination />
+  </div>
 </template>
 <script>
-import { defineComponent, ref, onMounted } from 'vue';
-import CaseFilter from './components/CaseFilter.vue';
-import BadgesSection from './components/BadgesSection.vue';
-import { BaseTable, Pagination } from '../../base';
-import { getColumns } from './config/columns'
-import { Breadcrums } from '../../system';
-import { badges } from './config/badges';
-import { getData } from './api';
+import { defineComponent, ref, onMounted } from "vue";
+import CaseFilter from "./components/CaseFilter.vue";
+import BadgesSection from "./components/BadgesSection.vue";
+import { BaseTable, Pagination } from "../../base";
+import { getColumns } from "./config/columns";
+import { Breadcrums } from "../../system";
+import { badges } from "./config/badges";
+import { getData } from "./api";
 
 export default defineComponent({
-    props: {
-        listId: {
-            type: String,
-            default: () => 'myCases'
-        }
+  props: {
+    listId: {
+      type: String,
+      default: () => "myCases",
     },
-    components: {
-        CaseFilter,
-        BadgesSection,
-        BaseTable,
-        Pagination,
-        Breadcrums
-    },
-    setup(props, { emit }) {
-        const badgesData = ref(badges);
-        const columnsConfig = ref()
-        const data = ref();
+  },
+  components: {
+    CaseFilter,
+    BadgesSection,
+    BaseTable,
+    Pagination,
+    Breadcrums,
+  },
+  setup(props, { emit }) {
+    const badgesData = ref(badges);
+    const columnsConfig = ref();
+    const data = ref();
 
-        onMounted(async () => {
-            data.value = await getData();
+    onMounted(async () => {
+      data.value = await getData();
 
-            columnsConfig.value = getColumns(props.listId);
-        });
+      columnsConfig.value = getColumns(props.listId);
+    });
 
-        return {
-            columnsConfig,
-            data,
-            badgesData,
-        };
-    }
+    return {
+      columnsConfig,
+      data,
+      badgesData,
+    };
+  },
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/jscomposition/cases/casesMain/CasesMain.vue b/resources/jscomposition/cases/casesMain/CasesMain.vue
index dd294634be..71e136cc11 100644
--- a/resources/jscomposition/cases/casesMain/CasesMain.vue
+++ b/resources/jscomposition/cases/casesMain/CasesMain.vue
@@ -1,49 +1,51 @@
 <template>
-    <div class="tw-w-full tw-space-y-4">
-        <Breadcrums />
+  <div class="tw-w-full tw-space-y-4">
+    <Breadcrums />
 
-        <AppCounters class="tw-w-full" v-model="countersData" @change="onChangeCounter" />
+    <AppCounters
+      class="tw-w-full"
+      v-model="countersData"
+      @change="onChangeCounter" />
 
-        <RouterView :key="route.fullPath" />
-    </div>
+    <RouterView :key="route.fullPath" />
+  </div>
 </template>
 <script>
-import { defineComponent, ref, onMounted } from 'vue';
-import AppCounters from './components/AppCounters.vue';
-import { formatCounters } from './utils/counters';
-import { getCounters } from './api';
-import { Breadcrums } from '../../system';
-import { useRouter, useRoute } from 'vue-router/composables';
-
+import { defineComponent, ref, onMounted } from "vue";
+import AppCounters from "./components/AppCounters.vue";
+import { formatCounters } from "./utils/counters";
+import { getCounters } from "./api";
+import { Breadcrums } from "../../system";
+import { useRouter, useRoute } from "vue-router/composables";
 
 export default defineComponent({
-    components: {
-        AppCounters,
-        Breadcrums
-    },
-    setup() {
-        const countersData = ref([])
-        const router = useRouter();
-        const route = useRoute();
-
-        const onChangeCounter = (counter) => {
-            if (typeof counter.url == "function") {
-                return counter.url();
-            }
-
-            router.push({ path: counter.url }).catch((e) => { })
-        }
-
-        onMounted(async () => {
-            const resCounters = await getCounters();
-            countersData.value = formatCounters(resCounters);
-        })
-
-        return {
-            countersData,
-            route,
-            onChangeCounter
-        };
-    }
+  components: {
+    AppCounters,
+    Breadcrums,
+  },
+  setup() {
+    const countersData = ref([]);
+    const router = useRouter();
+    const route = useRoute();
+
+    const onChangeCounter = (counter) => {
+      if (typeof counter.url == "function") {
+        return counter.url();
+      }
+
+      router.push({ path: counter.url }).catch((e) => {});
+    };
+
+    onMounted(async () => {
+      const resCounters = await getCounters();
+      countersData.value = formatCounters(resCounters);
+    });
+
+    return {
+      countersData,
+      route,
+      onChangeCounter,
+    };
+  },
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/jscomposition/cases/casesMain/api/index.js b/resources/jscomposition/cases/casesMain/api/index.js
index ca51c56e1b..b7cbc82bc6 100644
--- a/resources/jscomposition/cases/casesMain/api/index.js
+++ b/resources/jscomposition/cases/casesMain/api/index.js
@@ -1,35 +1,35 @@
-export default {}
+export default {};
 
 // Method to get counters - change with processmaker API
 export const getCounters = async () => {
   const url = "http://localhost:3000/appcounters";
-    return {
-      myCases: 36,
-      inProgress: 20,
-      completed: 125,
-      allCases: 145,
-      allRequests: 777
-    }
+  return {
+    myCases: 36,
+    inProgress: 20,
+    completed: 125,
+    allCases: 145,
+    allRequests: 777,
+  };
 };
 
 // Method to get data case list - change with processmaker API
 export const getData = async () => {
-  let objects_list = []
+  let objects_list = [];
 
   for (let i = 0; i <= 31; i++) {
     const obj = {
-      "caseNumber": `${i}`,
-      "caseTitle": `Case Title ${i}`,
-      "process": `Process ${i}`,
-      "task": `Task ${i}`,
-      "participants": `Avatar ${i}`,
-      "status": `badge ${i}`,
-      "started": `21/21/${i}`,
-      "completed": `22/22/${i}`
+      caseNumber: `${i}`,
+      caseTitle: `Case Title ${i}`,
+      process: `Process ${i}`,
+      task: `Task ${i}`,
+      participants: `Avatar ${i}`,
+      status: `badge ${i}`,
+      started: `21/21/${i}`,
+      completed: `22/22/${i}`,
     };
 
     objects_list.push(obj);
   }
 
   return objects_list;
-};
\ No newline at end of file
+};
diff --git a/resources/jscomposition/cases/casesMain/components/AppCounters.vue b/resources/jscomposition/cases/casesMain/components/AppCounters.vue
index 6c4bb421de..203bede000 100644
--- a/resources/jscomposition/cases/casesMain/components/AppCounters.vue
+++ b/resources/jscomposition/cases/casesMain/components/AppCounters.vue
@@ -1,8 +1,6 @@
 <template>
-  <div class="tw-w-auto tw-flex tw-flex-col sm:tw-flex-row
-    tw-space-y-2 sm:tw-space-y-0  
-    sm:tw-space-x-4 sm:tw-py-0" >
-
+  <div
+    class="tw-w-auto tw-flex tw-flex-col sm:tw-flex-row tw-space-y-2 sm:tw-space-y-0 sm:tw-space-x-4 sm:tw-py-0">
     <ThreeSectionCard
       v-for="(counter, index) in data"
       :key="index"
@@ -12,13 +10,12 @@
       class="tw-w-full"
       :color="counter.color"
       :icon="counter.icon"
-      @click="onClick(counter, index)"
-    />
+      @click="onClick(counter, index)" />
   </div>
 </template>
 
 <script>
-import { defineComponent, ref,computed,  onMounted } from "vue";
+import { defineComponent, ref, computed, onMounted } from "vue";
 import { ThreeSectionCard } from "../../../base/index";
 
 export default defineComponent({
@@ -29,34 +26,33 @@ export default defineComponent({
       default: () => [],
     },
   },
-  emits:['input', 'change', 'update:value'],
+  emits: ["input", "change", "update:value"],
   setup(props, { emit }) {
     const data = computed({
       get() {
         return props.value;
       },
       set(dt) {
-        emit('input', dt);
+        emit("input", dt);
       },
     });
 
     const onClick = (counter, idxCounter) => {
       const dt = data.value.map((x, index) => {
         x.active = false;
-      
-        if(index == idxCounter){
+
+        if (index == idxCounter) {
           x.active = true;
         }
         return x;
       });
-      
-      data.value = dt
 
-      emit('change', counter, idxCounter);
+      data.value = dt;
+
+      emit("change", counter, idxCounter);
     };
 
-    onMounted(() => {
-    });
+    onMounted(() => {});
 
     return {
       data,
diff --git a/resources/jscomposition/cases/casesMain/components/AvatarContainer.vue b/resources/jscomposition/cases/casesMain/components/AvatarContainer.vue
index 7bac3776a2..03a1b14a30 100644
--- a/resources/jscomposition/cases/casesMain/components/AvatarContainer.vue
+++ b/resources/jscomposition/cases/casesMain/components/AvatarContainer.vue
@@ -1,17 +1,30 @@
 <template>
-    <div class="tw-isolate tw-flex -tw-space-x-1 tw-overflow-hidden tw-justify-center">
-    <img class="tw-relative tw-z-30 tw-inline-block tw-h-8 tw-w-8 tw-rounded-full tw-ring-2 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="" />
-    <img class="tw-relative tw-z-20 tw-inline-block tw-h-8 tw-w-8 tw-rounded-full tw-ring-2 tw-ring-white" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
-    <img class="tw-relative tw-z-10 tw-inline-block tw-h-8 tw-w-8 tw-rounded-full tw-ring-2 tw-ring-white" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80" alt="" />
-    <img class="tw-relative tw-z-0 tw-inline-block tw-h-8 tw-w-8 tw-rounded-full tw-ring-2 tw-ring-white" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
+  <div
+    class="tw-isolate tw-flex -tw-space-x-1 tw-overflow-hidden tw-justify-center">
+    <img
+      class="tw-relative tw-z-30 tw-inline-block tw-h-8 tw-w-8 tw-rounded-full tw-ring-2 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="" />
+    <img
+      class="tw-relative tw-z-20 tw-inline-block tw-h-8 tw-w-8 tw-rounded-full tw-ring-2 tw-ring-white"
+      src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+      alt="" />
+    <img
+      class="tw-relative tw-z-10 tw-inline-block tw-h-8 tw-w-8 tw-rounded-full tw-ring-2 tw-ring-white"
+      src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
+      alt="" />
+    <img
+      class="tw-relative tw-z-0 tw-inline-block tw-h-8 tw-w-8 tw-rounded-full tw-ring-2 tw-ring-white"
+      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+      alt="" />
   </div>
 </template>
 <script>
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
 
 export default defineComponent({
-    setup(){
-        return {};
-    }
-})
-</script>
\ No newline at end of file
+  setup() {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesMain/components/BadgeContainer.vue b/resources/jscomposition/cases/casesMain/components/BadgeContainer.vue
index e2c2a493cb..af50e69d44 100644
--- a/resources/jscomposition/cases/casesMain/components/BadgeContainer.vue
+++ b/resources/jscomposition/cases/casesMain/components/BadgeContainer.vue
@@ -1,23 +1,20 @@
 <template>
-    <div class="tw-flex tw-justify-center">
-        <Badge color="green">
-            In progress
-        </Badge>
-    </div>
+  <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';
+import { Badge } from "../../../base/ui/index";
+import { defineComponent } from "vue";
 
 export default defineComponent({
-    components: {
-        Badge
-    },
-    props: {
-    },
-    setup() {
-        return {};
-    }
-})
-</script>
\ No newline at end of file
+  components: {
+    Badge,
+  },
+  props: {},
+  setup() {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesMain/components/BadgesSection.vue b/resources/jscomposition/cases/casesMain/components/BadgesSection.vue
index 1e50276c65..86065b6759 100644
--- a/resources/jscomposition/cases/casesMain/components/BadgesSection.vue
+++ b/resources/jscomposition/cases/casesMain/components/BadgesSection.vue
@@ -1,35 +1,36 @@
 <template>
-    <div class="tw-flex tw-space-x-1">
-        <Badge
-            class="tw-text-xs"
-            color="gray"
-            v-for="(item, index) in data" :key="index">
-            {{ item.label }}
-        </Badge>
-    </div>
+  <div class="tw-flex tw-space-x-1">
+    <Badge
+      class="tw-text-xs"
+      color="gray"
+      v-for="(item, index) in data"
+      :key="index">
+      {{ item.label }}
+    </Badge>
+  </div>
 </template>
 <script>
-import { Badge } from '../../../base/ui/index';
-import { defineComponent, computed } from 'vue';
+import { Badge } from "../../../base/ui/index";
+import { defineComponent, computed } from "vue";
 
 export default defineComponent({
-    props: {
-        value: {
-            type: Array,
-            default: () => []
-        }
+  props: {
+    value: {
+      type: Array,
+      default: () => [],
     },
-    components: {
-        Badge
-    },
-    setup(props, { emit }) {
-        const data = computed(() => {
-            return props.value
-        })
+  },
+  components: {
+    Badge,
+  },
+  setup(props, { emit }) {
+    const data = computed(() => {
+      return props.value;
+    });
 
-        return {
-            data
-        };
-    }
+    return {
+      data,
+    };
+  },
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/jscomposition/cases/casesMain/components/CaseFilter.vue b/resources/jscomposition/cases/casesMain/components/CaseFilter.vue
index 38c94e66e9..3d9e721653 100644
--- a/resources/jscomposition/cases/casesMain/components/CaseFilter.vue
+++ b/resources/jscomposition/cases/casesMain/components/CaseFilter.vue
@@ -1,22 +1,22 @@
 <template>
-    <div class="tw-flex tw-space-x-2">
-        <div class="tw-w-full">
-            <InputLeading placeholder="Search here"></InputLeading>
-        </div>
+  <div class="tw-flex tw-space-x-2">
+    <div class="tw-w-full">
+      <InputLeading placeholder="Search here"></InputLeading>
     </div>
+  </div>
 </template>
 <script>
-import { OutlineButton } from '../../../base/buttons/index';
-import { InputLeading } from '../../../base/form/index';
-import { defineComponent } from 'vue';
+import { OutlineButton } from "../../../base/buttons/index";
+import { InputLeading } from "../../../base/form/index";
+import { defineComponent } from "vue";
 
 export default defineComponent({
-    components: {
-        OutlineButton,
-        InputLeading
-    },
-    setup() {
-        return {};
-    }
-})
-</script>
\ No newline at end of file
+  components: {
+    OutlineButton,
+    InputLeading,
+  },
+  setup() {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/cases/casesMain/config/badges.js b/resources/jscomposition/cases/casesMain/config/badges.js
index b36f828a65..d2832c87ba 100644
--- a/resources/jscomposition/cases/casesMain/config/badges.js
+++ b/resources/jscomposition/cases/casesMain/config/badges.js
@@ -1,16 +1,16 @@
 export default {};
 
 export const badges = [
-    {
-        label: "Status : In progress"
-    },
-    {
-        label: "Status : To do"
-    },
-    {
-        label: "Status : New Badge"
-    },
-    {
-        label: "Status : Badge Example"
-    }
+  {
+    label: "Status : In progress",
+  },
+  {
+    label: "Status : To do",
+  },
+  {
+    label: "Status : New Badge",
+  },
+  {
+    label: "Status : Badge Example",
+  },
 ];
diff --git a/resources/jscomposition/cases/casesMain/config/columns.js b/resources/jscomposition/cases/casesMain/config/columns.js
index 4f6722f327..531f9b6a60 100644
--- a/resources/jscomposition/cases/casesMain/config/columns.js
+++ b/resources/jscomposition/cases/casesMain/config/columns.js
@@ -1,7 +1,7 @@
 import BadgeContainer from "../components/BadgeContainer.vue";
 import AvatarContainer from "../components/AvatarContainer.vue";
 
-export default {}
+export default {};
 /**
  * Example Column
  * field: String
@@ -20,73 +20,71 @@ export default {}
 // AllCases : [Case#, Case Title, Process, Task, Participants, Status, Started, Completed]
 // AllRequest : [Case#, Case Title, Process, Task, Participants, Status, Started, Completed]
 
-
-export const caseNumberColumn = ()=>({
+export const caseNumberColumn = () => ({
   field: "caseNumber",
   headerName: "Case #",
   resizable: true,
   width: 200,
-})
+});
 
-export const caseTitleColumn = ()=>({
+export const caseTitleColumn = () => ({
   field: "caseTitle",
   headerName: "Case Title",
   resizable: true,
   width: 200,
-})
+});
 
-export const processColumn = ()=>({
+export const processColumn = () => ({
   field: "process",
   headerName: "Process",
   resizable: true,
-  width: 200
-})
+  width: 200,
+});
 
-export const taskColumn = ()=>({
+export const taskColumn = () => ({
   field: "task",
   headerName: "Task",
   resizable: true,
-  width: 200
-})
-
+  width: 200,
+});
 
-export const participantsColumn = ()=>({
+export const participantsColumn = () => ({
   field: "participants",
   headerName: "Participants",
   resizable: true,
   width: 200,
   cellRenderer: () => {
     return AvatarContainer;
-  }
-})
+  },
+});
 
-export const statusColumn = ()=>({
+export const statusColumn = () => ({
   field: "status",
   headerName: "Status",
   resizable: true,
   width: 200,
   cellRenderer: () => {
     return BadgeContainer;
-  }
-})
+  },
+});
 
-export const startedColumn = ()=>({
+export const startedColumn = () => ({
   field: "started",
   headerName: "Started",
   resizable: true,
-  width: 200
-})
+  width: 200,
+});
 
-export const completedColumn = ()=>({
+export const completedColumn = () => ({
   field: "completed",
   headerName: "Completed",
   resizable: true,
-  width: 200
-})
+  width: 200,
+});
 
 export const getColumns = (type) => {
   const columnsDefinition = {
-    'my-cases': [
+    "my-cases": [
       caseNumberColumn(),
       caseTitleColumn(),
       processColumn(),
@@ -94,18 +92,18 @@ export const getColumns = (type) => {
       participantsColumn(),
       statusColumn(),
       startedColumn(),
-      completedColumn()
+      completedColumn(),
     ],
-    'in-progress': [
+    "in-progress": [
       caseNumberColumn(),
       caseTitleColumn(),
       processColumn(),
       taskColumn(),
       participantsColumn(),
       statusColumn(),
-      startedColumn()
+      startedColumn(),
     ],
-    'completed': [
+    completed: [
       caseNumberColumn(),
       caseTitleColumn(),
       processColumn(),
@@ -113,9 +111,9 @@ export const getColumns = (type) => {
       participantsColumn(),
       statusColumn(),
       startedColumn(),
-      completedColumn()
+      completedColumn(),
     ],
-    'all-cases': [
+    "all-cases": [
       caseNumberColumn(),
       caseTitleColumn(),
       processColumn(),
@@ -123,10 +121,9 @@ export const getColumns = (type) => {
       participantsColumn(),
       statusColumn(),
       startedColumn(),
-      completedColumn()
-    ]
-  }
+      completedColumn(),
+    ],
+  };
 
   return columnsDefinition[type] || columnsDefinition.myCases;
-}
-
+};
diff --git a/resources/jscomposition/cases/casesMain/config/index.js b/resources/jscomposition/cases/casesMain/config/index.js
index 5bc60f9ebc..963420fb99 100644
--- a/resources/jscomposition/cases/casesMain/config/index.js
+++ b/resources/jscomposition/cases/casesMain/config/index.js
@@ -1,2 +1,2 @@
-export * from './columns'
-export * from './badges'
+export * from "./columns";
+export * from "./badges";
diff --git a/resources/jscomposition/cases/casesMain/main.js b/resources/jscomposition/cases/casesMain/main.js
index 8b4676c85a..97c89abc83 100644
--- a/resources/jscomposition/cases/casesMain/main.js
+++ b/resources/jscomposition/cases/casesMain/main.js
@@ -1,20 +1,19 @@
-
-import App from './App.vue'
-import { routes } from './routes';
+import App from "./App.vue";
+import { routes } from "./routes";
 
 Vue.use(VueRouter);
 
 const router = new VueRouter({
   mode: "history",
   base: "/",
-  routes
+  routes,
 });
 
 new Vue({
-    el: "#cases-main",
-    router,
-    components:{
-        App
-    },
-    render: (h) => h(App),
-})
+  el: "#cases-main",
+  router,
+  components: {
+    App,
+  },
+  render: (h) => h(App),
+});
diff --git a/resources/jscomposition/cases/casesMain/routes.js b/resources/jscomposition/cases/casesMain/routes.js
index 2a8c3f028b..e21e05406e 100644
--- a/resources/jscomposition/cases/casesMain/routes.js
+++ b/resources/jscomposition/cases/casesMain/routes.js
@@ -1,28 +1,27 @@
-import CasesMain from "./CasesMain.vue"
-import CasesDataSection from "./CasesDataSection.vue"
+import CasesMain from "./CasesMain.vue";
+import CasesDataSection from "./CasesDataSection.vue";
 
-export default {}
+export default {};
 
 export const routes = [
-    {
-        name: "cases",
-        path: "/cases-main",
-        component: CasesMain,
+  {
+    name: "cases",
+    path: "/cases-main",
+    component: CasesMain,
+    props(route) {
+      return {};
+    },
+    children: [
+      {
+        name: "cases-request",
+        path: ":id?",
+        component: CasesDataSection,
         props(route) {
-            return {};
+          return {
+            listId: route.params?.id || "my-cases",
+          };
         },
-        children:[
-            {
-                name: "cases-request",
-                path: ":id?",
-                component: CasesDataSection,
-                props(route) {
-                    return {
-                        listId: route.params?.id || 'my-cases',
-                    };
-                }
-            }
-        ]
-    
-    }
-]
\ No newline at end of file
+      },
+    ],
+  },
+];
diff --git a/resources/jscomposition/cases/casesMain/utils/counters.js b/resources/jscomposition/cases/casesMain/utils/counters.js
index 63c26b053c..2ce87946f8 100644
--- a/resources/jscomposition/cases/casesMain/utils/counters.js
+++ b/resources/jscomposition/cases/casesMain/utils/counters.js
@@ -1,45 +1,46 @@
-export default {}
+export default {};
+import { t } from "i18next";
 
-export const formatCounters = (data)=>{
-    const counters = [
-        {
-            header: "My cases",
-            body:data.myCases.toString(),
-            color:"amber",
-            icon:"fa-regular fa-user",
-            url:'/cases-main/my-cases'
-        },
-        {
-            header: "In progress",
-            body:data.inProgress.toString(),
-            color:"green",
-            icon:"fa-solid fa-list",
-            url:'/cases-main/in-progress'
-        },
-        {
-            header: "Completed",
-            body:data.completed.toString(),
-            color:"blue",
-            icon:"fa-regular fa-circle-check",
-            url:'/cases-main/completed'
-        },
-        {
-            header: "All cases",
-            body:data.allCases.toString(),
-            color:"purple",
-            icon:"fa-regular fa-clipboard",
-            url:'/cases-main/all-cases'
-        },
-        {
-            header: "All requests",
-            body:data.allRequests.toString(),
-            color:"gray",
-            icon:"fa-solid fa-play",
-            url:()=>{
-                window.location.href = "/cases"
-            }
-        }
-    ]
-    
-    return counters
-}
+export const formatCounters = (data) => {
+  const counters = [
+    {
+      header: t("My cases"),
+      body: data.myCases.toString(),
+      color: "amber",
+      icon: "fa-regular fa-user",
+      url: "/cases-main/my-cases",
+    },
+    {
+      header: t("In progress"),
+      body: data.inProgress.toString(),
+      color: "green",
+      icon: "fa-solid fa-list",
+      url: "/cases-main/in-progress",
+    },
+    {
+      header: t("Completed"),
+      body: data.completed.toString(),
+      color: "blue",
+      icon: "fa-regular fa-circle-check",
+      url: "/cases-main/completed",
+    },
+    {
+      header: t("All cases"),
+      body: data.allCases.toString(),
+      color: "purple",
+      icon: "fa-regular fa-clipboard",
+      url: "/cases-main/all-cases",
+    },
+    {
+      header: t("All requests"),
+      body: data.allRequests.toString(),
+      color: "gray",
+      icon: "fa-solid fa-play",
+      url: () => {
+        window.location.href = "/cases";
+      },
+    },
+  ];
+
+  return counters;
+};
diff --git a/resources/jscomposition/cases/casesMain/utils/index.js b/resources/jscomposition/cases/casesMain/utils/index.js
index 069f2719f6..d6a4a113d4 100644
--- a/resources/jscomposition/cases/casesMain/utils/index.js
+++ b/resources/jscomposition/cases/casesMain/utils/index.js
@@ -1 +1 @@
-export * from './counters'
\ No newline at end of file
+export * from "./counters";
diff --git a/resources/jscomposition/system/Breadcrums.vue b/resources/jscomposition/system/Breadcrums.vue
index 0c41c4d43a..a302a27c55 100644
--- a/resources/jscomposition/system/Breadcrums.vue
+++ b/resources/jscomposition/system/Breadcrums.vue
@@ -11,28 +11,36 @@
       </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">
+          <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>
+          <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';
+import { defineComponent } from "vue";
 
 export default defineComponent({
   setup() {
     const pages = [
-      { name: 'Projects', href: '#', current: false },
-      { name: 'Project Nero', href: '#', current: true },
-    ]
+      { name: "Projects", href: "#", current: false },
+      { name: "Project Nero", href: "#", current: true },
+    ];
     return {
-      pages
+      pages,
     };
-  }
+  },
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/jscomposition/system/index.js b/resources/jscomposition/system/index.js
index 87a413c41b..02e0d67feb 100644
--- a/resources/jscomposition/system/index.js
+++ b/resources/jscomposition/system/index.js
@@ -1,7 +1,5 @@
 import Breadcrums from "./Breadcrums.vue";
 
-export default {}
+export default {};
 
-export {
-    Breadcrums
-}
\ No newline at end of file
+export { Breadcrums };
diff --git a/routes/web.php b/routes/web.php
index 2fa719a5f2..e41cd225e4 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -138,10 +138,6 @@
     // Cases
     Route::get('cases', [RequestController::class, 'index'])->name('cases.index')->middleware('no-cache');
     Route::get('cases-main', [CasesController::class, 'index'])->name('cases-main.index')->middleware('no-cache');
-
-
-
-
     Route::get('cases/{type?}', [RequestController::class, 'index'])->name('cases_by_type')
         ->where('type', 'all|in_progress|completed')
         ->middleware('no-cache');
diff --git a/webpack.mix.js b/webpack.mix.js
index d525298ac9..e26379255a 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -121,11 +121,7 @@ mix
   .js("resources/js/requests/mobile.js", "public/js/requests/mobile.js")
   .js("resources/js/requests/show.js", "public/js/requests")
   .js("resources/js/requests/preview.js", "public/js/requests")
-  
-  
   .js("resources/jscomposition/cases/casesMain/main.js", "public/js/composition/cases/casesMain/main.js")
-  
-
   .js("resources/js/processes/translations/import.js", "public/js/processes/translations")
 
   .js("resources/js/processes-catalogue/index.js", "public/js/processes-catalogue/index.js")

From 90f4a957456f737689313eca4da3633987d1c591 Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Thu, 12 Sep 2024 13:15:03 -0400
Subject: [PATCH 3/4] FOUR-19004: Create a NEW VIEW for cases Part Counters

---
 resources/jscomposition/base/buttons/index.js |  4 +-
 resources/jscomposition/base/cards/index.js   |  6 +-
 .../jscomposition/base/form/Dropdown.vue      | 92 +++++++++++--------
 .../jscomposition/base/table/Pagination.vue   |  7 +-
 .../jscomposition/base/table/TFooter.vue      | 16 ----
 resources/jscomposition/base/table/index.js   |  2 +
 routes/web.php                                |  1 +
 7 files changed, 64 insertions(+), 64 deletions(-)
 delete mode 100644 resources/jscomposition/base/table/TFooter.vue

diff --git a/resources/jscomposition/base/buttons/index.js b/resources/jscomposition/base/buttons/index.js
index 5a6c8fc3a0..a86eca3ca3 100644
--- a/resources/jscomposition/base/buttons/index.js
+++ b/resources/jscomposition/base/buttons/index.js
@@ -1,5 +1,3 @@
 import OutlineButton from "./OutlineButton.vue";
 
-export {
-    OutlineButton
-}
\ No newline at end of file
+export { OutlineButton };
diff --git a/resources/jscomposition/base/cards/index.js b/resources/jscomposition/base/cards/index.js
index c8901f3cd2..e14a1b5958 100644
--- a/resources/jscomposition/base/cards/index.js
+++ b/resources/jscomposition/base/cards/index.js
@@ -1,5 +1,3 @@
-import ThreeSectionCard from "./ThreeSectionCard.vue"
+import ThreeSectionCard from "./ThreeSectionCard.vue";
 
-export {
-    ThreeSectionCard
-}
\ No newline at end of file
+export { ThreeSectionCard };
diff --git a/resources/jscomposition/base/form/Dropdown.vue b/resources/jscomposition/base/form/Dropdown.vue
index cbf7e11ebb..d203f60b34 100644
--- a/resources/jscomposition/base/form/Dropdown.vue
+++ b/resources/jscomposition/base/form/Dropdown.vue
@@ -1,16 +1,15 @@
 <template>
-  <div class="t-relative" >
+  <div class="t-relative">
     <slot
       v-bind="{
         toogleShow,
-        data
+        data,
       }"
-      
       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>
+        <span>{{ data?.label || data?.value || "" }} </span>
 
         <i class="fas fa-chevron-down" />
       </button>
@@ -19,25 +18,27 @@
     <transition :name="animation">
       <div
         v-if="show"
-        :class="'bg-'+color+'-500'"
+        :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"
+            v-for="(option, index) in optionsModel"
             :key="index"
             class="hover:bg-gray-200"
             :class="{
-              'bg-gray-300': option?.value === data?.value
+              'bg-gray-300': option?.value === data?.value,
             }"
             @click.prevent.stop="onClick(option, index)">
             <slot
               name="option"
               v-bind="{
-                option
+                option,
               }">
               <span
                 class="flex py-2 px-4 transition duration-300"
-                :class="'theme-'+color">{{ option.label || option.value }}</span>
+                :class="'theme-' + color"
+                >{{ option.label || option.value }}</span
+              >
             </slot>
           </li>
         </ul>
@@ -48,18 +49,22 @@
 
 <script>
 import {
-  defineComponent, ref, computed, onMounted, onUnmounted, nextTick,
-} from 'vue';
+  defineComponent,
+  ref,
+  computed,
+  onMounted,
+  onUnmounted,
+} from "vue";
 
 export default defineComponent({
   props: {
     color: {
       type: String,
-      default: () => 'blue',
+      default: () => "blue",
     },
     animation: {
       type: String,
-      default: () => 'fade',
+      default: () => "fade",
     },
     // Example input options {"label":"Label 1" , "value": "1"}
     options: {
@@ -71,7 +76,7 @@ export default defineComponent({
       default: () => null,
     },
   },
-  emits: ['update:modelValue', 'change'],
+  emits: ["update:modelValue", "change"],
   setup(props, { emit }) {
     const show = ref(false);
     const count = ref(0);
@@ -81,7 +86,7 @@ export default defineComponent({
         return props.modelValue;
       },
       set(value) {
-        emit('update:modelValue', value);
+        emit("update:modelValue", value);
       },
     });
 
@@ -90,7 +95,7 @@ export default defineComponent({
         return props.options;
       },
       set(val) {
-        emit('update:options', val);
+        emit("update:options", val);
       },
     });
 
@@ -98,8 +103,7 @@ export default defineComponent({
       show.value = false;
       data.value = option;
 
-
-      emit('change', option);
+      emit("change", option);
     };
 
     const addBodyListener = () => {
@@ -111,11 +115,11 @@ export default defineComponent({
     };
 
     onMounted(() => {
-      document.body.addEventListener('click', addBodyListener);
+      document.body.addEventListener("click", addBodyListener);
     });
 
     onUnmounted(() => {
-      document.body.removeEventListener('click', addBodyListener);
+      document.body.removeEventListener("click", addBodyListener);
     });
 
     return {
@@ -132,59 +136,71 @@ export default defineComponent({
 
 <style scoped>
 /* Animations */
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .1s;
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.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 .5s;
+.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 {
+.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 .5s;
+.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 {
+.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 .5s;
+.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 {
+.slide-in-left-enter,
+.slide-in-left-leave-to {
   opacity: 0;
   transform: translateX(-20px);
 }
 
 /* Scale animation*/
-.scale-enter-active, .scale-leave-active {
-  transition: all .5s;
+.scale-enter-active,
+.scale-leave-active {
+  transition: all 0.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 .5s;
+.rotate-enter-active,
+.rotate-leave-active {
+  transition: all 0.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/table/Pagination.vue b/resources/jscomposition/base/table/Pagination.vue
index e337041d4f..37fa4d9dff 100644
--- a/resources/jscomposition/base/table/Pagination.vue
+++ b/resources/jscomposition/base/table/Pagination.vue
@@ -1,5 +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">
+  <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">
     <div>
       <svg
         class="tw-h-5 tw-w-5"
@@ -27,7 +28,8 @@
     </div>
 
     <div>
-      <div class="tw-flex tw-border-1 tw-rounded-md tw-ring-1 tw-ring-inset tw-ring-gray-300">
+      <div
+        class="tw-flex tw-border-1 tw-rounded-md tw-ring-1 tw-ring-inset tw-ring-gray-300">
         <input
           class="tw-block tw-flex-1 tw-border-0 tw-bg-transparent tw-pl-1 focus-visible:tw-outline-none placeholder:tw-text-gray-400"
           placeholder="1" />
@@ -78,4 +80,3 @@ export default defineComponent({
   },
 });
 </script>
-<style lang=""></style>
diff --git a/resources/jscomposition/base/table/TFooter.vue b/resources/jscomposition/base/table/TFooter.vue
deleted file mode 100644
index 6c5177e3ea..0000000000
--- a/resources/jscomposition/base/table/TFooter.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-export default defineComponent({
- setup(){
-    return {}
- }
-});
-</script>
-
-<style>
-
-</style>
\ No newline at end of file
diff --git a/resources/jscomposition/base/table/index.js b/resources/jscomposition/base/table/index.js
index 6183b1cc26..9a2e23b1cf 100644
--- a/resources/jscomposition/base/table/index.js
+++ b/resources/jscomposition/base/table/index.js
@@ -4,4 +4,6 @@ import TCell from "./TCell.vue";
 import THeader from "./THeader.vue";
 import TRow from "./TRow.vue";
 
+export default {};
+
 export { BaseTable, Pagination, TCell, THeader, TRow };
diff --git a/routes/web.php b/routes/web.php
index e41cd225e4..79f9f40450 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -137,6 +137,7 @@
     Route::post('/keep-alive', [LoginController::class, 'keepAlive'])->name('keep-alive');
     // Cases
     Route::get('cases', [RequestController::class, 'index'])->name('cases.index')->middleware('no-cache');
+    // This is a temporary API the engine team will create the API
     Route::get('cases-main', [CasesController::class, 'index'])->name('cases-main.index')->middleware('no-cache');
     Route::get('cases/{type?}', [RequestController::class, 'index'])->name('cases_by_type')
         ->where('type', 'all|in_progress|completed')

From 90d1ab5e7adf2a1ab16c98992917336b51160c7e Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Thu, 12 Sep 2024 13:19:23 -0400
Subject: [PATCH 4/4] FOUR-19004: Create a NEW VIEW for cases Part Counters

---
 resources/views/cases/casesMain.blade.php | 2 --
 resources/views/layouts/layout.blade.php  | 1 +
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/resources/views/cases/casesMain.blade.php b/resources/views/cases/casesMain.blade.php
index 9cc846d4de..96c49d4dcb 100644
--- a/resources/views/cases/casesMain.blade.php
+++ b/resources/views/cases/casesMain.blade.php
@@ -1,7 +1,5 @@
 @extends('layouts.layout')
 
-<link href="{{ mix('css/tailwind.css') }}" rel="stylesheet">
-
 @section('title')
 @endsection
 
diff --git a/resources/views/layouts/layout.blade.php b/resources/views/layouts/layout.blade.php
index 2fd4356d4c..301ddc5189 100644
--- a/resources/views/layouts/layout.blade.php
+++ b/resources/views/layouts/layout.blade.php
@@ -39,6 +39,7 @@
     <link rel="icon" type="image/png" sizes="16x16" href="{{ \ProcessMaker\Models\Setting::getFavicon() }}">
     <link href="{{ mix('css/app.css') }}" rel="stylesheet">
     <link href="{{ mix('css/sidebar.css') }}" rel="stylesheet">
+    <link href="{{ mix('css/tailwind.css') }}" rel="stylesheet">
     <link href="/css/bpmn-symbols/css/bpmn.css" rel="stylesheet">
     @yield('css')
     <script type="text/javascript">