feat: add reservation system for public and private events
- Add private_event_reservations table with contact info fields - Add status column to social_event_reservations (pending/confirmed/cancelled) - Create /api/private-event-reservations CRUD endpoints - Update social_event_reservations API to support guest submissions - Add Reservations tab to Public Events admin section - Add full reservation management UI for Private Events - Support filtering by status (pending/confirmed/cancelled/all) - Allow confirm/cancel/reactivate/delete actions
This commit is contained in:
+206
-20
@@ -767,6 +767,44 @@ function CalendarEditor({ event, setEvent, onSave, onCancel }: any) {
|
||||
function SocialSection({ events, setEvents, images, onToast }: any) {
|
||||
const [editing, setEditing] = useState<SocialEvent | null>(null);
|
||||
const [confirmDel, setConfirmDel] = useState<number | null>(null);
|
||||
const [tab, setTab] = useState<'events' | 'reservations'>('events');
|
||||
const [reservations, setReservations] = useState<any[]>([]);
|
||||
const [statusFilter, setStatusFilter] = useState<'pending' | 'confirmed' | 'cancelled' | 'all'>('pending');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (tab === 'reservations') loadReservations();
|
||||
}, [tab, statusFilter]);
|
||||
|
||||
const loadReservations = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const url = statusFilter === 'all' ? '/api/social_event_reservations' : `/api/social_event_reservations?status=${statusFilter}`;
|
||||
const res = await fetch(url);
|
||||
const data = await res.json();
|
||||
setReservations(data.data || []);
|
||||
} catch { onToast('Error loading reservations', 'error'); }
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const updateStatus = async (id: number, status: 'confirmed' | 'cancelled') => {
|
||||
try {
|
||||
await fetch(`/api/social_event_reservations/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ status }),
|
||||
});
|
||||
setReservations(r => r.map(x => x.id === id ? { ...x, status } : x));
|
||||
onToast(`Reservation ${status}`, 'success');
|
||||
} catch { onToast('Error updating reservation', 'error'); }
|
||||
};
|
||||
|
||||
const delReservation = async (id: number) => {
|
||||
await fetch(`/api/social_event_reservations/${id}`, { method: 'DELETE' });
|
||||
setReservations(r => r.filter(x => x.id !== id));
|
||||
onToast('Reservation deleted', 'success');
|
||||
setConfirmDel(null);
|
||||
};
|
||||
|
||||
const save = async (ev: SocialEvent) => {
|
||||
try {
|
||||
@@ -792,27 +830,88 @@ function SocialSection({ events, setEvents, images, onToast }: any) {
|
||||
setConfirmDel(null);
|
||||
};
|
||||
|
||||
const formatDate = (d: string | null) => d ? new Date(d).toLocaleDateString() : '-';
|
||||
const contactMethodIcon = (m: string) => m === 'email' ? '✉️' : m === 'whatsapp' ? '📱' : '📞';
|
||||
|
||||
return (
|
||||
<div>
|
||||
<SecHead title="🎪 Public Events" count={events.length}
|
||||
action={<Btn onClick={() => setEditing({ id: 0, name: '', description: '', price: null, date: null, photos: [], featured_photo: null, active: true, sort_order: events.length })} size="sm">+ New Event</Btn>} />
|
||||
{events.length === 0 ? <Empty icon="🎪" title="No public events" /> : (
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '16px' }}>
|
||||
{events.map((ev: SocialEvent) => (
|
||||
<EntityCard key={ev.id} title={ev.name} desc={ev.description || ''} meta={`${ev.price || 'Free'}${ev.date ? ' • ' + ev.date : ''}`}
|
||||
thumb={ev.featured_photo || ev.photos?.[0]}
|
||||
photoUrls={ev.photos}
|
||||
actions={
|
||||
<>
|
||||
<Btn size="sm" variant="secondary" onClick={() => setEditing(ev)}>Edit</Btn>
|
||||
<Btn size="sm" variant="danger" onClick={() => setConfirmDel(ev.id)}>Del</Btn>
|
||||
</>
|
||||
} />
|
||||
))}
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '12px', marginBottom: '16px', borderBottom: '1px solid #e5e7eb', paddingBottom: '12px' }}>
|
||||
<Btn size="sm" variant={tab === 'events' ? 'primary' : 'secondary'} onClick={() => setTab('events')}>🎪 Events</Btn>
|
||||
<Btn size="sm" variant={tab === 'reservations' ? 'primary' : 'secondary'} onClick={() => setTab('reservations')}>📅 Reservations</Btn>
|
||||
</div>
|
||||
|
||||
{tab === 'events' ? (
|
||||
<>
|
||||
<SecHead title="🎪 Public Events" count={events.length}
|
||||
action={<Btn onClick={() => setEditing({ id: 0, name: '', description: '', price: null, date: null, photos: [], featured_photo: null, active: true, sort_order: events.length })} size="sm">+ New Event</Btn>} />
|
||||
{events.length === 0 ? <Empty icon="🎪" title="No public events" /> : (
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '16px' }}>
|
||||
{events.map((ev: SocialEvent) => (
|
||||
<EntityCard key={ev.id} title={ev.name} desc={ev.description || ''} meta={`${ev.price || 'Free'}${ev.date ? ' • ' + ev.date : ''}`}
|
||||
thumb={ev.featured_photo || ev.photos?.[0]}
|
||||
photoUrls={ev.photos}
|
||||
actions={
|
||||
<>
|
||||
<Btn size="sm" variant="secondary" onClick={() => setEditing(ev)}>Edit</Btn>
|
||||
<Btn size="sm" variant="danger" onClick={() => setConfirmDel(ev.id)}>Del</Btn>
|
||||
</>
|
||||
} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{editing && <SocialEditor event={editing} setEvent={setEditing} images={images} onSave={save} onCancel={() => setEditing(null)} />}
|
||||
{confirmDel !== null && <Confirm message="Delete this event?" onCancel={() => setConfirmDel(null)} onConfirm={() => del(confirmDel)} />}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<SecHead title="📅 Public Event Reservations" count={reservations.length} />
|
||||
<div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
|
||||
{(['pending', 'confirmed', 'cancelled', 'all'] as const).map(s => (
|
||||
<Btn key={s} size="sm" variant={statusFilter === s ? 'primary' : 'secondary'} onClick={() => setStatusFilter(s)}>
|
||||
{s.charAt(0).toUpperCase() + s.slice(1)}
|
||||
</Btn>
|
||||
))}
|
||||
</div>
|
||||
{loading ? <Empty icon="⏳" title="Loading..." /> : reservations.length === 0 ? <Empty icon="📅" title="No reservations" desc={`No ${statusFilter === 'all' ? '' : statusFilter} reservations`} /> : (
|
||||
<div style={{ display: 'grid', gap: '12px' }}>
|
||||
{reservations.map((r: any) => (
|
||||
<div key={r.id} style={{ background: '#fff', borderRadius: 12, padding: '16px', border: `1px solid ${r.status === 'pending' ? '#f59e0b' : r.status === 'confirmed' ? '#10b981' : '#ef4444'}` }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '12px' }}>
|
||||
<div>
|
||||
<div style={{ fontWeight: 600, fontSize: '16px', color: C.navy }}>{r.event_name}</div>
|
||||
<div style={{ fontSize: '13px', color: '#666', marginTop: '4px' }}>{r.guests} guests</div>
|
||||
</div>
|
||||
<span style={{
|
||||
padding: '4px 10px', borderRadius: 12, fontSize: '12px', fontWeight: 600,
|
||||
background: r.status === 'confirmed' ? '#d1fae5' : r.status === 'cancelled' ? '#fee2e2' : '#fef3c7',
|
||||
color: r.status === 'confirmed' ? '#047857' : r.status === 'cancelled' ? '#b91c1c' : '#b45309'
|
||||
}}>{r.status}</span>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px', fontSize: '13px', marginBottom: '12px' }}>
|
||||
<div><strong>Contact:</strong> {r.contact_name || r.first_name || r.username || '-'}</div>
|
||||
<div><strong>Method:</strong> {r.contact_method ? contactMethodIcon(r.contact_method) : '-'} {r.contact_method || '-'}</div>
|
||||
{r.contact_email && <div><strong>Email:</strong> {r.contact_email}</div>}
|
||||
{r.contact_phone && <div><strong>Phone:</strong> {r.contact_phone}</div>}
|
||||
</div>
|
||||
{r.notes && <div style={{ fontSize: '13px', color: '#666', marginBottom: '12px', fontStyle: 'italic' }}>"{r.notes}"</div>}
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
{r.status === 'pending' && (
|
||||
<>
|
||||
<Btn size="sm" variant="secondary" onClick={() => updateStatus(r.id, 'confirmed')}>✓ Confirm</Btn>
|
||||
<Btn size="sm" variant="danger" onClick={() => updateStatus(r.id, 'cancelled')}>✗ Cancel</Btn>
|
||||
</>
|
||||
)}
|
||||
{r.status === 'confirmed' && <Btn size="sm" variant="danger" onClick={() => updateStatus(r.id, 'cancelled')}>✗ Cancel</Btn>}
|
||||
{r.status === 'cancelled' && <Btn size="sm" variant="secondary" onClick={() => updateStatus(r.id, 'confirmed')}>✓ Reactivate</Btn>}
|
||||
<Btn size="sm" variant="danger" onClick={() => setConfirmDel(r.id)}>🗑 Delete</Btn>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{confirmDel !== null && <Confirm message="Delete this reservation?" onCancel={() => setConfirmDel(null)} onConfirm={() => delReservation(confirmDel)} />}
|
||||
</>
|
||||
)}
|
||||
{editing && <SocialEditor event={editing} setEvent={setEditing} images={images} onSave={save} onCancel={() => setEditing(null)} />}
|
||||
{confirmDel !== null && <Confirm message="Delete this event?" onCancel={() => setConfirmDel(null)} onConfirm={() => del(confirmDel)} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -877,10 +976,97 @@ function SocialEditor({ event, setEvent, images, onSave, onCancel }: any) {
|
||||
|
||||
/* ─── Rooms Section ─── */
|
||||
function PrivateEventsSection({ onToast }: { onToast: (msg: string, type: 'success' | 'error') => void }) {
|
||||
const [reservations, setReservations] = useState<any[]>([]);
|
||||
const [statusFilter, setStatusFilter] = useState<'pending' | 'confirmed' | 'cancelled' | 'all'>('pending');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [confirmDel, setConfirmDel] = useState<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadReservations();
|
||||
}, [statusFilter]);
|
||||
|
||||
const loadReservations = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const url = statusFilter === 'all' ? '/api/private-event-reservations' : `/api/private-event-reservations?status=${statusFilter}`;
|
||||
const res = await fetch(url);
|
||||
const data = await res.json();
|
||||
setReservations(data.data || []);
|
||||
} catch { onToast('Error loading reservations', 'error'); }
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const updateStatus = async (id: number, status: 'confirmed' | 'cancelled') => {
|
||||
try {
|
||||
await fetch(`/api/private-event-reservations/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ status }),
|
||||
});
|
||||
setReservations(r => r.map(x => x.id === id ? { ...x, status } : x));
|
||||
onToast(`Reservation ${status}`, 'success');
|
||||
} catch { onToast('Error updating reservation', 'error'); }
|
||||
};
|
||||
|
||||
const del = async (id: number) => {
|
||||
await fetch(`/api/private-event-reservations/${id}`, { method: 'DELETE' });
|
||||
setReservations(r => r.filter(x => x.id !== id));
|
||||
onToast('Reservation deleted', 'success');
|
||||
setConfirmDel(null);
|
||||
};
|
||||
|
||||
const formatDate = (d: string | null) => d ? new Date(d).toLocaleDateString() : '-';
|
||||
const formatTime = (t: string | null) => t || '-';
|
||||
const contactMethodIcon = (m: string) => m === 'email' ? '✉️' : m === 'whatsapp' ? '📱' : '📞';
|
||||
|
||||
return (
|
||||
<div>
|
||||
<SecHead title="🔒 Private Events" count={0} />
|
||||
<Empty icon="🔒" title="Private Events" desc="Manage private event inquiries and bookings here. Contact form submissions for private events will appear in this section." />
|
||||
<SecHead title="🔒 Private Event Reservations" count={reservations.length} />
|
||||
<div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
|
||||
{(['pending', 'confirmed', 'cancelled', 'all'] as const).map(s => (
|
||||
<Btn key={s} size="sm" variant={statusFilter === s ? 'primary' : 'secondary'} onClick={() => setStatusFilter(s)}>
|
||||
{s.charAt(0).toUpperCase() + s.slice(1)}
|
||||
</Btn>
|
||||
))}
|
||||
</div>
|
||||
{loading ? <Empty icon="⏳" title="Loading..." /> : reservations.length === 0 ? <Empty icon="🔒" title="No reservations" desc={`No ${statusFilter === 'all' ? '' : statusFilter} reservations`} /> : (
|
||||
<div style={{ display: 'grid', gap: '12px' }}>
|
||||
{reservations.map((r: any) => (
|
||||
<div key={r.id} style={{ background: '#fff', borderRadius: 12, padding: '16px', border: `1px solid ${r.status === 'pending' ? '#f59e0b' : r.status === 'confirmed' ? '#10b981' : '#ef4444'}` }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '12px' }}>
|
||||
<div>
|
||||
<div style={{ fontWeight: 600, fontSize: '16px', color: C.navy }}>{r.event_name}</div>
|
||||
<div style={{ fontSize: '13px', color: '#666', marginTop: '4px' }}>{r.guests} guests • {formatDate(r.event_date)} • {formatTime(r.event_time)}</div>
|
||||
</div>
|
||||
<span style={{
|
||||
padding: '4px 10px', borderRadius: 12, fontSize: '12px', fontWeight: 600,
|
||||
background: r.status === 'confirmed' ? '#d1fae5' : r.status === 'cancelled' ? '#fee2e2' : '#fef3c7',
|
||||
color: r.status === 'confirmed' ? '#047857' : r.status === 'cancelled' ? '#b91c1c' : '#b45309'
|
||||
}}>{r.status}</span>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px', fontSize: '13px', marginBottom: '12px' }}>
|
||||
<div><strong>Contact:</strong> {r.contact_name}</div>
|
||||
<div><strong>Method:</strong> {contactMethodIcon(r.contact_method)} {r.contact_method}</div>
|
||||
{r.contact_email && <div><strong>Email:</strong> {r.contact_email}</div>}
|
||||
{r.contact_phone && <div><strong>Phone:</strong> {r.contact_phone}</div>}
|
||||
</div>
|
||||
{r.notes && <div style={{ fontSize: '13px', color: '#666', marginBottom: '12px', fontStyle: 'italic' }}>"{r.notes}"</div>}
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
{r.status === 'pending' && (
|
||||
<>
|
||||
<Btn size="sm" variant="secondary" onClick={() => updateStatus(r.id, 'confirmed')}>✓ Confirm</Btn>
|
||||
<Btn size="sm" variant="danger" onClick={() => updateStatus(r.id, 'cancelled')}>✗ Cancel</Btn>
|
||||
</>
|
||||
)}
|
||||
{r.status === 'confirmed' && <Btn size="sm" variant="danger" onClick={() => updateStatus(r.id, 'cancelled')}>✗ Cancel</Btn>}
|
||||
{r.status === 'cancelled' && <Btn size="sm" variant="secondary" onClick={() => updateStatus(r.id, 'confirmed')}>✓ Reactivate</Btn>}
|
||||
<Btn size="sm" variant="danger" onClick={() => setConfirmDel(r.id)}>🗑 Delete</Btn>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{confirmDel !== null && <Confirm message="Delete this reservation?" onCancel={() => setConfirmDel(null)} onConfirm={() => del(confirmDel)} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user