feat: update page layout

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

@@ -5,7 +5,6 @@ import { useMapGetter, useStore } from 'dashboard/composables/store';
 import AssistantCard from 'dashboard/components-next/captain/assistant/AssistantCard.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 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';
@@ -74,15 +73,15 @@ onMounted(() => store.dispatch('captainAssistants/get'));
     :header-title="$t('CAPTAIN.ASSISTANTS.HEADER')"
     :button-label="$t('CAPTAIN.ASSISTANTS.ADD_NEW')"
     :show-pagination-footer="false"
+    :is-fetching="isFetching"
+    :is-empty="!assistants.length"
     @click="handleCreate"
   >
-    <div
-      v-if="isFetching"
-      class="flex items-center justify-center py-10 text-n-slate-11"
-    >
-      <Spinner />
-    </div>
-    <div v-else-if="assistants.length" class="flex flex-col gap-4">
+    <template #emptyState>
+      <AssistantPageEmptyState @click="handleCreate" />
+    </template>
+
+    <div class="flex flex-col gap-4">
       <AssistantCard
         v-for="assistant in assistants"
         :id="assistant.id"
@@ -95,8 +94,6 @@ onMounted(() => store.dispatch('captainAssistants/get'));
       />
     </div>
 
-    <AssistantPageEmptyState v-else @click="handleCreate" />
-
     <DeleteDialog
       v-if="selectedAssistant"
       ref="deleteAssistantDialog"

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

@@ -106,22 +106,21 @@ onMounted(() => {
     :total-count="documentsMeta.totalCount"
     :current-page="documentsMeta.page"
     :show-pagination-footer="!isFetching && !!documents.length"
+    :is-fetching="isFetching"
+    :is-empty="!documents.length"
     @update:current-page="onPageChange"
     @click="handleCreateDocument"
   >
+    <template #emptyState>
+      <DocumentPageEmptyState @click="handleCreateDocument" />
+    </template>
     <div v-if="shouldShowAssistantSelector" class="mb-4 -mt-3 flex gap-3">
       <AssistantSelector
         :assistant-id="selectedAssistant"
         @update="handleAssistantFilterChange"
       />
     </div>
-    <div
-      v-if="isFetching"
-      class="flex items-center justify-center py-10 text-n-slate-11"
-    >
-      <Spinner />
-    </div>
-    <div v-else-if="documents.length" class="flex flex-col gap-4">
+    <div class="flex flex-col gap-4">
       <DocumentCard
         v-for="doc in documents"
         :id="doc.id"
@@ -134,8 +133,6 @@ onMounted(() => {
       />
     </div>
 
-    <DocumentPageEmptyState v-else @click="handleCreateDocument" />
-
     <RelatedResponses
       v-if="showRelatedResponses"
       ref="relationQuestionDialog"

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

@@ -158,10 +158,16 @@ onMounted(() => {
     :current-page="responseMeta.page"
     :header-title="$t('CAPTAIN.RESPONSES.HEADER')"
     :button-label="$t('CAPTAIN.RESPONSES.ADD_NEW')"
+    :is-fetching="isFetching"
+    :is-empty="!responses.length"
     :show-pagination-footer="!isFetching && !!responses.length"
     @update:current-page="onPageChange"
     @click="handleCreate"
   >
+    <template #emptyState>
+      <ResponsePageEmptyState @click="handleCreate" />
+    </template>
+
     <div v-if="shouldShowDropdown" class="mb-4 -mt-3 flex gap-3">
       <OnClickOutside @trigger="isStatusFilterOpen = false">
         <Button
@@ -186,14 +192,8 @@ onMounted(() => {
         @update="handleAssistantFilterChange"
       />
     </div>
-    <div
-      v-if="isFetching"
-      class="flex items-center justify-center py-10 text-n-slate-11"
-    >
-      <Spinner />
-    </div>
 
-    <div v-else-if="responses.length" class="flex flex-col gap-4">
+    <div class="flex flex-col gap-4">
       <ResponseCard
         v-for="response in responses"
         :id="response.id"
@@ -210,8 +210,6 @@ onMounted(() => {
       />
     </div>
 
-    <ResponsePageEmptyState v-else @click="handleCreate" />
-
     <DeleteDialog
       v-if="selectedResponse"
       ref="deleteDialog"