roa2web-service-auto/reports-app/frontend/src/App.vue

<template>
  <div id="app">
    <!-- New Navigation System -->
    <DashboardHeader
      v-if="authStore.isAuthenticated"
      @menu-toggle="handleMenuToggle"
      @company-changed="handleCompanyChanged"
    />

    <!-- Hamburger Menu -->
    <HamburgerMenu
      v-if="authStore.isAuthenticated"
      :is-open="menuOpen"
      @close="handleMenuClose"
    />

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

    <!-- Global Toast Messages - positioned below header to avoid covering company selector -->
    <Toast position="top-center" :style="{ top: '80px' }" />

    <!-- Global Confirmation Dialog -->
    <ConfirmDialog />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useAuthStore } from "./stores/auth";
import { useCompanyStore } from "./stores/companies";
import DashboardHeader from "./components/layout/DashboardHeader.vue";
import HamburgerMenu from "./components/layout/HamburgerMenu.vue";

const router = useRouter();
const authStore = useAuthStore();
const companyStore = useCompanyStore();

// Menu state
const menuOpen = ref(false);

// Handle menu toggle
const handleMenuToggle = () => {
  menuOpen.value = !menuOpen.value;
};

// Handle menu close
const handleMenuClose = () => {
  menuOpen.value = false;
};

// Handle company change
const handleCompanyChanged = (company) => {
  console.log('Company changed in App:', company);
};

// Initialize app
onMounted(async () => {
  // Check authentication on app start
  if (authStore.isAuthenticated) {
    try {
      // Load companies if authenticated
      await companyStore.loadCompanies();
    } catch (error) {
      console.error("Failed to load companies:", error);
    }
  }
});
</script>

<style scoped>
#app {
  min-height: 100vh;
  background-color: var(--surface-ground);
}

.main-content {
  transition: all 0.3s ease;
}

.main-content.with-navbar {
  margin-top: 0;
  min-height: calc(100vh - 70px);
}

.main-content:not(.with-navbar) {
  min-height: 100vh;
}
</style>

<style>
/* Global styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    sans-serif;
  background-color: var(--surface-ground);
}

.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

/* Responsive design */
@media (max-width: 768px) {
  .app-container {
    padding: 0.25rem;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .main-content {
    padding: 0;
  }

  .app-container {
    padding: 0;
    max-width: 100vw;
  }
}

/* Custom PrimeVue overrides */
.p-button {
  font-weight: 500;
}

.p-datatable .p-datatable-tbody > tr.invoice-paid {
  background-color: var(--green-50);
  color: var(--green-900);
}

.p-datatable .p-datatable-tbody > tr.invoice-overdue {
  background-color: var(--red-50);
  color: var(--red-900);
}

.p-datatable .p-datatable-tbody > tr.bank-row {
  background-color: var(--blue-50);
}

.p-datatable .p-datatable-tbody > tr.cash-row {
  background-color: var(--yellow-50);
}

/* Status badges */
.status-paid {
  background-color: var(--green-100);
  color: var(--green-900);
}

.status-overdue {
  background-color: var(--red-100);
  color: var(--red-900);
}

.status-pending {
  background-color: var(--yellow-100);
  color: var(--yellow-900);
}
</style>