mercadodevida/work/artifacts/ORDERS-FIX/02-design.md

ORDERS-FIX — Design

Feature

ID: ORDERS-FIX Title: Orders detail: refund history shown in human-friendly format

---

Solución

Enfoque: Mejora de UI en el frontend

Dado que el historial usa event.message como string libre, el fix más seguro es mejorar el renderizado:

1. Detectar refunds en el mensaje por keywords
2. Formatear importes en euros (€)
3. Usar iconos visuales (💰 ↔️ 💸)
4. Colores distintivos para refunds (púrpura/rosa vs azul normal)

Cambios en orders/[id]/page.tsx

// Helper para detectar refunds
function isRefundEvent(message: string): boolean {
  const lower = message.toLowerCase();
  return lower.includes('refund') || lower.includes('reembolso') || lower.includes('devolución');
}

// En el render del historial:
{[...history].reverse().map((event) => {
  const isRefund = isRefundEvent(event.message);
  return (
    <div key={event.id} className="flex gap-3">
      <div className={`w-2 h-2 rounded-full mt-1.5 flex-shrink-0 ${
        isRefund ? 'bg-purple-400' : 
        event.eventType === 'SHIPPING_UPDATE' ? 'bg-purple-400' : 'bg-blue-400'
      }`} />
      <div className="min-w-0">
        <p className={`text-sm ${isRefund ? 'text-purple-800 font-medium' : 'text-gray-800'} break-words`}>
          {isRefund && '💸 '}{event.message}
        </p>
        <p className="text-xs text-gray-400">
          {new Date(event.createdAt).toLocaleString('es-ES')}
          {event.actorEmail ? ` · ${event.actorEmail}` : ''}
        </p>
      </div>
    </div>
  );
})}

Beneficios

• No requiere cambios en backend
• Bajo riesgo
• Mejora visual inmediata
• Fallback graceful si no hay refunds

---

Archivos a Modificar

• project/apps/admin/src/app/(dashboard)/orders/[id]/page.tsx

---

Testing

1. Order sin refunds → historial normal (azul)
2. Order con refunds → mensaje con 💸 y color púrpura
3. Eventos shipping → púrpura diferenciado

Gates

• reviewer: PENDING
• security: PENDING
• qa: PENDING