feat: consulta pública de pedidos por código

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

@@ -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', route: '/pedido', icon: 'mdi-magnify-scan'},
         ],
          menuAdminItems: [
              { title: 'Cuadrar tarro', route: '/cuadrar_tarro', icon: 'mdi-calculator'},

src/components/PublicOrderSummary.vue

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

src/components/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/SummaryPurchase.vue

@@ -10,6 +10,7 @@
       <v-toolbar>
         <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>

src/components/Wellcome.vue

@@ -108,6 +108,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
+            </v-btn>
           </div>
         </v-col>
       </v-row>

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 del pedido</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/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</h1>
+      <p class="text-body-2 text-medium-emphasis mb-4">
+        Ingresa el código de tu pedido 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 del pedido"
+              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/services/api.js

@@ -27,6 +27,10 @@ class Api {
         return this.apiImplementation.getSummaryCatalogPurchase(purchaseId);
     }
 
+    getPublicOrderSummary(code) {
+        return this.apiImplementation.getPublicOrderSummary(code);
+    }
+
     getPurchasesForReconciliation() {
         return this.apiImplementation.getPurchasesForReconciliation();
     }

src/services/django-api.js

@@ -57,6 +57,12 @@ class DjangoApi {
         return this.getRequest(url);
     }
 
+    getPublicOrderSummary(code) {
+        const url =
+            this.base + `/don_confiao/api/resumen_publico/${code}`;
+        return this.getRequest(url);
+    }
+
     getPurchasesForReconciliation() {
         const url = this.base + "/don_confiao/purchases/for_reconciliation";
         return this.getRequest(url);