rede5/photum
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

feat: reestruturar página de equipe com sistema de profissionais multi-função

Browse source 
- Renomear 'Equipe & Fotógrafos' para 'Equipe' no título e navbar
- Adicionar suporte para 3 tipos de profissionais: Fotógrafo, Cinegrafista, Recepcionista
- Implementar cards estatísticos separados por função profissional
- Adicionar filtros por função (Fotógrafos, Cinegrafistas, Recepcionistas)
- Adicionar filtros por status (Disponível, Em Evento, Inativo)
- Transformar cards em tabela responsiva com colunas: Nome, Função Profissional, Disponibilidade
- Expandir interface Professional com campos completos do Excel:
  * Endereço completo (rua, número, complemento, bairro, cidade, UF)
  * Dados bancários (banco, agência, conta/pix, tipo cartão, titular)
  * Recursos (carro disponível, possui estúdio, quantidade)
  * Sistema de avaliações detalhado (6 critérios + média)
  * Valores (tabela free, extra no cachê)
  * Observações
- Redesenhar modal 'Adicionar Profissional' com formulário extenso organizado em seções
- Atualizar modal de detalhes com todas as novas informações
- Adicionar ícones específicos por função (Camera, Video, UserCheck)
- Remover fotos da tabela mantendo apenas informações essenciais
This commit is contained in:
João Vitor 2025-12-08 03:12:45 -03:00
parent 3096f07102
commit de5ceea1f3
8 changed files with 2066 additions and 1164 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/App.tsx
View file

@ -89,8 +89,8 @@ const AppContent: React.FC = () => {
className="h-24 sm:h-28 md:h-32 lg:h-36 mb-4 md:mb-6" className="h-24 sm:h-28 md:h-32 lg:h-36 mb-4 md:mb-6"
/> />
<p className="text-brand-black/80 text-xs sm:text-sm md:text-base leading-relaxed"> <p className="text-brand-black/80 text-xs sm:text-sm md:text-base leading-relaxed">
Eternizando momentos únicos com excelência e profissionalismo Eternizando momentos únicos com excelência e
desde 2020. profissionalismo desde 2020.
</p> </p>
</div> </div>
</div> </div>

124
frontend/components/CourseForm.tsx
View file

@ -1,8 +1,8 @@
import React, { useState } from 'react'; import React, { useState } from "react";
import { Course, Institution } from '../types'; import { Course, Institution } from "../types";
import { Input, Select } from './Input'; import { Input, Select } from "./Input";
import { Button } from './Button'; import { Button } from "./Button";
import { GraduationCap, X, Check, AlertCircle } from 'lucide-react'; import { GraduationCap, X, Check, AlertCircle } from "lucide-react";
interface CourseFormProps { interface CourseFormProps {
onCancel: () => void; onCancel: () => void;
@ -13,52 +13,54 @@ interface CourseFormProps {
} }
const GRADUATION_TYPES = [ const GRADUATION_TYPES = [
'Bacharelado', "Bacharelado",
'Licenciatura', "Licenciatura",
'Tecnológico', "Tecnológico",
'Especialização', "Especialização",
'Mestrado', "Mestrado",
'Doutorado' "Doutorado",
]; ];
export const CourseForm: React.FC<CourseFormProps> = ({ export const CourseForm: React.FC<CourseFormProps> = ({
onCancel, onCancel,
onSubmit, onSubmit,
initialData, initialData,
userId, userId,
institutions institutions,
}) => { }) => {
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
const [formData, setFormData] = useState<Partial<Course>>(initialData || { const [formData, setFormData] = useState<Partial<Course>>(
name: '', initialData || {
institutionId: '', name: "",
year: currentYear, institutionId: "",
semester: 1, year: currentYear,
graduationType: '', semester: 1,
createdAt: new Date().toISOString(), graduationType: "",
createdBy: userId, createdAt: new Date().toISOString(),
isActive: true, createdBy: userId,
}); isActive: true,
}
);
const [showToast, setShowToast] = useState(false); const [showToast, setShowToast] = useState(false);
const [error, setError] = useState(''); const [error, setError] = useState("");
const handleSubmit = (e: React.FormEvent) => { const handleSubmit = (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
// Validações // Validações
if (!formData.name || formData.name.trim().length < 3) { if (!formData.name || formData.name.trim().length < 3) {
setError('Nome do curso deve ter pelo menos 3 caracteres'); setError("Nome do curso deve ter pelo menos 3 caracteres");
return; return;
} }
if (!formData.institutionId) { if (!formData.institutionId) {
setError('Selecione uma universidade'); setError("Selecione uma universidade");
return; return;
} }
if (!formData.graduationType) { if (!formData.graduationType) {
setError('Selecione o tipo de graduação'); setError("Selecione o tipo de graduação");
return; return;
} }
@ -69,20 +71,21 @@ export const CourseForm: React.FC<CourseFormProps> = ({
}; };
const handleChange = (field: keyof Course, value: any) => { const handleChange = (field: keyof Course, value: any) => {
setFormData(prev => ({ ...prev, [field]: value })); setFormData((prev) => ({ ...prev, [field]: value }));
setError(''); // Limpa erro ao editar setError(""); // Limpa erro ao editar
}; };
return ( return (
<div className="bg-white rounded-lg shadow-xl overflow-hidden max-w-2xl mx-auto border border-gray-100 slide-up relative"> <div className="bg-white rounded-lg shadow-xl overflow-hidden max-w-2xl mx-auto border border-gray-100 slide-up relative">
{/* Success Toast */} {/* Success Toast */}
{showToast && ( {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"> <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" /> <Check className="text-brand-gold h-6 w-6" />
<div> <div>
<h4 className="font-bold text-sm">Sucesso!</h4> <h4 className="font-bold text-sm">Sucesso!</h4>
<p className="text-xs text-gray-300">Curso cadastrado com sucesso.</p> <p className="text-xs text-gray-300">
Curso cadastrado com sucesso.
</p>
</div> </div>
</div> </div>
)} )}
@ -93,7 +96,7 @@ export const CourseForm: React.FC<CourseFormProps> = ({
<GraduationCap className="text-brand-gold h-8 w-8" /> <GraduationCap className="text-brand-gold h-8 w-8" />
<div> <div>
<h2 className="text-2xl font-serif text-brand-black"> <h2 className="text-2xl font-serif text-brand-black">
{initialData ? 'Editar Curso/Turma' : 'Cadastrar Curso/Turma'} {initialData ? "Editar Curso/Turma" : "Cadastrar Curso/Turma"}
</h2> </h2>
<p className="text-sm text-gray-500 mt-1"> <p className="text-sm text-gray-500 mt-1">
Registre as turmas disponíveis para eventos fotográficos Registre as turmas disponíveis para eventos fotográficos
@ -109,11 +112,13 @@ export const CourseForm: React.FC<CourseFormProps> = ({
</div> </div>
<form onSubmit={handleSubmit} className="p-8 space-y-6"> <form onSubmit={handleSubmit} className="p-8 space-y-6">
{/* Erro global */} {/* Erro global */}
{error && ( {error && (
<div className="bg-red-50 border border-red-200 rounded-lg p-3 flex items-start"> <div className="bg-red-50 border border-red-200 rounded-lg p-3 flex items-start">
<AlertCircle size={18} className="text-red-500 mr-2 flex-shrink-0 mt-0.5" /> <AlertCircle
size={18}
className="text-red-500 mr-2 flex-shrink-0 mt-0.5"
/>
<p className="text-sm text-red-700">{error}</p> <p className="text-sm text-red-700">{error}</p>
</div> </div>
)} )}
@ -123,23 +128,23 @@ export const CourseForm: React.FC<CourseFormProps> = ({
<h3 className="text-sm font-semibold text-gray-700 tracking-wide uppercase"> <h3 className="text-sm font-semibold text-gray-700 tracking-wide uppercase">
Informações do Curso Informações do Curso
</h3> </h3>
<Select <Select
label="Universidade*" label="Universidade*"
options={institutions.map(inst => ({ options={institutions.map((inst) => ({
value: inst.id, value: inst.id,
label: `${inst.name} - ${inst.type}` label: `${inst.name} - ${inst.type}`,
}))} }))}
value={formData.institutionId || ''} value={formData.institutionId || ""}
onChange={(e) => handleChange('institutionId', e.target.value)} onChange={(e) => handleChange("institutionId", e.target.value)}
required required
/> />
<Input <Input
label="Nome do Curso/Turma*" label="Nome do Curso/Turma*"
placeholder="Ex: Engenharia Civil 2025, Medicina - Turma A" placeholder="Ex: Engenharia Civil 2025, Medicina - Turma A"
value={formData.name || ''} value={formData.name || ""}
onChange={(e) => handleChange('name', e.target.value)} onChange={(e) => handleChange("name", e.target.value)}
required required
/> />
@ -149,27 +154,29 @@ export const CourseForm: React.FC<CourseFormProps> = ({
type="number" type="number"
placeholder={currentYear.toString()} placeholder={currentYear.toString()}
value={formData.year || currentYear} value={formData.year || currentYear}
onChange={(e) => handleChange('year', parseInt(e.target.value))} onChange={(e) => handleChange("year", parseInt(e.target.value))}
min={currentYear - 1} min={currentYear - 1}
max={currentYear + 5} max={currentYear + 5}
required required
/> />
<Select <Select
label="Semestre" label="Semestre"
options={[ options={[
{ value: '1', label: '1º Semestre' }, { value: "1", label: "1º Semestre" },
{ value: '2', label: '2º Semestre' } { value: "2", label: "2º Semestre" },
]} ]}
value={formData.semester?.toString() || '1'} value={formData.semester?.toString() || "1"}
onChange={(e) => handleChange('semester', parseInt(e.target.value))} onChange={(e) =>
handleChange("semester", parseInt(e.target.value))
}
/> />
<Select <Select
label="Tipo*" label="Tipo*"
options={GRADUATION_TYPES.map(t => ({ value: t, label: t }))} options={GRADUATION_TYPES.map((t) => ({ value: t, label: t }))}
value={formData.graduationType || ''} value={formData.graduationType || ""}
onChange={(e) => handleChange('graduationType', e.target.value)} onChange={(e) => handleChange("graduationType", e.target.value)}
required required
/> />
</div> </div>
@ -180,7 +187,7 @@ export const CourseForm: React.FC<CourseFormProps> = ({
type="checkbox" type="checkbox"
id="isActive" id="isActive"
checked={formData.isActive !== false} checked={formData.isActive !== false}
onChange={(e) => handleChange('isActive', e.target.checked)} onChange={(e) => handleChange("isActive", e.target.checked)}
className="w-4 h-4 text-brand-gold border-gray-300 rounded focus:ring-brand-gold" className="w-4 h-4 text-brand-gold border-gray-300 rounded focus:ring-brand-gold"
/> />
<label htmlFor="isActive" className="text-sm text-gray-700"> <label htmlFor="isActive" className="text-sm text-gray-700">
@ -189,14 +196,13 @@ export const CourseForm: React.FC<CourseFormProps> = ({
</div> </div>
</div> </div>
{/* Actions */} {/* Actions */}
<div className="flex justify-end space-x-3 pt-6 border-t"> <div className="flex justify-end space-x-3 pt-6 border-t">
<Button variant="outline" onClick={onCancel} type="button"> <Button variant="outline" onClick={onCancel} type="button">
Cancelar Cancelar
</Button> </Button>
<Button type="submit" variant="secondary"> <Button type="submit" variant="secondary">
{initialData ? 'Salvar Alterações' : 'Cadastrar Curso'} {initialData ? "Salvar Alterações" : "Cadastrar Curso"}
</Button> </Button>
</div> </div>
</form> </form>

107
frontend/components/EventForm.tsx
View file

@ -38,11 +38,11 @@ export const EventForm: React.FC<EventFormProps> = ({
initialData, initialData,
}) => { }) => {
const { user } = useAuth(); const { user } = useAuth();
const { const {
institutions, institutions,
getInstitutionsByUserId, getInstitutionsByUserId,
addInstitution, addInstitution,
getActiveCoursesByInstitutionId getActiveCoursesByInstitutionId,
} = useData(); } = useData();
const [activeTab, setActiveTab] = useState< const [activeTab, setActiveTab] = useState<
"details" | "location" | "briefing" | "files" "details" | "location" | "briefing" | "files"
@ -98,13 +98,13 @@ export const EventForm: React.FC<EventFormProps> = ({
const formTitle = initialData const formTitle = initialData
? "Editar Evento" ? "Editar Evento"
: isClientRequest : isClientRequest
? "Solicitar Orçamento/Evento" ? "Solicitar Orçamento/Evento"
: "Cadastrar Novo Evento"; : "Cadastrar Novo Evento";
const submitLabel = initialData const submitLabel = initialData
? "Salvar Alterações" ? "Salvar Alterações"
: isClientRequest : isClientRequest
? "Enviar Solicitação" ? "Enviar Solicitação"
: "Criar Evento"; : "Criar Evento";
// Carregar cursos disponíveis quando instituição for selecionada // Carregar cursos disponíveis quando instituição for selecionada
useEffect(() => { useEffect(() => {
@ -299,7 +299,9 @@ export const EventForm: React.FC<EventFormProps> = ({
<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="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 className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 sm:gap-0">
<div> <div>
<h2 className="text-xl sm:text-2xl font-serif text-brand-black">{formTitle}</h2> <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"> <p className="text-xs sm:text-sm text-gray-500 mt-1">
{isClientRequest {isClientRequest
? "Preencha os detalhes do seu sonho. Nossa equipe analisará em breve." ? "Preencha os detalhes do seu sonho. Nossa equipe analisará em breve."
@ -311,14 +313,16 @@ export const EventForm: React.FC<EventFormProps> = ({
{["details", "location", "briefing", "files"].map((tab, idx) => ( {["details", "location", "briefing", "files"].map((tab, idx) => (
<div <div
key={tab} key={tab}
className={`flex flex-col items-center ${activeTab === tab ? "opacity-100" : "opacity-40" className={`flex flex-col items-center ${
}`} activeTab === tab ? "opacity-100" : "opacity-40"
}`}
> >
<span <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 className={`w-7 h-7 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-xs font-bold mb-1 ${
? "bg-[#492E61] text-white" activeTab === tab
: "bg-gray-200 text-gray-600" ? "bg-[#492E61] text-white"
}`} : "bg-gray-200 text-gray-600"
}`}
> >
{idx + 1} {idx + 1}
</span> </span>
@ -334,20 +338,29 @@ export const EventForm: React.FC<EventFormProps> = ({
{[ {[
{ id: "details", label: "Detalhes", icon: "1" }, { id: "details", label: "Detalhes", icon: "1" },
{ id: "location", label: "Localização", icon: "2" }, { id: "location", label: "Localização", icon: "2" },
{ id: "briefing", label: isClientRequest ? "Desejos" : "Briefing", icon: "3" }, {
id: "briefing",
label: isClientRequest ? "Desejos" : "Briefing",
icon: "3",
},
{ id: "files", label: "Arquivos", icon: "4" }, { id: "files", label: "Arquivos", icon: "4" },
].map((item) => ( ].map((item) => (
<button <button
key={item.id} key={item.id}
onClick={() => setActiveTab(item.id as any)} 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 className={`flex-1 px-4 py-3 text-xs sm:text-sm font-medium transition-colors border-b-2 whitespace-nowrap ${
? "text-brand-gold border-brand-gold bg-brand-gold/5" activeTab === item.id
: "text-gray-500 border-transparent hover:bg-gray-50" ? "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 ${ <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' activeTab === item.id ? 'bg-brand-gold text-white' : 'bg-gray-200 text-gray-600'
}">{item.icon}</span> }"
>
{item.icon}
</span>
{item.label} {item.label}
</button> </button>
))} ))}
@ -369,10 +382,11 @@ export const EventForm: React.FC<EventFormProps> = ({
<button <button
key={item.id} key={item.id}
onClick={() => setActiveTab(item.id as any)} 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 className={`w-full text-left px-4 py-3 rounded-sm text-sm font-medium transition-colors ${
? "bg-white shadow-sm text-brand-gold border-l-4 border-brand-gold" activeTab === item.id
: "text-gray-500 hover:bg-gray-100" ? "bg-white shadow-sm text-brand-gold border-l-4 border-brand-gold"
}`} : "text-gray-500 hover:bg-gray-100"
}`}
> >
{item.label} {item.label}
</button> </button>
@ -544,7 +558,9 @@ export const EventForm: React.FC<EventFormProps> = ({
Nenhum curso cadastrado Nenhum curso cadastrado
</p> </p>
<p className="text-xs text-gray-500"> <p className="text-xs text-gray-500">
Entre em contato com a administração para cadastrar os cursos/turmas disponíveis nesta universidade. Entre em contato com a administração para
cadastrar os cursos/turmas disponíveis nesta
universidade.
</p> </p>
</div> </div>
</div> </div>
@ -563,7 +579,8 @@ export const EventForm: React.FC<EventFormProps> = ({
<option value="">Selecione um curso (opcional)</option> <option value="">Selecione um curso (opcional)</option>
{availableCourses.map((course) => ( {availableCourses.map((course) => (
<option key={course.id} value={course.id}> <option key={course.id} value={course.id}>
{course.name} - {course.graduationType} ({course.year}/{course.semester}º sem) {course.name} - {course.graduationType} (
{course.year}/{course.semester}º sem)
</option> </option>
))} ))}
</select> </select>
@ -592,11 +609,11 @@ export const EventForm: React.FC<EventFormProps> = ({
<div className="flex items-center justify-between w-full px-2"> <div className="flex items-center justify-between w-full px-2">
<span className="text-sm text-gray-500 truncate max-w-[200px]"> <span className="text-sm text-gray-500 truncate max-w-[200px]">
{formData.coverImage && {formData.coverImage &&
!formData.coverImage.startsWith("http") !formData.coverImage.startsWith("http")
? "Imagem selecionada" ? "Imagem selecionada"
: formData.coverImage : formData.coverImage
? "Imagem atual (URL)" ? "Imagem atual (URL)"
: "Clique para selecionar..."} : "Clique para selecionar..."}
</span> </span>
<div className="bg-gray-100 p-1.5 rounded hover:bg-gray-200"> <div className="bg-gray-100 p-1.5 rounded hover:bg-gray-200">
<Upload size={16} className="text-gray-600" /> <Upload size={16} className="text-gray-600" />
@ -619,7 +636,10 @@ export const EventForm: React.FC<EventFormProps> = ({
</div> </div>
<div className="flex flex-col sm:flex-row justify-end gap-3 sm:gap-0 mt-8"> <div className="flex flex-col sm:flex-row justify-end gap-3 sm:gap-0 mt-8">
<Button onClick={() => setActiveTab("location")} className="w-full sm:w-auto"> <Button
onClick={() => setActiveTab("location")}
className="w-full sm:w-auto"
>
Próximo: Localização Próximo: Localização
</Button> </Button>
</div> </div>
@ -796,7 +816,10 @@ export const EventForm: React.FC<EventFormProps> = ({
> >
Voltar Voltar
</Button> </Button>
<Button onClick={() => setActiveTab("briefing")} className="w-full sm:w-auto"> <Button
onClick={() => setActiveTab("briefing")}
className="w-full sm:w-auto"
>
Próximo Próximo
</Button> </Button>
</div> </div>
@ -862,8 +885,9 @@ export const EventForm: React.FC<EventFormProps> = ({
/> />
<button <button
onClick={() => removeContact(idx)} onClick={() => removeContact(idx)}
className={`mt-1 p-2 text-gray-400 hover:text-red-500 ${idx === 0 ? "mt-7" : "" className={`mt-1 p-2 text-gray-400 hover:text-red-500 ${
}`} idx === 0 ? "mt-7" : ""
}`}
> >
<X size={16} /> <X size={16} />
</button> </button>
@ -880,7 +904,12 @@ export const EventForm: React.FC<EventFormProps> = ({
> >
Voltar Voltar
</Button> </Button>
<Button onClick={() => setActiveTab("files")} className="w-full sm:w-auto">Próximo</Button> <Button
onClick={() => setActiveTab("files")}
className="w-full sm:w-auto"
>
Próximo
</Button>
</div> </div>
</div> </div>
)} )}
@ -938,7 +967,11 @@ export const EventForm: React.FC<EventFormProps> = ({
> >
Voltar Voltar
</Button> </Button>
<Button onClick={handleSubmit} variant="secondary" className="w-full sm:w-auto"> <Button
onClick={handleSubmit}
variant="secondary"
className="w-full sm:w-auto"
>
{submitLabel} {submitLabel}
</Button> </Button>
</div> </div>

205
frontend/components/Navbar.tsx
View file

@ -1,7 +1,17 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { UserRole } from "../types"; import { UserRole } from "../types";
import { useAuth } from "../contexts/AuthContext"; import { useAuth } from "../contexts/AuthContext";
import { Menu, X, LogOut, User, Settings, Camera, Mail, Phone, GraduationCap } from "lucide-react"; import {
Menu,
X,
LogOut,
User,
Settings,
Camera,
Mail,
Phone,
GraduationCap,
} from "lucide-react";
import { Button } from "./Button"; import { Button } from "./Button";
interface NavbarProps { interface NavbarProps {
@ -34,7 +44,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
const handleClickOutside = (event: MouseEvent) => { const handleClickOutside = (event: MouseEvent) => {
if (isAccountDropdownOpen) { if (isAccountDropdownOpen) {
const target = event.target as HTMLElement; const target = event.target as HTMLElement;
if (!target.closest('.relative')) { if (!target.closest(".relative")) {
setIsAccountDropdownOpen(false); setIsAccountDropdownOpen(false);
} }
} }
@ -51,7 +61,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
case UserRole.BUSINESS_OWNER: case UserRole.BUSINESS_OWNER:
return [ return [
{ name: "Gestão de Eventos", path: "dashboard" }, { name: "Gestão de Eventos", path: "dashboard" },
{ name: "Equipe & Fotógrafos", path: "team" }, { name: "Equipe", path: "team" },
{ name: "Gestão de Cursos", path: "courses" }, { name: "Gestão de Cursos", path: "courses" },
{ name: "Financeiro", path: "finance" }, { name: "Financeiro", path: "finance" },
]; ];
@ -61,9 +71,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
{ name: "Solicitar Evento", path: "request-event" }, { name: "Solicitar Evento", path: "request-event" },
]; ];
case UserRole.PHOTOGRAPHER: case UserRole.PHOTOGRAPHER:
return [ return [{ name: "Eventos Designados", path: "dashboard" }];
{ name: "Eventos Designados", path: "dashboard" },
];
default: default:
return []; return [];
} }
@ -102,10 +110,11 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
<button <button
key={link.path} key={link.path}
onClick={() => onNavigate(link.path)} onClick={() => onNavigate(link.path)}
className={`text-sm font-medium tracking-wide uppercase hover:text-brand-gold transition-colors pb-1 ${currentPage === link.path className={`text-sm font-medium tracking-wide uppercase hover:text-brand-gold transition-colors pb-1 ${
? "text-brand-gold border-b-2 border-brand-gold" currentPage === link.path
: "text-gray-600 border-b-2 border-transparent" ? "text-brand-gold border-b-2 border-brand-gold"
}`} : "text-gray-600 border-b-2 border-transparent"
}`}
> >
{link.name} {link.name}
</button> </button>
@ -129,7 +138,9 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
{/* Avatar com dropdown */} {/* Avatar com dropdown */}
<div className="relative"> <div className="relative">
<button <button
onClick={() => setIsAccountDropdownOpen(!isAccountDropdownOpen)} onClick={() =>
setIsAccountDropdownOpen(!isAccountDropdownOpen)
}
className="h-9 w-9 rounded-full bg-gray-100 overflow-hidden border border-gray-200 ring-2 ring-transparent hover:ring-brand-gold transition-all cursor-pointer" className="h-9 w-9 rounded-full bg-gray-100 overflow-hidden border border-gray-200 ring-2 ring-transparent hover:ring-brand-gold transition-all cursor-pointer"
> >
<img <img
@ -151,8 +162,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
</div> </div>
<h3 className="text-white font-bold text-lg mb-1">{user.name}</h3> <h3 className="text-white font-bold text-lg mb-1">
<p className="text-white/90 text-sm mb-1">{user.email}</p> {user.name}
</h3>
<p className="text-white/90 text-sm mb-1">
{user.email}
</p>
<span className="inline-block px-3 py-1 bg-white/20 backdrop-blur-sm rounded-full text-xs font-medium text-white border border-white/30"> <span className="inline-block px-3 py-1 bg-white/20 backdrop-blur-sm rounded-full text-xs font-medium text-white border border-white/30">
{getRoleLabel()} {getRoleLabel()}
</span> </span>
@ -161,7 +176,8 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
{/* Menu Items */} {/* Menu Items */}
<div className="p-4 space-y-2 bg-gray-50"> <div className="p-4 space-y-2 bg-gray-50">
{/* Editar Perfil - Apenas para Fotógrafos e Clientes */} {/* Editar Perfil - Apenas para Fotógrafos e Clientes */}
{(user.role === UserRole.PHOTOGRAPHER || user.role === UserRole.EVENT_OWNER) && ( {(user.role === UserRole.PHOTOGRAPHER ||
user.role === UserRole.EVENT_OWNER) && (
<button <button
onClick={() => { onClick={() => {
setIsEditProfileModalOpen(true); setIsEditProfileModalOpen(true);
@ -173,14 +189,19 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
<User size={20} className="text-[#492E61]" /> <User size={20} className="text-[#492E61]" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<p className="text-sm font-semibold text-gray-900">Editar Perfil</p> <p className="text-sm font-semibold text-gray-900">
<p className="text-xs text-gray-500">Atualize suas informações</p> Editar Perfil
</p>
<p className="text-xs text-gray-500">
Atualize suas informações
</p>
</div> </div>
</button> </button>
)} )}
{/* Configurações - Apenas para CEO e Business Owner */} {/* Configurações - Apenas para CEO e Business Owner */}
{(user.role === UserRole.BUSINESS_OWNER || user.role === UserRole.SUPERADMIN) && ( {(user.role === UserRole.BUSINESS_OWNER ||
user.role === UserRole.SUPERADMIN) && (
<button <button
onClick={() => { onClick={() => {
onNavigate("settings"); onNavigate("settings");
@ -192,8 +213,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
<Settings size={20} className="text-gray-600" /> <Settings size={20} className="text-gray-600" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<p className="text-sm font-semibold text-gray-900">Configurações</p> <p className="text-sm font-semibold text-gray-900">
<p className="text-xs text-gray-500">Preferências da conta</p> Configurações
</p>
<p className="text-xs text-gray-500">
Preferências da conta
</p>
</div> </div>
</button> </button>
)} )}
@ -210,8 +235,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
<LogOut size={20} className="text-red-600" /> <LogOut size={20} className="text-red-600" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<p className="text-sm font-semibold text-red-600">Sair da Conta</p> <p className="text-sm font-semibold text-red-600">
<p className="text-xs text-red-400">Desconectar do sistema</p> Sair da Conta
</p>
<p className="text-xs text-red-400">
Desconectar do sistema
</p>
</div> </div>
</button> </button>
</div> </div>
@ -232,7 +261,9 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
</div> </div>
<div className="text-left hidden lg:block"> <div className="text-left hidden lg:block">
<p className="text-xs text-gray-500">Olá, bem-vindo(a)</p> <p className="text-xs text-gray-500">Olá, bem-vindo(a)</p>
<p className="text-xs font-semibold text-gray-700">Entrar/Cadastrar</p> <p className="text-xs font-semibold text-gray-700">
Entrar/Cadastrar
</p>
</div> </div>
</button> </button>
@ -244,8 +275,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
<div className="w-16 h-16 mx-auto mb-3 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center border-2 border-white/30"> <div className="w-16 h-16 mx-auto mb-3 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center border-2 border-white/30">
<User size={32} className="text-white" /> <User size={32} className="text-white" />
</div> </div>
<p className="text-white/70 text-xs mb-1">Olá, bem-vindo(a)</p> <p className="text-white/70 text-xs mb-1">
<p className="text-white font-semibold text-base">Entrar/Cadastrar</p> Olá, bem-vindo(a)
</p>
<p className="text-white font-semibold text-base">
Entrar/Cadastrar
</p>
</div> </div>
{/* Botões */} {/* Botões */}
@ -284,7 +319,9 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
<> <>
<div className="relative"> <div className="relative">
<button <button
onClick={() => setIsAccountDropdownOpen(!isAccountDropdownOpen)} onClick={() =>
setIsAccountDropdownOpen(!isAccountDropdownOpen)
}
className="h-10 w-10 rounded-full bg-gray-100 overflow-hidden border border-gray-200 ring-2 ring-transparent active:ring-brand-gold transition-all shadow-md" className="h-10 w-10 rounded-full bg-gray-100 overflow-hidden border border-gray-200 ring-2 ring-transparent active:ring-brand-gold transition-all shadow-md"
> >
<img <img
@ -306,8 +343,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
</div> </div>
<h3 className="text-white font-bold text-lg mb-1">{user.name}</h3> <h3 className="text-white font-bold text-lg mb-1">
<p className="text-white/90 text-sm mb-1">{user.email}</p> {user.name}
</h3>
<p className="text-white/90 text-sm mb-1">
{user.email}
</p>
<span className="inline-block px-3 py-1 bg-white/20 backdrop-blur-sm rounded-full text-xs font-medium text-white border border-white/30"> <span className="inline-block px-3 py-1 bg-white/20 backdrop-blur-sm rounded-full text-xs font-medium text-white border border-white/30">
{getRoleLabel()} {getRoleLabel()}
</span> </span>
@ -316,7 +357,8 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
{/* Menu Items */} {/* Menu Items */}
<div className="p-4 space-y-2 bg-gray-50"> <div className="p-4 space-y-2 bg-gray-50">
{/* Editar Perfil - Apenas para Fotógrafos e Clientes */} {/* Editar Perfil - Apenas para Fotógrafos e Clientes */}
{(user.role === UserRole.PHOTOGRAPHER || user.role === UserRole.EVENT_OWNER) && ( {(user.role === UserRole.PHOTOGRAPHER ||
user.role === UserRole.EVENT_OWNER) && (
<button <button
onClick={() => { onClick={() => {
setIsEditProfileModalOpen(true); setIsEditProfileModalOpen(true);
@ -328,14 +370,19 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
<User size={20} className="text-[#492E61]" /> <User size={20} className="text-[#492E61]" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<p className="text-sm font-semibold text-gray-900">Editar Perfil</p> <p className="text-sm font-semibold text-gray-900">
<p className="text-xs text-gray-500">Atualize suas informações</p> Editar Perfil
</p>
<p className="text-xs text-gray-500">
Atualize suas informações
</p>
</div> </div>
</button> </button>
)} )}
{/* Configurações - Apenas para CEO e Business Owner */} {/* Configurações - Apenas para CEO e Business Owner */}
{(user.role === UserRole.BUSINESS_OWNER || user.role === UserRole.SUPERADMIN) && ( {(user.role === UserRole.BUSINESS_OWNER ||
user.role === UserRole.SUPERADMIN) && (
<button <button
onClick={() => { onClick={() => {
onNavigate("settings"); onNavigate("settings");
@ -347,8 +394,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
<Settings size={20} className="text-gray-600" /> <Settings size={20} className="text-gray-600" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<p className="text-sm font-semibold text-gray-900">Configurações</p> <p className="text-sm font-semibold text-gray-900">
<p className="text-xs text-gray-500">Preferências da conta</p> Configurações
</p>
<p className="text-xs text-gray-500">
Preferências da conta
</p>
</div> </div>
</button> </button>
)} )}
@ -365,8 +416,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
<LogOut size={20} className="text-red-600" /> <LogOut size={20} className="text-red-600" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<p className="text-sm font-semibold text-red-600">Sair da Conta</p> <p className="text-sm font-semibold text-red-600">
<p className="text-xs text-red-400">Desconectar do sistema</p> Sair da Conta
</p>
<p className="text-xs text-red-400">
Desconectar do sistema
</p>
</div> </div>
</button> </button>
</div> </div>
@ -385,7 +440,9 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
) : ( ) : (
<div className="relative"> <div className="relative">
<button <button
onClick={() => setIsAccountDropdownOpen(!isAccountDropdownOpen)} onClick={() =>
setIsAccountDropdownOpen(!isAccountDropdownOpen)
}
className="w-10 h-10 rounded-full border-2 border-brand-gold flex items-center justify-center text-brand-gold shadow-md" className="w-10 h-10 rounded-full border-2 border-brand-gold flex items-center justify-center text-brand-gold shadow-md"
> >
<User size={20} /> <User size={20} />
@ -399,8 +456,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
<div className="w-16 h-16 mx-auto mb-3 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center border-2 border-white/30"> <div className="w-16 h-16 mx-auto mb-3 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center border-2 border-white/30">
<User size={32} className="text-white" /> <User size={32} className="text-white" />
</div> </div>
<p className="text-white/70 text-xs mb-1">Olá, bem-vindo(a)</p> <p className="text-white/70 text-xs mb-1">
<p className="text-white font-semibold text-base">Entrar/Cadastrar</p> Olá, bem-vindo(a)
</p>
<p className="text-white font-semibold text-base">
Entrar/Cadastrar
</p>
</div> </div>
{/* Botões */} {/* Botões */}
@ -475,7 +536,8 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
</div> </div>
{/* Botão Editar Perfil - Apenas para Fotógrafos e Clientes */} {/* Botão Editar Perfil - Apenas para Fotógrafos e Clientes */}
{(user.role === UserRole.PHOTOGRAPHER || user.role === UserRole.EVENT_OWNER) && ( {(user.role === UserRole.PHOTOGRAPHER ||
user.role === UserRole.EVENT_OWNER) && (
<button <button
onClick={() => { onClick={() => {
setIsEditProfileModalOpen(true); setIsEditProfileModalOpen(true);
@ -487,8 +549,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
<User size={20} className="text-[#492E61]" /> <User size={20} className="text-[#492E61]" />
</div> </div>
<div className="flex-1 text-left"> <div className="flex-1 text-left">
<p className="text-sm font-semibold text-gray-900">Editar Perfil</p> <p className="text-sm font-semibold text-gray-900">
<p className="text-xs text-gray-500">Atualize suas informações</p> Editar Perfil
</p>
<p className="text-xs text-gray-500">
Atualize suas informações
</p>
</div> </div>
</button> </button>
)} )}
@ -505,8 +571,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
<LogOut size={20} className="text-red-600" /> <LogOut size={20} className="text-red-600" />
</div> </div>
<div className="flex-1 text-left"> <div className="flex-1 text-left">
<p className="text-sm font-semibold text-red-600">Sair da Conta</p> <p className="text-sm font-semibold text-red-600">
<p className="text-xs text-red-400">Desconectar do sistema</p> Sair da Conta
</p>
<p className="text-xs text-red-400">
Desconectar do sistema
</p>
</div> </div>
</button> </button>
</div> </div>
@ -542,8 +612,9 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
</nav> </nav>
{/* Modal de Edição de Perfil - Apenas para Fotógrafos e Clientes */} {/* Modal de Edição de Perfil - Apenas para Fotógrafos e Clientes */}
{ {isEditProfileModalOpen &&
isEditProfileModalOpen && (user?.role === UserRole.PHOTOGRAPHER || user?.role === UserRole.EVENT_OWNER) && ( (user?.role === UserRole.PHOTOGRAPHER ||
user?.role === UserRole.EVENT_OWNER) && (
<div <div
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[100] p-4 fade-in" className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[100] p-4 fade-in"
onClick={() => setIsEditProfileModalOpen(false)} onClick={() => setIsEditProfileModalOpen(false)}
@ -570,8 +641,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
<Camera size={28} className="text-white" /> <Camera size={28} className="text-white" />
</div> </div>
</div> </div>
<h2 className="text-2xl font-bold text-white mb-1">Editar Perfil</h2> <h2 className="text-2xl font-bold text-white mb-1">
<p className="text-white/80 text-sm">Atualize suas informações pessoais</p> Editar Perfil
</h2>
<p className="text-white/80 text-sm">
Atualize suas informações pessoais
</p>
</div> </div>
{/* Form */} {/* Form */}
@ -590,11 +665,16 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
Nome Completo Nome Completo
</label> </label>
<div className="relative"> <div className="relative">
<User size={20} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" /> <User
size={20}
className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
/>
<input <input
type="text" type="text"
value={profileData.name} value={profileData.name}
onChange={(e) => setProfileData({ ...profileData, name: e.target.value })} onChange={(e) =>
setProfileData({ ...profileData, name: e.target.value })
}
className="w-full pl-11 pr-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#492E61] focus:border-transparent transition-all" className="w-full pl-11 pr-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#492E61] focus:border-transparent transition-all"
placeholder="Seu nome completo" placeholder="Seu nome completo"
required required
@ -608,11 +688,19 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
Email Email
</label> </label>
<div className="relative"> <div className="relative">
<Mail size={20} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" /> <Mail
size={20}
className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
/>
<input <input
type="email" type="email"
value={profileData.email} value={profileData.email}
onChange={(e) => setProfileData({ ...profileData, email: e.target.value })} onChange={(e) =>
setProfileData({
...profileData,
email: e.target.value,
})
}
className="w-full pl-11 pr-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#492E61] focus:border-transparent transition-all" className="w-full pl-11 pr-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#492E61] focus:border-transparent transition-all"
placeholder="seu@email.com" placeholder="seu@email.com"
required required
@ -626,11 +714,19 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
Telefone Telefone
</label> </label>
<div className="relative"> <div className="relative">
<Phone size={20} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" /> <Phone
size={20}
className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
/>
<input <input
type="tel" type="tel"
value={profileData.phone} value={profileData.phone}
onChange={(e) => setProfileData({ ...profileData, phone: e.target.value })} onChange={(e) =>
setProfileData({
...profileData,
phone: e.target.value,
})
}
className="w-full pl-11 pr-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#492E61] focus:border-transparent transition-all" className="w-full pl-11 pr-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#492E61] focus:border-transparent transition-all"
placeholder="(00) 00000-0000" placeholder="(00) 00000-0000"
/> />
@ -656,8 +752,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
</form> </form>
</div> </div>
</div> </div>
) )}
}
</> </>
); );
}; };

39
frontend/contexts/DataContext.tsx
View file

@ -1,5 +1,11 @@
import React, { createContext, useContext, useState, ReactNode } from "react"; import React, { createContext, useContext, useState, ReactNode } from "react";
import { EventData, EventStatus, EventType, Institution, Course } from "../types"; import {
EventData,
EventStatus,
EventType,
Institution,
Course,
} from "../types";
// Initial Mock Data // Initial Mock Data
const INITIAL_INSTITUTIONS: Institution[] = [ const INITIAL_INSTITUTIONS: Institution[] = [
@ -37,7 +43,8 @@ const INITIAL_EVENTS: EventData[] = [
state: "RS", state: "RS",
zip: "95670-000", zip: "95670-000",
}, },
briefing: "Cerimônia de formatura com 120 formandos. Foco em fotos individuais e da turma.", briefing:
"Cerimônia de formatura com 120 formandos. Foco em fotos individuais e da turma.",
coverImage: "https://picsum.photos/id/1059/800/400", coverImage: "https://picsum.photos/id/1059/800/400",
contacts: [ contacts: [
{ {
@ -67,7 +74,8 @@ const INITIAL_EVENTS: EventData[] = [
state: "SP", state: "SP",
zip: "04551-000", zip: "04551-000",
}, },
briefing: "Colação de grau solene. Capturar juramento e entrega de diplomas.", briefing:
"Colação de grau solene. Capturar juramento e entrega de diplomas.",
coverImage: "https://picsum.photos/id/3/800/400", coverImage: "https://picsum.photos/id/3/800/400",
contacts: [ contacts: [
{ {
@ -117,7 +125,8 @@ const INITIAL_EVENTS: EventData[] = [
state: "RS", state: "RS",
zip: "90035-003", zip: "90035-003",
}, },
briefing: "Defesa de tese em sala fechada. Fotos discretas da apresentação e banca.", briefing:
"Defesa de tese em sala fechada. Fotos discretas da apresentação e banca.",
coverImage: "https://picsum.photos/id/20/800/400", coverImage: "https://picsum.photos/id/20/800/400",
contacts: [ contacts: [
{ {
@ -196,7 +205,8 @@ const INITIAL_EVENTS: EventData[] = [
state: "SP", state: "SP",
zip: "04578-000", zip: "04578-000",
}, },
briefing: "Congresso com múltiplas salas. Cobrir palestrantes principais e stands.", briefing:
"Congresso com múltiplas salas. Cobrir palestrantes principais e stands.",
coverImage: "https://picsum.photos/id/50/800/400", coverImage: "https://picsum.photos/id/50/800/400",
contacts: [ contacts: [
{ {
@ -275,7 +285,8 @@ const INITIAL_EVENTS: EventData[] = [
state: "SP", state: "SP",
zip: "01045-000", zip: "01045-000",
}, },
briefing: "Festival com apresentações musicais e teatrais. Cobertura completa.", briefing:
"Festival com apresentações musicais e teatrais. Cobertura completa.",
coverImage: "https://picsum.photos/id/80/800/400", coverImage: "https://picsum.photos/id/80/800/400",
contacts: [], contacts: [],
checklist: [], checklist: [],
@ -296,7 +307,8 @@ const INITIAL_EVENTS: EventData[] = [
state: "RS", state: "RS",
zip: "91509-900", zip: "91509-900",
}, },
briefing: "Defesa de dissertação. Registro da apresentação e momento da aprovação.", briefing:
"Defesa de dissertação. Registro da apresentação e momento da aprovação.",
coverImage: "https://picsum.photos/id/90/800/400", coverImage: "https://picsum.photos/id/90/800/400",
contacts: [], contacts: [],
checklist: [], checklist: [],
@ -438,7 +450,8 @@ const INITIAL_EVENTS: EventData[] = [
state: "RS", state: "RS",
zip: "95670-200", zip: "95670-200",
}, },
briefing: "Formatura elegante em hotel. Cobertura completa da cerimônia e recepção.", briefing:
"Formatura elegante em hotel. Cobertura completa da cerimônia e recepção.",
coverImage: "https://picsum.photos/id/150/800/400", coverImage: "https://picsum.photos/id/150/800/400",
contacts: [ contacts: [
{ {
@ -467,7 +480,8 @@ const INITIAL_EVENTS: EventData[] = [
state: "RS", state: "RS",
zip: "90540-000", zip: "90540-000",
}, },
briefing: "Múltiplas defesas sequenciais. Fotos rápidas de cada apresentação.", briefing:
"Múltiplas defesas sequenciais. Fotos rápidas de cada apresentação.",
coverImage: "https://picsum.photos/id/160/800/400", coverImage: "https://picsum.photos/id/160/800/400",
contacts: [], contacts: [],
checklist: [], checklist: [],
@ -488,7 +502,8 @@ const INITIAL_EVENTS: EventData[] = [
state: "RS", state: "RS",
zip: "90040-000", zip: "90040-000",
}, },
briefing: "Festival ao ar livre com várias bandas. Fotos de palco e público.", briefing:
"Festival ao ar livre com várias bandas. Fotos de palco e público.",
coverImage: "https://picsum.photos/id/170/800/400", coverImage: "https://picsum.photos/id/170/800/400",
contacts: [], contacts: [],
checklist: [], checklist: [],
@ -651,7 +666,9 @@ export const DataProvider: React.FC<{ children: ReactNode }> = ({
const updateCourse = (id: string, updatedData: Partial<Course>) => { const updateCourse = (id: string, updatedData: Partial<Course>) => {
setCourses((prev) => setCourses((prev) =>
prev.map((course) => (course.id === id ? { ...course, ...updatedData } : course)) prev.map((course) =>
course.id === id ? { ...course, ...updatedData } : course
)
); );
}; };

131
frontend/pages/CourseManagement.tsx
View file

@ -1,41 +1,62 @@
import React, { useState } from 'react'; import React, { useState } from "react";
import { useData } from '../contexts/DataContext'; import { useData } from "../contexts/DataContext";
import { useAuth } from '../contexts/AuthContext'; import { useAuth } from "../contexts/AuthContext";
import { UserRole, Course } from '../types'; import { UserRole, Course } from "../types";
import { CourseForm } from '../components/CourseForm'; import { CourseForm } from "../components/CourseForm";
import { GraduationCap, Plus, Building2, ChevronRight, Edit, Trash2, CheckCircle, XCircle } from 'lucide-react'; import {
import { Button } from '../components/Button'; GraduationCap,
Plus,
Building2,
ChevronRight,
Edit,
Trash2,
CheckCircle,
XCircle,
} from "lucide-react";
import { Button } from "../components/Button";
export const CourseManagement: React.FC = () => { export const CourseManagement: React.FC = () => {
const { user } = useAuth(); const { user } = useAuth();
const { const {
institutions, institutions,
courses, courses,
addCourse, addCourse,
updateCourse, updateCourse,
getCoursesByInstitutionId getCoursesByInstitutionId,
} = useData(); } = useData();
const [selectedInstitution, setSelectedInstitution] = useState<string | null>(null); const [selectedInstitution, setSelectedInstitution] = useState<string | null>(
null
);
const [showCourseForm, setShowCourseForm] = useState(false); const [showCourseForm, setShowCourseForm] = useState(false);
const [editingCourse, setEditingCourse] = useState<Course | undefined>(undefined); const [editingCourse, setEditingCourse] = useState<Course | undefined>(
undefined
);
// Verificar se é admin // Verificar se é admin
const isAdmin = user?.role === UserRole.SUPERADMIN || user?.role === UserRole.BUSINESS_OWNER; const isAdmin =
user?.role === UserRole.SUPERADMIN ||
user?.role === UserRole.BUSINESS_OWNER;
if (!isAdmin) { if (!isAdmin) {
return ( return (
<div className="min-h-screen bg-gray-50 pt-32 pb-12"> <div className="min-h-screen bg-gray-50 pt-32 pb-12">
<div className="max-w-7xl mx-auto px-4 text-center"> <div className="max-w-7xl mx-auto px-4 text-center">
<h1 className="text-2xl font-bold text-red-600">Acesso Negado</h1> <h1 className="text-2xl font-bold text-red-600">Acesso Negado</h1>
<p className="text-gray-600 mt-2">Apenas administradores podem acessar esta página.</p> <p className="text-gray-600 mt-2">
Apenas administradores podem acessar esta página.
</p>
</div> </div>
</div> </div>
); );
} }
const selectedInstitutionData = institutions.find(inst => inst.id === selectedInstitution); const selectedInstitutionData = institutions.find(
const institutionCourses = selectedInstitution ? getCoursesByInstitutionId(selectedInstitution) : []; (inst) => inst.id === selectedInstitution
);
const institutionCourses = selectedInstitution
? getCoursesByInstitutionId(selectedInstitution)
: [];
const handleAddCourse = () => { const handleAddCourse = () => {
setEditingCourse(undefined); setEditingCourse(undefined);
@ -59,7 +80,7 @@ export const CourseManagement: React.FC = () => {
semester: courseData.semester, semester: courseData.semester,
graduationType: courseData.graduationType!, graduationType: courseData.graduationType!,
createdAt: new Date().toISOString(), createdAt: new Date().toISOString(),
createdBy: user?.id || '', createdBy: user?.id || "",
isActive: courseData.isActive !== false, isActive: courseData.isActive !== false,
}; };
addCourse(newCourse); addCourse(newCourse);
@ -83,7 +104,8 @@ export const CourseManagement: React.FC = () => {
</h1> </h1>
</div> </div>
<p className="text-sm sm:text-base text-gray-600"> <p className="text-sm sm:text-base text-gray-600">
Cadastre e gerencie os cursos/turmas disponíveis em cada universidade Cadastre e gerencie os cursos/turmas disponíveis em cada
universidade
</p> </p>
</div> </div>
@ -97,7 +119,7 @@ export const CourseManagement: React.FC = () => {
}} }}
onSubmit={handleSubmitCourse} onSubmit={handleSubmitCourse}
initialData={editingCourse} initialData={editingCourse}
userId={user?.id || ''} userId={user?.id || ""}
institutions={institutions} institutions={institutions}
/> />
</div> </div>
@ -115,7 +137,8 @@ export const CourseManagement: React.FC = () => {
</h2> </h2>
</div> </div>
<span className="text-sm text-gray-500 bg-gray-100 px-3 py-1 rounded-full"> <span className="text-sm text-gray-500 bg-gray-100 px-3 py-1 rounded-full">
{institutions.length} {institutions.length === 1 ? 'instituição' : 'instituições'} {institutions.length}{" "}
{institutions.length === 1 ? "instituição" : "instituições"}
</span> </span>
</div> </div>
</div> </div>
@ -141,29 +164,41 @@ export const CourseManagement: React.FC = () => {
<tbody className="divide-y divide-gray-200"> <tbody className="divide-y divide-gray-200">
{institutions.length === 0 ? ( {institutions.length === 0 ? (
<tr> <tr>
<td colSpan={4} className="px-4 py-8 text-center text-gray-500"> <td
colSpan={4}
className="px-4 py-8 text-center text-gray-500"
>
Nenhuma universidade cadastrada Nenhuma universidade cadastrada
</td> </td>
</tr> </tr>
) : ( ) : (
institutions.map((institution) => { institutions.map((institution) => {
const coursesCount = getCoursesByInstitutionId(institution.id).length; const coursesCount = getCoursesByInstitutionId(
institution.id
).length;
const isSelected = selectedInstitution === institution.id; const isSelected = selectedInstitution === institution.id;
return ( return (
<tr <tr
key={institution.id} key={institution.id}
className={`hover:bg-gray-50 transition-colors cursor-pointer ${ className={`hover:bg-gray-50 transition-colors cursor-pointer ${
isSelected ? 'bg-blue-50 border-l-4 border-brand-gold' : '' isSelected
? "bg-blue-50 border-l-4 border-brand-gold"
: ""
}`} }`}
onClick={() => setSelectedInstitution(isSelected ? null : institution.id)} onClick={() =>
setSelectedInstitution(
isSelected ? null : institution.id
)
}
> >
<td className="px-4 py-4"> <td className="px-4 py-4">
<div className="text-sm font-medium text-gray-900"> <div className="text-sm font-medium text-gray-900">
{institution.name} {institution.name}
</div> </div>
<div className="text-xs text-gray-500 mt-0.5"> <div className="text-xs text-gray-500 mt-0.5">
{institution.address?.city}, {institution.address?.state} {institution.address?.city},{" "}
{institution.address?.state}
</div> </div>
</td> </td>
<td className="px-4 py-4"> <td className="px-4 py-4">
@ -172,20 +207,24 @@ export const CourseManagement: React.FC = () => {
</span> </span>
</td> </td>
<td className="px-4 py-4 text-center"> <td className="px-4 py-4 text-center">
<span className={`inline-flex items-center justify-center w-8 h-8 rounded-full text-sm font-semibold ${ <span
coursesCount > 0 className={`inline-flex items-center justify-center w-8 h-8 rounded-full text-sm font-semibold ${
? 'bg-green-100 text-green-700' coursesCount > 0
: 'bg-gray-100 text-gray-500' ? "bg-green-100 text-green-700"
}`}> : "bg-gray-100 text-gray-500"
}`}
>
{coursesCount} {coursesCount}
</span> </span>
</td> </td>
<td className="px-4 py-4 text-center"> <td className="px-4 py-4 text-center">
<ChevronRight <ChevronRight
className={`inline-block transition-transform ${ className={`inline-block transition-transform ${
isSelected ? 'rotate-90 text-brand-gold' : 'text-gray-400' isSelected
}`} ? "rotate-90 text-brand-gold"
size={20} : "text-gray-400"
}`}
size={20}
/> />
</td> </td>
</tr> </tr>
@ -211,7 +250,10 @@ export const CourseManagement: React.FC = () => {
</h2> </h2>
{selectedInstitutionData && ( {selectedInstitutionData && (
<p className="text-xs text-gray-500 mt-1"> <p className="text-xs text-gray-500 mt-1">
{institutionCourses.length} {institutionCourses.length === 1 ? 'curso cadastrado' : 'cursos cadastrados'} {institutionCourses.length}{" "}
{institutionCourses.length === 1
? "curso cadastrado"
: "cursos cadastrados"}
</p> </p>
)} )}
</div> </div>
@ -293,13 +335,20 @@ export const CourseManagement: React.FC = () => {
> >
{course.isActive ? ( {course.isActive ? (
<> <>
<CheckCircle size={16} className="text-green-500" /> <CheckCircle
<span className="text-xs text-green-700 font-medium">Ativo</span> size={16}
className="text-green-500"
/>
<span className="text-xs text-green-700 font-medium">
Ativo
</span>
</> </>
) : ( ) : (
<> <>
<XCircle size={16} className="text-gray-400" /> <XCircle size={16} className="text-gray-400" />
<span className="text-xs text-gray-500 font-medium">Inativo</span> <span className="text-xs text-gray-500 font-medium">
Inativo
</span>
</> </>
)} )}
</button> </button>

1163
frontend/pages/Settings.tsx
View file

File diff suppressed because it is too large Load diff

1457
frontend/pages/Team.tsx
View file

File diff suppressed because it is too large Load diff