feat: melhorias no formulário de eventos e mapa interativo

- Adiciona campo de número de pessoas com validação numérica
- Atualiza tipos de eventos para eventos universitários (formatura, colação, etc)
- Substitui horário único por horários de início e término obrigatórios
- Adiciona campo de curso relacionado ao evento
- Reorganiza ordem dos campos no formulário de instituição (CEP primeiro)
- Atualiza coordenadas padrão do mapa para Americana-SP
- Melhora layout do mapa: cards de coordenadas e instruções abaixo do mapa

frontend/components/EventForm.tsx

@@ -63,6 +63,8 @@ export const EventForm: React.FC<EventFormProps> = ({
       name: "",
       date: "",
       time: "",
+      startTime: "",
+      endTime: "",
       type: "",
       status: EventStatus.PLANNING,
       address: {
@@ -71,8 +73,8 @@ export const EventForm: React.FC<EventFormProps> = ({
         city: "",
         state: "",
         zip: "",
-        lat: -23.5505,
-        lng: -46.6333,
+        lat: -22.7394,
+        lng: -47.3314,
         mapLink: "",
       } as Address,
       briefing: "",
@@ -81,6 +83,8 @@ export const EventForm: React.FC<EventFormProps> = ({
       coverImage:
         "https://images.unsplash.com/photo-1511795409834-ef04bbd61622?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80", // Default
       institutionId: "",
+      attendees: "",
+      course: "",
     }
   );
 
@@ -336,30 +340,42 @@ export const EventForm: React.FC<EventFormProps> = ({
               <div className="grid grid-cols-1 gap-6">
                 <Input
                   label="Nome do Evento (Opcional)"
-                  placeholder="Ex: Casamento Silva & Souza"
+                  placeholder="Ex: Formatura Educação Física 2025"
                   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-2 gap-4">
                   <Input
-                    label="Data Pretendida"
-                    type="date"
-                    value={formData.date}
+                    label="Horário de Início*"
+                    type="time"
+                    value={formData.startTime}
                     onChange={(e) =>
-                      setFormData({ ...formData, date: e.target.value })
+                      setFormData({ ...formData, startTime: e.target.value })
                     }
+                    required
                   />
                   <Input
-                    label="Horário Aproximado"
+                    label="Horário de Término*"
                     type="time"
-                    value={formData.time}
+                    value={formData.endTime}
                     onChange={(e) =>
-                      setFormData({ ...formData, time: e.target.value })
+                      setFormData({ ...formData, endTime: e.target.value })
                     }
+                    required
                   />
                 </div>
+
                 <Select
                   label="Tipo de Evento"
                   options={Object.values(EventType).map((t) => ({
@@ -372,6 +388,30 @@ export const EventForm: React.FC<EventFormProps> = ({
                   }
                 />
 
+                <Input
+                  label="Curso"
+                  placeholder="Ex: Engenharia Civil, Medicina, Direito"
+                  value={formData.course}
+                  onChange={(e) =>
+                    setFormData({ ...formData, course: e.target.value })
+                  }
+                />
+
+                <Input
+                  label="Número de Pessoas"
+                  placeholder="Ex: 150"
+                  value={formData.attendees}
+                  onChange={(e) => {
+                    const value = e.target.value;
+                    // Permite apenas números
+                    if (value === "" || /^\d+$/.test(value)) {
+                      setFormData({ ...formData, attendees: value });
+                    }
+                  }}
+                  type="text"
+                  inputMode="numeric"
+                />
+
                 {/* Institution Selection - OBRIGATÓRIO */}
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-1 tracking-wide uppercase text-xs">
@@ -640,8 +680,8 @@ export const EventForm: React.FC<EventFormProps> = ({
                   )}
                 </label>
                 <MapboxMap
-                  initialLat={formData.address.lat || -23.5505}
-                  initialLng={formData.address.lng || -46.6333}
+                  initialLat={formData.address.lat || -22.7394}
+                  initialLng={formData.address.lng || -47.3314}
                   onLocationChange={handleMapLocationChange}
                   height="450px"
                 />

frontend/components/InstitutionForm.tsx

@@ -1,9 +1,8 @@
-
-import React, { useState } from 'react';
-import { Institution, Address } from '../types';
-import { Input, Select } from './Input';
-import { Button } from './Button';
-import { Building2, X, Check } from 'lucide-react';
+import React, { useState } from "react";
+import { Institution, Address } from "../types";
+import { Input, Select } from "./Input";
+import { Button } from "./Button";
+import { Building2, X, Check } from "lucide-react";
 
 interface InstitutionFormProps {
   onCancel: () => void;
@@ -13,39 +12,41 @@ interface InstitutionFormProps {
 }
 
 const INSTITUTION_TYPES = [
-  'Universidade Pública',
-  'Universidade Privada',
-  'Faculdade',
-  'Instituto Federal',
-  'Centro Universitário',
-  'Campus Universitário'
+  "Universidade Pública",
+  "Universidade Privada",
+  "Faculdade",
+  "Instituto Federal",
+  "Centro Universitário",
+  "Campus Universitário",
 ];
 
-export const InstitutionForm: React.FC<InstitutionFormProps> = ({ 
-  onCancel, 
-  onSubmit, 
+export const InstitutionForm: React.FC<InstitutionFormProps> = ({
+  onCancel,
+  onSubmit,
   initialData,
-  userId 
+  userId,
 }) => {
-  const [formData, setFormData] = useState<Partial<Institution>>(initialData || {
-    name: '',
-    type: '',
-    cnpj: '',
-    phone: '',
-    email: '',
-    description: '',
-    ownerId: userId,
-    address: {
-      street: '',
-      number: '',
-      city: '',
-      state: '',
-      zip: ''
+  const [formData, setFormData] = useState<Partial<Institution>>(
+    initialData || {
+      name: "",
+      type: "",
+      cnpj: "",
+      phone: "",
+      email: "",
+      description: "",
+      ownerId: userId,
+      address: {
+        street: "",
+        number: "",
+        city: "",
+        state: "",
+        zip: "",
+      },
     }
-  });
+  );
 
   const [showToast, setShowToast] = useState(false);
-  const [stateError, setStateError] = useState('');
+  const [stateError, setStateError] = useState("");
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -56,29 +57,30 @@ export const InstitutionForm: React.FC<InstitutionFormProps> = ({
   };
 
   const handleChange = (field: keyof Institution, value: any) => {
-    setFormData(prev => ({ ...prev, [field]: value }));
+    setFormData((prev) => ({ ...prev, [field]: value }));
   };
 
   const handleAddressChange = (field: keyof Address, value: string) => {
-    setFormData(prev => ({
+    setFormData((prev) => ({
       ...prev,
       address: {
         ...prev.address!,
-        [field]: value
-      }
+        [field]: value,
+      },
     }));
   };
 
   return (
     <div className="bg-white rounded-lg shadow-xl overflow-hidden max-w-2xl 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-6 py-4 rounded shadow-2xl flex items-center space-x-3 fade-in">
           <Check className="text-brand-gold h-6 w-6" />
           <div>
             <h4 className="font-bold text-sm">Sucesso!</h4>
-            <p className="text-xs text-gray-300">Universidade cadastrada com sucesso.</p>
+            <p className="text-xs text-gray-300">
+              Universidade cadastrada com sucesso.
+            </p>
           </div>
         </div>
       )}
@@ -89,10 +91,11 @@ export const InstitutionForm: React.FC<InstitutionFormProps> = ({
           <Building2 className="text-brand-gold h-8 w-8" />
           <div>
             <h2 className="text-2xl font-serif text-brand-black">
-              {initialData ? 'Editar Universidade' : 'Cadastrar Universidade'}
+              {initialData ? "Editar Universidade" : "Cadastrar Universidade"}
             </h2>
             <p className="text-sm text-gray-500 mt-1">
-              Registre a universidade onde os eventos fotográficos serão realizados
+              Registre a universidade onde os eventos fotográficos serão
+              realizados
             </p>
           </div>
         </div>
@@ -105,60 +108,37 @@ export const InstitutionForm: React.FC<InstitutionFormProps> = ({
       </div>
 
       <form onSubmit={handleSubmit} className="p-8 space-y-6">
-        
         {/* Informações Básicas */}
         <div className="space-y-4">
           <h3 className="text-sm font-semibold text-gray-700 tracking-wide uppercase">
             Informações Básicas
           </h3>
-          
+
           <Input
             label="Nome da Universidade*"
             placeholder="Ex: Universidade Federal do Rio Grande do Sul"
-            value={formData.name || ''}
-            onChange={(e) => handleChange('name', e.target.value)}
+            value={formData.name || ""}
+            onChange={(e) => handleChange("name", e.target.value)}
             required
           />
 
           <div className="grid grid-cols-2 gap-4">
             <Select
               label="Tipo de Universidade*"
-              options={INSTITUTION_TYPES.map(t => ({ value: t, label: t }))}
-              value={formData.type || ''}
-              onChange={(e) => handleChange('type', e.target.value)}
+              options={INSTITUTION_TYPES.map((t) => ({ value: t, label: t }))}
+              value={formData.type || ""}
+              onChange={(e) => handleChange("type", e.target.value)}
               required
             />
-            
+
             <Input
               label="CNPJ (Opcional)"
               placeholder="00.000.000/0000-00"
-              value={formData.cnpj || ''}
-              onChange={(e) => handleChange('cnpj', e.target.value)}
+              value={formData.cnpj || ""}
+              onChange={(e) => handleChange("cnpj", e.target.value)}
               mask="cnpj"
             />
           </div>
-
-          <div className="grid grid-cols-2 gap-4">
-            <Input
-              label="Telefone*"
-              type="tel"
-              placeholder="(00) 00000-0000"
-              value={formData.phone || ''}
-              onChange={(e) => handleChange('phone', e.target.value)}
-              mask="phone"
-              required
-            />
-            
-            <Input
-              label="E-mail*"
-              type="email"
-              placeholder="contato@instituicao.com"
-              value={formData.email || ''}
-              onChange={(e) => handleChange('email', e.target.value)}
-              required
-            />
-          </div>
-
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1 tracking-wide uppercase text-xs">
               Descrição (Opcional)
@@ -166,8 +146,8 @@ export const InstitutionForm: React.FC<InstitutionFormProps> = ({
             <textarea
               className="w-full border border-gray-300 rounded-sm p-3 focus:outline-none focus:border-brand-gold h-24 text-sm"
               placeholder="Ex: Campus principal, informações sobre o campus, áreas para eventos..."
-              value={formData.description || ''}
-              onChange={(e) => handleChange('description', e.target.value)}
+              value={formData.description || ""}
+              onChange={(e) => handleChange("description", e.target.value)}
             />
           </div>
         </div>
@@ -177,59 +157,62 @@ export const InstitutionForm: React.FC<InstitutionFormProps> = ({
           <h3 className="text-sm font-semibold text-gray-700 tracking-wide uppercase">
             Endereço (Opcional)
           </h3>
-          
+
+          <Input
+            label="CEP"
+            placeholder="00000-000"
+            value={formData.address?.zip || ""}
+            onChange={(e) => handleAddressChange("zip", e.target.value)}
+            mask="cep"
+          />
+
           <div className="grid grid-cols-3 gap-4">
             <div className="col-span-2">
               <Input
                 label="Rua"
                 placeholder="Nome da rua"
-                value={formData.address?.street || ''}
-                onChange={(e) => handleAddressChange('street', e.target.value)}
+                value={formData.address?.street || ""}
+                onChange={(e) => handleAddressChange("street", e.target.value)}
               />
             </div>
             <Input
               label="Número"
               placeholder="123"
-              value={formData.address?.number || ''}
+              value={formData.address?.number || ""}
               onChange={(e) => {
-                const value = e.target.value.replace(/\D/g, '');
-                handleAddressChange('number', value);
+                const value = e.target.value.replace(/\D/g, "");
+                handleAddressChange("number", value);
               }}
               type="text"
               inputMode="numeric"
             />
           </div>
 
-          <div className="grid grid-cols-3 gap-4">
+          <div className="grid grid-cols-2 gap-4">
             <Input
               label="Cidade"
               placeholder="Cidade"
-              value={formData.address?.city || ''}
-              onChange={(e) => handleAddressChange('city', e.target.value)}
+              value={formData.address?.city || ""}
+              onChange={(e) => handleAddressChange("city", e.target.value)}
             />
             <Input
               label="Estado"
               placeholder="UF"
-              value={formData.address?.state || ''}
+              value={formData.address?.state || ""}
               onChange={(e) => {
                 const hasNumbers = /[0-9]/.test(e.target.value);
                 if (hasNumbers) {
-                  setStateError('O campo Estado aceita apenas letras');
-                  setTimeout(() => setStateError(''), 3000);
+                  setStateError("O campo Estado aceita apenas letras");
+                  setTimeout(() => setStateError(""), 3000);
                 }
-                const value = e.target.value.replace(/[0-9]/g, '').toUpperCase();
-                handleAddressChange('state', value);
+                const value = e.target.value
+                  .replace(/[0-9]/g, "")
+                  .toUpperCase();
+                handleAddressChange("state", value);
               }}
               maxLength={2}
               error={stateError}
             />
-            <Input
-              label="CEP"
-              placeholder="00000-000"
-              value={formData.address?.zip || ''}
-              onChange={(e) => handleAddressChange('zip', e.target.value)}
-              mask="cep"
-            />
           </div>
         </div>
 
@@ -239,7 +222,7 @@ export const InstitutionForm: React.FC<InstitutionFormProps> = ({
             Cancelar
           </Button>
           <Button type="submit" variant="secondary">
-            {initialData ? 'Salvar Alterações' : 'Cadastrar Universidade'}
+            {initialData ? "Salvar Alterações" : "Cadastrar Universidade"}
           </Button>
         </div>
       </form>

frontend/components/MapboxMap.tsx

@@ -153,72 +153,57 @@ export const MapboxMap: React.FC<MapboxMapProps> = ({
   };
 
   return (
-    <div className="relative">
+    <div>
       {error && (
-        <div className="absolute top-0 left-0 right-0 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded z-10">
+        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-3">
           {error}
         </div>
       )}
 
-      <div
-        ref={mapContainer}
-        className="w-full rounded-lg border-2 border-gray-300 overflow-hidden shadow-md"
-        style={{ height }}
-      />
-
-      {/* Info overlay - Responsivo */}
-      <div className="absolute bottom-2 sm:bottom-4 left-2 sm:left-4 bg-white/95 backdrop-blur-sm px-2 py-2 sm:px-4 sm:py-3 rounded-lg shadow-lg border border-gray-200 max-w-[160px] sm:max-w-none">
-        <div className="flex items-center space-x-2 sm:space-x-3">
-          <MapPin
-            size={16}
-            className="text-brand-gold flex-shrink-0 hidden sm:block"
-          />
-          <div className="min-w-0">
-            <p className="text-[10px] sm:text-xs text-gray-500 font-medium hidden sm:block">
-              Coordenadas
-            </p>
-            <p className="text-[10px] sm:text-sm font-mono text-gray-800 truncate">
-              {currentLat.toFixed(4)}, {currentLng.toFixed(4)}
-            </p>
-          </div>
-        </div>
+      <div className="relative">
+        <div
+          ref={mapContainer}
+          className="w-full rounded-lg border-2 border-gray-300 overflow-hidden shadow-md"
+          style={{ height }}
+        />
       </div>
 
-      {/* Botão de centralizar - Responsivo */}
-      <button
-        onClick={centerOnMarker}
-        className="absolute bottom-2 sm:bottom-4 right-2 sm:right-4 bg-white hover:bg-gray-50 p-2 sm:p-3 rounded-full shadow-lg border border-gray-200 transition-colors group"
-        title="Centralizar no marcador"
-      >
-        <Target
-          size={18}
-          className="text-gray-600 group-hover:text-brand-gold transition-colors sm:w-5 sm:h-5"
-        />
-      </button>
+      {/* Info cards abaixo do mapa */}
+      <div className="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-3">
+        {/* Card de Coordenadas */}
+        <div className="bg-white rounded-lg shadow border border-gray-200 p-3">
+          <div className="flex items-center space-x-2">
+            <MapPin size={16} className="text-brand-gold flex-shrink-0" />
+            <div className="min-w-0 flex-1">
+              <p className="text-xs text-gray-500 font-medium">Coordenadas</p>
+              <p className="text-sm font-mono text-gray-800 truncate">
+                {currentLat.toFixed(4)}, {currentLng.toFixed(4)}
+              </p>
+            </div>
+          </div>
+        </div>
 
-      {/* Instruções - Responsivo */}
-      <div className="mt-3 bg-blue-50 border border-blue-200 rounded-lg p-2 sm:p-3 text-xs sm:text-sm text-blue-800">
-        <p className="font-medium mb-1 text-xs sm:text-sm">💡 Como usar:</p>
-        <ul className="text-[11px] sm:text-xs space-y-0.5 sm:space-y-1 text-blue-700">
-          <li className="flex items-start">
-            <span className="mr-1">•</span>
-            <span>
-              <strong>Arraste o marcador</strong> para a posição exata
-            </span>
-          </li>
-          <li className="flex items-start">
-            <span className="mr-1">•</span>
-            <span>
-              <strong>Clique no mapa</strong> para mover o marcador
-            </span>
-          </li>
-          <li className="flex items-start hidden sm:flex">
-            <span className="mr-1">•</span>
-            <span>
-              Use os <strong>controles</strong> para zoom e navegação
-            </span>
-          </li>
-        </ul>
+        {/* Card de Instruções */}
+        <div className="bg-blue-50 rounded-lg shadow border border-blue-200 p-3">
+          <p className="font-medium mb-1.5 text-xs text-blue-800">
+            💡 Como usar:
+          </p>
+          <ul className="text-xs space-y-1 text-blue-700">
+            <li className="flex items-start">
+              <span className="mr-1">•</span>
+              <span>
+                <strong>Arraste o marcador</strong> ou{" "}
+                <strong>clique no mapa</strong>
+              </span>
+            </li>
+            <li className="flex items-start">
+              <span className="mr-1">•</span>
+              <span>
+                Use os <strong>controles</strong> para navegação
+              </span>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
   );

frontend/types.ts

@@ -15,10 +15,14 @@ export enum EventStatus {
 }
 
 export enum EventType {
-  WEDDING = "Casamento",
-  CORPORATE = "Corporativo",
-  BIRTHDAY = "Aniversário",
-  DEBUTANTE = "Debutante",
+  GRADUATION = "Formatura",
+  COLATION = "Colação de Grau",
+  ACADEMIC_WEEK = "Semana Acadêmica",
+  FRESHMAN_WEEK = "Semana de Calouros",
+  SYMPOSIUM = "Simpósio/Congresso",
+  DEFENSE = "Defesa de TCC/Mestrado/Doutorado",
+  SPORTS_EVENT = "Evento Esportivo Universitário",
+  CULTURAL_EVENT = "Evento Cultural",
   OTHER = "Outro",
 }
 
@@ -73,7 +77,9 @@ export interface EventData {
   id: string;
   name: string;
   date: string;
-  time: string;
+  time: string; // Mantido por compatibilidade, mas deprecated
+  startTime?: string; // Horário de início
+  endTime?: string; // Horário de término
   type: EventType;
   status: EventStatus;
   address: Address;
@@ -84,4 +90,6 @@ export interface EventData {
   ownerId: string; // ID do cliente dono do evento
   photographerIds: string[]; // IDs dos fotógrafos designados
   institutionId?: string; // ID da instituição vinculada (obrigatório)
+  attendees?: number; // Número de pessoas participantes
+  course?: string; // Curso relacionado ao evento
 }