This commit is contained in:
2025-09-25 14:28:57 -04:00
5 changed files with 998 additions and 4 deletions

View File

@@ -20,7 +20,7 @@ import OrderConfirmation from "./pages/OrderConfirmation";
import DashboardLayout from "./components/DashboardLayout"; import DashboardLayout from "./components/DashboardLayout";
import Dashboard from "./pages/dashboard/Dashboard"; import Dashboard from "./pages/dashboard/Dashboard";
import AdminDashboard from "./pages/dashboard/AdminDashboard"; import AdminDashboard from "./pages/dashboard/AdminDashboard";
import AddListing from "./pages/dashboard/AddListing"; import ChannelManager from "./pages/dashboard/ChannelManager";
import Wallet from "./pages/dashboard/Wallet"; import Wallet from "./pages/dashboard/Wallet";
import MyListings from "./pages/dashboard/MyListings"; import MyListings from "./pages/dashboard/MyListings";
import Messages from "./pages/dashboard/Messages"; import Messages from "./pages/dashboard/Messages";
@@ -145,10 +145,10 @@ const AppRouter = () => (
</ProtectedRoute> </ProtectedRoute>
} /> } />
<Route path="/dashboard/add-listing" element={ <Route path="/dashboard/channel-manager" element={
<ProtectedRoute> <ProtectedRoute>
<DashboardLayout> <DashboardLayout>
<AddListing /> <ChannelManager />
</DashboardLayout> </DashboardLayout>
</ProtectedRoute> </ProtectedRoute>
} /> } />

View File

@@ -58,7 +58,7 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
const menuItems = [ const menuItems = [
{ icon: Home, label: 'Dashboard', path: '/dashboard' }, { icon: Home, label: 'Dashboard', path: '/dashboard' },
{ icon: Settings, label: 'Admin Panel', path: '/dashboard/admin' }, { icon: Settings, label: 'Admin Panel', path: '/dashboard/admin' },
{ icon: Plus, label: 'Add listing', path: '/dashboard/add-listing' }, { icon: Plus, label: 'Channel Manager', path: '/dashboard/channel-manager' },
{ icon: Wallet, label: 'Wallet', path: '/dashboard/wallet' }, { icon: Wallet, label: 'Wallet', path: '/dashboard/wallet' },
{ icon: MessageSquare, label: 'Message', path: '/dashboard/messages', badge: '2' }, { icon: MessageSquare, label: 'Message', path: '/dashboard/messages', badge: '2' },
]; ];

View File

@@ -0,0 +1,269 @@
import { useState, useEffect, useCallback } from 'react';
import { ChannelManagerService } from '@/services/channelManagerApi';
export interface Channel {
id: string;
name: string;
type: 'booking.com' | 'expedia' | 'airbnb' | 'vrbo' | 'agoda' | 'direct' | 'other';
status: 'connected' | 'disconnected' | 'syncing' | 'error';
lastSync: string;
properties: string[];
revenue: number;
bookings: number;
commission: number;
}
export interface Listing {
id: string;
name: string;
type: 'hotel' | 'restaurant' | 'vehicle' | 'flight' | 'activity';
status: 'active' | 'inactive' | 'draft';
channels: string[];
basePrice: number;
availability: boolean;
images: string[];
description: string;
location: {
address: string;
coordinates: { lat: number; lng: number };
};
createdAt: string;
updatedAt: string;
}
export interface Reservation {
id: string;
listingId: string;
listingName: string;
listingType: 'hotel' | 'restaurant' | 'vehicle' | 'flight' | 'activity';
guestName: string;
guestEmail: string;
guestPhone: string;
checkIn: string;
checkOut?: string;
guests: number;
totalAmount: number;
status: 'confirmed' | 'pending' | 'cancelled' | 'completed';
paymentStatus: 'paid' | 'pending' | 'refunded';
channel: string;
specialRequests?: string;
createdAt: string;
}
export interface ChannelManagerStats {
totalRevenue: number;
totalBookings: number;
occupancyRate: number;
averageRate: number;
channelPerformance: {
channelName: string;
revenue: number;
bookings: number;
}[];
}
export const useChannelManager = () => {
const [channels, setChannels] = useState<Channel[]>([]);
const [listings, setListings] = useState<Listing[]>([]);
const [reservations, setReservations] = useState<Reservation[]>([]);
const [stats, setStats] = useState<ChannelManagerStats | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
// Load channels
const loadChannels = useCallback(async () => {
try {
setLoading(true);
const data = await ChannelManagerService.getChannels();
setChannels(data || []);
} catch (err) {
setError(err instanceof Error ? err.message : 'Error loading channels');
} finally {
setLoading(false);
}
}, []);
// Load listings
const loadListings = useCallback(async (type?: string) => {
try {
setLoading(true);
const data = await ChannelManagerService.getListings(type);
setListings(data || []);
} catch (err) {
setError(err instanceof Error ? err.message : 'Error loading listings');
} finally {
setLoading(false);
}
}, []);
// Load reservations
const loadReservations = useCallback(async (filters?: any) => {
try {
setLoading(true);
const data = await ChannelManagerService.getReservations(filters);
setReservations(data || []);
} catch (err) {
setError(err instanceof Error ? err.message : 'Error loading reservations');
} finally {
setLoading(false);
}
}, []);
// Load analytics
const loadStats = useCallback(async (dateRange: { startDate: string; endDate: string }) => {
try {
setLoading(true);
const [revenueData, channelData] = await Promise.all([
ChannelManagerService.getRevenueReports(dateRange),
ChannelManagerService.getChannelPerformance()
]);
setStats({
totalRevenue: revenueData?.totalRevenue || 0,
totalBookings: revenueData?.totalBookings || 0,
occupancyRate: revenueData?.occupancyRate || 0,
averageRate: revenueData?.averageRate || 0,
channelPerformance: channelData || []
});
} catch (err) {
setError(err instanceof Error ? err.message : 'Error loading statistics');
} finally {
setLoading(false);
}
}, []);
// Connect new channel
const connectChannel = useCallback(async (channelData: any) => {
try {
setLoading(true);
await ChannelManagerService.connectChannel(channelData);
await loadChannels(); // Reload channels after connecting
return true;
} catch (err) {
setError(err instanceof Error ? err.message : 'Error connecting channel');
return false;
} finally {
setLoading(false);
}
}, [loadChannels]);
// Disconnect channel
const disconnectChannel = useCallback(async (channelId: string) => {
try {
setLoading(true);
await ChannelManagerService.disconnectChannel(channelId);
await loadChannels(); // Reload channels after disconnecting
return true;
} catch (err) {
setError(err instanceof Error ? err.message : 'Error disconnecting channel');
return false;
} finally {
setLoading(false);
}
}, [loadChannels]);
// Sync channel
const syncChannel = useCallback(async (channelId: string) => {
try {
setLoading(true);
await ChannelManagerService.syncChannel(channelId);
await loadChannels(); // Reload channels after syncing
return true;
} catch (err) {
setError(err instanceof Error ? err.message : 'Error syncing channel');
return false;
} finally {
setLoading(false);
}
}, [loadChannels]);
// Create listing
const createListing = useCallback(async (listingData: any) => {
try {
setLoading(true);
await ChannelManagerService.createListing(listingData);
await loadListings(); // Reload listings after creating
return true;
} catch (err) {
setError(err instanceof Error ? err.message : 'Error creating listing');
return false;
} finally {
setLoading(false);
}
}, [loadListings]);
// Update listing
const updateListing = useCallback(async (id: string, listingData: any) => {
try {
setLoading(true);
await ChannelManagerService.updateListing(id, listingData);
await loadListings(); // Reload listings after updating
return true;
} catch (err) {
setError(err instanceof Error ? err.message : 'Error updating listing');
return false;
} finally {
setLoading(false);
}
}, [loadListings]);
// Cancel reservation
const cancelReservation = useCallback(async (id: string, reason?: string) => {
try {
setLoading(true);
await ChannelManagerService.cancelReservation(id, reason);
await loadReservations(); // Reload reservations after cancelling
return true;
} catch (err) {
setError(err instanceof Error ? err.message : 'Error cancelling reservation');
return false;
} finally {
setLoading(false);
}
}, [loadReservations]);
// Clear error
const clearError = useCallback(() => {
setError(null);
}, []);
// Load initial data
useEffect(() => {
loadChannels();
loadListings();
loadReservations();
const dateRange = {
startDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
endDate: new Date().toISOString().split('T')[0]
};
loadStats(dateRange);
}, [loadChannels, loadListings, loadReservations, loadStats]);
return {
// Data
channels,
listings,
reservations,
stats,
// States
loading,
error,
// Actions
loadChannels,
loadListings,
loadReservations,
loadStats,
connectChannel,
disconnectChannel,
syncChannel,
createListing,
updateListing,
cancelReservation,
clearError,
};
};
export default useChannelManager;

View File

@@ -0,0 +1,515 @@
import React, { useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import {
Settings,
Zap,
TrendingUp,
Calendar,
Users,
DollarSign,
Plus,
Search,
Filter,
MoreHorizontal,
CheckCircle,
AlertTriangle,
XCircle,
RefreshCw,
Eye,
Edit,
Trash2,
Hotel,
Utensils,
Car,
Plane,
MapPin,
Globe
} from 'lucide-react';
import { useChannelManager } from '@/hooks/useChannelManager';
import { format } from 'date-fns';
import { es } from 'date-fns/locale';
const ChannelManager = () => {
const {
channels,
listings,
reservations,
stats,
loading,
error,
connectChannel,
disconnectChannel,
syncChannel,
createListing,
clearError
} = useChannelManager();
const [activeTab, setActiveTab] = useState('overview');
const [searchTerm, setSearchTerm] = useState('');
const [filterType, setFilterType] = useState('all');
const [showConnectModal, setShowConnectModal] = useState(false);
const getStatusIcon = (status: string) => {
switch (status) {
case 'connected':
return <CheckCircle className="w-4 h-4 text-green-500" />;
case 'syncing':
return <RefreshCw className="w-4 h-4 text-blue-500 animate-spin" />;
case 'error':
return <AlertTriangle className="w-4 h-4 text-yellow-500" />;
default:
return <XCircle className="w-4 h-4 text-red-500" />;
}
};
const getTypeIcon = (type: string) => {
switch (type) {
case 'hotel':
return <Hotel className="w-4 h-4" />;
case 'restaurant':
return <Utensils className="w-4 h-4" />;
case 'vehicle':
return <Car className="w-4 h-4" />;
case 'flight':
return <Plane className="w-4 h-4" />;
case 'activity':
return <MapPin className="w-4 h-4" />;
default:
return <Globe className="w-4 h-4" />;
}
};
const OverviewTab = () => (
<div className="space-y-6">
{/* Key Metrics */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<Card>
<CardContent className="p-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-muted-foreground">Ingresos Totales</p>
<p className="text-2xl font-bold">${stats?.totalRevenue.toLocaleString() || '0'}</p>
</div>
<DollarSign className="h-8 w-8 text-muted-foreground" />
</div>
</CardContent>
</Card>
<Card>
<CardContent className="p-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-muted-foreground">Reservas Totales</p>
<p className="text-2xl font-bold">{stats?.totalBookings || 0}</p>
</div>
<Calendar className="h-8 w-8 text-muted-foreground" />
</div>
</CardContent>
</Card>
<Card>
<CardContent className="p-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-muted-foreground">Tasa de Ocupación</p>
<p className="text-2xl font-bold">{stats?.occupancyRate || 0}%</p>
</div>
<TrendingUp className="h-8 w-8 text-muted-foreground" />
</div>
</CardContent>
</Card>
<Card>
<CardContent className="p-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-muted-foreground">Canales Conectados</p>
<p className="text-2xl font-bold">{channels.filter(c => c.status === 'connected').length}</p>
</div>
<Zap className="h-8 w-8 text-muted-foreground" />
</div>
</CardContent>
</Card>
</div>
{/* Channel Performance */}
<Card>
<CardHeader>
<CardTitle>Rendimiento por Canal</CardTitle>
<CardDescription>Ingresos y reservas por cada canal de distribución</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
{stats?.channelPerformance.map((channel, index) => (
<div key={index} className="flex items-center justify-between p-4 border rounded-lg">
<div className="flex items-center space-x-3">
<div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
<Globe className="w-5 h-5 text-primary" />
</div>
<div>
<p className="font-medium">{channel.channelName}</p>
<p className="text-sm text-muted-foreground">{channel.bookings} reservas</p>
</div>
</div>
<div className="text-right">
<p className="font-semibold">${channel.revenue.toLocaleString()}</p>
<p className="text-sm text-muted-foreground">Ingresos</p>
</div>
</div>
))}
</div>
</CardContent>
</Card>
{/* Recent Reservations */}
<Card>
<CardHeader>
<CardTitle>Reservas Recientes</CardTitle>
<CardDescription>Últimas reservas recibidas en todos los canales</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-3">
{reservations.slice(0, 5).map((reservation) => (
<div key={reservation.id} className="flex items-center justify-between p-3 border rounded-lg">
<div className="flex items-center space-x-3">
{getTypeIcon(reservation.listingType)}
<div>
<p className="font-medium">{reservation.guestName}</p>
<p className="text-sm text-muted-foreground">{reservation.listingName}</p>
</div>
</div>
<div className="text-right">
<Badge variant={
reservation.status === 'confirmed' ? 'default' :
reservation.status === 'pending' ? 'secondary' :
reservation.status === 'cancelled' ? 'destructive' : 'outline'
}>
{reservation.status}
</Badge>
<p className="text-sm text-muted-foreground mt-1">
${reservation.totalAmount.toLocaleString()}
</p>
</div>
</div>
))}
</div>
</CardContent>
</Card>
</div>
);
const ChannelsTab = () => (
<div className="space-y-6">
<div className="flex justify-between items-center">
<div>
<h2 className="text-2xl font-bold">Gestión de Canales</h2>
<p className="text-muted-foreground">Conecta y administra tus canales de distribución</p>
</div>
<Button onClick={() => setShowConnectModal(true)}>
<Plus className="w-4 h-4 mr-2" />
Conectar Canal
</Button>
</div>
<div className="grid gap-4">
{channels.map((channel) => (
<Card key={channel.id}>
<CardContent className="p-6">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4">
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
<Globe className="w-6 h-6 text-primary" />
</div>
<div>
<div className="flex items-center space-x-2">
<h3 className="text-lg font-semibold">{channel.name}</h3>
{getStatusIcon(channel.status)}
<Badge variant="outline">{channel.type}</Badge>
</div>
<p className="text-sm text-muted-foreground">
Última sincronización: {format(new Date(channel.lastSync), 'dd/MM/yyyy HH:mm', { locale: es })}
</p>
<p className="text-sm text-muted-foreground">
{channel.properties.length} propiedades conectadas
</p>
</div>
</div>
<div className="flex items-center space-x-4">
<div className="text-right">
<p className="text-2xl font-bold">${channel.revenue.toLocaleString()}</p>
<p className="text-sm text-muted-foreground">{channel.bookings} reservas</p>
<p className="text-xs text-muted-foreground">Comisión: {channel.commission}%</p>
</div>
<div className="flex space-x-2">
<Button
variant="outline"
size="sm"
onClick={() => syncChannel(channel.id)}
disabled={loading}
>
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
</Button>
<Button variant="outline" size="sm">
<Settings className="w-4 h-4" />
</Button>
<Button
variant="outline"
size="sm"
onClick={() => disconnectChannel(channel.id)}
>
<XCircle className="w-4 h-4" />
</Button>
</div>
</div>
</div>
</CardContent>
</Card>
))}
</div>
</div>
);
const ListingsTab = () => {
const filteredListings = listings.filter(listing => {
const matchesSearch = listing.name.toLowerCase().includes(searchTerm.toLowerCase());
const matchesType = filterType === 'all' || listing.type === filterType;
return matchesSearch && matchesType;
});
return (
<div className="space-y-6">
<div className="flex justify-between items-center">
<div>
<h2 className="text-2xl font-bold">Gestión de Propiedades</h2>
<p className="text-muted-foreground">Administra hoteles, restaurantes, vehículos y más</p>
</div>
<Button>
<Plus className="w-4 h-4 mr-2" />
Nueva Propiedad
</Button>
</div>
<div className="flex space-x-4">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
<Input
placeholder="Buscar propiedades..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pl-10"
/>
</div>
<Select value={filterType} onValueChange={setFilterType}>
<SelectTrigger className="w-48">
<SelectValue placeholder="Filtrar por tipo" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">Todos los tipos</SelectItem>
<SelectItem value="hotel">Hoteles</SelectItem>
<SelectItem value="restaurant">Restaurantes</SelectItem>
<SelectItem value="vehicle">Vehículos</SelectItem>
<SelectItem value="flight">Vuelos</SelectItem>
<SelectItem value="activity">Actividades</SelectItem>
</SelectContent>
</Select>
</div>
<div className="grid gap-4">
{filteredListings.map((listing) => (
<Card key={listing.id}>
<CardContent className="p-6">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4">
<div className="w-16 h-16 bg-muted rounded-lg flex items-center justify-center">
{listing.images[0] ? (
<img
src={listing.images[0]}
alt={listing.name}
className="w-full h-full object-cover rounded-lg"
/>
) : (
getTypeIcon(listing.type)
)}
</div>
<div>
<div className="flex items-center space-x-2">
<h3 className="text-lg font-semibold">{listing.name}</h3>
<Badge variant={listing.status === 'active' ? 'default' : 'secondary'}>
{listing.status}
</Badge>
<Badge variant="outline">{listing.type}</Badge>
</div>
<p className="text-sm text-muted-foreground">{listing.location.address}</p>
<p className="text-sm text-muted-foreground">
Conectado a {listing.channels.length} canales
</p>
</div>
</div>
<div className="flex items-center space-x-4">
<div className="text-right">
<p className="text-xl font-bold">${listing.basePrice}</p>
<p className="text-sm text-muted-foreground">
{listing.availability ? 'Disponible' : 'No disponible'}
</p>
</div>
<div className="flex space-x-2">
<Button variant="outline" size="sm">
<Eye className="w-4 h-4" />
</Button>
<Button variant="outline" size="sm">
<Edit className="w-4 h-4" />
</Button>
<Button variant="outline" size="sm">
<MoreHorizontal className="w-4 h-4" />
</Button>
</div>
</div>
</div>
</CardContent>
</Card>
))}
</div>
</div>
);
};
const ReservationsTab = () => (
<div className="space-y-6">
<div className="flex justify-between items-center">
<div>
<h2 className="text-2xl font-bold">Gestión de Reservas</h2>
<p className="text-muted-foreground">Administra todas las reservas desde un solo lugar</p>
</div>
</div>
<div className="grid gap-4">
{reservations.map((reservation) => (
<Card key={reservation.id}>
<CardContent className="p-6">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4">
{getTypeIcon(reservation.listingType)}
<div>
<div className="flex items-center space-x-2">
<h3 className="text-lg font-semibold">{reservation.guestName}</h3>
<Badge variant={
reservation.status === 'confirmed' ? 'default' :
reservation.status === 'pending' ? 'secondary' :
reservation.status === 'cancelled' ? 'destructive' : 'outline'
}>
{reservation.status}
</Badge>
</div>
<p className="text-sm font-medium">{reservation.listingName}</p>
<p className="text-sm text-muted-foreground">
{format(new Date(reservation.checkIn), 'dd/MM/yyyy', { locale: es })}
{reservation.checkOut && ` - ${format(new Date(reservation.checkOut), 'dd/MM/yyyy', { locale: es })}`}
</p>
<p className="text-sm text-muted-foreground">
{reservation.guests} huéspedes {reservation.channel}
</p>
</div>
</div>
<div className="flex items-center space-x-4">
<div className="text-right">
<p className="text-xl font-bold">${reservation.totalAmount.toLocaleString()}</p>
<p className="text-sm text-muted-foreground">
Pago: <Badge variant={reservation.paymentStatus === 'paid' ? 'default' : 'secondary'}>
{reservation.paymentStatus}
</Badge>
</p>
</div>
<div className="flex space-x-2">
<Button variant="outline" size="sm">
<Eye className="w-4 h-4" />
</Button>
<Button variant="outline" size="sm">
<Edit className="w-4 h-4" />
</Button>
<Button variant="outline" size="sm">
<MoreHorizontal className="w-4 h-4" />
</Button>
</div>
</div>
</div>
</CardContent>
</Card>
))}
</div>
</div>
);
if (error) {
return (
<div className="flex items-center justify-center h-64">
<div className="text-center">
<AlertTriangle className="w-12 h-12 text-yellow-500 mx-auto mb-4" />
<h3 className="text-lg font-semibold mb-2">Error al cargar datos</h3>
<p className="text-muted-foreground mb-4">{error}</p>
<Button onClick={clearError}>Reintentar</Button>
</div>
</div>
);
}
return (
<div className="container mx-auto p-6 space-y-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold">Channel Manager</h1>
<p className="text-muted-foreground">
Gestiona todas tus propiedades y canales de distribución desde un solo lugar
</p>
</div>
<div className="flex space-x-2">
<Button variant="outline">
<RefreshCw className="w-4 h-4 mr-2" />
Sincronizar Todo
</Button>
<Button>
<Settings className="w-4 h-4 mr-2" />
Configuración
</Button>
</div>
</div>
<Tabs value={activeTab} onValueChange={setActiveTab}>
<TabsList className="grid w-full grid-cols-4">
<TabsTrigger value="overview">Resumen</TabsTrigger>
<TabsTrigger value="channels">Canales</TabsTrigger>
<TabsTrigger value="listings">Propiedades</TabsTrigger>
<TabsTrigger value="reservations">Reservas</TabsTrigger>
</TabsList>
<TabsContent value="overview">
<OverviewTab />
</TabsContent>
<TabsContent value="channels">
<ChannelsTab />
</TabsContent>
<TabsContent value="listings">
<ListingsTab />
</TabsContent>
<TabsContent value="reservations">
<ReservationsTab />
</TabsContent>
</Tabs>
</div>
);
};
export default ChannelManager;

View File

@@ -0,0 +1,210 @@
import { API_CONFIG } from '@/config/api';
// Extend API configuration for Channel Manager
export const CHANNEL_MANAGER_API = {
...API_CONFIG,
ENDPOINTS: {
...API_CONFIG.ENDPOINTS,
// Listings Management
LISTINGS: '/listings',
LISTING_DETAIL: '/listings/:id',
// Channel Management
CHANNELS: '/channels',
CHANNEL_CONNECT: '/channels/connect',
CHANNEL_DISCONNECT: '/channels/:id/disconnect',
CHANNEL_SYNC: '/channels/:id/sync',
// Reservations (multi-type)
RESERVATIONS: '/reservations',
RESERVATION_DETAIL: '/reservations/:id',
CREATE_RESERVATION: '/reservations',
UPDATE_RESERVATION: '/reservations/:id',
CANCEL_RESERVATION: '/reservations/:id/cancel',
// Hotels
HOTELS: '/hotels',
HOTEL_ROOMS: '/hotels/:id/rooms',
HOTEL_AVAILABILITY: '/hotels/:id/availability',
HOTEL_RATES: '/hotels/:id/rates',
// Restaurants
RESTAURANTS: '/restaurants',
RESTAURANT_TABLES: '/restaurants/:id/tables',
RESTAURANT_AVAILABILITY: '/restaurants/:id/availability',
RESTAURANT_MENU: '/restaurants/:id/menu',
// Vehicles
VEHICLES: '/vehicles',
VEHICLE_AVAILABILITY: '/vehicles/:id/availability',
VEHICLE_RATES: '/vehicles/:id/rates',
// Flights
FLIGHTS: '/flights',
FLIGHT_SEARCH: '/flights/search',
FLIGHT_BOOKING: '/flights/book',
// Itineraries
ITINERARIES: '/itineraries',
ITINERARY_DETAIL: '/itineraries/:id',
// Analytics & Reports
ANALYTICS: '/analytics',
REVENUE_REPORTS: '/analytics/revenue',
OCCUPANCY_REPORTS: '/analytics/occupancy',
CHANNEL_PERFORMANCE: '/analytics/channels',
}
};
// Channel Manager Service
export class ChannelManagerService {
private static async request(endpoint: string, options: RequestInit = {}) {
const token = localStorage.getItem('auth_token');
// Create AbortController for timeout functionality
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), CHANNEL_MANAGER_API.TIMEOUT);
const response = await fetch(`${CHANNEL_MANAGER_API.BASE_URL}${endpoint}`, {
...options,
headers: {
...CHANNEL_MANAGER_API.DEFAULT_HEADERS,
...(token && { Authorization: `Bearer ${token}` }),
...options.headers,
},
signal: controller.signal,
});
clearTimeout(timeoutId);
if (!response.ok) {
throw new Error(`API Error: ${response.status} ${response.statusText}`);
}
// Handle 204 No Content responses
if (response.status === 204) {
return null;
}
return await response.json();
}
// Listings Management
static getListings = (type?: string) =>
this.request(`${CHANNEL_MANAGER_API.ENDPOINTS.LISTINGS}${type ? `?type=${type}` : ''}`);
static getListingDetail = (id: string) =>
this.request(CHANNEL_MANAGER_API.ENDPOINTS.LISTING_DETAIL.replace(':id', id));
static createListing = (data: any) =>
this.request(CHANNEL_MANAGER_API.ENDPOINTS.LISTINGS, {
method: 'POST',
body: JSON.stringify(data),
});
static updateListing = (id: string, data: any) =>
this.request(CHANNEL_MANAGER_API.ENDPOINTS.LISTING_DETAIL.replace(':id', id), {
method: 'PUT',
body: JSON.stringify(data),
});
static deleteListing = (id: string) =>
this.request(CHANNEL_MANAGER_API.ENDPOINTS.LISTING_DETAIL.replace(':id', id), {
method: 'DELETE',
});
// Channel Management
static getChannels = () =>
this.request(CHANNEL_MANAGER_API.ENDPOINTS.CHANNELS);
static connectChannel = (channelData: any) =>
this.request(CHANNEL_MANAGER_API.ENDPOINTS.CHANNEL_CONNECT, {
method: 'POST',
body: JSON.stringify(channelData),
});
static disconnectChannel = (channelId: string) =>
this.request(CHANNEL_MANAGER_API.ENDPOINTS.CHANNEL_DISCONNECT.replace(':id', channelId), {
method: 'DELETE',
});
static syncChannel = (channelId: string) =>
this.request(CHANNEL_MANAGER_API.ENDPOINTS.CHANNEL_SYNC.replace(':id', channelId), {
method: 'POST',
});
// Reservations Management
static getReservations = (filters?: any) => {
const queryParams = filters
? '?' + new URLSearchParams(filters).toString()
: '';
return this.request(`${CHANNEL_MANAGER_API.ENDPOINTS.RESERVATIONS}${queryParams}`);
};
static getReservationDetail = (id: string) =>
this.request(CHANNEL_MANAGER_API.ENDPOINTS.RESERVATION_DETAIL.replace(':id', id));
static createReservation = (data: any) =>
this.request(CHANNEL_MANAGER_API.ENDPOINTS.CREATE_RESERVATION, {
method: 'POST',
body: JSON.stringify(data),
});
static updateReservation = (id: string, data: any) =>
this.request(CHANNEL_MANAGER_API.ENDPOINTS.UPDATE_RESERVATION.replace(':id', id), {
method: 'PUT',
body: JSON.stringify(data),
});
static cancelReservation = (id: string, reason?: string) =>
this.request(CHANNEL_MANAGER_API.ENDPOINTS.CANCEL_RESERVATION.replace(':id', id), {
method: 'POST',
body: JSON.stringify({ reason }),
});
// Hotel specific methods
static getHotelRooms = (hotelId: string) =>
this.request(CHANNEL_MANAGER_API.ENDPOINTS.HOTEL_ROOMS.replace(':id', hotelId));
static getHotelAvailability = (hotelId: string, dateRange: { startDate: string; endDate: string }) =>
this.request(`${CHANNEL_MANAGER_API.ENDPOINTS.HOTEL_AVAILABILITY.replace(':id', hotelId)}?${new URLSearchParams(dateRange)}`);
static updateHotelRates = (hotelId: string, rates: any) =>
this.request(CHANNEL_MANAGER_API.ENDPOINTS.HOTEL_RATES.replace(':id', hotelId), {
method: 'PUT',
body: JSON.stringify(rates),
});
// Restaurant specific methods
static getRestaurantTables = (restaurantId: string) =>
this.request(CHANNEL_MANAGER_API.ENDPOINTS.RESTAURANT_TABLES.replace(':id', restaurantId));
static getRestaurantAvailability = (restaurantId: string, date: string) =>
this.request(`${CHANNEL_MANAGER_API.ENDPOINTS.RESTAURANT_AVAILABILITY.replace(':id', restaurantId)}?date=${date}`);
// Vehicle specific methods
static getVehicleAvailability = (vehicleId: string, dateRange: { startDate: string; endDate: string }) =>
this.request(`${CHANNEL_MANAGER_API.ENDPOINTS.VEHICLE_AVAILABILITY.replace(':id', vehicleId)}?${new URLSearchParams(dateRange)}`);
// Flight methods
static searchFlights = (searchParams: any) =>
this.request(`${CHANNEL_MANAGER_API.ENDPOINTS.FLIGHT_SEARCH}?${new URLSearchParams(searchParams)}`);
static bookFlight = (bookingData: any) =>
this.request(CHANNEL_MANAGER_API.ENDPOINTS.FLIGHT_BOOKING, {
method: 'POST',
body: JSON.stringify(bookingData),
});
// Analytics methods
static getAnalytics = (type: string, dateRange: { startDate: string; endDate: string }) =>
this.request(`${CHANNEL_MANAGER_API.ENDPOINTS.ANALYTICS}/${type}?${new URLSearchParams(dateRange)}`);
static getRevenueReports = (dateRange: { startDate: string; endDate: string }) =>
this.request(`${CHANNEL_MANAGER_API.ENDPOINTS.REVENUE_REPORTS}?${new URLSearchParams(dateRange)}`);
static getChannelPerformance = () =>
this.request(CHANNEL_MANAGER_API.ENDPOINTS.CHANNEL_PERFORMANCE);
}
export default ChannelManagerService;