"use client"; import { useCallback, useEffect, useState } from "react"; import { Alert, Spinner } from "@/src/Components/UI"; import { RoleToast } from "@/src/Components/role/RoleToast"; import { useRoles } from "@/src/hooks/useRole"; import type { Role, Permission } from "@/src/services/role.service"; // ── Module label map ─────────────────────────────────────────────────────── const MODULE_LABELS: Record = { Role: "الأدوار", User: "المستخدمون", Branch: "الفروع", Car: "المركبات", CarImage: "صور المركبات", Driver: "السائقون", Order: "الطلبات", Trip: "الرحلات", Client: "العملاء", Permission: "الصلاحيات", Audit: "سجل التدقيق", Dashboard: "لوحة التحكم", Maintenance: "الصيانة", }; const moduleLabel = (mod: string) => MODULE_LABELS[mod] ?? mod; function groupByModule(permissions: Permission[]): Record { return permissions.reduce>((acc, p) => { (acc[p.module || "أخرى"] ??= []).push(p); return acc; }, {}); } // ── Permission Matrix ────────────────────────────────────────────────────── function PermissionMatrix({ role, allPermissions, onSave, }: { role: Role; allPermissions: Permission[]; onSave: (roleId: string, permIds: string[]) => Promise; }) { const currentIds = role.permissions?.map(rp => rp.permission.id) ?? []; const [selected, setSelected] = useState>(new Set(currentIds)); const [saving, setSaving] = useState(false); const [saved, setSaved] = useState(false); const grouped = groupByModule(allPermissions); const toggle = (id: string) => { setSelected(prev => { const next = new Set(prev); next.has(id) ? next.delete(id) : next.add(id); return next; }); setSaved(false); }; const toggleModule = (mod: string) => { const ids = (grouped[mod] ?? []).map(p => p.id); const allChecked = ids.every(id => selected.has(id)); setSelected(prev => { const next = new Set(prev); allChecked ? ids.forEach(id => next.delete(id)) : ids.forEach(id => next.add(id)); return next; }); setSaved(false); }; const handleSave = async () => { setSaving(true); const ok = await onSave(role.id, [...selected]); setSaving(false); if (ok) setSaved(true); }; return (
{/* Role header */}

{role.name}

{role.description && (

{role.description}

)}

{selected.size} من {allPermissions.length} صلاحية مفعّلة

{saved && ( ✓ تم الحفظ )}
{/* Module rows */}
{Object.entries(grouped).map(([mod, perms]) => { const allChecked = perms.every(p => selected.has(p.id)); const someChecked = !allChecked && perms.some(p => selected.has(p.id)); return (
{/* Module header */}
{ if (el) el.indeterminate = someChecked; }} onChange={() => toggleModule(mod)} style={{ width: 15, height: 15, cursor: "pointer", accentColor: "#2563EB" }} /> {moduleLabel(mod)} {perms.filter(p => selected.has(p.id)).length}/{perms.length}
{/* Permissions */}
{perms.map(perm => { const checked = selected.has(perm.id); return ( ); })}
); })}
); } // ── Page ─────────────────────────────────────────────────────────────────── export default function RolePermissionPage() { const { roles, loading, error, permissions, clearError, updateRolePermissionsBulk, notification } = useRoles(); const [selectedRoleId, setSelectedRoleId] = useState(""); const selectedRole = roles.find(r => r.id === selectedRoleId) ?? null; const handleSave = useCallback(async (roleId: string, permIds: string[]): Promise => { return updateRolePermissionsBulk(roleId, permIds); }, [updateRolePermissionsBulk]); return ( <>
{/* Header */}

إدارة الصلاحيات

مصفوفة الصلاحيات

إدارة صلاحيات كل دور بشكل مجمَّع

{error && } {loading ? (
جارٍ التحميل…
) : !selectedRole ? (

🔐

اختر دوراً من القائمة أعلاه

ستظهر هنا صلاحيات الدور المحدد وبإمكانك تعديلها مباشرة.

) : ( )}
); }