Add dockre file
This commit is contained in:
Aditya Siregar
@@ -0,0 +1,3 @@
|
||||
export default function Loading() {
|
||||
return null
|
||||
}
|
||||
@@ -0,0 +1,910 @@
|
||||
"use client"
|
||||
|
||||
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,
|
||||
Loader2,
|
||||
Upload,
|
||||
} 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 { useToast } from "@/hooks/use-toast"
|
||||
import apiClient from "@/lib/api-client"
|
||||
import * as XLSX from "xlsx"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
|
||||
interface User {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
is_active: boolean
|
||||
created_at: string
|
||||
updated_at: string
|
||||
roles: Array<{
|
||||
id: string
|
||||
name: string
|
||||
code: string
|
||||
}>
|
||||
department_response?: {
|
||||
name: string
|
||||
} | null
|
||||
}
|
||||
|
||||
interface ApiResponse {
|
||||
success: boolean
|
||||
data: {
|
||||
users: User[]
|
||||
pagination: {
|
||||
total_count: number
|
||||
page: number
|
||||
limit: number
|
||||
total_pages: number
|
||||
}
|
||||
}
|
||||
errors: any
|
||||
}
|
||||
|
||||
interface BulkUserRequest {
|
||||
name: string
|
||||
email: string
|
||||
password: string
|
||||
role: string
|
||||
}
|
||||
|
||||
interface BulkCreateUsersRequest {
|
||||
users: BulkUserRequest[]
|
||||
}
|
||||
|
||||
interface BulkCreateAsyncResponse {
|
||||
job_id: string
|
||||
message: string
|
||||
status: string
|
||||
}
|
||||
|
||||
interface BulkJobResult {
|
||||
job_id: string
|
||||
status: string
|
||||
message: string
|
||||
started_at: string
|
||||
finished_at?: string
|
||||
summary: {
|
||||
total: number
|
||||
succeeded: number
|
||||
failed: number
|
||||
}
|
||||
created: Array<{
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
is_active: boolean
|
||||
created_at: string
|
||||
updated_at: string
|
||||
roles: Array<{
|
||||
id: string
|
||||
name: string
|
||||
code: string
|
||||
}>
|
||||
department_response: Array<{
|
||||
name: string
|
||||
}>
|
||||
}>
|
||||
failed: Array<{
|
||||
user: BulkUserRequest
|
||||
error: string
|
||||
}>
|
||||
}
|
||||
|
||||
interface ExcelUser {
|
||||
Nama: string
|
||||
Password: string
|
||||
Email: string
|
||||
Role: string
|
||||
}
|
||||
|
||||
function MembersPageContent() {
|
||||
const { user } = useAuth("admin")
|
||||
const { toast } = useToast()
|
||||
const router = useRouter()
|
||||
|
||||
const [users, setUsers] = useState<User[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
const [statusFilter, setStatusFilter] = useState("all")
|
||||
|
||||
// Bulk upload states
|
||||
const [showBulkUpload, setShowBulkUpload] = useState(false)
|
||||
const [bulkUsers, setBulkUsers] = useState<BulkUserRequest[]>([])
|
||||
const [selectedUsers, setSelectedUsers] = useState<Set<number>>(new Set())
|
||||
const [bulkLoading, setBulkLoading] = useState(false)
|
||||
const [selectAll, setSelectAll] = useState(false)
|
||||
|
||||
// Job tracking states
|
||||
const [currentJobId, setCurrentJobId] = useState<string | null>(null)
|
||||
const [jobStatus, setJobStatus] = useState<BulkJobResult | null>(null)
|
||||
const [jobLoading, setJobLoading] = useState(false)
|
||||
const [showJobStatus, setShowJobStatus] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
fetchUsers()
|
||||
loadStoredJob()
|
||||
}
|
||||
}, [user])
|
||||
|
||||
const fetchUsers = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await apiClient.get('/api/v1/users')
|
||||
const data: ApiResponse = response.data
|
||||
|
||||
if (data.success) {
|
||||
setUsers(data.data.users)
|
||||
toast({
|
||||
title: "Success",
|
||||
description: `Fetched ${data.data.users.length} users`,
|
||||
})
|
||||
} else {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to fetch users",
|
||||
variant: "destructive"
|
||||
})
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Error fetching users:', error)
|
||||
toast({
|
||||
title: "Error",
|
||||
description: error.response?.data?.errors || "Failed to fetch users from API",
|
||||
variant: "destructive"
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusBadge = (isActive: boolean) => {
|
||||
if (isActive) {
|
||||
return (
|
||||
<Badge className="bg-green-100 text-green-800 border-green-200">
|
||||
<CheckCircle className="h-3 w-3 mr-1" />
|
||||
Active
|
||||
</Badge>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<Badge className="bg-red-100 text-red-800 border-red-200">
|
||||
<XCircle className="h-3 w-3 mr-1" />
|
||||
Inactive
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const getRoleBadge = (roles: User['roles']) => {
|
||||
if (roles && roles.length > 0) {
|
||||
return (
|
||||
<Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
|
||||
{roles[0].name}
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Badge variant="outline" className="bg-gray-50 text-gray-700 border-gray-200">
|
||||
No Role
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
|
||||
const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0]
|
||||
if (!file) return
|
||||
|
||||
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) as ExcelUser[]
|
||||
|
||||
// Transform Excel data to API format
|
||||
const transformedUsers: BulkUserRequest[] = jsonData.map((row, index) => ({
|
||||
name: row.Nama?.trim() || '',
|
||||
email: row.Email?.trim() || '',
|
||||
password: row.Password?.trim() || '',
|
||||
role: row.Role?.trim() || 'Staff'
|
||||
})).filter(user => user.name && user.email && user.password)
|
||||
|
||||
setBulkUsers(transformedUsers)
|
||||
setSelectedUsers(new Set())
|
||||
setSelectAll(false)
|
||||
setShowBulkUpload(true)
|
||||
|
||||
toast({
|
||||
title: "File Uploaded",
|
||||
description: `Processed ${transformedUsers.length} users from Excel file`,
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Error processing Excel file:', error)
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to process Excel file. Please check the format.",
|
||||
variant: "destructive"
|
||||
})
|
||||
}
|
||||
}
|
||||
reader.readAsArrayBuffer(file)
|
||||
}
|
||||
|
||||
const handleSelectUser = (index: number) => {
|
||||
const newSelected = new Set(selectedUsers)
|
||||
if (newSelected.has(index)) {
|
||||
newSelected.delete(index)
|
||||
} else {
|
||||
newSelected.add(index)
|
||||
}
|
||||
setSelectedUsers(newSelected)
|
||||
}
|
||||
|
||||
const handleSelectAll = () => {
|
||||
if (selectAll) {
|
||||
setSelectedUsers(new Set())
|
||||
setSelectAll(false)
|
||||
} else {
|
||||
setSelectedUsers(new Set(bulkUsers.map((_, index) => index)))
|
||||
setSelectAll(true)
|
||||
}
|
||||
}
|
||||
|
||||
const handleBulkCreate = async () => {
|
||||
if (selectedUsers.size === 0) {
|
||||
toast({
|
||||
title: "No Users Selected",
|
||||
description: "Please select at least one user to create",
|
||||
variant: "destructive"
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
const selectedUserData = Array.from(selectedUsers).map(index => bulkUsers[index])
|
||||
|
||||
try {
|
||||
setBulkLoading(true)
|
||||
const response = await apiClient.post('/api/v1/users/bulk', {
|
||||
users: selectedUserData
|
||||
})
|
||||
|
||||
if (response.data.success) {
|
||||
const jobData: BulkCreateAsyncResponse = response.data.data
|
||||
|
||||
// Store job ID in localStorage
|
||||
localStorage.setItem("bulk_job_id", jobData.job_id)
|
||||
setCurrentJobId(jobData.job_id)
|
||||
|
||||
toast({
|
||||
title: "Bulk Upload Started",
|
||||
description: `Job ${jobData.job_id} created. You can track progress below.`,
|
||||
})
|
||||
|
||||
// Show job status dialog
|
||||
setShowJobStatus(true)
|
||||
setShowBulkUpload(false)
|
||||
|
||||
// Start polling for job status
|
||||
setTimeout(() => {
|
||||
checkJobStatus(jobData.job_id)
|
||||
}, 2000)
|
||||
} else {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: response.data.errors || "Failed to create users",
|
||||
variant: "destructive"
|
||||
})
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Error creating bulk users:', error)
|
||||
toast({
|
||||
title: "Error",
|
||||
description: error.response?.data?.errors || "Failed to create users",
|
||||
variant: "destructive"
|
||||
})
|
||||
} finally {
|
||||
setBulkLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const checkJobStatus = async (jobId: string) => {
|
||||
try {
|
||||
setJobLoading(true)
|
||||
const response = await apiClient.get(`/api/v1/users/bulk/job/${jobId}`)
|
||||
|
||||
if (response.data.success) {
|
||||
const jobResult: BulkJobResult = response.data.data
|
||||
setJobStatus(jobResult)
|
||||
|
||||
// If job is completed, refresh users list
|
||||
if (jobResult.status === 'completed' || jobResult.status === 'failed') {
|
||||
await fetchUsers()
|
||||
|
||||
// Show completion message
|
||||
if (jobResult.status === 'completed') {
|
||||
toast({
|
||||
title: "Bulk Upload Completed",
|
||||
description: `Successfully created ${jobResult.summary.succeeded} users. ${jobResult.summary.failed} failed.`,
|
||||
})
|
||||
} else {
|
||||
toast({
|
||||
title: "Bulk Upload Failed",
|
||||
description: `Failed to create users: ${jobResult.message}`,
|
||||
variant: "destructive"
|
||||
})
|
||||
}
|
||||
} else {
|
||||
// Continue polling if job is still running
|
||||
setTimeout(() => {
|
||||
checkJobStatus(jobId)
|
||||
}, 5000)
|
||||
}
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Error checking job status:', error)
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to check job status",
|
||||
variant: "destructive"
|
||||
})
|
||||
} finally {
|
||||
setJobLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const loadStoredJob = () => {
|
||||
const storedJobId = localStorage.getItem("bulk_job_id")
|
||||
if (storedJobId) {
|
||||
setCurrentJobId(storedJobId)
|
||||
setShowJobStatus(true)
|
||||
checkJobStatus(storedJobId)
|
||||
}
|
||||
}
|
||||
|
||||
const filteredUsers = users.filter((user) => {
|
||||
const matchesSearch =
|
||||
user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
(user.department_response?.name || "").toLowerCase().includes(searchTerm.toLowerCase())
|
||||
|
||||
const matchesStatus = statusFilter === "all" ||
|
||||
(statusFilter === "active" && user.is_active) ||
|
||||
(statusFilter === "inactive" && !user.is_active)
|
||||
|
||||
return matchesSearch && matchesStatus
|
||||
})
|
||||
|
||||
if (!user) return null
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow-sm border-b">
|
||||
<div className="container mx-auto px-4 py-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="/admin">
|
||||
<Button variant="ghost" size="sm" className="gap-2">
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Back to Admin
|
||||
</Button>
|
||||
</Link>
|
||||
<div className="h-6 w-px bg-gray-300"></div>
|
||||
<h1 className="text-xl font-semibold text-gray-900">User Management</h1>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
{/* Statistics */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Total Users</CardTitle>
|
||||
<Users className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{users.length}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Active Users</CardTitle>
|
||||
<UserCheck className="h-4 w-4 text-green-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-green-600">
|
||||
{users.filter(u => u.is_active).length}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Inactive Users</CardTitle>
|
||||
<Clock className="h-4 w-4 text-yellow-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-yellow-600">
|
||||
{users.filter(u => !u.is_active).length}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Departments</CardTitle>
|
||||
<AlertCircle className="h-4 w-4 text-blue-600" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-blue-600">
|
||||
{new Set(users.map(u => u.department_response?.name).filter(Boolean)).size}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Filters and Search */}
|
||||
<Card className="mb-6">
|
||||
<CardHeader>
|
||||
<CardTitle>Filters & Search</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
<div className="flex-1">
|
||||
<Label htmlFor="search">Search</Label>
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
|
||||
<Input
|
||||
id="search"
|
||||
placeholder="Search by name, email, or department..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full md:w-48">
|
||||
<Label htmlFor="status">Status</Label>
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Status</SelectItem>
|
||||
<SelectItem value="active">Active</SelectItem>
|
||||
<SelectItem value="inactive">Inactive</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-end gap-2">
|
||||
<Button onClick={fetchUsers} disabled={loading} className="gap-2">
|
||||
{loading ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Filter className="h-4 w-4" />
|
||||
)}
|
||||
Refresh
|
||||
</Button>
|
||||
|
||||
<div className="relative">
|
||||
<input
|
||||
type="file"
|
||||
accept=".xlsx,.xls"
|
||||
onChange={handleFileUpload}
|
||||
className="hidden"
|
||||
id="excel-upload"
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => document.getElementById('excel-upload')?.click()}
|
||||
className="gap-2"
|
||||
>
|
||||
<Upload className="h-4 w-4" />
|
||||
Upload Excel
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{currentJobId && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setShowJobStatus(true)
|
||||
checkJobStatus(currentJobId)
|
||||
}}
|
||||
className="gap-2"
|
||||
>
|
||||
<Clock className="h-4 w-4" />
|
||||
Check Job Status
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Users Table */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Users List</CardTitle>
|
||||
<CardDescription>
|
||||
Showing {filteredUsers.length} of {users.length} users
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<div className="text-center py-8">
|
||||
<Loader2 className="h-8 w-8 animate-spin mx-auto mb-4" />
|
||||
<p className="text-gray-600">Loading users...</p>
|
||||
</div>
|
||||
) : filteredUsers.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">No users found</h3>
|
||||
<p className="text-gray-600">Try adjusting your search or filters</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Department</TableHead>
|
||||
<TableHead>Role</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Created</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredUsers.map((user) => (
|
||||
<TableRow key={user.id}>
|
||||
<TableCell className="font-medium">{user.name}</TableCell>
|
||||
<TableCell>{user.email}</TableCell>
|
||||
<TableCell>
|
||||
{user.department_response?.name || "N/A"}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{getRoleBadge(user.roles)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{getStatusBadge(user.is_active)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{new Date(user.created_at).toLocaleDateString()}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Bulk Upload Dialog */}
|
||||
{showBulkUpload && (
|
||||
<Dialog open={showBulkUpload} onOpenChange={setShowBulkUpload}>
|
||||
<DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Bulk User Upload</DialogTitle>
|
||||
<DialogDescription>
|
||||
Review and select users from the uploaded Excel file. Selected users will be created in the system.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Bulk Actions */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="select-all"
|
||||
checked={selectAll}
|
||||
onCheckedChange={handleSelectAll}
|
||||
/>
|
||||
<Label htmlFor="select-all">Select All ({bulkUsers.length})</Label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-gray-600">
|
||||
{selectedUsers.size} of {bulkUsers.length} selected
|
||||
</span>
|
||||
<Button
|
||||
onClick={handleBulkCreate}
|
||||
disabled={bulkLoading || selectedUsers.size === 0}
|
||||
className="gap-2"
|
||||
>
|
||||
{bulkLoading ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Plus className="h-4 w-4" />
|
||||
)}
|
||||
Create {selectedUsers.size} Users
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Users Table */}
|
||||
<div className="border rounded-lg">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-12">Select</TableHead>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Password</TableHead>
|
||||
<TableHead>Role</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{bulkUsers.map((user, index) => (
|
||||
<TableRow key={index}>
|
||||
<TableCell>
|
||||
<Checkbox
|
||||
checked={selectedUsers.has(index)}
|
||||
onCheckedChange={() => handleSelectUser(index)}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">{user.name}</TableCell>
|
||||
<TableCell>{user.email}</TableCell>
|
||||
<TableCell className="font-mono text-sm">
|
||||
{user.password.length > 8 ? `${user.password.substring(0, 8)}...` : user.password}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline">{user.role}</Badge>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* Instructions */}
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<h4 className="font-medium text-blue-900 mb-2">Excel Format Requirements:</h4>
|
||||
<ul className="text-sm text-blue-800 space-y-1">
|
||||
<li>• <strong>Nama:</strong> User's full name (required)</li>
|
||||
<li>• <strong>Password:</strong> User's password (min 6 characters)</li>
|
||||
<li>• <strong>Email:</strong> Valid email address (required)</li>
|
||||
<li>• <strong>Role:</strong> User role (defaults to "Staff" if empty)</li>
|
||||
</ul>
|
||||
|
||||
<div className="mt-3 pt-3 border-t border-blue-200">
|
||||
<p className="text-sm text-blue-800">
|
||||
<strong>Note:</strong> Bulk user creation is processed asynchronously.
|
||||
You'll receive a job ID to track progress.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)}
|
||||
|
||||
{/* Job Status Dialog */}
|
||||
{showJobStatus && (
|
||||
<Dialog open={showJobStatus} onOpenChange={setShowJobStatus}>
|
||||
<DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Bulk Upload Job Status</DialogTitle>
|
||||
<DialogDescription>
|
||||
{currentJobId && `Job ID: ${currentJobId}`}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
{jobLoading ? (
|
||||
<div className="text-center py-8">
|
||||
<Loader2 className="h-8 w-8 animate-spin mx-auto mb-4" />
|
||||
<p className="text-gray-600">Checking job status...</p>
|
||||
</div>
|
||||
) : jobStatus ? (
|
||||
<>
|
||||
{/* Job Summary */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Job Summary</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-blue-600">{jobStatus.summary.total}</div>
|
||||
<div className="text-sm text-gray-600">Total Users</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-green-600">{jobStatus.summary.succeeded}</div>
|
||||
<div className="text-sm text-gray-600">Succeeded</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-red-600">{jobStatus.summary.failed}</div>
|
||||
<div className="text-sm text-gray-600">Failed</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-gray-600">
|
||||
{jobStatus.status === 'completed' ? '✅' :
|
||||
jobStatus.status === 'failed' ? '❌' : '⏳'}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600 capitalize">{jobStatus.status}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 p-3 bg-gray-50 rounded-lg">
|
||||
<div className="text-sm">
|
||||
<strong>Started:</strong> {new Date(jobStatus.started_at).toLocaleString()}
|
||||
</div>
|
||||
{jobStatus.finished_at && (
|
||||
<div className="text-sm">
|
||||
<strong>Finished:</strong> {new Date(jobStatus.finished_at).toLocaleString()}
|
||||
</div>
|
||||
)}
|
||||
<div className="text-sm">
|
||||
<strong>Message:</strong> {jobStatus.message}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Created Users */}
|
||||
{jobStatus.created.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-green-700">Successfully Created Users</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Created</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{jobStatus.created.map((user) => (
|
||||
<TableRow key={user.id}>
|
||||
<TableCell className="font-medium">{user.name}</TableCell>
|
||||
<TableCell>{user.email}</TableCell>
|
||||
<TableCell>
|
||||
<Badge className="bg-green-100 text-green-800 border-green-200">
|
||||
<CheckCircle className="h-3 w-3 mr-1" />
|
||||
Active
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{new Date(user.created_at).toLocaleDateString()}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Failed Users */}
|
||||
{jobStatus.failed.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-red-700">Failed Users</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Role</TableHead>
|
||||
<TableHead>Error</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{jobStatus.failed.map((failedUser, index) => (
|
||||
<TableRow key={index}>
|
||||
<TableCell className="font-medium">{failedUser.user.name}</TableCell>
|
||||
<TableCell>{failedUser.user.email}</TableCell>
|
||||
<TableCell>{failedUser.user.role}</TableCell>
|
||||
<TableCell className="text-red-600 text-sm">
|
||||
{failedUser.error}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex justify-end gap-3">
|
||||
{jobStatus.status === 'completed' && (
|
||||
<Button
|
||||
onClick={() => {
|
||||
setShowJobStatus(false)
|
||||
setCurrentJobId(null)
|
||||
localStorage.removeItem("bulk_job_id")
|
||||
}}
|
||||
>
|
||||
Close & Clear Job
|
||||
</Button>
|
||||
)}
|
||||
{jobStatus.status !== 'completed' && jobStatus.status !== 'failed' && (
|
||||
<Button
|
||||
onClick={() => checkJobStatus(currentJobId!)}
|
||||
disabled={jobLoading}
|
||||
variant="outline"
|
||||
>
|
||||
{jobLoading ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
||||
Checking...
|
||||
</>
|
||||
) : (
|
||||
'Refresh Status'
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<Clock className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
||||
<p className="text-gray-600">No job status available</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function MembersPage() {
|
||||
return (
|
||||
<AuthGuard requiredRole="superadmin">
|
||||
<MembersPageContent />
|
||||
</AuthGuard>
|
||||
)
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user