セッション開始:2026/06/05 05:54
システム管理画面の組織一覧 /organizations は全組織を名前順に無条件で並べるだけで、
組織数が増えると目的の組織を探しづらい。システム管理者が
組織名・契約プランで素早く絞り込めるよう、一覧上部に検索 UI を追加する。
やること
?name=&contractPlan=)に保持し、検索ボタンで適用やらないこと
| 対象画面 | system-manager /organizations(組織一覧) |
| 組織名検索 | 部分一致・大文字小文字を区別しない(Prisma contains + mode: "insensitive") |
| 契約プラン絞り込み | プルダウン単一選択。選択肢は すべて/各プラン名(月額昇順)。「未設定」は設けない(組織作成時にプラン必須のため) |
| 条件の結合 | 両方指定時は AND(両条件を満たす組織のみ) |
| 実行方式 | URL クエリ(?name=&contractPlan=)+検索ボタンで適用。Prisma where でサーバー側絞り込み |
| プランの値エンコード | すべて → クエリ無し、各プラン → contractPlan={'{id}'}(フォーム内部値「all」はクエリに出さない) |
| 状態保持 | URL に残り、リロード・共有でも条件が維持される |
| 補助 UI | 0 件時のメッセージのみ(クリアボタン・件数表示は付けない) |
| 並び順 | 既存どおり名前昇順(変更なし) |
見出し「組織」の下・一覧の上に検索フォーム(組織名入力+プラン選択+検索ボタン)を配置する。
条件に合致する組織が無い場合:
apps/system-manager/actions/organization/list-organization.ts
{ name?, contractPlanId? } を受け取り where を組み立て。
name は contains + mode: "insensitive"。
contractPlanId は undefined=絞り込まない / null=未設定 / 文字列=そのプラン。
apps/system-manager/app/organizations/_components/organization-search-form/index.tsx
クライアントコンポーネント。組織名 Input・契約プラン Select・検索 Button を持ち、
送信時に createSearchParams でクエリを組んで router.push。
入力欄は _fields/ に分割、バリデーションは schema.ts に集約。
apps/system-manager/lib/url/create-search-params.ts
Record<string, string | undefined> から
undefined・空文字を除いた URLSearchParams を生成するユーティリティ。
apps/system-manager/app/organizations/page.tsx
searchParams を解釈して listOrganizationCached に渡す。
検索フォーム(プラン選択肢は listContractPlanCached から取得)を一覧上部に配置し、
結果 0 件時のメッセージを表示。
apps/system-manager/actions/contract-plan/list-contract-plan.ts
既存。プルダウンの選択肢(月額昇順)として利用(変更なし)。
where)で行うため、組織数が増えても一覧の初期表示は重くならない。tsc --noEmit)はパス済み。実機での挙動確認も完了(下記「動作チェックでの修正」参照)。実機での動作確認を経て、以下を修正・確定した。
契約プラン「未設定」絞り込みを廃止
組織の登録・変更 UI 上、契約プランの未設定(null)が不可で該当組織が発生しないため、
プルダウンの「未設定」選択肢・URL の contractPlan=none エンコードを廃止。
選択肢は「すべて/各プラン」のみ。
URL クエリ名を contractPlan に統一
当初の計画 contractPlanId から contractPlan に変更。
値は各プランの cuid2(フォーム内部値「all」はクエリへ出力しない)。
フォームの構成を分割・共通化
入力欄を _fields/name-field.tsx /
_fields/contract-plan-id-field.tsx に分割し、
バリデーションは _components/organization-search-form/schema.ts(react-hook-form + zod)へ集約。
クエリ組み立ては apps/system-manager/lib/url/create-search-params.ts に切り出し
(undefined・空文字を除外)。