Initial commit: application de gestion des competences
This commit is contained in:
@@ -0,0 +1,102 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useSearchParams, useNavigate } from 'react-router-dom'
|
||||
import { supabase } from '@/lib/supabase'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
export function AcceptInvite() {
|
||||
const [searchParams] = useSearchParams()
|
||||
const token = searchParams.get('token')
|
||||
const navigate = useNavigate()
|
||||
const [email, setEmail] = useState('')
|
||||
const [name, setName] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [valid, setValid] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
async function checkToken() {
|
||||
const { data, error } = await supabase
|
||||
.from('invitations')
|
||||
.select('*')
|
||||
.eq('token', token)
|
||||
.eq('accepted', false)
|
||||
.single()
|
||||
if (data && !error) {
|
||||
setEmail(data.email)
|
||||
setValid(true)
|
||||
}
|
||||
setLoading(false)
|
||||
}
|
||||
if (token) checkToken()
|
||||
else setLoading(false)
|
||||
}, [token])
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault()
|
||||
setLoading(true)
|
||||
|
||||
const { data, error } = await supabase.auth.signUp({
|
||||
email,
|
||||
password,
|
||||
options: { data: { full_name: name } },
|
||||
})
|
||||
|
||||
if (error) {
|
||||
toast.error(error.message)
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
// Marquer l'invitation comme acceptée
|
||||
await supabase.from('invitations').update({ accepted: true }).eq('token', token)
|
||||
|
||||
toast.success('Compte créé ! Vous pouvez vous connecter.')
|
||||
navigate('/login')
|
||||
}
|
||||
|
||||
if (loading) return <div className="min-h-screen flex items-center justify-center">Vérification...</div>
|
||||
if (!valid) return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<Card>
|
||||
<CardContent className="p-8 text-center">
|
||||
<p className="text-red-600">Lien d'invitation invalide ou expiré.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-100">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl text-center">Accepter l'invitation</CardTitle>
|
||||
<p className="text-sm text-gray-500 text-center mt-1">{email}</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<Input
|
||||
placeholder="Nom complet"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Mot de passe"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
minLength={6}
|
||||
/>
|
||||
<Button type="submit" className="w-full" disabled={loading}>
|
||||
{loading ? 'Création...' : 'Créer mon compte'}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { supabase } from '@/lib/supabase'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { SkillLevelBadge } from '@/components/SkillLevelBadge'
|
||||
|
||||
export function Dashboard() {
|
||||
const [stats, setStats] = useState({ members: 0, skills: 0, categories: 0 })
|
||||
const [recentChanges, setRecentChanges] = useState([])
|
||||
const [topSkills, setTopSkills] = useState([])
|
||||
|
||||
useEffect(() => {
|
||||
async function load() {
|
||||
const [members, skills, categories, history] = await Promise.all([
|
||||
supabase.from('members').select('*', { count: 'exact', head: true }),
|
||||
supabase.from('skills').select('*', { count: 'exact', head: true }),
|
||||
supabase.from('categories').select('*', { count: 'exact', head: true }),
|
||||
supabase.from('skill_history').select(`
|
||||
*,
|
||||
member:member_id(full_name),
|
||||
skill:skill_id(name),
|
||||
changer:changed_by(full_name)
|
||||
`).order('created_at', { ascending: false }).limit(10),
|
||||
])
|
||||
setStats({
|
||||
members: members.count || 0,
|
||||
skills: skills.count || 0,
|
||||
categories: categories.count || 0,
|
||||
})
|
||||
setRecentChanges(history.data || [])
|
||||
|
||||
// Compétences les mieux notées (moyenne)
|
||||
const { data: levels } = await supabase
|
||||
.from('skill_levels')
|
||||
.select('skill_id, level, skill:skill_id(name)')
|
||||
if (levels) {
|
||||
const avgMap = {}
|
||||
levels.forEach((l) => {
|
||||
if (!avgMap[l.skill_id]) avgMap[l.skill_id] = { name: l.skill.name, total: 0, count: 0 }
|
||||
avgMap[l.skill_id].total += l.level
|
||||
avgMap[l.skill_id].count += 1
|
||||
})
|
||||
const sorted = Object.values(avgMap)
|
||||
.map((s) => ({ ...s, avg: (s.total / s.count).toFixed(1) }))
|
||||
.sort((a, b) => b.avg - a.avg)
|
||||
.slice(0, 5)
|
||||
setTopSkills(sorted)
|
||||
}
|
||||
}
|
||||
load()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-2xl font-bold">Tableau de bord</h1>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<Card>
|
||||
<CardHeader><CardTitle className="text-lg">Membres</CardTitle></CardHeader>
|
||||
<CardContent><p className="text-3xl font-bold">{stats.members}</p></CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader><CardTitle className="text-lg">Compétences</CardTitle></CardHeader>
|
||||
<CardContent><p className="text-3xl font-bold">{stats.skills}</p></CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader><CardTitle className="text-lg">Catégories</CardTitle></CardHeader>
|
||||
<CardContent><p className="text-3xl font-bold">{stats.categories}</p></CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader><CardTitle className="text-lg">Compétences les mieux notées</CardTitle></CardHeader>
|
||||
<CardContent>
|
||||
{topSkills.length === 0 ? (
|
||||
<p className="text-gray-500">Aucune évaluation pour le moment</p>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{topSkills.map((s) => (
|
||||
<li key={s.name} className="flex items-center justify-between">
|
||||
<span>{s.name}</span>
|
||||
<Badge>{s.avg}/4</Badge>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader><CardTitle className="text-lg">Dernières évolutions</CardTitle></CardHeader>
|
||||
<CardContent className="max-h-80 overflow-auto">
|
||||
{recentChanges.length === 0 ? (
|
||||
<p className="text-gray-500">Aucun changement récent</p>
|
||||
) : (
|
||||
<ul className="space-y-3">
|
||||
{recentChanges.map((c) => (
|
||||
<li key={c.id} className="text-sm border-b pb-2 last:border-0">
|
||||
<span className="font-medium">{c.member?.full_name}</span>
|
||||
{' '}a mis à jour{' '}
|
||||
<span className="font-medium">{c.skill?.name}</span>
|
||||
{' '}de <SkillLevelBadge level={c.old_level || 1} /> → <SkillLevelBadge level={c.new_level} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { supabase } from '@/lib/supabase'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { SkillLevelBadge } from '@/components/SkillLevelBadge'
|
||||
import { Input } from '@/components/ui/input'
|
||||
|
||||
export function History() {
|
||||
const [history, setHistory] = useState([])
|
||||
const [members, setMembers] = useState([])
|
||||
const [skills, setSkills] = useState([])
|
||||
const [filterMember, setFilterMember] = useState('all')
|
||||
const [filterSkill, setFilterSkill] = useState('all')
|
||||
|
||||
useEffect(() => {
|
||||
async function load() {
|
||||
const [memRes, skillRes] = await Promise.all([
|
||||
supabase.from('members').select('*').order('full_name'),
|
||||
supabase.from('skills').select('*').order('name'),
|
||||
])
|
||||
if (memRes.data) setMembers(memRes.data)
|
||||
if (skillRes.data) setSkills(skillRes.data)
|
||||
}
|
||||
load()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
async function loadHistory() {
|
||||
let query = supabase
|
||||
.from('skill_history')
|
||||
.select('*, member:member_id(full_name), skill:skill_id(name), changer:changed_by(full_name)')
|
||||
.order('created_at', { ascending: false })
|
||||
.limit(100)
|
||||
|
||||
if (filterMember !== 'all') query = query.eq('member_id', filterMember)
|
||||
if (filterSkill !== 'all') query = query.eq('skill_id', filterSkill)
|
||||
|
||||
const { data } = await query
|
||||
if (data) setHistory(data)
|
||||
}
|
||||
loadHistory()
|
||||
}, [filterMember, filterSkill])
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-2xl font-bold">Historique des évolutions</h1>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<select
|
||||
className="border rounded px-2 py-1 text-sm"
|
||||
value={filterMember}
|
||||
onChange={(e) => setFilterMember(e.target.value)}
|
||||
>
|
||||
<option value="all">Tous les membres</option>
|
||||
{members.map((m) => (
|
||||
<option key={m.id} value={m.id}>{m.full_name || m.email}</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
className="border rounded px-2 py-1 text-sm"
|
||||
value={filterSkill}
|
||||
onChange={(e) => setFilterSkill(e.target.value)}
|
||||
>
|
||||
<option value="all">Toutes les compétences</option>
|
||||
{skills.map((s) => (
|
||||
<option key={s.id} value={s.id}>{s.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
{history.length === 0 ? (
|
||||
<p className="p-6 text-gray-400">Aucun historique</p>
|
||||
) : (
|
||||
<ul className="divide-y">
|
||||
{history.map((h) => (
|
||||
<li key={h.id} className="p-4 flex items-center justify-between">
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm">
|
||||
<span className="font-medium">{h.member?.full_name}</span>
|
||||
{' → '}<span className="font-medium">{h.skill?.name}</span>
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
Par {h.changer?.full_name} — {new Date(h.created_at).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{h.old_level && <SkillLevelBadge level={h.old_level} />}
|
||||
{h.old_level && <span className="text-gray-400">→</span>}
|
||||
<SkillLevelBadge level={h.new_level} />
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import { useState } from 'react'
|
||||
import { useNavigate, Link } from 'react-router-dom'
|
||||
import { useAuth } from '@/context/AuthContext'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
|
||||
export function Login() {
|
||||
const [email, setEmail] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
const { signIn } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
const { error } = await signIn(email, password)
|
||||
if (error) {
|
||||
setError(error.message === 'Invalid login credentials'
|
||||
? 'Email ou mot de passe incorrect'
|
||||
: error.message)
|
||||
} else {
|
||||
navigate('/')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-100">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl text-center">Gestion des compétences</CardTitle>
|
||||
<p className="text-sm text-gray-500 text-center mt-1">
|
||||
Connectez-vous à votre compte
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Mot de passe"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
{error && <p className="text-sm text-red-600">{error}</p>}
|
||||
<Button type="submit" className="w-full">Se connecter</Button>
|
||||
</form>
|
||||
<p className="text-sm text-center mt-4 text-gray-500">
|
||||
Pas encore de compte ? <Link to="/register" className="text-blue-600 hover:underline">Créer un compte</Link>
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { supabase } from '@/lib/supabase'
|
||||
import { useAuth } from '@/context/AuthContext'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
|
||||
import { InviteUserModal } from '@/components/InviteUserModal'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
export function Members() {
|
||||
const { profile } = useAuth()
|
||||
const [members, setMembers] = useState([])
|
||||
const [editMember, setEditMember] = useState(null)
|
||||
const [editName, setEditName] = useState('')
|
||||
|
||||
useEffect(() => { load() }, [])
|
||||
|
||||
async function load() {
|
||||
const { data } = await supabase.from('members').select('*').order('created_at', { ascending: false })
|
||||
if (data) setMembers(data)
|
||||
}
|
||||
|
||||
async function updateMember() {
|
||||
await supabase.from('members').update({ full_name: editName }).eq('id', editMember.id)
|
||||
setEditMember(null)
|
||||
load()
|
||||
toast.success('Membre mis à jour')
|
||||
}
|
||||
|
||||
async function deleteMember(id) {
|
||||
if (!confirm('Supprimer ce membre ?')) return
|
||||
await supabase.from('members').delete().eq('id', id)
|
||||
load()
|
||||
toast.success('Membre supprimé')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold">Membres</h1>
|
||||
<InviteUserModal />
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Nom</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Rôle</TableHead>
|
||||
<TableHead>Inscrit le</TableHead>
|
||||
<TableHead className="w-32">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{members.map((m) => (
|
||||
<TableRow key={m.id}>
|
||||
<TableCell className="font-medium">{m.full_name || '—'}</TableCell>
|
||||
<TableCell>{m.email}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={m.role === 'admin' ? 'default' : 'secondary'}>
|
||||
{m.role === 'admin' ? 'Admin' : 'Membre'}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>{new Date(m.created_at).toLocaleDateString()}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex gap-1">
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button size="sm" variant="ghost" onClick={() => { setEditMember(m); setEditName(m.full_name) }}>✎</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader><DialogTitle>Modifier le membre</DialogTitle></DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<Input value={editName} onChange={(e) => setEditName(e.target.value)} />
|
||||
<Button onClick={updateMember}>Enregistrer</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
{m.id !== profile?.id && (
|
||||
<Button size="sm" variant="ghost" onClick={() => deleteMember(m.id)}>🗑</Button>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import { useState } from 'react'
|
||||
import { useAuth } from '@/context/AuthContext'
|
||||
import { supabase } from '@/lib/supabase'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
export function Profile() {
|
||||
const { profile, fetchProfile } = useAuth()
|
||||
const [name, setName] = useState(profile?.full_name || '')
|
||||
|
||||
async function handleSave() {
|
||||
const { error } = await supabase.from('members').update({ full_name: name }).eq('id', profile.id)
|
||||
if (error) {
|
||||
toast.error('Erreur lors de la mise à jour')
|
||||
} else {
|
||||
fetchProfile(profile.id)
|
||||
toast.success('Profil mis à jour')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-lg space-y-6">
|
||||
<h1 className="text-2xl font-bold">Mon profil</h1>
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Informations</CardTitle></CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<label className="text-sm text-gray-600">Email</label>
|
||||
<p className="font-medium">{profile?.email}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-gray-600">Rôle</label>
|
||||
<p className="font-medium capitalize">{profile?.role}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-gray-600">Nom complet</label>
|
||||
<Input value={name} onChange={(e) => setName(e.target.value)} />
|
||||
</div>
|
||||
<Button onClick={handleSave}>Enregistrer</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import { useState } from 'react'
|
||||
import { useNavigate, Link } from 'react-router-dom'
|
||||
import { supabase } from '@/lib/supabase'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
export function Register() {
|
||||
const [email, setEmail] = useState('')
|
||||
const [name, setName] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const navigate = useNavigate()
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault()
|
||||
setLoading(true)
|
||||
|
||||
const { error } = await supabase.auth.signUp({
|
||||
email,
|
||||
password,
|
||||
options: { data: { full_name: name } },
|
||||
})
|
||||
|
||||
if (error) {
|
||||
toast.error(error.message)
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
toast.success('Compte créé ! Vérifie ta boîte email pour confirmer.')
|
||||
navigate('/login')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-100">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl text-center">Créer un compte</CardTitle>
|
||||
<p className="text-sm text-gray-500 text-center mt-1">
|
||||
Inscris-toi pour rejoindre l'équipe
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<Input
|
||||
placeholder="Nom complet"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Mot de passe (min. 6 caractères)"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
minLength={6}
|
||||
/>
|
||||
<Button type="submit" className="w-full" disabled={loading}>
|
||||
{loading ? 'Création...' : 'Créer mon compte'}
|
||||
</Button>
|
||||
</form>
|
||||
<p className="text-sm text-center mt-4 text-gray-500">
|
||||
Déjà un compte ? <Link to="/login" className="text-blue-600 hover:underline">Se connecter</Link>
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,199 @@
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { supabase } from '@/lib/supabase'
|
||||
import { useAuth } from '@/context/AuthContext'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { SkillLevelBadge, SkillLevelSelect } from '@/components/SkillLevelBadge'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
export function SkillMatrix() {
|
||||
const { profile } = useAuth()
|
||||
const isAdmin = profile?.role === 'admin'
|
||||
const [categories, setCategories] = useState([])
|
||||
const [skills, setSkills] = useState([])
|
||||
const [members, setMembers] = useState([])
|
||||
const [levels, setLevels] = useState({})
|
||||
const [filterCat, setFilterCat] = useState('all')
|
||||
const [filterMember, setFilterMember] = useState('all')
|
||||
const [filterMinLevel, setFilterMinLevel] = useState(0)
|
||||
const [editing, setEditing] = useState(null)
|
||||
|
||||
useEffect(() => { load() }, [])
|
||||
|
||||
async function load() {
|
||||
const [catRes, skillRes, memberRes, levelRes] = await Promise.all([
|
||||
supabase.from('categories').select('*').order('name'),
|
||||
supabase.from('skills').select('*').order('name'),
|
||||
supabase.from('members').select('*').order('full_name'),
|
||||
supabase.from('skill_levels').select('*'),
|
||||
])
|
||||
if (catRes.data) setCategories(catRes.data)
|
||||
if (skillRes.data) setSkills(skillRes.data)
|
||||
if (memberRes.data) setMembers(memberRes.data)
|
||||
if (levelRes.data) {
|
||||
const map = {}
|
||||
levelRes.data.forEach((l) => {
|
||||
map[`${l.member_id}-${l.skill_id}`] = l
|
||||
})
|
||||
setLevels(map)
|
||||
}
|
||||
}
|
||||
|
||||
const filteredSkills = filterCat === 'all'
|
||||
? skills
|
||||
: skills.filter((s) => s.category_id === filterCat)
|
||||
|
||||
const filteredMembers = filterMember === 'all'
|
||||
? members
|
||||
: members.filter((m) => m.id === filterMember)
|
||||
|
||||
const filteredByLevel = filteredMembers.filter((m) => {
|
||||
if (filterMinLevel === 0) return true
|
||||
return filteredSkills.some((s) => {
|
||||
const key = `${m.id}-${s.id}`
|
||||
return (levels[key]?.level || 0) >= filterMinLevel
|
||||
})
|
||||
})
|
||||
|
||||
async function updateLevel(memberId, skillId, newLevel) {
|
||||
const key = `${memberId}-${skillId}`
|
||||
const existing = levels[key]
|
||||
const oldLevel = existing?.level
|
||||
|
||||
if (existing) {
|
||||
await supabase.from('skill_levels').update({ level: newLevel }).eq('id', existing.id)
|
||||
} else {
|
||||
await supabase.from('skill_levels').insert({ member_id: memberId, skill_id: skillId, level: newLevel })
|
||||
}
|
||||
|
||||
// Historique
|
||||
if (oldLevel !== newLevel) {
|
||||
await supabase.from('skill_history').insert({
|
||||
member_id: memberId,
|
||||
skill_id: skillId,
|
||||
old_level: oldLevel || null,
|
||||
new_level: newLevel,
|
||||
changed_by: profile.id,
|
||||
})
|
||||
}
|
||||
|
||||
load()
|
||||
setEditing(null)
|
||||
toast.success('Niveau mis à jour')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-2xl font-bold">Matrice des compétences</h1>
|
||||
|
||||
<div className="flex gap-4 flex-wrap">
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm text-gray-600">Catégorie :</label>
|
||||
<select
|
||||
className="border rounded px-2 py-1 text-sm"
|
||||
value={filterCat}
|
||||
onChange={(e) => setFilterCat(e.target.value)}
|
||||
>
|
||||
<option value="all">Toutes</option>
|
||||
{categories.map((c) => (
|
||||
<option key={c.id} value={c.id}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm text-gray-600">Membre :</label>
|
||||
<select
|
||||
className="border rounded px-2 py-1 text-sm"
|
||||
value={filterMember}
|
||||
onChange={(e) => setFilterMember(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">Niveau min. :</label>
|
||||
<select
|
||||
className="border rounded px-2 py-1 text-sm"
|
||||
value={filterMinLevel}
|
||||
onChange={(e) => setFilterMinLevel(Number(e.target.value))}
|
||||
>
|
||||
<option value={0}>Aucun</option>
|
||||
{[1, 2, 3, 4].map((l) => <option key={l} value={l}>{l}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-left p-2 bg-gray-100 border sticky left-0 z-10 min-w-[180px]">Membre</th>
|
||||
{filteredSkills.map((s) => (
|
||||
<th key={s.id} className="p-2 bg-gray-100 border text-sm text-center min-w-[120px]">{s.name}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredByLevel.length === 0 && (
|
||||
<tr><td colSpan={filteredSkills.length + 1} className="p-8 text-center text-gray-400">Aucun résultat</td></tr>
|
||||
)}
|
||||
{filteredByLevel.map((m) => (
|
||||
<tr key={m.id} className="hover:bg-gray-50">
|
||||
<td className="p-2 border font-medium sticky left-0 bg-white">
|
||||
<span className="text-sm">{m.full_name || m.email}</span>
|
||||
</td>
|
||||
{filteredSkills.map((s) => {
|
||||
const key = `${m.id}-${s.id}`
|
||||
const level = levels[key]
|
||||
const isEditing = editing === key
|
||||
return (
|
||||
<td key={s.id} className="p-2 border text-center">
|
||||
{isEditing && isAdmin ? (
|
||||
<SkillLevelSelect
|
||||
value={level?.level || 1}
|
||||
onChange={(v) => updateLevel(m.id, s.id, v)}
|
||||
/>
|
||||
) : (
|
||||
level ? (
|
||||
<SkillLevelBadge
|
||||
level={level.level}
|
||||
onClick={() => isAdmin && setEditing(key)}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
className="text-gray-300 text-sm cursor-pointer"
|
||||
onClick={() => isAdmin && setEditing(key)}
|
||||
>
|
||||
—
|
||||
</span>
|
||||
)
|
||||
)}
|
||||
{isEditing && isAdmin && (
|
||||
<button
|
||||
className="ml-1 text-xs text-red-500"
|
||||
onClick={() => setEditing(null)}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
)
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 text-sm text-gray-500">
|
||||
<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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { supabase } from '@/lib/supabase'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
export function Skills() {
|
||||
const [categories, setCategories] = useState([])
|
||||
const [skills, setSkills] = useState([])
|
||||
const [newCatName, setNewCatName] = useState('')
|
||||
const [newCatColor, setNewCatColor] = useState('#3b82f6')
|
||||
const [editCat, setEditCat] = useState(null)
|
||||
const [newSkill, setNewSkill] = useState({ name: '', category_id: '' })
|
||||
const [catDialogOpen, setCatDialogOpen] = useState(false)
|
||||
const [skillDialogOpen, setSkillDialogOpen] = useState(false)
|
||||
|
||||
useEffect(() => { load() }, [])
|
||||
|
||||
async function load() {
|
||||
const [catRes, skillRes] = await Promise.all([
|
||||
supabase.from('categories').select('*').order('name'),
|
||||
supabase.from('skills').select('*, category:category_id(name)').order('name'),
|
||||
])
|
||||
if (catRes.data) setCategories(catRes.data)
|
||||
if (skillRes.data) setSkills(skillRes.data)
|
||||
}
|
||||
|
||||
async function saveCategory() {
|
||||
if (editCat) {
|
||||
await supabase.from('categories').update({ name: newCatName, color: newCatColor }).eq('id', editCat)
|
||||
} else {
|
||||
await supabase.from('categories').insert({ name: newCatName, color: newCatColor })
|
||||
}
|
||||
setCatDialogOpen(false)
|
||||
setEditCat(null)
|
||||
setNewCatName('')
|
||||
load()
|
||||
toast.success('Catégorie enregistrée')
|
||||
}
|
||||
|
||||
async function deleteCategory(id) {
|
||||
const { error } = await supabase.from('categories').delete().eq('id', id)
|
||||
if (error) toast.error(error.message)
|
||||
else { load(); toast.success('Catégorie supprimée') }
|
||||
}
|
||||
|
||||
async function saveSkill() {
|
||||
await supabase.from('skills').insert({ name: newSkill.name, category_id: newSkill.category_id })
|
||||
setSkillDialogOpen(false)
|
||||
setNewSkill({ name: '', category_id: '' })
|
||||
load()
|
||||
toast.success('Compétence ajoutée')
|
||||
}
|
||||
|
||||
async function deleteSkill(id) {
|
||||
await supabase.from('skills').delete().eq('id', id)
|
||||
load()
|
||||
toast.success('Compétence supprimée')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold">Compétences</h1>
|
||||
<div className="flex gap-2">
|
||||
<Dialog open={skillDialogOpen} onOpenChange={setSkillDialogOpen}>
|
||||
<DialogTrigger asChild><Button>+ Compétence</Button></DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader><DialogTitle>Nouvelle compétence</DialogTitle></DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<Input placeholder="Nom" value={newSkill.name} onChange={(e) => setNewSkill({ ...newSkill, name: e.target.value })} />
|
||||
<select
|
||||
className="w-full border rounded-md px-3 py-2"
|
||||
value={newSkill.category_id}
|
||||
onChange={(e) => setNewSkill({ ...newSkill, category_id: e.target.value })}
|
||||
>
|
||||
<option value="">Choisir une catégorie</option>
|
||||
{categories.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
|
||||
</select>
|
||||
<Button onClick={saveSkill}>Ajouter</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={catDialogOpen} onOpenChange={(o) => { setCatDialogOpen(o); if (!o) setEditCat(null) }}>
|
||||
<DialogTrigger asChild><Button variant="outline">+ Catégorie</Button></DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader><DialogTitle>{editCat ? 'Modifier' : 'Nouvelle'} catégorie</DialogTitle></DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<Input placeholder="Nom" value={newCatName} onChange={(e) => setNewCatName(e.target.value)} />
|
||||
<Input type="color" value={newCatColor} onChange={(e) => setNewCatColor(e.target.value)} />
|
||||
<Button onClick={saveCategory}>{editCat ? 'Modifier' : 'Créer'}</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{categories.map((cat) => {
|
||||
const catSkills = skills.filter((s) => s.category_id === cat.id)
|
||||
return (
|
||||
<Card key={cat.id}>
|
||||
<CardHeader className="flex flex-row items-center justify-between py-3">
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<span className="w-3 h-3 rounded-full" style={{ backgroundColor: cat.color }} />
|
||||
{cat.name}
|
||||
<Badge variant="secondary" className="ml-2">{catSkills.length}</Badge>
|
||||
</CardTitle>
|
||||
<div className="flex gap-1">
|
||||
<Button size="sm" variant="ghost" onClick={() => {
|
||||
setEditCat(cat.id)
|
||||
setNewCatName(cat.name)
|
||||
setNewCatColor(cat.color)
|
||||
setCatDialogOpen(true)
|
||||
}}>✎</Button>
|
||||
<Button size="sm" variant="ghost" onClick={() => deleteCategory(cat.id)}>🗑</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{catSkills.length === 0 ? (
|
||||
<p className="text-sm text-gray-400">Aucune compétence dans cette catégorie</p>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{catSkills.map((s) => (
|
||||
<Badge key={s.id} variant="outline" className="pr-1">
|
||||
{s.name}
|
||||
<button className="ml-1 text-gray-400 hover:text-red-500" onClick={() => deleteSkill(s.id)}>×</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user