From 24e08fca4f6c6e80754531a420f93949fb109b4c Mon Sep 17 00:00:00 2001
From: TopheC <ccado@free.fr>
Date: Mon, 25 May 2026 01:36:29 +0200
Subject: [PATCH] Ajout du composant Form Skill  Member

---
 src/components/matrix/SkillMemberForm.jsx | 80 +++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 src/components/matrix/SkillMemberForm.jsx

diff --git a/src/components/matrix/SkillMemberForm.jsx b/src/components/matrix/SkillMemberForm.jsx
new file mode 100644
index 0000000..ab418f8
--- /dev/null
+++ b/src/components/matrix/SkillMemberForm.jsx
@@ -0,0 +1,80 @@
+import { useState } from 'react'
+import { SkillLevelSelect } from '@/components/SkillLevelBadge'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { Save } from 'lucide-react'
+
+export function SkillMemberForm({ member, categories, skills, levels, isAdmin, currentUserId, onSave }) {
+  const canEdit = isAdmin || currentUserId === member.id
+  const initial = {}
+  skills.forEach((s) => {
+    const key = `${member.id}-${s.id}`
+    initial[s.id] = levels[key]?.level || 0
+  })
+  const [editedLevels, setEditedLevels] = useState(initial)
+
+  const hasChanges = skills.some((s) => {
+    const key = `${member.id}-${s.id}`
+    return (editedLevels[s.id] || 0) !== (levels[key]?.level || 0)
+  })
+
+  function handleSave() {
+    const changes = []
+    skills.forEach((s) => {
+      const key = `${member.id}-${s.id}`
+      const current = levels[key]?.level || 0
+      const edited = editedLevels[s.id] || 0
+      if (edited !== current) {
+        changes.push({ skillId: s.id, oldLevel: current || null, newLevel: edited })
+      }
+    })
+    if (changes.length > 0) onSave(member.id, changes)
+  }
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-gray-500 dark:text-gray-400">
+        Modification des compétences de <span className="font-medium text-gray-700 dark:text-gray-200">{member.full_name || member.email}</span>
+      </p>
+
+      {categories.map((cat) => {
+        const catSkills = skills.filter((s) => s.category_id === cat.id)
+        if (catSkills.length === 0) return null
+        return (
+          <Card key={cat.id}>
+            <CardContent className="p-4 space-y-3">
+              <h3 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider flex items-center gap-2">
+                <span className="w-2 h-2 rounded-full" style={{ backgroundColor: cat.color }} />
+                {cat.name}
+              </h3>
+              {catSkills.map((s) => (
+                <div key={s.id} className="flex items-center justify-between py-1.5 border-b dark:border-gray-800 last:border-0">
+                  <span className="text-sm">{s.name}</span>
+                  {canEdit ? (
+                    <SkillLevelSelect
+                      value={editedLevels[s.id] || 1}
+                      onChange={(v) => setEditedLevels((prev) => ({ ...prev, [s.id]: v }))}
+                    />
+                  ) : (
+                    <span className="text-sm font-medium">
+                      {levels[`${member.id}-${s.id}`]?.level || '—'}
+                    </span>
+                  )}
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        )
+      })}
+
+      {canEdit && (
+        <div className="flex justify-end">
+          <Button onClick={handleSave} disabled={!hasChanges}>
+            <Save className="h-4 w-4 mr-2" />
+            Enregistrer
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}