diff --git a/src/pages/owner/OwnerProjectList.jsx b/src/pages/owner/OwnerProjectList.jsx
index 992af59..7bcd3ff 100644
--- a/src/pages/owner/OwnerProjectList.jsx
+++ b/src/pages/owner/OwnerProjectList.jsx
@@ -47,6 +47,32 @@ function getPipelineHealth(lead) {
return 32;
}
+// ---------- Metric legend ----------
+// Explains the Variance color convention (under vs over budget) and the Health
+// score thresholds so an owner can read both columns at a glance.
+const LegendDot = ({ className }) => (
+
+);
+
+const MetricLegend = ({ showVariance = true }) => (
+
+ {showVariance && (
+
+ Variance
+ Under budget (−)
+ Over budget (+)
+ On budget (0%)
+
+ )}
+
+ Health
+ Good 70–100
+ At Risk 40–69
+ Critical 0–39
+
+
+);
+
const OwnerProjectList = () => {
const { user } = useAuth();
const { projects, vendors, kanbanLeads, kanbanColumns } = useMockStore();
@@ -269,6 +295,9 @@ const OwnerProjectList = () => {
{/* Project Table (Desktop) / Cards (Mobile) */}
+ {/* Legend — explains Variance colors & Health thresholds */}
+
+
{/* Mobile Card View */}
{sortedProjects.length > 0 ? sortedProjects.map(project => {
@@ -484,6 +513,9 @@ const OwnerProjectList = () => {
{/* Pipeline table */}
+ {/* Legend — Health thresholds (no Variance column in pipeline) */}
+
+
{/* Mobile card view */}
{filteredPipelineLeads.length > 0 ? filteredPipelineLeads.map(lead => {