refactor(ui): introduce shared list detail shells

web/src/views/scripts/ApprovalCenterView.js

@@ -1,7 +1,6 @@
 import { computed, ref, watch } from 'vue'
 
-import TableLoadingState from '../../components/shared/TableLoadingState.vue'
-import TableEmptyState from '../../components/shared/TableEmptyState.vue'
+import EnterpriseListPage from '../../components/shared/EnterpriseListPage.vue'
 import { useApprovalInbox } from '../../composables/useApprovalInbox.js'
 import { useSystemState } from '../../composables/useSystemState.js'
 import { fetchApprovalExpenseClaims } from '../../services/reimbursements.js'
@@ -115,9 +114,8 @@ function buildApprovalRow(request) {
 export default {
   name: 'ApprovalCenterView',
   components: {
-    TravelRequestDetailView,
-    TableLoadingState,
-    TableEmptyState
+    EnterpriseListPage,
+    TravelRequestDetailView
   },
   setup() {
     const { currentUser } = useSystemState()

web/src/views/scripts/ArchiveCenterView.js

@@ -1,7 +1,6 @@
 import { computed, ref } from 'vue'
 
-import TableLoadingState from '../../components/shared/TableLoadingState.vue'
-import TableEmptyState from '../../components/shared/TableEmptyState.vue'
+import EnterpriseListPage from '../../components/shared/EnterpriseListPage.vue'
 import { mapExpenseClaimToRequest } from '../../composables/useRequests.js'
 import { fetchArchivedExpenseClaims } from '../../services/reimbursements.js'
 import {
@@ -92,9 +91,8 @@ function resolveFilterLabel(options, activeValue, fallbackLabel) {
 export default {
   name: 'ArchiveCenterView',
   components: {
-    TravelRequestDetailView,
-    TableLoadingState,
-    TableEmptyState
+    EnterpriseListPage,
+    TravelRequestDetailView
   },
   setup() {
     const activeTab = ref(ARCHIVE_TAB_ALL)

web/src/views/scripts/LogsView.js

@@ -1,8 +1,7 @@
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
-import EnterpriseSelect from '../../components/shared/EnterpriseSelect.vue'
-import TableLoadingState from '../../components/shared/TableLoadingState.vue'
+import EnterpriseListPage from '../../components/shared/EnterpriseListPage.vue'
 import { useSystemState } from '../../composables/useSystemState.js'
 import { useToast } from '../../composables/useToast.js'
 import { fetchSystemLogEntries } from '../../services/systemLogs.js'
@@ -62,8 +61,7 @@ function resolveSystemOutcomeTone(outcome) {
 export default {
   name: 'LogsView',
   components: {
-    EnterpriseSelect,
-    TableLoadingState
+    EnterpriseListPage
   },
   emits: ['summary-change'],
   setup(_, { emit }) {

web/src/views/scripts/RequestsView.js

@@ -1,8 +1,6 @@
 import { computed, ref, watch } from 'vue'
 
-import EnterpriseSelect from '../../components/shared/EnterpriseSelect.vue'
-import TableLoadingState from '../../components/shared/TableLoadingState.vue'
-import TableEmptyState from '../../components/shared/TableEmptyState.vue'
+import EnterpriseListPage from '../../components/shared/EnterpriseListPage.vue'
 import { normalizeRequestForUi } from '../../utils/requestViewModel.js'
 
 function extractRowDate(value) {
@@ -13,9 +11,7 @@ function extractRowDate(value) {
 export default {
   name: 'RequestsView',
   components: {
-    EnterpriseSelect,
-    TableLoadingState,
-    TableEmptyState
+    EnterpriseListPage
   },
   props: {
     filteredRequests: { type: Array, required: true },