roa2web-service-auto/src/App.vue

<template>
  <div id="app">
    <!-- Header -->
    <AppHeader
      v-if="authStore.isAuthenticated"
      title="ROA2WEB"
      brand-link="/reports/dashboard"
      :menu-open="menuOpen"
      :companies-store="companyStore"
      :period-store="periodStore"
      :current-user="authStore.currentUser"
      :show-user="false"
      @menu-toggle="menuOpen = !menuOpen"
      @company-changed="handleCompanyChanged"
      @period-changed="handlePeriodChanged"
    />

    <!-- Slide Menu -->
    <SlideMenu
      v-if="authStore.isAuthenticated"
      :is-open="menuOpen"
      :menu-items="enabledMenuItems"
      :current-user="authStore.currentUser"
      @close="menuOpen = false"
      @logout="handleLogout"
    />

    <!-- Main Content -->
    <main class="main-content" :class="{ 'with-navbar': authStore.isAuthenticated }">
      <router-view />
    </main>

    <!-- Global Toast Messages -->
    <Toast position="top-right" />
    <ConfirmDialog />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import AppHeader from '@shared/components/layout/AppHeader.vue'
import SlideMenu from '@shared/components/layout/SlideMenu.vue'
import Toast from 'primevue/toast'
import ConfirmDialog from 'primevue/confirmdialog'
import { createAuthStore } from '@shared/stores/auth.js'
import { createCompaniesStore } from '@shared/stores/companies.js'
import { createAccountingPeriodStore } from '@shared/stores/accountingPeriod.js'
import { menuSections } from '@/config/menu.js'
import { getEnabledMenuSections } from '@/config/features.js'
import axios from 'axios'

const router = useRouter()

// API service for auth and shared endpoints (unified backend)
const authApi = axios.create({
  baseURL: import.meta.env.BASE_URL + 'api',
  headers: { 'Content-Type': 'application/json' }
})

// Add interceptor to inject auth token from localStorage
authApi.interceptors.request.use(config => {
  const token = localStorage.getItem('access_token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

// Store definitions (factories return store definitions)
const useAuthStore = createAuthStore(authApi)
const useCompanyStore = createCompaniesStore(authApi, useAuthStore)
const useAccountingPeriodStore = createAccountingPeriodStore(authApi)

// Store instances (invoke the definitions to get instances)
const authStore = useAuthStore()
const companyStore = useCompanyStore()
const periodStore = useAccountingPeriodStore()

// Menu state
const menuOpen = ref(false)

// Get enabled menu items based on feature flags
const enabledMenuItems = computed(() => {
  return getEnabledMenuSections(menuSections)
})

// Watch for company selection changes and auto-load periods
watch(
  () => companyStore.selectedCompany,
  async (newCompany, oldCompany) => {
    // Only load periods if company actually changed and is valid
    if (newCompany && newCompany.id_firma && newCompany !== oldCompany) {
      console.log('[App] Company changed via watch, loading periods for:', newCompany.id_firma)
      await periodStore.loadPeriods(newCompany.id_firma)
      console.log('[App] Periods auto-loaded successfully')
    }
  },
  { immediate: true } // Run immediately with current value
)

// Initialize auth and load companies on mount
onMounted(async () => {
  console.log('[App] Mounted - initializing auth...')
  await authStore.initializeAuth()
  console.log('[App] Auth initialized, isAuthenticated:', authStore.isAuthenticated)

  // If authenticated, load companies immediately
  if (authStore.isAuthenticated) {
    console.log('[App] Loading companies...')
    await companyStore.loadCompanies()
    console.log('[App] Companies loaded, selectedCompany:', companyStore.selectedCompany)
    // Period loading will be triggered by the watcher above
  } else {
    console.log('[App] Not authenticated, skipping company/period loading')
  }
})

// Event handlers
const handleCompanyChanged = async (company) => {
  console.log('[App] Company changed:', company)

  // Load periods for the selected company
  if (company && company.id_firma) {
    console.log('[App] Loading periods for company:', company.id_firma)
    await periodStore.loadPeriods(company.id_firma)
  }
}

const handlePeriodChanged = (period) => {
  console.log('[App] Period changed:', period)
}

const handleLogout = async () => {
  await authStore.logout()
  router.push('/login')
}
</script>

<style>
/* Import shared styles */
@import '@shared/styles/layout/header.css';
@import '@shared/styles/layout/navigation.css';

/* Import global CSS system */
@import './assets/css/main.css';
</style>