feat(ADM-018): completed feature
This commit is contained in:
chattie
273
project/apps/admin/src/app/(dashboard)/orders/[id]/page.tsx
Normal file
273
project/apps/admin/src/app/(dashboard)/orders/[id]/page.tsx
Normal file
@@ -0,0 +1,273 @@
|
||||
'use client';
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import type { Order, OrderState } from '@/types';
|
||||
import { ordersApi } from '@/lib/api-client';
|
||||
|
||||
const STATE_LABELS: Record<OrderState, string> = {
|
||||
PENDING: 'Pendiente',
|
||||
AWAITING_PAYMENT: 'Esperando pago',
|
||||
PAID: 'Pagado',
|
||||
PROCESSING: 'Procesando',
|
||||
SHIPPED: 'Enviado',
|
||||
DELIVERED: 'Entregado',
|
||||
CANCELLED: 'Cancelado',
|
||||
REFUNDED: 'Reembolsado',
|
||||
PARTIALLY_REFUNDED: 'Reembolso parcial',
|
||||
};
|
||||
|
||||
const STATE_COLORS: Record<OrderState, string> = {
|
||||
PENDING: 'bg-amber-100 text-amber-800',
|
||||
AWAITING_PAYMENT: 'bg-orange-100 text-orange-800',
|
||||
PAID: 'bg-blue-100 text-blue-800',
|
||||
PROCESSING: 'bg-indigo-100 text-indigo-800',
|
||||
SHIPPED: 'bg-purple-100 text-purple-800',
|
||||
DELIVERED: 'bg-green-100 text-green-800',
|
||||
CANCELLED: 'bg-red-100 text-red-800',
|
||||
REFUNDED: 'bg-purple-100 text-purple-800',
|
||||
PARTIALLY_REFUNDED: 'bg-pink-100 text-pink-800',
|
||||
};
|
||||
|
||||
const ALLOWED_TRANSITIONS: Record<OrderState, OrderState[]> = {
|
||||
PENDING: ['AWAITING_PAYMENT', 'CANCELLED'],
|
||||
AWAITING_PAYMENT: ['PAID', 'CANCELLED'],
|
||||
PAID: ['PROCESSING', 'CANCELLED', 'REFUNDED'],
|
||||
PROCESSING: ['SHIPPED', 'CANCELLED', 'REFUNDED'],
|
||||
SHIPPED: ['DELIVERED', 'PARTIALLY_REFUNDED'],
|
||||
DELIVERED: ['PARTIALLY_REFUNDED'],
|
||||
CANCELLED: [],
|
||||
REFUNDED: [],
|
||||
PARTIALLY_REFUNDED: [],
|
||||
};
|
||||
|
||||
const ACTION_LABELS: Record<OrderState, string> = {
|
||||
AWAITING_PAYMENT: 'Marcar como Pagado',
|
||||
PAID: 'Procesar pedido',
|
||||
PROCESSING: 'Marcar como Enviado',
|
||||
SHIPPED: 'Marcar como Entregado',
|
||||
DELIVERED: 'Reembolso parcial',
|
||||
CANCELLED: 'Cancelar pedido',
|
||||
PENDING: 'Marcar como Pagado',
|
||||
REFUNDED: 'Reembolsar',
|
||||
PARTIALLY_REFUNDED: 'Reembolso parcial',
|
||||
};
|
||||
|
||||
function formatPrice(cents: number) {
|
||||
return `€${(cents / 100).toFixed(2)}`;
|
||||
}
|
||||
|
||||
export default function OrderDetailPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const router = useRouter();
|
||||
const [order, setOrder] = useState<Order | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const [transitioning, setTransitioning] = useState(false);
|
||||
const [showConfirm, setShowConfirm] = useState<OrderState | null>(null);
|
||||
const [confirmReason, setConfirmReason] = useState('');
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const data = await ordersApi.get(id);
|
||||
setOrder(data);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Error al cargar');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const handleTransition = async (nextState: OrderState) => {
|
||||
setTransitioning(true);
|
||||
try {
|
||||
const updated = await ordersApi.transition(id, nextState);
|
||||
setOrder(updated);
|
||||
setShowConfirm(null);
|
||||
setConfirmReason('');
|
||||
} catch (err) {
|
||||
alert(err instanceof Error ? err.message : 'Error al cambiar estado');
|
||||
} finally {
|
||||
setTransitioning(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="p-8 flex items-center justify-center min-h-64">
|
||||
<div className="text-gray-400">Cargando...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !order) {
|
||||
return (
|
||||
<div className="p-8">
|
||||
<p className="text-red-600">{error || 'Pedido no encontrado'}</p>
|
||||
<button onClick={load} className="text-sm text-[#2D6A4F] hover:underline mt-2">
|
||||
Reintentar
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const currentState = order.state as OrderState;
|
||||
const allowed = ALLOWED_TRANSITIONS[currentState] ?? [];
|
||||
|
||||
return (
|
||||
<div className="p-8">
|
||||
{/* Back */}
|
||||
<Link href="/orders" className="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700 mb-6">
|
||||
← Volver a pedidos
|
||||
</Link>
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 font-mono">#{order.id.slice(0, 8)}</h1>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
{new Date(order.createdAt).toLocaleString('es-ES', {
|
||||
dateStyle: 'long',
|
||||
timeStyle: 'short',
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<span className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium ${STATE_COLORS[currentState]}`}>
|
||||
<span className="w-2 h-2 rounded-full bg-current" />
|
||||
{STATE_LABELS[currentState]}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Main content */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Actions */}
|
||||
{allowed.length > 0 && (
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h2 className="font-bold text-gray-900 mb-4">Acciones</h2>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{allowed.map((next) => (
|
||||
<button
|
||||
key={next}
|
||||
onClick={() => setShowConfirm(next)}
|
||||
disabled={transitioning}
|
||||
className="px-4 py-2 bg-[#2D6A4F] hover:bg-[#1B4332] disabled:opacity-50 text-white text-sm font-semibold rounded-xl transition-colors"
|
||||
>
|
||||
{ACTION_LABELS[next] ?? next}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Order items */}
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h2 className="font-bold text-gray-900 mb-4">Productos</h2>
|
||||
<div className="space-y-3">
|
||||
{order.items.map((item) => (
|
||||
<div key={item.id} className="flex justify-between items-start py-2 border-b border-gray-50 last:border-0">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900">{item.name}</p>
|
||||
<p className="text-xs text-gray-400">
|
||||
{item.quantity} × {formatPrice(item.unitPriceCents)}
|
||||
{item.discountCents > 0 && ` (-${formatPrice(item.discountCents)})`}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-sm font-bold text-gray-900 ml-4">
|
||||
{formatPrice((item.unitPriceCents - item.discountCents) * item.quantity)}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* Totals */}
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h2 className="font-bold text-gray-900 mb-4">Resumen</h2>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Subtotal</span>
|
||||
<span className="font-medium">{formatPrice(order.subtotalCents)}</span>
|
||||
</div>
|
||||
{order.discountCents > 0 && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Descuento</span>
|
||||
<span className="font-medium text-green-600">-{formatPrice(order.discountCents)}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">IVA</span>
|
||||
<span className="font-medium">{formatPrice(order.taxCents)}</span>
|
||||
</div>
|
||||
<div className="border-t border-gray-200 pt-2 mt-2 flex justify-between items-center">
|
||||
<span className="font-bold text-gray-900">Total</span>
|
||||
<span className="text-xl font-bold text-[#2D6A4F]">{formatPrice(order.totalCents)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Timeline */}
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-6">
|
||||
<h2 className="font-bold text-gray-900 mb-4">Historial</h2>
|
||||
<div className="space-y-3">
|
||||
<div className="flex gap-3">
|
||||
<div className="w-2 h-2 rounded-full bg-[#2D6A4F] mt-1.5 flex-shrink-0" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-900">{STATE_LABELS[currentState]}</p>
|
||||
<p className="text-xs text-gray-400">
|
||||
{new Date(order.createdAt).toLocaleString('es-ES')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Confirmation Modal */}
|
||||
{showConfirm && (
|
||||
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-2xl p-6 max-w-md w-full shadow-xl">
|
||||
<h3 className="text-lg font-bold text-gray-900 mb-2">
|
||||
Confirmar cambio de estado
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 mb-4">
|
||||
¿{ACTION_LABELS[showConfirm] ?? showConfirm}?
|
||||
</p>
|
||||
{(showConfirm === 'CANCELLED' || showConfirm === 'REFUNDED') && (
|
||||
<textarea
|
||||
value={confirmReason}
|
||||
onChange={(e) => setConfirmReason(e.target.value)}
|
||||
placeholder="Motivo (opcional)"
|
||||
rows={2}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-[#2D6A4F] outline-none mb-4 resize-none"
|
||||
/>
|
||||
)}
|
||||
<div className="flex gap-3 justify-end">
|
||||
<button
|
||||
onClick={() => { setShowConfirm(null); setConfirmReason(''); }}
|
||||
className="px-4 py-2 text-sm text-gray-600 hover:text-gray-900 transition-colors"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleTransition(showConfirm)}
|
||||
disabled={transitioning}
|
||||
className="px-4 py-2 bg-[#2D6A4F] hover:bg-[#1B4332] disabled:opacity-50 text-white text-sm font-semibold rounded-xl transition-colors"
|
||||
>
|
||||
{transitioning ? 'Guardando...' : 'Confirmar'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user