feat: update package-lock.json

.env.example

@@ -1,2 +0,0 @@
-VITE_API_IMPLEMENTATION=django
-VITE_DJANGO_BASE_URL=http://localhost:7000

.gitignore

@@ -5,7 +5,6 @@ node_modules
 # local env files
 .env.local
 .env.*.local
-.env
 
 # Log files
 npm-debug.log*
@@ -26,7 +25,3 @@ pnpm-debug.log*
 /.eslintrc-auto-import.json
 /.eslintrc.js
 /.vite/
-
-# Deploy environment files
-deploy/.env.staging
-deploy/.env.production

AGENTS.md

@@ -1,114 +0,0 @@
-# Don Confiao - Frontend
-
-## Tech Stack
-- **Framework:** Vue 3 (Composition API)
-- **UI Library:** Vuetify 3
-- **Routing:** Vue Router 4 (auto-routes con `unplugin-vue-router`)
-- **State:** Pinia
-- **HTTP:** Axios
-- **Build:** Vite
-- **Linting:** ESLint
-
-## Project Structure
-```
-src/
-├── assets/          # Imágenes, iconos estáticos
-├── components/     # Componentes Vue reutilizables
-├── layouts/         # Layouts de página
-├── pages/          # Vistas (auto-routed desde文件名)
-├── plugins/        # Configuración de Vuetify, etc.
-├── router/         # Configuración de rutas
-├── services/       # API services (auth.js, etc.)
-│   ├── api.js                 # Clase wrapper que делегат methods
-│   ├── api-implementation.js # Factory que selecciona implementación
-│   ├── auth.js                # Manejo de auth (login, tokens JWT)
-│   ├── django-api.js         # Implementación de API para Django
-│   └── http.js               # Axios instance con interceptors
-├── stores/         # Pinia stores
-└── styles/         # SCSS settings
-```
-
-## Important Conventions
-
-### Auto-imports
-- Componentes en `src/components/` se auto-importan por nombre
-- Los archivos en `src/pages/*.vue` se routing automáticamente via `unplugin-vue-router`
-- Alias `@` = `src/`
-
-### Pages (CRITICAL)
-**Siempre importar componentes en los archivos de página:**
-```vue
-<template>
-  <MiComponente />
-</template>
-
-<script setup>
-import MiComponente from '@/components/MiComponente.vue';
-</script>
-```
-
-### Componentes
-- Usar Composition API (`<script setup>` o `export default { }`)
-- Naming: PascalCase (ej: `LoginDialog.vue`, `CartGrid.vue`)
-- Componentes de página van en `pages/`, componentes reutilizables en `components/`
-
-### Servicios API
-- Ubicación: `src/services/`
-- Usar Axios para HTTP requests
-- JWT tokens en localStorage (`access_token`, `refresh_token`)
-- La API se inyecta globalmente via `app.provide('api', api)` y se usa con `inject('api')`
-
-### Routing
-- Rutas automáticas basadas en archivos en `src/pages/`
-- No requiere configuración manual en `router/index.js`
-
-## Environment Variables
-- `VITE_DJANGO_BASE_URL` - URL del backend Django
-
-## Commands
-```bash
-npm run dev      # Desarrollo (puerto 3000)
-npm run build    # Producción
-npm run preview  # Preview build
-npm run lint     # ESLint fix
-```
-
-## Common Issues
-1. **Página en blanco:** Verificar que los componentes en `src/pages/*.vue` tengan import explícito
-2. **Errores de lint:** Ejecutar `npm run lint`
-
-## Git Commits
-**Antes de hacer commit:**
-1. **SIEMPRE pedir permiso al usuario antes de hacer commit**
-2. Mostrar resumen de los cambios que se incluirán
-
-**Formato de mensajes:**
-- Usar prefijo `#<numero>` para referenciar el issue (ej: `#28 feat: add login` donde #28 es el número del issue en GitHub/GitLab)
-- Prefijos válidos: `feat`, `fix`, `chore`, `docs`, `refactor`, `style`
-
-## Análisis del Proyecto
-
-### Flujo de Autenticación
-1. **Login:** `AuthService.login(credentials)` → obtiene JWT tokens → guarda en localStorage
-2. **Token:** Se envía en headers via interceptor en `http.js` (`Authorization: Bearer <token>`)
-3. **Refresh:** El interceptor renueva automáticamente el token si expira (401)
-4. **Logout:** `AuthService.logout()` → limpia localStorage
-
-### Estructura de API
-- `api.js`: Interfaz genérica con métodos como `getCustomers()`, `getProducts()`, etc.
-- `api-implementation.js`: Factory que selecciona implementación (actualmente solo Django)
-- `django-api.js`: Implementación concreta con endpoints de Django
-
-### Componentes Principales
-- **NavBar.vue**: Barra de navegación con menú de usuario
-- **LoginDialog.vue**: Diálogo de inicio de sesión
-- **Purchase.vue / AdminPurchase.vue**: Componentes de compra
-- **Cart.vue**: Carrito de compras
-- **SummaryPurchase.vue**: Resumen de compra
-
-### Endpoints Django Comunes
-- `/api/token/` - Autenticación (login/refresh)
-- `/users/me/` - Usuario actual
-- `/don_confiao/api/customers/` - Clientes
-- `/don_confiao/api/products/` - Productos
-- `/don_confiao/api/sales/` - Ventas

deploy/.dockerignore

@@ -1,34 +0,0 @@
-# Dependencies
-node_modules
-
-# Build output (will be generated inside container)
-dist
-
-# Git
-.git
-.gitignore
-
-# IDE
-.idea
-.vscode
-
-# Logs
-*.log
-npm-debug.log*
-
-# Environment files (use deploy/.env.staging or .production instead)
-.env
-.env.local
-.env.*.local
-
-# Development
-.vite
-*.Dockerfile
-docker-compose*.yml
-deploy/Dockerfile
-deploy/build.sh
-deploy/.env*
-
-# Misc
-*.md
-LICENSE

deploy/.env.example

@@ -1,2 +0,0 @@
-VITE_API_IMPLEMENTATION=django
-VITE_DJANGO_BASE_URL=http://localhost:7000

deploy/Dockerfile

@@ -1,26 +0,0 @@
-# Stage 1: Build with Node.js
-FROM node:20-alpine AS builder
-
-ARG VITE_DJANGO_BASE_URL
-ARG VITE_API_IMPLEMENTATION
-
-ENV VITE_DJANGO_BASE_URL=$VITE_DJANGO_BASE_URL
-ENV VITE_API_IMPLEMENTATION=$VITE_API_IMPLEMENTATION
-
-WORKDIR /app
-
-COPY package.json package-lock.json ./
-RUN npm ci
-
-COPY . .
-RUN npm run build
-
-# Stage 2: Serve with Nginx
-FROM nginx:alpine
-
-COPY --from=builder /app/dist /usr/share/nginx/html
-COPY deploy/nginx.conf /etc/nginx/conf.d/default.conf
-
-EXPOSE 80
-
-CMD ["nginx", "-g", "daemon off;"]

deploy/build.sh

@@ -1,81 +0,0 @@
-#!/bin/bash
-
-set -e
-
-SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
-PROJECT_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)"
-
-GITEA_REGISTRY="gitea.onecluster.org"
-GITEA_USER="mono"
-
-usage() {
-    echo "Usage: $0 <staging|production> [commit_sha]"
-    echo ""
-    echo "Examples:"
-    echo "  $0 staging           # Build and push staging image"
-    echo "  $0 production        # Build and push production image"
-    echo "  $0 staging abc1234   # Build with specific commit SHA"
-    exit 1
-}
-
-if [ $# -lt 1 ]; then
-    usage
-fi
-
-ENV_TYPE="$1"
-COMMIT_SHA="${2:-$(git -C "$PROJECT_ROOT" rev-parse --short HEAD 2>/dev/null || echo "unknown")}"
-
-case "$ENV_TYPE" in
-    staging)
-        ENV_FILE="$SCRIPT_DIR/.env.staging"
-        IMAGE_NAME="don_confiao_frontend_staging"
-        TAG="latest"
-        ;;
-    production)
-        ENV_FILE="$SCRIPT_DIR/.env.production"
-        IMAGE_NAME="don_confiao_frontend"
-        TAG="latest"
-        ;;
-    *)
-        echo "Error: Invalid environment type '$ENV_TYPE'"
-        usage
-        ;;
-esac
-
-if [ ! -f "$ENV_FILE" ]; then
-    echo "Error: Environment file not found: $ENV_FILE"
-    echo "Please create it based on: $SCRIPT_DIR/.env.example"
-    exit 1
-fi
-
-echo "=== Building $ENV_TYPE image ==="
-echo "Image tag: $TAG"
-echo "Commit SHA: $COMMIT_SHA"
-echo "Environment file: $ENV_FILE"
-
-set -a
-source "$ENV_FILE"
-set +a
-
-BUILD_ARGS="--build-arg VITE_DJANGO_BASE_URL=$VITE_DJANGO_BASE_URL"
-BUILD_ARGS="$BUILD_ARGS --build-arg VITE_API_IMPLEMENTATION=$VITE_API_IMPLEMENTATION"
-
-FULL_IMAGE_NAME="$GITEA_REGISTRY/$GITEA_USER/$IMAGE_NAME"
-
-echo "Building image..."
-docker build \
-    $BUILD_ARGS \
-    -t "$FULL_IMAGE_NAME:$TAG" \
-    -t "$FULL_IMAGE_NAME:$COMMIT_SHA" \
-    -f "$SCRIPT_DIR/Dockerfile" \
-    "$PROJECT_ROOT"
-
-echo ""
-echo "=== Pushing image to registry ==="
-docker push "$FULL_IMAGE_NAME:$TAG"
-docker push "$FULL_IMAGE_NAME:$COMMIT_SHA"
-
-echo ""
-echo "=== Done ==="
-echo "Image: $FULL_IMAGE_NAME:$TAG"
-echo "Commit: $FULL_IMAGE_NAME:$COMMIT_SHA"

deploy/nginx.conf

@@ -1,29 +0,0 @@
-server {
-    listen 80;
-    server_name _;
-    root /usr/share/nginx/html;
-    index index.html;
-
-    # Gzip compression
-    gzip on;
-    gzip_vary on;
-    gzip_min_length 1024;
-    gzip_proxied expired no-cache no-store private auth;
-    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml application/javascript application/json;
-
-    # Cache static assets
-    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
-        expires 1y;
-        add_header Cache-Control "public, immutable";
-    }
-
-    # Vue Router: redirect all non-file requests to index.html
-    location / {
-        try_files $uri $uri/ /index.html;
-    }
-
-    # Security headers
-    add_header X-Frame-Options "SAMEORIGIN" always;
-    add_header X-Content-Type-Options "nosniff" always;
-    add_header X-XSS-Protection "1; mode=block" always;
-}

package.json

@@ -9,7 +9,6 @@
   },
   "dependencies": {
     "@mdi/font": "7.4.47",
-    "axios": "^1.13.5",
     "core-js": "^3.37.1",
     "roboto-fontface": "*",
     "vee-validate": "^4.14.6",

src/components/AdminPurchase.vue

@@ -16,7 +16,7 @@
                 required
                 class="mr-4"
             ></v-autocomplete>
-            <!-- <v-btn color="primary" @click="openModal">Agregar Cliente</v-btn> -->
+            <v-btn color="primary" @click="openModal">Agregar Cliente</v-btn>
             <CreateCustomerModal ref="customerModal" @customerCreated="handleNewCustomer"/>
       </v-col>
       <v-col lg="4">

src/components/CodeDialog.vue

@@ -0,0 +1,51 @@
+<template>
+  <v-dialog v-model="dialog" persistent>
+    <v-card>
+      <v-card-title>
+        Ingrese el código
+      </v-card-title>
+      <v-card-text>
+        <v-form id="code-form" @submit.prevent="verifyCode">
+          <v-text-field v-model="code" label="Código" type="password" autocomplete="off" />
+        </v-form>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn type="submit" form="code-form" color="green">Aceptar</v-btn>
+        <v-btn :to="{ path: '/' }" color="red">Cancelar</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+  import { inject } from 'vue';
+
+  export default {
+    data() {
+      return {
+        api: inject('api'),
+        dialog: true,
+        code: '',
+      };
+    },
+    methods: {
+      verifyCode() {
+        this.api.isValidAdminCode(this.code)
+            .then(data => {
+              if (data['validCode']) {
+                this.$emit('code-verified', true);
+                this.dialog = false;
+              } else {
+                alert('Código incorrecto');
+                this.$emit('code-verified', false);
+              }
+            })
+            .catch(error => {
+              alert('Error al validar el código');
+              this.$emit('code-verified', false);
+              console.error(error);
+            });
+      }
+    },
+  }
+</script>

src/components/Login.vue

@@ -1,70 +0,0 @@
-<template>
-  <h1>Login</h1>
-
-  <v-form ref="loginForm" @submit.prevent="onSubmit">
-    <v-text-field
-      v-model="username"
-      label="Usuario"
-      :rules="[requiredRule]"
-      required
-    />
-    <v-text-field
-      v-model="password"
-      label="Contraseña"
-      type="password"
-      :rules="[requiredRule]"
-      required
-    />
-
-    <v-btn type="submit" color="primary">Entrar</v-btn>
-
-    <v-alert v-if="error" type="error" class="mt-2">{{ error }}</v-alert>
-  </v-form>
-</template>
-
-<script>
-  import AuthService from '@/services/auth';
-
-  export default {
-    name: 'DonConfiao',
-
-    data() {
-      return {
-        username: '',
-        password: '',
-        error: '',
-      };
-    },
-
-    methods: {
-      requiredRule(value) {
-        return !!value || 'Este campo es obligatorio';
-      },
-
-      async onSubmit() {
-        this.error = '';
-
-        const form = this.$refs.loginForm;
-        const isValid = await form.validate();
-
-        if (!isValid) return;
-
-        if (!this.username || !this.password) {
-          this.error = 'Usuario y contraseña son obligatorios';
-          return;
-        }
-
-        try {
-          await AuthService.login({
-            username: this.username,
-            password: this.password,
-          });
-          this.$router.push({ path: '/' });
-        } catch (e) {
-          const msg = e?.response?.data?.message ?? e.message;
-          this.error = msg ?? 'Error al iniciar sesión';
-        }
-      },
-    },
-  };
-</script>

src/components/LoginDialog.vue

@@ -1,69 +0,0 @@
-<template>
-  <v-dialog v-model="show" max-width="400">
-    <v-card>
-      <v-card-title class="headline">Iniciar sesión</v-card-title>
-      <v-card-text>
-        <v-form ref="form" @submit.prevent="onSubmit">
-          <v-text-field
-            v-model="username"
-            label="Usuario"
-            :rules="[required]"
-            required
-          />
-          <v-text-field
-            v-model="password"
-            label="Contraseña"
-            type="password"
-            :rules="[required]"
-            required
-          />
-          <v-alert v-if="error" type="error" class="mt-2">{{ error }}</v-alert>
-        </v-form>
-      </v-card-text>
-
-      <v-card-actions>
-        <v-spacer />
-        <v-btn text @click="show = false">Cancelar</v-btn>
-        <v-btn color="primary" @click="onSubmit">Entrar</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script>
-import AuthService from '@/services/auth';
-
-export default {
-  name: 'LoginDialog',
-  data: () => ({
-    show: false,
-    username: '',
-    password: '',
-    error: '',
-  }),
-  methods: {
-    required(v) {
-      return !!v || 'Campo obligatorio';
-    },
-    async onSubmit() {
-      this.error = '';
-      const form = this.$refs.form;
-      if (!(await form.validate())) return;
-
-      try {
-        await AuthService.login({
-          username: this.username,
-          password: this.password,
-        });
-        this.show = false;
-        this.$emit('login-success');
-      } catch (e) {
-        this.error = e.message ?? 'Error al iniciar sesión';
-      }
-    },
-    open() {
-      this.show = true;
-    },
-  },
-};
-</script>

src/components/Logout.vue

@@ -1,32 +0,0 @@
-<template>
-  <v-container class="d-flex flex-column align-center justify-center" style="height: 100vh;">
-    <v-progress-circular indeterminate color="primary" />
-    <p class="mt-4">Cerrando sesión…</p>
-  </v-container>
-</template>
-
-<script>
-import AuthService from '@/services/auth';
-
-export default {
-  name: 'DonConfiao',
-  mounted() {
-    this.logout();
-  },
-  methods: {
-    logout() {
-      AuthService.logout();
-      this.$router.push({
-        path: '/autenticarse'
-      });
-    },
-  },
-};
-</script>
-
-<style scoped>
-p {
-  font-size: 1.1rem;
-  color: #555;
-}
-</style>

src/components/NavBar.vue

@@ -3,48 +3,11 @@
     <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
     <v-toolbar-title>Menu</v-toolbar-title>
     <v-spacer></v-spacer>
-    <v-btn 
+    <template v-if="$vuetify.display.mdAndUp">
-      v-if="!isAuthenticated" 
+      <v-btn icon="mdi-magnify" variant="text"></v-btn>
-      prepend-icon="mdi-login" 
+      <v-btn icon="mdi-filter" variant="text"></v-btn>
-      variant="text"
+    </template>
-      @click="navigate('/autenticarse')"
+    <v-btn icon="mdi-dots-vertical" variant="text"></v-btn>
-    >
-      Login
-    </v-btn>
-    <v-btn 
-      v-else 
-      variant="text"
-    >
-      <v-menu activator="parent">
-        <v-list>
-          <v-list-item>
-            <v-list-item-title class="font-weight-bold">{{ user?.username }}</v-list-item-title>
-            <v-list-item-subtitle>{{ user?.email }}</v-list-item-subtitle>
-          </v-list-item>
-          <v-divider></v-divider>
-          <v-list-item v-if="user?.first_name || user?.last_name">
-            <v-list-item-title>{{ user?.first_name }} {{ user?.last_name }}</v-list-item-title>
-          </v-list-item>
-          <v-list-item>
-            <v-chip 
-              :color="user?.role === 'administrator' ? 'error' : 'primary'" 
-              size="small"
-            >
-              {{ user?.role === 'administrator' ? 'Administrador' : 'Usuario' }}
-            </v-chip>
-          </v-list-item>
-          <v-divider></v-divider>
-          <v-list-item @click="logout">
-            <v-list-item-title>
-              <v-icon start>mdi-logout</v-icon>
-              Cerrar sesión
-            </v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-menu>
-      <v-icon start>mdi-account</v-icon>
-      {{ user?.username }}
-    </v-btn>
   </v-app-bar>
   <v-navigation-drawer v-model="drawer"
                        :location="$vuetify.display.mobile ? 'bottom' : undefined"
@@ -60,9 +23,9 @@
         :prepend-icon="item.icon"
         @click="navigate(item.route)"
       ></v-list-item>
-      <v-list-item prepend-icon="mdi-cog" title="Administracion" @click="toggleAdminMenu()" v-if="isAuthenticated && isAdmin"></v-list-item>
+      <v-list-item prepend-icon="mdi-cog" title="Administracion" @click="toggleAdminMenu()"></v-list-item>
-      <v-list-item v-if="isAuthenticated && isAdmin && showAdminMenu">
+      <v-list-item>
-        <v-list>
+        <v-list v-if="showAdminMenu">
           <v-list-item
             v-for="item in menuAdminItems"
             :key="item.title"
@@ -78,26 +41,15 @@
 
 <script>
  import trytonIcon from '../assets/icons/tryton-icon.svg';
- import AuthService from '@/services/auth';
- import { useAuthStore } from '@/stores/auth';
- import { inject } from 'vue';
  export default {
      name: 'NavBar',
-     setup() {
-       const authStore = useAuthStore();
-       return { authStore };
-     },
      data: () => ({
          drawer: false,
          group: null,
          showAdminMenu: false,
-         isAuthenticated: false,
-         user: null,
-         api: inject('api'),
          menuItems: [
              { title: 'Inicio', route: '/', icon: 'mdi-home'},
              { title: 'Comprar', route:'/comprar', icon: 'mdi-cart'},
-            { title: 'Ver Catálogo', route: '/catalog', icon: 'mdi-store'},
          ],
          menuAdminItems: [
              { title: 'Cuadrar tarro', route: '/cuadrar_tarro', icon: 'mdi-calculator'},
@@ -109,40 +61,12 @@
              { title: 'Actualizar Ventas Tryton', route: '/sincronizar_ventas_tryton', icon: 'trytonIcon'}
          ],
      }),
-      computed: {
-        isAdmin() {
-          return this.user?.role === 'administrator';
-        }
-      },
-      mounted() {
-       this.checkAuth();
-       if (this.isAuthenticated) {
-         this.fetchUser();
-       }
-     },
      watch: {
          group () {
              this.drawer = false
          },
-          $route() {
-            this.checkAuth();
-            if (this.isAuthenticated && !this.user) {
-              this.fetchUser();
-            }
-          },
      },
      methods: {
-         checkAuth() {
-           this.isAuthenticated = AuthService.isAuthenticated();
-         },
-          async fetchUser() {
-            try {
-              this.user = await this.api.getCurrentUser();
-              this.authStore.setUser(this.user);
-            } catch (error) {
-              console.error('Error fetching user:', error);
-            }
-          },
          navigate(route) {
              this.$router.push(route);
          },
@@ -153,13 +77,6 @@
          toggleAdminMenu() {
              this.showAdminMenu = !this.showAdminMenu;
          },
-         logout() {
-            AuthService.logout();
-            this.isAuthenticated = false;
-            this.user = null;
-            this.authStore.clearUser();
-            this.$router.push('/');
-          },
      }
   }
 </script>

src/components/Purchase.vue

@@ -1,41 +1,11 @@
 <template>
-  <v-container fluid class="pa-4 pa-md-6">
+<v-container>
   <v-form ref="purchase" v-model="valid" @change="onFormChange">
-
-      <!-- Encabezado -->
-      <v-sheet class="page-header d-flex align-center pa-4 pa-md-6 mb-4 rounded-lg">
-        <v-icon start size="40" color="white" class="mr-3">mdi-cart-plus</v-icon>
-        <div>
-          <h1 class="text-h5 text-md-h4 font-weight-bold text-white mb-0">Nueva Compra</h1>
-          <p class="text-body-2 text-white text-medium-emphasis mb-0">Registra una nueva venta en el sistema</p>
-        </div>
-      </v-sheet>
-
-      <!-- Loading -->
-      <template v-if="loading">
-        <v-skeleton-loader
-          class="mb-4 rounded-lg"
-          type="card-heading, list-item-two-line, list-item-two-line"
-        ></v-skeleton-loader>
-      </template>
-
-      <template v-else>
-        <!-- Card: Información del Cliente -->
-        <v-card class="mb-4 rounded-lg" elevation="2">
-          <v-card-item>
-            <template #prepend>
-              <v-icon color="primary" size="36">mdi-account</v-icon>
-            </template>
-            <v-card-title class="font-weight-bold text-h6">Información del Cliente</v-card-title>
-            <v-card-subtitle>Datos básicos de la compra</v-card-subtitle>
-          </v-card-item>
-          <v-divider></v-divider>
-          <v-card-text>
     <v-row>
-              <v-col cols="12" md="6">
+        <v-col>
             <v-autocomplete
                 v-model="purchase.customer"
-                  :items="clients"
+                :items="filteredClients"
                 :search="client_search"
                 no-data-text="No se hallaron clientes"
                 item-title="name"
@@ -44,14 +14,12 @@
                 label="Cliente"
                 :rules="[rules.required]"
                 required
-                  clearable
+                class="mr-4"
-                  variant="outlined"
-                  density="comfortable"
-                  hide-details="auto"
             ></v-autocomplete>
+            <v-btn color="primary" @click="openModal">Agregar Cliente</v-btn>
             <CreateCustomerModal ref="customerModal" @customerCreated="handleNewCustomer"/>
       </v-col>
-              <v-col cols="12" md="3">
+      <v-col lg="4">
           <v-text-field
               v-model="purchase.date"
               label="Fecha"
@@ -59,108 +27,55 @@
               :rules="[rules.required]"
               required
               readonly
-                  variant="outlined"
-                  density="comfortable"
-                  hide-details="auto"
           ></v-text-field>
       </v-col>
-              <v-col cols="12" md="3">
-                <v-btn
-                  variant="tonal"
-                  color="primary"
-                  size="small"
-                  class="mt-1"
-                  prepend-icon="mdi-plus"
-                  @click="openModal"
-                >
-                  Nuevo Cliente
-                </v-btn>
-              </v-col>
      </v-row>
-            <v-row class="mt-0">
-              <v-col cols="12">
     <v-textarea
       v-model="purchase.notes"
       label="Notas"
       rows="2"
-                  variant="outlined"
-                  density="comfortable"
-                  hide-details="auto"
       ></v-textarea>
-              </v-col>
-            </v-row>
-          </v-card-text>
-        </v-card>
-
-        <!-- Card: Productos -->
-        <v-card class="mb-4 rounded-lg" elevation="2">
-          <v-card-item>
-            <template #prepend>
-              <v-icon color="green-darken-1" size="36">mdi-package-variant-closed</v-icon>
-            </template>
-            <v-card-title class="font-weight-bold text-h6">Productos</v-card-title>
-            <v-card-subtitle>Agrega los productos de la compra</v-card-subtitle>
-          </v-card-item>
     <v-divider></v-divider>
-
+    <v-container>
-          <!-- Encabezados de columnas (solo desktop) -->
+      <v-toolbar>
-          <div class="d-none d-md-flex px-6 pt-3 text-caption font-weight-bold text-grey">
+        <v-toolbar-title secondary>Productos</v-toolbar-title>
-            <div class="flex-grow-1 flex-shrink-1" style="min-width:0">Producto</div>
+      </v-toolbar>
-            <div class="mx-2 text-center" style="width:100px; flex-shrink:0">Cantidad</div>
+      <v-container v-for="(line, index) in purchase.saleline_set" :key="line.id">
-            <div class="mx-2 text-end" style="width:110px; flex-shrink:0">Precio</div>
+        <v-row>
-            <div class="mx-2 text-end" style="width:110px; flex-shrink:0">Subtotal</div>
+            <v-col
-            <div style="width:40px; flex-shrink:0"></div>
+                lg="9">
-          </div>
-
-          <v-card-text class="pa-0 pa-md-4">
-            <div
-              v-for="(line, index) in purchase.saleline_set"
-              :key="line.id"
-              class="product-line pa-3 pa-md-2"
-            >
-              <v-row no-gutters align="start" class="flex-md-nowrap">
-                <!-- Producto -->
-                <v-col cols="12" md class="mb-2 mb-md-0">
             <v-autocomplete
               v-model="line.product"
-                    :items="products"
+              :items="filteredProducts"
               :search="product_search"
               @update:modelValue="onProductChange(index)"
               no-data-text="No se hallaron productos"
               item-title="name"
               item-value="id"
+              item-subtitle="Price"
               label="Producto"
               :rules="[rules.required]"
               required
-                    variant="outlined"
-                    density="compact"
-                    hide-details="auto"
-                    class="product-select"
               >
               <template v-slot:item="{ props, item }">
                 <v-list-item v-bind="props" :title="item.raw.name" :subtitle="formatPrice(item.raw.price)"></v-list-item>
               </template>
             </v-autocomplete>
           </v-col>
-
+          <v-col
-                <!-- Cantidad -->
+              lg="2"
-                <v-col cols="4" md="auto" class="pe-1">
+          >
               <v-text-field
                   v-model.number="line.quantity"
-                    label="Cant."
+                  label="Cantidad"
                   type="number"
                   :rules="[rules.required,rules.positive]"
                   required
-                    variant="outlined"
-                    density="compact"
-                    hide-details="auto"
-                    min="0"
-                    class="quantity-field"
               ></v-text-field>
           </v-col>
-
+        </v-row>
-                <!-- Precio -->
+        <v-row>
-                <v-col cols="4" md="auto" class="px-1">
+          <v-col>
             <v-text-field
               v-model.number="line.unit_price"
               label="Precio"
@@ -169,146 +84,62 @@
               prefix="$"
               required
               readonly
-                    variant="outlined"
-                    density="compact"
-                    hide-details="auto"
-                    class="price-field"
               ></v-text-field>
           </v-col>
-
+          <v-col>
-                <!-- Subtotal + UdM -->
+            <v-text-field
-                <v-col cols="4" md="auto" class="ps-1">
+              v-model="line.measuring_unit"
+              label="UdM"
+              persistent-placeholder="true"
+              readonly
+              ></v-text-field>
+          </v-col>
+          <v-col>
             <v-text-field
               type="number"
               :value="calculateSubtotal(line)"
               label="Subtotal"
               prefix="$"
               readonly
-                    variant="outlined"
+                disable
-                    density="compact"
+                persistent-placeholder="true"
-                    hide-details="auto"
-                    class="subtotal-field"
               ></v-text-field>
-                  <div class="text-caption text-grey text-center mt-1 d-md-none">{{ line.measuring_unit || 'Ud' }}</div>
             </v-col>
-
+            <v-col>
-                <!-- Eliminar + UdM desktop -->
+              <v-btn @click="removeLine(index)" color="red">Eliminar</v-btn>
-                <v-col cols="12" md="auto" class="d-flex align-center mt-2 mt-md-0 ps-md-2">
-                  <v-btn
-                    @click="removeLine(index)"
-                    color="error"
-                    variant="text"
-                    icon="mdi-delete"
-                    size="small"
-                    density="comfortable"
-                    class="flex-shrink-0"
-                  ></v-btn>
-                  <span class="text-caption text-grey ms-2 d-none d-md-inline">{{ line.measuring_unit || 'Ud' }}</span>
             </v-col>
         </v-row>
-            </div>
+        <v-alert type="warning" :duration="2000" closable v-model="show_alert_lines">
-
-            <v-alert
-              type="warning"
-              closable
-              v-model="show_alert_lines"
-              density="compact"
-              variant="tonal"
-              class="ma-3"
-            >
           No se puede eliminar la única línea.
         </v-alert>
-
+      </v-container>
-            <v-divider class="my-2"></v-divider>
+        <v-btn @click="addLine" color="blue">Agregar</v-btn>
-
+        </v-container>
-            <v-btn
-              @click="addLine"
-              color="primary"
-              variant="tonal"
-              prepend-icon="mdi-plus"
-              class="mt-2"
-            >
-              Agregar Producto
-            </v-btn>
-          </v-card-text>
-        </v-card>
-
-        <!-- Card: Resumen y Pago -->
-        <v-card v-if="calculateTotal > 0" class="mb-4 rounded-lg" elevation="2">
-          <v-card-item>
-            <template #prepend>
-              <v-icon color="green-darken-2" size="36">mdi-credit-card</v-icon>
-            </template>
-            <v-card-title class="font-weight-bold text-h6">Resumen y Pago</v-card-title>
-          </v-card-item>
         <v-divider></v-divider>
-          <v-card-text>
+        <v-text-field
-            <v-row align="center">
+          :value="calculateTotal"
-              <v-col cols="12" md="6">
+          label="Total"
+          prefix="$"
+          readonly
+          persistent-placeholder="true"
+        ></v-text-field>
+        <v-container v-if="calculateTotal > 0">
           <v-select
             :items="payment_methods"
             v-model="purchase.payment_method"
             item-title="text"
             item-value="value"
-                  label="Método de Pago"
+            label="Pago en"
             :rules="[rules.required]"
             required
-                  variant="outlined"
-                  density="comfortable"
-                  hide-details="auto"
           ></v-select>
-              </v-col>
+          <v-btn @click="openCasherModal" v-if="purchase.payment_method === 'CASH'">Calcular Devuelta</v-btn>
-              <v-col cols="12" md="6" class="text-center text-md-end">
+          <CasherModal :total_purchase="calculateTotal" ref="casherModal"</CasherModal>
-                <div class="text-body-2 text-grey mb-1">Total de la compra</div>
+        </v-container>
-                <div class="total-amount">{{ formatPrice(calculateTotal) }}</div>
+        <v-btn @click="submit" color="green">Comprar</v-btn>
-                <v-btn
+        <v-alert type="error" :duration="2000" closable v-model="show_alert_purchase">
-                  v-if="purchase.payment_method === 'CASH'"
-                  @click="openCasherModal"
-                  color="orange-darken-2"
-                  variant="tonal"
-                  prepend-icon="mdi-cash"
-                  size="small"
-                  class="mt-1"
-                >
-                  Calcular Devuelta
-                </v-btn>
-              </v-col>
-            </v-row>
-          </v-card-text>
-        </v-card>
-
-        <!-- Botón Comprar -->
-        <div class="d-flex flex-column flex-sm-row justify-space-between align-center ga-4 mt-6">
-          <div class="text-caption text-grey">
-            <v-icon start size="small" color="grey">mdi-information</v-icon>
-            Todos los campos marcados con * son obligatorios
-          </div>
-          <v-btn
-            @click="submit"
-            color="green-darken-1"
-            size="x-large"
-            prepend-icon="mdi-cart-check"
-            variant="elevated"
-            class="px-8 submit-btn"
-            :disabled="calculateTotal <= 0"
-          >
-            Comprar
-          </v-btn>
-        </div>
-
-        <v-alert
-          type="error"
-          closable
-          v-model="show_alert_purchase"
-          density="compact"
-          variant="tonal"
-          class="mt-4"
-        >
           Verifique los campos obligatorios.
         </v-alert>
-
-        <CasherModal :total_purchase="calculateTotal" ref="casherModal" />
-      </template>
   </v-form>
 </v-container>
 </template>
@@ -330,7 +161,6 @@
    data() {
      return {
        api: inject('api'),
-       loading: true,
        valid: false,
        form_changed: false,
        show_alert_lines: false,
@@ -349,6 +179,10 @@
            required: value => !!value || 'Requerido.',
            positive: value => value > 0 || 'La cantidad debe ser mayor que 0.',
        },
+         menuItems: [
+             { title: 'Inicio', route: '/'},
+             { title: 'Compras', route:'/compras'},
+         ],
          clients: [],
          products: [],
      };
@@ -358,12 +192,41 @@
      this.fetchProducts();
      this.fetchPaymentMethods();
    },
+   watch: {
+     group () {
+       this.drawer = false
+     },
+   },
+   beforeMount() {
+      window.addEventListener('beforeunload', this.confirmLeave);
+   },
+   beforeDestroy() {
+      window.removeEventListener('beforeunload', this.confirmLeave);
+   },
    computed: {
      calculateTotal() {
        return this.purchase.saleline_set.reduce((total, saleline) => {
          return total + this.calculateSubtotal(saleline);
        }, 0);
      },
+     filteredClients() {
+       return this.clients.filter(client => {
+         if (this.client_search === '') {
+           return [];
+         } else {
+           return client.name.toLowerCase().includes(this.client_search.toLowerCase());
+         }
+       });
+     },
+     filteredProducts() {
+       return this.products.filter(product => {
+         if (this.product_search === '') {
+           return [];
+         } else {
+           return product.name.toLowerCase().includes(this.product_search.toLowerCase());
+         }
+       });
+     },
    },
    methods: {
      openModal() {
@@ -387,6 +250,7 @@
          const today = new Date();
          const gmtOffSet = -5;
          const localDate = new Date(today.getTime() + (gmtOffSet * 60 * 60 * 1000));
+         // Formatear la fecha y hora en el formato YYYY-MM-DDTHH:MM
          const formattedDate = localDate.toISOString().slice(0,16);
          return formattedDate;
      },
@@ -403,9 +267,6 @@
            })
            .catch(error => {
              console.error(error);
-           })
-           .finally(() => {
-             this.loading = false;
            });
      },
        handleNewCustomer(newCustomer){
@@ -469,7 +330,7 @@
        this.$router.push(route);
      },
      formatPrice(price) {
-       return new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP', minimumFractionDigits: 0 }).format(price);
+       return new Intl.NumberFormat('es-ES', { style: 'currency', currency: 'COP' }).format(price);
      },
    },
      mounted() {
@@ -478,28 +339,4 @@
  };
 </script>
 <style>
-.page-header {
-  background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
-}
-
-.product-line:nth-child(odd) {
-  background-color: rgba(0, 0, 0, 0.02);
-}
-
-.total-amount {
-  font-size: 2rem;
-  font-weight: 700;
-  color: rgb(46, 125, 50);
-  line-height: 1.2;
-}
-
-.submit-btn {
-  min-width: 220px;
-}
-
-@media (max-width: 599px) {
-  .total-amount {
-    font-size: 1.6rem;
-  }
-}
 </style>

src/components/SummaryPurchase.vue

@@ -52,7 +52,6 @@
               <td>{{ item.id }}</td>
               <td>{{ item.date }}</td>
               <td><span v-if="item.customer">{{ item.customer.name }}</span></td>
-              <td><span v-if="item.payment_method">{{ item.payment_method }}</span></td>
               <td><span v-if="item.lines">{{ currencyFormat(calculateTotal(item.lines)) }}</span></td>
             </tr>
           </template>
@@ -88,7 +87,6 @@
           {title: 'Compra', value: 'id'},
           {title: 'Fecha', value: 'date'},
           {title: 'Nombre', value: 'customer.name'},
-          {title: 'Método de pago', value: 'payment_method'},
           {title: 'Valor', value: ''},
         ],
       };

src/components/Wellcome.vue

@@ -1,112 +1,34 @@
 <template>
-  <v-container fluid class="pa-0">
+  <v-container >
-    <v-sheet
+    <v-responsive>
-      class="hero-section d-flex align-center justify-center text-center pa-8"
+      <v-toolbar>
-    >
+        <v-toolbar-title>Don Confiao te atiende</v-toolbar-title>
-      <div>
+      </v-toolbar>
-        <v-img
+      <v-card>
-          :src="logo"
+        <v-card-title>Hacer parte de la tienda la ilusión</v-card-title>
-          alt="Don Confiao"
+        <v-card-text>
-          max-width="180"
+          Recuerda que participando de esta tienda le apuestas a la economía solidaria, al mercado justo, a la alimentación sana, al campesinado colombiano y a un mundo mejor.
-          class="mx-auto mb-4"
+        </v-card-text>
-        />
+      </v-card>
-        <h1 class="text-h4 font-weight-bold text-white mb-2">
+
-          Don Confiao te atiende
+      <v-card>
-        </h1>
+        <v-card-title>En desarrollo</v-card-title>
-        <p class="text-subtitle-1 font-italic font-weight-bold text-white">
+        <v-card-text>
-          Economía solidaria, mercado justo, alimentación sana
+          Don confiao apenas esta entendiendo como funciona esta tienda y por ahora <ResaltedText>solo puede atender las compras de contado</ResaltedText>, ya sea en efectivo o consignación.
-        </p>
+
+          <v-alert type="warning">
+            Si no vas a pagar tu compra recuerda que debes hacerlo en la planilla manual</v-alert>
+        </v-card-text>
+      </v-card>
+      <v-card>
+        <v-card-title>A comprar</v-card-title>
+        <v-card-text>
+          El siguiente botón te permitirá registrar tu compra. Cuando finalices te pedimos que ingrese el número de la compra, la fecha y el valor en la planilla física.
+          <div class="text-center">
+            <v-btn :to="{ path: 'comprar' }" color="green">Ir a Comprar</v-btn>
           </div>
-    </v-sheet>
-
-    <v-container class="py-6">
-      <v-row>
-        <v-col cols="12" md="4">
-          <v-card class="h-100" elevation="2">
-            <v-card-item>
-              <template #prepend>
-                <v-icon color="green" size="48">mdi-hand-heart</v-icon>
-              </template>
-              <v-card-title class="font-weight-bold">Nuestra Tienda</v-card-title>
-            </v-card-item>
-            <v-card-text>
-              Hacer parte de la tienda la ilusión. Participando de esta tienda le apuestas a la economía solidaria, al mercado justo, a la alimentación sana, al campesinado colombiano y a un mundo mejor.
         </v-card-text>
       </v-card>
-        </v-col>
+    </v-responsive>
-
-        <v-col cols="12" md="4">
-          <v-card class="h-100" elevation="2">
-            <v-card-item>
-              <template #prepend>
-                <v-icon color="orange-darken-2" size="48">mdi-progress-wrench</v-icon>
-              </template>
-              <v-card-title class="font-weight-bold">En Desarrollo</v-card-title>
-            </v-card-item>
-            <v-card-text>
-              Don Confiao apenas está entendiendo cómo funciona esta tienda y por ahora <ResaltedText>solo puede atender las compras de contado</ResaltedText>, ya sea en efectivo o consignación.
-              <v-alert type="warning" class="mt-3" density="compact">
-                Si no vas a pagar tu compra recuerda que debes hacerlo en la planilla manual
-              </v-alert>
-            </v-card-text>
-          </v-card>
-        </v-col>
-
-        <v-col cols="12" md="4">
-          <v-card class="h-100" elevation="2">
-            <v-card-item>
-              <template #prepend>
-                <v-icon color="blue" size="48">mdi-store</v-icon>
-              </template>
-              <v-card-title class="font-weight-bold">Catálogo</v-card-title>
-            </v-card-item>
-            <v-card-text>
-              Explora nuestro catálogo de productos disponibles. Encuentra todo lo que necesitas y arma tu pedido fácilmente.
-            </v-card-text>
-          </v-card>
-        </v-col>
-      </v-row>
-
-      <v-row class="mt-4">
-        <v-col cols="12" class="text-center">
-          <h2 class="text-h5 font-weight-bold mb-4">¿Qué deseas hacer?</h2>
-          <div class="d-flex flex-wrap justify-center ga-4">
-            <v-btn
-              :to="{ path: 'comprar' }"
-              color="green"
-              size="x-large"
-              prepend-icon="mdi-cart"
-              variant="elevated"
-              class="px-8"
-            >
-              Ir a Comprar
-            </v-btn>
-            <v-btn
-              :to="{ path: 'catalog' }"
-              color="primary"
-              size="x-large"
-              prepend-icon="mdi-store"
-              variant="elevated"
-              class="px-8"
-            >
-              Ver Catálogo
-            </v-btn>
-          </div>
-        </v-col>
-      </v-row>
-    </v-container>
   </v-container>
 </template>
-
-<script setup>
-import ResaltedText from '@/components/ResaltedText.vue'
-import logo from '@/assets/logo.png'
-</script>
-
-<style scoped>
-.hero-section {
-  min-height: 320px;
-  background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 30%, #E65100 100%) !important;
-  color: white;
-}
-</style>

src/components/catalog/Card.vue

@@ -1,501 +0,0 @@
-<template>
-  <v-card class="product-card">
-    <v-row class="product-card-row">
-      <!-- Columna de Imagen -->
-      <v-col cols="12" md="4" class="image-column">
-        <v-img :src="product.img" class="product-img" contain></v-img>
-      </v-col>
-
-      <!-- Columna de Detalles -->
-      <v-col cols="12" md="5" class="details-column">
-        <div class="product-details-content">
-          <v-tooltip location="top" :text="product.name">
-            <template v-slot:activator="{ props }">
-              <v-card-title class="product-name" v-bind="props" :title="product.name">
-                {{ product.name }}
-              </v-card-title>
-            </template>
-          </v-tooltip>
-          <v-card-subtitle class="product-description">{{
-            product.description
-          }}</v-card-subtitle>
-
-          <div class="prices">
-            <div class="price-unit">
-              <span class="price-label">Precio unitario</span>
-              <span class="price-value">{{ currency(product.price) }}</span>
-            </div>
-
-            <div class="price-total">
-              <span class="price-label">Precio total</span>
-              <span class="price-value total"
-                >{{ currency(product.price * product.quantity) }}
-              </span>
-            </div>
-          </div>
-        </div>
-      </v-col>
-
-      <!-- Columna de Controles -->
-      <v-col cols="12" md="3" class="controls-column">
-        <div class="quantity-controls">
-          <v-btn icon small class="qty-btn" @click="decrease(product)">
-            <v-icon small>mdi-minus</v-icon>
-          </v-btn>
-          <v-text-field
-            v-model.number="product.quantity"
-            type="number"
-            min="0"
-            class="quantity-input"
-            dense
-            outlined
-            hide-details
-            aria-label="Cantidad"
-            @input="handleQuantityChange"
-          />
-          <v-btn icon small class="qty-btn qty-btn-add" @click="handleIncrease">
-            <v-icon small>mdi-plus</v-icon>
-          </v-btn>
-        </div>
-      </v-col>
-    </v-row>
-  </v-card>
-</template>
-
-<script>
-export default {
-  props: {
-    product: {
-      type: Object,
-      required: true,
-    },
-    increase: {
-      type: Function,
-      required: true,
-    },
-    decrease: {
-      type: Function,
-      required: true,
-    },
-    currency: {
-      type: Function,
-      required: true,
-    },
-    updateQuantity: {
-      type: Function,
-      required: true,
-    },
-  },
-  methods: {
-    handleIncrease() {
-      this.increase(this.product);
-      this.$emit("add-to-cart", this.product);
-    },
-    handleQuantityChange(value) {
-      this.updateQuantity(this.product);
-      if (this.product.quantity > 0) {
-        this.$emit("add-to-cart", this.product);
-      }
-    },
-  },
-};
-</script>
-
-<style scoped>
-/* ===== ESTILOS BASE - MOBILE FIRST (< 560px) ===== */
-
-/* Card Container */
-.product-card {
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
-  transition: all 0.3s ease;
-  overflow: hidden;
-}
-
-.product-card:hover {
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-  transform: translateY(-2px);
-  border-color: #bdbdbd;
-}
-
-/* Row Container */
-.product-card-row {
-  padding: 12px 8px;
-  margin: 0;
-}
-
-/* === COLUMNA DE IMAGEN === */
-.image-column {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0 0 16px 0;
-}
-
-.product-img {
-  width: 280px;
-  height: 280px;
-  border-radius: 12px;
-  object-fit: cover;
-  background: #fff;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease;
-}
-
-.product-card:hover .product-img {
-  transform: scale(1.03);
-}
-
-/* === COLUMNA DE DETALLES === */
-.details-column {
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.product-details-content {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  width: 100%;
-}
-
-.product-name {
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: #2c3e50;
-  line-height: 1.3;
-  padding: 0;
-  text-align: center;
-  word-break: break-word;
-  max-width: 100%;
-}
-
-.product-description {
-  font-size: 0.8rem;
-  color: #7f8c8d;
-  line-height: 1.4;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-align: center;
-  padding: 0;
-  margin-bottom: 4px;
-}
-
-/* === PRECIOS === */
-.prices {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  align-items: center;
-}
-
-.price-unit,
-.price-total {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  width: 100%;
-}
-
-.price-label {
-  font-size: 0.7rem;
-  color: #95a5a6;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  white-space: nowrap;
-}
-
-.price-value {
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: #2c3e50;
-}
-
-.price-value.total {
-  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
-  color: white;
-  padding: 3px 10px;
-  border-radius: 20px;
-  font-size: 0.95rem;
-  box-shadow: 0 2px 8px rgba(39, 174, 96, 0.3);
-  white-space: nowrap;
-}
-
-/* === COLUMNA DE CONTROLES === */
-.controls-column {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 16px 0 0 0;
-}
-
-.quantity-controls {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  background: #f5f5f5;
-  border-radius: 25px;
-  padding: 6px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}
-
-.quantity-input {
-  max-width: 60px;
-  min-width: 60px;
-}
-
-.quantity-input input {
-  text-align: center;
-  font-weight: 600;
-  font-size: 0.9rem;
-}
-
-.qty-btn {
-  min-width: 32px !important;
-  width: 32px !important;
-  height: 32px !important;
-  border-radius: 50% !important;
-  background: #fff;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  transition: all 0.2s ease;
-  flex-shrink: 0;
-}
-
-.qty-btn:hover {
-  background: #e0e0e0;
-  transform: scale(1.08);
-}
-
-.qty-btn-add {
-  background: #27ae60;
-  color: white;
-}
-
-.qty-btn-add:hover {
-  background: #219a52 !important;
-}
-
-/* ===== RESOLUCIÓN 375-559px (Mobile Standard) ===== */
-@media (min-width: 375px) and (max-width: 559px) {
-  .product-img {
-    width: 300px;
-    height: 300px;
-  }
-  
-  .product-card-row {
-    padding: 14px 10px;
-  }
-  
-  .product-name {
-    font-size: 1rem;
-  }
-  
-  .product-description {
-    font-size: 0.85rem;
-  }
-  
-  .quantity-input {
-    max-width: 65px;
-    min-width: 65px;
-  }
-}
-
-/* ===== RESOLUCIÓN 560-959px (Tablet) ===== */
-@media (min-width: 560px) and (max-width: 959px) {
-  .product-card-row {
-    padding: 16px 12px;
-  }
-
-  .image-column {
-    padding-bottom: 20px;
-  }
-
-  .product-img {
-    width: 300px;
-    height: 300px;
-  }
-
-  .product-details-content {
-    gap: 14px;
-  }
-
-  .product-name {
-    font-size: 1.05rem;
-  }
-
-  .product-description {
-    font-size: 0.85rem;
-  }
-
-  .prices {
-    gap: 10px;
-  }
-
-  .price-label {
-    font-size: 0.75rem;
-  }
-
-  .price-value {
-    font-size: 0.9rem;
-  }
-
-  .price-value.total {
-    font-size: 1rem;
-    padding: 4px 12px;
-  }
-
-  .controls-column {
-    padding-top: 18px;
-  }
-
-  .quantity-input {
-    max-width: 70px;
-    min-width: 70px;
-  }
-
-  .qty-btn {
-    min-width: 34px !important;
-    width: 34px !important;
-    height: 34px !important;
-  }
-}
-
-/* ===== RESOLUCIÓN ≥960px (Desktop) ===== */
-@media (min-width: 960px) {
-  .product-card {
-    border-radius: 12px;
-  }
-
-  .product-card:hover {
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
-    transform: translateY(-4px);
-  }
-
-  .product-card:hover .product-img {
-    transform: scale(1.05);
-  }
-
-  .product-card-row {
-    padding: 16px;
-    align-items: center;
-  }
-
-  .image-column {
-    padding: 0 24px 0 0;
-    margin-bottom: 0;
-    max-width: 380px;
-  }
-
-  .product-img {
-    width: 350px;
-    height: 350px;
-  }
-
-  .details-column {
-    padding: 0 24px 0 0;
-    border-right: 1px solid #e0e0e0;
-    flex: 1;
-    align-items: flex-start;
-    min-width: 0;
-  }
-
-  .product-details-content {
-    gap: 16px;
-    align-items: flex-start;
-    min-width: 0;
-  }
-
-  .product-name {
-    font-size: 1.15rem;
-    text-align: left;
-  }
-
-  .product-description {
-    font-size: 0.9rem;
-    text-align: left;
-  }
-
-  .prices {
-    align-items: flex-start;
-    gap: 10px;
-  }
-
-  .price-unit,
-  .price-total {
-    justify-content: flex-start;
-  }
-
-  .price-label {
-    font-size: 0.75rem;
-  }
-
-  .price-value {
-    font-size: 0.95rem;
-  }
-
-  .price-value.total {
-    font-size: 1.05rem;
-    padding: 4px 12px;
-  }
-
-  .controls-column {
-    justify-content: flex-end;
-    margin-top: 0;
-    padding: 0 0 0 16px;
-    min-width: 180px;
-  }
-
-  .quantity-controls {
-    gap: 8px;
-    padding: 6px;
-  }
-
-  .quantity-input {
-    max-width: 70px;
-    min-width: 70px;
-  }
-
-  .qty-btn {
-    min-width: 36px !important;
-    width: 36px !important;
-    height: 36px !important;
-  }
-
-  .qty-btn:hover {
-    transform: scale(1.1);
-  }
-}
-
-/* ===== RESOLUCIÓN ≥1280px (Desktop Large) ===== */
-@media (min-width: 1280px) {
-  .product-card-row {
-    padding: 20px;
-  }
-
-  .image-column {
-    padding-right: 28px;
-  }
-
-  .details-column {
-    padding-right: 28px;
-  }
-
-  .product-name {
-    font-size: 1.2rem;
-  }
-
-  .product-description {
-    font-size: 0.95rem;
-  }
-
-  .controls-column {
-    padding-left: 20px;
-  }
-}
-</style>

src/components/catalog/Cart.vue

@@ -1,602 +0,0 @@
-<template>
-  <v-card :class="{ 
-    'cart-mobile-expanded': isMobile && !isCollapsed,
-    'cart-collapsed-mobile': isMobile && isCollapsed,
-    'cart-desktop-collapsed': !isMobile && isCollapsed
-  }">
-    <v-card-title 
-      class="d-flex align-center cart-title"
-      :class="{ 'cart-header-mobile': isMobile, 'cart-header-desktop': !isMobile }"
-    >
-      <!-- Icono del carrito - SIEMPRE VISIBLE -->
-      <v-icon class="mr-2">mdi-cart</v-icon>
-      
-      <!-- Texto "Carrito" - SIEMPRE VISIBLE -->
-      <span class="cart-title-text">Carrito</span>
-      
-      <!-- Cantidad de productos - SIEMPRE VISIBLE -->
-      <v-chip 
-        v-if="cartCount > 0" 
-        color="primary" 
-        class="ml-2" 
-        size="small"
-      >
-        {{ cartCount }}
-      </v-chip>
-      <v-chip 
-        v-else
-        color="grey" 
-        class="ml-2" 
-        size="small"
-        variant="outlined"
-      >
-        0
-      </v-chip>
-      
-      <!-- Total visible cuando está colapsado (mobile o desktop) -->
-      <span 
-        v-if="isCollapsed && cartItems.length > 0" 
-        class="ml-auto text-subtitle-1 font-weight-bold mr-2"
-      >
-        {{ currency(cartTotal) }}
-      </span>
-      <v-spacer v-else></v-spacer>
-      
-      <!-- Botón toggle SIEMPRE visible (mobile y desktop) -->
-      <v-btn
-        icon
-        size="small"
-        variant="text"
-        @click="$emit('toggle-collapse')"
-        :title="isCollapsed ? 'Expandir carrito' : 'Contraer carrito'"
-      >
-        <v-icon>{{ isCollapsed ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
-      </v-btn>
-    </v-card-title>
-    
-    <div v-show="!isCollapsed">
-      <v-divider></v-divider>
-      
-      <v-card-text v-if="cartItems.length === 0" class="text-center grey--text">
-        El carrito está vacío
-      </v-card-text>
-      
-      <v-list v-else density="compact" :max-height="listMaxHeight" class="overflow-y-auto cart-list">
-        <v-list-item v-for="(item, index) in cartItems" :key="item.id" class="cart-list-item">
-          <template v-slot:prepend>
-            <div class="prepend-wrapper">
-              <!-- Mostrar imagen solo si NO es extra small -->
-              <v-avatar v-if="!isExtraSmall" size="40" rounded>
-                <v-img :src="item.img" cover></v-img>
-              </v-avatar>
-              <!-- Mostrar número cuando es extra small -->
-              <div v-else class="item-number">
-                {{ index + 1 }}
-              </div>
-            </div>
-          </template>
-          
-          <!-- Contenido reorganizado -->
-          <div class="cart-item-content">
-            <!-- Línea 1: Nombre del producto -->
-            <div class="product-name">{{ item.name }}</div>
-            
-            <!-- Línea 2: Controles + Precio unitario -->
-            <div class="controls-row">
-              <div class="quantity-controls">
-                <v-btn small text class="qty-btn" @click="decreaseQuantity(item.id)">
-                  <v-icon small>mdi-minus</v-icon>
-                </v-btn>
-                <v-text-field
-                  :model-value="item.quantity"
-                  @update:model-value="updateQuantity(item.id, $event)"
-                  type="number"
-                  min="1"
-                  density="compact"
-                  variant="outlined"
-                  hide-details
-                  class="qty-input"
-                />
-                <v-btn small text class="qty-btn" @click="increaseQuantity(item.id)">
-                  <v-icon small>mdi-plus</v-icon>
-                </v-btn>
-              </div>
-              <span class="unit-price">x {{ currency(item.price) }}</span>
-            </div>
-          </div>
-          
-          <!-- Append: Total + Delete -->
-          <template v-slot:append>
-            <div class="item-actions">
-              <strong class="total-price">{{ currency(item.price * item.quantity) }}</strong>
-              <v-btn 
-                icon="mdi-delete" 
-                size="small" 
-                variant="text" 
-                color="error"
-                class="delete-btn"
-                @click="$emit('remove', item.id)"
-              ></v-btn>
-            </div>
-          </template>
-        </v-list-item>
-      </v-list>
-      
-      <v-divider v-if="cartItems.length > 0"></v-divider>
-      
-      <v-card-text v-if="cartItems.length > 0" class="cart-total-section">
-        <div class="d-flex justify-space-between align-center">
-          <strong>Total:</strong>
-          <strong class="text-h6">{{ currency(cartTotal) }}</strong>
-        </div>
-      </v-card-text>
-      
-      <v-card-actions v-if="cartItems.length > 0" class="cart-checkout-section">
-        <v-btn color="primary" block @click="$emit('checkout')">
-          Finalizar Compra
-        </v-btn>
-      </v-card-actions>
-    </div>
-  </v-card>
-</template>
-
-<script>
-export default {
-  name: 'Cart',
-  props: {
-    cartItems: {
-      type: Array,
-      default: () => []
-    },
-    currency: {
-      type: Function,
-      required: true
-    },
-    isCollapsed: {
-      type: Boolean,
-      default: false
-    },
-    isMobile: {
-      type: Boolean,
-      default: false
-    },
-    windowWidth: {
-      type: Number,
-      default: 0
-    }
-  },
-  emits: ['remove', 'checkout', 'update-quantity', 'toggle-collapse'],
-  computed: {
-    cartCount() {
-      return this.cartItems.reduce((sum, item) => sum + item.quantity, 0);
-    },
-    cartTotal() {
-      return this.cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0);
-    },
-    listMaxHeight() {
-      // En desktop, permitir más altura para scroll
-      if (!this.isMobile) {
-        return '500px';
-      }
-      // En mobile, altura limitada
-      return '300px';
-    },
-    isExtraSmall() {
-      // Detectar si la resolución es menor a 560px
-      return this.windowWidth < 560;
-    }
-  },
-  methods: {
-    updateQuantity(itemId, newQuantity) {
-      const qty = parseInt(newQuantity) || 1;
-      this.$emit('update-quantity', { itemId, quantity: qty });
-    },
-    increaseQuantity(itemId) {
-      const item = this.cartItems.find(i => i.id === itemId);
-      if (item) {
-        this.$emit('update-quantity', { itemId, quantity: item.quantity + 1 });
-      }
-    },
-    decreaseQuantity(itemId) {
-      const item = this.cartItems.find(i => i.id === itemId);
-      if (item && item.quantity > 1) {
-        this.$emit('update-quantity', { itemId, quantity: item.quantity - 1 });
-      } else if (item) {
-        this.$emit('remove', itemId);
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-/* === ESTILOS BASE PARA CART ITEMS (Mobile First) === */
-
-/* Contenedor principal del item */
-.cart-item-content {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  flex: 1;
-  min-width: 0; /* Permite que el flex funcione con overflow */
-}
-
-/* Nombre del producto */
-.product-name {
-  font-size: 0.875rem;
-  font-weight: 500;
-  line-height: 1.3;
-  color: rgba(0, 0, 0, 0.87);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2; /* Máximo 2 líneas */
-  -webkit-box-orient: vertical;
-  word-break: break-word;
-}
-
-/* Fila de controles + precio unitario */
-.controls-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-/* Controles de cantidad */
-.quantity-controls {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-shrink: 0;
-}
-
-/* Input de cantidad */
-.qty-input {
-  width: 55px;
-  min-width: 55px;
-}
-
-.qty-input input {
-  text-align: center;
-  font-weight: 500;
-}
-
-/* Botones de cantidad */
-.qty-btn {
-  min-width: 24px !important;
-  width: 24px !important;
-  height: 24px !important;
-  border-radius: 12px !important;
-  padding: 0 !important;
-  flex-shrink: 0;
-}
-
-.qty-btn .v-icon {
-  font-size: 14px !important;
-}
-
-/* Precio unitario */
-.unit-price {
-  font-size: 0.8rem;
-  color: rgba(0, 0, 0, 0.6);
-  font-weight: 400;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-/* Contenedor de acciones (total + delete) */
-.item-actions {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: flex-start;
-  gap: 4px;
-  flex-shrink: 0;
-}
-
-/* Precio total */
-.total-price {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: #2e7d32;
-  white-space: nowrap;
-  line-height: 1.2;
-}
-
-/* Botón de eliminar */
-.delete-btn {
-  flex-shrink: 0;
-}
-
-/* Footer: Total y checkout */
-.cart-total-section {
-  padding: 12px 16px !important;
-}
-
-.cart-checkout-section {
-  padding: 4px 16px 12px !important;
-}
-
-/* Ajustes al list-item */
-.cart-list-item {
-  padding: 10px 8px !important;
-  min-height: auto !important;
-  align-items: center !important;
-}
-
-/* Wrapper del prepend para controlar gap con content */
-.prepend-wrapper {
-  display: flex;
-  align-items: center;
-  margin-right: 10px;
-}
-
-/* Estilos para mobile expandido */
-.cart-mobile-expanded {
-  max-height: 70vh;
-  overflow-y: auto;
-  border-radius: 16px 16px 0 0 !important;
-  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
-}
-
-/* Estilos para mobile colapsado */
-.cart-collapsed-mobile {
-  height: 60px;
-  overflow: hidden;
-  border-radius: 16px 16px 0 0 !important;
-  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
-}
-
-/* Estilos para desktop colapsado */
-.cart-desktop-collapsed {
-  height: 60px;
-  overflow: hidden;
-  border-radius: 12px !important;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
-  transition: all 0.3s ease-in-out;
-}
-
-/* Header del carrito */
-.cart-title {
-  padding: 8px 12px !important;
-  min-height: 48px;
-}
-
-.cart-title-text {
-  font-size: 1rem;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-/* Header interactivo en mobile */
-.cart-header-mobile {
-  cursor: pointer;
-  user-select: none;
-}
-
-/* Header interactivo en desktop */
-.cart-header-desktop {
-  cursor: pointer;
-  user-select: none;
-  background-color: rgba(0, 0, 0, 0.02);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.cart-header-desktop:hover {
-  background-color: rgba(0, 0, 0, 0.04);
-}
-
-/* Lista de items con scroll */
-.cart-list {
-  scrollbar-width: thin;
-  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
-}
-
-.cart-list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.cart-list::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.cart-list::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.2);
-  border-radius: 3px;
-}
-
-.cart-list::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(0, 0, 0, 0.3);
-}
-
-/* Transiciones suaves */
-.v-card {
-  transition: max-height 0.35s ease-in-out, box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
-}
-
-/* === MEDIA QUERIES RESPONSIVE === */
-
-/* Resolución 560-959px (Mobile/Tablet con imagen) */
-@media (min-width: 560px) and (max-width: 959px) {
-  .cart-title {
-    padding: 10px 16px !important;
-    min-height: 52px;
-  }
-
-  .cart-title-text {
-    font-size: 1.05rem;
-  }
-
-  .cart-list-item {
-    padding: 12px !important;
-  }
-
-  .prepend-wrapper {
-    margin-right: 12px;
-  }
-
-  .cart-item-content {
-    gap: 8px;
-  }
-
-  .product-name {
-    font-size: 0.9rem;
-  }
-
-  .controls-row {
-    gap: 12px;
-  }
-
-  .quantity-controls {
-    gap: 6px;
-  }
-
-  .qty-input {
-    width: 65px !important;
-    min-width: 65px !important;
-  }
-
-  .qty-btn {
-    min-width: 28px !important;
-    width: 28px !important;
-    height: 28px !important;
-    border-radius: 14px !important;
-  }
-
-  .qty-btn .v-icon {
-    font-size: 16px !important;
-  }
-
-  .unit-price {
-    font-size: 0.85rem;
-  }
-
-  .total-price {
-    font-size: 0.95rem;
-  }
-
-  .cart-total-section {
-    padding: 12px 16px !important;
-  }
-
-  .cart-checkout-section {
-    padding: 4px 16px 12px !important;
-  }
-}
-
-/* Resolución ≥960px (Desktop) */
-@media (min-width: 960px) {
-  .v-card {
-    border-radius: 12px !important;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
-  }
-
-  .cart-title {
-    padding: 12px 16px !important;
-    min-height: 56px;
-  }
-
-  .cart-title-text {
-    font-size: 1.1rem;
-  }
-
-  .cart-list-item {
-    padding: 12px 16px !important;
-  }
-
-  .prepend-wrapper {
-    margin-right: 14px;
-  }
-
-  .cart-item-content {
-    gap: 10px;
-  }
-
-  .product-name {
-    font-size: 0.95rem;
-    font-weight: 600;
-  }
-
-  .controls-row {
-    gap: 14px;
-  }
-
-  .quantity-controls {
-    gap: 6px;
-  }
-
-  .qty-input {
-    width: 70px !important;
-    min-width: 70px !important;
-  }
-
-  .qty-btn {
-    min-width: 32px !important;
-    width: 32px !important;
-    height: 32px !important;
-    border-radius: 16px !important;
-  }
-
-  .qty-btn .v-icon {
-    font-size: 18px !important;
-  }
-
-  .unit-price {
-    font-size: 0.9rem;
-  }
-
-  .total-price {
-    font-size: 1rem;
-  }
-
-  /* Item-actions en fila en desktop */
-  .item-actions {
-    flex-direction: row;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .cart-desktop-collapsed {
-    width: 100%;
-  }
-
-  .cart-total-section {
-    padding: 14px 16px !important;
-  }
-
-  .cart-checkout-section {
-    padding: 4px 16px 14px !important;
-  }
-}
-
-
-/* Ajustes para la lista de items en mobile */
-@media (max-width: 680px) {
-  .v-list {
-    max-height: calc(70vh - 200px) !important;
-  }
-}
-
-/* Ajustes para resoluciones extra pequeñas (<560px) */
-@media (max-width: 559px) {
-  /* Número del item cuando no hay imagen */
-  .item-number {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    min-width: 32px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border-radius: 50%;
-    font-weight: 700;
-    font-size: 0.875rem;
-    color: white;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
-  }
-
-  .quantity-controls {
-    gap: 3px !important;
-  }
-}
-  </style>

src/components/catalog/PaginationControls.vue

@@ -1,269 +0,0 @@
-<template>
-  <v-row class="pagination-container my-3" align="center">
-    <!-- Fila 1: Navegador de páginas (centrado, ancho completo) -->
-    <v-col cols="12" class="d-flex justify-center mb-2">
-      <v-pagination
-        :model-value="currentPage"
-        @update:model-value="$emit('page-change', $event)"
-        :length="totalPages"
-        :total-visible="computedTotalVisible"
-        :show-first-last-page="showFirstLastButtons"
-        rounded="circle"
-        color="primary"
-        :size="paginationSize"
-      ></v-pagination>
-    </v-col>
-
-    <!-- Fila 2: Info + Selector (en línea) - Solo Desktop -->
-    <v-col 
-      cols="12" 
-      class="d-none d-md-flex justify-center align-center pagination-info-row"
-    >
-      <!-- Información de resultados -->
-      <span class="pagination-info-text">
-        Mostrando {{ paginationInfo.start }}-{{ paginationInfo.end }} 
-        de {{ paginationInfo.total }} productos
-      </span>
-      
-      <!-- Separador visual -->
-      <v-divider vertical class="mx-4" style="height: 24px;"></v-divider>
-      
-      <!-- Selector de items por página -->
-      <span class="mr-2 text-body-1 font-weight-medium">
-        Productos por página:
-      </span>
-      <v-select
-        :model-value="itemsPerPage"
-        @update:model-value="$emit('items-per-page-change', $event)"
-        :items="itemsPerPageOptions"
-        density="comfortable"
-        variant="outlined"
-        hide-details
-        class="items-per-page-selector"
-      ></v-select>
-    </v-col>
-
-    <!-- Fila 2 Mobile: Info de resultados - Solo Mobile -->
-    <v-col cols="12" class="d-flex d-md-none justify-center">
-      <span class="pagination-info-text">
-        Mostrando {{ paginationInfo.start }}-{{ paginationInfo.end }} 
-        de {{ paginationInfo.total }} productos
-      </span>
-    </v-col>
-
-    <!-- Fila 3 Mobile: Selector - Solo Mobile -->
-    <v-col 
-      cols="12" 
-      class="d-flex d-md-none justify-center align-center"
-    >
-      <span class="mr-2 text-body-1 font-weight-medium">
-        Productos por página:
-      </span>
-      <v-select
-        :model-value="itemsPerPage"
-        @update:model-value="$emit('items-per-page-change', $event)"
-        :items="itemsPerPageOptions"
-        density="comfortable"
-        variant="outlined"
-        hide-details
-        class="items-per-page-selector"
-      ></v-select>
-    </v-col>
-  </v-row>
-</template>
-
-<script>
-import { computed, ref, onMounted, onUnmounted } from 'vue';
-
-export default {
-  name: 'PaginationControls',
-  props: {
-    currentPage: {
-      type: Number,
-      required: true
-    },
-    totalPages: {
-      type: Number,
-      required: true
-    },
-    itemsPerPage: {
-      type: Number,
-      required: true
-    },
-    itemsPerPageOptions: {
-      type: Array,
-      required: true
-    },
-    paginationInfo: {
-      type: Object,
-      required: true
-    },
-    position: {
-      type: String,
-      default: 'top',
-      validator: (value) => ['top', 'bottom'].includes(value)
-    },
-    totalVisiblePages: {
-      type: Number,
-      default: null
-    }
-  },
-  emits: ['page-change', 'items-per-page-change'],
-  setup(props) {
-    const windowWidth = ref(window.innerWidth);
-    
-    // Actualizar ancho de ventana en resize
-    const updateWidth = () => {
-      windowWidth.value = window.innerWidth;
-    };
-    
-    onMounted(() => {
-      window.addEventListener('resize', updateWidth);
-    });
-    
-    onUnmounted(() => {
-      window.removeEventListener('resize', updateWidth);
-    });
-    
-    const isMobile = computed(() => windowWidth.value < 680);
-    
-    // Computed para tamaño de paginación: más pequeño en tablet para ahorrar espacio
-    const paginationSize = computed(() => {
-      const width = windowWidth.value;
-      
-      // En pantallas pequeñas/medianas, usar tamaño default para ahorrar espacio
-      if (width < 960) {
-        return 'default';
-      }
-      
-      // En desktop, usar tamaño large
-      return 'large';
-    });
-    
-    // Computed para mostrar botones first/last: solo en pantallas >= 680px
-    const showFirstLastButtons = computed(() => {
-      const width = windowWidth.value;
-      
-      // Mostrar first/last solo en tablet y desktop (>= 680px)
-      // En mobile (<680px), solo prev/next para ahorrar espacio
-      return width >= 680;
-    });
-    
-    // Computed property para total-visible: prioriza prop recibida, sino calcula localmente
-    const computedTotalVisible = computed(() => {
-      // Si se recibe totalVisiblePages desde el padre, usarlo (SINCRONIZACIÓN)
-      if (props.totalVisiblePages !== null) {
-        return props.totalVisiblePages;
-      }
-      
-      // Fallback: cálculo local (por compatibilidad)
-      const width = windowWidth.value;
-      const totalPages = props.totalPages;
-      
-      // Si hay pocas páginas, mostrarlas todas
-      if (totalPages <= 7) {
-        return totalPages;
-      }
-      
-      // Breakpoints responsivos
-      if (width < 400) {
-        return 3;
-      } else if (width < 680) {
-        return 5;
-      } else if (width < 960) {
-        return 7;
-      } else if (width < 1280) {
-        return 9;
-      } else {
-        return 11;
-      }
-    });
-
-    return {
-      isMobile,
-      computedTotalVisible,
-      paginationSize,
-      showFirstLastButtons
-    };
-  }
-};
-</script>
-
-<style scoped>
-.pagination-container {
-  padding: 12px 0;
-  gap: 8px;
-}
-
-.pagination-info-text {
-  font-size: 1.05rem;
-  color: #666;
-  font-weight: 500;
-}
-
-/* Nueva clase para la fila de info en desktop */
-.pagination-info-row {
-  gap: 16px;
-}
-
-.items-per-page-selector {
-  max-width: 100px;
-}
-
-/* Mobile */
-@media (max-width: 680px) {
-  .pagination-container {
-    gap: 12px;
-  }
-  
-  .items-per-page-selector {
-    max-width: 80px;
-  }
-  
-  .text-body-1 {
-    font-size: 0.9rem;
-  }
-}
-
-/* Ajustes visuales */
-.v-pagination {
-  margin: 0 auto;
-  min-width: 400px; /* Garantizar espacio mínimo para iconos + páginas */
-}
-
-/* En móviles muy pequeños, reducir min-width */
-@media (max-width: 480px) {
-  .v-pagination {
-    min-width: 320px;
-  }
-}
-
-/* En pantallas medianas problemáticas (680-960px), asegurar espacio suficiente */
-@media (min-width: 680px) and (max-width: 960px) {
-  .v-pagination {
-    min-width: 450px; /* Más espacio para evitar que desaparezcan los iconos */
-  }
-}
-
-/* Separador vertical */
-.v-divider--vertical {
-  opacity: 0.5;
-}
-
-/* Aumentar tamaño del icono del dropdown en v-select */
-.items-per-page-selector :deep(.v-icon) {
-  font-size: 1.5rem !important;
-}
-
-/* Aumentar tamaño del texto dentro del select */
-.items-per-page-selector :deep(.v-field__input) {
-  font-size: 1rem !important;
-  font-weight: 500;
-}
-
-/* Aumentar tamaño de los items del menú dropdown */
-.items-per-page-selector :deep(.v-list-item-title) {
-  font-size: 1rem !important;
-  font-weight: 500;
-}
-</style>

src/pages/autenticarse.vue

@@ -1,7 +0,0 @@
-<template>
-  <Login />
-</template>
-
-<script setup>
-//
-</script>

src/pages/catalog.vue

@@ -1,568 +0,0 @@
-<template>
-  <v-container fluid>
-    <!-- Backdrop para mobile cuando el carrito está expandido -->
-    <div
-      v-if="isMobile && !cartCollapsed"
-      class="cart-backdrop"
-      @click="cartCollapsed = true"
-    ></div>
-
-    <v-row>
-      <v-col cols="12" md="9" lg="7" :class="{ 'pb-mobile-cart': isMobile }">
-        <v-card-title>
-          <span class="headline">Catálogo</span>
-        </v-card-title>
-
-        <!-- Controles de paginación superiores -->
-        <PaginationControls
-          v-if="items.length > 0"
-          :current-page="currentPage"
-          :total-pages="totalPages"
-          :items-per-page="itemsPerPage"
-          :items-per-page-options="itemsPerPageOptions"
-          :pagination-info="paginationInfo"
-          :total-visible-pages="totalVisiblePages"
-          @page-change="handlePageChange"
-          @items-per-page-change="handleItemsPerPageChange"
-          position="top"
-        />
-
-        <!-- Lista de productos paginados -->
-        <v-list-item
-          v-for="item in paginatedItems"
-          :key="item.id"
-          class="catalog-item"
-        >
-          <Card
-            :product="item"
-            :increase="increase"
-            :decrease="decrease"
-            :currency="currency"
-            :updateQuantity="updateQuantity"
-            @add-to-cart="addToCart"
-          />
-        </v-list-item>
-
-        <!-- Mensaje cuando no hay productos -->
-        <v-alert
-          v-if="items.length === 0"
-          type="info"
-          class="my-4"
-          variant="tonal"
-        >
-          No hay productos disponibles en el catálogo
-        </v-alert>
-
-        <!-- Controles de paginación inferiores -->
-        <PaginationControls
-          v-if="items.length > 0"
-          :current-page="currentPage"
-          :total-pages="totalPages"
-          :items-per-page="itemsPerPage"
-          :items-per-page-options="itemsPerPageOptions"
-          :pagination-info="paginationInfo"
-          :total-visible-pages="totalVisiblePages"
-          @page-change="handlePageChange"
-          @items-per-page-change="handleItemsPerPageChange"
-          position="bottom"
-        />
-      </v-col>
-
-      <v-col cols="12" md="3" lg="5">
-        <div
-          class="cart-sidebar"
-          :class="{ collapsed: cartCollapsed && isMobile }"
-        >
-          <Cart
-            :cart-items="cartItems"
-            :currency="currency"
-            :is-collapsed="cartCollapsed"
-            :is-mobile="isMobile"
-            :window-width="windowWidth"
-            @remove="removeFromCart"
-            @checkout="goToCheckout"
-            @update-quantity="updateCartQuantity"
-            @toggle-collapse="toggleCart"
-          />
-        </div>
-      </v-col>
-    </v-row>
-
-    <!-- Modal 1: Confirmación de productos -->
-    <v-dialog v-model="checkoutDialog" max-width="600" persistent>
-      <v-card>
-        <v-card-title class="headline">Confirmar Compra</v-card-title>
-        <v-card-text>
-          <v-list v-if="cartItems.length > 0" class="product-list-scroll">
-            <v-list-item v-for="item in cartItems" :key="item.id">
-              <div class="d-flex justify-space-between align-center">
-                <div>
-                  <div class="font-weight-medium">{{ item.name }}</div>
-                  <div class="text-caption text-grey">
-                    {{ currency(item.price) }} x {{ item.quantity }}
-                  </div>
-                </div>
-                <div class="font-weight-bold text-success">
-                  {{ currency(item.price * item.quantity) }}
-                </div>
-              </div>
-            </v-list-item>
-          </v-list>
-          <v-divider class="my-3"></v-divider>
-          <div class="d-flex justify-space-between text-h6">
-            <span class="font-weight-bold">Total</span>
-            <span class="font-weight-bold text-success">{{
-              currency(cartStore.cartTotal)
-            }}</span>
-          </div>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn variant="text" @click="checkoutDialog = false">Cancelar</v-btn>
-          <v-btn color="primary" variant="elevated" @click="onConfirmCheckout"
-            >Confirmar</v-btn
-          >
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
-    <!-- Modal 2: Datos personales -->
-    <v-dialog v-model="personalDataDialog" max-width="500" persistent>
-      <v-card>
-        <v-card-title class="headline">Datos de Contacto</v-card-title>
-        <v-card-text>
-          <v-form ref="personalForm">
-            <v-text-field
-              v-model="customerName"
-              label="Nombre completo"
-              :rules="[rules.required]"
-              required
-              variant="outlined"
-              class="mb-3"
-            ></v-text-field>
-            <v-text-field
-              v-model="customerAddress"
-              label="Dirección"
-              variant="outlined"
-              class="mb-3"
-            ></v-text-field>
-            <v-text-field
-              v-model="customerPhone"
-              label="Teléfono"
-              variant="outlined"
-              class="mb-3"
-            ></v-text-field>
-            <v-select
-              v-model="pickupMethod"
-              :items="pickupOptions"
-              item-title="text"
-              item-value="value"
-              label="Recogida"
-              :rules="[rules.required]"
-              required
-              variant="outlined"
-            ></v-select>
-          </v-form>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn variant="text" @click="cancelPurchase">Cancelar</v-btn>
-          <v-btn
-            color="primary"
-            variant="elevated"
-            @click="onSubmitPurchase"
-            :loading="isSubmitting"
-            :disabled="isSubmitting"
-          >
-            Finalizar Compra
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-  </v-container>
-</template>
-
-<script>
-import Card from "@/components/catalog/Card.vue";
-import Cart from "@/components/catalog/Cart.vue";
-import PaginationControls from "@/components/catalog/PaginationControls.vue";
-import { useCartStore } from "@/stores/cart";
-import { inject, ref, computed, onMounted, onUnmounted } from "vue";
-
-export default {
-  components: {
-    Card,
-    Cart,
-    PaginationControls,
-  },
-  setup() {
-    const cartStore = useCartStore();
-    const cartCollapsed = ref(false); // Cambiado a false para que inicie expandido en desktop
-    const windowWidth = ref(window.innerWidth);
-
-    const isMobile = computed(() => windowWidth.value < 960); // Cambiado de 680 a 960
-
-    const updateWindowWidth = () => {
-      windowWidth.value = window.innerWidth;
-    };
-
-    onMounted(() => {
-      window.addEventListener("resize", updateWindowWidth);
-    });
-
-    onUnmounted(() => {
-      window.removeEventListener("resize", updateWindowWidth);
-    });
-
-    return {
-      cartStore,
-      cartCollapsed,
-      isMobile,
-      windowWidth,
-    };
-  },
-  data() {
-    return {
-      api: inject("api"),
-      items: [],
-      // Paginación
-      currentPage: 1,
-      itemsPerPage: 20,
-      itemsPerPageOptions: [10, 20, 50, 100],
-      checkoutDialog: false,
-      personalDataDialog: false,
-      customerName: "",
-      customerAddress: "",
-      customerPhone: "",
-      pickupMethod: "STORE",
-      pickupOptions: [
-        { text: "En Sitio", value: "STORE" },
-        { text: "Domicilio", value: "DELIVERY" },
-      ],
-      isSubmitting: false,
-      rules: {
-        required: (value) => !!value || "Requerido.",
-      },
-    };
-  },
-  computed: {
-    cartItems: {
-      get() {
-        return this.cartStore.items;
-      },
-      set(value) {
-        this.cartStore.items = value;
-      },
-    },
-    cartCount() {
-      return this.cartStore.cartCount;
-    },
-    // Paginación
-    paginatedItems() {
-      const start = (this.currentPage - 1) * this.itemsPerPage;
-      const end = start + this.itemsPerPage;
-      return this.items.slice(start, end);
-    },
-    totalPages() {
-      return Math.ceil(this.items.length / this.itemsPerPage);
-    },
-    paginationInfo() {
-      const start = (this.currentPage - 1) * this.itemsPerPage + 1;
-      const end = Math.min(
-        this.currentPage * this.itemsPerPage,
-        this.items.length,
-      );
-      return {
-        start,
-        end,
-        total: this.items.length,
-      };
-    },
-    // Computed para total-visible dinámico y responsive (usado por ambos PaginationControls)
-    totalVisiblePages() {
-      // Si hay pocas páginas, mostrarlas todas (IMPORTANTE para mostrar iconos de navegación)
-      if (this.totalPages <= 7) {
-        return this.totalPages;
-      }
-
-      // Breakpoints responsivos basados en windowWidth
-      // OPTIMIZADO: Reducidos para evitar que desaparezcan los iconos de navegación
-      const width = this.windowWidth;
-
-      if (width < 400) {
-        return 3; // Extra small mobile
-      } else if (width < 680) {
-        return 5; // Mobile
-      } else if (width < 960) {
-        return 5; // Tablet (REDUCIDO de 7 → 5 para evitar overflow)
-      } else if (width < 1280) {
-        return 7; // Desktop small (REDUCIDO de 9 → 7)
-      } else {
-        return 9; // Desktop large (REDUCIDO de 11 → 9)
-      }
-    },
-  },
-  created() {
-    this.loadItemsPerPagePreference();
-    this.fetchProducts();
-  },
-  methods: {
-    fetchProducts() {
-      this.api
-        .getProducts()
-        .then((data) => {
-          this.items = data.map((product) => ({
-            ...product,
-            quantity: 0,
-            img:
-              product.img ||
-              `https://picsum.photos/300/200?random=${product.id}`,
-          }));
-        })
-        .catch((error) => {
-          console.error(error);
-        });
-    },
-    increase(item) {
-      item.quantity = Number(item.quantity) + 1;
-      this.addToCart(item);
-    },
-    decrease(item) {
-      item.quantity = Math.max(0, Number(item.quantity) - 1);
-      if (item.quantity === 0) {
-        this.removeFromCart(item.id);
-      } else {
-        this.addToCart(item);
-      }
-    },
-    updateQuantity(item) {
-      if (item.quantity > 0) {
-        this.addToCart(item);
-      } else {
-        this.removeFromCart(item.id);
-      }
-    },
-    addToCart(item) {
-      if (item.quantity <= 0) return;
-      this.cartStore.addItem(item);
-    },
-    removeFromCart(itemId) {
-      this.cartStore.removeItem(itemId);
-      const item = this.items.find((i) => i.id === itemId);
-      if (item) {
-        item.quantity = 0;
-      }
-    },
-    updateCartQuantity({ itemId, quantity }) {
-      this.cartStore.updateQuantity({ itemId, quantity });
-      const productItem = this.items.find((i) => i.id === itemId);
-      if (productItem) {
-        productItem.quantity = quantity;
-      }
-    },
-    goToCheckout() {
-      this.checkoutDialog = true;
-    },
-    onConfirmCheckout() {
-      this.checkoutDialog = false;
-      this.personalDataDialog = true;
-    },
-    cancelPurchase() {
-      this.checkoutDialog = false;
-      this.personalDataDialog = false;
-      this.customerName = "";
-      this.customerAddress = "";
-      this.customerPhone = "";
-      this.pickupMethod = "STORE";
-    },
-    async onSubmitPurchase() {
-      const form = this.$refs.personalForm;
-
-      if (form) {
-        const { valid } = await form.validate();
-        if (!valid) return;
-      }
-      this.isSubmitting = true;
-      const payload = {
-        date: this.getCurrentDate(),
-        customer: 1,
-        notes: "",
-        payment_method: "CASH",
-        saleline_set: this.cartItems.map((item) => ({
-          product: item.id,
-          unit_price: item.price,
-          quantity: item.quantity,
-          measuring_unit: item.measuring_unit || "Unidad",
-        })),
-        customer_name: this.customerName,
-        customer_address: this.customerAddress,
-        customer_phone: this.customerPhone,
-        pickup_method: this.pickupMethod,
-      };
-
-      this.api
-        .createCatalogPurchase(payload)
-        .then((data) => {
-          this.cartStore.clearCart();
-          this.personalDataDialog = false;
-          this.$router.push({
-            path: "/summary_purchase",
-            query: { id: parseInt(data.id) },
-          });
-        })
-        .catch((error) => {
-          console.error("Error al crear la compra:", error);
-          this.isSubmitting = false;
-        });
-    },
-    getCurrentDate() {
-      const today = new Date();
-      const gmtOffSet = -5;
-      const localDate = new Date(today.getTime() + gmtOffSet * 60 * 60 * 1000);
-      return localDate.toISOString().slice(0, 16);
-    },
-    toggleCart() {
-      this.cartCollapsed = !this.cartCollapsed;
-    },
-    // Paginación
-    handlePageChange(newPage) {
-      this.currentPage = newPage;
-      this.scrollToTop();
-    },
-    handleItemsPerPageChange(newValue) {
-      this.itemsPerPage = newValue;
-      this.currentPage = 1;
-      this.saveItemsPerPagePreference(newValue);
-      this.scrollToTop();
-    },
-    saveItemsPerPagePreference(value) {
-      localStorage.setItem("catalog_items_per_page", value);
-    },
-    loadItemsPerPagePreference() {
-      const saved = localStorage.getItem("catalog_items_per_page");
-      if (saved && this.itemsPerPageOptions.includes(parseInt(saved))) {
-        this.itemsPerPage = parseInt(saved);
-      }
-    },
-    scrollToTop() {
-      this.$nextTick(() => {
-        const catalogHeader = this.$el?.querySelector(".headline");
-        if (catalogHeader) {
-          catalogHeader.scrollIntoView({
-            behavior: "smooth",
-            block: "start",
-          });
-        }
-      });
-    },
-    currency(val) {
-      if (val == null) return "-";
-      return new Intl.NumberFormat("es-CO", {
-        style: "currency",
-        currency: "COP",
-        minimumFractionDigits: 0,
-      }).format(val);
-    },
-  },
-};
-</script>
-
-<style scoped>
-.headline {
-  font-weight: bold;
-  font-size: 1.25rem;
-}
-
-/* === LISTADO DE PRODUCTOS === */
-.catalog-item {
-  padding: 0;
-  margin-bottom: 12px;
-}
-
-.catalog-item:last-child {
-  margin-bottom: 0;
-}
-
-/* Mobile First: Estilos base (< 960px) */
-.cart-sidebar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 1000;
-  transition: all 0.3s ease-in-out;
-}
-
-.cart-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 999;
-  animation: fadeIn 0.3s ease-in-out;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-/* Padding para el contenido del catálogo en mobile */
-.pb-mobile-cart {
-  padding-bottom: 76px !important; /* 60px sidebar + 16px margen */
-}
-
-/* Desktop (≥ 960px) - Sidebar sticky con scroll */
-/* Layout: 960-1023px = md breakpoint (75% productos / 25% cart) */
-/* Layout: ≥1024px = lg breakpoint (60% productos / 40% cart) */
-@media (min-width: 960px) {
-  .cart-sidebar {
-    position: sticky;
-    top: 80px;
-    z-index: auto;
-    max-height: calc(100vh - 100px);
-    overflow-y: visible;
-  }
-
-  .cart-backdrop {
-    display: none;
-  }
-
-  .pb-mobile-cart {
-    padding-bottom: 16px !important;
-  }
-
-  .catalog-item {
-    margin-bottom: 16px;
-  }
-}
-
-/* Resolución <560px - Mobile extra small */
-@media (max-width: 559px) {
-  .headline {
-    font-size: 1.1rem;
-  }
-
-  .catalog-item {
-    margin-bottom: 10px;
-  }
-}
-
-/* Resolución 560-959px - Tablet */
-@media (min-width: 560px) and (max-width: 959px) {
-  .catalog-item {
-    margin-bottom: 14px;
-  }
-}
-
-.product-list-scroll {
-  max-height: 400px;
-  overflow-y: auto;
-}
-</style>

src/pages/compra_admin.vue

@@ -1,14 +1,20 @@
 <template>
-  <AdminPurchase v-if="authStore.isAdmin"/>
+  <div>
+    <CodeDialog @code-verified="(verified) => showComponent = verified"/>
+  </div>
+  <AdminPurchase v-if="showComponent"/>
 </template>
 
 <script >
-  import { useAuthStore } from '@/stores/auth';
+  import CodeDialog from '../components/CodeDialog.vue'
 
   export default {
-    setup() {
+    data() {
-      const authStore = useAuthStore();
+      return {
-      return { authStore };
+        showComponent: false,
+      }
     },
+    components: { CodeDialog },
+    methods: {},
   }
 </script>

src/pages/comprar.vue

@@ -3,9 +3,5 @@
 </template>
 
 <script setup>
-definePage({
+//
-  meta: {
-    requiresAuth: true
-  }
-})
 </script>

src/pages/cuadrar_tarro.vue

@@ -1,14 +1,20 @@
 <template>
-  <ReconciliationJar v-if="authStore.isAdmin" />
+  <div>
+    <CodeDialog @code-verified="(verified) => showComponent = verified"/>
+  </div>
+  <ReconciliationJar v-if="showComponent" />
 </template>
 
 <script >
-  import { useAuthStore } from '@/stores/auth';
+  import CodeDialog from '../components/CodeDialog.vue'
 
   export default {
-    setup() {
+    data() {
-      const authStore = useAuthStore();
+      return {
-      return { authStore };
+        showComponent: false,
+      }
     },
+    components: { CodeDialog },
+    methods: {},
   }
 </script>

src/pages/cuadres_de_tarro.vue

@@ -1,14 +1,20 @@
 <template>
-  <ReconciliationJarIndex v-if="authStore.isAdmin" />
+  <div>
+    <CodeDialog @code-verified="(verified) => showComponent = verified" />
+  </div>
+  <ReconciliationJarIndex v-if="showComponent" />
 </template>
 
 <script>
-  import { useAuthStore } from '@/stores/auth';
+  import CodeDialog from '../components/CodeDialog.vue'
 
   export default {
-    setup() {
+    data() {
-      const authStore = useAuthStore();
+      return {
-      return { authStore };
+        showComponent: false,
+      }
     },
+    components: { CodeDialog },
+    methods: {},
   }
 </script>

src/pages/index.vue

@@ -3,5 +3,4 @@
 </template>
 
 <script setup>
-import Wellcome from '@/components/Wellcome.vue'
 </script>

src/pages/salir.vue

@@ -1,7 +0,0 @@
-<template>
-  <Logout />
-</template>
-
-<script setup>
-//
-</script>

src/pages/sincronizar_clientes_tryton.vue

@@ -1,8 +1,9 @@
 <template>
-  <v-container v-if="authStore.isAdmin" class="fill-height">
+  <div>
-    <v-row v-if="!result && !loading" justify="center">
+    <CodeDialog @code-verified="(verified) => showComponent = verified"/>
-      <v-col cols="12" md="8">
+  </div>
-        <v-card class="pa-6" elevation="4">
+  <v-container class="fill-height d-flex align-center justify-center">
+    <v-card class="pa-6" max-width="600" elevation="4">
       <v-card-title class="text-h5 font-weight-bold text-center">
         🔄 Sincronización de Clientes
       </v-card-title>
@@ -12,14 +13,14 @@
           Esta acción sincronizará los <strong>clientes</strong> desde el sistema
           <strong>Tryton</strong> hacia la plataforma.
         </p>
-            <v-alert type="warning" dense border="start" border-color="warning" class="mt-4">
+        <v-alert type="warning" dense border="start" border-color="warning">
           <strong>Advertencia:</strong> Este proceso podría tardar varios minutos
           y reemplazar datos existentes en la plataforma.  
           Asegúrese de que la información en Tryton esté actualizada antes de
           continuar.
         </v-alert>
         <p class="mt-4">
-              Durante la sincronización, no se podrán modificar clientes en la
+          Durante la sincronización, no se podrán modificar productos en la
           plataforma para evitar conflictos.
         </p>
       </v-card-text>
@@ -33,129 +34,44 @@
         </v-btn>
       </v-card-actions>
     </v-card>
-      </v-col>
-    </v-row>
 
-    <v-row v-else-if="loading" justify="center" align="center">
-      <v-col cols="12" class="text-center">
-        <v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
-        <p class="mt-4 text-h6">Sincronizando clientes...</p>
-      </v-col>
-    </v-row>
 
-    <v-row v-else>
+    <v-data-table :items="checked_tryton_parties"></v-data-table>
-      <v-col cols="12">
+    <v-data-table :items="created_customers"></v-data-table>
-        <v-alert type="success" variant="tonal" class="mb-4">
+    <v-data-table :items="failed_parties"></v-data-table>
-          <strong>Sincronización completada</strong>
+    <v-data-table :items="untouched_customers"></v-data-table>
-        </v-alert>
-      </v-col>
-
-      <v-col cols="12" md="6">
-        <v-card elevation="2">
-          <v-card-title class="bg-error text-white">❌ Fallidos ({{ result.failed_parties?.length || 0 }})</v-card-title>
-          <v-card-text>
-            <v-data-table
-              :items="formatItems(result.failed_parties)"
-              density="compact"
-              :headers="[{ title: 'ID', key: 'id' }]"
-            ></v-data-table>
-          </v-card-text>
-        </v-card>
-      </v-col>
-
-      <v-col cols="12" md="6">
-        <v-card elevation="2">
-          <v-card-title class="bg-success text-white">✅ Creados ({{ result.created_customers?.length || 0 }})</v-card-title>
-          <v-card-text>
-            <v-data-table
-              :items="formatItems(result.created_customers)"
-              density="compact"
-              :headers="[{ title: 'ID', key: 'id' }]"
-            ></v-data-table>
-          </v-card-text>
-        </v-card>
-      </v-col>
-
-      <v-col cols="12" md="6">
-        <v-card elevation="2">
-          <v-card-title class="bg-warning">🔄 Actualizados ({{ result.updated_customers?.length || 0 }})</v-card-title>
-          <v-card-text>
-            <v-data-table
-              :items="formatItems(result.updated_customers)"
-              density="compact"
-              :headers="[{ title: 'ID', key: 'id' }]"
-            ></v-data-table>
-          </v-card-text>
-        </v-card>
-      </v-col>
-
-      <v-col cols="12" md="6">
-        <v-card elevation="2">
-          <v-card-title class="bg-grey-lighten-1">⏭️ Sin cambios ({{ result.untouched_customers?.length || 0 }})</v-card-title>
-          <v-card-text>
-            <v-data-table
-              :items="formatItems(result.untouched_customers)"
-              density="compact"
-              :headers="[{ title: 'ID', key: 'id' }]"
-            ></v-data-table>
-          </v-card-text>
-        </v-card>
-      </v-col>
-
-      <v-col cols="12" md="6">
-        <v-card elevation="2">
-          <v-card-title class="bg-info text-white">🔍 Verificados ({{ result.checked_tryton_parties?.length || 0 }})</v-card-title>
-          <v-card-text>
-            <v-data-table
-              :items="formatItems(result.checked_tryton_parties)"
-              density="compact"
-              :headers="[{ title: 'ID', key: 'id' }]"
-            ></v-data-table>
-          </v-card-text>
-        </v-card>
-      </v-col>
-
-      <v-col cols="12" class="text-center mt-4">
-        <v-btn color="primary" @click="$router.push('/')">
-          Volver al inicio
-        </v-btn>
-      </v-col>
-    </v-row>
   </v-container>
 </template>
 
 <script>
-  import { useAuthStore } from '@/stores/auth';
+  import CodeDialog from '../components/CodeDialog.vue'
   import { inject } from 'vue';
 
   export default {
     name: 'CustomersFromTryton',
-    setup() {
-      const authStore = useAuthStore();
-      return { authStore };
-    },
     data() {
       return {
         api: inject('api'),
-        loading: false,
+        checked_tryton_parties: [],
-        result: null,
+        created_customers: [],
+        failed_parties: [],
+        untouched_customers: [],
+        updated_customers: [],
       }
     },
     methods: {
-      formatItems(ids) {
-        if (!ids || ids.length === 0) return [];
-        return ids.map(id => ({ id }));
-      },
       startSync() {
-        this.loading = true;
         this.api.getCustomersFromTryton()
           .then(response => {
-            this.result = response;
+            // Manejar la respuesta exitosa
-            this.loading = false;
+            this.checked_tryton_parties = response.checked_tryton_parties.map(id => ({ id }));
+            this.created_customers = response.created_customers.map(id => ({ id }));
+            this.failed_parties = response.failed_parties.map(id => ({ id }));
+            this.untouched_customers = response.untouched_customers.map(id => ({ id }));
           })
           .catch(error => {
-            console.error('Error al sincronizar clientes:', error);
+            // Manejar el error
-            this.loading = false;
+            console.error("Error al sincronizar clientes:", error);
           });
       }
     }

src/pages/sincronizar_productos_tryton.vue

@@ -1,8 +1,9 @@
 <template>
-  <v-container v-if="authStore.isAdmin" class="fill-height">
+  <div>
-    <v-row v-if="!result && !loading" justify="center">
+    <CodeDialog @code-verified="(verified) => showComponent = verified"/>
-      <v-col cols="12" md="8">
+  </div>
-        <v-card class="pa-6" elevation="4">
+  <v-container class="fill-height d-flex align-center justify-center">
+    <v-card class="pa-6" max-width="600" elevation="4">
       <v-card-title class="text-h5 font-weight-bold text-center">
         🔄 Sincronización de Productos
       </v-card-title>
@@ -12,7 +13,7 @@
           Esta acción sincronizará los <strong>productos</strong> desde el sistema
           <strong>Tryton</strong> hacia la plataforma.
         </p>
-            <v-alert type="warning" dense border="start" border-color="warning" class="mt-4">
+        <v-alert type="warning" dense border="start" border-color="warning">
           <strong>Advertencia:</strong> Este proceso podría tardar varios minutos
           y reemplazar datos existentes en la plataforma.  
           Asegúrese de que la información en Tryton esté actualizada antes de
@@ -33,117 +34,26 @@
         </v-btn>
       </v-card-actions>
     </v-card>
-      </v-col>
+    <v-data-table :items="productos_tryton"></v-data-table>
-    </v-row>
-
-    <v-row v-else-if="loading" justify="center" align="center">
-      <v-col cols="12" class="text-center">
-        <v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
-        <p class="mt-4 text-h6">Sincronizando productos...</p>
-      </v-col>
-    </v-row>
-
-    <v-row v-else>
-      <v-col cols="12">
-        <v-alert type="success" variant="tonal" class="mb-4">
-          <strong>Sincronización completada</strong>
-        </v-alert>
-      </v-col>
-
-      <v-col cols="12" md="6">
-        <v-card elevation="2">
-          <v-card-title class="bg-error text-white">❌ Fallidos ({{ result.failed_products?.length || 0 }})</v-card-title>
-          <v-card-text>
-            <v-data-table
-              :items="formatItems(result.failed_products)"
-              density="compact"
-              :headers="[{ title: 'ID', key: 'id' }]"
-            ></v-data-table>
-          </v-card-text>
-        </v-card>
-      </v-col>
-
-      <v-col cols="12" md="6">
-        <v-card elevation="2">
-          <v-card-title class="bg-success text-white">✅ Creados ({{ result.created_products?.length || 0 }})</v-card-title>
-          <v-card-text>
-            <v-data-table
-              :items="formatItems(result.created_products)"
-              density="compact"
-              :headers="[{ title: 'ID', key: 'id' }]"
-            ></v-data-table>
-          </v-card-text>
-        </v-card>
-      </v-col>
-
-      <v-col cols="12" md="6">
-        <v-card elevation="2">
-          <v-card-title class="bg-info text-white">🔄 Actualizados ({{ result.updated_products?.length || 0 }})</v-card-title>
-          <v-card-text>
-            <v-data-table
-              :items="formatItems(result.updated_products)"
-              density="compact"
-              :headers="[{ title: 'ID', key: 'id' }]"
-            ></v-data-table>
-          </v-card-text>
-        </v-card>
-      </v-col>
-
-      <v-col cols="12" md="6">
-        <v-card elevation="2">
-          <v-card-title class="bg-grey-lighten-1">⏭️ Sin cambios ({{ result.untouched_products?.length || 0 }})</v-card-title>
-          <v-card-text>
-            <v-data-table
-              :items="formatItems(result.untouched_products)"
-              density="compact"
-              :headers="[{ title: 'ID', key: 'id' }]"
-            ></v-data-table>
-          </v-card-text>
-        </v-card>
-      </v-col>
-
-      <v-col cols="12" class="text-center mt-4">
-        <v-btn color="primary" @click="$router.push('/')">
-          Volver al inicio
-        </v-btn>
-      </v-col>
-    </v-row>
   </v-container>
 </template>
 
 <script>
-  import { useAuthStore } from '@/stores/auth';
+  import CodeDialog from '../components/CodeDialog.vue'
   import { inject } from 'vue';
 
   export default {
     name: 'ProductsFromTryton',
-    setup() {
-      const authStore = useAuthStore();
-      return { authStore };
-    },
     data() {
       return {
         api: inject('api'),
-        loading: false,
+        productos_tryton: [{}],
-        result: null,
+        showComponent: false,
       }
     },
     methods: {
-      formatItems(ids) {
-        if (!ids || ids.length === 0) return [];
-        return ids.map(id => ({ id }));
-      },
       startSync() {
-        this.loading = true;
+        this.productos_tryton = this.api.getProductsFromTryton()
-        this.api.getProductsFromTryton()
-          .then(response => {
-            this.result = response;
-            this.loading = false;
-          })
-          .catch(error => {
-            console.error('Error al sincronizar productos:', error);
-            this.loading = false;
-          });
       }
     }
   }

src/pages/sincronizar_ventas_tryton.vue

@@ -1,8 +1,9 @@
 <template>
-  <v-container v-if="authStore.isAdmin" class="fill-height">
+  <div>
-    <v-row v-if="!result && !loading" justify="center">
+    <CodeDialog @code-verified="(verified) => showComponent = verified"/>
-      <v-col cols="12" md="8">
+  </div>
-        <v-card class="pa-6" elevation="4">
+  <v-container class="fill-height d-flex align-center justify-center">
+    <v-card class="pa-6" max-width="600" elevation="4">
       <v-card-title class="text-h5 font-weight-bold text-center">
         🔄 Sincronización de Ventas
       </v-card-title>
@@ -12,7 +13,7 @@
           Esta acción sincronizará las <strong>ventas</strong> desde el sistema
           <strong>Tryton</strong> hacia la plataforma.
         </p>
-            <v-alert type="warning" dense border="start" border-color="warning" class="mt-4">
+        <v-alert type="warning" dense border="start" border-color="warning">
           <strong>Advertencia:</strong> Este proceso podría tardar varios minutos
           y reemplazar datos existentes en la plataforma.  
           Asegúrese de que la información en Tryton esté actualizada antes de
@@ -29,90 +30,32 @@
         </v-btn>
       </v-card-actions>
     </v-card>
-      </v-col>
+    <v-data-table :items="ventas_tryton_failed"></v-data-table>
-    </v-row>
+    <v-data-table :items="ventas_tryton_successful"></v-data-table>
-
-    <v-row v-else-if="loading" justify="center" align="center">
-      <v-col cols="12" class="text-center">
-        <v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
-        <p class="mt-4 text-h6">Sincronizando ventas...</p>
-      </v-col>
-    </v-row>
-
-    <v-row v-else>
-      <v-col cols="12">
-        <v-alert type="success" variant="tonal" class="mb-4">
-          <strong>Sincronización completada</strong>
-        </v-alert>
-      </v-col>
-
-      <v-col cols="12" md="6">
-        <v-card elevation="2">
-          <v-card-title class="bg-error text-white">❌ Fallidos ({{ result.failed?.length || 0 }})</v-card-title>
-          <v-card-text>
-            <v-data-table
-              :items="formatItems(result.failed)"
-              density="compact"
-              :headers="[{ title: 'ID', key: 'id' }]"
-            ></v-data-table>
-          </v-card-text>
-        </v-card>
-      </v-col>
-
-      <v-col cols="12" md="6">
-        <v-card elevation="2">
-          <v-card-title class="bg-success text-white">✅ Exitosos ({{ result.successful?.length || 0 }})</v-card-title>
-          <v-card-text>
-            <v-data-table
-              :items="formatItems(result.successful)"
-              density="compact"
-              :headers="[{ title: 'ID', key: 'id' }]"
-            ></v-data-table>
-          </v-card-text>
-        </v-card>
-      </v-col>
-
-      <v-col cols="12" class="text-center mt-4">
-        <v-btn color="primary" @click="$router.push('/')">
-          Volver al inicio
-        </v-btn>
-      </v-col>
-    </v-row>
   </v-container>
 </template>
-
 <script>
-  import { useAuthStore } from '@/stores/auth';
+  import CodeDialog from '../components/CodeDialog.vue';
   import { inject } from 'vue';
 
   export default {
     name: 'SalesToTryton',
-    setup() {
-      const authStore = useAuthStore();
-      return { authStore };
-    },
     data() {
       return {
         api: inject('api'),
-        loading: false,
+        ventas_tryton: [],
-        result: null,
+        showComponent: false,
       }
     },
     methods: {
-      formatItems(ids) {
-        if (!ids || ids.length === 0) return [];
-        return ids.map(id => ({ id }));
-      },
       startSync() {
-        this.loading = true;
         this.api.sendSalesToTryton()
           .then(response => {
-            this.result = response;
+            this.ventas_tryton_failed = response.failed.map(id => ({ id }));
-            this.loading = false;
+            this.ventas_tryton_successful = response.successful.map(id => ({ id }));
           })
           .catch(error => {
-            console.error('Error al sincronizar ventas:', error);
+            console.error("Error al sincronizar las ventas", error);
-            this.loading = false;
           });
       }
     }

src/pages/summary_purchase.vue

@@ -3,9 +3,5 @@
 </template>
 
 <script setup>
-definePage({
+  //
-  meta: {
-    requiresAuth: true
-  }
-})
 </script>

src/pages/ventas_para_tryton.vue

@@ -1,13 +1,19 @@
 <template>
-  <ExportPurchasesForTryton v-if="authStore.isAdmin" />
+  <div>
+    <CodeDialog @code-verified="(verified) => showComponent = verified"/>
+  </div>
+  <ExportPurchasesForTryton v-if="showComponent" />
 </template>
 <script>
-  import { useAuthStore } from '@/stores/auth';
+  import CodeDialog from '../components/CodeDialog.vue'
 
   export default {
-    setup() {
+    data() {
-      const authStore = useAuthStore();
+      return {
-      return { authStore };
+        showComponent: false,
+      }
     },
+    components: { CodeDialog },
+    methods: {},
   }
 </script>

src/router/index.js

@@ -9,39 +9,12 @@
 import { createRouter, createWebHistory } from 'vue-router/auto'
 import { setupLayouts } from 'virtual:generated-layouts'
 import { routes } from 'vue-router/auto-routes'
-import { useAuthStore } from '@/stores/auth'
-
-const ADMIN_ROUTES = [
-  '/sincronizar_clientes_tryton',
-  '/sincronizar_ventas_tryton',
-  '/sincronizar_productos_tryton',
-  '/ventas_para_tryton',
-  '/cuadres_de_tarro',
-  '/compra_admin',
-  '/cuadrar_tarro',
-]
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: setupLayouts(routes),
 })
 
-router.beforeEach((to, from, next) => {
-  const isAuthenticated = !!localStorage.getItem('access_token')
-  const requiresAuth = to.meta.requiresAuth === true
-  const requiresAdmin = to.meta.requiresAdmin === true || ADMIN_ROUTES.includes(to.path)
-
-  const authStore = useAuthStore()
-
-  if (requiresAuth && !isAuthenticated) {
-    next({ path: '/autenticarse', replace: true })
-  } else if (requiresAdmin && !authStore.isAdmin) {
-    next({ path: '/', replace: true })
-  } else {
-    next()
-  }
-})
-
 // Workaround for https://github.com/vitejs/vite/issues/11804
 router.onError((err, to) => {
   if (err?.message?.includes?.('Failed to fetch dynamically imported module')) {

src/services/api.js

@@ -31,11 +31,11 @@ class Api {
     return this.apiImplementation.getReconciliation(reconciliationId);
   }
 
-    createPurchase(purchase) {
+  isValidAdminCode(code) {
-        return this.apiImplementation.createCatalogPurchase(purchase);
+    return this.apiImplementation.isValidAdminCode(code);
   }
 
-    createCatalogPurchase(purchase) {
+  createPurchase(purchase) {
     return this.apiImplementation.createPurchase(purchase);
   }
 
@@ -62,10 +62,6 @@ class Api {
   sendSalesToTryton(){
     return this.apiImplementation.sendSalesToTryton();
   }
-
-    getCurrentUser() {
-        return this.apiImplementation.getCurrentUser();
-    }
 }
 
 export default Api;

src/services/auth.js

@@ -1,72 +0,0 @@
-class AuthService {
-  static TOKEN_KEY = 'access_token';
-  static REFRESH_KEY = 'refresh_token';
-
-  static async login(credentials) {
-    const url = `${import.meta.env.VITE_DJANGO_BASE_URL}/api/token/`;
-
-    const resp = await fetch(url, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(credentials),
-    });
-
-    if (!resp.ok) {
-      let errMsg = resp.statusText;
-      try {
-        const errData = await resp.json();
-        errMsg = errData?.detail ?? errData?.message ?? errMsg;
-      } catch (_) { /* ignore */ }
-      throw new Error(errMsg);
-    }
-
-    const data = await resp.json();
-
-    if (data.access && data.refresh) {
-      localStorage.setItem(this.TOKEN_KEY, data.access);
-      localStorage.setItem(this.REFRESH_KEY, data.refresh);
-    }
-
-    return data;
-  }
-
-  static getAccessToken() {
-    return localStorage.getItem(this.TOKEN_KEY);
-  }
-
-  static getRefreshToken() {
-    return localStorage.getItem(this.REFRESH_KEY);
-  }
-
-  static async refresh() {
-    const refresh = this.getRefreshToken();
-    if (!refresh) throw new Error('No refresh token');
-
-    const url = `${import.meta.env.VITE_DJANGO_BASE_URL}/api/token/refresh/`;
-    const resp = await fetch(url, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ refresh }),
-    });
-
-    if (!resp.ok) {
-      const errData = await resp.json().catch(() => ({}));
-      throw new Error(errData?.detail ?? resp.statusText);
-    }
-
-    const data = await resp.json();
-    localStorage.setItem(this.TOKEN_KEY, data.access);
-    return data.access;
-  }
-
-  static isAuthenticated() {
-    return !!this.getAccessToken();
-  }
-
-  static logout() {
-    localStorage.removeItem(this.TOKEN_KEY);
-    localStorage.removeItem(this.REFRESH_KEY);
-  }
-}
-
-export default AuthService;

src/services/django-api.js

@@ -1,103 +1,120 @@
-import AuthService from "@/services/auth";
-import http from "@/services/http";
-
 class DjangoApi {
   constructor() {
     this.base = import.meta.env.VITE_DJANGO_BASE_URL;
   }
 
-    getRequest(url) {
-        return http.get(url).then((r) => r.data);
-    }
-
-    postRequest(url, payload) {
-        return http.post(url, payload).then((r) => r.data);
-    }
-
   getCustomers() {
-        const url = this.base + "/don_confiao/api/customers/";
+    const url = this.base + '/don_confiao/api/customers/';
     return this.getRequest(url);
   }
 
   getProducts() {
-        const url = this.base + "/don_confiao/api/products/";
+    const url = this.base + '/don_confiao/api/products/';
     return this.getRequest(url);
   }
 
   getPaymentMethods() {
-        const url =
+    const url = this.base + '/don_confiao/payment_methods/all/select_format';
-            this.base + "/don_confiao/payment_methods/all/select_format";
     return this.getRequest(url);
   }
 
   getSummaryPurchase(purchaseId) {
-        const url =
+    const url = this.base + `/don_confiao/resumen_compra_json/${purchaseId}`;
-            this.base + `/don_confiao/resumen_compra_json/${purchaseId}`;
     return this.getRequest(url);
   }
 
   getPurchasesForReconciliation() {
-        const url = this.base + "/don_confiao/purchases/for_reconciliation";
+    const url = this.base + '/don_confiao/purchases/for_reconciliation';
     return this.getRequest(url);
   }
 
   getListReconcliations(page, itemsPerPage) {
-        const url =
+    const url = this.base + `/don_confiao/api/reconciliate_jar/?page=${page}&page_size=${itemsPerPage}`;
-            this.base +
-            `/don_confiao/api/reconciliate_jar/?page=${page}&page_size=${itemsPerPage}`;
     return this.getRequest(url);
   }
 
   getReconciliation(reconciliationId) {
-        const url =
+    const url = this.base + `/don_confiao/api/reconciliate_jar/${reconciliationId}/`;
-            this.base +
-            `/don_confiao/api/reconciliate_jar/${reconciliationId}/`;
     return this.getRequest(url);
   }
 
-    createPurchase(purchase) {
+  isValidAdminCode(code) {
-        const url = this.base + "/don_confiao/api/sales/";
+    const url = this.base + `/don_confiao/api/admin_code/validate/${code}`
-        return this.postRequest(url, purchase);
+    return this.getRequest(url)
     }
 
-    createCatalogPurchase(purchase) {
+  createPurchase(purchase) {
-        const url = this.base + "/don_confiao/api/catalog_sales/";
+    const url = this.base + '/don_confiao/api/sales/';
     return this.postRequest(url, purchase);
   }
 
   createReconciliationJar(reconciliation) {
-        const url = this.base + "/don_confiao/reconciliate_jar";
+    const url = this.base + '/don_confiao/reconciliate_jar';
     return this.postRequest(url, reconciliation);
   }
 
   createCustomer(customer) {
-        const url = this.base + "/don_confiao/api/customers/";
+    const url = this.base + '/don_confiao/api/customers/';
     return this.postRequest(url, customer);
   }
 
   getCSVForTryton() {
-        const url = this.base + "/don_confiao/api/sales/for_tryton";
+    const url = this.base + '/don_confiao/api/sales/for_tryton';
     return this.getRequest(url);
   }
 
   getProductsFromTryton(){
-        const url = this.base + "/don_confiao/api/importar_productos_de_tryton";
+    const url = this.base + '/don_confiao/api/importar_productos_de_tryton';
     return this.postRequest(url, {});
   }
 
   getCustomersFromTryton(){
-        const url = this.base + "/don_confiao/api/importar_clientes_de_tryton";
+    const url = this.base + '/don_confiao/api/importar_clientes_de_tryton';
     return this.postRequest(url, {});
   }
 
   sendSalesToTryton(){
-        const url = this.base + "/don_confiao/api/enviar_ventas_a_tryton";
+    const url = this.base + '/don_confiao/api/enviar_ventas_a_tryton';
     return this.postRequest(url, {});
   }
 
-    getCurrentUser() {
+  getRequest(url) {
-        const url = this.base + "/api/users/me/";
+    return new Promise ((resolve, reject) => {
-        return this.getRequest(url);
+      fetch(url)
+        .then(response => response.json())
+        .then(data => {
+          resolve(data);
+        })
+        .catch(error => {
+          reject(error);
+        });
+    });
+  }
+
+  postRequest(url, content) {
+    return new Promise((resolve, reject) => {
+      fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(content)
+      })
+        .then(response => {
+          if (!response.ok) {
+            reject(new Error(`Error ${response.status}: ${response.statusText}`));
+          } else {
+            response.json().then(data => {
+              if (!data) {
+                reject(new Error('La respuesta no es un JSON válido'));
+              } else {
+                resolve(data);
+              }
+            });
+          }
+        })
+        .catch(error => reject(error));
+    });
   }
 }
 

src/services/http.js

@@ -1,44 +0,0 @@
-import axios from 'axios';
-import AuthService from '@/services/auth';
-
-const http = axios.create({
-  baseURL: import.meta.env.VITE_DJANGO_BASE_URL,
-  headers: {
-    'Content-Type': 'application/json',
-  },
-});
-
-http.interceptors.request.use(
-  config => {
-    const token = AuthService.getAccessToken();
-    if (token) {
-      config.headers.Authorization = `Bearer ${token}`;
-    }
-    return config;
-  },
-  error => Promise.reject(error)
-);
-
-http.interceptors.response.use(
-  response => response,
-  async error => {
-    const originalRequest = error.config;
-
-    if (error.response?.status === 401 && !originalRequest._retry) {
-      originalRequest._retry = true;
-      try {
-        const newAccess = await AuthService.refresh();
-        originalRequest.headers.Authorization = `Bearer ${newAccess}`;
-        return http.request(originalRequest);
-      } catch (refreshError) {
-        AuthService.logout();
-        window.location.href = '/autenticarse';
-        return Promise.reject(refreshError);
-      }
-    }
-
-    return Promise.reject(error);
-  }
-);
-
-export default http;

src/stores/auth.js

@@ -1,19 +0,0 @@
-import { defineStore } from 'pinia'
-
-export const useAuthStore = defineStore('auth', {
-  state: () => ({
-    user: null
-  }),
-  getters: {
-    isAdmin: (state) => state.user?.role === 'administrator',
-    isAuthenticated: (state) => !!state.user
-  },
-  actions: {
-    setUser(user) {
-      this.user = user
-    },
-    clearUser() {
-      this.user = null
-    }
-  }
-})

src/stores/cart.js

@@ -1,43 +0,0 @@
-import { defineStore } from 'pinia'
-
-export const useCartStore = defineStore('cart', {
-  state: () => ({
-    items: []
-  }),
-  getters: {
-    cartCount: (state) => state.items.reduce((sum, item) => sum + item.quantity, 0),
-    cartTotal: (state) => state.items.reduce((sum, item) => sum + (item.price * item.quantity), 0)
-  },
-  actions: {
-    addItem(product) {
-      const existing = this.items.find(i => i.id === product.id)
-      if (existing) {
-        existing.quantity = product.quantity
-      } else {
-        this.items.push({
-          id: product.id,
-          name: product.name,
-          img: product.img,
-          price: product.price,
-          quantity: product.quantity,
-          measuring_unit: product.measuring_unit || 'Unidad'
-        })
-      }
-    },
-    removeItem(itemId) {
-      const index = this.items.findIndex(i => i.id === itemId)
-      if (index > -1) {
-        this.items.splice(index, 1)
-      }
-    },
-    updateQuantity({ itemId, quantity }) {
-      const item = this.items.find(i => i.id === itemId)
-      if (item) {
-        item.quantity = quantity
-      }
-    },
-    clearCart() {
-      this.items = []
-    }
-  }
-})

vite.config.mjs

@@ -39,9 +39,6 @@ export default defineConfig({
       imports: [
         'vue',
         'vue-router',
-        {
-          'unplugin-vue-router': ['definePage'],
-        },
       ],
       eslintrc: {
         enabled: true,
@@ -53,7 +50,7 @@ export default defineConfig({
   } },
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@': fileURLToPath(new URL('./src', import.meta.url))
     },
     extensions: [
       '.js',