Delivery tracking: update and view order delivery status

Ecommerce Delivery includes a two-sided delivery tracking system. On the admin side, the DeliveryTracking component lets staff append a new status event to an order — selecting from 11 predefined delivery messages and optionally adding a detail note. On the customer side, the DeliveryStatusList component renders all accumulated events as an expandable timeline, giving buyers full visibility into where their package is at any point.

Admin: updating delivery status

DeliveryTracking is opened from the Sales Report when an admin clicks the green local_shipping icon in an order row. The parent passes the current delivery_status array and the sale ID as props. The admin picks a predefined message from a q-select and may add an optional detail comment in a textarea before clicking Enviar actualización:

<q-select
  rounded
  outlined
  dense
  v-model="estado"
  :options="options"
  label="Seleccionar estado"
  emit-value
  map-options
/>

<q-input
  rounded
  outlined
  autogrow
  dense
  v-model="detail"
  type="textarea"
  label="Detalles o comentario"
/>

Predefined delivery status options

Pedido recibido. Estamos preparando tu envío.
Pedido en alistamiento. Empacando y verificando productos.
Pedido despachado con número de guía:
Pedido despachado. En tránsito hacia el centro de distribución.
Pedido en ruta de entrega. Con el mensajero asignado.
Pedido entregado exitosamente al destinatario.
Entrega fallida. Intentaremos nuevamente.
Pedido retenido por novedad en la dirección. Contactaremos al cliente.
Pedido cancelado por solicitud del cliente.
Devolución en proceso hacia el remitente.
Devolución completada. Producto recibido por el remitente.

API request

saveStatus() posts the selected description and the detail comment to the delivery status endpoint:

let res = await fetch(
  process.env.API_SERVER + `/api/sale/status-delivery/${props.idSale}`,
  {
    method: "POST",
    mode: "cors",
    headers: {
      "Content-Type": "application/json",
      Authorization: "Basic " + sessionUser.token,
    },
    body: JSON.stringify({
      description: description.value,
      detail: detail.value,
    }),
  }
);

The description field is composed by watching estado — when the admin picks an option, the predefined string is prepended to any existing description text:

watch(estado, () => {
  description.value = estado.value + " " + description.value;
});

On a successful response, an optional reloadlist callback fires (if provided by the parent) and closeDialog() is called to dismiss the panel.

Customer: viewing delivery status

DeliveryStatusList is opened from the Shopping List (/shoppingList) page when a customer clicks the yellow local_shipping icon next to their order. The parent passes the deliveryStatus array from the sale object through the liststatus prop. The component renders each event as a q-expansion-item inside a q-list, showing the description and timestamp in the header and the optional detail note in the expanded body:

<q-expansion-item
  v-for="item in statuses"
  :key="item.date + item.timeHour"
  expand-separator
  dense
  group="status"
>
  <template v-slot:header>
    <div class="row items-center justify-between full-width">
      <div class="text-body2 text-primary text-weight-medium">
        {{ item.description }}
      </div>
      <div class="text-caption text-grey-6 text-weight-medium">
        {{ `${item.date} ${item.timeHour}` }}
      </div>
    </div>
  </template>

  <div v-if="item.detail" class="q-mt-sm text-body8 text-weight-medium q-pl-sm">
    {{ item.detail }}
  </div>
</q-expansion-item>

When statuses is empty, the component shows a neutral “Sin cambios en el estado de entrega” message instead. The component watches the liststatus prop with { deep: true, immediate: true } so the timeline stays in sync with the parent if the list is refreshed while the dialog is open:

watch(
  () => props.liststatus,
  (n) => {
    if (n) statuses.value = n;
  },
  { deep: true, immediate: true }
);

Props reference