From ad01ecb8b94896536a599d52e8a5ec9d077ebba2 Mon Sep 17 00:00:00 2001 From: Zaid Marzguioui Date: Fri, 3 Apr 2026 23:33:42 +0200 Subject: [PATCH] feat: wire 10 dead buttons across 6 modules to their server actions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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). --- .bg-shell/manifest.json | 2 +- .../[account]/bookings/[bookingId]/page.tsx | 43 +------ .../home/[account]/bookings/guests/page.tsx | 6 +- .../home/[account]/bookings/rooms/page.tsx | 6 +- .../courses/[courseId]/participants/page.tsx | 6 +- .../home/[account]/events/[eventId]/page.tsx | 6 +- .../[account]/events/holiday-passes/page.tsx | 6 +- .../[account]/newsletter/templates/page.tsx | 6 +- .../[account]/site-builder/posts/page.tsx | 10 +- .../features/booking-management/package.json | 5 +- .../src/components/booking-status-actions.tsx | 99 ++++++++++++++++ .../src/components/create-guest-dialog.tsx | 80 +++++++++++++ .../src/components/create-room-dialog.tsx | 88 +++++++++++++++ .../src/components/index.ts | 3 + .../features/course-management/package.json | 5 +- .../components/enroll-participant-dialog.tsx | 97 ++++++++++++++++ .../course-management/src/components/index.ts | 1 + .../features/event-management/package.json | 5 +- .../components/create-holiday-pass-dialog.tsx | 106 ++++++++++++++++++ .../components/event-registration-dialog.tsx | 105 +++++++++++++++++ .../event-management/src/components/index.ts | 2 + packages/features/newsletter/package.json | 5 +- .../src/components/create-template-dialog.tsx | 82 ++++++++++++++ .../newsletter/src/components/index.ts | 1 + 24 files changed, 705 insertions(+), 70 deletions(-) create mode 100644 packages/features/booking-management/src/components/booking-status-actions.tsx create mode 100644 packages/features/booking-management/src/components/create-guest-dialog.tsx create mode 100644 packages/features/booking-management/src/components/create-room-dialog.tsx create mode 100644 packages/features/course-management/src/components/enroll-participant-dialog.tsx create mode 100644 packages/features/event-management/src/components/create-holiday-pass-dialog.tsx create mode 100644 packages/features/event-management/src/components/event-registration-dialog.tsx create mode 100644 packages/features/newsletter/src/components/create-template-dialog.tsx diff --git a/.bg-shell/manifest.json b/.bg-shell/manifest.json index fe51488c7..0637a088a 100644 --- a/.bg-shell/manifest.json +++ b/.bg-shell/manifest.json @@ -1 +1 @@ -[] +[] \ No newline at end of file diff --git a/apps/web/app/[locale]/home/[account]/bookings/[bookingId]/page.tsx b/apps/web/app/[locale]/home/[account]/bookings/[bookingId]/page.tsx index 37b7750c3..8cd6625c5 100644 --- a/apps/web/app/[locale]/home/[account]/bookings/[bookingId]/page.tsx +++ b/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) { {t('detail.changeStatus')} -
- {(status === 'pending' || status === 'confirmed') && ( - - )} - - {status === 'checked_in' && ( - - )} - - {status !== 'cancelled' && - status !== 'checked_out' && - status !== 'no_show' && ( - - )} - - {status === 'cancelled' || status === 'checked_out' ? ( -

- {t('detail.noMoreActions', { - statusLabel: - status === 'cancelled' - ? t('detail.cancelledStatus') - : t('detail.completedStatus'), - })} -

- ) : null} -
+ diff --git a/apps/web/app/[locale]/home/[account]/bookings/guests/page.tsx b/apps/web/app/[locale]/home/[account]/bookings/guests/page.tsx index f4e48b288..87a0cbfc7 100644 --- a/apps/web/app/[locale]/home/[account]/bookings/guests/page.tsx +++ b/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) {

{t('guests.manage')}

- +
{guests.length === 0 ? ( diff --git a/apps/web/app/[locale]/home/[account]/bookings/rooms/page.tsx b/apps/web/app/[locale]/home/[account]/bookings/rooms/page.tsx index d7116c0cb..f49a280ed 100644 --- a/apps/web/app/[locale]/home/[account]/bookings/rooms/page.tsx +++ b/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) {

{t('rooms.manage')}

- +
{rooms.length === 0 ? ( diff --git a/apps/web/app/[locale]/home/[account]/courses/[courseId]/participants/page.tsx b/apps/web/app/[locale]/home/[account]/courses/[courseId]/participants/page.tsx index a916d31f7..9a15d8392 100644 --- a/apps/web/app/[locale]/home/[account]/courses/[courseId]/participants/page.tsx +++ b/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')}

- +
{participants.length === 0 ? ( diff --git a/apps/web/app/[locale]/home/[account]/events/[eventId]/page.tsx b/apps/web/app/[locale]/home/[account]/events/[eventId]/page.tsx index 521e5b04e..4d322f124 100644 --- a/apps/web/app/[locale]/home/[account]/events/[eventId]/page.tsx +++ b/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) { )} - + {/* Detail Cards */} diff --git a/apps/web/app/[locale]/home/[account]/events/holiday-passes/page.tsx b/apps/web/app/[locale]/home/[account]/events/holiday-passes/page.tsx index d9f069e96..b2930b92e 100644 --- a/apps/web/app/[locale]/home/[account]/events/holiday-passes/page.tsx +++ b/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')}

- + {passes.length === 0 ? ( diff --git a/apps/web/app/[locale]/home/[account]/newsletter/templates/page.tsx b/apps/web/app/[locale]/home/[account]/newsletter/templates/page.tsx index 4e5486d70..1d6459d10 100644 --- a/apps/web/app/[locale]/home/[account]/newsletter/templates/page.tsx +++ b/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) {

{t('templates.subtitle')}

- + {/* Table or Empty State */} diff --git a/apps/web/app/[locale]/home/[account]/site-builder/posts/page.tsx b/apps/web/app/[locale]/home/[account]/site-builder/posts/page.tsx index f4efb3ba0..d974d0628 100644 --- a/apps/web/app/[locale]/home/[account]/site-builder/posts/page.tsx +++ b/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) { >
-
{posts.length === 0 ? ( diff --git a/packages/features/booking-management/package.json b/packages/features/booking-management/package.json index 0d1dfe35c..e2d7cbaed 100644 --- a/packages/features/booking-management/package.json +++ b/packages/features/booking-management/package.json @@ -35,5 +35,8 @@ "react": "catalog:", "react-hook-form": "catalog:", "zod": "catalog:" + }, + "dependencies": { + "lucide-react": "catalog:" } -} +} \ No newline at end of file diff --git a/packages/features/booking-management/src/components/booking-status-actions.tsx b/packages/features/booking-management/src/components/booking-status-actions.tsx new file mode 100644 index 000000000..d38a7daee --- /dev/null +++ b/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 ( +

+ {status === 'cancelled' + ? 'Diese Buchung wurde storniert.' + : 'Diese Buchung ist abgeschlossen.'} +

+ ); + } + + return ( +
+ {(status === 'pending' || status === 'confirmed') && ( + + )} + + {status === 'checked_in' && ( + + )} + + {status !== 'cancelled' && + status !== 'checked_out' && + status !== 'no_show' && ( + + )} +
+ ); +} diff --git a/packages/features/booking-management/src/components/create-guest-dialog.tsx b/packages/features/booking-management/src/components/create-guest-dialog.tsx new file mode 100644 index 000000000..a8a9e0ed1 --- /dev/null +++ b/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 ( + + + + + + Gast anlegen +
+
+
+ + setForm(s => ({ ...s, firstName: e.target.value }))} /> +
+
+ + setForm(s => ({ ...s, lastName: e.target.value }))} /> +
+
+
+ + setForm(s => ({ ...s, email: e.target.value }))} /> +
+
+ + setForm(s => ({ ...s, phone: e.target.value }))} /> +
+
+ + + + + + + ); +} diff --git a/packages/features/booking-management/src/components/create-room-dialog.tsx b/packages/features/booking-management/src/components/create-room-dialog.tsx new file mode 100644 index 000000000..5d84ed3c6 --- /dev/null +++ b/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 ( + + + + + + + Zimmer anlegen + +
+
+ + setForm(s => ({ ...s, roomNumber: e.target.value }))} /> +
+
+ + setForm(s => ({ ...s, name: e.target.value }))} /> +
+
+
+ + setForm(s => ({ ...s, capacity: e.target.value }))} /> +
+
+ + setForm(s => ({ ...s, pricePerNight: e.target.value }))} /> +
+
+
+ + + + + + + ); +} diff --git a/packages/features/booking-management/src/components/index.ts b/packages/features/booking-management/src/components/index.ts index 0f6f4c936..d8b7672e7 100644 --- a/packages/features/booking-management/src/components/index.ts +++ b/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'; diff --git a/packages/features/course-management/package.json b/packages/features/course-management/package.json index c44b159dd..51b396c22 100644 --- a/packages/features/course-management/package.json +++ b/packages/features/course-management/package.json @@ -35,5 +35,8 @@ "react": "catalog:", "react-hook-form": "catalog:", "zod": "catalog:" + }, + "dependencies": { + "lucide-react": "catalog:" } -} +} \ No newline at end of file diff --git a/packages/features/course-management/src/components/enroll-participant-dialog.tsx b/packages/features/course-management/src/components/enroll-participant-dialog.tsx new file mode 100644 index 000000000..89747acd4 --- /dev/null +++ b/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 ( + + + + + + + Teilnehmer anmelden + Melden Sie einen Teilnehmer für diesen Kurs an. + +
+
+
+ + setForm(s => ({ ...s, firstName: e.target.value }))} /> +
+
+ + setForm(s => ({ ...s, lastName: e.target.value }))} /> +
+
+
+ + setForm(s => ({ ...s, email: e.target.value }))} /> +
+
+ + setForm(s => ({ ...s, phone: e.target.value }))} /> +
+
+ + + + + + + ); +} diff --git a/packages/features/course-management/src/components/index.ts b/packages/features/course-management/src/components/index.ts index a409a92ce..3863b1281 100644 --- a/packages/features/course-management/src/components/index.ts +++ b/packages/features/course-management/src/components/index.ts @@ -1 +1,2 @@ export { CreateCourseForm } from './create-course-form'; +export { EnrollParticipantDialog } from './enroll-participant-dialog'; diff --git a/packages/features/event-management/package.json b/packages/features/event-management/package.json index 4bfd01c45..893767ade 100644 --- a/packages/features/event-management/package.json +++ b/packages/features/event-management/package.json @@ -35,5 +35,8 @@ "react": "catalog:", "react-hook-form": "catalog:", "zod": "catalog:" + }, + "dependencies": { + "lucide-react": "catalog:" } -} +} \ No newline at end of file diff --git a/packages/features/event-management/src/components/create-holiday-pass-dialog.tsx b/packages/features/event-management/src/components/create-holiday-pass-dialog.tsx new file mode 100644 index 000000000..26963e179 --- /dev/null +++ b/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 ( + + + + + + + Ferienpass erstellen + Erstellen Sie einen neuen Ferienpass für Ihr Ferienprogramm. + +
+
+
+ + setForm(s => ({ ...s, name: e.target.value }))} /> +
+
+ + setForm(s => ({ ...s, year: e.target.value }))} /> +
+
+
+ + setForm(s => ({ ...s, description: e.target.value }))} /> +
+
+
+ + setForm(s => ({ ...s, price: e.target.value }))} /> +
+
+ + setForm(s => ({ ...s, validFrom: e.target.value }))} /> +
+
+ + setForm(s => ({ ...s, validUntil: e.target.value }))} /> +
+
+
+ + + + + + + ); +} diff --git a/packages/features/event-management/src/components/event-registration-dialog.tsx b/packages/features/event-management/src/components/event-registration-dialog.tsx new file mode 100644 index 000000000..d327ab97c --- /dev/null +++ b/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 ( + + + + + + + Anmeldung zu „{eventName}" + Melden Sie einen Teilnehmer an. + +
+
+
+ + setForm(s => ({ ...s, firstName: e.target.value }))} /> +
+
+ + setForm(s => ({ ...s, lastName: e.target.value }))} /> +
+
+
+ + setForm(s => ({ ...s, email: e.target.value }))} /> +
+
+
+ + setForm(s => ({ ...s, phone: e.target.value }))} /> +
+
+ + setForm(s => ({ ...s, dateOfBirth: e.target.value }))} /> +
+
+
+ + + + + + + ); +} diff --git a/packages/features/event-management/src/components/index.ts b/packages/features/event-management/src/components/index.ts index afcad20f8..7f3181d86 100644 --- a/packages/features/event-management/src/components/index.ts +++ b/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'; diff --git a/packages/features/newsletter/package.json b/packages/features/newsletter/package.json index ac6109f0d..c98cc1038 100644 --- a/packages/features/newsletter/package.json +++ b/packages/features/newsletter/package.json @@ -33,5 +33,8 @@ "react": "catalog:", "react-hook-form": "catalog:", "zod": "catalog:" + }, + "dependencies": { + "lucide-react": "catalog:" } -} +} \ No newline at end of file diff --git a/packages/features/newsletter/src/components/create-template-dialog.tsx b/packages/features/newsletter/src/components/create-template-dialog.tsx new file mode 100644 index 000000000..97d6c7c1e --- /dev/null +++ b/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: '

Betreff

\n

Inhalt hier...

' }); + + const action = useAction(createTemplate, { + onSuccess: () => { + toast.success('Vorlage erstellt'); + setOpen(false); + setForm({ name: '', subject: '', bodyHtml: '

Betreff

\n

Inhalt hier...

' }); + router.refresh(); + }, + onError: () => toast.error('Fehler beim Erstellen'), + }); + + return ( + + + + + + + Newsletter-Vorlage erstellen + Erstellen Sie eine wiederverwendbare Vorlage für Ihren Newsletter. + +
+
+ + setForm(s => ({ ...s, name: e.target.value }))} /> +
+
+ + setForm(s => ({ ...s, subject: e.target.value }))} /> +
+
+ +