@optifye/dashboard-core 6.5.2 → 6.5.3

package/dist/index.js

@@ -1905,7 +1905,29 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
       throw error;
     }
     const processedData = (data || []).map((item) => this.processHealthStatus(item));
-    let filteredData = processedData;
+    let uptimeMap = /* @__PURE__ */ new Map();
+    if (options.companyId || data && data.length > 0) {
+      const companyId = options.companyId || data[0]?.company_id;
+      if (companyId) {
+        try {
+          uptimeMap = await this.calculateWorkspaceUptime(companyId);
+        } catch (error2) {
+          console.error("Error calculating uptime:", error2);
+        }
+      }
+    }
+    const dataWithUptime = processedData.map((workspace) => {
+      const uptimeDetails = uptimeMap.get(workspace.workspace_id);
+      if (uptimeDetails) {
+        return {
+          ...workspace,
+          uptimePercentage: uptimeDetails.percentage,
+          uptimeDetails
+        };
+      }
+      return workspace;
+    });
+    let filteredData = dataWithUptime;
     try {
       const { data: enabledWorkspaces, error: workspaceError } = await supabase.from("workspaces").select("workspace_id, display_name").eq("enable", true);
       if (!workspaceError && enabledWorkspaces && enabledWorkspaces.length > 0) {
@@ -1981,13 +2003,31 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
     const healthyWorkspaces = workspaces.filter((w) => w.status === "healthy").length;
     const unhealthyWorkspaces = workspaces.filter((w) => w.status === "unhealthy").length;
     const warningWorkspaces = workspaces.filter((w) => w.status === "warning").length;
-    const uptimePercentage = totalWorkspaces > 0 ? healthyWorkspaces / totalWorkspaces * 100 : 0;
+    let uptimePercentage = 0;
+    let totalDowntimeMinutes = 0;
+    if (totalWorkspaces > 0) {
+      const workspacesWithUptime = workspaces.filter((w) => w.uptimePercentage !== void 0 && w.uptimeDetails !== void 0);
+      if (workspacesWithUptime.length > 0) {
+        const totalUptime = workspacesWithUptime.reduce((sum, w) => sum + (w.uptimePercentage || 0), 0);
+        uptimePercentage = totalUptime / workspacesWithUptime.length;
+        totalDowntimeMinutes = workspacesWithUptime.reduce((sum, w) => {
+          if (w.uptimeDetails) {
+            const downtime = Math.max(0, w.uptimeDetails.expectedMinutes - w.uptimeDetails.actualMinutes);
+            return sum + downtime;
+          }
+          return sum;
+        }, 0);
+      } else {
+        uptimePercentage = healthyWorkspaces / totalWorkspaces * 100;
+      }
+    }
     return {
       totalWorkspaces,
       healthyWorkspaces,
       unhealthyWorkspaces,
       warningWorkspaces,
       uptimePercentage,
+      totalDowntimeMinutes,
       lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
     };
   }
@@ -2067,6 +2107,155 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
   clearCache() {
     this.cache.clear();
   }
+  async calculateWorkspaceUptime(companyId) {
+    const supabase = _getSupabaseInstance();
+    if (!supabase) throw new Error("Supabase client not initialized");
+    const dashboardConfig = _getDashboardConfigInstance();
+    const timezone = dashboardConfig?.dateTimeConfig?.defaultTimezone || "UTC";
+    const shiftConfig = dashboardConfig?.shiftConfig;
+    const currentShiftInfo = getCurrentShift(timezone, shiftConfig);
+    const currentDate = currentShiftInfo.date;
+    const currentShiftId = currentShiftInfo.shiftId;
+    const now2 = /* @__PURE__ */ new Date();
+    const currentHour = now2.getHours();
+    const currentMinute = now2.getMinutes();
+    let shiftStartHour;
+    let shiftEndHour;
+    if (currentShiftId === 0) {
+      shiftStartHour = 9;
+      shiftEndHour = 18;
+    } else {
+      shiftStartHour = 20;
+      shiftEndHour = 3;
+    }
+    let elapsedMinutes = 0;
+    if (currentShiftId === 0) {
+      if (currentHour >= shiftStartHour && currentHour < shiftEndHour) {
+        elapsedMinutes = (currentHour - shiftStartHour) * 60 + currentMinute;
+      } else if (currentHour >= shiftEndHour) {
+        elapsedMinutes = (shiftEndHour - shiftStartHour) * 60;
+      }
+    } else {
+      if (currentHour >= shiftStartHour) {
+        elapsedMinutes = (currentHour - shiftStartHour) * 60 + currentMinute;
+      } else if (currentHour < shiftEndHour) {
+        elapsedMinutes = (24 - shiftStartHour + currentHour) * 60 + currentMinute;
+      }
+    }
+    const tableName = `performance_metrics_${companyId.replace(/-/g, "_")}`;
+    const query = `
+      WITH workspace_uptime AS (
+        SELECT 
+          workspace_id,
+          workspace_display_name,
+          idle_time_hourly,
+          output_hourly,
+          shift_start,
+          shift_end
+        FROM ${tableName}
+        WHERE date = $1::date
+          AND shift_id = $2
+      ),
+      calculated_uptime AS (
+        SELECT 
+          workspace_id,
+          workspace_display_name,
+          -- Calculate actual minutes from hourly data
+          (
+            SELECT COALESCE(SUM(
+              CASE 
+                WHEN jsonb_array_length(idle_time_hourly->key::text) >= 58 THEN 60
+                WHEN jsonb_array_length(idle_time_hourly->key::text) > 0 THEN jsonb_array_length(idle_time_hourly->key::text)
+                ELSE 0
+              END
+            ), 0)
+            FROM jsonb_object_keys(idle_time_hourly) AS key
+            WHERE key::int >= $3 AND key::int < $4
+          ) +
+          -- Add current hour's data if applicable
+          CASE 
+            WHEN $4::int >= $3 AND $4::int < $5 THEN
+              LEAST($6::int, 
+                    COALESCE(jsonb_array_length(idle_time_hourly->$4::text), 0))
+            ELSE 0
+          END as actual_minutes
+        FROM workspace_uptime
+      )
+      SELECT 
+        workspace_id,
+        workspace_display_name,
+        actual_minutes,
+        $7::int as expected_minutes,
+        ROUND(
+          CASE 
+            WHEN $7::int > 0 THEN (actual_minutes::numeric / $7::numeric) * 100
+            ELSE 100
+          END, 1
+        ) as uptime_percentage
+      FROM calculated_uptime
+    `;
+    try {
+      const { data, error } = await supabase.rpc("sql_query", {
+        query_text: query,
+        params: [
+          currentDate,
+          currentShiftId,
+          shiftStartHour,
+          currentHour,
+          shiftEndHour,
+          currentMinute,
+          elapsedMinutes
+        ]
+      }).single();
+      if (error) {
+        const { data: queryData, error: queryError } = await supabase.from(tableName).select("workspace_id, workspace_display_name, idle_time_hourly, output_hourly").eq("date", currentDate).eq("shift_id", currentShiftId);
+        if (queryError) {
+          console.error("Error fetching performance metrics:", queryError);
+          return /* @__PURE__ */ new Map();
+        }
+        const uptimeMap2 = /* @__PURE__ */ new Map();
+        for (const record of queryData || []) {
+          let actualMinutes = 0;
+          const idleTimeHourly = record.idle_time_hourly || {};
+          if (idleTimeHourly && typeof idleTimeHourly === "object") {
+            for (const [hour, dataArray] of Object.entries(idleTimeHourly)) {
+              const hourNum = parseInt(hour);
+              if (hourNum >= shiftStartHour && hourNum < currentHour) {
+                const arrayLength = Array.isArray(dataArray) ? dataArray.length : 0;
+                actualMinutes += arrayLength >= 58 ? 60 : arrayLength;
+              } else if (hourNum === currentHour && currentHour >= shiftStartHour) {
+                const arrayLength = Array.isArray(dataArray) ? dataArray.length : 0;
+                actualMinutes += Math.min(currentMinute, arrayLength);
+              }
+            }
+          }
+          const percentage = elapsedMinutes > 0 ? Math.round(actualMinutes / elapsedMinutes * 1e3) / 10 : 100;
+          uptimeMap2.set(record.workspace_id, {
+            expectedMinutes: elapsedMinutes,
+            actualMinutes,
+            percentage,
+            lastCalculated: (/* @__PURE__ */ new Date()).toISOString()
+          });
+        }
+        return uptimeMap2;
+      }
+      const uptimeMap = /* @__PURE__ */ new Map();
+      if (Array.isArray(data)) {
+        for (const record of data) {
+          uptimeMap.set(record.workspace_id, {
+            expectedMinutes: record.expected_minutes,
+            actualMinutes: record.actual_minutes,
+            percentage: record.uptime_percentage,
+            lastCalculated: (/* @__PURE__ */ new Date()).toISOString()
+          });
+        }
+      }
+      return uptimeMap;
+    } catch (error) {
+      console.error("Error calculating workspace uptime:", error);
+      return /* @__PURE__ */ new Map();
+    }
+  }
 };
 var workspaceHealthService = WorkspaceHealthService.getInstance();
 
@@ -19725,7 +19914,7 @@ var OptifyeLogoLoader = ({
             className: `${sizeClasses[size]} h-auto animate-pulse select-none pointer-events-none`
           }
         ),
-        message && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 text-gray-600 text-sm font-medium text-center", children: message })
+        message && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 text-gray-600 text-base sm:text-sm font-medium text-center", children: message })
       ]
     }
   );
@@ -21636,8 +21825,8 @@ var VideoCard = React19__namespace.default.memo(({
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full overflow-hidden bg-black", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black z-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse flex flex-col items-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, { className: `${compact ? "w-4 h-4" : "w-6 h-6"} text-gray-500` }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${compact ? "text-[10px]" : "text-xs"} text-gray-500 mt-1`, children: "Loading..." })
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, { className: `w-5 h-5 sm:${compact ? "w-4 h-4" : "w-6 h-6"} text-gray-500` }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-[11px] sm:${compact ? "text-[10px]" : "text-xs"} text-gray-500 mt-1`, children: "Loading..." })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 z-10", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -21672,10 +21861,10 @@ var VideoCard = React19__namespace.default.memo(({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 ${compact ? "p-1" : "p-1.5"} flex justify-between items-center z-10`, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 p-1.5 sm:${compact ? "p-1" : "p-1.5"} flex justify-between items-center z-10`, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, { size: compact ? 10 : 12, className: "text-white" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-white ${compact ? "text-[10px]" : "text-xs"} font-medium tracking-wide`, children: displayName })
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-white text-[11px] sm:${compact ? "text-[10px]" : "text-xs"} font-medium tracking-wide`, children: displayName })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center ${compact ? "gap-1" : "gap-1.5"}`, children: [
             trendInfo && /* @__PURE__ */ jsxRuntime.jsx(
@@ -21687,7 +21876,7 @@ var VideoCard = React19__namespace.default.memo(({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${compact ? "w-1 h-1" : "w-1.5 h-1.5"} rounded-full bg-green-500` }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-white ${compact ? "text-[10px]" : "text-xs"}`, children: "Live" })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-white text-[11px] sm:${compact ? "text-[10px]" : "text-xs"}`, children: "Live" })
           ] })
         ] })
       ]
@@ -21897,10 +22086,10 @@ var VideoGridView = React19__namespace.default.memo(({
       view_type: "video_grid"
     });
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `relative overflow-hidden h-full w-full ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "h-full w-full p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `relative overflow-hidden h-full w-full ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "h-full w-full p-3 sm:p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "grid h-full w-full gap-2",
+      className: "grid h-full w-full gap-3 sm:gap-2",
       style: {
         gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
         gridTemplateRows: `repeat(${gridRows}, 1fr)`,
@@ -22685,15 +22874,15 @@ var BreakNotificationPopup = ({
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-amber-500 rounded-full animate-pulse flex-shrink-0 mt-2" }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-sm text-gray-900", children: breakItem.remarks || "Break" }),
-                  (activeBreaks.length > 1 || lineNames[breakItem.lineId]) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500 mt-0.5", children: lineNames[breakItem.lineId] || `Line ${breakItem.lineId.substring(0, 8)}` })
+                  /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-base sm:text-sm text-gray-900", children: breakItem.remarks || "Break" }),
+                  (activeBreaks.length > 1 || lineNames[breakItem.lineId]) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm sm:text-xs text-gray-500 mt-0.5", children: lineNames[breakItem.lineId] || `Line ${breakItem.lineId.substring(0, 8)}` })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-600 font-medium", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm sm:text-xs text-gray-600 font-medium", children: [
                   breakItem.startTime,
                   " - ",
                   breakItem.endTime
                 ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-500", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm sm:text-xs text-gray-500", children: [
                   formatTime3(breakItem.elapsedMinutes),
                   " / ",
                   formatTime3(breakItem.duration)
@@ -23411,7 +23600,7 @@ var TimeDisplay = ({ className, variant = "default" }) => {
       className: `flex items-center space-x-1.5 bg-white/60 backdrop-blur-sm px-2 py-0.5 rounded-md shadow-xs ${className || ""}`,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3 w-3 text-[var(--primary-DEFAULT)]", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", clipRule: "evenodd" }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] font-medium text-gray-800 tabular-nums tracking-tight", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-[11px] font-medium text-gray-800 tabular-nums tracking-tight", children: [
           time2,
           " ",
           timeSuffix
@@ -28087,7 +28276,7 @@ var WorkspaceGridItem = React19__namespace.default.memo(({
         isVeryLowEfficiency && !isInactive && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-10 left-1/2 -translate-x-1/2 z-30", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -inset-1 bg-red-400/50 rounded-full blur-sm animate-pulse" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -inset-0.5 bg-red-500/30 rounded-full blur-md animate-ping [animation-duration:1.5s]" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[#E34329] w-9 h-9 rounded-full flex items-center justify-center text-white font-bold text-lg shadow-lg ring-2 ring-red-400/40 border border-red-400/80 animate-pulse", children: "!" })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[#E34329] w-8 h-8 sm:w-9 sm:h-9 rounded-full flex items-center justify-center text-white font-bold text-base sm:text-lg shadow-lg ring-2 ring-red-400/40 border border-red-400/80 animate-pulse", children: "!" })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
@@ -28096,14 +28285,14 @@ var WorkspaceGridItem = React19__namespace.default.memo(({
             className: `${styles2} ${colorClass} ${isBottleneck ? "ring-2 ring-red-500/70" : ""} ${isVeryLowEfficiency ? "ring-2 ring-red-500/50" : ""} ${isInactive ? "bg-gray-200" : ""} shadow-lg`,
             "aria-label": isInactive ? `Inactive workspace ${workspaceNumber}` : `View details for workspace ${workspaceNumber}`,
             title: isInactive ? `Inactive: ${getWorkspaceDisplayName(data.workspace_name, data.line_id)}` : getWorkspaceDisplayName(data.workspace_name, data.line_id),
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `font-semibold tracking-wide text-[min(4vw,2rem)] uppercase ${isInactive ? "text-gray-400" : "text-white"} drop-shadow-sm`, children: workspaceNumber })
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `font-semibold tracking-wide text-lg sm:text-xl md:text-[min(4vw,2rem)] uppercase ${isInactive ? "text-gray-400" : "text-white"} drop-shadow-sm`, children: workspaceNumber })
           }
         ),
         arrow && !isInactive && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: `absolute left-1/2 -translate-x-1/2 ${arrowPosition}
-          text-[min(3.5vw,2.25rem)] font-bold tracking-tight ${arrowColor} drop-shadow-sm`,
+          text-base sm:text-lg md:text-[min(3.5vw,2.25rem)] font-bold tracking-tight ${arrowColor} drop-shadow-sm`,
             style: { bottom: "-2.5rem", lineHeight: 1, display: "flex", alignItems: "center", justifyContent: "center" },
             children: arrow
           }
@@ -28133,11 +28322,11 @@ var WorkspaceGrid = React19__namespace.default.memo(({
   }, [workspaces.length]);
   const { VideoGridView: VideoGridViewComponent } = useRegistry();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative w-full h-full overflow-hidden ${className}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 left-2 sm:left-4 right-2 sm:right-8 z-20", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center justify-between py-1 sm:py-1.5 gap-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx(Legend6, {}) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden mt-1", children: /* @__PURE__ */ jsxRuntime.jsx(Legend6, {}) })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 left-4 sm:left-4 right-4 sm:right-8 z-20", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center justify-between py-2 sm:py-1.5 gap-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx(Legend6, {}) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(Legend6, {}) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-10 sm:top-16 left-0 right-0 bottom-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-12 sm:top-16 left-0 right-0 bottom-0", children: /* @__PURE__ */ jsxRuntime.jsx(
       VideoGridViewComponent,
       {
         workspaces,
@@ -28352,8 +28541,8 @@ var KPICard = ({
   const cardClasses = clsx(
     // Base classes
     "rounded-lg transition-all duration-200",
-    // Sizing based on compact mode - extra compact on mobile
-    "p-1.5 sm:p-3 md:p-4",
+    // Sizing based on compact mode - better padding on mobile
+    "p-2.5 sm:p-3 md:p-4",
     // Variant-specific styling
     {
       "bg-white/50 backdrop-blur-sm border border-gray-200/60 shadow-sm hover:shadow-md dark:bg-gray-800/50 dark:border-gray-700/60": style.variant === "default",
@@ -28361,8 +28550,8 @@ var KPICard = ({
       "bg-blue-50 border border-blue-200 dark:bg-blue-900/20 dark:border-blue-800/30": style.variant === "filled",
       "bg-gray-50/50 dark:bg-gray-800/30": style.variant === "subtle"
     },
-    // Width for src matching - compact on mobile, flexible on small screens
-    !className?.includes("w-") && "w-[120px] sm:w-[180px] md:w-[220px]",
+    // Width for src matching - better mobile width, flexible on small screens
+    !className?.includes("w-") && "w-[110px] sm:w-[180px] md:w-[220px]",
     // Interactive styling if onClick is provided
     onClick && "cursor-pointer hover:scale-[1.01] active:scale-[0.99]",
     // Loading state
@@ -28381,14 +28570,14 @@ var KPICard = ({
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(
           "font-medium text-gray-500 dark:text-gray-400",
-          "text-[9px] sm:text-xs md:text-sm",
-          "mb-0.5 sm:mb-1 md:mb-2",
-          "uppercase tracking-wider"
+          "text-[10px] sm:text-xs md:text-sm",
+          "mb-1 sm:mb-1 md:mb-2",
+          "uppercase tracking-wide sm:tracking-wider"
         ), children: title }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-0.5 sm:gap-2 flex-wrap", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(
             "font-bold text-gray-900 dark:text-gray-50",
-            "text-sm sm:text-xl md:text-2xl"
+            "text-base sm:text-xl md:text-2xl"
           ), children: isLoading ? "\u2014" : formattedValue }),
           suffix && !isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(
             "font-medium text-gray-600 dark:text-gray-300",
@@ -28563,35 +28752,46 @@ var KPISection = React19.memo(({
   const outputDifference = kpis.outputProgress.current - kpis.outputProgress.idealOutput;
   const outputIsOnTarget = outputDifference >= 0;
   if (useSrcLayout) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-1 sm:gap-3 overflow-x-auto sm:overflow-visible pb-1 sm:pb-0 ${className || ""}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        KPICard,
-        {
-          title: "Underperforming",
-          value: "2/3",
-          change: 0
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        KPICard,
-        {
-          title: "Efficiency",
-          value: kpis.efficiency.value,
-          change: kpis.efficiency.change,
-          suffix: "%"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        KPICard,
-        {
-          title: "Output Progress",
-          value: `${kpis.outputProgress.current}/${kpis.outputProgress.target}`,
-          change: kpis.outputProgress.change,
-          outputDifference,
-          showOutputDetails: true
-        }
-      )
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `flex gap-2 sm:gap-3 overflow-x-auto sm:overflow-visible pb-2 sm:pb-0 ${className || ""}`,
+        style: {
+          scrollbarWidth: "none",
+          msOverflowStyle: "none",
+          WebkitScrollbar: { display: "none" }
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+            KPICard,
+            {
+              title: "Underperforming",
+              value: "2/3",
+              change: 0
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+            KPICard,
+            {
+              title: "Efficiency",
+              value: kpis.efficiency.value,
+              change: kpis.efficiency.change,
+              suffix: "%"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+            KPICard,
+            {
+              title: "Output Progress",
+              value: `${kpis.outputProgress.current}/${kpis.outputProgress.target}`,
+              change: kpis.outputProgress.change,
+              outputDifference,
+              showOutputDetails: true
+            }
+          ) })
+        ]
+      }
+    );
   }
   const kpiCardData = [
     {
@@ -28724,6 +28924,19 @@ var WorkspaceHealthCard = ({
   const formatTimeAgo = (timeString) => {
     return timeString.replace("about ", "").replace(" ago", "");
   };
+  const formatDowntime = (uptimeDetails) => {
+    if (!uptimeDetails) return "";
+    const downtimeMinutes = Math.max(0, uptimeDetails.expectedMinutes - uptimeDetails.actualMinutes);
+    if (downtimeMinutes === 0) return "No downtime";
+    if (downtimeMinutes < 1) return "< 1 min downtime";
+    if (downtimeMinutes < 60) return `${downtimeMinutes} min downtime`;
+    const hours = Math.floor(downtimeMinutes / 60);
+    const minutes = downtimeMinutes % 60;
+    if (minutes === 0) {
+      return `${hours} hr downtime`;
+    }
+    return `${hours} hr ${minutes} min downtime`;
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     Card2,
     {
@@ -28757,13 +28970,32 @@ var WorkspaceHealthCard = ({
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: config.statusText })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-3.5 w-3.5 text-gray-400" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap", children: [
-            "Last seen: ",
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: formatTimeAgo(workspace.timeSinceLastUpdate) })
-          ] })
-        ] }) }) })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-3.5 w-3.5 text-gray-400" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap", children: [
+              "Last seen: ",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: formatTimeAgo(workspace.timeSinceLastUpdate) })
+            ] })
+          ] }),
+          workspace.uptimePercentage !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { className: "h-3.5 w-3.5 text-gray-400" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap", children: [
+              "Uptime today: ",
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx(
+                "font-medium",
+                workspace.uptimePercentage >= 97 ? "text-green-600 dark:text-green-400" : workspace.uptimePercentage >= 90 ? "text-yellow-600 dark:text-yellow-400" : "text-red-600 dark:text-red-400"
+              ), children: [
+                workspace.uptimePercentage.toFixed(1),
+                "%"
+              ] })
+            ] })
+          ] }),
+          workspace.uptimeDetails && workspace.uptimeDetails.expectedMinutes > workspace.uptimeDetails.actualMinutes && workspace.uptimePercentage !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(
+            "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium",
+            workspace.uptimePercentage >= 97 ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400" : workspace.uptimePercentage >= 90 ? "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400" : "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
+          ), children: formatDowntime(workspace.uptimeDetails) }) })
+        ] })
       ] })
     }
   );
@@ -28834,6 +29066,20 @@ var CompactWorkspaceHealthCard = ({
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          workspace.uptimePercentage !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: clsx(
+              "text-xs font-medium",
+              workspace.uptimePercentage >= 97 ? "text-green-600 dark:text-green-400" : workspace.uptimePercentage >= 90 ? "text-yellow-600 dark:text-yellow-400" : "text-red-600 dark:text-red-400"
+            ), children: [
+              workspace.uptimePercentage.toFixed(1),
+              "%"
+            ] }),
+            workspace.uptimeDetails && workspace.uptimeDetails.expectedMinutes > workspace.uptimeDetails.actualMinutes && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400 dark:text-gray-400", children: "\u2022" }),
+            workspace.uptimeDetails && workspace.uptimeDetails.expectedMinutes > workspace.uptimeDetails.actualMinutes && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+              Math.max(0, workspace.uptimeDetails.expectedMinutes - workspace.uptimeDetails.actualMinutes),
+              "m down"
+            ] })
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: workspace.timeSinceLastUpdate }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("h-2 w-2 rounded-full", config.dot) })
         ] })
@@ -29057,18 +29303,18 @@ var DashboardHeader = React19.memo(({ lineTitle, className = "", headerControls
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-row items-center justify-between w-full ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2 md:gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base sm:text-xl md:text-2xl lg:text-3xl font-bold text-gray-800 tracking-tight leading-none", children: lineTitle }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 w-1 sm:h-1.5 sm:w-1.5 md:h-2 md:w-2 rounded-full bg-green-500 animate-pulse ring-1 sm:ring-2 ring-green-500/30 ring-offset-1" })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-2 md:gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-bold text-gray-800 tracking-tight leading-none", children: lineTitle }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-1.5 sm:h-1.5 sm:w-1.5 md:h-2 md:w-2 rounded-full bg-green-500 animate-pulse ring-2 sm:ring-2 ring-green-500/30 ring-offset-1" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 inline-flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-medium text-gray-600", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 inline-flex items-center gap-2 sm:gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs sm:text-sm font-medium text-gray-600", children: [
           /* @__PURE__ */ jsxRuntime.jsx(ISTTimer2, {}),
           " IST"
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-600", children: getShiftIcon() }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-gray-600", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm font-medium text-gray-600", children: [
             getShiftName(),
             " Shift"
           ] })
@@ -29079,9 +29325,9 @@ var DashboardHeader = React19.memo(({ lineTitle, className = "", headerControls
   ] });
 });
 DashboardHeader.displayName = "DashboardHeader";
-var NoWorkspaceData = React19.memo(({ message = "No workspace data available", className = "" }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-full items-center justify-center ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-white p-4 shadow-md", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2 text-gray-500", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }),
-  /* @__PURE__ */ jsxRuntime.jsx("span", { children: message })
+var NoWorkspaceData = React19.memo(({ message = "No workspace data available", className = "" }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-full items-center justify-center ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-white p-5 sm:p-4 shadow-md", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3 sm:space-x-2 text-gray-500", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6 sm:h-5 sm:w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }),
+  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base sm:text-sm", children: message })
 ] }) }) }));
 NoWorkspaceData.displayName = "NoWorkspaceData";
 var WorkspaceMonthlyDataFetcher = ({
@@ -29206,10 +29452,10 @@ var HamburgerButton = ({
     "button",
     {
       type: "button",
-      className: `md:hidden p-2 rounded-md text-gray-500 hover:text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${className}`,
+      className: `md:hidden p-2.5 rounded-lg text-gray-600 hover:text-gray-900 hover:bg-gray-100 active:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors ${className}`,
       onClick,
       "aria-label": ariaLabel,
-      children: /* @__PURE__ */ jsxRuntime.jsx(outline.Bars3Icon, { className: "w-6 h-6" })
+      children: /* @__PURE__ */ jsxRuntime.jsx(outline.Bars3Icon, { className: "w-7 h-7" })
     }
   );
 };
@@ -29740,28 +29986,189 @@ var SideNavBar = React19.memo(({
       }
     ) })
   ] });
+  const MobileNavigationContent = () => {
+    const isActive = (path) => {
+      if (path === "/" && pathname === "/") return true;
+      if (path !== "/" && pathname.startsWith(path)) return true;
+      return false;
+    };
+    const getMobileButtonClass = (path) => {
+      const active = isActive(path);
+      return `w-full flex items-center gap-3 px-5 py-3.5 rounded-lg transition-colors active:scale-[0.98] ${active ? "bg-blue-50 text-blue-700" : "text-gray-700 hover:bg-gray-100 active:bg-gray-200"}`;
+    };
+    const getIconClass = (path) => {
+      const active = isActive(path);
+      return `w-7 h-7 ${active ? "text-blue-600" : "text-gray-600"}`;
+    };
+    const handleMobileNavClick = (handler) => {
+      return () => {
+        handler();
+        onMobileMenuClose?.();
+      };
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "px-5 py-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: handleMobileNavClick(handleHomeClick),
+          className: getMobileButtonClass("/"),
+          "aria-label": "Home",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(outline.HomeIcon, { className: getIconClass("/") }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium", children: "Home" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleMobileNavClick(handleLeaderboardClick),
+            className: getMobileButtonClass("/leaderboard"),
+            "aria-label": "Leaderboard",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.TrophyIcon, { className: getIconClass("/leaderboard") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium", children: "Leaderboard" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleMobileNavClick(handleKPIsClick),
+            className: getMobileButtonClass("/kpis"),
+            "aria-label": "Lines",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.ChartBarIcon, { className: getIconClass("/kpis") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium", children: "Lines" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleMobileNavClick(handleTargetsClick),
+            className: getMobileButtonClass("/targets"),
+            "aria-label": "Targets",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.AdjustmentsHorizontalIcon, { className: getIconClass("/targets") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium", children: "Targets" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleMobileNavClick(handleShiftsClick),
+            className: getMobileButtonClass("/shifts"),
+            "aria-label": "Shift Management",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.ClockIcon, { className: getIconClass("/shifts") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium", children: "Shifts" })
+            ]
+          }
+        ),
+        skuEnabled && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleMobileNavClick(handleSKUsClick),
+            className: getMobileButtonClass("/skus"),
+            "aria-label": "SKU Management",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.CubeIcon, { className: getIconClass("/skus") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium", children: "SKUs" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleMobileNavClick(handleAIAgentClick),
+            className: getMobileButtonClass("/ai-agent"),
+            "aria-label": "AI Manufacturing Expert",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { className: getIconClass("/ai-agent") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium", children: "Axel AI" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleMobileNavClick(handleHelpClick),
+            className: getMobileButtonClass("/help"),
+            "aria-label": "Help & Support",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.QuestionMarkCircleIcon, { className: getIconClass("/help") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium", children: "Help" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleMobileNavClick(handleHealthClick),
+            className: getMobileButtonClass("/health"),
+            "aria-label": "System Health",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.HeartIcon, { className: getIconClass("/health") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium", children: "System Health" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-8 pt-6 border-t border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: handleMobileNavClick(handleProfileClick),
+          className: getMobileButtonClass("/profile"),
+          "aria-label": "Profile & Settings",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(outline.UserCircleIcon, { className: getIconClass("/profile") }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium", children: "Profile" })
+          ]
+        }
+      ) })
+    ] });
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("aside", { className: `hidden md:flex w-20 h-screen bg-white shadow-lg border-r border-gray-100 flex-col items-center fixed ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(NavigationContent, {}) }),
-    isMobileMenuOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: "md:hidden fixed inset-0 bg-black bg-opacity-50 z-40",
+          className: `md:hidden fixed inset-0 bg-black/60 backdrop-blur-sm z-40 transition-opacity duration-300 ease-in-out ${isMobileMenuOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"}`,
           onClick: onMobileMenuClose,
           "aria-hidden": "true"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "md:hidden fixed inset-y-0 left-0 w-20 bg-white shadow-lg border-r border-gray-100 flex flex-col items-center z-50", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: onMobileMenuClose,
-            className: "p-2 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500",
-            "aria-label": "Close menu",
-            children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "w-5 h-5" })
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NavigationContent, {})
+      /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: `md:hidden fixed inset-y-0 left-0 w-72 xs:w-80 bg-white shadow-2xl flex flex-col z-50 transform transition-transform duration-300 ease-in-out ${isMobileMenuOpen ? "translate-x-0" : "-translate-x-full"}`, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-white", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: "/optifye-logo.png",
+              alt: "Optifye",
+              className: "w-11 h-11 object-contain",
+              onError: (e) => {
+                e.currentTarget.style.display = "none";
+                if (e.currentTarget.parentElement) {
+                  e.currentTarget.parentElement.innerHTML = '<span class="text-blue-600 font-bold text-xl">Optifye</span>';
+                }
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: onMobileMenuClose,
+              className: "p-2.5 rounded-lg text-gray-600 hover:text-gray-900 hover:bg-gray-100 active:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all active:scale-95",
+              "aria-label": "Close menu",
+              children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "w-7 h-7" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(MobileNavigationContent, {}) })
       ] })
     ] })
   ] });
@@ -29853,17 +30260,39 @@ var MainLayout = ({
   logo
 }) => {
   const router$1 = router.useRouter();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = React19.useState(false);
+  const handleMobileMenuOpen = () => setIsMobileMenuOpen(true);
+  const handleMobileMenuClose = () => setIsMobileMenuOpen(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `min-h-screen ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("header", { className: "md:hidden bg-white border-b border-gray-200 shadow-sm px-5 py-3.5 flex items-center justify-between sticky top-0 z-40", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(HamburgerButton, { onClick: handleMobileMenuOpen }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: "/optifye-logo.png",
+          alt: "Optifye",
+          className: "h-9 w-9 object-contain",
+          onError: (e) => {
+            e.currentTarget.style.display = "none";
+            if (e.currentTarget.parentElement) {
+              e.currentTarget.parentElement.innerHTML = '<span class="text-blue-600 font-bold text-lg">Optifye</span>';
+            }
+          }
+        }
+      ) })
+    ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       SideNavBar,
       {
         navItems,
         currentPathname: router$1.pathname,
         currentQuery: router$1.query,
-        logo
+        logo,
+        isMobileMenuOpen,
+        onMobileMenuClose: handleMobileMenuClose
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("main", { className: "ml-20 bg-gray-50 min-h-screen", children })
+    /* @__PURE__ */ jsxRuntime.jsx("main", { className: "md:ml-20 bg-gray-50 min-h-screen transition-all duration-300", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full", children }) })
   ] });
 };
 var Header = ({
@@ -32873,7 +33302,7 @@ function HomeView({
       return null;
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(Select, { onValueChange: handleLineChange, defaultValue: selectedLineId, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-full sm:w-[200px] bg-white border border-gray-200 shadow-sm rounded-md h-9 text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select a line" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-full sm:w-[200px] bg-white border border-gray-200 shadow-sm rounded-md h-11 sm:h-9 text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select a line" }) }),
       /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: "z-50 bg-white shadow-lg border border-gray-200 rounded-md", children: availableLineIds.map((id3) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: id3, children: lineNames[id3] || (id3 === factoryViewId ? "All Lines" : `Line ${id3.substring(0, 4)}`) }, id3)) })
     ] });
   }, [availableLineIds, handleLineChange, selectedLineId, lineNames, factoryViewId, allLineIds.length]);
@@ -32885,7 +33314,7 @@ function HomeView({
   if (errorMessage || displayNamesError) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-screen items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-white p-6 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3 text-red-500", children: [
       /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-lg font-medium", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-base sm:text-lg font-medium", children: [
         "Error: ",
         errorMessage || displayNamesError?.message
       ] })
@@ -32899,7 +33328,7 @@ function HomeView({
       animate: { opacity: 1 },
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-1", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "flex flex-1 flex-col", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-30 sm:static bg-white shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between px-3 sm:px-6 lg:px-8 py-1.5 sm:py-2.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative sm:sticky sm:top-0 z-30 bg-white shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between px-4 sm:px-6 lg:px-8 py-3 sm:py-2.5", children: /* @__PURE__ */ jsxRuntime.jsx(
             DashboardHeader,
             {
               lineTitle,
@@ -32908,8 +33337,8 @@ function HomeView({
             }
           ) }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto sm:overflow-hidden relative", children: [
-            lineSelectorComponent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-3 top-2 sm:right-6 sm:top-3 z-30", children: lineSelectorComponent }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full sm:h-full min-h-[calc(100vh-80px)] sm:min-h-0", children: memoizedWorkspaceMetrics.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+            lineSelectorComponent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-4 top-3 sm:right-6 sm:top-3 z-30", children: lineSelectorComponent }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full sm:h-full min-h-[calc(100vh-120px)] sm:min-h-0", children: memoizedWorkspaceMetrics.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
               motion.div,
               {
                 initial: { opacity: 0, scale: 0.98 },
@@ -38419,8 +38848,8 @@ var WorkspaceHealthView = ({
     }
   };
   const getUptimeColor = (percentage) => {
-    if (percentage >= 99) return "text-green-600 dark:text-green-400";
-    if (percentage >= 95) return "text-yellow-600 dark:text-yellow-400";
+    if (percentage >= 97) return "text-green-600 dark:text-green-400";
+    if (percentage >= 90) return "text-yellow-600 dark:text-yellow-400";
     return "text-red-600 dark:text-red-400";
   };
   if (loading && !summary) {
@@ -38508,20 +38937,21 @@ var WorkspaceHealthView = ({
           className: "grid grid-cols-2 sm:grid-cols-2 md:grid-cols-5 gap-2 sm:gap-3 lg:gap-4",
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "col-span-2 sm:col-span-2 md:col-span-2 bg-white", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400", children: "Overall System Status" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400", children: "Overall System Uptime Today" }) }),
               /* @__PURE__ */ jsxRuntime.jsxs(CardContent2, { children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx("text-3xl font-bold", getUptimeColor(summary.uptimePercentage)), children: [
                     summary.uptimePercentage.toFixed(1),
                     "%"
                   ] }),
-                  summary.uptimePercentage >= 99 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { className: "h-5 w-5 text-green-500" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingDown, { className: "h-5 w-5 text-red-500" })
+                  summary.uptimePercentage >= 97 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { className: "h-5 w-5 text-green-500" }) : summary.uptimePercentage >= 90 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { className: "h-5 w-5 text-yellow-500" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingDown, { className: "h-5 w-5 text-red-500" })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Average uptime across all workspaces" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
                   summary.healthyWorkspaces,
                   " of ",
                   summary.totalWorkspaces,
-                  " workspaces healthy"
+                  " workspaces online"
                 ] })
               ] })
             ] }),