@optifye/dashboard-core 6.12.8 → 6.12.10

package/dist/index.mjs

@@ -16,7 +16,7 @@ import { BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, ReferenceLine, Too
 import { Slot } from '@radix-ui/react-slot';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { DayPicker, useNavigation as useNavigation$1 } from 'react-day-picker';
-import { AdjustmentsHorizontalIcon, ClockIcon, UsersIcon, UserCircleIcon, TicketIcon, CurrencyDollarIcon, QuestionMarkCircleIcon, XMarkIcon, InformationCircleIcon, ArrowRightIcon, Bars3Icon, HomeIcon, VideoCameraIcon, TrophyIcon, ChartBarIcon, LightBulbIcon, CubeIcon, HeartIcon, Cog6ToothIcon, ChevronRightIcon, ArrowRightStartOnRectangleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, CalendarIcon, ChevronDownIcon, ChevronLeftIcon, EnvelopeIcon, DocumentTextIcon, ChevronUpIcon, ArrowDownTrayIcon, CheckCircleIcon, ChatBubbleLeftRightIcon, XCircleIcon, FunnelIcon, EyeIcon, ArrowLeftIcon, PlayCircleIcon } from '@heroicons/react/24/outline';
+import { AdjustmentsHorizontalIcon, ClockIcon, UsersIcon, UserCircleIcon, TicketIcon, CurrencyDollarIcon, QuestionMarkCircleIcon, XMarkIcon, ArrowRightIcon, Bars3Icon, HomeIcon, VideoCameraIcon, TrophyIcon, ChartBarIcon, LightBulbIcon, CubeIcon, HeartIcon, Cog6ToothIcon, ChevronRightIcon, ArrowRightStartOnRectangleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, CalendarIcon, ChevronDownIcon, ChevronLeftIcon, EnvelopeIcon, DocumentTextIcon, ChevronUpIcon, ArrowDownTrayIcon, CheckCircleIcon, ChatBubbleLeftRightIcon, XCircleIcon, FunnelIcon, EyeIcon, InformationCircleIcon, ArrowLeftIcon, PlayCircleIcon } from '@heroicons/react/24/outline';
 import { CheckIcon } from '@heroicons/react/24/solid';
 import html2canvas from 'html2canvas';
 import jsPDF, { jsPDF as jsPDF$1 } from 'jspdf';
@@ -4522,11 +4522,12 @@ var fetchLineDummySkuId = async (supabase, lineId, skuTable = "skus") => {
 var fetchLineSkuCatalog = async (supabase, lineId, skuTable = "skus") => {
   if (!supabase || !lineId) return [];
   try {
-    const { data } = await supabase.from(skuTable).select("id, sku_id, sku_definition").eq("line_id", lineId).eq("is_active", true);
+    const { data } = await supabase.from(skuTable).select("id, sku_id, display_name, sku_definition").eq("line_id", lineId).eq("is_active", true);
     if (Array.isArray(data)) {
       return data.filter((item) => item && typeof item.id === "string").map((item) => ({
         id: item.id,
         sku_id: typeof item.sku_id === "string" ? item.sku_id : null,
+        display_name: typeof item.display_name === "string" ? item.display_name : null,
         sku_definition: typeof item.sku_definition === "string" ? item.sku_definition : null
       }));
     }
@@ -4547,10 +4548,12 @@ var buildLineSkuBreakdown = (rows, skuCatalog) => {
     if (!skuUuid) return null;
     const meta = catalogById.get(skuUuid);
     const skuCode = meta?.sku_id || skuUuid;
+    const skuDisplayName = meta?.display_name?.trim() || skuCode;
     const isDummy = meta?.sku_definition === "dummy_definition";
     return {
       sku_id: skuUuid,
       sku_code: skuCode,
+      sku_display_name: skuDisplayName,
       is_dummy: isDummy,
       current_output: safeInt(row.current_output),
       ideal_output: safeInt(row.ideal_output),
@@ -13134,6 +13137,7 @@ var normalizeSkuBreakdown = (raw) => {
   return {
     sku_id: typeof item.sku_id === "string" ? item.sku_id : String(item.sku_id ?? ""),
     sku_code: typeof item.sku_code === "string" ? item.sku_code : String(item.sku_code ?? ""),
+    sku_display_name: typeof item.sku_display_name === "string" ? item.sku_display_name : coerceOptionalString(item.sku_display_name),
     sku_definition: typeof item.sku_definition === "string" ? item.sku_definition : String(item.sku_definition ?? ""),
     is_dummy: Boolean(item.is_dummy),
     total_output: coerceNumber(item.total_output, 0),
@@ -13152,6 +13156,7 @@ var normalizeSkuSegment = (raw) => {
   return {
     sku_id: typeof item.sku_id === "string" ? item.sku_id : String(item.sku_id ?? ""),
     sku_code: typeof item.sku_code === "string" ? item.sku_code : String(item.sku_code ?? ""),
+    sku_display_name: typeof item.sku_display_name === "string" ? item.sku_display_name : coerceOptionalString(item.sku_display_name),
     start_time: typeof item.start_time === "string" ? item.start_time : String(item.start_time ?? ""),
     end_time: coerceOptionalString(item.end_time),
     pph_threshold: coerceNumber(item.pph_threshold, 0)
@@ -34427,6 +34432,13 @@ var LineChart = React144__default.memo(LineChartComponent, (prevProps, nextProps
   return true;
 });
 LineChart.displayName = "LineChart";
+
+// src/lib/utils/skuDisplay.ts
+var clean = (value) => typeof value === "string" ? value.trim() : "";
+var getSkuDisplayName = (sku) => {
+  if (!sku) return "SKU";
+  return clean(sku.sku_display_name) || clean(sku.display_name) || clean(sku.sku_code) || clean(sku.sku_id) || clean(sku.id) || "SKU";
+};
 var formatPercentage = (current, target) => {
   if (!target || target <= 0) return "0.0";
   return (current / target * 100).toFixed(1);
@@ -34503,12 +34515,13 @@ var SkuRow = ({ sku, isSelected, isLive, onSelect }) => {
   const ratio = target > 0 ? Math.min(current / target, 1) : 0;
   const fillColor = "#3b82f6";
   const percentage = formatPercentage(current, target);
+  const skuLabel = getSkuDisplayName(sku);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: `space-y-1.5 p-2 rounded-lg cursor-pointer transition-all ${isSelected ? "ring-2 ring-blue-500 ring-dashed bg-blue-50/30" : "hover:bg-gray-50"}`,
       onClick: () => onSelect?.(isSelected ? null : sku.sku_id),
-      "data-testid": `sku-progress-row-${sku.sku_code}`,
+      "data-testid": `sku-progress-row-${sku.sku_id}`,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 truncate", children: [
@@ -34516,8 +34529,8 @@ var SkuRow = ({ sku, isSelected, isLive, onSelect }) => {
               "span",
               {
                 className: "text-sm font-semibold text-gray-800 truncate",
-                title: sku.sku_code,
-                children: sku.sku_code
+                title: skuLabel,
+                children: skuLabel
               }
             ),
             isLive && /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-green-500 shrink-0 shadow-[0_0_4px_rgba(34,197,94,0.6)]", title: "Currently running" })
@@ -34536,7 +34549,7 @@ var SkuRow = ({ sku, isSelected, isLive, onSelect }) => {
             "aria-valuenow": Math.round(current),
             "aria-valuemin": 0,
             "aria-valuemax": Math.round(target),
-            "aria-label": `${sku.sku_code} output progress`,
+            "aria-label": `${skuLabel} output progress`,
             children: /* @__PURE__ */ jsx(
               "div",
               {
@@ -36507,7 +36520,7 @@ var HourlyOutputChartComponent = ({
       const end = Math.max(start, Math.min(nextOffset, timelineEndOffset));
       return {
         skuId: entry.segment.sku_id,
-        label: entry.segment.sku_code,
+        label: getSkuDisplayName(entry.segment),
         start,
         end,
         pphThreshold: entry.segment.pph_threshold ?? pphThreshold
@@ -37383,7 +37396,7 @@ var HourlyOutputChart = React144__default.memo(
     for (let i = 0; i < prevSegments.length; i += 1) {
       const prevSeg = prevSegments[i];
       const nextSeg = nextSegments[i];
-      if (prevSeg.sku_id !== nextSeg.sku_id || prevSeg.sku_code !== nextSeg.sku_code || prevSeg.start_time !== nextSeg.start_time || prevSeg.end_time !== nextSeg.end_time) {
+      if (prevSeg.sku_id !== nextSeg.sku_id || prevSeg.sku_code !== nextSeg.sku_code || prevSeg.sku_display_name !== nextSeg.sku_display_name || prevSeg.start_time !== nextSeg.start_time || prevSeg.end_time !== nextSeg.end_time) {
         return false;
       }
     }
@@ -38372,6 +38385,7 @@ var WorkspaceMetricCardsImpl = ({
   const pphThreshold = activeSku ? activeSku.pph_threshold : workspace.pph_threshold;
   const cycleValue = activeSku ? activeSku.avg_cycle_time : workspace.avg_cycle_time;
   const cycleStandard = activeSku ? activeSku.ideal_cycle_time : workspace.ideal_cycle_time;
+  const displaySkuLabel = displaySku ? getSkuDisplayName(displaySku) : "";
   const efficiencyValue = workspace.avg_efficiency || 0;
   const efficiencyTarget = effectiveLegend.green_min;
   const efficiencyColor = getEfficiencyHexColor(efficiencyValue, effectiveLegend);
@@ -38402,7 +38416,7 @@ var WorkspaceMetricCardsImpl = ({
     /* @__PURE__ */ jsxs(Card2, { className: "flex flex-col bg-white shadow-sm h-full min-h-[150px] sm:min-h-0", children: [
       /* @__PURE__ */ jsxs(CardHeader2, { className: "pb-2 flex-none text-center", children: [
         /* @__PURE__ */ jsx(CardTitle2, { className: "text-lg", children: "PPH" }),
-        displaySku && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-blue-600 mt-1 truncate px-2", title: displaySku.sku_code, children: displaySku.sku_code })
+        displaySku && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-blue-600 mt-1 truncate px-2", title: displaySkuLabel, children: displaySkuLabel })
       ] }),
       /* @__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__ */ jsx("p", { className: `text-5xl font-bold ${pphValue >= pphThreshold ? "text-green-500" : "text-red-500"}`, children: pphValue.toFixed(1) }),
@@ -38415,7 +38429,7 @@ var WorkspaceMetricCardsImpl = ({
     /* @__PURE__ */ jsxs(Card2, { className: "flex flex-col bg-white shadow-sm h-full min-h-[150px] sm:min-h-0", children: [
       /* @__PURE__ */ jsxs(CardHeader2, { className: "pb-2 flex-none text-center", children: [
         /* @__PURE__ */ jsx(CardTitle2, { className: "text-lg", children: "Avg. Cycle Time" }),
-        displaySku && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-blue-600 mt-1 truncate px-2", title: displaySku.sku_code, children: displaySku.sku_code })
+        displaySku && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-blue-600 mt-1 truncate px-2", title: displaySkuLabel, children: displaySkuLabel })
       ] }),
       /* @__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__ */ jsx("p", { className: `text-5xl font-bold ${cycleValue > (cycleStandard || 0) ? "text-red-500" : "text-green-500"}`, children: cycleValue.toFixed(1) }),
@@ -51336,19 +51350,12 @@ var fitTextWithEllipsis = (doc, text, maxWidth) => {
 var LinePdfGenerator = ({
   lineInfo,
   workspaceData,
-  issueResolutionSummary,
   shiftName,
   className,
   shiftBreaks = [],
   reportTimezone = "Asia/Kolkata"
 }) => {
   const [isGenerating, setIsGenerating] = useState(false);
-  const formatResolutionDuration2 = (seconds) => {
-    if (seconds === null || seconds === void 0 || seconds <= 0) {
-      return "-";
-    }
-    return formatIdleTime(Math.max(0, Math.floor(seconds)));
-  };
   const generatePDF = async () => {
     setIsGenerating(true);
     try {
@@ -51671,7 +51678,7 @@ var LinePdfGenerator = ({
       doc.line(20, 53, 190, 53);
       const perfOverviewStartY = 58;
       doc.setFillColor(245, 245, 245);
-      doc.roundedRect(15, perfOverviewStartY, 180, 50, 3, 3, "F");
+      doc.roundedRect(15, perfOverviewStartY, 180, 40, 3, 3, "F");
       doc.setFontSize(18);
       doc.setFont("helvetica", "bold");
       doc.setTextColor(40, 40, 40);
@@ -51687,20 +51694,13 @@ var LinePdfGenerator = ({
       doc.text(`${lineInfo.metrics.current_output} / ${lineInfo.metrics.line_threshold}`, 120, kpiStartY);
       createKPIBox(kpiStartY + kpiSpacing);
       doc.setFont("helvetica", "normal");
-      doc.text("Issue Resolution Time:", 25, kpiStartY + kpiSpacing);
-      doc.setFont("helvetica", "bold");
-      const resolutionSeconds = issueResolutionSummary ? issueResolutionSummary.mean_resolution_seconds ?? issueResolutionSummary.median_resolution_seconds : null;
-      const displayValue = resolutionSeconds !== null ? formatResolutionDuration2(resolutionSeconds) : "-";
-      doc.text(displayValue, 120, kpiStartY + kpiSpacing);
-      createKPIBox(kpiStartY + kpiSpacing * 2);
-      doc.setFont("helvetica", "normal");
-      doc.text("Average Efficiency:", 25, kpiStartY + kpiSpacing * 2);
+      doc.text("Average Efficiency:", 25, kpiStartY + kpiSpacing);
       doc.setFont("helvetica", "bold");
-      doc.text(`${lineInfo.metrics.avg_efficiency.toFixed(1)}%`, 120, kpiStartY + kpiSpacing * 2);
+      doc.text(`${lineInfo.metrics.avg_efficiency.toFixed(1)}%`, 120, kpiStartY + kpiSpacing);
       doc.setDrawColor(180, 180, 180);
       doc.setLineWidth(0.8);
-      doc.line(20, 123, 190, 123);
-      const hourlyOverviewStartY = 128;
+      doc.line(20, 113, 190, 113);
+      const hourlyOverviewStartY = 118;
       const formatMinutesLabel = (totalMinutes) => {
         const normalized = (totalMinutes % (24 * 60) + 24 * 60) % (24 * 60);
         const hour = Math.floor(normalized / 60);
@@ -51737,7 +51737,7 @@ var LinePdfGenerator = ({
             if (intervalIndex >= 0) {
               if (segmentIndex > 0 || segmentMinutes > hourlyTimeRanges[0]?.start) {
                 if (!skuRemarksByIndex[intervalIndex]) skuRemarksByIndex[intervalIndex] = [];
-                skuRemarksByIndex[intervalIndex].push(segment.sku_code);
+                skuRemarksByIndex[intervalIndex].push(getSkuDisplayName(segment));
               }
             }
           }
@@ -51890,8 +51890,8 @@ var LinePdfGenerator = ({
           return Math.round(lineInfo.metrics.current_output / shiftDuration);
         });
       }
-      const tableHeaderY = 151;
-      const tableStartY = 158;
+      const tableHeaderY = 141;
+      const tableStartY = 148;
       const rowSpacing = 8;
       const bottomPadding = 8;
       const hourlyTableHeight = hourlyTimeRanges.length * rowSpacing;
@@ -51901,10 +51901,10 @@ var LinePdfGenerator = ({
       doc.setFontSize(18);
       doc.setFont("helvetica", "bold");
       doc.setTextColor(40, 40, 40);
-      doc.text("Hourly Performance", 20, 138);
+      doc.text("Hourly Performance", 20, 128);
       doc.setTextColor(0, 0, 0);
-      const gridTopY = 144;
-      const headerBottomY = 153;
+      const gridTopY = 134;
+      const headerBottomY = 143;
       const colBoundaries = [20, 70, 100, 130, 155, 190];
       const totalRows = hourlyTimeRanges.length;
       const gridBottomY = headerBottomY + totalRows * rowSpacing;
@@ -53751,7 +53751,7 @@ var WorkspacePdfGenerator = ({
             if (intervalIndex >= 0) {
               if (segmentIndex > 0 || segmentMinutes > hourlyIntervals[0]?.start) {
                 if (!skuRemarksByIndex[intervalIndex]) skuRemarksByIndex[intervalIndex] = [];
-                skuRemarksByIndex[intervalIndex].push(segment.sku_code);
+                skuRemarksByIndex[intervalIndex].push(getSkuDisplayName(segment));
               }
             }
           }
@@ -54416,6 +54416,7 @@ var WorkspaceCycleTimeMetricCards = ({
   }, [activeSku, skuAware, activeSkuId, liveSkuId, skuBreakdown]);
   const cycleValue = activeSku ? activeSku.avg_cycle_time : workspace.avg_cycle_time;
   const cycleStandard = activeSku ? activeSku.ideal_cycle_time : workspace.ideal_cycle_time;
+  const displaySkuLabel = displaySku ? getSkuDisplayName(displaySku) : "";
   const efficiencyValue = workspace.avg_efficiency || 0;
   const efficiencyTarget = effectiveLegend.green_min;
   const efficiencyColor = getEfficiencyHexColor(efficiencyValue, effectiveLegend);
@@ -54443,7 +54444,7 @@ var WorkspaceCycleTimeMetricCards = ({
     /* @__PURE__ */ jsxs(Card2, { className: "flex flex-col bg-white shadow-sm border border-gray-200 h-full min-h-[150px] sm:min-h-0 rounded-xl", children: [
       /* @__PURE__ */ jsxs(CardHeader2, { className: "pb-1 pt-5 flex-none text-center", children: [
         /* @__PURE__ */ jsx(CardTitle2, { className: "text-[15px] font-bold text-gray-900 tracking-wide", children: "Cycle Time (s)" }),
-        displaySku && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-blue-600 mt-1 truncate px-2", title: displaySku.sku_code, children: displaySku.sku_code })
+        displaySku && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-blue-600 mt-1 truncate px-2", title: displaySkuLabel, children: displaySkuLabel })
       ] }),
       /* @__PURE__ */ jsxs(CardContent2, { className: "flex-1 flex flex-col items-center justify-center pb-6", children: [
         /* @__PURE__ */ jsx("p", { className: `text-5xl font-bold tracking-tight ${cycleValue > (cycleStandard || 0) ? "text-red-500" : "text-[#34C759]"}`, children: cycleValue.toFixed(1) }),
@@ -66378,25 +66379,8 @@ var formatLocalDate = (date) => {
   };
   return date.toLocaleDateString("en-US", options);
 };
-var formatResolutionDuration = (seconds) => {
-  if (seconds === null || seconds === void 0 || seconds <= 0) {
-    return "-";
-  }
-  return formatIdleTime(Math.max(0, Math.floor(seconds)));
-};
-var getIssueResolutionSecondaryText = (summary) => {
-  if (!summary) {
-    return "No issue data";
-  }
-  const parts = [`${summary.resolved_issue_count} resolved`];
-  if ((summary.open_issue_count || 0) > 0) {
-    parts.push(`oldest open ${formatResolutionDuration(summary.oldest_open_issue_age_seconds)}`);
-  }
-  return parts.join(" \u2022 ");
-};
 var MetricCards = memo$1(({
   lineInfo,
-  issueResolutionSummary,
   idleTimeData,
   showIdleTime,
   efficiencyLegend,
@@ -66408,13 +66392,7 @@ var MetricCards = memo$1(({
 }) => {
   const efficiency = lineInfo?.metrics.avg_efficiency || 0;
   const efficiencyColorClass = getEfficiencyTextColorClasses(efficiency, efficiencyLegend);
-  const showIssueResolutionCard = Boolean(issueResolutionSummary);
-  const largeGridColumns = showIdleTime ? showIssueResolutionCard ? "lg:grid-cols-5" : "lg:grid-cols-4" : showIssueResolutionCard ? "lg:grid-cols-4" : "lg:grid-cols-3";
-  const shouldMaskIssueResolution = efficiency < 5;
-  const issueResolutionValue = shouldMaskIssueResolution ? "-" : formatResolutionDuration(
-    issueResolutionSummary?.mean_resolution_seconds ?? issueResolutionSummary?.median_resolution_seconds
-  );
-  getIssueResolutionSecondaryText(issueResolutionSummary);
+  const largeGridColumns = showIdleTime ? "lg:grid-cols-4" : "lg:grid-cols-3";
   const outputTarget = lineInfo?.metrics.output_target_recalculated ?? lineInfo?.metrics.line_threshold ?? 0;
   return /* @__PURE__ */ jsxs(
     motion.div,
@@ -66455,28 +66433,6 @@ var MetricCards = memo$1(({
             "%"
           ] }) })
         ] }),
-        showIssueResolutionCard && /* @__PURE__ */ jsxs(
-          motion.div,
-          {
-            variants: itemVariants,
-            className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 flex flex-col overflow-hidden h-[240px] sm:h-[260px] md:h-auto",
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "h-10 sm:h-12 flex items-start justify-center gap-1.5 mb-2 mt-1 relative group z-10", children: [
-                /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-bold text-gray-700 text-center", children: "Issue Resolution Time" }),
-                /* @__PURE__ */ jsx(InformationCircleIcon, { className: "w-4 h-4 text-gray-400 cursor-help flex-shrink-0" }),
-                /* @__PURE__ */ jsxs("div", { className: "absolute top-full left-1/2 transform -translate-x-1/2 mt-2.5 w-[260px] p-3 bg-white rounded-lg shadow-xl border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 pointer-events-none z-50", children: [
-                  /* @__PURE__ */ jsx("p", { className: "text-center text-xs text-gray-600 leading-relaxed mb-2.5 px-1", children: "The average time a supervisor takes to resolve a workstation in red." }),
-                  /* @__PURE__ */ jsx("div", { className: "bg-gray-50 rounded-md py-1.5 border border-gray-100/80", children: /* @__PURE__ */ jsxs("p", { className: "text-center font-medium text-[11px] text-gray-500", children: [
-                    ((issueResolutionSummary?.resolved_issue_count || 0) + (issueResolutionSummary?.open_issue_count || 0)).toLocaleString(),
-                    " recorded issues"
-                  ] }) }),
-                  /* @__PURE__ */ jsx("div", { className: "absolute -top-1.5 left-1/2 transform -translate-x-1/2 w-3 h-3 bg-white border-l border-t border-gray-200 rotate-45" })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center flex-1 min-h-0", children: /* @__PURE__ */ jsx("span", { className: `whitespace-nowrap tracking-tight text-3xl sm:text-4xl md:text-4xl lg:text-3xl xl:text-4xl 2xl:text-5xl font-bold ${shouldMaskIssueResolution ? "text-gray-400" : "text-gray-900"}`, children: issueResolutionValue }) })
-            ]
-          }
-        ),
         showIdleTime && /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 flex flex-col overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
           /* @__PURE__ */ jsx("div", { className: "h-10 sm:h-12 flex items-start justify-center mb-2 mt-1", children: /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-bold text-gray-700 text-center", children: "Idle Time Breakdown" }) }),
           /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx(
@@ -66502,6 +66458,7 @@ var MetricCards = memo$1(({
     (prevProps.skuBreakdown || []).map((sku) => ({
       sku_id: sku.sku_id,
       sku_code: sku.sku_code,
+      sku_display_name: sku.sku_display_name,
       total_output: sku.total_output,
       target_output: sku.target_output,
       avg_pph: sku.avg_pph,
@@ -66517,6 +66474,7 @@ var MetricCards = memo$1(({
     (nextProps.skuBreakdown || []).map((sku) => ({
       sku_id: sku.sku_id,
       sku_code: sku.sku_code,
+      sku_display_name: sku.sku_display_name,
       total_output: sku.total_output,
       target_output: sku.target_output,
       avg_pph: sku.avg_pph,
@@ -66531,8 +66489,6 @@ var MetricCards = memo$1(({
   if (prevSkuSignature !== nextSkuSignature) return false;
   const prevMetrics = prevProps.lineInfo.metrics;
   const nextMetrics = nextProps.lineInfo.metrics;
-  const prevIssueSummary = prevProps.issueResolutionSummary;
-  const nextIssueSummary = nextProps.issueResolutionSummary;
   const prevIdleChartSignature = JSON.stringify(
     (prevProps.idleTimeData?.chartData || []).map((entry) => ({
       name: entry.name,
@@ -66551,9 +66507,6 @@ var MetricCards = memo$1(({
   );
   const idleTimeChanged = prevProps.idleTimeData?.isLoading !== nextProps.idleTimeData?.isLoading || prevProps.idleTimeData?.error !== nextProps.idleTimeData?.error || prevIdleChartSignature !== nextIdleChartSignature || prevProps.idleTimeData?.data?.total_idle_time_seconds !== nextProps.idleTimeData?.data?.total_idle_time_seconds || prevProps.idleTimeData?.data?.scope_work_seconds !== nextProps.idleTimeData?.data?.scope_work_seconds;
   if (idleTimeChanged) return false;
-  if (prevIssueSummary?.mean_resolution_seconds !== nextIssueSummary?.mean_resolution_seconds || prevIssueSummary?.median_resolution_seconds !== nextIssueSummary?.median_resolution_seconds || prevIssueSummary?.resolved_issue_count !== nextIssueSummary?.resolved_issue_count || prevIssueSummary?.open_issue_count !== nextIssueSummary?.open_issue_count || prevIssueSummary?.oldest_open_issue_age_seconds !== nextIssueSummary?.oldest_open_issue_age_seconds || prevIssueSummary?.total_issue_seconds !== nextIssueSummary?.total_issue_seconds) {
-    return false;
-  }
   return prevMetrics.current_output === nextMetrics.current_output && prevMetrics.line_threshold === nextMetrics.line_threshold && prevMetrics.output_target_recalculated === nextMetrics.output_target_recalculated && prevMetrics.underperforming_workspaces === nextMetrics.underperforming_workspaces && prevMetrics.total_workspaces === nextMetrics.total_workspaces && prevMetrics.avg_efficiency === nextMetrics.avg_efficiency;
 });
 MetricCards.displayName = "MetricCards";
@@ -66826,6 +66779,7 @@ var BottomSection = memo$1(({
     (prevProps.skuSegments || []).map((segment) => ({
       sku_id: segment.sku_id,
       sku_code: segment.sku_code,
+      sku_display_name: segment.sku_display_name,
       start_time: segment.start_time,
       end_time: segment.end_time,
       pph_threshold: segment.pph_threshold
@@ -66835,6 +66789,7 @@ var BottomSection = memo$1(({
     (nextProps.skuSegments || []).map((segment) => ({
       sku_id: segment.sku_id,
       sku_code: segment.sku_code,
+      sku_display_name: segment.sku_display_name,
       start_time: segment.start_time,
       end_time: segment.end_time,
       pph_threshold: segment.pph_threshold
@@ -67515,6 +67470,7 @@ var KPIDetailView = ({
     }).map((item) => ({
       sku_id: item.sku_id,
       sku_code: item.sku_code,
+      sku_display_name: item.sku_display_name,
       sku_definition: "",
       is_dummy: false,
       total_output: item.current_output ?? 0,
@@ -67579,11 +67535,13 @@ var KPIDetailView = ({
   }, [resolvedLineInfo, selectedSkuRow]);
   const handleSkuChange = useCallback((nextSkuId) => {
     if (nextSkuId === selectedSkuId) return;
+    const selectedSkuOption = nextSkuId === "all" ? null : realSkuOptions.find((item) => item.sku_id === nextSkuId) ?? null;
     setSelectedSkuId(nextSkuId);
     trackCoreEvent("Line Detail SKU Filter Changed", {
       line_id: lineId,
       sku_id: nextSkuId === "all" ? null : nextSkuId,
-      sku_code: nextSkuId === "all" ? null : realSkuOptions.find((item) => item.sku_id === nextSkuId)?.sku_code ?? null
+      sku_code: selectedSkuOption?.sku_code ?? null,
+      sku_display_name: selectedSkuOption ? getSkuDisplayName(selectedSkuOption) : null
     });
   }, [lineId, realSkuOptions, selectedSkuId]);
   const handleChartSkuSelect = useCallback(
@@ -68359,7 +68317,6 @@ var KPIDetailView = ({
               MetricCards,
               {
                 lineInfo: displayLineInfo ?? resolvedLineInfo,
-                issueResolutionSummary,
                 idleTimeData,
                 showIdleTime: idleTimeVlmEnabled,
                 efficiencyLegend,
@@ -68474,7 +68431,6 @@ var KPIDetailView = ({
               MetricCards,
               {
                 lineInfo: displayLineInfo ?? resolvedLineInfo,
-                issueResolutionSummary,
                 idleTimeData,
                 showIdleTime: idleTimeVlmEnabled,
                 efficiencyLegend,
@@ -73537,6 +73493,7 @@ var SKUSelector = ({
     if (lineId && (sku.line_id ?? "") !== lineId) return false;
     const term = searchTerm.toLowerCase();
     if (term.length === 0) return true;
+    if (getSkuDisplayName(sku).toLowerCase().includes(term)) return true;
     if ((sku.sku_id || "").toLowerCase().includes(term)) return true;
     if ((sku.sku_definition || "").toLowerCase().includes(term)) return true;
     return JSON.stringify(sku.attributes ?? {}).toLowerCase().includes(term);
@@ -73561,7 +73518,7 @@ var SKUSelector = ({
         disabled,
         children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsx("span", { className: selectedSKU ? "text-gray-900" : "text-gray-500", children: selectedSKU ? /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("span", { className: "font-medium", children: selectedSKU.sku_id }),
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: getSkuDisplayName(selectedSKU) }),
             /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-500 ml-2", children: [
               "(Target: ",
               selectedSKU.production_target,
@@ -73605,7 +73562,7 @@ var SKUSelector = ({
                     ${selectedSKU?.id === sku.id ? "bg-blue-50" : ""}
                   `,
             children: /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("div", { className: "font-medium", children: sku.sku_id }),
+              /* @__PURE__ */ jsx("div", { className: "font-medium", children: getSkuDisplayName(sku) }),
               /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-500", children: [
                 "Target: ",
                 sku.production_target,
@@ -73661,44 +73618,50 @@ var SKUList = ({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: "hidden lg:block bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [
       /* @__PURE__ */ jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "SKU Code" }),
+        /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "SKU" }),
         /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Definition" }),
         /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Line" }),
         /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Production Target" }),
         /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Status" }),
         /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Created" })
       ] }) }),
-      /* @__PURE__ */ jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: skus.map((sku) => /* @__PURE__ */ jsxs("tr", { className: "hover:bg-gray-50 transition-colors duration-150", children: [
-        /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-gray-900", children: sku.sku_id }) }),
-        /* @__PURE__ */ jsx("td", { className: "px-6 py-4", children: /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-700 max-w-md truncate", title: sku.sku_definition || "", children: sku.sku_definition || /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "\u2014" }) }) }),
-        /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-700", children: formatLine(sku, lineNames) }) }),
-        /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700", children: formatTarget(sku.production_target) }) }),
-        /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx("span", { className: `inline-flex px-2 py-1 text-xs font-semibold rounded-full ${sku.is_active ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}`, children: sku.is_active ? "Active" : "Inactive" }) }),
-        /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", children: formatCreatedAt(sku.created_at) })
-      ] }, sku.id)) })
+      /* @__PURE__ */ jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: skus.map((sku) => {
+        const displayName = getSkuDisplayName(sku);
+        return /* @__PURE__ */ jsxs("tr", { className: "hover:bg-gray-50 transition-colors duration-150", children: [
+          /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-gray-900", children: displayName }) }),
+          /* @__PURE__ */ jsx("td", { className: "px-6 py-4", children: /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-700 max-w-md truncate", title: sku.sku_definition || "", children: sku.sku_definition || /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "\u2014" }) }) }),
+          /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-700", children: formatLine(sku, lineNames) }) }),
+          /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700", children: formatTarget(sku.production_target) }) }),
+          /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx("span", { className: `inline-flex px-2 py-1 text-xs font-semibold rounded-full ${sku.is_active ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}`, children: sku.is_active ? "Active" : "Inactive" }) }),
+          /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", children: formatCreatedAt(sku.created_at) })
+        ] }, sku.id);
+      }) })
     ] }) }) }),
-    /* @__PURE__ */ jsx("div", { className: "lg:hidden space-y-3 sm:space-y-4", children: skus.map((sku) => /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-200 p-4 hover:shadow-md transition-all duration-200", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between mb-3", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-base sm:text-lg font-semibold text-gray-900 truncate", children: sku.sku_id }),
-        /* @__PURE__ */ jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsx("span", { className: `inline-flex px-2 py-1 text-xs font-semibold rounded-full ${sku.is_active ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}`, children: sku.is_active ? "Active" : "Inactive" }) })
-      ] }) }),
-      /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1", children: "Definition" }),
-        /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-700 break-words", children: sku.sku_definition || /* @__PURE__ */ jsx("span", { className: "text-gray-400 italic", children: "\u2014" }) })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1", children: "Line" }),
-        /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-700", children: formatLine(sku, lineNames) })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1", children: "Production Target" }),
-        /* @__PURE__ */ jsx("div", { className: "text-sm sm:text-base font-medium text-gray-700", children: formatTarget(sku.production_target) })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-500", children: [
-        "Created: ",
-        formatCreatedAt(sku.created_at)
-      ] })
-    ] }, sku.id)) })
+    /* @__PURE__ */ jsx("div", { className: "lg:hidden space-y-3 sm:space-y-4", children: skus.map((sku) => {
+      const displayName = getSkuDisplayName(sku);
+      return /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-200 p-4 hover:shadow-md transition-all duration-200", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between mb-3", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-base sm:text-lg font-semibold text-gray-900 truncate", children: displayName }),
+          /* @__PURE__ */ jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsx("span", { className: `inline-flex px-2 py-1 text-xs font-semibold rounded-full ${sku.is_active ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}`, children: sku.is_active ? "Active" : "Inactive" }) })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1", children: "Definition" }),
+          /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-700 break-words", children: sku.sku_definition || /* @__PURE__ */ jsx("span", { className: "text-gray-400 italic", children: "\u2014" }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1", children: "Line" }),
+          /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-700", children: formatLine(sku, lineNames) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1", children: "Production Target" }),
+          /* @__PURE__ */ jsx("div", { className: "text-sm sm:text-base font-medium text-gray-700", children: formatTarget(sku.production_target) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-500", children: [
+          "Created: ",
+          formatCreatedAt(sku.created_at)
+        ] })
+      ] }, sku.id);
+    }) })
   ] });
 };
 var TargetsViewUI = ({
@@ -73929,7 +73892,7 @@ var TargetsViewUI = ({
                             className: "w-full sm:w-auto rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500 transition-all duration-200 hover:border-gray-400",
                             "aria-label": `SKU for ${formattedName}`,
                             children: realSkuOptions.map((row) => /* @__PURE__ */ jsxs("option", { value: row.sku_uuid, children: [
-                              row.sku_code,
+                              getSkuDisplayName(row),
                               workspace.currentSku && !workspace.currentSku.is_dummy && workspace.currentSku.sku_uuid === row.sku_uuid ? " (active)" : ""
                             ] }, row.sku_uuid))
                           }
@@ -74196,8 +74159,14 @@ var TargetsView = ({
   const skuMetaByUuid = useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     skuCatalog.forEach((sku) => {
+      const skuCode = sku.sku_id || sku.id;
       map.set(sku.id, {
-        sku_code: sku.sku_id || sku.id,
+        sku_code: skuCode,
+        sku_display_name: getSkuDisplayName({
+          display_name: sku.display_name,
+          sku_code: skuCode,
+          id: sku.id
+        }),
         is_dummy: sku.sku_definition === "dummy_definition",
         line_id: sku.line_id
       });
@@ -74209,11 +74178,20 @@ var TargetsView = ({
     skuCatalog.forEach((sku) => {
       if (sku.sku_definition === "dummy_definition") return;
       const list = map.get(sku.line_id) || [];
-      list.push({ sku_uuid: sku.id, sku_code: sku.sku_id || sku.id });
+      const skuCode = sku.sku_id || sku.id;
+      list.push({
+        sku_uuid: sku.id,
+        sku_code: skuCode,
+        sku_display_name: getSkuDisplayName({
+          display_name: sku.display_name,
+          sku_code: skuCode,
+          id: sku.id
+        })
+      });
       map.set(sku.line_id, list);
     });
     map.forEach((list) => list.sort(
-      (a, b) => a.sku_code.localeCompare(b.sku_code, void 0, { numeric: true })
+      (a, b) => a.sku_display_name.localeCompare(b.sku_display_name, void 0, { numeric: true })
     ));
     return map;
   }, [skuCatalog]);
@@ -74361,8 +74339,9 @@ var TargetsView = ({
                 const meta = skuMetaByUuid.get(skuUuid);
                 skuRowsMap.set(skuUuid, {
                   sku_uuid: skuUuid,
-                  sku_code: meta?.sku_code || skuUuid,
-                  is_dummy: meta?.is_dummy ?? false,
+                  sku_code: payload?.sku_code || meta?.sku_code || skuUuid,
+                  sku_display_name: payload?.sku_display_name || meta?.sku_display_name || payload?.sku_code || meta?.sku_code || skuUuid,
+                  is_dummy: payload?.is_dummy ?? meta?.is_dummy ?? false,
                   pph_threshold: payload?.pph_threshold ? Math.round(payload.pph_threshold) : "",
                   ideal_cycle_time: payload?.ideal_cycle_time ?? "",
                   total_day_output: payload?.total_day_output ?? "",
@@ -74415,10 +74394,11 @@ var TargetsView = ({
               const lineDummySkuUuidFallback = dummySkuByLine.get(lineId) || null;
               const buildEmptySkuRows = () => {
                 const rows = [];
-                lineNonDummySkusFallback.forEach(({ sku_uuid, sku_code }) => {
+                lineNonDummySkusFallback.forEach(({ sku_uuid, sku_code, sku_display_name }) => {
                   rows.push({
                     sku_uuid,
                     sku_code,
+                    sku_display_name,
                     is_dummy: false,
                     pph_threshold: "",
                     ideal_cycle_time: "",
@@ -74431,6 +74411,7 @@ var TargetsView = ({
                   rows.push({
                     sku_uuid: lineDummySkuUuidFallback,
                     sku_code: meta?.sku_code || lineDummySkuUuidFallback,
+                    sku_display_name: meta?.sku_display_name || meta?.sku_code || lineDummySkuUuidFallback,
                     is_dummy: true,
                     pph_threshold: "",
                     ideal_cycle_time: "",
@@ -74757,6 +74738,7 @@ var TargetsView = ({
           rowsToSave = fallback ? [{
             sku_uuid: fallback.sku_uuid,
             sku_code: "",
+            sku_display_name: "",
             is_dummy: true,
             pph_threshold: fallback.pph_threshold,
             ideal_cycle_time: fallback.ideal_cycle_time,
@@ -76824,7 +76806,7 @@ var SKUManagementView = () => {
       if (activeFilter === "inactive" && sku.is_active) return false;
       if (lineFilter !== "all" && sku.line_id !== lineFilter) return false;
       if (term.length === 0) return true;
-      return (sku.sku_id || "").toLowerCase().includes(term);
+      return getSkuDisplayName(sku).toLowerCase().includes(term) || (sku.sku_id || "").toLowerCase().includes(term);
     });
   }, [skus, searchTerm, lineFilter, activeFilter]);
   const handleBack = () => {
@@ -76864,9 +76846,9 @@ var SKUManagementView = () => {
               type: "search",
               value: searchTerm,
               onChange: (event) => setSearchTerm(event.target.value),
-              placeholder: "Search by SKU code",
+              placeholder: "Search by SKU",
               className: "w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
-              "aria-label": "Search SKUs by code"
+              "aria-label": "Search SKUs"
             }
           )
         ] }),