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

apps/web/app/[locale]/home/[account]/courses/instructors/create-instructor-dialog.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Plus } from 'lucide-react';
+
+import { createInstructor } from '@kit/course-management/actions/course-actions';
+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 { Textarea } from '@kit/ui/textarea';
+import { useActionWithToast } from '@kit/ui/use-action-with-toast';
+
+interface CreateInstructorDialogProps {
+  accountId: string;
+}
+
+export function CreateInstructorDialog({
+  accountId,
+}: CreateInstructorDialogProps) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [email, setEmail] = useState('');
+  const [phone, setPhone] = useState('');
+  const [qualifications, setQualifications] = useState('');
+  const [hourlyRate, setHourlyRate] = useState('');
+
+  const { execute, isPending } = useActionWithToast(createInstructor, {
+    successMessage: 'Dozent erstellt',
+    errorMessage: 'Fehler beim Erstellen des Dozenten',
+    onSuccess: () => {
+      setOpen(false);
+      setFirstName('');
+      setLastName('');
+      setEmail('');
+      setPhone('');
+      setQualifications('');
+      setHourlyRate('');
+      router.refresh();
+    },
+  });
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+      if (!firstName.trim() || !lastName.trim()) return;
+      execute({
+        accountId,
+        firstName: firstName.trim(),
+        lastName: lastName.trim(),
+        email: email.trim() || undefined,
+        phone: phone.trim() || undefined,
+        qualifications: qualifications.trim() || undefined,
+        hourlyRate: hourlyRate ? Number(hourlyRate) : undefined,
+      });
+    },
+    [
+      execute,
+      accountId,
+      firstName,
+      lastName,
+      email,
+      phone,
+      qualifications,
+      hourlyRate,
+    ],
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger render={<Button size="sm" />}>
+        <Plus className="mr-1 h-4 w-4" />
+        Neuer Dozent
+      </DialogTrigger>
+      <DialogContent>
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>Neuer Dozent</DialogTitle>
+            <DialogDescription>
+              Einen neuen Dozenten zum Dozentenpool hinzufuegen.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="mt-4 space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="inst-first-name">Vorname</Label>
+                <Input
+                  id="inst-first-name"
+                  value={firstName}
+                  onChange={(e) => setFirstName(e.target.value)}
+                  placeholder="Vorname"
+                  required
+                  minLength={1}
+                  maxLength={128}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="inst-last-name">Nachname</Label>
+                <Input
+                  id="inst-last-name"
+                  value={lastName}
+                  onChange={(e) => setLastName(e.target.value)}
+                  placeholder="Nachname"
+                  required
+                  minLength={1}
+                  maxLength={128}
+                />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="inst-email">E-Mail (optional)</Label>
+                <Input
+                  id="inst-email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="dozent@beispiel.de"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="inst-phone">Telefon (optional)</Label>
+                <Input
+                  id="inst-phone"
+                  type="tel"
+                  value={phone}
+                  onChange={(e) => setPhone(e.target.value)}
+                  placeholder="+49 123 456789"
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="inst-qualifications">
+                Qualifikationen (optional)
+              </Label>
+              <Textarea
+                id="inst-qualifications"
+                value={qualifications}
+                onChange={(e) => setQualifications(e.target.value)}
+                placeholder="z. B. Zertifizierter Trainer, Erste-Hilfe-Ausbilder"
+                rows={3}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="inst-hourly-rate">Stundensatz (optional)</Label>
+              <Input
+                id="inst-hourly-rate"
+                type="number"
+                min={0}
+                step={0.01}
+                value={hourlyRate}
+                onChange={(e) => setHourlyRate(e.target.value)}
+                placeholder="0.00"
+              />
+            </div>
+          </div>
+          <DialogFooter className="mt-4">
+            <Button
+              type="submit"
+              disabled={isPending || !firstName.trim() || !lastName.trim()}
+            >
+              {isPending ? 'Wird erstellt...' : 'Erstellen'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -1,14 +1,15 @@
-import { GraduationCap, Plus } from 'lucide-react';
+import { GraduationCap } from 'lucide-react';
 
 import { createCourseManagementApi } from '@kit/course-management/api';
 import { getSupabaseServerClient } from '@kit/supabase/server-client';
-import { Button } from '@kit/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
 
 import { AccountNotFound } from '~/components/account-not-found';
 import { CmsPageShell } from '~/components/cms-page-shell';
 import { EmptyState } from '~/components/empty-state';
 
+import { CreateInstructorDialog } from './create-instructor-dialog';
+
 interface PageProps {
   params: Promise<{ account: string }>;
 }
@@ -33,10 +34,7 @@ export default async function InstructorsPage({ params }: PageProps) {
       <div className="flex w-full flex-col gap-6">
         <div className="flex items-center justify-between">
           <p className="text-muted-foreground">Dozentenpool verwalten</p>
-          <Button data-test="instructors-new-btn">
-            <Plus className="mr-2 h-4 w-4" />
-            Neuer Dozent
-          </Button>
+          <CreateInstructorDialog accountId={acct.id} />
         </div>
 
         {instructors.length === 0 ? (