feat: enhance public booking page with improved layout and date formatting
- Added new date formatting function for better user experience. - Updated layout of the public booking page for improved responsiveness and aesthetics. - Integrated sport selection with visual icons for better clarity. - Enhanced error handling and loading states for availability queries. feat: revamp select complex page for better user interaction - Redesigned the select complex page layout for a more modern look. - Added contextual information about complex selection. - Improved button interactions with loading indicators and icons. style: update CSS variables for a cohesive sports-club theme - Adjusted color variables to reflect a sports-club identity. - Enhanced background styles for both light and dark modes. - Improved overall styling consistency across components.
This commit is contained in:
Jose Selesan
@@ -14,6 +14,8 @@ const SoccerBallIcon = forwardRef<any, LucideProps>(({ className, ...props }, re
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
className={className}
|
||||
{...props}
|
||||
>
|
||||
|
||||
@@ -5,13 +5,13 @@ import * as React from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const buttonVariants = cva(
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
|
||||
default: 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90',
|
||||
outline:
|
||||
'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
|
||||
'border-border bg-card shadow-sm hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/20 dark:hover:bg-input/30',
|
||||
secondary:
|
||||
'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
|
||||
ghost:
|
||||
@@ -22,16 +22,15 @@ const buttonVariants = cva(
|
||||
},
|
||||
size: {
|
||||
default:
|
||||
'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
|
||||
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
||||
lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
|
||||
icon: 'size-8',
|
||||
'h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5',
|
||||
xs: "h-6 gap-1 rounded-lg px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||
sm: "h-8 gap-1.5 rounded-lg px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5",
|
||||
lg: 'h-10 gap-1.5 rounded-xl px-3.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
|
||||
icon: 'size-9 rounded-xl',
|
||||
'icon-xs':
|
||||
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
||||
'icon-sm':
|
||||
'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
|
||||
'icon-lg': 'size-9',
|
||||
"size-6 rounded-lg in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
||||
'icon-sm': 'size-8 rounded-lg in-data-[slot=button-group]:rounded-lg',
|
||||
'icon-lg': 'size-10 rounded-xl',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
|
||||
@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
'h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
|
||||
'h-10 w-full min-w-0 rounded-xl border border-input bg-card px-3 py-2 text-base shadow-[0_1px_0_rgba(15,23,42,0.02)] transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/20 dark:disabled:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -36,6 +36,7 @@ function SelectTrigger({
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
"flex w-fit items-center justify-between gap-1.5 rounded-xl border border-input bg-card py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-9 data-[size=sm]:rounded-lg *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/20 dark:hover:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -61,7 +62,7 @@ function SelectContent({
|
||||
data-slot="select-content"
|
||||
data-align-trigger={position === 'item-aligned'}
|
||||
className={cn(
|
||||
'relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
|
||||
'relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl bg-popover text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
|
||||
position === 'popper' &&
|
||||
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
|
||||
className
|
||||
@@ -105,7 +106,7 @@ function SelectItem({
|
||||
<SelectPrimitive.Item
|
||||
data-slot="select-item"
|
||||
className={cn(
|
||||
"relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
||||
"relative flex w-full cursor-default items-center gap-1.5 rounded-lg py-2 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -43,19 +43,39 @@ export function ComplexSettingsPage({ complexSlug }: ComplexSettingsPageProps) {
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-6xl px-4 py-4 sm:px-6">
|
||||
<section className="rounded-xl border bg-card p-4 text-card-foreground shadow-sm sm:p-5">
|
||||
<h2 className="text-2xl font-semibold">
|
||||
<div className="mx-auto w-full max-w-7xl px-4 py-4 sm:px-6 lg:px-8 lg:py-6">
|
||||
<section className="overflow-hidden rounded-2xl border border-border/70 bg-card p-6 text-card-foreground shadow-sm sm:p-8">
|
||||
<div className="flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div className="space-y-3">
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
|
||||
<span className="size-2 rounded-full bg-primary" />
|
||||
Administración del complejo
|
||||
</div>
|
||||
<h2 className="text-3xl font-semibold tracking-tight">
|
||||
<Settings className="mb-1 mr-2 inline size-6" />
|
||||
Configuración del complejo
|
||||
</h2>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
{complexQuery.data?.complexName ?? 'Configura los datos de tu complejo'}
|
||||
<p className="max-w-2xl text-sm text-muted-foreground">
|
||||
{complexQuery.data?.complexName ??
|
||||
'Configurá los datos del complejo, las canchas y los usuarios.'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{currentMembership?.role && (
|
||||
<div className="inline-flex items-center gap-2 rounded-2xl border border-border/70 bg-background px-4 py-3 text-sm">
|
||||
<span className="text-xs uppercase tracking-[0.24em] text-muted-foreground">
|
||||
Tu rol
|
||||
</span>
|
||||
<span className="rounded-full border border-border/70 bg-card px-2.5 py-1 text-xs font-medium text-foreground">
|
||||
{currentMembership.role}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="mt-6 grid gap-6 lg:grid-cols-[200px_1fr]">
|
||||
<nav className="flex flex-row gap-1 overflow-x-auto lg:flex-col lg:overflow-visible">
|
||||
<div className="mt-6 grid gap-6 lg:grid-cols-[220px_1fr]">
|
||||
<nav className="flex flex-row gap-2 overflow-x-auto rounded-2xl border border-border/70 bg-card p-2 shadow-sm lg:flex-col lg:overflow-visible">
|
||||
{tabs.map((tab) => {
|
||||
const Icon = tab.icon;
|
||||
const isActive = activeTab === tab.id;
|
||||
@@ -64,9 +84,9 @@ export function ComplexSettingsPage({ complexSlug }: ComplexSettingsPageProps) {
|
||||
key={tab.id}
|
||||
type="button"
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors lg:w-full lg:justify-start ${
|
||||
className={`inline-flex items-center gap-2 rounded-2xl px-3 py-3 text-sm font-medium transition-all lg:w-full lg:justify-start ${
|
||||
isActive
|
||||
? 'bg-muted text-foreground'
|
||||
? 'bg-primary text-primary-foreground shadow-sm'
|
||||
: 'text-muted-foreground hover:bg-muted hover:text-foreground'
|
||||
}`}
|
||||
>
|
||||
@@ -77,7 +97,7 @@ export function ComplexSettingsPage({ complexSlug }: ComplexSettingsPageProps) {
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="min-w-0">
|
||||
<div className="min-w-0 rounded-2xl border border-border/70 bg-card p-4 shadow-sm sm:p-6">
|
||||
{activeTab === 'details' && (
|
||||
<ComplexDetailsSection
|
||||
complex={complexQuery.data ?? null}
|
||||
|
||||
@@ -19,6 +19,7 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { StatusBadge } from '@/components/ui/status-badge';
|
||||
import { ApiClientError, apiClient } from '@/lib/api-client';
|
||||
import { useCurrentComplexStore } from '@/lib/stores/current-complex-store';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
@@ -78,9 +79,7 @@ function formatDateLabel(dateIso: string, todayIso: string) {
|
||||
const tmrw = new Date(tYear, tMonth - 1, tDay);
|
||||
tmrw.setDate(tmrw.getDate() + 1);
|
||||
const isTomorrow =
|
||||
year === tmrw.getFullYear() &&
|
||||
month === tmrw.getMonth() + 1 &&
|
||||
day === tmrw.getDate();
|
||||
year === tmrw.getFullYear() && month === tmrw.getMonth() + 1 && day === tmrw.getDate();
|
||||
|
||||
if (isToday) return 'Hoy';
|
||||
if (isTomorrow) return 'Mañana';
|
||||
@@ -340,6 +339,24 @@ export function HomePage() {
|
||||
return [...groups.entries()];
|
||||
}, [bookingsQuery.data?.bookings]);
|
||||
|
||||
const dashboardStats = useMemo(() => {
|
||||
const bookings = bookingsQuery.data?.bookings ?? [];
|
||||
const todayBookings = bookings.filter((booking) => booking.date === todayIso);
|
||||
const confirmedBookings = bookings.filter(
|
||||
(booking) => getEffectiveStatus(booking) === 'CONFIRMED'
|
||||
);
|
||||
const completedBookings = bookings.filter(
|
||||
(booking) => getEffectiveStatus(booking) === 'COMPLETED'
|
||||
);
|
||||
|
||||
return {
|
||||
total: bookings.length,
|
||||
today: todayBookings.length,
|
||||
confirmed: confirmedBookings.length,
|
||||
completed: completedBookings.length,
|
||||
};
|
||||
}, [bookingsQuery.data?.bookings, todayIso]);
|
||||
|
||||
const updateStatusMutation = useMutation({
|
||||
mutationFn: (payload: { bookingId: string; status: 'CANCELLED' | 'COMPLETED' }) =>
|
||||
apiClient.adminBookings.updateStatus(payload.bookingId, { status: payload.status }),
|
||||
@@ -439,27 +456,58 @@ export function HomePage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-6 py-6">
|
||||
<section className="rounded-xl border bg-card p-5 shadow-sm">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold">Panel de reservas</h1>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
Gestiona turnos del día y futuros para {selectedComplex.complexName}.
|
||||
<main className="mx-auto w-full max-w-7xl px-4 py-4 sm:px-6 lg:px-8 lg:py-6">
|
||||
<div className="grid gap-6 xl:grid-cols-[1.15fr_0.85fr]">
|
||||
<section className="space-y-6">
|
||||
<section className="overflow-hidden rounded-2xl border border-border/70 bg-card p-6 shadow-sm sm:p-8">
|
||||
<div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
|
||||
<div className="space-y-4">
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
|
||||
<span className="size-2 rounded-full bg-primary" />
|
||||
Panel operativo
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.32em] text-muted-foreground">
|
||||
{selectedComplex.complexSlug}
|
||||
</p>
|
||||
<h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">
|
||||
Panel de reservas
|
||||
</h1>
|
||||
<p className="max-w-2xl text-sm text-muted-foreground sm:text-base">
|
||||
Gestioná turnos del día y futuros para {selectedComplex.complexName}.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<span className="rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
|
||||
{dashboardStats.today} hoy
|
||||
</span>
|
||||
<span className="rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
|
||||
{dashboardStats.confirmed} confirmadas
|
||||
</span>
|
||||
<span className="rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
|
||||
{dashboardStats.completed} cumplidas
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full max-w-md space-y-3">
|
||||
<div className="rounded-2xl border border-border/70 bg-background p-4">
|
||||
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">
|
||||
URL pública
|
||||
</p>
|
||||
<div className="mt-2 flex items-center gap-2">
|
||||
<a
|
||||
href={publicBookingUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-muted-foreground underline hover:text-foreground"
|
||||
className="min-w-0 truncate text-sm text-foreground underline-offset-4 hover:underline"
|
||||
>
|
||||
{publicBookingUrl}
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
onClick={copyToClipboard}
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
className="text-muted-foreground transition-colors hover:text-foreground"
|
||||
title="Copiar URL"
|
||||
>
|
||||
{urlCopied ? (
|
||||
@@ -470,6 +518,7 @@ export function HomePage() {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ResponsiveDialog
|
||||
open={isManualBookingOpen}
|
||||
onOpenChange={(open) => {
|
||||
@@ -484,7 +533,7 @@ export function HomePage() {
|
||||
}}
|
||||
>
|
||||
<ResponsiveDialogTrigger asChild>
|
||||
<Button>Nueva Reserva</Button>
|
||||
<Button className="w-full">Nueva reserva manual</Button>
|
||||
</ResponsiveDialogTrigger>
|
||||
<ResponsiveDialogContent
|
||||
className="data-[variant=dialog]:max-w-lg"
|
||||
@@ -575,7 +624,10 @@ export function HomePage() {
|
||||
{(selectedCourt?.availableSlots ?? []).map((slot) => {
|
||||
const isToday = manualDate === todayIso;
|
||||
const currentTime = new Date();
|
||||
const currentHours = currentTime.getHours().toString().padStart(2, '0');
|
||||
const currentHours = currentTime
|
||||
.getHours()
|
||||
.toString()
|
||||
.padStart(2, '0');
|
||||
const currentMinutes = currentTime
|
||||
.getMinutes()
|
||||
.toString()
|
||||
@@ -595,7 +647,9 @@ export function HomePage() {
|
||||
</div>
|
||||
|
||||
{manualAvailabilityQuery.isLoading && (
|
||||
<p className="text-sm text-muted-foreground">Cargando horarios disponibles...</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Cargando horarios disponibles...
|
||||
</p>
|
||||
)}
|
||||
|
||||
{manualAvailabilityQuery.isError && (
|
||||
@@ -660,9 +714,10 @@ export function HomePage() {
|
||||
</ResponsiveDialogContent>
|
||||
</ResponsiveDialog>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-xl border bg-card p-5 shadow-sm">
|
||||
<section className="rounded-2xl border border-border/70 bg-card p-5 shadow-sm sm:p-6">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-end">
|
||||
<Field>
|
||||
<FieldLabel htmlFor="fromDate">Mostrar desde</FieldLabel>
|
||||
@@ -702,50 +757,40 @@ export function HomePage() {
|
||||
|
||||
<div className="mt-4 space-y-4">
|
||||
{groupedBookings.map(([date, bookings]) => (
|
||||
<article key={date} className="rounded-lg border bg-background p-3">
|
||||
<h2 className="text-sm font-semibold">{formatDateLabel(date, todayIso)}</h2>
|
||||
<div className="mt-3 space-y-2">
|
||||
<article
|
||||
key={date}
|
||||
className="rounded-2xl border border-border/70 bg-background p-4"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<h2 className="text-sm font-semibold capitalize">
|
||||
{formatDateLabel(date, todayIso)}
|
||||
</h2>
|
||||
<span className="rounded-full border border-border/70 bg-card px-3 py-1 text-[11px] font-medium text-muted-foreground">
|
||||
{bookings.length} reservas
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-3 space-y-3">
|
||||
{bookings.map((booking) => {
|
||||
const effectiveStatus = getEffectiveStatus(booking);
|
||||
const canManage =
|
||||
booking.status === 'CONFIRMED' && effectiveStatus === 'CONFIRMED';
|
||||
const isMutating = updateStatusMutation.isPending;
|
||||
|
||||
const statusColorMap: Record<string, string> = {
|
||||
CONFIRMED: 'border-l-sky-500 dark:border-l-sky-400',
|
||||
COMPLETED: 'border-l-emerald-500 dark:border-l-emerald-400',
|
||||
CANCELLED: 'border-l-rose-500 dark:border-l-rose-400',
|
||||
NO_SHOW: 'border-l-orange-500 dark:border-l-orange-400',
|
||||
};
|
||||
|
||||
const statusBgMap: Record<string, string> = {
|
||||
CONFIRMED: 'bg-sky-50/30 dark:bg-sky-950/20',
|
||||
COMPLETED: 'bg-emerald-50/30 dark:bg-emerald-950/20',
|
||||
CANCELLED: 'bg-rose-50/30 dark:bg-rose-950/20',
|
||||
NO_SHOW: 'bg-orange-50/30 dark:bg-orange-950/20',
|
||||
};
|
||||
|
||||
const colorClass = statusColorMap[effectiveStatus] || '';
|
||||
const bgClass = statusBgMap[effectiveStatus] || '';
|
||||
|
||||
const badgeColorMap: Record<string, string> = {
|
||||
CONFIRMED: 'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-800 dark:bg-sky-950 dark:text-sky-300',
|
||||
COMPLETED: 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-300',
|
||||
CANCELLED: 'border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-800 dark:bg-rose-950 dark:text-rose-300',
|
||||
NO_SHOW: 'border-orange-200 bg-orange-50 text-orange-700 dark:border-orange-800 dark:bg-orange-950 dark:text-orange-300',
|
||||
};
|
||||
|
||||
const badgeClass = badgeColorMap[effectiveStatus] || '';
|
||||
|
||||
return (
|
||||
<div
|
||||
key={booking.id}
|
||||
className={`flex flex-col gap-2 rounded-md border border-l-[3px] p-3 sm:flex-row sm:items-center sm:justify-between ${colorClass} ${bgClass}`}
|
||||
className="flex flex-col gap-3 rounded-2xl border border-border/70 bg-card p-4 shadow-sm sm:flex-row sm:items-center sm:justify-between"
|
||||
>
|
||||
<div>
|
||||
<p className="text-sm font-medium">
|
||||
<div className="space-y-1">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
{booking.startTime} - {booking.endTime} · {booking.courtName}
|
||||
</p>
|
||||
<StatusBadge
|
||||
status={effectiveStatus}
|
||||
label={effectiveStatusLabel(effectiveStatus)}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{booking.customerName} ({booking.customerPhone}) · Código{' '}
|
||||
{booking.bookingCode}
|
||||
@@ -753,12 +798,6 @@ export function HomePage() {
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span
|
||||
className={`hidden sm:inline-flex rounded-full border px-2 py-1 text-xs font-medium ${badgeClass}`}
|
||||
>
|
||||
{effectiveStatusLabel(effectiveStatus)}
|
||||
</span>
|
||||
|
||||
{canManage && (
|
||||
<>
|
||||
<Button
|
||||
@@ -806,6 +845,38 @@ export function HomePage() {
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<aside className="space-y-6 xl:sticky xl:top-24 h-fit self-start">
|
||||
<section className="rounded-2xl border border-border/70 bg-card p-5 shadow-sm sm:p-6">
|
||||
<h2 className="text-sm font-semibold uppercase tracking-[0.24em] text-muted-foreground">
|
||||
Lectura rápida
|
||||
</h2>
|
||||
<div className="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
|
||||
<div className="rounded-2xl border border-border/70 bg-background p-4">
|
||||
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">Total</p>
|
||||
<p className="mt-2 text-2xl font-semibold">{dashboardStats.total}</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-border/70 bg-background p-4">
|
||||
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">Hoy</p>
|
||||
<p className="mt-2 text-2xl font-semibold">{dashboardStats.today}</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-border/70 bg-background p-4">
|
||||
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">
|
||||
Confirmadas
|
||||
</p>
|
||||
<p className="mt-2 text-2xl font-semibold">{dashboardStats.confirmed}</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-border/70 bg-background p-4">
|
||||
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">
|
||||
Cumplidas
|
||||
</p>
|
||||
<p className="mt-2 text-2xl font-semibold">{dashboardStats.completed}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { FootballIcon } from '@/assets/icons/football';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
DropdownMenu,
|
||||
@@ -66,38 +67,91 @@ export function RootLayout() {
|
||||
await navigate({ to: '/login' });
|
||||
};
|
||||
|
||||
type NavigationItem = {
|
||||
label: string;
|
||||
to: '/' | '/profile' | '/complex/$slug/edit';
|
||||
show: boolean;
|
||||
params?: { slug: string };
|
||||
};
|
||||
|
||||
const navigationItems: NavigationItem[] = [
|
||||
{
|
||||
label: 'Inicio',
|
||||
to: '/',
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
label: 'Configuración',
|
||||
to: '/complex/$slug/edit',
|
||||
params: currentComplexSlug ? { slug: currentComplexSlug } : undefined,
|
||||
show: isAuthenticated && Boolean(currentComplexSlug),
|
||||
},
|
||||
{
|
||||
label: 'Perfil',
|
||||
to: '/profile',
|
||||
show: isAuthenticated,
|
||||
},
|
||||
] as const;
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col">
|
||||
<header className="mx-auto flex w-full max-w-6xl items-center justify-between px-6 py-4">
|
||||
<div className="flex items-center gap-6">
|
||||
<h1 className="text-sm font-semibold">{currentComplexName}</h1>
|
||||
<nav className="hidden items-center gap-3 text-sm md:flex">
|
||||
<Link
|
||||
to="/"
|
||||
className="text-muted-foreground"
|
||||
activeProps={{ className: 'text-foreground font-medium' }}
|
||||
>
|
||||
Home
|
||||
<header className="sticky top-0 z-40 border-b border-border/70 bg-background/80 backdrop-blur-xl">
|
||||
<div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 py-3 sm:px-6">
|
||||
<div className="flex min-w-0 items-center gap-4">
|
||||
<Link to="/" className="flex min-w-0 items-center gap-3">
|
||||
<span className="relative flex size-10 items-center justify-center rounded-2xl bg-primary text-primary-foreground shadow-sm ring-1 ring-primary/20">
|
||||
<FootballIcon className="size-5" />
|
||||
<span className="absolute -right-0.5 -bottom-0.5 size-2 rounded-full border border-background bg-accent" />
|
||||
</span>
|
||||
<span className="min-w-0">
|
||||
<span className="block text-[10px] font-semibold uppercase tracking-[0.32em] text-muted-foreground">
|
||||
Playzer
|
||||
</span>
|
||||
<span className="block truncate text-sm font-semibold text-foreground">
|
||||
{currentComplexName}
|
||||
</span>
|
||||
</span>
|
||||
</Link>
|
||||
{isAuthenticated && currentComplexSlug && (
|
||||
|
||||
<nav className="hidden items-center gap-1 lg:flex">
|
||||
{navigationItems
|
||||
.filter((item) => item.show)
|
||||
.map((item) =>
|
||||
item.params ? (
|
||||
<Link
|
||||
to="/complex/$slug/edit"
|
||||
params={{ slug: currentComplexSlug }}
|
||||
className="text-muted-foreground"
|
||||
activeProps={{ className: 'text-foreground font-medium' }}
|
||||
key={item.label}
|
||||
to={item.to}
|
||||
params={item.params}
|
||||
className="rounded-full px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
||||
activeProps={{ className: 'bg-muted text-foreground font-medium' }}
|
||||
>
|
||||
Configuración
|
||||
{item.label}
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
key={item.label}
|
||||
to={item.to}
|
||||
className="rounded-full px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
||||
activeProps={{ className: 'bg-muted text-foreground font-medium' }}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
)
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="hidden items-center gap-2 rounded-full border border-border/70 bg-card px-3 py-1.5 text-xs text-muted-foreground shadow-sm md:flex">
|
||||
<span className="size-2 rounded-full bg-emerald-500" />
|
||||
{isAuthenticated ? 'Sesión activa' : 'Modo visitante'}
|
||||
</div>
|
||||
|
||||
<ThemeSwitcher />
|
||||
|
||||
{!isAuthenticated && (
|
||||
<Button asChild size="sm" variant="outline" className="hidden md:inline-flex">
|
||||
<Link to="/login">Login</Link>
|
||||
<Link to="/login">Ingresar</Link>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@@ -106,7 +160,7 @@ export function RootLayout() {
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="hidden items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-muted md:inline-flex"
|
||||
className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-card px-2 py-1.5 transition-colors hover:bg-muted"
|
||||
>
|
||||
<UserAvatar
|
||||
src={avatarUrl}
|
||||
@@ -114,10 +168,12 @@ export function RootLayout() {
|
||||
fallbackText={displayName}
|
||||
size="sm"
|
||||
/>
|
||||
<span className="max-w-32 truncate text-sm text-foreground">{displayName}</span>
|
||||
<span className="hidden max-w-32 truncate text-sm text-foreground sm:block">
|
||||
{displayName}
|
||||
</span>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-52">
|
||||
<DropdownMenuContent align="end" className="w-56">
|
||||
<DropdownMenuLabel>Mi cuenta</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
{myComplexesQuery.data && myComplexesQuery.data.length > 1 && (
|
||||
@@ -146,7 +202,7 @@ export function RootLayout() {
|
||||
}}
|
||||
>
|
||||
<UserRound className="size-4" />
|
||||
Profile
|
||||
Perfil
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
variant="destructive"
|
||||
@@ -155,7 +211,7 @@ export function RootLayout() {
|
||||
}}
|
||||
>
|
||||
<LogOut className="size-4" />
|
||||
Sign out
|
||||
Cerrar sesión
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
@@ -167,43 +223,59 @@ export function RootLayout() {
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon-sm"
|
||||
className="md:hidden"
|
||||
className="lg:hidden"
|
||||
aria-label="Abrir menú"
|
||||
>
|
||||
<Menu className="size-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-56 md:hidden">
|
||||
<DropdownMenuLabel>Navegación</DropdownMenuLabel>
|
||||
<DropdownMenuContent align="end" className="w-64 lg:hidden">
|
||||
<DropdownMenuLabel>{currentComplexName}</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
{navigationItems
|
||||
.filter((item) => item.show)
|
||||
.map((item) =>
|
||||
item.params ? (
|
||||
<DropdownMenuItem
|
||||
key={item.label}
|
||||
onSelect={() => {
|
||||
void navigate({ to: '/' });
|
||||
void navigate({ to: item.to, params: item.params });
|
||||
}}
|
||||
>
|
||||
Home
|
||||
{item.label}
|
||||
</DropdownMenuItem>
|
||||
) : (
|
||||
<DropdownMenuItem
|
||||
key={item.label}
|
||||
onSelect={() => {
|
||||
void navigate({ to: '/about' });
|
||||
void navigate({ to: item.to });
|
||||
}}
|
||||
>
|
||||
About
|
||||
</DropdownMenuItem>
|
||||
{isAuthenticated && currentComplexSlug && (
|
||||
<DropdownMenuItem
|
||||
onSelect={() => {
|
||||
void navigate({
|
||||
to: '/complex/$slug/edit',
|
||||
params: { slug: currentComplexSlug },
|
||||
});
|
||||
}}
|
||||
>
|
||||
Configuración
|
||||
{item.label}
|
||||
</DropdownMenuItem>
|
||||
)
|
||||
)}
|
||||
|
||||
<DropdownMenuSeparator />
|
||||
{myComplexesQuery.data && myComplexesQuery.data.length > 1 && (
|
||||
<>
|
||||
<DropdownMenuLabel className="text-xs font-normal text-muted-foreground">
|
||||
Cambiar complejo
|
||||
</DropdownMenuLabel>
|
||||
{myComplexesQuery.data.map((complex) => (
|
||||
<DropdownMenuItem
|
||||
key={complex.id}
|
||||
onSelect={async () => {
|
||||
await apiClient.complexes.select({ complexId: complex.id });
|
||||
setCurrentComplex(complex.complexSlug);
|
||||
}}
|
||||
>
|
||||
{complex.complexSlug === complexSlug && <span className="mr-2">✓</span>}
|
||||
{complex.complexName}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
<DropdownMenuSeparator />
|
||||
</>
|
||||
)}
|
||||
{isAuthenticated ? (
|
||||
<>
|
||||
<DropdownMenuItem
|
||||
@@ -212,7 +284,7 @@ export function RootLayout() {
|
||||
}}
|
||||
>
|
||||
<UserRound className="size-4" />
|
||||
Profile
|
||||
Perfil
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
variant="destructive"
|
||||
@@ -221,7 +293,7 @@ export function RootLayout() {
|
||||
}}
|
||||
>
|
||||
<LogOut className="size-4" />
|
||||
Sign out
|
||||
Cerrar sesión
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
) : (
|
||||
@@ -230,13 +302,15 @@ export function RootLayout() {
|
||||
void navigate({ to: '/login' });
|
||||
}}
|
||||
>
|
||||
Login
|
||||
Ingresar
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="flex-1">
|
||||
<Outlet />
|
||||
</div>
|
||||
|
||||
@@ -30,15 +30,15 @@ export function ThemeSwitcher() {
|
||||
>
|
||||
<DropdownMenuRadioItem value="light">
|
||||
<Sun className="size-4" />
|
||||
Light
|
||||
Claro
|
||||
</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="dark">
|
||||
<Moon className="size-4" />
|
||||
Dark
|
||||
Oscuro
|
||||
</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="system">
|
||||
<Laptop className="size-4" />
|
||||
System
|
||||
Sistema
|
||||
</DropdownMenuRadioItem>
|
||||
</DropdownMenuRadioGroup>
|
||||
</DropdownMenuContent>
|
||||
|
||||
@@ -78,14 +78,69 @@ export function LoginPage({ redirectTo = '/' }: LoginPageProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="flex min-h-screen w-full items-center justify-center px-6">
|
||||
<section className="w-full max-w-sm rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
|
||||
<h1 className="mb-2 text-2xl font-semibold">Iniciar sesión</h1>
|
||||
<p className="mb-4 text-sm text-muted-foreground">
|
||||
Ingresá con tu cuenta para acceder a Home.
|
||||
</p>
|
||||
<main className="min-h-screen px-4 py-4 sm:px-6 lg:px-8 lg:py-6">
|
||||
<div className="mx-auto grid min-h-[calc(100vh-2rem)] w-full max-w-6xl items-center gap-6 lg:grid-cols-[1.1fr_0.9fr]">
|
||||
<section className="relative hidden overflow-hidden rounded-2xl border border-border/70 bg-card p-8 text-card-foreground shadow-sm lg:flex lg:min-h-[640px] lg:flex-col lg:justify-between">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(43,139,82,0.12),transparent_38%),radial-gradient(circle_at_bottom_right,rgba(35,80,128,0.1),transparent_35%)]" />
|
||||
<div className="relative space-y-8">
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background/70 px-3 py-1 text-xs font-medium text-muted-foreground backdrop-blur">
|
||||
<span className="size-2 rounded-full bg-emerald-500" />
|
||||
Gestión de reservas y complejos
|
||||
</div>
|
||||
|
||||
<Button type="button" variant="outline" className="w-full" onClick={handleGoogleSignIn}>
|
||||
<div className="max-w-xl space-y-5">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.34em] text-muted-foreground">
|
||||
Playzer
|
||||
</p>
|
||||
<h1 className="text-4xl font-semibold tracking-tight text-foreground xl:text-5xl">
|
||||
Un panel para operar el club con velocidad, claridad y presencia.
|
||||
</h1>
|
||||
<p className="max-w-lg text-base leading-7 text-muted-foreground">
|
||||
Accedé a reservas, configuración y usuarios desde una interfaz más limpia, pensada
|
||||
para trabajar rápido en escritorio y también en móvil.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative grid gap-3 sm:grid-cols-3">
|
||||
{[
|
||||
'Disponibilidad y reservas en un vistazo',
|
||||
'Cambios de complejo sin perder contexto',
|
||||
'Estados y acciones con feedback claro',
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item}
|
||||
className="rounded-2xl border border-border/70 bg-background/70 p-4 text-sm text-muted-foreground backdrop-blur"
|
||||
>
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="w-full rounded-2xl border border-border/70 bg-card p-6 text-card-foreground shadow-sm sm:p-8">
|
||||
<div className="mb-8 flex items-start justify-between gap-4">
|
||||
<div className="space-y-2">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.34em] text-muted-foreground">
|
||||
Acceso
|
||||
</p>
|
||||
<h1 className="text-3xl font-semibold tracking-tight">Ingresá a tu cuenta</h1>
|
||||
<p className="max-w-sm text-sm text-muted-foreground">
|
||||
Entrá con Google o con tu email y contraseña para continuar con tu complejo.
|
||||
</p>
|
||||
</div>
|
||||
<div className="hidden rounded-2xl border border-border/70 bg-background p-3 text-right sm:block">
|
||||
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">Estado</p>
|
||||
<p className="mt-1 text-sm font-medium">Acceso seguro</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="w-full justify-center"
|
||||
onClick={handleGoogleSignIn}
|
||||
>
|
||||
<svg className="mr-2 h-4 w-4" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
fill="currentColor"
|
||||
@@ -107,16 +162,16 @@ export function LoginPage({ redirectTo = '/' }: LoginPageProps) {
|
||||
Continuar con Google
|
||||
</Button>
|
||||
|
||||
<div className="relative my-4">
|
||||
<div className="relative my-5">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<span className="w-full border-t" />
|
||||
<span className="w-full border-t border-border/80" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs uppercase">
|
||||
<span className="bg-card px-2 text-muted-foreground">O</span>
|
||||
<span className="bg-card px-2 text-muted-foreground">O continuá con email</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form className="space-y-3" onSubmit={handleSubmit(onSubmit)}>
|
||||
<form className="space-y-4" onSubmit={handleSubmit(onSubmit)}>
|
||||
<Field data-invalid={Boolean(errors.email)}>
|
||||
<FieldLabel htmlFor="email">Email</FieldLabel>
|
||||
<Input
|
||||
@@ -148,12 +203,14 @@ export function LoginPage({ redirectTo = '/' }: LoginPageProps) {
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<p className="mt-4 text-center text-sm text-muted-foreground">
|
||||
<Link to="/reset-password" className="text-primary hover:underline">
|
||||
¿Olvidaste tu contraseña?
|
||||
<div className="mt-5 flex items-center justify-between gap-3 text-sm">
|
||||
<p className="text-muted-foreground">¿Olvidaste tu contraseña?</p>
|
||||
<Link to="/reset-password" className="font-medium text-primary hover:underline">
|
||||
Recuperarla
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
export function OnboardingCheckEmailStep() {
|
||||
return (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Revisa tu correo y abre el link de verificacion para continuar.
|
||||
Revisa tu correo y abrí el link de verificación para continuar.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,12 +7,55 @@ type OnboardingLayoutProps = PropsWithChildren<{
|
||||
|
||||
export function OnboardingLayout({ title, description, children }: OnboardingLayoutProps) {
|
||||
return (
|
||||
<main className="mx-auto flex min-h-screen w-full max-w-6xl items-center justify-center px-6">
|
||||
<section className="w-full max-w-3xl rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
|
||||
<h1 className="mb-2 text-2xl font-semibold">{title}</h1>
|
||||
<p className="mb-4 text-sm text-muted-foreground">{description}</p>
|
||||
<main className="min-h-screen px-4 py-4 sm:px-6 lg:px-8 lg:py-6">
|
||||
<div className="mx-auto grid min-h-[calc(100vh-2rem)] w-full max-w-6xl gap-6 lg:grid-cols-[0.95fr_1.05fr]">
|
||||
<aside className="hidden overflow-hidden rounded-2xl border border-border/70 bg-card p-8 shadow-sm lg:flex lg:flex-col lg:justify-between">
|
||||
<div className="space-y-6">
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background/70 px-3 py-1 text-xs font-medium text-muted-foreground">
|
||||
<span className="size-2 rounded-full bg-primary" />
|
||||
Alta guiada
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.32em] text-muted-foreground">
|
||||
Onboarding
|
||||
</p>
|
||||
<h1 className="max-w-md text-4xl font-semibold tracking-tight">
|
||||
Un alta que guía, no que interrumpe.
|
||||
</h1>
|
||||
<p className="max-w-md text-base leading-7 text-muted-foreground">
|
||||
Verificá email, completá los datos y dejá el complejo listo para operar sin pasos
|
||||
confusos ni pantallas iguales entre sí.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3">
|
||||
<div className="rounded-2xl border border-border/70 bg-background p-4">
|
||||
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">Paso 1</p>
|
||||
<p className="mt-2 text-sm text-foreground">Ingresar nombre y correo</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-border/70 bg-background p-4">
|
||||
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">Paso 2</p>
|
||||
<p className="mt-2 text-sm text-foreground">Verificar email o código OTP</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-border/70 bg-background p-4">
|
||||
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">Paso 3</p>
|
||||
<p className="mt-2 text-sm text-foreground">Crear el complejo y empezar</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<section className="w-full rounded-2xl border border-border/70 bg-card p-6 text-card-foreground shadow-sm sm:p-8">
|
||||
<div className="mb-6 space-y-2">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.32em] text-muted-foreground">
|
||||
Inicio
|
||||
</p>
|
||||
<h1 className="text-3xl font-semibold tracking-tight">{title}</h1>
|
||||
<p className="max-w-lg text-sm text-muted-foreground">{description}</p>
|
||||
</div>
|
||||
{children}
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -18,7 +18,7 @@ export function OnboardingStartStep({
|
||||
onSubmit,
|
||||
}: OnboardingStartStepProps) {
|
||||
return (
|
||||
<form className="space-y-3" onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<Field data-invalid={Boolean(form.formState.errors.fullName)}>
|
||||
<FieldLabel htmlFor="onboard-fullname">Nombre</FieldLabel>
|
||||
<Input
|
||||
@@ -51,7 +51,7 @@ export function OnboardingStartStep({
|
||||
className="w-full"
|
||||
disabled={form.formState.isSubmitting || !form.formState.isValid}
|
||||
>
|
||||
{form.formState.isSubmitting ? 'Enviando...' : 'Enviar codigo OTP'}
|
||||
{form.formState.isSubmitting ? 'Enviando...' : 'Enviar código OTP'}
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
|
||||
@@ -38,13 +38,13 @@ export function OnboardingVerifyOtpStep({
|
||||
return (
|
||||
<form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Ingresa el codigo de 6 digitos que enviamos a{' '}
|
||||
Ingresa el código de 6 dígitos que enviamos a{' '}
|
||||
<span className="font-medium text-foreground">{email ?? 'tu email'}</span>.
|
||||
</p>
|
||||
|
||||
<Field data-invalid={Boolean(form.formState.errors.otp)}>
|
||||
<div className="mb-2 flex items-center justify-between gap-3">
|
||||
<FieldLabel htmlFor="onboard-otp">Codigo de verificacion</FieldLabel>
|
||||
<FieldLabel htmlFor="onboard-otp">Código de verificación</FieldLabel>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
@@ -59,7 +59,7 @@ export function OnboardingVerifyOtpStep({
|
||||
? 'Reenviando...'
|
||||
: resendCooldownSeconds > 0
|
||||
? `Reenviar en ${resendCooldownSeconds}s`
|
||||
: 'Reenviar codigo'}
|
||||
: 'Reenviar código'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -101,7 +101,7 @@ export function OnboardingVerifyOtpStep({
|
||||
className="w-full"
|
||||
disabled={form.formState.isSubmitting || !form.formState.isValid}
|
||||
>
|
||||
{form.formState.isSubmitting ? 'Verificando...' : 'Verificar codigo'}
|
||||
{form.formState.isSubmitting ? 'Verificando...' : 'Verificar código'}
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
|
||||
@@ -15,6 +15,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import type { UserProfileResponse } from '@repo/api-contract';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { Link } from '@tanstack/react-router';
|
||||
import { Mail, ShieldCheck } from 'lucide-react';
|
||||
import { useEffect } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
@@ -100,13 +101,16 @@ export function ProfilePage() {
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return (
|
||||
<main className="mx-auto flex min-h-[60vh] w-full max-w-6xl items-center justify-center px-6">
|
||||
<section className="w-full max-w-3xl rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
|
||||
<h1 className="text-2xl font-semibold">Perfil</h1>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
Necesitás iniciar sesión para ver tu perfil.
|
||||
<main className="mx-auto flex min-h-[60vh] w-full max-w-6xl items-center justify-center px-4 py-6">
|
||||
<section className="w-full max-w-3xl rounded-2xl border border-border/70 bg-card p-6 text-card-foreground shadow-sm">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.32em] text-muted-foreground">
|
||||
Perfil
|
||||
</p>
|
||||
<Button asChild className="mt-4">
|
||||
<h1 className="mt-2 text-3xl font-semibold tracking-tight">Necesitás iniciar sesión</h1>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
Ingresá para editar tu nombre, revisar tu correo y cambiar la contraseña.
|
||||
</p>
|
||||
<Button asChild className="mt-5">
|
||||
<Link to="/login">Ir a Login</Link>
|
||||
</Button>
|
||||
</section>
|
||||
@@ -115,42 +119,74 @@ export function ProfilePage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="mx-auto flex min-h-[60vh] w-full max-w-6xl items-center justify-center px-6 py-8">
|
||||
<div className="w-full max-w-3xl space-y-6">
|
||||
<section className="rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
|
||||
<div className="flex items-center gap-3">
|
||||
<main className="mx-auto w-full max-w-6xl px-4 py-6 sm:px-6 lg:px-8">
|
||||
<div className="grid gap-6 lg:grid-cols-[0.9fr_1.1fr]">
|
||||
<section className="relative overflow-hidden rounded-2xl border border-border/70 bg-card p-6 text-card-foreground shadow-sm">
|
||||
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(43,139,82,0.12),transparent_36%)]" />
|
||||
<div className="relative space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<UserAvatar
|
||||
src={profileQuery.data?.avatarUrl ?? avatarUrl}
|
||||
alt={displayName}
|
||||
fallbackText={displayName}
|
||||
size="lg"
|
||||
/>
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold">{displayName}</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{profileQuery.data?.email ?? user?.email}
|
||||
<div className="min-w-0">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.32em] text-muted-foreground">
|
||||
Perfil
|
||||
</p>
|
||||
<h1 className="mt-2 text-3xl font-semibold tracking-tight">{displayName}</h1>
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
|
||||
<Mail className="size-3.5" />
|
||||
{profileQuery.data?.email ?? user?.email}
|
||||
</span>
|
||||
{profileQuery.data?.role && (
|
||||
<p className="text-sm text-muted-foreground">Rol: {profileQuery.data.role}</p>
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
|
||||
<ShieldCheck className="size-3.5" />
|
||||
Rol {profileQuery.data.role}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{profileQuery.isLoading && (
|
||||
<p className="mt-4 text-sm text-muted-foreground">Cargando perfil...</p>
|
||||
<p className="text-sm text-muted-foreground">Cargando perfil...</p>
|
||||
)}
|
||||
|
||||
{profileQuery.isError && (
|
||||
<p className="mt-4 text-sm text-destructive">
|
||||
<p className="text-sm text-destructive">
|
||||
No se pudo cargar el perfil desde el backend.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div className="rounded-2xl border border-border/70 bg-background p-4">
|
||||
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">Cuenta</p>
|
||||
<p className="mt-2 text-sm text-foreground">Actualizá datos personales y acceso.</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-border/70 bg-background p-4">
|
||||
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">
|
||||
Seguridad
|
||||
</p>
|
||||
<p className="mt-2 text-sm text-foreground">Cambiá tu contraseña cuando quieras.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
|
||||
<h2 className="text-xl font-semibold mb-4">Editar Perfil</h2>
|
||||
<div className="space-y-6">
|
||||
<section className="rounded-2xl border border-border/70 bg-card p-6 text-card-foreground shadow-sm">
|
||||
<h2 className="text-xl font-semibold">Editar perfil</h2>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
Mantené tu nombre visible y consistente para el resto del equipo.
|
||||
</p>
|
||||
<Form {...updateProfileForm}>
|
||||
<form onSubmit={updateProfileForm.handleSubmit(onUpdateProfile)} className="space-y-4">
|
||||
<form
|
||||
onSubmit={updateProfileForm.handleSubmit(onUpdateProfile)}
|
||||
className="mt-5 space-y-4"
|
||||
>
|
||||
<FormField
|
||||
control={updateProfileForm.control}
|
||||
name="fullName"
|
||||
@@ -175,16 +211,19 @@ export function ProfilePage() {
|
||||
</p>
|
||||
)}
|
||||
{updateProfileMutation.isSuccess && (
|
||||
<p className="mt-4 text-sm text-green-600">Perfil actualizado exitosamente.</p>
|
||||
<p className="mt-4 text-sm text-emerald-700">Perfil actualizado exitosamente.</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
|
||||
<h2 className="text-xl font-semibold mb-4">Cambiar Contraseña</h2>
|
||||
<section className="rounded-2xl border border-border/70 bg-card p-6 text-card-foreground shadow-sm">
|
||||
<h2 className="text-xl font-semibold">Cambiar contraseña</h2>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
Usá una contraseña fuerte para proteger el acceso al panel.
|
||||
</p>
|
||||
<Form {...updatePasswordForm}>
|
||||
<form
|
||||
onSubmit={updatePasswordForm.handleSubmit(onUpdatePassword)}
|
||||
className="space-y-4"
|
||||
className="mt-5 space-y-4"
|
||||
>
|
||||
<FormField
|
||||
control={updatePasswordForm.control}
|
||||
@@ -236,10 +275,11 @@ export function ProfilePage() {
|
||||
</p>
|
||||
)}
|
||||
{updatePasswordMutation.isSuccess && (
|
||||
<p className="mt-4 text-sm text-green-600">Contraseña cambiada exitosamente.</p>
|
||||
<p className="mt-4 text-sm text-emerald-700">Contraseña cambiada exitosamente.</p>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,13 +3,22 @@ import { Field, FieldError, FieldLabel } from '@/components/ui/field';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { ApiClientError, apiClient } from '@/lib/api-client';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import {
|
||||
BarbellIcon,
|
||||
BasketballIcon,
|
||||
PersonSimpleRunIcon,
|
||||
PingPongIcon,
|
||||
RacquetIcon,
|
||||
SoccerBallIcon,
|
||||
TennisBallIcon,
|
||||
VolleyballIcon,
|
||||
} from '@phosphor-icons/react';
|
||||
import { useMutation, useQuery } from '@tanstack/react-query';
|
||||
import { useNavigate } from '@tanstack/react-router';
|
||||
import { Dumbbell } from 'lucide-react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
import {SoccerBallIcon, RacquetIcon, TennisBallIcon,BasketballIcon, VolleyballIcon, BarbellIcon, PersonSimpleRunIcon, PingPongIcon} from '@phosphor-icons/react'
|
||||
|
||||
const sportConfig: Record<
|
||||
string,
|
||||
@@ -154,6 +163,18 @@ function extractMessage(error: unknown, fallback: string) {
|
||||
return fallback;
|
||||
}
|
||||
|
||||
function formatSelectedDateLabel(dateIso: string) {
|
||||
const [year, month, day] = dateIso.split('-').map(Number);
|
||||
if (!year || !month || !day) return dateIso;
|
||||
|
||||
const date = new Date(year, month - 1, day);
|
||||
return new Intl.DateTimeFormat('es-AR', {
|
||||
weekday: 'long',
|
||||
day: '2-digit',
|
||||
month: 'long',
|
||||
}).format(date);
|
||||
}
|
||||
|
||||
export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) {
|
||||
const navigate = useNavigate();
|
||||
const today = useMemo(() => new Date(), []);
|
||||
@@ -289,6 +310,13 @@ export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) {
|
||||
.filter((court) => court.availableSlots.length > 0);
|
||||
}, [availabilityQuery.data?.courts, selectedDate, todayIsoDate]);
|
||||
|
||||
const selectedSport = useMemo(() => {
|
||||
return availabilityQuery.data?.sports.find((sport) => sport.id === selectedSportId) ?? null;
|
||||
}, [availabilityQuery.data?.sports, selectedSportId]);
|
||||
|
||||
const selectedSportLabel = selectedSport ? getSportConfig(selectedSport.slug).label : null;
|
||||
const selectedDateLabel = useMemo(() => formatSelectedDateLabel(selectedDate), [selectedDate]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedSlot) return;
|
||||
|
||||
@@ -403,45 +431,94 @@ export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-linear-to-b from-background to-muted/40">
|
||||
<div className="mx-auto flex w-full max-w-5xl flex-col gap-4 px-4 py-4 sm:gap-6 sm:px-6 sm:py-8">
|
||||
<section className="rounded-2xl border bg-card p-4 shadow-sm sm:p-6">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-2xl font-bold text-primary sm:text-3xl">
|
||||
{availabilityQuery.data?.complexName}
|
||||
<main className="min-h-screen px-4 py-4 sm:px-6 lg:px-8 lg:py-6">
|
||||
<div className="mx-auto w-full max-w-7xl space-y-6">
|
||||
<section className="overflow-hidden rounded-2xl border border-border/70 bg-card shadow-sm">
|
||||
<div className="grid gap-6 p-6 lg:grid-cols-[1.1fr_0.9fr] lg:p-8">
|
||||
<div className="space-y-6">
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
|
||||
<span className="flex size-5 items-center justify-center rounded-full bg-primary text-[10px] font-semibold text-primary-foreground">
|
||||
PZ
|
||||
</span>
|
||||
Reserva oficial
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.32em] text-muted-foreground">
|
||||
{availabilityQuery.data?.complexSlug ?? complexSlug}
|
||||
</p>
|
||||
<h1 className="text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
|
||||
{availabilityQuery.data?.complexName ?? 'Cargando complejo...'}
|
||||
</h1>
|
||||
{availabilityQuery.data?.complexAddress && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<p className="max-w-2xl text-sm text-muted-foreground">
|
||||
{availabilityQuery.data.complexAddress}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-4 text-sm text-muted-foreground">
|
||||
Elige un dia, revisa horarios disponibles y confirma con tu nombre y telefono.
|
||||
<p className="max-w-2xl text-sm leading-6 text-muted-foreground sm:text-base">
|
||||
Elegí un día, encontrá el mejor horario disponible y confirmá en pocos pasos. La
|
||||
pantalla prioriza disponibilidad, contexto y una lectura rápida desde el móvil.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div className="rounded-2xl border border-border/70 bg-background p-4">
|
||||
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">
|
||||
Fecha elegida
|
||||
</p>
|
||||
<p className="mt-2 text-sm font-medium capitalize text-foreground">
|
||||
{selectedDateLabel}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-border/70 bg-background p-4">
|
||||
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">Deporte</p>
|
||||
<p className="mt-2 text-sm font-medium text-foreground">
|
||||
{selectedSportLabel ?? 'Sin selección'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-border/70 bg-background p-4">
|
||||
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">
|
||||
Canchas visibles
|
||||
</p>
|
||||
<p className="mt-2 text-sm font-medium text-foreground">
|
||||
{visibleCourts.length} disponibles
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-border/70 bg-background p-4">
|
||||
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">Estado</p>
|
||||
<p className="mt-2 text-sm font-medium text-foreground">
|
||||
{selectedSlot ? 'Turno listo para confirmar' : 'Elegí un horario'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-2xl border bg-card p-4 shadow-sm sm:p-6">
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h2 className="text-sm font-medium">Dia</h2>
|
||||
<p className="text-xs text-muted-foreground">Mostramos 5 dias por vez.</p>
|
||||
<div className="grid gap-6 xl:grid-cols-[1.15fr_0.85fr]">
|
||||
<section className="space-y-6">
|
||||
<section className="rounded-2xl border border-border/70 bg-card p-5 shadow-sm sm:p-6">
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-sm font-semibold uppercase tracking-[0.24em] text-muted-foreground">
|
||||
Día
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground">Mostramos 5 días por vez.</p>
|
||||
</div>
|
||||
|
||||
{autoAdjustedDateNotice && (
|
||||
<p className="rounded-lg border border-amber-300 bg-amber-50 px-3 py-2 text-xs text-amber-900">
|
||||
<p className="mt-4 rounded-2xl border border-amber-300 bg-amber-50 px-4 py-3 text-sm text-amber-900 dark:border-amber-700 dark:bg-amber-950/30 dark:text-amber-200">
|
||||
{autoAdjustedDateNotice}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-[2.25rem_repeat(5,minmax(0,1fr))_2.25rem] gap-2">
|
||||
<div className="mt-4 grid grid-cols-[2.5rem_repeat(5,minmax(0,1fr))_2.5rem] gap-2">
|
||||
{canGoBack ? (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-full"
|
||||
className="h-full rounded-2xl"
|
||||
onClick={goToPreviousFiveDays}
|
||||
aria-label="Mostrar 5 dias anteriores"
|
||||
aria-label="Mostrar 5 días anteriores"
|
||||
>
|
||||
{'<'}
|
||||
</Button>
|
||||
@@ -458,14 +535,16 @@ export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) {
|
||||
setSelectedSlot(null);
|
||||
setAutoAdjustedDateNotice(null);
|
||||
}}
|
||||
className={`rounded-xl border px-1 py-2 text-center transition-colors sm:px-2 ${
|
||||
className={`rounded-2xl border px-2 py-3 text-center transition-all ${
|
||||
selectedDate === option.value
|
||||
? 'border-primary bg-primary text-primary-foreground'
|
||||
: 'border-border bg-background hover:bg-muted'
|
||||
? 'border-primary bg-primary text-primary-foreground shadow-sm'
|
||||
: 'border-border/70 bg-background hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-sm'
|
||||
}`}
|
||||
>
|
||||
<p className="text-[11px] font-medium uppercase sm:text-xs">{option.weekday}</p>
|
||||
<p className="text-xs sm:text-sm">{option.dayMonth}</p>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.16em]">
|
||||
{option.weekday}
|
||||
</p>
|
||||
<p className="text-sm font-medium">{option.dayMonth}</p>
|
||||
</button>
|
||||
))}
|
||||
|
||||
@@ -473,28 +552,27 @@ export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) {
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-full"
|
||||
className="h-full rounded-2xl"
|
||||
onClick={goToNextFiveDays}
|
||||
aria-label="Mostrar proximos 5 dias"
|
||||
aria-label="Mostrar próximos 5 días"
|
||||
>
|
||||
{'>'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-2xl border bg-card p-4 shadow-sm sm:p-6">
|
||||
<div className="mb-4 flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<h2 className="text-sm font-medium">Disponibilidad</h2>
|
||||
<p className="text-xs text-muted-foreground">Selecciona cancha y horario.</p>
|
||||
</div>
|
||||
<section className="rounded-2xl border border-border/70 bg-card p-5 shadow-sm sm:p-6">
|
||||
<div className="mb-4 space-y-2">
|
||||
<h2 className="text-sm font-semibold uppercase tracking-[0.24em] text-muted-foreground">
|
||||
Disponibilidad
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground">Seleccioná cancha y horario.</p>
|
||||
</div>
|
||||
|
||||
{availabilityQuery.data?.sportSelectionRequired && (
|
||||
<div className="mb-4">
|
||||
<h2 className="text-sm font-medium mb-3">Elegí tu deporte</h2>
|
||||
<div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
|
||||
<div className="mb-5">
|
||||
<h3 className="mb-3 text-sm font-medium text-foreground">Elegí tu deporte</h3>
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
|
||||
{availabilityQuery.data?.sports.map((sport) => {
|
||||
const config = getSportConfig(sport.slug);
|
||||
const Icon = config.icon;
|
||||
@@ -509,14 +587,22 @@ export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) {
|
||||
setSelectedSlot(null);
|
||||
setAutoAdjustedDateNotice(null);
|
||||
}}
|
||||
className={`relative flex flex-col items-center gap-2 rounded-xl border-2 p-4 transition-all hover:scale-[1.02] ${
|
||||
className={`flex flex-col items-center gap-2 rounded-2xl border p-4 text-center transition-all ${
|
||||
isSelected
|
||||
? `${config.border} ${config.bg} ring-2 ring-offset-2 ring-primary/20`
|
||||
: 'border-border bg-card hover:border-muted-foreground/30'
|
||||
? `${config.border} ${config.bg} shadow-sm ring-2 ring-primary/20`
|
||||
: 'border-border/70 bg-background hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-sm'
|
||||
}`}
|
||||
>
|
||||
<Icon
|
||||
className={`size-8 ${
|
||||
isSelected ? config.color : 'text-muted-foreground'
|
||||
}`}
|
||||
/>
|
||||
<span
|
||||
className={`text-sm font-medium ${
|
||||
isSelected ? 'text-foreground' : 'text-muted-foreground'
|
||||
}`}
|
||||
>
|
||||
<Icon className={`size-8 ${isSelected ? config.color : 'text-muted-foreground'}`} />
|
||||
<span className={`text-sm font-medium ${isSelected ? 'text-foreground' : 'text-muted-foreground'}`}>
|
||||
{config.label}
|
||||
</span>
|
||||
</button>
|
||||
@@ -527,11 +613,13 @@ export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) {
|
||||
)}
|
||||
|
||||
{availabilityQuery.isLoading && (
|
||||
<p className="text-sm text-muted-foreground">Buscando disponibilidad...</p>
|
||||
<p className="rounded-2xl border border-border/70 bg-background px-4 py-3 text-sm text-muted-foreground">
|
||||
Buscando disponibilidad...
|
||||
</p>
|
||||
)}
|
||||
|
||||
{availabilityQuery.isError && (
|
||||
<p className="text-sm text-destructive">
|
||||
<p className="rounded-2xl border border-destructive/20 bg-destructive/5 px-4 py-3 text-sm text-destructive">
|
||||
{extractMessage(availabilityQuery.error, 'No pudimos cargar la disponibilidad.')}
|
||||
</p>
|
||||
)}
|
||||
@@ -540,8 +628,8 @@ export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) {
|
||||
!availabilityQuery.isError &&
|
||||
availabilityQuery.data?.sportSelectionRequired &&
|
||||
!selectedSportId && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Selecciona un deporte para ver los horarios disponibles.
|
||||
<p className="rounded-2xl border border-border/70 bg-background px-4 py-3 text-sm text-muted-foreground">
|
||||
Seleccioná un deporte para ver los horarios disponibles.
|
||||
</p>
|
||||
)}
|
||||
|
||||
@@ -550,20 +638,30 @@ export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) {
|
||||
availabilityQuery.data &&
|
||||
(!availabilityQuery.data.sportSelectionRequired || selectedSportId) &&
|
||||
visibleCourts.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<p className="rounded-2xl border border-border/70 bg-background px-4 py-3 text-sm text-muted-foreground">
|
||||
No hay horarios disponibles para la fecha elegida.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-4">
|
||||
{visibleCourts.map((court) => (
|
||||
<article key={court.courtId} className="rounded-xl border bg-background p-3 sm:p-4">
|
||||
<div className="mb-3 flex flex-col gap-1">
|
||||
<p className="text-sm font-medium sm:text-base">{court.courtName}</p>
|
||||
<article
|
||||
key={court.courtId}
|
||||
className="rounded-2xl border border-border/70 bg-background p-4 shadow-sm"
|
||||
>
|
||||
<div className="mb-4 flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-foreground sm:text-base">
|
||||
{court.courtName}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{court.sport.name} · Turnos de {court.slotDurationMinutes} min
|
||||
</p>
|
||||
</div>
|
||||
<span className="rounded-full border border-border/70 bg-card px-3 py-1 text-[11px] font-medium text-muted-foreground">
|
||||
{court.availableSlots.length} horarios
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
|
||||
{court.availableSlots.map((slot) => {
|
||||
@@ -585,10 +683,10 @@ export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) {
|
||||
endTime: slot.endTime,
|
||||
});
|
||||
}}
|
||||
className={`h-10 rounded-lg border text-sm transition-colors ${
|
||||
className={`h-11 rounded-xl border text-sm font-medium transition-all ${
|
||||
isSelected
|
||||
? 'border-primary bg-primary text-primary-foreground'
|
||||
: 'border-border bg-card hover:bg-muted'
|
||||
? 'border-primary bg-primary text-primary-foreground shadow-sm'
|
||||
: 'border-border/70 bg-card hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-sm'
|
||||
}`}
|
||||
>
|
||||
{slot.startTime}
|
||||
@@ -600,16 +698,50 @@ export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) {
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
{selectedSlot && (
|
||||
<section className="rounded-2xl border bg-card p-4 shadow-sm sm:p-6">
|
||||
<h2 className="text-sm font-medium">Confirmar turno</h2>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
{selectedSlot.courtName} · {selectedSlot.sportName} · {selectedSlot.startTime} -{' '}
|
||||
{selectedSlot.endTime}
|
||||
<aside className="xl:sticky xl:top-24 h-fit space-y-6 self-start">
|
||||
<section className="rounded-2xl border border-border/70 bg-card p-5 shadow-sm sm:p-6">
|
||||
<h2 className="text-sm font-semibold uppercase tracking-[0.24em] text-muted-foreground">
|
||||
Resumen
|
||||
</h2>
|
||||
<div className="mt-4 space-y-3">
|
||||
<div className="rounded-2xl border border-border/70 bg-background p-4">
|
||||
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">Día</p>
|
||||
<p className="mt-1 text-sm font-medium capitalize text-foreground">
|
||||
{selectedDateLabel}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-border/70 bg-background p-4">
|
||||
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">
|
||||
Horario
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-medium text-foreground">
|
||||
{selectedSlot
|
||||
? `${selectedSlot.startTime} - ${selectedSlot.endTime}`
|
||||
: 'Todavía no elegiste un horario'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-border/70 bg-background p-4">
|
||||
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">
|
||||
Cancha
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-medium text-foreground">
|
||||
{selectedSlot?.courtName ?? 'Seleccioná una cancha disponible'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedSlot ? (
|
||||
<form className="mt-5 space-y-4" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="rounded-2xl border border-primary/20 bg-primary/5 p-4 text-sm text-foreground">
|
||||
<p className="font-medium">Turno seleccionado</p>
|
||||
<p className="mt-1 text-muted-foreground">
|
||||
{selectedSlot.courtName} · {selectedSlot.sportName} · {selectedSlot.startTime}{' '}
|
||||
- {selectedSlot.endTime}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form className="mt-4 space-y-3" onSubmit={handleSubmit(onSubmit)}>
|
||||
<Field data-invalid={Boolean(errors.customerName)}>
|
||||
<FieldLabel htmlFor="customerName">Nombre</FieldLabel>
|
||||
<Input
|
||||
@@ -622,7 +754,7 @@ export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) {
|
||||
</Field>
|
||||
|
||||
<Field data-invalid={Boolean(errors.customerPhone)}>
|
||||
<FieldLabel htmlFor="customerPhone">Telefono</FieldLabel>
|
||||
<FieldLabel htmlFor="customerPhone">Teléfono</FieldLabel>
|
||||
<Input
|
||||
id="customerPhone"
|
||||
type="tel"
|
||||
@@ -635,7 +767,10 @@ export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) {
|
||||
|
||||
{createBookingMutation.isError && (
|
||||
<p className="text-sm text-destructive">
|
||||
{extractMessage(createBookingMutation.error, 'No pudimos confirmar el turno.')}
|
||||
{extractMessage(
|
||||
createBookingMutation.error,
|
||||
'No pudimos confirmar el turno.'
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
{navigationError && <p className="text-sm text-destructive">{navigationError}</p>}
|
||||
@@ -644,8 +779,14 @@ export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) {
|
||||
{createBookingMutation.isPending ? 'Confirmando...' : 'Confirmar turno'}
|
||||
</Button>
|
||||
</form>
|
||||
</section>
|
||||
) : (
|
||||
<div className="mt-5 rounded-2xl border border-dashed border-border/70 bg-background p-4 text-sm text-muted-foreground">
|
||||
Elegí un horario disponible para completar la reserva.
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
||||
@@ -3,7 +3,7 @@ import { apiClient } from '@/lib/api-client';
|
||||
import type { ComplexWithRole } from '@repo/api-contract';
|
||||
import { useMutation, useQuery } from '@tanstack/react-query';
|
||||
import { useNavigate } from '@tanstack/react-router';
|
||||
import { Building2, Loader2 } from 'lucide-react';
|
||||
import { ArrowRight, Building2, Loader2 } from 'lucide-react';
|
||||
|
||||
export function SelectComplexPage() {
|
||||
const navigate = useNavigate();
|
||||
@@ -30,7 +30,7 @@ export function SelectComplexPage() {
|
||||
if (complexesQuery.isLoading) {
|
||||
return (
|
||||
<main className="flex min-h-screen w-full items-center justify-center px-6">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
<Loader2 className="h-9 w-9 animate-spin text-muted-foreground" />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -61,38 +61,93 @@ export function SelectComplexPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="flex min-h-screen w-full items-center justify-center px-6">
|
||||
<section className="w-full max-w-md space-y-6">
|
||||
<main className="min-h-screen px-4 py-4 sm:px-6 lg:px-8 lg:py-6">
|
||||
<div className="mx-auto grid min-h-[calc(100vh-2rem)] w-full max-w-6xl gap-6 lg:grid-cols-[0.9fr_1.1fr]">
|
||||
<section className="hidden overflow-hidden rounded-2xl border border-border/70 bg-card p-8 shadow-sm lg:flex lg:flex-col lg:justify-between">
|
||||
<div className="space-y-6">
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background/70 px-3 py-1 text-xs font-medium text-muted-foreground">
|
||||
<span className="size-2 rounded-full bg-primary" />
|
||||
Cambio de contexto
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.32em] text-muted-foreground">
|
||||
Playzer
|
||||
</p>
|
||||
<h1 className="max-w-md text-4xl font-semibold tracking-tight">
|
||||
Elegí el complejo con el que vas a operar.
|
||||
</h1>
|
||||
<p className="max-w-md text-base leading-7 text-muted-foreground">
|
||||
Cada complejo tiene su propio estado, su lista de canchas y su panel de reservas.
|
||||
Seleccioná uno para entrar con todo el contexto listo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3">
|
||||
<div className="rounded-2xl border border-border/70 bg-background p-4">
|
||||
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">
|
||||
Qué cambia
|
||||
</p>
|
||||
<p className="mt-2 text-sm text-foreground">
|
||||
Reservas, usuarios, configuración y disponibilidad se actualizan según el complejo
|
||||
seleccionado.
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-border/70 bg-background p-4">
|
||||
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">Tip</p>
|
||||
<p className="mt-2 text-sm text-foreground">
|
||||
Si administrás varios complejos, el menú superior te deja cambiar sin perder el
|
||||
hilo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="w-full rounded-2xl border border-border/70 bg-card p-6 shadow-sm sm:p-8">
|
||||
<div className="space-y-2">
|
||||
<h1 className="text-2xl font-semibold">Seleccioná un complejo</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Elegí el complejo con el que vas a trabajar.
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.32em] text-muted-foreground">
|
||||
Selección
|
||||
</p>
|
||||
<h1 className="text-3xl font-semibold tracking-tight">Seleccioná un complejo</h1>
|
||||
<p className="max-w-md text-sm text-muted-foreground">
|
||||
Elegí el espacio con el que vas a trabajar ahora mismo.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="mt-6 space-y-3">
|
||||
{complexes.map((complex) => (
|
||||
<button
|
||||
key={complex.id}
|
||||
type="button"
|
||||
className="flex w-full items-center gap-3 rounded-lg border p-4 text-left transition-colors hover:bg-accent"
|
||||
className="flex w-full items-center gap-4 rounded-2xl border border-border/70 bg-background p-4 text-left transition-all hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-sm"
|
||||
onClick={() => handleSelect(complex)}
|
||||
disabled={selectMutation.isPending}
|
||||
>
|
||||
<Building2 className="h-5 w-5 text-muted-foreground" />
|
||||
<div className="flex size-11 items-center justify-center rounded-2xl bg-primary/10 text-primary">
|
||||
<Building2 className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="font-medium">{complex.complexName}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{complex.city ?? 'Sin ciudad'} · {complex.role}
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="font-medium text-foreground">{complex.complexName}</p>
|
||||
<span className="rounded-full border border-border/70 bg-card px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
|
||||
{complex.role}
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
{complex.city ?? 'Sin ciudad'} · {complex.complexSlug}
|
||||
</p>
|
||||
</div>
|
||||
{selectMutation.isPending && selectMutation.variables === complex.id && (
|
||||
<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
|
||||
)}
|
||||
{!selectMutation.isPending && (
|
||||
<ArrowRight className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -42,46 +42,46 @@
|
||||
--radius-sm: calc(var(--radius) * 0.6);
|
||||
--radius-md: calc(var(--radius) * 0.8);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) * 1.4);
|
||||
--radius-2xl: calc(var(--radius) * 1.8);
|
||||
--radius-3xl: calc(var(--radius) * 2.2);
|
||||
--radius-4xl: calc(var(--radius) * 2.6);
|
||||
--radius-xl: calc(var(--radius) * 1.2);
|
||||
--radius-2xl: calc(var(--radius) * 1.5);
|
||||
--radius-3xl: calc(var(--radius) * 1.8);
|
||||
--radius-4xl: calc(var(--radius) * 2.1);
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Base colors (retain shadcn structure) */
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--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);
|
||||
/* Base colors (retaining the shadcn structure, but with a sports-club identity) */
|
||||
--background: oklch(0.985 0.01 145);
|
||||
--foreground: oklch(0.16 0.02 145);
|
||||
--card: oklch(0.995 0.005 145);
|
||||
--card-foreground: oklch(0.16 0.02 145);
|
||||
--popover: oklch(0.995 0.005 145);
|
||||
--popover-foreground: oklch(0.16 0.02 145);
|
||||
--primary: oklch(0.42 0.11 145);
|
||||
--primary-foreground: oklch(0.985 0.01 145);
|
||||
--secondary: oklch(0.95 0.015 145);
|
||||
--secondary-foreground: oklch(0.24 0.02 145);
|
||||
--muted: oklch(0.95 0.01 145);
|
||||
--muted-foreground: oklch(0.49 0.02 145);
|
||||
--accent: oklch(0.93 0.05 82);
|
||||
--accent-foreground: oklch(0.28 0.05 82);
|
||||
--destructive: oklch(0.58 0.22 27);
|
||||
--border: oklch(0.9 0.01 145);
|
||||
--input: oklch(0.89 0.01 145);
|
||||
--ring: oklch(0.55 0.12 145);
|
||||
--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);
|
||||
--radius: 0.5rem;
|
||||
--sidebar: oklch(0.99 0.005 145);
|
||||
--sidebar-foreground: oklch(0.16 0.02 145);
|
||||
--sidebar-primary: oklch(0.42 0.11 145);
|
||||
--sidebar-primary-foreground: oklch(0.985 0.01 145);
|
||||
--sidebar-accent: oklch(0.93 0.05 82);
|
||||
--sidebar-accent-foreground: oklch(0.28 0.05 82);
|
||||
--sidebar-border: oklch(0.9 0.01 145);
|
||||
--sidebar-ring: oklch(0.55 0.12 145);
|
||||
|
||||
/* Surface elevation (light mode: higher = lighter) */
|
||||
--surface-base: oklch(1 0 0);
|
||||
@@ -120,37 +120,37 @@
|
||||
}
|
||||
|
||||
.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);
|
||||
--background: oklch(0.14 0.015 145);
|
||||
--foreground: oklch(0.98 0.01 145);
|
||||
--card: oklch(0.19 0.02 145);
|
||||
--card-foreground: oklch(0.98 0.01 145);
|
||||
--popover: oklch(0.2 0.02 145);
|
||||
--popover-foreground: oklch(0.98 0.01 145);
|
||||
--primary: oklch(0.76 0.11 145);
|
||||
--primary-foreground: oklch(0.15 0.02 145);
|
||||
--secondary: oklch(0.24 0.02 145);
|
||||
--secondary-foreground: oklch(0.98 0.01 145);
|
||||
--muted: oklch(0.24 0.02 145);
|
||||
--muted-foreground: oklch(0.72 0.02 145);
|
||||
--accent: oklch(0.28 0.05 82);
|
||||
--accent-foreground: oklch(0.98 0.01 82);
|
||||
--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);
|
||||
--input: oklch(1 0 0 / 12%);
|
||||
--ring: oklch(0.72 0.08 145);
|
||||
--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: oklch(0.18 0.02 145);
|
||||
--sidebar-foreground: oklch(0.98 0.01 145);
|
||||
--sidebar-primary: oklch(0.76 0.11 145);
|
||||
--sidebar-primary-foreground: oklch(0.15 0.02 145);
|
||||
--sidebar-accent: oklch(0.28 0.05 82);
|
||||
--sidebar-accent-foreground: oklch(0.98 0.01 82);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
--sidebar-ring: oklch(0.72 0.08 145);
|
||||
|
||||
/* Surface elevation (dark mode: higher = lighter) */
|
||||
--surface-base: oklch(0.145 0 0);
|
||||
@@ -192,10 +192,36 @@
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
html {
|
||||
@apply font-sans;
|
||||
font-synthesis-weight: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground antialiased;
|
||||
background-image: radial-gradient(
|
||||
circle at top left,
|
||||
oklch(0.94 0.04 145 / 0.55),
|
||||
transparent 32%
|
||||
), radial-gradient(circle at top right, oklch(0.96 0.03 220 / 0.45), transparent 28%),
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
oklch(0.99 0.005 145),
|
||||
oklch(0.985 0.01 145) 28%,
|
||||
oklch(0.97 0.01 145)
|
||||
);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
.dark body {
|
||||
background-image: radial-gradient(
|
||||
circle at top left,
|
||||
oklch(0.32 0.08 145 / 0.35),
|
||||
transparent 32%
|
||||
), radial-gradient(circle at top right, oklch(0.26 0.05 220 / 0.2), transparent 28%),
|
||||
linear-gradient(to bottom, oklch(0.15 0.015 145), oklch(0.14 0.015 145));
|
||||
}
|
||||
::selection {
|
||||
background: color-mix(in oklab, var(--primary) 28%, transparent);
|
||||
color: var(--foreground);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user