@optifye/dashboard-core 6.10.1 → 6.10.3

package/dist/index.js

@@ -1847,22 +1847,112 @@ var qualityService = {
   }
 };
 
-// src/lib/services/workspaceService.ts
+// src/lib/services/backendClient.ts
+var ACCESS_TOKEN_REFRESH_BUFFER_MS = 6e4;
+var cachedAccessToken = null;
+var cachedAccessTokenExpiresAtMs = null;
+var cachedUserId = null;
+var inFlightRequests = /* @__PURE__ */ new Map();
+var authListenerSubscription = null;
+var authListenerSupabase = null;
+var clearBackendClientCaches = () => {
+  cachedAccessToken = null;
+  cachedAccessTokenExpiresAtMs = null;
+  cachedUserId = null;
+  inFlightRequests.clear();
+};
+var initBackendClientAuthListener = (supabase) => {
+  if (authListenerSupabase === supabase && authListenerSubscription) return;
+  if (authListenerSubscription) {
+    authListenerSubscription.unsubscribe();
+    authListenerSubscription = null;
+  }
+  authListenerSupabase = supabase;
+  const { data } = supabase.auth.onAuthStateChange(() => {
+    clearBackendClientCaches();
+  });
+  authListenerSubscription = data.subscription;
+};
 var getBackendUrl = () => {
   const url = process.env.NEXT_PUBLIC_BACKEND_URL;
   if (!url) {
     throw new Error("Backend URL is not configured. Please set NEXT_PUBLIC_BACKEND_URL in your environment.");
   }
-  return url;
+  return url.replace(/\/$/, "");
 };
-var getAuthToken = async () => {
-  const supabase = _getSupabaseInstance();
-  if (!supabase) throw new Error("Supabase client not initialized");
-  const { data: { session } } = await supabase.auth.getSession();
+var getAuthToken = async (supabase) => {
+  const now2 = Date.now();
+  if (cachedAccessToken && cachedAccessTokenExpiresAtMs && now2 < cachedAccessTokenExpiresAtMs - ACCESS_TOKEN_REFRESH_BUFFER_MS) {
+    return cachedAccessToken;
+  }
+  const {
+    data: { session }
+  } = await supabase.auth.getSession();
   if (!session?.access_token) {
+    clearBackendClientCaches();
     throw new Error("No authentication token available. Please log in.");
   }
-  return session.access_token;
+  cachedAccessToken = session.access_token;
+  cachedUserId = session.user?.id || null;
+  const expiresAtSeconds = session?.expires_at;
+  cachedAccessTokenExpiresAtMs = typeof expiresAtSeconds === "number" ? expiresAtSeconds * 1e3 : now2 + 5 * 60 * 1e3;
+  return cachedAccessToken;
+};
+var defaultDedupeKey = (method, url, body) => {
+  const bodyKey = body === void 0 ? "" : typeof body === "string" ? body : JSON.stringify(body);
+  return `${cachedUserId || "anon"}::${method.toUpperCase()}::${url}::${bodyKey}`;
+};
+var fetchBackendJson = async (supabase, endpoint, options = {}) => {
+  const baseUrl = getBackendUrl();
+  const url = endpoint.startsWith("http") ? endpoint : `${baseUrl}${endpoint.startsWith("/") ? "" : "/"}${endpoint}`;
+  const method = (options.method || "GET").toString();
+  const bodyForKey = options.body;
+  const dedupeKey = options.dedupeKey || defaultDedupeKey(method, url, bodyForKey);
+  const existing = inFlightRequests.get(dedupeKey);
+  if (existing) {
+    return existing;
+  }
+  const requestPromise = (async () => {
+    const headers = new Headers(options.headers || {});
+    if (!options.skipAuth) {
+      const token = await getAuthToken(supabase);
+      headers.set("Authorization", `Bearer ${token}`);
+    }
+    if (!headers.has("Content-Type") && options.body !== void 0) {
+      headers.set("Content-Type", "application/json");
+    }
+    const response = await fetch(url, {
+      ...options,
+      headers
+    });
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Backend API error (${response.status}): ${errorText}`);
+    }
+    if (response.status === 204) return void 0;
+    const text = await response.text();
+    return text ? JSON.parse(text) : void 0;
+  })();
+  inFlightRequests.set(dedupeKey, requestPromise);
+  try {
+    return await requestPromise;
+  } finally {
+    inFlightRequests.delete(dedupeKey);
+  }
+};
+
+// src/lib/services/workspaceService.ts
+var getBackendUrl2 = () => {
+  const url = process.env.NEXT_PUBLIC_BACKEND_URL;
+  if (!url) {
+    throw new Error("Backend URL is not configured. Please set NEXT_PUBLIC_BACKEND_URL in your environment.");
+  }
+  return url;
+};
+var getAuthToken2 = async () => {
+  const supabase = _getSupabaseInstance();
+  if (!supabase) throw new Error("Supabase client not initialized");
+  return getAuthToken(supabase);
 };
 var workspaceService = {
   // Cache for workspace display names to avoid repeated API calls
@@ -1870,26 +1960,56 @@ var workspaceService = {
   _cacheTimestamp: 0,
   _cacheExpiryMs: 5 * 60 * 1e3,
   // 5 minutes cache
-  async getWorkspaces(lineId) {
-    try {
-      const token = await getAuthToken();
-      const apiUrl = getBackendUrl();
-      const response = await fetch(`${apiUrl}/api/workspaces?line_id=${lineId}`, {
-        headers: {
-          "Authorization": `Bearer ${token}`,
-          "Content-Type": "application/json"
+  // Cache for workspace lists to avoid repeated API calls (line configuration changes infrequently)
+  _workspacesCache: /* @__PURE__ */ new Map(),
+  _workspacesInFlight: /* @__PURE__ */ new Map(),
+  _workspacesCacheExpiryMs: 10 * 60 * 1e3,
+  // 10 minutes cache
+  async getWorkspaces(lineId, options) {
+    const enabledOnly = options?.enabledOnly ?? false;
+    const force = options?.force ?? false;
+    const cacheKey = `${lineId}::enabledOnly=${enabledOnly}`;
+    const now2 = Date.now();
+    const cached = this._workspacesCache.get(cacheKey);
+    if (!force && cached && now2 - cached.timestamp < this._workspacesCacheExpiryMs) {
+      return cached.workspaces;
+    }
+    const inFlight = this._workspacesInFlight.get(cacheKey);
+    if (!force && inFlight) {
+      return inFlight;
+    }
+    const fetchPromise = (async () => {
+      try {
+        const token = await getAuthToken2();
+        const apiUrl = getBackendUrl2();
+        const params = new URLSearchParams({ line_id: lineId });
+        if (enabledOnly) params.set("enabled_only", "true");
+        const response = await fetch(`${apiUrl}/api/workspaces?${params.toString()}`, {
+          headers: {
+            "Authorization": `Bearer ${token}`,
+            "Content-Type": "application/json"
+          }
+        });
+        if (!response.ok) {
+          const errorText = await response.text();
+          throw new Error(`Backend API error (${response.status}): ${errorText}`);
         }
-      });
-      if (!response.ok) {
-        const errorText = await response.text();
-        throw new Error(`Backend API error (${response.status}): ${errorText}`);
+        const data = await response.json();
+        const workspaces = data.workspaces || [];
+        this._workspacesCache.set(cacheKey, { workspaces, timestamp: Date.now() });
+        return workspaces;
+      } catch (error) {
+        console.error("Error fetching workspaces:", error);
+        throw error;
+      } finally {
+        this._workspacesInFlight.delete(cacheKey);
       }
-      const data = await response.json();
-      return data.workspaces || [];
-    } catch (error) {
-      console.error("Error fetching workspaces:", error);
-      throw error;
-    }
+    })();
+    this._workspacesInFlight.set(cacheKey, fetchPromise);
+    return fetchPromise;
+  },
+  async getEnabledWorkspaces(lineId, options) {
+    return this.getWorkspaces(lineId, { enabledOnly: true, force: options?.force });
   },
   /**
    * Fetches workspace display names from the database
@@ -1897,8 +2017,8 @@ var workspaceService = {
    */
   async getWorkspaceDisplayNames(companyId, lineId) {
     try {
-      const token = await getAuthToken();
-      const apiUrl = getBackendUrl();
+      const token = await getAuthToken2();
+      const apiUrl = getBackendUrl2();
       const params = new URLSearchParams();
       if (companyId) params.append("company_id", companyId);
       if (lineId) params.append("line_id", lineId);
@@ -1957,16 +2077,39 @@ var workspaceService = {
     this._workspaceDisplayNamesCache.clear();
     this._cacheTimestamp = 0;
   },
+  clearWorkspacesCache() {
+    this._workspacesCache.clear();
+    this._workspacesInFlight.clear();
+  },
+  invalidateWorkspacesCacheForLine(lineId) {
+    const prefix = `${lineId}::`;
+    Array.from(this._workspacesCache.keys()).forEach((key) => {
+      if (key.startsWith(prefix)) this._workspacesCache.delete(key);
+    });
+    Array.from(this._workspacesInFlight.keys()).forEach((key) => {
+      if (key.startsWith(prefix)) this._workspacesInFlight.delete(key);
+    });
+  },
+  _patchCachedWorkspacesForLine(lineId, workspaceRowId, patch) {
+    const prefix = `${lineId}::`;
+    Array.from(this._workspacesCache.entries()).forEach(([key, entry]) => {
+      if (!key.startsWith(prefix)) return;
+      const nextWorkspaces = (entry.workspaces || []).map(
+        (ws) => ws?.id === workspaceRowId ? { ...ws, ...patch } : ws
+      );
+      this._workspacesCache.set(key, { workspaces: nextWorkspaces, timestamp: Date.now() });
+    });
+  },
   /**
    * Updates the display name for a workspace
    * @param workspaceId - The workspace UUID
    * @param displayName - The new display name
-   * @returns Promise<void>
+   * @returns Updated workspace record from backend
    */
   async updateWorkspaceDisplayName(workspaceId, displayName) {
     try {
-      const token = await getAuthToken();
-      const apiUrl = getBackendUrl();
+      const token = await getAuthToken2();
+      const apiUrl = getBackendUrl2();
       const response = await fetch(`${apiUrl}/api/workspaces/${workspaceId}/display-name`, {
         method: "PATCH",
         headers: {
@@ -1979,7 +2122,15 @@ var workspaceService = {
         const errorText = await response.text();
         throw new Error(`Backend API error (${response.status}): ${errorText}`);
       }
+      const data = await response.json();
       this.clearWorkspaceDisplayNamesCache();
+      const updatedWorkspace = data?.workspace || null;
+      if (updatedWorkspace?.line_id && updatedWorkspace?.id) {
+        this._patchCachedWorkspacesForLine(updatedWorkspace.line_id, updatedWorkspace.id, {
+          display_name: updatedWorkspace.display_name
+        });
+      }
+      return updatedWorkspace;
     } catch (error) {
       console.error(`Error updating workspace display name for ${workspaceId}:`, error);
       throw error;
@@ -1987,8 +2138,8 @@ var workspaceService = {
   },
   async updateWorkspaceAction(updates) {
     try {
-      const token = await getAuthToken();
-      const apiUrl = getBackendUrl();
+      const token = await getAuthToken2();
+      const apiUrl = getBackendUrl2();
       const response = await fetch(`${apiUrl}/api/workspaces/actions/update`, {
         method: "POST",
         headers: {
@@ -2001,6 +2152,7 @@ var workspaceService = {
         const errorText = await response.text();
         throw new Error(`Backend API error (${response.status}): ${errorText}`);
       }
+      this.clearWorkspacesCache();
     } catch (error) {
       console.error("Error updating workspace actions:", error);
       throw error;
@@ -2008,8 +2160,8 @@ var workspaceService = {
   },
   async updateActionThresholds(thresholds) {
     try {
-      const token = await getAuthToken();
-      const apiUrl = getBackendUrl();
+      const token = await getAuthToken2();
+      const apiUrl = getBackendUrl2();
       const response = await fetch(`${apiUrl}/api/workspaces/action-thresholds/update`, {
         method: "POST",
         headers: {
@@ -2029,8 +2181,8 @@ var workspaceService = {
   },
   async getActionThresholds(lineId, date, shiftId = 0) {
     try {
-      const token = await getAuthToken();
-      const apiUrl = getBackendUrl();
+      const token = await getAuthToken2();
+      const apiUrl = getBackendUrl2();
       const response = await fetch(
         `${apiUrl}/api/workspaces/action-thresholds?line_id=${lineId}&date=${date}&shift_id=${shiftId}`,
         {
@@ -2085,8 +2237,8 @@ var workspaceService = {
     const totalPPH = outputWorkspaces.reduce((sum, ws) => sum + (ws.action_pph_threshold || 0), 0);
     const operationalDate = getOperationalDate(defaultTimezone || "UTC");
     try {
-      const token = await getAuthToken();
-      const apiUrl = getBackendUrl();
+      const token = await getAuthToken2();
+      const apiUrl = getBackendUrl2();
       const response = await fetch(
         `${apiUrl}/api/workspaces/line-thresholds?line_id=${lineId}`,
         {
@@ -2117,8 +2269,8 @@ var workspaceService = {
   // Returns ShiftConfiguration array, which is the logical representation.
   async getShiftConfigurations(lineId) {
     try {
-      const token = await getAuthToken();
-      const apiUrl = getBackendUrl();
+      const token = await getAuthToken2();
+      const apiUrl = getBackendUrl2();
       const response = await fetch(
         `${apiUrl}/api/workspaces/shift-configurations?line_id=${lineId}`,
         {
@@ -2148,8 +2300,8 @@ var workspaceService = {
   },
   async updateShiftConfigurations(shiftConfig) {
     try {
-      const token = await getAuthToken();
-      const apiUrl = getBackendUrl();
+      const token = await getAuthToken2();
+      const apiUrl = getBackendUrl2();
       const response = await fetch(
         `${apiUrl}/api/workspaces/shift-configurations`,
         {
@@ -2186,8 +2338,8 @@ var workspaceService = {
    */
   async fetchBulkTargets(params) {
     try {
-      const token = await getAuthToken();
-      const apiUrl = getBackendUrl();
+      const token = await getAuthToken2();
+      const apiUrl = getBackendUrl2();
       const {
         companyId,
         lineIds,
@@ -2373,7 +2525,17 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
       }
     }
     const dataWithUptime = processedData.map((workspace) => {
-      const uptimeDetails = uptimeMap.get(workspace.workspace_id);
+      const mapKey = this.getUptimeMapKey(workspace.line_id, workspace.workspace_id);
+      const uptimeDetails = uptimeMap.get(mapKey);
+      console.log(`[getWorkspaceHealthStatus] Lookup:`, {
+        mapKey,
+        workspaceLineId: workspace.line_id,
+        workspaceId: workspace.workspace_id,
+        workspaceName: workspace.workspace_display_name,
+        found: !!uptimeDetails,
+        uptime: uptimeDetails?.percentage,
+        downtime: uptimeDetails ? Math.max(0, uptimeDetails.expectedMinutes - uptimeDetails.actualMinutes) : null
+      });
       if (uptimeDetails) {
         return {
           ...workspace,
@@ -2734,6 +2896,13 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
   clearCache() {
     this.cache.clear();
   }
+  /**
+   * Generate a composite key for the uptime map that includes line_id
+   * This prevents data collision when multiple lines have workspaces with the same workspace_id
+   */
+  getUptimeMapKey(lineId, workspaceId) {
+    return lineId ? `${lineId}::${workspaceId}` : workspaceId;
+  }
   async calculateWorkspaceUptime(companyId, passedShiftConfig, timezone, lineShiftConfigs, overrideDate, overrideShiftId) {
     const supabase = _getSupabaseInstance();
     if (!supabase) throw new Error("Supabase client not initialized");
@@ -2763,7 +2932,7 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
     const queryShiftId = overrideShiftId ?? currentShiftId;
     const tableName = `performance_metrics_${companyId.replace(/-/g, "_")}`;
     try {
-      const { data: queryData, error } = await supabase.from(tableName).select("workspace_id, workspace_display_name, output_hourly, output_array").eq("date", queryDate).eq("shift_id", queryShiftId);
+      const { data: queryData, error } = await supabase.from(tableName).select("workspace_id, workspace_display_name, output_hourly, output_array, line_id").eq("date", queryDate).eq("shift_id", queryShiftId);
       if (error) {
         console.error("Error fetching performance metrics:", error);
         return /* @__PURE__ */ new Map();
@@ -2809,7 +2978,8 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
         }
         const completedWindow = uptimeMinutes + downtimeMinutes;
         const percentage = completedWindow > 0 ? Number((uptimeMinutes / completedWindow * 100).toFixed(1)) : 100;
-        uptimeMap.set(record.workspace_id, {
+        const mapKey = this.getUptimeMapKey(record.line_id, record.workspace_id);
+        uptimeMap.set(mapKey, {
           expectedMinutes: completedMinutes,
           actualMinutes: uptimeMinutes,
           percentage,
@@ -2851,6 +3021,17 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
       uniqueQueries.get(key).lineConfigs.push({ lineId, shiftStartDate, completedMinutes });
     });
     console.log(`[calculateWorkspaceUptimeMultiLine] Querying ${uniqueQueries.size} unique date/shift combinations for ${lineShiftConfigs.size} lines`);
+    uniqueQueries.forEach((queryConfig, key) => {
+      console.log(`[calculateWorkspaceUptimeMultiLine] Query batch ${key}:`, {
+        date: queryConfig.date,
+        shiftId: queryConfig.shiftId,
+        lineConfigs: queryConfig.lineConfigs.map((lc) => ({
+          lineId: lc.lineId,
+          completedMinutes: lc.completedMinutes,
+          shiftStartDate: lc.shiftStartDate.toISOString()
+        }))
+      });
+    });
     const queryPromises = Array.from(uniqueQueries.entries()).map(async ([key, { date, shiftId, lineConfigs }]) => {
       try {
         const { data, error } = await supabase.from(tableName).select("workspace_id, workspace_display_name, output_hourly, output_array, line_id").eq("date", date).eq("shift_id", shiftId);
@@ -2867,8 +3048,14 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
     const results = await Promise.all(queryPromises);
     for (const { records, lineConfigs } of results) {
       for (const record of records) {
-        const lineConfig = lineConfigs.find((lc) => {
-          return record.line_id && lineShiftConfigs.has(record.line_id);
+        const lineConfig = lineConfigs.find((lc) => lc.lineId === record.line_id);
+        console.log(`[calculateWorkspaceUptimeMultiLine] Record match:`, {
+          recordLineId: record.line_id,
+          recordWorkspaceId: record.workspace_id,
+          recordWorkspaceDisplayName: record.workspace_display_name,
+          availableLineIds: lineConfigs.map((lc) => lc.lineId),
+          matchFound: !!lineConfig,
+          matchedLineId: lineConfig?.lineId || "FALLBACK to " + lineConfigs[0]?.lineId
         });
         const effectiveLineConfig = lineConfig || lineConfigs[0];
         if (!effectiveLineConfig) continue;
@@ -2911,12 +3098,22 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
         }
         const completedWindow = uptimeMinutes + downtimeMinutes;
         const percentage = completedWindow > 0 ? Number((uptimeMinutes / completedWindow * 100).toFixed(1)) : 100;
-        uptimeMap.set(record.workspace_id, {
+        const mapKey = this.getUptimeMapKey(record.line_id, record.workspace_id);
+        uptimeMap.set(mapKey, {
           expectedMinutes: completedMinutes,
           actualMinutes: uptimeMinutes,
           percentage,
           lastCalculated: (/* @__PURE__ */ new Date()).toISOString()
         });
+        console.log(`[calculateWorkspaceUptimeMultiLine] Storing uptime:`, {
+          mapKey,
+          lineId: record.line_id,
+          workspaceId: record.workspace_id,
+          workspaceDisplayName: record.workspace_display_name,
+          expectedMinutes: completedMinutes,
+          actualMinutes: uptimeMinutes,
+          percentage
+        });
       }
     }
     console.log(`[calculateWorkspaceUptimeMultiLine] Calculated uptime for ${uptimeMap.size} workspaces`);
@@ -4564,7 +4761,7 @@ var getSupabaseClient = () => {
   }
   return supabaseJs.createClient(url, key);
 };
-var getAuthToken2 = async () => {
+var getAuthToken3 = async () => {
   try {
     const supabase = getSupabaseClient();
     const { data: { session } } = await supabase.auth.getSession();
@@ -4598,7 +4795,7 @@ var S3ClipsSupabaseService = class {
    * Fetch with authentication and error handling
    */
   async fetchWithAuth(endpoint, body) {
-    const token = await getAuthToken2();
+    const token = await getAuthToken3();
     if (!token) {
       throw new Error("Authentication required");
     }
@@ -6308,7 +6505,7 @@ var IDLE_TIME_REASON_COLORS = {
     bg: "bg-amber-50",
     border: "border-amber-200"
   },
-  "Machine Maintenance": {
+  "Machine Downtime": {
     hex: "#3b82f6",
     // blue-500 - Scheduled/Technical
     text: "text-blue-600",
@@ -6744,6 +6941,7 @@ var SupabaseProvider = ({ client, children }) => {
   _setSupabaseInstance(client);
   React24.useEffect(() => {
     _setSupabaseInstance(client);
+    initBackendClientAuthListener(client);
   }, [client]);
   const contextValue = React24.useMemo(() => ({ supabase: client }), [client]);
   return /* @__PURE__ */ jsxRuntime.jsx(SupabaseContext.Provider, { value: contextValue, children });
@@ -7658,33 +7856,10 @@ var useWorkspaceDetailedMetrics = (workspaceId, date, shiftId, options) => {
       console.log("[useWorkspaceDetailedMetrics] Using shift ID:", queryShiftId, "from input shift:", shiftId);
       console.log("[useWorkspaceDetailedMetrics] Using date:", queryDate, "from input date:", date);
       console.log(`[useWorkspaceDetailedMetrics] Fetching from backend API for workspace: ${workspaceId}, date: ${queryDate}, shift: ${queryShiftId}`);
-      const { data: { session } } = await supabase.auth.getSession();
-      if (!session?.access_token) {
-        throw new Error("No authentication token available");
-      }
-      const apiUrl = process.env.NEXT_PUBLIC_BACKEND_URL;
-      const response = await fetch(
-        `${apiUrl}/api/dashboard/workspace/${workspaceId}/metrics?date=${queryDate}&shift_id=${queryShiftId}&company_id=${companyId}`,
-        {
-          headers: {
-            "Authorization": `Bearer ${session.access_token}`,
-            "Content-Type": "application/json"
-          }
-        }
+      const backendData = await fetchBackendJson(
+        supabase,
+        `/api/dashboard/workspace/${workspaceId}/metrics?date=${queryDate}&shift_id=${queryShiftId}&company_id=${companyId}`
       );
-      if (!response.ok) {
-        const errorText = await response.text();
-        console.error("[useWorkspaceDetailedMetrics] Backend API error response:", errorText);
-        throw new Error(`Backend API error (${response.status}): ${errorText}`);
-      }
-      const responseText = await response.text();
-      let backendData;
-      try {
-        backendData = JSON.parse(responseText);
-      } catch (parseError) {
-        console.error("[useWorkspaceDetailedMetrics] Failed to parse response as JSON. Response text:", responseText.substring(0, 500));
-        throw new Error(`Invalid JSON response from backend. Received: ${responseText.substring(0, 100)}...`);
-      }
       const data = backendData.metrics;
       if (data && options?.shiftConfig) {
         const dynamicShiftName = getShiftNameById(
@@ -7698,20 +7873,10 @@ var useWorkspaceDetailedMetrics = (workspaceId, date, shiftId, options) => {
       }
       if (!data && !date && shiftId === void 0) {
         console.log("[useWorkspaceDetailedMetrics] No data found for current date/shift, attempting to find most recent data...");
-        const fallbackResponse = await fetch(
-          `${apiUrl}/api/dashboard/workspace/${workspaceId}/metrics?company_id=${companyId}&latest=true`,
-          {
-            headers: {
-              "Authorization": `Bearer ${session.access_token}`,
-              "Content-Type": "application/json"
-            }
-          }
+        const fallbackData = await fetchBackendJson(
+          supabase,
+          `/api/dashboard/workspace/${workspaceId}/metrics?company_id=${companyId}&latest=true`
         );
-        if (!fallbackResponse.ok) {
-          const errorText = await fallbackResponse.text();
-          throw new Error(`Backend API error (${fallbackResponse.status}): ${errorText}`);
-        }
-        const fallbackData = await fallbackResponse.json();
         const recentData = fallbackData.metrics;
         if (recentData) {
           console.log(`[useWorkspaceDetailedMetrics] Found fallback data from date: ${recentData.date}, shift: ${recentData.shift_id}`);
@@ -8273,15 +8438,171 @@ var useWorkspaceDetailedMetrics = (workspaceId, date, shiftId, options) => {
     // Force refresh without cache
   };
 };
+
+// src/lib/stores/shiftConfigStore.ts
+var shiftConfigsByLineId = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Set();
+var inFlightFetchesByLineId = /* @__PURE__ */ new Map();
+var subscriptionsByLineId = /* @__PURE__ */ new Map();
+var calculateBreakDuration = (startTime, endTime) => {
+  const [sh, sm] = startTime.split(":").map(Number);
+  const [eh, em] = endTime.split(":").map(Number);
+  let startMinutes = sh * 60 + sm;
+  let endMinutes = eh * 60 + em;
+  if (endMinutes < startMinutes) {
+    endMinutes += 24 * 60;
+  }
+  return endMinutes - startMinutes;
+};
+var stripSeconds = (timeStr) => {
+  if (!timeStr) return timeStr;
+  return timeStr.substring(0, 5);
+};
+var buildShiftConfigFromOperatingHoursRows = (rows, fallback) => {
+  const mapped = (rows || []).map((row) => ({
+    shiftId: row.shift_id,
+    shiftName: row.shift_name || `Shift ${row.shift_id}`,
+    startTime: stripSeconds(row.start_time),
+    endTime: stripSeconds(row.end_time),
+    breaks: (() => {
+      const raw = Array.isArray(row.breaks) ? row.breaks : Array.isArray(row.breaks?.breaks) ? row.breaks.breaks : [];
+      return raw.map((b) => ({
+        startTime: stripSeconds(b.start || b.startTime || "00:00"),
+        endTime: stripSeconds(b.end || b.endTime || "00:00"),
+        duration: calculateBreakDuration(
+          stripSeconds(b.start || b.startTime || "00:00"),
+          stripSeconds(b.end || b.endTime || "00:00")
+        ),
+        remarks: b.remarks || b.name || ""
+      }));
+    })(),
+    timezone: row.timezone || void 0
+  }));
+  const day = mapped.find((s) => s.shiftId === 0);
+  const night = mapped.find((s) => s.shiftId === 1);
+  return {
+    shifts: mapped,
+    timezone: mapped[0]?.timezone || fallback?.timezone,
+    dayShift: day ? { id: day.shiftId, startTime: day.startTime, endTime: day.endTime, name: day.shiftName } : fallback?.dayShift,
+    nightShift: night ? { id: night.shiftId, startTime: night.startTime, endTime: night.endTime, name: night.shiftName } : fallback?.nightShift,
+    transitionPeriodMinutes: fallback?.transitionPeriodMinutes || 0
+  };
+};
+var shiftConfigStore = {
+  get(lineId) {
+    return shiftConfigsByLineId.get(lineId);
+  },
+  set(lineId, config) {
+    shiftConfigsByLineId.set(lineId, config);
+    listeners.forEach((listener) => listener(lineId));
+  },
+  setFromOperatingHoursRows(lineId, rows, fallback) {
+    const config = buildShiftConfigFromOperatingHoursRows(rows, fallback);
+    this.set(lineId, config);
+    return config;
+  },
+  getMany(lineIds) {
+    const map = /* @__PURE__ */ new Map();
+    lineIds.forEach((lineId) => {
+      const config = shiftConfigsByLineId.get(lineId);
+      if (config) map.set(lineId, config);
+    });
+    return map;
+  },
+  subscribe(listener) {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  },
+  clear() {
+    shiftConfigsByLineId.clear();
+    listeners.forEach((listener) => listener("*"));
+  }
+};
+var fetchAndStoreShiftConfig = async (supabase, lineId, fallback) => {
+  const existing = inFlightFetchesByLineId.get(lineId);
+  if (existing) return existing;
+  const promise = (async () => {
+    try {
+      const { data, error } = await supabase.from("line_operating_hours").select("line_id, shift_id, shift_name, start_time, end_time, breaks, timezone").eq("line_id", lineId);
+      if (error) {
+        throw new Error(`Failed to fetch shift config: ${error.message}`);
+      }
+      if (!data || data.length === 0) {
+        if (fallback) {
+          shiftConfigStore.set(lineId, fallback);
+          return fallback;
+        }
+        return null;
+      }
+      return shiftConfigStore.setFromOperatingHoursRows(lineId, data, fallback);
+    } finally {
+      inFlightFetchesByLineId.delete(lineId);
+    }
+  })();
+  inFlightFetchesByLineId.set(lineId, promise);
+  return promise;
+};
+var ensureShiftConfigSubscription = (supabase, lineId, fallback) => {
+  const existing = subscriptionsByLineId.get(lineId);
+  if (existing && existing.supabase === supabase) {
+    existing.refCount += 1;
+    return () => {
+      const current = subscriptionsByLineId.get(lineId);
+      if (!current) return;
+      current.refCount -= 1;
+      if (current.refCount <= 0) {
+        current.channel.unsubscribe();
+        subscriptionsByLineId.delete(lineId);
+      }
+    };
+  }
+  if (existing) {
+    existing.channel.unsubscribe();
+    subscriptionsByLineId.delete(lineId);
+  }
+  const channel = supabase.channel(`shift_config_${lineId}`).on(
+    "postgres_changes",
+    {
+      event: "*",
+      schema: "public",
+      table: "line_operating_hours",
+      filter: `line_id=eq.${lineId}`
+    },
+    () => {
+      fetchAndStoreShiftConfig(supabase, lineId, fallback).catch((err) => {
+        console.error("[shiftConfigStore] Failed to refresh shift config", { lineId, err });
+      });
+    }
+  ).subscribe();
+  subscriptionsByLineId.set(lineId, { supabase, channel, refCount: 1 });
+  return () => {
+    const current = subscriptionsByLineId.get(lineId);
+    if (!current) return;
+    current.refCount -= 1;
+    if (current.refCount <= 0) {
+      current.channel.unsubscribe();
+      subscriptionsByLineId.delete(lineId);
+    }
+  };
+};
+
+// src/lib/hooks/useLineShiftConfig.ts
 var useLineShiftConfig = (lineId, fallbackConfig) => {
-  const [shiftConfig, setShiftConfig] = React24.useState(fallbackConfig || null);
-  const [isLoading, setIsLoading] = React24.useState(true);
+  const [shiftConfig, setShiftConfig] = React24.useState(() => {
+    if (!lineId || lineId === "factory" || lineId === "all") return fallbackConfig || null;
+    return shiftConfigStore.get(lineId) || fallbackConfig || null;
+  });
+  const [isLoading, setIsLoading] = React24.useState(() => {
+    if (!lineId || lineId === "factory" || lineId === "all") return false;
+    return !shiftConfigStore.get(lineId);
+  });
   const [error, setError] = React24.useState(null);
   const supabase = useSupabase();
   React24.useEffect(() => {
     if (!lineId || lineId === "factory" || lineId === "all") {
       setShiftConfig(fallbackConfig || null);
       setIsLoading(false);
+      setError(null);
       return;
     }
     const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
@@ -8289,98 +8610,49 @@ var useLineShiftConfig = (lineId, fallbackConfig) => {
       console.warn(`[useShiftConfig] Invalid line ID format: ${lineId}, using fallback`);
       setShiftConfig(fallbackConfig || null);
       setIsLoading(false);
+      setError(null);
       return;
     }
     let mounted = true;
-    const calculateBreakDuration2 = (startTime, endTime) => {
-      const [sh, sm] = startTime.split(":").map(Number);
-      const [eh, em] = endTime.split(":").map(Number);
-      let startMinutes = sh * 60 + sm;
-      let endMinutes = eh * 60 + em;
-      if (endMinutes < startMinutes) {
-        endMinutes += 24 * 60;
-      }
-      return endMinutes - startMinutes;
+    const syncFromStore = () => {
+      const stored = shiftConfigStore.get(lineId);
+      setShiftConfig(stored || fallbackConfig || null);
     };
-    const fetchShiftConfig = async () => {
+    syncFromStore();
+    const unsubscribeStore = shiftConfigStore.subscribe((changedLineId) => {
+      if (!mounted) return;
+      if (changedLineId === "*" || changedLineId === lineId) {
+        syncFromStore();
+      }
+    });
+    const unsubscribeRealtime = ensureShiftConfigSubscription(supabase, lineId, fallbackConfig);
+    const ensureLoaded = async () => {
       try {
-        setIsLoading(true);
-        setError(null);
-        console.log(`[useLineShiftConfig] \u{1F50D} Fetching shift config for line: ${lineId}`);
-        const { data: shiftsData, error: shiftsError } = await supabase.from("line_operating_hours").select("shift_id, shift_name, start_time, end_time, breaks, timezone").eq("line_id", lineId);
-        if (shiftsError) {
-          console.error(`[useLineShiftConfig] \u274C Error fetching shifts:`, shiftsError);
-          throw new Error(`Failed to fetch shift config: ${shiftsError.message}`);
-        }
-        if (!shiftsData || shiftsData.length === 0) {
-          console.warn(`[useLineShiftConfig] \u26A0\uFE0F No shift config found for line ${lineId}, using fallback`);
-          if (mounted) {
-            setShiftConfig(fallbackConfig || null);
-            setIsLoading(false);
-          }
+        const existing = shiftConfigStore.get(lineId);
+        if (existing) {
+          if (mounted) setIsLoading(false);
           return;
         }
-        const stripSeconds = (timeStr) => {
-          if (!timeStr) return timeStr;
-          return timeStr.substring(0, 5);
-        };
-        const mapped = shiftsData.map((shift) => ({
-          shiftId: shift.shift_id,
-          shiftName: shift.shift_name || `Shift ${shift.shift_id}`,
-          startTime: stripSeconds(shift.start_time),
-          endTime: stripSeconds(shift.end_time),
-          breaks: Array.isArray(shift.breaks) ? shift.breaks.map((b) => ({
-            startTime: b.start || b.startTime || "00:00",
-            endTime: b.end || b.endTime || "00:00",
-            duration: calculateBreakDuration2(
-              b.start || b.startTime || "00:00",
-              b.end || b.endTime || "00:00"
-            ),
-            remarks: b.remarks || b.name || ""
-          })) : [],
-          timezone: shift.timezone
-        }));
-        const day = mapped.find((s) => s.shiftId === 0);
-        const night = mapped.find((s) => s.shiftId === 1);
-        const config = {
-          shifts: mapped,
-          timezone: mapped[0]?.timezone,
-          dayShift: day ? { id: day.shiftId, startTime: day.startTime, endTime: day.endTime, name: day.shiftName } : fallbackConfig?.dayShift,
-          nightShift: night ? { id: night.shiftId, startTime: night.startTime, endTime: night.endTime, name: night.shiftName } : fallbackConfig?.nightShift,
-          transitionPeriodMinutes: fallbackConfig?.transitionPeriodMinutes || 0
-        };
-        console.log(`[useLineShiftConfig] \u2705 Built config from DB:`, config);
         if (mounted) {
-          setShiftConfig(config);
-          setIsLoading(false);
+          setIsLoading(true);
+          setError(null);
         }
+        await fetchAndStoreShiftConfig(supabase, lineId, fallbackConfig);
       } catch (err) {
         console.error("[useShiftConfig] Error fetching shift config:", err);
         if (mounted) {
           setError(err instanceof Error ? err.message : "Unknown error occurred");
-          setShiftConfig(fallbackConfig || null);
-          setIsLoading(false);
+          setShiftConfig(shiftConfigStore.get(lineId) || fallbackConfig || null);
         }
+      } finally {
+        if (mounted) setIsLoading(false);
       }
     };
-    fetchShiftConfig();
-    const subscription = supabase.channel(`shift_config_${lineId}`).on(
-      "postgres_changes",
-      {
-        event: "*",
-        // Listen to all events (INSERT, UPDATE, DELETE)
-        schema: "public",
-        table: "line_operating_hours",
-        filter: `line_id=eq.${lineId}`
-      },
-      (payload) => {
-        console.log("[useShiftConfig] Real-time update received:", payload);
-        fetchShiftConfig();
-      }
-    ).subscribe();
+    ensureLoaded();
     return () => {
       mounted = false;
-      subscription.unsubscribe();
+      unsubscribeStore();
+      unsubscribeRealtime();
     };
   }, [lineId, supabase]);
   return {
@@ -8471,8 +8743,8 @@ var useLineWorkspaceMetrics = (lineId, options) => {
         queryShiftId,
         metricsTable
       });
-      const workspaces2 = await workspaceService.getWorkspaces(lineId);
-      const enabledWorkspaceIds = workspaces2.filter((ws) => ws.enable === true).map((ws) => ws.id);
+      const enabledWorkspaces = await workspaceService.getEnabledWorkspaces(lineId);
+      const enabledWorkspaceIds = enabledWorkspaces.map((ws) => ws.id);
       if (enabledWorkspaceIds.length === 0) {
         setWorkspaces([]);
         setInitialized(true);
@@ -8570,14 +8842,6 @@ var useHistoricWorkspaceMetrics = (workspaceId, date, shiftId, options) => {
       isFetchingRef.current = true;
       setIsLoading(true);
       setError(null);
-      const { data: { session } } = await supabase.auth.getSession();
-      if (!session?.access_token) {
-        throw new Error("No authentication token available");
-      }
-      const apiUrl = process.env.NEXT_PUBLIC_BACKEND_URL;
-      if (!apiUrl) {
-        throw new Error("Backend URL is not configured. Please set NEXT_PUBLIC_BACKEND_URL in your environment.");
-      }
       const params = new URLSearchParams({
         company_id: entityConfig.companyId || "",
         date
@@ -8585,20 +8849,10 @@ var useHistoricWorkspaceMetrics = (workspaceId, date, shiftId, options) => {
       if (shiftId !== void 0) {
         params.append("shift_id", shiftId.toString());
       }
-      const response = await fetch(
-        `${apiUrl}/api/dashboard/workspace/${workspaceId}/metrics?${params.toString()}`,
-        {
-          headers: {
-            "Authorization": `Bearer ${session.access_token}`,
-            "Content-Type": "application/json"
-          }
-        }
+      const data = await fetchBackendJson(
+        supabase,
+        `/api/dashboard/workspace/${workspaceId}/metrics?${params.toString()}`
       );
-      if (!response.ok) {
-        const errorText = await response.text();
-        throw new Error(`Backend API error (${response.status}): ${errorText}`);
-      }
-      const data = await response.json();
       const fetchedMetrics = data.metrics;
       if (!fetchedMetrics) {
         setMetrics(null);
@@ -8818,14 +9072,6 @@ var useLeaderboardMetrics = (date, shiftId, limit = 10, filter2 = "all") => {
       const currentShift = getCurrentShift(defaultTimezone, shiftConfig);
       const queryDate = date || currentShift.date;
       const queryShiftId = shiftId !== void 0 ? shiftId : currentShift.shiftId;
-      const { data: { session } } = await supabase.auth.getSession();
-      if (!session?.access_token) {
-        throw new Error("No authentication token available");
-      }
-      const apiUrl = process.env.NEXT_PUBLIC_BACKEND_URL;
-      if (!apiUrl) {
-        throw new Error("Backend URL is not configured. Please set NEXT_PUBLIC_BACKEND_URL in your environment.");
-      }
       const params = new URLSearchParams({
         date: queryDate,
         shift_id: queryShiftId.toString(),
@@ -8833,20 +9079,10 @@ var useLeaderboardMetrics = (date, shiftId, limit = 10, filter2 = "all") => {
         limit: limit.toString(),
         filter: filter2
       });
-      const response = await fetch(
-        `${apiUrl}/api/dashboard/leaderboard?${params.toString()}`,
-        {
-          headers: {
-            "Authorization": `Bearer ${session.access_token}`,
-            "Content-Type": "application/json"
-          }
-        }
+      const data = await fetchBackendJson(
+        supabase,
+        `/api/dashboard/leaderboard?${params.toString()}`
       );
-      if (!response.ok) {
-        const errorText = await response.text();
-        throw new Error(`Backend API error (${response.status}): ${errorText}`);
-      }
-      const data = await response.json();
       setLeaderboard(data.leaderboard || []);
     } catch (err) {
       console.error("[useLeaderboardMetrics] Error fetching leaderboard:", err);
@@ -8872,11 +9108,12 @@ var useMultiLineShiftConfigs = (lineIds, fallbackConfig) => {
   const [isLoading, setIsLoading] = React24.useState(true);
   const [error, setError] = React24.useState(null);
   const supabase = useSupabase();
-  const lineIdsKey = React24.useMemo(() => lineIds.sort().join(","), [lineIds]);
+  const lineIdsKey = React24.useMemo(() => lineIds.slice().sort().join(","), [lineIds]);
   React24.useEffect(() => {
     if (!lineIds || lineIds.length === 0) {
       setShiftConfigMap(/* @__PURE__ */ new Map());
       setIsLoading(false);
+      setError(null);
       return;
     }
     const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
@@ -8885,56 +9122,56 @@ var useMultiLineShiftConfigs = (lineIds, fallbackConfig) => {
       console.warn("[useMultiLineShiftConfigs] No valid line IDs provided");
       setShiftConfigMap(/* @__PURE__ */ new Map());
       setIsLoading(false);
+      setError(null);
       return;
     }
     let mounted = true;
-    const calculateBreakDuration2 = (startTime, endTime) => {
-      const [sh, sm] = startTime.split(":").map(Number);
-      const [eh, em] = endTime.split(":").map(Number);
-      let startMinutes = sh * 60 + sm;
-      let endMinutes = eh * 60 + em;
-      if (endMinutes < startMinutes) {
-        endMinutes += 24 * 60;
-      }
-      return endMinutes - startMinutes;
-    };
-    const stripSeconds = (timeStr) => {
-      if (!timeStr) return timeStr;
-      return timeStr.substring(0, 5);
-    };
-    const buildShiftConfigFromRows = (shifts, fallback) => {
-      const mapped = shifts.map((shift) => ({
-        shiftId: shift.shift_id,
-        shiftName: shift.shift_name || `Shift ${shift.shift_id}`,
-        startTime: stripSeconds(shift.start_time),
-        endTime: stripSeconds(shift.end_time),
-        breaks: Array.isArray(shift.breaks) ? shift.breaks.map((b) => ({
-          startTime: b.start || b.startTime || "00:00",
-          endTime: b.end || b.endTime || "00:00",
-          duration: calculateBreakDuration2(
-            b.start || b.startTime || "00:00",
-            b.end || b.endTime || "00:00"
-          ),
-          remarks: b.remarks || b.name || ""
-        })) : [],
-        timezone: shift.timezone
-      }));
-      const day = mapped.find((s) => s.shiftId === 0);
-      const night = mapped.find((s) => s.shiftId === 1);
-      return {
-        shifts: mapped,
-        timezone: mapped[0]?.timezone,
-        dayShift: day ? { id: day.shiftId, startTime: day.startTime, endTime: day.endTime, name: day.shiftName } : fallback?.dayShift,
-        nightShift: night ? { id: night.shiftId, startTime: night.startTime, endTime: night.endTime, name: night.shiftName } : fallback?.nightShift,
-        transitionPeriodMinutes: fallback?.transitionPeriodMinutes || 0
-      };
+    const syncFromStore = (changedLineId) => {
+      setShiftConfigMap((prev) => {
+        const next = new Map(prev);
+        const updateLine = (lineId) => {
+          const config = shiftConfigStore.get(lineId) || fallbackConfig;
+          if (config) next.set(lineId, config);
+        };
+        if (!changedLineId || changedLineId === "*") {
+          validLineIds.forEach(updateLine);
+        } else if (validLineIds.includes(changedLineId)) {
+          updateLine(changedLineId);
+        }
+        return next;
+      });
     };
+    const initialMap = /* @__PURE__ */ new Map();
+    validLineIds.forEach((lineId) => {
+      const config = shiftConfigStore.get(lineId) || fallbackConfig;
+      if (config) initialMap.set(lineId, config);
+    });
+    setShiftConfigMap(initialMap);
+    const unsubscribeStore = shiftConfigStore.subscribe((changedLineId) => {
+      if (!mounted) return;
+      if (changedLineId === "*" || validLineIds.includes(changedLineId)) {
+        syncFromStore(changedLineId);
+      }
+    });
+    const unsubscribeRealtimeList = validLineIds.map(
+      (lineId) => ensureShiftConfigSubscription(supabase, lineId, fallbackConfig)
+    );
     const fetchAllConfigs = async () => {
       try {
-        setIsLoading(true);
-        setError(null);
-        console.log(`[useMultiLineShiftConfigs] Fetching shift configs for ${validLineIds.length} lines`);
-        const { data, error: fetchError } = await supabase.from("line_operating_hours").select("line_id, shift_id, shift_name, start_time, end_time, breaks, timezone").in("line_id", validLineIds);
+        const missingLineIds = validLineIds.filter((lineId) => !shiftConfigStore.get(lineId));
+        if (missingLineIds.length === 0) {
+          if (mounted) {
+            setIsLoading(false);
+            setError(null);
+          }
+          return;
+        }
+        if (mounted) {
+          setIsLoading(true);
+          setError(null);
+        }
+        console.log(`[useMultiLineShiftConfigs] Fetching shift configs for ${missingLineIds.length} lines`);
+        const { data, error: fetchError } = await supabase.from("line_operating_hours").select("line_id, shift_id, shift_name, start_time, end_time, breaks, timezone").in("line_id", missingLineIds);
         if (fetchError) {
           console.error("[useMultiLineShiftConfigs] Error fetching shift configs:", fetchError);
           throw new Error(`Failed to fetch shift configs: ${fetchError.message}`);
@@ -8946,33 +9183,23 @@ var useMultiLineShiftConfigs = (lineIds, fallbackConfig) => {
           }
           lineShiftsMap.get(row.line_id).push(row);
         });
-        const configMap = /* @__PURE__ */ new Map();
         lineShiftsMap.forEach((shifts, lineId) => {
-          const config = buildShiftConfigFromRows(shifts, fallbackConfig);
-          configMap.set(lineId, config);
+          shiftConfigStore.setFromOperatingHoursRows(lineId, shifts, fallbackConfig);
         });
-        validLineIds.forEach((lineId) => {
-          if (!configMap.has(lineId) && fallbackConfig) {
+        missingLineIds.forEach((lineId) => {
+          if (!lineShiftsMap.has(lineId) && fallbackConfig) {
             console.warn(`[useMultiLineShiftConfigs] No config found for line ${lineId}, using fallback`);
-            configMap.set(lineId, fallbackConfig);
+            shiftConfigStore.set(lineId, fallbackConfig);
           }
         });
-        console.log(`[useMultiLineShiftConfigs] Built configs for ${configMap.size} lines`);
+        console.log(`[useMultiLineShiftConfigs] Stored configs for ${lineShiftsMap.size} lines`);
         if (mounted) {
-          setShiftConfigMap(configMap);
           setIsLoading(false);
         }
       } catch (err) {
         console.error("[useMultiLineShiftConfigs] Error:", err);
         if (mounted) {
           setError(err instanceof Error ? err.message : "Failed to fetch shift configs");
-          if (fallbackConfig) {
-            const fallbackMap = /* @__PURE__ */ new Map();
-            validLineIds.forEach((lineId) => {
-              fallbackMap.set(lineId, fallbackConfig);
-            });
-            setShiftConfigMap(fallbackMap);
-          }
           setIsLoading(false);
         }
       }
@@ -8980,6 +9207,8 @@ var useMultiLineShiftConfigs = (lineIds, fallbackConfig) => {
     fetchAllConfigs();
     return () => {
       mounted = false;
+      unsubscribeStore();
+      unsubscribeRealtimeList.forEach((unsub) => unsub());
     };
   }, [lineIdsKey, supabase]);
   return {
@@ -9322,8 +9551,10 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
       const operationalDateForSubscription = currentShiftDetails.date;
       const targetLineIds = [currentLineIdToUse];
       if (targetLineIds.length === 0) return;
-      const wsMetricsFilter = `line_id=in.(${targetLineIds.map((id3) => `"${id3}"`).join(",")})`;
-      const lineMetricsFilter = `line_id=in.(${targetLineIds.map((id3) => `"${id3}"`).join(",")})`;
+      const baseFilterParts = `date=eq.${operationalDateForSubscription},shift_id=eq.${currentShiftDetails.shiftId}`;
+      const lineIdFilterPart = `line_id=in.(${targetLineIds.map((id3) => `"${id3}"`).join(",")})`;
+      const wsMetricsFilter = `${baseFilterParts},${lineIdFilterPart}`;
+      const lineMetricsFilter = `${baseFilterParts},${lineIdFilterPart}`;
       const createSubscription = (table, filter2, channelNameBase, callback) => {
         const channelName = `${channelNameBase}-${Date.now()}`.replace(/[^a-zA-Z0-9_-]/g, "");
         const channel = supabase.channel(channelName).on(
@@ -9800,12 +10031,12 @@ var useRealtimeLineMetrics = ({
         const companyId = entityConfig.companyId;
         const metricsTablePrefix = getMetricsTablePrefix(companyId || "");
         const metricsTable = `${metricsTablePrefix}_${(companyId || "").replace(/-/g, "_")}`;
-        let enabledWorkspaceIds = [];
-        for (const lineId2 of targetLineIds) {
-          const workspaces = await workspaceService.getWorkspaces(lineId2);
-          const enabledIds = workspaces.filter((ws) => ws.enable === true).map((ws) => ws.id);
-          enabledWorkspaceIds.push(...enabledIds);
-        }
+        const enabledWorkspaceLists = await Promise.all(
+          targetLineIds.map((lineId2) => workspaceService.getEnabledWorkspaces(lineId2))
+        );
+        const enabledWorkspaceIds = Array.from(
+          new Set(enabledWorkspaceLists.flatMap((workspaces) => workspaces.map((ws) => ws.id)))
+        );
         const { data: workspaceData, error: workspaceError } = enabledWorkspaceIds.length > 0 ? await supabase.from(metricsTable).select(`
                 line_id,
                 workspace_id,
@@ -9865,8 +10096,8 @@ var useRealtimeLineMetrics = ({
         const companyId = entityConfig.companyId;
         const metricsTablePrefix = getMetricsTablePrefix(companyId || "");
         const metricsTable = `${metricsTablePrefix}_${(companyId || "").replace(/-/g, "_")}`;
-        const workspaces = await workspaceService.getWorkspaces(lineIdRef.current);
-        const enabledWorkspaceIds = workspaces.filter((ws) => ws.enable === true).map((ws) => ws.id);
+        const enabledWorkspaces = await workspaceService.getEnabledWorkspaces(lineIdRef.current);
+        const enabledWorkspaceIds = enabledWorkspaces.map((ws) => ws.id);
         const { data: workspaceData, error: workspaceError } = enabledWorkspaceIds.length > 0 ? await supabase.from(metricsTable).select(`
                 workspace_id,
                 workspace_name,
@@ -9986,20 +10217,23 @@ var useRealtimeLineMetrics = ({
     const companyId = entityConfig.companyId;
     const metricsTablePrefix = getMetricsTablePrefix();
     const metricsTable = `${metricsTablePrefix}_${(companyId || "").replace(/-/g, "_")}`;
+    const currentDate = urlDate || getOperationalDate(timezone || dateTimeConfig.defaultTimezone || "UTC");
+    const baseFilterParts = `date=eq.${currentDate},shift_id=eq.${shiftId}`;
+    const lineIdFilterPart = `line_id=in.(${targetLineIds.map((id3) => `"${id3}"`).join(",")})`;
+    const filter2 = `${baseFilterParts},${lineIdFilterPart}`;
     const lineMetricsChannel = supabase.channel(`line-metrics-${timestamp}`).on(
       "postgres_changes",
       {
         event: "*",
         schema: "public",
         table: "line_metrics",
-        filter: `line_id=in.(${targetLineIds.map((id3) => `"${id3}"`).join(",")})`
+        filter: filter2
       },
       async (payload) => {
         const payloadData = payload.new;
         if (process.env.NODE_ENV === "development") {
           console.log("Line metrics update received:", payloadData);
         }
-        const currentDate = urlDate || getOperationalDate(timezone || dateTimeConfig.defaultTimezone || "UTC");
         if (payloadData?.date === currentDate && payloadData?.shift_id === shiftId) {
           queueUpdate();
         }
@@ -10015,14 +10249,13 @@ var useRealtimeLineMetrics = ({
         event: "*",
         schema: "public",
         table: metricsTable,
-        filter: `line_id=in.(${targetLineIds.map((id3) => `"${id3}"`).join(",")})`
+        filter: filter2
       },
       async (payload) => {
         const payloadData = payload.new;
         if (process.env.NODE_ENV === "development") {
           console.log(`${metricsTablePrefix} update received:`, payloadData);
         }
-        const currentDate = urlDate || getOperationalDate(timezone || dateTimeConfig.defaultTimezone || "UTC");
         if (payloadData?.date === currentDate && payloadData?.shift_id === shiftId) {
           queueUpdate();
         }
@@ -10033,7 +10266,7 @@ var useRealtimeLineMetrics = ({
       }
     });
     channelsRef.current = [lineMetricsChannel, metricsChannel];
-  }, [supabase, queueUpdate, urlDate, shiftId, entityConfig, dateTimeConfig.defaultTimezone]);
+  }, [supabase, queueUpdate, urlDate, shiftId, entityConfig, timezone, dateTimeConfig.defaultTimezone]);
   const prevShiftIdRef = React24.useRef(void 0);
   React24.useEffect(() => {
     if (!lineId) return;
@@ -10812,34 +11045,16 @@ var useFactoryOverviewMetrics = (date, shiftId) => {
       if (lineIds.length === 0) {
         throw new Error("No lines configured in entityConfig");
       }
-      const { data: { session } } = await supabase.auth.getSession();
-      if (!session?.access_token) {
-        throw new Error("No authentication token available");
-      }
-      const apiUrl = process.env.NEXT_PUBLIC_BACKEND_URL;
-      if (!apiUrl) {
-        throw new Error("Backend URL is not configured. Please set NEXT_PUBLIC_BACKEND_URL in your environment.");
-      }
       const params = new URLSearchParams({
         line_ids: lineIds.join(","),
         date: queryDate,
         shift_id: queryShiftId.toString(),
         company_id: entityConfig.companyId || ""
       });
-      const response = await fetch(
-        `${apiUrl}/api/dashboard/factory-overview?${params.toString()}`,
-        {
-          headers: {
-            "Authorization": `Bearer ${session.access_token}`,
-            "Content-Type": "application/json"
-          }
-        }
+      const data = await fetchBackendJson(
+        supabase,
+        `/api/dashboard/factory-overview?${params.toString()}`
       );
-      if (!response.ok) {
-        const errorText = await response.text();
-        throw new Error(`Backend API error (${response.status}): ${errorText}`);
-      }
-      const data = await response.json();
       setMetrics(data);
     } catch (err) {
       console.error("[useFactoryOverviewMetrics] Error fetching factory overview:", err);
@@ -10868,6 +11083,46 @@ var isInitialized = false;
 var isInitializing = false;
 var initializedWithLineIds = [];
 var initializationPromise = null;
+var workspaceDisplayNamesListeners = /* @__PURE__ */ new Set();
+var notifyWorkspaceDisplayNamesListeners = (changedLineId) => {
+  workspaceDisplayNamesListeners.forEach((listener) => {
+    try {
+      listener(changedLineId);
+    } catch (err) {
+      console.error("[workspaceDisplayNames] Listener error", err);
+    }
+  });
+};
+var subscribeWorkspaceDisplayNames = (listener) => {
+  workspaceDisplayNamesListeners.add(listener);
+  return () => workspaceDisplayNamesListeners.delete(listener);
+};
+var getAllWorkspaceDisplayNamesSnapshot = (lineId) => {
+  if (lineId && runtimeWorkspaceDisplayNames[lineId]) {
+    return { ...runtimeWorkspaceDisplayNames[lineId] };
+  }
+  if (lineId) return {};
+  const allNames = {};
+  Object.entries(runtimeWorkspaceDisplayNames).forEach(([cachedLineId, lineNames]) => {
+    Object.entries(lineNames).forEach(([workspaceId, displayName]) => {
+      allNames[`${cachedLineId}_${workspaceId}`] = displayName;
+    });
+  });
+  return allNames;
+};
+var upsertWorkspaceDisplayNameInCache = (params) => {
+  const { lineId, workspaceId, displayName, enabled } = params;
+  if (!lineId || !workspaceId) return;
+  if (!runtimeWorkspaceDisplayNames[lineId]) {
+    runtimeWorkspaceDisplayNames[lineId] = {};
+  }
+  if (enabled === false || !displayName) {
+    delete runtimeWorkspaceDisplayNames[lineId][workspaceId];
+  } else {
+    runtimeWorkspaceDisplayNames[lineId][workspaceId] = displayName;
+  }
+  notifyWorkspaceDisplayNamesListeners(lineId);
+};
 function getCurrentLineIds() {
   try {
     const config = _getDashboardConfigInstance();
@@ -10907,15 +11162,20 @@ async function initializeWorkspaceDisplayNames(explicitLineId) {
       console.log("\u{1F504} Target line IDs for workspace filtering:", targetLineIds);
       runtimeWorkspaceDisplayNames = {};
       if (targetLineIds.length > 0) {
-        for (const lineId of targetLineIds) {
-          console.log(`\u{1F504} Fetching workspaces for line: ${lineId}`);
-          const lineDisplayNamesMap = await workspaceService.getWorkspaceDisplayNames(void 0, lineId);
+        const results = await Promise.all(
+          targetLineIds.map(async (lineId) => {
+            console.log(`\u{1F504} Fetching workspaces for line: ${lineId}`);
+            const lineDisplayNamesMap = await workspaceService.getWorkspaceDisplayNames(void 0, lineId);
+            return { lineId, lineDisplayNamesMap };
+          })
+        );
+        results.forEach(({ lineId, lineDisplayNamesMap }) => {
           runtimeWorkspaceDisplayNames[lineId] = {};
           lineDisplayNamesMap.forEach((displayName, workspaceId) => {
             runtimeWorkspaceDisplayNames[lineId][workspaceId] = displayName;
           });
           console.log(`\u2705 Stored ${lineDisplayNamesMap.size} workspaces for line ${lineId}`);
-        }
+        });
       } else {
         console.warn("\u26A0\uFE0F No line IDs found, fetching all workspaces (less efficient)");
         const allWorkspacesMap = await workspaceService.getWorkspaceDisplayNames();
@@ -10928,6 +11188,7 @@ async function initializeWorkspaceDisplayNames(explicitLineId) {
       initializedWithLineIds = targetLineIds;
       console.log("\u2705 Workspace display names initialized from Supabase:", runtimeWorkspaceDisplayNames);
       console.log("\u2705 Initialized with line IDs:", initializedWithLineIds);
+      notifyWorkspaceDisplayNamesListeners(explicitLineId);
     } catch (error) {
       console.error("\u274C Failed to initialize workspace display names from Supabase:", error);
     } finally {
@@ -10950,6 +11211,7 @@ var preInitializeWorkspaceDisplayNames = async (lineId) => {
           runtimeWorkspaceDisplayNames[lineId][workspaceId] = displayName;
         });
         console.log(`\u2705 Added ${lineDisplayNamesMap.size} workspaces for line ${lineId}`);
+        notifyWorkspaceDisplayNamesListeners(lineId);
       } catch (error) {
         console.error(`\u274C Failed to fetch workspaces for line ${lineId}:`, error);
       }
@@ -10968,6 +11230,7 @@ var preInitializeWorkspaceDisplayNames = async (lineId) => {
           runtimeWorkspaceDisplayNames[lineId][workspaceId] = displayName;
         });
         console.log(`\u2705 Added ${lineDisplayNamesMap.size} workspaces for line ${lineId}`);
+        notifyWorkspaceDisplayNamesListeners(lineId);
       } catch (error) {
         console.error(`\u274C Failed to fetch workspaces for line ${lineId}:`, error);
       }
@@ -11007,6 +11270,7 @@ var getWorkspaceDisplayName = (workspaceId, lineId) => {
         runtimeWorkspaceDisplayNames[lineId][workspaceId2] = displayName2;
       });
       console.log(`\u2705 Added ${lineDisplayNamesMap.size} workspaces for line ${lineId} to cache`);
+      notifyWorkspaceDisplayNamesListeners(lineId);
     }).catch((error) => {
       console.error(`\u274C Failed to fetch workspaces for line ${lineId}:`, error);
     });
@@ -11047,6 +11311,7 @@ var getShortWorkspaceDisplayName = (workspaceId, lineId) => {
         runtimeWorkspaceDisplayNames[lineId][workspaceId2] = displayName2;
       });
       console.log(`\u2705 Added ${lineDisplayNamesMap.size} workspaces for line ${lineId} to cache`);
+      notifyWorkspaceDisplayNamesListeners(lineId);
     }).catch((error) => {
       console.error(`\u274C Failed to fetch workspaces for line ${lineId}:`, error);
     });
@@ -11088,6 +11353,9 @@ var getAllWorkspaceDisplayNamesAsync = async (companyId, lineId) => {
   while (isInitializing) {
     await new Promise((resolve) => setTimeout(resolve, 100));
   }
+  if (lineId && isInitialized && !runtimeWorkspaceDisplayNames[lineId]) {
+    await preInitializeWorkspaceDisplayNames(lineId);
+  }
   if (lineId && runtimeWorkspaceDisplayNames[lineId]) {
     return { ...runtimeWorkspaceDisplayNames[lineId] };
   }
@@ -11120,6 +11388,7 @@ var refreshWorkspaceDisplayNames = async (companyId) => {
   runtimeWorkspaceDisplayNames = {};
   isInitialized = false;
   await initializeWorkspaceDisplayNames();
+  notifyWorkspaceDisplayNamesListeners();
 };
 var clearWorkspaceDisplayNamesCache = () => {
   workspaceService.clearWorkspaceDisplayNamesCache();
@@ -11128,6 +11397,7 @@ var clearWorkspaceDisplayNamesCache = () => {
   isInitializing = false;
   initializedWithLineIds = [];
   initializationPromise = null;
+  notifyWorkspaceDisplayNamesListeners();
 };
 
 // src/lib/hooks/useWorkspaceDisplayNames.ts
@@ -11150,6 +11420,23 @@ var useWorkspaceDisplayNames = (lineId, companyId) => {
   React24.useEffect(() => {
     fetchDisplayNames();
   }, [fetchDisplayNames]);
+  React24.useEffect(() => {
+    const snapshot = getAllWorkspaceDisplayNamesSnapshot(lineId);
+    if (Object.keys(snapshot).length > 0) {
+      setDisplayNames(snapshot);
+      setLoading(false);
+    }
+    const unsubscribe = subscribeWorkspaceDisplayNames((changedLineId) => {
+      if (!lineId) {
+        setDisplayNames(getAllWorkspaceDisplayNamesSnapshot());
+        return;
+      }
+      if (!changedLineId || changedLineId === "*" || changedLineId === lineId) {
+        setDisplayNames(getAllWorkspaceDisplayNamesSnapshot(lineId));
+      }
+    });
+    return unsubscribe;
+  }, [lineId]);
   return {
     displayNames,
     loading,
@@ -11158,7 +11445,7 @@ var useWorkspaceDisplayNames = (lineId, companyId) => {
   };
 };
 var useWorkspaceDisplayName = (workspaceId, lineId, companyId) => {
-  const [displayName, setDisplayName] = React24.useState(workspaceId);
+  const [displayName, setDisplayName] = React24.useState(() => getWorkspaceDisplayName(workspaceId, lineId));
   const [loading, setLoading] = React24.useState(true);
   const [error, setError] = React24.useState(null);
   const fetchDisplayName = React24.useCallback(async () => {
@@ -11177,6 +11464,18 @@ var useWorkspaceDisplayName = (workspaceId, lineId, companyId) => {
   React24.useEffect(() => {
     fetchDisplayName();
   }, [fetchDisplayName]);
+  React24.useEffect(() => {
+    const unsubscribe = subscribeWorkspaceDisplayNames((changedLineId) => {
+      if (!lineId) {
+        setDisplayName(getWorkspaceDisplayName(workspaceId));
+        return;
+      }
+      if (!changedLineId || changedLineId === "*" || changedLineId === lineId) {
+        setDisplayName(getWorkspaceDisplayName(workspaceId, lineId));
+      }
+    });
+    return unsubscribe;
+  }, [workspaceId, lineId]);
   return {
     displayName,
     loading,
@@ -11207,6 +11506,18 @@ var useWorkspaceDisplayNamesMap = (workspaceIds, lineId, companyId) => {
   React24.useEffect(() => {
     fetchDisplayNames();
   }, [fetchDisplayNames]);
+  React24.useEffect(() => {
+    const unsubscribe = subscribeWorkspaceDisplayNames((changedLineId) => {
+      if (lineId && changedLineId && changedLineId !== "*" && changedLineId !== lineId) return;
+      const snapshot = getAllWorkspaceDisplayNamesSnapshot(lineId);
+      const next = {};
+      workspaceIds.forEach((id3) => {
+        if (snapshot[id3]) next[id3] = snapshot[id3];
+      });
+      setDisplayNames(next);
+    });
+    return unsubscribe;
+  }, [workspaceIds, lineId]);
   return {
     displayNames,
     loading,
@@ -11453,13 +11764,19 @@ var useAllWorkspaceMetrics = (options) => {
     setError(null);
     try {
       const lineWorkspaceMap = /* @__PURE__ */ new Map();
-      let allEnabledWorkspaceIds = [];
-      for (const lineId of configuredLineIds) {
-        const lineWorkspaces = await workspaceService.getWorkspaces(lineId);
-        const enabledIds = lineWorkspaces.filter((ws) => ws.enable === true).map((ws) => ws.id);
+      const allEnabledWorkspaceIdSet = /* @__PURE__ */ new Set();
+      const perLineEnabledIds = await Promise.all(
+        configuredLineIds.map(async (lineId) => {
+          const enabledWorkspaces = await workspaceService.getEnabledWorkspaces(lineId);
+          const enabledIds = enabledWorkspaces.map((ws) => ws.id);
+          return { lineId, enabledIds };
+        })
+      );
+      perLineEnabledIds.forEach(({ lineId, enabledIds }) => {
         lineWorkspaceMap.set(lineId, enabledIds);
-        allEnabledWorkspaceIds.push(...enabledIds);
-      }
+        enabledIds.forEach((id3) => allEnabledWorkspaceIdSet.add(id3));
+      });
+      const allEnabledWorkspaceIds = Array.from(allEnabledWorkspaceIdSet);
       if (allEnabledWorkspaceIds.length === 0) {
         setWorkspaces([]);
         setInitialized(true);
@@ -11580,43 +11897,61 @@ var useAllWorkspaceMetrics = (options) => {
       });
     }
     const setupSubscription = () => {
-      const channel2 = supabase.channel(`all-workspace-metrics-${Date.now()}`).on(
-        "postgres_changes",
+      if (!metricsTable || configuredLineIds.length === 0) return [];
+      const groupsToSubscribe = hasSpecificDateShift || shiftGroups.length === 0 ? [
         {
-          event: "*",
-          schema,
-          table: metricsTable
-        },
-        async (payload) => {
-          const data = payload.new || payload.old;
-          const dataKey = `${data?.date}-${data?.shift_id}`;
-          if (!validDateShiftCombos.has(dataKey)) {
-            return;
-          }
-          if (fetchTimeoutRef.current) {
-            clearTimeout(fetchTimeoutRef.current);
-          }
-          fetchTimeoutRef.current = setTimeout(async () => {
-            if (!isFetchingRef.current) {
-              await fetchWorkspaceMetrics();
-            }
-            fetchTimeoutRef.current = null;
-          }, 300);
+          date: fallbackQueryDate,
+          shiftId: fallbackQueryShiftId,
+          lineIds: configuredLineIds
         }
-      ).subscribe();
-      return channel2;
+      ] : shiftGroups.map((group) => ({
+        date: group.date,
+        shiftId: group.shiftId,
+        lineIds: group.lineIds
+      }));
+      return groupsToSubscribe.map((group, index) => {
+        const lineIdFilterPart = `line_id=in.(${group.lineIds.map((id3) => `"${id3}"`).join(",")})`;
+        const filter2 = `date=eq.${group.date},shift_id=eq.${group.shiftId},${lineIdFilterPart}`;
+        const channelName = `all-workspace-metrics-g${index}-${group.date}-${group.shiftId}-${Date.now()}`.replace(
+          /[^a-zA-Z0-9_-]/g,
+          ""
+        );
+        return supabase.channel(channelName).on(
+          "postgres_changes",
+          {
+            event: "*",
+            schema,
+            table: metricsTable,
+            filter: filter2
+          },
+          async (payload) => {
+            const data = payload.new || payload.old;
+            const dataKey = `${data?.date}-${data?.shift_id}`;
+            if (!validDateShiftCombos.has(dataKey)) {
+              return;
+            }
+            if (fetchTimeoutRef.current) {
+              clearTimeout(fetchTimeoutRef.current);
+            }
+            fetchTimeoutRef.current = setTimeout(async () => {
+              if (!isFetchingRef.current) {
+                await fetchWorkspaceMetrics();
+              }
+              fetchTimeoutRef.current = null;
+            }, 300);
+          }
+        ).subscribe();
+      });
     };
-    const channel = setupSubscription();
+    const channels = setupSubscription();
     return () => {
       if (fetchTimeoutRef.current) {
         clearTimeout(fetchTimeoutRef.current);
         fetchTimeoutRef.current = null;
       }
-      if (channel) {
-        supabase.removeChannel(channel);
-      }
+      channels.forEach((channel) => supabase.removeChannel(channel));
     };
-  }, [fallbackQueryDate, fallbackQueryShiftId, hasSpecificDateShift, shiftGroups, metricsTable, fetchWorkspaceMetrics, initialized, supabase, schema, entityConfig.companyId]);
+  }, [fallbackQueryDate, fallbackQueryShiftId, hasSpecificDateShift, shiftGroups, metricsTable, fetchWorkspaceMetrics, initialized, supabase, schema, entityConfig.companyId, configuredLineIds]);
   React24.useEffect(() => {
     setInitialized(false);
   }, [fallbackQueryDate, fallbackQueryShiftId, shiftGroups]);
@@ -13054,6 +13389,85 @@ function useLineSupervisor(lineId) {
     error
   };
 }
+var useSupervisorsByLineIds = (lineIds, options) => {
+  const supabase = useSupabase();
+  const enabled = options?.enabled ?? true;
+  const lineIdsKey = React24.useMemo(() => (lineIds || []).slice().sort().join(","), [lineIds]);
+  const targetLineIdSet = React24.useMemo(() => new Set(lineIds || []), [lineIdsKey]);
+  const [supervisorsByLineId, setSupervisorsByLineId] = React24.useState(/* @__PURE__ */ new Map());
+  const [supervisorNamesByLineId, setSupervisorNamesByLineId] = React24.useState(/* @__PURE__ */ new Map());
+  const [isLoading, setIsLoading] = React24.useState(true);
+  const [error, setError] = React24.useState(null);
+  const fetchSupervisors = React24.useCallback(async () => {
+    if (!enabled || !supabase) {
+      setIsLoading(false);
+      return;
+    }
+    try {
+      setIsLoading(true);
+      setError(null);
+      const { data, error: fetchError } = await supabase.from("user_roles").select("user_id, email, properties").eq("role_level", "supervisor");
+      if (fetchError) {
+        throw fetchError;
+      }
+      const nextSupervisorsByLineId = /* @__PURE__ */ new Map();
+      (data || []).forEach((row) => {
+        const assignedLineIds = row?.properties?.line_id || row?.properties?.line_ids || [];
+        if (!Array.isArray(assignedLineIds) || assignedLineIds.length === 0) return;
+        const email = row.email || "";
+        const displayName = (typeof email === "string" && email.includes("@") ? email.split("@")[0] : email) || email;
+        const supervisor = {
+          userId: row.user_id,
+          email,
+          displayName
+        };
+        assignedLineIds.forEach((lineId) => {
+          if (typeof lineId !== "string") return;
+          if (targetLineIdSet.size > 0 && !targetLineIdSet.has(lineId)) return;
+          const existing = nextSupervisorsByLineId.get(lineId) || [];
+          existing.push(supervisor);
+          nextSupervisorsByLineId.set(lineId, existing);
+        });
+      });
+      const nextSupervisorNamesByLineId = /* @__PURE__ */ new Map();
+      nextSupervisorsByLineId.forEach((supervisors, lineId) => {
+        nextSupervisorNamesByLineId.set(lineId, supervisors.map((s) => s.displayName).join(", "));
+      });
+      setSupervisorsByLineId(nextSupervisorsByLineId);
+      setSupervisorNamesByLineId(nextSupervisorNamesByLineId);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to fetch supervisors"));
+      setSupervisorsByLineId(/* @__PURE__ */ new Map());
+      setSupervisorNamesByLineId(/* @__PURE__ */ new Map());
+    } finally {
+      setIsLoading(false);
+    }
+  }, [enabled, supabase, targetLineIdSet]);
+  React24.useEffect(() => {
+    fetchSupervisors();
+  }, [fetchSupervisors, lineIdsKey]);
+  React24.useEffect(() => {
+    if (!enabled || !supabase) return;
+    let channel = null;
+    channel = supabase.channel("supervisors-by-line").on(
+      "postgres_changes",
+      { event: "*", schema: "public", table: "user_roles", filter: "role_level=eq.supervisor" },
+      () => {
+        fetchSupervisors();
+      }
+    ).subscribe();
+    return () => {
+      if (channel) supabase.removeChannel(channel);
+    };
+  }, [enabled, supabase, fetchSupervisors]);
+  return {
+    supervisorNamesByLineId,
+    supervisorsByLineId,
+    isLoading,
+    error,
+    refetch: fetchSupervisors
+  };
+};
 function useIdleTimeReasons({
   workspaceId,
   lineId,
@@ -13459,6 +13873,102 @@ var getConfigurableShortWorkspaceDisplayName = (workspaceId, workspaceConfig, li
   return fullName;
 };
 
+// src/lib/utils/kpis.ts
+var toNumber = (value) => {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string" && value.trim() !== "") {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+  }
+  return 0;
+};
+var createDefaultKPIs = () => ({
+  underperformingWorkers: { current: 0, total: 0, change: 0 },
+  efficiency: { value: 0, change: 0 },
+  outputProgress: { current: 0, target: 0, idealOutput: 0, change: 0 },
+  avgCycleTime: { value: 0, change: 0 },
+  qualityCompliance: { value: 95, change: 0 }
+});
+var buildKPIsFromLineMetricsRow = (row) => {
+  if (!row) return createDefaultKPIs();
+  const avgEfficiency = toNumber(row.avg_efficiency);
+  const avgCycleTime = toNumber(row.avg_cycle_time);
+  const currentOutput = toNumber(row.current_output);
+  const lineThreshold = toNumber(row.line_threshold);
+  const idealOutput = toNumber(row.ideal_output) || lineThreshold || 0;
+  const underperformingWorkspaces = toNumber(row.underperforming_workspaces);
+  const totalWorkspaces = toNumber(row.total_workspaces);
+  return {
+    underperformingWorkers: {
+      current: underperformingWorkspaces,
+      total: totalWorkspaces,
+      change: 0
+    },
+    efficiency: {
+      value: avgEfficiency,
+      change: 0
+    },
+    outputProgress: {
+      current: currentOutput,
+      target: lineThreshold,
+      idealOutput,
+      change: 0
+    },
+    avgCycleTime: {
+      value: avgCycleTime,
+      change: 0
+    },
+    qualityCompliance: {
+      value: 95,
+      change: 0
+    }
+  };
+};
+var aggregateKPIsFromLineMetricsRows = (rows) => {
+  if (!rows || rows.length === 0) return createDefaultKPIs();
+  const currentOutputSum = rows.reduce((sum, row) => sum + toNumber(row.current_output), 0);
+  const lineThresholdSum = rows.reduce((sum, row) => sum + toNumber(row.line_threshold), 0);
+  const idealOutputSum = rows.reduce(
+    (sum, row) => sum + (toNumber(row.ideal_output) || toNumber(row.line_threshold)),
+    0
+  );
+  const totalWorkspacesAll = rows.reduce((sum, row) => sum + toNumber(row.total_workspaces), 0);
+  const weightedEfficiencySum = rows.reduce(
+    (sum, row) => sum + toNumber(row.avg_efficiency) * toNumber(row.total_workspaces),
+    0
+  );
+  const avgEfficiency = totalWorkspacesAll > 0 ? weightedEfficiencySum / totalWorkspacesAll : 0;
+  const numLines = rows.length;
+  const avgCycleTime = numLines > 0 ? rows.reduce((sum, row) => sum + toNumber(row.avg_cycle_time), 0) / numLines : 0;
+  const totalUnderperforming = rows.reduce((sum, row) => sum + toNumber(row.underperforming_workspaces), 0);
+  const totalWorkspaces = rows.reduce((sum, row) => sum + toNumber(row.total_workspaces), 0);
+  return {
+    underperformingWorkers: {
+      current: totalUnderperforming,
+      total: totalWorkspaces,
+      change: 0
+    },
+    efficiency: {
+      value: avgEfficiency,
+      change: 0
+    },
+    outputProgress: {
+      current: currentOutputSum,
+      target: lineThresholdSum,
+      idealOutput: idealOutputSum,
+      change: 0
+    },
+    avgCycleTime: {
+      value: avgCycleTime,
+      change: 0
+    },
+    qualityCompliance: {
+      value: 95,
+      change: 0
+    }
+  };
+};
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -28495,6 +29005,7 @@ if (typeof document !== "undefined") {
   }
 }
 var BASE_HLS_CONFIG = {
+  // Keep buffer small to reduce wasted downloads on slow links
   maxBufferLength: 3,
   maxMaxBufferLength: 8,
   maxBufferSize: 50 * 1e3 * 1e3,
@@ -28502,10 +29013,10 @@ var BASE_HLS_CONFIG = {
   manifestLoadingTimeOut: 15e3,
   manifestLoadingMaxRetry: 3,
   manifestLoadingRetryDelay: 500,
-  levelLoadingTimeOut: 6e4,
+  levelLoadingTimeOut: 2e4,
   levelLoadingMaxRetry: 5,
   levelLoadingRetryDelay: 500,
-  fragLoadingTimeOut: 6e4,
+  fragLoadingTimeOut: 2e4,
   fragLoadingMaxRetry: 5,
   fragLoadingRetryDelay: 500,
   startPosition: -1,
@@ -28518,7 +29029,10 @@ var BASE_HLS_CONFIG = {
   abrBandWidthFactor: 0.95,
   abrBandWidthUpFactor: 0.7,
   abrMaxWithRealBitrate: false,
-  abrEwmaDefaultEstimate: 5e7
+  // Favor a conservative first rendition on constrained networks
+  abrEwmaDefaultEstimate: 1e6,
+  startLevel: 0,
+  capLevelToPlayerSize: true
 };
 var HlsVideoPlayer = React24.forwardRef(({
   src,
@@ -29602,7 +30116,7 @@ var getSupabaseClient2 = () => {
   }
   return supabaseJs.createClient(url, key);
 };
-var getAuthToken3 = async () => {
+var getAuthToken4 = async () => {
   try {
     const supabase = getSupabaseClient2();
     const { data: { session } } = await supabase.auth.getSession();
@@ -29625,7 +30139,7 @@ function useWorkspaceCrop(workspaceId) {
       setIsLoading(true);
       setError(null);
       try {
-        const token = await getAuthToken3();
+        const token = await getAuthToken4();
         if (!token) {
           throw new Error("Authentication required");
         }
@@ -30674,7 +31188,7 @@ var FileManagerFilters = ({
   const ROOT_CAUSE_OPTIONS = [
     "Operator Absent",
     "Operator Idle",
-    "Machine Maintenance",
+    "Machine Downtime",
     "No Material"
   ];
   const getIdleTimeRootCause = React24.useCallback((clipId) => {
@@ -30714,7 +31228,7 @@ var FileManagerFilters = ({
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          "Authorization": `Bearer ${await getAuthToken4()}`
+          "Authorization": `Bearer ${await getAuthToken5()}`
         },
         body: JSON.stringify({
           action: "clip-metadata",
@@ -30747,7 +31261,7 @@ var FileManagerFilters = ({
       });
     }
   }, [workspaceId, date, shift]);
-  const getAuthToken4 = async () => {
+  const getAuthToken5 = async () => {
     try {
       const { createClient: createClient5 } = await import('@supabase/supabase-js');
       const supabase = createClient5(
@@ -30773,7 +31287,7 @@ var FileManagerFilters = ({
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          "Authorization": `Bearer ${await getAuthToken4()}`
+          "Authorization": `Bearer ${await getAuthToken5()}`
         },
         body: JSON.stringify({
           action: "percentile-clips",
@@ -32417,7 +32931,7 @@ var BottlenecksContent = ({
       fetchClipCounts();
     }
   }, [workspaceId, effectiveDateString, effectiveShiftId, s3ClipsService, fetchClipCounts, isEffectiveShiftReady]);
-  const getAuthToken4 = React24.useCallback(async () => {
+  const getAuthToken5 = React24.useCallback(async () => {
     try {
       const { createClient: createClient5 } = await import('@supabase/supabase-js');
       const supabase = createClient5(
@@ -32436,7 +32950,7 @@ var BottlenecksContent = ({
     const fetchTriageClips = async () => {
       setIsLoadingTriageClips(true);
       try {
-        const token = await getAuthToken4();
+        const token = await getAuthToken5();
         if (!token) {
           console.error("[BottlenecksContent] No auth token available");
           return;
@@ -32484,7 +32998,7 @@ var BottlenecksContent = ({
       }
     };
     fetchTriageClips();
-  }, [triageMode, workspaceId, effectiveDateString, effectiveShiftId, getAuthToken4, isEffectiveShiftReady]);
+  }, [triageMode, workspaceId, effectiveDateString, effectiveShiftId, getAuthToken5, isEffectiveShiftReady]);
   React24.useEffect(() => {
     if (!triageMode || triageClips.length === 0 || !session?.access_token) {
       return;
@@ -32815,7 +33329,20 @@ var BottlenecksContent = ({
       updateActiveFilter(categoryId);
     }
     try {
-      await loadCategoryMetadata(categoryId, false);
+      const metadataPromise = loadCategoryMetadata(categoryId, false).catch((err) => {
+        console.warn(`[BottlenecksContent] Metadata fetch error (non-blocking):`, err);
+        return null;
+      });
+      const video = await s3ClipsService.getClipById(clipId);
+      if (video) {
+        setPendingVideo(video);
+        setCurrentClipId(clipId);
+        setAllVideos([video]);
+        setCurrentIndex(0);
+      } else {
+        throw new Error(`Failed to load video data for clip ${clipId}`);
+      }
+      await metadataPromise;
       let metadataArray = categoryMetadataRef.current;
       const clipExistsInMetadata = metadataArray.some((clip) => clip.clipId === clipId);
       if (metadataArray.length === 0 || !clipExistsInMetadata) {
@@ -32832,16 +33359,7 @@ var BottlenecksContent = ({
       }
       setCurrentMetadataIndex(clickedClipIndex);
       currentMetadataIndexRef.current = clickedClipIndex;
-      const video = await s3ClipsService.getClipById(clipId);
-      if (video) {
-        setPendingVideo(video);
-        setCurrentClipId(clipId);
-        setAllVideos([video]);
-        setCurrentIndex(0);
-        console.log(`[BottlenecksContent] Loaded clip ${clipId} (${clickedClipIndex + 1}/${metadataArray.length})`);
-      } else {
-        throw new Error(`Failed to load video data for clip ${clipId}`);
-      }
+      console.log(`[BottlenecksContent] Loaded clip ${clipId} (${clickedClipIndex + 1}/${metadataArray.length})`);
     } catch (error2) {
       console.error(`[BottlenecksContent] Error loading clip by ID (${clipId}):`, error2);
       if (isMountedRef.current) {
@@ -35728,7 +36246,7 @@ var STATIC_COLORS = {
   // red-600 - Critical/Urgent
   "No Material": "#f59e0b",
   // amber-500 - Warning/Supply Chain
-  "Machine Maintenance": "#3b82f6",
+  "Machine Downtime": "#3b82f6",
   // blue-500 - Scheduled/Technical
   "Operator Idle": "#8b5cf6"
   // violet-500 - Low Priority/Behavioral
@@ -38113,7 +38631,7 @@ var WorkspaceWhatsAppShareButton = ({
     }
   );
 };
-var WorkspacePdfGenerator = ({ workspace, className }) => {
+var WorkspacePdfGenerator = ({ workspace, className, idleTimeReasons }) => {
   const [isGenerating, setIsGenerating] = React24.useState(false);
   const entityConfig = useEntityConfig();
   const generatePDF = async () => {
@@ -38188,8 +38706,10 @@ var WorkspacePdfGenerator = ({ workspace, className }) => {
         doc.roundedRect(22, y - 7, 165, 12, 2, 2, "S");
       };
       const perfOverviewStartY = 93;
+      const hasIdleTimeReason = idleTimeReasons && idleTimeReasons.length > 0;
+      const perfOverviewHeight = hasIdleTimeReason ? 80 : 70;
       doc.setFillColor(245, 245, 245);
-      doc.roundedRect(15, perfOverviewStartY, 180, 60, 3, 3, "F");
+      doc.roundedRect(15, perfOverviewStartY, 180, perfOverviewHeight, 3, 3, "F");
       doc.setFontSize(18);
       doc.setFont("helvetica", "bold");
       doc.setTextColor(40, 40, 40);
@@ -38213,32 +38733,68 @@ var WorkspacePdfGenerator = ({ workspace, className }) => {
       doc.text("PPH (Pieces Per Hour):", 25, kpiStartY + kpiSpacing * 2);
       doc.setFont("helvetica", "bold");
       doc.text(`${workspace.avg_pph.toFixed(1)} (Standard: ${workspace.pph_threshold.toFixed(1)})`, 120, kpiStartY + kpiSpacing * 2);
+      createKPIBox(kpiStartY + kpiSpacing * 3);
+      doc.setFont("helvetica", "normal");
+      doc.text("Total Idle Time:", 25, kpiStartY + kpiSpacing * 3);
+      doc.setFont("helvetica", "bold");
+      const idleTimeFormatted = formatIdleTime(workspace.idle_time);
+      doc.text(idleTimeFormatted, 120, kpiStartY + kpiSpacing * 3);
+      if (hasIdleTimeReason) {
+        createKPIBox(kpiStartY + kpiSpacing * 4);
+        doc.setFont("helvetica", "normal");
+        doc.text("Top Idle Reason:", 25, kpiStartY + kpiSpacing * 4);
+        doc.setFont("helvetica", "bold");
+        const topReason = idleTimeReasons[0];
+        const reasonName = topReason.name.replace(/_/g, " ");
+        const reasonText = `${reasonName} (${topReason.value.toFixed(1)}%)`;
+        doc.text(reasonText, 120, kpiStartY + kpiSpacing * 4);
+      }
+      const separatorBeforeHourlyY = hasIdleTimeReason ? 183 : 173;
       doc.setDrawColor(180, 180, 180);
       doc.setLineWidth(0.8);
-      doc.line(20, 163, 190, 163);
-      const hourlyPerfStartY = 168;
+      doc.line(20, separatorBeforeHourlyY, 190, separatorBeforeHourlyY);
+      const hourlyPerfStartY = hasIdleTimeReason ? 188 : 178;
       const hourlyData = workspace.hourly_action_counts || [];
       const hourlyTarget = workspace.pph_threshold;
-      const tableStartY = 199;
-      const rowHeight = 8;
+      const pageHeight = doc.internal.pageSize.height;
+      const maxContentY = pageHeight - 15;
+      const baseTableStartY = hasIdleTimeReason ? 219 : 209;
+      let tableStartY = baseTableStartY;
+      let rowHeight = 8;
+      let headerFontSize = 11;
+      let contentFontSize = 11;
+      let titleFontSize = 18;
       const bottomPadding = 8;
+      const estimatedEndY = tableStartY + hourlyData.length * rowHeight + bottomPadding;
+      if (estimatedEndY > maxContentY) {
+        rowHeight = 6.5;
+        headerFontSize = 9;
+        contentFontSize = 9;
+        titleFontSize = 16;
+        tableStartY = hasIdleTimeReason ? 215 : 205;
+      }
       const backgroundHeight = tableStartY - hourlyPerfStartY + hourlyData.length * rowHeight + bottomPadding;
       doc.setFillColor(245, 245, 245);
       doc.roundedRect(15, hourlyPerfStartY, 180, backgroundHeight, 3, 3, "F");
-      doc.setFontSize(18);
+      doc.setFontSize(titleFontSize);
       doc.setFont("helvetica", "bold");
       doc.setTextColor(40, 40, 40);
-      doc.text("Hourly Performance", 20, 178);
+      const hourlyTitleY = hasIdleTimeReason ? 198 : 188;
+      doc.text("Hourly Performance", 20, hourlyTitleY);
       doc.setTextColor(0, 0, 0);
-      doc.setFontSize(11);
+      doc.setFontSize(headerFontSize);
       doc.setFont("helvetica", "bold");
-      doc.text("Time Range", 25, 188);
-      doc.text("Output", 95, 188);
-      doc.text("Target", 135, 188);
-      doc.text("Status", 170, 188);
+      const baseHeaderY = hasIdleTimeReason ? 208 : 198;
+      const headerY = titleFontSize === 16 ? hasIdleTimeReason ? 206 : 196 : baseHeaderY;
+      doc.text("Time Range", 25, headerY);
+      doc.text("Output", 95, headerY);
+      doc.text("Target", 135, headerY);
+      doc.text("Status", 170, headerY);
       doc.setLineWidth(0.3);
       doc.setDrawColor(200, 200, 200);
-      doc.line(20, 191, 190, 191);
+      const separatorY = headerY + 3;
+      doc.line(20, separatorY, 190, separatorY);
+      doc.setFontSize(contentFontSize);
       doc.setFont("helvetica", "normal");
       let yPos = tableStartY;
       const workspaceDate = new Date(workspace.date);
@@ -45690,23 +46246,6 @@ function HomeView({
     loading: displayNamesLoading,
     error: displayNamesError
   } = useWorkspaceDisplayNames(displayNameLineId, void 0);
-  React24.useCallback(() => {
-    console.log("Refetching KPIs after line metrics update");
-  }, []);
-  const {
-    kpis,
-    isLoading: kpisLoading,
-    error: kpisError,
-    refetch: refetchKPIs
-  } = useLineKPIs({
-    lineId: selectedLineId
-  });
-  const onLineMetricsUpdate = React24.useCallback(() => {
-    const timer = setTimeout(() => {
-      refetchKPIs();
-    }, 1e3);
-    return () => clearTimeout(timer);
-  }, [refetchKPIs]);
   const {
     workspaceMetrics,
     lineMetrics,
@@ -45715,10 +46254,22 @@ function HomeView({
     refetch: refetchMetrics
   } = useDashboardMetrics({
     lineId: selectedLineId,
-    onLineMetricsUpdate,
     userAccessibleLineIds: allLineIds
     // Pass user's accessible lines for supervisor filtering
   });
+  const kpis = React24.useMemo(() => {
+    const lineMetricsRows = lineMetrics || [];
+    if (selectedLineId === factoryViewId) {
+      if (metricsLoading && lineMetricsRows.length === 0) return null;
+      return aggregateKPIsFromLineMetricsRows(lineMetricsRows);
+    }
+    const row = lineMetricsRows.find((r2) => r2?.line_id === selectedLineId);
+    if (!row) {
+      if (metricsLoading) return null;
+      return buildKPIsFromLineMetricsRow(null);
+    }
+    return buildKPIsFromLineMetricsRow(row);
+  }, [selectedLineId, factoryViewId, lineMetrics, metricsLoading]);
   const {
     activeBreaks: allActiveBreaks,
     isLoading: breaksLoading,
@@ -46037,12 +46588,10 @@ function HomeView({
   React24.useEffect(() => {
     if (metricsError) {
       setErrorMessage(metricsError.message);
-    } else if (kpisError) {
-      setErrorMessage(kpisError.message);
     } else {
       setErrorMessage(null);
     }
-  }, [metricsError, kpisError]);
+  }, [metricsError]);
   const handleLineChange = React24.useCallback((value) => {
     setIsChangingFilter(true);
     setSelectedLineId(value);
@@ -46058,14 +46607,14 @@ function HomeView({
     }
   }, [LINE_FILTER_STORAGE_KEY]);
   React24.useEffect(() => {
-    if (!metricsLoading && !kpisLoading && isChangingFilter) {
+    if (!metricsLoading && isChangingFilter) {
       if (workspaceMetrics.length > 0 || selectedLineId === factoryViewId) {
         setIsChangingFilter(false);
       }
     }
-  }, [metricsLoading, kpisLoading, workspaceMetrics, isChangingFilter, selectedLineId, factoryViewId]);
+  }, [metricsLoading, workspaceMetrics, isChangingFilter, selectedLineId, factoryViewId]);
   React24.useEffect(() => {
-    if (!metricsLoading && !kpisLoading && !hasInitialDataLoaded) {
+    if (!metricsLoading && !hasInitialDataLoaded) {
       setHasInitialDataLoaded(true);
       trackCoreEvent("Home View Loaded", {
         default_line_id: defaultLineId,
@@ -46073,7 +46622,7 @@ function HomeView({
         is_supervisor: isSupervisor
       });
     }
-  }, [metricsLoading, kpisLoading, hasInitialDataLoaded, defaultLineId, factoryViewId, isSupervisor]);
+  }, [metricsLoading, hasInitialDataLoaded, defaultLineId, factoryViewId, isSupervisor]);
   const lineTitle = React24.useMemo(() => {
     return factoryName;
   }, [factoryName]);
@@ -46087,7 +46636,7 @@ function HomeView({
     ] });
   }, [availableLineIds, handleLineChange, selectedLineId, lineNames, factoryViewId, allLineIds.length]);
   const isInitialLoading = !isHydrated || displayNamesLoading || !displayNamesInitialized;
-  const isDataLoading = metricsLoading || kpisLoading;
+  const isDataLoading = metricsLoading;
   if (isInitialLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(LoadingPageCmp, { message: "Loading Dashboard..." });
   }
@@ -46231,7 +46780,7 @@ function withWorkspaceDisplayNames(Component3, options = {}) {
     const lineIdsKey = React24.useMemo(() => {
       if (!props.lineIds) return "";
       if (Array.isArray(props.lineIds)) {
-        return props.lineIds.sort().join(",");
+        return props.lineIds.slice().sort().join(",");
       }
       const values = Object.values(props.lineIds).filter(Boolean);
       return values.sort().join(",");
@@ -47354,9 +47903,15 @@ var KPIDetailView = ({
 };
 var KPIDetailViewWithDisplayNames = withSelectedLineDisplayNames(KPIDetailView);
 var KPIDetailView_default = KPIDetailViewWithDisplayNames;
-var LineCard = ({ line, onClick, supervisorEnabled = false }) => {
-  const { kpis, isLoading, error } = useLineKPIs({ lineId: line.id });
-  const { supervisorName } = useLineSupervisor(line.id);
+var LineCard = ({
+  line,
+  kpis,
+  isLoading,
+  error,
+  onClick,
+  supervisorEnabled = false,
+  supervisorName
+}) => {
   const isOnTrack = React24__namespace.default.useMemo(() => {
     if (!kpis) return null;
     return kpis.efficiency.value > 90;
@@ -47465,6 +48020,7 @@ var KPIsOverviewView = ({
   const [error, setError] = React24.useState(null);
   const supabase = useSupabase();
   const dashboardConfig = useDashboardConfig();
+  const entityConfig = useEntityConfig();
   const navigation = useNavigation(navigate);
   const dateTimeConfig = useDateTimeConfig();
   const representativeLineId = lineIds?.[0] || lines[0]?.id;
@@ -47472,6 +48028,27 @@ var KPIsOverviewView = ({
   const supervisorEnabled = dashboardConfig?.supervisorConfig?.enabled || false;
   const dbTimezone = useAppTimezone();
   const configuredTimezone = dbTimezone || dateTimeConfig.defaultTimezone || "UTC";
+  const factoryViewId = entityConfig.factoryViewId || "factory";
+  const {
+    lineMetrics,
+    isLoading: metricsLoading,
+    error: metricsError
+  } = useDashboardMetrics({
+    lineId: factoryViewId,
+    userAccessibleLineIds: lineIds
+  });
+  const defaultKPIs = React24__namespace.default.useMemo(() => createDefaultKPIs(), []);
+  const kpisByLineId = React24__namespace.default.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    lineMetrics.forEach((row) => {
+      if (row?.line_id) map.set(row.line_id, buildKPIsFromLineMetricsRow(row));
+    });
+    return map;
+  }, [lineMetrics]);
+  const visibleLineIds = React24__namespace.default.useMemo(() => lines.map((l) => l.id), [lines]);
+  const { supervisorNamesByLineId } = useSupervisorsByLineIds(visibleLineIds, {
+    enabled: supervisorEnabled && visibleLineIds.length > 0
+  });
   React24.useEffect(() => {
     trackCorePageView("KPIs Overview");
   }, []);
@@ -47689,8 +48266,12 @@ var KPIsOverviewView = ({
       LineCard,
       {
         line,
+        kpis: metricsError ? null : kpisByLineId.get(line.id) ?? (metricsLoading ? null : defaultKPIs),
+        isLoading: metricsLoading,
+        error: metricsError,
         onClick: (kpis) => handleLineClick(line, kpis),
-        supervisorEnabled
+        supervisorEnabled,
+        supervisorName: supervisorNamesByLineId.get(line.id) || null
       },
       line.id
     )) }) })
@@ -48514,43 +49095,6 @@ var calculateShiftHours = (startTime, endTime, breaks = []) => {
   const hoursDiff = (endMinutes - startMinutes - totalBreakMinutes) / 60;
   return Number(hoursDiff.toFixed(1));
 };
-var calculateBreakDuration = (startTime, endTime) => {
-  const [startHour, startMinute] = startTime.split(":").map(Number);
-  const [endHour, endMinute] = endTime.split(":").map(Number);
-  let startMinutes = startHour * 60 + startMinute;
-  let endMinutes = endHour * 60 + endMinute;
-  if (endMinutes < startMinutes) {
-    endMinutes += 24 * 60;
-  }
-  return endMinutes - startMinutes;
-};
-var parseBreaksFromDB = (dbBreaks) => {
-  if (!dbBreaks) return [];
-  if (Array.isArray(dbBreaks)) {
-    return dbBreaks.map((breakItem) => ({
-      startTime: breakItem.start || breakItem.startTime || "00:00",
-      endTime: breakItem.end || breakItem.endTime || "00:00",
-      duration: calculateBreakDuration(
-        breakItem.start || breakItem.startTime || "00:00",
-        breakItem.end || breakItem.endTime || "00:00"
-      ),
-      remarks: breakItem.remarks || breakItem.name || ""
-    }));
-  } else if (dbBreaks.breaks && Array.isArray(dbBreaks.breaks)) {
-    return dbBreaks.breaks.map((breakItem) => ({
-      startTime: breakItem.start || breakItem.startTime || "00:00",
-      endTime: breakItem.end || breakItem.endTime || "00:00",
-      duration: calculateBreakDuration(
-        breakItem.start || breakItem.startTime || "00:00",
-        breakItem.end || breakItem.endTime || "00:00"
-      ),
-      remarks: breakItem.remarks || breakItem.name || ""
-    }));
-  } else {
-    console.warn("Unexpected breaks format:", dbBreaks);
-    return [];
-  }
-};
 var getStoredLineState = (lineId) => {
   try {
     return JSON.parse(localStorage.getItem(`line_${lineId}_open`) || "false");
@@ -48842,16 +49386,9 @@ var ShiftsView = ({
     () => lineIds.map((id3) => ({
       id: id3,
       name: lineNames[id3] || `Line ${id3.substring(0, 4)}`,
-      dayShift: {
-        startTime: "08:00",
-        endTime: "16:00",
-        breaks: []
-      },
-      nightShift: {
-        startTime: "20:00",
-        endTime: "04:00",
-        breaks: []
-      },
+      timezone: "Asia/Kolkata",
+      shifts: [],
+      // Will be populated from DB
       isOpen: true,
       isSaving: false,
       saveSuccess: false
@@ -48889,58 +49426,37 @@ var ShiftsView = ({
           setLoading(false);
           return;
         }
-        const { data: dayShiftOperatingHours, error: dayShiftError } = await supabase.from("line_operating_hours").select("line_id, start_time, end_time, breaks").eq("shift_id", 0).in("line_id", enabledLineIds);
-        if (dayShiftError) {
-          console.error("Error fetching day shift operating hours:", dayShiftError);
-          showToast("error", "Error loading day shift data");
-          setError("Failed to load day shift data");
-          return;
-        }
-        const { data: nightShiftOperatingHours, error: nightShiftError } = await supabase.from("line_operating_hours").select("line_id, start_time, end_time, breaks").eq("shift_id", 1).in("line_id", enabledLineIds);
-        if (nightShiftError) {
-          console.error("Error fetching night shift operating hours:", nightShiftError);
-          showToast("error", "Error loading night shift data");
-          setError("Failed to load night shift data");
+        const { data: allShifts, error: shiftsError } = await supabase.from("line_operating_hours").select("line_id, shift_id, shift_name, start_time, end_time, breaks, timezone").in("line_id", enabledLineIds);
+        if (shiftsError) {
+          console.error("Error fetching shifts:", shiftsError);
+          showToast("error", "Error loading shift data");
+          setError("Failed to load shift data");
           return;
         }
-        const dayShiftHoursMap = (dayShiftOperatingHours || []).reduce((map, item) => {
-          map[item.line_id] = {
-            startTime: item.start_time,
-            endTime: item.end_time,
-            breaks: parseBreaksFromDB(item.breaks)
-          };
-          return map;
+        const shiftsByLine = (allShifts || []).reduce((acc, row) => {
+          if (!acc[row.line_id]) acc[row.line_id] = [];
+          acc[row.line_id].push(row);
+          return acc;
         }, {});
-        const nightShiftHoursMap = (nightShiftOperatingHours || []).reduce((map, item) => {
-          map[item.line_id] = {
-            startTime: item.start_time,
-            endTime: item.end_time,
-            breaks: parseBreaksFromDB(item.breaks)
-          };
-          return map;
+        const { data: linesData } = await supabase.from("lines").select("id, line_name").in("id", enabledLineIds);
+        const lineNameMap = (linesData || []).reduce((acc, line) => {
+          if (line.line_name) acc[line.id] = line.line_name;
+          return acc;
         }, {});
         setLineConfigs((prev) => {
           const enabledConfigs = prev.filter((config) => enabledLineIds.includes(config.id));
           return enabledConfigs.map((config) => {
-            const typedConfig = config;
-            const lineId = typedConfig.id;
-            const newConfig = { ...typedConfig };
-            if (dayShiftHoursMap[lineId]) {
-              newConfig.dayShift = {
-                ...newConfig.dayShift,
-                ...dayShiftHoursMap[lineId]
-              };
-            }
-            if (nightShiftHoursMap[lineId]) {
-              newConfig.nightShift = {
-                ...newConfig.nightShift,
-                ...nightShiftHoursMap[lineId]
-              };
-            }
-            if (newConfig.isOpen === void 0) {
-              newConfig.isOpen = getStoredLineState(lineId);
-            }
-            return newConfig;
+            const rows = shiftsByLine[config.id] || [];
+            const builtConfig = buildShiftConfigFromOperatingHoursRows(rows);
+            const lineName = lineNameMap[config.id] || lineNames[config.id] || `Line ${config.id.substring(0, 4)}`;
+            const sortedShifts = [...builtConfig.shifts || []].sort((a, b) => a.shiftId - b.shiftId);
+            return {
+              ...config,
+              name: lineName,
+              shifts: sortedShifts,
+              timezone: builtConfig.timezone || config.timezone,
+              isOpen: config.isOpen ?? getStoredLineState(config.id)
+            };
           });
         });
         setLoading(false);
@@ -48963,183 +49479,79 @@ var ShiftsView = ({
       );
     });
   }, []);
-  const updateDayShiftStartTime = React24.useCallback((lineId, value) => {
-    setLineConfigs((prev) => prev.map((config) => {
-      const typedConfig = config;
-      if (typedConfig.id === lineId) {
-        const updatedDayShift = { ...typedConfig.dayShift, startTime: value };
-        return {
-          ...typedConfig,
-          dayShift: updatedDayShift
-        };
-      }
-      return typedConfig;
-    }));
-  }, []);
-  const updateDayShiftEndTime = React24.useCallback((lineId, value) => {
-    setLineConfigs((prev) => prev.map((config) => {
-      const typedConfig = config;
-      if (typedConfig.id === lineId) {
-        const updatedDayShift = { ...typedConfig.dayShift, endTime: value };
-        return {
-          ...typedConfig,
-          dayShift: updatedDayShift
-        };
-      }
-      return typedConfig;
-    }));
-  }, []);
-  const updateNightShiftStartTime = React24.useCallback((lineId, value) => {
-    setLineConfigs((prev) => prev.map((config) => {
-      const typedConfig = config;
-      if (typedConfig.id === lineId) {
-        const updatedNightShift = { ...typedConfig.nightShift, startTime: value };
-        return {
-          ...typedConfig,
-          nightShift: updatedNightShift
-        };
-      }
-      return typedConfig;
-    }));
-  }, []);
-  const updateNightShiftEndTime = React24.useCallback((lineId, value) => {
-    setLineConfigs((prev) => prev.map((config) => {
-      const typedConfig = config;
-      if (typedConfig.id === lineId) {
-        const updatedNightShift = { ...typedConfig.nightShift, endTime: value };
-        return {
-          ...typedConfig,
-          nightShift: updatedNightShift
-        };
-      }
-      return typedConfig;
-    }));
-  }, []);
-  const addDayShiftBreak = React24.useCallback((lineId) => {
-    setLineConfigs((prev) => prev.map((config) => {
-      const typedConfig = config;
-      if (typedConfig.id === lineId) {
-        const dayShift = { ...typedConfig.dayShift };
-        const newBreak = {
-          startTime: dayShift.startTime,
-          endTime: dayShift.startTime,
-          duration: 0,
-          remarks: ""
-        };
-        return {
-          ...typedConfig,
-          dayShift: {
-            ...dayShift,
-            breaks: [...dayShift.breaks, newBreak]
-          }
-        };
-      }
-      return typedConfig;
-    }));
-  }, []);
-  const addNightShiftBreak = React24.useCallback((lineId) => {
+  const updateShiftTime = React24.useCallback((lineId, shiftIndex, field, value) => {
     setLineConfigs((prev) => prev.map((config) => {
-      const typedConfig = config;
-      if (typedConfig.id === lineId) {
-        const nightShift = { ...typedConfig.nightShift };
-        const newBreak = {
-          startTime: nightShift.startTime,
-          endTime: nightShift.startTime,
-          duration: 0
-        };
-        return {
-          ...typedConfig,
-          nightShift: {
-            ...nightShift,
-            breaks: [...nightShift.breaks, newBreak]
-          }
-        };
-      }
-      return typedConfig;
-    }));
-  }, []);
-  const updateDayShiftBreak = React24.useCallback((lineId, index, field, value) => {
-    setLineConfigs((prev) => prev.map((config) => {
-      const typedConfig = config;
-      if (typedConfig.id === lineId) {
-        const dayShift = { ...typedConfig.dayShift };
-        const newBreaks = [...dayShift.breaks];
-        newBreaks[index] = { ...newBreaks[index], [field]: value };
-        if (field === "startTime" || field === "endTime") {
-          const startParts = newBreaks[index].startTime.split(":").map(Number);
-          const endParts = newBreaks[index].endTime.split(":").map(Number);
-          let startMinutes = startParts[0] * 60 + startParts[1];
-          let endMinutes = endParts[0] * 60 + endParts[1];
-          if (endMinutes < startMinutes) {
-            endMinutes += 24 * 60;
-          }
-          newBreaks[index].duration = endMinutes - startMinutes;
+      if (config.id === lineId && config.shifts) {
+        const newShifts = [...config.shifts];
+        if (newShifts[shiftIndex]) {
+          newShifts[shiftIndex] = { ...newShifts[shiftIndex], [field]: value };
         }
-        return {
-          ...typedConfig,
-          dayShift: {
-            ...dayShift,
-            breaks: newBreaks
-          }
-        };
+        return { ...config, shifts: newShifts };
       }
-      return typedConfig;
+      return config;
     }));
   }, []);
-  const updateNightShiftBreak = React24.useCallback((lineId, index, field, value) => {
+  const addShiftBreak = React24.useCallback((lineId, shiftIndex) => {
     setLineConfigs((prev) => prev.map((config) => {
-      const typedConfig = config;
-      if (typedConfig.id === lineId) {
-        const nightShift = { ...typedConfig.nightShift };
-        const newBreaks = [...nightShift.breaks];
-        newBreaks[index] = { ...newBreaks[index], [field]: value };
-        if (field === "startTime" || field === "endTime") {
-          const startParts = newBreaks[index].startTime.split(":").map(Number);
-          const endParts = newBreaks[index].endTime.split(":").map(Number);
-          let startMinutes = startParts[0] * 60 + startParts[1];
-          let endMinutes = endParts[0] * 60 + endParts[1];
-          if (endMinutes < startMinutes) {
-            endMinutes += 24 * 60;
-          }
-          newBreaks[index].duration = endMinutes - startMinutes;
+      if (config.id === lineId && config.shifts) {
+        const newShifts = [...config.shifts];
+        if (newShifts[shiftIndex]) {
+          const shift = newShifts[shiftIndex];
+          const newBreak = {
+            startTime: shift.startTime,
+            endTime: shift.startTime,
+            duration: 0,
+            remarks: ""
+          };
+          newShifts[shiftIndex] = {
+            ...shift,
+            breaks: [...shift.breaks || [], newBreak]
+          };
         }
-        return {
-          ...typedConfig,
-          nightShift: {
-            ...nightShift,
-            breaks: newBreaks
-          }
-        };
+        return { ...config, shifts: newShifts };
       }
-      return typedConfig;
+      return config;
     }));
   }, []);
-  const removeDayShiftBreak = React24.useCallback((lineId, index) => {
+  const updateShiftBreak = React24.useCallback((lineId, shiftIndex, breakIndex, field, value) => {
     setLineConfigs((prev) => prev.map((config) => {
-      if (config.id === lineId) {
-        const dayShift = { ...config.dayShift };
-        return {
-          ...config,
-          dayShift: {
-            ...dayShift,
-            breaks: dayShift.breaks.filter((_, i) => i !== index)
+      if (config.id === lineId && config.shifts) {
+        const newShifts = [...config.shifts];
+        if (newShifts[shiftIndex]) {
+          const shift = newShifts[shiftIndex];
+          const newBreaks = [...shift.breaks || []];
+          if (newBreaks[breakIndex]) {
+            newBreaks[breakIndex] = { ...newBreaks[breakIndex], [field]: value };
+            if (field === "startTime" || field === "endTime") {
+              const startParts = newBreaks[breakIndex].startTime.split(":").map(Number);
+              const endParts = newBreaks[breakIndex].endTime.split(":").map(Number);
+              let startMinutes = startParts[0] * 60 + startParts[1];
+              let endMinutes = endParts[0] * 60 + endParts[1];
+              if (endMinutes < startMinutes) {
+                endMinutes += 24 * 60;
+              }
+              newBreaks[breakIndex].duration = endMinutes - startMinutes;
+            }
           }
-        };
+          newShifts[shiftIndex] = { ...shift, breaks: newBreaks };
+        }
+        return { ...config, shifts: newShifts };
       }
       return config;
     }));
   }, []);
-  const removeNightShiftBreak = React24.useCallback((lineId, index) => {
+  const removeShiftBreak = React24.useCallback((lineId, shiftIndex, breakIndex) => {
     setLineConfigs((prev) => prev.map((config) => {
-      if (config.id === lineId) {
-        const nightShift = { ...config.nightShift };
-        return {
-          ...config,
-          nightShift: {
-            ...nightShift,
-            breaks: nightShift.breaks.filter((_, i) => i !== index)
-          }
-        };
+      if (config.id === lineId && config.shifts) {
+        const newShifts = [...config.shifts];
+        if (newShifts[shiftIndex]) {
+          const shift = newShifts[shiftIndex];
+          newShifts[shiftIndex] = {
+            ...shift,
+            breaks: (shift.breaks || []).filter((_, i) => i !== breakIndex)
+          };
+        }
+        return { ...config, shifts: newShifts };
       }
       return config;
     }));
@@ -49153,29 +49565,26 @@ var ShiftsView = ({
       if (!lineConfig) {
         throw new Error("Line configuration not found");
       }
-      const dayShiftData = {
-        line_id: lineId,
-        shift_id: 0,
-        shift_name: "Day Shift",
-        start_time: lineConfig.dayShift.startTime,
-        end_time: lineConfig.dayShift.endTime,
-        breaks: formatBreaks(lineConfig.dayShift.breaks)
-      };
-      const nightShiftData = {
-        line_id: lineId,
-        shift_id: 1,
-        shift_name: "Night Shift",
-        start_time: lineConfig.nightShift.startTime,
-        end_time: lineConfig.nightShift.endTime,
-        breaks: formatBreaks(lineConfig.nightShift.breaks)
-      };
-      const dayResult = await supabase.from("line_operating_hours").upsert(dayShiftData).select();
-      if (dayResult.error) {
-        throw new Error(`Failed to save day shift: ${dayResult.error.message}`);
+      const allSavedRows = [];
+      for (const shift of lineConfig.shifts || []) {
+        const shiftData = {
+          line_id: lineId,
+          shift_id: shift.shiftId,
+          shift_name: shift.shiftName,
+          start_time: shift.startTime,
+          end_time: shift.endTime,
+          breaks: formatBreaks(shift.breaks || [])
+        };
+        const { data, error: error2 } = await supabase.from("line_operating_hours").upsert(shiftData).select();
+        if (error2) {
+          throw new Error(`Failed to save shift ${shift.shiftName}: ${error2.message}`);
+        }
+        if (data) {
+          allSavedRows.push(...data);
+        }
       }
-      const nightResult = await supabase.from("line_operating_hours").upsert(nightShiftData).select();
-      if (nightResult.error) {
-        throw new Error(`Failed to save night shift: ${nightResult.error.message}`);
+      if (allSavedRows.length > 0) {
+        shiftConfigStore.setFromOperatingHoursRows(lineId, allSavedRows, shiftConfigStore.get(lineId));
       }
       setLineConfigs((prev) => prev.map(
         (config) => config.id === lineId ? { ...config, isSaving: false, saveSuccess: true } : config
@@ -49254,48 +49663,34 @@ var ShiftsView = ({
             )
           ] })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { id: `shift-panel-${config.id}`, className: "p-3 sm:p-4 md:p-6 border-t border-gray-200 w-full", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ShiftPanel,
-            {
-              title: "Day Shift",
-              icon: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" }) }),
-              startTime: config.dayShift.startTime,
-              endTime: config.dayShift.endTime,
-              breaks: config.dayShift.breaks,
-              onStartTimeChange: (value) => updateDayShiftStartTime(config.id, value),
-              onEndTimeChange: (value) => updateDayShiftEndTime(config.id, value),
-              onBreakUpdate: (index, field, value) => updateDayShiftBreak(config.id, index, field, value),
-              onBreakRemove: (index) => removeDayShiftBreak(config.id, index),
-              onBreakAdd: () => addDayShiftBreak(config.id),
-              shiftHours: calculateShiftHours(
-                config.dayShift.startTime,
-                config.dayShift.endTime,
-                config.dayShift.breaks
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ShiftPanel,
-            {
-              title: "Night Shift",
-              icon: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) }),
-              startTime: config.nightShift.startTime,
-              endTime: config.nightShift.endTime,
-              breaks: config.nightShift.breaks,
-              onStartTimeChange: (value) => updateNightShiftStartTime(config.id, value),
-              onEndTimeChange: (value) => updateNightShiftEndTime(config.id, value),
-              onBreakUpdate: (index, field, value) => updateNightShiftBreak(config.id, index, field, value),
-              onBreakRemove: (index) => removeNightShiftBreak(config.id, index),
-              onBreakAdd: () => addNightShiftBreak(config.id),
-              shiftHours: calculateShiftHours(
-                config.nightShift.startTime,
-                config.nightShift.endTime,
-                config.nightShift.breaks
-              )
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { id: `shift-panel-${config.id}`, className: "p-3 sm:p-4 md:p-6 border-t border-gray-200 w-full", children: config.shifts && config.shifts.length > 0 ? config.shifts.map((shift, shiftIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+          ShiftPanel,
+          {
+            title: shift.shiftName,
+            icon: (
+              // Icon based on shift name (case-insensitive)
+              shift.shiftName.toLowerCase().includes("day") ? /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" }) }) : shift.shiftName.toLowerCase().includes("night") ? /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "w-5 h-5 text-gray-600" })
+            ),
+            startTime: shift.startTime,
+            endTime: shift.endTime,
+            breaks: shift.breaks || [],
+            onStartTimeChange: (value) => updateShiftTime(config.id, shiftIndex, "startTime", value),
+            onEndTimeChange: (value) => updateShiftTime(config.id, shiftIndex, "endTime", value),
+            onBreakUpdate: (breakIndex, field, value) => updateShiftBreak(config.id, shiftIndex, breakIndex, field, value),
+            onBreakRemove: (breakIndex) => removeShiftBreak(config.id, shiftIndex, breakIndex),
+            onBreakAdd: () => addShiftBreak(config.id, shiftIndex),
+            shiftHours: calculateShiftHours(
+              shift.startTime,
+              shift.endTime,
+              shift.breaks || []
+            )
+          },
+          shift.shiftId
+        )) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center text-gray-500 py-8", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "w-12 h-12 mx-auto mb-3 text-gray-400" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: "No shifts configured for this line" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400 mt-1", children: "Shifts will appear here once configured in the database" })
+        ] }) })
       ] }, config.id)) })
     ] })
   ] });
@@ -50146,6 +50541,7 @@ var TargetsViewUI = ({
   onUpdateSelectedSKU,
   skuRequired = false
 }) => {
+  const { displayNames: workspaceDisplayNames } = useWorkspaceDisplayNames();
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-screen bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "lg", message: "Loading targets..." }) }) });
   }
@@ -50293,7 +50689,7 @@ var TargetsViewUI = ({
                 ] })
               ] }) }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-gray-100", children: line.workspaces.map((workspace) => {
-                const formattedName = formatWorkspaceName(workspace.name, lineId);
+                const formattedName = workspaceDisplayNames[`${lineId}_${workspace.name}`] || formatWorkspaceName(workspace.name, lineId);
                 return /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
@@ -51017,8 +51413,17 @@ var TargetsView = ({
   };
   const handleUpdateWorkspaceDisplayName = React24.useCallback(async (workspaceId, displayName) => {
     try {
-      await workspaceService.updateWorkspaceDisplayName(workspaceId, displayName);
-      await forceRefreshWorkspaceDisplayNames();
+      const updated = await workspaceService.updateWorkspaceDisplayName(workspaceId, displayName);
+      if (updated?.line_id && updated?.workspace_id) {
+        upsertWorkspaceDisplayNameInCache({
+          lineId: updated.line_id,
+          workspaceId: updated.workspace_id,
+          displayName: updated?.display_name || displayName,
+          enabled: updated?.enable
+        });
+      } else {
+        await forceRefreshWorkspaceDisplayNames();
+      }
       sonner.toast.success("Workspace name updated successfully");
     } catch (error) {
       console.error("Error updating workspace display name:", error);
@@ -51697,7 +52102,13 @@ var WorkspaceDetailView = ({
                   }
                 )
               ] }),
-              activeTab === "overview" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5 lg:gap-2", children: renderHeaderActions ? renderHeaderActions(workspace) : /* @__PURE__ */ jsxRuntime.jsx(WorkspacePdfGenerator, { workspace }) }),
+              activeTab === "overview" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5 lg:gap-2", children: renderHeaderActions ? renderHeaderActions(workspace) : /* @__PURE__ */ jsxRuntime.jsx(
+                WorkspacePdfGenerator,
+                {
+                  workspace,
+                  idleTimeReasons: idleTimeChartData
+                }
+              ) }),
               activeTab === "monthly_history" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5 lg:gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
                 WorkspaceMonthlyPdfGenerator,
                 {
@@ -52752,6 +53163,7 @@ var WorkspaceHealthView = ({
   const [selectedWorkspace, setSelectedWorkspace] = React24.useState(null);
   const [selectedDate, setSelectedDate] = React24.useState(void 0);
   const [selectedShiftId, setSelectedShiftId] = React24.useState(void 0);
+  const [showDatePicker, setShowDatePicker] = React24.useState(false);
   const effectiveTimezone = timezone || "UTC";
   const currentShiftDetails = getCurrentShift(effectiveTimezone, shiftConfig);
   const operationalDate = currentShiftDetails.date;
@@ -52770,8 +53182,9 @@ var WorkspaceHealthView = ({
     loading,
     error,
     refetch,
-    shiftConfig: loadedShiftConfig
+    shiftConfig: loadedShiftConfig,
     // Get shift config from the hook to pass to modal
+    shiftConfigMap
   } = useWorkspaceHealth({
     lineId: effectiveLineIdForFetch,
     // undefined in factory view = fetch all lines
@@ -52783,6 +53196,13 @@ var WorkspaceHealthView = ({
     date: selectedDate,
     shiftId: selectedShiftId
   });
+  const modalShiftConfig = React24.useMemo(() => {
+    if (!selectedWorkspace) return void 0;
+    if (isFactoryView) {
+      return shiftConfigMap.get(selectedWorkspace.line_id);
+    }
+    return loadedShiftConfig || void 0;
+  }, [isFactoryView, loadedShiftConfig, selectedWorkspace, shiftConfigMap]);
   const handleWorkspaceClick = React24.useCallback(
     (workspace) => {
       const url = `/workspace/${workspace.workspace_id}`;
@@ -52800,28 +53220,6 @@ var WorkspaceHealthView = ({
   const handleCloseDetails = React24.useCallback(() => {
     setSelectedWorkspace(null);
   }, []);
-  const handleExport = React24.useCallback(() => {
-    const csv = [
-      ["Workspace", "Line", "Company", "Status", "Last Heartbeat", "Consecutive Misses"],
-      ...workspaces.map((w) => [
-        w.workspace_display_name || "",
-        w.line_name || "",
-        w.company_name || "",
-        w.status,
-        w.last_heartbeat,
-        w.consecutive_misses?.toString() || "0"
-      ])
-    ].map((row) => row.join(",")).join("\n");
-    const blob = new Blob([csv], { type: "text/csv" });
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = `workspace-health-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}.csv`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    window.URL.revokeObjectURL(url);
-  }, [workspaces]);
   const getStatusIcon = (status) => {
     switch (status) {
       case "healthy":
@@ -52859,104 +53257,42 @@ var WorkspaceHealthView = ({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("min-h-screen bg-slate-50", className), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "sticky top-0 z-10 px-3 sm:px-4 md:px-5 lg:px-6 py-2 sm:py-2.5 lg:py-3 flex flex-col shadow-sm bg-white", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:hidden", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              BackButtonMinimal,
-              {
-                onClick: () => router$1.push("/"),
-                text: "Back",
-                size: "sm",
-                "aria-label": "Navigate back to dashboard"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: () => {
-                    refetch();
-                  },
-                  className: "p-1.5 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
-                  "aria-label": "Refresh",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-4 w-4" })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: handleExport,
-                  className: "p-1.5 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
-                  "aria-label": "Export CSV",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4" })
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base font-semibold text-gray-900", children: "System Health" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2 w-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-emerald-500" })
-            ] })
-          ] }) })
+      /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b border-gray-200 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 sm:px-6 lg:px-8 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+          BackButtonMinimal,
+          {
+            onClick: () => router$1.push("/"),
+            text: "Back",
+            size: "default",
+            "aria-label": "Navigate back to dashboard"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "System Health" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-1 text-center", children: "Monitor workspace connectivity and operational status" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
-            BackButtonMinimal,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
             {
-              onClick: () => router$1.push("/"),
-              text: "Back",
-              size: "default",
-              "aria-label": "Navigate back to dashboard"
+              onClick: () => setShowDatePicker(!showDatePicker),
+              className: "p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
+              "aria-label": "Select date",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "h-5 w-5" })
             }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 max-w-[calc(100%-200px)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg md:text-xl lg:text-2xl xl:text-3xl font-semibold text-gray-900 truncate", children: "System Health" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2.5 w-2.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500" })
-            ] })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 flex gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: () => {
-                  refetch();
-                },
-                className: "p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
-                "aria-label": "Refresh",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-5 w-5" })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: handleExport,
-                className: "p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
-                "aria-label": "Export CSV",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-5 w-5" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-8" })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 sm:mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-          HealthDateShiftSelector,
-          {
-            selectedDate: selectedDate || operationalDate,
-            selectedShiftId: selectedShiftId ?? currentShiftDetails.shiftId,
-            shiftConfig,
-            timezone: effectiveTimezone,
-            onDateChange: setSelectedDate,
-            onShiftChange: setSelectedShiftId,
-            isCurrentShift: isViewingCurrentShift,
-            onReturnToLive: handleReturnToLive
-          }
-        ) })
-      ] }),
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => refetch(),
+              disabled: loading,
+              className: "p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+              "aria-label": "Refresh",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: `h-5 w-5 ${loading ? "animate-spin" : ""}` })
+            }
+          )
+        ] })
+      ] }) }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-7xl mx-auto p-4 space-y-6", children: [
         summary && /* @__PURE__ */ jsxRuntime.jsxs(
           motion.div,
@@ -53032,13 +53368,79 @@ var WorkspaceHealthView = ({
         )
       ] })
     ] }),
+    showDatePicker && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "fixed inset-0 bg-black/20 z-40",
+          onClick: () => setShowDatePicker(false)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed top-20 right-4 md:right-8 z-50 bg-white rounded-lg shadow-xl border border-gray-200 p-4 w-80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs font-medium text-gray-500 mb-2", children: "Select Date" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "date",
+              value: selectedDate || operationalDate,
+              max: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
+              onChange: (e) => {
+                setSelectedDate(e.target.value);
+              },
+              className: "w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs font-medium text-gray-500 mb-2", children: "Select Shift" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              value: selectedShiftId ?? currentShiftDetails.shiftId,
+              onChange: (e) => setSelectedShiftId(Number(e.target.value)),
+              className: "w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white",
+              children: (shiftConfig?.shifts || []).map((shift) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: shift.shiftId, children: [
+                shift.shiftName,
+                " (",
+                shift.startTime,
+                " - ",
+                shift.endTime,
+                ")"
+              ] }, shift.shiftId))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 pt-2", children: [
+          !isViewingCurrentShift && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => {
+                handleReturnToLive();
+                setShowDatePicker(false);
+              },
+              className: "flex-1 px-3 py-2 text-sm text-blue-600 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors",
+              children: "Return to Live"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => setShowDatePicker(false),
+              className: "flex-1 px-3 py-2 text-sm text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors",
+              children: "Done"
+            }
+          )
+        ] })
+      ] }) })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       WorkspaceUptimeDetailModal_default,
       {
         workspace: selectedWorkspace,
         isOpen: Boolean(selectedWorkspace),
         onClose: handleCloseDetails,
-        shiftConfig: loadedShiftConfig,
+        shiftConfig: modalShiftConfig,
         date: selectedDate,
         shiftId: selectedShiftId
       }
@@ -54181,7 +54583,7 @@ function DailyBarChart({
               axisLine: false,
               tick: (props) => {
                 const { x, y, payload } = props;
-                if (payload.value === 0) return null;
+                if (payload.value === 0) return /* @__PURE__ */ jsxRuntime.jsx("g", {});
                 const hours = Math.round(payload.value / (1e3 * 60 * 60) * 10) / 10;
                 return /* @__PURE__ */ jsxRuntime.jsxs("text", { x, y, dy: 4, textAnchor: "end", className: "text-xs fill-gray-400", children: [
                   hours,
@@ -54536,7 +54938,7 @@ var UserManagementTable = ({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Assignments" }),
-          showUsageStats && /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Weekly usage" }),
+          showUsageStats && /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Average Daily usage" }),
           /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Actions" })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: filteredAndSortedUsers.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: showUsageStats ? 5 : 4, className: "px-6 py-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center text-gray-400 gap-2", children: [
@@ -54548,12 +54950,25 @@ var UserManagementTable = ({
           const canChangeRole = permissions.canChangeRole(user);
           const canRemove = permissions.canRemoveUser(user);
           const hasActions = canChangeRole || canRemove;
+          const canShowUsageModal = showUsageStats && (user.role_level === "plant_head" || user.role_level === "supervisor");
+          const handleRowClick = (e) => {
+            const target = e.target;
+            if (target.closest("button") || target.closest("select") || target.closest("input") || target.closest('[role="button"]') || target.closest("[data-interactive]")) {
+              return;
+            }
+            if (canShowUsageModal) {
+              setUsageDetailUserId(user.user_id);
+              setShowUsageDetailModal(true);
+            }
+          };
           return /* @__PURE__ */ jsxRuntime.jsxs(
             "tr",
             {
+              onClick: handleRowClick,
               className: cn(
-                "hover:bg-gray-50 transition-colors",
-                isDeactivated && "opacity-60"
+                "transition-all duration-150",
+                isDeactivated && "opacity-60",
+                canShowUsageModal ? "cursor-pointer hover:bg-blue-50/50 hover:shadow-sm" : "hover:bg-gray-50"
               ),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
@@ -54619,10 +55034,7 @@ var UserManagementTable = ({
                       setShowUsageDetailModal(true);
                     },
                     className: "group flex items-center gap-3 hover:bg-gray-50 -mx-2 px-2 py-1.5 rounded-lg transition-all duration-200",
-                    children: isUsageLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-pulse bg-gray-200 h-5 w-20 rounded" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-base font-semibold ${avgDailyUsage?.[user.user_id] && avgDailyUsage[user.user_id] > 0 ? "text-gray-900 group-hover:text-blue-600" : "text-gray-400"} transition-colors`, children: formatDuration3(avgDailyUsage?.[user.user_id] || 0) }),
-                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { className: "w-4 h-4 text-gray-400 group-hover:text-blue-600 group-hover:translate-x-0.5 transition-all" })
-                    ] })
+                    children: isUsageLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-pulse bg-gray-200 h-5 w-20 rounded" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-base font-semibold ${avgDailyUsage?.[user.user_id] && avgDailyUsage[user.user_id] > 0 ? "text-gray-900 group-hover:text-blue-600" : "text-gray-400"} transition-colors`, children: formatDuration3(avgDailyUsage?.[user.user_id] || 0) })
                   }
                 ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-400", children: "-" }) }),
                 /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right", children: hasActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -54670,25 +55082,50 @@ var UserManagementTable = ({
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-1", children: [
               (() => {
                 const user = users.find((u) => u.user_id === openActionMenuId);
-                const isCurrentUser = user?.user_id === currentUserId;
-                const canChangeRole = user && permissions.canChangeRole(user);
-                return canChangeRole && /* @__PURE__ */ jsxRuntime.jsxs(
+                const canShowUsage = showUsageStats && user && (user.role_level === "plant_head" || user.role_level === "supervisor");
+                return canShowUsage && /* @__PURE__ */ jsxRuntime.jsxs(
                   "button",
                   {
                     onClick: () => {
                       if (user) {
-                        handleChangeRole(user);
+                        setUsageDetailUserId(user.user_id);
+                        setShowUsageDetailModal(true);
+                        handleCloseActionMenu();
                       }
                     },
-                    className: "w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",
-                    disabled: isCurrentUser,
+                    className: "w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100 flex items-center gap-2",
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UserCog, { className: "w-4 h-4" }),
-                      "Change Role"
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BarChart3, { className: "w-4 h-4" }),
+                      "View Detailed Usage"
                     ]
                   }
                 );
               })(),
+              (() => {
+                const user = users.find((u) => u.user_id === openActionMenuId);
+                const isCurrentUser = user?.user_id === currentUserId;
+                const canChangeRole = user && permissions.canChangeRole(user);
+                const canShowUsage = showUsageStats && user && (user.role_level === "plant_head" || user.role_level === "supervisor");
+                return canChangeRole && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  canShowUsage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-gray-200 my-1" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      onClick: () => {
+                        if (user) {
+                          handleChangeRole(user);
+                        }
+                      },
+                      className: "w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",
+                      disabled: isCurrentUser,
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UserCog, { className: "w-4 h-4" }),
+                        "Change Role"
+                      ]
+                    }
+                  )
+                ] });
+              })(),
               (() => {
                 const user = users.find((u) => u.user_id === openActionMenuId);
                 const isCurrentUser = user?.user_id === currentUserId;
@@ -55230,7 +55667,7 @@ var TeamManagementView = ({
     }, {});
   }, [usageData, usageDateRange.daysElapsed]);
   const pageTitle = user?.role_level === "optifye" ? "Platform Users" : "Team Management";
-  const pageDescription = user?.role_level === "optifye" ? "Manage users across all companies" : user?.role_level === "owner" ? "Manage your team members" : "Manage supervisors in your factory";
+  const pageDescription = user?.role_level === "optifye" ? "Manage users across all companies" : user?.role_level === "owner" ? "Manage team members and view their daily usage" : "Manage supervisors in your factory";
   const hasAccess = user ? user.role_level === void 0 || ["optifye", "owner", "plant_head"].includes(user.role_level) : false;
   const loadData = React24.useCallback(async () => {
     if (!supabase) {
@@ -57282,11 +57719,13 @@ exports.WorkspacePdfExportButton = WorkspacePdfExportButton;
 exports.WorkspacePdfGenerator = WorkspacePdfGenerator;
 exports.WorkspaceWhatsAppShareButton = WorkspaceWhatsAppShareButton;
 exports.actionService = actionService;
+exports.aggregateKPIsFromLineMetricsRows = aggregateKPIsFromLineMetricsRows;
 exports.apiUtils = apiUtils;
 exports.areAllLinesOnSameShift = areAllLinesOnSameShift;
 exports.authCoreService = authCoreService;
 exports.authOTPService = authOTPService;
 exports.authRateLimitService = authRateLimitService;
+exports.buildKPIsFromLineMetricsRow = buildKPIsFromLineMetricsRow;
 exports.checkRateLimit = checkRateLimit2;
 exports.clearAllRateLimits = clearAllRateLimits2;
 exports.clearRateLimit = clearRateLimit2;
@@ -57294,6 +57733,7 @@ exports.clearS3VideoCache = clearS3VideoCache;
 exports.clearS3VideoFromCache = clearS3VideoFromCache;
 exports.clearWorkspaceDisplayNamesCache = clearWorkspaceDisplayNamesCache;
 exports.cn = cn;
+exports.createDefaultKPIs = createDefaultKPIs;
 exports.createInvitationService = createInvitationService;
 exports.createLinesService = createLinesService;
 exports.createSessionTracker = createSessionTracker;
@@ -57318,6 +57758,7 @@ exports.fromUrlFriendlyName = fromUrlFriendlyName;
 exports.getAllLineDisplayNames = getAllLineDisplayNames;
 exports.getAllThreadMessages = getAllThreadMessages;
 exports.getAllWorkspaceDisplayNamesAsync = getAllWorkspaceDisplayNamesAsync;
+exports.getAllWorkspaceDisplayNamesSnapshot = getAllWorkspaceDisplayNamesSnapshot;
 exports.getAnonClient = getAnonClient;
 exports.getAvailableShiftIds = getAvailableShiftIds;
 exports.getBrowserName = getBrowserName;
@@ -57402,12 +57843,14 @@ exports.startCoreSessionRecording = startCoreSessionRecording;
 exports.stopCoreSessionRecording = stopCoreSessionRecording;
 exports.storeWorkspaceMapping = storeWorkspaceMapping;
 exports.streamProxyConfig = streamProxyConfig;
+exports.subscribeWorkspaceDisplayNames = subscribeWorkspaceDisplayNames;
 exports.throttledReloadDashboard = throttledReloadDashboard;
 exports.toUrlFriendlyName = toUrlFriendlyName;
 exports.trackCoreEvent = trackCoreEvent;
 exports.trackCorePageView = trackCorePageView;
 exports.transformToChartData = transformToChartData;
 exports.updateThreadTitle = updateThreadTitle;
+exports.upsertWorkspaceDisplayNameInCache = upsertWorkspaceDisplayNameInCache;
 exports.useAccessControl = useAccessControl;
 exports.useActiveBreaks = useActiveBreaks;
 exports.useActiveLineId = useActiveLineId;
@@ -57471,6 +57914,7 @@ exports.useSubscriptionManager = useSubscriptionManager;
 exports.useSubscriptionManagerSafe = useSubscriptionManagerSafe;
 exports.useSupabase = useSupabase;
 exports.useSupabaseClient = useSupabaseClient;
+exports.useSupervisorsByLineIds = useSupervisorsByLineIds;
 exports.useTargets = useTargets;
 exports.useTeamManagementPermissions = useTeamManagementPermissions;
 exports.useTheme = useTheme;