feat: reestruturar página de equipe com sistema de profissionais multi-função
- 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
parent
3096f07102
commit
de5ceea1f3
8 changed files with 2066 additions and 1164 deletions
|
|
@ -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"
|
||||
/>
|
||||
<p className="text-brand-black/80 text-xs sm:text-sm md:text-base leading-relaxed">
|
||||
Eternizando momentos únicos com excelência e profissionalismo
|
||||
desde 2020.
|
||||
Eternizando momentos únicos com excelência e
|
||||
profissionalismo desde 2020.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import React, { useState } from 'react';
|
||||
import { Course, Institution } from '../types';
|
||||
import { Input, Select } from './Input';
|
||||
import { Button } from './Button';
|
||||
import { GraduationCap, X, Check, AlertCircle } from 'lucide-react';
|
||||
import React, { useState } from "react";
|
||||
import { Course, Institution } from "../types";
|
||||
import { Input, Select } from "./Input";
|
||||
import { Button } from "./Button";
|
||||
import { GraduationCap, X, Check, AlertCircle } from "lucide-react";
|
||||
|
||||
interface CourseFormProps {
|
||||
onCancel: () => void;
|
||||
|
|
@ -13,12 +13,12 @@ interface CourseFormProps {
|
|||
}
|
||||
|
||||
const GRADUATION_TYPES = [
|
||||
'Bacharelado',
|
||||
'Licenciatura',
|
||||
'Tecnológico',
|
||||
'Especialização',
|
||||
'Mestrado',
|
||||
'Doutorado'
|
||||
"Bacharelado",
|
||||
"Licenciatura",
|
||||
"Tecnológico",
|
||||
"Especialização",
|
||||
"Mestrado",
|
||||
"Doutorado",
|
||||
];
|
||||
|
||||
export const CourseForm: React.FC<CourseFormProps> = ({
|
||||
|
|
@ -26,39 +26,41 @@ export const CourseForm: React.FC<CourseFormProps> = ({
|
|||
onSubmit,
|
||||
initialData,
|
||||
userId,
|
||||
institutions
|
||||
institutions,
|
||||
}) => {
|
||||
const currentYear = new Date().getFullYear();
|
||||
const [formData, setFormData] = useState<Partial<Course>>(initialData || {
|
||||
name: '',
|
||||
institutionId: '',
|
||||
const [formData, setFormData] = useState<Partial<Course>>(
|
||||
initialData || {
|
||||
name: "",
|
||||
institutionId: "",
|
||||
year: currentYear,
|
||||
semester: 1,
|
||||
graduationType: '',
|
||||
graduationType: "",
|
||||
createdAt: new Date().toISOString(),
|
||||
createdBy: userId,
|
||||
isActive: true,
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
const [showToast, setShowToast] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Validações
|
||||
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;
|
||||
}
|
||||
|
||||
if (!formData.institutionId) {
|
||||
setError('Selecione uma universidade');
|
||||
setError("Selecione uma universidade");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.graduationType) {
|
||||
setError('Selecione o tipo de graduação');
|
||||
setError("Selecione o tipo de graduação");
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -69,20 +71,21 @@ export const CourseForm: React.FC<CourseFormProps> = ({
|
|||
};
|
||||
|
||||
const handleChange = (field: keyof Course, value: any) => {
|
||||
setFormData(prev => ({ ...prev, [field]: value }));
|
||||
setError(''); // Limpa erro ao editar
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
setError(""); // Limpa erro ao editar
|
||||
};
|
||||
|
||||
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">Curso cadastrado com sucesso.</p>
|
||||
<p className="text-xs text-gray-300">
|
||||
Curso cadastrado com sucesso.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -93,7 +96,7 @@ export const CourseForm: React.FC<CourseFormProps> = ({
|
|||
<GraduationCap className="text-brand-gold h-8 w-8" />
|
||||
<div>
|
||||
<h2 className="text-2xl font-serif text-brand-black">
|
||||
{initialData ? 'Editar Curso/Turma' : 'Cadastrar Curso/Turma'}
|
||||
{initialData ? "Editar Curso/Turma" : "Cadastrar Curso/Turma"}
|
||||
</h2>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Registre as turmas disponíveis para eventos fotográficos
|
||||
|
|
@ -109,11 +112,13 @@ export const CourseForm: React.FC<CourseFormProps> = ({
|
|||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="p-8 space-y-6">
|
||||
|
||||
{/* Erro global */}
|
||||
{error && (
|
||||
<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>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -126,20 +131,20 @@ export const CourseForm: React.FC<CourseFormProps> = ({
|
|||
|
||||
<Select
|
||||
label="Universidade*"
|
||||
options={institutions.map(inst => ({
|
||||
options={institutions.map((inst) => ({
|
||||
value: inst.id,
|
||||
label: `${inst.name} - ${inst.type}`
|
||||
label: `${inst.name} - ${inst.type}`,
|
||||
}))}
|
||||
value={formData.institutionId || ''}
|
||||
onChange={(e) => handleChange('institutionId', e.target.value)}
|
||||
value={formData.institutionId || ""}
|
||||
onChange={(e) => handleChange("institutionId", e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Nome do Curso/Turma*"
|
||||
placeholder="Ex: Engenharia Civil 2025, Medicina - Turma A"
|
||||
value={formData.name || ''}
|
||||
onChange={(e) => handleChange('name', e.target.value)}
|
||||
value={formData.name || ""}
|
||||
onChange={(e) => handleChange("name", e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
|
|
@ -149,7 +154,7 @@ export const CourseForm: React.FC<CourseFormProps> = ({
|
|||
type="number"
|
||||
placeholder={currentYear.toString()}
|
||||
value={formData.year || currentYear}
|
||||
onChange={(e) => handleChange('year', parseInt(e.target.value))}
|
||||
onChange={(e) => handleChange("year", parseInt(e.target.value))}
|
||||
min={currentYear - 1}
|
||||
max={currentYear + 5}
|
||||
required
|
||||
|
|
@ -158,18 +163,20 @@ export const CourseForm: React.FC<CourseFormProps> = ({
|
|||
<Select
|
||||
label="Semestre"
|
||||
options={[
|
||||
{ value: '1', label: '1º Semestre' },
|
||||
{ value: '2', label: '2º Semestre' }
|
||||
{ value: "1", label: "1º Semestre" },
|
||||
{ value: "2", label: "2º Semestre" },
|
||||
]}
|
||||
value={formData.semester?.toString() || '1'}
|
||||
onChange={(e) => handleChange('semester', parseInt(e.target.value))}
|
||||
value={formData.semester?.toString() || "1"}
|
||||
onChange={(e) =>
|
||||
handleChange("semester", parseInt(e.target.value))
|
||||
}
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Tipo*"
|
||||
options={GRADUATION_TYPES.map(t => ({ value: t, label: t }))}
|
||||
value={formData.graduationType || ''}
|
||||
onChange={(e) => handleChange('graduationType', e.target.value)}
|
||||
options={GRADUATION_TYPES.map((t) => ({ value: t, label: t }))}
|
||||
value={formData.graduationType || ""}
|
||||
onChange={(e) => handleChange("graduationType", e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -180,7 +187,7 @@ export const CourseForm: React.FC<CourseFormProps> = ({
|
|||
type="checkbox"
|
||||
id="isActive"
|
||||
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"
|
||||
/>
|
||||
<label htmlFor="isActive" className="text-sm text-gray-700">
|
||||
|
|
@ -189,14 +196,13 @@ export const CourseForm: React.FC<CourseFormProps> = ({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex justify-end space-x-3 pt-6 border-t">
|
||||
<Button variant="outline" onClick={onCancel} type="button">
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button type="submit" variant="secondary">
|
||||
{initialData ? 'Salvar Alterações' : 'Cadastrar Curso'}
|
||||
{initialData ? "Salvar Alterações" : "Cadastrar Curso"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export const EventForm: React.FC<EventFormProps> = ({
|
|||
institutions,
|
||||
getInstitutionsByUserId,
|
||||
addInstitution,
|
||||
getActiveCoursesByInstitutionId
|
||||
getActiveCoursesByInstitutionId,
|
||||
} = useData();
|
||||
const [activeTab, setActiveTab] = useState<
|
||||
"details" | "location" | "briefing" | "files"
|
||||
|
|
@ -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="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>
|
||||
<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."
|
||||
|
|
@ -311,11 +313,13 @@ export const EventForm: React.FC<EventFormProps> = ({
|
|||
{["details", "location", "briefing", "files"].map((tab, idx) => (
|
||||
<div
|
||||
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
|
||||
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 ${
|
||||
activeTab === tab
|
||||
? "bg-[#492E61] text-white"
|
||||
: "bg-gray-200 text-gray-600"
|
||||
}`}
|
||||
|
|
@ -334,20 +338,29 @@ export const EventForm: React.FC<EventFormProps> = ({
|
|||
{[
|
||||
{ id: "details", label: "Detalhes", icon: "1" },
|
||||
{ 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" },
|
||||
].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
|
||||
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 ${
|
||||
<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.icon}
|
||||
</span>
|
||||
{item.label}
|
||||
</button>
|
||||
))}
|
||||
|
|
@ -369,7 +382,8 @@ 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 ${activeTab === item.id
|
||||
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"
|
||||
}`}
|
||||
|
|
@ -544,7 +558,9 @@ export const EventForm: React.FC<EventFormProps> = ({
|
|||
Nenhum curso cadastrado
|
||||
</p>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -563,7 +579,8 @@ export const EventForm: React.FC<EventFormProps> = ({
|
|||
<option value="">Selecione um curso (opcional)</option>
|
||||
{availableCourses.map((course) => (
|
||||
<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>
|
||||
))}
|
||||
</select>
|
||||
|
|
@ -619,7 +636,10 @@ export const EventForm: React.FC<EventFormProps> = ({
|
|||
</div>
|
||||
|
||||
<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
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -796,7 +816,10 @@ export const EventForm: React.FC<EventFormProps> = ({
|
|||
>
|
||||
Voltar
|
||||
</Button>
|
||||
<Button onClick={() => setActiveTab("briefing")} className="w-full sm:w-auto">
|
||||
<Button
|
||||
onClick={() => setActiveTab("briefing")}
|
||||
className="w-full sm:w-auto"
|
||||
>
|
||||
Próximo
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -862,7 +885,8 @@ export const EventForm: React.FC<EventFormProps> = ({
|
|||
/>
|
||||
<button
|
||||
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} />
|
||||
|
|
@ -880,7 +904,12 @@ export const EventForm: React.FC<EventFormProps> = ({
|
|||
>
|
||||
Voltar
|
||||
</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>
|
||||
)}
|
||||
|
|
@ -938,7 +967,11 @@ export const EventForm: React.FC<EventFormProps> = ({
|
|||
>
|
||||
Voltar
|
||||
</Button>
|
||||
<Button onClick={handleSubmit} variant="secondary" className="w-full sm:w-auto">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
variant="secondary"
|
||||
className="w-full sm:w-auto"
|
||||
>
|
||||
{submitLabel}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,17 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { UserRole } from "../types";
|
||||
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";
|
||||
|
||||
interface NavbarProps {
|
||||
|
|
@ -34,7 +44,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (isAccountDropdownOpen) {
|
||||
const target = event.target as HTMLElement;
|
||||
if (!target.closest('.relative')) {
|
||||
if (!target.closest(".relative")) {
|
||||
setIsAccountDropdownOpen(false);
|
||||
}
|
||||
}
|
||||
|
|
@ -51,7 +61,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
case UserRole.BUSINESS_OWNER:
|
||||
return [
|
||||
{ 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: "Financeiro", path: "finance" },
|
||||
];
|
||||
|
|
@ -61,9 +71,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
{ name: "Solicitar Evento", path: "request-event" },
|
||||
];
|
||||
case UserRole.PHOTOGRAPHER:
|
||||
return [
|
||||
{ name: "Eventos Designados", path: "dashboard" },
|
||||
];
|
||||
return [{ name: "Eventos Designados", path: "dashboard" }];
|
||||
default:
|
||||
return [];
|
||||
}
|
||||
|
|
@ -102,7 +110,8 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
<button
|
||||
key={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 ${
|
||||
currentPage === link.path
|
||||
? "text-brand-gold border-b-2 border-brand-gold"
|
||||
: "text-gray-600 border-b-2 border-transparent"
|
||||
}`}
|
||||
|
|
@ -129,7 +138,9 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
{/* Avatar com dropdown */}
|
||||
<div className="relative">
|
||||
<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"
|
||||
>
|
||||
<img
|
||||
|
|
@ -151,8 +162,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-white font-bold text-lg mb-1">{user.name}</h3>
|
||||
<p className="text-white/90 text-sm mb-1">{user.email}</p>
|
||||
<h3 className="text-white font-bold text-lg mb-1">
|
||||
{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">
|
||||
{getRoleLabel()}
|
||||
</span>
|
||||
|
|
@ -161,7 +176,8 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
{/* Menu Items */}
|
||||
<div className="p-4 space-y-2 bg-gray-50">
|
||||
{/* 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
|
||||
onClick={() => {
|
||||
setIsEditProfileModalOpen(true);
|
||||
|
|
@ -173,14 +189,19 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
<User size={20} className="text-[#492E61]" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-semibold text-gray-900">Editar Perfil</p>
|
||||
<p className="text-xs text-gray-500">Atualize suas informações</p>
|
||||
<p className="text-sm font-semibold text-gray-900">
|
||||
Editar Perfil
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
Atualize suas informações
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* 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
|
||||
onClick={() => {
|
||||
onNavigate("settings");
|
||||
|
|
@ -192,8 +213,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
<Settings size={20} className="text-gray-600" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-semibold text-gray-900">Configurações</p>
|
||||
<p className="text-xs text-gray-500">Preferências da conta</p>
|
||||
<p className="text-sm font-semibold text-gray-900">
|
||||
Configurações
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
Preferências da conta
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
|
@ -210,8 +235,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
<LogOut size={20} className="text-red-600" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-semibold text-red-600">Sair da Conta</p>
|
||||
<p className="text-xs text-red-400">Desconectar do sistema</p>
|
||||
<p className="text-sm font-semibold text-red-600">
|
||||
Sair da Conta
|
||||
</p>
|
||||
<p className="text-xs text-red-400">
|
||||
Desconectar do sistema
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -232,7 +261,9 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
</div>
|
||||
<div className="text-left hidden lg:block">
|
||||
<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>
|
||||
</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">
|
||||
<User size={32} className="text-white" />
|
||||
</div>
|
||||
<p className="text-white/70 text-xs mb-1">Olá, bem-vindo(a)</p>
|
||||
<p className="text-white font-semibold text-base">Entrar/Cadastrar</p>
|
||||
<p className="text-white/70 text-xs mb-1">
|
||||
Olá, bem-vindo(a)
|
||||
</p>
|
||||
<p className="text-white font-semibold text-base">
|
||||
Entrar/Cadastrar
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Botões */}
|
||||
|
|
@ -284,7 +319,9 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
<>
|
||||
<div className="relative">
|
||||
<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"
|
||||
>
|
||||
<img
|
||||
|
|
@ -306,8 +343,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-white font-bold text-lg mb-1">{user.name}</h3>
|
||||
<p className="text-white/90 text-sm mb-1">{user.email}</p>
|
||||
<h3 className="text-white font-bold text-lg mb-1">
|
||||
{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">
|
||||
{getRoleLabel()}
|
||||
</span>
|
||||
|
|
@ -316,7 +357,8 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
{/* Menu Items */}
|
||||
<div className="p-4 space-y-2 bg-gray-50">
|
||||
{/* 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
|
||||
onClick={() => {
|
||||
setIsEditProfileModalOpen(true);
|
||||
|
|
@ -328,14 +370,19 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
<User size={20} className="text-[#492E61]" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-semibold text-gray-900">Editar Perfil</p>
|
||||
<p className="text-xs text-gray-500">Atualize suas informações</p>
|
||||
<p className="text-sm font-semibold text-gray-900">
|
||||
Editar Perfil
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
Atualize suas informações
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* 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
|
||||
onClick={() => {
|
||||
onNavigate("settings");
|
||||
|
|
@ -347,8 +394,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
<Settings size={20} className="text-gray-600" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-semibold text-gray-900">Configurações</p>
|
||||
<p className="text-xs text-gray-500">Preferências da conta</p>
|
||||
<p className="text-sm font-semibold text-gray-900">
|
||||
Configurações
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
Preferências da conta
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
|
@ -365,8 +416,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
<LogOut size={20} className="text-red-600" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-semibold text-red-600">Sair da Conta</p>
|
||||
<p className="text-xs text-red-400">Desconectar do sistema</p>
|
||||
<p className="text-sm font-semibold text-red-600">
|
||||
Sair da Conta
|
||||
</p>
|
||||
<p className="text-xs text-red-400">
|
||||
Desconectar do sistema
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -385,7 +440,9 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
) : (
|
||||
<div className="relative">
|
||||
<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"
|
||||
>
|
||||
<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">
|
||||
<User size={32} className="text-white" />
|
||||
</div>
|
||||
<p className="text-white/70 text-xs mb-1">Olá, bem-vindo(a)</p>
|
||||
<p className="text-white font-semibold text-base">Entrar/Cadastrar</p>
|
||||
<p className="text-white/70 text-xs mb-1">
|
||||
Olá, bem-vindo(a)
|
||||
</p>
|
||||
<p className="text-white font-semibold text-base">
|
||||
Entrar/Cadastrar
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Botões */}
|
||||
|
|
@ -475,7 +536,8 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
</div>
|
||||
|
||||
{/* 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
|
||||
onClick={() => {
|
||||
setIsEditProfileModalOpen(true);
|
||||
|
|
@ -487,8 +549,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
<User size={20} className="text-[#492E61]" />
|
||||
</div>
|
||||
<div className="flex-1 text-left">
|
||||
<p className="text-sm font-semibold text-gray-900">Editar Perfil</p>
|
||||
<p className="text-xs text-gray-500">Atualize suas informações</p>
|
||||
<p className="text-sm font-semibold text-gray-900">
|
||||
Editar Perfil
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
Atualize suas informações
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
|
@ -505,8 +571,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
<LogOut size={20} className="text-red-600" />
|
||||
</div>
|
||||
<div className="flex-1 text-left">
|
||||
<p className="text-sm font-semibold text-red-600">Sair da Conta</p>
|
||||
<p className="text-xs text-red-400">Desconectar do sistema</p>
|
||||
<p className="text-sm font-semibold text-red-600">
|
||||
Sair da Conta
|
||||
</p>
|
||||
<p className="text-xs text-red-400">
|
||||
Desconectar do sistema
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -542,8 +612,9 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
</nav>
|
||||
|
||||
{/* Modal de Edição de Perfil - Apenas para Fotógrafos e Clientes */}
|
||||
{
|
||||
isEditProfileModalOpen && (user?.role === UserRole.PHOTOGRAPHER || user?.role === UserRole.EVENT_OWNER) && (
|
||||
{isEditProfileModalOpen &&
|
||||
(user?.role === UserRole.PHOTOGRAPHER ||
|
||||
user?.role === UserRole.EVENT_OWNER) && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[100] p-4 fade-in"
|
||||
onClick={() => setIsEditProfileModalOpen(false)}
|
||||
|
|
@ -570,8 +641,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
<Camera size={28} className="text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-white mb-1">Editar Perfil</h2>
|
||||
<p className="text-white/80 text-sm">Atualize suas informações pessoais</p>
|
||||
<h2 className="text-2xl font-bold text-white mb-1">
|
||||
Editar Perfil
|
||||
</h2>
|
||||
<p className="text-white/80 text-sm">
|
||||
Atualize suas informações pessoais
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
|
|
@ -590,11 +665,16 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
Nome Completo
|
||||
</label>
|
||||
<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
|
||||
type="text"
|
||||
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"
|
||||
placeholder="Seu nome completo"
|
||||
required
|
||||
|
|
@ -608,11 +688,19 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
Email
|
||||
</label>
|
||||
<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
|
||||
type="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"
|
||||
placeholder="seu@email.com"
|
||||
required
|
||||
|
|
@ -626,11 +714,19 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
Telefone
|
||||
</label>
|
||||
<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
|
||||
type="tel"
|
||||
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"
|
||||
placeholder="(00) 00000-0000"
|
||||
/>
|
||||
|
|
@ -656,8 +752,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
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
|
||||
const INITIAL_INSTITUTIONS: Institution[] = [
|
||||
|
|
@ -37,7 +43,8 @@ const INITIAL_EVENTS: EventData[] = [
|
|||
state: "RS",
|
||||
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",
|
||||
contacts: [
|
||||
{
|
||||
|
|
@ -67,7 +74,8 @@ const INITIAL_EVENTS: EventData[] = [
|
|||
state: "SP",
|
||||
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",
|
||||
contacts: [
|
||||
{
|
||||
|
|
@ -117,7 +125,8 @@ const INITIAL_EVENTS: EventData[] = [
|
|||
state: "RS",
|
||||
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",
|
||||
contacts: [
|
||||
{
|
||||
|
|
@ -196,7 +205,8 @@ const INITIAL_EVENTS: EventData[] = [
|
|||
state: "SP",
|
||||
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",
|
||||
contacts: [
|
||||
{
|
||||
|
|
@ -275,7 +285,8 @@ const INITIAL_EVENTS: EventData[] = [
|
|||
state: "SP",
|
||||
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",
|
||||
contacts: [],
|
||||
checklist: [],
|
||||
|
|
@ -296,7 +307,8 @@ const INITIAL_EVENTS: EventData[] = [
|
|||
state: "RS",
|
||||
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",
|
||||
contacts: [],
|
||||
checklist: [],
|
||||
|
|
@ -438,7 +450,8 @@ const INITIAL_EVENTS: EventData[] = [
|
|||
state: "RS",
|
||||
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",
|
||||
contacts: [
|
||||
{
|
||||
|
|
@ -467,7 +480,8 @@ const INITIAL_EVENTS: EventData[] = [
|
|||
state: "RS",
|
||||
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",
|
||||
contacts: [],
|
||||
checklist: [],
|
||||
|
|
@ -488,7 +502,8 @@ const INITIAL_EVENTS: EventData[] = [
|
|||
state: "RS",
|
||||
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",
|
||||
contacts: [],
|
||||
checklist: [],
|
||||
|
|
@ -651,7 +666,9 @@ export const DataProvider: React.FC<{ children: ReactNode }> = ({
|
|||
|
||||
const updateCourse = (id: string, updatedData: Partial<Course>) => {
|
||||
setCourses((prev) =>
|
||||
prev.map((course) => (course.id === id ? { ...course, ...updatedData } : course))
|
||||
prev.map((course) =>
|
||||
course.id === id ? { ...course, ...updatedData } : course
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,19 @@
|
|||
import React, { useState } from 'react';
|
||||
import { useData } from '../contexts/DataContext';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { UserRole, Course } from '../types';
|
||||
import { CourseForm } from '../components/CourseForm';
|
||||
import { GraduationCap, Plus, Building2, ChevronRight, Edit, Trash2, CheckCircle, XCircle } from 'lucide-react';
|
||||
import { Button } from '../components/Button';
|
||||
import React, { useState } from "react";
|
||||
import { useData } from "../contexts/DataContext";
|
||||
import { useAuth } from "../contexts/AuthContext";
|
||||
import { UserRole, Course } from "../types";
|
||||
import { CourseForm } from "../components/CourseForm";
|
||||
import {
|
||||
GraduationCap,
|
||||
Plus,
|
||||
Building2,
|
||||
ChevronRight,
|
||||
Edit,
|
||||
Trash2,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
} from "lucide-react";
|
||||
import { Button } from "../components/Button";
|
||||
|
||||
export const CourseManagement: React.FC = () => {
|
||||
const { user } = useAuth();
|
||||
|
|
@ -13,29 +22,41 @@ export const CourseManagement: React.FC = () => {
|
|||
courses,
|
||||
addCourse,
|
||||
updateCourse,
|
||||
getCoursesByInstitutionId
|
||||
getCoursesByInstitutionId,
|
||||
} = useData();
|
||||
|
||||
const [selectedInstitution, setSelectedInstitution] = useState<string | null>(null);
|
||||
const [selectedInstitution, setSelectedInstitution] = useState<string | null>(
|
||||
null
|
||||
);
|
||||
const [showCourseForm, setShowCourseForm] = useState(false);
|
||||
const [editingCourse, setEditingCourse] = useState<Course | undefined>(undefined);
|
||||
const [editingCourse, setEditingCourse] = useState<Course | undefined>(
|
||||
undefined
|
||||
);
|
||||
|
||||
// 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) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 pt-32 pb-12">
|
||||
<div className="max-w-7xl mx-auto px-4 text-center">
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
const selectedInstitutionData = institutions.find(inst => inst.id === selectedInstitution);
|
||||
const institutionCourses = selectedInstitution ? getCoursesByInstitutionId(selectedInstitution) : [];
|
||||
const selectedInstitutionData = institutions.find(
|
||||
(inst) => inst.id === selectedInstitution
|
||||
);
|
||||
const institutionCourses = selectedInstitution
|
||||
? getCoursesByInstitutionId(selectedInstitution)
|
||||
: [];
|
||||
|
||||
const handleAddCourse = () => {
|
||||
setEditingCourse(undefined);
|
||||
|
|
@ -59,7 +80,7 @@ export const CourseManagement: React.FC = () => {
|
|||
semester: courseData.semester,
|
||||
graduationType: courseData.graduationType!,
|
||||
createdAt: new Date().toISOString(),
|
||||
createdBy: user?.id || '',
|
||||
createdBy: user?.id || "",
|
||||
isActive: courseData.isActive !== false,
|
||||
};
|
||||
addCourse(newCourse);
|
||||
|
|
@ -83,7 +104,8 @@ export const CourseManagement: React.FC = () => {
|
|||
</h1>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
|
@ -97,7 +119,7 @@ export const CourseManagement: React.FC = () => {
|
|||
}}
|
||||
onSubmit={handleSubmitCourse}
|
||||
initialData={editingCourse}
|
||||
userId={user?.id || ''}
|
||||
userId={user?.id || ""}
|
||||
institutions={institutions}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -115,7 +137,8 @@ export const CourseManagement: React.FC = () => {
|
|||
</h2>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -141,29 +164,41 @@ export const CourseManagement: React.FC = () => {
|
|||
<tbody className="divide-y divide-gray-200">
|
||||
{institutions.length === 0 ? (
|
||||
<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
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
institutions.map((institution) => {
|
||||
const coursesCount = getCoursesByInstitutionId(institution.id).length;
|
||||
const coursesCount = getCoursesByInstitutionId(
|
||||
institution.id
|
||||
).length;
|
||||
const isSelected = selectedInstitution === institution.id;
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={institution.id}
|
||||
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">
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
{institution.name}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-0.5">
|
||||
{institution.address?.city}, {institution.address?.state}
|
||||
{institution.address?.city},{" "}
|
||||
{institution.address?.state}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-4">
|
||||
|
|
@ -172,18 +207,22 @@ export const CourseManagement: React.FC = () => {
|
|||
</span>
|
||||
</td>
|
||||
<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
|
||||
className={`inline-flex items-center justify-center w-8 h-8 rounded-full text-sm font-semibold ${
|
||||
coursesCount > 0
|
||||
? 'bg-green-100 text-green-700'
|
||||
: 'bg-gray-100 text-gray-500'
|
||||
}`}>
|
||||
? "bg-green-100 text-green-700"
|
||||
: "bg-gray-100 text-gray-500"
|
||||
}`}
|
||||
>
|
||||
{coursesCount}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-4 text-center">
|
||||
<ChevronRight
|
||||
className={`inline-block transition-transform ${
|
||||
isSelected ? 'rotate-90 text-brand-gold' : 'text-gray-400'
|
||||
isSelected
|
||||
? "rotate-90 text-brand-gold"
|
||||
: "text-gray-400"
|
||||
}`}
|
||||
size={20}
|
||||
/>
|
||||
|
|
@ -211,7 +250,10 @@ export const CourseManagement: React.FC = () => {
|
|||
</h2>
|
||||
{selectedInstitutionData && (
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -293,13 +335,20 @@ export const CourseManagement: React.FC = () => {
|
|||
>
|
||||
{course.isActive ? (
|
||||
<>
|
||||
<CheckCircle size={16} className="text-green-500" />
|
||||
<span className="text-xs text-green-700 font-medium">Ativo</span>
|
||||
<CheckCircle
|
||||
size={16}
|
||||
className="text-green-500"
|
||||
/>
|
||||
<span className="text-xs text-green-700 font-medium">
|
||||
Ativo
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,36 @@
|
|||
import React, { useState } from 'react';
|
||||
import { User, Mail, Phone, MapPin, Lock, Bell, Palette, Globe, Save, Camera, GraduationCap } from 'lucide-react';
|
||||
import { Button } from '../components/Button';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { UserRole } from '../types';
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
User,
|
||||
Mail,
|
||||
Phone,
|
||||
MapPin,
|
||||
Lock,
|
||||
Bell,
|
||||
Palette,
|
||||
Globe,
|
||||
Save,
|
||||
Camera,
|
||||
GraduationCap,
|
||||
} from "lucide-react";
|
||||
import { Button } from "../components/Button";
|
||||
import { useAuth } from "../contexts/AuthContext";
|
||||
import { UserRole } from "../types";
|
||||
|
||||
export const SettingsPage: React.FC = () => {
|
||||
const { user } = useAuth();
|
||||
const isAdmin = user?.role === UserRole.SUPERADMIN || user?.role === UserRole.BUSINESS_OWNER;
|
||||
const [activeTab, setActiveTab] = useState<'profile' | 'account' | 'notifications' | 'appearance' | 'courses'>('profile');
|
||||
const isAdmin =
|
||||
user?.role === UserRole.SUPERADMIN ||
|
||||
user?.role === UserRole.BUSINESS_OWNER;
|
||||
const [activeTab, setActiveTab] = useState<
|
||||
"profile" | "account" | "notifications" | "appearance" | "courses"
|
||||
>("profile");
|
||||
const [profileData, setProfileData] = useState({
|
||||
name: 'João Silva',
|
||||
email: 'joao.silva@photum.com',
|
||||
phone: '(41) 99999-0000',
|
||||
location: 'Curitiba, PR',
|
||||
bio: 'Fotógrafo profissional especializado em eventos e formaturas há mais de 10 anos.',
|
||||
avatar: 'https://i.pravatar.cc/150?img=68'
|
||||
name: "João Silva",
|
||||
email: "joao.silva@photum.com",
|
||||
phone: "(41) 99999-0000",
|
||||
location: "Curitiba, PR",
|
||||
bio: "Fotógrafo profissional especializado em eventos e formaturas há mais de 10 anos.",
|
||||
avatar: "https://i.pravatar.cc/150?img=68",
|
||||
});
|
||||
|
||||
const [notificationSettings, setNotificationSettings] = useState({
|
||||
|
|
@ -23,26 +39,26 @@ export const SettingsPage: React.FC = () => {
|
|||
smsNotifications: false,
|
||||
eventReminders: true,
|
||||
paymentAlerts: true,
|
||||
teamUpdates: false
|
||||
teamUpdates: false,
|
||||
});
|
||||
|
||||
const [appearanceSettings, setAppearanceSettings] = useState({
|
||||
theme: 'light',
|
||||
language: 'pt-BR',
|
||||
dateFormat: 'DD/MM/YYYY',
|
||||
currency: 'BRL'
|
||||
theme: "light",
|
||||
language: "pt-BR",
|
||||
dateFormat: "DD/MM/YYYY",
|
||||
currency: "BRL",
|
||||
});
|
||||
|
||||
const handleSaveProfile = () => {
|
||||
alert('Perfil atualizado com sucesso!');
|
||||
alert("Perfil atualizado com sucesso!");
|
||||
};
|
||||
|
||||
const handleSaveNotifications = () => {
|
||||
alert('Configurações de notificações salvas!');
|
||||
alert("Configurações de notificações salvas!");
|
||||
};
|
||||
|
||||
const handleSaveAppearance = () => {
|
||||
alert('Configurações de aparência salvas!');
|
||||
alert("Configurações de aparência salvas!");
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -64,40 +80,44 @@ export const SettingsPage: React.FC = () => {
|
|||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-2">
|
||||
<nav className="flex overflow-x-auto gap-1 scrollbar-hide">
|
||||
<button
|
||||
onClick={() => setActiveTab('profile')}
|
||||
className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors whitespace-nowrap text-sm ${activeTab === 'profile'
|
||||
? 'bg-brand-gold text-white'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
onClick={() => setActiveTab("profile")}
|
||||
className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors whitespace-nowrap text-sm ${
|
||||
activeTab === "profile"
|
||||
? "bg-brand-gold text-white"
|
||||
: "text-gray-700 hover:bg-gray-100"
|
||||
}`}
|
||||
>
|
||||
<User size={18} />
|
||||
<span className="font-medium">Perfil</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('account')}
|
||||
className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors whitespace-nowrap text-sm ${activeTab === 'account'
|
||||
? 'bg-brand-gold text-white'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
onClick={() => setActiveTab("account")}
|
||||
className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors whitespace-nowrap text-sm ${
|
||||
activeTab === "account"
|
||||
? "bg-brand-gold text-white"
|
||||
: "text-gray-700 hover:bg-gray-100"
|
||||
}`}
|
||||
>
|
||||
<Lock size={18} />
|
||||
<span className="font-medium">Conta</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('notifications')}
|
||||
className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors whitespace-nowrap text-sm ${activeTab === 'notifications'
|
||||
? 'bg-brand-gold text-white'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
onClick={() => setActiveTab("notifications")}
|
||||
className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors whitespace-nowrap text-sm ${
|
||||
activeTab === "notifications"
|
||||
? "bg-brand-gold text-white"
|
||||
: "text-gray-700 hover:bg-gray-100"
|
||||
}`}
|
||||
>
|
||||
<Bell size={18} />
|
||||
<span className="font-medium">Notificações</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('appearance')}
|
||||
className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors whitespace-nowrap text-sm ${activeTab === 'appearance'
|
||||
? 'bg-brand-gold text-white'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
onClick={() => setActiveTab("appearance")}
|
||||
className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors whitespace-nowrap text-sm ${
|
||||
activeTab === "appearance"
|
||||
? "bg-brand-gold text-white"
|
||||
: "text-gray-700 hover:bg-gray-100"
|
||||
}`}
|
||||
>
|
||||
<Palette size={18} />
|
||||
|
|
@ -112,40 +132,44 @@ export const SettingsPage: React.FC = () => {
|
|||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
||||
<nav className="space-y-1">
|
||||
<button
|
||||
onClick={() => setActiveTab('profile')}
|
||||
className={`w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors ${activeTab === 'profile'
|
||||
? 'bg-brand-gold text-white'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
onClick={() => setActiveTab("profile")}
|
||||
className={`w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors ${
|
||||
activeTab === "profile"
|
||||
? "bg-brand-gold text-white"
|
||||
: "text-gray-700 hover:bg-gray-100"
|
||||
}`}
|
||||
>
|
||||
<User size={20} />
|
||||
<span className="font-medium">Perfil</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('account')}
|
||||
className={`w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors ${activeTab === 'account'
|
||||
? 'bg-brand-gold text-white'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
onClick={() => setActiveTab("account")}
|
||||
className={`w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors ${
|
||||
activeTab === "account"
|
||||
? "bg-brand-gold text-white"
|
||||
: "text-gray-700 hover:bg-gray-100"
|
||||
}`}
|
||||
>
|
||||
<Lock size={20} />
|
||||
<span className="font-medium">Conta</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('notifications')}
|
||||
className={`w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors ${activeTab === 'notifications'
|
||||
? 'bg-brand-gold text-white'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
onClick={() => setActiveTab("notifications")}
|
||||
className={`w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors ${
|
||||
activeTab === "notifications"
|
||||
? "bg-brand-gold text-white"
|
||||
: "text-gray-700 hover:bg-gray-100"
|
||||
}`}
|
||||
>
|
||||
<Bell size={20} />
|
||||
<span className="font-medium">Notificações</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('appearance')}
|
||||
className={`w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors ${activeTab === 'appearance'
|
||||
? 'bg-brand-gold text-white'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
onClick={() => setActiveTab("appearance")}
|
||||
className={`w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors ${
|
||||
activeTab === "appearance"
|
||||
? "bg-brand-gold text-white"
|
||||
: "text-gray-700 hover:bg-gray-100"
|
||||
}`}
|
||||
>
|
||||
<Palette size={20} />
|
||||
|
|
@ -159,9 +183,11 @@ export const SettingsPage: React.FC = () => {
|
|||
<div className="lg:col-span-3">
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 sm:p-6 md:p-8">
|
||||
{/* Profile Tab */}
|
||||
{activeTab === 'profile' && (
|
||||
{activeTab === "profile" && (
|
||||
<div>
|
||||
<h2 className="text-xl sm:text-2xl font-semibold mb-4 sm:mb-6">Informações do Perfil</h2>
|
||||
<h2 className="text-xl sm:text-2xl font-semibold mb-4 sm:mb-6">
|
||||
Informações do Perfil
|
||||
</h2>
|
||||
|
||||
<div className="mb-6 sm:mb-8">
|
||||
<div className="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6">
|
||||
|
|
@ -176,8 +202,12 @@ export const SettingsPage: React.FC = () => {
|
|||
</button>
|
||||
</div>
|
||||
<div className="text-center sm:text-left">
|
||||
<h3 className="font-semibold text-base sm:text-lg">{profileData.name}</h3>
|
||||
<p className="text-xs sm:text-sm text-gray-600">{profileData.email}</p>
|
||||
<h3 className="font-semibold text-base sm:text-lg">
|
||||
{profileData.name}
|
||||
</h3>
|
||||
<p className="text-xs sm:text-sm text-gray-600">
|
||||
{profileData.email}
|
||||
</p>
|
||||
<button className="text-xs sm:text-sm text-brand-gold hover:underline mt-1">
|
||||
Alterar foto
|
||||
</button>
|
||||
|
|
@ -191,11 +221,19 @@ export const SettingsPage: React.FC = () => {
|
|||
Nome Completo
|
||||
</label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
|
||||
<User
|
||||
className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
|
||||
size={20}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={profileData.name}
|
||||
onChange={(e) => setProfileData({ ...profileData, name: e.target.value })}
|
||||
onChange={(e) =>
|
||||
setProfileData({
|
||||
...profileData,
|
||||
name: e.target.value,
|
||||
})
|
||||
}
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -206,11 +244,19 @@ export const SettingsPage: React.FC = () => {
|
|||
Email
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
|
||||
<Mail
|
||||
className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
|
||||
size={20}
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
value={profileData.email}
|
||||
onChange={(e) => setProfileData({ ...profileData, email: e.target.value })}
|
||||
onChange={(e) =>
|
||||
setProfileData({
|
||||
...profileData,
|
||||
email: e.target.value,
|
||||
})
|
||||
}
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -221,11 +267,19 @@ export const SettingsPage: React.FC = () => {
|
|||
Telefone
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Phone className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
|
||||
<Phone
|
||||
className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
|
||||
size={20}
|
||||
/>
|
||||
<input
|
||||
type="tel"
|
||||
value={profileData.phone}
|
||||
onChange={(e) => setProfileData({ ...profileData, phone: e.target.value })}
|
||||
onChange={(e) =>
|
||||
setProfileData({
|
||||
...profileData,
|
||||
phone: e.target.value,
|
||||
})
|
||||
}
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -236,11 +290,19 @@ export const SettingsPage: React.FC = () => {
|
|||
Localização
|
||||
</label>
|
||||
<div className="relative">
|
||||
<MapPin className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
|
||||
<MapPin
|
||||
className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
|
||||
size={20}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={profileData.location}
|
||||
onChange={(e) => setProfileData({ ...profileData, location: e.target.value })}
|
||||
onChange={(e) =>
|
||||
setProfileData({
|
||||
...profileData,
|
||||
location: e.target.value,
|
||||
})
|
||||
}
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -252,14 +314,23 @@ export const SettingsPage: React.FC = () => {
|
|||
</label>
|
||||
<textarea
|
||||
value={profileData.bio}
|
||||
onChange={(e) => setProfileData({ ...profileData, bio: e.target.value })}
|
||||
onChange={(e) =>
|
||||
setProfileData({
|
||||
...profileData,
|
||||
bio: e.target.value,
|
||||
})
|
||||
}
|
||||
rows={4}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="pt-4">
|
||||
<Button size="lg" variant="secondary" onClick={handleSaveProfile}>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="secondary"
|
||||
onClick={handleSaveProfile}
|
||||
>
|
||||
<Save size={20} className="mr-2" />
|
||||
Salvar Alterações
|
||||
</Button>
|
||||
|
|
@ -269,9 +340,11 @@ export const SettingsPage: React.FC = () => {
|
|||
)}
|
||||
|
||||
{/* Account Tab */}
|
||||
{activeTab === 'account' && (
|
||||
{activeTab === "account" && (
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold mb-6">Segurança da Conta</h2>
|
||||
<h2 className="text-2xl font-semibold mb-6">
|
||||
Segurança da Conta
|
||||
</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
|
|
@ -315,7 +388,9 @@ export const SettingsPage: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div className="pt-8 border-t border-gray-200">
|
||||
<h3 className="text-lg font-semibold mb-4">Autenticação em Dois Fatores</h3>
|
||||
<h3 className="text-lg font-semibold mb-4">
|
||||
Autenticação em Dois Fatores
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-4">
|
||||
Adicione uma camada extra de segurança à sua conta
|
||||
</p>
|
||||
|
|
@ -328,24 +403,30 @@ export const SettingsPage: React.FC = () => {
|
|||
)}
|
||||
|
||||
{/* Notifications Tab */}
|
||||
{activeTab === 'notifications' && (
|
||||
{activeTab === "notifications" && (
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold mb-6">Preferências de Notificações</h2>
|
||||
<h2 className="text-2xl font-semibold mb-6">
|
||||
Preferências de Notificações
|
||||
</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between py-4 border-b border-gray-200">
|
||||
<div>
|
||||
<h3 className="font-medium">Notificações por Email</h3>
|
||||
<p className="text-sm text-gray-600">Receba atualizações por email</p>
|
||||
<p className="text-sm text-gray-600">
|
||||
Receba atualizações por email
|
||||
</p>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={notificationSettings.emailNotifications}
|
||||
onChange={(e) => setNotificationSettings({
|
||||
onChange={(e) =>
|
||||
setNotificationSettings({
|
||||
...notificationSettings,
|
||||
emailNotifications: e.target.checked
|
||||
})}
|
||||
emailNotifications: e.target.checked,
|
||||
})
|
||||
}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-gold/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-gold"></div>
|
||||
|
|
@ -355,16 +436,20 @@ export const SettingsPage: React.FC = () => {
|
|||
<div className="flex items-center justify-between py-4 border-b border-gray-200">
|
||||
<div>
|
||||
<h3 className="font-medium">Notificações Push</h3>
|
||||
<p className="text-sm text-gray-600">Receba notificações no navegador</p>
|
||||
<p className="text-sm text-gray-600">
|
||||
Receba notificações no navegador
|
||||
</p>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={notificationSettings.pushNotifications}
|
||||
onChange={(e) => setNotificationSettings({
|
||||
onChange={(e) =>
|
||||
setNotificationSettings({
|
||||
...notificationSettings,
|
||||
pushNotifications: e.target.checked
|
||||
})}
|
||||
pushNotifications: e.target.checked,
|
||||
})
|
||||
}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-gold/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-gold"></div>
|
||||
|
|
@ -374,16 +459,20 @@ export const SettingsPage: React.FC = () => {
|
|||
<div className="flex items-center justify-between py-4 border-b border-gray-200">
|
||||
<div>
|
||||
<h3 className="font-medium">SMS</h3>
|
||||
<p className="text-sm text-gray-600">Receba mensagens de texto</p>
|
||||
<p className="text-sm text-gray-600">
|
||||
Receba mensagens de texto
|
||||
</p>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={notificationSettings.smsNotifications}
|
||||
onChange={(e) => setNotificationSettings({
|
||||
onChange={(e) =>
|
||||
setNotificationSettings({
|
||||
...notificationSettings,
|
||||
smsNotifications: e.target.checked
|
||||
})}
|
||||
smsNotifications: e.target.checked,
|
||||
})
|
||||
}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-gold/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-gold"></div>
|
||||
|
|
@ -393,16 +482,20 @@ export const SettingsPage: React.FC = () => {
|
|||
<div className="flex items-center justify-between py-4 border-b border-gray-200">
|
||||
<div>
|
||||
<h3 className="font-medium">Lembretes de Eventos</h3>
|
||||
<p className="text-sm text-gray-600">Receba lembretes antes dos eventos</p>
|
||||
<p className="text-sm text-gray-600">
|
||||
Receba lembretes antes dos eventos
|
||||
</p>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={notificationSettings.eventReminders}
|
||||
onChange={(e) => setNotificationSettings({
|
||||
onChange={(e) =>
|
||||
setNotificationSettings({
|
||||
...notificationSettings,
|
||||
eventReminders: e.target.checked
|
||||
})}
|
||||
eventReminders: e.target.checked,
|
||||
})
|
||||
}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-gold/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-gold"></div>
|
||||
|
|
@ -412,16 +505,20 @@ export const SettingsPage: React.FC = () => {
|
|||
<div className="flex items-center justify-between py-4 border-b border-gray-200">
|
||||
<div>
|
||||
<h3 className="font-medium">Alertas de Pagamento</h3>
|
||||
<p className="text-sm text-gray-600">Notificações sobre pagamentos</p>
|
||||
<p className="text-sm text-gray-600">
|
||||
Notificações sobre pagamentos
|
||||
</p>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={notificationSettings.paymentAlerts}
|
||||
onChange={(e) => setNotificationSettings({
|
||||
onChange={(e) =>
|
||||
setNotificationSettings({
|
||||
...notificationSettings,
|
||||
paymentAlerts: e.target.checked
|
||||
})}
|
||||
paymentAlerts: e.target.checked,
|
||||
})
|
||||
}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-gold/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-gold"></div>
|
||||
|
|
@ -429,7 +526,11 @@ export const SettingsPage: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div className="pt-4">
|
||||
<Button size="lg" variant="secondary" onClick={handleSaveNotifications}>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="secondary"
|
||||
onClick={handleSaveNotifications}
|
||||
>
|
||||
<Save size={20} className="mr-2" />
|
||||
Salvar Preferências
|
||||
</Button>
|
||||
|
|
@ -439,9 +540,11 @@ export const SettingsPage: React.FC = () => {
|
|||
)}
|
||||
|
||||
{/* Appearance Tab */}
|
||||
{activeTab === 'appearance' && (
|
||||
{activeTab === "appearance" && (
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold mb-6">Aparência e Idioma</h2>
|
||||
<h2 className="text-2xl font-semibold mb-6">
|
||||
Aparência e Idioma
|
||||
</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
|
|
@ -450,10 +553,12 @@ export const SettingsPage: React.FC = () => {
|
|||
</label>
|
||||
<select
|
||||
value={appearanceSettings.theme}
|
||||
onChange={(e) => setAppearanceSettings({
|
||||
onChange={(e) =>
|
||||
setAppearanceSettings({
|
||||
...appearanceSettings,
|
||||
theme: e.target.value
|
||||
})}
|
||||
theme: e.target.value,
|
||||
})
|
||||
}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
|
||||
>
|
||||
<option value="light">Claro</option>
|
||||
|
|
@ -468,10 +573,12 @@ export const SettingsPage: React.FC = () => {
|
|||
</label>
|
||||
<select
|
||||
value={appearanceSettings.language}
|
||||
onChange={(e) => setAppearanceSettings({
|
||||
onChange={(e) =>
|
||||
setAppearanceSettings({
|
||||
...appearanceSettings,
|
||||
language: e.target.value
|
||||
})}
|
||||
language: e.target.value,
|
||||
})
|
||||
}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
|
||||
>
|
||||
<option value="pt-BR">Português (Brasil)</option>
|
||||
|
|
@ -486,10 +593,12 @@ export const SettingsPage: React.FC = () => {
|
|||
</label>
|
||||
<select
|
||||
value={appearanceSettings.dateFormat}
|
||||
onChange={(e) => setAppearanceSettings({
|
||||
onChange={(e) =>
|
||||
setAppearanceSettings({
|
||||
...appearanceSettings,
|
||||
dateFormat: e.target.value
|
||||
})}
|
||||
dateFormat: e.target.value,
|
||||
})
|
||||
}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
|
||||
>
|
||||
<option value="DD/MM/YYYY">DD/MM/YYYY</option>
|
||||
|
|
@ -504,10 +613,12 @@ export const SettingsPage: React.FC = () => {
|
|||
</label>
|
||||
<select
|
||||
value={appearanceSettings.currency}
|
||||
onChange={(e) => setAppearanceSettings({
|
||||
onChange={(e) =>
|
||||
setAppearanceSettings({
|
||||
...appearanceSettings,
|
||||
currency: e.target.value
|
||||
})}
|
||||
currency: e.target.value,
|
||||
})
|
||||
}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
|
||||
>
|
||||
<option value="BRL">Real (R$)</option>
|
||||
|
|
@ -517,7 +628,11 @@ export const SettingsPage: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<div className="pt-4">
|
||||
<Button size="lg" variant="secondary" onClick={handleSaveAppearance}>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="secondary"
|
||||
onClick={handleSaveAppearance}
|
||||
>
|
||||
<Save size={20} className="mr-2" />
|
||||
Salvar Configurações
|
||||
</Button>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue