feat: public landing page with magic login, brand palette and demo build flag
Adds a public funnel landing at `/` and moves the login to `/login`, rebuilt around the panel's own colors instead of an invented palette. Landing (`src/components/landing/`, one section per file, no props): - Seven funnel sections composed by `LandingPage`. The hero's eight swatches are literally `PIE_COLORS` from `DashboardPage`, the same hex values the seed hands to avatars and services, so "your colors become your numbers" is literal. - `BrandMark` becomes the single source for the logo, replicating `public/favicon.svg`. Blue is the action surface, orange only ever marks. - `NotebookVisual` is the one deliberate exception to the palette: it is what the product replaces. - Copy drops all system vocabulary; motion comes from `src/lib/motion.ts` with a single easing, and reduced-motion resolves `initial` to the final state so a never-firing `whileInView` cannot leave a section invisible forever. Routing and bundle: - `homePathFor` is the single definition of each role's destination. - Landing, login, dashboard and calendar load lazily. Eager, the login dragged framer-motion (~40 KB gz) into every panel load and the landing downloaded recharts + FullCalendar (~187 KB gz) without charting anything. `clsx` is pinned to the `react` chunk because Rollup otherwise assigns it to `charts`, making the entry import 111 KB gz for a 200-byte utility. Responsiveness (iPhone/iPad), verified with `npm run audit:responsive`: - No touch form field below 16px, `dvh` height utilities, safe-area insets, and 40px touch targets keyed off `pointer: coarse` rather than `sm:`. - New `.ld-gutter`: `.safe-x` lives outside `@layer` and beats Tailwind's `px-*`, so it left the login's side padding at 0 on anything but an iPhone in landscape. No overflow check could see it — there was no overflow, just zero margin. The audit now guards it with a `gutter` check. - `shell-height` no longer fires on pages that legitimately scroll; the static `raw-viewport-unit` scan covers those instead. Production build: - The Dockerfile now sets `VITE_DEMO_UI=1` as a build arg. `DEMO` is a build-time constant, so without it Vite eliminated the magic login and the "Ver como…" switcher: the deployed landing promised "no registration" and led to an empty form. Verified by building both ways and diffing the bundle. - Service worker cache bumped to v2 so the orphaned pre-landing chunks get purged from returning visitors' caches. Verified: typecheck clean; unit 39/39, e2e 33/33, admin 17/17, booking 12/12, landing 13/13 (WebKit), PWA passed against the real production build. Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
This commit is contained in:
AgendaPro Dev
co-authored by
Claude Opus 5
Claude Opus 5
parent
0b466f33f3
commit
4c19244df9
+109
-36
@@ -12,13 +12,19 @@ import type {
|
||||
import type { EventResizeDoneArg } from "@fullcalendar/interaction";
|
||||
import esLocale from "@fullcalendar/core/locales/es";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { CalendarDays, Plus, Filter, RotateCcw, AlertTriangle } from "lucide-react";
|
||||
import { Plus, Filter, RotateCcw, AlertTriangle } from "lucide-react";
|
||||
import { api } from "../lib/api";
|
||||
import { useAuth } from "../lib/auth";
|
||||
import type { Appointment } from "../../shared/types";
|
||||
import { PageHeader, Spinner, EmptyState } from "../components/ui";
|
||||
import { PageHeader, Spinner } from "../components/ui";
|
||||
import { AppointmentModal } from "../components/AppointmentModal";
|
||||
import { statusColor } from "../lib/format";
|
||||
import { useBreakpoint } from "../lib/useBreakpoint";
|
||||
|
||||
/** Aire bajo el calendario (padding inferior del contenedor + respiro visual). */
|
||||
const CAL_BOTTOM_GAP = 20;
|
||||
/** Por debajo de esto la grilla es inservible: mejor que la página scrollee. */
|
||||
const CAL_MIN_HEIGHT = 360;
|
||||
|
||||
const STATUS_FILTERS = [
|
||||
{ value: "all", label: "Todas" },
|
||||
@@ -38,15 +44,13 @@ export function CalendarPage() {
|
||||
const [draftSlot, setDraftSlot] = useState<{ start: string; end: string } | null>(null);
|
||||
const [employeeFilter, setEmployeeFilter] = useState<number | "all">("all");
|
||||
const [statusFilter, setStatusFilter] = useState<string>("all");
|
||||
const [isMobile, setIsMobile] = useState(
|
||||
typeof window !== "undefined" ? window.matchMedia("(max-width: 640px)").matches : false
|
||||
);
|
||||
useEffect(() => {
|
||||
const mq = window.matchMedia("(max-width: 640px)");
|
||||
const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
|
||||
mq.addEventListener("change", handler);
|
||||
return () => mq.removeEventListener("change", handler);
|
||||
}, []);
|
||||
const bp = useBreakpoint();
|
||||
const isMobile = bp === "phone";
|
||||
const isTablet = bp === "tablet";
|
||||
|
||||
const calWrapRef = useRef<HTMLDivElement>(null);
|
||||
const chromeRef = useRef<HTMLDivElement>(null);
|
||||
const [calHeight, setCalHeight] = useState<number | null>(null);
|
||||
|
||||
const isOwner = user?.role === "owner";
|
||||
// Employees see only their own by default
|
||||
@@ -75,6 +79,39 @@ export function CalendarPage() {
|
||||
},
|
||||
});
|
||||
|
||||
// La altura del calendario se le pasa como número en lugar de height="100%":
|
||||
// FullCalendar mide su contenedor una sola vez al montar y solo re-mide en
|
||||
// resize de ventana, así que se quedaba con una altura vieja cuando el layout
|
||||
// cambiaba después (en un iPhone 12 daba 360px dentro de un contenedor de
|
||||
// 525px). Se mide contra el viewport —posición real del contenedor e
|
||||
// innerHeight— y no contra el contenedor flex, cuya altura se resuelve más
|
||||
// tarde que el primer ciclo de medición.
|
||||
useEffect(() => {
|
||||
const compute = () => {
|
||||
const el = calWrapRef.current;
|
||||
if (!el) return;
|
||||
const top = el.getBoundingClientRect().top;
|
||||
const available = Math.round(window.innerHeight - top - CAL_BOTTOM_GAP);
|
||||
setCalHeight(Math.max(CAL_MIN_HEIGHT, available));
|
||||
};
|
||||
compute();
|
||||
// Se observa la barra de filtros y no el body: el shell es overflow-hidden con
|
||||
// altura fija, así que el body nunca cambia de tamaño y un observador sobre él
|
||||
// no volvería a dispararse. Lo que sí reflowea es ese bloque (el filtro de
|
||||
// empleados pasa a dos filas al llegar la lista), y eso mueve el `top` del
|
||||
// calendario, que es justo lo que hay que recalcular.
|
||||
const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(compute) : null;
|
||||
if (chromeRef.current) ro?.observe(chromeRef.current);
|
||||
window.addEventListener("resize", compute);
|
||||
window.addEventListener("orientationchange", compute);
|
||||
return () => {
|
||||
ro?.disconnect();
|
||||
window.removeEventListener("resize", compute);
|
||||
window.removeEventListener("orientationchange", compute);
|
||||
};
|
||||
// employeesData y moveError cambian el alto del chrome; bp cambia la toolbar.
|
||||
}, [employeesData, moveError, bp]);
|
||||
|
||||
const events = useMemo(() => {
|
||||
return (data?.appointments ?? []).map((a) => {
|
||||
const empColor = a.employee?.color ?? "#3b66ff";
|
||||
@@ -148,6 +185,14 @@ export function CalendarPage() {
|
||||
|
||||
const onToday = () => calRef.current?.getApi().today();
|
||||
|
||||
// La grilla empieza a las 08:00, así que en pantallas cortas la hora actual
|
||||
// puede quedar fuera de vista al abrir. Arrancamos una hora antes de "ahora",
|
||||
// acotado al rango visible de la grilla.
|
||||
const scrollTime = useMemo(() => {
|
||||
const h = Math.min(20, Math.max(8, new Date().getHours() - 1));
|
||||
return `${String(h).padStart(2, "0")}:00:00`;
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
<PageHeader
|
||||
@@ -193,7 +238,7 @@ export function CalendarPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 px-5 pb-3 pt-4 sm:px-7">
|
||||
<div ref={chromeRef} className="flex shrink-0 flex-wrap items-center gap-2 px-5 pb-3 pt-3 sm:gap-3 sm:px-7 sm:pt-4">
|
||||
{isOwner && (
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2 sm:flex-none">
|
||||
<Filter className="h-4 w-4 shrink-0 text-slate-400" />
|
||||
@@ -211,12 +256,14 @@ export function CalendarPage() {
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-white p-1">
|
||||
{/* Una sola fila con scroll lateral en móvil: envueltos en dos filas los
|
||||
4 chips se llevaban ~150px de alto que necesita la grilla. */}
|
||||
<div className="scrollbar-none flex max-w-full items-center gap-1 overflow-x-auto rounded-xl border border-slate-200 bg-white p-1 sm:flex-wrap sm:overflow-visible">
|
||||
{STATUS_FILTERS.map((s) => (
|
||||
<button
|
||||
key={s.value}
|
||||
onClick={() => setStatusFilter(s.value)}
|
||||
className={`rounded-lg px-2.5 py-1.5 text-xs font-semibold transition-colors ${
|
||||
className={`tap-target shrink-0 whitespace-nowrap rounded-lg px-3 py-1.5 text-xs font-semibold transition-colors ${
|
||||
statusFilter === s.value ? "bg-brand-500 text-white" : "text-slate-600 hover:bg-slate-100"
|
||||
}`}
|
||||
>
|
||||
@@ -226,24 +273,42 @@ export function CalendarPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-5 pb-6 sm:px-7">
|
||||
<div className="card flex h-full min-h-0 flex-col overflow-auto p-3 sm:p-4">
|
||||
{/* min-h-0 permite que el calendario se encoja dentro del flex; min-h en el
|
||||
card evita que se aplaste en landscape de teléfono (440px de alto), donde
|
||||
es mejor que la página scrollee que comprimir la grilla. */}
|
||||
<div className="min-h-0 flex-1 overflow-y-auto px-5 pb-4 sm:px-7 sm:pb-6">
|
||||
{/* p-1.5 en móvil: el padding interno del card es ancho que le robábamos a
|
||||
la grilla (antes p-3), y aquí no cuesta consistencia visual. */}
|
||||
<div className="card flex h-full min-h-[420px] flex-col overflow-y-auto p-1.5 sm:p-4">
|
||||
{isLoading && !data && (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<Spinner className="h-6 w-6 text-brand-500" />
|
||||
</div>
|
||||
)}
|
||||
{/* min-h aquí y no solo en el card: si aparece el aviso de "sin citas",
|
||||
no debe robarle altura a la grilla hasta dejarla inservible. */}
|
||||
<div ref={calWrapRef} className="min-h-[360px] flex-1 sm:min-h-[420px]">
|
||||
<FullCalendar
|
||||
ref={calRef}
|
||||
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin]}
|
||||
locale={esLocale}
|
||||
initialView={isMobile ? "timeGridDay" : "timeGridWeek"}
|
||||
/* En tablet, 3 días en vez de 7: en un iPad portrait (820px) la semana
|
||||
completa con varios especialistas a la misma hora parte cada evento
|
||||
en columnas de ~30px y el texto queda en "A..", "Fe...". Con 3 días
|
||||
cada columna ronda los 250px y se lee. Semana sigue a un toque. */
|
||||
initialView={isMobile ? "timeGridDay" : isTablet ? "timeGridThreeDay" : "timeGridWeek"}
|
||||
headerToolbar={
|
||||
isMobile
|
||||
? { left: "prev,next", center: "title", right: "timeGridDay,listWeek" }
|
||||
? // "today" va en la barra superior en lugar de un footerToolbar
|
||||
// propio: esa fila extra costaba ~90px de grilla. El CSS móvil
|
||||
// pone el título en su propia línea, así que los tres grupos
|
||||
// caben en una sola fila por debajo.
|
||||
{ left: "prev,next today", center: "title", right: "timeGridDay,listWeek" }
|
||||
: isTablet
|
||||
? { left: "prev,next today", center: "title", right: "timeGridThreeDay,timeGridWeek,timeGridDay,listWeek" }
|
||||
: { left: "prev,next today", center: "title", right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek" }
|
||||
}
|
||||
footerToolbar={isMobile ? { center: "today" } : false}
|
||||
footerToolbar={false}
|
||||
buttonText={{
|
||||
today: "Hoy",
|
||||
month: "Mes",
|
||||
@@ -259,20 +324,32 @@ export function CalendarPage() {
|
||||
noEventsContent: "Sin citas esta semana",
|
||||
},
|
||||
timeGridDay: { buttonText: "Día" },
|
||||
timeGridThreeDay: {
|
||||
type: "timeGrid",
|
||||
duration: { days: 3 },
|
||||
buttonText: "3 días",
|
||||
},
|
||||
}}
|
||||
height={isMobile ? "auto" : "auto"}
|
||||
contentHeight={isMobile ? 560 : 680}
|
||||
/* Antes: contentHeight fijo (560/680px). Con .fc-timegrid-slot a 2.4rem
|
||||
la grilla de 08:00-21:00 mide ~1000px, así que el calendario crecía
|
||||
a 1.4× la pantalla del iPhone 12 y arrastraba la página. Ahora ocupa
|
||||
exactamente su contenedor y scrollea dentro. */
|
||||
height={calHeight ?? "100%"}
|
||||
expandRows
|
||||
stickyHeaderDates
|
||||
firstDay={1}
|
||||
slotMinTime="08:00:00"
|
||||
slotMaxTime="21:00:00"
|
||||
slotDuration="00:30:00"
|
||||
slotLabelInterval="01:00:00"
|
||||
slotLabelFormat={{
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
hour12: true,
|
||||
}}
|
||||
/* En teléfono el eje horario se lleva ancho que necesitan las
|
||||
columnas: "8 a.m." en vez de "08:00 a. m.". */
|
||||
slotLabelFormat={
|
||||
isMobile
|
||||
? { hour: "numeric", hour12: true }
|
||||
: { hour: "2-digit", minute: "2-digit", hour12: true }
|
||||
}
|
||||
scrollTime={scrollTime}
|
||||
nowIndicator
|
||||
allDaySlot={false}
|
||||
selectable
|
||||
@@ -283,7 +360,7 @@ export function CalendarPage() {
|
||||
eventStartEditable
|
||||
slotEventOverlap={false}
|
||||
eventMinHeight={28}
|
||||
dayMaxEvents={isMobile ? 2 : 3}
|
||||
dayMaxEvents={isMobile ? 2 : isTablet ? 3 : 4}
|
||||
eventTimeFormat={{
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
@@ -297,15 +374,11 @@ export function CalendarPage() {
|
||||
datesSet={() => refetch()}
|
||||
eventContent={(arg) => <EventContent arg={arg} />}
|
||||
/>
|
||||
{!isLoading && events.length === 0 && (
|
||||
<div className="mt-2">
|
||||
<EmptyState
|
||||
icon={CalendarDays}
|
||||
title="Sin citas en este rango"
|
||||
description="Selecciona un horario en el calendario o crea una nueva cita."
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Sin EmptyState debajo de la grilla: con la altura del calendario ya
|
||||
fijada, ese bloque no cabía en el card y se solapaba con las horas.
|
||||
El vacío ya se comunica por la propia grilla y, en la vista Lista,
|
||||
por noEventsContent — más el botón "Nueva cita" de la cabecera. */}
|
||||
</div>
|
||||
<button onClick={onToday} className="sr-only">Hoy</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user