fix: perms for inbox card

app/javascript/dashboard/components-next/captain/assistant/InboxCard.vue

@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n';
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+import Policy from 'dashboard/components/policy.vue';
 import { INBOX_TYPES, getInboxIconByType } from 'dashboard/helper/inbox';
 
 const props = defineProps({
@@ -76,8 +77,9 @@ const handleAction = ({ action, value }) => {
         {{ inboxName }}
       </span>
       <div class="flex items-center gap-2">
-        <div
+        <Policy
           v-on-clickaway="() => toggleDropdown(false)"
+          :permissions="['administrator']"
           class="relative flex items-center group"
         >
           <Button
@@ -93,7 +95,7 @@ const handleAction = ({ action, value }) => {
             class="mt-1 ltr:right-0 rtl:left-0 top-full"
             @action="handleAction($event)"
           />
-        </div>
+        </Policy>
       </div>
     </div>
   </CardLayout>

app/javascript/dashboard/routes/dashboard/captain/assistants/inboxes/Index.vue

@@ -6,11 +6,11 @@ import {
   useStoreGetters,
 } from 'dashboard/composables/store';
 import { useRoute } from 'vue-router';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 import BackButton from 'dashboard/components/widgets/BackButton.vue';
 import DeleteDialog from 'dashboard/components-next/captain/pageComponents/DeleteDialog.vue';
 import PageLayout from 'dashboard/components-next/captain/PageLayout.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import ConnectInboxDialog from 'dashboard/components-next/captain/pageComponents/inbox/ConnectInboxDialog.vue';
 import InboxCard from 'dashboard/components-next/captain/assistant/InboxCard.vue';
 import InboxPageEmptyState from 'dashboard/components-next/captain/pageComponents/emptyStates/InboxPageEmptyState.vue';
@@ -67,20 +67,16 @@ onMounted(() =>
 </script>
 
 <template>
-  <div
-    v-if="isFetchingAssistant"
-    class="flex items-center justify-center py-10 text-n-slate-11"
-  >
-    <Spinner />
-  </div>
   <PageLayout
-    v-else
     :button-label="$t('CAPTAIN.INBOXES.ADD_NEW')"
     :button-policy="['administrator']"
+    :is-fetching="isFetchingAssistant || isFetching"
+    :is-empty="!captainInboxes.length"
+    :feature-flag="FEATURE_FLAGS.CAPTAIN"
     :show-pagination-footer="false"
     @click="handleCreate"
   >
-    <template #headerTitle>
+    <template v-if="!isFetchingAssistant" #headerTitle>
       <div class="flex flex-row items-center gap-4">
         <BackButton compact />
         <span class="flex items-center gap-1 text-lg">
@@ -90,13 +86,12 @@ onMounted(() =>
         </span>
       </div>
     </template>
-    <div
-      v-if="isFetching"
-      class="flex items-center justify-center py-10 text-n-slate-11"
-    >
-      <Spinner />
-    </div>
-    <div v-else-if="captainInboxes.length" class="flex flex-col gap-4">
+
+    <template #emptyState>
+      <InboxPageEmptyState @click="handleCreate" />
+    </template>
+
+    <div class="flex flex-col gap-4">
       <InboxCard
         v-for="captainInbox in captainInboxes"
         :id="captainInbox.id"
@@ -106,8 +101,6 @@ onMounted(() =>
       />
     </div>
 
-    <InboxPageEmptyState v-else @click="handleCreate" />
-
     <DeleteDialog
       v-if="selectedInbox"
       ref="disconnectInboxDialog"