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

feat: atuializacao de layout

Browse source
This commit is contained in:
yagostn 2025-12-04 10:36:33 -03:00
parent a3655d2068
commit 4e9b743928
5 changed files with 233 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

171
frontend/components/Navbar.tsx
View file

@ -30,6 +30,19 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
return () => window.removeEventListener("scroll", handleScroll);
}, []);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (isAccountDropdownOpen) {
const target = event.target as HTMLElement;
if (!target.closest('.relative')) {
setIsAccountDropdownOpen(false);
}
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, [isAccountDropdownOpen]);
const getLinks = () => {
if (!user) return [];
@ -213,16 +226,14 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
onClick={() =>
setIsAccountDropdownOpen(!isAccountDropdownOpen)
}
className="flex items-center gap-2 p-2 rounded-full hover:bg-gray-100 transition-colors"
className="flex items-center gap-2 px-4 py-2 rounded-full hover:bg-gray-100 transition-colors shadow-md"
>
<div className="w-10 h-10 rounded-full border-2 border-brand-gold flex items-center justify-center text-brand-gold hover:bg-brand-gold hover:text-white transition-colors">
<User size={24} />
</div>
<div className="text-left hidden lg:block">
<p className="text-xs text-gray-500">Olá, bem-vindo(a)</p>
<p className="text-sm font-medium text-brand-black">
Entrar / Cadastrar
</p>
<p className="text-xs font-semibold text-gray-700">Entrar/Cadastrar</p>
</div>
</button>
@ -234,7 +245,8 @@ 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/90 text-sm mb-1">Olá, bem-vindo(a)</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 */}
@ -267,14 +279,159 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
)}
</div>
{/* Mobile Button */}
<div className="md:hidden flex items-center">
{/* Mobile Buttons */}
<div className="md:hidden flex items-center gap-2">
{user ? (
<>
<div className="relative">
<button
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
src={user.avatar}
alt="Avatar"
className="w-full h-full object-cover"
/>
</button>
{/* Profile Preview Dropdown Mobile */}
{isAccountDropdownOpen && (
<div className="absolute right-0 top-full mt-3 w-80 bg-white rounded-2xl shadow-2xl border border-gray-100 overflow-hidden z-50 fade-in">
{/* Header com foto e info */}
<div className="bg-gradient-to-r from-[#492E61] to-[#5a3a7a] p-6 text-center relative">
<div className="w-20 h-20 mx-auto mb-3 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center border-4 border-white/30 overflow-hidden">
<img
src={user.avatar}
alt={user.name}
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>
<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>
</div>
{/* 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) && (
<button
onClick={() => {
setIsEditProfileModalOpen(true);
setIsAccountDropdownOpen(false);
}}
className="w-full flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white transition-colors text-left group"
>
<div className="w-10 h-10 rounded-lg bg-[#492E61]/10 flex items-center justify-center group-hover:bg-[#492E61]/20 transition-colors">
<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>
</div>
</button>
)}
{/* Configurações - Apenas para CEO e Business Owner */}
{(user.role === UserRole.BUSINESS_OWNER || user.role === UserRole.SUPERADMIN) && (
<button
onClick={() => {
onNavigate("settings");
setIsAccountDropdownOpen(false);
}}
className="w-full flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white transition-colors text-left group"
>
<div className="w-10 h-10 rounded-lg bg-gray-200 flex items-center justify-center group-hover:bg-gray-300 transition-colors">
<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>
</div>
</button>
)}
{/* Sair */}
<button
onClick={() => {
logout();
setIsAccountDropdownOpen(false);
}}
className="w-full flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-red-50 transition-colors text-left group border-t border-gray-200 mt-2 pt-4"
>
<div className="w-10 h-10 rounded-lg bg-red-100 flex items-center justify-center group-hover:bg-red-200 transition-colors">
<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>
</div>
</button>
</div>
</div>
)}
</div>
{/* Menu Hamburguer - Apenas para usuários logados */}
<button
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
className="text-brand-black hover:text-brand-gold p-2"
>
{isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
</button>
</>
) : (
<div className="relative">
<button
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} />
</button>
{/* Dropdown Popup Mobile */}
{isAccountDropdownOpen && (
<div className="absolute right-0 top-full mt-3 w-72 bg-white rounded-2xl shadow-2xl border border-gray-100 overflow-hidden z-50 fade-in">
{/* Header com ícone */}
<div className="bg-gradient-to-r from-[#492E61] to-[#5a3a7a] p-6 text-center">
<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>
</div>
{/* Botões */}
<div className="p-5 space-y-3 bg-gray-50">
<Button
onClick={() => {
onNavigate("login");
setIsAccountDropdownOpen(false);
}}
variant="secondary"
className="w-full rounded-xl shadow-sm hover:shadow-md transition-shadow"
>
ENTRAR
</Button>
<Button
onClick={() => {
onNavigate("register");
setIsAccountDropdownOpen(false);
}}
variant="primary"
className="w-full rounded-xl shadow-sm hover:shadow-md transition-shadow"
>
Cadastre-se agora
</Button>
</div>
</div>
)}
</div>
)}
</div>
</div>
</div>

10
frontend/pages/Calendar.tsx
View file

@ -162,7 +162,7 @@ export const CalendarPage: React.FC = () => {
{/* Header */}
<div className="mb-4 sm:mb-6 md:mb-8 flex flex-col gap-3 sm:gap-4">
<div>
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#492E61] mb-1 sm:mb-2">
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#B8D033] mb-1 sm:mb-2">
Minha Agenda
</h1>
<p className="text-xs sm:text-sm md:text-base text-gray-600">
@ -170,14 +170,6 @@ export const CalendarPage: React.FC = () => {
</p>
</div>
<div className="flex gap-2">
<button className="flex items-center gap-2 px-3 sm:px-4 py-2 sm:py-2.5 bg-[#492E61] text-white rounded-xl hover:bg-[#3a2450] transition-colors shadow-lg text-sm sm:text-base">
<Plus size={18} className="sm:w-5 sm:h-5" />
<span className="hidden xs:inline">Novo Evento</span>
<span className="xs:hidden">Novo</span>
</button>
<button className="p-2 sm:p-2.5 border border-gray-300 rounded-xl hover:bg-gray-50 transition-colors">
<Filter size={18} className="sm:w-5 sm:h-5 text-gray-600" />
</button>
</div>
</div>

8
frontend/pages/Home.tsx
View file

@ -230,22 +230,22 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
<input
type="text"
placeholder="Nome"
className="w-full px-3 py-2 text-sm bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
className="w-full px-5 py-2 text-sm bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
/>
<input
type="email"
placeholder="E-mail"
className="w-full px-3 py-2 text-sm bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
className="w-full px-5 py-2 text-sm bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
/>
<input
type="tel"
placeholder="Telefone"
className="w-full px-3 py-2 text-sm bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
className="w-full px-5 py-2 text-sm bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 rounded-t-lg"
/>
<textarea
placeholder="Mensagem"
rows={3}
className="w-full px-3 py-2 text-sm bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 resize-none rounded-t-lg"
className="w-full px-5 py-2 text-sm bg-white/5 border-b-2 border-white/20 text-white placeholder-white/50 focus:border-white focus:bg-white/10 focus:outline-none transition-all duration-300 resize-none rounded-t-lg"
></textarea>
<button
className="w-full px-6 py-2.5 text-sm text-white font-bold rounded-lg hover:opacity-90 transition-all duration-300 transform hover:scale-105 hover:shadow-xl active:scale-95 relative overflow-hidden group flex items-center justify-center gap-2"

40
frontend/pages/Login.tsx
View file

@ -32,7 +32,7 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
};
const getRoleLabel = (role: UserRole) => {
switch(role) {
switch (role) {
case UserRole.SUPERADMIN: return "Superadmin";
case UserRole.BUSINESS_OWNER: return "Empresa";
case UserRole.PHOTOGRAPHER: return "Fotógrafo";
@ -61,8 +61,17 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
{/* Right Side - Form */}
<div className="w-full lg:w-1/2 flex items-center justify-center p-4 sm:p-6 md:p-8 lg:p-16">
<div className="max-w-md w-full space-y-6 sm:space-y-8 fade-in">
{/* Logo Mobile */}
<div className="lg:hidden flex justify-center mb-6">
<img
src="/logo.png"
alt="Photum Formaturas"
className="h-16 w-auto object-contain"
/>
</div>
<div className="text-center lg:text-left">
<span className="font-bold tracking-widest uppercase text-xs sm:text-sm" style={{color: '#B9CF33'}}>Bem-vindo de volta</span>
<span className="font-bold tracking-widest uppercase text-xs sm:text-sm" style={{ color: '#B9CF33' }}>Bem-vindo de volta</span>
<h2 className="mt-2 text-2xl sm:text-3xl font-serif font-bold text-gray-900">Acesse sua conta</h2>
<p className="mt-2 text-xs sm:text-sm text-gray-600">
Não tem uma conta?{' '}
@ -70,7 +79,7 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
type="button"
onClick={() => onNavigate?.('register')}
className="font-medium hover:opacity-80 transition-opacity"
style={{color: '#B9CF33'}}
style={{ color: '#B9CF33' }}
>
Cadastre-se
</button>
@ -90,7 +99,7 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-all"
style={{focusRing: '2px solid #B9CF33'}}
style={{ focusRing: '2px solid #B9CF33' }}
onFocus={(e) => e.target.style.borderColor = '#B9CF33'}
onBlur={(e) => e.target.style.borderColor = '#d1d5db'}
/>
@ -121,22 +130,22 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
type="submit"
disabled={isLoading}
className="w-full px-6 sm:px-10 py-3 sm:py-4 text-white font-bold text-base sm:text-lg rounded-lg transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
style={{backgroundColor: '#4E345F'}}
style={{ backgroundColor: '#4E345F' }}
>
{isLoading ? 'Entrando...' : 'Entrar no Sistema'}
</button>
</form>
{/* Demo Users Quick Select */}
{/* Demo Users Quick Select - Melhorado para Mobile */}
<div className="mt-6 sm:mt-10 pt-6 sm:pt-10 border-t border-gray-200">
<p className="text-[10px] sm:text-xs uppercase tracking-widest mb-3 sm:mb-4 text-center text-gray-400">Usuários de Demonstração (Clique para preencher)</p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3">
<div className="space-y-2">
{availableUsers.map(user => (
<button
key={user.id}
onClick={() => fillCredentials(user.email)}
className="flex flex-col items-start p-3 sm:p-4 border-2 rounded-lg hover:bg-gray-50 transition-all duration-300 text-left group transform hover:scale-[1.02]"
style={{borderColor: '#e5e7eb'}}
className="w-full flex items-center justify-between p-3 sm:p-4 border-2 rounded-xl hover:bg-gray-50 transition-all duration-300 text-left group transform hover:scale-[1.01] active:scale-[0.99]"
style={{ borderColor: '#e5e7eb' }}
onMouseEnter={(e) => {
e.currentTarget.style.borderColor = '#B9CF33';
e.currentTarget.style.boxShadow = '0 4px 12px rgba(185, 207, 51, 0.15)';
@ -146,9 +155,16 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
e.currentTarget.style.boxShadow = 'none';
}}
>
<span className="text-xs sm:text-sm font-bold text-gray-900">{user.name}</span>
<span className="text-[10px] sm:text-xs uppercase tracking-wide mt-0.5 sm:mt-1 font-semibold" style={{color: '#B9CF33'}}>{getRoleLabel(user.role)}</span>
<span className="text-[10px] sm:text-xs text-gray-500 mt-0.5 sm:mt-1 truncate w-full">{user.email}</span>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<span className="text-sm sm:text-base font-bold text-gray-900 truncate">{user.name}</span>
<span className="text-[10px] sm:text-xs uppercase tracking-wide font-semibold px-2 py-0.5 rounded-full whitespace-nowrap" style={{ backgroundColor: '#B9CF33', color: '#fff' }}>{getRoleLabel(user.role)}</span>
</div>
<span className="text-xs sm:text-sm text-gray-500 truncate block">{user.email}</span>
</div>
<svg className="w-5 h-5 text-gray-400 group-hover:text-[#B9CF33] transition-colors flex-shrink-0 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</button>
))}
</div>

21
frontend/pages/Register.tsx
View file

@ -149,15 +149,24 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
{/* Right Side - Form */}
<div className="w-full lg:w-1/2 flex items-center justify-center p-4 sm:p-6 md:p-8 lg:p-16">
<div className="max-w-md w-full space-y-6 sm:space-y-8 fade-in">
{/* Logo Mobile */}
<div className="lg:hidden flex justify-center mb-6">
<img
src="/logo.png"
alt="Photum Formaturas"
className="h-16 w-auto object-contain"
/>
</div>
<div className="text-center lg:text-left">
<span className="font-bold tracking-widest uppercase text-xs sm:text-sm" style={{color: '#B9CF33'}}>Comece agora</span>
<span className="font-bold tracking-widest uppercase text-xs sm:text-sm" style={{ color: '#B9CF33' }}>Comece agora</span>
<h2 className="mt-2 text-2xl sm:text-3xl font-serif font-bold text-gray-900">Crie sua conta</h2>
<p className="mt-2 text-xs sm:text-sm text-gray-600">
Já tem uma conta?{' '}
<button
onClick={() => onNavigate('login')}
className="font-medium hover:opacity-80 transition-opacity"
style={{color: '#B9CF33'}}
style={{ color: '#B9CF33' }}
>
Faça login
</button>
@ -221,7 +230,7 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
checked={agreedToTerms}
onChange={(e) => setAgreedToTerms(e.target.checked)}
className="mt-0.5 sm:mt-1 h-4 w-4 flex-shrink-0 border-gray-300 rounded focus:ring-2"
style={{accentColor: '#B9CF33'}}
style={{ accentColor: '#B9CF33' }}
/>
<label className="ml-2 text-xs sm:text-sm text-gray-600">
Concordo com os{' '}
@ -229,7 +238,7 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
type="button"
onClick={() => onNavigate('terms')}
className="hover:opacity-80 transition-opacity underline"
style={{color: '#B9CF33'}}
style={{ color: '#B9CF33' }}
>
termos de uso
</button>{' '}
@ -238,7 +247,7 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
type="button"
onClick={() => onNavigate('privacy')}
className="hover:opacity-80 transition-opacity underline"
style={{color: '#B9CF33'}}
style={{ color: '#B9CF33' }}
>
política de privacidade
</button>
@ -255,7 +264,7 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
checked={formData.wantsToAddInstitution}
onChange={(e) => setFormData(prev => ({ ...prev, wantsToAddInstitution: e.target.checked }))}
className="mt-0.5 sm:mt-1 h-4 w-4 flex-shrink-0 border-gray-300 rounded focus:ring-2"
style={{accentColor: '#B9CF33'}}
style={{ accentColor: '#B9CF33' }}
/>
<label className="ml-2 text-xs sm:text-sm text-gray-700">
<span className="font-medium text-xs sm:text-sm">Cadastrar universidade agora (Opcional)</span>