import { FormEvent, useEffect, useState } from "react"; import { Head, router, useForm } from "@inertiajs/react"; import AppLayout from "@/layouts/app-layout"; import { Card, CardContent, CardHeader, CardTitle, CardDescription, } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Badge } from "@/components/ui/badge"; import { Search, Users, UserCheck, UserX, ShieldCheck, UserPlus, Pencil, Mail, Phone, Briefcase, Sparkles, X, } from "lucide-react"; import { ConfirmDeleteButton } from "@/components/crm-confirm-dialog"; import { EmptyState, Pagination } from "@/components/crm-data-table"; import { StatChip } from "@/components/crm/global-card"; type Item = { id: number; name: string }; type User = { id: number; name: string; email: string; phone?: string; employee_code?: string; status: string; role?: Item; team?: Item; }; type Props = { users: { data: User[]; links: any[] }; roles: Item[]; teams: Item[]; filters?: any; }; const empty = { name: "", email: "", phone: "", employee_code: "", password: "", role_id: "", team_id: "", status: "active", }; export default function UsersPage({ users, roles, teams, filters }: Props) { const [editing, setEditing] = useState(null); const [search, setSearch] = useState(filters?.search || ""); const form = useForm(empty); // Hitung ringkasan statistik const activeCount = users.data.filter((u) => u.status === "active").length; const inactiveCount = users.data.length - activeCount; // Pencarian otomatis (debounce 300ms) useEffect(() => { if (search === (filters?.search || "")) return; const timer = setTimeout(() => { router.get( "/crm/users", { search }, { preserveState: true, preserveScroll: true, replace: true }, ); }, 300); return () => clearTimeout(timer); }, [search]); const edit = (u: User) => { setEditing(u.id); form.clearErrors(); form.setData({ name: u.name, email: u.email, phone: u.phone ?? "", employee_code: u.employee_code ?? "", password: "", role_id: String(u.role?.id ?? ""), team_id: String(u.team?.id ?? ""), status: u.status, }); }; const cancelEdit = () => { setEditing(null); form.clearErrors(); form.reset(); }; const save = (e: FormEvent) => { e.preventDefault(); const opts = { onSuccess: () => { setEditing(null); form.reset(); form.clearErrors(); }, }; editing ? form.put(`/crm/users/${editing}`, opts) : form.post("/crm/users", opts); }; const resetSearch = () => { setSearch(""); router.get("/crm/users", {}, { preserveState: true, replace: true }); }; return (
{/* Header Section */}
Identity & Access Management

Pengguna & Hak Akses

Kelola profil karyawan, atribusi role, alokasi tim, dan status keanggotaan organisasi.

{/* KPI Metrics Summary Cards */}
100% } /> {users.data.length ? Math.round( (activeCount / users.data.length) * 100, ) : 0} % } /> {users.data.length ? Math.round( (inactiveCount / users.data.length) * 100, ) : 0} % } />
{/* Main Content Grid */}
{/* Form Card */}
{editing ? ( ) : ( )}
{editing ? "Edit Profil Pengguna" : "Tambah Pengguna Baru"} {editing ? "Perbarui informasi dan hak akses pengguna." : "Buat kredensial awal untuk anggota tim."}
form.setData("name", e.target.value) } placeholder="cth. Alexandra Wright" /> {form.errors.name && (

{form.errors.name}

)}
form.setData( "email", e.target.value, ) } placeholder="nama@perusahaan.com" /> {form.errors.email && (

{form.errors.email}

)}
form.setData( "phone", e.target.value, ) } placeholder="0812xxxx" />
form.setData( "employee_code", e.target.value, ) } placeholder="EMP-1001" />
form.setData( "password", e.target.value, ) } placeholder={ editing ? "Kosongkan jika tak diubah" : "••••••••" } /> {form.errors.password && (

{form.errors.password}

)}
{form.errors.role_id && (

{form.errors.role_id}

)}
{editing && ( )}
{/* Data List Section */}
Daftar Pengguna Sistem Menampilkan direktori seluruh anggota tim dan hak akses mereka.
{/* Real-time Search Input */}
setSearch(e.target.value) } /> {search && ( )}
{users.data.length ? (
{users.data.map((u) => { const initials = u.name .split(" ") .map((n) => n[0]) .join("") .substring(0, 2) .toUpperCase(); const isActive = u.status === "active"; return (
{/* Profile Avatar & Info */}
{initials}

{u.name}

{u.employee_code && ( { u.employee_code } )}
{u.email} {u.phone && ( {u.phone} )}
{/* Badges Role & Tim */}
{u.role?.name ?? "Tanpa Role"} {u.team && ( { u.team .name } )}
{/* Action Buttons */}
); })}
) : ( )} {/* Pagination */}
); }