many thanks for the reply. i updated my js to the below but sadly no luck. i get a new error and the pass fail click toggle no longer works.

UncaughtPromiseError > TypeError

Uncaught Promise > can't convert undefined to object

Occured on [redacted] on 2025-07-02 12:46:50 GMT

TypeError: can't convert undefined to object

_preprocessPropertiesChanges@[redacted]/web/assets/debug/web.assets_web.js:57849:49

_update@[redacted]/web/assets/debug/web.assets_web.js:58170:18

update/<@[redacted]/web/assets/debug/web.assets_web.js:57185:24

always@[redacted]/web/assets/debug/web.assets_web.js:41466:36

/** @odoo-module **/

import { Component, xml, useRef, useState, onWillStart } from "@odoo/owl";

import { useService } from "@web/core/utils/hooks";

import { registry } from "@web/core/registry";

import { standardFieldProps } from "@web/views/fields/standard_field_props";

console.log("van_check_overlay.js loaded!", new Date().toISOString());

function extractM2O(val, fallbackName) {

if (!val) return [false, fallbackName || ""];

if (val && typeof val === "object" && val.target && Array.isArray(val.target)) {

val = val.target;

}

if (Array.isArray(val)) return Array.from(val);

let v = val, safety = 0;

while (v && typeof v === "object" && typeof v.id !== "undefined" && v.id !== null && safety < 5) {

if (typeof v.id === "object" && v.id !== null) {

v = v.id;

safety++;

} else {

return [v.id, v.display_name || v.name || fallbackName || ""];

}

}

if (v && v.data && typeof v.data.id !== "undefined" && v.data.id !== null) {

return [v.data.id, v.data.display_name || v.data.name || fallbackName || ""];

}

if (v && v.target && typeof v.target.id !== "undefined" && v.target.id !== null) {

return [v.target.id, v.target.display_name || v.target.name || fallbackName || ""];

}

if (typeof v === "number" || typeof v === "string") {

return [v, fallbackName || ""];

}

return [false, fallbackName || ""];

}

function safe(obj, key, fallback) {

if (typeof obj[key] !== "undefined" && obj[key] !== null) return obj[key];

return fallback;

}

class VanCheckOverlay extends Component {

static props = { ...standardFieldProps };

static supportedTypes = ["one2many"];

setup() {

this.orm = useService("orm");

this.state = useState({ template: null, trigger: 0 });

this.imgRef = useRef("imgRef");

onWillStart(async () => {

const raw = this.props.record.data.template_id;

const tplId = Array.isArray(raw) ? raw[0] : (raw?.id || raw);

if (!tplId) return;

const [tpl] = await this.orm.read(

"van.weekly.checklist.template",

[tplId],

["image", "line_template_ids"]

);

if (!tpl) return;

tpl.line_template_ids = tpl.line_template_ids.length

? await this.orm.read(

"van.weekly.checklist.line.template",

tpl.line_template_ids,

["id", "code", "name", "position_x", "position_y", "sequence"]

)

: [];

this.state.template = tpl;

});

}

get imgSrc() {

return this.state.template?.image

? `data:image/png;base64,${this.state.template.image}`

: "/van_weekly_checklist/static/src/img/van.png";

}

get instanceLineMap() {

const map = {};

const lines = this.props.record.data.line_ids?.records || this.props.record.data.line_ids || [];

for (const rec of lines) {

let data = rec.data || rec;

let tli = data.template_line_id;

let tid = extractM2O(tli)[0];

if (tid) map[tid] = rec;

}

return map;

}

get templateLines() {

return this.state.template?.line_template_ids || [];

}

getInstanceLine(tline) {

return tline && tline.id ? this.instanceLineMap[tline.id] : undefined;

}

spotClass(rec) {

const data = rec?.data || rec;

if (data?.pass_fail === "pass") return "van-check-spot pass";

if (data?.pass_fail === "fail") return "van-check-spot fail";

return "van-check-spot";

}

spotIcon(rec) {

const data = rec?.data || rec;

if (data?.pass_fail === "pass") return "✔️";

if (data?.pass_fail === "fail") return "❌";

return "";

}

async togglePassFail(tline) {

if (!tline) return;

const rec = this.getInstanceLine(tline);

if (!rec) return;

const data = rec.data || rec;

const current = data.pass_fail || false;

const next = current === "pass" ? "fail" : current === "fail" ? false : "pass";

let rawM2O = data.template_line_id;

let resolvedM2O = extractM2O(rawM2O, tline.name);

if (!resolvedM2O || resolvedM2O[0] === false) {

resolvedM2O = [tline.id, tline.name || ""];

}

let isNew = !rec.res_id;

let updateObj = {

pass_fail: next,

template_line_id: isNew ? resolvedM2O : resolvedM2O[0],

code: safe(data, "code", safe(tline, "code", "")),

name: safe(data, "name", safe(tline, "name", "")),

position_x: Number(safe(data, "position_x", safe(tline, "position_x", 0))),

position_y: Number(safe(data, "position_y", safe(tline, "position_y", 0))),

sequence: Number(safe(data, "sequence", safe(tline, "sequence", 0))),

};

Object.keys(updateObj).forEach(field => {

if (typeof updateObj[field] === "undefined" || updateObj[field] === null) {

if (["position_x", "position_y", "sequence"].includes(field)) updateObj[field] = 0;

else updateObj[field] = "";

}

});

// SAFER: always update via record.update({ line_ids: [...] }) to avoid OWL/Proxy issues

let currentLines = this.props.record.data.line_ids?.records || this.props.record.data.line_ids || [];

let newLines = currentLines.map(line => {

let lineData = line.data || line;

let isThis = this.getInstanceLine(tline) === line;

if (!isThis) return line;

// For new lines, update .data, for existing, update plain object

return rec.data ? { ...lineData, ...updateObj } : Object.assign({}, line, updateObj);

});

this.props.record.update({ line_ids: newLines });

if (rec.res_id) {

try {

await this.orm.write("van.weekly.checklist.line", [rec.res_id], { pass_fail: next });

} catch (err) {

console.warn("ORM write failed:", err);

}

}

if (this.props.record.update) {

this.props.record.update();

}

this.state.trigger = Math.random();

const lines = this.props.record.data.line_ids?.records || this.props.record.data.line_ids || [];

console.log("After update:", lines.map(l => l.data || l));

}

debug() {

console.log("INSTANCE MAP", this.instanceLineMap);

const lines = this.props.record.data.line_ids?.records || this.props.record.data.line_ids || [];

lines.forEach((line, i) => {

let data = line.data || line;

console.log(`Line ${i}:`, line, data);

});

}

}

VanCheckOverlay.template = xml`

<div class="van-image-container" style="position:relative;">

<button type="button" t-on-click="debug" style="margin-bottom:12px;">Debug</button>

<img t-ref="imgRef" t-att-src="imgSrc" class="van-full-image"/>

<t t-foreach="templateLines" t-as="tline" t-key="tline.id">

<div

t-att-class="spotClass(getInstanceLine(tline))"

t-att-style="'left:' + (tline.position_x||0) + 'px; top:' + (tline.position_y||0) + 'px;'"

style="cursor:pointer;"

t-on-click="() => this.togglePassFail(tline)"

>

<span class="label" t-esc="tline.code"/>

<span t-esc="tline.name"/>

<t t-set="rec" t-value="getInstanceLine(tline)"/>

<t t-if="rec">

<span class="toggle-value" style="margin-left:10px;font-weight:bold;font-size:18px;">

<t t-esc="spotIcon(rec)"/>

</span>

</t>

</div>

</t>

</div>

`;

registry.category("fields").add("check_overlay", {

component: VanCheckOverlay,

fields: [

"line_ids",

"line_ids.template_line_id",

"line_ids.code",

"line_ids.name",

"line_ids.position_x",

"line_ids.position_y",

"line_ids.pass_fail",

"line_ids.sequence"

]

});

export default VanCheckOverlay;

import { Component, xml, useRef, useState, onWillStart } from "@odoo/owl";
import { useService } from "@web/core/utils/hooks";
import { registry } from "@web/core/registry";
import { standardFieldProps } from "@web/views/fields/standard_field_props";

function extractM2O(val, fallbackName) {
if (!val) return [false, fallbackName || ""];
if (val && typeof val === "object" && val.target && Array.isArray(val.target)) val = val.target;
if (Array.isArray(val)) return Array.from(val);

let v = val, safety = 0;
while (v && typeof v === "object" && typeof v.id !== "undefined" && v.id !== null && safety < 5) {
if (typeof v.id === "object" && v.id !== null) {
v = v.id;
safety++;
} else {
return [v.id, v.display_name || v.name || fallbackName || ""];
}
}

if (v?.data?.id !== undefined) return [v.data.id, v.data.display_name || fallbackName || ""];
if (v?.target?.id !== undefined) return [v.target.id, v.target.display_name || fallbackName || ""];
if (typeof v === "number" || typeof v === "string") return [v, fallbackName || ""];
return [false, fallbackName || ""];
}

function safe(obj, key, fallback) {
return (typeof obj[key] !== "undefined" && obj[key] !== null) ? obj[key] : fallback;
}

class VanCheckOverlay extends Component {
static props = { ...standardFieldProps };
static supportedTypes = ["one2many"];

setup() {
this.orm = useService("orm");
this.state = useState({ template: null, trigger: 0 });
this.imgRef = useRef("imgRef");

onWillStart(async () => {
const raw = this.props.record.data.template_id;
const tplId = Array.isArray(raw) ? raw[0] : (raw?.id || raw);
if (!tplId) return;

const [tpl] = await this.orm.read("van.weekly.checklist.template", [tplId], ["image", "line_template_ids"]);
if (!tpl) return;

tpl.line_template_ids = tpl.line_template_ids.length
? await this.orm.read("van.weekly.checklist.line.template", tpl.line_template_ids, ["id", "code", "name", "position_x", "position_y", "sequence"])
: [];

this.state.template = tpl;
});
}

get imgSrc() {
return this.state.template?.image
? `data:image/png;base64,${this.state.template.image}`
: "/van_weekly_checklist/static/src/img/van.png";
}

get instanceLineMap() {
const map = {};
const lines = this.props.record.data.line_ids?.records || [];
for (const rec of lines) {
const data = rec.data || rec;
const tid = extractM2O(data.template_line_id)[0];
if (tid) map[tid] = rec;
}
return map;
}

get templateLines() {
return this.state.template?.line_template_ids || [];
}

getInstanceLine(tline) {
return tline && tline.id ? this.instanceLineMap[tline.id] : undefined;
}

spotClass(rec) {
const data = rec?.data || rec;
if (data?.pass_fail === "pass") return "van-check-spot pass";
if (data?.pass_fail === "fail") return "van-check-spot fail";
return "van-check-spot";
}

spotIcon(rec) {
const data = rec?.data || rec;
if (data?.pass_fail === "pass") return "✔️";
if (data?.pass_fail === "fail") return "❌";
return "";
}

async togglePassFail(tline) {
if (!tline) return;

const rec = this.getInstanceLine(tline);
if (!rec) return;

const data = rec.data || rec;
const current = data.pass_fail || false;
const next = current === "pass" ? "fail" : current === "fail" ? false : "pass";

const isNew = !rec.res_id;
const resolvedM2O = extractM2O(data.template_line_id, tline.name)[0] || tline.id;

const updateObj = {
pass_fail: next,
template_line_id: resolvedM2O,
code: safe(data, "code", safe(tline, "code", "")),
name: safe(data, "name", safe(tline, "name", "")),
position_x: Number(safe(data, "position_x", safe(tline, "position_x", 0))),
position_y: Number(safe(data, "position_y", safe(tline, "position_y", 0))),
sequence: Number(safe(data, "sequence", safe(tline, "sequence", 0))),
};

try {
if (!isNew) {
await this.orm.write("van.weekly.checklist.line", [rec.res_id], { pass_fail: next });

this.props.record.update({
line_ids: [[1, rec.res_id, { pass_fail: next }]],
});
} else {
const currentLines = this.props.record.data.line_ids?.records || [];
const newLines = currentLines.map(line => {
return line === rec ? { ...data, ...updateObj } : line;
});
this.props.record.update({ line_ids: newLines });
}
} catch (err) {
console.warn("Toggle update failed:", err);
}

this.state.trigger = Math.random();
}

debug() {
console.log("INSTANCE MAP", this.instanceLineMap);
const lines = this.props.record.data.line_ids?.records || [];
lines.forEach((line, i) => {
let data = line.data || line;
console.log(`Line ${i}:`, line, data);
});
}
}

VanCheckOverlay.template = xml`
<div class="van-image-container" style="position:relative;">
<button type="button" t-on-click="debug" style="margin-bottom:12px;">Debug</button>
<img t-ref="imgRef" t-att-src="imgSrc" class="van-full-image"/>
<t t-foreach="templateLines" t-as="tline" t-key="tline.id">
<div
t-att-class="spotClass(getInstanceLine(tline))"
t-att-style="'left:' + (tline.position_x || 0) + 'px; top:' + (tline.position_y || 0) + 'px;'"
style="cursor:pointer;"
t-on-click="() => this.togglePassFail(tline)"
>
<span class="label" t-esc="tline.code"/>
<span t-esc="tline.name"/>
<t t-set="rec" t-value="getInstanceLine(tline)"/>
<t t-if="rec">
<span class="toggle-value" style="margin-left:10px;font-weight:bold;font-size:18px;">
<t t-esc="spotIcon(rec)"/>
</span>
</t>
</div>
</t>
</div>
`;

registry.category("fields").add("check_overlay", {
component: VanCheckOverlay,
fields: [
"line_ids",
"line_ids.template_line_id",
"line_ids.code",
"line_ids.name",
"line_ids.position_x",
"line_ids.position_y",
"line_ids.pass_fail",
"line_ids.sequence",
],
});

export default VanCheckOverlay;
please try i hope it will fix