// =============================================================
// Screens.jsx — 全画面プレースホルダー定義
// =============================================================
const SCREEN_DEFS = {
// ─── 現場担当者 ────────────────────────────────────────────
LOGIN_FIELD: {
title: 'ログイン画面',
sub: 'ID・パスワード入力',
role: 'field',
icon: 'LogIn',
color: { bg: 'bg-indigo-50', ic: 'text-indigo-400', pill: 'bg-indigo-100 text-indigo-700' },
note: 'ログイン後、ホーム画面に遷移',
},
HOME_FIELD: {
title: 'ホーム画面',
sub: 'ステータスダッシュボード・メインメニュー',
role: 'field',
icon: 'Home',
color: { bg: 'bg-blue-50', ic: 'text-blue-400', pill: 'bg-blue-100 text-blue-700' },
note: '未完了是正アラート / 本日チェック完了状況を表示',
},
CHECK_INPUT: {
title: 'チェック入力画面',
sub: 'エリア選択 → OK / NG 入力 → NG 詳細 → 確認・保存',
role: 'field',
icon: 'ClipboardCheck',
color: { bg: 'bg-emerald-50', ic: 'text-emerald-500', pill: 'bg-emerald-100 text-emerald-700' },
note: '全項目チェック＋NG時は写真・コメント必須。確認ダイアログ経由で保存',
},
CHECK_HISTORY: {
title: 'チェック履歴一覧画面',
sub: '月ごとに横スクロールで時系列表示',
role: 'field',
icon: 'Clock',
color: { bg: 'bg-teal-50', ic: 'text-teal-500', pill: 'bg-teal-100 text-teal-700' },
note: '月単位で横スクロール。タップでチェック履歴詳細へ遷移',
},
CHECK_HISTORY_DETAIL: {
title: 'チェック履歴詳細画面',
sub: 'NG 詳細・コメント・写真を一覧表示',
role: 'field',
icon: 'FileText',
color: { bg: 'bg-cyan-50', ic: 'text-cyan-500', pill: 'bg-cyan-100 text-cyan-700' },
note: 'ヘッダに日付・NG件数。NG項目の詳細を列挙',
},
CORRECTION_LIST_FIELD: {
title: '是正指示一覧画面',
sub: '受信した是正指示の一覧・未実施アラート',
role: 'field',
icon: 'Bell',
color: { bg: 'bg-orange-50', ic: 'text-orange-500', pill: 'bg-orange-100 text-orange-700' },
note: '未実施が1件でもあれば通知ランプを表示',
},
CORRECTION_DETAIL_FIELD: {
title: '是正指示内容詳細画面',
sub: '指示内容（上部）+ 報告履歴タブ（下部）',
role: 'field',
icon: 'FileSearch',
color: { bg: 'bg-amber-50', ic: 'text-amber-500', pill: 'bg-amber-100 text-amber-700' },
note: '差戻し時は直近の報告をコピーして新規送信',
},
CORRECTION_REPORT_INPUT: {
title: '是正対応報告入力画面',
sub: '対応内容・写真の報告入力 → 確認・送信',
role: 'field',
icon: 'Send',
color: { bg: 'bg-yellow-50', ic: 'text-yellow-500', pill: 'bg-yellow-100 text-yellow-700' },
note: '未入力項目があると確認ボタン disabled。保存後 toast → 詳細画面へ',
},
// ─── 管理者 ─────────────────────────────────────────────────
LOGIN_ADMIN: {
title: 'ログイン画面',
sub: '管理者 — ID・パスワード入力',
role: 'admin',
icon: 'LogIn',
color: { bg: 'bg-slate-100', ic: 'text-slate-400', pill: 'bg-slate-200 text-slate-600' },
note: 'ログイン後、管理者ホーム画面に遷移',
},
HOME_ADMIN: {
title: 'ホーム画面',
sub: '管理者 — メインメニュー・サマリー',
role: 'admin',
icon: 'Home',
color: { bg: 'bg-indigo-50', ic: 'text-indigo-400', pill: 'bg-indigo-100 text-indigo-700' },
note: '各機能へのクイックリンクと集計サマリーを表示',
},
DASHBOARD_MONTHLY: {
title: '月次集計ダッシュボード画面',
sub: '全体集計・グラフ表示',
role: 'admin',
icon: 'BarChart2',
color: { bg: 'bg-blue-50', ic: 'text-blue-400', pill: 'bg-blue-100 text-blue-700' },
note: 'OK率推移・NG件数・センター別比較グラフ',
},
CENTER_DETAIL: {
title: 'センター別集計詳細画面',
sub: 'センターごとの詳細集計',
role: 'admin',
icon: 'Building2',
color: { bg: 'bg-sky-50', ic: 'text-sky-500', pill: 'bg-sky-100 text-sky-700' },
note: 'センター選択後にエリア別・カテゴリ別の集計を表示',
},
CSV_EXPORT: {
title: 'CSVエクスポート画面',
sub: '出力条件指定・ダウンロード',
role: 'admin',
icon: 'Download',
color: { bg: 'bg-teal-50', ic: 'text-teal-500', pill: 'bg-teal-100 text-teal-700' },
note: '期間・センター・エリアを絞り込んでCSVダウンロード',
},
CORRECTION_LIST_ADMIN: {
title: '是正指示一覧画面',
sub: '管理者 — 発行済み是正指示の管理',
role: 'admin',
icon: 'Layers',
color: { bg: 'bg-orange-50', ic: 'text-orange-500', pill: 'bg-orange-100 text-orange-700' },
note: 'ステータス別にフィルタ。クリックで是正結果確認へ',
},
CORRECTION_CREATE: {
title: '是正指示作成画面',
sub: '新規是正指示の作成・送信',
role: 'admin',
icon: 'FilePlus',
color: { bg: 'bg-amber-50', ic: 'text-amber-500', pill: 'bg-amber-100 text-amber-700' },
note: 'センター・対象エリア選択、指示内容・期限を入力して送信',
},
CORRECTION_RESULT: {
title: '是正結果確認画面',
sub: '対応報告の確認・承認・差戻し',
role: 'admin',
icon: 'CheckSquare',
color: { bg: 'bg-green-50', ic: 'text-green-500', pill: 'bg-green-100 text-green-700' },
note: '承認 / 差戻しボタン、差戻し時は理由入力が必須',
},
INCIDENT_LIST: {
title: 'ヒヤリハット一覧画面',
sub: '管理者 — インシデント記録・ハザード別集計',
role: 'admin',
icon: 'AlertTriangle',
color: { bg: 'bg-amber-50', ic: 'text-amber-500', pill: 'bg-amber-100 text-amber-700' },
note: 'FSI発見・ヒヤリハットの一覧表示、ハザード別・月別集計チャート、詳細モーダル付き',
},
MASTER_MENU: {
title: 'マスタ管理メニュー画面',
sub: 'マスタ管理の各メニューへのリンク',
role: 'admin',
icon: 'LayoutGrid',
color: { bg: 'bg-purple-50', ic: 'text-purple-500', pill: 'bg-purple-100 text-purple-700' },
note: 'チェック項目・センター/エリア・ユーザー管理へのナビ',
},
CHECK_ITEM_MGMT: {
title: 'チェック項目管理画面',
sub: 'チェック項目の CRUD 操作',
role: 'admin',
icon: 'ClipboardList',
color: { bg: 'bg-violet-50', ic: 'text-violet-500', pill: 'bg-violet-100 text-violet-700' },
note: 'カテゴリ別に表示、追加・編集・有効/無効の切り替え',
},
CENTER_AREA_MGMT: {
title: 'センター・エリア管理画面',
sub: 'センター・エリアの CRUD 操作',
role: 'admin',
icon: 'Building2',
color: { bg: 'bg-fuchsia-50', ic: 'text-fuchsia-500', pill: 'bg-fuchsia-100 text-fuchsia-700' },
note: 'センター一覧 → エリア一覧のドリルダウン構成',
},
USER_MGMT: {
title: 'ユーザー管理画面',
sub: 'ユーザーの CRUD 操作',
role: 'admin',
icon: 'Users',
color: { bg: 'bg-rose-50', ic: 'text-rose-500', pill: 'bg-rose-100 text-rose-700' },
note: 'センター・権限でフィルタ、パスワードリセット機能あり',
},
};
// ─── プレースホルダー共通コンポーネント ──────────────────────
const PlaceholderScreen = ({ screenKey }) => {
const Icons = window.LucideReact || {};
const def = SCREEN_DEFS[screenKey];
if (!def) {
return (
未定義の画面キー: {screenKey}
);
}
const Icon = Icons[def.icon] || Icons['FileText'];
const { bg, ic, pill } = def.color;
const rolePill = def.role === 'field'
? 'bg-indigo-100 text-indigo-700'
: 'bg-slate-200 text-slate-600';
const roleLabel = def.role === 'field' ? '現場担当者' : '管理者';
return (
{/* アイコン */}
{/* ロールバッジ */}
{roleLabel}
{/* タイトル */}
{def.title}
{/* サブタイトル */}
{def.sub}
{/* 実装メモ */}
{/* PoC バッジ */}
実装予定（PoC Phase 1）