refactor(components): enhance component structure and add forwardRef support

- Refactored CustomAvatar, CustomColordLabel, CustomNumberLabel, and ProjectStatusIcon components to utilize React.forwardRef for improved ref handling.
- Introduced TooltipWrapper component to avoid findDOMNode warnings in React StrictMode, ensuring better compatibility with Ant Design's Tooltip.
- Updated TaskRow component to enhance layout and tooltip functionality for task display names, improving user experience and accessibility.

worklenz-frontend/src/components/common/project-status-icon/project-status-icon.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import Icon, {
   CheckCircleOutlined,
   ClockCircleOutlined,
@@ -12,10 +13,23 @@ const iconMap = {
   'check-circle': CheckCircleOutlined,
 };
 
-const ProjectStatusIcon = ({ iconName, color }: { iconName: string; color: string }) => {
-  const IconComponent = iconMap[iconName as keyof typeof iconMap];
-  if (!IconComponent) return null;
-  return <IconComponent style={{ color: color }} />;
-};
+interface ProjectStatusIconProps {
+  iconName: string;
+  color: string;
+}
+
+const ProjectStatusIcon = React.forwardRef<HTMLSpanElement, ProjectStatusIconProps>(
+  ({ iconName, color }, ref) => {
+    const IconComponent = iconMap[iconName as keyof typeof iconMap];
+    if (!IconComponent) return null;
+    return (
+      <span ref={ref} style={{ display: 'inline-block' }}>
+        <IconComponent style={{ color: color }} />
+      </span>
+    );
+  }
+);
+
+ProjectStatusIcon.displayName = 'ProjectStatusIcon';
 
 export default ProjectStatusIcon;

worklenz-frontend/src/components/common/tooltip-wrapper/tooltip-wrapper.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Tooltip, TooltipProps } from 'antd';
+
+interface TooltipWrapperProps extends Omit<TooltipProps, 'children'> {
+  children: React.ReactElement;
+}
+
+/**
+ * TooltipWrapper - A wrapper component that helps avoid findDOMNode warnings in React StrictMode
+ * 
+ * This component ensures that the child element can properly receive refs from Ant Design's Tooltip
+ * by wrapping it in a div with a ref when necessary.
+ */
+const TooltipWrapper = React.forwardRef<HTMLDivElement, TooltipWrapperProps>(
+  ({ children, ...tooltipProps }, ref) => {
+    return (
+      <Tooltip {...tooltipProps}>
+        <div ref={ref} style={{ display: 'inline-block' }}>
+          {children}
+        </div>
+      </Tooltip>
+    );
+  }
+);
+
+TooltipWrapper.displayName = 'TooltipWrapper';
+
+export default TooltipWrapper;