@carlonicora/nextjs-jsonapi 1.52.0 → 1.53.1

package/dist/server/index.js

@@ -15,7 +15,7 @@ var _chunk3ZPK4QOBjs = require('../chunk-3ZPK4QOB.js');
 
 
 
-var _chunkQIA5FOQBjs = require('../chunk-QIA5FOQB.js');
+var _chunkQOLVON35js = require('../chunk-QOLVON35.js');
 require('../chunk-LXKSUWAV.js');
 require('../chunk-IBS6NI7D.js');
 
@@ -86,7 +86,7 @@ var ServerSession = class {
     if (!rawModules) return false;
     const modules = JSON.parse(_pako2.default.ungzip(Buffer.from(rawModules, "base64"), { to: "string" }));
     const selectedModule = modules.find((module) => module.id === params.module.moduleId);
-    return _chunkQIA5FOQBjs.checkPermissionsFromServer.call(void 0, {
+    return _chunkQOLVON35js.checkPermissionsFromServer.call(void 0, {
       module: params.module,
       action: params.action,
       data: params.data,
@@ -296,5 +296,5 @@ _chunk7QVYU63Ejs.__name.call(void 0, ServerJsonApiDelete, "ServerJsonApiDelete")
 
 
 
-exports.ServerAuthService = _chunkQIA5FOQBjs.AuthService; exports.ServerCompanyService = _chunkQIA5FOQBjs.CompanyService; exports.ServerContentService = _chunkQIA5FOQBjs.ContentService; exports.ServerFeatureService = _chunkQIA5FOQBjs.FeatureService; exports.ServerJsonApiDelete = ServerJsonApiDelete; exports.ServerJsonApiGet = ServerJsonApiGet; exports.ServerJsonApiPatch = ServerJsonApiPatch; exports.ServerJsonApiPost = ServerJsonApiPost; exports.ServerJsonApiPut = ServerJsonApiPut; exports.ServerNotificationService = _chunkQIA5FOQBjs.NotificationService; exports.ServerPushService = _chunkQIA5FOQBjs.PushService; exports.ServerRoleService = _chunkQIA5FOQBjs.RoleService; exports.ServerS3Service = _chunkQIA5FOQBjs.S3Service; exports.ServerSession = ServerSession; exports.ServerUserService = _chunkQIA5FOQBjs.UserService; exports.configureServerJsonApi = configureServerJsonApi; exports.getServerApiUrl = getServerApiUrl; exports.getServerAppUrl = getServerAppUrl; exports.getServerToken = _chunkYUO55Q5Ajs.getServerToken; exports.getServerTrackablePages = getServerTrackablePages; exports.invalidateCacheTag = invalidateCacheTag; exports.invalidateCacheTags = invalidateCacheTags; exports.serverRequest = _chunk3ZPK4QOBjs.serverRequest;
+exports.ServerAuthService = _chunkQOLVON35js.AuthService; exports.ServerCompanyService = _chunkQOLVON35js.CompanyService; exports.ServerContentService = _chunkQOLVON35js.ContentService; exports.ServerFeatureService = _chunkQOLVON35js.FeatureService; exports.ServerJsonApiDelete = ServerJsonApiDelete; exports.ServerJsonApiGet = ServerJsonApiGet; exports.ServerJsonApiPatch = ServerJsonApiPatch; exports.ServerJsonApiPost = ServerJsonApiPost; exports.ServerJsonApiPut = ServerJsonApiPut; exports.ServerNotificationService = _chunkQOLVON35js.NotificationService; exports.ServerPushService = _chunkQOLVON35js.PushService; exports.ServerRoleService = _chunkQOLVON35js.RoleService; exports.ServerS3Service = _chunkQOLVON35js.S3Service; exports.ServerSession = ServerSession; exports.ServerUserService = _chunkQOLVON35js.UserService; exports.configureServerJsonApi = configureServerJsonApi; exports.getServerApiUrl = getServerApiUrl; exports.getServerAppUrl = getServerAppUrl; exports.getServerToken = _chunkYUO55Q5Ajs.getServerToken; exports.getServerTrackablePages = getServerTrackablePages; exports.invalidateCacheTag = invalidateCacheTag; exports.invalidateCacheTags = invalidateCacheTags; exports.serverRequest = _chunk3ZPK4QOBjs.serverRequest;
 //# sourceMappingURL=index.js.map

package/dist/server/index.mjs

@@ -15,7 +15,7 @@ import {
   S3Service,
   UserService,
   checkPermissionsFromServer
-} from "../chunk-XNISXVQL.mjs";
+} from "../chunk-J2PYGXVD.mjs";
 import "../chunk-AUXK7QSA.mjs";
 import "../chunk-C7C7VY4F.mjs";
 import {

package/dist/useRbacState-DhuYYr0S.d.mts

@@ -0,0 +1,77 @@
+import { F as FeatureInterface } from './feature.interface-BxFFOPNq.mjs';
+import { R as RoleInterface } from './notification.interface-DG7cq9oG.mjs';
+import { P as PermissionMappingInterface, M as ModulePathsInterface, A as ActionType, a as PermissionValue, b as PermissionsMap } from './ModulePathsInterface-49EWvbWy.mjs';
+
+type PageInfo = {
+    startItem: number;
+    endItem: number;
+    pageSize: number;
+};
+type DataListRetriever<T> = {
+    ready?: boolean;
+    setReady: (state: boolean) => void;
+    isLoaded: boolean;
+    data: T[] | undefined;
+    total?: number;
+    next?: (onlyNewRecords?: boolean) => Promise<void>;
+    previous?: (onlyNewRecords?: boolean) => Promise<void>;
+    search: (search: string) => Promise<void>;
+    refresh: () => Promise<void>;
+    addAdditionalParameter: (key: string, value: any | null) => void;
+    removeAdditionalParameter: (key: string) => void;
+    setRefreshedElement: (element: T) => void;
+    removeElement: (element: T) => void;
+    isSearch: boolean;
+    pageInfo?: PageInfo;
+};
+declare function useDataListRetriever<T>(params: {
+    ready?: boolean;
+    retriever: (params: any) => Promise<T[]>;
+    retrieverParams?: any;
+    search?: string;
+    addAdditionalParameter?: (key: string, value: any | null) => void;
+    requiresSearch?: boolean;
+    module: any;
+}): DataListRetriever<T>;
+
+interface OriginalData {
+    features: FeatureInterface[];
+    roles: RoleInterface[];
+    permissionMappings: PermissionMappingInterface[];
+    moduleRelationshipPaths: Map<string, string[]>;
+}
+declare function useRbacState(): {
+    original: OriginalData | null;
+    isDirty: boolean;
+    init: (features: FeatureInterface[], roles: RoleInterface[], permissionMappings: PermissionMappingInterface[], modulePaths: ModulePathsInterface[]) => void;
+    setFeatureIsCore: (featureId: string, isCore: boolean) => void;
+    setModuleDefaultPermission: (moduleId: string, actionType: ActionType, value: PermissionValue) => void;
+    setRolePermission: (roleId: string, moduleId: string, actionType: ActionType, value: PermissionValue) => void;
+    clearRolePermission: (roleId: string, moduleId: string, actionType: ActionType) => void;
+    clearAllRolePermissions: (roleId: string, moduleId: string) => void;
+    resetModulePermissions: (moduleId: string, roles: {
+        id: string;
+    }[]) => void;
+    reset: () => void;
+    getFeatureIsCore: (featureId: string) => boolean;
+    getModuleDefaultPermission: (moduleId: string, actionType: ActionType) => PermissionValue | undefined;
+    getRolePermission: (roleId: string, moduleId: string, actionType: ActionType) => PermissionValue | undefined | null;
+    getEffectiveConfiguration: () => {
+        features: {
+            id: string;
+            name: string;
+            isCore: boolean;
+            modules: {
+                id: string;
+                name: string;
+                permissions: PermissionsMap;
+            }[];
+        }[];
+        roles: RoleInterface[];
+        rolePermissionsMap: Map<string, PermissionsMap>;
+    } | null;
+    getModuleRelationshipPaths: (moduleId: string) => string[];
+};
+type RbacStateApi = ReturnType<typeof useRbacState>;
+
+export { type DataListRetriever as D, type RbacStateApi as R, useDataListRetriever as a, useRbacState as u };

package/dist/useRbacState-NnzNL2ED.d.ts

@@ -0,0 +1,77 @@
+import { F as FeatureInterface } from './feature.interface-CIWxo8NP.js';
+import { R as RoleInterface } from './notification.interface-COKHDQeE.js';
+import { P as PermissionMappingInterface, M as ModulePathsInterface, A as ActionType, a as PermissionValue, b as PermissionsMap } from './ModulePathsInterface-wVS5Raa4.js';
+
+type PageInfo = {
+    startItem: number;
+    endItem: number;
+    pageSize: number;
+};
+type DataListRetriever<T> = {
+    ready?: boolean;
+    setReady: (state: boolean) => void;
+    isLoaded: boolean;
+    data: T[] | undefined;
+    total?: number;
+    next?: (onlyNewRecords?: boolean) => Promise<void>;
+    previous?: (onlyNewRecords?: boolean) => Promise<void>;
+    search: (search: string) => Promise<void>;
+    refresh: () => Promise<void>;
+    addAdditionalParameter: (key: string, value: any | null) => void;
+    removeAdditionalParameter: (key: string) => void;
+    setRefreshedElement: (element: T) => void;
+    removeElement: (element: T) => void;
+    isSearch: boolean;
+    pageInfo?: PageInfo;
+};
+declare function useDataListRetriever<T>(params: {
+    ready?: boolean;
+    retriever: (params: any) => Promise<T[]>;
+    retrieverParams?: any;
+    search?: string;
+    addAdditionalParameter?: (key: string, value: any | null) => void;
+    requiresSearch?: boolean;
+    module: any;
+}): DataListRetriever<T>;
+
+interface OriginalData {
+    features: FeatureInterface[];
+    roles: RoleInterface[];
+    permissionMappings: PermissionMappingInterface[];
+    moduleRelationshipPaths: Map<string, string[]>;
+}
+declare function useRbacState(): {
+    original: OriginalData | null;
+    isDirty: boolean;
+    init: (features: FeatureInterface[], roles: RoleInterface[], permissionMappings: PermissionMappingInterface[], modulePaths: ModulePathsInterface[]) => void;
+    setFeatureIsCore: (featureId: string, isCore: boolean) => void;
+    setModuleDefaultPermission: (moduleId: string, actionType: ActionType, value: PermissionValue) => void;
+    setRolePermission: (roleId: string, moduleId: string, actionType: ActionType, value: PermissionValue) => void;
+    clearRolePermission: (roleId: string, moduleId: string, actionType: ActionType) => void;
+    clearAllRolePermissions: (roleId: string, moduleId: string) => void;
+    resetModulePermissions: (moduleId: string, roles: {
+        id: string;
+    }[]) => void;
+    reset: () => void;
+    getFeatureIsCore: (featureId: string) => boolean;
+    getModuleDefaultPermission: (moduleId: string, actionType: ActionType) => PermissionValue | undefined;
+    getRolePermission: (roleId: string, moduleId: string, actionType: ActionType) => PermissionValue | undefined | null;
+    getEffectiveConfiguration: () => {
+        features: {
+            id: string;
+            name: string;
+            isCore: boolean;
+            modules: {
+                id: string;
+                name: string;
+                permissions: PermissionsMap;
+            }[];
+        }[];
+        roles: RoleInterface[];
+        rolePermissionsMap: Map<string, PermissionsMap>;
+    } | null;
+    getModuleRelationshipPaths: (moduleId: string) => string[];
+};
+type RbacStateApi = ReturnType<typeof useRbacState>;
+
+export { type DataListRetriever as D, type RbacStateApi as R, useDataListRetriever as a, useRbacState as u };

package/dist/{useSocket-BW6haECW.d.mts → useSocket-CtfuR5wD.d.mts}

@@ -1,4 +1,4 @@
-import { N as NotificationInterface } from './notification.interface-DKR5WGKH.mjs';
+import { N as NotificationInterface } from './notification.interface-DG7cq9oG.mjs';
 
 interface UseSocketOptions {
     token: string;

package/dist/{useSocket-C9FmYuRM.d.ts → useSocket-bsV-K4qR.d.ts}

@@ -1,4 +1,4 @@
-import { N as NotificationInterface } from './notification.interface-DEW8hR8g.js';
+import { N as NotificationInterface } from './notification.interface-COKHDQeE.js';
 
 interface UseSocketOptions {
     token: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "1.52.0",
+  "version": "1.53.1",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",
@@ -56,7 +56,7 @@
   },
   "scripts": {
     "build": "NODE_OPTIONS='--max-old-space-size=8192' tsup && tsc -p scripts/generate-web-module/tsconfig.json",
-    "dev": "NODE_OPTIONS='--max-old-space-size=8192' tsup --watch --no-dts",
+    "dev": "NODE_OPTIONS='--max-old-space-size=8192' tsup --watch",
     "clean": "rm -rf dist",
     "lint": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" --fix",
     "format": "prettier --write \"src/**/*.ts\"",

package/scripts/generate-web-module/templates/components/list-container.template.ts

@@ -18,9 +18,15 @@ export function generateListContainerTemplate(data: FrontendTemplateData): strin
   return `"use client";
 
 import ${names.pascalCase}List from "@/features/${data.importTargetDir}/${names.kebabCase}/components/lists/${names.pascalCase}List";
+import { RoundPageContainer } from "@carlonicora/nextjs-jsonapi/components";
+import { Modules } from "@carlonicora/nextjs-jsonapi/core";
 
 function ${names.pascalCase}ListContainerInternal() {
-  return <${names.pascalCase}List />;
+  return (
+    <RoundPageContainer module={Modules.${names.pascalCase}}>
+      <${names.pascalCase}List />
+    </RoundPageContainer>
+  );
 }
 
 export default function ${names.pascalCase}ListContainer() {

package/scripts/generate-web-module/templates/components/multi-selector.template.ts

@@ -15,7 +15,8 @@ import { FrontendTemplateData } from "../../types/template-data.interface";
 export function generateMultiSelectorTemplate(data: FrontendTemplateData): string {
   const { names, fields, extendsContent } = data;
   const hasNameField = extendsContent || fields.some((f) => f.name === "name");
-  const displayProp = hasNameField ? "name" : "id";
+  const firstStringField = fields.find((f) => f.tsType === "string" || f.tsType === "string | null");
+  const displayProp = hasNameField ? "name" : (firstStringField?.name ?? "id");
 
   return `"use client";
 
@@ -26,11 +27,12 @@ import { FormFieldWrapper, MultipleSelector } from "@carlonicora/nextjs-jsonapi/
 import { Option } from "@carlonicora/nextjs-jsonapi/components";
 import { Modules } from "@carlonicora/nextjs-jsonapi/core";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslations } from "next-intl";
 import { useWatch } from "react-hook-form";
 
 type ${names.pascalCase}MultiSelectType = {
   id: string;
-  name: string;
+  ${displayProp}: string;
 };
 
 type ${names.pascalCase}MultiSelectorProps = {
@@ -58,6 +60,7 @@ export default function ${names.pascalCase}MultiSelector({
   maxCount = 3,
   isRequired = false,
 }: ${names.pascalCase}MultiSelectorProps) {
+  const t = useTranslations();
   const [${names.camelCase}Options, set${names.pascalCase}Options] = useState<${names.pascalCase}Option[]>([]);
   const [searchTerm, setSearchTerm] = useState<string>("");
 
@@ -124,7 +127,7 @@ export default function ${names.pascalCase}MultiSelector({
     // Convert to form format
     const formValues = options.map((option) => ({
       id: option.value,
-      name: option.label,
+      ${displayProp}: option.label,
     }));
 
     form.setValue(id, formValues, { shouldDirty: true, shouldTouch: true });
@@ -160,7 +163,7 @@ export default function ${names.pascalCase}MultiSelector({
             hideClearAllButton
             onSearchSync={handleSearchSync}
             delay={0}
-            emptyIndicator={<span className="text-muted-foreground">No results found</span>}
+            emptyIndicator={<span className="text-muted-foreground">{t("ui.search.no_results_generic")}</span>}
           />
         )}
       </FormFieldWrapper>

package/scripts/generate-web-module/templates/pages/list-page.template.ts

@@ -17,7 +17,6 @@ export function generateListPageTemplate(data: FrontendTemplateData): string {
 
   return `import ${names.pascalCase}ListContainer from "@/features/${data.importTargetDir}/${names.kebabCase}/components/containers/${names.pascalCase}ListContainer";
 import { ${names.pascalCase}Provider } from "@/features/${data.importTargetDir}/${names.kebabCase}/contexts/${names.pascalCase}Context";
-import { RoundPageContainer } from "@carlonicora/nextjs-jsonapi/components";
 import { Modules } from "@carlonicora/nextjs-jsonapi/core";
 import { Action } from "@carlonicora/nextjs-jsonapi/core";
 import { ServerSession } from "@carlonicora/nextjs-jsonapi/server";
@@ -27,9 +26,7 @@ export default async function ${names.pluralPascal}ListPage() {
 
   return (
     <${names.pascalCase}Provider>
-      <RoundPageContainer module={Modules.${names.pascalCase}}>
-        <${names.pascalCase}ListContainer />
-      </RoundPageContainer>
+      <${names.pascalCase}ListContainer />
     </${names.pascalCase}Provider>
   );
 }

package/src/client/index.ts

@@ -27,6 +27,10 @@ export * from "../features/user/hooks";
 export * from "../features/oauth/hooks";
 export * from "../features/company/hooks/useSubscriptionStatus";
 
+// RBAC hooks and utils
+export { useRbacState } from "../features/rbac/hooks/useRbacState";
+export { generateMigrationFile, downloadMigrationFile } from "../features/rbac/utils/RbacMigrationGenerator";
+
 registerTableGenerator("roles", useRoleTableStructure);
 registerTableGenerator("users", useUserTableStructure);
 registerTableGenerator("companies", useCompanyTableStructure);

package/src/components/containers/RoundPageContainer.tsx

@@ -10,7 +10,7 @@ import { ModuleWithPermissions } from "@/permissions";
 import { ReactNode, useState } from "react";
 
 type RoundPageContainerProps = {
-  module: ModuleWithPermissions;
+  module?: ModuleWithPermissions;
   details?: ReactNode;
   tabs?: Tab[];
   children?: ReactNode;

package/src/components/containers/RoundPageContainerTitle.tsx

@@ -8,7 +8,7 @@ import { PanelRightCloseIcon, PanelRightOpenIcon } from "lucide-react";
 import { ReactNode } from "react";
 
 type RoundPageContainerTitleProps = {
-  module: ModuleWithPermissions;
+  module?: ModuleWithPermissions;
   details?: ReactNode;
   showDetails: boolean;
   setShowDetails: (show: boolean) => void;

package/src/components/index.ts

@@ -21,6 +21,12 @@ export * from "../features/role/components";
 export * from "../features/user/components";
 export * from "../features/oauth/components";
 export * from "../features/waitlist/components";
+export { RbacContainer } from "../features/rbac/components/RbacContainer";
+export { RbacToolbar } from "../features/rbac/components/RbacToolbar";
+export { RbacFeatureSection } from "../features/rbac/components/RbacFeatureSection";
+export { RbacModuleTable } from "../features/rbac/components/RbacModuleTable";
+export { RbacPermissionCell } from "../features/rbac/components/RbacPermissionCell";
+export { RbacPermissionPicker } from "../features/rbac/components/RbacPermissionPicker";
 
 // shadcn/ui components (merged from /shadcnui entry point)
 export * from "../shadcnui";

package/src/core/index.ts

@@ -79,6 +79,7 @@ export * from "../features/oauth/interfaces";
 export * from "../features/waitlist/data";
 export * from "../features/waitlist/waitlist.module";
 export * from "../features/waitlist/waitlist-stats.module";
+export * from "../features/rbac/rbac.module";
 export * from "../features/referral/data";
 export * from "../features/referral/referral.module";
 export * from "../features/referral/referral-stats.module";

package/src/core/registry/ModuleRegistry.ts

@@ -48,6 +48,9 @@ export interface FoundationModuleDefinitions {
   TwoFactorChallenge: ModuleWithPermissions;
   TwoFactorStatus: ModuleWithPermissions;
   BackupCodeVerify: ModuleWithPermissions;
+  // RBAC modules
+  PermissionMapping: ModuleWithPermissions;
+  ModulePaths: ModuleWithPermissions;
 }
 
 // App-specific modules - apps will augment this interface ONLY

package/src/features/rbac/components/RbacContainer.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { RoundPageContainer } from "@/components";
+import { Loader2Icon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useCallback, useEffect, useState } from "react";
+import { RbacService } from "../data/RbacService";
+import { useRbacState } from "../hooks/useRbacState";
+import { downloadMigrationFile, generateMigrationFile } from "../utils/RbacMigrationGenerator";
+import RbacFeatureSection from "./RbacFeatureSection";
+import RbacToolbar from "./RbacToolbar";
+
+export default function RbacContainer() {
+  const t = useTranslations();
+  const stateApi = useRbacState();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        setLoading(true);
+        const [features, roles, permissionMappings, modulePaths] = await Promise.all([
+          RbacService.getFeatures(),
+          RbacService.getRoles(),
+          RbacService.getPermissionMappings(),
+          RbacService.getModuleRelationshipPaths(),
+        ]);
+        stateApi.init(features, roles, permissionMappings, modulePaths);
+      } catch (err) {
+        console.error("Failed to load RBAC configuration:", err);
+        setError(t("rbac.loading_error"));
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, [t]);
+
+  const handleGenerate = useCallback(() => {
+    const effective = stateApi.getEffectiveConfiguration();
+    if (!effective) return;
+
+    const content = generateMigrationFile({
+      features: effective.features,
+      roles: effective.roles,
+      rolePermissionsMap: effective.rolePermissionsMap,
+    });
+
+    downloadMigrationFile(content);
+  }, [stateApi]);
+
+  if (loading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <Loader2Icon className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <p className="text-destructive">{error}</p>
+      </div>
+    );
+  }
+
+  if (!stateApi.original) return null;
+
+  return (
+    <RoundPageContainer>
+      <RbacToolbar isDirty={stateApi.isDirty} onGenerate={handleGenerate} onReset={stateApi.reset} />
+
+      {stateApi.original.features.map((feature) => (
+        <RbacFeatureSection key={feature.id} feature={feature} roles={stateApi.original!.roles} stateApi={stateApi} />
+      ))}
+    </RoundPageContainer>
+  );
+}
+
+export { RbacContainer };

package/src/features/rbac/components/RbacFeatureSection.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { cn } from "../../../lib/utils";
+import { ChevronDownIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../shadcnui";
+import { Switch } from "../../../shadcnui";
+import { FeatureInterface } from "../../feature";
+import { RoleInterface } from "../../role";
+import { RbacStateApi } from "../hooks/useRbacState";
+import RbacModuleTable from "./RbacModuleTable";
+
+interface RbacFeatureSectionProps {
+  feature: FeatureInterface;
+  roles: RoleInterface[];
+  stateApi: RbacStateApi;
+}
+
+export default function RbacFeatureSection({ feature, roles, stateApi }: RbacFeatureSectionProps) {
+  const t = useTranslations();
+  const [isOpen, setIsOpen] = useState(true);
+  const featureIsCore = stateApi.getFeatureIsCore(feature.id);
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+      <div className="rounded-lg border bg-card">
+        {/* Feature header */}
+        <CollapsibleTrigger className="w-full">
+          <div className="flex cursor-pointer items-center justify-between px-4 py-3 hover:bg-muted/50 transition-colors">
+            <div className="flex items-center gap-3">
+              <ChevronDownIcon
+                className={cn("h-4 w-4 text-muted-foreground transition-transform", !isOpen && "-rotate-90")}
+              />
+              <h3 className="text-base font-semibold">{feature.name}</h3>
+              <span className="text-xs text-muted-foreground">
+                {t("rbac.module_count", { count: feature.modules.length })}
+              </span>
+            </div>
+            <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
+              <span className="text-xs text-muted-foreground">{t("rbac.core")}</span>
+              <Switch
+                checked={featureIsCore}
+                onCheckedChange={(checked) => stateApi.setFeatureIsCore(feature.id, checked)}
+                className="data-checked:bg-accent data-unchecked:bg-gray-300"
+              />
+            </div>
+          </div>
+        </CollapsibleTrigger>
+
+        <CollapsibleContent>
+          <div className="space-y-3 p-4 pt-0">
+            {feature.modules.map((mod) => (
+              <RbacModuleTable key={mod.id} module={mod} roles={roles} stateApi={stateApi} />
+            ))}
+            {feature.modules.length === 0 && (
+              <p className="text-sm text-muted-foreground italic py-4 text-center">{t("rbac.no_modules")}</p>
+            )}
+          </div>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}
+
+export { RbacFeatureSection };

package/src/features/rbac/components/RbacModuleTable.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { RotateCcwIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Button } from "../../../shadcnui";
+import { ModuleInterface } from "../../module";
+import { RoleInterface } from "../../role";
+import { ACTION_TYPES, ActionType, COMPANY_ADMINISTRATOR_ROLE_ID } from "../data/RbacTypes";
+import { RbacStateApi } from "../hooks/useRbacState";
+import RbacPermissionPicker from "./RbacPermissionPicker";
+
+interface RbacModuleTableProps {
+  module: ModuleInterface;
+  roles: RoleInterface[];
+  stateApi: RbacStateApi;
+}
+
+const ACTION_LABELS: Record<ActionType, string> = {
+  read: "Read",
+  create: "Create",
+  update: "Update",
+  delete: "Delete",
+};
+
+export default function RbacModuleTable({ module, roles, stateApi }: RbacModuleTableProps) {
+  const t = useTranslations();
+  const handleReset = () => {
+    stateApi.resetModulePermissions(module.id, roles);
+  };
+
+  return (
+    <div className="rounded-lg border border-accent bg-card">
+      {/* Module header */}
+      <div className="flex items-center justify-between border-b px-4 py-2">
+        <h4 className="text-sm font-medium">{module.name}</h4>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={handleReset}
+          className="h-7 px-2 text-muted-foreground hover:text-foreground"
+        >
+          <RotateCcwIcon className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+
+      {/* Permission grid - Rows = Default + Roles, Columns = Actions */}
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b bg-muted/50">
+              <th className="px-4 py-2 text-left text-xs font-medium text-muted-foreground w-40">{t("rbac.role")}</th>
+              {ACTION_TYPES.map((actionType) => (
+                <th
+                  key={actionType}
+                  className="px-2 py-2 text-center text-xs font-medium text-muted-foreground min-w-28"
+                >
+                  {ACTION_LABELS[actionType]}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {/* Default permissions row */}
+            <tr className="border-b">
+              <td className="px-4 py-1 text-xs font-medium text-muted-foreground">{t("rbac.defaults")}</td>
+              {ACTION_TYPES.map((actionType) => {
+                const defaultValue = stateApi.getModuleDefaultPermission(module.id, actionType) ?? false;
+                const originalDefaultValue = module.permissions[actionType] ?? false;
+
+                return (
+                  <td key={actionType} className="px-2 py-1">
+                    <RbacPermissionPicker
+                      value={defaultValue}
+                      originalValue={originalDefaultValue}
+                      isRoleColumn={false}
+                      knownSegments={stateApi.getModuleRelationshipPaths(module.id)}
+                      onSetValue={(value) => stateApi.setModuleDefaultPermission(module.id, actionType, value)}
+                    />
+                  </td>
+                );
+              })}
+            </tr>
+
+            {/* Role rows (CompanyAdministrator hidden — always all-true in migration) */}
+            {roles
+              .filter((role) => role.id !== COMPANY_ADMINISTRATOR_ROLE_ID)
+              .map((role) => (
+                <tr key={role.id} className="border-b last:border-b-0">
+                  <td className="px-4 py-1 text-xs font-medium text-muted-foreground">{role.name}</td>
+                  {ACTION_TYPES.map((actionType) => {
+                    const roleValue = stateApi.getRolePermission(role.id, module.id, actionType);
+                    const originalMapping = stateApi.original?.permissionMappings.find(
+                      (pm) => pm.roleId === role.id && pm.moduleId === module.id,
+                    );
+                    const originalRoleValue = originalMapping
+                      ? (originalMapping.permissions[actionType] ?? null)
+                      : undefined;
+
+                    return (
+                      <td key={actionType} className="px-2 py-1">
+                        <RbacPermissionPicker
+                          value={roleValue}
+                          originalValue={originalRoleValue}
+                          isRoleColumn={true}
+                          knownSegments={stateApi.getModuleRelationshipPaths(module.id)}
+                          onSetValue={(value) => stateApi.setRolePermission(role.id, module.id, actionType, value)}
+                          onClear={() => stateApi.clearRolePermission(role.id, module.id, actionType)}
+                        />
+                      </td>
+                    );
+                  })}
+                </tr>
+              ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export { RbacModuleTable };