@optifye/dashboard-core 6.10.18 → 6.10.19

package/dist/index.css

@@ -1035,6 +1035,9 @@ body {
 .h-\[60px\] {
   height: 60px;
 }
+.h-\[72px\] {
+  height: 72px;
+}
 .h-\[80px\] {
   height: 80px;
 }
@@ -1146,9 +1149,6 @@ body {
 .min-h-\[150px\] {
   min-height: 150px;
 }
-.min-h-\[20px\] {
-  min-height: 20px;
-}
 .min-h-\[280px\] {
   min-height: 280px;
 }
@@ -1513,6 +1513,10 @@ body {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.-translate-y-4 {
+  --tw-translate-y: -1rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .translate-x-0 {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1529,6 +1533,14 @@ body {
   --tw-translate-x: 100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.translate-y-0 {
+  --tw-translate-y: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.translate-y-4 {
+  --tw-translate-y: 1rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .rotate-12 {
   --tw-rotate: 12deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2145,6 +2157,10 @@ body {
 .border-gray-700\/60 {
   border-color: rgb(55 65 81 / 0.6);
 }
+.border-green-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(220 252 231 / var(--tw-border-opacity, 1));
+}
 .border-green-200 {
   --tw-border-opacity: 1;
   border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
@@ -5005,13 +5021,20 @@ input[type=range]:active::-moz-range-thumb {
 .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
-.disabled\:bg-gray-300:disabled {
+.disabled\:bg-blue-400:disabled {
   --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
+  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
 }
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }
+.disabled\:hover\:bg-transparent:hover:disabled {
+  background-color: transparent;
+}
+.disabled\:hover\:text-gray-400:hover:disabled {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
 .group:last-child .group-last\:border-b-0 {
   border-bottom-width: 0px;
 }
@@ -6202,6 +6225,10 @@ input[type=range]:active::-moz-range-thumb {
   .dark\:bg-white\/10 {
     background-color: rgb(255 255 255 / 0.1);
   }
+  .dark\:bg-yellow-600 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
+  }
   .dark\:bg-yellow-900\/20 {
     background-color: rgb(113 63 18 / 0.2);
   }

package/dist/index.d.mts

@@ -7109,6 +7109,7 @@ interface WorkspaceHistoryCalendarProps {
     month: number;
     year: number;
     workspaceId: string;
+    legend?: EfficiencyLegendUpdate;
     /** Numeric shift ID (0, 1, 2, ...) - supports multi-shift */
     selectedShiftId?: number;
     onMonthNavigate?: (newMonth: number, newYear: number) => void;
@@ -7132,6 +7133,7 @@ interface WorkspaceMonthlyHistoryProps {
     rangeStart: string;
     rangeEnd: string;
     timezone: string;
+    legend?: EfficiencyLegendUpdate;
     /** Numeric shift ID (0, 1, 2, ...) - supports multi-shift */
     selectedShiftId?: number;
     /** Callback when date is selected - passes numeric shift ID */
@@ -7164,6 +7166,7 @@ interface WorkspacePdfGeneratorProps {
     workspace: WorkspaceDetailedMetrics;
     className?: string;
     idleTimeReasons?: IdleTimeReasonData[];
+    efficiencyLegend?: EfficiencyLegendUpdate;
 }
 declare const WorkspacePdfGenerator: React__default.FC<WorkspacePdfGeneratorProps>;
 
@@ -7183,6 +7186,7 @@ interface WorkspaceMonthlyPdfGeneratorProps {
         id: number;
         name: string;
     }>;
+    efficiencyLegend?: EfficiencyLegendUpdate;
     className?: string;
 }
 declare const WorkspaceMonthlyPdfGenerator: React__default.FC<WorkspaceMonthlyPdfGeneratorProps>;
@@ -7190,6 +7194,7 @@ declare const WorkspaceMonthlyPdfGenerator: React__default.FC<WorkspaceMonthlyPd
 interface WorkspaceMetricCardsProps {
     workspace: WorkspaceDetailedMetrics;
     className?: string;
+    legend?: EfficiencyLegendUpdate;
 }
 declare const WorkspaceMetricCardsImpl: React__default.FC<WorkspaceMetricCardsProps>;
 declare const WorkspaceMetricCards: React__default.FC<WorkspaceMetricCardsProps>;

package/dist/index.d.ts

@@ -7109,6 +7109,7 @@ interface WorkspaceHistoryCalendarProps {
     month: number;
     year: number;
     workspaceId: string;
+    legend?: EfficiencyLegendUpdate;
     /** Numeric shift ID (0, 1, 2, ...) - supports multi-shift */
     selectedShiftId?: number;
     onMonthNavigate?: (newMonth: number, newYear: number) => void;
@@ -7132,6 +7133,7 @@ interface WorkspaceMonthlyHistoryProps {
     rangeStart: string;
     rangeEnd: string;
     timezone: string;
+    legend?: EfficiencyLegendUpdate;
     /** Numeric shift ID (0, 1, 2, ...) - supports multi-shift */
     selectedShiftId?: number;
     /** Callback when date is selected - passes numeric shift ID */
@@ -7164,6 +7166,7 @@ interface WorkspacePdfGeneratorProps {
     workspace: WorkspaceDetailedMetrics;
     className?: string;
     idleTimeReasons?: IdleTimeReasonData[];
+    efficiencyLegend?: EfficiencyLegendUpdate;
 }
 declare const WorkspacePdfGenerator: React__default.FC<WorkspacePdfGeneratorProps>;
 
@@ -7183,6 +7186,7 @@ interface WorkspaceMonthlyPdfGeneratorProps {
         id: number;
         name: string;
     }>;
+    efficiencyLegend?: EfficiencyLegendUpdate;
     className?: string;
 }
 declare const WorkspaceMonthlyPdfGenerator: React__default.FC<WorkspaceMonthlyPdfGeneratorProps>;
@@ -7190,6 +7194,7 @@ declare const WorkspaceMonthlyPdfGenerator: React__default.FC<WorkspaceMonthlyPd
 interface WorkspaceMetricCardsProps {
     workspace: WorkspaceDetailedMetrics;
     className?: string;
+    legend?: EfficiencyLegendUpdate;
 }
 declare const WorkspaceMetricCardsImpl: React__default.FC<WorkspaceMetricCardsProps>;
 declare const WorkspaceMetricCards: React__default.FC<WorkspaceMetricCardsProps>;

package/dist/index.js

@@ -9450,6 +9450,19 @@ function getEfficiencyColorClasses(efficiency, legend = DEFAULT_EFFICIENCY_LEGEN
       return "bg-gray-300/90";
   }
 }
+function getEfficiencyHexColor(efficiency, legend = DEFAULT_EFFICIENCY_LEGEND) {
+  const color2 = getEfficiencyColor(efficiency, legend);
+  switch (color2) {
+    case "green":
+      return "#00AB45";
+    case "yellow":
+      return "#FFB020";
+    case "red":
+      return "#E34329";
+    default:
+      return "#D1D5DB";
+  }
+}
 
 // src/lib/hooks/useDashboardMetrics.ts
 var parseEfficiencyLegend = (legend) => {
@@ -28037,8 +28050,13 @@ var CardFooter2 = (props) => {
 };
 var WorkspaceMetricCardsImpl = ({
   workspace,
-  className
+  className,
+  legend
 }) => {
+  const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
+  const efficiencyValue = workspace.avg_efficiency || 0;
+  const efficiencyTarget = effectiveLegend.green_min;
+  const efficiencyColor = getEfficiencyHexColor(efficiencyValue, effectiveLegend);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `grid grid-cols-1 gap-4 sm:gap-3 sm:grid-cols-2 lg:grid-cols-5 w-full h-full ${className || ""}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "flex flex-col bg-white shadow-sm h-full min-h-[150px] sm:min-h-0", children: [
       /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-lg text-center", children: "Pieces Lost" }) }),
@@ -28050,11 +28068,15 @@ var WorkspaceMetricCardsImpl = ({
     /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "flex flex-col bg-white shadow-sm h-full min-h-[150px] sm:min-h-0", children: [
       /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-lg text-center", children: "Efficiency" }) }),
       /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { className: "flex-1 flex items-center justify-center py-6 sm:py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: `text-5xl font-bold ${(workspace.avg_efficiency || 0) >= 80 ? "text-green-500" : "text-red-500"}`, children: [
-          (workspace.avg_efficiency || 0).toFixed(1),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-5xl font-bold", style: { color: efficiencyColor }, children: [
+          efficiencyValue.toFixed(1),
           "%"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-2", children: "Target: 80%" })
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-500 mt-2", children: [
+          "Target: ",
+          Math.round(efficiencyTarget),
+          "%"
+        ] })
       ] }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "flex flex-col bg-white shadow-sm h-full min-h-[150px] sm:min-h-0", children: [
@@ -38995,6 +39017,7 @@ var WorkspaceHistoryCalendar = ({
   month,
   year,
   workspaceId,
+  legend,
   selectedShiftId = 0,
   onMonthNavigate,
   onShiftChange,
@@ -39004,6 +39027,7 @@ var WorkspaceHistoryCalendar = ({
   const { dateTimeConfig } = useDashboardConfig();
   const configuredTimezone = dateTimeConfig?.defaultTimezone || "Asia/Kolkata";
   const [animationComplete, setAnimationComplete] = React24.useState(false);
+  const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
   const hasRealData = (shift) => {
     if (shift.hasData !== void 0) return shift.hasData;
     return shift.efficiency > 0 || shift.output > 0 || shift.cycleTime > 0 || shift.pph > 0 || shift.idealOutput > 0 || shift.idleTime > 0;
@@ -39070,7 +39094,7 @@ var WorkspaceHistoryCalendar = ({
       return [];
     });
     if (validShifts.length === 0) return null;
-    const badShiftsCount = validShifts.filter((shift) => shift.efficiency < 75).length;
+    const badShiftsCount = validShifts.filter((shift) => shift.efficiency < effectiveLegend.green_min).length;
     const totalIdleTime = validShifts.reduce((sum, shift) => sum + shift.idleTime, 0);
     const avgIdleTime = Math.round(totalIdleTime / validShifts.length);
     return {
@@ -39080,7 +39104,7 @@ var WorkspaceHistoryCalendar = ({
       badDaysCount: badShiftsCount,
       totalDays: validShifts.length
     };
-  }, [data, month, year, configuredTimezone, selectedShiftId]);
+  }, [data, month, year, configuredTimezone, selectedShiftId, effectiveLegend]);
   const handleDayClick = React24.useCallback((day, shiftId) => {
     if (!day || isFutureDate(day.date)) return;
     const year2 = day.date.getFullYear();
@@ -39127,10 +39151,11 @@ var WorkspaceHistoryCalendar = ({
     compareDate.setHours(0, 0, 0, 0);
     if (compareDate > istNow) return "bg-gray-200";
     if (!hasData) return "bg-gray-300";
-    if (efficiency >= 80) return "bg-[#00AB45]/90";
-    if (efficiency >= 70) return "bg-[#FFB020]/90";
+    const efficiencyColor = getEfficiencyColor(efficiency, effectiveLegend);
+    if (efficiencyColor === "green") return "bg-[#00AB45]/90";
+    if (efficiencyColor === "yellow") return "bg-[#FFB020]/90";
     return "bg-[#E34329]/90";
-  }, [configuredTimezone]);
+  }, [configuredTimezone, effectiveLegend]);
   const renderStats = (shift, date) => {
     const istNow = getTimeInZoneAsDate(configuredTimezone);
     const compareDate = dateFnsTz.toZonedTime(date, configuredTimezone);
@@ -39318,6 +39343,7 @@ var WorkspaceMonthlyHistory = ({
   rangeStart,
   rangeEnd,
   timezone,
+  legend,
   selectedShiftId = 0,
   onDateSelect,
   onMonthNavigate,
@@ -39327,6 +39353,7 @@ var WorkspaceMonthlyHistory = ({
   monthlyDataLoading = false,
   className = ""
 }) => {
+  const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
   const monthBounds = React24.useMemo(() => getMonthKeyBounds(year, month), [year, month]);
   const normalizedRange = React24.useMemo(() => {
     const startKey = rangeStart || monthBounds.startKey;
@@ -39579,7 +39606,10 @@ var WorkspaceMonthlyHistory = ({
             if (isFuture) return "bg-gray-200 dark:bg-gray-700";
             if (!hasData || !shiftData) return "bg-gray-300 dark:bg-gray-600";
             if (showRange && !inRange) return "bg-gray-200 dark:bg-gray-700";
-            return shiftData.efficiency >= 75 ? "bg-green-500 dark:bg-green-600" : "bg-red-500 dark:bg-red-600";
+            const efficiencyColor = getEfficiencyColor(shiftData.efficiency, effectiveLegend);
+            if (efficiencyColor === "green") return "bg-green-500 dark:bg-green-600";
+            if (efficiencyColor === "yellow") return "bg-yellow-500 dark:bg-yellow-600";
+            return "bg-red-500 dark:bg-red-600";
           };
           return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square relative", children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
@@ -39624,7 +39654,7 @@ var WorkspaceMonthlyHistory = ({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-100 p-4", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-600 text-center mb-1", children: "Avg Efficiency" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-2xl font-bold text-center", style: {
-              color: metrics2 && metrics2.avgEfficiency >= 75 ? "#00AB45" : metrics2 && metrics2.avgEfficiency >= 60 ? "#f59e0b" : "#ef4444"
+              color: getEfficiencyHexColor(metrics2?.avgEfficiency ?? 0, effectiveLegend)
             }, children: [
               metrics2?.avgEfficiency ?? 0,
               "%"
@@ -39877,9 +39907,10 @@ var WorkspaceWhatsAppShareButton = ({
     }
   );
 };
-var WorkspacePdfGenerator = ({ workspace, className, idleTimeReasons }) => {
+var WorkspacePdfGenerator = ({ workspace, className, idleTimeReasons, efficiencyLegend }) => {
   const [isGenerating, setIsGenerating] = React24.useState(false);
   const entityConfig = useEntityConfig();
+  const effectiveLegend = efficiencyLegend || DEFAULT_EFFICIENCY_LEGEND;
   const generatePDF = async () => {
     setIsGenerating(true);
     try {
@@ -39973,7 +40004,7 @@ var WorkspacePdfGenerator = ({ workspace, className, idleTimeReasons }) => {
       doc.setFont("helvetica", "normal");
       doc.text("Efficiency:", 25, kpiStartY + kpiSpacing);
       doc.setFont("helvetica", "bold");
-      doc.text(`${(workspace.avg_efficiency || 0).toFixed(1)}% (Target: 80%)`, 120, kpiStartY + kpiSpacing);
+      doc.text(`${(workspace.avg_efficiency || 0).toFixed(1)}% (Target: ${Math.round(effectiveLegend.green_min)}%)`, 120, kpiStartY + kpiSpacing);
       createKPIBox(kpiStartY + kpiSpacing * 2);
       doc.setFont("helvetica", "normal");
       doc.text("PPH (Pieces Per Hour):", 25, kpiStartY + kpiSpacing * 2);
@@ -40150,9 +40181,11 @@ var WorkspaceMonthlyPdfGenerator = ({
   rangeEnd,
   selectedShiftId,
   availableShifts,
+  efficiencyLegend,
   className
 }) => {
   const [isGenerating, setIsGenerating] = React24.useState(false);
+  const effectiveLegend = efficiencyLegend || DEFAULT_EFFICIENCY_LEGEND;
   const generatePDF = async () => {
     setIsGenerating(true);
     try {
@@ -40248,7 +40281,7 @@ var WorkspaceMonthlyPdfGenerator = ({
         avgCycleTime: validShifts.reduce((sum, shift) => sum + shift.cycleTime, 0) / validShifts.length,
         avgPph: validShifts.reduce((sum, shift) => sum + shift.pph, 0) / validShifts.length,
         totalDays: validShifts.length,
-        underperformingDays: validShifts.filter((shift) => shift.efficiency < 75).length
+        underperformingDays: validShifts.filter((shift) => shift.efficiency < effectiveLegend.green_min).length
       } : null;
       const createKPIBox = (y) => {
         doc.setFillColor(255, 255, 255);
@@ -40272,7 +40305,7 @@ var WorkspaceMonthlyPdfGenerator = ({
         doc.setFont("helvetica", "normal");
         doc.text("Average Efficiency:", 25, kpiStartY);
         doc.setFont("helvetica", "bold");
-        doc.text(`${monthlyMetrics.avgEfficiency.toFixed(1)}% (Target: 80%)`, 120, kpiStartY);
+        doc.text(`${monthlyMetrics.avgEfficiency.toFixed(1)}% (Target: ${Math.round(effectiveLegend.green_min)}%)`, 120, kpiStartY);
         createKPIBox(kpiStartY + kpiSpacing);
         doc.setFont("helvetica", "normal");
         doc.text("Average Output:", 25, kpiStartY + kpiSpacing);
@@ -40343,7 +40376,7 @@ var WorkspaceMonthlyPdfGenerator = ({
           doc.text(`${shift.output}`, 60, yPos);
           doc.text(`${shift.idealOutput}`, 95, yPos);
           doc.text(`${shift.efficiency.toFixed(1)}%`, 135, yPos);
-          if (shift.efficiency >= 80) {
+          if (shift.efficiency >= effectiveLegend.green_min) {
             doc.setTextColor(0, 171, 69);
             doc.text("\u2713", 170, yPos);
           } else {
@@ -40488,6 +40521,9 @@ var getWorkspaceStyles = (position, isPlaceholder = false) => {
 };
 var formatPercentRange = (min, max) => {
   const format7 = (value) => Number.isInteger(value) ? `${value}` : value.toFixed(1);
+  if (min >= 100 || max >= 100) {
+    return `${format7(min)}+%`;
+  }
   return `${format7(min)}-${format7(max)}%`;
 };
 var Legend6 = ({ useBottleneckLabel = false, legend }) => {
@@ -51856,7 +51892,9 @@ var ConfigureLegendModal = ({
       });
       if (result.success) {
         setSaveSuccess(true);
-        setTimeout(() => setSaveSuccess(false), 3e3);
+        setTimeout(() => {
+          onClose();
+        }, 1500);
       } else {
         sonner.toast.error(result.error || "Failed to update legend");
       }
@@ -51873,7 +51911,7 @@ var ConfigureLegendModal = ({
     {
       className: "fixed inset-0 bg-gray-900/40 backdrop-blur-sm z-50 flex items-center justify-center transition-opacity duration-300",
       onClick: (e) => {
-        if (e.target === e.currentTarget) {
+        if (e.target === e.currentTarget && !isSaving && !saveSuccess) {
           onClose();
         }
       },
@@ -51887,7 +51925,8 @@ var ConfigureLegendModal = ({
             "button",
             {
               onClick: onClose,
-              className: "text-gray-400 hover:text-gray-600 transition-colors p-1.5 hover:bg-gray-50 rounded-md",
+              disabled: isSaving || saveSuccess,
+              className: "text-gray-400 hover:text-gray-600 transition-colors p-1.5 hover:bg-gray-50 rounded-md disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-gray-400",
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
             }
           )
@@ -52028,30 +52067,49 @@ var ConfigureLegendModal = ({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-4 bg-gray-50 border-t border-gray-100 flex items-center justify-between gap-3 rounded-b-lg", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-[20px]", children: saveSuccess && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-green-600 font-medium flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "w-4 h-4" }),
-            "Saved successfully"
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: onClose,
-                className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shadow-sm transition-all",
-                children: "Cancel"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: handleSave,
-                disabled: !canSave || isSaving,
-                className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shadow-sm transition-all disabled:bg-gray-300 disabled:cursor-not-allowed",
-                children: isSaving ? "Saving..." : "Save Changes"
-              }
-            )
-          ] })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-4 bg-gray-50 border-t border-gray-100 h-[72px] rounded-b-lg relative overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: `absolute inset-0 flex items-center justify-center transition-all duration-500 ease-out ${saveSuccess ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4 pointer-events-none"}`,
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-green-600 bg-green-50 px-4 py-2 rounded-full border border-green-100 shadow-sm", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "w-5 h-5" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "Saved successfully" })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: `flex items-center justify-end gap-3 h-full transition-all duration-300 ease-in-out ${saveSuccess ? "opacity-0 -translate-y-4 pointer-events-none" : "opacity-100 translate-y-0"}`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: onClose,
+                    disabled: isSaving,
+                    className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors disabled:opacity-50",
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: handleSave,
+                    disabled: !canSave || isSaving,
+                    className: "px-5 py-2.5 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shadow-sm transition-all min-w-[140px] flex items-center justify-center gap-2 disabled:bg-blue-400",
+                    children: isSaving ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Saving..." })
+                    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Save Changes" })
+                    ] })
+                  }
+                )
+              ]
+            }
+          )
         ] })
       ] })
     }
@@ -53560,6 +53618,7 @@ var WorkspaceDetailView = ({
   const [usingFallbackData, setUsingFallbackData] = React24.useState(false);
   const [showIdleTime, setShowIdleTime] = React24.useState(false);
   const dashboardConfig = useDashboardConfig();
+  const { legend: efficiencyLegend } = useEfficiencyLegend();
   const isClipsEnabled = dashboardConfig?.clipsConfig?.enabled ?? true;
   dashboardConfig?.supervisorConfig?.enabled || false;
   const effectiveLineId = lineId || selectedLineId;
@@ -53647,6 +53706,9 @@ var WorkspaceDetailView = ({
   const workspace = isHistoricView ? historicMetrics : liveMetrics;
   const loading = (isHistoricView ? historicLoading : liveLoading) || isShiftConfigLoading;
   const error = isHistoricView ? historicError : liveError;
+  const efficiencyValue = workspace?.avg_efficiency ?? 0;
+  const efficiencyTarget = efficiencyLegend.green_min;
+  const efficiencyColor = getEfficiencyHexColor(efficiencyValue, efficiencyLegend);
   const { supervisorName } = useLineSupervisor(workspace?.line_id || lineId);
   React24.useEffect(() => {
     if (onTabChange) {
@@ -54093,7 +54155,8 @@ var WorkspaceDetailView = ({
                 WorkspacePdfGenerator,
                 {
                   workspace,
-                  idleTimeReasons: idleTimeChartData
+                  idleTimeReasons: idleTimeChartData,
+                  efficiencyLegend
                 }
               ) }),
               activeTab === "monthly_history" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5 lg:gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -54107,7 +54170,8 @@ var WorkspaceDetailView = ({
                   selectedYear,
                   rangeStart,
                   rangeEnd,
-                  selectedShiftId: selectedShift
+                  selectedShiftId: selectedShift,
+                  efficiencyLegend
                 }
               ) })
             ] })
@@ -54124,7 +54188,7 @@ var WorkspaceDetailView = ({
                   initial: "initial",
                   animate: "animate",
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-4 text-center", children: "Today's Progress" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-4 text-center", children: "Today's Output" }),
                     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[calc(100%-3rem)]", children: /* @__PURE__ */ jsxRuntime.jsx(
                       OutputProgressChart,
                       {
@@ -54216,11 +54280,15 @@ var WorkspaceDetailView = ({
                 /* @__PURE__ */ jsxRuntime.jsxs(Card2, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-lg text-center", children: "Efficiency" }) }),
                   /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { className: "flex-1 flex items-center justify-center py-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: `text-5xl font-bold ${(workspace.avg_efficiency || 0) >= 80 ? "text-green-500" : "text-red-500"}`, children: [
-                      (workspace.avg_efficiency || 0).toFixed(1),
+                    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-5xl font-bold", style: { color: efficiencyColor }, children: [
+                      efficiencyValue.toFixed(1),
                       "%"
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-2", children: "Target: 80%" })
+                    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-500 mt-2", children: [
+                      "Target: ",
+                      Math.round(efficiencyTarget),
+                      "%"
+                    ] })
                   ] }) })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs(Card2, { children: [
@@ -54244,7 +54312,7 @@ var WorkspaceDetailView = ({
                     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-2", children: "Total idle time" })
                   ] }) })
                 ] })
-              ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(WorkspaceMetricCards, { workspace, className: "flex-1" }) })
+              ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(WorkspaceMetricCards, { workspace, legend: efficiencyLegend, className: "flex-1" }) })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden lg:flex lg:flex-col lg:h-full", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-[50%] grid grid-cols-1 lg:grid-cols-10 gap-3 mb-3", children: [
@@ -54256,7 +54324,7 @@ var WorkspaceDetailView = ({
                     initial: "initial",
                     animate: "animate",
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-4 text-center", children: "Today's Progress" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-4 text-center", children: "Today's Output" }),
                       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[calc(100%-3rem)]", children: /* @__PURE__ */ jsxRuntime.jsx(
                         OutputProgressChart,
                         {
@@ -54347,11 +54415,15 @@ var WorkspaceDetailView = ({
                 /* @__PURE__ */ jsxRuntime.jsxs(Card2, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-lg text-center", children: "Efficiency" }) }),
                   /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: `text-5xl font-bold ${(workspace.avg_efficiency || 0) >= 80 ? "text-green-500" : "text-red-500"}`, children: [
-                      (workspace.avg_efficiency || 0).toFixed(1),
+                    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-5xl font-bold", style: { color: efficiencyColor }, children: [
+                      efficiencyValue.toFixed(1),
                       "%"
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-2", children: "Target: 80%" })
+                    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-500 mt-2", children: [
+                      "Target: ",
+                      Math.round(efficiencyTarget),
+                      "%"
+                    ] })
                   ] }) })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs(Card2, { children: [
@@ -54375,7 +54447,7 @@ var WorkspaceDetailView = ({
                     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-2", children: "Total idle time" })
                   ] }) })
                 ] })
-              ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[50%] flex", children: /* @__PURE__ */ jsxRuntime.jsx(WorkspaceMetricCards, { workspace, className: "flex-1" }) })
+              ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[50%] flex", children: /* @__PURE__ */ jsxRuntime.jsx(WorkspaceMetricCards, { workspace, legend: efficiencyLegend, className: "flex-1" }) })
             ] })
           ] }),
           activeTab === "monthly_history" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-[calc(100vh-10rem)] overflow-y-auto px-2 sm:px-4 lg:px-0", children: [
@@ -54397,6 +54469,7 @@ var WorkspaceDetailView = ({
                 timezone,
                 monthlyDataLoading,
                 availableShifts: shiftConfig?.shifts?.map((s) => ({ id: s.shiftId, name: s.shiftName })),
+                legend: efficiencyLegend,
                 onDateSelect: (selectedDate, shiftId) => {
                   if (onDateSelect) {
                     onDateSelect(selectedDate, shiftId);

package/dist/index.mjs

@@ -9421,6 +9421,19 @@ function getEfficiencyColorClasses(efficiency, legend = DEFAULT_EFFICIENCY_LEGEN
       return "bg-gray-300/90";
   }
 }
+function getEfficiencyHexColor(efficiency, legend = DEFAULT_EFFICIENCY_LEGEND) {
+  const color2 = getEfficiencyColor(efficiency, legend);
+  switch (color2) {
+    case "green":
+      return "#00AB45";
+    case "yellow":
+      return "#FFB020";
+    case "red":
+      return "#E34329";
+    default:
+      return "#D1D5DB";
+  }
+}
 
 // src/lib/hooks/useDashboardMetrics.ts
 var parseEfficiencyLegend = (legend) => {
@@ -28008,8 +28021,13 @@ var CardFooter2 = (props) => {
 };
 var WorkspaceMetricCardsImpl = ({
   workspace,
-  className
+  className,
+  legend
 }) => {
+  const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
+  const efficiencyValue = workspace.avg_efficiency || 0;
+  const efficiencyTarget = effectiveLegend.green_min;
+  const efficiencyColor = getEfficiencyHexColor(efficiencyValue, effectiveLegend);
   return /* @__PURE__ */ jsxs("div", { className: `grid grid-cols-1 gap-4 sm:gap-3 sm:grid-cols-2 lg:grid-cols-5 w-full h-full ${className || ""}`, children: [
     /* @__PURE__ */ jsxs(Card2, { className: "flex flex-col bg-white shadow-sm h-full min-h-[150px] sm:min-h-0", children: [
       /* @__PURE__ */ jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsx(CardTitle2, { className: "text-lg text-center", children: "Pieces Lost" }) }),
@@ -28021,11 +28039,15 @@ var WorkspaceMetricCardsImpl = ({
     /* @__PURE__ */ jsxs(Card2, { className: "flex flex-col bg-white shadow-sm h-full min-h-[150px] sm:min-h-0", children: [
       /* @__PURE__ */ jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsx(CardTitle2, { className: "text-lg text-center", children: "Efficiency" }) }),
       /* @__PURE__ */ jsx(CardContent2, { className: "flex-1 flex items-center justify-center py-6 sm:py-3", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsxs("p", { className: `text-5xl font-bold ${(workspace.avg_efficiency || 0) >= 80 ? "text-green-500" : "text-red-500"}`, children: [
-          (workspace.avg_efficiency || 0).toFixed(1),
+        /* @__PURE__ */ jsxs("p", { className: "text-5xl font-bold", style: { color: efficiencyColor }, children: [
+          efficiencyValue.toFixed(1),
           "%"
         ] }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-2", children: "Target: 80%" })
+        /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 mt-2", children: [
+          "Target: ",
+          Math.round(efficiencyTarget),
+          "%"
+        ] })
       ] }) })
     ] }),
     /* @__PURE__ */ jsxs(Card2, { className: "flex flex-col bg-white shadow-sm h-full min-h-[150px] sm:min-h-0", children: [
@@ -38966,6 +38988,7 @@ var WorkspaceHistoryCalendar = ({
   month,
   year,
   workspaceId,
+  legend,
   selectedShiftId = 0,
   onMonthNavigate,
   onShiftChange,
@@ -38975,6 +38998,7 @@ var WorkspaceHistoryCalendar = ({
   const { dateTimeConfig } = useDashboardConfig();
   const configuredTimezone = dateTimeConfig?.defaultTimezone || "Asia/Kolkata";
   const [animationComplete, setAnimationComplete] = useState(false);
+  const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
   const hasRealData = (shift) => {
     if (shift.hasData !== void 0) return shift.hasData;
     return shift.efficiency > 0 || shift.output > 0 || shift.cycleTime > 0 || shift.pph > 0 || shift.idealOutput > 0 || shift.idleTime > 0;
@@ -39041,7 +39065,7 @@ var WorkspaceHistoryCalendar = ({
       return [];
     });
     if (validShifts.length === 0) return null;
-    const badShiftsCount = validShifts.filter((shift) => shift.efficiency < 75).length;
+    const badShiftsCount = validShifts.filter((shift) => shift.efficiency < effectiveLegend.green_min).length;
     const totalIdleTime = validShifts.reduce((sum, shift) => sum + shift.idleTime, 0);
     const avgIdleTime = Math.round(totalIdleTime / validShifts.length);
     return {
@@ -39051,7 +39075,7 @@ var WorkspaceHistoryCalendar = ({
       badDaysCount: badShiftsCount,
       totalDays: validShifts.length
     };
-  }, [data, month, year, configuredTimezone, selectedShiftId]);
+  }, [data, month, year, configuredTimezone, selectedShiftId, effectiveLegend]);
   const handleDayClick = useCallback((day, shiftId) => {
     if (!day || isFutureDate(day.date)) return;
     const year2 = day.date.getFullYear();
@@ -39098,10 +39122,11 @@ var WorkspaceHistoryCalendar = ({
     compareDate.setHours(0, 0, 0, 0);
     if (compareDate > istNow) return "bg-gray-200";
     if (!hasData) return "bg-gray-300";
-    if (efficiency >= 80) return "bg-[#00AB45]/90";
-    if (efficiency >= 70) return "bg-[#FFB020]/90";
+    const efficiencyColor = getEfficiencyColor(efficiency, effectiveLegend);
+    if (efficiencyColor === "green") return "bg-[#00AB45]/90";
+    if (efficiencyColor === "yellow") return "bg-[#FFB020]/90";
     return "bg-[#E34329]/90";
-  }, [configuredTimezone]);
+  }, [configuredTimezone, effectiveLegend]);
   const renderStats = (shift, date) => {
     const istNow = getTimeInZoneAsDate(configuredTimezone);
     const compareDate = toZonedTime(date, configuredTimezone);
@@ -39289,6 +39314,7 @@ var WorkspaceMonthlyHistory = ({
   rangeStart,
   rangeEnd,
   timezone,
+  legend,
   selectedShiftId = 0,
   onDateSelect,
   onMonthNavigate,
@@ -39298,6 +39324,7 @@ var WorkspaceMonthlyHistory = ({
   monthlyDataLoading = false,
   className = ""
 }) => {
+  const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
   const monthBounds = useMemo(() => getMonthKeyBounds(year, month), [year, month]);
   const normalizedRange = useMemo(() => {
     const startKey = rangeStart || monthBounds.startKey;
@@ -39550,7 +39577,10 @@ var WorkspaceMonthlyHistory = ({
             if (isFuture) return "bg-gray-200 dark:bg-gray-700";
             if (!hasData || !shiftData) return "bg-gray-300 dark:bg-gray-600";
             if (showRange && !inRange) return "bg-gray-200 dark:bg-gray-700";
-            return shiftData.efficiency >= 75 ? "bg-green-500 dark:bg-green-600" : "bg-red-500 dark:bg-red-600";
+            const efficiencyColor = getEfficiencyColor(shiftData.efficiency, effectiveLegend);
+            if (efficiencyColor === "green") return "bg-green-500 dark:bg-green-600";
+            if (efficiencyColor === "yellow") return "bg-yellow-500 dark:bg-yellow-600";
+            return "bg-red-500 dark:bg-red-600";
           };
           return /* @__PURE__ */ jsx("div", { className: "aspect-square relative", children: /* @__PURE__ */ jsx(
             "div",
@@ -39595,7 +39625,7 @@ var WorkspaceMonthlyHistory = ({
           /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-100 p-4", children: [
             /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-600 text-center mb-1", children: "Avg Efficiency" }),
             /* @__PURE__ */ jsxs("div", { className: "text-2xl font-bold text-center", style: {
-              color: metrics2 && metrics2.avgEfficiency >= 75 ? "#00AB45" : metrics2 && metrics2.avgEfficiency >= 60 ? "#f59e0b" : "#ef4444"
+              color: getEfficiencyHexColor(metrics2?.avgEfficiency ?? 0, effectiveLegend)
             }, children: [
               metrics2?.avgEfficiency ?? 0,
               "%"
@@ -39848,9 +39878,10 @@ var WorkspaceWhatsAppShareButton = ({
     }
   );
 };
-var WorkspacePdfGenerator = ({ workspace, className, idleTimeReasons }) => {
+var WorkspacePdfGenerator = ({ workspace, className, idleTimeReasons, efficiencyLegend }) => {
   const [isGenerating, setIsGenerating] = useState(false);
   const entityConfig = useEntityConfig();
+  const effectiveLegend = efficiencyLegend || DEFAULT_EFFICIENCY_LEGEND;
   const generatePDF = async () => {
     setIsGenerating(true);
     try {
@@ -39944,7 +39975,7 @@ var WorkspacePdfGenerator = ({ workspace, className, idleTimeReasons }) => {
       doc.setFont("helvetica", "normal");
       doc.text("Efficiency:", 25, kpiStartY + kpiSpacing);
       doc.setFont("helvetica", "bold");
-      doc.text(`${(workspace.avg_efficiency || 0).toFixed(1)}% (Target: 80%)`, 120, kpiStartY + kpiSpacing);
+      doc.text(`${(workspace.avg_efficiency || 0).toFixed(1)}% (Target: ${Math.round(effectiveLegend.green_min)}%)`, 120, kpiStartY + kpiSpacing);
       createKPIBox(kpiStartY + kpiSpacing * 2);
       doc.setFont("helvetica", "normal");
       doc.text("PPH (Pieces Per Hour):", 25, kpiStartY + kpiSpacing * 2);
@@ -40121,9 +40152,11 @@ var WorkspaceMonthlyPdfGenerator = ({
   rangeEnd,
   selectedShiftId,
   availableShifts,
+  efficiencyLegend,
   className
 }) => {
   const [isGenerating, setIsGenerating] = useState(false);
+  const effectiveLegend = efficiencyLegend || DEFAULT_EFFICIENCY_LEGEND;
   const generatePDF = async () => {
     setIsGenerating(true);
     try {
@@ -40219,7 +40252,7 @@ var WorkspaceMonthlyPdfGenerator = ({
         avgCycleTime: validShifts.reduce((sum, shift) => sum + shift.cycleTime, 0) / validShifts.length,
         avgPph: validShifts.reduce((sum, shift) => sum + shift.pph, 0) / validShifts.length,
         totalDays: validShifts.length,
-        underperformingDays: validShifts.filter((shift) => shift.efficiency < 75).length
+        underperformingDays: validShifts.filter((shift) => shift.efficiency < effectiveLegend.green_min).length
       } : null;
       const createKPIBox = (y) => {
         doc.setFillColor(255, 255, 255);
@@ -40243,7 +40276,7 @@ var WorkspaceMonthlyPdfGenerator = ({
         doc.setFont("helvetica", "normal");
         doc.text("Average Efficiency:", 25, kpiStartY);
         doc.setFont("helvetica", "bold");
-        doc.text(`${monthlyMetrics.avgEfficiency.toFixed(1)}% (Target: 80%)`, 120, kpiStartY);
+        doc.text(`${monthlyMetrics.avgEfficiency.toFixed(1)}% (Target: ${Math.round(effectiveLegend.green_min)}%)`, 120, kpiStartY);
         createKPIBox(kpiStartY + kpiSpacing);
         doc.setFont("helvetica", "normal");
         doc.text("Average Output:", 25, kpiStartY + kpiSpacing);
@@ -40314,7 +40347,7 @@ var WorkspaceMonthlyPdfGenerator = ({
           doc.text(`${shift.output}`, 60, yPos);
           doc.text(`${shift.idealOutput}`, 95, yPos);
           doc.text(`${shift.efficiency.toFixed(1)}%`, 135, yPos);
-          if (shift.efficiency >= 80) {
+          if (shift.efficiency >= effectiveLegend.green_min) {
             doc.setTextColor(0, 171, 69);
             doc.text("\u2713", 170, yPos);
           } else {
@@ -40459,6 +40492,9 @@ var getWorkspaceStyles = (position, isPlaceholder = false) => {
 };
 var formatPercentRange = (min, max) => {
   const format7 = (value) => Number.isInteger(value) ? `${value}` : value.toFixed(1);
+  if (min >= 100 || max >= 100) {
+    return `${format7(min)}+%`;
+  }
   return `${format7(min)}-${format7(max)}%`;
 };
 var Legend6 = ({ useBottleneckLabel = false, legend }) => {
@@ -51827,7 +51863,9 @@ var ConfigureLegendModal = ({
       });
       if (result.success) {
         setSaveSuccess(true);
-        setTimeout(() => setSaveSuccess(false), 3e3);
+        setTimeout(() => {
+          onClose();
+        }, 1500);
       } else {
         toast.error(result.error || "Failed to update legend");
       }
@@ -51844,7 +51882,7 @@ var ConfigureLegendModal = ({
     {
       className: "fixed inset-0 bg-gray-900/40 backdrop-blur-sm z-50 flex items-center justify-center transition-opacity duration-300",
       onClick: (e) => {
-        if (e.target === e.currentTarget) {
+        if (e.target === e.currentTarget && !isSaving && !saveSuccess) {
           onClose();
         }
       },
@@ -51858,7 +51896,8 @@ var ConfigureLegendModal = ({
             "button",
             {
               onClick: onClose,
-              className: "text-gray-400 hover:text-gray-600 transition-colors p-1.5 hover:bg-gray-50 rounded-md",
+              disabled: isSaving || saveSuccess,
+              className: "text-gray-400 hover:text-gray-600 transition-colors p-1.5 hover:bg-gray-50 rounded-md disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-gray-400",
               children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
             }
           )
@@ -51999,30 +52038,49 @@ var ConfigureLegendModal = ({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 bg-gray-50 border-t border-gray-100 flex items-center justify-between gap-3 rounded-b-lg", children: [
-          /* @__PURE__ */ jsx("div", { className: "min-h-[20px]", children: saveSuccess && /* @__PURE__ */ jsxs("span", { className: "text-sm text-green-600 font-medium flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx(CheckCircle2, { className: "w-4 h-4" }),
-            "Saved successfully"
-          ] }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-3", children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: onClose,
-                className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shadow-sm transition-all",
-                children: "Cancel"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: handleSave,
-                disabled: !canSave || isSaving,
-                className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shadow-sm transition-all disabled:bg-gray-300 disabled:cursor-not-allowed",
-                children: isSaving ? "Saving..." : "Save Changes"
-              }
-            )
-          ] })
+        /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 bg-gray-50 border-t border-gray-100 h-[72px] rounded-b-lg relative overflow-hidden", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `absolute inset-0 flex items-center justify-center transition-all duration-500 ease-out ${saveSuccess ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4 pointer-events-none"}`,
+              children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-green-600 bg-green-50 px-4 py-2 rounded-full border border-green-100 shadow-sm", children: [
+                /* @__PURE__ */ jsx(CheckCircle2, { className: "w-5 h-5" }),
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Saved successfully" })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `flex items-center justify-end gap-3 h-full transition-all duration-300 ease-in-out ${saveSuccess ? "opacity-0 -translate-y-4 pointer-events-none" : "opacity-100 translate-y-0"}`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: onClose,
+                    disabled: isSaving,
+                    className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors disabled:opacity-50",
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: handleSave,
+                    disabled: !canSave || isSaving,
+                    className: "px-5 py-2.5 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shadow-sm transition-all min-w-[140px] flex items-center justify-center gap-2 disabled:bg-blue-400",
+                    children: isSaving ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin" }),
+                      /* @__PURE__ */ jsx("span", { children: "Saving..." })
+                    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(Check, { className: "w-4 h-4" }),
+                      /* @__PURE__ */ jsx("span", { children: "Save Changes" })
+                    ] })
+                  }
+                )
+              ]
+            }
+          )
         ] })
       ] })
     }
@@ -53531,6 +53589,7 @@ var WorkspaceDetailView = ({
   const [usingFallbackData, setUsingFallbackData] = useState(false);
   const [showIdleTime, setShowIdleTime] = useState(false);
   const dashboardConfig = useDashboardConfig();
+  const { legend: efficiencyLegend } = useEfficiencyLegend();
   const isClipsEnabled = dashboardConfig?.clipsConfig?.enabled ?? true;
   dashboardConfig?.supervisorConfig?.enabled || false;
   const effectiveLineId = lineId || selectedLineId;
@@ -53618,6 +53677,9 @@ var WorkspaceDetailView = ({
   const workspace = isHistoricView ? historicMetrics : liveMetrics;
   const loading = (isHistoricView ? historicLoading : liveLoading) || isShiftConfigLoading;
   const error = isHistoricView ? historicError : liveError;
+  const efficiencyValue = workspace?.avg_efficiency ?? 0;
+  const efficiencyTarget = efficiencyLegend.green_min;
+  const efficiencyColor = getEfficiencyHexColor(efficiencyValue, efficiencyLegend);
   const { supervisorName } = useLineSupervisor(workspace?.line_id || lineId);
   useEffect(() => {
     if (onTabChange) {
@@ -54064,7 +54126,8 @@ var WorkspaceDetailView = ({
                 WorkspacePdfGenerator,
                 {
                   workspace,
-                  idleTimeReasons: idleTimeChartData
+                  idleTimeReasons: idleTimeChartData,
+                  efficiencyLegend
                 }
               ) }),
               activeTab === "monthly_history" && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 lg:gap-2", children: /* @__PURE__ */ jsx(
@@ -54078,7 +54141,8 @@ var WorkspaceDetailView = ({
                   selectedYear,
                   rangeStart,
                   rangeEnd,
-                  selectedShiftId: selectedShift
+                  selectedShiftId: selectedShift,
+                  efficiencyLegend
                 }
               ) })
             ] })
@@ -54095,7 +54159,7 @@ var WorkspaceDetailView = ({
                   initial: "initial",
                   animate: "animate",
                   children: [
-                    /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-4 text-center", children: "Today's Progress" }),
+                    /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-4 text-center", children: "Today's Output" }),
                     /* @__PURE__ */ jsx("div", { className: "h-[calc(100%-3rem)]", children: /* @__PURE__ */ jsx(
                       OutputProgressChart,
                       {
@@ -54187,11 +54251,15 @@ var WorkspaceDetailView = ({
                 /* @__PURE__ */ jsxs(Card2, { children: [
                   /* @__PURE__ */ jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsx(CardTitle2, { className: "text-lg text-center", children: "Efficiency" }) }),
                   /* @__PURE__ */ jsx(CardContent2, { className: "flex-1 flex items-center justify-center py-6", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-                    /* @__PURE__ */ jsxs("p", { className: `text-5xl font-bold ${(workspace.avg_efficiency || 0) >= 80 ? "text-green-500" : "text-red-500"}`, children: [
-                      (workspace.avg_efficiency || 0).toFixed(1),
+                    /* @__PURE__ */ jsxs("p", { className: "text-5xl font-bold", style: { color: efficiencyColor }, children: [
+                      efficiencyValue.toFixed(1),
                       "%"
                     ] }),
-                    /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-2", children: "Target: 80%" })
+                    /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 mt-2", children: [
+                      "Target: ",
+                      Math.round(efficiencyTarget),
+                      "%"
+                    ] })
                   ] }) })
                 ] }),
                 /* @__PURE__ */ jsxs(Card2, { children: [
@@ -54215,7 +54283,7 @@ var WorkspaceDetailView = ({
                     /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-2", children: "Total idle time" })
                   ] }) })
                 ] })
-              ] }) : /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(WorkspaceMetricCards, { workspace, className: "flex-1" }) })
+              ] }) : /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(WorkspaceMetricCards, { workspace, legend: efficiencyLegend, className: "flex-1" }) })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "hidden lg:flex lg:flex-col lg:h-full", children: [
               /* @__PURE__ */ jsxs("div", { className: "h-[50%] grid grid-cols-1 lg:grid-cols-10 gap-3 mb-3", children: [
@@ -54227,7 +54295,7 @@ var WorkspaceDetailView = ({
                     initial: "initial",
                     animate: "animate",
                     children: [
-                      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-4 text-center", children: "Today's Progress" }),
+                      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-4 text-center", children: "Today's Output" }),
                       /* @__PURE__ */ jsx("div", { className: "h-[calc(100%-3rem)]", children: /* @__PURE__ */ jsx(
                         OutputProgressChart,
                         {
@@ -54318,11 +54386,15 @@ var WorkspaceDetailView = ({
                 /* @__PURE__ */ jsxs(Card2, { children: [
                   /* @__PURE__ */ jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsx(CardTitle2, { className: "text-lg text-center", children: "Efficiency" }) }),
                   /* @__PURE__ */ jsx(CardContent2, { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-                    /* @__PURE__ */ jsxs("p", { className: `text-5xl font-bold ${(workspace.avg_efficiency || 0) >= 80 ? "text-green-500" : "text-red-500"}`, children: [
-                      (workspace.avg_efficiency || 0).toFixed(1),
+                    /* @__PURE__ */ jsxs("p", { className: "text-5xl font-bold", style: { color: efficiencyColor }, children: [
+                      efficiencyValue.toFixed(1),
                       "%"
                     ] }),
-                    /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-2", children: "Target: 80%" })
+                    /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 mt-2", children: [
+                      "Target: ",
+                      Math.round(efficiencyTarget),
+                      "%"
+                    ] })
                   ] }) })
                 ] }),
                 /* @__PURE__ */ jsxs(Card2, { children: [
@@ -54346,7 +54418,7 @@ var WorkspaceDetailView = ({
                     /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-2", children: "Total idle time" })
                   ] }) })
                 ] })
-              ] }) : /* @__PURE__ */ jsx("div", { className: "h-[50%] flex", children: /* @__PURE__ */ jsx(WorkspaceMetricCards, { workspace, className: "flex-1" }) })
+              ] }) : /* @__PURE__ */ jsx("div", { className: "h-[50%] flex", children: /* @__PURE__ */ jsx(WorkspaceMetricCards, { workspace, legend: efficiencyLegend, className: "flex-1" }) })
             ] })
           ] }),
           activeTab === "monthly_history" && /* @__PURE__ */ jsxs("div", { className: "h-[calc(100vh-10rem)] overflow-y-auto px-2 sm:px-4 lg:px-0", children: [
@@ -54368,6 +54440,7 @@ var WorkspaceDetailView = ({
                 timezone,
                 monthlyDataLoading,
                 availableShifts: shiftConfig?.shifts?.map((s) => ({ id: s.shiftId, name: s.shiftName })),
+                legend: efficiencyLegend,
                 onDateSelect: (selectedDate, shiftId) => {
                   if (onDateSelect) {
                     onDateSelect(selectedDate, shiftId);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optifye/dashboard-core",
-  "version": "6.10.18",
+  "version": "6.10.19",
   "description": "Reusable UI & logic for Optifye dashboard",
   "main": "dist/index.js",
   "module": "dist/index.mjs",