513 lines
18 KiB
TypeScript
513 lines
18 KiB
TypeScript
"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>
|
|
)
|
|
} |