#58 feat: mostrar categorías creadas y actualizadas al sincronizar productos

Reviewed-on: #54

.env.example

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

.eslintrc.js

@@ -0,0 +1,40 @@
+/**
+ * .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/components/provenance/*.vue',
+    '!src/components/provenance/**/*.vue',
+    '!src/components/graph/*.vue',
+    '!src/pages/pedido/*.vue',
+    '!src/pages/pedido/**/*.vue',
+  ],
+}

.gitignore

@@ -24,9 +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

@@ -14,8 +14,13 @@
 src/
 ├── assets/          # Imágenes, iconos estáticos
 ├── components/     # Componentes Vue reutilizables
+│   ├── order/       # Componentes del resumen de pedido público
+│   ├── provenance/  # Provenance (público + admin): gráficos, sección y CRUD admin
+│   │   └── admin/   # Organizaciones, Proveedores, Geografía, SupplierLinkDialog
+│   └── graph/       # VisChart.vue (wrapper genérico de vis-network)
 ├── layouts/         # Layouts de página
 ├── pages/          # Vistas (auto-routed desde文件名)
+│   └── admin/      # Páginas admin (products, organizations, suppliers, geography, ...)
 ├── plugins/        # Configuración de Vuetify, etc.
 ├── router/         # Configuración de rutas
 ├── services/       # API services (auth.js, etc.)
@@ -59,23 +64,70 @@ import MiComponente from '@/components/MiComponente.vue';
 - 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/`
+- Rutas automáticas basadas en archivos en `src/pages/` (no se registran rutas a mano, excepto en casos especiales)
-- No requiere configuración manual en `router/index.js`
+- `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 build    # Producción
 npm run preview  # Preview build
-npm run lint     # ESLint fix
+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/components/provenance/**`, `!src/components/graph/*.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`)
+  - Atributos en orden alfabético dentro de su categoría (`vue/attributes-order`):
+    directivas (`v-if`, `v-model`) primero, luego props/attrs, luego `@eventos`
+
+### 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`
+- **Diálogos Vuetify se teleportan a `document.body`**: en tests, el contenido NO está en `wrapper.text()`. Assertar sobre `document.body.textContent` (ver `tests/unit/components/provenance/ProvenanceDetailModal.spec.js`). Helpers para interactuar con inputs/buttons de diálogos en `tests/unit/components/provenance/admin/helpers.js` (`setBodyInput`, `clickBody`)
+- **Selects/autocompletados en tests**: escribir en su `<input>` NO cambia el `v-model`. Emitir `update:modelValue` sobre el componente (`findAllComponents({ name: 'VSelect' })` / `{ name: 'VAutocomplete' }`). OJO: `VAutocomplete` también matchea como `VSelect`, y `v-data-table` añade un `VSelect` (items-per-page); filtrar por `props('items')` cuando haya varios
+- **Listas largas** (municipios, proveedores): `v-autocomplete` con búsqueda, pero la selección debe conservarse aunque el filtro no la incluya → `items` computado que devuelve los filtrados + los seleccionados que no estén (patrón en `SuppliersManagement.vue`, `GeographyManagement.vue`, `SupplierLinkDialog.vue`)
+
 ## Common Issues
 1. **Página en blanco:** Verificar que los componentes en `src/pages/*.vue` tengan import explícito
-2. **Errores de lint:** Ejecutar `npm run lint`
+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:**
@@ -112,3 +164,20 @@ npm run lint     # ESLint fix
 - `/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`
+
+## Provenance (Origen e historia de los productos)
+- Los gráficos se renderizan en el resumen público (`ProvenanceSection` dentro de `PublicOrderSummary.vue`) a partir de `product_provenance` embebido en el resumen (`GET /don_confiao/resumen_publico/<code>`). El backend NO genera los gráficos.
+- Payload: `[{ product: {id, name, catalogue_images[]}, suppliers: [{ supplier: {...}, organization|null, municipality|null, department|null, country|null }] }]`.
+- **Genérico reutilizable:**
+  - `src/components/graph/VisChart.vue`: wrapper de vis-network (props `nodes`, `edges`, `height`, `options`; import `import { DataSet, Network } from 'vis-network/standalone'`; emite `select` con el nodo). **OJO**: nodo con `image: null` → TypeError de vis; omitir la clave `image` si no hay foto
+- **Específico público** (`src/components/provenance/`): builder puro en `provenance-graph.js` (`buildProvenanceGraph(provenance, kinds)`, `hasAnySupplier`) y el adaptador vis `provenance-vis.js` (`toVisNodes`, `toVisEdges`, `chartOptions`). **Semántica de certeza**: arista con `certain: true` es continua (inequívoca) y `certain: false` es discontinua (dudosa); con varios proveedores por producto se inserta un nodo `junction:<productId>` (disyunción) con arista sólida hasta él y discontinua hacia cada proveedor; la duda se corta donde los proveedores coinciden (misma organización/municipio/departamento). Las aristas se deduplican por par `(from, to)` y si un mismo par repite con distinta certeza gana la duda. `buildProvenanceGraph` acepta los niveles a graficar (`product`, `supplier`, `organization`, `municipality`, `department`, `country`); los niveles omitidos se saltan conectando el nivel previo con el siguiente. `ProvenanceGraph.vue` unifica los charts en uno con checkboxes de filtro (por defecto solo productos y proveedores), leyenda con el color de cada nivel (`KIND_COLORS` en `provenance-vis.js`), columnas por nivel (x fijo por tipo; la física ordena la y) y espaciado vertical mínimo (`minVerticalSpacing` en `VisChart`); muestra "próximamente estará disponible" cuando no hay relaciones. `ProvenanceSection.vue` muestra el título ("Origen de los productos") con un desplegable (clic en el título o botón chevron) que oculta el gráfico por defecto, y un segundo desplegable para el mapa ("Mapa de origen de los productos") — patrón reutilizable para futuros bloques. `ProvenanceMap.vue` muestra un recuadro informativo (lista) con **todos** los productos del payload —incluidos los sin proveedor o cuyo municipio no tiene coordenadas, marcados "Sin geolocalización"— como panel lateral izquierdo junto al mapa (en columna en pantallas < 900px) y, si hay al menos un municipio con coordenadas, el mapa leaflet al lado: un marcador por producto en el municipio de origen (usa `municipality.latitude/longitude` del payload, sin desplazar posiciones aunque coincidan; los productos del mismo punto se agrupan en un único marcador con contador que al hacer clic despliega un popup con la lista de productos internos para abrir cada uno) y un ícono de persona en la posición de la tienda (settings store, endpoint público `getStoreSettings`); `fitBounds` abarca todos los marcadores, al hacer hover sobre un producto dibuja una línea discontinua hasta la tienda y al hacer hover sobre la tienda dibuja las de todos los productos; un botón flotante en el título del panel (`data-test="map-reset-zoom"`) re-ejecuta `fitBounds` para volver al zoom general; clic en un marcador individual abre un **popup de leaflet** anclado al ícono con el detalle (imagen + producto + proveedor + organización + territorio); clic en un producto del popup agrupado reemplaza su contenido por el detalle de ese producto. Clic en un producto del recuadro: si tiene ubicación hace `flyTo` al punto y abre el popup de detalle en el marcador; si no, abre `ProvenanceRelationModal.vue` (único caso donde se usa el modal web, pues no hay ícono en el mapa) que muestra el proveedor/organización disponibles y la nota "Aún sin geolocalización registrada." o "Aún no se ha vinculado un proveedor a este producto.". `ProvenanceDetailModal.vue`
+- **Admin CRUD** (`src/components/provenance/admin/`): `OrganizationsManagement.vue`, `SuppliersManagement.vue`, `GeographyManagement.vue` (tabs países/departamentos/municipios), `SupplierLinkDialog.vue` (vincula productos↔proveedores, abierto desde `ProductsManagement.vue`). Páginas en `src/pages/admin/{organizations,suppliers,geography}.vue`; rutas en `ADMIN_ROUTES` (`router/index.js`); ítems en `NavBar.vue`
+- **Endpoints provenance**: `/don_confiao/api/organizations/`, `/suppliers/`, `/countries/`, `/departments/`, `/municipalities/` (CRUD); vincular productos con `PATCH /don_confiao/api/products/<id>/` body `{"suppliers": [ids]}`; detalle de producto (con `suppliers`) via `GET /don_confiao/api/products/<id>/`
+- Los tests mockean `vis-network/standalone` (`vi.mock('vis-network/standalone', ...)`) o el propio `VisChart.vue`, y la API con `global.provide: { api }`

deploy/.env.example

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

deploy/Dockerfile

@@ -3,9 +3,11 @@ 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
 

deploy/build.sh

@@ -59,6 +59,7 @@ 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"
 

package.json

@@ -5,19 +5,25 @@
     "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",
+    "vis-network": "^10.1.1",
     "vue": "^3.4.31",
     "vuetify": "^3.6.11"
   },
   "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",
@@ -26,8 +32,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",
@@ -35,6 +43,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/components/AppFooter.vue

@@ -1,5 +1,13 @@
 <template>
-  <v-footer height="40" app>
+  <div>
+    <!-- Footer completo: visible siempre en desktop, toggle en mobile -->
+    <v-footer
+      v-if="expanded || !isMobile"
+      height="40"
+      app
+      class="app-footer"
+      :class="{ 'footer-overlay': isMobile }"
+    >
       <a
         v-for="item in items"
         :key="item.title"
@@ -31,9 +39,24 @@
         </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))
   text-decoration: none
   transition: .2s ease-in-out
 
   &:hover
     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

@@ -103,6 +103,21 @@
                 :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) }}
@@ -267,6 +282,21 @@
                 :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) }}
@@ -406,6 +436,7 @@ 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 },
@@ -416,6 +447,7 @@ const pendingHeaders = [
 // 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 },
@@ -509,6 +541,17 @@ function clearFilters() {
   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();
 });

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/Login.vue

@@ -7,12 +7,7 @@
       <div class="glow-bubble bubble-red"></div>
 
       <div class="login-card">
-        <v-img
+        <SiteLogo max-width="140" class="mx-auto mb-4" />
-          :src="logo"
-          alt="Don Confiao"
-          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>
@@ -74,7 +69,7 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import AuthService from '@/services/auth'
-import logo from '@/assets/logo_colorful.png'
+import SiteLogo from '@/components/SiteLogo.vue'
 
 const router = useRouter()
 

src/components/LoginDialog.vue

@@ -1,7 +1,13 @@
 <template>
   <v-dialog v-model="show" max-width="400">
     <v-card>
-      <v-card-title class="headline">Iniciar sesión</v-card-title>
+      <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

src/components/NavBar.vue

@@ -54,7 +54,7 @@
       nav
     >
       <v-list-item
-        v-for="item in menuItems"
+        v-for="item in filteredMenuItems"
         :key="item.title"
         :title="item.title"
         :prepend-icon="item.icon"
@@ -100,6 +100,7 @@
             { 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'},
@@ -107,7 +108,12 @@
              { 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'},
+              { title: 'Organizaciones', route: '/admin/organizations', icon: 'mdi-domain'},
+              { title: 'Proveedores', route: '/admin/suppliers', icon: 'mdi-truck'},
+              { title: 'Geografía', route: '/admin/geography', icon: 'mdi-earth'},
              { divider: true },
              { header: 'Sincronización Tryton' },
              { title: 'Importar Productos', route: '/sincronizar_productos_tryton', icon: 'mdi-download'},
@@ -119,7 +125,13 @@
       computed: {
         isAdmin() {
           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();

src/components/ProductsManagement.vue

@@ -122,6 +122,19 @@
               </v-chip>
             </template>
 
+            <!-- Slot para columna de proveedores -->
+            <template #item.actions="{ item }">
+              <v-btn
+                @click="openSupplierLink(item)"
+                color="primary"
+                size="small"
+                variant="tonal"
+                prepend-icon="mdi-truck"
+              >
+                Proveedores
+              </v-btn>
+            </template>
+
             <!-- Loading state -->
             <template #loading>
               <v-skeleton-loader type="table-row@10"></v-skeleton-loader>
@@ -138,6 +151,13 @@
       </v-col>
     </v-row>
 
+    <!-- Diálogo de proveedores del producto -->
+    <SupplierLinkDialog
+      :visible="linkDialog"
+      :product="linkProduct"
+      @update:visible="linkDialog = $event"
+    />
+
     <!-- Snackbar de feedback -->
     <v-snackbar
       v-model="snackbar.show"
@@ -155,6 +175,7 @@
 
 <script setup>
 import { ref, watch, inject, onMounted, computed } from "vue";
+import SupplierLinkDialog from "@/components/provenance/admin/SupplierLinkDialog.vue";
 
 // Estado
 const api = inject("api");
@@ -164,6 +185,8 @@ const selected = ref([]);
 const loading = ref(false);
 const snackbar = ref({ show: false, message: "", color: "success" });
 const searchQuery = ref("");
+const linkDialog = ref(false);
+const linkProduct = ref(null);
 
 // Headers de la tabla
 const headers = [
@@ -171,6 +194,7 @@ const headers = [
   { title: "Nombre", key: "name", sortable: true },
   { title: "Precio", key: "price", sortable: true },
   { title: "Estado", key: "active", sortable: true },
+  { title: "Proveedores", key: "actions", sortable: false },
 ];
 
 // Computed - Productos filtrados por búsqueda
@@ -236,6 +260,11 @@ function showSnackbar(message, color) {
   snackbar.value = { show: true, message, color };
 }
 
+function openSupplierLink(product) {
+  linkProduct.value = product;
+  linkDialog.value = true;
+}
+
 // Watchers
 watch(activeFilter, () => {
   selected.value = [];

src/components/PublicOrderSummary.vue

@@ -0,0 +1,80 @@
+<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)" />
+        <ProvenanceSection
+          v-if="purchase.product_provenance?.length"
+          :provenance="purchase.product_provenance"
+        />
+      </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'
+  import ProvenanceSection from '@/components/provenance/ProvenanceSection.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/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"

src/components/Wellcome.vue

@@ -8,12 +8,7 @@
       <div class="glow-bubble bubble-yellow"></div>
       <div class="glow-bubble bubble-red"></div>
       <div class="hero-content">
-        <v-img
+        <SiteLogo max-width="180" class="mx-auto mb-4" />
-          :src="logo"
-          alt="Don Confiao"
-          max-width="180"
-          class="mx-auto mb-4"
-        />
         <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
@@ -21,6 +16,10 @@
       </div>
     </v-sheet>
 
+    <div class="py-6">
+      <StoreLocation />
+    </div>
+
     <v-container class="py-6">
       <v-row>
         <v-col cols="12" md="4">
@@ -45,25 +44,39 @@
           <v-card class="h-100" elevation="2">
             <v-card-item>
               <template #prepend>
-                <v-icon color="orange-darken-2" size="48"
+                <v-icon color="green" size="48">mdi-code-tags</v-icon>
-                  >mdi-progress-wrench</v-icon
-                >
               </template>
               <v-card-title class="font-weight-bold"
-                >En Desarrollo</v-card-title
+                >Software Libre</v-card-title
               >
             </v-card-item>
             <v-card-text>
-              Don Confiao apenas está entendiendo cómo funciona esta tienda y
+              Don Confiao es un proyecto de
-              por ahora
+              <ResaltedText>Software Libre</ResaltedText>. Su desarrollo está
-              <ResaltedText
+              dividido en dos repositorios: el backend y el frontend.
-                >solo puede atender las compras de contado</ResaltedText
-              >, ya sea en efectivo o consignación.
-              <v-alert type="warning" class="mt-3" density="compact">
-                Si no vas a pagar tu compra recuerda que debes hacerlo en la
-                planilla manual
-              </v-alert>
             </v-card-text>
+            <v-card-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>
 
@@ -108,6 +121,16 @@
             >
               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-col>
       </v-row>
@@ -117,8 +140,9 @@
 
 <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';
-import logo from "@/assets/logo_colorful.png";
 
 const authStore = useAuthStore();
 </script>

src/components/catalog/Card.vue

@@ -47,7 +47,7 @@
         </div>
 
         <!-- Precio Total -->
-        <div class="price-row">
+        <div v-if="product.quantity > 0" class="price-row">
           <span class="price-label text-caption">Precio total</span>
           <v-chip
             color="success"
@@ -63,6 +63,18 @@
 
     <!-- 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
@@ -101,12 +113,14 @@
             <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,
@@ -128,6 +142,10 @@ export default {
       type: Function,
       required: true,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   methods: {
     handleIncrease() {
@@ -170,7 +188,6 @@ export default {
 .product-image-container {
   position: relative;
   width: 100%;
-  height: 100%;
   overflow: hidden;
   background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
@@ -307,6 +324,13 @@ export default {
    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 {
@@ -330,143 +354,6 @@ export default {
 
 /* Móvil estándar (375px - 559px) */
 @media (min-width: 375px) and (max-width: 559px) {
-  .product-name {
-    font-size: 0.95rem;
-  }
-
-  .price-value {
-    font-size: 1.05rem;
-  }
-}
-
-/* Tablet (560px - 959px) */
-@media (min-width: 560px) and (max-width: 959px) {
-  .product-content {
-    padding: 14px;
-  }
-
-  .product-name {
-    font-size: 1rem;
-    min-height: 2.6rem;
-  }
-
-  .price-label {
-    font-size: 0.68rem;
-  }
-
-  .price-value {
-    font-size: 1.15rem;
-  }
-
-  .price-total-chip {
-    font-size: 0.95rem;
-    height: 28px;
-  }
-
-  .quantity-input {
-    max-width: 70px;
-    min-width: 70px;
-  }
-}
-
-/* Desktop (≥ 960px) */
-@media (min-width: 960px) {
-  .product-content {
-    padding: 16px 14px;
-  }
-
-  .product-name {
-    font-size: 1.05rem;
-    min-height: 2.7rem;
-  }
-
-  .price-label {
-    font-size: 0.7rem;
-  }
-
-  .price-value {
-    font-size: 1.2rem;
-  }
-
-  .price-total-chip {
-    font-size: 1rem;
-    height: 30px;
-    padding: 0 14px;
-  }
-
-  .product-actions {
-    padding: 8px;
-    padding-bottom: 12px;
-  }
-
-  .quantity-input {
-    max-width: 70px;
-    min-width: 70px;
-  }
-
-  .qty-btn {
-    width: 36px;
-    height: 36px;
-  }
-}
-
-/* Desktop Large (≥ 1280px) */
-@media (min-width: 1280px) {
-  .product-content {
-    padding: 18px 16px;
-  }
-
-  .product-name {
-    font-size: 1.1rem;
-    min-height: 2.8rem;
-  }
-
-  .price-value {
-    font-size: 1.25rem;
-  }
-
-  .price-total-chip {
-    font-size: 1.05rem;
-    height: 32px;
-  }
-}
-
-/* Desktop Extra Large (≥ 1920px) */
-@media (min-width: 1920px) {
-  .product-name {
-    font-size: 1.15rem;
-    min-height: 3rem;
-  }
-
-  .price-value {
-    font-size: 1.3rem;
-  }
-
-  .product-content {
-    padding: 8px;
-  }
-
-  .product-name {
-    font-size: 0.8rem;
-    min-height: 1.9rem;
-  }
-
-  .price-value {
-    font-size: 0.85rem;
-  }
-
-  .quantity-input {
-    max-width: 50px;
-    min-width: 50px;
-  }
-}
-
-/* Móvil estándar (375px - 559px) */
-@media (min-width: 375px) and (max-width: 559px) {
-  .product-image-container {
-    height: 140px;
-  }
-
   .product-name {
     font-size: 0.85rem;
   }
@@ -478,10 +365,6 @@ export default {
 
 /* Tablet (560px - 959px) */
 @media (min-width: 560px) and (max-width: 959px) {
-  .product-image-container {
-    height: 150px;
-  }
-
   .product-content {
     padding: 10px;
   }
@@ -512,10 +395,6 @@ export default {
 
 /* Desktop (≥ 960px) */
 @media (min-width: 960px) {
-  .product-image-container {
-    height: 160px;
-  }
-
   .product-content {
     padding: 12px 10px;
   }
@@ -557,10 +436,6 @@ export default {
 
 /* Desktop Large (≥ 1280px) */
 @media (min-width: 1280px) {
-  .product-image-container {
-    height: 170px;
-  }
-
   .product-content {
     padding: 14px 12px;
   }
@@ -582,10 +457,6 @@ export default {
 
 /* Desktop Extra Large (≥ 1920px) */
 @media (min-width: 1920px) {
-  .product-image-container {
-    height: 180px;
-  }
-
   .product-name {
     font-size: 1.05rem;
     min-height: 2.5rem;

src/components/catalog/Cart.vue

@@ -47,7 +47,7 @@
         icon
         size="small"
         variant="text"
-        @click="$emit('toggle-collapse')"
+        @click.stop="$emit('toggle-collapse')"
         :title="isCollapsed ? 'Expandir carrito' : 'Contraer carrito'"
       >
         <v-icon>{{ isCollapsed ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
@@ -133,7 +133,7 @@
       
       <v-card-actions v-if="cartItems.length > 0" class="cart-checkout-section">
         <v-btn color="primary" block @click="$emit('checkout')">
-          Finalizar Compra
+          Finalizar Pedido
         </v-btn>
       </v-card-actions>
     </div>

src/components/graph/VisChart.vue

@@ -0,0 +1,155 @@
+<template>
+  <div
+    ref="containerRef"
+    class="vis-chart"
+    :style="{ height: `${height}px` }"
+  />
+</template>
+
+<script setup>
+  import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+  import { DataSet, Network } from 'vis-network/standalone'
+
+  const props = defineProps({
+    nodes: {
+      type: Array,
+      default: () => [],
+    },
+    edges: {
+      type: Array,
+      default: () => [],
+    },
+    height: {
+      type: Number,
+      default: 400,
+    },
+    options: {
+      type: Object,
+      default: () => ({}),
+    },
+    minVerticalSpacing: {
+      type: Number,
+      default: null,
+    },
+  })
+
+  const emit = defineEmits(['select'])
+
+  const containerRef = ref(null)
+  let network = null
+  let nodesDataSet = null
+
+  const BASE_OPTIONS = {
+    autoResize: true,
+    interaction: {
+      hover: true,
+      tooltipDelay: 150,
+    },
+    physics: {
+      enabled: true,
+      stabilization: { enabled: true, iterations: 800 },
+      barnesHut: {
+        gravitationalConstant: -5000,
+        springLength: 140,
+        springConstant: 0.05,
+      },
+    },
+    nodes: {
+      shape: 'dot',
+      size: 24,
+      borderWidth: 2,
+      font: {
+        face: 'sans-serif',
+        size: 13,
+        color: '#263238',
+        strokeWidth: 4,
+        strokeColor: '#ffffff',
+      },
+    },
+    edges: {
+      smooth: { enabled: true, type: 'dynamic' },
+      arrows: { to: { enabled: true, scaleFactor: 0.6 } },
+      color: { color: '#b0bec5', highlight: '#546e7a', hover: '#90a4ae' },
+      width: 2,
+    },
+    layout: { improvedLayout: true },
+  }
+
+  function mergeOptions () {
+    return {
+      ...BASE_OPTIONS,
+      ...props.options,
+      nodes: { ...BASE_OPTIONS.nodes, ...(props.options.nodes || {}) },
+      edges: { ...BASE_OPTIONS.edges, ...(props.options.edges || {}) },
+      physics: { ...BASE_OPTIONS.physics, ...(props.options.physics || {}) },
+      interaction: { ...BASE_OPTIONS.interaction, ...(props.options.interaction || {}) },
+    }
+  }
+
+  function render (nodes, edges) {
+    nodesDataSet = new DataSet(nodes)
+    network.setData({ nodes: nodesDataSet, edges: new DataSet(edges) })
+  }
+
+  function applyMinVerticalSpacing (minSpacing) {
+    if (!minSpacing || minSpacing <= 0) return
+    const columns = new Map()
+    for (const [id, position] of Object.entries(network.getPositions())) {
+      const x = Math.round(position.x)
+      if (!columns.has(x)) columns.set(x, [])
+      columns.get(x).push({ id, x, y: position.y })
+    }
+    for (const column of columns.values()) {
+      column.sort((a, b) => a.y - b.y)
+      let previousY = null
+      for (const item of column) {
+        if (previousY !== null && item.y - previousY < minSpacing) {
+          network.moveNode(item.id, item.x, previousY + minSpacing)
+        }
+        previousY = network.getPositions()[item.id].y
+      }
+    }
+  }
+
+  function setupNetwork () {
+    if (network) network.destroy()
+    network = new Network(containerRef.value, { nodes: [], edges: [] }, mergeOptions())
+    render(props.nodes, props.edges)
+
+    network.on('click', params => {
+      const id = params.nodes?.[0]
+      if (id === undefined) return
+      const node = nodesDataSet.get(id)
+      if (node) emit('select', node)
+    })
+
+    network.once('stabilizationIterationsDone', () => {
+      network.setOptions({ physics: { enabled: false } })
+      applyMinVerticalSpacing(props.minVerticalSpacing)
+      network.fit()
+    })
+  }
+
+  onMounted(setupNetwork)
+
+  watch(
+    () => [props.nodes, props.edges],
+    () => {
+      if (!containerRef.value) return
+      setupNetwork()
+    },
+    { deep: true }
+  )
+
+  onBeforeUnmount(() => {
+    if (network) network.destroy()
+    network = null
+  })
+</script>
+
+<style scoped>
+.vis-chart {
+  width: 100%;
+  min-height: 200px;
+}
+</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/components/provenance/ProvenanceDetailModal.vue

@@ -0,0 +1,108 @@
+<template>
+  <v-dialog
+    max-width="520"
+    :model-value="visible"
+    @update:model-value="onUpdateVisible"
+  >
+    <v-card v-if="selected">
+      <v-card-title class="d-flex align-center">
+        <v-icon class="mr-2" :color="kindColor" :icon="kindIcon" />
+        <span class="font-weight-bold">{{ kindLabel }}</span>
+      </v-card-title>
+      <v-divider />
+      <v-card-text>
+        <img
+          v-if="selected.image"
+          alt="Imagen del producto"
+          class="provenance-image rounded-lg border mb-3"
+          :src="selected.image"
+        >
+        <div class="text-h6 mb-2">{{ selected.label }}</div>
+        <v-list v-if="hasDetails" density="compact">
+          <v-list-item v-if="description">
+            <v-list-item-title>Descripción</v-list-item-title>
+            <v-list-item-subtitle>{{ description }}</v-list-item-subtitle>
+          </v-list-item>
+          <v-list-item v-if="website">
+            <v-list-item-title>Sitio web</v-list-item-title>
+            <v-list-item-subtitle>
+              <a :href="website" rel="noopener" target="_blank">{{ website }}</a>
+            </v-list-item-subtitle>
+          </v-list-item>
+          <v-list-item v-if="contactEmail">
+            <v-list-item-title>Correo de contacto</v-list-item-title>
+            <v-list-item-subtitle>{{ contactEmail }}</v-list-item-subtitle>
+          </v-list-item>
+          <v-list-item v-if="contactPhone">
+            <v-list-item-title>Teléfono de contacto</v-list-item-title>
+            <v-list-item-subtitle>{{ contactPhone }}</v-list-item-subtitle>
+          </v-list-item>
+        </v-list>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn variant="text" @click="close">Cerrar</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+  import { computed } from 'vue'
+
+  const props = defineProps({
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    selected: {
+      type: Object,
+      default: null,
+    },
+  })
+
+  const emit = defineEmits(['update:visible'])
+
+  const KIND_INFO = {
+    product: { label: 'Producto', icon: 'mdi-package-variant', color: 'teal' },
+    supplier: { label: 'Proveedor', icon: 'mdi-truck', color: 'blue' },
+    organization: { label: 'Organización', icon: 'mdi-domain', color: 'orange' },
+    municipality: { label: 'Municipio', icon: 'mdi-map-marker', color: 'green' },
+    department: { label: 'Departamento', icon: 'mdi-map', color: 'indigo' },
+    country: { label: 'País', icon: 'mdi-earth', color: 'purple' },
+  }
+
+  const kindInfo = computed(() => {
+    return KIND_INFO[props.selected?.kind] || KIND_INFO.product
+  })
+  const kindLabel = computed(() => kindInfo.value.label)
+  const kindIcon = computed(() => kindInfo.value.icon)
+  const kindColor = computed(() => kindInfo.value.color)
+
+  const entity = computed(() => props.selected?.entity || {})
+  const description = computed(() => entity.value.description || '')
+  const website = computed(() => entity.value.website || '')
+  const contactEmail = computed(() => entity.value.contact_email || '')
+  const contactPhone = computed(() => entity.value.contact_phone || '')
+
+  const hasDetails = computed(() => {
+    return description.value || website.value || contactEmail.value || contactPhone.value
+  })
+
+  function onUpdateVisible (value) {
+    emit('update:visible', value)
+  }
+
+  function close () {
+    emit('update:visible', false)
+  }
+</script>
+
+<style scoped>
+.provenance-image {
+  display: block;
+  max-height: 220px;
+  max-width: 100%;
+  object-fit: contain;
+}
+</style>

src/components/provenance/ProvenanceGraph.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <v-alert
+      v-if="!hasSuppliers"
+      class="my-4"
+      type="info"
+      variant="tonal"
+    >
+      La información de origen de los productos de este pedido estará disponible
+      próximamente.
+    </v-alert>
+
+    <template v-else>
+      <div class="d-flex flex-wrap align-center ga-4 mb-2">
+        <span class="text-body-2 font-weight-medium">Elementos a graficar:</span>
+        <v-checkbox
+          v-for="option in options"
+          :key="option.value"
+          v-model="selectedKinds"
+          density="compact"
+          :value="option.value"
+        >
+          <template #label>
+            <span class="d-flex align-center">
+              <span
+                class="legend-dot"
+                :style="{ backgroundColor: option.color }"
+              />
+              {{ option.label }}
+            </span>
+          </template>
+        </v-checkbox>
+      </div>
+
+      <v-alert
+        v-if="visNodes.length === 0"
+        class="my-2"
+        type="warning"
+        variant="tonal"
+      >
+        Selecciona al menos un elemento para graficar.
+      </v-alert>
+
+      <VisChart
+        v-if="visNodes.length > 0"
+        data-test="provenance-chart"
+        :edges="visEdges"
+        :height="height"
+        :min-vertical-spacing="minVerticalSpacing"
+        :nodes="visNodes"
+        :options="chartOptions"
+        @select="onSelect"
+      />
+    </template>
+
+    <ProvenanceDetailModal
+      :selected="selected"
+      :visible="modalVisible"
+      @update:visible="modalVisible = $event"
+    />
+  </div>
+</template>
+
+<script setup>
+  import { computed, ref } from 'vue'
+  import VisChart from '@/components/graph/VisChart.vue'
+  import ProvenanceDetailModal from './ProvenanceDetailModal.vue'
+  import { buildProvenanceGraph, hasAnySupplier } from './provenance-graph'
+  import { chartOptions, KIND_COLORS, toVisEdges, toVisNodes } from './provenance-vis'
+
+  const props = defineProps({
+    provenance: {
+      type: Array,
+      default: () => [],
+    },
+  })
+
+  const options = [
+    { value: 'product', label: 'Productos', color: KIND_COLORS.product },
+    { value: 'supplier', label: 'Proveedores', color: KIND_COLORS.supplier },
+    { value: 'organization', label: 'Organizaciones', color: KIND_COLORS.organization },
+    { value: 'municipality', label: 'Municipios', color: KIND_COLORS.municipality },
+    { value: 'department', label: 'Departamentos', color: KIND_COLORS.department },
+    { value: 'country', label: 'País', color: KIND_COLORS.country },
+  ]
+
+  const selectedKinds = ref(['product', 'supplier'])
+
+  const hasSuppliers = computed(() => hasAnySupplier(props.provenance))
+  const graph = computed(() => buildProvenanceGraph(props.provenance, selectedKinds.value))
+  const visNodes = computed(() => toVisNodes(graph.value.nodes))
+  const visEdges = computed(() => toVisEdges(graph.value.edges))
+  const height = computed(() => Math.max(280, Math.min(700, graph.value.nodes.length * 64)))
+  const minVerticalSpacing = 2 * 24 + 22
+
+  const selected = ref(null)
+  const modalVisible = ref(false)
+
+  function onSelect (node) {
+    if (!node || node.kind === 'junction') return
+    selected.value = node
+    modalVisible.value = true
+  }
+</script>
+
+<style scoped>
+.legend-dot {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  margin-right: 6px;
+  border: 2px solid rgba(0, 0, 0, 0.15);
+}
+</style>

src/components/provenance/ProvenanceMap.vue

@@ -0,0 +1,569 @@
+<template>
+  <div>
+    <template v-if="productRows.length">
+      <div class="map-layout">
+        <v-card class="product-panel" data-test="map-product-box" variant="tonal">
+          <v-card-title class="d-flex align-center justify-space-between py-2">
+            <span class="text-subtitle-1 font-weight-bold">
+              Productos ({{ productRows.length }})
+            </span>
+            <v-btn
+              v-if="hasMarkers"
+              data-test="map-reset-zoom"
+              density="comfortable"
+              icon="mdi-fit-to-page"
+              size="small"
+              variant="flat"
+              @click="resetZoom"
+            />
+          </v-card-title>
+          <v-divider />
+          <v-list density="compact">
+            <v-list-item
+              v-for="row in productRows"
+              :key="row.product.id"
+              data-test="map-product-row"
+              :prepend-avatar="row.image"
+              role="button"
+              :subtitle="row.locationLabel"
+              :title="row.product.name"
+              @click="onRowClick(row)"
+            >
+              <template #append>
+                <v-icon v-if="row.position" color="primary" size="small">
+                  mdi-map-marker
+                </v-icon>
+                <v-icon v-else color="medium-emphasis" size="small">
+                  mdi-map-marker-off
+                </v-icon>
+              </template>
+            </v-list-item>
+          </v-list>
+        </v-card>
+
+        <div class="map-area">
+          <template v-if="hasMarkers">
+            <div ref="mapEl" class="map-wrapper" />
+            <v-alert
+              v-if="!storePosition"
+              class="mt-2"
+              type="warning"
+              variant="tonal"
+            >
+              La ubicación de la tienda no está configurada, por lo que no se mostrará su recorrido.
+            </v-alert>
+            <p class="text-caption text-medium-emphasis mt-2 mb-0">
+              Pasa el cursor sobre un producto para ver su recorrido hasta la tienda. Haz clic en un marcador para ver el detalle.
+            </p>
+          </template>
+          <v-alert
+            v-else
+            class="my-2"
+            type="info"
+            variant="tonal"
+          >
+            Las coordenadas geográficas de los municipios de origen aún no están disponibles.
+          </v-alert>
+        </div>
+      </div>
+    </template>
+
+    <ProvenanceRelationModal
+      :product="selectedProduct"
+      :relation="selectedRelation"
+      :visible="modalVisible"
+      @update:visible="modalVisible = $event"
+    />
+  </div>
+</template>
+
+<script setup>
+  import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+  import L from 'leaflet'
+  import 'leaflet/dist/leaflet.css'
+  import { useSettingsStore } from '@/stores/settings'
+  import ProvenanceRelationModal from './ProvenanceRelationModal.vue'
+
+  const props = defineProps({
+    provenance: {
+      type: Array,
+      default: () => [],
+    },
+  })
+
+  const api = inject('api')
+  const settingsStore = useSettingsStore()
+
+  const mapEl = ref(null)
+  const selectedProduct = ref(null)
+  const selectedRelation = ref(null)
+  const modalVisible = ref(false)
+
+  let map = null
+  let storeMarker = null
+  let productMarkers = []
+  let activeLines = []
+
+  const settings = computed(() => settingsStore.settings)
+  const storePosition = computed(() => {
+    const current = settings.value
+    if (!current || current.latitude == null || current.longitude == null) return null
+    return [Number(current.latitude), Number(current.longitude)]
+  })
+
+  const markers = computed(() => {
+    const result = []
+    for (const entry of props.provenance || []) {
+      if (!entry.product) continue
+      for (const rel of entry.suppliers || []) {
+        const municipality = rel.municipality
+        if (municipality && municipality.latitude != null && municipality.longitude != null) {
+          result.push({
+            product: entry.product,
+            relation: rel,
+            position: [Number(municipality.latitude), Number(municipality.longitude)],
+          })
+        }
+      }
+    }
+    return result
+  })
+
+  const productRows = computed(() => {
+    const rows = []
+    for (const entry of props.provenance || []) {
+      if (!entry.product) continue
+      const suppliers = entry.suppliers || []
+      const geoRelations = suppliers.filter(rel =>
+        rel.municipality && rel.municipality.latitude != null && rel.municipality.longitude != null
+      )
+      const municipalities = [...new Map(
+        geoRelations.map(rel => [rel.municipality.id, rel.municipality])
+      ).values()]
+      rows.push({
+        product: entry.product,
+        relation: suppliers[0] || null,
+        image: entry.product.catalogue_images?.[0] || null,
+        position: geoRelations.length
+          ? [Number(geoRelations[0].municipality.latitude), Number(geoRelations[0].municipality.longitude)]
+          : null,
+        locationLabel: municipalities.length
+          ? municipalities.map(m => m.name).join(', ')
+          : 'Sin geolocalización',
+      })
+    }
+    return rows
+  })
+
+  const hasMarkers = computed(() => markers.value.length > 0)
+
+  const markerGroups = computed(() => {
+    const groups = new Map()
+    for (const markerData of markers.value) {
+      const key = markerData.position.join(',')
+      if (!groups.has(key)) groups.set(key, [])
+      groups.get(key).push(markerData)
+    }
+    return [...groups.values()].map(items => ({ position: items[0].position, items }))
+  })
+
+  const personIcon = L.divIcon({
+    className: 'provenance-store-pin',
+    html: '<i class="mdi mdi-account-circle" style="font-size:46px;line-height:1;color:#f44336;"></i>',
+    iconSize: [46, 46],
+    iconAnchor: [23, 46],
+  })
+
+  function productIcon (markerData) {
+    const image = markerData.product.catalogue_images?.[0]
+    const html = image
+      ? `<img class="provenance-product-img" src="${image}" alt="${markerData.product.name}">`
+      : '<span class="provenance-product-fallback"><i class="mdi mdi-package-variant"></i></span>'
+    return L.divIcon({
+      className: 'provenance-product-pin',
+      html,
+      iconSize: [38, 38],
+      iconAnchor: [19, 38],
+    })
+  }
+
+  function groupIcon (group) {
+    return L.divIcon({
+      className: 'provenance-group-pin',
+      html: `<span class="provenance-group-count">${group.items.length}</span><i class="mdi mdi-package-variant"></i>`,
+      iconSize: [38, 38],
+      iconAnchor: [19, 38],
+    })
+  }
+
+  function buildGroupPopup (items, onItemClick) {
+    const container = document.createElement('div')
+    container.className = 'provenance-popup-list'
+    items.forEach((item, index) => {
+      const row = document.createElement('div')
+      row.className = 'provenance-popup-item'
+      row.setAttribute('role', 'button')
+      row.setAttribute('data-test', `map-popup-item-${index}`)
+      const image = item.product.catalogue_images?.[0]
+      if (image) {
+        const img = document.createElement('img')
+        img.src = image
+        img.className = 'provenance-popup-img'
+        row.appendChild(img)
+      }
+      const name = document.createElement('span')
+      name.className = 'provenance-popup-name'
+      name.textContent = item.product.name
+      row.appendChild(name)
+      row.addEventListener('click', event => {
+        event.stopPropagation()
+        onItemClick(item)
+      })
+      container.appendChild(row)
+    })
+    return container
+  }
+
+  function appendEntityRow (container, label, icon, color, entity) {
+    if (!entity) return
+    const row = document.createElement('div')
+    row.className = 'provenance-detail-row'
+    const iconEl = document.createElement('i')
+    iconEl.className = `mdi ${icon}`
+    iconEl.style.color = color
+    row.appendChild(iconEl)
+    const body = document.createElement('div')
+    const labelEl = document.createElement('div')
+    labelEl.className = 'provenance-detail-label'
+    labelEl.textContent = label
+    const nameEl = document.createElement('div')
+    nameEl.className = 'provenance-detail-name'
+    nameEl.textContent = entity.name
+    body.appendChild(labelEl)
+    body.appendChild(nameEl)
+    row.appendChild(body)
+    container.appendChild(row)
+  }
+
+  function buildDetailPopup (markerData) {
+    const container = document.createElement('div')
+    container.className = 'provenance-detail-popup'
+    const header = document.createElement('div')
+    header.className = 'provenance-detail-header'
+    const image = markerData.product.catalogue_images?.[0]
+    if (image) {
+      const img = document.createElement('img')
+      img.src = image
+      img.className = 'provenance-detail-img'
+      header.appendChild(img)
+    }
+    const title = document.createElement('div')
+    title.className = 'provenance-detail-title'
+    title.textContent = markerData.product.name
+    header.appendChild(title)
+    container.appendChild(header)
+    const rel = markerData.relation || {}
+    appendEntityRow(container, 'Proveedor', 'mdi-truck', '#1976d2', rel.supplier)
+    appendEntityRow(container, 'Organización', 'mdi-domain', '#fb8c00', rel.organization)
+    appendEntityRow(container, 'Municipio', 'mdi-map-marker', '#4caf50', rel.municipality)
+    appendEntityRow(container, 'Departamento', 'mdi-map', '#3f51b5', rel.department)
+    appendEntityRow(container, 'País', 'mdi-earth', '#9c27b0', rel.country)
+    return container
+  }
+
+  function openProductDetail (marker, markerData) {
+    marker.setPopupContent(buildDetailPopup(markerData))
+    marker.openPopup()
+  }
+
+  function showLine (from, to) {
+    const line = L.polyline([from, to], {
+      color: '#26a69a',
+      weight: 2,
+      dashArray: '6 6',
+    }).addTo(map)
+    activeLines.push(line)
+  }
+
+  function clearLines () {
+    activeLines.forEach(line => line.remove())
+    activeLines = []
+  }
+
+  function addStoreMarker () {
+    if (!storePosition.value) return
+    storeMarker = L.marker(storePosition.value, { icon: personIcon }).addTo(map)
+    storeMarker.bindTooltip('Tienda')
+    storeMarker.on('mouseover', () => {
+      markers.value.forEach(markerData => showLine(markerData.position, storePosition.value))
+    })
+    storeMarker.on('mouseout', clearLines)
+  }
+
+  function addProductMarkers () {
+    markerGroups.value.forEach(group => {
+      if (group.items.length === 1) {
+        const item = group.items[0]
+        const marker = L.marker(item.position, { icon: productIcon(item) }).addTo(map)
+        marker.bindTooltip(item.product.name)
+        marker.bindPopup(buildDetailPopup(item))
+        marker.on('mouseover', () => {
+          if (storePosition.value) showLine(item.position, storePosition.value)
+        })
+        marker.on('mouseout', clearLines)
+        productMarkers.push({ marker, items: [item] })
+        return
+      }
+      const marker = L.marker(group.position, { icon: groupIcon(group) }).addTo(map)
+      marker.bindTooltip(`${group.items.length} productos en este punto`)
+      marker.bindPopup(buildGroupPopup(group.items, item => openProductDetail(marker, item)))
+      marker.on('popupclose', () => {
+        marker.bindPopup(buildGroupPopup(group.items, item => openProductDetail(marker, item)))
+      })
+      marker.on('mouseover', () => {
+        if (storePosition.value) group.items.forEach(item => showLine(item.position, storePosition.value))
+      })
+      marker.on('mouseout', clearLines)
+      productMarkers.push({ marker, items: group.items })
+    })
+  }
+
+  function fitBounds () {
+    const bounds = L.latLngBounds()
+    markers.value.forEach(markerData => bounds.extend(markerData.position))
+    if (storePosition.value) bounds.extend(storePosition.value)
+    if (bounds.isValid()) map.fitBounds(bounds, { padding: [60, 60] })
+  }
+
+  function onRowClick (row) {
+    if (row.position && map) {
+      map.flyTo(row.position, Math.max(map.getZoom(), 12), { duration: 0.6 })
+      const entry = productMarkers.find(entry =>
+        entry.items.some(item => item.product.id === row.product.id && item.relation === row.relation)
+      )
+      if (entry) {
+        const item = entry.items.find(i => i.relation === row.relation) || entry.items[0]
+        openProductDetail(entry.marker, item)
+        return
+      }
+    }
+    selectedProduct.value = row.product
+    selectedRelation.value = row.relation
+    modalVisible.value = true
+  }
+
+  function resetZoom () {
+    if (map) fitBounds()
+  }
+
+  function initMap () {
+    if (!mapEl.value || map) return
+    const center = storePosition.value || markers.value[0].position
+    map = L.map(mapEl.value, { scrollWheelZoom: false }).setView(center, 6)
+    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)
+    addStoreMarker()
+    addProductMarkers()
+    fitBounds()
+  }
+
+  function handleResize () {
+    if (map) map.invalidateSize()
+  }
+
+  onMounted(async () => {
+    window.addEventListener('resize', handleResize)
+    try {
+      await settingsStore.fetchSettings(api)
+      await nextTick()
+      if (mapEl.value) initMap()
+    } catch (error) {
+      console.error('Error al cargar la configuración de la tienda:', error)
+    }
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', handleResize)
+    if (map) {
+      map.remove()
+      map = null
+      storeMarker = null
+      productMarkers = []
+    }
+  })
+</script>
+
+<style scoped>
+.map-layout {
+  display: flex;
+  gap: 12px;
+  align-items: stretch;
+}
+
+.product-panel {
+  flex: 0 0 300px;
+  max-height: 480px;
+  overflow-y: auto;
+}
+
+.map-area {
+  flex: 1;
+  min-width: 0;
+}
+
+.map-wrapper {
+  position: relative;
+  width: 100%;
+  height: 420px;
+  border-radius: 12px;
+  overflow: hidden;
+  z-index: 0;
+}
+
+@media (max-width: 900px) {
+  .map-layout {
+    flex-direction: column;
+  }
+
+  .product-panel {
+    flex-basis: auto;
+    max-height: none;
+  }
+}
+
+.map-wrapper :deep(.provenance-product-pin) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+}
+
+.map-wrapper :deep(.provenance-product-img) {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid #ffffff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
+}
+
+.map-wrapper :deep(.provenance-product-fallback) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background: #26a69a;
+  color: #ffffff;
+  border: 2px solid #ffffff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
+  font-size: 24px;
+}
+
+.map-wrapper :deep(.provenance-store-pin) {
+  border: none;
+  background: transparent;
+}
+
+.map-wrapper :deep(.provenance-group-pin) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #26a69a;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  color: #ffffff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
+  cursor: pointer;
+}
+
+.map-wrapper :deep(.provenance-group-pin .provenance-group-count) {
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.map-wrapper :deep(.provenance-group-pin .mdi) {
+  font-size: 12px;
+  line-height: 1;
+  margin-top: 2px;
+}
+
+.map-wrapper :deep(.provenance-popup-item) {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  cursor: pointer;
+}
+
+.map-wrapper :deep(.provenance-popup-item:hover) {
+  text-decoration: underline;
+}
+
+.map-wrapper :deep(.provenance-popup-img) {
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  object-fit: cover;
+}
+
+.map-wrapper :deep(.provenance-popup-name) {
+  font-weight: 500;
+}
+
+.map-wrapper :deep(.provenance-detail-popup) {
+  min-width: 200px;
+  max-width: 260px;
+}
+
+.map-wrapper :deep(.provenance-detail-header) {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.map-wrapper :deep(.provenance-detail-img) {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.map-wrapper :deep(.provenance-detail-title) {
+  font-weight: 700;
+}
+
+.map-wrapper :deep(.provenance-detail-row) {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 4px 0;
+}
+
+.map-wrapper :deep(.provenance-detail-row .mdi) {
+  font-size: 18px;
+  margin-top: 2px;
+}
+
+.map-wrapper :deep(.provenance-detail-label) {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  opacity: 0.7;
+}
+
+.map-wrapper :deep(.provenance-detail-name) {
+  font-weight: 500;
+}
+
+.map-wrapper :deep(.leaflet-control-attribution) {
+  font-size: 10px;
+}
+</style>

src/components/provenance/ProvenanceRelationModal.vue

@@ -0,0 +1,145 @@
+<template>
+  <v-dialog
+    max-width="560"
+    :model-value="visible"
+    @update:model-value="onUpdateVisible"
+  >
+    <v-card v-if="relation || product">
+      <v-card-title class="d-flex align-center">
+        <v-icon class="mr-2" color="teal" icon="mdi-package-variant" />
+        <span class="font-weight-bold">{{ productName }}</span>
+      </v-card-title>
+      <v-divider />
+      <v-card-text>
+        <img
+          v-if="productImage"
+          alt="Imagen del producto"
+          class="provenance-image rounded-lg border mb-3"
+          :src="productImage"
+        >
+        <div
+          v-if="!hasLocation"
+          class="d-flex align-start mb-3"
+        >
+          <v-icon class="mr-3" color="grey" icon="mdi-map-marker-off" />
+          <div>
+            <div class="text-subtitle-2 font-weight-bold">
+              Geolocalización
+            </div>
+            <div class="text-body-1">
+              {{ locationNote }}
+            </div>
+          </div>
+        </div>
+        <div
+          v-for="row in rows"
+          :key="row.kind"
+          class="d-flex align-start mb-3"
+        >
+          <v-icon class="mr-3" :color="row.color" :icon="row.icon" />
+          <div>
+            <div class="text-subtitle-2 font-weight-bold">
+              {{ row.label }}
+            </div>
+            <div class="text-body-1">
+              {{ row.name }}
+            </div>
+            <div
+              v-for="detail in row.details"
+              :key="detail.label"
+              class="text-body-2 text-medium-emphasis"
+            >
+              {{ detail.label }}: {{ detail.value }}
+            </div>
+          </div>
+        </div>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn variant="text" @click="close">Cerrar</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+  import { computed } from 'vue'
+
+  const props = defineProps({
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    relation: {
+      type: Object,
+      default: null,
+    },
+    product: {
+      type: Object,
+      default: null,
+    },
+  })
+
+  const emit = defineEmits(['update:visible'])
+
+  const ENTITY_INFO = {
+    supplier: { label: 'Proveedor', icon: 'mdi-truck', color: 'blue' },
+    organization: { label: 'Organización', icon: 'mdi-domain', color: 'orange' },
+    municipality: { label: 'Municipio', icon: 'mdi-map-marker', color: 'green' },
+    department: { label: 'Departamento', icon: 'mdi-map', color: 'indigo' },
+    country: { label: 'País', icon: 'mdi-earth', color: 'purple' },
+  }
+
+  const productName = computed(() => props.product?.name || 'Producto')
+  const productImage = computed(() => props.product?.catalogue_images?.[0] || null)
+  const hasLocation = computed(() => !!(props.relation?.municipality || props.relation?.department))
+  const locationNote = computed(() => {
+    if (props.relation) return 'Aún sin geolocalización registrada.'
+    return 'Aún no se ha vinculado un proveedor a este producto.'
+  })
+
+  function entityDetails (kind, entity) {
+    const details = []
+    if (kind === 'supplier' || kind === 'organization') {
+      if (entity.description) details.push({ label: 'Descripción', value: entity.description })
+      if (entity.website) details.push({ label: 'Sitio web', value: entity.website })
+      if (entity.contact_email) details.push({ label: 'Correo', value: entity.contact_email })
+      if (entity.contact_phone) details.push({ label: 'Teléfono', value: entity.contact_phone })
+    }
+    return details
+  }
+
+  const rows = computed(() => {
+    const rel = props.relation || {}
+    return ['supplier', 'organization', 'municipality', 'department', 'country']
+      .filter(kind => rel[kind])
+      .map(kind => {
+        const info = ENTITY_INFO[kind]
+        return {
+          kind,
+          label: info.label,
+          icon: info.icon,
+          color: info.color,
+          name: rel[kind].name,
+          details: entityDetails(kind, rel[kind]),
+        }
+      })
+  })
+
+  function onUpdateVisible (value) {
+    emit('update:visible', value)
+  }
+
+  function close () {
+    emit('update:visible', false)
+  }
+</script>
+
+<style scoped>
+.provenance-image {
+  display: block;
+  max-height: 220px;
+  max-width: 100%;
+  object-fit: contain;
+}
+</style>

src/components/provenance/ProvenanceSection.vue

@@ -0,0 +1,77 @@
+<template>
+  <div v-if="provenance && provenance.length > 0">
+    <v-divider class="my-4" />
+    <div
+      class="d-flex align-center justify-space-between cursor-pointer"
+      data-test="provenance-toggle"
+      role="button"
+      @click="expanded = !expanded"
+    >
+      <h3 class="text-h6 font-weight-bold">
+        Origen de los productos
+      </h3>
+      <v-btn
+        data-test="provenance-toggle-button"
+        density="comfortable"
+        :icon="expanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+        variant="text"
+        @click.stop="expanded = !expanded"
+      />
+    </div>
+
+    <v-expand-transition>
+      <div v-if="expanded">
+        <p class="text-body-2 text-medium-emphasis mb-4">
+          Conoce quiénes producen los productos que compras y de qué territorios provienen.
+        </p>
+
+        <ProvenanceGraph :provenance="provenance" />
+      </div>
+    </v-expand-transition>
+
+    <v-divider class="my-4" />
+    <div
+      class="d-flex align-center justify-space-between cursor-pointer"
+      data-test="map-toggle"
+      role="button"
+      @click="mapExpanded = !mapExpanded"
+    >
+      <h3 class="text-h6 font-weight-bold">
+        Mapa de origen de los productos
+      </h3>
+      <v-btn
+        data-test="map-toggle-button"
+        density="comfortable"
+        :icon="mapExpanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+        variant="text"
+        @click.stop="mapExpanded = !mapExpanded"
+      />
+    </div>
+
+    <v-expand-transition>
+      <div v-if="mapExpanded">
+        <p class="text-body-2 text-medium-emphasis mb-4">
+          Recorrido de cada producto desde el municipio donde se produce hasta nuestra tienda.
+        </p>
+
+        <ProvenanceMap :provenance="provenance" />
+      </div>
+    </v-expand-transition>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import ProvenanceGraph from './ProvenanceGraph.vue'
+  import ProvenanceMap from './ProvenanceMap.vue'
+
+  defineProps({
+    provenance: {
+      type: Array,
+      default: null,
+    },
+  })
+
+  const expanded = ref(false)
+  const mapExpanded = ref(false)
+</script>

src/components/provenance/admin/GeographyManagement.vue

@@ -0,0 +1,687 @@
+<template>
+  <v-container fluid>
+    <h1 class="text-h4 mb-4">Gestión de Geografía</h1>
+
+    <v-tabs v-model="activeTab" color="primary">
+      <v-tab
+        data-testid="geo-tab-countries"
+        value="countries"
+      >
+        Países
+      </v-tab>
+      <v-tab
+        data-testid="geo-tab-departments"
+        value="departments"
+      >
+        Departamentos
+      </v-tab>
+      <v-tab
+        data-testid="geo-tab-municipalities"
+        value="municipalities"
+      >
+        Municipios
+      </v-tab>
+    </v-tabs>
+
+    <!-- Países -->
+    <v-row v-if="activeTab === 'countries'" class="mt-2">
+      <v-col class="text-right" cols="12">
+        <v-btn
+          color="primary"
+          data-testid="geo-country-create"
+          prepend-icon="mdi-plus"
+          @click="openCreateCountry"
+        >
+          Nuevo país
+        </v-btn>
+      </v-col>
+      <v-col cols="12">
+        <v-card>
+          <v-data-table
+            density="compact"
+            :headers="countryHeaders"
+            item-value="id"
+            :items="countries"
+            items-per-page="25"
+            :items-per-page-options="[10, 25, 50, 100]"
+            :loading="loading"
+          >
+            <template #item.actions="{ item }">
+              <v-btn
+                :data-testid="'geo-country-edit-' + item.id"
+                icon="mdi-pencil"
+                size="small"
+                variant="text"
+                @click="openEditCountry(item)"
+              />
+              <v-btn
+                color="error"
+                :data-testid="'geo-country-delete-' + item.id"
+                icon="mdi-delete"
+                size="small"
+                variant="text"
+                @click="openDeleteCountry(item)"
+              />
+            </template>
+            <template #loading>
+              <v-skeleton-loader type="table-row@10" />
+            </template>
+            <template #no-data>
+              <v-alert class="my-4" type="info" variant="tonal">
+                No hay países para mostrar
+              </v-alert>
+            </template>
+          </v-data-table>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <!-- Departamentos -->
+    <v-row v-if="activeTab === 'departments'" class="mt-2">
+      <v-col class="text-right" cols="12">
+        <v-btn
+          color="primary"
+          data-testid="geo-department-create"
+          prepend-icon="mdi-plus"
+          @click="openCreateDepartment"
+        >
+          Nuevo departamento
+        </v-btn>
+      </v-col>
+      <v-col cols="12">
+        <v-card>
+          <v-data-table
+            density="compact"
+            :headers="departmentHeaders"
+            item-value="id"
+            :items="departments"
+            items-per-page="25"
+            :items-per-page-options="[10, 25, 50, 100]"
+            :loading="loading"
+          >
+            <template #item.country="{ item }">
+              {{ item.country_detail?.name }}
+            </template>
+            <template #item.actions="{ item }">
+              <v-btn
+                :data-testid="'geo-department-edit-' + item.id"
+                icon="mdi-pencil"
+                size="small"
+                variant="text"
+                @click="openEditDepartment(item)"
+              />
+              <v-btn
+                color="error"
+                :data-testid="'geo-department-delete-' + item.id"
+                icon="mdi-delete"
+                size="small"
+                variant="text"
+                @click="openDeleteDepartment(item)"
+              />
+            </template>
+            <template #loading>
+              <v-skeleton-loader type="table-row@10" />
+            </template>
+            <template #no-data>
+              <v-alert class="my-4" type="info" variant="tonal">
+                No hay departamentos para mostrar
+              </v-alert>
+            </template>
+          </v-data-table>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <!-- Municipios -->
+    <v-row v-if="activeTab === 'municipalities'" class="mt-2">
+      <v-col class="text-right" cols="12">
+        <v-btn
+          color="primary"
+          data-testid="geo-municipality-create"
+          prepend-icon="mdi-plus"
+          @click="openCreateMunicipality"
+        >
+          Nuevo municipio
+        </v-btn>
+      </v-col>
+      <v-col cols="12">
+        <v-card>
+          <v-data-table
+            density="compact"
+            :headers="municipalityHeaders"
+            item-value="id"
+            :items="municipalities"
+            items-per-page="25"
+            :items-per-page-options="[10, 25, 50, 100]"
+            :loading="loading"
+          >
+            <template #item.department="{ item }">
+              {{ item.department_detail?.name }}
+            </template>
+            <template #item.country="{ item }">
+              {{ item.country_detail?.name }}
+            </template>
+            <template #item.actions="{ item }">
+              <v-btn
+                :data-testid="'geo-municipality-edit-' + item.id"
+                icon="mdi-pencil"
+                size="small"
+                variant="text"
+                @click="openEditMunicipality(item)"
+              />
+              <v-btn
+                color="error"
+                :data-testid="'geo-municipality-delete-' + item.id"
+                icon="mdi-delete"
+                size="small"
+                variant="text"
+                @click="openDeleteMunicipality(item)"
+              />
+            </template>
+            <template #loading>
+              <v-skeleton-loader type="table-row@10" />
+            </template>
+            <template #no-data>
+              <v-alert class="my-4" type="info" variant="tonal">
+                No hay municipios para mostrar
+              </v-alert>
+            </template>
+          </v-data-table>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <!-- Diálogo país -->
+    <v-dialog v-model="countryDialog.show" max-width="480">
+      <v-card>
+        <v-card-title>
+          {{ countryDialog.isEdit ? 'Editar país' : 'Nuevo país' }}
+        </v-card-title>
+        <v-card-text>
+          <v-form @submit.prevent="saveCountry">
+            <v-text-field
+              v-model="countryForm.name"
+              data-testid="geo-country-form-name"
+              label="Nombre"
+              required
+            />
+            <v-text-field
+              v-model="countryForm.code"
+              data-testid="geo-country-form-code"
+              label="Código (ISO)"
+              maxlength="3"
+              required
+            />
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="countryDialog.show = false">Cancelar</v-btn>
+          <v-btn
+            color="primary"
+            data-testid="geo-country-save"
+            :disabled="saving"
+            variant="elevated"
+            @click="saveCountry"
+          >
+            Guardar
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- Diálogo departamento -->
+    <v-dialog v-model="departmentDialog.show" max-width="480">
+      <v-card>
+        <v-card-title>
+          {{ departmentDialog.isEdit ? 'Editar departamento' : 'Nuevo departamento' }}
+        </v-card-title>
+        <v-card-text>
+          <v-form @submit.prevent="saveDepartment">
+            <v-text-field
+              v-model="departmentForm.name"
+              data-testid="geo-department-form-name"
+              label="Nombre"
+              required
+            />
+            <v-select
+              v-model="departmentForm.country"
+              data-testid="geo-department-form-country"
+              item-title="name"
+              item-value="id"
+              :items="countries"
+              label="País"
+              required
+            />
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="departmentDialog.show = false">Cancelar</v-btn>
+          <v-btn
+            color="primary"
+            data-testid="geo-department-save"
+            :disabled="saving"
+            variant="elevated"
+            @click="saveDepartment"
+          >
+            Guardar
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- Diálogo municipio -->
+    <v-dialog v-model="municipalityDialog.show" max-width="480">
+      <v-card>
+        <v-card-title>
+          {{ municipalityDialog.isEdit ? 'Editar municipio' : 'Nuevo municipio' }}
+        </v-card-title>
+        <v-card-text>
+          <v-form @submit.prevent="saveMunicipality">
+            <v-text-field
+              v-model="municipalityForm.name"
+              data-testid="geo-municipality-form-name"
+              label="Nombre"
+              required
+            />
+            <v-autocomplete
+              v-model="municipalityForm.department"
+              data-testid="geo-municipality-form-department"
+              item-title="name"
+              item-value="id"
+              :items="departmentItems"
+              label="Departamento"
+              required
+              :search-input="departmentSearch"
+            />
+            <v-select
+              v-model="municipalityForm.country"
+              data-testid="geo-municipality-form-country"
+              item-title="name"
+              item-value="id"
+              :items="countries"
+              label="País"
+              required
+            />
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="municipalityDialog.show = false">Cancelar</v-btn>
+          <v-btn
+            color="primary"
+            data-testid="geo-municipality-save"
+            :disabled="saving"
+            variant="elevated"
+            @click="saveMunicipality"
+          >
+            Guardar
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="deleteCountryDialog" max-width="420">
+      <v-card>
+        <v-card-title>Eliminar país</v-card-title>
+        <v-card-text>
+          ¿Está seguro de eliminar "{{ deleteCountryTarget?.name }}"?
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="deleteCountryDialog = false">Cancelar</v-btn>
+          <v-btn
+            color="error"
+            :disabled="saving"
+            variant="elevated"
+            @click="confirmDeleteCountry"
+          >
+            Eliminar
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="deleteDepartmentDialog" max-width="420">
+      <v-card>
+        <v-card-title>Eliminar departamento</v-card-title>
+        <v-card-text>
+          ¿Está seguro de eliminar "{{ deleteDepartmentTarget?.name }}"?
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="deleteDepartmentDialog = false">Cancelar</v-btn>
+          <v-btn
+            color="error"
+            :disabled="saving"
+            variant="elevated"
+            @click="confirmDeleteDepartment"
+          >
+            Eliminar
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="deleteMunicipalityDialog" max-width="420">
+      <v-card>
+        <v-card-title>Eliminar municipio</v-card-title>
+        <v-card-text>
+          ¿Está seguro de eliminar "{{ deleteMunicipalityTarget?.name }}"?
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="deleteMunicipalityDialog = false">Cancelar</v-btn>
+          <v-btn
+            color="error"
+            :disabled="saving"
+            variant="elevated"
+            @click="confirmDeleteMunicipality"
+          >
+            Eliminar
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-snackbar
+      v-model="snackbar.show"
+      :color="snackbar.color"
+      location="top"
+      :timeout="3000"
+    >
+      {{ snackbar.message }}
+      <template #actions>
+        <v-btn variant="text" @click="snackbar.show = false">Cerrar</v-btn>
+      </template>
+    </v-snackbar>
+  </v-container>
+</template>
+
+<script setup>
+  import { computed, inject, onMounted, ref, watch } from 'vue'
+
+  const api = inject('api')
+
+  const activeTab = ref('countries')
+  const countries = ref([])
+  const departments = ref([])
+  const municipalities = ref([])
+  const loading = ref(false)
+  const saving = ref(false)
+  const departmentSearch = ref('')
+  const snackbar = ref({ show: false, message: '', color: 'success' })
+
+  const countryHeaders = [
+    { title: 'ID', key: 'id' },
+    { title: 'Nombre', key: 'name' },
+    { title: 'Código', key: 'code' },
+    { title: 'Acciones', key: 'actions', sortable: false },
+  ]
+
+  const departmentHeaders = [
+    { title: 'ID', key: 'id' },
+    { title: 'Nombre', key: 'name' },
+    { title: 'País', key: 'country' },
+    { title: 'Acciones', key: 'actions', sortable: false },
+  ]
+
+  const municipalityHeaders = [
+    { title: 'ID', key: 'id' },
+    { title: 'Nombre', key: 'name' },
+    { title: 'Departamento', key: 'department' },
+    { title: 'País', key: 'country' },
+    { title: 'Acciones', key: 'actions', sortable: false },
+  ]
+
+  const countryDialog = ref({ show: false, isEdit: false, item: null })
+  const countryForm = ref({ name: '', code: '' })
+
+  const departmentDialog = ref({ show: false, isEdit: false, item: null })
+  const departmentForm = ref({ name: '', country: null })
+
+  const municipalityDialog = ref({ show: false, isEdit: false, item: null })
+  const municipalityForm = ref({ name: '', department: null, country: null })
+
+  const departmentItems = computed(() => {
+    const query = departmentSearch.value.trim().toLowerCase()
+    let filtered = departments.value
+    if (query) {
+      filtered = departments.value.filter(department => {
+        return (department.name || '').toLowerCase().includes(query)
+      })
+    }
+    const selectedId = Number(municipalityForm.value.department)
+    const hasSelected = filtered.some(department => department.id === selectedId)
+    if (selectedId && !hasSelected) {
+      const selected = departments.value.find(department => department.id === selectedId)
+      if (selected) filtered = [selected, ...filtered]
+    }
+    return filtered
+  })
+
+  async function loadCountries () {
+    loading.value = true
+    try {
+      countries.value = await api.getCountries()
+    } catch (error) {
+      console.error('Error al cargar países:', error)
+      showSnackbar('Error al cargar países', 'error')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function loadDepartments () {
+    loading.value = true
+    try {
+      departments.value = await api.getDepartments()
+    } catch (error) {
+      console.error('Error al cargar departamentos:', error)
+      showSnackbar('Error al cargar departamentos', 'error')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function loadMunicipalities () {
+    loading.value = true
+    try {
+      municipalities.value = await api.getMunicipalities()
+    } catch (error) {
+      console.error('Error al cargar municipios:', error)
+      showSnackbar('Error al cargar municipios', 'error')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function openCreateCountry () {
+    countryForm.value = { name: '', code: '' }
+    countryDialog.value = { show: true, isEdit: false, item: null }
+  }
+
+  function openEditCountry (item) {
+    countryForm.value = { name: item.name, code: item.code }
+    countryDialog.value = { show: true, isEdit: true, item }
+  }
+
+  async function saveCountry () {
+    saving.value = true
+    try {
+      if (countryDialog.value.isEdit) {
+        await api.updateCountry(countryDialog.value.item.id, countryForm.value)
+        showSnackbar('País actualizado', 'success')
+      } else {
+        await api.createCountry(countryForm.value)
+        showSnackbar('País creado', 'success')
+      }
+      countryDialog.value.show = false
+      await loadCountries()
+    } catch (error) {
+      console.error('Error al guardar país:', error)
+      showSnackbar('Error al guardar país', 'error')
+    } finally {
+      saving.value = false
+    }
+  }
+
+  function openDeleteCountry (item) {
+    deleteCountryTarget.value = item
+    deleteCountryDialog.value = true
+  }
+
+  const deleteCountryDialog = ref(false)
+  const deleteCountryTarget = ref(null)
+
+  async function confirmDeleteCountry () {
+    saving.value = true
+    try {
+      await api.deleteCountry(deleteCountryTarget.value.id)
+      deleteCountryDialog.value = false
+      showSnackbar('País eliminado', 'success')
+      await loadCountries()
+    } catch (error) {
+      console.error('Error al eliminar país:', error)
+      showSnackbar('Error al eliminar país', 'error')
+    } finally {
+      saving.value = false
+    }
+  }
+
+  function openCreateDepartment () {
+    departmentForm.value = { name: '', country: null }
+    departmentDialog.value = { show: true, isEdit: false, item: null }
+  }
+
+  function openEditDepartment (item) {
+    departmentForm.value = { name: item.name, country: item.country }
+    departmentDialog.value = { show: true, isEdit: true, item }
+  }
+
+  async function saveDepartment () {
+    saving.value = true
+    try {
+      if (departmentDialog.value.isEdit) {
+        await api.updateDepartment(departmentDialog.value.item.id, departmentForm.value)
+        showSnackbar('Departamento actualizado', 'success')
+      } else {
+        await api.createDepartment(departmentForm.value)
+        showSnackbar('Departamento creado', 'success')
+      }
+      departmentDialog.value.show = false
+      await loadDepartments()
+    } catch (error) {
+      console.error('Error al guardar departamento:', error)
+      showSnackbar('Error al guardar departamento', 'error')
+    } finally {
+      saving.value = false
+    }
+  }
+
+  const deleteDepartmentDialog = ref(false)
+  const deleteDepartmentTarget = ref(null)
+
+  function openDeleteDepartment (item) {
+    deleteDepartmentTarget.value = item
+    deleteDepartmentDialog.value = true
+  }
+
+  async function confirmDeleteDepartment () {
+    saving.value = true
+    try {
+      await api.deleteDepartment(deleteDepartmentTarget.value.id)
+      deleteDepartmentDialog.value = false
+      showSnackbar('Departamento eliminado', 'success')
+      await loadDepartments()
+    } catch (error) {
+      console.error('Error al eliminar departamento:', error)
+      showSnackbar('Error al eliminar departamento', 'error')
+    } finally {
+      saving.value = false
+    }
+  }
+
+  function openCreateMunicipality () {
+    municipalityForm.value = { name: '', department: null, country: null }
+    municipalityDialog.value = { show: true, isEdit: false, item: null }
+  }
+
+  function openEditMunicipality (item) {
+    municipalityForm.value = {
+      name: item.name,
+      department: item.department,
+      country: item.country,
+    }
+    municipalityDialog.value = { show: true, isEdit: true, item }
+  }
+
+  watch(
+    () => municipalityForm.value.department,
+    departmentId => {
+      if (!departmentId) return
+      const department = departments.value.find(item => item.id === departmentId)
+      if (department && department.country) {
+        municipalityForm.value.country = department.country
+      }
+    }
+  )
+
+  async function saveMunicipality () {
+    saving.value = true
+    try {
+      if (municipalityDialog.value.isEdit) {
+        await api.updateMunicipality(municipalityDialog.value.item.id, municipalityForm.value)
+        showSnackbar('Municipio actualizado', 'success')
+      } else {
+        await api.createMunicipality(municipalityForm.value)
+        showSnackbar('Municipio creado', 'success')
+      }
+      municipalityDialog.value.show = false
+      await loadMunicipalities()
+    } catch (error) {
+      console.error('Error al guardar municipio:', error)
+      showSnackbar('Error al guardar municipio', 'error')
+    } finally {
+      saving.value = false
+    }
+  }
+
+  const deleteMunicipalityDialog = ref(false)
+  const deleteMunicipalityTarget = ref(null)
+
+  function openDeleteMunicipality (item) {
+    deleteMunicipalityTarget.value = item
+    deleteMunicipalityDialog.value = true
+  }
+
+  async function confirmDeleteMunicipality () {
+    saving.value = true
+    try {
+      await api.deleteMunicipality(deleteMunicipalityTarget.value.id)
+      deleteMunicipalityDialog.value = false
+      showSnackbar('Municipio eliminado', 'success')
+      await loadMunicipalities()
+    } catch (error) {
+      console.error('Error al eliminar municipio:', error)
+      showSnackbar('Error al eliminar municipio', 'error')
+    } finally {
+      saving.value = false
+    }
+  }
+
+  function showSnackbar (message, color) {
+    snackbar.value = { show: true, message, color }
+  }
+
+  watch(activeTab, tab => {
+    if (tab === 'departments') loadDepartments()
+    if (tab === 'municipalities') {
+      loadMunicipalities()
+      loadDepartments()
+    }
+  })
+
+  onMounted(loadCountries)
+</script>

src/components/provenance/admin/OrganizationsManagement.vue

@@ -0,0 +1,299 @@
+<template>
+  <v-container fluid>
+    <v-row align="center">
+      <v-col cols="12" md="6">
+        <h1 class="text-h4">Gestión de Organizaciones</h1>
+      </v-col>
+      <v-col class="text-md-right" cols="12" md="6">
+        <v-btn
+          color="primary"
+          data-testid="org-create"
+          prepend-icon="mdi-plus"
+          @click="openCreate"
+        >
+          Nueva organización
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12" md="6">
+        <v-text-field
+          v-model="searchQuery"
+          clearable
+          data-testid="org-search"
+          density="compact"
+          hide-details
+          label="Buscar por nombre"
+          prepend-inner-icon="mdi-magnify"
+          variant="outlined"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12">
+        <v-card>
+          <v-data-table
+            density="compact"
+            :headers="headers"
+            item-value="id"
+            :items="filteredOrganizations"
+            items-per-page="25"
+            :items-per-page-options="[10, 25, 50, 100]"
+            :loading="loading"
+          >
+            <template #item.website="{ item }">
+              <a
+                v-if="item.website"
+                :href="item.website"
+                rel="noopener"
+                target="_blank"
+              >
+                {{ item.website }}
+              </a>
+            </template>
+            <template #item.actions="{ item }">
+              <v-btn
+                :data-testid="'org-edit-' + item.id"
+                icon="mdi-pencil"
+                size="small"
+                variant="text"
+                @click="openEdit(item)"
+              />
+              <v-btn
+                color="error"
+                :data-testid="'org-delete-' + item.id"
+                icon="mdi-delete"
+                size="small"
+                variant="text"
+                @click="openDelete(item)"
+              />
+            </template>
+            <template #loading>
+              <v-skeleton-loader type="table-row@10" />
+            </template>
+            <template #no-data>
+              <v-alert class="my-4" type="info" variant="tonal">
+                No hay organizaciones para mostrar
+              </v-alert>
+            </template>
+          </v-data-table>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <v-dialog v-model="dialog.show" max-width="520">
+      <v-card>
+        <v-card-title>
+          {{ dialog.isEdit ? 'Editar organización' : 'Nueva organización' }}
+        </v-card-title>
+        <v-card-text>
+          <v-form @submit.prevent="save">
+            <v-text-field
+              v-model="formData.name"
+              data-testid="org-form-name"
+              label="Nombre"
+              required
+            />
+            <v-textarea
+              v-model="formData.description"
+              data-testid="org-form-description"
+              label="Descripción"
+              rows="3"
+            />
+            <v-text-field
+              v-model="formData.website"
+              data-testid="org-form-website"
+              label="Sitio web"
+            />
+            <v-text-field
+              v-model="formData.contact_email"
+              data-testid="org-form-email"
+              label="Correo de contacto"
+            />
+            <v-text-field
+              v-model="formData.contact_phone"
+              data-testid="org-form-phone"
+              label="Teléfono de contacto"
+            />
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="dialog.show = false">Cancelar</v-btn>
+          <v-btn
+            color="primary"
+            data-testid="org-save"
+            :disabled="saving"
+            variant="elevated"
+            @click="save"
+          >
+            Guardar
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="deleteDialog.show" max-width="420">
+      <v-card>
+        <v-card-title>Eliminar organización</v-card-title>
+        <v-card-text>
+          ¿Está seguro de eliminar "{{ deleteDialog.item?.name }}"?
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="deleteDialog.show = false">Cancelar</v-btn>
+          <v-btn
+            color="error"
+            data-testid="org-confirm-delete"
+            :disabled="saving"
+            variant="elevated"
+            @click="confirmDelete"
+          >
+            Eliminar
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-snackbar
+      v-model="snackbar.show"
+      :color="snackbar.color"
+      location="top"
+      :timeout="3000"
+    >
+      {{ snackbar.message }}
+      <template #actions>
+        <v-btn variant="text" @click="snackbar.show = false">Cerrar</v-btn>
+      </template>
+    </v-snackbar>
+  </v-container>
+</template>
+
+<script setup>
+  import { computed, inject, onMounted, ref } from 'vue'
+
+  const api = inject('api')
+
+  const organizations = ref([])
+  const loading = ref(false)
+  const saving = ref(false)
+  const searchQuery = ref('')
+  const snackbar = ref({ show: false, message: '', color: 'success' })
+  const dialog = ref({ show: false, isEdit: false, item: null })
+  const deleteDialog = ref({ show: false, item: null })
+
+  const headers = [
+    { title: 'ID', key: 'id' },
+    { title: 'Nombre', key: 'name' },
+    { title: 'Descripción', key: 'description' },
+    { title: 'Sitio web', key: 'website' },
+    { title: 'Correo', key: 'contact_email' },
+    { title: 'Teléfono', key: 'contact_phone' },
+    { title: 'Acciones', key: 'actions', sortable: false },
+  ]
+
+  const emptyForm = () => ({
+    name: '',
+    description: '',
+    website: '',
+    contact_email: '',
+    contact_phone: '',
+  })
+
+  const formData = ref(emptyForm())
+
+  const filteredOrganizations = computed(() => {
+    const query = searchQuery.value.trim().toLowerCase()
+    if (!query) return organizations.value
+    return organizations.value.filter(organization => {
+      return (organization.name || '').toLowerCase().includes(query)
+    })
+  })
+
+  async function load () {
+    loading.value = true
+    try {
+      organizations.value = await api.getOrganizations()
+    } catch (error) {
+      console.error('Error al cargar organizaciones:', error)
+      showSnackbar('Error al cargar organizaciones', 'error')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function openCreate () {
+    formData.value = emptyForm()
+    dialog.value = { show: true, isEdit: false, item: null }
+  }
+
+  function openEdit (item) {
+    formData.value = {
+      name: item.name,
+      description: item.description,
+      website: item.website,
+      contact_email: item.contact_email,
+      contact_phone: item.contact_phone,
+    }
+    dialog.value = { show: true, isEdit: true, item }
+  }
+
+  async function save () {
+    saving.value = true
+    try {
+      if (dialog.value.isEdit) {
+        await api.updateOrganization(dialog.value.item.id, formData.value)
+        showSnackbar('Organización actualizada', 'success')
+      } else {
+        await api.createOrganization(formData.value)
+        showSnackbar('Organización creada', 'success')
+      }
+      dialog.value.show = false
+      await load()
+    } catch (error) {
+      console.error('Error al guardar organización:', error)
+      showSnackbar('Error al guardar organización', 'error')
+    } finally {
+      saving.value = false
+    }
+  }
+
+  function openDelete (item) {
+    deleteDialog.value = { show: true, item }
+  }
+
+  async function confirmDelete () {
+    saving.value = true
+    try {
+      await api.deleteOrganization(deleteDialog.value.item.id)
+      deleteDialog.value.show = false
+      showSnackbar('Organización eliminada', 'success')
+      await load()
+    } catch (error) {
+      console.error('Error al eliminar organización:', error)
+      showSnackbar('Error al eliminar organización', 'error')
+    } finally {
+      saving.value = false
+    }
+  }
+
+  function showSnackbar (message, color) {
+    snackbar.value = { show: true, message, color }
+  }
+
+  onMounted(load)
+</script>
+
+<style scoped>
+.text-md-right {
+  text-align: right;
+}
+
+@media (max-width: 960px) {
+  .text-md-right {
+    text-align: left;
+  }
+}
+</style>

src/components/provenance/admin/SupplierLinkDialog.vue

@@ -0,0 +1,126 @@
+<template>
+  <v-dialog
+    max-width="560"
+    :model-value="visible"
+    @update:model-value="onUpdateVisible"
+  >
+    <v-card>
+      <v-card-title>Proveedores del producto</v-card-title>
+      <v-card-text>
+        <p v-if="product" class="text-subtitle-1 mb-3">
+          {{ product.name }}
+        </p>
+        <v-autocomplete
+          v-model="selectedIds"
+          chips
+          closable-chips
+          item-title="name"
+          item-value="id"
+          :items="supplierItems"
+          label="Proveedores"
+          multiple
+          :search-input="searchQuery"
+        />
+        <v-chip
+          v-if="selectedIds.length > 0"
+          class="mt-3"
+          color="primary"
+          variant="tonal"
+        >
+          Seleccionados ({{ selectedIds.length }})
+        </v-chip>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn variant="text" @click="close">Cancelar</v-btn>
+        <v-btn
+          color="primary"
+          data-testid="supplier-link-save"
+          :disabled="saving"
+          variant="elevated"
+          @click="save"
+        >
+          Guardar
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+  import { computed, inject, ref, watch } from 'vue'
+
+  const props = defineProps({
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    product: {
+      type: Object,
+      default: null,
+    },
+  })
+
+  const emit = defineEmits(['update:visible'])
+
+  const api = inject('api')
+  const suppliers = ref([])
+  const selectedIds = ref([])
+  const searchQuery = ref('')
+  const saving = ref(false)
+
+  const supplierItems = computed(() => {
+    const query = searchQuery.value.trim().toLowerCase()
+    let filtered = suppliers.value
+    if (query) {
+      filtered = suppliers.value.filter(supplier => {
+        return (supplier.name || '').toLowerCase().includes(query)
+      })
+    }
+    const selected = selectedIds.value.map(Number)
+    for (const supplier of suppliers.value) {
+      const isSelected = selected.includes(supplier.id)
+      const alreadyIncluded = filtered.some(item => item.id === supplier.id)
+      if (isSelected && !alreadyIncluded) filtered = [supplier, ...filtered]
+    }
+    return filtered
+  })
+
+  async function load () {
+    suppliers.value = await api.getSuppliers()
+    if (props.product) {
+      const detail = await api.getProduct(props.product.id)
+      selectedIds.value = detail.suppliers || []
+    } else {
+      selectedIds.value = []
+    }
+  }
+
+  watch(
+    () => props.visible,
+    async isVisible => {
+      if (isVisible) await load()
+    },
+    { immediate: true }
+  )
+
+  async function save () {
+    saving.value = true
+    try {
+      await api.updateProduct(props.product.id, { suppliers: selectedIds.value })
+      close()
+    } catch (error) {
+      console.error('Error al guardar proveedores del producto:', error)
+    } finally {
+      saving.value = false
+    }
+  }
+
+  function onUpdateVisible (value) {
+    emit('update:visible', value)
+  }
+
+  function close () {
+    emit('update:visible', false)
+  }
+</script>

src/components/provenance/admin/SuppliersManagement.vue

@@ -0,0 +1,347 @@
+<template>
+  <v-container fluid>
+    <v-row align="center">
+      <v-col cols="12" md="6">
+        <h1 class="text-h4">Gestión de Proveedores</h1>
+      </v-col>
+      <v-col class="text-md-right" cols="12" md="6">
+        <v-btn
+          color="primary"
+          data-testid="supplier-create"
+          prepend-icon="mdi-plus"
+          @click="openCreate"
+        >
+          Nuevo proveedor
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12" md="6">
+        <v-text-field
+          v-model="searchQuery"
+          clearable
+          data-testid="supplier-search"
+          density="compact"
+          hide-details
+          label="Buscar por nombre"
+          prepend-inner-icon="mdi-magnify"
+          variant="outlined"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12">
+        <v-card>
+          <v-data-table
+            density="compact"
+            :headers="headers"
+            item-value="id"
+            :items="filteredSuppliers"
+            items-per-page="25"
+            :items-per-page-options="[10, 25, 50, 100]"
+            :loading="loading"
+          >
+            <template #item.organization="{ item }">
+              {{ item.organization_detail?.name }}
+            </template>
+            <template #item.municipality="{ item }">
+              {{ item.municipality_detail?.name }}
+            </template>
+            <template #item.actions="{ item }">
+              <v-btn
+                :data-testid="'supplier-edit-' + item.id"
+                icon="mdi-pencil"
+                size="small"
+                variant="text"
+                @click="openEdit(item)"
+              />
+              <v-btn
+                color="error"
+                :data-testid="'supplier-delete-' + item.id"
+                icon="mdi-delete"
+                size="small"
+                variant="text"
+                @click="openDelete(item)"
+              />
+            </template>
+            <template #loading>
+              <v-skeleton-loader type="table-row@10" />
+            </template>
+            <template #no-data>
+              <v-alert class="my-4" type="info" variant="tonal">
+                No hay proveedores para mostrar
+              </v-alert>
+            </template>
+          </v-data-table>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <v-dialog v-model="dialog.show" max-width="560">
+      <v-card>
+        <v-card-title>
+          {{ dialog.isEdit ? 'Editar proveedor' : 'Nuevo proveedor' }}
+        </v-card-title>
+        <v-card-text>
+          <v-form @submit.prevent="save">
+            <v-text-field
+              v-model="formData.name"
+              data-testid="supplier-form-name"
+              label="Nombre"
+              required
+            />
+            <v-textarea
+              v-model="formData.description"
+              data-testid="supplier-form-description"
+              label="Descripción"
+              rows="3"
+            />
+            <v-select
+              v-model="formData.organization"
+              clearable
+              data-testid="supplier-form-organization"
+              item-title="name"
+              item-value="id"
+              :items="organizations"
+              label="Organización"
+            />
+            <v-autocomplete
+              v-model="formData.municipality"
+              clearable
+              data-testid="supplier-form-municipality"
+              :item-title="municipalityItemTitle"
+              item-value="id"
+              :items="municipalityItems"
+              label="Municipio"
+              :search-input="municipalitySearch"
+            />
+            <v-text-field
+              v-model="formData.contact_email"
+              data-testid="supplier-form-email"
+              label="Correo de contacto"
+            />
+            <v-text-field
+              v-model="formData.contact_phone"
+              data-testid="supplier-form-phone"
+              label="Teléfono de contacto"
+            />
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="dialog.show = false">Cancelar</v-btn>
+          <v-btn
+            color="primary"
+            data-testid="supplier-save"
+            :disabled="saving"
+            variant="elevated"
+            @click="save"
+          >
+            Guardar
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="deleteDialog.show" max-width="420">
+      <v-card>
+        <v-card-title>Eliminar proveedor</v-card-title>
+        <v-card-text>
+          ¿Está seguro de eliminar "{{ deleteDialog.item?.name }}"?
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" @click="deleteDialog.show = false">Cancelar</v-btn>
+          <v-btn
+            color="error"
+            data-testid="supplier-confirm-delete"
+            :disabled="saving"
+            variant="elevated"
+            @click="confirmDelete"
+          >
+            Eliminar
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-snackbar
+      v-model="snackbar.show"
+      :color="snackbar.color"
+      location="top"
+      :timeout="3000"
+    >
+      {{ snackbar.message }}
+      <template #actions>
+        <v-btn variant="text" @click="snackbar.show = false">Cerrar</v-btn>
+      </template>
+    </v-snackbar>
+  </v-container>
+</template>
+
+<script setup>
+  import { computed, inject, onMounted, ref } from 'vue'
+
+  const api = inject('api')
+
+  const suppliers = ref([])
+  const organizations = ref([])
+  const municipalities = ref([])
+  const departments = ref([])
+  const loading = ref(false)
+  const saving = ref(false)
+  const searchQuery = ref('')
+  const municipalitySearch = ref('')
+  const snackbar = ref({ show: false, message: '', color: 'success' })
+  const dialog = ref({ show: false, isEdit: false, item: null })
+  const deleteDialog = ref({ show: false, item: null })
+
+  const headers = [
+    { title: 'ID', key: 'id' },
+    { title: 'Nombre', key: 'name' },
+    { title: 'Organización', key: 'organization' },
+    { title: 'Municipio', key: 'municipality' },
+    { title: 'Correo', key: 'contact_email' },
+    { title: 'Teléfono', key: 'contact_phone' },
+    { title: 'Acciones', key: 'actions', sortable: false },
+  ]
+
+  const emptyForm = () => ({
+    name: '',
+    description: '',
+    organization: null,
+    municipality: null,
+    contact_email: '',
+    contact_phone: '',
+  })
+
+  const formData = ref(emptyForm())
+
+  const filteredSuppliers = computed(() => {
+    const query = searchQuery.value.trim().toLowerCase()
+    if (!query) return suppliers.value
+    return suppliers.value.filter(supplier => {
+      return (supplier.name || '').toLowerCase().includes(query)
+    })
+  })
+
+  function municipalityItemTitle (item) {
+    const department = departments.value.find(department => department.id === item.department)
+    if (!department) return item.name || ''
+    return `${item.name} (${department.name})`
+  }
+
+  const municipalityItems = computed(() => {
+    const query = municipalitySearch.value.trim().toLowerCase()
+    let filtered = municipalities.value
+    if (query) {
+      filtered = municipalities.value.filter(municipality => {
+        return municipalityItemTitle(municipality).toLowerCase().includes(query)
+      })
+    }
+    const selectedId = Number(formData.value.municipality)
+    const hasSelected = filtered.some(municipality => municipality.id === selectedId)
+    if (selectedId && !hasSelected) {
+      const selected = municipalities.value.find(municipality => municipality.id === selectedId)
+      if (selected) filtered = [selected, ...filtered]
+    }
+    return filtered
+  })
+
+  async function load () {
+    loading.value = true
+    try {
+      const [suppliersData, organizationsData, municipalitiesData, departmentsData] = await Promise.all([
+        api.getSuppliers(),
+        api.getOrganizations(),
+        api.getMunicipalities(),
+        api.getDepartments(),
+      ])
+      suppliers.value = suppliersData
+      organizations.value = organizationsData
+      municipalities.value = municipalitiesData
+      departments.value = departmentsData
+    } catch (error) {
+      console.error('Error al cargar proveedores:', error)
+      showSnackbar('Error al cargar proveedores', 'error')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function openCreate () {
+    formData.value = emptyForm()
+    dialog.value = { show: true, isEdit: false, item: null }
+  }
+
+  function openEdit (item) {
+    formData.value = {
+      name: item.name,
+      description: item.description,
+      organization: item.organization,
+      municipality: item.municipality,
+      contact_email: item.contact_email,
+      contact_phone: item.contact_phone,
+    }
+    dialog.value = { show: true, isEdit: true, item }
+  }
+
+  async function save () {
+    saving.value = true
+    try {
+      if (dialog.value.isEdit) {
+        await api.updateSupplier(dialog.value.item.id, formData.value)
+        showSnackbar('Proveedor actualizado', 'success')
+      } else {
+        await api.createSupplier(formData.value)
+        showSnackbar('Proveedor creado', 'success')
+      }
+      dialog.value.show = false
+      await load()
+    } catch (error) {
+      console.error('Error al guardar proveedor:', error)
+      showSnackbar('Error al guardar proveedor', 'error')
+    } finally {
+      saving.value = false
+    }
+  }
+
+  function openDelete (item) {
+    deleteDialog.value = { show: true, item }
+  }
+
+  async function confirmDelete () {
+    saving.value = true
+    try {
+      await api.deleteSupplier(deleteDialog.value.item.id)
+      deleteDialog.value.show = false
+      showSnackbar('Proveedor eliminado', 'success')
+      await load()
+    } catch (error) {
+      console.error('Error al eliminar proveedor:', error)
+      showSnackbar('Error al eliminar proveedor', 'error')
+    } finally {
+      saving.value = false
+    }
+  }
+
+  function showSnackbar (message, color) {
+    snackbar.value = { show: true, message, color }
+  }
+
+  onMounted(load)
+</script>
+
+<style scoped>
+.text-md-right {
+  text-align: right;
+}
+
+@media (max-width: 960px) {
+  .text-md-right {
+    text-align: left;
+  }
+}
+</style>

src/components/provenance/provenance-graph.js

@@ -0,0 +1,145 @@
+/**
+ * Builders de grafos de provenance (específicos del dominio).
+ *
+ * Convierten el payload `product_provenance` del resumen de compra/pedido en
+ * un grafo con la semántica de certeza:
+ *   - Arista cierta (continua): el destino es inequívoco.
+ *   - Arista dudosa (discontinua): el destino es una posibilidad entre varias.
+ *   - Con varios proveedores para un producto se inserta un nodo de disyunción
+ *     (junction): sólida hasta él y discontinua hacia cada proveedor.
+ *
+ * `buildProvenanceGraph` permite elegir los niveles a graficar
+ * (product, supplier, organization, municipality, department, country);
+ * los niveles no solicitados se omiten conectando el nivel previo con el
+ * siguiente.
+ *
+ * El modelo devuelto es agnóstico de la herramienta de renderizado:
+ *   node: { id, kind, label, image, entity }
+ *   edge: { from, to, certain }
+ */
+
+const DEFAULT_KINDS = ['product', 'supplier']
+const TERRITORY_ORDER = ['municipality', 'department', 'country']
+
+function makeCollector () {
+  const nodes = []
+  const edges = []
+  const seen = new Map()
+  const edgeSeen = new Map()
+  return {
+    nodes,
+    edges,
+    addNode (kind, entity) {
+      const id = `${kind}:${entity.id}`
+      if (!seen.has(id)) {
+        const node = {
+          id,
+          kind,
+          label: entity.name || '',
+          image: entity.catalogue_images?.[0] || null,
+          entity: { ...entity, kind },
+        }
+        seen.set(id, node)
+        nodes.push(node)
+      }
+      return seen.get(id)
+    },
+    addEdge (from, to, certain) {
+      const key = `${from}\u0000${to}`
+      if (edgeSeen.has(key)) {
+        edgeSeen.get(key).certain = edgeSeen.get(key).certain && Boolean(certain)
+        return
+      }
+      const edge = { from, to, certain: Boolean(certain) }
+      edgeSeen.set(key, edge)
+      edges.push(edge)
+    },
+  }
+}
+
+function distinctValues (items) {
+  const seen = new Map()
+  for (const item of items) {
+    if (item && !seen.has(item.id)) seen.set(item.id, item)
+  }
+  return [...seen.values()]
+}
+
+function isCertain (values) {
+  return values.length <= 1
+}
+
+function wirePath (collector, path, certainties) {
+  for (let index = 0; index < path.length - 1; index++) {
+    const to = path[index + 1]
+    const kind = to.split(':')[0]
+    collector.addEdge(path[index], to, certainties[kind])
+  }
+}
+
+export function buildProvenanceGraph (provenance, kinds = DEFAULT_KINDS) {
+  const active = new Set(kinds)
+  const collector = makeCollector()
+
+  for (const entry of provenance || []) {
+    if (!entry.product) continue
+    const relations = (entry.suppliers || []).filter(rel => rel.supplier)
+    if (relations.length === 0) continue
+
+    const product = active.has('product') ? collector.addNode('product', entry.product) : null
+    const suppliersActive = active.has('supplier')
+
+    const certainties = {
+      municipality: isCertain(distinctValues(relations.map(rel => rel.municipality))),
+      department: isCertain(distinctValues(relations.map(rel => rel.department))),
+      country: isCertain(distinctValues(relations.map(rel => rel.country))),
+      organization: isCertain(distinctValues(relations.map(rel => rel.organization))),
+    }
+
+    for (const rel of relations) {
+      if (suppliersActive) collector.addNode('supplier', rel.supplier)
+      if (active.has('municipality') && rel.municipality) collector.addNode('municipality', rel.municipality)
+      if (active.has('department') && rel.department) collector.addNode('department', rel.department)
+      if (active.has('country') && rel.country) collector.addNode('country', rel.country)
+      if (active.has('organization') && rel.organization) collector.addNode('organization', rel.organization)
+    }
+
+    if (suppliersActive && product) {
+      if (relations.length === 1) {
+        collector.addEdge(product.id, `supplier:${relations[0].supplier.id}`, true)
+      } else {
+        const junction = collector.addNode('junction', { id: entry.product.id, name: '' })
+        collector.addEdge(product.id, junction.id, true)
+        for (const rel of relations) {
+          collector.addEdge(junction.id, `supplier:${rel.supplier.id}`, false)
+        }
+      }
+    }
+
+    for (const rel of relations) {
+      const path = []
+      if (suppliersActive) {
+        path.push(`supplier:${rel.supplier.id}`)
+      } else if (product) {
+        path.push(product.id)
+      }
+      for (const level of TERRITORY_ORDER) {
+        if (active.has(level) && rel[level]) path.push(`${level}:${rel[level].id}`)
+      }
+      wirePath(collector, path, certainties)
+    }
+
+    if (active.has('organization')) {
+      for (const rel of relations) {
+        if (!rel.organization) continue
+        const source = suppliersActive ? `supplier:${rel.supplier.id}` : (product ? product.id : null)
+        if (source) collector.addEdge(source, `organization:${rel.organization.id}`, certainties.organization)
+      }
+    }
+  }
+  return { nodes: collector.nodes, edges: collector.edges }
+}
+
+export function hasAnySupplier (provenance) {
+  return (provenance || []).some(entry => (entry.suppliers || []).length > 0)
+}

src/components/provenance/provenance-vis.js

@@ -0,0 +1,80 @@
+/**
+ * Adapta el modelo de grafo de provenance ({ id, kind, label, image, entity }
+ * y { from, to, certain }) al formato de vis-network, incluyendo la semántica
+ * de certeza: arista cierta = sólida, arista dudosa = discontinua.
+ */
+
+const COLORS = {
+  product: '#26a69a',
+  supplier: '#42a5f5',
+  organization: '#ffb74d',
+  municipality: '#66bb6a',
+  department: '#5c6bc0',
+  country: '#ab47bc',
+  junction: '#78909c',
+}
+
+const PRODUCT_SPACING = 110
+const COLUMN_X = {
+  product: -240,
+  junction: -160,
+  supplier: -80,
+  organization: 80,
+  municipality: 240,
+  department: 400,
+  country: 560,
+}
+
+export const KIND_COLORS = COLORS
+
+export function toVisNodes (nodes) {
+  const products = nodes.filter(node => node.kind === 'product')
+  const productY = new Map()
+  products.forEach((node, index) => {
+    productY.set(node.entity.id, (index - (products.length - 1) / 2) * PRODUCT_SPACING)
+  })
+  return nodes.map(node => {
+    const color = COLORS[node.kind] || '#cfd8dc'
+    const { image, ...rest } = node
+    if (node.kind === 'junction') {
+      return {
+        ...rest,
+        shape: 'dot',
+        color,
+        size: 10,
+        label: '',
+        x: COLUMN_X.junction,
+        y: productY.get(node.entity.id),
+        fixed: { x: true, y: true },
+      }
+    }
+    const base = image
+      ? { ...rest, image, shape: 'circularImage', borderWidth: 2 }
+      : { ...rest, shape: 'dot', color, borderWidth: 2 }
+    if (node.kind === 'product') {
+      return {
+        ...base,
+        x: COLUMN_X.product,
+        y: productY.get(node.entity.id),
+        fixed: { x: true, y: true },
+      }
+    }
+    return { ...base, x: COLUMN_X[node.kind], fixed: { x: true, y: false } }
+  })
+}
+
+export function toVisEdges (edges) {
+  return edges.map(edge => ({
+    from: edge.from,
+    to: edge.to,
+    dashes: !edge.certain,
+  }))
+}
+
+export const chartOptions = {
+  nodes: { font: { size: 13, color: '#263238' } },
+  edges: { color: { color: '#546e7a' } },
+  physics: {
+    barnesHut: { gravitationalConstant: -4000, springLength: 120, springConstant: 0.02 },
+  },
+}

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/geography.vue

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

src/pages/admin/organizations.vue

@@ -0,0 +1,10 @@
+<template>
+  <OrganizationsManagement v-if="authStore.isAdmin" />
+</template>
+
+<script setup>
+  import { useAuthStore } from '@/stores/auth'
+  import OrganizationsManagement from '@/components/provenance/admin/OrganizationsManagement.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/admin/suppliers.vue

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

src/pages/catalog.vue

@@ -2,7 +2,7 @@
   <v-container fluid>
     <!-- Backdrop para mobile cuando el carrito está expandido -->
     <div
-      v-if="isMobile && !cartCollapsed"
+      v-if="isMobile && !cartCollapsed && isAuthenticated"
       class="cart-backdrop"
       @click="cartCollapsed = true"
     ></div>
@@ -49,20 +49,6 @@
           </div>
         </v-sheet>
 
-        <!-- Controles de paginación superiores -->
-        <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="top"
-        />
-
         <!-- Grid de productos paginados -->
         <v-row class="product-grid" v-if="paginatedItems.length > 0">
           <v-col
@@ -80,7 +66,9 @@
               :decrease="decrease"
               :currency="currency"
               :updateQuantity="updateQuantity"
+              :disabled="!isAuthenticated"
               @add-to-cart="addToCart"
+              @request-login="showLogin"
             />
           </v-col>
         </v-row>
@@ -124,6 +112,7 @@
           :class="{ 'cart-is-collapsed': cartCollapsed && isMobile }"
         >
           <Cart
+            v-if="isAuthenticated"
             :cart-items="cartItems"
             :currency="currency"
             :is-collapsed="cartCollapsed"
@@ -134,6 +123,63 @@
             @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>
@@ -141,7 +187,7 @@
     <!-- Modal 1: Confirmación de productos -->
     <v-dialog v-model="checkoutDialog" max-width="600" persistent>
       <v-card>
-        <v-card-title class="headline">Confirmar Compra</v-card-title>
+        <v-card-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">
@@ -176,7 +222,7 @@
       </v-card>
     </v-dialog>
 
-    <!-- Modal 2: Datos personales -->
+    <!-- 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>
@@ -213,6 +259,48 @@
               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>
@@ -224,11 +312,17 @@
             :loading="isSubmitting"
             :disabled="isSubmitting"
           >
-            Finalizar Compra
+            Finalizar Pedido
           </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
+
+    <!-- Login Dialog -->
+    <LoginDialog
+      ref="loginDialogRef"
+      @login-success="onLoginSuccess"
+    />
   </v-container>
 </template>
 
@@ -236,7 +330,9 @@
 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";
 
@@ -245,10 +341,13 @@ export default {
     Card,
     Cart,
     PaginationControls,
+    LoginDialog,
   },
   setup() {
     const cartStore = useCartStore();
-    const cartCollapsed = ref(false); // Cambiado a false para que inicie expandido en desktop
+    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
@@ -267,7 +366,9 @@ export default {
 
     return {
       cartStore,
+      authStore,
       cartCollapsed,
+      showLoginPrompt,
       isMobile,
       windowWidth,
     };
@@ -309,12 +410,19 @@ export default {
     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 query = this.searchQuery.toLowerCase();
+      const normalize = (s) => s.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+      const query = normalize(this.searchQuery);
       return this.items.filter((item) =>
-        item.name.toLowerCase().includes(query),
+        normalize(item.name).includes(query),
       );
     },
     // Paginación
@@ -379,7 +487,7 @@ export default {
           this.items = data.map((product) => ({
             ...product,
             quantity: 0,
-            img: product.img || not_image_product,
+            img: (product.catalogue_images?.length > 0) ? product.catalogue_images[0] : (product.img || not_image_product),
           }));
         })
         .catch((error) => {
@@ -440,7 +548,6 @@ export default {
     },
     async onSubmitPurchase() {
       const form = this.$refs.personalForm;
-
       if (form) {
         const { valid } = await form.validate();
         if (!valid) return;
@@ -462,7 +569,6 @@ export default {
         customer_phone: this.customerPhone,
         pickup_method: this.pickupMethod,
       };
-
       this.api
         .createCatalogPurchase(payload)
         .then((data) => {
@@ -511,14 +617,27 @@ export default {
       }
     },
     scrollToTop() {
-      this.$nextTick(() => {
+      const grid = this.$el?.querySelector(".product-grid");
-        const catalogHeader = this.$el?.querySelector(".page-header");
+      if (grid) {
-        if (catalogHeader) {
+        const top = grid.getBoundingClientRect().top + window.scrollY - 16;
-          catalogHeader.scrollIntoView({
+        window.scrollTo({ top, behavior: "smooth" });
-            behavior: "smooth",
+      } else {
-            block: "start",
+        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) {
@@ -726,6 +845,23 @@ export default {
   }
 }
 
+/* ============================================
+   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
    ============================================ */

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/sincronizar_catalog_sales_tryton.vue

@@ -51,9 +51,13 @@
           <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)"
+              :items="formatSalesResults(result.failed)"
               density="compact"
-              :headers="[{ title: 'ID', key: 'id' }]"
+              :headers="[
+                { title: 'ID', key: 'id' },
+                { title: 'Código', key: 'code' },
+                { title: 'Detalle', key: 'detail' }
+              ]"
             ></v-data-table>
           </v-card-text>
         </v-card>
@@ -64,9 +68,12 @@
           <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)"
+              :items="formatSalesResults(result.successful)"
               density="compact"
-              :headers="[{ title: 'ID', key: 'id' }]"
+              :headers="[
+                { title: 'ID', key: 'id' },
+                { title: 'Código', key: 'code' }
+              ]"
             ></v-data-table>
           </v-card-text>
         </v-card>
@@ -99,9 +106,13 @@
       }
     },
     methods: {
-      formatItems(ids) {
+      formatSalesResults(items) {
-        if (!ids || ids.length === 0) return [];
+        if (!items || items.length === 0) return [];
-        return ids.map(id => ({ id }));
+        return items.map(item =>
+          typeof item === 'object'
+            ? { id: item.id, code: item.code ?? '', detail: item.error ?? '' }
+            : { id: item, code: '', detail: '' }
+        );
       },
       startSync() {
         this.loading = true;

src/pages/sincronizar_clientes_tryton.vue

@@ -55,9 +55,13 @@
           <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)"
+              :items="formatResults(result.failed_parties)"
               density="compact"
-              :headers="[{ title: 'ID', key: 'id' }]"
+              :headers="[
+                { title: 'ID', key: 'id' },
+                { title: 'Nombre', key: 'name' },
+                { title: 'Detalle', key: 'detail' }
+              ]"
             ></v-data-table>
           </v-card-text>
         </v-card>
@@ -68,9 +72,12 @@
           <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)"
+              :items="formatResults(result.created_customers)"
               density="compact"
-              :headers="[{ title: 'ID', key: 'id' }]"
+              :headers="[
+                { title: 'ID', key: 'id' },
+                { title: 'Nombre', key: 'name' }
+              ]"
             ></v-data-table>
           </v-card-text>
         </v-card>
@@ -81,9 +88,13 @@
           <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)"
+              :items="formatResults(result.updated_customers)"
               density="compact"
-              :headers="[{ title: 'ID', key: 'id' }]"
+              :headers="[
+                { title: 'ID', key: 'id' },
+                { title: 'Nombre', key: 'name' },
+                { title: 'Detalle', key: 'detail' }
+              ]"
             ></v-data-table>
           </v-card-text>
         </v-card>
@@ -94,9 +105,12 @@
           <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)"
+              :items="formatResults(result.untouched_customers)"
               density="compact"
-              :headers="[{ title: 'ID', key: 'id' }]"
+              :headers="[
+                { title: 'ID', key: 'id' },
+                { title: 'Nombre', key: 'name' }
+              ]"
             ></v-data-table>
           </v-card-text>
         </v-card>
@@ -107,9 +121,12 @@
           <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)"
+              :items="formatResults(result.checked_tryton_parties)"
               density="compact"
-              :headers="[{ title: 'ID', key: 'id' }]"
+              :headers="[
+                { title: 'ID', key: 'id' },
+                { title: 'Nombre', key: 'name' }
+              ]"
             ></v-data-table>
           </v-card-text>
         </v-card>
@@ -142,9 +159,13 @@
       }
     },
     methods: {
-      formatItems(ids) {
+      formatResults(items) {
-        if (!ids || ids.length === 0) return [];
+        if (!items || items.length === 0) return [];
-        return ids.map(id => ({ id }));
+        return items.map(item =>
+          typeof item === 'object'
+            ? { id: item.id ?? item.external_id, name: item.name ?? '', detail: item.error ?? item.detail ?? '' }
+            : { id: item, name: '', detail: '' }
+        );
       },
       startSync() {
         this.loading = true;

src/pages/sincronizar_productos_tryton.vue

@@ -55,9 +55,13 @@
           <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)"
+              :items="formatResults(result.failed_products)"
               density="compact"
-              :headers="[{ title: 'ID', key: 'id' }]"
+              :headers="[
+                { title: 'ID', key: 'id' },
+                { title: 'Nombre', key: 'name' },
+                { title: 'Detalle', key: 'detail' }
+              ]"
             ></v-data-table>
           </v-card-text>
         </v-card>
@@ -68,9 +72,12 @@
           <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)"
+              :items="formatResults(result.created_products)"
               density="compact"
-              :headers="[{ title: 'ID', key: 'id' }]"
+              :headers="[
+                { title: 'ID', key: 'id' },
+                { title: 'Nombre', key: 'name' }
+              ]"
             ></v-data-table>
           </v-card-text>
         </v-card>
@@ -81,9 +88,13 @@
           <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)"
+              :items="formatResults(result.updated_products)"
               density="compact"
-              :headers="[{ title: 'ID', key: 'id' }]"
+              :headers="[
+                { title: 'ID', key: 'id' },
+                { title: 'Nombre', key: 'name' },
+                { title: 'Detalle', key: 'detail' }
+              ]"
             ></v-data-table>
           </v-card-text>
         </v-card>
@@ -94,9 +105,45 @@
           <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)"
+              :items="formatResults(result.untouched_products)"
               density="compact"
-              :headers="[{ title: 'ID', key: 'id' }]"
+              :headers="[
+                { title: 'ID', key: 'id' },
+                { title: 'Nombre', key: 'name' }
+              ]"
+            ></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-indigo text-white">🏷️ Categorías creadas ({{ result.created_categories?.length || 0 }})</v-card-title>
+          <v-card-text>
+            <v-data-table
+              :items="formatResults(result.created_categories)"
+              density="compact"
+              :headers="[
+                { title: 'ID', key: 'id' },
+                { title: 'Nombre', key: 'name' }
+              ]"
+            ></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-deep-purple text-white">♻️ Categorías actualizadas ({{ result.updated_categories?.length || 0 }})</v-card-title>
+          <v-card-text>
+            <v-data-table
+              :items="formatResults(result.updated_categories)"
+              density="compact"
+              :headers="[
+                { title: 'ID', key: 'id' },
+                { title: 'Nombre', key: 'name' },
+                { title: 'Detalle', key: 'detail' }
+              ]"
             ></v-data-table>
           </v-card-text>
         </v-card>
@@ -129,9 +176,13 @@
       }
     },
     methods: {
-      formatItems(ids) {
+      formatResults(items) {
-        if (!ids || ids.length === 0) return [];
+        if (!items || items.length === 0) return [];
-        return ids.map(id => ({ id }));
+        return items.map(item =>
+          typeof item === 'object'
+            ? { id: item.id ?? item.external_id, name: item.name ?? '', detail: item.error ?? item.detail ?? '' }
+            : { id: item, name: '', detail: '' }
+        );
       },
       startSync() {
         this.loading = true;

src/pages/sincronizar_ventas_tryton.vue

@@ -51,9 +51,13 @@
           <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)"
+              :items="formatSalesResults(result.failed)"
               density="compact"
-              :headers="[{ title: 'ID', key: 'id' }]"
+              :headers="[
+                { title: 'ID', key: 'id' },
+                { title: 'Código', key: 'code' },
+                { title: 'Detalle', key: 'detail' }
+              ]"
             ></v-data-table>
           </v-card-text>
         </v-card>
@@ -64,9 +68,12 @@
           <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)"
+              :items="formatSalesResults(result.successful)"
               density="compact"
-              :headers="[{ title: 'ID', key: 'id' }]"
+              :headers="[
+                { title: 'ID', key: 'id' },
+                { title: 'Código', key: 'code' }
+              ]"
             ></v-data-table>
           </v-card-text>
         </v-card>
@@ -99,9 +106,13 @@
       }
     },
     methods: {
-      formatItems(ids) {
+      formatSalesResults(items) {
-        if (!ids || ids.length === 0) return [];
+        if (!items || items.length === 0) return [];
-        return ids.map(id => ({ id }));
+        return items.map(item =>
+          typeof item === 'object'
+            ? { id: item.id, code: item.code ?? '', detail: item.error ?? '' }
+            : { id: item, code: '', detail: '' }
+        );
       },
       startSync() {
         this.loading = true;

src/router/index.js

@@ -11,6 +11,8 @@ 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',
@@ -21,6 +23,11 @@ const ADMIN_ROUTES = [
   '/cuadrar_tarro',
   '/admin/products',
   '/admin/catalog-sales',
+  '/admin/catalogue-images',
+  '/admin/store-settings',
+  '/admin/organizations',
+  '/admin/suppliers',
+  '/admin/geography',
 ]
 
 const router = createRouter({
@@ -39,6 +46,8 @@ router.beforeEach((to, from, next) => {
     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()
   }

src/services/api.js

@@ -15,6 +15,90 @@ class Api {
         return this.apiImplementation.updateProduct(productId, data);
     }
 
+    getProduct(productId) {
+        return this.apiImplementation.getProduct(productId);
+    }
+
+    getOrganizations() {
+        return this.apiImplementation.getOrganizations();
+    }
+
+    createOrganization(data) {
+        return this.apiImplementation.createOrganization(data);
+    }
+
+    updateOrganization(id, data) {
+        return this.apiImplementation.updateOrganization(id, data);
+    }
+
+    deleteOrganization(id) {
+        return this.apiImplementation.deleteOrganization(id);
+    }
+
+    getSuppliers() {
+        return this.apiImplementation.getSuppliers();
+    }
+
+    createSupplier(data) {
+        return this.apiImplementation.createSupplier(data);
+    }
+
+    updateSupplier(id, data) {
+        return this.apiImplementation.updateSupplier(id, data);
+    }
+
+    deleteSupplier(id) {
+        return this.apiImplementation.deleteSupplier(id);
+    }
+
+    getCountries() {
+        return this.apiImplementation.getCountries();
+    }
+
+    createCountry(data) {
+        return this.apiImplementation.createCountry(data);
+    }
+
+    updateCountry(id, data) {
+        return this.apiImplementation.updateCountry(id, data);
+    }
+
+    deleteCountry(id) {
+        return this.apiImplementation.deleteCountry(id);
+    }
+
+    getDepartments() {
+        return this.apiImplementation.getDepartments();
+    }
+
+    createDepartment(data) {
+        return this.apiImplementation.createDepartment(data);
+    }
+
+    updateDepartment(id, data) {
+        return this.apiImplementation.updateDepartment(id, data);
+    }
+
+    deleteDepartment(id) {
+        return this.apiImplementation.deleteDepartment(id);
+    }
+
+    getMunicipalities() {
+        return this.apiImplementation.getMunicipalities();
+    }
+
+    createMunicipality(data) {
+        return this.apiImplementation.createMunicipality(data);
+    }
+
+    updateMunicipality(id, data) {
+        return this.apiImplementation.updateMunicipality(id, data);
+    }
+
+    deleteMunicipality(id) {
+        return this.apiImplementation.deleteMunicipality(id);
+    }
+
     getPaymentMethods() {
         return this.apiImplementation.getPaymentMethods();
     }
@@ -27,6 +111,10 @@ class Api {
         return this.apiImplementation.getSummaryCatalogPurchase(purchaseId);
     }
 
+    getPublicOrderSummary(code) {
+        return this.apiImplementation.getPublicOrderSummary(code);
+    }
+
     getPurchasesForReconciliation() {
         return this.apiImplementation.getPurchasesForReconciliation();
     }
@@ -82,6 +170,30 @@ class Api {
     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/django-api.js

@@ -18,6 +18,10 @@ class DjangoApi {
         return http.patch(url, payload).then((r) => r.data);
     }
 
+    deleteRequest(url) {
+        return http.delete(url).then((r) => r.data);
+    }
+
     getCustomers() {
         const url = this.base + "/don_confiao/api/customers/";
         return this.getRequest(url);
@@ -39,6 +43,111 @@ class DjangoApi {
         return this.patchRequest(url, data);
     }
 
+    getProduct(productId) {
+        const url = this.base + `/don_confiao/api/products/${productId}/`;
+        return this.getRequest(url);
+    }
+
+    getOrganizations() {
+        const url = this.base + "/don_confiao/api/organizations/";
+        return this.getRequest(url);
+    }
+
+    createOrganization(data) {
+        const url = this.base + "/don_confiao/api/organizations/";
+        return this.postRequest(url, data);
+    }
+
+    updateOrganization(id, data) {
+        const url = this.base + `/don_confiao/api/organizations/${id}/`;
+        return this.patchRequest(url, data);
+    }
+
+    deleteOrganization(id) {
+        const url = this.base + `/don_confiao/api/organizations/${id}/`;
+        return this.deleteRequest(url);
+    }
+
+    getSuppliers() {
+        const url = this.base + "/don_confiao/api/suppliers/";
+        return this.getRequest(url);
+    }
+
+    createSupplier(data) {
+        const url = this.base + "/don_confiao/api/suppliers/";
+        return this.postRequest(url, data);
+    }
+
+    updateSupplier(id, data) {
+        const url = this.base + `/don_confiao/api/suppliers/${id}/`;
+        return this.patchRequest(url, data);
+    }
+
+    deleteSupplier(id) {
+        const url = this.base + `/don_confiao/api/suppliers/${id}/`;
+        return this.deleteRequest(url);
+    }
+
+    getCountries() {
+        const url = this.base + "/don_confiao/api/countries/";
+        return this.getRequest(url);
+    }
+
+    createCountry(data) {
+        const url = this.base + "/don_confiao/api/countries/";
+        return this.postRequest(url, data);
+    }
+
+    updateCountry(id, data) {
+        const url = this.base + `/don_confiao/api/countries/${id}/`;
+        return this.patchRequest(url, data);
+    }
+
+    deleteCountry(id) {
+        const url = this.base + `/don_confiao/api/countries/${id}/`;
+        return this.deleteRequest(url);
+    }
+
+    getDepartments() {
+        const url = this.base + "/don_confiao/api/departments/";
+        return this.getRequest(url);
+    }
+
+    createDepartment(data) {
+        const url = this.base + "/don_confiao/api/departments/";
+        return this.postRequest(url, data);
+    }
+
+    updateDepartment(id, data) {
+        const url = this.base + `/don_confiao/api/departments/${id}/`;
+        return this.patchRequest(url, data);
+    }
+
+    deleteDepartment(id) {
+        const url = this.base + `/don_confiao/api/departments/${id}/`;
+        return this.deleteRequest(url);
+    }
+
+    getMunicipalities() {
+        const url = this.base + "/don_confiao/api/municipalities/";
+        return this.getRequest(url);
+    }
+
+    createMunicipality(data) {
+        const url = this.base + "/don_confiao/api/municipalities/";
+        return this.postRequest(url, data);
+    }
+
+    updateMunicipality(id, data) {
+        const url = this.base + `/don_confiao/api/municipalities/${id}/`;
+        return this.patchRequest(url, data);
+    }
+
+    deleteMunicipality(id) {
+        const url = this.base + `/don_confiao/api/municipalities/${id}/`;
+        return this.deleteRequest(url);
+    }
+
     getPaymentMethods() {
         const url =
             this.base + "/don_confiao/payment_methods/all/select_format";
@@ -57,6 +166,12 @@ class DjangoApi {
         return this.getRequest(url);
     }
 
+    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);
@@ -130,6 +245,42 @@ class DjangoApi {
         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;

src/stores/auth.js

@@ -6,6 +6,7 @@ export const useAuthStore = defineStore('auth', {
   }),
   getters: {
     isAdmin: (state) => state.user?.role === 'administrator',
+    isPublico: (state) => state.user?.role === 'publico',
     isAuthenticated: (state) => !!state.user
   },
   actions: {

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/NavBar.spec.js

@@ -0,0 +1,80 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import NavBar from '@/components/NavBar.vue'
+import vuetify from '@/plugins/vuetify'
+
+import AuthService from '@/services/auth'
+
+vi.mock('@/services/auth', () => ({
+  default: {
+    isAuthenticated: vi.fn(),
+    logout: vi.fn(),
+  },
+}))
+
+function mountNavBar (api) {
+  const pinia = createPinia()
+  setActivePinia(pinia)
+  const wrapper = mount(NavBar, {
+    global: {
+      plugins: [pinia, vuetify],
+      provide: { api },
+      mocks: { $router: { push: vi.fn() } },
+      stubs: {
+        VAppBar: { template: '<div><slot /></div>' },
+        VNavigationDrawer: { template: '<div><slot /></div>' },
+      },
+    },
+  })
+  return { wrapper }
+}
+
+describe('NavBar', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    localStorage.clear()
+  })
+
+  it('sin sesión muestra el botón de login y no el menú de administración', async () => {
+    AuthService.isAuthenticated.mockReturnValue(false)
+    const { wrapper } = mountNavBar({ getCurrentUser: vi.fn() })
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('Login')
+    expect(wrapper.text()).not.toContain('Administracion')
+  })
+
+  it('el administrador ve los ítems de administración de provenance', async () => {
+    AuthService.isAuthenticated.mockReturnValue(true)
+    const api = {
+      getCurrentUser: vi.fn().mockResolvedValue({ username: 'admin', role: 'administrator' }),
+    }
+    const { wrapper } = mountNavBar(api)
+    await flushPromises()
+
+    expect(api.getCurrentUser).toHaveBeenCalled()
+    expect(wrapper.text()).toContain('Administracion')
+
+    const adminItem = wrapper.findAll('.v-list-item')
+      .find(item => item.text().includes('Administracion'))
+    await adminItem.trigger('click')
+
+    expect(wrapper.text()).toContain('Organizaciones')
+    expect(wrapper.text()).toContain('Proveedores')
+    expect(wrapper.text()).toContain('Geografía')
+  })
+
+  it('el usuario público no ve el menú de administración y no ve "Comprar"', async () => {
+    AuthService.isAuthenticated.mockReturnValue(true)
+    const api = {
+      getCurrentUser: vi.fn().mockResolvedValue({ username: 'cliente', role: 'publico' }),
+    }
+    const { wrapper } = mountNavBar(api)
+    await flushPromises()
+
+    expect(wrapper.text()).not.toContain('Administracion')
+    expect(wrapper.text()).not.toContain('Comprar')
+    expect(wrapper.text()).toContain('Ver Catálogo')
+  })
+})

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,124 @@
+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 ProvenanceSection from '@/components/provenance/ProvenanceSection.vue'
+import vuetify from '@/plugins/vuetify'
+
+const ProvenanceSectionStub = {
+  name: 'ProvenanceSection',
+  props: ['provenance'],
+  template: '<div data-test="provenance-section" />',
+}
+
+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],
+      stubs: { ProvenanceSection: ProvenanceSectionStub },
+    },
+  })
+}
+
+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)
+  })
+
+  it('no renderiza la sección de provenance cuando la respuesta no la incluye', () => {
+    const wrapper = mountSummary({ purchase: saleData })
+
+    expect(wrapper.findComponent(ProvenanceSection).exists()).toBe(false)
+  })
+
+  it('renderiza la sección de provenance cuando el resumen la incluye', () => {
+    const withProvenance = {
+      ...saleData,
+      product_provenance: [
+        {
+          product: { id: 10, name: 'Panela' },
+          suppliers: [{ supplier: { id: 5, name: 'La Mesa' }, organization: { id: 3, name: 'Red' }, municipality: { id: 7, name: 'La Mesa' }, department: { id: 2, name: 'Cundinamarca' }, country: { id: 1, name: 'Colombia', code: 'CO' } }],
+        },
+      ],
+    }
+    const wrapper = mountSummary({ purchase: withProvenance })
+
+    expect(wrapper.findComponent(ProvenanceSection).exists()).toBe(true)
+    expect(wrapper.findComponent(ProvenanceSection).props('provenance')).toEqual(
+      withProvenance.product_provenance
+    )
+  })
+})

tests/unit/components/graph/VisChart.spec.js

@@ -0,0 +1,157 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import VisChart from '@/components/graph/VisChart.vue'
+
+const vis = vi.hoisted(() => {
+  const networkInstance = {
+    on: vi.fn(),
+    once: vi.fn(),
+    setData: vi.fn(),
+    setOptions: vi.fn(),
+    fit: vi.fn(),
+    destroy: vi.fn(),
+    getPositions: vi.fn(() => ({})),
+    moveNode: vi.fn(),
+  }
+  const dataSetInstance = {
+    get: vi.fn(),
+  }
+  return {
+    networkInstance,
+    dataSetInstance,
+    Network: vi.fn(() => networkInstance),
+    DataSet: vi.fn(() => dataSetInstance),
+  }
+})
+
+vi.mock('vis-network/standalone', () => ({
+  Network: vis.Network,
+  DataSet: vis.DataSet,
+}))
+
+function handlerFor (mock, eventName) {
+  const call = mock.mock.calls.find(args => args[0] === eventName)
+  return call ? call[1] : null
+}
+
+describe('VisChart', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('crea la red con los nodos y aristas recibidos', () => {
+    const nodes = [{ id: 'product:1', label: 'Panela' }]
+    const edges = [{ from: 'product:1', to: 'supplier:5', dashes: true }]
+    mount(VisChart, { props: { nodes, edges } })
+
+    expect(vis.Network).toHaveBeenCalledTimes(1)
+    const [container, , options] = vis.Network.mock.calls[0]
+    expect(container).toBeInstanceOf(HTMLElement)
+    expect(options.physics.stabilization.enabled).toBe(true)
+    expect(vis.dataSetInstance.get).toBeDefined()
+    const data = vis.networkInstance.setData.mock.calls[0][0]
+    expect(data.nodes).toBe(vis.dataSetInstance)
+    expect(data.edges).toBe(vis.dataSetInstance)
+  })
+
+  it('mezcla las opciones base con las recibidas', () => {
+    mount(VisChart, {
+      props: {
+        nodes: [],
+        edges: [],
+        options: { nodes: { font: { size: 16 } }, physics: { stabilization: { iterations: 100 } } },
+      },
+    })
+
+    const options = vis.Network.mock.calls[0][2]
+    expect(options.nodes.font.size).toBe(16)
+    expect(options.nodes.shape).toBe('dot')
+    expect(options.physics.stabilization.iterations).toBe(100)
+    expect(options.physics.barnesHut.springLength).toBe(140)
+  })
+
+  it('emite select con el nodo al hacer click', () => {
+    const wrapper = mount(VisChart, { props: { nodes: [{ id: 'supplier:5', kind: 'supplier' }], edges: [] } })
+
+    vis.dataSetInstance.get.mockReturnValue({ id: 'supplier:5', kind: 'supplier', label: 'La Mesa' })
+    handlerFor(vis.networkInstance.on, 'click')({ nodes: ['supplier:5'] })
+
+    expect(wrapper.emitted('select')[0][0]).toEqual({ id: 'supplier:5', kind: 'supplier', label: 'La Mesa' })
+  })
+
+  it('no emite select cuando el click no cae sobre un nodo', () => {
+    const wrapper = mount(VisChart, { props: { nodes: [], edges: [] } })
+
+    handlerFor(vis.networkInstance.on, 'click')({ nodes: [] })
+
+    expect(wrapper.emitted('select')).toBeUndefined()
+  })
+
+  it('desactiva la física y ajusta la vista cuando la estabilización termina', () => {
+    mount(VisChart, { props: { nodes: [], edges: [] } })
+
+    const onStabilized = handlerFor(vis.networkInstance.once, 'stabilizationIterationsDone')
+    expect(onStabilized).toBeDefined()
+    onStabilized()
+
+    expect(vis.networkInstance.setOptions).toHaveBeenCalledWith({ physics: { enabled: false } })
+    expect(vis.networkInstance.fit).toHaveBeenCalled()
+  })
+
+  it('separa verticalmente los nodos de una misma columna tras estabilizar', () => {
+    vis.networkInstance.getPositions.mockReturnValue({
+      'supplier:5': { x: 0, y: 100 },
+      'supplier:6': { x: 0, y: 112 },
+      'municipality:7': { x: 240, y: 100 },
+      'product:1': { x: -240, y: 60 },
+    })
+    mount(VisChart, { props: { nodes: [], edges: [], minVerticalSpacing: 70 } })
+
+    const onStabilized = handlerFor(vis.networkInstance.once, 'stabilizationIterationsDone')
+    onStabilized()
+
+    expect(vis.networkInstance.moveNode).toHaveBeenCalledWith('supplier:6', 0, 170)
+    expect(vis.networkInstance.moveNode).not.toHaveBeenCalledWith('supplier:5', 0, expect.anything())
+    expect(vis.networkInstance.moveNode).not.toHaveBeenCalledWith('municipality:7', 240, expect.anything())
+    expect(vis.networkInstance.moveNode).not.toHaveBeenCalledWith('product:1', -240, expect.anything())
+  })
+
+  it('no separa nodos cuando no se indica espaciado vertical mínimo', () => {
+    vis.networkInstance.getPositions.mockReturnValue({
+      'supplier:5': { x: 0, y: 100 },
+      'supplier:6': { x: 0, y: 112 },
+    })
+    mount(VisChart, { props: { nodes: [], edges: [] } })
+
+    const onStabilized = handlerFor(vis.networkInstance.once, 'stabilizationIterationsDone')
+    onStabilized()
+
+    expect(vis.networkInstance.moveNode).not.toHaveBeenCalled()
+  })
+
+  it('vuelve a estabilizar el grafo cuando cambian los nodos o aristas', async () => {
+    const wrapper = mount(VisChart, { props: { nodes: [{ id: 'product:1' }], edges: [] } })
+    expect(vis.Network).toHaveBeenCalledTimes(1)
+    expect(vis.networkInstance.destroy).not.toHaveBeenCalled()
+
+    await wrapper.setProps({ nodes: [{ id: 'product:2' }], edges: [{ from: 'product:2', to: 'supplier:5' }] })
+
+    expect(vis.networkInstance.destroy).toHaveBeenCalled()
+    expect(vis.Network).toHaveBeenCalledTimes(2)
+    expect(vis.networkInstance.setData).toHaveBeenCalledTimes(2)
+  })
+
+  it('aplica la altura recibida al contenedor', () => {
+    const wrapper = mount(VisChart, { props: { height: 340 } })
+
+    expect(wrapper.element.style.height).toBe('340px')
+  })
+
+  it('destruye la red al desmontar', () => {
+    const wrapper = mount(VisChart, { props: { nodes: [], edges: [] } })
+
+    wrapper.unmount()
+
+    expect(vis.networkInstance.destroy).toHaveBeenCalled()
+  })
+})

tests/unit/components/provenance/ProvenanceDetailModal.spec.js

@@ -0,0 +1,88 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ProvenanceDetailModal from '@/components/provenance/ProvenanceDetailModal.vue'
+import vuetify from '@/plugins/vuetify'
+
+const supplier = {
+  id: 'supplier:5',
+  kind: 'supplier',
+  label: 'Asociación Agropecuaria La Mesa',
+  image: null,
+  entity: {
+    id: 5,
+    name: 'Asociación Agropecuaria La Mesa',
+    description: 'Cooperativa de campesinos',
+    website: 'https://agro.example.org',
+    contact_email: 'contacto@agro.example.org',
+    contact_phone: '300 123 4567',
+    kind: 'supplier',
+  },
+}
+
+const product = {
+  id: 'product:1',
+  kind: 'product',
+  label: 'Panela regional por Kg',
+  image: 'http://localhost/media/panela.jpg',
+  entity: { id: 1, name: 'Panela regional por Kg', kind: 'product' },
+}
+
+function mountModal (props) {
+  return mount(ProvenanceDetailModal, {
+    props,
+    global: { plugins: [vuetify] },
+  })
+}
+
+function bodyText () {
+  return document.body.textContent
+}
+
+describe('ProvenanceDetailModal', () => {
+  it('muestra la información detallada del proveedor seleccionado', () => {
+    mountModal({ visible: true, selected: supplier })
+
+    expect(bodyText()).toContain('Proveedor')
+    expect(bodyText()).toContain('Asociación Agropecuaria La Mesa')
+    expect(bodyText()).toContain('Cooperativa de campesinos')
+    expect(bodyText()).toContain('https://agro.example.org')
+    expect(bodyText()).toContain('contacto@agro.example.org')
+    expect(bodyText()).toContain('300 123 4567')
+  })
+
+  it('muestra la imagen del producto cuando existe', () => {
+    mountModal({ visible: true, selected: product })
+
+    expect(document.querySelector('img').getAttribute('src')).toBe(
+      'http://localhost/media/panela.jpg'
+    )
+  })
+
+  it('no muestra contenido cuando no hay entidad seleccionada', () => {
+    mountModal({ visible: true, selected: null })
+
+    expect(bodyText()).not.toContain('Proveedor')
+    expect(bodyText()).not.toContain('Asociación')
+  })
+
+  it('no muestra el diálogo cuando visible es false', () => {
+    mountModal({ visible: false, selected: supplier })
+
+    expect(bodyText()).not.toContain('Asociación Agropecuaria La Mesa')
+  })
+
+  it('omite los campos vacíos', () => {
+    const minimal = {
+      id: 'country:1',
+      kind: 'country',
+      label: 'Colombia',
+      image: null,
+      entity: { id: 1, name: 'Colombia', kind: 'country' },
+    }
+    mountModal({ visible: true, selected: minimal })
+
+    expect(bodyText()).toContain('Colombia')
+    expect(bodyText()).not.toContain('Descripción')
+    expect(bodyText()).not.toContain('Sitio web')
+  })
+})

tests/unit/components/provenance/ProvenanceGraph.spec.js

@@ -0,0 +1,164 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import ProvenanceDetailModal from '@/components/provenance/ProvenanceDetailModal.vue'
+import ProvenanceGraph from '@/components/provenance/ProvenanceGraph.vue'
+import vuetify from '@/plugins/vuetify'
+
+vi.mock('@/components/graph/VisChart.vue', () => ({
+  default: {
+    name: 'VisChart',
+    template: '<div class="vis-chart-stub" />',
+    props: ['nodes', 'edges', 'height', 'options', 'minVerticalSpacing'],
+  },
+}))
+
+const provenance = [
+  {
+    product: {
+      id: 1,
+      name: 'Panela regional por Kg',
+      catalogue_images: ['http://localhost/media/panela.jpg'],
+    },
+    suppliers: [
+      {
+        supplier: { id: 5, name: 'Asociación Agropecuaria La Mesa' },
+        organization: { id: 3, name: 'Red de Economía Solidaria' },
+        municipality: { id: 7, name: 'La Mesa' },
+        department: { id: 2, name: 'Cundinamarca' },
+        country: { id: 1, name: 'Colombia' },
+      },
+    ],
+  },
+]
+
+function mountGraph (props = {}) {
+  return mount(ProvenanceGraph, {
+    props: { provenance, ...props },
+    global: { plugins: [vuetify] },
+  })
+}
+
+function visChart (wrapper) {
+  return wrapper.findComponent({ name: 'VisChart' })
+}
+
+function checkbox (wrapper, label) {
+  return wrapper.findAllComponents({ name: 'VCheckbox' }).find(cb => cb.text().trim() === label)
+}
+
+async function setKinds (wrapper, kinds) {
+  checkbox(wrapper, 'Productos').vm.$emit('update:modelValue', kinds)
+  await nextTick()
+}
+
+describe('ProvenanceGraph', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('por defecto grafica solo productos y proveedores', () => {
+    const wrapper = mountGraph()
+
+    const nodeKinds = visChart(wrapper).props('nodes').map(node => node.kind)
+    expect(nodeKinds).toEqual(['product', 'supplier'])
+    const edges = visChart(wrapper).props('edges')
+    expect(edges.find(edge => edge.from === 'product:1' && edge.to === 'supplier:5').dashes).toBe(false)
+  })
+
+  it('pide separación vertical mínima equivalente al círculo más una línea de label', () => {
+    const wrapper = mountGraph()
+
+    expect(visChart(wrapper).props('minVerticalSpacing')).toBe(70)
+  })
+
+  it('muestra un checkbox por cada nivel con productos y proveedores activos', () => {
+    const wrapper = mountGraph()
+
+    const labels = wrapper.findAllComponents({ name: 'VCheckbox' }).map(cb => cb.text().trim())
+    expect(labels).toEqual(['Productos', 'Proveedores', 'Organizaciones', 'Municipios', 'Departamentos', 'País'])
+  })
+
+  it('dibuja un círculo de color junto a cada checkbox como leyenda', () => {
+    const wrapper = mountGraph()
+
+    const dots = wrapper.findAll('.legend-dot')
+    expect(dots).toHaveLength(6)
+    expect(dots[0].element.style.backgroundColor).toBe('rgb(38, 166, 154)')
+    expect(dots[1].element.style.backgroundColor).toBe('rgb(66, 165, 245)')
+    expect(dots[2].element.style.backgroundColor).toBe('rgb(255, 183, 77)')
+  })
+
+  it('al activar municipios agrega nodos de municipio y la arista proveedor→municipio', async () => {
+    const wrapper = mountGraph()
+
+    await setKinds(wrapper, ['product', 'supplier', 'municipality'])
+
+    const nodeIds = visChart(wrapper).props('nodes').map(node => node.id)
+    expect(nodeIds).toContain('municipality:7')
+    const edges = visChart(wrapper).props('edges')
+    expect(edges.find(edge => edge.from === 'supplier:5' && edge.to === 'municipality:7').dashes).toBe(false)
+  })
+
+  it('con país activo crea el nodo país', async () => {
+    const wrapper = mountGraph()
+
+    await setKinds(wrapper, ['product', 'supplier', 'country'])
+
+    expect(visChart(wrapper).props('nodes').map(node => node.id)).toContain('country:1')
+  })
+
+  it('al desactivar productos no se crean nodos de producto', async () => {
+    const wrapper = mountGraph()
+
+    await setKinds(wrapper, ['supplier', 'municipality', 'department'])
+
+    const nodeKinds = visChart(wrapper).props('nodes').map(node => node.kind)
+    expect(nodeKinds).not.toContain('product')
+    expect(nodeKinds).not.toContain('junction')
+  })
+
+  it('avisa cuando no queda ningún nivel seleccionado', async () => {
+    const wrapper = mountGraph()
+
+    await setKinds(wrapper, [])
+
+    expect(visChart(wrapper).exists()).toBe(false)
+    expect(wrapper.text()).toContain('Selecciona al menos un elemento')
+  })
+
+  it('muestra mensaje de próximamente cuando ningún producto tiene proveedores', () => {
+    const wrapper = mountGraph({
+      provenance: [{ product: { id: 1, name: 'Panela' }, suppliers: [] }],
+    })
+
+    expect(visChart(wrapper).exists()).toBe(false)
+    expect(wrapper.text()).toContain('próximamente')
+  })
+
+  it('abre el modal de detalle al seleccionar un proveedor', async () => {
+    const wrapper = mountGraph()
+
+    await visChart(wrapper).vm.$emit('select', { id: 'supplier:5', kind: 'supplier', label: 'Asociación Agropecuaria La Mesa', entity: { kind: 'supplier' } })
+
+    expect(wrapper.findComponent(ProvenanceDetailModal).props('visible')).toBe(true)
+    expect(document.body.textContent).toContain('Asociación Agropecuaria La Mesa')
+  })
+
+  it('ignora la selección del punto de disyunción', async () => {
+    const provenanceWithTwoSuppliers = [
+      {
+        product: { id: 1, name: 'Panela' },
+        suppliers: [
+          { supplier: { id: 5, name: 'A' }, municipality: { id: 7, name: 'La Mesa' } },
+          { supplier: { id: 6, name: 'B' }, municipality: { id: 8, name: 'San Antonio' } },
+        ],
+      },
+    ]
+    const wrapper = mountGraph({ provenance: provenanceWithTwoSuppliers })
+
+    await visChart(wrapper).vm.$emit('select', { id: 'junction:1', kind: 'junction', label: '' })
+
+    expect(wrapper.findComponent(ProvenanceDetailModal).props('visible')).toBe(false)
+  })
+})

tests/unit/components/provenance/ProvenanceMap.spec.js

@@ -0,0 +1,402 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import { createPinia, setActivePinia } from 'pinia'
+import ProvenanceMap from '@/components/provenance/ProvenanceMap.vue'
+import vuetify from '@/plugins/vuetify'
+
+const leaflet = vi.hoisted(() => {
+  const markers = []
+  const polylines = []
+  const layers = []
+  function makeLayer (type) {
+    const layer = {
+      type,
+      addTo: vi.fn(function () { return this }),
+      on: vi.fn(),
+      bindTooltip: vi.fn(function () { return this }),
+      bindPopup: vi.fn(function () { return this }),
+      setPopupContent: vi.fn(),
+      openPopup: vi.fn(),
+      closePopup: vi.fn(),
+      remove: vi.fn(),
+      getLatLng: vi.fn(function () { return this.pos }),
+      setLatLng: vi.fn(),
+    }
+    layers.push(layer)
+    return layer
+  }
+  const map = {
+    setView: vi.fn(function () { return this }),
+    fitBounds: vi.fn(),
+    flyTo: vi.fn(),
+    remove: vi.fn(),
+    invalidateSize: vi.fn(),
+    on: vi.fn(),
+    getZoom: vi.fn(() => 8),
+  }
+  const bounds = { extend: vi.fn(), isValid: vi.fn(() => true) }
+  return {
+    markers,
+    polylines,
+    layers,
+    map,
+    bounds,
+    L: {
+      map: vi.fn(() => map),
+      tileLayer: vi.fn(() => makeLayer('tileLayer')),
+      marker: vi.fn((pos, opts) => {
+        const marker = makeLayer('marker')
+        marker.pos = pos
+        marker.opts = opts
+        markers.push(marker)
+        return marker
+      }),
+      divIcon: vi.fn(opts => opts),
+      polyline: vi.fn((points, opts) => {
+        const polyline = makeLayer('polyline')
+        polyline.points = points
+        polyline.opts = opts
+        polylines.push(polyline)
+        return polyline
+      }),
+      latLngBounds: vi.fn(() => bounds),
+    },
+  }
+})
+
+vi.mock('leaflet', () => ({ default: leaflet.L }))
+
+const settings = { latitude: 4.6, longitude: -74.08, address: 'Cra 1 #2-3' }
+
+const provenance = [
+  {
+    product: { id: 1, name: 'Panela regional', catalogue_images: ['http://localhost/media/panela.jpg'] },
+    suppliers: [
+      {
+        supplier: { id: 5, name: 'Asociación La Mesa' },
+        organization: { id: 3, name: 'Red de Economía Solidaria' },
+        municipality: { id: 7, name: 'Santa Bárbara', latitude: 6.23, longitude: -75.56 },
+      },
+    ],
+  },
+  {
+    product: { id: 2, name: 'Arroz blanco', catalogue_images: [] },
+    suppliers: [
+      { supplier: { id: 6, name: 'Campesinos del Oriente' }, municipality: { id: 8, name: 'La Mesa', latitude: 4.86, longitude: -74.63 } },
+      { supplier: { id: 7, name: 'Finca El Paraíso' }, municipality: { id: 9, name: 'San Antonio', latitude: 6.22, longitude: -75.57 } },
+    ],
+  },
+]
+
+const sameMuni = [
+  {
+    product: { id: 1, name: 'Panela', catalogue_images: [] },
+    suppliers: [{ supplier: { id: 5, name: 'A' }, municipality: { id: 7, name: 'LA MESA', latitude: '4.6310280', longitude: '-74.4615880' } }],
+  },
+  {
+    product: { id: 2, name: 'Arroz', catalogue_images: [] },
+    suppliers: [{ supplier: { id: 6, name: 'B' }, municipality: { id: 7, name: 'LA MESA', latitude: '4.6310280', longitude: '-74.4615880' } }],
+  },
+]
+
+function mountMap (props = {}) {
+  const api = { getStoreSettings: vi.fn().mockResolvedValue(settings) }
+  const pinia = createPinia()
+  setActivePinia(pinia)
+  const wrapper = mount(ProvenanceMap, {
+    props: { provenance, ...props },
+    global: {
+      plugins: [pinia, vuetify],
+      provide: { api },
+    },
+  })
+  return { api, wrapper }
+}
+
+function handlerOf (marker, event) {
+  return marker.on.mock.calls.find(args => args[0] === event)[1]
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  leaflet.markers.length = 0
+  leaflet.polylines.length = 0
+  leaflet.layers.length = 0
+  document.body.innerHTML = ''
+})
+
+describe('ProvenanceMap', () => {
+  it('carga la configuración de la tienda al montarse', async () => {
+    const { api } = mountMap()
+    await flushPromises()
+
+    expect(api.getStoreSettings).toHaveBeenCalled()
+  })
+
+  it('crea el mapa con la tienda y un marcador por municipio de origen', async () => {
+    mountMap()
+    await flushPromises()
+
+    expect(leaflet.L.map).toHaveBeenCalledTimes(1)
+    expect(leaflet.L.tileLayer).toHaveBeenCalledTimes(1)
+    expect(leaflet.markers).toHaveLength(4)
+    expect(leaflet.map.fitBounds).toHaveBeenCalled()
+    expect(leaflet.markers[0].bindTooltip).toHaveBeenCalled()
+  })
+
+  it('al pasar sobre un producto dibuja una línea hasta la tienda', async () => {
+    mountMap()
+    await flushPromises()
+
+    handlerOf(leaflet.markers[1], 'mouseover')()
+
+    expect(leaflet.L.polyline).toHaveBeenCalledTimes(1)
+    expect(leaflet.L.polyline.mock.calls[0][0]).toEqual([[6.23, -75.56], [4.6, -74.08]])
+    expect(leaflet.polylines[0].addTo).toHaveBeenCalled()
+  })
+
+  it('al pasar sobre la tienda dibuja las líneas de todos los productos', async () => {
+    mountMap()
+    await flushPromises()
+
+    handlerOf(leaflet.markers[0], 'mouseover')()
+
+    expect(leaflet.L.polyline).toHaveBeenCalledTimes(3)
+  })
+
+  it('al salir del marcador se limpian las líneas', async () => {
+    mountMap()
+    await flushPromises()
+
+    handlerOf(leaflet.markers[1], 'mouseover')()
+    expect(leaflet.polylines).toHaveLength(1)
+    handlerOf(leaflet.markers[1], 'mouseout')()
+
+    expect(leaflet.polylines[0].remove).toHaveBeenCalled()
+  })
+
+  it('muestra el detalle del producto en un popup sobre el marcador', async () => {
+    mountMap()
+    await flushPromises()
+
+    const marker = leaflet.markers[1]
+    expect(marker.bindPopup).toHaveBeenCalledTimes(1)
+    const popupEl = marker.bindPopup.mock.calls[0][0]
+    expect(popupEl.textContent).toContain('Panela regional')
+    expect(popupEl.textContent).toContain('Asociación La Mesa')
+    expect(popupEl.textContent).toContain('Santa Bárbara')
+  })
+
+  it('no abre el modal web para productos con ubicación', async () => {
+    mountMap()
+    await flushPromises()
+
+    expect(document.body.textContent).not.toContain('Proveedor')
+  })
+
+  it('no dibuja la línea de la tienda cuando la tienda no tiene coordenadas', async () => {
+    const api = { getStoreSettings: vi.fn().mockResolvedValue({ address: 'Cra 1' }) }
+    const pinia = createPinia()
+    setActivePinia(pinia)
+    mount(ProvenanceMap, {
+      props: { provenance },
+      global: {
+        plugins: [pinia, vuetify],
+        provide: { api },
+      },
+    })
+    await flushPromises()
+
+    expect(leaflet.markers).toHaveLength(3)
+    handlerOf(leaflet.markers[0], 'mouseover')()
+    expect(leaflet.L.polyline).not.toHaveBeenCalled()
+  })
+
+  it('muestra un aviso cuando ningún municipio tiene coordenadas', async () => {
+    const noCoords = [
+      { product: { id: 1, name: 'Panela' }, suppliers: [{ supplier: { id: 5, name: 'A' }, municipality: { id: 7, name: 'M' } }] },
+    ]
+    const { wrapper } = mountMap({ provenance: noCoords })
+    await flushPromises()
+
+    expect(leaflet.L.map).not.toHaveBeenCalled()
+    expect(wrapper.text()).toContain('coordenadas')
+  })
+
+  it('mantiene la posición exacta del municipio aunque varios productos coincidan', async () => {
+    mountMap({ provenance: sameMuni })
+    await flushPromises()
+
+    expect(leaflet.markers).toHaveLength(2)
+    expect(leaflet.markers[1].pos).toEqual([4.631028, -74.461588])
+    expect(leaflet.map.on).not.toHaveBeenCalledWith('zoomend', expect.anything())
+  })
+
+  it('agrupa los productos del mismo punto en un marcador con contador', async () => {
+    mountMap({ provenance: sameMuni })
+    await flushPromises()
+
+    const groupIcon = leaflet.L.divIcon.mock.calls.find(args => args[0].className === 'provenance-group-pin')
+    expect(groupIcon).toBeDefined()
+    expect(groupIcon[0].html).toContain('2')
+    expect(groupIcon[0].html).toContain('mdi-package-variant')
+    const groupMarker = leaflet.markers[1]
+    expect(groupMarker.bindPopup).toHaveBeenCalled()
+    expect(groupMarker.bindTooltip.mock.calls[0][0]).toContain('2 productos')
+  })
+
+  it('al hacer clic en el marcador agrupado despliega los productos internos', async () => {
+    mountMap({ provenance: sameMuni })
+    await flushPromises()
+
+    const popupEl = leaflet.markers[1].bindPopup.mock.calls[0][0]
+    expect(popupEl.textContent).toContain('Panela')
+    expect(popupEl.textContent).toContain('Arroz')
+  })
+
+  it('al hacer clic en un producto del popup agrupado muestra su detalle sin cerrar el popup ni propagar el clic al mapa', async () => {
+    mountMap({ provenance: sameMuni })
+    await flushPromises()
+
+    const groupMarker = leaflet.markers[1]
+    const popupEl = groupMarker.bindPopup.mock.calls[0][0]
+    let bubbled = false
+    popupEl.addEventListener('click', () => { bubbled = true })
+    const item = popupEl.querySelector('[data-test="map-popup-item-1"]')
+    item.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+
+    expect(bubbled).toBe(false)
+    expect(groupMarker.closePopup).not.toHaveBeenCalled()
+    expect(groupMarker.setPopupContent).toHaveBeenCalledTimes(1)
+    const detailEl = groupMarker.setPopupContent.mock.calls[0][0]
+    expect(detailEl.textContent).toContain('Arroz')
+    expect(detailEl.textContent).toContain('B')
+    expect(groupMarker.openPopup).toHaveBeenCalled()
+  })
+
+  it('al pasar sobre la tienda dibuja una línea por cada producto agrupado', async () => {
+    mountMap({ provenance: sameMuni })
+    await flushPromises()
+
+    handlerOf(leaflet.markers[0], 'mouseover')()
+
+    expect(leaflet.L.polyline).toHaveBeenCalledTimes(2)
+  })
+
+  it('al pasar sobre el marcador agrupado dibuja las líneas de sus productos', async () => {
+    mountMap({ provenance: sameMuni })
+    await flushPromises()
+
+    handlerOf(leaflet.markers[1], 'mouseover')()
+
+    expect(leaflet.L.polyline).toHaveBeenCalledTimes(2)
+    expect(leaflet.polylines[0].points[0]).toEqual([4.631028, -74.461588])
+  })
+
+  it('muestra un recuadro con todos los productos, incluidos los sin geolocalización', async () => {
+    const withNoGeo = [
+      {
+        product: { id: 1, name: 'Panela regional', catalogue_images: ['http://localhost/media/panela.jpg'] },
+        suppliers: [{ supplier: { id: 5, name: 'Asociación La Mesa' }, municipality: { id: 7, name: 'Santa Bárbara', latitude: 6.23, longitude: -75.56 } }],
+      },
+      {
+        product: { id: 2, name: 'Café de montaña', catalogue_images: [] },
+        suppliers: [{ supplier: { id: 8, name: 'Caficultores del Valle' }, municipality: null }],
+      },
+      {
+        product: { id: 3, name: 'Miel pura', catalogue_images: [] },
+        suppliers: [],
+      },
+    ]
+    const { wrapper } = mountMap({ provenance: withNoGeo })
+    await flushPromises()
+
+    const rows = wrapper.findAll('[data-test="map-product-row"]')
+    expect(rows).toHaveLength(3)
+    expect(rows.map(row => row.text().replace(/\s+/g, ' ').trim())).toEqual([
+      expect.stringContaining('Panela regional'),
+      expect.stringContaining('Café de montaña'),
+      expect.stringContaining('Miel pura'),
+    ])
+    expect(rows[1].text()).toContain('Sin geolocalización')
+    expect(rows[2].text()).toContain('Sin geolocalización')
+    expect(rows[0].text()).toContain('Santa Bárbara')
+  })
+
+  it('al hacer clic en un producto con ubicación centra el mapa y abre su detalle en el marcador', async () => {
+    const { wrapper } = mountMap()
+    await flushPromises()
+
+    await wrapper.find('[data-test="map-product-row"]').trigger('click')
+    await nextTick()
+
+    expect(leaflet.map.flyTo).toHaveBeenCalledTimes(1)
+    expect(leaflet.map.flyTo.mock.calls[0][0]).toEqual([6.23, -75.56])
+    const marker = leaflet.markers[1]
+    expect(marker.setPopupContent).toHaveBeenCalled()
+    expect(marker.setPopupContent.mock.calls[0][0].textContent).toContain('Panela regional')
+    expect(marker.setPopupContent.mock.calls[0][0].textContent).toContain('Asociación La Mesa')
+    expect(marker.openPopup).toHaveBeenCalled()
+    expect(document.body.textContent).not.toContain('Proveedor')
+  })
+
+  it('al hacer clic en un producto sin geolocalización abre el diálogo con la información disponible sin centrar el mapa', async () => {
+    const withNoGeo = [
+      {
+        product: { id: 1, name: 'Panela regional', catalogue_images: [] },
+        suppliers: [{ supplier: { id: 5, name: 'Asociación La Mesa' }, municipality: { id: 7, name: 'Santa Bárbara', latitude: 6.23, longitude: -75.56 } }],
+      },
+      {
+        product: { id: 2, name: 'Café de montaña', catalogue_images: [] },
+        suppliers: [{ supplier: { id: 8, name: 'Caficultores del Valle' }, municipality: null }],
+      },
+    ]
+    const { wrapper } = mountMap({ provenance: withNoGeo })
+    await flushPromises()
+
+    const noGeoRow = wrapper.findAll('[data-test="map-product-row"]').find(row => row.text().includes('Café de montaña'))
+    await noGeoRow.trigger('click')
+    await nextTick()
+
+    expect(leaflet.map.flyTo).not.toHaveBeenCalled()
+    expect(document.body.textContent).toContain('Café de montaña')
+    expect(document.body.textContent).toContain('Caficultores del Valle')
+    expect(document.body.textContent).toContain('sin geolocalización')
+  })
+
+  it('al hacer clic en el botón de zoom general vuelve a encuadrar todos los marcadores', async () => {
+    const { wrapper } = mountMap()
+    await flushPromises()
+    leaflet.map.fitBounds.mockClear()
+
+    await wrapper.find('[data-test="map-reset-zoom"]').trigger('click')
+
+    expect(leaflet.map.fitBounds).toHaveBeenCalledTimes(1)
+  })
+
+  it('lee las coordenadas string del backend y da fondo visible al producto sin imagen', async () => {
+    const backendProvenance = [
+      {
+        product: { id: 110, name: 'Panela condimentada 150 grs', catalogue_images: [] },
+        suppliers: [
+          {
+            supplier: { id: 4, name: 'Asociación Agropecuaria La Mesa' },
+            organization: null,
+            municipality: { id: 2653, name: 'LA MESA', latitude: '4.6310280', longitude: '-74.4615880' },
+            department: { id: 91, name: 'Cundinamarca' },
+            country: { id: 3, name: 'Colombia', code: 'CO' },
+          },
+        ],
+      },
+    ]
+    mountMap({ provenance: backendProvenance })
+    await flushPromises()
+
+    expect(leaflet.L.map).toHaveBeenCalledTimes(1)
+    expect(leaflet.markers).toHaveLength(2)
+    expect(leaflet.markers[1].pos).toEqual([4.631028, -74.461588])
+    const productIcon = leaflet.L.divIcon.mock.calls.find(args => args[0].html.includes('provenance-product-fallback'))
+    expect(productIcon).toBeDefined()
+  })
+})

tests/unit/components/provenance/ProvenanceRelationModal.spec.js

@@ -0,0 +1,96 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ProvenanceRelationModal from '@/components/provenance/ProvenanceRelationModal.vue'
+import vuetify from '@/plugins/vuetify'
+
+const relation = {
+  supplier: { id: 5, name: 'Asociación La Mesa', contact_email: 'info@mesa.co' },
+  organization: { id: 3, name: 'Red de Economía Solidaria' },
+  municipality: { id: 7, name: 'Santa Bárbara' },
+  department: { id: 2, name: 'Antioquia' },
+  country: { id: 1, name: 'Colombia', code: 'CO' },
+}
+const product = {
+  id: 1,
+  name: 'Panela regional',
+  catalogue_images: ['http://localhost/media/panela.jpg'],
+}
+
+function mountModal (props = {}) {
+  return mount(ProvenanceRelationModal, {
+    props: { product, relation, visible: true, ...props },
+    global: { plugins: [vuetify] },
+  })
+}
+
+function bodyText () {
+  return document.body.textContent
+}
+
+describe('ProvenanceRelationModal', () => {
+  it('muestra el producto y todas las entidades de la relación', () => {
+    mountModal()
+
+    expect(bodyText()).toContain('Panela regional')
+    expect(bodyText()).toContain('Proveedor')
+    expect(bodyText()).toContain('Asociación La Mesa')
+    expect(bodyText()).toContain('Organización')
+    expect(bodyText()).toContain('Red de Economía Solidaria')
+    expect(bodyText()).toContain('Municipio')
+    expect(bodyText()).toContain('Santa Bárbara')
+    expect(bodyText()).toContain('Departamento')
+    expect(bodyText()).toContain('Antioquia')
+    expect(bodyText()).toContain('País')
+    expect(bodyText()).toContain('Colombia')
+  })
+
+  it('incluye los detalles de contacto del proveedor', () => {
+    mountModal()
+
+    expect(bodyText()).toContain('info@mesa.co')
+  })
+
+  it('muestra la imagen del producto cuando existe', () => {
+    mountModal()
+
+    expect(document.querySelector('img').getAttribute('src')).toBe(
+      'http://localhost/media/panela.jpg'
+    )
+  })
+
+  it('no muestra las entidades ausentes', () => {
+    mountModal({ relation: { supplier: { id: 5, name: 'Asociación La Mesa' } } })
+
+    expect(bodyText()).not.toContain('Organización')
+    expect(bodyText()).not.toContain('Municipio')
+    expect(bodyText()).not.toContain('Departamento')
+    expect(bodyText()).not.toContain('País')
+  })
+
+  it('muestra el producto y un aviso cuando no hay proveedor vinculado', () => {
+    mountModal({ relation: null })
+
+    expect(bodyText()).toContain('Panela regional')
+    expect(bodyText()).toContain('no se ha vinculado un proveedor')
+  })
+
+  it('no muestra contenido cuando no hay producto ni relación', () => {
+    mountModal({ relation: null, product: null })
+
+    expect(bodyText()).not.toContain('Proveedor')
+    expect(bodyText()).not.toContain('Producto')
+  })
+
+  it('indica que aún no tiene geolocalización cuando la relación no tiene municipio', () => {
+    mountModal({ relation: { supplier: { id: 5, name: 'Asociación La Mesa' } } })
+
+    expect(bodyText()).toContain('Asociación La Mesa')
+    expect(bodyText()).toContain('sin geolocalización')
+  })
+
+  it('no muestra el diálogo cuando visible es false', () => {
+    mountModal({ visible: false })
+
+    expect(bodyText()).not.toContain('Asociación La Mesa')
+  })
+})

tests/unit/components/provenance/ProvenanceSection.spec.js

@@ -0,0 +1,127 @@
+import { describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ProvenanceGraph from '@/components/provenance/ProvenanceGraph.vue'
+import ProvenanceSection from '@/components/provenance/ProvenanceSection.vue'
+import vuetify from '@/plugins/vuetify'
+
+vi.mock('@/components/graph/VisChart.vue', () => ({
+  default: {
+    name: 'VisChart',
+    template: '<div class="vis-chart-stub" />',
+    props: ['nodes', 'edges', 'height', 'options', 'minVerticalSpacing'],
+  },
+}))
+
+const provenance = [
+  {
+    product: { id: 1, name: 'Panela regional por Kg' },
+    suppliers: [
+      {
+        supplier: { id: 5, name: 'Asociación La Mesa' },
+        organization: { id: 3, name: 'Red de Economía Solidaria' },
+        municipality: { id: 7, name: 'La Mesa' },
+        department: { id: 2, name: 'Cundinamarca' },
+        country: { id: 1, name: 'Colombia', code: 'CO' },
+      },
+    ],
+  },
+]
+
+function mountSection (props = {}) {
+  return mount(ProvenanceSection, {
+    props: { provenance, ...props },
+    global: { plugins: [vuetify], stubs: { ProvenanceMap: true } },
+  })
+}
+
+function mapWrapper (wrapper) {
+  return wrapper.findComponent({ name: 'ProvenanceMap' })
+}
+
+describe('ProvenanceSection', () => {
+  it('no renderiza nada cuando no hay provenance', () => {
+    const wrapper = mountSection({ provenance: null })
+
+    expect(wrapper.findComponent(ProvenanceGraph).exists()).toBe(false)
+  })
+
+  it('no renderiza nada cuando provenance es una lista vacía', () => {
+    const wrapper = mountSection({ provenance: [] })
+
+    expect(wrapper.findComponent(ProvenanceGraph).exists()).toBe(false)
+  })
+
+  it('muestra el título y oculta el gráfico por defecto', () => {
+    const wrapper = mountSection()
+
+    expect(wrapper.text()).toContain('Origen de los productos')
+    expect(wrapper.text()).not.toContain('historia')
+    expect(wrapper.findComponent(ProvenanceGraph).exists()).toBe(false)
+  })
+
+  it('muestra el gráfico al hacer clic en el título y lo oculta al volver a hacer clic', async () => {
+    const wrapper = mountSection()
+
+    await wrapper.find('[data-test="provenance-toggle"]').trigger('click')
+    expect(wrapper.findComponent(ProvenanceGraph).exists()).toBe(true)
+
+    await wrapper.find('[data-test="provenance-toggle"]').trigger('click')
+    expect(wrapper.findComponent(ProvenanceGraph).exists()).toBe(false)
+  })
+
+  it('también despliega y repliega con el botón de chevron', async () => {
+    const wrapper = mountSection()
+
+    const button = wrapper.find('[data-test="provenance-toggle-button"]')
+    expect(button.exists()).toBe(true)
+    await button.trigger('click')
+    expect(wrapper.findComponent(ProvenanceGraph).exists()).toBe(true)
+
+    await button.trigger('click')
+    expect(wrapper.findComponent(ProvenanceGraph).exists()).toBe(false)
+  })
+
+  it('pasa el provenance al gráfico al desplegarlo', async () => {
+    const wrapper = mountSection()
+
+    await wrapper.find('[data-test="provenance-toggle"]').trigger('click')
+
+    expect(wrapper.findComponent(ProvenanceGraph).props('provenance')).toStrictEqual(provenance)
+  })
+
+  it('oculta el mapa por defecto', () => {
+    const wrapper = mountSection()
+
+    expect(mapWrapper(wrapper).exists()).toBe(false)
+  })
+
+  it('muestra el mapa al hacer clic en su título y lo oculta al volver a hacer clic', async () => {
+    const wrapper = mountSection()
+
+    await wrapper.find('[data-test="map-toggle"]').trigger('click')
+    expect(mapWrapper(wrapper).exists()).toBe(true)
+
+    await wrapper.find('[data-test="map-toggle"]').trigger('click')
+    expect(mapWrapper(wrapper).exists()).toBe(false)
+  })
+
+  it('también despliega y repliega el mapa con el botón de chevron', async () => {
+    const wrapper = mountSection()
+
+    const button = wrapper.find('[data-test="map-toggle-button"]')
+    expect(button.exists()).toBe(true)
+    await button.trigger('click')
+    expect(mapWrapper(wrapper).exists()).toBe(true)
+
+    await button.trigger('click')
+    expect(mapWrapper(wrapper).exists()).toBe(false)
+  })
+
+  it('pasa el provenance al mapa al desplegarlo', async () => {
+    const wrapper = mountSection()
+
+    await wrapper.find('[data-test="map-toggle"]').trigger('click')
+
+    expect(mapWrapper(wrapper).props('provenance')).toStrictEqual(provenance)
+  })
+})

tests/unit/components/provenance/admin/GeographyManagement.spec.js

@@ -0,0 +1,114 @@
+import { describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import GeographyManagement from '@/components/provenance/admin/GeographyManagement.vue'
+import vuetify from '@/plugins/vuetify'
+import { clickBody, setBodyInput } from './helpers'
+
+const countries = [
+  { id: 1, name: 'Colombia', code: 'CO' },
+  { id: 2, name: 'Venezuela', code: 'VE' },
+]
+
+const departments = [
+  { id: 2, name: 'Cundinamarca', country: 1, country_detail: { id: 1, name: 'Colombia', code: 'CO' } },
+  { id: 3, name: 'Antioquia', country: 1, country_detail: { id: 1, name: 'Colombia', code: 'CO' } },
+]
+
+const municipalities = [
+  { id: 7, name: 'La Mesa', department: 2, country: 1, department_detail: { id: 2, name: 'Cundinamarca' } },
+  { id: 8, name: 'San Antonio', department: 3, country: 1, department_detail: { id: 3, name: 'Antioquia' } },
+]
+
+function mockApi () {
+  return {
+    getCountries: vi.fn().mockResolvedValue(countries),
+    createCountry: vi.fn().mockResolvedValue({}),
+    updateCountry: vi.fn().mockResolvedValue({}),
+    deleteCountry: vi.fn().mockResolvedValue({}),
+    getDepartments: vi.fn().mockResolvedValue(departments),
+    createDepartment: vi.fn().mockResolvedValue({}),
+    updateDepartment: vi.fn().mockResolvedValue({}),
+    deleteDepartment: vi.fn().mockResolvedValue({}),
+    getMunicipalities: vi.fn().mockResolvedValue(municipalities),
+    createMunicipality: vi.fn().mockResolvedValue({}),
+    updateMunicipality: vi.fn().mockResolvedValue({}),
+    deleteMunicipality: vi.fn().mockResolvedValue({}),
+  }
+}
+
+function mountComponent (api) {
+  return mount(GeographyManagement, {
+    global: { plugins: [vuetify], provide: { api } },
+  })
+}
+
+describe('GeographyManagement', () => {
+  it('muestra los países por defecto y permite crear uno', async () => {
+    const api = mockApi()
+    const wrapper = mountComponent(api)
+    await flushPromises()
+
+    expect(api.getCountries).toHaveBeenCalled()
+    expect(wrapper.text()).toContain('Colombia')
+
+    await wrapper.find('[data-testid="geo-country-create"]').trigger('click')
+    setBodyInput('[data-testid="geo-country-form-name"] input', 'Ecuador')
+    setBodyInput('[data-testid="geo-country-form-code"] input', 'EC')
+    clickBody('[data-testid="geo-country-save"]')
+    await flushPromises()
+
+    expect(api.createCountry).toHaveBeenCalledWith({ name: 'Ecuador', code: 'EC' })
+    expect(api.getCountries).toHaveBeenCalledTimes(2)
+  })
+
+  it('cambia a la pestaña de departamentos y crea uno', async () => {
+    const api = mockApi()
+    const wrapper = mountComponent(api)
+    await flushPromises()
+
+    await wrapper.find('[data-testid="geo-tab-departments"]').trigger('click')
+    await flushPromises()
+
+    expect(api.getDepartments).toHaveBeenCalled()
+    expect(wrapper.text()).toContain('Cundinamarca')
+
+    await wrapper.find('[data-testid="geo-department-create"]').trigger('click')
+    setBodyInput('[data-testid="geo-department-form-name"] input', 'Risaralda')
+    const countrySelect = wrapper.findAllComponents({ name: 'VSelect' })
+      .find(select => select.props('items').some(item => item.id === 2))
+    await countrySelect.vm.$emit('update:modelValue', 2)
+    clickBody('[data-testid="geo-department-save"]')
+    await flushPromises()
+
+    expect(api.createDepartment).toHaveBeenCalledWith(expect.objectContaining({
+      name: 'Risaralda',
+      country: 2,
+    }))
+    expect(api.getDepartments).toHaveBeenCalledTimes(2)
+  })
+
+  it('cambia a la pestaña de municipios y crea uno con departamento y país', async () => {
+    const api = mockApi()
+    const wrapper = mountComponent(api)
+    await flushPromises()
+
+    await wrapper.find('[data-testid="geo-tab-municipalities"]').trigger('click')
+    await flushPromises()
+
+    expect(api.getMunicipalities).toHaveBeenCalled()
+    expect(wrapper.text()).toContain('San Antonio')
+
+    await wrapper.find('[data-testid="geo-municipality-create"]').trigger('click')
+    setBodyInput('[data-testid="geo-municipality-form-name"] input', 'Pereira')
+    await wrapper.findAllComponents({ name: 'VAutocomplete' })[0].vm.$emit('update:modelValue', 3)
+    clickBody('[data-testid="geo-municipality-save"]')
+    await flushPromises()
+
+    expect(api.createMunicipality).toHaveBeenCalledWith(expect.objectContaining({
+      name: 'Pereira',
+      department: 3,
+      country: 1,
+    }))
+    expect(api.getMunicipalities).toHaveBeenCalledTimes(2)
+  })
+})

tests/unit/components/provenance/admin/OrganizationsManagement.spec.js

@@ -0,0 +1,117 @@
+import { describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import OrganizationsManagement from '@/components/provenance/admin/OrganizationsManagement.vue'
+import vuetify from '@/plugins/vuetify'
+import { clickBody, setBodyInput } from './helpers'
+
+const organizations = [
+  {
+    id: 1,
+    name: 'Red de Economía Solidaria',
+    description: 'Red de organizaciones',
+    website: 'https://red.example.org',
+    contact_email: 'contacto@red.example.org',
+    contact_phone: '3001112233',
+  },
+  {
+    id: 2,
+    name: 'Cooperativa El Campo',
+    description: null,
+    website: null,
+    contact_email: null,
+    contact_phone: null,
+  },
+]
+
+function mockApi () {
+  return {
+    getOrganizations: vi.fn().mockResolvedValue(organizations),
+    createOrganization: vi.fn().mockResolvedValue({}),
+    updateOrganization: vi.fn().mockResolvedValue({}),
+    deleteOrganization: vi.fn().mockResolvedValue({}),
+  }
+}
+
+function mountComponent (api) {
+  return mount(OrganizationsManagement, {
+    global: { plugins: [vuetify], provide: { api } },
+  })
+}
+
+function fillForm () {
+  setBodyInput('[data-testid="org-form-name"] input', 'Fundación Montaña')
+  setBodyInput('[data-testid="org-form-description"] textarea', 'Fundación')
+  setBodyInput('[data-testid="org-form-website"] input', 'https://montana.example.org')
+  setBodyInput('[data-testid="org-form-email"] input', 'info@montana.example.org')
+  setBodyInput('[data-testid="org-form-phone"] input', '3109876543')
+}
+
+describe('OrganizationsManagement', () => {
+  it('carga y muestra las organizaciones', async () => {
+    const api = mockApi()
+    const wrapper = mountComponent(api)
+    await flushPromises()
+
+    expect(api.getOrganizations).toHaveBeenCalled()
+    expect(wrapper.text()).toContain('Red de Economía Solidaria')
+    expect(wrapper.text()).toContain('Cooperativa El Campo')
+  })
+
+  it('filtra las organizaciones por búsqueda', async () => {
+    const wrapper = mountComponent(mockApi())
+    await flushPromises()
+
+    await wrapper.find('[data-testid="org-search"] input').setValue('Cooperativa')
+
+    expect(wrapper.text()).toContain('Cooperativa El Campo')
+    expect(wrapper.text()).not.toContain('Red de Economía Solidaria')
+  })
+
+  it('crea una organización', async () => {
+    const api = mockApi()
+    const wrapper = mountComponent(api)
+    await flushPromises()
+
+    await wrapper.find('[data-testid="org-create"]').trigger('click')
+    fillForm()
+    clickBody('[data-testid="org-save"]')
+    await flushPromises()
+
+    expect(api.createOrganization).toHaveBeenCalledWith({
+      name: 'Fundación Montaña',
+      description: 'Fundación',
+      website: 'https://montana.example.org',
+      contact_email: 'info@montana.example.org',
+      contact_phone: '3109876543',
+    })
+    expect(api.getOrganizations).toHaveBeenCalledTimes(2)
+  })
+
+  it('edita una organización', async () => {
+    const api = mockApi()
+    const wrapper = mountComponent(api)
+    await flushPromises()
+
+    await wrapper.find('[data-testid="org-edit-1"]').trigger('click')
+    setBodyInput('[data-testid="org-form-name"] input', 'Red de Economía Solidaria Colombia')
+    clickBody('[data-testid="org-save"]')
+    await flushPromises()
+
+    expect(api.updateOrganization).toHaveBeenCalledWith(1, expect.objectContaining({
+      name: 'Red de Economía Solidaria Colombia',
+    }))
+  })
+
+  it('elimina una organización', async () => {
+    const api = mockApi()
+    const wrapper = mountComponent(api)
+    await flushPromises()
+
+    await wrapper.find('[data-testid="org-delete-2"]').trigger('click')
+    clickBody('[data-testid="org-confirm-delete"]')
+    await flushPromises()
+
+    expect(api.deleteOrganization).toHaveBeenCalledWith(2)
+    expect(api.getOrganizations).toHaveBeenCalledTimes(2)
+  })
+})

tests/unit/components/provenance/admin/SupplierLinkDialog.spec.js

@@ -0,0 +1,72 @@
+import { describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import SupplierLinkDialog from '@/components/provenance/admin/SupplierLinkDialog.vue'
+import vuetify from '@/plugins/vuetify'
+import { clickBody } from './helpers'
+
+const suppliers = [
+  { id: 5, name: 'Asociación Agropecuaria La Mesa' },
+  { id: 9, name: 'Finca El Paraíso' },
+  { id: 12, name: 'Cooperativa del Valle' },
+]
+
+function mockApi () {
+  return {
+    getSuppliers: vi.fn().mockResolvedValue(suppliers),
+    getProduct: vi.fn().mockResolvedValue({ id: 1, name: 'Panela regional por Kg', suppliers: [5] }),
+    updateProduct: vi.fn().mockResolvedValue({}),
+  }
+}
+
+function mountDialog (api, props = {}) {
+  return mount(SupplierLinkDialog, {
+    props: { visible: true, product: { id: 1, name: 'Panela regional por Kg' }, ...props },
+    global: { plugins: [vuetify], provide: { api } },
+  })
+}
+
+describe('SupplierLinkDialog', () => {
+  it('carga los proveedores y los suppliers actuales del producto al abrir', async () => {
+    const api = mockApi()
+    mountDialog(api)
+    await flushPromises()
+
+    expect(api.getSuppliers).toHaveBeenCalled()
+    expect(api.getProduct).toHaveBeenCalledWith(1)
+    expect(document.body.textContent).toContain('Panela regional por Kg')
+  })
+
+  it('permite cambiar la selección y guarda los proveedores', async () => {
+    const api = mockApi()
+    const wrapper = mountDialog(api)
+    await flushPromises()
+
+    const autocomplete = wrapper.findAllComponents({ name: 'VAutocomplete' })
+      .find(component => component.props('items').some(item => item.id === 5))
+    await autocomplete.vm.$emit('update:modelValue', [5, 9])
+
+    expect(document.body.textContent).toContain('Seleccionados (2)')
+
+    clickBody('[data-testid="supplier-link-save"]')
+    await flushPromises()
+
+    expect(api.updateProduct).toHaveBeenCalledWith(1, { suppliers: [5, 9] })
+  })
+
+  it('mantiene los proveedores seleccionados aunque el filtro no los incluya', async () => {
+    const api = mockApi()
+    const wrapper = mountDialog(api)
+    await flushPromises()
+
+    const autocomplete = wrapper.findAllComponents({ name: 'VAutocomplete' })
+      .find(component => component.props('items').some(item => item.id === 5))
+    await autocomplete.vm.$emit('update:modelValue', [5, 12])
+    await autocomplete.vm.$emit('update:search', 'Finca')
+
+    const items = autocomplete.props('items')
+    expect(items.some(item => item.id === 5)).toBe(true)
+    expect(items.some(item => item.id === 12)).toBe(true)
+    expect(items.some(item => item.id === 9)).toBe(true)
+    expect(items.some(item => item.id === 7)).toBe(false)
+  })
+})

tests/unit/components/provenance/admin/SuppliersManagement.spec.js

@@ -0,0 +1,143 @@
+import { describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import SuppliersManagement from '@/components/provenance/admin/SuppliersManagement.vue'
+import vuetify from '@/plugins/vuetify'
+import { clickBody, setBodyInput } from './helpers'
+
+const organizations = [
+  { id: 3, name: 'Red de Economía Solidaria' },
+  { id: 4, name: 'Cooperativa El Campo' },
+]
+
+const municipalities = [
+  { id: 7, name: 'La Mesa', department: 2 },
+  { id: 8, name: 'San Antonio', department: 3 },
+]
+
+const departments = [
+  { id: 2, name: 'Cundinamarca' },
+  { id: 3, name: 'Antioquia' },
+]
+
+const suppliers = [
+  {
+    id: 5,
+    name: 'Asociación Agropecuaria La Mesa',
+    description: 'Cooperativa de campesinos',
+    organization: 3,
+    organization_detail: { id: 3, name: 'Red de Economía Solidaria' },
+    municipality: 7,
+    municipality_detail: { id: 7, name: 'La Mesa' },
+    contact_email: 'contacto@agro.example.org',
+    contact_phone: '300 123 4567',
+  },
+  {
+    id: 6,
+    name: 'Finca El Paraíso',
+    description: null,
+    organization: null,
+    organization_detail: null,
+    municipality: null,
+    municipality_detail: null,
+    contact_email: null,
+    contact_phone: null,
+  },
+]
+
+function mockApi () {
+  return {
+    getSuppliers: vi.fn().mockResolvedValue(suppliers),
+    getOrganizations: vi.fn().mockResolvedValue(organizations),
+    getMunicipalities: vi.fn().mockResolvedValue(municipalities),
+    getDepartments: vi.fn().mockResolvedValue(departments),
+    createSupplier: vi.fn().mockResolvedValue({}),
+    updateSupplier: vi.fn().mockResolvedValue({}),
+    deleteSupplier: vi.fn().mockResolvedValue({}),
+  }
+}
+
+function mountComponent (api) {
+  return mount(SuppliersManagement, {
+    global: { plugins: [vuetify], provide: { api } },
+  })
+}
+
+describe('SuppliersManagement', () => {
+  it('carga y muestra los proveedores con su organización y municipio', async () => {
+    const api = mockApi()
+    const wrapper = mountComponent(api)
+    await flushPromises()
+
+    expect(api.getSuppliers).toHaveBeenCalled()
+    expect(wrapper.text()).toContain('Asociación Agropecuaria La Mesa')
+    expect(wrapper.text()).toContain('Red de Economía Solidaria')
+    expect(wrapper.text()).toContain('La Mesa')
+  })
+
+  it('muestra el departamento en el título del municipio', async () => {
+    const api = mockApi()
+    const wrapper = mountComponent(api)
+    await flushPromises()
+
+    await wrapper.find('[data-testid="supplier-create"]').trigger('click')
+    const autocomplete = wrapper.findAllComponents({ name: 'VAutocomplete' })[0]
+    const itemTitle = autocomplete.props('itemTitle')
+
+    expect(itemTitle({ id: 7, name: 'La Mesa', department: 2 })).toBe('La Mesa (Cundinamarca)')
+  })
+
+  it('crea un proveedor con organización y municipio', async () => {
+    const api = mockApi()
+    const wrapper = mountComponent(api)
+    await flushPromises()
+
+    await wrapper.find('[data-testid="supplier-create"]').trigger('click')
+
+    setBodyInput('[data-testid="supplier-form-name"] input', 'Asociación El Cedro')
+    setBodyInput('[data-testid="supplier-form-description"] textarea', 'Caficultores')
+    const orgSelect = wrapper.findAllComponents({ name: 'VSelect' })
+      .find(select => select.props('items').some(item => item.id === 4))
+    await orgSelect.vm.$emit('update:modelValue', 4)
+    await wrapper.findAllComponents({ name: 'VAutocomplete' })[0].vm.$emit('update:modelValue', 8)
+    clickBody('[data-testid="supplier-save"]')
+    await flushPromises()
+
+    expect(api.createSupplier).toHaveBeenCalledWith(expect.objectContaining({
+      name: 'Asociación El Cedro',
+      description: 'Caficultores',
+      organization: 4,
+      municipality: 8,
+    }))
+    expect(api.getSuppliers).toHaveBeenCalledTimes(2)
+  })
+
+  it('edita un proveedor conservando la organización seleccionada', async () => {
+    const api = mockApi()
+    const wrapper = mountComponent(api)
+    await flushPromises()
+
+    await wrapper.find('[data-testid="supplier-edit-5"]').trigger('click')
+    setBodyInput('[data-testid="supplier-form-name"] input', 'Asociación Agropecuaria La Mesa Renovada')
+    clickBody('[data-testid="supplier-save"]')
+    await flushPromises()
+
+    expect(api.updateSupplier).toHaveBeenCalledWith(5, expect.objectContaining({
+      name: 'Asociación Agropecuaria La Mesa Renovada',
+      organization: 3,
+      municipality: 7,
+    }))
+  })
+
+  it('elimina un proveedor', async () => {
+    const api = mockApi()
+    const wrapper = mountComponent(api)
+    await flushPromises()
+
+    await wrapper.find('[data-testid="supplier-delete-6"]').trigger('click')
+    clickBody('[data-testid="supplier-confirm-delete"]')
+    await flushPromises()
+
+    expect(api.deleteSupplier).toHaveBeenCalledWith(6)
+    expect(api.getSuppliers).toHaveBeenCalledTimes(2)
+  })
+})

tests/unit/components/provenance/admin/helpers.js

@@ -0,0 +1,23 @@
+// Helpers para interactuar con el contenido de diálogos, que Vuetify
+// teleporta a document.body fuera del DOM del wrapper.
+
+function setNativeValue (el, value) {
+  const proto = el.tagName === 'TEXTAREA'
+    ? window.HTMLTextAreaElement.prototype
+    : window.HTMLInputElement.prototype
+  const setter = Object.getOwnPropertyDescriptor(proto, 'value').set
+  setter.call(el, value)
+  el.dispatchEvent(new Event('input', { bubbles: true }))
+}
+
+export function setBodyInput (selector, value) {
+  const el = document.body.querySelector(selector)
+  if (!el) throw new Error(`Input no encontrado en body: ${selector}`)
+  setNativeValue(el, value)
+}
+
+export function clickBody (selector) {
+  const el = document.body.querySelector(selector)
+  if (!el) throw new Error(`Elemento no encontrado en body: ${selector}`)
+  el.click()
+}

tests/unit/components/provenance/provenance-graph.spec.js

@@ -0,0 +1,176 @@
+import { describe, expect, it } from 'vitest'
+import {
+  buildProvenanceGraph,
+  hasAnySupplier,
+} from '@/components/provenance/provenance-graph'
+
+const ALL_KINDS = ['product', 'supplier', 'organization', 'municipality', 'department', 'country']
+
+const singleRelation = [
+  {
+    product: {
+      id: 1,
+      name: 'Panela regional por Kg',
+      catalogue_images: ['http://localhost/media/panela.jpg'],
+    },
+    suppliers: [
+      {
+        supplier: { id: 5, name: 'Asociación Agropecuaria La Mesa' },
+        organization: { id: 3, name: 'Red de Economía Solidaria' },
+        municipality: { id: 7, name: 'La Mesa' },
+        department: { id: 2, name: 'Cundinamarca' },
+        country: { id: 1, name: 'Colombia' },
+      },
+    ],
+  },
+]
+
+function twoSuppliers (overrides = {}) {
+  return [
+    {
+      product: { id: 1, name: 'Panela' },
+      suppliers: [
+        {
+          supplier: { id: 5, name: 'Asociación A' },
+          organization: { id: 3, name: 'Red' },
+          municipality: { id: 7, name: 'La Mesa' },
+          department: { id: 2, name: 'Cundinamarca' },
+          country: { id: 1, name: 'Colombia' },
+          ...(overrides.first || {}),
+        },
+        {
+          supplier: { id: 6, name: 'Asociación B' },
+          organization: { id: 3, name: 'Red' },
+          municipality: { id: 8, name: 'San Antonio' },
+          department: { id: 3, name: 'Antioquia' },
+          country: { id: 1, name: 'Colombia' },
+          ...(overrides.second || {}),
+        },
+      ],
+    },
+  ]
+}
+
+function edgeOf (graph, from, to) {
+  return graph.edges.find(edge => edge.from === from && edge.to === to)
+}
+
+describe('hasAnySupplier', () => {
+  it('es true cuando algún producto tiene proveedores', () => {
+    expect(hasAnySupplier(singleRelation)).toBe(true)
+  })
+
+  it('es false cuando todos los productos están sin proveedores', () => {
+    const empty = [{ product: { id: 1, name: 'Panela' }, suppliers: [] }]
+    expect(hasAnySupplier(empty)).toBe(false)
+  })
+
+  it('es false cuando no hay provenance', () => {
+    expect(hasAnySupplier([])).toBe(false)
+  })
+})
+
+describe('buildProvenanceGraph', () => {
+  it('por defecto solo grafica productos y proveedores', () => {
+    const graph = buildProvenanceGraph(singleRelation)
+
+    expect(graph.nodes.map(n => n.kind)).toEqual(['product', 'supplier'])
+    expect(graph.edges).toEqual([{ from: 'product:1', to: 'supplier:5', certain: true }])
+  })
+
+  it('con todos los niveles grafica la cadena completa y la organización', () => {
+    const graph = buildProvenanceGraph(singleRelation, ALL_KINDS)
+
+    expect(edgeOf(graph, 'product:1', 'supplier:5')).toEqual({ from: 'product:1', to: 'supplier:5', certain: true })
+    expect(edgeOf(graph, 'supplier:5', 'organization:3').certain).toBe(true)
+    expect(edgeOf(graph, 'supplier:5', 'municipality:7')).toEqual({ from: 'supplier:5', to: 'municipality:7', certain: true })
+    expect(edgeOf(graph, 'municipality:7', 'department:2').certain).toBe(true)
+    expect(edgeOf(graph, 'department:2', 'country:1').certain).toBe(true)
+  })
+
+  it('con varios proveedores crea el punto de disyunción y la duda se propaga', () => {
+    const graph = buildProvenanceGraph(twoSuppliers(), ALL_KINDS)
+
+    expect(graph.nodes.map(n => n.id)).toContain('junction:1')
+    expect(edgeOf(graph, 'product:1', 'junction:1')).toEqual({ from: 'product:1', to: 'junction:1', certain: true })
+    expect(edgeOf(graph, 'junction:1', 'supplier:5').certain).toBe(false)
+    expect(edgeOf(graph, 'junction:1', 'supplier:6').certain).toBe(false)
+    expect(edgeOf(graph, 'supplier:5', 'municipality:7').certain).toBe(false)
+    expect(edgeOf(graph, 'municipality:7', 'department:2').certain).toBe(false)
+    expect(edgeOf(graph, 'department:2', 'country:1').certain).toBe(true)
+    expect(edgeOf(graph, 'supplier:5', 'organization:3').certain).toBe(true)
+  })
+
+  it('omite los niveles no solicitados conectando el nivel previo con el siguiente', () => {
+    const graph = buildProvenanceGraph(singleRelation, ['product', 'supplier', 'department'])
+
+    expect(graph.nodes.map(n => n.kind)).toEqual(['product', 'supplier', 'department'])
+    expect(edgeOf(graph, 'supplier:5', 'department:2')).toEqual({ from: 'supplier:5', to: 'department:2', certain: true })
+    expect(edgeOf(graph, 'supplier:5', 'municipality:7')).toBeUndefined()
+  })
+
+  it('sin proveedores activos conecta el producto con el siguiente nivel', () => {
+    const graph = buildProvenanceGraph(singleRelation, ['product', 'municipality', 'department'])
+
+    expect(edgeOf(graph, 'product:1', 'municipality:7')).toEqual({ from: 'product:1', to: 'municipality:7', certain: true })
+    expect(edgeOf(graph, 'municipality:7', 'department:2').certain).toBe(true)
+  })
+
+  it('sin productos activos los proveedores quedan como raíces sin junction', () => {
+    const graph = buildProvenanceGraph(twoSuppliers(), ['supplier', 'municipality'])
+
+    expect(graph.nodes.some(n => n.kind === 'product')).toBe(false)
+    expect(graph.nodes.some(n => n.kind === 'junction')).toBe(false)
+    expect(edgeOf(graph, 'supplier:5', 'municipality:7').certain).toBe(false)
+  })
+
+  it('con país activo crea el nodo país aunque se omitan niveles intermedios', () => {
+    const graph = buildProvenanceGraph(singleRelation, ['product', 'supplier', 'country'])
+
+    expect(graph.nodes.map(n => n.id)).toContain('country:1')
+    expect(edgeOf(graph, 'supplier:5', 'country:1').certain).toBe(true)
+  })
+
+  it('no crea nodos de país si no se solicita', () => {
+    const graph = buildProvenanceGraph(singleRelation, ['product', 'supplier', 'municipality'])
+
+    expect(graph.nodes.some(n => n.kind === 'country')).toBe(false)
+  })
+
+  it('no duplica aristas cuando varios productos comparten proveedor y municipio', () => {
+    const data = [
+      { product: { id: 1, name: 'Panela' }, suppliers: [{ supplier: { id: 5, name: 'A' }, municipality: { id: 7, name: 'La Mesa' }, department: { id: 2, name: 'Cundinamarca' } }] },
+      { product: { id: 2, name: 'Arroz' }, suppliers: [{ supplier: { id: 5, name: 'A' }, municipality: { id: 7, name: 'La Mesa' }, department: { id: 2, name: 'Cundinamarca' } }] },
+    ]
+    const graph = buildProvenanceGraph(data, ['product', 'supplier', 'municipality'])
+
+    expect(graph.nodes.filter(n => n.id === 'municipality:7')).toHaveLength(1)
+    expect(graph.edges.filter(e => e.from === 'supplier:5' && e.to === 'municipality:7')).toHaveLength(1)
+  })
+
+  it('si el mismo par de nodos repite con distinta certeza, gana la duda', () => {
+    const data = [
+      { product: { id: 1, name: 'Panela' }, suppliers: [{ supplier: { id: 5, name: 'A' }, organization: { id: 3, name: 'Red' } }] },
+      { product: { id: 2, name: 'Arroz' }, suppliers: [{ supplier: { id: 5, name: 'A' }, organization: { id: 3, name: 'Red' } }, { supplier: { id: 6, name: 'B' }, organization: { id: 4, name: 'Coop' } }] },
+    ]
+    const graph = buildProvenanceGraph(data, ['product', 'supplier', 'organization'])
+
+    expect(graph.edges.filter(e => e.from === 'supplier:5' && e.to === 'organization:3')).toHaveLength(1)
+    expect(edgeOf(graph, 'supplier:5', 'organization:3').certain).toBe(false)
+  })
+
+  it('incluye la imagen y el detalle de la entidad del producto', () => {
+    const graph = buildProvenanceGraph(singleRelation)
+    const product = graph.nodes.find(n => n.id === 'product:1')
+
+    expect(product.image).toBe('http://localhost/media/panela.jpg')
+    expect(product.entity.kind).toBe('product')
+  })
+
+  it('devuelve un grafo vacío cuando no hay provenance', () => {
+    const graph = buildProvenanceGraph([])
+
+    expect(graph.nodes).toEqual([])
+    expect(graph.edges).toEqual([])
+  })
+})

tests/unit/pages/admin/admin-pages.spec.js

@@ -0,0 +1,83 @@
+import { describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { useAuthStore } from '@/stores/auth'
+import OrganizationsManagement from '@/components/provenance/admin/OrganizationsManagement.vue'
+import SuppliersManagement from '@/components/provenance/admin/SuppliersManagement.vue'
+import GeographyManagement from '@/components/provenance/admin/GeographyManagement.vue'
+import OrganizationsPage from '@/pages/admin/organizations.vue'
+import SuppliersPage from '@/pages/admin/suppliers.vue'
+import GeographyPage from '@/pages/admin/geography.vue'
+import vuetify from '@/plugins/vuetify'
+
+function mockApi () {
+  return {
+    getOrganizations: vi.fn().mockResolvedValue([]),
+    getSuppliers: vi.fn().mockResolvedValue([]),
+    getMunicipalities: vi.fn().mockResolvedValue([]),
+    getCountries: vi.fn().mockResolvedValue([]),
+    getDepartments: vi.fn().mockResolvedValue([]),
+  }
+}
+
+function mountAdmin (page, api, role) {
+  const pinia = createPinia()
+  setActivePinia(pinia)
+  const authStore = useAuthStore()
+  authStore.setUser({ role, username: 'admin' })
+  const wrapper = mount(page, {
+    global: { plugins: [pinia, vuetify], provide: { api } },
+  })
+  return { wrapper }
+}
+
+async function flushAll (wrapper) {
+  await flushPromises()
+  await wrapper.vm.$nextTick()
+}
+
+describe('página admin/organizations', () => {
+  it('renderiza OrganizationsManagement cuando el usuario es administrador', async () => {
+    const { wrapper } = mountAdmin(OrganizationsPage, mockApi(), 'administrator')
+    await flushAll(wrapper)
+
+    expect(wrapper.findComponent(OrganizationsManagement).exists()).toBe(true)
+  })
+
+  it('no renderiza el componente cuando el usuario no es administrador', async () => {
+    const { wrapper } = mountAdmin(OrganizationsPage, mockApi(), 'publico')
+
+    expect(wrapper.findComponent(OrganizationsManagement).exists()).toBe(false)
+    expect(wrapper.text()).toBe('')
+  })
+})
+
+describe('página admin/suppliers', () => {
+  it('renderiza SuppliersManagement cuando el usuario es administrador', async () => {
+    const { wrapper } = mountAdmin(SuppliersPage, mockApi(), 'administrator')
+    await flushAll(wrapper)
+
+    expect(wrapper.findComponent(SuppliersManagement).exists()).toBe(true)
+  })
+
+  it('no renderiza el componente cuando el usuario no es administrador', async () => {
+    const { wrapper } = mountAdmin(SuppliersPage, mockApi(), 'publico')
+
+    expect(wrapper.findComponent(SuppliersManagement).exists()).toBe(false)
+  })
+})
+
+describe('página admin/geography', () => {
+  it('renderiza GeographyManagement cuando el usuario es administrador', async () => {
+    const { wrapper } = mountAdmin(GeographyPage, mockApi(), 'administrator')
+    await flushAll(wrapper)
+
+    expect(wrapper.findComponent(GeographyManagement).exists()).toBe(true)
+  })
+
+  it('no renderiza el componente cuando el usuario no es administrador', async () => {
+    const { wrapper } = mountAdmin(GeographyPage, mockApi(), 'publico')
+
+    expect(wrapper.findComponent(GeographyManagement).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/pages/sincronizar_productos_tryton.spec.js

@@ -0,0 +1,82 @@
+import { describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { useAuthStore } from '@/stores/auth'
+import ProductsFromTrytonPage from '@/pages/sincronizar_productos_tryton.vue'
+import vuetify from '@/plugins/vuetify'
+
+const syncResult = {
+  checked_tryton_products: [{ id: 190, name: 'Producto 1' }],
+  created_products: [{ id: 3, name: 'Producto 1' }],
+  updated_products: [],
+  failed_products: [],
+  untouched_products: [],
+  created_categories: [
+    { id: 9, name: 'Abarrotes', external_id: '5' },
+  ],
+  updated_categories: [
+    {
+      id: 7,
+      name: 'Cereales',
+      external_id: '7',
+      detail: 'Nombre: Granos → Cereales',
+    },
+  ],
+}
+
+function mockApi () {
+  return {
+    getProductsFromTryton: vi.fn().mockResolvedValue(syncResult),
+  }
+}
+
+async function mountPageAsAdmin (api) {
+  const pinia = createPinia()
+  setActivePinia(pinia)
+  const authStore = useAuthStore()
+  authStore.setUser({ role: 'administrator', username: 'admin' })
+  const wrapper = mount(ProductsFromTrytonPage, {
+    global: { plugins: [pinia, vuetify], provide: { api } },
+  })
+  await flushPromises()
+  await wrapper.vm.$nextTick()
+  return wrapper
+}
+
+async function startSync (wrapper) {
+  const button = wrapper
+    .findAll('button')
+    .find(b => b.text().includes('Iniciar Sincronización'))
+  await button.trigger('click')
+  await flushPromises()
+  await wrapper.vm.$nextTick()
+}
+
+describe('página sincronizar_productos_tryton', () => {
+  it('muestra las categorías creadas al sincronizar productos', async () => {
+    const wrapper = await mountPageAsAdmin(mockApi())
+    await startSync(wrapper)
+
+    expect(wrapper.text()).toContain('Categorías creadas (1)')
+    expect(wrapper.text()).toContain('Abarrotes')
+  })
+
+  it('muestra las categorías actualizadas con su detalle', async () => {
+    const wrapper = await mountPageAsAdmin(mockApi())
+    await startSync(wrapper)
+
+    expect(wrapper.text()).toContain('Categorías actualizadas (1)')
+    expect(wrapper.text()).toContain('Cereales')
+    expect(wrapper.text()).toContain('Nombre: Granos → Cereales')
+  })
+
+  it('mantiene el resumen de productos al sincronizar', async () => {
+    const api = mockApi()
+    const wrapper = await mountPageAsAdmin(api)
+    await startSync(wrapper)
+
+    expect(api.getProductsFromTryton).toHaveBeenCalled()
+    expect(wrapper.text()).toContain('✅ Creados (1)')
+    expect(wrapper.text()).toContain('Producto 1')
+  })
+})

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

@@ -0,0 +1,217 @@
+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' })
+  })
+})
+
+describe('DjangoApi provenance CRUD', () => {
+  beforeEach(() => {
+    vi.stubEnv('VITE_DJANGO_BASE_URL', 'http://backend.test')
+    http.get.mockReset()
+    http.post.mockReset()
+    http.patch.mockReset()
+    http.delete.mockReset()
+    http.get.mockResolvedValue({ data: [] })
+    http.post.mockResolvedValue({ data: { id: 1 } })
+    http.patch.mockResolvedValue({ data: { id: 1 } })
+    http.delete.mockResolvedValue({ data: {} })
+  })
+
+  it('getProduct consulta el detalle autenticado del producto', async () => {
+    const api = new DjangoApi()
+
+    await api.getProduct(3)
+
+    expect(http.get).toHaveBeenCalledWith(
+      'http://backend.test/don_confiao/api/products/3/'
+    )
+  })
+
+  it('getOrganizations consulta la lista de organizaciones', async () => {
+    const api = new DjangoApi()
+
+    await api.getOrganizations()
+
+    expect(http.get).toHaveBeenCalledWith(
+      'http://backend.test/don_confiao/api/organizations/'
+    )
+  })
+
+  it('createOrganization hace POST con los datos', async () => {
+    const api = new DjangoApi()
+    const payload = { name: 'Red de Economía Solidaria' }
+
+    await api.createOrganization(payload)
+
+    expect(http.post).toHaveBeenCalledWith(
+      'http://backend.test/don_confiao/api/organizations/',
+      payload
+    )
+  })
+
+  it('updateOrganization hace PATCH con los datos', async () => {
+    const api = new DjangoApi()
+    const payload = { description: 'Nueva descripción' }
+
+    await api.updateOrganization(3, payload)
+
+    expect(http.patch).toHaveBeenCalledWith(
+      'http://backend.test/don_confiao/api/organizations/3/',
+      payload
+    )
+  })
+
+  it('deleteOrganization hace DELETE', async () => {
+    const api = new DjangoApi()
+
+    await api.deleteOrganization(3)
+
+    expect(http.delete).toHaveBeenCalledWith(
+      'http://backend.test/don_confiao/api/organizations/3/'
+    )
+  })
+
+  it('getSuppliers consulta la lista de proveedores', async () => {
+    const api = new DjangoApi()
+
+    await api.getSuppliers()
+
+    expect(http.get).toHaveBeenCalledWith(
+      'http://backend.test/don_confiao/api/suppliers/'
+    )
+  })
+
+  it('createSupplier hace POST con datos de proveedor', async () => {
+    const api = new DjangoApi()
+    const payload = { name: 'Asociación La Mesa', organization: 3, municipality: 7 }
+
+    await api.createSupplier(payload)
+
+    expect(http.post).toHaveBeenCalledWith(
+      'http://backend.test/don_confiao/api/suppliers/',
+      payload
+    )
+  })
+
+  it('updateSupplier hace PATCH para desvincular organización con null', async () => {
+    const api = new DjangoApi()
+
+    await api.updateSupplier(5, { organization: null })
+
+    expect(http.patch).toHaveBeenCalledWith(
+      'http://backend.test/don_confiao/api/suppliers/5/',
+      { organization: null }
+    )
+  })
+
+  it('deleteSupplier hace DELETE', async () => {
+    const api = new DjangoApi()
+
+    await api.deleteSupplier(5)
+
+    expect(http.delete).toHaveBeenCalledWith(
+      'http://backend.test/don_confiao/api/suppliers/5/'
+    )
+  })
+
+  it('CRUD de países usa el endpoint countries', async () => {
+    const api = new DjangoApi()
+
+    await api.getCountries()
+    await api.createCountry({ name: 'Colombia', code: 'CO' })
+    await api.updateCountry(1, { code: 'CO' })
+    await api.deleteCountry(1)
+
+    expect(http.get).toHaveBeenCalledWith(
+      'http://backend.test/don_confiao/api/countries/'
+    )
+    expect(http.post).toHaveBeenCalledWith(
+      'http://backend.test/don_confiao/api/countries/',
+      { name: 'Colombia', code: 'CO' }
+    )
+    expect(http.patch).toHaveBeenCalledWith(
+      'http://backend.test/don_confiao/api/countries/1/',
+      { code: 'CO' }
+    )
+    expect(http.delete).toHaveBeenCalledWith(
+      'http://backend.test/don_confiao/api/countries/1/'
+    )
+  })
+
+  it('CRUD de departamentos usa el endpoint departments', async () => {
+    const api = new DjangoApi()
+
+    await api.getDepartments()
+    await api.createDepartment({ name: 'Cundinamarca', country: 1 })
+    await api.updateDepartment(2, { name: 'Antioquia' })
+    await api.deleteDepartment(2)
+
+    expect(http.get).toHaveBeenCalledWith(
+      'http://backend.test/don_confiao/api/departments/'
+    )
+    expect(http.post).toHaveBeenCalledWith(
+      'http://backend.test/don_confiao/api/departments/',
+      { name: 'Cundinamarca', country: 1 }
+    )
+    expect(http.patch).toHaveBeenCalledWith(
+      'http://backend.test/don_confiao/api/departments/2/',
+      { name: 'Antioquia' }
+    )
+    expect(http.delete).toHaveBeenCalledWith(
+      'http://backend.test/don_confiao/api/departments/2/'
+    )
+  })
+
+  it('CRUD de municipios usa el endpoint municipalities', async () => {
+    const api = new DjangoApi()
+
+    await api.getMunicipalities()
+    await api.createMunicipality({ name: 'La Mesa', department: 2, country: 1 })
+    await api.updateMunicipality(7, { name: 'LA MESA' })
+    await api.deleteMunicipality(7)
+
+    expect(http.get).toHaveBeenCalledWith(
+      'http://backend.test/don_confiao/api/municipalities/'
+    )
+    expect(http.post).toHaveBeenCalledWith(
+      'http://backend.test/don_confiao/api/municipalities/',
+      { name: 'La Mesa', department: 2, country: 1 }
+    )
+    expect(http.patch).toHaveBeenCalledWith(
+      'http://backend.test/don_confiao/api/municipalities/7/',
+      { name: 'LA MESA' }
+    )
+    expect(http.delete).toHaveBeenCalledWith(
+      'http://backend.test/don_confiao/api/municipalities/7/'
+    )
+  })
+})

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'],
+      },
+    },
+  },
+})