Merge pull request 'Agregando proteccion a rutas' (#38) from add-auth-protection-routes into main

Reviewed-on: #38

.env.example

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

.gitignore

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

AGENTS.md

@@ -0,0 +1,114 @@
+# 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

Rakefile

@@ -12,12 +12,12 @@ namespace :live do
 
   desc 'monitorear salida'
   task :tail do
-    compose('logs', '-f', 'django', compose: DOCKER_COMPOSE)
+    compose('logs', '-f', 'frontend', compose: DOCKER_COMPOSE)
   end
 
   desc 'monitorear salida'
   task :tail_end do
-    compose('logs', '-f', '-n 50', 'django', compose: DOCKER_COMPOSE)
+    compose('logs', '-f', '-n 50', 'frontend', compose: DOCKER_COMPOSE)
   end
 
   desc 'iniciar entorno'

deploy/.dockerignore

@@ -0,0 +1,34 @@
+# 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

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

deploy/Dockerfile

@@ -0,0 +1,26 @@
+# 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

@@ -0,0 +1,81 @@
+#!/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

@@ -0,0 +1,29 @@
+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;
+}

docker-compose.yml

@@ -7,4 +7,7 @@ services:
       - ./:/app/
     ports:
       - "7001:3000"
+    environment:
+      - VITE_DJANGO_BASE_URL=http://localhost:7000
+      - VITE_API_IMPLEMENTATION=django
 

package.json

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

src/assets/icons/tryton-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" version="1.0"><path d="M256 196.25c0 40.122-21.534 60.038-64.603 59.747H67.495C22.498 255.997 0 236.663 0 197.994V60.184C0 20.06 22.016 0 66.049 0h124.384C234.144 0 256 20.206 256 60.62v135.63" style="text-align:start;line-height:125%;-inkscape-font-specification:Kimberley" font-size="108.872" font-weight="400" fill="#1b2019" font-family="Kimberley"/><path d="M19.006 169.515c5.949-3.124 17.076 1.966 22.115 10.12 4.518 7.31 27.406 14.114 35.516 10.558 5.412-2.372 6.779-5.378 7.202-15.844.798-19.685-3.636-35.098-17.99-62.536-7.205-13.77-14.753-29-16.775-33.835C47.052 73.14 41.601 64.6 36.961 59c-9.876-11.91-10.183-15.164-2.078-22.074C47.02 26.581 67.52 43.327 63.095 59.97c-2.178 8.191 2.003 20.14 15.85 45.295 16.431 29.85 33.084 41.94 43.03 31.243 2.57-2.763 5.759-18.178 8.698-42.04 4.421-35.889 4.399-38.037-.47-45.252-8.418-12.475-.48-25.42 12.84-20.943 13.43 4.513 22.192 22.778 13.775 28.714-3.735 2.633-4.942 10.29-6.636 42.097-2.173 40.785-.53 51.7 8.609 57.187 8.121 4.876 10.946 3.885 28.067-9.889 18.167-14.612 25.636-24.069 26.115-33.067.446-8.37 5.992-12.847 14.832-11.972 5.635.56 8.15 2.41 11.3 8.312 6.431 12.053 4.589 19.71-5.212 21.667-7.987 1.592-21.708 19.27-42.815 55.16-22.288 37.897-27.173 41.845-52.152 42.147-10.268.123-24.634-3.295-58.453-13.914-24.663-7.746-48.043-14.468-51.957-14.943-14.142-1.708-21.187-24.12-9.51-30.257z" fill="#ededed"/></svg>

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

@@ -1,51 +0,0 @@
-<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

@@ -0,0 +1,70 @@
+<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

@@ -0,0 +1,69 @@
+<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

@@ -0,0 +1,32 @@
+<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,11 +3,48 @@
     <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>
-    <template v-if="$vuetify.display.mdAndUp">
-      <v-btn icon="mdi-magnify" variant="text"></v-btn>
-      <v-btn icon="mdi-filter" variant="text"></v-btn>
-    </template>
-    <v-btn icon="mdi-dots-vertical" variant="text"></v-btn>
+    <v-btn 
+      v-if="!isAuthenticated" 
+      prepend-icon="mdi-login" 
+      variant="text"
+      @click="navigate('/autenticarse')"
+    >
+      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"
@@ -23,9 +60,9 @@
         :prepend-icon="item.icon"
         @click="navigate(item.route)"
       ></v-list-item>
-      <v-list-item prepend-icon="mdi-cog" title="Administracion" @click="toggleAdminMenu()"></v-list-item>
-      <v-list-item>
-        <v-list v-if="showAdminMenu">
+      <v-list-item prepend-icon="mdi-cog" title="Administracion" @click="toggleAdminMenu()" v-if="isAuthenticated && isAdmin"></v-list-item>
+      <v-list-item v-if="isAuthenticated && isAdmin && showAdminMenu">
+        <v-list>
           <v-list-item
             v-for="item in menuAdminItems"
             :key="item.title"
@@ -40,12 +77,23 @@
 </template>
 
 <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'},
@@ -55,14 +103,45 @@
              { title: 'Cuadres de tarro', route: '/cuadres_de_tarro', icon: 'mdi-chart-bar'},
              { title: 'CSV Tryton', route: '/ventas_para_tryton', icon: 'mdi-file-table'},
              { title: 'Compra adm', route: '/compra_admin', icon: 'mdi-cart'},
+             { title: 'Actualizar Productos De Tryton', route: '/sincronizar_productos_tryton', icon: 'trytonIcon'},
+             { title: 'Actualizar Clientes De Tryton', route: '/sincronizar_clientes_tryton', icon: 'trytonIcon'},
+             { title: 'Actualizar Ventas Tryton', route: '/sincronizar_ventas_tryton', icon: 'trytonIcon'}
          ],
-     }),
-     watch: {
-         group () {
-             this.drawer = false
-         },
+      }),
+      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);
          },
@@ -73,6 +152,13 @@
          toggleAdminMenu() {
              this.showAdminMenu = !this.showAdminMenu;
          },
+         logout() {
+            AuthService.logout();
+            this.isAuthenticated = false;
+            this.user = null;
+            this.authStore.clearUser();
+            this.$router.push('/');
+          },
      }
   }
-</script>
+ </script>

src/components/Purchase.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">
@@ -186,17 +186,17 @@
          clients: [],
          products: [],
      };
-   },
+    },
      created() {
-     this.fetchClients();
-     this.fetchProducts();
-     this.fetchPaymentMethods();
-   },
-   watch: {
-     group () {
-       this.drawer = false
+       this.fetchClients();
+       this.fetchProducts();
+       this.fetchPaymentMethods();
      },
-   },
+    watch: {
+      group () {
+        this.drawer = false
+      },
+    },
    beforeMount() {
       window.addEventListener('beforeunload', this.confirmLeave);
    },
@@ -228,8 +228,8 @@
        });
      },
    },
-   methods: {
-     openModal() {
+     methods: {
+       openModal() {
       this.$refs.customerModal.openModal();
      },
      onFormChange() {
@@ -307,25 +307,25 @@
      calculateSubtotal(line) {
        return line.unit_price * line.quantity;
      },
-     async submit() {
-       this.$refs.purchase.validate();
-         if (this.valid) {
-           this.api.createPurchase(this.purchase)
-               .then(data => {
-                 console.log('Compra enviada:', data);
-                 this.$router.push({
-                   path: "/summary_purchase",
-                   query : {id: parseInt(data.id)}
-                 });
-               })
-           .catch(error => console.error('Error al enviarl la compra:', error));
-       } else {
-         this.show_alert_purchase = true;
-           setTimeout(() => {
-             this.show_alert_purchase = false;
-           }, 4000);
-       }
-     },
+      async submit() {
+        this.$refs.purchase.validate();
+          if (this.valid) {
+             this.api.createPurchase(this.purchase)
+                 .then(data => {
+                   console.log('Compra enviada:', data);
+                   this.$router.push({
+                    path: "/summary_purchase",
+                    query : {id: parseInt(data.id)}
+                  });
+                })
+            .catch(error => console.error('Error al enviarl la compra:', error));
+        } else {
+          this.show_alert_purchase = true;
+            setTimeout(() => {
+              this.show_alert_purchase = false;
+            }, 4000);
+        }
+      },
      navigate(route) {
        this.$router.push(route);
      },

src/components/SummaryPurchase.vue

@@ -52,6 +52,7 @@
               <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>
@@ -87,6 +88,7 @@
           {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/catalog/Card.vue

@@ -0,0 +1,202 @@
+<template>
+  <v-card class="product-card">
+    <v-row no-gutters align="center" class="w-100 py-3 px-2">
+      <v-col cols="12" md="3" class="d-flex justify-center">
+        <v-img :src="product.img" class="product-img" contain></v-img>
+      </v-col>
+
+      <v-col cols="12" md="5">
+        <v-card-title class="product-name">{{ product.name }}</v-card-title>
+        <v-card-subtitle class="product-description">{{ product.description }}</v-card-subtitle>
+        <div class="prices mt-3">
+          <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>
+      </v-col>
+
+      <v-col cols="12" md="4" class="d-flex align-center justify-md-end justify-center mt-3 mt-md-0">
+        <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>
+.product-card {
+  border: 1px solid #e0e0e0;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  transition: all 0.3s ease;
+}
+.product-card:hover {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  transform: translateY(-2px);
+  border-color: #bdbdbd;
+}
+.product-img {
+  width: 120px;
+  height: 120px;
+  border-radius: 10px;
+  object-fit: cover;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+.product-name {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #2c3e50;
+  line-height: 1.3;
+  padding: 0 0 4px 0;
+}
+.product-description {
+  font-size: 0.85rem;
+  color: #7f8c8d;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.prices {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.price-unit, .price-total {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.price-label {
+  font-size: 0.75rem;
+  color: #95a5a6;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.price-value {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #2c3e50;
+}
+.price-value.total {
+  color: #27ae60;
+  font-size: 1.1rem;
+}
+.quantity-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: #f5f5f5;
+  border-radius: 25px;
+  padding: 4px;
+}
+.quantity-input {
+  max-width: 70px;
+}
+.quantity-input input {
+  text-align: center;
+  font-weight: 600;
+}
+.qty-btn {
+  min-width: 32px !important;
+  height: 32px !important;
+  border-radius: 50% !important;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+.qty-btn:hover {
+  background: #e0e0e0;
+}
+.qty-btn-add {
+  background: #27ae60;
+  color: white;
+}
+.qty-btn-add:hover {
+  background: #219a52 !important;
+}
+@media (max-width: 960px) {
+  .product-img {
+    width: 100px;
+    height: 100px;
+  }
+}
+@media (max-width: 600px) {
+  .product-card {
+    border-radius: 8px;
+  }
+  .product-img {
+    width: 80px;
+    height: 80px;
+  }
+  .product-name {
+    font-size: 1rem;
+    text-align: center;
+  }
+  .prices {
+    align-items: center;
+  }
+}
+</style>

src/components/catalog/Cart.vue

@@ -0,0 +1,141 @@
+<template>
+  <v-card>
+    <v-card-title class="d-flex align-center">
+      <v-icon class="mr-2">mdi-cart</v-icon>
+      Carrito
+      <v-chip v-if="cartCount" color="primary" class="ml-2">{{ cartCount }}</v-chip>
+    </v-card-title>
+    
+    <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="300" class="overflow-y-auto">
+      <v-list-item v-for="item in cartItems" :key="item.id">
+        <template v-slot:prepend>
+          <v-avatar size="40" rounded>
+            <v-img :src="item.img" cover></v-img>
+          </v-avatar>
+        </template>
+        
+        <v-list-item-title>{{ item.name }}</v-list-item-title>
+        <v-list-item-subtitle class="d-flex align-center">
+          <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="ml-2">x {{ currency(item.price) }}</span>
+        </v-list-item-subtitle>
+        
+        <template v-slot:append>
+          <div class="d-flex align-center">
+            <strong>{{ currency(item.price * item.quantity) }}</strong>
+            <v-btn 
+              icon="mdi-delete" 
+              size="small" 
+              variant="text" 
+              color="red"
+              class="ml-2"
+              @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">
+      <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">
+      <v-btn color="primary" block @click="$emit('checkout')">
+        Finalizar Compra
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: 'Cart',
+  props: {
+    cartItems: {
+      type: Array,
+      default: () => []
+    },
+    currency: {
+      type: Function,
+      required: true
+    }
+  },
+  emits: ['remove', 'checkout', 'update-quantity'],
+  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);
+    }
+  },
+  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>
+.qty-input {
+  width: 70px;
+}
+.qty-input input {
+  text-align: center;
+}
+.quantity-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.qty-btn {
+  min-width: 28px !important;
+  height: 28px !important;
+  border-radius: 14px !important;
+}
+</style>

src/pages/autenticarse.vue

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

src/pages/catalog.vue

@@ -0,0 +1,181 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col cols="12" md="9">
+        <v-card-title>
+          <span class="headline">Catálogo</span>
+        </v-card-title>
+        <v-list-item v-for="item in items" :key="item.id" class="catalog-item">
+          <Card :product="item" :increase="increase" :decrease="decrease" :currency="currency" :updateQuantity="updateQuantity" @add-to-cart="addToCart"/>
+        </v-list-item>
+      </v-col>
+      
+      <v-col cols="12" md="3">
+        <div class="cart-sidebar">
+          <Cart 
+            :cart-items="cartItems" 
+            :currency="currency"
+            @remove="removeFromCart"
+            @checkout="goToCheckout"
+            @update-quantity="updateCartQuantity"
+          />
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import Card from '@/components/catalog/Card.vue';
+import Cart from '@/components/catalog/Cart.vue';
+import { useCartStore } from '@/stores/cart';
+import { inject } from 'vue';
+
+export default {
+  components: {
+    Card,
+    Cart
+  },
+  setup() {
+    const cartStore = useCartStore();
+    return { cartStore };
+  },
+  data() {
+    return {
+      api: inject('api'),
+      items: [],
+    };
+  },
+  computed: {
+    cartItems: {
+      get() {
+        return this.cartStore.items;
+      },
+      set(value) {
+        this.cartStore.items = value;
+      }
+    },
+    cartCount() {
+      return this.cartStore.cartCount;
+    }
+  },
+  created() {
+    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.$router.push('/comprar');
+    },
+    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;
+}
+.catalog-item {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.cart-sidebar {
+  position: sticky;
+  top: 80px;
+}
+.product-img {
+  width: 150px;
+  height: 100px;
+  border-radius: 6px;
+  object-fit: cover;
+}
+.quantity-controls {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.prices .price-line {
+  margin-bottom: 4px;
+}
+.quantity-input {
+  max-width: 90px;
+}
+.quantity-input input {
+  text-align: center;
+}
+.qty-btn {
+  min-width: 36px !important;
+  height: 36px !important;
+  border-radius: 18px !important;
+}
+@media (max-width: 960px) {
+  .cart-sidebar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: auto;
+    z-index: 100;
+  }
+}
+@media (max-width: 600px) {
+  .product-img {
+    width: 120px;
+    height: 80px;
+  }
+}
+</style>

src/pages/compra_admin.vue

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

src/pages/comprar.vue

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

src/pages/cuadrar_tarro.vue

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

src/pages/cuadres_de_tarro.vue

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

src/pages/salir.vue

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

src/pages/sincronizar_clientes_tryton.vue

@@ -0,0 +1,163 @@
+<template>
+  <v-container v-if="authStore.isAdmin" class="fill-height">
+    <v-row v-if="!result && !loading" justify="center">
+      <v-col cols="12" md="8">
+        <v-card class="pa-6" elevation="4">
+          <v-card-title class="text-h5 font-weight-bold text-center">
+            🔄 Sincronización de Clientes
+          </v-card-title>
+
+          <v-card-text>
+            <p>
+              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">
+              <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
+              plataforma para evitar conflictos.
+            </p>
+          </v-card-text>
+
+          <v-card-actions class="justify-center">
+            <v-btn color="primary" @click="startSync">
+              Iniciar Sincronización
+            </v-btn>
+            <v-btn text @click="$router.push('/')">
+              Cancelar
+            </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-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_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 { inject } from 'vue';
+
+  export default {
+    name: 'CustomersFromTryton',
+    setup() {
+      const authStore = useAuthStore();
+      return { authStore };
+    },
+    data() {
+      return {
+        api: inject('api'),
+        loading: false,
+        result: null,
+      }
+    },
+    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;
+            this.loading = false;
+          })
+          .catch(error => {
+            console.error('Error al sincronizar clientes:', error);
+            this.loading = false;
+          });
+      }
+    }
+  }
+</script>

src/pages/sincronizar_productos_tryton.vue

@@ -0,0 +1,150 @@
+<template>
+  <v-container v-if="authStore.isAdmin" class="fill-height">
+    <v-row v-if="!result && !loading" justify="center">
+      <v-col cols="12" md="8">
+        <v-card class="pa-6" elevation="4">
+          <v-card-title class="text-h5 font-weight-bold text-center">
+            🔄 Sincronización de Productos
+          </v-card-title>
+
+          <v-card-text>
+            <p>
+              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">
+              <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 productos en la
+              plataforma para evitar conflictos.
+            </p>
+          </v-card-text>
+
+          <v-card-actions class="justify-center">
+            <v-btn color="primary" @click="startSync">
+              Iniciar Sincronización
+            </v-btn>
+            <v-btn text @click="$router.push('/')">
+              Cancelar
+            </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 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 { inject } from 'vue';
+
+  export default {
+    name: 'ProductsFromTryton',
+    setup() {
+      const authStore = useAuthStore();
+      return { authStore };
+    },
+    data() {
+      return {
+        api: inject('api'),
+        loading: false,
+        result: null,
+      }
+    },
+    methods: {
+      formatItems(ids) {
+        if (!ids || ids.length === 0) return [];
+        return ids.map(id => ({ id }));
+      },
+      startSync() {
+        this.loading = true;
+        this.api.getProductsFromTryton()
+          .then(response => {
+            this.result = response;
+            this.loading = false;
+          })
+          .catch(error => {
+            console.error('Error al sincronizar productos:', error);
+            this.loading = false;
+          });
+      }
+    }
+  }
+</script>

src/pages/sincronizar_ventas_tryton.vue

@@ -0,0 +1,120 @@
+<template>
+  <v-container v-if="authStore.isAdmin" class="fill-height">
+    <v-row v-if="!result && !loading" justify="center">
+      <v-col cols="12" md="8">
+        <v-card class="pa-6" elevation="4">
+          <v-card-title class="text-h5 font-weight-bold text-center">
+            🔄 Sincronización de Ventas
+          </v-card-title>
+
+          <v-card-text>
+            <p>
+              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">
+              <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>
+          </v-card-text>
+
+          <v-card-actions class="justify-center">
+            <v-btn color="primary" @click="startSync">
+              Iniciar Sincronización
+            </v-btn>
+            <v-btn text @click="$router.push('/')">
+              Cancelar
+            </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 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 { inject } from 'vue';
+
+  export default {
+    name: 'SalesToTryton',
+    setup() {
+      const authStore = useAuthStore();
+      return { authStore };
+    },
+    data() {
+      return {
+        api: inject('api'),
+        loading: false,
+        result: null,
+      }
+    },
+    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.loading = false;
+          })
+          .catch(error => {
+            console.error('Error al sincronizar ventas:', error);
+            this.loading = false;
+          });
+      }
+    }
+  }
+</script>

src/pages/summary_purchase.vue

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

src/pages/ventas_para_tryton.vue

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

src/router/index.js

@@ -9,12 +9,39 @@
 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-implementation.js

@@ -3,7 +3,7 @@ import Api from './api';
 
 class ApiImplementation {
   constructor() {
-    const implementation = process.env.API_IMPLEMENTATION;
+    const implementation = import.meta.env.VITE_API_IMPLEMENTATION;
     let apiImplementation;
     if (implementation === 'django') {
       apiImplementation = new DjangoApi();

src/services/api.js

@@ -31,10 +31,6 @@ class Api {
     return this.apiImplementation.getReconciliation(reconciliationId);
   }
 
-  isValidAdminCode(code) {
-    return this.apiImplementation.isValidAdminCode(code);
-  }
-
   createPurchase(purchase) {
     return this.apiImplementation.createPurchase(purchase);
   }
@@ -50,6 +46,22 @@ class Api {
   getCSVForTryton() {
     return this.apiImplementation.getCSVForTryton();
   }
+
+  getProductsFromTryton() {
+    return this.apiImplementation.getProductsFromTryton();
+  }
+
+  getCustomersFromTryton() {
+    return this.apiImplementation.getCustomersFromTryton();
+  }
+
+  sendSalesToTryton(){
+    return this.apiImplementation.sendSalesToTryton();
+  }
+
+  getCurrentUser() {
+    return this.apiImplementation.getCurrentUser();
+  }
 }
 
 export default Api;

src/services/auth.js

@@ -0,0 +1,72 @@
+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,6 +1,17 @@
+import AuthService from '@/services/auth';
+import http from '@/services/http';
+
 class DjangoApi {
   constructor() {
-    this.base = process.env.DJANGO_BASE_URL;
+    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() {
@@ -38,11 +49,6 @@ class DjangoApi {
     return this.getRequest(url);
   }
 
-  isValidAdminCode(code) {
-    const url = this.base + `/don_confiao/api/admin_code/validate/${code}`
-    return this.getRequest(url)
-    }
-
   createPurchase(purchase) {
     const url = this.base + '/don_confiao/api/sales/';
     return this.postRequest(url, purchase);
@@ -63,44 +69,25 @@ class DjangoApi {
     return this.getRequest(url);
   }
 
-  getRequest(url) {
-    return new Promise ((resolve, reject) => {
-      fetch(url)
-        .then(response => response.json())
-        .then(data => {
-          resolve(data);
-        })
-        .catch(error => {
-          reject(error);
-        });
-    });
+  getProductsFromTryton(){
+    const url = this.base + '/don_confiao/api/importar_productos_de_tryton';
+    return this.postRequest(url, {});
   }
 
-  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));
-    });
+  getCustomersFromTryton(){
+    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';
+    return this.postRequest(url, {});
+  }
+
+  getCurrentUser() {
+    const url = this.base + '/api/users/me/';
+    return this.getRequest(url);
   }
 }
 
-  export default DjangoApi;
+export default DjangoApi;

src/services/http.js

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,43 @@
+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,6 +39,9 @@ export default defineConfig({
       imports: [
         'vue',
         'vue-router',
+        {
+          'unplugin-vue-router': ['definePage'],
+        },
       ],
       eslintrc: {
         enabled: true,
@@ -47,12 +50,10 @@ export default defineConfig({
     }),
   ],
   define: { 'process.env': {
-    API_IMPLEMENTATION: 'django',
-    DJANGO_BASE_URL: 'http://localhost:7000'
   } },
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
     extensions: [
       '.js',