continued the kita-planer

src/app/dashboard/families/add-family-dialog.tsx

@@ -25,6 +25,7 @@ const initialState: AddFamilyState = {};
 // Verwaltet:
 //   • Dialog-Open/Close-State
 //   • Dynamische Kinderliste (min. 1, max. 10)
+//   • Ein oder zwei Elternteile pro Haushalt
 //   • useActionState → Server-Action-Fehler anzeigen
 //   • Bei Erfolg (state.success) Dialog automatisch schließen
 // =====================================================================
@@ -62,8 +63,8 @@ export function AddFamilyDialog() {
         <DialogHeader>
           <DialogTitle>Familie hinzufügen</DialogTitle>
           <DialogDescription>
-            Lege das Elternteil und die zugehörigen Kinder an. Der Elternteil
-            erhält einen Einladungslink per E-Mail, um sein Passwort zu setzen.
+            Lege einen Haushalt mit Elternteilen und Kindern an. Die
+            Elternteile erhalten Einladungslinks per E-Mail.
           </DialogDescription>
         </DialogHeader>
 
@@ -71,34 +72,77 @@ export function AddFamilyDialog() {
           {/* Anzahl Kinder als verstecktes Feld für die Server Action */}
           <input type="hidden" name="childCount" value={childCount} />
 
-          {/* ── Elternteil ─────────────────────────────────────────── */}
+          <FormField
+            id="familyName"
+            name="familyName"
+            label="Familienname"
+            placeholder="Familie Schmidt"
+            error={state.errors?.familyName?.[0]}
+          />
+
+          {/* ── Elternteile ────────────────────────────────────────── */}
           <fieldset className="space-y-4">
-            <legend className="text-sm font-semibold">Elternteil</legend>
+            <legend className="text-sm font-semibold">Elternteil 1</legend>
 
             <div className="grid grid-cols-2 gap-3">
               <FormField
-                id="firstName"
-                name="firstName"
+                id="parent1FirstName"
+                name="parent1FirstName"
                 label="Vorname"
                 autoComplete="given-name"
-                error={state.errors?.firstName?.[0]}
+                error={state.errors?.parent1FirstName?.[0]}
               />
               <FormField
-                id="lastName"
-                name="lastName"
+                id="parent1LastName"
+                name="parent1LastName"
                 label="Nachname"
                 autoComplete="family-name"
-                error={state.errors?.lastName?.[0]}
+                error={state.errors?.parent1LastName?.[0]}
               />
             </div>
 
             <FormField
-              id="email"
-              name="email"
+              id="parent1Email"
+              name="parent1Email"
               type="email"
               label="E-Mail-Adresse"
               autoComplete="email"
-              error={state.errors?.email?.[0]}
+              error={state.errors?.parent1Email?.[0]}
+            />
+          </fieldset>
+
+          <fieldset className="space-y-4">
+            <legend className="text-sm font-semibold">
+              Elternteil 2 <span className="font-normal text-muted-foreground">(optional)</span>
+            </legend>
+
+            <div className="grid grid-cols-2 gap-3">
+              <FormField
+                id="parent2FirstName"
+                name="parent2FirstName"
+                label="Vorname"
+                autoComplete="given-name"
+                required={false}
+                error={state.errors?.parent2FirstName?.[0]}
+              />
+              <FormField
+                id="parent2LastName"
+                name="parent2LastName"
+                label="Nachname"
+                autoComplete="family-name"
+                required={false}
+                error={state.errors?.parent2LastName?.[0]}
+              />
+            </div>
+
+            <FormField
+              id="parent2Email"
+              name="parent2Email"
+              type="email"
+              label="E-Mail-Adresse"
+              autoComplete="email"
+              required={false}
+              error={state.errors?.parent2Email?.[0]}
             />
           </fieldset>
 
@@ -199,6 +243,8 @@ function FormField({
   label,
   type = "text",
   autoComplete,
+  placeholder,
+  required = true,
   error,
 }: {
   id: string;
@@ -206,6 +252,8 @@ function FormField({
   label: string;
   type?: string;
   autoComplete?: string;
+  placeholder?: string;
+  required?: boolean;
   error?: string;
 }) {
   return (
@@ -216,7 +264,8 @@ function FormField({
         name={name}
         type={type}
         autoComplete={autoComplete}
-        required
+        placeholder={placeholder}
+        required={required}
         aria-invalid={!!error}
       />
       {error && <p className="text-xs text-destructive">{error}</p>}