feat: add empty state for captain

app/javascript/dashboard/i18n/locale/en/integrations.json

@@ -15,6 +15,11 @@
       "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again.",
       "ERRORS": {
         "CREATE_INBOX_IDS": "Please select at least one inbox to enable Captain"
+      },
+      "LIST": {
+        "EMPTY_STATE": "There are no inboxes configured with captain. To enable captain, click on the setup.",
+        "TABLE_HEADER": ["Inbox Name", "Type"],
+        "CONFIGURE": "Setup Captain"
       }
     },
     "WEBHOOK": {

app/javascript/dashboard/routes/dashboard/settings/integrations/Captain/CaptainInboxRow.vue

@@ -0,0 +1,37 @@
+<script setup>
+defineProps({
+  inbox: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+defineEmits(['delete']);
+</script>
+
+<template>
+  <tr class="max-w-full py-1">
+    <td
+      class="py-4 pr-4 text-sm w-40 max-w-[10rem] truncate"
+      :title="inbox.name"
+    >
+      {{ inbox.name }}
+    </td>
+    <td class="max-w-lg py-4 pr-4 text-sm truncate" :title="inbox.type">
+      {{ inbox.type }}
+    </td>
+    <td class="flex gap-2 py-4 pr-4 text-sm sm:pr-0 justify-end">
+      <woot-button
+        v-tooltip.top="
+          $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.DELETE_TOOLTIP')
+        "
+        variant="smooth"
+        color-scheme="alert"
+        size="tiny"
+        icon="dismiss-circle"
+        class-names="grey-btn"
+        @click="$emit('delete', app)"
+      />
+    </td>
+  </tr>
+</template>

app/javascript/dashboard/routes/dashboard/settings/integrations/Captain/EmptyState.vue

@@ -0,0 +1,39 @@
+<script setup>
+import CaptainInboxRow from './CaptainInboxRow.vue';
+
+const dummyInboxes = [
+  { name: 'Website Live Chat', type: 'Channel::WebWidget' },
+  { name: 'Email', type: 'Channel::Email' },
+  { name: 'Facebook Messenger', type: 'Channel::Facebook' },
+];
+</script>
+
+<template>
+  <div class="w-full min-h-[12rem] relative">
+    <table class="min-w-full divide-y divide-slate-75 dark:divide-slate-700">
+      <thead>
+        <th
+          v-for="thHeader in $t(
+            'INTEGRATION_SETTINGS.CAPTAIN.LIST.TABLE_HEADER'
+          )"
+          :key="thHeader"
+          class="py-4 pr-4 font-semibold text-left text-slate-700 dark:text-slate-300"
+        >
+          {{ thHeader }}
+        </th>
+      </thead>
+      <tbody class="divide-y divide-slate-50 dark:divide-slate-800">
+        <CaptainInboxRow
+          v-for="inbox in dummyInboxes"
+          :key="inbox.name"
+          :inbox="inbox"
+        />
+      </tbody>
+    </table>
+    <div
+      class="absolute inset-0 flex flex-col items-center justify-center w-full h-full bg-gradient-to-t from-white dark:from-slate-900 to-transparent"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/integrations/Captain/Index.vue

@@ -1,6 +1,12 @@
 <script setup>
+import { computed } from 'vue';
 import IntegrationSettingsLayout from '../Layout.vue';
+import EmptyState from './EmptyState.vue';
 import BaseSettingsHeader from 'dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue';
+
+const isSetup = computed(() => {
+  return false;
+});
 </script>
 
 <template>
@@ -14,11 +20,27 @@ import BaseSettingsHeader from 'dashboard/routes/dashboard/settings/components/B
         :back-button-label="$t('INTEGRATION_SETTINGS.HEADER')"
       >
         <template #actions>
-          <woot-button class="rounded-md button nice" icon="add-circle">
+          <woot-button
+            v-if="isSetup"
+            class="rounded-md button nice"
+            icon="plus-sign"
+          >
             {{ $t('INTEGRATION_SETTINGS.CAPTAIN.HEADER_BTN_TXT') }}
           </woot-button>
         </template>
       </BaseSettingsHeader>
     </template>
+    <EmptyState>
+      <p class="max-w-xs text-sm font-medium text-center">
+        {{ $t('INTEGRATION_SETTINGS.CAPTAIN.LIST.EMPTY_STATE') }}
+      </p>
+      <woot-button
+        v-if="!isSetup"
+        class="rounded-md button nice"
+        icon="plus-sign"
+      >
+        {{ $t('INTEGRATION_SETTINGS.CAPTAIN.LIST.CONFIGURE') }}
+      </woot-button>
+    </EmptyState>
   </IntegrationSettingsLayout>
 </template>