490 lines
18 KiB
TypeScript
490 lines
18 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import { useState, useEffect } from "react"
|
||
|
|
import { Button } from "@/components/ui/button"
|
||
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||
|
|
import { Input } from "@/components/ui/input"
|
||
|
|
import { Label } from "@/components/ui/label"
|
||
|
|
import { Textarea } from "@/components/ui/textarea"
|
||
|
|
import { Badge } from "@/components/ui/badge"
|
||
|
|
import { Switch } from "@/components/ui/switch"
|
||
|
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
|
||
|
|
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog"
|
||
|
|
import { Plus, Edit, Trash2, Users, Calendar, Clock, Play, StopCircle, Eye, ArrowLeft } from "lucide-react"
|
||
|
|
import Link from "next/link"
|
||
|
|
import { AuthGuard } from "@/components/auth-guard"
|
||
|
|
import { useAuth } from "@/hooks/use-auth"
|
||
|
|
import apiClient from "@/lib/api-client"
|
||
|
|
import { API_CONFIG } from "@/lib/config"
|
||
|
|
import { useToast } from "@/hooks/use-toast"
|
||
|
|
|
||
|
|
interface VoteEvent {
|
||
|
|
id: string
|
||
|
|
title: string
|
||
|
|
description: string
|
||
|
|
start_date: string
|
||
|
|
end_date: string
|
||
|
|
is_active: boolean
|
||
|
|
is_voting_open: boolean
|
||
|
|
created_at: string
|
||
|
|
updated_at: string
|
||
|
|
candidates?: Candidate[]
|
||
|
|
}
|
||
|
|
|
||
|
|
interface Candidate {
|
||
|
|
id: string
|
||
|
|
vote_event_id: string
|
||
|
|
name: string
|
||
|
|
image_url: string
|
||
|
|
description: string
|
||
|
|
created_at: string
|
||
|
|
updated_at: string
|
||
|
|
}
|
||
|
|
|
||
|
|
interface EventFormData {
|
||
|
|
title: string
|
||
|
|
description: string
|
||
|
|
start_date: string
|
||
|
|
end_date: string
|
||
|
|
is_active: boolean
|
||
|
|
results_open: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
function EventManagementContent() {
|
||
|
|
const { user, logout } = useAuth()
|
||
|
|
const { toast } = useToast()
|
||
|
|
const [events, setEvents] = useState<VoteEvent[]>([])
|
||
|
|
const [loading, setLoading] = useState(true)
|
||
|
|
const [formData, setFormData] = useState<EventFormData>({
|
||
|
|
title: "",
|
||
|
|
description: "",
|
||
|
|
start_date: "",
|
||
|
|
end_date: "",
|
||
|
|
is_active: true,
|
||
|
|
results_open: false
|
||
|
|
})
|
||
|
|
const [editingEvent, setEditingEvent] = useState<VoteEvent | null>(null)
|
||
|
|
const [isDialogOpen, setIsDialogOpen] = useState(false)
|
||
|
|
const [submitting, setSubmitting] = useState(false)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
fetchEvents()
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
const fetchEvents = async () => {
|
||
|
|
try {
|
||
|
|
setLoading(true)
|
||
|
|
const response = await apiClient.get(API_CONFIG.ENDPOINTS.VOTE_EVENTS)
|
||
|
|
if (response.data.success) {
|
||
|
|
setEvents(response.data.data.vote_events || [])
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error fetching events:', error)
|
||
|
|
toast({
|
||
|
|
title: "Error",
|
||
|
|
description: "Failed to fetch vote events",
|
||
|
|
variant: "destructive"
|
||
|
|
})
|
||
|
|
} finally {
|
||
|
|
setLoading(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
||
|
|
e.preventDefault()
|
||
|
|
setSubmitting(true)
|
||
|
|
|
||
|
|
try {
|
||
|
|
if (editingEvent) {
|
||
|
|
// Update existing event - includes is_active field
|
||
|
|
const updatePayload = {
|
||
|
|
title: formData.title,
|
||
|
|
description: formData.description,
|
||
|
|
start_date: new Date(formData.start_date).toISOString(),
|
||
|
|
end_date: new Date(formData.end_date).toISOString(),
|
||
|
|
is_active: formData.is_active,
|
||
|
|
results_open: formData.results_open
|
||
|
|
}
|
||
|
|
|
||
|
|
await apiClient.put(`${API_CONFIG.ENDPOINTS.VOTE_EVENTS}/${editingEvent.id}`, updatePayload)
|
||
|
|
toast({
|
||
|
|
title: "Success",
|
||
|
|
description: "Event updated successfully"
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
// Create new event - different payload structure (no is_active field)
|
||
|
|
const createPayload = {
|
||
|
|
title: formData.title,
|
||
|
|
description: formData.description,
|
||
|
|
start_date: new Date(formData.start_date).toISOString(),
|
||
|
|
end_date: new Date(formData.end_date).toISOString(),
|
||
|
|
results_open: formData.results_open
|
||
|
|
}
|
||
|
|
|
||
|
|
await apiClient.post(API_CONFIG.ENDPOINTS.VOTE_EVENTS, createPayload)
|
||
|
|
toast({
|
||
|
|
title: "Success",
|
||
|
|
description: "Event created successfully"
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
setIsDialogOpen(false)
|
||
|
|
resetForm()
|
||
|
|
fetchEvents()
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error saving event:', error)
|
||
|
|
toast({
|
||
|
|
title: "Error",
|
||
|
|
description: editingEvent ? "Failed to update event" : "Failed to create event",
|
||
|
|
variant: "destructive"
|
||
|
|
})
|
||
|
|
} finally {
|
||
|
|
setSubmitting(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleEdit = (event: VoteEvent) => {
|
||
|
|
setEditingEvent(event)
|
||
|
|
setFormData({
|
||
|
|
title: event.title,
|
||
|
|
description: event.description,
|
||
|
|
start_date: new Date(event.start_date).toISOString().slice(0, 16),
|
||
|
|
end_date: new Date(event.end_date).toISOString().slice(0, 16),
|
||
|
|
is_active: event.is_active,
|
||
|
|
results_open: false // Default to false since this field might not exist in the current event object
|
||
|
|
})
|
||
|
|
setIsDialogOpen(true)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleDelete = async (eventId: string) => {
|
||
|
|
try {
|
||
|
|
await apiClient.delete(`${API_CONFIG.ENDPOINTS.VOTE_EVENTS}/${eventId}`)
|
||
|
|
toast({
|
||
|
|
title: "Success",
|
||
|
|
description: "Event deleted successfully"
|
||
|
|
})
|
||
|
|
fetchEvents()
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error deleting event:', error)
|
||
|
|
toast({
|
||
|
|
title: "Error",
|
||
|
|
description: "Failed to delete event",
|
||
|
|
variant: "destructive"
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const resetForm = () => {
|
||
|
|
setFormData({
|
||
|
|
title: "",
|
||
|
|
description: "",
|
||
|
|
start_date: "",
|
||
|
|
end_date: "",
|
||
|
|
is_active: true,
|
||
|
|
results_open: false
|
||
|
|
})
|
||
|
|
setEditingEvent(null)
|
||
|
|
}
|
||
|
|
|
||
|
|
const getEventStatus = (event: VoteEvent) => {
|
||
|
|
const now = new Date()
|
||
|
|
const start = new Date(event.start_date)
|
||
|
|
const end = new Date(event.end_date)
|
||
|
|
|
||
|
|
if (now < start) return "upcoming"
|
||
|
|
if (now >= start && now <= end) return "active"
|
||
|
|
return "ended"
|
||
|
|
}
|
||
|
|
|
||
|
|
const getStatusBadge = (event: VoteEvent) => {
|
||
|
|
const status = getEventStatus(event)
|
||
|
|
|
||
|
|
if (event.is_voting_open && status === "active") {
|
||
|
|
return (
|
||
|
|
<Badge className="bg-gradient-to-r from-green-500 to-emerald-500 text-white border-0">
|
||
|
|
<Play className="h-3 w-3 mr-1" />
|
||
|
|
Live Voting
|
||
|
|
</Badge>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
switch (status) {
|
||
|
|
case "active":
|
||
|
|
return (
|
||
|
|
<Badge className="bg-orange-100 text-orange-800 border-orange-200">
|
||
|
|
<Clock className="h-3 w-3 mr-1" />
|
||
|
|
Active
|
||
|
|
</Badge>
|
||
|
|
)
|
||
|
|
case "upcoming":
|
||
|
|
return (
|
||
|
|
<Badge className="bg-blue-100 text-blue-800 border-blue-200">
|
||
|
|
<Calendar className="h-3 w-3 mr-1" />
|
||
|
|
Upcoming
|
||
|
|
</Badge>
|
||
|
|
)
|
||
|
|
case "ended":
|
||
|
|
return (
|
||
|
|
<Badge className="bg-gray-100 text-gray-800 border-gray-200">
|
||
|
|
<StopCircle className="h-3 w-3 mr-1" />
|
||
|
|
Ended
|
||
|
|
</Badge>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-gray-50">
|
||
|
|
<header className="bg-white shadow-sm border-b">
|
||
|
|
<div className="container mx-auto px-4 py-4 flex justify-between items-center">
|
||
|
|
<div className="flex items-center gap-4">
|
||
|
|
<Link href="/admin" className="text-gray-600 hover:text-gray-900">
|
||
|
|
<ArrowLeft className="h-6 w-6" />
|
||
|
|
</Link>
|
||
|
|
<img src="/images/meti-logo.png" alt="METI - New & Renewable Energy" className="h-12 w-auto" />
|
||
|
|
<h1 className="text-2xl font-bold text-gray-900">Event Management</h1>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-4">
|
||
|
|
<span className="text-sm text-gray-600">Welcome, {user?.username || 'Admin'}</span>
|
||
|
|
<Button variant="outline" size="sm" onClick={logout}>
|
||
|
|
Logout
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div className="container mx-auto px-4 py-8">
|
||
|
|
{/* Header with Create Button */}
|
||
|
|
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
|
||
|
|
<div>
|
||
|
|
<h2 className="text-3xl font-bold text-gray-900">Vote Events</h2>
|
||
|
|
<p className="text-gray-600 mt-1">Manage voting events and candidates</p>
|
||
|
|
</div>
|
||
|
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||
|
|
<DialogTrigger asChild>
|
||
|
|
<Button
|
||
|
|
onClick={() => {
|
||
|
|
resetForm()
|
||
|
|
setIsDialogOpen(true)
|
||
|
|
}}
|
||
|
|
className="bg-blue-600 hover:bg-blue-700"
|
||
|
|
>
|
||
|
|
<Plus className="h-4 w-4 mr-2" />
|
||
|
|
Create Event
|
||
|
|
</Button>
|
||
|
|
</DialogTrigger>
|
||
|
|
<DialogContent className="sm:max-w-md">
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle>{editingEvent ? 'Edit Event' : 'Create New Event'}</DialogTitle>
|
||
|
|
<DialogDescription>
|
||
|
|
{editingEvent ? 'Update the event details below.' : 'Fill in the details to create a new voting event.'}
|
||
|
|
</DialogDescription>
|
||
|
|
</DialogHeader>
|
||
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="title">Event Title</Label>
|
||
|
|
<Input
|
||
|
|
id="title"
|
||
|
|
value={formData.title}
|
||
|
|
onChange={(e) => setFormData({ ...formData, title: e.target.value })}
|
||
|
|
placeholder="Enter event title"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="description">Description</Label>
|
||
|
|
<Textarea
|
||
|
|
id="description"
|
||
|
|
value={formData.description}
|
||
|
|
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||
|
|
placeholder="Enter event description"
|
||
|
|
rows={3}
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="start_date">Start Date & Time</Label>
|
||
|
|
<Input
|
||
|
|
id="start_date"
|
||
|
|
type="datetime-local"
|
||
|
|
value={formData.start_date}
|
||
|
|
onChange={(e) => setFormData({ ...formData, start_date: e.target.value })}
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="end_date">End Date & Time</Label>
|
||
|
|
<Input
|
||
|
|
id="end_date"
|
||
|
|
type="datetime-local"
|
||
|
|
value={formData.end_date}
|
||
|
|
onChange={(e) => setFormData({ ...formData, end_date: e.target.value })}
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Event Settings */}
|
||
|
|
<div className="space-y-4 pt-2">
|
||
|
|
{/* Only show Active Event toggle when editing */}
|
||
|
|
{editingEvent && (
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div className="space-y-0.5">
|
||
|
|
<Label htmlFor="is_active">Active Event</Label>
|
||
|
|
<p className="text-sm text-gray-500">Event is active and visible to users</p>
|
||
|
|
</div>
|
||
|
|
<Switch
|
||
|
|
id="is_active"
|
||
|
|
checked={formData.is_active}
|
||
|
|
onCheckedChange={(checked) => setFormData({ ...formData, is_active: checked })}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div className="space-y-0.5">
|
||
|
|
<Label htmlFor="results_open">Results Open</Label>
|
||
|
|
<p className="text-sm text-gray-500">Allow viewing of voting results</p>
|
||
|
|
</div>
|
||
|
|
<Switch
|
||
|
|
id="results_open"
|
||
|
|
checked={formData.results_open}
|
||
|
|
onCheckedChange={(checked) => setFormData({ ...formData, results_open: checked })}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex gap-2 pt-4">
|
||
|
|
<Button
|
||
|
|
type="button"
|
||
|
|
variant="outline"
|
||
|
|
onClick={() => setIsDialogOpen(false)}
|
||
|
|
className="flex-1"
|
||
|
|
>
|
||
|
|
Cancel
|
||
|
|
</Button>
|
||
|
|
<Button type="submit" disabled={submitting} className="flex-1">
|
||
|
|
{submitting ? 'Saving...' : editingEvent ? 'Update' : 'Create'}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Events List */}
|
||
|
|
{loading ? (
|
||
|
|
<div className="text-center py-12">
|
||
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
|
||
|
|
<p className="text-gray-600">Loading events...</p>
|
||
|
|
</div>
|
||
|
|
) : events.length > 0 ? (
|
||
|
|
<div className="grid gap-6">
|
||
|
|
{events.map((event) => (
|
||
|
|
<Card key={event.id} className="hover:shadow-lg transition-shadow">
|
||
|
|
<CardHeader>
|
||
|
|
<div className="flex flex-col sm:flex-row justify-between items-start gap-4">
|
||
|
|
<div className="flex-1">
|
||
|
|
<div className="flex items-start gap-3 mb-2">
|
||
|
|
<CardTitle className="text-xl">{event.title}</CardTitle>
|
||
|
|
{getStatusBadge(event)}
|
||
|
|
</div>
|
||
|
|
<CardDescription className="text-base">
|
||
|
|
{event.description}
|
||
|
|
</CardDescription>
|
||
|
|
</div>
|
||
|
|
<div className="flex gap-2">
|
||
|
|
<Link href={`/admin/events/${event.id}/candidates`}>
|
||
|
|
<Button variant="outline" size="sm">
|
||
|
|
<Users className="h-4 w-4 mr-2" />
|
||
|
|
Candidates
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
<Button variant="outline" size="sm" onClick={() => handleEdit(event)}>
|
||
|
|
<Edit className="h-4 w-4 mr-2" />
|
||
|
|
Edit
|
||
|
|
</Button>
|
||
|
|
<AlertDialog>
|
||
|
|
<AlertDialogTrigger asChild>
|
||
|
|
<Button variant="outline" size="sm" className="text-red-600 hover:text-red-700">
|
||
|
|
<Trash2 className="h-4 w-4 mr-2" />
|
||
|
|
Delete
|
||
|
|
</Button>
|
||
|
|
</AlertDialogTrigger>
|
||
|
|
<AlertDialogContent>
|
||
|
|
<AlertDialogHeader>
|
||
|
|
<AlertDialogTitle>Delete Event</AlertDialogTitle>
|
||
|
|
<AlertDialogDescription>
|
||
|
|
Are you sure you want to delete "{event.title}"? This action cannot be undone.
|
||
|
|
</AlertDialogDescription>
|
||
|
|
</AlertDialogHeader>
|
||
|
|
<AlertDialogFooter>
|
||
|
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||
|
|
<AlertDialogAction onClick={() => handleDelete(event.id)}>
|
||
|
|
Delete
|
||
|
|
</AlertDialogAction>
|
||
|
|
</AlertDialogFooter>
|
||
|
|
</AlertDialogContent>
|
||
|
|
</AlertDialog>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<div className="grid sm:grid-cols-2 gap-4 text-sm">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Calendar className="h-4 w-4 text-blue-600" />
|
||
|
|
<span className="text-gray-600">Start:</span>
|
||
|
|
<span className="font-medium">
|
||
|
|
{new Date(event.start_date).toLocaleDateString('id-ID', {
|
||
|
|
weekday: 'short',
|
||
|
|
year: 'numeric',
|
||
|
|
month: 'short',
|
||
|
|
day: 'numeric',
|
||
|
|
hour: '2-digit',
|
||
|
|
minute: '2-digit'
|
||
|
|
})}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Calendar className="h-4 w-4 text-red-600" />
|
||
|
|
<span className="text-gray-600">End:</span>
|
||
|
|
<span className="font-medium">
|
||
|
|
{new Date(event.end_date).toLocaleDateString('id-ID', {
|
||
|
|
weekday: 'short',
|
||
|
|
year: 'numeric',
|
||
|
|
month: 'short',
|
||
|
|
day: 'numeric',
|
||
|
|
hour: '2-digit',
|
||
|
|
minute: '2-digit'
|
||
|
|
})}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<Card>
|
||
|
|
<CardContent className="text-center py-12">
|
||
|
|
<Calendar className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
||
|
|
<h3 className="text-lg font-medium mb-2">No Events Found</h3>
|
||
|
|
<p className="text-gray-600 mb-4">Create your first voting event to get started.</p>
|
||
|
|
<Button onClick={() => setIsDialogOpen(true)}>
|
||
|
|
<Plus className="h-4 w-4 mr-2" />
|
||
|
|
Create Event
|
||
|
|
</Button>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function EventManagementPage() {
|
||
|
|
return (
|
||
|
|
<AuthGuard requiredRole="superadmin">
|
||
|
|
<EventManagementContent />
|
||
|
|
</AuthGuard>
|
||
|
|
)
|
||
|
|
}
|