| #${r.jc_no} |
${typeBadge(r.type)} |
${r.contact_number || '—'} |
${r.address || '—'} |
${statusBadge(r.status)} |
${r.team_name ? `${r.team_name}` : 'Unassigned'} |
${r.created_by || '—'} |
${!isAssigned ? `` : ''}
|
`;
}).join('');
const showMore = rows.length > PREVIEW
? `|
|
` : '';
return `
| JC # | Type | Contact | Area |
Status | Team | Created By | |
${html}${showMore}
`, async () => {
await submitCreate();
});
// Default is JOBCARD — show team selector and hide status immediately
mTeamRs = richSelect('m-team-rs', { placeholder: 'Search teams…', items: teamItems(_teams) });
document.getElementById('m-team-wrap').style.display = '';
document.getElementById('m-status-wrap').style.display = 'none';
document.getElementById('m-type')?.addEventListener('change', e => {
const isJobcard = e.target.value === 'JOBCARD';
document.getElementById('m-team-wrap').style.display = isJobcard ? '' : 'none';
document.getElementById('m-status-wrap').style.display = isJobcard ? 'none' : '';
if (isJobcard && !mTeamRs) {
mTeamRs = richSelect('m-team-rs', { placeholder: 'Search teams…', items: teamItems(_teams) });
}
});
}
async function submitCreate() {
const type = document.getElementById('m-type').value;
const contact = document.getElementById('m-contact').value.trim();
const area = document.getElementById('m-area').value.trim();
const errEl = document.getElementById('m-error');
errEl.classList.remove('visible');
if (!contact) { errEl.textContent = 'Contact number is required.'; errEl.classList.add('visible'); return; }
if (!area) { errEl.textContent = 'Area / address is required.'; errEl.classList.add('visible'); return; }
if (type === 'JOBCARD' && !mTeamRs?.getValue()) {
errEl.textContent = 'Please select a team.'; errEl.classList.add('visible'); return;
}
try {
const res = await createLead({
type,
contact_number: contact,
other_number: document.getElementById('m-other').value,
alternate_number: document.getElementById('m-alt').value,
area,
status: type === 'LEAD' ? document.getElementById('m-status').value : '',
team_id: type === 'JOBCARD' ? (mTeamRs?.getValue() || '') : '',
additional_notes: document.getElementById('m-notes').value,
});
closeModal();
showToast(`JC #${res.jc_no} created successfully.`, 'success');
await loadLeads();
await reloadJobcardsTable(); // also refresh jobcards tab if visible
} catch (err) {
errEl.textContent = err.message;
errEl.classList.add('visible');
}
}
// ─────────────────────────────────────────────────────────────────────────
// EDIT MODAL — update lead details/status
// ─────────────────────────────────────────────────────────────────────────
async function openEditModal(recordId) {
let lead;
try { lead = await getLead(recordId); } catch (err) { showToast(err.message, 'error'); return; }
openModal(`Edit Lead / Jobcard — JC #${lead.jc_no}`, `
${lead.status !== '1' ? `
` : `
`}
`, async () => {
const errEl = document.getElementById('e-error');
errEl.classList.remove('visible');
try {
await updateLead({
record_id: recordId,
contact_number: document.getElementById('e-contact').value,
other_number: document.getElementById('e-other').value,
alternate_number: document.getElementById('e-alt').value,
area: document.getElementById('e-area').value,
status: document.getElementById('e-status')?.value || lead.status,
additional_notes: document.getElementById('e-notes').value,
});
closeModal();
showToast('Lead updated.', 'success');
await loadLeads();
} catch (err) {
errEl.textContent = err.message;
errEl.classList.add('visible');
}
});
}
// ─────────────────────────────────────────────────────────────────────────
// ASSIGN MODAL — convert lead → jobcard by picking a team
// ─────────────────────────────────────────────────────────────────────────
export async function initAssign() {
const c = document.getElementById('view-content');
c.innerHTML = pageShell('Assign Jobcard', `
Leads listed below are unassigned. Click Assign Team to convert a lead
into a live drilling jobcard.
`);
try { _teams = await getTeams(); } catch { }
await loadUnassigned();
}
async function loadUnassigned() {
const wrap = document.getElementById('assign-table-wrap');
if (!wrap) return;
try {
const rows = await getLeads({ type: 'LEAD' });
const unassigned = rows.filter(r => r.status !== '1' && r.status !== 'CLIENT CANCELED');
wrap.innerHTML = `${renderAssignTable(unassigned)}
`;
wrap.querySelectorAll('[data-assign]').forEach(btn => {
btn.addEventListener('click', () => openAssignModal(btn.dataset.assign));
});
} catch (err) {
wrap.innerHTML = ``;
}
}
function renderAssignTable(rows) {
if (!rows.length) return ``;
return `
| JC # | Contact | Area |
Status | Created By | |
${rows.map(r => `
| #${r.jc_no} |
${r.contact_number || '—'} |
${r.address || '—'} |
${statusBadge(r.status)} |
${r.created_by || '—'} |
|
`).join('')}
Contact: ${lead.contact_number || '—'}
Area: ${lead.address || '—'}
${lead.additional_notes ? `
Notes: ${lead.additional_notes}
` : ''}
⚠ Assigning a team will convert this lead into a live Drilling Jobcard
with status PENDING.
`, async () => {
const errEl = document.getElementById('a-error');
errEl.classList.remove('visible');
const teamId = aTeamRs?.getValue();
const area = document.getElementById('a-area').value.trim();
if (!teamId) { errEl.textContent = 'Please select a team.'; errEl.classList.add('visible'); return; }
if (!area) { errEl.textContent = 'Area is required.'; errEl.classList.add('visible'); return; }
try {
const res = await assignLead({
record_id: recordId,
team_id: teamId,
contact_number: document.getElementById('a-contact').value,
other_number: document.getElementById('a-other').value,
alternate_number: document.getElementById('a-alt').value,
area,
additional_notes: document.getElementById('a-notes').value,
});
closeModal();
showToast(res.message || `JC #${lead.jc_no} assigned!`, 'success');
// Reload whichever list is visible
const assignWrap = document.getElementById('assign-table-wrap');
if (assignWrap) await loadUnassigned();
else await loadLeads();
} catch (err) {
errEl.textContent = err.message;
errEl.classList.add('visible');
}
}, { confirmLabel: 'Assign & Create Jobcard', confirmClass: 'btn-accent' });
// Init team rich select after modal is in DOM
const aTeamRs = richSelect('a-team-rs', { placeholder: 'Search teams…', items: teamItems(_teams) });
}
// ─────────────────────────────────────────────────────────────────────────
// JOBCARDS LIST PAGE
// ─────────────────────────────────────────────────────────────────────────
export async function initJobcards() {
const c = document.getElementById('view-content');
c.innerHTML = pageShell('Jobcards', `
`);
// Load stats async (non-blocking)
const tok = getToken();
fetch(`/api/jobcards/stats.php?token=${tok}`)
.then(r => r.json())
.then(json => {
if (!json.success) return;
const s = json.data;
const el = (id, v) => { const e = document.getElementById(id); if (e) e.textContent = v; };
el('jc-stat-this-label', s.this_month_label);
el('jc-stat-last-label', s.last_month_label);
el('jc-stat-comp-label', s.this_month_label);
el('jc-stat-this', s.jc_this_month);
el('jc-stat-last', s.jc_last_month);
el('jc-stat-active', s.jc_active);
el('jc-stat-comp', s.jc_completed_this);
}).catch(() => { });
document.getElementById('jc-no')?.addEventListener('input', debounce(reloadJobcardsTable, 350));
document.getElementById('jc-status')?.addEventListener('change', reloadJobcardsTable);
document.getElementById('btn-new-jc')?.addEventListener('click', async () => {
if (!_teams.length) { try { _teams = await getTeams(); } catch { } }
openCreateModal();
});
await reloadJobcardsTable();
}
// Module-level reload for the jobcards table — callable from anywhere
async function reloadJobcardsTable() {
const wrap = document.getElementById('jc-table-wrap');
if (!wrap) return;
const params = {
jc_no: document.getElementById('jc-no')?.value || '',
status: document.getElementById('jc-status')?.value || '',
};
wrap.innerHTML = ``;
try {
const rows = await getJobcards(params);
wrap.innerHTML = `${renderJobcardsTable(rows)}
`;
wrap.querySelectorAll('.jc-view-btn').forEach(btn => {
btn.addEventListener('click', () => navigate('jobcard-view', { id: +btn.dataset.id }));
});
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';
});
});
} catch (err) {
wrap.innerHTML = ``;
}
}
function renderJobcardsTable(rows) {
if (!rows.length) return ``;
const PREVIEW = 20;
const html = rows.map((r, i) => {
const hidden = i >= PREVIEW ? ' class="extra-row" style="display:none"' : '';
return `
#${r.jc_no} |
${r.client_name || r.address || '—'} |
${r.contact_number || '—'} |
${r.team_name || '—'} |
${jcStatusBadge(r.live_status || r.jc_current_status)} |
${r.date_created || '—'} |
|
`;
}).join('');
const showMore = rows.length > PREVIEW
? `|
|
` : '';
return `
| JC # | Client / Area | Contact |
Team | Status | Date | |
${html}${showMore}