Add frontend pages imporvements

frontend/src/components/domain/team/AddTeamMemberModal.tsx

@@ -23,6 +23,7 @@ export const AddTeamMemberModal: React.FC<AddTeamMemberModalProps> = ({
 }) => {
   const [formData, setFormData] = useState({
     userId: '',
+    userEmail: '', // Add email field for manual input
     role: TENANT_ROLES.MEMBER
   });
 
@@ -33,7 +34,7 @@ export const AddTeamMemberModal: React.FC<AddTeamMemberModalProps> = ({
     // Map field positions to form data fields
     const fieldMappings = [
       // Basic Information section
-      ['userId', 'role']
+      ['userId', 'userEmail', 'role']
     ];
 
     const fieldName = fieldMappings[sectionIndex]?.[fieldIndex] as keyof typeof formData;
@@ -46,9 +47,9 @@ export const AddTeamMemberModal: React.FC<AddTeamMemberModalProps> = ({
   };
 
   const handleSave = async () => {
-    // Validation
-    if (!formData.userId) {
-      alert('Por favor selecciona un usuario');
+    // Validation - need either userId OR userEmail
+    if (!formData.userId && !formData.userEmail) {
+      alert('Por favor selecciona un usuario o ingresa un email');
       return;
     }
 
@@ -61,7 +62,7 @@ export const AddTeamMemberModal: React.FC<AddTeamMemberModalProps> = ({
     try {
       if (onAddMember) {
         await onAddMember({
-          userId: formData.userId,
+          userId: formData.userId || formData.userEmail, // Use email as userId if no userId selected
           role: formData.role
         });
       }
@@ -69,6 +70,7 @@ export const AddTeamMemberModal: React.FC<AddTeamMemberModalProps> = ({
       // Reset form
       setFormData({
         userId: '',
+        userEmail: '',
         role: TENANT_ROLES.MEMBER
       });
 
@@ -85,6 +87,7 @@ export const AddTeamMemberModal: React.FC<AddTeamMemberModalProps> = ({
     // Reset form to initial values
     setFormData({
       userId: '',
+      userEmail: '',
       role: TENANT_ROLES.MEMBER
     });
     onClose();
@@ -104,10 +107,12 @@ export const AddTeamMemberModal: React.FC<AddTeamMemberModalProps> = ({
     { label: 'Observador - Solo lectura', value: TENANT_ROLES.VIEWER }
   ];
 
-  const userOptions = availableUsers.map(user => ({
-    label: `${user.full_name} (${user.email})`,
-    value: user.id
-  }));
+  const userOptions = availableUsers.length > 0
+    ? availableUsers.map(user => ({
+        label: `${user.full_name} (${user.email})`,
+        value: user.id
+      }))
+    : [];
 
   const getRoleDescription = (role: string) => {
     switch (role) {
@@ -127,14 +132,22 @@ export const AddTeamMemberModal: React.FC<AddTeamMemberModalProps> = ({
       title: 'Información del Miembro',
       icon: Users,
       fields: [
-        {
+        ...(userOptions.length > 0 ? [{
           label: 'Usuario',
           value: formData.userId,
           type: 'select' as const,
           editable: true,
-          required: true,
+          required: !formData.userEmail, // Only required if email not provided
           options: userOptions,
           placeholder: 'Seleccionar usuario...'
+        }] : []),
+        {
+          label: userOptions.length > 0 ? 'O Email del Usuario' : 'Email del Usuario',
+          value: formData.userEmail,
+          type: 'email' as const,
+          editable: true,
+          required: !formData.userId, // Only required if user not selected
+          placeholder: 'usuario@ejemplo.com'
         },
         {
           label: 'Rol',