[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","6899c979ccd481919ede23b3bf8303c3","versionInt","title","Scotsman Deal Manager（試作版）","type","code/react","content","import React, { useEffect, useMemo, useState } from \"react\";\n\n/**\n * SCOTSMAN Deal Manager – single-file prototype\n * - 8 qualification axes (SCOTSMAN)\n * - Auto win-probability calculation with transparent weights\n * - Save to localStorage, export/import JSON\n * - Success Pattern Library (auto-capture on Won) + simple similarity suggestions\n * - Clean, responsive UI (Tailwind CSS)\n */\n\n// ---------- Types ----------\nconst SCOT_KEYS = [\n \"solution\",\n \"competition\",\n \"originality\",\n \"timescale\",\n \"size\",\n \"money\",\n \"authority\",\n \"need\",\n] as const;\n\nconst LABELS: Record<(typeof SCOT_KEYS)[number], string> = {\n solution: \"Solution（解決策の適合度）\",\n competition: \"Competition（競合状況）\",\n originality: \"Originality（当社の独自性）\",\n timescale: \"Timescale（導入スケジュールの明確さ）\",\n size: \"Size（案件規模・影響度）\",\n money: \"Money（投資対効果/予算の確度）\",\n authority: \"Authority（意思決定/承認プロセスの把握）\",\n need: \"Need（真のニーズの強さ）\",\n};\n\n// We use a 0-5 scale for each axis; define recommended weights (total 100)\nconst WEIGHTS: Record<(typeof SCOT_KEYS)[number], number> = {\n solution: 15,\n competition: 8,\n originality: 7,\n timescale: 15,\n size: 10,\n money: 18,\n authority: 17,\n need: 10,\n};\n\n// ---------- Models ----------\nfunction newDeal() {\n return {\n id: crypto.randomUUID(),\n name: \"\",\n company: \"\",\n owner: \"\",\n stage: \"Qualification\", // Qualification / Proposal / Negotiation / Closed Won / Closed Lost\n amount: 0,\n industry: \"\",\n channel: \"\", // inbound/outbound/partner etc\n tags: \"\", // comma-separated tactics/keywords\n notes: \"\",\n scot: Object.fromEntries(SCOT_KEYS.map((k) => [k, { score: 0, evidence: \"\" }])),\n createdAt: new Date().toISOString(),\n updatedAt: new Date().toISOString(),\n } as Deal;\n}\n\n/** @typedef {ReturnType} Deal */\n\n// Pattern captured when a deal is marked as Won\nfunction patternFromDeal(d /** @type {Deal} */) {\n return {\n id: crypto.randomUUID(),\n company: d.company,\n industry: d.industry,\n channel: d.channel,\n amount: d.amount,\n tags: parseTags(d.tags),\n highlights: summarizeHighlights(d),\n scot: Object.fromEntries(\n SCOT_KEYS.map((k) => [k, /** @type {{score:number}} */(d.scot[k]).score])\n ),\n capturedFromDealId: d.id,\n capturedAt: new Date().toISOString(),\n };\n}\n\n// ---------- Storage ----------\nconst LS_KEY = \"scotsman_deals_v1\";\nconst LS_PATTERNS_KEY = \"scotsman_patterns_v1\";\n\nfunction loadDeals() {\n try {\n return JSON.parse(localStorage.getItem(LS_KEY) || \"[]\");\n } catch { return []; }\n}\nfunction saveDeals(deals) { localStorage.setItem(LS_KEY, JSON.stringify(deals)); }\n\nfunction loadPatterns() {\n try {\n return JSON.parse(localStorage.getItem(LS_PATTERNS_KEY) || \"[]\");\n } catch { return []; }\n}\nfunction savePatterns(patterns) { localStorage.setItem(LS_PATTERNS_KEY, JSON.stringify(patterns)); }\n\n// ---------- Utils ----------\nfunction clamp(n, min, max){ return Math.max(min, Math.min(max, n)); }\n\nfunction parseTags(s /** @type {string} */){\n return s.split(\",\").map(t=>t.trim()).filter(Boolean).map(t=>t.toLowerCase());\n}\n\nfunction jaccard(a /** @type {string[]} */, b /** @type {string[]} */){\n const A = new Set(a), B = new Set(b);\n const inter = [...A].filter(x=>B.has(x)).length;\n const union = new Set([...a, ...b]).size || 1;\n return inter / union;\n}\n\nfunction colorByProb(p /** @type {number} */){\n if (p >= 75) return \"text-green-600\";\n if (p >= 50) return \"text-amber-600\";\n if (p >= 25) return \"text-orange-600\";\n return \"text-red-600\";\n}\n\nfunction summarizeHighlights(d /** @type {Deal} */){\n const top = SCOT_KEYS\n .map(k=>({ key: k, score: d.scot[k].score }))\n .sort((a,b)=>b.score - a.score)\n .slice(0,2)\n .map(x=>LABELS[x.key])\n .join(\" / \");\n return `強み: ${top} / タグ: ${parseTags(d.tags).join(\" \")}`;\n}\n\n// Probability model: weighted sum with soft gates\nfunction calcProbability(d /** @type {Deal} */){\n let sum = 0;\n let max = 0;\n for (const k of SCOT_KEYS){\n sum += (d.scot[k].score||0) * WEIGHTS[k];\n max += 5 * WEIGHTS[k];\n }\n let p = (sum / max) * 100; // base\n // Gates: if Authority/Money/Need low, penalize\n const auth = d.scot.authority.score;\n const money = d.scot.money.score;\n const need = d.scot.need.score;\n if (auth <= 1) p *= 0.7;\n if (money <= 1) p *= 0.75;\n if (need <= 1) p *= 0.75;\n // Timescale unknown = volatility\n if (d.scot.timescale.score <= 1) p -= 5;\n return clamp(Math.round(p), 0, 100);\n}\n\n// ---------- Components ----------\nexport default function App(){\n const [deals, setDeals] = useState(loadDeals());\n const [patterns, setPatterns] = useState(loadPatterns());\n const [currentId, setCurrentId] = useState(deals[0]?.id || \"\");\n const current = useMemo(()=>deals.find(d=>d.id===currentId), [deals, currentId]);\n const [query, setQuery] = useState(\"\");\n const [sortKey, setSortKey] = useState(\"prob\");\n\n useEffect(()=>{ saveDeals(deals); }, [deals]);\n useEffect(()=>{ savePatterns(patterns); }, [patterns]);\n useEffect(()=>{ if (!current && deals.length){ setCurrentId(deals[0].id); } }, [current, deals]);\n\n function addDeal(){\n const d = newDeal();\n setDeals([d, ...deals]);\n setCurrentId(d.id);\n }\n\n function updateDeal(patch){\n setDeals(ds=>ds.map(d=>d.id===currentId ? { ...d, ...patch, updatedAt: new Date().toISOString() } : d));\n }\n\n function updateScot(key, field, value){\n setDeals(ds=>ds.map(d=>{\n if (d.id!==currentId) return d;\n return { ...d, scot: { ...d.scot, [key]: { ...d.scot[key], [field]: value } }, updatedAt: new Date().toISOString() };\n }));\n }\n\n function markWon(){\n if (!current) return;\n // capture pattern\n const pat = patternFromDeal(current);\n setPatterns(ps=>[pat, ...ps]);\n updateDeal({ stage: \"Closed Won\" });\n }\n\n function markLost(){ updateDeal({ stage: \"Closed Lost\" }); }\n\n function removeDeal(id){\n setDeals(ds=>ds.filter(d=>d.id!==id));\n if (currentId===id) setCurrentId(\"\");\n }\n\n function exportAll(){\n const blob = new Blob([JSON.stringify({ deals, patterns }, null, 2)], { type: \"application/json\" });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url; a.download = `scotsman_export_${new Date().toISOString().slice(0,10)}.json`;\n a.click(); URL.revokeObjectURL(url);\n }\n\n function importAll(e){\n const file = e.target.files?.[0];\n if (!file) return;\n const reader = new FileReader();\n reader.onload = () => {\n try {\n const obj = JSON.parse(String(reader.result||\"{}\"));\n if (Array.isArray(obj.deals)) setDeals(obj.deals);\n if (Array.isArray(obj.patterns)) setPatterns(obj.patterns);\n } catch(err){ alert(\"インポート失敗: \" + err); }\n };\n reader.readAsText(file);\n }\n\n const filtered = deals.filter(d=>{\n const q = query.toLowerCase();\n return [d.name, d.company, d.owner, d.industry, d.channel, d.tags].some(x=>String(x).toLowerCase().includes(q));\n }).map(d=>({ ...d, prob: calcProbability(d) }));\n\n const sorted = [...filtered].sort((a,b)=>{\n if (sortKey===\"prob\") return b.prob - a.prob;\n if (sortKey===\"updated\") return (b.updatedAt||\"\").localeCompare(a.updatedAt||\"\");\n if (sortKey===\"amount\") return (b.amount||0) - (a.amount||0);\n return a.name.localeCompare(b.name);\n });\n\n const suggestions = useMemo(()=>{\n if (!current) return [];\n const ct = parseTags(current.tags);\n const ranked = patterns\n .map(p=>({ p, score: jaccard(ct, p.tags) + (current.industry && p.industry===current.industry ? 0.25:0) }))\n .sort((a,b)=>b.score - a.score)\n .slice(0,3);\n return ranked;\n }, [current, patterns]);\n\n return (\n

SCOTSMAN Deal Manager（試作版）

\n \n \n \n インポート\n \n \n

\n\n

\n {/* Left: List */}\n

\n setQuery(e.target.value)} placeholder=\"検索：案件名/会社/タグなど\" className=\"w-full px-3 py-2 rounded-xl border bg-white\"/>\n \n

\n\n

\n {sorted.map(d=> (\n \n ))}\n {sorted.length===0 && (\n

案件がありません。「新規案件」を押して作成してください。

\n )}\n

\n\n {/* Right: Editor & Insights */}\n

\n {!current ? (\n

左のリストから案件を選択してください。

\n ) : (\n <>\n {/* Deal Header */}\n

\n updateDeal({ name: v })} />\n updateDeal({ company: v })} />\n updateDeal({ owner: v })} />\n

updateDeal({ notes: v })} rows={3} />\n                <div className=\"flex gap-2\">\n                  <button onClick={markWon} className=\"px-3 py-1.5 rounded-xl bg-green-600 text-white hover:bg-green-700\">Wonにする & 成功パターン保存</button>\n                  <button onClick={markLost} className=\"px-3 py-1.5 rounded-xl bg-red-600 text-white hover:bg-red-700\">Lostにする</button>\n                  <button onClick={()=>removeDeal(current.id)} className=\"ml-auto px-3 py-1.5 rounded-xl bg-white border hover:bg-slate-50\">案件削除</button>\n                </div>\n              </div>\n\n              {/* SCOTSMAN Grid */}\n              <div className=\"bg-white rounded-2xl border p-4\">\n                <div className=\"flex items-center justify-between mb-2\">\n                  <div className=\"font-semibold\">SCOTSMAN（各0〜5点で評価）</div>\n                  <div className=\"text-xs text-slate-500\">重み: {SCOT_KEYS.map(k=>`${LABELS[k].split(\"（\")[0]} ${WEIGHTS[k]}`).join(\" / \")}</div>\n                </div>\n                <div className=\"grid md:grid-cols-2 gap-3\">\n                  {SCOT_KEYS.map((k)=> (\n                    <div key={k} className=\"rounded-2xl border p-3\">\n                      <div className=\"flex items-center justify-between mb-2\">\n                        <div className=\"font-medium\">{LABELS[k]}</div>\n                        <div className=\"flex items-center gap-2\">\n                          <input type=\"range\" min={0} max={5} step={1}\n                            value={current.scot[k].score}\n                            onChange={(e)=>updateScot(k, \"score\", Number(e.target.value))} />\n                          <span className=\"w-6 text-right font-semibold\">{current.scot[k].score}</span>\n                        </div>\n                      </div>\n                      <textarea\n                        className=\"w-full h-20 px-3 py-2 rounded-xl border bg-slate-50\"\n                        placeholder=\"根拠・エビデンス（例：決裁者の氏名と役割を確認、ROI試算で12ヶ月回収の合意 など）\"\n                        value={current.scot[k].evidence}\n                        onChange={(e)=>updateScot(k, \"evidence\", e.target.value)}\n                      />\n                    </div>\n                  ))}\n                </div>\n              </div>\n\n              {/* Insights */}\n              <div className=\"grid md:grid-cols-2 gap-4\">\n                <div className=\"bg-white rounded-2xl border p-4\">\n                  <div className=\"font-semibold mb-2\">アクション提案（弱点補強）</div>\n                  <ActionHints deal={current} />\n                </div>\n                <div className=\"bg-white rounded-2xl border p-4\">\n                  <div className=\"font-semibold mb-2\">成功パターンのおすすめ（類似度順）</div>\n                  {suggestions.length===0 && <div className=\"text-slate-500 text-sm\">まだ保存された成功パターンがありません。案件をWonにすると自動で蓄積されます。</div>}\n                  <ul className=\"space-y-2\">\n                    {suggestions.map(({p, score})=> (\n                      <li key={p.id} className=\"rounded-xl border p-3\">\n                        <div className=\"text-sm text-slate-500\">類似度: {(score*100).toFixed(0)}%</div>\n                        <div className=\"font-medium\">{p.industry || \"業界未設定\"} / {p.channel || \"チャネル未設定\"} / ￥{(p.amount||0).toLocaleString?.()}</div>\n                        <div className=\"text-sm\">タグ: {p.tags.join(\" , \") || \"-\"}</div>\n                        <div className=\"text-sm text-slate-600\">{p.highlights}</div>\n                      </li>\n                    ))}\n                  </ul>\n                </div>\n              </div>\n\n              {/* Pattern Library */}\n              <div className=\"bg-white rounded-2xl border p-4\">\n                <div className=\"flex items-center justify-between mb-2\">\n                  <div className=\"font-semibold\">成功パターン・ライブラリ</div>\n                  <button onClick={()=>setPatterns([])} className=\"text-sm px-3 py-1 rounded-xl border hover:bg-slate-50\">全クリア</button>\n                </div>\n                <div className=\"overflow-x-auto\">\n                  <table className=\"min-w-full text-sm\">\n                    <thead className=\"bg-slate-50\">\n                      <tr>\n                        <th className=\"text-left p-2\">日時</th>\n                        <th className=\"text-left p-2\">業界</th>\n                        <th className=\"text-left p-2\">チャネル</th>\n                        <th className=\"text-left p-2\">金額</th>\n                        <th className=\"text-left p-2\">タグ</th>\n                        <th className=\"text-left p-2\">ハイライト</th>\n                      </tr>\n                    </thead>\n                    <tbody>\n                      {patterns.map((p)=> (\n                        <tr key={p.id} className=\"border-t\">\n                          <td className=\"p-2 whitespace-nowrap\">{new Date(p.capturedAt).toLocaleString()}</td>\n                          <td className=\"p-2\">{p.industry}</td>\n                          <td className=\"p-2\">{p.channel}</td>\n                          <td className=\"p-2\">￥{(p.amount||0).toLocaleString?.()}</td>\n                          <td className=\"p-2\">{p.tags?.join(\" , \")}</td>\n                          <td className=\"p-2\">{p.highlights}</td>\n                        </tr>\n                      ))}\n                      {patterns.length===0 && (\n                        <tr><td className=\"p-3 text-slate-500\" colSpan={6}>まだデータがありません。</td></tr>\n                      )}\n                    </tbody>\n                  </table>\n                </div>\n              </div>\n\n              {/* How to */}\n              <div className=\"bg-white rounded-2xl border p-4\">\n                <div className=\"font-semibold mb-2\">使い方（1分）</div>\n                <ol className=\"list-decimal ml-5 space-y-1 text-sm text-slate-700\">\n                  <li>「新規案件」を作成 → 案件基本情報を入力（業界/チャネル/タグも入力するとレコメンド精度が上がります）。</li>\n                  <li>SCOTSMAN の8項目を 0〜5 で評価し、根拠をメモ。確度は自動計算されます。</li>\n                  <li>受注できたら「Wonにする」を押すと、成功パターンが自動保存され、今後の案件に活かせます。</li>\n                  <li>右上の「エクスポート/インポート」でバックアップ・共有が可能です（JSON）。</li>\n                </ol>\n                <div className=\"text-xs text-slate-500 mt-2\">※ 確度モデルは単純な重み付け + ソフトゲートです。自社の実績に合わせて重みを調整する想定です。</div>\n              </div>\n            </>\n          )}\n        </section>\n      </main>\n\n      <footer className=\"max-w-7xl mx-auto px-4 py-8 text-center text-xs text-slate-500\">\n        v0.1 – SCOTSMAN® is a widely used deal qualification framework. This prototype is for internal enablement.\n      </footer>\n    </div>\n  );\n}\n\n// ---------- Small UI bits ----------\nfunction Text({ label, value, onChange }){\n  return (\n    <label className=\"block\">\n      <div className=\"text-xs text-slate-500 mb-1\">{label}</div>\n      <input className=\"w-full px-3 py-2 rounded-xl border bg-white\" value={value} onChange={(e)=>onChange(e.target.value)} />\n    </label>\n  );\n}\nfunction NumberField({ label, value, onChange }){\n  return (\n    <label className=\"block\">\n      <div className=\"text-xs text-slate-500 mb-1\">{label}</div>\n      <input type=\"number\" className=\"w-full px-3 py-2 rounded-xl border bg-white\" value={value} onChange={(e)=>onChange(Number(e.target.value||0))} />\n    </label>\n  );\n}\nfunction TextArea({ label, value, onChange, rows=4 }){\n  return (\n    <label className=\"block\">\n      <div className=\"text-xs text-slate-500 mb-1\">{label}</div>\n      <textarea rows={rows} className=\"w-full px-3 py-2 rounded-xl border bg-white\" value={value} onChange={(e)=>onChange(e.target.value)} />\n    </label>\n  );\n}\nfunction Select({ label, value, onChange, options }){\n  return (\n    <label className=\"block\">\n      <div className=\"text-xs text-slate-500 mb-1\">{label}</div>\n      <select className=\"w-full px-3 py-2 rounded-xl border bg-white\" value={value} onChange={(e)=>onChange(e.target.value)}>\n        {options.map(o=> <option key={o} value={o}>{o}</option>)}\n      </select>\n    </label>\n  );\n}\n\nfunction ActionHints({ deal }){\n  const entries = SCOT_KEYS\n    .map(k=>({ key: k, label: LABELS[k], score: deal.scot[k].score }))\n    .sort((a,b)=>a.score - b.score);\n  return (\n    <ul className=\"space-y-2 text-sm\">\n      {entries.slice(0,3).map(({key, label, score})=> (\n        <li key={key} className=\"rounded-xl border p-3\">\n          <div className=\"font-medium\">{label} <span className=\"text-slate-500\">（現状 {score}/5）</span></div>\n          <div className=\"text-slate-700 mt-1\">\n            {hintText(key)}\n          </div>\n        </li>\n      ))}\n    </ul>\n  );\n}\n\nfunction hintText(key){\n  switch(key){\n    case \"authority\": return \"決裁プロセスの可視化：最終決裁者・影響者・使用者をマッピングし、承認のステップと想定障害を箇条書き化。承認資料の雛形を一緒に作る。\";\n    case \"money\": return \"ROI合意を先行：現状コスト→改善効果→回収期間を1枚で可視化。予算科目と振替可能性を確認し、投資対効果の指標に同意を取る。\";\n    case \"timescale\": return \"逆算スケジュール：稼働希望日から逆算した主要マイルストン（PoC→稟議→契約→導入）と各担当者のToDoを共有。\";\n    case \"competition\": return \"比較観点を設計：お客様側の評価表に“当社の強み”が反映されるよう、評価軸を合意（例：運用コスト/導入スピード/拡張性）。\";\n    case \"solution\": return \"適合根拠を明文化：要求仕様と必須/任意条件の対応表を提示し、ギャップ解消策を明記。\";\n    case \"originality\": return \"差別化証拠：成功事例・導入後の運用図・サンプルを提示し“他社では難しい理由”を数値と運用で示す。\";\n    case \"size\": return \"インパクト定量化：影響部署・ユーザー数・費用/売上インパクトを算出し、経営指標との紐付けを可視化。\";\n    case \"need\": return \"経営課題との接続：放置コスト（時間・機会・リスク）を可視化し、“今やる理由”を経営視点で言語化。\";\n    default: return \"\";\n  }\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","11503297445861108253","traceTime",1779104996927]
</article></body></html>