my_custom_app/
├─ my_custom_app/
│ ├─ boot.py # Boot の拡張（対象DocTypeを配信）
│ ├─ api/
│ │ └─ workflow.py # ワークフロー状況API
│ ├─ public/
│ │ └─ js/
│ │ └─ workflow_panel.js # 承認状況パネルの描画
│ └─ report/
│ └─ workflow_overview/
│ ├─ workflow_overview.json # Script Report 定義
│ └─ workflow_overview.py # Script Report ロジック
└─ hooks.py

# hooks.py
app_include_js = [
    "my_custom_app/public/js/workflow_panel.js"
]
 
# Boot の拡張（セッション開始時に呼ばれる）
boot_session = "my_custom_app.boot.boot_session"

# my_custom_app/boot.py
import frappe
 
def boot_session(bootinfo):
    """
    現在アクティブな Workflow が紐づく Document Type を配信。
    JS側で対象フォーム判定に使う。
    """
    doctypes = frappe.get_all(
        "Workflow",
        fields=["document_type"],
        filters={"is_active": 1},
        distinct=True,
        as_list=False,
    )
    docnames = sorted({d["document_type"] for d in doctypes if d.get("document_type")})
 
    bootinfo.my_custom_app = bootinfo.get("my_custom_app", {})
    bootinfo.my_custom_app["workflow_doctypes"] = docnames
 
 

# my_custom_app/api/workflow.py
import frappe
from frappe.utils import format_datetime
 
@frappe.whitelist()
def get_status(doctype: str, name: str):
    """対象ドキュメントの承認状況を返す（閲覧可能なユーザーのみ）。"""
    doc = frappe.get_doc(doctype, name)
    doc.check_permission("read")
 
    # 現在のステート（ある場合）
    state = getattr(doc, "workflow_state", None)
 
    # 保留中の承認（Workflow Action）
    pending = frappe.get_all(
        "Workflow Action",
        filters={
            "reference_doctype": doctype,
            "reference_name": name,
            "status": "Pending",
        },
        fields=["user", "creation", "action"],
        order_by="creation asc",
    )
    for p in pending:
        p["creation_fmt"] = format_datetime(p["creation"])
 
    # 履歴（コメントの Workflow ログ）
    history = frappe.get_all(
        "Comment",
        filters={
            "reference_doctype": doctype,
            "reference_name": name,
            "comment_type": "Workflow",
        },
        fields=["content", "owner", "creation"],
        order_by="creation asc",
    )
    for h in history:
        h["creation_fmt"] = format_datetime(h["creation"])
 
    return {
        "state": state,
        "pending": pending,
        "history": history,
    }
 

// my_custom_app/public/js/workflow_panel.js
 
// 通信ゼロ版キャッシュ
const WF_CACHE = {
  loaded: true,
  doctypes: new Set((frappe.boot && frappe.boot.myhatch && frappe.boot.myhatch.wf_doctypes) || [])
};
 
function hasWorkflow(doctype) {
  return WF_CACHE.doctypes.has(doctype);
}
 
function unmount(frm) {
  const el = frm.__wf_panel;
  if (el && el.isConnected) el.remove();
  frm.__wf_panel = null;
}
 
(function () {
  const isCurrentForm = (frm) =>
    !!cur_frm && cur_frm.doctype === frm.doctype && cur_frm.docname === frm.docname;
 
  function waitForFooter(frm, tries = 15) {
    return new Promise((resolve) => {
      (function poll(n) {
        const el = $(frm.wrapper).find(".form-footer")[0];
        if (el) return resolve(el);
        if (n <= 0) return resolve(null);
        setTimeout(() => poll(n - 1), 100);
      })(tries);
    });
  }
 
  // ============== タイムライン用 行パーツ ==============
  // バッジ行（履歴の最上段にある「分岐」などのアイコン行と同じ構造）
  function badgeItem(iconId, innerHTML) {
    return `
      <div class="timeline-item">
        <div class="timeline-badge" title="">
          <svg class="icon icon-sm" aria-hidden="true">
            <use href="#${iconId}"></use>
          </svg>
        </div>
        <div class="timeline-content">
          ${innerHTML}
        </div>
      </div>
    `;
  }
 
  // ドット行（履歴の通常行と同じ構造）
  function dotItem(innerHTML, opts = {}) {
    const indent = opts.indent ? ' style="margin-left:24px;"' : "";
    return `
      <div class="timeline-item">
        <div class="timeline-dot"></div>
        <div class="timeline-content"${indent}>
          ${innerHTML}
        </div>
      </div>
    `;
  }
 
  // ============== マウント処理 ==============
  async function ensureMountedOnce(frm) {
    if (frm.is_new() || !isCurrentForm(frm)) return null;
    if (frm.__wf_panel?.isConnected) return frm.__wf_panel;
 
    const afterSave = $(frm.wrapper).find(".form-footer .after-save")[0];
    if (!afterSave) return null;
 
    const panel = document.createElement("div");
    panel.id = "workflow-progress-panel";
    panel.className = "mt-3 mb-4";
    panel.innerHTML = `
    <div class="new-timeline">
      <div class="timeline-item activity-title">
        <h4>ワークフロー進捗</h4>
        <div class="timeline-items timeline-actions">
          <div class="timeline-item">
            <div class="timeline-content action-buttons">
              <button class="btn btn-xs btn-secondary action-btn" id="wf-refresh-btn">
                <svg class="es-icon es-line icon-xs" aria-hidden="true">
                  <use href="#es-line-refresh"></use>
                </svg>
                更新
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="timeline-items" id="wf-block"><!-- JSで差し込み --></div>
    </div>
  `;
 
  afterSave.appendChild(panel); // ← これで new-timeline の直後(末尾)に来る
 
    panel.querySelector("#wf-refresh-btn").addEventListener("click", () => refreshPanel(frm));
    frm.__wf_panel = panel;
    return panel;
  }
 
  function render(panel, data) {
    const $block = panel.querySelector("#wf-block");
    const html = [];
 
    // 現在の状態（バッジ行：履歴の先頭風）
    html.push(
      badgeItem(
        "icon-branch", // 履歴で使われる分岐アイコン
        `現在の状態：<strong>${frappe.utils.escape_html(data.current_state || "-")}</strong>`
      )
    );
 
    // 次の承認候補（見出しドット行 + 子ドット行）
    const candidates = Array.from(
      new Set((data.next_candidates || []).flatMap((c) => c.users || []))
    );
    if (candidates.length) {
      html.push(dotItem(`<span class="text-muted">次の承認候補</span>`));
      candidates.forEach((u) =>
        html.push(dotItem(`<strong>${frappe.utils.escape_html(u)}</strong>`, { indent: true }))
      );
    }
 
    // 承認履歴（1行ずつ、履歴と同じドット行）
    const route = Array.isArray(data.route) ? data.route : [];
    if (route.length) {
      route.forEach((r) => {
        const actor = frappe.utils.escape_html(r.by || "-");
        const from = frappe.utils.escape_html(r.from || "-");
        const to = frappe.utils.escape_html(r.to || "-");
        const whenISO = r.when || "";
        const whenPretty = whenISO
          ? `<span class="frappe-timestamp" data-timestamp="${whenISO}" title="${whenISO}">${frappe.datetime.prettyDate(
              whenISO
            )}</span>`
          : "";
 
        html.push(
          dotItem(
            `<strong>${actor}</strong> が <strong>${from}</strong> → <strong>${to}</strong> へ遷移
             <span> · ${whenPretty}</span>`
          )
        );
      });
    } else {
      html.push(dotItem(`<span class="text-muted">進捗データはありません。</span>`));
    }
 
    $block.innerHTML = html.join("");
  }
 
  function refreshPanel(frm) {
    const panel = frm.__wf_panel;
    if (!panel || !isCurrentForm(frm)) return;
 
    const $block = panel.querySelector("#wf-block");
    $block.innerHTML = dotItem(`読み込み中…`);
 
    const token = `${frm.doctype}:${frm.docname}:${Date.now()}`;
    frm.__wf_req_token = token;
 
    frappe
      .call({
        method: "my_custom_app.api.workflow.get_workflow_overview",
        args: { doctype: frm.doctype, name: frm.docname, comments_limit: 0 },
        freeze: false,
      })
      .then((r) => {
        if (frm.__wf_req_token !== token || !isCurrentForm(frm)) return;
        render(panel, r.message || {});
      })
      .catch(() => {
        $block.innerHTML = dotItem(`読み込み失敗`);
      });
  }
 
  function bindHandlers() {
    if (window.__wf_panel_bootstrapped) return;
    window.__wf_panel_bootstrapped = true;
 
    frappe.ui.form.on("*", {
    onload_post_render(frm) {
      if (!hasWorkflow(frm.doctype)) return unmount(frm);
      ensureMountedOnce(frm).then(() => refreshPanel(frm));
    },
    refresh(frm) {
      if (!hasWorkflow(frm.doctype)) return unmount(frm);
      ensureMountedOnce(frm).then(() => refreshPanel(frm));
    },
    after_save(frm) { if (hasWorkflow(frm.doctype)) refreshPanel(frm); },
    on_submit(frm)  { if (hasWorkflow(frm.doctype)) refreshPanel(frm); },
    on_cancel(frm)  { if (hasWorkflow(frm.doctype)) refreshPanel(frm); },
  });
 
    // 念のため Budget を明示
    frappe.ui.form.on("Budget", {
      onload_post_render(frm) {
        ensureMountedOnce(frm).then(() => refreshPanel(frm));
      },
      refresh(frm) {
        ensureMountedOnce(frm).then(() => refreshPanel(frm));
      },
    });
  }
 
  if (window.frappe?.ui?.form?.on) bindHandlers();
  else {
    $(document).on("app_ready", bindHandlers);
    frappe.router && frappe.router.on("change", bindHandlers);
  }
})();