add users

frontend/src/components/CompanyPeople.jsx

@@ -9,7 +9,8 @@ import {
   XCircle,
 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { createOrgMember, listOrgMembers } from "../api";
+import { listOrgMembers } from "../api";
+import AddEmployeeForm from "./AddEmployeeForm";
 
 const STATUS_TABS = [
   { key: "all", label: "All users" },
@@ -18,8 +19,6 @@ const STATUS_TABS = [
   { key: "suspended", label: "Suspended" },
 ];
 
-const GROUP_OPTIONS = ["Admin", "HR", "Engineering", "Finance"];
-
 function initials(firstName, lastName) {
   return `${firstName?.[0] || ""}${lastName?.[0] || ""}`.toUpperCase();
 }
@@ -60,57 +59,6 @@ function StatusBadge({ status }) {
 }
 
 function AddUserPanel({ companyDomain, onClose, onCreated }) {
-  const token = sessionStorage.getItem("agmail_access_token");
-  const [form, setForm] = useState({
-    first_name: "",
-    last_name: "",
-    email_local: "",
-    org_role: "user",
-    groups: [],
-    send_invitation: true,
-    password: "",
-  });
-  const [status, setStatus] = useState({ loading: false, error: "" });
-
-  function updateField(field, value) {
-    setForm((current) => ({ ...current, [field]: value }));
-  }
-
-  function toggleGroup(group) {
-    setForm((current) => {
-      const exists = current.groups.includes(group);
-      return {
-        ...current,
-        groups: exists
-          ? current.groups.filter((item) => item !== group)
-          : [...current.groups, group],
-      };
-    });
-  }
-
-  async function handleSubmit(event) {
-    event.preventDefault();
-    setStatus({ loading: true, error: "" });
-    const email = `${form.email_local.trim().toLowerCase()}@${companyDomain}`;
-    try {
-      const member = await createOrgMember(
-        {
-          first_name: form.first_name.trim(),
-          last_name: form.last_name.trim(),
-          email,
-          org_role: form.org_role,
-          send_invitation: form.send_invitation,
-          password: form.send_invitation ? undefined : form.password,
-        },
-        token,
-      );
-      onCreated?.(member);
-      onClose();
-    } catch (error) {
-      setStatus({ loading: false, error: error.message });
-    }
-  }
-
   return (
     <div className="people-drawer-scrim" onClick={onClose}>
       <aside
@@ -126,109 +74,14 @@ function AddUserPanel({ companyDomain, onClose, onCreated }) {
           </button>
         </header>
 
-        <form className="people-drawer-form" onSubmit={handleSubmit}>
-          <div className="people-drawer-row">
-            <label>
-              First name <span aria-hidden="true">*</span>
-              <input
-                required
-                value={form.first_name}
-                onChange={(event) => updateField("first_name", event.target.value)}
-                placeholder="Rahul"
-              />
-            </label>
-            <label>
-              Last name <span aria-hidden="true">*</span>
-              <input
-                required
-                value={form.last_name}
-                onChange={(event) => updateField("last_name", event.target.value)}
-                placeholder="Sharma"
-              />
-            </label>
-          </div>
-
-          <label>
-            Email <span aria-hidden="true">*</span>
-            <div className="people-email-field">
-              <input
-                required
-                value={form.email_local}
-                onChange={(event) => updateField("email_local", event.target.value)}
-                placeholder="rahul"
-              />
-              <span>@{companyDomain}</span>
-            </div>
-            <small>This will be their login email address</small>
-          </label>
-
-          <label>
-            Role
-            <select
-              value={form.org_role}
-              onChange={(event) => updateField("org_role", event.target.value)}
-            >
-              <option value="user">User</option>
-              <option value="admin">User Admin</option>
-            </select>
-            <small>Users can access email. User Admins can manage people.</small>
-          </label>
-
-          <fieldset className="people-groups-field">
-            <legend>Groups</legend>
-            <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>
-              ))}
-            </div>
-            <small>Group assignment is saved locally for now.</small>
-          </fieldset>
-
-          <label className="people-toggle-row">
-            <span>
-              <strong>Send invitation email</strong>
-              <small>They will receive an activation link to set their password.</small>
-            </span>
-            <input
-              type="checkbox"
-              checked={form.send_invitation}
-              onChange={(event) => updateField("send_invitation", event.target.checked)}
-            />
-          </label>
-
-          {!form.send_invitation && (
-            <label>
-              Password <span aria-hidden="true">*</span>
-              <input
-                required
-                type="password"
-                value={form.password}
-                onChange={(event) => updateField("password", event.target.value)}
-                placeholder="Set an initial password"
-                minLength={8}
-              />
-              <small>Must include uppercase, lowercase, and a number.</small>
-            </label>
-          )}
-
-          {status.error && <p className="form-error" role="alert">{status.error}</p>}
-
-          <footer className="people-drawer-actions">
-            <button type="button" className="button button-outline" onClick={onClose}>
-              Cancel
-            </button>
-            <button className="button button-purple" type="submit" disabled={status.loading}>
-              {status.loading ? "Creating…" : "Create user"}
-            </button>
-          </footer>
-        </form>
+        <AddEmployeeForm
+          companyDomain={companyDomain}
+          onCreated={(member) => {
+            onCreated?.(member);
+            onClose();
+          }}
+          onCancel={onClose}
+        />
       </aside>
     </div>
   );