feat: add update and delete functionality for courses, events, and species; enhance attendance tracking and category creation

packages/features/course-management/src/components/create-course-form.tsx

@@ -3,7 +3,6 @@
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useAction } from 'next-safe-action/hooks';
 import { useForm } from 'react-hook-form';
 
 import { Button } from '@kit/ui/button';
@@ -17,53 +16,100 @@ import {
   FormMessage,
 } from '@kit/ui/form';
 import { Input } from '@kit/ui/input';
-import { toast } from '@kit/ui/sonner';
+import { useActionWithToast } from '@kit/ui/use-action-with-toast';
 
-import { CreateCourseSchema } from '../schema/course.schema';
-import { createCourse } from '../server/actions/course-actions';
+import {
+  CreateCourseSchema,
+  UpdateCourseSchema,
+} from '../schema/course.schema';
+import { createCourse, updateCourse } from '../server/actions/course-actions';
 
 interface Props {
   accountId: string;
   account: string;
+  /** If provided, form operates in edit mode */
+  courseId?: string;
+  initialData?: {
+    courseNumber: string;
+    name: string;
+    description: string;
+    startDate: string;
+    endDate: string;
+    fee: number;
+    reducedFee: number;
+    capacity: number;
+    minParticipants: number;
+    status: string;
+    registrationDeadline: string;
+    notes: string;
+  };
 }
 
-export function CreateCourseForm({ accountId, account }: Props) {
+export function CreateCourseForm({
+  accountId,
+  account,
+  courseId,
+  initialData,
+}: Props) {
   const router = useRouter();
+  const isEdit = Boolean(courseId);
+
   const form = useForm({
-    resolver: zodResolver(CreateCourseSchema),
+    resolver: zodResolver(isEdit ? UpdateCourseSchema : CreateCourseSchema),
     defaultValues: {
-      accountId,
-      courseNumber: '',
-      name: '',
-      description: '',
-      startDate: '',
-      endDate: '',
-      fee: 0,
-      reducedFee: 0,
-      capacity: 20,
-      minParticipants: 5,
-      status: 'planned' as const,
-      registrationDeadline: '',
-      notes: '',
+      ...(isEdit ? { courseId } : { accountId }),
+      courseNumber: initialData?.courseNumber ?? '',
+      name: initialData?.name ?? '',
+      description: initialData?.description ?? '',
+      startDate: initialData?.startDate ?? '',
+      endDate: initialData?.endDate ?? '',
+      fee: initialData?.fee ?? 0,
+      reducedFee: initialData?.reducedFee ?? 0,
+      capacity: initialData?.capacity ?? 20,
+      minParticipants: initialData?.minParticipants ?? 5,
+      status: (initialData?.status ?? 'planned') as
+        | 'planned'
+        | 'open'
+        | 'running'
+        | 'completed'
+        | 'cancelled',
+      registrationDeadline: initialData?.registrationDeadline ?? '',
+      notes: initialData?.notes ?? '',
     },
   });
 
-  const { execute, isPending } = useAction(createCourse, {
-    onSuccess: ({ data }) => {
-      if (data?.success) {
-        toast.success('Kurs erfolgreich erstellt');
-        router.push(`/home/${account}/courses`);
-      }
+  const { execute: execCreate, isPending: isCreating } = useActionWithToast(
+    createCourse,
+    {
+      successMessage: 'Kurs erfolgreich erstellt',
+      errorMessage: 'Fehler beim Erstellen des Kurses',
+      onSuccess: () => router.push(`/home/${account}/courses`),
     },
-    onError: ({ error }) => {
-      toast.error(error.serverError ?? 'Fehler beim Erstellen des Kurses');
+  );
+
+  const { execute: execUpdate, isPending: isUpdating } = useActionWithToast(
+    updateCourse,
+    {
+      successMessage: 'Kurs aktualisiert',
+      errorMessage: 'Fehler beim Aktualisieren',
+      onSuccess: () => router.push(`/home/${account}/courses/${courseId}`),
     },
-  });
+  );
+
+  const isPending = isCreating || isUpdating;
+
+  const handleSubmit = (data: Record<string, unknown>) => {
+    if (isEdit && courseId) {
+      execUpdate({ ...data, courseId } as any);
+    } else {
+      execCreate({ ...data, accountId } as any);
+    }
+  };
 
   return (
     <Form {...form}>
       <form
-        onSubmit={form.handleSubmit((data) => execute(data))}
+        onSubmit={form.handleSubmit(handleSubmit as any)}
         className="space-y-6"
       >
         <Card>
@@ -167,7 +213,7 @@ export function CreateCourseForm({ accountId, account }: Props) {
 
         <Card>
           <CardHeader>
-            <CardTitle>Kapazität</CardTitle>
+            <CardTitle>Kapazität & Gebühren</CardTitle>
           </CardHeader>
           <CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <FormField
@@ -211,7 +257,7 @@ export function CreateCourseForm({ accountId, account }: Props) {
               name="fee"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Gebühr (€)</FormLabel>
+                  <FormLabel>Gebühr (EUR)</FormLabel>
                   <FormControl>
                     <Input
                       type="number"
@@ -230,7 +276,7 @@ export function CreateCourseForm({ accountId, account }: Props) {
               name="reducedFee"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Ermäßigte Gebühr (€)</FormLabel>
+                  <FormLabel>Ermäßigte Gebühr (EUR)</FormLabel>
                   <FormControl>
                     <Input
                       type="number"
@@ -274,42 +320,35 @@ export function CreateCourseForm({ accountId, account }: Props) {
                 </FormItem>
               )}
             />
-            <div className="sm:col-span-1">
-              <FormField
-                control={form.control}
-                name="notes"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Notizen</FormLabel>
-                    <FormControl>
-                      <textarea
-                        {...field}
-                        className="border-input bg-background flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
+            <FormField
+              control={form.control}
+              name="notes"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Notizen</FormLabel>
+                  <FormControl>
+                    <textarea
+                      {...field}
+                      className="border-input bg-background flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
           </CardContent>
         </Card>
 
         <div className="flex justify-end gap-2">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={() => router.back()}
-            data-test="course-cancel-btn"
-          >
+          <Button type="button" variant="outline" onClick={() => router.back()}>
             Abbrechen
           </Button>
-          <Button
-            type="submit"
-            disabled={isPending}
-            data-test="course-submit-btn"
-          >
-            {isPending ? 'Wird erstellt...' : 'Kurs erstellen'}
+          <Button type="submit" disabled={isPending}>
+            {isPending
+              ? 'Wird gespeichert...'
+              : isEdit
+                ? 'Kurs aktualisieren'
+                : 'Kurs erstellen'}
           </Button>
         </div>
       </form>