Implement missing UI button features, filters, search, and view toggles across all modules

2026-05-21 10:44:23 +02:00
parent e7eb43462c
commit 84aae1d72e
18 changed files with 3268 additions and 958 deletions
@@ -0,0 +1,132 @@
+"use client";
+
+import { useState, useTransition, type FormEvent } from "react";
+import { SlidersHorizontal } from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { updateKitaNotdienstSettingsAction } from "../actions";
+
+interface SettingsModalProps {
+  initialMinPerChild: number;
+  initialReminderDays: number;
+}
+
+export function SettingsModal({
+  initialMinPerChild,
+  initialReminderDays,
+}: SettingsModalProps) {
+  const [open, setOpen] = useState(false);
+  const [minPerChild, setMinPerChild] = useState(initialMinPerChild);
+  const [reminderDays, setReminderDays] = useState(initialReminderDays);
+  const [isPending, startTransition] = useTransition();
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (minPerChild < 0 || reminderDays < 0) {
+      toast.error("Werte dürfen nicht negativ sein.");
+      return;
+    }
+
+    startTransition(async () => {
+      const res = await updateKitaNotdienstSettingsAction(
+        minPerChild,
+        reminderDays
+      );
+      if (res.error) {
+        toast.error(res.error);
+      } else {
+        toast.success("Regeln erfolgreich gespeichert!");
+        setOpen(false);
+      }
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="ghost" size="sm">
+          <SlidersHorizontal className="h-4 w-4 [stroke-width:1.7]" />
+          Einstellungen
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>Notdienst-Einstellungen</DialogTitle>
+            <DialogDescription>
+              Passe die standardmäßigen Regeln für die Notdienst-Verteilung in deiner Kita an.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <Label htmlFor="minPerChild">
+                Mindesteinteilungen pro Kind/Monat
+              </Label>
+              <Input
+                id="minPerChild"
+                name="minPerChild"
+                type="number"
+                min="0"
+                required
+                value={minPerChild}
+                onChange={(e) => setMinPerChild(parseInt(e.target.value, 10))}
+              />
+              <p className="text-xs text-[var(--ink-muted)]">
+                Bestimmt das Richtmaß der automatischen Verteilung für Kinder im jeweiligen Monat.
+              </p>
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="reminderDays">
+                Erinnerungsfrist (Tage vor Monatsende)
+              </Label>
+              <Input
+                id="reminderDays"
+                name="reminderDays"
+                type="number"
+                min="0"
+                required
+                value={reminderDays}
+                onChange={(e) => setReminderDays(parseInt(e.target.value, 10))}
+              />
+              <p className="text-xs text-[var(--ink-muted)]">
+                Frist, nach der Eltern automatisch per Mail an offene Verfügbarkeiten erinnert werden.
+              </p>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={() => {
+                setMinPerChild(initialMinPerChild);
+                setReminderDays(initialReminderDays);
+                setOpen(false);
+              }}
+            >
+              Abbrechen
+            </Button>
+            <Button type="submit" disabled={isPending}>
+              {isPending ? "Speichern..." : "Regeln speichern"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}