feat: Modularize event management system - 98.7% reduction in main file size
BREAKING CHANGES: - Refactored monolithic manage.astro (7,623 lines) into modular architecture - Original file backed up as manage-old.astro NEW ARCHITECTURE: ✅ 5 Utility Libraries: - event-management.ts: Event data operations & formatting - ticket-management.ts: Ticket CRUD operations & sales data - seating-management.ts: Seating map management & layout generation - sales-analytics.ts: Sales metrics, reporting & data export - marketing-kit.ts: Marketing asset generation & social media ✅ 5 Shared Components: - TicketTypeModal.tsx: Reusable ticket type creation/editing - SeatingMapModal.tsx: Advanced seating map editor with drag-and-drop - EmbedCodeModal.tsx: Widget embedding with customization - OrdersTable.tsx: Comprehensive orders table with sorting/pagination - AttendeesTable.tsx: Attendee management with export capabilities ✅ 11 Tab Components: - TicketsTab.tsx: Ticket management with card/list views - VenueTab.tsx: Seating map management & venue configuration - OrdersTab.tsx: Sales data & order management - AttendeesTab.tsx: Attendee check-in & management - PresaleTab.tsx: Presale code generation & tracking - DiscountTab.tsx: Discount code management - AddonsTab.tsx: Add-on product management - PrintedTab.tsx: Printed ticket barcode management - SettingsTab.tsx: Event configuration & custom fields - MarketingTab.tsx: Marketing kit with social media templates - PromotionsTab.tsx: Campaign & promotion management ✅ 4 Infrastructure Components: - TabNavigation.tsx: Responsive tab navigation system - EventManagement.tsx: Main orchestration component - EventHeader.astro: Event information header - QuickStats.astro: Statistics dashboard BENEFITS: - 98.7% reduction in main file size (7,623 → ~100 lines) - Dramatic improvement in maintainability and team collaboration - Component-level testing now possible - Reusable components across multiple features - Lazy loading support for better performance - Full TypeScript support with proper interfaces - Separation of concerns: business logic separated from UI 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
406
src/components/manage/AttendeesTab.tsx
Normal file
406
src/components/manage/AttendeesTab.tsx
Normal file
@@ -0,0 +1,406 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { loadSalesData, type SalesData } from '../../lib/sales-analytics';
|
||||
import { checkInTicket, refundTicket } from '../../lib/ticket-management';
|
||||
import { formatCurrency } from '../../lib/event-management';
|
||||
import AttendeesTable from '../tables/AttendeesTable';
|
||||
|
||||
interface AttendeeData {
|
||||
email: string;
|
||||
name: string;
|
||||
ticketCount: number;
|
||||
totalSpent: number;
|
||||
checkedInCount: number;
|
||||
tickets: SalesData[];
|
||||
}
|
||||
|
||||
interface AttendeesTabProps {
|
||||
eventId: string;
|
||||
}
|
||||
|
||||
export default function AttendeesTab({ eventId }: AttendeesTabProps) {
|
||||
const [orders, setOrders] = useState<SalesData[]>([]);
|
||||
const [attendees, setAttendees] = useState<AttendeeData[]>([]);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [selectedAttendee, setSelectedAttendee] = useState<AttendeeData | null>(null);
|
||||
const [showAttendeeDetails, setShowAttendeeDetails] = useState(false);
|
||||
const [checkInFilter, setCheckInFilter] = useState<'all' | 'checked_in' | 'not_checked_in'>('all');
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [eventId]);
|
||||
|
||||
useEffect(() => {
|
||||
processAttendees();
|
||||
}, [orders, searchTerm, checkInFilter]);
|
||||
|
||||
const loadData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const ordersData = await loadSalesData(eventId);
|
||||
setOrders(ordersData);
|
||||
} catch (error) {
|
||||
console.error('Error loading attendees data:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const processAttendees = () => {
|
||||
const attendeeMap = new Map<string, AttendeeData>();
|
||||
|
||||
orders.forEach(order => {
|
||||
const existing = attendeeMap.get(order.customer_email) || {
|
||||
email: order.customer_email,
|
||||
name: order.customer_name,
|
||||
ticketCount: 0,
|
||||
totalSpent: 0,
|
||||
checkedInCount: 0,
|
||||
tickets: []
|
||||
};
|
||||
|
||||
existing.tickets.push(order);
|
||||
if (order.status === 'confirmed') {
|
||||
existing.ticketCount += 1;
|
||||
existing.totalSpent += order.price_paid;
|
||||
if (order.checked_in) {
|
||||
existing.checkedInCount += 1;
|
||||
}
|
||||
}
|
||||
|
||||
attendeeMap.set(order.customer_email, existing);
|
||||
});
|
||||
|
||||
let processedAttendees = Array.from(attendeeMap.values());
|
||||
|
||||
// Apply search filter
|
||||
if (searchTerm) {
|
||||
const term = searchTerm.toLowerCase();
|
||||
processedAttendees = processedAttendees.filter(attendee =>
|
||||
attendee.name.toLowerCase().includes(term) ||
|
||||
attendee.email.toLowerCase().includes(term)
|
||||
);
|
||||
}
|
||||
|
||||
// Apply check-in filter
|
||||
if (checkInFilter === 'checked_in') {
|
||||
processedAttendees = processedAttendees.filter(attendee =>
|
||||
attendee.checkedInCount === attendee.ticketCount && attendee.ticketCount > 0
|
||||
);
|
||||
} else if (checkInFilter === 'not_checked_in') {
|
||||
processedAttendees = processedAttendees.filter(attendee =>
|
||||
attendee.checkedInCount === 0 && attendee.ticketCount > 0
|
||||
);
|
||||
}
|
||||
|
||||
setAttendees(processedAttendees);
|
||||
};
|
||||
|
||||
const handleViewAttendee = (attendee: AttendeeData) => {
|
||||
setSelectedAttendee(attendee);
|
||||
setShowAttendeeDetails(true);
|
||||
};
|
||||
|
||||
const handleCheckInAttendee = async (attendee: AttendeeData) => {
|
||||
const unCheckedTickets = attendee.tickets.filter(ticket =>
|
||||
!ticket.checked_in && ticket.status === 'confirmed'
|
||||
);
|
||||
|
||||
if (unCheckedTickets.length === 0) return;
|
||||
|
||||
const ticket = unCheckedTickets[0];
|
||||
const success = await checkInTicket(ticket.id);
|
||||
|
||||
if (success) {
|
||||
setOrders(prev => prev.map(order =>
|
||||
order.id === ticket.id ? { ...order, checked_in: true } : order
|
||||
));
|
||||
}
|
||||
};
|
||||
|
||||
const handleRefundAttendee = async (attendee: AttendeeData) => {
|
||||
const confirmedTickets = attendee.tickets.filter(ticket =>
|
||||
ticket.status === 'confirmed'
|
||||
);
|
||||
|
||||
if (confirmedTickets.length === 0) return;
|
||||
|
||||
const confirmMessage = `Are you sure you want to refund all ${confirmedTickets.length} ticket(s) for ${attendee.name}?`;
|
||||
|
||||
if (confirm(confirmMessage)) {
|
||||
for (const ticket of confirmedTickets) {
|
||||
await refundTicket(ticket.id);
|
||||
}
|
||||
|
||||
setOrders(prev => prev.map(order =>
|
||||
confirmedTickets.some(t => t.id === order.id)
|
||||
? { ...order, status: 'refunded' }
|
||||
: order
|
||||
));
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkCheckIn = async () => {
|
||||
const unCheckedTickets = orders.filter(order =>
|
||||
!order.checked_in && order.status === 'confirmed'
|
||||
);
|
||||
|
||||
if (unCheckedTickets.length === 0) {
|
||||
alert('No tickets available for check-in');
|
||||
return;
|
||||
}
|
||||
|
||||
const confirmMessage = `Are you sure you want to check in all ${unCheckedTickets.length} remaining tickets?`;
|
||||
|
||||
if (confirm(confirmMessage)) {
|
||||
for (const ticket of unCheckedTickets) {
|
||||
await checkInTicket(ticket.id);
|
||||
}
|
||||
|
||||
setOrders(prev => prev.map(order =>
|
||||
unCheckedTickets.some(t => t.id === order.id)
|
||||
? { ...order, checked_in: true }
|
||||
: order
|
||||
));
|
||||
}
|
||||
};
|
||||
|
||||
const getAttendeeStats = () => {
|
||||
const totalAttendees = attendees.length;
|
||||
const totalTickets = attendees.reduce((sum, a) => sum + a.ticketCount, 0);
|
||||
const checkedInAttendees = attendees.filter(a => a.checkedInCount > 0).length;
|
||||
const fullyCheckedInAttendees = attendees.filter(a =>
|
||||
a.checkedInCount === a.ticketCount && a.ticketCount > 0
|
||||
).length;
|
||||
|
||||
return {
|
||||
totalAttendees,
|
||||
totalTickets,
|
||||
checkedInAttendees,
|
||||
fullyCheckedInAttendees
|
||||
};
|
||||
};
|
||||
|
||||
const stats = getAttendeeStats();
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-2xl font-light text-white">Attendees & Check-in</h2>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={handleBulkCheckIn}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Bulk Check-in
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-xl p-4">
|
||||
<div className="text-sm text-white/60">Total Attendees</div>
|
||||
<div className="text-2xl font-bold text-white">{stats.totalAttendees}</div>
|
||||
</div>
|
||||
<div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-xl p-4">
|
||||
<div className="text-sm text-white/60">Total Tickets</div>
|
||||
<div className="text-2xl font-bold text-blue-400">{stats.totalTickets}</div>
|
||||
</div>
|
||||
<div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-xl p-4">
|
||||
<div className="text-sm text-white/60">Partially Checked In</div>
|
||||
<div className="text-2xl font-bold text-yellow-400">{stats.checkedInAttendees}</div>
|
||||
</div>
|
||||
<div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-xl p-4">
|
||||
<div className="text-sm text-white/60">Fully Checked In</div>
|
||||
<div className="text-2xl font-bold text-green-400">{stats.fullyCheckedInAttendees}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="bg-white/5 border border-white/20 rounded-xl p-6">
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Filters</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm text-white/80 mb-2">Search Attendees</label>
|
||||
<input
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder="Search by name or email..."
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-white/80 mb-2">Check-in Status</label>
|
||||
<select
|
||||
value={checkInFilter}
|
||||
onChange={(e) => setCheckInFilter(e.target.value as typeof checkInFilter)}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
<option value="all">All Attendees</option>
|
||||
<option value="checked_in">Fully Checked In</option>
|
||||
<option value="not_checked_in">Not Checked In</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Attendees Table */}
|
||||
<div className="bg-white/5 border border-white/20 rounded-xl p-6">
|
||||
<AttendeesTable
|
||||
orders={orders}
|
||||
onViewAttendee={handleViewAttendee}
|
||||
onCheckInAttendee={handleCheckInAttendee}
|
||||
onRefundAttendee={handleRefundAttendee}
|
||||
showActions={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Attendee Details Modal */}
|
||||
{showAttendeeDetails && selectedAttendee && (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h3 className="text-2xl font-light text-white">Attendee Details</h3>
|
||||
<button
|
||||
onClick={() => setShowAttendeeDetails(false)}
|
||||
className="text-white/60 hover:text-white transition-colors"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold text-white mb-3">Contact Information</h4>
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<span className="text-white/60 text-sm">Name:</span>
|
||||
<div className="text-white font-medium">{selectedAttendee.name}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-white/60 text-sm">Email:</span>
|
||||
<div className="text-white">{selectedAttendee.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold text-white mb-3">Summary</h4>
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<span className="text-white/60 text-sm">Total Tickets:</span>
|
||||
<div className="text-white font-medium">{selectedAttendee.ticketCount}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-white/60 text-sm">Total Spent:</span>
|
||||
<div className="text-white font-bold">{formatCurrency(selectedAttendee.totalSpent)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-white/60 text-sm">Checked In:</span>
|
||||
<div className="text-white font-medium">
|
||||
{selectedAttendee.checkedInCount} / {selectedAttendee.ticketCount}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold text-white mb-3">Tickets</h4>
|
||||
<div className="space-y-3">
|
||||
{selectedAttendee.tickets.map((ticket) => (
|
||||
<div key={ticket.id} className="bg-white/5 border border-white/20 rounded-lg p-4">
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<div className="font-medium text-white">{ticket.ticket_types.name}</div>
|
||||
<div className="text-white/60 text-sm">
|
||||
Purchased: {new Date(ticket.created_at).toLocaleDateString()}
|
||||
</div>
|
||||
<div className="text-white/60 text-sm font-mono">
|
||||
ID: {ticket.ticket_uuid}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-white font-bold">{formatCurrency(ticket.price_paid)}</div>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className={`px-2 py-1 text-xs rounded-full ${
|
||||
ticket.status === 'confirmed' ? 'bg-green-500/20 text-green-300 border border-green-500/30' :
|
||||
ticket.status === 'refunded' ? 'bg-red-500/20 text-red-300 border border-red-500/30' :
|
||||
'bg-yellow-500/20 text-yellow-300 border border-yellow-500/30'
|
||||
}`}>
|
||||
{ticket.status}
|
||||
</span>
|
||||
{ticket.checked_in ? (
|
||||
<span className="px-2 py-1 text-xs bg-green-500/20 text-green-300 border border-green-500/30 rounded-full">
|
||||
Checked In
|
||||
</span>
|
||||
) : (
|
||||
<span className="px-2 py-1 text-xs bg-white/20 text-white/60 border border-white/30 rounded-full">
|
||||
Not Checked In
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<button
|
||||
onClick={() => setShowAttendeeDetails(false)}
|
||||
className="px-6 py-3 text-white/80 hover:text-white transition-colors"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<div className="flex items-center gap-3">
|
||||
{selectedAttendee.checkedInCount < selectedAttendee.ticketCount && (
|
||||
<button
|
||||
onClick={() => {
|
||||
handleCheckInAttendee(selectedAttendee);
|
||||
setShowAttendeeDetails(false);
|
||||
}}
|
||||
className="px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors"
|
||||
>
|
||||
Check In
|
||||
</button>
|
||||
)}
|
||||
{selectedAttendee.ticketCount > 0 && (
|
||||
<button
|
||||
onClick={() => {
|
||||
handleRefundAttendee(selectedAttendee);
|
||||
setShowAttendeeDetails(false);
|
||||
}}
|
||||
className="px-6 py-3 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors"
|
||||
>
|
||||
Refund All
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user