1398 lines
59 KiB
Plaintext
1398 lines
59 KiB
Plaintext
|
"use client"
|
||
|
|
|
||
|
|
import type React from "react"
|
||
|
|
|
||
|
|
import { useState, useEffect } from "react"
|
||
|
|
import { useRouter } from "next/navigation"
|
||
|
|
import { Button } from "@/components/ui/button"
|
||
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||
|
|
import { Badge } from "@/components/ui/badge"
|
||
|
|
import { Input } from "@/components/ui/input"
|
||
|
|
import {
|
||
|
|
Users,
|
||
|
|
UserCheck,
|
||
|
|
Clock,
|
||
|
|
Search,
|
||
|
|
Filter,
|
||
|
|
ArrowLeft,
|
||
|
|
CheckCircle,
|
||
|
|
XCircle,
|
||
|
|
AlertCircle,
|
||
|
|
Plus,
|
||
|
|
Upload,
|
||
|
|
FileText,
|
||
|
|
Download,
|
||
|
|
Trash2,
|
||
|
|
} from "lucide-react"
|
||
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||
|
|
import Link from "next/link"
|
||
|
|
import {
|
||
|
|
Dialog,
|
||
|
|
DialogContent,
|
||
|
|
DialogDescription,
|
||
|
|
DialogHeader,
|
||
|
|
DialogTitle,
|
||
|
|
DialogTrigger,
|
||
|
|
} from "@/components/ui/dialog"
|
||
|
|
import { Label } from "@/components/ui/label"
|
||
|
|
import { Alert, AlertDescription } from "@/components/ui/alert"
|
||
|
|
import { AuthGuard } from "@/components/auth-guard"
|
||
|
|
import { useAuth } from "@/hooks/use-auth"
|
||
|
|
import { Checkbox } from "@/components/ui/checkbox"
|
||
|
|
import Papa from "papaparse"
|
||
|
|
import * as XLSX from "xlsx"
|
||
|
|
|
||
|
|
interface User {
|
||
|
|
id: string
|
||
|
|
username: string
|
||
|
|
name: string
|
||
|
|
memberId?: string
|
||
|
|
memberStatus: "verified" | "pending" | "rejected"
|
||
|
|
department?: string
|
||
|
|
joinDate?: string
|
||
|
|
lastLogin?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
interface MemberStats {
|
||
|
|
totalMembers: number
|
||
|
|
verifiedMembers: number
|
||
|
|
pendingMembers: number
|
||
|
|
rejectedMembers: number
|
||
|
|
votedMembers: number
|
||
|
|
participationRate: number
|
||
|
|
}
|
||
|
|
|
||
|
|
interface BulkUserData {
|
||
|
|
name: string
|
||
|
|
email: string
|
||
|
|
password: string
|
||
|
|
role: string
|
||
|
|
selected?: boolean
|
||
|
|
rowIndex?: number
|
||
|
|
validationError?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
interface ParsedFileData {
|
||
|
|
data: BulkUserData[]
|
||
|
|
errors: string[]
|
||
|
|
fileName: string
|
||
|
|
}
|
||
|
|
|
||
|
|
function MembersPageContent() {
|
||
|
|
const { user } = useAuth("admin")
|
||
|
|
const [members, setMembers] = useState<User[]>([])
|
||
|
|
const [stats, setStats] = useState<MemberStats | null>(null)
|
||
|
|
const [searchTerm, setSearchTerm] = useState("")
|
||
|
|
const [statusFilter, setStatusFilter] = useState<string>("all")
|
||
|
|
const [loading, setLoading] = useState(false)
|
||
|
|
const [debugInfo, setDebugInfo] = useState<string>("")
|
||
|
|
|
||
|
|
const [showCreateUser, setShowCreateUser] = useState(false)
|
||
|
|
const [createUserForm, setCreateUserForm] = useState({
|
||
|
|
username: "",
|
||
|
|
password: "",
|
||
|
|
name: "",
|
||
|
|
email: "",
|
||
|
|
memberId: "",
|
||
|
|
department: "",
|
||
|
|
joinDate: new Date().toISOString().split("T")[0],
|
||
|
|
})
|
||
|
|
|
||
|
|
// Bulk upload states
|
||
|
|
const [showBulkUpload, setShowBulkUpload] = useState(false)
|
||
|
|
const [parsedData, setParsedData] = useState<ParsedFileData | null>(null)
|
||
|
|
const [bulkLoading, setBulkLoading] = useState(false)
|
||
|
|
const [selectedUsers, setSelectedUsers] = useState<Set<number>>(new Set())
|
||
|
|
const [selectAll, setSelectAll] = useState(false)
|
||
|
|
|
||
|
|
const router = useRouter()
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (user) {
|
||
|
|
loadMembers()
|
||
|
|
loadStats()
|
||
|
|
}
|
||
|
|
}, [user])
|
||
|
|
|
||
|
|
const loadMembers = async () => {
|
||
|
|
try {
|
||
|
|
console.log("=== LOADING MEMBERS ===")
|
||
|
|
const response = await fetch("/api/members")
|
||
|
|
const data = await response.json()
|
||
|
|
console.log("Members API response:", data)
|
||
|
|
|
||
|
|
if (data.success) {
|
||
|
|
setMembers(data.members)
|
||
|
|
console.log("Members loaded:", data.members.length)
|
||
|
|
|
||
|
|
// Debug info
|
||
|
|
const statusCounts = data.members.reduce((acc: any, member: User) => {
|
||
|
|
acc[member.memberStatus] = (acc[member.memberStatus] || 0) + 1
|
||
|
|
return acc
|
||
|
|
}, {})
|
||
|
|
|
||
|
|
setDebugInfo(`Total: ${data.members.length}, Status: ${JSON.stringify(statusCounts)}`)
|
||
|
|
|
||
|
|
// Log each member's status
|
||
|
|
data.members.forEach((member: User, index: number) => {
|
||
|
|
console.log(
|
||
|
|
`Member ${index + 1}: ${member.name} - Status: "${member.memberStatus}" (${typeof member.memberStatus})`,
|
||
|
|
)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error loading members:", error)
|
||
|
|
setDebugInfo("Error loading members: " + error.message)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const loadStats = async () => {
|
||
|
|
try {
|
||
|
|
const response = await fetch("/api/members/stats")
|
||
|
|
const data = await response.json()
|
||
|
|
if (data.success) {
|
||
|
|
setStats(data.stats)
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error loading stats:", error)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleStatusChange = async (memberId: string, newStatus: string) => {
|
||
|
|
console.log(`=== CHANGING STATUS ===`)
|
||
|
|
console.log(`Member ID: ${memberId}, New Status: ${newStatus}`)
|
||
|
|
|
||
|
|
setLoading(true)
|
||
|
|
try {
|
||
|
|
const response = await fetch(`/api/members/${memberId}/status`, {
|
||
|
|
method: "PUT",
|
||
|
|
headers: { "Content-Type": "application/json" },
|
||
|
|
body: JSON.stringify({ status: newStatus }),
|
||
|
|
})
|
||
|
|
|
||
|
|
const data = await response.json()
|
||
|
|
console.log("Status change response:", data)
|
||
|
|
|
||
|
|
if (response.ok) {
|
||
|
|
await loadMembers()
|
||
|
|
await loadStats()
|
||
|
|
alert(`Status anggota berhasil diubah menjadi ${newStatus}`)
|
||
|
|
} else {
|
||
|
|
alert("Gagal mengubah status: " + data.message)
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error updating member status:", error)
|
||
|
|
alert("Gagal mengubah status anggota")
|
||
|
|
} finally {
|
||
|
|
setLoading(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleCreateUser = async (e: React.FormEvent) => {
|
||
|
|
e.preventDefault()
|
||
|
|
setLoading(true)
|
||
|
|
|
||
|
|
console.log("=== CREATING USER ===")
|
||
|
|
console.log("Form data:", createUserForm)
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch("/api/members", {
|
||
|
|
method: "POST",
|
||
|
|
headers: { "Content-Type": "application/json" },
|
||
|
|
body: JSON.stringify({
|
||
|
|
...createUserForm,
|
||
|
|
role: "voter",
|
||
|
|
memberStatus: "pending",
|
||
|
|
}),
|
||
|
|
})
|
||
|
|
|
||
|
|
const data = await response.json()
|
||
|
|
console.log("API response:", data)
|
||
|
|
|
||
|
|
if (data.success) {
|
||
|
|
console.log("User created successfully:", data.user)
|
||
|
|
|
||
|
|
// Reload data
|
||
|
|
await loadMembers()
|
||
|
|
await loadStats()
|
||
|
|
|
||
|
|
// Reset form
|
||
|
|
setCreateUserForm({
|
||
|
|
username: "",
|
||
|
|
password: "",
|
||
|
|
name: "",
|
||
|
|
email: "",
|
||
|
|
memberId: "",
|
||
|
|
department: "",
|
||
|
|
joinDate: new Date().toISOString().split("T")[0],
|
||
|
|
})
|
||
|
|
|
||
|
|
setShowCreateUser(false)
|
||
|
|
alert("Anggota baru berhasil dibuat!")
|
||
|
|
} else {
|
||
|
|
console.error("Failed to create user:", data.message)
|
||
|
|
alert("Gagal membuat anggota: " + data.message)
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error creating user:", error)
|
||
|
|
alert("Terjadi kesalahan sistem")
|
||
|
|
} finally {
|
||
|
|
setLoading(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// File parsing functions
|
||
|
|
const validateUserData = (userData: BulkUserData, rowIndex: number): string | null => {
|
||
|
|
if (!userData.name || userData.name.trim().length === 0) {
|
||
|
|
return "Name is required"
|
||
|
|
}
|
||
|
|
if (userData.name.length > 255) {
|
||
|
|
return "Name must be less than 255 characters"
|
||
|
|
}
|
||
|
|
if (!userData.email || !userData.email.includes("@")) {
|
||
|
|
return "Valid email is required"
|
||
|
|
}
|
||
|
|
if (!userData.password || userData.password.length < 6) {
|
||
|
|
return "Password must be at least 6 characters"
|
||
|
|
}
|
||
|
|
if (!userData.role || userData.role.trim().length === 0) {
|
||
|
|
return "Role is required"
|
||
|
|
}
|
||
|
|
return null
|
||
|
|
}
|
||
|
|
|
||
|
|
const parseCSVFile = (file: File): Promise<ParsedFileData> => {
|
||
|
|
return new Promise((resolve) => {
|
||
|
|
Papa.parse(file, {
|
||
|
|
header: true,
|
||
|
|
skipEmptyLines: true,
|
||
|
|
complete: (result) => {
|
||
|
|
const errors: string[] = []
|
||
|
|
const data: BulkUserData[] = []
|
||
|
|
|
||
|
|
result.data.forEach((row: any, index: number) => {
|
||
|
|
const userData: BulkUserData = {
|
||
|
|
name: row.name || row.Name || "",
|
||
|
|
email: row.email || row.Email || "",
|
||
|
|
password: row.password || row.Password || "",
|
||
|
|
role: row.role || row.Role || "voter",
|
||
|
|
selected: true,
|
||
|
|
rowIndex: index
|
||
|
|
}
|
||
|
|
|
||
|
|
const validationError = validateUserData(userData, index)
|
||
|
|
if (validationError) {
|
||
|
|
userData.validationError = validationError
|
||
|
|
errors.push(`Row ${index + 2}: ${validationError}`)
|
||
|
|
}
|
||
|
|
|
||
|
|
data.push(userData)
|
||
|
|
})
|
||
|
|
|
||
|
|
resolve({
|
||
|
|
data,
|
||
|
|
errors,
|
||
|
|
fileName: file.name
|
||
|
|
})
|
||
|
|
},
|
||
|
|
error: (error) => {
|
||
|
|
resolve({
|
||
|
|
data: [],
|
||
|
|
errors: [error.message],
|
||
|
|
fileName: file.name
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const parseExcelFile = (file: File): Promise<ParsedFileData> => {
|
||
|
|
return new Promise((resolve) => {
|
||
|
|
const reader = new FileReader()
|
||
|
|
reader.onload = (e) => {
|
||
|
|
try {
|
||
|
|
const data = new Uint8Array(e.target?.result as ArrayBuffer)
|
||
|
|
const workbook = XLSX.read(data, { type: 'array' })
|
||
|
|
const sheetName = workbook.SheetNames[0]
|
||
|
|
const worksheet = workbook.Sheets[sheetName]
|
||
|
|
const jsonData = XLSX.utils.sheet_to_json(worksheet)
|
||
|
|
|
||
|
|
const errors: string[] = []
|
||
|
|
const users: BulkUserData[] = []
|
||
|
|
|
||
|
|
jsonData.forEach((row: any, index: number) => {
|
||
|
|
const userData: BulkUserData = {
|
||
|
|
name: row.name || row.Name || "",
|
||
|
|
email: row.email || row.Email || "",
|
||
|
|
password: row.password || row.Password || "",
|
||
|
|
role: row.role || row.Role || "voter",
|
||
|
|
selected: true,
|
||
|
|
rowIndex: index
|
||
|
|
}
|
||
|
|
|
||
|
|
const validationError = validateUserData(userData, index)
|
||
|
|
if (validationError) {
|
||
|
|
userData.validationError = validationError
|
||
|
|
errors.push(`Row ${index + 2}: ${validationError}`)
|
||
|
|
}
|
||
|
|
|
||
|
|
users.push(userData)
|
||
|
|
})
|
||
|
|
|
||
|
|
resolve({
|
||
|
|
data: users,
|
||
|
|
errors,
|
||
|
|
fileName: file.name
|
||
|
|
})
|
||
|
|
} catch (error) {
|
||
|
|
resolve({
|
||
|
|
data: [],
|
||
|
|
errors: [error.message],
|
||
|
|
fileName: file.name
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
reader.readAsArrayBuffer(file)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||
|
|
const file = event.target.files?.[0]
|
||
|
|
if (!file) return
|
||
|
|
|
||
|
|
setBulkLoading(true)
|
||
|
|
try {
|
||
|
|
let parsed: ParsedFileData
|
||
|
|
|
||
|
|
if (file.name.toLowerCase().endsWith('.csv')) {
|
||
|
|
parsed = await parseCSVFile(file)
|
||
|
|
} else if (file.name.toLowerCase().endsWith('.xlsx') || file.name.toLowerCase().endsWith('.xls')) {
|
||
|
|
parsed = await parseExcelFile(file)
|
||
|
|
} else {
|
||
|
|
alert('Please upload a CSV or Excel file')
|
||
|
|
setBulkLoading(false)
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
setParsedData(parsed)
|
||
|
|
setSelectedUsers(new Set(parsed.data.map((_, index) => index)))
|
||
|
|
setSelectAll(true)
|
||
|
|
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error parsing file:', error)
|
||
|
|
alert('Error parsing file: ' + error.message)
|
||
|
|
} finally {
|
||
|
|
setBulkLoading(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleSelectAll = (checked: boolean) => {
|
||
|
|
if (checked && parsedData) {
|
||
|
|
setSelectedUsers(new Set(parsedData.data.map((_, index) => index)))
|
||
|
|
} else {
|
||
|
|
setSelectedUsers(new Set())
|
||
|
|
}
|
||
|
|
setSelectAll(checked)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleSelectUser = (index: number, checked: boolean) => {
|
||
|
|
const newSelected = new Set(selectedUsers)
|
||
|
|
if (checked) {
|
||
|
|
newSelected.add(index)
|
||
|
|
} else {
|
||
|
|
newSelected.delete(index)
|
||
|
|
}
|
||
|
|
setSelectedUsers(newSelected)
|
||
|
|
setSelectAll(parsedData ? newSelected.size === parsedData.data.length : false)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleBulkCreateUsers = async () => {
|
||
|
|
if (!parsedData || selectedUsers.size === 0) {
|
||
|
|
alert('Please select at least one user to create')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
setBulkLoading(true)
|
||
|
|
try {
|
||
|
|
const selectedUsersData = parsedData.data
|
||
|
|
.filter((_, index) => selectedUsers.has(index))
|
||
|
|
.filter(user => !user.validationError) // Only include valid users
|
||
|
|
.map(user => ({
|
||
|
|
name: user.name,
|
||
|
|
email: user.email,
|
||
|
|
password: user.password,
|
||
|
|
role: user.role
|
||
|
|
}))
|
||
|
|
|
||
|
|
if (selectedUsersData.length === 0) {
|
||
|
|
alert('No valid users selected for creation')
|
||
|
|
setBulkLoading(false)
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
const response = await fetch('/api/v1/users/bulk', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify({
|
||
|
|
users: selectedUsersData
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
const result = await response.json()
|
||
|
|
|
||
|
|
if (response.ok && result.success) {
|
||
|
|
alert(`Successfully created ${selectedUsersData.length} users!`)
|
||
|
|
setParsedData(null)
|
||
|
|
setSelectedUsers(new Set())
|
||
|
|
setSelectAll(false)
|
||
|
|
setShowBulkUpload(false)
|
||
|
|
|
||
|
|
// Reload members list
|
||
|
|
await loadMembers()
|
||
|
|
await loadStats()
|
||
|
|
} else {
|
||
|
|
alert(`Failed to create users: ${result.message || 'Unknown error'}`)
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error creating bulk users:', error)
|
||
|
|
alert('Error creating users: ' + error.message)
|
||
|
|
} finally {
|
||
|
|
setBulkLoading(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const downloadTemplate = () => {
|
||
|
|
const csvContent = "name,email,password,role\nJohn Doe,john@example.com,password123,voter\nJane Smith,jane@example.com,password456,admin"
|
||
|
|
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
|
||
|
|
const link = document.createElement('a')
|
||
|
|
const url = URL.createObjectURL(blob)
|
||
|
|
link.setAttribute('href', url)
|
||
|
|
link.setAttribute('download', 'user_template.csv')
|
||
|
|
link.style.visibility = 'hidden'
|
||
|
|
document.body.appendChild(link)
|
||
|
|
link.click()
|
||
|
|
document.body.removeChild(link)
|
||
|
|
}
|
||
|
|
|
||
|
|
const filteredMembers = members.filter((member) => {
|
||
|
|
const matchesSearch =
|
||
|
|
member.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||
|
|
member.memberId?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||
|
|
member.department?.toLowerCase().includes(searchTerm.toLowerCase())
|
||
|
|
|
||
|
|
const matchesStatus = statusFilter === "all" || member.memberStatus === statusFilter
|
||
|
|
|
||
|
|
return matchesSearch && matchesStatus
|
||
|
|
})
|
||
|
|
|
||
|
|
const getStatusBadge = (status: string) => {
|
||
|
|
switch (status) {
|
||
|
|
case "verified":
|
||
|
|
return (
|
||
|
|
<Badge className="bg-green-100 text-green-800 border-green-200">
|
||
|
|
<CheckCircle className="h-3 w-3 mr-1" />
|
||
|
|
Terverifikasi
|
||
|
|
</Badge>
|
||
|
|
)
|
||
|
|
case "pending":
|
||
|
|
return (
|
||
|
|
<Badge className="bg-yellow-100 text-yellow-800 border-yellow-200">
|
||
|
|
<Clock className="h-3 w-3 mr-1" />
|
||
|
|
Menunggu
|
||
|
|
</Badge>
|
||
|
|
)
|
||
|
|
case "rejected":
|
||
|
|
return (
|
||
|
|
<Badge className="bg-red-100 text-red-800 border-red-200">
|
||
|
|
<XCircle className="h-3 w-3 mr-1" />
|
||
|
|
Ditolak
|
||
|
|
</Badge>
|
||
|
|
)
|
||
|
|
default:
|
||
|
|
return (
|
||
|
|
<Badge variant="secondary" className="bg-gray-100 text-gray-800">
|
||
|
|
<AlertCircle className="h-3 w-3 mr-1" />
|
||
|
|
Status Tidak Valid: {status}
|
||
|
|
</Badge>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!user) return null
|
||
|
|
|
||
|
|
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">
|
||
|
|
<div className="flex items-center gap-2 lg:gap-4">
|
||
|
|
<Link href="/admin" className="text-blue-600 hover:text-blue-800">
|
||
|
|
<ArrowLeft className="h-5 w-5" />
|
||
|
|
</Link>
|
||
|
|
<img src="/images/meti-logo.png" alt="METI - New & Renewable Energy" className="h-8 lg:h-10 w-auto" />
|
||
|
|
<h1 className="text-lg lg:text-2xl font-bold text-gray-900">Verifikasi Anggota</h1>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div className="container mx-auto px-4 py-8">
|
||
|
|
{/* Debug Info */}
|
||
|
|
{debugInfo && (
|
||
|
|
<Alert className="mb-6">
|
||
|
|
<AlertCircle className="h-4 w-4" />
|
||
|
|
<AlertDescription>
|
||
|
|
<strong>Debug Info:</strong> {debugInfo}
|
||
|
|
</AlertDescription>
|
||
|
|
</Alert>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Statistics Cards */}
|
||
|
|
{stats && (
|
||
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6 mb-8">
|
||
|
|
<Card>
|
||
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
|
|
<CardTitle className="text-xs lg:text-sm font-medium">Total Anggota</CardTitle>
|
||
|
|
<Users className="h-4 w-4 text-muted-foreground" />
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<div className="text-xl lg:text-2xl font-bold">{stats.totalMembers}</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card>
|
||
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
|
|
<CardTitle className="text-xs lg:text-sm font-medium">Terverifikasi</CardTitle>
|
||
|
|
<UserCheck className="h-4 w-4 text-green-600" />
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<div className="text-xl lg:text-2xl font-bold text-green-600">{stats.verifiedMembers}</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card>
|
||
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
|
|
<CardTitle className="text-xs lg:text-sm font-medium">Menunggu</CardTitle>
|
||
|
|
<Clock className="h-4 w-4 text-yellow-600" />
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<div className="text-xl lg:text-2xl font-bold text-yellow-600">{stats.pendingMembers}</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card className="col-span-2 lg:col-span-1">
|
||
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
|
|
<CardTitle className="text-xs lg:text-sm font-medium">Partisipasi</CardTitle>
|
||
|
|
<AlertCircle className="h-4 w-4 text-blue-600" />
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<div className="text-xl lg:text-2xl font-bold text-blue-600">{stats.participationRate}%</div>
|
||
|
|
<p className="text-xs text-muted-foreground">
|
||
|
|
{stats.votedMembers} dari {stats.verifiedMembers}
|
||
|
|
</p>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Create User & Filters */}
|
||
|
|
<Card className="mb-6">
|
||
|
|
<CardHeader>
|
||
|
|
<div className="flex justify-between items-center">
|
||
|
|
<CardTitle>Kelola Anggota</CardTitle>
|
||
|
|
<div className="flex gap-2">
|
||
|
|
<Dialog open={showCreateUser} onOpenChange={setShowCreateUser}>
|
||
|
|
<DialogTrigger asChild>
|
||
|
|
<Button>
|
||
|
|
<Plus className="h-4 w-4 mr-2" />
|
||
|
|
Tambah Anggota Baru
|
||
|
|
</Button>
|
||
|
|
</DialogTrigger>
|
||
|
|
<DialogContent>
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle>Tambah Anggota Baru</DialogTitle>
|
||
|
|
<DialogDescription>Buat akun voter baru untuk anggota METI</DialogDescription>
|
||
|
|
</DialogHeader>
|
||
|
|
<form onSubmit={handleCreateUser} className="space-y-4">
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="username">Username</Label>
|
||
|
|
<Input
|
||
|
|
id="username"
|
||
|
|
value={createUserForm.username}
|
||
|
|
onChange={(e) => setCreateUserForm({ ...createUserForm, username: e.target.value })}
|
||
|
|
placeholder="username_anggota"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="password">Password</Label>
|
||
|
|
<Input
|
||
|
|
id="password"
|
||
|
|
type="password"
|
||
|
|
value={createUserForm.password}
|
||
|
|
onChange={(e) => setCreateUserForm({ ...createUserForm, password: e.target.value })}
|
||
|
|
placeholder="Password untuk login"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="name">Nama Lengkap</Label>
|
||
|
|
<Input
|
||
|
|
id="name"
|
||
|
|
value={createUserForm.name}
|
||
|
|
onChange={(e) => setCreateUserForm({ ...createUserForm, name: e.target.value })}
|
||
|
|
placeholder="Nama lengkap anggota"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="email">Email</Label>
|
||
|
|
<Input
|
||
|
|
id="email"
|
||
|
|
type="email"
|
||
|
|
value={createUserForm.email}
|
||
|
|
onChange={(e) => setCreateUserForm({ ...createUserForm, email: e.target.value })}
|
||
|
|
placeholder="email@example.com"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="memberId">ID Anggota</Label>
|
||
|
|
<Input
|
||
|
|
id="memberId"
|
||
|
|
value={createUserForm.memberId}
|
||
|
|
onChange={(e) => setCreateUserForm({ ...createUserForm, memberId: e.target.value })}
|
||
|
|
placeholder="METI-XXX"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="department">Departemen</Label>
|
||
|
|
<Input
|
||
|
|
id="department"
|
||
|
|
value={createUserForm.department}
|
||
|
|
onChange={(e) => setCreateUserForm({ ...createUserForm, department: e.target.value })}
|
||
|
|
placeholder="Renewable Energy, Solar Energy, dll"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="joinDate">Tanggal Bergabung</Label>
|
||
|
|
<Input
|
||
|
|
id="joinDate"
|
||
|
|
type="date"
|
||
|
|
value={createUserForm.joinDate}
|
||
|
|
onChange={(e) => setCreateUserForm({ ...createUserForm, joinDate: e.target.value })}
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<Button type="submit" disabled={loading} className="w-full">
|
||
|
|
{loading ? "Membuat..." : "Buat Anggota"}
|
||
|
|
</Button>
|
||
|
|
</form>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
|
||
|
|
<Dialog open={showBulkUpload} onOpenChange={setShowBulkUpload}>
|
||
|
|
<DialogTrigger asChild>
|
||
|
|
<Button variant="outline">
|
||
|
|
<Upload className="h-4 w-4 mr-2" />
|
||
|
|
Upload Bulk Users
|
||
|
|
</Button>
|
||
|
|
</DialogTrigger>
|
||
|
|
<DialogContent className="max-w-6xl max-h-[90vh] overflow-hidden flex flex-col">
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle>Upload Bulk Users</DialogTitle>
|
||
|
|
<DialogDescription>
|
||
|
|
Upload CSV or Excel file to create multiple users at once
|
||
|
|
</DialogDescription>
|
||
|
|
</DialogHeader>
|
||
|
|
|
||
|
|
<div className="flex-1 overflow-auto">
|
||
|
|
{!parsedData ? (
|
||
|
|
<div className="space-y-6">
|
||
|
|
{/* File Upload Section */}
|
||
|
|
<div className="border-2 border-dashed border-gray-300 rounded-lg p-8">
|
||
|
|
<div className="text-center">
|
||
|
|
<FileText className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
||
|
|
<h3 className="text-lg font-medium mb-2">Upload File</h3>
|
||
|
|
<p className="text-gray-600 mb-4">
|
||
|
|
Choose a CSV or Excel file containing user data
|
||
|
|
</p>
|
||
|
|
<input
|
||
|
|
type="file"
|
||
|
|
accept=".csv,.xlsx,.xls"
|
||
|
|
onChange={handleFileUpload}
|
||
|
|
className="hidden"
|
||
|
|
id="file-upload"
|
||
|
|
/>
|
||
|
|
<label htmlFor="file-upload">
|
||
|
|
<Button className="cursor-pointer" disabled={bulkLoading}>
|
||
|
|
{bulkLoading ? "Processing..." : "Choose File"}
|
||
|
|
</Button>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Template Download */}
|
||
|
|
<div className="bg-blue-50 p-4 rounded-lg">
|
||
|
|
<h4 className="font-medium mb-2">Need a template?</h4>
|
||
|
|
<p className="text-sm text-gray-600 mb-3">
|
||
|
|
Download our CSV template to get started. Required columns: name, email, password, role
|
||
|
|
</p>
|
||
|
|
<Button variant="outline" size="sm" onClick={downloadTemplate}>
|
||
|
|
<Download className="h-4 w-4 mr-2" />
|
||
|
|
Download Template
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Format Info */}
|
||
|
|
<div className="bg-gray-50 p-4 rounded-lg">
|
||
|
|
<h4 className="font-medium mb-2">File Format Requirements:</h4>
|
||
|
|
<ul className="text-sm text-gray-600 space-y-1">
|
||
|
|
<li>• <strong>name</strong>: Full name (required, max 255 chars)</li>
|
||
|
|
<li>• <strong>email</strong>: Valid email address (required)</li>
|
||
|
|
<li>• <strong>password</strong>: Password (required, min 6 chars)</li>
|
||
|
|
<li>• <strong>role</strong>: User role (required, e.g., 'voter', 'admin')</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="space-y-4">
|
||
|
|
{/* File Info & Actions */}
|
||
|
|
<div className="flex justify-between items-center">
|
||
|
|
<div>
|
||
|
|
<h3 className="text-lg font-medium">Preview: {parsedData.fileName}</h3>
|
||
|
|
<p className="text-sm text-gray-600">
|
||
|
|
Found {parsedData.data.length} users, {selectedUsers.size} selected
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="flex gap-2">
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
onClick={() => setParsedData(null)}
|
||
|
|
>
|
||
|
|
<Trash2 className="h-4 w-4 mr-2" />
|
||
|
|
Clear
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
onClick={handleBulkCreateUsers}
|
||
|
|
disabled={bulkLoading || selectedUsers.size === 0}
|
||
|
|
>
|
||
|
|
{bulkLoading ? "Creating..." : `Create ${selectedUsers.size} Users`}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Errors Display */}
|
||
|
|
{parsedData.errors.length > 0 && (
|
||
|
|
<Alert className="bg-red-50 border-red-200">
|
||
|
|
<AlertCircle className="h-4 w-4" />
|
||
|
|
<AlertDescription>
|
||
|
|
<strong>Validation Errors:</strong>
|
||
|
|
<ul className="mt-2 space-y-1">
|
||
|
|
{parsedData.errors.slice(0, 5).map((error, index) => (
|
||
|
|
<li key={index} className="text-sm">• {error}</li>
|
||
|
|
))}
|
||
|
|
{parsedData.errors.length > 5 && (
|
||
|
|
<li className="text-sm">• ... and {parsedData.errors.length - 5} more errors</li>
|
||
|
|
)}
|
||
|
|
</ul>
|
||
|
|
</AlertDescription>
|
||
|
|
</Alert>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Data Table */}
|
||
|
|
<div className="border rounded-lg overflow-hidden">
|
||
|
|
<Table>
|
||
|
|
<TableHeader>
|
||
|
|
<TableRow>
|
||
|
|
<TableHead className="w-12">
|
||
|
|
<Checkbox
|
||
|
|
checked={selectAll}
|
||
|
|
onCheckedChange={(checked) => handleSelectAll(checked || false)}
|
||
|
|
/>
|
||
|
|
</TableHead>
|
||
|
|
<TableHead>Name</TableHead>
|
||
|
|
<TableHead>Email</TableHead>
|
||
|
|
<TableHead>Role</TableHead>
|
||
|
|
<TableHead>Status</TableHead>
|
||
|
|
</TableRow>
|
||
|
|
</TableHeader>
|
||
|
|
<TableBody>
|
||
|
|
{parsedData.data.map((user, index) => (
|
||
|
|
<TableRow key={index}>
|
||
|
|
<TableCell>
|
||
|
|
<Checkbox
|
||
|
|
checked={selectedUsers.has(index)}
|
||
|
|
onCheckedChange={(checked) => handleSelectUser(index, checked || false)}
|
||
|
|
disabled={!!user.validationError}
|
||
|
|
/>
|
||
|
|
</TableCell>
|
||
|
|
<TableCell className="font-medium">
|
||
|
|
{user.name || <span className="text-gray-400">Missing</span>}
|
||
|
|
</TableCell>
|
||
|
|
<TableCell>
|
||
|
|
{user.email || <span className="text-gray-400">Missing</span>}
|
||
|
|
</TableCell>
|
||
|
|
<TableCell>
|
||
|
|
{user.role || <span className="text-gray-400">Missing</span>}
|
||
|
|
</TableCell>
|
||
|
|
<TableCell>
|
||
|
|
{user.validationError ? (
|
||
|
|
<Badge variant="destructive" className="text-xs">
|
||
|
|
{user.validationError}
|
||
|
|
</Badge>
|
||
|
|
) : (
|
||
|
|
<Badge className="bg-green-100 text-green-800 text-xs">
|
||
|
|
Valid
|
||
|
|
</Badge>
|
||
|
|
)}
|
||
|
|
</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
))}
|
||
|
|
</TableBody>
|
||
|
|
</Table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
</div>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<div className="flex flex-col md:flex-row gap-4">
|
||
|
|
<div className="flex-1">
|
||
|
|
<div className="relative">
|
||
|
|
<Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
|
||
|
|
<Input
|
||
|
|
placeholder="Cari nama, ID anggota, atau departemen..."
|
||
|
|
value={searchTerm}
|
||
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||
|
|
className="pl-10"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="w-full md:w-48">
|
||
|
|
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||
|
|
<SelectTrigger>
|
||
|
|
<Filter className="h-4 w-4 mr-2" />
|
||
|
|
<SelectValue placeholder="Filter Status" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="all">Semua Status</SelectItem>
|
||
|
|
<SelectItem value="verified">Terverifikasi</SelectItem>
|
||
|
|
<SelectItem value="pending">Menunggu</SelectItem>
|
||
|
|
<SelectItem value="rejected">Ditolak</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* Members Table */}
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle>Daftar Anggota ({filteredMembers.length})</CardTitle>
|
||
|
|
<CardDescription>Kelola verifikasi dan status keanggotaan METI</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
{/* Desktop Table View */}
|
||
|
|
<div className="hidden lg:block overflow-x-auto">
|
||
|
|
<Table>
|
||
|
|
<TableHeader>
|
||
|
|
<TableRow>
|
||
|
|
<TableHead className="min-w-[120px]">ID Anggota</TableHead>
|
||
|
|
<TableHead className="min-w-[120px]">Username</TableHead>
|
||
|
|
<TableHead className="min-w-[150px]">Nama</TableHead>
|
||
|
|
<TableHead className="min-w-[120px]">Departemen</TableHead>
|
||
|
|
<TableHead className="min-w-[120px]">Tanggal Bergabung</TableHead>
|
||
|
|
<TableHead className="min-w-[140px]">Status</TableHead>
|
||
|
|
<TableHead className="min-w-[120px]">Login Terakhir</TableHead>
|
||
|
|
<TableHead className="min-w-[200px]">Aksi</TableHead>
|
||
|
|
</TableRow>
|
||
|
|
</TableHeader>
|
||
|
|
<TableBody>
|
||
|
|
{filteredMembers.map((member) => (
|
||
|
|
<TableRow key={member.id}>
|
||
|
|
<TableCell className="font-medium">{member.memberId}</TableCell>
|
||
|
|
<TableCell className="font-mono text-sm bg-gray-50 px-2 py-1 rounded">
|
||
|
|
{member.username}
|
||
|
|
</TableCell>
|
||
|
|
<TableCell className="font-medium">{member.name}</TableCell>
|
||
|
|
<TableCell>{member.department}</TableCell>
|
||
|
|
<TableCell>
|
||
|
|
{member.joinDate ? new Date(member.joinDate).toLocaleDateString("id-ID") : "-"}
|
||
|
|
</TableCell>
|
||
|
|
<TableCell>{getStatusBadge(member.memberStatus)}</TableCell>
|
||
|
|
<TableCell>
|
||
|
|
{member.lastLogin
|
||
|
|
? new Date(member.lastLogin).toLocaleDateString("id-ID")
|
||
|
|
: "Belum pernah login"}
|
||
|
|
</TableCell>
|
||
|
|
<TableCell>
|
||
|
|
<div className="flex gap-2">
|
||
|
|
{/* Existing button logic remains the same */}
|
||
|
|
{member.memberStatus === "pending" && (
|
||
|
|
<>
|
||
|
|
<Dialog>
|
||
|
|
<DialogTrigger asChild>
|
||
|
|
<Button size="sm" className="bg-green-600 hover:bg-green-700 text-white">
|
||
|
|
<CheckCircle className="h-3 w-3 mr-1" />
|
||
|
|
Verifikasi
|
||
|
|
</Button>
|
||
|
|
</DialogTrigger>
|
||
|
|
<DialogContent>
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle>Konfirmasi Verifikasi</DialogTitle>
|
||
|
|
<DialogDescription>
|
||
|
|
Apakah Anda yakin ingin memverifikasi anggota berikut?
|
||
|
|
</DialogDescription>
|
||
|
|
</DialogHeader>
|
||
|
|
<div className="py-4">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<p>
|
||
|
|
<strong>Nama:</strong> {member.name}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<strong>ID Anggota:</strong> {member.memberId}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<strong>Departemen:</strong> {member.department}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<strong>Status Saat Ini:</strong> Menunggu Verifikasi
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex justify-end gap-3">
|
||
|
|
<DialogTrigger asChild>
|
||
|
|
<Button variant="outline">Batal</Button>
|
||
|
|
</DialogTrigger>
|
||
|
|
<Button
|
||
|
|
onClick={() => handleStatusChange(member.id, "verified")}
|
||
|
|
disabled={loading}
|
||
|
|
className="bg-green-600 hover:bg-green-700"
|
||
|
|
>
|
||
|
|
{loading ? "Memverifikasi..." : "Ya, Verifikasi"}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
<Dialog>
|
||
|
|
<DialogTrigger asChild>
|
||
|
|
<Button size="sm" variant="destructive">
|
||
|
|
<XCircle className="h-3 w-3 mr-1" />
|
||
|
|
Tolak
|
||
|
|
</Button>
|
||
|
|
</DialogTrigger>
|
||
|
|
<DialogContent>
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle>Konfirmasi Penolakan</DialogTitle>
|
||
|
|
<DialogDescription>
|
||
|
|
Apakah Anda yakin ingin menolak verifikasi anggota berikut?
|
||
|
|
</DialogDescription>
|
||
|
|
</DialogHeader>
|
||
|
|
<div className="py-4">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<p>
|
||
|
|
<strong>Nama:</strong> {member.name}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<strong>ID Anggota:</strong> {member.memberId}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<strong>Departemen:</strong> {member.department}
|
||
|
|
</p>
|
||
|
|
<p className="text-red-600">
|
||
|
|
<strong>Aksi:</strong> Anggota akan ditolak dan tidak dapat login
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex justify-end gap-3">
|
||
|
|
<DialogTrigger asChild>
|
||
|
|
<Button variant="outline">Batal</Button>
|
||
|
|
</DialogTrigger>
|
||
|
|
<Button
|
||
|
|
onClick={() => handleStatusChange(member.id, "rejected")}
|
||
|
|
disabled={loading}
|
||
|
|
variant="destructive"
|
||
|
|
>
|
||
|
|
{loading ? "Menolak..." : "Ya, Tolak"}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
{/* Other status buttons remain the same */}
|
||
|
|
{member.memberStatus === "rejected" && (
|
||
|
|
<Dialog>
|
||
|
|
<DialogTrigger asChild>
|
||
|
|
<Button size="sm" className="bg-green-600 hover:bg-green-700 text-white">
|
||
|
|
<CheckCircle className="h-3 w-3 mr-1" />
|
||
|
|
Verifikasi
|
||
|
|
</Button>
|
||
|
|
</DialogTrigger>
|
||
|
|
<DialogContent>
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle>Konfirmasi Verifikasi</DialogTitle>
|
||
|
|
<DialogDescription>
|
||
|
|
Anggota ini sebelumnya ditolak. Apakah Anda yakin ingin memverifikasinya sekarang?
|
||
|
|
</DialogDescription>
|
||
|
|
</DialogHeader>
|
||
|
|
<div className="py-4">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<p>
|
||
|
|
<strong>Nama:</strong> {member.name}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<strong>ID Anggota:</strong> {member.memberId}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<strong>Status Saat Ini:</strong> <span className="text-red-600">Ditolak</span>
|
||
|
|
</p>
|
||
|
|
<p className="text-green-600">
|
||
|
|
<strong>Aksi:</strong> Anggota akan dapat login dan voting
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex justify-end gap-3">
|
||
|
|
<DialogTrigger asChild>
|
||
|
|
<Button variant="outline">Batal</Button>
|
||
|
|
</DialogTrigger>
|
||
|
|
<Button
|
||
|
|
onClick={() => handleStatusChange(member.id, "verified")}
|
||
|
|
disabled={loading}
|
||
|
|
className="bg-green-600 hover:bg-green-700"
|
||
|
|
>
|
||
|
|
{loading ? "Memverifikasi..." : "Ya, Verifikasi"}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Button untuk status verified */}
|
||
|
|
{member.memberStatus === "verified" && (
|
||
|
|
<Dialog>
|
||
|
|
<DialogTrigger asChild>
|
||
|
|
<Button
|
||
|
|
size="sm"
|
||
|
|
variant="outline"
|
||
|
|
className="border-yellow-300 text-yellow-700 hover:bg-yellow-50 bg-transparent"
|
||
|
|
>
|
||
|
|
<Clock className="h-3 w-3 mr-1" />
|
||
|
|
Tunda
|
||
|
|
</Button>
|
||
|
|
</DialogTrigger>
|
||
|
|
<DialogContent>
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle>Konfirmasi Penangguhan</DialogTitle>
|
||
|
|
<DialogDescription>
|
||
|
|
Apakah Anda yakin ingin menangguhkan verifikasi anggota ini?
|
||
|
|
</DialogDescription>
|
||
|
|
</DialogHeader>
|
||
|
|
<div className="py-4">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<p>
|
||
|
|
<strong>Nama:</strong> {member.name}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<strong>ID Anggota:</strong> {member.memberId}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<strong>Status Saat Ini:</strong>{" "}
|
||
|
|
<span className="text-green-600">Terverifikasi</span>
|
||
|
|
</p>
|
||
|
|
<p className="text-yellow-600">
|
||
|
|
<strong>Aksi:</strong> Anggota tidak akan dapat login sementara
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex justify-end gap-3">
|
||
|
|
<DialogTrigger asChild>
|
||
|
|
<Button variant="outline">Batal</Button>
|
||
|
|
</DialogTrigger>
|
||
|
|
<Button
|
||
|
|
onClick={() => handleStatusChange(member.id, "pending")}
|
||
|
|
disabled={loading}
|
||
|
|
className="bg-yellow-600 hover:bg-yellow-700 text-white"
|
||
|
|
>
|
||
|
|
{loading ? "Menangguhkan..." : "Ya, Tunda"}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Debug info - hapus ini setelah testing */}
|
||
|
|
<span className="text-xs text-gray-500 ml-2">Status: {member.memberStatus}</span>
|
||
|
|
</div>
|
||
|
|
</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
))}
|
||
|
|
</TableBody>
|
||
|
|
</Table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Mobile Card View */}
|
||
|
|
<div className="lg:hidden space-y-4">
|
||
|
|
{filteredMembers.map((member) => (
|
||
|
|
<Card key={member.id} className="p-4">
|
||
|
|
<div className="space-y-3">
|
||
|
|
<div className="flex justify-between items-start">
|
||
|
|
<div>
|
||
|
|
<h3 className="font-semibold text-lg">{member.name}</h3>
|
||
|
|
<p className="text-sm text-gray-600">{member.memberId}</p>
|
||
|
|
<p className="text-xs text-gray-500 font-mono bg-gray-100 px-2 py-1 rounded inline-block mt-1">
|
||
|
|
@{member.username}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
{getStatusBadge(member.memberStatus)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-2 gap-2 text-sm">
|
||
|
|
<div>
|
||
|
|
<span className="text-gray-500">Departemen:</span>
|
||
|
|
<p className="font-medium">{member.department}</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span className="text-gray-500">Bergabung:</span>
|
||
|
|
<p className="font-medium">
|
||
|
|
{member.joinDate ? new Date(member.joinDate).toLocaleDateString("id-ID") : "-"}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="text-sm">
|
||
|
|
<span className="text-gray-500">Login Terakhir:</span>
|
||
|
|
<p className="font-medium">
|
||
|
|
{member.lastLogin
|
||
|
|
? new Date(member.lastLogin).toLocaleDateString("id-ID")
|
||
|
|
: "Belum pernah login"}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Mobile Action Buttons */}
|
||
|
|
<div className="flex gap-2 pt-2">
|
||
|
|
{member.memberStatus === "pending" && (
|
||
|
|
<>
|
||
|
|
<Dialog>
|
||
|
|
<DialogTrigger asChild>
|
||
|
|
<Button size="sm" className="bg-green-600 hover:bg-green-700 text-white flex-1">
|
||
|
|
<CheckCircle className="h-3 w-3 mr-1" />
|
||
|
|
Verifikasi
|
||
|
|
</Button>
|
||
|
|
</DialogTrigger>
|
||
|
|
<DialogContent>
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle>Konfirmasi Verifikasi</DialogTitle>
|
||
|
|
<DialogDescription>
|
||
|
|
Apakah Anda yakin ingin memverifikasi anggota berikut?
|
||
|
|
</DialogDescription>
|
||
|
|
</DialogHeader>
|
||
|
|
<div className="py-4">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<p>
|
||
|
|
<strong>Nama:</strong> {member.name}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<strong>ID Anggota:</strong> {member.memberId}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<strong>Departemen:</strong> {member.department}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<strong>Status Saat Ini:</strong> Menunggu Verifikasi
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex justify-end gap-3">
|
||
|
|
<DialogTrigger asChild>
|
||
|
|
<Button variant="outline">Batal</Button>
|
||
|
|
</DialogTrigger>
|
||
|
|
<Button
|
||
|
|
onClick={() => handleStatusChange(member.id, "verified")}
|
||
|
|
disabled={loading}
|
||
|
|
className="bg-green-600 hover:bg-green-700"
|
||
|
|
>
|
||
|
|
{loading ? "Memverifikasi..." : "Ya, Verifikasi"}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
<Dialog>
|
||
|
|
<DialogTrigger asChild>
|
||
|
|
<Button size="sm" variant="destructive" className="flex-1">
|
||
|
|
<XCircle className="h-3 w-3 mr-1" />
|
||
|
|
Tolak
|
||
|
|
</Button>
|
||
|
|
</DialogTrigger>
|
||
|
|
<DialogContent>
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle>Konfirmasi Penolakan</DialogTitle>
|
||
|
|
<DialogDescription>
|
||
|
|
Apakah Anda yakin ingin menolak verifikasi anggota berikut?
|
||
|
|
</DialogDescription>
|
||
|
|
</DialogHeader>
|
||
|
|
<div className="py-4">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<p>
|
||
|
|
<strong>Nama:</strong> {member.name}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<strong>ID Anggota:</strong> {member.memberId}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<strong>Departemen:</strong> {member.department}
|
||
|
|
</p>
|
||
|
|
<p className="text-red-600">
|
||
|
|
<strong>Aksi:</strong> Anggota akan ditolak dan tidak dapat login
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex justify-end gap-3">
|
||
|
|
<DialogTrigger asChild>
|
||
|
|
<Button variant="outline">Batal</Button>
|
||
|
|
</DialogTrigger>
|
||
|
|
<Button
|
||
|
|
onClick={() => handleStatusChange(member.id, "rejected")}
|
||
|
|
disabled={loading}
|
||
|
|
variant="destructive"
|
||
|
|
>
|
||
|
|
{loading ? "Menolak..." : "Ya, Tolak"}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{member.memberStatus === "rejected" && (
|
||
|
|
<Dialog>
|
||
|
|
<DialogTrigger asChild>
|
||
|
|
<Button size="sm" className="bg-green-600 hover:bg-green-700 text-white w-full">
|
||
|
|
<CheckCircle className="h-3 w-3 mr-1" />
|
||
|
|
Verifikasi
|
||
|
|
</Button>
|
||
|
|
</DialogTrigger>
|
||
|
|
<DialogContent>
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle>Konfirmasi Verifikasi</DialogTitle>
|
||
|
|
<DialogDescription>
|
||
|
|
Anggota ini sebelumnya ditolak. Apakah Anda yakin ingin memverifikasinya sekarang?
|
||
|
|
</DialogDescription>
|
||
|
|
</DialogHeader>
|
||
|
|
<div className="py-4">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<p>
|
||
|
|
<strong>Nama:</strong> {member.name}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<strong>ID Anggota:</strong> {member.memberId}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<strong>Status Saat Ini:</strong> <span className="text-red-600">Ditolak</span>
|
||
|
|
</p>
|
||
|
|
<p className="text-green-600">
|
||
|
|
<strong>Aksi:</strong> Anggota akan dapat login dan voting
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex justify-end gap-3">
|
||
|
|
<DialogTrigger asChild>
|
||
|
|
<Button variant="outline">Batal</Button>
|
||
|
|
</DialogTrigger>
|
||
|
|
<Button
|
||
|
|
onClick={() => handleStatusChange(member.id, "verified")}
|
||
|
|
disabled={loading}
|
||
|
|
className="bg-green-600 hover:bg-green-700"
|
||
|
|
>
|
||
|
|
{loading ? "Memverifikasi..." : "Ya, Verifikasi"}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{member.memberStatus === "verified" && (
|
||
|
|
<Dialog>
|
||
|
|
<DialogTrigger asChild>
|
||
|
|
<Button
|
||
|
|
size="sm"
|
||
|
|
variant="outline"
|
||
|
|
className="border-yellow-300 text-yellow-700 hover:bg-yellow-50 bg-transparent w-full"
|
||
|
|
>
|
||
|
|
<Clock className="h-3 w-3 mr-1" />
|
||
|
|
Tunda
|
||
|
|
</Button>
|
||
|
|
</DialogTrigger>
|
||
|
|
<DialogContent>
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle>Konfirmasi Penangguhan</DialogTitle>
|
||
|
|
<DialogDescription>
|
||
|
|
Apakah Anda yakin ingin menangguhkan verifikasi anggota ini?
|
||
|
|
</DialogDescription>
|
||
|
|
</DialogHeader>
|
||
|
|
<div className="py-4">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<p>
|
||
|
|
<strong>Nama:</strong> {member.name}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<strong>ID Anggota:</strong> {member.memberId}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<strong>Status Saat Ini:</strong>{" "}
|
||
|
|
<span className="text-green-600">Terverifikasi</span>
|
||
|
|
</p>
|
||
|
|
<p className="text-yellow-600">
|
||
|
|
<strong>Aksi:</strong> Anggota tidak akan dapat login sementara
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex justify-end gap-3">
|
||
|
|
<DialogTrigger asChild>
|
||
|
|
<Button variant="outline">Batal</Button>
|
||
|
|
</DialogTrigger>
|
||
|
|
<Button
|
||
|
|
onClick={() => handleStatusChange(member.id, "pending")}
|
||
|
|
disabled={loading}
|
||
|
|
className="bg-yellow-600 hover:bg-yellow-700 text-white"
|
||
|
|
>
|
||
|
|
{loading ? "Menangguhkan..." : "Ya, Tunda"}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{filteredMembers.length === 0 && (
|
||
|
|
<div className="text-center py-8">
|
||
|
|
<Users className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
||
|
|
<h3 className="text-lg font-medium mb-2">Tidak ada anggota ditemukan</h3>
|
||
|
|
<p className="text-gray-600">Coba ubah filter atau kata kunci pencarian</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function MembersPage() {
|
||
|
|
return (
|
||
|
|
<AuthGuard requiredRole="admin">
|
||
|
|
<MembersPageContent />
|
||
|
|
</AuthGuard>
|
||
|
|
)
|
||
|
|
}
|