386 lines
19 KiB
TypeScript
386 lines
19 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { useRouter } from "next/navigation"
|
|
import Link from "next/link"
|
|
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,
|
|
} from "@/components/ui/dialog"
|
|
import { Label } from "@/components/ui/label"
|
|
import {
|
|
Plus,
|
|
Search,
|
|
Loader2,
|
|
RefreshCw,
|
|
Building2,
|
|
CheckCircle,
|
|
XCircle,
|
|
Eye,
|
|
Trash2,
|
|
Pencil,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
Users,
|
|
ShieldCheck,
|
|
AlertCircle
|
|
} from "lucide-react"
|
|
import { Switch } from "@/components/ui/switch"
|
|
import { adminCompaniesApi, type AdminCompany } from "@/lib/api"
|
|
import { getCurrentUser, isAdminUser } from "@/lib/auth"
|
|
import { toast } from "sonner"
|
|
import { ConfirmModal } from "@/components/confirm-modal"
|
|
import { Skeleton } from "@/components/ui/skeleton"
|
|
import { useTranslation } from "@/lib/i18n"
|
|
import { motion } from "framer-motion"
|
|
|
|
const companyDateFormatter = new Intl.DateTimeFormat("pt-BR", {
|
|
dateStyle: "medium",
|
|
})
|
|
|
|
const formatDescription = (description: string | undefined) => {
|
|
if (!description) return null
|
|
try {
|
|
const parsed = JSON.parse(description)
|
|
if (typeof parsed === 'object' && parsed !== null) {
|
|
return (
|
|
<dl className="space-y-2">
|
|
{Object.entries(parsed).map(([key, value]) => (
|
|
<div key={key} className="flex flex-col">
|
|
<dt className="text-xs text-muted-foreground capitalize">
|
|
{key.replace(/([A-Z])/g, ' $1').replace(/_/g, ' ')}
|
|
</dt>
|
|
<dd className="text-sm font-medium">{String(value)}</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
)
|
|
}
|
|
} catch { }
|
|
return <p className="text-sm mt-1">{description}</p>
|
|
}
|
|
|
|
export default function AdminCompaniesPage() {
|
|
const { t } = useTranslation()
|
|
const router = useRouter()
|
|
const [companies, setCompanies] = useState<AdminCompany[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [searchTerm, setSearchTerm] = useState("")
|
|
const [page, setPage] = useState(1)
|
|
const [totalCompanies, setTotalCompanies] = useState(0)
|
|
const [isViewDialogOpen, setIsViewDialogOpen] = useState(false)
|
|
const [selectedCompany, setSelectedCompany] = useState<AdminCompany | null>(null)
|
|
const [companyToDelete, setCompanyToDelete] = useState<AdminCompany | null>(null)
|
|
const [updating, setUpdating] = useState(false)
|
|
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
|
|
const [editFormData, setEditFormData] = useState({
|
|
name: "",
|
|
slug: "",
|
|
email: "",
|
|
phone: "",
|
|
website: "",
|
|
document: "",
|
|
address: "",
|
|
description: "",
|
|
logoUrl: "",
|
|
yearsInMarket: "",
|
|
active: false,
|
|
verified: false,
|
|
})
|
|
|
|
useEffect(() => {
|
|
const user = getCurrentUser()
|
|
if (!isAdminUser(user)) {
|
|
router.push("/dashboard")
|
|
return
|
|
}
|
|
loadCompanies()
|
|
}, [router])
|
|
|
|
const limit = 10
|
|
const totalPages = Math.max(1, Math.ceil(totalCompanies / limit))
|
|
|
|
const loadCompanies = async (targetPage = page) => {
|
|
const pageNum = typeof targetPage === 'number' ? targetPage : page
|
|
try {
|
|
setLoading(true)
|
|
const data = await adminCompaniesApi.list(undefined, pageNum, limit)
|
|
setCompanies(data.data || [])
|
|
setTotalCompanies(data.pagination.total)
|
|
setPage(data.pagination.page)
|
|
} catch (error) {
|
|
console.error("Error loading companies:", error)
|
|
toast.error("Erro ao carregar empresas")
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const toggleStatus = async (company: AdminCompany, field: 'active' | 'verified') => {
|
|
const newValue = !company[field]
|
|
const originalCompanies = [...companies]
|
|
setCompanies(companies.map(c => c.id === company.id ? { ...c, [field]: newValue } : c))
|
|
try {
|
|
await adminCompaniesApi.updateStatus(company.id, { [field]: newValue })
|
|
toast.success(t('admin.companies.success.statusUpdated', { field }))
|
|
} catch (error) {
|
|
toast.error(`Falha ao atualizar ${field}`)
|
|
setCompanies(originalCompanies)
|
|
}
|
|
}
|
|
|
|
const confirmDelete = async () => {
|
|
if (!companyToDelete) return
|
|
try {
|
|
await adminCompaniesApi.delete(companyToDelete.id)
|
|
toast.success(t('admin.companies.success.deleted'))
|
|
setIsViewDialogOpen(false)
|
|
loadCompanies()
|
|
} catch (error) {
|
|
toast.error("Falha ao deletar empresa")
|
|
} finally {
|
|
setCompanyToDelete(null)
|
|
}
|
|
}
|
|
|
|
const handleEditClick = (company: AdminCompany) => {
|
|
setEditFormData({
|
|
name: company.name || "",
|
|
slug: company.slug || "",
|
|
email: company.email || "",
|
|
phone: company.phone || "",
|
|
website: company.website || "",
|
|
document: company.document || "",
|
|
address: company.address || "",
|
|
description: company.description || "",
|
|
logoUrl: (company as any).logoUrl || "",
|
|
yearsInMarket: (company as any).yearsInMarket || "",
|
|
active: company.active || false,
|
|
verified: company.verified || false,
|
|
})
|
|
setIsEditDialogOpen(true)
|
|
setIsViewDialogOpen(false)
|
|
}
|
|
|
|
const handleUpdate = async () => {
|
|
if (!selectedCompany) return
|
|
try {
|
|
setUpdating(true)
|
|
if (editFormData.active !== selectedCompany.active || editFormData.verified !== selectedCompany.verified) {
|
|
await adminCompaniesApi.updateStatus(selectedCompany.id, {
|
|
active: editFormData.active,
|
|
verified: editFormData.verified
|
|
})
|
|
}
|
|
await adminCompaniesApi.update(selectedCompany.id, editFormData as any)
|
|
toast.success("Empresa atualizada com sucesso")
|
|
setIsEditDialogOpen(false)
|
|
loadCompanies()
|
|
} catch (error) {
|
|
toast.error("Erro ao atualizar empresa")
|
|
} finally {
|
|
setUpdating(false)
|
|
}
|
|
}
|
|
|
|
const filteredCompanies = companies.filter(
|
|
(company) =>
|
|
company.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
company.email?.toLowerCase().includes(searchTerm.toLowerCase())
|
|
)
|
|
|
|
return (
|
|
<div className="container py-8 space-y-8">
|
|
{/* Header */}
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }}>
|
|
<h1 className="text-4xl font-extrabold tracking-tight">{t('admin.companies.title')}</h1>
|
|
<p className="text-muted-foreground text-lg">{t('admin.companies.subtitle')}</p>
|
|
</motion.div>
|
|
<div className="flex items-center gap-3">
|
|
<Button variant="outline" size="lg" onClick={() => loadCompanies()} disabled={loading} className="shadow-sm">
|
|
<RefreshCw className={`h-4 w-4 mr-2 ${loading ? "animate-spin" : ""}`} />
|
|
{t('admin.companies.refresh')}
|
|
</Button>
|
|
<Button size="lg" className="gap-2 shadow-md hover:shadow-lg transition-all" asChild>
|
|
<Link href="/dashboard/companies/new">
|
|
<Plus className="h-5 w-5" />
|
|
{t('admin.companies.newCompany')}
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats Cards */}
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
|
|
<Card className="border-l-4 border-l-blue-500 shadow-sm">
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
|
|
<CardTitle className="text-sm font-medium">Total de Empresas</CardTitle>
|
|
<Building2 className="h-4 w-4 text-blue-500" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{totalCompanies}</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-l-4 border-l-green-500 shadow-sm">
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
|
|
<CardTitle className="text-sm font-medium">Ativas</CardTitle>
|
|
<CheckCircle className="h-4 w-4 text-green-500" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{companies.filter(c => c.active).length}</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-l-4 border-l-indigo-500 shadow-sm">
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
|
|
<CardTitle className="text-sm font-medium">Verificadas</CardTitle>
|
|
<ShieldCheck className="h-4 w-4 text-indigo-500" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{companies.filter(c => c.verified).length}</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-l-4 border-l-amber-500 shadow-sm">
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
|
|
<CardTitle className="text-sm font-medium">Pendentes</CardTitle>
|
|
<AlertCircle className="h-4 w-4 text-amber-500" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{companies.filter(c => !c.verified).length}</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Content Card */}
|
|
<Card className="border-0 shadow-xl overflow-hidden bg-card/50 backdrop-blur-sm">
|
|
<CardHeader className="border-b bg-muted/30">
|
|
<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={t('admin.companies.searchPlaceholder')}
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-10 h-11 border-muted-foreground/20 focus:ring-primary"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="p-0">
|
|
{loading ? (
|
|
<div className="p-8 space-y-4">
|
|
{[...Array(5)].map((_, i) => <Skeleton key={i} className="h-16 w-full rounded-lg" />)}
|
|
</div>
|
|
) : (
|
|
<Table>
|
|
<TableHeader className="bg-muted/50">
|
|
<TableRow>
|
|
<TableHead className="w-[300px] font-bold">Empresa</TableHead>
|
|
<TableHead className="font-bold">E-mail</TableHead>
|
|
<TableHead className="font-bold">Status</TableHead>
|
|
<TableHead className="font-bold">Verificado</TableHead>
|
|
<TableHead className="font-bold">Cadastro</TableHead>
|
|
<TableHead className="text-right font-bold">Ações</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredCompanies.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={6} className="text-center py-20 text-muted-foreground">
|
|
Nenhuma empresa encontrada
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
filteredCompanies.map((company) => (
|
|
<TableRow key={company.id} className="hover:bg-muted/30 transition-colors">
|
|
<TableCell className="font-semibold text-foreground">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-primary/5 rounded-lg">
|
|
<Building2 className="h-5 w-5 text-primary" />
|
|
</div>
|
|
{company.name}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-muted-foreground">{company.email || "-"}</TableCell>
|
|
<TableCell>
|
|
<Badge
|
|
variant={company.active ? "default" : "secondary"}
|
|
className="cursor-pointer transition-all active:scale-95"
|
|
onClick={() => toggleStatus(company, 'active')}
|
|
>
|
|
{company.active ? "Ativo" : "Inativo"}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div
|
|
className="cursor-pointer hover:bg-muted p-1 rounded-full inline-flex transition-colors"
|
|
onClick={() => toggleStatus(company, 'verified')}
|
|
>
|
|
{company.verified ? (
|
|
<CheckCircle className="h-6 w-6 text-green-500" />
|
|
) : (
|
|
<XCircle className="h-6 w-6 text-muted-foreground/40" />
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-muted-foreground font-medium">
|
|
{company.createdAt ? companyDateFormatter.format(new Date(company.createdAt)) : "-"}
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<div className="flex items-center justify-end gap-1">
|
|
<Button variant="ghost" size="icon" onClick={() => { setSelectedCompany(company); setIsViewDialogOpen(true); }} className="hover:text-primary">
|
|
<Eye className="h-5 w-5" />
|
|
</Button>
|
|
<Button variant="ghost" size="icon" onClick={() => handleEditClick(company)} className="hover:text-blue-600">
|
|
<Pencil className="h-5 w-5" />
|
|
</Button>
|
|
<Button variant="ghost" size="icon" className="hover:text-destructive hover:bg-destructive/10" onClick={() => setCompanyToDelete(company)}>
|
|
<Trash2 className="h-5 w-5" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
|
|
{/* Pagination */}
|
|
{!loading && totalPages > 1 && (
|
|
<div className="p-4 border-t bg-muted/10 flex items-center justify-between">
|
|
<p className="text-sm text-muted-foreground font-medium">
|
|
Mostrando <span className="text-foreground">{(page - 1) * limit + 1}</span> a <span className="text-foreground">{Math.min(page * limit, totalCompanies)}</span> de <span className="text-foreground">{totalCompanies}</span> empresas
|
|
</p>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" size="sm" onClick={() => loadCompanies(page - 1)} disabled={page <= 1}>
|
|
<ChevronLeft className="h-4 w-4 mr-1" /> Anterior
|
|
</Button>
|
|
<Button variant="outline" size="sm" onClick={() => loadCompanies(page + 1)} disabled={page >= totalPages}>
|
|
Próxima <ChevronRight className="h-4 w-4 ml-1" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<ConfirmModal
|
|
isOpen={!!companyToDelete}
|
|
onClose={() => setCompanyToDelete(null)}
|
|
onConfirm={confirmDelete}
|
|
title="Excluir Empresa"
|
|
description={`Tem certeza que deseja excluir ${companyToDelete?.name}? Esta ação não pode ser desfeita.`}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|