sag_components 2.0.0-beta141 → 2.0.0-beta143

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React$1, { useState, useRef, useEffect, useMemo, useCallback, forwardRef, useImperativeHandle } from 'react';
+import React$1, { useState, useRef, useEffect, useMemo, useCallback, useImperativeHandle } from 'react';
 import styled, { keyframes, css } from 'styled-components';
 import { ResponsiveContainer, PieChart as PieChart$1, Pie, Cell, Tooltip as Tooltip$3, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Bar, LabelList, ReferenceLine, LineChart, Line, AreaChart as AreaChart$1, Legend, Area, ScatterChart, ZAxis, Scatter, Brush, ComposedChart } from 'recharts';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
@@ -13070,17 +13070,17 @@ const Modal$1 = styled.div`
     margin: 0 auto;
     ${scrollableStyles$a}
 `;
-const ModalHeader$1 = styled.div`
+const ModalHeader$2 = styled.div`
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 32px;
 `;
-const ModalBody$1 = styled.div`
+const ModalBody$2 = styled.div`
     ${scrollableStyles$a}
     max-height: 80vh;
 `;
-const ModalTitle$2 = styled.h5`
+const ModalTitle$3 = styled.h5`
     font-family: 'Poppins', sans-serif;
     font-size: 32px;
     font-weight: 500;
@@ -13112,12 +13112,12 @@ const DialogOverlay$1 = props => {
   };
   return /*#__PURE__*/React.createElement(ModalWrapper$1, {
     className: className
-  }, /*#__PURE__*/React.createElement(Modal$1, null, /*#__PURE__*/React.createElement(ModalHeader$1, null, /*#__PURE__*/React.createElement(ModalTitle$2, null, title), /*#__PURE__*/React.createElement(ModalClose, {
+  }, /*#__PURE__*/React.createElement(Modal$1, null, /*#__PURE__*/React.createElement(ModalHeader$2, null, /*#__PURE__*/React.createElement(ModalTitle$3, null, title), /*#__PURE__*/React.createElement(ModalClose, {
     type: "button",
     onClick: closeModal
   }, /*#__PURE__*/React.createElement(CloseXIcon, {
     fill: "white"
-  }))), /*#__PURE__*/React.createElement(ModalBody$1, {
+  }))), /*#__PURE__*/React.createElement(ModalBody$2, {
     id: "modalBody"
   }, children)));
 };
@@ -27209,7 +27209,7 @@ const scrollableStyles$6 = `
   }
 `;
 const MainContainer$1 = styled.div``;
-const ModalOverlay$1 = styled.div`
+const ModalOverlay$2 = styled.div`
   position: fixed;
   z-index: 100;
   top: 0;
@@ -27221,7 +27221,7 @@ const ModalOverlay$1 = styled.div`
   justify-content: center;
   align-items: center;
 `;
-const ModalContent$1 = styled.div`  
+const ModalContent$2 = styled.div`  
   font-family: "Poppins", sans-serif;
   font-weight: 500;
   font-size: 18px;
@@ -27451,10 +27451,10 @@ const PopupCharts = props => {
   }, displayChart(item)));
   return /*#__PURE__*/React$1.createElement(MainContainer$1, {
     id: "MainContainer"
-  }, IsPopupChartsOpen && /*#__PURE__*/React$1.createElement(ModalOverlay$1, {
+  }, IsPopupChartsOpen && /*#__PURE__*/React$1.createElement(ModalOverlay$2, {
     id: "ModalOverlay",
     className: "modal-overlay"
-  }, /*#__PURE__*/React$1.createElement(ModalContent$1, {
+  }, /*#__PURE__*/React$1.createElement(ModalContent$2, {
     id: "ModalContent",
     ref: divRef,
     className: "modal-content",
@@ -33807,7 +33807,7 @@ const Overlay$2 = styled.div`
   align-items: center;
   z-index: 999;
 `;
-const ModalContent = styled.div`
+const ModalContent$1 = styled.div`
   position: absolute;
   width: 70%;
   height: 80%;
@@ -33833,7 +33833,7 @@ const Header$3 = styled.div`
     align-items: flex-start;
   }
 `;
-const CloseButton$1 = styled.button`
+const CloseButton$2 = styled.button`
   position: absolute;
   top: -10px;
   right: 0px;
@@ -34030,11 +34030,11 @@ const InsightsCarousel = _ref => {
   const nextIndex = (currentIndex + 1) % totalChildren;
   return /*#__PURE__*/React$1.createElement(Overlay$2, {
     className: className
-  }, /*#__PURE__*/React$1.createElement(ModalContent, null, /*#__PURE__*/React$1.createElement(Header$3, null, /*#__PURE__*/React$1.createElement(Title$8, {
+  }, /*#__PURE__*/React$1.createElement(ModalContent$1, null, /*#__PURE__*/React$1.createElement(Header$3, null, /*#__PURE__*/React$1.createElement(Title$8, {
     $titleColor: titleColor
   }, /*#__PURE__*/React$1.cloneElement(icon, {
     fill: iconColor
-  }), title), /*#__PURE__*/React$1.createElement(CloseButton$1, {
+  }), title), /*#__PURE__*/React$1.createElement(CloseButton$2, {
     onClick: () => onClose?.({
       label: "closeCarousel"
     }),
@@ -34351,7 +34351,7 @@ const Modal = styled.div`
   border-radius: 12px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 `;
-const ModalHeader = styled.div`
+const ModalHeader$1 = styled.div`
   display: flex;
   justify-content: space-between;
 `;
@@ -34359,12 +34359,12 @@ const ModalButtons = styled.div`
   display: flex;
   gap: 10px;
 `;
-const ModalTitle$1 = styled.h3`
+const ModalTitle$2 = styled.h3`
   margin: 0;
   font-size: 24px;
   font-weight: 500;
 `;
-const ModalBody = styled.div`
+const ModalBody$1 = styled.div`
   width: 100%;
   height: 100%;
 `;
@@ -34415,9 +34415,9 @@ const ModalWithOverlay = props => {
       width,
       height
     }
-  }, /*#__PURE__*/React$1.createElement(ModalHeader, {
+  }, /*#__PURE__*/React$1.createElement(ModalHeader$1, {
     className: "modal-header"
-  }, /*#__PURE__*/React$1.createElement(ModalTitle$1, null, title), /*#__PURE__*/React$1.createElement(ModalButtons, {
+  }, /*#__PURE__*/React$1.createElement(ModalTitle$2, null, title), /*#__PURE__*/React$1.createElement(ModalButtons, {
     className: "modal-buttons"
   }, showCancelButton && /*#__PURE__*/React$1.createElement(Button$1, {
     size: "medium",
@@ -34464,7 +34464,7 @@ const ModalWithOverlay = props => {
     backgroundColor: okButtonColor,
     hoverBorderColor: okButtonHoverBackgroundColor,
     hoverBackgroundColor: okButtonHoverBackgroundColor
-  })))), /*#__PURE__*/React$1.createElement(ModalBody, {
+  })))), /*#__PURE__*/React$1.createElement(ModalBody$1, {
     className: "modal-body"
   }, children)));
 };
@@ -38050,6 +38050,7 @@ const TableRow = styled.tr`
   transition: all 0.3s ease;
   font-family: "Poppins", sans-serif;
   position: relative;
+  background-color: ${props => props.isFocused ? props.selectedColor : "white"};
 
   &:hover {
     background-color: #e6f0f0;
@@ -38262,6 +38263,27 @@ const TrashIconWrapper = styled.div`
     }
   }
 `;
+const CommentIconWrapper = styled.div`
+  cursor: pointer;
+  transition: color 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  ${tooltipStyles}
+
+  /* Override tooltip position to move left */
+  &[data-tooltip]:hover::before {
+    left: calc(var(--tooltip-left, 0px) + var(--tooltip-width, 0px) / 2 - 50px);
+  }
+
+  &[data-tooltip]:hover::after {
+    left: calc(var(--tooltip-left, 0px) + var(--tooltip-width, 0px) / 2 - 50px);
+  }
+`;
 const DisabledTrashIconWrapper = styled.div`
   display: inline-flex;
   align-items: center;
@@ -38285,6 +38307,300 @@ const DisabledTrashIconWrapper = styled.div`
     color: #d9d9d9;
   }
 `;
+const StatusCell = styled.div`
+    font-size: 12px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    color: ${props => props.color || "#000"};
+`;
+const StatusCellCircle = styled.div`
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    border: 1px solid white;
+    background-color: ${props => props.backgroundColor};
+`;
+
+// CommentModal.styles.js
+const ModalOverlay$1 = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+`;
+const ModalContent = styled.div`
+  background: white;
+  border-radius: 12px;
+  width: 90%;
+  max-width: 500px;
+  max-height: 400px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  animation: slideUp 0.3s ease-out;
+
+  @keyframes slideUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px) scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+`;
+const ModalHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 24px;
+  border-bottom: 1px solid #D9D9D9;
+  flex-shrink: 0;
+`;
+const ModalTitle$1 = styled.h5`
+  font-family: "Poppins", sans-serif;
+  font-size: 18px;
+  font-weight: 600;
+  color: #212121;
+  margin: 0;
+`;
+const CloseButton$1 = styled.button`
+  background: none;
+  border: none;
+  padding: 8px;
+  cursor: pointer;
+  color: #6b7280;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background-color: #f3f4f6;
+    color: #374151;
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+`;
+const ModalBody = styled.div`
+  padding: 20px 24px 24px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`;
+const TextareaWrapper = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+const TextareaLabel = styled.label`
+  position: absolute;
+  font-size: 14px;
+  font-weight: 400;
+  top: -10px;
+  left: 25px;
+  padding: 0 4px;
+  background-color: white;
+  color: ${props => props.color};
+  transition: all 0.2s ease;
+  animation: slideInLabel 0.2s ease-out;
+
+  @keyframes slideInLabel {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
+const CommentTextarea = styled.textarea`
+  width: 100%;
+  min-height: 120px;
+  max-height: 200px;
+  padding: 12px 16px;
+  outline: none;
+  border: 1px solid ${props => props.$hasValue ? props.color : '#8B8989'};
+  border-radius: 12px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.5;
+  resize: vertical;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+  overflow-y: auto;
+  font-family: "Poppins", sans-serif;
+  resize: none;
+  
+  &:focus {
+    border: 1px solid ${props => props.color};
+  }
+  
+  &::placeholder {
+    color: #9ca3af;
+  }
+  
+  /* Custom scrollbar */
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f1f5f9;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
+  }
+`;
+const CharacterCount = styled.div`
+  margin-top: 8px;
+  font-family: "Poppins", sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  color: #6b7280;
+  text-align: right;
+  transition: color 0.2s ease;
+`;
+const ModalBottom = styled.div`
+  padding: 16px 24px;
+  border-top: 1px solid #D9D9D9;
+  display: flex;
+  gap: 16px;
+  justify-content: flex-end;
+  align-items: center;
+`;
+
+const CommentModal = props => {
+  const {
+    isOpen,
+    onClose,
+    onSave,
+    maxLength = 150,
+    color = "#066768",
+    saveButtonHoverColor = "#388586",
+    initialValue = ''
+  } = props;
+  const [commentText, setCommentText] = useState('');
+  const [isFocused, setIsFocused] = useState(false);
+  const [hasUserInteracted, setHasUserInteracted] = useState(false); // Track if user has started typing
+  const [hasInitialValue, setHasInitialValue] = useState(false); // Track if there was initial text
+
+  // Update comment text when modal opens with initial value
+  useEffect(() => {
+    if (isOpen) {
+      const initialText = initialValue || '';
+      setCommentText(initialText);
+      setHasInitialValue(Boolean(initialText.trim())); // Check if there's actual content
+      setHasUserInteracted(false); // Reset interaction state
+    }
+  }, [isOpen, initialValue]);
+  if (!isOpen) return null;
+  const handleTextChange = e => {
+    const text = e.target.value;
+    if (text.length <= maxLength) {
+      setCommentText(text);
+      if (!hasUserInteracted) {
+        setHasUserInteracted(true); // Mark that user has started interacting
+      }
+    }
+  };
+  const handleOverlayClick = e => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  const handleSave = () => {
+    if (onSave) {
+      onSave(commentText);
+    }
+    // Don't clear the text here - let the parent handle closing
+  };
+  const handleClose = () => {
+    setCommentText('');
+    setHasUserInteracted(false);
+    setHasInitialValue(false);
+    onClose();
+  };
+  const handleFocus = () => {
+    setIsFocused(true);
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+  };
+
+  // Determine if save button should be enabled
+  const isSaveEnabled = hasUserInteracted && (commentText.length > 0 || hasInitialValue);
+  return /*#__PURE__*/React$1.createElement(ModalOverlay$1, {
+    onClick: handleOverlayClick
+  }, /*#__PURE__*/React$1.createElement(ModalContent, null, /*#__PURE__*/React$1.createElement(ModalHeader, null, /*#__PURE__*/React$1.createElement(ModalTitle$1, null, "Add Comment"), /*#__PURE__*/React$1.createElement(CloseButton$1, {
+    onClick: handleClose
+  }, /*#__PURE__*/React$1.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    d: "M18 6L6 18M6 6l12 12",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })))), /*#__PURE__*/React$1.createElement(ModalBody, null, /*#__PURE__*/React$1.createElement(TextareaWrapper, null, (commentText.length > 0 || isFocused) && /*#__PURE__*/React$1.createElement(TextareaLabel, {
+    color: color
+  }, "Comment"), /*#__PURE__*/React$1.createElement(CommentTextarea, {
+    value: commentText,
+    onChange: handleTextChange,
+    placeholder: "Type a Comment...",
+    maxLength: maxLength,
+    color: color,
+    $hasValue: commentText.length > 0,
+    onBlur: handleBlur,
+    onFocus: handleFocus
+  }), /*#__PURE__*/React$1.createElement(CharacterCount, null, commentText.length, "/", maxLength))), /*#__PURE__*/React$1.createElement(ModalBottom, null, /*#__PURE__*/React$1.createElement(Button$1, {
+    text: "Cancel",
+    type: "secondary",
+    size: "medium",
+    borderColor: "#D3D3D3",
+    hoverTextColor: "#212121",
+    hoverBackgroundColor: "#E6F0F0",
+    hoverBorderColor: "#D3D3D3",
+    onClick: handleClose
+  }), /*#__PURE__*/React$1.createElement(Button$1, {
+    text: "Save",
+    size: "medium",
+    disabled: !isSaveEnabled,
+    hoverTextColor: "#ffffff",
+    disabledTextColor: "#ffffff",
+    borderColor: color,
+    backgroundColor: color,
+    hoverBorderColor: saveButtonHoverColor,
+    hoverBackgroundColor: saveButtonHoverColor,
+    onClick: handleSave
+  }))));
+};
 
 // OkIcon.jsx
 const OkIcon = _ref => {
@@ -38304,6 +38620,30 @@ const OkIcon = _ref => {
   }));
 };
 
+const CommentIcon = ({
+  width = '15',
+  height = '15',
+  showCircle = false,
+  circleColor = '#066768'
+}) => /*#__PURE__*/React$1.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: width,
+  height: height,
+  viewBox: "0 0 15 15",
+  fill: "none"
+}, showCircle ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("path", {
+  d: "M7.41699 1C7.2371 1.41164 7.1112 1.85196 7.04785 2.3125H1.75C1.5094 2.3125 1.31254 2.5094 1.3125 2.75V10.625C1.3125 10.8656 1.50937 11.0625 1.75 11.0625H4.375C5.09961 11.0625 5.6875 11.6513 5.6875 12.376V12.8135L7.66992 11.3252C7.89675 11.1558 8.17284 11.0626 8.45703 11.0625H12.25C12.4906 11.0625 12.6875 10.8656 12.6875 10.625V7.95117C13.148 7.88782 13.5884 7.76288 14 7.58301V10.625C14 11.5903 13.2152 12.376 12.25 12.376H8.45703L5.6875 14.4541L5.68164 14.459L5.54297 14.5635L5.0752 14.9131C4.94395 15.0115 4.76562 15.0279 4.61523 14.9541C4.46515 14.8803 4.37514 14.73 4.375 14.5635V12.376H1.75C0.784766 12.376 0 11.5903 0 10.625V2.75C4.08976e-05 1.78476 0.784791 1 1.75 1H7.41699Z",
+  fill: "#212121"
+}), /*#__PURE__*/React$1.createElement("circle", {
+  cx: "12",
+  cy: "3",
+  r: "3",
+  fill: circleColor
+})) : /*#__PURE__*/React$1.createElement("path", {
+  d: "M4.375 10.0629C5.09961 10.0629 5.6875 10.6509 5.6875 11.3755V11.813L7.66992 10.3254C7.89687 10.1559 8.17305 10.0629 8.45742 10.0629H12.25C12.4906 10.0629 12.6875 9.86605 12.6875 9.62541V1.75008C12.6875 1.50944 12.4906 1.31256 12.25 1.31256H1.75C1.50937 1.31256 1.3125 1.50944 1.3125 1.75008V9.62541C1.3125 9.86605 1.50937 10.0629 1.75 10.0629H4.375ZM5.6875 13.4537L5.68203 13.4592L5.54258 13.5631L5.075 13.9131C4.94375 14.0115 4.76602 14.0279 4.61562 13.9541C4.46523 13.8803 4.375 13.7299 4.375 13.5631V12.9806V12.8056V12.7974V12.688V11.3755H3.0625H1.75C0.784766 11.3755 0 10.5907 0 9.62541V1.75008C0 0.784799 0.784766 0 1.75 0H12.25C13.2152 0 14 0.784799 14 1.75008V9.62541C14 10.5907 13.2152 11.3755 12.25 11.3755H8.45742L5.6875 13.4537Z",
+  fill: "#212121"
+}));
+
 // TrashIcon.jsx
 const TrashIcon = ({
   width = "14",
@@ -38344,27 +38684,44 @@ const DisabledTrashIcon = ({
 };
 
 // TableBody.jsx
-const TableBody = /*#__PURE__*/forwardRef(({
+const TableBody = ({
   columns,
   data,
   onRowClick,
   onSendClick,
   buttonColor,
   onDeleteClick,
+  selectedColor,
   resetFocus = false,
   onFocusChange,
-  indexToShimmer = 0
-}, ref) => {
+  indexToShimmer = 0,
+  statuses = [{
+    status: 'Pending',
+    palette: ['#F5C9A7', '#8B4513']
+  }, {
+    status: 'Received',
+    palette: ['#B9D5D5', '#2F4F4F']
+  }, {
+    status: 'Approved',
+    palette: ['#BEDDC3', '#2D5016']
+  }, {
+    status: 'Cancelled',
+    palette: ['#EBA6AF', '#8B1538']
+  }],
+  onCommentSave = () => {},
+  ref = null
+}) => {
   const [hoveredRowIndex, setHoveredRowIndex] = useState(null);
   const [focusedRowIndex, setFocusedRowIndex] = useState(null);
+  const [isCommentModalOpen, setIsCommentModalOpen] = useState(false);
+  const [currentCommentRow, setCurrentCommentRow] = useState(null); // Track which row is being edited
 
-  // Expose methods to parent components via ref
-  useImperativeHandle(ref, () => ({
-    clearFocus: () => setFocusedRowIndex(null),
-    getFocusedRowIndex: () => focusedRowIndex
-  }));
+  // Expose methods to parent components via ref (if ref is provided)
+  // useImperativeHandle(ref, () => ({
+  //     clearFocus: () => setFocusedRowIndex(null),
+  //     getFocusedRowIndex: () => focusedRowIndex
+  // }), [focusedRowIndex]);
 
-  // Handle resetFocus prop
   useEffect(() => {
     if (resetFocus) {
       setFocusedRowIndex(null);
@@ -38372,11 +38729,11 @@ const TableBody = /*#__PURE__*/forwardRef(({
   }, [resetFocus]);
 
   // Notify parent of focus changes
-  useEffect(() => {
-    if (onFocusChange) {
-      onFocusChange(focusedRowIndex);
-    }
-  }, [focusedRowIndex, onFocusChange]);
+  // useEffect(() => {
+  //     if (onFocusChange) {
+  //         onFocusChange(focusedRowIndex);
+  //     }
+  // }, [focusedRowIndex, onFocusChange]);
 
   // Handle row click for focus state
   const handleRowClick = (row, rowIndex) => {
@@ -38386,6 +38743,21 @@ const TableBody = /*#__PURE__*/forwardRef(({
     }
   };
 
+  // Handle comment save
+  const handleCommentSave = commentText => {
+    if (currentCommentRow !== null) {
+      onCommentSave(currentCommentRow, commentText);
+    }
+    setCurrentCommentRow(null);
+    setIsCommentModalOpen(false);
+  };
+
+  // Handle comment modal close
+  const handleCommentModalClose = () => {
+    setCurrentCommentRow(null);
+    setIsCommentModalOpen(false);
+  };
+
   // Function to calculate tooltip height based on text length
   const calculateTooltipOffset = (text, isRegularCell = false) => {
     if (!text) return {
@@ -38521,6 +38893,57 @@ const TableBody = /*#__PURE__*/forwardRef(({
           }), /*#__PURE__*/React$1.createElement("span", null, "All Sent"));
         }
         return value;
+      case 'status':
+        const statusObj = statuses.find(status => status.status === value) || {};
+        const [palette0, palette1] = statusObj.palette;
+        return /*#__PURE__*/React$1.createElement(StatusCell, {
+          color: palette1
+        }, /*#__PURE__*/React$1.createElement(StatusCellCircle, {
+          backgroundColor: palette0
+        }), /*#__PURE__*/React$1.createElement("span", null, value));
+      case 'comments':
+        const commentText = value || '';
+        const hasComments = commentText.trim().length > 0;
+
+        // Truncate tooltip text if longer than 150 characters
+        const commentTooltipText = commentText.length > 150 ? commentText.substring(0, 147) + '...' : commentText;
+        return /*#__PURE__*/React$1.createElement(CommentIconWrapper, {
+          $buttonColor: buttonColor,
+          ref: el => {
+            if (el) {
+              if (hasComments) {
+                // Add tooltip if there are comments
+                const rect = el.getBoundingClientRect();
+                const {
+                  offset,
+                  height
+                } = calculateTooltipOffset(commentTooltipText);
+                el.style.setProperty('--tooltip-top', `${rect.top}px`);
+                el.style.setProperty('--tooltip-left', `${rect.left}px`);
+                el.style.setProperty('--tooltip-width', `${rect.width}px`);
+                el.style.setProperty('--tooltip-offset', `${offset}px`);
+                el.style.setProperty('--tooltip-height', `${height}px`);
+                el.setAttribute('data-tooltip', commentTooltipText);
+              } else {
+                // Remove tooltip if there are no comments
+                el.removeAttribute('data-tooltip');
+                el.style.removeProperty('--tooltip-top');
+                el.style.removeProperty('--tooltip-left');
+                el.style.removeProperty('--tooltip-width');
+                el.style.removeProperty('--tooltip-offset');
+                el.style.removeProperty('--tooltip-height');
+              }
+            }
+          },
+          onClick: e => {
+            e.stopPropagation();
+            setCurrentCommentRow(rowIndex);
+            setIsCommentModalOpen(true);
+          }
+        }, /*#__PURE__*/React$1.createElement(CommentIcon, {
+          showCircle: hasComments,
+          circleColor: "#066768"
+        }));
       case 'trash':
         // Only show trash icon when row is hovered
         if (hoveredRowIndex !== rowIndex) {
@@ -38584,11 +39007,12 @@ const TableBody = /*#__PURE__*/forwardRef(({
   const shouldShowTooltip = (element, content) => {
     return element && element.scrollWidth > element.clientWidth;
   };
-  return /*#__PURE__*/React$1.createElement(StyledTableBody, null, data.map((row, rowIndex) => /*#__PURE__*/React$1.createElement(TableRow, {
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(StyledTableBody, null, data.map((row, rowIndex) => /*#__PURE__*/React$1.createElement(TableRow, {
     key: rowIndex,
     "data-row-index": rowIndex,
     className: indexToShimmer === rowIndex ? 'shimmer-row' : '',
-    $isFocused: focusedRowIndex === rowIndex,
+    isFocused: focusedRowIndex === rowIndex,
+    selectedColor: selectedColor,
     onMouseEnter: () => setHoveredRowIndex(rowIndex),
     onMouseLeave: () => setHoveredRowIndex(null),
     onClick: () => handleRowClick(row, rowIndex)
@@ -38617,8 +39041,13 @@ const TableBody = /*#__PURE__*/forwardRef(({
       $minWidth: column.minWidth,
       $maxWidth: column.maxWidth
     }, formattedValue);
-  }))));
-});
+  })))), /*#__PURE__*/React$1.createElement(CommentModal, {
+    isOpen: isCommentModalOpen,
+    onClose: handleCommentModalClose,
+    onSave: handleCommentSave,
+    initialValue: currentCommentRow !== null ? data[currentCommentRow]?.Comments || '' : ''
+  }));
+};
 TableBody.propTypes = {
   columns: PropTypes.array.isRequired,
   data: PropTypes.array.isRequired,
@@ -38628,7 +39057,9 @@ TableBody.propTypes = {
   onDeleteClick: PropTypes.func,
   resetFocus: PropTypes.bool,
   onFocusChange: PropTypes.func,
-  indexToShimmer: PropTypes.number
+  indexToShimmer: PropTypes.number,
+  onCommentSave: PropTypes.func,
+  ref: PropTypes.object
 };
 TableBody.displayName = 'TableBody';
 
@@ -41799,7 +42230,7 @@ var Lottie = function Lottie(props) {
 };
 
 // Table.jsx
-const Table = /*#__PURE__*/forwardRef((props, ref) => {
+const Table = props => {
   const {
     width = '100%',
     height = 'auto',
@@ -41810,7 +42241,6 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
     onButtonClick = () => {},
     buttonColor = '#066768',
     buttonHoverColor = '#388586',
-    // Updated props for new table structure
     columns = [],
     onRowClick = () => {},
     onSort,
@@ -41820,6 +42250,7 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
     onSideButtonClick = () => {},
     sideButtonColor = '#066768',
     sideButtonHoverColor = '#388586',
+    selectedColor = '#B4D1D2',
     children = null,
     tableBodyHeight = '728px',
     isLoading = false,
@@ -41839,7 +42270,10 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
     clearFocusOnOutsideClick = true,
     // NEW: Props for edit mode focus management
     isEditMode = false,
-    editRowIndex = -1
+    editRowIndex = -1,
+    onCommentSave = () => {},
+    // Accept ref as a regular prop
+    ref = null
   } = props;
   const scrollWrapperRef = useRef(null);
   const tableBodyRef = useRef(null);
@@ -41858,11 +42292,16 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
     onTableFocusChange(focusedRowIndex);
   };
 
-  // Expose methods to parent components via ref
+  // Handle comment save - pass through to parent
+  const handleCommentSave = (rowIndex, commentText) => {
+    onCommentSave(rowIndex, commentText);
+  };
+
+  // Expose methods to parent components via ref (if ref is provided)
   useImperativeHandle(ref, () => ({
     clearTableFocus,
     getTableBodyRef: () => tableBodyRef.current
-  }));
+  }), []);
   useEffect(() => {
     const scrollWrapper = scrollWrapperRef.current;
     if (!scrollWrapper || !onLastRowsReached) return;
@@ -41940,9 +42379,11 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
     columns: columns,
     indexToShimmer: indexToShimmer,
     data: data,
+    selectedColor: selectedColor,
     onRowClick: onRowClick,
     onSendClick: onSendClick,
     onDeleteClick: onDeleteClick,
+    onCommentSave: handleCommentSave,
     buttonColor: buttonColor,
     resetFocus: resetTableFocus,
     onFocusChange: handleTableFocusChange
@@ -41964,7 +42405,7 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
     animationData: LoadingAnimation,
     loop: true
   }), /*#__PURE__*/React$1.createElement(LoadingText, null, isLoadingText)))));
-});
+};
 
 // Add displayName for better debugging
 Table.displayName = 'Table';