@dashadmin/dash-admin 1.3.24 → 1.3.26

package/dist/components/permission/PermissionsSelector.js

@@ -1 +1,719 @@
-import{Fragment as Ie,jsx as e,jsxs as r}from"react/jsx-runtime";import{useCallback as h,useEffect as I,useState as b,useMemo as me,useRef as de}from"react";import{useRecordContext as He,useRefresh as Me,useEditContext as Ve}from"react-admin";import{useController as ue,useFormContext as qe,useFormState as Ke}from"react-hook-form";import{useAxios as Ue}from"@dashadmin/dash-axios-hook";import{Grid as A,Card as pe,CardContent as he,Typography as m,Button as P,Box as d,Chip as K,Divider as ge,Stack as fe,Toolbar as Je,Paper as U,TextField as xe,InputAdornment as W,CircularProgress as E,IconButton as ye}from"@mui/material";import{SelectAll as be,DeselectOutlined as Ce,Search as J,Clear as $,FilterList as Qe}from"@mui/icons-material";import{useSystemRequestsCache as Xe}from"../../contexts/SystemRequestsCache";import{NotFound as Ye}from"@dashadmin/dash-components";const H={checkbox:{marginRight:"8px",cursor:"pointer",accentColor:"#1976d2"},checkboxLabel:{display:"flex",alignItems:"center",fontSize:"14px",cursor:"pointer",padding:"4px 0",margin:0,userSelect:"none"},selectAllLabel:{display:"flex",alignItems:"center",fontSize:"14px",fontWeight:"bold",cursor:"pointer",margin:0,userSelect:"none"}},kt=({method:u,attribute:x})=>{const p=He(),[l,i]=b([]);return I(()=>{if(p?.permissions){const y=p.permissions.reduce((v,T)=>{const w=v.find(R=>R[0]?.group===T.group);return w?w.push(T):v.push([T]),v},[]);i(y)}},[p?.permissions]),!p?.permissions||p.permissions.length===0?e(d,{sx:{p:2,textAlign:"center"},children:e(m,{variant:"body2",color:"text.secondary",children:"No permissions assigned"})}):r(d,{sx:{p:2},children:[r(m,{variant:"h6",sx:{mb:3},children:["Assigned Permissions (",p.permissions.length,")"]}),e(A,{container:!0,spacing:3,children:l?.map((y,v)=>e(A,{item:!0,xs:12,sm:6,md:4,lg:3,children:e(pe,{variant:"outlined",sx:{height:"100%",display:"flex",flexDirection:"column"},children:r(he,{sx:{flexGrow:1},children:[r(d,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",mb:2},children:[e(m,{variant:"subtitle1",sx:{fontWeight:600,fontSize:"1rem"},children:y[0]?.group.charAt(0).toUpperCase()+y[0]?.group.slice(1)}),e(K,{label:y.length,size:"small",color:"primary"})]}),e(fe,{spacing:.5,children:y.map((T,w)=>r(m,{variant:"body2",sx:{color:"text.secondary",fontSize:"0.875rem"},children:["\u2022 ",T.name.split(".").pop()]},w))})]})})},v))})]})};function Ze(u,x){if(!Array.isArray(u)||!Array.isArray(x)||u.length!==x.length)return!1;const p=u.map(i=>i.route_name).sort(),l=x.map(i=>i.route_name).sort();return p.every((i,y)=>i===l[y])}const Q=6,Se=({method:u,attribute:x,resourceConfig:p,record:l=null})=>{const[i,y]=b([]),[v,T]=b([]),[w,R]=b({}),[X,ke]=b(!1),[G,M]=b(""),[L,V]=b(""),[C,Y]=b(""),[g,Z]=b(""),F=de(null),_=de(null),nt=Ue(),rt=Me(),st=qe(),it=Ke(),ee=ue({name:"permission_objects"}),te=ue({name:"permissions"}),[a,S]=b([]),{formats:B,loading:D}=Xe(),oe=h(t=>t.reduce((o,n)=>{const s=o.find(c=>c[0]?.group===n.group);return s?s.push(n):o.push([n]),o},[]),[]);I(()=>(F.current&&clearTimeout(F.current),F.current=setTimeout(()=>{Y(G)},500),()=>{F.current&&clearTimeout(F.current)}),[G]),I(()=>(_.current&&clearTimeout(_.current),_.current=setTimeout(()=>{Z(L)},500),()=>{_.current&&clearTimeout(_.current)}),[L]),I(()=>{if(!X&&B){const t=Array.isArray(B.data)?B.data:Array.isArray(B)?B:[];if(t.length>0){const o=oe(t);y(o);const n=o.reduce((s,c)=>{const O=c[0]?.group||"Other";return s[O]=!1,s},{});R(n)}ke(!0)}},[B,X,oe]),I(()=>{if(!D&&l&&l.id&&i.length>0){const t=l.permission_objects||[];Ze(t,a)||S(t)}},[i,l?.permissions,l?.permission_objects,l?.id,D]),I(()=>{if(!D&&l&&l.id&&i.length>0){const t=l.permission_objects||[],o=new Set(t.map(s=>s.route_name)),n=i.flat().map(s=>({...s,checked:o.has(s.route_name)}));(a.length!==n.length||a.some((s,c)=>s.route_name!==n[c].route_name||s.checked!==n[c].checked))&&S(n)}},[i,l?.permissions,l?.permission_objects,l?.id,D]),I(()=>{a&&(ee.field.onChange(a.map(t=>({...t,checked:!0}))),te.field.onChange(a.map(t=>t.route_name)))},[a]);const Ae=h(t=>{S(o=>o.map(n=>n.route_name===t.route_name?{...n,checked:!n.checked}:n))},[]),Pe=h(t=>{S(o=>{const n=t.every(s=>o.find(c=>c.route_name===s.route_name&&c.checked));return o.map(s=>t.some(c=>c.route_name===s.route_name)?{...s,checked:!n}:s)})},[]),ve=h(()=>{console.log("Selecting all permissions",i.flat().length),S(t=>t.map(o=>({...o,checked:!0})))},[]),Te=h(()=>{S(t=>t.map(o=>({...o,checked:!1})))},[]);I(()=>{if(!a)return;const t=a.filter(o=>o.checked);ee.field.onChange(t),te.field.onChange(t.map(o=>o.route_name)),console.log("Syncing permissions to form:",{totalPermissions:a.length,checkedPermissions:t.length,selectedCount:a.filter(o=>o.checked).length,firstFew:t.slice(0,3).map(o=>o.name)})},[a]);const f=me(()=>{let t=i;if(C.trim()){const o=C.toLowerCase().trim();t=t.filter(n=>n[0]?.group.toLowerCase().includes(o))}if(g.trim()){const o=g.toLowerCase().trim();t=t.map(n=>n.filter(s=>s.name.toLowerCase().includes(o)||s.name.split(".").pop()?.toLowerCase().includes(o))).filter(n=>n.length>0)}return t},[i,C,g]),we=h(()=>{const t=new Set(f.flat().map(o=>o.route_name));console.log("Selecting all filtered permissions",t.size),S(o=>o.map(n=>t.has(n.route_name)?{...n,checked:!0}:n))},[f]),Be=h(()=>{const t=new Set(f.flat().map(o=>o.route_name));S(o=>o.map(n=>t.has(n.route_name)?{...n,checked:!1}:n))},[f]),q=i.flat().length,N=a.filter(t=>t.checked).length,ne=N===q,Fe=N===0,z=!!C.trim()||!!g.trim(),re=f.length,j=f.reduce((t,o)=>t+o.length,0),se=me(()=>{const t=new Set(f.flat().map(o=>o.route_name));return a.filter(o=>o.checked&&t.has(o.route_name)).length},[f,a]),_e=se===j,ze=se===0,Re=h(()=>M(""),[]),Ge=h(()=>V(""),[]),ie=h(()=>{M(""),V(""),Y(""),Z("")},[]),Le=h(t=>t.every(o=>a.find(n=>n.name===o.name&&n.checked)),[a]),De=h(t=>t.filter(o=>a.find(n=>n.name===o.name&&n.checked)).length,[a]),Ne=h(t=>!!a.find(n=>n.name===t.name)?.checked,[a]);return a?!i||!i.length?e(E,{}):l?r(d,{sx:{p:2},children:[e(U,{elevation:1,sx:{mb:3,borderRadius:2,overflow:"hidden"},children:r(Je,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",minHeight:"64px !important",px:3,bgcolor:"background.default"},children:[r(d,{sx:{display:"flex",alignItems:"center",gap:2},children:[e(m,{variant:"h6",sx:{fontWeight:600},children:"Permissions Selection"}),e(K,{label:`${N} / ${q} selected`,color:ne?"success":N>0?"warning":"default",variant:"outlined"})]}),r(d,{sx:{display:"flex",gap:1},children:[z&&r(Ie,{children:[r(P,{variant:"contained",startIcon:e(be,{}),onClick:we,disabled:_e,size:"small",color:"primary",sx:{textTransform:"none"},children:["Select Filtered (",j,")"]}),e(P,{variant:"contained",startIcon:e(Ce,{}),onClick:Be,disabled:ze,size:"small",color:"secondary",sx:{textTransform:"none"},children:"Deselect Filtered"}),e(ge,{orientation:"vertical",flexItem:!0,sx:{mx:1}})]}),e(P,{variant:"outlined",startIcon:e(be,{}),onClick:ve,disabled:ne,size:"small",sx:{textTransform:"none"},children:"Select All"}),e(P,{variant:"outlined",startIcon:e(Ce,{}),onClick:Te,disabled:Fe,size:"small",color:"secondary",sx:{textTransform:"none"},children:"Deselect All"})]})]})}),r(U,{elevation:1,sx:{mb:3,p:3,borderRadius:2,bgcolor:"background.paper"},children:[r(d,{sx:{display:"flex",alignItems:"center",gap:2,mb:2},children:[e(Qe,{color:"primary"}),e(m,{variant:"h6",sx:{fontWeight:600},children:"Search & Filter"}),z&&e(P,{size:"small",variant:"outlined",color:"secondary",onClick:ie,startIcon:e($,{}),sx:{textTransform:"none"},children:"Clear All Filters"})]}),r(A,{container:!0,spacing:2,children:[e(A,{item:!0,xs:12,md:6,children:e(xe,{fullWidth:!0,variant:"outlined",label:"Search by Group Name",placeholder:"e.g., user, admin, system...",value:G,onChange:t=>M(t.target.value),InputProps:{startAdornment:e(W,{position:"start",children:e(J,{color:"action"})}),endAdornment:G&&e(W,{position:"end",children:e(ye,{size:"small",onClick:Re,children:e($,{fontSize:"small"})})})}})}),e(A,{item:!0,xs:12,md:6,children:e(xe,{fullWidth:!0,variant:"outlined",label:"Search by Permission Name",placeholder:"e.g., create, edit, delete, view...",value:L,onChange:t=>V(t.target.value),InputProps:{startAdornment:e(W,{position:"start",children:e(J,{color:"action"})}),endAdornment:L&&e(W,{position:"end",children:e(ye,{size:"small",onClick:Ge,children:e($,{fontSize:"small"})})})}})})]}),z&&r(d,{sx:{mt:2,p:2,bgcolor:"action.hover",borderRadius:1},children:[r(m,{variant:"body2",color:"text.secondary",children:[e("strong",{children:"Search Results:"})," ",re," group",re!==1?"s":""," ","(",j," permission",j!==1?"s":"",")"," ","of ",i.length," total groups (",q," total permissions)"]}),C&&r(m,{variant:"caption",color:"primary",sx:{display:"block",mt:.5},children:['\u2022 Group filter: "',C,'"']}),g&&r(m,{variant:"caption",color:"primary",sx:{display:"block",mt:.5},children:['\u2022 Permission filter: "',g,'"']})]})]}),z&&f.length===0&&r(U,{sx:{p:4,textAlign:"center",bgcolor:"background.default",border:"1px dashed",borderColor:"divider"},children:[e(J,{sx:{fontSize:48,color:"text.disabled",mb:2}}),e(m,{variant:"h6",color:"text.secondary",gutterBottom:!0,children:"No permissions found"}),r(m,{variant:"body2",color:"text.disabled",sx:{mb:2},children:["No permissions match your search criteria",C&&` for group "${C}"`,g&&` for permission "${g}"`]}),e(P,{variant:"outlined",size:"small",onClick:ie,startIcon:e($,{}),children:"Clear All Filters"})]}),f.length>0&&e(A,{container:!0,spacing:3,children:f.map((t,o)=>{const n=t[0]?.group||"Other",s=n,c=w[s]||!1,O=De(t),ae=Le(t),le=t.length>Q,je=c?t:t.slice(0,Q),Oe=t.length-Q;return e(A,{item:!0,xs:12,md:4,children:e(pe,{variant:"outlined",sx:{height:"100%",display:"flex",flexDirection:"column",transition:"all 0.2s ease-in-out","&:hover":{boxShadow:3,borderColor:"primary.main"},...z&&{border:"2px solid",borderColor:"primary.light",bgcolor:"primary.50"}},children:r(he,{sx:{flexGrow:1,display:"flex",flexDirection:"column",p:2,"&:last-child":{pb:2}},children:[r(d,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",mb:2,minHeight:"32px"},children:[e(m,{variant:"subtitle1",sx:{fontWeight:600,fontSize:"1rem",lineHeight:1.2},children:n}),e(K,{label:`${O}/${t.length}`,size:"small",color:ae?"primary":O>0?"warning":"default",sx:{fontSize:"0.75rem",height:24,mr:1}})]}),r(d,{sx:{mb:2},children:[r("label",{style:H.selectAllLabel,children:[e("input",{type:"checkbox",style:H.checkbox,checked:ae,onChange:()=>Pe(t)}),"Select all ",n," permissions"]}),e(ge,{sx:{mt:1}})]}),e(d,{sx:{flexGrow:1,mb:le?2:0},children:e(fe,{spacing:.5,children:je.map((k,We)=>{const ce=k.name.split(".").pop(),Ee=Ne(k),$e=g&&(k.name.toLowerCase().includes(g.toLowerCase())||ce?.toLowerCase().includes(g.toLowerCase()));return e(d,{children:r("label",{style:H.checkboxLabel,children:[e("input",{type:"checkbox",style:H.checkbox,checked:Ee,onChange:()=>Ae(k)}),r(d,{children:[e(m,{variant:"caption",sx:{fontSize:"0.8rem",lineHeight:1.3,...$e&&{bgcolor:"warning.light",color:"warning.contrastText",px:.5,borderRadius:.5,fontWeight:600}},children:ce}),e(m,{variant:"caption",sx:{color:"text.disabled",fontSize:"0.7rem",ml:0,display:"block",maxWidth:"100%",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:k.name})]})]})},We)})})}),le&&e(d,{sx:{display:"flex",justifyContent:"center",mt:"auto",pt:1,borderTop:"1px solid",borderColor:"divider"},children:e(P,{size:"small",variant:"text",onClick:()=>R(k=>({...k,[s]:!c})),sx:{fontSize:"0.75rem",minHeight:"28px",textTransform:"none"},children:c?"Show Less \u25B2":`Show ${Oe} More \u25BC`})})]})})},o)})})]}):e(E,{}):e(E,{})},et=u=>{const{record:x,resource:p,isPending:l,isLoading:i}=Ve();return l||i?e(E,{}):e(Se,{...u,record:x})},tt=u=>e(Se,{...u,record:{}}),ot=({method:u,attribute:x,resourceConfig:p})=>{switch(u){case"edit":return e(et,{attribute:x,method:u,resourceConfig:p});case"create":return e(tt,{attribute:x,method:u,resourceConfig:p});case"view":return e(Ie,{children:e(Ye,{})});default:return null}};var At=ot;export{At as default};
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState, useMemo, useRef } from "react";
+import { useRecordContext, useRefresh, useEditContext } from "react-admin";
+import { useController, useFormContext, useFormState } from "react-hook-form";
+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 { useSystemRequestsCache } from "../../contexts/SystemRequestsCache";
+import { NotFound } from "dash-components";
+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"
+  },
+  selectAllLabel: {
+    display: "flex",
+    alignItems: "center",
+    fontSize: "14px",
+    fontWeight: "bold",
+    cursor: "pointer",
+    margin: 0,
+    userSelect: "none"
+  }
+};
+const PermissionsSelectorView = ({
+  method,
+  attribute
+}) => {
+  const record = useRecordContext();
+  const [permissions, setPermissions] = useState([]);
+  useEffect(() => {
+    if (record == null ? void 0 : record.permissions) {
+      const groupedPermissions = record.permissions.reduce((acc, permission) => {
+        const group = acc.find((g) => {
+          var _a;
+          return ((_a = g[0]) == null ? void 0 : _a.group) === permission.group;
+        });
+        if (group) {
+          group.push(permission);
+        } else {
+          acc.push([permission]);
+        }
+        return acc;
+      }, []);
+      setPermissions(groupedPermissions);
+    }
+  }, [record == null ? void 0 : record.permissions]);
+  if (!(record == null ? void 0 : record.permissions) || record.permissions.length === 0) {
+    return /* @__PURE__ */ jsx(Box, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "No permissions assigned" }) });
+  }
+  return /* @__PURE__ */ jsxs(Box, { sx: { p: 2 }, children: [
+    /* @__PURE__ */ jsxs(Typography, { variant: "h6", sx: { mb: 3 }, children: [
+      "Assigned Permissions (",
+      record.permissions.length,
+      ")"
+    ] }),
+    /* @__PURE__ */ jsx(Grid, { container: true, spacing: 3, children: permissions == null ? void 0 : permissions.map((tab, index) => {
+      var _a, _b;
+      return (
+        /* @ts-ignore */
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 3, children: /* @__PURE__ */ jsx(
+          Card,
+          {
+            variant: "outlined",
+            sx: {
+              height: "100%",
+              display: "flex",
+              flexDirection: "column"
+            },
+            children: /* @__PURE__ */ jsxs(CardContent, { sx: { flexGrow: 1 }, children: [
+              /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2 }, children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", sx: { fontWeight: 600, fontSize: "1rem" }, children: ((_a = tab[0]) == null ? void 0 : _a.group.charAt(0).toUpperCase()) + ((_b = tab[0]) == null ? void 0 : _b.group.slice(1)) }),
+                /* @__PURE__ */ jsx(
+                  Chip,
+                  {
+                    label: tab.length,
+                    size: "small",
+                    color: "primary"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(Stack, { spacing: 0.5, children: tab.map((item, i) => /* @__PURE__ */ jsxs(Typography, { variant: "body2", sx: { color: "text.secondary", fontSize: "0.875rem" }, children: [
+                "\u2022 ",
+                item.name.split(".").pop()
+              ] }, i)) })
+            ] })
+          }
+        ) }, index)
+      );
+    }) })
+  ] });
+};
+function arePermissionsEqual(a, b) {
+  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 = ({
+  method,
+  attribute,
+  resourceConfig,
+  record = null
+}) => {
+  const [permissionsData, setPermissionsData] = useState([]);
+  const [parsedValues, setParsedValues] = useState([]);
+  const [expandedCards, setExpandedCards] = useState({});
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [groupSearchTerm, setGroupSearchTerm] = useState("");
+  const [itemSearchTerm, setItemSearchTerm] = useState("");
+  const [debouncedGroupSearch, setDebouncedGroupSearch] = useState("");
+  const [debouncedItemSearch, setDebouncedItemSearch] = useState("");
+  const groupSearchTimeoutRef = useRef(null);
+  const itemSearchTimeoutRef = useRef(null);
+  const axios = useAxios();
+  const refresh = useRefresh();
+  const form = useFormContext();
+  const formState = useFormState();
+  const permissionObjectsController = useController({ name: "permission_objects" });
+  const permissionsController = useController({ name: "permissions" });
+  const [statePermissions, setStatePermissions] = useState([]);
+  const { formats: availablePermissions, loading } = useSystemRequestsCache();
+  const groupPermissions = useCallback((permissions) => {
+    return permissions.reduce((acc, permission) => {
+      const group = acc.find((g) => {
+        var _a;
+        return ((_a = g[0]) == null ? void 0 : _a.group) === permission.group;
+      });
+      if (group) {
+        group.push(permission);
+      } else {
+        acc.push([permission]);
+      }
+      return acc;
+    }, []);
+  }, []);
+  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]);
+  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);
+        const initialExpandedState = groupedPerms.reduce((acc, group) => {
+          var _a;
+          const groupKey = ((_a = group[0]) == null ? void 0 : _a.group) || "Other";
+          acc[groupKey] = false;
+          return acc;
+        }, {});
+        setExpandedCards(initialExpandedState);
+      }
+      setIsInitialized(true);
+    }
+  }, [availablePermissions, isInitialized, groupPermissions]);
+  useEffect(() => {
+    if (!loading && record && record.id && permissionsData.length > 0) {
+      const initialPermissionObjects = record.permission_objects || [];
+      if (!arePermissionsEqual(initialPermissionObjects, statePermissions)) {
+        setStatePermissions(initialPermissionObjects);
+      }
+    }
+  }, [permissionsData, record == null ? void 0 : record.permissions, record == null ? void 0 : record.permission_objects, record == null ? void 0 : record.id, loading]);
+  useEffect(() => {
+    if (!loading && record && record.id && permissionsData.length > 0) {
+      const initialPermissionObjects = record.permission_objects || [];
+      const checkedRouteNames = new Set(initialPermissionObjects.map((obj) => obj.route_name));
+      const initialChecked = permissionsData.flat().map((p) => __spreadProps(__spreadValues({}, p), {
+        checked: checkedRouteNames.has(p.route_name)
+      }));
+      if (statePermissions.length !== initialChecked.length || statePermissions.some((p, i) => p.route_name !== initialChecked[i].route_name || p.checked !== initialChecked[i].checked)) {
+        setStatePermissions(initialChecked);
+      }
+    }
+  }, [permissionsData, record == null ? void 0 : record.permissions, record == null ? void 0 : record.permission_objects, record == null ? void 0 : record.id, loading]);
+  useEffect(() => {
+    if (!statePermissions) return;
+    permissionObjectsController.field.onChange(statePermissions.map((p) => __spreadProps(__spreadValues({}, p), { checked: true })));
+    permissionsController.field.onChange(statePermissions.map((p) => p.route_name));
+  }, [statePermissions]);
+  const handleTogglePermission = useCallback((permission) => {
+    setStatePermissions((prev) => prev.map(
+      (p) => p.route_name === permission.route_name ? __spreadProps(__spreadValues({}, p), { checked: !p.checked }) : p
+    ));
+  }, []);
+  const handleToggleGroup = useCallback((groupPermissions2) => {
+    setStatePermissions((prev) => {
+      const allSelected = groupPermissions2.every((p) => prev.find((sel) => sel.route_name === p.route_name && sel.checked));
+      return prev.map(
+        (p) => groupPermissions2.some((gp) => gp.route_name === p.route_name) ? __spreadProps(__spreadValues({}, p), { checked: !allSelected }) : p
+      );
+    });
+  }, []);
+  const handleSelectAll = useCallback(() => {
+    console.log("Selecting all permissions", permissionsData.flat().length);
+    setStatePermissions(
+      (prev) => prev.map((p) => __spreadProps(__spreadValues({}, p), { checked: true }))
+    );
+  }, []);
+  const handleDeselectAll = useCallback(() => {
+    setStatePermissions((prev) => prev.map((p) => __spreadProps(__spreadValues({}, p), { checked: false })));
+  }, []);
+  useEffect(() => {
+    if (!statePermissions) return;
+    const checkedPermissions = statePermissions.filter((p) => p.checked);
+    permissionObjectsController.field.onChange(checkedPermissions);
+    permissionsController.field.onChange(
+      checkedPermissions.map((p) => p.route_name)
+    );
+    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)
+    });
+  }, [statePermissions]);
+  const filteredPermissions = useMemo(() => {
+    let filtered = permissionsData;
+    if (debouncedGroupSearch.trim()) {
+      const groupSearchLower = debouncedGroupSearch.toLowerCase().trim();
+      filtered = filtered.filter((tab) => {
+        var _a;
+        return (_a = tab[0]) == null ? void 0 : _a.group.toLowerCase().includes(groupSearchLower);
+      });
+    }
+    if (debouncedItemSearch.trim()) {
+      const itemSearchLower = debouncedItemSearch.toLowerCase().trim();
+      filtered = filtered.map((tab) => tab.filter(
+        (item) => {
+          var _a;
+          return item.name.toLowerCase().includes(itemSearchLower) || ((_a = item.name.split(".").pop()) == null ? void 0 : _a.toLowerCase().includes(itemSearchLower));
+        }
+      )).filter((tab) => tab.length > 0);
+    }
+    return filtered;
+  }, [permissionsData, debouncedGroupSearch, debouncedItemSearch]);
+  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) ? __spreadProps(__spreadValues({}, p), { checked: true }) : p)
+    );
+  }, [filteredPermissions]);
+  const handleDeselectAllFiltered = useCallback(() => {
+    const filteredRouteNames = new Set(filteredPermissions.flat().map((p) => p.route_name));
+    setStatePermissions(
+      (prev) => prev.map((p) => filteredRouteNames.has(p.route_name) ? __spreadProps(__spreadValues({}, p), { checked: false }) : p)
+    );
+  }, [filteredPermissions]);
+  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);
+  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;
+  const handleClearGroupSearch = useCallback(() => setGroupSearchTerm(""), []);
+  const handleClearItemSearch = useCallback(() => setItemSearchTerm(""), []);
+  const handleClearAllSearches = useCallback(() => {
+    setGroupSearchTerm("");
+    setItemSearchTerm("");
+    setDebouncedGroupSearch("");
+    setDebouncedItemSearch("");
+  }, []);
+  const isGroupSelected = useCallback((groupPermissions2) => {
+    return groupPermissions2.every(
+      (p) => statePermissions.find((sel) => sel.name === p.name && sel.checked)
+    );
+  }, [statePermissions]);
+  const getSelectedCount = useCallback((groupPermissions2) => {
+    return groupPermissions2.filter(
+      (p) => statePermissions.find((sel) => sel.name === p.name && sel.checked)
+    ).length;
+  }, [statePermissions]);
+  const isPermissionSelected = useCallback((permission) => {
+    const found = statePermissions.find((p) => p.name === permission.name);
+    return !!(found == null ? void 0 : found.checked);
+  }, [statePermissions]);
+  if (!statePermissions) return /* @__PURE__ */ jsx(CircularProgress, {});
+  if (!permissionsData || !permissionsData.length) return /* @__PURE__ */ jsx(CircularProgress, {});
+  if (!record) return /* @__PURE__ */ jsx(CircularProgress, {});
+  return /* @__PURE__ */ jsxs(Box, { sx: { p: 2 }, children: [
+    /* @__PURE__ */ jsx(Paper, { elevation: 1, sx: { mb: 3, borderRadius: 2, overflow: "hidden" }, children: /* @__PURE__ */ jsxs(Toolbar, { sx: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      minHeight: "64px !important",
+      px: 3,
+      bgcolor: "background.default"
+    }, children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { fontWeight: 600 }, children: "Permissions Selection" }),
+        /* @__PURE__ */ jsx(
+          Chip,
+          {
+            label: `${selectedPermissions} / ${totalPermissions} selected`,
+            color: isAllSelected ? "success" : selectedPermissions > 0 ? "warning" : "default",
+            variant: "outlined"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [
+        hasActiveSearch && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "contained",
+              startIcon: /* @__PURE__ */ jsx(SelectAllIcon, {}),
+              onClick: handleSelectAllFiltered,
+              disabled: isAllFilteredSelected,
+              size: "small",
+              color: "primary",
+              sx: { textTransform: "none" },
+              children: [
+                "Select Filtered (",
+                totalFilteredItems,
+                ")"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "contained",
+              startIcon: /* @__PURE__ */ jsx(DeselectAllIcon, {}),
+              onClick: handleDeselectAllFiltered,
+              disabled: isNoneFilteredSelected,
+              size: "small",
+              color: "secondary",
+              sx: { textTransform: "none" },
+              children: "Deselect Filtered"
+            }
+          ),
+          /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { mx: 1 } })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outlined",
+            startIcon: /* @__PURE__ */ jsx(SelectAllIcon, {}),
+            onClick: handleSelectAll,
+            disabled: isAllSelected,
+            size: "small",
+            sx: { textTransform: "none" },
+            children: "Select All"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outlined",
+            startIcon: /* @__PURE__ */ jsx(DeselectAllIcon, {}),
+            onClick: handleDeselectAll,
+            disabled: isNoneSelected,
+            size: "small",
+            color: "secondary",
+            sx: { textTransform: "none" },
+            children: "Deselect All"
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(Paper, { elevation: 1, sx: { mb: 3, p: 3, borderRadius: 2, bgcolor: "background.paper" }, children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2, mb: 2 }, children: [
+        /* @__PURE__ */ jsx(FilterIcon, { color: "primary" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { fontWeight: 600 }, children: "Search & Filter" }),
+        hasActiveSearch && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            variant: "outlined",
+            color: "secondary",
+            onClick: handleClearAllSearches,
+            startIcon: /* @__PURE__ */ jsx(ClearIcon, {}),
+            sx: { textTransform: "none" },
+            children: "Clear All Filters"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, children: /* @__PURE__ */ jsx(
+          TextField,
+          {
+            fullWidth: true,
+            variant: "outlined",
+            label: "Search by Group Name",
+            placeholder: "e.g., user, admin, system...",
+            value: groupSearchTerm,
+            onChange: (e) => setGroupSearchTerm(e.target.value),
+            InputProps: {
+              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { color: "action" }) }),
+              endAdornment: groupSearchTerm && /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handleClearGroupSearch, children: /* @__PURE__ */ jsx(ClearIcon, { fontSize: "small" }) }) })
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, children: /* @__PURE__ */ jsx(
+          TextField,
+          {
+            fullWidth: true,
+            variant: "outlined",
+            label: "Search by Permission Name",
+            placeholder: "e.g., create, edit, delete, view...",
+            value: itemSearchTerm,
+            onChange: (e) => setItemSearchTerm(e.target.value),
+            InputProps: {
+              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { color: "action" }) }),
+              endAdornment: itemSearchTerm && /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handleClearItemSearch, children: /* @__PURE__ */ jsx(ClearIcon, { fontSize: "small" }) }) })
+            }
+          }
+        ) })
+      ] }),
+      hasActiveSearch && /* @__PURE__ */ jsxs(Box, { sx: { mt: 2, p: 2, bgcolor: "action.hover", borderRadius: 1 }, children: [
+        /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
+          /* @__PURE__ */ jsx("strong", { children: "Search Results:" }),
+          " ",
+          filteredGroupsCount,
+          " group",
+          filteredGroupsCount !== 1 ? "s" : "",
+          " ",
+          "(",
+          totalFilteredItems,
+          " permission",
+          totalFilteredItems !== 1 ? "s" : "",
+          ")",
+          " ",
+          "of ",
+          permissionsData.length,
+          " total groups (",
+          totalPermissions,
+          " total permissions)"
+        ] }),
+        debouncedGroupSearch && /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "primary", sx: { display: "block", mt: 0.5 }, children: [
+          '\u2022 Group filter: "',
+          debouncedGroupSearch,
+          '"'
+        ] }),
+        debouncedItemSearch && /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "primary", sx: { display: "block", mt: 0.5 }, children: [
+          '\u2022 Permission filter: "',
+          debouncedItemSearch,
+          '"'
+        ] })
+      ] })
+    ] }),
+    hasActiveSearch && filteredPermissions.length === 0 && /* @__PURE__ */ jsxs(Paper, { sx: {
+      p: 4,
+      textAlign: "center",
+      bgcolor: "background.default",
+      border: "1px dashed",
+      borderColor: "divider"
+    }, children: [
+      /* @__PURE__ */ jsx(SearchIcon, { sx: { fontSize: 48, color: "text.disabled", mb: 2 } }),
+      /* @__PURE__ */ jsx(Typography, { variant: "h6", color: "text.secondary", gutterBottom: true, children: "No permissions found" }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.disabled", sx: { mb: 2 }, children: [
+        "No permissions match your search criteria",
+        debouncedGroupSearch && ` for group "${debouncedGroupSearch}"`,
+        debouncedItemSearch && ` for permission "${debouncedItemSearch}"`
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outlined",
+          size: "small",
+          onClick: handleClearAllSearches,
+          startIcon: /* @__PURE__ */ jsx(ClearIcon, {}),
+          children: "Clear All Filters"
+        }
+      )
+    ] }),
+    filteredPermissions.length > 0 && /* @__PURE__ */ jsx(Grid, { container: true, spacing: 3, children: filteredPermissions.map((group, groupIndex) => {
+      var _a;
+      const groupLabel = ((_a = group[0]) == null ? void 0 : _a.group) || "Other";
+      const groupKey = groupLabel;
+      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 */
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 4, children: /* @__PURE__ */ jsx(Card, { variant: "outlined", sx: __spreadValues({
+          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"
+        }), children: /* @__PURE__ */ jsxs(CardContent, { sx: {
+          flexGrow: 1,
+          display: "flex",
+          flexDirection: "column",
+          p: 2,
+          "&:last-child": { pb: 2 }
+        }, children: [
+          /* @__PURE__ */ jsxs(Box, { sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            mb: 2,
+            minHeight: "32px"
+          }, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", sx: { fontWeight: 600, fontSize: "1rem", lineHeight: 1.2 }, children: groupLabel }),
+            /* @__PURE__ */ jsx(
+              Chip,
+              {
+                label: `${groupSelectedCount}/${group.length}`,
+                size: "small",
+                color: isAllSelectedInGroup ? "primary" : groupSelectedCount > 0 ? "warning" : "default",
+                sx: { fontSize: "0.75rem", height: 24, mr: 1 }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { sx: { mb: 2 }, children: [
+            /* @__PURE__ */ jsxs("label", { style: checkboxStyles.selectAllLabel, children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  style: checkboxStyles.checkbox,
+                  checked: isAllSelectedInGroup,
+                  onChange: () => handleToggleGroup(group)
+                }
+              ),
+              "Select all ",
+              groupLabel,
+              " permissions"
+            ] }),
+            /* @__PURE__ */ jsx(Divider, { sx: { mt: 1 } })
+          ] }),
+          /* @__PURE__ */ jsx(Box, { sx: { flexGrow: 1, mb: hasMoreItems ? 2 : 0 }, children: /* @__PURE__ */ jsx(Stack, { spacing: 0.5, children: visibleItems.map((permission, permIndex) => {
+            const displayName = permission.name.split(".").pop();
+            const isChecked = isPermissionSelected(permission);
+            const shouldHighlight = debouncedItemSearch && (permission.name.toLowerCase().includes(debouncedItemSearch.toLowerCase()) || (displayName == null ? void 0 : displayName.toLowerCase().includes(debouncedItemSearch.toLowerCase())));
+            return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs("label", { style: checkboxStyles.checkboxLabel, children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  style: checkboxStyles.checkbox,
+                  checked: isChecked,
+                  onChange: () => handleTogglePermission(permission)
+                }
+              ),
+              /* @__PURE__ */ jsxs(Box, { children: [
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "caption",
+                    sx: __spreadValues({
+                      fontSize: "0.8rem",
+                      lineHeight: 1.3
+                    }, shouldHighlight && {
+                      bgcolor: "warning.light",
+                      color: "warning.contrastText",
+                      px: 0.5,
+                      borderRadius: 0.5,
+                      fontWeight: 600
+                    }),
+                    children: displayName
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "caption",
+                    sx: {
+                      color: "text.disabled",
+                      fontSize: "0.7rem",
+                      ml: 0,
+                      display: "block",
+                      maxWidth: "100%",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    children: permission.name
+                  }
+                )
+              ] })
+            ] }) }, permIndex);
+          }) }) }),
+          hasMoreItems && /* @__PURE__ */ jsx(Box, { sx: {
+            display: "flex",
+            justifyContent: "center",
+            mt: "auto",
+            pt: 1,
+            borderTop: "1px solid",
+            borderColor: "divider"
+          }, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              variant: "text",
+              onClick: () => setExpandedCards((prev) => __spreadProps(__spreadValues({}, prev), {
+                [groupKey]: !isExpanded
+              })),
+              sx: {
+                fontSize: "0.75rem",
+                minHeight: "28px",
+                textTransform: "none"
+              },
+              children: isExpanded ? "Show Less \u25B2" : `Show ${remainingCount} More \u25BC`
+            }
+          ) })
+        ] }) }) }, groupIndex)
+      );
+    }) })
+  ] });
+};
+const PermissionsSelectorEdit = (props) => {
+  const { record: contextRecord, resource, isPending, isLoading } = useEditContext();
+  if (isPending || isLoading) return /* @__PURE__ */ jsx(CircularProgress, {});
+  return /* @__PURE__ */ jsx(PermissionsSelectorBase, __spreadProps(__spreadValues({}, props), { record: contextRecord }));
+};
+const PermissionsSelectorCreate = (props) => {
+  return /* @__PURE__ */ jsx(PermissionsSelectorBase, __spreadProps(__spreadValues({}, props), { record: {} }));
+};
+const PermissionsSelector = ({
+  method,
+  attribute,
+  resourceConfig
+}) => {
+  switch (method) {
+    case "edit":
+      return /* @__PURE__ */ jsx(PermissionsSelectorEdit, { attribute, method, resourceConfig });
+    case "create":
+      return /* @__PURE__ */ jsx(PermissionsSelectorCreate, { attribute, method, resourceConfig });
+    case "view":
+      return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(NotFound, {}) });
+    //<PermissionsSelectorView attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+    default:
+      return null;
+  }
+};
+var PermissionsSelector_default = PermissionsSelector;
+export {
+  PermissionsSelector_default as default
+};