fix: ajuste formulario de cadastro de pesquisador
This commit is contained in:
NANDO9322
parent
02309f74c0
commit
58ee90df73
2 changed files with 384 additions and 364 deletions
|
|
@ -261,6 +261,56 @@ export const ProfessionalForm: React.FC<ProfessionalFormProps> = ({
|
|||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Seleção de Função (Movido para o topo) */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold text-lg text-gray-700 border-b pb-2">
|
||||
Função
|
||||
</h3>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Função Profissional *
|
||||
</label>
|
||||
{isLoadingFunctions ? (
|
||||
<p className="text-sm text-gray-500">Carregando funções...</p>
|
||||
) : functionsError ? (
|
||||
<p className="text-sm text-red-500">
|
||||
❌ Erro ao carregar funções. Verifique se o backend está
|
||||
rodando.
|
||||
</p>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-4 bg-gray-50 p-4 rounded-lg border border-gray-200">
|
||||
{functions.map((func) => (
|
||||
<label key={func.id} className="flex items-center gap-2 cursor-pointer bg-white px-3 py-2 rounded shadow-sm border border-gray-100 hover:border-brand-gold transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
value={func.id}
|
||||
checked={formData.funcoesIds?.includes(func.id)}
|
||||
onChange={(e) => {
|
||||
const checked = e.target.checked;
|
||||
const currentIds = formData.funcoesIds || [];
|
||||
let newIds: string[] = [];
|
||||
if (checked) {
|
||||
newIds = [...currentIds, func.id];
|
||||
} else {
|
||||
newIds = currentIds.filter((id) => id !== func.id);
|
||||
}
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
funcoesIds: newIds,
|
||||
funcaoId: newIds.length > 0 ? newIds[0] : "", // Update primary
|
||||
funcaoLabel: functions.find(f=>f.id === (newIds.length > 0 ? newIds[0] : ""))?.nome
|
||||
}));
|
||||
}}
|
||||
className="w-5 h-5 text-[#B9CF33] rounded border-gray-300 focus:ring-[#B9CF33]"
|
||||
/>
|
||||
<span className="text-sm text-gray-700 font-medium">{func.nome}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Informações Pessoais */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold text-lg text-gray-700 border-b pb-2">
|
||||
|
|
@ -275,42 +325,45 @@ export const ProfessionalForm: React.FC<ProfessionalFormProps> = ({
|
|||
onChange={(e) => handleChange("nome", e.target.value)}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
CPF ou CNPJ do Titular *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={formData.cpfCnpj}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value.replace(/\D/g, "");
|
||||
let formatted = "";
|
||||
if (value.length <= 11) {
|
||||
// CPF: 000.000.000-00
|
||||
formatted = value.replace(
|
||||
/(\d{3})(\d{3})(\d{3})(\d{0,2})/,
|
||||
"$1.$2.$3-$4"
|
||||
);
|
||||
} else {
|
||||
// CNPJ: 00.000.000/0000-00
|
||||
formatted = value
|
||||
.slice(0, 14)
|
||||
.replace(
|
||||
/(\d{2})(\d{3})(\d{3})(\d{4})(\d{0,2})/,
|
||||
"$1.$2.$3/$4-$5"
|
||||
{/* Conditional CPF Display */}
|
||||
{(!formData.funcoesIds?.every(id => functions.find(f => f.id === id)?.nome.toLowerCase().includes("pesquisa")) || (formData.funcoesIds?.length === 0)) && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
CPF ou CNPJ do Titular *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={formData.cpfCnpj}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value.replace(/\D/g, "");
|
||||
let formatted = "";
|
||||
if (value.length <= 11) {
|
||||
// CPF: 000.000.000-00
|
||||
formatted = value.replace(
|
||||
/(\d{3})(\d{3})(\d{3})(\d{0,2})/,
|
||||
"$1.$2.$3-$4"
|
||||
);
|
||||
}
|
||||
handleChange("cpfCnpj", formatted);
|
||||
}}
|
||||
onBlur={handleCpfBlur}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#B9CF33] focus:border-transparent"
|
||||
placeholder="000.000.000-00 ou 00.000.000/0000-00"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
Informe seu CPF para verificarmos se você já possui cadastro.
|
||||
</p>
|
||||
</div>
|
||||
} else {
|
||||
// CNPJ: 00.000.000/0000-00
|
||||
formatted = value
|
||||
.slice(0, 14)
|
||||
.replace(
|
||||
/(\d{2})(\d{3})(\d{3})(\d{4})(\d{0,2})/,
|
||||
"$1.$2.$3/$4-$5"
|
||||
);
|
||||
}
|
||||
handleChange("cpfCnpj", formatted);
|
||||
}}
|
||||
onBlur={handleCpfBlur}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#B9CF33] focus:border-transparent"
|
||||
placeholder="000.000.000-00 ou 00.000.000/0000-00"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
Informe seu CPF para verificarmos se você já possui cadastro.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
|
|
@ -391,53 +444,10 @@ export const ProfessionalForm: React.FC<ProfessionalFormProps> = ({
|
|||
value={formData.confirmarSenha}
|
||||
onChange={(e) => handleChange("confirmarSenha", e.target.value)}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Função Profissional *
|
||||
</label>
|
||||
{isLoadingFunctions ? (
|
||||
<p className="text-sm text-gray-500">Carregando funções...</p>
|
||||
) : functionsError ? (
|
||||
<p className="text-sm text-red-500">
|
||||
❌ Erro ao carregar funções. Verifique se o backend está
|
||||
rodando.
|
||||
</p>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-4 bg-gray-50 p-4 rounded-lg border border-gray-200">
|
||||
{functions.map((func) => (
|
||||
<label key={func.id} className="flex items-center gap-2 cursor-pointer bg-white px-3 py-2 rounded shadow-sm border border-gray-100 hover:border-brand-gold transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
value={func.id}
|
||||
checked={formData.funcoesIds?.includes(func.id)}
|
||||
onChange={(e) => {
|
||||
const checked = e.target.checked;
|
||||
const currentIds = formData.funcoesIds || [];
|
||||
let newIds: string[] = [];
|
||||
if (checked) {
|
||||
newIds = [...currentIds, func.id];
|
||||
} else {
|
||||
newIds = currentIds.filter((id) => id !== func.id);
|
||||
}
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
funcoesIds: newIds,
|
||||
funcaoId: newIds.length > 0 ? newIds[0] : "", // Update primary
|
||||
funcaoLabel: functions.find(f=>f.id === (newIds.length > 0 ? newIds[0] : ""))?.nome
|
||||
}));
|
||||
}}
|
||||
className="w-5 h-5 text-[#B9CF33] rounded border-gray-300 focus:ring-[#B9CF33]"
|
||||
/>
|
||||
<span className="text-sm text-gray-700 font-medium">{func.nome}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Endereço */}
|
||||
{(!formData.funcoesIds?.every(id => functions.find(f => f.id === id)?.nome.toLowerCase().includes("pesquisa")) || (formData.funcoesIds?.length === 0)) && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold text-lg text-gray-700 border-b pb-2">
|
||||
Endereço
|
||||
|
|
@ -527,6 +537,7 @@ export const ProfessionalForm: React.FC<ProfessionalFormProps> = ({
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Contato */}
|
||||
<div className="space-y-4">
|
||||
|
|
@ -546,145 +557,145 @@ export const ProfessionalForm: React.FC<ProfessionalFormProps> = ({
|
|||
</div>
|
||||
|
||||
{/* Dados Bancários */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold text-lg text-gray-700 border-b pb-2">
|
||||
Dados Bancários
|
||||
</h3>
|
||||
{(!formData.funcoesIds?.every(id => functions.find(f => f.id === id)?.nome.toLowerCase().includes("pesquisa")) || (formData.funcoesIds?.length === 0)) && (
|
||||
<>
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold text-lg text-gray-700 border-b pb-2">
|
||||
Dados Bancários
|
||||
</h3>
|
||||
|
||||
<div>
|
||||
{/* CPF moved to personal info */}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<Input
|
||||
label="Banco *"
|
||||
type="text"
|
||||
required
|
||||
value={formData.banco}
|
||||
onChange={(e) => handleChange("banco", e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
label="Agência *"
|
||||
type="text"
|
||||
required
|
||||
value={formData.agencia}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value.replace(/\D/g, "");
|
||||
handleChange("agencia", value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<Input
|
||||
label="Conta *"
|
||||
type="text"
|
||||
required
|
||||
value={formData.conta}
|
||||
onChange={(e) => handleChange("conta", e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
label="PIX *"
|
||||
type="text"
|
||||
required
|
||||
placeholder="E-mail, telefone, CPF ou chave aleatória"
|
||||
value={formData.pix}
|
||||
onChange={(e) => handleChange("pix", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Informações Profissionais */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold text-lg text-gray-700 border-b pb-2">
|
||||
Informações Profissionais
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Carro Disponível para uso? *
|
||||
</label>
|
||||
<select
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<Input
|
||||
label="Banco *"
|
||||
type="text"
|
||||
required
|
||||
value={formData.carroDisponivel}
|
||||
onChange={(e) =>
|
||||
handleChange("carroDisponivel", e.target.value)
|
||||
}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#B9CF33] focus:border-transparent"
|
||||
>
|
||||
<option value="sim">Sim</option>
|
||||
<option value="nao">Não</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Possui estúdio? *
|
||||
</label>
|
||||
<select
|
||||
value={formData.banco}
|
||||
onChange={(e) => handleChange("banco", e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
label="Agência *"
|
||||
type="text"
|
||||
required
|
||||
value={formData.possuiEstudio}
|
||||
value={formData.agencia}
|
||||
onChange={(e) => {
|
||||
handleChange("possuiEstudio", e.target.value);
|
||||
if (e.target.value === "nao") {
|
||||
handleChange("qtdEstudios", "0");
|
||||
}
|
||||
const value = e.target.value.replace(/\D/g, "");
|
||||
handleChange("agencia", value);
|
||||
}}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#B9CF33] focus:border-transparent"
|
||||
>
|
||||
<option value="sim">Sim</option>
|
||||
<option value="nao">Não</option>
|
||||
</select>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<Input
|
||||
label="Conta *"
|
||||
type="text"
|
||||
required
|
||||
value={formData.conta}
|
||||
onChange={(e) => handleChange("conta", e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
label="PIX *"
|
||||
type="text"
|
||||
required
|
||||
placeholder="E-mail, telefone, CPF ou chave aleatória"
|
||||
value={formData.pix}
|
||||
onChange={(e) => handleChange("pix", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Informações Profissionais - Resources */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold text-lg text-gray-700 border-b pb-2">
|
||||
Informações Profissionais
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Carro Disponível para uso? *
|
||||
</label>
|
||||
<select
|
||||
required
|
||||
value={formData.carroDisponivel}
|
||||
onChange={(e) =>
|
||||
handleChange("carroDisponivel", e.target.value)
|
||||
}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#B9CF33] focus:border-transparent"
|
||||
>
|
||||
<option value="sim">Sim</option>
|
||||
<option value="nao">Não</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Possui estúdio? *
|
||||
</label>
|
||||
<select
|
||||
required
|
||||
value={formData.possuiEstudio}
|
||||
onChange={(e) => {
|
||||
handleChange("possuiEstudio", e.target.value);
|
||||
if (e.target.value === "nao") {
|
||||
handleChange("qtdEstudios", "0");
|
||||
}
|
||||
}}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#B9CF33] focus:border-transparent"
|
||||
>
|
||||
<option value="sim">Sim</option>
|
||||
<option value="nao">Não</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{formData.possuiEstudio === "sim" && (
|
||||
<Input
|
||||
label="Quantidade de Estúdios *"
|
||||
type="number"
|
||||
required
|
||||
min="1"
|
||||
value={formData.qtdEstudios}
|
||||
onChange={(e) => handleChange("qtdEstudios", e.target.value)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Equipamentos
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.equipamentos}
|
||||
onChange={(e) => handleChange("equipamentos", e.target.value)}
|
||||
rows={3}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#B9CF33] focus:border-transparent resize-none"
|
||||
placeholder="Descreva os equipamentos que você possui (câmeras, lentes, flashes, etc.)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{formData.possuiEstudio === "sim" && (
|
||||
<Input
|
||||
label="Quantidade de Estúdios *"
|
||||
type="number"
|
||||
required
|
||||
min="1"
|
||||
value={formData.qtdEstudios}
|
||||
onChange={(e) => handleChange("qtdEstudios", e.target.value)}
|
||||
label="Tipo de Cartão (Cartão de Memória) *"
|
||||
type="text"
|
||||
required
|
||||
placeholder="Ex: SD, CF, XQD"
|
||||
value={formData.tipoCartao}
|
||||
onChange={(e) => handleChange("tipoCartao", e.target.value)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Equipamentos
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.equipamentos}
|
||||
onChange={(e) => handleChange("equipamentos", e.target.value)}
|
||||
rows={3}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#B9CF33] focus:border-transparent resize-none"
|
||||
placeholder="Descreva os equipamentos que você possui (câmeras, lentes, flashes, etc.)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
label="Tipo de Cartão (Cartão de Memória) *"
|
||||
type="text"
|
||||
required
|
||||
placeholder="Ex: SD, CF, XQD"
|
||||
value={formData.tipoCartao}
|
||||
onChange={(e) => handleChange("tipoCartao", e.target.value)}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Observações
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.observacao}
|
||||
onChange={(e) => handleChange("observacao", e.target.value)}
|
||||
rows={3}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#B9CF33] focus:border-transparent resize-none"
|
||||
placeholder="Qualquer observação relevante..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Observações
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.observacao}
|
||||
onChange={(e) => handleChange("observacao", e.target.value)}
|
||||
rows={3}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#B9CF33] focus:border-transparent resize-none"
|
||||
placeholder="Qualquer observação relevante..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Botões */}
|
||||
<div className="flex gap-4 pt-4">
|
||||
|
|
|
|||
|
|
@ -387,12 +387,48 @@ export const ProfessionalModal: React.FC<ProfessionalModalProps> = ({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Seleção de Função (Movida para o topo) */}
|
||||
<div className="col-span-1 md:col-span-2 mb-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Funções *
|
||||
</label>
|
||||
<div className="flex flex-wrap gap-4 bg-gray-50 p-3 rounded border">
|
||||
{roles.map(role => (
|
||||
<label key={role.id} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
value={role.id}
|
||||
checked={formData.funcoes_ids?.includes(role.id)}
|
||||
onChange={e => {
|
||||
const checked = e.target.checked;
|
||||
const currentIds = formData.funcoes_ids || [];
|
||||
let newIds: string[] = [];
|
||||
if (checked) {
|
||||
newIds = [...currentIds, role.id];
|
||||
} else {
|
||||
newIds = currentIds.filter((id) => id !== role.id);
|
||||
}
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
funcoes_ids: newIds,
|
||||
funcao_profissional_id: newIds.length > 0 ? newIds[0] : ""
|
||||
}));
|
||||
}}
|
||||
className="w-4 h-4 text-brand-gold rounded border-gray-300 focus:ring-brand-gold"
|
||||
/>
|
||||
<span className="text-sm text-gray-700">{role.nome}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Name & CPF (Top) */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Nome *</label>
|
||||
<input required type="text" value={formData.nome || ""} onChange={e => setFormData({ ...formData, nome: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" />
|
||||
</div>
|
||||
{(!formData.funcoes_ids?.every(id => roles.find(r => r.id === id)?.nome.toLowerCase().includes("pesquisa")) || (formData.funcoes_ids?.length === 0)) && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">CPF/CNPJ Titular *</label>
|
||||
<input
|
||||
|
|
@ -404,42 +440,10 @@ export const ProfessionalModal: React.FC<ProfessionalModalProps> = ({
|
|||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Functions */}
|
||||
<div className="col-span-1 md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Funções *
|
||||
</label>
|
||||
<div className="flex flex-wrap gap-4 bg-gray-50 p-3 rounded border">
|
||||
{roles.map(role => (
|
||||
<label key={role.id} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
value={role.id}
|
||||
checked={formData.funcoes_ids?.includes(role.id)}
|
||||
onChange={e => {
|
||||
const checked = e.target.checked;
|
||||
const currentIds = formData.funcoes_ids || [];
|
||||
let newIds: string[] = [];
|
||||
if (checked) {
|
||||
newIds = [...currentIds, role.id];
|
||||
} else {
|
||||
newIds = currentIds.filter((id) => id !== role.id);
|
||||
}
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
funcoes_ids: newIds,
|
||||
funcao_profissional_id: newIds.length > 0 ? newIds[0] : ""
|
||||
}));
|
||||
}}
|
||||
className="w-4 h-4 text-brand-gold rounded border-gray-300 focus:ring-brand-gold"
|
||||
/>
|
||||
<span className="text-sm text-gray-700">{role.nome}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* Functions removed from here */}
|
||||
|
||||
{/* Email & Pass */}
|
||||
<div>
|
||||
|
|
@ -497,132 +501,137 @@ export const ProfessionalModal: React.FC<ProfessionalModalProps> = ({
|
|||
<input type="text" value={formData.whatsapp || ""} onChange={e => setFormData({ ...formData, whatsapp: maskPhone(e.target.value) })} maxLength={15} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" />
|
||||
</div>
|
||||
|
||||
|
||||
<h3 className="text-lg font-medium text-gray-900 border-b pb-2 mt-4">Endereço</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">CEP</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
maxLength={9}
|
||||
value={formData.cep || ""}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value.replace(/\D/g, "").replace(/^(\d{5})(\d)/, "$1-$2");
|
||||
setFormData({ ...formData, cep: val });
|
||||
}}
|
||||
onBlur={handleCepBlur}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border"
|
||||
placeholder="00000-000"
|
||||
/>
|
||||
{isLoadingCep && <span className="absolute right-2 top-3 text-xs text-gray-400">Buscando...</span>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700">Endereço Completo</label>
|
||||
<input type="text" value={formData.endereco || ""} onChange={e => setFormData({ ...formData, endereco: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Cidade</label>
|
||||
<input type="text" value={formData.cidade || ""} onChange={e => setFormData({ ...formData, cidade: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">UF</label>
|
||||
<select value={formData.uf || ""} onChange={e => setFormData({ ...formData, uf: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border">
|
||||
<option value="">UF</option>
|
||||
{ufs.map(uf => <option key={uf} value={uf}>{uf}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Banking */}
|
||||
<h3 className="text-lg font-medium text-gray-900 border-b pb-2 mt-4">Dados Bancários</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Banco *</label>
|
||||
<input type="text" required value={formData.banco || ""} onChange={e => setFormData({ ...formData, banco: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Agência *</label>
|
||||
<input type="text" required value={formData.agencia || ""} onChange={e => setFormData({ ...formData, agencia: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Chave Pix / Conta *</label>
|
||||
<input type="text" required value={formData.conta_pix || ""} onChange={e => setFormData({ ...formData, conta_pix: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Tipo Cartão</label>
|
||||
<input type="text" value={formData.tipo_cartao || ""} onChange={e => setFormData({ ...formData, tipo_cartao: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" placeholder="SD, XQD..." />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Resources */}
|
||||
<h3 className="text-lg font-medium text-gray-900 border-b pb-2 mt-4">Recursos</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<label className="flex items-center gap-2">
|
||||
<input type="checkbox" checked={formData.carro_disponivel || false} onChange={e => setFormData({ ...formData, carro_disponivel: e.target.checked })} />
|
||||
<span>Carro Disponível</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2">
|
||||
<input type="checkbox" checked={formData.tem_estudio || false} onChange={e => setFormData({ ...formData, tem_estudio: e.target.checked })} />
|
||||
<span>Possui Estúdio</span>
|
||||
</label>
|
||||
{formData.tem_estudio && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Qtd Estúdios</label>
|
||||
<input type="number" min="0" value={formData.qtd_estudio || 0} onChange={e => setFormData({ ...formData, qtd_estudio: Math.max(0, parseInt(e.target.value)) })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Ratings */}
|
||||
<h3 className="text-lg font-medium text-gray-900 border-b pb-2 mt-4">Avaliações e Valores</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1 leading-tight">Qual. Técnica / Aparência</label>
|
||||
<input type="number" min="0" max="5" step="1" value={formData.qual_tec || 0} onChange={e => setFormData({ ...formData, qual_tec: parseInt(e.target.value) || 0 })} className="block w-full rounded-md border-gray-300 shadow-sm p-2 border" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1 leading-tight">Simpatia</label>
|
||||
<input type="number" min="0" max="5" step="1" value={formData.educacao_simpatia || 0} onChange={e => setFormData({ ...formData, educacao_simpatia: parseInt(e.target.value) || 0 })} className="block w-full rounded-md border-gray-300 shadow-sm p-2 border" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1 leading-tight">Desempenho</label>
|
||||
<input type="number" min="0" max="5" step="1" value={formData.desempenho_evento || 0} onChange={e => setFormData({ ...formData, desempenho_evento: parseInt(e.target.value) || 0 })} className="block w-full rounded-md border-gray-300 shadow-sm p-2 border" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1 leading-tight">Disp. Horário</label>
|
||||
<input type="number" min="0" max="5" step="1" value={formData.disp_horario || 0} onChange={e => setFormData({ ...formData, disp_horario: parseInt(e.target.value) || 0 })} className="block w-full rounded-md border-gray-300 shadow-sm p-2 border" />
|
||||
</div>
|
||||
<div className="bg-gray-100 p-2 rounded text-center flex flex-col justify-center">
|
||||
<span className="block text-xs text-gray-500 font-bold uppercase tracking-wider">Média</span>
|
||||
<span className="text-2xl font-bold text-brand-gold">{formData.media ? (typeof formData.media === 'number' ? formData.media.toFixed(1) : parseFloat(String(formData.media)).toFixed(1)) : "0.0"}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Valor Tabela Free</label>
|
||||
<input type="text" value={formData.tabela_free || ""} onChange={e => setFormData({ ...formData, tabela_free: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" placeholder="Ex: R$ 200,00" />
|
||||
</div>
|
||||
<div className="flex items-center pt-6">
|
||||
|
||||
{/* Endereço */}
|
||||
{(!formData.funcoes_ids?.every(id => roles.find(r => r.id === id)?.nome.toLowerCase().includes("pesquisa")) || (formData.funcoes_ids?.length === 0)) && (
|
||||
<>
|
||||
<h3 className="text-lg font-medium text-gray-900 border-b pb-2 mt-4">Endereço</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">CEP</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
maxLength={9}
|
||||
value={formData.cep || ""}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value.replace(/\D/g, "").replace(/^(\d{5})(\d)/, "$1-$2");
|
||||
setFormData({ ...formData, cep: val });
|
||||
}}
|
||||
onBlur={handleCepBlur}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border"
|
||||
placeholder="00000-000"
|
||||
/>
|
||||
{isLoadingCep && <span className="absolute right-2 top-3 text-xs text-gray-400">Buscando...</span>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700">Endereço Completo</label>
|
||||
<input type="text" value={formData.endereco || ""} onChange={e => setFormData({ ...formData, endereco: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Cidade</label>
|
||||
<input type="text" value={formData.cidade || ""} onChange={e => setFormData({ ...formData, cidade: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">UF</label>
|
||||
<select value={formData.uf || ""} onChange={e => setFormData({ ...formData, uf: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border">
|
||||
<option value="">UF</option>
|
||||
{ufs.map(uf => <option key={uf} value={uf}>{uf}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Banking */}
|
||||
<h3 className="text-lg font-medium text-gray-900 border-b pb-2 mt-4">Dados Bancários</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Banco *</label>
|
||||
<input type="text" required value={formData.banco || ""} onChange={e => setFormData({ ...formData, banco: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Agência *</label>
|
||||
<input type="text" required value={formData.agencia || ""} onChange={e => setFormData({ ...formData, agencia: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Chave Pix / Conta *</label>
|
||||
<input type="text" required value={formData.conta_pix || ""} onChange={e => setFormData({ ...formData, conta_pix: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Tipo Cartão</label>
|
||||
<input type="text" value={formData.tipo_cartao || ""} onChange={e => setFormData({ ...formData, tipo_cartao: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" placeholder="SD, XQD..." />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Resources */}
|
||||
<h3 className="text-lg font-medium text-gray-900 border-b pb-2 mt-4">Recursos</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<label className="flex items-center gap-2">
|
||||
<input type="checkbox" checked={formData.extra_por_equipamento || false} onChange={e => setFormData({ ...formData, extra_por_equipamento: e.target.checked })} />
|
||||
<span>Extra por Equipamento</span>
|
||||
<input type="checkbox" checked={formData.carro_disponivel || false} onChange={e => setFormData({ ...formData, carro_disponivel: e.target.checked })} />
|
||||
<span>Carro Disponível</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<label className="flex items-center gap-2">
|
||||
<input type="checkbox" checked={formData.tem_estudio || false} onChange={e => setFormData({ ...formData, tem_estudio: e.target.checked })} />
|
||||
<span>Possui Estúdio</span>
|
||||
</label>
|
||||
{formData.tem_estudio && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Qtd Estúdios</label>
|
||||
<input type="number" min="0" value={formData.qtd_estudio || 0} onChange={e => setFormData({ ...formData, qtd_estudio: Math.max(0, parseInt(e.target.value)) })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Equipamentos</label>
|
||||
<textarea rows={3} value={formData.equipamentos || ""} onChange={e => setFormData({ ...formData, equipamentos: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" placeholder="Liste os equipamentos..." />
|
||||
</div>
|
||||
{/* Ratings */}
|
||||
<h3 className="text-lg font-medium text-gray-900 border-b pb-2 mt-4">Avaliações e Valores</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1 leading-tight">Qual. Técnica / Aparência</label>
|
||||
<input type="number" min="0" max="5" step="1" value={formData.qual_tec || 0} onChange={e => setFormData({ ...formData, qual_tec: parseInt(e.target.value) || 0 })} className="block w-full rounded-md border-gray-300 shadow-sm p-2 border" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1 leading-tight">Simpatia</label>
|
||||
<input type="number" min="0" max="5" step="1" value={formData.educacao_simpatia || 0} onChange={e => setFormData({ ...formData, educacao_simpatia: parseInt(e.target.value) || 0 })} className="block w-full rounded-md border-gray-300 shadow-sm p-2 border" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1 leading-tight">Desempenho</label>
|
||||
<input type="number" min="0" max="5" step="1" value={formData.desempenho_evento || 0} onChange={e => setFormData({ ...formData, desempenho_evento: parseInt(e.target.value) || 0 })} className="block w-full rounded-md border-gray-300 shadow-sm p-2 border" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1 leading-tight">Disp. Horário</label>
|
||||
<input type="number" min="0" max="5" step="1" value={formData.disp_horario || 0} onChange={e => setFormData({ ...formData, disp_horario: parseInt(e.target.value) || 0 })} className="block w-full rounded-md border-gray-300 shadow-sm p-2 border" />
|
||||
</div>
|
||||
<div className="bg-gray-100 p-2 rounded text-center flex flex-col justify-center">
|
||||
<span className="block text-xs text-gray-500 font-bold uppercase tracking-wider">Média</span>
|
||||
<span className="text-2xl font-bold text-brand-gold">{formData.media ? (typeof formData.media === 'number' ? formData.media.toFixed(1) : parseFloat(String(formData.media)).toFixed(1)) : "0.0"}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Observações</label>
|
||||
<textarea rows={3} value={formData.observacao || ""} onChange={e => setFormData({ ...formData, observacao: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Valor Tabela Free</label>
|
||||
<input type="text" value={formData.tabela_free || ""} onChange={e => setFormData({ ...formData, tabela_free: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" placeholder="Ex: R$ 200,00" />
|
||||
</div>
|
||||
<div className="flex items-center pt-6">
|
||||
<label className="flex items-center gap-2">
|
||||
<input type="checkbox" checked={formData.extra_por_equipamento || false} onChange={e => setFormData({ ...formData, extra_por_equipamento: e.target.checked })} />
|
||||
<span>Extra por Equipamento</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Equipamentos</label>
|
||||
<textarea rows={3} value={formData.equipamentos || ""} onChange={e => setFormData({ ...formData, equipamentos: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" placeholder="Liste os equipamentos..." />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700">Observações</label>
|
||||
<textarea rows={3} value={formData.observacao || ""} onChange={e => setFormData({ ...formData, observacao: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-gold focus:ring focus:ring-brand-gold focus:ring-opacity-50 p-2 border" />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
<div className="flex justify-end gap-4 pt-4 border-t sticky bottom-0 bg-white">
|
||||
|
|
|
|||
Loading…
Reference in a new issue