143 lines
4.4 KiB
TypeScript
143 lines
4.4 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import {
|
|
Card,
|
|
CardHeader,
|
|
CardTitle,
|
|
CardDescription,
|
|
CardContent,
|
|
Button,
|
|
Input,
|
|
} from '@/components/ui';
|
|
import { createYearReviewSession } from '@/actions/year-review';
|
|
|
|
export default function NewYearReviewPage() {
|
|
const router = useRouter();
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const currentYear = new Date().getFullYear();
|
|
|
|
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;
|
|
const year = parseInt(formData.get('year') as string, 10);
|
|
|
|
if (!title || !participant || !year) {
|
|
setError('Veuillez remplir tous les champs');
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
const result = await createYearReviewSession({ title, participant, year });
|
|
|
|
if (!result.success) {
|
|
setError(result.error || 'Une erreur est survenue');
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
router.push(`/year-review/${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>
|
|
Nouveau Bilan Annuel
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Créez un bilan de l'année pour faire le point sur les réalisations, défis,
|
|
apprentissages et objectifs
|
|
</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 du bilan"
|
|
name="title"
|
|
placeholder={`Ex: Bilan annuel ${currentYear}`}
|
|
required
|
|
/>
|
|
|
|
<Input
|
|
label="Nom du participant"
|
|
name="participant"
|
|
placeholder="Ex: Jean Dupont"
|
|
required
|
|
/>
|
|
|
|
<div>
|
|
<label htmlFor="year" className="block text-sm font-medium text-foreground mb-1">
|
|
Année du bilan
|
|
</label>
|
|
<input
|
|
id="year"
|
|
name="year"
|
|
type="number"
|
|
min="2000"
|
|
max="2100"
|
|
defaultValue={currentYear}
|
|
required
|
|
className="w-full rounded-lg border border-border bg-input px-3 py-2 text-foreground outline-none focus:border-primary focus:ring-2 focus:ring-primary/20"
|
|
/>
|
|
</div>
|
|
|
|
<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>
|
|
<strong>Réalisations</strong> : Notez ce que vous avez accompli cette année
|
|
</li>
|
|
<li>
|
|
<strong>Défis</strong> : Identifiez les difficultés rencontrées
|
|
</li>
|
|
<li>
|
|
<strong>Apprentissages</strong> : Listez ce que vous avez appris et développé
|
|
</li>
|
|
<li>
|
|
<strong>Objectifs</strong> : Définissez vos objectifs pour l'année prochaine
|
|
</li>
|
|
<li>
|
|
<strong>Moments</strong> : Partagez les moments forts et marquants
|
|
</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 le bilan
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</main>
|
|
);
|
|
}
|
|
|