susconecta/app/globals.css

@@ -6,7 +6,7 @@
 :root {
   --background: #ffffff;
   --foreground: #475569;
-  --card: #f8fafc;
+  --card: #ffffff;
   --card-foreground: #334155;
   --popover: #ffffff;
   --popover-foreground: #475569;

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

@@ -5,14 +5,30 @@ 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 { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { AlertCircle, ChevronDown, ChevronUp, FileImage, Loader2, Save, Upload, User, X, XCircle, Trash2 } from "lucide-react";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
 
 // Mock data and types since API is not used for now
+
+type FormacaoAcademica = {
+  instituicao: string;
+  curso: string;
+  ano_conclusao: string;
+};
+
+type DadosBancarios = {
+  banco: string;
+  agencia: string;
+  conta: string;
+  tipo_conta: string;
+};
+
 export type Medico = {
   id: string;
   nome?: string;
@@ -22,11 +38,22 @@ export type Medico = {
   sexo?: string | null;
   data_nascimento?: string | null;
   telefone?: string;
+  celular?: string;
+  contato_emergencia?: string;
   email?: string;
   crm?: string;
+  estado_crm?: string;
+  rqe?: string;
+  formacao_academica?: FormacaoAcademica[];
+  curriculo_url?: string | null;
   especialidade?: string;
   observacoes?: string | null;
   foto_url?: string | null;
+  tipo_vinculo?: string;
+  dados_bancarios?: DadosBancarios;
+  
+  agenda_horario?: string;
+  valor_consulta?: number | string;
 };
 
 type Mode = "create" | "edit";
@@ -46,6 +73,10 @@ type FormData = {
   nome: string;
   nome_social: string;
   crm: string;
+  estado_crm: string;
+  rqe: string;
+  formacao_academica: FormacaoAcademica[];
+  curriculo: File | null;
   especialidade: string;
   cpf: string;
   rg: string;
@@ -53,6 +84,8 @@ type FormData = {
   data_nascimento: string;
   email: string;
   telefone: string;
+  celular: string;
+  contato_emergencia: string;
   cep: string;
   logradouro: string;
   numero: string;
@@ -62,6 +95,11 @@ type FormData = {
   estado: string;
   observacoes: string;
   anexos: File[];
+  tipo_vinculo: string;
+  dados_bancarios: DadosBancarios;
+  
+  agenda_horario: string;
+  valor_consulta: string;
 };
 
 const initial: FormData = {
@@ -69,6 +107,10 @@ const initial: FormData = {
   nome: "",
   nome_social: "",
   crm: "",
+  estado_crm: "",
+  rqe: "",
+  formacao_academica: [],
+  curriculo: null,
   especialidade: "",
   cpf: "",
   rg: "",
@@ -76,6 +118,8 @@ const initial: FormData = {
   data_nascimento: "",
   email: "",
   telefone: "",
+  celular: "",
+  contato_emergencia: "",
   cep: "",
   logradouro: "",
   numero: "",
@@ -85,8 +129,19 @@ const initial: FormData = {
   estado: "",
   observacoes: "",
   anexos: [],
+  tipo_vinculo: "",
+  dados_bancarios: {
+    banco: "",
+    agencia: "",
+    conta: "",
+    tipo_conta: "",
+  },
+  agenda_horario: "",
+  valor_consulta: "",
 };
 
+
+
 export function DoctorRegistrationForm({
   open = true,
   onOpenChange,
@@ -98,7 +153,7 @@ export function DoctorRegistrationForm({
 }: DoctorRegistrationFormProps) {
   const [form, setForm] = useState<FormData>(initial);
   const [errors, setErrors] = useState<Record<string, string>>({});
-  const [expanded, setExpanded] = useState({ dados: true, contato: false, endereco: false, obs: false });
+  const [expanded, setExpanded] = useState({ dados: true, contato: false, endereco: false, obs: false, formacao: false, admin: false });
   const [isSubmitting, setSubmitting] = useState(false);
   const [isSearchingCEP, setSearchingCEP] = useState(false);
   const [photoPreview, setPhotoPreview] = useState<string | null>(null);
@@ -119,6 +174,44 @@ export function DoctorRegistrationForm({
     if (errors[k as string]) setErrors((e) => ({ ...e, [k]: "" }));
   }
 
+
+  function addFormacao() {
+    setField("formacao_academica", [
+      ...form.formacao_academica,
+      { instituicao: "", curso: "", ano_conclusao: "" },
+    ]);
+  }
+
+  function removeFormacao(index: number) {
+    const newFormacao = [...form.formacao_academica];
+    newFormacao.splice(index, 1);
+    setField("formacao_academica", newFormacao);
+  }
+
+  function handleFormacaoChange(index: number, field: keyof FormacaoAcademica, value: string) {
+    const newFormacao = [...form.formacao_academica];
+    newFormacao[index][field] = value;
+    setField("formacao_academica", newFormacao);
+  }
+
+  function formatPhone(v: string) {
+    const n = v.replace(/\D/g, "").slice(0, 11);
+    if (n.length > 6) {
+      return n.replace(/(\d{2})(\d{5})(\d{0,4})/, "($1) $2-$3");
+    } else if (n.length > 2) {
+      return n.replace(/(\d{2})(\d{0,5})/, "($1) $2");
+    }
+    return n;
+  }
+
+  function formatRG(v: string) {
+    v = v.replace(/\D/g, "").slice(0, 9);
+    v = v.replace(/(\d{2})(\d)/, "$1.$2");
+    v = v.replace(/(\d{3})(\d)/, "$1.$2");
+    v = v.replace(/(\d{3})(\d{1,2})$/, "$1-$2");
+    return v;
+  }
+
   function formatCPF(v: string) {
     const n = v.replace(/\D/g, "").slice(0, 11);
     return n.replace(/(\d{3})(\d{3})(\d{3})(\d{0,2})/, (_, a, b, c, d) => `${a}.${b}.${c}${d ? "-" + d : ""}`);
@@ -273,11 +366,44 @@ export function DoctorRegistrationForm({
                         <Input value={form.crm} onChange={(e) => setField("crm", e.target.value)} className={errors.crm ? "border-destructive" : ""} />
                         {errors.crm && <p className="text-sm text-destructive">{errors.crm}</p>}
                     </div>
+                    <div className="space-y-2">
+                        <Label>Estado do CRM</Label>
+                        <Input value={form.estado_crm} onChange={(e) => setField("estado_crm", e.target.value)} />
+                    </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
                     <div className="space-y-2">
                         <Label>Especialidade *</Label>
                         <Input value={form.especialidade} onChange={(e) => setField("especialidade", e.target.value)} className={errors.especialidade ? "border-destructive" : ""} />
                         {errors.especialidade && <p className="text-sm text-destructive">{errors.especialidade}</p>}
                     </div>
+                    <div className="space-y-2">
+                        <Label>RQE</Label>
+                        <Input value={form.rqe} onChange={(e) => setField("rqe", e.target.value)} />
+                    </div>
+                </div>
+
+                <div className="space-y-2">
+                    <Label>Currículo</Label>
+                    <div className="flex items-center gap-2">
+                        <Label htmlFor="curriculo-input" className="cursor-pointer">
+                            <Button type="button" variant="outline" asChild>
+                                <span>
+                                    <Upload className="mr-2 h-4 w-4" />
+                                    Anexar PDF ou DOC
+                                </span>
+                            </Button>
+                        </Label>
+                        <Input
+                            id="curriculo-input"
+                            type="file"
+                            className="hidden"
+                            onChange={(e) => setField("curriculo", e.target.files?.[0] || null)}
+                            accept=".pdf,.doc,.docx"
+                        />
+                        {form.curriculo && <span className="text-sm text-muted-foreground">{form.curriculo.name}</span>}
+                    </div>
                 </div>
 
                 <div className="grid grid-cols-2 gap-4">
@@ -294,27 +420,27 @@ export function DoctorRegistrationForm({
                   </div>
                   <div className="space-y-2">
                     <Label>RG</Label>
-                    <Input value={form.rg} onChange={(e) => setField("rg", e.target.value)} />
+                    <Input 
+                      value={form.rg} 
+                      onChange={(e) => setField("rg", formatRG(e.target.value))}
+                      maxLength={12}
+                    />
                   </div>
                 </div>
 
                 <div className="grid grid-cols-2 gap-4">
                   <div className="space-y-2">
                     <Label>Sexo</Label>
-                    <RadioGroup value={form.sexo} onValueChange={(v) => setField("sexo", v)}>
+                    <Select value={form.sexo} onValueChange={(v) => setField("sexo", v)}>
-                      <div className="flex items-center space-x-2">
+                      <SelectTrigger>
-                        <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" />
-                        <Label htmlFor="outro">Outro</Label>
-                      </div>
-                    </RadioGroup>
                   </div>
                   <div className="space-y-2">
                     <Label>Data de Nascimento</Label>
@@ -326,6 +452,68 @@ export function DoctorRegistrationForm({
           </Card>
         </Collapsible>
 
+        <Collapsible open={expanded.formacao} onOpenChange={() => setExpanded((s) => ({ ...s, formacao: !s.formacao }))}>
+          <Card>
+            <CollapsibleTrigger asChild>
+              <CardHeader className="cursor-pointer hover:bg-muted/50 transition-colors">
+                <CardTitle className="flex items-center justify-between">
+                  <span className="flex items-center gap-2">
+                    <User className="h-4 w-4" />
+                    Formação Acadêmica
+                  </span>
+                  {expanded.formacao ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+                </CardTitle>
+              </CardHeader>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <CardContent className="space-y-4 pt-4">
+                {form.formacao_academica.map((formacao, index) => (
+                  <div key={index} className="grid grid-cols-4 gap-4 items-center">
+                    <div className="space-y-2 col-span-2">
+                      <Label>Instituição</Label>
+                      <Input
+                        value={formacao.instituicao}
+                        onChange={(e) =>
+                          handleFormacaoChange(index, "instituicao", e.target.value)
+                        }
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label>Curso</Label>
+                      <Input
+                        value={formacao.curso}
+                        onChange={(e) =>
+                          handleFormacaoChange(index, "curso", e.target.value)
+                        }
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label>Ano de Conclusão</Label>
+                      <Input
+                        value={formacao.ano_conclusao}
+                        onChange={(e) =>
+                          handleFormacaoChange(index, "ano_conclusao", e.target.value)
+                        }
+                      />
+                    </div>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => removeFormacao(index)}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                ))}
+                <Button type="button" variant="outline" onClick={addFormacao}>
+                  Adicionar Formação
+                </Button>
+              </CardContent>
+            </CollapsibleContent>
+          </Card>
+        </Collapsible>
+
         <Collapsible open={expanded.contato} onOpenChange={() => setExpanded((s) => ({ ...s, contato: !s.contato }))}>
           <Card>
             <CollapsibleTrigger asChild>
@@ -345,9 +533,130 @@ export function DoctorRegistrationForm({
                   </div>
                   <div className="space-y-2">
                     <Label>Telefone</Label>
-                    <Input value={form.telefone} onChange={(e) => setField("telefone", e.target.value)} />
+                    <Input 
+                      value={form.telefone} 
+                      onChange={(e) => setField("telefone", formatPhone(e.target.value))}
+                      placeholder="(XX) XXXXX-XXXX"
+                    />
                   </div>
                 </div>
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label>Celular</Label>
+                    <Input 
+                      value={form.celular} 
+                      onChange={(e) => setField("celular", formatPhone(e.target.value))}
+                      placeholder="(XX) XXXXX-XXXX"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Contato de Emergência</Label>
+                    <Input 
+                      value={form.contato_emergencia} 
+                      onChange={(e) => setField("contato_emergencia", formatPhone(e.target.value))}
+                      placeholder="(XX) XXXXX-XXXX"
+                    />
+                  </div>
+                </div>
+              </CardContent>
+            </CollapsibleContent>
+          </Card>
+        </Collapsible>
+
+        <Collapsible open={expanded.admin} onOpenChange={() => setExpanded((s) => ({ ...s, admin: !s.admin }))}>
+          <Card>
+            <CollapsibleTrigger asChild>
+              <CardHeader className="cursor-pointer hover:bg-muted/50 transition-colors">
+                <CardTitle className="flex items-center justify-between">
+                  <span className="flex items-center gap-2">
+                    <User className="h-4 w-4" />
+                    Dados Administrativos e Financeiros
+                  </span>
+                  {expanded.admin ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+                </CardTitle>
+              </CardHeader>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <CardContent className="space-y-4 pt-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label>Tipo de Vínculo</Label>
+                    <Select value={form.tipo_vinculo} onValueChange={(v) => setField("tipo_vinculo", v)}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Selecione o vínculo" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="funcionario">Funcionário</SelectItem>
+                        <SelectItem value="autonomo">Autônomo</SelectItem>
+                        <SelectItem value="parceiro">Parceiro</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Valor da Consulta</Label>
+                    <Input
+                      type="number"
+                      value={form.valor_consulta}
+                      onChange={(e) => setField("valor_consulta", e.target.value)}
+                      placeholder="R$ 0,00"
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <Label>Agenda/Horário</Label>
+                  <Textarea
+                    value={form.agenda_horario}
+                    onChange={(e) => setField("agenda_horario", e.target.value)}
+                    placeholder="Descreva os dias e horários de atendimento"
+                  />
+                </div>
+
+                <div className="space-y-4">
+                  <Label>Dados Bancários</Label>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Label>Banco</Label>
+                      <Input
+                        value={form.dados_bancarios.banco}
+                        onChange={(e) => setField("dados_bancarios", { ...form.dados_bancarios, banco: e.target.value })}
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label>Agência</Label>
+                      <Input
+                        value={form.dados_bancarios.agencia}
+                        onChange={(e) => setField("dados_bancarios", { ...form.dados_bancarios, agencia: e.target.value })}
+                      />
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Label>Conta</Label>
+                      <Input
+                        value={form.dados_bancarios.conta}
+                        onChange={(e) => setField("dados_bancarios", { ...form.dados_bancarios, conta: e.target.value })}
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label>Tipo de Conta</Label>
+                      <Select
+                        value={form.dados_bancarios.tipo_conta}
+                        onValueChange={(v) => setField("dados_bancarios", { ...form.dados_bancarios, tipo_conta: v })}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Selecione o tipo" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="corrente">Conta Corrente</SelectItem>
+                          <SelectItem value="poupanca">Conta Poupança</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+
+                
               </CardContent>
             </CollapsibleContent>
           </Card>
@@ -441,9 +750,9 @@ export function DoctorRegistrationForm({
                 <div className="space-y-2">
                   <Label>Adicionar anexos</Label>
                   <div className="border-2 border-dashed rounded-lg p-4">
-                    <Label htmlFor="anexos" className="cursor-pointer">
+                    <Label htmlFor="anexos" className="cursor-pointer block w-full">
-                      <div className="text-center">
+                      <div className="flex flex-col items-center justify-center text-center">
-                        <Upload className="mx-auto h-7 w-7 mb-2" />
+                        <Upload className="h-7 w-7 mb-2" />
                         <p className="text-sm text-muted-foreground">Clique para adicionar documentos (PDF, imagens, etc.)</p>
                       </div>
                     </Label>

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

@@ -6,7 +6,7 @@ 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 { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { Alert, AlertDescription } from "@/components/ui/alert";
@@ -395,20 +395,16 @@ export function PatientRegistrationForm({
                 <div className="grid grid-cols-2 gap-4">
                   <div className="space-y-2">
                     <Label>Sexo</Label>
-                    <RadioGroup value={form.sexo} onValueChange={(v) => setField("sexo", v)}>
+                    <Select value={form.sexo} onValueChange={(v) => setField("sexo", v)}>
-                      <div className="flex items-center space-x-2">
+                      <SelectTrigger>
-                        <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" />
-                        <Label htmlFor="outro">Outro</Label>
-                      </div>
-                    </RadioGroup>
                   </div>
                   <div className="space-y-2">
                     <Label>Data de Nascimento</Label>
@@ -538,9 +534,9 @@ export function PatientRegistrationForm({
                 <div className="space-y-2">
                   <Label>Adicionar anexos</Label>
                   <div className="border-2 border-dashed rounded-lg p-4">
-                    <Label htmlFor="anexos" className="cursor-pointer">
+                    <Label htmlFor="anexos" className="cursor-pointer block w-full">
-                      <div className="text-center">
+                      <div className="flex flex-col items-center justify-center text-center">
-                        <Upload className="mx-auto h-7 w-7 mb-2" />
+                        <Upload className="h-7 w-7 mb-2" />
                         <p className="text-sm text-muted-foreground">Clique para adicionar documentos (PDF, imagens, etc.)</p>
                       </div>
                     </Label>

susconecta/components/ui/popover.tsx

@@ -30,7 +30,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          "bg-white text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[9999] w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md",
           className
         )}
         {...props}