Phase 5: Positions und Bereiche page with create/staff position modals

2026-07-13 22:43:09 +02:00
parent f91a69147e
commit 80cfaa1e04
9 changed files with 527 additions and 7 deletions
--- a/components/positions/StaffInternallyModal.tsx
+++ b/components/positions/StaffInternallyModal.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { searchActiveEmployees, type EmployeeSearchResult } from "@/actions/employees";
+import { staffPositionInternally } from "@/actions/positions";
+import { Lookup } from "@/components/ui/Lookup";
+import { Modal } from "@/components/ui/Modal";
+import { useToast } from "@/components/ui/Toast";
+
+type StaffInternallyModalProps = {
+  open: boolean;
+  onClose: () => void;
+  positionId: string;
+  positionTitle: string;
+  isLead: boolean;
+};
+
+export function StaffInternallyModal({ open, onClose, positionId, positionTitle, isLead }: StaffInternallyModalProps) {
+  const { showToast } = useToast();
+  const router = useRouter();
+  const [employee, setEmployee] = useState<EmployeeSearchResult | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function handleSubmit() {
+    if (!employee) return;
+    setPending(true);
+    const result = await staffPositionInternally({ position_id: positionId, employee_id: employee.id });
+    setPending(false);
+    if (result.success) {
+      showToast(`${employee.first_name} ${employee.last_name} wurde intern besetzt.`);
+      router.refresh();
+      onClose();
+      setEmployee(null);
+    } else {
+      showToast(result.error ?? "Fehler beim Besetzen.", "error");
+    }
+  }
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title="Intern besetzen"
+      footer={
+        <>
+          <button onClick={onClose} className="rounded px-4 py-2 text-sm font-semibold text-ink-body hover:bg-surface">
+            Abbrechen
+          </button>
+          <button
+            onClick={handleSubmit}
+            disabled={pending || !employee}
+            className="rounded bg-brand-500 px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
+          >
+            Besetzen
+          </button>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-4">
+        <p className="text-sm text-ink-body">
+          Position: <span className="font-semibold">{positionTitle}</span>
+        </p>
+        {isLead && (
+          <div className="rounded bg-warning-bg px-3 py-2 text-sm text-warning-text">
+            Dies ist eine Führungsposition: Das gesamte Team wird der ausgewählten Person unterstellt.
+          </div>
+        )}
+        <div>
+          <label className="mb-1 block text-sm font-semibold text-ink">Mitarbeiter:in*</label>
+          {!employee ? (
+            <Lookup<EmployeeSearchResult>
+              placeholder="Name oder Titel…"
+              onSearch={searchActiveEmployees}
+              onSelect={setEmployee}
+              renderResult={(e) => (
+                <div>
+                  <div className="font-semibold text-ink">
+                    {e.first_name} {e.last_name}
+                  </div>
+                  <div className="text-xs text-ink-muted">{e.job_title}</div>
+                </div>
+              )}
+            />
+          ) : (
+            <div className="flex items-center justify-between rounded border border-border bg-surface p-3">
+              <div>
+                <div className="text-sm font-semibold text-ink">
+                  {employee.first_name} {employee.last_name}
+                </div>
+                <div className="text-xs text-ink-muted">{employee.job_title}</div>
+              </div>
+              <button type="button" onClick={() => setEmployee(null)} className="text-xs text-ink-muted hover:text-ink">
+                Ändern
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </Modal>
+  );
+}