feat(bookings): add calendar UI with booking creation
- Add TimeSlot component with available/booked visual states - Add BookingCalendar component with date navigation and court columns - Add BookingDialog for creating bookings and viewing/cancelling existing ones - Add bookings page with calendar integration - Fix sidebar navigation paths for route group structure Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Ivan
52
apps/web/app/(admin)/bookings/page.tsx
Normal file
52
apps/web/app/(admin)/bookings/page.tsx
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useCallback } from "react";
|
||||||
|
import { BookingCalendar, SelectedSlot } from "@/components/bookings/booking-calendar";
|
||||||
|
import { BookingDialog } from "@/components/bookings/booking-dialog";
|
||||||
|
|
||||||
|
export default function BookingsPage() {
|
||||||
|
const [selectedSlot, setSelectedSlot] = useState<SelectedSlot | null>(null);
|
||||||
|
const [refreshKey, setRefreshKey] = useState(0);
|
||||||
|
|
||||||
|
const handleSlotClick = useCallback((slot: SelectedSlot) => {
|
||||||
|
setSelectedSlot(slot);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleCloseDialog = useCallback(() => {
|
||||||
|
setSelectedSlot(null);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleBookingCreated = useCallback(() => {
|
||||||
|
// Refresh the calendar after booking creation
|
||||||
|
setRefreshKey((prev) => prev + 1);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleBookingCancelled = useCallback(() => {
|
||||||
|
// Refresh the calendar after booking cancellation
|
||||||
|
setRefreshKey((prev) => prev + 1);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-primary-800">Reservas</h1>
|
||||||
|
<p className="mt-2 text-primary-600">
|
||||||
|
Gestiona las reservas de canchas. Selecciona un horario para crear o ver una reserva.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<BookingCalendar key={refreshKey} onSlotClick={handleSlotClick} />
|
||||||
|
|
||||||
|
{selectedSlot && (
|
||||||
|
<BookingDialog
|
||||||
|
courtId={selectedSlot.courtId}
|
||||||
|
date={selectedSlot.date}
|
||||||
|
slot={selectedSlot}
|
||||||
|
onClose={handleCloseDialog}
|
||||||
|
onBookingCreated={handleBookingCreated}
|
||||||
|
onBookingCancelled={handleBookingCancelled}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
386
apps/web/components/bookings/booking-calendar.tsx
Normal file
386
apps/web/components/bookings/booking-calendar.tsx
Normal file
@@ -0,0 +1,386 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect, useCallback } from "react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/components/ui/card";
|
||||||
|
import { TimeSlot } from "./time-slot";
|
||||||
|
import { cn, formatDate } from "@/lib/utils";
|
||||||
|
|
||||||
|
// Types for API responses
|
||||||
|
interface Site {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
slug: string;
|
||||||
|
openTime: string;
|
||||||
|
closeTime: string;
|
||||||
|
timezone: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Court {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
type: string;
|
||||||
|
status: string;
|
||||||
|
pricePerHour: number;
|
||||||
|
isActive: boolean;
|
||||||
|
site: Site;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Slot {
|
||||||
|
time: string;
|
||||||
|
available: boolean;
|
||||||
|
price: number;
|
||||||
|
bookingId?: string;
|
||||||
|
clientName?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CourtAvailability {
|
||||||
|
court: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
type: string;
|
||||||
|
status: string;
|
||||||
|
isActive: boolean;
|
||||||
|
site: Site;
|
||||||
|
};
|
||||||
|
date: string;
|
||||||
|
slots: Slot[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SelectedSlot {
|
||||||
|
courtId: string;
|
||||||
|
courtName: string;
|
||||||
|
date: string;
|
||||||
|
time: string;
|
||||||
|
available: boolean;
|
||||||
|
price: number;
|
||||||
|
bookingId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface BookingCalendarProps {
|
||||||
|
siteId?: string;
|
||||||
|
onSlotClick?: (slot: SelectedSlot) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function BookingCalendar({ siteId, onSlotClick }: BookingCalendarProps) {
|
||||||
|
const [date, setDate] = useState<Date>(() => {
|
||||||
|
const today = new Date();
|
||||||
|
today.setHours(0, 0, 0, 0);
|
||||||
|
return today;
|
||||||
|
});
|
||||||
|
const [courts, setCourts] = useState<Court[]>([]);
|
||||||
|
const [availability, setAvailability] = useState<Map<string, CourtAvailability>>(
|
||||||
|
new Map()
|
||||||
|
);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
// Format date as YYYY-MM-DD for API
|
||||||
|
const formatDateForApi = (d: Date): string => {
|
||||||
|
const year = d.getFullYear();
|
||||||
|
const month = String(d.getMonth() + 1).padStart(2, "0");
|
||||||
|
const day = String(d.getDate()).padStart(2, "0");
|
||||||
|
return `${year}-${month}-${day}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Fetch courts
|
||||||
|
const fetchCourts = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
const url = siteId ? `/api/courts?siteId=${siteId}` : "/api/courts";
|
||||||
|
const response = await fetch(url);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error("Error al cargar las canchas");
|
||||||
|
}
|
||||||
|
const data = await response.json();
|
||||||
|
setCourts(data);
|
||||||
|
return data as Court[];
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : "Error desconocido");
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}, [siteId]);
|
||||||
|
|
||||||
|
// Fetch availability for a court
|
||||||
|
const fetchCourtAvailability = useCallback(
|
||||||
|
async (courtId: string, dateStr: string) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
`/api/courts/${courtId}/availability?date=${dateStr}`
|
||||||
|
);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Error al cargar disponibilidad`);
|
||||||
|
}
|
||||||
|
return (await response.json()) as CourtAvailability;
|
||||||
|
} catch (err) {
|
||||||
|
console.error(`Error fetching availability for court ${courtId}:`, err);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
// Fetch all availability
|
||||||
|
const fetchAllAvailability = useCallback(
|
||||||
|
async (courtsList: Court[], dateStr: string) => {
|
||||||
|
setLoading(true);
|
||||||
|
const newAvailability = new Map<string, CourtAvailability>();
|
||||||
|
|
||||||
|
const promises = courtsList.map(async (court) => {
|
||||||
|
const avail = await fetchCourtAvailability(court.id, dateStr);
|
||||||
|
if (avail) {
|
||||||
|
newAvailability.set(court.id, avail);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
await Promise.all(promises);
|
||||||
|
setAvailability(newAvailability);
|
||||||
|
setLoading(false);
|
||||||
|
},
|
||||||
|
[fetchCourtAvailability]
|
||||||
|
);
|
||||||
|
|
||||||
|
// Initial load
|
||||||
|
useEffect(() => {
|
||||||
|
const load = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
const courtsList = await fetchCourts();
|
||||||
|
if (courtsList.length > 0) {
|
||||||
|
await fetchAllAvailability(courtsList, formatDateForApi(date));
|
||||||
|
} else {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
load();
|
||||||
|
}, [fetchCourts, fetchAllAvailability, date]);
|
||||||
|
|
||||||
|
// Navigation functions
|
||||||
|
const goToPrevDay = () => {
|
||||||
|
const newDate = new Date(date);
|
||||||
|
newDate.setDate(newDate.getDate() - 1);
|
||||||
|
setDate(newDate);
|
||||||
|
};
|
||||||
|
|
||||||
|
const goToToday = () => {
|
||||||
|
const today = new Date();
|
||||||
|
today.setHours(0, 0, 0, 0);
|
||||||
|
setDate(today);
|
||||||
|
};
|
||||||
|
|
||||||
|
const goToNextDay = () => {
|
||||||
|
const newDate = new Date(date);
|
||||||
|
newDate.setDate(newDate.getDate() + 1);
|
||||||
|
setDate(newDate);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle slot click
|
||||||
|
const handleSlotClick = (court: Court, slot: Slot) => {
|
||||||
|
if (onSlotClick) {
|
||||||
|
onSlotClick({
|
||||||
|
courtId: court.id,
|
||||||
|
courtName: court.name,
|
||||||
|
date: formatDateForApi(date),
|
||||||
|
time: slot.time,
|
||||||
|
available: slot.available,
|
||||||
|
price: slot.price,
|
||||||
|
bookingId: slot.bookingId,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get all unique time slots across all courts
|
||||||
|
const getAllTimeSlots = (): string[] => {
|
||||||
|
const times = new Set<string>();
|
||||||
|
availability.forEach((avail) => {
|
||||||
|
avail.slots.forEach((slot) => {
|
||||||
|
times.add(slot.time);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return Array.from(times).sort();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Check if current date is today
|
||||||
|
const isToday = (): boolean => {
|
||||||
|
const today = new Date();
|
||||||
|
today.setHours(0, 0, 0, 0);
|
||||||
|
return date.getTime() === today.getTime();
|
||||||
|
};
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="text-center text-red-600">
|
||||||
|
<p>{error}</p>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="mt-4"
|
||||||
|
onClick={() => {
|
||||||
|
setError(null);
|
||||||
|
fetchCourts();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Reintentar
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const timeSlots = getAllTimeSlots();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<CardTitle className="text-lg">Calendario</CardTitle>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button variant="outline" size="sm" onClick={goToPrevDay}>
|
||||||
|
<svg
|
||||||
|
className="h-4 w-4"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M15 19l-7-7 7-7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant={isToday() ? "default" : "outline"}
|
||||||
|
size="sm"
|
||||||
|
onClick={goToToday}
|
||||||
|
>
|
||||||
|
Hoy
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" size="sm" onClick={goToNextDay}>
|
||||||
|
<svg
|
||||||
|
className="h-4 w-4"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M9 5l7 7-7 7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-primary-600 mt-1">{formatDate(date)}</p>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="p-0">
|
||||||
|
{loading ? (
|
||||||
|
<div className="flex items-center justify-center p-12">
|
||||||
|
<div className="flex flex-col items-center gap-3">
|
||||||
|
<div className="h-8 w-8 animate-spin rounded-full border-4 border-primary-200 border-t-primary-600" />
|
||||||
|
<p className="text-sm text-primary-500">Cargando disponibilidad...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : courts.length === 0 ? (
|
||||||
|
<div className="p-6 text-center text-primary-500">
|
||||||
|
<p>No hay canchas disponibles.</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<div className="min-w-full">
|
||||||
|
{/* Header with court names */}
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"grid border-b border-primary-200 bg-primary-50",
|
||||||
|
courts.length === 1 && "grid-cols-1",
|
||||||
|
courts.length === 2 && "grid-cols-2",
|
||||||
|
courts.length === 3 && "grid-cols-3",
|
||||||
|
courts.length === 4 && "grid-cols-4",
|
||||||
|
courts.length >= 5 && "grid-cols-5"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{courts.map((court) => (
|
||||||
|
<div
|
||||||
|
key={court.id}
|
||||||
|
className="border-r border-primary-200 last:border-r-0 p-4 text-center"
|
||||||
|
>
|
||||||
|
<h3 className="font-semibold text-primary-800">
|
||||||
|
{court.name}
|
||||||
|
</h3>
|
||||||
|
<p className="text-xs text-primary-500 mt-1">
|
||||||
|
{court.type === "INDOOR" ? "Interior" : "Exterior"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Time slots grid */}
|
||||||
|
<div className="divide-y divide-primary-100">
|
||||||
|
{timeSlots.map((time) => (
|
||||||
|
<div
|
||||||
|
key={time}
|
||||||
|
className={cn(
|
||||||
|
"grid",
|
||||||
|
courts.length === 1 && "grid-cols-1",
|
||||||
|
courts.length === 2 && "grid-cols-2",
|
||||||
|
courts.length === 3 && "grid-cols-3",
|
||||||
|
courts.length === 4 && "grid-cols-4",
|
||||||
|
courts.length >= 5 && "grid-cols-5"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{courts.map((court) => {
|
||||||
|
const courtAvail = availability.get(court.id);
|
||||||
|
const slot = courtAvail?.slots.find((s) => s.time === time);
|
||||||
|
|
||||||
|
if (!slot) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={court.id}
|
||||||
|
className="border-r border-primary-200 last:border-r-0 p-2"
|
||||||
|
>
|
||||||
|
<div className="rounded-md border border-primary-200 bg-primary-50 p-3 text-center text-xs text-primary-400">
|
||||||
|
No disponible
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={court.id}
|
||||||
|
className="border-r border-primary-200 last:border-r-0 p-2"
|
||||||
|
>
|
||||||
|
<TimeSlot
|
||||||
|
time={slot.time}
|
||||||
|
available={slot.available}
|
||||||
|
price={slot.price}
|
||||||
|
clientName={slot.clientName}
|
||||||
|
onClick={() => handleSlotClick(court, slot)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{timeSlots.length === 0 && (
|
||||||
|
<div className="p-6 text-center text-primary-500">
|
||||||
|
<p>No hay horarios disponibles para este día.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
506
apps/web/components/bookings/booking-dialog.tsx
Normal file
506
apps/web/components/bookings/booking-dialog.tsx
Normal file
@@ -0,0 +1,506 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect, useCallback } from "react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
CardFooter,
|
||||||
|
} from "@/components/ui/card";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { cn, formatTime, formatCurrency, formatDate } from "@/lib/utils";
|
||||||
|
import type { SelectedSlot } from "./booking-calendar";
|
||||||
|
|
||||||
|
interface Client {
|
||||||
|
id: string;
|
||||||
|
firstName: string;
|
||||||
|
lastName: string;
|
||||||
|
email: string | null;
|
||||||
|
phone: string | null;
|
||||||
|
level: string | null;
|
||||||
|
memberships: Array<{
|
||||||
|
id: string;
|
||||||
|
status: string;
|
||||||
|
remainingHours: number | null;
|
||||||
|
plan: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
discountPercent: number | null;
|
||||||
|
};
|
||||||
|
}>;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ClientsResponse {
|
||||||
|
data: Client[];
|
||||||
|
pagination: {
|
||||||
|
total: number;
|
||||||
|
limit: number;
|
||||||
|
offset: number;
|
||||||
|
hasMore: boolean;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
interface BookingInfo {
|
||||||
|
id: string;
|
||||||
|
startTime: string;
|
||||||
|
endTime: string;
|
||||||
|
status: string;
|
||||||
|
totalPrice: number;
|
||||||
|
paymentType: string;
|
||||||
|
client: {
|
||||||
|
id: string;
|
||||||
|
firstName: string;
|
||||||
|
lastName: string;
|
||||||
|
email: string | null;
|
||||||
|
phone: string | null;
|
||||||
|
};
|
||||||
|
court: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
type: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
interface BookingDialogProps {
|
||||||
|
courtId: string;
|
||||||
|
date: string;
|
||||||
|
slot: SelectedSlot;
|
||||||
|
onClose: () => void;
|
||||||
|
onBookingCreated?: () => void;
|
||||||
|
onBookingCancelled?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function BookingDialog({
|
||||||
|
courtId,
|
||||||
|
date,
|
||||||
|
slot,
|
||||||
|
onClose,
|
||||||
|
onBookingCreated,
|
||||||
|
onBookingCancelled,
|
||||||
|
}: BookingDialogProps) {
|
||||||
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
|
const [clients, setClients] = useState<Client[]>([]);
|
||||||
|
const [selectedClient, setSelectedClient] = useState<Client | null>(null);
|
||||||
|
const [loadingClients, setLoadingClients] = useState(false);
|
||||||
|
const [loadingBooking, setLoadingBooking] = useState(false);
|
||||||
|
const [booking, setBooking] = useState<BookingInfo | null>(null);
|
||||||
|
const [loadingBookingInfo, setLoadingBookingInfo] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [creatingBooking, setCreatingBooking] = useState(false);
|
||||||
|
const [cancellingBooking, setCancellingBooking] = useState(false);
|
||||||
|
|
||||||
|
// Parse slot time to Date for display
|
||||||
|
const [hours, minutes] = slot.time.split(":").map(Number);
|
||||||
|
const slotDate = new Date(date);
|
||||||
|
slotDate.setHours(hours, minutes, 0, 0);
|
||||||
|
|
||||||
|
// Fetch booking info if slot is not available
|
||||||
|
const fetchBookingInfo = useCallback(async () => {
|
||||||
|
if (!slot.bookingId) return;
|
||||||
|
|
||||||
|
setLoadingBookingInfo(true);
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/bookings/${slot.bookingId}`);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error("Error al cargar la reserva");
|
||||||
|
}
|
||||||
|
const data = await response.json();
|
||||||
|
setBooking(data);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : "Error desconocido");
|
||||||
|
} finally {
|
||||||
|
setLoadingBookingInfo(false);
|
||||||
|
}
|
||||||
|
}, [slot.bookingId]);
|
||||||
|
|
||||||
|
// Fetch clients based on search
|
||||||
|
const fetchClients = useCallback(async (search: string) => {
|
||||||
|
if (!search || search.trim().length < 2) {
|
||||||
|
setClients([]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoadingClients(true);
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
`/api/clients?search=${encodeURIComponent(search)}&limit=10`
|
||||||
|
);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error("Error al buscar clientes");
|
||||||
|
}
|
||||||
|
const data: ClientsResponse = await response.json();
|
||||||
|
setClients(data.data);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Error fetching clients:", err);
|
||||||
|
setClients([]);
|
||||||
|
} finally {
|
||||||
|
setLoadingClients(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Load booking info on mount if slot is booked
|
||||||
|
useEffect(() => {
|
||||||
|
if (!slot.available && slot.bookingId) {
|
||||||
|
fetchBookingInfo();
|
||||||
|
}
|
||||||
|
}, [slot.available, slot.bookingId, fetchBookingInfo]);
|
||||||
|
|
||||||
|
// Debounce client search
|
||||||
|
useEffect(() => {
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
fetchClients(searchQuery);
|
||||||
|
}, 300);
|
||||||
|
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}, [searchQuery, fetchClients]);
|
||||||
|
|
||||||
|
// Handle booking creation
|
||||||
|
const handleCreateBooking = async () => {
|
||||||
|
if (!selectedClient) return;
|
||||||
|
|
||||||
|
setCreatingBooking(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Calculate end time (1 hour later)
|
||||||
|
const endDate = new Date(slotDate);
|
||||||
|
endDate.setHours(endDate.getHours() + 1);
|
||||||
|
|
||||||
|
const response = await fetch("/api/bookings", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
courtId,
|
||||||
|
clientId: selectedClient.id,
|
||||||
|
startTime: slotDate.toISOString(),
|
||||||
|
endTime: endDate.toISOString(),
|
||||||
|
paymentType: "CASH",
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
throw new Error(data.error || "Error al crear la reserva");
|
||||||
|
}
|
||||||
|
|
||||||
|
onBookingCreated?.();
|
||||||
|
onClose();
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : "Error al crear la reserva");
|
||||||
|
} finally {
|
||||||
|
setCreatingBooking(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle booking cancellation
|
||||||
|
const handleCancelBooking = async () => {
|
||||||
|
if (!slot.bookingId) return;
|
||||||
|
|
||||||
|
setCancellingBooking(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/bookings/${slot.bookingId}`, {
|
||||||
|
method: "DELETE",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
cancelReason: "Cancelada por el administrador",
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
throw new Error(data.error || "Error al cancelar la reserva");
|
||||||
|
}
|
||||||
|
|
||||||
|
onBookingCancelled?.();
|
||||||
|
onClose();
|
||||||
|
} catch (err) {
|
||||||
|
setError(
|
||||||
|
err instanceof Error ? err.message : "Error al cancelar la reserva"
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
setCancellingBooking(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle click outside to close
|
||||||
|
const handleOverlayClick = (e: React.MouseEvent) => {
|
||||||
|
if (e.target === e.currentTarget) {
|
||||||
|
onClose();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
|
||||||
|
onClick={handleOverlayClick}
|
||||||
|
>
|
||||||
|
<Card className="w-full max-w-md max-h-[90vh] overflow-hidden flex flex-col">
|
||||||
|
<CardHeader className="pb-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<CardTitle className="text-lg">
|
||||||
|
{slot.available ? "Nueva Reserva" : "Detalle de Reserva"}
|
||||||
|
</CardTitle>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="rounded-full p-1 hover:bg-primary-100 transition-colors"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="h-5 w-5 text-primary-500"
|
||||||
|
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="text-sm text-primary-600 space-y-1 mt-2">
|
||||||
|
<p>
|
||||||
|
<span className="font-medium">Cancha:</span> {slot.courtName}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span className="font-medium">Fecha:</span> {formatDate(date)}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span className="font-medium">Hora:</span> {formatTime(slotDate)}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span className="font-medium">Precio:</span>{" "}
|
||||||
|
{formatCurrency(slot.price)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
<CardContent className="flex-1 overflow-y-auto">
|
||||||
|
{error && (
|
||||||
|
<div className="mb-4 rounded-md bg-red-50 border border-red-200 p-3 text-sm text-red-700">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Available slot - show client search */}
|
||||||
|
{slot.available && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-primary-700 mb-2">
|
||||||
|
Buscar Cliente
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="Nombre, email o telefono..."
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Client search results */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
{loadingClients && (
|
||||||
|
<div className="flex items-center justify-center py-4">
|
||||||
|
<div className="h-5 w-5 animate-spin rounded-full border-2 border-primary-200 border-t-primary-600" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!loadingClients && searchQuery.length >= 2 && clients.length === 0 && (
|
||||||
|
<p className="text-sm text-primary-500 text-center py-4">
|
||||||
|
No se encontraron clientes.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!loadingClients &&
|
||||||
|
clients.map((client) => (
|
||||||
|
<button
|
||||||
|
key={client.id}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setSelectedClient(client)}
|
||||||
|
className={cn(
|
||||||
|
"w-full rounded-md border p-3 text-left transition-all",
|
||||||
|
"hover:border-primary-400 hover:bg-primary-50",
|
||||||
|
selectedClient?.id === client.id
|
||||||
|
? "border-primary-500 bg-primary-50 ring-2 ring-primary-500"
|
||||||
|
: "border-primary-200 bg-white"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-primary-800">
|
||||||
|
{client.firstName} {client.lastName}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-primary-500">
|
||||||
|
{client.email || client.phone || "Sin contacto"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{client.memberships.length > 0 && (
|
||||||
|
<span className="text-xs bg-accent-100 text-accent-700 px-2 py-1 rounded-full">
|
||||||
|
{client.memberships[0].plan.name}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Selected client summary */}
|
||||||
|
{selectedClient && (
|
||||||
|
<div className="mt-4 rounded-md border border-accent-200 bg-accent-50 p-3">
|
||||||
|
<p className="text-sm font-medium text-accent-800">
|
||||||
|
Cliente seleccionado:
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-accent-700">
|
||||||
|
{selectedClient.firstName} {selectedClient.lastName}
|
||||||
|
</p>
|
||||||
|
{selectedClient.memberships.length > 0 && (
|
||||||
|
<p className="text-xs text-accent-600 mt-1">
|
||||||
|
Membresia: {selectedClient.memberships[0].plan.name}
|
||||||
|
{selectedClient.memberships[0].remainingHours !== null &&
|
||||||
|
selectedClient.memberships[0].remainingHours > 0 && (
|
||||||
|
<span className="ml-2">
|
||||||
|
({selectedClient.memberships[0].remainingHours}h restantes)
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Booked slot - show booking info */}
|
||||||
|
{!slot.available && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{loadingBookingInfo && (
|
||||||
|
<div className="flex items-center justify-center py-8">
|
||||||
|
<div className="h-6 w-6 animate-spin rounded-full border-2 border-primary-200 border-t-primary-600" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!loadingBookingInfo && booking && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="rounded-md border border-primary-200 bg-primary-50 p-4 space-y-3">
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-primary-500">Cliente</p>
|
||||||
|
<p className="font-medium text-primary-800">
|
||||||
|
{booking.client.firstName} {booking.client.lastName}
|
||||||
|
</p>
|
||||||
|
{booking.client.phone && (
|
||||||
|
<p className="text-sm text-primary-600">
|
||||||
|
{booking.client.phone}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{booking.client.email && (
|
||||||
|
<p className="text-sm text-primary-600">
|
||||||
|
{booking.client.email}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-primary-500">Estado</p>
|
||||||
|
<p
|
||||||
|
className={cn(
|
||||||
|
"text-sm font-medium",
|
||||||
|
booking.status === "CONFIRMED" && "text-accent-600",
|
||||||
|
booking.status === "PENDING" && "text-yellow-600",
|
||||||
|
booking.status === "CANCELLED" && "text-red-600"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{booking.status === "CONFIRMED" && "Confirmada"}
|
||||||
|
{booking.status === "PENDING" && "Pendiente"}
|
||||||
|
{booking.status === "CANCELLED" && "Cancelada"}
|
||||||
|
{booking.status === "COMPLETED" && "Completada"}
|
||||||
|
{booking.status === "NO_SHOW" && "No asistio"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-primary-500">Tipo de Pago</p>
|
||||||
|
<p className="text-sm text-primary-800">
|
||||||
|
{booking.paymentType === "CASH" && "Efectivo"}
|
||||||
|
{booking.paymentType === "CARD" && "Tarjeta"}
|
||||||
|
{booking.paymentType === "TRANSFER" && "Transferencia"}
|
||||||
|
{booking.paymentType === "MEMBERSHIP" && "Membresia"}
|
||||||
|
{booking.paymentType === "FREE" && "Gratuito"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-primary-500">Total</p>
|
||||||
|
<p className="text-lg font-semibold text-primary-800">
|
||||||
|
{formatCurrency(Number(booking.totalPrice))}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!loadingBookingInfo && !booking && (
|
||||||
|
<div className="text-center py-4 text-primary-500">
|
||||||
|
<p>No se pudo cargar la informacion de la reserva.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
|
||||||
|
<CardFooter className="border-t border-primary-200 bg-primary-50 pt-4">
|
||||||
|
<div className="flex w-full gap-3">
|
||||||
|
<Button variant="outline" onClick={onClose} className="flex-1">
|
||||||
|
Cerrar
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{slot.available && (
|
||||||
|
<Button
|
||||||
|
variant="accent"
|
||||||
|
onClick={handleCreateBooking}
|
||||||
|
disabled={!selectedClient || creatingBooking}
|
||||||
|
className="flex-1"
|
||||||
|
>
|
||||||
|
{creatingBooking ? (
|
||||||
|
<span className="flex items-center gap-2">
|
||||||
|
<div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
|
||||||
|
Creando...
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
"Crear Reserva"
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!slot.available && booking && booking.status !== "CANCELLED" && (
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
onClick={handleCancelBooking}
|
||||||
|
disabled={cancellingBooking}
|
||||||
|
className="flex-1"
|
||||||
|
>
|
||||||
|
{cancellingBooking ? (
|
||||||
|
<span className="flex items-center gap-2">
|
||||||
|
<div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
|
||||||
|
Cancelando...
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
"Cancelar Reserva"
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
3
apps/web/components/bookings/index.ts
Normal file
3
apps/web/components/bookings/index.ts
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export { TimeSlot } from "./time-slot";
|
||||||
|
export { BookingCalendar, type SelectedSlot } from "./booking-calendar";
|
||||||
|
export { BookingDialog } from "./booking-dialog";
|
||||||
74
apps/web/components/bookings/time-slot.tsx
Normal file
74
apps/web/components/bookings/time-slot.tsx
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { cn, formatTime, formatCurrency } from "@/lib/utils";
|
||||||
|
|
||||||
|
interface TimeSlotProps {
|
||||||
|
time: string; // HH:MM format
|
||||||
|
available: boolean;
|
||||||
|
price: number;
|
||||||
|
clientName?: string;
|
||||||
|
onClick?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TimeSlot({
|
||||||
|
time,
|
||||||
|
available,
|
||||||
|
price,
|
||||||
|
clientName,
|
||||||
|
onClick,
|
||||||
|
}: TimeSlotProps) {
|
||||||
|
// Convert HH:MM string to a Date object for formatting
|
||||||
|
const [hours, minutes] = time.split(":").map(Number);
|
||||||
|
const timeDate = new Date();
|
||||||
|
timeDate.setHours(hours, minutes, 0, 0);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClick}
|
||||||
|
disabled={!available && !clientName}
|
||||||
|
className={cn(
|
||||||
|
"w-full rounded-md border p-3 text-left transition-all",
|
||||||
|
"focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2",
|
||||||
|
available && [
|
||||||
|
"border-accent bg-accent-50 hover:bg-accent-100",
|
||||||
|
"cursor-pointer",
|
||||||
|
],
|
||||||
|
!available && clientName && [
|
||||||
|
"border-primary-200 bg-primary-100",
|
||||||
|
"cursor-pointer hover:bg-primary-150",
|
||||||
|
],
|
||||||
|
!available && !clientName && [
|
||||||
|
"border-primary-200 bg-primary-100 opacity-50",
|
||||||
|
"cursor-not-allowed",
|
||||||
|
]
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-sm font-medium text-primary-800">
|
||||||
|
{formatTime(timeDate)}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"text-xs font-semibold",
|
||||||
|
available ? "text-accent-700" : "text-primary-500"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{formatCurrency(price)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{clientName && (
|
||||||
|
<div className="mt-1">
|
||||||
|
<span className="text-xs text-primary-600 truncate block">
|
||||||
|
{clientName}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{available && (
|
||||||
|
<div className="mt-1">
|
||||||
|
<span className="text-xs text-accent-600">Disponible</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -21,14 +21,14 @@ interface NavItem {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const navItems: NavItem[] = [
|
const navItems: NavItem[] = [
|
||||||
{ label: 'Dashboard', href: '/admin/dashboard', icon: LayoutDashboard },
|
{ label: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
|
||||||
{ label: 'Reservas', href: '/admin/bookings', icon: Calendar },
|
{ label: 'Reservas', href: '/bookings', icon: Calendar },
|
||||||
{ label: 'Torneos', href: '/admin/tournaments', icon: Trophy },
|
{ label: 'Torneos', href: '/tournaments', icon: Trophy },
|
||||||
{ label: 'Ventas', href: '/admin/pos', icon: ShoppingCart },
|
{ label: 'Ventas', href: '/pos', icon: ShoppingCart },
|
||||||
{ label: 'Clientes', href: '/admin/clients', icon: Users },
|
{ label: 'Clientes', href: '/clients', icon: Users },
|
||||||
{ label: 'Membresías', href: '/admin/memberships', icon: CreditCard },
|
{ label: 'Membresías', href: '/memberships', icon: CreditCard },
|
||||||
{ label: 'Reportes', href: '/admin/reports', icon: BarChart3 },
|
{ label: 'Reportes', href: '/reports', icon: BarChart3 },
|
||||||
{ label: 'Configuración', href: '/admin/settings', icon: Settings },
|
{ label: 'Configuración', href: '/settings', icon: Settings },
|
||||||
];
|
];
|
||||||
|
|
||||||
export function Sidebar() {
|
export function Sidebar() {
|
||||||
|
|||||||
Reference in New Issue
Block a user