`,
- },
- ],
- primary_action_label: __("Submit Inspection"),
- primary_action: () => {
- const readings = [];
- let missing = false;
- params.forEach((p, i) => {
- if (p.numeric) {
- const val = dialog.$wrapper.find(`.mes-qc-reading[data-idx="${i}"]`).val();
- if (val === "" || val === undefined || val === null) missing = true;
- readings.push({ specification: p.specification, reading_value: val });
- } else {
- if (!state[i]) missing = true;
- readings.push({
- specification: p.specification,
- status: state[i],
- reading_value: "",
- });
- }
- });
- if (missing) {
- frappe.msgprint(__("Please complete every check before submitting the inspection."));
- return;
- }
- dialog.hide();
- frappe.call({
- method: "erpnext.manufacturing.page.shop_floor.shop_floor.submit_quality_inspection",
- args: { job_card: jc.name, readings: JSON.stringify(readings) },
- freeze: true,
- freeze_message: __("Recording inspection..."),
- callback: (r) => {
- const res = r.message || {};
- if (res.status === "Rejected") {
- // Don't auto-proceed on a rejected inspection — the server gate may block the
- // submit anyway (per Stock Settings), and the operator should decide next steps.
- frappe.msgprint({
- title: __("Inspection Rejected"),
- indicator: "red",
- message: __(
- "Quality Inspection {0} is Rejected. Resolve the issue or follow your rejection process before submitting the job card.",
- [res.name || ""]
- ),
- });
- me.reload();
- return;
- }
- if (on_pass) on_pass();
- },
- });
- },
- });
-
- dialog.show();
- // Pass/Fail toggles for qualitative parameters.
- dialog.$wrapper.find(".mes-qc-passfail button").on("click", function () {
- const $btn = $(this);
- const $grp = $btn.closest(".mes-qc-passfail");
- $grp.find("button").removeClass("active");
- $btn.addClass("active");
- state[$grp.attr("data-idx")] = $btn.attr("data-val");
- });
- }
-
- prompt_manufacture_entry(jc_name) {
- const me = this;
- const dialog = new frappe.ui.Dialog({
- title: __("Job Card Submitted"),
- fields: [
- {
- fieldtype: "HTML",
- options: `
-
-
- ${__("Job card {0} has been submitted.", [frappe.utils.escape_html(jc_name)])}
-
-
- ${__("Create a Manufacture stock entry for the finished goods?")}
-
-
- `,
- },
- ],
- primary_action_label: __("Make Manufacture Entry"),
- primary_action: () => {
- dialog.hide();
- me.make_manufacture_entry(jc_name);
- },
- secondary_action_label: __("Skip"),
- secondary_action: () => dialog.hide(),
- });
- dialog.show();
- this.bind_enter_submit(dialog);
- }
-
- submit_job_card(jc_name) {
- const me = this;
- frappe.confirm(__("Submit job card {0}? This finalizes the job card.", [jc_name]), () => {
- frappe.call({
- method: "erpnext.manufacturing.page.shop_floor.shop_floor.submit_job_card",
- args: { job_card: jc_name },
- freeze: true,
- freeze_message: __("Submitting job card..."),
- callback: () => me.reload(),
- });
- });
- }
-
- make_manufacture_entry(jc_name) {
- frappe.call({
- method: "erpnext.manufacturing.page.shop_floor.shop_floor.make_manufacture_stock_entry",
- args: { job_card: jc_name },
- freeze: true,
- freeze_message: __("Preparing stock entry..."),
- callback: (r) => {
- if (r.message && r.message.name) {
- window.open(`/app/stock-entry/${encodeURIComponent(r.message.name)}`, "_blank");
- }
- },
- });
- }
-
- transfer_materials(jc_name) {
- if (!jc_name) return;
- frappe.call({
- method: "erpnext.manufacturing.doctype.job_card.job_card.make_stock_entry",
- args: { source_name: jc_name },
- callback: (r) => {
- const doc = frappe.model.sync(r.message);
- frappe.set_route("Form", doc[0].doctype, doc[0].name);
- },
- });
- }
-
- update_job_card(job_card, method, data, on_success) {
- const me = this;
- frappe.call({
- method: "erpnext.manufacturing.doctype.workstation.workstation.update_job_card",
- args: {
- job_card: job_card,
- method: method,
- start_time: data.start_time || "",
- employees: data.employees || [],
- end_time: data.end_time || "",
- qty: data.qty || 0,
- for_quantity: data.for_quantity || 0,
- pending_qty: data.pending_qty || 0,
- process_loss_qty: data.process_loss_qty || 0,
- auto_submit: data.auto_submit || 0,
- },
- freeze: true,
- freeze_message: __("Updating job card..."),
- callback: () => {
- me.reload();
- if (on_success) on_success();
- },
- });
- }
-
- // ── Timers ────────────────────────────────────────────────────────────────
- start_timer_for(jc, $container) {
- let elapsed = this.elapsed_seconds(jc);
- this.render_timer(jc.name, elapsed, $container);
- this.timer_intervals[jc.name] = setInterval(() => {
- elapsed += 1;
- this.render_timer(jc.name, elapsed, $container);
- }, 1000);
- }
-
- elapsed_seconds(jc) {
- let total = 0;
- for (const log of jc.time_logs || []) {
- if (log.to_time) {
- if (log.time_in_mins) {
- total += flt(log.time_in_mins, 2) * 60;
- } else {
- total += moment(log.to_time).diff(log.from_time, "seconds");
- }
- } else {
- total += moment().diff(log.from_time, "seconds");
- }
- }
- return total;
- }
-
- render_timer(jc_name, seconds, $container) {
- const h = Math.floor(seconds / 3600);
- const m = Math.floor((seconds - h * 3600) / 60);
- const s = cint(seconds - h * 3600 - m * 60);
- const pad = (n) => (n < 10 ? "0" + n : String(n));
-
- const scope = $container || this.wrapper;
- const timer = scope.find(`.mes-job-timer[data-job-card="${jc_name}"]`);
- timer.find(".h").text(pad(h));
- timer.find(".m").text(pad(m));
- timer.find(".s").text(pad(s));
- }
-
- // ── Realtime + lifecycle ───────────────────────────────────────────────────
- bind_realtime() {
- frappe.realtime.on("update_workstation_status", (data) => {
- if (data && data.name === this.op_state.workstation) {
- this.reload();
- }
- });
- }
-
- bind_lifecycle() {
- // Frappe has no on_page_hide hook, so toggle immersive mode + keyboard binding on
- // route changes ourselves.
- this._route_handler = () => {
- const on_page = (frappe.get_route_str() || "").startsWith("shop-floor");
- if (on_page) {
- $(document.body).addClass("shop-floor-active");
- this.bind_keys();
- } else {
- $(document.body).removeClass("shop-floor-active");
- this.unbind_keys();
- this.clear_timers();
- }
- };
- frappe.router.on("change", this._route_handler);
- }
-
- on_show() {
- $(document.body).addClass("shop-floor-active");
- this.bind_keys();
- // Cached re-navigation (e.g. the Work Order "Shop Floor" button) lands here with fresh
- // route_options; init() handles the very first load before we're initialized.
- if (this.initialized) this.apply_route_options();
- }
-
- // ── Keyboard ────────────────────────────────────────────────────────────────
- bind_keys() {
- $(document).off("keydown.shopfloor");
- $(document).on("keydown.shopfloor", (e) => this.handle_key(e));
- }
-
- unbind_keys() {
- $(document).off("keydown.shopfloor");
- }
-
- is_typing(e) {
- const tag = (e.target.tagName || "").toLowerCase();
- return tag === "input" || tag === "textarea" || tag === "select" || e.target.isContentEditable;
- }
-
- handle_key(e) {
- // Let dialogs own the keyboard while open.
- if ($(".modal:visible").length) return;
-
- const typing = this.is_typing(e);
-
- // Escape works even while typing (blur the search / close the detail pane).
- if (e.key === "Escape") {
- if (typing) {
- e.target.blur();
- return;
- }
- if (this.view === "manager" && this.selected_wo) {
- this.close_wo();
- e.preventDefault();
- }
- return;
- }
-
- if (typing) return;
-
- switch (e.key) {
- case "?":
- this.show_help();
- e.preventDefault();
- return;
- case "/":
- this.topbar_center.find(".sf-search-input").focus();
- e.preventDefault();
- return;
- case "r":
- this.refresh();
- e.preventDefault();
- return;
- case "b":
- this.open_scanner();
- e.preventDefault();
- return;
- case "1":
- case "2":
- if (this.view === "manager" && MANAGER_BUCKETS[cint(e.key) - 1]) {
- this.switch_bucket(MANAGER_BUCKETS[cint(e.key) - 1].key);
- e.preventDefault();
- }
- return;
- }
-
- // View switch chord: "g" then "m"/"o".
- if (e.key === "g") {
- this._g_pending = true;
- setTimeout(() => (this._g_pending = false), 600);
- return;
- }
- if (this._g_pending && (e.key === "m" || e.key === "o")) {
- this._g_pending = false;
- if (this.can_manage) this.set_view(e.key === "m" ? "manager" : "operator");
- return;
- }
-
- // Navigation.
- if (e.key === "ArrowDown" || e.key === "j") {
- this.move_focus(1);
- e.preventDefault();
- return;
- }
- if (e.key === "ArrowUp" || e.key === "k") {
- this.move_focus(-1);
- e.preventDefault();
- return;
- }
- if (e.key === "Enter") {
- this.activate_focus();
- e.preventDefault();
- return;
- }
-
- // Job actions on the focused card — reuse the rendered buttons.
- const map = {
- s: ".mes-btn-start, .mes-btn-resume",
- p: ".mes-btn-pause, .mes-btn-resume",
- e: ".mes-btn-end-session",
- t: ".mes-btn-transfer",
- };
- if (e.key === "S" && e.shiftKey) {
- this.click_job_action(".mes-btn-submit");
- e.preventDefault();
- return;
- }
- if (map[e.key]) {
- this.click_job_action(map[e.key]);
- e.preventDefault();
- }
- }
-
- // Job actions act on the focused job card (operator view); when the focus is on a board
- // work order (manager view with the detail open) they fall back to the detail's active job.
- click_job_action(selector) {
- const $el = this.focused_el();
- if ($el && $el.attr("data-kind") === "job") {
- const $btn = $el.find(selector).filter(":visible").first();
- if ($btn.length) {
- $btn.trigger("click");
- return;
- }
- }
- const scope = this.current_op_container();
- if (scope && scope.length) {
- const $btn = scope.find(selector).filter(":visible").first();
- if ($btn.length) $btn.trigger("click");
- }
- }
-
- focusables() {
- // Manager always navigates the board work orders — even with the detail open, so the
- // arrow keys switch work orders. The standalone operator view navigates its job cards.
- const scope = this.view === "manager" ? this.board_container : this.current_op_container();
- if (!scope || !scope.length) return $();
- return scope.find("[data-sf-focusable]");
- }
-
- move_focus(delta) {
- const $items = this.focusables();
- if (!$items.length) return;
- this.focus_index = Math.max(0, Math.min($items.length - 1, this.focus_index + delta));
- $items.removeClass("sf-focused");
- const $target = $items.eq(this.focus_index);
- $target.addClass("sf-focused");
- $target[0].scrollIntoView({ block: "nearest", behavior: "smooth" });
- // Browsing work orders with the detail already open → switch the detail to the focused one.
- if (this.view === "manager" && this.selected_wo && $target.attr("data-kind") === "wo") {
- this.open_wo($target.attr("data-name"));
- }
- }
-
- focused_el() {
- const $items = this.focusables();
- if (this.focus_index < 0 || this.focus_index >= $items.length) return null;
- return $items.eq(this.focus_index);
- }
-
- activate_focus() {
- const $el = this.focused_el();
- if (!$el) return;
- if ($el.attr("data-kind") === "wo") {
- this.open_wo($el.attr("data-name"));
- } else {
- // First visible primary button drives the job card (Start / Resume / End Session).
- const $btn = $el.find(".btn-primary:visible").first();
- if ($btn.length) $btn.trigger("click");
- }
- }
-
- show_help() {
- const rows = [
- ["?", __("Show this help")],
- ["/", __("Search work orders")],
- ["r", __("Refresh")],
- ["b", __("Scan job card")],
- ["g then m / o", __("Switch Board / Operator view")],
- ["1 / 2", __("Switch board tab")],
- ["↑ / ↓ or j / k", __("Move selection")],
- ["Enter", __("Open work order / run primary action")],
- ["Esc", __("Close detail / blur search")],
- ["s", __("Start / Resume job")],
- ["p", __("Pause / Resume job")],
- ["e", __("End session for active job")],
- ["t", __("Transfer materials")],
- ["Shift + S", __("Submit focused job card")],
- ];
- const html = `
${rows
- .map((r) => `
${r[0]}${r[1]}
`)
- .join("")}
`;
- const d = new frappe.ui.Dialog({
- title: __("Keyboard Shortcuts"),
- fields: [{ fieldtype: "HTML", options: html }],
- });
- d.show();
- }
-
- // ── Scanner ──────────────────────────────────────────────────────────────
- open_scanner() {
- const me = this;
- const dialog = new frappe.ui.Dialog({
- title: __("Scan Job Card"),
- fields: [
- {
- label: __("Scan or enter Job Card"),
- fieldname: "job_card",
- fieldtype: "Data",
- options: "Barcode",
- },
- ],
- primary_action_label: __("Continue"),
- primary_action: (values) => {
- if (!values.job_card) return;
- dialog.hide();
- me.handle_scanned_job_card(values.job_card);
- },
- });
- dialog.show();
- this.bind_enter_submit(dialog);
- }
-
- handle_scanned_job_card(job_card) {
- const me = this;
- const jc = (this.job_cards || []).find((j) => j.name === job_card);
- if (jc) {
- me.route_scanned_action(jc);
- return;
- }
- frappe.db.get_value("Job Card", job_card, ["status", "is_paused", "docstatus"]).then((r) => {
- const data = r && r.message;
- if (!data || !data.status) {
- frappe.msgprint(__("Job Card {0} was not found.", [job_card]));
- return;
- }
- if (cint(data.docstatus) === 1) {
- frappe.msgprint(__("Job Card {0} is already submitted.", [job_card]));
- } else if (cint(data.is_paused)) {
- me.resume_job(job_card);
- } else if (data.status === "Work In Progress") {
- frappe.msgprint(
- __(
- "Job Card {0} is already running. Open its machine or work order to pause or complete it.",
- [job_card]
- )
- );
- } else if (data.status === "Completed") {
- me.submit_job_card(job_card);
- } else {
- me.start_job(job_card);
- }
- });
- }
-
- route_scanned_action(jc) {
- const me = this;
- if (jc.docstatus === 1) {
- frappe.msgprint(__("Job Card {0} is already submitted.", [jc.name]));
- return;
- }
- if (jc.status === "Completed") {
- me.submit_job_card(jc.name);
- return;
- }
- if (jc.is_paused) {
- me.resume_job(jc.name);
- return;
- }
- const last_log = jc.time_logs && jc.time_logs.length ? jc.time_logs[jc.time_logs.length - 1] : null;
- const is_running = !!(last_log && !last_log.to_time);
- if (is_running) {
- me.prompt_running_action(jc);
- } else {
- me.start_job(jc.name);
- }
- }
-
- prompt_running_action(jc) {
- const me = this;
- const dialog = new frappe.ui.Dialog({
- title: __("Job {0} is running", [jc.name]),
- fields: [
- {
- fieldtype: "HTML",
- options: `
-
- ${__("{0} is already in progress. Pause it or complete the session.", [
- frappe.utils.escape_html(jc.finished_good || jc.production_item || jc.name),
- ])}
-
`;
- this.topbar_left = this.wrapper.find(".sf-topbar-left");
- this.topbar_center = this.wrapper.find(".sf-topbar-center");
- this.body = this.wrapper.find(".sf-body");
- this.board_container = this.wrapper.find(".sf-board");
- this.detail_container = this.wrapper.find(".sf-detail");
- this.op_container = this.wrapper.find(".sf-operator");
-
- this.wrapper.find(".sf-btn-home").on("click", () => (window.location.href = "/app"));
- this.wrapper.find(".sf-btn-refresh").on("click", () => this.refresh());
- this.wrapper.find(".sf-btn-scan").on("click", () => this.open_scanner());
- this.wrapper.find(".sf-btn-help").on("click", () => this.show_help());
- this.wrapper.find(".sf-btn-theme").on("click", () => this.toggle_theme());
- this.update_theme_button();
- }
-
- // Kiosk-friendly light/dark switch: flips the standard desk theme and persists it on the
- // User (same as the Ctrl+Shift+G switcher), so the choice survives reloads and follows the
- // operator's login on any device.
- toggle_theme() {
- const next = frappe.ui.get_current_theme() === "dark" ? "light" : "dark";
- document.documentElement.setAttribute("data-theme-mode", next);
- frappe.ui.set_theme(next);
- frappe.xcall("frappe.core.doctype.user.user.switch_theme", {
- theme: next.charAt(0).toUpperCase() + next.slice(1),
- });
- this.update_theme_button();
- }
-
- update_theme_button() {
- const dark = frappe.ui.get_current_theme() === "dark";
- this.wrapper
- .find(".sf-btn-theme")
- .html(dark ? "☀" : "☾")
- .attr("title", dark ? __("Switch to Light Theme") : __("Switch to Dark Theme"));
- }
-
- render_shell_controls() {
- this.topbar_left.empty();
- this.topbar_center.empty();
-
- // View toggle — only managers can flip between the board and a bare operator view.
- const toggle = this.can_manage
- ? `