${iStat('Borehole', pi.borehole_meters, 'm')}
${iStat('Pump Depth', pi.pump_depth, 'm')}
${iStat('HDPE', pi.hdpe_meters, 'm')}
${iStat('Cable', pi.cable_meters, 'm')}
${iStat('Crack', pi.crack, 'm')}
Total Paid
R ${(payments.reduce((s, p) => s + (+p.amount || 0), 0)).toLocaleString('en-ZA', { minimumFractionDigits: 2 })}
${payments.length} payment${payments.length !== 1 ? 's' : ''}
${detailRows([
['Client', pi.client_name],
['Area', pi.area],
['Contact', pi.contact_number],
['Installed By', pi.installed_by],
['Attended By', pi.attended_by],
['Date Attended', pi.date_attended],
['Pack No', pi.pack_no],
['Pump No', pi.pump_no],
['GPS', pi.map_co_ordinates],
['Team', pi.team_name],
['Finished', pi.date_time_finished],
])}
${renderPumpSlip(pi.pump_slip, 'pumps')}
${r.jobcard_no} |
${clientInfo} |
${r.client_type} |
${r.team_name ? `${r.team_name}` : '—'} |
${statusBadge} |
${(r.date_time_created || '').slice(0, 10)} |
|
`;
}).join('');
const more = rows.length > PREVIEW
? ` |
` : '';
return `
| ID | Client | Type | Team | Status | Created | |
|---|
${html}${more}
Linked Installation
${installation.jobcard_no} — ${installation.client_name || '—'}
` : ''}
${drilling_jc ? `
Linked Drilling Jobcard
#${drilling_jc.jc_no} — ${drilling_jc.client_name || '—'}
` : ''}
Total Paid
R ${(payments.reduce((s, p) => s + (+p.amount || 0), 0)).toLocaleString('en-ZA', { minimumFractionDigits: 2 })}
${payments.length} payment${payments.length !== 1 ? 's' : ''}
${pumpTabNav(['Details', 'Problem/Solution', 'Timeline', 'Replaced Parts', 'Notes', 'Site Photos', 'Payments', 'Map'])}
${detailRows([
['Client Type', pr.client_type],
['Contact', pr.contact_number],
['Address', pr.address],
['Repaired By', pr.repaired_by],
['Team', pr.team_name],
['Date Started', pr.date_time_started],
['Date Finished', pr.date_time_finished],
['GPS', pr.map_co_ordinates],
])}
${renderPumpSlip(pr.pump_slip_file, 'pumps')}
Problem Description
${esc(pr.problem_description) || '—'}
Solution
${esc(pr.problem_solution) || '—'}
${renderPumpTimeline(timeline)}
${renderReplaced(replaced, _isAdmin)}
${renderNotes(notes.filter(n => n.reason !== 'INSTALL IMAGE'))}
${renderPumpSitePhotos(notes.filter(n => n.reason === 'INSTALL IMAGE')) || '
'}
${renderPumpPayments(payments)}
${pr.map_co_ordinates
? `
`
: '
No GPS coordinates recorded.
'}
`;
// Wire buttons
document.getElementById('btn-back')?.addEventListener('click', () => navigate('pump-repair'));
document.getElementById('btn-goto-install')?.addEventListener('click', e => navigate('pump-install-view', { id: +e.currentTarget.dataset.id }));
document.getElementById('btn-goto-jc')?.addEventListener('click', e => navigate('jobcard-view', { id: +e.currentTarget.dataset.id }));
initPumpTabs();
const openRepairPay = () => openPumpPaymentsModal(pr.jobcard_no, data, 'stat-pay-repair');
document.getElementById('btn-view-pay-repair')?.addEventListener('click', openRepairPay);
document.getElementById('stat-pay-repair')?.addEventListener('click', openRepairPay);
if (_isAdmin) {
document.getElementById('btn-edit-repair')?.addEventListener('click', () => openRepairEditModal(data, () => initRepairView(pr.record_id, 'admin')));
document.getElementById('btn-invoice-repair')?.addEventListener('click', () =>
navigate('invoice-create', { pump_record_id: pr.record_id, pump_type: 'repair' })
);
document.getElementById('btn-complete-repair')?.addEventListener('click', async () => {
if (!confirm('Mark this repair as complete?')) return;
try {
await apiPost('repair-update.php', { id: pr.record_id, status: 1, ...pr });
showToast('Marked complete.', 'success');
initRepairView(pr.record_id, 'admin');
} catch (err) { showToast(err.message, 'error'); }
});
document.getElementById('btn-add-replaced')?.addEventListener('click', () => openAddReplacedModal(pr.jobcard_no, data, () => initRepairView(pr.record_id, 'admin')));
bindTimelineActions(data.timeline, pr.jobcard_no, 'tl-body', 'repair', pr.record_id);
bindReplacedDelete(data.replaced, pr.record_id);
}
}
// ═════════════════════════════════════════════════════════════════════════
// CREATE MODALS
// ═════════════════════════════════════════════════════════════════════════
async function openInstallCreateModal(reload) {
openModal('New Pump Installation', `
`, async () => {
const errEl = document.getElementById('ni-err');
errEl.classList.remove('visible');
const teamId = niTeamRs?.getValue();
const jcNo = niJcRs?.getValue();
if (!teamId) { errEl.textContent = 'Team is required.'; errEl.classList.add('visible'); return; }
try {
const res = await apiPost('install-create.php', {
drilling_team_id: teamId,
drilling_invoice: jcNo || '',
client_name: document.getElementById('ni-client').value,
area: document.getElementById('ni-area').value,
contact_number: document.getElementById('ni-contact').value,
});
closeModal();
showToast(`${res.jobcard_no} created.`, 'success');
reload();
} catch (err) { errEl.textContent = err.message; errEl.classList.add('visible'); }
}, { confirmLabel: 'Create Installation', confirmClass: 'btn-accent' });
// Init rich selects after modal is in DOM
let niTeamRs = null, niJcRs = null;
niTeamRs = richSelect('ni-team-rs', {
placeholder: 'Search teams…',
items: teamItems(_teams),
});
// Default to the team named "Install Team"
const _niInstallTeam = _teams.find(t => (t.name || '').toLowerCase() === 'install team');
if (_niInstallTeam) niTeamRs.setValue(_niInstallTeam.record_id);
// Load jobcards for the second dropdown
try {
const res = await fetch(`/api/jobcards/list.php?token=${token()}`);
const json = await res.json();
if (json.success) {
niJcRs = richSelect('ni-jc-rs', {
placeholder: 'Search jobcards… (optional)',
items: jobcardItems(json.data),
onSelect: (val, item) => {
const jc = item?._raw;
if (!jc) return;
const set = (id, v) => { const el = document.getElementById(id); if (el) el.value = v || ''; };
set('ni-client', jc.client_name || '');
set('ni-area', jc.address || '');
set('ni-contact', jc.contact_number || '');
},
});
}
} catch { }
}
async function openRepairCreateModal(reload) {
openModal('New Pump Repair', `
`, async () => {
const errEl = document.getElementById('nr-err');
const ctype = document.getElementById('nr-ctype').value;
errEl.classList.remove('visible');
const teamId = nrTeamRs?.getValue();
const instId = nrInstallRs?.getValue();
if (!teamId) { errEl.textContent = 'Team is required.'; errEl.classList.add('visible'); return; }
if (ctype === 'EXISTING' && !instId) { errEl.textContent = 'Please select the linked installation.'; errEl.classList.add('visible'); return; }
try {
const res = await apiPost('repair-create.php', {
client_type: ctype,
installation_id: instId || 0,
drilling_team_id: teamId,
contact_number: document.getElementById('nr-contact').value,
address: document.getElementById('nr-address').value,
problem_description: document.getElementById('nr-prob').value,
});
closeModal();
showToast(`${res.jobcard_no} created.`, 'success');
reload();
} catch (err) { errEl.textContent = err.message; errEl.classList.add('visible'); }
}, { confirmLabel: 'Create Repair', confirmClass: 'btn-accent' });
let nrTeamRs = null, nrInstallRs = null;
nrTeamRs = richSelect('nr-team-rs', {
placeholder: 'Search teams…',
items: teamItems(_teams),
});
// Default to the team named "Install Team"
const _nrInstallTeam = _teams.find(t => (t.name || '').toLowerCase() === 'install team');
if (_nrInstallTeam) nrTeamRs.setValue(_nrInstallTeam.record_id);
// Load installs for existing client dropdown
try {
const rows = await apiFetch('installs-list.php', {});
nrInstallRs = richSelect('nr-install-rs', {
placeholder: 'Search installations…',
items: rows.map(r => ({
value: r.record_id,
label: `${r.jobcard_no} — ${r.client_name || r.area || '—'}`,
sub: [r.area, r.contact_number].filter(Boolean).join(' · '),
badge: r.status == 1 ? 'Complete' : 'In Progress',
})),
});
} catch { }
document.getElementById('nr-ctype')?.addEventListener('change', e => {
document.getElementById('nr-install-wrap').style.display = e.target.value === 'EXISTING' ? '' : 'none';
});
}
// ═════════════════════════════════════════════════════════════════════════
// EDIT MODALS
// ═════════════════════════════════════════════════════════════════════════
function openInstallEditModal(data, reload) {
const pi = data.install;
let eiTeamRs = null;
openModal(`Edit ${pi.jobcard_no}`, `
`, async () => {
const errEl = document.getElementById('ei-err');
errEl.classList.remove('visible');
try {
await apiPost('install-update.php', {
id: pi.record_id,
drilling_invoice: pi.drilling_invoice,
drilling_team_id: eiTeamRs?.getValue() || pi.drilling_team_id,
client_name: document.getElementById('ei-client').value,
area: document.getElementById('ei-area').value,
contact_number: document.getElementById('ei-contact').value,
installed_by: document.getElementById('ei-iby').value,
attended_by: document.getElementById('ei-aby').value,
pump_depth: document.getElementById('ei-depth').value,
borehole_meters: document.getElementById('ei-borehole').value,
cable_meters: document.getElementById('ei-cable').value,
hdpe_meters: document.getElementById('ei-hdpe').value,
crack: document.getElementById('ei-crack').value,
pack_no: document.getElementById('ei-pack').value,
pump_no: document.getElementById('ei-pumpno').value,
map_co_ordinates: document.getElementById('ei-gps').value,
problem_description: document.getElementById('ei-prob').value,
problem_solution: document.getElementById('ei-sol').value,
status: pi.status,
});
closeModal();
showToast('Installation updated.', 'success');
reload();
} catch (err) { errEl.textContent = err.message; errEl.classList.add('visible'); }
}, { confirmLabel: 'Save', confirmClass: 'btn-primary' });
// Init team rich select after modal is in DOM
eiTeamRs = richSelect('ei-team-rs', {
placeholder: 'Search teams…',
items: teamItems(_teams),
});
if (pi.drilling_team_id) eiTeamRs.setValue(pi.drilling_team_id);
}
function openRepairEditModal(data, reload) {
const pr = data.repair;
let erTeamRs = null;
openModal(`Edit ${pr.jobcard_no}`, `
`, async () => {
const errEl = document.getElementById('er-err');
errEl.classList.remove('visible');
try {
await apiPost('repair-update.php', {
id: pr.record_id,
drilling_team_id: erTeamRs?.getValue() || pr.drilling_team_id,
contact_number: document.getElementById('er-contact').value,
address: document.getElementById('er-address').value,
repaired_by: document.getElementById('er-rby').value,
date_time_started: document.getElementById('er-started').value.replace('T', ' '),
date_time_finished: document.getElementById('er-finished').value.replace('T', ' '),
map_co_ordinates: document.getElementById('er-gps').value,
problem_description: document.getElementById('er-prob').value,
problem_solution: document.getElementById('er-sol').value,
status: pr.status,
});
closeModal();
showToast('Repair updated.', 'success');
reload();
} catch (err) { errEl.textContent = err.message; errEl.classList.add('visible'); }
}, { confirmLabel: 'Save', confirmClass: 'btn-primary' });
// Init team rich select after modal is in DOM
erTeamRs = richSelect('er-team-rs', {
placeholder: 'Search teams…',
items: teamItems(_teams),
});
if (pr.drilling_team_id) erTeamRs.setValue(pr.drilling_team_id);
}
// ═════════════════════════════════════════════════════════════════════════
// PUMP TIMELINE MODAL
// ═════════════════════════════════════════════════════════════════════════
function openPumpTimelineModal(jobcard_no, entry, timelineArr, bodyId) {
const isEdit = !!entry;
const typeOpts = PUMP_TIMELINE_TYPES.map(t =>
``
).join('');
openModal(isEdit ? 'Edit Timeline Entry' : 'Add Timeline Entry', `
`, async () => {
const errEl = document.getElementById('ptl-err');
errEl.classList.remove('visible');
const type = document.getElementById('ptl-type').value;
if (!type) { errEl.textContent = 'Type is required.'; errEl.classList.add('visible'); return; }
try {
const res = await apiPost('timeline-add.php', {
jobcard_no,
type,
date_time: document.getElementById('ptl-dt').value,
});
timelineArr.push(res);
closeModal();
showToast('Timeline entry added.', 'success');
const body = document.getElementById(bodyId);
if (body) body.innerHTML = renderPumpTimeline(timelineArr);
bindTimelineDeletes(timelineArr, jobcard_no, bodyId);
} catch (err) { errEl.textContent = err.message; errEl.classList.add('visible'); }
}, { confirmLabel: 'Add Entry', confirmClass: 'btn-primary' });
}
function bindTimelineActions(timeline, jobcard_no, bodyId, type, recordId) {
bindTimelineDeletes(timeline, jobcard_no, bodyId);
}
function bindTimelineDeletes(timelineArr, jobcard_no, bodyId) {
document.querySelectorAll('.ptl-del').forEach(btn => {
btn.addEventListener('click', async () => {
if (!confirm('Delete this entry?')) return;
try {
await apiPost('timeline-delete.php', { record_id: btn.dataset.id });
const idx = timelineArr.findIndex(t => t.record_id == btn.dataset.id);
if (idx > -1) timelineArr.splice(idx, 1);
const body = document.getElementById(bodyId);
if (body) body.innerHTML = renderPumpTimeline(timelineArr);
bindTimelineDeletes(timelineArr, jobcard_no, bodyId);
showToast('Deleted.', 'success');
} catch (err) { showToast(err.message, 'error'); }
});
});
}
// ═════════════════════════════════════════════════════════════════════════
// REPLACED ITEMS
// ═════════════════════════════════════════════════════════════════════════
function openAddReplacedModal(jobcard_no, data, reload) {
openModal('Add Replaced Item', `
`, async () => {
const errEl = document.getElementById('ri-err');
errEl.classList.remove('visible');
const name = document.getElementById('ri-name').value.trim();
if (!name) { errEl.textContent = 'Item name is required.'; errEl.classList.add('visible'); return; }
try {
await apiPost('replaced-add.php', { jobcard_no, replaced_item: name });
closeModal();
showToast('Item added.', 'success');
reload();
} catch (err) { errEl.textContent = err.message; errEl.classList.add('visible'); }
}, { confirmLabel: 'Add Item', confirmClass: 'btn-primary' });
}
function bindReplacedDelete(replaced, repairId) {
document.querySelectorAll('.ri-del').forEach(btn => {
btn.addEventListener('click', async () => {
if (!confirm('Remove this item?')) return;
try {
await apiPost('replaced-delete.php', { record_id: btn.dataset.id });
showToast('Removed.', 'success');
initRepairView(repairId, 'admin');
} catch (err) { showToast(err.message, 'error'); }
});
});
}
// ═════════════════════════════════════════════════════════════════════════
// RENDER HELPERS
// ═════════════════════════════════════════════════════════════════════════
function renderPumpTimeline(timeline) {
if (!timeline.length) return ``;
const typeColors = {
DEPARTURE: 'badge-pending', ARRIVED: 'badge-active', INSTALLING: 'badge-drilling',
START: 'badge-active', PAUSE: 'badge-pending', RESUME: 'badge-active',
STOP: 'badge-complete', COMPLETE: 'badge-active', OTHER: 'badge-complete',
};
const rows = timeline.map(t => `
| ${(t.date_time || '').slice(0, 16)} |
${t.type} |
${t.username || '—'} |
${_isAdmin ? ` | ` : ' | '}
`).join('');
return `
| Time | Event | By | ${_isAdmin ? ' | ' : ' | '}
|---|
${rows}
No replaced items recorded.
| Item | Date Added | ${isAdmin ? ' | ' : ''}
|---|
${items.map(r => `
| ${esc(r.replaced_item)} |
${r.date_added || '—'} |
${isAdmin ? ` | ` : ''}
`).join('')}
${withImages.map(n => {
const techSrc = `${TECH_UPLOADS}notes/${esc(n.image)}`;
const adminSrc = `${ADMIN_UPLOADS}notes/${esc(n.image)}`;
return `
${n.note ? `
${esc(n.note)}
` : ''}
`;
}).join('')}
No payments recorded yet.
${payments.map(p => {
const techSrc = p.file ? `${TECH_UPLOADS}payments/${esc(p.file)}` : null;
const adminSrc = p.file ? `${ADMIN_UPLOADS}payments/${esc(p.file)}` : null;
return `
${p.payment_method || '—'}
${(p.date_time || '').slice(0, 10)}
R ${(+p.amount || 0).toLocaleString('en-ZA', { minimumFractionDigits: 2 })}
${adminSrc ? `
` : ''}
`;
}).join('')}
Total: R ${tot.toLocaleString('en-ZA', { minimumFractionDigits: 2 })}
${n.reason ? `
${esc(n.reason)}` : ''}
${n.note || ''}
${n.image ? `
` : ''}
${n.reason || ''} · ${n.date_time || ''}
` : ''}
${rows.length ? `
| Method | Amount | By | Date | Proof |
${_isAdmin ? ' | ' : ''}
${rows.map(p => `
| ${p.payment_method || '—'} |
R ${(+p.amount || 0).toLocaleString('en-ZA', { minimumFractionDigits: 2 })} |
${p.username || '—'} |
${(p.date_time || '').slice(0, 10)} |
${p.file
? `}) `
: '—'} |
${_isAdmin ? ` | ` : ''}
`).join('')}
Total Paid: R ${tot.toLocaleString('en-ZA', { minimumFractionDigits: 2 })}
No payments recorded yet.
${modalBody()}
`,
closeModal, { confirmLabel: 'Close', confirmClass: 'btn-ghost' }
);
setTimeout(() => {
document.getElementById('modal-cancel-btn')?.remove();
bindPumpPayButtons();
}, 50);
}
function openPumpPaymentModal(jobcardNo, payment, onDone) {
const isEdit = !!payment;
const hasFile = isEdit && payment?.file;
openModal(isEdit ? 'Edit Payment' : 'Add Payment', `
`, async () => {
const errEl = document.getElementById('ppay-err');
errEl.classList.remove('visible');
const method = document.getElementById('ppay-method')?.value;
const amount = parseFloat(document.getElementById('ppay-amount')?.value || 0);
const fileInput = document.getElementById('ppay-file');
const hasNew = fileInput?.files?.length > 0;
if (!method) { errEl.textContent = 'Payment method is required.'; errEl.classList.add('visible'); return; }
if (amount <= 0) { errEl.textContent = 'Amount must be greater than 0.'; errEl.classList.add('visible'); return; }
if (method === 'EFT' && !hasNew && !(isEdit && payment?.file)) {
errEl.textContent = 'Proof of payment is required for EFT.'; errEl.classList.add('visible'); return;
}
try {
const token = localStorage.getItem('sd_token') || '';
const fd = new FormData();
fd.append('token', token);
fd.append('payment_method', method);
fd.append('amount', amount);
if (isEdit) fd.append('record_id', payment.record_id);
else fd.append('jobcard_id', jobcardNo);
if (hasNew) fd.append('file', fileInput.files[0]);
const url = isEdit ? '/api/jobcards/payment-update.php' : '/api/jobcards/payment-add.php';
const res = await fetch(url, { method: 'POST', body: fd });
const json = await res.json();
if (!json.success) throw new Error(json.message);
closeModal();
showToast(isEdit ? 'Payment updated.' : 'Payment added.', 'success');
onDone(json.data);
} catch (err) { errEl.textContent = err.message; errEl.classList.add('visible'); }
}, { confirmLabel: isEdit ? 'Save Payment' : 'Add Payment', confirmClass: 'btn-primary' });
setTimeout(() => {
document.getElementById('ppay-method')?.addEventListener('change', e => {
document.getElementById('ppay-eft-wrap').style.display = e.target.value === 'EFT' ? '' : 'none';
});
}, 50);
}
function renderPayments(payments) {
return `
| Method | Amount | By | Date |
|---|
${payments.map(p => `
| ${p.payment_method || '—'} |
R ${(+p.amount || 0).toLocaleString()} |
${p.username || '—'} |
${p.date_time || '—'} |
`).join('')}
${labels.map((t, i) => `
`).join('')}
`;
}
function initPumpTabs() {
const btns = document.querySelectorAll('.pump-tab-btn');
const panels = document.querySelectorAll('.pump-tab-panel');
btns.forEach(btn => {
btn.addEventListener('click', () => {
const idx = +btn.dataset.tab;
btns.forEach(b => {
const on = +b.dataset.tab === idx;
b.style.color = on ? 'var(--primary)' : 'var(--text-muted)';
b.style.borderColor = on ? 'var(--primary)' : 'transparent';
});
panels.forEach(p => { p.style.display = +p.dataset.panel === idx ? '' : 'none'; });
// Lazy-load map
if (idx === 5 || idx === 7) initPumpMap();
});
});
}
function initPumpMap() {
const el = document.getElementById('pump-map');
if (!el || el.dataset.loaded) return;
el.dataset.loaded = '1';
const coords = el.dataset.coords || '';
const [lat, lng] = coords.split(',').map(s => parseFloat(s.trim()));
if (isNaN(lat) || isNaN(lng)) return;
const iframe = document.createElement('iframe');
iframe.style.cssText = 'width:100%;height:400px;border:none';
iframe.src = `https://maps.google.com/maps?q=${lat},${lng}&z=15&output=embed`;
el.appendChild(iframe);
}
function iStat(label, value, unit = '') {
return `
${label}
${value ?? 0}${unit}
`;
}
function detailRows(pairs) {
return `${pairs.map(([label, val]) => `
| ${label} |
${val || '—'} |
`).join('')}
`;
}
function bindShowMore(wrap) {
wrap.querySelectorAll('.show-more-btn').forEach(btn => {
btn.addEventListener('click', () => {
const tbody = btn.closest('tbody');
const hidden = tbody.querySelectorAll('tr.extra-row');
const exp = btn.dataset.expanded === 'true';
hidden.forEach(r => r.style.display = exp ? 'none' : '');
btn.dataset.expanded = exp ? 'false' : 'true';
btn.textContent = exp ? `Show all ${btn.dataset.total}` : 'Show less';
});
});
}
function esc(v) { return (v || '').toString().replace(/"/g, '"').replace(/ { clearTimeout(t); t = setTimeout(() => fn(...a), ms); }; }})
` : ''}