import React, { useState } from "react";
const DARK = {
bg: "#0f1419", sf: "#1a2332", sfH: "#1e2a3a", bd: "#2a3a4e",
pr: "#3b82f6", prD: "#1e3a5f", ok: "#22c55e", okD: "#0a3d1f",
wn: "#f59e0b", wnD: "#3d2a06", ng: "#ef4444", ngD: "#3d1111",
ngB: "#ff6b6b", tx: "#e2e8f0", txD: "#94a3b8", txM: "#64748b", ac: "#06b6d4"
};
const LIGHT = {
bg: "#f1f5f9", sf: "#ffffff", sfH: "#f8fafc", bd: "#e2e8f0",
pr: "#2563eb", prD: "#dbeafe", ok: "#16a34a", okD: "#dcfce7",
wn: "#d97706", wnD: "#fef3c7", ng: "#dc2626", ngD: "#fee2e2",
ngB: "#dc2626", tx: "#1e293b", txD: "#475569", txM: "#94a3b8", ac: "#0891b2"
};
const LOG = [
{ f: "MEGAドンキ渋谷本店", m: "PUDU CC1", s: "8111R5628060011", d: "3/27", t: "02:00", h1: "充電中", h30: "待機中", dp: true, cp: 92, g: "◎" },
{ f: "ドンキ新宿歌舞伎町店", m: "PUDU CC1", s: "8111R5628060022", d: "3/27", t: "02:00", h1: "ハンドルアップ", h30: "ハンドルアップ", dp: false, cp: 0, g: "×" },
{ f: "MEGAドンキ池袋駅北口店", m: "PUDU CC1", s: "8111R5628060033", d: "3/27", t: "01:30", h1: "待機中", h30: "待機中", dp: true, cp: 45, g: "△" },
{ f: "ドンキ中目黒本店", m: "PUDU CC1", s: "8111R5628060044", d: "3/27", t: "03:00", h1: "待機中", h30: "待機中", dp: false, cp: 0, g: "×" },
{ f: "MEGAドンキ港山下総本店", m: "PUDU CC1", s: "8111R5628060055", d: "3/27", t: "02:00", h1: "待機中", h30: "待機中", dp: true, cp: 35, g: "△" },
{ f: "ドンキ八王子駅前店", m: "PUDU CC1", s: "8111R5628060077", d: "3/27", t: "02:30", h1: "オフライン", h30: "オフライン", dp: false, cp: 0, g: "×" },
{ f: "ドンキ町田店", m: "PUDU CC1", s: "8111R5628060088", d: "3/27", t: "03:00", h1: "待機中", h30: "待機中", dp: false, cp: 0, g: "×" },
{ f: "MEGAドンキ立川店", m: "PUDU CC1", s: "8111R5628060099", d: "3/27", t: "01:30", h1: "緊急停止", h30: "待機中", dp: true, cp: 62, g: "△" },
{ f: "MEGAドンキ吉祥寺店", m: "PUDU CC1", s: "8111R5628060122", t: "02:00", h1: "待機中", h30: "待機中", dp: true, cp: 96, g: "◎" },
{ f: "ドンキ三軒茶屋店", m: "PUDU CC1", s: "8111R5628060133", t: "02:30", h1: "待機中", h30: "待機中", dp: true, cp: 94, g: "◎" },
];
const PRECHK = [
{ id: 1, sev: "1h前異常", serial: "8111R5628060011", fac: "MEGAドンキ渋谷本店", sch: "02:00", st: "充電中", ok: true, at: "01:45", dt: "3/27 01:00", note: "30分前までに充電完了、出発成功" },
{ id: 2, sev: "1h前異常", serial: "8111R5628060022", fac: "ドンキ新宿歌舞伎町店", sch: "02:00", st: "ハンドルアップ", ok: false, at: "-", dt: "3/27 01:00", note: "30分前も未解消 → 出発失敗" },
{ id: 3, sev: "1h前異常", serial: "8111R5628060099", fac: "MEGAドンキ立川店", sch: "01:30", st: "緊急停止", ok: true, at: "01:10", dt: "3/27 00:30", note: "30分前に復旧、出発成功（完了率62%）" },
{ id: 4, sev: "1h前異常", serial: "8111R5628060077", fac: "ドンキ八王子駅前店", sch: "02:30", st: "オフライン", ok: false, at: "-", dt: "3/27 01:30", note: "30分前もオフライン → 出発失敗" },
{ id: 5, sev: "出発失敗", serial: "8111R5628060044", fac: "ドンキ中目黒本店", sch: "03:00", st: "セキュリティ有効", ok: false, at: "-", dt: "3/27 03:00", note: "セキュリティ解除されず出発不可" },
{ id: 6, sev: "出発失敗", serial: "8111R5628060088", fac: "ドンキ町田店", sch: "03:00", st: "セキュリティ有効", ok: false, at: "-", dt: "3/27 03:00", note: "セキュリティ解除されず出発不可" },
];
const DSA_INIT = [
{ id: 1, type: "セキュリティ無効", dev: "DS-001", fac: "MEGAドンキ渋谷本店", tm: "3/27 03:42", det: "清掃終了後もセキュリティが復帰していない", st: "未対応", mm: "" },
{ id: 2, type: "通信断", dev: "DS-005", fac: "MEGAドンキ大森山王店", tm: "3/27 02:55", det: "DS-005 が6時間以上通信なし", st: "未対応", mm: "" },
{ id: 3, type: "トークン期限", dev: "DS-004", fac: "MEGAドンキ港山下総本店", tm: "3/20", det: "DS-004 残り9日", st: "対応中", mm: "更新手続き中" },
{ id: 4, type: "セキュリティ無効", dev: "DS-003", fac: "ドンキ中目黒本店", tm: "3/26 03:55", det: "復帰遅延（10分後に復帰）", st: "対応済み", mm: "正常復帰を確認" },
];
const RANK = [
{ f: "ドンキ蒲田駅前店", ar: 68, arP: 75, dp: 72, dpP: 80, cv: 55, cvP: 62, er: 12.5, erP: 9.0, s: "要改善", cont: 5 },
{ f: "ドンキ八王子駅前店", ar: 72, arP: 70, dp: 65, dpP: 68, cv: 63, cvP: 60, er: 9.8, erP: 10.2, s: "要改善", cont: 3 },
{ f: "ドンキ新宿歌舞伎町店", ar: 78, arP: 82, dp: 82, dpP: 85, cv: 71, cvP: 78, er: 7.2, erP: 5.5, s: "注意", cont: 0 },
{ f: "MEGAドンキ立川店", ar: 85, arP: 83, dp: 90, dpP: 88, cv: 80, cvP: 78, er: 5.1, erP: 5.8, s: "注意", cont: 0 },
{ f: "MEGAドンキ池袋駅北口店", ar: 92, arP: 90, dp: 95, dpP: 93, cv: 88, cvP: 85, er: 3.2, erP: 4.0, s: "良好", cont: 0 },
{ f: "MEGAドンキ渋谷本店", ar: 96, arP: 95, dp: 98, dpP: 97, cv: 94, cvP: 92, er: 1.8, erP: 2.1, s: "良好", cont: 0 },
];
const ROBOTS = [
{ f: "MEGAドンキ渋谷本店", pref: "東京都", addr: "サンプル区サンプル町1-1", tel: "03-0000-0001", mgr: "店長A", staff: "担当者A", email: "store01@example.com", mon: true, dsec: true, bots: [{ mk: "PUDU", md: "CC1", sn: "8111R5628060011" }] },
{ f: "ドンキ新宿歌舞伎町店", pref: "東京都", addr: "サンプル区サンプル町1-2", tel: "03-0000-0002", mgr: "店長B", staff: "担当者B", email: "store02@example.com", mon: true, dsec: false, bots: [{ mk: "PUDU", md: "CC1", sn: "8111R5628060022" }] },
{ f: "MEGAドンキ池袋駅北口店", pref: "東京都", addr: "サンプル区サンプル町1-3", tel: "03-0000-0003", mgr: "店長C", staff: "担当者C", email: "store03@example.com", mon: true, dsec: true, bots: [{ mk: "PUDU", md: "CC1", sn: "8111R5628060033" }] },
{ f: "ドンキ中目黒本店", pref: "東京都", addr: "サンプル区サンプル町1-4", tel: "03-0000-0004", mgr: "店長D", staff: "担当者D", email: "store04@example.com", mon: true, dsec: true, bots: [{ mk: "PUDU", md: "CC1", sn: "8111R5628060044" }] },
{ f: "MEGAドンキ港山下総本店", pref: "神奈川県", addr: "サンプル市サンプル町1-5", tel: "045-000-0005", mgr: "店長E", staff: "担当者E", email: "store05@example.com", mon: true, dsec: true, bots: [{ mk: "PUDU", md: "CC1", sn: "8111R5628060055" }, { mk: "PUDU", md: "Phantas", sn: "8222P4527080066" }] },
{ f: "ドンキ八王子駅前店", pref: "東京都", addr: "サンプル市サンプル町1-6", tel: "042-000-0006", mgr: "店長F", staff: "担当者F", email: "store06@example.com", mon: true, dsec: false, bots: [{ mk: "PUDU", md: "CC1", sn: "8111R5628060077" }] },
{ f: "MEGAドンキ立川店", pref: "東京都", addr: "サンプル市サンプル町1-7", tel: "042-000-0007", mgr: "店長G", staff: "担当者G", email: "store07@example.com", mon: true, dsec: true, bots: [{ mk: "PUDU", md: "CC1", sn: "8111R5628060099" }, { mk: "PUDU", md: "CC1", sn: "8111R5628060100" }, { mk: "Keenon", md: "T5", sn: "9333K7412050111" }] },
{ f: "MEGAドンキ吉祥寺店", pref: "東京都", addr: "サンプル市サンプル町1-8", tel: "0422-00-0008", mgr: "店長H", staff: "担当者H", email: "store08@example.com", mon: true, dsec: false, bots: [{ mk: "PUDU", md: "CC1", sn: "8111R5628060122" }] },
{ f: "ドンキ三軒茶屋店", pref: "東京都", addr: "サンプル区サンプル町1-9", tel: "03-0000-0009", mgr: "店長I", staff: "担当者I", email: "store09@example.com", mon: true, dsec: false, bots: [{ mk: "PUDU", md: "CC1", sn: "8111R5628060133" }] },
];
const SCHED = [
{ s: "8111R5628060011", f: "MEGAドンキ渋谷本店", d: "毎日", st: "02:00", en: "03:00", on: true },
{ s: "8111R5628060022", f: "ドンキ新宿歌舞伎町店", d: "毎日", st: "02:00", en: "02:45", on: true },
{ s: "8111R5628060044", f: "ドンキ中目黒本店", d: "月水金", st: "03:00", en: "03:45", on: true },
{ s: "8111R5628060077", f: "ドンキ八王子駅前店", d: "毎日", st: "02:30", en: "03:15", on: false },
];
const DSDEV = [
{ id: "DS-001", f: "MEGAドンキ渋谷本店", st: "異常", lc: "3/27 03:42", te: "2026-06-15", n: "セキュリティ復帰失敗" },
{ id: "DS-002", f: "MEGAドンキ池袋駅北口店", st: "正常", lc: "3/27 09:01", te: "2026-08-20", n: "" },
{ id: "DS-003", f: "ドンキ中目黒本店", st: "正常", lc: "3/27 09:00", te: "2026-07-10", n: "" },
{ id: "DS-004", f: "MEGAドンキ港山下総本店", st: "正常", lc: "3/27 08:55", te: "2026-04-05", n: "" },
{ id: "DS-005", f: "MEGAドンキ大森山王店", st: "通信断", lc: "3/27 02:55", te: "2026-07-20", n: "6時間以上通信なし" },
];
var INSP_ITEMS = ["ブラシ", "ダストボックス", "フィルター", "スクイジー", "吸引ホース", "汚水タンク", "ブラシ裏面"];
const INSPECTIONS = [
{ id: 1, date: "2026/03/11", inspector: "検査担当A", company: "DFA Robotics", brand: "ドン・キホーテ", facility: "サンプル店舗1", robot: "8111R5628060011", notes: "" },
{ id: 2, date: "2026/03/11", inspector: "検査担当A", company: "DFA Robotics", brand: "ドン・キホーテ", facility: "サンプル店舗2", robot: "8111R5628060022", notes: "" },
{ id: 3, date: "2026/03/11", inspector: "検査担当A", company: "DFA Robotics", brand: "ドン・キホーテ", facility: "サンプル店舗3", robot: "8111R5628060033", notes: "サンプルメモ: 過去の対応履歴あり、現状異常なし" },
{ id: 4, date: "2026/03/11", inspector: "検査担当A", company: "DFA Robotics", brand: "ドン・キホーテ", facility: "サンプル店舗4", robot: "8111R5628060044", notes: "" },
{ id: 5, date: "2026/03/16", inspector: "検査担当A", company: "DFA Robotics", brand: "ドン・キホーテ", facility: "サンプル店舗5", robot: "8111R5628060055", notes: "" },
{ id: 6, date: "2026/03/16", inspector: "検査担当A", company: "DFA Robotics", brand: "ユニー", facility: "サンプル店舗6", robot: "8111R5628060066", notes: "" },
{ id: 7, date: "2026/03/16", inspector: "検査担当A", company: "DFA Robotics", brand: "ドン・キホーテ", facility: "サンプル店舗7", robot: "8111R5628060077", notes: "" },
];
function Pill({ text, color }) {
return (
<span style={{ fontSize: 12, padding: "2px 8px", borderRadius: 4, background: color + "22", color: color }}>
{text}
</span>
);
}
function Num({ value, label, sub, color, onClick, c }) {
return (
<div onClick={onClick} style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, padding: "20px 24px", cursor: onClick ? "pointer" : "default", borderLeft: "3px solid " + color }}>
<div style={{ fontSize: 11, color: c.txM, textTransform: "uppercase", letterSpacing: 1.2, marginBottom: 8 }}>{label}</div>
<div style={{ fontSize: 36, fontWeight: 700, color: color, lineHeight: 1 }}>{value}</div>
{sub && <div style={{ fontSize: 12, color: c.txD, marginTop: 6 }}>{sub}</div>}
</div>
);
}
function stColor(c, v) {
if (v === "待機中") return c.ok;
if (v === "充電中") return c.pr;
if (v === "ハンドルアップ" || v === "緊急停止" || v === "オフライン") return c.ng;
if (v === "セキュリティ有効") return c.ac;
return c.txD;
}
function gradeStyle(c, g) {
if (g === "◎" || g === "○") return { bg: c.okD, tx: c.ok };
if (g === "△") return { bg: c.wnD, tx: c.wn };
return { bg: c.ngD, tx: c.ng };
}
export default function App() {
const [page, setPage] = useState("dashboard");
const [dark, setDark] = useState(true);
const [lang, setLang] = useState("ja");
var T = {
"エラー率": "Error Rate", "変化": "Change", "期間": "Period",
"最終ログイン": "Last Login", "上位10件に戻す": "Show top 10",
"シリアル:": "Serial:", "シリアルNo.": "Serial No.", "ブランド:": "Brand:",
"所属会社:": "Org.:", "記入者:": "Inspector:",
"ロボット *": "Robot *", "店舗 *": "Store *", "所属会社 *": "Org. *",
"記入者氏名 *": "Inspector name *", "訪問日 *": "Visit date *",
"選択してください": "Please select", "店舗を選択すると表示": "Select a store to show",
"📷 アップロード": "📷 Upload", "📷 写真": "📷 Photo",
"姓 名": "First Last", "例: PPIH": "e.g. PPIH", "例: 株式会社○○": "e.g. ○○ Inc.",
"PPIH（グループ）": "PPIH (Group)",
"施設名 / シリアル": "Facility / Serial", "施設名 / シリアル / 住所": "Facility / Serial / Address",
"施設名 / デバイスID": "Facility / Device ID", "施設名 / 記入者": "Facility / Inspector",
"問題エリアはありません（全エリア◎○）": "No problem areas (all ◎○)",
"申し送り事項があればこちらに記載ください": "Add any handover notes here",
"DFAロボット監視システム": "DFA Robot Monitoring System", "DFA運用担当": "DFA Operator",
"📊 ダッシュボード": "📊 Dashboard", "📋 清掃詳細ログ": "📋 Cleaning Logs", "🔔 アラート": "🔔 Alerts", "📈 レポート": "📈 Reports", "🔧 点検記録": "🔧 Inspections",
"🔒 D-Secログ": "🔒 D-Sec Logs", "⚠ D-Secアラート": "⚠ D-Sec Alerts",
"🏢 施設ロボットマスタ": "🏢 Facility Master", "📅 スケジュール": "📅 Schedules", "⚙ システム管理": "⚙ System Admin",
"モニタリング": "MONITORING", "設定": "SETTINGS",
"施設名": "Facility", "機種": "Model", "シリアル": "Serial", "日付": "Date", "予定": "Scheduled", "出発": "Dep.", "完了率": "Completion", "判定": "Grade",
"接続状態": "Status", "最終通信": "Last Comm.", "トークン期限": "Token Expiry", "残日数": "Days Left", "備考": "Notes", "操作": "Actions",
"会社名": "Company", "グループ名": "Group", "連絡先": "Contact", "契約プラン": "Plan", "契約モジュール": "Modules", "状態": "Status", "ステータス": "Status",
"名前": "Name", "メール": "Email", "ロール": "Role", "会社": "Company", "施設": "Facility", "訪問日": "Visit Date", "記入者": "Inspector", "所属会社": "Org.", "店舗名": "Store", "ブランド": "Brand", "申し送り": "Notes",
"ダッシュボード": "Dashboard", "清掃詳細ログ": "Cleaning Detail Log", "アラート（事前チェック）": "Alerts (Pre-check)", "レポート": "Reports", "D-Sec ログ": "D-Sec Logs", "D-Security アラート": "D-Security Alerts", "施設ロボットマスタ": "Facility Robot Master", "スケジュール管理": "Schedule Mgmt", "システム管理": "System Admin", "点検記録": "Inspection Records",
"CSVエクスポート": "CSV Export", "CSV": "CSV", "検索": "Search", "閉じる": "Close", "キャンセル": "Cancel", "保存": "Save", "登録": "Register", "編集": "Edit", "削除": "Delete", "詳細": "Detail",
"全グループ": "All Groups", "全会社": "All Companies", "全件": "All", "全ステータス": "All Status", "全種別": "All Types", "全て": "All",
"未解消のみ": "Unresolved", "解消済み": "Resolved", "未対応・対応中": "Open / In Progress", "対応済み": "Done", "△×のみ": "△× Only", "×のみ": "× Only",
"問題エリアのみ": "Problems Only",
"未解消": "Unresolved", "要対応": "Action Needed", "合計": "Total", "全アラート": "All Alerts", "対応完了": "Completed", "未対応": "Open", "即時対応": "Urgent", "対応中": "In Progress", "進行中": "Ongoing", "完了": "Done",
"正常稼働": "Normal", "異常・通信断": "Error / Offline", "D-Sデバイス総数": "Total Devices",
"週次": "Weekly", "月次": "Monthly", "稼働率": "Uptime", "出発成功率": "Dep. Rate", "清掃完了率": "Completion", "エラー発生率": "Error Rate",
"連続問題施設": "Recurring Issues", "エラー種別の内訳": "Error Breakdown", "施設別パフォーマンス（稼働率ワースト順）": "Facility Performance (Worst Uptime)",
"表示設定": "Display", "通知設定": "Notifications", "ユーザー管理": "Users", "権限管理": "Permissions", "顧客管理": "Customers", "グループ管理": "Groups", "運用設定": "Operations", "監査ログ": "Audit Log",
"要改善": "Needs Fix", "注意": "Caution", "良好": "Good", "有効": "Active", "停止": "Inactive",
"事前チェック設定": "Pre-check Timing", "完了率の判定閾値": "Completion Thresholds", "アドバイス エスカレーション閾値": "Escalation Thresholds", "分前": "min before", "日以上連続": "consecutive days+",
"+ 新規登録": "+ New Record", "+ 顧客追加": "+ Add Customer", "+ グループ追加": "+ Add Group", "📥 CSVインポート": "📥 CSV Import",
"エリア別詳細を見る →": "View Area Details →", "エリア別清掃完了率": "Area Completion Rates",
"点検記録 詳細": "Inspection Detail", "点検記録 新規登録": "New Inspection", "総点検数": "Total", "期間内": "In Period", "点検施設数": "Facilities", "ユニーク": "Unique", "申し送りあり": "Has Notes", "要確認": "Review", "あり": "Yes",
"スケジュール開始前のエラー検知と出発失敗": "Pre-schedule error detection and departure failures",
"セキュリティ無効・通信断・トークン期限のアラート管理": "Security / connection / token alerts",
"定期点検の実施記録・写真・申し送り事項を管理": "Manage inspection records, photos and notes",
"申し送り事項": "Notes", "Before（点検前）": "Before", "After（点検後）": "After",
"待機中": "Idle",
"充電中": "Charging",
"ハンドルアップ": "Handle Up",
"緊急停止": "E-Stop",
"オフライン": "Offline",
"セキュリティ有効": "Security On",
"正常": "Normal",
"異常": "Error",
"通信断": "No Comms",
"出発失敗": "Departure Failed",
"1h前異常": "1h Pre-alert",
"セキュリティ無効": "Security Off",
"トークン期限": "Token Expiry",
"DFAシステム管理者": "DFA System Admin",
"DFA運用担当": "DFA Operator",
"顧客管理者": "Customer Admin",
"施設運用者": "Facility Operator",
"施設運用者・清掃業者": "Facility Operator / Cleaner",
"会社": "Company",
"ー": "—",
"ー（会社全体）": "— (Company-wide)",
"ー（会社/グループ全体）": "— (Company/Group)",
"ー（グループなし）": "— (No group)",
"全顧客・全施設": "All customers & facilities",
"自社施設のみ": "Own facilities only",
"自施設のみ": "Own facility only",
"全権限。権限管理の編集はこのロールのみ": "Full access. Only this role can edit permissions.",
"全メニュー閲覧＋施設ロボットマスタ編集。権限管理は閲覧のみ": "Read all menus + edit Facility Master. Permissions read-only.",
"自社の閲覧全般。施設ロボットマスタの編集不可": "Read access to own company. Cannot edit Facility Master.",
"設定メニュー以外の自施設データを閲覧": "Read own-facility data except Settings menu.",
"閲覧": "View",
"閲覧/編集": "View/Edit",
"閲覧/編集/登録": "View/Edit/Create",
"システム設定": "System Settings",
"フル権限": "Full access",
"新規登録不可": "no create",
"表示のみ": "view only",
"アクセス不可": "no access",
"1h前ST": "1h ST",
"30分前ST": "30m ST",
"都道府県": "Prefecture",
"住所": "Address",
"電話番号": "Phone",
"責任者名": "Manager",
"担当者名": "Contact",
"監視": "Monitor",
"ロボット（メーカー / 機種 / シリアル）": "Robots (Maker / Model / Serial)",
"曜日": "Days",
"時間": "Time",
"会社/グループ": "Company/Group",
"ロール": "Role",
"実装": "Phase",
"紐づき": "Binding",
"データスコープ": "Data Scope",
"説明": "Description",
"メニュー": "Menu",
"DFA管理者": "DFA Admin",
"DFA運用": "DFA Ops",
"チャネル": "Channel",
"送信先": "Destination",
"イベント": "Event",
"スコープ": "Scope",
"グループ": "Group",
"傘下会社": "Member Cos.",
"会社数": "Companies",
"総施設数": "Facilities",
"総ロボット数": "Robots",
"契約モジュール": "Modules",
"監視施設": "Monitored",
"D-Sec施設": "D-Sec",
"全施設": "All Fac.",
"ロボット": "Robots",
"日時": "Timestamp",
"操作者": "User",
"アクション": "Action",
"対象": "Target",
"成功": "Success",
"失敗": "Failed",
"未実施": "Not Run",
"成功率": "Success Rate",
"/ 300施設": "/ 300 facilities",
"ロボット7 / セキュリティ2 / 制御盤1": "Robot 7 / Security 2 / Panel 1",
"予定時刻経過・実績なし": "Past scheduled time, no run",
"目標: 95%": "Target: 95%",
"D-Sデバイス総数": "Total D-Sec Devices",
"正常稼働": "Normal",
"異常・通信断": "Error / No Comms",
"昨夜の清掃結果サマリー — 2026-03-27": "Last night's cleaning summary — 2026-03-27",
"⚠ セキュリティ無効: MEGAドンキ渋谷本店 1F売場（03:42以降）": "⚠ Security off: MEGAドンキ渋谷本店 1F floor (after 03:42)",
"清掃詳細ログ": "Cleaning Detail Log",
"スケジュール進捗": "Schedule Progress",
" / 312 完了": " / 312 done",
"失敗の内訳": "Failure Breakdown",
"ロボット異常": "Robot Error",
"制御盤異常": "Control Panel Error",
"1行＝1ロボット×1スケジュール実行": "1 row = 1 robot × 1 schedule run",
"判定基準（タスク完了率）:": "Grade criteria (task completion):",
"◎ 90%超": "◎ >90%",
"○ 70%超": "○ >70%",
"× 10%未満": "× <10%",
"（閾値はシステム設定で変更可能）": "(thresholds editable in settings)",
"🔴 レベル3 — DFA介入を検討": "🔴 Level 3 — Consider DFA intervention",
"🔶 レベル2 — DFA運用担当がアクション": "🔶 Level 2 — DFA operator to act",
"⚠ レベル1 — 現場確認が必要": "⚠ Level 1 — On-site check needed",
"出発失敗（R1）": "Departure failed (R1)",
"事前チェックのアラート内容を確認してください。セキュリティ未解除/ロボット異常/充電不足のいずれかが原因です。": "Check the pre-check alert. Cause is likely security not released, robot error, or low charge.",
"完了率が極端に低い（R2）": "Completion extremely low (R2)",
"現場の通路状況＋ロボット状態を確認してください。出発直後に停止した可能性があります。": "Check aisle conditions and robot state on site. It may have stopped right after departure.",
"マップ更新の確認": "Check map update",
"マップがレイアウト変更に追従していない可能性があります。直近の棚替え・売場変更がなかったか現場に確認してください。": "The map may not reflect a layout change. Confirm any recent shelf/floor changes with the site.",
"2日連続で完了率低下（R3）": "Completion down 2 days running (R3)",
"恒常的な環境変化の可能性があります。現場責任者に状況をヒアリングしてください。": "A persistent environmental change is likely. Ask the site manager about the situation.",
"複数日連続で清掃未実施（R4）": "No cleaning for several days (R4)",
"現場対応では解決しない構造的問題の可能性があります。DFAオンサイト訪問（マップ再作成・環境調査）の手配を検討してください。": "Likely a structural issue not fixable on site. Consider arranging a DFA on-site visit (re-map / survey).",
"ハンドルアップ検知": "Handle-up detected",
"ハンドルが上がった状態です。現場にハンドルを下ろすよう連絡してください。": "The handle is raised. Ask the site to lower it.",
"オフライン検知": "Offline detected",
"ネットワーク接続が切れています。Wi-Fiルーターの再起動を現場に依頼してください。": "Network connection is down. Ask the site to restart the Wi-Fi router.",
"← 戻る": "← Back",
"全項目 →": "All columns →",
"2日以上連続で△以下または出発失敗の施設": "Facilities at △ or below, or departure-failed, 2+ days running",
"該当施設なし": "No matching facilities",
"今週のエラー発生件数（種別ごと）": "This week's error count by type",
"ブラシエラー": "Brush Error",
"充電不足": "Low Charge",
"その他": "Other",
"前週": "Prev. wk",
"前月": "Prev. mo",
"稼働率": "Uptime",
"出発成功率": "Dep. Rate",
"要改善": "Needs Fix",
"注意": "Caution",
"良好": "Good",
"残日数": "Days Left",
"+ 新規追加": "+ Add New",
"📥 インポート": "📥 Import",
"あり": "Yes",
"ダッシュボード表示項目": "Dashboard items",
"各項目のON/OFFでダッシュボードの表示内容をカスタマイズ": "Toggle items to customize the dashboard",
"D-Securityアラートバナー": "D-Security alert banner",
"セキュリティ無効施設の赤色警告バナー": "Red warning banner for security-off facilities",
"清掃詳細ログ（コンパクト版）": "Cleaning detail log (compact)",
"△×の清掃詳細ログテーブル": "Detail log table for △×",
"完了数/予定数のプログレスバー": "Progress bar of done/scheduled",
"ロボット異常/未実施/セキュリティ有効/制御盤異常の件数": "Counts of robot error / not run / security on / panel error",
"清掃開始予定時刻の何分前にロボット状態を自動チェックするかを設定": "Set how many minutes before the scheduled start to auto-check robot state",
"清掃開始予定時刻の何分前にロボット状態をチェックするか": "How many minutes before scheduled start to check robot state",
"第1回チェック（分前）": "1st check (min before)",
"第2回チェック（分前）": "2nd check (min before)",
"第1回チェック": "1st check",
"第2回チェック": "2nd check",
"デフォルト: 60分": "Default: 60 min",
"デフォルト: 30分": "Default: 30 min",
"清掃詳細ログの◎○△×判定に使用する閾値を設定": "Set thresholds used for ◎○△× grading in the detail log",
"清掃詳細ログの◎○△×判定に使用する閾値": "Thresholds used for ◎○△× grading in the detail log",
"◎ 基準": "◎ threshold",
"○ 基準": "○ threshold",
"△ 基準": "△ threshold",
"以上で◎": "≥ for ◎",
"以上で○（◎未満）": "≥ for ○ (below ◎)",
"以上で△（○未満）": "≥ for △ (below ○)",
"以上": "≥",
"未満": "<",
"上記未満": "below the above",
"※ △基準未満は自動的に×判定。現在はシステム全体の設定。P2以降で顧客別設定に拡張予定": "* Below △ is auto ×. Currently system-wide; per-customer settings planned for P2+.",
"対応アドバイスのレベルが上がる連続日数の閾値を設定": "Set the consecutive-day thresholds at which advice escalates",
"同一施設で問題が連続した場合のレベル引き上げ基準（スケジュール存在日の連続日数）": "Escalation criteria for repeated issues at the same facility (consecutive scheduled days)",
"レベル2（DFA運用がアクション）": "Level 2 (DFA operator acts)",
"レベル3（DFA介入・オンサイト訪問検討）": "Level 3 (DFA intervention / on-site visit)",
"※「連続」はスケジュール存在日の連続。実績データに基づき調整を推奨": "* “Consecutive” counts scheduled days only. Tune against actual data.",
"清掃監視の運用パラメータ。変更はDFAシステム管理者のみ": "Cleaning-monitoring parameters. Editable by DFA System Admin only.",
"顧客デフォルト＋施設上書きの継承モデル": "Customer default + facility override model",
"+ 通知追加": "+ Add notification",
"メール": "Email",
"全イベント": "All events",
"全施設（デフォルト）": "All facilities (default)",
"渋谷本店（上書き）": "Shibuya HQ (override)",
"ユーザーマスタ": "User Master",
"顧客管理者は会社/グループに紐づく。施設運用者は施設に紐づく": "Customer admins bind to a company/group; facility operators bind to a facility.",
"ロール定義（4層）": "Role definitions (4 tiers)",
"各ロールのスコープと紐づき": "Scope and binding per role",
"メニュー×ロール アクセスマトリクス": "Menu × Role access matrix",
"施設運用者のスコープは自施設のみに限定": "Facility operators are scoped to their own facility only",
"会社単位の契約・モジュール管理": "Per-company contract & module management",
"○ 監視": "✓ Monitor",
"ー 監視": "— Monitor",
"○ D-Sec": "✓ D-Sec",
"ー D-Sec": "— D-Sec",
"グループ会社の親子関係を管理。顧客管理者をグループに紐づけると傘下の全会社を横断閲覧可能": "Manage group parent-child relations. A customer admin bound to a group can view all member companies.",
"グループサマリー": "Group summary",
"チェックした会社がこのグループの傘下として紐づきます。グループ管理者は傘下全社のデータを横断閲覧可能になります。": "Checked companies are bound under this group. Group admins can view data across all member companies.",
"傘下会社の選択": "Select member companies",
"所属中": "Member",
"操作ログ（監査ログ）": "Operation log (audit)",
"全ての手動操作を記録。誰が・いつ・何をしたかを追跡": "Records all manual operations; tracks who did what and when.",
"清掃開始（手動）": "Start cleaning (manual)",
"スケジュール変更": "Schedule change",
"ロボット同期": "Robot sync",
"顧客モジュール変更": "Customer module change",
"施設追加": "Facility added",
"MEGAドンキ渋谷本店 / 1F売場": "MEGAドンキ渋谷本店 / 1F floor",
"ドンキ八王子駅前店 — 無効化": "ドンキ八王子駅前店 — disabled",
"8111R5628060011 v3.2に更新": "8111R5628060011 updated to v3.2",
"ドン・キホーテ — D-Security有効化": "ドン・キホーテ — D-Security enabled",
"30分前までに充電完了、出発成功": "Charged before 30-min mark; departed OK",
"30分前も未解消 → 出発失敗": "Unresolved at 30-min mark → departure failed",
"30分前に復旧、出発成功（完了率62%）": "Recovered at 30-min mark; departed OK (62% complete)",
"30分前もオフライン → 出発失敗": "Still offline at 30-min mark → departure failed",
"セキュリティ解除されず出発不可": "Security not released; cannot depart",
"清掃終了後もセキュリティが復帰していない": "Security not restored after cleaning",
"DS-005 が6時間以上通信なし": "DS-005 no comms for 6+ hours",
"DS-004 残り9日": "DS-004 9 days left",
"復帰遅延（10分後に復帰）": "Restore delayed (recovered after 10 min)",
"更新手続き中": "Renewal in progress",
"正常復帰を確認": "Confirmed normal restore",
"セキュリティ復帰失敗": "Security restore failed",
"6時間以上通信なし": "No comms for 6+ hours",
"副店長様より、以前水漏れがしていて何度かメンテナンスをしてもらったとのこと。現状は改善されているとのことで、今回メンテナンス時も異常なし": "Per the assistant manager, there had been a past leak serviced several times. It is reported resolved; no issues found at this maintenance.",
"会社名 *": "Company *",
"連絡先メール *": "Contact email *",
"契約プラン": "Plan",
"連絡先メール": "Contact email",
"○ 監視（モニタリング）": "✓ Monitoring",
"名前 *": "Name *",
"メールアドレス *": "Email *",
"ロール *": "Role *",
"会社 / グループ *": "Company / Group *",
"施設（施設運用者のみ）": "Facility (operators only)",
"グループ名 *": "Group name *",
"最終ログイン: ": "Last login: ",
"顧客追加": "Add Customer",
"ユーザー新規登録": "New User",
"グループ追加": "Add Group",
"点検記録 新規登録": "New Inspection Record",
"問題エリアのみ": "Problems only",
"全件": "All",
"判定": "Grade",
"比": "vs",
};
function t(s) { return lang === "en" && T[s] ? T[s] : s; }
const [dFilt, setDFilt] = useState("problem");
const [lFilt, setLFilt] = useState("problem");
const [lSF, setLSF] = useState("");
const [lSM, setLSM] = useState("");
const [lSS, setLSS] = useState("");
const [aFilt, setAFilt] = useState("unresolved");
const [daFilt, setDaFilt] = useState("unresolved");
const [dsaState, setDsaState] = useState(DSA_INIT);
const [rSrch, setRSrch] = useState("");
const [sSrch, setSSrch] = useState("");
const [showDS, setShowDS] = useState(true);
const [sysTab, setSysTab] = useState("display");
const [dashItems, setDashItems] = useState({ secBanner: true, detailLog: true, scheduleBar: true, failBreakdown: true });
const [showGradeInfo, setShowGradeInfo] = useState(false);
const [custEdit, setCustEdit] = useState(null);
const [userEdit, setUserEdit] = useState(null);
const [grpEdit, setGrpEdit] = useState(null);
const [expandedRow, setExpandedRow] = useState(null);
const [areaModal, setAreaModal] = useState(null);
const [areaFilt, setAreaFilt] = useState("problem");
const [rptPeriod, setRptPeriod] = useState("weekly");
const [showAllRank, setShowAllRank] = useState(false);
const [showAllCont, setShowAllCont] = useState(false);
const [dsLogFilt, setDsLogFilt] = useState("all");
const [dsaTypeFilt, setDsaTypeFilt] = useState("all");
const [inspDetail, setInspDetail] = useState(null);
const [inspNew, setInspNew] = useState(false);
const c = dark ? DARK : LIGHT;
const unresPre = PRECHK.filter(function (a) { return !a.ok; }).length;
const unresDsa = dsaState.filter(function (a) { return a.st === "未対応" || a.st === "対応中"; }).length;
function cycleDsa(id) {
setDsaState(function (prev) {
return prev.map(function (a) {
if (a.id !== id) return a;
var nx = "未対応";
if (a.st === "未対応") nx = "対応中";
if (a.st === "対応中") nx = "対応済み";
if (a.st === "対応済み") nx = "未対応";
return Object.assign({}, a, { st: nx });
});
});
}
function filt(data, grade, sf, sm, ss) {
var d = data;
if (grade === "problem") d = d.filter(function (r) { return r.g === "△" || r.g === "×"; });
else if (grade !== "all") d = d.filter(function (r) { return r.g === grade; });
if (sf) d = d.filter(function (r) { return r.f.toLowerCase().indexOf(sf.toLowerCase()) >= 0; });
if (sm) d = d.filter(function (r) { return r.m.toLowerCase().indexOf(sm.toLowerCase()) >= 0; });
if (ss) d = d.filter(function (r) { return r.s.toLowerCase().indexOf(ss.toLowerCase()) >= 0; });
return d;
}
var th = { padding: "10px 12px", fontSize: 11, color: c.txM, textTransform: "uppercase", letterSpacing: 0.6, borderBottom: "1px solid " + c.bd, whiteSpace: "nowrap" };
var td = { padding: "12px", fontSize: 13, color: c.tx };
var tdm = { padding: "12px", fontSize: 13, color: c.txD };
function BtnF(props) {
var active = props.active;
var color = props.color;
return (
<button onClick={props.onClick} style={{ fontSize: 12, padding: "4px 12px", borderRadius: 6, cursor: "pointer", border: "1px solid " + (active ? color : c.bd), background: active ? color + "22" : "transparent", color: active ? color : c.txM }}>
{props.children}
</button>
);
}
function getAdvice(row) {
var advices = [];
if (!row.dp && row.cp === 0) {
advices.push({ level: 1, icon: "⚠", title: "出発失敗（R1）", text: "事前チェックのアラート内容を確認してください。セキュリティ未解除/ロボット異常/充電不足のいずれかが原因です。" });
}
if (row.cp > 0 && row.cp < 10) {
advices.push({ level: 1, icon: "⚠", title: "完了率が極端に低い（R2）", text: "現場の通路状況＋ロボット状態を確認してください。出発直後に停止した可能性があります。" });
}
if (row.cp >= 10 && row.cp < 70) {
advices.push({ level: 1, icon: "⚠", title: "マップ更新の確認", text: "マップがレイアウト変更に追従していない可能性があります。直近の棚替え・売場変更がなかったか現場に確認してください。" });
}
if (row.g === "△") {
advices.push({ level: 2, icon: "🔶", title: "2日連続で完了率低下（R3）", text: "恒常的な環境変化の可能性があります。現場責任者に状況をヒアリングしてください。" });
}
if (row.g === "×" && !row.dp) {
advices.push({ level: 3, icon: "🔴", title: "複数日連続で清掃未実施（R4）", text: "現場対応では解決しない構造的問題の可能性があります。DFAオンサイト訪問（マップ再作成・環境調査）の手配を検討してください。" });
}
if (row.h1 === "ハンドルアップ" || row.h30 === "ハンドルアップ") {
advices.push({ level: 1, icon: "🔧", title: "ハンドルアップ検知", text: "ハンドルが上がった状態です。現場にハンドルを下ろすよう連絡してください。" });
}
if (row.h1 === "オフライン" || row.h30 === "オフライン") {
advices.push({ level: 1, icon: "📡", title: "オフライン検知", text: "ネットワーク接続が切れています。Wi-Fiルーターの再起動を現場に依頼してください。" });
}
return advices;
}
var AREA_DATA = {
"MEGAドンキ渋谷本店": [
{ name: "1F入口", cp: 100 }, { name: "1F売場", cp: 98 }, { name: "1Fレジ前", cp: 95 }, { name: "1F通路A", cp: 100 },
{ name: "2F家電", cp: 92 }, { name: "2F文具", cp: 88 }, { name: "2F玩具", cp: 96 }, { name: "2F通路B", cp: 100 },
{ name: "3Fアパレル", cp: 94 }, { name: "3F靴売場", cp: 90 }, { name: "B1食品", cp: 97 }, { name: "B1飲料", cp: 100 },
],
"MEGAドンキ立川店": [
{ name: "1F入口", cp: 100 }, { name: "1F売場", cp: 98 }, { name: "1Fレジ前", cp: 95 }, { name: "1F通路A", cp: 100 },
{ name: "1Fコスメ", cp: 92 }, { name: "1Fお菓子", cp: 88 },
{ name: "2F家電入口", cp: 45 }, { name: "2F家電奥", cp: 78 }, { name: "2F文具", cp: 82 }, { name: "2F玩具", cp: 96 },
{ name: "3F倉庫前通路", cp: 38 }, { name: "3Fアパレル", cp: 72 }, { name: "3F靴売場", cp: 90 },
{ name: "B1食品", cp: 12 }, { name: "B1飲料", cp: 55 }, { name: "B1日配", cp: 68 },
],
"MEGAドンキ池袋駅北口店": [
{ name: "1", cp: 98 }, { name: "2", cp: 95 }, { name: "3", cp: 42 }, { name: "4", cp: 88 },
{ name: "5", cp: 35 }, { name: "6", cp: 100 }, { name: "7", cp: 52 }, { name: "8", cp: 90 },
],
"MEGAドンキ港山下総本店": [
{ name: "A棟1F", cp: 100 }, { name: "A棟2F", cp: 85 }, { name: "A棟3F", cp: 22 },
{ name: "B棟1F", cp: 95 }, { name: "B棟2F", cp: 18 }, { name: "B棟3F", cp: 42 },
],
};
function getAreaData(facility) {
return AREA_DATA[facility] || [
{ name: "1", cp: 88 }, { name: "2", cp: 45 }, { name: "3", cp: 12 },
{ name: "4", cp: 92 }, { name: "5", cp: 78 }, { name: "6", cp: 100 },
];
}
function areaGrade(cp) { return cp >= 90 ? "◎" : cp >= 70 ? "○" : cp >= 10 ? "△" : "×"; }
function tokenDays(dateStr) { var d = new Date(dateStr); var now = new Date("2026-03-27"); return Math.ceil((d - now) / 86400000); }
function LogTable(props) {
var data = props.data;
var compact = props.compact;
return (
<table style={{ width: "100%", borderCollapse: "collapse", minWidth: compact ? 700 : 1000 }}>
<thead>
<tr>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("施設名")}</th>
{!compact && <th style={Object.assign({}, th, { textAlign: "left" })}>{t("機種")}</th>}
{!compact && <th style={Object.assign({}, th, { textAlign: "left" })}>{t("シリアル")}</th>}
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("日付")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("予定")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("1h前ST")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("30分前ST")}</th>
<th style={Object.assign({}, th, { textAlign: "center" })}>{t("出発")}</th>
<th style={Object.assign({}, th, { textAlign: "right" })}>{t("完了率")}</th>
<th style={Object.assign({}, th, { textAlign: "center" })}>{t("判定")} <span onClick={function () { setShowGradeInfo(!showGradeInfo); }} style={{ cursor: "pointer", fontSize: 10, color: c.pr, border: "1px solid " + c.pr + "44", borderRadius: "50%", width: 16, height: 16, display: "inline-flex", alignItems: "center", justifyContent: "center", verticalAlign: "middle", marginLeft: 4 }}>?</span></th>
</tr>
</thead>
{showGradeInfo && (
<caption style={{ captionSide: "bottom", padding: 0 }}>
<div style={{ margin: "8px 0", padding: "12px 16px", background: c.sf, border: "1px solid " + c.bd, borderRadius: 8, display: "inline-flex", gap: 16, alignItems: "center" }}>
<span style={{ fontSize: 12, fontWeight: 600, color: c.tx }}>{t("判定基準（タスク完了率）:")}</span>
<span style={{ fontSize: 12, color: c.ok }}>{t("◎ 90%超")}</span>
<span style={{ fontSize: 12, color: c.ok }}>{t("○ 70%超")}</span>
<span style={{ fontSize: 12, color: c.wn }}>△ 10-69%</span>
<span style={{ fontSize: 12, color: c.ng }}>{t("× 10%未満")}</span>
<span style={{ fontSize: 11, color: c.txM }}>{t("（閾値はシステム設定で変更可能）")}</span>
<span onClick={function () { setShowGradeInfo(false); }} style={{ cursor: "pointer", fontSize: 14, color: c.txM, marginLeft: 8 }}>✕</span>
</div>
</caption>
)}
<tbody>
{data.map(function (r, i) {
var gs = gradeStyle(c, r.g);
var hasAdvice = r.g === "△" || r.g === "×";
var isExpanded = expandedRow === (compact ? "d" + i : "l" + i);
var rowKey = compact ? "d" + i : "l" + i;
var advices = hasAdvice ? getAdvice(r) : [];
var maxLevel = advices.reduce(function (m, a) { return Math.max(m, a.level); }, 0);
return (
<React.Fragment key={i}>
<tr style={{ borderBottom: isExpanded ? "none" : "1px solid " + c.bd + "22", cursor: hasAdvice ? "pointer" : "default", background: isExpanded ? c.pr + "08" : "transparent" }} onClick={hasAdvice ? function () { setExpandedRow(isExpanded ? null : rowKey); } : undefined}>
<td style={td}>{r.f}</td>
{!compact && <td style={tdm}>{r.m}</td>}
{!compact && <td style={{ padding: "12px", fontSize: 11, fontFamily: "monospace", color: c.txM }}>{r.s}</td>}
<td style={{ padding: "12px", fontSize: 12, color: c.txD }}>{r.d}</td>
<td style={td}>{r.t}</td>
<td style={td}><Pill text={t(r.h1)} color={stColor(c, r.h1)} /></td>
<td style={td}><Pill text={t(r.h30)} color={stColor(c, r.h30)} /></td>
<td style={{ padding: "12px", textAlign: "center", fontSize: 18, color: r.dp ? c.ok : c.ng }}>{r.dp ? "✓" : "✗"}</td>
<td style={{ padding: "12px", textAlign: "right", fontSize: 13, color: c.tx }}>{r.cp}%</td>
<td style={{ padding: "12px", textAlign: "center" }}>
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 4 }}>
<span style={{ display: "inline-block", width: 28, height: 28, lineHeight: "28px", textAlign: "center", borderRadius: 6, fontSize: 14, fontWeight: 700, background: gs.bg, color: gs.tx, border: "1px solid " + gs.tx + "33" }}>{r.g}</span>
{hasAdvice && <span style={{ fontSize: 10, color: c.txM }}>{isExpanded ? "▲" : "▼"}</span>}
</div>
</td>
</tr>
{isExpanded && advices.length > 0 && (
<tr><td colSpan={compact ? 8 : 10} style={{ padding: 0, borderBottom: "1px solid " + c.bd + "22" }}>
<div style={{ padding: "12px 20px 16px", background: maxLevel >= 3 ? c.ng + "08" : maxLevel >= 2 ? c.wn + "08" : c.pr + "06" }}>
<div style={{ fontSize: 12, fontWeight: 700, color: maxLevel >= 3 ? c.ng : maxLevel >= 2 ? c.wn : c.pr, marginBottom: 10 }}>
{maxLevel >= 3 ? t("🔴 レベル3 — DFA介入を検討") : maxLevel >= 2 ? t("🔶 レベル2 — DFA運用担当がアクション") : t("⚠ レベル1 — 現場確認が必要")}
</div>
{advices.map(function (a, j) {
return (
<div key={j} style={{ padding: "8px 12px", marginBottom: 6, borderRadius: 6, background: c.sf, border: "1px solid " + c.bd }}>
<div style={{ fontSize: 12, fontWeight: 600, color: c.tx }}>{a.icon} {t(a.title)}</div>
<div style={{ fontSize: 12, color: c.txD, marginTop: 4 }}>{t(a.text)}</div>
</div>
);
})}
<button onClick={function (e) { e.stopPropagation(); setAreaModal({ facility: r.f, date: r.d, cp: r.cp, g: r.g }); setAreaFilt("problem"); }} style={{ marginTop: 4, fontSize: 12, color: c.pr, background: c.prD, border: "none", borderRadius: 6, padding: "6px 14px", cursor: "pointer" }}>{t("エリア別詳細を見る →")}</button>
</div>
</td></tr>
)}
</React.Fragment>
);
})}
</tbody>
</table>
);
}
var menuMon = [
{ id: "detailLog", label: t("📋 清掃詳細ログ") },
{ id: "alert", label: t("🔔 アラート"), badge: unresPre },
{ id: "report", label: t("📈 レポート") },
{ id: "inspection", label: t("🔧 点検記録") },
];
var menuDS = [
{ id: "dsecurity", label: t("🔒 D-Secログ") },
{ id: "dsalert", label: t("⚠ D-Secアラート"), badge: unresDsa },
];
var menuSet = [
{ id: "robot", label: t("🏢 施設ロボットマスタ") },
{ id: "schedule", label: t("📅 スケジュール") },
{ id: "system", label: t("⚙ システム管理") },
];
function NavItem(props) {
var active = page === props.id;
return (
<div onClick={function () { setPage(props.id); }} style={{ padding: "10px 12px", borderRadius: 8, cursor: "pointer", fontSize: 13, display: "flex", alignItems: "center", gap: 10, marginBottom: 2, background: active ? c.prD : "transparent", color: active ? c.pr : c.txD }}>
{props.label}
{props.badge > 0 && <span style={{ marginLeft: "auto", fontSize: 11, background: c.ng, color: "#fff", borderRadius: 10, padding: "1px 7px", fontWeight: 600 }}>{props.badge}</span>}
</div>
);
}
function Section(props) {
return <div style={{ fontSize: 10, color: c.txM, padding: "16px 12px 8px 12px", textTransform: "uppercase", letterSpacing: 1.2 }}>{props.title}</div>;
}
var inputSt = { fontSize: 13, padding: "8px 12px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx, width: "100%" };
var selectSt = { fontSize: 13, padding: "8px 12px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx, width: "100%" };
var labelSt = { fontSize: 12, color: c.txM, marginBottom: 4, display: "block" };
var fieldSt = { marginBottom: 14 };
function Modal(props) {
return (
<div style={{ position: "fixed", top: 0, left: 0, right: 0, bottom: 0, background: "rgba(0,0,0,0.5)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1000 }}>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 16, padding: 0, width: 520, maxHeight: "80vh", overflow: "auto" }}>
<div style={{ padding: "20px 24px", borderBottom: "1px solid " + c.bd, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div style={{ fontSize: 16, fontWeight: 700 }}>{props.title}</div>
<button onClick={props.onClose} style={{ fontSize: 18, color: c.txM, background: "none", border: "none", cursor: "pointer", padding: "4px 8px" }}>✕</button>
</div>
<div style={{ padding: "20px 24px" }}>
{props.children}
</div>
<div style={{ padding: "16px 24px", borderTop: "1px solid " + c.bd, display: "flex", justifyContent: "flex-end", gap: 8 }}>
<button onClick={props.onClose} style={{ fontSize: 13, padding: "8px 20px", borderRadius: 6, border: "1px solid " + c.bd, background: "transparent", color: c.txD, cursor: "pointer" }}>{t("キャンセル")}</button>
<button onClick={props.onClose} style={{ fontSize: 13, padding: "8px 20px", borderRadius: 6, border: "none", background: c.pr, color: "#fff", cursor: "pointer", fontWeight: 600 }}>{props.action || t("保存")}</button>
</div>
</div>
</div>
);
}
return (
<div style={{ display: "flex", minHeight: "100vh", background: c.bg, color: c.tx, fontFamily: "sans-serif" }}>
{/* Sidebar */}
<div style={{ width: 220, background: c.sf, borderRight: "1px solid " + c.bd, display: "flex", flexDirection: "column", flexShrink: 0 }}>
<div style={{ padding: "20px 16px", borderBottom: "1px solid " + c.bd, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div>
<div style={{ display: "flex", alignItems: "center", gap: 10 }}>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
<rect width="32" height="32" rx="8" fill={c.pr} fillOpacity="0.15"/>
<rect x="8" y="10" width="16" height="14" rx="3" stroke={c.pr} strokeWidth="1.5" fill="none"/>
<circle cx="13" cy="17" r="1.5" fill={c.pr}/>
<circle cx="19" cy="17" r="1.5" fill={c.pr}/>
<line x1="12" y1="22" x2="20" y2="22" stroke={c.pr} strokeWidth="1.5" strokeLinecap="round"/>
<line x1="16" y1="6" x2="16" y2="10" stroke={c.pr} strokeWidth="1.5" strokeLinecap="round"/>
<circle cx="16" cy="5" r="1.5" fill={c.pr}/>
</svg>
<div>
<div style={{ fontSize: 16, fontWeight: 700, color: c.pr }}>D-Watch</div>
<div style={{ fontSize: 9, color: c.txM, marginTop: 1 }}>{lang === "en" ? "\"DFA Robot Monitoring System\"" : "\"DFAロボット監視システム\""}</div>
</div>
</div>
</div>
<button onClick={function () { setDark(!dark); }} style={{ width: 32, height: 32, borderRadius: 8, border: "1px solid " + c.bd, background: c.sfH, cursor: "pointer", fontSize: 14 }}>
{dark ? "☀" : "🌙"}
</button>
<button onClick={function () { setLang(lang === "ja" ? "en" : "ja"); }} style={{ fontSize: 11, fontWeight: 600, padding: "6px 10px", borderRadius: 8, border: "1px solid " + c.bd, background: lang === "en" ? c.pr + "18" : c.sfH, color: lang === "en" ? c.pr : c.txD, cursor: "pointer", letterSpacing: 0.5 }}>
{lang === "ja" ? "EN" : "JP"}
</button>
</div>
<div style={{ padding: "12px 8px", flex: 1 }}>
<NavItem id="dashboard" label={t("📊 ダッシュボード")} />
<Section title={t("モニタリング")} />
{menuMon.map(function (m) { return <NavItem key={m.id} id={m.id} label={m.label} badge={m.badge} />; })}
<Section title="D-Security" />
{menuDS.map(function (m) { return <NavItem key={m.id} id={m.id} label={m.label} badge={m.badge} />; })}
<Section title={t("設定")} />
{menuSet.map(function (m) { return <NavItem key={m.id} id={m.id} label={m.label} />; })}
</div>
<div style={{ padding: "12px 16px", borderTop: "1px solid " + c.bd, fontSize: 11, color: c.txM }}>{lang === "en" ? "\"DFA Operator\"" : "\"DFA運用担当\""}</div>
</div>
{/* Main */}
<div style={{ flex: 1, overflow: "auto", padding: "24px 32px" }}>
{/* DASHBOARD */}
{page === "dashboard" && (
<div>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24 }}>
<div>
<h1 style={{ fontSize: 22, fontWeight: 700, margin: 0 }}>{t("ダッシュボード")}</h1>
<div style={{ fontSize: 13, color: c.txD, marginTop: 4 }}>{t("昨夜の清掃結果サマリー — 2026-03-27")}</div>
</div>
<div style={{ display: "flex", gap: 8 }}>
{unresPre > 0 && <Pill text={unresPre + (lang === "en" ? " unresolved" : " 件未解消")} color={c.ng} />}
{dashItems.secBanner && unresDsa > 0 && <Pill text={"D-Sec " + unresDsa + (lang === "en" ? "" : "件")} color={c.wn} />}
</div>
</div>
{dashItems.secBanner && (
<div style={{ background: c.ngD, border: "1px solid " + c.ng + "44", borderRadius: 12, padding: "16px 20px", marginBottom: 16 }}>
<div style={{ fontSize: 13, fontWeight: 700, color: c.ngB }}>{t("⚠ セキュリティ無効: MEGAドンキ渋谷本店 1F売場（03:42以降）")}</div>
</div>
)}
<div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginBottom: 24 }}>
<Num value={285} label={t("成功")} sub={t("/ 300施設")} color={c.ok} c={c} />
<Num value={10} label={t("失敗")} sub={t("ロボット7 / セキュリティ2 / 制御盤1")} color={c.ng} c={c} onClick={function () { setPage("detailLog"); }} />
<Num value={5} label={t("未実施")} sub={t("予定時刻経過・実績なし")} color={c.wn} c={c} onClick={function () { setPage("detailLog"); }} />
<Num value="95%" label={t("成功率")} sub={t("目標: 95%")} color={c.ac} c={c} />
</div>
{dashItems.detailLog && (
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, overflow: "hidden", marginBottom: 16 }}>
<div style={{ padding: "16px 20px", borderBottom: "1px solid " + c.bd, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<span style={{ fontSize: 14, fontWeight: 600, color: c.tx }}>{t("清掃詳細ログ")}</span>
<div style={{ display: "flex", gap: 6 }}>
<BtnF active={dFilt === "problem"} color={c.wn} onClick={function () { setDFilt("problem"); }}>{t("△×のみ")}</BtnF>
<BtnF active={dFilt === "all"} color={c.txD} onClick={function () { setDFilt("all"); }}>{t("全件")}</BtnF>
<button onClick={function () { setPage("detailLog"); }} style={{ fontSize: 12, color: c.pr, background: "none", border: "1px solid " + c.pr + "44", borderRadius: 6, padding: "4px 12px", cursor: "pointer" }}>{t("全項目 →")}</button>
</div>
</div>
<div style={{ overflowX: "auto" }}>
<LogTable data={filt(LOG, dFilt, "", "", "")} compact={true} />
</div>
</div>
)}
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
{dashItems.scheduleBar && (
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, padding: 20 }}>
<div style={{ fontSize: 11, color: c.txM, textTransform: "uppercase", letterSpacing: 1, marginBottom: 12 }}>{t("スケジュール進捗")}</div>
<span style={{ fontSize: 28, fontWeight: 700, color: c.tx }}>300</span>
<span style={{ fontSize: 14, color: c.txM }}>{t(" / 312 完了")}</span>
<div style={{ marginTop: 12, height: 6, background: c.bd, borderRadius: 3, overflow: "hidden" }}>
<div style={{ height: "100%", width: "96%", background: c.ok, borderRadius: 3 }} />
</div>
</div>
)}
{dashItems.failBreakdown && (
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, padding: 20 }}>
<div style={{ fontSize: 11, color: c.txM, textTransform: "uppercase", letterSpacing: 1, marginBottom: 12 }}>{t("失敗の内訳")}</div>
<div style={{ display: "flex", justifyContent: "space-between", padding: "4px 0" }}><span style={{ color: c.txD }}>{t("ロボット異常")}</span><span style={{ fontWeight: 600, color: c.ng }}>7</span></div>
<div style={{ display: "flex", justifyContent: "space-between", padding: "4px 0" }}><span style={{ color: c.txD }}>{t("未実施")}</span><span style={{ fontWeight: 600, color: c.wn }}>5</span></div>
<div style={{ display: "flex", justifyContent: "space-between", padding: "4px 0" }}><span style={{ color: c.txD }}>{t("セキュリティ有効")}</span><span style={{ fontWeight: 600, color: c.ac }}>2</span></div>
<div style={{ display: "flex", justifyContent: "space-between", padding: "4px 0" }}><span style={{ color: c.txD }}>{t("制御盤異常")}</span><span style={{ fontWeight: 600, color: c.ng }}>1</span></div>
</div>
)}
</div>
</div>
)}
{/* DETAIL LOG */}
{page === "detailLog" && (
<div>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
<div>
<h1 style={{ fontSize: 22, fontWeight: 700, margin: 0 }}>{t("清掃詳細ログ")}</h1>
<div style={{ fontSize: 13, color: c.txD, marginTop: 4 }}>{t("1行＝1ロボット×1スケジュール実行")}</div>
</div>
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
<input type="date" defaultValue="2026-03-27" style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx }} />
<span style={{ color: c.txM }}>～</span>
<input type="date" defaultValue="2026-03-27" style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx }} />
<button onClick={function () { setPage("dashboard"); }} style={{ fontSize: 12, color: c.txD, background: "none", border: "1px solid " + c.bd, borderRadius: 6, padding: "6px 12px", cursor: "pointer" }}>{t("← 戻る")}</button>
</div>
</div>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, overflow: "hidden" }}>
<div style={{ padding: "16px 20px", borderBottom: "1px solid " + c.bd, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 8 }}>
<div style={{ display: "flex", gap: 6, alignItems: "center" }}>
<select style={{ fontSize: 12, padding: "4px 8px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx }}>
<option>{t("全グループ")}</option><option>PPIH</option>
</select>
<select style={{ fontSize: 12, padding: "4px 8px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx }}>
<option>{t("全会社")}</option><option>{t("ドン・キホーテ")}</option><option>{t("ユニー")}</option><option>{t("セブン-イレブン")}</option><option>{t("ローソン")}</option>
</select>
<BtnF active={lFilt === "problem"} color={c.wn} onClick={function () { setLFilt("problem"); }}>{t("△×のみ")}</BtnF>
<BtnF active={lFilt === "all"} color={c.txD} onClick={function () { setLFilt("all"); }}>{t("全件")}</BtnF>
<BtnF active={lFilt === "×"} color={c.ng} onClick={function () { setLFilt("×"); }}>{t("×のみ")}</BtnF>
</div>
<div style={{ display: "flex", gap: 6 }}>
<input value={lSF} onChange={function (e) { setLSF(e.target.value); }} placeholder={t("施設名")} style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx, width: 130 }} />
<input value={lSM} onChange={function (e) { setLSM(e.target.value); }} placeholder={t("機種")} style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx, width: 80 }} />
<input value={lSS} onChange={function (e) { setLSS(e.target.value); }} placeholder={t("シリアル")} style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx, width: 100 }} />
<button style={{ fontSize: 12, color: c.pr, background: c.prD, border: "none", borderRadius: 6, padding: "6px 12px", cursor: "pointer" }}>{t("CSV")}</button>
</div>
</div>
<div style={{ overflowX: "auto" }}>
<LogTable data={filt(LOG, lFilt, lSF, lSM, lSS)} compact={false} />
</div>
<div style={{ padding: "12px 20px", borderTop: "1px solid " + c.bd, fontSize: 12, color: c.txM }}>{filt(LOG, lFilt, lSF, lSM, lSS).length}{lang === "en" ? " shown / " : "件 / 全"}{LOG.length}{lang === "en" ? " total" : "件"}</div>
</div>
</div>
)}
{/* ALERT - Pre-check */}
{page === "alert" && (
<div>
<h1 style={{ fontSize: 22, fontWeight: 700, margin: "0 0 4px" }}>{t("アラート（事前チェック）")}</h1>
<div style={{ fontSize: 13, color: c.txD, marginBottom: 16 }}>{t("スケジュール開始前のエラー検知と出発失敗")}</div>
{/* #2 サマリーカウント */}
<div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginBottom: 16 }}>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 10, padding: "12px 16px", display: "flex", alignItems: "center", gap: 12 }}>
<div style={{ fontSize: 28, fontWeight: 700, color: c.ng }}>{PRECHK.filter(function (a) { return !a.ok; }).length}</div>
<div><div style={{ fontSize: 12, fontWeight: 600, color: c.ng }}>{t("未解消")}</div><div style={{ fontSize: 11, color: c.txM }}>{t("要対応")}</div></div>
</div>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 10, padding: "12px 16px", display: "flex", alignItems: "center", gap: 12 }}>
<div style={{ fontSize: 28, fontWeight: 700, color: c.ok }}>{PRECHK.filter(function (a) { return a.ok; }).length}</div>
<div><div style={{ fontSize: 12, fontWeight: 600, color: c.ok }}>{t("解消済み")}</div><div style={{ fontSize: 11, color: c.txM }}>{t("対応完了")}</div></div>
</div>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 10, padding: "12px 16px", display: "flex", alignItems: "center", gap: 12 }}>
<div style={{ fontSize: 28, fontWeight: 700, color: c.txD }}>{PRECHK.length}</div>
<div><div style={{ fontSize: 12, fontWeight: 600, color: c.txD }}>{t("合計")}</div><div style={{ fontSize: 11, color: c.txM }}>{t("全アラート")}</div></div>
</div>
</div>
{/* #1 日付フィルタ + #3 グループ/会社フィルタ + ステータスフィルタ */}
<div style={{ display: "flex", gap: 10, marginBottom: 16, flexWrap: "wrap", alignItems: "center" }}>
<div style={{ display: "flex", alignItems: "center", gap: 6 }}>
<input type="date" defaultValue="2026-03-27" style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx }} />
<span style={{ fontSize: 12, color: c.txM }}>〜</span>
<input type="date" defaultValue="2026-03-27" style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx }} />
</div>
<select style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx }}>
<option>{t("全グループ")}</option><option>PPIH</option>
</select>
<select style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx }}>
<option>{t("全会社")}</option><option>{t("ドン・キホーテ")}</option><option>{t("ユニー")}</option><option>{t("セブン-イレブン")}</option><option>{t("ローソン")}</option>
</select>
<div style={{ display: "flex", gap: 6 }}>
<BtnF active={aFilt === "unresolved"} color={c.ng} onClick={function () { setAFilt("unresolved"); }}>{t("未解消のみ")}</BtnF>
<BtnF active={aFilt === "all"} color={c.txD} onClick={function () { setAFilt("all"); }}>{t("全件")}</BtnF>
<BtnF active={aFilt === "resolved"} color={c.ok} onClick={function () { setAFilt("resolved"); }}>{t("解消済み")}</BtnF>
</div>
</div>
{PRECHK.filter(function (a) {
if (aFilt === "unresolved") return !a.ok;
if (aFilt === "resolved") return a.ok;
return true;
}).map(function (a) {
var sevCol = a.sev === "出発失敗" ? c.ng : c.wn;
return (
<div key={a.id} style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, borderLeft: "3px solid " + sevCol, padding: "16px 20px", marginBottom: 12 }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", flexWrap: "wrap", gap: 12 }}>
<div style={{ flex: 1, minWidth: 250 }}>
<div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
<Pill text={t(a.sev)} color={sevCol} />
<Pill text={t(a.st)} color={stColor(c, a.st)} />
<span style={{ fontSize: 12, fontFamily: "monospace", color: c.txM }}>{a.serial}</span>
</div>
<div style={{ fontSize: 14, fontWeight: 600, color: c.tx }}>{a.fac}</div>
<div style={{ fontSize: 13, color: c.txD, marginTop: 4 }}>予定: {a.sch} — {t(a.note)}</div>
<div style={{ fontSize: 11, color: c.txM, marginTop: 4 }}>検知: {a.dt}</div>
</div>
<div>
{a.ok
? <span style={{ fontSize: 12, padding: "4px 14px", borderRadius: 6, background: c.okD, color: c.ok, fontWeight: 600 }}>解消 ({a.at})</span>
: <span style={{ fontSize: 12, padding: "4px 14px", borderRadius: 6, background: c.ngD, color: c.ng, fontWeight: 600 }}>{t("未解消")}</span>
}
</div>
</div>
</div>
);
})}
</div>
)}
{/* REPORT */}
{page === "report" && (
<div>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
<h1 style={{ fontSize: 22, fontWeight: 700, margin: 0 }}>{t("レポート")}</h1>
<button style={{ fontSize: 12, color: c.pr, background: c.prD, border: "none", borderRadius: 6, padding: "6px 14px", cursor: "pointer" }}>{t("CSVエクスポート")}</button>
</div>
<div style={{ display: "flex", gap: 10, marginBottom: 20, flexWrap: "wrap", alignItems: "center" }}>
<div style={{ display: "flex", alignItems: "center", gap: 6 }}>
<span style={{ fontSize: 12, color: c.txM }}>{t("期間")}</span>
<input type="date" defaultValue="2026-03-01" style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx }} />
<span style={{ fontSize: 12, color: c.txM }}>〜</span>
<input type="date" defaultValue="2026-03-27" style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx }} />
</div>
<select style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx }}>
<option>{t("全グループ")}</option><option>PPIH</option>
</select>
<select style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx }}>
<option>{t("全会社")}</option><option>{t("ドン・キホーテ")}</option><option>{t("ユニー")}</option><option>{t("セブン-イレブン")}</option><option>{t("ローソン")}</option>
</select>
<input placeholder={t("施設名")} style={{ fontSize: 12, padding: "6px 12px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx, width: 140 }} />
<input placeholder={t("シリアルNo.")} style={{ fontSize: 12, padding: "6px 12px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx, width: 140 }} />
<select style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx }}>
<option>{t("全ステータス")}</option><option>{t("要改善")}</option><option>{t("注意")}</option><option>{t("良好")}</option>
</select>
<button style={{ fontSize: 12, color: "#fff", background: c.pr, border: "none", borderRadius: 6, padding: "6px 16px", cursor: "pointer" }}>{t("検索")}</button>
</div>
<div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 16 }}>
<div style={{ display: "flex", background: c.sfH, borderRadius: 6, border: "1px solid " + c.bd, overflow: "hidden" }}>
<button onClick={function () { setRptPeriod("weekly"); setShowAllRank(false); setShowAllCont(false); }} style={{ fontSize: 12, padding: "6px 16px", border: "none", cursor: "pointer", background: rptPeriod === "weekly" ? c.pr : "transparent", color: rptPeriod === "weekly" ? "#fff" : c.txD, fontWeight: rptPeriod === "weekly" ? 600 : 400 }}>{t("週次")}</button>
<button onClick={function () { setRptPeriod("monthly"); setShowAllRank(false); setShowAllCont(false); }} style={{ fontSize: 12, padding: "6px 16px", border: "none", cursor: "pointer", background: rptPeriod === "monthly" ? c.pr : "transparent", color: rptPeriod === "monthly" ? "#fff" : c.txD, fontWeight: rptPeriod === "monthly" ? 600 : 400 }}>{t("月次")}</button>
</div>
</div>
<div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 24 }}>
{[["稼働率", 92, 89, c.ok], ["出発成功率", 88, 90, c.pr], ["清掃完了率", 87, 85, c.ac], ["エラー発生率", 4.2, 4.7, c.ng]].map(function (item, i) {
var diff = Math.round((item[1] - item[2]) * 10) / 10;
var better = i < 3 ? diff > 0 : diff < 0;
var worse = i < 3 ? diff < 0 : diff > 0;
var prevLabel = rptPeriod === "weekly" ? t("前週") : t("前月");
return (
<div key={i} style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, padding: 16 }}>
<div style={{ fontSize: 11, color: c.txM, textTransform: "uppercase", letterSpacing: 1, marginBottom: 8 }}>{t(item[0])}</div>
<div style={{ fontSize: 32, fontWeight: 700, color: item[3], lineHeight: 1 }}>{item[1]}%</div>
<div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 8 }}>
<span style={{ fontSize: 12, color: better ? c.ok : worse ? c.ng : c.txM, fontWeight: 600 }}>{diff > 0 ? "▲" : diff < 0 ? "▼" : "→"}{Math.abs(diff)}%</span>
<span style={{ fontSize: 11, color: c.txM }}>{prevLabel}{t("比")}</span>
</div>
<div style={{ fontSize: 11, color: c.txM, marginTop: 2 }}>{prevLabel}: {item[2]}%</div>
</div>
);
})}
</div>
{/* 連続問題施設 + エラー種別 */}
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 24 }}>
{/* #4 連続問題施設 */}
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, overflow: "hidden" }}>
<div style={{ padding: "14px 20px", borderBottom: "1px solid " + c.bd }}>
<div style={{ fontSize: 13, fontWeight: 600, color: c.tx }}>{t("連続問題施設")}</div>
<div style={{ fontSize: 11, color: c.txM, marginTop: 2 }}>{t("2日以上連続で△以下または出発失敗の施設")}</div>
</div>
{RANK.filter(function (f) { return f.cont >= 2; }).length === 0
? <div style={{ padding: "20px", textAlign: "center", fontSize: 12, color: c.txM }}>{t("該当施設なし")}</div>
: (function () {
var contFacs = RANK.filter(function (f) { return f.cont >= 2; }).sort(function (a, b) { return b.cont - a.cont; });
var displayFacs = showAllCont ? contFacs : contFacs.slice(0, 10);
return (
<div>
{displayFacs.map(function (f, i) {
var lv = f.cont >= 3 ? 3 : 2;
var lvCol = lv >= 3 ? c.ng : c.wn;
return (
<div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 20px", borderBottom: "1px solid " + c.bd + "11" }}>
<span style={{ fontSize: 11, padding: "2px 8px", borderRadius: 4, background: lvCol + "18", color: lvCol, fontWeight: 600, whiteSpace: "nowrap" }}>Lv{lv} / {f.cont}{lang === "en" ? "d" : "日"}</span>
<span style={{ fontSize: 13, fontWeight: 600, color: c.tx, flex: 1 }}>{f.f}</span>
<span style={{ fontSize: 12, color: c.txM }}>{t("完了率")} {f.cv}%</span>
</div>
);
})}
{!showAllCont && contFacs.length > 10 && (
<div style={{ padding: "10px 20px", textAlign: "center" }}>
<button onClick={function () { setShowAllCont(true); }} style={{ fontSize: 12, color: c.pr, background: "none", border: "none", cursor: "pointer" }}>{lang === "en" ? ("Show " + (contFacs.length - 10) + " more →") : ("他" + (contFacs.length - 10) + "件を表示 →")}</button>
</div>
)}
</div>
);
})()
}
</div>
{/* #5 エラー種別の内訳 */}
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, overflow: "hidden" }}>
<div style={{ padding: "14px 20px", borderBottom: "1px solid " + c.bd }}>
<div style={{ fontSize: 13, fontWeight: 600, color: c.tx }}>{t("エラー種別の内訳")}</div>
<div style={{ fontSize: 11, color: c.txM, marginTop: 2 }}>{t("今週のエラー発生件数（種別ごと）")}</div>
</div>
{[
{ name: "ハンドルアップ", count: 8, pct: 32, color: c.wn },
{ name: "LostLocation", count: 5, pct: 20, color: c.ng },
{ name: "オフライン", count: 4, pct: 16, color: c.ng },
{ name: "ブラシエラー", count: 3, pct: 12, color: c.wn },
{ name: "緊急停止", count: 2, pct: 8, color: c.ng },
{ name: "充電不足", count: 2, pct: 8, color: c.txD },
{ name: "その他", count: 1, pct: 4, color: c.txM },
].map(function (e, i) {
return (
<div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 20px", borderBottom: "1px solid " + c.bd + "11" }}>
<div style={{ width: 110, fontSize: 12, color: c.tx }}>{t(e.name)}</div>
<div style={{ flex: 1, height: 6, background: c.bd + "44", borderRadius: 3, overflow: "hidden" }}>
<div style={{ width: e.pct + "%", height: "100%", background: e.color, borderRadius: 3 }} />
</div>
<div style={{ width: 30, textAlign: "right", fontSize: 13, fontWeight: 600, color: e.color }}>{e.count}</div>
<div style={{ width: 35, textAlign: "right", fontSize: 11, color: c.txM }}>{e.pct}%</div>
</div>
);
})}
</div>
</div>
{/* 施設別パフォーマンス */}
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, overflow: "hidden" }}>
<div style={{ padding: "16px 20px", borderBottom: "1px solid " + c.bd, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div style={{ fontSize: 14, fontWeight: 600, color: c.tx }}>{t("施設別パフォーマンス（稼働率ワースト順）")}</div>
<span style={{ fontSize: 12, color: c.txM }}>{RANK.length}{lang === "en" ? " facilities" : "施設"}</span>
</div>
<div style={{ overflowX: "auto" }}>
<table style={{ width: "100%", borderCollapse: "collapse", minWidth: 900 }}>
<thead><tr>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("施設名")}</th>
<th style={Object.assign({}, th, { textAlign: "right" })}>{t("稼働率")}</th>
<th style={Object.assign({}, th, { textAlign: "right" })}>{rptPeriod === "weekly" ? t("前週") : t("前月")}</th>
<th style={Object.assign({}, th, { textAlign: "right" })}>{t("出発成功率")}</th>
<th style={Object.assign({}, th, { textAlign: "right" })}>{t("完了率")}</th>
<th style={Object.assign({}, th, { textAlign: "right" })}>{rptPeriod === "weekly" ? t("前週") : t("前月")}</th>
<th style={Object.assign({}, th, { textAlign: "right" })}>{t("エラー率")}</th>
<th style={Object.assign({}, th, { textAlign: "center" })}>{t("変化")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("ステータス")}</th>
</tr></thead>
<tbody>
{(showAllRank ? RANK : RANK.slice(0, 10)).map(function (f, i) {
var sc = f.s === "要改善" ? c.ng : f.s === "注意" ? c.wn : c.ok;
var arDiff = f.ar - f.arP;
var cvDiff = f.cv - f.cvP;
var overallDiff = Math.round((arDiff + cvDiff) / 2);
var diffCol = overallDiff > 0 ? c.ok : overallDiff < 0 ? c.ng : c.txM;
return (
<tr key={i} style={{ borderBottom: "1px solid " + c.bd + "22" }}>
<td style={Object.assign({}, td, { fontWeight: 600 })}>{f.f}</td>
<td style={{ padding: "12px", textAlign: "right" }}><span style={{ fontWeight: 600, color: f.ar < 80 ? c.ng : f.ar < 90 ? c.wn : c.ok }}>{f.ar}%</span></td>
<td style={{ padding: "12px", textAlign: "right", fontSize: 11, color: c.txM }}>{f.arP}%</td>
<td style={{ padding: "12px", textAlign: "right" }}><span style={{ fontWeight: 600, color: f.dp < 80 ? c.ng : f.dp < 90 ? c.wn : c.pr }}>{f.dp}%</span></td>
<td style={{ padding: "12px", textAlign: "right", color: c.tx }}>{f.cv}%</td>
<td style={{ padding: "12px", textAlign: "right", fontSize: 11, color: c.txM }}>{f.cvP}%</td>
<td style={{ padding: "12px", textAlign: "right" }}><span style={{ color: f.er > 8 ? c.ng : c.txD }}>{f.er}%</span></td>
<td style={{ padding: "12px", textAlign: "center" }}><span style={{ fontSize: 12, fontWeight: 600, color: diffCol }}>{overallDiff > 0 ? "▲" + overallDiff : overallDiff < 0 ? "▼" + Math.abs(overallDiff) : "→"}</span></td>
<td style={td}><Pill text={t(f.s)} color={sc} /></td>
</tr>
);
})}
</tbody>
</table>
</div>
{!showAllRank && RANK.length > 10 && (
<div style={{ padding: "12px 20px", borderTop: "1px solid " + c.bd, textAlign: "center" }}>
<button onClick={function () { setShowAllRank(true); }} style={{ fontSize: 12, color: c.pr, background: "none", border: "none", cursor: "pointer" }}>全{RANK.length}{lang === "en" ? " facilities" : "施設"}を表示 →</button>
</div>
)}
{showAllRank && RANK.length > 10 && (
<div style={{ padding: "12px 20px", borderTop: "1px solid " + c.bd, textAlign: "center" }}>
<button onClick={function () { setShowAllRank(false); }} style={{ fontSize: 12, color: c.txM, background: "none", border: "none", cursor: "pointer" }}>{t("上位10件に戻す")}</button>
</div>
)}
</div>
</div>
)}
{/* D-SECURITY DEVICE */}
{page === "dsecurity" && (
<div>
<h1 style={{ fontSize: 22, fontWeight: 700, margin: "0 0 16px" }}>{t("D-Sec ログ")}</h1>
<div style={{ display: "flex", gap: 10, marginBottom: 16, flexWrap: "wrap", alignItems: "center" }}>
<select style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx }}>
<option>{t("全グループ")}</option><option>PPIH</option>
</select>
<select style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx }}>
<option>{t("全会社")}</option><option>{t("ドン・キホーテ")}</option><option>{t("ユニー")}</option><option>{t("ローソン")}</option>
</select>
<input placeholder={t("施設名 / デバイスID")} style={{ fontSize: 12, padding: "6px 12px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx, width: 180 }} />
<div style={{ display: "flex", gap: 6 }}>
<BtnF active={dsLogFilt === "all"} color={c.txD} onClick={function () { setDsLogFilt("all"); }}>{t("全て")}</BtnF>
<BtnF active={dsLogFilt === "abnormal"} color={c.ng} onClick={function () { setDsLogFilt("abnormal"); }}>{t("異常・通信断")}</BtnF>
<BtnF active={dsLogFilt === "normal"} color={c.ok} onClick={function () { setDsLogFilt("normal"); }}>正常</BtnF>
</div>
</div>
<div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginBottom: 24 }}>
<Num value={DSDEV.length} label={t("D-Sデバイス総数")} color={c.pr} c={c} />
<Num value={DSDEV.filter(function (d) { return d.st === "正常"; }).length} label={t("正常稼働")} color={c.ok} c={c} />
<Num value={DSDEV.filter(function (d) { return d.st !== "正常"; }).length} label={t("異常・通信断")} sub={t("要対応")} color={c.ng} c={c} />
</div>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, overflow: "hidden" }}>
<table style={{ width: "100%", borderCollapse: "collapse" }}>
<thead><tr>
<th style={Object.assign({}, th, { textAlign: "left" })}>ID</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("施設名")}</th>
<th style={Object.assign({}, th, { textAlign: "center" })}>{t("接続状態")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("最終通信")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("トークン期限")}</th>
<th style={Object.assign({}, th, { textAlign: "center" })}>{t("残日数")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("備考")}</th>
</tr></thead>
<tbody>
{DSDEV.filter(function (d) {
if (dsLogFilt === "abnormal") return d.st !== "正常";
if (dsLogFilt === "normal") return d.st === "正常";
return true;
}).sort(function (a, b) {
var order = { "異常": 0, "通信断": 1, "正常": 2 };
return (order[a.st] || 9) - (order[b.st] || 9);
}).map(function (d, i) {
var days = tokenDays(d.te);
var dayCol = days <= 7 ? c.ng : days <= 30 ? c.wn : c.ok;
return (
<tr key={i} style={{ borderBottom: "1px solid " + c.bd + "22" }}>
<td style={{ padding: "12px", fontFamily: "monospace", fontSize: 12, color: c.tx }}>{d.id}</td>
<td style={td}>{d.f}</td>
<td style={{ padding: "12px", textAlign: "center" }}><Pill text={t(d.st)} color={d.st === "正常" ? c.ok : c.ng} /></td>
<td style={{ padding: "12px", fontSize: 12, color: c.txD }}>{d.lc}</td>
<td style={tdm}>{d.te}</td>
<td style={{ padding: "12px", textAlign: "center" }}><span style={{ fontSize: 12, fontWeight: 600, color: dayCol }}>{days}{lang === "en" ? "d" : "日"}</span></td>
<td style={{ padding: "12px", fontSize: 12, color: d.n ? c.wn : c.txM }}>{t(d.n) || "-"}</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
)}
{/* D-SECURITY ALERT */}
{page === "dsalert" && (
<div>
<h1 style={{ fontSize: 22, fontWeight: 700, margin: "0 0 4px" }}>{t("D-Security アラート")}</h1>
<div style={{ fontSize: 13, color: c.txD, marginBottom: 16 }}>{t("セキュリティ無効・通信断・トークン期限のアラート管理")}</div>
{/* サマリーカウント */}
<div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginBottom: 16 }}>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 10, padding: "12px 16px", display: "flex", alignItems: "center", gap: 12 }}>
<div style={{ fontSize: 28, fontWeight: 700, color: c.ng }}>{dsaState.filter(function (a) { return a.st === "未対応"; }).length}</div>
<div><div style={{ fontSize: 12, fontWeight: 600, color: c.ng }}>{t("未対応")}</div><div style={{ fontSize: 11, color: c.txM }}>{t("即時対応")}</div></div>
</div>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 10, padding: "12px 16px", display: "flex", alignItems: "center", gap: 12 }}>
<div style={{ fontSize: 28, fontWeight: 700, color: c.wn }}>{dsaState.filter(function (a) { return a.st === "対応中"; }).length}</div>
<div><div style={{ fontSize: 12, fontWeight: 600, color: c.wn }}>{t("対応中")}</div><div style={{ fontSize: 11, color: c.txM }}>{t("進行中")}</div></div>
</div>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 10, padding: "12px 16px", display: "flex", alignItems: "center", gap: 12 }}>
<div style={{ fontSize: 28, fontWeight: 700, color: c.ok }}>{dsaState.filter(function (a) { return a.st === "対応済み"; }).length}</div>
<div><div style={{ fontSize: 12, fontWeight: 600, color: c.ok }}>{t("対応済み")}</div><div style={{ fontSize: 11, color: c.txM }}>{t("完了")}</div></div>
</div>
</div>
{/* フィルタ */}
<div style={{ display: "flex", gap: 10, marginBottom: 16, flexWrap: "wrap", alignItems: "center" }}>
<div style={{ display: "flex", alignItems: "center", gap: 6 }}>
<input type="date" defaultValue="2026-03-20" style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx }} />
<span style={{ fontSize: 12, color: c.txM }}>〜</span>
<input type="date" defaultValue="2026-03-27" style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx }} />
</div>
<select style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx }}>
<option>{t("全グループ")}</option><option>PPIH</option>
</select>
<select style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx }}>
<option>{t("全会社")}</option><option>{t("ドン・キホーテ")}</option><option>{t("ユニー")}</option><option>{t("ローソン")}</option>
</select>
<select value={dsaTypeFilt} onChange={function (e) { setDsaTypeFilt(e.target.value); }} style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx }}>
<option value="all">{t("全種別")}</option><option value="セキュリティ無効">{t("セキュリティ無効")}</option><option value="通信断">{t("通信断")}</option><option value="トークン期限">{t("トークン期限")}</option>
</select>
<div style={{ display: "flex", gap: 6 }}>
<BtnF active={daFilt === "unresolved"} color={c.wn} onClick={function () { setDaFilt("unresolved"); }}>{t("未対応・対応中")}</BtnF>
<BtnF active={daFilt === "all"} color={c.txD} onClick={function () { setDaFilt("all"); }}>{t("全件")}</BtnF>
<BtnF active={daFilt === "done"} color={c.ok} onClick={function () { setDaFilt("done"); }}>{t("対応済み")}</BtnF>
</div>
</div>
{dsaState.filter(function (a) {
if (daFilt === "unresolved") return a.st === "未対応" || a.st === "対応中";
if (daFilt === "done") return a.st === "対応済み";
return true;
}).filter(function (a) {
if (dsaTypeFilt === "all") return true;
return a.type === dsaTypeFilt;
}).map(function (a) {
var tpCol = a.type === "トークン期限" ? c.wn : c.ng;
var ss = a.st === "未対応" ? { b: c.ngD, t: c.ng } : a.st === "対応中" ? { b: c.wnD, t: c.wn } : { b: c.okD, t: c.ok };
return (
<div key={a.id} style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, borderLeft: "3px solid " + tpCol, padding: "16px 20px", marginBottom: 12 }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", flexWrap: "wrap", gap: 12 }}>
<div style={{ flex: 1, minWidth: 250 }}>
<div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
<Pill text={t(a.type)} color={tpCol} />
<span style={{ fontSize: 11, fontFamily: "monospace", padding: "2px 6px", borderRadius: 4, background: c.sfH, color: c.txM }}>{a.dev}</span>
</div>
<div style={{ fontSize: 14, fontWeight: 600, color: c.tx }}>{a.fac}</div>
<div style={{ fontSize: 13, color: c.txD, marginTop: 4 }}>{t(a.det)}</div>
<div style={{ fontSize: 11, color: c.txM, marginTop: 4 }}>検知: {a.tm}</div>
{a.mm && <div style={{ fontSize: 12, color: c.txM, marginTop: 6, padding: "6px 10px", background: c.sfH, borderRadius: 6, borderLeft: "2px solid " + c.bd }}>{t(a.mm)}</div>}
</div>
<button onClick={function () { cycleDsa(a.id); }} style={{ fontSize: 12, padding: "4px 14px", borderRadius: 6, cursor: "pointer", border: "1px solid " + ss.t + "44", background: ss.b, color: ss.t, fontWeight: 600 }}>
{a.st}
</button>
</div>
</div>
);
})}
</div>
)}
{/* FACILITY ROBOT MASTER */}
{page === "robot" && (
<div>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24 }}>
<h1 style={{ fontSize: 22, fontWeight: 700, margin: 0 }}>{t("施設ロボットマスタ")}</h1>
<div style={{ display: "flex", gap: 8 }}>
<input value={rSrch} onChange={function (e) { setRSrch(e.target.value); }} placeholder={t("施設名 / シリアル / 住所")} style={{ fontSize: 12, padding: "6px 12px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx, width: 200 }} />
<button style={{ fontSize: 12, color: c.ac, background: "none", border: "1px solid " + c.ac + "44", borderRadius: 6, padding: "6px 14px", cursor: "pointer" }}>{t("📥 インポート")}</button>
<button style={{ fontSize: 12, color: c.pr, background: c.prD, border: "none", borderRadius: 6, padding: "6px 14px", cursor: "pointer" }}>{t("+ 新規追加")}</button>
</div>
</div>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, overflow: "hidden" }}>
<div style={{ overflowX: "auto" }}>
<table style={{ width: "100%", borderCollapse: "collapse", minWidth: 1300 }}>
<thead><tr>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("施設名")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("都道府県")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("住所")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("電話番号")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("責任者名")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("担当者名")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("メール")}</th>
<th style={Object.assign({}, th, { textAlign: "center" })}>{t("監視")}</th>
<th style={Object.assign({}, th, { textAlign: "center" })}>D-Sec</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("ロボット（メーカー / 機種 / シリアル）")}</th>
</tr></thead>
<tbody>
{ROBOTS.filter(function (r) {
if (!rSrch) return true;
var q = rSrch.toLowerCase();
var botMatch = r.bots.some(function (b) { return b.sn.toLowerCase().indexOf(q) >= 0 || b.mk.toLowerCase().indexOf(q) >= 0 || b.md.toLowerCase().indexOf(q) >= 0; });
return r.f.toLowerCase().indexOf(q) >= 0 || r.pref.toLowerCase().indexOf(q) >= 0 || r.addr.toLowerCase().indexOf(q) >= 0 || botMatch;
}).map(function (r, i) {
return (
<tr key={i} style={{ borderBottom: "1px solid " + c.bd + "22", verticalAlign: "top" }}>
<td style={Object.assign({}, td, { fontWeight: 600 })}>{r.f}</td>
<td style={{ padding: "12px", fontSize: 12, color: c.txD }}>{r.pref}</td>
<td style={{ padding: "12px", fontSize: 12, color: c.txD }}>{r.addr}</td>
<td style={{ padding: "12px", fontSize: 12, color: c.txD, whiteSpace: "nowrap" }}>{r.tel}</td>
<td style={td}>{r.mgr}</td>
<td style={td}>{r.staff}</td>
<td style={{ padding: "12px", fontSize: 11, fontFamily: "monospace", color: c.txD }}>{r.email}</td>
<td style={{ padding: "12px", textAlign: "center", fontSize: 16 }}>{r.mon ? <span style={{ color: c.ok }}>○</span> : <span style={{ color: c.txM }}>ー</span>}</td>
<td style={{ padding: "12px", textAlign: "center", fontSize: 16 }}>{r.dsec ? <span style={{ color: c.ac }}>○</span> : <span style={{ color: c.txM }}>ー</span>}</td>
<td style={{ padding: "12px" }}>
{r.bots.map(function (b, j) {
return (
<div key={j} style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: j < r.bots.length - 1 ? 6 : 0 }}>
<span style={{ fontSize: 11, padding: "2px 6px", borderRadius: 4, background: c.prD, color: c.pr, fontWeight: 600 }}>{b.mk}</span>
<span style={{ fontSize: 12, color: c.tx }}>{b.md}</span>
<span style={{ fontSize: 11, fontFamily: "monospace", color: c.txM }}>{b.sn}</span>
</div>
);
})}
</td>
</tr>
);
})}
</tbody>
</table>
</div>
<div style={{ padding: "12px 20px", borderTop: "1px solid " + c.bd, fontSize: 12, color: c.txM }}>{lang === "en" ? "All " : "全"}{ROBOTS.length}{lang === "en" ? " facilities" : "施設"}</div>
</div>
</div>
)}
{/* SCHEDULE */}
{page === "schedule" && (
<div>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24 }}>
<h1 style={{ fontSize: 22, fontWeight: 700, margin: 0 }}>{t("スケジュール管理")}</h1>
<input value={sSrch} onChange={function (e) { setSSrch(e.target.value); }} placeholder={t("施設名 / シリアル")} style={{ fontSize: 12, padding: "6px 12px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx, width: 180 }} />
</div>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, overflow: "hidden" }}>
<table style={{ width: "100%", borderCollapse: "collapse" }}>
<thead><tr>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("シリアル")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("施設名")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("曜日")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("時間")}</th>
<th style={Object.assign({}, th, { textAlign: "center" })}>{t("有効")}</th>
</tr></thead>
<tbody>
{SCHED.filter(function (s) { return !sSrch || s.s.toLowerCase().indexOf(sSrch.toLowerCase()) >= 0 || s.f.toLowerCase().indexOf(sSrch.toLowerCase()) >= 0; }).map(function (s, i) {
return (
<tr key={i} style={{ borderBottom: "1px solid " + c.bd + "22", opacity: s.on ? 1 : 0.5 }}>
<td style={{ padding: "12px", fontFamily: "monospace", fontSize: 12, color: c.tx }}>{s.s}</td>
<td style={td}>{s.f}</td>
<td style={td}>{s.d}</td>
<td style={td}>{s.st} - {s.en}</td>
<td style={{ padding: "12px", textAlign: "center", fontSize: 18, color: s.on ? c.ok : c.ng }}>{s.on ? "●" : "○"}</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
)}
{/* INSPECTION RECORDS */}
{page === "inspection" && (
<div>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
<div>
<h1 style={{ fontSize: 22, fontWeight: 700, margin: "0 0 4px" }}>{t("点検記録")}</h1>
<div style={{ fontSize: 13, color: c.txD }}>{t("定期点検の実施記録・写真・申し送り事項を管理")}</div>
</div>
<div style={{ display: "flex", gap: 8 }}>
<button style={{ fontSize: 12, color: c.pr, background: c.prD, border: "none", borderRadius: 6, padding: "8px 14px", cursor: "pointer" }}>{t("📥 CSVインポート")}</button>
<button onClick={function () { setInspNew(true); }} style={{ fontSize: 12, color: "#fff", background: c.pr, border: "none", borderRadius: 6, padding: "8px 16px", cursor: "pointer", fontWeight: 600 }}>{t("+ 新規登録")}</button>
</div>
</div>
<div style={{ display: "flex", gap: 10, marginBottom: 16, flexWrap: "wrap", alignItems: "center" }}>
<div style={{ display: "flex", alignItems: "center", gap: 6 }}>
<input type="date" defaultValue="2026-03-01" style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx }} />
<span style={{ fontSize: 12, color: c.txM }}>〜</span>
<input type="date" defaultValue="2026-03-31" style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx }} />
</div>
<select style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx }}>
<option>{t("全グループ")}</option><option>PPIH</option>
</select>
<select style={{ fontSize: 12, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx }}>
<option>{t("全会社")}</option><option>{t("ドン・キホーテ")}</option><option>{t("ユニー")}</option>
</select>
<input placeholder={t("施設名 / 記入者")} style={{ fontSize: 12, padding: "6px 12px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx, width: 180 }} />
</div>
<div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginBottom: 20 }}>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 10, padding: "12px 16px", display: "flex", alignItems: "center", gap: 12 }}>
<div style={{ fontSize: 28, fontWeight: 700, color: c.pr }}>{INSPECTIONS.length}</div>
<div><div style={{ fontSize: 12, fontWeight: 600, color: c.tx }}>{t("総点検数")}</div><div style={{ fontSize: 11, color: c.txM }}>{t("期間内")}</div></div>
</div>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 10, padding: "12px 16px", display: "flex", alignItems: "center", gap: 12 }}>
<div style={{ fontSize: 28, fontWeight: 700, color: c.ok }}>{new Set(INSPECTIONS.map(function (x) { return x.facility; })).size}</div>
<div><div style={{ fontSize: 12, fontWeight: 600, color: c.tx }}>{t("点検施設数")}</div><div style={{ fontSize: 11, color: c.txM }}>{t("ユニーク")}</div></div>
</div>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 10, padding: "12px 16px", display: "flex", alignItems: "center", gap: 12 }}>
<div style={{ fontSize: 28, fontWeight: 700, color: c.wn }}>{INSPECTIONS.filter(function (x) { return x.notes; }).length}</div>
<div><div style={{ fontSize: 12, fontWeight: 600, color: c.tx }}>{t("申し送りあり")}</div><div style={{ fontSize: 11, color: c.txM }}>{t("要確認")}</div></div>
</div>
</div>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, overflow: "hidden" }}>
<div style={{ overflowX: "auto" }}>
<table style={{ width: "100%", borderCollapse: "collapse", minWidth: 800 }}>
<thead><tr>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("訪問日")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("記入者")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("所属会社")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("店舗名")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("ブランド")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("シリアル")}</th>
<th style={Object.assign({}, th, { textAlign: "center" })}>{t("申し送り")}</th>
<th style={Object.assign({}, th, { textAlign: "center" })}>{t("操作")}</th>
</tr></thead>
<tbody>
{INSPECTIONS.map(function (ins, i) {
return (
<tr key={i} style={{ borderBottom: "1px solid " + c.bd + "22" }}>
<td style={{ padding: "12px", fontSize: 13, color: c.tx }}>{ins.date}</td>
<td style={Object.assign({}, td, { fontWeight: 600 })}>{ins.inspector}</td>
<td style={{ padding: "12px", fontSize: 12, color: c.txD }}>{ins.company}</td>
<td style={td}>{ins.facility}</td>
<td style={td}><Pill text={ins.brand} color={ins.brand === "ユニー" ? c.ac : c.pr} /></td>
<td style={{ padding: "12px", fontSize: 11, fontFamily: "monospace", color: c.txM }}>{ins.robot}</td>
<td style={{ padding: "12px", textAlign: "center" }}>{ins.notes ? <span style={{ fontSize: 12, color: c.wn, fontWeight: 600 }}>{t("あり")}</span> : <span style={{ fontSize: 12, color: c.txM }}>ー</span>}</td>
<td style={{ padding: "12px", textAlign: "center" }}>
<button onClick={function () { setInspDetail(ins); }} style={{ fontSize: 11, color: c.pr, background: c.prD, border: "none", borderRadius: 4, padding: "4px 10px", cursor: "pointer" }}>{t("詳細")}</button>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
</div>
)}
{/* SYSTEM */}
{page === "system" && (
<div>
<h1 style={{ fontSize: 22, fontWeight: 700, margin: "0 0 16px" }}>{t("システム管理")}</h1>
{/* Sub-menu tabs */}
<div style={{ display: "flex", gap: 4, marginBottom: 24, borderBottom: "1px solid " + c.bd, paddingBottom: 0 }}>
{[
{ id: "display", label: t("表示設定") },
{ id: "ops", label: t("運用設定") },
{ id: "notify", label: t("通知設定") },
{ id: "users", label: t("ユーザー管理") },
{ id: "roles", label: t("権限管理") },
{ id: "customer", label: t("顧客管理") },
{ id: "group", label: t("グループ管理") },
{ id: "ops", label: t("運用設定") },
{ id: "auditlog", label: t("監査ログ") },
].map(function (tab) {
var active = sysTab === tab.id;
return (
<button key={tab.id} onClick={function () { setSysTab(tab.id); }} style={{
fontSize: 13, fontWeight: active ? 600 : 400, padding: "10px 20px",
cursor: "pointer", border: "none", borderBottom: active ? "2px solid " + c.pr : "2px solid transparent",
background: "transparent", color: active ? c.pr : c.txD,
marginBottom: -1,
}}>
{tab.label}
</button>
);
})}
</div>
{/* 表示設定 */}
{sysTab === "display" && (
<div>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, overflow: "hidden" }}>
<div style={{ padding: "16px 20px", borderBottom: "1px solid " + c.bd }}>
<div style={{ fontSize: 14, fontWeight: 600, color: c.tx }}>{t("ダッシュボード表示項目")}</div>
<div style={{ fontSize: 12, color: c.txM, marginTop: 2 }}>{t("各項目のON/OFFでダッシュボードの表示内容をカスタマイズ")}</div>
</div>
{[
{ key: "secBanner", label: "D-Securityアラートバナー", desc: "セキュリティ無効施設の赤色警告バナー" },
{ key: "detailLog", label: "清掃詳細ログ（コンパクト版）", desc: "△×の清掃詳細ログテーブル" },
{ key: "scheduleBar", label: "スケジュール進捗", desc: "完了数/予定数のプログレスバー" },
{ key: "failBreakdown", label: "失敗の内訳", desc: "ロボット異常/未実施/セキュリティ有効/制御盤異常の件数" },
].map(function (item, i) {
var isOn = dashItems[item.key];
return (
<div key={i} style={{ padding: "14px 20px", borderBottom: "1px solid " + c.bd + "44", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div>
<div style={{ fontSize: 13, fontWeight: 600, color: c.tx }}>{t(item.label)}</div>
<div style={{ fontSize: 12, color: c.txM, marginTop: 2 }}>{t(item.desc)}</div>
</div>
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
<button onClick={function () {
var next = {};
Object.keys(dashItems).forEach(function (k) { next[k] = dashItems[k]; });
next[item.key] = !isOn;
setDashItems(next);
}} style={{ width: 48, height: 26, borderRadius: 13, border: "none", cursor: "pointer", background: isOn ? c.ok : c.bd, position: "relative" }}>
<div style={{ width: 20, height: 20, borderRadius: 10, background: "#fff", position: "absolute", top: 3, left: isOn ? 25 : 3, transition: "left .2s" }} />
</button>
<span style={{ fontSize: 12, fontWeight: 600, color: isOn ? c.ok : c.txM, width: 28 }}>{isOn ? "ON" : "OFF"}</span>
</div>
</div>
);
})}
</div>
</div>
)}
{/* 運用設定 */}
{sysTab === "ops" && (
<div>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, overflow: "hidden", marginBottom: 16 }}>
<div style={{ padding: "16px 20px", borderBottom: "1px solid " + c.bd }}>
<div style={{ fontSize: 14, fontWeight: 600, color: c.tx }}>{t("事前チェック設定")}</div>
<div style={{ fontSize: 12, color: c.txM, marginTop: 2 }}>{t("清掃開始予定時刻の何分前にロボット状態を自動チェックするかを設定")}</div>
</div>
<div style={{ padding: "20px" }}>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
<div>
<label style={{ fontSize: 12, color: c.txM, display: "block", marginBottom: 6 }}>{t("第1回チェック（分前）")}</label>
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
<input type="number" defaultValue="60" min="10" max="120" style={{ fontSize: 14, padding: "8px 12px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx, width: 80, textAlign: "right" }} />
<span style={{ fontSize: 13, color: c.txD }}>{t("分前")}</span>
<span style={{ fontSize: 11, color: c.txM, marginLeft: 8 }}>{t("デフォルト: 60分")}</span>
</div>
</div>
<div>
<label style={{ fontSize: 12, color: c.txM, display: "block", marginBottom: 6 }}>{t("第2回チェック（分前）")}</label>
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
<input type="number" defaultValue="30" min="5" max="60" style={{ fontSize: 14, padding: "8px 12px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx, width: 80, textAlign: "right" }} />
<span style={{ fontSize: 13, color: c.txD }}>{t("分前")}</span>
<span style={{ fontSize: 11, color: c.txM, marginLeft: 8 }}>{t("デフォルト: 30分")}</span>
</div>
</div>
</div>
</div>
</div>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, overflow: "hidden", marginBottom: 16 }}>
<div style={{ padding: "16px 20px", borderBottom: "1px solid " + c.bd }}>
<div style={{ fontSize: 14, fontWeight: 600, color: c.tx }}>{t("完了率の判定閾値")}</div>
<div style={{ fontSize: 12, color: c.txM, marginTop: 2 }}>{t("清掃詳細ログの◎○△×判定に使用する閾値を設定")}</div>
</div>
<div style={{ padding: "20px" }}>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 20 }}>
{[["◎ 基準", 90, c.ok, "以上で◎"], ["○ 基準", 70, c.ok, "以上で○（◎未満）"], ["△ 基準", 10, c.wn, "以上で△（○未満）"]].map(function (item, i) {
return (
<div key={i}>
<label style={{ fontSize: 12, color: c.txM, display: "block", marginBottom: 6 }}>{t(item[0])}</label>
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
<input type="number" defaultValue={item[1]} min="0" max="100" style={{ fontSize: 14, padding: "8px 12px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx, width: 70, textAlign: "right" }} />
<span style={{ fontSize: 13, color: c.txD }}>%</span>
</div>
<div style={{ fontSize: 11, color: c.txM, marginTop: 4 }}>{t(item[3])}</div>
</div>
);
})}
</div>
<div style={{ fontSize: 11, color: c.txM, marginTop: 12 }}>{t("※ △基準未満は自動的に×判定。現在はシステム全体の設定。P2以降で顧客別設定に拡張予定")}</div>
</div>
</div>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, overflow: "hidden" }}>
<div style={{ padding: "16px 20px", borderBottom: "1px solid " + c.bd }}>
<div style={{ fontSize: 14, fontWeight: 600, color: c.tx }}>{t("アドバイス エスカレーション閾値")}</div>
<div style={{ fontSize: 12, color: c.txM, marginTop: 2 }}>{t("対応アドバイスのレベルが上がる連続日数の閾値を設定")}</div>
</div>
<div style={{ padding: "20px" }}>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
<div>
<label style={{ fontSize: 12, color: c.txM, display: "block", marginBottom: 6 }}>{t("レベル2（DFA運用がアクション）")}</label>
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
<input type="number" defaultValue="2" min="2" max="7" style={{ fontSize: 14, padding: "8px 12px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx, width: 70, textAlign: "right" }} />
<span style={{ fontSize: 13, color: c.txD }}>{t("日以上連続")}</span>
</div>
</div>
<div>
<label style={{ fontSize: 12, color: c.txM, display: "block", marginBottom: 6 }}>{t("レベル3（DFA介入・オンサイト訪問検討）")}</label>
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
<input type="number" defaultValue="3" min="2" max="14" style={{ fontSize: 14, padding: "8px 12px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx, width: 70, textAlign: "right" }} />
<span style={{ fontSize: 13, color: c.txD }}>{t("日以上連続")}</span>
</div>
</div>
</div>
<div style={{ fontSize: 11, color: c.txM, marginTop: 12 }}>{t("※「連続」はスケジュール存在日の連続。実績データに基づき調整を推奨")}</div>
</div>
</div>
</div>
)}
{/* 通知設定 */}
{sysTab === "notify" && (
<div>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, overflow: "hidden" }}>
<div style={{ padding: "16px 20px", borderBottom: "1px solid " + c.bd, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div>
<div style={{ fontSize: 14, fontWeight: 600, color: c.tx }}>{t("通知設定")}</div>
<div style={{ fontSize: 12, color: c.txM, marginTop: 2 }}>{t("顧客デフォルト＋施設上書きの継承モデル")}</div>
</div>
<button style={{ fontSize: 12, color: c.pr, background: c.prD, border: "none", borderRadius: 6, padding: "6px 14px", cursor: "pointer" }}>{t("+ 通知追加")}</button>
</div>
<table style={{ width: "100%", borderCollapse: "collapse" }}>
<thead><tr>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("チャネル")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("送信先")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("イベント")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("スコープ")}</th>
</tr></thead>
<tbody>
{[
{ ch: "Slack", dest: "#donki-robot-alert", ev: "Critical, Warning", sc: "全施設（デフォルト）" },
{ ch: "メール", dest: "ops@example.com", ev: "Critical", sc: "全施設（デフォルト）" },
{ ch: "Slack", dest: "#shibuya-ops", ev: "全イベント", sc: "渋谷本店（上書き）" },
].map(function (n, i) {
return (
<tr key={i} style={{ borderBottom: "1px solid " + c.bd + "22" }}>
<td style={td}><Pill text={t(n.ch)} color={n.ch === "Slack" ? c.ac : c.pr} /></td>
<td style={{ padding: "12px", fontSize: 12, fontFamily: "monospace", color: c.txD }}>{n.dest}</td>
<td style={td}>{t(n.ev)}</td>
<td style={{ padding: "12px", fontSize: 12, color: n.sc.indexOf("上書き") >= 0 ? c.ac : c.txD }}>{t(n.sc)}</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
)}
{/* ユーザー管理 */}
{sysTab === "users" && (
<div>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, overflow: "hidden" }}>
<div style={{ padding: "16px 20px", borderBottom: "1px solid " + c.bd, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div>
<div style={{ fontSize: 14, fontWeight: 600, color: c.tx }}>{t("ユーザーマスタ")}</div>
<div style={{ fontSize: 12, color: c.txM, marginTop: 2 }}>{t("顧客管理者は会社/グループに紐づく。施設運用者は施設に紐づく")}</div>
</div>
<button onClick={function () { setUserEdit({ nm: "", em: "", rl: "DFA運用担当", co: "DFA Robotics", fac: "ー" }); }} style={{ fontSize: 12, color: "#fff", background: c.pr, border: "none", borderRadius: 6, padding: "8px 16px", cursor: "pointer", fontWeight: 600 }}>{t("+ 新規登録")}</button>
</div>
<div style={{ overflowX: "auto" }}>
<table style={{ width: "100%", borderCollapse: "collapse", minWidth: 1000 }}>
<thead><tr>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("名前")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("メール")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("ロール")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("会社/グループ")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("施設")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("最終ログイン")}</th>
<th style={Object.assign({}, th, { textAlign: "center" })}>{t("操作")}</th>
</tr></thead>
<tbody>
{[
{ nm: "DFA担当者A", em: "dfa-admin1@example.com", rl: "DFAシステム管理者", co: "DFA Robotics", fac: "ー", ll: "2026-03-27 09:02" },
{ nm: "DFA担当者B", em: "dfa-admin2@example.com", rl: "DFA運用担当", co: "DFA Robotics", fac: "ー", ll: "2026-03-27 09:05" },
{ nm: "DFA担当者C", em: "dfa-admin3@example.com", rl: "DFA運用担当", co: "DFA Robotics", fac: "ー", ll: "2026-03-26 09:10" },
{ nm: "顧客担当者A", em: "customer-admin1@example.com", rl: "顧客管理者", co: "ドン・キホーテ", fac: "ー（会社全体）", ll: "2026-03-25 14:00" },
{ nm: "担当者A", em: "store01@example.com", rl: "施設運用者", co: "ドン・キホーテ", fac: "MEGAドンキ渋谷本店", ll: "2026-03-27 06:30" },
{ nm: "担当者B", em: "store02@example.com", rl: "施設運用者", co: "ドン・キホーテ", fac: "ドンキ新宿歌舞伎町店", ll: "2026-03-27 06:45" },
].map(function (u, i) {
var rlCol = u.rl.indexOf("システム管理") >= 0 ? c.pr : u.rl.indexOf("運用担当") >= 0 ? c.ac : u.rl.indexOf("顧客") >= 0 ? c.wn : c.txD;
return (
<tr key={i} style={{ borderBottom: "1px solid " + c.bd + "22", cursor: "pointer" }} onClick={function () { setUserEdit(u); }}>
<td style={Object.assign({}, td, { fontWeight: 600 })}>{u.nm}</td>
<td style={{ padding: "12px", fontSize: 12, fontFamily: "monospace", color: c.txD }}>{u.em}</td>
<td style={td}><Pill text={t(u.rl)} color={rlCol} /></td>
<td style={td}>{u.co}</td>
<td style={{ padding: "12px", fontSize: 12, color: u.fac === "ー" || u.fac.indexOf("全体") >= 0 ? c.txM : c.tx }}>{t(u.fac)}</td>
<td style={{ padding: "12px", fontSize: 12, color: c.txM }}>{u.ll}</td>
<td style={{ padding: "12px", textAlign: "center" }}>
<div style={{ display: "flex", gap: 6, justifyContent: "center" }}>
<button style={{ fontSize: 11, color: c.pr, background: c.prD, border: "none", borderRadius: 4, padding: "4px 10px", cursor: "pointer" }}>{t("編集")}</button>
<button style={{ fontSize: 11, color: c.ng, background: "none", border: "1px solid " + c.ng + "44", borderRadius: 4, padding: "4px 10px", cursor: "pointer" }}>{t("削除")}</button>
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
</div>
)}
{/* 権限管理 */}
{sysTab === "roles" && (
<div>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, overflow: "hidden", marginBottom: 16 }}>
<div style={{ padding: "16px 20px", borderBottom: "1px solid " + c.bd }}>
<div style={{ fontSize: 14, fontWeight: 600, color: c.tx }}>{t("ロール定義（4層）")}</div>
<div style={{ fontSize: 12, color: c.txM, marginTop: 2 }}>{t("各ロールのスコープと紐づき")}</div>
</div>
<table style={{ width: "100%", borderCollapse: "collapse" }}>
<thead><tr>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("ロール")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("実装")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("紐づき")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("データスコープ")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("説明")}</th>
</tr></thead>
<tbody>
{[
{ rl: "DFAシステム管理者", ph: "P1", bind: "ー", sc: "全顧客・全施設", desc: "全権限。権限管理の編集はこのロールのみ" },
{ rl: "DFA運用担当", ph: "P1", bind: "ー", sc: "全顧客・全施設", desc: "全メニュー閲覧＋施設ロボットマスタ編集。権限管理は閲覧のみ" },
{ rl: "顧客管理者", ph: "P2", bind: "会社", sc: "自社施設のみ", desc: "自社の閲覧全般。施設ロボットマスタの編集不可" },
{ rl: "施設運用者・清掃業者", ph: "P2", bind: "施設", sc: "自施設のみ", desc: "設定メニュー以外の自施設データを閲覧" },
].map(function (r, i) {
var bindCol = r.bind === "会社" ? c.wn : r.bind === "施設" ? c.ac : c.txM;
return (
<tr key={i} style={{ borderBottom: "1px solid " + c.bd + "22" }}>
<td style={Object.assign({}, td, { fontWeight: 600 })}>{t(r.rl)}</td>
<td style={td}><Pill text={r.ph} color={r.ph === "P1" ? c.ok : c.txM} /></td>
<td style={{ padding: "12px", textAlign: "center" }}>{r.bind !== "ー" ? <Pill text={t(r.bind)} color={bindCol} /> : <span style={{ color: c.txM }}>ー</span>}</td>
<td style={td}>{t(r.sc)}</td>
<td style={tdm}>{t(r.desc)}</td>
</tr>
);
})}
</tbody>
</table>
</div>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, overflow: "hidden" }}>
<div style={{ padding: "16px 20px", borderBottom: "1px solid " + c.bd }}>
<div style={{ fontSize: 14, fontWeight: 600, color: c.tx }}>{t("メニュー×ロール アクセスマトリクス")}</div>
<div style={{ fontSize: 12, color: c.txM, marginTop: 2 }}>{t("施設運用者のスコープは自施設のみに限定")}</div>
</div>
<div style={{ overflowX: "auto" }}>
<table style={{ width: "100%", borderCollapse: "collapse", minWidth: 800 }}>
<thead><tr>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("メニュー")}</th>
<th style={Object.assign({}, th, { textAlign: "center" })}>{t("DFA管理者")}</th>
<th style={Object.assign({}, th, { textAlign: "center" })}>{t("DFA運用")}</th>
<th style={Object.assign({}, th, { textAlign: "center" })}>{t("顧客管理者")}</th>
<th style={Object.assign({}, th, { textAlign: "center" })}>{t("施設運用者")}</th>
</tr></thead>
<tbody>
{[
{ menu: "ダッシュボード", v: ["閲覧", "閲覧", "閲覧", "閲覧"] },
{ menu: "清掃詳細ログ", v: ["閲覧", "閲覧", "閲覧", "閲覧"] },
{ menu: "アラート", v: ["閲覧", "閲覧", "閲覧", "閲覧"] },
{ menu: "レポート", v: ["閲覧", "閲覧", "閲覧", "閲覧"] },
{ menu: "D-Secログ", v: ["閲覧", "閲覧", "閲覧", "閲覧"] },
{ menu: "D-Secアラート", v: ["閲覧", "閲覧", "閲覧", "閲覧"] },
{ menu: "施設ロボットマスタ", v: ["閲覧/編集/登録", "閲覧/編集/登録", "閲覧", "×"] },
{ menu: "スケジュール", v: ["閲覧", "閲覧", "閲覧", "閲覧"] },
{ menu: "システム設定", v: ["", "", "", ""], sec: true },
{ menu: "表示設定", v: ["閲覧/編集", "閲覧/編集", "閲覧/編集", "閲覧/編集"], sub: true },
{ menu: "運用設定", v: ["閲覧/編集", "閲覧", "×", "×"], sub: true },
{ menu: "通知設定", v: ["閲覧/編集/登録", "閲覧", "閲覧", "×"], sub: true },
{ menu: "ユーザー管理", v: ["閲覧/編集/登録", "閲覧", "×", "×"], sub: true },
{ menu: "権限管理", v: ["閲覧/編集/登録", "閲覧", "×", "×"], sub: true },
{ menu: "顧客管理", v: ["閲覧/編集/登録", "閲覧", "×", "×"], sub: true },
{ menu: "グループ管理", v: ["閲覧/編集/登録", "閲覧", "×", "×"], sub: true },
{ menu: "運用設定", v: ["閲覧/編集", "閲覧", "×", "×"], sub: true },
{ menu: "監査ログ", v: ["閲覧", "閲覧", "×", "×"], sub: true },
].map(function (r, i) {
function acStyle(v) {
if (!v) return { padding: "8px 12px", textAlign: "center" };
var col = c.txM;
if (v.indexOf("登録") >= 0) col = c.pr;
else if (v.indexOf("編集") >= 0) col = c.ok;
else if (v === "閲覧") col = c.txD;
else if (v === "×") col = c.ng;
return { padding: "8px 12px", textAlign: "center", fontSize: 11, color: col, fontWeight: v.indexOf("登録") >= 0 ? 600 : 400 };
}
if (r.sec) {
return (
<tr key={i} style={{ borderBottom: "1px solid " + c.bd }}>
<td colSpan={5} style={{ padding: "10px 12px", fontSize: 11, fontWeight: 700, color: c.txM, textTransform: "uppercase", letterSpacing: 1, background: c.sfH }}>{t(r.menu)}</td>
</tr>
);
}
return (
<tr key={i} style={{ borderBottom: "1px solid " + c.bd + "22", background: r.sub ? c.sfH : "transparent" }}>
<td style={{ padding: "8px 12px", fontSize: 13, color: c.tx, paddingLeft: r.sub ? 32 : 12 }}>{r.sub ? "└ " : ""}{t(r.menu)}</td>
<td style={acStyle(r.v[0])}>{t(r.v[0])}</td>
<td style={acStyle(r.v[1])}>{t(r.v[1])}</td>
<td style={acStyle(r.v[2])}>{t(r.v[2])}</td>
<td style={acStyle(r.v[3])}>{t(r.v[3])}</td>
</tr>
);
})}
</tbody>
</table>
</div>
<div style={{ padding: "12px 20px", borderTop: "1px solid " + c.bd, fontSize: 12, color: c.txM }}>
<span style={{ color: c.pr, fontWeight: 600 }}>{t("閲覧/編集/登録")}</span> = {t("フル権限")} / <span style={{ color: c.ok }}>{t("閲覧/編集")}</span> = {t("新規登録不可")} / <span style={{ color: c.txD }}>{t("閲覧")}</span> = {t("表示のみ")} / <span style={{ color: c.ng }}>×</span> = アクセス不可
</div>
</div>
</div>
)}
{/* 顧客管理 */}
{sysTab === "customer" && (
<div>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, overflow: "hidden" }}>
<div style={{ padding: "16px 20px", borderBottom: "1px solid " + c.bd, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div>
<div style={{ fontSize: 14, fontWeight: 600, color: c.tx }}>{t("顧客管理")}</div>
<div style={{ fontSize: 12, color: c.txM, marginTop: 2 }}>{t("会社単位の契約・モジュール管理")}</div>
</div>
<button onClick={function () { setCustEdit({ grp: "", nm: "", ct: "", plan: "Monitor Assist", mon: true, dsec: false, st: "有効" }); }} style={{ fontSize: 12, color: c.pr, background: c.prD, border: "none", borderRadius: 6, padding: "6px 14px", cursor: "pointer" }}>{t("+ 顧客追加")}</button>
</div>
<div style={{ overflowX: "auto" }}>
<table style={{ width: "100%", borderCollapse: "collapse", minWidth: 900 }}>
<thead><tr>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("グループ")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("会社名")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("連絡先")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("契約プラン")}</th>
<th style={Object.assign({}, th, { textAlign: "center" })}>{t("契約モジュール")}</th>
<th style={Object.assign({}, th, { textAlign: "center" })}>{t("監視施設")}</th>
<th style={Object.assign({}, th, { textAlign: "center" })}>{t("D-Sec施設")}</th>
<th style={Object.assign({}, th, { textAlign: "right" })}>{t("全施設")}</th>
<th style={Object.assign({}, th, { textAlign: "right" })}>{t("ロボット")}</th>
<th style={Object.assign({}, th, { textAlign: "center" })}>{t("状態")}</th>
<th style={Object.assign({}, th, { textAlign: "center" })}>{t("操作")}</th>
</tr></thead>
<tbody>
{[
{ grp: "PPIH", nm: "株式会社ドン・キホーテ", ct: "customer-admin1@example.com", plan: "Insight Assist", mon: true, dsec: true, monF: 9, dsecF: 5, fac: 9, rob: 11, st: "有効" },
{ grp: "PPIH", nm: "株式会社ユニー", ct: "uny-admin@example.com", plan: "Monitor Assist", mon: true, dsec: false, monF: 2, dsecF: 0, fac: 2, rob: 2, st: "有効" },
{ grp: "ー", nm: "株式会社サンプル商事C", ct: "sample-c@example.com", plan: "Monitor Assist", mon: true, dsec: false, monF: 3, dsecF: 0, fac: 3, rob: 3, st: "有効" },
{ grp: "ー", nm: "株式会社サンプル商事D", ct: "sample-d@example.com", plan: "D-Security", mon: false, dsec: true, monF: 0, dsecF: 2, fac: 2, rob: 0, st: "有効" },
].map(function (cu, i) {
return (
<tr key={i} style={{ borderBottom: "1px solid " + c.bd + "22" }}>
<td style={{ padding: "12px", fontSize: 12, color: cu.grp === "ー" ? c.txM : c.tx, fontWeight: cu.grp !== "ー" ? 600 : 400 }}>{cu.grp}</td>
<td style={Object.assign({}, td, { fontWeight: 600 })}>{cu.nm}</td>
<td style={{ padding: "12px", fontSize: 11, fontFamily: "monospace", color: c.txD }}>{cu.ct}</td>
<td style={td}><Pill text={cu.plan} color={c.pr} /></td>
<td style={{ padding: "12px", textAlign: "center" }}>
<div style={{ display: "inline-flex", gap: 6, alignItems: "center" }}>
<span style={{ fontSize: 12, padding: "2px 8px", borderRadius: 4, background: cu.mon ? c.ok + "22" : "transparent", color: cu.mon ? c.ok : c.txM, border: "1px solid " + (cu.mon ? c.ok + "44" : c.bd) }}>{cu.mon ? t("○ 監視") : t("ー 監視")}</span>
<span style={{ fontSize: 12, padding: "2px 8px", borderRadius: 4, background: cu.dsec ? c.ac + "22" : "transparent", color: cu.dsec ? c.ac : c.txM, border: "1px solid " + (cu.dsec ? c.ac + "44" : c.bd) }}>{cu.dsec ? t("○ D-Sec") : t("ー D-Sec")}</span>
</div>
</td>
<td style={{ padding: "12px", textAlign: "center", color: cu.monF > 0 ? c.ok : c.txM }}>{cu.monF > 0 ? cu.monF + " / " + cu.fac : "ー"}</td>
<td style={{ padding: "12px", textAlign: "center", color: cu.dsecF > 0 ? c.ac : c.txM }}>{cu.dsecF > 0 ? cu.dsecF + " / " + cu.fac : "ー"}</td>
<td style={{ padding: "12px", textAlign: "right" }}>{cu.fac}</td>
<td style={{ padding: "12px", textAlign: "right" }}>{cu.rob}</td>
<td style={{ padding: "12px", textAlign: "center" }}><Pill text={t(cu.st)} color={c.ok} /></td>
<td style={{ padding: "12px", textAlign: "center" }}>
<div style={{ display: "flex", gap: 6, justifyContent: "center" }}>
<button onClick={function () { setCustEdit(cu); }} style={{ fontSize: 11, color: c.pr, background: c.prD, border: "none", borderRadius: 4, padding: "4px 10px", cursor: "pointer" }}>{t("編集")}</button>
<button style={{ fontSize: 11, color: c.ng, background: "none", border: "1px solid " + c.ng + "44", borderRadius: 4, padding: "4px 10px", cursor: "pointer" }}>{t("削除")}</button>
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
</div>
)}
{/* グループ管理 */}
{sysTab === "group" && (
<div>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, overflow: "hidden" }}>
<div style={{ padding: "16px 20px", borderBottom: "1px solid " + c.bd, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div>
<div style={{ fontSize: 14, fontWeight: 600, color: c.tx }}>{t("グループ管理")}</div>
<div style={{ fontSize: 12, color: c.txM, marginTop: 2 }}>{t("グループ会社の親子関係を管理。顧客管理者をグループに紐づけると傘下の全会社を横断閲覧可能")}</div>
</div>
<button onClick={function () { setGrpEdit({ nm: "", companies: [] }); }} style={{ fontSize: 12, color: c.pr, background: c.prD, border: "none", borderRadius: 6, padding: "6px 14px", cursor: "pointer" }}>{t("+ グループ追加")}</button>
</div>
<div style={{ overflowX: "auto" }}>
<table style={{ width: "100%", borderCollapse: "collapse" }}>
<thead><tr>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("グループ名")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("連絡先")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("傘下会社")}</th>
<th style={Object.assign({}, th, { textAlign: "right" })}>{t("会社数")}</th>
<th style={Object.assign({}, th, { textAlign: "right" })}>{t("総施設数")}</th>
<th style={Object.assign({}, th, { textAlign: "right" })}>{t("総ロボット数")}</th>
<th style={Object.assign({}, th, { textAlign: "center" })}>{t("状態")}</th>
<th style={Object.assign({}, th, { textAlign: "center" })}>{t("操作")}</th>
</tr></thead>
<tbody>
{[
{ nm: "PPIH", ct: "ppih-admin@example.com", tel: "03-0000-1111", companies: ["株式会社ドン・キホーテ", "株式会社ユニー"], cnt: 2, fac: 11, rob: 13, st: "有効" },
].map(function (g, i) {
return (
<tr key={i} style={{ borderBottom: "1px solid " + c.bd + "22" }}>
<td style={Object.assign({}, td, { fontWeight: 600 })}>{g.nm}</td>
<td style={{ padding: "12px", fontSize: 11, fontFamily: "monospace", color: c.txD }}>{g.ct}</td>
<td style={{ padding: "12px" }}>
{g.companies.map(function (co, j) {
return <span key={j} style={{ display: "inline-block", fontSize: 11, padding: "2px 8px", borderRadius: 4, background: c.prD, color: c.pr, marginRight: 4, marginBottom: 2 }}>{co}</span>;
})}
</td>
<td style={{ padding: "12px", textAlign: "right" }}>{g.cnt}</td>
<td style={{ padding: "12px", textAlign: "right" }}>{g.fac}</td>
<td style={{ padding: "12px", textAlign: "right" }}>{g.rob}</td>
<td style={{ padding: "12px", textAlign: "center" }}><Pill text={t(g.st)} color={c.ok} /></td>
<td style={{ padding: "12px", textAlign: "center" }}>
<div style={{ display: "flex", gap: 6, justifyContent: "center" }}>
<button onClick={function () { setGrpEdit(g); }} style={{ fontSize: 11, color: c.pr, background: c.prD, border: "none", borderRadius: 4, padding: "4px 10px", cursor: "pointer" }}>{t("編集")}</button>
<button style={{ fontSize: 11, color: c.ng, background: "none", border: "1px solid " + c.ng + "44", borderRadius: 4, padding: "4px 10px", cursor: "pointer" }}>{t("削除")}</button>
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
</div>
)}
{/* 運用設定 */}
{sysTab === "ops" && (
<div>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, overflow: "hidden" }}>
<div style={{ padding: "16px 20px", borderBottom: "1px solid " + c.bd }}>
<div style={{ fontSize: 14, fontWeight: 600, color: c.tx }}>{t("運用設定")}</div>
<div style={{ fontSize: 12, color: c.txM, marginTop: 2 }}>{t("清掃監視の運用パラメータ。変更はDFAシステム管理者のみ")}</div>
</div>
{/* 事前チェック設定 */}
<div style={{ padding: "16px 20px", borderBottom: "1px solid " + c.bd }}>
<div style={{ fontSize: 13, fontWeight: 600, color: c.tx, marginBottom: 12 }}>{t("事前チェック設定")}</div>
<div style={{ fontSize: 12, color: c.txM, marginBottom: 12 }}>{t("清掃開始予定時刻の何分前にロボット状態をチェックするか")}</div>
<div style={{ display: "flex", gap: 24 }}>
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
<span style={{ fontSize: 13, color: c.tx }}>{t("第1回チェック")}</span>
<input type="number" defaultValue={60} min={10} max={120} style={{ width: 70, fontSize: 13, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx, textAlign: "right" }} />
<span style={{ fontSize: 12, color: c.txM }}>{t("分前")}</span>
</div>
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
<span style={{ fontSize: 13, color: c.tx }}>{t("第2回チェック")}</span>
<input type="number" defaultValue={30} min={5} max={60} style={{ width: 70, fontSize: 13, padding: "6px 10px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx, textAlign: "right" }} />
<span style={{ fontSize: 12, color: c.txM }}>{t("分前")}</span>
</div>
</div>
</div>
{/* 判定閾値設定 */}
<div style={{ padding: "16px 20px", borderBottom: "1px solid " + c.bd }}>
<div style={{ fontSize: 13, fontWeight: 600, color: c.tx, marginBottom: 12 }}>{t("完了率の判定閾値")}</div>
<div style={{ fontSize: 12, color: c.txM, marginBottom: 12 }}>{t("清掃詳細ログの◎○△×判定に使用する閾値")}</div>
<div style={{ display: "flex", gap: 16 }}>
{[
{ label: "◎", desc: "以上", def: 90, color: c.ok },
{ label: "○", desc: "以上", def: 70, color: c.ok },
{ label: "△", desc: "以上", def: 10, color: c.wn },
{ label: "×", desc: "未満", def: 10, color: c.ng },
].map(function (g, i) {
return (
<div key={i} style={{ display: "flex", alignItems: "center", gap: 6 }}>
<span style={{ display: "inline-block", width: 28, height: 28, lineHeight: "28px", textAlign: "center", borderRadius: 6, fontSize: 14, fontWeight: 700, background: g.color + "18", color: g.color, border: "1px solid " + g.color + "33" }}>{g.label}</span>
{i < 3 && <input type="number" defaultValue={g.def} min={0} max={100} style={{ width: 60, fontSize: 13, padding: "6px 8px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx, textAlign: "right" }} />}
{i < 3 && <span style={{ fontSize: 12, color: c.txM }}>%{t(g.desc)}</span>}
{i === 3 && <span style={{ fontSize: 12, color: c.txM }}>{t("上記未満")}</span>}
</div>
);
})}
</div>
</div>
{/* エスカレーション閾値 */}
<div style={{ padding: "16px 20px" }}>
<div style={{ fontSize: 13, fontWeight: 600, color: c.tx, marginBottom: 12 }}>{t("アドバイス エスカレーション閾値")}</div>
<div style={{ fontSize: 12, color: c.txM, marginBottom: 12 }}>{t("同一施設で問題が連続した場合のレベル引き上げ基準（スケジュール存在日の連続日数）")}</div>
<div style={{ display: "flex", gap: 24 }}>
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
<span style={{ fontSize: 12, padding: "2px 10px", borderRadius: 4, background: c.wn + "18", color: c.wn, fontWeight: 600 }}>Lv2</span>
<input type="number" defaultValue={2} min={2} max={7} style={{ width: 60, fontSize: 13, padding: "6px 8px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx, textAlign: "right" }} />
<span style={{ fontSize: 12, color: c.txM }}>{t("日以上連続")}</span>
</div>
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
<span style={{ fontSize: 12, padding: "2px 10px", borderRadius: 4, background: c.ng + "18", color: c.ng, fontWeight: 600 }}>Lv3</span>
<input type="number" defaultValue={3} min={2} max={14} style={{ width: 60, fontSize: 13, padding: "6px 8px", borderRadius: 6, border: "1px solid " + c.bd, background: c.sfH, color: c.tx, textAlign: "right" }} />
<span style={{ fontSize: 12, color: c.txM }}>{t("日以上連続")}</span>
</div>
</div>
</div>
</div>
</div>
)}
{/* 監査ログ */}
{sysTab === "auditlog" && (
<div>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 12, overflow: "hidden" }}>
<div style={{ padding: "16px 20px", borderBottom: "1px solid " + c.bd }}>
<div style={{ fontSize: 14, fontWeight: 600, color: c.tx }}>{t("操作ログ（監査ログ）")}</div>
<div style={{ fontSize: 12, color: c.txM, marginTop: 2 }}>{t("全ての手動操作を記録。誰が・いつ・何をしたかを追跡")}</div>
</div>
<table style={{ width: "100%", borderCollapse: "collapse" }}>
<thead><tr>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("日時")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("操作者")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("アクション")}</th>
<th style={Object.assign({}, th, { textAlign: "left" })}>{t("対象")}</th>
</tr></thead>
<tbody>
{[
{ t: "2026-03-27 09:15", u: "田中 太郎", a: "清掃開始（手動）", tg: "MEGAドンキ渋谷本店 / 1F売場" },
{ t: "2026-03-26 22:30", u: "田中 太郎", a: "スケジュール変更", tg: "ドンキ八王子駅前店 — 無効化" },
{ t: "2026-03-26 15:00", u: "佐藤 花子", a: "ロボット同期", tg: "8111R5628060011 v3.2に更新" },
{ t: "2026-03-25 11:00", u: "田中 太郎", a: "顧客モジュール変更", tg: "ドン・キホーテ — D-Security有効化" },
{ t: "2026-03-25 10:30", u: "田中 太郎", a: "施設追加", tg: "MEGAドンキ大森山王店" },
].map(function (l, i) {
return (
<tr key={i} style={{ borderBottom: "1px solid " + c.bd + "22" }}>
<td style={{ padding: "12px", fontSize: 12, fontFamily: "monospace", color: c.txM }}>{l.t}</td>
<td style={td}>{l.u}</td>
<td style={td}><Pill text={t(l.a)} color={l.a.indexOf("手動") >= 0 ? c.wn : c.pr} /></td>
<td style={{ padding: "12px", fontSize: 12, color: c.txD }}>{t(l.tg)}</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
)}
</div>
)}
</div>
{/* Customer Edit Modal */}
{custEdit && (
<Modal title={custEdit.nm ? (lang === "en" ? "Edit Customer — " : "顧客編集 — ") + custEdit.nm : t("顧客追加")} onClose={function () { setCustEdit(null); }} action={custEdit.nm ? t("保存") : t("登録")}>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
<div style={fieldSt}>
<label style={labelSt}>{t("グループ")}</label>
<select defaultValue={custEdit.grp || ""} style={selectSt}>
<option value="">{t("ー（グループなし）")}</option>
<option value="PPIH">PPIH</option>
</select>
</div>
<div style={fieldSt}>
<label style={labelSt}>{t("会社名 *")}</label>
<input defaultValue={custEdit.nm || ""} placeholder={t("例: 株式会社○○")} style={inputSt} />
</div>
<div style={fieldSt}>
<label style={labelSt}>{t("連絡先メール *")}</label>
<input defaultValue={custEdit.ct || ""} placeholder="admin@example.co.jp" style={inputSt} />
</div>
<div style={fieldSt}>
<label style={labelSt}>{t("契約プラン")}</label>
<select defaultValue={custEdit.plan || "Monitor Assist"} style={selectSt}>
<option value="Monitor Assist">Monitor Assist</option>
<option value="Insight Assist">Insight Assist</option>
<option value="D-Security">D-Security</option>
</select>
</div>
</div>
<div style={fieldSt}>
<label style={labelSt}>{t("契約モジュール")}</label>
<div style={{ display: "flex", gap: 24, padding: "10px 0" }}>
<label style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer" }}>
<input type="checkbox" defaultChecked={custEdit.mon !== false} />
<span style={{ fontSize: 13, padding: "4px 12px", borderRadius: 6, background: c.ok + "18", color: c.ok, border: "1px solid " + c.ok + "44" }}>{t("○ 監視（モニタリング）")}</span>
</label>
<label style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer" }}>
<input type="checkbox" defaultChecked={custEdit.dsec === true} />
<span style={{ fontSize: 13, padding: "4px 12px", borderRadius: 6, background: c.ac + "18", color: c.ac, border: "1px solid " + c.ac + "44" }}>○ D-Security</span>
</label>
</div>
</div>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
<div style={fieldSt}>
<label style={labelSt}>{t("電話番号")}</label>
<input defaultValue="" placeholder="03-1234-5678" style={inputSt} />
</div>
<div style={fieldSt}>
<label style={labelSt}>{t("状態")}</label>
<select defaultValue={custEdit.st || "有効"} style={selectSt}>
<option value="有効">{t("有効")}</option>
<option value="停止">{t("停止")}</option>
</select>
</div>
</div>
</Modal>
)}
{/* User Edit Modal */}
{userEdit && (
<Modal title={userEdit.ll ? (lang === "en" ? "Edit User — " : "ユーザー編集 — ") + userEdit.nm : t("ユーザー新規登録")} onClose={function () { setUserEdit(null); }} action={userEdit.ll ? t("保存") : t("登録")}>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
<div style={fieldSt}>
<label style={labelSt}>{t("名前 *")}</label>
<input defaultValue={userEdit.nm || ""} placeholder={t("姓 名")} style={inputSt} />
</div>
<div style={fieldSt}>
<label style={labelSt}>{t("メールアドレス *")}</label>
<input defaultValue={userEdit.em || ""} placeholder="user@example.co.jp" style={inputSt} />
</div>
</div>
<div style={fieldSt}>
<label style={labelSt}>{t("ロール *")}</label>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, padding: "6px 0" }}>
{["DFAシステム管理者", "DFA運用担当", "顧客管理者", "施設運用者"].map(function (rl) {
var active = (userEdit.rl || "") === rl;
var col = rl.indexOf("システム管理") >= 0 ? c.pr : rl.indexOf("運用担当") >= 0 ? c.ac : rl.indexOf("顧客") >= 0 ? c.wn : c.txD;
return (
<div key={rl} style={{ padding: "8px 12px", borderRadius: 6, border: "1px solid " + (active ? col : c.bd), background: active ? col + "18" : "transparent", cursor: "pointer", fontSize: 13, color: active ? col : c.txD }}>
{active ? "● " : "○ "}{rl}
</div>
);
})}
</div>
</div>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
<div style={fieldSt}>
<label style={labelSt}>{t("会社 / グループ *")}</label>
<select defaultValue={userEdit.co || ""} style={selectSt}>
<option value="DFA Robotics">DFA Robotics</option>
<option value="PPIH">{t("PPIH（グループ）")}</option>
<option value="ドン・キホーテ">{t("株式会社ドン・キホーテ")}</option>
<option value="ユニー">{t("株式会社ユニー")}</option>
<option value="セブン-イレブン">{t("株式会社セブン-イレブン")}</option>
<option value="ローソン">{t("株式会社ローソン")}</option>
</select>
</div>
<div style={fieldSt}>
<label style={labelSt}>{t("施設（施設運用者のみ）")}</label>
<select defaultValue={userEdit.fac || "ー"} style={selectSt}>
<option value="ー">{t("ー（会社/グループ全体）")}</option>
<option value="MEGAドンキ渋谷本店">{t("MEGAドンキ渋谷本店")}</option>
<option value="ドンキ新宿歌舞伎町店">{t("ドンキ新宿歌舞伎町店")}</option>
<option value="MEGAドンキ池袋駅北口店">{t("MEGAドンキ池袋駅北口店")}</option>
</select>
</div>
</div>
{userEdit.ll && (
<div style={{ marginTop: 8, padding: "12px 16px", borderRadius: 8, background: c.sfH, border: "1px solid " + c.bd }}>
<div style={{ fontSize: 12, color: c.txM }}>{t("最終ログイン: ")}{userEdit.ll}</div>
</div>
)}
</Modal>
)}
{/* Group Edit Modal */}
{grpEdit && (
<Modal title={grpEdit.ct ? (lang === "en" ? "Edit Group — " : "グループ編集 — ") + grpEdit.nm : t("グループ追加")} onClose={function () { setGrpEdit(null); }} action={grpEdit.ct ? t("保存") : t("登録")}>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
<div style={fieldSt}>
<label style={labelSt}>{t("グループ名 *")}</label>
<input defaultValue={grpEdit.nm || ""} placeholder={t("例: PPIH")} style={inputSt} />
</div>
<div style={fieldSt}>
<label style={labelSt}>{t("連絡先メール")}</label>
<input defaultValue={grpEdit.ct || ""} placeholder="admin@example.co.jp" style={inputSt} />
</div>
<div style={fieldSt}>
<label style={labelSt}>{t("電話番号")}</label>
<input defaultValue={grpEdit.tel || ""} placeholder="03-1234-5678" style={inputSt} />
</div>
<div style={fieldSt}>
<label style={labelSt}>{t("状態")}</label>
<select defaultValue={grpEdit.st || "有効"} style={selectSt}>
<option value="有効">{t("有効")}</option>
<option value="停止">{t("停止")}</option>
</select>
</div>
</div>
<div style={fieldSt}>
<label style={labelSt}>{t("傘下会社の選択")}</label>
<div style={{ border: "1px solid " + c.bd, borderRadius: 8, overflow: "hidden" }}>
{["株式会社ドン・キホーテ", "株式会社ユニー", "株式会社セブン-イレブン", "株式会社ローソン"].map(function (co, j) {
var checked = grpEdit.companies && grpEdit.companies.indexOf(co) >= 0;
return (
<label key={co} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", cursor: "pointer", borderBottom: j < 3 ? "1px solid " + c.bd + "44" : "none", background: checked ? c.pr + "08" : "transparent" }}>
<input type="checkbox" defaultChecked={checked} />
<span style={{ fontSize: 13, color: c.tx, fontWeight: checked ? 600 : 400, flex: 1 }}>{co}</span>
{checked && <Pill text="所属中" color={c.pr} />}
</label>
);
})}
</div>
<div style={{ fontSize: 11, color: c.txM, marginTop: 6 }}>{t("チェックした会社がこのグループの傘下として紐づきます。グループ管理者は傘下全社のデータを横断閲覧可能になります。")}</div>
</div>
{grpEdit.cnt && (
<div style={{ marginTop: 4, padding: "14px 16px", borderRadius: 8, background: c.sfH, border: "1px solid " + c.bd }}>
<div style={{ fontSize: 12, fontWeight: 600, color: c.tx, marginBottom: 8 }}>{t("グループサマリー")}</div>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
<div style={{ textAlign: "center" }}>
<div style={{ fontSize: 20, fontWeight: 700, color: c.pr }}>{grpEdit.cnt}</div>
<div style={{ fontSize: 11, color: c.txM }}>{t("傘下会社")}</div>
</div>
<div style={{ textAlign: "center" }}>
<div style={{ fontSize: 20, fontWeight: 700, color: c.ok }}>{grpEdit.fac}</div>
<div style={{ fontSize: 11, color: c.txM }}>{t("総施設数")}</div>
</div>
<div style={{ textAlign: "center" }}>
<div style={{ fontSize: 20, fontWeight: 700, color: c.ac }}>{grpEdit.rob}</div>
<div style={{ fontSize: 11, color: c.txM }}>{t("総ロボット数")}</div>
</div>
</div>
</div>
)}
</Modal>
)}
{/* Area Detail Modal */}
{areaModal && (
<div style={{ position: "fixed", top: 0, left: 0, right: 0, bottom: 0, background: "rgba(0,0,0,0.5)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1000 }}>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 16, width: 600, maxHeight: "80vh", display: "flex", flexDirection: "column" }}>
<div style={{ padding: "20px 24px", borderBottom: "1px solid " + c.bd }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
<div>
<div style={{ fontSize: 16, fontWeight: 700, color: c.tx }}>{t("エリア別清掃完了率")}</div>
<div style={{ fontSize: 13, color: c.txD, marginTop: 4 }}>{areaModal.facility} | {areaModal.date} | {lang === "en" ? "Overall" : "全体"} {areaModal.cp}% {areaModal.g}</div>
</div>
<button onClick={function () { setAreaModal(null); }} style={{ fontSize: 18, color: c.txM, background: "none", border: "none", cursor: "pointer", padding: "4px 8px" }}>✕</button>
</div>
<div style={{ display: "flex", gap: 6, marginTop: 12 }}>
{["problem", "all"].map(function (f) {
var active = areaFilt === f;
var label = f === "problem" ? t("問題エリアのみ") : t("全件");
return <button key={f} onClick={function () { setAreaFilt(f); }} style={{ fontSize: 12, padding: "4px 12px", borderRadius: 6, border: "1px solid " + (active ? c.pr : c.bd), background: active ? c.prD : "transparent", color: active ? c.pr : c.txD, cursor: "pointer", fontWeight: active ? 600 : 400 }}>{label}</button>;
})}
</div>
</div>
<div style={{ overflowY: "auto", flex: 1, padding: "8px 0" }}>
{(function () {
var areas = getAreaData(areaModal.facility).map(function (a) { return Object.assign({}, a, { g: areaGrade(a.cp) }); });
areas.sort(function (a, b) { return a.cp - b.cp; });
var filtered = areaFilt === "problem" ? areas.filter(function (a) { return a.g === "△" || a.g === "×"; }) : areas;
var problemCount = areas.filter(function (a) { return a.g === "△" || a.g === "×"; }).length;
return (
<div>
<div style={{ padding: "4px 24px 8px", fontSize: 12, color: c.txM }}>
{areaFilt === "problem" ? (lang === "en" ? ("Problem areas (" + problemCount + " / " + areas.length + ")") : ("問題エリア（" + problemCount + " / " + areas.length + "エリア）")) : (lang === "en" ? ("All " + areas.length + " areas (by completion)") : ("全" + areas.length + "エリア（完了率昇順）"))}
</div>
{filtered.length === 0 && (
<div style={{ padding: "24px", textAlign: "center", color: c.txM, fontSize: 13 }}>{t("問題エリアはありません（全エリア◎○）")}</div>
)}
{filtered.map(function (a, i) {
var gs = gradeStyle(c, a.g);
var barColor = a.g === "◎" || a.g === "○" ? c.ok : a.g === "△" ? c.wn : c.ng;
return (
<div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "8px 24px", borderBottom: "1px solid " + c.bd + "11" }}>
<div style={{ width: 120, fontSize: 13, fontWeight: a.g === "△" || a.g === "×" ? 600 : 400, color: a.g === "△" || a.g === "×" ? c.tx : c.txD, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{a.name}</div>
<div style={{ flex: 1, height: 8, background: c.bd + "44", borderRadius: 4, overflow: "hidden" }}>
<div style={{ width: a.cp + "%", height: "100%", background: barColor, borderRadius: 4 }} />
</div>
<div style={{ width: 40, textAlign: "right", fontSize: 13, fontWeight: 600, color: barColor }}>{a.cp}%</div>
<span style={{ display: "inline-block", width: 24, height: 24, lineHeight: "24px", textAlign: "center", borderRadius: 4, fontSize: 12, fontWeight: 700, background: gs.bg, color: gs.tx, border: "1px solid " + gs.tx + "33" }}>{a.g}</span>
</div>
);
})}
</div>
);
})()}
</div>
<div style={{ padding: "12px 24px", borderTop: "1px solid " + c.bd, display: "flex", justifyContent: "flex-end" }}>
<button onClick={function () { setAreaModal(null); }} style={{ fontSize: 13, padding: "8px 20px", borderRadius: 6, border: "1px solid " + c.bd, background: "transparent", color: c.txD, cursor: "pointer" }}>{t("閉じる")}</button>
</div>
</div>
</div>
)}
{/* Inspection Detail Modal */}
{inspDetail && (
<div style={{ position: "fixed", top: 0, left: 0, right: 0, bottom: 0, background: "rgba(0,0,0,0.5)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1000 }}>
<div style={{ background: c.sf, border: "1px solid " + c.bd, borderRadius: 16, width: 640, maxHeight: "85vh", display: "flex", flexDirection: "column" }}>
<div style={{ padding: "20px 24px", borderBottom: "1px solid " + c.bd, display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
<div>
<div style={{ fontSize: 16, fontWeight: 700, color: c.tx }}>{t("点検記録 詳細")}</div>
<div style={{ fontSize: 13, color: c.txD, marginTop: 4 }}>{inspDetail.facility} | {inspDetail.date}</div>
</div>
<button onClick={function () { setInspDetail(null); }} style={{ fontSize: 18, color: c.txM, background: "none", border: "none", cursor: "pointer", padding: "4px 8px" }}>✕</button>
</div>
<div style={{ overflowY: "auto", flex: 1, padding: "20px 24px" }}>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 20 }}>
<div style={{ fontSize: 12 }}><span style={{ color: c.txM }}>{t("記入者:")}</span> <span style={{ color: c.tx, fontWeight: 600 }}>{inspDetail.inspector}</span></div>
<div style={{ fontSize: 12 }}><span style={{ color: c.txM }}>{t("所属会社:")}</span> <span style={{ color: c.tx }}>{inspDetail.company}</span></div>
<div style={{ fontSize: 12 }}><span style={{ color: c.txM }}>{t("ブランド:")}</span> <span style={{ color: c.tx }}>{inspDetail.brand}</span></div>
<div style={{ fontSize: 12 }}><span style={{ color: c.txM }}>{t("シリアル:")}</span> <span style={{ fontFamily: "monospace", color: c.tx }}>{inspDetail.robot}</span></div>
</div>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
{["Before（点検前）", "After（点検後）"].map(function (phase, pi) {
return (
<div key={pi}>
<div style={{ fontSize: 13, fontWeight: 600, color: pi === 0 ? c.wn : c.ok, marginBottom: 10, padding: "4px 10px", background: (pi === 0 ? c.wn : c.ok) + "12", borderRadius: 6, display: "inline-block" }}>{phase}</div>
{INSP_ITEMS.map(function (item, j) {
return (
<div key={j} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "8px 12px", borderBottom: "1px solid " + c.bd + "22" }}>
<span style={{ fontSize: 12, color: c.tx }}>{item}</span>
<span style={{ fontSize: 11, color: c.pr, background: c.prD, padding: "2px 8px", borderRadius: 4, cursor: "pointer" }}>{t("📷 写真")}</span>
</div>
);
})}
</div>
);
})}
</div>
{inspDetail.notes && (
<div style={{ marginTop: 16 }}>
<div style={{ fontSize: 13, fontWeight: 600, color: c.tx, marginBottom: 6 }}>{t("申し送り事項")}</div>
<div style={{ fontSize: 13, color: c.txD, padding: "12px 16px", background: c.sfH, borderRadius: 8, border: "1px solid " + c.bd, lineHeight: 1.6 }}>{t(inspDetail.notes)}</div>
</div>
)}
</div>
<div style={{ padding: "12px 24px", borderTop: "1px solid " + c.bd, display: "flex", justifyContent: "flex-end" }}>
<button onClick={function () { setInspDetail(null); }} style={{ fontSize: 13, padding: "8px 20px", borderRadius: 6, border: "1px solid " + c.bd, background: "transparent", color: c.txD, cursor: "pointer" }}>{t("閉じる")}</button>
</div>
</div>
</div>
)}
{/* Inspection New Modal */}
{inspNew && (
<Modal title={t("点検記録 新規登録")} onClose={function () { setInspNew(false); }} action="登録">
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
<div style={fieldSt}>
<label style={labelSt}>{t("訪問日 *")}</label>
<input type="date" defaultValue="2026-03-27" style={inputSt} />
</div>
<div style={fieldSt}>
<label style={labelSt}>{t("店舗 *")}</label>
<select style={selectSt}>
<option value="">{t("選択してください")}</option>
<option>{t("MEGAUNY西大和店")}</option><option>{t("アピタ大和郡山店")}</option><option>{t("アピタ伊賀上野店")}</option><option>{t("MEGAUNY名張店")}</option>
</select>
</div>
<div style={fieldSt}>
<label style={labelSt}>{t("記入者氏名 *")}</label>
<input defaultValue="" placeholder={t("姓 名")} style={inputSt} />
</div>
<div style={fieldSt}>
<label style={labelSt}>{t("所属会社 *")}</label>
<input defaultValue="DFA Robotics" style={inputSt} />
</div>
<div style={fieldSt}>
<label style={labelSt}>{t("ロボット *")}</label>
<select style={selectSt}>
<option value="">{t("店舗を選択すると表示")}</option>
</select>
</div>
</div>
<div style={{ marginTop: 8 }}>
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
{["Before（点検前）", "After（点検後）"].map(function (phase, pi) {
return (
<div key={pi}>
<div style={{ fontSize: 13, fontWeight: 600, color: pi === 0 ? c.wn : c.ok, marginBottom: 10 }}>{phase}</div>
{INSP_ITEMS.map(function (item, j) {
return (
<div key={j} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "6px 0", borderBottom: "1px solid " + c.bd + "22" }}>
<span style={{ fontSize: 12, color: c.tx }}>{item}</span>
<label style={{ fontSize: 11, color: c.pr, background: c.prD, padding: "4px 10px", borderRadius: 4, cursor: "pointer" }}>{t("📷 アップロード")}</label>
</div>
);
})}
</div>
);
})}
</div>
</div>
<div style={Object.assign({}, fieldSt, { marginTop: 12 })}>
<label style={labelSt}>{t("申し送り事項")}</label>
<textarea placeholder={t("申し送り事項があればこちらに記載ください")} style={Object.assign({}, inputSt, { height: 80, resize: "vertical" })} />
</div>
</Modal>
)}
</div>
);
}
