@seedgrid/fe-security 2026.6.2 → 2026.7.1

package/scaffold/src/app/security/roles/(list)/page.tsx

@@ -0,0 +1,269 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+import {
+  SgButton,
+  SgConfirmationDialog,
+  SgDatatable,
+  SgInputText,
+  SgStack,
+  sgWhistle,
+} from "@seedgrid/fe-components";
+import { Pencil, Trash2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+import { useI18n } from "@/i18n";
+import {
+  InlineNotice,
+  PageFrame,
+  RouteGuard,
+  extractApiMessage,
+  securityConfig,
+  securityService,
+  useCrudPermission,
+  useDebouncedSearch,
+  type SortState,
+  type RoleSummary,
+} from "@/modules/security";
+import { isSearchReady } from "@/modules/security/utils";
+
+export default function RolesListPage() {
+  return (
+    <RouteGuard permissions={["ROLE_READ"]}>
+      <RolesListScreen />
+    </RouteGuard>
+  );
+}
+
+function RolesListScreen() {
+  const router = useRouter();
+  const { t } = useI18n();
+  const permissions = useCrudPermission("ROLE");
+  const [roles, setRoles] = useState<RoleSummary[]>([]);
+  const [page, setPage] = useState(0);
+  const [rows, setRows] = useState<number>(
+    securityConfig.pagination.defaultPageSize
+  );
+  const [totalRecords, setTotalRecords] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [searchValue, setSearchValue] = useState("");
+  const [sort, setSort] = useState<SortState>({
+    sortField: "name",
+    sortOrder: 1,
+  });
+  const [selectedRole, setSelectedRole] = useState<RoleSummary | null>(null);
+  const debouncedSearch = useDebouncedSearch(searchValue);
+  const effectiveSearch = isSearchReady(debouncedSearch) ? debouncedSearch : "";
+  const searchInputProps = {
+    value: searchValue,
+    onChange: (event: { target: { value: string } }) => {
+      setSearchValue(event.target.value);
+      setPage(0);
+    },
+  };
+
+  useEffect(() => {
+    let active = true;
+    setLoading(true);
+
+    void (async () => {
+      try {
+        const response = await securityService.listRolesPage({
+          page,
+          size: rows,
+          search: effectiveSearch,
+          sort,
+        });
+
+        if (!active) {
+          return;
+        }
+
+        setRoles(response.items);
+        setTotalRecords(response.total);
+      } catch (error) {
+        if (!active) {
+          return;
+        }
+
+        sgWhistle.error({
+          message: extractApiMessage(error) ?? t("security.roles.form.load_error"),
+        });
+      } finally {
+        if (active) {
+          setLoading(false);
+        }
+      }
+    })();
+
+    return () => {
+      active = false;
+    };
+  }, [effectiveSearch, page, rows, sort, t]);
+
+  const columns = useMemo(
+    () => [
+      {
+        field: "name",
+        header: t("security.roles.list.column.name"),
+        sortable: true,
+      },
+      {
+        field: "permissions",
+        header: t("security.roles.list.column.permissions"),
+        body: (role: RoleSummary) =>
+          role.permissions?.length
+            ? role.permissions.map((permission) => permission.name).join(", ")
+            : "-",
+      },
+      {
+        field: "forIntegration",
+        header: t("security.roles.list.column.integration"),
+        body: (role: RoleSummary) =>
+          role.forIntegration ? t("security.common.yes") : t("security.common.no"),
+      },
+      {
+        header: t("security.common.actions"),
+        body: (role: RoleSummary) => (
+          <SgStack direction="row" wrap gap={8} data-sg-stop-row-select="true">
+            <SgButton
+              appearance="ghost"
+              severity="info"
+              iconOnly
+              leftIcon={<Pencil size={16} />}
+              title={
+                permissions.canUpdate
+                  ? t("security.roles.list.action.edit")
+                  : t("security.roles.list.action.view")
+              }
+              aria-label={
+                permissions.canUpdate
+                  ? t("security.roles.list.action.edit")
+                  : t("security.roles.list.action.view")
+              }
+              onClick={() => {
+                router.push(`${securityConfig.routes.roles}/${role.publicId}`);
+              }}
+              className="border border-slate-200/80 bg-slate-50/55 text-slate-700 hover:border-sky-200 hover:bg-slate-50 hover:text-sky-700"
+            />
+            {permissions.canDelete ? (
+              <SgButton
+                appearance="ghost"
+                severity="danger"
+                iconOnly
+                leftIcon={<Trash2 size={16} />}
+                title={t("security.roles.list.action.delete")}
+                aria-label={t("security.roles.list.action.delete")}
+                onClick={() => {
+                  setSelectedRole(role);
+                }}
+                className="border border-rose-200/80 bg-rose-50/45 text-rose-600 hover:border-rose-200 hover:bg-rose-50/70 hover:text-rose-700"
+              />
+            ) : null}
+          </SgStack>
+        ),
+      },
+    ],
+    [permissions.canDelete, permissions.canUpdate, router, t]
+  );
+
+  async function handleDelete() {
+    if (!selectedRole) {
+      return;
+    }
+
+    try {
+      await securityService.deleteRole(selectedRole.publicId);
+      const response = await securityService.listRolesPage({
+        page,
+        size: rows,
+        search: effectiveSearch,
+        sort,
+      });
+      setRoles(response.items);
+      setTotalRecords(response.total);
+      setSelectedRole(null);
+      sgWhistle.success({ message: t("security.roles.list.delete_success") });
+    } catch (error) {
+      sgWhistle.error({
+        message: extractApiMessage(error) ?? t("security.roles.list.delete_error"),
+      });
+    }
+  }
+
+  return (
+    <PageFrame
+      title={t("security.roles.list.title")}
+      description={t("security.roles.list.description")}
+      readonlyLabel={permissions.isReadOnly ? t("security.common.readonly") : null}
+      actions={
+        permissions.canCreate ? (
+          <SgButton
+            appearance="solid"
+            severity="primary"
+            shape="rounded"
+            label={t("security.roles.list.new")}
+            onClick={() => {
+              router.push(`${securityConfig.routes.roles}/new`);
+            }}
+          />
+        ) : undefined
+      }
+    >
+      <SgStack gap={16}>
+        <SgInputText
+          id="security-roles-search"
+          label={t("security.common.search")}
+          inputProps={searchInputProps}
+          placeholder={t("security.roles.list.search_placeholder")}
+        />
+
+        {!isSearchReady(searchValue) && searchValue.trim().length > 0 ? (
+          <InlineNotice>{t("security.common.search_hint")}</InlineNotice>
+        ) : null}
+
+        <SgDatatable<RoleSummary>
+          title=" "
+          value={roles}
+          columns={columns}
+          dataKey="publicId"
+          paginator
+          lazy
+          first={page * rows}
+          rows={rows}
+          totalRecords={totalRecords}
+          onPage={(event) => {
+            setPage(event.page ?? 0);
+            setRows(event.rows ?? securityConfig.pagination.defaultPageSize);
+          }}
+          sortField={sort.sortField ?? undefined}
+          sortOrder={sort.sortOrder}
+          onSort={(event) => {
+            setPage(0);
+            setSort({
+              sortField: event.sortField ?? "name",
+              sortOrder:
+                event.sortOrder === 1 || event.sortOrder === -1
+                  ? event.sortOrder
+                  : 1,
+            });
+          }}
+          loading={loading}
+          emptyMessage={t("security.roles.list.empty")}
+        />
+      </SgStack>
+
+      <SgConfirmationDialog
+        open={Boolean(selectedRole)}
+        severity="danger"
+        title={t("security.roles.list.delete_title")}
+        message={t("security.roles.list.delete_message")}
+        onCancel={() => {
+          setSelectedRole(null);
+        }}
+        onConfirm={handleDelete}
+      />
+    </PageFrame>
+  );
+}

package/scaffold/src/app/security/roles/editors/RoleEditor.tsx

@@ -0,0 +1,328 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+import {
+  SgButton,
+  SgCheckboxGroup,
+  SgConfirmationDialog,
+  SgGrid,
+  SgInputText,
+  SgStack,
+  SgToggleSwitch,
+  sgWhistle,
+} from "@seedgrid/fe-components";
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+
+import { useI18n } from "@/i18n";
+import {
+  InlineNotice,
+  PageFrame,
+  extractApiMessage,
+  securityConfig,
+  securityService,
+  useCrudPermission,
+  type PermissionSummary,
+  type RoleSummary,
+} from "@/modules/security";
+import {
+  extractFirstFormErrorMessage,
+  showFormValidationWhistle,
+} from "@/modules/security/utils";
+
+type RoleEditorProps = {
+  publicId?: string;
+};
+
+type RoleFormValues = {
+  name: string;
+  description: string;
+  forIntegration: boolean;
+  permissionIds: Array<string | number>;
+};
+
+const EMPTY_FORM: RoleFormValues = {
+  name: "",
+  description: "",
+  forIntegration: false,
+  permissionIds: [],
+};
+
+export function RoleEditor({ publicId }: RoleEditorProps) {
+  const router = useRouter();
+  const { t } = useI18n();
+  const permissions = useCrudPermission("ROLE");
+  const isEditing = Boolean(publicId);
+  const isReadOnly = isEditing
+    ? permissions.canRead && !permissions.canUpdate
+    : !permissions.canCreate;
+  const [availablePermissions, setAvailablePermissions] = useState<
+    PermissionSummary[]
+  >([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const {
+    control,
+    handleSubmit,
+    register,
+    reset,
+  } = useForm<RoleFormValues>({
+    defaultValues: EMPTY_FORM,
+  });
+
+  useEffect(() => {
+    let active = true;
+
+    void (async () => {
+      try {
+        const [loadedPermissions, loadedRole] = await Promise.all([
+          securityService.listPermissions(),
+          publicId ? securityService.getRole(publicId) : Promise.resolve(null),
+        ]);
+
+        if (!active) {
+          return;
+        }
+
+        setAvailablePermissions(loadedPermissions);
+
+        if (loadedRole) {
+          reset({
+            name: loadedRole.name ?? "",
+            description: loadedRole.description ?? "",
+            forIntegration: Boolean(loadedRole.forIntegration),
+            permissionIds: (loadedRole.permissions ?? []).map(
+              (permission) => permission.id ?? permission.publicId
+            ),
+          });
+        } else {
+          reset(EMPTY_FORM);
+        }
+      } catch (error) {
+        if (!active) {
+          return;
+        }
+
+        setLoadError(
+          extractApiMessage(error) ?? t("security.roles.form.load_error")
+        );
+      } finally {
+        if (active) {
+          setLoading(false);
+        }
+      }
+    })();
+
+    return () => {
+      active = false;
+    };
+  }, [publicId, reset, t]);
+
+  const permissionOptions = useMemo(
+    () =>
+      availablePermissions.map((permission) => ({
+        label: permission.description
+          ? `${permission.name} - ${permission.description}`
+          : permission.name,
+        value: permission.id ?? permission.publicId,
+      })),
+    [availablePermissions]
+  );
+
+  async function handleValidSubmit(values: RoleFormValues) {
+    if (isReadOnly) {
+      return;
+    }
+
+    setSaving(true);
+
+    try {
+      const payload = {
+        name: values.name.trim(),
+        description: values.description.trim() || undefined,
+        forIntegration: values.forIntegration,
+        permissionIds: values.permissionIds,
+      };
+
+      const savedRole = publicId
+        ? await securityService.updateRole(publicId, payload)
+        : await securityService.createRole(payload);
+
+      sgWhistle.success({ message: t("security.roles.form.save_success") });
+      router.push(`${securityConfig.routes.roles}/${savedRole.publicId}`);
+    } catch (error) {
+      sgWhistle.error({
+        message: extractApiMessage(error) ?? t("security.roles.form.save_error"),
+      });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  function handleInvalidSubmit(errors: unknown) {
+    const message =
+      extractFirstFormErrorMessage(errors) ?? t("security.common.field_required");
+
+    showFormValidationWhistle("security-role-form-validation", message);
+  }
+
+  async function handleDelete() {
+    if (!publicId) {
+      return;
+    }
+
+    try {
+      await securityService.deleteRole(publicId);
+      sgWhistle.success({ message: t("security.roles.form.delete_success") });
+      router.push(securityConfig.routes.roles);
+    } catch (error) {
+      sgWhistle.error({
+        message: extractApiMessage(error) ?? t("security.roles.list.delete_error"),
+      });
+    } finally {
+      setDeleteDialogOpen(false);
+    }
+  }
+
+  return (
+    <PageFrame
+      title={
+        isEditing
+          ? t("security.roles.form.title_edit")
+          : t("security.roles.form.title_new")
+      }
+      description={
+        isEditing
+          ? t("security.roles.form.description_edit")
+          : t("security.roles.form.description_new")
+      }
+      readonlyLabel={isReadOnly ? t("security.common.readonly") : null}
+      actions={
+        <SgStack direction="row" wrap gap={8}>
+          <SgButton
+            appearance="outline"
+            severity="primary"
+            shape="rounded"
+            label={t("security.common.back")}
+            onClick={() => {
+              router.push(securityConfig.routes.roles);
+            }}
+          />
+          {isEditing && permissions.canDelete ? (
+            <SgButton
+              appearance="outline"
+              severity="danger"
+              shape="rounded"
+              label={t("security.common.delete")}
+              onClick={() => {
+                setDeleteDialogOpen(true);
+              }}
+            />
+          ) : null}
+        </SgStack>
+      }
+    >
+      {loadError ? <InlineNotice tone="danger">{loadError}</InlineNotice> : null}
+
+      {loading ? (
+        <InlineNotice>{t("security.common.loading")}</InlineNotice>
+      ) : (
+        <form
+          noValidate
+          onSubmit={handleSubmit(handleValidSubmit, handleInvalidSubmit)}
+        >
+          <SgStack gap={24}>
+            <SgGrid minItemWidth={280} gap={16}>
+              <SgInputText
+                id="security-role-name"
+                name="name"
+                label={t("security.roles.form.name")}
+                register={register}
+                required
+                rules={ {
+                  required: t("security.common.field_required"),
+                }}
+                readOnly={isReadOnly}
+              />
+              <SgInputText
+                id="security-role-description"
+                name="description"
+                label={t("security.roles.form.description")}
+                register={register}
+                readOnly={isReadOnly}
+              />
+            </SgGrid>
+
+            <SgToggleSwitch
+              id="security-role-integration"
+              name="forIntegration"
+              label={t("security.roles.form.for_integration")}
+              control={control}
+              readOnly={isReadOnly}
+            />
+
+            <SgStack gap={12}>
+              <div className="text-sm text-slate-500">
+                {t("security.roles.form.permissions_hint")}
+              </div>
+
+              {permissionOptions.length ? (
+                <SgCheckboxGroup
+                  id="security-role-permissions"
+                  name="permissionIds"
+                  title={t("security.roles.form.permissions")}
+                  source={permissionOptions}
+                  control={control}
+                  orientation="vertical"
+                  showCheckAll
+                  disabled={isReadOnly}
+                  readOnly={isReadOnly}
+                  required
+                  rules={ {
+                    validate: (value) =>
+                      Array.isArray(value) && value.length > 0
+                        ? true
+                        : t("security.roles.form.permissions_required"),
+                  }}
+                />
+              ) : (
+                <InlineNotice tone="warning">
+                  {t("security.roles.form.permissions_empty")}
+                </InlineNotice>
+              )}
+            </SgStack>
+
+            {!isReadOnly ? (
+              <SgStack direction="row" justify="end">
+                <SgButton
+                  appearance="solid"
+                  severity="primary"
+                  shape="rounded"
+                  label={t("security.common.save")}
+                  loading={saving}
+                  disabled={saving}
+                  type="submit"
+                />
+              </SgStack>
+            ) : null}
+          </SgStack>
+        </form>
+      )}
+
+      <SgConfirmationDialog
+        open={deleteDialogOpen}
+        severity="danger"
+        title={t("security.roles.list.delete_title")}
+        message={t("security.roles.list.delete_message")}
+        onCancel={() => {
+          setDeleteDialogOpen(false);
+        }}
+        onConfirm={handleDelete}
+      />
+    </PageFrame>
+  );
+}
+

package/scaffold/src/app/security/users/(create)/new/page.tsx

@@ -0,0 +1,10 @@
+import { RouteGuard } from "@/modules/security";
+import { UserEditor } from "@/app/security/users/editors/UserEditor";
+
+export default function NewUserPage() {
+  return (
+    <RouteGuard permissions={["USER_CREATE"]}>
+      <UserEditor />
+    </RouteGuard>
+  );
+}

package/scaffold/src/app/security/users/(edit)/[publicId]/page.tsx

@@ -0,0 +1,16 @@
+import { RouteGuard } from "@/modules/security";
+import { UserEditor } from "@/app/security/users/editors/UserEditor";
+
+export default async function EditUserPage({
+  params,
+}: {
+  params: Promise<{ publicId: string }>;
+}) {
+  const resolvedParams = await params;
+
+  return (
+    <RouteGuard permissions={["USER_READ"]}>
+      <UserEditor publicId={resolvedParams.publicId} />
+    </RouteGuard>
+  );
+}