Show positions that do not exist yet, and let them be corrected

Two gaps in the positions view, both reported from use.

A position dated into the future was invisible. loadOpenPositions required
valid_from <= today, so a position decided now and effective at the quarter
boundary appeared nowhere until the day it began. The database already held
one — 60000824 "Neue Position", effective 01.09. — created through the
application and shown on no screen since.

Future positions now have their own section rather than joining the vacancy
list. They are a different statement: "nobody is here" and "this does not
exist yet" should not be counted together, and a position starting 01.10.
read as a vacancy nobody was filling.

Positions could only be created and deleted. Fixing a typo in the job title
meant deleting and recreating — with a new position number, which appears in
job postings, budgets and audit entries, and whose trail then breaks.
update_position keeps the number and records old and new values per field,
using the audit detail added earlier today.

Three things it refuses, as guards rather than remarks:

  - Moving an occupied position to another unit. That is a transfer, with
    history and reporting line, and belongs to the person — otherwise
    someone changes department silently.
  - Ending an occupied position, which would leave an assignment without
    one.
  - A second chief position in a unit, or an end before the start.

Verified against the live database, all rolled back: each guard fires with
its own message, the permitted edits go through, the audit entry carries the
changed fields. Open positions stay at 9 and the future one now appears in
its own section.

ESLint caught me priming the dialog's fields from an effect. Replaced by a
key on the component, so React rebuilds it per position and the fields
initialise from props — which also removes the flash of the previous
position's values on second open.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

components/positions/PositionsPageClient.tsx

@@ -6,9 +6,10 @@ import { useState } from "react";
 import { deletePosition } from "@/actions/positions";
 import { Button } from "@/components/ui/Button";
 import { useToast } from "@/components/ui/Toast";
-import { fmtDate, todayIso } from "@/lib/format";
+import { fmtDate } from "@/lib/format";
 import type { OpenPositionResolved } from "@/lib/positions";
 import { CreatePositionModal, type UnitOption } from "./CreatePositionModal";
+import { EditPositionModal } from "./EditPositionModal";
 
 type OpenPositionWithDays = OpenPositionResolved & { daysOpen: number };
 
@@ -21,8 +22,14 @@ export function PositionsPageClient({ openPositions, units }: PositionsPageClien
   const { showToast } = useToast();
   const router = useRouter();
   const [createOpen, setCreateOpen] = useState(false);
+  const [editing, setEditing] = useState<OpenPositionWithDays | null>(null);
   const [deletingId, setDeletingId] = useState<string | null>(null);
-  const today = todayIso();
+
+  // Getrennt, weil es zwei verschiedene Aussagen sind: „hier fehlt jemand"
+  // und „das entsteht erst". In einer Liste vermischt liest sich eine
+  // Planstelle zum 01.10. wie eine Vakanz, um die sich niemand kümmert.
+  const offen = openPositions.filter((p) => !p.future);
+  const kuenftig = openPositions.filter((p) => p.future);
 
   async function handleDelete(id: string) {
     setDeletingId(id);
@@ -36,53 +43,86 @@ export function PositionsPageClient({ openPositions, units }: PositionsPageClien
     }
   }
 
+  function Karte({ p }: { p: OpenPositionWithDays }) {
+    return (
+      <div className="relative flex flex-col rounded border border-border transition-colors focus-within:border-brand-500 hover:border-brand-500">
+        {/* Die ganze Karte öffnet den Änderungsdialog; der Papierkorb liegt
+            absolut darüber. Ein Knopf im Knopf wäre ungültiges HTML und mit
+            der Tastatur nicht erreichbar. */}
+        <button
+          type="button"
+          onClick={() => setEditing(p)}
+          aria-label={`Planstelle ${p.position_number} (${p.title}) ändern`}
+          className="flex flex-col items-start rounded p-3 pr-10 text-left
+                     focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
+        >
+          <span className="text-sm font-semibold text-ink">{p.title}</span>
+          <span className="text-xs text-ink-muted">
+            {p.position_number} · {p.orgLabel}
+          </span>
+          <span className="mt-1 text-xs text-ink-muted">
+            {p.is_chief ? "Leitungsplanstelle · " : ""}
+            {p.future ? `gültig ab ${fmtDate(p.valid_from)}` : `seit ${p.daysOpen} Tagen unbesetzt`}
+          </span>
+          {p.valid_to && <span className="text-xs font-semibold text-warning-text">endet am {fmtDate(p.valid_to)}</span>}
+          {p.managerName && <span className="text-xs text-ink-muted">berichtet an {p.managerName}</span>}
+        </button>
+
+        <Button
+          variant="icon"
+          onClick={() => handleDelete(p.id)}
+          pending={deletingId === p.id}
+          aria-label={`Planstelle ${p.position_number} (${p.title}) entfernen`}
+          className="absolute right-2 top-2 hover:!text-danger-solid"
+        >
+          <Trash2 className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col gap-6">
-      <div className="rounded border border-border bg-white p-4">
+      <section className="rounded border border-border bg-white p-4">
         <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
-          <h2 className="text-sm font-bold text-ink">Unbesetzte Planstellen ({openPositions.length})</h2>
+          <h2 className="text-sm font-bold text-ink">Unbesetzte Planstellen ({offen.length})</h2>
           <Button onClick={() => setCreateOpen(true)}>
             <Plus className="h-4 w-4" />
             Planstelle anlegen
           </Button>
         </div>
-        {openPositions.length === 0 ? (
-          <p className="text-sm text-ink-muted">Derzeit ist jede Planstelle besetzt.</p>
+        {offen.length === 0 ? (
+          <p className="text-sm text-ink-muted">Derzeit ist jede geltende Planstelle besetzt oder vergeben.</p>
         ) : (
           <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
-            {openPositions.map((p) => {
-              const notYetValid = p.valid_from > today;
-              return (
-                <div key={p.id} className="flex flex-col rounded border border-border p-3">
-                  <div className="flex items-start justify-between gap-2">
-                    <div className="text-sm font-semibold text-ink">{p.title}</div>
-                    <Button
-                      variant="icon"
-                      onClick={() => handleDelete(p.id)}
-                      pending={deletingId === p.id}
-                      aria-label={`Planstelle ${p.position_number} (${p.title}) entfernen`}
-                      className="-mr-1 -mt-1 hover:!text-danger-solid"
-                    >
-                      <Trash2 className="h-3.5 w-3.5" />
-                    </Button>
-                  </div>
-                  <div className="text-xs text-ink-muted">
-                    {p.position_number} · {p.orgLabel}
-                  </div>
-                  <div className="mt-1 text-xs text-ink-muted">
-                    {p.is_chief ? "Leitungsplanstelle · " : ""}
-                    seit {p.daysOpen} Tagen unbesetzt
-                  </div>
-                  {p.managerName && <div className="text-xs text-ink-muted">berichtet an {p.managerName}</div>}
-                  {notYetValid && <div className="mt-1 text-xs font-semibold text-warning-text">Gültig ab {fmtDate(p.valid_from)}</div>}
-                </div>
-              );
-            })}
+            {offen.map((p) => (
+              <Karte key={p.id} p={p} />
+            ))}
           </div>
         )}
-      </div>
+      </section>
+
+      {kuenftig.length > 0 && (
+        <section className="rounded border border-border bg-white p-4">
+          <h2 className="text-sm font-bold text-ink">Künftige Planstellen ({kuenftig.length})</h2>
+          <p className="mb-3 mt-1 text-xs text-ink-muted">
+            Beschlossen, aber noch nicht gültig. Sie zählen nicht als Vakanz und lassen sich bis zum Beginn ändern.
+          </p>
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+            {kuenftig.map((p) => (
+              <Karte key={p.id} p={p} />
+            ))}
+          </div>
+        </section>
+      )}
 
       <CreatePositionModal open={createOpen} onClose={() => setCreateOpen(false)} units={units} />
+      {/* `key` sorgt dafür, dass React je Planstelle einen frischen Dialog
+          baut — sonst blieben beim zweiten Öffnen die Werte des ersten
+          stehen. */}
+      {editing && (
+        <EditPositionModal key={editing.id} position={editing} units={units} onClose={() => setEditing(null)} />
+      )}
     </div>
   );
 }