Restructure omni services and add Chatwoot research snapshot

research/chatwoot/app/javascript/dashboard/components/widgets/TableFooterPagination.vue

@@ -0,0 +1,108 @@
+<script setup>
+import { computed } from 'vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  totalPages: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits(['pageChange']);
+const hasLastPage = computed(
+  () => props.currentPage === props.totalPages || props.totalPages === 1
+);
+const hasFirstPage = computed(() => props.currentPage === 1);
+const hasNextPage = computed(() => props.currentPage === props.totalPages);
+const hasPrevPage = computed(() => props.currentPage === 1);
+
+function onPageChange(newPage) {
+  emit('pageChange', newPage);
+}
+
+const onNextPage = () => {
+  if (!onNextPage.value) {
+    onPageChange(props.currentPage + 1);
+  }
+};
+const onPrevPage = () => {
+  if (!hasPrevPage.value) {
+    onPageChange(props.currentPage - 1);
+  }
+};
+const onFirstPage = () => {
+  if (!hasFirstPage.value) {
+    onPageChange(1);
+  }
+};
+const onLastPage = () => {
+  if (!hasLastPage.value) {
+    onPageChange(props.totalPages);
+  }
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center h-8 outline outline-1 outline-n-weak rounded-lg"
+  >
+    <NextButton
+      faded
+      sm
+      slate
+      icon="i-lucide-chevrons-left"
+      class="ltr:rounded-l-lg ltr:rounded-r-none rtl:rounded-r-lg rtl:rounded-l-none"
+      :disabled="hasFirstPage"
+      @click="onFirstPage"
+    />
+    <div class="flex items-center justify-center bg-n-slate-9/10 h-full">
+      <div class="w-px h-4 rounded-sm bg-n-strong" />
+    </div>
+    <NextButton
+      faded
+      sm
+      slate
+      icon="i-lucide-chevron-left"
+      class="rounded-none"
+      :disabled="hasPrevPage"
+      @click="onPrevPage"
+    />
+    <div
+      class="flex items-center gap-3 px-3 tabular-nums bg-n-slate-9/10 h-full"
+    >
+      <span class="text-sm text-n-slate-12">
+        {{ currentPage }}
+      </span>
+      <span class="text-n-slate-11">/</span>
+      <span class="text-sm text-n-slate-11">
+        {{ totalPages }}
+      </span>
+    </div>
+    <NextButton
+      faded
+      sm
+      slate
+      icon="i-lucide-chevron-right"
+      class="rounded-none"
+      :disabled="hasNextPage"
+      @click="onNextPage"
+    />
+    <div class="flex items-center justify-center bg-n-slate-9/10 h-full">
+      <div class="w-px h-4 rounded-sm bg-n-strong" />
+    </div>
+    <NextButton
+      faded
+      sm
+      slate
+      icon="i-lucide-chevrons-right"
+      class="ltr:rounded-r-lg ltr:rounded-l-none rtl:rounded-l-lg rtl:rounded-r-none"
+      :disabled="hasLastPage"
+      @click="onLastPage"
+    />
+  </div>
+</template>