From 0d1dea5703635ead9f48501e8b280e41810fd3d3 Mon Sep 17 00:00:00 2001
From: Mayur Shinde <mayurshinde6776@gmail.com>
Date: Thu, 18 Jun 2026 16:11:32 +0530
Subject: [PATCH] addedvariance , health legends

---
 src/pages/owner/OwnerProjectList.jsx | 32 ++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

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 }) => (
+    <span className={`inline-block w-2 h-2 rounded-full ${className}`} />
+);
+
+const MetricLegend = ({ showVariance = true }) => (
+    <div className="flex flex-wrap items-center gap-x-6 gap-y-2 px-5 py-3 border-b border-zinc-200 dark:border-white/10 bg-zinc-50/60 dark:bg-white/[0.02] text-[11px] text-zinc-600 dark:text-zinc-400">
+        {showVariance && (
+            <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+                <span className="font-bold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">Variance</span>
+                <span className="flex items-center gap-1.5"><LegendDot className="bg-emerald-500" /> Under budget (−)</span>
+                <span className="flex items-center gap-1.5"><LegendDot className="bg-red-500" /> Over budget (+)</span>
+                <span className="flex items-center gap-1.5"><LegendDot className="bg-zinc-400" /> On budget (0%)</span>
+            </div>
+        )}
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+            <span className="font-bold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">Health</span>
+            <span className="flex items-center gap-1.5"><LegendDot className="bg-emerald-500" /> Good 70–100</span>
+            <span className="flex items-center gap-1.5"><LegendDot className="bg-amber-500" /> At Risk 40–69</span>
+            <span className="flex items-center gap-1.5"><LegendDot className="bg-red-500" /> Critical 0–39</span>
+        </div>
+    </div>
+);
+
 const OwnerProjectList = () => {
     const { user } = useAuth();
     const { projects, vendors, kanbanLeads, kanbanColumns } = useMockStore();
@@ -269,6 +295,9 @@ const OwnerProjectList = () => {
 
                 {/* Project Table (Desktop) / Cards (Mobile) */}
                 <SpotlightCard className="overflow-hidden">
+                    {/* Legend — explains Variance colors & Health thresholds */}
+                    <MetricLegend showVariance />
+
                     {/* Mobile Card View */}
                     <div className="md:hidden divide-y divide-zinc-100 dark:divide-white/5">
                         {sortedProjects.length > 0 ? sortedProjects.map(project => {
@@ -484,6 +513,9 @@ const OwnerProjectList = () => {
 
                 {/* Pipeline table */}
                 <SpotlightCard className="overflow-hidden">
+                    {/* Legend — Health thresholds (no Variance column in pipeline) */}
+                    <MetricLegend showVariance={false} />
+
                     {/* Mobile card view */}
                     <div className="md:hidden divide-y divide-zinc-100 dark:divide-white/5">
                         {filteredPipelineLeads.length > 0 ? filteredPipelineLeads.map(lead => {