From 12a5155ad4dae2a474c49a2b37e6ca4a387d0e68 Mon Sep 17 00:00:00 2001
From: Henry Jonas <jonathan.quispe@processmaker.com>
Date: Wed, 24 Sep 2025 11:03:31 -0400
Subject: [PATCH 1/3] FOUR-26661: Implement cases list compoment in the
 Application Dashboard

---
 resources/js/components/shared/index.js       | 3 +++
 resources/jscomposition/system/table/index.js | 2 --
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/shared/index.js b/resources/js/components/shared/index.js
index 2f4de0af4b..1699d26bc3 100644
--- a/resources/js/components/shared/index.js
+++ b/resources/js/components/shared/index.js
@@ -60,6 +60,9 @@ import Recommendations from "../../components/Recommendations.vue"
 import ProgressLoader from "../common/ProgressLoader.vue";
 import AddToBundle from "./AddToBundle.vue";
 
+export * from "../../../jscomposition/base/table/index";
+export * from "../../../jscomposition/system/index";
+
 export {
   AddToProjectModal,
   BasicSearch,
diff --git a/resources/jscomposition/system/table/index.js b/resources/jscomposition/system/table/index.js
index 9694bd1967..a1a9bc585a 100644
--- a/resources/jscomposition/system/table/index.js
+++ b/resources/jscomposition/system/table/index.js
@@ -1,6 +1,5 @@
 import FilterableTable from "./FilterableTable.vue";
 import SortTable from "./SortTable.vue";
-import Pagination from "./Pagination.vue";
 import TablePlaceholder from "./TablePlaceholder.vue";
 
 export * from "./cell/index";
@@ -9,6 +8,5 @@ export * from "./filter/index";
 export {
   FilterableTable,
   SortTable,
-  Pagination,
   TablePlaceholder,
 };

From e9ec0b9491189e5f94404fc9f02b303159d5ac3d Mon Sep 17 00:00:00 2001
From: Henry Jonas <jonathan.quispe@processmaker.com>
Date: Wed, 24 Sep 2025 16:14:52 -0400
Subject: [PATCH 2/3] FOUR-26661: Implement cases list compoment in the
 Application Dashboard

---
 resources/jscomposition/system/table/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/resources/jscomposition/system/table/index.js b/resources/jscomposition/system/table/index.js
index a1a9bc585a..9694bd1967 100644
--- a/resources/jscomposition/system/table/index.js
+++ b/resources/jscomposition/system/table/index.js
@@ -1,5 +1,6 @@
 import FilterableTable from "./FilterableTable.vue";
 import SortTable from "./SortTable.vue";
+import Pagination from "./Pagination.vue";
 import TablePlaceholder from "./TablePlaceholder.vue";
 
 export * from "./cell/index";
@@ -8,5 +9,6 @@ export * from "./filter/index";
 export {
   FilterableTable,
   SortTable,
+  Pagination,
   TablePlaceholder,
 };

From fdecec4e530d133e32fee8b6ebdca416ea8eaba9 Mon Sep 17 00:00:00 2001
From: Henry Jonas <jonathan.quispe@processmaker.com>
Date: Fri, 26 Sep 2025 16:24:09 -0400
Subject: [PATCH 3/3] FOUR-26661: Implement cases list compoment in the
 Application Dashboard

---
 .../system/table/cell/StatusCell.vue          | 56 ++++++++-----------
 1 file changed, 24 insertions(+), 32 deletions(-)

diff --git a/resources/jscomposition/system/table/cell/StatusCell.vue b/resources/jscomposition/system/table/cell/StatusCell.vue
index 085be69c89..74feeeffd8 100644
--- a/resources/jscomposition/system/table/cell/StatusCell.vue
+++ b/resources/jscomposition/system/table/cell/StatusCell.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="tw-flex tw-justify-left">
-    <span
-      :class="`tw-inline-flex tw-items-center tw-text-xs tw-border-1 tw-rounded-lg
+    <span :class="`tw-inline-flex tw-items-center tw-text-xs tw-border-1 tw-rounded-lg
         tw-bg-${color}-100 tw-px-2 tw-py-1 tw-text-${color}-500`">
       {{ label }}
     </span>
   </div>
 </template>
-<script>
-import { defineComponent, computed } from "vue";
+<script setup>
+import { computed } from "vue";
 import { t } from "i18next";
+import { get } from "lodash";
 
-export const statuses = {
+const statuses = {
   DRAFT: {
     color: "red",
     label: `${t("Draft")}`,
@@ -46,34 +46,26 @@ export const statuses = {
   },
 };
 
-export default defineComponent({
-  props: {
-    columns: {
-      type: Array,
-      default: () => [],
-    },
-    column: {
-      type: Object,
-      default: () => ({}),
-    },
-    row: {
-      type: Object,
-      default: () => ({}),
-    },
+const props = defineProps({
+  columns: {
+    type: Array,
+    default: () => [],
   },
-  setup(props, { emit }) {
-    const color = computed(() => (
-      statuses[props.row[props.column.field]].color || statuses.IN_PROGRESS.color
-    ));
-
-    const label = computed(() => (
-      statuses[props.row[props.column.field]].label || statuses.IN_PROGRESS.label
-    ));
-
-    return {
-      color,
-      label,
-    };
+  column: {
+    type: Object,
+    default: () => ({}),
+  },
+  row: {
+    type: Object,
+    default: () => ({}),
   },
 });
+
+const color = computed(() => (
+  statuses[get(props.row, props.column.field)].color || statuses.IN_PROGRESS.color
+));
+
+const label = computed(() => (
+  statuses[get(props.row, props.column.field)].label || statuses.IN_PROGRESS.label
+));
 </script>