0013. 「準備中」機能のナビゲーション・ゲーティング¶

ステータス: Accepted（実装済み）
関連: 0014 フロントエンド技術選定

コンテキストと課題¶

製品の全体像 (受託案件・スケジュール・配車・計量・マニフェスト・各種集計…) をナビに見せたいが、一部の画面はまだ実装途中。未完成の画面にユーザーが到達すると混乱を招く。一方で、ルート定義ごと消すと開発が中断し、リリース時の差し戻しコストも上がる。ルートは温存しつつ、UI からの到達だけを止めたい。

決定¶

ナビ定義 (nav-config.tsx) に status: 'soon' を持たせ、当該項目をリンクではなく「準備中」ラベル付きの非活性表示にする。ルートの実体 (画面コンポーネント) は残す。

export interface NavItem {
  label: string;
  to: string;
  icon: LucideIcon;
  /** "soon" = 「準備中」ラベル付きで非活性（UI から到達不可・ルート実体は温存） */
  status?: 'soon';
  matchExact?: boolean;
}

ナビ項目は 業務フロー順 (概要 → 日常業務 → 集計/分析 → マスタ/管理) に並べ、未実装は status: 'soon'。 (現状 v1.16.0 の処理業者 admin ナビでは status: 'soon' の項目は無い。かつて soon にしていた「受託案件」「スケジュール」「月次集計」は PR #207 で メニューから除外 した (ルート実体は温存)。有効な項目は「配車」「計量」「マニフェスト」「持ち込み計量」「持ち込み一覧」「コスト集計」「委託精算」「取引先」「委託先」「二次搬出運搬費」「車両」「メンバー」「会社情報」。soon パターンの現行の使い所は排出事業者 (discharger) ナビの「JWNET連携」で、未提供のため soon で非活性化している。)
レンダリングの分岐: status === 'soon' の項目は SideNav / BottomTabBar / オーバーフローシートのいずれも、<NavLink> ではなく aria-disabled="true" の <span> として描画し、「準備中」を表示する (クリックしても遷移しない)。
下部タブの選別: selectBottomTabs が soon をタブ枠から除外し、有効項目の先頭 4 件を表示、残りと soon を「その他」(オーバーフロー) に回す。
リリース時は当該項目の status: 'soon' を外すだけで有効化できる。

影響 (Consequences)¶

良い点¶

製品の 完成形のナビ構造 を最初から見せつつ、未完成画面への到達を防げる。情報設計 (並び順) を先に固定できる。
有効化が status: 'soon' の除去だけで済み、ルートや画面を作り直さずに段階リリースできる。
表示の正は nav-config.tsx の 1 箇所に集約され、各レンダラはそれを解釈するだけ。

トレードオフ / 注意点¶

これは UX レベルのゲート であり認可ではない。ルート実体は残っているため、URL を直接叩けば到達し得る (アクセス制御は RLS / RoleGuard が担う。soon は「ナビから隠す」だけ)。
soon の分岐を SideNav / BottomTabBar / オーバーフローの 各レンダラが個別に実装しているため、新しいナビ表示を追加するときは soon 対応を忘れないようにする必要がある。
status は現状 'soon' の 1 値のみ。将来 beta など状態を増やすと各レンダラの分岐が膨らむ。

根拠 (典拠)¶

apps/web/src/components/shell/nav-config.tsx:23-38 — NavItem の status?: 'soon' 定義 (UI 到達不可・ルート温存のコメント)。
apps/web/src/components/shell/nav-config.tsx:47-65 — 排出事業者ナビの status: 'soon' 実例 (「JWNET連携」)。
apps/web/src/components/shell/nav-config.tsx:80-135 — 処理業者 admin ナビ (業務フロー順・現状 soon 項目なし。PR #207 で「受託案件」「スケジュール」「月次集計」をメニューから除外・コメントに明記)。
apps/web/src/components/shell/nav-config.tsx:226-235 — selectBottomTabs (soon を下部タブ枠から除外しオーバーフローへ回す)。
apps/web/src/components/shell/ の SideNav / BottomTabBar / オーバーフローシート — soon 分岐 (aria-disabled の <span> + 「準備中」で非活性化)。
apps/web/src/components/shell/ の BottomTabBar / オーバーフローシート — soon を <span> で非活性化。