+
+
+
+
+
+ {label}
+{value}
+ {detail &&{detail}
} +
+
+
+
+
+
+
+
+
+
+
+
+ Cambiar complejo
+
+ {myComplexesQuery.data.map((complex) => (
+ {
+ void handleSelectComplex(complex.id, complex.complexSlug);
+ }}
+ >
+
+ {complex.complexSlug === complexSlug &&
+ ))}
+
+ Apariencia
+
+ setTheme(value as 'light' | 'dark' | 'system')}
+ >
+
+
+
+
+
+
+
+
+ {
+ void navigate({ to: '/profile' });
+ }}
+ >
+
+
+ {currentComplexSlug && (
+ {
+ void navigate({
+ to: '/complex/$slug/edit',
+ params: { slug: currentComplexSlug },
+ });
+ }}
+ >
+
+ )}
+
+ {
+ void handleSignOut();
+ }}
+ >
+
+
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+ Playzer
+
+
+
+
+
+
+
+
+
+
+
+ {isAuthenticated ? (
+
+
+
+ {displayName}
+ {user?.email}
+
+ {currentComplexName}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {displayName}
+{user?.email}
+ {isAuthenticated && ( +{currentComplexName}
+ )} +
+
+
+
+
+
+ + Cuenta +
+
+
+ {children}
+
+
+ );
+}
+
+function Background() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/frontend/src/components/ui/calendar.tsx b/apps/frontend/src/components/ui/calendar.tsx
index 5f8ad29..fb6ac8b 100644
--- a/apps/frontend/src/components/ui/calendar.tsx
+++ b/apps/frontend/src/components/ui/calendar.tsx
@@ -4,12 +4,14 @@ import { DayPicker } from 'react-day-picker';
import { buttonVariants } from '@/components/ui/button';
import { cn } from '@/lib/utils';
+import { es } from 'date-fns/locale';
export type CalendarProps = React.ComponentProps
+
+
+
+
+
+
+ Resumen del día
++ {formatBookingDate(selectedDate, { year: 'numeric' })} +
+
+
+ Acciones rápidas
+
+
+
+
+
+
+
+ + Panel de Reservas +
++ Gestiona las canchas de {complex.complexName} +
+
+ {items.map((item) => (
+
+
+ {item.label}
+
+ ))}
+
+ );
+}
diff --git a/apps/frontend/src/features/booking/components/booking-timeline.tsx b/apps/frontend/src/features/booking/components/booking-timeline.tsx
new file mode 100644
index 0000000..372fa94
--- /dev/null
+++ b/apps/frontend/src/features/booking/components/booking-timeline.tsx
@@ -0,0 +1,304 @@
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { ChevronLeft, ChevronRight, Dumbbell, Plus, Users } from 'lucide-react';
+import { useBooking } from '../booking-provider';
+import type { BookingCourtSchedule, BookingTimelineSegment } from '../booking.types';
+import { timeToMinutes } from '../lib/booking-time';
+import { BookingStatusLegend } from './booking-status-legend';
+
+const courtInfoWidth = 220;
+const hourWidth = 104;
+
+export function BookingTimeline() {
+ const {
+ schedules,
+ timelineHours,
+ visibleTimeRange,
+ currentTime,
+ isLoading,
+ isError,
+ errorMessage,
+ } = useBooking();
+
+ const rangeStart = timeToMinutes(visibleTimeRange.start);
+ const rangeEnd = timeToMinutes(visibleTimeRange.end);
+ const totalMinutes = rangeEnd - rangeStart;
+ const gridWidth = Math.max((timelineHours.length - 1) * hourWidth, 760);
+ const timelineMarks = timelineHours.map((hour) => ({
+ hour,
+ left: ((timeToMinutes(hour) - rangeStart) / totalMinutes) * 100,
+ }));
+
+ return (
+
+
+
+ {isLoading && (
+
+
+
+
+ Cargando reservas...
+ )}
+
+ {isError && !isLoading && (
+ {errorMessage}
+ )}
+
+ {!isLoading && !isError && schedules.length === 0 && (
+
+ No hay canchas para los filtros seleccionados.
+
+ )}
+
+ {!isLoading && !isError && schedules.length > 0 && (
+
+
+ )}
+
+
+
+ {schedules.map((schedule) => (
+
+
+ {currentTime && (
+
+
+
+ );
+}
+
+interface BookingCourtRowProps {
+ schedule: BookingCourtSchedule;
+ courtInfoWidth: number;
+ gridWidth: number;
+ rangeStart: number;
+ totalMinutes: number;
+ timelineMarks: Array<{ hour: string; left: number }>;
+}
+
+function BookingCourtRow({
+ schedule,
+ courtInfoWidth,
+ gridWidth,
+ rangeStart,
+ totalMinutes,
+ timelineMarks,
+}: BookingCourtRowProps) {
+ return (
+
+ {timelineMarks.map((mark) => (
+
+
+ {mark.hour}
+
+ ))}
+
+
+ );
+}
+
+function BookingCourtInfo({ schedule }: { schedule: BookingCourtSchedule }) {
+ return (
+
+
+
+ {timelineMarks.map((mark) => (
+
+ ))}
+
+
+
+ {schedule.segments.map((segment) => (
+
+
+
+ );
+}
+
+interface BookingSlotBlockProps {
+ segment: BookingTimelineSegment;
+ schedule: BookingCourtSchedule;
+ rangeStart: number;
+ totalMinutes: number;
+}
+
+function BookingSlotBlock({ segment, schedule, rangeStart, totalMinutes }: BookingSlotBlockProps) {
+ const { openCreateBooking, updateBookingStatus, openBookingTools } = useBooking();
+ const left = ((segment.startMinutes - rangeStart) / totalMinutes) * 100;
+ const width = ((segment.endMinutes - segment.startMinutes) / totalMinutes) * 100;
+ const isFree = segment.status === 'free';
+
+ return (
+
+ );
+}
+
+interface CurrentTimeIndicatorProps {
+ time: string;
+ courtInfoWidth: number;
+ gridWidth: number;
+ rangeStart: number;
+ totalMinutes: number;
+}
+
+function CurrentTimeIndicator({
+ time,
+ courtInfoWidth,
+ gridWidth,
+ rangeStart,
+ totalMinutes,
+}: CurrentTimeIndicatorProps) {
+ const left = courtInfoWidth + ((timeToMinutes(time) - rangeStart) / totalMinutes) * gridWidth;
+
+ return (
+
+
+
+
+ {schedule.court.name}
+{schedule.court.sport.name}
+
+
+
+ {schedule.metrics.free}
+
+
+
+ {schedule.metrics.reserved}
+
+
+
+ {schedule.metrics.maintenance}
+
+
+
+
+ );
+}
diff --git a/apps/frontend/src/features/booking/components/booking-toolbar.tsx b/apps/frontend/src/features/booking/components/booking-toolbar.tsx
new file mode 100644
index 0000000..d63893c
--- /dev/null
+++ b/apps/frontend/src/features/booking/components/booking-toolbar.tsx
@@ -0,0 +1,144 @@
+import { Button } from '@/components/ui/button';
+import { DatePicker } from '@/components/ui/date-picker';
+import { Field, FieldLabel } from '@/components/ui/field';
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select';
+import { ChevronLeft, ChevronRight, Clock, SlidersHorizontal } from 'lucide-react';
+import { useBooking } from '../booking-provider';
+import type { BookingStatusFilter } from '../booking.types';
+import { fromIsoDateLocal, toIsoDateLocal } from '../lib/booking-time';
+
+const timeRangeOptions = [
+ { label: '08:00 - 22:00', start: '08:00', end: '22:00' },
+ { label: '06:00 - 00:00', start: '06:00', end: '23:59' },
+ { label: '08:00 - 14:00', start: '08:00', end: '14:00' },
+ { label: '14:00 - 22:00', start: '14:00', end: '22:00' },
+];
+
+const statusOptions: Array<{ value: BookingStatusFilter; label: string }> = [
+ { value: 'all', label: 'Todos' },
+ { value: 'free', label: 'Libre' },
+ { value: 'reserved', label: 'Reservado' },
+ { value: 'maintenance', label: 'Mantenimiento' },
+];
+
+export function BookingToolbar() {
+ const {
+ courts,
+ selectedDate,
+ selectedSportId,
+ selectedStatus,
+ visibleTimeRange,
+ setSelectedDate,
+ moveSelectedDate,
+ setSelectedSportId,
+ setSelectedStatus,
+ setVisibleTimeRange,
+ } = useBooking();
+
+ const sports = [...new Map(courts.map((court) => [court.sport.id, court.sport])).values()];
+ const activeRangeValue = `${visibleTimeRange.start}-${visibleTimeRange.end}`;
+
+ return (
+
+ {time}
+
+
+
+
+ Deporte
+
+
+
+
+ Estado
+
+
+
+
+ Fecha
+
+
+
+ Hora
+
+
+
+
+
+
+
+
+ setSelectedDate(date ? toIsoDateLocal(date) : toIsoDateLocal(new Date()))
+ }
+ />
+
+
+
+
+
+
+
+ Acciones disponibles
++ Elegí qué hacer según lo que ocurrió con el cliente. +
+
+
+
+ {withDivider && (
+
+ )}
+
+
+
+ );
+}
+
+function ActionButton({
+ icon,
+ title,
+ description,
+ className,
+ onClick
+}: {
+ icon: React.ReactNode;
+ title: string;
+ description: string;
+ className: string;
+ onClick?: () => void;
+}) {
+ return (
+
+ );
+
+}
\ No newline at end of file
diff --git a/apps/frontend/src/features/booking/lib/booking-time.ts b/apps/frontend/src/features/booking/lib/booking-time.ts
new file mode 100644
index 0000000..1b34009
--- /dev/null
+++ b/apps/frontend/src/features/booking/lib/booking-time.ts
@@ -0,0 +1,66 @@
+import type { DayOfWeek } from '@repo/api-contract';
+
+export function toIsoDateLocal(date: Date) {
+ const year = date.getFullYear();
+ const month = String(date.getMonth() + 1).padStart(2, '0');
+ const day = String(date.getDate()).padStart(2, '0');
+ return `${year}-${month}-${day}`;
+}
+
+export function fromIsoDateLocal(dateIso: string): Date | undefined {
+ const [year, month, day] = dateIso.split('-').map(Number);
+ if (!year || !month || !day) return undefined;
+ return new Date(year, month - 1, day);
+}
+
+export function timeToMinutes(time: string) {
+ const [hours, minutes] = time.split(':').map(Number);
+ return hours * 60 + minutes;
+}
+
+export function minutesToTime(minutes: number) {
+ const hours = Math.floor(minutes / 60);
+ const remainder = minutes % 60;
+ return `${String(hours).padStart(2, '0')}:${String(remainder).padStart(2, '0')}`;
+}
+
+export function addDaysIso(dateIso: string, amount: number) {
+ const date = fromIsoDateLocal(dateIso) ?? new Date();
+ date.setDate(date.getDate() + amount);
+ return toIsoDateLocal(date);
+}
+
+export function isTodayIso(dateIso: string) {
+ return dateIso === toIsoDateLocal(new Date());
+}
+
+export function formatBookingDate(dateIso: string, options?: Intl.DateTimeFormatOptions) {
+ const date = fromIsoDateLocal(dateIso);
+ if (!date) return dateIso;
+
+ return new Intl.DateTimeFormat('es-AR', {
+ weekday: 'long',
+ day: '2-digit',
+ month: 'long',
+ year: options?.year,
+ ...options,
+ }).format(date);
+}
+
+export function getDayOfWeek(dateIso: string): DayOfWeek {
+ const date = fromIsoDateLocal(dateIso) ?? new Date();
+ const day = date.getDay();
+
+ if (day === 0) return 'SUNDAY';
+ if (day === 1) return 'MONDAY';
+ if (day === 2) return 'TUESDAY';
+ if (day === 3) return 'WEDNESDAY';
+ if (day === 4) return 'THURSDAY';
+ if (day === 5) return 'FRIDAY';
+ return 'SATURDAY';
+}
+
+export function getNowTime() {
+ const now = new Date();
+ return `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
+}
diff --git a/apps/frontend/src/features/home/home-page.tsx b/apps/frontend/src/features/home/home-page.tsx
index f4aec80..29b7bac 100644
--- a/apps/frontend/src/features/home/home-page.tsx
+++ b/apps/frontend/src/features/home/home-page.tsx
@@ -1,62 +1,9 @@
-import { Button } from '@/components/ui/button';
-import { DatePicker } from '@/components/ui/date-picker';
-import { Field, FieldError, FieldLabel } from '@/components/ui/field';
-import { Input } from '@/components/ui/input';
-import {
- ResponsiveDialog,
- ResponsiveDialogClose,
- ResponsiveDialogContent,
- ResponsiveDialogDescription,
- ResponsiveDialogFooter,
- ResponsiveDialogHeader,
- ResponsiveDialogTitle,
- ResponsiveDialogTrigger,
-} from '@/components/ui/responsive-dialog';
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from '@/components/ui/select';
+import { Booking } from '@/features/booking/booking';
import { ApiClientError, apiClient } from '@/lib/api-client';
import { useCurrentComplexStore } from '@/lib/stores/current-complex-store';
-import { zodResolver } from '@hookform/resolvers/zod';
-import type { AdminBooking } from '@repo/api-contract';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
import { useNavigate } from '@tanstack/react-router';
-import { Check, Copy } from 'lucide-react';
-import { useEffect, useMemo, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-const manualBookingSchema = z.object({
- customerName: z
- .string()
- .trim()
- .min(2, 'Ingresa un nombre válido.')
- .max(120, 'El nombre no puede superar los 120 caracteres.'),
- customerPhone: z
- .string()
- .trim()
- .min(6, 'Ingresa un telefono válido.')
- .max(30, 'El telefono no puede superar los 30 caracteres.'),
-});
-
-type ManualBookingForm = z.infer
+ {icon}
+
+
+
+ + {label} +
++ {value} +
+ {helper && ( ++ {helper} +
+ )} +Cargando panel...
-Cargando panel...
; } if (myComplexesQuery.isError) { return ( -- {extractMessage(myComplexesQuery.error, 'No pudimos cargar tus complejos.')} -
-+ {extractMessage(myComplexesQuery.error, 'No pudimos cargar tus complejos.')} +
); } if (!selectedComplex) { - return ( -No tienes complejos asignados todavía.
-No tienes complejos asignados todavía.
; } - return ( -
- {
- setIsManualBookingOpen(open);
- if (!open) {
- reset();
- setManualDate(todayIso);
- setSelectedSportId(undefined);
- setSelectedCourtId('');
- setSelectedStartTime('');
- }
- }}
- >
-
-
-
- e.preventDefault()}
- >
-
- Reserva manual
-
- Crea un turno para atención telefónica o mostrador.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Panel de reservas
-- Gestiona turnos del día y futuros para {selectedComplex.complexName}. -
-
-
- {publicBookingUrl}
-
-
-
-
-
- Mostrar desde
- {
- const isoDate = date ? toIsoDateLocal(date) : todayIso;
- setFromDate(isoDate);
- }}
- disabled={(date) => {
- const today = new Date();
- today.setHours(0, 0, 0, 0);
- const checkDate = new Date(date);
- checkDate.setHours(0, 0, 0, 0);
- return checkDate < today;
- }}
- placeholder="Selecciona una fecha"
- />
-
-
-
- {bookingsQuery.isLoading && (
- Cargando reservas...
- )} - - {bookingsQuery.isError && ( -- {extractMessage(bookingsQuery.error, 'No pudimos cargar las reservas.')} -
- )} - - {!bookingsQuery.isLoading && !bookingsQuery.isError && groupedBookings.length === 0 && ( -- No hay reservas para la fecha seleccionada en adelante. -
- )} - -
- {groupedBookings.map(([date, bookings]) => (
-
-
- ))}
-
-
- {updateStatusMutation.isError && (
- {formatDateLabel(date)}
-
- {bookings.map((booking) => {
- const effectiveStatus = getEffectiveStatus(booking);
- const canManage =
- booking.status === 'CONFIRMED' && effectiveStatus === 'CONFIRMED';
- const isMutating = updateStatusMutation.isPending;
-
- return (
-
-
-
- );
- })}
-
-
-
- - {booking.startTime} - {booking.endTime} · {booking.courtName} -
-- {booking.customerName} ({booking.customerPhone}) · Código{' '} - {booking.bookingCode} -
-
-
- {effectiveStatusLabel(effectiveStatus)}
-
-
- {canManage && (
- <>
-
-
-
- )}
-
- - {extractMessage(updateStatusMutation.error, 'No pudimos actualizar la reserva.')} -
- )} -
-
-
-
- );
-}
diff --git a/apps/frontend/src/index.css b/apps/frontend/src/index.css
index e49f238..328efd3 100644
--- a/apps/frontend/src/index.css
+++ b/apps/frontend/src/index.css
@@ -1,44 +1,80 @@
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
-@import "@fontsource-variable/geist";
+/* @import "@fontsource-variable/inter"; */
@custom-variant dark (&:is(.dark *));
+@source "../../../apps/**/*.{ts,tsx}";
+@source "../../../components/**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";
+
+html,
+body,
+#root {
+ width: 100%;
+ min-height: 100%;
+ margin: 0;
+}
+
@theme inline {
--font-heading: var(--font-sans);
- --font-sans: "Geist Variable", sans-serif;
- --color-sidebar-ring: var(--sidebar-ring);
- --color-sidebar-border: var(--sidebar-border);
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
- --color-sidebar-accent: var(--sidebar-accent);
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
- --color-sidebar-primary: var(--sidebar-primary);
- --color-sidebar-foreground: var(--sidebar-foreground);
- --color-sidebar: var(--sidebar);
- --color-chart-5: var(--chart-5);
- --color-chart-4: var(--chart-4);
- --color-chart-3: var(--chart-3);
- --color-chart-2: var(--chart-2);
- --color-chart-1: var(--chart-1);
- --color-ring: var(--ring);
- --color-input: var(--input);
- --color-border: var(--border);
- --color-destructive: var(--destructive);
- --color-accent-foreground: var(--accent-foreground);
- --color-accent: var(--accent);
- --color-muted-foreground: var(--muted-foreground);
- --color-muted: var(--muted);
- --color-secondary-foreground: var(--secondary-foreground);
- --color-secondary: var(--secondary);
- --color-primary-foreground: var(--primary-foreground);
- --color-primary: var(--primary);
- --color-popover-foreground: var(--popover-foreground);
- --color-popover: var(--popover);
- --color-card-foreground: var(--card-foreground);
- --color-card: var(--card);
- --color-foreground: var(--foreground);
+
--color-background: var(--background);
+ --color-foreground: var(--foreground);
+
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+
+ --color-destructive: var(--destructive);
+ --color-destructive-foreground: var(--destructive-foreground);
+
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+
+ --color-success: var(--success);
+ --color-success-foreground: var(--success-foreground);
+
+ --color-reserved: var(--reserved);
+ --color-reserved-foreground: var(--reserved-foreground);
+
+ --color-maintenance: var(--maintenance);
+ --color-maintenance-foreground: var(--maintenance-foreground);
+
+ --color-warning: var(--warning);
+ --color-warning-foreground: var(--warning-foreground);
+
+ --color-chart-1: var(--chart-1);
+ --color-chart-2: var(--chart-2);
+ --color-chart-3: var(--chart-3);
+ --color-chart-4: var(--chart-4);
+ --color-chart-5: var(--chart-5);
+
+ --color-sidebar: var(--sidebar);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-ring: var(--sidebar-ring);
+
--radius-sm: calc(var(--radius) * 0.6);
--radius-md: calc(var(--radius) * 0.8);
--radius-lg: var(--radius);
@@ -46,85 +82,166 @@
--radius-2xl: calc(var(--radius) * 1.8);
--radius-3xl: calc(var(--radius) * 2.2);
--radius-4xl: calc(var(--radius) * 2.6);
+
+ --font-sans: "Inter Variable", sans-serif;
}
:root {
- --background: oklch(1 0 0);
- --foreground: oklch(0.145 0 0);
+ --background: oklch(0.985 0.004 240);
+ --foreground: oklch(0.18 0.012 245);
+
--card: oklch(1 0 0);
- --card-foreground: oklch(0.145 0 0);
+ --card-foreground: oklch(0.18 0.012 245);
+
--popover: oklch(1 0 0);
- --popover-foreground: oklch(0.145 0 0);
- --primary: oklch(0.205 0 0);
- --primary-foreground: oklch(0.985 0 0);
- --secondary: oklch(0.97 0 0);
- --secondary-foreground: oklch(0.205 0 0);
- --muted: oklch(0.97 0 0);
- --muted-foreground: oklch(0.556 0 0);
- --accent: oklch(0.97 0 0);
- --accent-foreground: oklch(0.205 0 0);
- --destructive: oklch(0.577 0.245 27.325);
- --border: oklch(0.922 0 0);
- --input: oklch(0.922 0 0);
- --ring: oklch(0.708 0 0);
- --chart-1: oklch(0.87 0 0);
- --chart-2: oklch(0.556 0 0);
- --chart-3: oklch(0.439 0 0);
- --chart-4: oklch(0.371 0 0);
- --chart-5: oklch(0.269 0 0);
- --radius: 0.625rem;
- --sidebar: oklch(0.985 0 0);
- --sidebar-foreground: oklch(0.145 0 0);
- --sidebar-primary: oklch(0.205 0 0);
- --sidebar-primary-foreground: oklch(0.985 0 0);
- --sidebar-accent: oklch(0.97 0 0);
- --sidebar-accent-foreground: oklch(0.205 0 0);
- --sidebar-border: oklch(0.922 0 0);
- --sidebar-ring: oklch(0.708 0 0);
+ --popover-foreground: oklch(0.18 0.012 245);
+
+ --primary: oklch(0.63 0.19 158);
+ --primary-foreground: oklch(0.985 0.004 160);
+
+ --secondary: oklch(0.94 0.01 240);
+ --secondary-foreground: oklch(0.28 0.018 245);
+
+ --muted: oklch(0.95 0.008 240);
+ --muted-foreground: oklch(0.52 0.018 245);
+
+ --accent: oklch(0.93 0.035 158);
+ --accent-foreground: oklch(0.34 0.12 158);
+
+ --destructive: oklch(0.62 0.22 25);
+ --destructive-foreground: oklch(0.98 0.01 25);
+
+ --success: oklch(0.63 0.19 158);
+ --success-foreground: oklch(0.985 0.004 160);
+
+ --reserved: oklch(0.58 0.19 255);
+ --reserved-foreground: oklch(0.985 0.01 255);
+
+ --maintenance: oklch(0.64 0.22 25);
+ --maintenance-foreground: oklch(0.985 0.01 25);
+
+ --warning: oklch(0.78 0.16 75);
+ --warning-foreground: oklch(0.18 0.04 75);
+
+ --border: oklch(0.86 0.01 245 / 65%);
+ --input: oklch(0.86 0.01 245 / 75%);
+ --ring: oklch(0.63 0.19 158);
+
+ --chart-1: oklch(0.63 0.19 158);
+ --chart-2: oklch(0.58 0.19 255);
+ --chart-3: oklch(0.64 0.22 25);
+ --chart-4: oklch(0.78 0.16 75);
+ --chart-5: oklch(0.68 0.16 205);
+
+ --radius: 0.875rem;
+
+ --sidebar: oklch(0.98 0.004 240);
+ --sidebar-foreground: oklch(0.18 0.012 245);
+ --sidebar-primary: oklch(0.63 0.19 158);
+ --sidebar-primary-foreground: oklch(0.985 0.004 160);
+ --sidebar-accent: oklch(0.94 0.01 240);
+ --sidebar-accent-foreground: oklch(0.28 0.018 245);
+ --sidebar-border: oklch(0.86 0.01 245 / 65%);
+ --sidebar-ring: oklch(0.63 0.19 158);
}
.dark {
- --background: oklch(0.145 0 0);
- --foreground: oklch(0.985 0 0);
- --card: oklch(0.205 0 0);
- --card-foreground: oklch(0.985 0 0);
- --popover: oklch(0.205 0 0);
- --popover-foreground: oklch(0.985 0 0);
- --primary: oklch(0.922 0 0);
- --primary-foreground: oklch(0.205 0 0);
- --secondary: oklch(0.269 0 0);
- --secondary-foreground: oklch(0.985 0 0);
- --muted: oklch(0.269 0 0);
- --muted-foreground: oklch(0.708 0 0);
- --accent: oklch(0.269 0 0);
- --accent-foreground: oklch(0.985 0 0);
- --destructive: oklch(0.704 0.191 22.216);
- --border: oklch(1 0 0 / 10%);
- --input: oklch(1 0 0 / 15%);
- --ring: oklch(0.556 0 0);
- --chart-1: oklch(0.87 0 0);
- --chart-2: oklch(0.556 0 0);
- --chart-3: oklch(0.439 0 0);
- --chart-4: oklch(0.371 0 0);
- --chart-5: oklch(0.269 0 0);
- --sidebar: oklch(0.205 0 0);
- --sidebar-foreground: oklch(0.985 0 0);
- --sidebar-primary: oklch(0.488 0.243 264.376);
- --sidebar-primary-foreground: oklch(0.985 0 0);
- --sidebar-accent: oklch(0.269 0 0);
- --sidebar-accent-foreground: oklch(0.985 0 0);
- --sidebar-border: oklch(1 0 0 / 10%);
- --sidebar-ring: oklch(0.556 0 0);
+ --background: #081118;
+ --foreground: oklch(0.96 0.006 245);
+
+ --card: oklch(0.19 0.022 240);
+ --card-foreground: oklch(0.96 0.006 245);
+
+ --popover: oklch(0.18 0.022 240);
+ --popover-foreground: oklch(0.96 0.006 245);
+
+ --primary: oklch(0.67 0.21 158);
+ --primary-foreground: oklch(0.12 0.02 158);
+
+ --secondary: oklch(0.235 0.024 240);
+ --secondary-foreground: oklch(0.9 0.008 245);
+
+ --muted: oklch(0.24 0.022 240);
+ --muted-foreground: oklch(0.68 0.018 245);
+
+ --accent: oklch(0.28 0.06 158);
+ --accent-foreground: oklch(0.9 0.04 158);
+
+ --destructive: oklch(0.66 0.23 25);
+ --destructive-foreground: oklch(0.98 0.01 25);
+
+ --success: oklch(0.67 0.21 158);
+ --success-foreground: oklch(0.12 0.02 158);
+
+ --reserved: oklch(0.61 0.2 255);
+ --reserved-foreground: oklch(0.97 0.012 255);
+
+ --maintenance: oklch(0.66 0.23 25);
+ --maintenance-foreground: oklch(0.98 0.01 25);
+
+ --warning: oklch(0.78 0.17 75);
+ --warning-foreground: oklch(0.18 0.04 75);
+
+ --border: oklch(1 0 0 / 11%);
+ --input: oklch(1 0 0 / 14%);
+ --ring: oklch(0.67 0.21 158);
+
+ --chart-1: oklch(0.67 0.21 158);
+ --chart-2: oklch(0.61 0.2 255);
+ --chart-3: oklch(0.66 0.23 25);
+ --chart-4: oklch(0.78 0.17 75);
+ --chart-5: oklch(0.7 0.16 205);
+
+ --sidebar: oklch(0.165 0.02 240);
+ --sidebar-foreground: oklch(0.96 0.006 245);
+ --sidebar-primary: oklch(0.67 0.21 158);
+ --sidebar-primary-foreground: oklch(0.12 0.02 158);
+ --sidebar-accent: oklch(0.235 0.024 240);
+ --sidebar-accent-foreground: oklch(0.9 0.008 245);
+ --sidebar-border: oklch(1 0 0 / 11%);
+ --sidebar-ring: oklch(0.67 0.21 158);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
+
body {
- @apply bg-background text-foreground;
+ @apply bg-background text-foreground antialiased;
}
- html {
- @apply font-sans;
+
+ button:not(:disabled),
+ [role="button"]:not(:disabled) {
+ cursor: pointer;
+ }
+}
+
+@layer utilities {
+ .booking-scrollbar {
+ scrollbar-color: oklch(0.67 0.21 158 / 62%) oklch(1 0 0 / 8%);
+ scrollbar-width: thin;
+ }
+
+ .booking-scrollbar::-webkit-scrollbar {
+ height: 12px;
+ }
+
+ .booking-scrollbar::-webkit-scrollbar-track {
+ background: oklch(1 0 0 / 6%);
+ border-radius: 999px;
+ }
+
+ .booking-scrollbar::-webkit-scrollbar-thumb {
+ background: linear-gradient(90deg, oklch(0.67 0.21 158 / 72%), oklch(0.61 0.2 255 / 58%));
+ border: 3px solid transparent;
+ border-radius: 999px;
+ background-clip: padding-box;
+ }
+
+ .booking-scrollbar::-webkit-scrollbar-thumb:hover {
+ background: linear-gradient(90deg, oklch(0.67 0.21 158 / 88%), oklch(0.61 0.2 255 / 72%));
+ border: 3px solid transparent;
+ background-clip: padding-box;
}
}
diff --git a/apps/frontend/src/lib/theme.tsx b/apps/frontend/src/lib/theme.tsx
index 8b39396..30e3b61 100644
--- a/apps/frontend/src/lib/theme.tsx
+++ b/apps/frontend/src/lib/theme.tsx
@@ -1,6 +1,7 @@
import {
type PropsWithChildren,
createContext,
+ useCallback,
useContext,
useEffect,
useMemo,
@@ -14,6 +15,7 @@ type ThemeContextValue = {
theme: Theme;
resolvedTheme: ResolvedTheme;
setTheme: (theme: Theme) => void;
+ toggleTheme: () => void;
};
const THEME_STORAGE_KEY = 'theme';
@@ -27,6 +29,18 @@ function applyResolvedTheme(theme: ResolvedTheme) {
document.documentElement.classList.toggle('dark', theme === 'dark');
}
+function isEditableElement(target: EventTarget | null) {
+ if (!(target instanceof HTMLElement)) return false;
+
+ const tagName = target.tagName.toLowerCase();
+ return (
+ tagName === 'input' ||
+ tagName === 'textarea' ||
+ tagName === 'select' ||
+ target.isContentEditable
+ );
+}
+
export function ThemeProvider({ children }: PropsWithChildren) {
const [theme, setThemeState] = useState
-
-
- {currentComplexName}
- -
-
-
-
-
-
- Mi cuenta
-
- Cambiar complejo
-
- {myComplexesQuery.data.map((complex) => (
- {
- await apiClient.complexes.select({ complexId: complex.id });
- setCurrentComplex(complex.complexSlug);
- }}
- >
- {complex.complexSlug === complexSlug && ✓}
- {complex.complexName}
-
- ))}
- {
- void navigate({ to: '/profile' });
- }}
- >
-
- {
- void handleSignOut();
- }}
- >
-
-
-
- )}
-
-
-
-
-
-
- Navegación
- {
- void navigate({ to: '/' });
- }}
- >
- Home
-
- {
- void navigate({ to: '/about' });
- }}
- >
- About
-
- {isAuthenticated && currentComplexSlug && (
- {
- void navigate({
- to: '/complex/$slug/edit',
- params: { slug: currentComplexSlug },
- });
- }}
- >
- Configuración
-
- )}
-
- {
- void navigate({ to: '/profile' });
- }}
- >
-
- {
- void handleSignOut();
- }}
- >
-
-
- ) : (
- {
- void navigate({ to: '/login' });
- }}
- >
- Login
-
- )}
-
-
-
-
-
-
+
+