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).
This commit is contained in:
@@ -35,5 +35,8 @@
|
||||
"react": "catalog:",
|
||||
"react-hook-form": "catalog:",
|
||||
"zod": "catalog:"
|
||||
},
|
||||
"dependencies": {
|
||||
"lucide-react": "catalog:"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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';
|
||||
|
||||
Reference in New Issue
Block a user