email wiring

frontend/src/components/AddEmployeeForm.jsx

@@ -1,8 +1,7 @@
-import { ArrowRight, Plus } from "lucide-react";
-import { useMemo, useState } from "react";
-import { createOrgMember } from "../api";
+import { Plus } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { createOrgMember, createOrgSection, listOrgSections } from "../api";
 
-const GROUP_OPTIONS = ["Admin", "HR", "Engineering", "Finance"];
 const EMAIL_LOCAL_PATTERN = /^[A-Za-z0-9](?:[A-Za-z0-9._-]{0,62}[A-Za-z0-9])?$/;
 
 function RequiredLabel({ children }) {
@@ -58,13 +57,19 @@ export default function AddEmployeeForm({
   onCancel,
 }) {
   const token = sessionStorage.getItem("agmail_access_token");
+  const [sections, setSections] = useState([]);
+  const [sectionsLoading, setSectionsLoading] = useState(true);
+  const [showNewSection, setShowNewSection] = useState(false);
+  const [newSectionName, setNewSectionName] = useState("");
+  const [sectionError, setSectionError] = useState("");
+  const [creatingSection, setCreatingSection] = useState(false);
   const [form, setForm] = useState({
     first_name: "",
     last_name: "",
     email_local: "",
     invitation_email: "",
     org_role: "user",
-    groups: [],
+    section_id: null,
     send_invitation: true,
     force_password_change: true,
     password: "",
@@ -73,6 +78,30 @@ export default function AddEmployeeForm({
   const [submitAttempted, setSubmitAttempted] = useState(false);
   const [status, setStatus] = useState({ loading: false, error: "" });
 
+  useEffect(() => {
+    let cancelled = false;
+    setSectionsLoading(true);
+    listOrgSections(token)
+      .then((items) => {
+        if (!cancelled) {
+          setSections(items);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setSections([]);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setSectionsLoading(false);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [token]);
+
   const formValid = useMemo(
     () => Object.keys(validateForm(form, companyDomain)).length === 0,
     [form, companyDomain],
@@ -89,16 +118,32 @@ export default function AddEmployeeForm({
     });
   }
 
-  function toggleGroup(group) {
-    setForm((current) => {
-      const exists = current.groups.includes(group);
-      return {
-        ...current,
-        groups: exists
-          ? current.groups.filter((item) => item !== group)
-          : [...current.groups, group],
-      };
-    });
+  function selectSection(sectionId) {
+    setForm((current) => ({
+      ...current,
+      section_id: current.section_id === sectionId ? null : sectionId,
+    }));
+  }
+
+  async function handleCreateSection() {
+    const name = newSectionName.trim();
+    if (!name) {
+      setSectionError("Enter a section name.");
+      return;
+    }
+    setCreatingSection(true);
+    setSectionError("");
+    try {
+      const section = await createOrgSection({ name }, token);
+      setSections((current) => [...current, section].sort((a, b) => a.name.localeCompare(b.name)));
+      setForm((current) => ({ ...current, section_id: section.id }));
+      setNewSectionName("");
+      setShowNewSection(false);
+    } catch (error) {
+      setSectionError(error.message);
+    } finally {
+      setCreatingSection(false);
+    }
   }
 
   async function handleSubmit(event) {
@@ -121,6 +166,7 @@ export default function AddEmployeeForm({
           invitation_email: form.send_invitation
             ? form.invitation_email.trim().toLowerCase()
             : undefined,
+          section_id: form.section_id || undefined,
           org_role: form.org_role,
           send_invitation: form.send_invitation,
           force_password_change: form.force_password_change,
@@ -134,7 +180,7 @@ export default function AddEmployeeForm({
         email_local: "",
         invitation_email: "",
         org_role: "user",
-        groups: [],
+        section_id: null,
         send_invitation: true,
         force_password_change: true,
         password: "",
@@ -221,19 +267,51 @@ export default function AddEmployeeForm({
         </SetupField>
 
         <fieldset className="people-groups-field">
-          <legend>Groups</legend>
+          <legend>Section</legend>
+          <p className="org-setup-field-hint people-section-hint">
+            Department or team. Group emails are managed separately under Groups.
+          </p>
           <div className="people-groups-options">
-            {GROUP_OPTIONS.map((group) => (
-              <button
-                key={group}
-                type="button"
-                className={`people-group-chip${form.groups.includes(group) ? " active" : ""}`}
-                onClick={() => toggleGroup(group)}
-              >
-                {group}
-              </button>
-            ))}
+            {sectionsLoading ? (
+              <span className="people-section-loading">Loading sections…</span>
+            ) : (
+              sections.map((section) => (
+                <button
+                  key={section.id}
+                  type="button"
+                  className={`people-group-chip${form.section_id === section.id ? " active" : ""}`}
+                  onClick={() => selectSection(section.id)}
+                >
+                  {section.name}
+                </button>
+              ))
+            )}
+            <button
+              type="button"
+              className="people-group-chip people-section-add"
+              onClick={() => setShowNewSection((current) => !current)}
+            >
+              + Add section
+            </button>
           </div>
+          {showNewSection && (
+            <div className="people-section-create">
+              <input
+                value={newSectionName}
+                onChange={(event) => setNewSectionName(event.target.value)}
+                placeholder="e.g. Marketing"
+              />
+              <button
+                type="button"
+                className="button button-outline"
+                onClick={handleCreateSection}
+                disabled={creatingSection}
+              >
+                {creatingSection ? "Creating…" : "Create"}
+              </button>
+            </div>
+          )}
+          {sectionError && <span className="org-setup-field-error" role="alert">{sectionError}</span>}
         </fieldset>
 
         <SetupField