refactor: consolidate finance workflow modules

web/src/views/AppShellRouteView.vue

@@ -34,6 +34,7 @@
           @new-chat="openAiSidebarNewChat"
           @open-recent="openAiSidebarRecent"
           @rename-conversation="handleAiConversationRename"
+          @prefetch-view="prefetchAppView"
           @logout="handleLogout"
         />
         <SidebarRail
@@ -49,6 +50,7 @@
           @logout="handleLogout"
           @toggle-collapse="toggleSidebarCollapsed"
           @navigate="handleNavigateWithMobileClose"
+          @prefetch-view="prefetchAppView"
         />
       </Transition>
     </div>
@@ -243,24 +245,18 @@ import AiSidebarRail from '../components/layout/AiSidebarRail.vue'
 import SidebarRail from '../components/layout/SidebarRail.vue'
 import TopBar from '../components/layout/TopBar.vue'
 import FilterBar from '../components/layout/FilterBar.vue'
-import AuditView from './AuditView.vue'
-import BudgetCenterView from './BudgetCenterView.vue'
-import DigitalEmployeesView from './DigitalEmployeesView.vue'
-import DocumentsCenterView from './DocumentsCenterView.vue'
-import EmployeeManagementView from './EmployeeManagementView.vue'
-import OverviewView from './OverviewView.vue'
-import PersonalWorkbenchView from './PersonalWorkbenchView.vue'
-import PoliciesView from './PoliciesView.vue'
-import ReceiptFolderView from './ReceiptFolderView.vue'
-import SettingsView from './SettingsView.vue'
-import TravelReimbursementCreateView from './TravelReimbursementCreateView.vue'
-import TravelRequestDetailView from './TravelRequestDetailView.vue'
 
 import { useAppShell } from '../composables/useAppShell.js'
 import { useSystemState } from '../composables/useSystemState.js'
 import { filterNavItemsByAccess, isPlatformAdminUser } from '../utils/accessControl.js'
 import { isBusinessDocumentReference } from '../utils/aiDocumentDetailReference.js'
 import { loadAiWorkbenchConversationHistory, saveAiWorkbenchConversation } from '../utils/aiWorkbenchConversationStore.js'
+import {
+  defineAsyncModalView,
+  defineAsyncRouteView,
+  preloadAppView,
+  scheduleRelatedAppViewPreload
+} from './scripts/appShellAsyncViews.js'
 
 const employeeSummary = ref(null)
 const knowledgeSummary = ref(null)
@@ -300,6 +296,18 @@ const aiSidebarCommandSeq = ref(0)
 const aiSidebarCommand = ref({ seq: 0, type: '', payload: null })
 const aiActiveConversationId = ref('')
 const aiConversationHistory = ref([])
+const AuditView = defineAsyncRouteView('audit')
+const BudgetCenterView = defineAsyncRouteView('budget')
+const DigitalEmployeesView = defineAsyncRouteView('digitalEmployees')
+const DocumentsCenterView = defineAsyncRouteView('documents')
+const EmployeeManagementView = defineAsyncRouteView('employees')
+const OverviewView = defineAsyncRouteView('overview')
+const PersonalWorkbenchView = defineAsyncRouteView('workbench')
+const PoliciesView = defineAsyncRouteView('policies')
+const ReceiptFolderView = defineAsyncRouteView('receiptFolder')
+const SettingsView = defineAsyncRouteView('settings')
+const TravelReimbursementCreateView = defineAsyncModalView('travelCreate')
+const TravelRequestDetailView = defineAsyncRouteView('travelDetail')
 
 function toggleSidebarCollapsed() {
   sidebarCollapsed.value = !sidebarCollapsed.value
@@ -310,6 +318,10 @@ function handleNavigateWithMobileClose(viewId) {
   mobileSidebarOpen.value = false
 }
 
+function prefetchAppView(viewId) {
+  void preloadAppView(viewId).catch(() => {})
+}
+
 function toggleWorkbenchMode() {
   const nextMode = workbenchMode.value === 'ai' ? 'traditional' : 'ai'
   if (nextMode === 'ai') {
@@ -580,4 +592,12 @@ watch(
   },
   { immediate: true }
 )
+
+watch(
+  () => activeView.value,
+  (view) => {
+    scheduleRelatedAppViewPreload(view)
+  },
+  { immediate: true }
+)
 </script>