527 lines
30 KiB
TypeScript
527 lines
30 KiB
TypeScript
|
|
import React, { useState, useEffect } from 'react';
|
|
import { UserRole, EventData, EventStatus, EventType } from '../types';
|
|
import { EventCard } from '../components/EventCard';
|
|
import { EventForm } from '../components/EventForm';
|
|
import { Button } from '../components/Button';
|
|
import { PlusCircle, Search, CheckCircle, Clock, Edit, Users, Map, Building2, Phone, Mail, MapPin, FileText, Camera, Star } from 'lucide-react';
|
|
import { useAuth } from '../contexts/AuthContext';
|
|
import { useData } from '../contexts/DataContext';
|
|
import { STATUS_COLORS } from '../constants';
|
|
|
|
interface DashboardProps {
|
|
initialView?: 'list' | 'create';
|
|
}
|
|
|
|
export const Dashboard: React.FC<DashboardProps> = ({ initialView = 'list' }) => {
|
|
const { user } = useAuth();
|
|
const { events, getEventsByRole, addEvent, updateEventStatus, assignPhotographer, addAttachment, getPhotographerById, getInstitutionById } = useData();
|
|
const [view, setView] = useState<'list' | 'create' | 'edit' | 'details'>(initialView);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [selectedEvent, setSelectedEvent] = useState<EventData | null>(null);
|
|
const [activeFilter, setActiveFilter] = useState<string>('all');
|
|
|
|
// Reset view when initialView prop changes
|
|
useEffect(() => {
|
|
if (initialView) {
|
|
setView(initialView);
|
|
if (initialView === 'create') setSelectedEvent(null);
|
|
}
|
|
}, [initialView]);
|
|
|
|
// Guard Clause for basic security
|
|
if (!user) return <div className="p-10 text-center">Acesso Negado. Faça login.</div>;
|
|
|
|
const myEvents = getEventsByRole(user.id, user.role);
|
|
|
|
// Filter Logic
|
|
const filteredEvents = myEvents.filter(e => {
|
|
const matchesSearch = e.name.toLowerCase().includes(searchTerm.toLowerCase());
|
|
const matchesStatus = activeFilter === 'all' ||
|
|
(activeFilter === 'pending' && e.status === EventStatus.PENDING_APPROVAL) ||
|
|
(activeFilter === 'active' && e.status !== EventStatus.ARCHIVED && e.status !== EventStatus.PENDING_APPROVAL);
|
|
return matchesSearch && matchesStatus;
|
|
});
|
|
|
|
const handleSaveEvent = (data: any) => {
|
|
const isClient = user.role === UserRole.EVENT_OWNER;
|
|
|
|
if (view === 'edit' && selectedEvent) {
|
|
const updatedEvent = { ...selectedEvent, ...data };
|
|
console.log("Updated", updatedEvent);
|
|
setSelectedEvent(updatedEvent);
|
|
setView('details');
|
|
} else {
|
|
const initialStatus = isClient ? EventStatus.PENDING_APPROVAL : EventStatus.PLANNING;
|
|
const newEvent: EventData = {
|
|
...data,
|
|
id: Math.random().toString(36).substr(2, 9),
|
|
status: initialStatus,
|
|
checklist: [],
|
|
ownerId: isClient ? user.id : 'unknown',
|
|
photographerIds: []
|
|
};
|
|
addEvent(newEvent);
|
|
setView('list');
|
|
}
|
|
};
|
|
|
|
const handleApprove = (e: React.MouseEvent, eventId: string) => {
|
|
e.stopPropagation();
|
|
updateEventStatus(eventId, EventStatus.CONFIRMED);
|
|
};
|
|
|
|
const handleOpenMaps = () => {
|
|
if (!selectedEvent) return;
|
|
if (selectedEvent.address.mapLink) {
|
|
window.open(selectedEvent.address.mapLink, '_blank');
|
|
return;
|
|
}
|
|
const { street, number, city, state } = selectedEvent.address;
|
|
const query = encodeURIComponent(`${street}, ${number}, ${city} - ${state}`);
|
|
window.open(`https://www.google.com/maps/search/?api=1&query=${query}`, '_blank');
|
|
};
|
|
|
|
const handleManageTeam = () => {
|
|
if (!selectedEvent) return;
|
|
const newId = window.prompt("ID do Fotógrafo para adicionar (ex: photographer-1):", "photographer-1");
|
|
if (newId) {
|
|
assignPhotographer(selectedEvent.id, newId);
|
|
alert("Fotógrafo atribuído com sucesso!");
|
|
const updated = events.find(e => e.id === selectedEvent.id);
|
|
if (updated) setSelectedEvent(updated);
|
|
}
|
|
};
|
|
|
|
// --- RENDERS PER ROLE ---
|
|
|
|
const renderRoleSpecificHeader = () => {
|
|
if (user.role === UserRole.EVENT_OWNER) {
|
|
return (
|
|
<div>
|
|
<h1 className="text-3xl font-serif font-bold text-brand-black">Meus Eventos</h1>
|
|
<p className="text-gray-500 mt-1">Acompanhe seus eventos ou solicite novos orçamentos.</p>
|
|
</div>
|
|
);
|
|
}
|
|
if (user.role === UserRole.PHOTOGRAPHER) {
|
|
return (
|
|
<div>
|
|
<h1 className="text-3xl font-serif font-bold text-brand-black">Eventos Designados</h1>
|
|
<p className="text-gray-500 mt-1">Gerencie seus trabalhos e visualize detalhes.</p>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<div>
|
|
<h1 className="text-3xl font-serif font-bold text-brand-black">Gestão Geral</h1>
|
|
<p className="text-gray-500 mt-1">Controle total de eventos, aprovações e equipes.</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const renderRoleSpecificActions = () => {
|
|
if (user.role === UserRole.PHOTOGRAPHER) return null;
|
|
|
|
const label = user.role === UserRole.EVENT_OWNER ? "Solicitar Novo Evento" : "Novo Evento";
|
|
|
|
return (
|
|
<Button onClick={() => setView('create')} className="shadow-lg">
|
|
<PlusCircle className="mr-2 h-5 w-5" /> {label}
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
const renderAdminActions = (event: EventData) => {
|
|
if (user.role !== UserRole.BUSINESS_OWNER && user.role !== UserRole.SUPERADMIN) return null;
|
|
|
|
if (event.status === EventStatus.PENDING_APPROVAL) {
|
|
return (
|
|
<div className="absolute top-3 left-3 flex space-x-2 z-10">
|
|
<button
|
|
onClick={(e) => handleApprove(e, event.id)}
|
|
className="bg-green-500 text-white px-3 py-1 rounded-sm text-xs font-bold shadow hover:bg-green-600 transition-colors flex items-center"
|
|
>
|
|
<CheckCircle size={12} className="mr-1" /> APROVAR
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
// --- MAIN RENDER ---
|
|
|
|
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 */}
|
|
{view === 'list' && (
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4 fade-in">
|
|
{renderRoleSpecificHeader()}
|
|
{renderRoleSpecificActions()}
|
|
</div>
|
|
)}
|
|
|
|
{/* Content Switcher */}
|
|
{view === 'list' && (
|
|
<div className="space-y-6 fade-in">
|
|
{/* Filters Bar */}
|
|
<div className="flex flex-col sm:flex-row gap-4 items-center justify-between bg-gray-50 p-3 rounded-lg border border-gray-100">
|
|
<div className="relative flex-1 w-full">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
|
|
<input
|
|
type="text"
|
|
placeholder="Buscar evento..."
|
|
className="w-full pl-10 pr-4 py-2 bg-white border border-gray-200 rounded-sm focus:outline-none focus:border-brand-gold text-sm"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{(user.role === UserRole.BUSINESS_OWNER || user.role === UserRole.SUPERADMIN) && (
|
|
<div className="flex space-x-2 bg-white p-1 rounded border border-gray-200">
|
|
<button
|
|
onClick={() => setActiveFilter('all')}
|
|
className={`px-3 py-1 text-xs font-medium rounded-sm ${activeFilter === 'all' ? 'bg-brand-black text-white' : 'text-gray-600 hover:bg-gray-100'}`}
|
|
>
|
|
Todos
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveFilter('pending')}
|
|
className={`px-3 py-1 text-xs font-medium rounded-sm flex items-center ${activeFilter === 'pending' ? 'bg-brand-gold text-white' : 'text-gray-600 hover:bg-gray-100'}`}
|
|
>
|
|
<Clock size={12} className="mr-1"/> Pendentes
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{filteredEvents.map(event => (
|
|
<div key={event.id} className="relative group">
|
|
{renderAdminActions(event)}
|
|
<EventCard
|
|
event={event}
|
|
onClick={() => { setSelectedEvent(event); setView('details'); }}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{filteredEvents.length === 0 && (
|
|
<div className="text-center py-20 bg-gray-50 rounded-lg border border-dashed border-gray-200">
|
|
<p className="text-gray-500 mb-4">Nenhum evento encontrado com os filtros atuais.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{(view === 'create' || view === 'edit') && (
|
|
<EventForm
|
|
onCancel={() => setView(view === 'edit' ? 'details' : 'list')}
|
|
onSubmit={handleSaveEvent}
|
|
initialData={view === 'edit' ? selectedEvent : undefined}
|
|
/>
|
|
)}
|
|
|
|
{view === 'details' && selectedEvent && (
|
|
<div className="fade-in">
|
|
<Button variant="ghost" onClick={() => setView('list')} className="mb-4 pl-0">
|
|
← Voltar para lista
|
|
</Button>
|
|
|
|
{/* Status Banner */}
|
|
{selectedEvent.status === EventStatus.PENDING_APPROVAL && user.role === UserRole.EVENT_OWNER && (
|
|
<div className="bg-yellow-50 border border-yellow-200 text-yellow-800 p-4 rounded-lg mb-6 flex items-start">
|
|
<Clock className="mr-3 flex-shrink-0" />
|
|
<div>
|
|
<h4 className="font-bold">Solicitação em Análise</h4>
|
|
<p className="text-sm mt-1">Seu evento foi enviado e está aguardando aprovação da equipe Photum.</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="bg-white rounded-2xl overflow-hidden shadow-2xl animate-slideUp">
|
|
<div className="h-80 w-full relative group overflow-hidden">
|
|
<img src={selectedEvent.coverImage} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" alt="Cover" />
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent flex items-center justify-center">
|
|
<div className="text-center px-6">
|
|
<h1 className="text-5xl font-serif text-white font-bold drop-shadow-2xl mb-3 animate-fadeIn">{selectedEvent.name}</h1>
|
|
<div className="flex items-center justify-center gap-3 animate-fadeIn" style={{ animationDelay: '0.2s' }}>
|
|
<span className="px-4 py-2 bg-white/90 backdrop-blur-sm rounded-full text-sm font-semibold text-gray-800 shadow-lg">
|
|
{selectedEvent.type}
|
|
</span>
|
|
<span className="px-4 py-2 bg-[#B9CF33] backdrop-blur-sm rounded-full text-sm font-semibold text-white shadow-lg">
|
|
{new Date(selectedEvent.date).toLocaleDateString('pt-BR', { day: '2-digit', month: 'short', year: 'numeric' })}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-8">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div className="col-span-2 space-y-8">
|
|
{/* Actions Toolbar */}
|
|
<div className="flex flex-wrap gap-3 border-b pb-4">
|
|
{(user.role === UserRole.BUSINESS_OWNER || user.role === UserRole.SUPERADMIN) && (
|
|
<>
|
|
<Button variant="outline" onClick={() => setView('edit')}>
|
|
<Edit size={16} className="mr-2"/> Editar Detalhes
|
|
</Button>
|
|
<Button variant="outline" onClick={handleManageTeam}>
|
|
<Users size={16} className="mr-2"/> Gerenciar Equipe
|
|
</Button>
|
|
</>
|
|
)}
|
|
{user.role === UserRole.EVENT_OWNER && selectedEvent.status !== EventStatus.ARCHIVED && (
|
|
<Button variant="outline" onClick={() => setView('edit')}>
|
|
<Edit size={16} className="mr-2"/> Editar Informações
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Institution Information */}
|
|
{selectedEvent.institutionId && (() => {
|
|
const institution = getInstitutionById(selectedEvent.institutionId);
|
|
if (institution) {
|
|
return (
|
|
<section className="relative bg-gradient-to-br from-[#B9CF33]/5 via-white to-[#C2388B]/5 border-2 border-gray-100 rounded-2xl p-8 hover:shadow-lg transition-all duration-300 group overflow-hidden">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-[#B9CF33]/0 to-[#C2388B]/0 group-hover:from-[#B9CF33]/5 group-hover:to-[#C2388B]/5 transition-all duration-500" />
|
|
<div className="relative flex items-start gap-5">
|
|
<div className="flex-shrink-0">
|
|
<div className="w-20 h-20 bg-gradient-to-br from-[#B9CF33] to-[#a5bd2e] rounded-2xl flex items-center justify-center shadow-xl group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300">
|
|
<Building2 className="text-white" size={36} />
|
|
</div>
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-2xl font-bold text-brand-black mb-2 group-hover:text-[#492E61] transition-colors">{institution.name}</h3>
|
|
<span className="inline-block px-4 py-1.5 bg-gradient-to-r from-[#B9CF33] to-[#a5bd2e] text-white text-xs uppercase tracking-wide font-bold rounded-full mb-5 shadow-md">
|
|
{institution.type}
|
|
</span>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
|
<div className="space-y-3">
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-10 h-10 rounded-xl bg-[#B9CF33]/10 flex items-center justify-center flex-shrink-0">
|
|
<Phone className="text-[#B9CF33]" size={20} />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-gray-500 uppercase tracking-wide font-semibold mb-1">Contato</p>
|
|
<p className="text-gray-800 font-semibold">{institution.phone}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-10 h-10 rounded-xl bg-[#B9CF33]/10 flex items-center justify-center flex-shrink-0">
|
|
<Mail className="text-[#B9CF33]" size={20} />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-xs text-gray-500 uppercase tracking-wide font-semibold mb-1">Email</p>
|
|
<p className="text-gray-800 font-medium truncate">{institution.email}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{institution.address && (
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-10 h-10 rounded-xl bg-[#B9CF33]/10 flex items-center justify-center flex-shrink-0">
|
|
<MapPin className="text-[#B9CF33]" size={20} />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-gray-500 uppercase tracking-wide font-semibold mb-1">Endereço</p>
|
|
<p className="text-gray-800 font-medium">{institution.address.street}, {institution.address.number}</p>
|
|
<p className="text-gray-600">{institution.address.city} - {institution.address.state}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{institution.description && (
|
|
<div className="mt-5 pt-5 border-t border-gray-200">
|
|
<p className="text-gray-600 text-sm leading-relaxed italic">
|
|
{institution.description}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
return null;
|
|
})()}
|
|
|
|
<section className="bg-gradient-to-br from-gray-50 to-white rounded-2xl p-6 border border-gray-100 hover:shadow-lg transition-all duration-300">
|
|
<div className="flex items-center gap-3 mb-5">
|
|
<div className="w-10 h-10 rounded-xl bg-[#B9CF33]/10 flex items-center justify-center">
|
|
<FileText className="text-[#B9CF33]" size={20} />
|
|
</div>
|
|
<h3 className="text-xl font-bold text-brand-black">Sobre o Evento</h3>
|
|
</div>
|
|
<p className="text-gray-700 leading-relaxed whitespace-pre-wrap text-base">{selectedEvent.briefing || "Sem briefing detalhado."}</p>
|
|
</section>
|
|
|
|
{selectedEvent.contacts.length > 0 && (
|
|
<section>
|
|
<div className="flex items-center gap-3 mb-5">
|
|
<div className="w-10 h-10 rounded-xl bg-[#B9CF33]/10 flex items-center justify-center">
|
|
<Users className="text-[#B9CF33]" size={20} />
|
|
</div>
|
|
<h3 className="text-xl font-bold text-brand-black">Contatos & Responsáveis</h3>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
{selectedEvent.contacts.map((c, i) => (
|
|
<div key={i} className="group bg-gradient-to-br from-white to-gray-50 p-5 rounded-xl border-2 border-gray-100 hover:border-[#B9CF33] hover:shadow-lg transition-all duration-300">
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-[#492E61] to-[#C2388B] flex items-center justify-center text-white font-bold text-lg flex-shrink-0 group-hover:scale-110 transition-transform">
|
|
{c.name.charAt(0).toUpperCase()}
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="font-bold text-base text-gray-800 mb-1">{c.name}</p>
|
|
<span className="inline-block px-3 py-1 bg-[#B9CF33]/10 text-[#B9CF33] text-xs uppercase tracking-wide font-bold rounded-full mb-2">{c.role}</span>
|
|
<div className="flex items-center gap-2 text-gray-600 mt-2">
|
|
<Phone size={14} className="text-[#B9CF33]" />
|
|
<p className="text-sm font-medium">{c.phone}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
</div>
|
|
|
|
<div className="col-span-1 space-y-6">
|
|
<div className="relative overflow-hidden rounded-2xl p-6 bg-gradient-to-br from-white to-gray-50 border-2 border-gray-100 hover:shadow-xl transition-all duration-300 group">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-[#B9CF33]/0 to-[#B9CF33]/0 group-hover:from-[#B9CF33]/5 group-hover:to-[#B9CF33]/5 transition-all" />
|
|
<div className="relative">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="w-10 h-10 rounded-xl bg-[#B9CF33]/10 flex items-center justify-center group-hover:scale-110 transition-transform">
|
|
<CheckCircle className="text-[#B9CF33]" size={20} />
|
|
</div>
|
|
<h4 className="font-bold uppercase tracking-widest text-xs text-gray-500">Status Atual</h4>
|
|
</div>
|
|
<span className={`inline-block px-4 py-2 rounded-xl text-sm font-bold ${STATUS_COLORS[selectedEvent.status]} shadow-sm`}>
|
|
{selectedEvent.status}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-2xl bg-gradient-to-br from-white to-gray-50 p-6 border-2 border-gray-100 hover:shadow-xl transition-all duration-300 group">
|
|
<div className="flex items-center gap-3 mb-5">
|
|
<div className="w-10 h-10 rounded-xl bg-[#B9CF33]/10 flex items-center justify-center group-hover:scale-110 transition-transform">
|
|
<MapPin className="text-[#B9CF33]" size={20} />
|
|
</div>
|
|
<h4 className="font-bold uppercase tracking-widest text-xs text-gray-500">Localização</h4>
|
|
</div>
|
|
<p className="font-bold text-base text-gray-800 mb-1">{selectedEvent.address.street}, {selectedEvent.address.number}</p>
|
|
<p className="text-gray-600 mb-5 text-sm">{selectedEvent.address.city} - {selectedEvent.address.state}</p>
|
|
|
|
{selectedEvent.address.mapLink ? (
|
|
<button
|
|
onClick={handleOpenMaps}
|
|
className="w-full px-4 py-3 bg-gradient-to-r from-[#B9CF33] to-[#a5bd2e] text-white rounded-xl font-semibold hover:shadow-lg hover:scale-105 active:scale-95 transition-all flex items-center justify-center gap-2"
|
|
>
|
|
<Map size={18} /> Abrir no Google Maps
|
|
</button>
|
|
) : (
|
|
<button
|
|
onClick={handleOpenMaps}
|
|
className="w-full px-4 py-3 bg-white border-2 border-gray-200 text-gray-700 rounded-xl font-semibold hover:border-[#B9CF33] hover:text-[#B9CF33] hover:shadow-lg transition-all flex items-center justify-center gap-2"
|
|
>
|
|
<Map size={18} /> Buscar no Maps
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{(selectedEvent.photographerIds.length > 0 || user.role === UserRole.BUSINESS_OWNER) && (
|
|
<div className="rounded-2xl bg-gradient-to-br from-white to-gray-50 p-6 border-2 border-gray-100 hover:shadow-xl transition-all duration-300 group">
|
|
<div className="flex justify-between items-center mb-5">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-xl bg-[#B9CF33]/10 flex items-center justify-center group-hover:scale-110 transition-transform">
|
|
<Camera className="text-[#B9CF33]" size={20} />
|
|
</div>
|
|
<h4 className="font-bold uppercase tracking-widest text-xs text-gray-500">Equipe Designada</h4>
|
|
</div>
|
|
{(user.role === UserRole.BUSINESS_OWNER || user.role === UserRole.SUPERADMIN) && (
|
|
<button
|
|
onClick={handleManageTeam}
|
|
className="w-8 h-8 rounded-lg bg-[#B9CF33]/10 hover:bg-[#B9CF33] text-[#B9CF33] hover:text-white transition-all flex items-center justify-center hover:scale-110"
|
|
>
|
|
<PlusCircle size={18}/>
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{selectedEvent.photographerIds.length > 0 ? (
|
|
<div className="space-y-3">
|
|
{selectedEvent.photographerIds.map((id) => {
|
|
const photographer = getPhotographerById(id);
|
|
return (
|
|
<div
|
|
key={id}
|
|
className="flex items-center gap-3 p-3 bg-white rounded-xl border border-gray-200 hover:border-[#B9CF33] hover:shadow-md transition-all group/item"
|
|
>
|
|
<div className="relative flex-shrink-0">
|
|
<img
|
|
src={photographer?.avatar || `https://i.pravatar.cc/100?u=${id}`}
|
|
alt={photographer?.name || id}
|
|
className="w-12 h-12 rounded-xl object-cover ring-2 ring-gray-100 group-hover/item:ring-[#B9CF33] transition-all"
|
|
/>
|
|
<div className="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-white" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-semibold text-gray-800 text-sm truncate group-hover/item:text-[#B9CF33] transition-colors">
|
|
{photographer?.name || 'Fotógrafo'}
|
|
</p>
|
|
<p className="text-xs text-gray-500">Fotógrafo</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-gray-500 italic bg-gray-50 p-3 rounded-lg border border-dashed border-gray-200">Nenhum profissional atribuído</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<style>{`
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.animate-slideUp {
|
|
animation: slideUp 0.5s ease-out;
|
|
}
|
|
|
|
.animate-fadeIn {
|
|
animation: fadeIn 0.6s ease-out;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
};
|