@optifye/dashboard-core 6.4.1 → 6.4.2

package/dist/index.js

@@ -18,6 +18,7 @@ var reactSlot = require('@radix-ui/react-slot');
 var lucideReact = require('lucide-react');
 var reactDayPicker = require('react-day-picker');
 var outline = require('@heroicons/react/24/outline');
+var solid = require('@heroicons/react/24/solid');
 var html2canvas = require('html2canvas');
 var jsPDF = require('jspdf');
 var SelectPrimitive = require('@radix-ui/react-select');
@@ -2675,6 +2676,17 @@ var TicketHistoryService = class {
     }
     return data;
   }
+  /**
+   * Update ticket serviced status
+   */
+  static async updateTicketServicedStatus(ticketId, serviced) {
+    const supabase = _getSupabaseInstance();
+    const { data, error } = await supabase.from("support_ticket_history").update({ serviced, updated_at: (/* @__PURE__ */ new Date()).toISOString() }).eq("id", ticketId).select().single();
+    if (error) {
+      throw new Error(`Failed to update ticket serviced status: ${error.message}`);
+    }
+    return data;
+  }
 };
 
 // src/lib/services/audioService.ts
@@ -4060,10 +4072,7 @@ var S3ClipsService = class {
    * Internal implementation of clip counts fetching
    */
   async executeGetClipCounts(workspaceId, date, shiftId, buildIndex) {
-    if (buildIndex) {
-      this.isIndexBuilding = true;
-      console.log(`[S3ClipsService] Starting index building - metadata fetching disabled`);
-    }
+    const effectiveBuildIndex = false;
     try {
       const basePrefix = `sop_violations/${workspaceId}/${date}/${shiftId}/`;
       const counts = { total: 0 };
@@ -4079,9 +4088,9 @@ var S3ClipsService = class {
         "bottleneck"
       ];
       const shiftName = shiftId === 0 || shiftId === "0" ? "Day" : "Night";
-      console.log(`[S3ClipsService] ${buildIndex ? "Building video index and counting" : "Fast counting"} clips for ${workspaceId} on ${date}, shift ${shiftId} (${shiftName} Shift)`);
+      console.log(`[S3ClipsService] Fast counting clips for ${workspaceId} on ${date}, shift ${shiftId} (${shiftName} Shift)`);
       const startTime = performance.now();
-      const videoIndex = buildIndex ? {
+      const videoIndex = effectiveBuildIndex ? {
         byCategory: /* @__PURE__ */ new Map(),
         allVideos: [],
         counts: {},
@@ -4095,53 +4104,7 @@ var S3ClipsService = class {
         const categoryPrefix = `${basePrefix}${category}/videos/`;
         const categoryVideos = [];
         try {
-          if (buildIndex) {
-            const command = new clientS3.ListObjectsV2Command({
-              Bucket: this.config.s3Config.bucketName,
-              Prefix: categoryPrefix,
-              MaxKeys: 1e3
-            });
-            let continuationToken;
-            do {
-              if (continuationToken) {
-                command.input.ContinuationToken = continuationToken;
-              }
-              const response = await this.s3Client.send(command);
-              if (response.Contents) {
-                for (const obj of response.Contents) {
-                  if (obj.Key && obj.Key.endsWith("playlist.m3u8")) {
-                    if (obj.Key.includes("missed_qchecks")) {
-                      continue;
-                    }
-                    const s3Uri = `s3://${this.config.s3Config.bucketName}/${obj.Key}`;
-                    const sopCategories = this.getSOPCategories(workspaceId);
-                    const parsedInfo = parseS3Uri(s3Uri, sopCategories);
-                    const belongsToCategory = parsedInfo && (parsedInfo.type === category || // Handle specific mismatches between folder names and parsed types
-                    category === "cycle_completion" && parsedInfo.type === "cycle_completion" || category === "sop_deviation" && parsedInfo.type === "missing_quality_check" || category === "missing_quality_check" && parsedInfo.type === "missing_quality_check" || category === "idle_time" && parsedInfo.type === "low_value" || category === "low_value" && parsedInfo.type === "low_value");
-                    if (belongsToCategory) {
-                      const videoEntry = {
-                        uri: s3Uri,
-                        category: parsedInfo.type,
-                        // Use the parsed type, not the folder name
-                        timestamp: parsedInfo.timestamp,
-                        videoId: `${workspaceId}-${parsedInfo.timestamp}`,
-                        workspaceId,
-                        date,
-                        shiftId: shiftId.toString()
-                      };
-                      categoryVideos.push(videoEntry);
-                    }
-                  }
-                }
-              }
-              continuationToken = response.NextContinuationToken;
-            } while (continuationToken);
-            categoryVideos.sort((a, b) => b.timestamp.localeCompare(a.timestamp));
-            if (categoryVideos.length > 0) {
-              console.log(`[S3ClipsService] Found ${categoryVideos.length} videos for category '${category}' (parsed types: ${[...new Set(categoryVideos.map((v) => v.category))].join(", ")})`);
-            }
-            return { category, count: categoryVideos.length, videos: categoryVideos };
-          } else {
+          if (effectiveBuildIndex) ; else {
             const command = new clientS3.ListObjectsV2Command({
               Bucket: this.config.s3Config.bucketName,
               Prefix: categoryPrefix,
@@ -4171,41 +4134,14 @@ var S3ClipsService = class {
       for (const { category, count, videos } of results) {
         counts[category] = count;
         counts.total += count;
-        if (buildIndex && videoIndex && videos) {
-          if (videos.length > 0) {
-            const parsedType = videos[0].category;
-            videoIndex.byCategory.set(parsedType, videos);
-            console.log(`[S3ClipsService] Indexed ${videos.length} videos under parsed type '${parsedType}'`);
-            if (category !== parsedType) {
-              videoIndex.byCategory.set(category, videos);
-              console.log(`[S3ClipsService] Created alias: S3 folder '${category}' -> parsed type '${parsedType}' (${videos.length} videos)`);
-            }
-          }
-          videoIndex.allVideos.push(...videos);
-        }
-      }
-      if (buildIndex && videoIndex) {
-        videoIndex.allVideos.sort((a, b) => b.timestamp.localeCompare(a.timestamp));
-        videoIndex.counts = { ...counts };
+        if (effectiveBuildIndex && videoIndex && videos) ;
       }
+      if (effectiveBuildIndex && videoIndex) ;
       const elapsed = performance.now() - startTime;
-      console.log(`[S3ClipsService] ${buildIndex ? "Video index and counts" : "Clip counts"} completed in ${elapsed.toFixed(2)}ms - Total: ${counts.total}`);
-      if (buildIndex && videoIndex) {
-        console.log(`[S3ClipsService] Final video index summary:`);
-        console.log(`  - VideoIndex ID: ${videoIndex._debugId}`);
-        console.log(`  - Total videos in allVideos: ${videoIndex.allVideos.length}`);
-        console.log(`  - Categories in byCategory Map: ${Array.from(videoIndex.byCategory.keys()).join(", ")}`);
-        for (const [cat, vids] of videoIndex.byCategory.entries()) {
-          console.log(`    - '${cat}': ${vids.length} videos`);
-        }
-        return { counts, videoIndex };
-      }
+      console.log(`[S3ClipsService] Clip counts completed in ${elapsed.toFixed(2)}ms - Total: ${counts.total}`);
+      if (effectiveBuildIndex && videoIndex) ;
       return counts;
     } finally {
-      if (buildIndex) {
-        this.isIndexBuilding = false;
-        console.log(`[S3ClipsService] Index building complete - metadata fetching re-enabled`);
-      }
     }
   }
   async getClipCountsCacheFirst(workspaceId, date, shiftId, buildIndex) {
@@ -4537,6 +4473,75 @@ var S3ClipsService = class {
     }
     return videos;
   }
+  /**
+   * Get a page of videos for a specific category using efficient pagination
+   * This method replaces the need for full video indexing
+   * @param workspaceId - Workspace ID
+   * @param date - Date in YYYY-MM-DD format
+   * @param shiftId - Shift ID (0 for day, 1 for night)
+   * @param category - Category to fetch videos from
+   * @param pageSize - Number of videos to fetch per page (default 5)
+   * @param startAfter - Optional key to start after for pagination
+   * @returns Page of videos with continuation token
+   */
+  async getVideosPage(workspaceId, date, shiftId, category, pageSize = 5, startAfter) {
+    if (!isValidShiftId(shiftId)) {
+      console.error(`[S3ClipsService] getVideosPage - Invalid shift ID: ${shiftId}`);
+      return { videos: [], hasMore: false };
+    }
+    const categoryPrefix = `sop_violations/${workspaceId}/${date}/${shiftId}/${category}/videos/`;
+    const deduplicationKey = `videos-page:${categoryPrefix}:${pageSize}:${startAfter || "first"}`;
+    return this.requestCache.deduplicate(
+      deduplicationKey,
+      async () => {
+        try {
+          console.log(`[S3ClipsService] Fetching page of ${pageSize} videos for category '${category}'`);
+          const command = new clientS3.ListObjectsV2Command({
+            Bucket: this.config.s3Config.bucketName,
+            Prefix: categoryPrefix,
+            MaxKeys: pageSize * 10,
+            // Fetch extra to account for non-playlist files
+            StartAfter: startAfter
+          });
+          const response = await this.s3Client.send(command);
+          const videos = [];
+          if (response.Contents) {
+            const sopCategories = this.getSOPCategories(workspaceId);
+            for (const obj of response.Contents) {
+              if (videos.length >= pageSize) break;
+              if (obj.Key && obj.Key.endsWith("playlist.m3u8")) {
+                if (obj.Key.includes("missed_qchecks")) continue;
+                const s3Uri = `s3://${this.config.s3Config.bucketName}/${obj.Key}`;
+                const parsedInfo = parseS3Uri(s3Uri, sopCategories);
+                if (parsedInfo) {
+                  const cloudfrontUrl = this.s3UriToCloudfront(s3Uri);
+                  videos.push({
+                    id: `${workspaceId}-${date}-${shiftId}-${category}-${videos.length}`,
+                    src: cloudfrontUrl,
+                    ...parsedInfo,
+                    originalUri: s3Uri
+                  });
+                }
+              }
+            }
+            const lastKey = response.Contents[response.Contents.length - 1]?.Key;
+            const hasMore = !!response.IsTruncated || response.Contents.length === pageSize * 10;
+            console.log(`[S3ClipsService] Fetched ${videos.length} videos, hasMore: ${hasMore}`);
+            return {
+              videos,
+              nextToken: hasMore ? lastKey : void 0,
+              hasMore
+            };
+          }
+          return { videos: [], hasMore: false };
+        } catch (error) {
+          console.error(`[S3ClipsService] Error fetching videos page:`, error);
+          return { videos: [], hasMore: false };
+        }
+      },
+      "VideosPage"
+    );
+  }
   /**
    * Cleanup method for proper resource management
    */
@@ -8465,6 +8470,16 @@ function useTicketHistory(companyId) {
       throw err;
     }
   }, [refreshTickets]);
+  const updateTicketServicedStatus = React19.useCallback(async (ticketId, serviced) => {
+    setError(null);
+    try {
+      await TicketHistoryService.updateTicketServicedStatus(ticketId, serviced);
+      await refreshTickets();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to update ticket serviced status");
+      throw err;
+    }
+  }, [refreshTickets]);
   React19.useEffect(() => {
     if (companyId) {
       refreshTickets();
@@ -8476,7 +8491,8 @@ function useTicketHistory(companyId) {
     error,
     createTicket,
     refreshTickets,
-    updateTicketStatus
+    updateTicketStatus,
+    updateTicketServicedStatus
   };
 }
 
@@ -11628,7 +11644,8 @@ var usePrefetchClipCounts = ({
   date,
   shift,
   enabled = true,
-  buildIndex = true,
+  buildIndex = false,
+  // Default to false for cost efficiency
   subscriberId
 }) => {
   const dashboardConfig = useDashboardConfig();
@@ -11716,12 +11733,12 @@ var usePrefetchClipCounts = ({
           }
         },
         onRenderReady: (key, newData) => {
-          console.log(`[usePrefetchClipCounts] Render ready with ${Object.values(newData.counts).reduce((sum, count) => sum + count, 0)} total clips`);
+          console.log(`[usePrefetchClipCounts] Render ready with ${Object.values(newData.counts || {}).reduce((sum, count) => sum + count, 0)} total clips`);
           setData(newData);
           setError(null);
         },
         onFullyIndexed: (key, newData) => {
-          console.log(`[usePrefetchClipCounts] Fully indexed with ${newData.videoIndex.allVideos.length} videos`);
+          console.log(`[usePrefetchClipCounts] Fully indexed with ${newData.videoIndex?.allVideos?.length || 0} videos`);
           setData(newData);
           setError(null);
         },
@@ -23314,8 +23331,7 @@ var ISTTimer = React19.memo(() => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     TimeDisplay2,
     {
-      variant: "minimal",
-      className: "text-sm font-medium text-gray-700"
+      variant: "minimal"
     }
   );
 });
@@ -23347,6 +23363,7 @@ var CardFooter2 = (props) => {
 };
 var TicketHistory = ({ companyId }) => {
   const { tickets, loading, error } = useTicketHistory(companyId);
+  const [expandedTickets, setExpandedTickets] = React19.useState(/* @__PURE__ */ new Set());
   const getCategoryIcon = (category) => {
     switch (category) {
       case "general":
@@ -23403,6 +23420,23 @@ var TicketHistory = ({ companyId }) => {
         return "text-gray-600 bg-gray-50";
     }
   };
+  const toggleTicketExpansion = (ticketId) => {
+    setExpandedTickets((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(ticketId)) {
+        newSet.delete(ticketId);
+      } else {
+        newSet.add(ticketId);
+      }
+      return newSet;
+    });
+  };
+  const isTicketExpanded = (ticketId) => {
+    return expandedTickets.has(ticketId);
+  };
+  const shouldShowExpandButton = (description) => {
+    return description.length > 100 || description.includes("\n");
+  };
   if (loading) {
     return /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "h-full", children: [
       /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-lg font-semibold text-gray-800", children: "History of Tickets" }) }),
@@ -23443,12 +23477,14 @@ var TicketHistory = ({ companyId }) => {
       tickets.map((ticket, index) => {
         const CategoryIcon = getCategoryIcon(ticket.category);
         const StatusIcon = getStatusIcon(ticket.status);
+        const isExpanded = isTicketExpanded(ticket.id);
+        const showExpandButton = shouldShowExpandButton(ticket.description);
         return /* @__PURE__ */ jsxRuntime.jsxs(
           motion.div,
           {
             initial: { opacity: 0, y: 10 },
             animate: { opacity: 1, y: 0 },
-            className: `border-b border-gray-100 p-4 hover:bg-gray-50 transition-colors cursor-pointer ${index === 0 ? "border-t-0" : ""}`,
+            className: `border-b border-gray-100 p-4 hover:bg-gray-50 transition-colors ${index === 0 ? "border-t-0" : ""}`,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-1 bg-gray-100 rounded", children: /* @__PURE__ */ jsxRuntime.jsx(CategoryIcon, { className: "h-3 w-3 text-gray-600" }) }),
@@ -23459,9 +23495,42 @@ var TicketHistory = ({ companyId }) => {
                   /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { className: "h-2.5 w-2.5 mr-1" }),
                   ticket.status === "submitted" ? "New" : ticket.status.replace("_", " ")
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${getPriorityColor(ticket.priority)}`, children: ticket.priority === "normal" ? "Standard" : ticket.priority })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${getPriorityColor(ticket.priority)}`, children: ticket.priority === "normal" ? "Standard" : ticket.priority }),
+                ticket.serviced && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium text-green-700 bg-green-100 border border-green-200", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(solid.CheckIcon, { className: "h-2.5 w-2.5 mr-1" }),
+                  "Serviced"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  motion.div,
+                  {
+                    initial: { opacity: 0 },
+                    animate: { opacity: 1 },
+                    exit: { opacity: 0 },
+                    transition: { duration: 0.2 },
+                    children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-xs text-gray-600 leading-relaxed whitespace-pre-wrap ${!isExpanded && showExpandButton ? "line-clamp-2" : ""}`, children: ticket.description })
+                  },
+                  isExpanded ? "expanded" : "collapsed"
+                ) }),
+                showExpandButton && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      toggleTicketExpansion(ticket.id);
+                    },
+                    className: "mt-2 flex items-center gap-1 text-xs text-blue-600 hover:text-blue-700 font-medium transition-colors",
+                    children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronUpIcon, { className: "h-3 w-3" }),
+                      "Show less"
+                    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronDownIcon, { className: "h-3 w-3" }),
+                      "Show more"
+                    ] })
+                  }
+                )
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-600 mb-3 line-clamp-2 leading-relaxed", children: ticket.description }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500 capitalize font-medium", children: ticket.category }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-gray-500", children: [
@@ -26234,6 +26303,127 @@ var VideoPlayer = React19__namespace.default.forwardRef(({
   ] });
 });
 VideoPlayer.displayName = "VideoPlayer";
+var BackButton = ({
+  onClick,
+  text = "Back",
+  className,
+  size = "default",
+  disabled = false,
+  "aria-label": ariaLabel
+}) => {
+  const sizeClasses = {
+    sm: {
+      container: "gap-1 px-2 py-1.5",
+      icon: "w-3.5 h-3.5",
+      text: "text-xs"
+    },
+    default: {
+      container: "gap-2 px-3 py-2",
+      icon: "w-4 h-4",
+      text: "text-sm"
+    },
+    lg: {
+      container: "gap-2 px-4 py-2.5",
+      icon: "w-5 h-5",
+      text: "text-base"
+    }
+  };
+  const currentSize = sizeClasses[size];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      onClick,
+      disabled,
+      "aria-label": ariaLabel || `${text} button`,
+      className: cn(
+        // Base styles
+        "flex items-center font-medium rounded-lg transition-all duration-200",
+        // Size-specific styles
+        currentSize.container,
+        // Color and interaction styles
+        disabled ? "text-gray-400 cursor-not-allowed" : "text-gray-600 hover:text-gray-900 hover:bg-gray-50 active:bg-gray-100",
+        // Focus styles for accessibility
+        "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          lucideReact.ArrowLeft,
+          {
+            className: cn(
+              "flex-shrink-0",
+              currentSize.icon,
+              disabled && "opacity-50"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+          "font-medium select-none",
+          currentSize.text,
+          disabled && "opacity-50"
+        ), children: text })
+      ]
+    }
+  );
+};
+var BackButtonMinimal = ({
+  onClick,
+  text = "Back",
+  className,
+  size = "default",
+  disabled = false,
+  "aria-label": ariaLabel
+}) => {
+  const sizeClasses = {
+    sm: {
+      icon: "w-3.5 h-3.5",
+      text: "text-xs ml-1"
+    },
+    default: {
+      icon: "w-4 h-4",
+      text: "text-sm ml-2"
+    },
+    lg: {
+      icon: "w-5 h-5",
+      text: "text-base ml-2"
+    }
+  };
+  const currentSize = sizeClasses[size];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      onClick,
+      disabled,
+      "aria-label": ariaLabel || `${text} button`,
+      className: cn(
+        // Base styles - minimal padding for tight spaces
+        "flex items-center transition-colors duration-200",
+        // Color and interaction styles
+        disabled ? "text-gray-400 cursor-not-allowed" : "text-gray-600 hover:text-gray-900",
+        // Focus styles for accessibility
+        "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          lucideReact.ArrowLeft,
+          {
+            className: cn(
+              "flex-shrink-0",
+              currentSize.icon,
+              disabled && "opacity-50"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+          "font-medium select-none",
+          currentSize.text,
+          disabled && "opacity-50"
+        ), children: text })
+      ]
+    }
+  );
+};
 var BottlenecksContent = ({
   workspaceId,
   workspaceName,
@@ -26253,7 +26443,6 @@ var BottlenecksContent = ({
   const videoRef = React19.useRef(null);
   const timestampFilterRef = React19.useRef(null);
   const initialFilter = sopCategories && sopCategories.length > 0 ? sopCategories[0].id : "low_value";
-  const videoIndexRef = React19.useRef(null);
   const currentIndexRef = React19.useRef(0);
   const activeFilterRef = React19.useRef(initialFilter);
   const isMountedRef = React19.useRef(true);
@@ -26271,15 +26460,6 @@ var BottlenecksContent = ({
   const [isNavigating, setIsNavigating] = React19.useState(false);
   const [error, setError] = React19.useState(null);
   const [clipCounts, setClipCounts] = React19.useState({});
-  const [videoIndex, setVideoIndex] = React19.useState(null);
-  const updateVideoIndex = React19.useCallback((newIndex) => {
-    console.log(`[BottlenecksContent] Updating video index - ID: ${newIndex?._debugId || "NO_ID"}, total videos: ${newIndex?.allVideos.length || 0}, categories: ${newIndex?.byCategory.size || 0}`);
-    if (newIndex) {
-      console.log(`[BottlenecksContent] VideoIndex categories: [${Array.from(newIndex.byCategory.keys()).join(", ")}]`);
-    }
-    setVideoIndex(newIndex);
-    videoIndexRef.current = newIndex;
-  }, []);
   const updateActiveFilter = React19.useCallback((newFilter) => {
     console.log(`[BottlenecksContent] Updating active filter: ${activeFilterRef.current} -> ${newFilter}`);
     setActiveFilter(newFilter);
@@ -26340,7 +26520,8 @@ var BottlenecksContent = ({
     date: date || getOperationalDate(),
     shift: effectiveShift,
     enabled: !!workspaceId && !!s3ClipsService,
-    buildIndex: true
+    buildIndex: false
+    // Disabled to reduce S3 costs - use pagination instead
   });
   const fetchClipCounts = React19.useCallback(async () => {
     if (!workspaceId || !s3ClipsService || !dashboardConfig?.s3Config || !isMountedRef.current) return;
@@ -26359,7 +26540,6 @@ var BottlenecksContent = ({
       if (cachedResult) {
         console.log(`[BottlenecksContent] Using cached clip counts`);
         updateClipCounts(cachedResult.counts);
-        updateVideoIndex(cachedResult.videoIndex);
         setIsLoading(false);
         setHasInitialLoad(true);
         return;
@@ -26368,19 +26548,13 @@ var BottlenecksContent = ({
       const fullResult = await s3ClipsService.getClipCounts(
         workspaceId,
         operationalDate,
-        shiftStr,
-        true
-        // Build index
+        shiftStr
+        // Don't build index - use pagination for cost efficiency
       );
-      if (fullResult && "counts" in fullResult && "videoIndex" in fullResult) {
-        updateClipCounts(fullResult.counts);
-        updateVideoIndex(fullResult.videoIndex);
-        await smartVideoCache.setClipCounts(cacheKey, fullResult, 5);
-        console.log(`[BottlenecksContent] Fetched and cached clip counts with ${fullResult.videoIndex.allVideos.length} videos`);
-      } else if (fullResult) {
+      if (fullResult) {
         const counts = fullResult;
         updateClipCounts(counts);
-        console.log(`[BottlenecksContent] Fetched clip counts (no video index)`);
+        console.log(`[BottlenecksContent] Fetched and cached clip counts`);
       }
       setIsLoading(false);
       setHasInitialLoad(true);
@@ -26393,7 +26567,7 @@ var BottlenecksContent = ({
     } finally {
       fetchInProgressRef.current.delete(operationKey);
     }
-  }, [workspaceId, date, s3ClipsService, effectiveShift, dashboardConfig, updateClipCounts, updateVideoIndex]);
+  }, [workspaceId, date, s3ClipsService, effectiveShift, dashboardConfig, updateClipCounts]);
   const loadingCategoryRef = React19.useRef(null);
   const videoRetryCountRef = React19.useRef(0);
   const loadingVideosRef = React19.useRef(/* @__PURE__ */ new Set());
@@ -26401,7 +26575,6 @@ var BottlenecksContent = ({
   const ensureVideosLoaded = React19.useCallback(async (centerIndex) => {
     if (!s3ClipsService || !workspaceId || !isMountedRef.current) return;
     const currentFilter = activeFilterRef.current;
-    const currentVideoIndex = videoIndexRef.current;
     let effectiveFilter = currentFilter;
     if (sopCategories && sopCategories.length > 0) {
       const category = sopCategories.find((cat) => cat.id === currentFilter);
@@ -26428,17 +26601,6 @@ var BottlenecksContent = ({
     const loadPromises = indicesToLoad.map(async (index) => {
       try {
         let video = null;
-        if (currentVideoIndex && currentVideoIndex.byCategory && currentVideoIndex.allVideos.length > 0) {
-          video = await s3ClipsService.getVideoFromIndex(
-            currentVideoIndex,
-            effectiveFilter,
-            index,
-            true,
-            // includeCycleTime - OK for preloading
-            false
-            // includeMetadata - NO metadata during bulk preloading to prevent flooding
-          );
-        }
         if (!video) {
           const operationalDate = date || getOperationalDate();
           const shiftStr = effectiveShift;
@@ -26491,12 +26653,11 @@ var BottlenecksContent = ({
     try {
       const operationalDate = date || getOperationalDate();
       const shiftStr = effectiveShift;
-      if (!clipCounts[targetCategory] && !videoIndex) {
+      if (!clipCounts[targetCategory]) {
         const cacheKey = `clip-counts:${workspaceId}:${operationalDate}:${shiftStr}`;
         const cachedResult = await smartVideoCache.getClipCounts(cacheKey);
         if (cachedResult && cachedResult.counts[targetCategory] > 0) {
           updateClipCounts(cachedResult.counts);
-          updateVideoIndex(cachedResult.videoIndex);
           setHasInitialLoad(true);
           console.log(`[BottlenecksContent] Used cached data for loadFirstVideoForCategory - ${targetCategory}`);
         }
@@ -26528,11 +26689,14 @@ var BottlenecksContent = ({
       } catch (directError) {
         console.warn(`[BottlenecksContent] Direct S3 loading failed, trying video index:`, directError);
       }
-      const currentVideoIndex = videoIndexRef.current;
-      if (clipCounts[targetCategory] > 0 && currentVideoIndex && currentVideoIndex.allVideos.length > 0) {
+      if (clipCounts[targetCategory] > 0) {
         try {
-          const firstVideo = await s3ClipsService.getVideoFromIndex(
-            currentVideoIndex,
+          const operationalDate2 = date || getOperationalDate();
+          const shiftStr2 = effectiveShift;
+          const firstVideo = await s3ClipsService.getClipByIndex(
+            workspaceId,
+            operationalDate2,
+            shiftStr2,
             targetCategory,
             0,
             // First video (index 0)
@@ -26572,25 +26736,22 @@ var BottlenecksContent = ({
       loadingCategoryRef.current = null;
       fetchInProgressRef.current.delete(operationKey);
     }
-  }, [workspaceId, date, s3ClipsService, clipCounts, videoIndex, effectiveShift, updateClipCounts, updateVideoIndex]);
+  }, [workspaceId, date, s3ClipsService, clipCounts, effectiveShift, updateClipCounts]);
   React19.useEffect(() => {
     if (s3ClipsService && !prefetchData) {
       fetchClipCounts();
     }
-  }, [workspaceId, date, effectiveShift, s3ClipsService, fetchClipCounts, updateClipCounts, updateVideoIndex, prefetchData]);
+  }, [workspaceId, date, effectiveShift, s3ClipsService, fetchClipCounts, updateClipCounts, prefetchData]);
   React19.useEffect(() => {
-    if (prefetchData) {
-      console.log(`[BottlenecksContent] Received prefetch update - status: ${prefetchStatus}, videos: ${prefetchData.videoIndex.allVideos.length}, ID: ${prefetchData.videoIndex._debugId || "NO_ID"}`);
+    if (prefetchData && prefetchData.counts) {
+      console.log(`[BottlenecksContent] Received prefetch update - status: ${prefetchStatus}`);
       updateClipCounts(prefetchData.counts);
-      if (prefetchData.videoIndex.allVideos.length > 0) {
-        updateVideoIndex(prefetchData.videoIndex);
-      }
-      if (!hasInitialLoad && prefetchData.videoIndex.allVideos.length > 0) {
+      if (!hasInitialLoad) {
         setIsLoading(false);
         setHasInitialLoad(true);
       }
     }
-  }, [prefetchData, prefetchStatus, updateClipCounts, updateVideoIndex, hasInitialLoad]);
+  }, [prefetchData, prefetchStatus, updateClipCounts, hasInitialLoad]);
   React19.useEffect(() => {
     if (s3ClipsService && clipCounts[activeFilter] > 0) {
       const hasVideosForCurrentFilter = allVideos.some((video) => {
@@ -26630,7 +26791,7 @@ var BottlenecksContent = ({
         setIsCategoryLoading(false);
       }
     }
-  }, [activeFilter, s3ClipsService, videoIndex, clipCounts, loadFirstVideoForCategory, allVideos, sopCategories]);
+  }, [activeFilter, s3ClipsService, clipCounts, loadFirstVideoForCategory, allVideos, sopCategories]);
   React19.useEffect(() => {
     if (previousFilterRef.current !== activeFilter) {
       console.log(`Filter changed from ${previousFilterRef.current} to ${activeFilter} - resetting to first video`);
@@ -26746,23 +26907,7 @@ var BottlenecksContent = ({
       }
       try {
         let video = null;
-        const currentVideoIndex = videoIndexRef.current;
-        if (currentVideoIndex && currentVideoIndex.byCategory && currentVideoIndex.allVideos.length > 0 && s3ClipsService) {
-          console.log(`[BottlenecksContent] Using video index for navigation - ID: ${currentVideoIndex._debugId || "NO_ID"}, total categories: ${currentVideoIndex.byCategory.size}, total videos: ${currentVideoIndex.allVideos.length}, filter: ${currentFilter}`);
-          console.log(`[BottlenecksContent] VideoIndex categories in handleNext: [${Array.from(currentVideoIndex.byCategory.keys()).join(", ")}]`);
-          video = await s3ClipsService.getVideoFromIndex(
-            currentVideoIndex,
-            effectiveFilter,
-            nextIndex,
-            true,
-            // includeCycleTime
-            false
-            // includeMetadata - DON'T fetch metadata during navigation to prevent flooding!
-          );
-        } else {
-          console.warn(`[BottlenecksContent] Video index not ready for navigation: ID: ${currentVideoIndex?._debugId || "NO_ID"}, byCategory exists = ${!!currentVideoIndex?.byCategory}, allVideos = ${currentVideoIndex?.allVideos?.length || 0}`);
-        }
-        if (!video && s3ClipsService) {
+        if (s3ClipsService) {
           const operationalDate = date || getOperationalDate();
           const shiftStr = effectiveShift;
           video = await s3ClipsService.getClipByIndex(
@@ -30820,16 +30965,13 @@ var AIAgentView = () => {
     } }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex-1 flex flex-col h-screen transition-all duration-300 ${isSidebarOpen ? "mr-80" : "mr-0"}`, children: [
       /* @__PURE__ */ jsxRuntime.jsx("header", { className: "flex-shrink-0 bg-white px-8 py-6 shadow-sm border-b border-gray-200/80 sticky top-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+          BackButtonMinimal,
           {
             onClick: () => navigate("/"),
-            className: "flex items-center text-gray-600 hover:text-gray-900",
-            "aria-label": "Go back",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "h-5 w-5" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Back" })
-            ]
+            text: "Back",
+            size: "default",
+            "aria-label": "Navigate back to dashboard"
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto", children: [
@@ -31498,15 +31640,13 @@ var HelpView = ({
       transition: { duration: 0.3 },
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white px-8 py-6 shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between relative", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+            BackButtonMinimal,
             {
               onClick: handleBackClick,
-              className: "flex items-center text-gray-600 hover:text-gray-900",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowLeftIcon, { className: "h-5 w-5" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Back" })
-              ]
+              text: "Back",
+              size: "default",
+              "aria-label": "Navigate back to dashboard"
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto", children: [
@@ -31536,10 +31676,7 @@ var HelpView = ({
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "xl:col-span-3 order-1", children: /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "shadow-lg border-gray-200 bg-white", children: [
               /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-100 p-4 sm:p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-1.5 sm:p-2 bg-blue-100 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(outline.DocumentTextIcon, { className: "h-4 w-4 sm:h-5 sm:w-5 text-blue-600" }) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-lg sm:text-xl font-bold text-gray-900", children: "Submit Support Request" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs sm:text-sm text-gray-600 mt-1", children: "Direct line to our engineering team \u2022 Avg. response time: <30 minutes" })
-                ] })
+                /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-lg sm:text-xl font-bold text-gray-900", children: "Submit Support Request" }) })
               ] }) }),
               /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { className: "p-4 sm:p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "space-y-4 sm:space-y-5", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 sm:space-y-5", children: [
@@ -32633,17 +32770,15 @@ var KPIDetailView = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
     /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+          BackButtonMinimal,
           {
             onClick: handleBackClick,
-            className: "absolute left-0 flex items-center text-gray-600 hover:text-gray-900 cursor-pointer",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowLeftIcon, { className: "h-5 w-5" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Back" })
-            ]
+            text: "Back",
+            size: "default",
+            "aria-label": "Navigate back to previous page"
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: lineInfo?.line_name || "Line" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
@@ -33005,17 +33140,15 @@ var KPIsOverviewView = ({
   if (error) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
       /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+          BackButtonMinimal,
           {
             onClick: handleBackClick,
-            className: "absolute left-0 flex items-center text-gray-600 hover:text-gray-900 cursor-pointer",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowLeftIcon, { className: "h-5 w-5" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Back" })
-            ]
+            text: "Back",
+            size: "default",
+            "aria-label": "Navigate back to previous page"
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shop-floor overview" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
@@ -33027,17 +33160,15 @@ var KPIsOverviewView = ({
   if (lines.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
       /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+          BackButtonMinimal,
           {
             onClick: handleBackClick,
-            className: "absolute left-0 flex items-center text-gray-600 hover:text-gray-900 cursor-pointer",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowLeftIcon, { className: "h-5 w-5" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Back" })
-            ]
+            text: "Back",
+            size: "default",
+            "aria-label": "Navigate back to previous page"
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shop-floor overview" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
@@ -33052,17 +33183,15 @@ var KPIsOverviewView = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
     /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+          BackButtonMinimal,
           {
             onClick: handleBackClick,
-            className: "absolute left-0 flex items-center text-gray-600 hover:text-gray-900 cursor-pointer",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowLeftIcon, { className: "h-5 w-5" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Back" })
-            ]
+            text: "Back",
+            size: "default",
+            "aria-label": "Navigate back to previous page"
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shop-floor overview" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
@@ -33346,18 +33475,13 @@ var LeaderboardDetailView = React19.memo(({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `min-h-screen bg-slate-50 flex flex-col ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-20 bg-white shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 sm:px-8 py-2 sm:py-2.5", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-auto sm:w-32", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-auto sm:w-32", children: /* @__PURE__ */ jsxRuntime.jsx(
+          BackButtonMinimal,
           {
             onClick: handleBackClick,
-            className: "flex items-center gap-1 sm:gap-2 px-2 sm:px-3 py-1.5 sm:py-2 text-gray-600 hover:text-gray-900 transition-colors",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "w-4 h-4", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 12H5" }),
-                /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "12 19 5 12 12 5" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm font-medium", children: "Back" })
-            ]
+            text: "Back",
+            size: "default",
+            "aria-label": "Navigate back to previous page"
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
@@ -34418,18 +34542,15 @@ var ShiftsView = ({
   }, [lineConfigs, supabase, showToast]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `min-h-screen bg-slate-50 ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 sm:px-8 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+        BackButtonMinimal,
         {
           onClick: () => onBackClick ? onBackClick() : window.history.back(),
-          className: "absolute left-0 flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors",
-          "aria-label": "Go back",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "w-5 h-5" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Back" })
-          ]
+          text: "Back",
+          size: "default",
+          "aria-label": "Navigate back to previous page"
         }
-      ),
+      ) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shift Management" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-1", children: "Configure day and night shift timings and breaks for each production line" })
@@ -35338,15 +35459,13 @@ var TargetsViewUI = ({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "min-h-screen flex-1 bg-gray-50", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white px-8 py-6 shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+        BackButtonMinimal,
         {
           onClick: onBack,
-          className: "flex items-center text-gray-600 hover:text-gray-900",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, { className: "h-5 w-5" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Back" })
-          ]
+          text: "Back",
+          size: "default",
+          "aria-label": "Navigate back to previous page"
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -36663,15 +36782,13 @@ var WorkspaceDetailView = ({
         "Error: ",
         error.message
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+      /* @__PURE__ */ jsxRuntime.jsx(
+        BackButton,
         {
           onClick: () => onNavigate && onNavigate("/"),
-          className: "inline-flex items-center text-gray-600 hover:text-gray-900",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "w-5 h-5 mr-2" }),
-            "Return to Dashboard"
-          ]
+          text: "Return to Dashboard",
+          size: "default",
+          "aria-label": "Return to dashboard"
         }
       )
     ] });
@@ -36679,15 +36796,13 @@ var WorkspaceDetailView = ({
   if (!workspace) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen p-8 bg-slate-50", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-xl text-gray-600", children: "Workspace not found" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+      /* @__PURE__ */ jsxRuntime.jsx(
+        BackButton,
         {
           onClick: () => onNavigate && onNavigate("/"),
-          className: "inline-flex items-center text-gray-600 hover:text-gray-900",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "w-5 h-5 mr-2" }),
-            "Return to Dashboard"
-          ]
+          text: "Return to Dashboard",
+          size: "default",
+          "aria-label": "Return to dashboard"
         }
       )
     ] });
@@ -36702,17 +36817,15 @@ var WorkspaceDetailView = ({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen w-full flex flex-col bg-slate-50", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "sticky top-0 z-10 px-2 sm:px-2.5 lg:px-3 py-1.5 sm:py-2 lg:py-3 flex flex-col shadow-sm bg-white", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+                BackButtonMinimal,
                 {
                   onClick: handleBackNavigation,
-                  className: "absolute left-0 flex items-center text-gray-600 hover:text-gray-900 z-10",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "w-3 h-3 sm:w-3.5 lg:w-4 sm:h-3.5 lg:h-4 mr-1" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm sm:text-sm lg:text-base", children: previousView === "line_monthly_history" ? "Back to Line History" : returnUrl && returnUrl.includes("monthly_history") ? "Back to Line History" : returnUrl && returnUrl.includes("/kpis/") ? "Back to KPIs" : returnUrl && returnUrl.includes("/leaderboard/") ? "Back to Leaderboard" : date || shift ? "Back to Monthly History" : "Back" })
-                  ]
+                  text: previousView === "line_monthly_history" ? "Back to Line History" : returnUrl && returnUrl.includes("monthly_history") ? "Back to Line History" : returnUrl && returnUrl.includes("/kpis/") ? "Back to KPIs" : returnUrl && returnUrl.includes("/leaderboard/") ? "Back to Leaderboard" : date || shift ? "Back to Monthly History" : "Back",
+                  size: "default",
+                  "aria-label": "Navigate back to previous page"
                 }
-              ),
+              ) }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-1/2 transform -translate-x-1/2 flex items-center gap-3", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: formattedWorkspaceName }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
@@ -37220,17 +37333,15 @@ var SKUManagementView = () => {
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-slate-50", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 sm:px-8 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+        BackButtonMinimal,
         {
           onClick: handleBack,
-          className: "absolute left-0 flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "h-5 w-5" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Back" })
-          ]
+          text: "Back",
+          size: "default",
+          "aria-label": "Navigate back to previous page"
         }
-      ),
+      ) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto", children: [
         /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "SKU Management" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Manage Stock Keeping Units (SKUs) for production planning" })
@@ -37748,6 +37859,8 @@ exports.AuthenticatedHelpView = AuthenticatedHelpView;
 exports.AuthenticatedHomeView = AuthenticatedHomeView;
 exports.AuthenticatedShiftsView = AuthenticatedShiftsView;
 exports.AuthenticatedTargetsView = AuthenticatedTargetsView;
+exports.BackButton = BackButton;
+exports.BackButtonMinimal = BackButtonMinimal;
 exports.BarChart = BarChart;
 exports.BaseHistoryCalendar = BaseHistoryCalendar;
 exports.BottlenecksContent = BottlenecksContent;