sag_components 2.0.0-beta137 → 2.0.0-beta139

package/dist/index.js

@@ -8720,24 +8720,25 @@ const IconContainer$5 = styled__default["default"].div`
   cursor:  pointer;  
 `;
 
-const DropdownSingleNew = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  onChange,
-  required,
-  disabled,
-  width,
-  withMarginBottom = true,
-  error,
-  errorMessage,
-  xIconShow,
-  labelColor,
-  showLabelOnTop,
-  orderBy,
-  elementType
-}) => {
+const DropdownSingleNew = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    onChange,
+    required,
+    disabled,
+    width,
+    withMarginBottom = true,
+    error,
+    errorMessage,
+    xIconShow,
+    labelColor,
+    showLabelOnTop,
+    orderBy,
+    elementType
+  } = _ref;
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [showAbove, setShowAbove] = React$1.useState(false);
@@ -9209,25 +9210,26 @@ const IconContainer$4 = styled__default["default"].div`
   cursor:  pointer;  
 `;
 
-const DropdownMultiNew = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  onChange,
-  required,
-  disabled,
-  width,
-  withMarginBottom = true,
-  error,
-  errorMessage,
-  labelColor,
-  xIconShow,
-  checkBoxColor,
-  showLabelOnTop,
-  orderBy,
-  elementType
-}) => {
+const DropdownMultiNew = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    onChange,
+    required,
+    disabled,
+    width,
+    withMarginBottom = true,
+    error,
+    errorMessage,
+    labelColor,
+    xIconShow,
+    checkBoxColor,
+    showLabelOnTop,
+    orderBy,
+    elementType
+  } = _ref;
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [showAbove, setShowAbove] = React$1.useState(false);
@@ -36870,7 +36872,7 @@ const TruncatedText$1 = styled__default["default"].span`
   text-overflow: ellipsis;
   font-size: 14px;
 `;
-const Checkmark$1 = styled__default["default"].span`
+const Checkmark = styled__default["default"].span`
   color: ${props => props.color};
   margin-left: 8px;
   font-weight: bold;
@@ -36969,7 +36971,7 @@ const SortPop = props => {
     onClick: () => {
       handleChange(item);
     }
-  }, /*#__PURE__*/React__default["default"].createElement(TruncatedText$1, null, item.label), item.value === value && /*#__PURE__*/React__default["default"].createElement(Checkmark$1, {
+  }, /*#__PURE__*/React__default["default"].createElement(TruncatedText$1, null, item.label), item.value === value && /*#__PURE__*/React__default["default"].createElement(Checkmark, {
     color: color
   }, "\u2713")))), /*#__PURE__*/React__default["default"].createElement(ButtonWrapper$1, null, /*#__PURE__*/React__default["default"].createElement(ResetButton, {
     onClick: handleReset,
@@ -41664,7 +41666,6 @@ const VendorName$2 = styled__default["default"].div`
   color: #212121;
   font-size: 16px;
   font-weight: 500;
-  text-align: left;
 `;
 styled__default["default"].div`
   color: #b0b0b0;
@@ -51111,18 +51112,12 @@ const ItemManagerPanel = _ref => {
   };
   const hasUnisentPackages = React$1.useMemo(() => {
     return itemAndPackage.some(vendor => {
-      // In edit mode, treat packages: null as unsent
-      if (editMode && vendor.packages === null) {
-        return true; // This vendor has unsent items
-      }
-
-      // Original logic for other cases
       if (vendor.packages === null || !Array.isArray(vendor.packages)) {
         return false;
       }
       return vendor.packages.some(pkg => !pkg.hasOwnProperty('status') || pkg.status == null || pkg.status === undefined || pkg.status === '');
     });
-  }, [itemAndPackage, editMode]);
+  }, [itemAndPackage]);
   const actuallyAllFormsSent = AllFormsSent && !hasUnisentPackages;
   React$1.useEffect(() => {
     if (screen === "success" && onSendForms) {
@@ -51258,28 +51253,22 @@ const ItemManagerPanel = _ref => {
     }))), /*#__PURE__*/React__default["default"].createElement(VendorListWrapper$2, {
       disabled: disableSection,
       headerHeight: headerHeight
-    }, /*#__PURE__*/React__default["default"].createElement(VendorList$2, null, itemAndPackage.filter(item => {
-      // In edit mode, show vendors with packages: null as well
-      if (editMode && item.packages === null) {
-        return true;
-      }
-      // Original logic: show only vendors with packages !== null
-      return item.packages !== null;
-    }).map((item, idx) => /*#__PURE__*/React__default["default"].createElement(VendorItem$1, {
+    }, /*#__PURE__*/React__default["default"].createElement(VendorList$2, null, itemAndPackage.filter(item => item.packages !== null).map((item, idx) => /*#__PURE__*/React__default["default"].createElement(VendorItem$1, {
       key: idx
-    }, /*#__PURE__*/React__default["default"].createElement(DotContainer, null, item.packages === null && editMode || Array.isArray(item.packages) && item.packages.length === 0 ? /*#__PURE__*/React__default["default"].createElement(RedDot, null) : null), /*#__PURE__*/React__default["default"].createElement(LineContainer, {
+    }, /*#__PURE__*/React__default["default"].createElement(DotContainer, null, item.packages.length === 0 && /*#__PURE__*/React__default["default"].createElement(RedDot, null)), /*#__PURE__*/React__default["default"].createElement(LineContainer, {
       onClick: e => {
         handleVendorClick(item);
       }
-    }, /*#__PURE__*/React__default["default"].createElement(VendorNameAndPackagesContainer$1, null, /*#__PURE__*/React__default["default"].createElement(VendorName$2, null, item.name), editMode && item.packages === null && /*#__PURE__*/React__default["default"].createElement(Subtitle$1, null, "Not configured"), Array.isArray(item.packages) && item.packages.length === 0 && /*#__PURE__*/React__default["default"].createElement(Subtitle$1, null, "No Packages"), Array.isArray(item.packages) && item.packages.length > 0 && /*#__PURE__*/React__default["default"].createElement(Subtitle$1, null, (() => {
-      const packagesWithStatus = item.packages.filter(pkg => pkg.hasOwnProperty('status') && pkg.status != null && pkg.status !== undefined && pkg.status !== '' && pkg.status !== 1);
-      const string = `Package${item.packages.length > 1 ? 's' : ''} sent`;
-      if (packagesWithStatus.length === 0) {
-        return `0/${item.packages.length} ${string}`;
-      } else if (packagesWithStatus.length === item.packages.length) {
-        return `${item.packages.length}/${item.packages.length} ${string}`;
+    }, /*#__PURE__*/React__default["default"].createElement(VendorNameAndPackagesContainer$1, null, /*#__PURE__*/React__default["default"].createElement(VendorName$2, null, item.name), item.packages.length === 0 && /*#__PURE__*/React__default["default"].createElement(Subtitle$1, null, "No Packages"), item.packages.length > 0 && /*#__PURE__*/React__default["default"].createElement(Subtitle$1, null, (() => {
+      const packagesWithStatus = item.packages.filter(pkg => pkg.hasOwnProperty('status') && pkg.status != null && pkg.status !== undefined && pkg.status !== '');
+      const allHaveStatus = packagesWithStatus.length === item.packages.length;
+      const noneHaveStatus = packagesWithStatus.length === 0;
+      if (noneHaveStatus) {
+        return `0/${item.packages.length} sent`;
+      } else if (allHaveStatus) {
+        return `${item.packages.length}/${item.packages.length} sent`;
       } else {
-        return `${packagesWithStatus.length}/${item.packages.length} ${string}`;
+        return `${packagesWithStatus.length}/${item.packages.length} sent`;
       }
     })())), /*#__PURE__*/React__default["default"].createElement(VendorChevron$1, null, /*#__PURE__*/React__default["default"].createElement(ArrowRightFullIcon, null))), /*#__PURE__*/React__default["default"].createElement(Trash$1, {
       className: "trash-icon",
@@ -52399,11 +52388,12 @@ const CardsContainer = styled__default["default"].div`
 const StatusCard = styled__default["default"].div`
   position: relative;
   background-color: white;
-  border-bottom: 3px solid ${props => props.isSelected ? props.borderColor : '#E0E0E0'};
+  border-bottom: ${props => props.isSelected ? `3px solid ${props.borderColor}` : 'none'};
   border-radius: 12px;
   padding: 12px 16px;
   flex-grow: 1;
   flex-basis: 0;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10);
 `;
 const CardHeader = styled__default["default"].div`
   display: flex;
@@ -52411,6 +52401,27 @@ const CardHeader = styled__default["default"].div`
   align-items: center;
   margin-bottom: 10px;
 `;
+const CheckmarkContainer = styled__default["default"].div`
+  width: 17px;
+  height: 17px;
+  border: 2px solid #212121;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  color: white;
+  transition: background-color .15s ease, border-color .15s ease;
+  pointer-events: none;
+
+  &.checked {
+    background-color: #066768;
+    border-color: #066768;
+  }
+
+  svg { display: none; }
+  &.checked svg { display: block; }
+`;
 const Circle = styled__default["default"].div`
   width: 16px;
   height: 16px;
@@ -52422,10 +52433,8 @@ const CardTitle = styled__default["default"].h3`
   margin: 0;
   font-size: 18px;
   font-weight: 500;
-  color: ${props => props.isSelected ? props.color : '#666666'};
-  transition: color 0.2s ease-in-out;
 `;
-const Checkmark = styled__default["default"].input`
+styled__default["default"].input`
   width: 16px;
   height: 16px;
   accent-color: #066768;
@@ -52439,102 +52448,68 @@ const CardContent = styled__default["default"].div`
   flex-direction: column;
   align-items: flex-start;
 `;
-const StatusCount = styled__default["default"].h4`
+const StatusCount = styled__default["default"].span`
   font-size: 32px;
   font-weight: 500;
-  color: ${props => props.isSelected ? props.color : '#999999'};
   line-height: 1;
-  margin: 0;
-  transition: color 0.2s ease-in-out;
 `;
 
-const EventStatusCards = _ref => {
+const QuickFilterCards = _ref => {
   let {
-    statusData = [],
-    onStatusToggle = () => {},
-    disabled = false,
+    data = [],
+    onCardToggle = () => {},
     width = "100%"
   } = _ref;
-  // Default data structure if no data provided
-  const defaultStatusData = [{
-    status: "Pending",
-    count: 0,
-    checked: true,
-    color: "#F5C9A7"
-  }, {
-    status: "Received",
-    count: 0,
-    checked: true,
-    color: "#B9D5D5"
-  }, {
-    status: "Approved",
-    count: 0,
-    checked: true,
-    color: "#BEDDC3"
-  }, {
-    status: "Cancelled",
-    count: 0,
-    checked: true,
-    color: "#EBA6AF"
-  }];
-  const displayData = statusData.length > 0 ? statusData : defaultStatusData;
+  // local mirror so UI updates immediately even if parent is slow/not controlling
+  const [items, setItems] = React$1.useState(data);
+  React$1.useEffect(() => setItems(data), [data]);
   const handleCardClick = status => {
-    if (disabled) return;
-    const updatedData = displayData.map(item => item.status === status ? {
-      ...item,
-      checked: !item.checked
-    } : item);
-    const clickedItem = displayData.find(item => item.status === status);
-    onStatusToggle(updatedData, status, !clickedItem.checked);
+    setItems(prev => {
+      const clicked = prev.find(i => i.status === status);
+      const nextChecked = clicked ? !clicked.checked : true;
+      const next = prev.map(i => i.status === status ? {
+        ...i,
+        checked: nextChecked
+      } : i);
+      onCardToggle(next, status, nextChecked);
+      return next;
+    });
   };
   return /*#__PURE__*/React__default["default"].createElement(CardsContainer, {
     width: width,
-    className: "EventStatusCardsContainer"
-  }, displayData.map(item => {
-    const {
+    className: "QuickFilterCardsContainer"
+  }, items.map(_ref2 => {
+    let {
       status,
       count,
       checked,
       color
-    } = item;
+    } = _ref2;
     return /*#__PURE__*/React__default["default"].createElement(StatusCard, {
       key: status,
       className: `StatusCard StatusCard-${status}`,
       isSelected: checked,
       borderColor: color,
-      disabled: disabled,
-      onClick: () => handleCardClick(status),
-      "data-testid": `status-card-${status.toLowerCase()}`
+      onClick: () => handleCardClick(status)
     }, /*#__PURE__*/React__default["default"].createElement(CardHeader, null, /*#__PURE__*/React__default["default"].createElement(Circle, {
       color: color
-    }), /*#__PURE__*/React__default["default"].createElement(CardTitle, {
-      isSelected: checked,
-      color: color
-    }, status), /*#__PURE__*/React__default["default"].createElement(Checkmark, {
-      type: "checkbox",
-      checked: checked,
-      readOnly: true
-    })), /*#__PURE__*/React__default["default"].createElement(CardContent, null, /*#__PURE__*/React__default["default"].createElement(StatusCount, {
+    }), /*#__PURE__*/React__default["default"].createElement(CardTitle, null, status), /*#__PURE__*/React__default["default"].createElement(CheckmarkContainer, {
+      className: checked ? "checked" : ""
+    }, checked && /*#__PURE__*/React__default["default"].createElement("svg", {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 20 20",
+      fill: "currentColor"
+    }, /*#__PURE__*/React__default["default"].createElement("path", {
+      fillRule: "evenodd",
+      d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+      clipRule: "evenodd"
+    })))), /*#__PURE__*/React__default["default"].createElement(CardContent, null, /*#__PURE__*/React__default["default"].createElement(StatusCount, {
       isSelected: checked,
       color: color
     }, count)));
   }));
 };
-EventStatusCards.propTypes = {
-  /** Array of status objects with count, checked state, and color information */
-  statusData: PropTypes.arrayOf(PropTypes.shape({
-    status: PropTypes.oneOf(["Pending", "Received", "Approved", "Cancelled"]).isRequired,
-    count: PropTypes.number.isRequired,
-    checked: PropTypes.bool.isRequired,
-    color: PropTypes.string.isRequired
-  })),
-  /** Callback function when status selection changes */
-  onStatusToggle: PropTypes.func,
-  /** Whether the cards are disabled */
-  disabled: PropTypes.bool,
-  /** Width of the entire cards container */
-  width: PropTypes.string
-};
 
 exports.AreaChart = AreaChart;
 exports.BannerEventBoxList = BannerEventBoxList;
@@ -52558,7 +52533,6 @@ exports.DownloadProgress = DownloadProgress;
 exports.DropdownNew = DropdownNew;
 exports.EventDetailsCard = EventDetailsCard;
 exports.EventList = EventList;
-exports.EventStatusCards = EventStatusCards;
 exports.Execute = Execute;
 exports.FilterPanel = FilterPanel;
 exports.FilterPop = FilterPop;
@@ -52580,6 +52554,7 @@ exports.PerformanceAnalyticsLegend = PerformanceAnalyticsLegend;
 exports.PieChart = PieChart;
 exports.PopupCharts = PopupCharts;
 exports.QuickFilter = QuickFilter;
+exports.QuickFilterCards = QuickFilterCards;
 exports.RangePicker = RangePicker;
 exports.RangePop = RangePop;
 exports.ReportTable = ReportTable;