// ActivityDevice — 活動履歴と端末画面(K18-29・K18-30)。TODO 詳細と案件詳細(関係者タブ)で共用する部品は、ここ 1 か所に置く。 // ================================================================== // 形(池田さん版 reference/ikeda-2026-09-16/screens/marurou/Screens.jsx の ScActivity / ScDevice を実データに合わせたもの): // 上に相手のピル(すべて + 対象者)、左に「やり取り一覧」、右に「端末画面」(その相手とのやり取りをチャネル別に見る)。 // 一覧の行を押すと、右がその相手・そのチャネルの端末画面に切り替わり、その記録に印が付く。 // // 読むもの: entries は commRowToLog(Screens.jsx)の形。raw がある行 = communications の実データ(0027)。 // raw の無い行(記録した直後の楽観表示・関係者ログの文字だけの行)は一覧にだけ出す(端末画面には作らない)。 // // main の旧 ScActivity(Screens.jsx)から変えたこと: // ・右は 1 件の「生画面」ではなく、相手ごとの端末画面(チャネルのタブ・メールの一覧・通話の記録)。 // ・電話は 結果・要約・通話メモ を出す。録音の再生は出さない(決-33(B) の Zoom 通話ログの取込が未接続 ─ 無い録音を匂わせない)。 // ・チャネルのタブは相手の役割で絞る(決-37: LINE は居住者だけ)。ただし、既にある記録のチャネルは見られるよう常に出す。 // ・工程の自動完了の行(「○○ を完了」)は履歴に入れない(TODO 詳細の history 側で外した ─ 連絡ではないため)。 // ・記録を相手に結ぶのは名前だけでなく ID でも(記録の相手の担当者/会社 = 対象者の contactDbId/orgDbId)。 // // K18-30 で足したこと: // ・LINE・SMS・Slack は吹き出しのスレッド(1 件の記録 = 1 つの吹き出し。本文を割ったり返事を補ったりしない)。 // ・下に入力欄。**記録のみ**(相手へは送らない。送るかは大島さんの判断待ち・docs/21 §3)。記録は呼び出し側の onRecord が // 関係者のログ(parties[].log)に積み、書き込み翻訳(mstore-diff.js parseLogEntry)が contact.log にする。 // 件名・通話の結果・記録した時刻・向き(こちらから/相手から)も一緒に送る。サーバに届いたのを見届けてから onReload で読み直す。 // ・Slack・LINE の確認の関門(ContactModal と同じ)は外さない: 0064/0072 のトリガが channel=Slack/LINE・direction=発信 の行を // 実際に投稿しうるので、こちらからの Slack は「Slack にも送る」、実送信が有効な LINE は「LINE で送る」を押すまで記録できない。 // ・決-37 で使わないチャネル・対象者に居ない相手には入力欄を出さず、理由を 1 行出す。 // // integ-round1 の取り込みで足したこと(K18-37・0119): // ・入力欄に「報告先への報告」(canReport のときだけ・発信だけ・既定オフ)。記録の isReport になり、呼び出し側の // persistContact / logContact が連絡モーダルの opts.isReport と同じに運ぶ(TODO 詳細の連絡ボタンは端末画面に寄せて外した)。 // ・各記録に 報告/入金催促/関連 の印(commRowToLog の raw.report / dunning / rel ─ 旧 ScRawView の見出しと同じ)。 // // SF の活動記録の読み方(表示だけ・DB の値は変えない): // SF の Task(Call)は件名にチャネルの印を書く運用だった。取込(t10)は Call を一律 channel=電話 にしているので、 // 件名が「Line」「SMS」「Slack」「メール」の行はそのチャネルのタブへ、「TEL通電」「TEL不在」は電話の結果として読む // (dev の写しで 電話 17,495 件のうち メール 6,997・TEL通電 3,867・Line 3,841・TEL不在 1,677・SMS 734・Slack 373)。 // 印そのものは件名ではないので、件名・要約としては出さない。 /* 端末画面のタブの並び(池田さん版と同じ順)。「その他」は HP問合せ・来訪・社内メモなど、上のどれでもない記録。 */ const DEV_ORDER = ["LINE", "SMS", "Slack", "メール", "電話", "その他"]; const DEV_KNOWN = { "LINE": 1, "SMS": 1, "Slack": 1, "メール": 1, "電話": 1 }; /* 吹き出し(スレッド)で見せるチャネル(K18-30)。 */ const DEV_CHAT = { "LINE": 1, "SMS": 1, "Slack": 1 }; /* SF の Call の件名 → [チャネル, 通話の結果]。完全一致だけを読む(本文や件名の一部から推し量らない)。 */ const DEV_SF_MARKS = [ [/^line$/i, "LINE", null], [/^sms$/i, "SMS", null], [/^slack$/i, "Slack", null], [/^(メール|mail|e-?mail)$/i, "メール", null], [/^tel\s*通電$/i, "電話", "通電"], [/^tel\s*不在$/i, "電話", "不在"], ]; /* 決-37(9/9): LINE は居住者との連絡専用。依頼元・関係先はメール/電話/Slack、オーナーはメール。 仮置き(docs/21 §3 の確認待ち): 電話は誰にでも使う。居住者は最初の連絡に SMS も使う(LINE 登録の案内・決-37)。 */ const DEV_ALLOWED = { resident: ["LINE", "SMS", "メール", "電話"], owner: ["メール", "電話"], other: ["Slack", "メール", "電話"], }; const DEV_RESIDENT_WORDS = ["居住者", "入居者"]; const devText = v => (v == null ? "" : String(v)).trim(); /** SF の Call の件名がチャネルの印なら { ch, result, mark }。電話の行でなければ・印でなければ null。 */ function devSfMark(raw) { if (!raw || raw.ch !== "電話") return null; const s = devText(raw.subject); if (!s) return null; for (const [re, ch, result] of DEV_SF_MARKS) if (re.test(s)) return { ch, result, mark: s }; return null; } /** 記録(raw)が端末画面のどのタブに入るか。 */ function devChannelOf(raw) { if (!raw) return "その他"; const m = devSfMark(raw); if (m) return m.ch; return DEV_KNOWN[raw.ch] ? raw.ch : "その他"; } /** 件名(要約)。SF の印は件名ではないので空にする。 */ function devSubjectOf(raw) { if (!raw || devSfMark(raw)) return ""; return devText(raw.subject); } /** 一覧の 1 行の見出し: 件名 → 本文の最初の行。raw の無い行は画面が積んだ文言(t)のまま。 */ function devTitleOf(entry) { const raw = entry && entry.raw; if (!raw) return devText(entry && entry.t); const first = String(raw.body || "").split("\n").map(x => x.trim()).find(Boolean) || ""; return devSubjectOf(raw) || first || "(内容なし)"; } /** 通話の結果: 列(call_result)→ SF の印(TEL通電/TEL不在)。 */ function devCallResultOf(raw) { const m = devSfMark(raw); return devText(raw && raw.callResult) || (m && m.result) || ""; } function devDuration(sec) { if (sec == null || sec === "" || !Number.isFinite(Number(sec))) return ""; const s = Math.max(0, Math.round(Number(sec))); return Math.floor(s / 60) + "分" + (s % 60) + "秒"; } /** 相手の種別(決-37 の絞り込み用)。役割と名前の語を「・」などで割り、完全一致で見る * (TODO 詳細の対象者はボールの区分名「居住者」が名前になることがある ─ Screens.jsx scTargets)。 */ function devRoleKind(target) { if (!target) return "other"; const words = [target.role, target.name].map(devText).filter(Boolean).join("・") .split(/[・／/、,\s]+/).filter(Boolean); if (words.some(w => DEV_RESIDENT_WORDS.indexOf(w) >= 0)) return "resident"; if (words.some(w => w === "オーナー")) return "owner"; return "other"; } /** その相手に、端末画面から記録してよいチャネルか(決-37)。 */ function devCanRecord(target, ch) { if (!target) return false; return (DEV_ALLOWED[devRoleKind(target)] || DEV_ALLOWED.other).indexOf(ch) >= 0; } /** 端末画面に出すタブ: 役割で使えるチャネル + 既に記録があるチャネル(見るだけ)。並びは DEV_ORDER。 */ function devTabsFor(target, rows) { const allowed = DEV_ALLOWED[devRoleKind(target)] || DEV_ALLOWED.other; const present = {}; (rows || []).forEach(e => { if (e && e.raw) present[devChannelOf(e.raw)] = true; }); return DEV_ORDER.filter(ch => allowed.indexOf(ch) >= 0 || present[ch]); } /** 新しい順(occurredAt。無ければ元の並び=新しい順のまま)。 */ function devNewestFirst(rows) { const list = (rows || []).map((e, i) => ({ e, i })); list.sort((a, b) => { const x = (a.e.raw && a.e.raw.at) || "", y = (b.e.raw && b.e.raw.at) || ""; if (x && y && x !== y) return x < y ? 1 : -1; return a.i - b.i; }); return list.map(x => x.e); } const devDirLabel = (dir, call) => dir === "in" ? (call ? "受電" : "受信") : dir === "out" ? (call ? "発信" : "送信") : "社内メモ"; /* ---- 表示の小物(Screens.jsx に依存しない ─ 先に読むため) ---- */ const DEV_TONES = { brand: ["var(--brand)", "var(--brand-muted)", "var(--brand-border)"], neutral: ["var(--muted-foreground)", "var(--muted)", "var(--border)"], warn: ["var(--warning)", "var(--warning-muted)", "var(--warning-border)"], }; function DevChip({ tone = "neutral", children, title }) { const T = DEV_TONES[tone] || DEV_TONES.neutral; return {children}; } function DevField({ label, children }) { return (
{label} {children}
); } function DevEmpty({ children }) { return
{children}
; } function DevSfNote({ mark }) { return
SF の活動記録(件名「{mark}」)から
; } /* K18-37(0119): 報告先への報告・入金催促・何のための連絡か(commRowToLog の raw.report / dunning / rel)。 旧 ScRawView の見出しに出していた印を、端末画面の各記録にも出す。 */ function DevMarks({ r }) { if (!r || !(r.report || r.dunning || r.rel)) return null; return ( {r.report && 報告} {r.dunning && 入金催促} {r.rel && 関連: {r.rel}} ); } /* 1 件の記録の外枠。選ばれた記録(一覧で押した行)には印を付ける。 */ function DevRow({ e, i, selId, children }) { const sel = !!selId && e.id === selId; return (
{children}
); } function DevMeta({ children }) { return
{children}
; } const devWhen = e => (e.d || "") + (e.time ? " " + e.time : ""); const devBy = r => (r && r.by && r.by !== "—") ? r.by : ""; /** メール: 新しい順。送信/受信・日時・宛先(差出人)・担当・件名・本文。 */ function DevMailView({ rows, selId }) { const list = devNewestFirst(rows); if (!list.length) return メールのやり取りはありません。; return list.map((e, i) => { const r = e.raw, mark = devSfMark(r); return ( {devDirLabel(e.dir)} {devWhen(e)} {e.dir !== "memo" && {e.dir === "in" ? "差出人" : "宛先"} {e.who}} {devBy(r) && 担当 {devBy(r)}} {devSubjectOf(r) || (件名なし)} {r.body || "(本文なし)"} {mark && } ); }); } /** 電話: 新しい順。発信/受電・日時・番号・通話時間・結果・担当、要約(件名)・通話メモ(本文)。録音は出さない。 */ function DevCallView({ rows, selId }) { const list = devNewestFirst(rows); if (!list.length) return 通話の記録はありません。; return list.map((e, i) => { const r = e.raw, dur = devDuration(r.durationSec), result = devCallResultOf(r), sum = devSubjectOf(r); return ( {devDirLabel(e.dir, true)} {devWhen(e)} {r.counterpartyPhone && {r.counterpartyPhone}} {dur && 通話時間 {dur}} {result && {result}} {devBy(r) && 担当 {devBy(r)}} {sum && {sum}} {r.body || "—"} ); }); } /** その他(HP問合せ・来訪・社内メモなど): 新しい順の記録の並び。 */ function DevRecordView({ rows, selId, ch }) { const list = devNewestFirst(rows); if (!list.length) return {ch}のやり取りはありません。; return list.map((e, i) => { const r = e.raw, sub = devSubjectOf(r), mark = devSfMark(r); return ( {devDirLabel(e.dir)} {ch === "その他" && r.ch && {r.ch}} {devWhen(e)} {devBy(r) && 担当 {devBy(r)}} {sub &&
{sub}
}
{r.body || "(本文なし)"}
{mark && } ); }); } /** LINE・SMS・Slack(K18-30): 吹き出しのスレッド。古い順(下が新しい)。 * **1 件の記録 = 1 つの吹き出し**。本文を割って会話に見せたり、相手の返事を補ったりしない(実データに無い吹き出しは作らない)。 * こちらから(発信)は右、相手から(受信)は左、社内メモは中央。 */ function DevChatView({ rows, selId, ch }) { const list = devNewestFirst(rows).slice().reverse(); if (!list.length) return {ch}のやり取りはありません。; const marks = [...new Set(list.map(e => { const m = devSfMark(e.raw); return m ? m.mark : null; }).filter(Boolean))]; return (
{marks.length > 0 && (
SF の活動記録(件名「{marks.join("」「")}」)から読んだ記録を含みます(本文は記録された文面のまま)
)} {list.map((e, i) => { const r = e.raw, out = e.dir === "out", memo = e.dir !== "out" && e.dir !== "in"; const sel = !!selId && e.id === selId, sub = devSubjectOf(r); const name = memo ? "社内メモ" : out ? "マルロウ" + (devBy(r) ? " " + devBy(r) : "") : e.who; return (
{name}
{sub &&
{sub}
} {r.body || "(本文なし)"}
{devWhen(e)}
); })}
); } /* ---- 入力欄(K18-30)。**記録のみ** ─ 相手へは送らない(送るかは大島さんの判断待ち・docs/21 §3)。 ---- */ const DEV_CALL_RESULTS = ["応答", "不在", "折返し希望"]; /** 書き込みの控え(送信待ちの数え)。Screens.jsx の scWriteSnap と同じ見方(先に読むのでここに持つ)。 */ function devWriteSnap() { const w = typeof window !== "undefined" ? window.MarurouWrite : null; if (!w || typeof w.status !== "function") return null; const s = w.status() || {}; return { failed:(s.failed || []).length, unsupported:(s.unsupported || []).length, conflicts:Number(s.conflicts) || 0, blocked:Number(s.blocked) || 0 }; } /** 記録がサーバに届いたかを、控え(before)からの変化で読む(Screens.jsx scAwaitWrite と同じ読み方)。 */ async function devAwaitWrite(before, { timeout = 20000 } = {}) { const w = typeof window !== "undefined" ? window.MarurouWrite : null; if (!w || !before) return { ok:true, local:!w }; const idle = typeof w.idle === "function" ? Promise.resolve(w.idle()) : Promise.resolve(); const timedOut = await Promise.race([idle.then(() => false), new Promise(r => setTimeout(() => r(true), timeout))]); const s = (typeof w.status === "function" && w.status()) || {}; const after = devWriteSnap() || before; const last = a => (Array.isArray(a) && a.length) ? a[a.length - 1] : null; if (after.unsupported > before.unsupported) { const u = last(s.unsupported); return { ok:false, reason:(u && u.reason) || "この記録はまだサーバに保存できません。" }; } if (after.failed > before.failed) { const f = last(s.failed); return { ok:false, reason:"サーバに拒否されました" + (f && f.message ? "（" + f.message + "）" : "") + "。記録は残っていません。" }; } if (after.conflicts > before.conflicts) return { ok:false, reason:"他の人が先に更新していたため、案件を読み直しました。記録が残ったか確かめてから、必要ならもう一度記録してください。" }; if (after.blocked > 0) return { ok:false, reason:"認証の期限が切れています。ログインし直すと、この記録は自動で送られます。" }; if (timedOut || (Number(s.pending) || 0) > 0) return { ok:false, reason:"保存がまだ終わっていません（送信待ち）。届けば一覧に出ます。" }; return { ok:true }; } /** Slack・LINE の確認の関門が要るか(ContactModal と同じ条件)。0064/0072 のトリガは channel=Slack/LINE・direction=発信 の行を * 実際に投稿しうる ─ 相手からの記録(受信)は対象外。LINE は実送信が有効(line_enabled)なときだけ。 */ function devGateNeeded(ch, dir, lineEnabled) { if (dir !== "out") return false; return ch === "Slack" || (ch === "LINE" && !!lineEnabled); } /** 一覧の見出し(Screens.jsx scCommLabel と同じ式)。記録した直後の楽観表示と、読み直した行を突き合わせる鍵にもなる。 */ function devRecordLabel(ch, subject, body) { return (ch || "連絡") + "：" + (subject || String(body || "").split("\n")[0] || "(内容なし)"); } /** 入力から記録の形を作る(記録のみ・送らない)。電話は 要約=件名・通話メモ=本文(メモが空なら要約を本文に)。 */ function devBuildRecord({ who, ch, dir, text, subject, callResult, isReport, now }) { const isCall = ch === "電話", isMail = ch === "メール"; const memo = devText(text), sub = (isCall || isMail) ? devText(subject) : ""; const body = isCall ? (memo || sub) : memo; if (!who || !ch || !body) return null; const rec = { who, ch, dir: dir === "in" ? "in" : "out", text: body, at: (now || new Date()).toISOString() }; if (sub) rec.subject = sub; if (isCall && callResult) rec.callResult = String(callResult); /* K18-37(0119): 報告先への報告は発信だけ(受信・社内メモで報告日が進むと、報告漏れの滞りが消える)。 */ if (isReport && rec.dir === "out") rec.isReport = true; rec.label = devRecordLabel(ch, rec.subject, body); return rec; } function DevComposer({ who, target, ch, onRecord, onReload, canReport }) { const isCall = ch === "電話", isMail = ch === "メール"; const [dir, setDir] = React.useState("out"); const [text, setText] = React.useState(""); const [subject, setSubject] = React.useState(""); const [result, setResult] = React.useState(""); const [confirm, setConfirm] = React.useState(false); /* K18-37(0119): 報告先への報告(既定オフ・発信だけ)。ContactModal の同じチェックと同じ意味。 */ const [report, setReport] = React.useState(false); const [lineStatus, setLineStatus] = React.useState(null); const [pending, setPending] = React.useState(false); const [err, setErr] = React.useState(""); const [done, setDone] = React.useState(""); React.useEffect(() => { setDir("out"); setText(""); setSubject(""); setResult(""); setConfirm(false); setReport(false); setErr(""); setDone(""); }, [who, ch]); React.useEffect(() => { if (ch !== "LINE" || lineStatus) return undefined; let alive = true; const cloud = typeof window !== "undefined" ? window.MarurouCloud : null; const run = cloud && typeof cloud.lineStatus === "function" ? cloud.lineStatus() : Promise.resolve(null); Promise.resolve(run).then(r => { if (alive) setLineStatus(r || { lineEnabled:false }); }) .catch(() => { if (alive) setLineStatus({ lineEnabled:false }); }); return () => { alive = false; }; }, [ch, lineStatus]); const lineEnabled = !!(lineStatus && lineStatus.lineEnabled); const gate = devGateNeeded(ch, dir, lineEnabled); const isReport = !!canReport && report && dir === "out"; const rec = devBuildRecord({ who, ch, dir, text, subject, callResult: isCall ? result : null, isReport }); const blocked = !rec || pending || (gate && !confirm); const submit = async () => { if (blocked) return; setPending(true); setErr(""); setDone(""); try { const before = devWriteSnap(); await Promise.resolve(onRecord(devBuildRecord({ who, ch, dir, text, subject, callResult: isCall ? result : null, isReport }))); const res = await devAwaitWrite(before); if (!res.ok) throw new Error(res.reason); setText(""); setSubject(""); setResult(""); setConfirm(false); setReport(false); setDone(res.local ? "画面にだけ記録しました（保存の経路がありません）。" : gate ? "記録しました。有効化されていれば " + ch + " にも届きます。" : "記録しました（記録のみ・相手には送っていません）。"); if (typeof onReload === "function") onReload(); } catch (e) { setErr((e && e.message) || "記録できませんでした。もう一度お試しください。"); } finally { setPending(false); } }; const dirs = isCall ? [["out", "発信"], ["in", "受電"]] : [["out", "こちらから"], ["in", "相手から"]]; const field = { width:"100%", boxSizing:"border-box", padding:"6px 8px", borderRadius:"var(--radius-md)", border:"1px solid var(--input)", fontSize:"var(--text-body-md)", fontFamily:"var(--font-sans)", color:"var(--foreground)", background:"var(--card)" }; const Btn = typeof AfButton === "function" ? AfButton : "button"; return (
{dirs.map(([k, label]) => ( ))}
{!gate ? "記録のみ・相手には送信しません" : ch === "Slack" ? "記録します・有効化されると Slack にも届きます" : "記録します・確認すると LINE で相手に届きます"}
{isCall && (
setSubject(ev.target.value)} placeholder="要約" style={{ ...field, flex:1, minWidth:0 }} />
)} {isMail && setSubject(ev.target.value)} placeholder="件名" style={field} />}