feat: implement Weather Workshop feature with models, UI components, and session management for enhanced team visibility and personal well-being tracking

src/app/weather/new/page.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  Button,
+  Input,
+} from '@/components/ui';
+import { createWeatherSession } from '@/actions/weather';
+import { getWeekYearLabel } from '@/lib/date-utils';
+
+export default function NewWeatherPage() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
+  const [title, setTitle] = useState('');
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    const formData = new FormData(e.currentTarget);
+    const dateStr = formData.get('date') as string;
+    const date = dateStr ? new Date(dateStr) : undefined;
+
+    if (!title) {
+      setError('Veuillez remplir le titre');
+      setLoading(false);
+      return;
+    }
+
+    const result = await createWeatherSession({ title, date });
+
+    if (!result.success) {
+      setError(result.error || 'Une erreur est survenue');
+      setLoading(false);
+      return;
+    }
+
+    router.push(`/weather/${result.data?.id}`);
+  }
+
+  // Default date to today
+  const today = new Date().toISOString().split('T')[0];
+
+  // Update title when date changes
+  useEffect(() => {
+    setTitle(getWeekYearLabel(new Date(selectedDate)));
+  }, [selectedDate]);
+
+  return (
+    <main className="mx-auto max-w-2xl px-4 py-8">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <span>🌤️</span>
+            Nouvelle Météo
+          </CardTitle>
+          <CardDescription>
+            Créez une météo personnelle pour faire le point sur 4 axes clés et partagez-la avec votre équipe
+          </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 météo"
+              name="title"
+              placeholder="Ex: Météo S05 - 2026"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              required
+            />
+
+            <div>
+              <label htmlFor="date" className="block text-sm font-medium text-foreground mb-1">
+                Date de la météo
+              </label>
+              <input
+                id="date"
+                name="date"
+                type="date"
+                defaultValue={today}
+                onChange={(e) => setSelectedDate(e.target.value)}
+                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>Performance</strong> : Comment évaluez-vous votre performance personnelle ?
+                </li>
+                <li>
+                  <strong>Moral</strong> : Quel est votre moral actuel ?
+                </li>
+                <li>
+                  <strong>Flux</strong> : Comment se passe votre flux de travail personnel ?
+                </li>
+                <li>
+                  <strong>Création de valeur</strong> : Comment évaluez-vous votre création de valeur ?
+                </li>
+              </ol>
+              <p className="text-sm text-muted mt-2">
+                💡 <strong>Astuce</strong> : Partagez votre météo avec votre équipe pour qu&apos;ils puissent voir votre état. Chaque membre peut créer sa propre météo et la partager !
+              </p>
+            </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 météo
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}