Colaboración en equipo

Nota: Este es contenido de ejemplo/marcador de posición con fines de demostración.

Permita que los equipos colaboren de forma eficaz con las funcionalidades integradas de gestión de equipos.

Cuentas de equipo

La aplicación admite cuentas de equipo multiinquilino en las que varios usuarios pueden colaborar.

Crear un equipo

Los usuarios pueden crear nuevas cuentas de equipo:

import { createTeamAccount } from '~/lib/teams/create-team';

const team = await createTeamAccount({
  name: 'Acme Corp',
  slug: 'acme-corp',
  ownerId: currentUser.id,
});

Espacio de trabajo del equipo

Cada equipo tiene su propio espacio de trabajo con datos aislados:

• Proyectos y recursos
• Configuración específica del equipo
• Facturación y suscripción
• Registros de actividad

Invitar a miembros

Enviar invitaciones

Invite a nuevos miembros a su equipo:

import { inviteTeamMember } from '~/lib/teams/invitations';

await inviteTeamMember({
  teamId: team.id,
  email: 'member@example.com',
  role: 'member',
});

Flujo de invitación

1. El propietario envía la invitación por correo electrónico
2. El destinatario recibe un correo electrónico con el enlace de invitación
3. El destinatario acepta la invitación
4. El miembro obtiene acceso al espacio de trabajo del equipo

Gestionar las invitaciones

import { PendingInvitations } from '~/components/teams/pending-invitations';

<PendingInvitations teamId={team.id} />

Roles y permisos

Roles predeterminados

Propietario

• Acceso completo al equipo y a la configuración
• Gestión de la facturación y las suscripciones
• Invitar y eliminar miembros
• Eliminar el equipo

Administrador

• Gestionar los miembros del equipo
• Gestionar los recursos del equipo
• No puede acceder a la facturación
• No puede eliminar el equipo

Miembro

• Ver los recursos del equipo
• Crear y editar su propio contenido
• Acceso limitado a la configuración del equipo

Roles personalizados

Defina roles personalizados con permisos específicos:

const customRole = {
  name: 'Editor',
  permissions: [
    'read:projects',
    'write:projects',
    'read:members',
  ],
};

Comprobar permisos

import { checkPermission } from '~/lib/teams/permissions';

const canEdit = await checkPermission(userId, teamId, 'write:projects');

if (!canEdit) {
  throw new Error('Insufficient permissions');
}

Gestión de miembros

Listar los miembros

import { getTeamMembers } from '~/lib/teams/members';

const members = await getTeamMembers(teamId);

Actualizar el rol de un miembro

import { updateMemberRole } from '~/lib/teams/members';

await updateMemberRole({
  memberId: member.id,
  role: 'admin',
});

Eliminar miembros

import { removeMember } from '~/lib/teams/members';

await removeMember(memberId);

Configuración del equipo

Actualizar la información del equipo

'use client';

import { useForm } from 'react-hook-form';
import { updateTeamAction } from '../_lib/server/actions';

export function TeamSettingsForm({ team }) {
  const { register, handleSubmit } = useForm({
    defaultValues: {
      name: team.name,
      description: team.description,
    },
  });

  const onSubmit = async (data) => {
    await updateTeamAction({ teamId: team.id, ...data });
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name')} placeholder="Team name" />
      <textarea {...register('description')} placeholder="Description" />
      <button type="submit">Save Changes</button>
    </form>
  );
}

Avatar del equipo

import { uploadTeamAvatar } from '~/lib/teams/avatar';

const avatarUrl = await uploadTeamAvatar({
  teamId: team.id,
  file: avatarFile,
});

Registro de actividad

Haga un seguimiento de la actividad del equipo para garantizar la transparencia:

import { logActivity } from '~/lib/teams/activity';

await logActivity({
  teamId: team.id,
  userId: user.id,
  action: 'member_invited',
  metadata: {
    invitedEmail: 'new@example.com',
  },
});

Ver la actividad

import { getTeamActivity } from '~/lib/teams/activity';

const activities = await getTeamActivity(teamId, {
  limit: 50,
  offset: 0,
});

Cambio de equipo

Permita que los usuarios cambien entre sus equipos:

'use client';

import { useTeamAccountWorkspace } from '@kit/team-accounts/hooks/use-team-account-workspace';

export function TeamSwitcher() {
  const { accounts, account } = useTeamAccountWorkspace();

  return (
    <select
      value={account.id}
      onChange={(e) => switchTeam(e.target.value)}
    >
      {accounts.map((team) => (
        <option key={team.id} value={team.id}>
          {team.name}
        </option>
      ))}
    </select>
  );
}

Notificaciones

Nuevo miembro

await createNotification({
  teamId: team.id,
  title: 'New Member',
  message: `${user.name} joined the team`,
  type: 'info',
});

Cambio de rol

await createNotification({
  userId: member.userId,
  title: 'Role Updated',
  message: `Your role was changed to ${newRole}`,
  type: 'info',
});

Buenas prácticas

1. Jerarquía de roles clara - Defina roles que tengan sentido para su caso de uso
2. Principio de mínimo privilegio - Conceda los permisos mínimos necesarios
3. Registro de auditoría - Registre las acciones importantes del equipo
4. Incorporación sencilla - Proceso de invitación simple
5. Autoservicio - Permita que los miembros gestionen su propia configuración
6. Facturación transparente - Muestre el uso y los costes con claridad