import { useState } from "react"; import { Head, router } 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 { Checkbox } from "@/components/ui/checkbox"; import { Badge } from "@/components/ui/badge"; import { ShieldCheck, ShieldAlert, PlusCircle, Pencil, Users, Key, CheckCircle2, RotateCcw, Sparkles, Lock, Search, } from "lucide-react"; import { ConfirmDeleteButton } from "@/components/crm-confirm-dialog"; import { EmptyState } from "@/components/crm-data-table"; import { StatChip } from "@/components/crm/global-card"; type Role = { id: number; name: string; slug: string; permissions: Record | null; users_count: number; }; type Props = { roles: Role[]; permissions: Record; }; export default function RolesPage({ roles, permissions }: Props) { const keys = Object.keys(permissions); const [editing, setEditing] = useState(null); const [name, setName] = useState(""); const [slug, setSlug] = useState(""); const [selected, setSelected] = useState([]); const [searchQuery, setSearchQuery] = useState(""); const open = (role?: Role) => { setEditing(role ?? null); setName(role?.name ?? ""); setSlug(role?.slug ?? ""); setSelected( Object.keys(role?.permissions ?? {}).filter( (k) => role?.permissions?.[k], ), ); }; const handleNameChange = (val: string) => { setName(val); if (!editing) { setSlug( val .toLowerCase() .trim() .replace(/\s+/g, "-") .replace(/[^a-z0-9-]/g, ""), ); } }; const submit = () => { if (!name || !slug) return; const payload = { name, slug, permissions: selected }; const done = () => open(); if (editing) { router.put(`/crm/roles/${editing.id}`, payload, { onSuccess: done, }); } else { router.post("/crm/roles", payload, { onSuccess: done }); } }; const toggle = (key: string, checked: boolean) => setSelected((v) => checked ? v.includes(key) ? v : [...v, key] : v.filter((x) => x !== key), ); const toggleAll = () => { if (selected.length === keys.length) { setSelected([]); } else { setSelected([...keys]); } }; // Metrics calculation const totalRoles = roles.length; const totalUsersAssigned = roles.reduce( (acc, r) => acc + (r.users_count || 0), 0, ); const totalPermissions = keys.length; // Filter roles const filteredRoles = roles.filter( (r) => r.name.toLowerCase().includes(searchQuery.toLowerCase()) || r.slug.toLowerCase().includes(searchQuery.toLowerCase()), ); return (
{/* Header Section */}
Granular Access Management

Roles & Permissions

Definisikan peranan jabatan dan batasi otorisasi modul bagi tiap personel perusahaan.

{/* KPI Overview Cards */}
{/* Main Interactive Grid */}
{/* Form Builder Card */}
{editing ? ( ) : ( )}
{editing ? "Edit Konfigurasi Role" : "Tambah Role Baru"} {editing ? "Perbarui nama, kualifikasi slug, dan otorisasi." : "Buat tingkat akses kustom baru bagi tim."}
handleNameChange(e.target.value) } />
setSlug( e.target.value .toLowerCase() .replace(/\s+/g, "-") .replace(/[^a-z0-9-]/g, ""), ) } /> Digunakan oleh backend sebagai kunci pemeriksaan middleware.
{/* Permissions Selector */}
{keys.map((key) => { const isChecked = selected.includes(key); return ( ); })}
{/* Actions */}
{editing && ( )}
{/* Roles Listing Card */}
Daftar Role & Akses Hak otorisasi aktif yang saat ini dipasang pada akun pengguna.
setSearchQuery(e.target.value) } />
{filteredRoles.length ? ( filteredRoles.map((role) => { const activePermissions = Object.keys( role.permissions ?? {}, ).filter((k) => role.permissions?.[k]); const isBeingEdited = editing?.id === role.id; return (

{role.name}

{role.slug} {role.users_count} User
{/* Permission Badges */}
{activePermissions.length ? ( activePermissions .slice(0, 5) .map((k) => ( {permissions[ k ] || k} )) ) : ( {" "} Tidak ada izin khusus aktif )} {activePermissions.length > 5 && ( + {activePermissions.length - 5}{" "} Modul )}
{/* Action Control */}
); }) ) : ( )}
); }