@simple-auth-kit/cli 1.0.0

package/registry/admin-apps/nextjs/variants/base/src/app/(console)/permissions/new/page.tsx

@@ -0,0 +1,275 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useAbility } from "@casl/react";
+import { useRouter } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import type { DefinePermissionInput, PermissionSummary } from "@simple-auth-kit/auth-client";
+import { toast } from "sonner";
+import { Breadcrumb } from "@/components/breadcrumb";
+import { FormErrorAlert } from "@/components/form-error-alert";
+import { PermissionRequired } from "@/components/permission-required";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Combobox, type ComboboxOptions } from "@/components/ui/combobox";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Heading } from "@/components/ui/heading";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { PERMISSIONS, hasPermission, type AppAbility } from "@/lib/ability";
+import { authClient } from "@/lib/auth-client";
+import { errorMessage, errorMessages } from "@/lib/error";
+import {
+  deriveGroupOptions,
+  emptyPermissionForm,
+  groupOrderFor,
+  nextGroupOrder,
+  nextOrderInGroup,
+  permissionSchema,
+  type PermissionFormValues,
+} from "../permission-schema";
+
+export default function NewPermissionPage() {
+  const ability = useAbility<AppAbility>();
+  const canDefine = hasPermission(ability, PERMISSIONS.permissionsDefine);
+  const router = useRouter();
+
+  const [permissions, setPermissions] = useState<PermissionSummary[]>([]);
+  const [formError, setFormError] = useState<string[] | null>(null);
+
+  const form = useForm<PermissionFormValues>({
+    resolver: zodResolver(permissionSchema),
+    defaultValues: emptyPermissionForm,
+  });
+
+  useEffect(() => {
+    authClient
+      .listPermissions()
+      .then(setPermissions)
+      .catch((err) => toast.error(errorMessage(err)));
+  }, []);
+
+  const groupOptions = useMemo(() => deriveGroupOptions(permissions), [permissions]);
+
+  if (!canDefine) return <PermissionRequired permission={PERMISSIONS.permissionsDefine} what="Adding a permission" />;
+
+  function handleGroupSelect(option: ComboboxOptions) {
+    form.setValue("group", option.value, { shouldValidate: true });
+    form.setValue("groupOrder", groupOrderFor(permissions, option.value));
+    form.setValue("order", nextOrderInGroup(permissions, option.value));
+  }
+
+  function handleGroupCreate(label: string) {
+    form.setValue("group", label, { shouldValidate: true });
+    form.setValue("groupOrder", nextGroupOrder(permissions));
+    form.setValue("order", 1);
+  }
+
+  async function onSubmit(values: PermissionFormValues) {
+    setFormError(null);
+    try {
+      const input: DefinePermissionInput = values;
+      const saved = await authClient.definePermission(input);
+      toast.success(`Permission "${saved.slug}" saved.`);
+      router.push("/permissions");
+    } catch (err) {
+      setFormError(errorMessages(err));
+      toast.error(errorMessage(err));
+    }
+  }
+
+  const loading = form.formState.isSubmitting;
+
+  return (
+    <div className="flex-1 space-y-4">
+      <Breadcrumb items={[{ title: "Permissions", href: "/permissions" }, { title: "Add permission", href: "/permissions/new" }]} />
+      <div className="flex items-start justify-between">
+        <Heading title="Add New Permission" description="Create a new permission." />
+      </div>
+      <Separator />
+
+      <Card>
+        <CardHeader />
+        <CardContent>
+          <FormErrorAlert messages={formError} />
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 w-full">
+              <Card className="w-full">
+                <CardHeader className="border-b bg-muted/50">
+                  <CardTitle className="text-2xl">Permission Information</CardTitle>
+                  <CardDescription className="text-base">Slug is the key routes check, e.g. billing:manage</CardDescription>
+                </CardHeader>
+                <CardContent className="pt-6">
+                  <div className="space-y-6">
+                    <div className="space-y-4">
+                      <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">Basic Information</h3>
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <FormField
+                          control={form.control}
+                          name="slug"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>
+                                Slug &nbsp;
+                                <span className="text-xs text-destructive dark:text-destructive-foreground">(Must be unique)</span>
+                              </FormLabel>
+                              <FormControl>
+                                <Input
+                                  disabled={loading}
+                                  placeholder="billing:manage"
+                                  {...field}
+                                  type="text"
+                                  className="bg-background border-2 focus:border-purple-500 transition-colors"
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                        <FormField
+                          control={form.control}
+                          name="displayName"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>Display Name</FormLabel>
+                              <FormControl>
+                                <Input
+                                  disabled={loading}
+                                  placeholder="Display Name"
+                                  {...field}
+                                  type="text"
+                                  className="bg-background border-2 focus:border-purple-500 transition-colors"
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                        <FormField
+                          control={form.control}
+                          name="description"
+                          render={({ field }) => (
+                            <FormItem className="md:col-span-2">
+                              <FormLabel>Description</FormLabel>
+                              <FormControl>
+                                <Input
+                                  disabled={loading}
+                                  placeholder="Description"
+                                  {...field}
+                                  type="text"
+                                  className="bg-background border-2 focus:border-purple-500 transition-colors"
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      </div>
+                    </div>
+
+                    <div className="space-y-4">
+                      <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">Grouping</h3>
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <FormField
+                          control={form.control}
+                          name="group"
+                          render={({ field }) => (
+                            <FormItem className="md:col-span-2">
+                              <FormLabel>Permission Group</FormLabel>
+                              <FormControl>
+                                <div>
+                                  <Combobox
+                                    options={groupOptions}
+                                    selected={field.value}
+                                    onChange={handleGroupSelect}
+                                    onCreate={handleGroupCreate}
+                                    showCreate
+                                    placeholder="Select or create a group…"
+                                  />
+                                </div>
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                        <FormField
+                          control={form.control}
+                          name="groupOrder"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>Group Order</FormLabel>
+                              <FormControl>
+                                <Input
+                                  type="number"
+                                  disabled={loading}
+                                  value={field.value ?? ""}
+                                  onChange={(e) => field.onChange(e.target.value === "" ? undefined : Number(e.target.value))}
+                                  className="bg-background border-2 focus:border-purple-500 transition-colors"
+                                />
+                              </FormControl>
+                              <FormDescription>Derived from the group — override to reorder groups.</FormDescription>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                        <FormField
+                          control={form.control}
+                          name="order"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>Order</FormLabel>
+                              <FormControl>
+                                <Input
+                                  type="number"
+                                  disabled={loading}
+                                  value={field.value ?? ""}
+                                  onChange={(e) => field.onChange(e.target.value === "" ? undefined : Number(e.target.value))}
+                                  className="bg-background border-2 focus:border-purple-500 transition-colors"
+                                />
+                              </FormControl>
+                              <FormDescription>Derived from the group&apos;s existing permissions.</FormDescription>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+
+                <div className="flex justify-center mt-6">
+                  <FormField
+                    control={form.control}
+                    name="isActive"
+                    render={({ field }) => (
+                      <FormItem className="flex flex-row items-center space-x-3 space-y-0 rounded-lg border border-purple-500 bg-purple-50 dark:bg-purple-950/20 p-4">
+                        <FormControl>
+                          <Checkbox checked={field.value ?? true} onCheckedChange={(checked) => field.onChange(checked === true)} />
+                        </FormControl>
+                        <div className="space-y-1 leading-none">
+                          <FormLabel className="text-base font-medium">Active Status</FormLabel>
+                          <FormDescription className="text-sm">This permission will be active and can be assigned to roles</FormDescription>
+                        </div>
+                      </FormItem>
+                    )}
+                  />
+                </div>
+
+                <CardFooter className="flex justify-center gap-4 mt-8 pb-8">
+                  <Button type="button" variant="outline" onClick={() => router.push("/permissions")} disabled={loading}>
+                    Cancel
+                  </Button>
+                  <Button disabled={loading} className="bg-purple-600 hover:bg-purple-700 dark:bg-purple-600 dark:hover:bg-purple-700 min-w-32" type="submit">
+                    {loading ? "Creating..." : "Create Permission"}
+                  </Button>
+                </CardFooter>
+              </Card>
+            </form>
+          </Form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/registry/admin-apps/nextjs/variants/base/src/app/(console)/permissions/page.tsx

@@ -0,0 +1,311 @@
+"use client";
+
+import { useAbility } from "@casl/react";
+import {
+  type Column,
+  type ColumnDef,
+  type PaginationState,
+  type SortingState,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { ArrowDownIcon, ArrowUpIcon, ChevronDownIcon, ChevronsUpDownIcon, EyeIcon, PlusIcon, PowerIcon } from "lucide-react";
+import Link from "next/link";
+import { useMemo, useState } from "react";
+import { useDebounce } from "use-debounce";
+import { AuthApiError, type PermissionSummary } from "@simple-auth-kit/auth-client";
+import { toast } from "sonner";
+import { AlertModal } from "@/components/alert-modal";
+import { Breadcrumb } from "@/components/breadcrumb";
+import { TableSkeletonLoader } from "@/components/loader/table-skeleton-loader";
+import { PermissionRequired } from "@/components/permission-required";
+import { Badge } from "@/components/ui/badge";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { DataTable } from "@/components/ui/data-table";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { PERMISSIONS, hasPermission, missingPermissionHint, type AppAbility } from "@/lib/ability";
+import { authClient } from "@/lib/auth-client";
+import { PencilIcon } from "lucide-react";
+
+function SortableHeader({ column, children }: { column: Column<PermissionSummary, unknown>; children: React.ReactNode }) {
+  const sorted = column.getIsSorted();
+  return (
+    <button type="button" className="flex items-center gap-1 font-medium" onClick={column.getToggleSortingHandler()}>
+      {children}
+      {sorted === "asc" ? (
+        <ArrowUpIcon className="size-3.5" />
+      ) : sorted === "desc" ? (
+        <ArrowDownIcon className="size-3.5" />
+      ) : (
+        <ChevronsUpDownIcon className="size-3.5 text-muted-foreground" />
+      )}
+    </button>
+  );
+}
+
+export default function PermissionsPage() {
+  const ability = useAbility<AppAbility>();
+  const canRead = hasPermission(ability, PERMISSIONS.permissionsRead);
+  const canDefine = hasPermission(ability, PERMISSIONS.permissionsDefine);
+
+  const [search, setSearch] = useState("");
+  const [searchKey] = useDebounce(search, 500);
+  const [status, setStatus] = useState<"" | "active" | "inactive">("");
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [pagination, setPagination] = useState<PaginationState>({ pageIndex: 0, pageSize: 20 });
+
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [pendingPermission, setPendingPermission] = useState<PermissionSummary | null>(null);
+  const [pendingBusy, setPendingBusy] = useState(false);
+
+  const { data, isLoading, isError, error, refetch } = useQuery({
+    queryKey: ["permissions-list"],
+    queryFn: () => authClient.listPermissions(),
+    enabled: canRead,
+    placeholderData: keepPreviousData,
+  });
+
+  // `listPermissions` answers with the full flat catalog (no server pagination), so search,
+  // status, and paging all run client-side over it.
+  const permissions = useMemo(() => {
+    let items = data ?? [];
+    if (searchKey) {
+      const q = searchKey.toLowerCase();
+      items = items.filter(
+        (p) => p.slug.toLowerCase().includes(q) || p.displayName.toLowerCase().includes(q) || p.group.toLowerCase().includes(q),
+      );
+    }
+    if (status === "active") items = items.filter((p) => p.isActive);
+    if (status === "inactive") items = items.filter((p) => !p.isActive);
+    return items;
+  }, [data, searchKey, status]);
+
+  const total = permissions.length;
+
+  function clearFilters() {
+    setSearch("");
+    setStatus("");
+    setPagination((p) => ({ ...p, pageIndex: 0 }));
+  }
+
+  function openStatusConfirm(permission: PermissionSummary) {
+    setPendingPermission(permission);
+    setConfirmOpen(true);
+  }
+
+  async function confirmPendingAction() {
+    if (!pendingPermission) return;
+    setPendingBusy(true);
+    try {
+      await authClient.definePermission({ slug: pendingPermission.slug, isActive: !pendingPermission.isActive });
+      toast.success(pendingPermission.isActive ? "Permission deactivated." : "Permission activated.");
+      setConfirmOpen(false);
+      setPendingPermission(null);
+      await refetch();
+    } catch (err) {
+      toast.error(err instanceof AuthApiError ? err.message : "Couldn't change this permission's status. Try again.");
+    } finally {
+      setPendingBusy(false);
+    }
+  }
+
+  const columns = useMemo<ColumnDef<PermissionSummary>[]>(
+    () => [
+      {
+        id: "slug",
+        accessorKey: "slug",
+        header: ({ column }) => <SortableHeader column={column}>Slug</SortableHeader>,
+        cell: ({ row }) => <span className="font-mono text-xs">{row.original.slug}</span>,
+      },
+      {
+        id: "displayName",
+        accessorKey: "displayName",
+        header: ({ column }) => <SortableHeader column={column}>Display name</SortableHeader>,
+      },
+      {
+        id: "group",
+        accessorKey: "group",
+        header: ({ column }) => <SortableHeader column={column}>Group</SortableHeader>,
+        cell: ({ row }) => <Badge variant="outline">{row.original.group}</Badge>,
+      },
+      {
+        id: "order",
+        accessorKey: "order",
+        header: ({ column }) => <SortableHeader column={column}>Order</SortableHeader>,
+      },
+      {
+        id: "status",
+        header: ({ column }) => <SortableHeader column={column}>Status</SortableHeader>,
+        accessorFn: (permission) => (permission.isActive ? "Active" : "Inactive"),
+        cell: ({ row }) => <Badge variant={row.original.isActive ? "success" : "destructive"}>{row.original.isActive ? "Active" : "Inactive"}</Badge>,
+      },
+      {
+        id: "actions",
+        header: "Actions",
+        enableSorting: false,
+        cell: ({ row }) => (
+          <div className="flex justify-end items-center gap-1.5">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Link href={`/permissions/${row.original.id}`} className={cn(buttonVariants({ variant: "outline", size: "icon" }))}>
+                  <EyeIcon />
+                </Link>
+              </TooltipTrigger>
+              <TooltipContent>View details</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Link
+                  href={`/permissions/${row.original.id}/edit`}
+                  aria-disabled={!canDefine}
+                  className={cn(buttonVariants({ variant: "outline", size: "icon" }), !canDefine && "pointer-events-none opacity-50")}
+                >
+                  <PencilIcon />
+                </Link>
+              </TooltipTrigger>
+              <TooltipContent>{canDefine ? "Edit permission" : missingPermissionHint(PERMISSIONS.permissionsDefine)}</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button size="icon" variant="outline" disabled={!canDefine} onClick={() => openStatusConfirm(row.original)}>
+                  <PowerIcon />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {canDefine
+                  ? row.original.isActive
+                    ? "Deactivate this permission"
+                    : "Activate this permission"
+                  : missingPermissionHint(PERMISSIONS.permissionsDefine)}
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        ),
+      },
+    ],
+    [canDefine],
+  );
+
+  const table = useReactTable({
+    data: permissions,
+    columns,
+    state: { sorting, pagination },
+    onSortingChange: setSorting,
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  });
+
+  if (!canRead) return <PermissionRequired permission={PERMISSIONS.permissionsRead} what="Permissions" />;
+
+  const pageRows = table.getRowModel().rows.map((r) => r.original);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Breadcrumb items={[{ title: "Permissions", href: "/permissions" }]} />
+
+      <AlertModal
+        isOpen={confirmOpen}
+        onClose={() => setConfirmOpen(false)}
+        onConfirm={confirmPendingAction}
+        loading={pendingBusy}
+        description={
+          pendingPermission?.isActive
+            ? "This deactivates the permission — every ability that carries it stops granting immediately."
+            : "This reactivates the permission, effective immediately."
+        }
+      />
+
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between">
+          <CardTitle>Permissions</CardTitle>
+          {canDefine && (
+            <Link href="/permissions/new" className={cn(buttonVariants({ size: "sm" }))}>
+              <PlusIcon />
+              Add permission
+            </Link>
+          )}
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          {isError && <p className="text-sm text-destructive">{error instanceof AuthApiError ? error.message : "Couldn't load permissions. Try again."}</p>}
+
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <Input
+              placeholder="Search permissions…"
+              value={search}
+              onChange={(e) => {
+                setSearch(e.target.value);
+                setPagination((p) => ({ ...p, pageIndex: 0 }));
+              }}
+            />
+            <Select value={status || "all"} onValueChange={(value) => setStatus(value === "all" ? "" : (value as "active" | "inactive"))}>
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All statuses</SelectItem>
+                <SelectItem value="active">Active</SelectItem>
+                <SelectItem value="inactive">Inactive</SelectItem>
+              </SelectContent>
+            </Select>
+            <Button variant="outline" disabled={!search && !status} onClick={clearFilters}>
+              Clear
+            </Button>
+          </div>
+
+          <div className="flex flex-col items-start justify-between gap-2 sm:flex-row sm:items-center">
+            <p className="text-sm text-muted-foreground">
+              Showing {pageRows.length} of {total} results
+            </p>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm">
+                  Columns <ChevronDownIcon className="ml-1 size-3.5" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {table
+                  .getAllColumns()
+                  .filter((column) => column.getCanHide())
+                  .map((column) => (
+                    <DropdownMenuCheckboxItem key={column.id} className="capitalize" checked={column.getIsVisible()} onCheckedChange={(value) => column.toggleVisibility(!!value)}>
+                      {column.id}
+                    </DropdownMenuCheckboxItem>
+                  ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+
+          {isLoading ? (
+            <TableSkeletonLoader
+              columns={[
+                { header: "Slug", skeletonType: "text", skeletonWidth: "w-40" },
+                { header: "Display name", skeletonType: "text", skeletonWidth: "w-32" },
+                { header: "Group", skeletonType: "badge", skeletonWidth: "w-24" },
+                { header: "Order", skeletonType: "text", skeletonWidth: "w-8" },
+                { header: "Status", width: "w-[100px]", skeletonType: "badge" },
+                { header: "Actions", width: "w-[100px]", skeletonType: "actions", skeletonCount: 1 },
+              ]}
+            />
+          ) : permissions.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-12 text-center">
+              <p className="text-lg text-muted-foreground">No data found</p>
+              <p className="mt-2 text-sm text-muted-foreground">Try adjusting your search or filters</p>
+            </div>
+          ) : (
+            <DataTable columns={columns} data={pageRows} total={total} table={table} onPaginationChange={setPagination} />
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/registry/admin-apps/nextjs/variants/base/src/app/(console)/permissions/permission-schema.ts

@@ -0,0 +1,44 @@
+import { z } from "zod";
+import type { PermissionSummary } from "@simple-auth-kit/auth-client";
+import type { ComboboxOptions } from "@/components/ui/combobox";
+
+export const permissionSchema = z.object({
+  slug: z.string().min(1, "Slug is required"),
+  displayName: z.string().optional(),
+  description: z.string().optional(),
+  group: z.string().min(1, "Group is required"),
+  // Derived from the permission catalog (see the group helpers below) rather than typed — kept
+  // editable here only as an advanced override.
+  groupOrder: z.number().optional(),
+  order: z.number().optional(),
+  isActive: z.boolean().optional(),
+});
+export type PermissionFormValues = z.infer<typeof permissionSchema>;
+
+export const emptyPermissionForm: PermissionFormValues = { slug: "", displayName: "", description: "", group: "", isActive: true };
+
+export function deriveGroupOptions(permissions: PermissionSummary[]): ComboboxOptions[] {
+  const seen = new Set<string>();
+  const options: ComboboxOptions[] = [];
+  for (const permission of permissions) {
+    if (!seen.has(permission.group)) {
+      seen.add(permission.group);
+      options.push({ value: permission.group, label: permission.group });
+    }
+  }
+  return options;
+}
+
+export function groupOrderFor(permissions: PermissionSummary[], group: string): number {
+  return permissions.find((p) => p.group === group)?.groupOrder ?? 0;
+}
+
+export function nextOrderInGroup(permissions: PermissionSummary[], group: string): number {
+  const maxOrder = permissions.filter((p) => p.group === group).reduce((max, p) => Math.max(max, p.order), -1);
+  return maxOrder + 1;
+}
+
+export function nextGroupOrder(permissions: PermissionSummary[]): number {
+  const maxGroupOrder = permissions.reduce((max, p) => Math.max(max, p.groupOrder), -1);
+  return maxGroupOrder + 1;
+}