21e9584907
Some checks failed
CD Preprod / Unit Tests (${{ matrix.app }}) (backend) (push) Blocked by required conditions
CD Preprod / Unit Tests (${{ matrix.app }}) (frontend) (push) Blocked by required conditions
CD Preprod / Integration Tests (push) Blocked by required conditions
CD Preprod / Build & Push Backend (push) Blocked by required conditions
CD Preprod / Build & Push Frontend (push) Blocked by required conditions
CD Preprod / Deploy to Preprod (push) Blocked by required conditions
CD Preprod / Smoke Tests (push) Blocked by required conditions
CD Preprod / Deployment Summary (push) Blocked by required conditions
CD Preprod / Notify Success (push) Blocked by required conditions
CD Preprod / Notify Failure (push) Blocked by required conditions
CD Preprod / Quality (${{ matrix.app }}) (backend) (push) Has been cancelled
CD Preprod / Quality (${{ matrix.app }}) (frontend) (push) Has been cancelled
Aligns preprod with the complete application codebase (cicd branch). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
549 lines
25 KiB
TypeScript
549 lines
25 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { getAllBookings, validateBankTransfer, deleteAdminBooking } from '@/lib/api/admin';
|
|
|
|
interface Booking {
|
|
id: string;
|
|
bookingNumber?: string | null;
|
|
type?: string;
|
|
status: string;
|
|
origin?: string;
|
|
destination?: string;
|
|
carrierName?: string;
|
|
containerType: string;
|
|
volumeCBM?: number;
|
|
weightKG?: number;
|
|
palletCount?: number;
|
|
priceEUR?: number;
|
|
priceUSD?: number;
|
|
primaryCurrency?: string;
|
|
createdAt?: string;
|
|
requestedAt?: string;
|
|
updatedAt?: string;
|
|
organizationId?: string;
|
|
userId?: string;
|
|
}
|
|
|
|
export default function AdminBookingsPage() {
|
|
const [bookings, setBookings] = useState<Booking[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [filterStatus, setFilterStatus] = useState('all');
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [validatingId, setValidatingId] = useState<string | null>(null);
|
|
const [deletingId, setDeletingId] = useState<string | null>(null);
|
|
const [openMenuId, setOpenMenuId] = useState<string | null>(null);
|
|
const [menuPosition, setMenuPosition] = useState<{ top: number; left: number } | null>(null);
|
|
const [selectedBooking, setSelectedBooking] = useState<Booking | null>(null);
|
|
const [showDetailsModal, setShowDetailsModal] = useState(false);
|
|
|
|
useEffect(() => {
|
|
fetchBookings();
|
|
}, []);
|
|
|
|
const handleDeleteBooking = async (bookingId: string) => {
|
|
if (!window.confirm('Supprimer définitivement cette réservation ?')) return;
|
|
setDeletingId(bookingId);
|
|
try {
|
|
await deleteAdminBooking(bookingId);
|
|
setBookings(prev => prev.filter(b => b.id !== bookingId));
|
|
} catch (err: any) {
|
|
setError(err.message || 'Erreur lors de la suppression');
|
|
} finally {
|
|
setDeletingId(null);
|
|
}
|
|
};
|
|
|
|
const handleValidateTransfer = async (bookingId: string) => {
|
|
if (!window.confirm('Confirmer la réception du virement et activer ce booking ?')) return;
|
|
setValidatingId(bookingId);
|
|
try {
|
|
await validateBankTransfer(bookingId);
|
|
await fetchBookings();
|
|
} catch (err: any) {
|
|
setError(err.message || 'Erreur lors de la validation du virement');
|
|
} finally {
|
|
setValidatingId(null);
|
|
}
|
|
};
|
|
|
|
const fetchBookings = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await getAllBookings();
|
|
setBookings(response.bookings || []);
|
|
setError(null);
|
|
} catch (err: any) {
|
|
setError(err.message || 'Impossible de charger les réservations');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const getStatusColor = (status: string) => {
|
|
const colors: Record<string, string> = {
|
|
pending_payment: 'bg-orange-100 text-orange-800',
|
|
pending_bank_transfer: 'bg-amber-100 text-amber-900',
|
|
pending: 'bg-yellow-100 text-yellow-800',
|
|
accepted: 'bg-green-100 text-green-800',
|
|
rejected: 'bg-red-100 text-red-800',
|
|
cancelled: 'bg-red-100 text-red-800',
|
|
};
|
|
return colors[status.toLowerCase()] || 'bg-gray-100 text-gray-800';
|
|
};
|
|
|
|
const getStatusLabel = (status: string) => {
|
|
const labels: Record<string, string> = {
|
|
PENDING_PAYMENT: 'Paiement en attente',
|
|
PENDING_BANK_TRANSFER: 'Virement à valider',
|
|
PENDING: 'En attente transporteur',
|
|
ACCEPTED: 'Accepté',
|
|
REJECTED: 'Rejeté',
|
|
CANCELLED: 'Annulé',
|
|
};
|
|
return labels[status.toUpperCase()] || status;
|
|
};
|
|
|
|
const getShortId = (booking: Booking) => `#${booking.id.slice(0, 8).toUpperCase()}`;
|
|
|
|
const filteredBookings = bookings
|
|
.filter(booking => filterStatus === 'all' || booking.status.toLowerCase() === filterStatus)
|
|
.filter(booking => {
|
|
if (searchTerm === '') return true;
|
|
const s = searchTerm.toLowerCase();
|
|
return (
|
|
booking.bookingNumber?.toLowerCase().includes(s) ||
|
|
booking.id.toLowerCase().includes(s) ||
|
|
booking.carrierName?.toLowerCase().includes(s) ||
|
|
booking.origin?.toLowerCase().includes(s) ||
|
|
booking.destination?.toLowerCase().includes(s) ||
|
|
String(booking.palletCount || '').includes(s) ||
|
|
String(booking.weightKG || '').includes(s) ||
|
|
String(booking.volumeCBM || '').includes(s) ||
|
|
booking.containerType?.toLowerCase().includes(s)
|
|
);
|
|
});
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-96">
|
|
<div className="text-center">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
|
|
<p className="mt-4 text-gray-600">Chargement des réservations...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">Gestion des réservations</h1>
|
|
<p className="mt-1 text-sm text-gray-500">
|
|
Toutes les réservations de la plateforme
|
|
</p>
|
|
</div>
|
|
|
|
{/* Stats Cards */}
|
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
|
<div className="text-xs text-gray-500 uppercase tracking-wide">Total</div>
|
|
<div className="text-2xl font-bold text-gray-900 mt-1">{bookings.length}</div>
|
|
</div>
|
|
<div className="bg-amber-50 rounded-lg shadow-sm border border-amber-200 p-4">
|
|
<div className="text-xs text-amber-700 uppercase tracking-wide">Virements à valider</div>
|
|
<div className="text-2xl font-bold text-amber-700 mt-1">
|
|
{bookings.filter(b => b.status.toUpperCase() === 'PENDING_BANK_TRANSFER').length}
|
|
</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
|
<div className="text-xs text-gray-500 uppercase tracking-wide">En attente transporteur</div>
|
|
<div className="text-2xl font-bold text-yellow-600 mt-1">
|
|
{bookings.filter(b => b.status.toUpperCase() === 'PENDING').length}
|
|
</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
|
<div className="text-xs text-gray-500 uppercase tracking-wide">Acceptées</div>
|
|
<div className="text-2xl font-bold text-green-600 mt-1">
|
|
{bookings.filter(b => b.status.toUpperCase() === 'ACCEPTED').length}
|
|
</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
|
<div className="text-xs text-gray-500 uppercase tracking-wide">Rejetées</div>
|
|
<div className="text-2xl font-bold text-red-600 mt-1">
|
|
{bookings.filter(b => b.status.toUpperCase() === 'REJECTED').length}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Recherche</label>
|
|
<input
|
|
type="text"
|
|
placeholder="N° booking, transporteur, route, palettes, poids, CBM..."
|
|
value={searchTerm}
|
|
onChange={e => setSearchTerm(e.target.value)}
|
|
className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Statut</label>
|
|
<select
|
|
value={filterStatus}
|
|
onChange={e => setFilterStatus(e.target.value)}
|
|
className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 focus:outline-none text-sm"
|
|
>
|
|
<option value="all">Tous les statuts</option>
|
|
<option value="pending_bank_transfer">Virement à valider</option>
|
|
<option value="pending_payment">Paiement en attente</option>
|
|
<option value="pending">En attente transporteur</option>
|
|
<option value="accepted">Accepté</option>
|
|
<option value="rejected">Rejeté</option>
|
|
<option value="cancelled">Annulé</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Error Message */}
|
|
{error && (
|
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{/* Bookings Table */}
|
|
<div className="bg-white rounded-lg shadow overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
N° Booking
|
|
</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Route
|
|
</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Cargo
|
|
</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Transporteur
|
|
</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Statut
|
|
</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Date
|
|
</th>
|
|
<th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{filteredBookings.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={7} className="px-4 py-8 text-center text-sm text-gray-500">
|
|
Aucune réservation trouvée
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
filteredBookings.map(booking => (
|
|
<tr key={booking.id} className="hover:bg-gray-50">
|
|
{/* N° Booking */}
|
|
<td className="px-4 py-4 whitespace-nowrap">
|
|
{booking.bookingNumber && (
|
|
<div className="text-sm font-semibold text-gray-900">{booking.bookingNumber}</div>
|
|
)}
|
|
<div className="text-xs text-gray-400 font-mono">{getShortId(booking)}</div>
|
|
</td>
|
|
|
|
{/* Route */}
|
|
<td className="px-4 py-4 whitespace-nowrap">
|
|
<div className="text-sm font-medium text-gray-900">
|
|
{booking.origin} → {booking.destination}
|
|
</div>
|
|
</td>
|
|
|
|
{/* Cargo */}
|
|
<td className="px-4 py-4 whitespace-nowrap">
|
|
<div className="text-sm text-gray-900">
|
|
{booking.containerType}
|
|
{booking.palletCount != null && (
|
|
<span className="ml-1 text-gray-500">· {booking.palletCount} pal.</span>
|
|
)}
|
|
</div>
|
|
<div className="text-xs text-gray-500 space-x-2">
|
|
{booking.weightKG != null && <span>{booking.weightKG.toLocaleString()} kg</span>}
|
|
{booking.volumeCBM != null && <span>{booking.volumeCBM} CBM</span>}
|
|
</div>
|
|
</td>
|
|
|
|
{/* Transporteur */}
|
|
<td className="px-4 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{booking.carrierName || '—'}
|
|
</td>
|
|
|
|
{/* Statut */}
|
|
<td className="px-4 py-4 whitespace-nowrap">
|
|
<span className={`px-2 py-0.5 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(booking.status)}`}>
|
|
{getStatusLabel(booking.status)}
|
|
</span>
|
|
</td>
|
|
|
|
{/* Date */}
|
|
<td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{new Date(booking.requestedAt || booking.createdAt || '').toLocaleDateString('fr-FR')}
|
|
</td>
|
|
|
|
{/* Actions */}
|
|
<td className="px-4 py-4 whitespace-nowrap text-right text-sm">
|
|
<button
|
|
onClick={(e) => {
|
|
if (openMenuId === booking.id) {
|
|
setOpenMenuId(null);
|
|
setMenuPosition(null);
|
|
} else {
|
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
setMenuPosition({ top: rect.bottom + 5, left: rect.left - 180 });
|
|
setOpenMenuId(booking.id);
|
|
}
|
|
}}
|
|
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
|
|
>
|
|
<svg className="w-5 h-5 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
|
|
</svg>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{/* Actions Dropdown Menu */}
|
|
{openMenuId && menuPosition && (
|
|
<>
|
|
<div
|
|
className="fixed inset-0 z-[998]"
|
|
onClick={() => { setOpenMenuId(null); setMenuPosition(null); }}
|
|
/>
|
|
<div
|
|
className="fixed w-56 bg-white border-2 border-gray-300 rounded-lg shadow-2xl z-[999]"
|
|
style={{ top: `${menuPosition.top}px`, left: `${menuPosition.left}px` }}
|
|
>
|
|
<div className="py-2">
|
|
<button
|
|
onClick={() => {
|
|
const booking = bookings.find(b => b.id === openMenuId);
|
|
if (booking) {
|
|
setSelectedBooking(booking);
|
|
setShowDetailsModal(true);
|
|
}
|
|
setOpenMenuId(null);
|
|
setMenuPosition(null);
|
|
}}
|
|
className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center space-x-3 border-b border-gray-200"
|
|
>
|
|
<svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
<span className="text-sm font-medium text-gray-700">Voir les détails</span>
|
|
</button>
|
|
{(() => {
|
|
const booking = bookings.find(b => b.id === openMenuId);
|
|
return booking?.status.toUpperCase() === 'PENDING_BANK_TRANSFER' ? (
|
|
<button
|
|
onClick={() => {
|
|
const id = openMenuId;
|
|
setOpenMenuId(null);
|
|
setMenuPosition(null);
|
|
if (id) handleValidateTransfer(id);
|
|
}}
|
|
disabled={validatingId === openMenuId}
|
|
className="w-full px-4 py-3 text-left hover:bg-green-50 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-3 border-b border-gray-200"
|
|
>
|
|
<svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span className="text-sm font-medium text-green-700">Valider virement</span>
|
|
</button>
|
|
) : null;
|
|
})()}
|
|
<button
|
|
onClick={() => {
|
|
const id = openMenuId;
|
|
setOpenMenuId(null);
|
|
setMenuPosition(null);
|
|
if (id) handleDeleteBooking(id);
|
|
}}
|
|
disabled={deletingId === openMenuId}
|
|
className="w-full px-4 py-3 text-left hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-3"
|
|
>
|
|
<svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>
|
|
<span className="text-sm font-medium text-red-600">Supprimer</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Details Modal */}
|
|
{showDetailsModal && selectedBooking && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 overflow-y-auto p-4">
|
|
<div className="bg-white rounded-lg p-6 max-w-2xl w-full">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-xl font-bold text-gray-900">Détails de la réservation</h2>
|
|
<button
|
|
onClick={() => { setShowDetailsModal(false); setSelectedBooking(null); }}
|
|
className="text-gray-400 hover:text-gray-600"
|
|
>
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">N° Booking</label>
|
|
<div className="mt-1 text-lg font-semibold text-gray-900">
|
|
{selectedBooking.bookingNumber || getShortId(selectedBooking)}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Statut</label>
|
|
<span className={`mt-1 inline-block px-3 py-1 text-sm font-semibold rounded-full ${getStatusColor(selectedBooking.status)}`}>
|
|
{getStatusLabel(selectedBooking.status)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t pt-4">
|
|
<h3 className="text-sm font-medium text-gray-900 mb-3">Route</h3>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Origine</label>
|
|
<div className="mt-1 font-semibold text-gray-900">{selectedBooking.origin || '—'}</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Destination</label>
|
|
<div className="mt-1 font-semibold text-gray-900">{selectedBooking.destination || '—'}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t pt-4">
|
|
<h3 className="text-sm font-medium text-gray-900 mb-3">Cargo & Transporteur</h3>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Transporteur</label>
|
|
<div className="mt-1 font-semibold text-gray-900">{selectedBooking.carrierName || '—'}</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Type conteneur</label>
|
|
<div className="mt-1 font-semibold text-gray-900">{selectedBooking.containerType}</div>
|
|
</div>
|
|
{selectedBooking.palletCount != null && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Palettes</label>
|
|
<div className="mt-1 font-semibold text-gray-900">{selectedBooking.palletCount}</div>
|
|
</div>
|
|
)}
|
|
{selectedBooking.weightKG != null && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Poids</label>
|
|
<div className="mt-1 font-semibold text-gray-900">{selectedBooking.weightKG.toLocaleString()} kg</div>
|
|
</div>
|
|
)}
|
|
{selectedBooking.volumeCBM != null && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">Volume</label>
|
|
<div className="mt-1 font-semibold text-gray-900">{selectedBooking.volumeCBM} CBM</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{(selectedBooking.priceEUR != null || selectedBooking.priceUSD != null) && (
|
|
<div className="border-t pt-4">
|
|
<h3 className="text-sm font-medium text-gray-900 mb-3">Prix</h3>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{selectedBooking.priceEUR != null && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">EUR</label>
|
|
<div className="mt-1 text-xl font-bold text-blue-600">{selectedBooking.priceEUR.toLocaleString()} €</div>
|
|
</div>
|
|
)}
|
|
{selectedBooking.priceUSD != null && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-500">USD</label>
|
|
<div className="mt-1 text-xl font-bold text-blue-600">{selectedBooking.priceUSD.toLocaleString()} $</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="border-t pt-4">
|
|
<h3 className="text-sm font-medium text-gray-900 mb-3">Dates</h3>
|
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
|
<div>
|
|
<label className="block text-gray-500">Créée le</label>
|
|
<div className="mt-1 text-gray-900">
|
|
{new Date(selectedBooking.requestedAt || selectedBooking.createdAt || '').toLocaleString('fr-FR')}
|
|
</div>
|
|
</div>
|
|
{selectedBooking.updatedAt && (
|
|
<div>
|
|
<label className="block text-gray-500">Mise à jour</label>
|
|
<div className="mt-1 text-gray-900">{new Date(selectedBooking.updatedAt).toLocaleString('fr-FR')}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{selectedBooking.status.toUpperCase() === 'PENDING_BANK_TRANSFER' && (
|
|
<div className="border-t pt-4">
|
|
<button
|
|
onClick={() => {
|
|
setShowDetailsModal(false);
|
|
setSelectedBooking(null);
|
|
handleValidateTransfer(selectedBooking.id);
|
|
}}
|
|
disabled={validatingId === selectedBooking.id}
|
|
className="w-full px-4 py-2 bg-green-600 text-white font-semibold rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{validatingId === selectedBooking.id ? 'Validation...' : '✓ Valider le virement'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex justify-end mt-6 pt-4 border-t">
|
|
<button
|
|
onClick={() => { setShowDetailsModal(false); setSelectedBooking(null); }}
|
|
className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
|
|
>
|
|
Fermer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|