feat: introduce Teams & OKRs feature with models, types, and UI components for team management and objective tracking

src/components/teams/AddMemberModal.tsx

@@ -0,0 +1,160 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Modal, ModalFooter } from '@/components/ui';
+import { Button } from '@/components/ui';
+import { Input } from '@/components/ui';
+import { Select } from '@/components/ui';
+import type { TeamRole } from '@/lib/types';
+import { TEAM_ROLE_LABELS } from '@/lib/types';
+
+interface User {
+  id: string;
+  email: string;
+  name: string | null;
+}
+
+interface AddMemberModalProps {
+  teamId: string;
+  existingMemberIds: string[];
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+export function AddMemberModal({ teamId, existingMemberIds, onClose, onSuccess }: AddMemberModalProps) {
+  const [users, setUsers] = useState<User[]>([]);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
+  const [role, setRole] = useState<TeamRole>('MEMBER');
+  const [loading, setLoading] = useState(false);
+  const [fetchingUsers, setFetchingUsers] = useState(false);
+
+  useEffect(() => {
+    // Fetch all users
+    setFetchingUsers(true);
+    fetch('/api/users')
+      .then((res) => res.json())
+      .then((data) => {
+        // Filter out existing members
+        const availableUsers = data.filter((user: User) => !existingMemberIds.includes(user.id));
+        setUsers(availableUsers);
+      })
+      .catch((error) => {
+        console.error('Error fetching users:', error);
+      })
+      .finally(() => {
+        setFetchingUsers(false);
+      });
+  }, [existingMemberIds]);
+
+  const filteredUsers = users.filter(
+    (user) =>
+      user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      user.name?.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!selectedUserId) {
+      alert('Veuillez sélectionner un utilisateur');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const response = await fetch(`/api/teams/${teamId}/members`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ userId: selectedUserId, role }),
+      });
+
+      if (!response.ok) {
+        const error = await response.json();
+        alert(error.error || 'Erreur lors de l\'ajout du membre');
+        return;
+      }
+
+      onSuccess();
+      onClose();
+    } catch (error) {
+      console.error('Error adding member:', error);
+      alert('Erreur lors de l\'ajout du membre');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Modal isOpen={true} onClose={onClose} title="Ajouter un membre" size="md">
+      <form onSubmit={handleSubmit}>
+        <div className="space-y-4">
+          {/* User Search */}
+          <div>
+            <label className="block text-sm font-medium text-foreground mb-2">
+              Rechercher un utilisateur
+            </label>
+            <Input
+              type="text"
+              placeholder="Email ou nom..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              disabled={fetchingUsers}
+            />
+          </div>
+
+          {/* User List */}
+          {fetchingUsers ? (
+            <div className="text-center py-4 text-muted">Chargement...</div>
+          ) : filteredUsers.length === 0 ? (
+            <div className="text-center py-4 text-muted">
+              {searchTerm ? 'Aucun utilisateur trouvé' : 'Aucun utilisateur disponible'}
+            </div>
+          ) : (
+            <div className="max-h-60 overflow-y-auto border border-border rounded-lg">
+              {filteredUsers.map((user) => (
+                <button
+                  key={user.id}
+                  type="button"
+                  onClick={() => setSelectedUserId(user.id)}
+                  className={`
+                    w-full text-left px-4 py-3 hover:bg-card-hover transition-colors
+                    ${selectedUserId === user.id ? 'bg-primary/10 border-l-2 border-primary' : ''}
+                  `}
+                >
+                  <div className="font-medium text-foreground">{user.name || 'Sans nom'}</div>
+                  <div className="text-sm text-muted">{user.email}</div>
+                </button>
+              ))}
+            </div>
+          )}
+
+          {/* Role Selection */}
+          <Select
+            label="Rôle"
+            value={role}
+            onChange={(e) => setRole(e.target.value as TeamRole)}
+            options={[
+              { value: 'MEMBER', label: TEAM_ROLE_LABELS.MEMBER },
+              { value: 'ADMIN', label: TEAM_ROLE_LABELS.ADMIN },
+            ]}
+          />
+        </div>
+
+        <ModalFooter>
+          <Button type="button" variant="outline" onClick={onClose}>
+            Annuler
+          </Button>
+          <Button
+            type="submit"
+            disabled={!selectedUserId || loading}
+            className="bg-[var(--purple)] text-white hover:opacity-90 border-transparent"
+          >
+            {loading ? 'Ajout...' : 'Ajouter'}
+          </Button>
+        </ModalFooter>
+      </form>
+    </Modal>
+  );
+}
+

src/components/teams/DeleteTeamButton.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import { useRouter } from 'next/navigation';
+import { Button } from '@/components/ui';
+import { Modal, ModalFooter } from '@/components/ui';
+
+interface DeleteTeamButtonProps {
+  teamId: string;
+  teamName: string;
+}
+
+export function DeleteTeamButton({ teamId, teamName }: DeleteTeamButtonProps) {
+  const router = useRouter();
+  const [showModal, setShowModal] = useState(false);
+  const [isPending, startTransition] = useTransition();
+
+  const handleDelete = () => {
+    startTransition(async () => {
+      try {
+        const response = await fetch(`/api/teams/${teamId}`, {
+          method: 'DELETE',
+        });
+
+        if (!response.ok) {
+          const error = await response.json();
+          alert(error.error || 'Erreur lors de la suppression de l\'équipe');
+          return;
+        }
+
+        router.push('/teams');
+        router.refresh();
+      } catch (error) {
+        console.error('Error deleting team:', error);
+        alert('Erreur lors de la suppression de l\'équipe');
+      }
+    });
+  };
+
+  return (
+    <>
+      <Button
+        onClick={() => setShowModal(true)}
+        variant="outline"
+        className="text-destructive border-destructive hover:bg-destructive/10"
+      >
+        Supprimer l'équipe
+      </Button>
+
+      <Modal isOpen={showModal} onClose={() => setShowModal(false)} title="Supprimer l'équipe" size="sm">
+        <div className="space-y-4">
+          <p className="text-muted">
+            Êtes-vous sûr de vouloir supprimer l&apos;équipe{' '}
+            <strong className="text-foreground">&quot;{teamName}&quot;</strong> ?
+          </p>
+          <p className="text-sm text-destructive">
+            Cette action est irréversible. Tous les membres, OKRs et données associées seront supprimés.
+          </p>
+          <ModalFooter>
+            <Button variant="ghost" onClick={() => setShowModal(false)} disabled={isPending}>
+              Annuler
+            </Button>
+            <Button variant="destructive" onClick={handleDelete} disabled={isPending}>
+              {isPending ? 'Suppression...' : 'Supprimer'}
+            </Button>
+          </ModalFooter>
+        </div>
+      </Modal>
+    </>
+  );
+}
+

src/components/teams/MembersList.tsx

@@ -0,0 +1,175 @@
+'use client';
+
+import { useState } from 'react';
+import { getGravatarUrl } from '@/lib/gravatar';
+import { Badge } from '@/components/ui';
+import { Button } from '@/components/ui';
+import { AddMemberModal } from './AddMemberModal';
+import type { TeamMember, TeamRole } from '@/lib/types';
+import { TEAM_ROLE_LABELS } from '@/lib/types';
+
+interface MembersListProps {
+  members: TeamMember[];
+  teamId: string;
+  isAdmin: boolean;
+  onMemberUpdate: () => void;
+}
+
+export function MembersList({ members, teamId, isAdmin, onMemberUpdate }: MembersListProps) {
+  const [addMemberOpen, setAddMemberOpen] = useState(false);
+  const [updatingRole, setUpdatingRole] = useState<string | null>(null);
+  const [removingMember, setRemovingMember] = useState<string | null>(null);
+
+  const handleRoleChange = async (userId: string, newRole: TeamRole) => {
+    setUpdatingRole(userId);
+    try {
+      const response = await fetch(`/api/teams/${teamId}/members`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ userId, role: newRole }),
+      });
+
+      if (!response.ok) {
+        const error = await response.json();
+        alert(error.error || 'Erreur lors de la mise à jour du rôle');
+        return;
+      }
+
+      onMemberUpdate();
+    } catch (error) {
+      console.error('Error updating role:', error);
+      alert('Erreur lors de la mise à jour du rôle');
+    } finally {
+      setUpdatingRole(null);
+    }
+  };
+
+  const handleRemoveMember = async (userId: string) => {
+    if (!confirm('Êtes-vous sûr de vouloir retirer ce membre de l\'équipe ?')) {
+      return;
+    }
+
+    setRemovingMember(userId);
+    try {
+      const response = await fetch(`/api/teams/${teamId}/members?userId=${userId}`, {
+        method: 'DELETE',
+      });
+
+      if (!response.ok) {
+        const error = await response.json();
+        alert(error.error || 'Erreur lors de la suppression du membre');
+        return;
+      }
+
+      onMemberUpdate();
+    } catch (error) {
+      console.error('Error removing member:', error);
+      alert('Erreur lors de la suppression du membre');
+    } finally {
+      setRemovingMember(null);
+    }
+  };
+
+  return (
+    <div>
+      <div className="mb-4 flex items-center justify-between">
+        <h3 className="text-lg font-semibold text-foreground">Membres ({members.length})</h3>
+        {isAdmin && (
+          <Button
+            onClick={() => setAddMemberOpen(true)}
+            className="bg-[var(--purple)] text-white hover:opacity-90 border-transparent"
+          >
+            Ajouter un membre
+          </Button>
+        )}
+      </div>
+
+      <div className="space-y-3">
+        {members.map((member) => (
+          <div
+            key={member.id}
+            className="flex items-center gap-4 rounded-xl border border-border bg-card p-4"
+          >
+            {/* Avatar */}
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={getGravatarUrl(member.user.email, 96)}
+              alt={member.user.name || member.user.email}
+              width={48}
+              height={48}
+              className="rounded-full border-2 border-border"
+            />
+
+            {/* User Info */}
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-2">
+                <span className="font-medium text-foreground truncate">
+                  {member.user.name || 'Sans nom'}
+                </span>
+                <Badge
+                  style={{
+                    backgroundColor:
+                      member.role === 'ADMIN'
+                        ? 'color-mix(in srgb, var(--purple) 15%, transparent)'
+                        : 'color-mix(in srgb, var(--gray) 15%, transparent)',
+                    color: member.role === 'ADMIN' ? 'var(--purple)' : 'var(--gray)',
+                  }}
+                >
+                  {TEAM_ROLE_LABELS[member.role]}
+                </Badge>
+              </div>
+              <div className="text-sm text-muted truncate">{member.user.email}</div>
+            </div>
+
+            {/* Actions */}
+            {isAdmin && (
+              <div className="flex items-center gap-2">
+                {member.role === 'MEMBER' ? (
+                  <Button
+                    onClick={() => handleRoleChange(member.userId, 'ADMIN')}
+                    disabled={updatingRole === member.userId}
+                    variant="outline"
+                    size="sm"
+                  >
+                    {updatingRole === member.userId ? '...' : 'Promouvoir Admin'}
+                  </Button>
+                ) : (
+                  <Button
+                    onClick={() => handleRoleChange(member.userId, 'MEMBER')}
+                    disabled={updatingRole === member.userId}
+                    variant="outline"
+                    size="sm"
+                  >
+                    {updatingRole === member.userId ? '...' : 'Rétrograder'}
+                  </Button>
+                )}
+                <Button
+                  onClick={() => handleRemoveMember(member.userId)}
+                  disabled={removingMember === member.userId}
+                  variant="outline"
+                  size="sm"
+                  style={{
+                    color: 'var(--destructive)',
+                    borderColor: 'var(--destructive)',
+                  }}
+                >
+                  {removingMember === member.userId ? '...' : 'Retirer'}
+                </Button>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {addMemberOpen && (
+        <AddMemberModal
+          teamId={teamId}
+          existingMemberIds={members.map((m) => m.userId)}
+          onClose={() => setAddMemberOpen(false)}
+          onSuccess={onMemberUpdate}
+        />
+      )}
+    </div>
+  );
+}
+

src/components/teams/TeamCard.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import Link from 'next/link';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui';
+import { Badge } from '@/components/ui';
+import type { Team } from '@/lib/types';
+
+interface TeamCardProps {
+  team: Team & { userRole?: string; userOkrCount?: number; _count?: { members: number } };
+}
+
+export function TeamCard({ team }: TeamCardProps) {
+  const memberCount = team._count?.members || team.members?.length || 0;
+  const okrCount = team.userOkrCount || 0;
+  const isAdmin = team.userRole === 'ADMIN';
+
+  return (
+    <Link href={`/teams/${team.id}`}>
+      <Card hover className="h-full">
+        <CardHeader>
+          <div className="flex items-start justify-between">
+            <div className="flex-1">
+              <div className="flex items-center gap-2">
+                <span className="text-2xl">👥</span>
+                <CardTitle>{team.name}</CardTitle>
+              </div>
+              {team.description && <CardDescription className="mt-2">{team.description}</CardDescription>}
+            </div>
+            {isAdmin && (
+              <Badge
+                style={{
+                  backgroundColor: 'color-mix(in srgb, var(--purple) 15%, transparent)',
+                  color: 'var(--purple)',
+                }}
+              >
+                Admin
+              </Badge>
+            )}
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center gap-4 text-sm text-muted">
+            <div className="flex items-center gap-1.5">
+              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"
+                />
+              </svg>
+              <span>{memberCount} membre{memberCount !== 1 ? 's' : ''}</span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <span className="text-lg">🎯</span>
+              <span>{okrCount} OKR{okrCount !== 1 ? 's' : ''}</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}
+

src/components/teams/TeamDetailClient.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { MembersList } from './MembersList';
+import type { TeamMember } from '@/lib/types';
+
+interface TeamDetailClientProps {
+  members: TeamMember[];
+  teamId: string;
+  isAdmin: boolean;
+}
+
+export function TeamDetailClient({ members, teamId, isAdmin }: TeamDetailClientProps) {
+  const router = useRouter();
+
+  const handleMemberUpdate = () => {
+    router.refresh();
+  };
+
+  return <MembersList members={members} teamId={teamId} isAdmin={isAdmin} onMemberUpdate={handleMemberUpdate} />;
+}
+

src/components/teams/index.ts

@@ -0,0 +1,5 @@
+export { TeamCard } from './TeamCard';
+export { MembersList } from './MembersList';
+export { AddMemberModal } from './AddMemberModal';
+export { DeleteTeamButton } from './DeleteTeamButton';
+