b23393bf35
- Backend: - Add Stripe subscription fields to companies (migration 019) - Implement Stripe Checkout and Webhook handlers - Add Metrics API (view count, recording) - Update Company and Job models - Frontend: - Add Google Analytics component - Implement User CRUD in Backoffice (Dashboard) - Add 'Featured' badge to JobCard - Docs: Update Roadmap and artifacts
347 lines
16 KiB
TypeScript
347 lines
16 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { useRouter } from "next/navigation"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { Plus, Search, Trash2, Loader2, RefreshCw, Pencil } from "lucide-react"
|
|
import { usersApi, type ApiUser } from "@/lib/api"
|
|
import { getCurrentUser } from "@/lib/auth"
|
|
import { toast } from "sonner"
|
|
|
|
export default function AdminUsersPage() {
|
|
const router = useRouter()
|
|
const [users, setUsers] = useState<ApiUser[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [searchTerm, setSearchTerm] = useState("")
|
|
const [isDialogOpen, setIsDialogOpen] = useState(false)
|
|
const [creating, setCreating] = useState(false)
|
|
const [editingId, setEditingId] = useState<string | null>(null)
|
|
const [formData, setFormData] = useState({
|
|
name: "",
|
|
email: "",
|
|
password: "",
|
|
role: "jobSeeker",
|
|
})
|
|
|
|
useEffect(() => {
|
|
const user = getCurrentUser()
|
|
if (!user || (!user.roles?.includes("superadmin") && user.role !== "admin")) {
|
|
router.push("/dashboard")
|
|
return
|
|
}
|
|
loadUsers()
|
|
}, [router])
|
|
|
|
const loadUsers = async () => {
|
|
try {
|
|
setLoading(true)
|
|
const data = await usersApi.list()
|
|
setUsers(data || [])
|
|
} catch (error) {
|
|
console.error("Error loading users:", error)
|
|
toast.error("Erro ao carregar usuários")
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleCreate = async () => {
|
|
// This is now handled by handleSubmit
|
|
handleSubmit()
|
|
}
|
|
|
|
const handleEditClick = (user: ApiUser) => {
|
|
setEditingId(user.id)
|
|
setFormData({
|
|
name: user.name,
|
|
email: user.email,
|
|
password: "", // Password optional for update
|
|
role: user.role,
|
|
})
|
|
setIsDialogOpen(true)
|
|
}
|
|
|
|
const handleSubmit = async () => {
|
|
try {
|
|
setCreating(true)
|
|
if (editingId) {
|
|
// Update existing user
|
|
const updateData = { ...formData }
|
|
if (!updateData.password) delete (updateData as any).password
|
|
|
|
await usersApi.update(editingId, updateData)
|
|
toast.success("Usuário atualizado com sucesso!")
|
|
} else {
|
|
// Create new user
|
|
await usersApi.create(formData)
|
|
toast.success("Usuário criado com sucesso!")
|
|
}
|
|
setIsDialogOpen(false)
|
|
setFormData({ name: "", email: "", password: "", role: "jobSeeker" })
|
|
setEditingId(null)
|
|
loadUsers()
|
|
} catch (error) {
|
|
console.error("Error saving user:", error)
|
|
toast.error("Erro ao salvar usuário")
|
|
} finally {
|
|
setCreating(false)
|
|
}
|
|
}
|
|
|
|
const handleDelete = async (id: string) => {
|
|
if (!confirm("Tem certeza que deseja excluir este usuário?")) return
|
|
try {
|
|
await usersApi.delete(id)
|
|
toast.success("Usuário excluído!")
|
|
loadUsers()
|
|
} catch (error) {
|
|
console.error("Error deleting user:", error)
|
|
toast.error("Erro ao excluir usuário")
|
|
}
|
|
}
|
|
|
|
const filteredUsers = users.filter(
|
|
(user) =>
|
|
user.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
user.email?.toLowerCase().includes(searchTerm.toLowerCase())
|
|
)
|
|
|
|
const getRoleBadge = (role: string) => {
|
|
const labels: Record<string, string> = {
|
|
superadmin: "Super Admin",
|
|
companyAdmin: "Admin Empresa",
|
|
recruiter: "Recrutador",
|
|
jobSeeker: "Candidato",
|
|
admin: "Admin",
|
|
company: "Empresa"
|
|
}
|
|
const colors: Record<string, "default" | "secondary" | "destructive" | "outline"> = {
|
|
superadmin: "destructive",
|
|
companyAdmin: "default",
|
|
recruiter: "secondary",
|
|
jobSeeker: "outline",
|
|
admin: "destructive",
|
|
company: "default"
|
|
}
|
|
const label = labels[role] || role || "Usuário"
|
|
return <Badge variant={colors[role] || "outline"}>{label}</Badge>
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-foreground">Gestão de Usuários</h1>
|
|
<p className="text-muted-foreground mt-1">Gerencie todos os usuários da plataforma</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" onClick={loadUsers} disabled={loading}>
|
|
<RefreshCw className={`h-4 w-4 mr-2 ${loading ? "animate-spin" : ""}`} />
|
|
Atualizar
|
|
</Button>
|
|
<Dialog open={isDialogOpen} onOpenChange={(open) => {
|
|
setIsDialogOpen(open)
|
|
if (!open) {
|
|
setEditingId(null)
|
|
setFormData({ name: "", email: "", password: "", role: "jobSeeker" })
|
|
}
|
|
}}>
|
|
<DialogTrigger asChild>
|
|
<Button className="gap-2">
|
|
<Plus className="h-4 w-4" />
|
|
Novo Usuário
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>{editingId ? "Editar Usuário" : "Criar Novo Usuário"}</DialogTitle>
|
|
<DialogDescription>
|
|
{editingId ? "Atualize os dados do usuário" : "Preencha os dados do novo usuário"}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="name">Nome</Label>
|
|
<Input
|
|
id="name"
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
placeholder="Nome completo"
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
value={formData.email}
|
|
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
|
placeholder="email@exemplo.com"
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="password">Senha {editingId && "(opcional)"}</Label>
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
value={formData.password}
|
|
onChange={(e) => setFormData({ ...formData, password: e.target.value })}
|
|
placeholder={editingId ? "Deixe em branco para manter" : "Senha segura"}
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="role">Função</Label>
|
|
<Select value={formData.role} onValueChange={(v) => setFormData({ ...formData, role: v })}>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="superadmin">Super Admin</SelectItem>
|
|
<SelectItem value="companyAdmin">Admin Empresa</SelectItem>
|
|
<SelectItem value="recruiter">Recrutador</SelectItem>
|
|
<SelectItem value="jobSeeker">Candidato</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setIsDialogOpen(false)}>Cancelar</Button>
|
|
<Button onClick={handleSubmit} disabled={creating}>
|
|
{creating && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
|
|
{editingId ? "Salvar Alterações" : "Criar Usuário"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="grid gap-4 md:grid-cols-4">
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardDescription>Total de Usuários</CardDescription>
|
|
<CardTitle className="text-3xl">{users.length}</CardTitle>
|
|
</CardHeader>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardDescription>Admins</CardDescription>
|
|
<CardTitle className="text-3xl">
|
|
{users.filter((u) => u.role === "superadmin" || u.role === "companyAdmin").length}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardDescription>Recrutadores</CardDescription>
|
|
<CardTitle className="text-3xl">{users.filter((u) => u.role === "recruiter").length}</CardTitle>
|
|
</CardHeader>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardDescription>Candidatos</CardDescription>
|
|
<CardTitle className="text-3xl">{users.filter((u) => u.role === "jobSeeker").length}</CardTitle>
|
|
</CardHeader>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Table */}
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center gap-4">
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Buscar usuários por nome ou email..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-10"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-8">
|
|
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : (
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Nome</TableHead>
|
|
<TableHead>Email</TableHead>
|
|
<TableHead>Função</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead>Data Criação</TableHead>
|
|
<TableHead className="text-right">Ações</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredUsers.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={6} className="text-center text-muted-foreground py-8">
|
|
Nenhum usuário encontrado
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
filteredUsers.map((user) => (
|
|
<TableRow key={user.id}>
|
|
<TableCell className="font-medium">{user.name}</TableCell>
|
|
<TableCell>{user.email}</TableCell>
|
|
<TableCell>{getRoleBadge(user.role)}</TableCell>
|
|
<TableCell>
|
|
<Badge variant={user.status === "active" ? "default" : "secondary"}>
|
|
{user.status === "active" ? "Ativo" : user.status}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
{user.created_at ? new Date(user.created_at).toLocaleDateString("pt-BR") : "-"}
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<div className="flex justify-end gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => handleEditClick(user)}
|
|
>
|
|
<Pencil className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => handleDelete(user.id)}
|
|
disabled={user.role === "superadmin"}
|
|
>
|
|
<Trash2 className="h-4 w-4 text-destructive" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|