管理画面フォーマット開発編 #11
パスワード再発行依頼とメールテンプレート統合

管理画面で受け付けたパスワード再発行依頼を、Server Action・Shadcn/uiのデータテーブル・メール送信を組み合わせて運用可能なワークフローに統合

初回公開日2025/10/15

最終更新日2025/10/15

0. はじめに

本記事では、「パスワードを忘れた」ユーザーからの再発行依頼を管理画面で受け付け、処理・通知まで完結させる仕組み を構築します。 【管理画面フォーマット制作編 #8】ログイン後404ページ + ログイン前のパスワード忘れ導線UI で作成したUIのDB連携でもあります。

同時に、これまで個別ファイルに分散していたメール本文・件名の定義を src/lib/email/templates.ts に一元化 し、運用時の変更・再利用を容易にします。

txt

[Before]
フォーム送信 → 管理者宛メール（個別コード）
→ 管理者が手動で再発行・返信

[After]
フォーム送信 → PasswordRequest に記録
→ 管理者が一覧画面から「再発行／拒否」
→ 自動でパスワード再生成＋本人へ通知
→ 管理者メール・本人メールも templates.ts に統合

上の図は、従来のメール連携を「DBとServer Actionを軸とした運用フロー」へ置き換えるイメージです。
フォーム送信時はユーザーの存在を秘匿したまま依頼を受付け、管理画面では部署単位のADMIN権限が安全に処理できる構成とします。

本記事で到達するゴール

PasswordRequest テーブルを新設し、依頼の受付・処理履歴をDBで一元管理
フロント側から部署コード＋メール＋備考を送信し、部署ADMINへ自動通知
管理画面 /users/password-request にて一覧・フィルタ・CSV出力を実装
「再発行」「拒否」操作をServer Actionで実装し、argon2による安全なパスワード再生成
すべてのメール送信処理を email/templates.ts に集約し、件名・本文を共通フォーマット化

読み進める前に

本記事は「管理画面フォーマット開発編」の第11回にあたります。
これまでの #8〜#10 でDB連携・部署別ロール・メニュー制御が完了しており、本章ではその基盤上で ユーザー運用に不可欠な「パスワード再発行ワークフロー」 を追加していきます。

主な変更ファイルと目的

区分	ファイル / モジュール	目的
DB定義	`schema.prisma`	PasswordRequest モデル新設・Enum追加
公開フォーム	`auth/password-forgot.ts` / `client.tsx`	依頼受付と管理者メール通知
管理UI	`/users/password-request/*`	一覧・フィルタ・再発行／拒否ボタン
Server Actions	`users/password-requests.ts`	再発行・拒否処理 + 通知メール
メールテンプレート	`email/templates.ts`	件名＋本文を統一形式で管理
既存アクション改修	各Server Action (`email-change.ts`等)	templates統一APIに差し替え

この後の章では、DB定義からServer Action、一覧UI、テンプレート統合までを順に解説していきます。
まずは PasswordRequest テーブルの追加 から進めます。

⸻

1. PasswordRequestテーブルの追加 ─ DB設計とモデル定義

今回の最初のステップは、パスワード再発行依頼を保存・管理するための専用テーブル を新設することです。
これまで「依頼フォーム → メール通知」のみで完結していた流れを、Prisma上の正式なエンティティとして永続化 できるようにします。

txt

[Before]
フォーム送信 → メール送信（即時処理）
→ 履歴は残らず、依頼の重複や処理状況を管理できない

[After]
フォーム送信 → PasswordRequest に記録
→ 管理者が一覧画面で「再発行」「拒否」操作
→ 履歴・処理者・IP/UAまでDBで一元管理

モデル設計のポイント

今回の追加は schema.prisma における 3箇所の改修＋1モデルの新設 で構成されます。

変更箇所	対応内容	目的
Enum追加	`PasswordRequestStatus` を定義	`PENDING / ISSUED / REJECTED` の状態管理
Department	`passwordRequests` リレーションを追加	部署ごとの依頼を一覧化可能に
User	`passwordRequests` リレーションを追加	特定ユーザの依頼履歴参照に対応
新モデル	`PasswordRequest` モデルを新設	再発行依頼・処理・監査情報を保存

これにより、部署単位で依頼を集約し、ユーザ単位で履歴を追跡できる構成となります。
部署コードやメールアドレスは文字列そのまま保存し、認証可否に関係なくリクエストを記録できる点もポイントです（存在秘匿性を維持）。

モデル全体の構造

prisma/schema.prismaに下記のように追記してします。

prisma

// ==============================
// Enums
// ==============================
// 追加
enum PasswordRequestStatus {
  PENDING   // 受付済（未処理）
  ISSUED    // 管理者が再発行を実行
  REJECTED  // 管理者が依頼を却下
}

prisma

model Department {
  // ...既存フィールド...

  /// 逆リレーション: 部署に紐づく許可ドメイン一覧
  allowedDomains         AllowedEmailDomain[] 
  /// 逆リレーション: 部署配下ユーザーのメール変更申請
  emailChangeRequests    EmailChangeRequest[] 
  /// 逆リレーション: 部署ごとのメニュー上書き
  departmentMenus        DepartmentMenu[]
  // 追加: パスワード再発行依頼（この部署宛）
  passwordRequests       PasswordRequest[]

  // ...既存index...
}

prisma

model User {
  // ...既存フィールド...

  /// 逆リレーション: このユーザーが出したメール変更申請
  emailChangeRequests    EmailChangeRequest[]
  // 追加: このユーザーに紐づくパスワード再発行依頼（同定できた場合）
  passwordRequests       PasswordRequest[]

  // ...既存unique/index...
}

prisma

// ==============================
// PasswordRequest（新規）
// - 公開フォームからの“再発行依頼”を保持
// - 入力生値（部署コード）を保持しつつ、解決できれば departmentId / userId を持つ
// ==============================
model PasswordRequest {
  id        String   @id @default(uuid())

  // 依頼入力
  departmentCodeInput String           // フォーム入力の部署コード（生値）
  emailPuny           String           // 依頼メール（punycode ASCII）
  note                String?
  ip                  String?          // 任意: 監査
  userAgent           String?          // 任意: 監査

  // 解決結果（NULL許容：存在秘匿のため、特定できないケースを許容）
  departmentId String?
  userId       String?

  // 状態管理
  status      PasswordRequestStatus @default(PENDING)
  processedAt DateTime?             @db.Timestamptz
  processedBy String?               // 承認者/却下者の表示名

  // 監査
  createdAt   DateTime @default(now()) @db.Timestamptz
  updatedAt   DateTime @updatedAt      @db.Timestamptz

  // リレーション
  department  Department? @relation(fields: [departmentId], references: [id], onDelete: Restrict)
  user        User?       @relation(fields: [userId], references: [id], onDelete: Restrict)

  // 索引
  @@index([departmentId, emailPuny])
  @@index([departmentCodeInput])
  @@index([status])
  @@index([createdAt])
}

上記のように、PasswordRequest モデルは入力値・解決結果・処理結果の3レイヤ構造を意識しています。
「存在するかどうか」を利用者に明示しないため、departmentId と userId は NULL許容 とし、該当部署・ユーザが見つからなかった場合でもDB記録は残す設計です。

Prismaマイグレーション

DB定義を追加後、以下のコマンドでスキーマ変更を反映します。

zsh

npx prisma migrate dev --name add-password-request
npx prisma generate

これにより、PasswordRequest テーブルがDBに作成され、同時に Prisma Client も新しいモデル定義を反映します。
次章では、このテーブルを利用して 公開フォームから依頼を受け付ける処理 を実装していきます。

2. 公開フォームからの再発行依頼を処理する

公開フォーム（未ログイン）からの「パスワード再発行依頼」を DBへ記録 し、部署が特定できる場合のみ管理者へ メール通知 するフローに差し替えます。
存在秘匿のため、入力が正しくDBが生きている限り 常に成功レスポンスを返す 挙動に統一します（入力不正や障害時のみエラー）。

txt

[Flow]
Client(Form) ──▶ passwordForgotAction(values)
                  ├─ validate & normalize (Zod)
                  ├─ resolve department by code (nullable)
                  ├─ resolve user by email+dept (nullable)
                  ├─ create PasswordRequest(PENDING)  ← 履歴を保存
                  └─ notify admins in department (if resolved)
                        ↑ 件名/本文は templates に集約

サーバアクション（新規作成）

// src/app/_actions/auth/password-forgot.ts
"use server";

import { prisma } from "@/lib/database";
import { headers } from "next/headers";
import { sendMail } from "@/lib/mailer";
import { z } from "zod";
import { accountIdSchema, emailSchema } from "@/lib/users/schema";
import { adminPasswordForgotNotify } from "@/lib/email/templates";

/**
 * 入力（サーバ側）：trim など最終正規化を足す
 * - 形式検証は users/schema の共通スキーマを利用
 */
const serverSchema = z
  .object({
    accountId: accountIdSchema,
    email: emailSchema,
    note: z.string().optional(),
  })
  .transform((v) => ({
    ...v,
    accountId: v.accountId.trim(),
    email: v.email.trim(), // emailSchemaでpuny化済み
    note: v.note?.trim() || "",
  }));

export type PasswordForgotResult = { ok: true } | { ok: false };

const ADMIN_PRIORITY_THRESHOLD = 100;

/**
 * パスワード再発行依頼
 * - 常に存在秘匿：部署/ユーザの有無に関係なく {ok:true} を返す
 * - 入力不正 or DB障害のみ {ok:false}
 * - 部署が解決できた場合は、部署内の“ADMIN相当（priority>=100）”全員へメール通知
 */
export async function passwordForgotAction(
  values: unknown,
): Promise<PasswordForgotResult> {
  const parsed = serverSchema.safeParse(values);
  if (!parsed.success) return { ok: false };

  const { accountId, email, note } = parsed.data;

  const h = await headers();
  const ip = h.get("x-real-ip") || h.get("x-forwarded-for") || undefined;
  const ua = h.get("user-agent") || undefined;

  try {
    // 1) 部署コード→部署解決
    const dept = await prisma.department.findUnique({
      where: { code: accountId },
      select: { id: true },
    });

    // 2) ユーザー解決（部署が特定できたら）
    const user =
      dept &&
      (await prisma.user.findFirst({
        where: {
          departmentId: dept.id,
          email, // punycode ASCIIで保存されている設計
          deletedAt: null,
        },
        select: { id: true },
      }));

    // 3) 依頼の記録（存在の有無に関わらず）
    await prisma.passwordRequest.create({
      data: {
        departmentCodeInput: accountId,
        emailPuny: email,
        note: note || null,
        ip: ip || null,
        userAgent: ua || null,
        departmentId: dept?.id ?? null,
        userId: user?.id ?? null,
        status: "PENDING",
      },
    });

    // 4) 通知（部署が解決できた場合のみ）
    if (dept?.id) {
      // 部署内のADMIN相当（priority >= 100）を抽出
      const admins = await prisma.user.findMany({
        where: {
          departmentId: dept.id,
          deletedAt: null,
          isActive: true,
          OR: [
            // Role直付けで priority>=100
            { role: { is: { priority: { gte: ADMIN_PRIORITY_THRESHOLD } } } },
            // DepartmentRole: override（参照Roleのpriority>=100 & DR有効）
            {
              departmentRole: {
                is: {
                  isEnabled: true,
                  role: { is: { priority: { gte: ADMIN_PRIORITY_THRESHOLD } } },
                },
              },
            },
            // DepartmentRole: custom（DR.priority>=100 & DR有効）
            {
              departmentRole: {
                is: {
                  isEnabled: true,
                  roleId: null,
                  priority: { gte: ADMIN_PRIORITY_THRESHOLD },
                },
              },
            },
          ],
        },
        select: { email: true },
      });

      // メール件名/本文（簡潔に。内部通知なので詳細OK）
      const mail = adminPasswordForgotNotify({
        accountId,
        email,
        note,
        ip,
        ua,
      });

      for (const a of admins) {
        try {
          await sendMail({
            to: a.email,
            subject: mail.subject,
            text: mail.text,
          });
        } catch (e) {
          // 通知失敗は致命でない（ログのみ）
          console.error("[mailer] password-forgot notify failed:", e);
        }
      }
    }

    // 存在秘匿：常に成功メッセージ
    return { ok: true };
  } catch (e) {
    console.error("[passwordForgotAction] failed:", e);
    // 入力は正しいがDB障害など
    return { ok: false };
  }
}

上記のとおり、Zodで入力を最終正規化 した後、部署・ユーザを「可能なら」解決し、PasswordRequest に必ず記録します。
部署が解決できた場合のみ、ADMIN相当（priority>=100） の全員へ通知メールを送ります。件名・本文は templates に集約済みです。

メールのtemplatesは下記の通りです。

// src/lib/email/templates.ts（抜粋）

/** 管理者向け：パスワード再発行依頼の着信通知 */
export function adminPasswordForgotNotify(params: {
  accountId: string;
  email: string;
  note?: string;
  ip?: string;
  ua?: string;
}) {
  const subject = "【DELOGs】パスワード再発行依頼が届きました";
  const lines = [
    "公開フォームからパスワード再発行依頼を受け付けました。",
    "",
    `■ 部署コード入力：${params.accountId}`,
    `■ 申請メール　　：${params.email}`,
    params.note ? `■ 備考　　　　　：${params.note}` : null,
    params.ip ? `■ IP　　　　　　：${params.ip}` : null,
    params.ua ? `■ UA　　　　　　：${params.ua}` : null,
    "",
    "管理画面の「ユーザ管理 > パスワード再発行依頼」から処理してください。",
  ].filter(Boolean);
  return { subject, text: lines.join("\n") };
}

公開フォーム（クライアント）の差し替え

tsx

// src/app/(public)/password-forgot/client.tsx
"use client";

import { useState } from "react";
import { toast } from "sonner";
import PasswordForgotForm, {
  type ForgotRequestValues,
} from "@/components/login/password-forgot-form";
import { passwordForgotAction } from "@/app/_actions/auth/password-forgot";

export default function PasswordForgotClient() {
  const [loading, setLoading] = useState(false);
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = async (values: ForgotRequestValues) => {
    if (submitted) return; // 二重送信ガード（念のため）
    setLoading(true);
    try {
      const res = await passwordForgotAction(values);
      if (res.ok) {
        setSubmitted(true);
        toast.success("依頼を受け付けました。登録メールをご確認ください。");
      } else {
        // 入力不正 or 障害時：存在を明かさない曖昧メッセージ
        toast.error("送信内容を確認してください。");
      }
    } catch {
      // 通信例外：曖昧メッセージ（存在秘匿維持）
      toast.error("エラーが発生しました。時間をおいて再度お試しください。");
    } finally {
      setLoading(false);
    }
  };

  return (
    <PasswordForgotForm
      onSubmit={handleSubmit}
      loading={loading}
      submitted={submitted}
      onCancel={() => history.back()}
    />
  );
}

クライアント側は、擬似待機から Server Action 呼び出し に変更しています。
存在秘匿のポリシーに合わせ、成功系のトースト文言は一定・エラー時も曖昧メッセージで統一しました。
次章では、受け付けた依頼を 管理画面から再発行／拒否 できるように、一覧・操作の実装へ進みます。

3. 管理画面での依頼一覧と再発行処理

ここからは、公開フォームで登録された PasswordRequest データを 管理者が一覧・確認・再発行・拒否できる管理画面 に統合していきます。
処理結果は即時にDBへ反映され、依頼者にはメール通知が送信されます。

Server Actionの実装 ─ password-requests.ts

管理者が依頼一覧から 「再発行（ISSUED）」 または 「拒否（REJECTED）」 を行えるようにする Server Action を新規作成します。
部署単位での権限検証・競合防止・argon2による安全なパスワード再発行・メール通知までを一貫して行う構成です。

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

import { prisma } from "@/lib/database";
import { lookupSessionFromCookie } from "@/lib/auth/session";
import { z } from "zod";
import { getEffectiveRole } from "@/lib/auth/effective-role";
import { sendMail } from "@/lib/mailer";
import { passwordIssued } from "@/lib/email/templates";
import { generatePassword } from "@/lib/security/password";
import * as argon2 from "argon2";

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

// ADMIN 相当（メール変更申請と同値）
const ADMIN_PRIORITY_THRESHOLD = 100;

const idSchema = z.object({ id: z.string().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: "権限がありません。" };

  return { ok: true as const, meName: me.name ?? "ADMIN" };
}

/**
 * 再発行（ISSUED）
 * - 競合対策: status=PENDING を条件に updateMany
 * - 同一Txで User.hashedPassword を argon2 で更新
 * - 成功後に依頼メール宛に新パスワードを通知
 */
export async function issuePasswordRequestAction(
  formData: FormData,
): Promise<ActionResult> {
  const ses = await lookupSessionFromCookie();
  if (!ses.ok) return { ok: false, message: "認証が必要です" };

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

  // 対象取得
  const req = await prisma.passwordRequest.findUnique({
    where: { id: parsed.data.id },
    select: {
      id: true,
      status: true,
      departmentId: true,
      userId: true,
      emailPuny: true,
      // 通知メール用に名前・部署情報も拾う
      user: { select: { name: true } },
    },
  });
  if (!req) return { ok: false, message: "依頼が見つかりません" };

  if (!req.departmentId || !req.userId) {
    return {
      ok: false,
      message:
        "対象ユーザが特定できないため処理できません（部署/ユーザ未解決）。",
    };
  }

  // 権限チェック
  const g = await requireAdminSameDepartment(ses.userId, req.departmentId);
  if (!g.ok) return g;

  if (req.status !== "PENDING") {
    return { ok: false, message: "未処理の依頼のみ再発行できます" };
  }

  // 新パスワード生成 & ハッシュ
  const newPassword = generatePassword(20);
  const hashed = await argon2.hash(newPassword, { type: argon2.argon2id });

  // Tx: 条件付きで依頼をISSUEDにし、ユーザのパスワードを更新
  const result = await prisma.$transaction(async (tx) => {
    const updated = await tx.passwordRequest.updateMany({
      where: { id: req.id, status: "PENDING" },
      data: {
        status: "ISSUED",
        processedAt: new Date(),
        processedBy: g.meName,
      },
    });
    if (updated.count !== 1)
      return { ok: false as const, message: "競合が発生しました" };

    await tx.user.update({
      where: { id: req.userId! },
      data: { hashedPassword: hashed },
    });

    // 成功を返しつつ、メール本文に使う情報を渡す
    return {
      ok: true as const,
      data: {
        to: req.emailPuny,
        userName: req.user?.name ?? "",
        newPassword,
      },
    };
  });

  if (!result.ok) return result;

  // メール通知（失敗しても処理は成功）
  try {
    const { subject, text } = passwordIssued({
      name: result.data!.userName,
      email: result.data!.to,
      newPassword: result.data!.newPassword,
    });
    await sendMail({ to: result.data!.to, subject, text });
  } catch (e) {
    console.error("[mail] password reissue notification failed:", e);
  }

  return { ok: true };
}

/**
 * 拒否（REJECTED）
 * - 競合対策: status=PENDING を条件に updateMany
 */
export async function rejectPasswordRequestAction(
  formData: FormData,
): Promise<ActionResult> {
  const ses = await lookupSessionFromCookie();
  if (!ses.ok) return { ok: false, message: "認証が必要です" };

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

  const req = await prisma.passwordRequest.findUnique({
    where: { id: parsed.data.id },
    select: { id: true, status: true, departmentId: true },
  });
  if (!req) return { ok: false, message: "依頼が見つかりません" };
  if (!req.departmentId)
    return { ok: false, message: "部署未解決の依頼は却下できません" };

  const g = await requireAdminSameDepartment(ses.userId, req.departmentId);
  if (!g.ok) return g;

  if (req.status !== "PENDING") {
    return { ok: false, message: "未処理の依頼のみ拒否できます" };
  }

  const updated = await prisma.passwordRequest.updateMany({
    where: { id: req.id, status: "PENDING" },
    data: {
      status: "REJECTED",
      processedAt: new Date(),
      processedBy: g.meName,
    },
  });
  if (updated.count !== 1) return { ok: false, message: "競合が発生しました" };

  return { ok: true };
}

○主な構成と役割

関数／要素	目的
requireAdminSameDepartment	呼び出しユーザーが同一部署かつ ADMIN 権限 (priority ≥ 100) であることを検証
issuePasswordRequestAction	ステータス PENDING の依頼を ISSUED に更新し、ユーザーパスワードを再生成
rejectPasswordRequestAction	ステータス PENDING の依頼を REJECTED に更新
generatePassword	強固な 20 文字のランダムパスワードを生成
argon2.hash()	パスワードを argon2id でハッシュ化し安全に保存
passwordIssued	再発行通知メールを生成して依頼者へ送信

○ 処理の流れ（再発行の場合）

txt

ADMINユーザ
   │ クリック（再発行）
   ▼
issuePasswordRequestAction()
   │
   ├─ 認証チェック（Cookie）
   ├─ 部署・権限検証（getEffectiveRole）
   ├─ status = "PENDING" の依頼をロック
   ├─ 新パスワード生成 → argon2 でハッシュ化
   ├─ User.hashedPassword を更新
   ├─ PasswordRequest.status = "ISSUED"
   └─ 依頼者へメール送信（passwordIssued）

○状態遷移まとめ

対象	前	後	備考
PasswordRequest	PENDING	ISSUED	processedAt / processedBy を記録
PasswordRequest	PENDING	REJECTED	管理者操作で明示的拒否
User	(旧ハッシュ)	(argon2idハッシュ)	新パスワード適用後に通知メール

○実装ポイント

項目	内容
権限チェック	同一部署 + ADMIN相当(priority≥100) のみ許可
競合対策	updateMany({ where: { id, status: "PENDING" } }) で二重操作防止
メール通知	送信失敗はログのみ。処理結果は成功扱い
戻り値	{ ok: true } / { ok: false; message } のシンプル構成
UI反映	DataTable 側で即時状態更新＋トースト通知

○まとめ

1トランザクション完結：依頼とユーザー更新を同時に安全反映。
存在秘匿の維持：部署・ユーザー未解決の依頼は処理対象外。
失敗許容設計：メール送信例外は致命ではなく運用再送可能。

これにより、管理画面からの「再発行」「拒否」操作をサーバサイドで安全に完結させることができます。

メールテンプレートの追加 ─ templates.ts

パスワード再発行処理の完了時に依頼者へ通知するため、src/lib/email/templates.ts に passwordIssued() 関数を追加します。
このテンプレートは、Server Action（issuePasswordRequestAction）から呼び出され、再発行完了メールの 件名・本文 を一括生成します。

// src/lib/email/templates.ts（抜粋）

/** パスワード再発行：本人通知（依頼メール宛） */
export function passwordIssued(params: {
  name?: string;
  email: string; // punycode (ASCII) 可
  newPassword: string; // 平文（再発行ワンショット）
}) {
  const loginUrl = buildLoginUrl();
  const subject = "【DELOGs】パスワードを再発行しました";
  const text = [
    "DELOGsシステムより自動送信しています。このメールへの返信は受け付けていません。",
    "",
    params.name ? `${params.name} 様` : "ご担当者様",
    "",
    "パスワードを再発行しました。以下の情報でログインしてください。",
    "",
    `ログインURL：${loginUrl}`,
    `メール　　　：${params.email}`,
    `新パスワード：${params.newPassword}`,
    "",
    "※ セキュリティのため、ログイン後にパスワードを変更してください。",
    "※ このメールに心当たりがない場合は、管理者へお問い合わせください。",
  ].join("\n");
  return { subject, text };
}

○構成と目的

関数名	役割
buildLoginUrl	ログイン画面のURLを生成（既存ユーティリティ）
passwordIssued	パスワード再発行完了の通知メール本文を生成
戻り値	`{ subject: string; text: string }` 形式で、Server Action からそのまま `sendMail()` に渡せる

○実装ポイント

項目	内容
引数	`name`, `email`, `newPassword` を受け取り、宛名を動的に生成
文面生成	改行を維持するため、`Array.join("\n")` で整形
ログインURL	buildLoginUrl() により環境変数 `APP_ORIGIN` を利用して構築
国際化対応	punycode ASCII メールもそのまま扱える設計
責務分離	Server Action では送信のみ担当し、文面定義は templates.ts に統一

○メールテンプレート統合の狙い

既存の emailChangeApproved や userWelcome と同様に、件名・本文生成をテンプレート層で完結させることで、各 Server Action からの呼び出し構文を統一し、再利用性と保守性を高めます。

これにより、後続の通知メール（管理者向けなど）も同一フォーマットで簡潔に拡張できるようになります。

状態フィルタコンポーネントの追加 ─ status-multi-select.tsx

パスワード再発行依頼テーブルの「状態（未処理／再発行済み／拒否）」を複数選択で絞り込むため、StatusMultiSelectPw を追加します。URL 同期の都合上、選択空配列は「すべて」 を意味する設計で、UI上は全選択として振る舞います。

tsx

// src/app/(protected)/users/password-request/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";
import * as PopoverPrimitive from "@radix-ui/react-popover";

export type PwReqStatus = "PENDING" | "ISSUED" | "REJECTED";

export const PW_STATUS_LABEL: Record<PwReqStatus, string> = {
  PENDING: "未処理",
  ISSUED: "再発行済み",
  REJECTED: "拒否",
};

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

  // options を正規化
  const normalized = React.useMemo(
    () =>
      options.map((o) =>
        typeof o === "string"
          ? { value: o, label: PW_STATUS_LABEL[o] }
          : { value: o.value, label: o.label ?? PW_STATUS_LABEL[o.value] },
      ),
    [options],
  );

  const all = React.useMemo(() => normalized.map((o) => o.value), [normalized]);

  // 空=すべて（UI上は全選択に見せる）
  const effectiveSelected = value.length ? value : all;

  const toggle = (s: PwReqStatus) => {
    const set = new Set(effectiveSelected);
    set.has(s) ? set.delete(s) : set.add(s);
    const next = Array.from(set) as PwReqStatus[];
    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 checked = effectiveSelected.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)} // UI上“すべて選択”だが URL表現は [] で十分なので下で畳んでもOK
            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>
  );
}

○役割と配置

項目	内容
目的	依頼の状態を複数選択でフィルタ（検索入力つき）
露出先	`columns.tsx` の「状態」ヘッダーPopover内コンポーネント
型	`PwReqStatus = "PENDING" \| "ISSUED" \| "REJECTED"`
ラベル	`PW_STATUS_LABEL` で日本語表示（未処理／再発行済み／拒否）

○Props（I/F）

Prop	型	役割
`value`	`PwReqStatus[]`	選択値。空配列＝全選択と解釈（URL表現用）
`onChange`	`(next: PwReqStatus[]) => void`	選択変更通知（空→全選択の畳み込み含む）
`options`	`Array<PwReqStatus \| { value; label }>`	一覧に出現した状態のみを渡す（柔軟にラベル差し替え可）
`footer`	`React.ReactNode`	Popover のフッター（閉じるボタン等）

○振る舞い（UI/状態同期の要点）

シナリオ	挙動
初期表示	`value=[]` の場合、UI上は全状態にチェック（実効集合で扱う）
トグル選択	選択集合を加除。全選択になったら `[]` に畳む（URL短縮）
検索	ラベル／値を部分一致でフィルタ（`CommandInput`）
すべて/クリア	「すべて」＝全状態に展開、「クリア」＝ `[]`（＝全選択表現）
視覚表示	チェックボックス風UI（`CommandItem` + `Check`）

○統合ポイント（どこで使うか）

ファイル	追加箇所
`columns.tsx`	「状態」列ヘッダーの Popover に `StatusMultiSelectPw` を配置（`table.options.meta` の `pwStatusOptions`/`pwStatuses`/`setPwStatuses` を受け取り）
`data-table.tsx`	URL同期用のクエリステートに `statuses` を保持。空配列＝すべての解釈でフィルタを実施

このコンポーネントにより、「URL＝単一情報源」で状態フィルタを再現でき、一覧の直リンク共有やリロード後の状態復元が自然に機能します。

型定義の拡張 ─ table-meta.d.ts

パスワード再発行一覧で使うメタ情報（フィルタや操作ハンドラ）を @tanstack/table-core の TableMeta に拡張します。既存の「メール変更申請」向けメタと干渉しないように、パスワード再発行専用のキー（pw* 系） を追加しました。

// src/types/table-meta.d.ts
import "@tanstack/table-core";
import type { ReqStatus } from "@/app/(protected)/users/email-change-requests/status-multi-select";
import type { PwReqStatus } from "@/app/(protected)/users/password-request/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;
    onToggleActive?: (displayId: string, next: boolean, _row?: TData) => void;
    // ★ 追加：処理中IDセット
    movingIds?: Set<string>;
    togglingIds?: Set<string>;
    // ★ 追加：この行は「最終的にこうなるはず」という可視状態
    pendingVisible?: Map<string, boolean>;

    /** 依頼を「再発行済み」にする */
    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;

    // ▼ “申請系”の状態（メール変更申請・パスワード再発行の両方をカバー）
    //    メール変更申請: PENDING/VERIFIED/APPROVED/REJECTED/EXPIRED
    //    パスワード再発行: PENDING/ISSUED/REJECTED
    statusOptions?: Array<{ value: ReqStatus; label: string }>;
    statuses?: ReqStatus[];
    setStatuses?: (next: ReqStatus[]) => void;

    // ▼ 新規：パスワード再発行一覧（メール変更申請と分離）
    pwStatusOptions?: Array<{ value: PwReqStatus; label: string }>;
    pwStatuses?: PwReqStatus[];
    setPwStatuses?: (next: PwReqStatus[]) => 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 {};

○変更概要（差分要点）

区分	変更点	目的
import	`PwReqStatus` を追加インポート	パスワード再発行の状態型を参照するため
申請系状態（共通）	`statusOptions/statuses/setStatuses` 維持	既存のメール変更申請一覧の互換性を担保
新規（PW専用）	`pwStatusOptions/pwStatuses/setPwStatuses` を追加	パスワード再発行一覧の状態フィルタを独立管理
操作ハンドラ	`onIssue` / `onReject` を定義済み	「再発行」「拒否」操作をテーブルメタ経由で受け取る
日付レンジ	`requestedRange/processedRange` を共通で利用	申請日時・処理日時の両方に適用可能

○型の責務分離

メタキー	想定利用先	説明
`statusOptions/statuses/setStatuses`	メール変更申請一覧	VERIFIED/APPROVED/REJECTED/EXPIRED 等を扱う
`pwStatusOptions/pwStatuses/setPwStatuses`	パスワード再発行一覧	PENDING/ISSUED/REJECTED を扱う
`requestedRange/setRequestedRange`	両一覧	受付（申請）日時の範囲選択
`processedRange/setProcessedRange`	両一覧	処理（承認/却下/再発行）日時の範囲選択
`onIssue/onReject`	パスワード再発行一覧	Server Action を呼び出すハンドラ

○統合ポイント

ファイル	読み書きするメタ
`page.tsx`	初期化データ（状態オプション・レンジ）を計算し `DataTable` に渡す
`columns.tsx`	ヘッダーPopoverから `pwStatusOptions/pwStatuses/setPwStatuses` を参照
`data-table.tsx`	URL同期ステートと `TableMeta` を橋渡し（`onIssue/onReject` もここで注入）

○設計の意図

衝突回避：メール変更申請とパスワード再発行で状態語彙が異なるため、pw* を分離して UI ロジックの混線を防止。
再利用性：日付レンジや共通ハンドラの命名を保ちつつ、一覧別の状態フィルタだけ独立。
見通し：将来、別の「申請系」画面が増えても、<prefix>Status* で拡張可能。

この拡張により、テーブル列ヘッダーのフィルタUIと URL 同期ロジックを崩さず、画面ごとの状態語彙 を安全に共存させられます。

ページ構成の更新 ─ page.tsx

モックデータから Prisma + Server Components (RSC) に切り替え、部署スコープかつ実効ロール情報を付与した行データを生成します。ページ先頭で 閲覧ガード を通し、同部署内の依頼のみ取得。Punycode の復号と「実効ロール（Role / DepartmentRole を統合）」の正規化を行い、DataTable に必要最小限の列で渡します。

tsx

// src/app/(protected)/users/password-request/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 DataTable from "./data-table";
import { columns, type PasswordRequestRow } from "./columns";
import { PW_STATUS_LABEL, type PwReqStatus } from "./status-multi-select";

export const metadata: Metadata = {
  title: "パスワード再発行依頼 | 管理画面レイアウト【DELOGs】",
  description:
    "Data table（shadcn/ui + @tanstack/react-table）でパスワード再発行依頼を一覧表示",
};

export default async function Page() {
  // 1) ページ閲覧ガード
  const viewer = await guardHrefOrRedirect("/users/password-request", "/");

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

  // 3) 部署内の再発行依頼を取得（必要列のみ）
  const raw = await prisma.passwordRequest.findMany({
    where: { departmentId: me.departmentId },
    orderBy: { createdAt: "desc" },
    select: {
      id: true,
      createdAt: true, // 依頼日時
      processedAt: true,
      processedBy: true,
      note: true,
      status: true,
      emailPuny: true,
      user: {
        select: {
          displayId: true,
          name: true,
          roleId: true,
          departmentRoleId: true,
        },
      },
    },
  });

  // 4) 実効ロールへ正規化 & 表示用に整形
  const rows: PasswordRequestRow[] = await Promise.all(
    raw.map(async (r) => {
      const eff = r.user
        ? 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
        : null;

      return {
        id: r.id,
        requestedAt: r.createdAt,
        processedAt: r.processedAt ?? null,
        processedBy: r.processedBy ?? null,
        userId: r.user?.displayId ?? "-",
        userName: r.user?.name ?? "-",
        email: punycode.toUnicode(r.emailPuny),
        status: r.status as PwReqStatus,
        roleCode: eff?.code ?? "",
        roleName: eff?.name ?? "(不明)",
        roleBadgeColor: eff?.badgeColor ?? null,
        note: r.note ?? "",
      };
    }),
  );

  // 5) フィルタ選択肢（一覧に登場するものだけ）
  const roleOptions = Array.from(
    new Map(
      rows
        .filter((r) => r.roleCode) // 空コードは除外
        .map((r) => [r.roleCode, { value: r.roleCode, label: r.roleName }]),
    ).values(),
  );

  const statusOptions = Array.from(new Set(rows.map((r) => r.status))).map(
    (s) => ({
      value: s as PwReqStatus,
      label: PW_STATUS_LABEL[s as PwReqStatus],
    }),
  );

  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">
        <DataTable
          columns={columns}
          data={rows}
          roleOptions={roleOptions}
          statusOptions={statusOptions}
          canDownloadData={viewer.canDownloadData}
        />
      </div>
    </>
  );
}

○変更点の要約

観点	変更前	変更後
データ取得	モック関数 `listPasswordRequests`	`prisma.passwordRequest.findMany`（部署絞り + 必要列のみ）
ガード	`guardHrefOrRedirect`（導入済）	継続使用し `viewer` 情報から部署を解決
Eメール表示	そのまま表示	`punycode.toUnicode` で人可読に復号
ロール表示	モック値	`getEffectiveRole` で Role/DepartmentRole を正規化（code/name/color）
フィルタ選択肢	モック	取得行から実在コードを動的生成（役割・状態）
ダウンロード可否	固定	`viewer.canDownloadData` を `DataTable` に伝播
付加列	なし	`note`（備考）を行に含める

○データ整形フロー

ステップ	処理	出力
1	`viewer = guardHrefOrRedirect(...)`	ユーザID/権限（RSC）
2	`me = prisma.user.findUnique(...)`	所属 `departmentId`
3	`passwordRequest.findMany(...)`	依頼の生レコード（必要列のみ）
4	`punycode.toUnicode(emailPuny)`	表示用メール
5	`getEffectiveRole(...)`	`roleCode/name/badgeColor`
6	行オブジェクトへ整形	`PasswordRequestRow[]`
7	`roleOptions/statusOptions` 生成	フィルタUIに供給
8	`DataTable` へ props 渡し	RSC→Client の境界最小化

○実装上のポイント

項目	意図 / 効果
`select` の徹底	ネットワークとシリアライズを抑制、RSC → Client の境界を軽量化
実効ロールの非同期解決	各行ごとに Role/DepartmentRole を統合し、UI 表示を一貫化
Punycode 復号	DB保存（ASCII）と UI 表示（Unicode）を分離して可読性担保
フィルタ候補動的化	一覧に存在する値のみを選択肢化し、ノイズを削減
`canDownloadData` の伝播	役割に応じた CSV ダウンロード権限を UI に反映

カラム定義の更新 ─ columns.tsx

依頼一覧テーブルのカラム構成を DB連携版 に最適化し、フィルタ/ソートの操作性と検索範囲を強化しました。特に、備考 note の表示と検索対象への追加、実効ロールの表示（色バッジ対応）、日付レンジフィルタ（依頼日時・処理日時）、状態の複数選択フィルタを実装しています。

tsx

// src/app/(protected)/users/password-request/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 { SlidersVertical } from "lucide-react";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import * as PopoverPrimitive from "@radix-ui/react-popover";

import { DateRangePicker } from "@/components/filters/date-range-picker";
import { RolesChecklist } from "@/components/filters/roles-checklist";
import { SortButton } from "@/components/datagrid/sort-button";
import { StatusMultiSelectPw } from "./status-multi-select";

export type PasswordRequestRow = {
  id: string;
  requestedAt: Date;
  processedAt: Date | null;
  processedBy: string | null;
  userId: string; // ユーザ displayId
  userName: string;
  email: string;
  roleCode: string;
  roleName: string;
  roleBadgeColor: string | null;
  status: "PENDING" | "ISSUED" | "REJECTED";
  note: string;
};

function fmt(d?: Date | null) {
  if (!d) return "-";
  return format(d, "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<PasswordRequestRow>[] = [
  // 依頼日時（フィルタ＋ソート）
  {
    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),
  },

  // ユーザID（displayId）
  {
    accessorKey: "userId",
    header: (ctx) => <HeaderWithSort title="ユーザID" ctx={ctx} />,
    cell: ({ row }) => <span className="font-mono">{row.original.userId}</span>,
  },

  // ユーザ名
  {
    accessorKey: "userName",
    header: (ctx) => <HeaderWithSort title="ユーザ名" ctx={ctx} />,
  },

  // メール
  {
    accessorKey: "email",
    header: (ctx) => <HeaderWithSort title="メール" ctx={ctx} />,
  },
  // ★ 備考（新規：ソートのみ）
  {
    accessorKey: "note",
    header: (ctx) => <HeaderWithSort title="備考" ctx={ctx} />,
    size: 180,
    cell: ({ row }) => (
      <div className="max-w-[220px] truncate">{row.original.note}</div>
    ),
  },
  // ロール（フィルタ＋ソート）
  {
    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 ?? (() => {});
      // roles は「見做し：空=すべて」ではなく DataTable 側で“有効集合”が渡る想定なので、
      // active 判定は roleOptions 長と比較でOK
      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: "status",
    header: (ctx) => {
      const table = ctx.table;
      const opts = table.options.meta?.pwStatusOptions ?? [];
      const selectedRaw = table.options.meta?.pwStatuses ?? []; // 空=すべて（URL表現）
      // ← “初期オフ表示”にするため、空配列のときは全選択と同義に解釈して active=false
      const effectiveSelected =
        selectedRaw.length > 0 ? selectedRaw : opts.map((o) => o.value);
      const active = effectiveSelected.length !== opts.length;
      const setSelected = table.options.meta?.setPwStatuses ?? (() => {});

      return (
        <HeaderWithFilter
          title="状態"
          active={active}
          trailing={
            <SortButton
              column={ctx.column}
              aria-label="状態でソート"
              title="状態でソート"
            />
          }
        >
          <StatusMultiSelectPw
            value={selectedRaw}
            onChange={setSelected}
            options={opts}
            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 === "ISSUED") return <Badge>再発行済み</Badge>;
      if (s === "REJECTED") return <Badge variant="destructive">拒否</Badge>;
      return <Badge variant="outline">未処理</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} />,
  },

  // 操作（UIのみ・ServerAction未接続）
  {
    id: "actions",
    header: "操作",
    enableSorting: false,
    enableResizing: false,
    cell: ({ row, table }) => {
      const r = row.original;
      const disabled = r.status !== "PENDING";
      return (
        <div className="flex gap-2">
          <Button
            size="sm"
            disabled={disabled}
            onClick={() => table.options.meta?.onIssue?.(r.id, r)}
            data-testid={`issue-btn-${r.id}`}
            className="cursor-pointer"
          >
            再発行
          </Button>
          <Button
            size="sm"
            variant="outline"
            disabled={disabled}
            onClick={() => table.options.meta?.onReject?.(r.id, r)}
            data-testid={`reject-btn-${r.id}`}
            className="cursor-pointer"
          >
            拒否
          </Button>
        </div>
      );
    },
  },

  // hidden 検索列（ユーザID/メール/ユーザ名/処理者）
  {
    id: "q",
    accessorFn: (r) =>
      `${r.userId} ${r.email} ${r.userName} ${r.processedBy ?? ""} ${r.note ?? ""}`.toLowerCase(),
    enableHiding: true,
    enableSorting: false,
    enableResizing: false,
    size: 0,
    header: () => null,
    cell: () => null,
  },
];

○変更点の要約（差分の主眼）

観点	変更前	変更後
ロール表示	モック `roleInfoMap`	実効ロール（code/name/badgeColor）を行ごとに受け取りバッジ表示
フィルタ	なし	日付レンジ（依頼/処理）、ロール複数選択、状態複数選択を Popover UI で提供
備考列	なし	追加（ソート対象・省スペース表示）
検索対象	`accountId/email/userName/note`	`userId/email/userName/processedBy/note`（hidden列`q`で集約）
操作列	PENDING 以外も押下可	`status !== "PENDING"` は操作ボタンを無効化
並び替え UI	ヘッダ文字のみ	`SortButton` コンポーネントで昇降順を明示
状態フィルタ	なし	`StatusMultiSelectPw`（空配列=すべての意味でURL表現と整合）

○カラム構成（表示/機能）

カラムID	表示	ソート	フィルタ	備考
requestedAt	✓	✓	日付レンジ	依頼日時
userId	✓	✓	―	displayId を等幅表示
userName	✓	✓	―	―
email	✓	✓	―	puny→Unicode 復号済みを表示
note	✓	✓	―	新規追加、最大幅でトリミング表示
roleCode（表示は name）	✓	✓	複数選択	badgeColor による色バッジ
status	✓	✓	複数選択	PENDING/ISSUED/REJECTED
processedAt	✓	✓	日付レンジ	処理日時
processedBy	✓	✓	―	処理者表示
actions	✓	―	―	再発行/拒否（PENDINGのみ有効）
q（hidden）	―	―	―	全文検索用（userId/email/userName/processedBy/note）

○実装のポイント

ヘッダUIの共通化：HeaderWithFilter と HeaderWithSort を用意し、アイコン・Popover・並び替えボタンの統一感を確保。
状態フィルタの仕様：StatusMultiSelectPw は「空配列＝すべて」を採用し、URL表現とUIの初期表示（全選択相当）を両立。
検索列の拡充：hidden 列 q に note を加え、備考もキーワード検索にヒットさせる。
アクセシビリティ/可読性：ロールは badgeColor がある場合のみセカンダリ表示＆白文字にして可読性を担保。IDは等幅で視認性を向上。

○注意点

note は行の横幅を圧迫しやすいため、トリミング表示（truncate）で折り返しを抑制。
フィルタは DataTable の meta から読み書きする設計。roleOptions / roles / setRoles、pwStatusOptions / pwStatuses / setPwStatuses、requestedRange / processedRange を table meta で受け取ること。

DataTableの更新 ─ data-table.tsx

DB連携版に合わせて URL同期型フィルタ ・ 列表示の永続化 ・ サーバアクション連携 ・ CSV出力 を実装しました。UIは即時反映（楽観更新）しつつ、失敗時はトーストで通知します。

tsx

// src/app/(protected)/users/password-request/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 { toast } from "sonner";

import type { PasswordRequestRow } from "./columns";
import type { RoleOption } from "@/components/filters/roles-checklist";
import { type PwReqStatus, PW_STATUS_LABEL } from "./status-multi-select";
import {
  issuePasswordRequestAction,
  rejectPasswordRequestAction,
} from "@/app/_actions/users/password-requests";

// 共通フック＆ユーティリティ
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";

// UI 部品
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<PasswordRequestRow, unknown>[];
  data: PasswordRequestRow[];
  roleOptions: RoleOption[];
  statusOptions: { value: PwReqStatus; label: string }[];
  canDownloadData?: boolean;
};

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

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

  // URL同期（statuses は空配列＝すべて）
  const [queryState, setQueryState] = useDatagridQueryState(
    "password-reqs",
    {
      q: "",
      roles: [] as string[],
      statuses: [] as PwReqStatus[],
      requestedRange: undefined as { from?: string; to?: string } | undefined,
      processedRange: undefined as { from?: string; to?: string } | undefined,
      cols: Array.from(allColumnIds) as ColId[],
    },
    { persistKey: "password-reqs" },
  );

  // ページサイズだけLS（デフォルト20件）
  const [persisted, setPersisted] = usePersistentDatagridState("pw-reqs", {
    pageSize: 20,
  });

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

  // 行（UI即時反映用）
  const [localRows, setLocalRows] = React.useState<PasswordRequestRow[]>(
    () => data,
  );
  React.useEffect(() => setLocalRows(data), [data]);

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

  // 状態
  const pwStatusOptions = React.useMemo(
    () =>
      Array.from(new Set(localRows.map((r) => r.status))).map((s) => ({
        value: s as PwReqStatus,
        label: PW_STATUS_LABEL[s as PwReqStatus],
      })),
    [localRows],
  );
  // ↓これを pwStatusOptions から作る（空配列＝すべて）
  const allStatusCodes = React.useMemo(
    () => pwStatusOptions.map((o) => o.value),
    [pwStatusOptions],
  );
  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 setPwStatuses = (next: PwReqStatus[]) =>
    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 }));

  // 操作（UIのみ／サーバアクション差し替え前提）
  const onIssue = React.useCallback(
    async (id: string) => {
      const fd = new FormData();
      fd.append("id", id);

      try {
        const res = await issuePasswordRequestAction(fd);
        if (!res.ok) {
          toast.error(res.message || "再発行に失敗しました。");
          return;
        }

        // ローカル行更新（即時反映）
        setLocalRows((prev) =>
          prev.map((r) =>
            r.id === id
              ? {
                  ...r,
                  status: "ISSUED",
                  processedAt: new Date(),
                  processedBy: "(you)",
                }
              : r,
          ),
        );
        toast.success("パスワードを再発行し、通知メールを送信しました。");
      } catch (e) {
        console.error("[password-req] issue failed:", e);
        toast.error("サーバーエラーが発生しました。");
      }
    },
    [setLocalRows],
  );

  const onReject = React.useCallback(
    async (id: string) => {
      const fd = new FormData();
      fd.append("id", id);

      try {
        const res = await rejectPasswordRequestAction(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("依頼を拒否しました。");
      } catch (e) {
        console.error("[password-req] reject failed:", e);
        toast.error("サーバーエラーが発生しました。");
      }
    },
    [setLocalRows],
  );

  // 可視列（SSR一致のため mount 後にURLの列を採用）
  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.userId} ${r.email} ${r.userName} ${r.processedBy ?? ""}  ${r.note ?? ""}`
          .toLowerCase()
          .includes(needle);
      const passRole = r.roleCode
        ? roleSet.has(r.roleCode)
        : roleSet.size === rolesForFilter.length;
      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: {
      onIssue,
      onReject,
      // フィルタUIが読むメタ
      roleOptions,
      roles: rolesForFilter,
      setRoles,
      pwStatusOptions, // ← 修正
      pwStatuses: queryState.statuses,
      setPwStatuses,
      requestedRange,
      setRequestedRange,
      processedRange,
      setProcessedRange,
    },
  });

  // mount後にLSのpageSizeを反映
  React.useEffect(() => {
    if (mounted) table.setPageSize(persisted.pageSize);
  }, [mounted, persisted.pageSize, table]);

  // CSV（可視列のみ）
  const columnLabels = {
    requestedAt: "依頼日時",
    userId: "ユーザID",
    userName: "ユーザ名",
    email: "メール",
    note: "備考",
    roleCode: "ロール",
    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 "userId":
            return r.userId;
          case "userName":
            return r.userName;
          case "email":
            return r.email;
          case "note":
            return r.note ?? "";
          case "roleCode":
            return r.roleName ?? r.roleCode;
          case "status":
            return r.status === "PENDING"
              ? "未処理"
              : r.status === "ISSUED"
                ? "再発行済"
                : "拒否";
          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(`password_requests_${ts}.csv`, csv);
  }, [filteredData, table]);

  const filteredCount = filteredData.length;
  const visibleColsText = (mounted ? effectiveVisibleColumnIds : allColumnIds)
    .map((id) => columnLabels[id])
    .join(", ");

  const roleText =
    queryState.roles.length === 0
      ? "ロール: すべて"
      : `ロール: ${queryState.roles
          .map(
            (v) =>
              new Map(roleOptions.map((o) => [o.value, o.label])).get(v) ?? v,
          )
          .join(", ")}`;

  const statusText =
    queryState.statuses.length === 0
      ? "状態: すべて"
      : `状態: ${queryState.statuses
          .map((s) => pwStatusOptions.find((o) => o.value === s)?.label ?? s)
          .join(", ")}`;

  return (
    <div className="space-y-3">
      <DatagridToolbar<ColId>
        qTitle={`${columnLabels.userId}/${columnLabels.userName}/${columnLabels.email}/${columnLabels.processedBy}/${columnLabels.note}`}
        q={queryState.q}
        onChangeQ={setQ}
        columnOptions={allColumnIds.map((id) => ({
          value: id,
          label: columnLabels[id],
        }))}
        visibleColumnIds={
          mounted
            ? (queryState.cols as ColId[])
            : (Array.from(allColumnIds) as ColId[])
        }
        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={roleText}
            statusText={statusText}
            createdTitle="依頼"
            updatedTitle="処理"
            createdRangeISO={queryState.requestedRange}
            updatedRangeISO={queryState.processedRange}
            createdRange={requestedRange}
            updatedRange={processedRange}
            visibleColsText={visibleColsText}
          />
          <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="pw-requests-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<PasswordRequestRow>
        table={table}
        pageSize={table.getState().pagination.pageSize}
        onChangePageSize={(n) => {
          table.setPageSize(n);
          setPersisted((p) => ({ ...p, pageSize: n }));
        }}
      />
    </div>
  );
}

○変更点の要約（差分の主眼）

観点	変更前	変更後
データソース	モック配列をそのまま表示	SSRで取得した行をローカル状態に取り込み（`localRows`）
フィルタ同期	ローカルのみ	`useDatagridQueryState` でURLと同期（復帰や共有に強い）
ページサイズ	固定10件	`usePersistentDatagridState` でLS永続化（初期20件）
列表示制御	なし	可視列IDをURLに保持、`VisibilityState`で反映
状態フィルタ	単一選択	`PwReqStatus[]`（空＝すべて）複数選択に対応
ロールフィルタ	単一選択	複数選択（空＝すべて）に変更
日付フィルタ	なし	依頼日時/処理日時のレンジフィルタを追加
操作（再発行/拒否）	モック更新	Server Action呼び出し＋楽観更新＋トースト通知
CSV出力	なし	可視列のみを対象にUTF-8 CSVを生成・DL
検索対象	手入力フィルタ	hidden列`q`相当をDataTable側で再現（note含む）

○UIフロー（概略）

ユーザ操作（検索/フィルタ/列表示/ページサイズ/再発行/拒否） → URL/LSへ同期 → テーブル描画更新 → （操作系のみ）Server Action実行 → 成否トースト／ローカル行更新

○フィルタ/ソート仕様（実装ルール）

種別	入力	同期先	振る舞い
キーワード	`q`	URL	`userId/email/userName/processedBy/note` に部分一致
ロール	`roles: string[]`	URL	空＝すべて。`roleCode`空行は「すべて扱い」に合流
状態	`statuses: PwReqStatus[]`	URL	空＝すべて。UIは全選択と同義で表示
依頼日時	`requestedRange`	URL	日単位（from/toを00:00〜23:59で判定）
処理日時	`processedRange`	URL	値なしは未フィルタ。`processedAt`がnullの場合は除外
並び順	`sorting`	ローカル	既定：依頼日時降順

○操作（Server Action連携）

操作	呼び出し	成功時のローカル反映	失敗時の挙動
再発行	`issuePasswordRequestAction(FormData{id})`	`status=ISSUED`・`processedAt=now`・`processedBy="(you)"`	エラートースト表示（行は不変）
拒否	`rejectPasswordRequestAction(FormData{id})`	`status=REJECTED`・`processedAt=now`・`processedBy="(you)"`	エラートースト表示（行は不変）

○CSV出力の仕様

可視列のみを対象（actions/qは除外）。
ラベルは日本語（例：依頼日時/ユーザID/備考/…）。
日付は YYYY/MM/DD HH:mm、状態は「未処理/再発行済/拒否」に変換。
ファイル名：password_requests_YYYYMMDD_HHMMSS.csv

○注意点（運用・実装）

SSR時の列表示ギャップを避けるため、mount前は全列表示→mount後にURLの可視列へ揃えます。
pwStatusOptions は 実データから動的生成（一覧に存在しない状態は候補に出さない）。
楽観更新はUI即時性優先。サーバ失敗時はトーストで通知し、必要に応じて再読み込みで整合を取る想定です。

この章では、以上7ファイルの改修を通じて、「依頼 → 管理画面受付 → 再発行通知」までの一連のサイクルを完成させました。
次章は、ついでの作業です。本記事の2章でメールテンプレートを整理しましたので、同様にメール通知をしている箇所を修正します。

4. メールテンプレートを一元管理する

本文で扱うのは 認証メール／承認通知／ようこそメール のテンプレート統合です。第2章の adminPasswordForgotNotify と第3章の passwordIssued は既に説明済みのため、本章では emailChangeVerify / emailChangeApproved / userWelcome / adminEmailChangeVerifiedNotify に絞って整理します。すべてのテンプレートは 件名(subject)と本文(text)を返す純関数 とし、各 Server Action から同一の呼び出し規約で利用できるように統一しました。

// src/lib/email/templates.ts
const { APP_ORIGIN } = process.env;

export function buildVerifyUrl(token: string) {
  const origin = APP_ORIGIN ?? "http://localhost:3000";
  const url = new URL("/profile/email/verify", origin);
  url.searchParams.set("token", token);
  return url.toString();
}

export function buildLoginUrl() {
  const origin = APP_ORIGIN ?? "http://localhost:3000";
  return new URL("/", origin).toString();
}

/** メールアドレス変更：認証メール（新メール宛） */
export function emailChangeVerify(params: {
  newEmail: string;
  token: string;
  expiresAt: Date;
}) {
  const url = buildVerifyUrl(params.token);
  const until = params.expiresAt.toLocaleString("ja-JP", {
    timeZone: "Asia/Tokyo",
  });
  const subject = "【DELOGs】メールアドレス変更の確認";
  const text = [
    "DELOGsシステムよりの自動返信です。このメールに返信いただいても応答できませんのでご了承ください。",
    "",
    "メールアドレス変更の確認のため、以下のURLをクリックしてください。ログイン画面が表示される場合は、変更前のメールアドレスでログインしてください。",
    "",
    url,
    "",
    `上記URLの有効期限：${until} まで`,
    "",
    `変更予定のメールアドレス：${params.newEmail}`,
    "",
    "上記URLへアクセス後に管理者の承認が完了すると、メールアドレスの変更が完了します。",
    "",
    "",
    "※氏名や変更前アドレスはセキュリティを考慮して記載していません。",
    "※このメールに心当たりがない場合は破棄してください。",
  ].join("\n");
  return { subject, text };
}

/** メールアドレス変更：承認完了（新メール宛） */
export function emailChangeApproved(params: {
  newEmail: string; // punycode (ASCII)可
}) {
  const subject = "【DELOGs】メールアドレス変更が承認されました";
  const text = [
    "DELOGsシステムより自動送信しています。このメールへの返信は受け付けていません。",
    "",
    "メールアドレス変更の申請が管理者により承認されました。",
    "",
    `■ 変更後メール：${params.newEmail}`,
    "",
    "以後のログイン・通知は上記の新しいメールアドレスが対象となります。",
    "",
    "※このメールに心当たりがない場合は、管理者へお問い合わせください。",
  ].join("\n");
  return { subject, text };
}

/** 新規ユーザ：ようこそメール（本人宛） */
export function userWelcome(params: {
  name: string;
  email: string;
  departmentCode: string;
  initialPassword: string;
}) {
  const loginUrl = buildLoginUrl();
  const subject = "【DELOGs】アカウント発行のお知らせ";
  const text = [
    "DELOGsシステムより自動送信しています。このメールへの返信は受け付けていません。",
    "",
    `${params.name} 様`,
    "",
    "アカウントが作成されました。以下の情報でログインしてください。",
    "",
    `ログインURL：${loginUrl}`,
    `部署コード　：${params.departmentCode}`,
    `メール　　　：${params.email}`,
    `初期パスワード：${params.initialPassword}`,
    "",
    "※ 初回ログイン後にパスワードを変更してください。",
    "※ このメールに心当たりがない場合は、管理者へお問い合わせください。",
  ].join("\n");
  return { subject, text };
}

/** パスワード再発行：本人通知（依頼メール宛） */
export function passwordIssued(params: {
  name?: string;
  email: string; // punycode (ASCII) 可
  newPassword: string; // 平文（再発行ワンショット）
}) {
  const loginUrl = buildLoginUrl();
  const subject = "【DELOGs】パスワードを再発行しました";
  const text = [
    "DELOGsシステムより自動送信しています。このメールへの返信は受け付けていません。",
    "",
    params.name ? `${params.name} 様` : "ご担当者様",
    "",
    "パスワードを再発行しました。以下の情報でログインしてください。",
    "",
    `ログインURL：${loginUrl}`,
    `メール　　　：${params.email}`,
    `新パスワード：${params.newPassword}`,
    "",
    "※ セキュリティのため、ログイン後にパスワードを変更してください。",
    "※ このメールに心当たりがない場合は、管理者へお問い合わせください。",
  ].join("\n");
  return { subject, text };
}

/** 管理者向け：パスワード再発行依頼の着信通知 */
export function adminPasswordForgotNotify(params: {
  accountId: string;
  email: string;
  note?: string;
  ip?: string;
  ua?: string;
}) {
  const subject = "【DELOGs】パスワード再発行依頼が届きました";
  const lines = [
    "公開フォームからパスワード再発行依頼を受け付けました。",
    "",
    `■ 部署コード入力：${params.accountId}`,
    `■ 申請メール　　：${params.email}`,
    params.note ? `■ 備考　　　　　：${params.note}` : null,
    params.ip ? `■ IP　　　　　　：${params.ip}` : null,
    params.ua ? `■ UA　　　　　　：${params.ua}` : null,
    "",
    "管理画面の「ユーザ管理 > パスワード再発行依頼」から処理してください。",
  ].filter(Boolean);
  return { subject, text: lines.join("\n") };
}

/** 管理者向け：メール変更の本人認証(VERIFIED)が完了した通知 */
export function adminEmailChangeVerifiedNotify(params: {
  userName: string;
  userEmail: string;
}) {
  const subject = "【DELOGs】メール変更リクエストが確認されました";
  const text = [
    `ユーザ ${params.userName} (${params.userEmail}) が新しいメールアドレスを認証しました。`,
    "",
    "管理者画面にて承認または却下を行ってください。",
  ].join("\n");
  return { subject, text };
}

方針と命名規約

テンプレートは「 何を送るか 」に基づく動詞＋目的語の形式で命名し、返り値は { subject, text } に統一します。アプリの URL は APP_ORIGIN 由来の buildLoginUrl / buildVerifyUrl を介して生成し、 環境依存の差異をテンプレート内に閉じ込める 方針です。

種別	関数名	送信対象	目的
メール変更の本人確認	`emailChangeVerify`	本人（新メール）	認証リンクと有効期限を通知
メール変更の承認完了	`emailChangeApproved`	本人（新メール）	管理者承認の完了を通知
新規ユーザの案内	`userWelcome`	本人	初期パスワードとログイン情報を通知
メール変更の本人認証完了（管理者向け）	`adminEmailChangeVerifiedNotify`	管理者	VERIFIED 到達を全管理者へ周知

既存Actionの差し替えポイント

各 Server Action は import の置き換え と 送信部のワンライナー化のみで移行できます。以下、変更済みの4箇所について、利用位置だけ示します。

ファイル	利用するテンプレート	差し替え概要
`src/app/_actions/profile/email-change.ts`	`emailChangeVerify`	旧 `emailChangeText` を置換。`const { subject, text } = emailChangeVerify(...)` → `sendMail({ to, subject, text })`
`src/app/_actions/users/email-change-requests.ts`	`emailChangeApproved`	承認完了の本人通知を統一APIで送信
`src/app/_actions/users/create-user.ts`	`userWelcome`	ウェルカムメールの件名・本文生成をテンプレ化
`src/app/_actions/profile/email-verify.ts`	`adminEmailChangeVerifiedNotify`	VERIFIED 到達時、実効 priority≥100 の管理者全員へ通知（並列送信）

A. src/app/_actions/profile/email-change.ts

// 先頭の import を変更
// import { emailChangeText } from "@/lib/email/templates";
import { emailChangeVerify } from "@/lib/email/templates";

// 送信部を差し替え
const { subject, text } = emailChangeVerify({
  newEmail: newEmailAscii,
  token,
  expiresAt,
});
await sendMail({ to: newEmailAscii, subject, text });

B. src/app/_actions/users/email-change-requests.ts

// import { emailChangeApprovedText } from "@/lib/email/templates";
import { emailChangeApproved } from "@/lib/email/templates";

// 承認通知メール送信
const { subject, text } = emailChangeApproved({ newEmail: req.newEmailPuny });
await sendMail({ to: req.newEmailPuny, subject, text });

C. src/app/_actions/users/create-user.ts

// import { userWelcomeText } from "@/lib/email/templates";
import { userWelcome } from "@/lib/email/templates";

// 送信部
const { subject, text } = userWelcome({
  name: created.name,
  email: normalizedEmail,
  departmentCode: created.department.code,
  initialPassword: password,
});
await sendMail({ to: normalizedEmail, subject, text });

D. src/app/_actions/profile/email-verify.ts

import { adminEmailChangeVerifiedNotify } from "@/lib/email/templates";

// ...
await Promise.allSettled(
  admins.map((a) => {
    const mail = adminEmailChangeVerifiedNotify({
      userName: req.user.name,
      userEmail: req.user.email,
    });
    return sendMail({ to: a.email, subject: mail.subject, text: mail.text });
  }),
);

変更の狙い（実運用視点）

課題	統一後の解決
ファイルごとに件名/本文を直書きし、表記揺れが発生	テンプレ関数に集約し、表記・署名・語尾を統一
送信ロジックにURL生成や時刻整形が散在	`buildLoginUrl / buildVerifyUrl` とテンプレ内部で完結
各所で例外処理やログメッセージがばらつく	Server Action側は `sendMail({ to, subject, text })` のみ。例外ログは一箇所で書式統一
マルチリンガル/ブランド名変更への耐性が低い	件名・本文の一元管理で差し替え容易（将来の i18n 入口）

`profile/email-verify.ts` の整理（通知対象の厳密化）

これは、今回の記事からは脱線しますが、第2章基準に合わせ、**管理者判定を「実効 priority≥100」**へ統一しました。Role直付け／DepartmentRole（override/custom）のいずれも同一しきい値で抽出し、adminEmailChangeVerifiedNotify を用いて並列送信します。これにより 通知漏れ と 過剰通知 の双方を抑制します。

// src/app/_actions/profile/email-verify.ts
"use server";

import { prisma } from "@/lib/database";
import { lookupSessionFromCookie } from "@/lib/auth/session";
import { sendMail } from "@/lib/mailer";
import { adminEmailChangeVerifiedNotify } from "@/lib/email/templates";

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

// PasswordForgot と同基準で統一
const ADMIN_PRIORITY_THRESHOLD = 100;

export async function verifyEmailChangeAction(
  token: string,
): Promise<VerifyResult> {
  // 1) 認証
  const session = await lookupSessionFromCookie();
  if (!session.ok) {
    return { ok: false, message: "認証にはログインが必要です" };
  }

  // 2) リクエスト取得
  const req = await prisma.emailChangeRequest.findUnique({
    where: { token },
    include: { user: true },
  });
  if (!req) {
    return {
      ok: false,
      message: "無効なURLです。認証URLを確認して再度アクセスしてください",
    };
  }
  if (req.userId !== session.userId) {
    return { ok: false, message: "ログインユーザーが一致しません" };
  }

  // 3) 期限・状態チェック
  const now = new Date();
  if (req.expiresAt < now) {
    await prisma.emailChangeRequest.update({
      where: { id: req.id },
      data: { status: "EXPIRED" },
    });
    return { ok: false, message: "このURLは有効期限が切れています" };
  }

  if (["APPROVED", "REJECTED"].includes(req.status)) {
    return { ok: false, message: "すでに処理済みの申請です" };
  }

  // 4) VERIFIED に更新
  await prisma.emailChangeRequest.update({
    where: { id: req.id },
    data: { status: "VERIFIED" },
  });

  // 5) ADMIN 全員へ通知（実効priority>=100 を網羅）
  //  - Role 直付け
  //  - DepartmentRole override（参照Roleのpriority）
  //  - DepartmentRole custom（自前priority）
  const admins = await prisma.user.findMany({
    where: {
      deletedAt: null,
      isActive: true,
      departmentId: req.departmentId,
      OR: [
        // Role 直付け
        {
          role: {
            is: {
              isActive: true,
              priority: { gte: ADMIN_PRIORITY_THRESHOLD },
            },
          },
        },
        // DepartmentRole: override（参照Roleのpriorityで判定、DRは有効）
        {
          departmentRole: {
            is: {
              isEnabled: true,
              role: {
                is: { priority: { gte: ADMIN_PRIORITY_THRESHOLD } },
              },
            },
          },
        },
        // DepartmentRole: custom（DR.priorityで判定、DRは有効）
        {
          departmentRole: {
            is: {
              isEnabled: true,
              roleId: null,
              priority: { gte: ADMIN_PRIORITY_THRESHOLD },
            },
          },
        },
      ],
    },
    select: { email: true },
  });

  // 失敗しても致命にはしない（並列で送る）
  await Promise.allSettled(
    admins.map((a) => {
      const mail = adminEmailChangeVerifiedNotify({
        userName: req.user.name,
        userEmail: req.user.email,
      });
      return sendMail({ to: a.email, subject: mail.subject, text: mail.text });
    }),
  );

  return { ok: true };
}

○参照の目安（テンプレAPIの設計意図）

項目	仕様
返り値	常に `{ subject, text }`
引数	文面生成に必要な最小限（メール・氏名・トークン・期限など）
改行/全角記号	文中のレイアウトはテンプレ側で管理（本文に `\n` を含めて返す）
URL/時刻	テンプレ側で `build*Url()` と `toLocaleString("ja-JP", { timeZone: "Asia/Tokyo" })` を適用
互換性	旧API（`*Text`）は本記事時点で未使用化。以降は新APIのみを使用

この章の目的は「どのメールも同じ作法で送れる」状態を作ることです。以後はテンプレート側の修正だけで、件名ルールや文面統一・リンク方針の変更を一括反映できます。

5. まとめと次回予告

今回の記事では、　ログイン前のパスワード再発行依頼から、管理画面での処理・通知まで　を一連のフローとして実装しました。
これまでモックデータで動かしていた依頼処理を完全に DB連携＋Server Action構成 に移行し、セキュリティと運用効率の両立を実現しています。

txt

[Before]                              [After]
フォーム送信 → console.log           公開フォーム → PasswordRequest保存
                                      ↓
                                      管理者メール通知（adminPasswordForgotNotify）
                                      ↓
                                      管理画面で再発行／拒否（Server Action）
                                      ↓
                                      本人へパスワード通知（passwordIssued）

これにより、

フォーム入力時の部署コード＋メールの突合
登録ユーザが存在しない場合の「存在秘匿」処理
管理者への依頼通知（メール）
Server Action 経由での再発行／拒否処理
本人へのワンタイムパスワード通知
までを統一的なルールで構築できました。

今回の実装ポイント（総括）

項目	役割	補足
`PasswordRequest` モデル	再発行依頼をDBで管理	部署・ユーザを解決できなくても保存
`passwordForgotAction`	公開フォーム受付	部署コード＋メールで突合、存在秘匿対応
`password-requests.ts`	管理者の再発行・拒否アクション	権限チェック＋argon2＋トランザクション処理
`data-table.tsx`	再発行一覧UI	URL同期フィルタ＋即時反映＋CSV出力
`templates.ts`	メール文面の一元化	すべて `{ subject, text }` 形式で統一

全体を通して、「内部と外部の接点」となる再発行フローを安全に整備できた点が最大の成果です。
データベース構造・通知テンプレート・UI の三層が揃ったことで、他の依頼系フロー（例：アカウント登録依頼や退職者申請など）への横展開も容易になりました。

次回予告

次回は、これまで構築してきた 管理画面フォーマットのデモ環境 を紹介し、 GitHub上で公開 していきます。しばらく間が空くかもしれませんが、管理画面フォーマット開発の集大成として、誰でも動かせるサンプル環境を仕上げていきます。

参考文献

区分	資料名／URL	内容概要
Prisma公式	https://www.prisma.io/docs	モデル定義・enum追加・リレーション管理に関するリファレンス
Next.js公式	https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions	Server Actionによる安全なサーバサイド処理の実装指針
shadcn/ui	https://ui.shadcn.com/	UI構築で使用しているコンポーネントライブラリ
React Hook Form	https://react-hook-form.com/	ログイン・再発行フォームなどのバリデーション設計に利用
Zod	https://zod.dev/	入力検証やFormDataの安全なパース処理に活用
argon2公式実装	https://github.com/ranisalt/node-argon2	パスワードハッシュ処理（Argon2id）の採用元
date-fns	https://date-fns.org/	DataTable上での日時フォーマット処理に使用
punycode	https://github.com/bestiejs/punycode.js	国際化ドメインを含むメールアドレスの安全な変換処理
Sonner	https://sonner.emilkowal.ski/	操作完了・エラー通知を行うトースト通知ライブラリ
DELOGs既存記事	https://delogs.jp/next-js/backend/format-profile	メールアドレス変更機能（認証・承認）との連携基盤となった記事
DELOGs既存記事	https://delogs.jp/next-js/shadcn-ui/format-404-password-forgot	パスワード忘れ導線UI（公開フォーム部分）の前提実装

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

松本孝太郎

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

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

▼ 関連記事

[管理画面フォーマット開発編 #10] メニュー管理UIをDB連携する

グローバルで一貫したMenuテーブルを保ちながら、部署ごとにメニュー表示をカスタマイズ

2025/10/12公開

[管理画面フォーマット開発編 #10] メニュー管理UIをDB連携するのイメージ

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

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

2025/10/8公開

[管理画面フォーマット開発編 #9 前編] 部署別ロール対応 ─ ユーザ管理の改修

DepartmentRole導入に伴い、ユーザ管理で「実効ロール」を参照するように修正

2025/10/5公開

[管理画面フォーマット開発編 #9 前編] 部署別ロール対応 ─ ユーザ管理の改修のイメージ

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

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

2025/10/2公開

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

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

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

2025/9/29公開

管理画面フォーマット開発編 #11パスワード再発行依頼とメールテンプレート統合

0. はじめに

本記事で到達するゴール

読み進める前に

主な変更ファイルと目的

1. PasswordRequestテーブルの追加 ─ DB設計とモデル定義

モデル設計のポイント

モデル全体の構造

Prismaマイグレーション

2. 公開フォームからの再発行依頼を処理する

サーバアクション（新規作成）

公開フォーム（クライアント）の差し替え

3. 管理画面での依頼一覧と再発行処理

Server Actionの実装 ─ password-requests.ts

○主な構成と役割

○ 処理の流れ（再発行の場合）

○状態遷移まとめ

○実装ポイント

○まとめ

メールテンプレートの追加 ─ templates.ts

○構成と目的

○実装ポイント

○メールテンプレート統合の狙い

状態フィルタコンポーネントの追加 ─ status-multi-select.tsx

○役割と配置

○Props（I/F）

○振る舞い（UI/状態同期の要点）

○統合ポイント（どこで使うか）

型定義の拡張 ─ table-meta.d.ts

○変更概要（差分要点）

○型の責務分離

○統合ポイント

○設計の意図

ページ構成の更新 ─ page.tsx

○変更点の要約

○データ整形フロー

○実装上のポイント

カラム定義の更新 ─ columns.tsx

○変更点の要約（差分の主眼）

○カラム構成（表示/機能）

○実装のポイント

○注意点

DataTableの更新 ─ data-table.tsx

○変更点の要約（差分の主眼）

○UIフロー（概略）

○フィルタ/ソート仕様（実装ルール）

○操作（Server Action連携）

○CSV出力の仕様

○注意点（運用・実装）

4. メールテンプレートを一元管理する

方針と命名規約

既存Actionの差し替えポイント

変更の狙い（実運用視点）

profile/email-verify.ts の整理（通知対象の厳密化）

○参照の目安（テンプレAPIの設計意図）

5. まとめと次回予告

今回の実装ポイント（総括）

次回予告

参考文献

管理画面フォーマット開発編 #11
パスワード再発行依頼とメールテンプレート統合

`profile/email-verify.ts` の整理（通知対象の厳密化）