mas cambios
This commit is contained in:
636
src/pages/dashboard/Trips.tsx
Normal file
636
src/pages/dashboard/Trips.tsx
Normal file
@@ -0,0 +1,636 @@
|
||||
import { useState } from 'react';
|
||||
import { useTrips } from '@/hooks/useTrips';
|
||||
import { TripStatus } from '@/services/tripsApi';
|
||||
import {
|
||||
Plane,
|
||||
Plus,
|
||||
Trash2,
|
||||
Edit2,
|
||||
Eye,
|
||||
Calendar,
|
||||
Users,
|
||||
DollarSign,
|
||||
MapPin,
|
||||
RefreshCw,
|
||||
Search,
|
||||
MoreVertical,
|
||||
Clock,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
PlayCircle,
|
||||
PauseCircle,
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
|
||||
const statusConfig: Record<TripStatus, { label: string; icon: any; color: string }> = {
|
||||
planning: { label: 'Planificando', icon: Clock, color: 'bg-yellow-500' },
|
||||
upcoming: { label: 'Próximo', icon: Calendar, color: 'bg-blue-500' },
|
||||
in_progress: { label: 'En progreso', icon: PlayCircle, color: 'bg-green-500' },
|
||||
completed: { label: 'Completado', icon: CheckCircle, color: 'bg-gray-500' },
|
||||
cancelled: { label: 'Cancelado', icon: XCircle, color: 'bg-red-500' },
|
||||
};
|
||||
|
||||
const Trips = () => {
|
||||
const {
|
||||
trips,
|
||||
stats,
|
||||
loading,
|
||||
error,
|
||||
selectedStatus,
|
||||
loadTrips,
|
||||
createTrip,
|
||||
updateTrip,
|
||||
deleteTrip,
|
||||
getTripById,
|
||||
selectedTrip,
|
||||
setSelectedTrip,
|
||||
changeStatus,
|
||||
} = useTrips();
|
||||
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
|
||||
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
|
||||
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
|
||||
const [tripToDelete, setTripToDelete] = useState<string | null>(null);
|
||||
|
||||
// Form state
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
destination: '',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
travelersCount: 1,
|
||||
estimatedBudget: 0,
|
||||
currency: 'USD',
|
||||
isPublic: false,
|
||||
});
|
||||
|
||||
const filteredTrips = trips.filter(trip =>
|
||||
trip.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
trip.destination?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
trip.description?.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
const handleRefresh = async () => {
|
||||
await loadTrips();
|
||||
};
|
||||
|
||||
const handleCreate = async () => {
|
||||
const result = await createTrip(formData);
|
||||
if (result) {
|
||||
setIsCreateDialogOpen(false);
|
||||
resetForm();
|
||||
}
|
||||
};
|
||||
|
||||
const handleEdit = async () => {
|
||||
if (!selectedTrip) return;
|
||||
const success = await updateTrip(selectedTrip.id, formData);
|
||||
if (success) {
|
||||
setIsEditDialogOpen(false);
|
||||
resetForm();
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!tripToDelete) return;
|
||||
const success = await deleteTrip(tripToDelete);
|
||||
if (success) {
|
||||
setIsDeleteDialogOpen(false);
|
||||
setTripToDelete(null);
|
||||
}
|
||||
};
|
||||
|
||||
const openEditDialog = async (tripId: string) => {
|
||||
const trip = await getTripById(tripId);
|
||||
if (trip) {
|
||||
setFormData({
|
||||
name: trip.name,
|
||||
description: trip.description || '',
|
||||
destination: trip.destination || '',
|
||||
startDate: trip.startDate || '',
|
||||
endDate: trip.endDate || '',
|
||||
travelersCount: trip.travelersCount || 1,
|
||||
estimatedBudget: trip.estimatedBudget || 0,
|
||||
currency: trip.currency || 'USD',
|
||||
isPublic: trip.isPublic,
|
||||
});
|
||||
setIsEditDialogOpen(true);
|
||||
}
|
||||
};
|
||||
|
||||
const openDeleteDialog = (tripId: string) => {
|
||||
setTripToDelete(tripId);
|
||||
setIsDeleteDialogOpen(true);
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setFormData({
|
||||
name: '',
|
||||
description: '',
|
||||
destination: '',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
travelersCount: 1,
|
||||
estimatedBudget: 0,
|
||||
currency: 'USD',
|
||||
isPublic: false,
|
||||
});
|
||||
setSelectedTrip(null);
|
||||
};
|
||||
|
||||
const formatDate = (date: string | undefined) => {
|
||||
if (!date) return '-';
|
||||
return new Date(date).toLocaleDateString('es-ES', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
if (loading && trips.length === 0) {
|
||||
return (
|
||||
<div className="body-content">
|
||||
<div className="container-xxl">
|
||||
<div className="flex items-center justify-center min-h-96">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
|
||||
<p className="mt-4 text-muted-foreground">Cargando viajes...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="body-content">
|
||||
<div className="container-xxl">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold flex items-center gap-2">
|
||||
<Plane className="h-6 w-6 text-primary" />
|
||||
Gestión de Viajes
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Administra los itinerarios de viaje de los usuarios
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2 mt-4 md:mt-0">
|
||||
<Button onClick={handleRefresh} variant="outline">
|
||||
<RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
|
||||
Actualizar
|
||||
</Button>
|
||||
<Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Nuevo Viaje
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Crear Viaje</DialogTitle>
|
||||
<DialogDescription>
|
||||
Crea un nuevo itinerario de viaje.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4 max-h-96 overflow-y-auto">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Nombre del viaje</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
placeholder="Mi viaje a..."
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="destination">Destino</Label>
|
||||
<Input
|
||||
id="destination"
|
||||
value={formData.destination}
|
||||
onChange={(e) => setFormData({ ...formData, destination: e.target.value })}
|
||||
placeholder="Punta Cana, RD"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">Descripción</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
placeholder="Describe tu viaje..."
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="startDate">Fecha inicio</Label>
|
||||
<Input
|
||||
id="startDate"
|
||||
type="date"
|
||||
value={formData.startDate}
|
||||
onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="endDate">Fecha fin</Label>
|
||||
<Input
|
||||
id="endDate"
|
||||
type="date"
|
||||
value={formData.endDate}
|
||||
onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="travelers">Viajeros</Label>
|
||||
<Input
|
||||
id="travelers"
|
||||
type="number"
|
||||
min="1"
|
||||
value={formData.travelersCount}
|
||||
onChange={(e) => setFormData({ ...formData, travelersCount: parseInt(e.target.value) || 1 })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="budget">Presupuesto</Label>
|
||||
<Input
|
||||
id="budget"
|
||||
type="number"
|
||||
min="0"
|
||||
value={formData.estimatedBudget}
|
||||
onChange={(e) => setFormData({ ...formData, estimatedBudget: parseFloat(e.target.value) || 0 })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button onClick={handleCreate} disabled={!formData.name}>
|
||||
Crear
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
{stats && (
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
Total Viajes
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{stats.totalTrips}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{Object.entries(stats.byStatus || {}).map(([status, count]) => {
|
||||
const config = statusConfig[status as TripStatus];
|
||||
const Icon = config?.icon || Clock;
|
||||
return (
|
||||
<Card key={status}>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-xs font-medium text-muted-foreground flex items-center gap-1">
|
||||
<Icon className="h-3 w-3" />
|
||||
{config?.label || status}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-xl font-bold">{count}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Filters */}
|
||||
<Card className="mb-6">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Buscar viajes..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-48">
|
||||
<Select
|
||||
value={selectedStatus || 'all'}
|
||||
onValueChange={(value) => changeStatus(value === 'all' ? undefined : value as TripStatus)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Filtrar por estado" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Todos los estados</SelectItem>
|
||||
{Object.entries(statusConfig).map(([value, config]) => (
|
||||
<SelectItem key={value} value={value}>
|
||||
{config.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Error State */}
|
||||
{error && (
|
||||
<Card className="mb-6 border-destructive">
|
||||
<CardContent className="pt-6">
|
||||
<p className="text-destructive">{error}</p>
|
||||
<Button onClick={handleRefresh} variant="outline" className="mt-2">
|
||||
Reintentar
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Empty State */}
|
||||
{!loading && filteredTrips.length === 0 && (
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-center py-12">
|
||||
<Plane className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
|
||||
<h3 className="text-xl font-semibold mb-2">No hay viajes</h3>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
{searchTerm
|
||||
? 'No se encontraron viajes con ese término de búsqueda.'
|
||||
: selectedStatus
|
||||
? `No hay viajes con estado "${statusConfig[selectedStatus]?.label}".`
|
||||
: 'Crea tu primer itinerario de viaje.'}
|
||||
</p>
|
||||
<Button onClick={() => setIsCreateDialogOpen(true)}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Crear Viaje
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Trips Grid */}
|
||||
{filteredTrips.length > 0 && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredTrips.map((trip) => {
|
||||
const statusInfo = statusConfig[trip.status];
|
||||
const StatusIcon = statusInfo?.icon || Clock;
|
||||
return (
|
||||
<Card key={trip.id} className="overflow-hidden">
|
||||
<div
|
||||
className="h-32 relative bg-gradient-to-br from-primary/20 to-primary/5"
|
||||
style={{
|
||||
backgroundImage: trip.coverImageUrl
|
||||
? `url(${trip.coverImageUrl})`
|
||||
: undefined,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
|
||||
<div className="absolute bottom-3 left-3 right-3">
|
||||
<h3 className="text-white font-bold text-lg truncate">{trip.name}</h3>
|
||||
{trip.destination && (
|
||||
<p className="text-white/80 text-sm flex items-center gap-1">
|
||||
<MapPin className="h-3 w-3" />
|
||||
{trip.destination}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="absolute top-2 right-2">
|
||||
<Badge className={`${statusInfo?.color} text-white`}>
|
||||
<StatusIcon className="h-3 w-3 mr-1" />
|
||||
{statusInfo?.label}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<CardContent className="pt-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-4 text-sm text-muted-foreground">
|
||||
<span className="flex items-center gap-1">
|
||||
<Calendar className="h-4 w-4" />
|
||||
{formatDate(trip.startDate)}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Users className="h-4 w-4" />
|
||||
{trip.travelersCount}
|
||||
</span>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => getTripById(trip.id)}>
|
||||
<Eye className="h-4 w-4 mr-2" />
|
||||
Ver detalles
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => openEditDialog(trip.id)}>
|
||||
<Edit2 className="h-4 w-4 mr-2" />
|
||||
Editar
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="text-destructive"
|
||||
onClick={() => openDeleteDialog(trip.id)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Eliminar
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
{trip.estimatedBudget && trip.estimatedBudget > 0 && (
|
||||
<div className="flex items-center gap-1 text-sm">
|
||||
<DollarSign className="h-4 w-4 text-green-500" />
|
||||
<span className="font-medium">
|
||||
{trip.estimatedBudget.toLocaleString('es-ES')} {trip.currency}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{trip.days && trip.days.length > 0 && (
|
||||
<p className="text-sm text-muted-foreground mt-2">
|
||||
{trip.days.length} días planificados
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Edit Dialog */}
|
||||
<Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
|
||||
<DialogContent className="max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Editar Viaje</DialogTitle>
|
||||
<DialogDescription>
|
||||
Modifica los detalles del viaje.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4 max-h-96 overflow-y-auto">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-name">Nombre del viaje</Label>
|
||||
<Input
|
||||
id="edit-name"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-destination">Destino</Label>
|
||||
<Input
|
||||
id="edit-destination"
|
||||
value={formData.destination}
|
||||
onChange={(e) => setFormData({ ...formData, destination: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-description">Descripción</Label>
|
||||
<Textarea
|
||||
id="edit-description"
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-startDate">Fecha inicio</Label>
|
||||
<Input
|
||||
id="edit-startDate"
|
||||
type="date"
|
||||
value={formData.startDate}
|
||||
onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-endDate">Fecha fin</Label>
|
||||
<Input
|
||||
id="edit-endDate"
|
||||
type="date"
|
||||
value={formData.endDate}
|
||||
onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-travelers">Viajeros</Label>
|
||||
<Input
|
||||
id="edit-travelers"
|
||||
type="number"
|
||||
min="1"
|
||||
value={formData.travelersCount}
|
||||
onChange={(e) => setFormData({ ...formData, travelersCount: parseInt(e.target.value) || 1 })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-budget">Presupuesto</Label>
|
||||
<Input
|
||||
id="edit-budget"
|
||||
type="number"
|
||||
min="0"
|
||||
value={formData.estimatedBudget}
|
||||
onChange={(e) => setFormData({ ...formData, estimatedBudget: parseFloat(e.target.value) || 0 })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setIsEditDialogOpen(false)}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button onClick={handleEdit} disabled={!formData.name}>
|
||||
Guardar
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Delete Dialog */}
|
||||
<AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>¿Eliminar viaje?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Esta acción no se puede deshacer. El viaje y todos sus días y actividades serán eliminados permanentemente.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancelar</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleDelete}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
Eliminar
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="mt-6 text-center text-sm text-muted-foreground">
|
||||
Mostrando {filteredTrips.length} de {trips.length} viajes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Trips;
|
||||
Reference in New Issue
Block a user