Functies geintegreerd in personeelsformulier (kiezen of nieuwe typen), aparte Functies-tab verwijderd

frontend/src/pages.jsx

@@ -271,7 +271,18 @@ export function PersonenPage() {
   const [form, setForm] = useState(leegLeerling);
   const [editId, setEditId] = useState(null);
   const [filter, setFilter] = useState("");
-  const [hoofdtab, setHoofdtab] = useState("personen");
+  const [nieuweFunctie, setNieuweFunctie] = useState("");
+
+  async function maakFunctie() {
+    const naam = nieuweFunctie.trim();
+    if (!naam) return;
+    try {
+      const f = await createResource("functies", { naam });
+      setFuncties((lijst) => [...lijst, f]);
+      setForm((prev) => ({ ...prev, functies: [...prev.functies, f.id] }));
+      setNieuweFunctie("");
+    } catch (e) { setError(e.message); }
+  }
 
   function laadHulplijsten() {
     listResource("groepen").then(setGroepen).catch(() => {});
@@ -355,26 +366,9 @@ export function PersonenPage() {
     : filter === "medewerker" ? items.filter((p) => p.rol !== "leerling")
     : items;
 
-  if (hoofdtab === "functies") {
-    return (
-      <section>
-        <h1>Personen &amp; functies</h1>
-        <div className="tabbar">
-          <button className="tab" onClick={() => setHoofdtab("personen")}>Personen</button>
-          <button className="tab on" onClick={() => setHoofdtab("functies")}>Functies</button>
-        </div>
-        <FunctiesPage />
-      </section>
-    );
-  }
-
   return (
     <section>
-      <h1>Personen &amp; functies</h1>
-      <div className="tabbar">
-        <button className="tab on" onClick={() => setHoofdtab("personen")}>Personen</button>
-        <button className="tab" onClick={() => setHoofdtab("functies")}>Functies</button>
-      </div>
+      <h1>Personen</h1>
       <p className="muted">Personeel en leerlingen staan los van elkaar. Kies wat je wilt toevoegen.</p>
       <Foutmelding msg={error} />
 
@@ -411,11 +405,20 @@ export function PersonenPage() {
         {modus === "medewerker" && (
           <>
             <div className="leden-keuze">
-              <div className="muted small">Functies:</div>
+              <div className="muted small">Functies (klik om te kiezen, of typ een nieuwe):</div>
               <div className="chips">
                 {functies.map((f) => <button type="button" key={f.id} className={form.functies.includes(f.id) ? "chip on" : "chip"} onClick={() => toggle("functies", f.id)}>{f.naam}</button>)}
                 {functies.length === 0 && <span className="muted small">Nog geen functies.</span>}
               </div>
+              <div className="form-row" style={{ marginTop: 6 }}>
+                <input
+                  placeholder="Nieuwe functie"
+                  value={nieuweFunctie}
+                  onChange={(e) => setNieuweFunctie(e.target.value)}
+                  onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); maakFunctie(); } }}
+                />
+                <button type="button" className="btn" onClick={maakFunctie}>+ Functie</button>
+              </div>
             </div>
             <div className="leden-keuze">
               <div className="muted small">Vakken die gegeven kunnen worden{form.rol === "leerkracht" ? " (theorievakken worden automatisch gekoppeld)" : ""}:</div>