AgendaPro Dev
e8d2435cc2
Multi-tenant scheduling SaaS (AgendaPro-equivalent): - Backend: Node + Express + node:sqlite, multi-tenant (admin/owner/employee), versioned migrations, 4 templates (estetica-spa, barberia, clinica, blank). - Frontend: React 18 + TS + Vite + Tailwind, FullCalendar drag-and-drop, Recharts dashboard, mobile-first (day/list views on mobile). - Features: calendar+services+employees+clients+tickets, dashboard with best employee/service, top tickets, top/frequent clients, commissions, cancellation policy + no-show tracking, public online booking (/b/:slug), cash register (cierre de caja), reminders/notifications center. - Verification: 65/65 e2e API, 58/58 visual (0 overflow, 0 console errors), typecheck clean, vite build OK.
64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
import { useEffect } from "react";
|
|
import { createPortal } from "react-dom";
|
|
import { X } from "lucide-react";
|
|
import { cn } from "../lib/format";
|
|
|
|
interface ModalProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
title?: string;
|
|
subtitle?: string;
|
|
children: React.ReactNode;
|
|
size?: "sm" | "md" | "lg";
|
|
footer?: React.ReactNode;
|
|
}
|
|
|
|
export function Modal({ open, onClose, title, subtitle, children, size = "md", footer }: ModalProps) {
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") onClose();
|
|
};
|
|
window.addEventListener("keydown", onKey);
|
|
document.body.style.overflow = "hidden";
|
|
return () => {
|
|
window.removeEventListener("keydown", onKey);
|
|
document.body.style.overflow = "";
|
|
};
|
|
}, [open, onClose]);
|
|
|
|
if (!open) return null;
|
|
|
|
const maxW = size === "sm" ? "max-w-md" : size === "lg" ? "max-w-3xl" : "max-w-xl";
|
|
|
|
return createPortal(
|
|
<div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
|
|
<div className="absolute inset-0 bg-slate-900/40 backdrop-blur-sm animate-fade-in" onClick={onClose} />
|
|
<div
|
|
className={cn(
|
|
"relative z-10 flex max-h-[92vh] w-full flex-col overflow-hidden rounded-t-2xl bg-white shadow-2xl animate-slide-up sm:rounded-2xl",
|
|
maxW
|
|
)}
|
|
>
|
|
{(title || subtitle) && (
|
|
<div className="flex items-start justify-between gap-3 border-b border-slate-100 px-5 py-4">
|
|
<div className="min-w-0">
|
|
{title && <h2 className="text-lg font-bold text-slate-900">{title}</h2>}
|
|
{subtitle && <p className="mt-0.5 text-sm text-slate-500">{subtitle}</p>}
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="rounded-lg p-1.5 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
<div className="flex-1 overflow-y-auto px-5 py-4">{children}</div>
|
|
{footer && <div className="border-t border-slate-100 bg-slate-50/60 px-5 py-3">{footer}</div>}
|
|
</div>
|
|
</div>,
|
|
document.body
|
|
);
|
|
}
|