feat: add doctor register

susconecta/app/dashboard/medicos/novo/page.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { DoctorRegistrationForm } from '@/components/forms/doctor-registration-form';
+
+export default function NovoMedicoPage() {
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4">
+        <h1 className="text-2xl font-bold">Novo médico</h1>
+      </div>
+
+      <DoctorRegistrationForm
+        inline
+        mode="create"
+        onSaved={(p) => {
+          console.log("Saved", p);
+        }}
+        onClose={() => {
+          // In a real app, you'd likely redirect
+          window.history.back();
+        }}
+      />
+    </div>
+  );
+}

susconecta/app/dashboard/medicos/page.tsx

@@ -0,0 +1,63 @@
+
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Plus } from "lucide-react";
+
+const medicos = [
+  {
+    id: 1,
+    nome: "Dr. Carlos Andrade",
+    especialidade: "Cardiologia",
+    crm: "123456/SP",
+  },
+  {
+    id: 2,
+    nome: "Dra. Ana Souza",
+    especialidade: "Pediatria",
+    crm: "654321/RJ",
+  },
+];
+
+export default function MedicosPage() {
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-2xl font-bold text-foreground">Médicos</h1>
+          <p className="text-muted-foreground">Gerencie os médicos da sua clínica</p>
+        </div>
+        <Link href="/dashboard/medicos/novo">
+          <Button>
+            <Plus className="mr-2 h-4 w-4" />
+            Adicionar Médico
+          </Button>
+        </Link>
+      </div>
+
+      <div className="border rounded-lg">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Nome</TableHead>
+              <TableHead>Especialidade</TableHead>
+              <TableHead>CRM</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {medicos.map((medico) => (
+              <TableRow key={medico.id}>
+                <TableCell className="font-medium">{medico.nome}</TableCell>
+                <TableCell>{medico.especialidade}</TableCell>
+                <TableCell>{medico.crm}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}

susconecta/app/profissional/page.tsx

@@ -30,6 +30,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { DoctorRegistrationForm } from "@/components/forms/doctor-registration-form";
 
 
 import dynamic from "next/dynamic";
@@ -70,6 +71,7 @@ const ProfissionalPage = () => {
   const [editingEvent, setEditingEvent] = useState<any>(null);
   const [showPopup, setShowPopup] = useState(false);
   const [showActionModal, setShowActionModal] = useState(false);
+  const [showDoctorModal, setShowDoctorModal] = useState(false);
   const [step, setStep] = useState(1);
   const [newEvent, setNewEvent] = useState({ 
     title: "", 
@@ -294,9 +296,9 @@ const ProfissionalPage = () => {
                 Comunicação
               </a>
             </Button>
-            <Button variant="ghost" className="w-full justify-start cursor-pointer hover:bg-primary hover:text-primary-foreground">
+            <Button variant="ghost" className="w-full justify-start cursor-pointer hover:bg-primary hover:text-primary-foreground" onClick={() => setShowDoctorModal(true)}>
               <Settings className="mr-2 h-4 w-4" />
-              Meu Perfil
+              Cadastrar Médico
             </Button>
           </nav>
         </aside>
@@ -752,6 +754,21 @@ const ProfissionalPage = () => {
           </div>
         </div>
       )}
+    <DoctorRegistrationForm
+        open={showDoctorModal}
+        onOpenChange={setShowDoctorModal}
+        onSaved={() => {
+          setShowDoctorModal(false);
+        }}
+      />
+    )}
+    <DoctorRegistrationForm
+        open={showDoctorModal}
+        onOpenChange={setShowDoctorModal}
+        onSaved={() => {
+          setShowDoctorModal(false);
+        }}
+      />
     </div>
     </TooltipProvider>
   );

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

@@ -0,0 +1,499 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+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 { 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";
+
+// Mock data and types since API is not used for now
+export type Medico = {
+  id: string;
+  nome?: string;
+  nome_social?: string | null;
+  cpf?: string;
+  rg?: string | null;
+  sexo?: string | null;
+  data_nascimento?: string | null;
+  telefone?: string;
+  email?: string;
+  crm?: string;
+  especialidade?: string;
+  observacoes?: string | null;
+  foto_url?: string | null;
+};
+
+type Mode = "create" | "edit";
+
+export interface DoctorRegistrationFormProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  doctorId?: number | null;
+  inline?: boolean;
+  mode?: Mode;
+  onSaved?: (medico: Medico) => void;
+  onClose?: () => void;
+}
+
+type FormData = {
+  photo: File | null;
+  nome: string;
+  nome_social: string;
+  crm: string;
+  especialidade: string;
+  cpf: string;
+  rg: string;
+  sexo: string;
+  data_nascimento: string;
+  email: string;
+  telefone: string;
+  cep: string;
+  logradouro: string;
+  numero: string;
+  complemento: string;
+  bairro: string;
+  cidade: string;
+  estado: string;
+  observacoes: string;
+  anexos: File[];
+};
+
+const initial: FormData = {
+  photo: null,
+  nome: "",
+  nome_social: "",
+  crm: "",
+  especialidade: "",
+  cpf: "",
+  rg: "",
+  sexo: "",
+  data_nascimento: "",
+  email: "",
+  telefone: "",
+  cep: "",
+  logradouro: "",
+  numero: "",
+  complemento: "",
+  bairro: "",
+  cidade: "",
+  estado: "",
+  observacoes: "",
+  anexos: [],
+};
+
+export function DoctorRegistrationForm({
+  open = true,
+  onOpenChange,
+  doctorId = null,
+  inline = false,
+  mode = "create",
+  onSaved,
+  onClose,
+}: 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 [isSubmitting, setSubmitting] = useState(false);
+  const [isSearchingCEP, setSearchingCEP] = useState(false);
+  const [photoPreview, setPhotoPreview] = useState<string | null>(null);
+  const [serverAnexos, setServerAnexos] = useState<any[]>([]);
+
+  const title = useMemo(() => (mode === "create" ? "Cadastro de Médico" : "Editar Médico"), [mode]);
+
+  useEffect(() => {
+    // Data loading logic would go here in a real scenario
+    if (mode === "edit" && doctorId) {
+      console.log("Loading doctor data for ID:", doctorId);
+      // Example: setForm(loadedDoctorData);
+    }
+  }, [mode, doctorId]);
+
+  function setField<T extends keyof FormData>(k: T, v: FormData[T]) {
+    setForm((s) => ({ ...s, [k]: v }));
+    if (errors[k as string]) setErrors((e) => ({ ...e, [k]: "" }));
+  }
+
+  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 : ""}`);
+  }
+  function handleCPFChange(v: string) {
+    setField("cpf", formatCPF(v));
+  }
+
+  function formatCEP(v: string) {
+    const n = v.replace(/\D/g, "").slice(0, 8);
+    return n.replace(/(\d{5})(\d{0,3})/, (_, a, b) => `${a}${b ? "-" + b : ""}`);
+  }
+  async function fillFromCEP(cep: string) {
+    const clean = cep.replace(/\D/g, "");
+    if (clean.length !== 8) return;
+    setSearchingCEP(true);
+    try {
+      // Mocking API call
+      console.log("Searching CEP:", clean);
+      // In a real app: const res = await buscarCepAPI(clean);
+      // Mock response:
+      const res = { logradouro: "Rua Fictícia", bairro: "Bairro dos Sonhos", localidade: "Cidade Exemplo", uf: "EX" };
+      if (res) {
+        setField("logradouro", res.logradouro ?? "");
+        setField("bairro", res.bairro ?? "");
+        setField("cidade", res.localidade ?? "");
+        setField("estado", res.uf ?? "");
+      }
+    } catch {
+      setErrors((e) => ({ ...e, cep: "Erro ao buscar CEP" }));
+    } finally {
+      setSearchingCEP(false);
+    }
+  }
+
+  function validateLocal(): boolean {
+    const e: Record<string, string> = {};
+    if (!form.nome.trim()) e.nome = "Nome é obrigatório";
+    if (!form.cpf.trim()) e.cpf = "CPF é obrigatório";
+    if (!form.crm.trim()) e.crm = "CRM é obrigatório";
+    if (!form.especialidade.trim()) e.especialidade = "Especialidade é obrigatória";
+    setErrors(e);
+    return Object.keys(e).length === 0;
+  }
+
+  async function handleSubmit(ev: React.FormEvent) {
+    ev.preventDefault();
+    if (!validateLocal()) return;
+
+    setSubmitting(true);
+    console.log("Submitting form with data:", form);
+
+    // Simulate API call
+    setTimeout(() => {
+      setSubmitting(false);
+      const savedData: Medico = {
+        id: doctorId ? String(doctorId) : String(Date.now()),
+        ...form,
+      };
+      onSaved?.(savedData);
+      alert(mode === "create" ? "Médico cadastrado com sucesso! (simulado)" : "Médico atualizado com sucesso! (simulado)");
+      if (inline) onClose?.();
+      else onOpenChange?.(false);
+    }, 1000);
+  }
+
+  function handlePhoto(e: React.ChangeEvent<HTMLInputElement>) {
+    const f = e.target.files?.[0];
+    if (!f) return;
+    if (f.size > 5 * 1024 * 1024) {
+      setErrors((e) => ({ ...e, photo: "Arquivo muito grande. Máx 5MB." }));
+      return;
+    }
+    setField("photo", f);
+    const fr = new FileReader();
+    fr.onload = (ev) => setPhotoPreview(String(ev.target?.result || ""));
+    fr.readAsDataURL(f);
+  }
+
+  function addLocalAnexos(e: React.ChangeEvent<HTMLInputElement>) {
+    const fs = Array.from(e.target.files || []);
+    setField("anexos", [...form.anexos, ...fs]);
+  }
+  function removeLocalAnexo(idx: number) {
+    const clone = [...form.anexos];
+    clone.splice(idx, 1);
+    setField("anexos", clone);
+  }
+
+  const content = (
+    <>
+      {errors.submit && (
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>{errors.submit}</AlertDescription>
+        </Alert>
+      )}
+
+      <form onSubmit={handleSubmit} className="space-y-6">
+        <Collapsible open={expanded.dados} onOpenChange={() => setExpanded((s) => ({ ...s, dados: !s.dados }))}>
+          <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 Pessoais e Profissionais
+                  </span>
+                  {expanded.dados ? <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="flex items-center gap-4">
+                  <div className="w-24 h-24 border-2 border-dashed border-muted-foreground rounded-lg flex items-center justify-center overflow-hidden">
+                    {photoPreview ? (
+                      <img src={photoPreview} alt="Preview" className="w-full h-full object-cover" />
+                    ) : (
+                      <FileImage className="h-8 w-8 text-muted-foreground" />
+                    )}
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="photo" className="cursor-pointer">
+                      <Button type="button" variant="outline" asChild>
+                        <span>
+                          <Upload className="mr-2 h-4 w-4" /> Carregar Foto
+                        </span>
+                      </Button>
+                    </Label>
+                    <Input id="photo" type="file" accept="image/*" className="hidden" onChange={handlePhoto} />
+                    {errors.photo && <p className="text-sm text-destructive">{errors.photo}</p>}
+                    <p className="text-xs text-muted-foreground">Máximo 5MB</p>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label>Nome *</Label>
+                    <Input value={form.nome} onChange={(e) => setField("nome", e.target.value)} className={errors.nome ? "border-destructive" : ""} />
+                    {errors.nome && <p className="text-sm text-destructive">{errors.nome}</p>}
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Nome Social</Label>
+                    <Input value={form.nome_social} onChange={(e) => setField("nome_social", e.target.value)} />
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                        <Label>CRM *</Label>
+                        <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>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>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label>CPF *</Label>
+                    <Input
+                      value={form.cpf}
+                      onChange={(e) => handleCPFChange(e.target.value)}
+                      placeholder="000.000.000-00"
+                      maxLength={14}
+                      className={errors.cpf ? "border-destructive" : ""}
+                    />
+                    {errors.cpf && <p className="text-sm text-destructive">{errors.cpf}</p>}
+                  </div>
+                  <div className="space-y-2">
+                    <Label>RG</Label>
+                    <Input value={form.rg} onChange={(e) => setField("rg", e.target.value)} />
+                  </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)}>
+                      <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>
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Data de Nascimento</Label>
+                    <Input type="date" value={form.data_nascimento} onChange={(e) => setField("data_nascimento", e.target.value)} />
+                  </div>
+                </div>
+              </CardContent>
+            </CollapsibleContent>
+          </Card>
+        </Collapsible>
+
+        <Collapsible open={expanded.contato} onOpenChange={() => setExpanded((s) => ({ ...s, contato: !s.contato }))}>
+          <Card>
+            <CollapsibleTrigger asChild>
+              <CardHeader className="cursor-pointer hover:bg-muted/50 transition-colors">
+                <CardTitle className="flex items-center justify-between">
+                  <span>Contato</span>
+                  {expanded.contato ? <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>E-mail</Label>
+                    <Input value={form.email} onChange={(e) => setField("email", e.target.value)} />
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Telefone</Label>
+                    <Input value={form.telefone} onChange={(e) => setField("telefone", e.target.value)} />
+                  </div>
+                </div>
+              </CardContent>
+            </CollapsibleContent>
+          </Card>
+        </Collapsible>
+
+        <Collapsible open={expanded.endereco} onOpenChange={() => setExpanded((s) => ({ ...s, endereco: !s.endereco }))}>
+          <Card>
+            <CollapsibleTrigger asChild>
+              <CardHeader className="cursor-pointer hover:bg-muted/50 transition-colors">
+                <CardTitle className="flex items-center justify-between">
+                  <span>Endereço</span>
+                  {expanded.endereco ? <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-3 gap-4">
+                  <div className="space-y-2">
+                    <Label>CEP</Label>
+                    <div className="relative">
+                      <Input
+                        value={form.cep}
+                        onChange={(e) => {
+                          const v = formatCEP(e.target.value);
+                          setField("cep", v);
+                          if (v.replace(/\D/g, "").length === 8) fillFromCEP(v);
+                        }}
+                        placeholder="00000-000"
+                        maxLength={9}
+                        disabled={isSearchingCEP}
+                        className={errors.cep ? "border-destructive" : ""}
+                      />
+                      {isSearchingCEP && <Loader2 className="absolute right-3 top-3 h-4 w-4 animate-spin" />}
+                    </div>
+                    {errors.cep && <p className="text-sm text-destructive">{errors.cep}</p>}
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Logradouro</Label>
+                    <Input value={form.logradouro} onChange={(e) => setField("logradouro", e.target.value)} />
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Número</Label>
+                    <Input value={form.numero} onChange={(e) => setField("numero", e.target.value)} />
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label>Complemento</Label>
+                    <Input value={form.complemento} onChange={(e) => setField("complemento", e.target.value)} />
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Bairro</Label>
+                    <Input value={form.bairro} onChange={(e) => setField("bairro", e.target.value)} />
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label>Cidade</Label>
+                    <Input value={form.cidade} onChange={(e) => setField("cidade", e.target.value)} />
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Estado</Label>
+                    <Input value={form.estado} onChange={(e) => setField("estado", e.target.value)} placeholder="UF" />
+                  </div>
+                </div>
+              </CardContent>
+            </CollapsibleContent>
+          </Card>
+        </Collapsible>
+
+        <Collapsible open={expanded.obs} onOpenChange={() => setExpanded((s) => ({ ...s, obs: !s.obs }))}>
+          <Card>
+            <CollapsibleTrigger asChild>
+              <CardHeader className="cursor-pointer hover:bg-muted/50 transition-colors">
+                <CardTitle className="flex items-center justify-between">
+                  <span>Observações e Anexos</span>
+                  {expanded.obs ? <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="space-y-2">
+                  <Label>Observações</Label>
+                  <Textarea rows={4} value={form.observacoes} onChange={(e) => setField("observacoes", e.target.value)} />
+                </div>
+
+                <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">
+                      <div className="text-center">
+                        <Upload className="mx-auto h-7 w-7 mb-2" />
+                        <p className="text-sm text-muted-foreground">Clique para adicionar documentos (PDF, imagens, etc.)</p>
+                      </div>
+                    </Label>
+                    <Input id="anexos" type="file" multiple className="hidden" onChange={addLocalAnexos} />
+                  </div>
+
+                  {form.anexos.length > 0 && (
+                    <div className="space-y-2">
+                      {form.anexos.map((f, i) => (
+                        <div key={`${f.name}-${i}`} className="flex items-center justify-between p-2 border rounded">
+                          <span className="text-sm">{f.name}</span>
+                          <Button type="button" variant="ghost" size="sm" onClick={() => removeLocalAnexo(i)}>
+                            <X className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </CardContent>
+            </CollapsibleContent>
+          </Card>
+        </Collapsible>
+
+        <div className="flex justify-end gap-4 pt-6 border-t">
+          <Button type="button" variant="outline" onClick={() => (inline ? onClose?.() : onOpenChange?.(false))} disabled={isSubmitting}>
+            <XCircle className="mr-2 h-4 w-4" />
+            Cancelar
+          </Button>
+          <Button type="submit" disabled={isSubmitting}>
+            {isSubmitting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Save className="mr-2 h-4 w-4" />}
+            {isSubmitting ? "Salvando..." : mode === "create" ? "Salvar Médico" : "Atualizar Médico"}
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+
+  if (inline) return <div className="space-y-6">{content}</div>;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <User className="h-5 w-5" /> {title}
+          </DialogTitle>
+        </DialogHeader>
+        {content}
+      </DialogContent>
+    </Dialog>
+  );
+}