366 lines
18 KiB
TypeScript
366 lines
18 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Calendar as CalendarIcon, Clock, MapPin, User, ChevronLeft, ChevronRight, Plus, Filter, Search } from 'lucide-react';
|
|
|
|
interface Event {
|
|
id: string;
|
|
title: string;
|
|
date: string;
|
|
time: string;
|
|
location: string;
|
|
client: string;
|
|
status: 'confirmed' | 'pending' | 'completed';
|
|
type: 'formatura' | 'casamento' | 'evento';
|
|
}
|
|
|
|
const MOCK_EVENTS: Event[] = [
|
|
{
|
|
id: '1',
|
|
title: 'Formatura Medicina UFPR',
|
|
date: '2025-12-15',
|
|
time: '19:00',
|
|
location: 'Teatro Guaíra, Curitiba',
|
|
client: 'Ana Paula Silva',
|
|
status: 'confirmed',
|
|
type: 'formatura'
|
|
},
|
|
{
|
|
id: '2',
|
|
title: 'Casamento Maria & João',
|
|
date: '2025-12-20',
|
|
time: '16:00',
|
|
location: 'Fazenda Vista Alegre',
|
|
client: 'Maria Santos',
|
|
status: 'confirmed',
|
|
type: 'casamento'
|
|
},
|
|
{
|
|
id: '3',
|
|
title: 'Formatura Direito PUC',
|
|
date: '2025-12-22',
|
|
time: '20:00',
|
|
location: 'Centro de Convenções',
|
|
client: 'Carlos Eduardo',
|
|
status: 'pending',
|
|
type: 'formatura'
|
|
},
|
|
{
|
|
id: '4',
|
|
title: 'Formatura Engenharia UTFPR',
|
|
date: '2025-12-28',
|
|
time: '18:30',
|
|
location: 'Espaço Nobre Eventos',
|
|
client: 'Roberto Mendes',
|
|
status: 'confirmed',
|
|
type: 'formatura'
|
|
},
|
|
{
|
|
id: '5',
|
|
title: 'Evento Corporativo Tech Summit',
|
|
date: '2026-01-10',
|
|
time: '09:00',
|
|
location: 'Hotel Bourbon',
|
|
client: 'TechCorp Ltda',
|
|
status: 'pending',
|
|
type: 'evento'
|
|
},
|
|
{
|
|
id: '6',
|
|
title: 'Formatura Odontologia',
|
|
date: '2026-01-15',
|
|
time: '19:30',
|
|
location: 'Clube Curitibano',
|
|
client: 'Juliana Costa',
|
|
status: 'confirmed',
|
|
type: 'formatura'
|
|
}
|
|
];
|
|
|
|
export const CalendarPage: React.FC = () => {
|
|
const [selectedMonth, setSelectedMonth] = useState(new Date());
|
|
const [selectedEvent, setSelectedEvent] = useState<Event | null>(null);
|
|
const [viewMode, setViewMode] = useState<'month' | 'week'>('month');
|
|
|
|
const getStatusColor = (status: Event['status']) => {
|
|
switch (status) {
|
|
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';
|
|
}
|
|
};
|
|
|
|
const getTypeColor = (type: Event['type']) => {
|
|
switch (type) {
|
|
case 'formatura': return 'bg-[#492E61] text-white';
|
|
case 'casamento': return 'bg-pink-500 text-white';
|
|
case 'evento': return 'bg-blue-500 text-white';
|
|
}
|
|
};
|
|
|
|
const nextMonth = () => {
|
|
setSelectedMonth(new Date(selectedMonth.getFullYear(), selectedMonth.getMonth() + 1));
|
|
};
|
|
|
|
const prevMonth = () => {
|
|
setSelectedMonth(new Date(selectedMonth.getFullYear(), selectedMonth.getMonth() - 1));
|
|
};
|
|
|
|
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 daysInMonth = lastDay.getDate();
|
|
const startingDayOfWeek = firstDay.getDay();
|
|
|
|
const days: (Date | null)[] = [];
|
|
|
|
// 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.toDateString() === date.toDateString();
|
|
});
|
|
};
|
|
|
|
const isToday = (date: Date) => {
|
|
const today = new Date();
|
|
return date.toDateString() === today.toDateString();
|
|
};
|
|
|
|
const currentMonthName = selectedMonth.toLocaleDateString('pt-BR', { month: 'long', year: 'numeric' });
|
|
const calendarDays = generateCalendarDays();
|
|
|
|
const monthEvents = MOCK_EVENTS.filter(event => {
|
|
const eventDate = new Date(event.date + 'T00:00:00');
|
|
return eventDate.getMonth() === selectedMonth.getMonth() &&
|
|
eventDate.getFullYear() === selectedMonth.getFullYear();
|
|
});
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white pt-24 pb-12 px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
{/* Header */}
|
|
<div className="mb-8 fade-in">
|
|
<h1 className="text-3xl font-serif font-bold text-brand-black">
|
|
Minha Agenda
|
|
</h1>
|
|
<p className="text-gray-500 mt-1">
|
|
Gerencie seus eventos e compromissos fotográficos
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-6 fade-in">
|
|
{/* Calendar Card */}
|
|
<div className="bg-white rounded-xl border border-gray-200 shadow-lg overflow-hidden">
|
|
{/* Header */}
|
|
<div className="bg-gradient-to-r from-brand-black to-brand-black/90 px-6 py-5">
|
|
<div className="flex items-center justify-between">
|
|
<button
|
|
onClick={prevMonth}
|
|
className="p-2 hover:bg-white/10 rounded-lg transition-all"
|
|
>
|
|
<ChevronLeft className="w-5 h-5 text-white" />
|
|
</button>
|
|
<h2 className="text-2xl font-serif font-bold text-white capitalize">
|
|
{currentMonthName}
|
|
</h2>
|
|
<button
|
|
onClick={nextMonth}
|
|
className="p-2 hover:bg-white/10 rounded-lg transition-all"
|
|
>
|
|
<ChevronRight className="w-5 h-5 text-white" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Calendar Grid */}
|
|
<div className="p-4">
|
|
{/* Week Days */}
|
|
<div className="grid grid-cols-7 gap-2 mb-2">
|
|
{['D', 'S', 'T', 'Q', 'Q', 'S', 'S'].map((day, idx) => (
|
|
<div key={idx} className="text-center">
|
|
<span className="text-xs font-semibold text-gray-400">
|
|
{day}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Days */}
|
|
<div className="grid grid-cols-7 gap-2">
|
|
{calendarDays.map((day, index) => {
|
|
if (!day) {
|
|
return <div key={`empty-${index}`} />;
|
|
}
|
|
|
|
const dayEvents = getEventsForDate(day);
|
|
const today = isToday(day);
|
|
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={`relative w-10 h-10 rounded-lg border-2 flex items-center justify-center cursor-pointer transition-all hover:scale-105 ${
|
|
today
|
|
? 'border-brand-gold bg-brand-gold text-white shadow-md font-bold'
|
|
: dayEvents.length > 0
|
|
? 'border-brand-black/20 bg-brand-black text-white hover:border-brand-gold'
|
|
: 'border-gray-200 text-gray-700 hover:border-gray-300 hover:bg-gray-50'
|
|
}`}
|
|
>
|
|
<span className={`text-sm ${today ? 'font-bold' : 'font-medium'}`}>
|
|
{day.getDate()}
|
|
</span>
|
|
{dayEvents.length > 0 && !today && (
|
|
<div className="absolute bottom-0.5 flex gap-0.5">
|
|
{dayEvents.slice(0, 3).map((_, i) => (
|
|
<div key={i} className="w-0.5 h-0.5 rounded-full bg-brand-gold" />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats Footer */}
|
|
<div className="border-t border-gray-200 bg-gray-50 px-6 py-4">
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<div className="text-center">
|
|
<p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Total</p>
|
|
<p className="text-2xl font-bold text-gray-900">{monthEvents.length}</p>
|
|
</div>
|
|
<div className="text-center border-x border-gray-200">
|
|
<p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Confirmados</p>
|
|
<p className="text-2xl font-bold text-green-600">
|
|
{monthEvents.filter(e => e.status === 'confirmed').length}
|
|
</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Pendentes</p>
|
|
<p className="text-2xl font-bold text-yellow-600">
|
|
{monthEvents.filter(e => e.status === 'pending').length}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Search Bar */}
|
|
<div className="bg-gray-50 p-3 rounded-lg border border-gray-100">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
|
|
<input
|
|
type="text"
|
|
placeholder="Buscar eventos..."
|
|
className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-sm focus:outline-none focus:border-brand-gold text-sm bg-white"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Events List - Table Format */}
|
|
<div className="bg-white rounded-lg border border-gray-200 overflow-hidden shadow-sm">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-gray-50 border-b border-gray-200">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
|
Evento
|
|
</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
|
Data
|
|
</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
|
Horário
|
|
</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
|
Local
|
|
</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
|
Cliente
|
|
</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
|
Status
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-100">
|
|
{monthEvents.map((event) => (
|
|
<tr
|
|
key={event.id}
|
|
className="hover:bg-gray-50 cursor-pointer transition-colors"
|
|
>
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center gap-2">
|
|
<div
|
|
className={`w-1 h-8 rounded-full ${getTypeColor(event.type)}`}
|
|
/>
|
|
<span className="font-medium text-gray-900 text-sm">{event.title}</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center text-sm text-gray-700">
|
|
<CalendarIcon size={14} className="mr-1.5 text-brand-gold flex-shrink-0" />
|
|
{new Date(event.date + 'T00:00:00').toLocaleDateString('pt-BR')}
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center text-sm text-gray-700">
|
|
<Clock size={14} className="mr-1.5 text-gray-400 flex-shrink-0" />
|
|
{event.time}
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center text-sm text-gray-700">
|
|
<MapPin size={14} className="mr-1.5 text-brand-gold flex-shrink-0" />
|
|
<span className="truncate max-w-[200px]">{event.location}</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center text-sm text-gray-700">
|
|
<User size={14} className="mr-1.5 text-gray-400 flex-shrink-0" />
|
|
{event.client}
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<span className={`inline-flex items-center px-2 py-1 rounded text-xs font-semibold border ${getStatusColor(event.status)}`}>
|
|
{getStatusLabel(event.status)}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{monthEvents.length === 0 && (
|
|
<div className="text-center py-12 text-gray-500">
|
|
<p>Nenhum evento encontrado neste mês.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|