feat: Implement Empty State UI for Captain Pages (#10696)

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

@@ -7,6 +7,7 @@ import DeleteDialog from 'dashboard/components-next/captain/pageComponents/Delet
 import PageLayout from 'dashboard/components-next/captain/PageLayout.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import CreateAssistantDialog from 'dashboard/components-next/captain/pageComponents/assistant/CreateAssistantDialog.vue';
+import AssistantPageEmptyState from 'dashboard/components-next/captain/pageComponents/emptyStates/AssistantPageEmptyState.vue';
 import { useRouter } from 'vue-router';
 
 const router = useRouter();
@@ -94,7 +95,7 @@ onMounted(() => store.dispatch('captainAssistants/get'));
       />
     </div>
 
-    <div v-else>{{ 'No assistants found' }}</div>
+    <AssistantPageEmptyState v-else @click="handleCreate" />
 
     <DeleteDialog
       v-if="selectedAssistant"

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

@@ -13,6 +13,7 @@ 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';
 
 const store = useStore();
 const dialogType = ref('');
@@ -104,7 +105,7 @@ onMounted(() =>
       />
     </div>
 
-    <div v-else>{{ 'There are no connected inboxes' }}</div>
+    <InboxPageEmptyState v-else @click="handleCreate" />
 
     <DeleteDialog
       v-if="selectedInbox"

app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue

@@ -9,6 +9,8 @@ import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import RelatedResponses from 'dashboard/components-next/captain/pageComponents/document/RelatedResponses.vue';
 import CreateDocumentDialog from 'dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.vue';
 import AssistantSelector from 'dashboard/components-next/captain/pageComponents/AssistantSelector.vue';
+import DocumentPageEmptyState from 'dashboard/components-next/captain/pageComponents/emptyStates/DocumentPageEmptyState.vue';
+
 const store = useStore();
 
 const uiFlags = useMapGetter('captainDocuments/getUIFlags');
@@ -30,6 +32,12 @@ const showCreateDialog = ref(false);
 const createDocumentDialog = ref(null);
 const relationQuestionDialog = ref(null);
 
+const shouldShowAssistantSelector = computed(() => {
+  if (assistants.value.length === 0) return false;
+
+  return !isFetching.value;
+});
+
 const handleShowRelatedDocument = () => {
   showRelatedResponses.value = true;
   nextTick(() => relationQuestionDialog.value.dialogRef.open());
@@ -95,7 +103,7 @@ onMounted(() => {
     @update:current-page="onPageChange"
     @click="handleCreateDocument"
   >
-    <div v-if="!isFetching" class="mb-4 -mt-3 flex gap-3">
+    <div v-if="shouldShowAssistantSelector" class="mb-4 -mt-3 flex gap-3">
       <AssistantSelector
         :assistant-id="selectedAssistant"
         @update="handleAssistantFilterChange"
@@ -120,7 +128,8 @@ onMounted(() => {
       />
     </div>
 
-    <div v-else>{{ 'No documents found' }}</div>
+    <DocumentPageEmptyState v-else @click="handleCreateDocument" />
+
     <RelatedResponses
       v-if="showRelatedResponses"
       ref="relationQuestionDialog"

app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue

@@ -13,9 +13,11 @@ import AssistantSelector from 'dashboard/components-next/captain/pageComponents/
 import ResponseCard from 'dashboard/components-next/captain/assistant/ResponseCard.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import CreateResponseDialog from 'dashboard/components-next/captain/pageComponents/response/CreateResponseDialog.vue';
+import ResponsePageEmptyState from 'dashboard/components-next/captain/pageComponents/emptyStates/ResponsePageEmptyState.vue';
 
 const store = useStore();
 const uiFlags = useMapGetter('captainResponses/getUIFlags');
+const assistants = useMapGetter('captainAssistants/getRecords');
 const responseMeta = useMapGetter('captainResponses/getMeta');
 const responses = useMapGetter('captainResponses/getRecords');
 const isFetching = computed(() => uiFlags.value.fetchingList);
@@ -31,6 +33,11 @@ const { t } = useI18n();
 const createDialog = ref(null);
 
 const isStatusFilterOpen = ref(false);
+const shouldShowDropdown = computed(() => {
+  if (assistants.value.length === 0) return false;
+
+  return !isFetching.value;
+});
 
 const statusOptions = computed(() =>
   ['all', 'pending', 'approved'].map(key => ({
@@ -106,7 +113,7 @@ const fetchResponses = (page = 1) => {
   if (selectedAssistant.value !== 'all') {
     filterParams.assistantId = selectedAssistant.value;
   }
-  store.dispatch('captainResponses/get', page);
+  store.dispatch('captainResponses/get', filterParams);
 };
 
 const onPageChange = page => fetchResponses(page);
@@ -138,7 +145,7 @@ onMounted(() => {
     @update:current-page="onPageChange"
     @click="handleCreate"
   >
-    <div v-if="!isFetching" class="mb-4 -mt-3 flex gap-3">
+    <div v-if="shouldShowDropdown" class="mb-4 -mt-3 flex gap-3">
       <OnClickOutside @trigger="isStatusFilterOpen = false">
         <Button
           :label="selectedStatusLabel"
@@ -184,7 +191,7 @@ onMounted(() => {
       />
     </div>
 
-    <div v-else>{{ 'No responses found' }}</div>
+    <ResponsePageEmptyState v-else @click="handleCreate" />
 
     <DeleteDialog
       v-if="selectedResponse"