Job #	Title	Client	Site	Scheduled	Assigned To	Priority	Status	Net P/L
${j.job_number}	${j.title}	${j.client_name \|\| '—'}	${j.site_name \|\| '—'}	${j.scheduled_date ? Fmt.date(j.scheduled_date) : '—'}	${j.assigned_name \|\| 'Unassigned'}	${JC_PRIORITY_ICON[j.priority] \|\| ''} ${Fmt.capitalize(j.priority)}	${Fmt.statusBadge(j.status)}	${(() => { const pl = (j.net_profit !== null && j.net_profit !== undefined) ? parseFloat(j.net_profit) : 0; const color = pl > 0 ? 'var(--success)' : pl < 0 ? 'var(--danger)' : 'var(--text-muted)'; const prefix = pl > 0 ? '+' : ''; return `${prefix}R ${Math.abs(pl).toFixed(2)}`; })()}	${jcCan('delete') ? `` : ''}

Job #

Title

Client

Site

Scheduled

Assigned To

Priority

Status

Net P/L

${j.job_number}

${j.title}

${j.client_name || '—'}

${j.site_name || '—'}

${j.scheduled_date ? Fmt.date(j.scheduled_date) : '—'}

${j.assigned_name || 'Unassigned'}

${JC_PRIORITY_ICON[j.priority] || ''} ${Fmt.capitalize(j.priority)}

${Fmt.statusBadge(j.status)}

${(() => { const pl = (j.net_profit !== null && j.net_profit !== undefined) ? parseFloat(j.net_profit) : 0; const color = pl > 0 ? 'var(--success)' : pl < 0 ? 'var(--danger)' : 'var(--text-muted)'; const prefix = pl > 0 ? '+' : ''; return `${prefix}R ${Math.abs(pl).toFixed(2)}`; })()}

${jcCan('delete') ? `` : ''}

${j.job_number}

${j.title}

${j.client_name || ''} ${j.site_name ? '· 📍 ' + j.site_name : ''}

${Fmt.statusBadge(j.status)} ${jcCan('edit') ? `

` : ''}

${JC_STATUS_FLOW.map((s, i) => `

${i < currentIdx ? '✓' : i + 1}

${JC_STATUS_LABELS[s]}

`).join('')}

${j.status === 'assigned' && j.is_internal ? ` ` : ''} ${j.status === 'assigned' && !j.is_internal && j.vehicle_id ? ` ` : ''} ${j.status === 'assigned' && !j.is_internal && !j.vehicle_id ? ` ` : ''} ${j.status === 'travelling' ? (() => { const lastTravelEvent = [...(j.time_logs || [])].reverse().find(t => ['depart', 'arrive_site', 'depart_site', 'pause_travel', 'resume_travel'].includes(t.event_type)); const travelPaused = lastTravelEvent?.event_type === 'pause_travel'; const returningHome = (j.time_logs || []).some(t => t.event_type === 'depart_site'); if (travelPaused) return ` `; if (returningHome) return `

`; return `

`; })() : ''} ${j.status === 'on_site' ? ` ` : ''} ${j.status === 'working' ? (() => { const lastWorkEvent = [...(j.time_logs || [])].reverse().find(t => ['start_work', 'pause_work', 'resume_work'].includes(t.event_type)); const workPaused = lastWorkEvent?.event_type === 'pause_work'; const _arrivedBack = (j.time_logs || []).some(t => t.event_type === 'arrive_base'); // After returning to base: just show Complete if (_arrivedBack && !j.is_internal) return ` `; // Report submitted + no vehicle: skip travel, complete directly if (!j.is_internal && j.has_report && !j.vehicle_id) return ` `; // Report submitted + has vehicle: show depart if (!j.is_internal && j.has_report && j.vehicle_id) return ` `; // Work paused (no report yet) if (workPaused) return ` `; return `

${!j.is_internal ? `

Submit report & signature first to depart

` : ''} ${j.is_internal ? `` : ''}`; })() : ''} ${isAdminOrDev() ? ` ${j.status === 'draft' ? `` : ''} ${j.status === 'completed' || j.status === 'internal_complete' ? `

` : ''} ${j.status === 'invoiced' ? `` : ''} ${j.status === 'no_charge' ? `` : ''} ` : ''}

${Auth.can('jobcards', 'view_costing') ? `` : ''}

Scheduled

${j.scheduled_date ? Fmt.date(j.scheduled_date) : '—'} ${j.scheduled_time ? j.scheduled_time.slice(0, 5) : ''}

Priority

${JC_PRIORITY_ICON[j.priority]} ${Fmt.capitalize(j.priority)}

Job Type

${Fmt.capitalize(j.job_type)}

Client

${j.client_name || '—'}

${j.vehicle_reg ? `

Vehicle

${j.vehicle_make} ${j.vehicle_model} (${j.vehicle_reg})

` : ''} ${j.odo_start ? `

ODO Start

${parseInt(j.odo_start).toLocaleString()} km

` : ''} ${j.odo_end ? `

ODO End

${parseInt(j.odo_end).toLocaleString()} km

` : ''} ${j.odo_start && j.odo_end ? `

Distance

${(parseInt(j.odo_end) - parseInt(j.odo_start)).toLocaleString()} km

` : ''} ${j.completed_at ? `

Completed At

${Fmt.datetime(j.completed_at)}

` : ''} ${j.invoice_no ? `

Invoice #

${j.invoice_no}

` : ''} ${j.invoice_amount ? `

Invoice Amount

R ${parseFloat(j.invoice_amount).toFixed(2)}

` : ''}

Site

${j.site_name || '—'} ${j.site_address ? '— ' + j.site_address : ''}

${j.site_address ? `🗺 Open in Maps` : ''}

${j.description ? `

Description

${j.description}

` : ''}

Team ${isAdminOrDev() ? `` : ''}

${j.technicians?.length ? `

${j.technicians.map(t => `${avatarHTML(t.full_name)} ${t.full_name}`).join('')}

` : `

No team assigned

Pre-Job Planning

On-Site Checklist

Notes

${renderNotes(j.notes || [], j.id)}

Site Photos

${renderImagesGrid(j.images || [], j.id)}

Location

${renderLocationList(j.locations || [])}

Job Card Slips

${isAdminOrDev() ? `

` : ''}

${Auth.can('jobcards', 'view_costing') ? `` : ''}

${j.description ? `

Description

${j.description}

` : ''}

Client

${j.client_name || 'None'}

${isAdminOrDev() ? `` : ''}

Project

${j.project_name || '—'}

Job Type

${Fmt.capitalize(j.job_type)}

Priority

${Fmt.priorityBadge(j.priority)}

Scheduled

${j.scheduled_date ? Fmt.date(j.scheduled_date) : '—'} ${j.scheduled_time ? j.scheduled_time.slice(0, 5) : ''}

Lead Technician

${j.assigned_to ? `

${avatarHTML(j.assigned_name)} ${j.assigned_name}

` : `Not assigned`} ${isAdminOrDev() ? `` : ''}

Completed At

${j.completed_at ? Fmt.datetime(j.completed_at) : '—'}

Internal Job

${j.is_internal ? 'Internal — Not Invoiced' : 'Billable'}

Vehicle

${j.vehicle_reg ? j.vehicle_make + ' ' + j.vehicle_model + ' (' + j.vehicle_reg + ')' : '—'}

ODO Start

${j.odo_start ? parseInt(j.odo_start).toLocaleString() + ' km' : '—'}

ODO End

${j.odo_end ? parseInt(j.odo_end).toLocaleString() + ' km' : '—'}

Distance

${j.odo_start && j.odo_end ? (parseInt(j.odo_end) - parseInt(j.odo_start)).toLocaleString() + ' km' : '—'}

Invoice Number

${j.invoice_no || '—'}

Invoice Amount

${j.invoice_amount ? 'R ' + parseFloat(j.invoice_amount).toFixed(2) : '—'}

Site

${j.site_name || '—'}

${j.site_address || ''}

${j.site_address ? `🗺 Open in Maps` : ''}

Pre-Job Planning

Tasks, tools and parts needed before job starts

On-Site Checklist

Items to tick off during the job

Time Log

${buildAdminTimeline(j)}

Notes

${renderNotes(j.notes || [], j.id)}

Site Photos

${renderImagesGrid(j.images || [], j.id)}

Location Tracking

${renderLocationList(j.locations || [])}

Job Card Slips

Expenses captured on this job — all slips require an image

Job Progress

${progressSteps}

Quick Actions

${sidebarActions}

Team

${isAdminOrDev() ? '' : ''}

${teamHTML}

All time logs, notes, photos, slips, planning and reports will be deleted. This cannot be undone.

Image	Date	Merchant	Category	Amount	By
${slipImageCell(s)}	${Fmt.date(s.slip_date)}	${s.merchant \|\| '—'}	${s.category \|\| '—'}	R ${parseFloat(s.amount \|\| 0).toFixed(2)}	${s.captured_by_name \|\| '—'}
Total	R ${total.toFixed(2)}

Image

Date

Merchant

Labour & Time

${d.labour.length ? (() => { // All team members share the same timeline — grab time from first record const t0 = d.labour[0]; const pausedMin = (t0.paused_travel_min || 0) + (t0.paused_work_min || 0); const pausedHrs = (pausedMin / 60).toFixed(2); const travelPauseParts = t0.paused_travel_min > 0 ? `${t0.paused_travel_min}min travel` : ''; const workPauseParts = t0.paused_work_min > 0 ? `${t0.paused_work_min}min work` : ''; const pauseBreakdown = [travelPauseParts, workPauseParts].filter(Boolean).join(' + '); const totalLabourCost = d.labour.reduce((s, t) => s + (t.labour_cost || 0), 0); // ── Shared timeline block ── const timelineBlock = `

Shared Job Timeline — ${d.labour.length > 1 ? `${d.labour.length} team members worked simultaneously` : 'Solo technician'}

🚗 Driving ${t0.driving_hours}h (${t0.driving_minutes} min)

🔧 Working ${t0.working_hours}h (${t0.working_minutes} min)

${pausedMin > 0 ? `

⏸ Paused${pauseBreakdown ? ' (' + pauseBreakdown + ')' : ''} ${pausedHrs}h (${pausedMin} min) — not costed

` : ''}

Billable time per person ${t0.total_hours}h (${t0.total_minutes} min)

`; // ── Per-person rate × shared time rows ── const memberRows = d.labour.map(t => `

${avatarHTML ? avatarHTML(t.name) : '👤'}

${t.name}

${t.total_hours}h × R ${t.hourly_rate.toFixed(2)}/hr

R ${t.labour_cost.toFixed(2)}

${!t.hourly_rate ? '

⚠ No salary set

' : ''}

`).join(''); // ── Combined total (always shown) ── const combinedRow = `

Total Labour Cost R ${totalLabourCost.toFixed(2)}

${d.labour.length > 1 ? `

${d.labour.length} team members × ${t0.total_hours}h billable

` : ''}`; return timelineBlock + memberRows + combinedRow; })() : '

No time logs recorded yet

Consumables (Stock)

${d.consumables.length ? `` : ''}

${d.consumables.length ? (() => { // Net transactions by item — group by stock_item_id + unit_cost const netMap = {}; d.consumables.forEach(c => { const key = `${c.stock_item_id}_${c.unit_cost}`; if (!netMap[key]) { netMap[key] = { ...c, netQty: 0, netTotal: 0 }; } const mult = c.transaction_type === 'return' ? -1 : 1; netMap[key].netQty += mult * parseFloat(c.quantity || 0); netMap[key].netTotal += mult * parseFloat(c.unit_cost || 0) * parseFloat(c.quantity || 0); }); const rows = Object.values(netMap).filter(r => r.netQty !== 0); if (!rows.length) return '

All items have been returned

'; return ` ${rows.map(r => ``).join('')}

Item	Net Qty	Unit Cost	Net Total
${r.item_name} ${r.sku \|\| ''}	${r.netQty % 1 === 0 ? r.netQty : r.netQty.toFixed(2)} ${r.unit \|\| ''}	R ${parseFloat(r.unit_cost \|\| 0).toFixed(2)}	R ${r.netTotal.toFixed(2)}

`; })() : '

No stock issued to this job card

Date	Merchant	Category	Amount
${Fmt.date(sl.slip_date)}	${sl.merchant \|\| '—'}	${sl.category \|\| '—'}	R ${parseFloat(sl.amount \|\| 0).toFixed(2)}

Date

Merchant

Job Cards

${j.title}

${j.title}

Pre-Job Planning

On-Site Checklist

Notes

Site Photos

Location

Job Card Slips

${j.title}

Pre-Job Planning

On-Site Checklist

Time Log

Notes

Site Photos

Location Tracking

Job Card Slips

Quick Actions

Team

Client Sign-Off *

Costing Report — ${d.job_card.job_number}

Labour & Time

Travel

Consumables (Stock)

Expense Slips

Cost Summary