@optifye/dashboard-core 6.0.2 → 6.0.4

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import * as React14 from 'react';
-import React14__default, { createContext, useRef, useCallback, useState, useMemo, useEffect, memo, useContext, useLayoutEffect, useId, Children, isValidElement, useInsertionEffect, forwardRef, Fragment as Fragment$1, createElement, Component } from 'react';
+import * as React19 from 'react';
+import React19__default, { createContext, useRef, useCallback, useState, useMemo, useEffect, memo, useContext, useLayoutEffect, useId, Children, isValidElement, useInsertionEffect, forwardRef, Fragment as Fragment$1, createElement, Component } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRouter } from 'next/router';
 import { toZonedTime, formatInTimeZone } from 'date-fns-tz';
@@ -10,15 +10,15 @@ import Hls2 from 'hls.js';
 import useSWR from 'swr';
 import { noop, warning, invariant, progress, secondsToMilliseconds, millisecondsToSeconds, memo as memo$1 } from 'motion-utils';
 import { getValueTransition, hover, press, isPrimaryPointer, GroupPlaybackControls, setDragLock, supportsLinearEasing, attachTimeline, isGenerator, calcGeneratorDuration, isWaapiSupportedEasing, mapEasingToNativeEasing, maxGeneratorDuration, generateLinearEasing, isBezierDefinition } from 'motion-dom';
-import { Bar, LabelList, ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, ReferenceLine, Cell, PieChart, Pie, Legend, LineChart as LineChart$1, Line, ComposedChart, Area, ScatterChart, Scatter } from 'recharts';
+import { BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Bar, LabelList, ResponsiveContainer, LineChart as LineChart$1, Line, PieChart, Pie, Cell, ReferenceLine, ComposedChart, Area, ScatterChart, Scatter } from 'recharts';
 import { Slot } from '@radix-ui/react-slot';
-import { Camera, ChevronDown, ChevronUp, Check, ShieldCheck, Star, Award, X, Coffee, Plus, Clock, Minus, ArrowDown, ArrowUp, Search, CheckCircle, AlertTriangle, Info, Share2, Download, User, XCircle, ChevronLeft, ChevronRight, AlertCircle, Sun, Moon, MessageSquare, Trash2, ArrowLeft, RefreshCw, Menu, Send, Copy, Edit2, UserCheck, Save, LogOut, Calendar, Settings, LifeBuoy, Loader2, ArrowLeftIcon as ArrowLeftIcon$1, Settings2, CheckCircle2, EyeOff, Eye, Zap, UserCircle } from 'lucide-react';
+import { Camera, ChevronDown, ChevronUp, Check, ShieldCheck, Star, Award, X, Coffee, Plus, Clock, Minus, ArrowDown, ArrowUp, Search, CheckCircle, AlertTriangle, Info, Share2, Download, User, XCircle, ChevronLeft, ChevronRight, AlertCircle, Sun, Moon, MessageSquare, Trash2, ArrowLeft, RefreshCw, Menu, Send, Copy, Edit2, UserCheck, Save, LogOut, Calendar, Package, Settings, LifeBuoy, Loader2, ArrowLeftIcon as ArrowLeftIcon$1, Settings2, CheckCircle2, EyeOff, Eye, Zap, UserCircle } from 'lucide-react';
 import { DayPicker, useNavigation as useNavigation$1 } from 'react-day-picker';
 import html2canvas from 'html2canvas';
 import jsPDF, { jsPDF as jsPDF$1 } from 'jspdf';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { S3Client, ListObjectsV2Command, GetObjectCommand } from '@aws-sdk/client-s3';
-import { HomeIcon, TrophyIcon, ChartBarIcon, AdjustmentsHorizontalIcon, ClockIcon, SparklesIcon, QuestionMarkCircleIcon, UserCircleIcon, ArrowRightIcon, ArrowLeftIcon, ChatBubbleLeftRightIcon, CheckCircleIcon, ExclamationCircleIcon, DocumentTextIcon, EnvelopeIcon, InformationCircleIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { HomeIcon, TrophyIcon, ChartBarIcon, AdjustmentsHorizontalIcon, ClockIcon, CubeIcon, SparklesIcon, QuestionMarkCircleIcon, UserCircleIcon, ArrowRightIcon, ArrowLeftIcon, ChatBubbleLeftRightIcon, CheckCircleIcon, ExclamationCircleIcon, DocumentTextIcon, EnvelopeIcon, InformationCircleIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
 import { Readable } from 'stream';
 import { toast } from 'sonner';
 import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
@@ -205,14 +205,14 @@ var _getDashboardConfigInstance = () => {
   }
   return dashboardConfigInstance;
 };
-var DashboardConfigContext = React14.createContext(void 0);
+var DashboardConfigContext = React19.createContext(void 0);
 var DashboardProvider = ({ config: userProvidedConfig, children }) => {
-  const fullConfig = React14.useMemo(() => mergeWithDefaultConfig(userProvidedConfig), [userProvidedConfig]);
+  const fullConfig = React19.useMemo(() => mergeWithDefaultConfig(userProvidedConfig), [userProvidedConfig]);
   _setDashboardConfigInstance(fullConfig);
-  React14.useEffect(() => {
+  React19.useEffect(() => {
     _setDashboardConfigInstance(fullConfig);
   }, [fullConfig]);
-  React14.useEffect(() => {
+  React19.useEffect(() => {
     if (!fullConfig.theme) return;
     const styleId = "dashboard-core-theme-vars";
     let styleEl = document.getElementById(styleId);
@@ -238,7 +238,7 @@ var DashboardProvider = ({ config: userProvidedConfig, children }) => {
   return /* @__PURE__ */ jsx(DashboardConfigContext.Provider, { value: fullConfig, children });
 };
 var useDashboardConfig = () => {
-  const ctx = React14.useContext(DashboardConfigContext);
+  const ctx = React19.useContext(DashboardConfigContext);
   if (!ctx) throw new Error("useDashboardConfig must be used within a DashboardProvider");
   return ctx;
 };
@@ -331,6 +331,56 @@ var actionService = {
     return data || [];
   }
 };
+function createMemoizedFunction(fn, getCacheKey) {
+  const cache = /* @__PURE__ */ new Map();
+  const CACHE_DURATION3 = 5 * 60 * 1e3;
+  return (...args) => {
+    const key = getCacheKey(...args);
+    const cached = cache.get(key);
+    if (cached && Date.now() - cached.timestamp < CACHE_DURATION3) {
+      return cached.result;
+    }
+    const result = fn(...args);
+    cache.set(key, { result, timestamp: Date.now() });
+    if (cache.size > 100) {
+      const firstKey = cache.keys().next().value;
+      if (firstKey) cache.delete(firstKey);
+    }
+    return result;
+  };
+}
+var memoizedEfficiencyFilter = createMemoizedFunction(
+  (data, minEfficiency, maxEfficiency) => {
+    return data.filter((item) => {
+      const eff = item.efficiency ?? 0;
+      return eff >= minEfficiency && (maxEfficiency === void 0 || eff < maxEfficiency);
+    });
+  },
+  (data, min, max = void 0) => `${data.length}-${min}-${max}`
+);
+var memoizedAverageEfficiency = createMemoizedFunction(
+  (data, minThreshold = 10) => {
+    const validItems = data.filter((item) => (item.efficiency ?? 0) >= minThreshold);
+    if (validItems.length === 0) return 0;
+    const sum = validItems.reduce((acc, item) => acc + (item.efficiency ?? 0), 0);
+    return sum / validItems.length;
+  },
+  (data, threshold) => `${data.length}-${threshold}`
+);
+var memoizedOutputArrayAggregation = createMemoizedFunction(
+  (arrays) => {
+    if (arrays.length === 0) return [];
+    const maxLength = Math.max(...arrays.map((arr) => arr.length));
+    const result = new Array(maxLength).fill(0);
+    for (const arr of arrays) {
+      for (let i = 0; i < arr.length; i++) {
+        result[i] += arr[i];
+      }
+    }
+    return result;
+  },
+  (arrays) => arrays.map((arr) => arr.length).join("-")
+);
 var getOperationalDate = (timezone = "Asia/Kolkata", date = /* @__PURE__ */ new Date(), shiftStartTime = "06:00") => {
   const zonedDate = toZonedTime(date, timezone);
   const hours = zonedDate.getHours();
@@ -468,22 +518,32 @@ var dashboardService = {
       if (!defaultLineId || !secondaryLineId || !companyId) {
         throw new Error("Factory View requires defaultLineId, secondaryLineId, and companyId to be configured.");
       }
-      const { data: lineData2, error: lineError2 } = await supabase.from(linesTable).select(`
-          id,
-          line_name,
-          factory_id,
-          factories!lines_factory_id_fkey(factory_name),
-          company_id,
-          companies!lines_company_id_fkey(company_name:name)
-        `).eq("id", defaultLineId).maybeSingle();
-      if (lineError2) throw lineError2;
-      if (!lineData2) throw new Error(`Configured default line (${defaultLineId}) not found`);
-      const { data: metricsData, error: metricsError } = await supabase.from(lineMetricsTable).select("*").in("line_id", [defaultLineId, secondaryLineId]).eq("shift_id", shiftId).eq("date", date);
-      if (metricsError) throw metricsError;
-      const { data: performanceData2, error: performanceError2 } = await supabase.from(metricsTable).select("efficiency").in("line_id", [defaultLineId, secondaryLineId]).eq("shift_id", shiftId).eq("date", date);
-      if (performanceError2) throw performanceError2;
-      const underperformingCount2 = performanceData2?.filter((w) => w.efficiency >= 10 && w.efficiency < 70).length || 0;
-      const totalValidWorkspaces2 = performanceData2?.filter((w) => w.efficiency >= 10).length || 0;
+      const [lineResult, metricsResult, performanceResult] = await Promise.all([
+        // Get Line 1's info for general factory details
+        supabase.from(linesTable).select(`
+            id,
+            line_name,
+            factory_id,
+            factories!lines_factory_id_fkey(factory_name),
+            company_id,
+            companies!lines_company_id_fkey(company_name:name)
+          `).eq("id", defaultLineId).maybeSingle(),
+        // Get metrics from line_metrics table for both lines
+        supabase.from(lineMetricsTable).select("*").in("line_id", [defaultLineId, secondaryLineId]).eq("shift_id", shiftId).eq("date", date),
+        // Get performance data from the dynamic metrics table for both lines
+        supabase.from(metricsTable).select("efficiency").in("line_id", [defaultLineId, secondaryLineId]).eq("shift_id", shiftId).eq("date", date)
+      ]);
+      if (lineResult.error) throw lineResult.error;
+      if (!lineResult.data) throw new Error(`Configured default line (${defaultLineId}) not found`);
+      if (metricsResult.error) throw metricsResult.error;
+      if (performanceResult.error) throw performanceResult.error;
+      const lineData2 = lineResult.data;
+      const metricsData = metricsResult.data;
+      const performanceData2 = performanceResult.data;
+      const underperformingWorkspaces2 = memoizedEfficiencyFilter(performanceData2 || [], 10, 70);
+      const validWorkspaces2 = memoizedEfficiencyFilter(performanceData2 || [], 10);
+      const underperformingCount2 = underperformingWorkspaces2.length;
+      validWorkspaces2.length;
       const combinedMetrics = (metricsData || []).reduce((acc, m) => {
         acc.avg_efficiency += m.efficiency ?? 0;
         acc.current_output += m.current_output ?? 0;
@@ -503,13 +563,13 @@ var dashboardService = {
         shift_id: shiftId,
         date,
         metrics: {
-          avg_efficiency: (performanceData2?.reduce((sum, m) => sum + (m.efficiency || 0), 0) || 0) / (totalValidWorkspaces2 || 1),
-          // Use performance data for avg efficiency
+          avg_efficiency: memoizedAverageEfficiency(performanceData2 || [], 10),
+          // Use memoized calculation for efficiency
           avg_cycle_time: 0,
           // Needs calculation logic if required for factory view
           current_output: combinedMetrics.current_output,
           ideal_output: combinedMetrics.ideal_output,
-          total_workspaces: 44,
+          total_workspaces: 0,
           // SRC ALIGNMENT: Use hardcoded 44 for factory view total_workspaces
           underperforming_workspaces: underperformingCount2,
           underperforming_workspace_names: [],
@@ -547,9 +607,11 @@ var dashboardService = {
     }
     const { data: performanceData, error: performanceError } = await supabase.from(metricsTable).select("efficiency").eq("line_id", lineId).eq("shift_id", shiftId).eq("date", date);
     if (performanceError) throw performanceError;
-    const underperformingCount = performanceData?.filter((w) => w.efficiency >= 10 && w.efficiency < 70).length || 0;
-    const totalValidWorkspaces = performanceData?.filter((w) => w.efficiency >= 10).length || 0;
-    const avgEfficiencyFromPerf = (performanceData?.reduce((sum, m) => sum + (m.efficiency || 0), 0) || 0) / (totalValidWorkspaces || 1);
+    const underperformingWorkspaces = memoizedEfficiencyFilter(performanceData || [], 10, 70);
+    const validWorkspaces = memoizedEfficiencyFilter(performanceData || [], 10);
+    const underperformingCount = underperformingWorkspaces.length;
+    validWorkspaces.length;
+    const avgEfficiencyFromPerf = memoizedAverageEfficiency(performanceData || [], 10);
     const useFallbackMetrics = !metricsFromDb;
     let metricsForReturn;
     if (useFallbackMetrics) {
@@ -864,21 +926,29 @@ var dashboardService = {
     const queryShiftId = shiftProp !== void 0 ? shiftProp : currentShiftResult.shiftId;
     try {
       if (lineIdToQuery === factoryViewId) {
-        if (!defaultLineId || !secondaryLineId || !companyId) {
-          throw new Error("Factory View requires defaultLineId, secondaryLineId, and companyId to be configured.");
+        if (!defaultLineId || !companyId) {
+          throw new Error("Factory View requires at least defaultLineId and companyId to be configured.");
         }
-        const { data: line1Data, error: line1Error } = await supabase.from(linesTable).select("id, line_name, factory_id, factories!lines_factory_id_fkey(factory_name), company_id, companies!lines_company_id_fkey(company_name:name)").eq("id", defaultLineId).single();
-        if (line1Error) throw line1Error;
-        if (!line1Data) {
+        const lineIdsToQuery = [defaultLineId, secondaryLineId].filter((id3) => id3 !== void 0 && id3 !== null);
+        const [line1Result, metricsResult2, performanceResult2] = await Promise.all([
+          supabase.from(linesTable).select("id, line_name, factory_id, factories!lines_factory_id_fkey(factory_name), company_id, companies!lines_company_id_fkey(company_name:name)").eq("id", defaultLineId).single(),
+          supabase.from(lineMetricsTable).select("*").in("line_id", lineIdsToQuery).eq("shift_id", queryShiftId).eq("date", queryDate),
+          supabase.from(metricsTable).select("efficiency").in("line_id", lineIdsToQuery).eq("shift_id", queryShiftId).eq("date", queryDate)
+        ]);
+        if (line1Result.error) throw line1Result.error;
+        if (!line1Result.data) {
           throw new Error(`Default line ${defaultLineId} for Factory View not found.`);
         }
-        const { data: metricsData, error: metricsError2 } = await supabase.from(lineMetricsTable).select("*").in("line_id", [defaultLineId, secondaryLineId]).eq("shift_id", queryShiftId).eq("date", queryDate);
-        if (metricsError2) throw metricsError2;
-        const { data: performanceData2, error: performanceError2 } = await supabase.from(metricsTable).select("efficiency").in("line_id", [defaultLineId, secondaryLineId]).eq("shift_id", queryShiftId).eq("date", queryDate);
-        if (performanceError2) throw performanceError2;
-        const underperformingCount2 = performanceData2?.filter((w) => w.efficiency >= 10 && w.efficiency < 70).length || 0;
-        const totalValidWorkspaces2 = performanceData2?.filter((w) => w.efficiency >= 10).length || 0;
-        const avgEfficiencyFromPerf2 = (performanceData2?.reduce((sum, m) => sum + (m.efficiency || 0), 0) || 0) / (totalValidWorkspaces2 || 1);
+        if (metricsResult2.error) throw metricsResult2.error;
+        if (performanceResult2.error) throw performanceResult2.error;
+        const line1Data = line1Result.data;
+        const metricsData = metricsResult2.data;
+        const performanceData2 = performanceResult2.data;
+        const underperformingWorkspaces2 = memoizedEfficiencyFilter(performanceData2 || [], 10, 70);
+        const validWorkspaces2 = memoizedEfficiencyFilter(performanceData2 || [], 10);
+        const underperformingCount2 = underperformingWorkspaces2.length;
+        const totalValidWorkspaces2 = validWorkspaces2.length;
+        const avgEfficiencyFromPerf2 = memoizedAverageEfficiency(performanceData2 || [], 10);
         const initialAccumulator = {
           avg_cycle_time: 0,
           current_output: 0,
@@ -886,7 +956,8 @@ var dashboardService = {
           line_threshold: 0,
           threshold_pph: 0,
           total_workspaces: 0,
-          output_array: []
+          output_array: [],
+          outputArrays: []
         };
         const combinedMetricsData = (metricsData || []).reduce((acc, m) => {
           acc.avg_cycle_time += m.avg_cycle_time ?? 0;
@@ -896,14 +967,7 @@ var dashboardService = {
           acc.threshold_pph += m.threshold_pph ?? 0;
           acc.total_workspaces += m.total_workspaces ?? 0;
           if (m.output_array && m.output_array.length > 0) {
-            const currentMOutputArray = m.output_array;
-            if (!acc.output_array || acc.output_array.length === 0) acc.output_array = [...currentMOutputArray];
-            else {
-              acc.output_array = acc.output_array.map((val, i) => val + (currentMOutputArray[i] ?? 0));
-              if (currentMOutputArray.length > acc.output_array.length) {
-                acc.output_array.push(...currentMOutputArray.slice(acc.output_array.length));
-              }
-            }
+            acc.outputArrays.push(m.output_array);
           }
           return acc;
         }, initialAccumulator);
@@ -924,7 +988,7 @@ var dashboardService = {
             avg_cycle_time: combinedMetricsData.avg_cycle_time / numLines,
             current_output: combinedMetricsData.current_output,
             ideal_output: combinedMetricsData.ideal_output,
-            total_workspaces: combinedMetricsData.total_workspaces || 44,
+            total_workspaces: combinedMetricsData.total_workspaces || 0,
             // Use combined or default
             underperforming_workspaces: underperformingCount2,
             line_threshold: combinedMetricsData.line_threshold,
@@ -932,7 +996,7 @@ var dashboardService = {
             shift_start: metricsData?.[0]?.shift_start || shiftConfig.dayShift?.startTime || "06:00",
             shift_end: metricsData?.[0]?.shift_end || shiftConfig.dayShift?.endTime || "18:00",
             last_updated: (/* @__PURE__ */ new Date()).toISOString(),
-            output_array: combinedMetricsData.output_array,
+            output_array: combinedMetricsData.outputArrays.length > 0 ? memoizedOutputArrayAggregation(combinedMetricsData.outputArrays) : [],
             underperforming_workspace_names: [],
             underperforming_workspace_uuids: [],
             poorest_performing_workspaces: []
@@ -942,18 +1006,25 @@ var dashboardService = {
       if (!companyId) {
         throw new Error("Company ID must be configured for detailed line requests.");
       }
-      const { data: lineData, error: lineError } = await supabase.from(linesTable).select("id, line_name, factory_id, factories!lines_factory_id_fkey(factory_name), company_id, companies!lines_company_id_fkey(company_name:name)").eq("id", lineIdToQuery).single();
-      if (lineError) throw lineError;
-      if (!lineData) {
+      const [lineResult, metricsResult, performanceResult] = await Promise.all([
+        supabase.from(linesTable).select("id, line_name, factory_id, factories!lines_factory_id_fkey(factory_name), company_id, companies!lines_company_id_fkey(company_name:name)").eq("id", lineIdToQuery).single(),
+        supabase.from(lineMetricsTable).select("*").eq("line_id", lineIdToQuery).eq("shift_id", queryShiftId).eq("date", queryDate).maybeSingle(),
+        supabase.from(metricsTable).select("efficiency").eq("line_id", lineIdToQuery).eq("shift_id", queryShiftId).eq("date", queryDate)
+      ]);
+      if (lineResult.error) throw lineResult.error;
+      if (!lineResult.data) {
         throw new Error(`Line ${lineIdToQuery} not found.`);
       }
-      const { data: metrics2, error: metricsError } = await supabase.from(lineMetricsTable).select("*").eq("line_id", lineIdToQuery).eq("shift_id", queryShiftId).eq("date", queryDate).maybeSingle();
-      if (metricsError) throw metricsError;
-      const { data: performanceData, error: performanceError } = await supabase.from(metricsTable).select("efficiency").eq("line_id", lineIdToQuery).eq("shift_id", queryShiftId).eq("date", queryDate);
-      if (performanceError) throw performanceError;
-      const underperformingCount = performanceData?.filter((w) => w.efficiency >= 10 && w.efficiency < 70).length || 0;
-      const totalValidWorkspaces = performanceData?.filter((w) => w.efficiency >= 10).length || 0;
-      const avgEfficiencyFromPerf = (performanceData?.reduce((sum, m) => sum + (m.efficiency || 0), 0) || 0) / (totalValidWorkspaces || 1);
+      if (metricsResult.error) throw metricsResult.error;
+      if (performanceResult.error) throw performanceResult.error;
+      const lineData = lineResult.data;
+      const metrics2 = metricsResult.data;
+      const performanceData = performanceResult.data;
+      const underperformingWorkspaces = memoizedEfficiencyFilter(performanceData || [], 10, 70);
+      const validWorkspaces = memoizedEfficiencyFilter(performanceData || [], 10);
+      const underperformingCount = underperformingWorkspaces.length;
+      const totalValidWorkspaces = validWorkspaces.length;
+      const avgEfficiencyFromPerf = memoizedAverageEfficiency(performanceData || [], 10);
       return {
         line_id: lineData.id,
         line_name: lineData.line_name,
@@ -1640,6 +1711,128 @@ var workspaceService = {
   }
 };
 
+// src/lib/services/skuService.ts
+var getTable4 = (dbConfig, tableName) => {
+  const globalConfig = _getDashboardConfigInstance();
+  const defaults2 = globalConfig?.databaseConfig?.tables;
+  const userValue = dbConfig?.tables?.[tableName];
+  const hardcodedDefaults = {
+    skus: "skus"
+  };
+  return userValue ?? defaults2?.[tableName] ?? hardcodedDefaults[tableName];
+};
+var skuService = {
+  /**
+   * Fetch all active SKUs for a company
+   */
+  async getSKUs(companyId) {
+    const supabase = _getSupabaseInstance();
+    if (!supabase) throw new Error("Supabase client not initialized");
+    const config = _getDashboardConfigInstance();
+    const dbConfig = config?.databaseConfig;
+    const skusTable = getTable4(dbConfig, "skus");
+    const { data, error } = await supabase.from(skusTable).select("*").eq("company_id", companyId).eq("is_active", true).order("created_at", { ascending: false });
+    if (error) {
+      console.error(`Error fetching SKUs from ${skusTable}:`, error);
+      throw error;
+    }
+    return data || [];
+  },
+  /**
+   * Get a single SKU by ID
+   */
+  async getSKU(skuId) {
+    const supabase = _getSupabaseInstance();
+    if (!supabase) throw new Error("Supabase client not initialized");
+    const config = _getDashboardConfigInstance();
+    const dbConfig = config?.databaseConfig;
+    const skusTable = getTable4(dbConfig, "skus");
+    const { data, error } = await supabase.from(skusTable).select("*").eq("id", skuId).single();
+    if (error) {
+      console.error(`Error fetching SKU from ${skusTable}:`, error);
+      throw error;
+    }
+    return data;
+  },
+  /**
+   * Create a new SKU
+   */
+  async createSKU(skuData) {
+    const supabase = _getSupabaseInstance();
+    if (!supabase) throw new Error("Supabase client not initialized");
+    const config = _getDashboardConfigInstance();
+    const dbConfig = config?.databaseConfig;
+    const skusTable = getTable4(dbConfig, "skus");
+    const { data, error } = await supabase.from(skusTable).insert([{
+      ...skuData,
+      attributes: skuData.attributes || {},
+      is_active: skuData.is_active ?? true
+    }]).select("*").single();
+    if (error) {
+      console.error(`Error creating SKU in ${skusTable}:`, error);
+      throw error;
+    }
+    return data;
+  },
+  /**
+   * Update an existing SKU
+   */
+  async updateSKU(skuId, updates) {
+    const supabase = _getSupabaseInstance();
+    if (!supabase) throw new Error("Supabase client not initialized");
+    const config = _getDashboardConfigInstance();
+    const dbConfig = config?.databaseConfig;
+    const skusTable = getTable4(dbConfig, "skus");
+    const { data, error } = await supabase.from(skusTable).update({
+      ...updates,
+      updated_at: (/* @__PURE__ */ new Date()).toISOString()
+    }).eq("id", skuId).select("*").single();
+    if (error) {
+      console.error(`Error updating SKU in ${skusTable}:`, error);
+      throw error;
+    }
+    return data;
+  },
+  /**
+   * Soft delete a SKU (set is_active to false)
+   */
+  async deleteSKU(skuId) {
+    const supabase = _getSupabaseInstance();
+    if (!supabase) throw new Error("Supabase client not initialized");
+    const config = _getDashboardConfigInstance();
+    const dbConfig = config?.databaseConfig;
+    const skusTable = getTable4(dbConfig, "skus");
+    const { error } = await supabase.from(skusTable).update({
+      is_active: false,
+      updated_at: (/* @__PURE__ */ new Date()).toISOString()
+    }).eq("id", skuId);
+    if (error) {
+      console.error(`Error deleting SKU from ${skusTable}:`, error);
+      throw error;
+    }
+  },
+  /**
+   * Check if a SKU ID already exists for a company
+   */
+  async checkSKUExists(companyId, skuId, excludeId) {
+    const supabase = _getSupabaseInstance();
+    if (!supabase) throw new Error("Supabase client not initialized");
+    const config = _getDashboardConfigInstance();
+    const dbConfig = config?.databaseConfig;
+    const skusTable = getTable4(dbConfig, "skus");
+    let query = supabase.from(skusTable).select("id").eq("company_id", companyId).eq("sku_id", skuId).eq("is_active", true);
+    if (excludeId) {
+      query = query.neq("id", excludeId);
+    }
+    const { data, error } = await query;
+    if (error) {
+      console.error(`Error checking SKU existence in ${skusTable}:`, error);
+      throw error;
+    }
+    return data && data.length > 0 || false;
+  }
+};
+
 // src/lib/services/authCoreService.ts
 var AUTH_ERROR_MESSAGES = {
   "Invalid login credentials": "Invalid email or password",
@@ -2069,6 +2262,349 @@ async function deleteThread(threadId) {
   const { error } = await supabase.schema("ai").from("chat_threads").delete().eq("id", threadId);
   if (error) throw error;
 }
+
+// src/lib/services/cacheService.ts
+var CacheService = class {
+  constructor() {
+    this.memoryCache = /* @__PURE__ */ new Map();
+    this.DEFAULT_DURATION = 5 * 60 * 1e3;
+  }
+  // 5 minutes
+  /**
+   * Generate a cache key from multiple parts
+   */
+  generateKey(...parts) {
+    return parts.filter((p) => p !== void 0 && p !== null).join(":");
+  }
+  /**
+   * Get item from cache
+   */
+  get(key, options) {
+    const storage = options?.storage || "memory";
+    try {
+      let cacheItem = null;
+      if (storage === "memory") {
+        cacheItem = this.memoryCache.get(key) || null;
+      } else if (storage === "localStorage" || storage === "sessionStorage") {
+        const stored = window[storage].getItem(key);
+        if (stored) {
+          cacheItem = JSON.parse(stored);
+        }
+      }
+      if (!cacheItem) {
+        return null;
+      }
+      if (Date.now() > cacheItem.expiresAt) {
+        this.delete(key, options);
+        return null;
+      }
+      return cacheItem.data;
+    } catch (error) {
+      console.error(`Error getting cache item ${key}:`, error);
+      return null;
+    }
+  }
+  /**
+   * Set item in cache
+   */
+  set(key, data, options) {
+    const storage = options?.storage || "memory";
+    const duration = options?.duration || this.DEFAULT_DURATION;
+    const cacheItem = {
+      data,
+      timestamp: Date.now(),
+      expiresAt: Date.now() + duration
+    };
+    try {
+      if (storage === "memory") {
+        this.memoryCache.set(key, cacheItem);
+        if (this.memoryCache.size > 100) {
+          const firstKey = this.memoryCache.keys().next().value;
+          if (firstKey) {
+            this.memoryCache.delete(firstKey);
+          }
+        }
+      } else if (storage === "localStorage" || storage === "sessionStorage") {
+        window[storage].setItem(key, JSON.stringify(cacheItem));
+      }
+    } catch (error) {
+      console.error(`Error setting cache item ${key}:`, error);
+    }
+  }
+  /**
+   * Delete item from cache
+   */
+  delete(key, options) {
+    const storage = options?.storage || "memory";
+    try {
+      if (storage === "memory") {
+        this.memoryCache.delete(key);
+      } else if (storage === "localStorage" || storage === "sessionStorage") {
+        window[storage].removeItem(key);
+      }
+    } catch (error) {
+      console.error(`Error deleting cache item ${key}:`, error);
+    }
+  }
+  /**
+   * Clear all items from cache
+   */
+  clear(options) {
+    const storage = options?.storage || "memory";
+    try {
+      if (storage === "memory") {
+        this.memoryCache.clear();
+      } else if (storage === "localStorage" || storage === "sessionStorage") {
+        const keys = Object.keys(window[storage]);
+        keys.forEach((key) => {
+          try {
+            const item = window[storage].getItem(key);
+            if (item) {
+              const parsed = JSON.parse(item);
+              if (parsed.timestamp && parsed.expiresAt && parsed.data !== void 0) {
+                window[storage].removeItem(key);
+              }
+            }
+          } catch {
+          }
+        });
+      }
+    } catch (error) {
+      console.error("Error clearing cache:", error);
+    }
+  }
+  /**
+   * Get or set item in cache with a factory function
+   */
+  async getOrSet(key, factory, options) {
+    const cached = this.get(key, options);
+    if (cached !== null) {
+      return cached;
+    }
+    const data = await factory();
+    this.set(key, data, options);
+    return data;
+  }
+  /**
+   * Invalidate cache entries matching a pattern
+   */
+  invalidatePattern(pattern, options) {
+    const storage = options?.storage || "memory";
+    const regex = typeof pattern === "string" ? new RegExp(pattern) : pattern;
+    try {
+      if (storage === "memory") {
+        const keysToDelete = [];
+        this.memoryCache.forEach((_, key) => {
+          if (regex.test(key)) {
+            keysToDelete.push(key);
+          }
+        });
+        keysToDelete.forEach((key) => this.memoryCache.delete(key));
+      } else if (storage === "localStorage" || storage === "sessionStorage") {
+        const keys = Object.keys(window[storage]);
+        keys.forEach((key) => {
+          if (regex.test(key)) {
+            window[storage].removeItem(key);
+          }
+        });
+      }
+    } catch (error) {
+      console.error("Error invalidating cache pattern:", error);
+    }
+  }
+  /**
+   * Clean up expired items
+   */
+  cleanup(options) {
+    const storage = options?.storage || "memory";
+    const now2 = Date.now();
+    try {
+      if (storage === "memory") {
+        const keysToDelete = [];
+        this.memoryCache.forEach((item, key) => {
+          if (now2 > item.expiresAt) {
+            keysToDelete.push(key);
+          }
+        });
+        keysToDelete.forEach((key) => this.memoryCache.delete(key));
+      } else if (storage === "localStorage" || storage === "sessionStorage") {
+        const keys = Object.keys(window[storage]);
+        keys.forEach((key) => {
+          try {
+            const item = window[storage].getItem(key);
+            if (item) {
+              const parsed = JSON.parse(item);
+              if (parsed.expiresAt && now2 > parsed.expiresAt) {
+                window[storage].removeItem(key);
+              }
+            }
+          } catch {
+          }
+        });
+      }
+    } catch (error) {
+      console.error("Error cleaning up cache:", error);
+    }
+  }
+};
+var cacheService = new CacheService();
+if (typeof window !== "undefined") {
+  setInterval(() => {
+    cacheService.cleanup({ storage: "localStorage" });
+    cacheService.cleanup({ storage: "sessionStorage" });
+    cacheService.cleanup({ storage: "memory" });
+  }, 60 * 1e3);
+}
+
+// src/lib/services/subscriptionManager.ts
+var SubscriptionManager = class {
+  constructor(supabase) {
+    this.subscriptions = /* @__PURE__ */ new Map();
+    this.debounceTimers = /* @__PURE__ */ new Map();
+    this.supabase = supabase;
+  }
+  /**
+   * Generate a unique key for a subscription configuration
+   */
+  generateKey(config) {
+    const { table, schema = "public", event = "*", filter: filter2 = "" } = config;
+    return `${schema}:${table}:${event}:${filter2}`;
+  }
+  /**
+   * Subscribe to real-time changes with automatic deduplication
+   */
+  subscribe(config) {
+    const key = this.generateKey(config);
+    const existing = this.subscriptions.get(key);
+    if (existing) {
+      existing.configs.push(config);
+      existing.refCount++;
+      console.log(`[SubscriptionManager] Reusing existing subscription for ${key}, refCount: ${existing.refCount}`);
+      return () => this.unsubscribe(key, config.callback);
+    }
+    const channelName = `subscription-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const channel = this.supabase.channel(channelName);
+    channel.on(
+      "postgres_changes",
+      {
+        event: config.event || "*",
+        schema: config.schema || "public",
+        table: config.table,
+        ...config.filter && { filter: config.filter }
+      },
+      (payload) => {
+        this.debouncedCallback(key, () => {
+          const subscription = this.subscriptions.get(key);
+          if (subscription) {
+            subscription.configs.forEach((cfg) => {
+              try {
+                cfg.callback(payload);
+              } catch (error) {
+                console.error("[SubscriptionManager] Error in callback:", error);
+              }
+            });
+          }
+        });
+      }
+    );
+    channel.subscribe((status) => {
+      console.log(`[SubscriptionManager] Subscription status for ${key}:`, status);
+    });
+    this.subscriptions.set(key, {
+      channel,
+      configs: [config],
+      refCount: 1
+    });
+    console.log(`[SubscriptionManager] Created new subscription for ${key}`);
+    return () => this.unsubscribe(key, config.callback);
+  }
+  /**
+   * Debounce callbacks to prevent excessive updates
+   */
+  debouncedCallback(key, callback, delay2 = 500) {
+    const existingTimer = this.debounceTimers.get(key);
+    if (existingTimer) {
+      clearTimeout(existingTimer);
+    }
+    const timer = setTimeout(() => {
+      callback();
+      this.debounceTimers.delete(key);
+    }, delay2);
+    this.debounceTimers.set(key, timer);
+  }
+  /**
+   * Unsubscribe from a specific subscription
+   */
+  unsubscribe(key, callback) {
+    const subscription = this.subscriptions.get(key);
+    if (!subscription) {
+      console.warn(`[SubscriptionManager] No subscription found for key: ${key}`);
+      return;
+    }
+    subscription.configs = subscription.configs.filter((cfg) => cfg.callback !== callback);
+    subscription.refCount--;
+    console.log(`[SubscriptionManager] Unsubscribed from ${key}, refCount: ${subscription.refCount}`);
+    if (subscription.refCount <= 0) {
+      this.supabase.removeChannel(subscription.channel);
+      this.subscriptions.delete(key);
+      const timer = this.debounceTimers.get(key);
+      if (timer) {
+        clearTimeout(timer);
+        this.debounceTimers.delete(key);
+      }
+      console.log(`[SubscriptionManager] Removed subscription for ${key}`);
+    }
+  }
+  /**
+   * Subscribe to multiple tables with a single callback
+   */
+  subscribeMultiple(configs, callback) {
+    const unsubscribeFunctions = configs.map(
+      (config) => this.subscribe({ ...config, callback })
+    );
+    return () => {
+      unsubscribeFunctions.forEach((fn) => fn());
+    };
+  }
+  /**
+   * Get current subscription statistics
+   */
+  getStats() {
+    let totalCallbacks = 0;
+    this.subscriptions.forEach((sub) => {
+      totalCallbacks += sub.configs.length;
+    });
+    return {
+      totalSubscriptions: this.subscriptions.size,
+      totalCallbacks
+    };
+  }
+  /**
+   * Clean up all subscriptions
+   */
+  cleanup() {
+    this.debounceTimers.forEach((timer) => clearTimeout(timer));
+    this.debounceTimers.clear();
+    this.subscriptions.forEach((subscription) => {
+      this.supabase.removeChannel(subscription.channel);
+    });
+    this.subscriptions.clear();
+    console.log("[SubscriptionManager] All subscriptions cleaned up");
+  }
+};
+var managerInstance = null;
+function getSubscriptionManager(supabase) {
+  if (!managerInstance) {
+    managerInstance = new SubscriptionManager(supabase);
+  }
+  return managerInstance;
+}
+function resetSubscriptionManager() {
+  if (managerInstance) {
+    managerInstance.cleanup();
+    managerInstance = null;
+  }
+}
 var AuthContext = createContext({
   session: null,
   user: null,
@@ -2288,6 +2824,36 @@ var useSupabase = () => {
   }
   return context.supabase;
 };
+var SubscriptionManagerContext = createContext({
+  subscriptionManager: null
+});
+var SubscriptionManagerProvider = ({ children }) => {
+  const supabase = useSupabase();
+  const subscriptionManager = useMemo(() => {
+    if (!supabase) return null;
+    return getSubscriptionManager(supabase);
+  }, [supabase]);
+  useEffect(() => {
+    return () => {
+      if (subscriptionManager) {
+        console.log("[SubscriptionManagerProvider] Cleaning up subscriptions");
+        subscriptionManager.cleanup();
+      }
+    };
+  }, [subscriptionManager]);
+  return /* @__PURE__ */ jsx(SubscriptionManagerContext.Provider, { value: { subscriptionManager }, children });
+};
+var useSubscriptionManager = () => {
+  const { subscriptionManager } = useContext(SubscriptionManagerContext);
+  if (!subscriptionManager) {
+    throw new Error("useSubscriptionManager must be used within a SubscriptionManagerProvider");
+  }
+  return subscriptionManager;
+};
+var useSubscriptionManagerSafe = () => {
+  const { subscriptionManager } = useContext(SubscriptionManagerContext);
+  return subscriptionManager;
+};
 var DEFAULT_COMPANY_ID = "default-company-id";
 var useWorkspaceMetrics = (workspaceId) => {
   const supabase = useSupabase();
@@ -2544,7 +3110,7 @@ var useWorkspaceDetailedMetrics = (workspaceId, date, shiftId) => {
   const defaultTimezone = dateTimeConfig.defaultTimezone;
   const workspaceMetricsBaseTable = databaseConfig.tables?.workspaces ?? "workspace_metrics";
   const workspaceActionsTable = databaseConfig.tables?.actions ?? "workspace_actions";
-  const fetchMetrics = useCallback(async () => {
+  const fetchMetrics = useCallback(async (skipCache = false) => {
     if (!workspaceId || isFetchingRef.current) return;
     try {
       isFetchingRef.current = true;
@@ -2553,6 +3119,28 @@ var useWorkspaceDetailedMetrics = (workspaceId, date, shiftId) => {
       const queryShiftId = shiftId !== void 0 ? shiftId : currentShift.shiftId;
       console.log("[useWorkspaceDetailedMetrics] Using shift ID:", queryShiftId, "from input shift:", shiftId);
       console.log("[useWorkspaceDetailedMetrics] Using date:", queryDate, "from input date:", date);
+      const cacheKey = cacheService.generateKey(
+        "workspace-detailed-metrics",
+        workspaceId,
+        queryDate,
+        queryShiftId,
+        companyId
+      );
+      if (!skipCache) {
+        const cachedData = cacheService.get(cacheKey, {
+          storage: "memory",
+          duration: 5 * 60 * 1e3
+          // 5 minutes
+        });
+        if (cachedData) {
+          console.log("[useWorkspaceDetailedMetrics] Using cached data for:", cacheKey);
+          setMetrics(cachedData);
+          setIsLoading(false);
+          updateQueueRef.current = false;
+          isFetchingRef.current = false;
+          return;
+        }
+      }
       console.log(`[useWorkspaceDetailedMetrics] Querying ${metricsTable} for workspace: ${workspaceId}, date: ${queryDate}, shift: ${queryShiftId}`);
       const { data, error: fetchError } = await supabase.from(metricsTable).select("*").eq("workspace_id", workspaceId).eq("date", queryDate).eq("shift_id", queryShiftId).maybeSingle();
       if (fetchError) throw fetchError;
@@ -2655,6 +3243,18 @@ var useWorkspaceDetailedMetrics = (workspaceId, date, shiftId) => {
           setIsLoading(false);
           updateQueueRef.current = false;
           isFetchingRef.current = false;
+          const fallbackCacheKey = cacheService.generateKey(
+            "workspace-detailed-metrics",
+            workspaceId,
+            recentData.date,
+            recentData.shift_id,
+            companyId
+          );
+          cacheService.set(fallbackCacheKey, transformedData2, {
+            storage: "memory",
+            duration: 2 * 60 * 1e3
+            // 2 minutes for fallback data
+          });
           return;
         } else {
           console.warn("[useWorkspaceDetailedMetrics] No data found for workspace:", workspaceId, "at all");
@@ -2768,6 +3368,11 @@ var useWorkspaceDetailedMetrics = (workspaceId, date, shiftId) => {
         ...data.sop_check !== void 0 && { sop_check: data.sop_check }
       };
       setMetrics(transformedData);
+      cacheService.set(cacheKey, transformedData, {
+        storage: "memory",
+        duration: 5 * 60 * 1e3
+        // 5 minutes
+      });
     } catch (err) {
       console.error("Error fetching workspace metrics:", err);
       setError({ message: err.message, code: err.code });
@@ -2802,7 +3407,7 @@ var useWorkspaceDetailedMetrics = (workspaceId, date, shiftId) => {
       },
       async (payload) => {
         console.log(`Received ${metricsTablePrefix} update:`, payload);
-        await fetchMetrics();
+        await fetchMetrics(true);
       }
     ).subscribe((status) => {
       console.log(`Workspace detailed metrics subscription status:`, status);
@@ -2836,6 +3441,14 @@ var useWorkspaceDetailedMetrics = (workspaceId, date, shiftId) => {
           matches: payloadData?.date === operationalDate && payloadData?.shift_id === queryShiftId
         });
         if (payloadData?.date === operationalDate && payloadData?.shift_id === queryShiftId) {
+          const cacheKey = cacheService.generateKey(
+            "workspace-detailed-metrics",
+            workspaceId,
+            operationalDate,
+            queryShiftId,
+            companyId
+          );
+          cacheService.delete(cacheKey, { storage: "memory" });
           queueUpdate();
         }
       }
@@ -2861,6 +3474,14 @@ var useWorkspaceDetailedMetrics = (workspaceId, date, shiftId) => {
           matches: payloadData?.date === operationalDate && payloadData?.shift_id === queryShiftId
         });
         if (payloadData?.date === operationalDate && payloadData?.shift_id === queryShiftId) {
+          const cacheKey = cacheService.generateKey(
+            "workspace-detailed-metrics",
+            workspaceId,
+            operationalDate,
+            queryShiftId,
+            companyId
+          );
+          cacheService.delete(cacheKey, { storage: "memory" });
           queueUpdate();
         }
       }
@@ -2886,6 +3507,14 @@ var useWorkspaceDetailedMetrics = (workspaceId, date, shiftId) => {
           matches: payloadData?.date === operationalDate && payloadData?.shift_id === queryShiftId
         });
         if (payloadData?.date === operationalDate && payloadData?.shift_id === queryShiftId) {
+          const cacheKey = cacheService.generateKey(
+            "workspace-detailed-metrics",
+            workspaceId,
+            operationalDate,
+            queryShiftId,
+            companyId
+          );
+          cacheService.delete(cacheKey, { storage: "memory" });
           queueUpdate();
         }
       }
@@ -2912,7 +3541,8 @@ var useWorkspaceDetailedMetrics = (workspaceId, date, shiftId) => {
     metrics: metrics2,
     isLoading,
     error,
-    refetch: fetchMetrics
+    refetch: () => fetchMetrics(true)
+    // Force refresh without cache
   };
 };
 var useLineWorkspaceMetrics = (lineId, options) => {
@@ -5129,19 +5759,39 @@ var useActiveBreaks = (lineIds) => {
         let breaks = [];
         if (activeShift.breaks) {
           if (Array.isArray(activeShift.breaks)) {
-            breaks = activeShift.breaks.map((breakItem) => ({
-              startTime: breakItem.start || breakItem.startTime || "00:00",
-              endTime: breakItem.end || breakItem.endTime || "00:00",
-              duration: breakItem.duration || 0,
-              remarks: breakItem.remarks || breakItem.name || ""
-            }));
+            breaks = activeShift.breaks.map((breakItem) => {
+              const startTime = breakItem.start || breakItem.startTime || "00:00";
+              const endTime = breakItem.end || breakItem.endTime || "00:00";
+              let duration = breakItem.duration || 0;
+              if (!duration || duration === 0) {
+                const startMinutes = parseTimeToMinutes2(startTime);
+                const endMinutes = parseTimeToMinutes2(endTime);
+                duration = endMinutes < startMinutes ? endMinutes + 24 * 60 - startMinutes : endMinutes - startMinutes;
+              }
+              return {
+                startTime,
+                endTime,
+                duration,
+                remarks: breakItem.remarks || breakItem.name || ""
+              };
+            });
           } else if (activeShift.breaks.breaks && Array.isArray(activeShift.breaks.breaks)) {
-            breaks = activeShift.breaks.breaks.map((breakItem) => ({
-              startTime: breakItem.start || breakItem.startTime || "00:00",
-              endTime: breakItem.end || breakItem.endTime || "00:00",
-              duration: breakItem.duration || 0,
-              remarks: breakItem.remarks || breakItem.name || ""
-            }));
+            breaks = activeShift.breaks.breaks.map((breakItem) => {
+              const startTime = breakItem.start || breakItem.startTime || "00:00";
+              const endTime = breakItem.end || breakItem.endTime || "00:00";
+              let duration = breakItem.duration || 0;
+              if (!duration || duration === 0) {
+                const startMinutes = parseTimeToMinutes2(startTime);
+                const endMinutes = parseTimeToMinutes2(endTime);
+                duration = endMinutes < startMinutes ? endMinutes + 24 * 60 - startMinutes : endMinutes - startMinutes;
+              }
+              return {
+                startTime,
+                endTime,
+                duration,
+                remarks: breakItem.remarks || breakItem.name || ""
+              };
+            });
           }
         }
         for (const breakItem of breaks) {
@@ -5203,12 +5853,32 @@ var useAllWorkspaceMetrics = (options) => {
     return `${metricsTablePrefix}_${companyId.replace(/-/g, "_")}`;
   }, [entityConfig.companyId]);
   const schema = databaseConfig.schema ?? "public";
-  const fetchWorkspaceMetrics = useCallback(async () => {
+  const fetchWorkspaceMetrics = useCallback(async (skipCache = false) => {
     if (!initialized) {
       setLoading(true);
     }
     setError(null);
     try {
+      const cacheKey = cacheService.generateKey(
+        "all-workspace-metrics",
+        entityConfig.companyId,
+        queryDate,
+        queryShiftId
+      );
+      if (!skipCache && !loading) {
+        const cachedData = cacheService.get(cacheKey, {
+          storage: "memory",
+          duration: 5 * 60 * 1e3
+          // 5 minutes
+        });
+        if (cachedData) {
+          console.log("[useAllWorkspaceMetrics] Using cached data for:", cacheKey);
+          setWorkspaces(cachedData);
+          setInitialized(true);
+          setLoading(false);
+          return;
+        }
+      }
       console.log("Fetching all workspace metrics with params:", {
         queryDate,
         queryShiftId,
@@ -5245,6 +5915,11 @@ var useAllWorkspaceMetrics = (options) => {
       }));
       setWorkspaces(transformedData);
       setInitialized(true);
+      cacheService.set(cacheKey, transformedData, {
+        storage: "memory",
+        duration: 5 * 60 * 1e3
+        // 5 minutes
+      });
     } catch (err) {
       console.error("Error fetching all workspace metrics:", err);
       setError({ message: err.message, code: err.code || "FETCH_ERROR" });
@@ -5269,7 +5944,14 @@ var useAllWorkspaceMetrics = (options) => {
         },
         async (payload) => {
           console.log("All workspace metrics update received:", payload);
-          await fetchWorkspaceMetrics();
+          const cacheKey = cacheService.generateKey(
+            "all-workspace-metrics",
+            entityConfig.companyId,
+            queryDate,
+            queryShiftId
+          );
+          cacheService.delete(cacheKey, { storage: "memory" });
+          await fetchWorkspaceMetrics(true);
         }
       ).subscribe();
       return channel2;
@@ -5280,16 +5962,80 @@ var useAllWorkspaceMetrics = (options) => {
         supabase.removeChannel(channel);
       }
     };
-  }, [queryDate, queryShiftId, metricsTable, fetchWorkspaceMetrics, initialized, supabase, schema]);
+  }, [queryDate, queryShiftId, metricsTable, fetchWorkspaceMetrics, initialized, supabase, schema, entityConfig.companyId]);
   useEffect(() => {
     setInitialized(false);
   }, [queryDate, queryShiftId]);
-  const refreshWorkspaces = fetchWorkspaceMetrics;
+  const refreshWorkspaces = useCallback(() => fetchWorkspaceMetrics(true), [fetchWorkspaceMetrics]);
   return useMemo(
     () => ({ workspaces, loading, error, refreshWorkspaces }),
     [workspaces, loading, error, refreshWorkspaces]
   );
 };
+var useSKUs = (companyId) => {
+  const [skus, setSKUs] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const supabase = useSupabase();
+  const config = useDashboardConfig();
+  const dbConfig = config?.databaseConfig;
+  const skusTable = dbConfig?.tables?.skus || "skus";
+  const fetchSKUs = useCallback(async () => {
+    if (!companyId) {
+      setIsLoading(false);
+      return;
+    }
+    try {
+      setIsLoading(true);
+      setError(null);
+      const data = await skuService.getSKUs(companyId);
+      setSKUs(data);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to fetch SKUs"));
+      console.error("Error fetching SKUs:", err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [companyId]);
+  useEffect(() => {
+    fetchSKUs();
+  }, [fetchSKUs]);
+  useEffect(() => {
+    if (!supabase || !companyId) return;
+    const channel = supabase.channel(`skus:${companyId}`).on(
+      "postgres_changes",
+      {
+        event: "*",
+        schema: dbConfig?.schema || "public",
+        table: skusTable,
+        filter: `company_id=eq.${companyId}`
+      },
+      (payload) => {
+        console.log("SKU change received:", payload);
+        if (payload.eventType === "INSERT") {
+          setSKUs((prev) => [...prev, payload.new]);
+        } else if (payload.eventType === "UPDATE") {
+          setSKUs(
+            (prev) => prev.map(
+              (sku) => sku.id === payload.new.id ? payload.new : sku
+            )
+          );
+        } else if (payload.eventType === "DELETE") {
+          setSKUs((prev) => prev.filter((sku) => sku.id !== payload.old.id));
+        }
+      }
+    ).subscribe();
+    return () => {
+      supabase.removeChannel(channel);
+    };
+  }, [supabase, companyId, dbConfig?.schema, skusTable]);
+  return {
+    skus,
+    isLoading,
+    error,
+    refetch: fetchSKUs
+  };
+};
 var MAX_RETRIES = 10;
 var RETRY_DELAY = 500;
 function useNavigation(customNavigate) {
@@ -8521,7 +9267,7 @@ var MotionConfigContext = createContext({
 });
 
 // ../../node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs
-var PopChildMeasure = class extends React14.Component {
+var PopChildMeasure = class extends React19.Component {
   getSnapshotBeforeUpdate(prevProps) {
     const element = this.props.childRef.current;
     if (element && prevProps.isPresent && !this.props.isPresent) {
@@ -8576,7 +9322,7 @@ function PopChild({ children, isPresent }) {
       document.head.removeChild(style);
     };
   }, [isPresent]);
-  return jsx(PopChildMeasure, { isPresent, childRef: ref, sizeRef: size, children: React14.cloneElement(children, { ref }) });
+  return jsx(PopChildMeasure, { isPresent, childRef: ref, sizeRef: size, children: React19.cloneElement(children, { ref }) });
 }
 
 // ../../node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs
@@ -8613,7 +9359,7 @@ var PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, pre
   useMemo(() => {
     presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
   }, [isPresent]);
-  React14.useEffect(() => {
+  React19.useEffect(() => {
     !isPresent && !presenceChildren.size && onExitComplete && onExitComplete();
   }, [isPresent]);
   if (mode === "popLayout") {
@@ -10020,7 +10766,7 @@ function removeItem(arr, item) {
 }
 
 // ../../node_modules/framer-motion/dist/es/utils/subscription-manager.mjs
-var SubscriptionManager = class {
+var SubscriptionManager3 = class {
   constructor() {
     this.subscriptions = [];
   }
@@ -10149,7 +10895,7 @@ var MotionValue = class {
   }
   on(eventName, callback) {
     if (!this.events[eventName]) {
-      this.events[eventName] = new SubscriptionManager();
+      this.events[eventName] = new SubscriptionManager3();
     }
     const unsubscribe = this.events[eventName].add(callback);
     if (eventName === "change") {
@@ -14143,7 +14889,7 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
     }
     addEventListener(name, handler) {
       if (!this.eventHandlers.has(name)) {
-        this.eventHandlers.set(name, new SubscriptionManager());
+        this.eventHandlers.set(name, new SubscriptionManager3());
       }
       return this.eventHandlers.get(name).add(handler);
     }
@@ -15733,7 +16479,7 @@ var VisualElement = class {
   }
   on(eventName, callback) {
     if (!this.events[eventName]) {
-      this.events[eventName] = new SubscriptionManager();
+      this.events[eventName] = new SubscriptionManager3();
     }
     return this.events[eventName].add(callback);
   }
@@ -15882,7 +16628,7 @@ var LoadingPage = ({
   subMessage = "Please wait while we prepare your data",
   className
 }) => {
-  React14__default.useEffect(() => {
+  React19__default.useEffect(() => {
     console.log("LoadingPage rendered with message:", message);
     const timeout = setTimeout(() => {
       console.warn("LoadingPage has been visible for more than 8 seconds. This might indicate an issue.");
@@ -15925,10 +16671,10 @@ var withAuth = (WrappedComponent2, options) => {
   return function WithAuthComponent(props) {
     const { session, loading } = useAuth();
     const router = useRouter();
-    React14.useEffect(() => {
+    React19.useEffect(() => {
       console.log("withAuth state:", { loading, hasSession: !!session, requireAuth: defaultOptions.requireAuth });
     }, [session, loading]);
-    React14.useEffect(() => {
+    React19.useEffect(() => {
       if (!loading && defaultOptions.requireAuth && !session) {
         console.log("Redirecting to login from withAuth");
         router.replace(defaultOptions.redirectTo);
@@ -16256,7 +17002,7 @@ var DebugAuth = () => {
   ] }) });
 };
 var DEFAULT_BAR_RADIUS = [4, 4, 0, 0];
-var BarChart = ({
+var BarChartComponent = ({
   data,
   bars,
   xAxisDataKey = "name",
@@ -16344,7 +17090,35 @@ var BarChart = ({
   }
   return /* @__PURE__ */ jsx("div", { className: clsx("w-full", className), children: chartContent });
 };
-var LineChart = ({
+var BarChart = React19__default.memo(BarChartComponent, (prevProps, nextProps) => {
+  if (prevProps.xAxisDataKey !== nextProps.xAxisDataKey || prevProps.xAxisLabel !== nextProps.xAxisLabel || prevProps.yAxisLabel !== nextProps.yAxisLabel || prevProps.yAxisUnit !== nextProps.yAxisUnit || prevProps.layout !== nextProps.layout || prevProps.className !== nextProps.className || prevProps.showGrid !== nextProps.showGrid || prevProps.showLegend !== nextProps.showLegend || prevProps.showTooltip !== nextProps.showTooltip || prevProps.responsive !== nextProps.responsive || prevProps.aspect !== nextProps.aspect) {
+    return false;
+  }
+  if (prevProps.data.length !== nextProps.data.length) {
+    return false;
+  }
+  if (!prevProps.data.every((item, idx) => {
+    const nextItem = nextProps.data[idx];
+    return Object.keys(item).every((key) => item[key] === nextItem[key]);
+  })) {
+    return false;
+  }
+  if (prevProps.bars.length !== nextProps.bars.length) {
+    return false;
+  }
+  if (!prevProps.bars.every((bar, idx) => {
+    const nextBar = nextProps.bars[idx];
+    return bar.dataKey === nextBar.dataKey && bar.name === nextBar.name && bar.fill === nextBar.fill && JSON.stringify(bar.radius) === JSON.stringify(nextBar.radius) && bar.labelList === nextBar.labelList;
+  })) {
+    return false;
+  }
+  if (prevProps.tooltipFormatter !== nextProps.tooltipFormatter || JSON.stringify(prevProps.legendPayload) !== JSON.stringify(nextProps.legendPayload)) {
+    return false;
+  }
+  return true;
+});
+BarChart.displayName = "BarChart";
+var LineChartComponent = ({
   data,
   lines,
   xAxisDataKey = "name",
@@ -16435,7 +17209,35 @@ var LineChart = ({
   }
   return /* @__PURE__ */ jsx("div", { className: clsx("w-full", className), children: chartContent });
 };
-var OutputProgressChart = ({
+var LineChart = React19__default.memo(LineChartComponent, (prevProps, nextProps) => {
+  if (prevProps.xAxisDataKey !== nextProps.xAxisDataKey || prevProps.xAxisLabel !== nextProps.xAxisLabel || prevProps.yAxisLabel !== nextProps.yAxisLabel || prevProps.yAxisUnit !== nextProps.yAxisUnit || prevProps.className !== nextProps.className || prevProps.showGrid !== nextProps.showGrid || prevProps.showLegend !== nextProps.showLegend || prevProps.showTooltip !== nextProps.showTooltip || prevProps.responsive !== nextProps.responsive || prevProps.aspect !== nextProps.aspect || JSON.stringify(prevProps.yAxisDomain) !== JSON.stringify(nextProps.yAxisDomain)) {
+    return false;
+  }
+  if (prevProps.data.length !== nextProps.data.length) {
+    return false;
+  }
+  if (!prevProps.data.every((item, idx) => {
+    const nextItem = nextProps.data[idx];
+    return Object.keys(item).every((key) => item[key] === nextItem[key]);
+  })) {
+    return false;
+  }
+  if (prevProps.lines.length !== nextProps.lines.length) {
+    return false;
+  }
+  if (!prevProps.lines.every((line, idx) => {
+    const nextLine = nextProps.lines[idx];
+    return line.dataKey === nextLine.dataKey && line.name === nextLine.name && line.stroke === nextLine.stroke && line.strokeWidth === nextLine.strokeWidth && line.type === nextLine.type && JSON.stringify(line.dot) === JSON.stringify(nextLine.dot) && JSON.stringify(line.activeDot) === JSON.stringify(nextLine.activeDot) && line.labelList === nextLine.labelList;
+  })) {
+    return false;
+  }
+  if (prevProps.tooltipFormatter !== nextProps.tooltipFormatter || prevProps.xAxisTickFormatter !== nextProps.xAxisTickFormatter || JSON.stringify(prevProps.legendPayload) !== JSON.stringify(nextProps.legendPayload)) {
+    return false;
+  }
+  return true;
+});
+LineChart.displayName = "LineChart";
+var OutputProgressChartComponent = ({
   currentOutput,
   targetOutput,
   className = ""
@@ -16484,6 +17286,8 @@ var OutputProgressChart = ({
     ] }) })
   ] }) });
 };
+var OutputProgressChart = React19__default.memo(OutputProgressChartComponent);
+OutputProgressChart.displayName = "OutputProgressChart";
 var LargeOutputProgressChart = ({
   currentOutput,
   targetOutput,
@@ -16533,7 +17337,7 @@ var LargeOutputProgressChart = ({
     ] }) })
   ] }) });
 };
-var CycleTimeChart = ({
+var CycleTimeChartComponent = ({
   data = [],
   className = ""
 }) => {
@@ -16598,6 +17402,25 @@ var CycleTimeChart = ({
     }
   ) }) });
 };
+var CycleTimeChart = React19__default.memo(CycleTimeChartComponent, (prevProps, nextProps) => {
+  if (prevProps.className !== nextProps.className) {
+    return false;
+  }
+  if (!prevProps.data && !nextProps.data) {
+    return true;
+  }
+  if (!prevProps.data || !nextProps.data) {
+    return false;
+  }
+  if (prevProps.data.length !== nextProps.data.length) {
+    return false;
+  }
+  return prevProps.data.every((item, index) => {
+    const nextItem = nextProps.data[index];
+    return item.time === nextItem.time && item.value === nextItem.value;
+  });
+});
+CycleTimeChart.displayName = "CycleTimeChart";
 var CycleTimeOverTimeChart = ({
   data,
   idealCycleTime,
@@ -16615,10 +17438,10 @@ var CycleTimeOverTimeChart = ({
   };
   const displayData = getDisplayData(data);
   const DURATION = displayData.length;
-  const [animatedData, setAnimatedData] = React14__default.useState(Array(DURATION).fill(0));
-  const prevDataRef = React14__default.useRef(Array(DURATION).fill(0));
-  const animationFrameRef = React14__default.useRef(null);
-  const animateToNewData = React14__default.useCallback((targetData) => {
+  const [animatedData, setAnimatedData] = React19__default.useState(Array(DURATION).fill(0));
+  const prevDataRef = React19__default.useRef(Array(DURATION).fill(0));
+  const animationFrameRef = React19__default.useRef(null);
+  const animateToNewData = React19__default.useCallback((targetData) => {
     const startData = [...prevDataRef.current];
     const startTime = performance.now();
     const duration = 1200;
@@ -16648,7 +17471,7 @@ var CycleTimeOverTimeChart = ({
     }
     animationFrameRef.current = requestAnimationFrame(animate);
   }, []);
-  React14__default.useEffect(() => {
+  React19__default.useEffect(() => {
     if (JSON.stringify(data) !== JSON.stringify(prevDataRef.current)) {
       const processedData = getDisplayData(data);
       animateToNewData(processedData);
@@ -16872,7 +17695,7 @@ var CycleTimeOverTimeChart = ({
     renderLegend()
   ] });
 };
-var Card = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Card = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -16884,7 +17707,7 @@ var Card = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardHeader = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -16893,7 +17716,7 @@ var CardHeader = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -16905,7 +17728,7 @@ var CardTitle = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardDescription = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "p",
   {
     ref,
@@ -16914,9 +17737,9 @@ var CardDescription = React14.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+var CardContent = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
-var CardFooter = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -16992,7 +17815,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React14.forwardRef(
+var Button = React19.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -17006,7 +17829,7 @@ var Button = React14.forwardRef(
   }
 );
 Button.displayName = "Button";
-var HourlyOutputChart = ({
+var HourlyOutputChartComponent = ({
   data,
   pphThreshold,
   shiftStart,
@@ -17023,17 +17846,17 @@ var HourlyOutputChart = ({
   };
   const shiftStartTime = getTimeFromTimeString(shiftStart);
   const SHIFT_DURATION = 11;
-  const [animatedData, setAnimatedData] = React14__default.useState(Array(SHIFT_DURATION).fill(0));
-  const prevDataRef = React14__default.useRef(Array(SHIFT_DURATION).fill(0));
-  const animationFrameRef = React14__default.useRef(null);
-  const [idleBarState, setIdleBarState] = React14__default.useState({
+  const [animatedData, setAnimatedData] = React19__default.useState(Array(SHIFT_DURATION).fill(0));
+  const prevDataRef = React19__default.useRef(Array(SHIFT_DURATION).fill(0));
+  const animationFrameRef = React19__default.useRef(null);
+  const [idleBarState, setIdleBarState] = React19__default.useState({
     visible: showIdleTime,
     key: 0,
     shouldAnimate: false
   });
-  const prevShowIdleTimeRef = React14__default.useRef(showIdleTime);
-  const stateUpdateTimeoutRef = React14__default.useRef(null);
-  React14__default.useEffect(() => {
+  const prevShowIdleTimeRef = React19__default.useRef(showIdleTime);
+  const stateUpdateTimeoutRef = React19__default.useRef(null);
+  React19__default.useEffect(() => {
     if (stateUpdateTimeoutRef.current) {
       clearTimeout(stateUpdateTimeoutRef.current);
     }
@@ -17058,7 +17881,7 @@ var HourlyOutputChart = ({
       }
     };
   }, [showIdleTime]);
-  const animateToNewData = React14__default.useCallback((targetData) => {
+  const animateToNewData = React19__default.useCallback((targetData) => {
     const startData = [...prevDataRef.current];
     const startTime = performance.now();
     const duration = 1200;
@@ -17088,7 +17911,7 @@ var HourlyOutputChart = ({
     }
     animationFrameRef.current = requestAnimationFrame(animate);
   }, []);
-  React14__default.useEffect(() => {
+  React19__default.useEffect(() => {
     if (JSON.stringify(data) !== JSON.stringify(prevDataRef.current)) {
       const shiftData = data.slice(0, SHIFT_DURATION);
       animateToNewData(shiftData);
@@ -17099,7 +17922,7 @@ var HourlyOutputChart = ({
       }
     };
   }, [data, animateToNewData]);
-  const formatHour = React14__default.useCallback((hourIndex) => {
+  const formatHour = React19__default.useCallback((hourIndex) => {
     const startDecimalHour = shiftStartTime.decimalHour + hourIndex;
     const startHour = Math.floor(startDecimalHour) % 24;
     const startMinute = Math.round(startDecimalHour % 1 * 60);
@@ -17116,7 +17939,7 @@ var HourlyOutputChart = ({
     };
     return `${formatTime2(startHour, startMinute)}-${formatTime2(endHour, endMinute)}`;
   }, [shiftStartTime.decimalHour]);
-  const formatTimeRange = React14__default.useCallback((hourIndex) => {
+  const formatTimeRange = React19__default.useCallback((hourIndex) => {
     const startDecimalHour = shiftStartTime.decimalHour + hourIndex;
     const startHour = Math.floor(startDecimalHour) % 24;
     const startMinute = Math.round(startDecimalHour % 1 * 60);
@@ -17130,7 +17953,7 @@ var HourlyOutputChart = ({
     };
     return `${formatTime2(startHour, startMinute)} - ${formatTime2(endHour, endMinute)}`;
   }, [shiftStartTime.decimalHour]);
-  const chartData = React14__default.useMemo(() => {
+  const chartData = React19__default.useMemo(() => {
     return Array.from({ length: SHIFT_DURATION }, (_, i) => {
       const actualHour = (shiftStartTime.hour + i) % 24;
       const idleArray = idleTimeHourly?.[actualHour.toString()] || [];
@@ -17147,7 +17970,7 @@ var HourlyOutputChart = ({
       };
     });
   }, [animatedData, data, pphThreshold, idleTimeHourly, shiftStartTime.hour, formatHour, formatTimeRange]);
-  const IdleBar = React14__default.useMemo(() => {
+  const IdleBar = React19__default.useMemo(() => {
     if (!idleBarState.visible) return null;
     return /* @__PURE__ */ jsx(
       Bar,
@@ -17464,6 +18287,33 @@ var HourlyOutputChart = ({
     renderLegend()
   ] });
 };
+var HourlyOutputChart = React19__default.memo(HourlyOutputChartComponent, (prevProps, nextProps) => {
+  if (prevProps.pphThreshold !== nextProps.pphThreshold || prevProps.shiftStart !== nextProps.shiftStart || prevProps.showIdleTime !== nextProps.showIdleTime || prevProps.className !== nextProps.className) {
+    return false;
+  }
+  if (prevProps.data.length !== nextProps.data.length) {
+    return false;
+  }
+  if (!prevProps.data.every((val, idx) => val === nextProps.data[idx])) {
+    return false;
+  }
+  const prevIdle = prevProps.idleTimeHourly || {};
+  const nextIdle = nextProps.idleTimeHourly || {};
+  const prevKeys = Object.keys(prevIdle);
+  const nextKeys = Object.keys(nextIdle);
+  if (prevKeys.length !== nextKeys.length) {
+    return false;
+  }
+  for (const key of prevKeys) {
+    if (!nextIdle[key]) return false;
+    const prevArray = prevIdle[key];
+    const nextArray = nextIdle[key];
+    if (prevArray.length !== nextArray.length) return false;
+    if (!prevArray.every((val, idx) => val === nextArray[idx])) return false;
+  }
+  return true;
+});
+HourlyOutputChart.displayName = "HourlyOutputChart";
 function getTrendArrowAndColor(trend) {
   if (trend > 0) {
     return { arrow: "\u2191", color: "text-green-400" };
@@ -17473,7 +18323,7 @@ function getTrendArrowAndColor(trend) {
     return { arrow: "\u2192", color: "text-gray-400" };
   }
 }
-var VideoCard = React14__default.memo(({
+var VideoCard = React19__default.memo(({
   workspace,
   hlsUrl,
   shouldPlay,
@@ -17616,7 +18466,7 @@ var VideoCard = React14__default.memo(({
 });
 VideoCard.displayName = "VideoCard";
 var DEFAULT_HLS_URL = "https://192.168.5.9:8443/cam1.m3u8";
-var VideoGridView = React14__default.memo(({
+var VideoGridView = React19__default.memo(({
   workspaces,
   selectedLine,
   className = "",
@@ -18418,7 +19268,7 @@ var EmptyStateMessage = ({
   iconClassName
 }) => {
   let IconContent = null;
-  if (React14__default.isValidElement(iconType)) {
+  if (React19__default.isValidElement(iconType)) {
     IconContent = iconType;
   } else if (typeof iconType === "string") {
     const MappedIcon = IconMap[iconType];
@@ -18551,7 +19401,10 @@ var BreakNotificationPopup = ({
             /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3 flex-1", children: [
               /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-amber-500 rounded-full animate-pulse flex-shrink-0 mt-2" }),
               /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                /* @__PURE__ */ jsx("div", { className: "mb-1", children: /* @__PURE__ */ jsx("h4", { className: "font-semibold text-sm text-gray-900", children: breakItem.remarks || "Break" }) }),
+                /* @__PURE__ */ jsxs("div", { className: "mb-1", children: [
+                  /* @__PURE__ */ jsx("h4", { className: "font-semibold text-sm text-gray-900", children: breakItem.remarks || "Break" }),
+                  (activeBreaks.length > 1 || lineNames[breakItem.lineId]) && /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500 mt-0.5", children: lineNames[breakItem.lineId] || `Line ${breakItem.lineId.substring(0, 8)}` })
+                ] }),
                 /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-600 font-medium", children: [
                   breakItem.startTime,
                   " - ",
@@ -18560,8 +19413,7 @@ var BreakNotificationPopup = ({
                 /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-500", children: [
                   formatTime2(breakItem.elapsedMinutes),
                   " / ",
-                  breakItem.duration,
-                  " min"
+                  formatTime2(breakItem.duration)
                 ] }) }),
                 /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx("div", { className: "w-full bg-gray-200 rounded-full h-1.5", children: /* @__PURE__ */ jsx(
                   "div",
@@ -21000,7 +21852,7 @@ function Skeleton({ className, ...props }) {
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React14.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -21016,7 +21868,7 @@ var SelectTrigger = React14.forwardRef(({ className, children, ...props }, ref)
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -21026,7 +21878,7 @@ var SelectScrollUpButton = React14.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -21036,7 +21888,7 @@ var SelectScrollDownButton = React14.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React14.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React19.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -21064,7 +21916,7 @@ var SelectContent = React14.forwardRef(({ className, children, position = "poppe
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -21073,7 +21925,7 @@ var SelectLabel = React14.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React14.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -21089,7 +21941,7 @@ var SelectItem = React14.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -21454,7 +22306,7 @@ function parseS3Uri(s3Uri, sopCategories) {
         break;
       case "long_cycle_time":
         severity = "high";
-        type = "bottleneck";
+        type = "long_cycle_time";
         description = "Long Cycle Time Detected";
         break;
       case "best_cycle_time":
@@ -21498,7 +22350,7 @@ function parseS3Uri(s3Uri, sopCategories) {
           severity = "low";
           description = "Best Cycle Time Performance";
         } else if (normalizedViolationType.includes("long") && normalizedViolationType.includes("cycle")) {
-          type = "bottleneck";
+          type = "long_cycle_time";
           severity = "high";
           description = "Long Cycle Time Detected";
         } else if (normalizedViolationType.includes("cycle") && (normalizedViolationType.includes("completion") || normalizedViolationType.includes("complete"))) {
@@ -21964,7 +22816,7 @@ var BottlenecksContent = ({
   className
 }) => {
   const dashboardConfig = useDashboardConfig();
-  const sopCategories = React14__default.useMemo(() => {
+  const sopCategories = React19__default.useMemo(() => {
     const sopConfig = dashboardConfig?.s3Config?.sopCategories;
     if (!sopConfig) return null;
     if (sopConfig.workspaceOverrides && sopConfig.workspaceOverrides[workspaceId]) {
@@ -22047,6 +22899,7 @@ var BottlenecksContent = ({
         const firstWorstCycle = videos.find((v) => v.type === "worst_cycle_time");
         const firstSOPDeviation = videos.find((v) => v.type === "missing_quality_check");
         const firstCycleCompletion = videos.find((v) => v.type === "cycle_completions");
+        const firstLongCycleTime = videos.find((v) => v.type === "long_cycle_time");
         preloadVideosUrl2([
           firstHigh?.src,
           firstMed?.src,
@@ -22055,7 +22908,8 @@ var BottlenecksContent = ({
           firstBestCycle?.src,
           firstWorstCycle?.src,
           firstSOPDeviation?.src,
-          firstCycleCompletion?.src
+          firstCycleCompletion?.src,
+          firstLongCycleTime?.src
         ].filter(Boolean));
       }
       setAllVideos(videos);
@@ -22081,7 +22935,7 @@ var BottlenecksContent = ({
       if (activeFilter === "worst_cycle_time") return video.type === "worst_cycle_time";
       if (activeFilter === "cycle_completions") return video.type === "cycle_completions";
       if (activeFilter === "long_cycle_time") {
-        return video.type === "bottleneck" && video.description.toLowerCase().includes("cycle time");
+        return video.type === "long_cycle_time";
       }
       return video.type === "bottleneck" && video.severity === activeFilter;
     });
@@ -22099,11 +22953,6 @@ var BottlenecksContent = ({
         const selectedCategory = sopCategories.find((cat) => cat.id === activeFilter);
         if (selectedCategory) {
           filtered = allVideos.filter((video) => video.type === selectedCategory.id);
-          if (selectedCategory.id === "long_cycle_time") {
-            filtered = allVideos.filter(
-              (video) => video.type === "bottleneck" && video.description.toLowerCase().includes("cycle time")
-            );
-          }
         }
       } else {
         if (activeFilter === "low_value") {
@@ -22117,9 +22966,7 @@ var BottlenecksContent = ({
         } else if (activeFilter === "cycle_completions") {
           filtered = allVideos.filter((video) => video.type === "cycle_completions");
         } else if (activeFilter === "long_cycle_time") {
-          filtered = allVideos.filter(
-            (video) => video.type === "bottleneck" && video.description.toLowerCase().includes("cycle time")
-          );
+          filtered = allVideos.filter((video) => video.type === "long_cycle_time");
         } else {
           filtered = allVideos.filter((video) => video.type === "bottleneck" && video.severity === activeFilter);
         }
@@ -22406,13 +23253,7 @@ var BottlenecksContent = ({
     const counts = { total: allVideos.length };
     if (sopCategories && sopCategories.length > 0) {
       sopCategories.forEach((category) => {
-        if (category.id === "long_cycle_time") {
-          counts[category.id] = allVideos.filter(
-            (video) => video.type === "bottleneck" && video.description.toLowerCase().includes("cycle time")
-          ).length;
-        } else {
-          counts[category.id] = allVideos.filter((video) => video.type === category.id).length;
-        }
+        counts[category.id] = allVideos.filter((video) => video.type === category.id).length;
       });
     } else {
       counts.bottlenecks = allVideos.filter((video) => video.type === "bottleneck").length;
@@ -22423,9 +23264,7 @@ var BottlenecksContent = ({
       counts.sopDeviations = allVideos.filter((video) => video.type === "missing_quality_check").length;
       counts.bestCycleTimes = allVideos.filter((video) => video.type === "best_cycle_time").length;
       counts.worstCycleTimes = allVideos.filter((video) => video.type === "worst_cycle_time").length;
-      counts.longCycleTimes = allVideos.filter(
-        (video) => video.type === "bottleneck" && video.description.toLowerCase().includes("cycle time")
-      ).length;
+      counts.longCycleTimes = allVideos.filter((video) => video.type === "long_cycle_time").length;
       counts.cycleCompletions = allVideos.filter((video) => video.type === "cycle_completions").length;
     }
     return counts;
@@ -22956,7 +23795,7 @@ var arePropsEqual = (prevProps, nextProps) => {
   return prevProps.data.efficiency === nextProps.data.efficiency && prevProps.data.trend_score === nextProps.data.trend_score && prevProps.data.workspace_id === nextProps.data.workspace_id && prevProps.data.workspace_name === nextProps.data.workspace_name && prevProps.isBottleneck === nextProps.isBottleneck && prevProps.isLowEfficiency === nextProps.isLowEfficiency && prevProps.isVeryLowEfficiency === nextProps.isVeryLowEfficiency && // Position doesn't need deep equality check as it's generally static
   prevProps.position.id === nextProps.position.id;
 };
-var WorkspaceGridItem = React14__default.memo(({
+var WorkspaceGridItem = React19__default.memo(({
   data,
   position,
   isBottleneck = false,
@@ -23049,7 +23888,7 @@ var WorkspaceGridItem = React14__default.memo(({
   );
 }, arePropsEqual);
 WorkspaceGridItem.displayName = "WorkspaceGridItem";
-var WorkspaceGrid = React14__default.memo(({
+var WorkspaceGrid = React19__default.memo(({
   workspaces,
   isPdfMode = false,
   customWorkspacePositions,
@@ -23239,7 +24078,7 @@ var KPICard = ({
 }) => {
   useThemeConfig();
   const { formatNumber } = useFormatNumber();
-  const trendInfo = React14__default.useMemo(() => {
+  const trendInfo = React19__default.useMemo(() => {
     let trendValue = trend || "neutral";
     if (change !== void 0 && trend === void 0) {
       trendValue = change > 0 ? "up" : change < 0 ? "down" : "neutral";
@@ -23262,7 +24101,7 @@ var KPICard = ({
     const shouldShowTrend = !(change === 0 && trend === void 0);
     return { trendValue, Icon: Icon2, colorClass, shouldShowTrend };
   }, [trend, change]);
-  const formattedValue = React14__default.useMemo(() => {
+  const formattedValue = React19__default.useMemo(() => {
     if (title === "Quality Compliance" && typeof value === "number") {
       return value.toFixed(1);
     }
@@ -23276,7 +24115,7 @@ var KPICard = ({
     }
     return value;
   }, [value, title]);
-  const formattedChange = React14__default.useMemo(() => {
+  const formattedChange = React19__default.useMemo(() => {
     if (change === void 0 || change === 0) return null;
     const absChange = Math.abs(change);
     return formatNumber(absChange, { minimumFractionDigits: 0, maximumFractionDigits: 1 });
@@ -23763,7 +24602,7 @@ var Breadcrumbs = ({ items }) => {
       }
     }
   };
-  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "mb-1 flex items-center space-x-1 text-xs font-medium text-gray-500 dark:text-gray-400", children: items.map((item, index) => /* @__PURE__ */ jsxs(React14__default.Fragment, { children: [
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "mb-1 flex items-center space-x-1 text-xs font-medium text-gray-500 dark:text-gray-400", children: items.map((item, index) => /* @__PURE__ */ jsxs(React19__default.Fragment, { children: [
     index > 0 && /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 text-gray-400 dark:text-gray-500" }),
     /* @__PURE__ */ jsxs(
       "span",
@@ -23955,7 +24794,9 @@ var SideNavBar = memo(({
   const router = useRouter();
   const { navigate } = useNavigation();
   const entityConfig = useEntityConfig();
+  const dashboardConfig = useDashboardConfig();
   const lineId = entityConfig.defaultLineId || LINE_1_UUID;
+  const skuEnabled = dashboardConfig?.skuConfig?.enabled || false;
   const pathname = propPathname || router.pathname;
   const getButtonClasses = useCallback((path) => {
     const isActive = pathname === path || pathname.startsWith(path + "/");
@@ -24030,6 +24871,14 @@ var SideNavBar = memo(({
       }
     }
   }), [navigate]);
+  const handleSKUsClick = useCallback(() => navigate("/skus", {
+    trackingEvent: {
+      name: "SKU Management Page Clicked",
+      properties: {
+        source: "side_nav"
+      }
+    }
+  }), [navigate]);
   const homeButtonClasses = useMemo(() => getButtonClasses("/"), [getButtonClasses, pathname]);
   const leaderboardButtonClasses = useMemo(() => getButtonClasses("/leaderboard"), [getButtonClasses, pathname]);
   const kpisButtonClasses = useMemo(() => getButtonClasses("/kpis"), [getButtonClasses, pathname]);
@@ -24038,6 +24887,7 @@ var SideNavBar = memo(({
   const aiAgentButtonClasses = useMemo(() => getButtonClasses("/ai-agent"), [getButtonClasses, pathname]);
   const profileButtonClasses = useMemo(() => getButtonClasses("/profile"), [getButtonClasses, pathname]);
   const helpButtonClasses = useMemo(() => getButtonClasses("/help"), [getButtonClasses, pathname]);
+  const skusButtonClasses = useMemo(() => getButtonClasses("/skus"), [getButtonClasses, pathname]);
   return /* @__PURE__ */ jsxs("aside", { className: `w-20 h-screen bg-white shadow-lg border-r border-gray-100 flex flex-col items-center fixed ${className}`, children: [
     /* @__PURE__ */ jsx("div", { className: "w-full py-6 px-4 flex-shrink-0", children: /* @__PURE__ */ jsx(
       "button",
@@ -24138,6 +24988,21 @@ var SideNavBar = memo(({
             ]
           }
         ),
+        skuEnabled && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: handleSKUsClick,
+            className: skusButtonClasses,
+            "aria-label": "SKU Management",
+            tabIndex: 0,
+            role: "tab",
+            "aria-selected": pathname === "/skus" || pathname.startsWith("/skus/"),
+            children: [
+              /* @__PURE__ */ jsx(CubeIcon, { className: "w-5 h-5 mb-1" }),
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium leading-tight", children: "SKUs" })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxs(
           "button",
           {
@@ -24322,6 +25187,103 @@ var Header = ({
     ] })
   ] }) });
 };
+var LoadingState = ({
+  message = "Loading...",
+  subMessage,
+  size = "lg",
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: `flex h-full w-full items-center justify-center bg-gray-50/50 ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center space-y-4 text-center", children: [
+    /* @__PURE__ */ jsx(LoadingSpinner_default, { size }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium text-gray-900", children: message }),
+      subMessage && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-600", children: subMessage })
+    ] })
+  ] }) });
+};
+var LoadingSkeleton = ({
+  type,
+  count = 1,
+  className = "",
+  showLoadingIndicator = true
+}) => {
+  const renderSkeleton = () => {
+    switch (type) {
+      case "card":
+        return /* @__PURE__ */ jsxs("div", { className: "space-y-3 p-4 border rounded-lg relative", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-1/2" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-full" }),
+          showLoadingIndicator && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ jsxs("div", { className: "flex space-x-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-blue-500 rounded-full animate-bounce", style: { animationDelay: "0ms" } }),
+            /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-blue-500 rounded-full animate-bounce", style: { animationDelay: "150ms" } }),
+            /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-blue-500 rounded-full animate-bounce", style: { animationDelay: "300ms" } })
+          ] }) })
+        ] });
+      case "chart":
+        return /* @__PURE__ */ jsxs("div", { className: "space-y-3 p-4 relative", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-1/3" }),
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-64 w-full" }),
+            showLoadingIndicator && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "bg-white/80 rounded-lg p-3 shadow-sm", children: /* @__PURE__ */ jsxs("svg", { className: "animate-spin h-6 w-6 text-blue-500", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+              /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+              /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+            ] }) }) })
+          ] })
+        ] });
+      case "table":
+        return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }),
+          [...Array(5)].map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-full" }, i))
+        ] });
+      case "list":
+        return /* @__PURE__ */ jsx("div", { className: "space-y-2", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-10 rounded-full" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/2" })
+          ] })
+        ] }, i)) });
+      case "kpi":
+        return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsxs("div", { className: "p-4 border rounded-lg space-y-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-2/3" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-1/2" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-full" })
+        ] }, i)) });
+      case "workspace-card":
+        return /* @__PURE__ */ jsxs("div", { className: "p-4 border rounded-lg space-y-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-1/3" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-16" })
+          ] }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-32 w-full" }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" })
+          ] })
+        ] });
+      case "video-grid":
+        return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [...Array(6)].map((_, i) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-48 w-full rounded-lg" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/2" })
+        ] }, i)) });
+      default:
+        return /* @__PURE__ */ jsx(Skeleton, { className: "h-20 w-full" });
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className, children: [...Array(count)].map((_, index) => /* @__PURE__ */ jsx("div", { children: renderSkeleton() }, index)) });
+};
+var LoadingInline = ({
+  message,
+  size = "sm",
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: `inline-flex items-center space-x-2 ${className}`, children: [
+    /* @__PURE__ */ jsx(LoadingSpinner_default, { size }),
+    message && /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-600", children: message })
+  ] });
+};
 var DEFAULT_HLS_CONFIG = {
   maxBufferLength: 15,
   // Moderate buffer length for faster startup
@@ -24581,7 +25543,7 @@ var ThreadSidebar = ({
   ] });
 };
 var axelProfilePng = "/axel-profile.png";
-var ProfilePicture = React14__default.memo(({ alt = "Axel", className = "w-12 h-12" }) => {
+var ProfilePicture = React19__default.memo(({ alt = "Axel", className = "w-12 h-12" }) => {
   return /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: `${className} rounded-xl overflow-hidden shadow-sm`, children: /* @__PURE__ */ jsx(
     "img",
     {
@@ -24699,6 +25661,7 @@ var AIAgentView = () => {
   const textareaRef = useRef(null);
   const messagesEndRef = useRef(null);
   const containerRef = useRef(null);
+  const renderedContentCache = useRef(/* @__PURE__ */ new Map());
   const { createThread, mutate: mutateThreads } = useThreads();
   const { messages, addMessage, setMessages } = useMessages(activeThreadId);
   const agnoApiUrl = config.endpoints?.agnoApiUrl || "https://optifye-agent-production.up.railway.app";
@@ -25184,6 +26147,10 @@ var AIAgentView = () => {
     });
   }
   const renderAssistantContent = (content) => {
+    const cached = renderedContentCache.current.get(content);
+    if (cached) {
+      return cached;
+    }
     const parseChartPatterns = (text) => {
       const chartElements = [];
       let lastIndex = 0;
@@ -26048,16 +27015,20 @@ var AIAgentView = () => {
       }
     };
     const chartContent = parseChartPatterns(content);
+    let finalNode;
     if (chartContent) {
-      return /* @__PURE__ */ jsx("div", { className: "formatted-content", children: chartContent });
+      finalNode = /* @__PURE__ */ jsx("div", { className: "formatted-content", children: chartContent });
+    } else {
+      finalNode = /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "formatted-content",
+          dangerouslySetInnerHTML: { __html: formatMessage(content) }
+        }
+      );
     }
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "formatted-content",
-        dangerouslySetInnerHTML: { __html: formatMessage(content) }
-      }
-    );
+    renderedContentCache.current.set(content, finalNode);
+    return finalNode;
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex h-screen bg-white", children: [
     /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: {
@@ -27299,8 +28270,6 @@ var HelpView = ({
 var AuthenticatedHelpView = withAuth(HelpView);
 var HelpView_default = HelpView;
 var KPISection2 = KPISection;
-var LoadingPageCmp = LoadingPage_default;
-var LoadingOverlayCmp = LoadingOverlay_default;
 function HomeView({
   defaultLineId,
   factoryViewId,
@@ -27319,6 +28288,7 @@ function HomeView({
   const [isChangingFilter, setIsChangingFilter] = useState(false);
   const [errorMessage, setErrorMessage] = useState(null);
   const [displayNamesInitialized, setDisplayNamesInitialized] = useState(false);
+  const [hasInitialDataLoaded, setHasInitialDataLoaded] = useState(false);
   useEffect(() => {
     const initDisplayNames = async () => {
       try {
@@ -27369,17 +28339,17 @@ function HomeView({
     lineId: selectedLineId,
     onLineMetricsUpdate
   });
-  const lineIdsForBreaks = useMemo(() => {
-    if (selectedLineId === factoryViewId) {
-      return allLineIds;
-    }
-    return [selectedLineId];
-  }, [selectedLineId, factoryViewId, allLineIds]);
   const {
-    activeBreaks,
+    activeBreaks: allActiveBreaks,
     isLoading: breaksLoading,
     error: breaksError
-  } = useActiveBreaks(lineIdsForBreaks);
+  } = useActiveBreaks(allLineIds);
+  const activeBreaks = useMemo(() => {
+    if (selectedLineId === factoryViewId) {
+      return allActiveBreaks;
+    }
+    return allActiveBreaks.filter((breakItem) => breakItem.lineId === selectedLineId);
+  }, [allActiveBreaks, selectedLineId, factoryViewId]);
   const memoizedWorkspaceMetrics = useMemo(() => workspaceMetrics, [
     // Only update reference if meaningful properties change
     workspaceMetrics.length,
@@ -27419,6 +28389,11 @@ function HomeView({
       }
     }
   }, [metricsLoading, kpisLoading, workspaceMetrics, isChangingFilter, selectedLineId, factoryViewId]);
+  useEffect(() => {
+    if (!metricsLoading && !kpisLoading && !hasInitialDataLoaded) {
+      setHasInitialDataLoaded(true);
+    }
+  }, [metricsLoading, kpisLoading, hasInitialDataLoaded]);
   const lineTitle = useMemo(() => {
     return factoryName;
   }, [factoryName]);
@@ -27431,9 +28406,56 @@ function HomeView({
       /* @__PURE__ */ jsx(SelectContent, { className: "z-50 bg-white shadow-lg border border-gray-200 rounded-md", children: availableLineIds.map((id3) => /* @__PURE__ */ jsx(SelectItem, { value: id3, children: lineNames[id3] || (id3 === factoryViewId ? "All Lines" : `Line ${id3.substring(0, 4)}`) }, id3)) })
     ] });
   }, [availableLineIds, handleLineChange, selectedLineId, lineNames, factoryViewId, allLineIds.length]);
-  const isLoading = !isHydrated || metricsLoading || kpisLoading || isChangingFilter || displayNamesLoading || !displayNamesInitialized;
-  if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-slate-50", children: /* @__PURE__ */ jsx(LoadingPageCmp, { message: "Loading dashboard..." }) });
+  const isInitialLoading = !isHydrated || !displayNamesInitialized && displayNamesLoading;
+  const isDataLoading = metricsLoading || kpisLoading;
+  if (isInitialLoading) {
+    return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-slate-50 flex items-center justify-center", children: /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "text-center",
+        initial: { opacity: 0, scale: 0.9 },
+        animate: { opacity: 1, scale: 1 },
+        transition: { duration: 0.5 },
+        children: /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-2xl shadow-2xl p-12 max-w-md mx-auto", children: [
+          /* @__PURE__ */ jsx("div", { className: "relative mb-8", children: /* @__PURE__ */ jsxs("div", { className: "w-24 h-24 mx-auto", children: [
+            /* @__PURE__ */ jsxs("svg", { className: "animate-spin", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", children: [
+              /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r: "45", fill: "none", stroke: "#e5e7eb", strokeWidth: "8" }),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: "50",
+                  cy: "50",
+                  r: "45",
+                  fill: "none",
+                  stroke: "#3b82f6",
+                  strokeWidth: "8",
+                  strokeDasharray: "150 283",
+                  strokeLinecap: "round",
+                  className: "transform -rotate-90 origin-center"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full animate-pulse" }) })
+          ] }) }),
+          /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-gray-800 mb-2", children: "Loading Dashboard" }),
+          /* @__PURE__ */ jsx("p", { className: "text-gray-600 mb-6", children: "Initializing your workspace..." }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center space-x-2 text-sm text-gray-500", children: [
+              /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-blue-500 rounded-full animate-pulse" }),
+              /* @__PURE__ */ jsx("span", { children: "Connecting to services" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center space-x-2 text-sm text-gray-500", children: [
+              /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-blue-500 rounded-full animate-pulse", style: { animationDelay: "0.2s" } }),
+              /* @__PURE__ */ jsx("span", { children: "Loading workspace configurations" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center space-x-2 text-sm text-gray-500", children: [
+              /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-blue-500 rounded-full animate-pulse", style: { animationDelay: "0.4s" } }),
+              /* @__PURE__ */ jsx("span", { children: "Preparing dashboard view" })
+            ] })
+          ] })
+        ] })
+      }
+    ) });
   }
   if (errorMessage || displayNamesError) {
     return /* @__PURE__ */ jsx("div", { className: "flex h-screen items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-white p-6 shadow-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3 text-red-500", children: [
@@ -27444,52 +28466,64 @@ function HomeView({
       ] })
     ] }) }) });
   }
-  if ((metricsLoading || kpisLoading) && (!workspaceMetrics || workspaceMetrics.length === 0) && selectedLineId !== factoryViewId) {
-    return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-slate-50", children: /* @__PURE__ */ jsx(LoadingPageCmp, { message: "Loading metrics..." }) });
-  }
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     motion.div,
     {
       className: "flex min-h-screen bg-slate-50",
       initial: { opacity: 1 },
       animate: { opacity: 1 },
-      children: [
-        /* @__PURE__ */ jsx(LoadingOverlayCmp, { isVisible: isChangingFilter, message: "Loading new metrics..." }),
-        /* @__PURE__ */ jsxs("div", { className: "relative flex flex-1", children: [
-          /* @__PURE__ */ jsxs("main", { className: "flex flex-1 flex-col", children: [
-            /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-30 sm:static bg-white shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between px-3 sm:px-6 lg:px-8 py-1.5 sm:py-2.5", children: /* @__PURE__ */ jsx(
-              DashboardHeader,
-              {
-                lineTitle,
-                className: "w-full",
-                headerControls: memoizedKPIs ? /* @__PURE__ */ jsx(KPISection2, { kpis: memoizedKPIs, className: "w-full sm:w-auto" }) : null
-              }
-            ) }) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto sm:overflow-hidden relative", children: [
-              lineSelectorComponent && /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-2 sm:right-6 sm:top-3 z-30", children: lineSelectorComponent }),
-              memoizedWorkspaceMetrics.length > 0 ? /* @__PURE__ */ jsx("div", { className: "h-full sm:h-full min-h-[calc(100vh-80px)] sm:min-h-0", children: React14__default.createElement(WorkspaceGrid, {
-                workspaces: memoizedWorkspaceMetrics,
-                lineNames,
-                factoryView: factoryViewId,
-                videoSources,
-                className: "h-full"
-              }) }) : /* @__PURE__ */ jsx(NoWorkspaceData, { message: "No workspace data available. Select another line or check configurations." })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(
-            BreakNotificationPopup,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-1", children: [
+        /* @__PURE__ */ jsxs("main", { className: "flex flex-1 flex-col", children: [
+          /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-30 sm:static bg-white shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between px-3 sm:px-6 lg:px-8 py-1.5 sm:py-2.5", children: /* @__PURE__ */ jsx(
+            DashboardHeader,
             {
-              activeBreaks,
-              lineNames,
-              isVisible: !breaksLoading && !breaksError
+              lineTitle,
+              className: "w-full",
+              headerControls: memoizedKPIs ? /* @__PURE__ */ jsx(KPISection2, { kpis: memoizedKPIs, className: "w-full sm:w-auto" }) : null
             }
-          )
-        ] })
-      ]
+          ) }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto sm:overflow-hidden relative", children: [
+            lineSelectorComponent && /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-2 sm:right-6 sm:top-3 z-30", children: lineSelectorComponent }),
+            /* @__PURE__ */ jsx("div", { className: "h-full sm:h-full min-h-[calc(100vh-80px)] sm:min-h-0", children: isDataLoading && hasInitialDataLoaded && memoizedWorkspaceMetrics.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 sm:px-6 lg:px-8 py-4", children: /* @__PURE__ */ jsx(LoadingSkeleton, { type: "workspace-card", count: 8, className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4" }) }) : memoizedWorkspaceMetrics.length > 0 ? /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: { opacity: 0, scale: 0.98 },
+                animate: { opacity: 1, scale: 1 },
+                transition: { duration: 0.3 },
+                className: "h-full",
+                children: React19__default.createElement(WorkspaceGrid, {
+                  workspaces: memoizedWorkspaceMetrics,
+                  lineNames,
+                  factoryView: factoryViewId,
+                  videoSources,
+                  className: "h-full"
+                })
+              },
+              selectedLineId
+            ) : /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                transition: { duration: 0.3 },
+                children: /* @__PURE__ */ jsx(NoWorkspaceData, { message: "No workspace data available. Select another line or check configurations." })
+              }
+            ) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          BreakNotificationPopup,
+          {
+            activeBreaks,
+            lineNames,
+            isVisible: !breaksLoading && !breaksError
+          }
+        )
+      ] })
     }
   );
 }
-var AuthenticatedHomeView = withAuth(React14__default.memo(HomeView));
+var AuthenticatedHomeView = withAuth(React19__default.memo(HomeView));
 var HomeView_default = HomeView;
 
 // src/views/kpi-detail-view.types.ts
@@ -28322,7 +29356,7 @@ var LineCard = ({ line, onClick }) => {
   const { kpis, isLoading, error } = useLineKPIs({ lineId: line.id });
   const shiftConfig = useShiftConfig();
   const dateTimeConfig = useDateTimeConfig();
-  const isOnTrack = React14__default.useMemo(() => {
+  const isOnTrack = React19__default.useMemo(() => {
     if (!kpis) return null;
     const currentTime = /* @__PURE__ */ new Date();
     const timezone = dateTimeConfig.defaultTimezone || "Asia/Kolkata";
@@ -30347,7 +31381,7 @@ var BulkConfigureModal = ({
                       },
                       className: "w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n                        shadow-sm focus:border-blue-500 focus:ring-blue-500 \n                        transition-all duration-200 hover:border-blue-400",
                       min: "0",
-                      step: "1",
+                      step: "0.01",
                       placeholder: "Enter cycle time"
                     }
                   ),
@@ -30468,6 +31502,343 @@ var BulkConfigureModal = ({
   );
 };
 var BulkConfigureModal_default = BulkConfigureModal;
+var SKUModal = ({
+  isOpen,
+  onClose,
+  onSave,
+  editingSKU
+}) => {
+  const config = useDashboardConfig();
+  const defaultProductionTarget = config?.skuConfig?.defaultProductionTarget || 1e3;
+  const [formData, setFormData] = useState({
+    sku_id: "",
+    production_target: defaultProductionTarget,
+    attributes: {}
+  });
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (editingSKU) {
+      setFormData({
+        sku_id: editingSKU.sku_id,
+        production_target: editingSKU.production_target,
+        attributes: editingSKU.attributes || {}
+      });
+    } else {
+      setFormData({
+        sku_id: "",
+        production_target: defaultProductionTarget,
+        attributes: {}
+      });
+    }
+    setError(null);
+  }, [editingSKU, defaultProductionTarget]);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    if (!formData.sku_id.trim()) {
+      setError("SKU ID is required");
+      return;
+    }
+    if (formData.production_target <= 0) {
+      setError("Production target must be greater than 0");
+      return;
+    }
+    setIsSaving(true);
+    try {
+      const skuData = {
+        sku_id: formData.sku_id.trim(),
+        production_target: formData.production_target,
+        attributes: formData.attributes,
+        company_id: config?.entityConfig?.companyId || ""
+      };
+      await onSave(skuData);
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to save SKU");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4", children: /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-2xl max-w-md w-full transform transition-all", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-6 border-b border-gray-200", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-gray-900", children: editingSKU ? "Edit SKU" : "Add New SKU" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onClose,
+          className: "text-gray-400 hover:text-gray-600 transition-colors p-1 hover:bg-gray-100 rounded-lg",
+          disabled: isSaving,
+          children: /* @__PURE__ */ jsx(X, { className: "w-5 h-5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "p-6", children: [
+      error && /* @__PURE__ */ jsx("div", { className: "mb-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm", children: error }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("label", { htmlFor: "sku_id", className: "block text-sm font-medium text-gray-700 mb-2", children: [
+            "SKU ID ",
+            /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              id: "sku_id",
+              value: formData.sku_id,
+              onChange: (e) => setFormData({ ...formData, sku_id: e.target.value }),
+              className: "w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200",
+              placeholder: "Enter SKU ID",
+              disabled: isSaving || !!editingSKU,
+              required: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("label", { htmlFor: "production_target", className: "block text-sm font-medium text-gray-700 mb-2", children: [
+            "Production Target ",
+            /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "number",
+              id: "production_target",
+              value: formData.production_target,
+              onChange: (e) => setFormData({ ...formData, production_target: parseInt(e.target.value) || 0 }),
+              className: "w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200",
+              placeholder: "Enter production target",
+              min: "1",
+              disabled: isSaving,
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm text-gray-500", children: "Units per day for this SKU" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Additional Attributes (Optional)" }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              value: JSON.stringify(formData.attributes, null, 2),
+              onChange: (e) => {
+                try {
+                  const parsed = JSON.parse(e.target.value);
+                  setFormData({ ...formData, attributes: parsed });
+                } catch {
+                }
+              },
+              className: "w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent font-mono text-sm transition-all duration-200",
+              rows: 4,
+              placeholder: '{"color": "red", "size": "large"}',
+              disabled: isSaving
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm text-gray-500", children: "Enter valid JSON for additional SKU attributes" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end space-x-3 mt-6 pt-4 border-t border-gray-200", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-all duration-200",
+            disabled: isSaving,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "submit",
+            className: "px-4 py-2 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 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 shadow-sm",
+            disabled: isSaving,
+            children: isSaving ? "Saving..." : editingSKU ? "Update" : "Create"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+};
+var SKUSelector = ({
+  onSelect,
+  selectedSKU,
+  availableSKUs,
+  className = "",
+  lineId,
+  disabled = false,
+  required = false
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const dropdownRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  const filteredSKUs = availableSKUs.filter(
+    (sku) => sku.sku_id.toLowerCase().includes(searchTerm.toLowerCase()) || JSON.stringify(sku.attributes).toLowerCase().includes(searchTerm.toLowerCase())
+  );
+  const handleSelect = (sku) => {
+    onSelect(sku);
+    setIsOpen(false);
+    setSearchTerm("");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `relative ${className}`, ref: dropdownRef, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => !disabled && setIsOpen(!isOpen),
+        className: `
+          w-full px-3 py-2 text-left bg-white border rounded-md shadow-sm
+          ${disabled ? "bg-gray-100 cursor-not-allowed" : "hover:bg-gray-50 cursor-pointer"}
+          ${required && !selectedSKU ? "border-red-300" : "border-gray-300"}
+          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+        `,
+        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__ */ jsxs("span", { className: "text-sm text-gray-500 ml-2", children: [
+              "(Target: ",
+              selectedSKU.production_target,
+              " units/day)"
+            ] })
+          ] }) : "Select SKU" }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: `w-4 h-4 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}` })
+        ] })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs("div", { className: "absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg", children: [
+      /* @__PURE__ */ jsx("div", { className: "p-2 border-b", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: searchTerm,
+            onChange: (e) => setSearchTerm(e.target.value),
+            placeholder: "Search SKUs...",
+            className: "w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+            onClick: (e) => e.stopPropagation()
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "max-h-60 overflow-y-auto", children: [
+        !required && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => handleSelect(null),
+            className: "w-full px-3 py-2 text-left text-sm hover:bg-gray-100 focus:outline-none focus:bg-gray-100",
+            children: /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: "No SKU" })
+          }
+        ),
+        filteredSKUs.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-gray-500", children: "No SKUs found" }) : filteredSKUs.map((sku) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => handleSelect(sku),
+            className: `
+                    w-full px-3 py-2 text-left text-sm hover:bg-gray-100 focus:outline-none focus:bg-gray-100
+                    ${selectedSKU?.id === sku.id ? "bg-blue-50" : ""}
+                  `,
+            children: /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { className: "font-medium", children: sku.sku_id }),
+              /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-500", children: [
+                "Target: ",
+                sku.production_target,
+                " units/day",
+                Object.keys(sku.attributes || {}).length > 0 && /* @__PURE__ */ jsxs("span", { className: "ml-2", children: [
+                  "\u2022 ",
+                  Object.entries(sku.attributes).map(([key, value]) => `${key}: ${value}`).join(", ")
+                ] })
+              ] })
+            ] })
+          },
+          sku.id
+        ))
+      ] })
+    ] })
+  ] });
+};
+var SKUList = ({
+  skus,
+  onEdit,
+  onDelete,
+  isLoading = false
+}) => {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: "bg-white rounded-xl shadow-sm border border-gray-200 p-8", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-center items-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" }),
+      /* @__PURE__ */ jsx("span", { className: "ml-3 text-gray-600", children: "Loading SKUs..." })
+    ] }) });
+  }
+  if (skus.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "bg-white rounded-xl shadow-sm border border-gray-200 p-12", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx(Package, { className: "mx-auto h-12 w-12 text-gray-400" }),
+      /* @__PURE__ */ jsx("h3", { className: "mt-2 text-lg font-medium text-gray-900", children: "No SKUs found" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Get started by creating a new SKU for production planning." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "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 ID" }),
+      /* @__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: "Attributes" }),
+      /* @__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("th", { scope: "col", className: "relative px-6 py-3", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Actions" }) })
+    ] }) }),
+    /* @__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 whitespace-nowrap", children: /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium text-gray-700", children: [
+        sku.production_target.toLocaleString(),
+        " units/day"
+      ] }) }),
+      /* @__PURE__ */ jsx("td", { className: "px-6 py-4", children: /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500", children: Object.keys(sku.attributes || {}).length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "No attributes" }) : /* @__PURE__ */ jsx("div", { className: "max-w-xs truncate", children: Object.entries(sku.attributes).map(([key, value], index) => /* @__PURE__ */ jsxs("span", { children: [
+        index > 0 && ", ",
+        /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+          key,
+          ":"
+        ] }),
+        " ",
+        String(value)
+      ] }, key)) }) }) }),
+      /* @__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: new Date(sku.created_at).toLocaleDateString() }),
+      /* @__PURE__ */ jsxs("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm font-medium", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => onEdit(sku),
+            className: "text-blue-600 hover:text-blue-800 mr-3 transition-colors duration-150 p-1 hover:bg-blue-50 rounded",
+            title: "Edit SKU",
+            children: /* @__PURE__ */ jsx(Edit2, { className: "w-4 h-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => onDelete(sku),
+            className: "text-red-600 hover:text-red-800 transition-colors duration-150 p-1 hover:bg-red-50 rounded",
+            title: "Delete SKU",
+            children: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" })
+          }
+        )
+      ] })
+    ] }, sku.id)) })
+  ] }) }) });
+};
 var TargetsViewUI = ({
   isLoading,
   lineWorkspaces,
@@ -30486,7 +31857,12 @@ var TargetsViewUI = ({
   onShiftChange,
   onSaveLine,
   onToggleBulkConfigure,
-  onBulkConfigure
+  onBulkConfigure,
+  // SKU props
+  skuEnabled = false,
+  skus = [],
+  onUpdateSelectedSKU,
+  skuRequired = false
 }) => {
   if (isLoading) {
     return /* @__PURE__ */ jsx("div", { className: "flex h-screen bg-gray-50", children: /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "w-8 h-8 animate-spin text-blue-600" }) }) });
@@ -30602,6 +31978,26 @@ var TargetsViewUI = ({
               ] })
             ] }) }),
             line.isOpen && /* @__PURE__ */ jsxs("div", { id: `line-${lineId}-content`, className: "border-t border-gray-200", children: [
+              skuEnabled && /* @__PURE__ */ jsx("div", { className: "px-6 py-4 border-b border-gray-200 bg-gray-50/50", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+                /* @__PURE__ */ jsx("label", { htmlFor: `sku-${lineId}`, className: "text-sm font-medium text-gray-700", children: "Select SKU:" }),
+                /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-md", children: /* @__PURE__ */ jsx(
+                  SKUSelector,
+                  {
+                    onSelect: (sku) => onUpdateSelectedSKU?.(lineId, sku),
+                    selectedSKU: line.selectedSKU || null,
+                    availableSKUs: skus,
+                    lineId,
+                    required: skuRequired,
+                    className: "w-full"
+                  }
+                ) }),
+                line.selectedSKU && /* @__PURE__ */ jsxs("div", { className: "text-sm text-gray-600", children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Production Target:" }),
+                  " ",
+                  line.selectedSKU.production_target.toLocaleString(),
+                  " units/day"
+                ] })
+              ] }) }),
               /* @__PURE__ */ jsx("div", { className: "px-6 py-3 bg-gray-50 border-b border-gray-200", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-6 text-sm font-medium text-gray-600", children: [
                 /* @__PURE__ */ jsx("div", { className: "col-span-2", children: "Workspace" }),
                 /* @__PURE__ */ jsx("div", { className: "col-span-2", children: "Action Type" }),
@@ -30648,7 +32044,7 @@ var TargetsViewUI = ({
                         onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetCycleTime", Number(e.target.value) || ""),
                         className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n                                  shadow-sm focus:border-blue-500 focus:ring-blue-500 \n                                  transition-all duration-200 hover:border-gray-400",
                         min: "0",
-                        step: "1",
+                        step: "0.01",
                         placeholder: "Enter cycle time"
                       }
                     ) }),
@@ -30739,6 +32135,9 @@ var TargetsView = ({
   const supabase = useSupabase();
   const auth = useAuth();
   userId || auth?.user?.id;
+  const dashboardConfig = useDashboardConfig();
+  const { skus, isLoading: skusLoading } = useSKUs(companyId);
+  const skuEnabled = dashboardConfig?.skuConfig?.enabled || false;
   useEffect(() => {
     const fetchLineDetails = async () => {
       if (!supabase || lineIds.length === 0) return;
@@ -31106,6 +32505,41 @@ var TargetsView = ({
       }
     }));
   };
+  const updateSelectedSKU = (lineId, sku) => {
+    setLineWorkspaces((prev) => ({
+      ...prev,
+      [lineId]: {
+        ...prev[lineId],
+        selectedSKU: sku,
+        productId: sku?.sku_id || prev[lineId].productId
+        // Update productId with SKU ID
+      }
+    }));
+    if (sku && sku.production_target > 0) {
+      const lineData = lineWorkspaces[lineId];
+      const workspaceCount = lineData.workspaces.length;
+      if (workspaceCount > 0) {
+        const targetPerWorkspace = Math.floor(sku.production_target / workspaceCount);
+        const pphPerWorkspace = calculatePPH(
+          lineData.shiftHours > 0 ? lineData.shiftHours * 3600 / targetPerWorkspace : 0,
+          lineData.breaks,
+          lineData.shiftHours
+        );
+        setLineWorkspaces((prev) => ({
+          ...prev,
+          [lineId]: {
+            ...prev[lineId],
+            workspaces: prev[lineId].workspaces.map((ws) => ({
+              ...ws,
+              targetDayOutput: targetPerWorkspace,
+              targetPPH: pphPerWorkspace,
+              targetCycleTime: lineData.shiftHours > 0 ? parseFloat((lineData.shiftHours * 3600 / targetPerWorkspace).toFixed(2)) : ""
+            }))
+          }
+        }));
+      }
+    }
+  };
   const updateWorkspaceTarget = (lineId, workspaceId, field, value) => {
     setLineWorkspaces((prev) => {
       const shiftHours = prev[lineId].shiftHours;
@@ -31238,6 +32672,11 @@ var TargetsView = ({
         return;
       }
       console.log(`[handleSaveLine] factoryId for ${lineId}: ${lineDataToSave.factoryId}`);
+      if (skuEnabled && dashboardConfig?.skuConfig?.requireSKUSelection && !lineDataToSave.selectedSKU) {
+        console.log(`[handleSaveLine] Exiting: SKU selection required but not selected for lineId: ${lineId}`);
+        toast.error("Please select a SKU before saving.");
+        return;
+      }
       const currentFactoryId = lineDataToSave.factoryId;
       const currentDate = getOperationalDate();
       console.log(`[handleSaveLine] currentDate: ${currentDate}, selectedShift: ${selectedShift}`);
@@ -31251,8 +32690,9 @@ var TargetsView = ({
         ideal_cycle_time: Number(ws.targetCycleTime) || 0,
         total_day_output: Number(ws.targetDayOutput) || 0,
         action_name: ws.actionType === "assembly" ? ACTION_NAMES.ASSEMBLY : ACTION_NAMES.PACKAGING,
-        updated_by: currentEffectiveUserId
+        updated_by: currentEffectiveUserId,
         // Use the potentially hardcoded ID
+        ...skuEnabled && lineDataToSave.selectedSKU ? { sku_id: lineDataToSave.selectedSKU.id } : {}
       }));
       console.log(`[handleSaveLine] workspaceThresholdUpdates for ${lineId}:`, workspaceThresholdUpdates);
       await workspaceService.updateActionThresholds(workspaceThresholdUpdates);
@@ -31264,7 +32704,8 @@ var TargetsView = ({
         shift_id: selectedShift,
         product_code: lineDataToSave.productId,
         threshold_day_output: lineDataToSave.workspaces.reduce((acc, ws) => acc + (Number(ws.targetDayOutput) || 0), 0),
-        threshold_pph: lineDataToSave.workspaces.reduce((acc, ws) => acc + (Number(ws.targetPPH) || 0), 0)
+        threshold_pph: lineDataToSave.workspaces.reduce((acc, ws) => acc + (Number(ws.targetPPH) || 0), 0),
+        ...skuEnabled && lineDataToSave.selectedSKU ? { sku_id: lineDataToSave.selectedSKU.id } : {}
       };
       console.log(`[handleSaveLine] lineThresholdData for upsert on ${lineId}:`, lineThresholdData);
       const { error: lineUpsertError } = await supabase.from("line_thresholds").upsert(lineThresholdData, { onConflict: "factory_id,line_id,date,shift_id" });
@@ -31359,7 +32800,7 @@ var TargetsView = ({
   return /* @__PURE__ */ jsx(
     TargetsViewUI_default,
     {
-      isLoading,
+      isLoading: isLoading || skusLoading,
       lineWorkspaces,
       lineNames,
       savingLines,
@@ -31376,7 +32817,11 @@ var TargetsView = ({
       onShiftChange: handleShiftChange,
       onSaveLine: handleSaveLine,
       onToggleBulkConfigure: handleToggleBulkConfigure,
-      onBulkConfigure: handleBulkConfigure
+      onBulkConfigure: handleBulkConfigure,
+      skuEnabled,
+      skus,
+      onUpdateSelectedSKU: updateSelectedSKU,
+      skuRequired: dashboardConfig?.skuConfig?.requireSKUSelection || false
     }
   );
 };
@@ -31635,7 +33080,43 @@ var WorkspaceDetailView = ({
     }
   };
   if (loading) {
-    return /* @__PURE__ */ jsx("div", { className: "min-h-screen flex items-center justify-center bg-slate-50", children: /* @__PURE__ */ jsx("div", { className: "text-xl text-gray-600", children: "Loading workspace details..." }) });
+    return /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "min-h-screen bg-slate-50",
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        transition: { duration: 0.3 },
+        children: /* @__PURE__ */ jsxs("div", { className: "min-h-screen w-full flex flex-col bg-slate-50", children: [
+          /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 px-2 sm:px-2.5 lg:px-3 py-1.5 sm:py-2 lg:py-3 flex flex-col shadow-sm bg-white", children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "absolute left-0 animate-pulse", children: /* @__PURE__ */ jsx("div", { className: "h-8 w-20 bg-gray-200 rounded" }) }),
+            /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 animate-pulse", children: /* @__PURE__ */ jsx("div", { className: "h-6 w-40 bg-gray-200 rounded" }) }),
+            /* @__PURE__ */ jsx("div", { className: "w-full h-8" })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 p-4 sm:p-6 lg:p-8", children: [
+            /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsxs("div", { className: "flex space-x-4 justify-center animate-pulse", children: [
+              /* @__PURE__ */ jsx("div", { className: "h-10 w-32 bg-gray-200 rounded-lg" }),
+              /* @__PURE__ */ jsx("div", { className: "h-10 w-32 bg-gray-200 rounded-lg" }),
+              /* @__PURE__ */ jsx("div", { className: "h-10 w-32 bg-gray-200 rounded-lg" })
+            ] }) }),
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4 mb-6", children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx("div", { className: "bg-white rounded-lg p-4 shadow-sm", children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse", children: [
+              /* @__PURE__ */ jsx("div", { className: "h-4 w-20 bg-gray-200 rounded mb-2" }),
+              /* @__PURE__ */ jsx("div", { className: "h-8 w-16 bg-gray-200 rounded" })
+            ] }) }, i)) }),
+            /* @__PURE__ */ jsx("div", { className: "bg-white rounded-lg p-6 shadow-sm", children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse", children: [
+              /* @__PURE__ */ jsx("div", { className: "h-6 w-40 bg-gray-200 rounded mb-4" }),
+              /* @__PURE__ */ jsx("div", { className: "h-64 bg-gray-100 rounded relative overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "bg-white/80 rounded-lg p-4 shadow-sm", children: [
+                /* @__PURE__ */ jsxs("svg", { className: "animate-spin h-8 w-8 text-blue-500", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+                  /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                  /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 mt-2", children: "Loading chart data..." })
+              ] }) }) })
+            ] }) })
+          ] })
+        ] })
+      }
+    );
   }
   if (error) {
     return /* @__PURE__ */ jsxs("div", { className: "min-h-screen p-8 bg-slate-50", children: [
@@ -32075,6 +33556,144 @@ var WorkspaceDetailView = ({
 };
 var WrappedComponent = withAuth(WorkspaceDetailView);
 var WorkspaceDetailView_default = WrappedComponent;
+var SKUManagementView = () => {
+  const config = useDashboardConfig();
+  const companyId = config?.entityConfig?.companyId || "";
+  const router = useRouter();
+  const { skus, isLoading, error, refetch } = useSKUs(companyId);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingSKU, setEditingSKU] = useState(null);
+  const [deleteConfirmSKU, setDeleteConfirmSKU] = useState(null);
+  useEffect(() => {
+    trackCoreEvent("SKU Management Page Viewed");
+  }, []);
+  const handleCreateOrUpdate = async (skuData) => {
+    try {
+      if (editingSKU) {
+        await skuService.updateSKU(editingSKU.id, {
+          production_target: skuData.production_target,
+          attributes: skuData.attributes
+        });
+        trackCoreEvent("SKU Updated", {
+          sku_id: editingSKU.sku_id,
+          production_target: skuData.production_target
+        });
+      } else {
+        const exists = await skuService.checkSKUExists(companyId, skuData.sku_id);
+        if (exists) {
+          throw new Error("SKU ID already exists");
+        }
+        await skuService.createSKU(skuData);
+        trackCoreEvent("SKU Created", {
+          sku_id: skuData.sku_id,
+          production_target: skuData.production_target
+        });
+      }
+      setIsModalOpen(false);
+      setEditingSKU(null);
+      refetch();
+    } catch (error2) {
+      console.error("Error saving SKU:", error2);
+      throw error2;
+    }
+  };
+  const handleEdit = (sku) => {
+    setEditingSKU(sku);
+    setIsModalOpen(true);
+  };
+  const handleDelete = async (sku) => {
+    if (deleteConfirmSKU?.id === sku.id) {
+      try {
+        await skuService.deleteSKU(sku.id);
+        trackCoreEvent("SKU Deleted", { sku_id: sku.sku_id });
+        setDeleteConfirmSKU(null);
+        refetch();
+      } catch (error2) {
+        console.error("Error deleting SKU:", error2);
+      }
+    } else {
+      setDeleteConfirmSKU(sku);
+      setTimeout(() => setDeleteConfirmSKU(null), 3e3);
+    }
+  };
+  const handleAddNew = () => {
+    setEditingSKU(null);
+    setIsModalOpen(true);
+  };
+  const handleBack = () => {
+    router.push("/");
+  };
+  if (!config?.skuConfig?.enabled) {
+    return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-slate-50 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx(Package, { className: "mx-auto h-12 w-12 text-gray-400" }),
+      /* @__PURE__ */ jsx("h3", { className: "mt-2 text-sm font-medium text-gray-900", children: "SKU Management Disabled" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-500", children: "SKU management is not enabled for this workspace." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-slate-50", children: [
+    /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-8 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: handleBack,
+          className: "absolute left-0 flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors",
+          children: [
+            /* @__PURE__ */ jsx(ArrowLeft, { className: "h-5 w-5" }),
+            /* @__PURE__ */ jsx("span", { children: "Back" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 text-center mx-auto", children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold text-gray-900", children: "SKU Management" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Manage Stock Keeping Units (SKUs) for production planning" })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: handleAddNew,
+          className: "absolute right-0 inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-sm",
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "w-4 h-4 mr-2" }),
+            "Add SKU"
+          ]
+        }
+      )
+    ] }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxs("div", { className: "px-4 sm:px-8 py-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-6 bg-gradient-to-r from-blue-50 to-blue-50/50 p-4 rounded-xl border border-blue-100", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-blue-700 font-medium", children: "Create and manage SKUs with production targets. These will be available for selection in the production targets page." }) }),
+      error ? /* @__PURE__ */ jsxs("div", { className: "bg-red-50 border border-red-200 text-red-700 p-4 rounded-lg", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Error loading SKUs" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm mt-1", children: error.message })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          SKUList,
+          {
+            skus,
+            onEdit: handleEdit,
+            onDelete: handleDelete,
+            isLoading
+          }
+        ),
+        deleteConfirmSKU && /* @__PURE__ */ jsx("div", { className: "mt-4 bg-yellow-50 border border-yellow-200 text-yellow-800 p-4 rounded-lg", children: /* @__PURE__ */ jsxs("p", { className: "text-sm", children: [
+          "Click delete again to confirm deletion of SKU: ",
+          /* @__PURE__ */ jsx("strong", { children: deleteConfirmSKU.sku_id })
+        ] }) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      SKUModal,
+      {
+        isOpen: isModalOpen,
+        onClose: () => {
+          setIsModalOpen(false);
+          setEditingSKU(null);
+        },
+        onSave: handleCreateOrUpdate,
+        editingSKU
+      }
+    )
+  ] });
+};
 var S3Service = class {
   constructor(config) {
     this.s3Client = null;
@@ -32313,4 +33932,4 @@ var S3Service = class {
   }
 };
 
-export { ACTION_NAMES, AIAgentView_default as AIAgentView, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedTargetsView, BarChart, BaseHistoryCalendar, BottlenecksContent, BreakNotificationPopup, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, CycleTimeChart, CycleTimeOverTimeChart, DEFAULT_ANALYTICS_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_CONFIG, DEFAULT_DATABASE_CONFIG, DEFAULT_DATE_TIME_CONFIG, DEFAULT_ENDPOINTS_CONFIG, DEFAULT_ENTITY_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_THEME_CONFIG, DEFAULT_VIDEO_CONFIG, DEFAULT_WORKSPACE_CONFIG, DEFAULT_WORKSPACE_POSITIONS, DashboardHeader, DashboardLayout, DashboardOverridesProvider, DashboardProvider, DateDisplay_default as DateDisplay, DateTimeDisplay, DebugAuth, DebugAuthView_default as DebugAuthView, EmptyStateMessage, FactoryView_default as FactoryView, GaugeChart, GridComponentsPlaceholder, Header, HelpView_default as HelpView, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LINE_2_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend6 as Legend, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LiveTimer, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSpinner_default as LoadingSpinner, LoginPage, LoginView_default as LoginView, MainLayout, MetricCard_default as MetricCard, NoWorkspaceData, OptifyeAgentClient, OutputProgressChart, PageHeader, PieChart4 as PieChart, ProfileView_default as ProfileView, RegistryProvider, S3Service, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SingleVideoStream_default as SingleVideoStream, Skeleton, SlackAPI, SupabaseProvider, TargetWorkspaceGrid, TargetsView_default as TargetsView, ThreadSidebar, TimeDisplay_default as TimeDisplay, TimePickerDropdown, VideoCard, VideoGridView, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceDisplayNameExample, WorkspaceGrid, WorkspaceGridItem, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, apiUtils, authCoreService, authOTPService, authRateLimitService, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createStreamProxyHandler, createSupabaseClient, createThrottledReload, dashboardService, deleteThread, forceRefreshWorkspaceDisplayNames, formatDateInZone, formatDateTimeInZone, formatISTDate, formatIdleTime, formatTimeInZone, fromUrlFriendlyName, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAnonClient, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getCurrentShift, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultTabForWorkspace, getManufacturingInsights, getMetricsTablePrefix, getOperationalDate, getS3SignedUrl, getS3VideoSrc, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getThreadMessages, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, identifyCoreUser, initializeCoreMixpanel, isTransitionPeriod, isValidLineInfoPayload, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, mergeWithDefaultConfig, optifyeAgentClient, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, s3VideoPreloader, storeWorkspaceMapping, streamProxyConfig, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, updateThreadTitle, useActiveBreaks, useAllWorkspaceMetrics, useAnalyticsConfig, useAuth, useAuthConfig, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineWorkspaceMetrics, useMessages, useMetrics, useNavigation, useOverrides, usePageOverride, useRealtimeLineMetrics, useRegistry, useShiftConfig, useShifts, useSupabase, useSupabaseClient, useTargets, useTheme, useThemeConfig, useThreads, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, videoPreloader, whatsappService, withAuth, withRegistry, workspaceService };
+export { ACTION_NAMES, AIAgentView_default as AIAgentView, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedTargetsView, BarChart, BaseHistoryCalendar, BottlenecksContent, BreakNotificationPopup, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, CycleTimeChart, CycleTimeOverTimeChart, DEFAULT_ANALYTICS_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_CONFIG, DEFAULT_DATABASE_CONFIG, DEFAULT_DATE_TIME_CONFIG, DEFAULT_ENDPOINTS_CONFIG, DEFAULT_ENTITY_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_THEME_CONFIG, DEFAULT_VIDEO_CONFIG, DEFAULT_WORKSPACE_CONFIG, DEFAULT_WORKSPACE_POSITIONS, DashboardHeader, DashboardLayout, DashboardOverridesProvider, DashboardProvider, DateDisplay_default as DateDisplay, DateTimeDisplay, DebugAuth, DebugAuthView_default as DebugAuthView, EmptyStateMessage, FactoryView_default as FactoryView, GaugeChart, GridComponentsPlaceholder, Header, HelpView_default as HelpView, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LINE_2_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend6 as Legend, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LiveTimer, LoadingInline, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSkeleton, LoadingSpinner_default as LoadingSpinner, LoadingState, LoginPage, LoginView_default as LoginView, MainLayout, MetricCard_default as MetricCard, NoWorkspaceData, OptifyeAgentClient, OutputProgressChart, PageHeader, PieChart4 as PieChart, ProfileView_default as ProfileView, RegistryProvider, S3Service, SKUManagementView, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SingleVideoStream_default as SingleVideoStream, Skeleton, SlackAPI, SubscriptionManager, SubscriptionManagerProvider, SupabaseProvider, TargetWorkspaceGrid, TargetsView_default as TargetsView, ThreadSidebar, TimeDisplay_default as TimeDisplay, TimePickerDropdown, VideoCard, VideoGridView, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceDisplayNameExample, WorkspaceGrid, WorkspaceGridItem, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, apiUtils, authCoreService, authOTPService, authRateLimitService, cacheService, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createStreamProxyHandler, createSupabaseClient, createThrottledReload, dashboardService, deleteThread, forceRefreshWorkspaceDisplayNames, formatDateInZone, formatDateTimeInZone, formatISTDate, formatIdleTime, formatTimeInZone, fromUrlFriendlyName, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAnonClient, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getCurrentShift, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultTabForWorkspace, getManufacturingInsights, getMetricsTablePrefix, getOperationalDate, getS3SignedUrl, getS3VideoSrc, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getSubscriptionManager, getThreadMessages, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, identifyCoreUser, initializeCoreMixpanel, isTransitionPeriod, isValidLineInfoPayload, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, mergeWithDefaultConfig, optifyeAgentClient, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, resetSubscriptionManager, s3VideoPreloader, skuService, storeWorkspaceMapping, streamProxyConfig, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, updateThreadTitle, useActiveBreaks, useAllWorkspaceMetrics, useAnalyticsConfig, useAuth, useAuthConfig, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineWorkspaceMetrics, useMessages, useMetrics, useNavigation, useOverrides, usePageOverride, useRealtimeLineMetrics, useRegistry, useSKUs, useShiftConfig, useShifts, useSubscriptionManager, useSubscriptionManagerSafe, useSupabase, useSupabaseClient, useTargets, useTheme, useThemeConfig, useThreads, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, videoPreloader, whatsappService, withAuth, withRegistry, workspaceService };