fix: resolve white screen crashes and restructure layout hierarchy

- Move NavBar from App.vue to layouts/default.vue to fix nested v-app/v-main
- Replace VSkeletonLoader with v-progress-circular to avoid genStructure crash
- Initialize payment_methods as [] and add fallback in v-select
- Remove duplicate fetchClients call from mounted()
- Add authStore.user check in admin route guard
- Replace window.location.href with router.push for SPA navigation
- Add !important to page-header gradient styles

src/App.vue

@@ -1,19 +1,11 @@
 <template>
   <v-app>
-      <NavBar />
+    <router-view />
-      <v-main>
-          <router-view />
-      </v-main>
   </v-app>
 </template>
 
 <script>
- import NavBar from './components/NavBar.vue';
-
  export default {
    name: 'App',
-   components: {
-     NavBar,
-   },
  }
 </script>

src/components/Purchase.vue

@@ -13,10 +13,15 @@
 
       <!-- Loading -->
       <template v-if="loading">
-        <v-skeleton-loader
+        <v-sheet class="d-flex flex-column align-center justify-center pa-12 rounded-lg" elevation="2">
-          class="mb-4 rounded-lg"
+          <v-progress-circular
-          type="card-heading, list-item-two-line, list-item-two-line"
+            indeterminate
-        ></v-skeleton-loader>
+            color="primary"
+            size="64"
+            width="6"
+          ></v-progress-circular>
+          <p class="text-body-1 text-grey mt-4">Cargando datos...</p>
+        </v-sheet>
       </template>
 
       <template v-else>
@@ -246,7 +251,7 @@
             <v-row align="center">
               <v-col cols="12" md="6">
                 <v-select
-                  :items="payment_methods"
+                  :items="payment_methods || []"
                   v-model="purchase.payment_method"
                   item-title="text"
                   item-value="value"
@@ -337,7 +342,7 @@
        show_alert_purchase: false,
        client_search: '',
        product_search: '',
-       payment_methods: null,
+       payment_methods: [],
        purchase: {
          date: this.getCurrentDate(),
          customer: null,
@@ -471,15 +476,13 @@
      formatPrice(price) {
        return new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP', minimumFractionDigits: 0 }).format(price);
      },
-   },
+    }
-     mounted() {
+  };
-         this.fetchClients();
-     }
- };
 </script>
 <style>
 .page-header {
-  background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
+  background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%) !important;
+  color: white !important;
 }
 
 .product-line:nth-child(odd) {

src/layouts/default.vue

@@ -1,13 +1,14 @@
 <template>
-  <v-app>
+  <div>
+    <NavBar />
     <v-main>
       <router-view />
     </v-main>
-
     <AppFooter />
-  </v-app>
+  </div>
 </template>
 
 <script setup>
-  //
+  import NavBar from '@/components/NavBar.vue';
+  import AppFooter from '@/components/AppFooter.vue';
 </script>

src/router/index.js

@@ -35,7 +35,7 @@ router.beforeEach((to, from, next) => {
 
   if (requiresAuth && !isAuthenticated) {
     next({ path: '/autenticarse', replace: true })
-  } else if (requiresAdmin && !authStore.isAdmin) {
+  } else if (requiresAdmin && !authStore.isAdmin && authStore.user) {
     next({ path: '/', replace: true })
   } else {
     next()

src/services/http.js

@@ -1,5 +1,6 @@
 import axios from 'axios';
 import AuthService from '@/services/auth';
+import router from '@/router';
 
 const http = axios.create({
   baseURL: import.meta.env.VITE_DJANGO_BASE_URL,
@@ -32,7 +33,7 @@ http.interceptors.response.use(
         return http.request(originalRequest);
       } catch (refreshError) {
         AuthService.logout();
-        window.location.href = '/autenticarse';
+        router.push('/autenticarse');
         return Promise.reject(refreshError);
       }
     }