forked from RiseUP/riseup-squad21
Adicionado CRUD médicos pro gestor
This commit is contained in:
parent
c44532ad92
commit
4cdbde18f7
686
app/manager/home/[id]/editar/page.tsx
Normal file
686
app/manager/home/[id]/editar/page.tsx
Normal file
@ -0,0 +1,686 @@
|
||||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { useRouter, useParams } from "next/navigation"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { ArrowLeft, Save } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import ManagerLayout from "@/components/manager-layout"
|
||||
|
||||
// Mock data - in a real app, this would come from an API
|
||||
const mockDoctors = [
|
||||
{
|
||||
id: 1,
|
||||
nome: "Dr. Carlos Silva",
|
||||
cpf: "123.456.789-00",
|
||||
rg: "12.345.678-9",
|
||||
sexo: "masculino",
|
||||
dataNascimento: "1980-05-15",
|
||||
etnia: "branca",
|
||||
raca: "caucasiana",
|
||||
naturalidade: "Aracaju",
|
||||
nacionalidade: "brasileira",
|
||||
profissao: "Médico",
|
||||
estadoCivil: "casado",
|
||||
nomeMae: "Ana Silva",
|
||||
nomePai: "José Silva",
|
||||
nomeEsposo: "Maria Silva",
|
||||
crm: "CRM/SE 12345",
|
||||
especialidade: "Cardiologia",
|
||||
email: "carlos@email.com",
|
||||
celular: "(79) 99999-1234",
|
||||
telefone1: "(79) 3214-5678",
|
||||
telefone2: "",
|
||||
cep: "49000-000",
|
||||
endereco: "Rua dos Médicos, 123",
|
||||
numero: "123",
|
||||
complemento: "Sala 101",
|
||||
bairro: "Centro",
|
||||
cidade: "Aracaju",
|
||||
estado: "SE",
|
||||
tipoSanguineo: "A+",
|
||||
peso: "80",
|
||||
altura: "1.80",
|
||||
alergias: "Nenhuma alergia conhecida",
|
||||
convenio: "Particular",
|
||||
plano: "Premium",
|
||||
numeroMatricula: "123456789",
|
||||
validadeCarteira: "2025-12-31",
|
||||
observacoes: "Médico experiente",
|
||||
},
|
||||
]
|
||||
|
||||
export default function EditarMedicoPage() {
|
||||
const router = useRouter()
|
||||
const params = useParams()
|
||||
const doctorId = Number.parseInt(params.id as string)
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
nome: "",
|
||||
cpf: "",
|
||||
rg: "",
|
||||
sexo: "",
|
||||
dataNascimento: "",
|
||||
etnia: "",
|
||||
raca: "",
|
||||
naturalidade: "",
|
||||
nacionalidade: "",
|
||||
profissao: "",
|
||||
estadoCivil: "",
|
||||
nomeMae: "",
|
||||
nomePai: "",
|
||||
nomeEsposo: "",
|
||||
crm: "",
|
||||
especialidade: "",
|
||||
email: "",
|
||||
celular: "",
|
||||
telefone1: "",
|
||||
telefone2: "",
|
||||
cep: "",
|
||||
endereco: "",
|
||||
numero: "",
|
||||
complemento: "",
|
||||
bairro: "",
|
||||
cidade: "",
|
||||
estado: "",
|
||||
tipoSanguineo: "",
|
||||
peso: "",
|
||||
altura: "",
|
||||
alergias: "",
|
||||
convenio: "",
|
||||
plano: "",
|
||||
numeroMatricula: "",
|
||||
validadeCarteira: "",
|
||||
observacoes: "",
|
||||
})
|
||||
|
||||
const [isGuiaConvenio, setIsGuiaConvenio] = useState(false)
|
||||
const [validadeIndeterminada, setValidadeIndeterminada] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
// Load doctor data
|
||||
const doctor = mockDoctors.find((d) => d.id === doctorId)
|
||||
if (doctor) {
|
||||
setFormData(doctor)
|
||||
}
|
||||
}, [doctorId])
|
||||
|
||||
const handleInputChange = (field: string, value: string) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }))
|
||||
}
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
console.log("[v0] Updating doctor:", formData)
|
||||
// Here you would typically send the data to your API
|
||||
router.push("/medicos")
|
||||
}
|
||||
|
||||
return (
|
||||
<ManagerLayout>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="/manager/home">
|
||||
<Button variant="ghost" size="sm">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Voltar
|
||||
</Button>
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Editar Médico</h1>
|
||||
<p className="text-gray-600">Atualize as informações do médico</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-8">
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-6">Dados Pessoais</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="nome">Nome *</Label>
|
||||
<Input
|
||||
id="nome"
|
||||
value={formData.nome}
|
||||
onChange={(e) => handleInputChange("nome", e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="cpf">CPF *</Label>
|
||||
<Input
|
||||
id="cpf"
|
||||
value={formData.cpf}
|
||||
onChange={(e) => handleInputChange("cpf", e.target.value)}
|
||||
placeholder="000.000.000-00"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="rg">RG</Label>
|
||||
<Input
|
||||
id="rg"
|
||||
value={formData.rg}
|
||||
onChange={(e) => handleInputChange("rg", e.target.value)}
|
||||
placeholder="00.000.000-0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Sexo *</Label>
|
||||
<div className="flex gap-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="radio"
|
||||
id="masculino"
|
||||
name="sexo"
|
||||
value="masculino"
|
||||
checked={formData.sexo === "masculino"}
|
||||
onChange={(e) => handleInputChange("sexo", e.target.value)}
|
||||
className="w-4 h-4 text-blue-600"
|
||||
/>
|
||||
<Label htmlFor="masculino">Masculino</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="radio"
|
||||
id="feminino"
|
||||
name="sexo"
|
||||
value="feminino"
|
||||
checked={formData.sexo === "feminino"}
|
||||
onChange={(e) => handleInputChange("sexo", e.target.value)}
|
||||
className="w-4 h-4 text-blue-600"
|
||||
/>
|
||||
<Label htmlFor="feminino">Feminino</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="dataNascimento">Data de nascimento *</Label>
|
||||
<Input
|
||||
id="dataNascimento"
|
||||
type="date"
|
||||
value={formData.dataNascimento}
|
||||
onChange={(e) => handleInputChange("dataNascimento", e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="etnia">Etnia</Label>
|
||||
<Select value={formData.etnia} onValueChange={(value) => handleInputChange("etnia", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="branca">Branca</SelectItem>
|
||||
<SelectItem value="preta">Preta</SelectItem>
|
||||
<SelectItem value="parda">Parda</SelectItem>
|
||||
<SelectItem value="amarela">Amarela</SelectItem>
|
||||
<SelectItem value="indigena">Indígena</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="raca">Raça</Label>
|
||||
<Select value={formData.raca} onValueChange={(value) => handleInputChange("raca", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="caucasiana">Caucasiana</SelectItem>
|
||||
<SelectItem value="negroide">Negroide</SelectItem>
|
||||
<SelectItem value="mongoloide">Mongoloide</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="naturalidade">Naturalidade</Label>
|
||||
<Input
|
||||
id="naturalidade"
|
||||
value={formData.naturalidade}
|
||||
onChange={(e) => handleInputChange("naturalidade", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="nacionalidade">Nacionalidade</Label>
|
||||
<Select
|
||||
value={formData.nacionalidade}
|
||||
onValueChange={(value) => handleInputChange("nacionalidade", value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="brasileira">Brasileira</SelectItem>
|
||||
<SelectItem value="estrangeira">Estrangeira</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="profissao">Profissão</Label>
|
||||
<Input
|
||||
id="profissao"
|
||||
value={formData.profissao}
|
||||
onChange={(e) => handleInputChange("profissao", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="estadoCivil">Estado civil</Label>
|
||||
<Select value={formData.estadoCivil} onValueChange={(value) => handleInputChange("estadoCivil", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="solteiro">Solteiro(a)</SelectItem>
|
||||
<SelectItem value="casado">Casado(a)</SelectItem>
|
||||
<SelectItem value="divorciado">Divorciado(a)</SelectItem>
|
||||
<SelectItem value="viuvo">Viúvo(a)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="nomeMae">Nome da mãe</Label>
|
||||
<Input
|
||||
id="nomeMae"
|
||||
value={formData.nomeMae}
|
||||
onChange={(e) => handleInputChange("nomeMae", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="nomePai">Nome do pai</Label>
|
||||
<Input
|
||||
id="nomePai"
|
||||
value={formData.nomePai}
|
||||
onChange={(e) => handleInputChange("nomePai", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="nomeEsposo">Nome do esposo(a)</Label>
|
||||
<Input
|
||||
id="nomeEsposo"
|
||||
value={formData.nomeEsposo}
|
||||
onChange={(e) => handleInputChange("nomeEsposo", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="guiaConvenio"
|
||||
checked={isGuiaConvenio}
|
||||
onCheckedChange={(checked) => setIsGuiaConvenio(checked === true)}
|
||||
/>
|
||||
<Label htmlFor="guiaConvenio">RN na Guia do convênio</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<Label htmlFor="observacoes">Observações</Label>
|
||||
<Textarea
|
||||
id="observacoes"
|
||||
value={formData.observacoes}
|
||||
onChange={(e) => handleInputChange("observacoes", e.target.value)}
|
||||
placeholder="Digite observações sobre o médico..."
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Professional Information Section */}
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-6">Informações Profissionais</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="crm">CRM *</Label>
|
||||
<Input
|
||||
id="crm"
|
||||
value={formData.crm}
|
||||
onChange={(e) => handleInputChange("crm", e.target.value)}
|
||||
placeholder="CRM/UF 12345"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="especialidade">Especialidade *</Label>
|
||||
<Select
|
||||
value={formData.especialidade}
|
||||
onValueChange={(value) => handleInputChange("especialidade", value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione a especialidade" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Cardiologia">Cardiologia</SelectItem>
|
||||
<SelectItem value="Pediatria">Pediatria</SelectItem>
|
||||
<SelectItem value="Ortopedia">Ortopedia</SelectItem>
|
||||
<SelectItem value="Neurologia">Neurologia</SelectItem>
|
||||
<SelectItem value="Ginecologia">Ginecologia</SelectItem>
|
||||
<SelectItem value="Dermatologia">Dermatologia</SelectItem>
|
||||
<SelectItem value="Psiquiatria">Psiquiatria</SelectItem>
|
||||
<SelectItem value="Oftalmologia">Oftalmologia</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Section */}
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-6">Contato</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">E-mail</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleInputChange("email", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="celular">Celular</Label>
|
||||
<Input
|
||||
id="celular"
|
||||
value={formData.celular}
|
||||
onChange={(e) => handleInputChange("celular", e.target.value)}
|
||||
placeholder="(00) 00000-0000"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="telefone1">Telefone 1</Label>
|
||||
<Input
|
||||
id="telefone1"
|
||||
value={formData.telefone1}
|
||||
onChange={(e) => handleInputChange("telefone1", e.target.value)}
|
||||
placeholder="(00) 0000-0000"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="telefone2">Telefone 2</Label>
|
||||
<Input
|
||||
id="telefone2"
|
||||
value={formData.telefone2}
|
||||
onChange={(e) => handleInputChange("telefone2", e.target.value)}
|
||||
placeholder="(00) 0000-0000"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Address Section */}
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-6">Endereço</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="cep">CEP</Label>
|
||||
<Input
|
||||
id="cep"
|
||||
value={formData.cep}
|
||||
onChange={(e) => handleInputChange("cep", e.target.value)}
|
||||
placeholder="00000-000"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="endereco">Endereço</Label>
|
||||
<Input
|
||||
id="endereco"
|
||||
value={formData.endereco}
|
||||
onChange={(e) => handleInputChange("endereco", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="numero">Número</Label>
|
||||
<Input
|
||||
id="numero"
|
||||
value={formData.numero}
|
||||
onChange={(e) => handleInputChange("numero", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="complemento">Complemento</Label>
|
||||
<Input
|
||||
id="complemento"
|
||||
value={formData.complemento}
|
||||
onChange={(e) => handleInputChange("complemento", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="bairro">Bairro</Label>
|
||||
<Input
|
||||
id="bairro"
|
||||
value={formData.bairro}
|
||||
onChange={(e) => handleInputChange("bairro", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="cidade">Cidade</Label>
|
||||
<Input
|
||||
id="cidade"
|
||||
value={formData.cidade}
|
||||
onChange={(e) => handleInputChange("cidade", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="estado">Estado</Label>
|
||||
<Select value={formData.estado} onValueChange={(value) => handleInputChange("estado", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="AC">Acre</SelectItem>
|
||||
<SelectItem value="AL">Alagoas</SelectItem>
|
||||
<SelectItem value="AP">Amapá</SelectItem>
|
||||
<SelectItem value="AM">Amazonas</SelectItem>
|
||||
<SelectItem value="BA">Bahia</SelectItem>
|
||||
<SelectItem value="CE">Ceará</SelectItem>
|
||||
<SelectItem value="DF">Distrito Federal</SelectItem>
|
||||
<SelectItem value="ES">Espírito Santo</SelectItem>
|
||||
<SelectItem value="GO">Goiás</SelectItem>
|
||||
<SelectItem value="MA">Maranhão</SelectItem>
|
||||
<SelectItem value="MT">Mato Grosso</SelectItem>
|
||||
<SelectItem value="MS">Mato Grosso do Sul</SelectItem>
|
||||
<SelectItem value="MG">Minas Gerais</SelectItem>
|
||||
<SelectItem value="PA">Pará</SelectItem>
|
||||
<SelectItem value="PB">Paraíba</SelectItem>
|
||||
<SelectItem value="PR">Paraná</SelectItem>
|
||||
<SelectItem value="PE">Pernambuco</SelectItem>
|
||||
<SelectItem value="PI">Piauí</SelectItem>
|
||||
<SelectItem value="RJ">Rio de Janeiro</SelectItem>
|
||||
<SelectItem value="RN">Rio Grande do Norte</SelectItem>
|
||||
<SelectItem value="RS">Rio Grande do Sul</SelectItem>
|
||||
<SelectItem value="RO">Rondônia</SelectItem>
|
||||
<SelectItem value="RR">Roraima</SelectItem>
|
||||
<SelectItem value="SC">Santa Catarina</SelectItem>
|
||||
<SelectItem value="SP">São Paulo</SelectItem>
|
||||
<SelectItem value="SE">Sergipe</SelectItem>
|
||||
<SelectItem value="TO">Tocantins</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Medical Information Section */}
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-6">Informações Médicas</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="tipoSanguineo">Tipo Sanguíneo</Label>
|
||||
<Select
|
||||
value={formData.tipoSanguineo}
|
||||
onValueChange={(value) => handleInputChange("tipoSanguineo", value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="A+">A+</SelectItem>
|
||||
<SelectItem value="A-">A-</SelectItem>
|
||||
<SelectItem value="B+">B+</SelectItem>
|
||||
<SelectItem value="B-">B-</SelectItem>
|
||||
<SelectItem value="AB+">AB+</SelectItem>
|
||||
<SelectItem value="AB-">AB-</SelectItem>
|
||||
<SelectItem value="O+">O+</SelectItem>
|
||||
<SelectItem value="O-">O-</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="peso">Peso (kg)</Label>
|
||||
<Input
|
||||
id="peso"
|
||||
type="number"
|
||||
value={formData.peso}
|
||||
onChange={(e) => handleInputChange("peso", e.target.value)}
|
||||
placeholder="0.0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="altura">Altura (m)</Label>
|
||||
<Input
|
||||
id="altura"
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={formData.altura}
|
||||
onChange={(e) => handleInputChange("altura", e.target.value)}
|
||||
placeholder="0.00"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>IMC</Label>
|
||||
<Input
|
||||
value={
|
||||
formData.peso && formData.altura
|
||||
? (Number.parseFloat(formData.peso) / Number.parseFloat(formData.altura) ** 2).toFixed(2)
|
||||
: ""
|
||||
}
|
||||
disabled
|
||||
placeholder="Calculado automaticamente"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<Label htmlFor="alergias">Alergias</Label>
|
||||
<Textarea
|
||||
id="alergias"
|
||||
value={formData.alergias}
|
||||
onChange={(e) => handleInputChange("alergias", e.target.value)}
|
||||
placeholder="Ex: AAS, Dipirona, etc."
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Insurance Information Section */}
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-6">Informações de convênio</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="convenio">Convênio</Label>
|
||||
<Select value={formData.convenio} onValueChange={(value) => handleInputChange("convenio", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Particular">Particular</SelectItem>
|
||||
<SelectItem value="SUS">SUS</SelectItem>
|
||||
<SelectItem value="Unimed">Unimed</SelectItem>
|
||||
<SelectItem value="Bradesco">Bradesco Saúde</SelectItem>
|
||||
<SelectItem value="Amil">Amil</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="plano">Plano</Label>
|
||||
<Input id="plano" value={formData.plano} onChange={(e) => handleInputChange("plano", e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="numeroMatricula">Nº de matrícula</Label>
|
||||
<Input
|
||||
id="numeroMatricula"
|
||||
value={formData.numeroMatricula}
|
||||
onChange={(e) => handleInputChange("numeroMatricula", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="validadeCarteira">Validade da Carteira</Label>
|
||||
<Input
|
||||
id="validadeCarteira"
|
||||
type="date"
|
||||
value={formData.validadeCarteira}
|
||||
onChange={(e) => handleInputChange("validadeCarteira", e.target.value)}
|
||||
disabled={validadeIndeterminada}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="validadeIndeterminada"
|
||||
checked={validadeIndeterminada}
|
||||
onCheckedChange={(checked) => setValidadeIndeterminada(checked === true)}
|
||||
/>
|
||||
<Label htmlFor="validadeIndeterminada">Validade Indeterminada</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-4">
|
||||
<Link href="/manager/home">
|
||||
<Button type="button" variant="outline">
|
||||
Cancelar
|
||||
</Button>
|
||||
</Link>
|
||||
<Button type="submit" className="bg-green-600 hover:bg-green-700">
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
Salvar Alterações
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</ManagerLayout>
|
||||
)
|
||||
}
|
||||
479
app/manager/home/novo/page.tsx
Normal file
479
app/manager/home/novo/page.tsx
Normal file
@ -0,0 +1,479 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import Link from "next/link"
|
||||
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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Upload, Plus, X, ChevronDown } from "lucide-react"
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
|
||||
import ManagerLayout from "@/components/manager-layout"
|
||||
|
||||
export default function NovoMedicoPage() {
|
||||
const [anexosOpen, setAnexosOpen] = useState(false)
|
||||
const [anexos, setAnexos] = useState<string[]>([])
|
||||
|
||||
const adicionarAnexo = () => {
|
||||
setAnexos([...anexos, `Documento ${anexos.length + 1}`])
|
||||
}
|
||||
|
||||
const removerAnexo = (index: number) => {
|
||||
setAnexos(anexos.filter((_, i) => i !== index))
|
||||
}
|
||||
|
||||
return (
|
||||
<ManagerLayout>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Novo Médico</h1>
|
||||
<p className="text-gray-600">Cadastre um novo médico no sistema</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form className="space-y-6">
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-6">Dados Pessoais</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Foto */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center">
|
||||
<Upload className="w-8 h-8 text-gray-400" />
|
||||
</div>
|
||||
<Button variant="outline" type="button" size="sm">
|
||||
<Upload className="w-4 h-4 mr-2" />
|
||||
Carregar Foto
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="nome" className="text-sm font-medium text-gray-700">
|
||||
Nome *
|
||||
</Label>
|
||||
<Input id="nome" placeholder="Nome completo" required className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="nomeSocial" className="text-sm font-medium text-gray-700">
|
||||
Nome Social
|
||||
</Label>
|
||||
<Input id="nomeSocial" placeholder="Nome social ou apelido" className="mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="cpf" className="text-sm font-medium text-gray-700">
|
||||
CPF *
|
||||
</Label>
|
||||
<Input id="cpf" placeholder="000.000.000-00" required className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="rg" className="text-sm font-medium text-gray-700">
|
||||
RG
|
||||
</Label>
|
||||
<Input id="rg" placeholder="00.000.000-0" className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="crm" className="text-sm font-medium text-gray-700">
|
||||
CRM *
|
||||
</Label>
|
||||
<Input id="crm" placeholder="CRM/UF 12345" required className="mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="outrosDocumentos" className="text-sm font-medium text-gray-700">
|
||||
Outros Documentos
|
||||
</Label>
|
||||
<Select>
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="cnh">CNH</SelectItem>
|
||||
<SelectItem value="passaporte">Passaporte</SelectItem>
|
||||
<SelectItem value="carteira-trabalho">Carteira de Trabalho</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<Label className="text-sm font-medium text-gray-700">Sexo</Label>
|
||||
<div className="flex gap-4 mt-2">
|
||||
<label className="flex items-center gap-2">
|
||||
<input type="radio" name="sexo" value="masculino" className="text-blue-600" />
|
||||
<span className="text-sm">Masculino</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2">
|
||||
<input type="radio" name="sexo" value="feminino" className="text-blue-600" />
|
||||
<span className="text-sm">Feminino</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="dataNascimento" className="text-sm font-medium text-gray-700">
|
||||
Data de Nascimento
|
||||
</Label>
|
||||
<Input id="dataNascimento" type="date" className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="estadoCivil" className="text-sm font-medium text-gray-700">
|
||||
Estado Civil
|
||||
</Label>
|
||||
<Select>
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="solteiro">Solteiro(a)</SelectItem>
|
||||
<SelectItem value="casado">Casado(a)</SelectItem>
|
||||
<SelectItem value="divorciado">Divorciado(a)</SelectItem>
|
||||
<SelectItem value="viuvo">Viúvo(a)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="etnia" className="text-sm font-medium text-gray-700">
|
||||
Etnia
|
||||
</Label>
|
||||
<Select>
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="branca">Branca</SelectItem>
|
||||
<SelectItem value="preta">Preta</SelectItem>
|
||||
<SelectItem value="parda">Parda</SelectItem>
|
||||
<SelectItem value="amarela">Amarela</SelectItem>
|
||||
<SelectItem value="indigena">Indígena</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="raca" className="text-sm font-medium text-gray-700">
|
||||
Raça
|
||||
</Label>
|
||||
<Select>
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="branca">Branca</SelectItem>
|
||||
<SelectItem value="preta">Preta</SelectItem>
|
||||
<SelectItem value="parda">Parda</SelectItem>
|
||||
<SelectItem value="amarela">Amarela</SelectItem>
|
||||
<SelectItem value="indigena">Indígena</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="naturalidade" className="text-sm font-medium text-gray-700">
|
||||
Naturalidade
|
||||
</Label>
|
||||
<Select>
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="aracaju">Aracaju</SelectItem>
|
||||
<SelectItem value="salvador">Salvador</SelectItem>
|
||||
<SelectItem value="recife">Recife</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="nacionalidade" className="text-sm font-medium text-gray-700">
|
||||
Nacionalidade
|
||||
</Label>
|
||||
<Select>
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="brasileira">Brasileira</SelectItem>
|
||||
<SelectItem value="estrangeira">Estrangeira</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="profissao" className="text-sm font-medium text-gray-700">
|
||||
Profissão
|
||||
</Label>
|
||||
<Input id="profissao" placeholder="Médico" className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="especialidade" className="text-sm font-medium text-gray-700">
|
||||
Especialidade *
|
||||
</Label>
|
||||
<Select>
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="cardiologia">Cardiologia</SelectItem>
|
||||
<SelectItem value="pediatria">Pediatria</SelectItem>
|
||||
<SelectItem value="ortopedia">Ortopedia</SelectItem>
|
||||
<SelectItem value="ginecologia">Ginecologia</SelectItem>
|
||||
<SelectItem value="neurologia">Neurologia</SelectItem>
|
||||
<SelectItem value="dermatologia">Dermatologia</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="nomeMae" className="text-sm font-medium text-gray-700">
|
||||
Nome da Mãe
|
||||
</Label>
|
||||
<Input id="nomeMae" placeholder="Nome da mãe" className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="nomePai" className="text-sm font-medium text-gray-700">
|
||||
Nome do Pai
|
||||
</Label>
|
||||
<Input id="nomePai" placeholder="Nome do pai" className="mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="nomeEsposo" className="text-sm font-medium text-gray-700">
|
||||
Nome do Esposo(a)
|
||||
</Label>
|
||||
<Input id="nomeEsposo" placeholder="Nome do esposo(a)" className="mt-1" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="codigoLegado" className="text-sm font-medium text-gray-700">
|
||||
Código Legado
|
||||
</Label>
|
||||
<Input id="codigoLegado" placeholder="Código do sistema anterior" className="mt-1" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="observacoes" className="text-sm font-medium text-gray-700">
|
||||
Observações
|
||||
</Label>
|
||||
<Textarea
|
||||
id="observacoes"
|
||||
placeholder="Observações gerais sobre o médico"
|
||||
className="min-h-[100px] mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Collapsible open={anexosOpen} onOpenChange={setAnexosOpen}>
|
||||
<CollapsibleTrigger asChild>
|
||||
<Button variant="ghost" type="button" className="w-full justify-between p-0 h-auto text-left">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 bg-gray-400 rounded-sm flex items-center justify-center">
|
||||
<span className="text-white text-xs">📎</span>
|
||||
</div>
|
||||
<span className="text-sm font-medium text-gray-700">Anexos do médico</span>
|
||||
</div>
|
||||
<ChevronDown className={`w-4 h-4 transition-transform ${anexosOpen ? "rotate-180" : ""}`} />
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="space-y-4 mt-4">
|
||||
{anexos.map((anexo, index) => (
|
||||
<div key={index} className="flex items-center justify-between p-3 border rounded-lg bg-gray-50">
|
||||
<span className="text-sm">{anexo}</span>
|
||||
<Button variant="ghost" size="sm" onClick={() => removerAnexo(index)} type="button">
|
||||
<X className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<Button variant="outline" onClick={adicionarAnexo} type="button" size="sm">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Adicionar Anexo
|
||||
</Button>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-6">Contato</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="email" className="text-sm font-medium text-gray-700">
|
||||
E-mail
|
||||
</Label>
|
||||
<Input id="email" type="email" placeholder="email@exemplo.com" className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="celular" className="text-sm font-medium text-gray-700">
|
||||
Celular
|
||||
</Label>
|
||||
<div className="flex mt-1">
|
||||
<Select>
|
||||
<SelectTrigger className="w-20 rounded-r-none">
|
||||
<SelectValue placeholder="+55" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="+55">+55</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Input placeholder="(XX) XXXXX-XXXX" className="rounded-l-none" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="telefone1" className="text-sm font-medium text-gray-700">
|
||||
Telefone 1
|
||||
</Label>
|
||||
<Input id="telefone1" placeholder="(XX) XXXX-XXXX" className="mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="telefone2" className="text-sm font-medium text-gray-700">
|
||||
Telefone 2
|
||||
</Label>
|
||||
<Input id="telefone2" placeholder="(XX) XXXX-XXXX" className="mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-6">Endereço</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="cep" className="text-sm font-medium text-gray-700">
|
||||
CEP
|
||||
</Label>
|
||||
<Input id="cep" placeholder="00000-000" className="mt-1 max-w-xs" />
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
<div className="md:col-span-2">
|
||||
<Label htmlFor="endereco" className="text-sm font-medium text-gray-700">
|
||||
Endereço
|
||||
</Label>
|
||||
<Input id="endereco" placeholder="Rua, Avenida..." className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="numero" className="text-sm font-medium text-gray-700">
|
||||
Número
|
||||
</Label>
|
||||
<Input id="numero" placeholder="123" className="mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="complemento" className="text-sm font-medium text-gray-700">
|
||||
Complemento
|
||||
</Label>
|
||||
<Input id="complemento" placeholder="Apto, Bloco..." className="mt-1" />
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="bairro" className="text-sm font-medium text-gray-700">
|
||||
Bairro
|
||||
</Label>
|
||||
<Input id="bairro" placeholder="Bairro" className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="cidade" className="text-sm font-medium text-gray-700">
|
||||
Cidade
|
||||
</Label>
|
||||
<Input id="cidade" placeholder="Cidade" className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="estado" className="text-sm font-medium text-gray-700">
|
||||
Estado
|
||||
</Label>
|
||||
<Select>
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="SE">Sergipe</SelectItem>
|
||||
<SelectItem value="BA">Bahia</SelectItem>
|
||||
<SelectItem value="AL">Alagoas</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-6">Informações Profissionais</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="numeroConselho" className="text-sm font-medium text-gray-700">
|
||||
Número do Conselho
|
||||
</Label>
|
||||
<Input id="numeroConselho" placeholder="Número do CRM" className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="ufConselho" className="text-sm font-medium text-gray-700">
|
||||
UF do Conselho
|
||||
</Label>
|
||||
<Select>
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="SE">SE</SelectItem>
|
||||
<SelectItem value="BA">BA</SelectItem>
|
||||
<SelectItem value="AL">AL</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="dataFormatura" className="text-sm font-medium text-gray-700">
|
||||
Data de Formatura
|
||||
</Label>
|
||||
<Input id="dataFormatura" type="date" className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="instituicaoFormacao" className="text-sm font-medium text-gray-700">
|
||||
Instituição de Formação
|
||||
</Label>
|
||||
<Input id="instituicaoFormacao" placeholder="Nome da universidade" className="mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="especialidades" className="text-sm font-medium text-gray-700">
|
||||
Especialidades Adicionais
|
||||
</Label>
|
||||
<Textarea
|
||||
id="especialidades"
|
||||
placeholder="Liste outras especialidades ou subespecialidades..."
|
||||
className="min-h-[80px] mt-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-4">
|
||||
<Link href="/manager/home">
|
||||
<Button variant="outline">Cancelar</Button>
|
||||
</Link>
|
||||
<Button type="submit" className="bg-green-600 hover:bg-green-700">
|
||||
Salvar Médico
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</ManagerLayout>
|
||||
)
|
||||
}
|
||||
@ -1,56 +1,309 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import React, { useEffect, useState } from "react"
|
||||
import ManagerLayout from "@/components/manager-layout";
|
||||
import Link from "next/link"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Plus, Edit, Trash2, Eye, Calendar, Filter } from "lucide-react"
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog"
|
||||
|
||||
interface Paciente {
|
||||
id: string;
|
||||
nome: string;
|
||||
telefone: string;
|
||||
cidade: string;
|
||||
estado: string;
|
||||
ultimoAtendimento?: string;
|
||||
proximoAtendimento?: string;
|
||||
}
|
||||
export default function DoctorsPage() {
|
||||
|
||||
export default function PacientesPage() {
|
||||
const [pacientes, setPacientes] = useState<Paciente[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchPacientes() {
|
||||
const [detailsDialogOpen, setDetailsDialogOpen] = useState(false)
|
||||
const [doctorDetails, setDoctorDetails] = useState<any | null>(null)
|
||||
const openDetailsDialog = async (doctorId: string) => {
|
||||
setDetailsDialogOpen(true)
|
||||
setDoctorDetails(null)
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const res = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes");
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const json = await res.json();
|
||||
const items = Array.isArray(json?.data) ? json.data : [];
|
||||
const res = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${doctorId}`)
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`)
|
||||
const json = await res.json()
|
||||
setDoctorDetails(json?.data ?? null)
|
||||
} catch (e: any) {
|
||||
setDoctorDetails({ error: e?.message || "Erro ao buscar detalhes" })
|
||||
}
|
||||
}
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
const [especialidadeFilter, setEspecialidadeFilter] = useState("all")
|
||||
const [statusFilter, setStatusFilter] = useState("all")
|
||||
const [doctors, setDoctors] = useState<any[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
|
||||
const [doctorToDelete, setDoctorToDelete] = useState<string | null>(null)
|
||||
const [page, setPage] = useState(1)
|
||||
const [hasNext, setHasNext] = useState(true)
|
||||
const [isFetching, setIsFetching] = useState(false)
|
||||
const observerRef = React.useRef<HTMLDivElement | null>(null)
|
||||
|
||||
const fetchMedicos = React.useCallback(async (pageToFetch: number) => {
|
||||
if (isFetching || !hasNext) return
|
||||
setIsFetching(true)
|
||||
setError(null)
|
||||
try {
|
||||
const res = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes?page=${pageToFetch}&limit=20`)
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`)
|
||||
const json = await res.json()
|
||||
const items = Array.isArray(json?.data) ? json.data : []
|
||||
const mapped = items.map((p: any) => ({
|
||||
id: String(p.id ?? ""),
|
||||
nome: p.nome ?? "",
|
||||
crm: p.crm ?? "", // mock não tem crm, pode deixar vazio
|
||||
especialidade: p.especialidade ?? "", // mock não tem especialidade, pode deixar vazio
|
||||
telefone: p?.contato?.celular ?? p?.contato?.telefone1 ?? p?.telefone ?? "",
|
||||
cidade: p?.endereco?.cidade ?? p?.cidade ?? "",
|
||||
estado: p?.endereco?.estado ?? p?.estado ?? "",
|
||||
ultimoAtendimento: p.ultimo_atendimento ?? p.ultimoAtendimento ?? "",
|
||||
proximoAtendimento: p.proximo_atendimento ?? p.proximoAtendimento ?? "",
|
||||
}));
|
||||
|
||||
setPacientes(mapped);
|
||||
status: p.status ?? "",
|
||||
}))
|
||||
setDoctors((prev) => [...prev, ...mapped])
|
||||
setHasNext(Boolean(json?.pagination?.has_next))
|
||||
setPage(pageToFetch + 1)
|
||||
} catch (e: any) {
|
||||
setError(e?.message || "Erro ao carregar pacientes");
|
||||
setError(e?.message || "Erro ao buscar médicos")
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setIsFetching(false)
|
||||
}
|
||||
}, [isFetching, hasNext])
|
||||
|
||||
React.useEffect(() => {
|
||||
fetchMedicos(page)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!observerRef.current || !hasNext) return
|
||||
const observer = new window.IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && !isFetching && hasNext) {
|
||||
fetchMedicos(page)
|
||||
}
|
||||
fetchPacientes();
|
||||
}, []);
|
||||
})
|
||||
observer.observe(observerRef.current)
|
||||
return () => {
|
||||
if (observerRef.current) observer.unobserve(observerRef.current)
|
||||
}
|
||||
}, [fetchMedicos, page, hasNext, isFetching])
|
||||
|
||||
const handleDeleteDoctor = async (doctorId: string) => {
|
||||
try {
|
||||
await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${doctorId}`, {
|
||||
method: "DELETE",
|
||||
})
|
||||
} catch { }
|
||||
setDoctors((prev) => prev.filter((doctor) => String(doctor.id) !== String(doctorId)))
|
||||
setDeleteDialogOpen(false)
|
||||
setDoctorToDelete(null)
|
||||
}
|
||||
|
||||
const openDeleteDialog = (doctorId: string) => {
|
||||
setDoctorToDelete(doctorId)
|
||||
setDeleteDialogOpen(true)
|
||||
}
|
||||
|
||||
const filteredDoctors = doctors.filter((doctor) => {
|
||||
const matchesSearch =
|
||||
doctor.nome.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
doctor.crm.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
doctor.telefone.includes(searchTerm)
|
||||
const matchesEspecialidade = especialidadeFilter === "all" || doctor.especialidade === especialidadeFilter
|
||||
const matchesStatus = statusFilter === "all" || doctor.status === statusFilter
|
||||
|
||||
return matchesSearch && matchesEspecialidade && matchesStatus
|
||||
})
|
||||
|
||||
return (
|
||||
<ManagerLayout>
|
||||
<div></div>
|
||||
<div className="space-y-6">
|
||||
{/* ...layout e filtros... */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Médicos</h1>
|
||||
<p className="text-gray-600">Gerencie as informações dos médicos</p>
|
||||
</div>
|
||||
<Link href="/manager/home/novo">
|
||||
<Button className="bg-green-600 hover:bg-green-700">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Adicionar
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 bg-white p-4 rounded-lg border border-gray-200">
|
||||
{/* ...filtros... */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-gray-700">Especialidade</span>
|
||||
<Select value={especialidadeFilter} onValueChange={setEspecialidadeFilter}>
|
||||
<SelectTrigger className="w-40">
|
||||
<SelectValue placeholder="Selecione a Especialidade" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Todas</SelectItem>
|
||||
<SelectItem value="Cardiologia">Cardiologia</SelectItem>
|
||||
<SelectItem value="Pediatria">Pediatria</SelectItem>
|
||||
<SelectItem value="Ortopedia">Ortopedia</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-gray-700">Status</span>
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger className="w-32">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Todos</SelectItem>
|
||||
<SelectItem value="Ativo">Ativo</SelectItem>
|
||||
<SelectItem value="Inativo">Inativo</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<Button variant="outline" className="ml-auto bg-transparent">
|
||||
<Filter className="w-4 h-4 mr-2" />
|
||||
Filtro avançado
|
||||
</Button>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg border border-gray-200">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50 border-b border-gray-200">
|
||||
<tr>
|
||||
<th className="text-left p-4 font-medium text-gray-700">Nome</th>
|
||||
<th className="text-left p-4 font-medium text-gray-700">CRM</th>
|
||||
<th className="text-left p-4 font-medium text-gray-700">Telefone</th>
|
||||
<th className="text-left p-4 font-medium text-gray-700">Cidade</th>
|
||||
<th className="text-left p-4 font-medium text-gray-700">Estado</th>
|
||||
<th className="text-left p-4 font-medium text-gray-700">Último atendimento</th>
|
||||
<th className="text-left p-4 font-medium text-gray-700">Próximo atendimento</th>
|
||||
<th className="text-left p-4 font-medium text-gray-700">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{error ? (
|
||||
<tr>
|
||||
<td colSpan={8} className="p-6 text-red-600">{`Erro: ${error}`}</td>
|
||||
</tr>
|
||||
) : filteredDoctors.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={8} className="p-8 text-center text-gray-500">Nenhum registro encontrado</td>
|
||||
</tr>
|
||||
) : (
|
||||
filteredDoctors.map((doctor) => (
|
||||
<tr key={doctor.id} className="border-b border-gray-100 hover:bg-gray-50">
|
||||
<td className="p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-gray-600 font-medium text-sm">{doctor.nome?.charAt(0) || "?"}</span>
|
||||
</div>
|
||||
<span className="font-medium text-gray-900">{doctor.nome}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4 text-gray-600">{doctor.crm}</td>
|
||||
<td className="p-4 text-gray-600">{doctor.telefone}</td>
|
||||
<td className="p-4 text-gray-600">{doctor.cidade}</td>
|
||||
<td className="p-4 text-gray-600">{doctor.estado}</td>
|
||||
<td className="p-4 text-gray-600">{doctor.ultimoAtendimento}</td>
|
||||
<td className="p-4 text-gray-600">{doctor.proximoAtendimento}</td>
|
||||
<td className="p-4">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<div className="text-blue-600 cursor-pointer">
|
||||
Ações
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => openDetailsDialog(String(doctor.id))}>
|
||||
<Eye className="w-4 h-4 mr-2" />
|
||||
Ver detalhes
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href={`/manager/home/${doctor.id}/editar`}>
|
||||
<Edit className="w-4 h-4 mr-2" />
|
||||
Editar
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<Calendar className="w-4 h-4 mr-2" />
|
||||
Ver agenda
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(String(doctor.id))}>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
Excluir
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
<div ref={observerRef} style={{ height: 1 }} />
|
||||
{isFetching && (
|
||||
<div className="p-4 text-center text-gray-500">Carregando mais médicos...</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Tem certeza que deseja excluir este médico? Esta ação não pode ser desfeita.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancelar</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => doctorToDelete && handleDeleteDoctor(doctorToDelete)}
|
||||
className="bg-red-600 hover:bg-red-700"
|
||||
>
|
||||
Excluir
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
{/* Modal de detalhes do médico */}
|
||||
<AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Detalhes do Médico</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{doctorDetails === null ? (
|
||||
<div className="text-gray-500">Carregando...</div>
|
||||
) : doctorDetails?.error ? (
|
||||
<div className="text-red-600">{doctorDetails.error}</div>
|
||||
) : (
|
||||
<div className="space-y-2 text-left">
|
||||
<div><strong>Nome:</strong> {doctorDetails.nome}</div>
|
||||
<div><strong>Telefone:</strong> {doctorDetails?.contato?.celular ?? doctorDetails?.contato?.telefone1 ?? doctorDetails?.telefone ?? ""}</div>
|
||||
<div><strong>Cidade:</strong> {doctorDetails?.endereco?.cidade ?? doctorDetails?.cidade ?? ""}</div>
|
||||
<div><strong>Estado:</strong> {doctorDetails?.endereco?.estado ?? doctorDetails?.estado ?? ""}</div>
|
||||
<div><strong>Convênio:</strong> {doctorDetails.convenio ?? ""}</div>
|
||||
<div><strong>VIP:</strong> {doctorDetails.vip ? "Sim" : "Não"}</div>
|
||||
<div><strong>Status:</strong> {doctorDetails.status ?? ""}</div>
|
||||
<div><strong>Último atendimento:</strong> {doctorDetails.ultimo_atendimento ?? doctorDetails.ultimoAtendimento ?? ""}</div>
|
||||
<div><strong>Próximo atendimento:</strong> {doctorDetails.proximo_atendimento ?? doctorDetails.proximoAtendimento ?? ""}</div>
|
||||
</div>
|
||||
)}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Fechar</AlertDialogCancel>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
</ManagerLayout>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user