Team Collaboration

Updating Member Role

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

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

Removing Members

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

await removeMember(memberId);

Team Settings

Updating Team Info

'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>
  );
}

Team Avatar

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

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

Activity Log

Track team activity for transparency:

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

await logActivity({
  teamId: team.id,
  userId: user.id,
  action: 'member_invited',
  metadata: {
    invitedEmail: '[email protected]',
  },
});

Viewing Activity

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

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

Team Switching

Allow users to switch between their teams:

'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>
  );
}

Notifications

Member Joined

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

Role Changed

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

Best Practices

1. Clear role hierarchy - Define roles that make sense for your use case
2. Principle of least privilege - Give minimum required permissions
3. Audit trail - Log important team actions
4. Easy onboarding - Simple invitation process
5. Self-service - Let members manage their own settings
6. Transparent billing - Show usage and costs clearly