feat(salas): modal de reserva com calendário mensal + seleção de modelo por cartão
Substitui os dois datetime-local crus por um calendário mensal profissional (navegação de mês, dia selecionável, dias passados desabilitados, dias ocupados com marcador, destaque de intervalo p/ semanal/mensal). Modelo de locação vira grade de cartões com o preço de cada (Hora/Turno/Diária/Semanal/Mensal, só os que a sala oferece). Controles conforme o modelo: hora (início + duração), turno (manhã/tarde/noite); diária/semanal/mensal calculam o período. Resumo do período + ocupados do dia selecionado. início/fim derivados do calendário (backend igual). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
VPS 4 Builder
@@ -1,7 +1,7 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
DoorOpen, MapPin, Search, RefreshCw, Plus, Pencil, Trash2, X, Save,
|
||||
CalendarClock, CheckCircle2, XCircle, Clock, Building2, Briefcase, Home, Inbox, Send, Eraser, ChevronUp
|
||||
CalendarClock, CheckCircle2, XCircle, Clock, Building2, Briefcase, Home, Inbox, Send, Eraser, ChevronUp, ChevronLeft, ChevronRight
|
||||
} from 'lucide-react';
|
||||
import { PageHeader } from '../../components/PageHeader.tsx';
|
||||
import { useToast } from '../../contexts/ToastContext.tsx';
|
||||
@@ -106,6 +106,52 @@ const precos = (s: Sala): Array<[string, string]> => {
|
||||
.map(([l, v]) => [l, fmtValor(v as string | null) || 'Sob consulta'] as [string, string]);
|
||||
};
|
||||
|
||||
// ── Calendário de reserva ────────────────────────────────────────────────────
|
||||
const MODELOS: Array<{ id: string; label: string; valor: keyof Sala; consulta: keyof Sala }> = [
|
||||
{ id: 'hora', label: 'Hora', valor: 'valor_hora', consulta: 'hora_consulta' },
|
||||
{ id: 'turno', label: 'Turno', valor: 'valor_turno', consulta: 'turno_consulta' },
|
||||
{ id: 'diaria', label: 'Diária', valor: 'valor_diaria', consulta: 'diaria_consulta' },
|
||||
{ id: 'semanal', label: 'Semanal', valor: 'valor_semanal', consulta: 'semanal_consulta' },
|
||||
{ id: 'mensal', label: 'Mensal', valor: 'valor_mensal', consulta: 'mensal_consulta' },
|
||||
];
|
||||
const TURNOS: Record<string, { label: string; ini: number; fim: number }> = {
|
||||
manha: { label: 'Manhã', ini: 8, fim: 12 },
|
||||
tarde: { label: 'Tarde', ini: 13, fim: 18 },
|
||||
noite: { label: 'Noite', ini: 18, fim: 22 },
|
||||
};
|
||||
const WEEKDAYS = ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'];
|
||||
const MESES = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
|
||||
const pad2 = (n: number) => String(n).padStart(2, '0');
|
||||
const toLocalInput = (d: Date) => `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}T${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
|
||||
const mesmoDia = (a: Date, b: Date) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
|
||||
// Células do mês (com padding p/ alinhar ao dia da semana).
|
||||
const monthGrid = (ref: Date): (Date | null)[] => {
|
||||
const first = new Date(ref.getFullYear(), ref.getMonth(), 1);
|
||||
const dias = new Date(ref.getFullYear(), ref.getMonth() + 1, 0).getDate();
|
||||
const cells: (Date | null)[] = [];
|
||||
for (let i = 0; i < first.getDay(); i++) cells.push(null);
|
||||
for (let d = 1; d <= dias; d++) cells.push(new Date(ref.getFullYear(), ref.getMonth(), d));
|
||||
return cells;
|
||||
};
|
||||
// Início/fim conforme o modelo escolhido.
|
||||
const computeRange = (dia: Date, modelo: string, hora: string, qtd: number, turno: string): { ini: Date; fim: Date } => {
|
||||
const b = new Date(dia); b.setHours(0, 0, 0, 0);
|
||||
const ini = new Date(b), fim = new Date(b);
|
||||
if (modelo === 'hora') {
|
||||
const [h, m] = hora.split(':').map(Number); ini.setHours(h || 8, m || 0, 0, 0);
|
||||
fim.setTime(ini.getTime() + Math.max(1, qtd) * 3600_000);
|
||||
} else if (modelo === 'turno') {
|
||||
const t = TURNOS[turno] || TURNOS.manha; ini.setHours(t.ini, 0, 0, 0); fim.setHours(t.fim, 0, 0, 0);
|
||||
} else if (modelo === 'semanal') {
|
||||
ini.setHours(8, 0, 0, 0); fim.setDate(fim.getDate() + 6); fim.setHours(18, 0, 0, 0);
|
||||
} else if (modelo === 'mensal') {
|
||||
ini.setHours(8, 0, 0, 0); fim.setDate(fim.getDate() + 29); fim.setHours(18, 0, 0, 0);
|
||||
} else { // diária
|
||||
ini.setHours(8, 0, 0, 0); fim.setHours(18, 0, 0, 0);
|
||||
}
|
||||
return { ini, fim };
|
||||
};
|
||||
|
||||
const inputCls = 'w-full px-3 py-2.5 bg-gray-50 border border-gray-200 rounded-xl text-xs font-bold text-gray-700 outline-none focus:border-teal-400';
|
||||
const labelCls = 'text-[10px] font-black text-gray-400 uppercase tracking-widest block mb-1';
|
||||
// Estilo padrão de filtros — fonte única em components/filterStyles.
|
||||
@@ -278,6 +324,28 @@ const ReservaModal: React.FC<{ sala: Sala; onClose: () => void; onReserved: () =
|
||||
const [profissionais, setProfissionais] = useState<Array<{ usuario_id: string; nome: string }>>([]);
|
||||
const [profissionalId, setProfissionalId] = useState('');
|
||||
|
||||
// ── Calendário de reserva ──
|
||||
const hoje0 = new Date(); hoje0.setHours(0, 0, 0, 0);
|
||||
const [mesRef, setMesRef] = useState(new Date(hoje0.getFullYear(), hoje0.getMonth(), 1));
|
||||
const [diaSel, setDiaSel] = useState<Date | null>(null);
|
||||
const [hora, setHora] = useState('08:00');
|
||||
const [qtd, setQtd] = useState(1);
|
||||
const [turno, setTurno] = useState('manha');
|
||||
const HORAS = Array.from({ length: 29 }, (_, i) => `${pad2(7 + Math.floor(i / 2))}:${i % 2 ? '30' : '00'}`); // 07:00–21:00
|
||||
const modelosDisp = MODELOS.filter(m => fmtValor(sala[m.valor] as any) || sala[m.consulta]);
|
||||
const diasOcupados = new Set(ocupadas.map(o => new Date(o.inicio).toDateString()));
|
||||
const ocupadasDoDia = diaSel ? ocupadas.filter(o => new Date(o.inicio).toDateString() === diaSel.toDateString()) : [];
|
||||
const rangeFim = diaSel ? (() => { const d = new Date(diaSel); d.setDate(d.getDate() + (f.modelo === 'mensal' ? 29 : 6)); return d; })() : null;
|
||||
|
||||
// Modelo padrão = 1º disponível.
|
||||
useEffect(() => { if (modelosDisp.length && !modelosDisp.some(m => m.id === f.modelo)) setF(p => ({ ...p, modelo: modelosDisp[0].id })); /* eslint-disable-next-line */ }, []);
|
||||
// Recalcula início/fim conforme dia + modelo + horário.
|
||||
useEffect(() => {
|
||||
if (!diaSel) return;
|
||||
const { ini, fim } = computeRange(diaSel, f.modelo, hora, qtd, turno);
|
||||
setF(p => ({ ...p, inicio: toLocalInput(ini), fim: toLocalInput(fim) }));
|
||||
}, [diaSel, f.modelo, hora, qtd, turno]);
|
||||
|
||||
useEffect(() => {
|
||||
apiFetch(`/api/salas/${sala.id}/reservas`)
|
||||
.then(r => (r.ok ? r.json() : []))
|
||||
@@ -317,7 +385,7 @@ const ReservaModal: React.FC<{ sala: Sala; onClose: () => void; onReserved: () =
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center backdrop-blur-sm p-4">
|
||||
<div className="bg-white rounded-2xl w-full max-w-md shadow-2xl overflow-hidden max-h-[92vh] overflow-y-auto">
|
||||
<div className="bg-white rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden max-h-[92vh] overflow-y-auto">
|
||||
<div className="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-black text-gray-900 uppercase">RESERVAR {sala.nome}</h3>
|
||||
@@ -350,36 +418,109 @@ const ReservaModal: React.FC<{ sala: Sala; onClose: () => void; onReserved: () =
|
||||
<p className="text-[9px] text-gray-400 font-bold uppercase mt-1">O anti-conflito verifica a agenda do profissional selecionado</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className={labelCls}>Início *</label>
|
||||
<input type="datetime-local" className={inputCls} value={f.inicio} onChange={e => setF(p => ({ ...p, inicio: e.target.value }))} />
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelCls}>Fim *</label>
|
||||
<input type="datetime-local" className={inputCls} value={f.fim} onChange={e => setF(p => ({ ...p, fim: e.target.value }))} />
|
||||
</div>
|
||||
</div>
|
||||
{/* Modelo de locação — cartões com preço */}
|
||||
<div>
|
||||
<label className={labelCls}>Modelo de locação</label>
|
||||
<select className={inputCls} value={f.modelo} onChange={e => setF(p => ({ ...p, modelo: e.target.value }))}>
|
||||
{precos(sala).length === 0 && <option value="hora">HORA</option>}
|
||||
{precos(sala).map(([l]) => {
|
||||
const map: Record<string, string> = { HORA: 'hora', TURNO: 'turno', 'DIÁRIA': 'diaria', SEMANA: 'semanal', 'MÊS': 'mensal' };
|
||||
return <option key={l} value={map[l]}>{l}</option>;
|
||||
<div className="grid grid-cols-3 sm:grid-cols-5 gap-2 mt-1">
|
||||
{(modelosDisp.length ? modelosDisp : [MODELOS[0]]).map(m => {
|
||||
const ativo = f.modelo === m.id;
|
||||
const preco = fmtValor(sala[m.valor] as any) || (sala[m.consulta] ? 'sob consulta' : '—');
|
||||
return (
|
||||
<button key={m.id} type="button" onClick={() => setF(p => ({ ...p, modelo: m.id }))}
|
||||
className={`p-2.5 rounded-xl border text-center transition-all ${ativo ? 'text-white border-transparent shadow-sm' : 'bg-gray-50 text-gray-600 border-gray-200 hover:bg-gray-100'}`}
|
||||
style={ativo ? { backgroundColor: COLOR } : {}}>
|
||||
<div className="text-[11px] font-black uppercase leading-none">{m.label}</div>
|
||||
<div className={`text-[9px] font-bold mt-1 leading-none ${ativo ? 'text-white/80' : 'text-gray-400'}`}>{preco}</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Calendário mensal */}
|
||||
<div className="rounded-2xl border border-gray-100 p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<button type="button" onClick={() => setMesRef(m => new Date(m.getFullYear(), m.getMonth() - 1, 1))} className="p-1.5 rounded-lg hover:bg-gray-100 text-gray-500"><ChevronLeft size={18} /></button>
|
||||
<span className="text-xs font-black text-gray-800 uppercase tracking-wide">{MESES[mesRef.getMonth()]} {mesRef.getFullYear()}</span>
|
||||
<button type="button" onClick={() => setMesRef(m => new Date(m.getFullYear(), m.getMonth() + 1, 1))} className="p-1.5 rounded-lg hover:bg-gray-100 text-gray-500"><ChevronRight size={18} /></button>
|
||||
</div>
|
||||
<div className="grid grid-cols-7 gap-1 mb-1">
|
||||
{WEEKDAYS.map((w, i) => <div key={i} className="text-center text-[9px] font-black text-gray-300 uppercase py-1">{w}</div>)}
|
||||
</div>
|
||||
<div className="grid grid-cols-7 gap-1">
|
||||
{monthGrid(mesRef).map((dia, i) => {
|
||||
if (!dia) return <div key={i} />;
|
||||
const passado = dia < hoje0;
|
||||
const sel = !!(diaSel && mesmoDia(dia, diaSel));
|
||||
const emRange = !!(diaSel && rangeFim && (f.modelo === 'semanal' || f.modelo === 'mensal') && dia > diaSel && dia <= rangeFim);
|
||||
const ocupado = diasOcupados.has(dia.toDateString());
|
||||
return (
|
||||
<button key={i} type="button" disabled={passado} onClick={() => setDiaSel(dia)}
|
||||
className={`relative aspect-square rounded-lg text-xs font-bold flex items-center justify-center transition-all ${passado ? 'text-gray-200 cursor-not-allowed' : sel ? 'text-white shadow' : emRange ? 'text-teal-700' : 'text-gray-600 hover:bg-gray-100'}`}
|
||||
style={sel ? { backgroundColor: COLOR } : emRange ? { backgroundColor: `${COLOR}22` } : {}}>
|
||||
{dia.getDate()}
|
||||
{ocupado && !sel && <span className="absolute bottom-1 w-1 h-1 rounded-full bg-amber-400" />}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Controles de horário (conforme o modelo) */}
|
||||
{diaSel && f.modelo === 'hora' && (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className={labelCls}>Início</label>
|
||||
<select className={inputCls} value={hora} onChange={e => setHora(e.target.value)}>
|
||||
{HORAS.map(h => <option key={h} value={h}>{h}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelCls}>Duração</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<button type="button" onClick={() => setQtd(q => Math.max(1, q - 1))} className="w-9 h-9 rounded-lg border border-gray-200 text-gray-500 font-black text-lg leading-none">−</button>
|
||||
<span className="flex-1 text-center text-sm font-black text-gray-800">{qtd}h</span>
|
||||
<button type="button" onClick={() => setQtd(q => Math.min(12, q + 1))} className="w-9 h-9 rounded-lg border border-gray-200 text-gray-500 font-black text-lg leading-none">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{diaSel && f.modelo === 'turno' && (
|
||||
<div>
|
||||
<label className={labelCls}>Turno</label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{Object.entries(TURNOS).map(([k, t]) => (
|
||||
<button key={k} type="button" onClick={() => setTurno(k)}
|
||||
className={`py-2 rounded-xl text-[11px] font-black uppercase border transition-all ${turno === k ? 'text-white border-transparent' : 'bg-gray-50 text-gray-500 border-gray-200 hover:bg-gray-100'}`}
|
||||
style={turno === k ? { backgroundColor: COLOR } : {}}>
|
||||
{t.label}<div className="text-[8px] font-bold opacity-70">{pad2(t.ini)}h–{pad2(t.fim)}h</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Resumo do período */}
|
||||
{f.inicio && f.fim && (
|
||||
<div className="rounded-2xl bg-teal-50 border border-teal-100 p-3.5 flex items-center gap-3">
|
||||
<CalendarClock size={18} className="text-teal-600 shrink-0" />
|
||||
<div className="text-xs font-bold text-teal-800 leading-snug">
|
||||
{fmtData(new Date(f.inicio).toISOString())} <span className="text-teal-400">→</span> {fmtData(new Date(f.fim).toISOString())}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<label className={labelCls}>Observações</label>
|
||||
<textarea className={inputCls} rows={2} value={f.observacoes} onChange={e => setF(p => ({ ...p, observacoes: e.target.value }))} />
|
||||
</div>
|
||||
{ocupadas.length > 0 && (
|
||||
{diaSel && ocupadasDoDia.length > 0 && (
|
||||
<div className="p-3 rounded-xl bg-amber-50 border border-amber-100">
|
||||
<p className="text-[9px] font-black text-amber-600 uppercase tracking-widest mb-1.5 flex items-center gap-1"><Clock size={11} /> Horários já ocupados</p>
|
||||
<p className="text-[9px] font-black text-amber-600 uppercase tracking-widest mb-1.5 flex items-center gap-1"><Clock size={11} /> Já ocupado neste dia</p>
|
||||
<div className="space-y-1 max-h-28 overflow-y-auto">
|
||||
{ocupadas.map(o => (
|
||||
<p key={o.id} className="text-[10px] font-bold text-amber-700">{fmtData(o.inicio)} → {fmtData(o.fim)} ({o.status})</p>
|
||||
{ocupadasDoDia.map(o => (
|
||||
<p key={o.id} className="text-[10px] font-bold text-amber-700">
|
||||
{new Date(o.inicio).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })}–{new Date(o.fim).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })} ({o.status})
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user