管理画面フォーマット開発編 #8 後編
部署別ロール ─ 管理UIとServer Action実装

部署ごとのロールを実際に操作できるように、Server Actionと管理画面UIを構築

初回公開日2025/10/2

最終更新日2025/10/2

0. はじめに（後編の狙い）

【管理画面フォーマット開発編 #8 前編】部署別ロール ─ DepartmentRoleテーブル導入とDB設計では DepartmentRoleテーブルの設計・Prismaモデル更新・マイグレーション を中心に基盤を整備しました。
後編では、これを実際の管理画面から操作できるように Server Action と管理UI を構築していきます。

本編の位置づけ

本記事の位置づけを、前編との関係も含めて整理すると次の通りです。

区分	前編（DB/Prisma）	後編（本記事：UI/SA）
スキーマ	DepartmentRoleテーブルの導入、UserへのXOR制約	Prisma Clientを利用して実際のデータを操作
制約	priority制約、override/customのXOR、Userの整合性	UI/Server Actionで入力検証を二重に担保
実効ロール	effective-role.ts による合成実装	getUserSnapshot 内部に反映済み、UI/ガードは変更不要
管理機能	-	新規登録・更新・一覧画面の実装

本編の狙い

後編で実現するのは「DBに存在するDepartmentRoleを、UIから安全に操作できる状態にすること」です。
単にCRUDを作るだけではなく、以下のような観点を盛り込みます。

観点	説明
安全性	DB制約に加え、Server ActionとUIフォームの二重バリデーションで担保する
検証性	新規 → 更新 → 一覧の順で作ることで、テストデータを活用しやすくする
一貫性	既存のRole管理UIと同じフォーム構造・UXを踏襲する
RBACとの整合性	guardHrefOrRedirectやmenu.rbacの既存仕組みはそのまま利用する

記事の進め方

本記事では、以下の順序で解説を進めます。

新規登録：override/customを選択可能なフォームとServer Actionを実装
更新：詳細画面を開き、条件に応じて編集範囲を切り替え
一覧：DepartmentRoleを検索・ソート可能に表示

それぞれの章で、Server Action → UI → 動作確認の流れを繰り返すことで、最終的に運用可能な管理UIを完成させます。

技術スタック

Tool / Lib	Version	Purpose
React	19.x	UIの土台。コンポーネント/フックで状態と表示を組み立てる
Next.js	15.x	フルスタックFW。App Router/SSR/SSG、動的ルーティング、メタデータ管理
TypeScript	5.x	型安全・補完・リファクタリング
shadcn/ui	latest	RadixベースのUIキット
Tailwind CSS	4.x	ユーティリティファーストCSSで素早くスタイリング
Zod	4.x	スキーマ定義と実行時バリデーション

本記事では、前回の記事 【管理画面フォーマット開発編 #8 前編】部署別ロール ─ DepartmentRoleテーブル導入とDB設計 までのソースコードを引き継いで追加・編集していきます。

1. 新規登録（DepartmentRole.create）

この章では、テナント側（部署）のオペレータが 独自ロール（DepartmentRole の custom モード）を新規作成 できるようにします。
前編で実装した DB 制約（priority ≤ 99、override/custom の XOR）を前提に、Zod → Server Action → UI フォーム → 画面の順に組み立てます。

補足：
新規登録はテナント独自ロール（custom）専用です。
既存のグローバル Role の「名称/色」だけを部署で上書きしたい場合（override）は 編集章 で扱います。

txt

# 1章のアウトライン（文字図）

[要件整理]
  └─ 新規 = DepartmentRole.custom のみ
       ・code/name/priority/can* 必須
       ・priority ≤ 99
       ・departmentId はログイン中ユーザの所属から自動付与

[Zod スキーマ]
  └─ src/lib/department-roles/schema.ts
       ・create 用の単一スキーマ（custom 固定）
       ・共通フィールドは一意に定義

[Server Action]
  └─ src/app/(protected)/masters/roles/_actions/department-roles/create.ts
       入力検証 → 部署解決 → Prisma.create → displayId を返す
       ※ 重複 code / priority 違反 / その他 DB エラーの分岐

[UI フォーム]
  └─ src/components/department-roles/department-role-form.tsx
       RHF + zodResolver / CreateForm だけ
       code/name/priority/badgeColor/isEnabled/can* を入力

[ページ]
  ├─ src/app/(protected)/masters/roles/new/page.tsx（SSR ガード＋枠）
  └─ src/app/(protected)/masters/roles/new/client.tsx（SA 呼び出し＋トースト）

要件整理（custom 固定）

新規登録で扱うのは DepartmentRole の custom モードに限定します。部署ごとの独自ロールを作るユースケースに絞り、override（見た目上書き）は編集でカバーします。

項目	仕様（custom）
作成対象	`DepartmentRole`（custom モード）
必須フィールド	`code`（部署内一意）, `name`, `priority`（≤ 99）, `canEditData`, `canDownloadData`
任意フィールド	`badgeColor`, `remarks`, `isEnabled`（初期 true）
禁止/自動付与	`roleId` は常に `NULL`、`departmentId` はログイン中ユーザの所属部署を自動付与
制約（DB 側）	`(departmentId, code)` 一意 / `priority ≤ 99` / custom と override の XOR
エラーハンドリング	code 重複 / priority 違反 / その他 DB 例外

以降では、この要件を Zod / Server Action / UI の順に落とし込みます。

Zod スキーマと型（custom 用の単一スキーマ）

フィールドごとに 一意の定義 を作成し、フォーム・Server Action 双方で同じ定義を使い回します。
ここでは新規（custom 固定）だけを扱うため、 単一スキーマ で十分です（override は編集章で別途扱う）。

// src/lib/department-roles/schema.ts
import { z } from "zod";

/** 入力ルール（数字は定数化すると見直しやすい） */
export const DR_CODE_MAX = 50 as const;
export const DR_NAME_MAX = 100 as const;
export const DR_PRIORITY_MAX = 99 as const;
export const DR_REMARKS_MAX = 255 as const;

/** 共通フィールド定義（単一の定義に集約） */
const codeSchema = z
  .string()
  .regex(
    /^[A-Z][A-Z0-9_]*$/,
    "大文字英字・数字・アンダースコアのみ使用できます",
  )
  .min(2, "2文字以上で入力してください")
  .max(DR_CODE_MAX, `${DR_CODE_MAX}文字以内で入力してください`);

const nameSchema = z
  .string()
  .min(1, "表示名を入力してください")
  .max(DR_NAME_MAX, `${DR_NAME_MAX}文字以内で入力してください`);

const prioritySchema = z.coerce
  .number()
  .int("整数で入力してください")
  .min(0, "0以上で入力してください")
  .max(DR_PRIORITY_MAX, `${DR_PRIORITY_MAX}以下で入力してください`);

const badgeColorSchema = z
  .string()
  .regex(
    /^#([0-9A-Fa-f]{6})$/,
    "カラーコードは #RRGGBB の形式で入力してください",
  )
  .optional();

const remarksSchema = z
  .string()
  .max(DR_REMARKS_MAX, `${DR_REMARKS_MAX}文字以内で入力してください`)
  .optional();

/** ── 新規（custom 固定）: roleId は扱わない ── */
export const departmentRoleCreateSchema = z.object({
  code: codeSchema,
  name: nameSchema,
  priority: prioritySchema, // DB 側でも ≤99 を保証
  badgeColor: badgeColorSchema,
  isEnabled: z.boolean().default(true),
  canDownloadData: z.boolean(),
  canEditData: z.boolean(),
  remarks: remarksSchema,
});

/** Zod から型を派生（唯一の真実） */
export type DepartmentRoleCreateValues = z.infer<
  typeof departmentRoleCreateSchema
>;

/** 追加：RHF の「入力型」（coerce の前提で priority は unknown を許容） */
export type DepartmentRoleCreateInput = z.input<
  typeof departmentRoleCreateSchema
>;

priority は z.coerce.number() を使い、フォームからの文字列入力にも自然に対応します。
DB の priority ≤ 99 と 二重でガード（UI/SA と DB）。
roleId は custom では不要のためスキーマに含めません（＝常に NULL）。

Server Action：create（部署解決 → 作成 → displayId 返却）

ここでは、共通仕様に合わせて lookupSessionFromCookie で認証 → getUserSnapshot で権限確認 → 所属部署解決 → Zod 検証 → DB 登録 の順に実装します。

// src/app/_actions/department-roles/create.ts
"use server";

import "server-only";
import { prisma } from "@/lib/database";
import { lookupSessionFromCookie } from "@/lib/auth/session";
import { getUserSnapshot } from "@/lib/auth/user-snapshot";
import {
  departmentRoleCreateSchema,
  type DepartmentRoleCreateValues,
} from "@/lib/department-roles/schema";

/** 共通仕様に合わせた返却型（将来は共通モジュールへ移動して import 推奨） */
type ActionResult = { ok: true } | { ok: false; message: string };

/** 部署ロール（custom）新規作成 */
export async function createDepartmentRole(
  values: DepartmentRoleCreateValues,
): Promise<ActionResult> {
  // 1) 認証
  const ses = await lookupSessionFromCookie();
  if (!ses.ok) return { ok: false, message: "認証が必要です。" };

  // 2) 権限（書き込み権限が必要）
  const snap = await getUserSnapshot(ses.userId);
  if (!snap || !snap.canEditData) {
    return { ok: false, message: "この操作を行う権限がありません。" };
  }

  // 3) 所属部署の解決
  const me = await prisma.user.findUnique({
    where: { id: ses.userId },
    select: { departmentId: true },
  });
  if (!me?.departmentId) {
    return { ok: false, message: "部署情報を取得できませんでした。" };
  }

  // 4) サーバ側の最終入力検証（詳細なフィールドエラーは UI に委譲）
  const parsed = departmentRoleCreateSchema.safeParse(values);
  if (!parsed.success) {
    return { ok: false, message: "入力内容を確認してください。" };
  }
  const {
    code,
    name,
    priority,
    badgeColor,
    isEnabled,
    canDownloadData,
    canEditData,
    remarks,
  } = parsed.data;

  // 5) 部署内コード重複チェック（@@unique([departmentId, code]) の前に早期弾く）
  const exists = await prisma.departmentRole.findFirst({
    where: { departmentId: me.departmentId, code },
    select: { id: true },
  });
  if (exists) {
    return { ok: false, message: "このコードは既に使用されています。" };
  }

  // 6) 登録（custom 固定: roleId は常に NULL）
  try {
    await prisma.departmentRole.create({
      data: {
        departmentId: me.departmentId,
        code,
        name,
        priority,
        badgeColor: badgeColor ?? null,
        isEnabled,
        canDownloadData,
        canEditData,
        isSystem: false, // custom 作成は部署ローカルなので system 扱いしない
        remarks: remarks ?? null,
      },
      select: { id: true }, // 返却しないが SELECT は最小限に
    });
  } catch (e) {
    // ユニーク制約 or CHECK 失敗などの一般化したエラーメッセージ
    console.error("[createDepartmentRole] DB create failed:", e);
    return { ok: false, message: "ロールの登録に失敗しました。" };
  }

  // 7) 完了
  return { ok: true };
}

認証/権限/部署解決は既存の共通ユーティリティに準拠。
Zod での最終検証（priority ≤ 99 等）は DB 制約と二重化 して安全性を担保。
返却は共通の ActionResult で統一し、詳細エラーは UI の入力エラー表示（Zod）側を基本とする方針に合わせています。
ここで roleId は一切扱わず custom 固定としています（override は「編集」で対応）。

UI：新規フォーム（custom 固定）

フォームは既存の Users と同じパターンに合わせ、 CreateForm 単体 で構成します。
RHF + zodResolver、小さなフィールド群は 同一ファイル に定義し、一意の Zod 定義に準拠します。

tsx

// src/components/department-roles/department-role-form.tsx
"use client";

import * as React from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

import {
  departmentRoleCreateSchema,
  type DepartmentRoleCreateInput,
  type DepartmentRoleCreateValues,
  DR_PRIORITY_MAX,
} from "@/lib/department-roles/schema";

import {
  Form,
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormMessage,
  FormDescription,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardFooter } from "@/components/ui/card";

/* =========================
   公開インターフェース（型）
   ========================= */

type BaseProps = {
  onCancel?: () => void;
};

type CreateProps = BaseProps & {
  mode: "create";
  onSubmit: (values: DepartmentRoleCreateValues) => void;
};

type Props = CreateProps; // まずは新規専用。編集は #2 章で追加予定

/* =========================
   エクスポート本体
   ========================= */

export default function DepartmentRoleForm(props: Props) {
  // 将来 edit 追加時も Users と同様に分岐させる
  return <CreateForm {...props} />;
}

/* =========================
   Create（新規）フォーム
   ========================= */

function CreateForm({ onSubmit, onCancel }: CreateProps) {
  // ▼ Users と同じ構成。priority が coerce なので 3 ジェネリクスで厳密化
  const form = useForm<
    DepartmentRoleCreateInput,
    undefined,
    DepartmentRoleCreateValues
  >({
    resolver: zodResolver(departmentRoleCreateSchema),
    defaultValues: {
      code: "",
      name: "",
      priority: 0,
      badgeColor: "#666666",
      isEnabled: true,
      canDownloadData: false,
      canEditData: false,
      remarks: "",
    },
    mode: "onBlur",
  });

  const handleSubmit = form.handleSubmit(onSubmit);

  return (
    <Form {...form}>
      <form data-testid="department-role-form-create" onSubmit={handleSubmit}>
        <Card className="w-full rounded-md">
          <CardContent className="space-y-6 pt-1">
            <CodeField />
            <NameField />
            <PriorityField />
            <BadgeColorField />
            <IsEnabledField />
            <CanDownloadField />
            <CanEditField />
            <RemarksField />
          </CardContent>

          <CardFooter className="mt-4 flex gap-2">
            <Button
              type="button"
              variant="outline"
              onClick={onCancel}
              data-testid="cancel-btn"
              className="cursor-pointer"
            >
              キャンセル
            </Button>
            <Button
              type="submit"
              data-testid="submit-create"
              disabled={form.formState.isSubmitting}
              className="cursor-pointer"
            >
              登録する
            </Button>
          </CardFooter>
        </Card>
      </form>
    </Form>
  );
}

/* =========================
   小さなフィールド群（同ファイル内）
   - Users と同じ分割方針
   - FormField は RHF context から control を取得
   ========================= */

// コード
function CodeField() {
  return (
    <FormField
      name="code"
      render={({ field }) => (
        <FormItem>
          <FormLabel className="font-semibold">コード&nbsp;*</FormLabel>
          <FormControl>
            <Input
              {...field}
              placeholder="ANALYST"
              aria-label="コード"
              autoComplete="off"
              data-testid="code"
            />
          </FormControl>
          <FormMessage data-testid="code-error" />
        </FormItem>
      )}
    />
  );
}

// 表示名
function NameField() {
  return (
    <FormField
      name="name"
      render={({ field }) => (
        <FormItem>
          <FormLabel className="font-semibold">表示名&nbsp;*</FormLabel>
          <FormControl>
            <Input
              {...field}
              placeholder="分析担当"
              aria-label="表示名"
              autoComplete="off"
              data-testid="name"
            />
          </FormControl>
          <FormMessage data-testid="name-error" />
        </FormItem>
      )}
    />
  );
}

// 優先度（coerce 対応：入力中は "" を許容 → Zod で数値に確定）
function PriorityField() {
  return (
    <FormField
      name="priority"
      render={({ field }) => (
        <FormItem>
          <FormLabel className="font-semibold">優先度&nbsp;*</FormLabel>
          <FormControl>
            <Input
              type="number"
              inputMode="numeric"
              min={0}
              max={DR_PRIORITY_MAX}
              step={1}
              {...field}
              value={
                field.value === undefined || field.value === null
                  ? ""
                  : String(field.value)
              }
              onChange={(e) => {
                const v = e.target.value;
                // 空文字は許容（Zod が最終確定）
                field.onChange(v === "" ? "" : v);
              }}
              placeholder="20"
              aria-label="優先度"
              data-testid="priority"
            />
          </FormControl>
          <FormDescription className="text-xs">
            0〜{DR_PRIORITY_MAX}{" "}
            の整数で入力してください（99以下で部署ロール）。
          </FormDescription>
          <FormMessage data-testid="priority-error" />
        </FormItem>
      )}
    />
  );
}

// バッジ色
function BadgeColorField() {
  return (
    <FormField
      name="badgeColor"
      render={({ field }) => (
        <FormItem>
          <FormLabel className="font-semibold">バッジ色&nbsp;*</FormLabel>
          <FormControl>
            <Input
              type="color"
              {...field}
              aria-label="バッジ色"
              data-testid="badgeColor"
              className="cursor-pointer"
            />
          </FormControl>
          <FormMessage data-testid="badgeColor-error" />
        </FormItem>
      )}
    />
  );
}

// 有効フラグ
function IsEnabledField() {
  return (
    <FormField
      name="isEnabled"
      render={({ field }) => (
        <FormItem className="mt-1 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
          <div className="space-y-0.5">
            <FormLabel className="font-semibold">有効&nbsp;*</FormLabel>
            <FormDescription>ONで有効/OFFで無効</FormDescription>
          </div>
          <FormControl>
            <Switch
              name={field.name}
              checked={Boolean(field.value)}
              onCheckedChange={field.onChange}
              aria-label="有効"
              data-testid="isEnabled"
            />
          </FormControl>
          <FormMessage data-testid="isEnabled-error" />
        </FormItem>
      )}
    />
  );
}

// データDL可
function CanDownloadField() {
  return (
    <FormField
      name="canDownloadData"
      render={({ field }) => (
        <FormItem className="mt-1 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
          <FormLabel className="font-semibold">データDL可&nbsp;*</FormLabel>
          <FormControl>
            <Switch
              name={field.name}
              checked={Boolean(field.value)}
              onCheckedChange={field.onChange}
              aria-label="データDL可"
              data-testid="canDownloadData"
            />
          </FormControl>
          <FormMessage data-testid="canDownloadData-error" />
        </FormItem>
      )}
    />
  );
}

// データ編集可
function CanEditField() {
  return (
    <FormField
      name="canEditData"
      render={({ field }) => (
        <FormItem className="mt-1 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
          <FormLabel className="font-semibold">データ編集可&nbsp;*</FormLabel>
          <FormControl>
            <Switch
              name={field.name}
              checked={Boolean(field.value)}
              onCheckedChange={field.onChange}
              aria-label="データ編集可"
              data-testid="canEditData"
            />
          </FormControl>
          <FormMessage data-testid="canEditData-error" />
        </FormItem>
      )}
    />
  );
}

// 備考
function RemarksField() {
  return (
    <FormField
      name="remarks"
      render={({ field }) => (
        <FormItem>
          <FormLabel className="font-semibold">備考</FormLabel>
          <FormControl>
            <Input
              {...field}
              placeholder="メモなど"
              aria-label="備考"
              autoComplete="off"
              data-testid="remarks"
            />
          </FormControl>
          <FormMessage data-testid="remarks-error" />
        </FormItem>
      )}
    />
  );
}

useForm<入力型, undefined, 変換後型> の 3 つ目の型引数は handleSubmit に渡る値の型。
ここを DepartmentRoleCreateValues にすることで、onSubmit では priority: number に確定した値を安全に扱えます。
priority フィールドは Users でやっているのと同じく、空文字を許容 → Zod 側で必須/数値化 の流れにしています（入力中のチラつき防止）。

画面：/masters/roles/new（SSR ガード＋SA 呼び出し）

この節では、部署ロール（DepartmentRole/custom）を新規作成する画面を /masters/roles/new に実装します。SSR でのアクセスガード（guardHrefOrRedirect）を通し、クライアント側で Server Action createDepartmentRole を呼び出して登録します。フォームは前節で作った DepartmentRoleForm をそのまま用い、成功時は一覧 /masters/roles に戻る一貫した UX にします。

要素	ポイント
ルート	`/masters/roles/new`（テナント視点の「ロール」は Role/DepartmentRole の混在で一本化）
ガード	SSR で `guardHrefOrRedirect("/masters/roles/new", "/")`
フォーム	`DepartmentRoleForm`（Users と同じ構成規約・`any` 不使用）
登録処理	`createDepartmentRole(values)` を呼び、成功で Toast → 一覧へ遷移

tsx

// src/app/(protected)/masters/roles/new/page.tsx
import type { Metadata } from "next";
import { redirect } from "next/navigation";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import { SidebarTrigger } from "@/components/ui/sidebar";
import { guardHrefOrRedirect } from "@/lib/auth/guard.ssr";
import Client from "./client";

export const metadata: Metadata = {
  title: "ロール新規登録（部署ローカル）",
  description:
    "部署ロール（DepartmentRole/custom）を新規作成。shadcn/ui + RHF + Zod + Server Action",
};

export default async function Page() {
  // ★ SSR ガードで viewer を取得
  const viewer = await guardHrefOrRedirect("/masters/roles/new", "/");

  // ★ 編集権限がなければ強制リダイレクト
  if (!viewer.canEditData) {
    // guardHrefOrRedirect は内部で redirect() を呼べるので
    // 明示的に使うなら:
    return redirect("/");
  }
  return (
    <>
      <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
        <div className="flex items-center gap-2 px-4">
          <SidebarTrigger className="-ml-1" />
          <Separator
            orientation="vertical"
            className="mr-2 data-[orientation=vertical]:h-4"
          />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem className="hidden md:block">
                <BreadcrumbLink href="/masters">マスタ管理</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator className="hidden md:block" />
              <BreadcrumbItem className="hidden md:block">
                <BreadcrumbLink href="/masters/roles">
                  ロール管理
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator className="hidden md:block" />
              <BreadcrumbItem>
                <BreadcrumbPage>ロール新規登録</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </div>
      </header>

      <div className="max-w-xl p-4 pt-0">
        <Client />
      </div>
    </>
  );
}

画面ルーティングは /masters/roles/new に統一し、テナント視点での「ロール」を一本化します。
SSR 側で guardHrefOrRedirect を実行して、未ログイン・権限不足時に即座に退避します。
このページでは DB からのロール読込は不要（custom 固定の新規）なので、Client の props は空です。

tsx

// src/app/(protected)/masters/roles/new/client.tsx
"use client";

import { useRouter } from "next/navigation";
import { toast } from "sonner";

import DepartmentRoleForm from "@/components/department-roles/department-role-form";
import type { DepartmentRoleCreateValues } from "@/lib/department-roles/schema";
import { createDepartmentRole } from "@/app/_actions/department-roles/create";

export default function NewDepartmentRoleClient() {
  const router = useRouter();

  const handleSubmit = async (values: DepartmentRoleCreateValues) => {
    const res = await createDepartmentRole(values);

    if (res.ok) {
      toast.success("ロールを作成しました", {
        description: [
          `コード: ${values.code}`,
          `表示名: ${values.name}`,
          `優先度: ${values.priority}`,
          `DL: ${values.canDownloadData ? "可" : "不可"}`,
          `編集: ${values.canEditData ? "可" : "不可"}`,
        ].join(" / "),
        duration: 3000,
      });
      router.push("/masters/roles");
      router.refresh();
      return;
    }

    // 失敗時：詳細はクライアント検証に委譲し、汎用メッセージを表示
    toast.error(
      res.message ?? "登録に失敗しました。入力内容を確認してください。",
      {
        duration: 3500,
      },
    );
  };

  return (
    <DepartmentRoleForm
      mode="create"
      onSubmit={handleSubmit}
      onCancel={() => history.back()}
    />
  );
}

フォームは DepartmentRoleForm（Users と同設計）を再利用し、onSubmit で Server Action を呼び出します。
成功時：トースト → /masters/roles に遷移 → router.refresh() で一覧再描画。
失敗時：クライアント側のフィールド別メッセージは Zod に委譲し、トーストは汎用メッセージに統一します。
any は未使用、型は DepartmentRoleCreateValues のみを受け取り、プロジェクトの型規約を順守しています。

2. 更新（DepartmentRole.update / Override 作成・編集）

この章では、ロールの編集ページ /masters/roles/[displayId] を実装します。
テナント視点のロールは「Role 行（ベース）」と「DepartmentRole 行（部署ローカル）」が 同一の一覧 に混在します。編集画面は次の2パターンに対応します。

対象	画面に来る `displayId`	編集内容	保存時の処理
custom（部署ローカル独自ロール）	`DRxxxxxxxx`	`code / name / priority / can* / badgeColor / isEnabled / remarks`	`DepartmentRole` の該当レコードを更新
override（ベース Role の上書き）	`RLxxxxxxxx`（初回: DR 不在）/ `DRxxxxxxxx`（既に DR 有り）	`nameOverride / badgeColorOverride / isEnabled`（※ 権限/priority は Role と同値）	なければ作成（roleId あり） / あれば更新。削除＝「DR を削除して Role 素の状態に戻す」

初期状態では、ベース Role の override が存在しない 可能性があります。この場合、編集ページで override を新規作成 できるようにします。

要件整理（custom / override の編集ルール）

編集では 2 つの型 を明確に分けます。DepartmentRole の roleId 有無で判定可能ですが、UI からは判別フラグを渡すと実装が単純です。

種別	入力項目	備考
custom	`displayId, code, name, priority, canDownloadData, canEditData, badgeColor, isEnabled, remarks`	既存の DR を編集。`priority ≤ 99`。
override	`displayId?（DR の場合）, roleDisplayId?（RL の場合）, nameOverride?, badgeColorOverride?, isEnabled`	初回は DR が無いので `roleDisplayId` 起点で新規作成。isEnabled は部署での有効/無効。

削除
- custom: 「論理削除」が無い設計なら DELETE。復活は「新規作成」で代替。
- override: DR を物理削除してベース Role に戻します。

Zod スキーマ（編集用の識別ユニオン）

1章と同じ方針で、共通フィールドは単一定義に集約。
編集は 識別子 kind: "custom" | "override" を持つユニオンで表現します。
RHF と組み合わせるため、input / values（確定型）を明示します。

// src/lib/department-roles/schema.ts （末尾に追加）

// ─ １章で作成した内容を省略

/** ── 更新（識別ユニオン） ── */
const customEdit = z.object({
  kind: z.literal("custom"),
  displayId: z.string().min(1, "表示IDの取得に失敗しました"),
  code: codeSchema,
  name: nameSchema,
  priority: prioritySchema,
  badgeColor: badgeColorSchema,
  isEnabled: z.boolean(),
  canDownloadData: z.boolean(),
  canEditData: z.boolean(),
  remarks: remarksSchema,
});

const overrideEditExisting = z.object({
  kind: z.literal("override"),
  // 既存 override を編集する場合
  displayId: z.string().min(1, "表示IDの取得に失敗しました").optional(),
  // 初回（DRなし）の場合は Role 側の displayId を持つ
  roleDisplayId: z.string().min(1, "Role の表示IDが必要です").optional(),
  nameOverride: z.string().min(0).max(DR_NAME_MAX).optional(),
  badgeColorOverride: badgeColorSchema,
  isEnabled: z.boolean(),
});

export const departmentRoleUpdateSchema = z.union([customEdit, overrideEditExisting]);

export type DepartmentRoleUpdateValues = z.infer<typeof departmentRoleUpdateSchema>;
export type DepartmentRoleUpdateInput = z.input<typeof departmentRoleUpdateSchema>;

custom は 1章の新規と同じ項目。
override は nameOverride / badgeColorOverride / isEnabled のみ編集可能。
override の 初回作成 にも対応するため、displayId（DR 側）または roleDisplayId（RL 側）のどちらかを受け取れるようにしています（optional() を許容）。実装では どちらか必須 をアプリ側で担保します。

Server Action：update / delete（custom・override 兼用）

認証・権限・部署解決は 1章と同様。
kind によって custom 更新 と override 更新（作成/更新） を分岐。
削除は custom: DR 削除 / override: DR 削除で Role にロールバック 。

// src/app/_actions/department-roles/update.ts
"use server";

import "server-only";
import { prisma } from "@/lib/database";
import { lookupSessionFromCookie } from "@/lib/auth/session";
import { getUserSnapshot } from "@/lib/auth/user-snapshot";
import {
  departmentRoleUpdateSchema,
  type DepartmentRoleUpdateValues,
} from "@/lib/department-roles/schema";

type ActionResult = { ok: true } | { ok: false; message: string };

export async function updateDepartmentRole(
  values: DepartmentRoleUpdateValues,
): Promise<ActionResult> {
  // 1) 認証
  const ses = await lookupSessionFromCookie();
  if (!ses.ok) return { ok: false, message: "認証が必要です。" };

  // 2) 権限
  const snap = await getUserSnapshot(ses.userId);
  if (!snap || !snap.canEditData) {
    return { ok: false, message: "この操作を行う権限がありません。" };
  }

  // 3) 所属部署
  const me = await prisma.user.findUnique({
    where: { id: ses.userId },
    select: { departmentId: true },
  });
  if (!me?.departmentId)
    return { ok: false, message: "部署情報を取得できませんでした。" };

  // 4) サーバ最終検証
  const parsed = departmentRoleUpdateSchema.safeParse(values);
  if (!parsed.success)
    return { ok: false, message: "入力内容を確認してください。" };

  const v = parsed.data;

  // 5) 分岐
  if (v.kind === "custom") {
    // 部署内コード重複（自分以外）
    const dup = await prisma.departmentRole.findFirst({
      where: {
        departmentId: me.departmentId,
        code: v.code,
        NOT: { displayId: v.displayId },
      },
      select: { id: true },
    });
    if (dup)
      return { ok: false, message: "このコードは既に使用されています。" };

    try {
      await prisma.departmentRole.update({
        where: { displayId: v.displayId },
        data: {
          code: v.code,
          name: v.name,
          priority: v.priority,
          badgeColor: v.badgeColor ?? null,
          isEnabled: v.isEnabled,
          canDownloadData: v.canDownloadData,
          canEditData: v.canEditData,
          remarks: v.remarks ?? null,
        },
      });
    } catch (e) {
      console.error("[updateDepartmentRole/custom] DB update failed:", e);
      return { ok: false, message: "更新に失敗しました。" };
    }
    return { ok: true };
  }

  // override: 既存 or 初回
  try {
    if (v.displayId) {
      // 既存 override を更新
      await prisma.departmentRole.update({
        where: { displayId: v.displayId },
        data: {
          isEnabled: v.isEnabled,
          nameOverride: v.nameOverride ?? null,
          badgeColorOverride: v.badgeColorOverride ?? null,
        },
      });
    } else if (v.roleDisplayId) {
      // 初回作成（roleId を解決して作成）
      const role = await prisma.role.findUnique({
        where: { displayId: v.roleDisplayId },
        select: { id: true },
      });
      if (!role)
        return { ok: false, message: "対象ロールを取得できませんでした。" };

      await prisma.departmentRole.create({
        data: {
          departmentId: me.departmentId,
          roleId: role.id,
          isEnabled: v.isEnabled,
          nameOverride: v.nameOverride ?? null,
          badgeColorOverride: v.badgeColorOverride ?? null,
        },
      });
    } else {
      return { ok: false, message: "表示IDの指定が不足しています。" };
    }
  } catch (e) {
    console.error("[updateDepartmentRole/override] failed:", e);
    return { ok: false, message: "更新に失敗しました。" };
  }

  return { ok: true };
}

export async function deleteDepartmentRole(
  displayId: string,
): Promise<ActionResult> {
  // 1) 認証/権限
  const ses = await lookupSessionFromCookie();
  if (!ses.ok) return { ok: false, message: "認証が必要です。" };
  const snap = await getUserSnapshot(ses.userId);
  if (!snap || !snap.canEditData) {
    return { ok: false, message: "この操作を行う権限がありません。" };
  }

  // 2) 存在確認（custom or override どちらでも可）
  const dr = await prisma.departmentRole.findUnique({
    where: { displayId },
    select: { id: true, roleId: true },
  });
  if (!dr) return { ok: false, message: "対象が見つかりません。" };

  // 3) 削除（custom も override も DELETE。override はベース Role に戻る効果）
  try {
    await prisma.departmentRole.delete({ where: { displayId } });
  } catch (e) {
    console.error("[deleteDepartmentRole] DB delete failed:", e);
    return { ok: false, message: "削除に失敗しました。" };
  }

  return { ok: true };
}

custom の重複チェック は departmentId + code のユニーク制約に合わせて事前確認。
override 初回 は roleDisplayId から roleId を解決して DR を作成 します。
削除は override/custom ともに DR を消すだけ。override の場合は自然と ベース Role の表示に戻ります。

UI：フォーム拡張（Create + Edit、識別ユニオン対応）

1章の DepartmentRoleForm を拡張し、mode: "create" | "edit" と kind: "custom" | "override" を受けられるようにします。
Users フォームと同じ構成（ 小さなフィールドを関数に分割 ）で、 any 不使用 ・zodResolver を活用します。また、あわせて、ロールにcanEditDataがないユーザには編集ができないようにします。

tsx

// src/components/department-roles/department-role-form.tsx
"use client";

import * as React from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

import {
  departmentRoleCreateSchema,
  type DepartmentRoleCreateInput,
  type DepartmentRoleCreateValues,
  departmentRoleUpdateSchema,
  type DepartmentRoleUpdateInput,
  type DepartmentRoleUpdateValues,
  DR_PRIORITY_MAX,
} from "@/lib/department-roles/schema";

import {
  Form,
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormMessage,
  FormDescription,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardFooter } from "@/components/ui/card";

type BaseProps = {
  onCancel?: () => void;
  onDelete?: () => void;
  readOnly?: boolean;
};

type CreateProps = BaseProps & {
  mode: "create";
  onSubmit: (values: DepartmentRoleCreateValues) => void;
  initialValues?: never;
};

type EditProps = BaseProps & {
  mode: "edit";
  onSubmit: (values: DepartmentRoleUpdateValues) => void;
  initialValues: DepartmentRoleUpdateValues;
};

type Props = CreateProps | EditProps;

export default function DepartmentRoleForm(props: Props) {
  return props.mode === "create" ? (
    <CreateForm {...props} />
  ) : (
    <EditForm {...props} />
  );
}

function CreateForm({ onSubmit, onCancel }: CreateProps) {
  const form = useForm<
    DepartmentRoleCreateInput,
    undefined,
    DepartmentRoleCreateValues
  >({
    resolver: zodResolver(departmentRoleCreateSchema),
    defaultValues: {
      code: "",
      name: "",
      priority: 0,
      badgeColor: "#666666",
      isEnabled: true,
      canDownloadData: false,
      canEditData: false,
      remarks: "",
    },
    mode: "onBlur",
  });

  const handleSubmit = form.handleSubmit(onSubmit);

  return (
    <Form {...form}>
      <form data-testid="department-role-form-create" onSubmit={handleSubmit}>
        <Card className="w-full rounded-md">
          <CardContent className="space-y-6 pt-1">
            <CodeField />
            <NameField />
            <PriorityField />
            <BadgeColorField />
            <IsEnabledField />
            <CanDownloadField />
            <CanEditField />
            <RemarksField />
          </CardContent>
          <CardFooter className="mt-4 flex gap-2">
            <Button
              type="button"
              variant="outline"
              onClick={onCancel}
              data-testid="cancel-btn"
              className="cursor-pointer"
            >
              キャンセル
            </Button>
            <Button
              type="submit"
              data-testid="submit-create"
              disabled={form.formState.isSubmitting}
              className="cursor-pointer"
            >
              登録する
            </Button>
          </CardFooter>
        </Card>
      </form>
    </Form>
  );
}

function EditForm({
  initialValues,
  onSubmit,
  onCancel,
  onDelete,
  readOnly = false,
}: EditProps) {
  const form = useForm<
    DepartmentRoleUpdateInput,
    undefined,
    DepartmentRoleUpdateValues
  >({
    resolver: zodResolver(departmentRoleUpdateSchema),
    defaultValues: initialValues,
    mode: "onBlur",
  });

  const handleSubmit = form.handleSubmit(onSubmit);
  const isCustom = initialValues.kind === "custom";

  return (
    <Form {...form}>
      <form data-testid="department-role-form-edit" onSubmit={handleSubmit}>
        <Card className="w-full rounded-md">
          <CardContent className="space-y-6 pt-1">
            {isCustom ? (
              <>
                <DisplayIdField />
                <CodeField readOnly={readOnly} />
                <NameField readOnly={readOnly} />
                <PriorityField readOnly={readOnly} />
                <BadgeColorField readOnly={readOnly} />
                <IsEnabledField readOnly={readOnly} />
                <CanDownloadField readOnly={readOnly} />
                <CanEditField readOnly={readOnly} />
                <RemarksField readOnly={readOnly} />
              </>
            ) : (
              <>
                {/* override: 実効値をそのまま初期表示（テキスト＋カラー） */}
                <OverrideNameField readOnly={readOnly} />
                <OverrideBadgeColorField readOnly={readOnly} />
                <IsEnabledField readOnly={readOnly} />
              </>
            )}
          </CardContent>

          <CardFooter className="mt-4 flex items-center justify-between">
            <div className="flex gap-2">
              <Button
                type="button"
                variant="outline"
                onClick={onCancel}
                data-testid="cancel-btn"
                className="cursor-pointer"
              >
                キャンセル
              </Button>
              {!readOnly && (
                <Button
                  type="submit"
                  data-testid="submit-update"
                  disabled={form.formState.isSubmitting}
                  className="cursor-pointer"
                >
                  更新する
                </Button>
              )}
            </div>
            {!readOnly && onDelete && (
              <Button
                type="button"
                variant="destructive"
                onClick={onDelete}
                data-testid="delete"
                className="cursor-pointer"
              >
                削除する
              </Button>
            )}
          </CardFooter>
        </Card>
      </form>
    </Form>
  );
}

/* ===== 共通フィールド ===== */

function DisplayIdField() {
  return (
    <FormField
      name="displayId"
      render={({ field }) => (
        <FormItem>
          <FormLabel>表示ID</FormLabel>
          <FormControl>
            <Input
              {...field}
              readOnly
              aria-readonly="true"
              data-testid="displayId"
              className="text-muted-foreground bg-muted border-none focus-visible:ring-0"
            />
          </FormControl>
          <FormDescription>DBで自動採番される表示IDです。</FormDescription>
          <FormMessage />
        </FormItem>
      )}
    />
  );
}

function CodeField({ readOnly = false }: { readOnly?: boolean }) {
  return (
    <FormField
      name="code"
      render={({ field }) => (
        <FormItem>
          <FormLabel className="font-semibold">コード *</FormLabel>
          <FormControl>
            <Input
              {...field}
              placeholder="ANALYST"
              aria-label="コード"
              autoComplete="off"
              data-testid="code"
              readOnly={readOnly}
              aria-readonly={readOnly}
              className={readOnly ? "bg-muted pointer-events-none" : ""}
            />
          </FormControl>
          <FormMessage data-testid="code-error" />
        </FormItem>
      )}
    />
  );
}

function NameField({ readOnly = false }: { readOnly?: boolean }) {
  return (
    <FormField
      name="name"
      render={({ field }) => (
        <FormItem>
          <FormLabel className="font-semibold">表示名 *</FormLabel>
          <FormControl>
            <Input
              {...field}
              placeholder="分析担当"
              aria-label="表示名"
              autoComplete="off"
              data-testid="name"
              readOnly={readOnly}
              aria-readonly={readOnly}
              className={readOnly ? "bg-muted pointer-events-none" : ""}
            />
          </FormControl>
          <FormMessage data-testid="name-error" />
        </FormItem>
      )}
    />
  );
}

function PriorityField({ readOnly = false }: { readOnly?: boolean }) {
  return (
    <FormField
      name="priority"
      render={({ field }) => (
        <FormItem>
          <FormLabel className="font-semibold">優先度 *</FormLabel>
          <FormControl>
            <Input
              type="number"
              inputMode="numeric"
              min={0}
              max={DR_PRIORITY_MAX}
              step={1}
              {...field}
              value={field.value == null ? "" : String(field.value)}
              onChange={(e) =>
                field.onChange(e.target.value === "" ? "" : e.target.value)
              }
              placeholder="20"
              aria-label="優先度"
              data-testid="priority"
              readOnly={readOnly}
              aria-readonly={readOnly}
              className={readOnly ? "bg-muted pointer-events-none" : ""}
            />
          </FormControl>
          <FormDescription className="text-xs">
            0〜{DR_PRIORITY_MAX} の整数で入力してください。
          </FormDescription>
          <FormMessage data-testid="priority-error" />
        </FormItem>
      )}
    />
  );
}

function BadgeColorField({ readOnly = false }: { readOnly?: boolean }) {
  return (
    <FormField
      name="badgeColor"
      render={({ field }) => (
        <FormItem>
          <FormLabel className="font-semibold">バッジ色</FormLabel>
          <FormControl>
            <Input
              type="color"
              {...field}
              aria-label="バッジ色"
              data-testid="badgeColor"
              disabled={readOnly}
              className={readOnly ? "opacity-70" : "cursor-pointer"}
            />
          </FormControl>
          <FormMessage data-testid="badgeColor-error" />
        </FormItem>
      )}
    />
  );
}

function IsEnabledField({ readOnly = false }: { readOnly?: boolean }) {
  return (
    <FormField
      name="isEnabled"
      render={({ field }) => (
        <FormItem className="mt-1 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
          <div className="space-y-0.5">
            <FormLabel className="font-semibold">有効 *</FormLabel>
            <FormDescription>ONで有効/OFFで無効</FormDescription>
          </div>
          <FormControl>
            <Switch
              name={field.name}
              checked={Boolean(field.value)}
              onCheckedChange={field.onChange}
              aria-label="有効"
              data-testid="isEnabled"
              disabled={readOnly}
            />
          </FormControl>
          <FormMessage data-testid="isEnabled-error" />
        </FormItem>
      )}
    />
  );
}

function CanDownloadField({ readOnly = false }: { readOnly?: boolean }) {
  return (
    <FormField
      name="canDownloadData"
      render={({ field }) => (
        <FormItem className="mt-1 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
          <FormLabel className="font-semibold">データDL可 *</FormLabel>
          <FormControl>
            <Switch
              name={field.name}
              checked={Boolean(field.value)}
              onCheckedChange={field.onChange}
              aria-label="データDL可"
              data-testid="canDownloadData"
              disabled={readOnly}
            />
          </FormControl>
          <FormMessage data-testid="canDownloadData-error" />
        </FormItem>
      )}
    />
  );
}

function CanEditField({ readOnly = false }: { readOnly?: boolean }) {
  return (
    <FormField
      name="canEditData"
      render={({ field }) => (
        <FormItem className="mt-1 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
          <FormLabel className="font-semibold">データ編集可 *</FormLabel>
          <FormControl>
            <Switch
              name={field.name}
              checked={Boolean(field.value)}
              onCheckedChange={field.onChange}
              aria-label="データ編集可"
              data-testid="canEditData"
              disabled={readOnly}
            />
          </FormControl>
          <FormMessage data-testid="canEditData-error" />
        </FormItem>
      )}
    />
  );
}

function RemarksField({ readOnly = false }: { readOnly?: boolean }) {
  return (
    <FormField
      name="remarks"
      render={({ field }) => (
        <FormItem>
          <FormLabel className="font-semibold">備考</FormLabel>
          <FormControl>
            <Input
              {...field}
              placeholder="メモなど"
              aria-label="備考"
              autoComplete="off"
              data-testid="remarks"
              readOnly={readOnly}
              aria-readonly={readOnly}
              className={readOnly ? "bg-muted pointer-events-none" : ""}
            />
          </FormControl>
          <FormMessage data-testid="remarks-error" />
        </FormItem>
      )}
    />
  );
}

/* ===== override 用（そのまま初期表示） ===== */

function OverrideNameField({ readOnly = false }: { readOnly?: boolean }) {
  return (
    <FormField
      name="nameOverride"
      render={({ field }) => (
        <FormItem>
          <FormLabel className="font-semibold">表示名（上書き）</FormLabel>
          <FormControl>
            <Input
              {...field}
              placeholder="表示名（ベースを上書き）"
              aria-label="表示名（上書き）"
              autoComplete="off"
              data-testid="nameOverride"
              readOnly={readOnly}
              aria-readonly={readOnly}
              className={readOnly ? "bg-muted pointer-events-none" : ""}
            />
          </FormControl>
          <FormMessage data-testid="nameOverride-error" />
        </FormItem>
      )}
    />
  );
}

function OverrideBadgeColorField({ readOnly = false }: { readOnly?: boolean }) {
  return (
    <FormField
      name="badgeColorOverride"
      render={({ field }) => (
        <FormItem>
          <FormLabel className="font-semibold">バッジ色（上書き）</FormLabel>
          <FormControl>
            <Input
              type="color"
              {...field}
              aria-label="バッジ色（上書き）"
              data-testid="badgeColorOverride"
              disabled={readOnly}
              className={readOnly ? "opacity-70" : "cursor-pointer"}
            />
          </FormControl>
          <FormMessage data-testid="badgeColorOverride-error" />
        </FormItem>
      )}
    />
  );
}

EditForm は initialValues.kind で表示を切り替えます。
override 初回（DR 無）でも UI は同じ。roleDisplayId は ページ側で initialValues に含めて 渡します。

画面：/masters/roles/[displayId]（SSR ガード＋初期値解決）

displayId が DR か RL かで分岐し、 編集用初期値 を合成して Client に渡します。
Role 単体（override 無） の場合でも、kind: "override" の initialValues を構成します（isEnabled: true、nameOverride/badgeColorOverride: undefined）。

tsx

// src/app/(protected)/masters/roles/[displayId]/page.tsx

import type { Metadata } from "next";
import { notFound } from "next/navigation";

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import { SidebarTrigger } from "@/components/ui/sidebar";

import { prisma } from "@/lib/database";
import { guardHrefOrRedirect } from "@/lib/auth/guard.ssr";
import Client from "./client";

import type { DepartmentRoleUpdateValues } from "@/lib/department-roles/schema";

export const metadata: Metadata = {
  title: "ロール編集",
  description: "部署ローカル（custom）／ベースロール上書き（override）の編集",
};

export default async function Page({
  params,
}: {
  params: Promise<{ displayId: string }>;
}) {
  const { displayId } = await params;

  // SSR ガード（userId を取得）
  const viewer = await guardHrefOrRedirect(`/masters/roles/${displayId}`, "/");

  // 部署ID
  const me = await prisma.user.findUnique({
    where: { id: viewer.userId },
    select: { departmentId: true },
  });
  if (!me?.departmentId) notFound();

  let initialValues: DepartmentRoleUpdateValues | null = null;

  if (displayId.startsWith("DR")) {
    // DR を直接取得（custom / override どちらでも）
    const dr = await prisma.departmentRole.findUnique({
      where: { displayId },
      select: {
        displayId: true,
        departmentId: true,
        roleId: true,
        // custom
        code: true,
        name: true,
        priority: true,
        badgeColor: true,
        canDownloadData: true,
        canEditData: true,
        isEnabled: true,
        remarks: true,
        // override
        nameOverride: true,
        badgeColorOverride: true,
        role: { select: { displayId: true, name: true, badgeColor: true } },
      },
    });
    if (!dr || dr.departmentId !== me.departmentId) notFound();

    if (dr.roleId) {
      // override（既存）。UI には「実効値」を初期表示させる
      const effName = dr.nameOverride ?? dr.role?.name ?? "";
      const effColor =
        dr.badgeColorOverride ?? dr.role?.badgeColor ?? "#000000";

      initialValues = {
        kind: "override",
        displayId: dr.displayId,
        roleDisplayId: dr.role?.displayId, // 既存でも保持しておくと便利
        isEnabled: dr.isEnabled,
        nameOverride: effName, // ← 実効値をそのまま初期表示
        badgeColorOverride: effColor, // ← 実効値をそのまま初期表示
      };
    } else {
      // custom
      initialValues = {
        kind: "custom",
        displayId: dr.displayId,
        code: dr.code ?? "",
        name: dr.name ?? "",
        priority: dr.priority ?? 0,
        badgeColor: dr.badgeColor ?? "#000000",
        isEnabled: dr.isEnabled,
        canDownloadData: dr.canDownloadData ?? false,
        canEditData: dr.canEditData ?? false,
        remarks: dr.remarks ?? undefined,
      };
    }
  } else if (displayId.startsWith("RL")) {
    // Role から編集（override 初回 or 既存）
    const role = await prisma.role.findUnique({
      where: { displayId },
      select: {
        displayId: true,
        name: true,
        badgeColor: true,
        departmentRoles: {
          where: { departmentId: me.departmentId, roleId: { not: null } },
          take: 1,
          select: {
            displayId: true,
            isEnabled: true,
            nameOverride: true,
            badgeColorOverride: true,
          },
        },
      },
    });
    if (!role) notFound();

    const ov = role.departmentRoles[0];
    if (ov) {
      // 既存 override：実効値で初期表示（override 優先、なければ Role）
      const effName = ov.nameOverride ?? role.name;
      const effColor = ov.badgeColorOverride ?? role.badgeColor ?? "#000000";

      initialValues = {
        kind: "override",
        displayId: ov.displayId,
        roleDisplayId: role.displayId,
        isEnabled: ov.isEnabled,
        nameOverride: effName,
        badgeColorOverride: effColor,
      };
    } else {
      // 初回 override：Role 値をそのまま初期値に入れて表示
      initialValues = {
        kind: "override",
        roleDisplayId: role.displayId,
        isEnabled: true,
        nameOverride: role.name, // ← そのまま表示
        badgeColorOverride: role.badgeColor ?? "#000000", // ← そのまま表示
      };
    }
  } else {
    notFound();
  }

  if (!initialValues) notFound();

  return (
    <>
      <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
        <div className="flex items-center gap-2 px-4">
          <SidebarTrigger className="-ml-1" />
          <Separator
            orientation="vertical"
            className="mr-2 data-[orientation=vertical]:h-4"
          />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem className="hidden md:block">
                <BreadcrumbLink href="/masters">マスタ管理</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator className="hidden md:block" />
              <BreadcrumbItem className="hidden md:block">
                <BreadcrumbLink href="/masters/roles">
                  ロール管理
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator className="hidden md:block" />
              <BreadcrumbItem>
                <BreadcrumbPage>ロール編集（{displayId}）</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </div>
      </header>

      <div className="max-w-xl p-4 pt-0">
        <Client
          initialValues={initialValues}
          canEditData={viewer.canEditData}
        />
      </div>
    </>
  );
}

DR 起点 ：roleId の有無で custom / override を判定。
RL 起点 ：同部署の override 有無で分岐。無ければ 初回 override 作成 の初期値を組み立てます。

tsx

// src/app/(protected)/masters/roles/[displayId]/client.tsx
"use client";

import { useRouter } from "next/navigation";
import { toast } from "sonner";

import DepartmentRoleForm from "@/components/department-roles/department-role-form";
import type { DepartmentRoleUpdateValues } from "@/lib/department-roles/schema";
import {
  updateDepartmentRole,
  deleteDepartmentRole,
} from "@/app/_actions/department-roles/update";

type Props = {
  initialValues: DepartmentRoleUpdateValues;
  canEditData?: boolean;
};

export default function EditDepartmentRoleClient({
  initialValues,
  canEditData = false,
}: Props) {
  const router = useRouter();

  const handleSubmit = async (values: DepartmentRoleUpdateValues) => {
    if (!canEditData) return; // 念のための保険（編集権がないと通常はボタン非表示）
    // override の空入力は「ベース値を使う」＝ undefined に正規化
    const normalized: DepartmentRoleUpdateValues =
      values.kind === "override"
        ? {
            ...values,
            nameOverride:
              values.nameOverride && values.nameOverride.trim() !== ""
                ? values.nameOverride
                : undefined,
            badgeColorOverride:
              values.badgeColorOverride &&
              values.badgeColorOverride.trim() !== ""
                ? values.badgeColorOverride
                : undefined,
          }
        : values;

    const res = await updateDepartmentRole(normalized);

    if (res.ok) {
      toast.success("ロールを更新しました", { duration: 3000 });
      router.push("/masters/roles");
      router.refresh();
      return;
    }
    toast.error(res.message ?? "更新に失敗しました。", { duration: 3500 });
  };

  const handleDelete =
    canEditData && (initialValues.kind === "custom" || initialValues.displayId)
      ? async () => {
          const id =
            initialValues.kind === "custom"
              ? initialValues.displayId
              : (initialValues.displayId as string);
          const res = await deleteDepartmentRole(id);
          if (res.ok) {
            toast.success(
              initialValues.kind === "custom"
                ? "ロールを削除しました"
                : "上書きを削除しました（ベースに戻ります）",
            );
            router.push("/masters/roles");
            router.refresh();
          } else {
            toast.error(res.message ?? "削除に失敗しました。");
          }
        }
      : undefined;

  return (
    <DepartmentRoleForm
      mode="edit"
      initialValues={initialValues}
      onSubmit={canEditData ? handleSubmit : () => {}}
      onCancel={() => history.back()}
      onDelete={canEditData ? handleDelete : undefined}
      readOnly={!canEditData}
    />
  );
}

更新成功 ：トースト → /masters/roles へ戻る → router.refresh()。
削除：custom はレコード削除、override は DR を削除して Role 素に戻る 。
初回 override は削除ボタンを出さない（対象が未作成だから）。

動作確認の観点（チェックリスト）

観点	期待動作
DR（custom）編集	`code` 重複は部署内で拒否。`priority ≤ 99`。有効/無効・権限フラグが保存される。
RL（override無）	画面で上書き値を入力 → 保存で DR（override）新規作成。一覧で反映される。
RL/DR（override有）	上書き値の変更・isEnabled 切り替えが保存される。削除で Role 素に戻る。
権限	`canEditData = false` のユーザは SA で弾かれる（UI からも遷移不可が望ましい）。
直リンク	`guardHrefOrRedirect` が未ログイン・権限不足を遮断する。

編集画面は 1 画面で custom / override を統合 し、kind で分岐。
override 初回作成 （RL 起点）に対応しておくと、テナント運用の導線がシンプルになります。
サーバ側は 認証/権限/部署/入力 の 4 点を毎回チェックする共通骨格にすると、以降の CRUD も迷いません。

3. 一覧

部署にとっての「ロール」は Role と DepartmentRole が 同一テーブルに混在 して見えることが重要です。
ここではユーザ一覧の実装をテンプレートに、 /masters/roles で ベースロール / 上書き / 部署カスタム をひとつの DataTable にまとめて表示・検索・ソート・CSV 出力できるようにします。

txt

[一覧に並ぶ行のイメージ]

┌──────────┬──────────┬────────┬──────────────┬─────────┬───────────┬──────────┬─────────────┐
│ 表示ID   │ コード   │ 種別   │ 表示名(実効) │ 優先度  │ 編集可     │ DL可     │ 状態(部署)  │ ...
├──────────┼──────────┼────────┼──────────────┼─────────┼───────────┼──────────┼─────────────┤
│ RL...    │ ADMIN    │ role   │ 管理者        │ 100     │ ✅         │ ✅       │ 有効(=true) │ ← overrideなし
│ RL...    │ VIEWER   │ override│ ビュー専用   │ 10      │ ❌         │ ❌       │ 無効        │ ← 部署のoverride適用
│ DR...    │ ANALYST  │ custom │ 分析担当      │ 20      │ ✅         │ ❌       │ 有効        │ ← 部署ローカル作成
└──────────┴──────────┴────────┴──────────────┴─────────┴───────────┴──────────┴─────────────┘
※ 編集リンクは kind=role/override → `/masters/roles/RL...`
   kind=custom → `/masters/roles/DR...`

表示仕様（ベース＋上書き＋カスタムを統合）

列	値の出所（role 行）	値の出所（custom 行）
表示ID	`Role.displayId`	`DepartmentRole.displayId`
コード	`Role.code`	`DepartmentRole.code`
種別(kind)	`override` が存在すれば `override`、なければ `role`	常に `custom`
表示名（実効）	`nameOverride ?? Role.name`	`DepartmentRole.name`
バッジ色（実効）	`badgeColorOverride ?? Role.badgeColor`	`DepartmentRole.badgeColor`
優先度	`Role.priority`	`DepartmentRole.priority`
編集可/ダウンロード可	`Role.canEditData / Role.canDownloadData`	`DepartmentRole.canEditData / canDownloadData`
状態（部署での有効）	`override ? override.isEnabled : true`	`DepartmentRole.isEnabled`
備考	-	`DepartmentRole.remarks`
編集リンク	`/masters/roles/{Role.displayId}`	`/masters/roles/{DepartmentRole.displayId}`

以降は SSR でデータを合成 → クライアントの DataTable に渡す という流れで実装します。

ロール種別(kind) フィルタの追加

ロール一覧では、ロール種別(kind) フィルタを利用します。まずは、フィルタとなる複数選択可能なリストファイルを作成します。

// src/app/(protected)/masters/roles/types-checklist.tsx
"use client";

import * as React from "react";
import { Check } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Command,
  CommandGroup,
  CommandItem,
  CommandInput,
  CommandEmpty,
} from "@/components/ui/command";
import { Separator } from "@/components/ui/separator";

export function TypesChecklist({
  value,
  onChange,
  options, // [{value:'role',label:'ベース'}, ...]
  footer,
}: {
  value: string[];
  onChange: (next: string[]) => void;
  options: { value: string; label: string }[];
  footer?: React.ReactNode;
}) {
  const [needle, setNeedle] = React.useState("");

  const toggle = (v: string) => {
    const set = new Set(value);
    if (set.has(v)) {
      set.delete(v);
    } else {
      set.add(v);
    }
    onChange(Array.from(set));
  };

  const all = options.map((o) => o.value);
  const allSelected = value.length === all.length;
  const noneSelected = value.length === 0;

  const filtered = React.useMemo(() => {
    const q = needle.trim().toLowerCase();
    if (!q) return options;
    return options.filter(
      (o) =>
        o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q),
    );
  }, [needle, options]);

  return (
    <div className="flex max-h-[60vh] w-full flex-col">
      <div className="p-2">
        <Command shouldFilter={false}>
          <CommandInput
            value={needle}
            onValueChange={setNeedle}
            placeholder="種別を検索…"
          />
          <CommandEmpty>該当する種別がありません</CommandEmpty>
          <CommandGroup heading="種別（複数選択可）">
            {filtered.map((o) => {
              const checked = value.includes(o.value);
              return (
                <CommandItem
                  key={o.value}
                  onSelect={() => toggle(o.value)}
                  className="flex items-center gap-2"
                >
                  <span
                    className="flex h-5 w-5 items-center justify-center rounded border"
                    aria-checked={checked}
                    role="checkbox"
                  >
                    {checked ? <Check className="h-3 w-3" /> : null}
                  </span>
                  <span className="truncate">{o.label}</span>
                </CommandItem>
              );
            })}
          </CommandGroup>
        </Command>
      </div>

      <Separator />

      <div className="flex items-center justify-between gap-2 p-2">
        <div className="flex gap-2">
          <Button
            type="button"
            variant="ghost"
            size="sm"
            onClick={() => onChange(all)}
            disabled={allSelected}
            className="cursor-pointer"
          >
            すべて
          </Button>
          <Button
            type="button"
            variant="ghost"
            size="sm"
            onClick={() => onChange([])}
            disabled={noneSelected}
            className="cursor-pointer"
          >
            クリア
          </Button>
        </div>
        <div className="flex items-center">{footer}</div>
      </div>
    </div>
  );
}

これは新規のフィルタとなるので、src/types/table-meta.d.tsにも追記します。

// src/types/table-meta.d.ts
import "@tanstack/table-core";

declare module "@tanstack/table-core" {
  interface TableMeta<TData extends RowData> {
    onMoveUp?: (id: string, _row?: TData) => void;
    onMoveDown?: (id: string, _row?: TData) => void;
    /** 依頼を「再発行済み」にする */
    onIssue?: (id: string, _row?: TData) => void | Promise<void>;
    /** 依頼を「拒否」にする */
    onReject?: (id: string, _row?: TData) => void | Promise<void>;
    /** ★ 追加：メール変更申請を「承認」する */
    onApprove?: (id: string, _row?: TData) => void | Promise<void>;
    // ▼ ユーザ一覧用（必要なものだけ）
    roleOptions?: Array<{ value: string; label: string }>;
    roles?: string[];
    setRoles?: (next: string[]) => void;

    status?: "ALL" | "ACTIVE" | "INACTIVE";
    setStatus?: (next: "ALL" | "ACTIVE" | "INACTIVE") => void;

    createdRange?: import("react-day-picker").DateRange | undefined;
    setCreatedRange?: (
      r: import("react-day-picker").DateRange | undefined,
    ) => void;

    updatedRange?: import("react-day-picker").DateRange | undefined;
    setUpdatedRange?: (
      r: import("react-day-picker").DateRange | undefined,
    ) => void;

    // ▼ ロール一覧用（masters/roles）
    kindOptions?: Array<{ value: string; label: string }>;
    kinds?: string[];
    setKinds?: (next: string[]) => void;
  }
}

export {};

これで一覧で利用可能なフィルタが増えます。

カラムファイルの作成

tsx

// src/app/(protected)/masters/roles/columns.tsx
"use client";

import Link from "next/link";
import * as React from "react";
import type { ColumnDef, HeaderContext } from "@tanstack/react-table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { SquarePen, SlidersVertical } from "lucide-react";
import { format } from "date-fns";
import { ja } from "date-fns/locale";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import * as PopoverPrimitive from "@radix-ui/react-popover";
import { StatusFilter } from "@/components/filters/status-filter";
import { SortButton } from "@/components/datagrid/sort-button";
import { TypesChecklist } from "./types-checklist";
// ★ 追加：日付レンジフィルタ
import { DateRangePicker } from "@/components/filters/date-range-picker";

export type DepartmentRoleRow = {
  displayId: string; // RL... or DR...
  code: string; // 表示用コード
  kind: "role" | "override" | "custom";
  nameEffective: string;
  badgeColorEffective: string | null;
  priority: number;
  canEditData: boolean;
  canDownloadData: boolean;
  isEnabledInDepartment: boolean; // 部署視点の有効
  remarks: string | null; // customのみ
  createdAt: Date;
  updatedAt: Date;
};

function fmt(dt: Date) {
  return format(dt, "yyyy/MM/dd HH:mm", { locale: ja });
}

function HeaderWithFilter({
  title,
  active,
  children,
  contentClassName,
  trailing,
}: {
  title: string;
  active: boolean;
  children: React.ReactNode;
  contentClassName?: string;
  trailing?: React.ReactNode;
}) {
  return (
    <div className="flex items-center gap-1">
      <span className="whitespace-nowrap">{title}</span>
      <Popover>
        <PopoverTrigger asChild>
          <Button
            type="button"
            size="icon"
            variant={active ? "default" : "outline"}
            className="h-7 w-7 cursor-pointer"
            aria-label={`${title}のフィルタ`}
            title={`${title}のフィルタ`}
          >
            <SlidersVertical className="h-3.5 w-3.5" />
          </Button>
        </PopoverTrigger>
        <PopoverContent
          align="end"
          className={["p-0", contentClassName ?? "w-80"].join(" ")}
        >
          {children}
        </PopoverContent>
      </Popover>
      {trailing ? <div className="ml-0.5">{trailing}</div> : null}
    </div>
  );
}

function HeaderWithSort<TData, TValue>({
  title,
  ctx,
}: {
  title: string;
  ctx: HeaderContext<TData, TValue>;
}) {
  return (
    <div className="flex items-center gap-1">
      <span className="whitespace-nowrap">{title}</span>
      <SortButton
        column={ctx.column}
        aria-label={`${title}でソート`}
        title={`${title}でソート`}
      />
    </div>
  );
}

export const columns: ColumnDef<DepartmentRoleRow>[] = [
  {
    id: "actions",
    header: "操作",
    enableResizing: false,
    size: 40,
    enableSorting: false,
    cell: ({ row }) => (
      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            asChild
            size="icon"
            variant="outline"
            data-testid={`edit-${row.original.displayId}`}
            className="size-8 cursor-pointer"
          >
            <Link href={`/masters/roles/${row.original.displayId}`}>
              <SquarePen />
            </Link>
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>参照・編集</p>
        </TooltipContent>
      </Tooltip>
    ),
  },

  {
    accessorKey: "displayId",
    header: (ctx) => <HeaderWithSort title="表示ID" ctx={ctx} />,
    cell: ({ row }) => (
      <span className="font-mono">{row.original.displayId}</span>
    ),
  },
  {
    accessorKey: "code",
    header: (ctx) => <HeaderWithSort title="コード" ctx={ctx} />,
  },

  // 種別フィルタ（role/override/custom）
  {
    accessorKey: "kind",
    header: (ctx) => {
      const table = ctx.table;
      const kindOptions = table.options.meta?.kindOptions ?? [];
      const kinds =
        table.options.meta?.kinds ??
        kindOptions.map((o: { value: string }) => o.value);
      const setKinds = table.options.meta?.setKinds ?? (() => {});
      const active = kinds.length !== kindOptions.length;

      return (
        <HeaderWithFilter
          title="種別"
          active={active}
          contentClassName="w-[300px]"
          trailing={
            <SortButton
              column={ctx.column}
              aria-label="種別でソート"
              title="種別でソート"
            />
          }
        >
          <TypesChecklist
            value={kinds}
            onChange={setKinds}
            options={kindOptions}
            footer={
              <PopoverPrimitive.Close asChild>
                <Button
                  variant="ghost"
                  size="sm"
                  type="button"
                  className="cursor-pointer"
                >
                  閉じる
                </Button>
              </PopoverPrimitive.Close>
            }
          />
        </HeaderWithFilter>
      );
    },
    size: 64,
    enableResizing: false,
    cell: ({ row }) => {
      const k = row.original.kind;
      const label =
        k === "role" ? "ベース" : k === "override" ? "上書き" : "部署ローカル";
      return (
        <Badge variant={k === "custom" ? "secondary" : "outline"}>
          {label}
        </Badge>
      );
    },
  },

  // 表示名（実効）＋色バッジ
  {
    accessorKey: "nameEffective",
    header: (ctx) => <HeaderWithSort title="表示名" ctx={ctx} />,
    cell: ({ row }) => {
      const color = row.original.badgeColorEffective;
      const style = color
        ? { backgroundColor: color, color: "#fff", border: "none" }
        : undefined;
      return (
        <div className="flex items-center gap-2">
          <Badge
            variant={color ? "secondary" : "outline"}
            style={style}
            title={color ?? ""}
          >
            {row.original.nameEffective}
          </Badge>
        </div>
      );
    },
  },

  {
    accessorKey: "priority",
    header: (ctx) => <HeaderWithSort title="優先度" ctx={ctx} />,
    size: 60,
  },

  {
    accessorKey: "canEditData",
    header: (ctx) => <HeaderWithSort title="編集可" ctx={ctx} />,
    size: 56,
    cell: ({ row }) => (row.original.canEditData ? "✅" : "—"),
  },
  {
    accessorKey: "canDownloadData",
    header: (ctx) => <HeaderWithSort title="DL可" ctx={ctx} />,
    size: 56,
    cell: ({ row }) => (row.original.canDownloadData ? "✅" : "—"),
  },

  // 状態（部署での有効）フィルタ
  {
    accessorKey: "isEnabledInDepartment",
    header: (ctx) => {
      const table = ctx.table;
      const status = table.options.meta?.status ?? "ALL";
      const setStatus: (next: "ALL" | "ACTIVE" | "INACTIVE") => void =
        table.options.meta?.setStatus ?? (() => {});
      const active = status !== "ALL";
      return (
        <HeaderWithFilter
          title="状態"
          active={active}
          contentClassName="w-[220px]"
          trailing={
            <SortButton
              column={ctx.column}
              aria-label="状態でソート"
              title="状態でソート"
            />
          }
        >
          <StatusFilter value={status} onChange={setStatus} />
        </HeaderWithFilter>
      );
    },
    size: 50,
    enableResizing: false,
    cell: ({ row }) =>
      row.original.isEnabledInDepartment ? (
        <Badge data-testid="badge-enabled">有効</Badge>
      ) : (
        <Badge variant="outline" data-testid="badge-disabled">
          無効
        </Badge>
      ),
  },

  {
    accessorKey: "remarks",
    header: (ctx) => <HeaderWithSort title="備考" ctx={ctx} />,
    size: 150,
    cell: ({ row }) => (
      <div className="max-w-[150px] truncate">{row.original.remarks}</div>
    ),
  },

  // ★ 登録日時（フィルタ＋ソート）
  {
    accessorKey: "createdAt",
    header: (ctx) => {
      const table = ctx.table;
      const r = table.options.meta?.createdRange;
      const setR: (
        r: import("react-day-picker").DateRange | undefined,
      ) => void = table.options.meta?.setCreatedRange ?? (() => {});
      const active = !!(r?.from || r?.to);
      return (
        <HeaderWithFilter
          title="登録日時"
          active={active}
          contentClassName="w-[268px] md:w-[520px] max-w-[90vw]"
          trailing={
            <SortButton
              column={ctx.column}
              aria-label="登録日時でソート"
              title="登録日時でソート"
            />
          }
        >
          <DateRangePicker label="登録日時" value={r} onChange={setR} />
        </HeaderWithFilter>
      );
    },
    size: 120,
    cell: ({ row }) => fmt(row.original.createdAt),
  },

  // ★ 更新日時（フィルタ＋ソート）
  {
    accessorKey: "updatedAt",
    header: (ctx) => {
      const table = ctx.table;
      const r = table.options.meta?.updatedRange;
      const setR: (
        r: import("react-day-picker").DateRange | undefined,
      ) => void = table.options.meta?.setUpdatedRange ?? (() => {});
      const active = !!(r?.from || r?.to);
      return (
        <HeaderWithFilter
          title="更新日時"
          active={active}
          contentClassName="w-[268px] md:w-[520px] max-w-[90vw]"
          trailing={
            <SortButton
              column={ctx.column}
              aria-label="更新日時でソート"
              title="更新日時でソート"
            />
          }
        >
          <DateRangePicker label="更新日時" value={r} onChange={setR} />
        </HeaderWithFilter>
      );
    },
    size: 120,
    cell: ({ row }) => fmt(row.original.updatedAt),
  },

  // 検索用の隠し列
  {
    id: "q",
    accessorFn: (r) =>
      `${r.displayId} ${r.code} ${r.nameEffective} ${r.remarks ?? ""}`.toLowerCase(),
    enableHiding: true,
    enableSorting: false,
    size: 0,
    header: () => null,
    cell: () => null,
  },
];

列構成はユーザ一覧とほぼ同じですが、ロール特有の 種別(kind)・実効表示名/色・権限フラグ を追加しています。
編集リンクは displayId の接頭語（RL/DR）に依らず、常に /masters/roles/[displayId] を踏むだけでOKです。

データテーブルの作成

tsx

// src/app/(protected)/masters/roles/data-table.tsx
"use client";

import * as React from "react";
import type {
  ColumnDef,
  SortingState,
  VisibilityState,
} from "@tanstack/react-table";
import {
  flexRender,
  getCoreRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table";
import { Table } from "@/components/datagrid/table-container";
import {
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import type { DateRange } from "react-day-picker";
import { format } from "date-fns";
import { ja } from "date-fns/locale";
import type { DepartmentRoleRow } from "./columns";

import { useDatagridQueryState } from "@/lib/datagrid/use-datagrid-query-state";
import { usePersistentDatagridState } from "@/lib/datagrid/use-persistent-datagrid-state";
import { fromDateRange, toDateRange } from "@/lib/datagrid/date-io";
import { buildCsv, downloadCsv, fmtDateTime } from "@/lib/datagrid/csv";

import { DatagridToolbar } from "@/components/datagrid/datagrid-toolbar";
import { DatagridSummary } from "@/components/datagrid/datagrid-summary";
import { DatagridPagination } from "@/components/datagrid/datagrid-pagination";

type Props = {
  columns: ColumnDef<DepartmentRoleRow, unknown>[];
  data: DepartmentRoleRow[];
  kindOptions: { value: string; label: string }[];
  canDownloadData?: boolean;
  canEditData?: boolean;
};

export default function DataTable({
  columns,
  data,
  kindOptions,
  canDownloadData = false,
  canEditData = false,
}: Props) {
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);

  const allColumnIds = React.useMemo(
    () =>
      [
        "displayId",
        "code",
        "kind",
        "nameEffective",
        "priority",
        "canEditData",
        "canDownloadData",
        "isEnabledInDepartment",
        "remarks",
        "createdAt",
        "updatedAt",
      ] as const,
    [],
  );
  type ColId = (typeof allColumnIds)[number];

  // URL同期（ロール一覧専用の名前空間）
  const [queryState, setQueryState] = useDatagridQueryState(
    "masters-roles",
    {
      q: "",
      kinds: [] as string[], // 空配列＝全種別
      status: "ALL" as "ALL" | "ACTIVE" | "INACTIVE",
      createdRange: undefined as { from?: string; to?: string } | undefined,
      updatedRange: undefined as { from?: string; to?: string } | undefined,
      cols: Array.from(allColumnIds) as ColId[],
    },
    { persistKey: "masters-roles" },
  );

  const allKinds = React.useMemo(
    () => kindOptions.map((o) => o.value),
    [kindOptions],
  );
  const kindsForFilter = queryState.kinds.length ? queryState.kinds : allKinds;

  const createdRange = React.useMemo(
    () => toDateRange(queryState.createdRange),
    [queryState.createdRange],
  );
  const updatedRange = React.useMemo(
    () => toDateRange(queryState.updatedRange),
    [queryState.updatedRange],
  );

  const setQ = (v: string) => setQueryState((s) => ({ ...s, q: v }));
  const setKinds = (next: string[]) =>
    setQueryState((s) => ({ ...s, kinds: next }));
  const setStatus = (next: "ALL" | "ACTIVE" | "INACTIVE") =>
    setQueryState((s) => ({ ...s, status: next }));
  const setCreatedRange = (r?: DateRange) =>
    setQueryState((s) => ({ ...s, createdRange: fromDateRange(r) }));
  const setUpdatedRange = (r?: DateRange) =>
    setQueryState((s) => ({ ...s, updatedRange: fromDateRange(r) }));
  const setVisibleColumnIds = (ids: ColId[]) =>
    setQueryState((s) => ({ ...s, cols: ids }));

  // ページサイズの永続化
  const [persisted, setPersisted] = usePersistentDatagridState(
    "masters-roles",
    { pageSize: 20 },
  );

  const [sorting, setSorting] = React.useState<SortingState>([
    { id: "priority", desc: false }, // 既定は優先度の昇順
  ]);

  const columnLabels = React.useMemo(
    () =>
      ({
        displayId: "表示ID",
        code: "コード",
        kind: "種別",
        nameEffective: "表示名",
        priority: "優先度",
        canEditData: "編集可",
        canDownloadData: "DL可",
        isEnabledInDepartment: "状態",
        remarks: "備考",
        createdAt: "登録日時",
        updatedAt: "更新日時",
      }) as const,
    [],
  );

  const effectiveVisibleColumnIds: ColId[] = mounted
    ? (queryState.cols as ColId[])
    : (Array.from(allColumnIds) as ColId[]);
  const columnVisibility = React.useMemo<VisibilityState>(() => {
    const set = new Set(effectiveVisibleColumnIds);
    return {
      actions: true,
      q: false,
      displayId: set.has("displayId"),
      code: set.has("code"),
      kind: set.has("kind"),
      nameEffective: set.has("nameEffective"),
      priority: set.has("priority"),
      canEditData: set.has("canEditData"),
      canDownloadData: set.has("canDownloadData"),
      isEnabledInDepartment: set.has("isEnabledInDepartment"),
      remarks: set.has("remarks"),
      createdAt: set.has("createdAt"),
      updatedAt: set.has("updatedAt"),
    };
  }, [effectiveVisibleColumnIds]);

  // フィルタ
  const filteredData = React.useMemo(() => {
    const needle = queryState.q.trim().toLowerCase();
    const kindSet = new Set(kindsForFilter);
    const inRange = (d: Date, r?: DateRange) => {
      if (!r?.from && !r?.to) return true;
      const ts = d.getTime();
      if (r?.from && ts < new Date(r.from).setHours(0, 0, 0, 0)) return false;
      if (r?.to && ts > new Date(r.to).setHours(23, 59, 59, 999)) return false;
      return true;
    };

    return data.filter((r) => {
      const passQ =
        !needle ||
        `${r.displayId} ${r.code} ${r.nameEffective} ${r.remarks ?? ""}`
          .toLowerCase()
          .includes(needle);
      const passKind = kindSet.has(r.kind);
      const passStatus =
        queryState.status === "ALL" ||
        (queryState.status === "ACTIVE"
          ? r.isEnabledInDepartment
          : !r.isEnabledInDepartment);
      const passCreated = inRange(r.createdAt, createdRange);
      const passUpdated = inRange(r.updatedAt, updatedRange);
      return passQ && passKind && passStatus && passCreated && passUpdated;
    });
  }, [
    data,
    queryState.q,
    queryState.status,
    kindsForFilter,
    createdRange,
    updatedRange,
  ]);

  const table = useReactTable({
    data: filteredData,
    columns,
    state: { sorting, columnVisibility },
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    initialState: { pagination: { pageIndex: 0, pageSize: 20 } },
    meta: {
      kindOptions,
      kinds: kindsForFilter,
      setKinds,
      status: queryState.status,
      setStatus,
      createdRange,
      setCreatedRange,
      updatedRange,
      setUpdatedRange,
    },
  });

  React.useEffect(() => {
    if (mounted) table.setPageSize(persisted.pageSize);
  }, [mounted, persisted.pageSize, table]);

  // CSV（可視列のみ）
  const onDownloadCsv = React.useCallback(() => {
    const visibleLeaf = table
      .getVisibleLeafColumns()
      .map((c) => c.id)
      .filter((id) => id !== "actions" && id !== "q") as ColId[];

    const headers = visibleLeaf.map((id) => columnLabels[id]);

    const rows = filteredData.map((r) =>
      visibleLeaf.map((id) => {
        switch (id) {
          case "displayId":
            return r.displayId;
          case "code":
            return r.code;
          case "kind":
            return r.kind === "role"
              ? "ベース"
              : r.kind === "override"
                ? "上書き"
                : "部署ローカル";
          case "nameEffective":
            return r.nameEffective;
          case "priority":
            return r.priority;
          case "canEditData":
            return r.canEditData ? "可" : "不可";
          case "canDownloadData":
            return r.canDownloadData ? "可" : "不可";
          case "isEnabledInDepartment":
            return r.isEnabledInDepartment ? "有効" : "無効";
          case "remarks":
            return r.remarks ?? "";
          case "createdAt":
            return fmtDateTime(r.createdAt);
          case "updatedAt":
            return fmtDateTime(r.updatedAt);
          default:
            return "";
        }
      }),
    );

    const csv = buildCsv(headers, rows);
    const ts = format(new Date(), "yyyyMMdd_HHmmss", { locale: ja });
    downloadCsv(`roles_${ts}.csv`, csv);
  }, [filteredData, table, columnLabels]);

  const kindText =
    queryState.kinds.length === 0
      ? "種別: すべて"
      : `種別: ${queryState.kinds
          .map(
            (v) =>
              new Map(kindOptions.map((o) => [o.value, o.label])).get(v) ?? v,
          )
          .join(", ")}`;
  const statusText =
    queryState.status === "ALL"
      ? "状態: すべて"
      : queryState.status === "ACTIVE"
        ? "状態: 有効"
        : "状態: 無効";
  const visibleColsText = (
    mounted ? effectiveVisibleColumnIds : (Array.from(allColumnIds) as ColId[])
  )
    .map((id) => columnLabels[id])
    .join(", ");

  const filteredCount = filteredData.length;

  return (
    <div className="space-y-3">
      <DatagridToolbar<ColId>
        q={queryState.q}
        onChangeQ={setQ}
        columnOptions={allColumnIds.map((id) => ({
          value: id,
          label: columnLabels[id],
        }))}
        visibleColumnIds={effectiveVisibleColumnIds}
        onChangeVisibleColumns={setVisibleColumnIds}
        canDownloadData={canDownloadData}
        onDownloadCsv={onDownloadCsv}
        canEditData={canEditData}
        newHref="/masters/roles/new"
      />

      <div className="flex items-center justify-between gap-3">
        <div className="text-sm" data-testid="count">
          表示件数： {filteredCount} 件
        </div>
        <div className="flex max-w-[60%] items-center justify-end gap-2">
          <DatagridSummary
            mounted={mounted}
            roleText={kindText}
            statusText={statusText}
            createdRangeISO={queryState.createdRange}
            updatedRangeISO={queryState.updatedRange}
            createdRange={createdRange}
            updatedRange={updatedRange}
            visibleColsText={visibleColsText}
          />
          <button
            type="button"
            className="text-muted-foreground shrink-0 cursor-pointer text-xs underline"
            onClick={() => {
              setQueryState((s) => ({
                ...s,
                q: "",
                kinds: [],
                status: "ALL",
                createdRange: undefined,
                updatedRange: undefined,
                cols: Array.from(allColumnIds) as ColId[],
              }));
              setPersisted((p) => ({ ...p, pageSize: 20 }));
              table.setPageSize(20);
            }}
            title="全フィルタ解除"
          >
            全フィルタ解除
          </button>
        </div>
      </div>

      <div className="overflow-x-auto rounded-md border pb-1">
        <Table
          className="w-full"
          data-testid="roles-table"
          containerClassName={
            !canDownloadData && !canEditData
              ? "max-h-[calc(100svh_-_244px)] md:max-h-[calc(100svh_-_224px)] overflow-y-auto pb-1"
              : "max-h-[calc(100svh_-_284px)] md:max-h-[calc(100svh_-_224px)] overflow-y-auto pb-1"
          }
        >
          <TableHeader className="bg-muted/60 supports-[backdrop-filter]:bg-muted/60 sticky top-0 z-20 text-xs backdrop-blur">
            {table.getHeaderGroups().map((hg) => (
              <TableRow key={hg.id}>
                {hg.headers.map((header) => (
                  <TableHead
                    key={header.id}
                    style={{ width: header.column.getSize() }}
                  >
                    {header.isPlaceholder
                      ? null
                      : flexRender(
                          header.column.columnDef.header,
                          header.getContext(),
                        )}
                  </TableHead>
                ))}
              </TableRow>
            ))}
          </TableHeader>
          <TableBody>
            {table.getRowModel().rows.length ? (
              table.getRowModel().rows.map((row) => (
                <TableRow
                  key={row.id}
                  data-testid={`row-${(row.original as DepartmentRoleRow).displayId}`}
                >
                  {row.getVisibleCells().map((cell) => (
                    <TableCell
                      key={cell.id}
                      style={{ width: cell.column.getSize() }}
                    >
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext(),
                      )}
                    </TableCell>
                  ))}
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell
                  colSpan={table.getAllColumns().length}
                  className="text-muted-foreground py-10 text-center text-sm"
                >
                  条件に一致するロールが見つかりませんでした。
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>

      <DatagridPagination<DepartmentRoleRow>
        table={table}
        pageSize={table.getState().pagination.pageSize}
        onChangePageSize={(n) => {
          table.setPageSize(n);
          setPersisted((p) => ({ ...p, pageSize: n }));
        }}
      />
    </div>
  );
}

DataTable はユーザ一覧をほぼ踏襲しつつ、URL 名前空間を masters-roles に変更、種別(kind) フィルタ を追加しました。
CSV は可視列のみを出力し、ファイル名は roles_YYYYMMDD_HHmmss.csv です。

Pageファイルの作成

tsx

// src/app/(protected)/masters/roles/page.tsx
import type { Metadata } from "next";
import { SidebarTrigger } from "@/components/ui/sidebar";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import { guardHrefOrRedirect } from "@/lib/auth/guard.ssr";
import { prisma } from "@/lib/database";
import DataTable from "./data-table";
import { columns, type DepartmentRoleRow } from "./columns";

export const metadata: Metadata = {
  title: "ロール一覧",
  description:
    "部署視点でのロール一覧（Role + DepartmentRole）を混在表示。検索/フィルタ/CSV対応",
};

export default async function Page() {
  // 1) SSRガード（viewer には userId / 権限が入る）
  const viewer = await guardHrefOrRedirect("/masters/roles", "/");

  // 2) 自部署ID
  const me = await prisma.user.findUnique({
    where: { id: viewer.userId },
    select: { departmentId: true },
  });
  if (!me?.departmentId) return null;

  // 3) ベースRole（当該部署の override を1件だけ同時取得）
  const base = await prisma.role.findMany({
    where: { isActive: true },
    orderBy: { priority: "asc" },
    select: {
      displayId: true,
      code: true,
      name: true,
      badgeColor: true,
      priority: true,
      canEditData: true,
      canDownloadData: true,
      createdAt: true,
      updatedAt: true,
      departmentRoles: {
        where: { departmentId: me.departmentId, roleId: { not: null } },
        take: 1,
        select: {
          displayId: true,
          isEnabled: true,
          nameOverride: true,
          badgeColorOverride: true,
        },
      },
    },
  });

  // 4) 部署カスタム（roleId == null のみ）
  const customs = await prisma.departmentRole.findMany({
    where: { departmentId: me.departmentId, roleId: null },
    orderBy: { priority: "asc" },
    select: {
      displayId: true,
      code: true,
      name: true,
      badgeColor: true,
      priority: true,
      canEditData: true,
      canDownloadData: true,
      isEnabled: true,
      remarks: true,
      createdAt: true,
      updatedAt: true,
    },
  });

  // 5) UI行へ整形（kind / 実効表示名・色を組み立て）
  const fromRole: DepartmentRoleRow[] = base.map((r) => {
    const ov = r.departmentRoles[0];
    return {
      displayId: r.displayId,
      code: r.code,
      kind: ov ? "override" : "role",
      nameEffective: ov?.nameOverride ?? r.name,
      badgeColorEffective: ov?.badgeColorOverride ?? r.badgeColor ?? null,
      priority: r.priority,
      canEditData: r.canEditData,
      canDownloadData: r.canDownloadData,
      isEnabledInDepartment: ov ? ov.isEnabled : true,
      remarks: null,
      createdAt: r.createdAt,
      updatedAt: r.updatedAt,
    };
  });

  const fromCustom: DepartmentRoleRow[] = customs.map((dr) => ({
    displayId: dr.displayId,
    code: dr.code ?? "",
    kind: "custom",
    nameEffective: dr.name ?? "",
    badgeColorEffective: dr.badgeColor ?? null,
    priority: dr.priority ?? 0,
    canEditData: dr.canEditData ?? false,
    canDownloadData: dr.canDownloadData ?? false,
    isEnabledInDepartment: dr.isEnabled,
    remarks: dr.remarks ?? null,
    createdAt: dr.createdAt,
    updatedAt: dr.updatedAt,
  }));

  const rows: DepartmentRoleRow[] = [...fromRole, ...fromCustom];

  // 6) 種別フィルタ用の選択肢（固定3種）
  const kindOptions = [
    { value: "role", label: "ベース" },
    { value: "override", label: "上書き" },
    { value: "custom", label: "部署ローカル" },
  ] as const;

  return (
    <>
      <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
        <div className="flex items-center gap-2 px-4">
          <SidebarTrigger className="-ml-1" />
          <Separator
            orientation="vertical"
            className="mr-2 data-[orientation=vertical]:h-4"
          />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem className="hidden md:block">
                <BreadcrumbLink href="/masters">マスタ管理</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator className="hidden md:block" />
              <BreadcrumbItem>
                <BreadcrumbPage>ロール一覧</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </div>
      </header>

      <div className="w-full max-w-[1729px] p-4 pt-0">
        <DataTable
          columns={columns}
          data={rows}
          kindOptions={
            kindOptions as unknown as { value: string; label: string }[]
          }
          canDownloadData={viewer.canDownloadData}
          canEditData={viewer.canEditData}
        />
      </div>
    </>
  );
}

上記では、Role と DepartmentRole(custom) を別々に取得し、一覧用 Row 型 DepartmentRoleRow に正規化してから結合しています。
override が存在するベースロールは kind: "override" として表示し、表示名/色/有効 を上書き値で合成します。

動作確認

初期表示：/masters/roles を開くと、部署視点での ベース + 上書き + カスタム が混在表示されます。
フィルタ
- ヘッダの「種別」で ベース/上書き/部署ローカル を複数選択で絞り込み。
- 「状態」で 有効/無効 を切り替え。
- キーワード・日付レンジ（登録/更新）もユーザ一覧と同様に動作。
編集：行頭のアイコンから /masters/roles/[displayId] へ遷移（RL は上書き編集、DR はcustom編集）。
CSV：可視列のみ出力。badge 色や状態などは文字列化されます。
権限制御：canEditData で 「新規登録」 ボタンの表示切替、canDownloadData で CSV ボタンの表示切替。

これで、テナント側の認識に沿った 唯一のロール一覧 が完成です。ユーザ一覧と同じ操作感で運用でき、今後の拡張（列追加・フィルタ拡張）も同じパターンで進められます。

4. まとめと次回予告

今回の記事では、前編で導入した DepartmentRoleテーブル を管理画面から安全に操作できるようにしました。
新規登録・更新・一覧を実装し、部署ごとのロール運用が実務的に可能な状態になりました。

今回実装した機能

今回取り組んだのは、以下の3つの機能です。それぞれ、Server Action と UI を組み合わせて構築しました。

txt

[今回完成した流れ]

新規登録（DepartmentRole.custom）
        ↓
更新（DepartmentRole.update / override 作成・編集）
        ↓
一覧（Role + DepartmentRole を統合表示）

機能ごとの成果を表に整理すると次のようになります。

機能区分	対象	実現内容
新規登録	custom 専用	部署独自ロールを作成。priority ≤ 99 や code重複をUI/DBで二重チェック。
更新	custom / override	customは通常編集、overrideはRoleを上書き。権限なしユーザは参照専用に制御。
一覧	role/custom混在	RoleとDepartmentRoleを統合表示。種別・状態・検索・CSV出力に対応。

部署管理者は「ロール一覧画面がすべて」という認識で運用可能になった
一覧に Role と DepartmentRole が同居することで、override/custom を意識せず直感的に操作できる
権限がないユーザは参照のみ可能となり、誤操作や越権操作を防げる

次回予告：ユーザ管理と実効ロールの統合

次回は、完成した DepartmentRole の仕組みを ユーザ管理画面へ統合 します。
現状、ユーザ登録・更新・一覧・プロフィール表示では Role テーブルの情報を直接参照していますが、これを 実効ロール（Role + DepartmentRole） に切り替えます。

次回「管理画面フォーマット開発編 #9」では、このリファクタリングを詳細に扱い、ユーザ登録・更新・参照のすべてで「実効ロール」が正しく反映される状態を目指します。

参考文献

この記事で利用したライブラリや参考にした公式ドキュメントをまとめます。
実装の正確性・再現性を担保するため、バージョンや用途を明記しています。

UI / フロントエンド関連

ライブラリ	URL	用途
React	https://react.dev/	UI 構築の基盤
Next.js	https://nextjs.org/docs	App Router, SSR/SA 機能の利用
shadcn/ui	https://ui.shadcn.com/	Radix ベースの UI コンポーネント
Tailwind CSS	https://tailwindcss.com/docs	ユーティリティファースト CSS

フォーム / バリデーション関連

ライブラリ	URL	用途
React Hook Form	https://react-hook-form.com/	フォーム管理、入力制御
Zod	https://zod.dev/	スキーマ定義と実行時バリデーション
@hookform/resolvers/zod	https://react-hook-form.com/docs/useform/#resolver	RHF と Zod の統合

データアクセス / バックエンド関連

ライブラリ	URL	用途
Prisma	https://www.prisma.io/docs	ORM、DB アクセス、スキーマと型の自動生成
PostgreSQL	https://www.postgresql.org/docs/	DB。priority 制約や XOR 制約を含む

データグリッド / 一覧表示関連

ライブラリ	URL	用途
@tanstack/react-table	https://tanstack.com/table/v8/docs/guide/introduction	DataTable 実装の基盤
date-fns	https://date-fns.org/	日付処理、フォーマット
react-day-picker	https://react-day-picker.js.org/	日付レンジフィルタ UI

本記事に関連する DELOGs 内記事

以上の資料を参考に、DepartmentRole の 新規登録・更新・一覧表示 を UI/Server Action 両面から実装しました。
次回の記事では、ユーザ管理画面に「実効ロール」を統合していきます。

この記事の執筆・編集担当

松本孝太郎

DELOGs編集部/中年新米プログラマー

ここ数年はReact&MUIのフロントエンドエンジニアって感じでしたが、Next.jsを学んで少しずつできることが広がりつつあります。その実践記録をできるだけ共有していければと思っています。

グローバルで一貫したRoleテーブルを保ちながら、部署ごとにロールをカスタマイズするために「DepartmentRole」テーブルを新設

2025/9/29公開

[管理画面フォーマット開発編 #8 前編] 部署別ロール ─ DepartmentRoleテーブル導入とDB設計のイメージ

[管理画面フォーマット開発編 #7] ユーザ管理UIをDB連携する

ユーザ一覧表示・新規登録・編集フォームをDBと連動させ、ユーザデータを操作できる形へ

2025/9/28公開

[管理画面フォーマット開発編 #6] RBAC調整 ─ ページ単位のアクセス制御を実装する

これまでメニュー表示に適用していたRBACを、各ページのアクセス制御に拡張

2025/9/23公開

[管理画面フォーマット開発編 #6] RBAC調整 ─ ページ単位のアクセス制御を実装するのイメージ

[管理画面フォーマット開発編 #5] ユーザプロフィール更新

プロフィール編集機能を拡張し「アバター削除」「メールアドレス変更新（メールでの本人認証＋管理者承認）」「パスワード変更」を実装

2025/9/21公開

[管理画面フォーマット開発編 #4] Server Actionで実装するアバター画像のアップロードと表示

ユーザープロフィールに欠かせないアバター画像を、安全にアップロード・表示する仕組みを構築

2025/9/16公開

管理画面フォーマット開発編 #8 後編部署別ロール ─ 管理UIとServer Action実装