@optifye/dashboard-core 6.10.27 → 6.10.29

package/dist/index.mjs

@@ -10,7 +10,7 @@ import { createClient, REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js';
 import Hls, { Events, ErrorTypes } from 'hls.js';
 import useSWR from 'swr';
 import { memo, noop, warning, invariant, progress, secondsToMilliseconds, millisecondsToSeconds } from 'motion-utils';
-import { Camera, ChevronDown, ChevronUp, Check, Map as Map$1, Video, ShieldCheck, Star, Award, Filter, X, Coffee, Plus, ArrowLeft, Clock, Calendar, Save, AlertCircle, Loader2, Minus, ArrowDown, ArrowUp, ChevronLeft, ChevronRight, TrendingUp, Sparkles, Pause, Play, Wrench, XCircle, Package, UserX, Zap, HelpCircle, AlertTriangle, Tag, Palette, CheckCircle2, RefreshCw, TrendingDown, FolderOpen, Folder, Sliders, Activity, Layers, Search, Edit2, ArrowRight, CheckCircle, User, Users, Shield, Building2, Mail, Lock, Info, Share2, Trophy, Target, Download, Sun, Moon, MousePointer, UserPlus, UserCog, Trash2, Eye, MoreVertical, BarChart3, Pencil, UserCheck, LogOut, MessageSquare, Menu, Send, Copy, Settings, LifeBuoy, EyeOff, UserCircle } from 'lucide-react';
+import { Camera, ChevronDown, ChevronUp, Check, Map as Map$1, Video, ShieldCheck, Star, Award, Filter, X, Coffee, Plus, ArrowLeft, Clock, Calendar, Save, AlertCircle, Loader2, Minus, ArrowDown, ArrowUp, ChevronLeft, ChevronRight, TrendingUp, Sparkles, Pause, Play, Wrench, XCircle, Package, UserX, Zap, HelpCircle, AlertTriangle, Tag, Palette, CheckCircle2, RefreshCw, TrendingDown, FolderOpen, Folder, Sliders, Activity, Layers, Search, Edit2, ArrowRight, CheckCircle, User, Users, Shield, Building2, Mail, Lock, Info, Share2, Trophy, Target, Download, Sun, Moon, MousePointer, UserPlus, UserCog, Trash2, Eye, MoreVertical, BarChart3, Pencil, UserCheck, LogOut, MessageSquare, Menu, Send, Copy, Settings, LifeBuoy, EyeOff, UserCircle, Flame, Crown, Medal } from 'lucide-react';
 import { toast } from 'sonner';
 import { BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, ReferenceLine, Tooltip, Legend, Bar, LabelList, ResponsiveContainer, LineChart as LineChart$1, Line, PieChart, Pie, Cell, ComposedChart, Area, ScatterChart, Scatter } from 'recharts';
 import { Slot } from '@radix-ui/react-slot';
@@ -5049,6 +5049,145 @@ var getAnonClient = () => {
   });
 };
 
+// src/lib/auth/session.ts
+var DEFAULT_MIN_VALIDITY_MS = 6e4;
+var refreshPromises = /* @__PURE__ */ new WeakMap();
+var isInvalidRefreshTokenError = (error) => {
+  if (!error || typeof error !== "object") return false;
+  const message = error.message?.toLowerCase() || "";
+  if (!message.includes("refresh token")) return false;
+  return message.includes("invalid") || message.includes("not found") || message.includes("revoked");
+};
+var isSessionValid = (session, minValidityMs = 0) => {
+  if (!session) return false;
+  if (!session.expires_at) return true;
+  return session.expires_at * 1e3 - Date.now() > minValidityMs;
+};
+var buildAuthHeaders = (headers, token) => {
+  const merged = new Headers(headers || {});
+  merged.set("Authorization", `Bearer ${token}`);
+  return merged;
+};
+var redirectToLogin = (reason) => {
+  if (typeof window === "undefined") return;
+  if (window.location.pathname === "/login") return;
+  const returnTo = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+  const url = new URL("/login", window.location.origin);
+  if (returnTo) {
+    url.searchParams.set("returnTo", returnTo);
+  }
+  if (reason) {
+    url.searchParams.set("reason", reason);
+  }
+  window.location.assign(url.toString());
+};
+var handleAuthRequired = async (supabase, reason) => {
+  try {
+    await supabase.auth.signOut({ scope: "local" });
+  } catch (error) {
+    console.error("[Auth] Error clearing local session:", error);
+  }
+  redirectToLogin(reason);
+};
+var refreshSessionSingleFlight = async (supabase) => {
+  const existing = refreshPromises.get(supabase);
+  if (existing) {
+    return existing;
+  }
+  const refreshPromise = (async () => {
+    let refreshError = null;
+    try {
+      const { data, error } = await supabase.auth.refreshSession();
+      if (error) {
+        refreshError = error;
+      } else if (isSessionValid(data.session ?? null, 0)) {
+        return { session: data.session ?? null, error: null, invalidRefreshToken: false };
+      }
+    } catch (error) {
+      refreshError = error;
+    }
+    const {
+      data: { session }
+    } = await supabase.auth.getSession();
+    if (isSessionValid(session, 0)) {
+      return { session, error: refreshError, invalidRefreshToken: false };
+    }
+    const invalidRefreshToken = isInvalidRefreshTokenError(refreshError);
+    if (invalidRefreshToken) {
+      try {
+        await supabase.auth.signOut({ scope: "local" });
+      } catch (error) {
+        console.error("[Auth] Error clearing invalid refresh token session:", error);
+      }
+    }
+    return { session: null, error: refreshError, invalidRefreshToken };
+  })();
+  refreshPromises.set(supabase, refreshPromise);
+  try {
+    return await refreshPromise;
+  } finally {
+    refreshPromises.delete(supabase);
+  }
+};
+var getAccessTokenOrRedirect = async (supabase, options = {}) => {
+  const {
+    minValidityMs = DEFAULT_MIN_VALIDITY_MS,
+    forceRefresh = false,
+    redirectOnFailure = true,
+    redirectReason = "session_expired"
+  } = options;
+  if (!forceRefresh) {
+    const {
+      data: { session }
+    } = await supabase.auth.getSession();
+    if (isSessionValid(session, minValidityMs) && session?.access_token) {
+      return session.access_token;
+    }
+  }
+  const refreshResult = await refreshSessionSingleFlight(supabase);
+  if (refreshResult.session?.access_token) {
+    return refreshResult.session.access_token;
+  }
+  if (redirectOnFailure) {
+    if (refreshResult.invalidRefreshToken || !refreshResult.error && !refreshResult.session) {
+      await handleAuthRequired(supabase, redirectReason);
+    }
+  }
+  throw new Error("Authentication required");
+};
+var fetchWithSupabaseAuth = async (supabase, input, options = {}) => {
+  const {
+    retryOnUnauthorized = true,
+    minValidityMs,
+    redirectReason,
+    ...fetchOptions
+  } = options;
+  const token = await getAccessTokenOrRedirect(supabase, {
+    minValidityMs,
+    redirectReason
+  });
+  const response = await fetch(input, {
+    ...fetchOptions,
+    headers: buildAuthHeaders(fetchOptions.headers, token)
+  });
+  if (response.status !== 401 || !retryOnUnauthorized) {
+    return response;
+  }
+  const refreshedToken = await getAccessTokenOrRedirect(supabase, {
+    forceRefresh: true,
+    redirectReason
+  });
+  const retryResponse = await fetch(input, {
+    ...fetchOptions,
+    headers: buildAuthHeaders(fetchOptions.headers, refreshedToken)
+  });
+  if (retryResponse.status === 401) {
+    await handleAuthRequired(supabase, redirectReason || "unauthorized");
+    throw new Error("Authentication required");
+  }
+  return retryResponse;
+};
+
 // src/lib/api/s3-clips-supabase.ts
 var cachedClient = null;
 var cachedConfig = null;
@@ -5074,17 +5213,6 @@ var getSupabaseClient = () => {
   }
   return cachedClient;
 };
-var getAuthToken3 = async () => {
-  try {
-    const supabase = getSupabaseClient();
-    const { data: { session } } = await supabase.auth.getSession();
-    console.log("[S3ClipsSupabase] Auth session exists:", !!session, "has token:", !!session?.access_token);
-    return session?.access_token || null;
-  } catch (error) {
-    console.error("[S3ClipsSupabase] Error getting auth token:", error);
-    return null;
-  }
-};
 var S3ClipsSupabaseService = class {
   constructor(config) {
     this.requestCache = /* @__PURE__ */ new Map();
@@ -5112,23 +5240,20 @@ var S3ClipsSupabaseService = class {
    * Fetch with authentication and error handling
    */
   async fetchWithAuth(endpoint, body) {
-    const token = await getAuthToken3();
-    if (!token) {
-      throw new Error("Authentication required");
-    }
+    const supabase = getSupabaseClient();
     const apiEndpoint = "/api/clips/supabase";
     const requestBody = {
       ...body,
       action: endpoint.replace("/api/clips/supabase/", "")
     };
     console.log(`[S3ClipsSupabase] Making request to ${apiEndpoint} with action: ${requestBody.action}, body:`, requestBody);
-    const response = await fetch(apiEndpoint, {
+    const response = await fetchWithSupabaseAuth(supabase, apiEndpoint, {
       method: "POST",
       headers: {
-        "Authorization": `Bearer ${token}`,
         "Content-Type": "application/json"
       },
-      body: JSON.stringify(requestBody)
+      body: JSON.stringify(requestBody),
+      redirectReason: "session_expired"
     });
     console.log(`[S3ClipsSupabase] Response status: ${response.status}`);
     if (!response.ok) {
@@ -6923,11 +7048,103 @@ var UserManagementService = class {
       throw error;
     }
   }
+  /**
+   * Update a user's profile (name + photo)
+   * @param input - Update profile input
+   */
+  async updateUserProfile(input) {
+    try {
+      const token = await this.getAuthToken();
+      const backendUrl = this.getBackendUrl();
+      console.log("[UserManagementService] Updating user profile:", input);
+      const response = await fetch(
+        `${backendUrl}/api/users/profile`,
+        {
+          method: "PUT",
+          headers: {
+            "Authorization": `Bearer ${token}`,
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify(input)
+        }
+      );
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(`Failed to update user profile: ${errorData.detail || response.statusText}`);
+      }
+      console.log("[UserManagementService] User profile updated successfully");
+    } catch (error) {
+      console.error("[UserManagementService] Error updating user profile:", error);
+      throw error;
+    }
+  }
 };
 var createUserManagementService = (supabase) => {
   return new UserManagementService(supabase);
 };
 
+// src/lib/services/storageService.ts
+var AVATAR_BUCKET = "avatars";
+var createStorageService = (supabase) => ({
+  /**
+   * Upload an avatar image to Supabase Storage
+   * @param userId - The user ID to associate the avatar with
+   * @param file - The file to upload
+   * @returns The public URL of the uploaded avatar
+   */
+  async uploadAvatar(userId, file) {
+    const fileExt = file.name.split(".").pop()?.toLowerCase() || "jpg";
+    const fileName = `${userId}/${Date.now()}.${fileExt}`;
+    const { error: uploadError } = await supabase.storage.from(AVATAR_BUCKET).upload(fileName, file, {
+      cacheControl: "3600",
+      upsert: true
+    });
+    if (uploadError) {
+      console.error("[StorageService] Upload failed:", uploadError);
+      throw uploadError;
+    }
+    const { data: publicUrlData } = supabase.storage.from(AVATAR_BUCKET).getPublicUrl(fileName);
+    if (!publicUrlData?.publicUrl) {
+      throw new Error("Failed to get public URL for uploaded avatar");
+    }
+    return publicUrlData.publicUrl;
+  },
+  /**
+   * Delete an avatar from Supabase Storage
+   * @param filePath - The path to the file in the bucket (e.g., "userId/timestamp.jpg")
+   */
+  async deleteAvatar(filePath) {
+    const { error } = await supabase.storage.from(AVATAR_BUCKET).remove([filePath]);
+    if (error) {
+      console.error("[StorageService] Delete failed:", error);
+      throw error;
+    }
+  },
+  /**
+   * Get the public URL for an avatar
+   * @param filePath - The path to the file in the bucket
+   * @returns The public URL
+   */
+  getAvatarPublicUrl(filePath) {
+    const { data } = supabase.storage.from(AVATAR_BUCKET).getPublicUrl(filePath);
+    return data?.publicUrl || "";
+  },
+  /**
+   * Extract the file path from a full public URL
+   * @param publicUrl - The full public URL
+   * @returns The file path within the bucket, or null if not an avatar URL
+   */
+  extractFilePathFromUrl(publicUrl) {
+    try {
+      const url = new URL(publicUrl);
+      const pathParts = url.pathname.split(`/storage/v1/object/public/${AVATAR_BUCKET}/`);
+      return pathParts.length > 1 ? pathParts[1] : null;
+    } catch {
+      return null;
+    }
+  }
+});
+
 // src/lib/constants/idleTimeColors.ts
 var IDLE_TIME_REASON_COLORS = {
   "Operator Absent": {
@@ -7375,6 +7592,48 @@ var SessionTracker = class {
 function createSessionTracker(config) {
   return new SessionTracker(config);
 }
+
+// src/lib/services/awardsService.ts
+var awardsService = {
+  async getMyAwards(supabase) {
+    const data = await fetchBackendJson(supabase, "/api/awards/me");
+    return data?.awards || [];
+  },
+  async getNotifications(supabase) {
+    const data = await fetchBackendJson(
+      supabase,
+      "/api/awards/notifications"
+    );
+    return data?.notifications || [];
+  },
+  async markNotificationsRead(supabase, notificationIds) {
+    if (notificationIds.length === 0) return 0;
+    const data = await fetchBackendJson(supabase, "/api/awards/notifications/mark-read", {
+      method: "POST",
+      body: JSON.stringify({ notification_ids: notificationIds })
+    });
+    return data?.updated ?? 0;
+  },
+  async getTopPerformer(supabase) {
+    const data = await fetchBackendJson(
+      supabase,
+      "/api/awards/top-performer"
+    );
+    return data?.top_performer ?? null;
+  }
+};
+
+// src/lib/services/weeklyTopPerformerService.ts
+var weeklyTopPerformerService = {
+  async getWeeklyTopPerformer(supabase, companyId) {
+    const query = companyId ? `?company_id=${encodeURIComponent(companyId)}` : "";
+    const data = await fetchBackendJson(
+      supabase,
+      `/api/dashboard/weekly-top-performer${query}`
+    );
+    return data?.top_performer ?? null;
+  }
+};
 var SupabaseContext = createContext(void 0);
 var SupabaseProvider = ({ client, children }) => {
   _setSupabaseInstance(client);
@@ -7470,6 +7729,15 @@ var useSessionKeepAlive = (options = {}) => {
     };
   }, [enabled, intervalMs, supabase]);
 };
+var isAuthError = (err) => {
+  if (!err || typeof err !== "object") return false;
+  const message = err.message?.toLowerCase() || "";
+  const status = err.status;
+  if (status === 401 || status === 403) {
+    return true;
+  }
+  return message.includes("jwt expired") || message.includes("invalid token") || message.includes("unauthorized") || message.includes("http 401") || message.includes("status: 401");
+};
 var AuthContext = createContext({
   session: null,
   user: null,
@@ -7497,7 +7765,7 @@ var AuthProvider = ({ children }) => {
   const isFetchingRef = useRef(false);
   const lastProcessedSessionRef = useRef(null);
   const hasAuthenticatedRef = useRef(false);
-  const fetchSession = useCallback(async (supabaseSession, isReauth = false) => {
+  const fetchSession = useCallback(async (supabaseSession, isReauth = false, allowRetry = true) => {
     if (isFetchingRef.current) {
       console.log("[AuthContext] Already fetching, skipping duplicate request");
       return;
@@ -7534,13 +7802,19 @@ var AuthProvider = ({ children }) => {
       });
     } catch (err) {
       console.error("[AuthContext] Failed to fetch session:", err);
-      if (err.message?.includes("JWT expired") || err.message?.includes("invalid token") || err.message?.includes("token") || err.message?.includes("401")) {
-        console.log("[AuthContext] Token expired or invalid, clearing session and redirecting to login");
-        setUser(null);
-        setSession(null);
-        setError(new Error("Your session has expired. Please log in again."));
-        await supabase.auth.signOut();
-        router.replace("/login");
+      if (allowRetry && isAuthError(err)) {
+        console.warn("[AuthContext] Auth error while fetching session, attempting refresh...");
+        const refreshResult = await refreshSessionSingleFlight(supabase);
+        if (refreshResult.session?.access_token) {
+          await fetchSession(refreshResult.session, true, false);
+          return;
+        }
+        if (refreshResult.invalidRefreshToken) {
+          console.warn("[AuthContext] Refresh token invalid, redirecting to login");
+          await handleAuthRequired(supabase, "session_expired");
+          return;
+        }
+        setError(new Error("Unable to refresh session. Please try again."));
         return;
       }
       setError(err);
@@ -7559,7 +7833,7 @@ var AuthProvider = ({ children }) => {
       isFetchingRef.current = false;
       console.log("[AuthContext] Loading set to false", { isReauth });
     }
-  }, [supabase, router]);
+  }, [supabase]);
   const markFirstLoginCompleted = useCallback(async () => {
     if (!user?.id || !supabase) return false;
     try {
@@ -7610,7 +7884,7 @@ var AuthProvider = ({ children }) => {
     if (!session || !supabase) {
       return;
     }
-    const monitorTokenExpiry = () => {
+    const monitorTokenExpiry = async () => {
       const expiresAt = session.expires_at;
       if (!expiresAt) {
         console.warn("[AuthContext] Session has no expiry time");
@@ -7621,19 +7895,31 @@ var AuthProvider = ({ children }) => {
       const timeUntilExpiry = expiryTime - now4;
       const minutesUntilExpiry = Math.floor(timeUntilExpiry / 6e4);
       console.log(`[AuthContext] Token expires in ${minutesUntilExpiry} minutes`);
-      if (minutesUntilExpiry < 5 && minutesUntilExpiry > 0) {
+      if (minutesUntilExpiry < 5 && timeUntilExpiry > 0) {
         console.warn("[AuthContext] Token expiring soon, attempting refresh...");
-        supabase.auth.refreshSession().then(({ data, error: error2 }) => {
-          if (error2) {
-            console.error("[AuthContext] Token refresh failed:", error2);
-          } else {
-            console.log("[AuthContext] Token refreshed successfully");
-          }
-        });
+        const refreshResult = await refreshSessionSingleFlight(supabase);
+        if (isSessionValid(refreshResult.session, 0)) {
+          setSession(refreshResult.session);
+          console.log("[AuthContext] Token refreshed successfully");
+          return;
+        }
+        if (refreshResult.invalidRefreshToken) {
+          console.error("[AuthContext] Refresh token invalid during proactive refresh");
+          await handleAuthRequired(supabase, "session_expired");
+        }
       }
-      if (timeUntilExpiry < 0) {
-        console.error("[AuthContext] Token has expired, logging out");
-        signOut();
+      if (timeUntilExpiry <= 0) {
+        console.warn("[AuthContext] Token has expired, attempting refresh...");
+        const refreshResult = await refreshSessionSingleFlight(supabase);
+        if (isSessionValid(refreshResult.session, 0)) {
+          setSession(refreshResult.session);
+          console.log("[AuthContext] Token refreshed after expiry");
+          return;
+        }
+        if (refreshResult.invalidRefreshToken) {
+          console.error("[AuthContext] Refresh token invalid after expiry");
+          await handleAuthRequired(supabase, "session_expired");
+        }
       }
     };
     monitorTokenExpiry();
@@ -7641,7 +7927,7 @@ var AuthProvider = ({ children }) => {
     return () => {
       clearInterval(intervalId);
     };
-  }, [session, supabase, signOut]);
+  }, [session, supabase]);
   useEffect(() => {
     if (!supabase) {
       console.log("[AuthContext] No Supabase client, skipping auth initialization");
@@ -14784,7 +15070,7 @@ function useAccessControl() {
   const userRole = useMemo(() => {
     if (!user?.role_level) return null;
     const roleLevel = user.role_level;
-    if (roleLevel === "owner" || roleLevel === "plant_head" || roleLevel === "supervisor" || roleLevel === "optifye") {
+    if (roleLevel === "owner" || roleLevel === "it" || roleLevel === "plant_head" || roleLevel === "supervisor" || roleLevel === "optifye") {
       return roleLevel;
     }
     return "supervisor";
@@ -14836,6 +15122,21 @@ function useAccessControl() {
       "/factory-view",
       "/team-management"
     ],
+    it: [
+      "/",
+      "/leaderboard",
+      "/kpis",
+      "/targets",
+      "/shifts",
+      "/supervisor-management",
+      "/skus",
+      "/help",
+      "/health",
+      "/profile",
+      "/workspace",
+      "/factory-view",
+      "/team-management"
+    ],
     plant_head: [
       "/",
       "/leaderboard",
@@ -14917,7 +15218,7 @@ function useTeamManagementPermissions() {
     canAssignLines: (targetUser) => {
       if (!currentRole) return false;
       if (currentRole === "optifye") return true;
-      if (currentRole === "owner" && targetUser.role_level === "supervisor") {
+      if ((currentRole === "owner" || currentRole === "it") && targetUser.role_level === "supervisor") {
         return true;
       }
       if (currentRole === "plant_head" && targetUser.role_level === "supervisor") {
@@ -14931,7 +15232,7 @@ function useTeamManagementPermissions() {
     canAssignFactories: (targetUser) => {
       if (!currentRole) return false;
       if (currentRole === "optifye") return true;
-      if (currentRole === "owner" && targetUser.role_level === "plant_head") {
+      if ((currentRole === "owner" || currentRole === "it") && targetUser.role_level === "plant_head") {
         return true;
       }
       return false;
@@ -14942,7 +15243,7 @@ function useTeamManagementPermissions() {
     canChangeRole: (targetUser) => {
       if (!currentRole) return false;
       if (currentRole === "optifye") return true;
-      if (currentRole === "owner") {
+      if (currentRole === "owner" || currentRole === "it") {
         return ["plant_head", "supervisor"].includes(targetUser.role_level);
       }
       return false;
@@ -14953,7 +15254,7 @@ function useTeamManagementPermissions() {
     canRemoveUser: (targetUser) => {
       if (!currentRole) return false;
       if (currentRole === "optifye") return true;
-      if (currentRole === "owner") {
+      if (currentRole === "owner" || currentRole === "it") {
         return ["plant_head", "supervisor"].includes(targetUser.role_level);
       }
       return false;
@@ -14965,9 +15266,12 @@ function useTeamManagementPermissions() {
     availableRolesToAssign: () => {
       if (!currentRole) return [];
       if (currentRole === "optifye") {
-        return ["owner", "plant_head", "supervisor"];
+        return ["owner", "it", "plant_head", "supervisor"];
       }
       if (currentRole === "owner") {
+        return ["it", "plant_head", "supervisor"];
+      }
+      if (currentRole === "it") {
         return ["plant_head", "supervisor"];
       }
       if (currentRole === "plant_head") {
@@ -14982,6 +15286,9 @@ function useTeamManagementPermissions() {
       if (!currentRole) return false;
       if (currentRole === "optifye") return true;
       if (currentRole === "owner") {
+        return ["it", "plant_head", "supervisor"].includes(role);
+      }
+      if (currentRole === "it") {
         return ["plant_head", "supervisor"].includes(role);
       }
       if (currentRole === "plant_head") {
@@ -15005,7 +15312,7 @@ function useTeamManagementPermissions() {
      * Should the assignment column be shown?
      */
     showAssignmentColumn: () => {
-      return !!currentRole && ["optifye", "owner", "plant_head"].includes(currentRole);
+      return !!currentRole && ["optifye", "owner", "it", "plant_head"].includes(currentRole);
     }
   };
 }
@@ -15077,7 +15384,7 @@ function useLineSupervisor(lineId) {
     try {
       setIsLoading(true);
       setError(null);
-      const { data, error: fetchError } = await supabase.from("user_roles").select("user_id, email, first_name, last_name, properties").eq("role_level", "supervisor");
+      const { data, error: fetchError } = await supabase.from("user_roles").select("user_id, email, first_name, last_name, properties, profile_photo_url").eq("role_level", "supervisor");
       if (fetchError) {
         console.error("[useLineSupervisor] Query error:", fetchError);
         throw fetchError;
@@ -15099,7 +15406,8 @@ function useLineSupervisor(lineId) {
             return {
               userId: supervisorData.user_id,
               email: supervisorData.email,
-              displayName
+              displayName,
+              profilePhotoUrl: supervisorData.profile_photo_url
             };
           });
           setSupervisors(allSupervisors);
@@ -15177,7 +15485,7 @@ var useSupervisorsByLineIds = (lineIds, options) => {
     try {
       setIsLoading(true);
       setError(null);
-      const { data, error: fetchError } = await supabase.from("user_roles").select("user_id, email, first_name, last_name, properties").eq("role_level", "supervisor");
+      const { data, error: fetchError } = await supabase.from("user_roles").select("user_id, email, first_name, last_name, properties, profile_photo_url").eq("role_level", "supervisor");
       if (fetchError) {
         throw fetchError;
       }
@@ -15195,7 +15503,8 @@ var useSupervisorsByLineIds = (lineIds, options) => {
         const supervisor = {
           userId: row.user_id,
           email,
-          displayName
+          displayName,
+          profilePhotoUrl: row.profile_photo_url
         };
         assignedLineIds.forEach((lineId) => {
           if (typeof lineId !== "string") return;
@@ -15464,7 +15773,7 @@ function useIdleTimeClipClassifications({
   enabled = true,
   limit = DEFAULT_LIMIT
 }) {
-  const { session } = useAuth();
+  const supabase = useSupabase();
   const [idleClips, setIdleClips] = useState([]);
   const [clipClassifications, setClipClassifications] = useState({});
   const [isLoading, setIsLoading] = useState(false);
@@ -15484,11 +15793,6 @@ function useIdleTimeClipClassifications({
       setIsLoading(false);
       return;
     }
-    if (!session?.access_token) {
-      setError("Not authenticated");
-      setIsLoading(false);
-      return;
-    }
     setIsLoading(true);
     setError(null);
     lastRequestKeyRef.current = requestKey;
@@ -15497,11 +15801,10 @@ function useIdleTimeClipClassifications({
       let page = 1;
       let hasMore = true;
       while (hasMore && page <= MAX_PAGES && collected.length < limit) {
-        const response = await fetch("/api/clips/supabase", {
+        const response = await fetchWithSupabaseAuth(supabase, "/api/clips/supabase", {
           method: "POST",
           headers: {
-            "Content-Type": "application/json",
-            "Authorization": `Bearer ${session.access_token}`
+            "Content-Type": "application/json"
           },
           body: JSON.stringify({
             action: "clip-metadata",
@@ -15511,7 +15814,8 @@ function useIdleTimeClipClassifications({
             category: "idle_time",
             page,
             limit
-          })
+          }),
+          redirectReason: "session_expired"
         });
         if (!response.ok) {
           throw new Error(`Idle clip metadata request failed: ${response.status}`);
@@ -15541,7 +15845,7 @@ function useIdleTimeClipClassifications({
         setIsLoading(false);
       }
     }
-  }, [enabled, workspaceId, date, shiftId, session?.access_token, requestKey, limit]);
+  }, [enabled, workspaceId, date, shiftId, requestKey, limit, supabase]);
   useEffect(() => {
     fetchIdleClips();
   }, [fetchIdleClips]);
@@ -15553,18 +15857,31 @@ function useIdleTimeClipClassifications({
     [idleClips]
   );
   useEffect(() => {
-    if (!enabled || idleClipIds.length === 0 || !session?.access_token) {
+    if (!enabled || idleClipIds.length === 0) {
       return;
     }
-    fetchClassifications(idleClipIds, session.access_token).then((classifications) => {
-      setClipClassifications((prev) => ({
-        ...prev,
-        ...classifications
-      }));
-    }).catch((err) => {
-      console.error("[useIdleTimeClipClassifications] Error fetching classifications:", err);
-    });
-  }, [enabled, idleClipIds, session?.access_token]);
+    let cancelled = false;
+    const fetchIdleClassifications = async () => {
+      try {
+        const token = await getAccessTokenOrRedirect(supabase, { redirectReason: "session_expired" });
+        if (cancelled) return;
+        const classifications = await fetchClassifications(idleClipIds, token);
+        if (cancelled) return;
+        setClipClassifications((prev) => ({
+          ...prev,
+          ...classifications
+        }));
+      } catch (err) {
+        if (!cancelled) {
+          console.error("[useIdleTimeClipClassifications] Error fetching classifications:", err);
+        }
+      }
+    };
+    fetchIdleClassifications();
+    return () => {
+      cancelled = true;
+    };
+  }, [enabled, idleClipIds, supabase]);
   useClassificationRealtimeUpdates({
     clipIds: idleClipIds,
     enabled: enabled && idleClipIds.length > 0,
@@ -15977,6 +16294,70 @@ var aggregateKPIsFromLineMetricsRows = (rows) => {
   };
 };
 
+// src/lib/utils/awards.ts
+var toNumber2 = (value) => {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string") {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+  return null;
+};
+var formatAwardMonth = (periodStart) => {
+  if (!periodStart) return "Unknown";
+  const date = /* @__PURE__ */ new Date(`${periodStart}T00:00:00`);
+  if (Number.isNaN(date.getTime())) return "Unknown";
+  return date.toLocaleDateString("en-US", { month: "long", year: "numeric" });
+};
+var getAwardTitle = (awardType) => {
+  switch (awardType) {
+    case "top_efficiency":
+      return "Top Performer";
+    case "most_improved":
+      return "Most Improved";
+    default:
+      return "Achievement";
+  }
+};
+var getAwardBadgeType = (awardType) => {
+  switch (awardType) {
+    case "top_efficiency":
+      return "gold";
+    case "most_improved":
+      return "silver";
+    default:
+      return "special";
+  }
+};
+var getAwardDescription = (award) => {
+  const metrics2 = award.metrics || {};
+  if (award.award_type === "top_efficiency") {
+    const avg = toNumber2(metrics2.avg_efficiency);
+    const lineCount = toNumber2(metrics2.line_count);
+    if (avg !== null) {
+      const lineSuffix = lineCount ? ` across ${lineCount} line${lineCount === 1 ? "" : "s"}` : "";
+      return `Average efficiency ${avg.toFixed(1)}%${lineSuffix}.`;
+    }
+    return "Highest average efficiency across assigned lines.";
+  }
+  if (award.award_type === "most_improved") {
+    const delta = toNumber2(metrics2.delta);
+    if (delta !== null) {
+      const sign = delta >= 0 ? "+" : "";
+      return `Improved by ${sign}${delta.toFixed(1)} points month-over-month.`;
+    }
+    return "Largest efficiency improvement across months.";
+  }
+  return void 0;
+};
+var getInitials = (name) => {
+  if (!name) return "TP";
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "TP";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+};
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -18815,6 +19196,59 @@ var createThrottledReload = (interval = 5e3, maxReloads = 3) => {
 };
 var throttledReloadDashboard = createThrottledReload(5e3, 3);
 
+// src/lib/utils/sentryContext.ts
+function getSentry() {
+  try {
+    return __require("@sentry/nextjs");
+  } catch {
+    return null;
+  }
+}
+function setSentryUserContext(user) {
+  const sentry = getSentry();
+  if (!sentry) return;
+  if (user) {
+    sentry.setUser({
+      id: user.id,
+      email: user.email
+    });
+    sentry.setTags({
+      company_id: user.company_id || "unknown",
+      role: user.role || "unknown",
+      role_level: user.role_level || "unknown"
+    });
+  } else {
+    sentry.setUser(null);
+    sentry.setTags({
+      company_id: void 0,
+      role: void 0,
+      role_level: void 0
+    });
+  }
+}
+function setSentryWorkspaceContext(config) {
+  const sentry = getSentry();
+  if (!sentry) return;
+  sentry.setTags({
+    workspace_company: config.companyId || "unknown",
+    workspace_factory: config.factoryId || "unknown",
+    factory_name: config.factoryName || "unknown"
+  });
+}
+function clearSentryContext() {
+  const sentry = getSentry();
+  if (!sentry) return;
+  sentry.setUser(null);
+  sentry.setTags({
+    company_id: void 0,
+    role: void 0,
+    role_level: void 0,
+    workspace_company: void 0,
+    workspace_factory: void 0,
+    factory_name: void 0
+  });
+}
+
 // src/lib/utils/index.ts
 var formatIdleTime = (idleTimeInSeconds) => {
   if (!idleTimeInSeconds || idleTimeInSeconds <= 0) {
@@ -26612,7 +27046,7 @@ var OptifyeLogoLoader = ({
   message,
   className
 }) => {
-  const sizeClasses = {
+  const sizeClasses3 = {
     sm: "w-10 h-10",
     // 40px
     md: "w-16 h-16",
@@ -26630,7 +27064,7 @@ var OptifyeLogoLoader = ({
         /* @__PURE__ */ jsx(
           Logo,
           {
-            className: `${sizeClasses[size]} object-contain animate-pulse select-none pointer-events-none`,
+            className: `${sizeClasses3[size]} object-contain animate-pulse select-none pointer-events-none`,
             alt: "Optifye Logo"
           }
         ),
@@ -27146,7 +27580,7 @@ var RoleBadge = ({
   className = ""
 }) => {
   const config = getRoleConfig(role);
-  const sizeClasses = {
+  const sizeClasses3 = {
     sm: "px-2 py-0.5 text-xs gap-1",
     md: "px-2.5 py-1 text-sm gap-1.5",
     lg: "px-3 py-1.5 text-base gap-2"
@@ -27161,7 +27595,7 @@ var RoleBadge = ({
     {
       className: cn(
         "inline-flex items-center font-medium rounded-full transition-all duration-200",
-        sizeClasses[size],
+        sizeClasses3[size],
         config.bgColor,
         config.textColor,
         config.borderColor,
@@ -27196,6 +27630,15 @@ function getRoleConfig(role) {
         textColor: "text-blue-700",
         borderColor: "border-blue-200"
       };
+    case "it":
+      return {
+        label: "IT",
+        description: "Company-wide access - IT personnel with full company access",
+        icon: Wrench,
+        bgColor: "bg-teal-50",
+        textColor: "text-teal-700",
+        borderColor: "border-teal-200"
+      };
     case "plant_head":
       return {
         label: "Plant Head",
@@ -32838,21 +33281,16 @@ function useWorkspaceCrop(workspaceId) {
       setIsLoading(true);
       setError(null);
       try {
-        const { data: { session } } = await supabase.auth.getSession();
-        const token = session?.access_token || null;
-        if (!token) {
-          throw new Error("Authentication required");
-        }
-        const response = await fetch("/api/clips/supabase", {
+        const response = await fetchWithSupabaseAuth(supabase, "/api/clips/supabase", {
           method: "POST",
           headers: {
-            "Content-Type": "application/json",
-            "Authorization": `Bearer ${token}`
+            "Content-Type": "application/json"
           },
           body: JSON.stringify({
             action: "crop",
             workspaceId
-          })
+          }),
+          redirectReason: "session_expired"
         });
         if (!response.ok) {
           throw new Error(`Failed to fetch crop: ${response.statusText}`);
@@ -33408,7 +33846,7 @@ var BackButton = ({
   disabled = false,
   "aria-label": ariaLabel
 }) => {
-  const sizeClasses = {
+  const sizeClasses3 = {
     sm: {
       container: "gap-1 px-2 py-1.5",
       icon: "w-3.5 h-3.5",
@@ -33425,7 +33863,7 @@ var BackButton = ({
       text: "text-base"
     }
   };
-  const currentSize = sizeClasses[size];
+  const currentSize = sizeClasses3[size];
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -33471,7 +33909,7 @@ var BackButtonMinimal = ({
   disabled = false,
   "aria-label": ariaLabel
 }) => {
-  const sizeClasses = {
+  const sizeClasses3 = {
     sm: {
       icon: "w-3.5 h-3.5",
       text: "text-xs ml-1"
@@ -33485,7 +33923,7 @@ var BackButtonMinimal = ({
       text: "text-base ml-2"
     }
   };
-  const currentSize = sizeClasses[size];
+  const currentSize = sizeClasses3[size];
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -33764,6 +34202,196 @@ var NewClipsNotification = ({
     }
   );
 };
+var sizeClasses = {
+  xs: { container: "w-5 h-5", text: "text-[8px]" },
+  sm: { container: "w-6 h-6", text: "text-[10px]" },
+  md: { container: "w-8 h-8", text: "text-xs" },
+  lg: { container: "w-10 h-10", text: "text-sm" },
+  xl: { container: "w-12 h-12", text: "text-base" }
+};
+var getInitials2 = (firstName, lastName, name, email) => {
+  if (firstName) {
+    const first = firstName.charAt(0).toUpperCase();
+    const last = lastName ? lastName.charAt(0).toUpperCase() : "";
+    return `${first}${last}` || first;
+  }
+  if (name) {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0) return "U";
+    if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+    return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+  }
+  if (email) {
+    const localPart = email.split("@")[0];
+    return localPart.slice(0, 2).toUpperCase();
+  }
+  return "U";
+};
+var UserAvatar = ({
+  imageUrl,
+  firstName,
+  lastName,
+  name,
+  email,
+  size = "md",
+  className = "",
+  showBorder = true
+}) => {
+  const [imageError, setImageError] = useState(false);
+  const { container, text } = sizeClasses[size] || sizeClasses.md;
+  const initials = getInitials2(firstName, lastName, name, email);
+  const showImage = imageUrl && !imageError;
+  const borderClass = showBorder ? "border border-gray-200" : "";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${container} rounded-full overflow-hidden flex-shrink-0 ${borderClass} ${className}`,
+      children: showImage ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: imageUrl,
+          alt: name || firstName || email || "User avatar",
+          className: "w-full h-full object-cover",
+          onError: () => setImageError(true)
+        }
+      ) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `w-full h-full flex items-center justify-center bg-gray-100 text-gray-600 font-bold ${text}`,
+          children: initials
+        }
+      )
+    }
+  );
+};
+var BUCKET_NAME = "avatars";
+var MAX_FILE_SIZE = 2 * 1024 * 1024;
+var ALLOWED_TYPES = ["image/jpeg", "image/png", "image/webp"];
+var sizeClasses2 = {
+  md: { container: "w-16 h-16", icon: "w-5 h-5" },
+  lg: { container: "w-24 h-24", icon: "w-6 h-6" }
+};
+var AvatarUpload = ({
+  currentImageUrl,
+  firstName,
+  lastName,
+  email,
+  userId,
+  onUploadComplete,
+  onUploadError,
+  onRemove,
+  size = "lg",
+  disabled = false,
+  supabase
+}) => {
+  const [isUploading, setIsUploading] = useState(false);
+  const [previewUrl, setPreviewUrl] = useState(null);
+  const fileInputRef = useRef(null);
+  const { container, icon } = sizeClasses2[size] || sizeClasses2.lg;
+  const displayUrl = previewUrl || currentImageUrl;
+  const handleFileSelect = async (event) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    if (!ALLOWED_TYPES.includes(file.type)) {
+      const error = new Error("Invalid file type. Please upload a JPG, PNG, or WebP image.");
+      onUploadError?.(error);
+      return;
+    }
+    if (file.size > MAX_FILE_SIZE) {
+      const error = new Error("File too large. Maximum size is 2MB.");
+      onUploadError?.(error);
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      setPreviewUrl(e.target?.result);
+    };
+    reader.readAsDataURL(file);
+    setIsUploading(true);
+    try {
+      const fileExt = file.name.split(".").pop()?.toLowerCase() || "jpg";
+      const fileName = `${userId}/${Date.now()}.${fileExt}`;
+      const { error: uploadError } = await supabase.storage.from(BUCKET_NAME).upload(fileName, file, {
+        cacheControl: "3600",
+        upsert: true
+      });
+      if (uploadError) {
+        throw uploadError;
+      }
+      const { data: publicUrlData } = supabase.storage.from(BUCKET_NAME).getPublicUrl(fileName);
+      const publicUrl = publicUrlData?.publicUrl;
+      if (publicUrl) {
+        onUploadComplete(publicUrl);
+      }
+    } catch (error) {
+      console.error("[AvatarUpload] Upload failed:", error);
+      setPreviewUrl(null);
+      onUploadError?.(error instanceof Error ? error : new Error("Upload failed"));
+    } finally {
+      setIsUploading(false);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    }
+  };
+  const handleClick = () => {
+    if (!disabled && !isUploading) {
+      fileInputRef.current?.click();
+    }
+  };
+  const handleRemove = (e) => {
+    e.stopPropagation();
+    setPreviewUrl(null);
+    onRemove?.();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative inline-block", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handleClick,
+        disabled: disabled || isUploading,
+        className: `${container} rounded-full overflow-hidden relative group cursor-pointer disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2`,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsx(
+            UserAvatar,
+            {
+              imageUrl: displayUrl,
+              firstName,
+              lastName,
+              email,
+              size: size === "lg" ? "xl" : "lg",
+              showBorder: false,
+              className: "w-full h-full"
+            }
+          ) }),
+          !isUploading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center rounded-full", children: /* @__PURE__ */ jsx(Camera, { className: `${icon} text-white` }) }),
+          isUploading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/40 flex items-center justify-center rounded-full", children: /* @__PURE__ */ jsx(Loader2, { className: `${icon} text-white animate-spin` }) })
+        ]
+      }
+    ),
+    displayUrl && onRemove && !isUploading && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleRemove,
+        className: "absolute -top-1 -right-1 w-5 h-5 rounded-full bg-red-500 text-white flex items-center justify-center hover:bg-red-600 transition-colors shadow-sm",
+        children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept: ALLOWED_TYPES.join(","),
+        onChange: handleFileSelect,
+        className: "hidden",
+        disabled: disabled || isUploading
+      }
+    )
+  ] });
+};
 var parseCycleTime = (value) => {
   if (typeof value === "number" && Number.isFinite(value)) {
     return value;
@@ -33836,6 +34464,8 @@ var FileManagerFilters = ({
   activeFilter,
   currentVideoId,
   counts,
+  isReady = false,
+  prefetchedPercentileCounts,
   onFilterChange,
   onVideoSelect,
   onClipSelect,
@@ -33871,8 +34501,16 @@ var FileManagerFilters = ({
     ...localClipClassifications
   }), [clipClassifications, localClipClassifications]);
   const { state: filterState } = useClipFilter();
-  const [percentileCounts, setPercentileCounts] = useState({});
+  const [percentileCounts, setPercentileCounts] = useState({
+    "fast-cycles": null,
+    "slow-cycles": null
+  });
   const [percentileClips, setPercentileClips] = useState({});
+  const percentileCountsKeyRef = useRef(null);
+  const percentilePrefetchRef = useRef({
+    key: null,
+    types: /* @__PURE__ */ new Set()
+  });
   const [loadingPercentile, setLoadingPercentile] = useState(false);
   const resolvedTargetCycleTime = targetCycleTime && targetCycleTime > 0 ? targetCycleTime : null;
   const getRootCauseConfig = (reason) => {
@@ -33924,6 +34562,14 @@ var FileManagerFilters = ({
     }
     return { text: "Fast", className: "bg-green-100 text-green-700" };
   }, [resolvedTargetCycleTime]);
+  const getAuthToken3 = useCallback(async () => {
+    try {
+      return await getAccessTokenOrRedirect(supabase, { redirectReason: "session_expired" });
+    } catch (error) {
+      console.error("[FileManager] Error getting auth token:", error);
+      return null;
+    }
+  }, [supabase]);
   const fetchClipMetadata = useCallback(async (categoryId, page = 1) => {
     if (!workspaceId || !date || shift === void 0) {
       console.warn("[FileManager] Missing required params for clip metadata fetch");
@@ -33932,12 +34578,10 @@ var FileManagerFilters = ({
     const loadingKey = `${categoryId}-${page}`;
     setLoadingCategories((prev) => /* @__PURE__ */ new Set([...prev, loadingKey]));
     try {
-      const authToken = await getAuthToken4();
-      const response = await fetch("/api/clips/supabase", {
+      const response = await fetchWithSupabaseAuth(supabase, "/api/clips/supabase", {
         method: "POST",
         headers: {
-          "Content-Type": "application/json",
-          "Authorization": `Bearer ${authToken}`
+          "Content-Type": "application/json"
         },
         body: JSON.stringify({
           action: "clip-metadata",
@@ -33949,7 +34593,8 @@ var FileManagerFilters = ({
           limit: 50,
           snapshotDateTime,
           snapshotClipId
-        })
+        }),
+        redirectReason: "session_expired"
       });
       if (!response.ok) {
         throw new Error(`API error: ${response.status}`);
@@ -33959,6 +34604,7 @@ var FileManagerFilters = ({
         ...prev,
         [categoryId]: page === 1 ? data.clips : [...prev[categoryId] || [], ...data.clips]
       }));
+      const authToken = categoryId === "idle_time" ? await getAuthToken3() : null;
       if (categoryId === "idle_time" && authToken) {
         const seededClassifications = {};
         (data.clips || []).forEach((clip) => {
@@ -34004,16 +34650,7 @@ var FileManagerFilters = ({
         return newSet;
       });
     }
-  }, [workspaceId, date, shift, mergedClipClassifications, snapshotDateTime, snapshotClipId]);
-  const getAuthToken4 = async () => {
-    try {
-      const { data: { session } } = await supabase.auth.getSession();
-      return session?.access_token || null;
-    } catch (error) {
-      console.error("[FileManager] Error getting auth token:", error);
-      return null;
-    }
-  };
+  }, [workspaceId, date, shift, mergedClipClassifications, snapshotDateTime, snapshotClipId, supabase, getAuthToken3]);
   const fetchPercentileClips = useCallback(async (type) => {
     if (!workspaceId || !date || shift === void 0) {
       console.warn("[FileManager] Missing required params for percentile clips fetch");
@@ -34022,11 +34659,10 @@ var FileManagerFilters = ({
     try {
       const startDate = `${date}T00:00:00Z`;
       const endDate = `${date}T23:59:59Z`;
-      const response = await fetch("/api/clips/supabase", {
+      const response = await fetchWithSupabaseAuth(supabase, "/api/clips/supabase", {
         method: "POST",
         headers: {
-          "Content-Type": "application/json",
-          "Authorization": `Bearer ${await getAuthToken4()}`
+          "Content-Type": "application/json"
         },
         body: JSON.stringify({
           action: "percentile-clips",
@@ -34038,7 +34674,8 @@ var FileManagerFilters = ({
           limit: 50,
           // The actual percentile action (fast-cycles, slow-cycles, idle-times)
           percentileAction: type
-        })
+        }),
+        redirectReason: "session_expired"
       });
       if (!response.ok) {
         throw new Error(`API error: ${response.status}`);
@@ -34048,15 +34685,132 @@ var FileManagerFilters = ({
         ...prev,
         [type]: data.clips || []
       }));
-      setPercentileCounts((prev) => ({
-        ...prev,
-        [type]: data.total || 0
-      }));
+      setPercentileCounts((prev) => {
+        if (typeof prev[type] === "number") {
+          return prev;
+        }
+        return {
+          ...prev,
+          [type]: data.total || 0
+        };
+      });
       console.log(`[FileManager] Loaded ${data.clips?.length || 0} ${type} clips (percentile: ${filterState.percentile}%)`);
     } catch (error) {
       console.error(`[FileManager] Error fetching ${type} clips:`, error);
     }
+  }, [workspaceId, date, shift, filterState.percentile, supabase]);
+  const percentileCountsKey = useMemo(() => {
+    if (!workspaceId || !date || shift === void 0) {
+      return null;
+    }
+    return `${workspaceId}:${date}:${shift}:${filterState.percentile}`;
   }, [workspaceId, date, shift, filterState.percentile]);
+  useEffect(() => {
+    if (!percentileCountsKey) {
+      percentileCountsKeyRef.current = null;
+      percentilePrefetchRef.current = { key: null, types: /* @__PURE__ */ new Set() };
+      setPercentileCounts({
+        "fast-cycles": null,
+        "slow-cycles": null
+      });
+      setPercentileClips({});
+      return;
+    }
+    if (percentileCountsKeyRef.current === percentileCountsKey) {
+      return;
+    }
+    percentileCountsKeyRef.current = percentileCountsKey;
+    percentilePrefetchRef.current = { key: null, types: /* @__PURE__ */ new Set() };
+    setPercentileCounts({
+      "fast-cycles": null,
+      "slow-cycles": null
+    });
+    setPercentileClips({});
+  }, [percentileCountsKey]);
+  useEffect(() => {
+    if (!prefetchedPercentileCounts || !percentileCountsKey) {
+      return;
+    }
+    if (prefetchedPercentileCounts.key !== percentileCountsKey) {
+      return;
+    }
+    if (prefetchedPercentileCounts.percentile !== filterState.percentile) {
+      return;
+    }
+    setPercentileCounts((prev) => ({
+      ...prev,
+      "fast-cycles": typeof prefetchedPercentileCounts.counts["fast-cycles"] === "number" ? prefetchedPercentileCounts.counts["fast-cycles"] : prev["fast-cycles"],
+      "slow-cycles": typeof prefetchedPercentileCounts.counts["slow-cycles"] === "number" ? prefetchedPercentileCounts.counts["slow-cycles"] : prev["slow-cycles"]
+    }));
+  }, [prefetchedPercentileCounts, percentileCountsKey, filterState.percentile]);
+  const fetchPercentileCounts = useCallback(async (options) => {
+    if (!workspaceId || !date || shift === void 0) {
+      console.warn("[FileManager] Missing required params for percentile counts fetch");
+      return;
+    }
+    const requestKey = `${workspaceId}:${date}:${shift}:${filterState.percentile}`;
+    if (percentileCountsKeyRef.current === requestKey && typeof percentileCounts["fast-cycles"] === "number" && typeof percentileCounts["slow-cycles"] === "number") {
+      return;
+    }
+    try {
+      const startDate = `${date}T00:00:00Z`;
+      const endDate = `${date}T23:59:59Z`;
+      const response = await fetchWithSupabaseAuth(supabase, "/api/clips/supabase", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          action: "percentile-counts",
+          workspaceId,
+          startDate,
+          endDate,
+          percentile: filterState.percentile,
+          shiftId: shift
+        }),
+        redirectReason: "session_expired"
+      });
+      if (!response.ok) {
+        throw new Error(`API error: ${response.status}`);
+      }
+      const data = await response.json();
+      const fastCycles = data?.counts?.["fast-cycles"];
+      const slowCycles = data?.counts?.["slow-cycles"];
+      setPercentileCounts((prev) => ({
+        ...prev,
+        "fast-cycles": typeof fastCycles === "number" ? fastCycles : prev["fast-cycles"],
+        "slow-cycles": typeof slowCycles === "number" ? slowCycles : prev["slow-cycles"]
+      }));
+      if (options?.prefetchClips) {
+        if (percentilePrefetchRef.current.key !== requestKey) {
+          percentilePrefetchRef.current = { key: requestKey, types: /* @__PURE__ */ new Set() };
+        }
+        if (typeof fastCycles === "number" && fastCycles > 0 && (percentileClips["fast-cycles"] || []).length === 0 && !percentilePrefetchRef.current.types.has("fast-cycles")) {
+          percentilePrefetchRef.current.types.add("fast-cycles");
+          fetchPercentileClips("fast-cycles");
+        }
+        if (typeof slowCycles === "number" && slowCycles > 0 && (percentileClips["slow-cycles"] || []).length === 0 && !percentilePrefetchRef.current.types.has("slow-cycles")) {
+          percentilePrefetchRef.current.types.add("slow-cycles");
+          fetchPercentileClips("slow-cycles");
+        }
+      }
+    } catch (error) {
+      console.error("[FileManager] Error fetching percentile counts:", error);
+    }
+  }, [workspaceId, date, shift, filterState.percentile, supabase, percentileCounts, percentileClips, fetchPercentileClips]);
+  useEffect(() => {
+    if (!isReady || !percentileCountsKey) {
+      return;
+    }
+    const schedule = () => {
+      fetchPercentileCounts({ prefetchClips: true });
+    };
+    if (typeof window !== "undefined" && "requestIdleCallback" in window) {
+      window.requestIdleCallback(schedule, { timeout: 1e3 });
+    } else {
+      setTimeout(schedule, 0);
+    }
+  }, [isReady, percentileCountsKey, fetchPercentileCounts]);
   const shouldShowCategory = useCallback((categoryId) => {
     switch (categoryId) {
       case "fast-cycles":
@@ -34242,6 +34996,8 @@ var FileManagerFilters = ({
     });
     const filteredFastCycles = (percentileClips["fast-cycles"] || []).filter((clip) => isClipInTimeRange(clip.creation_timestamp || ""));
     const filteredSlowCycles = (percentileClips["slow-cycles"] || []).filter((clip) => isClipInTimeRange(clip.creation_timestamp || ""));
+    const fastCount = typeof percentileCounts["fast-cycles"] === "number" ? percentileCounts["fast-cycles"] : null;
+    const slowCount = typeof percentileCounts["slow-cycles"] === "number" ? percentileCounts["slow-cycles"] : null;
     const percentileCategories = [
       {
         id: "fast-cycles",
@@ -34249,7 +35005,7 @@ var FileManagerFilters = ({
         subtitle: "Top 10% fastest performance",
         description: "Top 10% fastest performance",
         type: "percentile-category",
-        count: isTimeFilterActive ? filteredFastCycles.length : percentileCounts["fast-cycles"] || 0,
+        count: isTimeFilterActive ? fastCount === null && filteredFastCycles.length === 0 ? null : filteredFastCycles.length : fastCount,
         icon: getPercentileIcon("fast-cycles", expandedNodes.has("fast-cycles"), { text: "text-green-600" }),
         color: "green",
         percentileType: "fast-cycles",
@@ -34281,7 +35037,7 @@ var FileManagerFilters = ({
         subtitle: "Bottom 10% slowest performance",
         description: "Bottom 10% slowest performance",
         type: "percentile-category",
-        count: isTimeFilterActive ? filteredSlowCycles.length : percentileCounts["slow-cycles"] || 0,
+        count: isTimeFilterActive ? slowCount === null && filteredSlowCycles.length === 0 ? null : filteredSlowCycles.length : slowCount,
         icon: getPercentileIcon("slow-cycles", expandedNodes.has("slow-cycles"), { text: "text-red-600" }),
         color: "red",
         percentileType: "slow-cycles",
@@ -34344,7 +35100,8 @@ var FileManagerFilters = ({
     const orderedIds = ["cycle_completion", "fast-cycles", "slow-cycles", "idle_time"];
     orderedIds.forEach((orderedId) => {
       const percentileCategory = percentileCategories.find((cat) => cat.id === orderedId);
-      if (percentileCategory && percentileCategory.count > 0 && shouldShowCategory(orderedId)) {
+      const shouldIncludePercentile = percentileCategory ? typeof percentileCategory.count === "number" && percentileCategory.count > 0 : false;
+      if (percentileCategory && shouldIncludePercentile && shouldShowCategory(orderedId)) {
         tree.push(percentileCategory);
       }
       const regularCategory = regularCategoryNodes.find((cat) => cat.id === orderedId);
@@ -34358,7 +35115,8 @@ var FileManagerFilters = ({
       }
     });
     percentileCategories.forEach((category) => {
-      if (!orderedIds.includes(category.id) && category.count > 0 && shouldShowCategory(category.id)) {
+      const shouldIncludePercentile = typeof category.count === "number" && category.count > 0;
+      if (!orderedIds.includes(category.id) && shouldIncludePercentile && shouldShowCategory(category.id)) {
         tree.push(category);
       }
     });
@@ -34435,7 +35193,9 @@ var FileManagerFilters = ({
     } else if (node.type === "video") {
       if (onClipSelect && node.categoryId !== void 0 && node.clipId !== void 0) {
         console.log(`[FileManager] Selecting clip: category=${node.categoryId}, clipId=${node.clipId}, position=${node.clipPosition}`);
-        onClipSelect(node.categoryId, node.clipId, node.clipPosition);
+        const categoryClips = node.categoryId ? clipMetadata[node.categoryId] : void 0;
+        const selectionContext = categoryClips?.length ? { clips: categoryClips, total: counts?.[node.categoryId] } : void 0;
+        onClipSelect(node.categoryId, node.clipId, node.clipPosition, selectionContext);
       } else {
         const videoIndex = videos.findIndex((v) => v.id === node.id);
         if (videoIndex !== -1) {
@@ -34448,7 +35208,8 @@ var FileManagerFilters = ({
     const isExpanded = expandedNodes.has(node.id);
     const isActive = activeFilter === node.id;
     const isCurrentVideo = currentVideoId === node.id;
-    const hasChildren = (node.count || 0) > 0;
+    const isCountUnknown = node.type === "percentile-category" && node.count === null;
+    const hasChildren = isCountUnknown || (node.count || 0) > 0;
     const colorClasses = node.color ? getColorClasses(node.color) : null;
     return /* @__PURE__ */ jsxs("div", { className: "select-none animate-in", children: [
       /* @__PURE__ */ jsxs(
@@ -34509,7 +35270,7 @@ var FileManagerFilters = ({
                   })()
                 ) })
               ] }),
-              node.count !== void 0 && (node.type === "category" || node.type === "percentile-category") && /* @__PURE__ */ jsx("div", { className: "flex items-center ml-2", children: /* @__PURE__ */ jsx("span", { className: `px-2.5 py-1 text-sm font-bold rounded-lg shadow-sm border backdrop-blur-sm flex-shrink-0 group-hover:scale-105 transition-all duration-200 ${colorClasses ? `${colorClasses.bg} ${colorClasses.text} ${colorClasses.border} bg-opacity-80` : "bg-slate-100/80 text-slate-700 border-slate-200/60"}`, children: node.count }) })
+              node.count !== void 0 && (node.type === "category" || node.type === "percentile-category") && /* @__PURE__ */ jsx("div", { className: "flex items-center ml-2", children: /* @__PURE__ */ jsx("span", { className: `px-2.5 py-1 text-sm font-bold rounded-lg shadow-sm border backdrop-blur-sm flex-shrink-0 group-hover:scale-105 transition-all duration-200 ${colorClasses ? `${colorClasses.bg} ${colorClasses.text} ${colorClasses.border} bg-opacity-80` : "bg-slate-100/80 text-slate-700 border-slate-200/60"}`, children: node.count === null ? "\u2014" : node.count }) })
             ] })
           ]
         }
@@ -35230,12 +35991,12 @@ var BottlenecksContent = ({
   workspaceMetrics: workspaceMetricsOverride,
   customCounterContent,
   triageMode = false,
-  ticketId
+  ticketId,
+  prefetchedPercentileCounts
 }) => {
   console.log("\u{1F3AB} [BottlenecksContent] Rendered with ticketId:", ticketId || "NONE", "workspaceId:", workspaceId, "date:", date, "shift:", shift);
   const dashboardConfig = useDashboardConfig();
   const supabase = useSupabase();
-  const { session } = useAuth();
   const timezone = useAppTimezone();
   const { shiftConfig, isLoading: isShiftConfigLoading } = useDynamicShiftConfig(lineId);
   const { effectiveShift, effectiveDate } = useMemo(() => {
@@ -35659,10 +36420,9 @@ var BottlenecksContent = ({
       await loadFirstVideoForCategory(activeFilter);
     }
   }, [acknowledgeNewClips, refreshCounts, activeFilter, mergedCounts, loadFirstVideoForCategory, invalidateMetadataCache]);
-  const getAuthToken4 = useCallback(async () => {
+  const getAuthToken3 = useCallback(async () => {
     try {
-      const { data: { session: session2 } } = await supabase.auth.getSession();
-      return session2?.access_token || null;
+      return await getAccessTokenOrRedirect(supabase, { redirectReason: "session_expired" });
     } catch (error2) {
       console.error("[BottlenecksContent] Error getting auth token:", error2);
       return null;
@@ -35673,17 +36433,11 @@ var BottlenecksContent = ({
     const fetchTriageClips = async () => {
       setIsLoadingTriageClips(true);
       try {
-        const token = await getAuthToken4();
-        if (!token) {
-          console.error("[BottlenecksContent] No auth token available");
-          return;
-        }
         const fetchCategoryMetadata = async (categoryId) => {
-          const response = await fetch("/api/clips/supabase", {
+          const response = await fetchWithSupabaseAuth(supabase, "/api/clips/supabase", {
             method: "POST",
             headers: {
-              "Content-Type": "application/json",
-              "Authorization": `Bearer ${token}`
+              "Content-Type": "application/json"
             },
             body: JSON.stringify({
               action: "metadata",
@@ -35694,7 +36448,8 @@ var BottlenecksContent = ({
               page: 1,
               limit: 100
               // Last 15 minutes
-            })
+            }),
+            redirectReason: "session_expired"
           });
           if (!response.ok) {
             console.error(`Failed to fetch ${categoryId} metadata`);
@@ -35721,28 +36476,42 @@ var BottlenecksContent = ({
       }
     };
     fetchTriageClips();
-  }, [triageMode, workspaceId, effectiveDateString, effectiveShiftId, getAuthToken4, isEffectiveShiftReady]);
+  }, [triageMode, workspaceId, effectiveDateString, effectiveShiftId, supabase, isEffectiveShiftReady]);
   useEffect(() => {
-    if (!triageMode || triageClips.length === 0 || !session?.access_token) {
-      return;
-    }
-    const idleClipIds = triageClips.filter((c) => c.categoryId === "idle_time").map((c) => c.id || c.clipId).filter(Boolean);
-    const limitedIdleClipIds = idleClipIds.slice(0, 20);
-    if (limitedIdleClipIds.length === 0) {
-      console.log("[BottlenecksContent] No idle_time clips to fetch classifications for (triage mode)");
+    if (!triageMode || triageClips.length === 0) {
       return;
     }
-    console.log(`[BottlenecksContent] Fetching classifications for ${limitedIdleClipIds.length} idle_time clips (triage mode)`);
-    fetchClassifications(limitedIdleClipIds, session.access_token).then((classifications) => {
-      console.log("[BottlenecksContent] Received classifications (triage mode):", classifications);
-      setClipClassifications((prev) => ({
-        ...prev,
-        ...classifications
-      }));
-    }).catch((error2) => {
-      console.error("[BottlenecksContent] Error fetching classifications (triage mode):", error2);
-    });
-  }, [triageClips, triageMode, session?.access_token]);
+    let cancelled = false;
+    const fetchIdleClassifications = async () => {
+      const idleClipIds = triageClips.filter((c) => c.categoryId === "idle_time").map((c) => c.id || c.clipId).filter(Boolean);
+      const limitedIdleClipIds = idleClipIds.slice(0, 20);
+      if (limitedIdleClipIds.length === 0) {
+        console.log("[BottlenecksContent] No idle_time clips to fetch classifications for (triage mode)");
+        return;
+      }
+      const token = await getAuthToken3();
+      if (!token || cancelled) {
+        return;
+      }
+      console.log(`[BottlenecksContent] Fetching classifications for ${limitedIdleClipIds.length} idle_time clips (triage mode)`);
+      fetchClassifications(limitedIdleClipIds, token).then((classifications) => {
+        if (cancelled) return;
+        console.log("[BottlenecksContent] Received classifications (triage mode):", classifications);
+        setClipClassifications((prev) => ({
+          ...prev,
+          ...classifications
+        }));
+      }).catch((error2) => {
+        if (!cancelled) {
+          console.error("[BottlenecksContent] Error fetching classifications (triage mode):", error2);
+        }
+      });
+    };
+    fetchIdleClassifications();
+    return () => {
+      cancelled = true;
+    };
+  }, [triageClips, triageMode, getAuthToken3]);
   useEffect(() => {
     if (s3ClipsService && (mergedCounts[activeFilter] || 0) > 0) {
       if (firstClip && firstClip.type === activeFilter) {
@@ -35761,6 +36530,25 @@ var BottlenecksContent = ({
   const isPercentileCategory = useCallback((categoryId) => {
     return ["fast-cycles", "slow-cycles", "longest-idles"].includes(categoryId);
   }, []);
+  const getMetadataCacheKey = useCallback((categoryId) => {
+    return `${categoryId}-${effectiveDateString}-${effectiveShiftId}-${snapshotDateTime ?? "nosnap"}-${snapshotClipId ?? "nosnap"}`;
+  }, [effectiveDateString, effectiveShiftId, snapshotDateTime, snapshotClipId]);
+  const applyMetadataSnapshot = useCallback((categoryId, clips, total) => {
+    if (!clips || clips.length === 0) {
+      return;
+    }
+    const cacheKey = getMetadataCacheKey(categoryId);
+    setMetadataCache((prev) => ({
+      ...prev,
+      [cacheKey]: clips
+    }));
+    categoryMetadataRef.current = clips;
+    setCategoryMetadata(clips);
+    if (!isPercentileCategory(categoryId) && typeof total === "number") {
+      currentTotalRef.current = total;
+      setCurrentTotal(total);
+    }
+  }, [getMetadataCacheKey, isPercentileCategory]);
   const getClipTypesForPercentileCategory = useCallback((categoryId) => {
     switch (categoryId) {
       case "fast-cycles":
@@ -35818,7 +36606,7 @@ var BottlenecksContent = ({
       return;
     }
     const resolvedDate = effectiveDateString;
-    const cacheKey = `${categoryId}-${resolvedDate}-${effectiveShiftId}-${snapshotDateTime ?? "nosnap"}-${snapshotClipId ?? "nosnap"}`;
+    const cacheKey = getMetadataCacheKey(categoryId);
     const cachedMetadata = !forceRefresh ? metadataCache[cacheKey] : void 0;
     try {
       if (cachedMetadata) {
@@ -35845,19 +36633,13 @@ var BottlenecksContent = ({
         return;
       }
       console.log(`[BottlenecksContent] Loading metadata for category: ${categoryId}${forceRefresh ? " (force refresh)" : ""}`);
-      const authToken = await getAuthToken4();
-      if (!authToken) {
-        console.error("Authentication required for metadata loading");
-        return;
-      }
       let response;
       if (isPercentileCategory(categoryId)) {
         const percentileType = categoryId === "fast-cycles" ? "fast-cycles" : categoryId === "slow-cycles" ? "slow-cycles" : "idle-times";
-        response = await fetch("/api/clips/supabase", {
+        response = await fetchWithSupabaseAuth(supabase, "/api/clips/supabase", {
           method: "POST",
           headers: {
-            "Content-Type": "application/json",
-            "Authorization": `Bearer ${authToken}`
+            "Content-Type": "application/json"
           },
           body: JSON.stringify({
             action: "percentile-clips",
@@ -35868,14 +36650,14 @@ var BottlenecksContent = ({
             percentile: 10,
             shiftId: effectiveShiftId,
             limit: 100
-          })
+          }),
+          redirectReason: "session_expired"
         });
       } else {
-        response = await fetch("/api/clips/supabase", {
+        response = await fetchWithSupabaseAuth(supabase, "/api/clips/supabase", {
           method: "POST",
           headers: {
-            "Content-Type": "application/json",
-            "Authorization": `Bearer ${authToken}`
+            "Content-Type": "application/json"
           },
           body: JSON.stringify({
             action: "clip-metadata",
@@ -35887,7 +36669,8 @@ var BottlenecksContent = ({
             limit: 100,
             snapshotDateTime,
             snapshotClipId
-          })
+          }),
+          redirectReason: "session_expired"
         });
       }
       if (!response.ok) {
@@ -35966,7 +36749,7 @@ var BottlenecksContent = ({
     } finally {
       setIsCategoryLoading(false);
     }
-  }, [workspaceId, effectiveDateString, effectiveShiftId, isPercentileCategory, metadataCache, s3ClipsService, clearLoadingState, isEffectiveShiftReady, snapshotDateTime, snapshotClipId]);
+  }, [workspaceId, effectiveDateString, effectiveShiftId, getMetadataCacheKey, isPercentileCategory, metadataCache, s3ClipsService, clearLoadingState, isEffectiveShiftReady, snapshotDateTime, snapshotClipId, supabase]);
   useEffect(() => {
     if (previousFilterRef.current !== activeFilter) {
       console.log(`Filter changed from ${previousFilterRef.current} to ${activeFilter} - resetting to first video`);
@@ -36014,7 +36797,7 @@ var BottlenecksContent = ({
     }
     loadCategoryMetadata(activeFilter, false);
   }, [currentClipId, activeFilter, isCategoryLoading, loadCategoryMetadata]);
-  const loadAndPlayClipById = useCallback(async (clipId, categoryId, position) => {
+  const loadAndPlayClipById = useCallback(async (clipId, categoryId, position, metadataContext) => {
     if (!workspaceId || !s3ClipsService || !isMountedRef.current) return;
     console.log(`[BottlenecksContent] Loading clip by ID: ${clipId}, category=${categoryId}, position=${position}`);
     setIsTransitioning(true);
@@ -36036,7 +36819,12 @@ var BottlenecksContent = ({
       updateActiveFilter(categoryId);
     }
     try {
-      const metadataPromise = loadCategoryMetadata(categoryId, false).catch((err) => {
+      const fallbackMetadata = metadataContext?.clips;
+      const fallbackTotal = metadataContext?.total;
+      if (fallbackMetadata && fallbackMetadata.length > 0) {
+        applyMetadataSnapshot(categoryId, fallbackMetadata, fallbackTotal);
+      }
+      const metadataPromise = fallbackMetadata?.length ? Promise.resolve() : loadCategoryMetadata(categoryId, false).catch((err) => {
         console.warn(`[BottlenecksContent] Metadata fetch error (non-blocking):`, err);
         return null;
       });
@@ -36051,18 +36839,42 @@ var BottlenecksContent = ({
       }
       await metadataPromise;
       let metadataArray = categoryMetadataRef.current;
-      const clipExistsInMetadata = metadataArray.some((clip) => clip.clipId === clipId);
-      if (metadataArray.length === 0 || !clipExistsInMetadata) {
-        console.warn(`[BottlenecksContent] Clip ${clipId} not found in metadata for ${categoryId} (cache hit: ${metadataArray.length > 0}) - forcing refresh`);
-        await loadCategoryMetadata(categoryId, false, true);
-        metadataArray = categoryMetadataRef.current;
+      const fallbackHasClip = fallbackMetadata?.some((clip) => clip.clipId === clipId);
+      if ((metadataArray.length === 0 || !metadataArray.some((clip) => clip.clipId === clipId)) && fallbackHasClip) {
+        applyMetadataSnapshot(categoryId, fallbackMetadata, fallbackTotal);
+        metadataArray = fallbackMetadata;
+      }
+      if (metadataArray.length === 0 || !metadataArray.some((clip) => clip.clipId === clipId)) {
+        if (!fallbackHasClip) {
+          console.warn(`[BottlenecksContent] Clip ${clipId} not found in metadata for ${categoryId} (cache hit: ${metadataArray.length > 0}) - forcing refresh`);
+          await loadCategoryMetadata(categoryId, false, true);
+          metadataArray = categoryMetadataRef.current;
+        }
       }
       if (metadataArray.length === 0) {
-        throw new Error(`No metadata available for category ${categoryId}`);
+        console.warn(`[BottlenecksContent] No metadata available for category ${categoryId} after refresh`);
+        if (!isPercentileCategory(categoryId)) {
+          const resolvedPosition = typeof position === "number" ? position : 1;
+          currentPositionRef.current = resolvedPosition;
+          setCurrentPosition(resolvedPosition);
+          const total = fallbackTotal ?? mergedCounts[categoryId] ?? 0;
+          currentTotalRef.current = total;
+          setCurrentTotal(total);
+        }
+        return;
       }
       const clickedClipIndex = metadataArray.findIndex((clip) => clip.clipId === clipId);
       if (clickedClipIndex === -1) {
-        throw new Error(`Clip ${clipId} not found after metadata refresh`);
+        console.warn(`[BottlenecksContent] Clip ${clipId} not found after metadata refresh`);
+        if (!isPercentileCategory(categoryId)) {
+          const resolvedPosition = typeof position === "number" ? position : 1;
+          currentPositionRef.current = resolvedPosition;
+          setCurrentPosition(resolvedPosition);
+          const total = fallbackTotal ?? mergedCounts[categoryId] ?? metadataArray.length;
+          currentTotalRef.current = total;
+          setCurrentTotal(total);
+        }
+        return;
       }
       setCurrentMetadataIndex(clickedClipIndex);
       currentMetadataIndexRef.current = clickedClipIndex;
@@ -36087,7 +36899,7 @@ var BottlenecksContent = ({
         clearLoadingState();
       }
     }
-  }, [workspaceId, s3ClipsService, updateActiveFilter, clearLoadingState, loadCategoryMetadata, mergedCounts, isPercentileCategory]);
+  }, [workspaceId, s3ClipsService, updateActiveFilter, clearLoadingState, loadCategoryMetadata, applyMetadataSnapshot, mergedCounts, isPercentileCategory]);
   useCallback(async (categoryId, clipIndex) => {
     console.warn("[BottlenecksContent] loadAndPlayClip is deprecated, use loadAndPlayClipById instead");
     if (!workspaceId || !s3ClipsService || !isMountedRef.current || !isEffectiveShiftReady) return;
@@ -36361,22 +37173,36 @@ var BottlenecksContent = ({
     }, [])
   });
   useEffect(() => {
-    if (triageMode || !currentVideo || currentVideo.type !== "idle_time" || !session?.access_token) {
+    if (triageMode || !currentVideo || currentVideo.type !== "idle_time") {
       return;
     }
     const clipId = currentVideo.id;
     if (!clipId || clipClassifications[clipId]) {
       return;
     }
-    fetchClassifications([clipId], session.access_token).then((classifications) => {
-      setClipClassifications((prev) => ({
-        ...prev,
-        ...classifications
-      }));
-    }).catch((error2) => {
-      console.error("[BottlenecksContent] Error fetching classification (current clip):", error2);
-    });
-  }, [triageMode, currentVideo, session?.access_token, clipClassifications]);
+    let cancelled = false;
+    const fetchCurrentClassification = async () => {
+      const token = await getAuthToken3();
+      if (!token || cancelled) {
+        return;
+      }
+      fetchClassifications([clipId], token).then((classifications) => {
+        if (cancelled) return;
+        setClipClassifications((prev) => ({
+          ...prev,
+          ...classifications
+        }));
+      }).catch((error2) => {
+        if (!cancelled) {
+          console.error("[BottlenecksContent] Error fetching classification (current clip):", error2);
+        }
+      });
+    };
+    fetchCurrentClassification();
+    return () => {
+      cancelled = true;
+    };
+  }, [triageMode, currentVideo, clipClassifications, getAuthToken3]);
   useEffect(() => {
     if (!s3ClipsService || !currentVideo) {
       return;
@@ -37129,6 +37955,8 @@ var BottlenecksContent = ({
             activeFilter,
             currentVideoId: currentVideo?.id,
             counts: mergedCounts,
+            isReady: hasInitialLoad,
+            prefetchedPercentileCounts: prefetchedPercentileCounts || void 0,
             workspaceId,
             date: effectiveDateString,
             shift: effectiveShiftId,
@@ -37159,9 +37987,9 @@ var BottlenecksContent = ({
                 }
               }
             },
-            onClipSelect: (categoryId, clipId, position) => {
+            onClipSelect: (categoryId, clipId, position, context) => {
               console.log(`[BottlenecksContent] Clip selected: ${categoryId}, clipId ${clipId}, position=${position}`);
-              loadAndPlayClipById(clipId, categoryId, position);
+              loadAndPlayClipById(clipId, categoryId, position, context);
               const category = categoriesToShow.find((cat) => cat.type === categoryId);
               if (category) {
                 trackCoreEvent(`${category.label} Clip Selected`, {
@@ -38767,7 +39595,7 @@ var HealthStatusIndicator = ({
   };
   const config = getStatusConfig();
   config.icon;
-  const sizeClasses = {
+  const sizeClasses3 = {
     sm: {
       dot: "h-2 w-2",
       icon: "h-3 w-3",
@@ -38787,7 +39615,7 @@ var HealthStatusIndicator = ({
       spacing: "gap-2"
     }
   };
-  const currentSize = sizeClasses[size];
+  const currentSize = sizeClasses3[size];
   const containerClasses = clsx(
     "flex items-center",
     currentSize.spacing,
@@ -38878,7 +39706,7 @@ var AxelOrb = ({
   size = "md",
   animate = false
 }) => {
-  const sizeClasses = {
+  const sizeClasses3 = {
     sm: "w-8 h-8",
     md: "w-10 h-10",
     lg: "w-12 h-12",
@@ -38888,7 +39716,7 @@ var AxelOrb = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: `${sizeClasses[size]} rounded-full ${animate ? "animate-float" : ""} ${className}`,
+      className: `${sizeClasses3[size]} rounded-full ${animate ? "animate-float" : ""} ${className}`,
       style: {
         background: "linear-gradient(to top, #078DDB 0%, #65ADD6 33%, #A3D0E6 66%, #C7E2EC 100%)",
         boxShadow: "0 4px 12px rgba(7, 141, 219, 0.4), 0 0 20px rgba(7, 141, 219, 0.2)"
@@ -39677,8 +40505,7 @@ var LineMonthlyHistory = ({
                 data: idleReasonsChartData,
                 isLoading: idleReasonsLoading,
                 error: idleReasonsError
-              },
-              chartKey
+              }
             ) })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg sm:rounded-xl shadow-sm border border-gray-100 p-2 sm:p-3 lg:p-4 min-h-[160px] sm:min-h-[180px] lg:min-h-[220px] flex flex-col", children: [
@@ -41680,8 +42507,7 @@ var WorkspaceMonthlyHistory = ({
                 data: idleReasonsChartData,
                 isLoading: idleReasonsLoading,
                 error: idleReasonsError
-              },
-              chartKey
+              }
             ) })
           ] })
         ] }),
@@ -43016,7 +43842,7 @@ var KPIHeader = ({
   actionsClassName,
   size = "md"
 }) => {
-  const sizeClasses = {
+  const sizeClasses3 = {
     sm: {
       container: "mb-2",
       title: "text-lg font-semibold",
@@ -43038,7 +43864,7 @@ var KPIHeader = ({
     {
       className: clsx(
         "flex justify-between items-start",
-        sizeClasses[size].container,
+        sizeClasses3[size].container,
         className
       ),
       children: [
@@ -43047,7 +43873,7 @@ var KPIHeader = ({
             "h2",
             {
               className: clsx(
-                sizeClasses[size].title,
+                sizeClasses3[size].title,
                 "text-gray-900 dark:text-gray-100",
                 titleClassName
               ),
@@ -43058,7 +43884,7 @@ var KPIHeader = ({
             "p",
             {
               className: clsx(
-                sizeClasses[size].subtitle,
+                sizeClasses3[size].subtitle,
                 "text-gray-500 dark:text-gray-400 mt-1",
                 subtitleClassName
               ),
@@ -45325,6 +46151,482 @@ var DashboardLayout = ({
     ] })
   ] });
 };
+var getBadgeStyles = (type) => {
+  switch (type) {
+    case "gold":
+      return {
+        bg: "bg-gradient-to-br from-yellow-200 via-yellow-400 to-yellow-600",
+        shadow: "shadow-yellow-500/40",
+        text: "text-yellow-900",
+        iconColor: "text-yellow-900",
+        ring: "ring-yellow-400/30",
+        glow: "bg-yellow-400",
+        aura: "from-yellow-400/20 via-yellow-500/40 to-yellow-600/20"
+      };
+    case "silver":
+      return {
+        bg: "bg-gradient-to-br from-gray-100 via-gray-300 to-gray-400",
+        shadow: "shadow-gray-400/40",
+        text: "text-gray-800",
+        iconColor: "text-gray-700",
+        ring: "ring-gray-300/30",
+        glow: "bg-gray-300",
+        aura: "from-gray-300/20 via-gray-400/40 to-gray-500/20"
+      };
+    case "bronze":
+      return {
+        bg: "bg-gradient-to-br from-orange-200 via-orange-400 to-orange-700",
+        shadow: "shadow-orange-500/40",
+        text: "text-orange-900",
+        iconColor: "text-orange-900",
+        ring: "ring-orange-400/30",
+        glow: "bg-orange-400",
+        aura: "from-orange-400/20 via-orange-500/40 to-orange-600/20"
+      };
+    case "diamond":
+      return {
+        bg: "bg-gradient-to-br from-cyan-100 via-cyan-300 to-blue-500",
+        shadow: "shadow-cyan-400/40",
+        text: "text-blue-900",
+        iconColor: "text-blue-800",
+        ring: "ring-cyan-300/30",
+        glow: "bg-cyan-400",
+        aura: "from-cyan-300/20 via-blue-400/40 to-blue-600/20"
+      };
+    case "platinum":
+      return {
+        bg: "bg-gradient-to-br from-slate-200 via-slate-300 to-slate-400",
+        shadow: "shadow-slate-400/40",
+        text: "text-slate-800",
+        iconColor: "text-slate-700",
+        ring: "ring-slate-300/30",
+        glow: "bg-slate-300",
+        aura: "from-slate-300/20 via-slate-400/40 to-slate-500/20"
+      };
+    case "special":
+    default:
+      return {
+        bg: "bg-gradient-to-br from-purple-400 via-fuchsia-500 to-pink-600",
+        shadow: "shadow-purple-500/40",
+        text: "text-white",
+        iconColor: "text-white",
+        ring: "ring-purple-400/30",
+        glow: "bg-purple-400",
+        aura: "from-purple-400/20 via-fuchsia-500/40 to-pink-600/20"
+      };
+  }
+};
+var getDefaultIcon = (type) => {
+  switch (type) {
+    case "gold":
+      return Trophy;
+    case "silver":
+      return Medal;
+    case "bronze":
+      return Star;
+    case "diamond":
+      return Crown;
+    case "platinum":
+      return ShieldCheck;
+    case "special":
+      return Flame;
+    default:
+      return Trophy;
+  }
+};
+var AwardBadge = ({
+  type,
+  title,
+  date,
+  icon: CustomIcon,
+  className,
+  description,
+  floating = true
+}) => {
+  const styles2 = getBadgeStyles(type);
+  const Icon2 = CustomIcon || getDefaultIcon(type);
+  const randomDelay = React25__default.useMemo(() => Math.random() * 2, []);
+  const floatingAnimation = {
+    animate: {
+      y: [0, -10, 0],
+      transition: {
+        duration: 3 + Math.random() * 2,
+        repeat: Infinity,
+        ease: "easeInOut",
+        delay: randomDelay
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      whileHover: "hover",
+      className: cn(
+        "relative flex flex-col items-center p-8 rounded-2xl border border-gray-100 bg-white shadow-sm transition-all duration-500 text-center group cursor-pointer",
+        className
+      ),
+      variants: {
+        hover: {
+          borderColor: "transparent",
+          boxShadow: `0 0 25px 2px var(--award-glow-color)`,
+          transition: { duration: 0.3 }
+        }
+      },
+      style: {
+        // @ts-ignore - custom property for the glow color
+        "--award-glow-color": type === "gold" ? "rgba(250, 204, 21, 0.4)" : type === "silver" ? "rgba(156, 163, 175, 0.4)" : type === "bronze" ? "rgba(251, 146, 60, 0.4)" : type === "diamond" ? "rgba(34, 211, 238, 0.4)" : type === "platinum" ? "rgba(148, 163, 184, 0.4)" : "rgba(192, 38, 211, 0.4)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            variants: {
+              hover: {
+                opacity: 1,
+                scale: 1.1,
+                transition: { duration: 0.4, ease: "easeOut" }
+              }
+            },
+            className: cn(
+              "absolute -inset-2 blur-3xl opacity-0 transition-all duration-700 rounded-[2.5rem] bg-gradient-to-br -z-20",
+              styles2.aura
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            variants: {
+              hover: { opacity: 0.2, scale: 1.5 }
+            },
+            className: cn(
+              "absolute top-1/4 left-1/2 -translate-x-1/2 blur-[40px] opacity-0 transition-all duration-700 rounded-full w-32 h-32 -z-10",
+              styles2.glow
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative mb-6 h-28 flex items-center justify-center", children: [
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              variants: floating ? floatingAnimation : void 0,
+              animate: floating ? "animate" : void 0,
+              whileHover: {
+                y: -15,
+                scale: 1.1,
+                transition: { duration: 0.3, ease: "easeOut" }
+              },
+              className: cn(
+                "relative w-24 h-24 rounded-full flex items-center justify-center shadow-lg ring-4 transition-all duration-500",
+                styles2.bg,
+                styles2.shadow,
+                styles2.ring
+              ),
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full bg-gradient-to-tr from-white/40 via-transparent to-transparent pointer-events-none" }),
+                /* @__PURE__ */ jsx(Icon2, { className: cn("w-12 h-12 drop-shadow-md", styles2.iconColor) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              variants: {
+                animate: {
+                  scale: [1, 0.8, 1],
+                  opacity: [0.2, 0.1, 0.2]
+                },
+                hover: {
+                  scale: 0.6,
+                  opacity: 0.05
+                }
+              },
+              animate: "animate",
+              transition: {
+                duration: 3 + Math.random() * 2,
+                repeat: Infinity,
+                ease: "easeInOut",
+                delay: randomDelay
+              },
+              className: "absolute -bottom-1 left-1/2 -translate-x-1/2 w-12 h-1.5 bg-black/10 blur-sm rounded-[100%]"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1 z-10", children: [
+          /* @__PURE__ */ jsx("h3", { className: "font-bold text-gray-900 text-lg leading-tight transition-colors", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-gray-400 uppercase tracking-widest", children: date }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-3 line-clamp-2 max-w-[200px]", children: description })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-2xl bg-gradient-to-tr from-white/0 via-white/0 to-white/5 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" })
+      ]
+    }
+  );
+};
+var Button2 = (props) => {
+  const { Button: RegisteredButton } = useRegistry();
+  return /* @__PURE__ */ jsx(RegisteredButton, { ...props });
+};
+var ConfettiPiece = ({ index }) => {
+  const colors = ["#fbbf24", "#3b82f6", "#8b5cf6", "#ec4899", "#10b981"];
+  const color2 = colors[index % colors.length];
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: {
+        x: 0,
+        y: 0,
+        rotate: 0,
+        scale: 0
+      },
+      animate: {
+        x: (Math.random() - 0.5) * 800,
+        y: (Math.random() - 0.5) * 800 - 100,
+        rotate: Math.random() * 360,
+        scale: [0, 1, 0.5, 0],
+        transition: {
+          duration: 2.5 + Math.random() * 1.5,
+          ease: [0.23, 1, 0.32, 1]
+        }
+      },
+      className: "absolute w-2 h-2 rounded-full z-50 opacity-60",
+      style: { backgroundColor: color2 }
+    }
+  );
+};
+var AwardOpeningModal = ({ isOpen, onClose, award }) => {
+  const [phase, setPhase] = useState("locked");
+  const [showConfetti, setShowConfetti] = useState(false);
+  useEffect(() => {
+    if (isOpen) {
+      setPhase("locked");
+      setShowConfetti(false);
+    }
+  }, [isOpen]);
+  const handleReveal = () => {
+    setPhase("opening");
+    setTimeout(() => {
+      setPhase("revealed");
+      setShowConfetti(true);
+    }, 1e3);
+  };
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[100] flex items-center justify-center p-4", children: [
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        className: "absolute inset-0 bg-slate-950/90 backdrop-blur-xl",
+        onClick: phase === "revealed" ? onClose : void 0
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-lg flex flex-col items-center", children: [
+      showConfetti && Array.from({ length: 100 }).map((_, i) => /* @__PURE__ */ jsx(ConfettiPiece, { index: i }, i)),
+      /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: phase === "locked" || phase === "opening" ? /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: { opacity: 0, y: 20 },
+          animate: { opacity: 1, y: 0 },
+          exit: { opacity: 0, scale: 1.1, filter: "blur(10px)" },
+          className: "flex flex-col items-center",
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `w-64 h-80 rounded-3xl border border-white/10 bg-white/5 backdrop-blur-sm flex flex-col items-center justify-center cursor-pointer transition-all duration-500 hover:bg-white/10 ${phase === "opening" ? "scale-110 ring-4 ring-blue-500/20" : ""}`,
+              onClick: phase === "locked" ? handleReveal : void 0,
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("div", { className: "w-20 h-20 rounded-full border-2 border-white/20 flex items-center justify-center", children: /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    animate: phase === "opening" ? { rotate: 360 } : { rotate: 0 },
+                    transition: { duration: 1, repeat: Infinity, ease: "linear" },
+                    children: /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded-full bg-gradient-to-tr from-blue-500 to-cyan-400 opacity-50 blur-sm" })
+                  }
+                ) }) }),
+                /* @__PURE__ */ jsx("p", { className: "mt-8 text-white font-semibold tracking-[0.2em] text-xs uppercase opacity-60", children: phase === "opening" ? "Unlocking Achievement" : "Click to Unlock" })
+              ]
+            }
+          )
+        },
+        "locked"
+      ) : /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          initial: { scale: 0.9, opacity: 0 },
+          animate: { scale: 1, opacity: 1 },
+          transition: { type: "spring", damping: 20, stiffness: 100 },
+          className: "flex flex-col items-center",
+          children: [
+            /* @__PURE__ */ jsxs(
+              motion.div,
+              {
+                initial: { y: 10, opacity: 0 },
+                animate: { y: 0, opacity: 1 },
+                transition: { delay: 0.3 },
+                className: "mb-10 text-center space-y-2",
+                children: [
+                  /* @__PURE__ */ jsx("h2", { className: "text-white text-3xl font-bold tracking-tight", children: "Congratulations" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-blue-400 font-medium text-sm tracking-widest uppercase", children: "New Achievement Unlocked" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "relative group", children: /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: { scale: 0.8, opacity: 0 },
+                animate: { scale: 1, opacity: 1 },
+                transition: { delay: 0.2, type: "spring" },
+                children: /* @__PURE__ */ jsx(
+                  AwardBadge,
+                  {
+                    ...award,
+                    className: "w-80 h-auto shadow-[0_32px_64px_-12px_rgba(0,0,0,0.5)] border-white/10",
+                    floating: true
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: { opacity: 0, y: 10 },
+                animate: { opacity: 1, y: 0 },
+                transition: { delay: 0.8 },
+                className: "mt-12",
+                children: /* @__PURE__ */ jsx(
+                  Button2,
+                  {
+                    size: "lg",
+                    onClick: onClose,
+                    className: "bg-white text-slate-950 hover:bg-slate-100 px-10 py-3 text-sm font-bold rounded-full transition-all hover:scale-105 active:scale-95",
+                    children: "Continue"
+                  }
+                )
+              }
+            )
+          ]
+        },
+        "revealed"
+      ) })
+    ] })
+  ] }) });
+};
+var AwardCongratsToast = ({ notification, onDismiss }) => {
+  useEffect(() => {
+    const timer = setTimeout(onDismiss, 8e3);
+    return () => clearTimeout(timer);
+  }, [onDismiss]);
+  const award = notification.awards;
+  const winnerName = award?.recipient_name || "a teammate";
+  const awardTitle = getAwardTitle(award.award_type);
+  const monthLabel = formatAwardMonth(award.period_start);
+  const initials = getInitials(winnerName);
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 20, scale: 0.95 },
+      animate: { opacity: 1, y: 0, scale: 1 },
+      exit: { opacity: 0, y: 10, scale: 0.98 },
+      transition: { duration: 0.25, ease: "easeOut" },
+      className: "fixed bottom-6 right-6 z-50 w-[320px] rounded-xl border border-amber-200 bg-white shadow-lg",
+      role: "alert",
+      "aria-live": "polite",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 p-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex h-12 w-12 items-center justify-center rounded-full bg-amber-100 text-amber-600 font-semibold", children: [
+          initials,
+          /* @__PURE__ */ jsx("div", { className: "absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white shadow-sm border border-amber-100", children: /* @__PURE__ */ jsx(Trophy, { className: "h-3.5 w-3.5 text-amber-500 fill-amber-500" }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "text-sm font-semibold text-gray-900", children: [
+            "Congrats to ",
+            winnerName
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-600 mt-1", children: [
+            awardTitle,
+            " \u2022 ",
+            monthLabel
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onDismiss,
+            className: "text-gray-400 hover:text-gray-600 transition-colors",
+            "aria-label": "Dismiss notification",
+            children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+          }
+        )
+      ] })
+    }
+  );
+};
+var buildAwardProps = (award) => ({
+  type: getAwardBadgeType(award.award_type),
+  title: getAwardTitle(award.award_type),
+  date: formatAwardMonth(award.period_start),
+  description: getAwardDescription(award)
+});
+var AwardNotificationManager = () => {
+  const supabase = useSupabase();
+  const { user } = useAuth();
+  const [queue, setQueue] = useState([]);
+  const [activeNotification, setActiveNotification] = useState(null);
+  const lastUserIdRef = useRef(null);
+  useEffect(() => {
+    if (!user) {
+      lastUserIdRef.current = null;
+      return;
+    }
+    if (lastUserIdRef.current === user.id) return;
+    lastUserIdRef.current = user.id;
+    const loadNotifications = async () => {
+      try {
+        const notifications = await awardsService.getNotifications(supabase);
+        setQueue(notifications);
+      } catch (error) {
+        console.error("[AwardNotificationManager] Failed to load notifications:", error);
+      }
+    };
+    loadNotifications();
+  }, [user, supabase]);
+  useEffect(() => {
+    if (!activeNotification && queue.length > 0) {
+      setActiveNotification(queue[0]);
+    }
+  }, [queue, activeNotification]);
+  const dismissActive = async () => {
+    if (!activeNotification) return;
+    try {
+      await awardsService.markNotificationsRead(supabase, [activeNotification.id]);
+    } catch (error) {
+      console.error("[AwardNotificationManager] Failed to mark notification read:", error);
+    } finally {
+      setQueue((prev) => prev.filter((item) => item.id !== activeNotification.id));
+      setActiveNotification(null);
+    }
+  };
+  const awardProps = useMemo(
+    () => activeNotification?.notification_type === "recipient" ? buildAwardProps(activeNotification.awards) : null,
+    [activeNotification]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    activeNotification?.notification_type === "recipient" && awardProps && /* @__PURE__ */ jsx(
+      AwardOpeningModal,
+      {
+        isOpen: true,
+        onClose: dismissActive,
+        award: awardProps
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: activeNotification?.notification_type === "congrats" && /* @__PURE__ */ jsx(
+      AwardCongratsToast,
+      {
+        notification: activeNotification,
+        onDismiss: dismissActive
+      }
+    ) })
+  ] });
+};
 var MainLayoutInner = ({
   children,
   className = "",
@@ -45354,7 +46656,8 @@ var MainLayoutInner = ({
         onMobileMenuClose
       }
     ),
-    /* @__PURE__ */ jsx("main", { className: "md:ml-20 bg-gray-50 min-h-screen transition-all duration-300", children: /* @__PURE__ */ jsx("div", { className: "h-full", children }) })
+    /* @__PURE__ */ jsx("main", { className: "md:ml-20 bg-gray-50 min-h-screen transition-all duration-300", children: /* @__PURE__ */ jsx("div", { className: "h-full", children }) }),
+    /* @__PURE__ */ jsx(AwardNotificationManager, {})
   ] });
 };
 var MainLayout = ({
@@ -46908,8 +48211,9 @@ var InviteUserDialog = ({
   const [error, setError] = useState(null);
   const [isLinesDropdownOpen, setIsLinesDropdownOpen] = useState(false);
   const [isFactoriesDropdownOpen, setIsFactoriesDropdownOpen] = useState(false);
-  const canInvitePlantHead = user?.role_level === "owner" || user?.role_level === "optifye";
-  const canInviteSupervisor = ["owner", "plant_head", "optifye"].includes(user?.role_level || "");
+  const canInviteIT = user?.role_level === "owner" || user?.role_level === "optifye";
+  const canInvitePlantHead = user?.role_level === "owner" || user?.role_level === "it" || user?.role_level === "optifye";
+  const canInviteSupervisor = ["owner", "it", "plant_head", "optifye"].includes(user?.role_level || "");
   useEffect(() => {
     if (!isOpen) {
       setEmail("");
@@ -47138,6 +48442,33 @@ var InviteUserDialog = ({
                     /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
                   ] }),
                   /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                    canInviteIT && /* @__PURE__ */ jsxs(
+                      "label",
+                      {
+                        className: cn(
+                          "flex items-start gap-3 p-4 border-2 rounded-lg cursor-pointer transition-all duration-200",
+                          selectedRole === "it" ? "border-teal-500 bg-teal-50" : "border-gray-200 hover:border-gray-300 hover:bg-gray-50"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "input",
+                            {
+                              type: "radio",
+                              name: "role",
+                              value: "it",
+                              checked: selectedRole === "it",
+                              onChange: (e) => setSelectedRole(e.target.value),
+                              className: "mt-1",
+                              disabled: isSubmitting
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 mb-1", children: /* @__PURE__ */ jsx(RoleBadge_default, { role: "it", size: "sm" }) }),
+                            /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600", children: "Company-wide access. IT personnel with full company access." })
+                          ] })
+                        ]
+                      }
+                    ),
                     canInvitePlantHead && /* @__PURE__ */ jsxs(
                       "label",
                       {
@@ -47362,6 +48693,7 @@ var getRoleLabel = (role) => {
   const labels = {
     "supervisor": "Supervisor",
     "plant_head": "Plant Head",
+    "it": "IT",
     "owner": "Owner",
     "optifye": "Optifye Admin"
   };
@@ -47637,27 +48969,41 @@ var ConfirmRemoveUserDialog = ({
     ] })
   ] }) });
 };
-var EditUserNameDialog = ({
+var EditUserProfileDialog = ({
   isOpen,
   onClose,
   onSave,
   user
 }) => {
+  const supabase = useSupabase();
   const [firstName, setFirstName] = useState("");
   const [lastName, setLastName] = useState("");
+  const [profilePhotoUrl, setProfilePhotoUrl] = useState(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState(null);
   useEffect(() => {
     if (isOpen && user) {
       setFirstName(user.first_name || "");
       setLastName(user.last_name || "");
+      setProfilePhotoUrl(user.profile_photo_url || null);
       setError(null);
     } else if (!isOpen) {
       setFirstName("");
       setLastName("");
+      setProfilePhotoUrl(null);
       setError(null);
     }
   }, [isOpen, user]);
+  const handlePhotoUploadComplete = (url) => {
+    setProfilePhotoUrl(url);
+    toast.success("Photo uploaded successfully");
+  };
+  const handlePhotoUploadError = (err) => {
+    toast.error(err.message || "Failed to upload photo");
+  };
+  const handleRemovePhoto = () => {
+    setProfilePhotoUrl(null);
+  };
   const handleSubmit = async (e) => {
     e.preventDefault();
     setError(null);
@@ -47674,14 +49020,15 @@ var EditUserNameDialog = ({
       await onSave(
         user.user_id,
         firstName.trim(),
-        lastName.trim() || void 0
+        lastName.trim() || void 0,
+        profilePhotoUrl
       );
-      toast.success("User name updated successfully");
+      toast.success("Profile updated successfully");
       onClose();
     } catch (err) {
-      console.error("Error updating user name:", err);
-      setError(err.message || "Failed to update user name");
-      toast.error(err.message || "Failed to update user name");
+      console.error("Error updating user profile:", err);
+      setError(err.message || "Failed to update profile");
+      toast.error(err.message || "Failed to update profile");
     } finally {
       setIsSubmitting(false);
     }
@@ -47703,7 +49050,7 @@ var EditUserNameDialog = ({
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
                 /* @__PURE__ */ jsx("div", { className: "p-2 bg-blue-100 rounded-lg", children: /* @__PURE__ */ jsx(User, { className: "w-5 h-5 text-blue-600" }) }),
                 /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-gray-900", children: "Edit User Name" }),
+                  /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-gray-900", children: "Edit Profile" }),
                   /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: user.email })
                 ] })
               ] }),
@@ -47723,6 +49070,25 @@ var EditUserNameDialog = ({
                 /* @__PURE__ */ jsx(AlertCircle, { className: "w-4 h-4 flex-shrink-0 mt-0.5" }),
                 /* @__PURE__ */ jsx("span", { children: error })
               ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center mb-6", children: [
+                /* @__PURE__ */ jsx(
+                  AvatarUpload,
+                  {
+                    currentImageUrl: profilePhotoUrl,
+                    firstName: firstName || user.first_name,
+                    lastName: lastName || user.last_name,
+                    email: user.email,
+                    userId: user.user_id,
+                    onUploadComplete: handlePhotoUploadComplete,
+                    onUploadError: handlePhotoUploadError,
+                    onRemove: handleRemovePhoto,
+                    size: "lg",
+                    disabled: isSubmitting,
+                    supabase
+                  }
+                ),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-2", children: "Click to upload photo" })
+              ] }),
               /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
                 /* @__PURE__ */ jsxs("div", { children: [
                   /* @__PURE__ */ jsxs("label", { htmlFor: "editFirstName", className: "block text-sm font-medium text-gray-700 mb-2", children: [
@@ -47744,8 +49110,7 @@ var EditUserNameDialog = ({
                       ),
                       placeholder: "John",
                       disabled: isSubmitting,
-                      required: true,
-                      autoFocus: true
+                      required: true
                     }
                   )
                 ] }),
@@ -48709,7 +50074,7 @@ var UserManagementTable = ({
   onRemoveUser,
   onLineAssignmentUpdate,
   onFactoryAssignmentUpdate,
-  onNameUpdate,
+  onProfileUpdate,
   availableLines = [],
   availableFactories = [],
   currentUserId,
@@ -48722,8 +50087,9 @@ var UserManagementTable = ({
   const availableRoles = useMemo(() => {
     const currentRole = currentUser?.role_level;
     const roleHierarchy = {
-      "optifye": ["optifye", "owner", "plant_head", "supervisor"],
-      "owner": ["owner", "plant_head", "supervisor"],
+      "optifye": ["optifye", "owner", "it", "plant_head", "supervisor"],
+      "owner": ["owner", "it", "plant_head", "supervisor"],
+      "it": ["it", "plant_head", "supervisor"],
       "plant_head": ["plant_head", "supervisor"],
       "supervisor": ["supervisor"]
     };
@@ -48814,7 +50180,7 @@ var UserManagementTable = ({
     }
   };
   const formatAssignments = (user) => {
-    if (user.role_level === "owner") return "Company-wide";
+    if (user.role_level === "owner" || user.role_level === "it") return "Company-wide";
     if (user.role_level === "optifye") return "All companies";
     if (user.role_level === "plant_head" && user.assigned_factories) {
       return user.assigned_factories.join(", ") || "No factories assigned";
@@ -48848,14 +50214,14 @@ var UserManagementTable = ({
     setShowRemoveUserDialog(false);
     setSelectedUser(null);
   };
-  const handleEditName = (user) => {
+  const handleEditProfile = (user) => {
     setSelectedUser(user);
     setShowEditNameDialog(true);
     setOpenActionMenuId(null);
   };
-  const handleNameUpdateConfirm = async (userId, firstName, lastName) => {
-    if (onNameUpdate) {
-      await onNameUpdate(userId, firstName, lastName);
+  const handleProfileUpdateConfirm = async (userId, firstName, lastName, profilePhotoUrl) => {
+    if (onProfileUpdate) {
+      await onProfileUpdate(userId, firstName, lastName, profilePhotoUrl);
     }
     setShowEditNameDialog(false);
     setSelectedUser(null);
@@ -48889,6 +50255,7 @@ var UserManagementTable = ({
               /* @__PURE__ */ jsx("option", { value: "all", children: "All Roles" }),
               availableRoles.includes("optifye") && /* @__PURE__ */ jsx("option", { value: "optifye", children: "Optifye" }),
               availableRoles.includes("owner") && /* @__PURE__ */ jsx("option", { value: "owner", children: "Owner" }),
+              availableRoles.includes("it") && /* @__PURE__ */ jsx("option", { value: "it", children: "IT" }),
               availableRoles.includes("plant_head") && /* @__PURE__ */ jsx("option", { value: "plant_head", children: "Plant Head" }),
               availableRoles.includes("supervisor") && /* @__PURE__ */ jsx("option", { value: "supervisor", children: "Supervisor" })
             ]
@@ -48954,7 +50321,18 @@ var UserManagementTable = ({
               ),
               children: [
                 /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                  /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-10 h-10 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-blue-700", children: user.first_name ? user.first_name.charAt(0).toUpperCase() : user.email.charAt(0).toUpperCase() }) }),
+                  /* @__PURE__ */ jsx(
+                    UserAvatar,
+                    {
+                      imageUrl: user.profile_photo_url,
+                      firstName: user.first_name,
+                      lastName: user.last_name,
+                      email: user.email,
+                      size: "lg",
+                      showBorder: false,
+                      className: "flex-shrink-0 bg-gradient-to-br from-blue-100 to-indigo-100"
+                    }
+                  ),
                   /* @__PURE__ */ jsxs("div", { children: [
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                       user.first_name ? /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium text-gray-900", children: [
@@ -49090,22 +50468,22 @@ var UserManagementTable = ({
               })(),
               (() => {
                 const user = users.find((u) => u.user_id === openActionMenuId);
-                const canEditName = user && onNameUpdate && permissions.canChangeRole(user);
+                const canEditProfile = user && onProfileUpdate && permissions.canChangeRole(user);
                 const canShowUsage = showUsageStats && user && (user.role_level === "plant_head" || user.role_level === "supervisor");
-                return canEditName && /* @__PURE__ */ jsxs(Fragment, { children: [
+                return canEditProfile && /* @__PURE__ */ jsxs(Fragment, { children: [
                   canShowUsage && /* @__PURE__ */ jsx("div", { className: "border-t border-gray-200 my-1" }),
                   /* @__PURE__ */ jsxs(
                     "button",
                     {
                       onClick: () => {
                         if (user) {
-                          handleEditName(user);
+                          handleEditProfile(user);
                         }
                       },
                       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__ */ jsx(Pencil, { className: "w-4 h-4" }),
-                        "Edit Name"
+                        "Edit Profile"
                       ]
                     }
                   )
@@ -49116,9 +50494,9 @@ var UserManagementTable = ({
                 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");
-                const hasEditNameAbove = !!onNameUpdate && canChangeRole;
+                const hasEditProfileAbove = !!onProfileUpdate && canChangeRole;
                 return canChangeRole && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  canShowUsage && !hasEditNameAbove && /* @__PURE__ */ jsx("div", { className: "border-t border-gray-200 my-1" }),
+                  canShowUsage && !hasEditProfileAbove && /* @__PURE__ */ jsx("div", { className: "border-t border-gray-200 my-1" }),
                   /* @__PURE__ */ jsxs(
                     "button",
                     {
@@ -49191,14 +50569,14 @@ var UserManagementTable = ({
       }
     ),
     showEditNameDialog && selectedUser && /* @__PURE__ */ jsx(
-      EditUserNameDialog,
+      EditUserProfileDialog,
       {
         isOpen: showEditNameDialog,
         onClose: () => {
           setShowEditNameDialog(false);
           setSelectedUser(null);
         },
-        onSave: handleNameUpdateConfirm,
+        onSave: handleProfileUpdateConfirm,
         user: selectedUser
       }
     ),
@@ -49417,7 +50795,7 @@ function formatRoleDisplay(role) {
   }
 }
 function getAssignmentText(user) {
-  if (user.role_level === "owner") return "Company-wide";
+  if (user.role_level === "owner" || user.role_level === "it") return "Company-wide";
   if (user.role_level === "optifye") return "All companies";
   if (user.role_level === "plant_head" && user.assigned_factories) {
     return user.assigned_factories.join(", ") || "No factories assigned";
@@ -50452,8 +51830,11 @@ function HomeView({
   const fallbackLineId = visibleLineIds[0] || defaultLineId;
   const defaultHomeLineId = fallbackLineId;
   const availableLineIds = useMemo(() => {
+    if (visibleLineIds.length > 1) {
+      return [...visibleLineIds, factoryViewId];
+    }
     return visibleLineIds;
-  }, [visibleLineIds]);
+  }, [visibleLineIds, factoryViewId]);
   const LINE_FILTER_STORAGE_KEY = "optifye_home_line_filter";
   const [selectedLineId, setSelectedLineId] = useState(() => {
     if (typeof window === "undefined") {
@@ -50462,7 +51843,7 @@ function HomeView({
     try {
       const savedLineId = sessionStorage.getItem(LINE_FILTER_STORAGE_KEY);
       if (savedLineId) {
-        if (savedLineId !== factoryViewId && availableLineIds.includes(savedLineId)) {
+        if (availableLineIds.includes(savedLineId)) {
           return savedLineId;
         }
       }
@@ -52788,6 +54169,8 @@ var KPIDetailView = ({
 };
 var KPIDetailViewWithDisplayNames = withSelectedLineDisplayNames(KPIDetailView);
 var KPIDetailView_default = KPIDetailViewWithDisplayNames;
+var isNonEmptyString = (value) => typeof value === "string" && value.trim().length > 0;
+var resolveCompanyId = (...candidates) => candidates.find(isNonEmptyString);
 var LineCard = ({
   line,
   kpis,
@@ -52795,7 +54178,8 @@ var LineCard = ({
   error,
   onClick,
   supervisorEnabled = false,
-  supervisorName
+  supervisorName,
+  supervisors
 }) => {
   const isOnTrack = React25__default.useMemo(() => {
     if (!kpis) return null;
@@ -52813,10 +54197,20 @@ var LineCard = ({
         /* @__PURE__ */ jsx("div", { className: "mb-4 sm:mb-5 md:mb-6", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start gap-2 sm:gap-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ jsx("h3", { className: "text-lg sm:text-xl font-semibold text-gray-900 break-words", children: line.line_name }),
-            supervisorEnabled && /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600 mt-1", children: [
+            supervisorEnabled && /* @__PURE__ */ jsx("div", { className: "mt-1.5", children: supervisors && supervisors.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: supervisors.map((supervisor) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 bg-gray-50 rounded-full pl-0.5 pr-2.5 py-0.5 border border-gray-100 hover:border-gray-200 transition-all duration-300 ease-out group/supervisor hover:scale-150 hover:z-50 hover:shadow-lg relative", children: [
+              /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded-full overflow-hidden bg-white border border-gray-100 shadow-sm flex-shrink-0", children: supervisor.profilePhotoUrl ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: supervisor.profilePhotoUrl,
+                  alt: supervisor.displayName,
+                  className: "w-full h-full object-cover"
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-50 text-[9px] font-bold text-gray-500 uppercase", children: getInitials(supervisor.displayName) }) }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700 truncate max-w-[120px]", children: supervisor.displayName })
+            ] }, supervisor.userId)) }) : /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600", children: [
               "Supervisor: ",
               supervisorName || "Unassigned"
-            ] })
+            ] }) })
           ] }),
           kpis && isOnTrack !== null && /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-1.5 px-2.5 sm:px-3 py-1 sm:py-1.5 rounded-full text-xs font-medium flex-shrink-0 ${isOnTrack ? "bg-emerald-100 text-emerald-700 border border-emerald-200" : "bg-red-100 text-red-700 border border-red-200"}`, style: { minWidth: "fit-content" }, children: [
             /* @__PURE__ */ jsx("div", { className: `w-2 h-2 rounded-full ${isOnTrack ? "bg-emerald-500" : "bg-red-500"} animate-pulse` }),
@@ -52903,9 +54297,22 @@ var KPIsOverviewView = ({
   const [lines, setLines] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [topPerformer, setTopPerformer] = useState({
+    name: "Top Performer",
+    role: "Sup.",
+    unit: "Line",
+    periodLabel: "Last Week",
+    efficiency: null,
+    imageUrl: null,
+    initials: "TP"
+  });
+  const [topPerformerLoading, setTopPerformerLoading] = useState(true);
+  const [topPerformerImageError, setTopPerformerImageError] = useState(false);
   const supabase = useSupabase();
   const dashboardConfig = useDashboardConfig();
   const entityConfig = useEntityConfig();
+  const configCompanyId = (dashboardConfig && typeof dashboardConfig === "object" && "company" in dashboardConfig ? dashboardConfig.company?.id : void 0) || dashboardConfig.customConfig?.companyId || dashboardConfig.customConfig?.company_id;
+  const resolvedCompanyId = resolveCompanyId(companyId, entityConfig.companyId, configCompanyId);
   const navigation = useNavigation(navigate);
   const dateTimeConfig = useDateTimeConfig();
   const mobileMenuContext = useMobileMenu();
@@ -52917,7 +54324,6 @@ var KPIsOverviewView = ({
   const configuredTimezone = dbTimezone || dateTimeConfig.defaultTimezone || "UTC";
   const factoryViewId = entityConfig.factoryViewId || "factory";
   const {
-    workspaceMetrics,
     lineMetrics,
     isLoading: metricsLoading,
     error: metricsError
@@ -52934,85 +54340,33 @@ var KPIsOverviewView = ({
     return map;
   }, [lineMetrics]);
   const visibleLineIds = React25__default.useMemo(() => lines.map((l) => l.id), [lines]);
-  const { supervisorNamesByLineId } = useSupervisorsByLineIds(visibleLineIds, {
+  const { supervisorNamesByLineId, supervisorsByLineId } = useSupervisorsByLineIds(visibleLineIds, {
     enabled: supervisorEnabled && visibleLineIds.length > 0
   });
   useEffect(() => {
-    if (!lineMetrics || !workspaceMetrics || lines.length === 0) {
-      return;
-    }
-    const toNumber2 = (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;
+    let isMounted = true;
+    const loadTopPerformer = async () => {
+      try {
+        const record = await weeklyTopPerformerService.getWeeklyTopPerformer(
+          supabase,
+          resolvedCompanyId
+        );
+        if (!isMounted) return;
+        if (record) {
+          setTopPerformer(buildTopPerformerDisplay(record));
+          setTopPerformerImageError(false);
+        }
+      } catch (err) {
+        console.error("[KPIsOverviewView] Failed to load top performer:", err);
+      } finally {
+        if (isMounted) setTopPerformerLoading(false);
       }
-      return 0;
     };
-    const lineById = new Map(lines.map((line) => [line.id, line]));
-    const workspacesByKey = /* @__PURE__ */ new Map();
-    workspaceMetrics.forEach((workspace) => {
-      if (!workspace.line_id || !workspace.date || workspace.shift_id === void 0) {
-        return;
-      }
-      const key = `${workspace.line_id}:${workspace.date}:${workspace.shift_id}`;
-      const bucket = workspacesByKey.get(key) || [];
-      bucket.push(workspace);
-      workspacesByKey.set(key, bucket);
-    });
-    lineMetrics.forEach((row) => {
-      const lineId = row?.line_id;
-      const shiftId = row?.shift_id;
-      const date = row?.date;
-      if (!lineId || !date || shiftId === void 0) {
-        return;
-      }
-      const line = lineById.get(lineId);
-      if (!line) {
-        return;
-      }
-      const key = `${lineId}:${date}:${shiftId}`;
-      const lineWorkspaces = workspacesByKey.get(key) || [];
-      const poorestPerformingWorkspaces = [...lineWorkspaces].sort((a, b) => (a.efficiency || 0) - (b.efficiency || 0)).slice(0, 5).map((ws) => ({
-        workspace_name: ws.workspace_name,
-        efficiency: ws.efficiency || 0,
-        action_count: ws.action_count || 0,
-        action_threshold: ws.action_threshold || 0
-      }));
-      const lineInfo = {
-        line_id: lineId,
-        line_name: line.line_name,
-        company_id: line.company_id || "",
-        company_name: line.company_name || "",
-        factory_id: line.factory_id || "",
-        factory_name: line.factory_name || "",
-        shift_id: shiftId,
-        date,
-        metrics: {
-          avg_efficiency: toNumber2(row.avg_efficiency),
-          avg_cycle_time: toNumber2(row.avg_cycle_time),
-          current_output: toNumber2(row.current_output),
-          ideal_output: toNumber2(row.ideal_output) || toNumber2(row.line_threshold),
-          total_workspaces: toNumber2(row.total_workspaces),
-          underperforming_workspaces: toNumber2(row.underperforming_workspaces),
-          underperforming_workspace_names: row.underperforming_workspace_names || [],
-          underperforming_workspace_uuids: row.underperforming_workspace_uuids || [],
-          output_array: row.output_array || [],
-          output_hourly: row.output_hourly || void 0,
-          line_threshold: toNumber2(row.line_threshold),
-          threshold_pph: toNumber2(row.threshold_pph),
-          shift_start: row.shift_start || void 0,
-          shift_end: row.shift_end || void 0,
-          last_updated: row.last_updated || (/* @__PURE__ */ new Date()).toISOString(),
-          poorest_performing_workspaces: poorestPerformingWorkspaces
-        }
-      };
-      lineDetailStore.setSnapshot(lineId, date, shiftId, {
-        lineInfo,
-        workspaces: lineWorkspaces
-      });
-    });
-  }, [lineMetrics, workspaceMetrics, lines]);
+    loadTopPerformer();
+    return () => {
+      isMounted = false;
+    };
+  }, [supabase, resolvedCompanyId]);
   useEffect(() => {
     trackCorePageView("KPIs Overview");
   }, []);
@@ -53048,6 +54402,29 @@ var KPIsOverviewView = ({
     };
     fetchLines();
   }, [supabase, dashboardConfig, lineIds]);
+  const formatTopPerformerWeek = (periodStart, periodEnd) => {
+    if (!periodStart || !periodEnd) return "Last Week";
+    const startDate = /* @__PURE__ */ new Date(`${periodStart}T00:00:00`);
+    const endDate = /* @__PURE__ */ new Date(`${periodEnd}T00:00:00`);
+    if (Number.isNaN(startDate.getTime()) || Number.isNaN(endDate.getTime())) return "Last Week";
+    const startLabel = startDate.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+    const endLabel = endDate.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+    return `${startLabel} - ${endLabel}`;
+  };
+  const buildTopPerformerDisplay = (record) => {
+    const name = record.recipient_name || "Supervisor";
+    const efficiencyValue = typeof record.avg_efficiency === "number" ? record.avg_efficiency : Number.parseFloat(String(record.avg_efficiency));
+    const efficiency = Number.isFinite(efficiencyValue) ? efficiencyValue : null;
+    return {
+      name,
+      role: "Sup.",
+      unit: record.unit || "Line",
+      periodLabel: formatTopPerformerWeek(record.period_start, record.period_end),
+      efficiency,
+      imageUrl: record.profile_photo_url || null,
+      initials: getInitials(name)
+    };
+  };
   const handleLineClick = (line, kpis) => {
     const trackProps = {
       line_id: line.id,
@@ -53086,6 +54463,9 @@ var KPIsOverviewView = ({
   };
   const currentShiftDetails = getCurrentShift(configuredTimezone, shiftConfig);
   const shiftName = (currentShiftDetails.shiftName || "Day").replace(/ Shift$/i, "");
+  const showTopPerformerImage = Boolean(topPerformer.imageUrl) && !topPerformerImageError;
+  const hasTopPerformerEfficiency = typeof topPerformer.efficiency === "number" && Number.isFinite(topPerformer.efficiency);
+  const topPerformerEfficiencyLabel = topPerformerLoading ? "--" : typeof topPerformer.efficiency === "number" && Number.isFinite(topPerformer.efficiency) ? `${topPerformer.efficiency.toFixed(1)}%` : "--";
   const getShiftIcon = (shiftId) => {
     const shiftNameLower = shiftName.toLowerCase();
     if (shiftNameLower.includes("day") || shiftNameLower.includes("morning") || shiftId === 0) {
@@ -53194,18 +54574,51 @@ var KPIsOverviewView = ({
           ] }) }),
           /* @__PURE__ */ jsx("div", { className: "w-12" })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-center gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-2", children: [
           /* @__PURE__ */ jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-gray-100 rounded-full", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: formatLocalDate2(/* @__PURE__ */ new Date()) }) }),
           /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-1 px-2.5 py-1 bg-gray-100 rounded-full", children: [
             /* @__PURE__ */ jsx("div", { className: "text-gray-700 scale-90", children: getShiftIcon(currentShiftDetails.shiftId) }),
             /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: shiftName })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-green-100 rounded-full", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-green-700", children: /* @__PURE__ */ jsx(ISTTimer_default, {}) }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 bg-white shadow-sm hover:shadow-md transition-all duration-300 ease-out hover:scale-[1.02] relative rounded-full pl-1.5 pr-4 py-1.5 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-full border border-gray-100 overflow-hidden bg-gray-50", children: showTopPerformerImage ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: topPerformer.imageUrl || "",
+                  alt: "Top Performer",
+                  className: "w-full h-full object-cover",
+                  onError: () => setTopPerformerImageError(true)
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-50 text-[11px] font-semibold text-gray-600", children: topPerformer.initials }) }),
+              /* @__PURE__ */ jsx("div", { className: "absolute -top-1 -right-1 bg-white rounded-full p-1 shadow-sm border border-gray-100", children: /* @__PURE__ */ jsx(Trophy, { className: "w-3 h-3 text-amber-500 fill-amber-500" }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 leading-none mb-0.5", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-amber-600 uppercase tracking-wide", children: "Top Performer" }),
+                /* @__PURE__ */ jsx("span", { className: "w-0.5 h-0.5 bg-gray-300 rounded-full" }),
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-gray-500", children: topPerformerLoading ? "Loading" : topPerformer.periodLabel })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 leading-none", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-gray-900", children: topPerformer.unit }),
+                /* @__PURE__ */ jsx("span", { className: "w-px h-2.5 bg-gray-200" }),
+                /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-500", children: [
+                  topPerformer.role,
+                  " ",
+                  topPerformer.name
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-gray-700", children: topPerformerEfficiencyLabel })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "hidden sm:block", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
-          /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center relative mb-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute left-0 z-10", children: /* @__PURE__ */ jsx(
             BackButtonMinimal,
             {
               onClick: handleBackClick,
@@ -53217,9 +54630,35 @@ var KPIsOverviewView = ({
           /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
             /* @__PURE__ */ jsx("h1", { className: "text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "Shop-floor overview" }),
             /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1 flex-shrink-0" })
-          ] }) })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "absolute right-0 z-10 flex items-center gap-1.5 sm:gap-2 lg:gap-3 cursor-default group pr-2 sm:pr-4 xl:pr-6", children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative z-10", children: [
+              /* @__PURE__ */ jsx("div", { className: "w-7 h-7 sm:w-8 sm:h-8 md:w-9 md:h-9 lg:w-10 lg:h-10 xl:w-12 xl:h-12 rounded-full border border-gray-100 overflow-hidden shadow-sm transition-all duration-300", children: showTopPerformerImage ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: topPerformer.imageUrl || "",
+                  alt: "Top Performer",
+                  className: "w-full h-full object-cover transform transition-transform duration-500 group-hover:scale-105",
+                  onError: () => setTopPerformerImageError(true)
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-50 text-[10px] sm:text-xs lg:text-sm font-semibold text-gray-600", children: topPerformer.initials }) }),
+              /* @__PURE__ */ jsx("div", { className: "absolute -bottom-0.5 sm:-bottom-1 -right-0.5 sm:-right-1 bg-white rounded-full p-0.5 sm:p-1 shadow-sm border border-gray-100 flex items-center justify-center ring-2 ring-white", children: /* @__PURE__ */ jsx(Trophy, { className: "w-2 h-2 sm:w-2.5 sm:h-2.5 lg:w-3 lg:h-3 xl:w-3.5 xl:h-3.5 text-amber-500 fill-amber-500 transition-all duration-300" }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center z-10 gap-0.5 min-w-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-1.5 lg:gap-2 leading-none", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-[8px] sm:text-[9px] lg:text-[10px] font-bold text-amber-600 uppercase tracking-wide sm:tracking-widest transition-all duration-300 truncate", children: "Top Performer" }),
+                /* @__PURE__ */ jsx("span", { className: "w-0.5 h-0.5 bg-gray-300 rounded-full flex-shrink-0" }),
+                /* @__PURE__ */ jsx("span", { className: "text-[8px] sm:text-[9px] lg:text-[10px] font-medium text-gray-500 transition-all duration-300 truncate", children: topPerformerLoading ? "Loading" : topPerformer.periodLabel })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-1.5 lg:gap-2 xl:gap-3 mt-0.5 transition-all duration-300 min-w-0", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm lg:text-base font-semibold text-gray-900 tracking-tight transition-all duration-300 truncate", children: topPerformer.unit }),
+                /* @__PURE__ */ jsx("span", { className: "w-px h-2.5 sm:h-3 lg:h-3.5 bg-gray-200 flex-shrink-0" }),
+                /* @__PURE__ */ jsx("span", { className: "text-[9px] sm:text-[10px] lg:text-xs font-bold text-gray-700 transition-all duration-300 truncate whitespace-nowrap", children: hasTopPerformerEfficiency ? `${topPerformer.efficiency?.toFixed(1)}% Eff.` : "TBD" })
+              ] })
+            ] })
+          ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3 md:gap-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "mt-2 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3 md:gap-4", children: [
           /* @__PURE__ */ jsx("div", { className: "text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(ISTTimer_default, {}) }),
           /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
           /* @__PURE__ */ jsx("span", { className: "text-sm md:text-base font-medium text-blue-600", children: formatLocalDate2(/* @__PURE__ */ new Date()) }),
@@ -53243,7 +54682,8 @@ var KPIsOverviewView = ({
         error: metricsError,
         onClick: (kpis) => handleLineClick(line, kpis),
         supervisorEnabled,
-        supervisorName: supervisorNamesByLineId.get(line.id) || null
+        supervisorName: supervisorNamesByLineId.get(line.id) || null,
+        supervisors: supervisorsByLineId?.get(line.id)
       },
       line.id
     )) }) })
@@ -54208,10 +55648,98 @@ function LoginView({
   );
 }
 var LoginView_default = LoginView;
-var Button2 = (props) => {
-  const { Button: RegisteredButton } = useRegistry();
-  return /* @__PURE__ */ jsx(RegisteredButton, { ...props });
+var AwardsSection = ({ className = "", variant = "card" }) => {
+  const supabase = useSupabase();
+  const { user } = useAuth();
+  const [awards, setAwards] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const buildAwardDisplay = useMemo(
+    () => (award) => ({
+      id: award.id,
+      type: getAwardBadgeType(award.award_type),
+      title: getAwardTitle(award.award_type),
+      date: formatAwardMonth(award.period_start),
+      description: getAwardDescription(award)
+    }),
+    []
+  );
+  useEffect(() => {
+    let isMounted = true;
+    const loadAwards = async () => {
+      if (!user) {
+        if (isMounted) setLoading(false);
+        return;
+      }
+      setLoading(true);
+      setError(null);
+      try {
+        const data = await awardsService.getMyAwards(supabase);
+        if (!isMounted) return;
+        setAwards(data.map(buildAwardDisplay));
+      } catch (err) {
+        if (!isMounted) return;
+        console.error("[AwardsSection] Failed to load awards:", err);
+        setError("Failed to load awards");
+      } finally {
+        if (isMounted) setLoading(false);
+      }
+    };
+    loadAwards();
+    return () => {
+      isMounted = false;
+    };
+  }, [user, supabase, buildAwardDisplay]);
+  const containerClasses = variant === "card" ? `bg-white/50 backdrop-blur-sm border border-gray-200/60 rounded-lg shadow-sm overflow-hidden ${className}` : `${className}`;
+  const headerClasses = variant === "card" ? "p-6 border-b border-gray-200/60 flex items-center justify-between" : "hidden";
+  const contentClasses = variant === "card" ? "p-6 bg-gradient-to-b from-white to-gray-50/50" : "py-8";
+  return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+    /* @__PURE__ */ jsx("div", { className: headerClasses, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "p-2 bg-gradient-to-br from-yellow-100 to-amber-100 rounded-lg border border-yellow-200 shadow-sm", children: /* @__PURE__ */ jsx(Award, { className: "h-5 w-5 text-amber-600" }) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("h2", { className: "text-xl font-semibold text-gray-900 flex items-center gap-2", children: [
+          "Achievements & Awards",
+          /* @__PURE__ */ jsx(Sparkles, { className: "h-4 w-4 text-amber-400" })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "Recognition for your outstanding contributions" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: contentClasses, children: [
+      (loading || error) && /* @__PURE__ */ jsx("div", { className: "mb-6 text-center text-sm text-gray-500", children: loading ? "Loading awards..." : error }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-12", children: [
+        /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: awards.map((award, index) => /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            layout: true,
+            initial: { opacity: 0, scale: 0.95 },
+            animate: { opacity: 1, scale: 1 },
+            transition: {
+              layout: { type: "spring", damping: 25, stiffness: 120 },
+              opacity: { duration: 0.4 },
+              scale: { type: "spring", damping: 15 }
+            },
+            className: "perspective-1000",
+            children: /* @__PURE__ */ jsx(AwardBadge, { ...award, className: "w-full max-w-none", floating: true })
+          },
+          award.id || `${award.title}-${award.date}-${index}`
+        )) }),
+        !loading && awards.length === 0 && /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            layout: true,
+            className: "flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-slate-200 p-6 text-slate-400 hover:border-slate-300 hover:text-slate-500 transition-all cursor-pointer group h-full min-h-[250px] hover:bg-white/40",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-full bg-slate-50/50 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform shadow-inner", children: /* @__PURE__ */ jsx(Sparkles, { className: "h-6 w-6" }) }),
+              /* @__PURE__ */ jsx("p", { className: "font-bold text-xs tracking-widest uppercase", children: "No Awards Yet" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-center mt-1 font-medium text-slate-400", children: "Keep up the great work!" })
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
 };
+var AwardsSection_default = AwardsSection;
 var ProfileView = () => {
   const { user, signOut, loading: authLoading } = useAuth();
   const supabase = useSupabase();
@@ -54219,7 +55747,7 @@ var ProfileView = () => {
   const { authConfig } = useDashboardConfig();
   const mobileMenuContext = useMobileMenu();
   useHideMobileHeader(!!mobileMenuContext);
-  const [activeTab, setActiveTab] = useState("profile");
+  const [activeTab, setActiveTab] = useState("awards");
   const [profileData, setProfileData] = useState({
     email: user?.email || ""
   });
@@ -54318,86 +55846,105 @@ var ProfileView = () => {
     return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ jsx(AlertCircle, { className: "h-12 w-12 text-red-500 mx-auto mb-4" }),
       /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Authentication Required" }),
-      /* @__PURE__ */ jsx("p", { className: "text-gray-600 mb-4", children: "Please sign in to access your profile." }),
       /* @__PURE__ */ jsx(Button2, { variant: "outline", onClick: () => navigation.navigate("/login"), children: "Sign In" })
     ] }) });
   }
-  const tabs = [
-    { id: "profile", label: "Profile", icon: User },
-    { id: "sessions", label: "Sessions", icon: Clock }
-  ];
-  return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-gray-50", children: /* @__PURE__ */ jsxs("div", { className: "max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6", children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-6 sm:mb-8", children: [
-      /* @__PURE__ */ jsx("div", { className: "sm:hidden pb-3 border-b border-gray-200", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-        mobileMenuContext && /* @__PURE__ */ jsx(
-          HamburgerButton,
-          {
-            onClick: mobileMenuContext.onMobileMenuOpen,
-            className: "flex-shrink-0 -ml-1"
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center justify-center", children: [
-          /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold text-gray-900", children: "Account Settings" }),
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500", children: "Manage your account" })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "w-12" })
-      ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Account Settings" }),
-          /* @__PURE__ */ jsx("p", { className: "text-gray-600 mt-2", children: "Manage your account settings and preferences" })
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
+    /* @__PURE__ */ jsxs("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "px-3 sm:px-4 md:px-6 py-2 sm:py-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "sm:hidden flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center", children: mobileMenuContext && /* @__PURE__ */ jsx(
+            HamburgerButton,
+            {
+              onClick: mobileMenuContext.onMobileMenuOpen,
+              className: "flex-shrink-0 -ml-1"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold text-gray-900", children: "My Profile" }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx("div", { className: "w-8 h-8 rounded-full border border-gray-200 overflow-hidden bg-white shadow-sm", children: profileData.avatar_url ? /* @__PURE__ */ jsx("img", { src: profileData.avatar_url, alt: "Profile", className: "w-full h-full object-cover" }) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center bg-blue-50", children: /* @__PURE__ */ jsx(User, { className: "w-4 h-4 text-blue-500" }) }) }) })
         ] }),
-        /* @__PURE__ */ jsxs(
-          Button2,
-          {
-            variant: "outline",
-            onClick: () => navigation.goToDashboard(),
-            className: "flex items-center gap-2",
-            children: [
-              /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
-              "Close"
-            ]
-          }
-        )
-      ] }) })
-    ] }),
-    error && /* @__PURE__ */ jsx("div", { className: "mb-6 p-4 bg-red-50 border border-red-200 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ jsx(AlertCircle, { className: "h-5 w-5 text-red-500 mr-2" }),
-      /* @__PURE__ */ jsx("span", { className: "text-red-700", children: error })
-    ] }) }),
-    success && /* @__PURE__ */ jsx("div", { className: "mb-6 p-4 bg-green-50 border border-green-200 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ jsx(Check, { className: "h-5 w-5 text-green-500 mr-2" }),
-      /* @__PURE__ */ jsx("span", { className: "text-green-700", children: success })
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row gap-8", children: [
-      /* @__PURE__ */ jsx("div", { className: "lg:w-64 flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "bg-white/50 backdrop-blur-sm border border-gray-200/60 rounded-lg shadow-sm", children: [
-        /* @__PURE__ */ jsx("div", { className: "p-6 border-b border-gray-200/60", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
-          /* @__PURE__ */ jsx("div", { className: "w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx(User, { className: "h-6 w-6 text-blue-600" }) }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("h3", { className: "font-semibold text-gray-900", children: profileData.full_name || "User" }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600", children: profileData.email })
-          ] })
+        /* @__PURE__ */ jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between relative", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(
+            BackButtonMinimal,
+            {
+              onClick: () => navigation.goToDashboard(),
+              text: "Back",
+              size: "default",
+              className: "bg-transparent border-transparent hover:bg-gray-100 pl-0"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("h1", { className: "absolute left-1/2 -translate-x-1/2 text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "My Profile" }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-full border border-gray-200 overflow-hidden bg-white shadow-sm ring-2 ring-gray-50 transition-transform hover:scale-105", children: profileData.avatar_url ? /* @__PURE__ */ jsx("img", { src: profileData.avatar_url, alt: "Profile", className: "w-full h-full object-cover" }) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center bg-blue-50", children: /* @__PURE__ */ jsx(User, { className: "w-5 h-5 text-blue-500" }) }) }) })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex mt-2 px-3 sm:px-4 md:px-6", children: [
+        /* @__PURE__ */ jsx("div", { className: "sm:hidden w-full pb-3", children: /* @__PURE__ */ jsxs("div", { className: "flex bg-gray-100 rounded-lg p-0.5", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => setActiveTab("awards"),
+              className: `flex-1 px-2 py-1.5 text-xs font-medium rounded-md transition-all duration-200 flex items-center justify-center gap-1.5 ${activeTab === "awards" ? "bg-white text-gray-900 shadow-sm" : "text-gray-600"}`,
+              children: [
+                /* @__PURE__ */ jsx(Award, { className: "w-3.5 h-3.5" }),
+                "Awards"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => setActiveTab("details"),
+              className: `flex-1 px-2 py-1.5 text-xs font-medium rounded-md transition-all duration-200 flex items-center justify-center gap-1.5 ${activeTab === "details" ? "bg-white text-gray-900 shadow-sm" : "text-gray-600"}`,
+              children: [
+                /* @__PURE__ */ jsx(User, { className: "w-3.5 h-3.5" }),
+                "Details"
+              ]
+            }
+          )
         ] }) }),
-        /* @__PURE__ */ jsx("nav", { className: "p-2", children: tabs.map((tab) => {
-          const Icon2 = tab.icon;
-          return /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs("div", { className: "hidden sm:flex items-center gap-2 mb-3 -ml-3", children: [
+          /* @__PURE__ */ jsxs(
             "button",
             {
-              onClick: () => setActiveTab(tab.id),
-              className: `w-full flex items-center space-x-3 px-4 py-3 text-left rounded-lg transition-colors ${activeTab === tab.id ? "bg-blue-50 text-blue-600" : "text-gray-700 hover:bg-gray-50"}`,
+              onClick: () => setActiveTab("awards"),
+              className: `px-3 py-1.5 text-sm font-medium rounded-lg transition-colors flex items-center gap-2 ${activeTab === "awards" ? "bg-blue-50 text-blue-600" : "text-gray-600 hover:bg-gray-50"}`,
               children: [
-                /* @__PURE__ */ jsx(Icon2, { className: "h-5 w-5" }),
-                /* @__PURE__ */ jsx("span", { className: "font-medium", children: tab.label })
+                /* @__PURE__ */ jsx(Award, { className: "w-4 h-4" }),
+                "Awards"
               ]
-            },
-            tab.id
-          );
-        }) })
-      ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxs("div", { className: "bg-white/50 backdrop-blur-sm border border-gray-200/60 rounded-lg shadow-sm", children: [
-        activeTab === "profile" && /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-6", children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-gray-900", children: "Profile Information" }),
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => setActiveTab("details"),
+              className: `px-3 py-1.5 text-sm font-medium rounded-lg transition-colors flex items-center gap-2 ${activeTab === "details" ? "bg-blue-50 text-blue-600" : "text-gray-600 hover:bg-gray-50"}`,
+              children: [
+                /* @__PURE__ */ jsx(User, { className: "w-4 h-4" }),
+                "Details"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("main", { className: "flex-1 p-4 sm:p-6 lg:p-8 max-w-7xl mx-auto w-full", children: [
+      error && /* @__PURE__ */ jsxs("div", { className: "mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center text-red-700", children: [
+        /* @__PURE__ */ jsx(AlertCircle, { className: "h-5 w-5 mr-2" }),
+        error
+      ] }),
+      success && /* @__PURE__ */ jsxs("div", { className: "mb-6 p-4 bg-green-50 border border-green-200 rounded-lg flex items-center text-green-700", children: [
+        /* @__PURE__ */ jsx(Check, { className: "h-5 w-5 mr-2" }),
+        success
+      ] }),
+      activeTab === "awards" && /* @__PURE__ */ jsx("div", { className: "animate-in fade-in slide-in-from-bottom-4 duration-500", children: /* @__PURE__ */ jsx(AwardsSection_default, { variant: "clean" }) }),
+      activeTab === "details" && /* @__PURE__ */ jsxs("div", { className: "space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500 max-w-4xl mx-auto", children: [
+        /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden", children: [
+          /* @__PURE__ */ jsxs("div", { className: "p-6 border-b border-gray-100 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Personal Information" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "Update your personal details here" })
+            ] }),
             /* @__PURE__ */ jsx(
               Button2,
               {
@@ -54406,15 +55953,15 @@ var ProfileView = () => {
                 className: "flex items-center gap-2",
                 children: isEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
-                  "Cancel"
+                  " Cancel"
                 ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx(Edit2, { className: "h-4 w-4" }),
-                  "Edit"
+                  " Edit"
                 ] })
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "p-6 grid grid-cols-1 md:grid-cols-2 gap-6", children: [
             /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Full Name" }),
               isEditing ? /* @__PURE__ */ jsx(
@@ -54423,94 +55970,75 @@ var ProfileView = () => {
                   type: "text",
                   value: profileData.full_name || "",
                   onChange: (e) => setProfileData((prev) => ({ ...prev, full_name: e.target.value })),
-                  className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
                 }
-              ) : /* @__PURE__ */ jsx("p", { className: "text-gray-900", children: profileData.full_name || "Not set" })
+              ) : /* @__PURE__ */ jsx("p", { className: "text-gray-900 font-medium", children: profileData.full_name || "Not set" })
             ] }),
             /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Email" }),
+              /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Email Address" }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx("p", { className: "text-gray-900", children: profileData.email }),
                 profileData.email_verified && /* @__PURE__ */ jsx(UserCheck, { className: "h-4 w-4 text-green-500" })
               ] })
             ] })
           ] }),
-          isEditing && /* @__PURE__ */ jsx("div", { className: "mt-6 flex gap-3", children: /* @__PURE__ */ jsx(Button2, { variant: "outline", onClick: handleSaveProfile, disabled: loading, children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          isEditing && /* @__PURE__ */ jsx("div", { className: "px-6 py-4 bg-gray-50 border-t border-gray-100 flex justify-end", children: /* @__PURE__ */ jsx(Button2, { onClick: handleSaveProfile, disabled: loading, children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "sm", className: "mr-2" }),
-            "Saving..."
+            " Saving..."
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(Save, { className: "h-4 w-4 mr-2" }),
-            "Save Changes"
+            " Save Changes"
           ] }) }) })
         ] }),
-        activeTab === "sessions" && /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-6", children: "Active Sessions" }),
-          /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsx("div", { className: "border border-gray-200/60 rounded-lg p-4 bg-white/30", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-green-500 rounded-full" }),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-900", children: "Current Session" }),
-                /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500", children: [
-                  navigator.userAgent.includes("Chrome") ? "Chrome" : navigator.userAgent.includes("Firefox") ? "Firefox" : navigator.userAgent.includes("Safari") ? "Safari" : "Unknown Browser",
-                  "\u2022 Last active now"
+        /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden", children: [
+          /* @__PURE__ */ jsxs("div", { className: "p-6 border-b border-gray-100", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Sessions & Security" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "Manage your active sessions and data" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "p-6 space-y-6", children: [
+            /* @__PURE__ */ jsxs("div", { className: "bg-green-50 border border-green-100 rounded-lg p-4 flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-green-500 rounded-full animate-pulse" }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-900", children: "Current Session" }),
+                  /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500 mt-0.5", children: [
+                    "Active now \u2022 ",
+                    navigator.userAgent.includes("Mac") ? "Mac OS" : "Windows"
+                  ] })
                 ] })
-              ] })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-green-700 bg-green-100 px-2 py-1 rounded-full", children: "Active" })
             ] }),
-            /* @__PURE__ */ jsx("span", { className: "text-sm text-green-600 font-medium", children: "Active" })
-          ] }) }) }),
-          /* @__PURE__ */ jsxs("div", { className: "mt-8 pt-6 border-t border-gray-200/60", children: [
-            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900 mb-4", children: "Data & Privacy" }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-              /* @__PURE__ */ jsxs(
-                Button2,
-                {
-                  variant: "outline",
-                  onClick: exportData,
-                  className: "flex items-center gap-2",
-                  children: [
-                    /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }),
-                    "Export Your Data"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                Button2,
-                {
-                  variant: "outline",
-                  className: "flex items-center gap-2 text-red-600 hover:text-red-700 border-red-200 hover:border-red-300",
-                  onClick: () => {
-                    if (confirm("Are you sure you want to delete your account? This action cannot be undone.")) {
-                      console.log("Account deletion requested");
-                    }
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" }),
-                    "Delete Account"
-                  ]
-                }
-              )
+            /* @__PURE__ */ jsxs("div", { className: "border-t border-gray-100 pt-6", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-900 mb-4", children: "Data Management" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-4", children: [
+                /* @__PURE__ */ jsxs(Button2, { variant: "outline", onClick: exportData, className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }),
+                  " Export Data"
+                ] }),
+                /* @__PURE__ */ jsxs(Button2, { variant: "outline", onClick: handleSignOut, className: "flex items-center gap-2 text-gray-700", children: [
+                  /* @__PURE__ */ jsx(LogOut, { className: "h-4 w-4" }),
+                  " Sign Out"
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  Button2,
+                  {
+                    variant: "ghost",
+                    className: "flex items-center gap-2 text-red-600 hover:text-red-700 hover:bg-red-50 ml-auto",
+                    onClick: () => confirm("Delete account?") && console.log("Delete"),
+                    children: [
+                      /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" }),
+                      " Delete Account"
+                    ]
+                  }
+                )
+              ] })
             ] })
           ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "border-t border-gray-200/60 p-6", children: /* @__PURE__ */ jsx(
-          Button2,
-          {
-            variant: "outline",
-            onClick: handleSignOut,
-            disabled: loading,
-            className: "flex items-center gap-2 text-red-600 hover:text-red-700 border-red-200 hover:border-red-300",
-            children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "sm", className: "mr-2" }),
-              "Signing out..."
-            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(LogOut, { className: "h-4 w-4" }),
-              "Sign Out"
-            ] })
-          }
-        ) })
-      ] }) })
+        ] })
+      ] })
     ] })
-  ] }) });
+  ] });
 };
 var ProfileView_default = ProfileView;
 var calculateShiftHours = (startTime, endTime, breaks = []) => {
@@ -57093,6 +58621,14 @@ var getInitialTab = (sourceType, defaultTab, fromMonthly, urlDate) => {
   }
   return "overview";
 };
+var getInitials3 = (name) => {
+  if (!name) return "??";
+  const parts = name.trim().split(" ");
+  if (parts.length >= 2) {
+    return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+  }
+  return name.substring(0, 2).toUpperCase();
+};
 var chartCardVariants = {
   initial: { opacity: 0, y: 10 },
   animate: {
@@ -57174,7 +58710,7 @@ var WorkspaceDetailView = ({
   const prewarmedClipsRef = useRef(/* @__PURE__ */ new Set());
   const prewarmInFlightRef = useRef(/* @__PURE__ */ new Set());
   const isClipsEnabled = dashboardConfig?.clipsConfig?.enabled ?? true;
-  dashboardConfig?.supervisorConfig?.enabled || false;
+  const supervisorEnabled = dashboardConfig?.supervisorConfig?.enabled || false;
   const effectiveLineId = lineId || selectedLineId;
   const { shiftConfig, isLoading: isShiftConfigLoading, isFromDatabase: isShiftConfigFromDatabase } = useDynamicShiftConfig(effectiveLineId);
   const currentShiftDetails = useMemo(() => {
@@ -57225,6 +58761,116 @@ var WorkspaceDetailView = ({
     buildIndex: true,
     subscriberId: "workspace-detail-view"
   });
+  const [prefetchedPercentileCounts, setPrefetchedPercentileCounts] = useState(null);
+  const percentileCountsAbortRef = useRef(null);
+  const percentileCountsInFlightRef = useRef(/* @__PURE__ */ new Set());
+  const { percentileDate, percentileShiftId } = useMemo(() => {
+    if (shift !== void 0 && shift !== null && date) {
+      const shiftNumber = Number(shift);
+      return {
+        percentileDate: date,
+        percentileShiftId: Number.isFinite(shiftNumber) ? shiftNumber : null
+      };
+    }
+    if ((shift === void 0 || shift === null) && isShiftConfigLoading) {
+      return { percentileDate: null, percentileShiftId: null };
+    }
+    const currentShift = getCurrentShift(timezone, shiftConfig);
+    if (shift !== void 0 && shift !== null) {
+      const shiftNumber = Number(shift);
+      return {
+        percentileDate: date || currentShift.date,
+        percentileShiftId: Number.isFinite(shiftNumber) ? shiftNumber : null
+      };
+    }
+    return {
+      percentileDate: date || currentShift.date,
+      percentileShiftId: currentShift.shiftId
+    };
+  }, [shift, date, timezone, shiftConfig, isShiftConfigLoading]);
+  const percentileCountsKey = useMemo(() => {
+    if (!workspaceId || !percentileDate || percentileShiftId === null || percentileShiftId === void 0) {
+      return null;
+    }
+    return `${workspaceId}:${percentileDate}:${percentileShiftId.toString()}:10`;
+  }, [workspaceId, percentileDate, percentileShiftId]);
+  useEffect(() => {
+    if (!percentileCountsKey) {
+      setPrefetchedPercentileCounts(null);
+      return;
+    }
+    if (prefetchedPercentileCounts && prefetchedPercentileCounts.key !== percentileCountsKey) {
+      setPrefetchedPercentileCounts(null);
+    }
+  }, [percentileCountsKey, prefetchedPercentileCounts]);
+  useEffect(() => {
+    if (!percentileCountsKey || !percentileDate || percentileShiftId === null || percentileShiftId === void 0) {
+      return;
+    }
+    if (prefetchedPercentileCounts?.key === percentileCountsKey) {
+      return;
+    }
+    if (percentileCountsInFlightRef.current.has(percentileCountsKey)) {
+      return;
+    }
+    percentileCountsInFlightRef.current.add(percentileCountsKey);
+    const controller = new AbortController();
+    percentileCountsAbortRef.current?.abort();
+    percentileCountsAbortRef.current = controller;
+    const fetchCounts = async () => {
+      try {
+        const response = await fetchWithSupabaseAuth(supabase, "/api/clips/supabase", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            action: "percentile-counts",
+            workspaceId,
+            startDate: `${percentileDate}T00:00:00Z`,
+            endDate: `${percentileDate}T23:59:59Z`,
+            percentile: 10,
+            shiftId: percentileShiftId
+          }),
+          signal: controller.signal,
+          redirectReason: "session_expired"
+        });
+        if (!response.ok) {
+          throw new Error(`API error: ${response.status}`);
+        }
+        const data = await response.json();
+        const fastCycles = data?.counts?.["fast-cycles"];
+        const slowCycles = data?.counts?.["slow-cycles"];
+        setPrefetchedPercentileCounts({
+          key: percentileCountsKey,
+          percentile: 10,
+          counts: {
+            "fast-cycles": typeof fastCycles === "number" ? fastCycles : 0,
+            "slow-cycles": typeof slowCycles === "number" ? slowCycles : 0
+          }
+        });
+      } catch (error2) {
+        if (error2.name === "AbortError") {
+          return;
+        }
+        console.error("[WorkspaceDetailView] Error prefetching percentile counts:", error2);
+      } finally {
+        percentileCountsInFlightRef.current.delete(percentileCountsKey);
+      }
+    };
+    if (typeof window !== "undefined" && "requestIdleCallback" in window) {
+      window.requestIdleCallback(() => {
+        fetchCounts();
+      }, { timeout: 1e3 });
+    } else {
+      setTimeout(() => {
+        fetchCounts();
+      }, 0);
+    }
+    return () => {
+      controller.abort();
+    };
+  }, [percentileCountsKey, percentileDate, percentileShiftId, workspaceId, supabase, prefetchedPercentileCounts]);
   const {
     metrics: historicMetrics,
     isLoading: historicLoading,
@@ -57373,7 +59019,7 @@ var WorkspaceDetailView = ({
     timezone,
     workspace
   ]);
-  const { supervisorName } = useLineSupervisor(workspace?.line_id || lineId);
+  const { supervisorName, supervisors } = useLineSupervisor(workspace?.line_id || lineId);
   useEffect(() => {
     if (onTabChange) {
       onTabChange(activeTab);
@@ -57430,7 +59076,7 @@ var WorkspaceDetailView = ({
     enabled: idleTimeReasonsEnabled,
     keepPreviousData: false
   });
-  const idleTimeChartKey = useMemo(() => {
+  useMemo(() => {
     return `${idleTimeReasonsDate || "date"}_${idleTimeReasonsShiftId ?? "shift"}`;
   }, [idleTimeReasonsDate, idleTimeReasonsShiftId]);
   const idleTimeData = useMemo(() => ({
@@ -57696,15 +59342,28 @@ var WorkspaceDetailView = ({
                 "aria-label": "Navigate back to previous page"
               }
             ) }),
-            /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 max-w-[calc(100%-200px)]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx("h1", { className: "text-lg md:text-xl lg:text-2xl xl:text-3xl font-semibold text-gray-900 truncate", children: formattedWorkspaceName }),
-              /* @__PURE__ */ jsxs("div", { className: "relative flex h-2.5 w-2.5", children: [
-                isLive && /* @__PURE__ */ jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" }),
-                /* @__PURE__ */ jsx("span", { className: clsx(
-                  "relative inline-flex rounded-full h-2.5 w-2.5",
-                  isLive ? "bg-green-500" : "bg-red-500"
-                ) })
-              ] })
+            /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 max-w-[calc(100%-200px)]", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx("h1", { className: "text-lg md:text-xl lg:text-2xl xl:text-3xl font-semibold text-gray-900 truncate", children: formattedWorkspaceName }),
+                /* @__PURE__ */ jsxs("div", { className: "relative flex h-2.5 w-2.5", children: [
+                  isLive && /* @__PURE__ */ jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" }),
+                  /* @__PURE__ */ jsx("span", { className: clsx(
+                    "relative inline-flex rounded-full h-2.5 w-2.5",
+                    isLive ? "bg-green-500" : "bg-red-500"
+                  ) })
+                ] })
+              ] }),
+              supervisorEnabled && supervisors && supervisors.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 justify-center", children: supervisors.map((supervisor) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 bg-gray-50 rounded-full pl-0.5 pr-2.5 py-0.5 border border-gray-100 hover:border-gray-200 transition-all duration-300 ease-out group/supervisor hover:scale-150 hover:z-50 hover:shadow-lg relative", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded-full overflow-hidden bg-white border border-gray-100 shadow-sm flex-shrink-0", children: supervisor.profilePhotoUrl ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: supervisor.profilePhotoUrl,
+                    alt: supervisor.displayName,
+                    className: "w-full h-full object-cover"
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-50 text-[9px] font-bold text-gray-500 uppercase", children: getInitials3(supervisor.displayName) }) }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700 truncate max-w-[120px]", children: supervisor.displayName })
+              ] }, supervisor.userId)) })
             ] }) }),
             activeTab !== "monthly_history" && /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-0 flex flex-col items-end gap-1", children: workspaceHealth && /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500", children: [
               "Last update: ",
@@ -57990,8 +59649,7 @@ var WorkspaceDetailView = ({
                         data: idleTimeData.chartData,
                         isLoading: idleTimeData.isLoading,
                         error: idleTimeData.error
-                      },
-                      idleTimeChartKey
+                      }
                     ) })
                   ]
                 }
@@ -58125,8 +59783,7 @@ var WorkspaceDetailView = ({
                           data: idleTimeData.chartData,
                           isLoading: idleTimeData.isLoading,
                           error: idleTimeData.error
-                        },
-                        idleTimeChartKey
+                        }
                       ) })
                     ]
                   }
@@ -58237,6 +59894,7 @@ var WorkspaceDetailView = ({
               shift,
               totalOutput: workspace?.total_actions,
               workspaceMetrics: detailedWorkspaceMetrics || void 0,
+              prefetchedPercentileCounts,
               className: "h-[calc(100vh-10rem)]"
             }
           ) })
@@ -59486,13 +61144,14 @@ var TeamManagementView = ({
   const [stats, setStats] = useState({
     totalUsers: 0,
     owners: 0,
+    it: 0,
     plantHeads: 0,
     supervisors: 0,
     optifye: 0
   });
   const [isAddUserDialogOpen, setIsAddUserDialogOpen] = useState(false);
-  const canAddUsers = user?.role_level === "owner" || user?.role_level === "optifye";
-  const canViewUsageStats = user?.role_level === "owner" || user?.role_level === "optifye";
+  const canAddUsers = user?.role_level === "owner" || user?.role_level === "it" || user?.role_level === "optifye";
+  const canViewUsageStats = user?.role_level === "owner" || user?.role_level === "it" || user?.role_level === "optifye";
   const companyIdForUsage = entityConfig?.companyId || user?.properties?.company_id;
   const usageDateRange = useMemo(() => {
     const today = /* @__PURE__ */ new Date();
@@ -59656,6 +61315,7 @@ var TeamManagementView = ({
         setStats({
           totalUsers: userStats.total,
           owners: userStats.owners,
+          it: userStats.it,
           plantHeads: userStats.plant_heads,
           supervisors: userStats.supervisors,
           optifye: userStats.optifye
@@ -59669,6 +61329,7 @@ var TeamManagementView = ({
         setStats({
           totalUsers: userStats.total,
           owners: userStats.owners,
+          it: userStats.it,
           plantHeads: userStats.plant_heads,
           supervisors: userStats.supervisors,
           optifye: 0
@@ -59753,19 +61414,20 @@ var TeamManagementView = ({
       toast.error("Failed to update factory assignments");
     }
   }, [supabase, user, loadData]);
-  const handleNameUpdate = useCallback(async (userId, firstName, lastName) => {
+  const handleProfileUpdate = useCallback(async (userId, firstName, lastName, profilePhotoUrl) => {
     if (!supabase || !user) return;
     try {
       const userManagementService = createUserManagementService(supabase);
-      await userManagementService.updateUserName({
+      await userManagementService.updateUserProfile({
         user_id: userId,
         first_name: firstName,
         last_name: lastName,
+        profile_photo_url: profilePhotoUrl,
         updated_by: user.id
       });
       loadData();
     } catch (err) {
-      console.error("Error updating user name:", err);
+      console.error("Error updating user profile:", err);
       throw err;
     }
   }, [supabase, user, loadData]);
@@ -59876,7 +61538,7 @@ var TeamManagementView = ({
         onRemoveUser: handleRemoveUser,
         onLineAssignmentUpdate: handleLineAssignmentUpdate,
         onFactoryAssignmentUpdate: handleFactoryAssignmentUpdate,
-        onNameUpdate: handleNameUpdate,
+        onProfileUpdate: handleProfileUpdate,
         availableLines,
         availableFactories,
         avgDailyUsage: avgDailyUsageMap,
@@ -61457,13 +63119,14 @@ var ImprovementCenterView = () => {
         const supervisors = await userService2.getCompanyUsers(companyId, "supervisor");
         if (cancelled) return;
         const members = supervisors.map((user2) => {
-          const rawName = user2.properties?.full_name || user2.email?.split("@")[0] || "Unknown";
+          const rawName = user2.first_name ? `${user2.first_name}${user2.last_name ? " " + user2.last_name : ""}` : user2.properties?.full_name || user2.email?.split("@")[0] || "Unknown";
           return {
             id: user2.user_id,
             name: rawName,
             role: user2.role_level,
             initials: buildInitials(rawName),
-            email: user2.email
+            email: user2.email,
+            profilePhotoUrl: user2.profile_photo_url
           };
         });
         members.sort((a, b) => a.name.localeCompare(b.name));
@@ -61804,7 +63467,16 @@ var ImprovementCenterView = () => {
                       /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: rec.assigned_user_ids.map((uid) => {
                         const user2 = teamMembersById.get(uid);
                         return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                          /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded-full bg-gray-100 text-gray-600 flex items-center justify-center text-[10px] font-bold border border-gray-200", children: user2?.initials || "??" }),
+                          /* @__PURE__ */ jsx(
+                            UserAvatar,
+                            {
+                              imageUrl: user2?.profilePhotoUrl,
+                              name: user2?.name,
+                              email: user2?.email,
+                              size: "sm",
+                              className: "border border-gray-200"
+                            }
+                          ),
                           /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-600", children: user2?.name || "Unknown" })
                         ] }, uid);
                       }) })
@@ -64399,4 +66071,4 @@ var streamProxyConfig = {
   }
 };
 
-export { ACTION_NAMES, AIAgentView_default as AIAgentView, AcceptInvite, AcceptInviteView_default as AcceptInviteView, AdvancedFilterDialog, AdvancedFilterPanel, AudioService, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthService, AuthenticatedBottleneckClipsView, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedShiftsView, AuthenticatedTargetsView, AuthenticatedTicketsView, AuthenticatedWorkspaceHealthView, AxelNotificationPopup, AxelOrb, BackButton, BackButtonMinimal, BarChart, BaseHistoryCalendar, BottleneckClipsModal, BottleneckClipsView_default as BottleneckClipsView, BottlenecksContent, BreakNotificationPopup, CachePrefetchStatus, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, ChangeRoleDialog, ClipFilterProvider, CompactWorkspaceHealthCard, ConfirmRemoveUserDialog, CongratulationsOverlay, CroppedHlsVideoPlayer, CroppedVideoPlayer, CycleTimeChart, CycleTimeOverTimeChart, DEFAULT_ANALYTICS_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_CONFIG, DEFAULT_DATABASE_CONFIG, DEFAULT_DATE_TIME_CONFIG, DEFAULT_ENDPOINTS_CONFIG, DEFAULT_ENTITY_CONFIG, DEFAULT_HOME_VIEW_CONFIG, DEFAULT_MAP_VIEW_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_SHIFT_DATA, DEFAULT_THEME_CONFIG, DEFAULT_VIDEO_CONFIG, DEFAULT_WORKSPACE_CONFIG, DEFAULT_WORKSPACE_POSITIONS, DashboardHeader, DashboardLayout, DashboardOverridesProvider, DashboardProvider, DateDisplay_default as DateDisplay, DateTimeDisplay, DebugAuth, DebugAuthView_default as DebugAuthView, DetailedHealthStatus, DiagnosisVideoModal, EmptyStateMessage, EncouragementOverlay, FactoryAssignmentDropdown, FactoryView_default as FactoryView, FileManagerFilters, FilterDialogTrigger, FirstTimeLoginDebug, FirstTimeLoginHandler, GaugeChart, GridComponentsPlaceholder, HamburgerButton, Header, HealthDateShiftSelector, HealthStatusGrid, HealthStatusIndicator, HelpView_default as HelpView, HlsVideoPlayer, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, ImprovementCenterView_default as ImprovementCenterView, InlineEditableText, InteractiveOnboardingTour, InvitationService, InvitationsTable, InviteUserDialog, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LINE_2_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend6 as Legend, LineAssignmentDropdown, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LinesService, LiveTimer, LoadingInline, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSkeleton, LoadingState, LoginPage, LoginView_default as LoginView, Logo, MainLayout, MapGridView, MetricCard_default as MetricCard, MinimalOnboardingPopup, MobileMenuProvider, NewClipsNotification, NoWorkspaceData, OnboardingDemo, OnboardingTour, OptifyeAgentClient, OptifyeLogoLoader_default as OptifyeLogoLoader, OutputProgressChart, PageHeader, PieChart4 as PieChart, PlayPauseIndicator, PrefetchConfigurationError, PrefetchError, PrefetchEvents, PrefetchStatus, PrefetchTimeoutError, ProfileView_default as ProfileView, RegistryProvider, RoleBadge, S3ClipsSupabaseService as S3ClipsService, S3Service, SKUManagementView, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SessionTracker, SessionTrackingContext, SessionTrackingProvider, SettingsPopup, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SignupWithInvitation, SilentErrorBoundary, SimpleOnboardingPopup, SingleVideoStream_default as SingleVideoStream, Skeleton, SubscriptionManager, SubscriptionManagerProvider, SupabaseProvider, SupervisorDropdown_default as SupervisorDropdown, SupervisorManagementView_default as SupervisorManagementView, SupervisorService, TargetWorkspaceGrid, TargetsView_default as TargetsView, TeamManagementView_default as TeamManagementView, TeamUsagePdfGenerator, ThreadSidebar, TicketHistory_default as TicketHistory, TicketHistoryService, TicketsView_default as TicketsView, TimeDisplay_default as TimeDisplay, TimePickerDropdown, Timer_default as Timer, TimezoneProvider, TimezoneService, UserManagementService, UserManagementTable, UserService, UserUsageDetailModal, UserUsageStats, VideoCard, VideoGridView, VideoPlayer, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceDisplayNameExample, WorkspaceGrid, WorkspaceGridItem, WorkspaceHealthCard, WorkspaceHealthView_default as WorkspaceHealthView, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMetricCardsImpl, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyHistory, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, aggregateKPIsFromLineMetricsRows, apiUtils, areAllLinesOnSameShift, authCoreService, authOTPService, authRateLimitService, buildDateKey, buildKPIsFromLineMetricsRow, buildShiftGroupsKey, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createDefaultKPIs, createInvitationService, createLinesService, createSessionTracker, createStreamProxyHandler, createSupabaseClient, createSupervisorService, createThrottledReload, createUserManagementService, createUserService, dashboardService, deleteThread, fetchIdleTimeReasons, filterDataByDateKeyRange, forceRefreshWorkspaceDisplayNames, formatDateInZone, formatDateKeyForDisplay, formatDateTimeInZone, formatDuration, formatISTDate, formatIdleTime, formatRangeLabel, formatReasonLabel, formatRelativeTime, formatTimeInZone, fromUrlFriendlyName, getAllLineDisplayNames, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAllWorkspaceDisplayNamesSnapshot, getAnonClient, getAvailableShiftIds, getBrowserName, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getConfiguredLineIds, getCoreSessionRecordingProperties, getCoreSessionReplayUrl, getCurrentShift, getCurrentShiftForLine, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDateKeyFromDate, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultLineId, getDefaultTabForWorkspace, getLineDisplayName, getManufacturingInsights, getMetricsTablePrefix, getMonthKeyBounds, getMonthWeekRanges, getNextUpdateInterval, getOperationalDate, getReasonColor, getS3SignedUrl, getS3VideoSrc, getShiftData, getShiftNameById, getShiftWorkDurationSeconds, getShortShiftName, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getSubscriptionManager, getThreadMessages, getUniformShiftGroup, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, groupLinesByShift, hasAnyShiftData, identifyCoreUser, initializeCoreMixpanel, isFullMonthRange, isLegacyConfiguration, isPrefetchError, isSafari, isTransitionPeriod, isUrlPermanentlyFailed, isValidFactoryViewConfiguration, isValidLineInfoPayload, isValidPrefetchParams, isValidPrefetchStatus, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, linesService, mergeWithDefaultConfig, migrateLegacyConfiguration, normalizeDateKeyRange, optifyeAgentClient, parseDateKeyToDate, parseS3Uri, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, resetFailedUrl, resetSubscriptionManager, s3VideoPreloader, shuffleArray, simulateApiDelay, skuService, startCoreSessionRecording, stopCoreSessionRecording, storeWorkspaceMapping, streamProxyConfig, subscribeWorkspaceDisplayNames, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, transformToChartData, updateThreadTitle, upsertWorkspaceDisplayNameInCache, useAccessControl, useActiveBreaks, useActiveLineId, useAllWorkspaceMetrics, useAnalyticsConfig, useAppTimezone, useAudioService, useAuth, useAuthConfig, useAxelNotifications, useCanSaveTargets, useClipFilter, useClipTypes, useClipTypesWithCounts, useClipsInit, useCompanyUsersUsage, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useDynamicShiftConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHasLineAccess, useHideMobileHeader, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useHourEndTimer, useHourlyTargetAchievements, useHourlyTargetMisses, useIdleTimeClipClassifications, useIdleTimeReasons, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineShiftConfig, useLineSupervisor, useLineWorkspaceMetrics, useLines, useMessages, useMetrics, useMobileMenu, useMultiLineShiftConfigs, useNavigation, useOperationalShiftKey, useOptionalSupabase, useOverrides, usePageOverride, usePrefetchClipCounts, useRealtimeLineMetrics, useRegistry, useSKUs, useSessionKeepAlive, useSessionTracking, useSessionTrackingContext, useShiftConfig, useShiftGroups, useShifts, useSubscriptionManager, useSubscriptionManagerSafe, useSupabase, useSupabaseClient, useSupervisorsByLineIds, useTargets, useTeamManagementPermissions, useTheme, useThemeConfig, useThreads, useTicketHistory, useTimezoneContext, useUserLineAccess, useUserUsage, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceHealthById, useWorkspaceHealthStatus, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, useWorkspaceUptimeTimeline, useWorkspaceVideoStreams, userService, videoPrefetchManager, videoPreloader, whatsappService, withAccessControl, withAuth, withRegistry, withTimezone, workspaceHealthService, workspaceService };
+export { ACTION_NAMES, AIAgentView_default as AIAgentView, AcceptInvite, AcceptInviteView_default as AcceptInviteView, AdvancedFilterDialog, AdvancedFilterPanel, AudioService, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthService, AuthenticatedBottleneckClipsView, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedShiftsView, AuthenticatedTargetsView, AuthenticatedTicketsView, AuthenticatedWorkspaceHealthView, AvatarUpload, AxelNotificationPopup, AxelOrb, BackButton, BackButtonMinimal, BarChart, BaseHistoryCalendar, BottleneckClipsModal, BottleneckClipsView_default as BottleneckClipsView, BottlenecksContent, BreakNotificationPopup, CachePrefetchStatus, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, ChangeRoleDialog, ClipFilterProvider, CompactWorkspaceHealthCard, ConfirmRemoveUserDialog, CongratulationsOverlay, CroppedHlsVideoPlayer, CroppedVideoPlayer, CycleTimeChart, CycleTimeOverTimeChart, DEFAULT_ANALYTICS_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_CONFIG, DEFAULT_DATABASE_CONFIG, DEFAULT_DATE_TIME_CONFIG, DEFAULT_ENDPOINTS_CONFIG, DEFAULT_ENTITY_CONFIG, DEFAULT_HOME_VIEW_CONFIG, DEFAULT_MAP_VIEW_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_SHIFT_DATA, DEFAULT_THEME_CONFIG, DEFAULT_VIDEO_CONFIG, DEFAULT_WORKSPACE_CONFIG, DEFAULT_WORKSPACE_POSITIONS, DashboardHeader, DashboardLayout, DashboardOverridesProvider, DashboardProvider, DateDisplay_default as DateDisplay, DateTimeDisplay, DebugAuth, DebugAuthView_default as DebugAuthView, DetailedHealthStatus, DiagnosisVideoModal, EmptyStateMessage, EncouragementOverlay, FactoryAssignmentDropdown, FactoryView_default as FactoryView, FileManagerFilters, FilterDialogTrigger, FirstTimeLoginDebug, FirstTimeLoginHandler, GaugeChart, GridComponentsPlaceholder, HamburgerButton, Header, HealthDateShiftSelector, HealthStatusGrid, HealthStatusIndicator, HelpView_default as HelpView, HlsVideoPlayer, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, ImprovementCenterView_default as ImprovementCenterView, InlineEditableText, InteractiveOnboardingTour, InvitationService, InvitationsTable, InviteUserDialog, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LINE_2_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend6 as Legend, LineAssignmentDropdown, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LinesService, LiveTimer, LoadingInline, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSkeleton, LoadingState, LoginPage, LoginView_default as LoginView, Logo, MainLayout, MapGridView, MetricCard_default as MetricCard, MinimalOnboardingPopup, MobileMenuProvider, NewClipsNotification, NoWorkspaceData, OnboardingDemo, OnboardingTour, OptifyeAgentClient, OptifyeLogoLoader_default as OptifyeLogoLoader, OutputProgressChart, PageHeader, PieChart4 as PieChart, PlayPauseIndicator, PrefetchConfigurationError, PrefetchError, PrefetchEvents, PrefetchStatus, PrefetchTimeoutError, ProfileView_default as ProfileView, RegistryProvider, RoleBadge, S3ClipsSupabaseService as S3ClipsService, S3Service, SKUManagementView, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SessionTracker, SessionTrackingContext, SessionTrackingProvider, SettingsPopup, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SignupWithInvitation, SilentErrorBoundary, SimpleOnboardingPopup, SingleVideoStream_default as SingleVideoStream, Skeleton, SubscriptionManager, SubscriptionManagerProvider, SupabaseProvider, SupervisorDropdown_default as SupervisorDropdown, SupervisorManagementView_default as SupervisorManagementView, SupervisorService, TargetWorkspaceGrid, TargetsView_default as TargetsView, TeamManagementView_default as TeamManagementView, TeamUsagePdfGenerator, ThreadSidebar, TicketHistory_default as TicketHistory, TicketHistoryService, TicketsView_default as TicketsView, TimeDisplay_default as TimeDisplay, TimePickerDropdown, Timer_default as Timer, TimezoneProvider, TimezoneService, UserAvatar, UserManagementService, UserManagementTable, UserService, UserUsageDetailModal, UserUsageStats, VideoCard, VideoGridView, VideoPlayer, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceDisplayNameExample, WorkspaceGrid, WorkspaceGridItem, WorkspaceHealthCard, WorkspaceHealthView_default as WorkspaceHealthView, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMetricCardsImpl, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyHistory, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, aggregateKPIsFromLineMetricsRows, apiUtils, areAllLinesOnSameShift, authCoreService, authOTPService, authRateLimitService, awardsService, buildDateKey, buildKPIsFromLineMetricsRow, buildShiftGroupsKey, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearSentryContext, clearWorkspaceDisplayNamesCache, cn, createDefaultKPIs, createInvitationService, createLinesService, createSessionTracker, createStorageService, createStreamProxyHandler, createSupabaseClient, createSupervisorService, createThrottledReload, createUserManagementService, createUserService, dashboardService, deleteThread, fetchIdleTimeReasons, filterDataByDateKeyRange, forceRefreshWorkspaceDisplayNames, formatAwardMonth, formatDateInZone, formatDateKeyForDisplay, formatDateTimeInZone, formatDuration, formatISTDate, formatIdleTime, formatRangeLabel, formatReasonLabel, formatRelativeTime, formatTimeInZone, fromUrlFriendlyName, getAllLineDisplayNames, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAllWorkspaceDisplayNamesSnapshot, getAnonClient, getAvailableShiftIds, getAwardBadgeType, getAwardDescription, getAwardTitle, getBrowserName, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getConfiguredLineIds, getCoreSessionRecordingProperties, getCoreSessionReplayUrl, getCurrentShift, getCurrentShiftForLine, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDateKeyFromDate, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultLineId, getDefaultTabForWorkspace, getInitials, getLineDisplayName, getManufacturingInsights, getMetricsTablePrefix, getMonthKeyBounds, getMonthWeekRanges, getNextUpdateInterval, getOperationalDate, getReasonColor, getS3SignedUrl, getS3VideoSrc, getShiftData, getShiftNameById, getShiftWorkDurationSeconds, getShortShiftName, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getSubscriptionManager, getThreadMessages, getUniformShiftGroup, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, groupLinesByShift, hasAnyShiftData, identifyCoreUser, initializeCoreMixpanel, isFullMonthRange, isLegacyConfiguration, isPrefetchError, isSafari, isTransitionPeriod, isUrlPermanentlyFailed, isValidFactoryViewConfiguration, isValidLineInfoPayload, isValidPrefetchParams, isValidPrefetchStatus, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, linesService, mergeWithDefaultConfig, migrateLegacyConfiguration, normalizeDateKeyRange, optifyeAgentClient, parseDateKeyToDate, parseS3Uri, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, resetFailedUrl, resetSubscriptionManager, s3VideoPreloader, setSentryUserContext, setSentryWorkspaceContext, shuffleArray, simulateApiDelay, skuService, startCoreSessionRecording, stopCoreSessionRecording, storeWorkspaceMapping, streamProxyConfig, subscribeWorkspaceDisplayNames, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, transformToChartData, updateThreadTitle, upsertWorkspaceDisplayNameInCache, useAccessControl, useActiveBreaks, useActiveLineId, useAllWorkspaceMetrics, useAnalyticsConfig, useAppTimezone, useAudioService, useAuth, useAuthConfig, useAxelNotifications, useCanSaveTargets, useClipFilter, useClipTypes, useClipTypesWithCounts, useClipsInit, useCompanyUsersUsage, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useDynamicShiftConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHasLineAccess, useHideMobileHeader, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useHourEndTimer, useHourlyTargetAchievements, useHourlyTargetMisses, useIdleTimeClipClassifications, useIdleTimeReasons, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineShiftConfig, useLineSupervisor, useLineWorkspaceMetrics, useLines, useMessages, useMetrics, useMobileMenu, useMultiLineShiftConfigs, useNavigation, useOperationalShiftKey, useOptionalSupabase, useOverrides, usePageOverride, usePrefetchClipCounts, useRealtimeLineMetrics, useRegistry, useSKUs, useSessionKeepAlive, useSessionTracking, useSessionTrackingContext, useShiftConfig, useShiftGroups, useShifts, useSubscriptionManager, useSubscriptionManagerSafe, useSupabase, useSupabaseClient, useSupervisorsByLineIds, useTargets, useTeamManagementPermissions, useTheme, useThemeConfig, useThreads, useTicketHistory, useTimezoneContext, useUserLineAccess, useUserUsage, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceHealthById, useWorkspaceHealthStatus, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, useWorkspaceUptimeTimeline, useWorkspaceVideoStreams, userService, videoPrefetchManager, videoPreloader, weeklyTopPerformerService, whatsappService, withAccessControl, withAuth, withRegistry, withTimezone, workspaceHealthService, workspaceService };