355 lines
17 KiB
TypeScript
355 lines
17 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 { Plus, Search, Loader2, RefreshCw, Building2, CheckCircle, XCircle, Eye } from "lucide-react"
|
|
import { adminCompaniesApi, type ApiCompany } from "@/lib/api"
|
|
import { getCurrentUser, isAdminUser } from "@/lib/auth"
|
|
import { toast } from "sonner"
|
|
import { Skeleton } from "@/components/ui/skeleton"
|
|
|
|
const companyDateFormatter = new Intl.DateTimeFormat("en-US", {
|
|
dateStyle: "medium",
|
|
timeZone: "UTC",
|
|
})
|
|
|
|
export default function AdminCompaniesPage() {
|
|
const router = useRouter()
|
|
const [companies, setCompanies] = useState<ApiCompany[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [searchTerm, setSearchTerm] = useState("")
|
|
const [page, setPage] = useState(1)
|
|
const [totalCompanies, setTotalCompanies] = useState(0)
|
|
const [isDialogOpen, setIsDialogOpen] = useState(false)
|
|
const [isViewDialogOpen, setIsViewDialogOpen] = useState(false)
|
|
const [selectedCompany, setSelectedCompany] = useState<ApiCompany | null>(null)
|
|
const [creating, setCreating] = useState(false)
|
|
const [formData, setFormData] = useState({
|
|
name: "",
|
|
slug: "",
|
|
email: "",
|
|
})
|
|
|
|
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) => {
|
|
// If coming from onClick event, targetPage might be the event object
|
|
// Ensure it is a number
|
|
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("Failed to load companies")
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleCreate = async () => {
|
|
try {
|
|
setCreating(true)
|
|
await adminCompaniesApi.create(formData)
|
|
toast.success("Company created successfully!")
|
|
setIsDialogOpen(false)
|
|
setFormData({ name: "", slug: "", email: "" })
|
|
loadCompanies(1) // Reload first page
|
|
} catch (error) {
|
|
console.error("Error creating company:", error)
|
|
toast.error("Failed to create company")
|
|
} finally {
|
|
setCreating(false)
|
|
}
|
|
}
|
|
|
|
const handleView = (company: ApiCompany) => {
|
|
setSelectedCompany(company)
|
|
setIsViewDialogOpen(true)
|
|
}
|
|
|
|
const toggleStatus = async (company: ApiCompany, field: 'active' | 'verified') => {
|
|
const newValue = !company[field]
|
|
// Optimistic update
|
|
const originalCompanies = [...companies]
|
|
setCompanies(companies.map(c => c.id === company.id ? { ...c, [field]: newValue } : c))
|
|
|
|
try {
|
|
await adminCompaniesApi.updateStatus(Number(company.id), { [field]: newValue })
|
|
toast.success(`Company ${field} updated`)
|
|
} catch (error) {
|
|
toast.error(`Failed to update ${field}`)
|
|
setCompanies(originalCompanies)
|
|
}
|
|
}
|
|
|
|
const generateSlug = (name: string) => {
|
|
return name
|
|
.toLowerCase()
|
|
.normalize("NFD")
|
|
.replace(/[\u0300-\u036f]/g, "")
|
|
.replace(/[^a-z0-9]+/g, "-")
|
|
.replace(/(^-|-$)/g, "")
|
|
}
|
|
|
|
const filteredCompanies = companies.filter(
|
|
(company) =>
|
|
company.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
company.email?.toLowerCase().includes(searchTerm.toLowerCase())
|
|
)
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-foreground">Company management</h1>
|
|
<p className="text-muted-foreground mt-1">Manage all registered companies</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" onClick={() => loadCompanies()} disabled={loading}>
|
|
<RefreshCw className={`h-4 w-4 mr-2 ${loading ? "animate-spin" : ""}`} />
|
|
Refresh
|
|
</Button>
|
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button className="gap-2">
|
|
<Plus className="h-4 w-4" />
|
|
New company
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Create new company</DialogTitle>
|
|
<DialogDescription>Fill in the company details</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="name">Company name</Label>
|
|
<Input
|
|
id="name"
|
|
value={formData.name}
|
|
onChange={(e) =>
|
|
setFormData({
|
|
...formData,
|
|
name: e.target.value,
|
|
slug: generateSlug(e.target.value),
|
|
})
|
|
}
|
|
placeholder="Company XYZ"
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="slug">Slug (URL)</Label>
|
|
<Input
|
|
id="slug"
|
|
value={formData.slug}
|
|
onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
|
|
placeholder="empresa-xyz"
|
|
/>
|
|
</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="hello@company.com"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setIsDialogOpen(false)}>Cancel</Button>
|
|
<Button onClick={handleCreate} disabled={creating}>
|
|
{creating && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
|
|
Create company
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="grid gap-4 md:grid-cols-4">
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardDescription>Total companies</CardDescription>
|
|
<CardTitle className="text-3xl">{totalCompanies}</CardTitle>
|
|
</CardHeader>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardDescription>Active companies</CardDescription>
|
|
<CardTitle className="text-3xl">{companies.filter((c) => c.active).length}</CardTitle>
|
|
</CardHeader>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardDescription>Verified</CardDescription>
|
|
<CardTitle className="text-3xl">{companies.filter((c) => c.verified).length}</CardTitle>
|
|
</CardHeader>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardDescription>Pending</CardDescription>
|
|
<CardTitle className="text-3xl">{companies.filter((c) => !c.verified).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="Search companies by name or email..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-10"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{loading ? (
|
|
<div className="space-y-2 py-4">
|
|
{[...Array(5)].map((_, i) => (
|
|
<div key={i} className="flex items-center space-x-4">
|
|
<Skeleton className="h-12 w-full" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Company</TableHead>
|
|
<TableHead>Slug</TableHead>
|
|
<TableHead>Email</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead>Verified</TableHead>
|
|
<TableHead>Created</TableHead>
|
|
<TableHead className="text-right">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredCompanies.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={6} className="text-center text-muted-foreground py-8">
|
|
No companies found
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
filteredCompanies.map((company) => (
|
|
<TableRow key={company.id}>
|
|
<TableCell className="font-medium">
|
|
<div className="flex items-center gap-2">
|
|
<Building2 className="h-4 w-4 text-muted-foreground" />
|
|
{company.name}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="font-mono text-sm">{company.slug}</TableCell>
|
|
<TableCell>{company.email || "-"}</TableCell>
|
|
<TableCell>
|
|
<Badge
|
|
variant={company.active ? "default" : "secondary"}
|
|
className="cursor-pointer hover:opacity-80"
|
|
onClick={() => toggleStatus(company, 'active')}
|
|
>
|
|
{company.active ? "Active" : "Inactive"}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div
|
|
className="cursor-pointer hover:opacity-80 inline-flex"
|
|
onClick={() => toggleStatus(company, 'verified')}
|
|
>
|
|
{company.verified ? (
|
|
<CheckCircle className="h-5 w-5 text-green-500" />
|
|
) : (
|
|
<XCircle className="h-5 w-5 text-muted-foreground" />
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
{company.created_at ? companyDateFormatter.format(new Date(company.created_at)) : "-"}
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<Button variant="ghost" size="icon" onClick={() => handleView(company)}>
|
|
<Eye className="h-4 w-4" />
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
{!loading && (
|
|
<div className="flex flex-wrap items-center justify-between gap-2 text-sm text-muted-foreground mt-4">
|
|
<span>
|
|
{totalCompanies === 0
|
|
? "No companies to display"
|
|
: `Showing ${(page - 1) * limit + 1}-${Math.min(page * limit, totalCompanies)} of ${totalCompanies}`}
|
|
</span>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => loadCompanies(page - 1)}
|
|
disabled={page <= 1 || loading}
|
|
>
|
|
Previous
|
|
</Button>
|
|
<span>
|
|
Page {page} of {totalPages}
|
|
</span>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => loadCompanies(page + 1)}
|
|
disabled={page >= totalPages || loading}
|
|
>
|
|
Next
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|