Zusammenarbeit im Team

Hinweis: Dies sind Beispiel- bzw. Platzhalterinhalte zu Demonstrationszwecken.

Ermöglichen Sie Teams mit integrierten Funktionen zur Teamverwaltung eine effektive Zusammenarbeit.

Team-Konten

Die Anwendung unterstützt mandantenfähige Team-Konten, in denen mehrere Nutzer zusammenarbeiten können.

Ein Team erstellen

Nutzer können neue Team-Konten erstellen:

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

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

Team-Workspace

Jedes Team verfügt über einen eigenen Workspace mit isolierten Daten:

• Projekte und Ressourcen
• Teamspezifische Einstellungen
• Abrechnung und Abonnement
• Aktivitätsprotokolle

Mitglieder einladen

Einladungen versenden

Laden Sie neue Mitglieder in Ihr Team ein:

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

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

Ablauf der Einladung

1. Der Inhaber versendet eine Einladung per E-Mail
2. Der Empfänger erhält eine E-Mail mit einem Einladungslink
3. Der Empfänger nimmt die Einladung an
4. Das Mitglied erhält Zugriff auf den Team-Workspace

Einladungen verwalten

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

<PendingInvitations teamId={team.id} />

Rollen und Berechtigungen

Standardrollen

Inhaber

• Vollzugriff auf das Team und die Einstellungen
• Abrechnung und Abonnements verwalten
• Mitglieder einladen und entfernen
• Team löschen

Admin

• Teammitglieder verwalten
• Team-Ressourcen verwalten
• Kein Zugriff auf die Abrechnung
• Kann das Team nicht löschen

Mitglied

• Team-Ressourcen ansehen
• Eigene Inhalte erstellen und bearbeiten
• Eingeschränkter Zugriff auf die Teameinstellungen

Benutzerdefinierte Rollen

Definieren Sie benutzerdefinierte Rollen mit bestimmten Berechtigungen:

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

Berechtigungen prüfen

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

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

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

Mitgliederverwaltung

Mitglieder auflisten

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

const members = await getTeamMembers(teamId);

Rolle eines Mitglieds ändern

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

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

Mitglieder entfernen

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

await removeMember(memberId);

Teameinstellungen

Teaminformationen aktualisieren

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

Aktivitätsprotokoll

Protokollieren Sie Teamaktivitäten für mehr Transparenz:

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

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

Aktivitäten anzeigen

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

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

Teamwechsel

Ermöglichen Sie Nutzern, zwischen ihren Teams zu wechseln:

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

Benachrichtigungen

Mitglied beigetreten

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

Rolle geändert

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

Best Practices

1. Klare Rollenhierarchie – Definieren Sie Rollen, die für Ihren Anwendungsfall sinnvoll sind
2. Prinzip der minimalen Rechte – Vergeben Sie nur die mindestens erforderlichen Berechtigungen
3. Audit-Trail – Protokollieren Sie wichtige Teamaktionen
4. Einfaches Onboarding – Unkomplizierter Einladungsprozess
5. Self-Service – Lassen Sie Mitglieder ihre eigenen Einstellungen verwalten
6. Transparente Abrechnung – Zeigen Sie Nutzung und Kosten klar an