Merge pull request 'feat/consulta-publica-pedido' (#53) from feat/consulta-publica-pedido into main

Reviewed-on: #53

.env.example

@@ -0,0 +1,3 @@
+VITE_API_IMPLEMENTATION=django
+VITE_DJANGO_BASE_URL=http://localhost:7000
+VITE_CONTACT_PHONE=3023567797

.eslintrc.js

@@ -0,0 +1,37 @@
+/**
+ * .eslint.js
+ *
+ * ESLint configuration file.
+ */
+
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'vuetify',
+    './.eslintrc-auto-import.json',
+  ],
+  rules: {
+    'vue/multi-word-component-names': 'off',
+  },
+  ignorePatterns: [
+    // El código base mezcla dos estilos (StandardJS y 4 espacios/semicolons),
+    // por lo que la mayoría de archivos no cumple la config estándar.
+    // Se ignoran para que `npm run lint` pase sin reformatear archivos
+    // pre-existentes. Los archivos nuevos de esta tarea se mantienen
+    // lint-eados. Revisar cuando se unifique el estilo del proyecto.
+    //
+    // Los patrones matchean archivos y no directorios: si se ignorara un
+    // directorio (`src/**`), el walker de ESLint no descendería y las
+    // negaciones anidadas nunca se evaluarían.
+    'src/**/*.vue',
+    'src/**/*.js',
+    '!src/components/PublicOrderSummary.vue',
+    '!src/components/order/*.vue',
+    '!src/components/order/**/*.vue',
+    '!src/pages/pedido/*.vue',
+    '!src/pages/pedido/**/*.vue',
+  ],
+}

.gitignore

@@ -5,6 +5,7 @@ node_modules
 # local env files
 .env.local
 .env.*.local
+.env
 
 # Log files
 npm-debug.log*
@@ -23,5 +24,13 @@ pnpm-debug.log*
 /.browserslistrc
 /.editorconfig
 /.eslintrc-auto-import.json
-/.eslintrc.js
 /.vite/
+
+# Deploy environment files
+deploy/.env.staging
+deploy/.env.production
+
+# Generated type declarations
+/auto-imports.d.ts
+/components.d.ts
+/typed-router.d.ts

AGENTS.md

@@ -0,0 +1,161 @@
+# 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 se registran rutas a mano, excepto en casos especiales)
+- `router/index.js` usa `setupLayouts(routes)` + guard `beforeEach`:
+  - Meta `requiresAuth` → redirige a `/autenticarse` si no hay token
+  - Meta `requiresAdmin` (o rutas en `ADMIN_ROUTES`) → redirige si el usuario no es admin
+  - **Rutas públicas** (ej: `/pedido/:code?`) NO deben llevar `requiresAuth`
+
+## Environment Variables
+- `VITE_DJANGO_BASE_URL` - URL del backend Django
+- `VITE_API_IMPLEMENTATION` - Selecciona la implementación de API (default: django)
+
+## Commands
+```bash
+npm run dev      # Desarrollo (puerto 3000)
+npm run preview  # Preview build
+npm run lint     # ESLint --fix (¡OJO: reformatea archivos, ver sección Lint!)
+npm test         # Vitest (unit tests)
+npm run test:watch
+npx vite build --outDir /tmp/opencode/dist-check   # Verificar build sin tocar dist/
+```
+
+## Lint y Estilos (IMPORTANTE)
+
+### El repo mezcla DOS estilos JS (~50/50)
+No hay un estilo mayoritario. El código histórico está partido:
+- **StandardJS** (2 espacios, sin semicolons, comillas simples): `main.js`, `stores/*`, `plugins/*`, `router/index.js`, `services/http.js` y muchos `.vue`
+- **4 espacios + semicolons + comillas dobles**: la mayoría de `services/` y otros `.vue`
+
+### Config de ESLint
+- `.eslintrc.js` está **versionado** y extiende `vuetify` (estilo **StandardJS**)
+- Tiene `ignorePatterns` masivo: `src/**` excepto los archivos nuevos de la tarea
+  (`!src/components/order/**`, `!src/components/PublicOrderSummary.vue`, `!src/pages/pedido/**`)
+- **Los archivos nuevos deben seguir StandardJS** para quedar lint-eados:
+  - 2 espacios (indent), sin semicolons, comillas simples
+  - `function () {}` con espacio, `const f = (x) => x` (arrow-parens en args únicos NO)
+  - Sin trailing commas; `{ clave: valor }` con espacios internos
+  - Eventos personalizados en kebab-case, `v-slot:nombre` (no `#nombre`)
+
+### PELIGRO: `npm run lint` usa `--fix`
+- Reformatea automáticamente TODO archivo no ignorado que no cumpla estilo
+- Puede modificar decenas de archivos de golpe. Antes de usarlo revisar qué está ignorado
+- Para **evaluar** sin modificar: `npx eslint . --ignore-path .gitignore` (sin `--fix`)
+- Para desglosar por archivo/regla: `npx eslint . --ignore-path .gitignore --format json | node -e "..."`
+
+## Testing (Vitest)
+- Correr con `npm test` (`vitest run`)
+- Infra en `tests/setup.js` (polyfills: `navigator.clipboard`, `ResizeObserver`, `IntersectionObserver`, `matchMedia`) + `vitest.config.mjs`
+- **`vitest.config.mjs` requiere `server.deps.inline: ['vuetify']`** para montar componentes Vuetify en jsdom
+- Los tests **no usan globals**: importar `describe/it/expect/vi` explícitamente desde `vitest`
+- Tests de páginas con router: esperar a que el router actualice `route.params` con un helper (`waitForRouteParam`)
+- Los `.d.ts` generados (`auto-imports.d.ts`, `components.d.ts`, `typed-router.d.ts`) están en `.gitignore`
+
+## Common Issues
+1. **Página en blanco:** Verificar que los componentes en `src/pages/*.vue` tengan import explícito
+2. **`npm run build` falla con `EACCES`:** `dist/` tiene archivos root (docker, gitignored) y no se puede borrar. Verificar el build con `npx vite build --outDir /tmp/opencode/dist-check`
+3. **Build falla con "Illegal '/' in tags" / "Invalid end tag":** tags de `CurrencyText` malformados pre-existentes (ej: `<CurrencyText <:value="..."/CurrencyText >` o `</CurrencyText>` duplicado). Buscar `CurrencyText` mal cerrado en `ReconciliationJar.vue` / `ReconciliationJarView.vue`
+4. **Después de mergear `main`:** correr `npm install` — las deps nuevas (ej: `leaflet` en `StoreLocation.vue`) quedan en `package.json` pero no instaladas → el build falla con "Rollup failed to resolve import"
+5. **Errores de lint:** ver sección Lint y Estilos (el repo no cumple un único estilo; no "arreglar" el lint de archivos pre-existentes)
+
+## 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
+- `/don_confiao/resumen_publico/<code>` - Resumen público de pedido por código (AllowAny, SIN `api/`)
+
+## Consulta Pública de Pedidos
+- Ruta `/pedido/:code?` (pública, sin `requiresAuth`)
+- `getPublicOrderSummary(code)` en `services/api.js` / `django-api.js`
+- Componentes modulares en `src/components/order/`: `OrderAccessInfo.vue` (código + link), `OrderCustomer.vue`, `OrderLines.vue`, `OrderPayment.vue`, `OrderTotal.vue`
+- Orquestador: `PublicOrderSummary.vue`; `OrderAccessInfo.vue` se comparte con `SummaryPurchase.vue`

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,3 @@
+VITE_API_IMPLEMENTATION=django
+VITE_DJANGO_BASE_URL=http://localhost:7000
+VITE_CONTACT_PHONE=

deploy/Dockerfile

@@ -0,0 +1,28 @@
+# Stage 1: Build with Node.js
+FROM node:20-alpine AS builder
+
+ARG VITE_DJANGO_BASE_URL
+ARG VITE_API_IMPLEMENTATION
+ARG VITE_CONTACT_PHONE
+
+ENV VITE_DJANGO_BASE_URL=$VITE_DJANGO_BASE_URL
+ENV VITE_API_IMPLEMENTATION=$VITE_API_IMPLEMENTATION
+ENV VITE_CONTACT_PHONE=$VITE_CONTACT_PHONE
+
+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,82 @@
+#!/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"
+BUILD_ARGS="$BUILD_ARGS --build-arg VITE_CONTACT_PHONE=$VITE_CONTACT_PHONE"
+
+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;
+}

package.json

@@ -5,11 +5,15 @@
     "dev": "vite --host 0.0.0.0",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "eslint . --fix --ignore-path .gitignore"
+    "lint": "eslint . --fix --ignore-path .gitignore",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@mdi/font": "7.4.47",
+    "axios": "^1.13.5",
     "core-js": "^3.37.1",
+    "leaflet": "^1.9.4",
     "roboto-fontface": "*",
     "vee-validate": "^4.14.6",
     "vue": "^3.4.31",
@@ -17,6 +21,8 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.5",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/test-utils": "^2.4.11",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-config-vuetify": "^1.0.0",
@@ -25,8 +31,10 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.4.0",
     "eslint-plugin-vue": "^9.27.0",
+    "jsdom": "^26.1.0",
     "pinia": "^2.1.7",
     "sass": "1.77.6",
+    "typescript": "^5.9.3",
     "unplugin-auto-import": "^0.17.6",
     "unplugin-fonts": "^1.1.1",
     "unplugin-vue-components": "^0.27.2",
@@ -34,6 +42,7 @@
     "vite": "^5.3.3",
     "vite-plugin-vue-layouts": "^0.11.0",
     "vite-plugin-vuetify": "^2.0.3",
+    "vitest": "^3.2.7",
     "vue-router": "^4.4.0"
   }
 }

src/App.vue

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

src/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

@@ -1,341 +0,0 @@
-<template>
-<v-container>
-  <v-form ref="purchase" v-model="valid" @change="onFormChange">
-    <v-row>
-        <v-col>
-            <v-autocomplete
-                v-model="purchase.customer"
-                :items="filteredClients"
-                :search="client_search"
-                no-data-text="No se hallaron clientes"
-                item-title="name"
-                item-value="id"
-                @update:model-value="onFormChange"
-                label="Cliente"
-                :rules="[rules.required]"
-                required
-                class="mr-4"
-            ></v-autocomplete>
-            <v-btn color="primary" @click="openModal">Agregar Cliente</v-btn>
-            <CreateCustomerModal ref="customerModal" @customerCreated="handleNewCustomer"/>
-      </v-col>
-      <v-col lg="4">
-          <v-text-field
-              v-model="purchase.date"
-              label="Fecha"
-              type="datetime-local"
-              :rules="[rules.required]"
-              required
-              readonly
-          ></v-text-field>
-      </v-col>
-     </v-row>
-    <v-textarea
-      v-model="purchase.notes"
-      label="Notas"
-      rows="2"
-      ></v-textarea>
-    <v-divider></v-divider>
-    <v-container>
-      <v-toolbar>
-        <v-toolbar-title secondary>Productos</v-toolbar-title>
-p      </v-toolbar>
-      <v-container v-for="(line, index) in purchase.saleline_set" :key="line.id">
-        <v-row>
-            <v-col
-                lg="9">
-            <v-autocomplete
-              v-model="line.product"
-              :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
-              >
-              <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
-              lg="2"
-          >
-              <v-text-field
-                  v-model.number="line.quantity"
-                  label="Cantidad"
-                  type="number"
-                  :rules="[rules.required,rules.positive]"
-                  required
-              ></v-text-field>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <v-text-field
-              v-model.number="line.unit_price"
-              label="Precio"
-              type="number"
-              :rules="[rules.required]"
-              prefix="$"
-              required
-              ></v-text-field>
-          </v-col>
-          <v-col>
-            <v-text-field
-              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
-                disable
-                persistent-placeholder="true"
-              ></v-text-field>
-            </v-col>
-            <v-col>
-              <v-btn @click="removeLine(index)" color="red">Eliminar</v-btn>
-            </v-col>
-        </v-row>
-        <v-alert type="warning" :duration="2000" closable v-model="show_alert_lines">
-          No se puede eliminar la única línea.
-        </v-alert>
-      </v-container>
-        <v-btn @click="addLine" color="blue">Agregar</v-btn>
-        </v-container>
-        <v-divider></v-divider>
-        <v-text-field
-          :value="calculateTotal"
-          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="Pago en"
-            :rules="[rules.required]"
-            required
-          ></v-select>
-          <v-btn @click="openCasherModal" v-if="purchase.payment_method === 'CASH'">Calcular Devuelta</v-btn>
-          <CasherModal :total_purchase="calculateTotal" ref="casherModal"</CasherModal>
-        </v-container>
-        <v-btn @click="submit" color="green">Comprar</v-btn>
-        <v-alert type="error" :duration="2000" closable v-model="show_alert_purchase">
-          Verifique los campos obligatorios.
-        </v-alert>
-  </v-form>
-</v-container>
-</template>
-
-<script>
-  import CustomerForm from './CreateCustomerModal.vue';
-  import CasherModal from './CasherModal.vue';
-  import { inject } from 'vue';
-
-  export default {
-    name: 'DonConfiao',
-    components: {
-     CustomerForm,
-     CasherModal,
-   },
-   props: {
-     msg: String
-   },
-   data() {
-     return {
-       api: inject('api'),
-       valid: false,
-       form_changed: false,
-       show_alert_lines: false,
-       show_alert_purchase: false,
-       client_search: '',
-       product_search: '',
-       payment_methods: null,
-       purchase: {
-         date: this.getCurrentDate(),
-         customer: null,
-         notes: '',
-         payment_method: null,
-         saleline_set: [{product:'', unit_price: 0, quantity: 0, unit: ''}],
-       },
-       rules: {
-           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: [],
-     };
-   },
-     created() {
-     this.fetchClients();
-     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() {
-      this.$refs.customerModal.openModal();
-     },
-     onFormChange() {
-       this.form_changed = true;
-     },
-     openCasherModal() {
-       this.$refs.casherModal.dialog = true
-     },
-     confirmLeave(event) {
-       if (this.form_changed) {
-         const message = '¿seguro que quieres salir? Perderas la información diligenciada';
-         event.preventDefault();
-         event.returnValue = message;
-         return message;
-       }
-     },
-     getCurrentDate() {
-         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;
-     },
-       onProductChange(index) {
-           const selectedProductId = this.purchase.saleline_set[index].product;
-       const selectedProduct = this.products.find(p => p.id == selectedProductId);
-         this.purchase.saleline_set[index].unit_price = selectedProduct.price;
-         this.purchase.saleline_set[index].measuring_unit = selectedProduct.measuring_unit;
-     },
-     fetchClients() {
-       this.api.getCustomers()
-           .then(data => {
-             this.clients = data;
-           })
-           .catch(error => {
-             console.error(error);
-           });
-     },
-       handleNewCustomer(newCustomer){
-           this.clients.push(newCustomer);
-           this.purchase.customer = newCustomer.id;
-       },
-     fetchProducts() {
-       this.api.getProducts()
-           .then(data => {
-             this.products = data;
-           })
-           .catch(error => {
-             console.error(error);
-           });
-     },
-     fetchPaymentMethods() {
-       this.api.getPaymentMethods()
-           .then(data => {
-             this.payment_methods = data;
-           })
-           .catch(error => {
-             console.error(error);
-           });
-     },
-     addLine() {
-       this.purchase.saleline_set.push({ product: '', unit_price: 0, quantity:0, measuring_unit: ''});
-     },
-     removeLine(index) {
-         if (this.purchase.saleline_set.length > 1) {
-             this.purchase.saleline_set.splice(index, 1);
-         } else {
-           this.show_alert_lines = true;
-           setTimeout(() => {
-             this.show_alert_lines = false;
-           }, 2000);
-         }
-     },
-     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);
-       }
-     },
-     navigate(route) {
-       this.$router.push(route);
-     },
-     formatPrice(price) {
-       return new Intl.NumberFormat('es-ES', { style: 'currency', currency: 'COP' }).format(price);
-     },
-   },
-     mounted() {
-         this.fetchClients();
-     }
- };
-</script>
-<style>
-</style>

src/components/AppFooter.vue

@@ -1,39 +1,62 @@
 <template>
-  <v-footer height="40" app>
+  <div>
-    <a
+    <!-- Footer completo: visible siempre en desktop, toggle en mobile -->
-      v-for="item in items"
+    <v-footer
-      :key="item.title"
+      v-if="expanded || !isMobile"
-      :href="item.href"
+      height="40"
-      :title="item.title"
+      app
-      class="d-inline-block mx-2 social-link"
+      class="app-footer"
-      rel="noopener noreferrer"
+      :class="{ 'footer-overlay': isMobile }"
-      target="_blank"
     >
-      <v-icon
-        :icon="item.icon"
-        :size="item.icon === '$vuetify' ? 24 : 16"
-      />
-    </a>
-
-    <div
-      class="text-caption text-disabled"
-      style="position: absolute; right: 16px;"
-    >
-      &copy; 2016-{{ (new Date()).getFullYear() }} <span class="d-none d-sm-inline-block">Vuetify, LLC</span>
-      —
       <a
-        class="text-decoration-none on-surface"
+        v-for="item in items"
-        href="https://vuetifyjs.com/about/licensing/"
+        :key="item.title"
+        :href="item.href"
+        :title="item.title"
+        class="d-inline-block mx-2 social-link"
         rel="noopener noreferrer"
         target="_blank"
       >
-        MIT License
+        <v-icon
+          :icon="item.icon"
+          :size="item.icon === '$vuetify' ? 24 : 16"
+        />
       </a>
-    </div>
+
-  </v-footer>
+      <div
+        class="text-caption text-disabled"
+        style="position: absolute; right: 16px;"
+      >
+        &copy; 2016-{{ (new Date()).getFullYear() }} <span class="d-none d-sm-inline-block">Vuetify, LLC</span>
+        —
+        <a
+          class="text-decoration-none on-surface"
+          href="https://vuetifyjs.com/about/licensing/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          MIT License
+        </a>
+      </div>
+    </v-footer>
+
+    <!-- Botón flotante: solo en mobile -->
+    <v-btn
+      v-if="isMobile"
+      icon
+      size="small"
+      class="footer-toggle-btn"
+      :color="expanded ? 'primary' : undefined"
+      @click="expanded = !expanded"
+    >
+      <v-icon :icon="expanded ? 'mdi-close' : '$vuetify'" :size="expanded ? 20 : 24" />
+    </v-btn>
+  </div>
 </template>
 
 <script setup>
+  import { ref, computed, onMounted, onUnmounted } from 'vue';
+
   const items = [
     {
       title: 'Vuetify Documentation',
@@ -65,15 +88,48 @@
       icon: `mdi-reddit`,
       href: 'https://reddit.com/r/vuetifyjs',
     },
-  ]
+  ];
+
+  const expanded = ref(false);
+  const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1200);
+
+  const isMobile = computed(() => windowWidth.value < 960);
+
+  const onResize = () => {
+    windowWidth.value = window.innerWidth;
+  };
+
+  onMounted(() => {
+    window.addEventListener('resize', onResize);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', onResize);
+  });
 </script>
 
 <style scoped lang="sass">
-  .social-link :deep(.v-icon)
+.social-link :deep(.v-icon)
-    color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity))
+  color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity))
-    text-decoration: none
+  text-decoration: none
-    transition: .2s ease-in-out
+  transition: .2s ease-in-out
 
-    &:hover
+  &:hover
-      color: rgba(25, 118, 210, 1)
+    color: rgba(25, 118, 210, 1)
+
+/* Botón flotante para mobile */
+.footer-toggle-btn
+  position: fixed
+  bottom: 12px
+  right: 12px
+  z-index: 2000
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25)
+
+/* Overlay del footer en mobile */
+.footer-overlay
+  position: fixed !important
+  bottom: 0
+  left: 0
+  right: 0
+  z-index: 1999
 </style>

src/components/CatalogSalesManagement.vue

@@ -0,0 +1,570 @@
+<template>
+  <v-container fluid>
+    <!-- Header Principal -->
+    <v-row align="center" class="mb-4">
+      <v-col cols="12">
+        <h1 class="text-h4">Ventas por Catálogo</h1>
+        <div class="text-caption text-grey mt-1">
+          {{ totalPending }} sin sincronizar • {{ totalSynced }} sincronizadas
+        </div>
+      </v-col>
+    </v-row>
+
+    <!-- Tabs -->
+    <v-tabs v-model="activeTab" class="mb-4" color="primary">
+      <v-tab value="pending">
+        Sin Sincronizar
+        <v-chip class="ml-2" size="small" color="orange" variant="flat">{{ totalPending }}</v-chip>
+      </v-tab>
+      <v-tab value="synced">
+        Sincronizadas
+        <v-chip class="ml-2" size="small" color="success" variant="flat">{{ totalSynced }}</v-chip>
+      </v-tab>
+    </v-tabs>
+
+    <!-- Window para contenido de tabs -->
+    <v-window v-model="activeTab">
+      <!-- Tab: Sin Sincronizar -->
+      <v-window-item value="pending">
+        <!-- Botón Sincronizar -->
+        <v-row align="center" class="mb-4">
+          <v-col>
+            <v-btn
+              color="primary"
+              prepend-icon="mdi-sync"
+              @click="$router.push('/sincronizar_catalog_sales_tryton')"
+              :disabled="totalPending === 0"
+            >
+              Sincronizar a Tryton
+            </v-btn>
+          </v-col>
+        </v-row>
+
+        <!-- Filtros -->
+        <v-row>
+          <v-col cols="12" md="4">
+            <v-text-field
+              v-model="searchQuery"
+              label="Buscar por ID o cliente"
+              prepend-inner-icon="mdi-magnify"
+              clearable
+              density="compact"
+              variant="outlined"
+              hide-details
+            ></v-text-field>
+          </v-col>
+          <v-col cols="6" md="3">
+            <v-text-field
+              v-model="dateFrom"
+              label="Fecha desde"
+              type="date"
+              density="compact"
+              variant="outlined"
+              hide-details
+              clearable
+            ></v-text-field>
+          </v-col>
+          <v-col cols="6" md="3">
+            <v-text-field
+              v-model="dateTo"
+              label="Fecha hasta"
+              type="date"
+              density="compact"
+              variant="outlined"
+              hide-details
+              clearable
+            ></v-text-field>
+          </v-col>
+          <v-col cols="12" md="2" class="d-flex align-center">
+            <v-btn
+              @click="clearFilters"
+              variant="text"
+              color="grey"
+              size="small"
+              prepend-icon="mdi-filter-remove"
+            >
+              Limpiar filtros
+            </v-btn>
+          </v-col>
+        </v-row>
+
+        <!-- Tabla de ventas sin sincronizar -->
+        <v-row>
+          <v-col cols="12">
+            <v-card>
+              <v-data-table
+                v-model:expanded="expandedPending"
+                :headers="pendingHeaders"
+                :items="filteredPendingSales"
+                :loading="loading"
+                density="compact"
+                item-value="id"
+                items-per-page="25"
+                :items-per-page-options="[10, 25, 50, 100]"
+                show-expand
+              >
+                <!-- Código -->
+                <template #item.code="{ item }">
+                  <span v-if="item.code" class="d-flex align-center">
+                    <code class="mr-1">{{ item.code }}</code>
+                    <v-btn
+                      icon="mdi-content-copy"
+                      size="x-small"
+                      variant="text"
+                      :title="`Copiar código ${item.code}`"
+                      @click="copyCode(item.code)"
+                    ></v-btn>
+                  </span>
+                  <span v-else>-</span>
+                </template>
+
+                <!-- Fecha formateada -->
+                <template #item.date="{ item }">
+                  {{ formatDate(item.date) }}
+                </template>
+
+                <!-- Total formateado -->
+                <template #item.total="{ item }">
+                  ${{ Number(item.total).toLocaleString('es-CO') }}
+                </template>
+
+                <!-- Cliente -->
+                <template #item.customer="{ item }">
+                  <span v-if="item.customer_name">{{ item.customer_name }}</span>
+                  <v-chip v-else size="small" color="grey" variant="flat">
+                    ID: {{ item.customer }}
+                  </v-chip>
+                </template>
+
+                <!-- Estado -->
+                <template #item.status="{ item }">
+                  <v-chip size="small" color="orange" variant="flat">
+                    <v-icon start size="small">mdi-clock-outline</v-icon>
+                    Pendiente
+                  </v-chip>
+                </template>
+
+                <!-- Fila expandida: detalle de productos -->
+                <template #expanded-row="{ columns, item }">
+                  <tr>
+                    <td :colspan="columns.length" class="pa-4 bg-grey-lighten-4">
+                      <v-row>
+                        <v-col cols="12" md="6">
+                          <strong>Datos de envío</strong>
+                          <v-list density="compact">
+                            <v-list-item v-if="item.customer_name">
+                              <template #prepend><v-icon>mdi-account</v-icon></template>
+                              <v-list-item-title>{{ item.customer_name }}</v-list-item-title>
+                            </v-list-item>
+                            <v-list-item v-if="item.customer_address">
+                              <template #prepend><v-icon>mdi-map-marker</v-icon></template>
+                              <v-list-item-title>{{ item.customer_address }}</v-list-item-title>
+                            </v-list-item>
+                            <v-list-item v-if="item.customer_phone">
+                              <template #prepend><v-icon>mdi-phone</v-icon></template>
+                              <v-list-item-title>{{ item.customer_phone }}</v-list-item-title>
+                            </v-list-item>
+                            <v-list-item v-if="item.pickup_method">
+                              <template #prepend><v-icon>mdi-truck</v-icon></template>
+                              <v-list-item-title>
+                                {{ item.pickup_method === 'DELIVERY' ? 'Domicilio' : 'Recoge en tienda' }}
+                              </v-list-item-title>
+                            </v-list-item>
+                          </v-list>
+                        </v-col>
+                        <v-col cols="12" md="6">
+                          <strong>Productos</strong>
+                          <v-table density="compact">
+                            <thead>
+                              <tr>
+                                <th class="text-left">Producto ID</th>
+                                <th class="text-right">Precio</th>
+                                <th class="text-right">Cantidad</th>
+                                <th class="text-right">Subtotal</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr v-for="line in item.catalogsaleline_set" :key="line.id">
+                                <td>{{ line.product }}</td>
+                                <td class="text-right">${{ Number(line.unit_price).toLocaleString('es-CO') }}</td>
+                                <td class="text-right">{{ line.quantity }}</td>
+                                <td class="text-right">
+                                  ${{ (Number(line.unit_price) * Number(line.quantity)).toLocaleString('es-CO') }}
+                                </td>
+                              </tr>
+                            </tbody>
+                          </v-table>
+                        </v-col>
+                      </v-row>
+                    </td>
+                  </tr>
+                </template>
+
+                <!-- Loading -->
+                <template #loading>
+                  <v-skeleton-loader type="table-row@10"></v-skeleton-loader>
+                </template>
+
+                <!-- No data -->
+                <template #no-data>
+                  <v-alert type="info" variant="tonal" class="my-4">
+                    No hay ventas pendientes de sincronizar
+                  </v-alert>
+                </template>
+              </v-data-table>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-window-item>
+
+      <!-- Tab: Sincronizadas -->
+      <v-window-item value="synced">
+        <!-- Filtros -->
+        <v-row class="mt-4">
+          <v-col cols="12" md="4">
+            <v-text-field
+              v-model="searchQuery"
+              label="Buscar por ID o cliente"
+              prepend-inner-icon="mdi-magnify"
+              clearable
+              density="compact"
+              variant="outlined"
+              hide-details
+            ></v-text-field>
+          </v-col>
+          <v-col cols="6" md="3">
+            <v-text-field
+              v-model="dateFrom"
+              label="Fecha desde"
+              type="date"
+              density="compact"
+              variant="outlined"
+              hide-details
+              clearable
+            ></v-text-field>
+          </v-col>
+          <v-col cols="6" md="3">
+            <v-text-field
+              v-model="dateTo"
+              label="Fecha hasta"
+              type="date"
+              density="compact"
+              variant="outlined"
+              hide-details
+              clearable
+            ></v-text-field>
+          </v-col>
+          <v-col cols="12" md="2" class="d-flex align-center">
+            <v-btn
+              @click="clearFilters"
+              variant="text"
+              color="grey"
+              size="small"
+              prepend-icon="mdi-filter-remove"
+            >
+              Limpiar filtros
+            </v-btn>
+          </v-col>
+        </v-row>
+
+        <!-- Tabla de ventas sincronizadas -->
+        <v-row>
+          <v-col cols="12">
+            <v-card>
+              <v-data-table
+                v-model:expanded="expandedSynced"
+                :headers="syncedHeaders"
+                :items="filteredSyncedSales"
+                :loading="loading"
+                density="compact"
+                item-value="id"
+                items-per-page="25"
+                :items-per-page-options="[10, 25, 50, 100]"
+                show-expand
+              >
+                <!-- Código -->
+                <template #item.code="{ item }">
+                  <span v-if="item.code" class="d-flex align-center">
+                    <code class="mr-1">{{ item.code }}</code>
+                    <v-btn
+                      icon="mdi-content-copy"
+                      size="x-small"
+                      variant="text"
+                      :title="`Copiar código ${item.code}`"
+                      @click="copyCode(item.code)"
+                    ></v-btn>
+                  </span>
+                  <span v-else>-</span>
+                </template>
+
+                <!-- Fecha formateada -->
+                <template #item.date="{ item }">
+                  {{ formatDate(item.date) }}
+                </template>
+
+                <!-- Total formateado -->
+                <template #item.total="{ item }">
+                  ${{ Number(item.total).toLocaleString('es-CO') }}
+                </template>
+
+                <!-- Cliente -->
+                <template #item.customer="{ item }">
+                  <span v-if="item.customer_name">{{ item.customer_name }}</span>
+                  <v-chip v-else size="small" color="grey" variant="flat">
+                    ID: {{ item.customer }}
+                  </v-chip>
+                </template>
+
+                <!-- Estado -->
+                <template #item.status="{ item }">
+                  <v-chip size="small" color="success" variant="flat">
+                    <v-icon start size="small">mdi-check-circle</v-icon>
+                    Sincronizada
+                  </v-chip>
+                </template>
+
+                <!-- ID Tryton -->
+                <template #item.external_id="{ item }">
+                  <v-chip size="small" variant="outlined" color="primary">
+                    {{ item.external_id }}
+                  </v-chip>
+                </template>
+
+                <!-- Fila expandida: detalle de productos -->
+                <template #expanded-row="{ columns, item }">
+                  <tr>
+                    <td :colspan="columns.length" class="pa-4 bg-grey-lighten-4">
+                      <v-row>
+                        <v-col cols="12" md="6">
+                          <strong>Datos de envío</strong>
+                          <v-list density="compact">
+                            <v-list-item v-if="item.customer_name">
+                              <template #prepend><v-icon>mdi-account</v-icon></template>
+                              <v-list-item-title>{{ item.customer_name }}</v-list-item-title>
+                            </v-list-item>
+                            <v-list-item v-if="item.customer_address">
+                              <template #prepend><v-icon>mdi-map-marker</v-icon></template>
+                              <v-list-item-title>{{ item.customer_address }}</v-list-item-title>
+                            </v-list-item>
+                            <v-list-item v-if="item.customer_phone">
+                              <template #prepend><v-icon>mdi-phone</v-icon></template>
+                              <v-list-item-title>{{ item.customer_phone }}</v-list-item-title>
+                            </v-list-item>
+                            <v-list-item v-if="item.pickup_method">
+                              <template #prepend><v-icon>mdi-truck</v-icon></template>
+                              <v-list-item-title>
+                                {{ item.pickup_method === 'DELIVERY' ? 'Domicilio' : 'Recoge en tienda' }}
+                              </v-list-item-title>
+                            </v-list-item>
+                          </v-list>
+                        </v-col>
+                        <v-col cols="12" md="6">
+                          <strong>Productos</strong>
+                          <v-table density="compact">
+                            <thead>
+                              <tr>
+                                <th class="text-left">Producto ID</th>
+                                <th class="text-right">Precio</th>
+                                <th class="text-right">Cantidad</th>
+                                <th class="text-right">Subtotal</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr v-for="line in item.catalogsaleline_set" :key="line.id">
+                                <td>{{ line.product }}</td>
+                                <td class="text-right">${{ Number(line.unit_price).toLocaleString('es-CO') }}</td>
+                                <td class="text-right">{{ line.quantity }}</td>
+                                <td class="text-right">
+                                  ${{ (Number(line.unit_price) * Number(line.quantity)).toLocaleString('es-CO') }}
+                                </td>
+                              </tr>
+                            </tbody>
+                          </v-table>
+                        </v-col>
+                      </v-row>
+                    </td>
+                  </tr>
+                </template>
+
+                <!-- Loading -->
+                <template #loading>
+                  <v-skeleton-loader type="table-row@10"></v-skeleton-loader>
+                </template>
+
+                <!-- No data -->
+                <template #no-data>
+                  <v-alert type="info" variant="tonal" class="my-4">
+                    No hay ventas sincronizadas
+                  </v-alert>
+                </template>
+              </v-data-table>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-window-item>
+    </v-window>
+
+    <!-- Snackbar -->
+    <v-snackbar
+      v-model="snackbar.show"
+      :color="snackbar.color"
+      :timeout="3000"
+      location="top"
+    >
+      {{ snackbar.message }}
+      <template #actions>
+        <v-btn variant="text" @click="snackbar.show = false">Cerrar</v-btn>
+      </template>
+    </v-snackbar>
+  </v-container>
+</template>
+
+<script setup>
+import { ref, computed, inject, onMounted } from 'vue';
+
+const api = inject('api');
+const catalogSales = ref([]);
+const loading = ref(false);
+const expandedPending = ref([]);
+const expandedSynced = ref([]);
+const searchQuery = ref('');
+const dateFrom = ref('');
+const dateTo = ref('');
+const snackbar = ref({ show: false, message: '', color: 'success' });
+const activeTab = ref('pending'); // Tab activo por defecto
+
+// Headers para tabla de ventas sin sincronizar
+const pendingHeaders = [
+  { title: 'ID', key: 'id', sortable: true },
+  { title: 'Código', key: 'code', sortable: true },
+  { title: 'Fecha', key: 'date', sortable: true },
+  { title: 'Cliente', key: 'customer_name', sortable: true },
+  { title: 'Total', key: 'total', sortable: true },
+  { title: 'Estado', key: 'status', sortable: false },
+  { title: '', key: 'data-table-expand' },
+];
+
+// Headers para tabla de ventas sincronizadas
+const syncedHeaders = [
+  { title: 'ID', key: 'id', sortable: true },
+  { title: 'Código', key: 'code', sortable: true },
+  { title: 'Fecha', key: 'date', sortable: true },
+  { title: 'Cliente', key: 'customer_name', sortable: true },
+  { title: 'Total', key: 'total', sortable: true },
+  { title: 'Estado', key: 'status', sortable: false },
+  { title: 'ID Tryton', key: 'external_id', sortable: true },
+  { title: '', key: 'data-table-expand' },
+];
+
+// Ventas sin sincronizar (sin external_id)
+const pendingSales = computed(() => {
+  return catalogSales.value.filter(sale => !sale.external_id);
+});
+
+// Ventas sincronizadas (con external_id)
+const syncedSales = computed(() => {
+  return catalogSales.value.filter(sale => sale.external_id);
+});
+
+// Contadores
+const totalPending = computed(() => pendingSales.value.length);
+const totalSynced = computed(() => syncedSales.value.length);
+
+// Función común para aplicar filtros
+function applyFilters(sales) {
+  let result = sales;
+
+  // Filtro por texto (ID o nombre de cliente)
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase().trim();
+    result = result.filter(sale => {
+      const customerName = (sale.customer_name || '').toLowerCase();
+      const customerId = String(sale.customer);
+      const saleId = String(sale.id);
+      return customerName.includes(query) || customerId.includes(query) || saleId.includes(query);
+    });
+  }
+
+  // Filtro por fecha desde
+  if (dateFrom.value) {
+    const from = new Date(dateFrom.value);
+    result = result.filter(sale => new Date(sale.date) >= from);
+  }
+
+  // Filtro por fecha hasta
+  if (dateTo.value) {
+    const to = new Date(dateTo.value + 'T23:59:59');
+    result = result.filter(sale => new Date(sale.date) <= to);
+  }
+
+  return result;
+}
+
+// Ventas pendientes filtradas
+const filteredPendingSales = computed(() => {
+  return applyFilters(pendingSales.value);
+});
+
+// Ventas sincronizadas filtradas
+const filteredSyncedSales = computed(() => {
+  return applyFilters(syncedSales.value);
+});
+
+async function loadCatalogSales() {
+  loading.value = true;
+  try {
+    const data = await api.getCatalogSales();
+    catalogSales.value = data;
+  } catch (error) {
+    console.error('Error al cargar ventas por catálogo:', error);
+    snackbar.value = { show: true, message: 'Error al cargar ventas por catálogo', color: 'error' };
+  } finally {
+    loading.value = false;
+  }
+}
+
+function formatDate(dateStr) {
+  if (!dateStr) return '-';
+  const date = new Date(dateStr);
+  return date.toLocaleDateString('es-CO', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+function clearFilters() {
+  searchQuery.value = '';
+  dateFrom.value = '';
+  dateTo.value = '';
+}
+
+async function copyCode(code) {
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(code)
+    }
+    snackbar.value = { show: true, message: 'Código copiado', color: 'success' }
+  } catch {
+    snackbar.value = { show: true, message: 'No se pudo copiar el código', color: 'error' }
+  }
+}
+
+onMounted(() => {
+  loadCatalogSales();
+});
+</script>
+
+<style scoped>
+.text-md-right {
+  text-align: right;
+}
+
+@media (max-width: 960px) {
+  .text-md-right {
+    text-align: left;
+  }
+}
+</style>

src/components/CatalogueImagesManagement.vue

@@ -0,0 +1,395 @@
+<template>
+  <v-container fluid>
+    <v-row align="center">
+      <v-col cols="12" md="6">
+        <h1 class="text-h4">Imágenes de Catálogo</h1>
+      </v-col>
+      <v-col cols="12" md="6" class="text-md-right">
+        <v-btn
+          color="primary"
+          variant="elevated"
+          prepend-icon="mdi-plus"
+          @click="openCreateDialog"
+        >
+          Agregar Imagen
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12">
+        <v-card>
+          <v-data-table
+            :headers="headers"
+            :items="images"
+            :loading="loading"
+            density="compact"
+            item-value="id"
+            items-per-page="25"
+            :items-per-page-options="[10, 25, 50, 100]"
+          >
+            <template #item.image="{ item }">
+              <v-img
+                :src="item.image"
+                max-width="60"
+                aspect-ratio="1"
+                cover
+                class="rounded"
+              />
+            </template>
+
+            <template #item.product="{ item }">
+              {{ productMap[item.product] || `ID: ${item.product}` }}
+            </template>
+
+            <template #item.uploaded_at="{ item }">
+              {{ formatDate(item.uploaded_at) }}
+            </template>
+
+            <template #item.actions="{ item }">
+              <v-btn
+                icon
+                size="small"
+                variant="text"
+                @click="openEditDialog(item)"
+              >
+                <v-icon>mdi-pencil</v-icon>
+              </v-btn>
+              <v-btn
+                icon
+                size="small"
+                variant="text"
+                color="error"
+                @click="openDeleteDialog(item)"
+              >
+                <v-icon>mdi-delete</v-icon>
+              </v-btn>
+            </template>
+
+            <template #loading>
+              <v-skeleton-loader type="table-row@10" />
+            </template>
+
+            <template #no-data>
+              <v-alert type="info" variant="tonal" class="my-4">
+                No hay imágenes de catálogo
+              </v-alert>
+            </template>
+          </v-data-table>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <v-dialog v-model="dialog.show" max-width="520" persistent>
+      <v-card elevation="2" rounded="lg">
+        <v-card-title class="text-h6 font-weight-bold pa-6 pb-0">
+          <v-icon :icon="dialog.isEdit ? 'mdi-pencil' : 'mdi-plus-circle-outline'" class="mr-2" color="primary" />
+          {{ dialog.isEdit ? 'Editar' : 'Agregar' }} Imagen de Catálogo
+        </v-card-title>
+        <v-divider class="mt-3" />
+        <v-card-text class="pa-6">
+          <v-form ref="formRef">
+            <v-label class="font-weight-medium mb-1 d-block">Producto</v-label>
+            <v-autocomplete
+              v-model="form.product"
+              :items="productOptions"
+              placeholder="Buscar producto…"
+              :rules="[(v) => !!v || 'Seleccione un producto']"
+              item-title="name"
+              item-value="id"
+              variant="outlined"
+              :disabled="dialog.isEdit"
+              class="mb-5"
+              clearable
+              prepend-inner-icon="mdi-package-variant-closed"
+              density="comfortable"
+            />
+
+            <v-label class="font-weight-medium mb-1 d-block">Imagen</v-label>
+            <v-file-input
+              ref="fileInputRef"
+              accept="image/*"
+              :rules="[(v) => !!v || 'Seleccione una imagen']"
+              variant="outlined"
+              prepend-icon="mdi-camera"
+              prepend-inner-icon="mdi-image-outline"
+              class="mb-5"
+              @update:model-value="onFileSelected"
+              density="comfortable"
+              hide-details="auto"
+            />
+
+            <v-img
+              v-if="form.preview"
+              :src="form.preview"
+              max-height="220"
+              contain
+              class="rounded-lg border mt-2"
+            />
+          </v-form>
+        </v-card-text>
+        <v-divider />
+        <v-card-actions class="pa-4">
+          <v-spacer />
+          <v-btn variant="tonal" @click="closeDialog">Cancelar</v-btn>
+          <v-btn
+            color="primary"
+            variant="elevated"
+            :loading="submitting"
+            :disabled="submitting"
+            @click="submitForm"
+            class="ml-2"
+          >
+            <v-icon start :icon="dialog.isEdit ? 'mdi-content-save' : 'mdi-upload'" />
+            {{ dialog.isEdit ? 'Actualizar' : 'Agregar' }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="deleteDialog.show" max-width="400">
+      <v-card>
+        <v-card-title>Confirmar Eliminación</v-card-title>
+        <v-card-text>
+          ¿Está seguro de eliminar esta imagen de catálogo?
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="deleteDialog.show = false">
+            Cancelar
+          </v-btn>
+          <v-btn
+            color="error"
+            variant="elevated"
+            :loading="deleting"
+            :disabled="deleting"
+            @click="confirmDelete"
+          >
+            Eliminar
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-snackbar
+      v-model="snackbar.show"
+      :color="snackbar.color"
+      :timeout="3000"
+      location="top"
+    >
+      {{ snackbar.message }}
+      <template #actions>
+        <v-btn variant="text" @click="snackbar.show = false">Cerrar</v-btn>
+      </template>
+    </v-snackbar>
+  </v-container>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, computed, watch } from "vue";
+
+const api = inject("api");
+
+const images = ref([]);
+const products = ref([]);
+const loading = ref(false);
+const submitting = ref(false);
+const deleting = ref(false);
+const formRef = ref(null);
+
+const snackbar = ref({ show: false, message: "", color: "success" });
+
+const headers = [
+  { title: "ID", key: "id", sortable: true },
+  { title: "Producto", key: "product", sortable: true },
+  { title: "Imagen", key: "image", sortable: false },
+  { title: "Subida el", key: "uploaded_at", sortable: true },
+  { title: "Acciones", key: "actions", sortable: false },
+];
+
+const dialog = ref({
+  show: false,
+  isEdit: false,
+  editingItem: null,
+});
+
+const fileInputRef = ref(null);
+const selectedFile = ref(null);
+
+const form = ref({
+  product: null,
+  preview: null,
+});
+
+const deleteDialog = ref({
+  show: false,
+  item: null,
+});
+
+let previewObjectUrl = null;
+
+const productMap = computed(() => {
+  const map = {};
+  for (const p of products.value) {
+    map[p.id] = p.name;
+  }
+  return map;
+});
+
+const productOptions = computed(() => {
+  return products.value.map((p) => ({
+    name: p.name,
+    id: p.id,
+  }));
+});
+
+watch(
+  selectedFile,
+  (file) => {
+    if (previewObjectUrl) {
+      URL.revokeObjectURL(previewObjectUrl);
+      previewObjectUrl = null;
+    }
+    if (file) {
+      previewObjectUrl = URL.createObjectURL(file);
+      form.value.preview = previewObjectUrl;
+    } else if (dialog.value.isEdit && dialog.value.editingItem) {
+      form.value.preview = dialog.value.editingItem.image;
+    } else {
+      form.value.preview = null;
+    }
+  },
+);
+
+function onFileSelected(file) {
+  selectedFile.value = file;
+}
+
+function formatDate(dateStr) {
+  if (!dateStr) return "-";
+  const d = new Date(dateStr);
+  return d.toLocaleString("es-CO");
+}
+
+async function loadImages() {
+  loading.value = true;
+  try {
+    const data = await api.getCatalogueImages();
+    images.value = data;
+  } catch (error) {
+    console.error("Error al cargar imágenes:", error);
+    showSnackbar("Error al cargar imágenes", "error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function loadProducts() {
+  try {
+    const data = await api.getProducts("all");
+    products.value = data;
+  } catch (error) {
+    console.error("Error al cargar productos:", error);
+  }
+}
+
+function openCreateDialog() {
+  dialog.value = { show: true, isEdit: false, editingItem: null };
+  selectedFile.value = null;
+  form.value = { product: null, preview: null };
+}
+
+function openEditDialog(item) {
+  dialog.value = { show: true, isEdit: true, editingItem: item };
+  selectedFile.value = null;
+  form.value = {
+    product: item.product,
+    preview: item.image,
+  };
+}
+
+function closeDialog() {
+  if (previewObjectUrl) {
+    URL.revokeObjectURL(previewObjectUrl);
+    previewObjectUrl = null;
+  }
+  selectedFile.value = null;
+  dialog.value.show = false;
+  dialog.value.isEdit = false;
+  dialog.value.editingItem = null;
+  form.value = { product: null, preview: null };
+}
+
+async function submitForm() {
+  const formComponent = formRef.value;
+  if (formComponent) {
+    const { valid } = await formComponent.validate();
+    if (!valid) return;
+  }
+
+  submitting.value = true;
+  try {
+    const fd = new FormData();
+    fd.append("product", form.value.product);
+    if (selectedFile.value) {
+      fd.append("image", selectedFile.value);
+    }
+
+    if (dialog.value.isEdit) {
+      await api.updateCatalogueImage(dialog.value.editingItem.id, fd);
+      showSnackbar("Imagen actualizada exitosamente", "success");
+    } else {
+      await api.createCatalogueImage(fd);
+      showSnackbar("Imagen agregada exitosamente", "success");
+    }
+
+    closeDialog();
+    await loadImages();
+  } catch (error) {
+    console.error("Error al guardar imagen:", error);
+    showSnackbar("Error al guardar imagen", "error");
+  } finally {
+    submitting.value = false;
+  }
+}
+
+function openDeleteDialog(item) {
+  deleteDialog.value = { show: true, item };
+}
+
+async function confirmDelete() {
+  deleting.value = true;
+  try {
+    await api.deleteCatalogueImage(deleteDialog.value.item.id);
+    showSnackbar("Imagen eliminada exitosamente", "success");
+    deleteDialog.value.show = false;
+    await loadImages();
+  } catch (error) {
+    console.error("Error al eliminar imagen:", error);
+    showSnackbar("Error al eliminar imagen", "error");
+  } finally {
+    deleting.value = false;
+  }
+}
+
+function showSnackbar(message, color) {
+  snackbar.value = { show: true, message, color };
+}
+
+onMounted(() => {
+  loadImages();
+  loadProducts();
+});
+</script>
+
+<style scoped>
+.text-md-right {
+  text-align: right;
+}
+
+@media (max-width: 960px) {
+  .text-md-right {
+    text-align: left;
+  }
+}
+</style>

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,267 @@
+<template>
+  <v-container fluid class="pa-0">
+    <v-sheet class="hero-section d-flex align-center justify-center">
+      <div class="glow-bubble bubble-blue"></div>
+      <div class="glow-bubble bubble-green"></div>
+      <div class="glow-bubble bubble-yellow"></div>
+      <div class="glow-bubble bubble-red"></div>
+
+      <div class="login-card">
+        <SiteLogo max-width="140" class="mx-auto mb-4" />
+        <h1 class="text-h5 text-sm-h4 font-weight-bold text-center mb-1">
+          Iniciar Sesión
+        </h1>
+        <p class="text-body-2 text-medium-emphasis text-center mb-6">
+          Ingresa tus credenciales para acceder
+        </p>
+
+        <v-form ref="loginForm" @submit.prevent="onSubmit">
+          <v-text-field
+            v-model="username"
+            label="Usuario"
+            prepend-inner-icon="mdi-account"
+            :rules="[requiredRule]"
+            variant="outlined"
+            required
+            class="mb-2"
+            autocomplete="username"
+          />
+          <v-text-field
+            v-model="password"
+            label="Contraseña"
+            prepend-inner-icon="mdi-lock"
+            type="password"
+            :rules="[requiredRule]"
+            variant="outlined"
+            required
+            class="mb-4"
+            autocomplete="current-password"
+          />
+
+          <v-btn
+            type="submit"
+            color="primary"
+            size="large"
+            block
+            :loading="isSubmitting"
+            :disabled="isSubmitting"
+          >
+            Entrar
+          </v-btn>
+
+          <v-alert
+            v-if="error"
+            type="error"
+            variant="tonal"
+            class="mt-4"
+            closable
+            @click:close="error = ''"
+          >
+            {{ error }}
+          </v-alert>
+        </v-form>
+      </div>
+    </v-sheet>
+  </v-container>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import AuthService from '@/services/auth'
+import SiteLogo from '@/components/SiteLogo.vue'
+
+const router = useRouter()
+
+const username = ref('')
+const password = ref('')
+const error = ref('')
+const isSubmitting = ref(false)
+const loginForm = ref(null)
+
+function requiredRule(value) {
+  return !!value || 'Este campo es obligatorio'
+}
+
+async function onSubmit() {
+  error.value = ''
+  isSubmitting.value = true
+
+  try {
+    const form = loginForm.value
+    if (form) {
+      const { valid } = await form.validate()
+      if (!valid) return
+    }
+
+    if (!username.value || !password.value) {
+      error.value = 'Usuario y contraseña son obligatorios'
+      return
+    }
+
+    await AuthService.login({
+      username: username.value,
+      password: password.value,
+    })
+    router.push({ path: '/' })
+  } catch (e) {
+    const msg = e?.response?.data?.message ?? e.message
+    error.value = msg ?? 'Error al iniciar sesión'
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+
+<style scoped>
+.hero-section {
+  min-height: calc(100vh - 80px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  position: relative;
+  overflow: hidden;
+  background-color: #f8fafc !important;
+}
+
+.glow-bubble {
+  position: absolute;
+  border-radius: 10%;
+  pointer-events: none;
+  z-index: 1;
+  mix-blend-mode: normal;
+}
+
+.bubble-blue {
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(
+    circle,
+    rgba(66, 165, 245, 0.8) 10%,
+    rgba(66, 165, 245, 0) 80%
+  );
+  filter: blur(100px);
+  top: -180px;
+  left: -150px;
+  animation: floatCornerTL 8s ease-in-out infinite;
+}
+
+.bubble-green {
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(
+    circle,
+    rgba(0, 200, 83, 0.7) 10%,
+    rgba(0, 200, 83, 0) 80%
+  );
+  filter: blur(100px);
+  bottom: -150px;
+  right: -120px;
+  animation: floatCornerBR 9s ease-in-out infinite;
+  animation-delay: 1.5s;
+}
+
+.bubble-yellow {
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(
+    circle,
+    rgba(255, 213, 0, 0.3) 20%,
+    rgba(255, 193, 7, 0) 1000%
+  );
+  filter: blur(80px);
+  top: 50%;
+  left: 50%;
+  animation: glowPulseCenter 8s ease-in-out infinite;
+}
+
+.bubble-red {
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(
+    circle,
+    rgba(239, 83, 80, 0.7) 10%,
+    rgba(239, 83, 80, 0) 80%
+  );
+  filter: blur(100px);
+  top: -150px;
+  right: -120px;
+  animation: floatCornerTR 8s ease-in-out infinite;
+  animation-delay: 3s;
+}
+
+.login-card {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  max-width: 420px;
+  padding: 2.5rem 2rem;
+  background: rgba(255, 255, 255, 0.25) !important;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.08);
+}
+
+@media (max-width: 600px) {
+  .hero-section {
+    padding: 1rem;
+    min-height: calc(100vh - 64px);
+  }
+
+  .login-card {
+    padding: 1.5rem 1.25rem;
+    border-radius: 20px;
+  }
+}
+
+@keyframes floatCornerTL {
+  0%,
+  100% {
+    opacity: 0.15;
+    transform: scale(0.9) translate(0, 0);
+  }
+  50% {
+    opacity: 0.85;
+    transform: scale(1.25) translate(40px, 30px);
+  }
+}
+
+@keyframes floatCornerTR {
+  0%,
+  100% {
+    opacity: 0.15;
+    transform: scale(1.2) translate(0, 0);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(0.95) translate(-30px, 40px);
+  }
+}
+
+@keyframes floatCornerBR {
+  0%,
+  100% {
+    opacity: 0.1;
+    transform: scale(0.85) translate(0, 0);
+  }
+  50% {
+    opacity: 0.75;
+    transform: scale(1.15) translate(-40px, -30px);
+  }
+}
+
+@keyframes glowPulseCenter {
+  0%,
+  100% {
+    opacity: 0.08;
+    transform: translate(-50%, -50%) scale(0.85);
+  }
+  50% {
+    opacity: 0.25;
+    transform: translate(-50%, -50%) scale(1.3);
+  }
+}
+</style>

src/components/LoginDialog.vue

@@ -0,0 +1,75 @@
+<template>
+  <v-dialog v-model="show" max-width="400">
+    <v-card>
+      <v-card-title class="headline d-flex align-center">
+        Iniciar sesión
+        <v-spacer />
+        <v-btn icon size="small" variant="text" @click="show = false">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </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

@@ -1,13 +1,50 @@
 <template>
-    <v-app-bar color="primary" prominent>
+    <v-app-bar color="primary" prominent app>
     <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 
-      <v-btn icon="mdi-magnify" variant="text"></v-btn>
+      v-if="!isAuthenticated" 
-      <v-btn icon="mdi-filter" variant="text"></v-btn>
+      prepend-icon="mdi-login" 
-    </template>
+      variant="text"
-    <v-btn icon="mdi-dots-vertical" variant="text"></v-btn>
+      @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"
@@ -17,22 +54,25 @@
       nav
     >
       <v-list-item
-        v-for="item in menuItems"
+        v-for="item in filteredMenuItems"
         :key="item.title"
         :title="item.title"
         :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 prepend-icon="mdi-cog" title="Administracion" @click="toggleAdminMenu()" v-if="isAuthenticated && isAdmin"></v-list-item>
-      <v-list-item>
+      <v-list-item v-if="isAuthenticated && isAdmin && showAdminMenu">
-        <v-list v-if="showAdminMenu">
+        <v-list>
-          <v-list-item
+          <template v-for="(item, index) in menuAdminItems" :key="index">
-            v-for="item in menuAdminItems"
+            <v-divider v-if="item.divider"></v-divider>
-            :key="item.title"
+            <v-list-subheader v-else-if="item.header">{{ item.header }}</v-list-subheader>
-            :title="item.title"
+            <v-list-item
-            :prepend-icon="item.icon"
+              v-else
-            @click="navigateAdmin(item.route)"
+              :title="item.title"
-          ></v-list-item>
+              :prepend-icon="item.icon"
+              @click="navigateAdmin(item.route)"
+            ></v-list-item>
+          </template>
         </v-list>
       </v-list-item>
     </v-list>
@@ -40,29 +80,85 @@
 </template>
 
 <script>
+ 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,
-         menuItems: [
+         isAuthenticated: false,
-             { title: 'Inicio', route: '/', icon: 'mdi-home'},
+         user: null,
-             { title: 'Comprar', route:'/comprar', icon: 'mdi-cart'},
+         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'},
+            { title: 'Consultar mi pedido o compra', route: '/pedido', icon: 'mdi-magnify-scan'},
+        ],
          menuAdminItems: [
              { title: 'Cuadrar tarro', route: '/cuadrar_tarro', icon: 'mdi-calculator'},
              { 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: 'Gestión de Productos', route: '/admin/products', icon: 'mdi-package-variant'},
+              { title: 'Imágenes de Catálogo', route: '/admin/catalogue-images', icon: 'mdi-image-multiple'},
+              { title: 'Datos de la Tienda', route: '/admin/store-settings', icon: 'mdi-map-marker'},
+              { title: 'Ver Ventas por Catálogo', route: '/admin/catalog-sales', icon: 'mdi-cart-arrow-down'},
+             { divider: true },
+             { header: 'Sincronización Tryton' },
+             { title: 'Importar Productos', route: '/sincronizar_productos_tryton', icon: 'mdi-download'},
+             { title: 'Importar Clientes', route: '/sincronizar_clientes_tryton', icon: 'mdi-download'},
+             { title: 'Exportar Ventas', route: '/sincronizar_ventas_tryton', icon: 'mdi-upload'},
+             { title: 'Exportar Ventas Catálogo', route: '/sincronizar_catalog_sales_tryton', icon: 'mdi-upload'}
          ],
-     }),
+      }),
-     watch: {
+      computed: {
-         group () {
+        isAdmin() {
-             this.drawer = false
+          return this.user?.role === 'administrator';
-         },
+        },
+        filteredMenuItems() {
+          if (this.user?.role === 'publico') {
+            return this.menuItems.filter(item => item.route !== '/comprar');
+          }
+          return this.menuItems;
+        },
+      },
+      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 +169,14 @@
          toggleAdminMenu() {
              this.showAdminMenu = !this.showAdminMenu;
          },
+         logout() {
+            AuthService.logout();
+            this.isAuthenticated = false;
+            this.user = null;
+            this.authStore.clearUser();
+            this.$router.push('/');
+          },
      }
   }
-</script>
+ </script>
+

src/components/ProductsManagement.vue

@@ -0,0 +1,262 @@
+<template>
+  <v-container fluid>
+    <!-- Header + Filtros -->
+    <v-row align="center">
+      <v-col cols="12" md="6">
+        <h1 class="text-h4">Gestión de Productos</h1>
+      </v-col>
+      <v-col cols="12" md="6" class="text-md-right">
+        <!-- Chips de filtro -->
+        <v-chip-group v-model="activeFilter" mandatory color="primary">
+          <v-chip value="false">Inactivos</v-chip>
+          <v-chip value="true">Activos</v-chip>
+          <v-chip value="all">Todos</v-chip>
+        </v-chip-group>
+      </v-col>
+    </v-row>
+
+    <!-- Barra de búsqueda -->
+    <v-row>
+      <v-col cols="12" md="6">
+        <v-text-field
+          v-model="searchQuery"
+          label="Buscar por nombre"
+          prepend-inner-icon="mdi-magnify"
+          clearable
+          density="compact"
+          variant="outlined"
+          hide-details
+        ></v-text-field>
+      </v-col>
+    </v-row>
+
+    <!-- Barra de acciones por lote -->
+    <v-row v-if="selected.length > 0">
+      <v-col cols="12">
+        <v-alert type="info" variant="tonal" border="start">
+          <v-row align="center">
+            <v-col cols="12" md="6">
+              <strong>{{ selected.length }} producto(s) seleccionado(s)</strong>
+            </v-col>
+            <v-col cols="12" md="6" class="text-md-right">
+              <!-- Botón Activar: solo visible en filtro "Inactivos" -->
+              <v-btn
+                v-if="activeFilter === 'false'"
+                @click="activateSelected"
+                color="success"
+                variant="elevated"
+                prepend-icon="mdi-check-circle"
+                :disabled="loading"
+              >
+                Activar seleccionados
+              </v-btn>
+
+              <!-- Botón Desactivar: solo visible en filtro "Activos" -->
+              <v-btn
+                v-if="activeFilter === 'true'"
+                @click="deactivateSelected"
+                color="error"
+                variant="elevated"
+                prepend-icon="mdi-close-circle"
+                :disabled="loading"
+              >
+                Desactivar seleccionados
+              </v-btn>
+
+              <!-- Ambos botones visibles en filtro "Todos" -->
+              <template v-if="activeFilter === 'all'">
+                <v-btn
+                  @click="activateSelected"
+                  color="success"
+                  variant="elevated"
+                  prepend-icon="mdi-check-circle"
+                  class="mr-2"
+                  :disabled="loading"
+                >
+                  Activar seleccionados
+                </v-btn>
+                <v-btn
+                  @click="deactivateSelected"
+                  color="error"
+                  variant="elevated"
+                  prepend-icon="mdi-close-circle"
+                  :disabled="loading"
+                >
+                  Desactivar seleccionados
+                </v-btn>
+              </template>
+            </v-col>
+          </v-row>
+        </v-alert>
+      </v-col>
+    </v-row>
+
+    <!-- Tabla de productos -->
+    <v-row>
+      <v-col cols="12">
+        <v-card>
+          <v-data-table
+            v-model="selected"
+            :headers="headers"
+            :items="filteredProducts"
+            :loading="loading"
+            show-select
+            density="compact"
+            item-value="id"
+            items-per-page="25"
+            :items-per-page-options="[10, 25, 50, 100]"
+          >
+            <!-- Slot para columna de precio (formato) -->
+            <template #item.price="{ item }">
+              ${{ Number(item.price).toLocaleString("es-CO") }}
+            </template>
+
+            <!-- Slot para columna de estado -->
+            <template #item.active="{ item }">
+              <v-chip
+                :color="item.active ? 'success' : 'error'"
+                size="small"
+                variant="flat"
+              >
+                {{ item.active ? "Activo" : "Inactivo" }}
+              </v-chip>
+            </template>
+
+            <!-- Loading state -->
+            <template #loading>
+              <v-skeleton-loader type="table-row@10"></v-skeleton-loader>
+            </template>
+
+            <!-- No data state -->
+            <template #no-data>
+              <v-alert type="info" variant="tonal" class="my-4">
+                No hay productos para mostrar
+              </v-alert>
+            </template>
+          </v-data-table>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <!-- Snackbar de feedback -->
+    <v-snackbar
+      v-model="snackbar.show"
+      :color="snackbar.color"
+      :timeout="3000"
+      location="top"
+    >
+      {{ snackbar.message }}
+      <template #actions>
+        <v-btn variant="text" @click="snackbar.show = false"> Cerrar </v-btn>
+      </template>
+    </v-snackbar>
+  </v-container>
+</template>
+
+<script setup>
+import { ref, watch, inject, onMounted, computed } from "vue";
+
+// Estado
+const api = inject("api");
+const activeFilter = ref("false");
+const products = ref([]);
+const selected = ref([]);
+const loading = ref(false);
+const snackbar = ref({ show: false, message: "", color: "success" });
+const searchQuery = ref("");
+
+// Headers de la tabla
+const headers = [
+  { title: "ID", key: "id", sortable: true },
+  { title: "Nombre", key: "name", sortable: true },
+  { title: "Precio", key: "price", sortable: true },
+  { title: "Estado", key: "active", sortable: true },
+];
+
+// Computed - Productos filtrados por búsqueda
+const filteredProducts = computed(() => {
+  if (!searchQuery.value) {
+    return products.value;
+  }
+
+  const query = searchQuery.value.toLowerCase().trim();
+  return products.value.filter((product) =>
+    product.name.toLowerCase().includes(query),
+  );
+});
+
+// Métodos
+async function loadProducts() {
+  loading.value = true;
+  try {
+    const data = await api.getProducts(activeFilter.value);
+    products.value = data;
+  } catch (error) {
+    console.error("Error al cargar productos:", error);
+    showSnackbar("Error al cargar productos", "error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function activateSelected() {
+  await updateSelectedStatus(true);
+}
+
+async function deactivateSelected() {
+  await updateSelectedStatus(false);
+}
+
+async function updateSelectedStatus(active) {
+  loading.value = true;
+  try {
+    // Actualizar productos en paralelo
+    await Promise.all(
+      selected.value.map((id) => api.updateProduct(id, { active })),
+    );
+
+    const action = active ? "activado(s)" : "desactivado(s)";
+    showSnackbar(
+      `${selected.value.length} producto(s) ${action} exitosamente`,
+      "success",
+    );
+
+    // Limpiar selección y recargar
+    selected.value = [];
+    await loadProducts();
+  } catch (error) {
+    console.error("Error al actualizar productos:", error);
+    showSnackbar("Error al actualizar productos", "error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+function showSnackbar(message, color) {
+  snackbar.value = { show: true, message, color };
+}
+
+// Watchers
+watch(activeFilter, () => {
+  selected.value = [];
+  searchQuery.value = "";
+  loadProducts();
+});
+
+// Inicialización
+onMounted(() => {
+  loadProducts();
+});
+</script>
+
+<style scoped>
+.text-md-right {
+  text-align: right;
+}
+
+@media (max-width: 960px) {
+  .text-md-right {
+    text-align: left;
+  }
+}
+</style>

src/components/PublicOrderSummary.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <v-container v-if="loading" class="text-center py-8">
+      <v-progress-circular color="primary" indeterminate />
+      <p class="text-body-1 text-grey mt-4">Cargando pedido...</p>
+    </v-container>
+
+    <v-alert v-else-if="error" class="my-4" type="error">
+      {{ error }}
+    </v-alert>
+
+    <v-card v-else-if="purchase" class="rounded-lg">
+      <v-card-item>
+        <template #prepend>
+          <v-icon color="primary" size="36">mdi-receipt-text-outline</v-icon>
+        </template>
+        <v-card-title class="font-weight-bold text-h6">
+          {{ purchase.type === 'catalog' ? 'Resumen del pedido' : 'Resumen de la compra' }}
+        </v-card-title>
+      </v-card-item>
+      <v-divider />
+      <v-card-text>
+        <OrderAccessInfo :code="purchase.code" />
+        <v-divider class="my-3" />
+        <v-list>
+          <v-list-item>
+            <template #prepend>
+              <v-icon>mdi-calendar</v-icon>
+            </template>
+            <v-list-item-title>Fecha</v-list-item-title>
+            <v-list-item-subtitle>{{ purchase.date }}</v-list-item-subtitle>
+          </v-list-item>
+          <OrderCustomer :customer="purchase.customer" />
+          <OrderPayment
+            v-if="purchase.type === 'sale'"
+            :payment-method="purchase.payment_method"
+          />
+        </v-list>
+        <v-divider class="my-3" />
+        <OrderLines :lines="purchase.lines" />
+        <v-divider class="my-3" />
+        <OrderTotal :total="calculateTotal(purchase.lines)" />
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script setup>
+  import OrderAccessInfo from '@/components/order/OrderAccessInfo.vue'
+  import OrderCustomer from '@/components/order/OrderCustomer.vue'
+  import OrderLines from '@/components/order/OrderLines.vue'
+  import OrderPayment from '@/components/order/OrderPayment.vue'
+  import OrderTotal from '@/components/order/OrderTotal.vue'
+
+  defineProps({
+    purchase: {
+      type: Object,
+      default: null,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    error: {
+      type: String,
+      default: '',
+    },
+  })
+
+  function calculateTotal (lines = []) {
+    return lines.reduce((total, line) => {
+      return total + Number(line.unit_price || 0) * Number(line.quantity || 0)
+    }, 0)
+  }
+</script>

src/components/Purchase.vue

@@ -1,147 +1,321 @@
 <template>
-<v-container>
+  <v-container fluid class="pa-4 pa-md-6">
-  <v-form ref="purchase" v-model="valid" @change="onFormChange">
+    <v-form ref="purchase" v-model="valid" @change="onFormChange">
-    <v-row>
+
-        <v-col>
+      <!-- Encabezado -->
-            <v-autocomplete
+      <v-sheet class="page-header d-flex align-center pa-4 pa-md-6 mb-4 rounded-lg">
-                v-model="purchase.customer"
+        <v-icon start size="40" color="white" class="mr-3">mdi-cart-plus</v-icon>
-                :items="filteredClients"
+        <div>
-                :search="client_search"
+          <h1 class="text-h5 text-md-h4 font-weight-bold text-white mb-0">Nueva Compra</h1>
-                no-data-text="No se hallaron clientes"
+          <p class="text-body-2 text-white text-medium-emphasis mb-0">Registra una nueva venta en el sistema</p>
-                item-title="name"
+        </div>
-                item-value="id"
+      </v-sheet>
-                @update:model-value="onFormChange"
+
-                label="Cliente"
+      <!-- Loading -->
-                :rules="[rules.required]"
+      <template v-if="loading">
-                required
+        <v-sheet class="d-flex flex-column align-center justify-center pa-12 rounded-lg" elevation="2">
-                class="mr-4"
+          <v-progress-circular
-            ></v-autocomplete>
+            indeterminate
-            <v-btn color="primary" @click="openModal">Agregar Cliente</v-btn>
+            color="primary"
-            <CreateCustomerModal ref="customerModal" @customerCreated="handleNewCustomer"/>
+            size="64"
-      </v-col>
+            width="6"
-      <v-col lg="4">
+          ></v-progress-circular>
-          <v-text-field
+          <p class="text-body-1 text-grey mt-4">Cargando datos...</p>
-              v-model="purchase.date"
+        </v-sheet>
-              label="Fecha"
+      </template>
-              type="datetime-local"
+
-              :rules="[rules.required]"
+      <template v-else>
-              required
+        <!-- Card: Información del Cliente -->
-              readonly
+        <v-card class="mb-4 rounded-lg" elevation="2">
-          ></v-text-field>
+          <v-card-item>
-      </v-col>
+            <template #prepend>
-     </v-row>
+              <v-icon color="primary" size="36">mdi-account</v-icon>
-    <v-textarea
+            </template>
-      v-model="purchase.notes"
+            <v-card-title class="font-weight-bold text-h6">Información del Cliente</v-card-title>
-      label="Notas"
+            <v-card-subtitle>Datos básicos de la compra</v-card-subtitle>
-      rows="2"
+          </v-card-item>
-      ></v-textarea>
+          <v-divider></v-divider>
-    <v-divider></v-divider>
+          <v-card-text>
-    <v-container>
+            <v-row>
-      <v-toolbar>
+              <v-col cols="12" md="6">
-        <v-toolbar-title secondary>Productos</v-toolbar-title>
+                <v-autocomplete
-      </v-toolbar>
+                  v-model="purchase.customer"
-      <v-container v-for="(line, index) in purchase.saleline_set" :key="line.id">
+                  :items="clients"
-        <v-row>
+                  :search="client_search"
-            <v-col
+                  no-data-text="No se hallaron clientes"
-                lg="9">
+                  item-title="name"
-            <v-autocomplete
+                  item-value="id"
-              v-model="line.product"
+                  @update:model-value="onFormChange"
-              :items="filteredProducts"
+                  label="Cliente"
-              :search="product_search"
+                  :rules="[rules.required]"
-              @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
-              >
-              <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
-              lg="2"
-          >
-              <v-text-field
-                  v-model.number="line.quantity"
-                  label="Cantidad"
-                  type="number"
-                  :rules="[rules.required,rules.positive]"
                   required
-              ></v-text-field>
+                  clearable
-          </v-col>
+                  variant="outlined"
-        </v-row>
+                  density="comfortable"
-        <v-row>
+                  hide-details="auto"
-          <v-col>
+                ></v-autocomplete>
-            <v-text-field
+                <CreateCustomerModal ref="customerModal" @customerCreated="handleNewCustomer" />
-              v-model.number="line.unit_price"
+              </v-col>
-              label="Precio"
+              <v-col cols="12" md="3">
-              type="number"
+                <v-text-field
-              :rules="[rules.required]"
+                  v-model="purchase.date"
-              prefix="$"
+                  label="Fecha"
-              required
+                  type="datetime-local"
-              readonly
+                  :rules="[rules.required]"
-              ></v-text-field>
+                  required
-          </v-col>
+                  readonly
-          <v-col>
+                  variant="outlined"
-            <v-text-field
+                  density="comfortable"
-              v-model="line.measuring_unit"
+                  hide-details="auto"
-              label="UdM"
+                ></v-text-field>
-              persistent-placeholder="true"
+              </v-col>
-              readonly
+              <v-col cols="12" md="3">
-              ></v-text-field>
+                <v-btn
-          </v-col>
+                  variant="tonal"
-          <v-col>
+                  color="primary"
-            <v-text-field
+                  size="small"
-              type="number"
+                  class="mt-1"
-              :value="calculateSubtotal(line)"
+                  prepend-icon="mdi-plus"
-              label="Subtotal"
+                  @click="openModal"
-              prefix="$"
+                >
-              readonly
+                  Nuevo Cliente
-                disable
+                </v-btn>
-                persistent-placeholder="true"
+              </v-col>
-              ></v-text-field>
+            </v-row>
-            </v-col>
+            <v-row class="mt-0">
-            <v-col>
+              <v-col cols="12">
-              <v-btn @click="removeLine(index)" color="red">Eliminar</v-btn>
+                <v-textarea
-            </v-col>
+                  v-model="purchase.notes"
-        </v-row>
+                  label="Notas"
-        <v-alert type="warning" :duration="2000" closable v-model="show_alert_lines">
+                  rows="2"
-          No se puede eliminar la única línea.
+                  variant="outlined"
-        </v-alert>
+                  density="comfortable"
-      </v-container>
+                  hide-details="auto"
-        <v-btn @click="addLine" color="blue">Agregar</v-btn>
+                ></v-textarea>
-        </v-container>
+              </v-col>
-        <v-divider></v-divider>
+            </v-row>
-        <v-text-field
+          </v-card-text>
-          :value="calculateTotal"
+        </v-card>
-          label="Total"
+
-          prefix="$"
+        <!-- Card: Productos -->
-          readonly
+        <v-card class="mb-4 rounded-lg" elevation="2">
-          persistent-placeholder="true"
+          <v-card-item>
-        ></v-text-field>
+            <template #prepend>
-        <v-container v-if="calculateTotal > 0">
+              <v-icon color="green-darken-1" size="36">mdi-package-variant-closed</v-icon>
-          <v-select
+            </template>
-            :items="payment_methods"
+            <v-card-title class="font-weight-bold text-h6">Productos</v-card-title>
-            v-model="purchase.payment_method"
+            <v-card-subtitle>Agrega los productos de la compra</v-card-subtitle>
-            item-title="text"
+          </v-card-item>
-            item-value="value"
+          <v-divider></v-divider>
-            label="Pago en"
+
-            :rules="[rules.required]"
+          <!-- Encabezados de columnas (solo desktop) -->
-            required
+          <div class="d-none d-md-flex px-6 pt-3 text-caption font-weight-bold text-grey">
-          ></v-select>
+            <div class="flex-grow-1 flex-shrink-1" style="min-width:0">Producto</div>
-          <v-btn @click="openCasherModal" v-if="purchase.payment_method === 'CASH'">Calcular Devuelta</v-btn>
+            <div class="mx-2 text-center" style="width:100px; flex-shrink:0">Cantidad</div>
-          <CasherModal :total_purchase="calculateTotal" ref="casherModal"</CasherModal>
+            <div class="mx-2 text-end" style="width:110px; flex-shrink:0">Precio</div>
-        </v-container>
+            <div class="mx-2 text-end" style="width:110px; flex-shrink:0">Subtotal</div>
-        <v-btn @click="submit" color="green">Comprar</v-btn>
+            <div style="width:40px; flex-shrink:0"></div>
-        <v-alert type="error" :duration="2000" closable v-model="show_alert_purchase">
+          </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"
+                    :search="product_search"
+                    @update:modelValue="onProductChange(index)"
+                    no-data-text="No se hallaron productos"
+                    item-title="name"
+                    item-value="id"
+                    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>
+
+                <!-- Cantidad -->
+                <v-col cols="4" md="auto" class="pe-1">
+                  <v-text-field
+                    v-model.number="line.quantity"
+                    label="Cant."
+                    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>
+
+                <!-- Precio -->
+                <v-col cols="4" md="auto" class="px-1">
+                  <v-text-field
+                    v-model.number="line.unit_price"
+                    label="Precio"
+                    type="number"
+                    :rules="[rules.required]"
+                    prefix="$"
+                    required
+                    :readonly="!isAdmin"
+                    variant="outlined"
+                    density="compact"
+                    hide-details="auto"
+                    class="price-field"
+                  ></v-text-field>
+                </v-col>
+
+                <!-- Subtotal + UdM -->
+                <v-col cols="4" md="auto" class="ps-1">
+                  <v-text-field
+                    type="number"
+                    :value="calculateSubtotal(line)"
+                    label="Subtotal"
+                    prefix="$"
+                    readonly
+                    variant="outlined"
+                    density="compact"
+                    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>
+
+                <!-- Eliminar + UdM desktop -->
+                <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"
+              closable
+              v-model="show_alert_lines"
+              density="compact"
+              variant="tonal"
+              class="ma-3"
+            >
+              No se puede eliminar la única línea.
+            </v-alert>
+
+            <v-divider class="my-2"></v-divider>
+
+            <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-row align="center">
+              <v-col cols="12" md="6">
+                <v-select
+                  :items="payment_methods || []"
+                  v-model="purchase.payment_method"
+                  item-title="text"
+                  item-value="value"
+                  label="Método de Pago"
+                  :rules="[rules.required]"
+                  required
+                  variant="outlined"
+                  density="comfortable"
+                  hide-details="auto"
+                ></v-select>
+              </v-col>
+              <v-col cols="12" md="6" class="text-center text-md-end">
+                <div class="text-body-2 text-grey mb-1">Total de la compra</div>
+                <div class="total-amount">{{ formatPrice(calculateTotal) }}</div>
+                <v-btn
+                  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>
-  </v-form>
+
-</v-container>
+        <CasherModal :total_purchase="calculateTotal" ref="casherModal" />
+      </template>
+    </v-form>
+  </v-container>
 </template>
 
 <script>
@@ -149,25 +323,30 @@
   import CasherModal from './CasherModal.vue';
   import { inject } from 'vue';
 
-  export default {
+   export default {
-    name: 'DonConfiao',
+     name: 'DonConfiao',
-    components: {
+     components: {
-     CustomerForm,
+      CustomerForm,
-     CasherModal,
+      CasherModal,
    },
    props: {
-     msg: String
+     msg: String,
+     isAdmin: {
+       type: Boolean,
+       default: false
+     }
    },
    data() {
      return {
        api: inject('api'),
+       loading: true,
        valid: false,
        form_changed: false,
        show_alert_lines: false,
        show_alert_purchase: false,
        client_search: '',
        product_search: '',
-       payment_methods: null,
+       payment_methods: [],
        purchase: {
          date: this.getCurrentDate(),
          customer: null,
@@ -179,57 +358,24 @@
            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: [],
      };
-   },
+    },
-     created() {
+    created() {
-     this.fetchClients();
+      this.fetchClients();
-     this.fetchProducts();
+      this.fetchProducts();
-     this.fetchPaymentMethods();
+      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: {
+     methods: {
-     openModal() {
+       openModal() {
       this.$refs.customerModal.openModal();
      },
      onFormChange() {
@@ -250,7 +396,6 @@
          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;
      },
@@ -267,6 +412,9 @@
            })
            .catch(error => {
              console.error(error);
+           })
+           .finally(() => {
+             this.loading = false;
            });
      },
        handleNewCustomer(newCustomer){
@@ -307,36 +455,58 @@
      calculateSubtotal(line) {
        return line.unit_price * line.quantity;
      },
-     async submit() {
+      async submit() {
-       this.$refs.purchase.validate();
+        this.$refs.purchase.validate();
-         if (this.valid) {
+          if (this.valid) {
-           this.api.createPurchase(this.purchase)
+             this.api.createPurchase(this.purchase)
-               .then(data => {
+                 .then(data => {
-                 console.log('Compra enviada:', data);
+                   console.log('Compra enviada:', data);
-                 this.$router.push({
+                   this.$router.push({
-                   path: "/summary_purchase",
+                    path: "/summary_purchase",
-                   query : {id: parseInt(data.id)}
+                    query : {id: parseInt(data.id)}
-                 });
+                  });
-               })
+                })
-           .catch(error => console.error('Error al enviarl la compra:', error));
+            .catch(error => console.error('Error al enviarl la compra:', error));
-       } else {
+        } else {
-         this.show_alert_purchase = true;
+          this.show_alert_purchase = true;
-           setTimeout(() => {
+            setTimeout(() => {
-             this.show_alert_purchase = false;
+              this.show_alert_purchase = false;
-           }, 4000);
+            }, 4000);
-       }
+        }
-     },
+      },
      navigate(route) {
        this.$router.push(route);
      },
      formatPrice(price) {
-       return new Intl.NumberFormat('es-ES', { style: 'currency', currency: 'COP' }).format(price);
+       return new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP', minimumFractionDigits: 0 }).format(price);
      },
-   },
+    }
-     mounted() {
+  };
-         this.fetchClients();
-     }
- };
 </script>
 <style>
+.page-header {
+  background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%) !important;
+  color: white !important;
+}
+
+.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/ReconciliationJar.vue

@@ -52,7 +52,7 @@
         :key="payment_method"
         :value="payment_method"
       >
-        {{ payment_method }}&nbsp; <CurrencyText :value="totalByMethod(payment_method)"</CurrencyText>
+        {{ payment_method }}&nbsp; <CurrencyText :value="totalByMethod(payment_method)" />
       </v-tab>
     </v-tabs>
 

src/components/ReconciliationJarView.vue

@@ -41,7 +41,7 @@
             v-for="(elements, paymentMethod) in purchases"
             :key="paymentMethod"
           >
-            {{ paymentMethod }}&nbsp; <CurrencyText :value="elements.total"</CurrencyText>
+            {{ paymentMethod }}&nbsp; <CurrencyText :value="elements.total" />
           </v-tab>
         </v-tabs>
         <v-tabs-window v-model="tab">
@@ -63,7 +63,7 @@
                   <td><v-btn @click="openSummaryModal(purchase.id)">{{ purchase.id }}</v-btn></td>
                   <td>{{ purchase.date }}</td>
                   <td>{{ purchase.customer }}</td>
-                  <td><CurrencyText :value="purchase.total"</CurrencyText></td>
+                  <td><CurrencyText :value="purchase.total" /></td>
 
                 </tr>
               </tbody>

src/components/SiteLogo.vue

@@ -0,0 +1,39 @@
+<template>
+  <v-img
+    v-if="logoUrl && !broken"
+    :src="logoUrl"
+    :alt="alt"
+    :max-width="maxWidth"
+    @error="broken = true"
+  />
+</template>
+
+<script setup>
+import { computed, inject, onMounted, ref } from 'vue';
+import { useSettingsStore } from '@/stores/settings';
+
+const props = defineProps({
+  maxWidth: {
+    type: [Number, String],
+    default: 180,
+  },
+  alt: {
+    type: String,
+    default: 'Don Confiao',
+  },
+});
+
+const settingsStore = useSettingsStore();
+const api = inject('api');
+const broken = ref(false);
+
+const logoUrl = computed(() => settingsStore.logo);
+
+onMounted(async () => {
+  try {
+    await settingsStore.fetchSettings(api);
+  } catch (e) {
+    broken.value = true;
+  }
+});
+</script>

src/components/StoreLocation.vue

@@ -0,0 +1,167 @@
+<template>
+  <v-container v-if="settings && settings.address">
+    <v-sheet
+      class="store-location-section rounded-xl pa-6 pa-md-8"
+      elevation="2"
+    >
+      <div class="d-flex flex-column align-center text-center mb-4">
+        <div class="d-flex align-center mb-1">
+          <v-icon color="primary" size="36" class="mr-2">mdi-map-marker</v-icon>
+          <h2 class="text-h4 font-weight-bold mb-0">Visítanos</h2>
+        </div>
+        <p class="text-body-1 text-medium-emphasis mb-0">
+          Encuentra nuestra tienda física y adquiere nuestros productos
+        </p>
+      </div>
+
+      <div class="text-center mb-4">
+        <div class="d-flex align-center justify-center">
+          <v-icon color="red" class="mr-2">mdi-map-marker</v-icon>
+          <span class="text-h6 font-weight-medium">
+            {{ settings.address }}
+          </span>
+        </div>
+        <v-btn
+          v-if="hasCoordinates"
+          :href="directionsLink"
+          target="_blank"
+          rel="noopener noreferrer"
+          color="primary"
+          variant="tonal"
+          size="small"
+          prepend-icon="mdi-directions"
+          class="mt-2"
+        >
+          Cómo llegar
+        </v-btn>
+        <v-btn
+          v-else
+          :href="searchLink"
+          target="_blank"
+          rel="noopener noreferrer"
+          color="primary"
+          variant="tonal"
+          size="small"
+          prepend-icon="mdi-map-search"
+          class="mt-2"
+        >
+          Ver en el mapa
+        </v-btn>
+      </div>
+
+      <div v-if="hasCoordinates" ref="mapEl" class="map-wrapper"></div>
+      <v-alert v-else type="info" variant="tonal" class="ma-0">
+        La ubicación en el mapa aún no está configurada.
+      </v-alert>
+    </v-sheet>
+  </v-container>
+</template>
+
+<script setup>
+import { ref, computed, inject, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import { useSettingsStore } from '@/stores/settings';
+
+const api = inject('api');
+const settingsStore = useSettingsStore();
+
+const settings = computed(() => settingsStore.settings);
+const mapEl = ref(null);
+
+let map = null;
+let marker = null;
+
+const hasCoordinates = computed(
+  () =>
+    settings.value &&
+    settings.value.latitude != null &&
+    settings.value.longitude != null
+);
+
+const redPinIcon = L.divIcon({
+  className: 'store-map-pin',
+  html: '<i class="mdi mdi-map-marker" style="font-size:48px;line-height:1;color:#f44336;"></i>',
+  iconSize: [48, 48],
+  iconAnchor: [24, 48],
+});
+
+const directionsLink = computed(() => {
+  const lat = settings.value.latitude;
+  const lng = settings.value.longitude;
+  return `https://www.openstreetmap.org/?mlat=${lat}&mlon=${lng}#map=16/${lat}/${lng}`;
+});
+
+const searchLink = computed(
+  () =>
+    `https://www.openstreetmap.org/search?query=${encodeURIComponent(
+      settings.value.address
+    )}`
+);
+
+function initMap() {
+  if (!hasCoordinates.value || !mapEl.value || map) return;
+
+  const lat = settings.value.latitude;
+  const lng = settings.value.longitude;
+
+  map = L.map(mapEl.value, {
+    scrollWheelZoom: false,
+  }).setView([lat, lng], 16);
+
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution:
+      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+  }).addTo(map);
+
+  marker = L.marker([lat, lng], { icon: redPinIcon }).addTo(map);
+  marker.bindPopup(settings.value.address);
+}
+
+function handleResize() {
+  if (map) {
+    map.invalidateSize();
+  }
+}
+
+onMounted(async () => {
+  try {
+    await settingsStore.fetchSettings(api);
+    await nextTick();
+    initMap();
+  } catch (error) {
+    console.error('Error al cargar la información de la tienda:', error);
+  }
+  window.addEventListener('resize', handleResize);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize);
+  if (map) {
+    map.remove();
+    map = null;
+    marker = null;
+  }
+});
+</script>
+
+<style scoped>
+.store-location-section {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.map-wrapper {
+  position: relative;
+  width: 100%;
+  height: 400px;
+  border-radius: 12px;
+  overflow: hidden;
+  z-index: 0;
+}
+
+.map-wrapper :deep(.leaflet-control-attribution) {
+  font-size: 10px;
+}
+</style>

src/components/StoreSettingsManagement.vue

@@ -0,0 +1,235 @@
+<template>
+  <v-container fluid>
+    <v-row align="center">
+      <v-col cols="12" md="6">
+        <h1 class="text-h4">Datos de la Tienda</h1>
+      </v-col>
+      <v-col cols="12" md="6" class="text-md-right">
+        <v-btn
+          color="primary"
+          variant="elevated"
+          prepend-icon="mdi-content-save"
+          :loading="submitting"
+          :disabled="submitting"
+          @click="submitForm"
+        >
+          Guardar Cambios
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12">
+        <v-card>
+          <v-card-text>
+            <v-form ref="formRef">
+              <v-text-field
+                v-model="form.address"
+                label="Dirección de la tienda"
+                :rules="[(v) => !!v || 'La dirección es obligatoria']"
+                variant="outlined"
+                prepend-inner-icon="mdi-map-marker"
+                class="mb-3"
+              />
+
+              <v-row>
+                <v-col cols="12" md="6">
+                  <v-text-field
+                    v-model.number="form.latitude"
+                    label="Latitud (opcional)"
+                    variant="outlined"
+                    prepend-inner-icon="mdi-crosshairs-gps"
+                    type="number"
+                    step="any"
+                    class="mb-3"
+                    hint="Ej: 4.6097"
+                    persistent-hint
+                  />
+                </v-col>
+                <v-col cols="12" md="6">
+                  <v-text-field
+                    v-model.number="form.longitude"
+                    label="Longitud (opcional)"
+                    variant="outlined"
+                    prepend-inner-icon="mdi-crosshairs-gps"
+                    type="number"
+                    step="any"
+                    class="mb-3"
+                    hint="Ej: -74.0817"
+                    persistent-hint
+                  />
+                </v-col>
+              </v-row>
+
+              <v-divider class="my-4" />
+
+              <div>
+                <h3 class="text-h6 mb-2">Logo del sitio</h3>
+                <v-img
+                  v-if="currentLogo"
+                  :src="currentLogo"
+                  alt="Logo actual"
+                  max-width="180"
+                  class="mb-3"
+                />
+                <v-file-input
+                  v-model="logoFile"
+                  label="Seleccionar nueva imagen del logo"
+                  accept="image/*"
+                  prepend-icon="mdi-image"
+                  variant="outlined"
+                  class="mb-3"
+                  clearable
+                />
+                <v-btn
+                  v-if="currentLogo"
+                  variant="tonal"
+                  color="error"
+                  prepend-icon="mdi-image-off"
+                  :loading="removingLogo"
+                  :disabled="removingLogo || submitting"
+                  @click="removeLogo"
+                >
+                  Quitar logo actual
+                </v-btn>
+              </div>
+            </v-form>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <v-snackbar
+      v-model="snackbar.show"
+      :color="snackbar.color"
+      :timeout="3000"
+      location="top"
+    >
+      {{ snackbar.message }}
+      <template #actions>
+        <v-btn variant="text" @click="snackbar.show = false">Cerrar</v-btn>
+      </template>
+    </v-snackbar>
+  </v-container>
+</template>
+
+<script setup>
+import { ref, inject, onMounted } from "vue";
+import { useSettingsStore } from "@/stores/settings";
+
+const api = inject("api");
+const settingsStore = useSettingsStore();
+
+const formRef = ref(null);
+const submitting = ref(false);
+const removingLogo = ref(false);
+const logoFile = ref(null);
+const currentLogo = ref(null);
+
+const form = ref({
+  address: "",
+  latitude: null,
+  longitude: null,
+});
+
+const snackbar = ref({ show: false, message: "", color: "success" });
+
+async function loadSettings() {
+  try {
+    const data = await api.getStoreSettings();
+    settingsStore.setSettings(data);
+    form.value = {
+      address: data.address || "",
+      latitude: data.latitude ?? null,
+      longitude: data.longitude ?? null,
+    };
+    currentLogo.value = data.logo || null;
+  } catch (error) {
+    console.error("Error al cargar la información de la tienda:", error);
+    showSnackbar("Error al cargar la información de la tienda", "error");
+  }
+}
+
+async function submitForm() {
+  const formComponent = formRef.value;
+  if (formComponent) {
+    const { valid } = await formComponent.validate();
+    if (!valid) return;
+  }
+
+  submitting.value = true;
+  try {
+    if (logoFile.value) {
+      const payload = new FormData();
+      payload.append("address", form.value.address);
+      if (form.value.latitude !== "" && form.value.latitude != null) {
+        payload.append("latitude", toNumberOrNull(form.value.latitude));
+      }
+      if (form.value.longitude !== "" && form.value.longitude != null) {
+        payload.append("longitude", toNumberOrNull(form.value.longitude));
+      }
+      payload.append("logo", logoFile.value);
+      await api.updateStoreSettings(payload);
+    } else {
+      await api.updateStoreSettings({
+        address: form.value.address,
+        latitude: toNumberOrNull(form.value.latitude),
+        longitude: toNumberOrNull(form.value.longitude),
+      });
+    }
+    logoFile.value = null;
+    await refreshLogo();
+    showSnackbar("Información de la tienda actualizada", "success");
+  } catch (error) {
+    console.error("Error al guardar la información de la tienda:", error);
+    showSnackbar("Error al guardar la información de la tienda", "error");
+  } finally {
+    submitting.value = false;
+  }
+}
+
+async function removeLogo() {
+  removingLogo.value = true;
+  try {
+    await api.updateStoreSettings({ logo: null });
+    logoFile.value = null;
+    await refreshLogo();
+    showSnackbar("Logo eliminado", "success");
+  } catch (error) {
+    console.error("Error al quitar el logo:", error);
+    showSnackbar("Error al quitar el logo", "error");
+  } finally {
+    removingLogo.value = false;
+  }
+}
+
+async function refreshLogo() {
+  const data = await api.getStoreSettings();
+  settingsStore.setSettings(data);
+  currentLogo.value = data.logo || null;
+}
+
+function toNumberOrNull(value) {
+  if (value === null || value === undefined || value === "") return null;
+  const number = Number(value);
+  return Number.isNaN(number) ? null : number;
+}
+
+function showSnackbar(message, color) {
+  snackbar.value = { show: true, message, color };
+}
+
+onMounted(loadSettings);
+</script>
+
+<style scoped>
+.text-md-right {
+  text-align: right;
+}
+
+@media (max-width: 960px) {
+  .text-md-right {
+    text-align: left;
+  }
+}
+</style>

src/components/SummaryPurchase.vue

@@ -8,8 +8,9 @@
     </v-container>
     <v-container v-show="id">
       <v-toolbar>
-        <v-toolbar-title> Resumen de la compra {{ id }}</v-toolbar-title>
+        <v-toolbar-title> {{ type === 'catalog' ? 'Resumen del pedido' : 'Resumen de la compra' }} {{ id }}</v-toolbar-title>
       </v-toolbar>
+      <OrderAccessInfo v-if="purchase.code" :code="purchase.code" />
       <v-list>
         <v-list-item>
             <v-list-item-title>Fecha:</v-list-item-title>
@@ -39,7 +40,7 @@
           {{ currencyFormat(calculateSubtotal(item.unit_price, item.quantity)) }}
         </template>
       </v-data-table-virtual>
-      <v-alert type="info" class="my-4">
+      <v-alert v-if="type !== 'catalog'" type="info" class="my-4">
         Recuerda adicionar a la planilla física lo siguiente
         <v-data-table
           :headers="headersTemplate"
@@ -52,6 +53,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>
@@ -71,7 +73,8 @@
     name: 'SummaryPurchase',
     props: {
       msg: String,
-      id: Number
+      id: Number,
+      type: String
     },
     data () {
       return {
@@ -87,6 +90,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: ''},
         ],
       };
@@ -100,7 +104,11 @@
     },
     methods: {
       fetchPurchase(purchaseId) {
-        this.api.getSummaryPurchase(purchaseId)
+        const apiMethod = this.type === 'catalog' 
+          ? this.api.getSummaryCatalogPurchase(purchaseId)
+          : this.api.getSummaryPurchase(purchaseId);
+        
+        apiMethod
           .then(data => {
             this.purchase = data;
           })

src/components/Wellcome.vue

@@ -1,34 +1,315 @@
 <template>
-  <v-container >
+  <v-container fluid class="pa-0">
-    <v-responsive>
+    <v-sheet
-      <v-toolbar>
+      class="hero-section d-flex align-center justify-center text-center pa-8"
-        <v-toolbar-title>Don Confiao te atiende</v-toolbar-title>
+    >
-      </v-toolbar>
+      <div class="glow-bubble bubble-blue"></div>
-      <v-card>
+      <div class="glow-bubble bubble-green"></div>
-        <v-card-title>Hacer parte de la tienda la ilusión</v-card-title>
+      <div class="glow-bubble bubble-yellow"></div>
-        <v-card-text>
+      <div class="glow-bubble bubble-red"></div>
-          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.
+      <div class="hero-content">
-        </v-card-text>
+        <SiteLogo max-width="180" class="mx-auto mb-4" />
-      </v-card>
+        <h1 class="text-h4 font-weight-bold mb-2">Don Confiao te atiende</h1>
+        <p class="text-subtitle-1 font-italic font-weight-bold">
+          Economía solidaria, mercado justo, alimentación sana
+        </p>
+      </div>
+    </v-sheet>
 
-      <v-card>
+    <div class="py-6">
-        <v-card-title>En desarrollo</v-card-title>
+      <StoreLocation />
-        <v-card-text>
+    </div>
-          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.
 
-          <v-alert type="warning">
+    <v-container class="py-6">
-            Si no vas a pagar tu compra recuerda que debes hacerlo en la planilla manual</v-alert>
+      <v-row>
-        </v-card-text>
+        <v-col cols="12" md="4">
-      </v-card>
+          <v-card class="h-100" elevation="2">
-      <v-card>
+            <v-card-item>
-        <v-card-title>A comprar</v-card-title>
+              <template #prepend>
-        <v-card-text>
+                <v-icon color="green" size="48">mdi-hand-heart</v-icon>
-          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.
+              </template>
-          <div class="text-center">
+              <v-card-title class="font-weight-bold"
-            <v-btn :to="{ path: 'comprar' }" color="green">Ir a Comprar</v-btn>
+                >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-col cols="12" md="4">
+          <v-card class="h-100" elevation="2">
+            <v-card-item>
+              <template #prepend>
+                <v-icon color="green" size="48">mdi-code-tags</v-icon>
+              </template>
+              <v-card-title class="font-weight-bold"
+                >Software Libre</v-card-title
+              >
+            </v-card-item>
+            <v-card-text>
+              Don Confiao es un proyecto de
+              <ResaltedText>Software Libre</ResaltedText>. Su desarrollo está
+              dividido en dos repositorios: el backend y el frontend.
+            </v-card-text>
+            <v-card-actions>
+              <v-btn
+                href="https://gitea.onecluster.org/OneTeam/don_confiao_backend"
+                target="_blank"
+                rel="noopener"
+                prepend-icon="mdi-server"
+                variant="text"
+                color="primary"
+              >
+                Backend
+              </v-btn>
+              <v-btn
+                href="https://gitea.onecluster.org/OneTeam/don_confiao_frontend"
+                target="_blank"
+                rel="noopener"
+                prepend-icon="mdi-web"
+                variant="text"
+                color="primary"
+              >
+                Frontend
+              </v-btn>
+            </v-card-actions>
+          </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: 'catalog' }"
+              color="primary"
+              size="x-large"
+              prepend-icon="mdi-store"
+              variant="elevated"
+              class="px-8"
+            >
+              Ver Catálogo
+            </v-btn>
+            <v-btn
+              v-if="authStore.isAuthenticated && authStore.isAdmin"
+              :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: 'pedido' }"
+              color="orange-darken-2"
+              size="x-large"
+              prepend-icon="mdi-magnify-scan"
+              variant="elevated"
+              class="px-8"
+            >
+              Consultar mi pedido o compra
+            </v-btn>
           </div>
-        </v-card-text>
+        </v-col>
-      </v-card>
+      </v-row>
-    </v-responsive>
+    </v-container>
   </v-container>
 </template>
+
+<script setup>
+import ResaltedText from "@/components/ResaltedText.vue";
+import StoreLocation from "@/components/StoreLocation.vue";
+import SiteLogo from "@/components/SiteLogo.vue";
+import { useAuthStore } from '@/stores/auth';
+
+const authStore = useAuthStore();
+</script>
+
+<style scoped>
+.hero-section {
+  min-height: 500px; /* Un poco más de aire vertical */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 4rem 2rem;
+  position: relative;
+  overflow: hidden;
+  /* Fondo blanco tiza ultra limpio para que los colores pastel floten */
+  background-color: #f8fafc !important;
+}
+
+.glow-bubble {
+  position: absolute;
+  border-radius: 10%;
+  pointer-events: none;
+  z-index: 1;
+  mix-blend-mode: normal;
+}
+
+.bubble-blue {
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(
+    circle,
+    rgba(66, 165, 245, 0.8) 10%,
+    rgba(66, 165, 245, 0) 80%
+  );
+  filter: blur(100px);
+  top: -180px;
+  left: -150px;
+  animation: floatCornerTL 8s ease-in-out infinite;
+}
+
+.bubble-green {
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(
+    circle,
+    rgba(0, 200, 83, 0.7) 10%,
+    rgba(0, 200, 83, 0) 80%
+  );
+  filter: blur(100px);
+  bottom: -150px;
+  right: -120px;
+  animation: floatCornerBR 9s ease-in-out infinite;
+  animation-delay: 1.5s;
+}
+
+.bubble-yellow {
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(
+    circle,
+    rgba(255, 213, 0, 0.85) 20%,
+    rgba(255, 193, 7, 0) 1000%
+  );
+  filter: blur(80px);
+  top: 50%;
+  left: 50%;
+  animation: glowPulseCenter 8s ease-in-out infinite;
+}
+
+.bubble-red {
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(
+    circle,
+    rgba(239, 83, 80, 0.7) 10%,
+    rgba(239, 83, 80, 0) 80%
+  );
+  filter: blur(100px);
+  top: -150px;
+  right: -120px;
+  animation: floatCornerTR 8s ease-in-out infinite;
+  animation-delay: 3s;
+}
+
+/* --- CONTENEDOR ELEGANTE (Glassmorphism) --- */
+.hero-content {
+  position: relative;
+  z-index: 2;
+  color: #0f172a !important; /* Azul pizarra profundo de alta costura */
+  text-align: center;
+  max-width: 750px;
+  margin: 0 auto;
+  padding: 3rem 2.5rem;
+
+  /* El secreto elegante: un sutil escudo de cristal que desenfoca el fondo */
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.08);
+}
+
+/* Eliminamos las sombras de texto redundantes gracias al escudo protector de cristal */
+.hero-content h1 {
+  font-size: 3rem;
+  font-weight: 800;
+  letter-spacing: -0.02em; /* Tipografía compacta estilo Apple */
+  line-height: 1.15;
+  margin-bottom: 1rem;
+}
+
+.hero-content p {
+  font-size: 1.15rem;
+  color: #475569; /* Gris suavizado elegante para el subtítulo */
+  line-height: 1.6;
+}
+
+/* --- ANIMACIONES Ralentizadas y Cinemáticas --- */
+/* --- 1. Esquina Superior Izquierda (Azul) --- */
+@keyframes floatCornerTL {
+  0%,
+  100% {
+    opacity: 0.15;
+    transform: scale(0.9) translate(0, 0);
+  }
+  50% {
+    opacity: 0.85;
+    transform: scale(1.25) translate(40px, 30px); /* Movimiento fluido y orgánico */
+  }
+}
+
+/* --- 2. Esquina Superior Derecha (Rojo) --- */
+@keyframes floatCornerTR {
+  0%,
+  100% {
+    opacity: 0.15;
+    transform: scale(1.2) translate(0, 0); /* Corregido: Escala inicial estable */
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(0.95) translate(-30px, 40px);
+  }
+}
+
+/* --- 3. Esquina Inferior Derecha (Verde) - CORREGIDA --- */
+@keyframes floatCornerBR {
+  0%,
+  100% {
+    opacity: 0.1; /* Corregido: Cambiado de 0 a un estado tenue elegante */
+    transform: scale(0.85) translate(0, 0);
+  }
+  50% {
+    opacity: 0.75; /* Corregido: Cambiado de 0 a visible */
+    transform: scale(1.15) translate(-40px, -30px);
+  }
+}
+
+/* --- 4. Centro (Amarillo) - Optimizado en 3 puntos para máxima fluidez --- */
+@keyframes glowPulseCenter {
+  0%,
+  100% {
+    opacity: 0.25;
+    transform: translate(-50%, -50%) scale(0.85);
+  }
+  50% {
+    opacity: 0.9; /* Simplificado a 50% para sincronía perfecta con las esquinas */
+    transform: translate(-50%, -50%) scale(1.3); /* Un destello central controlado */
+  }
+}
+</style>

src/components/catalog/Card.vue

@@ -0,0 +1,469 @@
+<template>
+  <v-card class="product-card" elevation="2" rounded="lg">
+    <!-- Imagen del Producto -->
+    <div class="product-image-container">
+      <v-img
+        :src="product.img"
+        :alt="product.name"
+        class="product-img"
+        cover
+        max-height="300"
+        aspect-ratio="1"
+      >
+        <template v-slot:placeholder>
+          <div class="d-flex align-center justify-center fill-height">
+            <v-progress-circular
+              indeterminate
+              color="primary"
+              size="32"
+            ></v-progress-circular>
+          </div>
+        </template>
+      </v-img>
+    </div>
+
+    <!-- Contenido de la Tarjeta -->
+    <v-card-text class="product-content pa-3 text-center">
+      <!-- Título del Producto -->
+      <v-tooltip location="top" :text="product.name">
+        <template v-slot:activator="{ props }">
+          <h3
+            class="product-name text-subtitle-1 font-weight-medium mb-2"
+            v-bind="props"
+          >
+            {{ product.name }}
+          </h3>
+        </template>
+      </v-tooltip>
+
+      <!-- Sección de Precios -->
+      <div class="prices-section mb-2">
+        <!-- Precio Unitario -->
+        <div class="price-row mb-1">
+          <span class="price-label text-caption">Precio unitario</span>
+          <div class="price-value text-body-1 font-weight-bold text-primary">
+            {{ currency(product.price) }}
+          </div>
+        </div>
+
+        <!-- Precio Total -->
+        <div v-if="product.quantity > 0" class="price-row">
+          <span class="price-label text-caption">Precio total</span>
+          <v-chip
+            color="success"
+            variant="flat"
+            size="small"
+            class="price-total-chip font-weight-bold mt-1"
+          >
+            {{ currency(product.price * product.quantity) }}
+          </v-chip>
+        </div>
+      </div>
+    </v-card-text>
+
+    <!-- Footer con Controles de Cantidad -->
+    <v-card-actions class="product-actions pa-2 pb-3 justify-center">
+      <template v-if="disabled">
+        <v-btn
+          color="primary"
+          variant="tonal"
+          prepend-icon="mdi-cart-plus"
+          class="login-add-btn"
+          @click="$emit('request-login')"
+        >
+          Agregar
+        </v-btn>
+      </template>
+      <template v-else>
+        <div class="quantity-controls">
+          <v-btn
+            icon
+            size="small"
+            variant="tonal"
+            color="error"
+            class="qty-btn"
+            @click="decrease(product)"
+            :disabled="product.quantity === 0"
+          >
+            <v-icon size="20">mdi-minus</v-icon>
+          </v-btn>
+
+          <v-text-field
+            v-model.number="product.quantity"
+            type="number"
+            min="0"
+            class="quantity-input mx-1"
+            variant="solo-filled"
+            density="compact"
+            hide-details
+            single-line
+            flat
+            aria-label="Cantidad"
+            @input="handleQuantityChange"
+          />
+
+          <v-btn
+            icon
+            size="small"
+            variant="tonal"
+            color="success"
+            class="qty-btn"
+            @click="handleIncrease"
+          >
+            <v-icon size="20">mdi-plus</v-icon>
+          </v-btn>
+        </div>
+      </template>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+export default {
+  emits: ['add-to-cart', 'request-login'],
+  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,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  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>
+/* ============================================
+   CARD CONTAINER
+   ============================================ */
+.product-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: #ffffff;
+  overflow: hidden;
+}
+
+.product-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
+  border-color: rgba(33, 150, 243, 0.3);
+}
+
+/* ============================================
+   IMAGEN DEL PRODUCTO
+   ============================================ */
+.product-image-container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.product-img {
+  width: 100%;
+  height: 100%;
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.product-card:hover .product-img {
+  transform: scale(1.08);
+}
+
+/* ============================================
+   CONTENIDO DE LA TARJETA
+   ============================================ */
+.product-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.product-name {
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: #1a1a1a;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-height: 2.5rem;
+  letter-spacing: 0.01em;
+}
+
+/* ============================================
+   SECCIÓN DE PRECIOS
+   ============================================ */
+.prices-section {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.price-row {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+
+.price-label {
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  font-size: 0.65rem;
+  color: #9e9e9e;
+  font-weight: 500;
+}
+
+.price-value {
+  color: #1565c0;
+  letter-spacing: 0.02em;
+  font-size: 1.1rem;
+}
+
+.price-total-chip {
+  letter-spacing: 0.03em;
+  font-size: 0.9rem;
+  padding: 0 12px;
+  height: 26px;
+  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.25);
+}
+
+/* ============================================
+   CONTROLES DE CANTIDAD
+   ============================================ */
+.product-actions {
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+  background: #fafafa;
+}
+
+.quantity-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.quantity-input {
+  max-width: 65px;
+  min-width: 65px;
+}
+
+.quantity-input :deep(.v-field) {
+  background-color: #ffffff !important;
+  border-radius: 8px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+
+.quantity-input :deep(.v-field__input) {
+  text-align: center;
+  font-weight: 700;
+  font-size: 0.95rem;
+  color: #1a1a1a;
+  padding: 4px 0;
+  min-height: 32px;
+}
+
+.quantity-input :deep(.v-field__field) {
+  padding: 0;
+}
+
+.qty-btn {
+  flex-shrink: 0;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.qty-btn:hover {
+  transform: scale(1.1);
+}
+
+.qty-btn:active {
+  transform: scale(0.95);
+}
+
+/* ============================================
+   RESPONSIVE BREAKPOINTS
+   ============================================ */
+
+/* Botón de agregar (no autenticado) */
+.login-add-btn {
+  width: 100%;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+/* Móvil pequeño (< 375px) */
+@media (max-width: 374px) {
+  .product-content {
+    padding: 10px;
+  }
+
+  .product-name {
+    font-size: 0.9rem;
+    min-height: 2.4rem;
+  }
+
+  .price-value {
+    font-size: 1rem;
+  }
+
+  .quantity-input {
+    max-width: 60px;
+    min-width: 60px;
+  }
+}
+
+/* Móvil estándar (375px - 559px) */
+@media (min-width: 375px) and (max-width: 559px) {
+  .product-name {
+    font-size: 0.85rem;
+  }
+
+  .price-value {
+    font-size: 0.9rem;
+  }
+}
+
+/* Tablet (560px - 959px) */
+@media (min-width: 560px) and (max-width: 959px) {
+  .product-content {
+    padding: 10px;
+  }
+
+  .product-name {
+    font-size: 0.9rem;
+    min-height: 2.1rem;
+  }
+
+  .price-label {
+    font-size: 0.62rem;
+  }
+
+  .price-value {
+    font-size: 0.95rem;
+  }
+
+  .price-total-chip {
+    font-size: 0.8rem;
+    height: 24px;
+  }
+
+  .quantity-input {
+    max-width: 58px;
+    min-width: 58px;
+  }
+}
+
+/* Desktop (≥ 960px) */
+@media (min-width: 960px) {
+  .product-content {
+    padding: 12px 10px;
+  }
+
+  .product-name {
+    font-size: 0.95rem;
+    min-height: 2.2rem;
+  }
+
+  .price-label {
+    font-size: 0.63rem;
+  }
+
+  .price-value {
+    font-size: 1rem;
+  }
+
+  .price-total-chip {
+    font-size: 0.85rem;
+    height: 25px;
+    padding: 0 11px;
+  }
+
+  .product-actions {
+    padding: 6px;
+    padding-bottom: 8px;
+  }
+
+  .quantity-input {
+    max-width: 58px;
+    min-width: 58px;
+  }
+
+  .qty-btn {
+    width: 32px;
+    height: 32px;
+  }
+}
+
+/* Desktop Large (≥ 1280px) */
+@media (min-width: 1280px) {
+  .product-content {
+    padding: 14px 12px;
+  }
+
+  .product-name {
+    font-size: 2rem;
+    min-height: 2.4rem;
+  }
+
+  .price-value {
+    font-size: 1.05rem;
+  }
+
+  .price-total-chip {
+    font-size: 0.9rem;
+    height: 26px;
+  }
+}
+
+/* Desktop Extra Large (≥ 1920px) */
+@media (min-width: 1920px) {
+  .product-name {
+    font-size: 1.05rem;
+    min-height: 2.5rem;
+  }
+
+  .price-value {
+    font-size: 1.1rem;
+  }
+}
+</style>

src/components/catalog/Cart.vue

@@ -0,0 +1,602 @@
+<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 }"
+      @click="isMobile && $emit('toggle-collapse')">
+      <!-- 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.stop="$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 Pedido
+        </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

@@ -0,0 +1,269 @@
+<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/components/order/OrderAccessInfo.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <v-list density="compact">
+      <v-list-item>
+        <template #prepend>
+          <v-icon>mdi-tag</v-icon>
+        </template>
+        <v-list-item-title>Código</v-list-item-title>
+        <v-list-item-subtitle>
+          <code class="order-code">{{ code }}</code>
+        </v-list-item-subtitle>
+        <template #append>
+          <v-btn
+            data-test="copy-code"
+            icon="mdi-content-copy"
+            size="small"
+            title="Copiar código"
+            variant="text"
+            @click="copyText(code)"
+          />
+        </template>
+      </v-list-item>
+      <v-list-item>
+        <template #prepend>
+          <v-icon>mdi-link-variant</v-icon>
+        </template>
+        <v-list-item-title>Link de consulta</v-list-item-title>
+        <v-list-item-subtitle>
+          <code class="order-link">{{ publicLink }}</code>
+        </v-list-item-subtitle>
+        <template #append>
+          <v-btn
+            data-test="copy-link"
+            icon="mdi-content-copy"
+            size="small"
+            title="Copiar link"
+            variant="text"
+            @click="copyText(publicLink)"
+          />
+        </template>
+      </v-list-item>
+    </v-list>
+
+    <v-snackbar v-model="snackbar" color="success" location="top" :timeout="2000">
+      Copiado
+    </v-snackbar>
+  </div>
+</template>
+
+<script setup>
+  import { computed, ref } from 'vue'
+
+  const props = defineProps({
+    code: {
+      type: String,
+      required: true,
+    },
+  })
+
+  const snackbar = ref(false)
+
+  const publicLink = computed(() => {
+    return `${window.location.origin}/pedido/${props.code}`
+  })
+
+  async function copyText (text) {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text)
+    }
+    snackbar.value = true
+  }
+</script>
+
+<style scoped>
+.order-code,
+.order-link {
+  word-break: break-all;
+}
+</style>

src/components/order/OrderCustomer.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-list-item v-if="customer">
+    <template #prepend>
+      <v-icon>mdi-account</v-icon>
+    </template>
+    <v-list-item-title>Cliente</v-list-item-title>
+    <v-list-item-subtitle>{{ customer.name }}</v-list-item-subtitle>
+  </v-list-item>
+</template>
+
+<script setup>
+  defineProps({
+    customer: {
+      type: Object,
+      default: null,
+    },
+  })
+</script>

src/components/order/OrderLines.vue

@@ -0,0 +1,39 @@
+<template>
+  <v-table density="compact">
+    <thead>
+      <tr>
+        <th class="text-left">Producto</th>
+        <th class="text-right">Precio</th>
+        <th class="text-right">Cantidad</th>
+        <th class="text-right">Subtotal</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(line, index) in lines" :key="index">
+        <td>{{ line.product?.name }}</td>
+        <td class="text-right">
+          <CurrencyText :value="Number(line.unit_price)" />
+        </td>
+        <td class="text-right">{{ line.quantity }}</td>
+        <td class="text-right">
+          <CurrencyText :value="subtotal(line)" />
+        </td>
+      </tr>
+    </tbody>
+  </v-table>
+</template>
+
+<script setup>
+  import CurrencyText from '@/components/CurrencyText.vue'
+
+  defineProps({
+    lines: {
+      type: Array,
+      default: () => [],
+    },
+  })
+
+  function subtotal (line) {
+    return Number(line.unit_price || 0) * Number(line.quantity || 0)
+  }
+</script>

src/components/order/OrderPayment.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-list-item v-if="paymentMethod">
+    <template #prepend>
+      <v-icon>mdi-credit-card</v-icon>
+    </template>
+    <v-list-item-title>Pagado en</v-list-item-title>
+    <v-list-item-subtitle>{{ paymentMethod }}</v-list-item-subtitle>
+  </v-list-item>
+</template>
+
+<script setup>
+  defineProps({
+    paymentMethod: {
+      type: String,
+      default: '',
+    },
+  })
+</script>

src/components/order/OrderTotal.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="d-flex justify-space-between align-center">
+    <span class="font-weight-bold">Total</span>
+    <span class="font-weight-bold">
+      <CurrencyText :value="total" />
+    </span>
+  </div>
+</template>
+
+<script setup>
+  import CurrencyText from '@/components/CurrencyText.vue'
+
+  defineProps({
+    total: {
+      type: Number,
+      required: true,
+    },
+  })
+</script>

src/layouts/default.vue

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

src/pages/admin/catalog-sales.vue

@@ -0,0 +1,10 @@
+<template>
+  <CatalogSalesManagement v-if="authStore.isAdmin"/>
+</template>
+
+<script setup>
+import { useAuthStore } from '@/stores/auth';
+import CatalogSalesManagement from '@/components/CatalogSalesManagement.vue';
+
+const authStore = useAuthStore();
+</script>

src/pages/admin/catalogue-images.vue

@@ -0,0 +1,10 @@
+<template>
+  <CatalogueImagesManagement v-if="authStore.isAdmin" />
+</template>
+
+<script setup>
+import { useAuthStore } from '@/stores/auth';
+import CatalogueImagesManagement from '@/components/CatalogueImagesManagement.vue';
+
+const authStore = useAuthStore();
+</script>

src/pages/admin/products.vue

@@ -0,0 +1,10 @@
+<template>
+  <ProductsManagement v-if="authStore.isAdmin"/>
+</template>
+
+<script setup>
+import { useAuthStore } from '@/stores/auth';
+import ProductsManagement from '@/components/ProductsManagement.vue';
+
+const authStore = useAuthStore();
+</script>

src/pages/admin/store-settings.vue

@@ -0,0 +1,10 @@
+<template>
+  <StoreSettingsManagement v-if="authStore.isAdmin" />
+</template>
+
+<script setup>
+import { useAuthStore } from '@/stores/auth';
+import StoreSettingsManagement from '@/components/StoreSettingsManagement.vue';
+
+const authStore = useAuthStore();
+</script>

src/pages/autenticarse.vue

@@ -0,0 +1,7 @@
+<template>
+  <Login />
+</template>
+
+<script setup>
+import Login from '@/components/Login.vue'
+</script>

src/pages/catalog.vue

@@ -0,0 +1,872 @@
+<template>
+  <v-container fluid>
+    <!-- Backdrop para mobile cuando el carrito está expandido -->
+    <div
+      v-if="isMobile && !cartCollapsed && isAuthenticated"
+      class="cart-backdrop"
+      @click="cartCollapsed = true"
+    ></div>
+
+    <v-row>
+      <v-col cols="12" md="10" lg="9" :class="{ 'pb-mobile-cart': isMobile }">
+        <v-sheet
+          class="page-header d-flex align-center pa-3 pa-sm-4 pa-md-6 mb-3 mb-sm-4 rounded-lg"
+        >
+          <v-icon size="28" color="primary" class="mr-2 d-sm-none flex-shrink-0"
+            >mdi-store</v-icon
+          >
+          <v-icon
+            size="36"
+            color="primary"
+            class="mr-3 d-none d-sm-inline flex-shrink-0"
+            >mdi-store</v-icon
+          >
+          <div
+            class="d-flex flex-column flex-sm-row align-start align-sm-center w-100 ga-2 ga-sm-4"
+          >
+            <div class="flex-shrink-0 d-none d-sm-block">
+              <h1
+                class="text-h6 text-sm-h5 text-md-h4 font-weight-bold text-primary mb-0"
+              >
+                Catálogo
+              </h1>
+              <p class="text-body-2 text-medium-emphasis mb-0">
+                Explora y agrega productos a tu compra
+              </p>
+            </div>
+            <v-spacer class="d-none d-sm-flex"></v-spacer>
+            <v-text-field
+              v-model="searchQuery"
+              prepend-inner-icon="mdi-magnify"
+              label="Buscar producto..."
+              variant="solo-filled"
+              density="compact"
+              clearable
+              hide-details
+              single-line
+              class="search-field flex-grow-1 flex-sm-grow-0"
+            />
+          </div>
+        </v-sheet>
+
+        <!-- Grid de productos paginados -->
+        <v-row class="product-grid" v-if="paginatedItems.length > 0">
+          <v-col
+            v-for="item in paginatedItems"
+            :key="item.id"
+            cols="12"
+            sm="6"
+            md="6"
+            lg="4"
+            class="product-col"
+          >
+            <Card
+              :product="item"
+              :increase="increase"
+              :decrease="decrease"
+              :currency="currency"
+              :updateQuantity="updateQuantity"
+              :disabled="!isAuthenticated"
+              @add-to-cart="addToCart"
+              @request-login="showLogin"
+            />
+          </v-col>
+        </v-row>
+
+        <!-- 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>
+        <v-alert
+          v-else-if="filteredItems.length === 0"
+          type="warning"
+          class="my-4"
+          variant="tonal"
+        >
+          No se encontraron productos con ese nombre
+        </v-alert>
+
+        <!-- Controles de paginación inferiores -->
+        <PaginationControls
+          v-if="filteredItems.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="2" lg="3">
+        <div
+          class="cart-sidebar"
+          :class="{ 'cart-is-collapsed': cartCollapsed && isMobile }"
+        >
+          <Cart
+            v-if="isAuthenticated"
+            :cart-items="cartItems"
+            :currency="currency"
+            :is-collapsed="cartCollapsed"
+            :is-mobile="isMobile"
+            :window-width="windowWidth"
+            @remove="removeFromCart"
+            @checkout="goToCheckout"
+            @update-quantity="updateCartQuantity"
+            @toggle-collapse="toggleCart"
+          />
+          <v-card v-else-if="!isMobile || showLoginPrompt" class="login-prompt-card pa-4 text-center">
+            <v-btn
+              icon
+              size="x-small"
+              variant="text"
+              class="login-prompt-close"
+              @click="showLoginPrompt = false"
+            >
+              <v-icon size="18">mdi-close</v-icon>
+            </v-btn>
+            <v-icon size="48" color="primary" class="mb-2">mdi-cart-lock</v-icon>
+            <p class="text-body-2 text-medium-emphasis mb-3">
+              Para hacer pedidos debes de tener usuario y clave, si no lo tienes comunicate con nosotros al
+              <strong class="text-primary">{{ contactPhone }}</strong>
+              para solicitarlo. Esto es necesario porque no podemos procesar tus pedidos todos los días del mes.
+              Comunicate con nosotros para contarte todos los detalles y que puedas apoyar este proceso.
+            </p>
+            <div class="d-flex justify-center ga-2 mb-3">
+              <v-btn
+                icon
+                size="small"
+                color="primary"
+                variant="tonal"
+                :href="'tel:' + contactPhone"
+              >
+                <v-icon size="18">mdi-phone</v-icon>
+              </v-btn>
+              <v-btn
+                icon
+                size="small"
+                color="success"
+                variant="tonal"
+                :href="'https://wa.me/' + contactPhone"
+                target="_blank"
+              >
+                <v-icon size="18">mdi-whatsapp</v-icon>
+              </v-btn>
+              <v-btn
+                icon
+                size="small"
+                color="info"
+                variant="tonal"
+                :href="'https://t.me/+57' + contactPhone"
+                target="_blank"
+              >
+                <v-icon size="18">mdi-send</v-icon>
+              </v-btn>
+            </div>
+            <v-btn
+              color="primary"
+              variant="tonal"
+              prepend-icon="mdi-login"
+              @click="openLoginDialog"
+            >
+              Iniciar Sesión
+            </v-btn>
+          </v-card>
+        </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 Pedido</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 + aviso de coordinación -->
+    <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-divider class="my-3"></v-divider>
+
+          <v-alert type="info" variant="tonal" class="mb-0">
+            <div class="text-body-2 mb-2">
+              Para coordinar la entrega de tu pedido escríbenos:
+            </div>
+            <div class="d-flex ga-2">
+              <v-btn
+                icon
+                size="x-small"
+                color="primary"
+                variant="tonal"
+                :href="'tel:' + contactPhone"
+              >
+                <v-icon size="16">mdi-phone</v-icon>
+              </v-btn>
+              <v-btn
+                icon
+                size="x-small"
+                color="success"
+                variant="tonal"
+                :href="'https://wa.me/57' + contactPhone"
+                target="_blank"
+              >
+                <v-icon size="16">mdi-whatsapp</v-icon>
+              </v-btn>
+              <v-btn
+                icon
+                size="x-small"
+                color="info"
+                variant="tonal"
+                :href="'https://t.me/+57' + contactPhone"
+                target="_blank"
+              >
+                <v-icon size="16">mdi-send</v-icon>
+              </v-btn>
+              <span class="text-body-2 font-weight-bold ml-1 d-flex align-center">
+                {{ contactPhone }}
+              </span>
+            </div>
+          </v-alert>
+        </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 Pedido
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- Login Dialog -->
+    <LoginDialog
+      ref="loginDialogRef"
+      @login-success="onLoginSuccess"
+    />
+  </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 LoginDialog from "@/components/LoginDialog.vue";
+import { useCartStore } from "@/stores/cart";
+import { useAuthStore } from "@/stores/auth";
+import { inject, ref, computed, onMounted, onUnmounted } from "vue";
+import not_image_product from "@/assets/not_image_for_product.jpeg";
+
+export default {
+  components: {
+    Card,
+    Cart,
+    PaginationControls,
+    LoginDialog,
+  },
+  setup() {
+    const cartStore = useCartStore();
+    const authStore = useAuthStore();
+    const cartCollapsed = ref(false);
+    const showLoginPrompt = ref(false);
+    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,
+      authStore,
+      cartCollapsed,
+      showLoginPrompt,
+      isMobile,
+      windowWidth,
+    };
+  },
+  data() {
+    return {
+      api: inject("api"),
+      items: [],
+      searchQuery: "",
+      // 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;
+    },
+    isAuthenticated() {
+      return this.authStore.isAuthenticated;
+    },
+    contactPhone() {
+      return import.meta.env.VITE_CONTACT_PHONE || '';
+    },
+    // Búsqueda
+    filteredItems() {
+      if (!this.searchQuery) return this.items;
+      const normalize = (s) => s.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+      const query = normalize(this.searchQuery);
+      return this.items.filter((item) =>
+        normalize(item.name).includes(query),
+      );
+    },
+    // Paginación
+    paginatedItems() {
+      const start = (this.currentPage - 1) * this.itemsPerPage;
+      const end = start + this.itemsPerPage;
+      return this.filteredItems.slice(start, end);
+    },
+    totalPages() {
+      return Math.ceil(this.filteredItems.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.filteredItems.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();
+  },
+  watch: {
+    searchQuery() {
+      this.currentPage = 1;
+    },
+  },
+  methods: {
+    fetchProducts() {
+      this.api
+        .getProducts()
+        .then((data) => {
+          this.items = data.map((product) => ({
+            ...product,
+            quantity: 0,
+            img: (product.catalogue_images?.length > 0) ? product.catalogue_images[0] : (product.img || not_image_product),
+          }));
+        })
+        .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",
+        catalogsaleline_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),
+              type: 'catalog'
+            },
+          });
+        })
+        .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() {
+      const grid = this.$el?.querySelector(".product-grid");
+      if (grid) {
+        const top = grid.getBoundingClientRect().top + window.scrollY - 16;
+        window.scrollTo({ top, behavior: "smooth" });
+      } else {
+        window.scrollTo({ top: 0, behavior: "smooth" });
+      }
+    },
+    openLoginDialog() {
+      this.$refs.loginDialogRef.open();
+    },
+    showLogin() {
+      this.showLoginPrompt = true;
+      if (this.isMobile) {
+        this.cartCollapsed = false;
+      }
+    },
+    onLoginSuccess() {
+      this.showLoginPrompt = false;
+      this.api.getCurrentUser().then((user) => {
+        this.authStore.setUser(user);
+      });
+    },
+    currency(val) {
+      if (val == null) return "-";
+      return new Intl.NumberFormat("es-CO", {
+        style: "currency",
+        currency: "COP",
+        minimumFractionDigits: 0,
+      }).format(val);
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* ============================================
+   CABECERA STICKY CON BÚSQUEDA
+   ============================================ */
+.page-header {
+  position: sticky;
+  top: 80px;
+  z-index: 5;
+  background: white !important;
+  color: #1565c0 !important;
+  overflow: visible;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Mobile: Header sticky compensating for NavBar height, z-index menor que el cart */
+@media (max-width: 959px) {
+  .page-header {
+    top: 64px;
+    border-radius: 0 !important;
+    z-index: 900;
+  }
+}
+
+@media (max-width: 559px) {
+  .page-header {
+    padding: 12px 16px !important;
+  }
+}
+
+/* Estilos profundos para el campo de búsqueda de Vuetify */
+.page-header :deep(.v-field) {
+  background-color: #f5f5f5 !important;
+  border-radius: 8px;
+  transition: background-color 0.2s ease;
+}
+
+.page-header :deep(.v-field:hover),
+.page-header :deep(.v-field--focused) {
+  background-color: #e0e0e0 !important;
+}
+
+.page-header :deep(.v-field__input) {
+  color: #1565c0 !important;
+}
+
+.page-header :deep(.v-field__input::placeholder) {
+  color: rgba(0, 0, 0, 0.5) !important;
+}
+
+@media (max-width: 559px) {
+  .page-header .search-field :deep(.v-field__input) {
+    font-size: 0.875rem;
+  }
+
+  .page-header .search-field {
+    width: 100%;
+    max-width: 100%;
+  }
+}
+
+@media (min-width: 560px) {
+  .page-header .search-field {
+    min-width: 260px;
+    max-width: 360px;
+  }
+}
+
+@media (min-width: 960px) {
+  .page-header .search-field {
+    min-width: 320px;
+    max-width: 460px;
+  }
+}
+
+/* ============================================
+   CARRITO FLOTANTE (MOBILE FIRST)
+   ============================================ */
+.cart-sidebar {
+  --footer-height: 40px;
+  position: fixed;
+  bottom: var(--footer-height);
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
+}
+
+/* Cuando está colapsado en mobile, solo muestra el header (60px) */
+.cart-sidebar.cart-is-collapsed {
+  transform: translateY(calc(100% - 60px));
+}
+
+.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.2s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Espacio inferior para evitar que productos queden ocultos bajo el cart */
+.pb-mobile-cart {
+  padding-bottom: 100px !important;
+}
+
+/* ============================================
+   GRID DE PRODUCTOS
+   ============================================ */
+.product-grid {
+  margin: 0 -8px;
+}
+
+.product-col {
+  padding: 8px;
+  display: flex;
+}
+
+/* Asegurar que las cards ocupen toda la altura */
+.product-col :deep(.product-card) {
+  width: 100%;
+}
+
+/* Mobile: mayor espaciado vertical */
+@media (max-width: 559px) {
+  .product-grid {
+    margin: 0 -6px;
+  }
+
+  .product-col {
+    padding: 6px;
+  }
+}
+
+/* Tablet: espaciado medio */
+@media (min-width: 560px) and (max-width: 959px) {
+  .product-grid {
+    margin: 0 -8px;
+  }
+
+  .product-col {
+    padding: 8px;
+  }
+}
+
+/* Desktop: espaciado óptimo */
+@media (min-width: 960px) {
+  .product-grid {
+    margin: 0 -12px;
+  }
+
+  .product-col {
+    padding: 12px;
+  }
+}
+
+/* ============================================
+   DISEÑO DESKTOP (>= 960px)
+   ============================================ */
+@media (min-width: 960px) {
+  .cart-sidebar {
+    position: sticky;
+    top: 96px;
+    z-index: 1;
+    max-height: calc(100vh - 120px);
+    overflow-y: auto;
+    box-shadow: none;
+    border-radius: 12px;
+    transform: none !important;
+  }
+
+  .cart-backdrop {
+    display: none;
+  }
+
+  .pb-mobile-cart {
+    padding-bottom: 16px !important;
+  }
+}
+
+/* ============================================
+   LOGIN PROMPT CARD
+   ============================================ */
+.login-prompt-card {
+  border: 2px dashed rgba(0, 0, 0, 0.12);
+  background: #fafafa !important;
+  position: relative;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.login-prompt-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+}
+
+/* ============================================
+   MODALES
+   ============================================ */
+.product-list-scroll {
+  max-height: 400px;
+  overflow-y: auto;
+}
+</style>

src/pages/compra_admin.vue

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

src/pages/comprar.vue

@@ -1,7 +1,13 @@
 <template>
-  <Purchase />
+  <Purchase :isAdmin="false" />
 </template>
 
 <script setup>
-//
+import Purchase from '@/components/Purchase.vue';
+
+definePage({
+  meta: {
+    requiresAuth: true
+  }
+})
 </script>

src/pages/cuadrar_tarro.vue

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

src/pages/cuadres_de_tarro.vue

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

src/pages/index.vue

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

src/pages/pedido/[[code]].vue

@@ -0,0 +1,79 @@
+<template>
+  <v-container class="pa-4 pa-md-6" fluid>
+    <v-sheet class="rounded-lg pa-4 pa-md-6 mb-4">
+      <h1 class="text-h5 font-weight-bold">Consultar mi pedido o compra</h1>
+      <p class="text-body-2 text-medium-emphasis mb-4">
+        Ingresa el código de tu pedido o compra, o abre el link que recibiste para revisar su estado.
+      </p>
+      <v-form @submit.prevent="onConsult">
+        <v-row align="center">
+          <v-col cols="12" md="6" sm="8">
+            <v-text-field
+              v-model="inputCode"
+              clearable
+              density="comfortable"
+              hide-details
+              label="Código"
+              variant="outlined"
+            />
+          </v-col>
+          <v-col class="d-flex align-center" cols="12" md="6" sm="4">
+            <v-btn color="primary" prepend-icon="mdi-magnify-scan" type="submit">
+              Consultar
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-form>
+    </v-sheet>
+
+    <PublicOrderSummary :error="error" :loading="loading" :purchase="purchase" />
+  </v-container>
+</template>
+
+<script setup>
+  import { inject, ref, watch } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+  import PublicOrderSummary from '@/components/PublicOrderSummary.vue'
+
+  const route = useRoute()
+  const router = useRouter()
+  const api = inject('api')
+
+  const inputCode = ref(route.params.code || '')
+  const purchase = ref(null)
+  const loading = ref(false)
+  const error = ref('')
+
+  async function fetchOrder (code) {
+    loading.value = true
+    error.value = ''
+    purchase.value = null
+    try {
+      purchase.value = await api.getPublicOrderSummary(code)
+    } catch (e) {
+      error.value =
+        e?.response?.status === 404
+          ? 'No se encontró un pedido con ese código.'
+          : 'Ocurrió un error al consultar el pedido. Inténtalo de nuevo.'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function onConsult () {
+    const code = inputCode.value.trim()
+    if (!code) return
+    router.push(`/pedido/${code}`)
+  }
+
+  watch(
+    () => route.params.code,
+    code => {
+      if (code) {
+        inputCode.value = code
+        fetchOrder(code)
+      }
+    },
+    { immediate: true }
+  )
+</script>

src/pages/salir.vue

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

src/pages/sincronizar_catalog_sales_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 de Catálogo
+          </v-card-title>
+
+          <v-card-text>
+            <p>
+              Esta acción sincronizará las <strong>ventas de catálogo</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 de catálogo...</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: 'CatalogSalesToTryton',
+    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.sendCatalogSalesToTryton()
+          .then(response => {
+            this.result = response;
+            this.loading = false;
+          })
+          .catch(error => {
+            console.error('Error al sincronizar ventas de catálogo:', error);
+            this.loading = false;
+          });
+      }
+    }
+  }
+</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

@@ -1,7 +1,11 @@
 <template>
-  <SummaryPurchase :id="$route.query.id"/>
+  <SummaryPurchase :id="$route.query.id" :type="$route.query.type"/>
 </template>
 
 <script setup>
-  //
+definePage({
+  meta: {
+    requiresAuth: true
+  }
+})
 </script>

src/pages/ventas_para_tryton.vue

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

src/router/index.js

@@ -9,12 +9,47 @@
 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 PUBLICO_RESTRICTED = ['/comprar']
+
+const ADMIN_ROUTES = [
+  '/sincronizar_clientes_tryton',
+  '/sincronizar_ventas_tryton',
+  '/sincronizar_productos_tryton',
+  '/ventas_para_tryton',
+  '/cuadres_de_tarro',
+  '/compra_admin',
+  '/cuadrar_tarro',
+  '/admin/products',
+  '/admin/catalog-sales',
+  '/admin/catalogue-images',
+  '/admin/store-settings',
+]
 
 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 && authStore.user) {
+    next({ path: '/', replace: true })
+  } else if (authStore.user?.role === 'publico' && PUBLICO_RESTRICTED.includes(to.path)) {
+    next({ path: '/catalog', 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

@@ -1,55 +1,115 @@
 class Api {
-  constructor (apiImplementation) {
+    constructor(apiImplementation) {
-    this.apiImplementation = apiImplementation;
+        this.apiImplementation = apiImplementation;
-  }
+    }
 
-  getCustomers() {
+    getCustomers() {
-    return this.apiImplementation.getCustomers();
+        return this.apiImplementation.getCustomers();
-  }
+    }
 
-  getProducts() {
+    getProducts(active = 'all') {
-    return this.apiImplementation.getProducts();
+        return this.apiImplementation.getProducts(active);
-  }
+    }
 
-  getPaymentMethods() {
+    updateProduct(productId, data) {
-    return this.apiImplementation.getPaymentMethods();
+        return this.apiImplementation.updateProduct(productId, data);
-  }
+    }
 
-  getSummaryPurchase(purchaseId) {
+    getPaymentMethods() {
-    return this.apiImplementation.getSummaryPurchase(purchaseId);
+        return this.apiImplementation.getPaymentMethods();
-  }
+    }
 
-  getPurchasesForReconciliation() {
+    getSummaryPurchase(purchaseId) {
-    return this.apiImplementation.getPurchasesForReconciliation();
+        return this.apiImplementation.getSummaryPurchase(purchaseId);
-  }
+    }
 
-  getListReconcliations(page=1, itemsPerPage=10) {
+    getSummaryCatalogPurchase(purchaseId) {
-    return this.apiImplementation.getListReconcliations(page, itemsPerPage);
+        return this.apiImplementation.getSummaryCatalogPurchase(purchaseId);
-  }
+    }
 
-  getReconciliation(reconciliationId) {
+    getPublicOrderSummary(code) {
-    return this.apiImplementation.getReconciliation(reconciliationId);
+        return this.apiImplementation.getPublicOrderSummary(code);
-  }
+    }
 
-  isValidAdminCode(code) {
+    getPurchasesForReconciliation() {
-    return this.apiImplementation.isValidAdminCode(code);
+        return this.apiImplementation.getPurchasesForReconciliation();
-  }
+    }
 
-  createPurchase(purchase) {
+    getListReconcliations(page = 1, itemsPerPage = 10) {
-    return this.apiImplementation.createPurchase(purchase);
+        return this.apiImplementation.getListReconcliations(page, itemsPerPage);
-  }
+    }
 
-  createReconciliationJar(reconciliation) {
+    getReconciliation(reconciliationId) {
-    return this.apiImplementation.createReconciliationJar(reconciliation);
+        return this.apiImplementation.getReconciliation(reconciliationId);
-  }
+    }
 
-  createCustomer(customer) {
+    createPurchase(purchase) {
-    return this.apiImplementation.createCustomer(customer);
+        return this.apiImplementation.createPurchase(purchase);
-  }
+    }
 
-  getCSVForTryton() {
+    createCatalogPurchase(purchase) {
-    return this.apiImplementation.getCSVForTryton();
+        return this.apiImplementation.createCatalogPurchase(purchase);
-  }
+    }
+
+    createReconciliationJar(reconciliation) {
+        return this.apiImplementation.createReconciliationJar(reconciliation);
+    }
+
+    createCustomer(customer) {
+        return this.apiImplementation.createCustomer(customer);
+    }
+
+    getCSVForTryton() {
+        return this.apiImplementation.getCSVForTryton();
+    }
+
+    getProductsFromTryton() {
+        return this.apiImplementation.getProductsFromTryton();
+    }
+
+    getCustomersFromTryton() {
+        return this.apiImplementation.getCustomersFromTryton();
+    }
+
+    sendSalesToTryton() {
+        return this.apiImplementation.sendSalesToTryton();
+    }
+
+    sendCatalogSalesToTryton() {
+        return this.apiImplementation.sendCatalogSalesToTryton();
+    }
+
+    getCatalogSales() {
+        return this.apiImplementation.getCatalogSales();
+    }
+
+    getCurrentUser() {
+        return this.apiImplementation.getCurrentUser();
+    }
+
+    getCatalogueImages() {
+        return this.apiImplementation.getCatalogueImages();
+    }
+
+    createCatalogueImage(data) {
+        return this.apiImplementation.createCatalogueImage(data);
+    }
+
+    updateCatalogueImage(id, data) {
+        return this.apiImplementation.updateCatalogueImage(id, data);
+    }
+
+    deleteCatalogueImage(id) {
+        return this.apiImplementation.deleteCatalogueImage(id);
+    }
+
+    getStoreSettings() {
+        return this.apiImplementation.getStoreSettings();
+    }
+
+    updateStoreSettings(data) {
+        return this.apiImplementation.updateStoreSettings(data);
+    }
 }
 
 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,106 +1,177 @@
+import AuthService from "@/services/auth";
+import http from "@/services/http";
+
 class DjangoApi {
-  constructor() {
+    constructor() {
-    this.base = import.meta.env.VITE_DJANGO_BASE_URL;
+        this.base = import.meta.env.VITE_DJANGO_BASE_URL;
-  }
-
-  getCustomers() {
-    const url = this.base + '/don_confiao/api/customers/';
-    return this.getRequest(url);
-  }
-
-  getProducts() {
-    const url = this.base + '/don_confiao/api/products/';
-    return this.getRequest(url);
-  }
-
-  getPaymentMethods() {
-    const url = this.base + '/don_confiao/payment_methods/all/select_format';
-    return this.getRequest(url);
-  }
-
-  getSummaryPurchase(purchaseId) {
-    const url = this.base + `/don_confiao/resumen_compra_json/${purchaseId}`;
-    return this.getRequest(url);
-  }
-
-  getPurchasesForReconciliation() {
-    const url = this.base + '/don_confiao/purchases/for_reconciliation';
-    return this.getRequest(url);
-  }
-
-  getListReconcliations(page, itemsPerPage) {
-    const url = this.base + `/don_confiao/api/reconciliate_jar/?page=${page}&page_size=${itemsPerPage}`;
-    return this.getRequest(url);
-  }
-
-  getReconciliation(reconciliationId) {
-    const url = this.base + `/don_confiao/api/reconciliate_jar/${reconciliationId}/`;
-    return this.getRequest(url);
-  }
-
-  isValidAdminCode(code) {
-    const url = this.base + `/don_confiao/api/admin_code/validate/${code}`
-    return this.getRequest(url)
     }
 
-  createPurchase(purchase) {
+    getRequest(url) {
-    const url = this.base + '/don_confiao/api/sales/';
+        return http.get(url).then((r) => r.data);
-    return this.postRequest(url, purchase);
+    }
-  }
 
-  createReconciliationJar(reconciliation) {
+    postRequest(url, payload) {
-    const url = this.base + '/don_confiao/reconciliate_jar';
+        return http.post(url, payload).then((r) => r.data);
-    return this.postRequest(url, reconciliation);
+    }
-  }
 
-  createCustomer(customer) {
+    patchRequest(url, payload) {
-    const url = this.base + '/don_confiao/api/customers/';
+        return http.patch(url, payload).then((r) => r.data);
-    return this.postRequest(url, customer);
+    }
-  }
 
-  getCSVForTryton() {
+    getCustomers() {
-    const url = this.base + '/don_confiao/api/sales/for_tryton';
+        const url = this.base + "/don_confiao/api/customers/";
-    return this.getRequest(url);
+        return this.getRequest(url);
-  }
+    }
 
-  getRequest(url) {
+    getProducts(active = 'all') {
-    return new Promise ((resolve, reject) => {
+        let url = this.base + "/don_confiao/api/products/";
-      fetch(url)
+        
-        .then(response => response.json())
+        // Agregar query parameter según filtro
-        .then(data => {
+        if (active !== 'all') {
-          resolve(data);
+            url += `?active=${active}`;
-        })
+        }
-        .catch(error => {
+        
-          reject(error);
+        return this.getRequest(url);
-        });
+    }
-    });
-  }
 
-  postRequest(url, content) {
+    updateProduct(productId, data) {
-    return new Promise((resolve, reject) => {
+        const url = this.base + `/don_confiao/api/products/${productId}/`;
-      fetch(url, {
+        return this.patchRequest(url, data);
-        method: 'POST',
+    }
-        headers: {
+
-          'Content-Type': 'application/json',
+    getPaymentMethods() {
-        },
+        const url =
-        body: JSON.stringify(content)
+            this.base + "/don_confiao/payment_methods/all/select_format";
-      })
+        return this.getRequest(url);
-        .then(response => {
+    }
-          if (!response.ok) {
+
-            reject(new Error(`Error ${response.status}: ${response.statusText}`));
+    getSummaryPurchase(purchaseId) {
-          } else {
+        const url =
-            response.json().then(data => {
+            this.base + `/don_confiao/resumen_compra_json/${purchaseId}`;
-              if (!data) {
+        return this.getRequest(url);
-                reject(new Error('La respuesta no es un JSON válido'));
+    }
-              } else {
+
-                resolve(data);
+    getSummaryCatalogPurchase(purchaseId) {
-              }
+        const url =
-            });
+            this.base + `/don_confiao/resumen_compra_catalogo_json/${purchaseId}`;
-          }
+        return this.getRequest(url);
-        })
+    }
-        .catch(error => reject(error));
+
-    });
+    getPublicOrderSummary(code) {
-  }
+        const url =
+            this.base + `/don_confiao/resumen_publico/${code}`;
+        return this.getRequest(url);
+    }
+
+    getPurchasesForReconciliation() {
+        const url = this.base + "/don_confiao/purchases/for_reconciliation";
+        return this.getRequest(url);
+    }
+
+    getListReconcliations(page, itemsPerPage) {
+        const url =
+            this.base +
+            `/don_confiao/api/reconciliate_jar/?page=${page}&page_size=${itemsPerPage}`;
+        return this.getRequest(url);
+    }
+
+    getReconciliation(reconciliationId) {
+        const url =
+            this.base +
+            `/don_confiao/api/reconciliate_jar/${reconciliationId}/`;
+        return this.getRequest(url);
+    }
+
+    createPurchase(purchase) {
+        const url = this.base + "/don_confiao/api/sales/";
+        return this.postRequest(url, purchase);
+    }
+
+    createCatalogPurchase(purchase) {
+        const url = this.base + "/don_confiao/api/catalog_sales/";
+        return this.postRequest(url, purchase);
+    }
+
+    createReconciliationJar(reconciliation) {
+        const url = this.base + "/don_confiao/reconciliate_jar";
+        return this.postRequest(url, reconciliation);
+    }
+
+    createCustomer(customer) {
+        const url = this.base + "/don_confiao/api/customers/";
+        return this.postRequest(url, customer);
+    }
+
+    getCSVForTryton() {
+        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";
+        return this.postRequest(url, {});
+    }
+
+    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, {});
+    }
+
+    sendCatalogSalesToTryton() {
+        const url = this.base + "/don_confiao/api/enviar_catalog_sales_a_tryton";
+        return this.postRequest(url, {});
+    }
+
+    getCatalogSales() {
+        const url = this.base + "/don_confiao/api/catalog_sales/";
+        return this.getRequest(url);
+    }
+
+    getCurrentUser() {
+        const url = this.base + "/api/users/me/";
+        return this.getRequest(url);
+    }
+
+    getCatalogueImages() {
+        const url = this.base + "/don_confiao/api/catalogue_images/";
+        return this.getRequest(url);
+    }
+
+    createCatalogueImage(data) {
+        const url = this.base + "/don_confiao/api/catalogue_images/";
+        return http.post(url, data, {
+            headers: { 'Content-Type': undefined },
+        }).then((r) => r.data);
+    }
+
+    updateCatalogueImage(id, data) {
+        const url = this.base + `/don_confiao/api/catalogue_images/${id}/`;
+        return http.put(url, data, {
+            headers: { 'Content-Type': undefined },
+        }).then((r) => r.data);
+    }
+
+    deleteCatalogueImage(id) {
+        const url = this.base + `/don_confiao/api/catalogue_images/${id}/`;
+        return http.delete(url).then((r) => r.data);
+    }
+
+    getStoreSettings() {
+        const url = this.base + "/don_confiao/api/store_settings";
+        return this.getRequest(url);
+    }
+
+    updateStoreSettings(data) {
+        const url = this.base + "/don_confiao/api/store_settings";
+        return http.patch(url, data, {
+            headers: { 'Content-Type': undefined },
+        }).then((r) => r.data);
+    }
 }
 
-  export default DjangoApi;
+export default DjangoApi;

src/services/http.js

@@ -0,0 +1,45 @@
+import axios from "axios";
+import AuthService from "@/services/auth";
+import router from "@/router";
+
+const http = axios.create({
+    baseURL: import.meta.env.VITE_DJANGO_BASE_URL,
+    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();
+                router.push("/autenticarse");
+                return Promise.reject(refreshError);
+            }
+        }
+
+        return Promise.reject(error);
+    },
+);
+
+export default http;

src/stores/auth.js

@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia'
+
+export const useAuthStore = defineStore('auth', {
+  state: () => ({
+    user: null
+  }),
+  getters: {
+    isAdmin: (state) => state.user?.role === 'administrator',
+    isPublico: (state) => state.user?.role === 'publico',
+    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 = []
+    }
+  }
+})

src/stores/settings.js

@@ -0,0 +1,26 @@
+import { defineStore } from 'pinia'
+
+export const useSettingsStore = defineStore('settings', {
+  state: () => ({
+    settings: null,
+    loaded: false
+  }),
+  getters: {
+    logo: (state) => state.settings?.logo || null,
+    address: (state) => state.settings?.address || '',
+    latitude: (state) => state.settings?.latitude,
+    longitude: (state) => state.settings?.longitude
+  },
+  actions: {
+    async fetchSettings(api) {
+      if (this.loaded) return this.settings
+      this.settings = await api.getStoreSettings()
+      this.loaded = true
+      return this.settings
+    },
+    setSettings(settings) {
+      this.settings = settings
+      this.loaded = true
+    }
+  }
+})

tests/setup.js

@@ -0,0 +1,44 @@
+import { afterEach, vi } from 'vitest'
+import { enableAutoUnmount } from '@vue/test-utils'
+
+enableAutoUnmount(afterEach)
+
+if (!navigator.clipboard) {
+  navigator.clipboard = { writeText: vi.fn().mockResolvedValue(undefined) }
+}
+
+if (typeof globalThis.ResizeObserver === 'undefined') {
+  globalThis.ResizeObserver = class ResizeObserver {
+    observe () {}
+    unobserve () {}
+    disconnect () {}
+  }
+}
+
+if (typeof globalThis.IntersectionObserver === 'undefined') {
+  globalThis.IntersectionObserver = class IntersectionObserver {
+    observe () {}
+    unobserve () {}
+    disconnect () {}
+    takeRecords () {
+      return []
+    }
+  }
+}
+
+if (typeof window.matchMedia !== 'function') {
+  window.matchMedia = query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  })
+}
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})

tests/unit/components/OrderAccessInfo.spec.js

@@ -0,0 +1,47 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import OrderAccessInfo from '@/components/order/OrderAccessInfo.vue'
+import vuetify from '@/plugins/vuetify'
+
+function mountAccessInfo (code) {
+  return mount(OrderAccessInfo, {
+    props: { code },
+    global: { plugins: [vuetify] },
+  })
+}
+
+describe('OrderAccessInfo', () => {
+  beforeEach(() => {
+    navigator.clipboard.writeText.mockClear()
+  })
+
+  it('muestra el código del pedido', () => {
+    const wrapper = mountAccessInfo('abc123')
+    expect(wrapper.text()).toContain('abc123')
+  })
+
+  it('muestra el link público construido con el código', () => {
+    const wrapper = mountAccessInfo('abc123')
+    expect(wrapper.text()).toContain(
+      `${window.location.origin}/pedido/abc123`
+    )
+  })
+
+  it('copia el link al presionar el botón de copiar link', async () => {
+    const wrapper = mountAccessInfo('abc123')
+
+    await wrapper.find('[data-test="copy-link"]').trigger('click')
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+      `${window.location.origin}/pedido/abc123`
+    )
+  })
+
+  it('copia el código al presionar el botón de copiar código', async () => {
+    const wrapper = mountAccessInfo('abc123')
+
+    await wrapper.find('[data-test="copy-code"]').trigger('click')
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('abc123')
+  })
+})

tests/unit/components/PublicOrderSummary.spec.js

@@ -0,0 +1,90 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import PublicOrderSummary from '@/components/PublicOrderSummary.vue'
+import OrderAccessInfo from '@/components/order/OrderAccessInfo.vue'
+import OrderCustomer from '@/components/order/OrderCustomer.vue'
+import OrderLines from '@/components/order/OrderLines.vue'
+import OrderTotal from '@/components/order/OrderTotal.vue'
+import OrderPayment from '@/components/order/OrderPayment.vue'
+import vuetify from '@/plugins/vuetify'
+
+const saleData = {
+  id: 5,
+  code: 'abc123',
+  date: '2024-09-02T00:00:00Z',
+  customer: { id: 1, name: 'Camilo' },
+  payment_method: 'CASH',
+  lines: [
+    { product: { id: 10, name: 'Panela' }, quantity: 2, unit_price: 3000 },
+    { product: { id: 11, name: 'Arroz' }, quantity: 1, unit_price: 5000 },
+  ],
+  type: 'sale',
+}
+
+const catalogData = {
+  id: 7,
+  code: 'def456',
+  date: '2024-09-02T00:00:00Z',
+  customer: { id: 1, name: 'Camilo' },
+  lines: [{ product: { id: 10, name: 'Panela' }, quantity: 2, unit_price: 3000 }],
+  type: 'catalog',
+}
+
+function mountSummary (props) {
+  return mount(PublicOrderSummary, {
+    props,
+    global: { plugins: [vuetify] },
+  })
+}
+
+describe('PublicOrderSummary', () => {
+  it('renderiza el resumen de una venta con sus partes', () => {
+    const wrapper = mountSummary({ purchase: saleData })
+
+    expect(wrapper.findComponent(OrderAccessInfo).exists()).toBe(true)
+    expect(wrapper.findComponent(OrderCustomer).exists()).toBe(true)
+    expect(wrapper.findComponent(OrderLines).exists()).toBe(true)
+    expect(wrapper.findComponent(OrderTotal).exists()).toBe(true)
+    expect(wrapper.findComponent(OrderPayment).exists()).toBe(true)
+    expect(wrapper.text()).toContain('Resumen de la compra')
+    expect(wrapper.text()).toContain('Camilo')
+    expect(wrapper.text()).toContain('Panela')
+    expect(wrapper.text()).toContain('Arroz')
+    expect(wrapper.text().replace(/\u00A0/g, ' ')).toContain('11.000')
+  })
+
+  it('renderiza un pedido de catálogo sin bloque de pago', () => {
+    const wrapper = mountSummary({ purchase: catalogData })
+
+    expect(wrapper.findComponent(OrderAccessInfo).exists()).toBe(true)
+    expect(wrapper.findComponent(OrderCustomer).exists()).toBe(true)
+    expect(wrapper.findComponent(OrderLines).exists()).toBe(true)
+    expect(wrapper.findComponent(OrderTotal).exists()).toBe(true)
+    expect(wrapper.findComponent(OrderPayment).exists()).toBe(false)
+    expect(wrapper.text()).toContain('Resumen del pedido')
+    expect(wrapper.text()).toContain('Camilo')
+    expect(wrapper.text()).toContain('Panela')
+  })
+
+  it('muestra el estado de carga', () => {
+    const wrapper = mountSummary({ purchase: null, loading: true })
+
+    expect(wrapper.text()).toContain('Cargando')
+  })
+
+  it('muestra el mensaje de error cuando lo recibe', () => {
+    const wrapper = mountSummary({
+      purchase: null,
+      error: 'No se encontró un pedido con ese código.',
+    })
+
+    expect(wrapper.text()).toContain('No se encontró un pedido con ese código.')
+  })
+
+  it('no renderiza datos cuando no hay pedido, carga ni error', () => {
+    const wrapper = mountSummary({ purchase: null })
+
+    expect(wrapper.text()).not.toContain('Camilo')
+    expect(wrapper.findComponent(OrderLines).exists()).toBe(false)
+  })
+})

tests/unit/pages/pedido.spec.js

@@ -0,0 +1,92 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { createMemoryHistory, createRouter } from 'vue-router'
+import PedidoPage from '@/pages/pedido/[[code]].vue'
+import PublicOrderSummary from '@/components/PublicOrderSummary.vue'
+import vuetify from '@/plugins/vuetify'
+
+const saleData = {
+  id: 1,
+  code: 'abc123',
+  date: '2024-09-02T00:00:00Z',
+  customer: { id: 1, name: 'Camilo' },
+  payment_method: 'CASH',
+  lines: [
+    { product: { id: 10, name: 'Panela' }, quantity: 2, unit_price: 3000 },
+  ],
+  type: 'sale',
+}
+
+async function mountPage (api, path) {
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [{ path: '/pedido/:code?', component: PedidoPage }],
+  })
+  router.push(path)
+  await router.isReady()
+  const wrapper = mount(PedidoPage, {
+    global: {
+      plugins: [router, vuetify],
+      provide: { api },
+    },
+  })
+  return { router, wrapper }
+}
+
+async function waitForRouteParam (router, param, value, timeout = 1000) {
+  const start = Date.now()
+  while (Date.now() - start < timeout) {
+    if (router.currentRoute.value.params[param] === value) return
+    await new Promise(resolve => setTimeout(resolve, 10))
+  }
+  throw new Error(`route param ${param} nunca llegó a ser ${value}`)
+}
+
+describe('página pública /pedido', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('sin código no consulta la API y muestra el buscador', async () => {
+    const api = { getPublicOrderSummary: vi.fn() }
+    const { wrapper } = await mountPage(api, '/pedido')
+    await flushPromises()
+
+    expect(api.getPublicOrderSummary).not.toHaveBeenCalled()
+    expect(wrapper.text()).toContain('Código')
+  })
+
+  it('con código por URL consulta y muestra el resumen', async () => {
+    const api = { getPublicOrderSummary: vi.fn().mockResolvedValue(saleData) }
+    const { wrapper } = await mountPage(api, '/pedido/abc123')
+    await flushPromises()
+
+    expect(api.getPublicOrderSummary).toHaveBeenCalledWith('abc123')
+    expect(wrapper.findComponent(PublicOrderSummary).props('purchase')).toEqual(saleData)
+    expect(wrapper.text()).toContain('Camilo')
+  })
+
+  it('muestra mensaje de no encontrado cuando el código no existe', async () => {
+    const api = {
+      getPublicOrderSummary: vi.fn().mockRejectedValue({ response: { status: 404 } }),
+    }
+    const { wrapper } = await mountPage(api, '/pedido/zzzzzz')
+    await flushPromises()
+
+    expect(wrapper.findComponent(PublicOrderSummary).props('error')).toContain('No se encontró')
+  })
+
+  it('al consultar un código navega a /pedido/<code> y vuelve a consultar', async () => {
+    const api = { getPublicOrderSummary: vi.fn().mockResolvedValue(saleData) }
+    const { router, wrapper } = await mountPage(api, '/pedido/abc123')
+    await flushPromises()
+    api.getPublicOrderSummary.mockClear()
+
+    await wrapper.find('input').setValue('newcode')
+    await wrapper.find('form').trigger('submit')
+    await waitForRouteParam(router, 'code', 'newcode')
+
+    expect(router.currentRoute.value.params.code).toBe('newcode')
+    expect(api.getPublicOrderSummary).toHaveBeenCalledWith('newcode')
+  })
+})

tests/unit/services/django-api.spec.js

@@ -0,0 +1,34 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import http from '@/services/http'
+import DjangoApi from '@/services/django-api'
+
+vi.mock('@/services/http', () => ({
+  default: {
+    get: vi.fn(),
+    post: vi.fn(),
+    patch: vi.fn(),
+    put: vi.fn(),
+    delete: vi.fn(),
+  },
+}))
+
+describe('DjangoApi.getPublicOrderSummary', () => {
+  beforeEach(() => {
+    vi.stubEnv('VITE_DJANGO_BASE_URL', 'http://backend.test')
+    http.get.mockReset()
+    http.get.mockResolvedValue({ data: { code: 'abc123', type: 'sale' } })
+  })
+
+  it('consulta el resumen público por código en la ruta resumen_publico', async () => {
+    const api = new DjangoApi()
+
+    const result = await api.getPublicOrderSummary('abc123')
+
+    expect(http.get).toHaveBeenCalledTimes(1)
+    expect(http.get).toHaveBeenCalledWith(
+      'http://backend.test/don_confiao/resumen_publico/abc123'
+    )
+    expect(result).toEqual({ code: 'abc123', type: 'sale' })
+  })
+})

vite.config.mjs

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

vitest.config.mjs

@@ -0,0 +1,34 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vitest/config'
+import Vue from '@vitejs/plugin-vue'
+import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+
+export default defineConfig({
+  plugins: [
+    Vue({
+      template: { transformAssetUrls },
+    }),
+    Vuetify({
+      autoImport: true,
+      styles: {
+        configFile: 'src/styles/settings.scss',
+      },
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  test: {
+    environment: 'jsdom',
+    globals: false,
+    setupFiles: ['./tests/setup.js'],
+    include: ['tests/**/*.spec.js'],
+    server: {
+      deps: {
+        inline: ['vuetify'],
+      },
+    },
+  },
+})