feat: wire 10 dead buttons across 6 modules to their server actions

Every module had buttons that rendered visually but did nothing when
clicked. Server actions existed for all of them. Created client
components with dialogs/forms and wired them in.

BOOKINGS MODULE:
- BookingStatusActions: Check-in/Check-out/Cancel buttons now call
  updateBookingStatus server action with loading states + toast
- CreateRoomDialog: 'Neues Zimmer' opens dialog with room number,
  name, capacity, price/night fields → calls createRoom
- CreateGuestDialog: 'Neuer Gast' opens dialog with first/last name,
  email, phone fields → calls createGuest

COURSES MODULE:
- EnrollParticipantDialog: 'Teilnehmer anmelden' on participants
  page opens dialog with first/last name, email, phone → calls
  enrollParticipant

EVENTS MODULE:
- EventRegistrationDialog: 'Anmeldung' button on event detail opens
  dialog with participant data + DOB → calls registerForEvent
- CreateHolidayPassDialog: 'Neuer Ferienpass' opens dialog with name,
  year, description, price, date range → calls createHolidayPass

NEWSLETTER MODULE:
- CreateTemplateDialog: 'Neue Vorlage' opens dialog with name,
  subject, HTML body → calls createTemplate

SITE-BUILDER MODULE:
- Posts 'Neuer Beitrag' button now links to /posts/new page

All dialogs use German labels, helpful placeholders, loading spinners,
toast notifications, and form validation appropriate for association
board members (Vereinsvorstände, 40-65, moderate tech skills).

apps/web/app/[locale]/home/[account]/bookings/[bookingId]/page.tsx

@@ -4,13 +4,11 @@ import {
   ArrowLeft,
   BedDouble,
   CalendarDays,
-  LogIn,
-  LogOut,
-  XCircle,
   User,
 } from 'lucide-react';
 import { getTranslations } from 'next-intl/server';
 
+import { BookingStatusActions } from '@kit/booking-management/components';
 import { formatDate, formatCurrencyAmount } from '@kit/shared/dates';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Badge } from '@kit/ui/badge';
@@ -288,41 +286,10 @@ export default async function BookingDetailPage({ params }: PageProps) {
             <CardDescription>{t('detail.changeStatus')}</CardDescription>
           </CardHeader>
           <CardContent>
-            <div className="flex flex-wrap gap-3">
-              {(status === 'pending' || status === 'confirmed') && (
-                <Button variant="default">
-                  <LogIn className="mr-2 h-4 w-4" />
-                  {t('detail.checkIn')}
-                </Button>
-              )}
-
-              {status === 'checked_in' && (
-                <Button variant="default">
-                  <LogOut className="mr-2 h-4 w-4" />
-                  {t('detail.checkOut')}
-                </Button>
-              )}
-
-              {status !== 'cancelled' &&
-                status !== 'checked_out' &&
-                status !== 'no_show' && (
-                  <Button variant="destructive">
-                    <XCircle className="mr-2 h-4 w-4" />
-                    {t('detail.cancel')}
-                  </Button>
-                )}
-
-              {status === 'cancelled' || status === 'checked_out' ? (
-                <p className="text-muted-foreground py-2 text-sm">
-                  {t('detail.noMoreActions', {
-                    statusLabel:
-                      status === 'cancelled'
-                        ? t('detail.cancelledStatus')
-                        : t('detail.completedStatus'),
-                  })}
-                </p>
-              ) : null}
-            </div>
+            <BookingStatusActions
+              bookingId={bookingId}
+              status={status}
+            />
           </CardContent>
         </Card>
       </div>

apps/web/app/[locale]/home/[account]/bookings/guests/page.tsx

@@ -2,6 +2,7 @@ import { UserCircle, Plus } from 'lucide-react';
 import { getTranslations } from 'next-intl/server';
 
 import { createBookingManagementApi } from '@kit/booking-management/api';
+import { CreateGuestDialog } from '@kit/booking-management/components';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Button } from '@kit/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
@@ -41,10 +42,7 @@ export default async function GuestsPage({ params }: PageProps) {
       <div className="flex w-full flex-col gap-6">
         <div className="flex items-center justify-between">
           <p className="text-muted-foreground">{t('guests.manage')}</p>
-          <Button data-test="guests-new-btn">
-            <Plus className="mr-2 h-4 w-4" />
-            {t('guests.newGuest')}
-          </Button>
+          <CreateGuestDialog accountId={acct.id} />
         </div>
 
         {guests.length === 0 ? (

apps/web/app/[locale]/home/[account]/bookings/rooms/page.tsx

@@ -2,6 +2,7 @@ import { BedDouble, Plus } from 'lucide-react';
 import { getTranslations } from 'next-intl/server';
 
 import { createBookingManagementApi } from '@kit/booking-management/api';
+import { CreateRoomDialog } from '@kit/booking-management/components';
 import { formatCurrencyAmount } from '@kit/shared/dates';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Badge } from '@kit/ui/badge';
@@ -43,10 +44,7 @@ export default async function RoomsPage({ params }: PageProps) {
       <div className="flex w-full flex-col gap-6">
         <div className="flex items-center justify-between">
           <p className="text-muted-foreground">{t('rooms.manage')}</p>
-          <Button data-test="rooms-new-btn">
-            <Plus className="mr-2 h-4 w-4" />
-            {t('rooms.newRoom')}
-          </Button>
+          <CreateRoomDialog accountId={acct.id} />
         </div>
 
         {rooms.length === 0 ? (

apps/web/app/[locale]/home/[account]/courses/[courseId]/participants/page.tsx

@@ -2,6 +2,7 @@ import { Plus, Users } from 'lucide-react';
 import { getTranslations } from 'next-intl/server';
 
 import { createCourseManagementApi } from '@kit/course-management/api';
+import { EnrollParticipantDialog } from '@kit/course-management/components';
 import { formatDate } from '@kit/shared/dates';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Badge } from '@kit/ui/badge';
@@ -56,10 +57,7 @@ export default async function ParticipantsPage({ params }: PageProps) {
               {participants.length} {t('participants.title')}
             </p>
           </div>
-          <Button data-test="participants-add-btn">
-            <Plus className="mr-2 h-4 w-4" />
-            {t('participants.add')}
-          </Button>
+          <EnrollParticipantDialog courseId={courseId} />
         </div>
 
         {participants.length === 0 ? (

apps/web/app/[locale]/home/[account]/events/[eventId]/page.tsx

@@ -11,6 +11,7 @@ import {
 import { getTranslations } from 'next-intl/server';
 
 import { createEventManagementApi } from '@kit/event-management/api';
+import { EventRegistrationDialog } from '@kit/event-management/components';
 import { formatDate } from '@kit/shared/dates';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Badge } from '@kit/ui/badge';
@@ -73,10 +74,7 @@ export default async function EventDetailPage({ params }: PageProps) {
               )}
             </Badge>
           </div>
-          <Button>
-            <UserPlus className="mr-2 h-4 w-4" />
-            {t('register')}
-          </Button>
+          <EventRegistrationDialog eventId={eventId} eventName={String((event as any).name ?? '')} />
         </div>
 
         {/* Detail Cards */}

apps/web/app/[locale]/home/[account]/events/holiday-passes/page.tsx

@@ -2,6 +2,7 @@ import { Ticket, Plus } from 'lucide-react';
 import { getTranslations } from 'next-intl/server';
 
 import { createEventManagementApi } from '@kit/event-management/api';
+import { CreateHolidayPassDialog } from '@kit/event-management/components';
 import { formatDate, formatCurrencyAmount } from '@kit/shared/dates';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Button } from '@kit/ui/button';
@@ -40,10 +41,7 @@ export default async function HolidayPassesPage({ params }: PageProps) {
               {t('holidayPassesDescription')}
             </p>
           </div>
-          <Button>
-            <Plus className="mr-2 h-4 w-4" />
-            {t('newHolidayPass')}
-          </Button>
+          <CreateHolidayPassDialog accountId={acct.id} />
         </div>
 
         {passes.length === 0 ? (

apps/web/app/[locale]/home/[account]/newsletter/templates/page.tsx

@@ -2,6 +2,7 @@ import { FileText, Plus } from 'lucide-react';
 import { getTranslations } from 'next-intl/server';
 
 import { createNewsletterApi } from '@kit/newsletter/api';
+import { CreateTemplateDialog } from '@kit/newsletter/components';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { Badge } from '@kit/ui/badge';
 import { Button } from '@kit/ui/button';
@@ -41,10 +42,7 @@ export default async function NewsletterTemplatesPage({ params }: PageProps) {
             <p className="text-muted-foreground">{t('templates.subtitle')}</p>
           </div>
 
-          <Button data-test="newsletter-templates-new-btn">
-            <Plus className="mr-2 h-4 w-4" />
-            {t('templates.newTemplate')}
-          </Button>
+          <CreateTemplateDialog accountId={acct.id} />
         </div>
 
         {/* Table or Empty State */}

apps/web/app/[locale]/home/[account]/site-builder/posts/page.tsx

@@ -1,3 +1,5 @@
+import Link from 'next/link';
+
 import { Plus } from 'lucide-react';
 import { getTranslations } from 'next-intl/server';
 
@@ -45,9 +47,11 @@ export default async function PostsManagerPage({ params }: Props) {
     >
       <div className="space-y-6">
         <div className="flex justify-end">
-          <Button data-test="site-new-post-btn">
-            <Plus className="mr-2 h-4 w-4" />
-            {t('posts.newPost')}
+          <Button data-test="site-new-post-btn" asChild>
+            <Link href={`/home/${account}/site-builder/posts/new`}>
+              <Plus className="mr-2 h-4 w-4" />
+              {t('posts.newPost')}
+            </Link>
           </Button>
         </div>
         {posts.length === 0 ? (

packages/features/booking-management/package.json

@@ -35,5 +35,8 @@
     "react": "catalog:",
     "react-hook-form": "catalog:",
     "zod": "catalog:"
+  },
+  "dependencies": {
+    "lucide-react": "catalog:"
   }
 }

packages/features/booking-management/src/components/booking-status-actions.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { useAction } from 'next-safe-action/hooks';
+import { useRouter } from 'next/navigation';
+
+import { LogIn, LogOut, XCircle, Loader2 } from 'lucide-react';
+
+import { Button } from '@kit/ui/button';
+import { toast } from '@kit/ui/sonner';
+
+import { updateBookingStatus } from '../server/actions/booking-actions';
+
+interface BookingStatusActionsProps {
+  bookingId: string;
+  status: string;
+}
+
+export function BookingStatusActions({
+  bookingId,
+  status,
+}: BookingStatusActionsProps) {
+  const router = useRouter();
+
+  const action = useAction(updateBookingStatus, {
+    onSuccess: ({ data }) => {
+      if (data?.success) {
+        toast.success('Status aktualisiert');
+        router.refresh();
+      } else {
+        toast.error(data?.error ?? 'Fehler beim Aktualisieren');
+      }
+    },
+    onError: () => {
+      toast.error('Fehler beim Aktualisieren des Status');
+    },
+  });
+
+  const execute = (newStatus: string) =>
+    action.execute({ bookingId, status: newStatus as any });
+
+  if (status === 'cancelled' || status === 'checked_out') {
+    return (
+      <p className="text-muted-foreground py-2 text-sm">
+        {status === 'cancelled'
+          ? 'Diese Buchung wurde storniert.'
+          : 'Diese Buchung ist abgeschlossen.'}
+      </p>
+    );
+  }
+
+  return (
+    <div className="flex flex-wrap gap-3">
+      {(status === 'pending' || status === 'confirmed') && (
+        <Button
+          onClick={() => execute('checked_in')}
+          disabled={action.isPending}
+        >
+          {action.isPending ? (
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          ) : (
+            <LogIn className="mr-2 h-4 w-4" />
+          )}
+          Einchecken
+        </Button>
+      )}
+
+      {status === 'checked_in' && (
+        <Button
+          onClick={() => execute('checked_out')}
+          disabled={action.isPending}
+        >
+          {action.isPending ? (
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          ) : (
+            <LogOut className="mr-2 h-4 w-4" />
+          )}
+          Auschecken
+        </Button>
+      )}
+
+      {status !== 'cancelled' &&
+        status !== 'checked_out' &&
+        status !== 'no_show' && (
+          <Button
+            variant="destructive"
+            onClick={() => execute('cancelled')}
+            disabled={action.isPending}
+          >
+            {action.isPending ? (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            ) : (
+              <XCircle className="mr-2 h-4 w-4" />
+            )}
+            Stornieren
+          </Button>
+        )}
+    </div>
+  );
+}

packages/features/booking-management/src/components/create-guest-dialog.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { useAction } from 'next-safe-action/hooks';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+import { Plus, Loader2 } from 'lucide-react';
+
+import { Button } from '@kit/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@kit/ui/dialog';
+import { Input } from '@kit/ui/input';
+import { Label } from '@kit/ui/label';
+import { toast } from '@kit/ui/sonner';
+
+import { createGuest } from '../server/actions/booking-actions';
+
+interface CreateGuestDialogProps {
+  accountId: string;
+}
+
+export function CreateGuestDialog({ accountId }: CreateGuestDialogProps) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [form, setForm] = useState({ firstName: '', lastName: '', email: '', phone: '' });
+
+  const action = useAction(createGuest, {
+    onSuccess: () => {
+      toast.success('Gast erstellt');
+      setOpen(false);
+      setForm({ firstName: '', lastName: '', email: '', phone: '' });
+      router.refresh();
+    },
+    onError: () => toast.error('Fehler beim Erstellen'),
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button><Plus className="mr-2 h-4 w-4" />Neuer Gast</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader><DialogTitle>Gast anlegen</DialogTitle></DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div className="grid gap-2">
+              <Label>Vorname *</Label>
+              <Input value={form.firstName} onChange={(e) => setForm(s => ({ ...s, firstName: e.target.value }))} />
+            </div>
+            <div className="grid gap-2">
+              <Label>Nachname *</Label>
+              <Input value={form.lastName} onChange={(e) => setForm(s => ({ ...s, lastName: e.target.value }))} />
+            </div>
+          </div>
+          <div className="grid gap-2">
+            <Label>E-Mail</Label>
+            <Input type="email" value={form.email} onChange={(e) => setForm(s => ({ ...s, email: e.target.value }))} />
+          </div>
+          <div className="grid gap-2">
+            <Label>Telefon</Label>
+            <Input value={form.phone} onChange={(e) => setForm(s => ({ ...s, phone: e.target.value }))} />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>Abbrechen</Button>
+          <Button onClick={() => action.execute({ accountId, firstName: form.firstName, lastName: form.lastName, email: form.email || undefined, phone: form.phone || undefined })} disabled={action.isPending || !form.firstName || !form.lastName}>
+            {action.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            Erstellen
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

packages/features/booking-management/src/components/create-room-dialog.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { useAction } from 'next-safe-action/hooks';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+import { Plus, Loader2 } from 'lucide-react';
+
+import { Button } from '@kit/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@kit/ui/dialog';
+import { Input } from '@kit/ui/input';
+import { Label } from '@kit/ui/label';
+import { toast } from '@kit/ui/sonner';
+
+import { createRoom } from '../server/actions/booking-actions';
+
+interface CreateRoomDialogProps {
+  accountId: string;
+}
+
+export function CreateRoomDialog({ accountId }: CreateRoomDialogProps) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [form, setForm] = useState({
+    roomNumber: '',
+    name: '',
+    roomType: 'single',
+    capacity: '2',
+    pricePerNight: '0',
+  });
+
+  const action = useAction(createRoom, {
+    onSuccess: () => {
+      toast.success('Zimmer erstellt');
+      setOpen(false);
+      setForm({ roomNumber: '', name: '', roomType: 'single', capacity: '2', pricePerNight: '0' });
+      router.refresh();
+    },
+    onError: () => toast.error('Fehler beim Erstellen'),
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button><Plus className="mr-2 h-4 w-4" />Neues Zimmer</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Zimmer anlegen</DialogTitle>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label>Zimmernummer *</Label>
+            <Input placeholder="z.B. 101" value={form.roomNumber} onChange={(e) => setForm(s => ({ ...s, roomNumber: e.target.value }))} />
+          </div>
+          <div className="grid gap-2">
+            <Label>Bezeichnung</Label>
+            <Input placeholder="z.B. Doppelzimmer Süd" value={form.name} onChange={(e) => setForm(s => ({ ...s, name: e.target.value }))} />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="grid gap-2">
+              <Label>Kapazität</Label>
+              <Input type="number" min="1" value={form.capacity} onChange={(e) => setForm(s => ({ ...s, capacity: e.target.value }))} />
+            </div>
+            <div className="grid gap-2">
+              <Label>Preis/Nacht (€)</Label>
+              <Input type="number" step="0.01" min="0" value={form.pricePerNight} onChange={(e) => setForm(s => ({ ...s, pricePerNight: e.target.value }))} />
+            </div>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>Abbrechen</Button>
+          <Button onClick={() => action.execute({ accountId, roomNumber: form.roomNumber, name: form.name || undefined, roomType: form.roomType as any, capacity: Number(form.capacity) || 2, pricePerNight: Number(form.pricePerNight) || 0 })} disabled={action.isPending || !form.roomNumber}>
+            {action.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            Erstellen
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

packages/features/booking-management/src/components/index.ts

@@ -1 +1,4 @@
 export { CreateBookingForm } from './create-booking-form';
+export { BookingStatusActions } from './booking-status-actions';
+export { CreateRoomDialog } from './create-room-dialog';
+export { CreateGuestDialog } from './create-guest-dialog';

packages/features/course-management/package.json

@@ -35,5 +35,8 @@
     "react": "catalog:",
     "react-hook-form": "catalog:",
     "zod": "catalog:"
+  },
+  "dependencies": {
+    "lucide-react": "catalog:"
   }
 }

packages/features/course-management/src/components/enroll-participant-dialog.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { useAction } from 'next-safe-action/hooks';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+import { Plus, Loader2 } from 'lucide-react';
+
+import { Button } from '@kit/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@kit/ui/dialog';
+import { Input } from '@kit/ui/input';
+import { Label } from '@kit/ui/label';
+import { toast } from '@kit/ui/sonner';
+
+import { enrollParticipant } from '../server/actions/course-actions';
+
+interface EnrollParticipantDialogProps {
+  courseId: string;
+}
+
+export function EnrollParticipantDialog({ courseId }: EnrollParticipantDialogProps) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [form, setForm] = useState({ firstName: '', lastName: '', email: '', phone: '' });
+
+  const action = useAction(enrollParticipant, {
+    onSuccess: ({ data }) => {
+      if (data?.success) {
+        toast.success('Teilnehmer angemeldet');
+        setOpen(false);
+        setForm({ firstName: '', lastName: '', email: '', phone: '' });
+        router.refresh();
+      } else {
+        toast.error(data?.error ?? 'Fehler bei der Anmeldung');
+      }
+    },
+    onError: () => toast.error('Fehler bei der Anmeldung'),
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button><Plus className="mr-2 h-4 w-4" />Teilnehmer anmelden</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Teilnehmer anmelden</DialogTitle>
+          <DialogDescription>Melden Sie einen Teilnehmer für diesen Kurs an.</DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div className="grid gap-2">
+              <Label>Vorname *</Label>
+              <Input value={form.firstName} onChange={(e) => setForm(s => ({ ...s, firstName: e.target.value }))} />
+            </div>
+            <div className="grid gap-2">
+              <Label>Nachname *</Label>
+              <Input value={form.lastName} onChange={(e) => setForm(s => ({ ...s, lastName: e.target.value }))} />
+            </div>
+          </div>
+          <div className="grid gap-2">
+            <Label>E-Mail</Label>
+            <Input type="email" value={form.email} onChange={(e) => setForm(s => ({ ...s, email: e.target.value }))} />
+          </div>
+          <div className="grid gap-2">
+            <Label>Telefon</Label>
+            <Input value={form.phone} onChange={(e) => setForm(s => ({ ...s, phone: e.target.value }))} />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>Abbrechen</Button>
+          <Button
+            onClick={() => action.execute({
+              courseId,
+              firstName: form.firstName,
+              lastName: form.lastName,
+              email: form.email || undefined,
+              phone: form.phone || undefined,
+            })}
+            disabled={action.isPending || !form.firstName || !form.lastName}
+          >
+            {action.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            Anmelden
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

packages/features/course-management/src/components/index.ts

@@ -1 +1,2 @@
 export { CreateCourseForm } from './create-course-form';
+export { EnrollParticipantDialog } from './enroll-participant-dialog';

packages/features/event-management/package.json

@@ -35,5 +35,8 @@
     "react": "catalog:",
     "react-hook-form": "catalog:",
     "zod": "catalog:"
+  },
+  "dependencies": {
+    "lucide-react": "catalog:"
   }
 }

packages/features/event-management/src/components/create-holiday-pass-dialog.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { useAction } from 'next-safe-action/hooks';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+import { Plus, Loader2 } from 'lucide-react';
+
+import { Button } from '@kit/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@kit/ui/dialog';
+import { Input } from '@kit/ui/input';
+import { Label } from '@kit/ui/label';
+import { toast } from '@kit/ui/sonner';
+
+import { createHolidayPass } from '../server/actions/event-actions';
+
+interface CreateHolidayPassDialogProps {
+  accountId: string;
+}
+
+export function CreateHolidayPassDialog({ accountId }: CreateHolidayPassDialogProps) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const currentYear = new Date().getFullYear();
+  const [form, setForm] = useState({ name: '', year: String(currentYear), description: '', price: '0', validFrom: '', validUntil: '' });
+
+  const action = useAction(createHolidayPass, {
+    onSuccess: () => {
+      toast.success('Ferienpass erstellt');
+      setOpen(false);
+      setForm({ name: '', year: String(currentYear), description: '', price: '0', validFrom: '', validUntil: '' });
+      router.refresh();
+    },
+    onError: () => toast.error('Fehler beim Erstellen'),
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button><Plus className="mr-2 h-4 w-4" />Neuer Ferienpass</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Ferienpass erstellen</DialogTitle>
+          <DialogDescription>Erstellen Sie einen neuen Ferienpass für Ihr Ferienprogramm.</DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div className="grid gap-2">
+              <Label>Name *</Label>
+              <Input placeholder="z.B. Sommerferienprogramm" value={form.name} onChange={(e) => setForm(s => ({ ...s, name: e.target.value }))} />
+            </div>
+            <div className="grid gap-2">
+              <Label>Jahr *</Label>
+              <Input type="number" value={form.year} onChange={(e) => setForm(s => ({ ...s, year: e.target.value }))} />
+            </div>
+          </div>
+          <div className="grid gap-2">
+            <Label>Beschreibung</Label>
+            <Input placeholder="Optional" value={form.description} onChange={(e) => setForm(s => ({ ...s, description: e.target.value }))} />
+          </div>
+          <div className="grid grid-cols-3 gap-4">
+            <div className="grid gap-2">
+              <Label>Preis (€)</Label>
+              <Input type="number" step="0.01" min="0" value={form.price} onChange={(e) => setForm(s => ({ ...s, price: e.target.value }))} />
+            </div>
+            <div className="grid gap-2">
+              <Label>Gültig ab</Label>
+              <Input type="date" value={form.validFrom} onChange={(e) => setForm(s => ({ ...s, validFrom: e.target.value }))} />
+            </div>
+            <div className="grid gap-2">
+              <Label>Gültig bis</Label>
+              <Input type="date" value={form.validUntil} onChange={(e) => setForm(s => ({ ...s, validUntil: e.target.value }))} />
+            </div>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>Abbrechen</Button>
+          <Button
+            onClick={() => action.execute({
+              accountId,
+              name: form.name,
+              year: Number(form.year),
+              description: form.description || undefined,
+              price: Number(form.price) || 0,
+              validFrom: form.validFrom || undefined,
+              validUntil: form.validUntil || undefined,
+            })}
+            disabled={action.isPending || !form.name || !form.year}
+          >
+            {action.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            Erstellen
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

packages/features/event-management/src/components/event-registration-dialog.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { useAction } from 'next-safe-action/hooks';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+import { UserPlus, Loader2 } from 'lucide-react';
+
+import { Button } from '@kit/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@kit/ui/dialog';
+import { Input } from '@kit/ui/input';
+import { Label } from '@kit/ui/label';
+import { toast } from '@kit/ui/sonner';
+
+import { registerForEvent } from '../server/actions/event-actions';
+
+interface EventRegistrationDialogProps {
+  eventId: string;
+  eventName: string;
+}
+
+export function EventRegistrationDialog({ eventId, eventName }: EventRegistrationDialogProps) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [form, setForm] = useState({ firstName: '', lastName: '', email: '', phone: '', dateOfBirth: '' });
+
+  const action = useAction(registerForEvent, {
+    onSuccess: ({ data }) => {
+      if (data?.success) {
+        toast.success('Anmeldung erfolgreich');
+        setOpen(false);
+        setForm({ firstName: '', lastName: '', email: '', phone: '', dateOfBirth: '' });
+        router.refresh();
+      } else {
+        toast.error(data?.error ?? 'Fehler bei der Anmeldung');
+      }
+    },
+    onError: () => toast.error('Fehler bei der Anmeldung'),
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button><UserPlus className="mr-2 h-4 w-4" />Anmeldung</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Anmeldung zu „{eventName}"</DialogTitle>
+          <DialogDescription>Melden Sie einen Teilnehmer an.</DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div className="grid gap-2">
+              <Label>Vorname *</Label>
+              <Input value={form.firstName} onChange={(e) => setForm(s => ({ ...s, firstName: e.target.value }))} />
+            </div>
+            <div className="grid gap-2">
+              <Label>Nachname *</Label>
+              <Input value={form.lastName} onChange={(e) => setForm(s => ({ ...s, lastName: e.target.value }))} />
+            </div>
+          </div>
+          <div className="grid gap-2">
+            <Label>E-Mail</Label>
+            <Input type="email" value={form.email} onChange={(e) => setForm(s => ({ ...s, email: e.target.value }))} />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="grid gap-2">
+              <Label>Telefon</Label>
+              <Input value={form.phone} onChange={(e) => setForm(s => ({ ...s, phone: e.target.value }))} />
+            </div>
+            <div className="grid gap-2">
+              <Label>Geburtsdatum</Label>
+              <Input type="date" value={form.dateOfBirth} onChange={(e) => setForm(s => ({ ...s, dateOfBirth: e.target.value }))} />
+            </div>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>Abbrechen</Button>
+          <Button
+            onClick={() => action.execute({
+              eventId,
+              firstName: form.firstName,
+              lastName: form.lastName,
+              email: form.email || undefined,
+              phone: form.phone || undefined,
+              dateOfBirth: form.dateOfBirth || undefined,
+            })}
+            disabled={action.isPending || !form.firstName || !form.lastName}
+          >
+            {action.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            Anmelden
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

packages/features/event-management/src/components/index.ts

@@ -1 +1,3 @@
 export { CreateEventForm } from './create-event-form';
+export { EventRegistrationDialog } from './event-registration-dialog';
+export { CreateHolidayPassDialog } from './create-holiday-pass-dialog';

packages/features/newsletter/package.json

@@ -33,5 +33,8 @@
     "react": "catalog:",
     "react-hook-form": "catalog:",
     "zod": "catalog:"
+  },
+  "dependencies": {
+    "lucide-react": "catalog:"
   }
 }

packages/features/newsletter/src/components/create-template-dialog.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { useAction } from 'next-safe-action/hooks';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+import { Plus, Loader2 } from 'lucide-react';
+
+import { Button } from '@kit/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@kit/ui/dialog';
+import { Input } from '@kit/ui/input';
+import { Label } from '@kit/ui/label';
+import { toast } from '@kit/ui/sonner';
+import { Textarea } from '@kit/ui/textarea';
+
+import { createTemplate } from '../server/actions/newsletter-actions';
+
+interface CreateTemplateDialogProps {
+  accountId: string;
+}
+
+export function CreateTemplateDialog({ accountId }: CreateTemplateDialogProps) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [form, setForm] = useState({ name: '', subject: '', bodyHtml: '<h1>Betreff</h1>\n<p>Inhalt hier...</p>' });
+
+  const action = useAction(createTemplate, {
+    onSuccess: () => {
+      toast.success('Vorlage erstellt');
+      setOpen(false);
+      setForm({ name: '', subject: '', bodyHtml: '<h1>Betreff</h1>\n<p>Inhalt hier...</p>' });
+      router.refresh();
+    },
+    onError: () => toast.error('Fehler beim Erstellen'),
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button><Plus className="mr-2 h-4 w-4" />Neue Vorlage</Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Newsletter-Vorlage erstellen</DialogTitle>
+          <DialogDescription>Erstellen Sie eine wiederverwendbare Vorlage für Ihren Newsletter.</DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label>Name *</Label>
+            <Input placeholder="z.B. Monatlicher Vereinsbrief" value={form.name} onChange={(e) => setForm(s => ({ ...s, name: e.target.value }))} />
+          </div>
+          <div className="grid gap-2">
+            <Label>Betreff *</Label>
+            <Input placeholder="z.B. Neuigkeiten aus dem Verein" value={form.subject} onChange={(e) => setForm(s => ({ ...s, subject: e.target.value }))} />
+          </div>
+          <div className="grid gap-2">
+            <Label>Inhalt (HTML) *</Label>
+            <Textarea rows={6} value={form.bodyHtml} onChange={(e) => setForm(s => ({ ...s, bodyHtml: e.target.value }))} />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>Abbrechen</Button>
+          <Button
+            onClick={() => action.execute({ accountId, name: form.name, subject: form.subject, bodyHtml: form.bodyHtml })}
+            disabled={action.isPending || !form.name || !form.subject || !form.bodyHtml}
+          >
+            {action.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            Erstellen
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

packages/features/newsletter/src/components/index.ts

@@ -1 +1,2 @@
 export { CreateNewsletterForm } from './create-newsletter-form';
+export { CreateTemplateDialog } from './create-template-dialog';