Ajout de visuels sur la matrice pour sélection
This commit is contained in:
@@ -0,0 +1,83 @@
|
||||
import {
|
||||
BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend,
|
||||
} from 'recharts'
|
||||
|
||||
const levelLabels = {
|
||||
1: { label: 'Débutant', color: '#9ca3af' },
|
||||
2: { label: 'Intermédiaire', color: '#60a5fa' },
|
||||
3: { label: 'Avancé', color: '#fbbf24' },
|
||||
4: { label: 'Expert', color: '#34d399' },
|
||||
}
|
||||
|
||||
export default function BarChartView({
|
||||
categories, skills: allSkills, members, levels, filterCat,
|
||||
onBarClick,
|
||||
}) {
|
||||
const cats = filterCat === 'all' ? categories : categories.filter((c) => c.id === filterCat)
|
||||
|
||||
const data = cats.map((cat) => {
|
||||
const catSkills = allSkills.filter((s) => s.category_id === cat.id)
|
||||
const buckets = { 1: 0, 2: 0, 3: 0, 4: 0 }
|
||||
members.forEach((m) => {
|
||||
catSkills.forEach((s) => {
|
||||
const key = `${m.id}-${s.id}`
|
||||
const lvl = levels[key]?.level
|
||||
if (lvl) buckets[lvl]++
|
||||
})
|
||||
})
|
||||
return {
|
||||
name: cat.name,
|
||||
color: cat.color,
|
||||
id: cat.id,
|
||||
...buckets,
|
||||
}
|
||||
})
|
||||
|
||||
if (data.length === 0) {
|
||||
return <div className="p-8 text-center text-gray-400">Aucune donnée à afficher</div>
|
||||
}
|
||||
|
||||
function handleClick(entry, _index, level) {
|
||||
if (onBarClick && entry?.id) {
|
||||
onBarClick(entry.id, level)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-950 rounded-lg p-4">
|
||||
<ResponsiveContainer width="100%" height={400}>
|
||||
<BarChart data={data} layout="vertical" margin={{ top: 20, right: 30, left: 80, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="var(--border)" horizontal={false} />
|
||||
<XAxis type="number" stroke="var(--foreground)" tick={{ fontSize: 12 }} />
|
||||
<YAxis type="category" dataKey="name" stroke="var(--foreground)" tick={{ fontSize: 12 }} width={100} />
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
background: 'var(--background)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--radius)',
|
||||
fontSize: 13,
|
||||
}}
|
||||
/>
|
||||
<Legend
|
||||
payload={[1, 2, 3, 4].map((l) => ({
|
||||
value: `${l} - ${levelLabels[l].label}`,
|
||||
type: 'rect',
|
||||
color: levelLabels[l].color,
|
||||
}))}
|
||||
/>
|
||||
{[1, 2, 3, 4].map((lvl) => (
|
||||
<Bar
|
||||
key={lvl}
|
||||
dataKey={lvl}
|
||||
stackId="a"
|
||||
fill={levelLabels[lvl].color}
|
||||
name={`Niveau ${lvl}`}
|
||||
cursor="pointer"
|
||||
onClick={(entry) => handleClick(entry, null, lvl)}
|
||||
/>
|
||||
))}
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,251 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { forceSimulation, forceLink, forceManyBody, forceCenter, forceCollide } from 'd3-force'
|
||||
import { Button } from '@/components/ui/button'
|
||||
|
||||
export default function GraphView({
|
||||
categories, skills: allSkills, levels,
|
||||
filteredSkills, filteredMembers,
|
||||
}) {
|
||||
const canvasRef = useRef(null)
|
||||
const [aggregated, setAggregated] = useState(false)
|
||||
const [selectedNode, setSelectedNode] = useState(null)
|
||||
const width = 900
|
||||
const height = 600
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current
|
||||
if (!canvas) return
|
||||
const ctx = canvas.getContext('2d')
|
||||
if (!ctx) return
|
||||
|
||||
const catMap = {}
|
||||
categories.forEach((c) => { catMap[c.id] = c })
|
||||
|
||||
const nodes = []
|
||||
const links = []
|
||||
const nodeMap = new Map()
|
||||
|
||||
filteredMembers.forEach((m) => {
|
||||
const node = { id: m.id, type: 'member', label: m.full_name || m.email, r: 10, x: width / 2, y: height / 2 }
|
||||
nodes.push(node)
|
||||
nodeMap.set(m.id, node)
|
||||
})
|
||||
|
||||
if (aggregated) {
|
||||
categories
|
||||
.filter((cat) => filteredSkills.length === 0 || filteredSkills.some((s) => s.category_id === cat.id))
|
||||
.forEach((cat) => {
|
||||
const nid = `cat-${cat.id}`
|
||||
const node = { id: nid, type: 'category', label: cat.name, r: 14, color: cat.color, catId: cat.id, x: width / 2, y: height / 2 }
|
||||
nodes.push(node)
|
||||
nodeMap.set(nid, node)
|
||||
|
||||
filteredMembers.forEach((m) => {
|
||||
const catSkillIds = allSkills.filter((s) => s.category_id === cat.id).map((s) => s.id)
|
||||
let total = 0
|
||||
let count = 0
|
||||
catSkillIds.forEach((sid) => {
|
||||
const key = `${m.id}-${sid}`
|
||||
const lvl = levels[key]?.level
|
||||
if (lvl) { total += lvl; count++ }
|
||||
})
|
||||
if (count > 0) {
|
||||
links.push({ source: m.id, target: nid, strength: total / count / 4 })
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
filteredSkills.forEach((s) => {
|
||||
const nid = `skill-${s.id}`
|
||||
const node = { id: nid, type: 'skill', label: s.name, r: 8, color: catMap[s.category_id]?.color || '#888', skillId: s.id, x: width / 2, y: height / 2 }
|
||||
nodes.push(node)
|
||||
nodeMap.set(nid, node)
|
||||
})
|
||||
|
||||
filteredMembers.forEach((m) => {
|
||||
filteredSkills.forEach((s) => {
|
||||
const key = `${m.id}-${s.id}`
|
||||
const lvl = levels[key]?.level
|
||||
if (lvl) {
|
||||
links.push({ source: m.id, target: `skill-${s.id}`, strength: lvl / 4 })
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
if (nodes.length === 0) return
|
||||
|
||||
const dpi = window.devicePixelRatio || 1
|
||||
canvas.width = width * dpi
|
||||
canvas.height = height * dpi
|
||||
ctx.scale(dpi, dpi)
|
||||
|
||||
const borderColor = getComputedStyle(canvas).getPropertyValue('--border').trim() || '#e5e7eb'
|
||||
const fgColor = getComputedStyle(canvas).getPropertyValue('--foreground').trim() || '#000'
|
||||
|
||||
const simulation = forceSimulation(nodes)
|
||||
.force('link', forceLink(links).id((d) => d.id).distance(120).strength((d) => d.strength || 0.3))
|
||||
.force('charge', forceManyBody().strength(-150))
|
||||
.force('center', forceCenter(width / 2, height / 2))
|
||||
.force('collide', forceCollide(20))
|
||||
.on('tick', ticked)
|
||||
|
||||
function ticked() {
|
||||
ctx.clearRect(0, 0, width, height)
|
||||
|
||||
ctx.strokeStyle = borderColor
|
||||
ctx.lineWidth = 1
|
||||
links.forEach((l) => {
|
||||
const s = l.strength || 0.3
|
||||
ctx.globalAlpha = s * 0.5 + 0.15
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(l.source.x, l.source.y)
|
||||
ctx.lineTo(l.target.x, l.target.y)
|
||||
ctx.stroke()
|
||||
})
|
||||
|
||||
ctx.globalAlpha = 1
|
||||
nodes.forEach((n) => {
|
||||
const isSel = selectedNode === n.id
|
||||
const isNeighbor = isSel
|
||||
? links.some((l) => {
|
||||
const sid = typeof l.source === 'object' ? l.source.id : l.source
|
||||
const tid = typeof l.target === 'object' ? l.target.id : l.target
|
||||
return (sid === selectedNode && tid === n.id) || (tid === selectedNode && sid === n.id)
|
||||
})
|
||||
: false
|
||||
|
||||
ctx.globalAlpha = selectedNode && !isSel && !isNeighbor ? 0.12 : 1
|
||||
|
||||
if (n.type === 'member') {
|
||||
ctx.beginPath()
|
||||
ctx.arc(n.x, n.y, n.r, 0, 2 * Math.PI)
|
||||
ctx.fillStyle = '#6366f1'
|
||||
ctx.fill()
|
||||
if (isSel) {
|
||||
ctx.strokeStyle = '#fff'
|
||||
ctx.lineWidth = 2
|
||||
ctx.stroke()
|
||||
}
|
||||
} else if (n.type === 'category') {
|
||||
ctx.beginPath()
|
||||
ctx.arc(n.x, n.y, n.r, 0, 2 * Math.PI)
|
||||
ctx.fillStyle = n.color || '#888'
|
||||
ctx.fill()
|
||||
if (isSel) {
|
||||
ctx.strokeStyle = '#fff'
|
||||
ctx.lineWidth = 2
|
||||
ctx.stroke()
|
||||
}
|
||||
} else {
|
||||
const s = 6
|
||||
ctx.fillStyle = n.color || '#888'
|
||||
ctx.fillRect(n.x - s / 2, n.y - s / 2, s, s)
|
||||
if (isSel) {
|
||||
ctx.strokeStyle = '#fff'
|
||||
ctx.lineWidth = 2
|
||||
ctx.strokeRect(n.x - s / 2, n.y - s / 2, s, s)
|
||||
}
|
||||
}
|
||||
|
||||
ctx.fillStyle = fgColor
|
||||
ctx.font = '10px sans-serif'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.fillText(n.label, n.x, n.y + n.r + 12)
|
||||
})
|
||||
|
||||
ctx.globalAlpha = 1
|
||||
}
|
||||
|
||||
let dragNode = null
|
||||
|
||||
function getCanvasPos(e) {
|
||||
const rect = canvas.getBoundingClientRect()
|
||||
return {
|
||||
x: (e.clientX - rect.left) * (width / rect.width),
|
||||
y: (e.clientY - rect.top) * (height / rect.height),
|
||||
}
|
||||
}
|
||||
|
||||
function findHit(px, py) {
|
||||
for (let i = nodes.length - 1; i >= 0; i--) {
|
||||
const n = nodes[i]
|
||||
const dx = px - n.x
|
||||
const dy = py - n.y
|
||||
if (dx * dx + dy * dy <= (n.r + 8) * (n.r + 8)) return n
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
function onPointerDown(e) {
|
||||
const pos = getCanvasPos(e)
|
||||
const hit = findHit(pos.x, pos.y)
|
||||
if (hit) {
|
||||
dragNode = hit
|
||||
setSelectedNode(hit.id)
|
||||
hit.fx = hit.x
|
||||
hit.fy = hit.y
|
||||
simulation.alphaTarget(0.3).restart()
|
||||
}
|
||||
}
|
||||
|
||||
function onPointerMove(e) {
|
||||
if (!dragNode) return
|
||||
const pos = getCanvasPos(e)
|
||||
dragNode.fx = Math.max(0, Math.min(width, pos.x))
|
||||
dragNode.fy = Math.max(0, Math.min(height, pos.y))
|
||||
}
|
||||
|
||||
function onPointerUp() {
|
||||
if (dragNode) {
|
||||
dragNode.fx = null
|
||||
dragNode.fy = null
|
||||
dragNode = null
|
||||
simulation.alphaTarget(0)
|
||||
}
|
||||
}
|
||||
|
||||
canvas.addEventListener('pointerdown', onPointerDown)
|
||||
window.addEventListener('pointermove', onPointerMove)
|
||||
window.addEventListener('pointerup', onPointerUp)
|
||||
|
||||
return () => {
|
||||
simulation.stop()
|
||||
canvas.removeEventListener('pointerdown', onPointerDown)
|
||||
window.removeEventListener('pointermove', onPointerMove)
|
||||
window.removeEventListener('pointerup', onPointerUp)
|
||||
}
|
||||
}, [filteredSkills, filteredMembers, levels, categories, aggregated, selectedNode, allSkills])
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between flex-wrap gap-2">
|
||||
<div className="flex items-center gap-3 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<span className="w-3 h-3 rounded-full bg-indigo-500 inline-block" /> Membre
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<span className="w-3 h-3 rounded-sm bg-gray-400 inline-block" /> Compétence
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<span className="w-3 h-3 rounded-full border border-current inline-block" /> Catégorie
|
||||
</span>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={() => setAggregated(!aggregated)}>
|
||||
{aggregated ? 'Détailler les compétences' : 'Agréger par catégorie'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-950 rounded-lg overflow-hidden relative">
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="block w-full touch-none"
|
||||
style={{ height: `${height}px`, cursor: 'grab' }}
|
||||
/>
|
||||
<div className="absolute bottom-3 left-1/2 -translate-x-1/2 text-xs text-gray-400 pointer-events-none">
|
||||
Cliquez sur un nœud pour le sélectionner • Glissez pour déplacer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
import { useState } from 'react'
|
||||
import { ChevronDown, ChevronRight, ListCollapse } from 'lucide-react'
|
||||
import { SkillLevelSelect } from '@/components/SkillLevelBadge'
|
||||
|
||||
const heatColors = {
|
||||
0: 'bg-gray-50 dark:bg-gray-900',
|
||||
1: 'bg-gray-200 dark:bg-gray-700',
|
||||
2: 'bg-blue-200 dark:bg-blue-900',
|
||||
3: 'bg-amber-200 dark:bg-amber-900',
|
||||
4: 'bg-green-200 dark:bg-green-900',
|
||||
}
|
||||
|
||||
export function HeatmapView({
|
||||
categories, levels,
|
||||
isAdmin, currentUserId,
|
||||
editing, onEdit, onUpdate, onCancel,
|
||||
filteredSkills, visibleMembers,
|
||||
}) {
|
||||
const [collapsed, setCollapsed] = useState(new Set())
|
||||
|
||||
const grouped = categories
|
||||
.map((cat) => ({
|
||||
...cat,
|
||||
catSkills: filteredSkills.filter((s) => s.category_id === cat.id),
|
||||
}))
|
||||
.filter((g) => g.catSkills.length > 0)
|
||||
|
||||
const allCollapsed = grouped.every((g) => collapsed.has(g.id))
|
||||
|
||||
function toggleCategory(catId) {
|
||||
setCollapsed((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(catId)) next.delete(catId)
|
||||
else next.add(catId)
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
function toggleAll() {
|
||||
if (allCollapsed) {
|
||||
setCollapsed(new Set())
|
||||
} else {
|
||||
setCollapsed(new Set(grouped.map((g) => g.id)))
|
||||
}
|
||||
}
|
||||
|
||||
if (visibleMembers.length === 0) {
|
||||
return (
|
||||
<div className="p-8 text-center text-gray-400">
|
||||
Aucun résultat
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overflow-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-left p-2 bg-gray-100 dark:bg-gray-800 border dark:border-gray-700 sticky left-0 z-10 min-w-[180px]">
|
||||
<button
|
||||
className="inline-flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 mr-2"
|
||||
onClick={toggleAll}
|
||||
title={allCollapsed ? 'Tout dérouler' : 'Tout replier'}
|
||||
>
|
||||
<ListCollapse className={`h-3.5 w-3.5 transition-transform ${allCollapsed ? '' : 'rotate-180'}`} />
|
||||
</button>
|
||||
Compétence
|
||||
</th>
|
||||
{visibleMembers.map((m) => (
|
||||
<th key={m.id} className="p-2 bg-gray-100 dark:bg-gray-800 border dark:border-gray-700 text-sm text-center min-w-[120px]">
|
||||
{m.full_name || m.email}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{grouped.map((g) => {
|
||||
const isCollapsed = collapsed.has(g.id)
|
||||
return (
|
||||
<>
|
||||
<tr key={g.id} className="bg-gray-50 dark:bg-gray-800/50 hover:bg-gray-100 dark:hover:bg-gray-800">
|
||||
<td className="p-2 border dark:border-gray-700 font-semibold text-sm sticky left-0 bg-gray-50 dark:bg-gray-800/50 cursor-pointer" onClick={() => toggleCategory(g.id)}>
|
||||
<span className="flex items-center gap-2">
|
||||
{isCollapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||
<span className="w-2 h-2 rounded-full" style={{ backgroundColor: g.color }} />
|
||||
{g.name}
|
||||
</span>
|
||||
</td>
|
||||
{visibleMembers.map((m) => {
|
||||
const dotColors = ['bg-gray-200', 'bg-blue-200', 'bg-amber-200', 'bg-green-200']
|
||||
const counts = [0, 0, 0, 0]
|
||||
g.catSkills.forEach((s) => {
|
||||
const lvl = levels[`${m.id}-${s.id}`]?.level
|
||||
if (lvl) counts[lvl - 1]++
|
||||
})
|
||||
return (
|
||||
<td key={m.id} className="p-2 border dark:border-gray-700 text-center bg-gray-50 dark:bg-gray-800/50">
|
||||
<span className="inline-flex items-center gap-2 text-xs">
|
||||
{counts.map((c, i) =>
|
||||
c > 0 ? (
|
||||
<span key={i} className="inline-flex items-center gap-0.5">
|
||||
<span className={'inline-block w-2.5 h-2.5 rounded-full ' + dotColors[i]} />
|
||||
<span className="font-semibold">{c}</span>
|
||||
</span>
|
||||
) : null
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
)
|
||||
})}
|
||||
</tr>
|
||||
{!isCollapsed && g.catSkills.map((s) => (
|
||||
<tr key={s.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/50">
|
||||
<td className="p-2 border dark:border-gray-700 font-medium sticky left-0 bg-white dark:bg-gray-950">
|
||||
<span className="text-sm pl-6">{s.name}</span>
|
||||
</td>
|
||||
{visibleMembers.map((m) => {
|
||||
const key = `${m.id}-${s.id}`
|
||||
const level = levels[key]
|
||||
const lvl = level?.level || 0
|
||||
const canEditCell = isAdmin || currentUserId === m.id
|
||||
const isEditing = editing === key
|
||||
return (
|
||||
<td
|
||||
key={m.id}
|
||||
className={`p-2 border dark:border-gray-700 text-center ${heatColors[lvl]} ${currentUserId === m.id ? 'ring-2 ring-blue-400 dark:ring-blue-600 ring-inset' : ''}`}
|
||||
>
|
||||
{isEditing && canEditCell ? (
|
||||
<SkillLevelSelect
|
||||
value={level?.level || 1}
|
||||
onChange={(v) => onUpdate(m.id, s.id, v)}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
className="text-sm font-medium cursor-pointer"
|
||||
onClick={() => canEditCell && onEdit(key)}
|
||||
>
|
||||
{lvl || '—'}
|
||||
</span>
|
||||
)}
|
||||
{isEditing && canEditCell && (
|
||||
<button className="ml-1 text-xs text-red-500" onClick={onCancel}>✕</button>
|
||||
)}
|
||||
</td>
|
||||
)
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, Tooltip, ResponsiveContainer, Legend,
|
||||
} from 'recharts'
|
||||
|
||||
export default function RadarView({
|
||||
categories, skills: allSkills, members, levels, filterMember,
|
||||
}) {
|
||||
const [selectedMember, setSelectedMember] = useState(filterMember !== 'all' ? filterMember : (members[0]?.id || ''))
|
||||
|
||||
function getCategoryAvg(catId) {
|
||||
const catSkills = allSkills.filter((s) => s.category_id === catId)
|
||||
if (catSkills.length === 0) return 0
|
||||
let total = 0
|
||||
let count = 0
|
||||
members.forEach((m) => {
|
||||
catSkills.forEach((s) => {
|
||||
const key = `${m.id}-${s.id}`
|
||||
const lvl = levels[key]?.level
|
||||
if (lvl) { total += lvl; count++ }
|
||||
})
|
||||
})
|
||||
return count > 0 ? +(total / count).toFixed(1) : 0
|
||||
}
|
||||
|
||||
function getMemberAvg(catId, memberId) {
|
||||
const catSkills = allSkills.filter((s) => s.category_id === catId)
|
||||
if (catSkills.length === 0) return 0
|
||||
let total = 0
|
||||
let count = 0
|
||||
catSkills.forEach((s) => {
|
||||
const key = `${memberId}-${s.id}`
|
||||
const lvl = levels[key]?.level
|
||||
if (lvl) { total += lvl; count++ }
|
||||
})
|
||||
return count > 0 ? +(total / count).toFixed(1) : 0
|
||||
}
|
||||
|
||||
const data = categories.map((cat) => {
|
||||
const teamAvg = getCategoryAvg(cat.id)
|
||||
const memberAvg = selectedMember ? getMemberAvg(cat.id, selectedMember) : 0
|
||||
return {
|
||||
category: cat.name,
|
||||
color: cat.color,
|
||||
teamAvg,
|
||||
memberAvg,
|
||||
}
|
||||
})
|
||||
|
||||
const selectedMemberName = members.find((m) => m.id === selectedMember)?.full_name || 'Membre'
|
||||
|
||||
if (data.length === 0) {
|
||||
return <div className="p-8 text-center text-gray-400">Aucune donnée à afficher</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-950 rounded-lg p-4">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<label className="text-sm text-gray-600 dark:text-gray-400">Membre :</label>
|
||||
<select
|
||||
className="border rounded px-2 py-1 text-sm dark:bg-gray-800 dark:border-gray-700"
|
||||
value={selectedMember}
|
||||
onChange={(e) => setSelectedMember(e.target.value)}
|
||||
>
|
||||
{members.map((m) => (
|
||||
<option key={m.id} value={m.id}>{m.full_name || m.email}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<ResponsiveContainer width="100%" height={450}>
|
||||
<RadarChart data={data}>
|
||||
<PolarGrid stroke="var(--border)" />
|
||||
<PolarAngleAxis dataKey="category" stroke="var(--foreground)" tick={{ fontSize: 11 }} />
|
||||
<PolarRadiusAxis domain={[0, 4]} tickCount={5} stroke="var(--border)" tick={{ fontSize: 10 }} />
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
background: 'var(--background)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--radius)',
|
||||
fontSize: 13,
|
||||
}}
|
||||
/>
|
||||
<Radar
|
||||
name="Moyenne équipe"
|
||||
dataKey="teamAvg"
|
||||
stroke="var(--muted-foreground)"
|
||||
fill="var(--muted-foreground)"
|
||||
fillOpacity={0.1}
|
||||
strokeDasharray="4 4"
|
||||
/>
|
||||
<Radar
|
||||
name={selectedMemberName}
|
||||
dataKey="memberAvg"
|
||||
stroke="var(--foreground)"
|
||||
fill="var(--foreground)"
|
||||
fillOpacity={0.15}
|
||||
/>
|
||||
<Legend />
|
||||
</RadarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
import {
|
||||
ScatterChart, Scatter, XAxis, YAxis, ZAxis, CartesianGrid,
|
||||
Tooltip, ResponsiveContainer, Legend,
|
||||
} from 'recharts'
|
||||
|
||||
export default function ScatterView({
|
||||
members, levels, categories,
|
||||
filterMember,
|
||||
filteredSkills, onMemberSelect,
|
||||
}) {
|
||||
const data = []
|
||||
const catGaps = {}
|
||||
let xPos = 0
|
||||
|
||||
categories.forEach((cat) => {
|
||||
const catSkills = filteredSkills.filter((s) => s.category_id === cat.id)
|
||||
if (catSkills.length === 0) return
|
||||
xPos += 1
|
||||
catGaps[cat.id] = { start: xPos, end: xPos + catSkills.length - 1 }
|
||||
catSkills.forEach((s) => {
|
||||
const x = xPos++
|
||||
members.forEach((m) => {
|
||||
if (filterMember !== 'all' && m.id !== filterMember) return
|
||||
const key = `${m.id}-${s.id}`
|
||||
const lvl = levels[key]?.level
|
||||
if (!lvl) return
|
||||
data.push({
|
||||
x,
|
||||
y: lvl + (Math.random() - 0.5) * 0.3,
|
||||
memberName: m.full_name || m.email,
|
||||
skillName: s.name,
|
||||
level: lvl,
|
||||
category: cat.name,
|
||||
categoryColor: cat.color,
|
||||
memberId: m.id,
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
const ticks = categories
|
||||
.filter((cat) => catGaps[cat.id])
|
||||
.map((cat) => ({
|
||||
value: (catGaps[cat.id].start + catGaps[cat.id].end) / 2,
|
||||
label: cat.name,
|
||||
}))
|
||||
|
||||
if (data.length === 0) {
|
||||
return <div className="p-8 text-center text-gray-400">Aucune donnée à afficher</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-950 rounded-lg p-4">
|
||||
<ResponsiveContainer width="100%" height={500}>
|
||||
<ScatterChart margin={{ top: 20, right: 20, bottom: 60, left: 40 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
|
||||
<XAxis
|
||||
type="number"
|
||||
dataKey="x"
|
||||
domain={[0, 'dataMax']}
|
||||
ticks={ticks.map((t) => t.value)}
|
||||
tickFormatter={(v) => ticks.find((t) => t.value === v)?.label || ''}
|
||||
stroke="var(--foreground)"
|
||||
tick={{ fontSize: 12 }}
|
||||
/>
|
||||
<YAxis
|
||||
type="number"
|
||||
domain={[0.5, 4.5]}
|
||||
ticks={[1, 2, 3, 4]}
|
||||
tickFormatter={(v) => ['', '1 - Débutant', '2 - Intermédiaire', '3 - Avancé', '4 - Expert'][v]}
|
||||
stroke="var(--foreground)"
|
||||
tick={{ fontSize: 12 }}
|
||||
/>
|
||||
<ZAxis range={[60, 60]} />
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
background: 'var(--background)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--radius)',
|
||||
fontSize: 13,
|
||||
}}
|
||||
formatter={(val, name) => {
|
||||
if (name === 'y') return null
|
||||
return [val, name]
|
||||
}}
|
||||
labelFormatter={() => ''}
|
||||
content={({ active, payload }) => {
|
||||
if (!active || !payload?.[0]) return null
|
||||
const d = payload[0].payload
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 border rounded-lg p-3 shadow-lg text-sm space-y-1">
|
||||
<p className="font-medium">{d.memberName}</p>
|
||||
<p>{d.skillName}</p>
|
||||
<p>Niveau : <strong>{d.level}</strong></p>
|
||||
<p className="text-xs" style={{ color: d.categoryColor }}>{d.category}</p>
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<Legend
|
||||
payload={categories.map((c) => ({
|
||||
id: c.id,
|
||||
value: c.name,
|
||||
type: 'circle',
|
||||
color: c.color,
|
||||
}))}
|
||||
/>
|
||||
{categories.map((cat) => {
|
||||
const catData = data.filter((d) => d.category === cat.name)
|
||||
return (
|
||||
<Scatter
|
||||
key={cat.id}
|
||||
name={cat.name}
|
||||
data={catData}
|
||||
fill={cat.color}
|
||||
stroke="none"
|
||||
onClick={(point) => onMemberSelect?.(point.memberId)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</ScatterChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
export function SkillMatrixFilters({ categories, members, filterCat, filterMember, filterMinLevel, onFilterChange }) {
|
||||
export function SkillMatrixFilters({ categories, members, filterCat, filterMember, filterMinLevel, onFilterChange, hideMember }) {
|
||||
return (
|
||||
<div className="flex gap-4 flex-wrap">
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -14,19 +14,21 @@ export function SkillMatrixFilters({ categories, members, filterCat, filterMembe
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm text-gray-600 dark:text-gray-400">Membre :</label>
|
||||
<select
|
||||
className="border rounded px-2 py-1 text-sm dark:bg-gray-800 dark:border-gray-700"
|
||||
value={filterMember}
|
||||
onChange={(e) => onFilterChange('member', e.target.value)}
|
||||
>
|
||||
<option value="all">Tous</option>
|
||||
{members.map((m) => (
|
||||
<option key={m.id} value={m.id}>{m.full_name || m.email}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{!hideMember && (
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm text-gray-600 dark:text-gray-400">Membre :</label>
|
||||
<select
|
||||
className="border rounded px-2 py-1 text-sm dark:bg-gray-800 dark:border-gray-700"
|
||||
value={filterMember}
|
||||
onChange={(e) => onFilterChange('member', e.target.value)}
|
||||
>
|
||||
<option value="all">Tous</option>
|
||||
{members.map((m) => (
|
||||
<option key={m.id} value={m.id}>{m.full_name || m.email}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm text-gray-600 dark:text-gray-400">Niveau min. :</label>
|
||||
<select
|
||||
|
||||
@@ -0,0 +1,158 @@
|
||||
import { Treemap, ResponsiveContainer, Tooltip } from 'recharts'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
|
||||
export default function TreemapView({
|
||||
categories: allCategories, members, levels,
|
||||
filterMember, filterCat,
|
||||
filteredSkills, onCellClick,
|
||||
}) {
|
||||
const cats = allCategories
|
||||
.filter((cat) => filterCat === 'all' || cat.id === filterCat)
|
||||
.map((cat) => {
|
||||
const catSkills = filteredSkills.filter((s) => s.category_id === cat.id)
|
||||
return {
|
||||
name: cat.name,
|
||||
color: cat.color,
|
||||
children: catSkills.map((s) => {
|
||||
let total = 0
|
||||
let count = 0
|
||||
if (filterMember !== 'all') {
|
||||
const key = `${filterMember}-${s.id}`
|
||||
const lvl = levels[key]?.level
|
||||
if (lvl) { total += lvl; count++ }
|
||||
} else {
|
||||
members.forEach((m) => {
|
||||
const key = `${m.id}-${s.id}`
|
||||
const lvl = levels[key]?.level
|
||||
if (lvl) { total += lvl; count++ }
|
||||
})
|
||||
}
|
||||
const avg = count > 0 ? +(total / count).toFixed(1) : 0
|
||||
return {
|
||||
name: s.name,
|
||||
size: 1,
|
||||
avg,
|
||||
count,
|
||||
skillId: s.id,
|
||||
catId: cat.id,
|
||||
}
|
||||
}),
|
||||
}
|
||||
})
|
||||
.filter((cat) => cat.children.length > 0)
|
||||
|
||||
const flatData = cats
|
||||
.flatMap((cat) => cat.children)
|
||||
.sort((a, b) => b.avg - a.avg)
|
||||
|
||||
if (flatData.length === 0) {
|
||||
return <div className="p-8 text-center text-gray-400">Aucune donnée à afficher</div>
|
||||
}
|
||||
|
||||
function getColor(avg) {
|
||||
if (avg >= 3.5) return '#34d399'
|
||||
if (avg >= 2.5) return '#fbbf24'
|
||||
if (avg >= 1.5) return '#60a5fa'
|
||||
return '#9ca3af'
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="bg-white dark:bg-gray-950 rounded-lg p-4">
|
||||
<ResponsiveContainer width="100%" height={500}>
|
||||
<Treemap
|
||||
data={flatData}
|
||||
dataKey="size"
|
||||
aspectRatio={4 / 3}
|
||||
stroke="var(--background)"
|
||||
fill="#8884d8"
|
||||
content={({ x, y, width, height, payload }) => {
|
||||
if (!payload) return null
|
||||
return (
|
||||
<g>
|
||||
<rect
|
||||
x={x}
|
||||
y={y}
|
||||
width={width}
|
||||
height={height}
|
||||
fill={getColor(payload.avg)}
|
||||
stroke="var(--background)"
|
||||
strokeWidth={2}
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => onCellClick?.(payload.catId, filterMember !== 'all' ? filterMember : undefined)}
|
||||
rx={4}
|
||||
/>
|
||||
{width > 40 && height > 30 && (
|
||||
<>
|
||||
<text
|
||||
x={x + width / 2}
|
||||
y={y + height / 2 - 4}
|
||||
textAnchor="middle"
|
||||
fill={payload.avg >= 2.5 ? '#000' : '#fff'}
|
||||
fontSize={12}
|
||||
fontWeight={600}
|
||||
>
|
||||
{payload.name}
|
||||
</text>
|
||||
<text
|
||||
x={x + width / 2}
|
||||
y={y + height / 2 + 12}
|
||||
textAnchor="middle"
|
||||
fill={payload.avg >= 2.5 ? '#000' : '#fff'}
|
||||
fontSize={11}
|
||||
>
|
||||
{payload.avg}
|
||||
{filterMember === 'all' && ` (${payload.count})`}
|
||||
</text>
|
||||
</>
|
||||
)}
|
||||
</g>
|
||||
)
|
||||
}}
|
||||
>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
background: 'var(--background)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--radius)',
|
||||
fontSize: 13,
|
||||
}}
|
||||
formatter={(value, name, props) => {
|
||||
const p = props.payload
|
||||
if (!p) return []
|
||||
return [
|
||||
filterMember === 'all'
|
||||
? `Moyenne : ${p.avg} — ${p.count} évalué(s)`
|
||||
: `Niveau : ${p.avg}`,
|
||||
p.name,
|
||||
]
|
||||
}}
|
||||
/>
|
||||
</Treemap>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
{flatData.length > 0 && (
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<h3 className="text-sm font-semibold text-gray-500 dark:text-gray-400 mb-3 uppercase tracking-wider">
|
||||
Détail des compétences
|
||||
</h3>
|
||||
<div className="space-y-1">
|
||||
{flatData.map((s) => (
|
||||
<div
|
||||
key={s.skillId}
|
||||
className="flex items-center justify-between py-1.5 px-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer text-sm"
|
||||
onClick={() => onCellClick?.(s.catId, filterMember !== 'all' ? filterMember : undefined)}
|
||||
>
|
||||
<span>{s.name}</span>
|
||||
<span className="font-medium">{s.avg}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Table2, Palette, ScatterChart, Share2, Grid3x3, Radar, BarChart3,
|
||||
} from 'lucide-react'
|
||||
|
||||
const views = [
|
||||
{ id: 'table', icon: Table2, label: 'Tableau' },
|
||||
{ id: 'heat', icon: Palette, label: 'Matrice thermique' },
|
||||
{ id: 'scatter', icon: ScatterChart, label: 'Nuage de points' },
|
||||
{ id: 'graph', icon: Share2, label: 'Graphe' },
|
||||
{ id: 'treemap', icon: Grid3x3, label: 'Treemap' },
|
||||
{ id: 'radar', icon: Radar, label: 'Radar' },
|
||||
{ id: 'bars', icon: BarChart3, label: 'Barres' },
|
||||
]
|
||||
|
||||
export function ViewSwitcher({ active, onChange }) {
|
||||
return (
|
||||
<div className="flex gap-1" role="group" aria-label="Mode d'affichage">
|
||||
{views.map((v) => {
|
||||
const Icon = v.icon
|
||||
const isActive = active === v.id
|
||||
return (
|
||||
<Button
|
||||
key={v.id}
|
||||
variant={isActive ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
className="h-8 w-8 p-0"
|
||||
onClick={() => onChange(v.id)}
|
||||
title={v.label}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
</Button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+160
-40
@@ -1,4 +1,5 @@
|
||||
import { useState } from 'react'
|
||||
import { lazy, Suspense, useState } from 'react'
|
||||
import { useSearchParams } from 'react-router-dom'
|
||||
import { useAuth } from '@/context/AuthContext'
|
||||
import { useCategories } from '@/hooks/useCategories'
|
||||
import { useSkills } from '@/hooks/useSkills'
|
||||
@@ -7,10 +8,21 @@ import { useSkillLevels } from '@/hooks/useSkillLevels'
|
||||
import { SkillMatrixFilters } from '@/components/matrix/SkillMatrixFilters'
|
||||
import { SkillMatrixTable } from '@/components/matrix/SkillMatrixTable'
|
||||
import { SkillMemberForm } from '@/components/matrix/SkillMemberForm'
|
||||
import { ViewSwitcher } from '@/components/matrix/ViewSwitcher'
|
||||
import { HeatmapView } from '@/components/matrix/HeatmapView'
|
||||
import { Download } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
const ScatterView = lazy(() => import('@/components/matrix/ScatterView'))
|
||||
const GraphView = lazy(() => import('@/components/matrix/GraphView'))
|
||||
const TreemapView = lazy(() => import('@/components/matrix/TreemapView'))
|
||||
const RadarView = lazy(() => import('@/components/matrix/RadarView'))
|
||||
const BarChartView = lazy(() => import('@/components/matrix/BarChartView'))
|
||||
|
||||
const hideMemberViews = new Set(['bars'])
|
||||
const showLevelLegendViews = new Set(['table', 'heat'])
|
||||
|
||||
export function SkillMatrix() {
|
||||
const { profile } = useAuth()
|
||||
const isAdmin = profile?.role === 'admin'
|
||||
@@ -20,11 +32,18 @@ export function SkillMatrix() {
|
||||
const { members } = useMembers()
|
||||
const { levels, updateLevel } = useSkillLevels()
|
||||
|
||||
const [searchParams, setSearchParams] = useSearchParams()
|
||||
const viewMode = searchParams.get('view') || 'table'
|
||||
|
||||
const [filterCat, setFilterCat] = useState('all')
|
||||
const [filterMember, setFilterMember] = useState('all')
|
||||
const [filterMinLevel, setFilterMinLevel] = useState(0)
|
||||
const [editing, setEditing] = useState(null)
|
||||
|
||||
function setViewMode(mode) {
|
||||
setSearchParams(mode === 'table' ? {} : { view: mode }, { replace: true })
|
||||
}
|
||||
|
||||
function onFilterChange(key, value) {
|
||||
if (key === 'cat') setFilterCat(value)
|
||||
if (key === 'member') setFilterMember(value)
|
||||
@@ -73,14 +92,131 @@ export function SkillMatrix() {
|
||||
toast.success('Fichier CSV téléchargé')
|
||||
}
|
||||
|
||||
function navigateToView(mode, filters) {
|
||||
if (filters.cat !== undefined) setFilterCat(filters.cat)
|
||||
if (filters.member !== undefined) setFilterMember(filters.member)
|
||||
if (filters.minLevel !== undefined) setFilterMinLevel(filters.minLevel)
|
||||
setViewMode(mode)
|
||||
}
|
||||
|
||||
const commonProps = {
|
||||
categories, skills, members, levels,
|
||||
isAdmin, currentUserId,
|
||||
filterCat, filterMember, filterMinLevel,
|
||||
}
|
||||
|
||||
const editableProps = {
|
||||
editing, onEdit: setEditing, onUpdate: handleUpdate, onCancel: () => setEditing(null),
|
||||
}
|
||||
|
||||
function renderView() {
|
||||
switch (viewMode) {
|
||||
case 'heat':
|
||||
return (
|
||||
<HeatmapView
|
||||
{...commonProps}
|
||||
{...editableProps}
|
||||
filteredSkills={filteredSkills}
|
||||
visibleMembers={visibleMembers}
|
||||
/>
|
||||
)
|
||||
|
||||
case 'scatter':
|
||||
return (
|
||||
<Suspense fallback={<Fallback />}>
|
||||
<ScatterView
|
||||
{...commonProps}
|
||||
filteredSkills={filteredSkills}
|
||||
onMemberSelect={(memberId) => navigateToView('table', { member: memberId })}
|
||||
/>
|
||||
</Suspense>
|
||||
)
|
||||
|
||||
case 'graph':
|
||||
return (
|
||||
<Suspense fallback={<Fallback />}>
|
||||
<GraphView
|
||||
{...commonProps}
|
||||
filteredSkills={filteredSkills}
|
||||
filteredMembers={filteredMembers}
|
||||
/>
|
||||
</Suspense>
|
||||
)
|
||||
|
||||
case 'treemap':
|
||||
return (
|
||||
<Suspense fallback={<Fallback />}>
|
||||
<TreemapView
|
||||
{...commonProps}
|
||||
filteredSkills={filteredSkills}
|
||||
onCellClick={(catId, memberId) => navigateToView('table', { cat: catId, member: memberId })}
|
||||
/>
|
||||
</Suspense>
|
||||
)
|
||||
|
||||
case 'radar':
|
||||
return (
|
||||
<Suspense fallback={<Fallback />}>
|
||||
<RadarView {...commonProps} />
|
||||
</Suspense>
|
||||
)
|
||||
|
||||
case 'bars':
|
||||
return (
|
||||
<Suspense fallback={<Fallback />}>
|
||||
<BarChartView
|
||||
{...commonProps}
|
||||
onBarClick={(catId, level) => navigateToView('table', { cat: catId, minLevel: level })}
|
||||
/>
|
||||
</Suspense>
|
||||
)
|
||||
|
||||
default:
|
||||
if (filterMember !== 'all' && visibleMembers.length === 1) {
|
||||
return (
|
||||
<SkillMemberForm
|
||||
member={visibleMembers[0]}
|
||||
categories={categories}
|
||||
skills={filteredSkills}
|
||||
levels={levels}
|
||||
isAdmin={isAdmin}
|
||||
currentUserId={currentUserId}
|
||||
onSave={(memberId, changes) => {
|
||||
Promise.all(changes.map((c) => updateLevel(memberId, c.skillId, c.newLevel, profile.id)))
|
||||
.then(() => toast.success('Compétences mises à jour'))
|
||||
.catch(() => toast.error('Erreur lors de la mise à jour'))
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<SkillMatrixTable
|
||||
categories={categories}
|
||||
skills={filteredSkills}
|
||||
members={visibleMembers}
|
||||
levels={levels}
|
||||
isAdmin={isAdmin}
|
||||
currentUserId={currentUserId}
|
||||
editing={editing}
|
||||
onEdit={setEditing}
|
||||
onUpdate={handleUpdate}
|
||||
onCancel={() => setEditing(null)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center justify-between flex-wrap gap-4">
|
||||
<h1 className="text-2xl font-bold">Matrice des compétences</h1>
|
||||
<Button variant="outline" onClick={exportCSV}>
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
CSV
|
||||
</Button>
|
||||
<div className="flex items-center gap-2">
|
||||
<ViewSwitcher active={viewMode} onChange={setViewMode} />
|
||||
<Button variant="outline" onClick={exportCSV}>
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
CSV
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SkillMatrixFilters
|
||||
@@ -90,43 +226,27 @@ export function SkillMatrix() {
|
||||
filterMember={filterMember}
|
||||
filterMinLevel={filterMinLevel}
|
||||
onFilterChange={onFilterChange}
|
||||
hideMember={hideMemberViews.has(viewMode)}
|
||||
/>
|
||||
|
||||
<div className="flex gap-4 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span><span className="inline-block w-3 h-3 rounded-full bg-gray-200 mr-1" /> Débutant</span>
|
||||
<span><span className="inline-block w-3 h-3 rounded-full bg-blue-200 mr-1" /> Intermédiaire</span>
|
||||
<span><span className="inline-block w-3 h-3 rounded-full bg-amber-200 mr-1" /> Avancé</span>
|
||||
<span><span className="inline-block w-3 h-3 rounded-full bg-green-200 mr-1" /> Expert</span>
|
||||
</div>
|
||||
|
||||
{filterMember !== 'all' && visibleMembers.length === 1 ? (
|
||||
<SkillMemberForm
|
||||
member={visibleMembers[0]}
|
||||
categories={categories}
|
||||
skills={filteredSkills}
|
||||
levels={levels}
|
||||
isAdmin={isAdmin}
|
||||
currentUserId={currentUserId}
|
||||
onSave={(memberId, changes) => {
|
||||
Promise.all(changes.map((c) => updateLevel(memberId, c.skillId, c.newLevel, profile.id)))
|
||||
.then(() => toast.success('Compétences mises à jour'))
|
||||
.catch(() => toast.error('Erreur lors de la mise à jour'))
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<SkillMatrixTable
|
||||
categories={categories}
|
||||
skills={filteredSkills}
|
||||
members={visibleMembers}
|
||||
levels={levels}
|
||||
isAdmin={isAdmin}
|
||||
currentUserId={currentUserId}
|
||||
editing={editing}
|
||||
onEdit={setEditing}
|
||||
onUpdate={handleUpdate}
|
||||
onCancel={() => setEditing(null)}
|
||||
/>
|
||||
{showLevelLegendViews.has(viewMode) && (
|
||||
<div className="flex gap-4 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span><span className="inline-block w-3 h-3 rounded-full bg-gray-200 mr-1" /> Débutant</span>
|
||||
<span><span className="inline-block w-3 h-3 rounded-full bg-blue-200 mr-1" /> Intermédiaire</span>
|
||||
<span><span className="inline-block w-3 h-3 rounded-full bg-amber-200 mr-1" /> Avancé</span>
|
||||
<span><span className="inline-block w-3 h-3 rounded-full bg-green-200 mr-1" /> Expert</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{renderView()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Fallback() {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[400px] text-gray-400">
|
||||
Chargement...
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user