M-Gabrielly
6585187efd
ações para formulários de agendamento
- calendar-registration-form.tsx:
- Otimizadas importações de ícones e
adicionadas novas caixas de seleção para
reembolso e impressão de etiquetas.
- Introduzido campo 'Profissional
solicitante' com funcionalidade de busca.
- Removido botão 'Cancelar' interno.
- FooterAgenda.tsx:
- Consolidado botões de ação,
removendo 'Cancelar' e 'Salvar as
alterações' redundantes.
249 lines
13 KiB
TypeScript
249 lines
13 KiB
TypeScript
|
|
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import dynamic from 'next/dynamic';
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Calendar, Search, ChevronDown } from "lucide-react";
|
|
|
|
interface FormData {
|
|
patientName?: string;
|
|
cpf?: string;
|
|
rg?: string;
|
|
birthDate?: string;
|
|
phoneCode?: string;
|
|
phoneNumber?: string;
|
|
email?: string;
|
|
convenio?: string;
|
|
matricula?: string;
|
|
validade?: string;
|
|
documentos?: string;
|
|
professionalName?: string;
|
|
unit?: string;
|
|
appointmentDate?: string;
|
|
startTime?: string;
|
|
endTime?: string;
|
|
requestingProfessional?: string;
|
|
appointmentType?: string;
|
|
notes?: string;
|
|
}
|
|
|
|
interface CalendarRegistrationFormProperties {
|
|
initialData?: FormData;
|
|
onSave: (data: FormData) => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
const formatValidityDate = (value: string) => {
|
|
const cleaned = value.replaceAll(/\D/g, "");
|
|
if (cleaned.length > 4) {
|
|
return `${cleaned.slice(0, 2)}/${cleaned.slice(2, 4)}/${cleaned.slice(4, 8)}`;
|
|
}
|
|
if (cleaned.length > 2) {
|
|
return `${cleaned.slice(0, 2)}/${cleaned.slice(2, 4)}`;
|
|
}
|
|
return cleaned;
|
|
};
|
|
|
|
export function CalendarRegistrationForm({ initialData, onSave, onCancel }: CalendarRegistrationFormProperties) {
|
|
const [formData, setFormData] = useState<FormData>(initialData || {});
|
|
const [isAdditionalInfoOpen, setIsAdditionalInfoOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setFormData(initialData || {});
|
|
}, [initialData]);
|
|
|
|
const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
|
const { name, value } = event.target;
|
|
|
|
if (name === 'validade') {
|
|
const formattedValue = formatValidityDate(value);
|
|
setFormData((previousState) => ({ ...previousState, [name]: formattedValue }));
|
|
} else {
|
|
setFormData((previousState) => ({ ...previousState, [name]: value }));
|
|
}
|
|
};
|
|
|
|
const handleSubmit = (event: React.FormEvent) => {
|
|
event.preventDefault();
|
|
onSave(formData);
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="space-y-8">
|
|
<div className="border border-border rounded-md p-6 space-y-4 bg-card">
|
|
<h2 className="font-medium text-foreground">Informações do paciente</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-12 gap-4">
|
|
<div className="md:col-span-6 space-y-2">
|
|
<Label>Nome *</Label>
|
|
<div className="relative">
|
|
<Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
name="patientName"
|
|
placeholder="Digite o nome do paciente"
|
|
className="h-10 pl-8"
|
|
value={formData.patientName || ''}
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="md:col-span-3 space-y-2">
|
|
<Label>CPF do paciente</Label>
|
|
<Input name="cpf" placeholder="Número do CPF" className="h-10" value={formData.cpf || ''} onChange={handleChange} />
|
|
</div>
|
|
<div className="md:col-span-3 space-y-2">
|
|
<Label>RG</Label>
|
|
<Input name="rg" placeholder="Número do RG" className="h-10" value={formData.rg || ''} onChange={handleChange} />
|
|
</div>
|
|
<div className="md:col-span-3 space-y-2">
|
|
<Label>Data de nascimento *</Label>
|
|
<Input name="birthDate" type="date" className="h-10" value={formData.birthDate || ''} onChange={handleChange} />
|
|
</div>
|
|
<div className="md:col-span-3 space-y-2">
|
|
<Label>Telefone</Label>
|
|
<div className="flex gap-2">
|
|
<select name="phoneCode" className="h-10 w-20 rounded-md border border-input bg-background text-foreground px-2 text-[13px]" value={formData.phoneCode || '+55'} onChange={handleChange}>
|
|
<option value="+55">+55</option>
|
|
<option value="+351">+351</option>
|
|
<option value="+1">+1</option>
|
|
</select>
|
|
<Input name="phoneNumber" placeholder="(99) 99999-9999" className="h-10 flex-1" value={formData.phoneNumber || ''} onChange={handleChange} />
|
|
</div>
|
|
</div>
|
|
<div className="md:col-span-6 space-y-2">
|
|
<Label>E-mail</Label>
|
|
<Input name="email" type="email" placeholder="email@exemplo.com" className="h-10" value={formData.email || ''} onChange={handleChange} />
|
|
</div>
|
|
<div className="md:col-span-6 space-y-2">
|
|
<Label>Convênio</Label>
|
|
<div className="relative">
|
|
<select name="convenio" className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none" value={formData.convenio || ''} onChange={handleChange}>
|
|
<option value="" disabled>Selecione um convênio</option>
|
|
<option value="sulamerica">Sulamérica</option>
|
|
<option value="bradesco">Bradesco Saúde</option>
|
|
<option value="amil">Amil</option>
|
|
<option value="unimed">Unimed</option>
|
|
</select>
|
|
<ChevronDown className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
</div>
|
|
</div>
|
|
<div className="md:col-span-6 space-y-2">
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="space-y-2">
|
|
<Label>Matrícula</Label>
|
|
<Input name="matricula" placeholder="000000000" maxLength={9} className="h-10" value={formData.matricula || ''} onChange={handleChange} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Validade</Label>
|
|
<Input name="validade" placeholder="00/00/0000" className="h-10" value={formData.validade || ''} onChange={handleChange} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="md:col-span-12 pt-2">
|
|
<div
|
|
className="flex items-center justify-between cursor-pointer"
|
|
onClick={() => setIsAdditionalInfoOpen(!isAdditionalInfoOpen)}
|
|
>
|
|
<h3 className="text-base font-medium text-foreground">Informações adicionais</h3>
|
|
<ChevronDown className={`h-5 w-5 text-muted-foreground transition-transform duration-200 ${isAdditionalInfoOpen ? 'rotate-180' : ''}`} />
|
|
</div>
|
|
{isAdditionalInfoOpen && (
|
|
<div className="mt-4 space-y-2">
|
|
<Label>Documentos e anexos</Label>
|
|
<Textarea name="documentos" rows={5} className="text-[13px] resize-none" value={formData.documentos || ''} onChange={handleChange} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border border-border rounded-md p-6 space-y-4 bg-card">
|
|
<div className="flex justify-between items-center">
|
|
<h2 className="font-medium text-foreground">Informações do atendimento</h2>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label className="text-[13px]">Nome do profissional *</Label>
|
|
<div className="relative">
|
|
<Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<Input name="professionalName" className="h-10 w-full rounded-full border border-input pl-8 pr-12 text-[13px]" value={formData.professionalName || ''} onChange={handleChange} />
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="space-y-2">
|
|
<Label className="text-[13px]">Unidade *</Label>
|
|
<select name="unit" className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none" value={formData.unit || 'nei'} onChange={handleChange}>
|
|
<option value="nei">Núcleo de Especialidades Integradas</option>
|
|
<option value="cc">Clínica Central</option>
|
|
</select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label className="text-[13px]">Data *</Label>
|
|
<div className="relative">
|
|
<Calendar className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<Input name="appointmentDate" type="date" className="h-10 w-full rounded-md border border-input pl-8 pr-3 text-[13px]" value={formData.appointmentDate || ''} onChange={handleChange} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-3">
|
|
<div className="space-y-2">
|
|
<Label className="text-[13px]">Início *</Label>
|
|
<Input name="startTime" type="time" className="h-10 w-full rounded-md border border-input px-3 text-[13px]" value={formData.startTime || ''} onChange={handleChange} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label className="text-[13px]">Término *</Label>
|
|
<Input name="endTime" type="time" className="h-10 w-full rounded-md border border-input px-3 text-[13px]" value={formData.endTime || ''} onChange={handleChange} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label className="text-[13px]">Profissional solicitante</Label>
|
|
<div className="relative">
|
|
<Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<select name="requestingProfessional" className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-8 text-[13px] appearance-none" value={formData.requestingProfessional || ''} onChange={handleChange}>
|
|
<option value="" disabled>Selecione solicitante</option>
|
|
<option value="dr-a">Dr. A</option>
|
|
<option value="dr-b">Dr. B</option>
|
|
</select>
|
|
<ChevronDown className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-[13px]">Tipo de atendimento *</Label>
|
|
<div className="flex items-center space-x-2">
|
|
<Input type="checkbox" id="reembolso" className="h-4 w-4" />
|
|
<Label htmlFor="reembolso" className="text-[13px] font-medium">Pagamento via Reembolso</Label>
|
|
</div>
|
|
</div>
|
|
<div className="relative mt-1">
|
|
<Search className="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input name="appointmentType" placeholder="Pesquisar" className="h-10 w-full rounded-md border border-input pl-8 pr-8 text-[13px]" value={formData.appointmentType || ''} onChange={handleChange} />
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-[13px]">Observações</Label>
|
|
<div className="flex items-center space-x-2">
|
|
<Input type="checkbox" id="imprimir" className="h-4 w-4" />
|
|
<Label htmlFor="imprimir" className="text-[13px] font-medium">Imprimir na Etiqueta / Pulseira</Label>
|
|
</div>
|
|
</div>
|
|
<Textarea name="notes" rows={6} className="text-[13px] min-h-[120px] resize-none" value={formData.notes || ''} onChange={handleChange} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-2">
|
|
<Button type="submit">Salvar</Button>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|