<template>
  <div class="layout-px-spacing">
    <teleport to="#breadcrumb">
      <ul class="navbar-nav flex-row">
        <li>
          <div class="page-header">
            <nav class="breadcrumb-one" aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:;">Reportes</a></li>
                <li class="breadcrumb-item active" aria-current="page"><span>Ventas por Producto</span></li>
              </ol>
            </nav>
          </div>
        </li>
      </ul>
    </teleport>

    <div class="row">
      <div class="col-12">
        <div class="panel lavanderia-panel p-4">
          <h4 class="mb-4">Ventas por Producto</h4>
          <p class="text-muted">Reporte de ventas desglosado por producto/servicio. En futuras versiones se mostrará el detalle desde <code>orden_lavanderia_detalles</code>.</p>
          <router-link to="/ventas/mensual" class="btn btn-primary">Ventas mensuales</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useMeta } from "@/composables/use-meta";
useMeta({ title: "Ventas por Producto" });
</script>
