feat: enhance OKR management by adding permission checks for editing and deleting, and updating OKR forms to handle key results more effectively

src/components/okrs/OKRCard.tsx

@@ -1,8 +1,11 @@
 'use client';
 
+import { useState, useTransition } from 'react';
+import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui';
 import { Badge } from '@/components/ui';
+import { Button } from '@/components/ui';
 import { getGravatarUrl } from '@/lib/gravatar';
 import type { OKR, KeyResult, OKRStatus, KeyResultStatus } from '@/lib/types';
 import { OKR_STATUS_LABELS, KEY_RESULT_STATUS_LABELS } from '@/lib/types';
@@ -71,39 +74,104 @@ function getKeyResultStatusColor(status: KeyResultStatus): { bg: string; color:
 interface OKRCardProps {
   okr: OKR & { teamMember?: { user: { id: string; email: string; name: string | null } } };
   teamId: string;
+  isAdmin?: boolean;
 }
 
-export function OKRCard({ okr, teamId }: OKRCardProps) {
+export function OKRCard({ okr, teamId, isAdmin = false }: OKRCardProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
   const progress = okr.progress || 0;
   const progressColor =
     progress >= 75 ? 'var(--success)' : progress >= 25 ? 'var(--accent)' : 'var(--destructive)';
 
+  const handleDelete = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!confirm(`Êtes-vous sûr de vouloir supprimer l'OKR "${okr.objective}" ?`)) {
+      return;
+    }
+
+    startTransition(async () => {
+      try {
+        const response = await fetch(`/api/okrs/${okr.id}`, {
+          method: 'DELETE',
+        });
+
+        if (!response.ok) {
+          const error = await response.json();
+          alert(error.error || 'Erreur lors de la suppression de l\'OKR');
+          return;
+        }
+
+        router.refresh();
+      } catch (error) {
+        console.error('Error deleting OKR:', error);
+        alert('Erreur lors de la suppression de l\'OKR');
+      }
+    });
+  };
+
   return (
-    <Link href={`/teams/${teamId}/okrs/${okr.id}`}>
-      <Card hover className="h-full">
-        <CardHeader>
-          <div className="flex items-start justify-between">
-            <div className="flex-1">
-              <CardTitle className="flex items-center gap-2">
-                <span className="text-xl">🎯</span>
-                {okr.objective}
-              </CardTitle>
-              {okr.teamMember && (
-                <div className="mt-2 flex items-center gap-2">
-                  {/* eslint-disable-next-line @next/next/no-img-element */}
-                  <img
-                    src={getGravatarUrl(okr.teamMember.user.email, 96)}
-                    alt={okr.teamMember.user.name || okr.teamMember.user.email}
-                    width={24}
-                    height={24}
-                    className="rounded-full"
-                  />
-                  <span className="text-sm text-muted">
-                    {okr.teamMember.user.name || okr.teamMember.user.email}
-                  </span>
-                </div>
-              )}
+    <Card hover className="h-full relative group">
+      <CardHeader>
+        <div className="flex items-start justify-between gap-2">
+          <Link href={`/teams/${teamId}/okrs/${okr.id}`} className="flex-1 min-w-0">
+            <div className="flex items-start justify-between">
+              <div className="flex-1 pr-2">
+                <CardTitle className="flex items-center gap-2">
+                  <span className="text-xl">🎯</span>
+                  {okr.objective}
+                </CardTitle>
+                {okr.teamMember && (
+                  <div className="mt-2 flex items-center gap-2">
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                      src={getGravatarUrl(okr.teamMember.user.email, 96)}
+                      alt={okr.teamMember.user.name || okr.teamMember.user.email}
+                      width={24}
+                      height={24}
+                      className="rounded-full"
+                    />
+                    <span className="text-sm text-muted">
+                      {okr.teamMember.user.name || okr.teamMember.user.email}
+                    </span>
+                  </div>
+                )}
+              </div>
             </div>
+          </Link>
+          
+          {/* Action Zone */}
+          <div className="flex items-center gap-2 flex-shrink-0 relative z-10">
+            {isAdmin && (
+              <button
+                onClick={handleDelete}
+                className="h-6 w-6 p-0 flex items-center justify-center rounded hover:bg-destructive/10 transition-colors flex-shrink-0"
+                style={{
+                  color: 'var(--destructive)',
+                  border: '1px solid color-mix(in srgb, var(--destructive) 40%, transparent)',
+                  backgroundColor: 'color-mix(in srgb, var(--destructive) 5%, transparent)',
+                }}
+                disabled={isPending}
+                title="Supprimer l'OKR"
+              >
+                <svg
+                  className="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2.5}
+                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                  />
+                </svg>
+              </button>
+            )}
             <Badge
               style={{
                 backgroundColor: 'color-mix(in srgb, var(--purple) 15%, transparent)',
@@ -113,7 +181,9 @@ export function OKRCard({ okr, teamId }: OKRCardProps) {
               {okr.period}
             </Badge>
           </div>
-        </CardHeader>
+        </div>
+      </CardHeader>
+      <Link href={`/teams/${teamId}/okrs/${okr.id}`}>
         <CardContent>
           <div className="space-y-3">
             {/* Progress Bar */}
@@ -202,8 +272,8 @@ export function OKRCard({ okr, teamId }: OKRCardProps) {
             )}
           </div>
         </CardContent>
-      </Card>
-    </Link>
+      </Link>
+    </Card>
   );
 }