# 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`

```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