feat(F-167): completed feature

This commit is contained in:
chattie
2026-08-22 19:17:36 +02:00
parent 767860d546
commit 56eee88315
11 changed files with 74 additions and 55 deletions

View File

@@ -365,7 +365,7 @@ export default function OrderDetailPage() {
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Main content */}
<div className="lg:col-span-2 space-y-6">
<div className="space-y-6">
{/* Actions */}
{allowed.length > 0 && (
<div className="bg-white border border-gray-200 rounded-xl p-6">
@@ -521,9 +521,43 @@ export default function OrderDetailPage() {
</div>
)}
</div>
<div className="bg-white border border-gray-200 rounded-xl p-6">
<h2 className="font-bold text-gray-900 mb-4">Pago</h2>
{order.payment ? (
<div className="space-y-1 text-sm">
<div className="flex justify-between">
<span className="text-gray-600">Método</span>
<span className="font-medium text-gray-900 capitalize">{order.payment.provider.replace(/_/g, ' ')}</span>
</div>
{order.payment.last4 && (
<div className="flex justify-between">
<span className="text-gray-600">Últimos 4</span>
<span className="font-mono font-medium text-gray-900">····{order.payment.last4}</span>
</div>
)}
<div className="flex justify-between">
<span className="text-gray-600">Importe</span>
<span className="font-medium text-gray-900">{formatPrice(order.payment.amountCents)}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-600">Estado</span>
<span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
order.payment.status === 'succeeded' ? 'bg-green-100 text-green-800' :
order.payment.status === 'failed' ? 'bg-red-100 text-red-800' :
order.payment.status === 'refunded' ? 'bg-amber-100 text-amber-800' :
'bg-gray-100 text-gray-800'
}`}>
{order.payment.status}
</span>
</div>
</div>
) : (
<p className="text-sm text-gray-500">No hay una transacción de pago registrada para este pedido.</p>
)}
</div>
</div>
{/* Sidebar */}
{/* Customer column */}
<div className="space-y-6">
{/* F-140: Customer + Addresses + Payment */}
<div className="bg-white border border-gray-200 rounded-xl p-6">
@@ -572,40 +606,10 @@ export default function OrderDetailPage() {
)}
</div>
<div className="bg-white border border-gray-200 rounded-xl p-6">
<h2 className="font-bold text-gray-900 mb-4">Pago</h2>
{order.payment ? (
<div className="space-y-1 text-sm">
<div className="flex justify-between">
<span className="text-gray-600">Método</span>
<span className="font-medium text-gray-900 capitalize">{order.payment.provider.replace(/_/g, ' ')}</span>
</div>
{order.payment.last4 && (
<div className="flex justify-between">
<span className="text-gray-600">Últimos 4</span>
<span className="font-mono font-medium text-gray-900">····{order.payment.last4}</span>
</div>
)}
<div className="flex justify-between">
<span className="text-gray-600">Importe</span>
<span className="font-medium text-gray-900">{formatPrice(order.payment.amountCents)}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-600">Estado</span>
<span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
order.payment.status === 'succeeded' ? 'bg-green-100 text-green-800' :
order.payment.status === 'failed' ? 'bg-red-100 text-red-800' :
order.payment.status === 'refunded' ? 'bg-amber-100 text-amber-800' :
'bg-gray-100 text-gray-800'
}`}>
{order.payment.status}
</span>
</div>
</div>
) : (
<p className="text-sm text-gray-500">No hay una transacción de pago registrada para este pedido.</p>
)}
</div>
</div>
{/* Shipping column */}
<div className="space-y-6">
{/* F-140 already shown above — keep existing Envío section */}
{/* Envío */}
<div className="bg-white border border-gray-200 rounded-xl p-6">