@bpfdev/oly-ui 1.0.6 → 1.0.7

package/dist/index.mjs

@@ -1129,7 +1129,10 @@ var WidgetHeaderFilter = ({
   applyColor = "#FFFFFF",
   cancelBg = "transparent",
   cancelColor = "#374151",
-  cancelBorderColor = "#9CA3AF"
+  cancelBorderColor = "#9CA3AF",
+  triggerLabelSx,
+  triggerValueSx,
+  listItemSx
 }) => {
   const theme = useTheme2();
   const isDark = theme.palette.mode === "dark";
@@ -1207,11 +1210,14 @@ var WidgetHeaderFilter = ({
               Typography6,
               {
                 variant: "body2",
-                sx: {
-                  fontWeight: 700,
-                  fontSize: multiSelect ? 12 : 13,
-                  lineHeight: 1.2
-                },
+                sx: [
+                  {
+                    fontWeight: 700,
+                    fontSize: multiSelect ? 12 : 13,
+                    lineHeight: 1.2
+                  },
+                  ...triggerLabelSx ? [triggerLabelSx] : []
+                ],
                 children: label
               }
             ),
@@ -1219,11 +1225,14 @@ var WidgetHeaderFilter = ({
               Typography6,
               {
                 variant: "body2",
-                sx: {
-                  fontWeight: 500,
-                  fontSize: multiSelect ? 13 : 14,
-                  lineHeight: 1.2
-                },
+                sx: [
+                  {
+                    fontWeight: 500,
+                    fontSize: multiSelect ? 13 : 14,
+                    lineHeight: 1.2
+                  },
+                  ...triggerValueSx ? [triggerValueSx] : []
+                ],
                 children: valueLine
               }
             )
@@ -1328,14 +1337,21 @@ var WidgetHeaderFilter = ({
                     {
                       onClick: () => toggleOption(option),
                       dense: true,
-                      sx: {
-                        py: 0.45,
-                        px: 1.25,
-                        minHeight: 36,
-                        borderBottom: "1px solid rgba(0,0,0,0.06)",
-                        "&:last-of-type": { borderBottom: "none" },
-                        "&:hover": { bgcolor: "rgba(0,0,0,0.03)" }
-                      },
+                      sx: [
+                        {
+                          py: 0.45,
+                          px: 1.25,
+                          minHeight: 36,
+                          borderBottom: "1px solid rgba(0,0,0,0.06)",
+                          "&:last-of-type": {
+                            borderBottom: "none"
+                          },
+                          "&:hover": {
+                            bgcolor: "rgba(0,0,0,0.03)"
+                          }
+                        },
+                        ...listItemSx ? [listItemSx] : []
+                      ],
                       children: [
                         /* @__PURE__ */ jsx8(
                           Checkbox2,
@@ -1380,14 +1396,17 @@ var WidgetHeaderFilter = ({
                   {
                     onClick: () => toggleOption(option),
                     dense: true,
-                    sx: {
-                      py: 0.45,
-                      px: 1.25,
-                      minHeight: 36,
-                      borderBottom: "1px solid rgba(0,0,0,0.06)",
-                      "&:last-of-type": { borderBottom: "none" },
-                      "&:hover": { bgcolor: "rgba(0,0,0,0.03)" }
-                    },
+                    sx: [
+                      {
+                        py: 0.45,
+                        px: 1.25,
+                        minHeight: 36,
+                        borderBottom: "1px solid rgba(0,0,0,0.06)",
+                        "&:last-of-type": { borderBottom: "none" },
+                        "&:hover": { bgcolor: "rgba(0,0,0,0.03)" }
+                      },
+                      ...listItemSx ? [listItemSx] : []
+                    ],
                     children: [
                       /* @__PURE__ */ jsx8(
                         Checkbox2,
@@ -1478,14 +1497,17 @@ var WidgetHeaderFilter = ({
               {
                 onClick: () => handleSelect(option),
                 dense: true,
-                sx: {
-                  py: 0.75,
-                  px: 2,
-                  minHeight: 36,
-                  borderBottom: "1px solid rgba(0,0,0,0.06)",
-                  "&:last-of-type": { borderBottom: "none" },
-                  "&:hover": { bgcolor: "rgba(0,0,0,0.03)" }
-                },
+                sx: [
+                  {
+                    py: 0.75,
+                    px: 2,
+                    minHeight: 36,
+                    borderBottom: "1px solid rgba(0,0,0,0.06)",
+                    "&:last-of-type": { borderBottom: "none" },
+                    "&:hover": { bgcolor: "rgba(0,0,0,0.03)" }
+                  },
+                  ...listItemSx ? [listItemSx] : []
+                ],
                 children: /* @__PURE__ */ jsx8(
                   ListItemText,
                   {
@@ -3156,7 +3178,7 @@ var FalconButton = ({
 // src/components/FalconAuditTimeline/FalconAuditTimeline.tsx
 import { Icon as Icon7 } from "@iconify/react";
 import { Box as Box11, Card, Typography as Typography9, IconButton as IconButton4 } from "@mui/material";
-import { useState as useState7 } from "react";
+import { useMemo as useMemo6, useState as useState7 } from "react";
 import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var defaultMonths = [
   { label: "Jan", count: 0 },
@@ -3172,6 +3194,12 @@ var defaultMonths = [
   { label: "Nov", count: 2 },
   { label: "Dec", count: 2 }
 ];
+var getMonthKey = (m) => m.year !== void 0 ? `${m.label}-${m.year}` : m.label;
+var getOrdinalStr = (n) => {
+  const s = ["th", "st", "nd", "rd"];
+  const v = n % 100;
+  return n + (s[(v - 20) % 10] || s[v] || s[0]);
+};
 var RenderIcon = ({
   icon,
   defaultIcon,
@@ -3196,7 +3224,7 @@ var MonthButton = ({
   {
     onClick,
     sx: {
-      width: "89px !important",
+      minWidth: "89px !important",
       height: "29.5px !important",
       display: "flex !important",
       alignItems: "center !important",
@@ -3232,7 +3260,8 @@ var MonthButton = ({
             fontSize: `${monthFontSize} !important`,
             lineHeight: "16.5px !important",
             letterSpacing: "0.06px !important",
-            color: isSelected ? "#FFFFFF !important" : "#6B7280 !important"
+            color: isSelected ? "#FFFFFF !important" : "#6B7280 !important",
+            whiteSpace: "nowrap"
           },
           children: month.label
         }
@@ -3453,7 +3482,9 @@ var TimelineEventCard = ({
 var FalconAuditTimeline = ({
   title = "Audit Timeline",
   months = defaultMonths,
+  auditRuns,
   initialSelectedMonth = "Mar",
+  initialSelectedYear,
   onMonthChange,
   year = 2026,
   onPrevYearClick,
@@ -3485,21 +3516,199 @@ var FalconAuditTimeline = ({
   calendarIcon,
   chevronLeftIcon,
   chevronRightIcon,
-  exportIcon
+  exportIcon,
+  timeControlsRowSx
 }) => {
-  const [selectedMonth, setSelectedMonth] = useState7(initialSelectedMonth);
-  const activeMonth = months.find((m) => m.label === selectedMonth);
-  const isZeroCount = activeMonth && activeMonth.count === 0;
-  const handleMonthChange = (monthLabel) => {
-    setSelectedMonth(monthLabel);
+  const getInitialKey = () => {
+    if (initialSelectedYear !== void 0) {
+      const match2 = months.find(
+        (m) => m.label === initialSelectedMonth && m.year === initialSelectedYear
+      );
+      if (match2) return getMonthKey(match2);
+    }
+    const match = months.find((m) => m.label === initialSelectedMonth);
+    return match ? getMonthKey(match) : getMonthKey(months[0] ?? { label: initialSelectedMonth, count: 0 });
+  };
+  const [selectedKey, setSelectedKey] = useState7(getInitialKey);
+  const activeMonth = months.find((m) => getMonthKey(m) === selectedKey);
+  const handleMonthChange = (m) => {
+    const key = getMonthKey(m);
+    setSelectedKey(key);
     if (onMonthChange) {
-      onMonthChange(monthLabel);
+      onMonthChange(m.label, m.year);
     }
   };
-  const getOrdinalStr = (n) => {
-    const s = ["th", "st", "nd", "rd"];
-    const v = n % 100;
-    return n + (s[(v - 20) % 10] || s[v] || s[0]);
+  const displayYear = activeMonth?.year ?? year;
+  const activeRuns = useMemo6(() => {
+    if (!auditRuns || !activeMonth) return [];
+    return auditRuns.filter(
+      (r) => r.month === activeMonth.label && (activeMonth.year === void 0 || r.year === void 0 || r.year === activeMonth.year)
+    );
+  }, [auditRuns, activeMonth]);
+  const isZeroCount = activeMonth && activeMonth.count === 0;
+  const renderEventCards = () => {
+    if (!activeMonth || activeMonth.count === 0) {
+      return /* @__PURE__ */ jsx15(
+        Box11,
+        {
+          sx: {
+            width: "100% !important",
+            maxWidth: "1292px !important",
+            height: "49px !important",
+            borderRadius: "10px !important",
+            border: "1px solid #E5E7EB !important",
+            background: `${eventCardBg} !important`,
+            display: "flex !important",
+            alignItems: "center !important",
+            justifyContent: "center !important",
+            padding: "8px 14px !important",
+            gap: "6px !important",
+            boxSizing: "border-box !important"
+          },
+          children: /* @__PURE__ */ jsx15(
+            Typography9,
+            {
+              sx: {
+                fontFamily: `${brandFont} !important`,
+                fontWeight: "600 !important",
+                fontSize: "11px !important",
+                lineHeight: "13.5px !important",
+                letterSpacing: "0.17px !important",
+                color: "#6B7280 !important"
+              },
+              children: emptyStateMessage
+            }
+          )
+        }
+      );
+    }
+    if (auditRuns) {
+      if (activeRuns.length === 0) {
+        return /* @__PURE__ */ jsx15(
+          Box11,
+          {
+            sx: {
+              width: "100% !important",
+              maxWidth: "1292px !important",
+              height: "49px !important",
+              borderRadius: "10px !important",
+              border: "1px solid #E5E7EB !important",
+              background: `${eventCardBg} !important`,
+              display: "flex !important",
+              alignItems: "center !important",
+              justifyContent: "center !important",
+              padding: "8px 14px !important",
+              boxSizing: "border-box !important"
+            },
+            children: /* @__PURE__ */ jsx15(
+              Typography9,
+              {
+                sx: {
+                  fontFamily: `${brandFont} !important`,
+                  fontWeight: "600 !important",
+                  fontSize: "11px !important",
+                  lineHeight: "13.5px !important",
+                  letterSpacing: "0.17px !important",
+                  color: "#6B7280 !important"
+                },
+                children: emptyStateMessage
+              }
+            )
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx15(
+        Box11,
+        {
+          sx: {
+            display: "flex !important",
+            alignItems: "center !important",
+            gap: "8px !important",
+            width: "100% !important",
+            flexWrap: "wrap"
+          },
+          children: activeRuns.map((run, idx) => /* @__PURE__ */ jsx15(
+            TimelineEventCard,
+            {
+              date: run.date,
+              ordinal: run.label ?? getOrdinalStr(idx + 1),
+              status: run.status === "done" ? "completed" : "upcoming",
+              onExportClick: onExportReportClick ? (e) => onExportReportClick(e, run.date) : void 0,
+              brandFont,
+              interFont,
+              completedColor,
+              upcomingColor,
+              eventCardBg,
+              eventDateSize,
+              eventDateWeight,
+              ordinalSize: "9px",
+              ordinalWeight: "500",
+              exportIcon,
+              exportButtonText,
+              upcomingButtonText
+            },
+            run.run_number
+          ))
+        }
+      );
+    }
+    const monthIndex = months.findIndex((m) => getMonthKey(m) === selectedKey);
+    const precedingEvents = Math.max(0, monthIndex - 2) * 2;
+    const isFirstActiveMonth = monthIndex === months.findIndex((m) => m.count > 0);
+    return /* @__PURE__ */ jsxs11(
+      Box11,
+      {
+        sx: {
+          display: "flex !important",
+          alignItems: "center !important",
+          gap: "8px !important",
+          width: "100% !important"
+        },
+        children: [
+          /* @__PURE__ */ jsx15(
+            TimelineEventCard,
+            {
+              date: `${activeMonth.label} 5`,
+              ordinal: getOrdinalStr(precedingEvents + 1),
+              status: isFirstActiveMonth ? "completed" : "upcoming",
+              onExportClick: onExportReportClick ? (e) => onExportReportClick(e, `${activeMonth.label} 5`) : void 0,
+              brandFont,
+              interFont,
+              completedColor,
+              upcomingColor,
+              eventCardBg,
+              eventDateSize,
+              eventDateWeight,
+              ordinalSize: "9px",
+              ordinalWeight: "500",
+              exportIcon,
+              exportButtonText,
+              upcomingButtonText
+            }
+          ),
+          /* @__PURE__ */ jsx15(
+            TimelineEventCard,
+            {
+              date: `${activeMonth.label} 20`,
+              ordinal: getOrdinalStr(precedingEvents + 2),
+              status: "upcoming",
+              brandFont,
+              interFont,
+              completedColor,
+              upcomingColor,
+              eventCardBg,
+              eventDateSize,
+              eventDateWeight,
+              ordinalSize: "9px",
+              ordinalWeight: "500",
+              exportIcon,
+              exportButtonText,
+              upcomingButtonText
+            }
+          )
+        ]
+      }
+    );
   };
   return /* @__PURE__ */ jsxs11(
     Card,
@@ -3536,18 +3745,21 @@ var FalconAuditTimeline = ({
         /* @__PURE__ */ jsxs11(
           Box11,
           {
-            sx: {
-              display: "flex !important",
-              alignItems: "center !important",
-              gap: "8px !important",
-              overflow: "hidden !important"
-            },
+            sx: [
+              {
+                display: "flex !important",
+                alignItems: "center !important",
+                gap: "8px !important",
+                overflow: "hidden !important"
+              },
+              ...timeControlsRowSx ? [timeControlsRowSx] : []
+            ],
             children: [
               showYearSelector && /* @__PURE__ */ jsxs11(
                 Box11,
                 {
                   sx: {
-                    width: "124px !important",
+                    minWidth: "124px !important",
                     height: "29px !important",
                     display: "flex !important",
                     alignItems: "center !important",
@@ -3584,11 +3796,12 @@ var FalconAuditTimeline = ({
                           fontSize: "11px !important",
                           lineHeight: "16.5px !important",
                           letterSpacing: "0.06px !important",
-                          color: "#0A0A0A !important"
+                          color: "#0A0A0A !important",
+                          whiteSpace: "nowrap"
                         },
                         children: [
                           "Year ",
-                          year
+                          displayYear
                         ]
                       }
                     ),
@@ -3615,8 +3828,8 @@ var FalconAuditTimeline = ({
                 MonthButton,
                 {
                   month,
-                  isSelected: selectedMonth === month.label,
-                  onClick: () => handleMonthChange(month.label),
+                  isSelected: getMonthKey(month) === selectedKey,
+                  onClick: () => handleMonthChange(month),
                   brandFont,
                   primaryColor,
                   inactiveMonthBg,
@@ -3624,106 +3837,12 @@ var FalconAuditTimeline = ({
                   monthFontWeight,
                   calendarIcon
                 },
-                month.label
+                getMonthKey(month)
               ))
             ]
           }
         ),
-        (() => {
-          const monthInfo = months.find((m) => m.label === selectedMonth);
-          if (!monthInfo || monthInfo.count === 0) {
-            return /* @__PURE__ */ jsx15(
-              Box11,
-              {
-                sx: {
-                  width: "100% !important",
-                  maxWidth: "1292px !important",
-                  height: "49px !important",
-                  borderRadius: "10px !important",
-                  border: "1px solid #E5E7EB !important",
-                  background: `${eventCardBg} !important`,
-                  display: "flex !important",
-                  alignItems: "center !important",
-                  justifyContent: "center !important",
-                  padding: "8px 14px !important",
-                  gap: "6px !important",
-                  boxSizing: "border-box !important"
-                },
-                children: /* @__PURE__ */ jsx15(
-                  Typography9,
-                  {
-                    sx: {
-                      fontFamily: `${brandFont} !important`,
-                      fontWeight: "600 !important",
-                      fontSize: "11px !important",
-                      lineHeight: "13.5px !important",
-                      letterSpacing: "0.17px !important",
-                      color: "#6B7280 !important"
-                    },
-                    children: emptyStateMessage
-                  }
-                )
-              }
-            );
-          }
-          const monthIndex = months.findIndex((m) => m.label === selectedMonth);
-          const precedingEvents = (monthIndex - 2) * 2;
-          const isMar = selectedMonth === "Mar";
-          return /* @__PURE__ */ jsxs11(
-            Box11,
-            {
-              sx: {
-                display: "flex !important",
-                alignItems: "center !important",
-                gap: "8px !important",
-                width: "100% !important"
-              },
-              children: [
-                /* @__PURE__ */ jsx15(
-                  TimelineEventCard,
-                  {
-                    date: `${selectedMonth} 5`,
-                    ordinal: getOrdinalStr(precedingEvents + 1),
-                    status: isMar ? "completed" : "upcoming",
-                    onExportClick: onExportReportClick ? (e) => onExportReportClick(e, `${selectedMonth} 5`) : void 0,
-                    brandFont,
-                    interFont,
-                    completedColor,
-                    upcomingColor,
-                    eventCardBg,
-                    eventDateSize,
-                    eventDateWeight,
-                    ordinalSize: "9px",
-                    ordinalWeight: "500",
-                    exportIcon,
-                    exportButtonText,
-                    upcomingButtonText
-                  }
-                ),
-                /* @__PURE__ */ jsx15(
-                  TimelineEventCard,
-                  {
-                    date: `${selectedMonth} 20`,
-                    ordinal: getOrdinalStr(precedingEvents + 2),
-                    status: "upcoming",
-                    brandFont,
-                    interFont,
-                    completedColor,
-                    upcomingColor,
-                    eventCardBg,
-                    eventDateSize,
-                    eventDateWeight,
-                    ordinalSize: "9px",
-                    ordinalWeight: "500",
-                    exportIcon,
-                    exportButtonText,
-                    upcomingButtonText
-                  }
-                )
-              ]
-            }
-          );
-        })()
+        renderEventCards()
       ]
     }
   );
@@ -8836,21 +8955,33 @@ var WalkinAnalysis = ({
             spacing: 3,
             alignItems: "center",
             justifyContent: "flex-start",
-            sx: { width: "100%" },
+            sx: [
+              { width: "100%" },
+              ...customization?.chartLegendRowSx != null ? [customization.chartLegendRowSx] : []
+            ],
             children: [
-              /* @__PURE__ */ jsx31(Box21, { sx: { flexShrink: 0, lineHeight: 0 }, children: /* @__PURE__ */ jsx31(
-                WalkinPieChart,
+              /* @__PURE__ */ jsx31(
+                Box21,
                 {
-                  slices,
-                  size: resolvedPieSize,
-                  typography,
-                  activeTabId,
-                  renderTooltip,
-                  emptyStatePlaceholderProps,
-                  isChartAnimationActive,
-                  chartAnimationDuration
+                  sx: [
+                    { flexShrink: 0, lineHeight: 0 },
+                    ...customization?.pieChartBoxSx != null ? [customization.pieChartBoxSx] : []
+                  ],
+                  children: /* @__PURE__ */ jsx31(
+                    WalkinPieChart,
+                    {
+                      slices,
+                      size: resolvedPieSize,
+                      typography,
+                      activeTabId,
+                      renderTooltip,
+                      emptyStatePlaceholderProps,
+                      isChartAnimationActive,
+                      chartAnimationDuration
+                    }
+                  )
                 }
-              ) }),
+              ),
               /* @__PURE__ */ jsx31(
                 Stack15,
                 {
@@ -10303,6 +10434,17 @@ var QueueTimeBreakdownArea = ({
   );
   const gridStroke = ac?.gridStroke ?? theme.palette.divider;
   const yLabel = ac?.yAxisLabel ?? "No of Visitors";
+  const allZero = React20.useMemo(() => {
+    if (chartData.length === 0) return true;
+    return chartData.every(
+      (row) => series.every((s) => {
+        const val = row[s.name];
+        return (typeof val === "number" ? val : Number(val)) === 0;
+      })
+    );
+  }, [chartData, series]);
+  const yDomain = allZero ? [0, 16e3] : [0, "auto"];
+  const yTickCount = allZero ? 5 : void 0;
   return /* @__PURE__ */ jsx37(Stack18, { justifyContent: "center", height: stackH, children: /* @__PURE__ */ jsx37(ResponsiveContainer3, { width: "100%", height: chartH, children: /* @__PURE__ */ jsxs29(AreaChart, { data: chartData, margin, children: [
     /* @__PURE__ */ jsx37(
       CartesianGrid6,
@@ -10324,6 +10466,8 @@ var QueueTimeBreakdownArea = ({
     /* @__PURE__ */ jsx37(
       YAxis6,
       {
+        domain: yDomain,
+        tickCount: yTickCount,
         tick: { fill: theme.palette.text.secondary, fontSize: 11 },
         axisLine: false,
         tickLine: false,
@@ -10804,6 +10948,12 @@ function QueueTimeBreakdownStackedBar({
     [rawValues, total]
   );
   const h = sb?.barThicknessPx ?? Math.max(14, QUEUE_STACKED_BAR_THICKNESS_PX);
+  const isAllZero = rawValues.every((v) => v === 0);
+  const emptySegments = legendRows.length > 0 ? legendRows : row.data.map((d, i) => ({
+    label: d.name,
+    percent: "0%",
+    color: palette[i % palette.length]
+  }));
   return /* @__PURE__ */ jsxs31(Stack20, { spacing: 0, sx: { width: "100%", mb: 1.5 }, children: [
     /* @__PURE__ */ jsx39(
       Box25,
@@ -10812,9 +10962,19 @@ function QueueTimeBreakdownStackedBar({
           width: "100%",
           height: h,
           display: "flex",
-          overflow: "hidden"
+          overflow: "hidden",
+          borderRadius: 0
         },
-        children: pcts.map((p, i) => {
+        children: isAllZero ? /* @__PURE__ */ jsx39(
+          Box25,
+          {
+            sx: {
+              width: "100%",
+              height: "100%",
+              bgcolor: "#E5E7EB"
+            }
+          }
+        ) : pcts.map((p, i) => {
           if (p <= 0) return null;
           const color = palette[i % palette.length];
           const segName = legendRows[i]?.label ?? row.data[i]?.name ?? "";
@@ -10878,25 +11038,97 @@ function QueueTimeBreakdownStackedBar({
           },
           sb?.labelRowContainerSx
         ),
-        children: pcts.map((p, i) => {
-          if (p <= 0) return null;
+        children: isAllZero ? emptySegments.map((seg, i) => {
+          const labelText = seg.label ?? row.data[i]?.name ?? "";
+          const sharePct = 100 / emptySegments.length;
+          return /* @__PURE__ */ jsxs31(
+            Box25,
+            {
+              sx: mergeSx2(
+                {
+                  flex: `0 0 ${sharePct}%`,
+                  minWidth: 0,
+                  maxWidth: `${sharePct}%`,
+                  px: 0.75,
+                  textAlign: "center",
+                  overflow: "hidden"
+                },
+                sb?.segmentBoxSx
+              ),
+              children: [
+                /* @__PURE__ */ jsx39(
+                  Typography21,
+                  {
+                    sx: mergeSx2(
+                      {
+                        fontSize: "clamp(13px, 1.2vw, 20px)",
+                        fontWeight: 700,
+                        color: "#7A7F87",
+                        lineHeight: 1.15,
+                        width: "100%",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap"
+                      },
+                      sb?.labelPercentSx
+                    ),
+                    children: "0 (0%)"
+                  }
+                ),
+                /* @__PURE__ */ jsx39(
+                  Typography21,
+                  {
+                    sx: mergeSx2(
+                      {
+                        fontSize: "clamp(9px, 0.9vw, 11px)",
+                        fontWeight: 600,
+                        color: "#7A7F87",
+                        lineHeight: 1.25,
+                        mt: 0.4,
+                        width: "100%",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap"
+                      },
+                      sb?.labelRangeSx
+                    ),
+                    children: labelText
+                  }
+                )
+              ]
+            },
+            `empty-lbl-${row.name}-${i}`
+          );
+        }) : pcts.map((p, i) => {
           const leg = legendRows[i];
-          const pctText = leg?.percent ?? `${Math.round(p)}%`;
           const labelText = leg?.label ?? row.data[i]?.name ?? "";
           const countValue = rawValues[i];
-          const countText = new Intl.NumberFormat("en-US").format(countValue);
+          const sharePct = 100 / pcts.length;
+          let displayText;
+          if (countValue <= 0) {
+            displayText = "0";
+          } else {
+            const pctText = leg?.percent ?? `${Math.round(p)}%`;
+            const countText = new Intl.NumberFormat("en-US").format(
+              countValue
+            );
+            displayText = `${countText} (${pctText})`;
+          }
           return /* @__PURE__ */ jsxs31(
             Box25,
             {
-              title: `${countText} (${pctText}) ${labelText}`.trim(),
-              sx: {
-                flex: `0 0 ${p}%`,
-                minWidth: 0,
-                maxWidth: `${p}%`,
-                px: 0.75,
-                textAlign: "center",
-                overflow: "hidden"
-              },
+              title: `${displayText} ${labelText}`.trim(),
+              sx: mergeSx2(
+                {
+                  flex: `0 0 ${sharePct}%`,
+                  minWidth: 0,
+                  maxWidth: `${sharePct}%`,
+                  px: 0.75,
+                  textAlign: "center",
+                  overflow: "hidden"
+                },
+                sb?.segmentBoxSx
+              ),
               children: [
                 /* @__PURE__ */ jsx39(
                   Typography21,
@@ -10914,7 +11146,7 @@ function QueueTimeBreakdownStackedBar({
                       },
                       sb?.labelPercentSx
                     ),
-                    children: `${countText} (${pctText})`
+                    children: displayText
                   }
                 ),
                 /* @__PURE__ */ jsx39(
@@ -11004,6 +11236,10 @@ function QueueTimeBreakdown({
     const values = [...Donut_data, ...yesterdayDonut];
     return values.some((value) => Number.isFinite(value) && value > 0);
   }, [Donut_data, yesterdayDonut]);
+  const hasBarData = React23.useMemo(
+    () => data.some((row) => row.data.some((seg) => (seg.data[0] ?? 0) > 0)),
+    [data]
+  );
   const palette = customization?.chartPalette && customization.chartPalette.length > 0 ? customization.chartPalette : QUEUE_CHART_COLORS;
   const legend = queueBucketLegend ?? defaultBucketLegendFromPalette(palette);
   const resolvedHeaderImageSrc = headerImageSrc === void 0 ? QUEUE_TIME_BREAKDOWN_DEFAULT_HEADER_IMAGE_SRC : headerImageSrc;
@@ -11235,14 +11471,14 @@ function QueueTimeBreakdown({
                 { padding: "10px 8px" },
                 customization?.areaChart?.cardContentSx
               ),
-              children: /* @__PURE__ */ jsx40(
+              children: hasBarData ? /* @__PURE__ */ jsx40(
                 QueueTimeBreakdownArea_default,
                 {
                   series: getQueueTimeBreakdownAreaSeriesData(filter),
                   xAxis: getQueueTimeBreakdownAreaXAxisData(filter),
                   renderTooltip: renderAreaTooltip
                 }
-              )
+              ) : /* @__PURE__ */ jsx40(ChartEmptyState, { minHeight: 330 })
             }
           )
         }
@@ -11264,7 +11500,7 @@ import {
   Typography as Typography23
 } from "@mui/material";
 import * as React24 from "react";
-import { useEffect as useEffect3, useMemo as useMemo18, useState as useState17 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo19, useState as useState17 } from "react";
 import { ResponsiveContainer as ResponsiveContainer5, Treemap } from "recharts";
 
 // src/components/widgets/FootFallHeatMap/FootFallHeatMapView.types.ts
@@ -11955,51 +12191,71 @@ function FootfallHeatMapKpiRankedBlock({
         ...presentation?.kpiContainerSx ? [presentation.kpiContainerSx] : []
       ],
       children: [
-        useCustomSummary && customSummary.length === 0 ? null : /* @__PURE__ */ jsx41(Stack22, { direction: "row", spacing: 1.5, flexWrap: "wrap", useFlexGap: true, children: useCustomSummary ? customSummary.map((card) => /* @__PURE__ */ jsx41(
-          InlineStatCard,
+        useCustomSummary && customSummary.length === 0 ? null : /* @__PURE__ */ jsx41(
+          Stack22,
           {
-            icon: card.icon ?? "mdi:chart-box-outline",
-            title: card.title,
-            value: card.value,
-            sx: [presentation?.statCardSx, card.sx].filter(
-              Boolean
-            ),
-            iconColor: card.iconColor ?? statIcon
-          },
-          card.id
-        )) : [
-          /* @__PURE__ */ jsx41(
-            InlineStatCard,
-            {
-              icon: "mdi:store-marker-outline",
-              title: "No. of Stores",
-              value: summaryKpis.storeCount,
-              sx: presentation?.statCardSx,
-              iconColor: statIcon
-            },
-            "default-stores"
-          ),
-          /* @__PURE__ */ jsx41(
-            InlineStatCard,
-            {
-              icon: "fluent:people-community-16-filled",
-              title: "Overall Visitors",
-              value: summaryKpis.overallVisitors,
-              sx: presentation?.statCardSx,
-              iconColor: statIcon
-            },
-            "default-visitors"
-          )
-        ] }),
-        /* @__PURE__ */ jsx41(Stack22, { spacing: 1.25, sx: { pt: 0.5, pb: 1 }, children: rankedBarList.items.map((item) => /* @__PURE__ */ jsx41(
-          InlineSegmentStrip,
+            direction: "row",
+            spacing: 1.5,
+            flexWrap: "wrap",
+            useFlexGap: true,
+            sx: presentation?.summaryRowSx ? [presentation.summaryRowSx] : void 0,
+            children: useCustomSummary ? customSummary.map((card) => /* @__PURE__ */ jsx41(
+              InlineStatCard,
+              {
+                icon: card.icon ?? "mdi:chart-box-outline",
+                title: card.title,
+                value: card.value,
+                sx: [presentation?.statCardSx, card.sx].filter(
+                  Boolean
+                ),
+                iconColor: card.iconColor ?? statIcon
+              },
+              card.id
+            )) : [
+              /* @__PURE__ */ jsx41(
+                InlineStatCard,
+                {
+                  icon: "mdi:store-marker-outline",
+                  title: "No. of Stores",
+                  value: summaryKpis.storeCount,
+                  sx: presentation?.statCardSx,
+                  iconColor: statIcon
+                },
+                "default-stores"
+              ),
+              /* @__PURE__ */ jsx41(
+                InlineStatCard,
+                {
+                  icon: "fluent:people-community-16-filled",
+                  title: "Overall Visitors",
+                  value: summaryKpis.overallVisitors,
+                  sx: presentation?.statCardSx,
+                  iconColor: statIcon
+                },
+                "default-visitors"
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx41(
+          Stack22,
           {
-            item,
-            scaleTotal,
-            presentation
-          },
-          item.id
-        )) })
+            spacing: 1.25,
+            sx: [
+              { pt: 0.5, pb: 1 },
+              ...presentation?.rankedListStackSx ? [presentation.rankedListStackSx] : []
+            ],
+            children: rankedBarList.items.map((item) => /* @__PURE__ */ jsx41(
+              InlineSegmentStrip,
+              {
+                item,
+                scaleTotal,
+                presentation
+              },
+              item.id
+            ))
+          }
+        )
       ]
     }
   );
@@ -12147,7 +12403,8 @@ function FootFallHeatMapView({
   treemap: treemapProp,
   tree: treeProp,
   kpiStrip: kpiStripPresentation,
-  emptyStatePlaceholderProps
+  emptyStatePlaceholderProps,
+  onPathChange
 }) {
   const sortBy = treeProp?.sortBy ?? "walkins";
   const startFromLevel = treeProp?.startFromLevel ?? "Region";
@@ -12170,7 +12427,7 @@ function FootFallHeatMapView({
     tileColors: treemapProp?.tileColors
   };
   const tileMetrics = treemapLayout.tileMetrics;
-  const tileColorFromSeed = useMemo18(
+  const tileColorFromSeed = useMemo19(
     () => createTreemapTileColorResolver(treemapLayout.tileColors),
     [treemapLayout.tileColors]
   );
@@ -12212,7 +12469,7 @@ function FootFallHeatMapView({
     startFromPathMode,
     tileColorFromSeed
   ]);
-  const derivedKpiStrip = useMemo18(() => {
+  const derivedKpiStrip = useMemo19(() => {
     if (isLoading || loading || !initialData) return null;
     const activeZoneForStrip = trackingDetails.length > 0 ? trackingDetails[trackingDetails.length - 1] : void 0;
     return deriveFootfallHeatMapKpiStrip(
@@ -12242,7 +12499,11 @@ function FootFallHeatMapView({
       setTrackingDetails((pre) => {
         const expectedDepth = data.previous.length;
         const normalizedPath = pre.slice(0, expectedDepth);
-        return [...normalizedPath, p2];
+        const nextDetails = [...normalizedPath, p2];
+        onPathChange?.(
+          nextDetails.map((t) => String(t?.name ?? "").trim()).filter(Boolean)
+        );
+        return nextDetails;
       });
       const nested = getNestedList(p2);
       const hasNestedChildren = Boolean(nested?.length);
@@ -12530,6 +12791,9 @@ function FootFallHeatMapView({
     setShowLeaf(false);
     const history = trackingDetails.slice(0, -1);
     setTrackingDetails(history);
+    onPathChange?.(
+      history.map((t) => String(t?.name ?? "").trim()).filter(Boolean)
+    );
     const obj1 = {
       current: data.previous[0] ?? [],
       previous: data.previous.slice(1)