window.ATL_PDI = (function () { var ACCESS_PROCESSOR = "dz4n42j7nn5aFhkoX"; var ORDERS_PROCESSOR = "y9rZzhG7xHjZm3aBq"; var STAFF_PROCESSOR = "EgrGAQsgcW8SzHMWP"; var helpGuides = [ { role: "sales_rep", name: "Sales Rep guide", summary: "Raising a PDI request, reading the board, My Cars, searching, and escalating a car that has stalled.", guide: "/f/flfldr/PyeeDy3z4W5dzXn5e.html", printable: "/f/flfldr/nKY2mHcN3pbGAxQpr.pdf" }, { role: "agent", name: "Agent guide", summary: "The tracking board, the side pane, moving a car through the eight stages, progress notes, and clearing escalations.", guide: "/f/flfldr/NzLCxjKG5LTvYfffH.html", printable: "/f/flfldr/JSpwQXpcJza9PEBSu.pdf" }, { role: "admin", name: "Admin guide", summary: "Everything on the board, plus adding, re-roling and removing staff, and the guards that stop you locking yourself out.", guide: "/f/flfldr/kJo22AZLtf5foGvto.html", printable: "/f/flfldr/vA7Jv2guvZEq58Jyx.pdf" } ]; // The brand/model list is NOT stored here. It is read live from the ATL // Order form every time the New Order screen is opened, so a model added // to the form appears here immediately with no code change. var vehicleCatalog = []; var VEHICLE_CATALOG_PROCESSOR = "vGzx3jFnabGHQYqNW"; var locationOptions = ["Kingston", "Montego Bay", "Ocho Rios"]; var state = { phase: "checking", session: null, route: "dashboard", previous_route: "dashboard", route_params: {}, epoch: 0, mount_versions: {}, search_timer: null }; var titles = { dashboard: "Dashboard", mycars: "My Cars", tracking: "Tracking", clients: "Clients", admin: "Manage Users", settings: "Settings", car: "Order Details" }; var statusSteps = [ ["inBond", "In Bond"], ["cleared", "Cleared"], ["PDI", "PDI"], ["washStand", "Wash Stand"], ["tinting", "Tinting"], ["awaitingPickup", "Awaiting Pickup"], ["onItsWay", "On Its Way"], ["delivered", "Delivered"] ]; function clean(value) { return String(value === undefined || value === null ? "" : value).trim(); } function clearNode(node) { if (!node) { return; } while (node.firstChild) { node.removeChild(node.firstChild); } } function makeNode(tag, className, text) { var node = document.createElement(tag); if (className) { node.className = className; } if (text !== undefined && text !== null) { node.textContent = clean(text); } return node; } function safeImage(value) { var raw = clean(value); if (!raw) { return ""; } try { var parsed = new URL(raw, window.location.origin); if (parsed.protocol === "https:" || parsed.protocol === "http:") { return parsed.href; } } catch (ignored) { return ""; } return ""; } function readableError(response, fallback) { if (!response) { return fallback; } return clean(response.error || response.message || response.reason || fallback); } function callProcessor(processorId, input, callback) { var invocationEpoch = state.epoch; var settled = false; var timeoutId = null; function finish(response) { if (settled) { return; } settled = true; if (timeoutId) { clearTimeout(timeoutId); } if (state.epoch !== invocationEpoch) { return; } callback(response); } if (typeof phoros === "undefined" || !phoros || typeof phoros.processor !== "function") { finish({ success: false, error: "The secure processor client is unavailable.", error_code: "CLIENT_UNAVAILABLE" }); return; } timeoutId = setTimeout(function () { finish({ success: false, error: "The secure request timed out. Please try again.", error_code: "REQUEST_TIMEOUT" }); }, 8000); try { phoros.processor(processorId, input, function (error, response) { if (error) { finish({ success: false, error: readableError(error, "The secure request failed."), error_code: "REQUEST_FAILED" }); return; } if (!response || response.success !== true) { finish(response || { success: false, error: "The secure request returned no response.", error_code: "EMPTY_RESPONSE" }); return; } finish(response); }); } catch (error) { finish({ success: false, error: readableError(error, "The secure request failed."), error_code: "REQUEST_FAILED" }); } } function clearPrivateMounts() { var mounts = document.querySelectorAll(".atl-private-mount"); var index = 0; for (index = 0; index < mounts.length; index++) { clearNode(mounts[index]); } state.mount_versions = {}; closeModal("atl-order-modal"); closeModal("atl-staff-modal"); closeModal("atl-help-modal"); } function closeModal(modalId) { var modal = document.getElementById(modalId); if (!modal) { return; } modal.hidden = true; var form = modal.querySelector("form"); if (form && typeof form.reset === "function") { form.reset(); } var message = modal.querySelector(".atl-form-message"); if (message) { message.textContent = ""; message.classList.remove("is-error"); } var submit = modal.querySelector('button[type="submit"]'); if (submit) { submit.disabled = false; } } function openModal(modalId, focusId) { var modal = document.getElementById(modalId); if (!modal) { return; } modal.hidden = false; setTimeout(function () { var focusTarget = document.getElementById(focusId); if (focusTarget && typeof focusTarget.focus === "function") { focusTarget.focus(); } }, 0); } function formValue(id, limit) { var field = document.getElementById(id); return field ? clean(field.value).slice(0, limit) : ""; } function setFormState(modalId, messageText, isError, isBusy) { var modal = document.getElementById(modalId); if (!modal) { return; } var message = modal.querySelector(".atl-form-message"); if (message) { message.textContent = clean(messageText); if (isError) { message.classList.add("is-error"); } else { message.classList.remove("is-error"); } } var submit = modal.querySelector('button[type="submit"]'); if (submit) { submit.disabled = isBusy === true; } } function setGateMessage(phase, message) { var gate = document.querySelector(".atl-gate-" + phase + " .atl-gate-message"); if (gate && message) { gate.textContent = message; } } function clearSessionChrome() { var buttons = document.querySelectorAll(".atl-nav [data-atl-route]"); var index = 0; for (index = 0; index < buttons.length; index++) { buttons[index].classList.remove("is-visible"); buttons[index].classList.remove("is-active"); } var helpButton = document.querySelector(".atl-nav [data-atl-help]"); if (helpButton) { helpButton.classList.remove("is-visible"); } var nameNode = document.querySelector(".atl-user-name"); var roleNode = document.querySelector(".atl-user-role"); var searchWrap = document.querySelector(".atl-search"); var searchInput = document.querySelector(".atl-search input"); if (nameNode) { nameNode.textContent = ""; } if (roleNode) { roleNode.textContent = ""; } if (searchWrap) { searchWrap.hidden = true; } if (searchInput) { searchInput.value = ""; } } function setPhase(phase, message) { state.phase = phase; document.body.setAttribute("data-atl-phase", phase); if (phase !== "ready") { clearPrivateMounts(); clearSessionChrome(); } if (message) { setGateMessage(phase, message); } } function hasRoute(route) { if (!state.session) { return false; } if (route === "car") { return true; } return state.session.routes && state.session.routes.indexOf(route) !== -1; } function renderSession() { var session = state.session || {}; var buttons = document.querySelectorAll(".atl-nav [data-atl-route]"); var index = 0; for (index = 0; index < buttons.length; index++) { var route = buttons[index].getAttribute("data-atl-route"); if (hasRoute(route)) { buttons[index].classList.add("is-visible"); } else { buttons[index].classList.remove("is-visible"); } } var nameNode = document.querySelector(".atl-user-name"); var roleNode = document.querySelector(".atl-user-role"); if (nameNode) { nameNode.textContent = clean(session.full_name || "ATL team member"); } if (roleNode) { roleNode.textContent = session.roles && session.roles.length ? session.roles.join(" · ").replace("sales_rep", "Sales Rep").replace("agent", "Agent").replace("admin", "Admin") : "Authorized staff"; } var helpButton = document.querySelector(".atl-nav [data-atl-help]"); if (helpButton) { helpButton.classList.add("is-visible"); } } function setRouteChrome(route) { var titleNode = document.querySelector(".atl-route-title"); if (titleNode) { titleNode.textContent = titles[route] || "PDI Dashboard"; } var buttons = document.querySelectorAll(".atl-nav [data-atl-route]"); var index = 0; for (index = 0; index < buttons.length; index++) { if (buttons[index].getAttribute("data-atl-route") === route) { buttons[index].classList.add("is-active"); } else { buttons[index].classList.remove("is-active"); } } var searchWrap = document.querySelector(".atl-search"); if (searchWrap) { searchWrap.hidden = ["dashboard", "mycars", "tracking", "clients", "admin"].indexOf(route) === -1; } var searchInput = document.querySelector(".atl-search input"); if (searchInput) { searchInput.value = ""; } hideSearchSections(); } function renderState(mount, text, retryFunction) { if (!mount) { return; } clearNode(mount); var wrapper = makeNode("div", "atl-state", text); if (retryFunction) { var button = makeNode("button", "", "Try again"); button.type = "button"; button.onclick = retryFunction; wrapper.appendChild(button); } mount.appendChild(wrapper); } function isDateOnlyValue(value) { return typeof value === "string" && (/^\d{4}-\d{2}-\d{2}$/).test(clean(value)); } function parseDateValue(value) { if (isDateOnlyValue(value)) { var parts = clean(value).split("-"); return new Date(Number(parts[0]), Number(parts[1]) - 1, Number(parts[2])); } return new Date(value); } function formatDate(value) { if (!value) { return "—"; } var parsed = parseDateValue(value); if (isNaN(parsed.getTime())) { return clean(value) || "—"; } return parsed.toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" }); } function formatDateTime(value) { if (!value) { return "—"; } var parsed = parseDateValue(value); if (isNaN(parsed.getTime())) { return clean(value) || "—"; } if (isDateOnlyValue(value)) { return parsed.toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" }); } return parsed.toLocaleString(undefined, { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "2-digit" }); } function openOrder(orderId) { navigate("car", { order_id: orderId }); } function appendImage(container, entry, detailMode) { var source = safeImage(entry.image_url); if (!source) { var placeholder = makeNode("div", detailMode ? "atl-order-image-placeholder atl-detail-image" : "atl-order-image-placeholder", ""); var icon = makeNode("i", "car icon", ""); placeholder.appendChild(icon); container.appendChild(placeholder); return; } var picture = makeNode("img", detailMode ? "atl-detail-image" : "atl-order-image", ""); picture.alt = clean(entry.brand + " " + entry.model) || "Vehicle"; picture.src = source; picture.onerror = function () { picture.removeAttribute("src"); picture.alt = "Vehicle image unavailable"; }; container.appendChild(picture); } function closeStatusPane() { var pane = document.getElementById("atl-status-pane"); if (pane) { pane.hidden = true; } state.pane_order_id = ""; } function updatePaneStatus(orderId, statusKey) { var actions = document.getElementById("atl-status-pane-actions"); if (actions) { clearNode(actions); actions.appendChild(makeNode("div", "atl-pane-note", "Saving…")); } callProcessor(ORDERS_PROCESSOR, { action: "update_status", payload: { order_id: orderId, status: statusKey } }, function (response) { if (!response || response.success !== true) { if (actions) { clearNode(actions); actions.appendChild(makeNode("div", "atl-pane-error", readableError(response, "That status could not be saved."))); } return; } renderStatusPane(response.data.order); loadRoute("tracking"); }); } function addPaneComment(orderId, text) { callProcessor(ORDERS_PROCESSOR, { action: "add_comment", payload: { order_id: orderId, comment: text } }, function (response) { if (!response || response.success !== true) { var body = document.getElementById("atl-status-pane-body"); if (body) { body.appendChild(makeNode("div", "atl-pane-error", readableError(response, "That note could not be saved."))); } return; } renderStatusPane(response.data.order); }); } function appendPaneNotes(body, entry) { var section = makeNode("div", "atl-pane-notes", ""); section.appendChild(makeNode("div", "atl-pane-notes-title", "Progress notes")); var comments = entry.comments || []; if (!comments.length) { section.appendChild(makeNode("div", "atl-pane-note", "No notes yet.")); } else { var index = 0; for (index = comments.length - 1; index >= 0; index--) { var item = makeNode("div", "atl-pane-comment", ""); item.appendChild(makeNode("div", "atl-pane-comment-meta", clean(comments[index].author) || "Staff")); item.appendChild(makeNode("div", "atl-pane-comment-text", clean(comments[index].text))); section.appendChild(item); } } var canComment = state.session && state.session.capabilities && state.session.capabilities.change_status; if (canComment) { var box = document.createElement("textarea"); box.className = "atl-pane-comment-box"; box.rows = 3; box.maxLength = 2000; box.placeholder = "What stage is the car at? Add the reason for a delay here."; section.appendChild(box); var send = makeNode("button", "atl-pane-comment-send", "Add note"); send.type = "button"; send.onclick = function () { var text = clean(box.value); if (!text) { return; } addPaneComment(entry.id, text); }; section.appendChild(send); } body.appendChild(section); } function renderStatusPane(entry) { var pane = document.getElementById("atl-status-pane"); if (!pane) { return; } state.pane_order_id = entry.id; var title = document.getElementById("atl-status-pane-title"); var sub = document.getElementById("atl-status-pane-sub"); var body = document.getElementById("atl-status-pane-body"); var actions = document.getElementById("atl-status-pane-actions"); if (title) { title.textContent = entry.customer_name || "Unnamed customer"; } if (sub) { sub.textContent = clean(entry.brand + " " + entry.model) || "Vehicle not assigned"; } if (body) { clearNode(body); var thumb = makeNode("div", "atl-pane-thumb", ""); appendImage(thumb, entry, false); body.appendChild(thumb); body.appendChild(makeNode("div", "atl-pane-meta", [entry.stock_number, entry.location, entry.department].filter(function (value) { return clean(value); }).join(" · "))); body.appendChild(makeNode("div", "atl-pane-meta", "Requested " + formatDateTime(entry.date_requested))); var open = makeNode("button", "atl-pane-open", "Open the full order"); open.type = "button"; open.onclick = function () { closeStatusPane(); openOrder(entry.id); }; body.appendChild(open); appendPaneNotes(body, entry); } if (actions) { clearNode(actions); var canChange = state.session && state.session.capabilities && state.session.capabilities.change_status; if (!canChange) { actions.appendChild(makeNode("div", "atl-pane-note", "You can view this order but not change its status.")); } else { var index = 0; for (index = 0; index < statusSteps.length; index++) { (function (step) { var enabled = entry.status_log && entry.status_log[step[0]]; var button = makeNode("button", "atl-pane-status" + (enabled ? " is-complete" : ""), step[1]); button.type = "button"; button.onclick = function () { updatePaneStatus(entry.id, step[0]); }; actions.appendChild(button); }(statusSteps[index])); } } } pane.hidden = false; } function openStatusPane(orderId) { var pane = document.getElementById("atl-status-pane"); var body = document.getElementById("atl-status-pane-body"); var actions = document.getElementById("atl-status-pane-actions"); if (pane) { pane.hidden = false; } if (actions) { clearNode(actions); } if (body) { clearNode(body); body.appendChild(makeNode("div", "atl-pane-note", "Loading…")); } callProcessor(ORDERS_PROCESSOR, { action: "detail", payload: { order_id: orderId } }, function (response) { if (!response || response.success !== true) { if (body) { clearNode(body); body.appendChild(makeNode("div", "atl-pane-error", readableError(response, "That order could not be loaded."))); } return; } renderStatusPane(response.data.order); }); } function renderCards(mount, entries) { var grid = makeNode("div", "atl-card-grid", ""); var index = 0; var isTracking = state.route === "tracking"; for (index = 0; index < entries.length; index++) { (function (entry) { var card = makeNode("article", "atl-order-card", ""); card.tabIndex = 0; var activate = function () { if (isTracking) { openStatusPane(entry.id); } else { openOrder(entry.id); } }; card.onclick = activate; card.onkeydown = function (event) { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); activate(); } }; appendImage(card, entry, false); var body = makeNode("div", "atl-order-body", ""); var top = makeNode("div", "atl-card-topline", ""); var identity = makeNode("div", "atl-card-identity", ""); identity.appendChild(makeNode("div", "atl-order-name", entry.customer_name || "Unnamed customer")); var customerReference = clean(entry.customer_number); var stockReference = clean(entry.stock_number); if (customerReference || !stockReference) { identity.appendChild(makeNode("div", "atl-order-number", customerReference || "No reference")); } if (stockReference) { var stockLine = makeNode("div", "atl-order-stock", ""); stockLine.appendChild(makeNode("span", "atl-order-stock-label", "Stock")); stockLine.appendChild(makeNode("span", "atl-order-stock-value", stockReference)); identity.appendChild(stockLine); } top.appendChild(identity); var badges = makeNode("div", "atl-card-badges", ""); badges.appendChild(makeNode("span", "atl-status-badge", entry.status_label || "Pending")); if (isTracking) { var pencil = makeNode("button", "atl-card-pencil", "✎"); pencil.type = "button"; pencil.title = "Open the full order"; pencil.onclick = function (event) { event.stopPropagation(); openOrder(entry.id); }; badges.appendChild(pencil); } top.appendChild(badges); body.appendChild(top); var vehicle = makeNode("div", "atl-order-vehicle", clean(entry.brand + " " + entry.model) || "Vehicle not assigned"); if (entry.is_escalated) { vehicle.appendChild(makeNode("span", "atl-escalated", "Escalated")); } body.appendChild(vehicle); body.appendChild(makeNode("div", "atl-order-meta", [entry.location, entry.department, formatDate(entry.date_requested)].filter(function (value) { return clean(value); }).join(" · "))); card.appendChild(body); grid.appendChild(card); }(entries[index])); } mount.appendChild(grid); } function appendPagination(mount, pagination, retryFunction) { if (!pagination || pagination.total_pages <= 1) { return; } var pager = makeNode("div", "atl-pagination", ""); var previous = makeNode("button", "", "Previous"); previous.type = "button"; previous.disabled = pagination.page <= 1; previous.onclick = function () { retryFunction(pagination.page - 1); }; var next = makeNode("button", "", "Next"); next.type = "button"; next.disabled = pagination.page >= pagination.total_pages; next.onclick = function () { retryFunction(pagination.page + 1); }; pager.appendChild(previous); pager.appendChild(makeNode("span", "", "Page " + pagination.page + " of " + pagination.total_pages)); pager.appendChild(next); mount.appendChild(pager); } function loadOrders(mountId, lane, page, limit, mode, searchTerm) { var mount = document.getElementById(mountId); if (!mount || state.phase !== "ready") { return; } var version = (state.mount_versions[mountId] || 0) + 1; state.mount_versions[mountId] = version; renderState(mount, "Loading secure ATL records…", null); var action = searchTerm ? "search" : "list"; callProcessor(ORDERS_PROCESSOR, { action: action, payload: { lane: lane, page: page, limit: limit, search: searchTerm || "" } }, function (response) { if (state.mount_versions[mountId] !== version || state.phase !== "ready") { return; } if (!response || response.success !== true) { renderState(mount, readableError(response, "Orders could not load."), function () { loadOrders(mountId, lane, page, limit, mode, searchTerm); }); return; } var resultBody = response.data || {}; var entries = resultBody.items || []; clearNode(mount); if (!entries.length) { renderState(mount, searchTerm ? "No permitted orders match this search." : "No orders are in this view yet.", null); return; } if (mode === "clients") { renderClients(mount, entries); } else { renderCards(mount, entries); } appendPagination(mount, resultBody.pagination, function (nextPage) { loadOrders(mountId, lane, nextPage, limit, mode, searchTerm); }); }); } function renderClients(mount, entries) { var seen = {}; var rows = []; var index = 0; for (index = 0; index < entries.length; index++) { var key = clean(entries[index].customer_number || entries[index].customer_name).toLowerCase(); if (!key || seen[key]) { continue; } seen[key] = true; rows.push(entries[index]); } if (!rows.length) { renderState(mount, "No client records are in your permitted order scope.", null); return; } var wrapper = makeNode("div", "atl-table-wrap", ""); var table = makeNode("table", "atl-table", ""); var head = makeNode("thead", "", ""); var headRow = makeNode("tr", "", ""); ["Customer", "Customer no.", "Vehicle", "Sales person", ""].forEach(function (label) { headRow.appendChild(makeNode("th", "", label)); }); head.appendChild(headRow); table.appendChild(head); var body = makeNode("tbody", "", ""); for (index = 0; index < rows.length; index++) { (function (entry) { var row = makeNode("tr", "", ""); row.appendChild(makeNode("td", "", entry.customer_name || "—")); row.appendChild(makeNode("td", "", entry.customer_number || "—")); row.appendChild(makeNode("td", "", clean(entry.brand + " " + entry.model) || "—")); row.appendChild(makeNode("td", "", entry.sales_person || "Unassigned")); var actionCell = makeNode("td", "", ""); var open = makeNode("button", "atl-secondary-button", "Open order"); open.type = "button"; open.onclick = function () { openOrder(entry.id); }; actionCell.appendChild(open); row.appendChild(actionCell); body.appendChild(row); }(rows[index])); } table.appendChild(body); wrapper.appendChild(table); mount.appendChild(wrapper); } function staffRoleCheckbox(container, label, checked) { var wrap = makeNode("label", "atl-staff-role", ""); var box = document.createElement("input"); box.type = "checkbox"; box.value = label; box.checked = checked; wrap.appendChild(box); wrap.appendChild(makeNode("span", "", label)); container.appendChild(wrap); return box; } function staffActionButton(label, className, handler) { var button = makeNode("button", className, label); button.type = "button"; button.onclick = handler; return button; } function saveStaff(staffId, roles, page, searchTerm) { callProcessor(STAFF_PROCESSOR, { action: "update", payload: { staff_id: staffId, roles: roles } }, function (response) { if (!response || response.success !== true) { renderState(document.getElementById("atl-staff"), readableError(response, "That change could not be saved."), function () { state.staff_editing = ""; loadStaff(page, searchTerm); }); return; } state.staff_editing = ""; loadStaff(page, searchTerm); }); } function removeStaff(staffId, page, searchTerm) { callProcessor(STAFF_PROCESSOR, { action: "remove", payload: { staff_id: staffId } }, function (response) { if (!response || response.success !== true) { renderState(document.getElementById("atl-staff"), readableError(response, "That person could not be removed."), function () { state.staff_confirming = ""; loadStaff(page, searchTerm); }); return; } state.staff_confirming = ""; loadStaff(page, searchTerm); }); } function staffRow(entry, you, page, searchTerm) { var row = makeNode("tr", "", ""); var isYou = you !== "" && clean(entry.email) === you; row.appendChild(makeNode("td", "", entry.full_name || "Unnamed")); row.appendChild(makeNode("td", "", entry.email || "—")); var rolesCell = makeNode("td", "", ""); var actionsCell = makeNode("td", "atl-staff-actions", ""); if (state.staff_editing === entry.id) { var boxes = []; var current = entry.roles || []; ["Agent", "Sales Rep", "Admin"].forEach(function (label) { boxes.push(staffRoleCheckbox(rolesCell, label, current.indexOf(label) !== -1)); }); actionsCell.appendChild(staffActionButton("Save", "atl-staff-btn atl-staff-btn-primary", function () { var chosen = []; var boxIndex = 0; for (boxIndex = 0; boxIndex < boxes.length; boxIndex++) { if (boxes[boxIndex].checked) { chosen.push(boxes[boxIndex].value); } } saveStaff(entry.id, chosen, page, searchTerm); })); actionsCell.appendChild(staffActionButton("Cancel", "atl-staff-btn", function () { state.staff_editing = ""; loadStaff(page, searchTerm); })); } else if (state.staff_confirming === entry.id) { rolesCell.textContent = "Remove this person's access?"; actionsCell.appendChild(staffActionButton("Remove", "atl-staff-btn atl-staff-btn-danger", function () { removeStaff(entry.id, page, searchTerm); })); actionsCell.appendChild(staffActionButton("Keep", "atl-staff-btn", function () { state.staff_confirming = ""; loadStaff(page, searchTerm); })); } else { rolesCell.textContent = entry.roles && entry.roles.length ? entry.roles.join(", ") : "No role"; if (isYou) { actionsCell.appendChild(makeNode("span", "atl-staff-you", "you")); } actionsCell.appendChild(staffActionButton("Edit", "atl-staff-btn", function () { state.staff_confirming = ""; state.staff_editing = entry.id; loadStaff(page, searchTerm); })); if (!isYou) { actionsCell.appendChild(staffActionButton("Remove", "atl-staff-btn atl-staff-btn-danger", function () { state.staff_editing = ""; state.staff_confirming = entry.id; loadStaff(page, searchTerm); })); } } row.appendChild(rolesCell); row.appendChild(actionsCell); return row; } function loadStaff(page, searchTerm) { var mount = document.getElementById("atl-staff"); if (!mount || state.phase !== "ready") { return; } var mountId = "atl-staff"; var version = (state.mount_versions[mountId] || 0) + 1; state.mount_versions[mountId] = version; renderState(mount, "Loading authorized staff…", null); callProcessor(STAFF_PROCESSOR, { action: searchTerm ? "search" : "list", payload: { page: page, limit: 25, search: searchTerm || "" } }, function (response) { if (state.mount_versions[mountId] !== version || state.phase !== "ready") { return; } if (!response || response.success !== true) { renderState(mount, readableError(response, "Staff could not load."), function () { loadStaff(page, searchTerm); }); return; } var resultBody = response.data || {}; var entries = resultBody.items || []; var you = clean(resultBody.you); clearNode(mount); if (!entries.length) { renderState(mount, searchTerm ? "No staff match that search." : "No staff records were found.", null); return; } var wrapper = makeNode("div", "atl-table-wrap", ""); var table = makeNode("table", "atl-table", ""); var head = makeNode("thead", "", ""); var headRow = makeNode("tr", "", ""); ["Name", "Email", "Roles", ""].forEach(function (label) { headRow.appendChild(makeNode("th", "", label)); }); head.appendChild(headRow); table.appendChild(head); var body = makeNode("tbody", "", ""); var index = 0; for (index = 0; index < entries.length; index++) { body.appendChild(staffRow(entries[index], you, page, searchTerm)); } table.appendChild(body); wrapper.appendChild(table); mount.appendChild(wrapper); appendPagination(mount, resultBody.pagination, function (nextPage) { loadStaff(nextPage, searchTerm); }); }); } function appendDetailField(grid, label, value) { var field = makeNode("div", "atl-detail-field", ""); field.appendChild(makeNode("div", "atl-detail-label", label)); field.appendChild(makeNode("div", "atl-detail-value", clean(value) || "—")); grid.appendChild(field); } function renderDetail(entry) { var mount = document.getElementById("atl-order-detail"); if (!mount) { return; } clearNode(mount); var detail = makeNode("article", "atl-detail", ""); var hero = makeNode("div", "atl-detail-hero", ""); appendImage(hero, entry, true); var summary = makeNode("div", "atl-detail-summary", ""); summary.appendChild(makeNode("div", "atl-eyebrow", entry.stock_number || "ATL PDI order")); summary.appendChild(makeNode("h2", "", entry.customer_name || "Unnamed customer")); summary.appendChild(makeNode("div", "atl-order-vehicle", clean(entry.brand + " " + entry.model) || "Vehicle not assigned")); summary.appendChild(makeNode("div", "atl-order-meta", (entry.status_label || "Pending") + " · " + (entry.sales_person || "Unassigned"))); var actions = makeNode("div", "atl-detail-actions", ""); var back = makeNode("button", "", "Back"); back.type = "button"; back.onclick = function () { navigate(hasRoute(state.previous_route) ? state.previous_route : "dashboard"); }; actions.appendChild(back); if (!entry.is_escalated && state.session && state.session.capabilities && state.session.capabilities.escalate) { var escalate = makeNode("button", "", "Escalate"); escalate.type = "button"; escalate.onclick = function () { escalateOrder(entry.id); }; actions.appendChild(escalate); } else if (entry.is_escalated) { actions.appendChild(makeNode("span", "atl-status-badge", "Escalated")); } summary.appendChild(actions); var steps = makeNode("div", "atl-status-grid", ""); var index = 0; for (index = 0; index < statusSteps.length; index++) { (function (step) { var enabled = entry.status_log && entry.status_log[step[0]]; var canChange = state.session && state.session.capabilities && state.session.capabilities.change_status; var statusNode = makeNode(canChange ? "button" : "div", "atl-status-step" + (enabled ? " is-complete" : ""), step[1]); if (canChange) { statusNode.type = "button"; statusNode.onclick = function () { updateStatus(entry.id, step[0]); }; } steps.appendChild(statusNode); }(statusSteps[index])); } summary.appendChild(steps); hero.appendChild(summary); detail.appendChild(hero); var grid = makeNode("div", "atl-detail-grid", ""); appendDetailField(grid, "Customer number", entry.customer_number); appendDetailField(grid, "Stock number", entry.stock_number); appendDetailField(grid, "Chassis number", entry.chassis_number); appendDetailField(grid, "Location", entry.location); appendDetailField(grid, "Department", entry.department); appendDetailField(grid, "Colour", entry.colour); appendDetailField(grid, "Date requested", formatDateTime(entry.date_requested)); appendDetailField(grid, "Date booked", formatDate(entry.date_booked)); appendDetailField(grid, "Work description", entry.work_description); appendDetailField(grid, "Parts / accessories", entry.parts_accessories); detail.appendChild(grid); appendComments(detail, entry); mount.appendChild(detail); } function addComment(orderId, text) { var mount = document.getElementById("atl-order-detail"); renderState(mount, "Saving note…", null); callProcessor(ORDERS_PROCESSOR, { action: "add_comment", payload: { order_id: orderId, comment: text } }, function (response) { if (!response || response.success !== true) { renderState(mount, readableError(response, "That note could not be saved."), function () { loadDetail(orderId); }); return; } renderDetail(response.data.order); }); } function appendComments(detail, entry) { var section = makeNode("section", "atl-comments", ""); section.appendChild(makeNode("h3", "atl-comments-title", "Progress notes")); var list = makeNode("div", "atl-comments-list", ""); var comments = entry.comments || []; if (!comments.length) { list.appendChild(makeNode("div", "atl-comments-empty", "No notes yet.")); } else { var index = 0; for (index = comments.length - 1; index >= 0; index--) { var item = makeNode("div", "atl-comment", ""); item.appendChild(makeNode("div", "atl-comment-meta", clean(comments[index].author) || "Staff")); item.appendChild(makeNode("div", "atl-comment-text", clean(comments[index].text))); list.appendChild(item); } } section.appendChild(list); var canComment = state.session && state.session.capabilities && state.session.capabilities.change_status; if (canComment) { var box = document.createElement("textarea"); box.className = "atl-comment-box"; box.rows = 3; box.maxLength = 2000; box.placeholder = "What stage is the car at? Add anything useful here, including the reason for a delay."; section.appendChild(box); var actions = makeNode("div", "atl-comment-actions", ""); var send = makeNode("button", "atl-comment-send", "Add note"); send.type = "button"; send.onclick = function () { var text = clean(box.value); if (!text) { return; } addComment(entry.id, text); }; actions.appendChild(send); section.appendChild(actions); } detail.appendChild(section); } function loadDetail(orderId) { var mount = document.getElementById("atl-order-detail"); if (!mount || state.phase !== "ready") { return; } renderState(mount, "Loading secure order details…", null); callProcessor(ORDERS_PROCESSOR, { action: "detail", payload: { order_id: orderId } }, function (response) { if (!response || response.success !== true) { renderState(mount, readableError(response, "Order details could not load."), function () { loadDetail(orderId); }); return; } renderDetail(response.data.order); }); } function updateStatus(orderId, statusKey) { var mount = document.getElementById("atl-order-detail"); renderState(mount, "Saving status…", null); callProcessor(ORDERS_PROCESSOR, { action: "update_status", payload: { order_id: orderId, status: statusKey } }, function (response) { if (!response || response.success !== true) { renderState(mount, readableError(response, "Status could not be saved."), function () { loadDetail(orderId); }); return; } renderDetail(response.data.order); }); } function escalateOrder(orderId) { var mount = document.getElementById("atl-order-detail"); renderState(mount, "Escalating order…", null); callProcessor(ORDERS_PROCESSOR, { action: "escalate", payload: { order_id: orderId } }, function (response) { if (!response || response.success !== true) { renderState(mount, readableError(response, "The order could not be escalated."), function () { loadDetail(orderId); }); return; } renderDetail(response.data.order); }); } function loadRoute(route) { if (state.phase !== "ready" || !hasRoute(route)) { if (state.phase === "ready") { navigate("dashboard"); } return; } setRouteChrome(route); if (route === "dashboard") { loadOrders("atl-dashboard-recent", "recent", 1, 6, "cards", ""); loadOrders("atl-dashboard-all", "current", 1, 12, "cards", ""); loadOrders("atl-dashboard-completed", "completed", 1, 6, "cards", ""); } else if (route === "mycars") { loadOrders("atl-mycars-current", "current", 1, 12, "cards", ""); loadOrders("atl-mycars-completed", "completed", 1, 12, "cards", ""); } else if (route === "tracking") { loadOrders("atl-tracking-escalated", "escalated", 1, 12, "cards", ""); loadOrders("atl-tracking-current", "current", 1, 12, "cards", ""); } else if (route === "clients") { loadOrders("atl-clients", "all", 1, 48, "clients", ""); } else if (route === "admin") { loadStaff(1, ""); } else if (route === "car") { var orderId = clean(state.route_params.order_id); if (!orderId) { var mount = document.getElementById("atl-order-detail"); renderState(mount, "No order was selected.", function () { navigate("dashboard"); }); } else { loadDetail(orderId); } } } function hideSearchSections() { ["atl-dashboard-search-section", "atl-mycars-search-section", "atl-tracking-search-section"].forEach(function (sectionId) { var section = document.getElementById(sectionId); if (section) { section.hidden = true; } }); } function queueSearch(value) { var term = clean(value).slice(0, 100); if (state.search_timer) { clearTimeout(state.search_timer); state.search_timer = null; } if (state.route === "admin") { state.search_timer = setTimeout(function () { state.staff_editing = ""; state.staff_confirming = ""; loadStaff(1, term); }, 280); return; } if (state.route === "clients") { state.search_timer = setTimeout(function () { loadOrders("atl-clients", "all", 1, 48, "clients", term); }, 280); return; } var mapping = { dashboard: ["atl-dashboard-search-section", "atl-dashboard-search"], mycars: ["atl-mycars-search-section", "atl-mycars-search"], tracking: ["atl-tracking-search-section", "atl-tracking-search"] }; var target = mapping[state.route]; if (!target) { return; } var section = document.getElementById(target[0]); if (!term) { if (section) { section.hidden = true; } return; } state.search_timer = setTimeout(function () { if (section) { section.hidden = false; } loadOrders(target[1], "all", 1, 24, "cards", term); }, 280); } function resolveSecureSession() { var requestEpoch = state.epoch + 1; state.epoch = requestEpoch; setPhase("checking", ""); callProcessor(ACCESS_PROCESSOR, { action: "session" }, function (response) { if (state.epoch !== requestEpoch) { return; } if (!response || response.success !== true) { state.session = null; if (response && response.error_code === "AUTH_REQUIRED") { setPhase("signed-out", readableError(response, "Sign in is required.")); } else if (response && (response.error_code === "FORBIDDEN" || response.error_code === "WRONG_APP_SCOPE")) { setPhase("forbidden", readableError(response, "This account is not authorized for ATL PDI.")); } else { setPhase("error", readableError(response, "The secure session check did not complete.")); } return; } state.session = response.data; renderSession(); setPhase("ready", ""); var current = state.route; if (!hasRoute(current)) { navigate("dashboard"); } else { loadRoute(current); } }); } function retry() { state.session = null; state.epoch += 1; resolveSecureSession(); } function navigate(route, routeParams) { if (state.phase !== "ready" || !hasRoute(route)) { return; } closeModal("atl-order-modal"); closeModal("atl-staff-modal"); phoros.page.change(route, routeParams || {}); } function page() { var current = typeof phoros !== "undefined" && phoros.page && typeof phoros.page.name === "function" ? clean(phoros.page.name()) : ""; if (current && current !== "app") { state.route = current; } if (state.phase === "ready") { loadRoute(state.route); } } function signIn() { if (typeof phoros !== "undefined" && phoros && typeof phoros.person === "function") { phoros.person(true); } } function signOut() { if (typeof phoros !== "undefined" && phoros && typeof phoros.signOut === "function") { phoros.signOut(); } } function openAccount() { navigate("settings"); } function loadVehicleCatalog(callback) { callProcessor(VEHICLE_CATALOG_PROCESSOR, {}, function (response) { var loaded = !!(response && response.success === true && response.catalog && response.catalog.length); if (loaded) { vehicleCatalog = response.catalog; } callback(loaded); }); } function newOrder() { if (state.phase === "ready") { var requestedField = document.getElementById("atl-order-date-requested"); if (requestedField) { requestedField.value = formatDateTime(new Date().getTime()); } fillSelect(document.getElementById("atl-order-brand"), [], "", "Loading the brand list..."); fillSelect(document.getElementById("atl-order-model"), [], "", "Choose a brand first"); fillSelect(document.getElementById("atl-order-location"), locationOptions, "Select a location", ""); openModal("atl-order-modal", "atl-order-stock"); loadVehicleCatalog(function (loaded) { if (!loaded) { fillSelect(document.getElementById("atl-order-brand"), [], "", "Could not load the brand list. Close and reopen."); return; } resetOrderSelects(); }); } } function buildHelpCard(entry) { var card = makeNode("div", "atl-help-card", null); card.appendChild(makeNode("h3", "atl-help-name", entry.name)); card.appendChild(makeNode("p", "atl-help-summary", entry.summary)); var links = makeNode("div", "atl-help-links", null); var openLink = document.createElement("a"); openLink.className = "atl-help-open"; openLink.href = entry.guide; openLink.target = "_blank"; openLink.rel = "noopener"; openLink.textContent = "Open the guide"; links.appendChild(openLink); var printLink = document.createElement("a"); printLink.className = "atl-help-print"; printLink.href = entry.printable; printLink.target = "_blank"; printLink.rel = "noopener"; printLink.textContent = "Printable PDF"; links.appendChild(printLink); card.appendChild(links); return card; } function openHelp() { if (state.phase !== "ready") { return; } var list = document.getElementById("atl-help-list"); var intro = document.querySelector("#atl-help-modal .atl-help-intro"); if (!list) { return; } clearNode(list); var roles = state.session && state.session.roles ? state.session.roles : []; var matched = []; var index = 0; for (index = 0; index < helpGuides.length; index++) { if (roles.indexOf(helpGuides[index].role) !== -1) { matched.push(helpGuides[index]); } } if (intro) { intro.textContent = matched.length > 1 ? "You hold more than one ATL role, so more than one guide applies to you. Each one covers only what that role can reach." : "A step-by-step walk through your role on the PDI dashboard, using the screens you will actually see."; } if (!matched.length) { list.appendChild(makeNode("p", "atl-help-empty", "No guide is available for this account yet. Please ask an administrator to check your ATL roles.")); openModal("atl-help-modal", "atl-help-close"); return; } for (index = 0; index < matched.length; index++) { list.appendChild(buildHelpCard(matched[index])); } openModal("atl-help-modal", "atl-help-close"); } function fillSelect(node, options, placeholder, emptyLabel) { if (!node) { return; } clearNode(node); var head = makeNode("option", "", options.length ? placeholder : emptyLabel); head.value = ""; if (!options.length) { head.disabled = true; } node.appendChild(head); var index = 0; for (index = 0; index < options.length; index++) { var choice = makeNode("option", "", options[index]); choice.value = options[index]; node.appendChild(choice); } } function modelsForBrand(brand) { var index = 0; for (index = 0; index < vehicleCatalog.length; index++) { if (vehicleCatalog[index].brand === brand) { return vehicleCatalog[index].models; } } return []; } function brandChanged() { var brandNode = document.getElementById("atl-order-brand"); var modelNode = document.getElementById("atl-order-model"); var brand = brandNode ? clean(brandNode.value) : ""; if (!brand) { fillSelect(modelNode, [], "", "Choose a brand first"); return; } fillSelect(modelNode, modelsForBrand(brand), "Select a model", "No models set up for this brand yet"); } function resetOrderSelects() { var brands = []; var index = 0; for (index = 0; index < vehicleCatalog.length; index++) { brands.push(vehicleCatalog[index].brand); } fillSelect(document.getElementById("atl-order-brand"), brands, "Select a brand", ""); brandChanged(); fillSelect(document.getElementById("atl-order-location"), locationOptions, "Select a location", ""); } function newStaff() { if (state.phase === "ready" && state.session && state.session.capabilities && state.session.capabilities.view_admin) { openModal("atl-staff-modal", "atl-staff-first-name"); } } function submitOrder(event) { if (event && typeof event.preventDefault === "function") { event.preventDefault(); } if (state.phase !== "ready") { return false; } var payload = { stock_number: formValue("atl-order-stock", 80), chassis_number: formValue("atl-order-chassis", 120), customer_name: formValue("atl-order-customer-name", 160), customer_number: formValue("atl-order-customer-number", 80), brand: formValue("atl-order-brand", 80), model: formValue("atl-order-model", 120), colour: formValue("atl-order-colour", 80), location: formValue("atl-order-location", 120), department: formValue("atl-order-department", 120), date_booked: formValue("atl-order-date-booked", 30), parts_accessories: formValue("atl-order-parts", 1000), work_description: formValue("atl-order-work", 2000) }; if (!payload.stock_number) { setFormState("atl-order-modal", "Stock number is required.", true, false); return false; } setFormState("atl-order-modal", "Creating the private order…", false, true); callProcessor(ORDERS_PROCESSOR, { action: "create", payload: payload }, function (response) { if (!response || response.success !== true) { setFormState("atl-order-modal", readableError(response, "The order could not be created."), true, false); return; } closeModal("atl-order-modal"); loadRoute(state.route); }); return false; } function submitStaff(event) { if (event && typeof event.preventDefault === "function") { event.preventDefault(); } if (state.phase !== "ready" || !state.session || !state.session.capabilities || !state.session.capabilities.view_admin) { return false; } var roles = []; var roleSales = document.getElementById("atl-staff-role-sales"); var roleAgent = document.getElementById("atl-staff-role-agent"); var roleAdmin = document.getElementById("atl-staff-role-admin"); if (roleSales && roleSales.checked) { roles.push("Sales Rep"); } if (roleAgent && roleAgent.checked) { roles.push("Agent"); } if (roleAdmin && roleAdmin.checked) { roles.push("Admin"); } var payload = { first_name: formValue("atl-staff-first-name", 80), last_name: formValue("atl-staff-last-name", 80), email: formValue("atl-staff-email", 254), roles: roles }; if (!payload.first_name || !payload.last_name || !payload.email || !roles.length) { setFormState("atl-staff-modal", "First name, last name, email and at least one role are required.", true, false); return false; } setFormState("atl-staff-modal", "Creating the staff member…", false, true); callProcessor(STAFF_PROCESSOR, { action: "create", payload: payload }, function (response) { if (!response || response.success !== true) { setFormState("atl-staff-modal", readableError(response, "The staff member could not be created."), true, false); return; } closeModal("atl-staff-modal"); loadStaff(1, ""); }); return false; } function start() { document.body.setAttribute("data-atl-phase", "checking"); var current = typeof phoros !== "undefined" && phoros.page && typeof phoros.page.name === "function" ? clean(phoros.page.name()) : ""; if (current && current !== "app") { state.route = current; } phoros.on.afterRoute = function (route, routeParams) { if (state.route !== route && state.route !== "car") { state.previous_route = state.route; } state.route = route; state.route_params = routeParams || {}; if (state.phase === "ready") { loadRoute(route); } }; phoros.on.signedIn = function () { retry(); }; phoros.on.signedOut = function () { state.epoch += 1; state.session = null; setPhase("signed-out", ""); }; phoros.on.personChanged = function () { retry(); }; resolveSecureSession(); } return { start: start, page: page, navigate: navigate, queueSearch: queueSearch, retry: retry, signIn: signIn, signOut: signOut, openAccount: openAccount, newOrder: newOrder, newStaff: newStaff, openHelp: openHelp, brandChanged: brandChanged, closeModal: closeModal, closeStatusPane: closeStatusPane, submitOrder: submitOrder, submitStaff: submitStaff }; }()); window.ATL_PDI.start();