+ {STAGES.map((s, i) => {
+ const done = stageIndex >= 0 && i <= stageIndex
+ return (
+
+
+
+ {done ? : i + 1}
+
+ {i < STAGES.length - 1 && i ? 'bg-emerald-500' : 'bg-border'}`} />}
+
+
{s}
+
+ )
+ })}
+
+
+ {/* Totals + commercial action */}
+
+
+ Total estimate
+ {detail.totalStepHours}h{detail.summary.amount != null && ` · ${detail.summary.amount.toLocaleString()} ${detail.summary.currency}`}
+
+
+ {status === 'Requested' && (
+
+ )}
+
+ {action && (
+
+ )}
+ {status !== 'Live' && status !== 'Rejected' && (
+
+ )}
+
+
+ {/* Steps */}
+
+
+ {detail.steps.map((step) => (
+
+
+
{step.title}
+
+ {step.divisionName ?? 'Unassigned'} · {step.estimateHours}h
+ {step.dependsOnStepId && ' · depends on a prior step'}
+
+
+
+
+ ))}
+ {detail.steps.length === 0 &&
No steps yet — break the work down by division below.
}
+
+
setDetail(d)} />
+
+ >
+ )}
+