272 lines
11 KiB
TypeScript
272 lines
11 KiB
TypeScript
import { API_BASE_URL } from '../../lib/config';
|
|
import React, { useState, useEffect } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import {
|
|
Plus,
|
|
Trash2,
|
|
Building2,
|
|
Edit,
|
|
Save,
|
|
CheckCircle2
|
|
} from 'lucide-react';
|
|
import { useDialog } from '../../context/DialogContext';
|
|
|
|
export const VenueManagement: React.FC = () => {
|
|
const { showAlert, showConfirm } = useDialog();
|
|
const [venues, setVenues] = useState<any[]>([]);
|
|
const [newVenueName, setNewVenueName] = useState('');
|
|
const [newVenueCapacity, setNewVenueCapacity] = useState('');
|
|
const [editingVenueId, setEditingVenueId] = useState<string | null>(null);
|
|
const [editVenueName, setEditVenueName] = useState('');
|
|
const [editVenueCapacity, setEditVenueCapacity] = useState('');
|
|
|
|
useEffect(() => {
|
|
fetchVenues();
|
|
}, []);
|
|
|
|
const fetchVenues = async () => {
|
|
try {
|
|
const response = await fetch(API_BASE_URL + '/api/venues');
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setVenues(data);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch venues:', error);
|
|
}
|
|
};
|
|
|
|
const handleCreateVenue = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!newVenueName.trim()) {
|
|
showAlert('Required', 'Please enter a venue name', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const capacityVal = newVenueCapacity.trim() ? Number(newVenueCapacity) : null;
|
|
const response = await fetch(API_BASE_URL + '/api/venues', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
name: newVenueName.trim(),
|
|
capacity: capacityVal
|
|
})
|
|
});
|
|
|
|
if (response.ok) {
|
|
fetchVenues();
|
|
setNewVenueName('');
|
|
setNewVenueCapacity('');
|
|
showAlert('Success', 'Venue added successfully.', 'success');
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to add venue:', error);
|
|
showAlert('Error', 'Failed to add venue.', 'error');
|
|
}
|
|
};
|
|
|
|
const handleStartEditVenue = (venue: any) => {
|
|
setEditingVenueId(venue.id);
|
|
setEditVenueName(venue.name);
|
|
setEditVenueCapacity(venue.capacity !== null && venue.capacity !== undefined ? String(venue.capacity) : '');
|
|
};
|
|
|
|
const handleSaveVenueEdit = async (venueId: string) => {
|
|
if (!editVenueName.trim()) {
|
|
showAlert('Required', 'Venue name cannot be empty', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const capacityVal = editVenueCapacity.trim() ? Number(editVenueCapacity) : null;
|
|
const response = await fetch(API_BASE_URL + '/api/venues', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
id: venueId,
|
|
name: editVenueName.trim(),
|
|
capacity: capacityVal
|
|
})
|
|
});
|
|
|
|
if (response.ok) {
|
|
fetchVenues();
|
|
setEditingVenueId(null);
|
|
showAlert('Success', 'Venue updated successfully.', 'success');
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to update venue:', error);
|
|
showAlert('Error', 'Failed to update venue.', 'error');
|
|
}
|
|
};
|
|
|
|
const handleDeleteVenue = async (venueId: string) => {
|
|
showConfirm(
|
|
'Delete Venue',
|
|
'Are you sure you want to delete this venue? This cannot be undone.',
|
|
async () => {
|
|
try {
|
|
const response = await fetch(`${API_BASE_URL}/api/venues/${venueId}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (response.ok) {
|
|
fetchVenues();
|
|
showAlert('Success', 'Venue deleted successfully.', 'success');
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to delete venue:', error);
|
|
showAlert('Error', 'Failed to delete venue.', 'error');
|
|
}
|
|
}
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-10">
|
|
{/* Header */}
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
|
|
<div>
|
|
<h1 className="text-4xl font-black text-text-dark tracking-tight mb-1">Venue Management</h1>
|
|
<p className="text-text-muted font-black uppercase tracking-widest text-[10px]">Configure college venues, halls, and seating capacities</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 bg-brand-glow rounded-2xl flex items-center justify-center text-brand-indigo premium-shadow">
|
|
<Building2 className="w-6 h-6" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Manage Venues Section */}
|
|
<div className="bg-white rounded-[2.5rem] border border-slate-100 premium-shadow p-8 space-y-6">
|
|
<div className="flex flex-col lg:flex-row lg:items-center justify-between border-b border-slate-50 pb-6 gap-6">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-10 h-10 bg-brand-indigo rounded-xl flex items-center justify-center text-white">
|
|
<Building2 className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-black text-text-dark tracking-tight">Registered Venues</h3>
|
|
<p className="text-xs text-text-muted font-bold">Configure college venues, halls, and seating capacities.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form onSubmit={handleCreateVenue} className="flex flex-wrap items-center gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="text"
|
|
placeholder="Venue Name (e.g. Mini Seminar Hall)"
|
|
value={newVenueName}
|
|
onChange={e => setNewVenueName(e.target.value)}
|
|
className="bg-slate-50 border border-slate-200 rounded-xl py-2 px-4 text-xs font-bold focus:bg-white focus:border-brand-indigo outline-none transition-all text-slate-800"
|
|
required
|
|
/>
|
|
<input
|
|
type="number"
|
|
placeholder="Capacity (e.g. 120)"
|
|
value={newVenueCapacity}
|
|
onChange={e => setNewVenueCapacity(e.target.value)}
|
|
className="bg-slate-50 border border-slate-200 rounded-xl py-2 px-4 text-xs font-bold focus:bg-white focus:border-brand-indigo outline-none transition-all text-slate-800 w-32"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="px-4 py-2 bg-brand-indigo text-white rounded-xl font-black text-[10px] uppercase tracking-widest hover:scale-[1.02] active:scale-[0.98] transition-all flex items-center gap-1.5"
|
|
>
|
|
<Plus className="w-3.5 h-3.5" />
|
|
Add Venue
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
|
{venues.map(venue => (
|
|
<div key={venue.id} className="bg-slate-50 p-6 rounded-3xl border border-slate-100 flex flex-col justify-between gap-4">
|
|
{editingVenueId === venue.id ? (
|
|
<div className="space-y-3 w-full">
|
|
<div className="space-y-1">
|
|
<label className="text-[8px] font-black text-slate-400 uppercase tracking-widest">Venue Name</label>
|
|
<input
|
|
type="text"
|
|
value={editVenueName}
|
|
onChange={e => setEditVenueName(e.target.value)}
|
|
className="w-full bg-white border border-slate-200 rounded-xl py-1.5 px-3 text-xs font-bold focus:border-brand-indigo outline-none transition-all"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<label className="text-[8px] font-black text-slate-400 uppercase tracking-widest">Seating Capacity</label>
|
|
<input
|
|
type="number"
|
|
value={editVenueCapacity}
|
|
onChange={e => setEditVenueCapacity(e.target.value)}
|
|
className="w-full bg-white border border-slate-200 rounded-xl py-1.5 px-3 text-xs font-bold focus:border-brand-indigo outline-none transition-all"
|
|
placeholder="Unlimited / Custom"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2 pt-2">
|
|
<button
|
|
onClick={() => handleSaveVenueEdit(venue.id)}
|
|
className="flex-1 py-2 bg-emerald-500 hover:bg-emerald-600 text-white rounded-lg font-black text-[9px] uppercase tracking-wider transition-all flex items-center justify-center gap-1"
|
|
>
|
|
<Save className="w-3.5 h-3.5" />
|
|
Save
|
|
</button>
|
|
<button
|
|
onClick={() => setEditingVenueId(null)}
|
|
className="flex-1 py-2 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-lg font-black text-[9px] uppercase tracking-wider transition-all"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-xl bg-white border border-slate-200 flex items-center justify-center text-brand-indigo shadow-sm shrink-0">
|
|
<Building2 className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-black text-brand-navy tracking-tight line-clamp-2" title={venue.name}>
|
|
{venue.name}
|
|
</h4>
|
|
<span className="text-[9px] font-black uppercase tracking-widest text-slate-400">
|
|
{venue.capacity ? `Capacity: ${venue.capacity} seats` : 'No Limit / Custom'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-end gap-2 border-t border-slate-200/50 pt-3">
|
|
<button
|
|
onClick={() => handleStartEditVenue(venue)}
|
|
className="p-2 bg-white border border-slate-200 rounded-lg text-slate-400 hover:text-brand-indigo hover:border-brand-indigo transition-all"
|
|
title="Edit Venue"
|
|
>
|
|
<Edit className="w-3.5 h-3.5" />
|
|
</button>
|
|
<button
|
|
onClick={() => handleDeleteVenue(venue.id)}
|
|
className="p-2 bg-white border border-slate-200 rounded-lg text-slate-400 hover:text-status-danger hover:border-status-danger transition-all"
|
|
title="Delete Venue"
|
|
>
|
|
<Trash2 className="w-3.5 h-3.5" />
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
))}
|
|
{venues.length === 0 && (
|
|
<div className="col-span-full py-12 text-center text-slate-400 font-bold uppercase tracking-wider text-xs border-2 border-dashed border-slate-200 rounded-[2rem]">
|
|
No venues registered. Use the form above to add a new venue.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|