@visns-studio/visns-components 5.9.4 → 5.9.6

package/src/components/crm/Form.jsx

@@ -653,22 +653,14 @@ function Form({
                 // especially when grouping is active
                 if (dataRef.current && Array.isArray(dataRef.current)) {
                     dataRef.current.forEach((obj) => {
-                        if (
-                            obj &&
-                            obj.id !== undefined &&
-                            obj.id !== null
-                        ) {
+                        if (obj && obj.id !== undefined && obj.id !== null) {
                             s[obj.id] = obj;
                         }
                     });
                 } else if (param.data && Array.isArray(param.data)) {
                     // Fallback to param.data if dataRef.current is not available
                     param.data.forEach((obj) => {
-                        if (
-                            obj &&
-                            obj.id !== undefined &&
-                            obj.id !== null
-                        ) {
+                        if (obj && obj.id !== undefined && obj.id !== null) {
                             s[obj.id] = obj;
                         }
                     });
@@ -1130,10 +1122,19 @@ function Form({
                                         navigate(saveExit.redirectUrl);
                                     }
                                 }
+
+                                toast.success(
+                                    formSettings?.save?.toast?.success ||
+                                        (method === 'POST'
+                                            ? 'Entry successfully saved into the system.'
+                                            : 'Entry successfully updated.')
+                                );
                             } else {
                                 toast.success(
                                     formSettings?.save?.toast?.success ||
-                                        'Entry successfully saved into the system.'
+                                        (method === 'POST'
+                                            ? 'Entry successfully saved into the system.'
+                                            : 'Entry successfully updated.')
                                 );
                             }
 
@@ -1151,8 +1152,10 @@ function Form({
                                 formSettings?.save?.return?.type === 'table' &&
                                 formSettings?.save?.return?.param
                             ) {
-                                if ( formSettings.save.return.props ) {
-                                    setTableProps(formSettings.save.return.props);
+                                if (formSettings.save.return.props) {
+                                    setTableProps(
+                                        formSettings.save.return.props
+                                    );
                                 }
 
                                 if (
@@ -1719,48 +1722,20 @@ function Form({
                                 selected={selected}
                                 onSelectionChange={handleSelectionChange}
                                 {...(tableProps && tableProps.groupBy
-                                ? {
-                                      defaultGroupBy: tableProps.groupBy,
-                                      defaultCollapsed: true,
-                                      collapsedGroups: collapsedGroups,
-                                      onGroupToggle: (groupData) => {
-                                          // Handle group expand/collapse events
-                                          // Update collapsed groups state
-                                          const groupValue =
-                                              typeof groupData === 'string'
-                                                  ? groupData
-                                                  : groupData?.value ||
-                                                    groupData?.name ||
-                                                    '';
-
-                                          setCollapsedGroups((prev) => {
-                                              const newState = { ...prev };
-                                              if (newState[groupValue]) {
-                                                  delete newState[groupValue];
-                                              } else {
-                                                  newState[groupValue] = true;
-                                              }
-                                              console.log(
-                                                  'Updated collapsed groups:',
-                                                  newState
-                                              );
-                                              return newState;
-                                          });
-                                      },
-                                      renderGroupTitle: (groupData) => {
-                                          const groupValue =
-                                              typeof groupData === 'string'
-                                                  ? groupData
-                                                  : groupData?.value ||
-                                                    groupData?.name ||
-                                                    '';
-
-                                          // Use ReactDataGrid's built-in toggle functionality
-                                          const collapsed =
-                                              collapsedGroups[groupValue] ||
-                                              false;
-                                          const toggleGroup = () => {
-                                              // Update the collapsed state
+                                    ? {
+                                          defaultGroupBy: tableProps.groupBy,
+                                          defaultCollapsed: true,
+                                          collapsedGroups: collapsedGroups,
+                                          onGroupToggle: (groupData) => {
+                                              // Handle group expand/collapse events
+                                              // Update collapsed groups state
+                                              const groupValue =
+                                                  typeof groupData === 'string'
+                                                      ? groupData
+                                                      : groupData?.value ||
+                                                        groupData?.name ||
+                                                        '';
+
                                               setCollapsedGroups((prev) => {
                                                   const newState = { ...prev };
                                                   if (newState[groupValue]) {
@@ -1772,339 +1747,400 @@ function Form({
                                                           groupValue
                                                       ] = true;
                                                   }
-                                                  return newState;
-                                              });
-                                          };
-                                          const groupCount =
-                                              typeof groupData === 'object'
-                                                  ? groupData?.count || 0
-                                                  : 0;
-                                          const hasCheckboxColumn =
-                                              tableData.columns.some(
-                                                  (col) =>
-                                                      col.id ===
-                                                      '__checkbox-column'
-                                              );
-
-                                          // Handle group header click for selection
-                                          const handleGroupHeaderClick = (
-                                              e
-                                          ) => {
-                                              // Prevent rapid clicks
-                                              if (
-                                                  groupClickTimeoutRef.current
-                                              ) {
                                                   console.log(
-                                                      '🖱️ Ignoring rapid click'
+                                                      'Updated collapsed groups:',
+                                                      newState
                                                   );
-                                                  return;
-                                              }
-
-                                              // Don't trigger if clicking on the expand button or checkbox
-                                              if (
-                                                  e.target.closest(
-                                                      '.group-expand-btn'
-                                                  ) ||
-                                                  e.target.closest(
-                                                      'input[type="checkbox"]'
-                                                  )
-                                              ) {
-                                                  console.log(
-                                                      '🖱️ Ignoring click on expand button or checkbox'
+                                                  return newState;
+                                              });
+                                          },
+                                          renderGroupTitle: (groupData) => {
+                                              const groupValue =
+                                                  typeof groupData === 'string'
+                                                      ? groupData
+                                                      : groupData?.value ||
+                                                        groupData?.name ||
+                                                        '';
+
+                                              // Use ReactDataGrid's built-in toggle functionality
+                                              const collapsed =
+                                                  collapsedGroups[groupValue] ||
+                                                  false;
+                                              const toggleGroup = () => {
+                                                  // Update the collapsed state
+                                                  setCollapsedGroups((prev) => {
+                                                      const newState = {
+                                                          ...prev,
+                                                      };
+                                                      if (
+                                                          newState[groupValue]
+                                                      ) {
+                                                          delete newState[
+                                                              groupValue
+                                                          ];
+                                                      } else {
+                                                          newState[
+                                                              groupValue
+                                                          ] = true;
+                                                      }
+                                                      return newState;
+                                                  });
+                                              };
+                                              const groupCount =
+                                                  typeof groupData === 'object'
+                                                      ? groupData?.count || 0
+                                                      : 0;
+                                              const hasCheckboxColumn =
+                                                  tableData.columns.some(
+                                                      (col) =>
+                                                          col.id ===
+                                                          '__checkbox-column'
                                                   );
-                                                  return;
-                                              }
-
-                                              // Set timeout to prevent rapid clicks
-                                              groupClickTimeoutRef.current =
-                                                  setTimeout(() => {
-                                                      groupClickTimeoutRef.current =
-                                                          null;
-                                                  }, 300);
-
-                                              // Toggle selection of all items in this group
-                                              const isCurrentlySelected =
-                                                  isGroupSelected(groupValue);
-
-                                              handleGroupSelectionChange(
-                                                  groupValue,
-                                                  !isCurrentlySelected
-                                              );
-                                          };
 
-                                          return (
-                                              <div
-                                                  className="group-header-clean group-header-fixed-height"
-                                                  onClick={
-                                                      handleGroupHeaderClick
+                                              // Handle group header click for selection
+                                              const handleGroupHeaderClick = (
+                                                  e
+                                              ) => {
+                                                  // Prevent rapid clicks
+                                                  if (
+                                                      groupClickTimeoutRef.current
+                                                  ) {
+                                                      console.log(
+                                                          '🖱️ Ignoring rapid click'
+                                                      );
+                                                      return;
+                                                  }
+
+                                                  // Don't trigger if clicking on the expand button or checkbox
+                                                  if (
+                                                      e.target.closest(
+                                                          '.group-expand-btn'
+                                                      ) ||
+                                                      e.target.closest(
+                                                          'input[type="checkbox"]'
+                                                      )
+                                                  ) {
+                                                      console.log(
+                                                          '🖱️ Ignoring click on expand button or checkbox'
+                                                      );
+                                                      return;
                                                   }
-                                                  style={{
-                                                      display: 'flex',
-                                                      alignItems: 'center',
-                                                      justifyContent:
-                                                          'space-between',
-                                                      width: '100%',
-                                                      height: '34px', // Compact height
-                                                      padding: '6px 12px', // Reduced padding for compact design
-                                                      background:
-                                                          'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)',
-                                                      borderLeft:
-                                                          '4px solid var(--primary-color, #3b82f6)',
-                                                      position: 'relative',
-                                                      overflow: 'hidden',
-                                                      boxShadow:
-                                                          '0 1px 3px rgba(0,0,0,0.1)',
-                                                      borderRadius:
-                                                          '0 4px 4px 0',
-                                                      cursor: 'pointer',
-                                                      boxSizing: 'border-box',
-                                                      lineHeight: '1.1', // Compact line height
-                                                      flexShrink: 0,
-                                                      transition:
-                                                          'background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease',
-                                                  }}
-                                                  onMouseEnter={(e) => {
-                                                      e.currentTarget.style.background =
-                                                          'linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%)';
-                                                      e.currentTarget.style.boxShadow =
-                                                          '0 2px 8px rgba(0,0,0,0.15)';
-                                                      e.currentTarget.style.transform =
-                                                          'translateY(-1px)';
-                                                  }}
-                                                  onMouseLeave={(e) => {
-                                                      e.currentTarget.style.background =
-                                                          'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)';
-                                                      e.currentTarget.style.boxShadow =
-                                                          '0 1px 3px rgba(0,0,0,0.1)';
-                                                      e.currentTarget.style.transform =
-                                                          'translateY(0)';
-                                                  }}
-                                              >
-                                                  {/* Left side - Group info and expand/collapse */}
+
+                                                  // Set timeout to prevent rapid clicks
+                                                  groupClickTimeoutRef.current =
+                                                      setTimeout(() => {
+                                                          groupClickTimeoutRef.current =
+                                                              null;
+                                                      }, 300);
+
+                                                  // Toggle selection of all items in this group
+                                                  const isCurrentlySelected =
+                                                      isGroupSelected(
+                                                          groupValue
+                                                      );
+
+                                                  handleGroupSelectionChange(
+                                                      groupValue,
+                                                      !isCurrentlySelected
+                                                  );
+                                              };
+
+                                              return (
                                                   <div
+                                                      className="group-header-clean group-header-fixed-height"
+                                                      onClick={
+                                                          handleGroupHeaderClick
+                                                      }
                                                       style={{
                                                           display: 'flex',
                                                           alignItems: 'center',
-                                                          flex: 1,
-                                                          zIndex: 2,
+                                                          justifyContent:
+                                                              'space-between',
+                                                          width: '100%',
+                                                          height: '34px', // Compact height
+                                                          padding: '6px 12px', // Reduced padding for compact design
+                                                          background:
+                                                              'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)',
+                                                          borderLeft:
+                                                              '4px solid var(--primary-color, #3b82f6)',
                                                           position: 'relative',
+                                                          overflow: 'hidden',
+                                                          boxShadow:
+                                                              '0 1px 3px rgba(0,0,0,0.1)',
+                                                          borderRadius:
+                                                              '0 4px 4px 0',
+                                                          cursor: 'pointer',
+                                                          boxSizing:
+                                                              'border-box',
+                                                          lineHeight: '1.1', // Compact line height
+                                                          flexShrink: 0,
+                                                          transition:
+                                                              'background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease',
+                                                      }}
+                                                      onMouseEnter={(e) => {
+                                                          e.currentTarget.style.background =
+                                                              'linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%)';
+                                                          e.currentTarget.style.boxShadow =
+                                                              '0 2px 8px rgba(0,0,0,0.15)';
+                                                          e.currentTarget.style.transform =
+                                                              'translateY(-1px)';
+                                                      }}
+                                                      onMouseLeave={(e) => {
+                                                          e.currentTarget.style.background =
+                                                              'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)';
+                                                          e.currentTarget.style.boxShadow =
+                                                              '0 1px 3px rgba(0,0,0,0.1)';
+                                                          e.currentTarget.style.transform =
+                                                              'translateY(0)';
                                                       }}
                                                   >
-                                                      <button
-                                                          className="group-expand-btn"
-                                                          onClick={(e) => {
-                                                              e.preventDefault();
-                                                              e.stopPropagation();
-                                                              if (
-                                                                  typeof toggleGroup ===
-                                                                  'function'
-                                                              ) {
-                                                                  toggleGroup();
-                                                              } else {
-                                                                  console.warn(
-                                                                      'toggleGroup is not a function:',
-                                                                      toggleGroup
-                                                                  );
-                                                              }
-                                                          }}
-                                                          style={{
-                                                              background:
-                                                                  'var(--primary-color, #3b82f6)',
-                                                              border: 'none',
-                                                              borderRadius:
-                                                                  '3px',
-                                                              color: 'white',
-                                                              width: '20px', // More compact
-                                                              height: '20px', // More compact
-                                                              display: 'flex',
-                                                              alignItems:
-                                                                  'center',
-                                                              justifyContent:
-                                                                  'center',
-                                                              marginRight:
-                                                                  '8px', // Reduced margin
-                                                              cursor: 'pointer',
-                                                              fontSize: '11px', // Smaller font
-                                                              fontWeight:
-                                                                  'bold',
-                                                              boxShadow:
-                                                                  '0 1px 2px rgba(0,0,0,0.1)',
-                                                              transition:
-                                                                  'all 0.15s ease',
-                                                          }}
-                                                          onMouseEnter={(e) => {
-                                                              e.target.style.transform =
-                                                                  'scale(1.05)';
-                                                              e.target.style.background =
-                                                                  'var(--secondary-color, #2563eb)';
-                                                          }}
-                                                          onMouseLeave={(e) => {
-                                                              e.target.style.transform =
-                                                                  'scale(1)';
-                                                              e.target.style.background =
-                                                                  'var(--primary-color, #3b82f6)';
-                                                          }}
-                                                      >
-                                                          {collapsed
-                                                              ? '+'
-                                                              : '−'}
-                                                      </button>
+                                                      {/* Left side - Group info and expand/collapse */}
                                                       <div
                                                           style={{
                                                               display: 'flex',
                                                               alignItems:
-                                                                  'center', // Changed to center for compact layout
-                                                              gap: '8px', // Add gap between elements
+                                                                  'center',
+                                                              flex: 1,
+                                                              zIndex: 2,
+                                                              position:
+                                                                  'relative',
                                                           }}
                                                       >
-                                                          <strong
+                                                          <button
+                                                              className="group-expand-btn"
+                                                              onClick={(e) => {
+                                                                  e.preventDefault();
+                                                                  e.stopPropagation();
+                                                                  if (
+                                                                      typeof toggleGroup ===
+                                                                      'function'
+                                                                  ) {
+                                                                      toggleGroup();
+                                                                  } else {
+                                                                      console.warn(
+                                                                          'toggleGroup is not a function:',
+                                                                          toggleGroup
+                                                                      );
+                                                                  }
+                                                              }}
                                                               style={{
+                                                                  background:
+                                                                      'var(--primary-color, #3b82f6)',
+                                                                  border: 'none',
+                                                                  borderRadius:
+                                                                      '3px',
+                                                                  color: 'white',
+                                                                  width: '20px', // More compact
+                                                                  height: '20px', // More compact
+                                                                  display:
+                                                                      'flex',
+                                                                  alignItems:
+                                                                      'center',
+                                                                  justifyContent:
+                                                                      'center',
+                                                                  marginRight:
+                                                                      '8px', // Reduced margin
+                                                                  cursor: 'pointer',
                                                                   fontSize:
-                                                                      '0.85rem', // Slightly smaller for compact design
-                                                                  color: 'var(--secondary-color, #1f2937)',
+                                                                      '11px', // Smaller font
                                                                   fontWeight:
-                                                                      '600',
-                                                                  textTransform:
-                                                                      'uppercase',
-                                                                  letterSpacing:
-                                                                      '0.025em',
+                                                                      'bold',
+                                                                  boxShadow:
+                                                                      '0 1px 2px rgba(0,0,0,0.1)',
+                                                                  transition:
+                                                                      'all 0.15s ease',
+                                                              }}
+                                                              onMouseEnter={(
+                                                                  e
+                                                              ) => {
+                                                                  e.target.style.transform =
+                                                                      'scale(1.05)';
+                                                                  e.target.style.background =
+                                                                      'var(--secondary-color, #2563eb)';
+                                                              }}
+                                                              onMouseLeave={(
+                                                                  e
+                                                              ) => {
+                                                                  e.target.style.transform =
+                                                                      'scale(1)';
+                                                                  e.target.style.background =
+                                                                      'var(--primary-color, #3b82f6)';
                                                               }}
                                                           >
-                                                              {groupValue}
-                                                          </strong>
-                                                          {groupCount > 0 && (
-                                                              <span
+                                                              {collapsed
+                                                                  ? '+'
+                                                                  : '−'}
+                                                          </button>
+                                                          <div
+                                                              style={{
+                                                                  display:
+                                                                      'flex',
+                                                                  alignItems:
+                                                                      'center', // Changed to center for compact layout
+                                                                  gap: '8px', // Add gap between elements
+                                                              }}
+                                                          >
+                                                              <strong
                                                                   style={{
-                                                                      color: '#6b7280',
                                                                       fontSize:
-                                                                          '0.75rem', // Smaller for compact design
+                                                                          '0.85rem', // Slightly smaller for compact design
+                                                                      color: 'var(--secondary-color, #1f2937)',
                                                                       fontWeight:
-                                                                          '500',
+                                                                          '600',
+                                                                      textTransform:
+                                                                          'uppercase',
+                                                                      letterSpacing:
+                                                                          '0.025em',
+                                                                  }}
+                                                              >
+                                                                  {groupValue}
+                                                              </strong>
+                                                              {groupCount >
+                                                                  0 && (
+                                                                  <span
+                                                                      style={{
+                                                                          color: '#6b7280',
+                                                                          fontSize:
+                                                                              '0.75rem', // Smaller for compact design
+                                                                          fontWeight:
+                                                                              '500',
+                                                                      }}
+                                                                  >
+                                                                      (
+                                                                      {
+                                                                          groupCount
+                                                                      }{' '}
+                                                                      {groupCount ===
+                                                                      1
+                                                                          ? 'item'
+                                                                          : 'items'}
+                                                                      )
+                                                                  </span>
+                                                              )}
+                                                              {/* Click indicator */}
+                                                              <span
+                                                                  style={{
+                                                                      color: '#9ca3af',
+                                                                      fontSize:
+                                                                          '0.7rem',
+                                                                      fontStyle:
+                                                                          'italic',
+                                                                      opacity: 0.8,
+                                                                      marginLeft:
+                                                                          'auto',
+                                                                      userSelect:
+                                                                          'none',
                                                                   }}
                                                               >
-                                                                  ({groupCount}{' '}
-                                                                  {groupCount ===
-                                                                  1
-                                                                      ? 'item'
-                                                                      : 'items'}
-                                                                  )
+                                                                  Click to
+                                                                  select/unselect
+                                                                  all
                                                               </span>
-                                                          )}
-                                                          {/* Click indicator */}
-                                                          <span
+                                                          </div>
+                                                      </div>
+
+                                                      {/* Right side - Group selection */}
+                                                      {hasCheckboxColumn && (
+                                                          <div
                                                               style={{
-                                                                  color: '#9ca3af',
+                                                                  display:
+                                                                      'flex',
+                                                                  alignItems:
+                                                                      'center',
+                                                                  gap: '4px', // Reduced gap for compact design
                                                                   fontSize:
-                                                                      '0.7rem',
-                                                                  fontStyle:
-                                                                      'italic',
-                                                                  opacity: 0.8,
-                                                                  marginLeft:
-                                                                      'auto',
-                                                                  userSelect:
-                                                                      'none',
+                                                                      '0.75rem', // Smaller font for compact design
+                                                                  background:
+                                                                      'rgba(255, 255, 255, 0.9)',
+                                                                  padding:
+                                                                      '3px 8px', // Reduced padding for compact design
+                                                                  borderRadius:
+                                                                      '12px', // Smaller border radius
+                                                                  border: '1px solid rgba(59, 130, 246, 0.3)',
+                                                                  zIndex: 2,
+                                                                  position:
+                                                                      'relative',
+                                                                  boxShadow:
+                                                                      '0 1px 2px rgba(0,0,0,0.05)',
                                                               }}
                                                           >
-                                                              Click to
-                                                              select/unselect
-                                                              all
-                                                          </span>
-                                                      </div>
-                                                  </div>
+                                                              <input
+                                                                  type="checkbox"
+                                                                  onChange={(
+                                                                      e
+                                                                  ) => {
+                                                                      e.stopPropagation();
+                                                                      handleGroupSelectionChange(
+                                                                          groupValue,
+                                                                          e
+                                                                              .target
+                                                                              .checked
+                                                                      );
+                                                                  }}
+                                                                  checked={isGroupSelected(
+                                                                      groupValue
+                                                                  )}
+                                                                  style={{
+                                                                      width: '14px', // Smaller checkbox for compact design
+                                                                      height: '14px',
+                                                                      cursor: 'pointer',
+                                                                      accentColor:
+                                                                          'var(--primary-color, #3b82f6)',
+                                                                  }}
+                                                              />
+                                                              <span
+                                                                  style={{
+                                                                      cursor: 'pointer',
+                                                                      userSelect:
+                                                                          'none',
+                                                                      color: 'var(--secondary-color, #1f2937)',
+                                                                      fontWeight:
+                                                                          '500',
+                                                                      fontSize:
+                                                                          '0.7rem', // Smaller font for compact design
+                                                                  }}
+                                                                  onClick={(
+                                                                      e
+                                                                  ) => {
+                                                                      e.stopPropagation();
+                                                                      const checkbox =
+                                                                          e
+                                                                              .target
+                                                                              .previousElementSibling;
+                                                                      checkbox.checked =
+                                                                          !checkbox.checked;
+                                                                      handleGroupSelectionChange(
+                                                                          groupValue,
+                                                                          checkbox.checked
+                                                                      );
+                                                                  }}
+                                                              >
+                                                                  Select All
+                                                              </span>
+                                                          </div>
+                                                      )}
 
-                                                  {/* Right side - Group selection */}
-                                                  {hasCheckboxColumn && (
+                                                      {/* Background pattern */}
                                                       <div
                                                           style={{
-                                                              display: 'flex',
-                                                              alignItems:
-                                                                  'center',
-                                                              gap: '4px', // Reduced gap for compact design
-                                                              fontSize:
-                                                                  '0.75rem', // Smaller font for compact design
-                                                              background:
-                                                                  'rgba(255, 255, 255, 0.9)',
-                                                              padding:
-                                                                  '3px 8px', // Reduced padding for compact design
-                                                              borderRadius:
-                                                                  '12px', // Smaller border radius
-                                                              border: '1px solid rgba(59, 130, 246, 0.3)',
-                                                              zIndex: 2,
                                                               position:
-                                                                  'relative',
-                                                              boxShadow:
-                                                                  '0 1px 2px rgba(0,0,0,0.05)',
+                                                                  'absolute',
+                                                              top: 0,
+                                                              left: 0,
+                                                              right: 0,
+                                                              bottom: 0,
+                                                              background:
+                                                                  'repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(59, 130, 246, 0.03) 2px, rgba(59, 130, 246, 0.03) 4px)',
+                                                              zIndex: 1,
+                                                              pointerEvents:
+                                                                  'none',
                                                           }}
-                                                      >
-                                                          <input
-                                                              type="checkbox"
-                                                              onChange={(e) => {
-                                                                  e.stopPropagation();
-                                                                  handleGroupSelectionChange(
-                                                                      groupValue,
-                                                                      e.target
-                                                                          .checked
-                                                                  );
-                                                              }}
-                                                              checked={isGroupSelected(
-                                                                  groupValue
-                                                              )}
-                                                              style={{
-                                                                  width: '14px', // Smaller checkbox for compact design
-                                                                  height: '14px',
-                                                                  cursor: 'pointer',
-                                                                  accentColor:
-                                                                      'var(--primary-color, #3b82f6)',
-                                                              }}
-                                                          />
-                                                          <span
-                                                              style={{
-                                                                  cursor: 'pointer',
-                                                                  userSelect:
-                                                                      'none',
-                                                                  color: 'var(--secondary-color, #1f2937)',
-                                                                  fontWeight:
-                                                                      '500',
-                                                                  fontSize:
-                                                                      '0.7rem', // Smaller font for compact design
-                                                              }}
-                                                              onClick={(e) => {
-                                                                  e.stopPropagation();
-                                                                  const checkbox =
-                                                                      e.target
-                                                                          .previousElementSibling;
-                                                                  checkbox.checked =
-                                                                      !checkbox.checked;
-                                                                  handleGroupSelectionChange(
-                                                                      groupValue,
-                                                                      checkbox.checked
-                                                                  );
-                                                              }}
-                                                          >
-                                                              Select All
-                                                          </span>
-                                                      </div>
-                                                  )}
-
-                                                  {/* Background pattern */}
-                                                  <div
-                                                      style={{
-                                                          position: 'absolute',
-                                                          top: 0,
-                                                          left: 0,
-                                                          right: 0,
-                                                          bottom: 0,
-                                                          background:
-                                                              'repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(59, 130, 246, 0.03) 2px, rgba(59, 130, 246, 0.03) 4px)',
-                                                          zIndex: 1,
-                                                          pointerEvents: 'none',
-                                                      }}
-                                                  />
-                                              </div>
-                                          );
-                                      },
-                                  }
-                                : {})}
+                                                      />
+                                                  </div>
+                                              );
+                                          },
+                                      }
+                                    : {})}
                             />
                         </div>
                     )}