feat: wire 10 dead buttons across 6 modules to their server actions
Some checks failed
Workflow / ʦ TypeScript (push) Failing after 4m53s
Workflow / ⚫️ Test (push) Has been skipped

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).
This commit is contained in:
Zaid Marzguioui
2026-04-03 23:33:42 +02:00
parent 7cfd88f1c3
commit ad01ecb8b9
24 changed files with 705 additions and 70 deletions

View File

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

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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';