Restructure omni services and add Chatwoot research snapshot

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

@@ -0,0 +1,175 @@
+<script setup>
+import { ref } from 'vue';
+import { BaseTable, BaseTableRow, BaseTableCell } from './index';
+import Button from '../button/Button.vue';
+import Avatar from '../avatar/Avatar.vue';
+import ToggleSwitch from '../switch/Switch.vue';
+
+const automationData = ref([
+  {
+    id: 1,
+    name: 'Welcome Message',
+    description: 'Send welcome message to new contacts',
+    active: true,
+    createdOn: 'Apr 21, 2022',
+  },
+  {
+    id: 2,
+    name: 'Auto-assign to Sales',
+    description: 'Automatically assign sales conversations to sales team',
+    active: false,
+    createdOn: 'May 15, 2022',
+  },
+  {
+    id: 3,
+    name: 'Tag Premium Users',
+    description: 'Add premium tag to conversations from premium users',
+    active: true,
+    createdOn: 'Jun 10, 2022',
+  },
+]);
+
+const agentData = ref([
+  {
+    id: 1,
+    name: 'John Doe',
+    email: 'john@example.com',
+    role: 'Administrator',
+    verified: true,
+    avatarUrl: '',
+  },
+  {
+    id: 2,
+    name: 'Jane Smith',
+    email: 'jane@example.com',
+    role: 'Agent',
+    verified: true,
+    avatarUrl: '',
+  },
+]);
+
+const emptyData = ref([]);
+
+const headers = ['Name', 'Active', 'Created on', 'Actions'];
+const agentHeaders = ['Agent', 'Role', 'Verification', 'Actions'];
+</script>
+
+<template>
+  <Story title="Components/Table" :layout="{ type: 'grid', width: '100%' }">
+    <!-- Basic Table -->
+    <Variant title="Basic Table">
+      <div class="p-4 bg-n-surface-1">
+        <BaseTable :headers="headers" :items="automationData">
+          <template #row="{ items }">
+            <BaseTableRow
+              v-for="automation in items"
+              :key="automation.id"
+              :item="automation"
+            >
+              <template #default>
+                <BaseTableCell>
+                  <div class="flex items-center gap-2 min-w-0 max-w-full">
+                    <span
+                      class="text-body-main text-n-slate-12 truncate min-w-0 flex-1"
+                    >
+                      {{ automation.name }}
+                    </span>
+                    <div class="w-px h-3 rounded-lg bg-n-weak flex-shrink-0" />
+                    <span
+                      class="text-body-main text-n-slate-11 truncate min-w-0 flex-1"
+                    >
+                      {{ automation.description }}
+                    </span>
+                  </div>
+                </BaseTableCell>
+
+                <BaseTableCell>
+                  <div class="flex justify-center">
+                    <ToggleSwitch v-model="automation.active" />
+                  </div>
+                </BaseTableCell>
+
+                <BaseTableCell>
+                  <span
+                    class="text-body-main text-n-slate-12 whitespace-nowrap"
+                  >
+                    {{ automation.createdOn }}
+                  </span>
+                </BaseTableCell>
+
+                <BaseTableCell align="end" class="w-24">
+                  <div class="flex gap-3 justify-end flex-shrink-0">
+                    <Button icon="i-woot-edit-pen" slate sm />
+                    <Button icon="i-woot-bin" slate sm />
+                    <Button icon="i-woot-clone" slate sm />
+                  </div>
+                </BaseTableCell>
+              </template>
+            </BaseTableRow>
+          </template>
+        </BaseTable>
+      </div>
+    </Variant>
+
+    <!-- Table with Avatars -->
+    <Variant title="Table with Avatars">
+      <div class="p-4 bg-n-surface-1">
+        <BaseTable :headers="agentHeaders" :items="agentData">
+          <template #row="{ items }">
+            <BaseTableRow v-for="agent in items" :key="agent.id" :item="agent">
+              <template #default>
+                <BaseTableCell>
+                  <div class="flex items-center gap-3 min-w-0">
+                    <Avatar :user="agent" :size="40" class="flex-shrink-0" />
+                    <div class="flex flex-col min-w-0">
+                      <span class="text-body-main text-n-slate-12 truncate">
+                        {{ agent.name }}
+                      </span>
+                      <span class="text-body-main text-n-slate-11 truncate">
+                        {{ agent.email }}
+                      </span>
+                    </div>
+                  </div>
+                </BaseTableCell>
+
+                <BaseTableCell>
+                  <span
+                    class="text-body-main text-n-slate-12 whitespace-nowrap"
+                  >
+                    {{ agent.role }}
+                  </span>
+                </BaseTableCell>
+
+                <BaseTableCell>
+                  <span
+                    class="text-body-main text-n-slate-12 whitespace-nowrap"
+                  >
+                    {{ agent.verified ? 'Verified' : 'Pending' }}
+                  </span>
+                </BaseTableCell>
+
+                <BaseTableCell align="end" class="w-24">
+                  <div class="flex gap-3 justify-end flex-shrink-0">
+                    <Button icon="i-woot-edit-pen" slate sm />
+                    <Button icon="i-woot-bin" slate sm />
+                  </div>
+                </BaseTableCell>
+              </template>
+            </BaseTableRow>
+          </template>
+        </BaseTable>
+      </div>
+    </Variant>
+
+    <!-- Empty State -->
+    <Variant title="Empty State">
+      <div class="p-4 bg-n-surface-1">
+        <BaseTable
+          :headers="headers"
+          :items="emptyData"
+          no-data-message="No automation rules found"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

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>

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

@@ -0,0 +1,22 @@
+<script setup>
+defineProps({
+  align: {
+    type: String,
+    default: 'start',
+    validator: value => ['start', 'center', 'end'].includes(value),
+  },
+});
+</script>
+
+<template>
+  <td
+    class="py-3 ltr:pr-4 rtl:pl-4 text-body-main"
+    :class="{
+      'text-start': align === 'start',
+      'text-center': align === 'center',
+      'text-end': align === 'end',
+    }"
+  >
+    <slot />
+  </td>
+</template>

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

@@ -0,0 +1,14 @@
+<script setup>
+defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <tr>
+    <slot :item="item" />
+  </tr>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/table/index.js

@@ -0,0 +1,3 @@
+export { default as BaseTable } from './BaseTable.vue';
+export { default as BaseTableRow } from './BaseTableRow.vue';
+export { default as BaseTableCell } from './BaseTableCell.vue';