التعاون بين أعضاء الفريق

أدِر أعضاء الفريق والأدوار والصلاحيات في تطبيقك.

ملاحظة: هذا محتوى تجريبي/مؤقت لأغراض العرض التوضيحي.

مكّن الفرق من التعاون بفعالية بفضل ميزات إدارة الفرق المدمجة.

حسابات الفرق

يدعم التطبيق حسابات فرق متعددة المستأجرين، حيث يمكن لعدة مستخدمين التعاون معًا.

إنشاء فريق

يمكن للمستخدمين إنشاء حسابات فرق جديدة:

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

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

مساحة عمل الفريق

لكل فريق مساحة عمل خاصة به ببيانات معزولة:

المشاريع والموارد
الإعدادات الخاصة بالفريق
الفوترة والاشتراك
سجلات النشاط

دعوة الأعضاء

إرسال الدعوات

ادعُ أعضاء جددًا للانضمام إلى فريقك:

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

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

مسار الدعوة

يرسل المالك الدعوة عبر البريد الإلكتروني
يتلقّى المستلم رسالة بريد إلكتروني تتضمّن رابط الدعوة
يقبل المستلم الدعوة
يحصل العضو على إمكانية الوصول إلى مساحة عمل الفريق

إدارة الدعوات

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

<PendingInvitations teamId={team.id} />

الأدوار والصلاحيات

الأدوار الافتراضية

المالك (Owner)

وصول كامل إلى الفريق وإعداداته
إدارة الفوترة والاشتراكات
دعوة الأعضاء وإزالتهم
حذف الفريق

المسؤول (Admin)

إدارة أعضاء الفريق
إدارة موارد الفريق
لا يمكنه الوصول إلى الفوترة
لا يمكنه حذف الفريق

العضو (Member)

عرض موارد الفريق
إنشاء المحتوى الخاص به وتعديله
وصول محدود إلى إعدادات الفريق

الأدوار المخصّصة

عرّف أدوارًا مخصّصة بصلاحيات محدّدة:

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

التحقق من الصلاحيات

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

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

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

إدارة الأعضاء

عرض قائمة الأعضاء

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

const members = await getTeamMembers(teamId);

تحديث دور العضو

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

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

إزالة الأعضاء

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

await removeMember(memberId);

إعدادات الفريق

تحديث معلومات الفريق

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

الصورة الرمزية للفريق

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

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

سجل النشاط

تتبّع نشاط الفريق لتعزيز الشفافية:

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

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

عرض النشاط

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

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

التبديل بين الفرق

اسمح للمستخدمين بالتبديل بين فرقهم:

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

الإشعارات

انضمام عضو جديد

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

تغيير الدور

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

أفضل الممارسات

تسلسل هرمي واضح للأدوار - عرّف أدوارًا تناسب حالة الاستخدام لديك
مبدأ الحدّ الأدنى من الصلاحيات - امنح الحدّ الأدنى من الصلاحيات المطلوبة
سجل التدقيق - سجّل إجراءات الفريق المهمة
إعداد أولي سهل - عملية دعوة بسيطة
الخدمة الذاتية - دع الأعضاء يديرون إعداداتهم بأنفسهم
فوترة شفافة - اعرض الاستخدام والتكاليف بوضوح