feat: (eventos) vincula dropdown com api

frontend/components/EventForm.tsx

@@ -26,7 +26,7 @@ import { useData } from "../contexts/DataContext";
 import { UserRole } from "../types";
 import { InstitutionForm } from "./InstitutionForm";
 import { MapboxMap } from "./MapboxMap";
-import { getEventTypes } from "../services/apiService";
+import { getEventTypes, EventTypeResponse } from "../services/apiService";
 
 interface EventFormProps {
   onCancel: () => void;
@@ -56,7 +56,7 @@ export const EventForm: React.FC<EventFormProps> = ({
   const [showToast, setShowToast] = useState(false);
   const [showInstitutionForm, setShowInstitutionForm] = useState(false);
   const [availableCourses, setAvailableCourses] = useState<any[]>([]);
-  const [eventTypes, setEventTypes] = useState<string[]>([]);
+  const [eventTypes, setEventTypes] = useState<EventTypeResponse[]>([]);
   const [isBackendDown, setIsBackendDown] = useState(false);
   const [isLoadingEventTypes, setIsLoadingEventTypes] = useState(true);
 
@@ -101,15 +101,15 @@ export const EventForm: React.FC<EventFormProps> = ({
   const formTitle = initialData
     ? "Editar Evento"
     : isClientRequest
-    ? "Solicitar Orçamento/Evento"
+      ? "Solicitar Orçamento/Evento"
-    : "Cadastrar Novo Evento";
+      : "Cadastrar Novo Evento";
 
   // Buscar tipos de eventos do backend
   useEffect(() => {
     const fetchEventTypes = async () => {
       setIsLoadingEventTypes(true);
       const response = await getEventTypes();
-      
+
       if (response.isBackendDown) {
         setIsBackendDown(true);
         setEventTypes([]);
@@ -117,7 +117,7 @@ export const EventForm: React.FC<EventFormProps> = ({
         setIsBackendDown(false);
         setEventTypes(response.data);
       }
-      
+
       setIsLoadingEventTypes(false);
     };
 
@@ -126,8 +126,8 @@ export const EventForm: React.FC<EventFormProps> = ({
   const submitLabel = initialData
     ? "Salvar Alterações"
     : isClientRequest
-    ? "Enviar Solicitação"
+      ? "Enviar Solicitação"
-    : "Criar Evento";
+      : "Criar Evento";
 
   // Carregar cursos disponíveis quando instituição for selecionada
   useEffect(() => {
@@ -342,16 +342,14 @@ export const EventForm: React.FC<EventFormProps> = ({
             {["details", "location", "briefing", "files"].map((tab, idx) => (
               <div
                 key={tab}
-                className={`flex flex-col items-center ${
+                className={`flex flex-col items-center ${activeTab === tab ? "opacity-100" : "opacity-40"
-                  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 ${
+                  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
-                    activeTab === tab
+                    ? "bg-[#492E61] text-white"
-                      ? "bg-[#492E61] text-white"
+                    : "bg-gray-200 text-gray-600"
-                      : "bg-gray-200 text-gray-600"
+                    }`}
-                  }`}
                 >
                   {idx + 1}
                 </span>
@@ -377,11 +375,10 @@ export const EventForm: React.FC<EventFormProps> = ({
             <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 ${
+              className={`flex-1 px-4 py-3 text-xs sm:text-sm font-medium transition-colors border-b-2 whitespace-nowrap ${activeTab === item.id
-                activeTab === item.id
+                ? "text-brand-gold border-brand-gold bg-brand-gold/5"
-                  ? "text-brand-gold border-brand-gold bg-brand-gold/5"
+                : "text-gray-500 border-transparent hover:bg-gray-50"
-                  : "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 ${
@@ -411,11 +408,10 @@ export const EventForm: React.FC<EventFormProps> = ({
             <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 ${
+              className={`w-full text-left px-4 py-3 rounded-sm text-sm font-medium transition-colors ${activeTab === item.id
-                activeTab === item.id
+                ? "bg-white shadow-sm text-brand-gold border-l-4 border-brand-gold"
-                  ? "bg-white shadow-sm text-brand-gold border-l-4 border-brand-gold"
+                : "text-gray-500 hover:bg-gray-100"
-                  : "text-gray-500 hover:bg-gray-100"
+                }`}
-              }`}
             >
               {item.label}
             </button>
@@ -478,8 +474,8 @@ export const EventForm: React.FC<EventFormProps> = ({
                   >
                     <option value="">Selecione o tipo de evento</option>
                     {eventTypes.map((type) => (
-                      <option key={type} value={type}>
+                      <option key={type.id} value={type.nome}>
-                        {type}
+                        {type.nome}
                       </option>
                     ))}
                   </select>
@@ -888,9 +884,8 @@ export const EventForm: React.FC<EventFormProps> = ({
                       />
                       <button
                         onClick={() => removeContact(idx)}
-                        className={`mt-1 p-2 text-gray-400 hover:text-red-500 ${
+                        className={`mt-1 p-2 text-gray-400 hover:text-red-500 ${idx === 0 ? "mt-7" : ""
-                          idx === 0 ? "mt-7" : ""
+                          }`}
-                        }`}
                       >
                         <X size={16} />
                       </button>

frontend/services/apiService.ts

@@ -46,11 +46,17 @@ export async function getProfessionalRoles(): Promise<ApiResponse<string[]>> {
   return fetchFromBackend<string[]>('/professional-roles');
 }
 
+export interface EventTypeResponse {
+  id: string;
+  nome: string;
+  precos: any[];
+}
+
 /**
  * Busca os tipos de eventos disponíveis
  */
-export async function getEventTypes(): Promise<ApiResponse<string[]>> {
+export async function getEventTypes(): Promise<ApiResponse<EventTypeResponse[]>> {
-  return fetchFromBackend<string[]>('/event-types');
+  return fetchFromBackend<EventTypeResponse[]>('/api/tipos-eventos');
 }
 
 /**