106 lines
3.1 KiB
TypeScript
106 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import {
|
|
Card,
|
|
CardHeader,
|
|
CardTitle,
|
|
CardDescription,
|
|
CardContent,
|
|
Button,
|
|
Input,
|
|
ParticipantInput,
|
|
} from '@/components/ui';
|
|
import { createMotivatorSession } from '@/actions/moving-motivators';
|
|
|
|
export default function NewMotivatorSessionPage() {
|
|
const router = useRouter();
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
|
e.preventDefault();
|
|
setError(null);
|
|
setLoading(true);
|
|
|
|
const formData = new FormData(e.currentTarget);
|
|
const title = formData.get('title') as string;
|
|
const participant = formData.get('participant') as string;
|
|
|
|
if (!title || !participant) {
|
|
setError('Veuillez remplir tous les champs');
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
const result = await createMotivatorSession({ title, participant });
|
|
|
|
if (!result.success) {
|
|
setError(result.error || 'Une erreur est survenue');
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
router.push(`/motivators/${result.data?.id}`);
|
|
}
|
|
|
|
return (
|
|
<main className="mx-auto max-w-2xl px-4 py-8">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<span>🎯</span>
|
|
Nouvelle Session Moving Motivators
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Créez une session pour explorer les motivations intrinsèques d'un collaborateur
|
|
</CardDescription>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
{error && (
|
|
<div className="rounded-lg border border-destructive/20 bg-destructive/10 p-3 text-sm text-destructive">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<Input
|
|
label="Titre de la session"
|
|
name="title"
|
|
placeholder="Ex: Entretien motivation Q1 2025"
|
|
required
|
|
/>
|
|
|
|
<ParticipantInput name="participant" required />
|
|
|
|
<div className="rounded-lg border border-border bg-card-hover p-4">
|
|
<h3 className="font-medium text-foreground mb-2">Comment ça marche ?</h3>
|
|
<ol className="text-sm text-muted space-y-1 list-decimal list-inside">
|
|
<li>Classez les 10 cartes de motivation par ordre d'importance</li>
|
|
<li>Évaluez l'influence positive ou négative de chaque motivation</li>
|
|
<li>Découvrez le récapitulatif des motivations clés</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div className="flex gap-3 pt-4">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => router.back()}
|
|
disabled={loading}
|
|
>
|
|
Annuler
|
|
</Button>
|
|
<Button type="submit" loading={loading} className="flex-1">
|
|
Créer la session
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</main>
|
|
);
|
|
}
|