7a06d4e691
Frontend: - Migração da API de Geocoding do Mapbox para o Google Maps Places API (googleMapsService.ts) no formulário de eventos, garantindo a busca correta pelo nome de locais (estádios, teatros) e com autopreenchimento. - Correção do fluxo de estado do 'horario_fim', propagando e persistindo o 'endTime' pelo DataContext, garantindo a população dos dados na edição do EventForm. - Adição da visualização do horário final na listagem do Dashboard, no EventCard, painéis de EventDetails e atualização das props defaultEndTime no EventScheduler. Backend: - Atualização e migração dos arquivos gerados pelo sqlc (models.go, agenda.sql.go) para suportar operações no novo design do banco. - Atualização síncrona dos artefatos Swagger de documentação de API (docs.go, swagger.json, swagger.yaml).
1291 lines
51 KiB
TypeScript
1291 lines
51 KiB
TypeScript
import React, { useState, useEffect, useMemo } from "react";
|
|
import { EventType, EventStatus, Address } from "../types";
|
|
import { Input, Select } from "./Input";
|
|
import { Button } from "./Button";
|
|
import {
|
|
MapPin,
|
|
Upload,
|
|
Plus,
|
|
X,
|
|
Check,
|
|
FileText,
|
|
ExternalLink,
|
|
Search,
|
|
CheckCircle,
|
|
Building2,
|
|
AlertCircle,
|
|
AlertTriangle,
|
|
} from "lucide-react";
|
|
import { MapboxResult } from "../services/mapboxService";
|
|
import { searchGoogleLocation, reverseGeocodeGoogle } from "../services/googleMapsService";
|
|
import { useAuth } from "../contexts/AuthContext";
|
|
import { useData } from "../contexts/DataContext";
|
|
import { UserRole } from "../types";
|
|
import { InstitutionForm } from "./InstitutionForm";
|
|
import { MapboxMap } from "./MapboxMap";
|
|
import { getEventTypes, EventTypeResponse, getCadastroFot, createAgenda, getCompanies } from "../services/apiService";
|
|
import { SearchableSelect, SearchableSelectOption } from "./SearchableSelect";
|
|
|
|
interface EventFormProps {
|
|
onCancel: () => void;
|
|
onSubmit: (data: any) => void;
|
|
initialData?: any;
|
|
}
|
|
|
|
export const EventForm: React.FC<EventFormProps> = ({
|
|
onCancel,
|
|
onSubmit,
|
|
initialData,
|
|
}) => {
|
|
const { user, token: userToken } = useAuth();
|
|
const {
|
|
addInstitution,
|
|
} = useData();
|
|
const [activeTab, setActiveTab] = useState<
|
|
"details" | "location" | "briefing" | "files"
|
|
>("details");
|
|
const [addressQuery, setAddressQuery] = useState("");
|
|
const [addressResults, setAddressResults] = useState<MapboxResult[]>([]);
|
|
const [isSearching, setIsSearching] = useState(false);
|
|
const [isGeocoding, setIsGeocoding] = useState(false);
|
|
const [showToast, setShowToast] = useState(false);
|
|
const [showInstitutionForm, setShowInstitutionForm] = useState(false);
|
|
|
|
const [eventTypes, setEventTypes] = useState<EventTypeResponse[]>([]);
|
|
const [isBackendDown, setIsBackendDown] = useState(false);
|
|
const [isLoadingEventTypes, setIsLoadingEventTypes] = useState(true);
|
|
|
|
// Default State or Initial Data
|
|
const [formData, setFormData] = useState(
|
|
initialData || {
|
|
name: "",
|
|
date: "",
|
|
time: "",
|
|
startTime: "",
|
|
endTime: "",
|
|
type: "",
|
|
status: EventStatus.PLANNING,
|
|
locationName: "", // New field: Nome do Local
|
|
address: {
|
|
street: "",
|
|
number: "",
|
|
city: "",
|
|
state: "",
|
|
zip: "",
|
|
lat: -22.7394,
|
|
lng: -47.3314,
|
|
mapLink: "",
|
|
} as Address,
|
|
briefing: "",
|
|
contacts: [{ name: "", role: "", phone: "" }],
|
|
files: [] as File[],
|
|
institutionId: "", // Legacy, might clear or keep for compatibility
|
|
attendees: "",
|
|
courseId: "", // Legacy
|
|
fotId: "", // New field for FOT linkage
|
|
|
|
// Novos campos de gestão de equipe
|
|
qtdFormandos: "",
|
|
qtdFotografos: "",
|
|
qtdRecepcionistas: "",
|
|
qtdCinegrafistas: "",
|
|
qtdEstudios: "",
|
|
qtdPontosFoto: "",
|
|
qtdPontosDecorados: "",
|
|
qtdPontosLed: "",
|
|
}
|
|
);
|
|
|
|
const isClientRequest = user?.role === UserRole.EVENT_OWNER;
|
|
const formTitle = initialData
|
|
? "Editar Evento"
|
|
: isClientRequest
|
|
? "Solicitar Orçamento/Evento"
|
|
: "Cadastrar Novo Evento";
|
|
|
|
const submitLabel = initialData
|
|
? "Salvar Alterações"
|
|
: isClientRequest
|
|
? "Enviar Solicitação"
|
|
: "Criar Evento";
|
|
|
|
// Fetch Event Types
|
|
useEffect(() => {
|
|
const fetchEventTypes = async () => {
|
|
setIsLoadingEventTypes(true);
|
|
const response = await getEventTypes();
|
|
|
|
if (response.isBackendDown) {
|
|
setIsBackendDown(true);
|
|
setEventTypes([]);
|
|
} else if (response.data) {
|
|
setIsBackendDown(false);
|
|
setEventTypes(response.data);
|
|
}
|
|
|
|
setIsLoadingEventTypes(false);
|
|
};
|
|
|
|
fetchEventTypes();
|
|
}, []);
|
|
|
|
// Derived state for dropdowns
|
|
const [companies, setCompanies] = useState<any[]>([]); // New state for companies list
|
|
const [selectedCompanyId, setSelectedCompanyId] = useState(""); // Changed from Name to ID
|
|
|
|
const [selectedCourseName, setSelectedCourseName] = useState("");
|
|
const [selectedInstitutionName, setSelectedInstitutionName] = useState("");
|
|
|
|
// Load Companies for Business Owner / Superadmin
|
|
useEffect(() => {
|
|
if (user?.role === UserRole.BUSINESS_OWNER || user?.role === UserRole.SUPERADMIN) {
|
|
const fetchCompanies = async () => {
|
|
try {
|
|
const response = await getCompanies();
|
|
if (response.data) {
|
|
setCompanies(response.data);
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to load companies", error);
|
|
}
|
|
};
|
|
fetchCompanies();
|
|
}
|
|
}, [user]);
|
|
|
|
// Populate form with initialData
|
|
useEffect(() => {
|
|
if (initialData) {
|
|
console.log("EventForm received initialData:", initialData);
|
|
|
|
// Robust mapping for API snake_case fields
|
|
const mapLink = (initialData as any).local_evento || (initialData.address && initialData.address.mapLink) || "";
|
|
const mappedFotId = (initialData as any).fot_id || initialData.fotId || "";
|
|
const mappedEmpresaId = (initialData as any).empresa_id || (initialData as any).empresaId || "";
|
|
const mappedObservacoes = (initialData as any).observacoes_evento || initialData.name || "";
|
|
|
|
console.log("Mapped Values:", { mappedFotId, mappedEmpresaId, mappedObservacoes, mapLink });
|
|
|
|
// Parse Endereco String if Object is missing but String exists
|
|
// Format expected: "Rua, Numero - Cidade/UF" or similar
|
|
let addressData = initialData.address || {
|
|
street: "", number: "", city: "", state: "", zip: "", lat: -22.7394, lng: -47.3314, mapLink: ""
|
|
};
|
|
|
|
if (!initialData.address && (initialData as any).endereco) {
|
|
// Simple heuristic parser or just default. User might need to refine.
|
|
// Doing a best-effort copy to street if unstructured
|
|
addressData = { ...addressData, street: (initialData as any).endereco || "" };
|
|
}
|
|
|
|
// Safety: ensure all strings
|
|
addressData = {
|
|
street: addressData.street || "",
|
|
number: addressData.number || "",
|
|
city: addressData.city || "",
|
|
state: addressData.state || "",
|
|
zip: addressData.zip || "",
|
|
lat: addressData.lat || -22.7394,
|
|
lng: addressData.lng || -47.3314,
|
|
mapLink: addressData.mapLink || ""
|
|
};
|
|
|
|
// 1. Populate standard form fields
|
|
setFormData(prev => ({
|
|
...prev,
|
|
...initialData,
|
|
startTime: initialData.time || initialData.startTime || (initialData as any).horario || "00:00",
|
|
endTime: initialData.endTime || (initialData as any).horario_fim || prev.endTime || "",
|
|
locationName: mapLink.includes('http') ? "" : mapLink, // Avoid putting URL in name
|
|
fotId: mappedFotId,
|
|
name: mappedObservacoes, // Map Observacoes to Name field (displayed as "Observacoes do Evento")
|
|
briefing: mappedObservacoes, // Sync briefing
|
|
address: addressData,
|
|
|
|
// Mapear campos de gestão de equipe
|
|
qtdFormandos: initialData.qtdFormandos || initialData.attendees || "",
|
|
qtdFotografos: initialData.qtdFotografos || "",
|
|
qtdRecepcionistas: initialData.qtdRecepcionistas || "",
|
|
qtdCinegrafistas: initialData.qtdCinegrafistas || "",
|
|
qtdEstudios: initialData.qtdEstudios || "",
|
|
qtdPontosFoto: initialData.qtdPontosFoto || "",
|
|
qtdPontosDecorados: initialData.qtdPontosDecorados || "",
|
|
qtdPontosLed: initialData.qtdPontosLed || "",
|
|
}));
|
|
|
|
// 2. Populate derived dropdowns if data exists
|
|
if (mappedEmpresaId && (user?.role === UserRole.BUSINESS_OWNER || user?.role === UserRole.SUPERADMIN)) {
|
|
console.log("Setting Selected Company:", mappedEmpresaId);
|
|
setSelectedCompanyId(mappedEmpresaId);
|
|
}
|
|
|
|
if (initialData.curso || (initialData as any).curso_nome) {
|
|
setSelectedCourseName(initialData.curso || (initialData as any).curso_nome || "");
|
|
}
|
|
if (initialData.instituicao) {
|
|
setSelectedInstitutionName(initialData.instituicao || "");
|
|
}
|
|
}
|
|
}, [initialData, user?.role]);
|
|
|
|
// Fetch FOTs filtered by user company OR selected company
|
|
const [availableFots, setAvailableFots] = useState<any[]>([]);
|
|
const [loadingFots, setLoadingFots] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const loadFots = async () => {
|
|
// Determine which company ID to use
|
|
let targetEmpresaId = user?.empresaId;
|
|
|
|
if (user?.role === UserRole.BUSINESS_OWNER || user?.role === UserRole.SUPERADMIN) {
|
|
// Must select a company first
|
|
if (!selectedCompanyId) {
|
|
setAvailableFots([]);
|
|
return;
|
|
}
|
|
targetEmpresaId = selectedCompanyId;
|
|
}
|
|
|
|
// If we have a target company (or user is linked), fetch FOTs
|
|
if (targetEmpresaId || user?.role === UserRole.EVENT_OWNER) {
|
|
setLoadingFots(true);
|
|
// Clear previous FOTs to force UI update and avoid stale data
|
|
setAvailableFots([]);
|
|
|
|
console.log("Fetching FOTs for company:", targetEmpresaId);
|
|
|
|
const token = localStorage.getItem("token") || "";
|
|
const response = await getCadastroFot(token, targetEmpresaId);
|
|
|
|
if (response.data) {
|
|
console.log("FOTs loaded:", response.data.length);
|
|
console.log("FOT Sample:", response.data[0]);
|
|
console.log("Finalized FOTs:", response.data.filter(f => f.finalizada));
|
|
setAvailableFots(response.data);
|
|
}
|
|
setLoadingFots(false);
|
|
}
|
|
};
|
|
loadFots();
|
|
}, [user, selectedCompanyId]);
|
|
|
|
|
|
// Unique Courses (from availableFots - which are already specific to the company)
|
|
const uniqueCourses = Array.from(new Set(availableFots.map(f => f.curso_nome))).sort();
|
|
|
|
// Filtered Institutions based on Course
|
|
const filteredInstitutions = availableFots
|
|
.filter(f => f.curso_nome === selectedCourseName)
|
|
.map(f => f.instituicao)
|
|
.filter((v, i, a) => a.indexOf(v) === i)
|
|
.sort();
|
|
|
|
// Filtered Years based on Course + Inst
|
|
const filteredYears = availableFots
|
|
.filter(f => f.curso_nome === selectedCourseName && f.instituicao === selectedInstitutionName)
|
|
.map(f => ({ id: f.id, label: f.ano_formatura_label }));
|
|
|
|
// Address Autocomplete Logic using Mapbox
|
|
useEffect(() => {
|
|
const timer = setTimeout(async () => {
|
|
if (addressQuery.length > 3) {
|
|
setIsSearching(true);
|
|
const results = await searchGoogleLocation(addressQuery);
|
|
setAddressResults(results);
|
|
setIsSearching(false);
|
|
} else {
|
|
setAddressResults([]);
|
|
}
|
|
}, 500);
|
|
return () => clearTimeout(timer);
|
|
}, [addressQuery]);
|
|
|
|
const handleAddressSelect = (addr: MapboxResult) => {
|
|
setFormData((prev: any) => ({
|
|
...prev,
|
|
locationName: addr.placeName || prev.locationName,
|
|
address: {
|
|
street: addr.street,
|
|
number: addr.number,
|
|
city: addr.city,
|
|
state: addr.state,
|
|
zip: addr.zip,
|
|
lat: addr.lat,
|
|
lng: addr.lng,
|
|
mapLink: addr.mapLink,
|
|
},
|
|
}));
|
|
setAddressQuery("");
|
|
setAddressResults([]);
|
|
};
|
|
|
|
const handleMapLocationChange = async (lat: number, lng: number) => {
|
|
const addressData = await reverseGeocodeGoogle(lat, lng);
|
|
|
|
if (addressData) {
|
|
setFormData((prev: any) => ({
|
|
...prev,
|
|
locationName: addressData.placeName || prev.locationName,
|
|
address: {
|
|
street: addressData.street,
|
|
number: addressData.number,
|
|
city: addressData.city,
|
|
state: addressData.state,
|
|
zip: addressData.zip,
|
|
lat: addressData.lat,
|
|
lng: addressData.lng,
|
|
mapLink: addressData.mapLink,
|
|
},
|
|
}));
|
|
} else {
|
|
setFormData((prev: any) => ({
|
|
...prev,
|
|
address: {
|
|
...prev.address,
|
|
lat,
|
|
lng,
|
|
mapLink: `https://www.google.com/maps/search/?api=1&query=${lat},${lng}`,
|
|
},
|
|
}));
|
|
}
|
|
};
|
|
|
|
const handleManualAddressChange = async () => {
|
|
const { street, number, city, state } = formData.address;
|
|
const query = `${street} ${number}, ${city}, ${state}`.trim();
|
|
if (query.length < 5) return;
|
|
|
|
setIsGeocoding(true);
|
|
try {
|
|
const results = await searchGoogleLocation(query);
|
|
if (results.length > 0) {
|
|
const firstResult = results[0];
|
|
setFormData((prev: any) => ({
|
|
...prev,
|
|
locationName: firstResult.placeName || prev.locationName,
|
|
address: {
|
|
...prev.address,
|
|
lat: firstResult.lat,
|
|
lng: firstResult.lng,
|
|
mapLink: firstResult.mapLink,
|
|
},
|
|
}));
|
|
}
|
|
} catch (error) {
|
|
console.error("Erro ao geocodificar endereço manual:", error);
|
|
} finally {
|
|
setIsGeocoding(false);
|
|
}
|
|
};
|
|
|
|
const addContact = () => {
|
|
setFormData((prev: any) => ({
|
|
...prev,
|
|
contacts: [...prev.contacts, { name: "", role: "", phone: "" }],
|
|
}));
|
|
};
|
|
|
|
const removeContact = (index: number) => {
|
|
const newContacts = [...formData.contacts];
|
|
newContacts.splice(index, 1);
|
|
setFormData((prev: any) => ({ ...prev, contacts: newContacts }));
|
|
};
|
|
|
|
const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
if (e.target.files) {
|
|
setFormData((prev: any) => ({
|
|
...prev,
|
|
files: [...prev.files, ...Array.from(e.target.files || [])],
|
|
}));
|
|
}
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
// Validation (Observations are optional)
|
|
// if (!formData.name) return alert("Preencha o tipo de evento");
|
|
if (!formData.date) return alert("Preencha a data");
|
|
if (!formData.attendees || parseInt(formData.attendees) <= 0) return alert("Preencha o número de formandos");
|
|
|
|
// Validação condicional apenas para empresas
|
|
if ((user?.role === UserRole.BUSINESS_OWNER || user?.role === UserRole.SUPERADMIN)) {
|
|
if (!formData.qtdFotografos || parseInt(formData.qtdFotografos) <= 0) {
|
|
return alert("Preencha a quantidade de fotógrafos necessários");
|
|
}
|
|
}
|
|
|
|
// Ensure typeId is valid
|
|
let finalTypeId = formData.typeId;
|
|
if (!finalTypeId || finalTypeId === "00000000-0000-0000-0000-000000000000") {
|
|
// Try to match by name
|
|
const matchingType = eventTypes.find(t => t.nome === formData.type);
|
|
if (matchingType) {
|
|
finalTypeId = matchingType.id;
|
|
} else {
|
|
// If strictly required by DB, we must stop.
|
|
// But for legacy compatibility, maybe we prompt user
|
|
return alert("Tipo de evento inválido. Por favor, selecione novamente o tipo do evento.");
|
|
}
|
|
}
|
|
|
|
if (!formData.fotId) {
|
|
alert("ERRO CRÍTICO: Turma (FOT) não identificada. Por favor, selecione a Turma ou Empresa novamente.");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Prepare Payload for Agenda API
|
|
const payload = {
|
|
fot_id: formData.fotId, // Must be valid UUID
|
|
tipo_evento_id: finalTypeId,
|
|
data_evento: new Date(formData.date).toISOString(),
|
|
horario: formData.startTime || "",
|
|
horario_fim: formData.endTime || "",
|
|
observacoes_evento: formData.name || formData.briefing || "",
|
|
local_evento: formData.locationName || "",
|
|
endereco: `${formData.address.street}, ${formData.address.number} - ${formData.address.city}/${formData.address.state}`,
|
|
qtd_formandos: parseInt(formData.attendees) || 0,
|
|
|
|
// Campos de gestão de equipe
|
|
qtd_fotografos: parseInt(formData.qtdFotografos) || 0,
|
|
qtd_recepcionistas: parseInt(formData.qtdRecepcionistas) || 0,
|
|
qtd_cinegrafistas: parseInt(formData.qtdCinegrafistas) || 0,
|
|
qtd_estudios: parseInt(formData.qtdEstudios) || 0,
|
|
qtd_pontos_foto: parseInt(formData.qtdPontosFoto) || 0,
|
|
qtd_pontos_decorados: parseInt(formData.qtdPontosDecorados) || 0,
|
|
qtd_pontos_led: parseInt(formData.qtdPontosLed) || 0,
|
|
|
|
status_profissionais: "PENDING",
|
|
cine_faltante: 0,
|
|
logistica_observacoes: "",
|
|
pre_venda: true,
|
|
contatos: formData.contacts
|
|
};
|
|
|
|
// Submit to parent handler
|
|
if (onSubmit) {
|
|
await onSubmit(payload);
|
|
}
|
|
|
|
setShowToast(true);
|
|
// alert("Solicitação enviada com sucesso!"); // O toast já é suficiente e mais elegante
|
|
} catch (e: any) {
|
|
console.error(e);
|
|
alert("Erro ao salvar: " + (e.message || "Erro desconhecido"));
|
|
setShowToast(false);
|
|
}
|
|
};
|
|
|
|
const handleInstitutionSubmit = (institutionData: any) => {
|
|
const newInstitution = {
|
|
...institutionData,
|
|
id: `inst-${Date.now()}`,
|
|
ownerId: user?.id || "",
|
|
};
|
|
addInstitution(newInstitution);
|
|
setFormData((prev: any) => ({ ...prev, institutionId: newInstitution.id }));
|
|
setShowInstitutionForm(false);
|
|
};
|
|
|
|
if (showInstitutionForm) {
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
|
<InstitutionForm
|
|
onCancel={() => setShowInstitutionForm(false)}
|
|
onSubmit={handleInstitutionSubmit}
|
|
userId={user?.id || ""}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="bg-white rounded-lg shadow-xl overflow-hidden max-w-4xl mx-auto border border-gray-100 slide-up relative">
|
|
{/* Success Toast */}
|
|
{showToast && (
|
|
<div className="absolute top-4 right-4 z-50 bg-brand-black text-white px-4 sm:px-6 py-3 sm:py-4 rounded shadow-2xl flex items-center space-x-2 sm:space-x-3 fade-in">
|
|
<CheckCircle className="text-brand-gold h-5 w-5 sm:h-6 sm:w-6" />
|
|
<div>
|
|
<h4 className="font-bold text-xs sm:text-sm">Sucesso!</h4>
|
|
<p className="text-[10px] sm:text-xs text-gray-300">
|
|
As informações foram salvas.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Form Header */}
|
|
<div className="bg-gray-50 border-b px-4 sm:px-6 md:px-8 py-4 sm:py-5 md:py-6">
|
|
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 sm:gap-0">
|
|
<div>
|
|
<h2 className="text-xl sm:text-2xl font-serif text-brand-black">
|
|
{formTitle}
|
|
</h2>
|
|
<p className="text-xs sm:text-sm text-gray-500 mt-1">
|
|
{isClientRequest
|
|
? "Preencha os detalhes do seu sonho. Nossa equipe analisará em breve."
|
|
: "Preencha as informações técnicas do evento."}
|
|
</p>
|
|
</div>
|
|
{/* Step indicators */}
|
|
<div className="hidden sm:flex space-x-2">
|
|
{["details", "location", "briefing", "files"].map((tab, idx) => (
|
|
<div
|
|
key={tab}
|
|
className={`flex flex-col items-center ${activeTab === tab ? "opacity-100" : "opacity-40"
|
|
}`}
|
|
>
|
|
<span
|
|
className={`w-7 h-7 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-xs font-bold mb-1 ${activeTab === tab
|
|
? "bg-[#492E61] text-white"
|
|
: "bg-gray-200 text-gray-600"
|
|
}`}
|
|
>
|
|
{idx + 1}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Tabs */}
|
|
<div className="lg:hidden border-b border-gray-200 bg-white overflow-x-auto scrollbar-hide">
|
|
<div className="flex min-w-max">
|
|
{[
|
|
{ id: "details", label: "Detalhes", icon: "1" },
|
|
{ id: "location", label: "Localização", icon: "2" },
|
|
{
|
|
id: "briefing",
|
|
label: isClientRequest ? "Desejos" : "Briefing",
|
|
icon: "3",
|
|
},
|
|
{ id: "files", label: "Arquivos", icon: "4" },
|
|
].map((item) => (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => setActiveTab(item.id as any)}
|
|
className={`flex-1 px-4 py-3 text-xs sm:text-sm font-medium transition-colors border-b-2 whitespace-nowrap ${activeTab === item.id
|
|
? "text-brand-gold border-brand-gold bg-brand-gold/5"
|
|
: "text-gray-500 border-transparent hover:bg-gray-50"
|
|
}`}
|
|
>
|
|
<span className="inline-block w-5 h-5 rounded-full text-[10px] leading-5 text-center mr-1.5 ${
|
|
activeTab === item.id ? 'bg-brand-gold text-white' : 'bg-gray-200 text-gray-600'
|
|
}">
|
|
{item.icon}
|
|
</span>
|
|
{item.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="lg:grid lg:grid-cols-4 min-h-[500px]">
|
|
{/* Desktop Sidebar Navigation */}
|
|
<div className="hidden lg:block lg:col-span-1 border-r border-gray-100 bg-gray-50/50 p-4 space-y-2">
|
|
{[
|
|
{ id: "details", label: "Detalhes & Data" },
|
|
{ id: "location", label: "Localização" },
|
|
{
|
|
id: "briefing",
|
|
label: isClientRequest ? "Seus Desejos" : "Briefing & Equipe",
|
|
},
|
|
{ id: "files", label: "Inspirações" },
|
|
].map((item) => (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => setActiveTab(item.id as any)}
|
|
className={`w-full text-left px-4 py-3 rounded-sm text-sm font-medium transition-colors ${activeTab === item.id
|
|
? "bg-white shadow-sm text-brand-gold border-l-4 border-brand-gold"
|
|
: "text-gray-500 hover:bg-gray-100"
|
|
}`}
|
|
>
|
|
{item.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Form Content */}
|
|
<div className="lg:col-span-3 p-4 sm:p-6 md:p-8">
|
|
{activeTab === "details" && (
|
|
<div className="space-y-6 fade-in">
|
|
<div className="grid grid-cols-1 gap-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Tipo de Evento*
|
|
</label>
|
|
<select
|
|
required
|
|
value={formData.typeId || ""}
|
|
onChange={(e) => {
|
|
const selectedId = e.target.value;
|
|
const selectedType = eventTypes.find((t) => t.id === selectedId);
|
|
setFormData({
|
|
...formData,
|
|
typeId: selectedId,
|
|
type: selectedType?.nome || ""
|
|
});
|
|
}}
|
|
disabled={isLoadingEventTypes || isBackendDown}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold disabled:bg-gray-100 disabled:cursor-not-allowed"
|
|
>
|
|
<option value="">Selecione o tipo de evento</option>
|
|
{eventTypes.map((type) => (
|
|
<option key={type.id} value={type.id}>
|
|
{type.nome}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{isBackendDown && (
|
|
<div className="mt-2 flex items-center gap-2 text-sm text-red-600">
|
|
<AlertTriangle size={16} />
|
|
<span>Backend não está rodando. Não é possível carregar os tipos de eventos.</span>
|
|
</div>
|
|
)}
|
|
{isLoadingEventTypes && !isBackendDown && (
|
|
<div className="mt-2 text-sm text-gray-500">
|
|
Carregando tipos de eventos...
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<Input
|
|
label="Observações do Evento (Opcional)"
|
|
placeholder="Ex: Cerimônia de Colação de Grau"
|
|
value={formData.name}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, name: e.target.value })
|
|
}
|
|
/>
|
|
<Input
|
|
label="Data Pretendida"
|
|
type="date"
|
|
value={formData.date}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, date: e.target.value })
|
|
}
|
|
/>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<Input
|
|
label="Horário de Início*"
|
|
type="time"
|
|
value={formData.startTime}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, startTime: e.target.value })
|
|
}
|
|
required
|
|
/>
|
|
<Input
|
|
label="Horário de Término (Opcional)"
|
|
type="time"
|
|
value={formData.endTime}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, endTime: e.target.value })
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
<Input
|
|
label="Número de Formandos*"
|
|
placeholder="Ex: 50"
|
|
value={formData.attendees}
|
|
onChange={(e) => {
|
|
const value = e.target.value;
|
|
if (value === "" || /^\d+$/.test(value)) {
|
|
setFormData({ ...formData, attendees: value, qtdFormandos: value });
|
|
}
|
|
}}
|
|
type="text"
|
|
inputMode="numeric"
|
|
required
|
|
/>
|
|
|
|
{/* Seção de Gestão de Equipe - Apenas para Empresas */}
|
|
{(user?.role === UserRole.BUSINESS_OWNER || user?.role === UserRole.SUPERADMIN) && (
|
|
<div className="bg-blue-50 p-4 rounded-md border border-blue-200">
|
|
<h3 className="text-sm font-medium text-blue-700 mb-4 uppercase tracking-wider">Gestão de Equipe e Recursos</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<Input
|
|
label="Qtd. Fotógrafos*"
|
|
placeholder="Ex: 2"
|
|
value={formData.qtdFotografos}
|
|
onChange={(e) => {
|
|
const value = e.target.value;
|
|
if (value === "" || /^\d+$/.test(value)) {
|
|
setFormData({ ...formData, qtdFotografos: value });
|
|
}
|
|
}}
|
|
type="text"
|
|
inputMode="numeric"
|
|
required
|
|
/>
|
|
<Input
|
|
label="Qtd. Recepcionistas"
|
|
placeholder="Ex: 1"
|
|
value={formData.qtdRecepcionistas}
|
|
onChange={(e) => {
|
|
const value = e.target.value;
|
|
if (value === "" || /^\d+$/.test(value)) {
|
|
setFormData({ ...formData, qtdRecepcionistas: value });
|
|
}
|
|
}}
|
|
type="text"
|
|
inputMode="numeric"
|
|
/>
|
|
<Input
|
|
label="Qtd. Cinegrafistas"
|
|
placeholder="Ex: 1"
|
|
value={formData.qtdCinegrafistas}
|
|
onChange={(e) => {
|
|
const value = e.target.value;
|
|
if (value === "" || /^\d+$/.test(value)) {
|
|
setFormData({ ...formData, qtdCinegrafistas: value });
|
|
}
|
|
}}
|
|
type="text"
|
|
inputMode="numeric"
|
|
/>
|
|
<Input
|
|
label="Qtd. Estúdios"
|
|
placeholder="Ex: 1"
|
|
value={formData.qtdEstudios}
|
|
onChange={(e) => {
|
|
const value = e.target.value;
|
|
if (value === "" || /^\d+$/.test(value)) {
|
|
setFormData({ ...formData, qtdEstudios: value });
|
|
}
|
|
}}
|
|
type="text"
|
|
inputMode="numeric"
|
|
/>
|
|
<Input
|
|
label="Qtd. Pontos de Foto"
|
|
placeholder="Ex: 3"
|
|
value={formData.qtdPontosFoto}
|
|
onChange={(e) => {
|
|
const value = e.target.value;
|
|
if (value === "" || /^\d+$/.test(value)) {
|
|
setFormData({ ...formData, qtdPontosFoto: value });
|
|
}
|
|
}}
|
|
type="text"
|
|
inputMode="numeric"
|
|
/>
|
|
<Input
|
|
label="Qtd. Pontos Decorados"
|
|
placeholder="Ex: 2"
|
|
value={formData.qtdPontosDecorados}
|
|
onChange={(e) => {
|
|
const value = e.target.value;
|
|
if (value === "" || /^\d+$/.test(value)) {
|
|
setFormData({ ...formData, qtdPontosDecorados: value });
|
|
}
|
|
}}
|
|
type="text"
|
|
inputMode="numeric"
|
|
/>
|
|
<Input
|
|
label="Qtd. Pontos LED"
|
|
placeholder="Ex: 1"
|
|
value={formData.qtdPontosLed}
|
|
onChange={(e) => {
|
|
const value = e.target.value;
|
|
if (value === "" || /^\d+$/.test(value)) {
|
|
setFormData({ ...formData, qtdPontosLed: value });
|
|
}
|
|
}}
|
|
type="text"
|
|
inputMode="numeric"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Dynamic FOT Selection */}
|
|
<div className="bg-gray-50 p-4 rounded-md border border-gray-200">
|
|
<h3 className="text-sm font-medium text-gray-700 mb-4 uppercase tracking-wider">Seleção da Turma</h3>
|
|
|
|
{!user?.empresaId && user?.role !== UserRole.SUPERADMIN && user?.role !== UserRole.BUSINESS_OWNER ? (
|
|
<div className="bg-red-50 border-l-4 border-red-400 p-4 mb-4">
|
|
<div className="flex">
|
|
<div className="flex-shrink-0">
|
|
<AlertCircle className="h-5 w-5 text-red-400" aria-hidden="true" />
|
|
</div>
|
|
<div className="ml-3">
|
|
<p className="text-sm text-red-700">
|
|
Sua conta não está vinculada a nenhuma empresa. Por favor, entre em contato com a administração para regularizar seu cadastro antes de solicitar um evento.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* 0. Empresa (Only for Business Owner / Superadmin) */}
|
|
{(user?.role === UserRole.BUSINESS_OWNER || user?.role === UserRole.SUPERADMIN) && (
|
|
<div className="mb-4">
|
|
<label className="block text-sm text-gray-600 mb-1">Empresa</label>
|
|
<select
|
|
className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-brand-gold focus:border-brand-gold"
|
|
value={selectedCompanyId}
|
|
onChange={e => {
|
|
setSelectedCompanyId(e.target.value);
|
|
setFormData({ ...formData, fotId: "" });
|
|
}}
|
|
>
|
|
<option value="">Selecione a Empresa</option>
|
|
{companies.map(c => <option key={c.id} value={c.id}>{c.nome}</option>)}
|
|
</select>
|
|
</div>
|
|
)}
|
|
|
|
{/* Warning if Company Selected but No FOTs */}
|
|
{selectedCompanyId && !loadingFots && availableFots.length === 0 && (user?.role === UserRole.BUSINESS_OWNER || user?.role === UserRole.SUPERADMIN) && (
|
|
<div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-4">
|
|
<div className="flex">
|
|
<div className="flex-shrink-0">
|
|
<AlertTriangle className="h-5 w-5 text-yellow-400" aria-hidden="true" />
|
|
</div>
|
|
<div className="ml-3">
|
|
<p className="text-sm text-yellow-700">
|
|
Esta empresa selecionada ainda não possui turmas, cursos ou FOTs cadastrados.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Consolidated Turma Selection */}
|
|
<div className="mb-0">
|
|
<SearchableSelect
|
|
label="Selecione a Turma"
|
|
placeholder="Selecione a Turma (Curso - Instituição - Ano)"
|
|
value={formData.fotId || ""}
|
|
onChange={(value) => {
|
|
const selectedFot = availableFots.find(f => f.id === value);
|
|
if (selectedFot) {
|
|
setFormData({
|
|
...formData,
|
|
fotId: value,
|
|
});
|
|
} else {
|
|
setFormData({ ...formData, fotId: "" });
|
|
}
|
|
}}
|
|
disabled={loadingFots || ((user?.role === UserRole.BUSINESS_OWNER || user?.role === UserRole.SUPERADMIN) && !selectedCompanyId)}
|
|
options={availableFots.map(f => ({
|
|
value: f.id,
|
|
label: `${f.curso_nome} - ${f.instituicao} - ${f.ano_formatura_label} (FOT ${f.fot})${f.finalizada ? " (FINALIZADA)" : ""}`,
|
|
disabled: f.finalizada,
|
|
className: f.finalizada ? "text-red-600 bg-red-50 font-bold" : "",
|
|
style: f.finalizada ? { color: 'red', fontWeight: 'bold' } : undefined
|
|
}))}
|
|
/>
|
|
|
|
{loadingFots && <p className="text-xs text-gray-500 mt-1">Carregando turmas...</p>}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row justify-between gap-3 mt-8">
|
|
<Button
|
|
variant="outline"
|
|
onClick={onCancel}
|
|
className="w-full sm:w-auto order-2 sm:order-1"
|
|
>
|
|
Voltar
|
|
</Button>
|
|
<div className="flex gap-3 w-full sm:w-auto order-1 sm:order-2">
|
|
<Button
|
|
onClick={handleSubmit}
|
|
variant="secondary"
|
|
className="flex-1 sm:flex-initial"
|
|
>
|
|
Salvar Alterações
|
|
</Button>
|
|
<Button
|
|
onClick={() => setActiveTab("location")}
|
|
className="flex-1 sm:flex-initial"
|
|
disabled={(!user?.empresaId && user?.role !== UserRole.SUPERADMIN && user?.role !== UserRole.BUSINESS_OWNER)}
|
|
>
|
|
Próximo: Localização
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === "location" && (
|
|
<div className="space-y-6 fade-in">
|
|
|
|
{/* Nome do Local */}
|
|
<Input
|
|
label="Nome do Local"
|
|
placeholder="Ex: Espaço das Américas, Salão de Festas X"
|
|
value={formData.locationName}
|
|
onChange={(e) => setFormData({ ...formData, locationName: e.target.value })}
|
|
/>
|
|
|
|
<div className="bg-gray-50 p-4 rounded-lg border border-gray-200">
|
|
<label className="block text-sm font-medium text-gray-700 mb-2 tracking-wide uppercase text-xs">
|
|
BUSCA DE ENDEREÇO (POWERED BY GOOGLE)
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-sm focus:outline-none focus:ring-1 focus:ring-brand-gold focus:border-brand-gold transition-colors pr-10"
|
|
placeholder="Digite o nome do local ou endereço..."
|
|
value={addressQuery}
|
|
onChange={(e) => setAddressQuery(e.target.value)}
|
|
/>
|
|
<div className="absolute right-3 top-2.5 text-gray-400">
|
|
{isSearching ? (
|
|
<div className="animate-spin h-5 w-5 border-2 border-brand-gold rounded-full border-t-transparent"></div>
|
|
) : (
|
|
<Search size={20} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{addressResults.length > 0 && (
|
|
<ul className="absolute z-10 w-full bg-white border mt-1 shadow-lg rounded-sm max-h-64 overflow-y-auto">
|
|
{addressResults.map((addr, idx) => (
|
|
<li
|
|
key={idx}
|
|
className="px-4 py-3 hover:bg-gray-50 cursor-pointer text-sm border-b border-gray-50 last:border-0"
|
|
onClick={() => handleAddressSelect(addr)}
|
|
>
|
|
<div className="flex justify-between items-start">
|
|
<div className="flex items-start">
|
|
<MapPin
|
|
size={16}
|
|
className="mt-0.5 mr-2 text-brand-gold flex-shrink-0"
|
|
/>
|
|
<div>
|
|
<p className="font-medium text-gray-800">
|
|
{addr.description}
|
|
</p>
|
|
<p className="text-xs text-gray-500 mt-0.5">
|
|
{addr.city}, {addr.state}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{addr.mapLink && (
|
|
<span className="flex items-center text-[10px] text-blue-600 bg-blue-50 px-2 py-1 rounded ml-2">
|
|
<img
|
|
src="https://www.google.com/images/branding/product/ico/maps15_bnuw3a_32dp.png"
|
|
alt="Maps"
|
|
className="w-3 h-3 mr-1"
|
|
/>
|
|
Maps
|
|
</span>
|
|
)}
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
<div className="sm:col-span-2">
|
|
<Input
|
|
label="Rua"
|
|
value={formData.address.street}
|
|
onChange={(e) => {
|
|
setFormData({
|
|
...formData,
|
|
address: {
|
|
...formData.address,
|
|
street: e.target.value,
|
|
},
|
|
});
|
|
}}
|
|
onBlur={handleManualAddressChange}
|
|
placeholder="Digite o nome da rua"
|
|
/>
|
|
</div>
|
|
<Input
|
|
label="Número"
|
|
placeholder="123"
|
|
value={formData.address.number}
|
|
onChange={(e) => {
|
|
const value = e.target.value;
|
|
setFormData({
|
|
...formData,
|
|
address: { ...formData.address, number: value },
|
|
});
|
|
}}
|
|
onBlur={handleManualAddressChange}
|
|
type="text"
|
|
inputMode="numeric"
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<Input
|
|
label="Cidade"
|
|
value={formData.address.city}
|
|
onChange={(e) => {
|
|
setFormData({
|
|
...formData,
|
|
address: { ...formData.address, city: e.target.value },
|
|
});
|
|
}}
|
|
onBlur={handleManualAddressChange}
|
|
placeholder="Digite a cidade"
|
|
/>
|
|
<Input
|
|
label="Estado"
|
|
value={formData.address.state}
|
|
onChange={(e) => {
|
|
const value = e.target.value.toUpperCase().slice(0, 2);
|
|
setFormData({
|
|
...formData,
|
|
address: { ...formData.address, state: value },
|
|
});
|
|
}}
|
|
onBlur={handleManualAddressChange}
|
|
placeholder="SP"
|
|
maxLength={2}
|
|
/>
|
|
</div>
|
|
|
|
{/* Mapa Interativo */}
|
|
<div className="mt-6">
|
|
<label className="block text-sm font-medium text-gray-700 mb-3 tracking-wide uppercase text-xs flex items-center justify-between">
|
|
<span className="flex items-center gap-2"><MapPin className="w-4 h-4 text-[#B9CF32]" /> Mapa Interativo - Ajuste a Localização Exata</span>
|
|
{isGeocoding && (
|
|
<span className="text-xs text-brand-gold flex items-center normal-case">
|
|
<div className="animate-spin h-3 w-3 border-2 border-brand-gold rounded-full border-t-transparent mr-2"></div>
|
|
Localizando no mapa...
|
|
</span>
|
|
)}
|
|
</label>
|
|
<MapboxMap
|
|
initialLat={formData.address.lat || -22.7394}
|
|
initialLng={formData.address.lng || -47.3314}
|
|
onLocationChange={handleMapLocationChange}
|
|
height="300px"
|
|
className="sm:h-[400px] md:h-[450px]"
|
|
/>
|
|
</div>
|
|
|
|
{formData.address.mapLink && (
|
|
<div className="bg-gray-50 p-3 rounded border border-gray-200 flex items-center justify-between">
|
|
<span className="text-xs text-gray-500 flex items-center">
|
|
<Check size={14} className="mr-1 text-green-500" />
|
|
Localização verificada via Mapbox
|
|
</span>
|
|
<a
|
|
href={formData.address.mapLink}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-xs text-brand-gold flex items-center hover:underline"
|
|
>
|
|
Ver no mapa <ExternalLink size={12} className="ml-1" />
|
|
</a>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-col sm:flex-row justify-between gap-3 mt-8">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setActiveTab("details")}
|
|
className="w-full sm:w-auto"
|
|
>
|
|
Voltar
|
|
</Button>
|
|
<div className="flex gap-3 w-full sm:w-auto">
|
|
<Button
|
|
onClick={handleSubmit}
|
|
variant="secondary"
|
|
className="flex-1 sm:flex-initial"
|
|
>
|
|
Salvar Alterações
|
|
</Button>
|
|
<Button
|
|
onClick={() => setActiveTab("briefing")}
|
|
className="flex-1 sm:flex-initial"
|
|
>
|
|
Próximo
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === "briefing" && (
|
|
<div className="space-y-6 fade-in">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1 tracking-wide uppercase text-xs">
|
|
{isClientRequest
|
|
? "Conte-nos sobre o seu sonho"
|
|
: "Briefing Técnico"}
|
|
</label>
|
|
<textarea
|
|
className="w-full border border-gray-300 rounded-sm p-3 focus:outline-none focus:border-brand-gold h-32 text-sm"
|
|
placeholder={
|
|
isClientRequest
|
|
? "Fale sobre..."
|
|
: "Instruções técnicas..."
|
|
}
|
|
value={formData.briefing}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, briefing: e.target.value })
|
|
}
|
|
></textarea>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex justify-between items-center mb-2">
|
|
<label className="text-sm font-medium text-gray-700 tracking-wide uppercase text-xs">
|
|
Contatos / Responsáveis
|
|
</label>
|
|
<button
|
|
onClick={addContact}
|
|
className="text-xs text-brand-gold font-bold hover:underline flex items-center"
|
|
>
|
|
<Plus size={14} className="mr-1" /> Adicionar
|
|
</button>
|
|
</div>
|
|
<div className="space-y-3">
|
|
{formData.contacts.map((contact: any, idx: number) => (
|
|
<div key={idx} className="flex space-x-2 items-start">
|
|
<Input
|
|
label={idx === 0 ? "Nome" : ""}
|
|
placeholder="Nome"
|
|
value={contact.name}
|
|
onChange={(e) => {
|
|
const newContacts = [...formData.contacts];
|
|
newContacts[idx].name = e.target.value;
|
|
setFormData({ ...formData, contacts: newContacts });
|
|
}}
|
|
/>
|
|
<Input
|
|
label={idx === 0 ? "Papel" : ""}
|
|
placeholder="Ex: Cerimonialista"
|
|
value={contact.role}
|
|
onChange={(e) => {
|
|
const newContacts = [...formData.contacts];
|
|
newContacts[idx].role = e.target.value;
|
|
setFormData({ ...formData, contacts: newContacts });
|
|
}}
|
|
/>
|
|
<Input
|
|
label={idx === 0 ? "Telefone" : ""}
|
|
placeholder="(11) 9..."
|
|
value={contact.phone}
|
|
onChange={(e) => {
|
|
const newContacts = [...formData.contacts];
|
|
newContacts[idx].phone = e.target.value;
|
|
setFormData({ ...formData, contacts: newContacts });
|
|
}}
|
|
/>
|
|
<button
|
|
onClick={() => removeContact(idx)}
|
|
className={`mt-1 p-2 text-gray-400 hover:text-red-500 ${idx === 0 ? "mt-7" : ""
|
|
}`}
|
|
>
|
|
<X size={16} />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row justify-between gap-3 mt-8">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setActiveTab("location")}
|
|
className="w-full sm:w-auto"
|
|
>
|
|
Voltar
|
|
</Button>
|
|
<div className="flex gap-3 w-full sm:w-auto">
|
|
<Button
|
|
onClick={handleSubmit}
|
|
variant="secondary"
|
|
className="flex-1 sm:flex-initial"
|
|
>
|
|
Salvar Alterações
|
|
</Button>
|
|
<Button
|
|
onClick={() => setActiveTab("files")}
|
|
className="flex-1 sm:flex-initial"
|
|
>
|
|
Próximo
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === "files" && (
|
|
<div className="space-y-6 fade-in">
|
|
<div className="border-2 border-dashed border-gray-300 rounded-lg p-10 text-center hover:bg-gray-50 transition-colors relative">
|
|
<input
|
|
type="file"
|
|
multiple
|
|
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
|
|
onChange={handleFileUpload}
|
|
/>
|
|
<Upload size={40} className="mx-auto text-gray-400 mb-4" />
|
|
<p className="text-sm text-gray-600 font-medium">
|
|
{isClientRequest
|
|
? "Anexe referências visuais (Moodboard)"
|
|
: "Anexe contratos e cronogramas"}
|
|
</p>
|
|
<p className="text-xs text-gray-400 mt-1">
|
|
PDF, JPG, PNG (Max 10MB)
|
|
</p>
|
|
</div>
|
|
|
|
{(formData.files || []).length > 0 && (
|
|
<div className="space-y-2">
|
|
<h4 className="text-sm font-medium text-gray-700">
|
|
Arquivos Selecionados:
|
|
</h4>
|
|
{formData.files.map((file: any, idx: number) => (
|
|
<div
|
|
key={idx}
|
|
className="flex items-center justify-between p-3 bg-gray-50 rounded border border-gray-100"
|
|
>
|
|
<div className="flex items-center">
|
|
<FileText size={18} className="text-brand-gold mr-3" />
|
|
<div>
|
|
<p className="text-sm font-medium">{file.name}</p>
|
|
<p className="text-xs text-gray-400">
|
|
{(file.size / 1024).toFixed(1)} KB
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Check size={16} className="text-green-500" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-col sm:flex-row justify-between gap-3 mt-8">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setActiveTab("briefing")}
|
|
className="w-full sm:w-auto"
|
|
>
|
|
Voltar
|
|
</Button>
|
|
<Button
|
|
onClick={handleSubmit}
|
|
variant="secondary"
|
|
className="w-full sm:w-auto"
|
|
>
|
|
{submitLabel}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div >
|
|
</div >
|
|
);
|
|
};
|