Add dockre file
This commit is contained in:
Aditya Siregar
@@ -0,0 +1,513 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { useParams } from "next/navigation"
|
||||
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 { 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, ArrowLeft, User, Upload, X } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import Image from "next/image"
|
||||
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
|
||||
}
|
||||
|
||||
interface Candidate {
|
||||
id: string
|
||||
vote_event_id: string
|
||||
name: string
|
||||
image_url: string
|
||||
description: string
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
interface CandidateFormData {
|
||||
name: string
|
||||
description: string
|
||||
image_url: string
|
||||
}
|
||||
|
||||
function CandidateManagementContent() {
|
||||
const { user, logout } = useAuth()
|
||||
const { toast } = useToast()
|
||||
const params = useParams()
|
||||
const eventId = params.eventId as string
|
||||
|
||||
const [event, setEvent] = useState<VoteEvent | null>(null)
|
||||
const [candidates, setCandidates] = useState<Candidate[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [formData, setFormData] = useState<CandidateFormData>({
|
||||
name: "",
|
||||
description: "",
|
||||
image_url: ""
|
||||
})
|
||||
const [editingCandidate, setEditingCandidate] = useState<Candidate | null>(null)
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [uploadingImage, setUploadingImage] = useState(false)
|
||||
const [imageFile, setImageFile] = useState<File | null>(null)
|
||||
const [imagePreview, setImagePreview] = useState<string>("")
|
||||
|
||||
useEffect(() => {
|
||||
if (eventId) {
|
||||
fetchEventDetails()
|
||||
fetchCandidates()
|
||||
}
|
||||
}, [eventId])
|
||||
|
||||
const fetchEventDetails = async () => {
|
||||
try {
|
||||
const response = await apiClient.get(`${API_CONFIG.ENDPOINTS.VOTE_EVENTS}/${eventId}`)
|
||||
if (response.data.success) {
|
||||
setEvent(response.data.data)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching event details:', error)
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to fetch event details",
|
||||
variant: "destructive"
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const fetchCandidates = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await apiClient.get(`${API_CONFIG.ENDPOINTS.VOTE_EVENTS}/${eventId}/candidates`)
|
||||
if (response.data.success) {
|
||||
setCandidates(response.data.data.candidates || [])
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching candidates:', error)
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to fetch candidates",
|
||||
variant: "destructive"
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0]
|
||||
if (file) {
|
||||
// Validate file type
|
||||
const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp']
|
||||
if (!validTypes.includes(file.type)) {
|
||||
toast({
|
||||
title: "Invalid File Type",
|
||||
description: "Please select a valid image file (JPEG, PNG, GIF, WebP)",
|
||||
variant: "destructive"
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// Validate file size (max 5MB)
|
||||
const maxSize = 5 * 1024 * 1024 // 5MB
|
||||
if (file.size > maxSize) {
|
||||
toast({
|
||||
title: "File Too Large",
|
||||
description: "Please select an image smaller than 5MB",
|
||||
variant: "destructive"
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
setImageFile(file)
|
||||
const reader = new FileReader()
|
||||
reader.onloadend = () => {
|
||||
setImagePreview(reader.result as string)
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
}
|
||||
|
||||
const uploadImage = async (file: File): Promise<string> => {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
formData.append('type', file.type)
|
||||
|
||||
try {
|
||||
const response = await apiClient.post(API_CONFIG.ENDPOINTS.FILES, formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
|
||||
if (response.data.success) {
|
||||
return response.data.data.url
|
||||
} else {
|
||||
throw new Error('Upload failed')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error uploading image:', error)
|
||||
throw new Error('Failed to upload image')
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setSubmitting(true)
|
||||
|
||||
try {
|
||||
let imageUrl = formData.image_url
|
||||
|
||||
// Upload new image if selected
|
||||
if (imageFile) {
|
||||
setUploadingImage(true)
|
||||
try {
|
||||
imageUrl = await uploadImage(imageFile)
|
||||
} catch (uploadError) {
|
||||
setUploadingImage(false)
|
||||
throw uploadError
|
||||
}
|
||||
setUploadingImage(false)
|
||||
}
|
||||
|
||||
const payload = {
|
||||
vote_event_id: eventId,
|
||||
name: formData.name,
|
||||
image_url: imageUrl,
|
||||
description: formData.description
|
||||
}
|
||||
|
||||
if (editingCandidate) {
|
||||
// Update existing candidate
|
||||
await apiClient.put(`${API_CONFIG.ENDPOINTS.CANDIDATES}/${editingCandidate.id}`, payload)
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Candidate updated successfully"
|
||||
})
|
||||
} else {
|
||||
// Create new candidate
|
||||
await apiClient.post(API_CONFIG.ENDPOINTS.CANDIDATES, payload)
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Candidate created successfully"
|
||||
})
|
||||
}
|
||||
|
||||
setIsDialogOpen(false)
|
||||
resetForm()
|
||||
fetchCandidates()
|
||||
} catch (error) {
|
||||
console.error('Error saving candidate:', error)
|
||||
toast({
|
||||
title: "Error",
|
||||
description: editingCandidate ? "Failed to update candidate" : "Failed to create candidate",
|
||||
variant: "destructive"
|
||||
})
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleEdit = (candidate: Candidate) => {
|
||||
setEditingCandidate(candidate)
|
||||
setFormData({
|
||||
name: candidate.name,
|
||||
description: candidate.description,
|
||||
image_url: candidate.image_url
|
||||
})
|
||||
setImagePreview(candidate.image_url)
|
||||
setIsDialogOpen(true)
|
||||
}
|
||||
|
||||
const handleDelete = async (candidateId: string) => {
|
||||
try {
|
||||
await apiClient.delete(`${API_CONFIG.ENDPOINTS.CANDIDATES}/${candidateId}`)
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Candidate deleted successfully"
|
||||
})
|
||||
fetchCandidates()
|
||||
} catch (error) {
|
||||
console.error('Error deleting candidate:', error)
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to delete candidate",
|
||||
variant: "destructive"
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
setFormData({
|
||||
name: "",
|
||||
description: "",
|
||||
image_url: ""
|
||||
})
|
||||
setEditingCandidate(null)
|
||||
setImageFile(null)
|
||||
setImagePreview("")
|
||||
setUploadingImage(false)
|
||||
}
|
||||
|
||||
const removeImage = () => {
|
||||
setImageFile(null)
|
||||
setImagePreview("")
|
||||
setFormData({ ...formData, image_url: "" })
|
||||
}
|
||||
|
||||
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/events" 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" />
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Candidate Management</h1>
|
||||
{event && (
|
||||
<p className="text-sm text-gray-600">{event.title}</p>
|
||||
)}
|
||||
</div>
|
||||
</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">Candidates</h2>
|
||||
<p className="text-gray-600 mt-1">Manage candidates for this voting event</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" />
|
||||
Add Candidate
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editingCandidate ? 'Edit Candidate' : 'Add New Candidate'}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{editingCandidate ? 'Update the candidate details below.' : 'Fill in the details to add a new candidate.'}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="name">Candidate Name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
placeholder="Enter candidate name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
placeholder="Enter candidate description"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Candidate Photo</Label>
|
||||
<div className="mt-2">
|
||||
{imagePreview ? (
|
||||
<div className="relative w-32 h-32 mx-auto">
|
||||
<Image
|
||||
src={imagePreview}
|
||||
alt="Preview"
|
||||
fill
|
||||
className="object-cover rounded-lg border-2 border-gray-200"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={removeImage}
|
||||
className="absolute -top-2 -right-2 h-6 w-6 rounded-full p-0 bg-white border-red-200 hover:bg-red-50 hover:border-red-300"
|
||||
>
|
||||
<X className="h-3 w-3 text-red-600" />
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="border-2 border-dashed border-gray-300 hover:border-gray-400 rounded-lg p-6 text-center transition-colors">
|
||||
<Upload className="h-8 w-8 text-gray-400 mx-auto mb-2" />
|
||||
<p className="text-sm text-gray-600 mb-1">Upload candidate photo</p>
|
||||
<p className="text-xs text-gray-500 mb-3">JPEG, PNG, GIF, WebP (max 5MB)</p>
|
||||
<Input
|
||||
type="file"
|
||||
accept="image/jpeg,image/jpg,image/png,image/gif,image/webp"
|
||||
onChange={handleImageChange}
|
||||
className="hidden"
|
||||
id="image-upload"
|
||||
/>
|
||||
<Label htmlFor="image-upload" className="cursor-pointer">
|
||||
<Button type="button" variant="outline" size="sm" asChild>
|
||||
<span>Choose File</span>
|
||||
</Button>
|
||||
</Label>
|
||||
</div>
|
||||
)}
|
||||
</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 || uploadingImage} className="flex-1">
|
||||
{uploadingImage ? 'Uploading...' : submitting ? 'Saving...' : editingCandidate ? 'Update' : 'Add'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
{/* Event Info Card */}
|
||||
{event && (
|
||||
<Card className="mb-6">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{event.title}</CardTitle>
|
||||
<CardDescription>{event.description}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Candidates 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 candidates...</p>
|
||||
</div>
|
||||
) : candidates.length > 0 ? (
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{candidates.map((candidate) => (
|
||||
<Card key={candidate.id} className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader className="text-center">
|
||||
<div className="w-24 h-24 mx-auto mb-4 relative">
|
||||
{candidate.image_url ? (
|
||||
<Image
|
||||
src={candidate.image_url}
|
||||
alt={candidate.name}
|
||||
fill
|
||||
className="object-cover rounded-full"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full bg-gray-200 rounded-full flex items-center justify-center">
|
||||
<User className="h-12 w-12 text-gray-400" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<CardTitle className="text-xl">{candidate.name}</CardTitle>
|
||||
<CardDescription className="text-sm">
|
||||
{candidate.description || "No description provided"}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleEdit(candidate)}
|
||||
className="flex-1"
|
||||
>
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
Edit
|
||||
</Button>
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex-1 text-red-600 hover:text-red-700"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Delete
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete Candidate</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Are you sure you want to delete "{candidate.name}"? This action cannot be undone.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={() => handleDelete(candidate.id)}>
|
||||
Delete
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Card>
|
||||
<CardContent className="text-center py-12">
|
||||
<User className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium mb-2">No Candidates Found</h3>
|
||||
<p className="text-gray-600 mb-4">Add candidates to this voting event.</p>
|
||||
<Button onClick={() => setIsDialogOpen(true)}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Candidate
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function CandidateManagementPage() {
|
||||
return (
|
||||
<AuthGuard requiredRole="superadmin">
|
||||
<CandidateManagementContent />
|
||||
</AuthGuard>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,490 @@
|
||||
"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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user