@dashadmin/dash-admin 1.3.73 → 1.3.74-srcfree.2

package/src/components/permission/PermissionsSelector.tsx

@@ -1,834 +0,0 @@
-import React, { useCallback, useEffect, useState, useMemo, useRef } from 'react';
-import { useRecordContext, useRefresh, CheckboxGroupInput, Loading, useEditContext, useGetOne } from 'react-admin';
-import { useController, useFormContext, useFormState } from 'react-hook-form';
-import { IDashAutoAdminCustomFieldComponent } from 'dash-auto-admin';
-import { useAxios } from 'dash-axios-hook';
-import { 
-    Grid,
-    Card, 
-    CardContent, 
-    Typography, 
-    Button, 
-    Box,
-    Chip,
-    Divider,
-    Stack,
-    Toolbar,
-    Paper,
-    TextField,
-    InputAdornment,
-    CircularProgress,
-    IconButton
-} from '@mui/material';
-import { 
-    SelectAll as SelectAllIcon, 
-    DeselectOutlined as DeselectAllIcon,
-    Search as SearchIcon,
-    Clear as ClearIcon,
-    FilterList as FilterIcon
-} from '@mui/icons-material';
-
-import {useAvailablePermissionsFormats} from "./AvailablePermissionsContext";
-import { useSystemRequestsCache } from '../../contexts/SystemRequestsCache';
-import { NotFound } from 'dash-components';
-
-
-interface IPermissionItem {
-    group: string;
-    name: string;
-    route_name: string;
-    checked?: boolean;
-}
-
-// Styles for HTML checkboxes
-const checkboxStyles = {
-    checkbox: {
-        marginRight: '8px',
-        cursor: 'pointer',
-        accentColor: '#1976d2'
-    },
-    checkboxLabel: {
-        display: 'flex',
-        alignItems: 'center',
-        fontSize: '14px',
-        cursor: 'pointer',
-        padding: '4px 0',
-        margin: 0,
-        userSelect: 'none' as const
-    },
-    selectAllLabel: {
-        display: 'flex',
-        alignItems: 'center',
-        fontSize: '14px',
-        fontWeight: 'bold',
-        cursor: 'pointer',
-        margin: 0,
-        userSelect: 'none' as const
-    }
-};
-
-const PermissionsSelectorView: React.FC<IDashAutoAdminCustomFieldComponent> = ({
-    method,
-    attribute,
-}) => {
-    const record = useRecordContext();
-    const [permissions, setPermissions] = useState<IPermissionItem[][]>([]);
-
-    useEffect(() => {
-
-        if (record?.permissions) {
-        
-            const groupedPermissions = record.permissions.reduce((acc, permission) => {
-                const group = acc.find(g => g[0]?.group === permission.group);
-                if (group) {
-                    group.push(permission);
-                } else {
-                    acc.push([permission]);
-                }
-                return acc;
-            }, [] as any[]);
-            setPermissions(groupedPermissions);
-        }
-    }, [record?.permissions]);
-
-    if (!record?.permissions || record.permissions.length === 0) {
-        return (
-            <Box sx={{ p: 2, textAlign: 'center' }}>
-                <Typography variant="body2" sx={{
-                    color: "text.secondary"
-                }}>
-                    No permissions assigned
-                </Typography>
-            </Box>
-        );
-    }
-
-    return (
-        <Box sx={{ p: 2 }}>
-            <Typography variant="h6" sx={{ mb: 3 }}>
-                Assigned Permissions ({record.permissions.length})
-            </Typography>
-            <Grid container spacing={3}>
-                {permissions?.map((tab, index) => (
-                    /* @ts-ignore */
-                    (<Grid item xs={12} sm={6} md={4} lg={3} key={index}>
-                        <Card 
-                            variant="outlined" 
-                            sx={{ 
-                                height: '100%',
-                                display: 'flex',
-                                flexDirection: 'column'
-                            }}
-                        >
-                            <CardContent sx={{ flexGrow: 1 }}>
-                                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
-                                    <Typography variant="subtitle1" sx={{ fontWeight: 600, fontSize: '1rem' }}>
-                                        {tab[0]?.group.charAt(0).toUpperCase() + tab[0]?.group.slice(1)}
-                                    </Typography>
-                                    <Chip 
-                                        label={tab.length}
-                                        size="small"
-                                        color="primary"
-                                    />
-                                </Box>
-                                <Stack spacing={0.5}>
-                                    {tab.map((item, i) => (
-                                        <Typography key={i} variant="body2" sx={{ color: 'text.secondary', fontSize: '0.875rem' }}>
-                                            • {item.name.split('.').pop()}
-                                        </Typography>
-                                    ))}
-                                </Stack>
-                            </CardContent>
-                        </Card>
-                    </Grid>)
-                ))}
-            </Grid>
-        </Box>
-    );
-};
-
-// Utility for deep equality check (comparing by route_name instead of name)
-function arePermissionsEqual(a: IPermissionItem[], b: IPermissionItem[]) {
-    if (!Array.isArray(a) || !Array.isArray(b)) return false;
-    if (a.length !== b.length) return false;
-    const aRouteNames = a.map(p => p.route_name).sort();
-    const bRouteNames = b.map(p => p.route_name).sort();
-    return aRouteNames.every((routeName, idx) => routeName === bRouteNames[idx]);
-}
-
-const INITIAL_ITEMS_COUNT = 6;
-
-const PermissionsSelectorBase: React.FC<IDashAutoAdminCustomFieldComponent & { record: any }> = ({
-    method,
-    attribute,
-    resourceConfig,
-    record = null
-}) => {
-    const [permissionsData, setPermissionsData] = useState<IPermissionItem[][]>([]);
-    const [parsedValues, setParsedValues] = useState<IPermissionItem[]>([]);
-    const [expandedCards, setExpandedCards] = useState<{ [key: string]: boolean }>({});
-    const [isInitialized, setIsInitialized] = useState(false);
-    const [groupSearchTerm, setGroupSearchTerm] = useState<string>('');
-    const [itemSearchTerm, setItemSearchTerm] = useState<string>('');
-    const [debouncedGroupSearch, setDebouncedGroupSearch] = useState<string>('');
-    const [debouncedItemSearch, setDebouncedItemSearch] = useState<string>('');
-    
-    const groupSearchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-    const itemSearchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-    
-    const axios = useAxios();
-    const refresh = useRefresh();
-    const form = useFormContext();
-    const formState = useFormState();
-
-    // Controllers for both permission_objects and permissions fields
-    const permissionObjectsController = useController({ name: 'permission_objects' });
-    const permissionsController = useController({ name: 'permissions' });
-
-    // Local state for selected permissions (array of permission objects)
-    const [statePermissions, setStatePermissions] = useState<IPermissionItem[]>([]);
-
-    const { formats: availablePermissions, loading } = useSystemRequestsCache();
-
-    // Group permissions by their group
-    const groupPermissions = useCallback((permissions: IPermissionItem[]) => {
-        return permissions.reduce((acc, permission) => {
-            const group = acc.find(g => g[0]?.group === permission.group);
-            if (group) {
-                group.push(permission);
-            } else {
-                acc.push([permission]);
-            }
-            return acc;
-        }, [] as IPermissionItem[][]);
-    }, []);
-
-    // --- Debounced search logic (improved for UX) ---
-    useEffect(() => {
-        if (groupSearchTimeoutRef.current) clearTimeout(groupSearchTimeoutRef.current);
-        groupSearchTimeoutRef.current = setTimeout(() => {
-            setDebouncedGroupSearch(groupSearchTerm);
-        }, 500);
-        return () => { if (groupSearchTimeoutRef.current) clearTimeout(groupSearchTimeoutRef.current); };
-    }, [groupSearchTerm]);
-    useEffect(() => {
-        if (itemSearchTimeoutRef.current) clearTimeout(itemSearchTimeoutRef.current);
-        itemSearchTimeoutRef.current = setTimeout(() => {
-            setDebouncedItemSearch(itemSearchTerm);
-        }, 500);
-        return () => { if (itemSearchTimeoutRef.current) clearTimeout(itemSearchTimeoutRef.current); };
-    }, [itemSearchTerm]);
-
-    // Initialize permissions from available permissions
-    useEffect(() => {
-        if (!isInitialized && availablePermissions) {
-            const perms = Array.isArray(availablePermissions.data)
-                ? availablePermissions.data
-                : Array.isArray(availablePermissions)
-                    ? availablePermissions
-                    : [];
-            if (perms.length > 0) {
-                const groupedPerms = groupPermissions(perms);
-                setPermissionsData(groupedPerms);
-                // Initialize all cards as collapsed by default using group name as key
-                const initialExpandedState = groupedPerms.reduce((acc, group) => {
-                    const groupKey = group[0]?.group || 'Other';
-                    acc[groupKey] = false;
-                    return acc;
-                }, {} as { [key: string]: boolean });
-                setExpandedCards(initialExpandedState);
-            }
-            setIsInitialized(true);
-        }
-    }, [availablePermissions, isInitialized, groupPermissions]);
-
-    // --- FIX: Remove field.onChange from useEffect that watches parsedValues ---
-    // Only set parsedValues and call field.onChange when the record changes (external update)
-    useEffect(() => {
-        if (!loading && record && record.id && permissionsData.length > 0) {
-            const initialPermissionObjects = record.permission_objects || [];
-            // Only update if different
-            if (!arePermissionsEqual(initialPermissionObjects, statePermissions)) {
-                setStatePermissions(initialPermissionObjects);
-            }
-        }
-    // Only run when record or permissionsData changes
-    }, [permissionsData, record?.permissions, record?.permission_objects, record?.id, loading]);
-
-    // When initializing statePermissions from backend, only consider a permission checked if it is present in permission_objects
-    useEffect(() => {
-        if (!loading && record && record.id && permissionsData.length > 0) {
-            const initialPermissionObjects = record.permission_objects || [];
-            // Only permissions present in permission_objects are checked
-            // Compare by route_name since that's the unique identifier
-            const checkedRouteNames = new Set(initialPermissionObjects.map(obj => obj.route_name));
-            const initialChecked = permissionsData.flat().map(p => ({
-                ...p,
-                checked: checkedRouteNames.has(p.route_name)
-            }));
-            // Only update if different
-            if (
-                statePermissions.length !== initialChecked.length ||
-                statePermissions.some((p, i) => p.route_name !== initialChecked[i].route_name || p.checked !== initialChecked[i].checked)
-            ) {
-                setStatePermissions(initialChecked);
-            }
-        }
-    // Only run when record or permissionsData changes
-    }, [permissionsData, record?.permissions, record?.permission_objects, record?.id, loading]);
-
-    // Sync statePermissions to form fields
-    useEffect(() => {
-        if (!statePermissions) return;
-        // Always update permission_objects with the array of permission objects (with checked: true)
-        permissionObjectsController.field.onChange(statePermissions.map(p => ({ ...p, checked: true })));
-        // Optionally update permissions with just the route_names
-        permissionsController.field.onChange(statePermissions.map(p => p.route_name));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [statePermissions]);
-
-    // Update the handleTogglePermission function to be more explicit about checked status
-    const handleTogglePermission = useCallback((permission: IPermissionItem) => {
-        setStatePermissions(prev => prev.map(p =>
-            p.route_name === permission.route_name ? { ...p, checked: !p.checked } : p
-        ));
-    }, []);
-
-    // Handle toggling all permissions in a group
-    const handleToggleGroup = useCallback((groupPermissions: IPermissionItem[]) => {
-        setStatePermissions(prev => {
-            const allSelected = groupPermissions.every(p => prev.find(sel => sel.route_name === p.route_name && sel.checked));
-            return prev.map(p =>
-                groupPermissions.some(gp => gp.route_name === p.route_name)
-                    ? { ...p, checked: !allSelected }
-                    : p
-            );
-        });
-    }, []);
-
-    // Select all: set checked: true for all
-    const handleSelectAll = useCallback(() => {
-        console.log('Selecting all permissions', permissionsData.flat().length);
-        setStatePermissions(prev => 
-            prev.map(p => ({ ...p, checked: true }))
-        );
-    }, []);
-
-    // Deselect all: set checked: false for all
-    const handleDeselectAll = useCallback(() => {
-        setStatePermissions(prev => prev.map(p => ({ ...p, checked: false })));
-    }, []);
-
-    // When syncing to form fields, make sure we're only sending checked permissions
-    useEffect(() => {
-        if (!statePermissions) return;
-        
-        // CHANGED: Only include permissions that have checked=true
-        const checkedPermissions = statePermissions.filter(p => p.checked);
-        
-        // Update permission_objects with ONLY the checked permissions
-        permissionObjectsController.field.onChange(checkedPermissions);
-        
-        // Update permissions field with just the route_names of checked permissions
-        permissionsController.field.onChange(
-            checkedPermissions.map(p => p.route_name)
-        );
-        
-        // Log what we're sending to the form (for debugging)
-        console.log('Syncing permissions to form:', {
-            totalPermissions: statePermissions.length,
-            checkedPermissions: checkedPermissions.length,
-            selectedCount: statePermissions.filter(p => p.checked).length,
-            firstFew: checkedPermissions.slice(0, 3).map(p => p.name)
-        });
-        
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [statePermissions]);
-
-    // --- Filtered permissions with search summary ---
-    const filteredPermissions = useMemo(() => {
-        let filtered = permissionsData;
-        if (debouncedGroupSearch.trim()) {
-            const groupSearchLower = debouncedGroupSearch.toLowerCase().trim();
-            filtered = filtered.filter(tab => tab[0]?.group.toLowerCase().includes(groupSearchLower));
-        }
-        if (debouncedItemSearch.trim()) {
-            const itemSearchLower = debouncedItemSearch.toLowerCase().trim();
-            filtered = filtered.map(tab => tab.filter(item =>
-                item.name.toLowerCase().includes(itemSearchLower) ||
-                item.name.split('.').pop()?.toLowerCase().includes(itemSearchLower)
-            )).filter(tab => tab.length > 0);
-        }
-        return filtered;
-    }, [permissionsData, debouncedGroupSearch, debouncedItemSearch]);
-
-    // Select all from current filtered page: set checked: true only for filtered permissions
-    const handleSelectAllFiltered = useCallback(() => {
-        const filteredRouteNames = new Set(filteredPermissions.flat().map(p => p.route_name));
-        console.log('Selecting all filtered permissions', filteredRouteNames.size);
-        setStatePermissions(prev => 
-            prev.map(p => filteredRouteNames.has(p.route_name) ? { ...p, checked: true } : p)
-        );
-    }, [filteredPermissions]);
-
-    // Deselect all from current filtered page: set checked: false only for filtered permissions
-    const handleDeselectAllFiltered = useCallback(() => {
-        const filteredRouteNames = new Set(filteredPermissions.flat().map(p => p.route_name));
-        setStatePermissions(prev => 
-            prev.map(p => filteredRouteNames.has(p.route_name) ? { ...p, checked: false } : p)
-        );
-    }, [filteredPermissions]);
-
-    // --- UI statistics ---
-    const totalPermissions = permissionsData.flat().length;
-    const selectedPermissions = statePermissions.filter(p => p.checked).length;
-    const isAllSelected = selectedPermissions === totalPermissions;
-    const isNoneSelected = selectedPermissions === 0;
-    const hasActiveSearch = !!debouncedGroupSearch.trim() || !!debouncedItemSearch.trim();
-    const filteredGroupsCount = filteredPermissions.length;
-    const totalFilteredItems = filteredPermissions.reduce((sum, group) => sum + group.length, 0);
-    
-    // Statistics for filtered permissions
-    const filteredSelectedCount = useMemo(() => {
-        const filteredRouteNames = new Set(filteredPermissions.flat().map(p => p.route_name));
-        return statePermissions.filter(p => p.checked && filteredRouteNames.has(p.route_name)).length;
-    }, [filteredPermissions, statePermissions]);
-    const isAllFilteredSelected = filteredSelectedCount === totalFilteredItems;
-    const isNoneFilteredSelected = filteredSelectedCount === 0;
-
-    // --- Clear search handlers ---
-    const handleClearGroupSearch = useCallback(() => setGroupSearchTerm(''), []);
-    const handleClearItemSearch = useCallback(() => setItemSearchTerm(''), []);
-    const handleClearAllSearches = useCallback(() => {
-        setGroupSearchTerm('');
-        setItemSearchTerm('');
-        setDebouncedGroupSearch('');
-        setDebouncedItemSearch('');
-    }, []);
-
-    // --- Utility: Check if all permissions in a group are selected ---
-    const isGroupSelected = useCallback((groupPermissions: IPermissionItem[]) => {
-        return groupPermissions.every(p =>
-            statePermissions.find(sel => sel.name === p.name && sel.checked)
-        );
-    }, [statePermissions]);
-
-    // --- Utility: Count selected permissions in a group ---
-    const getSelectedCount = useCallback((groupPermissions: IPermissionItem[]) => {
-        return groupPermissions.filter(p =>
-            statePermissions.find(sel => sel.name === p.name && sel.checked)
-        ).length;
-    }, [statePermissions]);
-
-    // --- Utility: Check if a single permission is selected ---
-    const isPermissionSelected = useCallback((permission: IPermissionItem) => {
-        const found = statePermissions.find(p => p.name === permission.name);
-        return !!found?.checked;
-    }, [statePermissions]);
-
-    if(!statePermissions) return <CircularProgress />;
-    if (!permissionsData || !permissionsData.length) return <CircularProgress />;
-    if (!record) return <CircularProgress />;
-
-    return (
-        <Box sx={{ p: 2 }}>
-            {/* --- Global Toolbar --- */}
-            <Paper elevation={1} sx={{ mb: 3, borderRadius: 2, overflow: 'hidden' }}>
-                <Toolbar sx={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    minHeight: '64px !important',
-                    px: 3,
-                    bgcolor: 'background.default'
-                }}>
-                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-                        <Typography variant="h6" sx={{ fontWeight: 600 }}>
-                            Permissions Selection
-                        </Typography>
-                        <Chip
-                            label={`${selectedPermissions} / ${totalPermissions} selected`}
-                            color={isAllSelected ? 'success' : selectedPermissions > 0 ? 'warning' : 'default'}
-                            variant="outlined"
-                        />
-                    </Box>
-                    <Box sx={{ display: 'flex', gap: 1 }}>
-                        {hasActiveSearch && (
-                            <>
-                                <Button
-                                    variant="contained"
-                                    startIcon={<SelectAllIcon />}
-                                    onClick={handleSelectAllFiltered}
-                                    disabled={isAllFilteredSelected}
-                                    size="small"
-                                    color="primary"
-                                    sx={{ textTransform: 'none' }}
-                                >
-                                    Select Filtered ({totalFilteredItems})
-                                </Button>
-                                <Button
-                                    variant="contained"
-                                    startIcon={<DeselectAllIcon />}
-                                    onClick={handleDeselectAllFiltered}
-                                    disabled={isNoneFilteredSelected}
-                                    size="small"
-                                    color="secondary"
-                                    sx={{ textTransform: 'none' }}
-                                >
-                                    Deselect Filtered
-                                </Button>
-                                <Divider orientation="vertical" flexItem sx={{ mx: 1 }} />
-                            </>
-                        )}
-                        <Button
-                            variant="outlined"
-                            startIcon={<SelectAllIcon />}
-                            onClick={handleSelectAll}
-                            disabled={isAllSelected}
-                            size="small"
-                            sx={{ textTransform: 'none' }}
-                        >
-                            Select All
-                        </Button>
-                        <Button
-                            variant="outlined"
-                            startIcon={<DeselectAllIcon />}
-                            onClick={handleDeselectAll}
-                            disabled={isNoneSelected}
-                            size="small"
-                            color="secondary"
-                            sx={{ textTransform: 'none' }}
-                        >
-                            Deselect All
-                        </Button>
-                    </Box>
-                </Toolbar>
-            </Paper>
-
-            {/* --- Search & Filter Panel --- */}
-            <Paper elevation={1} sx={{ mb: 3, p: 3, borderRadius: 2, bgcolor: 'background.paper' }}>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
-                    <FilterIcon color="primary" />
-                    <Typography variant="h6" sx={{ fontWeight: 600 }}>
-                        Search & Filter
-                    </Typography>
-                    {hasActiveSearch && (
-                        <Button
-                            size="small"
-                            variant="outlined"
-                            color="secondary"
-                            onClick={handleClearAllSearches}
-                            startIcon={<ClearIcon />}
-                            sx={{ textTransform: 'none' }}
-                        >
-                            Clear All Filters
-                        </Button>
-                    )}
-                </Box>
-                <Grid container spacing={2}>
-                     { /* @ts-ignore */ }
-                    <Grid item xs={12} md={6}>
-                        <TextField
-                            fullWidth
-                            variant="outlined"
-                            label="Search by Group Name"
-                            placeholder="e.g., user, admin, system..."
-                            value={groupSearchTerm}
-                            onChange={e => setGroupSearchTerm(e.target.value)}
-                            slotProps={{
-                                input: {
-                                    startAdornment: (
-                                        <InputAdornment position="start">
-                                            <SearchIcon color="action" />
-                                        </InputAdornment>
-                                    ),
-                                    endAdornment: groupSearchTerm && (
-                                        <InputAdornment position="end">
-                                            <IconButton size="small" onClick={handleClearGroupSearch}>
-                                                <ClearIcon fontSize="small" />
-                                            </IconButton>
-                                        </InputAdornment>
-                                    )
-                                }
-                            }}
-                        />
-                    </Grid>
-                    { /* @ts-ignore */ }
-                    <Grid item xs={12} md={6}>
-                        <TextField
-                            fullWidth
-                            variant="outlined"
-                            label="Search by Permission Name"
-                            placeholder="e.g., create, edit, delete, view..."
-                            value={itemSearchTerm}
-                            onChange={e => setItemSearchTerm(e.target.value)}
-                            slotProps={{
-                                input: {
-                                    startAdornment: (
-                                        <InputAdornment position="start">
-                                            <SearchIcon color="action" />
-                                        </InputAdornment>
-                                    ),
-                                    endAdornment: itemSearchTerm && (
-                                        <InputAdornment position="end">
-                                            <IconButton size="small" onClick={handleClearItemSearch}>
-                                                <ClearIcon fontSize="small" />
-                                            </IconButton>
-                                        </InputAdornment>
-                                    )
-                                }
-                            }}
-                        />
-                    </Grid>
-                </Grid>
-                {hasActiveSearch && (
-                    <Box sx={{ mt: 2, p: 2, bgcolor: 'action.hover', borderRadius: 1 }}>
-                        <Typography variant="body2" sx={{
-                            color: "text.secondary"
-                        }}>
-                            <strong>Search Results:</strong> {filteredGroupsCount} group{filteredGroupsCount !== 1 ? 's' : ''} 
-                            {' '}({totalFilteredItems} permission{totalFilteredItems !== 1 ? 's' : ''}) 
-                            {' '}of {permissionsData.length} total groups ({totalPermissions} total permissions)
-                        </Typography>
-                        {debouncedGroupSearch && (
-                            <Typography variant="caption" color="primary" sx={{ display: 'block', mt: 0.5 }}>
-                                • Group filter: "{debouncedGroupSearch}"
-                            </Typography>
-                        )}
-                        {debouncedItemSearch && (
-                            <Typography variant="caption" color="primary" sx={{ display: 'block', mt: 0.5 }}>
-                                • Permission filter: "{debouncedItemSearch}"
-                            </Typography>
-                        )}
-                    </Box>
-                )}
-            </Paper>
-
-            {/* --- No Results Message --- */}
-            {hasActiveSearch && filteredPermissions.length === 0 && (
-                <Paper sx={{
-                    p: 4,
-                    textAlign: 'center',
-                    bgcolor: 'background.default',
-                    border: '1px dashed',
-                    borderColor: 'divider'
-                }}>
-                    <SearchIcon sx={{ fontSize: 48, color: 'text.disabled', mb: 2 }} />
-                    <Typography variant="h6" gutterBottom sx={{
-                        color: "text.secondary"
-                    }}>
-                        No permissions found
-                    </Typography>
-                    <Typography
-                        variant="body2"
-                        sx={{
-                            color: "text.disabled",
-                            mb: 2
-                        }}>
-                        No permissions match your search criteria
-                        {debouncedGroupSearch && ` for group "${debouncedGroupSearch}"`}
-                        {debouncedItemSearch && ` for permission "${debouncedItemSearch}"`}
-                    </Typography>
-                    <Button
-                        variant="outlined"
-                        size="small"
-                        onClick={handleClearAllSearches}
-                        startIcon={<ClearIcon />}
-                    >
-                        Clear All Filters
-                    </Button>
-                </Paper>
-            )}
-
-            {/* --- Permissions Grid --- */}
-            {filteredPermissions.length > 0 && (
-                <Grid container spacing={3}>
-                    {filteredPermissions.map((group, groupIndex) => {
-                        const groupLabel = group[0]?.group || 'Other';
-                        const groupKey = groupLabel; // Use group name as stable key
-                        const isExpanded = expandedCards[groupKey] || false;
-                        const groupSelectedCount = getSelectedCount(group);
-                        const isAllSelectedInGroup = isGroupSelected(group);
-                        const hasMoreItems = group.length > INITIAL_ITEMS_COUNT;
-                        const visibleItems = isExpanded ? group : group.slice(0, INITIAL_ITEMS_COUNT);
-                        const remainingCount = group.length - INITIAL_ITEMS_COUNT;
-                        return (
-                            /* @ts-ignore */
-                            <Grid item xs={12} md={4} key={groupIndex}>
-                                <Card variant="outlined" sx={{
-                                    height: '100%',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    transition: 'all 0.2s ease-in-out',
-                                    '&:hover': {
-                                        boxShadow: 3,
-                                        borderColor: 'primary.main'
-                                    },
-                                    ...(hasActiveSearch && {
-                                        border: '2px solid',
-                                        borderColor: 'primary.light',
-                                        bgcolor: 'primary.50'
-                                    })
-                                }}>
-                                    <CardContent sx={{
-                                        flexGrow: 1,
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        p: 2,
-                                        '&:last-child': { pb: 2 }
-                                    }}>
-                                        <Box sx={{
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'space-between',
-                                            mb: 2,
-                                            minHeight: '32px'
-                                        }}>
-                                            <Typography variant="subtitle1" sx={{ fontWeight: 600, fontSize: '1rem', lineHeight: 1.2 }}>
-                                                {groupLabel}
-                                            </Typography>
-                                            <Chip
-                                                label={`${groupSelectedCount}/${group.length}`}
-                                                size="small"
-                                                color={isAllSelectedInGroup ? "primary" : groupSelectedCount > 0 ? "warning" : "default"}
-                                                sx={{ fontSize: '0.75rem', height: 24, mr: 1 }}
-                                            />
-                                        </Box>
-                                        <Box sx={{ mb: 2 }}>
-                                            <label style={checkboxStyles.selectAllLabel}>
-                                                <input
-                                                    type="checkbox"
-                                                    style={checkboxStyles.checkbox}
-                                                    checked={isAllSelectedInGroup}
-                                                    onChange={() => handleToggleGroup(group)}
-                                                />
-                                                Select all {groupLabel} permissions
-                                            </label>
-                                            <Divider sx={{ mt: 1 }} />
-                                        </Box>
-                                        <Box sx={{ flexGrow: 1, mb: hasMoreItems ? 2 : 0 }}>
-                                            <Stack spacing={0.5}>
-                                                {visibleItems.map((permission, permIndex) => {
-                                                    const displayName = permission.name.split('.').pop();
-                                                    const isChecked = isPermissionSelected(permission);
-                                                    const shouldHighlight = debouncedItemSearch &&
-                                                        (permission.name.toLowerCase().includes(debouncedItemSearch.toLowerCase()) ||
-                                                        displayName?.toLowerCase().includes(debouncedItemSearch.toLowerCase()));
-                                                    return (
-                                                        <Box key={permIndex}>
-                                                            <label style={checkboxStyles.checkboxLabel}>
-                                                                <input
-                                                                    type="checkbox"
-                                                                    style={checkboxStyles.checkbox}
-                                                                    checked={isChecked}
-                                                                    onChange={() => handleTogglePermission(permission)}
-                                                                />
-                                                                <Box>
-                                                                    <Typography
-                                                                        variant="caption"
-                                                                        sx={{
-                                                                            fontSize: '0.8rem',
-                                                                            lineHeight: 1.3,
-                                                                            ...(shouldHighlight && {
-                                                                                bgcolor: 'warning.light',
-                                                                                color: 'warning.contrastText',
-                                                                                px: 0.5,
-                                                                                borderRadius: 0.5,
-                                                                                fontWeight: 600
-                                                                            })
-                                                                        }}
-                                                                    >
-                                                                        {displayName}
-                                                                    </Typography>
-                                                                    <Typography 
-                                                                        variant="caption" 
-                                                                        sx={{ 
-                                                                            color: 'text.disabled', 
-                                                                            fontSize: '0.7rem', 
-                                                                            ml: 0,
-                                                                            display: 'block',
-                                                                            maxWidth: '100%',
-                                                                            overflow: 'hidden',
-                                                                            textOverflow: 'ellipsis',
-                                                                            whiteSpace: 'nowrap'
-                                                                        }}
-                                                                    >
-                                                                        {permission.name}
-                                                                    </Typography>
-                                                                </Box>
-                                                            </label>
-                                                        </Box>
-                                                    );
-                                                })}
-                                            </Stack>
-                                        </Box>
-                                        {hasMoreItems && (
-                                            <Box sx={{
-                                                display: 'flex',
-                                                justifyContent: 'center',
-                                                mt: 'auto',
-                                                pt: 1,
-                                                borderTop: '1px solid',
-                                                borderColor: 'divider'
-                                            }}>
-                                                <Button
-                                                    size="small"
-                                                    variant="text"
-                                                    onClick={() => setExpandedCards(prev => ({
-                                                        ...prev,
-                                                        [groupKey]: !isExpanded
-                                                    }))}
-                                                    sx={{
-                                                        fontSize: '0.75rem',
-                                                        minHeight: '28px',
-                                                        textTransform: 'none'
-                                                    }}
-                                                >
-                                                    {isExpanded
-                                                        ? 'Show Less ▲'
-                                                        : `Show ${remainingCount} More ▼`
-                                                    }
-                                                </Button>
-                                            </Box>
-                                        )}
-                                    </CardContent>
-                                </Card>
-                            </Grid>
-                        );
-                    })}
-                </Grid>
-            )}
-        </Box>
-    );
-};
-
-const PermissionsSelectorEdit: React.FC<IDashAutoAdminCustomFieldComponent> = (props) => {
-    const { record: contextRecord, resource, isPending,isLoading} = useEditContext();
-    if (isPending || isLoading) return <CircularProgress />;
-    return <PermissionsSelectorBase {...props} record={contextRecord} />;
-};
-
-const PermissionsSelectorCreate: React.FC<IDashAutoAdminCustomFieldComponent> = (props) => {
-    return <PermissionsSelectorBase {...props} record={{}} />;
-};
-
-const PermissionsSelector = ({
-    method,
-    attribute,
-    resourceConfig
-}: IDashAutoAdminCustomFieldComponent) => {
-
-    switch (method) {
-        case 'edit':
-            return <PermissionsSelectorEdit attribute={attribute} method={method} resourceConfig={resourceConfig} />;
-        case 'create':
-            return <PermissionsSelectorCreate attribute={attribute} method={method} resourceConfig={resourceConfig} />;
-        case 'view':
-            return <><NotFound/></>
-            //<PermissionsSelectorView attribute={attribute} method={method} resourceConfig={resourceConfig} />;
-        default:
-            return null;
-    }
-};
-
-export default PermissionsSelector;