feat(components): introduce new UI components and enhance Vite configuration

- Added AssigneeSelector, Avatar, AvatarGroup, Button, Checkbox, CustomColordLabel, CustomNumberLabel, LabelsSelector, Progress, Tag, and Tooltip components for improved UI functionality.
- Updated Vite configuration to change the development server port to 5173 and removed unnecessary interop settings for module compatibility.
- Enhanced task management components to utilize new task structure and improve performance.

worklenz-frontend/src/components/Button.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+interface ButtonProps {
+  children?: React.ReactNode;
+  onClick?: () => void;
+  variant?: 'text' | 'default' | 'primary' | 'danger';
+  size?: 'small' | 'default' | 'large';
+  className?: string;
+  icon?: React.ReactNode;
+  isDarkMode?: boolean;
+  disabled?: boolean;
+  type?: 'button' | 'submit' | 'reset';
+}
+
+const Button: React.FC<ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>> = ({ 
+  children, 
+  onClick, 
+  variant = 'default', 
+  size = 'default', 
+  className = '', 
+  icon, 
+  isDarkMode = false, 
+  disabled = false,
+  type = 'button',
+  ...props 
+}) => {
+  const baseClasses = `inline-flex items-center justify-center font-medium transition-colors duration-200 focus:outline-none focus:ring-2 ${isDarkMode ? 'focus:ring-blue-400' : 'focus:ring-blue-500'} focus:ring-offset-1 ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`;
+  
+  const variantClasses = {
+    text: isDarkMode 
+      ? 'text-gray-400 hover:text-gray-200 hover:bg-gray-700/50'
+      : 'text-gray-600 hover:text-gray-800 hover:bg-gray-100',
+    default: isDarkMode 
+      ? 'bg-gray-800 border border-gray-600 text-gray-200 hover:bg-gray-700'
+      : 'bg-white border border-gray-300 text-gray-700 hover:bg-gray-50',
+    primary: isDarkMode
+      ? 'bg-blue-600 text-white hover:bg-blue-700'
+      : 'bg-blue-500 text-white hover:bg-blue-600',
+    danger: isDarkMode
+      ? 'bg-red-600 text-white hover:bg-red-700'
+      : 'bg-red-500 text-white hover:bg-red-600'
+  };
+  
+  const sizeClasses = {
+    small: 'px-2 py-1 text-xs rounded',
+    default: 'px-3 py-2 text-sm rounded-md',
+    large: 'px-4 py-3 text-base rounded-lg'
+  };
+  
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
+      {...props}
+    >
+      {icon && <span className={children ? "mr-1" : ""}>{icon}</span>}
+      {children}
+    </button>
+  );
+};
+
+export default Button;