Improve UX with navigation, attendance management, and calendar fixes
## Quick Wins - **AdminSidebar**: Move "View Public Site" to clickable logo area - **Plans**: Fix layout to center single plan, dynamic grid for multiple - **AdminGallery**: Add empty state message with "Create Event" button ## Event Attendance Enhancement - **NEW: AdminEventAttendance page** with full-featured table view: - Tab filters (All/Yes/No/Maybe RSVPs) - Search by name/email - Bulk selection with Select All - Individual attendance toggle buttons (merged column) - CSV export functionality (client requirement) - Summary statistics cards - **AdminEvents**: Navigate to new attendance page instead of dialog - **App.js**: Add /admin/events/:eventId/attendance route ## Calendar Fixes - **MemberCalendar**: Add state management for navigation (date/view) - Fix non-functional buttons (Today/Back/Next/Month/Week/Day/Agenda) - Add onNavigate and onView handlers - **NEW: MemberCalendar.css**: Extract styles from broken jsx syntax - Fix toolbar button styling and interactivity 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Koncept Kit
548
src/pages/admin/AdminEventAttendance.js
Normal file
548
src/pages/admin/AdminEventAttendance.js
Normal file
@@ -0,0 +1,548 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate, Link } from 'react-router-dom';
|
||||
import api from '../../utils/api';
|
||||
import { Card } from '../../components/ui/card';
|
||||
import { Button } from '../../components/ui/button';
|
||||
import { Input } from '../../components/ui/input';
|
||||
import { Badge } from '../../components/ui/badge';
|
||||
import { Checkbox } from '../../components/ui/checkbox';
|
||||
import {
|
||||
ArrowLeft,
|
||||
Calendar,
|
||||
MapPin,
|
||||
Download,
|
||||
Check,
|
||||
X,
|
||||
Search,
|
||||
Users,
|
||||
UserCheck,
|
||||
UserX,
|
||||
HelpCircle
|
||||
} from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import moment from 'moment';
|
||||
|
||||
const AdminEventAttendance = () => {
|
||||
const { eventId } = useParams();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [event, setEvent] = useState(null);
|
||||
const [rsvps, setRsvps] = useState([]);
|
||||
const [filteredRsvps, setFilteredRsvps] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
// Filters and search
|
||||
const [activeTab, setActiveTab] = useState('all');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
|
||||
// Bulk selection
|
||||
const [selectedRsvps, setSelectedRsvps] = useState(new Set());
|
||||
const [selectAll, setSelectAll] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchEventAndRsvps();
|
||||
}, [eventId]);
|
||||
|
||||
useEffect(() => {
|
||||
filterRsvps();
|
||||
}, [rsvps, activeTab, searchQuery]);
|
||||
|
||||
const fetchEventAndRsvps = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const [eventRes, rsvpsRes] = await Promise.all([
|
||||
api.get(`/admin/events/${eventId}`),
|
||||
api.get(`/admin/events/${eventId}/rsvps`)
|
||||
]);
|
||||
setEvent(eventRes.data);
|
||||
setRsvps(rsvpsRes.data);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch event data:', error);
|
||||
toast.error('Failed to load event data');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const filterRsvps = () => {
|
||||
let filtered = [...rsvps];
|
||||
|
||||
// Filter by RSVP status tab
|
||||
if (activeTab !== 'all') {
|
||||
filtered = filtered.filter(rsvp => rsvp.rsvp_status === activeTab);
|
||||
}
|
||||
|
||||
// Filter by search query
|
||||
if (searchQuery) {
|
||||
const query = searchQuery.toLowerCase();
|
||||
filtered = filtered.filter(rsvp =>
|
||||
rsvp.user_name?.toLowerCase().includes(query) ||
|
||||
rsvp.user_email?.toLowerCase().includes(query)
|
||||
);
|
||||
}
|
||||
|
||||
setFilteredRsvps(filtered);
|
||||
};
|
||||
|
||||
const handleSelectAll = () => {
|
||||
if (selectAll) {
|
||||
setSelectedRsvps(new Set());
|
||||
} else {
|
||||
setSelectedRsvps(new Set(filteredRsvps.map(rsvp => rsvp.user_id)));
|
||||
}
|
||||
setSelectAll(!selectAll);
|
||||
};
|
||||
|
||||
const handleSelectRsvp = (userId) => {
|
||||
const newSelected = new Set(selectedRsvps);
|
||||
if (newSelected.has(userId)) {
|
||||
newSelected.delete(userId);
|
||||
} else {
|
||||
newSelected.add(userId);
|
||||
}
|
||||
setSelectedRsvps(newSelected);
|
||||
setSelectAll(newSelected.size === filteredRsvps.length);
|
||||
};
|
||||
|
||||
const handleBulkAttendance = async (attended) => {
|
||||
if (selectedRsvps.size === 0) {
|
||||
toast.error('Please select at least one RSVP');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setSaving(true);
|
||||
const updates = Array.from(selectedRsvps).map(userId => ({
|
||||
user_id: userId,
|
||||
attended
|
||||
}));
|
||||
|
||||
await api.put(`/admin/events/${eventId}/attendance`, { updates });
|
||||
|
||||
toast.success(`Marked ${selectedRsvps.size} ${selectedRsvps.size === 1 ? 'person' : 'people'} as ${attended ? 'attended' : 'not attended'}`);
|
||||
|
||||
// Refresh data
|
||||
await fetchEventAndRsvps();
|
||||
|
||||
// Clear selection
|
||||
setSelectedRsvps(new Set());
|
||||
setSelectAll(false);
|
||||
} catch (error) {
|
||||
console.error('Failed to update attendance:', error);
|
||||
toast.error('Failed to update attendance');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleIndividualAttendance = async (userId, attended) => {
|
||||
try {
|
||||
setSaving(true);
|
||||
const updates = [{
|
||||
user_id: userId,
|
||||
attended
|
||||
}];
|
||||
|
||||
await api.put(`/admin/events/${eventId}/attendance`, { updates });
|
||||
|
||||
toast.success(`Attendance ${attended ? 'confirmed' : 'removed'}`);
|
||||
|
||||
// Refresh data
|
||||
await fetchEventAndRsvps();
|
||||
} catch (error) {
|
||||
console.error('Failed to update attendance:', error);
|
||||
toast.error('Failed to update attendance');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const exportToCSV = () => {
|
||||
if (filteredRsvps.length === 0) {
|
||||
toast.error('No RSVPs to export');
|
||||
return;
|
||||
}
|
||||
|
||||
// CSV header
|
||||
const headers = ['Name', 'Email', 'RSVP Status', 'Attended', 'Attended At'];
|
||||
|
||||
// CSV rows
|
||||
const rows = filteredRsvps.map(rsvp => [
|
||||
`"${rsvp.user_name}"`,
|
||||
`"${rsvp.user_email}"`,
|
||||
`"${rsvp.rsvp_status.toUpperCase()}"`,
|
||||
rsvp.attended ? 'Yes' : 'No',
|
||||
rsvp.attended_at ? `"${moment(rsvp.attended_at).format('YYYY-MM-DD HH:mm A')}"` : ''
|
||||
]);
|
||||
|
||||
// Combine headers and rows
|
||||
const csvContent = [
|
||||
headers.join(','),
|
||||
...rows.map(row => row.join(','))
|
||||
].join('\n');
|
||||
|
||||
// Create blob and download
|
||||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||
const link = document.createElement('a');
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
link.setAttribute('href', url);
|
||||
link.setAttribute('download', `${event?.title.replace(/\s+/g, '_')}_RSVPs_${moment().format('YYYY-MM-DD')}.csv`);
|
||||
link.style.visibility = 'hidden';
|
||||
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
|
||||
toast.success('CSV exported successfully');
|
||||
};
|
||||
|
||||
const getStats = () => {
|
||||
const total = rsvps.length;
|
||||
const yesCount = rsvps.filter(r => r.rsvp_status === 'yes').length;
|
||||
const noCount = rsvps.filter(r => r.rsvp_status === 'no').length;
|
||||
const maybeCount = rsvps.filter(r => r.rsvp_status === 'maybe').length;
|
||||
const attendedCount = rsvps.filter(r => r.attended).length;
|
||||
|
||||
return { total, yesCount, noCount, maybeCount, attendedCount };
|
||||
};
|
||||
|
||||
const stats = getStats();
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-[#664fa3]">Loading event data...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!event) {
|
||||
return (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-[#664fa3] mb-4">Event not found</p>
|
||||
<Button onClick={() => navigate('/admin/events')} className="bg-[#664fa3] hover:bg-[#422268] text-white rounded-xl">
|
||||
Back to Events
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
onClick={() => navigate('/admin/events')}
|
||||
variant="outline"
|
||||
className="border-[#ddd8eb] text-[#664fa3] rounded-xl"
|
||||
style={{ fontFamily: "'Inter', sans-serif" }}
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Back to Events
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Event Attendance
|
||||
</h1>
|
||||
<p className="text-[#664fa3] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Manage RSVPs and track attendance for this event
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
onClick={exportToCSV}
|
||||
className="bg-[#81B29A] hover:bg-[#6a9a83] text-white rounded-xl"
|
||||
style={{ fontFamily: "'Inter', sans-serif" }}
|
||||
>
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Export to CSV
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Event Details Card */}
|
||||
<Card className="p-6 bg-white border-[#ddd8eb] rounded-xl">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{event.title}
|
||||
</h2>
|
||||
<div className="flex flex-wrap gap-4 text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="h-4 w-4" />
|
||||
<span>{moment(event.start_at).format('MMMM D, YYYY [at] h:mm A')}</span>
|
||||
</div>
|
||||
{event.location && (
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin className="h-4 w-4" />
|
||||
<span>{event.location}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Badge className={`${event.published ? 'bg-[#81B29A]' : 'bg-[#ddd8eb]'} text-white px-3 py-1`}>
|
||||
{event.published ? 'Published' : 'Draft'}
|
||||
</Badge>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Statistics Cards */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
|
||||
<Card className="p-4 bg-white border-[#ddd8eb] rounded-xl">
|
||||
<div className="flex items-center gap-3">
|
||||
<Users className="h-8 w-8 text-[#664fa3]" />
|
||||
<div>
|
||||
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total RSVPs</p>
|
||||
<p className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.total}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-4 bg-white border-[#ddd8eb] rounded-xl">
|
||||
<div className="flex items-center gap-3">
|
||||
<UserCheck className="h-8 w-8 text-[#81B29A]" />
|
||||
<div>
|
||||
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Yes</p>
|
||||
<p className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.yesCount}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-4 bg-white border-[#ddd8eb] rounded-xl">
|
||||
<div className="flex items-center gap-3">
|
||||
<UserX className="h-8 w-8 text-[#E07A5F]" />
|
||||
<div>
|
||||
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No</p>
|
||||
<p className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.noCount}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-4 bg-white border-[#ddd8eb] rounded-xl">
|
||||
<div className="flex items-center gap-3">
|
||||
<HelpCircle className="h-8 w-8 text-[#F2CC8F]" />
|
||||
<div>
|
||||
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Maybe</p>
|
||||
<p className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.maybeCount}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-4 bg-white border-[#ddd8eb] rounded-xl">
|
||||
<div className="flex items-center gap-3">
|
||||
<Check className="h-8 w-8 text-[#664fa3]" />
|
||||
<div>
|
||||
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Attended</p>
|
||||
<p className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.attendedCount}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Filters and Actions */}
|
||||
<Card className="p-6 bg-white border-[#ddd8eb] rounded-xl">
|
||||
<div className="space-y-4">
|
||||
{/* Tab Filters */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
onClick={() => setActiveTab('all')}
|
||||
variant={activeTab === 'all' ? 'default' : 'outline'}
|
||||
className={`rounded-xl ${
|
||||
activeTab === 'all'
|
||||
? 'bg-[#664fa3] hover:bg-[#422268] text-white'
|
||||
: 'border-[#ddd8eb] text-[#664fa3] hover:bg-[#F8F7FB]'
|
||||
}`}
|
||||
style={{ fontFamily: "'Inter', sans-serif" }}
|
||||
>
|
||||
All ({stats.total})
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setActiveTab('yes')}
|
||||
variant={activeTab === 'yes' ? 'default' : 'outline'}
|
||||
className={`rounded-xl ${
|
||||
activeTab === 'yes'
|
||||
? 'bg-[#81B29A] hover:bg-[#6a9a83] text-white'
|
||||
: 'border-[#ddd8eb] text-[#664fa3] hover:bg-[#F8F7FB]'
|
||||
}`}
|
||||
style={{ fontFamily: "'Inter', sans-serif" }}
|
||||
>
|
||||
Yes ({stats.yesCount})
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setActiveTab('no')}
|
||||
variant={activeTab === 'no' ? 'default' : 'outline'}
|
||||
className={`rounded-xl ${
|
||||
activeTab === 'no'
|
||||
? 'bg-[#E07A5F] hover:bg-[#d16b54] text-white'
|
||||
: 'border-[#ddd8eb] text-[#664fa3] hover:bg-[#F8F7FB]'
|
||||
}`}
|
||||
style={{ fontFamily: "'Inter', sans-serif" }}
|
||||
>
|
||||
No ({stats.noCount})
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setActiveTab('maybe')}
|
||||
variant={activeTab === 'maybe' ? 'default' : 'outline'}
|
||||
className={`rounded-xl ${
|
||||
activeTab === 'maybe'
|
||||
? 'bg-[#F2CC8F] hover:bg-[#e8bf7a] text-[#422268]'
|
||||
: 'border-[#ddd8eb] text-[#664fa3] hover:bg-[#F8F7FB]'
|
||||
}`}
|
||||
style={{ fontFamily: "'Inter', sans-serif" }}
|
||||
>
|
||||
Maybe ({stats.maybeCount})
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Search and Bulk Actions */}
|
||||
<div className="flex flex-wrap gap-3 items-center justify-between">
|
||||
<div className="flex-1 min-w-[200px] max-w-md relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#664fa3]" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search by name or email..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-10 border-[#ddd8eb] rounded-xl"
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{selectedRsvps.size > 0 && (
|
||||
<div className="flex gap-2">
|
||||
<Badge className="bg-[#664fa3] text-white px-3 py-1">
|
||||
{selectedRsvps.size} selected
|
||||
</Badge>
|
||||
<Button
|
||||
onClick={() => handleBulkAttendance(true)}
|
||||
disabled={saving}
|
||||
className="bg-[#81B29A] hover:bg-[#6a9a83] text-white rounded-xl"
|
||||
style={{ fontFamily: "'Inter', sans-serif" }}
|
||||
>
|
||||
<Check className="h-4 w-4 mr-1" />
|
||||
Mark Attended
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleBulkAttendance(false)}
|
||||
disabled={saving}
|
||||
className="bg-[#E07A5F] hover:bg-[#d16b54] text-white rounded-xl"
|
||||
style={{ fontFamily: "'Inter', sans-serif" }}
|
||||
>
|
||||
<X className="h-4 w-4 mr-1" />
|
||||
Mark Not Attended
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* RSVP Table */}
|
||||
<Card className="bg-white border-[#ddd8eb] rounded-xl overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-[#F8F7FB] border-b border-[#ddd8eb]">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left">
|
||||
<Checkbox
|
||||
checked={selectAll}
|
||||
onCheckedChange={handleSelectAll}
|
||||
/>
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Name
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Email
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
RSVP Status
|
||||
</th>
|
||||
<th className="px-4 py-3 text-center text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Attendance
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Attended At
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredRsvps.length > 0 ? (
|
||||
filteredRsvps.map((rsvp) => (
|
||||
<tr key={rsvp.user_id} className="border-b border-[#ddd8eb] hover:bg-[#F8F7FB] transition-colors">
|
||||
<td className="px-4 py-3">
|
||||
<Checkbox
|
||||
checked={selectedRsvps.has(rsvp.user_id)}
|
||||
onCheckedChange={() => handleSelectRsvp(rsvp.user_id)}
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-[#422268]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{rsvp.user_name}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{rsvp.user_email}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<Badge
|
||||
className={`${
|
||||
rsvp.rsvp_status === 'yes'
|
||||
? 'bg-[#81B29A]'
|
||||
: rsvp.rsvp_status === 'no'
|
||||
? 'bg-[#E07A5F]'
|
||||
: 'bg-[#F2CC8F] text-[#422268]'
|
||||
} text-white text-xs px-2 py-1`}
|
||||
>
|
||||
{rsvp.rsvp_status.toUpperCase()}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
{rsvp.attended ? (
|
||||
<Button
|
||||
onClick={() => handleIndividualAttendance(rsvp.user_id, false)}
|
||||
disabled={saving}
|
||||
size="sm"
|
||||
className="bg-[#81B29A] hover:bg-[#6a9a83] text-white rounded-lg min-w-[120px]"
|
||||
style={{ fontFamily: "'Inter', sans-serif" }}
|
||||
>
|
||||
<Check className="h-3 w-3 mr-1" />
|
||||
Attended
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
onClick={() => handleIndividualAttendance(rsvp.user_id, true)}
|
||||
disabled={saving}
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="border-[#ddd8eb] text-[#664fa3] hover:bg-[#81B29A] hover:text-white hover:border-[#81B29A] rounded-lg min-w-[120px]"
|
||||
style={{ fontFamily: "'Inter', sans-serif" }}
|
||||
>
|
||||
<X className="h-3 w-3 mr-1" />
|
||||
Not Attended
|
||||
</Button>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{rsvp.attended_at ? moment(rsvp.attended_at).format('MMM D, YYYY h:mm A') : '-'}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan="6" className="px-4 py-12 text-center">
|
||||
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{searchQuery ? 'No RSVPs match your search' : 'No RSVPs for this filter'}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdminEventAttendance;
|
||||
@@ -1,4 +1,5 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import api from '../../utils/api';
|
||||
import { Card } from '../../components/ui/card';
|
||||
@@ -8,16 +9,14 @@ import { Input } from '../../components/ui/input';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '../../components/ui/dialog';
|
||||
import { toast } from 'sonner';
|
||||
import { Calendar, MapPin, Users, Plus, Edit, Trash2, Eye, EyeOff } from 'lucide-react';
|
||||
import { AttendanceDialog } from '../../components/AttendanceDialog';
|
||||
|
||||
const AdminEvents = () => {
|
||||
const navigate = useNavigate();
|
||||
const { hasPermission } = useAuth();
|
||||
const [events, setEvents] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
|
||||
const [editingEvent, setEditingEvent] = useState(null);
|
||||
const [attendanceDialogOpen, setAttendanceDialogOpen] = useState(false);
|
||||
const [selectedEvent, setSelectedEvent] = useState(null);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
title: '',
|
||||
@@ -342,19 +341,16 @@ const AdminEvents = () => {
|
||||
|
||||
{/* Actions */}
|
||||
<div className="space-y-2 pt-4 border-t border-[#ddd8eb]">
|
||||
{/* Mark Attendance Button */}
|
||||
{/* Manage Attendance Button */}
|
||||
<Button
|
||||
onClick={() => {
|
||||
setSelectedEvent(event);
|
||||
setAttendanceDialogOpen(true);
|
||||
}}
|
||||
onClick={() => navigate(`/admin/events/${event.id}/attendance`)}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full border-[#81B29A] text-[#81B29A] hover:bg-[#81B29A] hover:text-white"
|
||||
data-testid={`mark-attendance-${event.id}`}
|
||||
>
|
||||
<Users className="h-4 w-4 mr-2" />
|
||||
Mark Attendance ({event.rsvp_count || 0} RSVPs)
|
||||
Manage Attendance ({event.rsvp_count || 0} RSVPs)
|
||||
</Button>
|
||||
|
||||
{/* Other Actions */}
|
||||
@@ -419,14 +415,6 @@ const AdminEvents = () => {
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Attendance Dialog */}
|
||||
<AttendanceDialog
|
||||
event={selectedEvent}
|
||||
open={attendanceDialogOpen}
|
||||
onOpenChange={setAttendanceDialogOpen}
|
||||
onSuccess={fetchEvents}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import api from '../../utils/api';
|
||||
import { Card } from '../../components/ui/card';
|
||||
import { Button } from '../../components/ui/button';
|
||||
@@ -14,7 +15,7 @@ import {
|
||||
SelectValue,
|
||||
} from '../../components/ui/select';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '../../components/ui/dialog';
|
||||
import { Upload, Trash2, Edit, X, ImageIcon, Calendar, MapPin } from 'lucide-react';
|
||||
import { Upload, Trash2, Edit, X, ImageIcon, Calendar, MapPin, AlertCircle } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import moment from 'moment';
|
||||
|
||||
@@ -179,6 +180,32 @@ const AdminGallery = () => {
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Empty State Message */}
|
||||
{events.length === 0 && (
|
||||
<div className="mt-4 p-4 bg-[#f1eef9] border-2 border-[#DDD8EB] rounded-xl">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertCircle className="h-5 w-5 text-[#664fa3] flex-shrink-0 mt-0.5" />
|
||||
<div className="flex-1">
|
||||
<h4 className="text-sm font-semibold text-[#422268] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
No Events Available
|
||||
</h4>
|
||||
<p className="text-sm text-[#664fa3] mb-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
You need to create an event before uploading gallery images. Events help organize photos by occasion.
|
||||
</p>
|
||||
<Link to="/admin/events">
|
||||
<Button
|
||||
className="bg-[#664fa3] hover:bg-[#422268] text-white rounded-xl text-sm"
|
||||
style={{ fontFamily: "'Inter', sans-serif" }}
|
||||
>
|
||||
<Calendar className="h-4 w-4 mr-2" />
|
||||
Create Your First Event
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedEvent && (
|
||||
<div className="pt-4">
|
||||
<input
|
||||
|
||||
Reference in New Issue
Block a user