"use client"; import { useState, useEffect, useTransition } from "react"; import { useRouter } from "next/navigation"; import { createEmployeeAction, updateEmployeePermissionsAction } from "@/app/actions/admin.actions"; import { ALL_PERMISSIONS, PermissionKey } from "@/types/auth"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { Card, CardContent } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Button, buttonVariants } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { ShieldCheck, UserPlus, Search, CheckCircle2, AlertCircle, Loader2, Key, Users, Crown, } from "lucide-react"; interface EmployeeItem { id: string; userId: string; jobTitle: string; department: string; isActive: boolean; createdAt: string; user: { id: string; first_name: string | null; last_name: string | null; email: string; phone_number: string | null; }; permissions: PermissionKey[]; } interface EmployeeManagerProps { employees: EmployeeItem[]; } export function EmployeeManager({ employees }: EmployeeManagerProps) { const router = useRouter(); const [employeesList, setEmployeesList] = useState(employees); const [isPending, startTransition] = useTransition(); const [searchTerm, setSearchTerm] = useState(""); const [isAddOpen, setIsAddOpen] = useState(false); const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null); useEffect(() => { setEmployeesList(employees); }, [employees]); // New Employee Form State const [userEmail, setUserEmail] = useState(""); const [jobTitle, setJobTitle] = useState("Property Moderator"); const [department, setDepartment] = useState("Operations"); const [selectedPermissions, setSelectedPermissions] = useState([ "property:approve_reject", ]); const filtered = employeesList.filter((emp) => { const searchLower = searchTerm.toLowerCase().trim(); return ( (emp.user?.email || "").toLowerCase().includes(searchLower) || (emp.user?.first_name || "").toLowerCase().includes(searchLower) || (emp.user?.last_name || "").toLowerCase().includes(searchLower) || (emp.jobTitle || "").toLowerCase().includes(searchLower) || (emp.department || "").toLowerCase().includes(searchLower) ); }); const togglePermission = (perm: PermissionKey) => { setSelectedPermissions((prev) => prev.includes(perm) ? prev.filter((p) => p !== perm) : [...prev, perm] ); }; const handleCreateEmployee = (e: React.FormEvent) => { e.preventDefault(); setMessage(null); startTransition(async () => { const res = await createEmployeeAction({ userEmail, jobTitle, department, permissions: selectedPermissions, }); if (res.success) { setMessage({ type: "success", text: "Employee provisioned successfully!" }); if (res.employee) { setEmployeesList((prev) => [ res.employee, ...prev.filter( (item) => item.id !== res.employee.id && item.user?.email !== res.employee.user?.email ), ]); } setUserEmail(""); setIsAddOpen(false); router.refresh(); } else { setMessage({ type: "error", text: res.error || "Failed to add employee" }); } }); }; const handleToggleActive = (employeeId: string, currentActive: boolean) => { setMessage(null); startTransition(async () => { const res = await updateEmployeePermissionsAction({ employeeId, isActive: !currentActive, }); if (res.success) { setMessage({ type: "success", text: `Employee status updated to ${!currentActive ? "Active" : "Inactive"}` }); setEmployeesList((prev) => prev.map((emp) => (emp.id === employeeId ? { ...emp, isActive: !currentActive } : emp)) ); router.refresh(); } else { setMessage({ type: "error", text: res.error || "Failed to update employee" }); } }); }; return (
{/* KPI Metrics Row */}
Total Staff
{employeesList.length}

Platform operators
Super Admins
{employeesList.filter((e) => e.jobTitle.toLowerCase().includes("admin") || e.department.toLowerCase().includes("executive") || e.department.toLowerCase().includes("admin")).length}

Executive control
Moderators
{employeesList.filter((e) => e.jobTitle.toLowerCase().includes("moderator") || e.department.toLowerCase().includes("compliance") || e.department.toLowerCase().includes("trust") || e.department.toLowerCase().includes("safety")).length}

Trust & verification
Active Access
{employeesList.filter((e) => e.isActive).length}

Enabled accounts
{message && (
{message.type === "success" ? ( ) : ( )} {message.text}
)} {/* Control Bar: Search & Add Employee Button */}
setSearchTerm(e.target.value)} placeholder="Search staff by name, email, or department..." className="pl-9 h-8 text-xs rounded-md" />
Onboard Staff Onboard Platform Staff Member Assign employee status and granular permissions to a registered user.
setUserEmail(e.target.value)} placeholder="staff@nigerialisting.com" className="h-8 text-xs rounded-md" required />
setJobTitle(e.target.value)} placeholder="e.g. Property Moderator" className="h-8 text-xs rounded-md" required />
setDepartment(e.target.value)} placeholder="e.g. Operations" className="h-8 text-xs rounded-md" required />
{/* Granular Permissions Checklist */}
{ALL_PERMISSIONS.map((perm: PermissionKey) => { const isChecked = selectedPermissions.includes(perm); return ( ); })}
{/* Staff Table */} Staff Member Job Title & Department Granular Permissions Status Actions {filtered.length === 0 ? (

No staff members found matching criteria.

 ) : ( filtered.map((emp) => { const fullName = emp.user?.first_name ? `${emp.user.first_name} ${emp.user.last_name || ""}` : "Staff Member"; return (

{fullName}

{emp.user?.email}

{emp.jobTitle}

{emp.department}
{emp.permissions.slice(0, 2).map((p) => ( {p} ))} {emp.permissions.length > 2 && ( +{emp.permissions.length - 2} more

Additional Permissions ({emp.permissions.length - 2})

{emp.permissions.slice(2).map((p) => ( {p} ))}
)} {emp.permissions.length === 0 && ( No direct permissions )}
{emp.isActive ? "Active" : "Disabled"} ); }) )}
); }