{user ? (
-
-
-
-
-
- {user.name}
-
-
- {getRoleLabel()}
-
-
+
+
+
+ {user.name}
+
+
+ {getRoleLabel()}
+
+
+
+ {/* Avatar com dropdown */}
+
+
+
+ {/* Profile Preview Dropdown */}
+ {isAccountDropdownOpen && (
+
+ {/* Header com foto e info */}
+
+
+
+
+
{user.name}
+
{user.email}
+
+ {getRoleLabel()}
+
+
+
+ {/* Menu Items */}
+
+ {/* Editar Perfil - Apenas para Fotógrafos e Clientes */}
+ {(user.role === UserRole.PHOTOGRAPHER || user.role === UserRole.EVENT_OWNER) && (
+
+ )}
+
+ {/* Configurações - Apenas para CEO e Business Owner */}
+ {(user.role === UserRole.BUSINESS_OWNER || user.role === UserRole.SUPERADMIN) && (
+
+ )}
+
+ {/* Sair */}
+
+
+
+ )}
-
) : (
-
-
+
+ {/* Mobile Button */}
+
+
+
- )}
-
+
+ {/* Mobile Menu */}
+ {isMobileMenuOpen && (
+
+
+ {user &&
+ getLinks().map((link) => (
+
+ ))}
+
+ {user ? (
+
+ {/* Info do usuário */}
+
+
+
+
+
+ {user.name}
+
+
+ {getRoleLabel()}
+
+
+
+
+
+ {/* Botão Editar Perfil - Apenas para Fotógrafos e Clientes */}
+ {(user.role === UserRole.PHOTOGRAPHER || user.role === UserRole.EVENT_OWNER) && (
+
+ )}
+
+ {/* Botão Sair */}
+
+
+ ) : (
+
+
+
+
+ )}
+
+
+
+ )}
+
+
+ {/* Modal de Edição de Perfil - Apenas para Fotógrafos e Clientes */}
+ {
+ isEditProfileModalOpen && (user?.role === UserRole.PHOTOGRAPHER || user?.role === UserRole.EVENT_OWNER) && (
+
setIsEditProfileModalOpen(false)}
+ >
+
e.stopPropagation()}
+ >
+ {/* Header */}
+
+
+
+
+
+
+
+
+
Editar Perfil
+
Atualize suas informações pessoais
+
+
+ {/* Form */}
+
+
+
+ )
+ }
+
);
};
diff --git a/frontend/index.html b/frontend/index.html
index c26ce3f..1874f82 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -229,6 +229,16 @@
padding: 15px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
+
+ /* Hide scrollbar for mobile tabs */
+ .scrollbar-hide {
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+ }
+
+ .scrollbar-hide::-webkit-scrollbar {
+ display: none;
+ }
diff --git a/frontend/pages/Calendar.tsx b/frontend/pages/Calendar.tsx
index 8b30743..a0ccae1 100644
--- a/frontend/pages/Calendar.tsx
+++ b/frontend/pages/Calendar.tsx
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
-import { Calendar, Clock, MapPin, User, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Calendar as CalendarIcon, Clock, MapPin, User, ChevronLeft, ChevronRight, Plus, Filter, Search } from 'lucide-react';
interface Event {
id: string;
@@ -78,61 +78,32 @@ const MOCK_EVENTS: Event[] = [
export const CalendarPage: React.FC = () => {
const [selectedMonth, setSelectedMonth] = useState(new Date());
const [selectedEvent, setSelectedEvent] = useState
(null);
- const [selectedDate, setSelectedDate] = useState(null);
+ const [viewMode, setViewMode] = useState<'month' | 'week'>('month');
const getStatusColor = (status: Event['status']) => {
switch (status) {
- case 'confirmed':
- return 'bg-green-100 text-green-800';
- case 'pending':
- return 'bg-yellow-100 text-yellow-800';
- case 'completed':
- return 'bg-gray-100 text-gray-800';
+ case 'confirmed': return 'bg-green-100 text-green-700 border-green-200';
+ case 'pending': return 'bg-yellow-100 text-yellow-700 border-yellow-200';
+ case 'completed': return 'bg-gray-100 text-gray-700 border-gray-200';
}
};
const getStatusLabel = (status: Event['status']) => {
switch (status) {
- case 'confirmed':
- return 'Confirmado';
- case 'pending':
- return 'Pendente';
- case 'completed':
- return 'Concluído';
+ case 'confirmed': return 'Confirmado';
+ case 'pending': return 'Pendente';
+ case 'completed': return 'Concluído';
}
};
const getTypeColor = (type: Event['type']) => {
switch (type) {
- case 'formatura':
- return 'bg-blue-100 text-blue-800';
- case 'casamento':
- return 'bg-pink-100 text-pink-800';
- case 'evento':
- return 'bg-purple-100 text-purple-800';
+ case 'formatura': return 'bg-[#492E61] text-white';
+ case 'casamento': return 'bg-pink-500 text-white';
+ case 'evento': return 'bg-blue-500 text-white';
}
};
- const getTypeLabel = (type: Event['type']) => {
- switch (type) {
- case 'formatura':
- return 'Formatura';
- case 'casamento':
- return 'Casamento';
- case 'evento':
- return 'Evento';
- }
- };
-
- const formatDate = (dateString: string) => {
- const date = new Date(dateString + 'T00:00:00');
- return date.toLocaleDateString('pt-BR', {
- day: '2-digit',
- month: 'long',
- year: 'numeric'
- });
- };
-
const nextMonth = () => {
setSelectedMonth(new Date(selectedMonth.getFullYear(), selectedMonth.getMonth() + 1));
};
@@ -141,110 +112,129 @@ export const CalendarPage: React.FC = () => {
setSelectedMonth(new Date(selectedMonth.getFullYear(), selectedMonth.getMonth() - 1));
};
- const currentMonthName = selectedMonth.toLocaleDateString('pt-BR', {
- month: 'long',
- year: 'numeric'
- });
-
- // Generate calendar days
const generateCalendarDays = () => {
const year = selectedMonth.getFullYear();
const month = selectedMonth.getMonth();
-
const firstDay = new Date(year, month, 1);
const lastDay = new Date(year, month + 1, 0);
-
- const firstDayOfWeek = firstDay.getDay();
const daysInMonth = lastDay.getDate();
-
+ const startingDayOfWeek = firstDay.getDay();
+
const days: (Date | null)[] = [];
-
- // Add empty cells for days before month starts
- for (let i = 0; i < firstDayOfWeek; i++) {
+
+ // Add empty cells for days before the first day of the month
+ for (let i = 0; i < startingDayOfWeek; i++) {
days.push(null);
}
-
+
// Add all days of the month
for (let day = 1; day <= daysInMonth; day++) {
days.push(new Date(year, month, day));
}
-
+
return days;
};
const getEventsForDate = (date: Date) => {
return MOCK_EVENTS.filter(event => {
const eventDate = new Date(event.date + 'T00:00:00');
- return eventDate.getDate() === date.getDate() &&
- eventDate.getMonth() === date.getMonth() &&
- eventDate.getFullYear() === date.getFullYear();
+ return eventDate.toDateString() === date.toDateString();
});
};
const isToday = (date: Date) => {
const today = new Date();
- return date.getDate() === today.getDate() &&
- date.getMonth() === today.getMonth() &&
- date.getFullYear() === today.getFullYear();
+ return date.toDateString() === today.toDateString();
};
+ const currentMonthName = selectedMonth.toLocaleDateString('pt-BR', { month: 'long', year: 'numeric' });
const calendarDays = generateCalendarDays();
- // Filter events for selected month
const monthEvents = MOCK_EVENTS.filter(event => {
const eventDate = new Date(event.date + 'T00:00:00');
return eventDate.getMonth() === selectedMonth.getMonth() &&
eventDate.getFullYear() === selectedMonth.getFullYear();
});
- // Sort events by date
- const sortedEvents = [...MOCK_EVENTS].sort((a, b) =>
- new Date(a.date).getTime() - new Date(b.date).getTime()
- );
-
return (
-
+
{/* Header */}
-
-
- Minha Agenda
-
-
- Gerencie seus eventos e compromissos fotográficos
-
+
+
+
+ Minha Agenda
+
+
+ Gerencie seus eventos e compromissos fotográficos
+
+
+
+
+
+
- {/* Full Calendar Grid */}
-
-
-
-
-
- {currentMonthName}
-
-
+ {/* Calendar Section */}
+
+ {/* Calendar Card */}
+
+ {/* Calendar Header */}
+
+
+
+
+ {currentMonthName}
+
+
+
+
+ {/* Stats */}
+
+
+
Total
+
{monthEvents.length}
+
+
+
Confirmados
+
+ {monthEvents.filter(e => e.status === 'confirmed').length}
+
+
+
+
Pendentes
+
+ {monthEvents.filter(e => e.status === 'pending').length}
+
+
+
{/* Calendar Grid */}
-
+
{/* Week Days Header */}
-
+
{['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'].map((day) => (
{day}
@@ -252,332 +242,147 @@ export const CalendarPage: React.FC = () => {
{/* Calendar Days */}
-
- {calendarDays.map((date, index) => {
- if (!date) {
- return (
-
- );
+
+ {calendarDays.map((day, index) => {
+ if (!day) {
+ return
;
}
- const dayEvents = getEventsForDate(date);
- const hasEvents = dayEvents.length > 0;
- const today = isToday(date);
+ const dayEvents = getEventsForDate(day);
+ const today = isToday(day);
return (
-
+
-
-
-
- Eventos este mês:
- {monthEvents.length}
-
-
- Total:
- {MOCK_EVENTS.length}
-
+ {/* Legend */}
+
- {/* Legend and Info Sidebar */}
-
-
-
Legenda
-
-
-
-
-
-
+ {/* Events List Sidebar */}
+
+ {/* Search */}
+
- {selectedDate && (
-
-
- {selectedDate.toLocaleDateString('pt-BR', {
- day: '2-digit',
- month: 'long',
- year: 'numeric'
- })}
-
- {getEventsForDate(selectedDate).length > 0 ? (
-
- {getEventsForDate(selectedDate).map(event => (
-
setSelectedEvent(event)}
- >
-
- {event.title}
-
-
-
- {event.time}
-
-
- ))}
+ {/* Upcoming Events */}
+
+
+
+ Próximos Eventos
+
+
+ {MOCK_EVENTS.slice(0, 5).map((event) => (
+
+
+
{event.title}
+
+ {getStatusLabel(event.status)}
+
- ) : (
-
Nenhum evento neste dia
- )}
-
- )}
-
-
-
- {/* Events List */}
-
-
-
-
Próximos Eventos
-
-
-
- {sortedEvents.length === 0 ? (
-
-
-
Nenhum evento agendado
-
- ) : (
- sortedEvents.map((event) => (
-
setSelectedEvent(event)}
- >
-
-
-
-
- {event.title}
-
-
- {getTypeLabel(event.type)}
-
-
-
-
-
- {formatDate(event.date)}
-
-
-
- {event.time}
-
-
-
- {event.location}
-
-
-
- {event.client}
-
-
-
-
- {getStatusLabel(event.status)}
-
+
+
+
+ {new Date(event.date).toLocaleDateString('pt-BR')} às {event.time}
+
+
+
+ {event.location}
+
+
+
+ {event.client}
- ))
- )}
+
+ ))}
-
- {/* Event Detail Modal - Improved & Centered */}
- {selectedEvent && (
-
setSelectedEvent(null)}
- >
-
e.stopPropagation()}
- >
- {/* Header with gradient */}
-
-
-
-
-
- {selectedEvent.title}
-
-
-
- {getTypeLabel(selectedEvent.type)}
-
-
- {getStatusLabel(selectedEvent.status)}
-
-
-
-
-
- {/* Content */}
-
- {/* Date */}
-
-
-
-
-
-
Data
-
{formatDate(selectedEvent.date)}
-
-
-
- {/* Time */}
-
-
-
-
-
-
Horário
-
{selectedEvent.time}
-
-
-
- {/* Location */}
-
-
-
-
-
-
Local
-
{selectedEvent.location}
-
-
-
- {/* Client */}
-
-
-
-
-
-
Cliente
-
{selectedEvent.client}
-
-
-
-
- {/* Actions */}
-
-
-
-
-
-
- )}
-
-
);
};
diff --git a/frontend/pages/Dashboard.tsx b/frontend/pages/Dashboard.tsx
index 9270c87..6a48322 100644
--- a/frontend/pages/Dashboard.tsx
+++ b/frontend/pages/Dashboard.tsx
@@ -236,33 +236,31 @@ export const Dashboard: React.FC
= ({
{(user.role === UserRole.BUSINESS_OWNER ||
user.role === UserRole.SUPERADMIN) && (
-
-
+
{/* Grid */}
-
+
{filteredEvents.map((event) => (
{renderAdminActions(event)}
@@ -334,31 +332,33 @@ export const Dashboard: React.FC = ({
-
-
-
+
+
+
{/* Actions Toolbar */}
-
+
{(user.role === UserRole.BUSINESS_OWNER ||
user.role === UserRole.SUPERADMIN) && (
- <>
-
-
-
- )}
+ <>
+
+
+
+ )}
{user.role === UserRole.EVENT_OWNER &&
selectedEvent.status !== EventStatus.ARCHIVED && (
-
+
Status Atual
@@ -518,43 +517,43 @@ export const Dashboard: React.FC = ({
{(selectedEvent.photographerIds.length > 0 ||
user.role === UserRole.BUSINESS_OWNER) && (
-
-
-
- Equipe Designada
-
- {(user.role === UserRole.BUSINESS_OWNER ||
- user.role === UserRole.SUPERADMIN) && (
-
+
+
+
+ Equipe Designada
+
+ {(user.role === UserRole.BUSINESS_OWNER ||
+ user.role === UserRole.SUPERADMIN) && (
+
+ )}
+
+
+ {selectedEvent.photographerIds.length > 0 ? (
+
+ {selectedEvent.photographerIds.map((id, idx) => (
+
+ ))}
+
+ ) : (
+
+ Nenhum profissional atribuído.
+
)}
-
- {selectedEvent.photographerIds.length > 0 ? (
-
- {selectedEvent.photographerIds.map((id, idx) => (
-
- ))}
-
- ) : (
-
- Nenhum profissional atribuído.
-
- )}
-
- )}
+ )}
diff --git a/frontend/pages/Finance.tsx b/frontend/pages/Finance.tsx
index ad7309a..b408814 100644
--- a/frontend/pages/Finance.tsx
+++ b/frontend/pages/Finance.tsx
@@ -172,26 +172,26 @@ export const FinancePage: React.FC = () => {
};
return (
-
+
{/* Header */}
-
+
-
+
Financeiro
-
+
Acompanhe receitas, despesas e fluxo de caixa
-
{/* Stats Cards */}
-
+
Receitas
@@ -232,14 +232,14 @@ export const FinancePage: React.FC = () => {
{/* Filters */}
-
-
-
+
+
+
-
+