管理画面フォーマット開発編 #9 後編
部署別ロール対応 ─ プロフィール管理の改修

DepartmentRole導入に伴い、プロフィール管理で「実効ロール」を参照するように修正と一部ついでの変更

初回公開日2025/10/8

最終更新日2025/11/6

0. はじめに

今回の記事では、管理画面フォーマット開発編の部署別ロール対応の続きとして、プロフィール管理の改修を取り上げます。

前回記事 「【管理画面フォーマット開発編 #9 前編】部署別ロール対応 ─ ユーザ管理の改修」 までに部署単位で権限を持つ DepartmentRole テーブルを導入し、ユーザ作成・編集画面などの基本機能を更新しました。しかし、プロフィール画面（ログイン中の本人情報表示）だけは、旧構成のまま Role テーブル依存となっており、実際の運用とは齟齬が生じています。

そこで今回は、以下の3点を中心に改修を行います。

実効ロール（effectiveRole）対応
モック依存のロール表示を廃止し、AuthUserSnapshot に格納される実際の部署別ロール情報を表示に反映します。
Phone欄の追加とフォーム統一
Userテーブルで追加された電話番号カラムをプロフィール編集フォームに統合し、氏名・電話・アバターをまとめて更新できるようにします。
メール変更申請一覧の再構築
管理者が承認・却下できる「メール変更申請一覧」を新たに設置し、ユーザ一覧やロール一覧と同等のフィルタ・データテーブル仕様へ統一します。

これらに加え、すべての更新処理を 「本人のみが操作できる構成」 に見直し、セキュリティ面の安全性を確保しました。

本記事は、これまでに構築したユーザ管理・ロール管理の仕組みを踏まえ、プロフィール画面を現実的な運用レベルに仕上げる調整となります。

読み進める前に

本記事は「管理画面フォーマット開発編」の一部として進めています。
前回の記事までで DepartmentRole のDB設計とUI操作 が完成していることを前提としています。
まだ読んでいない方は、下記を先に参照してください。

管理画面フォーマット開発編の完成形（デモとGithubリポジトリ）

「管理画面フォーマット開発編 #1〜#11」の記事内容についてのデモページです。下記より確認可能です。
管理画面フォーマット開発編の完成版デモ： https://delogs.jp/demo/dashboard-format

Githubにも公開済みです。
管理画面フォーマット開発編のGihubリポジトリ： https://github.com/delogs-jp/dashboard-format-fullstack

1. 改修対象の整理 ─ プロフィールまわりの課題点

プロフィール画面は、ユーザが自分の情報を確認・更新するための中核的なページですが、DepartmentRole導入後も旧構成のままで動作しており、いくつかの不整合が生じていました。ここでは、主な課題を整理しておきます。

まず大きな違いは、ロール情報の参照元です。これまでのプロフィールは Role テーブルのみを前提としており、部署ごとに異なる権限や名称を反映できませんでした。そのため、DepartmentRoleによる上書き設定が行われても、プロフィール上では旧名称・旧権限のまま表示されてしまうという問題がありました。

さらに、開発初期の構成を引きずって、いくつかの項目ではモックデータを使った暫定実装が残っていました。特に getRoleBadgeProps() によるロールバッジ表示は、実データを無視して固定値を出力する状態だったため、今回の改修で完全に除去する必要がありました。

また、Userテーブルに追加された phone カラムに対応しておらず、本人の電話番号を確認・変更できない点も実務上の問題でした。
同様に、メール変更申請は本人申請までの機能しかなく、承認側の画面はモックデータを使った未完成のままでした。これでは管理者が変更申請を処理できません。

こうした状態を一覧でまとめると、次のようになります。

区分	現状の問題点	改修方針
ロール表示	`Role` テーブルのみ参照。部署ごとの上書き（DepartmentRole）が反映されない。	`AuthUserSnapshot` の effectiveRole（実効ロール）を参照し、部署別ロールを正しく表示。
モック依存	`getRoleBadgeProps()` などダミーデータを使用。	すべて削除し、実際のスナップショット情報を表示に使用。
Phone欄	`User.phone` が追加されたがフォーム未対応。	フォームに電話番号入力欄を追加し、RHF＋Zodで双方向バインド。
メール変更申請一覧	モックデータ表示のみで、承認・却下機能なし。	`EmailChangeRequest` テーブルと連携し、フィルタ・ページング付きの一覧を新設。
セキュリティ	一部Actionでユーザ識別が曖昧。	`lookupSessionFromCookie()` を起点に、すべて「本人限定」更新へ統一。

これらの課題はどれも個別には小さな修正に見えますが、まとめて対応することで、プロフィール画面全体がDepartmentRole対応の「本番仕様」に進化します。
次章では、この改修方針に基づいてUI・スキーマ・サーバアクションをどのように調整したのかを詳しく見ていきます。

2. プロフィール画面の改修内容

プロフィール画面は、DepartmentRole 導入に合わせて「実効ロールの表示」「Phone項目の追加」「SSR構成の統一」「モック依存の排除」を行いました。
スナップショットは最小限のまま維持し、表示専用の情報（実効ロール名／バッジ色／電話番号／アバターURL）は サーバアクションで都度取得 する方針です。

サーバアクション新設 ─ 実効ロール名・色＋電話番号をDBから取得

表示専用の情報をスナップショットへ追加せず、都度DBから集約 するためにサーバアクションを新設しました。
departmentRoleId があれば部署ロール、なければグローバルロール経由で getEffectiveRole() を用いて名称と色を解決します。

// src/app/_actions/profile/get-profile-detail.ts
"use server";

import { prisma } from "@/lib/database";
import { lookupSessionFromCookie } from "@/lib/auth/session";
import { getEffectiveRole } from "@/lib/auth/effective-role";

export type MyProfileDetail = {
  name: string;
  email: string;
  phone: string | null;
  currentAvatarUrl: string | null;
  effectiveRoleName: string;
  effectiveBadgeColor: string | null;
};

export async function getMyProfileDetail() {
  const session = await lookupSessionFromCookie();
  if (!session.ok) return { ok: false, message: "未ログインです" };

  const me = await prisma.user.findUnique({
    where: { id: session.userId },
    select: {
      id: true,
      name: true,
      email: true,
      phone: true,
      avatar: true,
      departmentId: true,
      roleId: true,
      departmentRoleId: true,
    },
  });
  if (!me) return { ok: false, message: "ユーザーが見つかりません" };

  const eff = await getEffectiveRole(
    me.departmentRoleId
      ? { departmentId: me.departmentId, departmentRoleId: me.departmentRoleId }
      : { departmentId: me.departmentId, roleId: me.roleId! },
  );
  if (!eff) return { ok: false, message: "実効ロールの取得に失敗しました" };

  return {
    ok: true,
    value: {
      name: me.name,
      email: me.email,
      phone: me.phone ?? null,
      currentAvatarUrl: me.avatar ? `/avatar/${me.id}` : null,
      effectiveRoleName: eff.name,
      effectiveBadgeColor: eff.badgeColor ?? null,
    },
  };
}

これにより、スナップショットを肥大化させることなく、表示専用の情報だけをサーバ側で安全に集約できます。

スキーマの整合 ─ profileUpdateSchema に phone を追加

クライアント/サーバで同じバリデーションを使うため、profileUpdateSchema に phone を追加します。
また、File は Node 環境で未定義になり得るため、環境分岐 で安全に取り扱います。

/** ── プロフィール（本人用）: displayId は UI に出さない。role は「表示のみ」 ── */
export const profileUpdateSchema = z.object({
  name: nameSchema, 
  phone: phoneSchema, // 追加
  avatarFile: z
    .instanceof(File)
    .optional()
    .refine(
      (file) =>
        !file ||
        ["image/png", "image/jpeg", "image/webp", "image/gif"].includes(
          file.type,
        ),
      "画像は png / jpeg / webp / gif のいずれかにしてください",
    )
    .refine(
      (file) => !file || file.size <= MAX_IMAGE_MB * 1024 * 1024,
      `画像サイズは ${MAX_IMAGE_MB}MB 以下にしてください`,
    ),
});

phoneSchemaはすでにユーザ登録で作成済みなので、profileUpdateSchemaにこれを割り当ててphoneを追加します。

SSR構成への統一 ─ page.tsx の改修

次に、他ページと同様に page.tsx 側で必要データをSSR取得し、初期データを Client コンポーネントへ渡す構成に変更しました。

tsx

// src/app/(protected)/profile/page.tsx
import type { Metadata } from "next";
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 { getMyProfileDetail } from "@/app/_actions/profile/get-profile-detail"; // 追加
import Client from "./client";

export const metadata: Metadata = {
  title: "プロフィール",
  description:
    "ユーザのプロフィール（氏名・アバター）を編集し、メール／パスワード変更画面へ遷移",
};

export default async function Page() {
  await guardHrefOrRedirect("/profile", "/");

  // ★ ここで実効ロールと電話番号取得
  const res = await getMyProfileDetail();
  if (!res.ok || !res.value) return null;

  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="/profile">プロフィール</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 initial={res.value} />
      </div>
    </>
  );
}

Client の責務整理 ─ 初期値はSSRから、更新はスナップショット再取得

初期表示は SSR の初期値を使い、更新時のみ refreshAuthSnapshotAction() で Context を再同期します。
updateProfileAction は従来どおり FormData 送信ですが、Phone も送る ように変更します。

tsx

// src/app/(protected)/profile/page.tsx
import type { Metadata } from "next";
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 { getMyProfileDetail } from "@/app/_actions/profile/get-profile-detail"; // 追加
import Client from "./client";

export const metadata: Metadata = {
  title: "プロフィール",
  description:
    "ユーザのプロフィール（氏名・アバター）を編集し、メール／パスワード変更画面へ遷移",
};

export default async function Page() {
  await guardHrefOrRedirect("/profile", "/");

  // ★ ここで実効ロールと電話番号取得
  const res = await getMyProfileDetail();
  if (!res.ok || !res.value) return null;

  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="/profile">プロフィール</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 initial={res.value} />
      </div>
    </>
  );
}

Form の修正 ─ 実効ロール表示＋Phone 入力の追加

モック依存（getRoleBadgeProps など）を排除し、バッジはサーバアクションの返却値で描画します。
phone をフォームに追加し、zodResolver(profileUpdateSchema) で検証を統一しました。

// src/components/profile/profile-form.tsx（変更箇所抜粋）

// ─ 冒頭省略

// import type { Role } from "@/lib/roles/schema";  // 削除
// import { getRoleBadgeProps } from "@/lib/roles/mock"; // 削除

// ─ 省略

export type ProfileInitial = {
  name: string;
  email: string;
  phone?: string; // 追加
  //  roleCode: Role["code"]; // 削除
  currentAvatarUrl?: string;
  effectiveRoleName: string;
  effectiveBadgeColor: string | null;
};

// ─ 省略

export default function ProfileForm({
  initial,
  onSubmit,
  onCancel,
  onNavigateEmail,
  onNavigatePassword,
  onDelete,
}: Props) {
  const form = useForm<ProfileUpdateValues>({
    resolver: zodResolver(profileUpdateSchema),
    defaultValues: {
      name: initial.name,
      avatarFile: undefined,
      phone: initial.phone, // 追加
    },
    mode: "onBlur",
  });

// ─ 省略

return (
    <Form {...form}>
      <form onSubmit={handleSubmit} data-testid="profile-form">
        <Card className="w-full rounded-md">
          <CardHeader className="-mt-2 -mb-4">
            {/* 初期値を利用してラベル表示 */}
            <Badge
              className="ml-auto inline-block w-[85px] px-2 py-1 text-center"
              style={{
                backgroundColor: initial.effectiveBadgeColor ?? "#666",
                color: "#fff",
                border: "none",
              }}
            >
              {initial.effectiveRoleName}
            </Badge>
            {/*  削除 → <RoleBadgeRow label={badge.label} badgeStyle={badge.style} /> */}
          </CardHeader>

          <CardContent className="space-y-6 pt-1">
            <AvatarField
              currentAvatarUrl={initial.currentAvatarUrl}
              previewUrl={previewUrl}
              onPick={async (file) => {
                form.clearErrors("avatarFile");
                if (!file) {
                  form.setValue("avatarFile", undefined, { shouldDirty: true });
                  setPreviewUrl(null);
                  return;
                }
                const pixelError = await validateImagePixels(file);
                if (pixelError) {
                  form.setError("avatarFile", {
                    type: "validate",
                    message: pixelError,
                  });
                  form.setValue("avatarFile", undefined, { shouldDirty: true });
                  setPreviewUrl(null);
                  return;
                }
                form.setValue("avatarFile", file, {
                  shouldDirty: true,
                  shouldValidate: true, // zod の容量/拡張子チェックも走る
                });
                setPreviewUrl(URL.createObjectURL(file));
                void form.trigger("avatarFile");
              }}
              onClear={() => {
                form.setValue("avatarFile", undefined, { shouldDirty: true });
                form.clearErrors("avatarFile");
                setPreviewUrl(null);
              }}
              onDelete={onDelete} // ← ここで渡す
              footerMessage={<FormMessage data-testid="avatar-error" />}
            />

            <NameField />
            <PhoneField /> {/* ← 追加 */}
            <EmailRow email={initial.email} onNavigate={onNavigateEmail} />
            <PasswordRow onNavigate={onNavigatePassword} />
          </CardContent>

// ─ 省略

// 電話番号 （ファイル末尾に追加）
function PhoneField() {
  return (
    <FormField
      name="phone"
      render={({ field }) => (
        <FormItem>
          <FormLabel className="font-semibold">電話番号</FormLabel>
          <FormControl>
            <Input
              {...field}
              value={field.value ?? ""}
              placeholder="090-xxxx-xxxx"
              aria-label="電話番号"
              autoComplete="off"
              data-testid="phone"
            />
          </FormControl>
          <FormMessage data-testid="phone-error" />
        </FormItem>
      )}
    />
  );
}

更新用サーバアクションをPhone対応に拡張

現行 client.tsx は updateProfileAction と deleteOwnAvatarAction を src/app/_actions/profile/avatar.ts から import しています。
FormData に phone を追加したため、avatar.ts 側で phone を受け取り、DB更新へ反映 させます。

// src/app/_actions/profile/avatar.ts（変更箇所のみ抜粋）

// ─省略

export async function updateProfileAction(
  formData: FormData,
): Promise<ActionResult> {
  // 1) 認証
  const session = await lookupSessionFromCookie();
  if (!session.ok) return { ok: false, message: "認証が必要です" };

  // 2) クライアント側と同様のzodスキーマで name / phone / avatarFile を検証（UIの改ざん対策）
  const name = String(formData.get("name") ?? "");
  const phoneRaw = formData.get("phone"); // ★追加
  const avatarFile = formData.get("avatarFile");
  const input = {
    name,
    phone: typeof phoneRaw === "string" ? phoneRaw : undefined, // ★追加： 空なら undefined
    avatarFile: avatarFile instanceof File ? avatarFile : undefined,
  };

// ─省略

  // 5) DB更新（トランザクション）
  await prisma.$transaction(async (tx) => {
    // 旧ファイル名の取得（新規保存があるときのみ）
    if (newAvatarFileName) {
      const current = await tx.user.findUnique({
        where: { id: session.userId },
        select: { avatar: true },
      });
      oldAvatarFileName = current?.avatar ?? null;
    }

    await tx.user.update({
      where: { id: session.userId },
      data: {
        name: parsed.data.name,
        phone: parsed.data.phone, // ★ 追加
        ...(newAvatarFileName ? { avatar: newAvatarFileName } : {}),
      },
    });
  });

// ─省略

これで、client.tsx が FormData に phone を入れて送った場合でも、avatar.ts 側で正しく検証・更新されます。
Phone は任意項目のため、空文字は送らず undefined 扱いで更新しない運用にしています（UI側で未入力なら fd.set("phone", ...) を省略）。

以上で、プロフィール画面は DepartmentRole を正しく反映し、Phone 項目の入出力にも対応しました。
SSR 構成の統一により、他ページとの実装様式も揃っています。次章では、メール変更申請一覧の刷新へ進みます。

3. メール変更申請一覧の再構築

狙いは、ユーザ一覧で整えた DataGrid 体験（高機能フィルタ、URL/Storageへの状態保存、CSVダウンロード）を、メール変更申請一覧にも水平展開することです。あわせて、一覧上に「申請者の実効ロール（名称＋バッジ色）」を表示し、承認・却下の運用判断をしやすくします。

方針はユーザ一覧に寄せます：

SSRで部署スコープの一覧データを構築 → Clientへ初期データを渡す
フィルタはURL（＋sessionStorage）に保持、列表示も変更可能
CSVは可視列のみをエクスポート（日時は安定フォーマット）
申請の承認/却下はサーバアクションで実行し、結果はローカル状態更新（再描画）

改修の目的と全体構成

改修の主な目的は以下の通りです。

txt

┌───────────────────────────────┐
│ メール変更申請一覧：改修の目的                               │
├───────────────────────────────┤
│ ① 一覧に存在する状態のみをフィルタ候補にする                 │
│ ② フィルタ初期状態を「全選択」扱いにして直感的に操作可能に   │
│ ③ 状態ラベルを UI / CSV / フィルタ間で一元化                │
│ ④ Popover フィルタの検索ボックスを正しく機能させる          │
│ ⑤ TableMeta 型で状態関連のメタデータを型安全に扱う           │
└───────────────────────────────┘

これらを実現するために、以下の4層構造で改修を行いました。

層	ファイル	主な修正内容
1. データ取得層	`page.tsx`	一覧データから動的に `statusOptions` を生成
2. 状態定義層	`status-multi-select.tsx`	`StatusMultiSelect` を RolesChecklist 準拠に刷新
3. 表示制御層	`data-table.tsx` / `columns.tsx`	状態フィルタの反映・ボタン活性化ロジックを修正
4. 型安全層	`table-meta.d.ts`	メール変更申請専用メタを拡張（`statusOptions` など）

この章では、上記の4層に沿って、ソースコードと構造を順に解説していきます。

page.tsx の更新 ─ 状態選択肢を動的生成

このステップでは、一覧のデータ取得と同時に 「登場した状態だけを選択肢として生成」 するように修正しました。
従来は StatusMultiSelect 内で固定的に "PENDING", "APPROVED" などを定義していましたが、
実際のデータに存在しないステータスまでフィルタ候補に出てしまうというUX上の問題がありました。

今回の改修では、page.tsx 側で Prisma の検索結果から status の集合を生成し、
それを statusOptions として DataTable に渡すように変更しています。

txt

┌─────────────────────────────────────┐
│ 改修ポイント概要                    │
├─────────────────────────────────────┤
│ ① Prisma で取得した行（rows）から   │
│    status のユニーク値を抽出         │
│ ② STATUS_LABEL と突き合わせて      │
│    value / label のペア配列を生成   │
│ ③ DataTable に props として渡す     │
└─────────────────────────────────────┘

これにより、テーブル内に存在しない状態（たとえば EXPIRED が0件など）は
フィルタ選択肢に表示されなくなり、実データとUIの整合性が保たれるようになりました。

また、後続の StatusMultiSelect コンポーネントではこの statusOptions を
RolesChecklist と同じ構造（{ value, label }[]）として受け取る前提に統一しています。

tsx

// src/app/(protected)/users/email-change-requests/page.tsx
import type { Metadata } from "next";
import { prisma } from "@/lib/database";
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 * as punycode from "punycode/";
import { getEffectiveRole } from "@/lib/auth/effective-role";
import type { EmailChangeRow } from "./data-table"; // 後述の型に合わせる

import DataTable from "./data-table";
import { columns } from "./columns";
import { STATUS_LABEL, type ReqStatus } from "./status-multi-select";

export const metadata: Metadata = {
  title: "メールアドレス変更申請 | 管理画面レイアウト【DELOGs】",
  description: "本人確認済み(VERIFIED)のメール変更申請を承認/却下します。",
};

export default async function Page() {
  // ← 返り値（viewer）を受ける
  const viewer = await guardHrefOrRedirect("/users/email-change-requests", "/");
  // 1) 自分の部署特定
  const me = await prisma.user.findUnique({
    where: {
      id: /* guard 内の viewer.userId を使う */ (
        await guardHrefOrRedirect("/users/email-change-requests", "/")
      ).userId,
    },
    select: { departmentId: true },
  });
  if (!me) return null;

  // 2) 申請データ取得（部署内・未削除ユーザに紐づく申請）
  const raw = await prisma.emailChangeRequest.findMany({
    where: { departmentId: me.departmentId },
    orderBy: { createdAt: "desc" },
    select: {
      id: true,
      createdAt: true, // = requestedAt 相当
      processedAt: true,
      processedBy: true,
      status: true,
      oldEmailPuny: true,
      newEmailPuny: true,
      user: {
        select: {
          displayId: true,
          name: true,
          roleId: true,
          departmentRoleId: true,
        },
      },
    },
  });

  // 3) 実効ロールを付与
  const rows: EmailChangeRow[] = await Promise.all(
    raw.map(async (r) => {
      const eff = r.user.departmentRoleId
        ? await getEffectiveRole({
            departmentId: me.departmentId,
            departmentRoleId: r.user.departmentRoleId,
          })
        : r.user.roleId
          ? await getEffectiveRole({
              departmentId: me.departmentId,
              roleId: r.user.roleId,
            })
          : null;

      return {
        id: r.id,
        requestedAt: r.createdAt,
        processedAt: r.processedAt ?? null,
        processedBy: r.processedBy ?? null,
        accountId: r.user.displayId, // 表示IDを「アカウントID」列に流用 or 別途取得
        userName: r.user.name,
        oldEmail: punycode.toUnicode(r.oldEmailPuny),
        newEmail: punycode.toUnicode(r.newEmailPuny),
        status: r.status,
        roleCode: eff?.code ?? "",
        roleName: eff?.name ?? "(不明)",
        roleBadgeColor: eff?.badgeColor ?? null,
      };
    }),
  );

  // 4) ロール選択肢（登場ロールのみ）
  const roleOptions = Array.from(
    new Map(
      rows.map((r) => [r.roleCode, { value: r.roleCode, label: r.roleName }]),
    ).values(),
  );

  // 5) 状態選択肢（登場状態のみ）
  const statusOptions = Array.from(new Set(rows.map((r) => r.status))).map(
    (s) => ({ value: s as ReqStatus, label: STATUS_LABEL[s as ReqStatus] }),
  );

  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="/users">ユーザ管理</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator className="hidden md:block" />
              <BreadcrumbItem>
                <BreadcrumbPage>メールアドレス変更申請</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </div>
      </header>

      <div className="container p-4 pt-0">
        {/* canDownloadData を渡す */}
        <DataTable
          columns={columns}
          roleOptions={roleOptions}
          statusOptions={statusOptions}
          data={rows}
          canDownloadData={viewer.canDownloadData}
        />
      </div>
    </>
  );
}

このように、page.tsx は一覧全体の「選択肢生成の起点」となり、
状態フィルタとロールフィルタの双方で共通の設計を採用できるようになりました。
次の節では、この statusOptions を実際に受け取る StatusMultiSelect の改修内容を解説します。

StatusMultiSelect コンポーネントの改修

この節では、状態フィルタの中心となる StatusMultiSelect コンポーネントの改修について解説します。
従来の実装は 固定配列 ALL_STATUSES に依存しており、一覧に存在しない状態まで選択肢として表示されていました。
また、検索ボックスが動作しない・初期選択状態が直感的でないといった問題もありました。

今回の改修では、RolesChecklist の構造をベースに書き直し、
データ駆動型の選択肢生成・検索・全選択制御を実現しています。

txt

┌────────────────────────────────────┐
│ 改修ポイント概要                   │
├────────────────────────────────────┤
│ ① props で渡される `options` を   │
│    一覧データに合わせて動的生成     │
│ ② "PENDING" / {value, label} どちらも│
│    受け取れるように正規化処理を追加 │
│ ③ 検索ワード（needle）でコード・ラベル│
│    の両方をフィルタ対象に             │
│ ④ 全選択時は空配列 `[]` に畳む     │
│    （URLクエリ短縮 & 一貫性確保）   │
│ ⑤ `footer` スロットで「閉じる」ボタン│
│    等を外部から挿入可能に            │
└────────────────────────────────────┘

特に重要なのは「optionsの正規化」と「全選択時の空配列化」です。
これにより、他のフィルタ（ロールや日付レンジ）と同様の扱いが可能になり、
DataTable との同期処理が簡潔に保たれます。

// src/app/(protected)/users/email-change-requests/status-multi-select.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 type ReqStatus =
  | "PENDING"
  | "VERIFIED"
  | "APPROVED"
  | "REJECTED"
  | "EXPIRED";

export const STATUS_LABEL: Record<ReqStatus, string> = {
  PENDING: "未認証",
  VERIFIED: "本人確認済",
  APPROVED: "承認済",
  REJECTED: "却下",
  EXPIRED: "期限切れ",
};

export const ALL_STATUSES: ReqStatus[] = [
  "PENDING",
  "VERIFIED",
  "APPROVED",
  "REJECTED",
  "EXPIRED",
];

export function StatusMultiSelect({
  value,
  onChange,
  options,
  footer,
}: {
  /** 選択中。空配列は「すべて」を意味する（URL/状態同期の表現） */
  value: ReqStatus[];
  onChange: (next: ReqStatus[]) => void;
  /** 一覧に“登場した”状態のみ（value/label） */
  options: Array<ReqStatus | { value: ReqStatus; label: string }>;
  footer?: React.ReactNode;
}) {
  // 検索ワード
  const [needle, setNeedle] = React.useState("");

  // ★ options の正規化（"PENDING" | {value:"PENDING",label:"未認証"} どちらでもOKに）
  const normalized = React.useMemo(
    () =>
      options.map((o) =>
        typeof o === "string"
          ? { value: o, label: STATUS_LABEL[o] }
          : { value: o.value, label: o.label ?? STATUS_LABEL[o.value] },
      ),
    [options],
  );
  // 見かけ上の選択集合（空=すべて → 全要素を選択表示）
  const all = React.useMemo(() => normalized.map((o) => o.value), [normalized]);
  const effectiveSelected = React.useMemo<ReqStatus[]>(
    () => (value.length ? value : all),
    [value, all],
  );

  const toggle = (s: ReqStatus) => {
    const set = new Set(effectiveSelected);
    if (set.has(s)) {
      set.delete(s);
    } else {
      set.add(s);
    }
    const next = Array.from(set) as ReqStatus[];
    onChange(next.length === all.length ? [] : next); // 全選択→ [] に畳む
  };

  const allSelected = effectiveSelected.length === all.length;

  // フィルタリング（コード/ラベルの両方を対象に）
  const filtered = React.useMemo(() => {
    const q = needle.trim().toLowerCase();
    if (!q) return normalized;
    return normalized.filter(
      (o) =>
        o.value.toLowerCase().includes(q) || o.label.toLowerCase().includes(q),
    );
  }, [needle, normalized]);

  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 s = o.value;
              const checked = effectiveSelected.includes(s);
              return (
                <CommandItem
                  key={s}
                  onSelect={() => toggle(s)}
                  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([])}
            disabled={allSelected}
            className="cursor-pointer"
          >
            すべて
          </Button>
          <Button
            type="button"
            variant="ghost"
            size="sm"
            onClick={() => onChange([])} // 実質“すべて”と同義にして運用簡略化
            className="cursor-pointer"
          >
            クリア
          </Button>
        </div>
        <div className="flex items-center">{footer}</div>
      </div>
    </div>
  );
}

この新構成により、状態フィルタは次のように動作します。

操作	動作内容
初期状態	一覧に存在する全ての状態が選択扱い（＝すべて）
状態をクリック	該当項目のみ選択／解除
検索欄に入力	コード・ラベル両方から一致候補を絞り込み
「すべて」ボタン	全状態を選択（空配列に変換）
「クリア」ボタン	全選択を解除（空配列として保持）

次の節では、この StatusMultiSelect を利用して実際に状態フィルタを反映させる
DataTable 側の修正点を見ていきます。

DataTable の修正 ─ 状態フィルタとCSV出力の統合

この節では、DataTable に「状態」フィルタを統合し、CSV 出力でも日本語ラベルが出るように整えたポイントをまとめます。実装は URL 同期ベース（useDatagridQueryState）で、ユーザ一覧と同じ操作感に統一しています。

変更概要（要点）

状態フィルタのデータ駆動化
page.tsx で作った statusOptions（実データに登場した状態のみ）を DataTable に渡し、ここから 全状態集合（allStatusCodes） を生成。クエリ側の statuses が空配列なら「すべて」を意味し、フィルタには allStatusCodes を使います。
ローカル絞り込みに一本化
行データ（localRows）を取り込み後、検索語・ロール・状態・日付レンジの すべてをクライアント側で合成フィルタ。
状態は statuses.length ? statuses : allStatusCodes という解釈で UX を単純化。
列ヘッダのフィルタ UI と同期
columns.tsx から table.options.meta を介して statusOptions / statuses / setStatuses を受け、ヘッダのポップオーバーから 直接 StatusMultiSelect が開く（ロールと同様の挙動）。
サマリ表示の日本語化
DatagridSummary に渡す statusText は statuses.map(statusToLabel) に変更し、"PENDING" → "未認証" のように日本語で表示。
CSV の日本語ラベル化
エクスポート時に status 列は statusToLabel(r.status) を使い、CSV でも日本語が出力されるように統一。

Before / After（ふるまいの差分）

項目	修正前	修正後
状態の選択肢	固定集合（存在しない状態も表示）	一覧に登場した状態のみを表示
初期選択	明確でない／要クリック	空配列＝すべて扱い（実質全選択）
絞り込み処理	サーバ＆クライアントの折衷	クライアント一括（検索・ロール・状態・日付を合成）
サマリ表示	英字コード表示	日本語ラベル表示
CSV 出力	英字コード出力	日本語ラベル出力

実装のポイント

allStatusCodes … statusOptions からコード配列を作成（＝一覧に登場した状態の全集合）
statusesForFilter … queryState.statuses.length ? queryState.statuses : allStatusCodes
フィルタ本体 … statusSet.has(r.status)（ほか、ロール・日付・キーワードと合成）
サマリ … queryState.statuses.map(statusToLabel).join(", ")（空なら「状態: すべて」）
CSV … statusToLabel(r.status) を使用して日本語化

tsx

// src/app/(protected)/users/email-change-requests/data-table.tsx
"use client";

import * as React from "react";
import type {
  ColumnDef,
  SortingState,
  VisibilityState,
} from "@tanstack/react-table";
import {
  getCoreRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
  flexRender,
} from "@tanstack/react-table";
import { Table } from "@/components/datagrid/table-container";
import {
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { toast } from "sonner";
import type { DateRange } from "react-day-picker";
import { format } from "date-fns";
import { ja } from "date-fns/locale";
import { DatagridToolbar } from "@/components/datagrid/datagrid-toolbar";
import { DatagridSummary } from "@/components/datagrid/datagrid-summary";
import { DatagridPagination } from "@/components/datagrid/datagrid-pagination";
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 type { RoleOption } from "@/components/filters/roles-checklist";
import {
  approveEmailChangeRequestAction,
  rejectEmailChangeRequestAction,
} from "@/app/_actions/users/email-change-requests";
import { STATUS_LABEL, type ReqStatus } from "./status-multi-select";

export type EmailChangeRow = {
  id: string;
  requestedAt: Date;
  verifiedAt?: Date | null;
  processedAt?: Date | null;
  processedBy?: string | null;
  accountId: string;
  userName: string;
  oldEmail: string; // ASCII
  newEmail: string; // ASCII
  status: ReqStatus;
  // ★ 追加：ロール表示
  roleCode: string;
  roleName: string;
  roleBadgeColor: string | null;
};

type Props = {
  columns: ColumnDef<EmailChangeRow, unknown>[];
  data: EmailChangeRow[];
  roleOptions: RoleOption[];
  canDownloadData?: boolean;
  statusOptions: { value: ReqStatus; label: string }[];
};

const statusToLabel = (s: ReqStatus) => STATUS_LABEL[s] ?? s;

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

  // 列ID（actions / q 除外）
  const allColumnIds = React.useMemo(
    () =>
      [
        "requestedAt",
        "accountId",
        "userName",
        "roleCode",
        "oldEmail",
        "newEmail",
        "status",
        "processedAt",
        "processedBy",
      ] as const,
    [],
  );
  type ColId = (typeof allColumnIds)[number];

  // URL同期（メール申請一覧用のネームスペース）
  const [queryState, setQueryState] = useDatagridQueryState(
    "email-reqs",
    {
      q: "",
      roles: [] as string[], // 空＝すべて
      statuses: [] as ReqStatus[], // 空＝すべて
      requestedRange: undefined as { from?: string; to?: string } | undefined,
      processedRange: undefined as { from?: string; to?: string } | undefined,
      cols: Array.from(allColumnIds) as ColId[],
    },
    { persistKey: "email-reqs" },
  );

  // ページサイズは localStorage
  const [persisted, setPersisted] = usePersistentDatagridState("email-reqs", {
    pageSize: 20,
  });

  // 並び順
  const [sorting, setSorting] = React.useState<SortingState>([
    { id: "requestedAt", desc: true },
  ]);

  // 役割（空配列＝すべて）
  const allRoleCodes = React.useMemo(
    () => roleOptions.map((o) => o.value),
    [roleOptions],
  );
  const rolesForFilter = queryState.roles.length
    ? queryState.roles
    : allRoleCodes;

  // 状態（空配列＝すべて）
  const allStatusCodes = React.useMemo(
    () => statusOptions.map((o) => o.value),
    [statusOptions],
  );
  const statusesForFilter = queryState.statuses.length
    ? queryState.statuses
    : allStatusCodes;

  // 日付レンジ
  const requestedRange = React.useMemo(
    () => toDateRange(queryState.requestedRange),
    [queryState.requestedRange],
  );
  const processedRange = React.useMemo(
    () => toDateRange(queryState.processedRange),
    [queryState.processedRange],
  );

  // setter 群
  const setQ = (v: string) => setQueryState((s) => ({ ...s, q: v }));
  const setRoles = (next: string[]) =>
    setQueryState((s) => ({ ...s, roles: next }));
  const setStatuses = (next: ReqStatus[]) =>
    setQueryState((s) => ({ ...s, statuses: next }));
  const setRequestedRange = (r?: DateRange) =>
    setQueryState((s) => ({ ...s, requestedRange: fromDateRange(r) }));
  const setProcessedRange = (r?: DateRange) =>
    setQueryState((s) => ({ ...s, processedRange: fromDateRange(r) }));
  const setVisibleColumnIds = (ids: ColId[]) =>
    setQueryState((s) => ({ ...s, cols: ids }));

  // ローカル行（承認/却下後に更新）
  const [localRows, setLocalRows] = React.useState<EmailChangeRow[]>(
    () => data,
  );
  React.useEffect(() => setLocalRows(data), [data]);

  // 承認
  const onApprove = React.useCallback(
    async (id: string) => {
      const fd = new FormData();
      fd.set("id", id);
      const res = await approveEmailChangeRequestAction(fd);
      if (!res.ok) {
        toast.error(res.message ?? "承認に失敗しました");
        return;
      }
      // ローカル即時反映
      setLocalRows((prev) =>
        prev.map((r) =>
          r.id === id
            ? {
                ...r,
                status: "APPROVED",
                processedAt: new Date(),
                processedBy: "(you)",
              }
            : r,
        ),
      );
      toast.success("申請を承認しました");
    },
    [setLocalRows],
  );

  // 却下
  const onReject = React.useCallback(
    async (id: string) => {
      const fd = new FormData();
      fd.set("id", id);
      const res = await rejectEmailChangeRequestAction(fd);
      if (!res.ok) {
        toast.error(res.message ?? "却下に失敗しました");
        return;
      }
      setLocalRows((prev) =>
        prev.map((r) =>
          r.id === id
            ? {
                ...r,
                status: "REJECTED",
                processedAt: new Date(),
                processedBy: "(you)",
              }
            : r,
        ),
      );
      toast.message("申請を却下しました");
    },
    [setLocalRows],
  );
  // 列可視（初回SSR一致のためマウント後に反映）
  const effectiveVisibleColumnIds: ColId[] = mounted
    ? (queryState.cols as ColId[])
    : (Array.from(allColumnIds) as ColId[]);
  const columnVisibility = React.useMemo<VisibilityState>(() => {
    const set = new Set(effectiveVisibleColumnIds);
    return Object.fromEntries(
      (["actions", "q", ...allColumnIds] as const).map((id) => [
        id,
        id === "actions" ? true : set.has(id as ColId),
      ]),
    ) as VisibilityState;
  }, [effectiveVisibleColumnIds, allColumnIds]);
  // フィルタ（ローカル）
  const filteredData = React.useMemo(() => {
    const needle = queryState.q.trim().toLowerCase();
    const roleSet = new Set(rolesForFilter);
    const statusSet = new Set(statusesForFilter);
    const inRange = (d?: Date | null, r?: DateRange) => {
      if (!d) return false;
      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 localRows.filter((r) => {
      const passQ =
        !needle ||
        `${r.accountId} ${r.userName} ${r.oldEmail} ${r.newEmail}`
          .toLowerCase()
          .includes(needle);
      const passRole = roleSet.has(r.roleCode);
      const passStatus = statusSet.has(r.status);
      const passRequested = inRange(r.requestedAt, requestedRange);
      const passProcessed = r.processedAt
        ? inRange(r.processedAt, processedRange)
        : !processedRange?.from && !processedRange?.to;
      return passQ && passRole && passStatus && passRequested && passProcessed;
    });
  }, [
    localRows,
    queryState.q,
    rolesForFilter,
    statusesForFilter,
    requestedRange,
    processedRange,
  ]);

  // テーブル
  const table = useReactTable({
    data: filteredData,
    columns,
    state: { sorting, columnVisibility },
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    initialState: { pagination: { pageIndex: 0, pageSize: 20 } },
    meta: {
      onApprove,
      onReject,
      // フィルタUIが読むメタ
      roleOptions,
      roles: rolesForFilter,
      setRoles,
      statusOptions,
      statuses: queryState.statuses,
      setStatuses,
      requestedRange,
      setRequestedRange,
      processedRange,
      setProcessedRange,
    },
  });

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

  // CSV（可視列のみ）
  const columnLabels = React.useMemo(
    () =>
      ({
        requestedAt: "申請日時",
        accountId: "アカウントID",
        userName: "ユーザ名",
        roleCode: "ロール",
        oldEmail: "旧メール",
        newEmail: "新メール",
        status: "状態",
        processedAt: "処理日時",
        processedBy: "処理者",
      }) as const,
    [],
  );
  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 "requestedAt":
            return fmtDateTime(r.requestedAt);
          case "accountId":
            return r.accountId;
          case "userName":
            return r.userName;
          case "roleCode":
            return r.roleName || r.roleCode;
          case "oldEmail":
            return r.oldEmail;
          case "newEmail":
            return r.newEmail;
          case "status":
            return statusToLabel(r.status);
          case "processedAt":
            return r.processedAt ? fmtDateTime(r.processedAt) : "";
          case "processedBy":
            return r.processedBy ?? "";
          default:
            return "";
        }
      }),
    );
    const csv = buildCsv(headers, rows);
    const ts = format(new Date(), "yyyyMMdd_HHmmss", { locale: ja });
    downloadCsv(`email_change_requests_${ts}.csv`, csv);
  }, [filteredData, table, columnLabels]);

  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}
      />

      <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={
              queryState.roles.length === 0
                ? "ロール: すべて"
                : `ロール: ${queryState.roles
                    .map(
                      (v) =>
                        new Map(roleOptions.map((o) => [o.value, o.label])).get(
                          v,
                        ) ?? v,
                    )
                    .join(", ")}`
            }
            statusText={
              queryState.statuses.length === 0
                ? "状態: すべて"
                : `状態: ${queryState.statuses.map(statusToLabel).join(", ")}`
            }
            createdRangeISO={queryState.requestedRange}
            updatedRangeISO={queryState.processedRange}
            createdRange={requestedRange}
            updatedRange={processedRange}
            visibleColsText={effectiveVisibleColumnIds
              .map((id) => columnLabels[id])
              .join(", ")}
          />
          <button
            type="button"
            className="text-muted-foreground shrink-0 cursor-pointer text-xs underline"
            title="全フィルタ解除"
            onClick={() => {
              setQueryState((s) => ({
                ...s,
                q: "",
                roles: [],
                statuses: [],
                requestedRange: undefined,
                processedRange: undefined,
                cols: Array.from(allColumnIds) as ColId[],
              }));
              setPersisted((p) => ({ ...p, pageSize: 20 }));
              table.setPageSize(20);
            }}
          >
            全フィルタ解除
          </button>
        </div>
      </div>

      <div className="overflow-x-auto rounded-md border pb-1">
        <Table className="w-full" data-testid="email-change-table">
          <TableHeader className="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.id}`}>
                  {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<EmailChangeRow>
        table={table}
        pageSize={table.getState().pagination.pageSize}
        onChangePageSize={(n) => {
          table.setPageSize(n);
          setPersisted((p) => ({ ...p, pageSize: n }));
        }}
      />
    </div>
  );
}

運用メモ

「全フィルタ解除」ボタンは statuses を空配列に戻すため、再び「すべて」扱い に戻ります。
ページサイズは usePersistentDatagridState で維持し、初回レンダリング差を避けるために mounted フラグ で反映タイミングを制御しています。
columns.tsx の「状態」ヘッダは statusOptions の長さと選択数の比較で ボタンの活性/不活性スタイル を判定しています（ロールと同じロジック）。

columns.tsx の更新 ─ 状態フィルタUIの再構成

この節では、テーブル列定義 columns.tsx の更新内容を解説します。
ここでの主な目的は、状態フィルタのUIをロールフィルタと統一的な構成に再整理すること です。

従来の列定義は、ヘッダタイトルを文字列で直接指定するだけのシンプルな構造でしたが、
今回の改修では、状態・ロール・日付といった複合的な絞り込み操作をすべて
同じUIフレーム（Popover + Command）で扱うようにしました。

txt

┌──────────────────────────────────────────┐
│ 改修後のヘッダ構造                      │
├──────────────────────────────────────────┤
│ HeaderWithSort      … ソート専用         │
│ HeaderWithFilter    … フィルタ兼ソート用 │
│ ├─ PopoverTrigger（SlidersVertical）     │
│ ├─ PopoverContent（StatusMultiSelect等） │
│ └─ SortButton（任意）                   │
└──────────────────────────────────────────┘

状態列 (status) の部分では、StatusMultiSelect を HeaderWithFilter 内に組み込み、
table.options.meta に登録された statusOptions / statuses / setStatuses を参照するようにしました。
そのため、ヘッダポップオーバーから直接選択状態を変更でき、
他のフィルタ（ロール・日付レンジ）とまったく同じ操作感を実現しています。

tsx

// src/app/(protected)/users/email-change-requests/columns.tsx
"use client";

import type { ColumnDef, HeaderContext } from "@tanstack/react-table";
import { format } from "date-fns";
import { ja } from "date-fns/locale";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import * as punycode from "punycode/";
import type { EmailChangeRow } from "./data-table";
import { SlidersVertical } from "lucide-react";
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} from "@/components/ui/popover";
import * as PopoverPrimitive from "@radix-ui/react-popover";
import { DateRangePicker } from "@/components/filters/date-range-picker";
import { SortButton } from "@/components/datagrid/sort-button";
import { StatusMultiSelect, type ReqStatus } from "./status-multi-select";
import { RolesChecklist } from "@/components/filters/roles-checklist";

function fmt(d?: Date | null) {
  if (!d) return "-";
  return format(d, "yyyy/MM/dd HH:mm", { locale: ja });
}

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>
  );
}

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>
  );
}

export const columns: ColumnDef<EmailChangeRow>[] = [
  {
    accessorKey: "requestedAt",
    header: (ctx) => {
      const table = ctx.table;
      const r = table.options.meta?.requestedRange;
      const setR: (
        r: import("react-day-picker").DateRange | undefined,
      ) => void = table.options.meta?.setRequestedRange ?? (() => {});
      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>
      );
    },
    cell: ({ row }) => fmt(row.original.requestedAt),
  },
  {
    accessorKey: "accountId",
    header: (ctx) => <HeaderWithSort title="アカウントID" ctx={ctx} />,
  },
  {
    accessorKey: "userName",
    header: (ctx) => <HeaderWithSort title="ユーザ名" ctx={ctx} />,
  },
  // ★ 追加：申請者ロール（バッジ色つき）
  {
    accessorKey: "roleCode",
    header: (ctx) => {
      const table = ctx.table;
      const roleOptions = table.options.meta?.roleOptions ?? [];
      const roles =
        table.options.meta?.roles ?? roleOptions.map((o) => o.value);
      const setRoles = table.options.meta?.setRoles ?? (() => {});
      const active = roles.length !== roleOptions.length;

      return (
        <HeaderWithFilter
          title="ロール"
          active={active}
          contentClassName="w-[340px]"
          trailing={
            <SortButton
              column={ctx.column}
              aria-label="ロールでソート"
              title="ロールでソート"
            />
          }
        >
          <RolesChecklist
            value={roles}
            onChange={setRoles}
            options={roleOptions}
            footer={
              <PopoverPrimitive.Close asChild>
                <Button
                  variant="ghost"
                  size="sm"
                  type="button"
                  className="cursor-pointer"
                >
                  閉じる
                </Button>
              </PopoverPrimitive.Close>
            }
          />
        </HeaderWithFilter>
      );
    },
    size: 60,
    cell: ({ row }) => {
      const { roleCode, roleName, roleBadgeColor } = row.original;
      const style = roleBadgeColor
        ? { backgroundColor: roleBadgeColor, color: "#fff", border: "none" }
        : undefined;
      return (
        <Badge
          variant={roleBadgeColor ? "secondary" : "default"}
          style={style}
          title={roleCode}
        >
          {roleName}
        </Badge>
      );
    },
  },
  {
    accessorKey: "oldEmail",
    header: (ctx) => <HeaderWithSort title="旧メール" ctx={ctx} />,
    cell: ({ row }) => punycode.toUnicode(row.original.oldEmail),
  },
  {
    accessorKey: "newEmail",
    header: (ctx) => <HeaderWithSort title="新メール" ctx={ctx} />,
    cell: ({ row }) => (
      <span title={row.original.newEmail}>
        {punycode.toUnicode(row.original.newEmail)}
      </span>
    ),
  },
  {
    accessorKey: "status",
    header: (ctx) => {
      const table = ctx.table;
      const statusOptions = table.options.meta?.statusOptions ?? [];
      const rawSelected = table.options.meta?.statuses ?? []; // URL/状態同期の生値（[]=すべて）
      const all = statusOptions.map((o) => o.value);
      const statuses = rawSelected.length ? rawSelected : all; // UI上の見かけの選択
      const setStatuses: (next: ReqStatus[]) => void =
        table.options.meta?.setStatuses ?? (() => {});
      const active = (rawSelected?.length ?? 0) > 0;
      return (
        <HeaderWithFilter title="状態" active={active}>
          <StatusMultiSelect
            options={statusOptions}
            value={statuses}
            onChange={setStatuses}
            footer={
              <PopoverPrimitive.Close asChild>
                <Button
                  variant="ghost"
                  size="sm"
                  type="button"
                  className="cursor-pointer"
                >
                  閉じる
                </Button>
              </PopoverPrimitive.Close>
            }
          />
        </HeaderWithFilter>
      );
    },
    cell: ({ row }) => {
      const s = row.original.status;
      if (s === "APPROVED") return <Badge>承認済</Badge>;
      if (s === "REJECTED") return <Badge variant="destructive">却下</Badge>;
      if (s === "VERIFIED") return <Badge variant="outline">本人確認済</Badge>;
      if (s === "PENDING") return <Badge variant="outline">未認証</Badge>;
      if (s === "EXPIRED") return <Badge variant="secondary">期限切れ</Badge>;
      return <Badge variant="secondary">{s}</Badge>;
    },
  },
  {
    accessorKey: "processedAt",
    header: (ctx) => {
      const table = ctx.table;
      const r = table.options.meta?.processedRange;
      const setR: (
        r: import("react-day-picker").DateRange | undefined,
      ) => void = table.options.meta?.setProcessedRange ?? (() => {});
      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>
      );
    },
    cell: ({ row }) => fmt(row.original.processedAt),
  },
  {
    accessorKey: "processedBy",
    header: (ctx) => <HeaderWithSort title="処理者" ctx={ctx} />,
  },

  {
    id: "actions",
    header: "操作",
    enableSorting: false,
    enableResizing: false,
    cell: ({ row, table }) => {
      const r = row.original;
      const canOperate = r.status === "VERIFIED";
      return (
        <div className="flex gap-2">
          <Button
            size="sm"
            disabled={!canOperate}
            onClick={() => table.options.meta?.onApprove?.(r.id, r)}
            data-testid={`approve-btn-${r.id}`}
            className="cursor-pointer"
          >
            承認
          </Button>
          <Button
            size="sm"
            variant="outline"
            disabled={!["PENDING", "VERIFIED"].includes(r.status)}
            onClick={() => table.options.meta?.onReject?.(r.id, r)}
            data-testid={`reject-btn-${r.id}`}
            className="cursor-pointer"
          >
            却下
          </Button>
        </div>
      );
    },
  },
  // hidden 検索列（q）
  {
    id: "q",
    accessorFn: (r) =>
      `${r.accountId} ${r.userName} ${r.oldEmail} ${r.newEmail}`.toLowerCase(),
    enableHiding: true,
    enableSorting: false,
    enableResizing: false,
    size: 0,
    header: () => null,
    cell: () => null,
  },
];

また、今回のリファクタリングでは以下のポイントを統一的に整理しています：

項目	改修意図
`HeaderWithFilter` コンポーネント化	Popover + SortButton の重複排除とUI統一
状態列の `active` 判定	選択配列 `rawSelected` の長さで制御（空配列＝全選択扱い）
ポップオーバーのフッター構造	`PopoverPrimitive.Close` 経由で「閉じる」ボタンを柔軟に配置
ロール列との整合	`RolesChecklist` と同一の呼び出し構成に変更
hidden列（q）追加	テーブル検索用列を明示的に分離し、UI制御と検索ロジックを分離

これにより、列ヘッダのソート・フィルタ・検索がすべて同じ設計思想で動作するようになりました。
UI操作における一貫性が向上し、後続の一覧画面でも同様のヘッダ構成を簡単に再利用できるようになっています。

table-meta.d.ts の型拡張

この節では、テーブル列ヘッダから扱うフィルタ群（ロール／状態／日付レンジ）を 型で安全に受け渡し できるよう、@tanstack/table-core の TableMeta を拡張した点をまとめます。
ポイントは次の2つです。

状態フィルタ専用の型（ReqStatus）を導入し、statusOptions / statuses / setStatuses を型安全に。
期間フィルタの分離（申請日時 requestedRange・処理日時 processedRange）で表現を明確化。

これにより、columns.tsx 側で table.options.meta を参照するだけで、各フィルタの現在値と setter を 型補完つき で扱えるようになりました。

// src/types/table-meta.d.ts
import "@tanstack/table-core";
import type { ReqStatus } from "@/app/(protected)/users/email-change-requests/status-multi-select";

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;

    // ★ 追加：メール変更申請一覧用
    // 状態（複数選択）
    statusOptions?: Array<{ value: ReqStatus; label: string }>;
    statuses?: ReqStatus[];
    setStatuses?: (next: ReqStatus[]) => void;

    // 日付レンジ（申請日時・処理日時）
    requestedRange?: import("react-day-picker").DateRange | undefined;
    setRequestedRange?: (
      r: import("react-day-picker").DateRange | undefined,
    ) => void;

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

export {};

拡張後の TableMeta で利用できる主なプロパティは次のとおりです。

分類	プロパティ	型	役割
操作	`onApprove` / `onReject`	`(id: string, row?: TData) => void \| Promise<void>`	申請の承認・却下ハンドラ
ロール	`roleOptions`	`{ value: string; label: string }[]`	表示するロール選択肢
ロール	`roles` / `setRoles`	`string[]` / `(next: string[]) => void`	選択中ロールとその更新
状態	`statusOptions`	`{ value: ReqStatus; label: string }[]`	一覧に登場した状態だけを選択肢として表示
状態	`statuses` / `setStatuses`	`ReqStatus[]` / `(next: ReqStatus[]) => void`	選択中状態（空配列＝全選択）とその更新
日付	`requestedRange` / `setRequestedRange`	`DateRange \| undefined` / `(r: DateRange \| undefined) => void`	申請日時レンジの保持／更新
日付	`processedRange` / `setProcessedRange`	`DateRange \| undefined` / `(r: DateRange \| undefined) => void`	処理日時レンジの保持／更新

補足：

ReqStatus は status-multi-select.tsx からインポートして再利用しています。型を一元化することで、CSV 出力 や DatagridSummary 表示 など状態名を扱う箇所も同じ型で統一でき、表記揺れや渡し間違いを防げます。
「空配列＝全選択」という既存のURL同期ルールに合わせるため、UI 側（StatusMultiSelect）は全選択状態を検出したら 空配列に畳む 実装にしています。TableMeta の型がその前提を明示しているため、呼び出し側の実装も迷いません。

サーバアクションの修正

承認／却下のサーバアクションは、実効ロール（priority）基準に統一し、同一部署ガードと競合対策を明示した構成に整理しました。従来の role.code === "ADMIN" 判定は廃止し、getEffectiveRole による priority >= 100 を管理者しきい値とします。

さらに、対象申請の departmentId と操作者の部署一致を確認し、processedBy には実ユーザ名を保存するように変更しています。なお、一覧取得は page.tsx のサーバ側で直読に切り替えたため、listEmailChangeRequestsAction は削除しました。

// src/app/_actions/users/email-change-requests.ts
"use server";

import { prisma } from "@/lib/database";
import { lookupSessionFromCookie } from "@/lib/auth/session";
import { sendMail } from "@/lib/mailer";
import { emailChangeApprovedText } from "@/lib/email/templates";
import { z } from "zod";
import { getEffectiveRole } from "@/lib/auth/effective-role";

type ActionResult<T = unknown> =
  | { ok: true; data?: T }
  | { ok: false; message: string };

// ADMIN 相当のしきい値（update-user.ts と同一）
const ADMIN_PRIORITY_THRESHOLD = 100;

const idSchema = z.object({ id: z.uuid() });

/** 呼び出しユーザが ADMIN（実効 priority>=100）かつ同一部署かを確認 */
async function requireAdminSameDepartment(
  userId: string,
  departmentId: string,
) {
  const me = await prisma.user.findUnique({
    where: { id: userId },
    select: {
      id: true,
      name: true,
      isActive: true,
      departmentId: true,
      roleId: true,
      departmentRoleId: true,
    },
  });
  if (!me || !me.isActive)
    return { ok: false as const, message: "ユーザが無効化されています。" };

  if (me.departmentId !== departmentId)
    return { ok: false as const, message: "越権操作です。" };

  // 実効ロールを取得
  let eff = null;
  if (me.departmentRoleId) {
    eff = await getEffectiveRole({
      departmentId: me.departmentId,
      departmentRoleId: me.departmentRoleId,
    });
  } else if (me.roleId) {
    eff = await getEffectiveRole({
      departmentId: me.departmentId,
      roleId: me.roleId,
    });
  }
  if (!eff || eff.priority < ADMIN_PRIORITY_THRESHOLD)
    return { ok: false as const, message: "権限がありません。" };

  // 呼び出し側で processedBy に使うので name も返す
  return { ok: true as const, meName: me.name ?? "ADMIN" };
}

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

  // 2) 入力検証
  const parsed = idSchema.safeParse({ id: formData.get("id") });
  if (!parsed.success) return { ok: false, message: "IDが不正です" };

  // 3) 対象取得
  const req = await prisma.emailChangeRequest.findUnique({
    where: { id: parsed.data.id },
    select: {
      id: true,
      status: true,
      userId: true,
      departmentId: true,
      oldEmailPuny: true,
      newEmailPuny: true,
      user: { select: { email: true } },
    },
  });
  if (!req) return { ok: false, message: "申請が見つかりません" };

  let operatorName;
  // 4) ADMIN & 同部署チェック（実効ロール）
  {
    const g = await requireAdminSameDepartment(ses.userId, req.departmentId);
    if (!g.ok) return g;
    // 承認者名に利用
    operatorName = g.meName;
  }

  if (req.status !== "VERIFIED")
    return { ok: false, message: "本人確認済みの申請のみ承認できます" };

  // 5) 競合対策: 条件付き更新 + 反映
  const result = await prisma.$transaction(async (tx) => {
    const updated = await tx.emailChangeRequest.updateMany({
      where: { id: req.id, status: "VERIFIED" },
      data: {
        status: "APPROVED",
        processedAt: new Date(),
        processedBy: operatorName,
      },
    });
    if (updated.count !== 1)
      return { ok: false as const, message: "競合が発生しました" };

    // ユーザのメールを更新（punycode ASCII で保存する設計）
    await tx.user.update({
      where: { id: req.userId },
      data: { email: req.newEmailPuny },
    });

    // 任意: 他の保留申請を自動クローズ
    await tx.emailChangeRequest.updateMany({
      where: {
        userId: req.userId,
        id: { not: req.id },
        status: { in: ["PENDING", "VERIFIED"] },
      },
      data: {
        status: "REJECTED",
        processedAt: new Date(),
        processedBy: "system",
      },
    });

    return { ok: true as const };
  });

  if (!result.ok) return result;

  // 6) 承認通知メール（失敗しても処理は成功）
  try {
    await sendMail({
      to: req.newEmailPuny,
      subject: "【DELOGs】メールアドレス変更が承認されました",
      text: emailChangeApprovedText({ newEmail: req.newEmailPuny }),
    });
  } catch (e) {
    console.error("[mail] approve notification failed:", e);
  }

  return { ok: true };
}

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

  // 2) 入力検証
  const parsed = idSchema.safeParse({ id: formData.get("id") });
  if (!parsed.success) return { ok: false, message: "IDが不正です" };

  // 3) 対象取得
  const req = await prisma.emailChangeRequest.findUnique({
    where: { id: parsed.data.id },
    select: { id: true, status: true, departmentId: true },
  });
  if (!req) return { ok: false, message: "申請が見つかりません" };

  // 4) ADMIN & 同部署チェック（実効ロール）
  let operatorName;
  {
    const g = await requireAdminSameDepartment(ses.userId, req.departmentId);
    if (!g.ok) return g;
    operatorName = g.meName;
  }

  if (!["PENDING", "VERIFIED"].includes(req.status))
    return { ok: false, message: "未処理の申請のみ却下できます" };

  // 5) 競合対策: 条件付き更新
  const updated = await prisma.emailChangeRequest.updateMany({
    where: { id: req.id, status: { in: ["PENDING", "VERIFIED"] } },
    data: {
      status: "REJECTED",
      processedAt: new Date(),
      processedBy: operatorName,
    },
  });
  if (updated.count !== 1) return { ok: false, message: "競合が発生しました" };

  return { ok: true };
}

今回の修正では、最初に Zod スキーマを z.uuid() に揃え、ID 検証を明確化しています。権限ガードは小さな関数 requireAdminSameDepartment に切り出し、(1) 有効ユーザであること 、 (2) 同一部署であること 、 *(3) 実効 priority がしきい値以上 *、の3点を順に確認します。承認処理はトランザクション内で 条件付き更新（updateMany） を使い、状態が変わっていないことを WHERE 句で保証して競合を検知します。メール送信は DB コミット後に実行し、失敗してもビジネス処理の成功を優先する設計です。却下処理も同様に、ガード → 状態チェック → 条件付き更新の流れで統一しました。

フロントエンド側の新しい状態フィルタとローカル反映ロジック（DataTable）と整合が取れるよう、成功時は status・processedAt・processedBy をその場で上書きできる構造のままにしています。これにより、一覧は 即時反映 しつつ、サーバ側は レースセーフ に保てます。

以上で、メールアドレス変更申請一覧の変更の完成です。

4. まとめと次回予告

今回の記事では、プロフィール機能とメール変更申請一覧の双方を 部署別ロール対応（DepartmentRole） に統一し、実運用レベルの権限・UI整合を実現しました。

特に、メール変更申請一覧はこれまでのモック構成から脱却し、ユーザ一覧と同等の DataGrid 体験（フィルタ・CSV・即時反映） を備えるまでに進化しています。
状態フィルタは StatusMultiSelect の刷新により、表示データから動的に選択肢を生成する仕組みへと改善され、ロール・日付レンジと同様の UX が得られるようになりました。
また、サーバアクション側も getEffectiveRole() を使って 実効 priority に基づくセキュアな判定に統一され、一覧・操作・認可がすべて一貫したレイヤ構造で動作するよう整理されています。

txt

─────────────────────────────
🧩 改修後の構成イメージ
─────────────────────────────
Profile: SSR + FormData更新 + snapshot再同期
 ├─ getMyProfileDetail() …… 実効ロール・電話番号を取得
 ├─ updateProfileAction() … 氏名・電話・アバター更新
 └─ profileUpdateSchema …… クライアント/サーバ共通バリデーション

EmailChangeRequests:
 ├─ page.tsx ………………… 登場状態を抽出し statusOptions を生成
 ├─ StatusMultiSelect …… データ駆動型フィルタ（検索＋全選択対応）
 ├─ DataTable ……………… 状態・ロール・日付・検索を合成フィルタ
 ├─ columns.tsx ………… HeaderWithFilter 統一構成でUI統合
 └─ email-change-requests.ts … 実効priorityで承認/却下を処理
─────────────────────────────

これにより、管理画面内の「ユーザ」「ロール」「メール申請」の3領域がすべて DepartmentRoleを起点とした一貫構造 に統合されました。
単に見た目やデータ構造を揃えただけでなく、ロール優先度・部署スコープ・操作ガードの概念が同じレイヤで機能するよう整理されたことで、以後の機能拡張もスムーズに行えます。

🔜 次回予告：メニューのDB連携（部署別ロールに応じた動的メニュー）

次回は、画面左のメニューを DB管理 に切り替え、DepartmentRole と実効 priority に沿って 動的に構成されるナビゲーション を実装します。メニュー階層・表示順・アイコン・遷移先・表示条件（権限/Feature Flag）をテーブルで管理し、SSR 時に最適化された形で配信する方針です。
あわせて「現在地のハイライト」「パンくず自動生成」「非許可パスの抑止」を同一スキーマ上で整合させ、運用中でも SQL だけで差し替え可能 なメニュー運用を目指します。

参考文献

種別	資料名	URL
ライブラリ公式	TanStack Table v8 Documentation	https://tanstack.com/table/v8
ライブラリ公式	Zod – TypeScript-first schema validation	https://zod.dev/
ライブラリ公式	React Hook Form – Resolver Integration	https://react-hook-form.com/docs/useform/#resolver
UIコンポーネント	shadcn/ui – Components	https://ui.shadcn.com/
デザイン参考	Tailwind CSS Documentation	https://tailwindcss.com/docs
データ管理	Prisma ORM Documentation	https://www.prisma.io/docs
認証基盤	Next.js App Router / Server Actions	https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions
実装参考	date-fns – Modern JavaScript Date Utility Library	https://date-fns.org/
文字コード	RFC 3492: Punycode: A Bootstring encoding of Unicode for Internationalized Domain Names	https://datatracker.ietf.org/doc/html/rfc3492
メール送信	Nodemailer Documentation	https://nodemailer.com/about/
その他	DELOGs 技術ブログ（プロフィール・権限管理シリーズ）	https://delogs.jp/next-js/backend

今回の改修では、特に TanStack Table と shadcn/ui の柔軟な拡張性を活かし、DataGrid の状態同期・複合フィルタ・Popover UI を統一設計として再構築しました。
加えて、Prisma・Zod・Server Action の組み合わせにより、スキーマ定義からUI操作までを型安全に貫く実装パターン を確立できました。
こうした技術選定は、DELOGs 全体の「構成を共通化しながら進化できる管理画面」方針を支える基盤となっています。

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

松本孝太郎

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

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

この記事の更新履歴