feat:change gender input to select dropdown

susconecta/components/forms/doctor-registration-form.tsx

@@ -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>
+  )
+}

susconecta/components/forms/patient-registration-form.tsx

@@ -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>
+                      <Label>Sexo*</Label>
-                      <RadioGroup value={formData.sexo} onValueChange={(value) => handleInputChange("sexo", value)}>
+                      <Select value={formData.sexo} onValueChange={(value) => handleInputChange("sexo", value)}>
-                        <div className="flex items-center space-x-2">
+                        <SelectTrigger className={errors.sexo ? "border-destructive" : ""}>
-                          <RadioGroupItem value="masculino" id="masculino" />
+                          <SelectValue placeholder="Selecione o sexo" />
-                          <Label htmlFor="masculino">Masculino</Label>
+                        </SelectTrigger>
-                        </div>
+                        <SelectContent>
-                        <div className="flex items-center space-x-2">
+                          <SelectItem value="masculino">Masculino</SelectItem>
-                          <RadioGroupItem value="feminino" id="feminino" />
+                          <SelectItem value="feminino">Feminino</SelectItem>
-                          <Label htmlFor="feminino">Feminino</Label>
+                          <SelectItem value="outro">Outro</SelectItem>
-                        </div>
+                        </SelectContent>
-                        <div className="flex items-center space-x-2">
+                      </Select>
-                          <RadioGroupItem value="outro" id="outro" />
+                      {errors.sexo && <p className="text-sm text-destructive">{errors.sexo}</p>}
-                          <Label htmlFor="outro">Outro</Label>
-                        </div>
-                      </RadioGroup>
                     </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)}>
+                      <Select value={formData.sexo} onValueChange={(value) => handleInputChange("sexo", value)}>
-                        <div className="flex items-center space-x-2">
+                        <SelectTrigger className={errors.sexo ? "border-destructive" : ""}>
-                          <RadioGroupItem value="masculino" id="masculino" />
+                          <SelectValue placeholder="Selecione o sexo" />
-                          <Label htmlFor="masculino">Masculino</Label>
+                        </SelectTrigger>
-                        </div>
+                        <SelectContent>
-                        <div className="flex items-center space-x-2">
+                          <SelectItem value="masculino">Masculino</SelectItem>
-                          <RadioGroupItem value="feminino" id="feminino" />
+                          <SelectItem value="feminino">Feminino</SelectItem>
-                          <Label htmlFor="feminino">Feminino</Label>
+                          <SelectItem value="outro">Outro</SelectItem>
-                        </div>
+                        </SelectContent>
-                        <div className="flex items-center space-x-2">
+                      </Select>
-                          <RadioGroupItem value="outro" id="outro" />
+                      {errors.sexo && <p className="text-sm text-destructive">{errors.sexo}</p>}
-                          <Label htmlFor="outro">Outro</Label>
-                        </div>
-                      </RadioGroup>
                     </div>
                     <div className="space-y-2">
                       <Label htmlFor="dataNascimento">Data de Nascimento</Label>