feat:change gender input to select dropdown
This commit is contained in:
parent
43c97fadd0
commit
e06c4376cb
157
susconecta/components/forms/doctor-registration-form.tsx
Normal file
157
susconecta/components/forms/doctor-registration-form.tsx
Normal file
@ -0,0 +1,157 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card"
|
||||
|
||||
export function DoctorRegistrationForm() {
|
||||
const [formData, setFormData] = useState({
|
||||
nome: "",
|
||||
crm: "",
|
||||
especialidade: "",
|
||||
email: "",
|
||||
celular: "",
|
||||
cpf: "",
|
||||
dataNascimento: "",
|
||||
cep: "",
|
||||
logradouro: "",
|
||||
numero: "",
|
||||
bairro: "",
|
||||
cidade: "",
|
||||
estado: "",
|
||||
observacoes: "",
|
||||
})
|
||||
const [errors, setErrors] = useState({})
|
||||
|
||||
const handleInputChange = (field, value) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }))
|
||||
}
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors = {}
|
||||
if (!formData.nome.trim()) newErrors.nome = "Nome é obrigatório"
|
||||
if (!formData.crm.trim()) newErrors.crm = "CRM é obrigatório"
|
||||
if (!formData.especialidade.trim()) newErrors.especialidade = "Especialidade é obrigatória"
|
||||
if (!formData.email.trim()) newErrors.email = "E-mail é obrigatório"
|
||||
if (!formData.celular.trim()) newErrors.celular = "Celular é obrigatório"
|
||||
if (!formData.cpf.trim()) newErrors.cpf = "CPF é obrigatório"
|
||||
if (!formData.dataNascimento.trim()) newErrors.dataNascimento = "Data de nascimento é obrigatória"
|
||||
if (!formData.cep.trim()) newErrors.cep = "CEP é obrigatório"
|
||||
if (!formData.logradouro.trim()) newErrors.logradouro = "Logradouro é obrigatório"
|
||||
if (!formData.numero.trim()) newErrors.numero = "Número é obrigatório"
|
||||
if (!formData.bairro.trim()) newErrors.bairro = "Bairro é obrigatório"
|
||||
if (!formData.cidade.trim()) newErrors.cidade = "Cidade é obrigatória"
|
||||
if (!formData.estado.trim()) newErrors.estado = "Estado é obrigatório"
|
||||
setErrors(newErrors)
|
||||
return Object.keys(newErrors).length === 0
|
||||
}
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault()
|
||||
if (!validateForm()) return
|
||||
// Aqui você pode chamar a API para salvar o médico
|
||||
alert("Médico cadastrado com sucesso!")
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-lg font-semibold">Dados do Médico</h2>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="nome">Nome</Label>
|
||||
<Input id="nome" value={formData.nome} onChange={e => handleInputChange("nome", e.target.value)} />
|
||||
{errors.nome && <p className="text-sm text-destructive">{errors.nome}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="crm">CRM</Label>
|
||||
<Input id="crm" value={formData.crm} onChange={e => handleInputChange("crm", e.target.value)} />
|
||||
{errors.crm && <p className="text-sm text-destructive">{errors.crm}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="especialidade">Especialidade</Label>
|
||||
<Input id="especialidade" value={formData.especialidade} onChange={e => handleInputChange("especialidade", e.target.value)} />
|
||||
{errors.especialidade && <p className="text-sm text-destructive">{errors.especialidade}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="email">E-mail</Label>
|
||||
<Input id="email" value={formData.email} onChange={e => handleInputChange("email", e.target.value)} />
|
||||
{errors.email && <p className="text-sm text-destructive">{errors.email}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="celular">Celular</Label>
|
||||
<Input id="celular" value={formData.celular} onChange={e => handleInputChange("celular", e.target.value)} />
|
||||
{errors.celular && <p className="text-sm text-destructive">{errors.celular}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="cpf">CPF</Label>
|
||||
<Input id="cpf" value={formData.cpf} onChange={e => handleInputChange("cpf", e.target.value)} />
|
||||
{errors.cpf && <p className="text-sm text-destructive">{errors.cpf}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="dataNascimento">Data de Nascimento</Label>
|
||||
<Input id="dataNascimento" type="date" value={formData.dataNascimento} onChange={e => handleInputChange("dataNascimento", e.target.value)} />
|
||||
{errors.dataNascimento && <p className="text-sm text-destructive">{errors.dataNascimento}</p>}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-lg font-semibold">Endereço</h2>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="cep">CEP</Label>
|
||||
<Input id="cep" value={formData.cep} onChange={e => handleInputChange("cep", e.target.value)} />
|
||||
{errors.cep && <p className="text-sm text-destructive">{errors.cep}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="logradouro">Logradouro</Label>
|
||||
<Input id="logradouro" value={formData.logradouro} onChange={e => handleInputChange("logradouro", e.target.value)} />
|
||||
{errors.logradouro && <p className="text-sm text-destructive">{errors.logradouro}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="numero">Número</Label>
|
||||
<Input id="numero" value={formData.numero} onChange={e => handleInputChange("numero", e.target.value)} />
|
||||
{errors.numero && <p className="text-sm text-destructive">{errors.numero}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="bairro">Bairro</Label>
|
||||
<Input id="bairro" value={formData.bairro} onChange={e => handleInputChange("bairro", e.target.value)} />
|
||||
{errors.bairro && <p className="text-sm text-destructive">{errors.bairro}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="cidade">Cidade</Label>
|
||||
<Input id="cidade" value={formData.cidade} onChange={e => handleInputChange("cidade", e.target.value)} />
|
||||
{errors.cidade && <p className="text-sm text-destructive">{errors.cidade}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="estado">Estado</Label>
|
||||
<Input id="estado" value={formData.estado} onChange={e => handleInputChange("estado", e.target.value)} />
|
||||
{errors.estado && <p className="text-sm text-destructive">{errors.estado}</p>}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-lg font-semibold">Observações</h2>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Label htmlFor="observacoes">Observações</Label>
|
||||
<Input id="observacoes" value={formData.observacoes} onChange={e => handleInputChange("observacoes", e.target.value)} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button type="button" variant="outline">Cancelar</Button>
|
||||
<Button type="submit">Cadastrar Médico</Button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@ -519,7 +519,7 @@ export function PatientRegistrationForm({
|
||||
{/* CPF e RG */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="cpf">CPF</Label>
|
||||
<Label htmlFor="cpf">CPF*</Label>
|
||||
<Input
|
||||
id="cpf"
|
||||
value={formData.cpf}
|
||||
@ -531,7 +531,7 @@ export function PatientRegistrationForm({
|
||||
{errors.cpf && <p className="text-sm text-destructive">{errors.cpf}</p>}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="rg">RG</Label>
|
||||
<Label htmlFor="rg">RG*</Label>
|
||||
<Input id="rg" value={formData.rg} onChange={(e) => handleInputChange("rg", e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
@ -572,21 +572,18 @@ export function PatientRegistrationForm({
|
||||
{/* Sexo e Data de Nascimento */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Sexo</Label>
|
||||
<RadioGroup value={formData.sexo} onValueChange={(value) => handleInputChange("sexo", value)}>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="masculino" id="masculino" />
|
||||
<Label htmlFor="masculino">Masculino</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="feminino" id="feminino" />
|
||||
<Label htmlFor="feminino">Feminino</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="outro" id="outro" />
|
||||
<Label htmlFor="outro">Outro</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
<Label>Sexo*</Label>
|
||||
<Select value={formData.sexo} onValueChange={(value) => handleInputChange("sexo", value)}>
|
||||
<SelectTrigger className={errors.sexo ? "border-destructive" : ""}>
|
||||
<SelectValue placeholder="Selecione o sexo" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="masculino">Masculino</SelectItem>
|
||||
<SelectItem value="feminino">Feminino</SelectItem>
|
||||
<SelectItem value="outro">Outro</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{errors.sexo && <p className="text-sm text-destructive">{errors.sexo}</p>}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="dataNascimento">Data de Nascimento</Label>
|
||||
@ -685,7 +682,7 @@ export function PatientRegistrationForm({
|
||||
{/* Dados dos Pais */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="nomeMae">Nome da Mãe</Label>
|
||||
<Label htmlFor="nomeMae">Nome da Mãe*</Label>
|
||||
<Input
|
||||
id="nomeMae"
|
||||
value={formData.nomeMae}
|
||||
@ -935,7 +932,7 @@ export function PatientRegistrationForm({
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="cep">CEP</Label>
|
||||
<Label htmlFor="cep">CEP*</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="cep"
|
||||
@ -966,7 +963,7 @@ export function PatientRegistrationForm({
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="numero">Número</Label>
|
||||
<Label htmlFor="numero">Número*</Label>
|
||||
<Input
|
||||
id="numero"
|
||||
value={formData.numero}
|
||||
@ -986,7 +983,7 @@ export function PatientRegistrationForm({
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="bairro">Bairro</Label>
|
||||
<Label htmlFor="bairro">Bairro*</Label>
|
||||
<Input
|
||||
id="bairro"
|
||||
value={formData.bairro}
|
||||
@ -997,7 +994,7 @@ export function PatientRegistrationForm({
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="cidade">Cidade</Label>
|
||||
<Label htmlFor="cidade">Cidade*</Label>
|
||||
<Input
|
||||
id="cidade"
|
||||
value={formData.cidade}
|
||||
@ -1207,20 +1204,17 @@ export function PatientRegistrationForm({
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Sexo</Label>
|
||||
<RadioGroup value={formData.sexo} onValueChange={(value) => handleInputChange("sexo", value)}>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="masculino" id="masculino" />
|
||||
<Label htmlFor="masculino">Masculino</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="feminino" id="feminino" />
|
||||
<Label htmlFor="feminino">Feminino</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="outro" id="outro" />
|
||||
<Label htmlFor="outro">Outro</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
<Select value={formData.sexo} onValueChange={(value) => handleInputChange("sexo", value)}>
|
||||
<SelectTrigger className={errors.sexo ? "border-destructive" : ""}>
|
||||
<SelectValue placeholder="Selecione o sexo" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="masculino">Masculino</SelectItem>
|
||||
<SelectItem value="feminino">Feminino</SelectItem>
|
||||
<SelectItem value="outro">Outro</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{errors.sexo && <p className="text-sm text-destructive">{errors.sexo}</p>}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="dataNascimento">Data de Nascimento</Label>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user