Restructure omni services and add Chatwoot research snapshot

research/chatwoot/app/javascript/dashboard/components-next/table/BaseTable.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  headers: {
+    type: Array,
+    default: () => [],
+  },
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  noDataMessage: {
+    type: String,
+    default: '',
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const hasHeaderSlot = computed(() => !!props.headers.length);
+const showHeaders = computed(
+  () => hasHeaderSlot.value && props.items.length > 0
+);
+</script>
+
+<template>
+  <div class="w-full">
+    <table class="min-w-full table-auto divide-y divide-n-weak">
+      <thead v-if="showHeaders" class="border-t border-n-weak">
+        <tr>
+          <th
+            v-for="(header, index) in headers"
+            :key="index"
+            class="py-4 ltr:pr-4 rtl:pl-4 text-start text-heading-3 text-n-slate-12 capitalize"
+          >
+            <slot :name="`header-${index}`" :header="header">
+              {{ header }}
+            </slot>
+          </th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-n-weak text-n-slate-11">
+        <template v-if="items.length">
+          <slot name="row" :items="items" />
+        </template>
+        <tr v-else-if="noDataMessage && !loading">
+          <td
+            :colspan="headers.length || 1"
+            class="py-20 text-center text-body-main !text-base text-n-slate-11"
+          >
+            {{ noDataMessage }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>